/* The scenery is the interface. v2 art direction, independent of run rules. */
:root{--paper:#141b22;--ink:#f8f7ef;--muted:#a5afb4;--accent:#deff7a;--line:#354149;background:var(--paper);color:var(--ink)}
body{padding:0}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline-color:#e3ff85}
.home{max-width:820px;padding:env(safe-area-inset-top) 24px calc(18px + env(safe-area-inset-bottom))}
.home header{height:72px}.logo{font-size:20px;font-weight:900;letter-spacing:-.8px}.logo span{color:var(--accent);margin-left:7px}.icon-button{border:1px solid #ffffff24;color:inherit;background:#ffffff08;border-radius:50%}
.welcome{position:relative;isolation:isolate;min-height:202px;padding:20px 0 22px;overflow:hidden}.welcome-copy{position:relative;z-index:2}.welcome .eyebrow{font:600 9px/1.5 -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:2px;color:#9faeb5}.welcome h1{font-family:'Arial Black','Helvetica Neue',sans-serif;font-size:78px;font-weight:950;font-style:italic;line-height:.86;letter-spacing:-5px;margin:13px 0 0}.welcome h1 em{font-style:inherit;color:var(--accent)}.welcome-runner{position:absolute;height:210px;right:25px;top:-3px;z-index:3;transform:rotate(13deg);filter:drop-shadow(0 14px 9px #0005);pointer-events:none}.hero-orbit{position:absolute;right:-25px;top:35px;width:250px;height:125px;border:1px solid #deff7a45;border-radius:50%;transform:rotate(-35deg);z-index:0}.hero-orbit::after{content:'';position:absolute;inset:13px;border:1px solid #deff7a22;border-radius:50%}
.mode-switch{border:1px solid #ffffff20;background:transparent;border-radius:100px;padding:4px;gap:2px;margin-bottom:23px;width:100%}.mode-switch button{flex:1;font-size:12px;font-weight:600;min-height:36px;color:#adb8bd;padding:8px 12px}.mode-switch button[aria-pressed=true]{color:#18251d;background:var(--accent);box-shadow:none}
.worlds-heading{display:flex;justify-content:space-between;font-size:9px;font-weight:600;letter-spacing:1.5px;color:#adbac1;margin-bottom:12px}.worlds-heading span:last-child{font-variant-numeric:tabular-nums;color:#6e818b}
.worlds{gap:12px}.world-card{isolation:isolate;min-height:230px;padding:18px;border-radius:14px;background:#334850;color:white;box-shadow:0 7px 16px #0002;border:1px solid #ffffff10;transition:transform .2s}.world-art{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 43%;transition:transform .5s}.world-card::after{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(0deg,#08141bef 0%,#09192585 25%,#09192500 65%)}.world-card:hover .world-art{transform:scale(1.05)}.world-card h2{font-size:25px;letter-spacing:-.8px;font-weight:750;line-height:1.05;margin-bottom:6px}.world-card p{font-size:10px;color:#ffffffe0;letter-spacing:.2px}.world-card .arrow{right:14px;bottom:55px;border:1px solid #ffffff75;border-radius:50%;width:27px;height:27px;display:grid;place-items:center;font-size:16px}.world-card .best{top:12px;left:12px;background:#102128ad;backdrop-filter:blur(8px);padding:5px 7px;border-radius:6px;font-size:8px;letter-spacing:.6px}.world-card .best:empty{display:none}.mode-note{font-size:10px;color:#97a8b1;line-height:1.5;margin:16px 0 6px}.scores-link{width:100%;font-size:12px;letter-spacing:.2px;justify-content:space-between;border-top:1px solid #ffffff16;margin-top:8px;padding:15px 0 3px;color:#dce4e8}
.game{position:relative;isolation:isolate;max-width:640px;padding:0;height:100svh;display:block;overflow:hidden;background:#70c4d4}.track{position:absolute;inset:0;border-radius:0;min-height:0;overflow:hidden}.track::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#08232c6b 0%,#08232c00 20%,#07192400 67%,#071924c7 100%);pointer-events:none;z-index:0}.game-header{position:absolute;z-index:3;top:env(safe-area-inset-top);left:20px;right:20px;height:68px;gap:12px;color:white;text-shadow:0 1px 4px #142a3266}.game-header .icon-button{background:#132b3b55;border-color:#ffffff55;backdrop-filter:blur(12px);text-shadow:none}.game-title>span{font-size:16px;letter-spacing:-.3px;font-weight:750}.game-title small,.score small{color:#f0f7fa;font-family:inherit;font-size:8px;letter-spacing:1.2px;font-weight:600}.game .score strong{font-size:30px;font-weight:800;color:#fff;letter-spacing:-1px;line-height:1}.score{gap:3px}
.question{z-index:2;left:20px;right:20px;top:calc(78px + env(safe-area-inset-top));padding:12px 17px 11px;background:#fffdf2f2;border-radius:16px;box-shadow:0 8px 24px #092c3b20,0 2px 0 #fff8 inset;color:#1c323a;backdrop-filter:blur(12px)}.question-meta{font-size:10px;color:#586f77;font-weight:500}.question h1{font-size:34px;line-height:1.06;font-weight:800;letter-spacing:-1px;margin:9px 0}.question-content{min-height:50px}.question-content:has(#flag:not([hidden])) h1{font-size:22px}.question #flag{font-size:44px}.time-line{height:3px;background:#d7e0d5;margin-top:7px}.time-line>span{background:#315b54;border-radius:5px}.audio-row{gap:8px}.audio-row button{background:#273e47;color:#fff;min-height:44px;border-radius:100px;font-size:11px;padding:8px 12px}.audio-row small{color:#657b80;font-size:9px;line-height:1.25}
.track-bottom{z-index:1;left:23px;right:23px;bottom:calc(131px + env(safe-area-inset-bottom));background:none;padding:0;color:#fff;font:600 9px -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:1px;text-shadow:0 1px 5px #000}
.answer-area{position:absolute;z-index:3;left:18px;right:18px;bottom:calc(17px + env(safe-area-inset-bottom));padding:0}.answer-area>p{font-size:10px;color:#f0f5f5;font-weight:500;letter-spacing:.2px;margin:0 0 11px;text-shadow:0 2px 4px #102d3a}.answers{gap:10px}.answer{height:72px;border:1px solid #ffffffa6;border-bottom:4px solid #bcc7ba;background:#fffef5f5;color:#203942;border-radius:16px;font-weight:800;font-size:23px;box-shadow:0 5px 16px #0c293b26;backdrop-filter:blur(12px);transition:transform .12s,background .12s}.answer.long{font-size:14px;letter-spacing:-.2px}.answer:active{transform:translateY(2px)}.answer[aria-pressed=true]{color:#253a29;background:#deff7a;border-color:#ecffae;border-bottom-color:#8da84f;box-shadow:0 0 20px #d8ff7055;transform:translateY(-3px)}.answer.correct{color:#143d30;background:#a2ffd0;border-color:#75d8a7}.answer.wrong{color:white;background:#e66248;border-color:#bd4a36}.answer:disabled{opacity:.8}.feedback{z-index:3;top:47%}.feedback span{background:#e4ff92;color:#223d27;padding:11px 19px;font-size:20px;font-weight:850;box-shadow:0 4px 0 #46623450}.feedback.bad span{background:#dc523a;color:#fff}
.sheet{background:#f7f6ee;color:#20363c;--paper:#f7f6ee;--ink:#20363c;--muted:#647477;--accent:#315b4e;--line:#d5ded6;border-radius:24px}.sheet .eyebrow{color:#647477}.sheet .icon-button{border-color:#cad5cf;background:transparent}.sheet .mode-switch{border-color:#cbd5ce;background:#e6ebe1}.sheet .mode-switch button{color:#53695e}.sheet .mode-switch button[aria-pressed=true]{background:#315b4e;color:white}.sheet h2{font-weight:750}.sheet::backdrop{background:#07191caf;backdrop-filter:blur(10px)}#toast{background:#e6ffad;color:#1c3829}
html[data-world=music] .question h1,html[data-world=chemistry] .question h1{font-size:25px;letter-spacing:-.7px;line-height:1.12}
.audio-cues{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:2px 0 9px}.audio-cues>span{display:flex;align-items:center;gap:6px;min-height:34px;padding:6px 8px;border-radius:9px;background:#e3e9df;color:#526a6b;font-size:11px;line-height:1.15;border:1px solid transparent}.audio-cues b{display:grid;place-items:center;flex-shrink:0;width:19px;height:19px;border-radius:50%;background:#ffffffa0;font-size:10px;color:#31584f}.audio-cues>span.sounding{background:#deff7a;border-color:#789343;color:#253c29;font-weight:700}.audio-cues>span.sounding b{background:#315b4e;color:#fff}
.result-review{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}.result-review>div{padding:13px 10px;border-radius:13px;text-align:center;min-width:0}.result-review .review-wrong{background:#ffe4db;color:#923c2c}.result-review .review-correct{background:#d5f5d4;color:#235c35}.result-review small{color:inherit;font-size:10px;margin-bottom:6px}.result-review strong{display:block;font-size:23px;line-height:1.15;overflow-wrap:anywhere;letter-spacing:-.5px}
@media(min-width:600px) and (min-height:481px){.home{padding-left:40px;padding-right:40px}.welcome{min-height:235px}.welcome h1{font-size:100px}.welcome-runner{height:270px;right:100px;top:-5px}.hero-orbit{right:30px;width:400px;height:180px}.world-card{min-height:260px}.world-card h2{font-size:29px}.world-card p{font-size:12px}.game{box-shadow:0 0 100px #0007}}
@media(max-width:560px){.home{padding-left:20px;padding-right:20px}.home header{height:64px}.welcome{min-height:192px;padding-top:17px;padding-bottom:20px}.welcome h1{font-size:67px;letter-spacing:-4px}.welcome-runner{height:183px;right:12px;top:2px}.hero-orbit{right:-45px;top:32px;width:238px;height:130px}.welcome .eyebrow{font-size:8px;letter-spacing:1.5px}.world-card{min-height:192px;padding:16px}.world-card h2{font-size:23px}.world-card p{font-size:9px}.world-card .arrow{bottom:53px}.mode-switch{margin-bottom:19px}.game-header{height:66px}.track{border-radius:0}.answer-area{padding:0}.answer-area p{font-size:10px;margin-bottom:11px}.answer{height:72px}.question h1{font-size:32px}}
@media(max-height:700px) and (max-width:560px){.home header{height:58px}.welcome{min-height:154px;padding:10px 0 15px}.welcome .eyebrow{display:block;font-size:7px}.welcome h1{font-size:55px;margin-top:10px;letter-spacing:-3px}.welcome-runner{height:152px;right:5px;top:-4px}.hero-orbit{width:170px;height:100px;right:-14px;top:18px}.mode-switch{margin-bottom:15px}.world-card{min-height:166px}.world-card h2{font-size:20px}.world-card p{font-size:8px}.game-header{height:56px;left:14px;right:14px}.question{top:calc(61px + env(safe-area-inset-top));left:14px;right:14px;padding:10px 13px}.question h1{font-size:27px;margin:7px 0}.question-content{min-height:38px}.question-content:has(#flag:not([hidden])) h1{font-size:18px}.question #flag{font-size:34px}.game-title>span{font-size:15px}.game .score strong{font-size:25px}.answer-area{left:14px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom))}.answer{height:62px;border-radius:13px;font-size:22px}.answer.long{font-size:12px}.track-bottom{bottom:calc(114px + env(safe-area-inset-bottom));left:18px;right:18px;font-size:8px}.track{min-height:0}.audio-row button{min-height:44px}.audio-row small{font-size:8px}}
@media(max-height:480px) and (min-width:600px){.game{display:block;max-width:100%;padding:0}.track{inset:0 250px 0 0;margin:0}.game-header{left:auto;right:20px;width:210px;height:62px;top:0;grid-column:auto}.game-header .game-title{margin-right:0}.game{background:#141b22}.answer-area{left:auto;right:20px;width:210px;bottom:18px;display:block}.answer-area p{font-size:10px}.answers{grid-template-columns:1fr;gap:8px}.answer{height:64px}.question{top:14px;left:14px;right:14px;max-width:350px;padding:9px 14px}.question h1{font-size:24px;margin:6px 0}.question-content{min-height:34px}.track-bottom{bottom:14px}.audio-row button{min-height:44px}.game-title>span{font-size:14px}.game .score strong{font-size:25px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Short presentation-only motion; fixed-step rules and input stay immediate. */
:root{--motion-press:100ms;--motion-enter:240ms;--motion-ease:cubic-bezier(.16,1,.3,1)}
.answer{transition:transform var(--motion-press) ease-out,background-color var(--motion-press) ease-out,box-shadow var(--motion-press) ease-out}
.answer[aria-pressed=true]{transform:translateY(-3px)}
.answer:active:not(:disabled){transform:translateY(-1px) scale(.97)}
.answer.correct{animation:answer-settle var(--motion-enter) var(--motion-ease)}
dialog[open]{animation:runner-sheet var(--motion-enter) var(--motion-ease)}
@keyframes answer-settle{0%{transform:scale(.97)}60%{transform:scale(1.035)}100%{transform:scale(1)}}
@keyframes runner-sheet{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
[data-reduced=true] *,[data-reduced=true] *::before,[data-reduced=true] *::after{animation:none!important;transition:none!important}
[data-reduced=true] .answer{transform:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.answer{transform:none!important}}