/* Dark only, on purpose — no prefers-color-scheme switching anywhere.
   THREE type sizes and no more for TEXT — display numerals (the countdown
   clock, the final score, the emoji grid) are exempt: they are glanced at,
   not read.
     13px  labels     — counter, cue, option numbers
     16px  narration  — stage direction
     19px  dialogue   — quoted setup line AND the three candidates
   The rule that earns the serif: anything inside quote marks is dialogue. */

@font-face { font-family: Inter; src: url(/fonts/inter-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url(/fonts/inter-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Newsreader; src: url(/fonts/newsreader-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --ink: #ECEDEF;
  --paper: #14151A;
  --hit: #2ABC74;
  --miss: #E0483E;
  /* Tinted chip background + --ink text for the states that can't clear
     4.5:1 any other way — see the .grid-cell rules below for why. */
  --expired-bg: rgb(236 237 239 / 0.12);
  --expired-fg: var(--ink);
  --label: 0.8125rem;   /* 13px */
  --narration: 1rem;    /* 16px */
  --dialogue: 1.1875rem;/* 19px */
  --measure: 34rem;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 1.5rem 1.25rem 3rem;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--narration);
  line-height: 1.6;
  text-align: left;
}

main { max-width: var(--measure); margin: 0 auto; padding-bottom: 6.5rem; }
section[hidden] { display: none; }

/* Fades in whenever a section actually becomes visible — landing, warm-up,
   the countdown, stepping into a round, landing on results. Safe to leave
   unscoped: nextQuestion() sets `hidden = false` on #screen-round on every
   question, but setting a boolean property to the value it already has is
   a no-op — the attribute never actually changes after the first question,
   so this can't retrigger mid-round, only on a genuine screen change. */
section:not([hidden]) { animation: screen-fade-in 200ms ease; }
@keyframes screen-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Reserves a stable height so option 1 doesn't land at a different y on
   every question. Sized to the SHORTEST realistic question (a one-line
   scene, three single-line options — measured at ~16rem rendered), not
   the p90 case: reserving for the long tail left the common short case
   with a large dead gap between the options and the feedback bar below,
   which is now a separate fixed panel rather than something living in
   this box. A genuinely long question still just grows past this floor
   on its own; it was never being padded to a fixed height regardless. */
.q-body { min-height: 16rem; }

#screen-countdown { text-align: center; padding-top: 3rem; }
#countdown-number {
  font-size: 3.5rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  margin: 0.5rem 0 0;
}

.mark { color: var(--hit); margin: 0 0 1rem; display: block; }

/* The three colors from the real show's title-sequence dots. */
.dot-red { color: #E03131; }
.dot-yellow { color: #F5B700; }
.dot-blue { color: #1971C2; }

.label {
  font-size: var(--label);
  line-height: 1rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.45;
  margin: 0 0 1.25rem;
}

.narration { opacity: 0.6; margin: 0 0 0.75rem; }

/* Dialogue: the quoted setup line and the three candidates, identical. */
.dialogue {
  font-family: Newsreader, Georgia, serif;
  font-size: var(--dialogue);
  line-height: 1.5;
  margin: 0 0 0.25rem;
}

.option-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  margin: 0 0 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  transition: background-color 0.2s, border-color 0.2s;
}
.option-row .n { font-size: var(--label); font-variant-numeric: tabular-nums; opacity: 0.35; width: 1.2ch; flex: none; }
/* Named pick-mark, not mark — .mark is the landing page's stopwatch icon,
   and a name collision there once made every ✗ inherit the icon's
   hardcoded --hit green regardless of hit/miss. Color is set explicitly
   below per state so this can't happen again even if a future rule
   forgets to scope itself. */
.option-row .pick-mark { margin-left: auto; font-size: 1.1rem; flex: none; }
/* The option you tapped: filled + bordered, plus a ✓/✗ mark so it reads at
   a glance which one was yours versus which one was merely correct. */
.option-row.hit { background: rgb(42 188 116 / 0.16); border-color: rgb(42 188 116 / 0.55); }
.option-row.hit .pick-mark { color: var(--hit); }
.option-row.miss { background: rgb(224 72 62 / 0.14); border-color: rgb(224 72 62 / 0.5); }
.option-row.miss .pick-mark { color: var(--miss); }
/* The real answer, shown only when you picked something else — outline
   only, no fill, so it doesn't compete with your own (filled) pick. */
.option-row.reveal-correct { border-color: rgb(42 188 116 / 0.4); }

jelly-button.wide { display: block; width: 100%; margin-top: 1.25rem; }

#start-spinner { display: block; margin: 1rem auto 0; }
#start-spinner[hidden] { display: none; }
#results-spinner { display: block; margin: 0 auto 0.75rem; }

.clock-display { font-size: 2rem; font-variant-numeric: tabular-nums; line-height: 1.2; margin: 0 0 1.25rem; }
/* Stays on screen and visibly dims the instant an answer locks — never
   swapped for a "paused" label. The number itself is the continuity cue
   that this is still the same screen. */
#clock.frozen { opacity: 0.55; }
#final-clock { opacity: 0.55; }

/* The score card is the one place centring is right: four short lines. */
#screen-results { text-align: center; }
#final-score { font-family: Newsreader, Georgia, serif; font-size: 1.5rem; margin: 0 0 0.5rem; }
/* Flex row + gap replaces the old letter-spacing trick since these are
   elements, not glyphs. */
#final-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.25rem; }
/* AIK-15: non-interactive result cells — same footprint as the
   jelly-icon-button size="small" they replaced (40px, 13px radius), same
   --hit/--miss tokens as the option rows, so the fix changes behaviour
   (no longer a dead button) without changing how the grid looks. */
.grid-cell {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 600 16px/1 Inter, sans-serif;
}
/* White-on-solid measured at 2.46:1 (hit) and 4.07:1 (miss) — both fail
   WCAG AA's 4.5:1 for normal text. Same tinted-background + colored-glyph
   pattern as .option-row.hit/.miss above (:118-121), not a new one.
   --hit clears AA this way (~5.75:1 measured). --miss can't: var(--miss)
   text against any tint of itself over --paper caps at ~4.49:1 (the two
   colors' own luminances set that ceiling — no alpha value gets past it),
   so miss keeps the same reddish tint but uses --ink for the glyph instead
   (~13.6:1 measured), same as the expired chip below. */
.grid-cell.hit { background: rgb(42 188 116 / 0.16); color: var(--hit); }
.grid-cell.miss { background: rgb(224 72 62 / 0.14); color: var(--ink); }
.grid-cell.expired { background: var(--expired-bg); color: var(--expired-fg); }

/* ONLY ever shows the wrong-answer panel now (see index.html). Normal flow,
   not fixed — app.js relocates this node to sit right after whichever
   .q-body is on screen, so it dangles close to the options instead of
   leaving a gap on tall viewports. May land a little differently between
   questions; that's fine, it's never far from the options either way. */
#action-bar { margin-top: 1.25rem; }

/* A plain jelly-card surface — no squish here, see index.html for why —
   styled through its real part/token, not a raw background/border. */
.action-inner {
  display: block;
  --jelly-fill: rgb(224 72 62 / 0.12);
  max-width: var(--measure);
  margin: 0 auto;
}
.action-inner::part(card) { border: 1px solid rgb(224 72 62 / 0.4); }

#feedback .narration { margin: 0 0 0.9rem; font-style: italic; }
/* The one real button in the panel — sized down and pulled left rather
   than block-width, so it reads as "the thing to press" and not another
   full-width bar under the reveal text. */
#fb-hint { display: inline-flex; margin: 0; }