/* ===========================================================================
   Rerun Trivia — 1970s television game show
   ---------------------------------------------------------------------------
   Hand-written, no build step, no framework.

   The audience is 65+. Every size decision here is deliberate: question text
   never below 22px, option buttons never below 68px tall, contrast held well
   past AA, and nothing important is carried by colour alone. The set can look
   like a game show; it must never behave like one for someone with a tremor,
   a cataract, or a five-year-old phone.
   ======================================================================== */

:root{
  /* Studio set */
  --stage:        #10293B;
  --stage-deep:   #0A1A26;
  --stage-glow:   #1B4460;

  /* Stage lighting */
  --bulb:         #FFD469;
  --bulb-dim:     #8A6A26;
  --gold:         #E0A93B;

  /* 1970s accents */
  --tangerine:    #D9542B;
  --avocado:      #7C8B3E;

  /* The answer board */
  --cream:        #F7EEDD;
  --cream-2:      #EADFC7;
  --ink:          #23180E;
  --ink-soft:     #5A4834;

  --right:        #3E7D4F;
  --wrong:        #B33A2B;

  --shadow:       0 6px 0 rgba(0,0,0,.35);
  --radius:       10px;

  --font-display: "Alfa Slab One", Georgia, serif;
  --font-ui:      "Barlow", "Segoe UI", system-ui, sans-serif;
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(120% 80% at 50% 0%, var(--stage-glow) 0%, var(--stage) 45%, var(--stage-deep) 100%);
  color:var(--cream);
  font-family:var(--font-ui);
  font-size:18px;
  line-height:1.5;
  padding:26px 14px 34px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* --------------------------------------------------------- marquee bulbs */
.bulbs{
  position:fixed; left:0; right:0; height:14px; z-index:5; pointer-events:none;
  background-image:radial-gradient(circle, var(--bulb) 0 3.5px, transparent 4px);
  background-size:34px 14px;
  background-position:center;
  background-repeat:repeat-x;
  opacity:.9;
}
.bulbs-top{ top:6px; }
.bulbs-bottom{ bottom:6px; }

@media (prefers-reduced-motion: no-preference){
  .bulbs{ animation:chase 1.4s steps(2) infinite; }
  .bulbs-bottom{ animation-delay:.7s; }
  @keyframes chase{
    0%   { background-position-x:0;    opacity:.95; }
    50%  { background-position-x:17px; opacity:.55; }
    100% { background-position-x:34px; opacity:.95; }
  }
}

/* --------------------------------------------------------------- layout */
.stage{ max-width:760px; margin:0 auto; }

.screen{ display:none; }
.screen.is-on{ display:block; }

/* --------------------------------------------------------------- attract */
.eyebrow{
  font-size:13px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin:6px 0 14px; text-align:center; font-weight:600;
}

.logo{
  font-family:var(--font-display);
  font-size:clamp(38px, 12vw, 74px);
  line-height:.94;
  text-align:center;
  margin:0 0 18px;
  color:var(--bulb);
  text-shadow:
     0 3px 0 var(--tangerine),
     0 6px 0 rgba(0,0,0,.45),
     0 0 34px rgba(255,212,105,.35);
}
.logo span{ color:var(--cream); }
.logo-sm{ font-size:clamp(24px,7vw,36px); margin-bottom:6px; }

.tagline{
  text-align:center; font-size:20px; color:var(--cream);
  margin:0 auto 26px; max-width:26ch;
}

.how{
  list-style:none; padding:0; margin:26px auto 10px; max-width:420px;
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}
.how li{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,212,105,.28);
  border-radius:999px; padding:7px 15px; font-size:15px;
}
.how b{ color:var(--bulb); }

.foot-note{
  text-align:center; color:rgba(247,238,221,.72);
  font-size:15px; max-width:40ch; margin:16px auto 0;
}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:block; width:100%; max-width:420px; margin:0 auto;
  font-family:var(--font-ui); font-weight:700;
  font-size:22px; letter-spacing:.02em;
  padding:20px 24px; min-height:68px;
  color:var(--ink); background:var(--bulb);
  border:0; border-radius:var(--radius);
  box-shadow:var(--shadow); cursor:pointer;
  transition:transform .08s ease, box-shadow .08s ease, background-color .12s ease;
}
.btn:hover{ background:#FFDF8C; }
.btn:active{ transform:translateY(4px); box-shadow:0 2px 0 rgba(0,0,0,.35); }
.btn-go{ background:var(--tangerine); color:#FFF3E2; font-size:24px; }
.btn-go:hover{ background:#E9663C; }
.btn-next{ margin-top:20px; }

/* Focus must be obvious. Never remove this. */
.btn:focus-visible,
.opt:focus-visible{
  outline:4px solid var(--bulb);
  outline-offset:3px;
}

/* -------------------------------------------------------------------- HUD */
.hud{
  display:flex; gap:10px; justify-content:space-between;
  max-width:520px; margin:0 auto 18px;
}
.hud-cell{
  flex:1; text-align:center;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,212,105,.22);
  border-radius:var(--radius); padding:8px 6px;
}
.hud-label{
  display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); font-weight:600;
}
.hud-value{
  display:block; font-family:var(--font-display);
  font-size:26px; line-height:1.15; color:var(--cream);
  font-variant-numeric:tabular-nums;
}
.hud-value small{ font-size:15px; color:rgba(247,238,221,.6); }
.hud-score .hud-value{ color:var(--bulb); }

/* ------------------------------------------------------------------ timer */
.timer{ position:relative; width:104px; height:104px; margin:0 auto 16px; }
.timer svg{ width:100%; height:100%; transform:rotate(-90deg); }
.timer circle{ fill:none; stroke-width:9; }
.timer-track{ stroke:rgba(255,255,255,.14); }
.timer-fill{
  stroke:var(--bulb); stroke-linecap:round;
  stroke-dasharray:327; stroke-dashoffset:0;
  transition:stroke-dashoffset .95s linear, stroke .3s ease;
}
.timer.low .timer-fill{ stroke:var(--tangerine); }
.timer-num{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:36px; color:var(--cream);
  font-variant-numeric:tabular-nums;
}
.timer.low .timer-num{ color:var(--tangerine); }

/* --------------------------------------------------------------- question */
.show-tag{
  text-align:center; margin:0 0 8px;
  font-size:14px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); font-weight:600;
}
.show-tag i{ font-style:normal; color:rgba(247,238,221,.55); }

.question{
  font-family:var(--font-ui); font-weight:600;
  font-size:clamp(22px, 4.4vw, 30px);
  line-height:1.32; text-align:center;
  margin:0 auto 22px; max-width:30ch;
  text-wrap:balance;
}

/* ---------------------------------------------------------------- options */
.options{ display:grid; gap:12px; max-width:640px; margin:0 auto; }

.opt{
  display:flex; align-items:center; gap:14px; width:100%;
  min-height:68px; padding:14px 18px;
  font-family:var(--font-ui); font-size:20px; font-weight:500; line-height:1.35;
  text-align:left; color:var(--ink);
  background:var(--cream);
  border:3px solid transparent; border-radius:var(--radius);
  box-shadow:var(--shadow); cursor:pointer;
  transition:transform .08s ease, box-shadow .08s ease, background-color .12s;
}
.opt:hover:not(:disabled){ background:#fff; }
.opt:active:not(:disabled){ transform:translateY(3px); box-shadow:0 3px 0 rgba(0,0,0,.35); }
.opt:disabled{ cursor:default; }

.opt-key{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--stage); color:var(--bulb);
  font-family:var(--font-display); font-size:19px;
}

/* Right and wrong are marked by shape and words too, never colour alone. */
.opt.is-right{ background:var(--right); color:#F2FBF3; border-color:#8FE0A5; }
.opt.is-right .opt-key{ background:#1E4B2B; color:#CFF3D8; }
.opt.is-right .opt-text::after{ content:" ✓"; font-weight:700; }

.opt.is-wrong{ background:var(--wrong); color:#FFF0EC; border-color:#F0A093; }
.opt.is-wrong .opt-key{ background:#5F1B12; color:#FFD9D1; }
.opt.is-wrong .opt-text::after{ content:" ✕"; font-weight:700; }

.opt.is-dim{ opacity:.42; }

/* ----------------------------------------------------------------- reveal */
.reveal{ max-width:640px; margin:22px auto 0; }

.verdict{
  font-family:var(--font-display); font-size:clamp(24px,6vw,34px);
  text-align:center; margin:0 0 12px;
}
.verdict.right{ color:#8FE0A5; }
.verdict.wrong{ color:#F0A093; }
.verdict small{
  display:block; font-family:var(--font-ui); font-weight:600;
  font-size:16px; letter-spacing:.02em; color:var(--bulb); margin-top:6px;
}

.clip{
  background:#000; border:2px solid rgba(255,212,105,.3);
  border-radius:var(--radius); overflow:hidden; margin:0 0 16px;
  aspect-ratio:16/9;
}
.clip iframe{ width:100%; height:100%; border:0; display:block; }

.story{
  background:rgba(0,0,0,.26);
  border-left:4px solid var(--gold);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:16px 18px; margin:0;
  font-size:18px; line-height:1.6; color:rgba(247,238,221,.94);
}

/* ------------------------------------------------------------------ wheel */
.screen-wheel{ text-align:center; padding:40px 0; }
.wheel{ position:relative; width:180px; height:180px; margin:0 auto 18px; }
.wheel-face{
  width:100%; height:100%; border-radius:50%;
  border:8px solid var(--gold);
  background:conic-gradient(
    var(--tangerine) 0 45deg, var(--cream) 45deg 90deg,
    var(--avocado)   90deg 135deg, var(--cream) 135deg 180deg,
    var(--tangerine) 180deg 225deg, var(--cream) 225deg 270deg,
    var(--avocado)   270deg 315deg, var(--cream) 315deg 360deg);
  box-shadow:0 0 30px rgba(255,212,105,.35);
}
.wheel-pin{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  width:0; height:0; border-left:12px solid transparent;
  border-right:12px solid transparent; border-top:22px solid var(--bulb);
}
.wheel-cap{
  font-family:var(--font-display); font-size:22px; color:var(--bulb); margin:0;
}
@media (prefers-reduced-motion: no-preference){
  .wheel.spin .wheel-face{ animation:spin 1.05s cubic-bezier(.25,.9,.3,1) both; }
  @keyframes spin{ from{ transform:rotate(0); } to{ transform:rotate(772deg); } }
}

/* -------------------------------------------------------------------- end */
.final-score{
  font-family:var(--font-display);
  font-size:clamp(64px,20vw,120px); line-height:1;
  text-align:center; color:var(--bulb); margin:6px 0 4px;
  text-shadow:0 4px 0 var(--tangerine), 0 8px 0 rgba(0,0,0,.4);
  font-variant-numeric:tabular-nums;
}
.final-line{
  text-align:center; font-size:20px; color:var(--cream);
  margin:0 auto 26px; max-width:30ch;
}

/* ------------------------------------------------------------------ error */
.err{
  max-width:520px; margin:22px auto 0; padding:14px 16px;
  background:#5F1B12; border:1px solid #F0A093; border-radius:var(--radius);
  color:#FFE7E1; font-size:16px; text-align:center;
}

/* --------------------------------------------------------------- narrow */
@media (max-width:420px){
  body{ font-size:17px; padding:22px 10px 30px; }
  .opt{ font-size:18px; min-height:64px; padding:12px 14px; gap:11px; }
  .opt-key{ width:34px; height:34px; font-size:17px; }
  .hud-value{ font-size:22px; }
  .timer{ width:88px; height:88px; }
  .timer-num{ font-size:30px; }
}

/* Belt and braces: if the OS asks for stillness, nothing moves at all. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ===========================================================================
   Phase 3 — sound toggle, coin shower, bigger wheel, score, Hall of Fame
   ======================================================================== */

/* ------------------------------------------------------- sound toggle */
.sound-toggle{
  position:fixed; top:16px; right:14px; z-index:20;
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:23px; line-height:1;
  background:rgba(0,0,0,.42); color:var(--bulb);
  border:2px solid rgba(255,212,105,.45);
  cursor:pointer; padding:0;
}
.sound-toggle:hover{ background:rgba(0,0,0,.6); }
.sound-toggle:focus-visible{ outline:4px solid var(--bulb); outline-offset:3px; }
.sound-toggle .sound-off{ display:none; }
.sound-toggle.is-muted .sound-on{ display:none; }
.sound-toggle.is-muted .sound-off{ display:inline; }
.sound-toggle.is-muted{ color:rgba(247,238,221,.5); border-color:rgba(247,238,221,.25); }

/* ---------------------------------------------------------- coin shower */
.coin-layer{
  position:fixed; inset:0; z-index:15; pointer-events:none; overflow:hidden;
}
.coin{
  position:absolute; top:-60px;
  width:34px; height:34px; border-radius:50%;
  background:
    radial-gradient(circle at 34% 30%, #FFF0BE 0%, var(--bulb) 42%, #C98F1E 78%, #8A5F10 100%);
  border:2px solid #7A5410;
  box-shadow:inset 0 -3px 4px rgba(0,0,0,.3), 0 2px 5px rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:17px; color:#7A5410;
}
.coin::after{ content:"$"; }

@media (prefers-reduced-motion: no-preference){
  .coin{ animation:coin-fall var(--dur,1.5s) cubic-bezier(.3,.5,.6,1) forwards; }
  @keyframes coin-fall{
    0%   { transform:translateY(0) rotate(0deg) scale(.7); opacity:0; }
    12%  { opacity:1; }
    85%  { opacity:1; }
    100% { transform:translateY(105vh) rotate(var(--spin,540deg)) scale(1); opacity:0; }
  }
}
/* With reduced motion the coins never render at all — see app.js. */

/* ------------------------------------------------------------ big wheel */
.wheel{ width:min(78vw, 300px); height:min(78vw, 300px); }
.wheel-face{ border-width:12px; }
.wheel-pin{ top:-18px; border-left-width:16px; border-right-width:16px; border-top-width:30px; }
.wheel-cap{ font-size:26px; }
.wheel-hub{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:22%; height:22%; border-radius:50%;
  background:var(--stage-deep); border:5px solid var(--gold);
  box-shadow:0 0 16px rgba(0,0,0,.5);
}

/* ---------------------------------------------------------------- tally */
.tally{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  max-width:480px; margin:0 auto 26px;
}
.tally-cell{
  flex:1 1 120px; text-align:center; padding:12px 8px;
  background:rgba(0,0,0,.26);
  border:1px solid rgba(255,212,105,.22);
  border-radius:var(--radius);
}
.tally-n{
  display:block; font-family:var(--font-display); font-size:30px;
  color:var(--bulb); line-height:1.1; font-variant-numeric:tabular-nums;
}
.tally-l{
  display:block; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); margin-top:3px; font-weight:600;
}

/* ------------------------------------------------------------ name form */
.name-form{ max-width:420px; margin:0 auto 14px; }
.name-label{
  display:block; text-align:center; font-size:18px; font-weight:600;
  color:var(--cream); margin-bottom:10px;
}
.name-input{
  display:block; width:100%; min-height:66px;
  font-family:var(--font-ui); font-size:22px; font-weight:600;
  text-align:center; color:var(--ink);
  background:var(--cream); border:3px solid var(--gold);
  border-radius:var(--radius); padding:14px 16px; margin-bottom:14px;
}
.name-input::placeholder{ color:#8C7A62; font-weight:500; }
.name-input:focus-visible{ outline:4px solid var(--bulb); outline-offset:3px; }
.name-err{
  background:#5F1B12; border:1px solid #F0A093; border-radius:var(--radius);
  color:#FFE7E1; font-size:16px; padding:10px 14px; margin:0 0 14px; text-align:center;
}
.btn-quiet{
  background:transparent; color:rgba(247,238,221,.72);
  border:2px solid rgba(247,238,221,.3); box-shadow:none;
  font-size:17px; font-weight:600; min-height:56px; padding:14px 20px;
}
.btn-quiet:hover{ background:rgba(255,255,255,.07); color:var(--cream); }
.btn-quiet:active{ transform:none; box-shadow:none; }

/* ----------------------------------------------------------- hall of fame */
.hall-sub{
  text-align:center; font-size:19px; color:var(--bulb);
  margin:0 auto 20px; max-width:34ch;
}
.hall{
  list-style:none; padding:0; margin:0 auto 22px; max-width:560px;
  border:2px solid rgba(255,212,105,.3); border-radius:var(--radius);
  overflow:hidden; background:rgba(0,0,0,.24);
}
.hall li{
  display:flex; align-items:center; gap:12px;
  padding:13px 16px; font-size:18px;
  border-bottom:1px solid rgba(255,212,105,.14);
}
.hall li:last-child{ border-bottom:0; }
.hall-rank{
  flex:0 0 auto; min-width:40px;
  font-family:var(--font-display); font-size:19px; color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.hall-name{ flex:1 1 auto; overflow-wrap:anywhere; }
.hall-score{
  flex:0 0 auto; font-family:var(--font-display); font-size:20px;
  color:var(--bulb); font-variant-numeric:tabular-nums;
}
.hall-time{
  flex:0 0 auto; font-size:13px; color:rgba(247,238,221,.5);
  font-variant-numeric:tabular-nums; min-width:52px; text-align:right;
}
/* The player's own row: marked by colour AND a word, never colour alone. */
.hall li.is-you{ background:rgba(255,212,105,.16); }
.hall li.is-you .hall-name::after{
  content:" (you)"; color:var(--bulb); font-weight:700; font-size:15px;
}
.hall li.top-1 .hall-rank{ color:#FFD469; }
.hall li.top-2 .hall-rank{ color:#DCDCDC; }
.hall li.top-3 .hall-rank{ color:#D89A5B; }

@media (max-width:420px){
  .hall li{ font-size:16px; padding:11px 12px; gap:9px; }
  .hall-time{ display:none; }
  .name-input{ font-size:20px; min-height:62px; }
  .sound-toggle{ width:46px; height:46px; font-size:20px; top:12px; right:10px; }
}

/* --------------------------------------------------------------- the offer */
.offer{
  max-width:560px; margin:0 auto 22px; padding:24px 22px;
  background:rgba(0,0,0,.32);
  border:3px solid var(--gold);
  border-radius:var(--radius);
  box-shadow:0 0 26px rgba(224,169,59,.18);
}
.offer-kicker{
  text-align:center; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--avocado); font-weight:700; margin:0 0 8px;
}
.offer-head{
  font-family:var(--font-display); font-size:clamp(23px,5.5vw,30px);
  text-align:center; color:var(--bulb); margin:0 0 12px; line-height:1.15;
}
.offer-body{
  text-align:center; font-size:17px; line-height:1.55;
  color:rgba(247,238,221,.9); margin:0 auto 20px; max-width:36ch;
}
.offer-label{
  display:block; text-align:center; font-size:17px; font-weight:600;
  color:var(--cream); margin-bottom:10px;
}
.offer-form .name-input{ margin-bottom:14px; }

.offer-done{ text-align:center; padding:8px 0 4px; }
.offer-tick{
  font-size:52px; line-height:1; color:#8FE0A5; margin:0 0 10px;
}
.offer-thanks{
  font-size:18px; line-height:1.55; color:var(--cream);
  margin:0 auto; max-width:34ch;
}

@media (max-width:420px){
  .offer{ padding:20px 15px; }
  .offer-body{ font-size:16px; }
  .consent-note{ font-size:13.5px; }
}

/* Implied-consent note. Small, but never too small to read — this is the text
   that makes the consent legitimate, so it does not get to be 11px grey. */
.consent-note{
  font-size:14.5px; line-height:1.5; text-align:center;
  color:rgba(247,238,221,.72);
  margin:14px auto 0; max-width:40ch;
}
.consent-note b{ color:rgba(247,238,221,.92); font-weight:600; }