/*
  UK Citizenship Trivia — Playable styles.

  Two constraints drive the whole sheet:

  1. The platform requires the game to be responsive from 9:32 to 32:9 and
     forbids locking orientation. So there is ONE layout — a 9:16 column — and
     every other aspect ratio letterboxes it rather than reflowing. One layout
     is one thing to test; a responsive grid is four.
  2. Everything tappable lives in the bottom half, which is the thumb-reachable
     zone in portrait. The top half is read-only by design.

  No webfonts: a font file is bytes against the initial-bundle budget and a
  render-blocking risk against the 5-second interactive target, and the system
  UI stack looks native on every device that matters.
*/

:root {
  --bg: #10141c;
  --panel: #1a2130;
  --panel-hi: #222b3d;
  --ink: #f2f5fa;
  --ink-dim: #93a0b8;
  --line: #2c3548;
  --gold: #f0b429;
  --good: #21ba72;
  --bad: #e5484d;
  --pad: 16px;
  --r: 14px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* The `hidden` attribute hides via the UA stylesheet's `display: none`, which any
   author-level `display` beats. Every overlay below sets `display: flex`, so
   without this they are all painted on the very first frame — the player's first
   sight of the game was the game-over screen. Must stay above those rules. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  touch-action: manipulation;
  user-select: none;
}

/* Column, not centred-absolute: the site note below is normal flow, so it can
   never overlap the play area no matter how tall the disclaimer wraps. An
   earlier version pinned the note and it ate the fourth answer button. */
body { display: flex; flex-direction: column; align-items: center; }

/* The single column. Letterboxed, never reflowed — see the note at the top. */
.app {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  padding: max(8px, env(safe-area-inset-top)) var(--pad) 8px;
  background: var(--bg);
}

/* ── HUD ─────────────────────────────────────────────────────────────── */

.hud {
  flex: 0 0 auto;
  height: 48px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.lives { display: flex; gap: 6px; }

.pip {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--bad);
  transition: background .25s, transform .25s;
}
/* A spent life goes hollow rather than vanishing — the gap has to stay visible
   or the player cannot see what they have left to lose. */
.pip.spent { background: transparent; box-shadow: inset 0 0 0 2px #3a4358; transform: scale(.82); }

.score {
  font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; text-align: center;
}

.mult {
  justify-self: end;
  font-size: 16px; font-weight: 800;
  color: var(--gold);
  padding: 3px 9px; border-radius: 999px;
  background: rgba(240,180,41,.12);
  opacity: 0; transition: opacity .2s;
}
.mult.on { opacity: 1; }
/* The multiplier breaking is the loss the player actually feels. Points going
   to zero is abstract; this is not. */
.mult.pop { animation: pop .4s ease-out; }
.mult.shatter { animation: shatter .4s ease-in forwards; }

@keyframes pop { 0% { transform: scale(1) } 40% { transform: scale(1.35) } 100% { transform: scale(1) } }
@keyframes shatter {
  0% { transform: scale(1) rotate(0); opacity: 1 }
  35% { transform: scale(1.2) rotate(-6deg) }
  100% { transform: scale(.5) rotate(12deg); opacity: 0 }
}

/* ── Timer ───────────────────────────────────────────────────────────── */

.timer {
  flex: 0 0 auto;
  height: 8px; margin: 6px 0 0;
  border-radius: 99px; overflow: hidden;
  background: #232c3d;
}
/* A draining bar, not a ring: it is readable in peripheral vision while the eye
   is down on the answers, where it needs to be. */
.timer-fill {
  height: 100%; width: 100%;
  border-radius: 99px;
  background: var(--gold);
  transform-origin: left center;
  transition: background .2s;
}
.timer-fill.warn { background: #f5842c; }
.timer-fill.crit { background: var(--bad); animation: throb .5s infinite; }
@keyframes throb { 50% { opacity: .55 } }

/* ── Question ────────────────────────────────────────────────────────── */

.stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 8px 4px;
}

/* Fixed height, not intrinsic: the artwork is 4:3 and letting it size itself
   moves the question and the answers on every question, which is the fastest
   way to make a player mis-tap. The box never changes size; only the picture
   inside it does. */
.art {
  flex: 0 1 auto;
  /* A flex item's default `min-height: auto` floors it at its content height, so
     without this the box refuses to give up a single pixel and whatever is below
     it in the stage gets squeezed instead. That is the picture — the one element
     here carrying nothing — winning space off the explanation text. */
  min-height: 0;
  /* The card takes the artwork's shape rather than the row's. All 191
     illustrations are exactly 1.37:1; a full-width box is about 1.95:1, and
     `object-fit: cover` was quietly cutting the top and bottom off every single
     one — the gavel, the crown, the top of whatever the picture was of.
     Matching the ratio shows the whole drawing with no letterbox bars to fill,
     which matters because the illustrations do not share one background colour
     (most are white, a few are black) so there is no padding colour that works. */
  aspect-ratio: 1.37;
  max-width: 100%;
  /* The ceiling used to be a flat 176px, tuned on a phone when the stage carried
     one line of question instead of two. On anything taller it stranded the
     picture: at 436x900 the box sat at its 176px limit with 134px of unused
     height directly around it, and because the width is derived from the height
     through the aspect ratio, capping the height made the artwork narrow as well
     — 241px inside a 404px column.

     So the cap is now whichever is smaller: a share of the viewport height, or
     the width the column can actually give. The second term is what keeps the
     ratio honest — without it a tall, narrow window would cap on width instead
     and the box would letterbox itself in panel grey, which is visible because
     the illustrations do not share a background colour. */
  height: min(clamp(96px, 30vh, 300px), calc((100vw - 32px) / 1.37));
  border-radius: var(--r);
  overflow: hidden;
  background: var(--panel);
}
.art img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0;
  transition: opacity .25s;
}
.art img.shown { opacity: 1; }

/* Below this the picture is competing with the answers for pixels, and the
   answers win every time. */
@media (max-height: 600px) { .art { display: none !important; } }

.question {
  margin: 0;
  font-size: clamp(19px, 5.2vw, 26px);
  line-height: 1.28;
  font-weight: 650;
  letter-spacing: -.01em;
}

/* Subordinate to the English line, deliberately: same measure, lighter weight,
   dimmer ink. It is a crutch for reading the English above it, not the thing to
   read instead. Sized only a little smaller because the people who need it are
   the ones reading in poor light on a phone. */
.question-tr {
  margin: -6px 0 0;
  font-size: clamp(15px, 4.1vw, 20px);
  line-height: 1.25;
  font-weight: 500;
  color: var(--ink-dim);
}

.chip {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-dim);
  padding: 5px 11px; border-radius: 999px;
  background: var(--panel);
}

/* ── Answers ─────────────────────────────────────────────────────────── */

/* Four full-width rows, not a 2x2 grid. One reading column scans faster and
   removes horizontal mis-taps; the grid is a classroom-projector convention. */
.answers {
  flex: 0 0 auto;
  display: flex; flex-direction: column; gap: 10px;
  padding-bottom: 6px;
}

.ans {
  appearance: none;
  min-height: 62px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  color: var(--ink);
  font: inherit; font-size: 16px; font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: transform .12s, background .12s, border-color .12s, opacity .2s;
  /* Buttons stagger in bottom-up so the eye is led to the tap zone. */
  animation: rise .26s backwards;
}
/* Two lines inside one button. The button keeps its single hit area — these are
   spans, not children that can be tapped separately — and min-height still holds
   the row steady when a question has no translation for a given option. */
.ans-en, .ans-tr { display: block; }
.ans-tr {
  margin-top: 3px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  opacity: .72;
}
/* On the answered states the button turns solid, so a dimmed second line goes
   muddy against it — the translation lifts back to near-full opacity there. */
.ans.right .ans-tr, .ans.wrong .ans-tr { opacity: .9; }

.ans:nth-child(1) { animation-delay: .18s }
.ans:nth-child(2) { animation-delay: .12s }
.ans:nth-child(3) { animation-delay: .06s }
.ans:nth-child(4) { animation-delay: 0s }
@keyframes rise { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

.ans:active { transform: scale(.985); background: var(--panel-hi); }
.ans.right { background: var(--good); border-color: var(--good); color: #fff; transform: translateY(-4px) scale(1.02); }
.ans.wrong { background: var(--bad); border-color: var(--bad); color: #fff; animation: shake .3s; }
.ans.gone { opacity: .22; pointer-events: none; }
.ans.locked { pointer-events: none; }

@keyframes shake {
  0%,100% { transform: translateX(0) } 20% { transform: translateX(-7px) }
  40% { transform: translateX(6px) } 60% { transform: translateX(-4px) } 80% { transform: translateX(3px) }
}

/* ── Tray ────────────────────────────────────────────────────────────── */

.tray {
  flex: 0 0 auto;
  height: 40px;
  display: flex; align-items: center; justify-content: space-between;
}

/* Shown once, ever. Four words is the entire tutorial. */
.hint { margin: 0; font-size: 13px; color: var(--ink-dim); transition: opacity .3s; }
.hint.gone { opacity: 0; }

.fifty {
  appearance: none;
  position: relative;
  height: 34px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--gold);
  font: inherit; font-size: 13px; font-weight: 800; letter-spacing: .04em;
  cursor: pointer;
}
.fifty[disabled] { opacity: .3; cursor: default; }
.fifty-n {
  position: absolute; top: -5px; right: -5px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--gold); color: #17202e;
  font-size: 10px; font-weight: 800; line-height: 17px;
}

/* ── Wrong-answer flash ──────────────────────────────────────────────── */

/* Bottom of the stage, i.e. the gap between the question and the answers. It
   used to be pinned near the bottom of the screen, where it sat on top of the
   fourth answer and hid the very thing the player needed to see.

   It is now in normal flow rather than absolutely placed. Absolute worked while
   the box was three short lines; at the size the wrong-answer copy is actually
   readable it covers the translated question, and the reader who needs the
   translation is the same reader who needs the explanation. In flow the stage's
   flex column shrinks the picture instead — `.art` is `flex: 0 1 auto`, so it
   gives up its pixels first, and it is decorative by design. */
.flash {
  position: relative;
  /* Never shrink. It shares a flex column with the picture and the question, and
     as a shrinkable item it lost the argument and clipped its own last line —
     `overflow: hidden` below turns any squeeze into missing words rather than a
     visible overflow, so this has to hold. */
  flex: 0 0 auto;
  width: 100%;
  padding: 10px 13px; border-radius: var(--r);
  background: #2a3247; border: 1px solid var(--line);
  font-size: 13px; line-height: 1.38; color: var(--ink);
  text-align: left;
  animation: rise .2s;
}

.flash-text { display: block; }

/* The teaching variant: the wrong answer and the ran-out-of-time answer, which
   are the only two moments in a run where the game is explaining rather than
   asking. It was set at 13px — the size of the "pushing on" toast that shares
   this box — so the one thing a player is meant to learn from was the smallest
   text on screen, and it was gone in 1.5 seconds. Both are fixed here: this rule
   for the size, READ_MS_PER_CHAR in game.js for the time. */
.flash.teach {
  padding: 13px 15px 15px;
  /* The stage's own bottom padding gets eaten when the column is tight, and the
     draining bar then sits flush against the first answer and reads as that
     button's top border. */
  margin-bottom: 6px;
  overflow: hidden;              /* keeps the bar inside the border radius */
}
.flash.teach .flash-text {
  font-size: clamp(15px, 4.2vw, 18px);
  line-height: 1.45;
}

/* Says the wait is skippable. Without it a player who has finished reading sits
   through the rest of the dwell wondering whether the game has hung — the exact
   feeling the short dwell was avoiding, arrived at from the other side. */
.flash-go {
  display: block;
  margin-top: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: var(--ink-dim);
  opacity: 0;
  animation: fadeIn .3s .5s forwards;
}
@keyframes fadeIn { to { opacity: 1 } }

/* Draining, like the question timer, so "it will move on by itself" is legible
   without reading anything. Sits on the bottom edge of the box. */
.flash-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--gold);
  transform-origin: left center;
}

/* ── Bank / push modal ───────────────────────────────────────────────── */

.modal {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  padding: var(--pad);
  background: rgba(8,11,17,.86);
  backdrop-filter: blur(3px);
}

.modal-card {
  width: 100%;
  padding: 22px 20px 16px;
  border-radius: 18px;
  background: var(--panel); border: 1px solid var(--line);
  text-align: center;
  animation: rise .22s;
}

.modal-kicker { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
.modal-title { margin: 0 0 6px; font-size: 25px; font-weight: 750; letter-spacing: -.02em; }
.modal-title span { color: var(--gold); font-variant-numeric: tabular-nums; }
.modal-sub { margin: 0 0 16px; font-size: 13.5px; color: var(--ink-dim); line-height: 1.4; }
.modal-row { display: flex; gap: 10px; }
.modal-timer { height: 3px; margin-top: 14px; border-radius: 99px; background: #2b3448; overflow: hidden; }
.modal-timer > div { height: 100%; width: 100%; background: var(--ink-dim); transform-origin: left; }

/* ── Buttons ─────────────────────────────────────────────────────────── */

.btn {
  appearance: none; flex: 1;
  min-height: 50px; padding: 0 18px;
  border-radius: var(--r); border: 1px solid transparent;
  font: inherit; font-size: 16px; font-weight: 700;
  cursor: pointer;
  transition: transform .1s;
}
.btn:active { transform: scale(.98); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-go { background: var(--gold); color: #17202e; }

/* ── Game over ───────────────────────────────────────────────────────── */

.over {
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  padding: var(--pad);
  background: var(--bg);
  overflow-y: auto;
}
.over-inner { width: 100%; text-align: center; animation: rise .28s; }

.over-rank { margin: 0 0 2px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
/* Points, never a mark out of ten. A percentage is a school report; a big number
   climbing is a score. */
.over-score { margin: 0; font-size: 62px; font-weight: 800; letter-spacing: -.035em; font-variant-numeric: tabular-nums; line-height: 1; }
.over-delta { margin: 8px 0 0; font-size: 14.5px; color: var(--ink-dim); min-height: 20px; }

.over-stats { display: flex; gap: 8px; margin: 20px 0; }
.over-stats > div { flex: 1; padding: 12px 6px; border-radius: var(--r); background: var(--panel); }
.over-stats b { display: block; font-size: 21px; font-weight: 750; font-variant-numeric: tabular-nums; }
.over-stats span { font-size: 10.5px; color: var(--ink-dim); letter-spacing: .05em; text-transform: uppercase; }

/* The question that ended the run, answered. Curiosity is highest here and the
   clock is not running — this is where a fact can land without being homework. */
.over-miss { padding: 14px; margin-bottom: 18px; border-radius: var(--r); background: var(--panel); text-align: left; }
.over-miss-q { margin: 0 0 6px; font-size: 14px; font-weight: 650; line-height: 1.35; }
.over-miss-a { margin: 0; font-size: 13px; color: var(--ink-dim); line-height: 1.45; }
.over-miss-a b { color: var(--good); }

.btn-play { width: 100%; min-height: 62px; font-size: 18px; background: var(--gold); color: #17202e; }
.btn-mute { width: 100%; min-height: 38px; margin-top: 10px; background: transparent; color: var(--ink-dim); font-size: 13px; font-weight: 600; }

/* Website-only CTA. Sits below Play again on purpose: the replay is the thing
   most players want, and putting an exit above it would cost replays. */
.cta { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.cta-lead { margin: 0 0 10px; font-size: 13px; color: var(--ink-dim); }
.cta-btn {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; margin-top: 8px; padding: 0 16px;
  border-radius: var(--r); border: 1px solid var(--line);
  font-size: 15px; font-weight: 650; text-decoration: none;
  color: var(--ink); background: var(--panel);
  transition: background .12s;
}
.cta-btn:active { background: var(--panel-hi); }
.cta-app::before { content: ''; width: 17px; height: 17px; margin-right: 9px; background: currentColor;
  -webkit-mask: var(--apple) center/contain no-repeat; mask: var(--apple) center/contain no-repeat; }
.cta-yt { color: #fff; }
.cta-yt::before { content: ''; width: 20px; height: 20px; margin-right: 9px; background: #ff0000;
  -webkit-mask: var(--yt) center/contain no-repeat; mask: var(--yt) center/contain no-repeat; }

/* Inline SVG masks — no extra requests, and they inherit the text colour. */
:root {
  --apple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.05 12.54c.02-2.3 1.88-3.4 1.96-3.45-1.07-1.56-2.73-1.78-3.32-1.8-1.41-.14-2.76.83-3.48.83-.72 0-1.83-.81-3.01-.79-1.55.02-2.98.9-3.78 2.29-1.61 2.8-.41 6.94 1.16 9.21.77 1.11 1.68 2.35 2.88 2.31 1.16-.05 1.6-.75 3-.75s1.79.75 3.01.72c1.24-.02 2.03-1.13 2.79-2.25.88-1.29 1.24-2.54 1.26-2.6-.03-.01-2.42-.93-2.44-3.69-.02-2.31 0 0 0 0zM14.8 5.2c.64-.77 1.07-1.85.95-2.92-.92.04-2.03.61-2.69 1.38-.59.68-1.11 1.78-.97 2.83 1.03.08 2.07-.52 2.71-1.29z'/%3E%3C/svg%3E");
  --yt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1c.5-1.9.5-5.8.5-5.8s0-3.9-.5-5.8ZM9.6 15.6V8.4l6.3 3.6-6.3 3.6Z'/%3E%3C/svg%3E");
}

/* ── Website-only note ───────────────────────────────────────────────── */

/* Only ever rendered outside YouTube. Inside a Playable, off-platform links and
   any exit-inviting chrome are forbidden. */
.site-note {
  flex: 0 0 auto;
  width: 100%;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  background: #0b0e14; border-top: 1px solid var(--line);
  font-size: 10.5px; line-height: 1.4; color: #6f7c93; text-align: center;
}
.site-note p { margin: 0; }
.site-note a { color: #8fa0bd; }

.site-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 6px;
}
.site-home {
  font-size: 12.5px; font-weight: 600; text-decoration: none;
  color: #8fa0bd; white-space: nowrap;
}
.site-lang { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
/* Native <select>, not a custom dropdown: it costs nothing, it is keyboard and
   screen-reader accessible for free, and on a phone it opens the OS picker,
   which is far better than anything hand-rolled at this size. */
.site-lang select {
  appearance: none;
  padding: 4px 22px 4px 8px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%238fa0bd' stroke-width='1.6'/%3E%3C/svg%3E") right 5px center/11px no-repeat;
  color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
}
.site-legal { font-size: 10px; color: #5d6a80; }

/* Below this the note costs more than it is worth — the answers need the pixels
   and the full disclaimer still sits on /about/. */
@media (max-height: 620px) { .site-note { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
}