@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500;600&family=Nunito:wght@500;700;800;900&display=swap');

:root { --navy:#101633; --navy-2:#151d43; --ink:#202750; --purple:#7355e8; --violet:#a272ff; --cyan:#5dd8f4; --yellow:#ffd95a; --mint:#82e8c0; --pink:#f379a7; --white:#fffdf7; --muted:#aab2d7; --red:#ff778e; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--white); background:var(--navy); font-family:'Nunito', system-ui, sans-serif; }
body::before, body::after { content:""; position:fixed; inset:0; pointer-events:none; z-index:-2; }
body::before { background:radial-gradient(circle at 8% 14%, rgba(90,86,218,.25), transparent 24%), radial-gradient(circle at 92% 80%, rgba(66,201,225,.14), transparent 25%); }
body::after { opacity:.5; background-image:radial-gradient(#727ac0 1px, transparent 1px), radial-gradient(#727ac0 1px, transparent 1px); background-size:73px 73px, 113px 113px; background-position:5px 22px, 31px 67px; }
button, input { font:inherit; }
button { cursor:pointer; }
.page-shell { width:min(1180px, calc(100% - 48px)); margin:0 auto; min-height:100vh; display:flex; flex-direction:column; }
.topbar { height:96px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(172,179,240,.17); }
.brand { display:flex; align-items:center; gap:12px; color:var(--white); text-decoration:none; font-size:18px; font-weight:900; letter-spacing:1.1px; }
.brand strong { color:var(--cyan); }
.brand-mark { width:27px; height:27px; position:relative; display:block; background:var(--yellow); box-shadow:5px 5px 0 var(--pink), -5px -5px 0 var(--cyan); transform:rotate(12deg); }
.brand-mark i,.brand-mark b,.brand-mark em { position:absolute; display:block; background:var(--navy); width:6px; height:6px; }
.brand-mark i { left:7px; top:7px; }.brand-mark b { right:7px; bottom:7px; }.brand-mark em { left:11px; top:11px; background:var(--pink); }
.topbar-status { color:var(--muted); font:600 11px 'DM Mono', monospace; letter-spacing:1.6px; display:flex; align-items:center; gap:9px; }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 14px var(--mint); }
main { flex:1; display:flex; flex-direction:column; justify-content:center; padding:45px 0 35px; }
.intro-panel, .game-panel, .results-panel { animation:rise .45s ease both; }
@keyframes rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.intro-panel { display:grid; grid-template-columns:1fr 1fr; min-height:590px; background:linear-gradient(115deg, rgba(24,31,73,.96), rgba(19,25,59,.94)); border:1px solid rgba(172,179,240,.2); box-shadow:0 20px 70px rgba(0,0,0,.18); overflow:hidden; position:relative; }
.intro-panel::before { content:""; position:absolute; inset:auto 0 0; height:7px; background:linear-gradient(90deg,var(--pink),var(--yellow),var(--cyan),var(--purple)); }
.intro-copy { padding:75px 50px 64px 72px; align-self:center; z-index:2; }
.eyebrow { color:var(--yellow); font:600 11px 'DM Mono', monospace; letter-spacing:2.4px; }
.eyebrow-spark { color:var(--cyan); margin-right:6px; }
h1,h2,h3,p { margin:0; }
h1 { font-size:clamp(42px, 5vw, 70px); line-height:.99; letter-spacing:-2px; margin:23px 0 22px; font-weight:900; }
h1 span, h2 span { color:var(--cyan); }
.intro-text { color:var(--muted); font-size:16px; line-height:1.6; max-width:390px; }
.intro-perks { display:flex; gap:22px; margin:34px 0 38px; }
.perk { display:flex; gap:10px; align-items:center; }.perk > span { font-size:20px; color:var(--yellow); }.perk:nth-child(2) > span { color:var(--pink); }
.perk b,.perk small { display:block; }.perk b { font:600 10px 'DM Mono',monospace; letter-spacing:1px; color:var(--white); }.perk small { color:var(--muted); font-size:11px; margin-top:4px; }
.primary-button { border:0; background:var(--yellow); color:var(--ink); padding:17px 17px 17px 21px; font:900 13px 'DM Mono',monospace; letter-spacing:1px; display:inline-flex; align-items:center; gap:29px; box-shadow:5px 5px 0 var(--pink); transition:.15s; }.primary-button:hover { transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--pink); }.primary-button b { font-size:19px; line-height:0; }
.operation-settings { margin:0 0 27px; max-width:460px; }.settings-heading { display:flex; align-items:baseline; justify-content:space-between; color:var(--yellow); font:600 10px 'DM Mono',monospace; letter-spacing:1.2px; margin-bottom:10px; }.settings-heading small { color:var(--muted); font:10px 'DM Mono',monospace; letter-spacing:0; }.operation-options { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }.operation-option { position:relative; min-height:66px; padding:8px 5px 7px; background:#202957; border:1px solid rgba(172,179,240,.24); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; cursor:pointer; transition:.15s; }.operation-option:hover { border-color:var(--cyan); transform:translateY(-2px); }.operation-option input { position:absolute; opacity:0; inset:0; cursor:pointer; }.operation-symbol { color:var(--cyan); font:800 22px 'DM Mono',monospace; line-height:1; }.operation-option:nth-child(2) .operation-symbol { color:var(--pink); }.operation-option:nth-child(3) .operation-symbol { color:var(--mint); }.operation-option:nth-child(4) .operation-symbol { color:var(--yellow); }.operation-name { color:var(--white); font:600 8px 'DM Mono',monospace; letter-spacing:.3px; }.operation-option:has(input:not(:checked)) { opacity:.4; background:transparent; }.operation-option:has(input:checked) { border-color:rgba(93,216,244,.55); box-shadow:inset 0 -3px 0 var(--cyan); }.operation-error { min-height:14px; margin:7px 0 0; color:var(--red); font:10px 'DM Mono',monospace; }
.table-settings { margin:0 0 28px; max-width:460px; }.table-options { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }.table-option { position:relative; min-height:30px; display:grid; place-items:center; background:#202957; border:1px solid rgba(172,179,240,.24); cursor:pointer; transition:.15s; }.table-option:hover { border-color:var(--cyan); transform:translateY(-2px); }.table-option input { position:absolute; opacity:0; inset:0; cursor:pointer; }.table-option span { color:var(--white); font:700 12px 'DM Mono',monospace; }.table-option:has(input:not(:checked)) { opacity:.38; background:transparent; }.table-option:has(input:checked) { border-color:rgba(255,217,90,.65); box-shadow:inset 0 -3px 0 var(--yellow); }.table-error { min-height:14px; margin:7px 0 0; color:var(--red); font:10px 'DM Mono',monospace; }
.hero-art-wrap { min-height:590px; position:relative; background:radial-gradient(ellipse at center, rgba(102,78,219,.32), transparent 60%); overflow:hidden; }.hero-art { position:absolute; z-index:2; width:min(75%, 460px); max-height:92%; object-fit:contain; left:50%; top:52%; transform:translate(-44%,-50%); image-rendering:auto; }
.orbit { position:absolute; border:1px solid rgba(115,213,247,.38); border-radius:50%; transform:rotate(-25deg); }.orbit-one { width:540px; height:210px; left:50%; top:34%; }.orbit-two { width:430px; height:160px; left:5%; top:50%; border-color:rgba(255,217,90,.26); }.planet { position:absolute; border-radius:50%; }.planet-one { width:12px; height:12px; background:var(--cyan); top:23%; right:22%; box-shadow:0 0 18px var(--cyan); }.pixel-star { position:absolute; color:var(--yellow); font-size:23px; z-index:3; }.star-one { top:16%; left:18%; color:var(--pink); }.star-two { bottom:18%; right:14%; color:var(--cyan); font-size:16px; }.art-caption { position:absolute; bottom:28px; right:33px; color:var(--muted); font:10px 'DM Mono',monospace; letter-spacing:1px; z-index:4; }.caption-pixel { display:inline-block; width:7px; height:7px; background:var(--mint); margin-right:7px; }
.game-panel,.results-panel { background:rgba(20,27,62,.96); border:1px solid rgba(172,179,240,.2); padding:44px 55px 45px; box-shadow:0 20px 70px rgba(0,0,0,.17); position:relative; }.game-panel::before,.results-panel::before { content:""; position:absolute; top:0; left:0; right:0; height:5px; background:linear-gradient(90deg,var(--cyan),var(--purple),var(--pink)); }
.game-topline,.results-heading { display:flex; justify-content:space-between; align-items:flex-start; }.game-topline h2,.results-heading h2 { margin-top:11px; font-size:29px; letter-spacing:-.5px; }.game-stats { display:flex; gap:12px; }.mini-stat { background:#202957; min-width:108px; padding:12px 15px; border-left:3px solid var(--cyan); }.mini-stat.streak-stat { border-color:var(--pink); }.mini-stat span { display:block; color:var(--muted); font:10px 'DM Mono',monospace; letter-spacing:1px; }.mini-stat strong { display:block; margin-top:5px; color:var(--white); font:800 22px 'DM Mono',monospace; }.mini-stat i { font-style:normal; font-size:12px; color:var(--pink); }
.timer-row { display:flex; align-items:center; gap:18px; margin:36px 0 35px; }.timer-track { height:9px; flex:1; background:#2a3262; overflow:hidden; }.timer-fill { width:100%; height:100%; background:linear-gradient(90deg,var(--mint),var(--yellow)); transform-origin:left; transition:width .1s linear; }.timer-readout { display:flex; align-items:baseline; gap:6px; font-family:'DM Mono',monospace; }.timer-icon { color:var(--yellow); font-size:20px; }.timer-readout strong { font-size:20px; }.timer-readout > span:last-child { color:var(--muted); font-size:10px; }
.challenge-grid { display:grid; grid-template-columns:minmax(0, 1fr) 245px; gap:35px; }.question-card { background:var(--white); color:var(--ink); padding:39px 50px 33px; text-align:center; }.question-label { color:#7c82a4; font:600 11px 'DM Mono',monospace; letter-spacing:2px; }.question { font:900 clamp(45px,7vw,70px) 'DM Mono',monospace; margin:20px 0 21px; color:var(--ink); letter-spacing:-3px; }.question span { color:var(--purple); }.feedback { min-height:23px; color:var(--purple); font-weight:800; font-size:14px; }.feedback.good { color:#2ca980; }.feedback.bad { color:#e3617e; }.question-card.flash-good { animation:goodFlash .45s ease; }.question-card.flash-bad { animation:badFlash .45s ease; } @keyframes goodFlash { 30% { box-shadow:inset 0 0 0 4px rgba(44,169,128,.3); } } @keyframes badFlash { 30% { box-shadow:inset 0 0 0 4px rgba(227,97,126,.3); } }
.answer-form { max-width:275px; margin:10px auto 16px; text-align:left; }.answer-form label { color:#8288a8; font:600 10px 'DM Mono',monospace; letter-spacing:1.3px; }.answer-input-row { display:flex; border-bottom:3px solid var(--purple); margin-top:5px; }.answer-input-row input { width:100%; border:0; padding:11px 2px; background:transparent; color:var(--ink); font:800 25px 'DM Mono',monospace; outline:0; text-align:center; }.submit-button { background:var(--purple); color:white; border:0; width:46px; font-size:22px; }.keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; max-width:275px; margin:0 auto; }.keypad button { border:0; background:#edf0ff; color:var(--ink); padding:10px; font:700 15px 'DM Mono',monospace; }.keypad button:hover { background:#d9deff; }.keypad .key-muted { color:#7d84a7; background:#f3f4fa; }.keyboard-hint { color:#9ba3c3; margin-top:16px; font:10px 'DM Mono',monospace; }.keyboard-hint kbd { background:#e4e8fb; color:#697091; padding:3px 5px; font:inherit; }
.mission-side { display:flex; flex-direction:column; gap:18px; }.mission-card { background:#202957; padding:23px 22px; border-top:3px solid var(--yellow); }.mission-card-head { display:flex; align-items:center; gap:9px; color:var(--white); font:600 11px 'DM Mono',monospace; letter-spacing:1.2px; }.mission-icon { color:var(--yellow); font-size:18px; }.mission-card ul { list-style:none; margin:19px 0 0; padding:0; }.mission-card li { color:var(--muted); font-size:12px; line-height:1.4; padding:9px 0 9px 16px; border-top:1px solid rgba(172,179,240,.12); position:relative; }.mission-card li::before { content:"›"; color:var(--cyan); position:absolute; left:0; font-weight:bold; }.side-mascot { background:linear-gradient(145deg,#2a3068,#202755); min-height:172px; position:relative; overflow:hidden; }.side-mascot img { position:absolute; width:205px; right:-16px; bottom:-57px; }.side-mascot span { position:absolute; left:19px; top:24px; color:var(--yellow); font:900 13px 'DM Mono',monospace; transform:rotate(-8deg); }
.results-heading h2 { font-size:36px; }.results-heading p { color:var(--muted); margin-top:10px; font-size:14px; }.result-badge { width:105px; height:105px; background:var(--yellow); color:var(--ink); display:flex; flex-direction:column; justify-content:center; align-items:center; transform:rotate(3deg); box-shadow:6px 6px 0 var(--pink); }.result-badge span { font:900 32px 'DM Mono',monospace; }.result-badge small { font:600 9px 'DM Mono',monospace; letter-spacing:1px; }
.result-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:36px 0 35px; }.result-stats > div { background:#202957; padding:17px; display:grid; grid-template-columns:31px 1fr; column-gap:10px; align-items:center; }.result-stat-icon { width:27px; height:27px; display:grid; place-items:center; border-radius:50%; font:800 17px 'DM Mono',monospace; grid-row:span 2; }.result-stat-icon.correct { color:var(--mint); background:rgba(130,232,192,.14); }.result-stat-icon.wrong { color:var(--red); background:rgba(255,119,142,.14); }.result-stat-icon.accuracy { color:var(--cyan); background:rgba(93,216,244,.14); }.result-stat-icon.best { color:var(--yellow); background:rgba(255,217,90,.14); }.result-stats b { font:700 19px 'DM Mono',monospace; }.result-stats small { color:var(--muted); font:10px 'DM Mono',monospace; margin-top:2px; }
.review-head { border-bottom:1px solid rgba(172,179,240,.2); padding-bottom:12px; display:flex; justify-content:space-between; align-items:center; }.review-head h3 { font:600 11px 'DM Mono',monospace; letter-spacing:2px; color:var(--yellow); }.review-head span { color:var(--muted); font:10px 'DM Mono',monospace; }.review-list { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-height:205px; overflow:auto; padding:14px 3px 5px 0; }.review-item { background:#202957; padding:11px 13px; display:flex; justify-content:space-between; align-items:center; border-left:3px solid var(--mint); }.review-item.bad { border-color:var(--red); }.review-equation { font:600 12px 'DM Mono',monospace; }.review-equation small { color:var(--muted); display:block; font:10px 'DM Mono',monospace; margin-top:4px; }.review-mark { color:var(--mint); font-size:18px; }.review-item.bad .review-mark { color:var(--red); }.replay-button { margin-top:28px; }
footer { padding:10px 0 24px; text-align:center; color:#747da9; font:10px 'DM Mono',monospace; letter-spacing:1.5px; }.footer-pixel { display:inline-block; width:5px; height:5px; background:var(--purple); margin:0 8px 1px; }.hidden { display:none; }
@media (max-width:800px) { .page-shell { width:min(100% - 28px, 600px); }.topbar { height:76px; }.topbar-status { font-size:9px; }.intro-panel { grid-template-columns:1fr; }.intro-copy { padding:46px 32px 28px; }.hero-art-wrap { min-height:320px; }.hero-art { width:300px; top:52%; }.art-caption { right:18px; bottom:15px; font-size:8px; }.game-panel,.results-panel { padding:34px 24px; }.challenge-grid { grid-template-columns:1fr; }.mission-side { display:grid; grid-template-columns:1fr 1fr; }.side-mascot { min-height:190px; }.game-topline h2 { font-size:23px; }.game-stats { gap:6px; }.mini-stat { min-width:84px; padding:10px; }.mini-stat strong { font-size:16px; }.result-stats { grid-template-columns:repeat(2,1fr); }.review-list { grid-template-columns:repeat(2,1fr); } }
@media (max-width:500px) { .page-shell { width:calc(100% - 20px); }.brand { font-size:14px; }.topbar-status { display:none; }.intro-copy { padding:40px 23px 28px; }.intro-perks { flex-direction:column; gap:12px; margin:25px 0 30px; }.hero-art-wrap { min-height:285px; }.hero-art { width:285px; }.game-panel,.results-panel { padding:29px 14px 32px; }.game-topline { display:block; }.game-stats { margin-top:18px; }.timer-row { gap:10px; }.question-card { padding:30px 15px 24px; }.mission-side { grid-template-columns:1fr; }.side-mascot { display:none; }.results-heading { gap:15px; }.results-heading h2 { font-size:27px; }.result-badge { flex:0 0 85px; width:85px; height:85px; }.result-badge span { font-size:24px; }.result-stats { gap:7px; }.result-stats > div { padding:12px 9px; }.review-list { grid-template-columns:1fr; } }

/* The answer area is intentionally built like a large, touch-first calculator. */
.calculator-device { max-width:390px; margin:10px auto 0; padding:17px 18px 16px; background:#202957; border:4px solid #303a73; box-shadow:7px 7px 0 #d4d9f1; text-align:left; }
.calculator-topline { display:flex; justify-content:space-between; align-items:center; color:#93a0d6; font:600 9px 'DM Mono',monospace; letter-spacing:1px; margin-bottom:14px; }
.calc-lights { display:flex; gap:5px; }.calc-lights i { width:7px; height:7px; border-radius:50%; background:var(--pink); }.calc-lights i:nth-child(2) { background:var(--yellow); }.calc-lights i:nth-child(3) { background:var(--mint); }
.answer-form { max-width:none; margin:0 0 13px; text-align:left; }.answer-form label { color:#adb6df; font:600 10px 'DM Mono',monospace; letter-spacing:1.3px; }.answer-input-row { display:flex; background:#0e1430; border:2px solid #5260aa; margin-top:6px; min-height:66px; }.answer-input-row input { width:100%; border:0; padding:8px 10px; background:transparent; color:var(--white); font:800 32px 'DM Mono',monospace; outline:0; text-align:right; min-width:0; }.submit-button { background:var(--purple); color:white; border:0; width:61px; font-size:28px; }.submit-button:hover { background:#8669f5; }
.keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-width:none; margin:0; }.keypad button { border:0; background:#f1f3ff; color:var(--ink); min-height:58px; padding:10px; font:700 20px 'DM Mono',monospace; touch-action:manipulation; }.keypad button:hover { background:#d9deff; }.keypad .key-muted { color:#7d84a7; background:#dfe4fb; }.keyboard-hint { color:#9ba3c3; margin:14px 0 0; font:10px 'DM Mono',monospace; }.keyboard-hint kbd { background:#e4e8fb; color:#697091; padding:3px 5px; font:inherit; }
.key-enter { border:0; background:var(--purple) !important; color:var(--white) !important; min-height:58px; padding:10px 7px !important; font-size:12px !important; letter-spacing:.3px; }.key-enter:hover { background:#8669f5 !important; }.key-enter span { display:block; color:var(--yellow); font-size:18px; margin-top:2px; }.delete-key { background:#f6b2c5 !important; color:#672642 !important; font-size:12px !important; letter-spacing:.3px; box-shadow:inset 0 -3px 0 #df7897; }.delete-key:hover { background:#f8c2d1 !important; }
@media (max-width:800px) { .question-card { padding-left:32px; padding-right:32px; }.calculator-device { max-width:440px; } }
@media (max-width:500px) { .game-panel,.results-panel { padding:24px 8px 30px; }.question-card { padding:27px 10px 22px; }.question { font-size:clamp(39px,14vw,60px); }.calculator-device { width:100%; padding:15px 13px 14px; box-shadow:5px 5px 0 #d4d9f1; }.keypad { gap:7px; }.keypad button { min-height:61px; font-size:21px; }.answer-input-row { min-height:70px; }.answer-input-row input { font-size:34px; }.submit-button { width:64px; } }
@media (max-width:500px) { .operation-options { grid-template-columns:repeat(2,1fr); } }

.topbar-controls { display:flex; align-items:center; gap:24px; }
.music-toggle { display:flex; align-items:center; gap:8px; color:var(--muted); font:600 10px 'DM Mono',monospace; letter-spacing:1px; cursor:pointer; user-select:none; }
.music-toggle input { position:absolute; opacity:0; pointer-events:none; }
.music-switch { width:29px; height:16px; padding:3px; display:flex; align-items:center; background:#303962; border:1px solid #56619d; }
.music-switch i { width:8px; height:8px; background:#929bc8; transition:.2s; }
.music-toggle input:checked + .music-switch { background:var(--purple); border-color:var(--violet); }
.music-toggle input:checked + .music-switch i { background:var(--yellow); transform:translateX(12px); }
@media (max-width:800px) { .topbar-controls { gap:12px; } }
@media (max-width:500px) { .topbar-controls { gap:0; }.topbar-status { display:none; }.music-toggle span:last-child { font-size:9px; } }