/* The top-left HUD (client/js/hudcards.js, docs/hud-cards.md): the Poké badge, the player card and the squad's mini cards.
   --k scales it like the rest of the HUD (style.css). The round portraits are canvases at art size (client/js/portraitring.js)
   scaled by whole device pixels with the pixel icons' rule (client/js/pixicons.js): --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, never blurred. The tactic and LEAD
   badges are pixel badges too (client/js/pixbadge.js, style.css .pxbadge). */
#hud-left { position: absolute; top: calc(8px + var(--sat)); left: calc(10px + var(--sal)); width: calc(246px * var(--k)); display: flex; flex-direction: column; align-items: stretch; gap: calc(4px * var(--k)); }
.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 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 player card: [round portrait + Lv tag] [name / rank + IQ / HP / EXP + Belly], then the chips and the details */
#pcard { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(7px * var(--k)); padding: calc(5px * var(--k)) calc(8px * var(--k)) calc(5px * var(--k)) calc(5px * var(--k)); cursor: pointer; }
#pcard .pc-portrait { position: relative; align-self: start; margin: 0 0 calc(7px * var(--k)); line-height: 0; }
/* the Lv tag: the world's Lv plate (an <img>, levelsync.js badgeHtml), --lvp tall (2x at 720p and 1080p) */
#pcard { --lvp: calc(20px * var(--k)); }
#pcard .lvtag { bottom: calc(-7px * var(--k)); padding: 0; border: 0; background: none; line-height: 0; }
#pcard .pc-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'head head' 'rank iq' 'hp hp' 'sub sub'; align-items: center; align-content: start; gap: calc(3px * var(--k)) calc(6px * var(--k)); min-width: 0; }
#pcard .pc-head { grid-area: head; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: calc(16px * var(--k)); line-height: 1.1; }
#pcard .pc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gold); }
#pcard .pc-rank { grid-area: rank; display: inline-flex; align-items: center; gap: calc(3px * var(--k)); min-width: 0; overflow: hidden; font-size: calc(12px * var(--k)); line-height: 1.2; white-space: nowrap; cursor: pointer; }   /* opens the Team Rank window */
#pcard .pc-rank .rk-em { --want: 16px; }   /* the rank emblem (pixicons.js rankIcon) at 1x its art */
#pcard .pc-rank .rk-t { overflow: hidden; text-overflow: ellipsis; }
/* the IQ badge: the IQ mark and the number on a violet plate with a dark rim */
.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: #2c1660; box-shadow: 0 0 0 1px #100818;
  font-size: calc(12px * var(--k)); line-height: 1.3; color: #e8dcff; white-space: nowrap; cursor: help; }
.iqb .gi { --want: calc(12px * var(--k)); }
#pcard .pc-iq { grid-area: iq; justify-self: end; }
#pcard .pc-hp { grid-area: hp; display: flex; align-items: center; gap: calc(5px * var(--k)); min-width: 0; }
#pcard .pc-hp .bar { --rows: 3; }
#pcard .pc-hpt { flex: none; min-width: calc(40px * var(--k)); text-align: right; font-size: calc(12px * var(--k)); line-height: 1; }
#pcard .pc-sub { grid-area: sub; display: flex; align-items: center; gap: calc(6px * var(--k)); min-width: 0; }
#pcard .pc-sub .bar { --rows: 2; }
#pcard .pc-xp { flex: 3; }
#pcard .pc-belly { flex: 2; display: flex; align-items: center; gap: calc(2px * var(--k)); min-width: 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-icons { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; margin-top: calc(1px * var(--k)); }
#pcard .pc-icons[hidden] { display: none; }
#pcard .pc-icons .chip { padding: 0 calc(5px * var(--k)); font-size: calc(11px * var(--k)); line-height: 1.4; }
#pcard .pc-icons .chip.ic { padding: 1px 3px; line-height: 0; }
#pcard .pc-icons .gi { --want: calc(14px * var(--k)); }
#pcard .pc-portrait .held-badge { position: absolute; right: calc(-4px * var(--k)); top: calc(-4px * var(--k)); width: calc(18px * var(--k)); height: calc(18px * var(--k)); }
#pcard .pc-portrait .held-badge .itm { --want: calc(14px * var(--k)); }

/* the squad: a column of slim cards, [portrait] [name, Lv, tactic badge or LEAD, +] [HP bar and number] [EXP bar]; an open
   card'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 head' 'face hp' 'face xp'; align-items: center; align-content: center; gap: calc(2px * var(--k)) calc(6px * var(--k)); min-width: 0;
  padding: calc(3px * var(--k)) calc(6px * var(--k)) calc(3px * var(--k)) calc(3px * var(--k)); cursor: pointer; }
#squad .sm-face { grid-area: face; position: relative; line-height: 0; }
#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.15; }
#squad .sname { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#squad { --lvq: calc(16.5px * var(--k)); }   /* the Lv plate (11 art px): 1x at 720p, 2x at 1080p, like the badges */
#squad .slv { flex: none; margin-right: auto; line-height: 0; }   /* the badge and + to the right */
#squad .stac, #squad .sm-lead { flex: none; line-height: 0; }
#squad .sm-head .pxbadge { --want: calc(13.5px * var(--k)); }   /* 1x at 720p, 2x at 1080p */
#squad .sx { flex: none; width: calc(16px * var(--k)); height: calc(16px * var(--k)); font-size: calc(7px * var(--k)); }
#squad .sm-hp { grid-area: hp; display: flex; align-items: center; gap: calc(5px * var(--k)); min-width: 0; }
#squad .sm-hp .bar { --rows: 3; }
#squad .sm-hpt { flex: none; min-width: calc(38px * var(--k)); text-align: right; font-size: calc(12px * var(--k)); line-height: 1; }
#squad .xprow { grid-area: xp; --rows: 2; margin-right: calc(43px * var(--k)); }   /* under the HP bar, not the number */
#squad .sm-shiny { position: absolute; left: -2px; top: -2px; line-height: 0; }
#squad .sm-shiny .gi { --want: calc(10px * var(--k)); }
#squad .sm-face .held-badge { position: absolute; right: -4px; top: -4px; width: calc(15px * var(--k)); height: calc(15px * var(--k)); }
#squad .sm-face .held-badge .itm { --want: calc(12px * var(--k)); }
#squad .sm-st { position: absolute; right: -3px; bottom: -3px; line-height: 0; padding: 1px; border-radius: 50%; background: #0a0e30; box-shadow: 0 0 0 1px #100818; cursor: help; }
#squad .sm-st .gi { --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: the shop's .sd-stats / .sd-move (style.css, the Kecleon shop) share the names */
.sdetail .sd-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; color: inherit; font-size: calc(13px * var(--k)); }
.sdetail .sd-move { flex-direction: row; align-items: center; gap: 4px; padding: 0; border: 0; border-radius: 0; background: none; }
.sdetail .sd-nm { margin-top: 0; }
.sdetail .sd-num { color: #cfd6ff; }
/* the original game's look (F9): the 9-slice frames bring their own border */
body.rom-ui #pcard, body.rom-ui #squad .scard, body.rom-ui #hud-coins { padding: 0 2px; }

/* phones: smaller rings (2 device px per art pixel on a 3x screen), the rank's emblem on the name's row */
html.form-phone #hud-left { width: calc(212px * var(--k)); gap: 3px; }
html.form-phone .hring { --want: 32px; }
html.form-phone .hring.mini { --want: 22px; }
html.form-phone #hud-coins { font-size: 12px; padding: 0 6px 0 3px; }
html.form-phone #pcard { padding: 4px 6px 3px 4px; column-gap: 6px; }
html.form-phone #pcard { --lvp: 15px; }
html.form-phone #pcard .pc-body { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: 'head rank iq' 'hp hp hp' 'sub sub sub'; row-gap: 3px; column-gap: 4px; }
html.form-phone #pcard .pc-head { font-size: 13px; }
html.form-phone #pcard .pc-rank .rk-t { display: none; }
html.form-phone #pcard .pc-rank .rk-em { --want: 11px; }
html.form-phone .iqb { font-size: 10px; padding: 0 3px 0 2px; }
html.form-phone .iqb .gi { --want: 10px; }
html.form-phone #pcard .pc-hpt { font-size: 11px; min-width: 34px; }
html.form-phone #pcard .pc-icons .gi { --want: 12px; }
html.form-phone #pcard .pc-portrait { margin-bottom: 4px; }
html.form-phone #pcard .lvtag { bottom: -4px; }
/* phone squad cards: one line of name, Lv and badge over the HP bar; the EXP bar is in the details (a long-press) */
html.form-phone #squad { gap: 2px; }
html.form-phone #squad .scard { grid-template-areas: 'face head' 'face hp'; padding: 2px 5px 2px 2px; column-gap: 4px; row-gap: 1px; }
html.form-phone #squad .sm-head { font-size: 11px; gap: 3px; }
html.form-phone #squad { --lvq: 12px; }   /* 3 device px per art pixel on a 3x screen */
html.form-phone #squad .sm-head .pxbadge { --want: 10px; }   /* 3 device px per art pixel on a 3x screen */
html.form-phone #squad .sm-hpt { font-size: 10px; min-width: 30px; }
html.form-phone #squad .xprow { display: none; }
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, html.form-phone #squad .sm-shiny .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 * (212px * 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 (main.js --hudtop-h); the badge sits beside the
   zone bar instead, which keeps clear of it (--coins-w: hudcards.js) */
html.form-phone.portrait #hud-left { top: calc(max(40px * var(--k), var(--hudtop-h, 0px) + 14px) + var(--sat)); width: min(calc(212px * var(--k)), calc(100vw - 170px)); }
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)); }