@import url('https://fonts.googleapis.com/css2?family=Anybody:wdth,wght@75..125,400..900&family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
  --porcelain: #f2f0e9;
  --paper: #fffdf7;
  --ink: #151a22;
  --blue: #173f94;
  --cobalt: #285ad7;
  --yellow: #ffd447;
  --coral: #ff684c;
  --mint: #b9e7ca;
  --line: rgba(21, 26, 34, .18);
  --display: 'Anybody', 'Arial Narrow', sans-serif;
  --body: 'DM Sans', system-ui, sans-serif;
  --utility: 'IBM Plex Mono', monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--porcelain); }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--ink); background: var(--porcelain); font-family: var(--body); -webkit-font-smoothing: antialiased; }
button, a { color: inherit; font: inherit; }
button { border: 0; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; }
.paper-noise { position: fixed; z-index: 20; inset: 0; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }

.game-loader { display: grid; min-height: 100dvh; place-content: center; justify-items: center; gap: 22px; background: var(--blue); color: white; }
.game-loader p { margin: 0; font: 500 12px/1.4 var(--utility); letter-spacing: .06em; }
.loader-ticket { position: relative; display: grid; width: 88px; height: 112px; place-items: center; overflow: hidden; color: var(--blue); background: var(--yellow); transform: rotate(-4deg); }
.loader-ticket::before, .loader-ticket::after { position: absolute; left: 50%; width: 18px; height: 18px; border-radius: 50%; background: var(--blue); content: ''; transform: translateX(-50%); }
.loader-ticket::before { top: -9px; }.loader-ticket::after { bottom: -9px; }
.loader-ticket span { font: 900 28px/1 var(--display); letter-spacing: -.08em; }
.loader-ticket i { position: absolute; width: 160%; height: 18px; background: var(--coral); animation: loader-scan 1.1s ease-in-out infinite alternate; }
@keyframes loader-scan { from { transform: translateY(-50px) rotate(-8deg); } to { transform: translateY(50px) rotate(-8deg); } }

.game-brand { display: inline-flex; gap: 10px; align-items: center; color: var(--ink); text-decoration: none; }
.game-brand.light { color: white; }
.brand-block { display: grid; width: 42px; height: 42px; place-items: center; color: var(--blue); background: var(--yellow); font: 900 13px/1 var(--display); letter-spacing: -.06em; transform: rotate(-2deg); }
.brand-words { font: 760 11px/.92 var(--display); letter-spacing: -.035em; text-transform: uppercase; }
.sound-toggle { display: inline-flex; min-height: 34px; gap: 7px; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid var(--line); cursor: pointer; color: #65645f; background: transparent; font: 600 7px/1 var(--utility); letter-spacing: .04em; text-transform: uppercase; transition: color .18s ease, border-color .18s ease, background .18s ease; }
.sound-toggle:hover { color: var(--blue); border-color: var(--blue); background: rgba(40,90,215,.05); }
.sound-toggle.light { color: rgba(255,255,255,.74); border-color: rgba(255,255,255,.25); }
.sound-toggle.light:hover { color: var(--yellow); border-color: var(--yellow); background: rgba(255,212,71,.08); }
.sound-toggle svg { width: 15px; height: 15px; overflow: visible; fill: currentColor; }
.sound-toggle svg path:not(:first-child) { fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
.currency-picker { display: inline-flex; min-height: 34px; align-items: stretch; color: #65645f; border: 1px solid var(--line); background: rgba(255,255,255,.35); font: 600 7px/1 var(--utility); letter-spacing: .04em; text-transform: uppercase; transition: border-color .18s ease, background .18s ease; }
.currency-picker:hover, .currency-picker:focus-within { color: var(--blue); border-color: var(--blue); background: rgba(40,90,215,.05); }
.currency-picker > span { display: flex; align-items: center; padding: 0 7px 0 9px; color: inherit; border-right: 1px solid currentColor; opacity: .72; }
.currency-picker select { width: 78px; min-width: 0; padding: 0 22px 0 8px; color: inherit; border: 0; outline: 0; background: transparent; font: 650 8px/1 var(--utility); cursor: pointer; }
.currency-picker select:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
.currency-picker.light { color: rgba(255,255,255,.78); border-color: rgba(255,255,255,.25); background: rgba(8,22,56,.15); }
.currency-picker.light:hover, .currency-picker.light:focus-within { color: var(--yellow); border-color: var(--yellow); background: rgba(255,212,71,.08); }
.currency-picker.light select option { color: var(--ink); background: var(--paper); }
.display-price.converted { text-decoration: underline dotted rgba(23,63,148,.55); text-underline-offset: 3px; }

/* Opening — a catalogue cover split between the room and the challenge. */
.intro-screen { position: relative; min-height: 100dvh; overflow-x: clip; color: white; background: var(--blue); }
.intro-hero { position: relative; display: grid; min-height: 100dvh; grid-template-columns: minmax(360px, 1.08fr) minmax(430px, .92fr); overflow: hidden; }
.intro-nav { position: absolute; z-index: 4; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: space-between; padding: 26px 32px; }
.intro-nav-actions, .results-nav-actions { display: flex; gap: 16px; align-items: center; }
.reviewer-link { color: rgba(255,255,255,.76); font: 600 10px/1 var(--utility); text-decoration: none; }
.reviewer-link:hover { color: var(--yellow); }
.intro-photo { position: relative; min-height: 100dvh; overflow: hidden; background: #c6c1b4; clip-path: polygon(0 0, 100% 0, 93% 100%, 0 100%); animation: photo-arrive .9s cubic-bezier(.2,.75,.2,1) both; }
.intro-photo > img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.photo-wash { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,22,38,.3), transparent 18%); pointer-events: none; }
.intro-copy { position: relative; z-index: 2; display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 112px clamp(36px, 4.6vw, 74px) 58px clamp(42px, 4.4vw, 72px); }
.daily-kicker { display: flex; align-items: center; justify-content: space-between; margin: 0 0 26px; color: var(--yellow); font: 600 10px/1 var(--utility); letter-spacing: .06em; text-transform: uppercase; }
.daily-kicker span:last-child { color: rgba(255,255,255,.64); }
.intro-copy h1 { margin: 0; font: 820 clamp(54px, 6.6vw, 108px)/.83 var(--display); font-stretch: 82%; letter-spacing: -.075em; text-transform: uppercase; }
.intro-copy h1 span { display: block; animation: word-rise .7s cubic-bezier(.2,.8,.2,1) both; }
.intro-copy h1 span:last-child { color: var(--yellow); animation-delay: .08s; }
.intro-deck { max-width: 540px; margin: 24px 0 0; color: rgba(255,255,255,.74); font-size: clamp(14px, 1.05vw, 17px); line-height: 1.5; }
.intro-rules { max-width: 610px; margin: 23px 0 24px; border: 1px solid rgba(255,255,255,.24); background: rgba(8,22,56,.28); }
.rules-heading { position: relative; padding: 14px 16px 13px; border-bottom: 1px solid rgba(255,255,255,.18); }
.rules-heading > span { display: block; margin-bottom: 8px; color: var(--yellow); font: 600 7px/1 var(--utility); letter-spacing: .07em; text-transform: uppercase; }
.rules-heading h2 { margin: 0; font: 730 clamp(15px, 1.35vw, 21px)/1.05 var(--display); letter-spacing: -.025em; text-transform: uppercase; }
.rules-heading p { position: absolute; right: 16px; bottom: 14px; margin: 0; color: rgba(255,255,255,.48); font: 500 7px/1 var(--utility); }
.rules-list { margin: 0; padding: 0; list-style: none; }
.rules-list li { display: grid; min-height: 48px; grid-template-columns: 34px minmax(105px,.42fr) 1fr; gap: 10px; align-items: center; padding: 8px 14px; border-bottom: 1px solid rgba(255,255,255,.12); }
.rules-list li b { display: grid; width: 27px; height: 27px; place-items: center; color: var(--blue); background: var(--yellow); font: 700 7px/1 var(--utility); }
.rules-list li strong { font: 690 10px/1.1 var(--display); text-transform: uppercase; }
.rules-list li span { color: rgba(255,255,255,.68); font-size: 9px; line-height: 1.4; }
.rules-points { display: grid; grid-template-columns: repeat(3,1fr); }
.rules-points div { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; padding: 10px 13px; border-right: 1px solid rgba(255,255,255,.12); }
.rules-points div:last-child { border-right: 0; }
.rules-points strong { color: var(--yellow); font: 810 21px/1 var(--display); }
.rules-points span { color: rgba(255,255,255,.65); font-size: 8px; line-height: 1.25; }
.rules-zero { margin: 0; padding: 9px 13px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.5); font: 500 7px/1.4 var(--utility); }
.start-game, .next-question { display: flex; min-height: 58px; align-items: center; justify-content: space-between; padding: 0 22px; cursor: pointer; color: var(--blue); background: var(--yellow); font: 750 13px/1 var(--display); letter-spacing: .01em; text-transform: uppercase; transition: transform .2s ease, background .2s ease; }
.start-game span, .next-question span { font-size: 22px; }.start-game:hover, .next-question:hover { background: white; transform: translateY(-2px); }
.god-entry { display: grid; min-height: 48px; grid-template-columns: 32px 1fr; column-gap: 10px; align-items: center; margin-top: 9px; padding: 7px 14px; cursor: pointer; color: white; border: 1px solid rgba(255,255,255,.28); background: rgba(8,22,56,.28); text-align: left; transition: border-color .18s ease, background .18s ease; }
.god-entry:hover { border-color: var(--coral); background: rgba(8,22,56,.5); }.god-entry > span { grid-row: 1 / 3; color: var(--coral); font: 800 28px/1 var(--display); }.god-entry strong { align-self: end; font: 720 10px/1 var(--display); text-transform: uppercase; }.god-entry small { align-self: start; color: rgba(255,255,255,.55); font: 500 7px/1 var(--utility); text-transform: uppercase; }
.god-launchpad { display: grid; grid-template-columns: minmax(0,1fr) minmax(180px,.56fr); margin-top: 9px; border: 1px solid rgba(255,255,255,.28); background: rgba(8,22,56,.28); }
.god-launchpad .god-entry { margin: 0; border: 0; border-left: 1px solid rgba(255,255,255,.2); background: transparent; }
.god-difficulty-control { display: grid; min-width: 0; grid-template-columns: max-content 1fr; gap: 4px 10px; align-items: center; padding: 7px 12px; text-align: left; }
.god-difficulty-control > span { color: var(--yellow); font: 650 7px/1 var(--utility); letter-spacing: .045em; text-transform: uppercase; }
.god-difficulty-control select { width: 100%; max-width: 320px; min-width: 0; height: 27px; padding: 0 25px 0 8px; color: white; border: 1px solid rgba(255,255,255,.25); border-radius: 0; background: var(--blue); font: 600 8px/1 var(--utility); cursor: pointer; }
.god-difficulty-control select:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.god-difficulty-control small { grid-column: 1 / -1; color: rgba(255,255,255,.47); font: 500 7px/1 var(--utility); }
.reset-note { margin: 14px 0 0; color: rgba(255,255,255,.48); font: 500 9px/1.4 var(--utility); }
.intro-index { position: absolute; z-index: 3; right: 18px; bottom: 18px; display: flex; gap: 2px; }
.intro-index span { display: grid; width: 29px; height: 38px; place-items: center; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.48); font: 600 8px/1 var(--utility); }
.intro-origin-footer { display: grid; grid-template-columns: minmax(260px,.8fr) minmax(340px,1.2fr); gap: clamp(34px, 8vw, 140px); align-items: center; padding: clamp(42px, 5.5vw, 76px) clamp(28px, 7vw, 108px); color: var(--blue); background: var(--yellow); }
.intro-origin-footer > div:first-child > span, .intro-origin-footer strong { display: block; font: 700 8px/1 var(--utility); letter-spacing: .065em; text-transform: uppercase; }
.intro-origin-footer h2 { max-width: 620px; margin: 15px 0 0; font: 800 clamp(34px, 4.2vw, 68px)/.88 var(--display); letter-spacing: -.055em; text-transform: uppercase; }
.intro-origin-footer > div:last-child { max-width: 650px; padding-left: clamp(20px, 3vw, 46px); border-left: 1px solid rgba(23,63,148,.3); }
.intro-origin-footer strong { color: rgba(23,63,148,.62); }
.intro-origin-footer p { margin: 14px 0 0; font-size: clamp(13px, 1.15vw, 17px); line-height: 1.6; }
.intro-origin-footer .project-disclosure { grid-column: 1 / -1; max-width: none; margin: 0; padding-top: 20px; border-top: 1px solid rgba(23,63,148,.24); color: rgba(23,63,148,.72); font: 600 8px/1.65 var(--utility); letter-spacing: .025em; }
@keyframes photo-arrive { from { opacity: 0; transform: scale(1.035); } }
@keyframes word-rise { from { opacity: 0; transform: translateY(34px); } }

/* Question — image first, all game controls on a paper-like catalogue margin. */
.question-screen { display: grid; min-height: 100dvh; grid-template: 84px minmax(0, 1fr) / minmax(500px, 1.18fr) minmax(470px, .82fr); background: var(--paper); }
.game-nav { z-index: 4; display: grid; grid-column: 1 / -1; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 28px; border-bottom: 1px solid var(--line); background: rgba(255,253,247,.9); backdrop-filter: blur(14px); }
.question-progress { display: flex; align-items: center; }
.progress-punch { position: relative; display: grid; width: 54px; height: 34px; place-items: center; border: 1px solid var(--line); border-right: 0; font: 600 9px/1 var(--utility); transition: color .2s, background .2s; }
.progress-punch:last-child { border-right: 1px solid var(--line); }
.progress-punch i { position: absolute; right: -5px; width: 10px; height: 10px; z-index: 2; border-radius: 50%; background: var(--paper); }
.progress-punch.current { color: var(--blue); background: var(--yellow); }.progress-punch.correct { color: #174f34; background: var(--mint); }.progress-punch.wrong { color: #7e2518; background: #ffd4cc; }
.game-nav-tools { display: flex; gap: 13px; align-items: center; justify-self: end; }
.running-score { display: flex; align-items: baseline; color: var(--ink); }.running-score span { margin-right: 9px; color: #74736e; font: 600 8px/1 var(--utility); text-transform: uppercase; }.running-score strong { font: 800 25px/1 var(--display); }.running-score small { margin-left: 3px; color: #74736e; font: 600 9px/1 var(--utility); }
.photo-panel { position: relative; min-height: 0; padding: 22px 18px 22px 26px; overflow: hidden; background: var(--porcelain); }
.photo-frame { width: 100%; height: 100%; min-height: calc(100dvh - 128px); overflow: hidden; background: #d8d4c9; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; animation: image-curtain .65s cubic-bezier(.2,.75,.2,1) both; }
@keyframes image-curtain { from { opacity: 0; transform: scale(1.025); } }
.photo-label { position: absolute; bottom: 34px; left: 38px; padding: 8px 10px; color: white; background: var(--blue); font: 600 8px/1 var(--utility); letter-spacing: .06em; text-transform: uppercase; }
.look-twice { position: absolute; top: 36px; right: 28px; display: grid; width: 62px; height: 62px; place-content: center; color: var(--blue); background: var(--yellow); font: 850 12px/.85 var(--display); letter-spacing: -.04em; text-align: center; transform: rotate(4deg); }
.answer-panel { display: flex; min-width: 0; align-items: center; padding: clamp(28px, 4.4vw, 68px); background: var(--paper); }
.answer-panel-inner { width: min(100%, 620px); margin-inline: auto; }
.question-meta { display: flex; justify-content: space-between; padding-bottom: 13px; border-bottom: 1px solid var(--line); color: #73716b; font: 600 8px/1 var(--utility); letter-spacing: .07em; text-transform: uppercase; }.question-meta strong { color: var(--blue); }
.answer-panel h1 { max-width: 580px; margin: 26px 0 12px; font: 810 clamp(43px, 4.1vw, 70px)/.9 var(--display); font-stretch: 85%; letter-spacing: -.065em; text-transform: uppercase; }
.question-help { max-width: 520px; margin: 0; color: #6e6c66; font-size: 13px; line-height: 1.55; }
.hint-area { margin: 25px 0 21px; }
.hint-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: var(--blue); }.hint-heading strong { font: 740 10px/1 var(--display); letter-spacing: .01em; text-transform: uppercase; }.hint-heading span { color: #77756e; font: 600 7px/1 var(--utility); text-transform: uppercase; }
.hint-rack { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.hint-ticket { position: relative; display: grid; min-height: 65px; gap: 8px; align-content: center; padding: 10px 17px; overflow: hidden; cursor: pointer; color: var(--blue); background: #e8edf8; text-align: left; transition: transform .18s ease, background .18s ease; }
.hint-ticket:hover:not(:disabled) { background: #dce5f8; transform: translateY(-2px); }.hint-ticket:disabled:not(.revealed) { opacity: .45; cursor: not-allowed; }.hint-ticket.revealed { color: var(--ink); background: var(--yellow); }
.hint-kind { font: 600 7px/1 var(--utility); letter-spacing: .07em; text-transform: uppercase; }.hint-ticket strong { overflow: hidden; font: 760 13px/1.15 var(--display); text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.ticket-notch { position: absolute; top: 50%; right: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); transform: translateY(-50%); }
.answer-grid { display: grid; gap: 8px; }
.answer-option { display: grid; min-height: 58px; grid-template-columns: 34px 1fr 22px; gap: 11px; align-items: center; padding: 8px 15px 8px 10px; border: 1px solid var(--line); cursor: pointer; background: transparent; text-align: left; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.answer-option > span { display: grid; width: 34px; height: 34px; place-items: center; color: var(--blue); background: #e8edf8; font: 700 9px/1 var(--utility); }.answer-option strong { font: 680 13px/1.2 var(--display); text-transform: uppercase; }.answer-option i { font-style: normal; text-align: right; }
.answer-option:hover:not(:disabled) { border-color: var(--blue); background: #f5f7fc; transform: translateX(4px); }.answer-option.correct { border-color: #4a9a6a; background: var(--mint); }.answer-option.correct > span { color: white; background: #276e47; }.answer-option.wrong { border-color: var(--coral); background: #ffded8; }.answer-option.wrong > span { color: white; background: var(--coral); }.answer-option.muted { opacity: .42; }.answer-option:disabled { cursor: default; }
.keyboard-note { margin: 14px 0 0; color: #97948c; font: 500 8px/1 var(--utility); }
.answer-reveal { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 18px; }.answer-reveal > div { display: grid; gap: 5px; padding: 12px; border: 1px solid var(--line); }.answer-reveal div span { color: #77756e; font: 600 7px/1 var(--utility); text-transform: uppercase; }.answer-reveal div strong { font: 720 12px/1.1 var(--display); text-transform: uppercase; }.answer-reveal .next-question { grid-column: 1 / -1; min-height: 50px; }

/* Results — a receipt for the five-item transaction. */
.results-screen { min-height: 100dvh; color: white; background: var(--blue); }
.results-nav { display: flex; height: 88px; align-items: center; justify-content: space-between; padding: 0 clamp(24px, 5vw, 74px); border-bottom: 1px solid rgba(255,255,255,.18); }.results-nav-actions > span { color: var(--yellow); font: 600 9px/1 var(--utility); text-transform: uppercase; }
.results-hero { display: grid; grid-template-columns: minmax(280px,.7fr) 1.3fr; gap: clamp(40px, 8vw, 130px); align-items: center; padding: clamp(56px, 8vw, 112px) clamp(24px, 7vw, 110px); }
.score-orbit { position: relative; display: grid; width: min(29vw, 380px); min-width: 280px; aspect-ratio: 1; place-content: center; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; text-align: center; }.score-orbit::before, .score-orbit::after { position: absolute; border-radius: 50%; content: ''; }.score-orbit::before { inset: 8%; border: 1px dashed rgba(255,212,71,.52); animation: orbit-spin 24s linear infinite; }.score-orbit::after { top: -8px; left: 50%; width: 16px; height: 16px; background: var(--yellow); transform: translateX(-50%); }.score-orbit span { color: var(--yellow); font: 600 8px/1 var(--utility); letter-spacing: .06em; text-transform: uppercase; }.score-orbit strong { font: 820 clamp(76px, 9vw, 138px)/.86 var(--display); letter-spacing: -.08em; }.score-orbit small { color: rgba(255,255,255,.58); font: 500 9px/1 var(--utility); }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
.results-copy > p:first-child { color: var(--yellow); font: 600 9px/1 var(--utility); letter-spacing: .08em; text-transform: uppercase; }.results-copy h1 { margin: 22px 0; font: 820 clamp(50px, 6.4vw, 100px)/.84 var(--display); font-stretch: 82%; letter-spacing: -.072em; text-transform: uppercase; }.results-copy > .score-copy { max-width: 520px; color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.6; }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 26px; }.share-result, .replay-result, .god-next, .result-secondary { display: inline-flex; min-height: 48px; gap: 10px; align-items: center; justify-content: center; padding: 0 17px; cursor: pointer; font: 700 9px/1 var(--display); text-transform: uppercase; }.share-result { color: var(--blue); background: var(--yellow); }.share-result span, .replay-result span { font-size: 18px; }.share-result:hover { background: white; }.share-result.copied { color: #163f2a; background: var(--mint); }.share-result:disabled { opacity: .7; cursor: wait; }.replay-result, .result-secondary { color: white; border: 1px solid rgba(255,255,255,.28); background: transparent; }.replay-result:hover, .result-secondary:hover { border-color: white; background: rgba(255,255,255,.06); }.god-next { color: white; border: 1px solid var(--coral); background: rgba(255,104,76,.08); }.god-next span { color: var(--coral); font-size: 21px; }.god-next:hover { background: rgba(255,104,76,.18); }.god-next:disabled { opacity: .55; cursor: wait; }
.god-result-launch { width: min(560px,100%); margin-top: 26px; }.god-result-launch .god-difficulty-control { width: min(360px,100%); padding: 0; }.god-result-launch .result-actions { margin-top: 12px; }
.score-field { margin: 0 clamp(20px,5vw,76px) 26px; color: var(--ink); border-top: 7px solid var(--yellow); background: var(--paper); }
.score-field-heading { display: flex; gap: 24px; align-items: end; justify-content: space-between; padding: 24px 26px 18px; }.score-field-heading p { margin: 0 0 7px; color: var(--blue); font: 600 7px/1 var(--utility); letter-spacing: .08em; text-transform: uppercase; }.score-field-heading h2 { margin: 0; font: 790 clamp(26px,3vw,42px)/.9 var(--display); letter-spacing: -.05em; text-transform: uppercase; }
.score-scope-tabs { display: grid; min-width: 250px; grid-template-columns: 1fr 1fr; padding: 4px; background: #e5e3dc; }.score-scope-tabs button { display: flex; min-height: 48px; gap: 9px; align-items: center; justify-content: space-between; padding: 0 13px; cursor: pointer; color: #68665f; border: 0; background: transparent; font: 650 8px/1 var(--utility); text-transform: uppercase; }.score-scope-tabs button strong { color: var(--blue); font: 800 16px/1 var(--display); }.score-scope-tabs button[aria-selected="true"] { color: var(--blue); background: var(--yellow); box-shadow: 0 2px 8px rgba(23,63,148,.12); }.score-scope-tabs button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.score-field-summary { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 10px 26px; color: #76746d; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(23,63,148,.03); font: 600 7px/1.3 var(--utility); text-transform: uppercase; }.score-field-summary strong { color: var(--blue); white-space: nowrap; }
.score-field-body { display: grid; grid-template-columns: minmax(360px,1.25fr) minmax(260px,.75fr); }.score-bars { display: grid; gap: 8px; padding: 22px 26px 24px; border-right: 1px solid var(--line); }.score-band { display: grid; grid-template-columns: 62px minmax(0,1fr) 30px; gap: 10px; align-items: center; min-height: 20px; }.score-band > b,.score-band > strong { color: #77756f; font: 600 8px/1 var(--utility); }.score-band > strong { text-align: right; }.score-band > i { position: relative; display: block; height: 12px; background: #e5e3dc; }.score-band > i em { display: block; height: 100%; min-width: 0; background: #8c98b8; }.score-band.player-band > b,.score-band.player-band > strong { color: var(--blue); }.score-band.player-band > i { outline: 2px solid var(--blue); outline-offset: 2px; }.score-band.player-band > i em { background: var(--yellow); }.score-band mark { position: absolute; top: 50%; right: 7px; padding: 2px 4px; color: white; background: var(--blue); font: 600 6px/1 var(--utility); transform: translateY(-50%); }
.score-verdict { display: flex; flex-direction: column; justify-content: center; padding: 26px; background: rgba(23,63,148,.045); }.score-verdict > strong { max-width: 390px; color: var(--blue); font: 760 clamp(22px,2.4vw,34px)/.95 var(--display); letter-spacing: -.035em; text-transform: uppercase; }.score-verdict > span { max-width: 390px; margin-top: 12px; color: #5e5c56; font-size: 11px; line-height: 1.55; }.score-verdict small { margin-top: 26px; color: #8b8981; font: 600 7px/1.5 var(--utility); text-transform: uppercase; }
.lifetime-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 20px; background: var(--line); border: 1px solid var(--line); }.lifetime-strip span { display: grid; gap: 4px; padding: 10px; color: #77756f; background: var(--paper); font: 600 7px/1.2 var(--utility); text-transform: uppercase; }.lifetime-strip b { color: var(--blue); font: 800 18px/1 var(--display); }
.score-field-loading,.score-field-empty { display: flex; min-height: 90px; gap: 12px; align-items: center; padding: 22px 26px; color: #66645e; font: 600 9px/1 var(--utility); }.score-field-loading > span { width: 14px; height: 14px; border: 2px solid #c9c6bc; border-top-color: var(--blue); border-radius: 50%; animation: orbit-spin .7s linear infinite; }.score-field-empty { display: grid; gap: 5px; }.score-field-empty p { margin: 0; color: var(--blue); font-weight: 700; }.score-field-empty span { font-weight: 500; }
.answer-receipt { margin: 0 clamp(20px, 5vw, 76px); color: var(--ink); background: var(--paper); }.receipt-heading { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px; border-bottom: 1px dashed var(--line); font: 600 8px/1 var(--utility); text-transform: uppercase; }
.result-row { display: grid; grid-template-columns: 48px 90px minmax(190px,1.1fr) minmax(160px,.8fr) auto; gap: 18px; align-items: center; padding: 14px 20px; border-bottom: 1px dashed var(--line); }.result-row:last-child { border-bottom: 0; }.result-number { color: #8b8981; font: 600 10px/1 var(--utility); }.result-row img { width: 90px; height: 70px; object-fit: cover; }.result-answer, .result-product { display: grid; gap: 4px; }.result-answer span { color: var(--blue); font: 600 7px/1 var(--utility); text-transform: uppercase; }.result-answer strong { font: 730 16px/1.1 var(--display); text-transform: uppercase; }.result-answer small, .result-product small { color: #7b7972; font-size: 9px; }.result-product span { font: 700 10px/1 var(--utility); }.result-row > a { padding: 10px 12px; color: var(--blue); background: var(--yellow); font: 700 9px/1 var(--display); text-decoration: none; text-transform: uppercase; white-space: nowrap; }.result-row > a:hover { background: #ffe16c; }
.results-footer { display: flex; gap: clamp(24px,4vw,64px); align-items: center; padding: 34px clamp(24px, 5vw, 76px) 48px; }.results-footer-copy { display: grid; flex: 1; gap: 5px; }.results-footer strong { color: var(--yellow); font: 740 18px/1 var(--display); text-transform: uppercase; }.results-footer-copy span { color: rgba(255,255,255,.6); font-size: 10px; }.results-footer a { color: white; font: 600 9px/1 var(--utility); white-space: nowrap; }
.results-countdown { display: grid; min-width: 238px; grid-template-columns: auto auto; gap: 5px 14px; align-items: end; padding: 13px 16px 12px; border-block: 1px solid rgba(255,255,255,.22); }.results-countdown > span,.results-countdown small { color: rgba(255,255,255,.58); font: 600 7px/1 var(--utility); letter-spacing: .08em; text-transform: uppercase; }.results-countdown time { grid-column: 1 / -1; color: var(--yellow); font: 760 27px/.9 var(--utility); letter-spacing: .09em; font-variant-numeric: tabular-nums; }.results-countdown small { justify-self: end; }
.public-legal-footer { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 28px; align-items: center; padding: 22px clamp(20px,5vw,76px); color: #d8d5ca; border-top: 1px solid rgba(255,255,255,.16); background: #101b34; }.public-legal-footer p { max-width: 1050px; margin: 0; font: 500 8px/1.7 var(--utility); }.public-legal-footer p strong { color: var(--yellow); text-transform: uppercase; }.public-legal-footer nav { display: flex; gap: 17px; }.public-legal-footer a { color: white; font: 650 8px/1 var(--utility); text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 4px; white-space: nowrap; }.public-legal-footer a:hover { color: var(--yellow); }
.creator-link { display: grid; min-height: 50px; grid-template-columns: 34px auto; gap: 10px; align-items: center; padding: 7px 11px 7px 8px; border: 1px solid rgba(255,255,255,.24); text-decoration: none; transition: border-color .18s ease, background .18s ease, transform .18s ease; }.creator-link:hover { border-color: var(--yellow); background: rgba(255,212,71,.07); transform: translateY(-2px); }.creator-mark { display: grid; width: 34px; height: 34px; place-items: center; color: var(--blue); background: var(--yellow); font: 850 10px/1 var(--display); transform: rotate(-2deg); }.creator-link > span:last-child { display: grid; gap: 5px; }.creator-link small { color: rgba(255,255,255,.5); font: 600 6px/1 var(--utility); letter-spacing: .05em; text-transform: uppercase; }.creator-link strong { color: white; font: 720 8px/1 var(--display); letter-spacing: .01em; text-transform: uppercase; }

.game-error { display: grid; min-height: 100dvh; grid-template-rows: auto 1fr; padding: 28px; background: var(--paper); }.game-error > div { display: grid; max-width: 620px; place-self: center; }.game-error div > span { color: var(--coral); font: 600 9px/1 var(--utility); text-transform: uppercase; }.game-error h1 { margin: 18px 0; font: 820 clamp(48px, 8vw, 96px)/.86 var(--display); letter-spacing: -.07em; text-transform: uppercase; }.game-error p { color: #6f6d66; }.game-error button { width: max-content; margin-top: 18px; padding: 14px 18px; cursor: pointer; color: white; background: var(--blue); font-weight: 700; }
.game-toast { position: fixed; z-index: 30; right: 20px; bottom: 20px; max-width: min(360px, calc(100vw - 40px)); padding: 13px 16px; color: white; background: var(--ink); font-size: 12px; opacity: 0; pointer-events: none; transform: translateY(12px); transition: transform .2s, opacity .2s; }.game-toast.visible { opacity: 1; transform: translateY(0); }
.daily-rollover { position: fixed; z-index: 35; right: clamp(18px,4vw,56px); bottom: clamp(18px,4vw,48px); display: grid; width: min(720px,calc(100vw - 36px)); grid-template-columns: 92px minmax(0,1fr) auto; gap: 22px; align-items: center; padding: 14px 14px 14px 18px; color: white; border: 1px solid rgba(255,255,255,.34); background: var(--blue); box-shadow: 0 24px 70px rgba(7,24,61,.38); }
.rollover-ticket { display: grid; min-height: 86px; grid-template-columns: 1fr auto; align-content: center; padding: 12px; color: var(--blue); background: var(--yellow); transform: rotate(-2deg); }.rollover-ticket span,.rollover-ticket small { grid-column: 1 / -1; font: 600 7px/1 var(--utility); letter-spacing: .06em; text-transform: uppercase; }.rollover-ticket strong { margin-top: 5px; font: 850 31px/.85 var(--display); letter-spacing: -.07em; }.rollover-ticket small { margin-top: 5px; }
.daily-rollover > div:nth-child(2) { display: grid; gap: 7px; }.daily-rollover p { margin: 0; color: var(--yellow); font: 600 7px/1 var(--utility); letter-spacing: .07em; text-transform: uppercase; }.daily-rollover h2 { margin: 0; font: 780 clamp(24px,3vw,38px)/.9 var(--display); letter-spacing: -.045em; text-transform: uppercase; }.daily-rollover > div:nth-child(2) > span { color: rgba(255,255,255,.68); font-size: 10px; line-height: 1.45; }
.daily-rollover button { display: inline-flex; min-height: 58px; gap: 18px; align-items: center; padding: 0 18px; cursor: pointer; color: var(--ink); background: white; font: 720 10px/1 var(--display); text-transform: uppercase; white-space: nowrap; }.daily-rollover button:hover { background: var(--yellow); }.daily-rollover button i { color: var(--blue); font-style: normal; }
.daily-rollover button:disabled { opacity: .72; cursor: wait; }

@media (max-width: 960px) {
  .intro-hero { grid-template-columns: 1fr; }.intro-photo { position: absolute; inset: 0; opacity: .32; clip-path: none; }.intro-copy { min-height: 100dvh; padding: 118px 28px 64px; }.intro-copy h1 { font-size: clamp(54px, 12vw, 94px); }.intro-deck { max-width: 560px; }.intro-nav { padding: 22px 24px; }.intro-origin-footer { grid-template-columns: 1fr; }.intro-origin-footer > div:last-child { padding-top: 24px; padding-left: 0; border-top: 1px solid rgba(23,63,148,.3); border-left: 0; }
  .question-screen { grid-template: 74px minmax(40vh, 52vh) auto / 1fr; }.game-nav { grid-row: 1; padding: 0 18px; }.photo-panel { grid-row: 2; padding: 12px; }.photo-frame { min-height: 0; }.answer-panel { grid-row: 3; padding: 34px 22px 48px; }.progress-punch { width: 38px; }.running-score span, .running-score small, .brand-words { display: none; }.photo-label { bottom: 22px; left: 24px; }
  .results-hero { grid-template-columns: 1fr; justify-items: center; }.score-orbit { width: min(78vw, 360px); }.results-copy { text-align: center; }.results-copy > .score-copy { margin-inline: auto; }.result-row { grid-template-columns: 38px 76px 1fr auto; }.result-row img { width: 76px; }.result-number, .result-row img { grid-row: 1 / span 2; }.result-answer, .result-product { grid-column: 3; }.result-row > a { grid-column: 4; grid-row: 1 / span 2; }
  .score-field-body { grid-template-columns: 1fr; }.score-bars { border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 620px) {
  .reviewer-link { display: none; }.intro-hero { overflow: visible; }.intro-photo { position: relative; inset: auto; min-height: 0; grid-row: 1; aspect-ratio: 1; opacity: 1; }.intro-copy { min-height: 0; grid-row: 2; padding: 54px 20px 48px; }.rules-heading p { position: static; margin-top: 7px; }.rules-list li { grid-template-columns: 32px 1fr; }.rules-list li span { grid-column: 2; margin-top: -5px; }.rules-points div { grid-template-columns: 1fr; gap: 3px; }.rules-points span { font-size: 7px; }.intro-index { display: none; }.god-launchpad { grid-template-columns: 1fr; }.god-launchpad .god-entry { border-top: 1px solid rgba(255,255,255,.2); border-left: 0; }
  .game-nav { grid-template-columns: auto 1fr auto; gap: 8px; padding-inline: 10px; }.brand-block { width: 36px; height: 36px; }.question-progress { justify-content: center; }.progress-punch { width: 26px; height: 30px; }.running-score strong { font-size: 19px; }.game-nav-tools { gap: 6px; }.game-nav-tools .sound-toggle { width: 32px; min-height: 32px; padding: 0; }.game-nav-tools .sound-toggle span, .intro-nav-actions .sound-toggle span, .results-nav-actions .sound-toggle span { display: none; }.currency-picker { min-height: 32px; }.currency-picker > span { display: none; }.currency-picker select { width: 69px; padding-left: 6px; font-size: 7px; }.results-nav-actions > span { display: none; }
  .hint-heading { align-items: start; flex-direction: column; gap: 5px; }.hint-rack { grid-template-columns: 1fr; }.answer-panel h1 { font-size: 42px; }.answer-option { min-height: 55px; }.look-twice { width: 52px; height: 52px; font-size: 10px; }
  .results-nav { height: 72px; }.results-hero { padding-top: 44px; }.results-copy h1 { font-size: 48px; }.result-actions { align-items: stretch; flex-direction: column; }.result-actions > button { justify-content: center; }.answer-receipt { margin-inline: 12px; }.result-row { grid-template-columns: 30px 62px 1fr; gap: 8px 10px; padding: 11px 12px; }.result-row img { width: 62px; height: 58px; }.result-number, .result-row img { grid-row: 1; }.result-answer, .result-product, .result-row > a { grid-column: 3; }.result-product { margin-top: 2px; }.result-row > a { grid-row: auto; width: max-content; margin-top: 4px; }.result-answer strong { font-size: 13px; }.results-footer { align-items: start; flex-direction: column; gap: 22px; }.results-countdown { width: min(100%,290px); }
  .score-field { margin-inline: 12px; }.score-field-heading { align-items: start; flex-direction: column; gap: 16px; padding: 20px; }.score-scope-tabs { width: 100%; min-width: 0; }.score-field-summary { align-items: start; padding-inline: 20px; }.score-bars,.score-verdict { padding: 20px; }.score-band { grid-template-columns: 54px minmax(0,1fr) 24px; gap: 7px; }
  .daily-rollover { grid-template-columns: 70px 1fr; gap: 14px; padding: 12px; }.rollover-ticket { min-height: 72px; }.daily-rollover h2 { font-size: 24px; }.daily-rollover button { grid-column: 1 / -1; justify-content: space-between; }
  .public-legal-footer { grid-template-columns: 1fr; gap: 16px; padding-block: 24px; }.public-legal-footer nav { align-items: flex-start; flex-direction: column; gap: 12px; }.creator-link { width: max-content; max-width: 100%; }
}

@media (max-width: 360px) {
  .game-nav-tools .sound-toggle { display: none; }
  .progress-punch { width: 24px; }
}

@media (hover: hover) and (pointer: fine) {
  .magnetic { will-change: transform; }
}

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