@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-opsz-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-opsz-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --blue: #0057B7;
  --blue-bright: #0A65CE;
  --yellow: #FFD700;
  --cream: #F4EDE1;
  --paper: #EFE6D6;
  --ink: #15171C;
  --ink-2: #3A3832;
  --muted: #6E675C;
  --clay: #B5432A;
  --night: #0E1626;
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
body {
  overflow: hidden;
  background: var(--night);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button, a { font: inherit; }
button { border: 0; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
.sr-only { position: fixed; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.app { position: fixed; inset: 0; overflow: clip; }
.screen {
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  /* Unlike `hidden`, `clip` cannot be panned by focus/click scrolling. */
  overflow: clip;
}
.screen.is-active { visibility: visible; opacity: 1; }

.progress-wrap {
  position: fixed;
  z-index: 20;
  top: max(13px, env(safe-area-inset-top));
  left: clamp(18px, 3.5vw, 54px);
  right: clamp(18px, 3.5vw, 54px);
  height: 10px;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.progress { display: flex; width: 100%; gap: clamp(3px, .55vw, 8px); }
.progress span { position: relative; flex: 1; height: 3px; border-radius: 4px; overflow: hidden; background: rgba(14, 22, 38, .16); }
.progress span::after { content: ""; position: absolute; inset: 0; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.progress span.is-filled::after { transform: scaleX(1); }
[data-view="intro"] .progress span, [data-view="final"] .progress span { background: rgba(244, 237, 225, .2); }
[data-view="intro"] .progress span::after { transform: scaleX(0); }
[data-view="final"] .progress span::after { background: var(--yellow); transform: scaleX(1); }

.label {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 650 clamp(10px, .86vw, 13px)/1 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.label .num { font: italic 400 1.65em/1 var(--serif); letter-spacing: 0; color: var(--blue); font-variant-numeric: tabular-nums; }
.label .lbl { position: relative; padding-left: 38px; }
.label .lbl::before { content: ""; position: absolute; left: 0; top: 50%; width: 28px; height: 1px; background: currentColor; opacity: .6; }

.duo-rule { display: flex; width: clamp(92px, 10vw, 140px); height: 4px; }
.duo-rule i { flex: 1; transform-origin: left; }
.duo-rule i:first-child { background: var(--blue); }
.duo-rule i:last-child { background: var(--yellow); }

.intro-screen, .final-screen {
  background: radial-gradient(90% 105% at 50% 42%, #23304A 0%, var(--night) 57%, #080C14 100%);
  color: var(--cream);
}
.rings { position: absolute; left: 50%; top: 48%; width: min(108vw, 148vh); height: min(108vw, 148vh); transform: translate(-50%, -50%); pointer-events: none; }
.rings circle { fill: none; stroke: #E9DCC2; stroke-width: 1.1; opacity: .14; }
.rings circle.gold { stroke: var(--yellow); stroke-width: 1.5; opacity: .38; }
.sun-disc { position: absolute; border-radius: 50%; background: var(--yellow); opacity: .92; }
.sun-disc-a { width: clamp(9px, 1.2vw, 18px); height: clamp(9px, 1.2vw, 18px); top: 17%; left: 16%; box-shadow: 0 0 0 8px rgba(255, 215, 0, .08); }
.sun-disc-b { width: 7px; height: 7px; right: 13%; bottom: 22%; opacity: .5; }
.intro-copy, .final-copy { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 56px 24px 42px; }
.intro-label, .final-label { color: rgba(244, 237, 225, .67); }
.intro-label .num, .final-label .num { color: var(--yellow); }
.title-mask { overflow: hidden; margin-top: clamp(18px, 2.5vh, 28px); padding: 0 .06em .12em; }
.intro-copy h1 {
  font: 320 clamp(50px, 7.2vw, 104px)/.91 var(--serif);
  font-variation-settings: "opsz" 144;
  letter-spacing: -.035em;
}
.intro-copy h1 em { color: var(--yellow); font-weight: 300; }
.intro-copy .duo-rule { margin: clamp(22px, 3.3vh, 34px) auto 0; }
.intro-deck { margin-top: clamp(18px, 2.6vh, 27px); color: rgba(244, 237, 225, .78); font: 420 clamp(15px, 1.35vw, 19px)/1.5 var(--sans); }

.primary-button, .secondary-button, .next-button {
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  border-radius: 999px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .14em;
  font: 700 12px/1 var(--sans);
  transition: transform .22s var(--ease), background-color .22s, color .22s, box-shadow .22s;
}
.primary-button { margin-top: clamp(28px, 4.2vh, 42px); padding: 0 26px 0 30px; background: var(--blue); color: #fff; box-shadow: 0 12px 30px rgba(0, 54, 118, .3); }
.primary-button svg, .next-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.primary-button:hover { background: var(--blue-bright); transform: translateY(-2px); }
.primary-button:active, .secondary-button:active, .next-button:active { transform: scale(.97); }
.key-hint { margin-top: 17px; color: rgba(244, 237, 225, .42); font: 600 10px/1 var(--sans); letter-spacing: .17em; text-transform: uppercase; }
kbd { font: inherit; color: rgba(244, 237, 225, .7); }
.brand-mark { position: absolute; left: clamp(18px, 3.5vw, 54px); bottom: clamp(17px, 3.2vh, 30px); color: rgba(244, 237, 225, .36); font: italic 350 clamp(14px, 1.2vw, 18px)/1 var(--serif); }

.question-screen { background: var(--cream); }
.question-screen::before { content: ""; position: absolute; inset: 0; opacity: .12; background-image: radial-gradient(circle at 1px 1px, var(--ink) .6px, transparent .7px); background-size: 13px 13px; pointer-events: none; }
.corner-shape { position: absolute; right: -8vw; top: -22vw; width: 46vw; height: 46vw; min-width: 420px; min-height: 420px; border: 1px solid rgba(0, 87, 183, .18); border-radius: 50%; box-shadow: 0 0 0 5vw rgba(0, 87, 183, .035), 0 0 0 10vw rgba(0, 87, 183, .025); }
.question-watermark { position: absolute; right: 2.8vw; bottom: -5.5vw; color: rgba(0, 87, 183, .055); font: italic 250 min(28vw, 360px)/.7 var(--serif); letter-spacing: -.08em; font-variant-numeric: tabular-nums; pointer-events: none; }
.question-layout {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  gap: clamp(36px, 5vw, 84px);
  align-items: center;
  padding: clamp(62px, 8vh, 84px) clamp(44px, 7vw, 108px) clamp(40px, 6vh, 64px);
}
.question-side {
  height: 100%;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(18px, 3vh, 30px);
}
.question-copy { flex: 0 0 auto; }
.question-copy h2 {
  max-width: 16.5em;
  margin-top: clamp(20px, 3vh, 30px);
  font: 370 clamp(26px, 2.75vw, 46px)/1.06 var(--serif);
  font-variation-settings: "opsz" 96;
  letter-spacing: -.026em;
}
.question-copy h2 .word-mask { display: inline-block; overflow: hidden; vertical-align: top; padding: .04em 0 .11em; margin-bottom: -.11em; }
.question-copy h2 .word-inner { display: inline-block; }
.choose-hint { margin-top: clamp(20px, 3.4vh, 34px); padding-left: 19px; border-left: 2px solid var(--yellow); color: var(--muted); font: 650 11px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.answer-area { width: 100%; max-width: 690px; justify-self: center; }
.options { display: grid; grid-template-columns: 1fr; gap: clamp(10px, 1.4vh, 14px); }
.option {
  position: relative;
  width: 100%;
  min-height: clamp(58px, 8.2vh, 74px);
  display: grid;
  grid-template-columns: 42px 1fr 28px;
  align-items: center;
  gap: 14px;
  padding: 10px 18px 10px 12px;
  overflow: hidden;
  border: 1px solid rgba(21, 23, 28, .14);
  background: rgba(251, 247, 239, .82);
  color: var(--ink);
  text-align: left;
  box-shadow: 0 7px 25px rgba(60, 40, 20, .045);
  transition: translate .24s var(--ease), scale .24s var(--ease), border-color .24s, background-color .25s, color .25s, box-shadow .25s, opacity .3s;
}
.option::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--blue); transform: scaleY(0); transform-origin: bottom; transition: transform .25s var(--ease); }
.option:hover:not(:disabled) { translate: -6px 0; border-color: rgba(0, 87, 183, .5); box-shadow: 9px 11px 28px rgba(36, 45, 66, .09); }
.option:hover:not(:disabled)::before { transform: scaleY(1); }
.option:active:not(:disabled) { translate: -3px 0; scale: .99; }
.option:disabled { cursor: default; }
.option-key { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); color: var(--blue); font: italic 500 17px/1 var(--serif); transition: background-color .25s, color .25s; }
.option-text { font: 560 clamp(14px, 1.18vw, 17px)/1.35 var(--sans); }
.option-icon { width: 25px; height: 25px; opacity: 0; transform: scale(.4) rotate(-25deg); transition: opacity .25s, transform .35s var(--ease); }
.option-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.option.is-correct { background: var(--blue); border-color: var(--blue); color: white; box-shadow: 0 12px 34px rgba(0, 87, 183, .24); }
.option.is-correct::after { content: ""; position: absolute; right: -44px; top: -72px; width: 145px; height: 145px; border-radius: 50%; background: var(--yellow); opacity: .14; }
.option.is-correct .option-key { background: var(--yellow); color: var(--ink); }
.option.is-correct .option-icon { opacity: 1; transform: scale(1) rotate(0); color: var(--yellow); }
.option.is-wrong { border-color: var(--clay); background: #F1DDD3; color: #7D2D1D; }
.option.is-wrong .option-key { background: var(--clay); color: white; }
.option.is-wrong .option-icon { opacity: 1; transform: scale(1); color: var(--clay); }
.option.is-muted { opacity: .48; }

.fact-panel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  max-height: 0;
  margin-top: 0;
  padding: 0 0 0 22px;
  overflow: hidden;
  border-left: 3px solid var(--yellow);
  background: var(--night);
  color: var(--cream);
  opacity: 0;
  visibility: hidden;
}
.fact-panel.is-visible { visibility: visible; max-height: 190px; margin-top: clamp(12px, 1.8vh, 18px); padding: clamp(16px, 2.2vh, 21px) 18px clamp(16px, 2.2vh, 21px) 22px; opacity: 1; }
.fact-label { color: var(--yellow); font: italic 430 clamp(17px, 1.5vw, 21px)/1 var(--serif); }
.fact-copy > p:last-child { max-width: 48em; margin-top: 7px; color: rgba(244, 237, 225, .78); font: 430 clamp(12px, 1.02vw, 15px)/1.45 var(--sans); }
.next-button { min-width: 118px; padding: 0 18px 0 22px; background: var(--yellow); color: var(--ink); }
.next-button:hover { background: #FFE33F; transform: translateX(3px); }
.question-key-hint { position: absolute; z-index: 3; left: clamp(18px, 3.5vw, 54px); bottom: clamp(15px, 2.3vh, 24px); color: var(--muted); }
.question-key-hint kbd { color: var(--blue); }

.final-rings { width: min(105vw, 142vh); height: min(105vw, 142vh); }
.final-copy { padding-bottom: 32px; }
.score { margin-top: clamp(18px, 2.8vh, 28px); color: var(--yellow); font: 300 clamp(100px, 14vw, 194px)/.8 var(--serif); letter-spacing: -.075em; font-variant-numeric: tabular-nums; }
.score small { margin-left: .08em; color: rgba(244, 237, 225, .45); font-size: .3em; letter-spacing: -.03em; }
.final-copy h2 { margin-top: clamp(18px, 3vh, 30px); font: italic 320 clamp(34px, 4.5vw, 64px)/1 var(--serif); letter-spacing: -.025em; }
.final-copy .duo-rule { margin-top: clamp(20px, 2.8vh, 28px); }
.final-note { margin-top: clamp(16px, 2.2vh, 23px); color: rgba(244, 237, 225, .72); font: 420 clamp(14px, 1.25vw, 18px)/1.5 var(--sans); }
.final-actions { display: flex; align-items: center; gap: 13px; margin-top: clamp(24px, 3.6vh, 36px); }
.final-actions .primary-button { margin: 0; }
.yellow-button { background: var(--yellow); color: var(--ink); box-shadow: 0 12px 30px rgba(255, 215, 0, .12); }
.yellow-button:hover { background: #FFE33F; }
.secondary-button { min-width: 168px; padding: 0 23px; border: 1px solid rgba(244, 237, 225, .28); color: var(--cream); }
.secondary-button:hover { border-color: var(--yellow); color: var(--yellow); transform: translateY(-2px); }
.final-key-hint { margin-top: 16px; }

#confetti { position: fixed; inset: 0; z-index: 60; width: 100%; height: 100%; pointer-events: none; }
.grain { position: fixed; inset: -50%; z-index: 70; pointer-events: none; opacity: .075; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.1 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>"); animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -4%); } 75% { transform: translate(-4%, -1%); } 100% { transform: translate(0, 0); } }

@media (max-width: 900px), (orientation: portrait) {
  .progress-wrap { left: 16px; right: 16px; }
  .rings { width: 175vw; height: 175vw; }
  .intro-copy { justify-content: center; padding: 56px 22px 48px; }
  .intro-copy h1 { font-size: clamp(48px, 15vw, 70px); line-height: .93; }
  .intro-deck { max-width: 22em; }
  .brand-mark { left: 20px; bottom: 18px; }
  .question-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 51px 18px 32px;
  }
  .question-side { height: auto; flex: 1 1 auto; justify-content: flex-start; gap: 14px; }
  .question-copy h2 { margin-top: 15px; max-width: none; font-size: clamp(24px, 7.3vw, 33px); line-height: 1.03; }
  .choose-hint { display: none; }
  .answer-area { max-width: none; }
  .options { gap: 8px; }
  .option { min-height: 56px; grid-template-columns: 36px 1fr 23px; gap: 10px; padding: 7px 12px 7px 9px; }
  .option-key { width: 34px; height: 34px; font-size: 15px; }
  .option-text { font-size: clamp(13px, 3.55vw, 15px); line-height: 1.27; }
  .option:hover:not(:disabled) { translate: none; }
  .fact-panel { grid-template-columns: 1fr auto; gap: 10px; padding-left: 14px; }
  .fact-panel.is-visible { max-height: 190px; margin-top: 9px; padding: 12px 10px 12px 14px; }
  .fact-label { font-size: 16px; }
  .fact-copy > p:last-child { margin-top: 4px; font-size: clamp(11px, 3vw, 13px); line-height: 1.35; }
  .next-button { min-width: 54px; width: 54px; min-height: 54px; padding: 0; }
  .next-button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .question-watermark { right: -3vw; bottom: 1vh; font-size: 48vw; }
  .question-key-hint { display: none; }
  .corner-shape { right: -58vw; top: -58vw; width: 110vw; height: 110vw; }
  .final-rings { width: 175vw; height: 175vw; }
  .score { font-size: clamp(96px, 31vw, 145px); }
  .final-copy h2 { font-size: clamp(33px, 10vw, 48px); }
  .final-actions { flex-direction: column; width: min(100%, 300px); }
  .final-actions > * { width: 100%; }
  .secondary-button { min-height: 54px; }
}

@media (max-width: 420px) and (max-height: 760px) {
  .question-layout { gap: 11px; padding-top: 43px; padding-bottom: 19px; }
  .question-copy h2 { margin-top: 10px; font-size: 22px; }
  .label { font-size: 9px; }
  .options { gap: 6px; }
  .option { min-height: 49px; }
  .option-text { font-size: 12px; }
  .fact-panel.is-visible { margin-top: 6px; padding-top: 9px; padding-bottom: 9px; }
  .fact-copy > p:last-child { font-size: 10.5px; }
  .next-button { width: 48px; min-width: 48px; min-height: 48px; }
}

@media (orientation: landscape) and (max-height: 560px) {
  .question-layout { padding-top: 42px; padding-bottom: 25px; }
  .question-copy h2 { font-size: clamp(25px, 3vw, 38px); margin-top: 15px; }
  .options { gap: 7px; }
  .option { min-height: 50px; }
  .fact-panel.is-visible { padding-top: 10px; padding-bottom: 10px; margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .grain { animation: none; }
  .option, .primary-button, .secondary-button, .next-button { transition-duration: .01ms; }
}


/* ---------- Scene stage ---------- */
.stage {
  position: relative;
  flex: 0 1 clamp(170px, 40vh, 380px);
  min-height: 120px;
  overflow: hidden;
  background: var(--night);
  box-shadow: 0 22px 50px rgba(14, 22, 38, .18);
  isolation: isolate;
  contain: layout paint;
}
.stage::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; z-index: 4; width: 3px; background: linear-gradient(var(--blue) 50%, var(--yellow) 50%); }
.stage::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(8, 12, 20, .6) 100%); }
.stage.is-flash-correct { animation: flash-correct .9s var(--ease); }
.stage.is-flash-wrong { animation: flash-wrong .6s var(--ease); }
@keyframes flash-correct { 0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, .9), 0 22px 50px rgba(14, 22, 38, .18); } 100% { box-shadow: 0 0 0 18px rgba(255, 215, 0, 0), 0 22px 50px rgba(14, 22, 38, .18); } }
@keyframes flash-wrong { 0%, 100% { translate: 0; } 25% { translate: -5px 0; } 50% { translate: 4px 0; } 75% { translate: -2px 0; } }
.scene, .scene-svg, .scene-photo, .scene-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene { overflow: hidden; }
.scene-photo { object-fit: cover; will-change: transform; }
.scene-photo.is-hidden-photo { opacity: 0; clip-path: circle(0% at 64% 44%); }
.scene-photo.is-dim-photo { opacity: .2; }
.hud { position: absolute; z-index: 3; left: clamp(16px, 2vw, 24px); right: 14px; bottom: clamp(11px, 1.8vh, 18px); display: flex; flex-direction: column; gap: 5px; color: var(--cream); pointer-events: none; }
.hud-kicker { font: 650 clamp(9px, .72vw, 11px)/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(244, 237, 225, .72); }
.hud-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; overflow: hidden; }
.hud-num { display: inline-block; font: italic 360 clamp(22px, 2.4vw, 38px)/1 var(--serif); letter-spacing: -.02em; color: var(--yellow); font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 2px 16px rgba(0, 0, 0, .35); }
.hud-num.is-scrambling { color: rgba(244, 237, 225, .55); }
.hud-unit { display: inline-block; font: 560 clamp(11px, .9vw, 13px)/1.2 var(--sans); color: rgba(244, 237, 225, .82); }

/* 01 Trypillia */
.t-ring { fill: none; stroke: rgba(244, 237, 225, .55); stroke-width: 1; }
.t-flow { fill: none; stroke: var(--yellow); stroke-width: 1.4; stroke-dasharray: .04 .08; opacity: .8; }
.t-house { fill: #F4EDE1; opacity: .92; }
.t-plaza { fill: none; stroke: var(--yellow); stroke-width: 1.2; }
/* 02 Mriya */
.m-clouds-far { fill: rgba(255, 246, 230, .32); }
.m-clouds-near { fill: rgba(255, 250, 240, .55); }
.m-trail { fill: none; stroke: rgba(255, 255, 255, .8); stroke-width: 1.8; stroke-linecap: round; }
.m-trail-b { stroke-width: 1.1; }
.p-body { fill: #F4F1EA; }
.p-wing { fill: #E3DED3; }
.p-wing-far, .p-engine-far { fill: #B9B6AF; }
.p-engine { fill: #CFCAC0; stroke: #8D897F; stroke-width: .4; }
.p-tail { fill: #DCD7CC; }
.p-yellow { stroke: var(--yellow); stroke-width: 1.6; }
.p-blue { stroke: var(--blue); stroke-width: 1.8; }
.p-window { fill: #1D2A44; }
/* 03 Pysanka */
.p-shadow { fill: rgba(0, 0, 0, .45); }
.p-outline { fill: none; stroke: #F6EEDD; stroke-width: 1.4; }
.p-wax { fill: none; stroke: #4A3527; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.p-wax.p-y { stroke-width: 2; }
.p-star { fill: rgba(74, 53, 39, .35); }
/* 05 Bells */
.b-star { fill: #F4EDE1; }
.b-beam { stroke: #6C5330; stroke-width: 5; stroke-linecap: round; }
.b-staff { fill: none; stroke: rgba(244, 237, 225, .28); stroke-width: .8; }
.b-motif-inner, .b-note-inner { fill: #F4EDE1; stroke: #F4EDE1; }
.b-motif-inner ellipse, .b-note-inner ellipse { stroke: none; }
.b-stem { fill: none; stroke-width: 1.3; stroke-linecap: round; }
.b-note-inner { fill: var(--yellow); stroke: var(--yellow); }
.b-rope { stroke: #8B6B3E; stroke-width: 2; }
.b-body { fill: url(#bGold); }
.b-lip { stroke: #7A540E; stroke-width: 3; stroke-linecap: round; }
.b-clapper { fill: #6B4A10; }
.b-ripple { fill: none; stroke: var(--yellow); stroke-width: 1.5; }
/* 06 Europe */
.e-grid { fill: none; stroke: rgba(244, 237, 225, .13); stroke-width: .7; }
.e-ring { fill: rgba(14, 22, 38, .5); stroke: rgba(244, 237, 225, .5); stroke-width: 1; }
.e-ticks path { stroke: rgba(244, 237, 225, .6); stroke-width: 1; }
.e-needle-n { fill: var(--yellow); }
.e-needle-s, .e-needle-s2 { fill: rgba(244, 237, 225, .45); }
.e-needle-s { display: none; }
.e-n { fill: var(--yellow); font: italic 500 11px var(--serif); }
.e-shape { fill: url(#eFlag); fill-opacity: 0; stroke: var(--cream); stroke-width: 1.4; stroke-linejoin: round; }
.e-pin { fill: var(--yellow); }
/* 07 Arsenalna */
.a-ring { fill: none; stroke: #E9D3A6; }
.a-step { stroke: #C9B28A; }
.a-rail { fill: none; stroke: rgba(233, 211, 166, .25); stroke-width: 1.2; }
.a-gauge path { stroke: rgba(244, 237, 225, .55); stroke-width: 1; fill: none; }
.a-gauge .a-gauge-line { stroke: rgba(244, 237, 225, .25); stroke-width: 3; }
.a-gauge .a-gauge-fill { stroke: var(--yellow); stroke-width: 3; }
.a-gauge .a-marker { fill: var(--yellow); stroke: none; }
/* 08 Bubka */
.v-ground { stroke: rgba(244, 237, 225, .35); stroke-width: 1; }
.v-lane { fill: none; stroke: #B5432A; stroke-width: 5; opacity: .75; }
.v-mat { fill: var(--blue); }
.v-box { fill: rgba(244, 237, 225, .5); }
.v-upright { stroke: rgba(244, 237, 225, .7); stroke-width: 2.2; }
.v-bar { stroke: var(--yellow); stroke-width: 2.4; stroke-linecap: round; }
.v-bar-g circle { fill: var(--cream); }
.v-six { stroke: var(--yellow); stroke-width: 1; stroke-dasharray: 3 3; }
.v-six-label { fill: var(--yellow); font: italic 500 10px var(--serif); }
.v-trail { fill: none; stroke: rgba(255, 215, 0, .55); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.v-pole { stroke: #F4EDE1; stroke-width: 1.6; stroke-linecap: round; }
.v-athlete { fill: var(--yellow); }
.v-tally { fill: none; stroke: var(--yellow); stroke-width: 2; stroke-linecap: round; }
/* 09 Sikorsky */
.h-hill { fill: #1B2A48; }
.h-ground { fill: #121C30; }
.h-grass { fill: none; stroke: #2A3B5E; stroke-width: 1; }
.h-dust { fill: #E9D3A6; }
.h-shadow { fill: rgba(0, 0, 0, .4); }
.h-boom, .h-fin { fill: #D9D2C2; }
.h-cabin { fill: #F4EDE1; }
.h-glass { fill: #2B4E86; }
.h-stripe { stroke: var(--blue); stroke-width: 2.4; }
.h-skid, .h-mast { fill: none; stroke: #9D968A; stroke-width: 2; stroke-linecap: round; }
.h-disc { fill: rgba(244, 237, 225, .9); }
.h-blade { stroke: #2A2E38; stroke-width: 2.4; stroke-linecap: round; }
.h-tail-disc { fill: rgba(244, 237, 225, .12); }
.h-tail-blade { stroke: #2A2E38; stroke-width: 1.6; stroke-linecap: round; }
/* 10 Kyiv */
.k-hill-far { fill: #4E5F86; }
.k-hill-near { fill: #1C2B4B; }
.k-wall { fill: #EDE5D4; }
.k-window { fill: #F2B544; }
.k-dome { fill: #E7B52C; }
.k-cross { fill: none; stroke: #E7B52C; stroke-width: 1; }
.k-glint { fill: #fff; }
.k-river { fill: url(#kRiver); }
.k-shimmer { fill: none; stroke: rgba(255, 228, 160, .7); stroke-width: 1.2; stroke-dasharray: .03 .06; stroke-linecap: round; }
.k-shimmer-b { stroke-width: .9; opacity: .6; }

/* ---------- Ambient, wipe, final ---------- */
#ambient { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.question-screen > .corner-shape, .question-screen > .question-watermark { z-index: 0; }
.wipe { position: fixed; inset: 0; z-index: 55; pointer-events: none; visibility: hidden; overflow: hidden; }
.wipe-panel { position: absolute; inset: 0; will-change: transform; }
.wipe-yellow { background: var(--yellow); }
.wipe-blue { inset: 0 0 -1px; background: radial-gradient(90% 90% at 50% 45%, var(--blue-bright), var(--blue) 60%, #003F86); }
.wipe-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--cream); }
.wipe-kicker { overflow: hidden; font: 650 12px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: rgba(244, 237, 225, .8); }
.wipe-num { font: italic 280 clamp(120px, 22vw, 260px)/.85 var(--serif); letter-spacing: -.06em; color: var(--yellow); font-variant-numeric: tabular-nums; }
.intro-copy h1 em .char { display: inline-block; }
.sunburst { position: absolute; left: 50%; top: 40%; width: max(150vw, 150vh); height: max(150vw, 150vh); transform: translate(-50%, -50%); pointer-events: none; opacity: 0; }
.sunburst-rays path { fill: rgba(255, 215, 0, .045); }
.result-dots { display: flex; gap: 8px; margin-top: clamp(16px, 2.4vh, 24px); }
.result-dots i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid rgba(244, 237, 225, .35); transition: background-color .3s, border-color .3s; }
.result-dots.is-revealed i.is-right { background: var(--yellow); border-color: var(--yellow); }
.result-dots.is-revealed i.is-miss { border-color: rgba(181, 67, 42, .9); }
.result-dots.is-revealed i:nth-child(1) { transition-delay: .05s; } .result-dots.is-revealed i:nth-child(2) { transition-delay: .15s; }
.result-dots.is-revealed i:nth-child(3) { transition-delay: .25s; } .result-dots.is-revealed i:nth-child(4) { transition-delay: .35s; }
.result-dots.is-revealed i:nth-child(5) { transition-delay: .45s; } .result-dots.is-revealed i:nth-child(6) { transition-delay: .55s; }
.result-dots.is-revealed i:nth-child(7) { transition-delay: .65s; } .result-dots.is-revealed i:nth-child(8) { transition-delay: .75s; }
.result-dots.is-revealed i:nth-child(9) { transition-delay: .85s; } .result-dots.is-revealed i:nth-child(10) { transition-delay: .95s; }

@media (max-width: 900px), (orientation: portrait) {
  .stage { flex: 1 1 0; min-height: 72px; max-height: 38vh; }
  .hud { gap: 3px; }
  .hud-num { font-size: clamp(20px, 6vw, 30px); }
}
@media (orientation: landscape) and (max-height: 560px) {
  .stage { flex-basis: 34vh; min-height: 80px; }
  .question-side { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #ambient { display: none; }
  .stage.is-flash-correct, .stage.is-flash-wrong { animation: none; }
  .result-dots i { transition: none; }
}

.option-icon .i-cross{display:none}
.option.is-wrong .option-icon .i-check{display:none}
.option.is-wrong .option-icon .i-cross{display:block}