@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@600;700;800&family=Sora:wght@600;700;800&display=swap');
:root{font-family:'Nunito Sans',sans-serif;color:#fff4e3;background:#030916;color-scheme:dark}*{box-sizing:border-box}body{margin:0;overflow:hidden}button{font:700 14px 'Sora',sans-serif;color:inherit;cursor:pointer;border:0;touch-action:manipulation}button:focus-visible{outline:3px solid #fff4e3;outline-offset:4px}#app{position:relative;width:min(100vw,540px);height:100dvh;max-height:1000px;margin:auto;overflow:hidden;background:#071a3a;box-shadow:0 0 110px #153d7060}#game,#interface{position:absolute;inset:0}canvas{display:block;touch-action:none}#interface{pointer-events:none}#interface button,#interface input{pointer-events:auto}.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 26px;background:linear-gradient(#071a3a80,#071a3a30 30%,#071a3ae8 78%,#071a3a)}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:800;color:#19d9ff}.primary{width:100%;max-width:380px;padding:19px 20px;border-radius:18px;color:#071a3a;background:linear-gradient(135deg,#ffc533,#ff8a00);box-shadow:0 7px 0 #9d4a12,0 15px 35px #ff8a0030;font-size:16px}.secondary{background:#153458;border:1px solid #41628280;border-radius:14px;padding:13px 20px}.quiet{background:none;padding:12px;color:#c0d5e9}.subline{font-size:14px;color:#9fb9d4;margin:16px 0;text-align:center}.topbar{position:absolute;left:20px;right:20px;top:max(20px,env(safe-area-inset-top));display:flex;gap:10px;align-items:center}.pill{padding:10px 14px;border-radius:14px;background:#071a3ad9;border:1px solid #52aed333;backdrop-filter:blur(12px);font:700 16px Sora,sans-serif}.spark-count{color:#ffc533}.spacer{flex:1}.icon-button{background:#071a3acc;border:1px solid #52aed344;border-radius:14px;width:46px;height:46px;font-size:20px}.progress-track{position:absolute;top:82px;left:24px;right:24px;height:4px;border-radius:9px;background:#ffffff20;overflow:hidden}.progress-fill{height:100%;background:#19d9ff;transition:width .2s}.bottom-hud{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:22px;right:22px}.power{width:100%;height:62px;border-radius:18px;overflow:hidden;position:relative;background:#071a3ade;border:1px solid #19d9ff60;display:flex;align-items:center;justify-content:space-between;padding:16px;color:#b4cadd}.power:disabled{cursor:default}.power-fill{position:absolute;inset:0 auto 0 0;background:#19d9ff23;transition:width .15s}.power strong,.power span{position:relative}.power.ready{border-color:#19d9ff;color:#fff;box-shadow:0 0 24px #19d9ff55}.hint{position:absolute;top:15%;left:22px;right:22px;text-align:center;padding:14px 18px;border-radius:18px;background:#071a3aed;border:1px solid #19d9ff44;font-weight:800;font-size:17px;transition:opacity .2s}.keys{display:flex;gap:6px;justify-content:center;margin-top:10px;color:#a7bcd1;font-size:12px}.keys kbd{font-family:inherit;background:#ffffff0b;border:1px solid #ffffff19;border-radius:5px;padding:2px 5px}.modal{position:absolute;inset:0;pointer-events:auto;background:#030916d9;backdrop-filter:blur(9px);display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto}.panel{width:100%;padding:30px 24px;background:linear-gradient(140deg,#12375b,#081a35);border:1px solid #4ca2ca50;border-radius:28px;text-align:center;box-shadow:0 20px 70px #0008}.panel h1{font:800 30px Sora,sans-serif;letter-spacing:-.045em;margin:14px 0}.panel p{color:#c3d2e4;font-size:16px;line-height:1.5}.actions{display:grid;gap:13px;margin-top:24px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:24px 0}.stat{padding:16px 4px;background:#071a3a88;border:1px solid #ffffff0b;border-radius:14px}.stat b{display:block;font:800 24px Sora,sans-serif;color:#ffc533}.stat span{font-size:12px;color:#b9ccdd}.setting{display:flex;align-items:center;justify-content:space-between;padding:14px 0;font-size:16px;border-bottom:1px solid #ffffff10}.setting input{width:22px;height:22px;accent-color:#19d9ff}.toast{position:absolute;top:29%;left:12%;right:12%;text-align:center;font:800 21px Sora,sans-serif;color:#19d9ff;text-shadow:0 4px 12px #071a3a}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.version{font-size:12px;color:#a0b8d0;text-align:center;margin-top:14px}.brand-screen{background:#071a3a;padding:28px;gap:24px}.brand-content{width:100%;text-align:center}.brand-logo{display:block;width:min(92%,390px);max-height:48vh;object-fit:contain;margin:0 auto 24px;mix-blend-mode:screen}.brand-content .eyebrow{line-height:1.7;margin:0}.intro-continue{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));font-size:14px}.start-screen{justify-content:flex-end;background:linear-gradient(#071a3a55,transparent 36%,#071a3a00 48%,#071a3af5 79%,#071a3a),url('/assets/duo.webp') center 38%/cover;gap:16px}.start-bottom{width:100%;text-align:center}.start-bottom .version{margin-top:4px}.start-bottom .home-actions{margin-top:9px}.start-bottom h1{font:800 clamp(21px,5vw,27px) Sora,sans-serif;letter-spacing:-.05em;margin:10px 0}.start-bottom p{font-size:16px;margin:8px 0 22px;color:#c7dcef}.chapter{font:700 12px Sora,sans-serif;letter-spacing:.16em;color:#19d9ff}.home-actions{display:flex;justify-content:center;margin-top:13px}.result-mark{font-size:72px;line-height:1.3;color:#19d9ff;text-shadow:0 0 30px #19d9ff88}.instructions{text-align:center}.instructions b{color:#19d9ff;margin-right:8px}.result-screen{background:#071a3a9e}.result-note{font-size:14px!important}@media(min-width:650px){body{background:radial-gradient(ellipse at 50% 30%,#123559,#030916 65%)}#app{border-left:1px solid #ffffff10;border-right:1px solid #ffffff10}.screen{padding-top:30px}}@media(max-height:700px){.screen{padding:20px}.brand-logo{max-height:42vh}.start-bottom .chapter{font-size:11px}.start-bottom .version{margin-top:2px}.subline{margin:12px 0}.panel{padding:22px}.panel h1{font-size:26px}.start-bottom p{margin-bottom:16px}.version{margin-top:8px}}@media(pointer:coarse){.keys kbd{display:none}.keys span[aria-hidden]{display:none}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.start-bottom .creator-credit{margin:6px 0;font-size:14px;font-weight:800;line-height:1.4;color:#c7dcef}

.home-logo{position:absolute;top:max(3.5%,env(safe-area-inset-top));right:3%;width:36%;max-width:200px;height:auto;object-fit:contain;mix-blend-mode:normal;opacity:1;pointer-events:none}

.story-screen{background:linear-gradient(#071a32b3,#071a32b3),url('/assets/duo.webp') center 38%/cover;pointer-events:auto;overflow-y:auto}
.story-screen .panel{margin:auto 0;background:#071a3aee}
.scroll-screen{overflow-y:auto;pointer-events:auto;justify-content:flex-start;padding-top:max(24px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom))}
.scroll-screen>.panel{margin:auto 0;flex-shrink:0}
.discovery{margin:18px 0;padding:18px;border:1px solid #19d9ff66;background:#071a3aaa;border-radius:18px;text-align:center}
.discovery h2{font:800 22px Sora,sans-serif;color:#ffc533;margin:10px 0}
.discovery p{margin:8px 0 16px}.discovery .secondary{width:100%;display:block;text-align:center}
.discovery-link{color:#fff4e3;text-decoration:none;pointer-events:auto;font:700 14px Sora,sans-serif;line-height:1.5}
.discovery-link:focus-visible{outline:3px solid #fff4e3;outline-offset:3px}
.ia-total{font:800 30px Sora,sans-serif!important;color:#ffc533!important}.ia-total span{display:block;font:700 14px 'Nunito Sans',sans-serif;color:#c3d2e4;margin-top:8px}
.question-options .secondary{text-align:center;font-size:16px;line-height:1.5;padding:16px}
.chapter-modal{align-items:flex-start}.chapter-modal>.panel{margin:auto 0;flex-shrink:0}.chapter-modal h1{font-size:24px;line-height:1.25;letter-spacing:-.025em}
.dialogue{font-size:15px!important;text-align:center}.dialogue strong{color:#19d9ff}.result-screen .stats{margin:16px 0}.result-screen .stat span{font-size:14px}
.album-screen{background:#071a3aed}.discovery .eyebrow,.story-screen .eyebrow,.chapter-modal .eyebrow{font-size:14px;letter-spacing:.06em}
@media(max-height:700px){.scroll-screen .panel{padding:22px 18px}.scroll-screen .actions{gap:10px;margin-top:18px}.scroll-screen .discovery{margin:14px 0}}


/* Center bounded buttons within their full-width panels. */
.actions{justify-items:center}.actions>button{width:100%;max-width:380px;justify-self:center}
.panel .primary,.panel .secondary{margin-inline:auto}.panel .primary{display:block}
.discovery .secondary{max-width:380px}.brand-name{text-transform:none;letter-spacing:normal}
.brain-count{display:flex;gap:4px;align-items:center;color:#c6a7ff}.brain-count img{width:24px;height:24px;object-fit:contain}
.topbar{gap:6px}.topbar .pill{padding:10px}.topbar .icon-button{flex-shrink:0}.result-screen .stats{grid-template-columns:repeat(2,minmax(0,1fr))}

.mission-rays{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0}.ray{padding:14px 10px;border:1px solid #416282;border-radius:16px;background:#071a3a99;color:#b9ccdd}.ray b{display:block;font-size:16px}.ray span{display:block;font-size:14px;margin-top:7px;line-height:1.4}.ray.earned{border-color:#ffc533;color:#ffc533}.ray.earned span{color:#fff4e3}

.music-volume{display:grid;grid-template-columns:1fr auto;gap:12px;text-align:left}.music-volume input{grid-row:2;grid-column:1/-1;width:100%;height:24px}.music-volume output{grid-column:2;grid-row:1;color:#19d9ff;font-size:14px}

.mission-rays{grid-template-columns:repeat(3,minmax(0,1fr))}.ray{padding:14px 6px}.ray b{font-size:14px}.trail-reward{color:#19d9ff!important;padding:12px;border:1px solid #19d9ff55;border-radius:14px;font-size:14px!important}.modal>.panel{margin:auto 0;flex-shrink:0}.modal{align-items:flex-start}.home-actions{flex-wrap:wrap}.panel h1{overflow-wrap:break-word}.story-screen>.panel{flex-shrink:0}.screen{padding-bottom:max(24px,env(safe-area-inset-bottom))}.topbar{flex-wrap:nowrap}.topbar .pill{font-variant-numeric:tabular-nums;font-size:clamp(13px,3.8vw,16px)}.power{font-size:14px}.power strong{font-size:clamp(12px,3.2vw,14px)}@media(max-width:360px){.topbar{left:12px;right:12px;gap:4px}.topbar .pill{padding:9px 7px}.brain-count img{width:20px;height:20px}.modal{padding:14px}.panel{padding:22px 16px}}

/* Compact results: replay stays above expandable secondary content. */
.result-screen .result-compact{padding:22px 18px;max-width:460px}
.result-compact h1{font-size:26px;margin:10px 0 14px}
.result-screen .result-compact .stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:12px 0}
.result-compact .stat{padding:10px 2px}.result-compact .stat b{font-size:20px}.result-compact .result-note{margin:10px 0 14px}
.discovery-compact{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:#071a3a88;border:1px solid #19d9ff55;border-radius:14px;text-align:left;font:600 14px 'Nunito Sans',sans-serif}
.discovery-compact strong{display:block;font:800 16px Sora,sans-serif;color:#ffc533;margin-top:3px}.discovery-action{font-weight:800;color:#19d9ff;white-space:nowrap}
.result-compact .result-actions{gap:10px;margin-top:16px}.result-compact .primary{padding:15px 12px}.result-compact .quiet{padding:8px;min-height:40px}
.result-details{border-top:1px solid #ffffff20;margin-top:12px;padding-top:4px}.result-details summary{cursor:pointer;padding:12px 4px;font-size:14px;color:#bfd4e8;min-height:44px}.result-details summary:focus-visible{outline:3px solid #fff4e3;outline-offset:2px}
@media(max-width:350px){.result-screen .result-compact{padding:18px 12px}.result-compact .stat b{font-size:18px}.result-screen .result-compact .stat span{font-size:13px}.discovery-compact{padding:10px}}

.combo-readout{position:absolute;top:112px;left:50%;transform:translateX(-50%);color:#ffc533;background:#071a3ae6;padding:6px 12px;border-radius:18px;font-size:14px;white-space:nowrap;pointer-events:none}.combo-readout:empty{display:none}.arrival-caption{position:absolute;left:0;right:0;bottom:12%;text-align:center;font-size:24px;font-weight:800;color:#fff4e3;text-shadow:0 2px 8px #071a3a;pointer-events:none}

.level-card{display:flex;flex-direction:column;gap:8px;padding:22px 16px;text-align:center}.level-card strong{font-size:22px}.level-card span:last-child{font-size:14px}.level-card:disabled{opacity:.5}.home-actions{flex-wrap:wrap}.discovery-compact strong{font-size:16px;overflow-wrap:anywhere}

.lesson-copy{padding:14px;border:1px solid #19d9ff44;border-radius:16px;background:#0b2b5999}.lesson-copy p{margin:8px 0}.lesson-copy .lesson-example{color:#ffc533;font-weight:800}.story-screen .panel h1{font-size:26px}.story-screen .panel>p{margin:12px 0}

/* Editorial line wrapping: balanced titles and short copy, fuller paragraph endings. */
.panel h1,.panel h2,.start-bottom h1,.level-card strong,.chapter-modal .secondary,
.primary,.secondary,.quiet,.eyebrow,.chapter,.hint,.toast,.discovery-compact strong{
 text-wrap:balance;word-break:normal;hyphens:none;overflow-wrap:normal;
}
.panel p,.start-bottom p,.ray span,.level-card span{ text-wrap:pretty;word-break:normal;hyphens:none;overflow-wrap:break-word; }
.story-screen h1,.story-screen .panel>p,.lesson-copy p{white-space:pre-line}
.lesson-copy .lesson-example{max-width:30ch;margin-inline:auto;text-wrap:balance}
.chapter-modal h1{max-width:26ch;margin-inline:auto}
.panel h1,.level-card strong{overflow-wrap:break-word}
.discovery-compact>span:first-child{min-width:0}

/* Approved final artwork: preserve the full image and reserve its lower area for live UI. */
.screen.finale-screen{display:block;padding:0;background:#06133a;overflow-y:auto;pointer-events:auto;overscroll-behavior:contain}
.finale-card{position:relative;width:100%;min-height:100%;isolation:isolate;background:#06133a}
.finale-art{position:absolute;inset:0 0 auto;width:100%;height:auto;display:block;z-index:-1}
.finale-controls{padding:132% 8% max(18px,env(safe-area-inset-bottom));display:grid;justify-items:center;gap:12px;text-align:center}
.finale-controls .primary,.finale-controls .secondary{display:flex;align-items:center;justify-content:center;width:100%;max-width:380px;min-height:46px;padding:12px 16px;font:800 14px Sora,sans-serif;text-decoration:none;text-wrap:balance;pointer-events:auto}
.finale-controls .secondary{background:#09234fe8;border-color:#5ddfff90;color:#fff4e3}
.finale-credit{margin:3px 0 0;font-size:14px;font-weight:800;line-height:1.5;color:#fff4e3;text-shadow:0 2px 5px #02091d}
.finale-credit span{font-size:12px;white-space:nowrap}
.finale-controls .quiet{font-size:12px;min-height:40px;padding:9px}
.finale-controls a:focus-visible{outline:3px solid #fff4e3;outline-offset:4px}

.spark-count.spark-count-cyan{color:#aaf7ff;border-color:#25dcff60}

/* Compact mini-lessons: only the reading area scrolls; actions stay in view. */
.screen.story-screen{padding:16px 18px;padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom));overflow:hidden}
.story-screen>.panel.story-compact{width:100%;max-width:390px;max-height:100%;min-height:0;flex-shrink:1;display:flex;flex-direction:column;padding:22px 20px 12px;border-radius:22px;margin:auto}
.story-reading{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:0 3px}
.story-screen .story-reading .eyebrow{font-size:11px;letter-spacing:.1em}
.story-screen .story-reading h1{font-size:clamp(19px,5vw,23px);line-height:1.2;margin:7px 0 16px;text-wrap:balance}
.story-screen .story-reading p{font-size:15px;line-height:1.45;margin:12px 0;white-space:pre-line;text-wrap:pretty}
.story-reading .story-lesson strong{color:#73e8ff}
.story-reading .story-example{color:#ffc533;font-weight:800}
.story-compact .story-actions{flex-shrink:0;margin-top:16px;gap:5px;width:100%}
.story-actions .primary{min-height:46px;padding:13px 16px;font-size:15px}
.story-actions .quiet{min-height:40px;padding:10px;font-size:12px}
.story-reading:focus-visible{outline:2px solid #73e8ff;outline-offset:1px}
@media(max-height:600px){.story-screen>.panel.story-compact{padding:16px 16px 8px}.story-screen .story-reading h1{margin-bottom:10px}.story-screen .story-reading p{font-size:14px;margin:9px 0}.story-compact .story-actions{margin-top:10px}}