/* HUD — values over the playfield, always in solid navy chips. Tokens only.
   <header class="hud">
     <div class="hud__start"><span class="hud-chip hud-chip--score" role="status" aria-label="Score 120">
       <svg class="icon" aria-hidden="true"><use href="#star"/></svg><span class="hud-chip__value">120</span></span></div>
     <div class="hud__mid"><span class="hud-chip hud-lives" role="img" aria-label="3 of 3 lives">
       <svg class="heart" aria-hidden="true"><use href="#heart"/></svg>…</span></div>
     <div class="hud__end"><button class="btn btn--icon" aria-label="Pause">…</button></div>
     <div class="hud__sub">coins chip · power-ups (status, beside the coins) · .hud-combo last, so nothing shifts when it shows</div>
   </header>
   Score: count up over --dur-count and add .is-bump (1.12) per gain.
   Lives: .heart; losing one gets .is-losing (squash), then .is-lost (ink-300 outline).
   .hud-combo shows from ×2: .is-hit pops it, .is-break wiggles it before hiding.
   Controls in the HUD sit on the field: they take --focus-ring-dark.
   Timer: .ring (SVG, --t = time left 0–1) or .bar; add .is-warn under 25 %,
   .is-danger under 10 %. .progress is a lime bar with milestone pips.
   Meter fills take the candy's ink tone (soda, tangerine, lime ink and
   --danger): ≥ 4.9:1 on their track, where a meter needs 3:1. A candy
   fill on a pale track is too faint (1.7–2.3:1). */

.hud {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: var(--z-hud);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "start mid end" "sub sub sub";
  align-items: start;
  gap: var(--space-2) var(--space-2);
  padding: calc(var(--safe-top) + var(--space-3)) calc(var(--safe-right) + var(--gutter)) 0 calc(var(--safe-left) + var(--gutter));
  pointer-events: none;
}
.hud > * { pointer-events: auto; min-width: 0; }
.hud__start { grid-area: start; display: flex; gap: var(--space-2); align-items: center; }
.hud__mid   { grid-area: mid; display: flex; justify-content: center; }
.hud__end   { grid-area: end; display: flex; gap: var(--space-2); justify-content: flex-end; }
.hud__sub   { grid-area: sub; display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; min-height: var(--powerup); pointer-events: none; }
.hud__sub > * { pointer-events: auto; }
.hud__push  { margin-inline-start: auto; }
.hud .btn { margin-bottom: 0; }
.hud .btn:focus-visible { --btn-ring: var(--focus-ring-dark); }
.hud .powerup:focus-visible { box-shadow: inset 0 2px 0 var(--sheen), var(--shadow-edge-ink), var(--focus-ring-dark); }

/* ── Chip ───────────────────────────────────────────────── */
.hud-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--hud-h);
  padding: 0 var(--space-4) 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--hud-bg);
  box-shadow: var(--hud-rim);
  color: var(--hud-fg);
  font-family: var(--font-num);
  font-size: var(--fs-xl);
  font-weight: var(--fw-num);
  line-height: 1;
  font-feature-settings: var(--num-tabular);
  white-space: nowrap;
  transform-origin: center;
}
.hud-chip > .icon { width: var(--icon); height: var(--icon); color: var(--hud-num); }
.hud-chip__value { min-width: 1.6ch; text-align: end; }
.hud-chip--score .hud-chip__value { color: var(--hud-num); min-width: 3ch; }
.hud-chip__label {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--hud-muted);
}
button.hud-chip, .hud-chip--btn { height: var(--hud-h-hit); cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.hud-chip:focus-visible, .hud-chip--btn:focus-visible { box-shadow: var(--hud-rim), var(--focus-ring-dark); }
.hud-chip.is-bump { animation: fz-bump var(--dur-pop) var(--ease-pop); }
.hud-chip--coins > .icon { color: var(--lemon-fill); }

/* ── Lives ──────────────────────────────────────────────── */
.hud-lives { gap: var(--space-1); padding: 0 var(--space-3); }
.heart {
  width: var(--heart);
  height: var(--heart);
  flex: none;
  color: var(--bubblegum-fill);   /* the sprite paints with currentColor */
  fill: currentColor;
  stroke: var(--ink-900);
  stroke-width: 22;             /* user units of the 256 viewBox: 2 px at 24 px */
  stroke-linejoin: round;
  overflow: visible;
  transition: color var(--dur-base) var(--ease-out), stroke var(--dur-base) var(--ease-out);
}
.heart.is-losing { animation: fz-squash var(--dur-squash) var(--ease-squash) 2; }
.heart.is-lost { color: transparent; stroke: var(--ink-300); }
.heart.is-gained { animation: fz-pop var(--dur-pop) var(--ease-pop); }

/* ── Combo ──────────────────────────────────────────────── */
.hud-combo {
  display: inline-flex;
  align-items: center;
  height: var(--hud-h);
  padding: 0 var(--space-3);
  border: var(--bw) solid var(--ink-900);
  border-radius: var(--radius-pill);
  background: var(--tangerine-fill);
  box-shadow: var(--hud-rim), var(--shadow-edge-ink);
  color: var(--ink-900);
  font-family: var(--font-num);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-num);
  line-height: 1;
  font-feature-settings: var(--num-tabular);
}
.hud-combo.is-hit { animation: fz-pop var(--dur-pop) var(--ease-pop); }
.hud-combo.is-break { animation: fz-wiggle var(--dur-wiggle) var(--ease-out); }

/* ── Timer ring ─────────────────────────────────────────────
   <span class="ring" style="--t:.6" role="timer" aria-label="18 seconds left">
     <svg viewBox="0 0 48 48" aria-hidden="true"><circle class="ring__track" cx="24" cy="24" r="19"/>
       <circle class="ring__fill" cx="24" cy="24" r="19" pathLength="100"/></svg>
     <span class="ring__num">18</span></span>                                    */
.ring {
  --ring-c: var(--soda-ink);
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--ring);
  height: var(--ring);
  flex: none;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0 var(--bw) var(--ink-900), var(--hud-rim);
}
.ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__track, .ring__fill { fill: none; stroke-width: var(--ring-stroke); }
.ring__track { stroke: var(--soda-200); }
.ring__fill {
  stroke: var(--ring-c);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--t, 1) * 100);
  transition: stroke var(--dur-base) var(--ease-out);
}
.ring__num {
  position: relative;
  font-family: var(--font-num);
  font-size: var(--fs-md);
  font-weight: var(--fw-num);
  font-feature-settings: var(--num-tabular);
  color: var(--ink-900);
  line-height: 1;
}
.ring.is-warn { --ring-c: var(--tangerine-ink); }
.ring.is-danger { --ring-c: var(--danger); animation: fz-pulse-danger var(--dur-tick) ease-in-out infinite; }

/* ── Timer bar ──────────────────────────────────────────── */
.bar {
  --bar-c: var(--soda-ink);
  position: relative;
  height: var(--bar-h);
  min-width: var(--bar-min);
  border: var(--bw) solid var(--ink-900);
  border-radius: var(--radius-pill);
  background: var(--soda-200);
  overflow: hidden;
}
.bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--t, 1) * 100%);
  border-radius: inherit;
  background: var(--bar-c);
  box-shadow: inset 0 2px 0 var(--sheen);
  transition: width var(--dur-base) linear, background-color var(--dur-base) var(--ease-out);
}
.bar.is-warn { --bar-c: var(--tangerine-ink); }
.bar.is-danger { --bar-c: var(--danger); }

/* ── Progress with milestone pips ───────────────────────────
   <div class="progress" style="--p:.45" role="progressbar" aria-valuenow="45" …>
     <span class="progress__pip is-reached" style="--at:.2"></span>…</div>         */
.progress {
  position: relative;
  height: var(--bar-h);
  min-width: var(--progress-min);
  border: var(--bw) solid var(--ink-900);
  border-radius: var(--radius-pill);
  background: var(--white);
}
.progress::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p, 0) * 100%);
  border-radius: inherit;
  background: var(--lime-ink);
  box-shadow: inset 0 2px 0 var(--sheen);
  transition: width var(--dur-base) var(--ease-out);
}
.progress__pip {
  position: absolute;
  top: 50%;
  left: calc(var(--at) * 100%);
  width: var(--progress-pip);
  height: var(--progress-pip);
  border: var(--bw) solid var(--ink-900);
  border-radius: 50%;
  background: var(--white);
  transform: translate(-50%, -50%);
}
.progress__pip.is-reached { background: var(--lemon-fill); animation: fz-pop var(--dur-pop) var(--ease-pop); }