@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#e9eced;background:#11191f}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 40%,#21303944,transparent 65%)}button,select{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #f4d669;outline-offset:4px}header{max-width:1400px;margin:auto;padding:28px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff0d}.brand{font-family:'Space Grotesk';font-size:20px;font-weight:700;letter-spacing:1px;text-decoration:none;color:#edf0e9}.brand>span{font-size:32px;color:#f4d669;vertical-align:middle;margin-right:7px}.brand small{display:block;color:#7c8d95;letter-spacing:3px;font-size:8px;margin-left:44px}.top-right{font-size:9px;letter-spacing:2px;color:#7e9099;display:flex;align-items:center;gap:25px}#sound{background:#1b282f;color:#afc0c6;border:1px solid #3c4a50;border-radius:20px;padding:9px 14px;font-size:9px}main{max-width:1400px;margin:auto;padding:0 5%}.intro{text-align:center;padding:34px 0 27px}.kicker,.label{font-size:8px;font-weight:700;letter-spacing:2px;color:#82969c}.kicker{color:#a5bbac}h1{font-family:'Space Grotesk';font-size:clamp(30px,3vw,43px);line-height:1.12;letter-spacing:-1.8px;margin:13px 0}h1 span{color:#edcf74}.intro p{color:#86999f;font-size:12px}.layout{display:grid;grid-template-columns:200px minmax(0,650px) 180px;gap:32px;justify-content:center;align-items:start}aside{padding-top:26px}aside h2{font:500 35px/1.15 'Space Grotesk';letter-spacing:-1px;margin:17px 0 28px}.steps p{display:flex;gap:13px;font-size:11px;margin-bottom:24px;line-height:1.6}.steps b{color:#d8c883;font-size:9px;padding-top:3px}.steps small{display:block;color:#738a94;font-size:10px;margin-top:4px}.legend{display:grid;gap:14px;border-top:1px solid #ffffff10;border-bottom:1px solid #ffffff10;padding:22px 0;font-size:10px;color:#9bafb5}.legend i{display:inline-block;vertical-align:middle;margin-right:9px;border-radius:50%;background:#f6d588}.crumb{width:6px;height:6px}.power{width:12px;height:12px;box-shadow:0 0 10px #f9d68599}.note{font-size:10px;line-height:1.8;color:#728a92;padding-top:20px}.arcade{background:#19252c;border:1px solid #3b4b51;border-radius:17px;overflow:hidden;box-shadow:0 20px 60px #0004}.scoreboard{display:flex;justify-content:space-between;padding:18px 21px;background:#1c2a31;color:#758f9c;font-size:8px;letter-spacing:1.5px}.scoreboard strong{font:600 19px 'Space Grotesk';letter-spacing:1px;color:#f1d67f;display:block;margin-top:6px}.scoreboard div:nth-child(2) strong{color:#bed6d7}.scoreboard div:nth-child(3) strong{color:#e698a0}.playfield{height:620px;position:relative;background:#0d151c}canvas{display:block;width:100%;height:100%}.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:24px;background:#0a141bd9;backdrop-filter:blur(3px);overflow:auto}.overlay[hidden]{display:none}.panel{width:min(365px,100%);text-align:center}.pill{font-size:8px;letter-spacing:2px;color:#bad2c6}.mascot{font-size:85px;line-height:1.3;color:#f4d66d;text-shadow:0 0 30px #f8d46322;transform:rotate(-15deg);margin-top:15px}.panel h2{font:600 27px 'Space Grotesk';letter-spacing:-1px;margin:9px 0}.panel p{color:#94a9b1;font-size:12px;line-height:1.8}.panel label{display:block;text-align:left;color:#879fa8;font-size:8px;letter-spacing:1.6px;margin:17px 0 8px}select{width:100%;padding:11px 12px;color:#dce6df;background:#213039;border:1px solid #3d535b;border-radius:7px;font-size:11px}.primary{margin-top:18px;width:100%;border:0;border-bottom:4px solid #b59c49;border-radius:7px;padding:16px 18px;background:#f0d47a;color:#30362c;font-size:11px;font-weight:700;letter-spacing:1px}.primary span{float:right}.micro{color:#6c858e;font-size:9px;margin-top:15px}.game-bottom{padding:14px 18px;display:flex;justify-content:space-between;align-items:center;font-size:7px;letter-spacing:1px;color:#849ca5}.game-bottom button{color:#b7c9cc;border:0;background:none;font-size:8px}.right .fact{border:1px solid #34474d;background:#1b282d;border-radius:14px;padding:20px 16px;margin-top:18px}.fact>span{font-size:30px;color:#e3cc7b}.fact h3{font:500 17px 'Space Grotesk';line-height:1.3}.fact p,.key-guide p{font-size:10px;line-height:1.8;color:#819aa5}.key-guide{padding:30px 0}.arrows{margin:17px 0;text-align:center}.arrows button{background:#24343d;color:#a9c3c9;border:1px solid #455962;border-bottom:3px solid #455962;border-radius:6px;width:36px;height:36px;margin:3px;touch-action:none}.mini-stat{display:flex;align-items:center;gap:13px;padding-top:15px;border-top:1px solid #ffffff10}.mini-stat strong{font:34px 'Space Grotesk';color:#e0d093}.mini-stat span{font-size:9px;line-height:1.7;color:#7e969f}.powerbar{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);background:#e9d47c;color:#25322d;padding:9px 15px;border-radius:20px;font-size:9px;font-weight:bold;white-space:nowrap}.powerbar span{margin-left:12px}footer{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.5px;color:#59717b;border-top:1px solid #ffffff0d;padding:20px 0}details{margin:25px 0;color:#748c95;font-size:10px}details p{line-height:1.8;max-width:850px}.quiz{text-align:left;max-width:440px;width:100%}.quiz h3{font:500 23px/1.5 'Space Grotesk';color:#e5e9df;margin:17px 0}.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}.choices button{background:#20343f;border:1px solid #49616d;color:#e7e9d6;border-radius:8px;padding:16px;font-size:18px}.choices .good{background:#3b5542;border-color:#bad09c}.choices .bad{background:#593e43;border-color:#c18b8d}.hint{background:none;border:0;color:#afc8ae;text-decoration:underline;font-size:11px;margin-top:15px;padding:5px}.feedback{font-size:12px;line-height:1.8;color:#b0c2c8;margin-top:14px}.result-score{font:45px 'Space Grotesk';color:#f0d47a;margin:20px 0}@media(max-width:1100px){.layout{grid-template-columns:160px minmax(0,650px);gap:25px}.right{grid-column:2;padding-top:0;display:flex;gap:25px;align-items:center}.right>.label,.right .fact{display:none}.key-guide{display:flex;align-items:center;gap:15px;padding:0}.key-guide>.label{display:none}.key-guide p{max-width:140px}.arrows{margin:0}.mini-stat{border:0;padding:0}.playfield{height:610px}}@media(max-width:650px){main{padding:0 12px}header{padding:19px}.brand{font-size:16px}.top-right{font-size:0;gap:0}.layout{display:block}.layout>aside:first-child{display:none}.intro{padding:25px 0 18px}h1{font-size:32px}.playfield{height:min(120vw,610px);min-height:430px}.scoreboard{padding:15px}.scoreboard strong{font-size:16px}.right{display:flex;justify-content:center;gap:20px;padding-top:15px}.mini-stat{display:none}.key-guide{gap:20px}.arrows button{width:43px;height:43px}.key-guide p{font-size:10px}.overlay{padding:17px}.mascot{font-size:60px}.panel h2{font-size:24px}.quiz h3{font-size:20px}footer span{display:none}.scoreboard{font-size:7px}.kicker{font-size:7px}}

/* Phone and touchscreen ergonomics */
html{ -webkit-text-size-adjust:100%; } body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
button,a,summary{touch-action:manipulation}button{min-height:44px}select{min-height:48px;font-size:16px}button{overflow-wrap:anywhere}button:active{filter:brightness(1.12)}
@media(pointer:coarse){button{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.hint{min-height:48px}}

.arrows button:disabled{opacity:.4}.arrows button:active{background:#46616c}.arrows #touchpause{display:none}
@media(max-width:800px),(pointer:coarse){main{padding:0 12px 155px}.layout{display:block}.layout>aside:first-child{display:none}.right{display:block;padding:0}.right>.label,.right .fact,.right .mini-stat,.key-guide>.label,.key-guide p{display:none}.key-guide{padding:0}.arrows{position:fixed;bottom:0;left:0;right:0;z-index:10;padding:8px 16px calc(10px + env(safe-area-inset-bottom));margin:0;background:#17242bf7;border-top:1px solid #3e535c;box-shadow:0 -5px 20px #0004;display:grid;grid-template-columns:repeat(3,56px) 56px;grid-template-rows:52px 52px;gap:7px;justify-content:center;align-items:center}.arrows>div{display:contents}.arrows button{width:56px;height:52px;min-height:48px;margin:0;font-size:24px;touch-action:none}.arrows [data-dir="up"]{grid-column:2;grid-row:1}.arrows [data-dir="left"]{grid-column:1;grid-row:2}.arrows [data-dir="down"]{grid-column:2;grid-row:2}.arrows [data-dir="right"]{grid-column:3;grid-row:2}.arrows #touchpause{display:block;grid-column:4;grid-row:1/3;height:70px;font-size:20px;margin-left:8px}.choices button{min-height:60px;font-size:21px}.quiz h3{font-size:23px}.feedback{font-size:15px}.primary{min-height:54px;font-size:14px}.hint{min-height:48px;font-size:15px}select{font-size:16px}.panel label{font-size:10px}.micro,.pill{font-size:11px;line-height:1.5}.panel p{font-size:15px}.overlay{align-items:safe center;overscroll-behavior:contain;scroll-padding:20px}.quiz,.panel{margin:auto}.scoreboard{gap:8px}.scoreboard strong{font-size:17px}.scoreboard{font-size:8px}.game-bottom button{min-width:70px}.game-bottom{font-size:8px}.playfield{min-height:440px;height:65svh}
body[data-mode]:not([data-mode="menu"]) .intro,body[data-mode]:not([data-mode="menu"]) footer{display:none}body[data-mode]:not([data-mode="menu"]) header{padding:8px 16px;min-height:54px}body[data-mode]:not([data-mode="menu"]) .arcade{margin-top:8px}body[data-mode]:not([data-mode="menu"]) .playfield{height:calc(100svh - 310px);min-height:260px}body[data-mode]:not([data-mode="menu"]) .scoreboard{padding:11px 15px}}
@media(max-width:350px){.arrows{grid-template-columns:repeat(4,50px);gap:6px}.arrows button{width:50px}.scoreboard strong{font-size:14px}.scoreboard{font-size:7px}}
@media(max-height:520px) and (orientation:landscape){body[data-mode]:not([data-mode="menu"]) main{padding:0 240px 12px 8px}body[data-mode]:not([data-mode="menu"]) header{display:none}body[data-mode]:not([data-mode="menu"]) .playfield{height:calc(100svh - 105px);min-height:160px}.arrows{left:auto;width:230px;height:100svh;grid-template-columns:repeat(3,54px);grid-template-rows:54px 54px 54px;align-content:center;padding:8px}.arrows #touchpause{grid-column:2;grid-row:3;margin:0;height:48px}.quiz h3{font-size:18px;margin:8px 0}.choices button{min-height:48px;padding:8px}.feedback{font-size:13px}.game-bottom{padding:8px 15px}}

@media(max-width:800px),(pointer:coarse){.game-bottom{padding:0 12px;min-height:44px}body[data-mode]:not([data-mode="menu"]) .playfield{height:calc(100svh - 300px);min-height:220px}}
@media(max-height:520px) and (orientation:landscape){body[data-mode]:not([data-mode="menu"]) .playfield{height:calc(100svh - 108px);min-height:140px}}

/* K–12 grade selection */
header{position:relative;flex-wrap:wrap;gap:10px}.grade-picker{display:flex;align-items:center;gap:8px;margin:0;font-size:10px;letter-spacing:1px;flex-shrink:0;color:inherit}.grade-picker select{min-height:44px;width:142px;max-width:45vw;margin:0;padding:8px 10px;border:1px solid #73878c;border-radius:8px;font-size:16px;background:#22343d;color:#f0ecd8}.read-question{display:block;min-height:44px;margin:0 0 12px;padding:8px 12px;font-size:14px;background:transparent;border:1px solid #73878c;border-radius:8px;color:inherit}.no-speech .read-question{display:none}.quiz h3,.question{overflow-wrap:anywhere}.quiz .chip,.quiz .pill{line-height:1.7}
@media(max-width:650px){header{padding:8px 12px;min-height:68px;gap:6px}.grade-picker{font-size:8px;gap:5px}.grade-picker select{width:127px;font-size:16px}.grade-picker>span{display:none}.edition{display:none}.top-right>span{display:none}.top-right{gap:4px}.quiz h3,.question{font-size:21px}.read-question{font-size:14px}.quiz{padding-bottom:14px}}
@media(max-width:650px){header .brand{font-size:13px;letter-spacing:0}header .brand small{display:none}header .brand>span{font-size:24px;margin-right:3px}header #sound{font-size:8px;padding:8px}.top-right{order:3}.grade-picker{margin-left:auto}body[data-mode]:not([data-mode="menu"]) .playfield{height:calc(100svh - 315px)}}
@media(max-height:520px) and (orientation:landscape){body[data-mode]:not([data-mode="menu"]) header{display:flex;position:fixed;right:4px;top:4px;width:190px;background:#17242b;z-index:20;justify-content:center;padding:0;min-height:44px}body[data-mode]:not([data-mode="menu"]) header>*:not(.grade-picker){display:none}body[data-mode]:not([data-mode="menu"]) .grade-picker select{height:44px}}