:root {
  --pine: #0e2419;
  --pine-2: #163626;
  --needle: #1f4d35;
  --berry: #b3262e;
  --berry-2: #8d1c23;
  --gold: #e6bd63;
  --gold-soft: rgba(230, 189, 99, 0.18);
  --cream: #f7efe1;
  --muted: rgba(247, 239, 225, 0.68);
  --line: rgba(247, 239, 225, 0.14);
  --good: #4fa36b;
  --bad: #c2434b;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(120% 80% at 50% 0%, #1d4430 0%, var(--pine) 55%, #08160f 100%) fixed;
  background-color: var(--pine);
  color: var(--cream);
  font: 400 17px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; }

#snow { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

#app {
  position: relative; z-index: 1;
  max-width: 480px; min-height: 100%; margin: 0 auto;
  padding: max(56px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom));
}
.screen { display: none; min-height: calc(100dvh - 84px); flex-direction: column; }
.screen.active { display: flex; animation: rise 0.6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

.eyebrow {
  margin: 0; font: 600 12px/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold);
}
.lede { margin: 0; color: var(--muted); font-size: 17px; text-align: center; text-wrap: balance; }
.hint { margin: 18px 0 0; text-align: center; font-size: 13px; color: rgba(247, 239, 225, 0.45); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; padding: 0 28px; border: 0; border-radius: 999px;
  background: var(--gold); color: #2a1d06; font-weight: 600; font-size: 17px; text-decoration: none;
  cursor: pointer; box-shadow: 0 8px 24px -10px rgba(230, 189, 99, 0.7);
  transition: transform 0.15s, filter 0.15s;
}
.btn:active { transform: scale(0.97); }
.btn.ghost { background: transparent; color: var(--cream); border: 1px solid var(--line); box-shadow: none; }
.link { margin: 22px auto 0; background: none; border: 0; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; padding: 8px; }

.mute {
  position: fixed; z-index: 3; top: max(14px, env(safe-area-inset-top)); right: 14px;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(14, 36, 25, 0.6); backdrop-filter: blur(6px); cursor: pointer; display: grid; place-items: center;
}
.mute svg { width: 20px; height: 20px; fill: none; stroke: var(--cream); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mute .spk { fill: var(--cream); }
.mute .off { display: none; }
.mute[aria-pressed="true"] .on { display: none; }
.mute[aria-pressed="true"] .off { display: inline; }

/* ── Sealed letter ─────────────────────────────── */
[data-screen="sealed"] { align-items: center; justify-content: center; gap: 26px; text-align: center; }
.envelope {
  position: relative; width: min(78vw, 300px); aspect-ratio: 1.45; border: 0; padding: 0; cursor: pointer;
  background: none; perspective: 800px; animation: hover 3.2s ease-in-out infinite;
}
@keyframes hover { 50% { transform: translateY(-8px) rotate(-1deg); } }
.env-back {
  position: absolute; inset: 0; border-radius: 8px;
  background: linear-gradient(160deg, #f9f1e2, #e9dcc3);
  box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.env-back::after { /* the lower folds */
  content: ""; position: absolute; inset: 0; border-radius: 8px;
  background:
    linear-gradient(to top right, transparent 49.5%, rgba(0,0,0,0.06) 50%, transparent 51%) left / 50% 100% no-repeat,
    linear-gradient(to top left, transparent 49.5%, rgba(0,0,0,0.06) 50%, transparent 51%) right / 50% 100% no-repeat;
}
.env-flap {
  position: absolute; left: 0; right: 0; top: 0; height: 58%;
  background: linear-gradient(180deg, #efe3cb, #e2d2b4);
  clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transition: transform 0.7s ease;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,0.12));
}
.seal {
  position: absolute; left: 50%; top: 58%; width: 64px; height: 64px; transform: translate(-50%, -50%);
  border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #d13a42, var(--berry-2) 70%);
  box-shadow: 0 4px 10px rgba(0,0,0,0.35), inset 0 -3px 6px rgba(0,0,0,0.25);
  transition: transform 0.4s, opacity 0.4s;
}
.seal::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; animation: pulse 2.2s ease-out infinite; }
@keyframes pulse { 0% { opacity: 0.8; transform: scale(0.9); } 100% { opacity: 0; transform: scale(1.35); } }
.seal svg { width: 30px; height: 30px; fill: none; stroke: rgba(255, 225, 200, 0.85); stroke-width: 2; stroke-linecap: round; }
.envelope.opening { animation: none; }
.envelope.opening .seal { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
.envelope.opening .env-flap { transform: rotateX(180deg); }

/* ── Tree ──────────────────────────────────────── */
.tree { width: 100%; height: 100%; overflow: visible; }
.tree .layer { fill: var(--needle); }
.tree .layer:nth-child(2) { fill: #1b4530; }
.tree .layer:nth-child(3) { fill: #173d2a; }
.tree .trunk { fill: #5a3b22; }
.tree .garland { fill: none; stroke: rgba(230, 189, 99, 0.35); stroke-width: 1.5; stroke-dasharray: 2 4; stroke-linecap: round; }
.tree .bulb { fill: #34463c; stroke: rgba(0,0,0,0.3); stroke-width: 1; transition: fill 0.5s, filter 0.5s; }
.tree .bulb.lit { fill: var(--gold); filter: drop-shadow(0 0 4px #ffd77a) drop-shadow(0 0 10px rgba(255, 200, 90, 0.8)); }
.tree .bulb.lit:nth-of-type(3n+1) { fill: #ff8a7a; filter: drop-shadow(0 0 4px #ff8a7a) drop-shadow(0 0 10px rgba(255, 120, 100, 0.7)); }
.tree .bulb.lit:nth-of-type(3n+2) { fill: #9fe0ff; filter: drop-shadow(0 0 4px #9fe0ff) drop-shadow(0 0 10px rgba(140, 210, 255, 0.7)); }
.tree .bulb.miss { fill: #233129; }
.tree .bulb.now { stroke: var(--cream); stroke-width: 1.5; animation: blink 1.2s ease-in-out infinite; }
.tree .bulb.pop { animation: pop 0.6s cubic-bezier(.3,1.8,.5,1); transform-box: fill-box; transform-origin: center; }
@keyframes blink { 50% { stroke-opacity: 0.2; } }
@keyframes pop { 0% { transform: scale(0.4); } 100% { transform: scale(1); } }
.tree .star { fill: #4d5a50; transition: fill 0.8s, filter 0.8s; }
.tree .star.lit { fill: #ffd977; filter: drop-shadow(0 0 8px #ffd977) drop-shadow(0 0 22px rgba(255, 210, 110, 0.8)); }

/* ── Story ─────────────────────────────────────── */
[data-screen="story"] { justify-content: space-between; }
.story-tree { width: 120px; height: 150px; margin: 8px auto 0; opacity: 0.9; }
.story-text {
  flex: 1; display: flex; align-items: center; margin: 24px 0;
  font: 500 clamp(23px, 6.4vw, 28px)/1.42 var(--serif); text-wrap: pretty; min-height: 8em;
}
.story-text .caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; background: var(--gold); vertical-align: -0.12em; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.story-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dots { display: flex; gap: 7px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background 0.3s, transform 0.3s; }
.dots i.on { background: var(--gold); transform: scale(1.15); }

/* ── Quiz ──────────────────────────────────────── */
.quiz-head { display: flex; align-items: center; gap: 16px; }
.mini-tree { width: 64px; height: 80px; flex: none; }
.lit-count { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.question { margin: 22px 0 22px; font: 600 clamp(23px, 6.2vw, 28px)/1.28 var(--serif); text-wrap: pretty; }
.options { display: grid; gap: 12px; }
.opt {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 62px; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: 16px; background: rgba(247, 239, 225, 0.06);
  text-align: left; font-size: 17px; font-weight: 500; cursor: pointer;
  transition: background 0.2s, border-color 0.2s, opacity 0.3s, transform 0.15s;
}
.opt:active { transform: scale(0.985); }
.opt .key {
  flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  font: 700 14px/1 var(--sans); background: var(--gold-soft); color: var(--gold);
}
.options.locked .opt { cursor: default; }
.options.locked .opt:not(.right):not(.chosen) { opacity: 0.4; }
.opt.right { background: rgba(79, 163, 107, 0.22); border-color: var(--good); }
.opt.right .key { background: var(--good); color: #fff; }
.opt.chosen.wrong { background: rgba(194, 67, 75, 0.2); border-color: var(--bad); animation: shake 0.45s; }
.opt.chosen.wrong .key { background: var(--bad); color: #fff; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.feedback { margin-top: 20px; padding: 18px; border-radius: 18px; background: rgba(8, 22, 15, 0.88); border: 1px solid var(--line); animation: rise 0.45s both; }
.feedback .btn { width: 100%; margin-top: 16px; }
.verdict { margin: 0; font: 700 20px/1.2 var(--serif); }
.verdict.good { color: #8fdca6; }
.verdict.bad { color: #f19aa0; }
.fact { margin: 8px 0 0; color: var(--muted); font-size: 15.5px; }

/* ── Result ────────────────────────────────────── */
[data-screen="result"] { align-items: center; text-align: center; }
.big-tree { width: 190px; height: 236px; margin: 0 auto 10px; }
.score { margin: 10px 0 6px; font: 800 72px/1 var(--serif); color: var(--gold); }
.score .of { font-size: 30px; font-weight: 600; color: var(--muted); }
.versus { margin: 14px 0 0; padding: 8px 14px; border-radius: 999px; background: var(--gold-soft); color: var(--gold); font-weight: 600; font-size: 15px; }
.share { display: grid; gap: 10px; width: 100%; margin-top: 28px; }
.copied { margin: 0; min-height: 1.2em; font-size: 14px; color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ── Chapters, question media and scoring (v2) ─── */
.tree .bulb.dim { fill: #8a7440; filter: drop-shadow(0 0 3px rgba(230, 189, 99, 0.5)); }

[data-screen="section"] { align-items: center; text-align: center; gap: 12px; }
[data-screen="section"] .story-tree { margin-bottom: 6px; }
.sec-icon { font-size: 44px; line-height: 1; margin-top: 6px; }
.sec-title { margin: 0; font: 700 clamp(28px, 8vw, 36px)/1.15 var(--serif); text-wrap: balance; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0 18px; }
.chip { padding: 6px 12px; border-radius: 999px; background: var(--gold-soft); color: var(--gold); font-size: 13.5px; font-weight: 600; }
[data-screen="section"] .btn { min-width: 200px; margin-top: auto; }

.head-text { flex: 1; min-width: 0; }
.lifeline {
  flex: none; align-self: center; padding: 8px 12px; border-radius: 12px; cursor: pointer;
  border: 1px dashed var(--gold); background: transparent; color: var(--gold); font-weight: 700; font-size: 14px;
}
.lifeline small { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }

.timer { height: 6px; margin-top: 16px; border-radius: 999px; background: var(--line); overflow: hidden; }
.timer span { display: block; height: 100%; background: var(--gold); transform-origin: left; }
.timer.hurry span { background: var(--bad); }

.q-story { margin: 20px 0 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.q-story + .question { margin-top: 12px; }

.media:empty { display: none; }
.media { margin: -6px 0 20px; display: grid; justify-items: center; gap: 12px; }
.photo { margin: 0; width: min(100%, 300px); aspect-ratio: 1; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 40px -18px rgba(0,0,0,0.8); border: 4px solid var(--cream); transform: rotate(-1.5deg); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flag-row { display: flex; gap: 14px; justify-content: center; align-items: center; width: 100%; }
.flag { display: block; height: 96px; width: auto; max-width: 100%; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,0.25), 0 10px 24px -12px rgba(0,0,0,0.8); }
.flag-row .flag { height: auto; width: 100%; max-width: 160px; }
.flag-row:has(.flag:only-child) .flag { max-width: 240px; }
.board { display: grid; grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(3, 64px); gap: 4px; background: var(--gold); padding: 0; border-radius: 6px; }
.board span { display: grid; place-items: center; background: var(--pine-2); font: 700 34px/1 var(--sans); }
.board .mark-x { color: #ff8a7a; }
.board .mark-o { color: #9fe0ff; }
.quote { margin: 0; padding: 16px; border-radius: 14px; background: var(--cream); color: #1b1b1b; font: 700 17px/1.5 "Courier New", monospace; letter-spacing: 0.02em; }
.stroop { margin: 0; font: 800 54px/1 var(--sans); letter-spacing: 0.04em; }

.options.flag-options { grid-template-columns: 1fr 1fr; }
.flag-options .opt { flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 120px; padding: 12px; position: relative; }
.flag-options .opt .key { position: absolute; top: 8px; left: 8px; width: 26px; height: 26px; font-size: 12px; }
.flag-options .opt .flag { height: 54px; max-width: 100%; }
.flag-options .opt .name { display: none; font-size: 14px; }
.flag-options.locked .opt .name { display: block; }
.opt.gone { visibility: hidden; }

.estimate { display: grid; gap: 10px; margin-top: 6px; }
.est-value { justify-self: center; font: 800 64px/1 var(--serif); color: var(--gold); }
.est-value[data-unit]:not([data-unit=""])::after { content: " " attr(data-unit); font-size: 22px; font-weight: 600; color: var(--muted); }
.estimate input[type="range"] { width: 100%; height: 44px; accent-color: var(--gold); }
.est-scale { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; margin-top: -8px; }
.estimate .btn { margin-top: 8px; }

[data-screen="question"] > .link { margin-top: 14px; }
.credit { margin: 10px 0 0; font-size: 12px; color: rgba(247, 239, 225, 0.45); }

.breakdown { list-style: none; margin: 22px 0 0; padding: 0; width: 100%; text-align: left; border-top: 1px solid var(--line); }
.breakdown li { display: flex; gap: 10px; align-items: center; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 15px; }
.b-title { flex: 1; color: var(--muted); }
.b-pts { font-variant-numeric: tabular-nums; font-weight: 600; }
.name-field { display: grid; gap: 6px; text-align: left; font-size: 13px; color: var(--muted); }
.name-field input {
  min-height: 50px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line);
  background: rgba(247, 239, 225, 0.06); color: var(--cream); font: 500 17px var(--sans);
}
.name-field input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }

/* ── v3: the star jar ─────────────────────────── */
.hud {
  position: fixed; z-index: 4; top: max(14px, env(safe-area-inset-top)); left: 14px;
  display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px 0 10px; border-radius: 999px;
  background: rgba(14, 36, 25, 0.75); border: 1px solid rgba(230, 189, 99, 0.45); backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px -8px rgba(0,0,0,0.7);
}
.hud-star { width: 22px; height: 22px; fill: #ffd977; filter: drop-shadow(0 0 6px rgba(255, 217, 119, 0.8)); }
.hud-count { font: 700 18px/1 var(--sans); color: var(--cream); font-variant-numeric: tabular-nums; min-width: 1.5ch; }
.hud.bump { animation: bump 0.35s cubic-bezier(.3,1.8,.5,1); }
.hud.drop { animation: drop 0.6s ease; }
@keyframes bump { 40% { transform: scale(1.18); } }
@keyframes drop { 20%, 60% { transform: translateX(-5px); border-color: var(--bad); } 40%, 80% { transform: translateX(5px); } }
.fly-star { position: fixed; z-index: 10; width: 26px; height: 26px; pointer-events: none; }
.fly-star svg { width: 100%; height: 100%; fill: #ffd977; filter: drop-shadow(0 0 6px #ffd977) drop-shadow(0 0 14px rgba(255, 200, 90, 0.7)); }

.story-jar { margin: 10px auto 0; font-size: 64px; line-height: 1; filter: drop-shadow(0 0 18px rgba(255, 217, 119, 0.7)); animation: hover 3.2s ease-in-out infinite; }

/* ── v3: the sleigh ride ───────────────────────── */
.screen.travel { position: fixed; inset: 0; z-index: 2; min-height: 0; padding: 0; cursor: pointer; overflow: hidden;
  background: linear-gradient(#071a2e 0%, #0d2c40 55%, #133a35 100%); }
.travel .sky { position: absolute; inset: 0; }
.moon { position: absolute; left: 50%; top: 18%; width: min(62vw, 300px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #fff8e0, #f4e2b0 55%, #d9c38c 100%);
  box-shadow: 0 0 60px 20px rgba(255, 240, 200, 0.25), 0 0 140px 60px rgba(255, 240, 200, 0.12); }
.sleigh-path { position: absolute; left: 0; top: 30%; width: 100%; height: 120px; }
.sleigh { position: absolute; left: 0; top: 0; width: min(78vw, 360px); transform: translateX(-110%); }
.sleigh svg { width: 100%; height: auto; overflow: visible; }
.travel.flying .sleigh { animation: fly 3.4s cubic-bezier(.45,.05,.4,.95) forwards; }
@keyframes fly {
  0% { transform: translate(-110%, 70px) rotate(-6deg); }
  50% { transform: translate(calc(50vw - 50%), -10px) rotate(-3deg); }
  100% { transform: translate(110vw, -90px) rotate(-8deg); }
}
.sleigh .fur { fill: #8a5a34; }
.sleigh .antler { fill: none; stroke: #c9a27a; stroke-width: 2; stroke-linecap: round; }
.sleigh .leg { fill: none; stroke: #6e4526; stroke-width: 2.6; stroke-linecap: round; transform-box: fill-box; transform-origin: top left; }
.travel.flying .leg-a { animation: gallop 0.36s ease-in-out infinite alternate; }
.travel.flying .leg-b { animation: gallop 0.36s ease-in-out infinite alternate-reverse; }
@keyframes gallop { to { transform: rotate(-18deg); } }
.sleigh .nose { fill: #ff4b4b; filter: drop-shadow(0 0 5px #ff4b4b); }
.sleigh .rein { fill: none; stroke: #e6bd63; stroke-width: 1.4; }
.sleigh .body { fill: #b3262e; }
.sleigh .trim { stroke: #e6bd63; stroke-width: 2.5; }
.sleigh .runner { fill: none; stroke: #e6bd63; stroke-width: 3; stroke-linecap: round; }
.sleigh .santa { fill: #d0313a; }
.sleigh .face { fill: #f2c9a4; }
.sleigh .beard, .sleigh .pom { fill: #fff; }
.sleigh .sack { fill: #7a4b2a; }
.sleigh::after { /* a trail of sparkles behind the sleigh */
  content: ""; position: absolute; right: 96%; top: 62%; width: 70%; height: 10px; border-radius: 10px;
  background: radial-gradient(circle, #ffd977 0 2px, transparent 3px) 0 0 / 18px 10px repeat-x;
  filter: drop-shadow(0 0 6px #ffd977); opacity: 0.9; mask-image: linear-gradient(to right, transparent, #000);
  -webkit-mask-image: linear-gradient(to right, transparent, #000);
}
.hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 26%; }
.hill-far { fill: #1d4430; }
.hill-near { fill: #f2f4f6; }
.village { position: absolute; left: 0; right: 0; bottom: 9%; height: 40px;
  background:
    radial-gradient(circle, #ffd977 0 2px, transparent 3px) 20% 70% / 40px 26px repeat-x;
  opacity: 0.85; }
.travel-text { position: absolute; left: 0; right: 0; top: 56%; text-align: center; padding: 0 20px; color: var(--cream); text-shadow: 0 2px 12px rgba(0,0,0,0.6); }
.travel-text .eyebrow { color: var(--gold); }
.travel-stop { margin: 8px 0 4px; font: 700 clamp(26px, 7.5vw, 34px)/1.15 var(--serif); }
.travel-skip { margin: 0; font-size: 12px; opacity: 0.6; }
.travel.flying .travel-text { animation: rise 0.8s 0.5s both; }

/* ── v3: question screen tweaks ────────────────── */
.quiz-head { display: block; padding-left: 0; }
.quiz-head .eyebrow { padding-right: 52px; }
[data-screen="question"], [data-screen="final"], [data-screen="section"] { padding-top: 6px; }
.est-rules { margin: 0; text-align: center; font-size: 13px; color: var(--muted); }

/* ── v3: the Millionaire final ─────────────────── */
[data-screen="final"] .eyebrow { text-align: center; }
.ladder { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 14px 0 0; padding: 0; }
.ladder li {
  position: relative; padding: 8px 0 6px; border-radius: 8px; text-align: center; font: 700 12.5px/1 var(--sans);
  color: var(--muted); background: rgba(247, 239, 225, 0.06); border: 1px solid var(--line); transition: all 0.4s;
}
.ladder li::after { content: "⭐"; display: block; font-size: 9px; margin-top: 3px; opacity: 0.6; }
.ladder li.safe { border-color: rgba(230, 189, 99, 0.6); }
.ladder li.safe::before { content: "🔒"; position: absolute; top: -9px; right: -3px; font-size: 11px; }
.ladder li.done { background: rgba(230, 189, 99, 0.22); color: var(--gold); }
.ladder li.now { background: var(--gold); color: #2a1d06; border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 6px 16px -6px rgba(230, 189, 99, 0.9); animation: glowpulse 1.6s ease-in-out infinite; }
@keyframes glowpulse { 50% { box-shadow: 0 6px 22px -2px rgba(255, 217, 119, 0.9); } }
.f-source { margin: 16px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); }
.f-question { text-align: center; margin: 10px 0 18px; }
.f-options { display: grid; gap: 10px; }
.fopt {
  display: flex; gap: 10px; align-items: center; width: 100%; min-height: 56px; padding: 10px 22px; cursor: pointer;
  font-size: 16.5px; font-weight: 500; text-align: left; color: var(--cream);
  background: linear-gradient(180deg, #17324a, #0d2236); border: 2px solid rgba(230, 189, 99, 0.55);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
  transition: background 0.3s, border-color 0.3s, opacity 0.3s;
}
.fopt .key { color: var(--gold); font-weight: 700; }
.fopt.picked { background: linear-gradient(180deg, #e39b2b, #b8701a); color: #1e1204; }
.fopt.picked .key { color: #1e1204; }
.f-options.suspense .fopt.picked { animation: suspense 0.5s ease-in-out infinite alternate; }
@keyframes suspense { to { filter: brightness(1.35); } }
.fopt.right { background: linear-gradient(180deg, #3fae63, #23793f); color: #fff; animation: pop 0.5s; }
.fopt.right .key { color: #fff; }
.fopt.wrong { background: linear-gradient(180deg, #c2434b, #8d1c23); color: #fff; }
.fopt.gone { visibility: hidden; }
.fopt:disabled { cursor: default; }
.lifelines { display: flex; justify-content: center; gap: 14px; margin-top: 18px; }
.ll { display: grid; justify-items: center; gap: 4px; background: none; border: 0; cursor: pointer; padding: 0; color: var(--cream); }
.ll-icon {
  display: grid; place-items: center; width: 54px; height: 38px; border-radius: 50%; font: 700 14px/1 var(--sans);
  border: 2px solid var(--gold); background: radial-gradient(#1a3c55, #0d2236); color: var(--gold);
}
.ll-label { font-size: 11.5px; color: var(--muted); }
.ll.used .ll-icon { opacity: 0.35; background: none; position: relative; }
.ll.used .ll-icon::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; background: var(--bad); transform: rotate(-20deg); }
.ll:disabled { cursor: default; }
.f-hint { margin: 16px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(159, 224, 255, 0.1); border: 1px dashed rgba(159, 224, 255, 0.5); color: #cfeeff; font-size: 15px; animation: rise 0.4s both; }
.elves { margin-top: 16px; padding: 14px; border-radius: 16px; background: rgba(8, 22, 15, 0.6); border: 1px solid var(--line); animation: rise 0.4s both; }
.elves-title { margin: 0 0 10px; text-align: center; font-size: 13px; color: var(--muted); }
.bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; height: 130px; align-items: end; }
.bar { display: grid; grid-template-rows: auto 1fr auto; height: 100%; text-align: center; gap: 4px; }
.bar .pct { font-size: 12px; color: var(--cream); }
.bar .fill { align-self: end; width: 70%; justify-self: center; border-radius: 6px 6px 0 0; background: linear-gradient(#ffd977, #e6bd63); transition: height 1.2s cubic-bezier(.2,.8,.2,1); }
.bar .lbl { font-weight: 700; color: var(--gold); font-size: 13px; }
.f-confirm { margin-top: 18px; padding: 16px; border-radius: 16px; text-align: center; background: rgba(8, 22, 15, 0.85); border: 1px solid rgba(230, 189, 99, 0.5); animation: rise 0.3s both; }
.f-confirm p { margin: 0 0 12px; font: 600 19px/1.3 var(--serif); }
.f-confirm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.f-confirm-row .btn { padding: 0 10px; font-size: 15.5px; }
[data-screen="final"] > .link { margin-top: 16px; }

/* ── v3.1: leaderboard ─────────────────────────── */
.board-box { width: 100%; margin-top: 22px; padding: 16px; border-radius: 18px; background: rgba(8, 22, 15, 0.6); border: 1px solid rgba(230, 189, 99, 0.35); text-align: left; }
.board-title { margin: 0 0 10px; font: 700 20px/1.2 var(--serif); color: var(--gold); text-align: center; }
.leaderboard { list-style: none; margin: 0; padding: 0; }
.leaderboard li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; font-size: 16px; }
.leaderboard li + li { margin-top: 2px; }
.leaderboard li.me { background: rgba(230, 189, 99, 0.18); color: var(--gold); font-weight: 600; animation: rise 0.5s 0.3s both; }
.leaderboard .rank { width: 28px; text-align: center; }
.leaderboard .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard .pts { font-variant-numeric: tabular-nums; font-weight: 600; }
.board-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); text-align: center; }

/* ── Preview mode (?preview) ───────────────────── */
body.previewing #app { padding-bottom: 96px; }
.preview-bar {
  position: fixed; z-index: 20; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; gap: 6px; align-items: center; width: min(calc(100% - 24px), 560px); padding: 8px;
  border-radius: 16px; background: rgba(5, 14, 10, 0.92); border: 1px solid rgba(230, 189, 99, 0.5);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.8); backdrop-filter: blur(8px);
}
.preview-bar button, .preview-bar select {
  height: 40px; border-radius: 10px; border: 1px solid var(--line); background: rgba(247, 239, 225, 0.08);
  color: var(--cream); font: 600 14px var(--sans); cursor: pointer;
}
.preview-bar button { flex: none; min-width: 40px; padding: 0 10px; }
.preview-bar button:disabled { opacity: 0.35; cursor: default; }
.preview-bar select { flex: 1; min-width: 0; padding: 0 8px; }
#pv-answer { background: var(--gold); color: #2a1d06; border-color: var(--gold); }

/* ── Tic-tac-toe play-out ──────────────────────── */
.board { position: relative; }
.board .placed { animation: pop 0.45s cubic-bezier(.3,1.8,.5,1); }
.board .saved { background: rgba(79, 163, 107, 0.45); box-shadow: inset 0 0 0 3px var(--good); }
.board .win-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.board .win-line line { stroke: var(--bad); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw 0.5s ease-out forwards; filter: drop-shadow(0 0 6px rgba(194, 67, 75, 0.9)); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.board-badge {
  position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); white-space: nowrap;
  padding: 6px 14px; border-radius: 999px; font: 700 15px/1 var(--sans); animation: rise 0.4s both;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,0.8);
}
.board-badge.good { background: var(--good); color: #fff; }
.board-badge.bad { background: var(--bad); color: #fff; }
.media:has(.board) { margin-bottom: 56px; }

/* ── Rush streak flame ─────────────────────────── */
.hud-streak { margin-left: 2px; padding: 3px 8px; border-radius: 999px; background: linear-gradient(#ff9d3c, #e2531f); color: #fff; font: 700 14px/1 var(--sans); box-shadow: 0 0 12px rgba(255, 120, 40, 0.7); }
.hud-streak.flare { animation: flare 0.6s cubic-bezier(.3,1.8,.5,1); }
@keyframes flare { 0% { transform: scale(0.4); } 60% { transform: scale(1.3); } }

/* ── The elves ask your name ───────────────────── */
.story-ask { display: block; margin: -8px 0 22px; animation: rise 0.5s 0.2s both; }
.story-ask input {
  width: 100%; min-height: 58px; padding: 0 18px; border-radius: 16px; text-align: center;
  border: 1px solid rgba(230, 189, 99, 0.6); background: rgba(247, 239, 225, 0.08); color: var(--cream);
  font: 600 20px var(--serif);
}
.story-ask input:focus { outline: 2px solid var(--gold); outline-offset: 2px; }
.btn:disabled { opacity: 0.45; cursor: default; box-shadow: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Reporting back to the challenger ──────────── */
.reply-title { margin: 6px 0 0; text-align: center; font: 600 17px/1.3 var(--serif); color: var(--gold); }
.reply-box { display: grid; gap: 10px; width: 100%; margin-top: 14px; }
.reply-box:not(:has(:not([hidden]))) { display: none; }