/* The top-left HUD (hud/hudcards.js): the Poké badge, the leader's frame and the crew's rows, straight on the map (no
   panel; the details are windows). --k scales it like the rest of the HUD.
   The round portraits are canvases at art size scaled by whole device pixels with the pixel icons' rule: --want is about
   the size, --ip one art pixel, so a ring is 46 / 34 px on a 1x screen and steps in whole pixels elsewhere. Every badge is
   a pixel badge (.pxbadge), --bdg tall: 2x from 1080p down (the tiny font can't be read at 1x on a 720p screen), more on
   big screens. Name plates, bars and the HP number are pixel canvases too (.hpx), at the badges' art pixel (--ap: --bdg
   over the badges' 9 rows, in whole device pixels).
   --hl-dw: the column's width, wide enough for 2-px art (153 art px) on a low-resolution screen; #hud-top keeps clear of it. */
:root { --hl-dw: max(calc(246px * var(--k)), calc(306px / var(--pxdpr, 1))); }
#hud-left { position: absolute; top: calc(8px + var(--sat)); left: calc(10px + var(--sal)); width: var(--hl-dw); display: flex; flex-direction: column; align-items: stretch; gap: calc(4px * var(--k));
  --bdg: max(calc(18 * var(--u)), calc(13.5px * var(--k)));   /* at least 2 device px per art pixel */
  --u: calc(1px / var(--pxdpr, 1) / var(--pxz, 1)); --ap: max(var(--u), round(nearest, calc(var(--bdg) / 9 - var(--u) / 16), var(--u))); }
@supports not (width: round(nearest, 10px, 3px)) { #hud-left { --ap: calc(var(--bdg) / 9); } }
#hud-left .hpx { display: block; flex: none; width: calc(var(--ap) * var(--gw)); height: calc(var(--ap) * var(--gh)); image-rendering: pixelated; }
.hring { --want: calc(46px * var(--k)); --gw: 46; --gh: 46;
  --u: calc(1px / var(--pxdpr, 1) / var(--pxz, 1));
  --ip: max(var(--u), round(nearest, calc(var(--want) / var(--gh) - var(--u) / 16), var(--u)));
  display: block; width: calc(var(--ip) * var(--gw)); height: calc(var(--ip) * var(--gh)); image-rendering: pixelated; }
@supports not (width: round(nearest, 10px, 3px)) { .hring { width: var(--want); height: var(--want); } }
.hring.mini { --want: calc(34px * var(--k)); --gw: 34; --gh: 34; }
/* the leader's 40-px ring at twice its art (80 px from 720p up), the crew's whole face at 1x (46 px) */
#pcard .hring { --want: calc(80px * var(--k)); }
#squad .hring { --want: calc(46px * var(--k)); }
#hud-left .pxbadge { --want: var(--bdg); }
#hud-left .sb, #hud-left .stac, #hud-left .sm-lead { flex: none; line-height: 0; }
#hud-left .stac { padding: 0; background: none; border: 0; }
#hud-left button.stac { cursor: pointer; }
/* the frame and the rows sit straight on the map, no panel: the theme's text tokens give way to the code's own light
   colours, and the text gets a hard 1-px dark outline so it reads on grass and water. The details (.sdetail) are a
   window of their own and keep the theme. */
#pcard > .pc-portrait, #pcard > .pc-body, #pcard > .pc-icons, #squad > .scard {
  --tx-hi: initial; --tx-dim: initial; --tx-faint: initial; --tx-gold: initial; --tx-good: initial; --tx-info: initial; --tx-pink: initial; --tx-bad: initial; --on-acc: initial;
  text-shadow: 1px 0 #100818, -1px 0 #100818, 0 1px #100818, 0 -1px #100818, 1px 1px #100818; }
#squad > .scard.controlled { box-shadow: none; }   /* the cyan ring marks who leads */
/* the segmented HP bar: SEGS slanted segments stepped in pixels, each 1/8 of the max HP, as wide as its box; the same
   colours in every window style: it sits on the map */
#hud-left .seg { display: block; min-width: 0; line-height: 0; }
/* the name plate: the full name (never cut) in the name-tag font on a dark plate with a stepped end; a name the tiny
   font can't draw falls back to the web font on a plain dark band */
#hud-left .pc-name, #squad .sname { flex: none; padding: 0 calc(10px * var(--k)) 0 calc(5px * var(--k)); background: var(--hud-plate, #0d1130); white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px * var(--k)) 100%, 0 100%); }
#hud-left .pc-name.px, #squad .sname.px { padding: 0; background: none; clip-path: none; line-height: 0; }

/* the Poké badge */
#hud-coins { align-self: flex-start; display: inline-flex; align-items: center; gap: calc(4px * var(--k)); padding: 0 calc(8px * var(--k)) 0 calc(4px * var(--k)); border-radius: 6px;
  font-size: calc(14px * var(--k)); line-height: 1.35; color: var(--gold); white-space: nowrap; cursor: help; }
#hud-coins .gi { --want: calc(12px * var(--k)); }

/* the leader's frame: [round portrait] [big HP number ... LEAD or your tactic / segmented HP / Belly / name plate + Lv +
   state badges], then the floor's badges and the details */
#pcard { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(7px * var(--k)); padding: calc(2px * var(--k)) 0; cursor: pointer; }
#pcard .pc-portrait { position: relative; align-self: center; line-height: 0; }
#pcard { --lvp: max(calc(22 * var(--u)), calc(20px * var(--k))); }   /* the Lv plate (11 art px): 2 device px per art pixel at least */
#pcard .pc-body { display: flex; flex-direction: column; justify-content: center; gap: calc(3px * var(--k)); min-width: 0; }
#pcard .pc-top { display: flex; align-items: flex-end; gap: calc(4px * var(--k)); min-width: 0; }
#pcard .pc-hpn { flex: none; line-height: 0; cursor: help; }
#pcard .pc-tac { margin-left: auto; }
#pcard .pc-belly { display: flex; align-items: center; gap: calc(3px * var(--k)); min-width: 0; }
#pcard .pc-belly .bl { flex: 1; display: block; min-width: 0; line-height: 0; }
#pcard .pc-belly .itm { --want: calc(12px * var(--k)); }
#pcard .pc-belly.low .itm { animation: hc-blink 0.8s steps(1, end) infinite; }   /* hungry: the apple blinks */
@keyframes hc-blink { 50% { visibility: hidden; } }
#pcard .pc-head { display: flex; align-items: center; gap: calc(5px * var(--k)); min-width: 0; font-size: calc(14px * var(--k)); line-height: 1.3; }
/* the Lv plate (an <img>) beside the name, not under the portrait */
#pcard .pc-head .lvtag { position: static; transform: none; flex: none; padding: 0; border: 0; background: none; line-height: 0; }
#pcard.lvup .pc-head .lvtag { animation-name: lvpop2; }
/* the state badges after the Lv plate: a second line when the name leaves no room, never cut */
#pcard .pc-head, #squad .sm-head { flex-wrap: wrap; row-gap: calc(2px * var(--k)); }
#pcard .pc-x, #squad .sm-x { flex: 0 1 auto; display: flex; flex-wrap: wrap; gap: calc(2px * var(--k)); min-width: 0; }
#pcard .pc-x:empty, #squad .sm-x:empty { display: none; }
#pcard > .sdetail { margin-top: calc(4px * var(--k)); padding: calc(6px * var(--k)) calc(9px * var(--k)); }
#pcard .pc-icons { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: calc(3px * var(--k)); min-width: 0; margin-top: calc(4px * var(--k)); }
#pcard .pc-icons[hidden] { display: none; }
#pcard .pc-portrait .held-badge { position: absolute; right: calc(2px * var(--k)); top: calc(2px * var(--k)); width: calc(22px * var(--k)); height: calc(22px * var(--k)); }
#pcard .pc-portrait .held-badge .itm { --want: calc(18px * var(--k)); }
#pcard .pc-st, #squad .sm-st { position: absolute; right: -3px; bottom: -3px; line-height: 0; padding: 1px; border-radius: 50%; background: var(--bg-1, #0a0e30); box-shadow: 0 0 0 1px #100818; cursor: help; }
#pcard .pc-st[hidden], #squad .sm-st[hidden] { display: none; }
#pcard .pc-st { right: calc(4px * var(--k)); bottom: calc(4px * var(--k)); }
#pcard .pc-st .gi { --want: calc(18px * var(--k)); }
#squad .sm-st .gi { --want: calc(12px * var(--k)); }
/* the rank and IQ in the details: a click on the rank opens the Team Rank window */
.sdetail .sd-rk { display: flex; align-items: center; gap: calc(8px * var(--k)); }
.sdetail .pc-rank { display: inline-flex; align-items: center; gap: calc(3px * var(--k)); cursor: pointer; }
.sdetail .pc-rank .rk-em { --want: 16px; }
.iqb { display: inline-flex; align-items: center; gap: calc(2px * var(--k)); padding: 0 calc(5px * var(--k)) 0 calc(3px * var(--k)); border: 1px solid #b888f0; border-radius: 3px; background: var(--bg-2, #2c1660); box-shadow: 0 0 0 1px #100818;
  font-size: calc(12px * var(--k)); line-height: 1.3; color: var(--tx-hi, #e8dcff); white-space: nowrap; cursor: help; }
.iqb .gi { --want: calc(12px * var(--k)); }

/* the crew: a column of slim rows, [portrait] [state badges ... tactic or LEAD / segmented HP / name plate + Lv, +]; an
   open row's details are the next element, a panel under it */
#squad { display: flex; flex-direction: column; gap: calc(3px * var(--k)); }
#squad .scard { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'face top' 'face hp' 'face head'; align-items: center; align-content: center; gap: calc(2px * var(--k)) calc(6px * var(--k)); min-width: 0;
  padding: calc(1px * var(--k)) 0 calc(1px * var(--k)) calc(6px * var(--k)); cursor: pointer; }
#squad .sm-face { grid-area: face; position: relative; line-height: 0; }
#squad .sm-top { grid-area: top; display: flex; justify-content: flex-end; align-items: center; min-width: 0; min-height: var(--bdg); }
#squad .sm-hp { grid-area: hp; }
#squad .sm-head { grid-area: head; display: flex; align-items: center; gap: calc(5px * var(--k)); min-width: 0; font-size: calc(13px * var(--k)); line-height: 1.3; }
#squad { --lvq: max(calc(22 * var(--u)), calc(16.5px * var(--k))); }   /* the Lv plate (11 art px): 2x from 1080p down, like the badges */
#squad .slv { flex: none; line-height: 0; }
#hud-left #squad .sx { flex: none; margin-left: auto; width: auto; height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; line-height: 0; }
#hud-left #squad .sx:hover .pxbadge { filter: brightness(1.25); }
#squad .sm-face .held-badge { position: absolute; right: -3px; top: -3px; width: calc(15px * var(--k)); height: calc(15px * var(--k)); }
#squad .sm-face .held-badge .itm { --want: calc(12px * var(--k)); }
#squad > .sdetail { display: none; margin: 0; border-top: 0; padding: calc(6px * var(--k)) calc(9px * var(--k)); }
#squad > .scard.open + .sdetail { display: block; }
/* the details' rows share the Kecleon shop's .sd-stats / .sd-move names */
/* stats two by two (a label and a 3-digit value per cell never run into the next one); moves one a line, whole names */
.sdetail .sd-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(3px * var(--k)) calc(6px * var(--k)); color: inherit; font-size: calc(13px * var(--k)); }
.sdetail .sd-stats > span { display: flex; justify-content: space-between; align-items: center; gap: calc(6px * var(--k)); min-width: 0; padding: calc(1px * var(--k)) calc(6px * var(--k)); line-height: 1.3; }
.sdetail .sd-moves { grid-template-columns: minmax(0, 1fr); gap: calc(2px * var(--k)); }
.sdetail .sd-move { flex-direction: row; align-items: center; gap: calc(5px * var(--k)); padding: 0; border: 0; border-radius: 0; background: none; }
.sdetail .sd-move > span:first-of-type { flex: 1 1 auto; min-width: 0; }
.sdetail .sd-nm { margin-top: 0; }
.sdetail .sd-num { color: var(--tx-hi, #cfd6ff); }
.sdetail .sd-iq .gi { --want: calc(12px * var(--k)); }
/* the original game's look (F9): the 9-slice frames bring their own border */
body.rom-ui #hud-coins { padding: 0 2px; }

/* phones: smaller rings (2 device px per art pixel on a 3x screen), badges at 3 device px per art pixel */
html.form-phone #hud-left { width: calc(196px * var(--k)); gap: 2px; --bdg: 10px; }
html.form-phone #pcard .hring { --want: 40px; }   /* 3 device px per art pixel on a 3x screen */
html.form-phone #squad .hring { --want: 22px; }   /* the 34-px ring (hudcards.js), 2 device px per art pixel */
html.form-phone #hud-coins { font-size: 12px; padding: 0 6px 0 3px; }
html.form-phone #pcard { padding: 1px 0; column-gap: 6px; }
html.form-phone #pcard { --lvp: 15px; }
html.form-phone #pcard .pc-body { gap: 2px; }
html.form-phone #pcard .pc-head { font-size: 11px; }
html.form-phone #pcard .pc-st { right: 1px; bottom: 1px; }
html.form-phone #pcard .pc-st .gi { --want: 12px; }
html.form-phone .iqb { font-size: 10px; padding: 0 3px 0 2px; }
html.form-phone .iqb .gi { --want: 10px; }
html.form-phone #squad { gap: 1px; }
html.form-phone #squad .scard { padding: 1px 0 1px 4px; column-gap: 4px; row-gap: 1px; }
html.form-phone #squad .sm-head { font-size: 10px; gap: 3px; }
html.form-phone #squad { --lvq: 12px; }   /* 3 device px per art pixel on a 3x screen */
html.form-phone #squad .sm-face .held-badge { right: -3px; top: -3px; width: 13px; height: 13px; }
html.form-phone #squad .sm-face .held-badge .itm { --want: 10px; }
html.form-phone #squad .sm-st .gi { --want: 10px; }
/* phone landscape: the Poké badge beside the player card, not over it (the column stays short above the stick) */
html.form-phone.landscape #hud-coins { position: absolute; left: calc(100% + 4px); top: 0; }
html.form-phone.landscape #hud-top { max-width: calc(100vw - 2 * (196px * var(--k) + var(--coins-w, 72px) + 8px) - 16px - var(--sal) - var(--sar)); }
/* phone portrait: the cards start below the zone bar and any flag under it (--hudtop-h); the badge sits beside the zone
   bar instead, which keeps clear of it (--coins-w) */
html.form-phone.portrait { --hl-w: min(calc(238px * var(--k)), calc(100vw - 170px)); }   /* the column's width: the objective stops short of it (journal.css) */
html.form-phone.portrait #hud-left { top: calc(max(40px * var(--k), var(--hudtop-h, 0px) + 14px) + var(--sat)); width: var(--hl-w); }
/* phone portrait has the room for a bigger column: names, HP numbers, badges and Lv plates at 4 device px per art pixel
   on a 3x phone (3 on landscape, short of height above the stick), your ring at 4 and the crew's at 3 */
html.form-phone.portrait #hud-left { --bdg: 12.5px; }
html.form-phone.portrait #pcard .hring { --want: 53.5px; }
html.form-phone.portrait #squad { --lvq: 15px; }
html.form-phone.portrait #squad .hring { --want: 34px; }
html.form-phone.portrait #squad .sm-head { font-size: 11px; }
html.form-phone.portrait #hud-coins { position: fixed; top: calc(8px + var(--sat)); left: calc(8px + var(--sal)); }
html.form-phone.portrait #hud-top { max-width: calc(100vw - 2 * (var(--coins-w, 72px) + 14px) - var(--sal) - var(--sar)); }