/* =====================================================================
   DEADWEIGHT - in-game HUD (owner: UI-HUD). Tokens come from base.css (--dw-*).
   Every length is calc(N * var(--u)) so the whole HUD scales with one switch:
     --u: 1px  (720p desktop)  1.25px (>= 860px tall)  0.8px (short landscape phones)
   Layout rules: the CENTRE of the screen stays clear. Corners/edges only:
     top-left  player chips      top-centre  round + shrink meter      top-right  kill feed (below the UI's corner buttons)
     under the top bar  banner + contextual prompt                     bottom-centre  ability chips      bottom-right  emote strip
   ===================================================================== */

.hud {
  --u: 1px;
  --hud-plate: rgba(27, 19, 64, 0.74);
  --hud-ol: -2px -2px 0 var(--dw-ink), 2px -2px 0 var(--dw-ink), -2px 2px 0 var(--dw-ink), 2px 2px 0 var(--dw-ink),
    0 -2px 0 var(--dw-ink), 0 2px 0 var(--dw-ink), -2px 0 0 var(--dw-ink), 2px 0 0 var(--dw-ink), 0 4px 0 var(--dw-ink);
  --hud-ol-sm: -1.5px -1.5px 0 var(--dw-ink), 1.5px -1.5px 0 var(--dw-ink), -1.5px 1.5px 0 var(--dw-ink), 1.5px 1.5px 0 var(--dw-ink), 0 3px 0 var(--dw-ink);
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  font-family: var(--dw-font); color: var(--dw-cream);
  font-size: calc(14 * var(--u));
}
.hud[hidden] { display: none !important; }
.hud *, .hud *::before, .hud *::after { box-sizing: border-box; }
.hud b { font-weight: 900; }
:where(.hud) svg { display: block; }
@media (min-height: 860px) { .hud { --u: 1.25px; } }
@media (max-height: 520px) { .hud { --u: 0.8px; } }

/* ------------------------------------------------------------ phase / role visibility */
.hud:not(:is([data-phase="countdown"], [data-phase="playing"], [data-phase="roundEnd"])) :is(.hud-top, .hud-chips, .hud-feed, .hud-alerts, .hud-vig) { display: none; }
.hud:not(:is([data-phase="lobby"], [data-phase="countdown"], [data-phase="playing"])) .hud-abil { display: none; }
.hud:not(:is([data-phase="lobby"], [data-phase="countdown"], [data-phase="playing"])) .hud-emotes { display: none; }
.hud[data-phase="countdown"] .hud-abil { opacity: 0.55; }
.hud[data-role="spec"] :is(.hud-abil, .hud-emotes) { display: none; }
.hud[data-role="ghost"] .hud-ab:not([data-act="tomato"]) { display: none; }
.hud:not([data-role="ghost"]) .hud-ab[data-act="tomato"] { display: none; }

/* ------------------------------------------------------------ plates */
.hud-round, .hud-meter, .hud-chip, .hud-line, .hud-ab, .hud-em, .hud-prompt, .hud-banner {
  border: calc(3 * var(--u)) solid var(--dw-ink);
}

/* ------------------------------------------------------------ edge vignette driven by the renderer's --dw-warn (0..1) */
.hud-vig {
  position: absolute; inset: 0;
  opacity: calc(var(--dw-warn, 0) * 0.95);
  background: radial-gradient(ellipse 80% 75% at 50% 50%, transparent 52%, rgba(255, 70, 40, 0.5) 100%);
}
.hud-vig::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 75% at 50% 50%, transparent 60%, rgba(255, 40, 40, 0.45) 100%);
  animation: hud-vigpulse 1.1s ease-in-out infinite;
}
@keyframes hud-vigpulse { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }

.hud-flash { position: absolute; inset: 0; opacity: 0; box-shadow: inset 0 0 calc(90 * var(--u)) calc(14 * var(--u)) rgba(255, 90, 90, 0.7); }
.hud-flash.is-go { animation: hud-flash 0.28s ease-out; }
@keyframes hud-flash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* ------------------------------------------------------------ top bar */
.hud-top {
  position: absolute; top: var(--dw-pad-t); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u));
}
.hud-round {
  display: flex; align-items: center; gap: calc(9 * var(--u)); height: calc(42 * var(--u)); padding: 0 calc(15 * var(--u));
  border-radius: calc(16 * var(--u)); background: var(--hud-plate);
  box-shadow: 0 calc(3 * var(--u)) 0 var(--dw-ink), inset 0 0 0 2px rgba(255, 244, 224, 0.1);
}
.hud-round__lbl { font-size: calc(11 * var(--u)); font-weight: 900; letter-spacing: 0.16em; color: var(--dw-muted); }
.hud-round__n { font-size: calc(21 * var(--u)); line-height: 1; font-variant-numeric: tabular-nums; }
.hud-round__sep { width: 3px; height: calc(20 * var(--u)); border-radius: 2px; background: rgba(255, 244, 224, 0.22); }
.hud-round__ico { width: calc(16 * var(--u)); height: calc(16 * var(--u)); color: var(--dw-muted); margin-right: calc(-2 * var(--u)); }
.hud-round__clock { font-size: calc(21 * var(--u)); line-height: 1; min-width: 2.7ch; font-variant-numeric: tabular-nums; }

.hud-top.is-warn .hud-round { border-color: var(--dw-tangerine); animation: hud-pulse 0.8s ease-in-out infinite; }
.hud-meter {
  position: relative; width: calc(214 * var(--u)); height: calc(24 * var(--u)); overflow: hidden; border-radius: calc(12 * var(--u));
  background: rgba(27, 19, 64, 0.62); box-shadow: 0 calc(2 * var(--u)) 0 var(--dw-ink);
  --mc: var(--dw-mint);
}
.hud-meter[hidden] { display: none; }
.hud-meter__fill { position: absolute; inset: 0; transform-origin: 0 50%; background: var(--mc); transition: transform 0.25s linear; }
.hud-meter__fill::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 45%; background: rgba(255, 255, 255, 0.28); }
.hud-meter__txt {
  position: relative; z-index: 1; display: grid; place-items: center; height: 100%;
  font-size: calc(11 * var(--u)); font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; color: var(--dw-cream); text-shadow: var(--hud-ol-sm);
}
.hud-meter[data-ph="pre"] { --mc: #2aa66f; }
.hud-meter[data-ph="warn"] { --mc: var(--dw-tangerine); animation: hud-pulse 0.8s ease-in-out infinite; }
.hud-meter[data-ph="shrinking"] { --mc: #e8a512; }
.hud-meter[data-ph="sudden"] { --mc: var(--dw-danger); animation: hud-pulse 0.9s ease-in-out infinite; }
@keyframes hud-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* ------------------------------------------------------------ player chips */
.hud-chips {
  position: absolute; left: var(--dw-pad-l); top: var(--dw-pad-t); width: calc(216 * var(--u));
  display: flex; flex-direction: column; gap: calc(7 * var(--u));
}
.hud-chip {
  position: relative; display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(50 * var(--u)); padding: 0 calc(12 * var(--u)) 0 calc(9 * var(--u));
  border-radius: calc(15 * var(--u)); background: var(--hud-plate);
  box-shadow: inset calc(6 * var(--u)) 0 0 var(--seat, var(--dw-sky)), 0 calc(3 * var(--u)) 0 var(--dw-ink);
  transition: opacity 0.3s, filter 0.3s, transform 0.2s var(--dw-ease-bounce);
}
.hud-chip[hidden] { display: none; }
.hud-chip.is-you { border-color: var(--dw-cream); transform: translateX(calc(4 * var(--u))); box-shadow: inset calc(6 * var(--u)) 0 0 var(--seat), 0 0 0 calc(3 * var(--u)) var(--dw-ink), 0 calc(3 * var(--u)) 0 calc(3 * var(--u)) var(--dw-ink); }
.hud-chip__avwrap { position: relative; flex: none; width: calc(36 * var(--u)); height: calc(40 * var(--u)); margin-left: calc(4 * var(--u)); }
.hud-chip__av { width: 100%; height: 100%; }
.hud-chip__av svg { width: 100%; height: 100%; overflow: visible; }
/* `#ui svg {display:block}` (base.css) outranks plain classes, hence the #ui prefix on every display toggle */
#ui .hud-chip__crown { position: absolute; left: 50%; top: calc(-13 * var(--u)); width: calc(22 * var(--u)); height: calc(22 * var(--u)); margin-left: calc(-11 * var(--u)); color: var(--dw-gold); rotate: -12deg; display: none; filter: drop-shadow(0 2px 0 var(--dw-ink)); z-index: 2; }
#ui .hud-chip.is-leader .hud-chip__crown { display: block; animation: dw-bob-s 1.6s ease-in-out infinite; }
.hud-chip__txt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
.hud-chip__nrow { display: flex; align-items: center; gap: calc(6 * var(--u)); min-width: 0; }
.hud-chip__name { font-size: calc(15 * var(--u)); font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; text-shadow: 0 2px 0 var(--dw-ink); }
.hud-chip__you { display: none; flex: none; padding: 1px calc(5 * var(--u)); border-radius: calc(5 * var(--u)); background: var(--dw-cream); color: var(--dw-ink); font-size: calc(9 * var(--u)); font-weight: 900; letter-spacing: 0.1em; }
.hud-chip.is-you .hud-chip__you { display: inline-block; }
.hud-chip__st { font-size: calc(10 * var(--u)); font-weight: 900; letter-spacing: 0.15em; color: var(--dw-muted); }
.hud-chip__score {
  flex: none; min-width: 1.5ch; text-align: right; font-size: calc(28 * var(--u)); line-height: 1; font-variant-numeric: tabular-nums;
  text-shadow: var(--hud-ol);
}
.hud-chip__score.is-pop { animation: hud-scorepop 0.55s var(--dw-ease-bounce); }
@keyframes hud-scorepop { 0% { transform: scale(1); } 30% { transform: scale(1.7) rotate(-6deg); color: var(--dw-gold); } 100% { transform: scale(1); } }
.hud-chip__plus {
  position: absolute; right: calc(14 * var(--u)); top: calc(-14 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 900; color: var(--dw-gold);
  text-shadow: var(--hud-ol-sm); opacity: 0; pointer-events: none;
}
.hud-chip__plus.is-go { animation: hud-plusup 1.3s ease-out; }
@keyframes hud-plusup { 0% { opacity: 0; transform: translateY(8px) scale(0.6); } 15% { opacity: 1; transform: translateY(0) scale(1.2); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(-18 * var(--u))); } }

/* grip ring around the avatar of a hanging player */
.hud-chip__avwrap::before {
  content: ""; position: absolute; inset: calc(-5 * var(--u)); border-radius: 50%; display: none;
  background: conic-gradient(var(--dw-danger) calc(var(--grip, 100) * 1%), rgba(27, 19, 64, 0.5) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}
.hud-chip[data-st="hang"] .hud-chip__avwrap::before { display: block; }
.hud-chip[data-st="hang"] { border-color: var(--dw-danger); animation: hud-chipshake 0.5s ease-in-out infinite; }
.hud-chip[data-st="hang"] .hud-chip__st { color: #ff7d7d; }
.hud-chip[data-st="air"] .hud-chip__st { color: var(--dw-tangerine); }
.hud-chip[data-st="win"] { border-color: var(--dw-gold); }
.hud-chip[data-st="win"] .hud-chip__st { color: var(--dw-gold); }
.hud[data-phase="playing"] .hud-chip[data-st="out"], .hud[data-phase="countdown"] .hud-chip[data-st="out"] { opacity: 0.62; filter: saturate(0.55); }
.hud[data-phase="playing"] .hud-chip[data-st="out"] .hud-chip__name { text-decoration: line-through; text-decoration-thickness: 2px; }
@keyframes hud-chipshake { 0%, 100% { rotate: -1deg; } 50% { rotate: 1.2deg; } }

/* ------------------------------------------------------------ kill feed */
.hud-feed {
  position: absolute; top: calc(var(--dw-pad-t) + 56 * var(--u)); right: var(--dw-pad-r); width: min(calc(350 * var(--u)), 44vw);
  display: flex; flex-direction: column; align-items: flex-end; gap: calc(5 * var(--u));
}
.hud-line {
  max-width: 100%; padding: calc(6 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: rgba(27, 19, 64, 0.8);
  font-size: calc(13 * var(--u)); font-weight: 800; line-height: 1.25; text-align: right; box-shadow: 0 calc(2 * var(--u)) 0 var(--dw-ink);
  overflow-wrap: anywhere;
}
.hud-line[data-tone="evil"] { background: rgba(120, 18, 52, 0.86); }
.hud-line[data-tone="good"] { background: rgba(14, 92, 64, 0.86); }
.hud-line[data-tone="bad"] { background: rgba(27, 19, 64, 0.85); }
.hud-line[data-kind="snap"], .hud-line[data-kind="announce"] { background: rgba(130, 70, 10, 0.86); }
.hud-line.is-in { animation: hud-linein 0.35s var(--dw-ease-bounce) both; }
.hud-line.is-out { opacity: 0; transform: translateX(calc(14 * var(--u))); transition: opacity 0.4s, transform 0.4s; }
@keyframes hud-linein { from { opacity: 0; transform: translateX(calc(40 * var(--u))) scale(0.9); } to { opacity: 1; transform: none; } }
.hud-n { color: var(--seat, var(--dw-cream)); text-shadow: 0 1.5px 0 var(--dw-ink); }
.hud-line__tag {
  display: inline-block; margin-right: calc(7 * var(--u)); padding: 1px calc(7 * var(--u)); border-radius: calc(6 * var(--u));
  background: var(--dw-banana); color: var(--dw-ink); font-size: calc(10 * var(--u)); letter-spacing: 0.12em; vertical-align: 1px;
}
.hud-line[data-tone="evil"] .hud-line__tag { background: var(--dw-tomato); color: #fff; }

/* ------------------------------------------------------------ banner + prompt (under the top bar) */
.hud-alerts {
  position: absolute; top: calc(var(--dw-pad-t) + 84 * var(--u)); left: 50%; transform: translateX(-50%);
  width: min(calc(600 * var(--u)), 92vw); display: flex; flex-direction: column; align-items: center; gap: calc(9 * var(--u));
}
.hud-banner {
  display: flex; align-items: center; gap: calc(12 * var(--u)); max-width: 100%; padding: calc(8 * var(--u)) calc(20 * var(--u)) calc(9 * var(--u)) calc(14 * var(--u));
  border-radius: calc(18 * var(--u)); background: var(--bn, var(--dw-tangerine)); color: var(--dw-ink);
  box-shadow: 0 calc(4 * var(--u)) 0 var(--dw-ink), inset 0 calc(3 * var(--u)) 0 rgba(255, 255, 255, 0.4);
  --bn: var(--dw-tangerine);
}
.hud-banner[hidden] { display: none; }
.hud-banner[data-tone="hot"] { --bn: var(--dw-tomato); color: #fff; }
.hud-banner[data-tone="cool"] { --bn: var(--dw-sky); }
.hud-banner[data-tone="warn"] { animation: hud-wob 0.9s ease-in-out infinite; }
.hud-banner.is-in { animation: hud-bannerin 0.45s var(--dw-ease-bounce) both; }
.hud-banner[data-tone="warn"].is-in { animation: hud-bannerin 0.45s var(--dw-ease-bounce) both, hud-wob 0.9s 0.45s ease-in-out infinite; }
.hud-banner.is-out { opacity: 0; transform: translateY(calc(-10 * var(--u))) scale(0.95); transition: opacity 0.3s, transform 0.3s; }
.hud-banner__ico { flex: none; width: calc(32 * var(--u)); height: calc(32 * var(--u)); color: var(--dw-ink); transition: transform 0.4s var(--dw-ease-bounce); stroke-width: 3.4; }
.hud-banner__ico path { stroke-width: 3.6; }
.hud-banner[data-tone="hot"] .hud-banner__ico { color: #fff; }
.hud-banner__txt { display: flex; flex-direction: column; min-width: 0; }
.hud-banner__title { font-size: calc(23 * var(--u)); line-height: 1.05; letter-spacing: 0.03em; text-transform: uppercase; }
.hud-banner__sub { font-size: calc(13 * var(--u)); font-weight: 800; opacity: 0.85; }
.hud-banner:not([data-tone="cool"]):not([data-tone="warn"]) .hud-banner__title { text-shadow: 0 2px 0 rgba(27, 19, 64, 0.5); }
@keyframes hud-bannerin { 0% { opacity: 0; transform: scale(0.5) translateY(calc(-20 * var(--u))); } 60% { opacity: 1; transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes hud-wob { 0%, 100% { rotate: -1.4deg; } 50% { rotate: 1.4deg; } }

.hud-prompt {
  display: flex; align-items: center; gap: calc(14 * var(--u)); max-width: 100%; padding: calc(10 * var(--u)) calc(22 * var(--u)) calc(11 * var(--u)) calc(14 * var(--u));
  border-radius: calc(22 * var(--u)); border-width: calc(4 * var(--u));
  background: linear-gradient(180deg, var(--p1, #ff8a4c), var(--p2, #ff4d4d));
  box-shadow: 0 calc(6 * var(--u)) 0 var(--dw-ink), inset 0 calc(4 * var(--u)) 0 rgba(255, 255, 255, 0.35), 0 calc(10 * var(--u)) calc(22 * var(--u)) rgba(27, 19, 64, 0.35);
  animation: hud-promptpulse 1.1s ease-in-out infinite;
}
.hud-prompt[hidden] { display: none; }
.hud-prompt[data-kind="hang"] { --p1: #ffd23f; --p2: #ffa81f; }
.hud-prompt[data-kind="heave"] { --p1: #52e6a6; --p2: #1fb77a; }
.hud-prompt[data-kind="ghost"] { --p1: #c78bff; --p2: #8d44d8; animation: none; }
.hud-prompt[data-urg="2"] { animation-duration: 0.7s; }
.hud-prompt.is-in { animation: hud-promptin 0.4s var(--dw-ease-bounce) both; }
@keyframes hud-promptin { from { opacity: 0; transform: scale(0.7) translateY(calc(-14 * var(--u))); } to { opacity: 1; transform: none; } }
@keyframes hud-promptpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
.hud-prompt__body { display: flex; flex-direction: column; align-items: flex-start; gap: calc(3 * var(--u)); min-width: 0; flex: 1 1 auto; }
.hud-prompt__head { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: calc(12 * var(--u)); row-gap: 0; }
.hud-prompt__title { font-size: calc(32 * var(--u)); line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; color: var(--dw-cream); text-shadow: var(--hud-ol); }
.hud-prompt__sub { font-size: calc(15 * var(--u)); font-weight: 800; line-height: 1.5; color: #fff; text-shadow: 0 2px 0 rgba(27, 19, 64, 0.65); }
.hud-prompt__who { font-size: calc(12 * var(--u)); font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dw-ink); opacity: 0.75; white-space: nowrap; }
.hud-prompt__who[hidden] { display: none; }
.hud-prompt__bar { align-self: stretch; height: calc(16 * var(--u)); margin-top: calc(5 * var(--u)); border: calc(3 * var(--u)) solid var(--dw-ink); border-radius: calc(9 * var(--u)); background: rgba(27, 19, 64, 0.55); overflow: hidden; }
.hud-prompt__bar[hidden] { display: none; }
.hud-prompt__barfill { display: block; width: 100%; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #3ddc97, #a5e05a); transition: transform 0.09s linear; }

.hud-key--inline {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; height: calc(24 * var(--u)); min-width: calc(24 * var(--u)); padding: 0 calc(8 * var(--u)); margin: 0 calc(1 * var(--u));
  border: calc(2.5 * var(--u)) solid var(--dw-ink); border-radius: calc(8 * var(--u)); background: var(--dw-paper); color: var(--dw-ink);
  box-shadow: 0 calc(3 * var(--u)) 0 var(--dw-ink), inset 0 2px 0 #fff; font-size: calc(12 * var(--u)); font-weight: 900; letter-spacing: 0.05em; text-shadow: none; line-height: 1;
}

/* countdown / urgency ring */
.hud-ring { position: relative; flex: none; width: calc(58 * var(--u)); height: calc(58 * var(--u)); display: grid; place-items: center; --rc: var(--dw-mint); }
.hud-ring[hidden] { display: none; }
.hud-ring__svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.hud-ring__bg { fill: rgba(27, 19, 64, 0.55); stroke: var(--dw-ink); stroke-width: 6; }
.hud-ring__arc { fill: none; stroke: var(--rc); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 0.12s linear; }
.hud-ring__num { position: relative; font-size: calc(24 * var(--u)); font-weight: 900; color: var(--dw-cream); text-shadow: 0 2px 0 var(--dw-ink); font-variant-numeric: tabular-nums; }
.hud-prompt[data-urg="1"] .hud-ring { --rc: var(--dw-banana); }
.hud-prompt[data-urg="2"] .hud-ring { --rc: var(--dw-danger); }
.hud-prompt[data-kind="ghost"] .hud-ring { --rc: var(--dw-sky); }
.hud-prompt[data-kind="ghost"] .hud-ring__num { display: none; }
#ui .hud-ring__ico { position: absolute; width: 56%; height: 56%; display: none; color: var(--dw-tomato); }
#ui .hud-prompt[data-kind="ghost"] .hud-ring__ico { display: block; }

/* ------------------------------------------------------------ countdown numerals (upper third, clear of the island) */
.hud-count { position: absolute; left: 50%; top: calc(var(--dw-pad-t) + 62 * var(--u)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; text-align: center; }
.hud-count[hidden] { display: none; }
.hud-count__lbl { display: flex; flex-direction: column; align-items: center; margin-bottom: calc(-4 * var(--u)); }
.hud-count[data-n="0"] .hud-count__lbl { display: none; }
.hud-count__round { font-size: calc(22 * var(--u)); line-height: 1.1; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dw-cream); text-shadow: var(--hud-ol); }
.hud-count__sub { font-size: max(12px, calc(13 * var(--u))); font-weight: 800; color: var(--dw-cream-2); text-shadow: var(--hud-ol-sm); max-width: min(calc(420 * var(--u)), 84vw); text-wrap: balance; margin: calc(2 * var(--u)) 0 calc(10 * var(--u)); line-height: 1.25; }
.hud-count__sub:empty { display: none; }
.hud-count[data-final="1"] .hud-count__round { color: var(--dw-gold); font-size: calc(28 * var(--u)); }
.hud-count__n {
  display: block; font-weight: 900; line-height: 1; font-size: clamp(calc(70 * var(--u)), 19vmin, calc(240 * var(--u)));
  color: var(--dw-banana);
  text-shadow: -4px -4px 0 var(--dw-ink), 4px -4px 0 var(--dw-ink), -4px 4px 0 var(--dw-ink), 4px 4px 0 var(--dw-ink), 0 -4px 0 var(--dw-ink), 0 4px 0 var(--dw-ink), -4px 0 0 var(--dw-ink), 4px 0 0 var(--dw-ink), 0 10px 0 var(--dw-ink), 0 18px 28px rgba(27, 19, 64, 0.4);
}
.hud-count[data-n="4"] .hud-count__n { font-size: clamp(calc(34 * var(--u)), 8vmin, calc(90 * var(--u))); color: var(--dw-cream); letter-spacing: 0.06em; }
.hud-count[data-n="3"] .hud-count__n { color: var(--dw-tomato); }
.hud-count[data-n="2"] .hud-count__n { color: var(--dw-banana); }
.hud-count[data-n="1"] .hud-count__n { color: var(--dw-mint); }
.hud-count[data-n="0"] .hud-count__n { color: #7fe3ff; font-size: clamp(calc(80 * var(--u)), 25vmin, calc(280 * var(--u))); }
.hud-count__n.is-pop { animation: hud-numpop 0.55s var(--dw-ease-bounce) both; }
.hud-count[data-n="0"] .hud-count__n.is-pop { animation: hud-gopop 0.9s ease-out both; }
@keyframes hud-numpop { 0% { opacity: 0; transform: scale(2.4) rotate(-10deg); } 55% { opacity: 1; transform: scale(0.92) rotate(2deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes hud-gopop { 0% { opacity: 0; transform: scale(0.4) rotate(-8deg); } 25% { opacity: 1; transform: scale(1.18) rotate(3deg); } 55% { transform: scale(1) rotate(0); opacity: 1; } 100% { opacity: 0; transform: scale(1.5) translateY(calc(-30 * var(--u))); } }

/* ------------------------------------------------------------ ability chips */
.hud-abil {
  position: absolute; left: 50%; bottom: var(--dw-pad-b); transform: translateX(-50%);
  display: flex; align-items: flex-end; gap: calc(10 * var(--u));
  transition: opacity 0.3s;
}
.hud-ab {
  --ac: var(--dw-tomato);
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: calc(3 * var(--u));
  width: calc(106 * var(--u)); height: calc(70 * var(--u)); padding: calc(7 * var(--u)) 0 calc(6 * var(--u));
  border-radius: calc(18 * var(--u)); background: rgba(27, 19, 64, 0.78); overflow: hidden;
  box-shadow: 0 calc(4 * var(--u)) 0 var(--dw-ink);
  transition: transform 0.15s var(--dw-ease-bounce), filter 0.2s, opacity 0.2s;
}
.hud-ab[data-act="haul"] { --ac: var(--dw-sky); }
.hud-ab[data-act="snip"] { --ac: var(--dw-banana); }
.hud-ab[data-act="tomato"] { --ac: var(--dw-tomato); width: calc(150 * var(--u)); }
.hud-ab__fill { position: absolute; inset: 0; transform-origin: 50% 100%; transform: scaleY(0); background: var(--ac); opacity: 0.55; transition: transform 0.06s linear; }
.hud-ab.is-ready .hud-ab__fill { opacity: 1; }
.hud-ab.is-ready .hud-ab__fill::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%; background: rgba(255, 255, 255, 0.3); }
.hud-ab__in { position: relative; display: flex; align-items: center; gap: calc(6 * var(--u)); }
.hud-ab__ico { width: calc(26 * var(--u)); height: calc(26 * var(--u)); color: var(--dw-cream); filter: drop-shadow(0 2px 0 var(--dw-ink)); }
.hud-ab[data-act="snip"] .hud-ab__ico { color: var(--dw-cream); }
.hud-ab__lbl { font-size: calc(15 * var(--u)); letter-spacing: 0.06em; color: var(--dw-cream); text-shadow: var(--hud-ol-sm); }
.hud-ab .hud-key { position: relative; }
.hud-ab.is-pop { animation: hud-abpop 0.3s var(--dw-ease-bounce); }
@keyframes hud-abpop { 0% { transform: scale(1); } 40% { transform: scale(1.14) translateY(calc(-4 * var(--u))); } 100% { transform: scale(1); } }
.hud-ab.is-on { transform: translateY(calc(-6 * var(--u))) scale(1.05); box-shadow: 0 calc(10 * var(--u)) 0 var(--dw-ink), 0 0 0 calc(3 * var(--u)) var(--dw-cream); }
.hud-ab.is-on .hud-ab__fill { opacity: 1; transform: scaleY(1) !important; }
.hud-ab.is-off { filter: grayscale(0.9) brightness(0.8); opacity: 0.55; }
.hud-ab[data-climb="1"] { --ac: var(--dw-mint); }

.hud-key {
  display: inline-flex; align-items: center; justify-content: center; min-width: calc(24 * var(--u)); height: calc(21 * var(--u)); padding: 0 calc(8 * var(--u));
  border: calc(2 * var(--u)) solid var(--dw-ink); border-radius: calc(7 * var(--u)); background: var(--dw-paper); color: var(--dw-ink);
  font-size: calc(11 * var(--u)); font-weight: 900; letter-spacing: 0.06em; line-height: 1; box-shadow: 0 calc(2.5 * var(--u)) 0 var(--dw-ink), inset 0 2px 0 #fff; text-shadow: none;
}

.hud-hint {
  position: absolute; right: var(--dw-pad-r); bottom: var(--dw-pad-b); padding: calc(6 * var(--u)) calc(10 * var(--u)); border-radius: calc(10 * var(--u));
  background: var(--hud-plate); font-size: calc(11 * var(--u)); font-weight: 900; letter-spacing: 0.12em; border: 2px solid var(--dw-ink);
}
.hud-hint[hidden] { display: none; }

/* ------------------------------------------------------------ emote strip */
.hud-emotes {
  position: absolute; right: var(--dw-pad-r); bottom: var(--dw-pad-b); display: flex; flex-direction: column; align-items: flex-end; gap: calc(4 * var(--u));
  opacity: 0.8; transition: opacity 0.2s;
}
.hud-emotes:hover { opacity: 1; }
.hud-emotes__hd { font-size: calc(9 * var(--u)); font-weight: 900; letter-spacing: 0.22em; color: var(--dw-cream); text-shadow: 0 1px 0 var(--dw-ink), 0 0 6px var(--dw-ink); padding-right: 2px; }
.hud-em {
  appearance: none; -webkit-appearance: none; display: flex; align-items: center; gap: calc(7 * var(--u)); height: calc(28 * var(--u)); padding: 0 calc(10 * var(--u)) 0 calc(5 * var(--u));
  border-width: calc(2 * var(--u)); border-radius: calc(10 * var(--u)); background: rgba(27, 19, 64, 0.66); color: var(--dw-cream);
  font: inherit; font-size: calc(12 * var(--u)); font-weight: 900; letter-spacing: 0.04em; cursor: pointer; pointer-events: auto; touch-action: manipulation;
  box-shadow: 0 calc(2 * var(--u)) 0 var(--dw-ink);
  transition: transform 0.12s var(--dw-ease-bounce), background-color 0.12s;
}
@media (hover: hover) { .hud-em:hover { transform: translateX(calc(-4 * var(--u))); background: rgba(67, 53, 143, 0.9); } }
.hud-em:active { transform: translateY(calc(2 * var(--u))); }
.hud-em .hud-key { height: calc(19 * var(--u)); min-width: calc(19 * var(--u)); padding: 0 calc(5 * var(--u)); }

.hud-dbg {
  position: absolute; left: var(--dw-pad-l); bottom: calc(var(--dw-pad-b) + 26px); padding: 2px calc(8 * var(--u)); border-radius: 8px; background: rgba(27, 19, 64, 0.78);
  font-family: var(--dw-mono); font-size: calc(11 * var(--u)); font-weight: 700; color: #fff;
}
.hud-dbg[hidden] { display: none; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

/* ---- narrow: portrait phones (and tiny windows). Top-left round pill (the UI's mute/gear sit top-right), chips become a row under it.
   A SHORT landscape phone (e.g. 568x320) is NOT this layout: it takes the short-landscape block below. */
@media (max-width: 640px) and (orientation: portrait), (max-width: 640px) and (min-height: 521px) {
  .hud { --u: 1px; }
  .hud-top { left: var(--dw-pad-l); transform: none; align-items: flex-start; }
  .hud-round { height: calc(36 * var(--u)); padding: 0 calc(11 * var(--u)); gap: calc(7 * var(--u)); }
  .hud-round__n, .hud-round__clock { font-size: calc(18 * var(--u)); }
  .hud-meter { width: calc(168 * var(--u)); height: calc(21 * var(--u)); }
  .hud-meter__txt { font-size: calc(10 * var(--u)); letter-spacing: 0.1em; }

  .hud-chips { top: calc(var(--dw-pad-t) + 74 * var(--u)); left: var(--dw-pad-l); right: var(--dw-pad-r); width: auto; flex-direction: row; gap: calc(5 * var(--u)); }
  .hud-chip {
    flex: 1 1 0; min-width: 0; height: calc(64 * var(--u)); padding: calc(4 * var(--u)) calc(4 * var(--u)) calc(2 * var(--u)) calc(9 * var(--u)); border-radius: calc(13 * var(--u));
    display: grid; grid-template-columns: calc(26 * var(--u)) 1fr; grid-template-rows: calc(34 * var(--u)) calc(16 * var(--u)); column-gap: calc(3 * var(--u)); row-gap: 0; align-items: center;
  }
  .hud-chip.is-you { transform: translateY(calc(3 * var(--u))); }
  .hud-chip__avwrap { width: calc(26 * var(--u)); height: calc(30 * var(--u)); margin: 0; grid-column: 1; grid-row: 1; }
  .hud-chip__score { grid-column: 2; grid-row: 1; font-size: calc(22 * var(--u)); text-align: center; min-width: 0; text-shadow: var(--hud-ol-sm); }
  .hud-chip__txt { grid-column: 1 / -1; grid-row: 2; align-items: center; }
  .hud-chip__nrow { justify-content: center; }
  .hud-chip__name { font-size: calc(10.5 * var(--u)); }
  .hud-chip__you, .hud-chip__st { display: none !important; }
  #ui .hud-chip__crown { width: calc(18 * var(--u)); height: calc(18 * var(--u)); margin-left: calc(-9 * var(--u)); top: calc(-12 * var(--u)); }
  .hud-chip__plus { right: calc(4 * var(--u)); top: calc(-16 * var(--u)); }
  .hud-chip__avwrap::before { inset: calc(-3 * var(--u)); }

  .hud-alerts { top: calc(var(--dw-pad-t) + 154 * var(--u)); width: 94vw; }
  .hud-feed { top: calc(var(--dw-pad-t) + 268 * var(--u)); left: var(--dw-pad-l); right: auto; width: calc(100vw - var(--dw-pad-l) - var(--dw-pad-r)); align-items: flex-start; }
  .hud-line { text-align: left; font-size: calc(12 * var(--u)); padding: calc(4 * var(--u)) calc(10 * var(--u)); }
  .hud-line:nth-last-child(n + 3) { display: none; }
  .hud-line.is-in { animation-name: hud-linein-l; }
  .hud-banner__title { font-size: calc(19 * var(--u)); }
  .hud-banner__sub { font-size: calc(12 * var(--u)); }
  .hud-prompt { padding: calc(8 * var(--u)) calc(16 * var(--u)) calc(9 * var(--u)) calc(10 * var(--u)); gap: calc(10 * var(--u)); }
  .hud-prompt__title { font-size: calc(25 * var(--u)); }
  .hud-prompt__sub { font-size: calc(13 * var(--u)); }
  .hud-ring { width: calc(48 * var(--u)); height: calc(48 * var(--u)); }
  .hud-ring__num { font-size: calc(20 * var(--u)); }
  .hud-emotes { display: none; }
  .hud-ab { width: calc(86 * var(--u)); height: calc(62 * var(--u)); }
  .hud-ab__lbl { font-size: calc(13 * var(--u)); }
  .hud-ab[data-act="tomato"] { width: calc(130 * var(--u)); }
  .hud-count { top: calc(var(--dw-pad-t) + 150 * var(--u)); }
  .hud-count__round { font-size: calc(19 * var(--u)); }
}
@keyframes hud-linein-l { from { opacity: 0; transform: translateX(calc(-40 * var(--u))) scale(0.9); } to { opacity: 1; transform: none; } }

/* ---- short landscape phones: chips column stays on the left but gets slim; abilities stay bottom-centre between the thumbs */
@media (max-height: 520px) and (orientation: landscape) {
  .hud-count { top: calc(var(--dw-pad-t) + 46 * var(--u)); }
  .hud-count__n { font-size: clamp(calc(60 * var(--u)), 17vmin, calc(240 * var(--u))); }
  .hud-chips { width: calc(176 * var(--u)); gap: calc(5 * var(--u)); }
  .hud-chip { height: calc(40 * var(--u)); padding-left: calc(7 * var(--u)); border-radius: calc(13 * var(--u)); }
  .hud-chip__avwrap { width: calc(28 * var(--u)); height: calc(32 * var(--u)); margin-left: calc(2 * var(--u)); }
  .hud-chip__name { font-size: calc(13 * var(--u)); }
  .hud-chip__st { display: none; }
  .hud-chip__score { font-size: calc(23 * var(--u)); }
  .hud-alerts { top: calc(var(--dw-pad-t) + 76 * var(--u)); gap: calc(6 * var(--u)); width: min(calc(500 * var(--u)), 56vw); }
  .hud-banner { padding: calc(5 * var(--u)) calc(16 * var(--u)) calc(6 * var(--u)) calc(11 * var(--u)); }
  .hud-banner__title { font-size: calc(19 * var(--u)); }
  .hud-prompt { padding: calc(6 * var(--u)) calc(16 * var(--u)) calc(7 * var(--u)) calc(10 * var(--u)); gap: calc(10 * var(--u)); }
  .hud-prompt__title { font-size: calc(26 * var(--u)); }
  .hud-prompt__sub { font-size: calc(13 * var(--u)); line-height: 1.35; }
  .hud-prompt__bar { height: calc(13 * var(--u)); margin-top: calc(3 * var(--u)); }
  .hud-ring { width: calc(46 * var(--u)); height: calc(46 * var(--u)); }
  .hud-ring__num { font-size: calc(19 * var(--u)); }
  .hud-feed { top: calc(var(--dw-pad-t) + 50 * var(--u)); }
  .hud-line:nth-last-child(n + 4) { display: none; }
  .hud-emotes { display: none; }
  .hud-abil { gap: calc(7 * var(--u)); }
  .hud-ab { width: calc(94 * var(--u)); height: calc(60 * var(--u)); }
}

/* ---- touch: the thumbs own the bottom corners. Chips shrink, keycaps vanish (the on-screen buttons are the labels). */
.hud[data-input="touch"] .hud-ab .hud-key, .hud[data-input="touch"] .hud-emotes { display: none; }
.hud[data-input="touch"] .hud-ab { height: calc(50 * var(--u)); width: calc(96 * var(--u)); padding: 0; justify-content: center; }
.hud[data-input="touch"] .hud-ab__lbl { font-size: calc(13 * var(--u)); }
.hud[data-input="touch"] .hud-ab__ico { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.hud[data-input="touch"] .hud-ab__in { gap: calc(4 * var(--u)); }
.hud[data-input="touch"] .hud-ab[data-act="tomato"] { width: calc(130 * var(--u)); }
@media (max-width: 640px) and (orientation: portrait), (max-width: 640px) and (min-height: 521px) {
  /* portrait + on-screen controls: park the cooldown chips just above the thumb zone */
  #ui[data-touchui="1"] .hud-abil { bottom: calc(var(--dw-pad-b) + 152px); }
  .hud[data-input="touch"] .hud-ab { width: calc(96 * var(--u)); height: calc(46 * var(--u)); }
}
@media (max-width: 760px) { .hud:not([data-input="touch"]) .hud-emotes { display: none; } }
/* tiny landscape phones (<= 640 wide, e.g. 568x320): the thumb buttons already carry labels + cooldown fills, so only the ghost's
   TOMATO chip stays; the kill feed drops below the shrink meter so the two never overlap */
@media (max-width: 640px) and (max-height: 520px) and (orientation: landscape) {
  #ui[data-touchui="1"] .hud-ab:not([data-act="tomato"]) { display: none; }
  .hud-feed { top: calc(var(--dw-pad-t) + 78 * var(--u)); }
  .hud-line:nth-last-child(n + 3) { display: none; }
}