/* css/hud.css (WP4a) — HUD over the scene like docs/reference-ui.webp: top bar (profile card · league crown · cash /
   gem pills · gear), goal cards (left), round coffee / crew buttons, bottom nav.
   Visual pass 2 (docs/DECISIONS.md): every value comes from the tokens in css/main.css. ONE HUD block everywhere —
   flat --panel, 2px --line, --r-md, a hard 3 px bottom edge (--sh-edge-sm), --hud-h tall in the top bar; pressed it
   sinks 2 px and the edge shrinks by 2. No gradients, glows, inset highlights or text shadows. Type: amounts 16/900,
   goal titles 14/900, meta lines 12/800. Colour by role only: green = income / claim / progress, yellow = level + XP
   bar + the league crown, pink = the fans glyph, red = badges and dots.
   #hud ignores pointer events; its direct children get them back (main.css), so every wrapper below turns them
   off again and only the real controls take taps (the scene stays pannable between them). */

:root {
  --hud-h: 52px; /* every top-bar block, and the goal card's minimum */
  --z-nav: 55; /* above #layer-sheets/#layer-qc/#layer-modals, under #layer-toasts (tutorial) and #loading */
  --nav-h: 70px;
  --nav-space: calc(var(--nav-h) + max(8px, var(--safe-bottom))); /* what the bar covers at the bottom */
  /* 2026-10-21: where the bottom-left speech bubbles (Kim's „new system” pop, the talking cast, the „Co teraz?” chip)
     sit so they never cover a HUD control: desktop — above the nav, right of the round skill / coffee column (52 px +
     gap); phones — above the crown / Sklep / Szafa row (.hud-dock, 52 px at safe + 84 px) */
  --bubble-bottom: calc(var(--nav-space) + 8px);
  --bubble-left: calc(max(8px, var(--safe-left)) + 64px);
}
@media not all and (min-width: 900px) and (orientation: landscape) {
  :root {
    --bubble-bottom: calc(max(8px, var(--safe-bottom)) + 84px + 52px + 10px);
    --bubble-left: max(8px, var(--safe-left));
  }
}

#hud [hidden],
#layer-sheets [hidden],
#layer-modals [hidden],
#layer-toasts [hidden] {
  display: none !important;
}

/* id-qualified to beat main.css "#hud > * { pointer-events: auto }" */
#hud > .hud-top,
#hud > .hud-left,
#hud > .hud-bottom {
  position: absolute;
  pointer-events: none;
}

/* playtest: the cash popover (inside .hud-top) was drawn UNDER the goal card — .hud-left came later with no z-index */
#hud > .hud-top { z-index: 2; }
#hud > .hud-left { z-index: 1; }

.hud-top button,
.hud-left button,
.hud-bottom button,
.hud-nav-wrap button,
.hud-pop {
  pointer-events: auto;
}

/* the HUD block */
.hud-panel {
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-edge-sm);
  color: var(--text);
}

/* pressed: down 2 px, the edge shrinks by 2 px (the .btn rule in css/main.css) */
.prof:active,
.hud-league:active,
.hud-sq:active,
.hud-gear:active,
.hud-pill--gems:active,
.goal:active,
.round:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--edge-c);
}
/* own rule: an engine without :has() drops only this one */
.hud-pill--cash:has(.hud-pill__main:active) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--edge-c);
}

/* :where keeps this reset at (0,0,1): as `#hud button` (1,0,1) it beat every HUD control's own type — the status
   pill and the goal „1/2” rendered at 16 px, bigger than the goal title above them */
:where(#hud) button {
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ------------------------------------------------------------------ top bar */
.hud-top {
  top: max(8px, var(--safe-top));
  left: max(8px, var(--safe-left));
  right: max(8px, var(--safe-right));
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

/* profile card: logo · name 16/900 / fans 12/800 / „Lv 7” 12/900 + the XP bar */
.prof {
  flex: 1 1 0; /* always the whole free width (the name font fits it, hud.js fitName) */
  min-width: 0;
  height: var(--hud-h);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  line-height: 1.05;
  text-align: left;
  cursor: var(--cur-hand);
}

.prof__logo {
  flex: none;
  display: flex;
}

/* a squeezed card (big cash / gem pills) hides the logo so the agency name fits (hud.js fitName) */
.prof--compact .prof__logo { display: none; }
/* playtest: before the logo goes (or a name is cut), the name wraps onto two lines and the fans number moves into the
   „Lv” row in place of the XP bar (hud.js fitName → hud-model.js profileFit two) */
.prof--two:not(.prof--nofans) .prof__text {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: 'name name' 'row fans';
  column-gap: 6px;
  align-items: center;
}
.prof--two .prof__name {
  grid-area: name;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.prof--two:not(.prof--nofans) .prof__fans { grid-area: fans; }
.prof--two:not(.prof--nofans) .prof__row { grid-area: row; }
.prof--two:not(.prof--nofans) .prof__xp { display: none; }
/* the last step before a cut name: two lines + the usual „Lv” row; the fans number lives in Ja / the league then */
.prof--nofans .prof__fans { display: none; }
.prof--compact { padding-left: 8px; }

.prof__text {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.prof__name {
  font-size: var(--fs-16); /* hud.js fitName steps it down to 12 px at most */
  font-weight: var(--fw-num);
  line-height: var(--lh-tight); /* the ellipsis box: 1.05 would clip the descenders */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* „Fani” (js/ui/fans.js): a white number after the pink two-people glyph (the glyph is the noun) */
.prof__fans {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: var(--fs-12);
  font-weight: var(--fw-label);
  color: var(--text);
  white-space: nowrap;
}
.prof__fans .icon { flex: none; color: var(--fans); }
/* no ellipsis clip: a clip box would cut the descenders at this line height — hud.js fitName makes the line fit
   instead (no logo first); .is-clip only when even that does not fit (a card narrower than any phone we know) */
.prof__fans-n { flex: none; }
.prof__fans.is-clip { overflow: hidden; }
.prof__fans.is-clip .prof__fans-n { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: clip; }

.prof__row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.prof__lvl {
  flex: none;
  font-size: var(--fs-12);
  font-weight: var(--fw-num);
  color: var(--text);
}

.prof__xp {
  flex: 1;
  min-width: 24px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--bg);
  overflow: hidden;
}

.prof__xpfill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--yellow);
  transition: width var(--mo-slow) var(--mo-out);
}

/* the „+N” fans floater: a small chip rising out of the profile card's bottom-left edge, once (hud.js merges a burst
   of gains into one and skips it while motion is reduced) */
.hud-fanspop {
  position: absolute;
  top: calc(var(--hud-h) - 4px);
  left: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 6px 0 4px;
  border: 2px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--panel);
  box-shadow: var(--sh-edge-sm);
  color: var(--text);
  font-size: var(--fs-12);
  font-weight: var(--fw-num);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
}
.hud-fanspop .icon { flex: none; color: var(--fans); }
.hud-fanspop[hidden] { display: none; }
.hud-fanspop.is-on { animation: hud-fans-pop 1.7s var(--mo-out) both; }
@keyframes hud-fans-pop {
  0% { opacity: 0; transform: translateY(6px); }
  15% { opacity: 1; transform: none; }
  80% { opacity: 1; transform: translateY(-3px); }
  100% { opacity: 0; transform: translateY(-6px); }
}
[data-reduce-motion="true"] .hud-fanspop.is-on { animation: none; opacity: 0; }

.hud-top__right {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.hud-pill {
  height: var(--hud-h);
  display: flex;
  align-items: center;
}

/* cash: ¥ glyph · the amount over the income („+¥1,7/s”, green) — both inside the one pill */
.hud-pill--cash { padding: 0 8px 0 6px; }

.hud-pill__main {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: var(--cur-hand);
}

.hud-pill__vals {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* The gem pill is ONE button (js/ui/hud.js; owner 2026-10-15: the number and the „+” both open „Zadania za gemy”):
   gem · number · a flat green „+” square; a tap in the gaps between them counts too. */
.hud-pill--gems {
  gap: 6px;
  margin: 0;
  padding: 0 6px;
  font: inherit;
  cursor: var(--cur-hand);
  -webkit-appearance: none;
  appearance: none;
}

.pill__num {
  min-width: 0.8em;
  font-size: var(--fs-16);
  font-weight: var(--fw-num);
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Long values never overflow the pill (hud.js pillText): compact form ≥ 100 000 + one or two steps down the scale. */
.pill__num.is-long { font-size: var(--fs-14); }
.pill__num.is-xlong { font-size: var(--fs-12); }

.hud-income {
  font-size: var(--fs-12);
  font-weight: var(--fw-label);
  line-height: var(--lh-tight);
  color: var(--green);
  white-space: nowrap;
}

.hud-pill__plus {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: var(--green);
  box-shadow: 0 var(--edge-sm) 0 var(--green-dark);
  color: #fff;
  transform: translateY(-1px); /* centred with its edge */
}

/* „Liga Agentów” (owner 2026-10-14: „ikonka rankingu w lewym górnym rogu, na prawo od profilu”) and the gear: two
   narrow blocks, a 20 px glyph — the crown yellow (rank), the gear white */
.hud-league {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: var(--hud-h);
  padding: 0;
  cursor: var(--cur-hand);
}
.hud-league .icon { color: var(--yellow); }

/* owner 2026-10-20: Sklep + Szafa beside the crown — the same 40 × 52 block, white glyph; the dock keeps the three
   together (phones: a row in the bottom-left corner, below) */
.hud-dock {
  flex: none;
  display: flex;
  gap: 6px;
}
.hud-sq {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: var(--hud-h);
  padding: 0;
  cursor: var(--cur-hand);
}
.hud-sq .icon { color: var(--text); }
.hud-sq.has-dot::after {
  content: '';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: var(--ring-new);
}

.hud-gear {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: var(--hud-h);
  padding: 0;
  cursor: var(--cur-hand);
}
.hud-gear .icon { color: var(--text); }

/* the cash pill's popover: the full amount in words + the rate */
.hud-pop {
  position: absolute;
  top: calc(var(--hud-h) + 8px);
  right: 40px;
  max-width: min(260px, 72vw);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  animation: hud-pop-in var(--mo-med) var(--mo-out);
}

.pop__words {
  font-size: var(--fs-16);
  font-weight: var(--fw-num);
  line-height: var(--lh-tight);
}

.pop__rate {
  font-size: var(--fs-12);
  font-weight: var(--fw-label);
  color: var(--green);
}

@keyframes hud-pop-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ left column: goal cards */
.hud-left {
  top: calc(max(8px, var(--safe-top)) + var(--hud-h) + 12px);
  left: max(8px, var(--safe-left));
  width: min(56%, 230px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hud-goals {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* a goal card = a HUD block: icon well (desktop) · title 14/900 · count 12/800 · 6 px bar · the lead card's hint */
.goal {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: var(--hud-h);
  padding: 8px 12px;
  text-align: left;
  cursor: var(--cur-hand);
}

.goal__tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--raised-2);
  color: var(--text);
}

.goal__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.goal__title {
  font-size: var(--fs-14);
  font-weight: var(--fw-num);
  line-height: var(--lh-tight);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.goal__count {
  font-size: var(--fs-12);
  font-weight: var(--fw-label);
  line-height: var(--lh-tight);
  color: var(--text-2);
}

.goal__bar {
  display: block;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--bg);
  overflow: hidden;
}

.goal__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--green);
  transition: width var(--mo-slow) var(--mo-out);
}

/* the reward of a goal card (gameplay pass 2026-10-21): a small chip, always on show — desktop under the bar on the
   right, phone at the end of the count · bar row */
.goal__reward {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: -2px;
  padding: 1px 6px 1px 4px;
  border-radius: var(--r-pill);
  background: var(--raised-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-num);
  line-height: var(--lh-tight);
  color: var(--text);
  white-space: nowrap;
}
.goal__reward[hidden] { display: none; }
.goal__reward-ic { display: inline-flex; color: var(--yellow); }
.goal__reward[data-kind='gem'] .goal__reward-ic { color: var(--gem-light); }
.goal__reward[data-kind='cash'] .goal__reward-ic { color: var(--green); }

/* the ONE „what now” line under the lead goal (js/ui/goals.js; owner 2026-10-14 — it replaced the „Co teraz?” chip and
   the status pills): glyph · short text · a time / ¥ / +n on the right; one line, the text gives way to the number */
.goal__hint {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: var(--fs-12);
  font-weight: var(--fw-label);
  line-height: var(--lh-tight);
  color: var(--text-2);
  white-space: nowrap;
}

.goal__hint-ic {
  flex: none;
  display: inline-flex;
  color: var(--text-2);
}

.goal__hint-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* polish 2 (owner: „Zatrudnij: Obsługa zamówi…” cut off at 360 px): the text may take a 2nd line instead of an ellipsis
   (never a 3rd); the glyph and the ¥ / time stay on the first line */
.goal__hint { align-items: flex-start; }
.goal__hint-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
}

.goal__hint-val {
  flex: none;
  color: var(--text);
}

.goal__hint[data-tone='do'] { color: var(--text); }
.goal__hint[data-tone='do'] .goal__hint-ic { color: var(--green); }
.goal__hint[data-tone='lock'] .goal__hint-ic { color: var(--text-dim); }

/* done: a static green ring + „Odbierz!” in green — no glow, no loop */
.goal.is-done { box-shadow: var(--ring-go), var(--sh-edge-sm); }
.goal.is-done:active { box-shadow: var(--ring-go), 0 1px 0 var(--edge-c); }

.goal.is-done .goal__count {
  font-weight: var(--fw-num);
  color: var(--green);
}

/* a tap on a card that cannot move yet: one small shake */
.goal.is-nudge {
  animation: nudge var(--mo-med) var(--mo-out);
}

/* claimed: one pop (the slot's next goal is already on the card) */
.goal.is-claimed {
  animation: claim-pop var(--mo-slow) var(--mo-spring);
}

@keyframes claim-pop {
  from { transform: scale(0.94); }
  to { transform: none; }
}

@keyframes nudge {
  0%, 100% { transform: none; }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* the chips column stays an empty slot (no status pills since owner 2026-10-14) */
.hud-chips {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* ------------------------------------------------------------------ bottom-left: round coffee / crew buttons */
.hud-bottom {
  left: max(8px, var(--safe-left));
  right: max(8px, var(--safe-right));
  bottom: calc(max(8px, var(--safe-bottom)) + 84px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.hud-rounds {
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
}

/* a round = a 52 px HUD block: white glyph, the cooldown drawn as a 3 px arc on the border (hud.js, an svg); ready =
   a green button */
.round {
  position: relative;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  cursor: var(--cur-hand);
}

.round .icon { color: var(--text); }

.round__ring {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 52px;
  height: 52px;
  fill: none;
  stroke-width: 3;
  pointer-events: none;
}
.round__track { stroke: var(--line); }
.round__arc { stroke: var(--text-2); }

.round__time {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 4px;
  border-radius: var(--r-xs);
  background: var(--bg);
  font-size: var(--fs-12);
  font-weight: var(--fw-label);
  line-height: 16px;
  color: var(--text-2);
  white-space: nowrap;
}

.round__time:empty { display: none; }

.round.is-ready {
  background: var(--green);
  border-color: var(--green-dark);
  box-shadow: 0 var(--edge-sm) 0 var(--green-dark);
}
.round.is-ready:active { box-shadow: 0 1px 0 var(--green-dark); }
.round.is-ready .icon { color: #fff; }
.round.is-ready .round__ring { display: none; }

/* ------------------------------------------------------------------ bottom nav
   Owner 2026-10-11: symmetric (5 equal columns), always visible (own layer on #app above sheets + modals; sheets
   end at its top edge via --nav-space), one highlight slides to the active tab (js/ui/nav.js sets --nav-i). The
   highlight is the active segment key's look (--raised-2 + edge); the open tab's icon is green, its label white. */
#app > .hud-nav-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-nav);
  padding: 0 max(8px, var(--safe-right)) max(8px, var(--safe-bottom)) max(8px, var(--safe-left));
  pointer-events: none;
  background-color: transparent;
  transition: background-color var(--mo-med) var(--mo-out);
}

/* a sheet is open: the strip around the bar continues the sheet, and taps there do not reach the scrim */
#app > .hud-nav-wrap.is-over-sheet {
  background-color: var(--panel);
  pointer-events: auto;
}

/* the fullscreen QC session (boss / Sprint / Daily) owns the whole screen */
#layer-qc.qc-open ~ .hud-nav-wrap { display: none; }

.hud-nav-wrap.is-locked .hud-nav { opacity: 0.6; }
.hud-nav-wrap.is-locked button { pointer-events: none; }

.hud-nav {
  --nav-pad: 6px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  height: var(--nav-h);
  padding: var(--nav-pad);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--sh-edge-sm);
  pointer-events: auto;
  transition: opacity var(--mo-med) var(--mo-out);
}

/* the sliding highlight: one column wide, moved by whole columns (percent of its own width, so resize-proof); its
   radius nests inside the bar's (--r-lg minus the padding) */
.hud-nav__pill {
  position: absolute;
  top: var(--nav-pad);
  bottom: var(--nav-pad);
  left: var(--nav-pad);
  width: calc((100% - 2 * var(--nav-pad)) / 5);
  border-radius: calc(var(--r-lg) - var(--nav-pad));
  background: var(--raised-2);
  box-shadow: var(--sh-edge-sm);
  transform: translateX(calc(var(--nav-i, 0) * 100%));
  transition: transform var(--mo-slow) var(--mo-out);
  pointer-events: none;
}

/* icon and label take the tab's colour: --text-2, the open tab white with a green icon */
.hud-nav__tab {
  min-width: 0;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 2px;
  border: 0;
  border-radius: calc(var(--r-lg) - var(--nav-pad));
  background: none;
  color: var(--text-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-label);
  text-align: center;
  cursor: var(--cur-hand);
}

.hud-nav__tab.is-active { color: var(--text); }

.hud-nav__icon {
  position: relative;
  display: grid;
  place-items: center;
}

.hud-nav__label {
  display: block;
  max-width: 100%;
  line-height: var(--lh-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hud-nav__tab.is-active .hud-nav__icon { color: var(--green); }

/* No attention glow on the nav (owner 2026-10-14: „Zlecenia świeci się na zielono — zostaw tylko kółko z liczbą”):
   the guide's „next” mark (js/ui/motion.js markNext → .is-next-step, css/motion.css) neither tints a tab's label nor
   hops its icon here — the red count bubble / dot is a tab's only signal; the lit tab is the open screen, the same for
   every tab. (Higher specificity than css/motion.css, which loads later; a hovered tab turns white like the others.) */
.hud-nav .hud-nav__tab.is-next-step:not(.is-active) .hud-nav__label { color: var(--text-2); }
@media (hover: hover) and (pointer: fine) {
  .hud-nav .hud-nav__tab.is-next-step:not(.is-active):hover .hud-nav__label { color: var(--text); }
}
.hud-nav .hud-nav__tab.is-next-step .hud-nav__icon { animation: none; }
.hud-nav .hud-nav__tab.is-next-step .hud-nav__icon.is-pop { animation: mo-nav-pop var(--mo-slow) var(--mo-spring); }

/* one mark per tab, top-right: a red count badge or a red dot, ringed off the bar; never on the open tab */
.hud-nav__badge {
  position: absolute;
  top: -6px;
  right: -12px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--red);
  box-shadow: var(--ring-new);
  color: #fff;
  font-size: var(--fs-12);
  font-weight: var(--fw-num);
  line-height: 20px;
  text-align: center;
}

.hud-nav__tab.has-dot::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 22%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: var(--ring-new);
}

.hud-nav__tab.is-active .hud-nav__badge,
.hud-nav__tab.is-active.has-dot::after {
  display: none;
}

/* ------------------------------------------------------------------ agency logo (HUD card, Ja header, naming card)
   one character family: a disc with the --line ring, like every avatar */
.logo {
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--raised-2);
  color: var(--text);
  box-shadow: 0 0 0 2px var(--line);
}

.logo__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.logo__text {
  font-weight: var(--fw-num);
}

/* ------------------------------------------------------------------ wide screens (BACKLOG 17)
   Desktop / big monitor in landscape: the HUD hugs the corners — profile top-left, cash/gems/gear top-right, goal
   cards (with their icon well) under the profile, bottom nav centred (max ~560 px), round buttons bottom-left. Phones /
   portrait windows never match this query. */
@media (min-width: 900px) and (orientation: landscape) {
  /* --ui-hud = 0.95 × --ui (js/ui/nav.js): the HUD and the nav grow with big windows like the 3D hall does — they
     stayed phone-sized on 1440p / 32" screens. A plain var() (no calc) so every engine takes the zoom. */
  :root {
    --ui: 1;
    --ui-hud: 0.95;
  }
  #hud > .hud-top,
  #hud > .hud-left,
  #hud > .hud-bottom {
    zoom: var(--ui-hud, 0.95);
  }
  .prof { flex: 0 1 320px; }
  .hud-top__right { margin-left: auto; }
  .hud-left { width: 250px; }
  .hud-bottom { right: auto; width: 380px; }
  /* an open side panel: the nav centres in the free hall area left of it (js/ui/nav.js sets --nav-right = the panel's
     width + a gap) instead of tucking under the panel's corner. Lengths on a zoomed element are zoomed too: ÷ zoom. */
  #app > .hud-nav-wrap {
    right: calc(var(--nav-right, 0px) / var(--ui-hud, 0.95));
    width: min(100%, 576px, calc(100% - var(--nav-right, 0px) / var(--ui-hud, 0.95)));
    margin-inline: auto;
    zoom: var(--ui-hud, 0.95);
    transition: background-color var(--mo-med) var(--mo-out), right var(--mo-slow) var(--mo-out);
  }
  #app > .hud-nav-wrap.is-over-sheet { background-color: transparent; }
}

/* Finger-sized hit areas (≥ 44 px on screen) for the small HUD controls — gem „+” (owner 2026-10-11: hard to hit),
   gear, „1/2”: an invisible ::before grows the box to 52 px, which the 0.85 zoom draws at 44 px. It grows only where
   nothing else takes taps: the „+” (a glyph inside the gem pill button: its grown box opens the gem tasks like the
   rest of the pill) grows up / down and a few px into the gap before the gear, the gear only to the right, the „1/2”
   around the goal card's corner. Phone layout or a touch screen. */
@media not all and (min-width: 900px) and (orientation: landscape), (pointer: coarse) {
  .hud-gear,
  .hud-pill__plus {
    position: relative; /* .goal-flip is already absolute (the goal card's corner, phone block below) */
  }
  .hud-gear::before,
  .hud-pill__plus::before,
  .goal-flip::before {
    content: '';
    position: absolute;
    top: min(0px, calc((100% - 52px) / 2));
    bottom: min(0px, calc((100% - 52px) / 2));
    left: min(0px, calc((100% - 52px) / 2));
    right: min(0px, calc((100% - 52px) / 2));
  }
  .hud-pill__plus::before { left: -3px; right: -8px; }
  .hud-gear::before { left: 0; }
  /* the league crown is already --hud-h tall: it grows only into the gaps beside it (the profile card and the cash
     pill are buttons right there) */
  .hud-league { position: relative; }
  .hud-league::before { content: ''; position: absolute; top: 0; bottom: 0; left: -3px; right: -3px; }
  .hud-sq::before { content: ''; position: absolute; top: 0; bottom: 0; left: -3px; right: -3px; }
}

/* the „1/2” goal flip exists only in the phone layout below (desktop keeps both cards) */
.goal-flip { display: none; }

/* ------------------------------------------------------------------ phones (BACKLOG 24 + 32)
   Owner 2026-10-12: „na telefonie ewidentnie za dużo — zmniejsz to trochę”. Everything that is NOT the wide
   landscape desktop above (exact complement, js/ui/nav.js PHONE_QUERY): HUD ~0.85×, ONE compact goal card (its „1/2”
   in the top-right corner flips to the other — js/ui/goals.js), round buttons at the right edge, the same nav. The
   desktop layout never matches this block. */
@media not all and (min-width: 900px) and (orientation: landscape) {
  :root { --nav-h: 62px; }

  #hud > .hud-top,
  #hud > .hud-left,
  #hud > .hud-bottom {
    zoom: 0.85;
  }

  .hud-top {
    top: max(12px, var(--safe-top));
    left: max(10px, var(--safe-left));
    right: max(10px, var(--safe-right));
  }

  /* the goal card under the profile card, with air around it */
  .hud-left {
    top: calc(max(12px, var(--safe-top)) + var(--hud-h) + 12px);
    left: max(10px, var(--safe-left));
    width: min(64%, 236px);
    gap: 6px;
  }

  .hud-goals { position: relative; }
  .hud-goals .goal:not(.is-front) { display: none; }
  /* an open sheet starts right under the top bar: the goal card must not peek out above its edge */
  #hud > .hud-left { transition: opacity var(--mo-med) var(--mo-out); }
  #app:has(#layer-sheets > .sheet) #hud > .hud-left { opacity: 0; }
  #app:has(#layer-sheets > .sheet) #hud > .hud-left button { pointer-events: none; }
  /* playtest: during the tutorial Kim's banner and „Pomiń” take the strip above an open sheet / the Stół QC panel — the
     top bar (under the sheet's scrim there, not tappable) steps aside instead of piling up under them */
  .is-tut #app:has(#layer-sheets > .sheet:not(.is-out)) #hud > .hud-top { opacity: 0; transition: opacity var(--mo-med) var(--mo-out); }
  .is-tut #app:has(#layer-sheets > .sheet:not(.is-out)) #hud > .hud-top button { pointer-events: none; }

  /* card = title + count · bar (+ the hint line): no icon well, the title takes the width */
  .goal { gap: 0; }
  .goal__tile { display: none; }
  .goal__text {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 8px;
  }
  .goal__title {
    grid-column: 1 / -1;
    display: block;
    white-space: nowrap; /* a long title shrinks to fit, never under 12 px (js/ui/goals.js fitFront) */
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hud-goals.has-flip .goal__title { margin-right: 24px; } /* room for the page dots in the corner */
  .goal__count { line-height: 1; }
  .goal__reward { align-self: center; margin-top: 0; padding: 0 5px 0 3px; }
  .goal__hint { grid-column: 1 / -1; }
  .goal.is-flip { animation: goal-flip-in var(--mo-med) var(--mo-out); }

  /* the page dots: in the card's top-right corner (the grown ::before above makes it a 44 px target) */
  .goal-flip {
    position: absolute;
    top: 2px;
    right: 2px;
    display: grid;
    place-items: center;
    min-width: 32px;
    height: 28px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--r-sm);
    background: none;
    font-size: var(--fs-12);
    font-weight: var(--fw-label);
    color: var(--text-2);
    cursor: var(--cur-hand);
  }
  .goal-flip:active { transform: translateY(1px); }
  /* page dots (playtest: „1/2” beside „0/1” read as a second count): the card on show filled, the other one red while
     it can be claimed */
  .goal-flip__n { display: flex; align-items: center; gap: 4px; }
  .goal-flip__n i {
    width: 6px;
    height: 6px;
    border-radius: var(--r-pill);
    background: var(--text-dim);
  }
  .goal-flip__n i.is-on { background: var(--text); }
  .goal-flip__n i.is-ready {
    width: 8px;
    height: 8px;
    background: var(--red);
    box-shadow: var(--ring-new);
  }

  /* bottom: the rounds move to the right edge, right above the nav */
  .hud-bottom {
    left: max(10px, var(--safe-left));
    right: max(10px, var(--safe-right));
    bottom: calc((var(--nav-space) + 8px) / 0.85);
  }
  .hud-rounds {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}

@keyframes goal-flip-in {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: none; }
}

/* owner 2026-10-15: on phones the league crown moves to the bottom-left corner (above the nav) so the profile card
   with the nick and avatar gets the room up top */
@media not all and (min-width: 900px) and (orientation: landscape) {
  /* 2026-10-20: the crown, Sklep and Szafa sit there in one row (the dock) */
  .hud-dock {
    position: fixed;
    left: max(8px, var(--safe-left));
    bottom: calc(max(8px, var(--safe-bottom)) + 84px);
    gap: 8px;
    z-index: 2;
  }
  .hud-league,
  .hud-sq {
    width: 52px;
    height: 52px;
  }
  /* the chest / tee pictures (2026-10-21) fill the bigger phone squares */
  .hud-sq .icon[data-icon='chest'],
  .hud-sq .icon[data-icon='outfit'] { width: 30px; height: 30px; }
}

/* owner 2026-10-15: phones show both goal cards like the desktop, one under the other, a bit smaller (no page dots) */
@media not all and (min-width: 900px) and (orientation: landscape) {
  .hud-goals .goal:not(.is-front) { display: flex; }
  .hud-goals .goal { padding-top: var(--sp-1); padding-bottom: var(--sp-1); }
  .hud-goals .goal__title { font-size: var(--fs-14); }
  .hud-goals .goal__hint { font-size: var(--fs-12); }
  .hud-goals.has-flip .goal__title { margin-right: 0; }
  .goal-flip { display: none !important; }
}

/* ------------------------------------------------------------------ sign finish (owner 2026-10-22, css/main.css tokens)
   Every HUD block (profile card, cash / gem pills, league, gear, Sklep / Szafa, goal cards, nav bar) gets the station
   signs' finish in navy: the soft gloss, a lit top strip, the darker bottom bevel over its edge; the gem „+”, a ready
   round button and the nav's active pill the coloured one. Shadows only (no blur / filter). */
.hud-panel {
  background-image: var(--sign-gloss-soft);
  box-shadow: var(--sign-hi-soft), var(--sign-rim), var(--sh-edge-sm);
}
.goal.is-done { box-shadow: var(--ring-go), var(--sign-hi-soft), var(--sign-rim), var(--sh-edge-sm); }
.hud-pill__plus {
  background-image: var(--sign-gloss);
  box-shadow: inset 0 0 0 2px var(--green-dark), var(--sign-hi), var(--sign-rim), 0 var(--edge-sm) 0 var(--green-dark);
}
.round { background-image: var(--sign-gloss-soft); }
.round.is-ready {
  background-image: var(--sign-gloss);
  box-shadow: var(--sign-hi), var(--sign-rim), 0 var(--edge-sm) 0 var(--green-dark);
}
.hud-nav { background-image: var(--sign-gloss-soft); box-shadow: var(--sign-hi-soft), var(--sh-edge-sm); }
.hud-nav__pill { background-image: var(--sign-gloss-soft); box-shadow: inset 0 0 0 2px var(--line), var(--sign-hi-soft), var(--sign-rim), var(--sh-edge-sm); }
/* the agency / goal names and the money read like sign lettering: white 900 on a hard ink outline */
.prof__name,
.goal__title,
.hud-pill__main .num { text-shadow: var(--tx-lip), 0 -1px 0 var(--edge-c), 1px 0 0 var(--edge-c), -1px 0 0 var(--edge-c); }