/* hud.css — the run HUD. Portrait first; everything clears the safe areas.
   Nothing here covers the three lanes' reading zone in the middle band. */

#hud { position: fixed; inset: 0; pointer-events: none; font-family: var(--ui); color: var(--ink); z-index: 5; }
#hud button { pointer-events: auto; font: inherit; }

/* ── Top bar ─────────────────────────────────────────────── */
.hud-top { position: absolute; top: calc(var(--safe-t) + 10px); left: 10px; right: 10px; display: flex; align-items: flex-start; gap: 8px; }
.hud-score { display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--ink); }
.hud-score svg { width: 30px; height: 30px; }
.hud-score b { font: 800 24px/1 var(--display); letter-spacing: .5px; padding-top: 3px; }
.hud-combo { width: 44px; height: 44px; display: grid; place-items: center; border: 3px solid var(--red-ink); border-radius: 50%; color: var(--red-ink); font: 800 17px/1 var(--display); transform: rotate(-12deg); background: rgba(255, 246, 224, .88); box-shadow: inset 0 0 0 2px rgba(255, 246, 224, .9), inset 0 0 0 3.5px rgba(215, 38, 30, .5); }
.hud-combo[hidden] { display: none; }
.hud-spacer { flex: 1; }
.hud-btn { width: 44px; height: 44px; display: grid; place-items: center; background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 var(--ink); cursor: pointer; }
.hud-btn svg { width: 22px; height: 22px; }
.hud-btn:active { translate: 0 2px; box-shadow: 0 1px 0 var(--ink); }

/* ── Wooden ruler chase meter ────────────────────────────── */
.hud-clock { position: absolute; top: calc(var(--safe-t) + 56px); left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 6px; padding: 4px 13px 4px 8px;
  background: var(--paper); border: 2.5px solid var(--ink); border-radius: 999px; box-shadow: 0 3px 0 var(--ink); font: 800 19px/1 var(--display); color: var(--ink); }
.hud-clock[hidden] { display: none; }
.hud-clock svg { width: 22px; height: 22px; color: var(--ink); }
.hud-ruler { transition: opacity .35s, transform .5s var(--spring); }
.hud-ruler.is-away { opacity: 0; transform: translateY(-26px) scale(.9); pointer-events: none; }
.hud-ruler.is-arriving { animation: ruler-in .6s var(--spring); }
@keyframes ruler-in { from { opacity: 0; transform: translateY(-26px) scale(.9); } }
.hud-ruler { position: absolute; top: calc(var(--safe-t) + 62px); left: 50%; translate: -50% 0; width: min(62vw, 280px); height: 20px;
  background-image:
    linear-gradient(90deg, rgba(22, 18, 14, .72) 0 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(22, 18, 14, .5) 0 1px, transparent 1px),
    linear-gradient(180deg, #e8b774, var(--wood-a) 45%, var(--wood-b));
  background-size: 10% 8px, 2% 4px, 100% 100%;
  background-repeat: repeat-x, repeat-x, no-repeat;
  border: 2.5px solid var(--ink); border-radius: 6px; box-shadow: 0 3px 0 var(--ink); }
.hud-ruler::after { content: ''; position: absolute; inset: 0; border-radius: 4px; background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(120, 70, 30, .12) 18px 21px); }
.hud-ruler .head { position: absolute; top: 50%; width: 28px; height: 28px; translate: -50% -50%; transition: left .5s var(--spring); filter: drop-shadow(0 2px 0 rgba(22, 18, 14, .45)); }
.hud-ruler .head svg { width: 100%; height: 100%; }
.hud-ruler .kemi { left: 90%; }
.hud-ruler[data-band="danger"] { box-shadow: 0 3px 0 var(--ink), 0 0 0 4px rgba(215, 38, 30, .55); animation: ruler-pulse .5s infinite alternate; }
.hud-ruler[data-band="danger"] .vp { animation: vp-shake .18s infinite alternate; }
@keyframes ruler-pulse { to { box-shadow: 0 3px 0 var(--ink), 0 0 0 7px rgba(215, 38, 30, .25); } }
@keyframes vp-shake { to { rotate: 8deg; } }

/* ── Timetable slip (location banner) ────────────────────── */
.hud-slip { position: absolute; top: calc(var(--safe-t) + 92px); left: 0; display: flex; align-items: center; gap: 10px; padding: 8px 18px 8px 14px;
  background:
    linear-gradient(90deg, transparent 38px, rgba(215, 38, 30, .55) 38px 40px, transparent 40px),
    repeating-linear-gradient(180deg, var(--paper) 0 13px, var(--paper-line) 13px 14px);
  border: 2.5px solid var(--ink); border-left: 0; border-radius: 0 12px 12px 0; box-shadow: 0 3px 0 var(--ink);
  transform: translateX(-110%); transition: transform .55s var(--spring); }
.hud-slip.is-in { transform: translateX(0); }
.hud-slip svg { width: 26px; height: 26px; margin-left: -2px; }
.hud-slip small { display: block; font: 800 10px/1 var(--ui); letter-spacing: .16em; color: var(--red-ink); }
.hud-slip strong { display: block; margin-top: 2px; font: 800 21px/1.05 var(--display); color: var(--ink); }

/* ── Chalk-slate question card ───────────────────────────── */
.hud-question { position: absolute; top: calc(var(--safe-t) + 92px); left: 50%; width: min(92vw, 500px); translate: -50% 0; padding: 4px; border-radius: 10px;
  background: linear-gradient(180deg, #c98a4a, #9c6532); border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
  opacity: 0; transform: translateY(-14px) scale(.96); transition: opacity .25s, transform .4s var(--spring); }
.hud-question.is-in { opacity: 1; transform: none; }
.hud-question .slate { padding: 6px 10px 8px; border-radius: 6px; color: var(--chalk);
  background: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .07), transparent 55%), radial-gradient(ellipse at 80% 90%, rgba(255, 255, 255, .05), transparent 50%), var(--chalk-green); }
.hud-question .label { font: 700 13px/1 var(--hand); color: #d8e8c8; opacity: .9; }
.hud-question .prompt { margin-top: 2px; font: 700 clamp(14px, 3.8vw, 18px)/1.2 var(--ui); text-shadow: 0 0 1px rgba(244, 241, 230, .6); }
.hud-answers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 5px; }
/* Chips: 13 px at the least, each with its lane's arrow at every width (the order left-middle-right is the cue that isn't colour). */
.hud-answers li { list-style: none; display: flex; align-items: center; gap: 4px; min-width: 0; min-height: 30px; padding: 3px 5px; background: var(--paper); border: 1.5px solid var(--ink); border-top: 4px solid var(--lane); border-radius: 6px; font: 700 clamp(13px, 3.4vw, 14px)/1.1 var(--ui); color: var(--ink); overflow-wrap: break-word; hyphens: auto; }
.hud-answers li span { min-width: 0; }
.hud-answers li svg { flex: none; width: 12px; height: 12px; color: var(--lane); }
.hud-answers { padding: 0; margin-bottom: 0; }
/* Thinking time left before the gate: drains left, turns red near the end. */
.hud-timer { height: 4px; margin-top: 6px; border-radius: 2px; background: rgba(244, 241, 230, .18); overflow: hidden; }
.hud-timer[hidden] { display: none; }
.hud-timer i { display: block; height: 100%; background: var(--chalk); transform-origin: left center; transform: scaleX(var(--left, 1)); }
.hud-timer.is-low i { background: var(--ruby); }

/* ── Answer labels pinned to the gate boards ─────────────── */
.gate-label { position: absolute; left: 0; top: 0; translate: -50% -50%; max-width: 30vw; padding: 5px 9px; background: var(--paper); border: 2.5px solid var(--ink); border-bottom: 5px solid var(--lane); border-radius: 8px; box-shadow: 0 3px 0 rgba(22, 18, 14, .5); font: 800 15px/1.1 var(--ui); color: var(--ink); text-align: center; white-space: normal; will-change: transform; }
.gate-label[hidden] { display: none; }

/* ── VP speech bubble ────────────────────────────────────── */
.hud-say { position: absolute; left: 12px; bottom: calc(var(--safe-b) + 18px); max-width: min(72vw, 330px); padding: 10px 14px 12px; background: #fff; border: 3px solid var(--red-ink); border-radius: 16px 16px 16px 4px; box-shadow: 4px 5px 0 rgba(22, 18, 14, .5); transform: rotate(-2deg) scale(.6); opacity: 0; transform-origin: 0 100%; transition: transform .35s var(--spring), opacity .2s; }
.hud-say.is-in { transform: rotate(-2deg) scale(1); opacity: 1; }
.hud-say small { display: inline-block; margin-bottom: 3px; padding: 1px 7px; border-radius: 6px; background: var(--red-ink); color: #fff; font: 800 10px/1.5 var(--ui); letter-spacing: .12em; }
.hud-say .say-horn { display: none; }
.hud-say.is-pa { border-color: var(--uniform-blue); }
.hud-say.is-pa small { display: inline-flex; align-items: center; gap: 4px; background: var(--uniform-blue); }
.hud-say.is-pa .say-horn { display: inline-flex; }
.hud-say.is-pa .say-horn svg { width: 13px; height: 13px; }
.hud-say p { margin: 0; font: 800 18px/1.15 var(--display); color: var(--ink); }

@media (max-width: 479px) {
  .hud-say { max-width: 62vw; padding: 7px 11px 9px; }
  .hud-say p { font-size: 15px; }
  .hud-answers li { gap: 3px; padding: 3px 4px; }
}
@media (min-width: 760px) {
  .hud-top { left: 20px; right: 20px; }
  .hud-say { left: 8%; bottom: 18%; }
  .gate-label { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .hud-ruler[data-band="danger"], .hud-ruler[data-band="danger"] .vp { animation: none; }
}

/* ── Answer moment: the teacher's stamp on the card ──────── */
.hud-stamp { position: absolute; top: calc(var(--safe-t) + 96px); left: 50%; translate: calc(min(46vw, 250px) - 70px) 0; width: 62px; height: 62px; display: grid; place-items: center;
  border: 4px solid currentColor; border-radius: 50%; background: rgba(255, 250, 238, .92); box-shadow: 0 3px 0 rgba(22, 18, 14, .45);
  opacity: 0; transform: rotate(-14deg) scale(2.2); pointer-events: none; z-index: 2; }
.hud-stamp svg { width: 38px; height: 38px; }
.hud-stamp.right { color: var(--emerald); }
.hud-stamp.wrong { color: var(--red-ink); }
.hud-stamp.is-on { animation: stamp-hit 1.6s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes stamp-hit { 0% { opacity: 0; transform: rotate(-14deg) scale(2.2); } 14% { opacity: 1; transform: rotate(-14deg) scale(1); } 80% { opacity: 1; transform: rotate(-14deg) scale(1); } 100% { opacity: 0; transform: rotate(-14deg) scale(.9); } }
.hud-answers li.is-right { background: #dcf3e4; border-top-color: var(--emerald); }
.hud-answers li.is-wrong { background: #fbe3df; }
.hud-answers li.is-wrong span { text-decoration: line-through 2px var(--red-ink); }
.hud-answers li.is-taken { outline: 2.5px solid var(--ink); outline-offset: 1px; }
.hud-float { position: absolute; top: calc(var(--safe-t) + 56px); left: 20px; font: 800 22px/1 var(--display); color: var(--pencil); -webkit-text-stroke: 1.5px var(--ink); opacity: 0; pointer-events: none; }
.hud-float.is-on { animation: float-up 1.2s ease-out forwards; }
@keyframes float-up { 0% { opacity: 0; transform: translateY(8px) scale(.8); } 20% { opacity: 1; transform: translateY(0) scale(1.1); } 100% { opacity: 0; transform: translateY(-28px) scale(1); } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .hud-stamp.is-on, .hud-float.is-on { animation-duration: 1.2s; animation-timing-function: step-end; } }
/* A closed door (two-answer questions): greyed, crossed through. */
.hud-answers li.is-closed { background: repeating-linear-gradient(-45deg, #ece4d4 0 6px, #e1d6c2 6px 12px); border-top-color: #9a8f7d; color: #6f6556; letter-spacing: .08em; }
.hud-answers li.is-closed svg { color: #9a8f7d; }

/* Pending is reserved for callers that intentionally stage the answer reveal. */
.hud-answers li { position: relative; }
.hud-answers li span { transition: opacity .3s; }
.hud-answers li:nth-child(2) span { transition-delay: .08s; }
.hud-answers li:nth-child(3) span { transition-delay: .16s; }
.hud-answers.is-pending li span { opacity: 0; transition: none; }
.hud-answers li::after { content: ''; position: absolute; left: 24px; right: 12px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: rgba(22, 18, 14, .16); opacity: 0; transition: opacity .2s; }
.hud-answers.is-pending li:not(.is-closed)::after { opacity: 1; }

/* Door labels: words up close, the lane's pin far away. */
.gate-label i { display: none; }
.gate-label.is-far { width: 24px; height: 24px; padding: 0; display: grid; place-items: center; border-radius: 50%; border-width: 2px; background: var(--lane); }
.gate-label.is-far span { display: none; }
.gate-label.is-far i { display: block; width: 14px; height: 14px; color: #fff; }
.gate-label.is-far i svg { width: 100%; height: 100%; }

/* The opening: narration captions and the 3-2-1-RUN! figures. */
.hud-caption { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 8%); translate: -50% 0; width: max-content; max-width: 86vw; margin: 0; padding: 8px 18px 10px;
  background: rgba(22, 18, 14, .74); border-radius: 12px; color: var(--paper); font: 700 26px/1.2 var(--hand); text-align: center;
  opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .3s; }
.hud-caption.is-in { opacity: 1; transform: none; }
.hud-beat { position: absolute; left: 50%; top: 27%; translate: -50% -50%; font: 800 min(34vw, 150px)/1 var(--display); color: var(--pencil);
  -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink); opacity: 0; pointer-events: none; }
.hud-beat.is-word { color: var(--red-ink); font-size: min(26vw, 120px); -webkit-text-stroke-color: var(--paper); text-shadow: 0 6px 0 var(--ink), 0 0 0 transparent; }
.hud-beat.is-on { animation: beat-pop .56s var(--spring) forwards; }
@keyframes beat-pop { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; transform: scale(1.08); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .hud-beat.is-on { animation-duration: .01s; opacity: 1; } }

/* A long question: smaller type, so the whole card fits and the lanes stay in view (no stopping to read). */
.hud-question.is-long .prompt { font-size: clamp(13px, 3.5vw, 16px); }
.hud-question.is-long .hud-answers li { min-height: 26px; font-size: 12.5px; }

/* ── Tutorial hint: a sticky note at the bottom ──────────── */
.hud-hint { position: absolute; left: 50%; bottom: calc(var(--safe-b) + max(12%, 96px)); translate: -50% 0; display: flex; align-items: center; gap: 10px; padding: 9px 15px 9px 11px;
  background: #fff3a8; border: 2px solid var(--ink); border-radius: 3px; box-shadow: 3px 4px 0 rgba(22, 18, 14, .45); rotate: -2deg;
  font: 800 17px/1.1 var(--ui); color: var(--ink); white-space: nowrap; animation: hint-in .35s var(--spring); }
.hud-hint[hidden] { display: none; }
.hud-hint .glyph { display: inline-flex; color: var(--ink); }
.hud-hint .glyph svg { height: 34px; width: auto; }
.hud-hint .tick { display: none; color: var(--red-ink); }
.hud-hint .tick svg { width: 26px; height: 26px; }
.hud-hint.is-done .tick { display: inline-flex; }
.hud-hint.is-done { animation: none; }
@keyframes hint-in { from { opacity: 0; transform: translateY(14px) scale(.92); } }
.hud-say.is-off { border-style: dashed; border-color: var(--ink); }
.hud-say.is-off small { background: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .hud-hint, .hud-ruler.is-arriving { animation: none; }
  .hud-ruler { transition: opacity .2s; }
  .hud-ruler.is-away { transform: none; }
  /* Slips, bubbles and the question card fade in place; the countdown swaps numbers without growing. */
  .hud-slip, .hud-slip.is-in, .hud-say, .hud-say.is-in, .hud-question, .hud-question.is-in { transform: none; transition: opacity .25s; }
  .hud-slip { opacity: 0; }
  .hud-slip.is-in { opacity: 1; }
  .hud-beat.is-on { animation: none; opacity: 1; transform: none; }
}