:root{color-scheme:dark;font:15px/1.6 system-ui,sans-serif;color:#e5eaf8;background:#080f20;--gold:#f4d397;--ink:#0b182b}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-height:100svh;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 0,#25345b,transparent 75%)}
.game-shell{min-width:0;width:min(1120px,100%);padding:22px}header,footer,.hud{display:flex;align-items:center;justify-content:space-between;gap:12px}header{margin-bottom:15px}
.brand{font:28px/1.05 Georgia,serif;color:var(--gold)}.brand span{font-size:13px;display:block;letter-spacing:1px;margin-top:4px}.hud{font-size:14px;gap:8px}
#progressText{color:#ffe3a1;font-weight:700;margin-right:12px;font-variant-numeric:tabular-nums}button{font:inherit;color:#e8eefc;background:#182b43;border:1px solid #5d728e;border-radius:10px;padding:10px 18px;cursor:pointer;transition:background .15s,transform .15s}
button:hover{background:#2b4463;transform:translateY(-1px)}button:disabled{cursor:default;opacity:.45;transform:none}button:focus-visible,canvas:focus-visible{outline:3px solid var(--gold);outline-offset:4px}.icon-button{width:42px;height:42px;padding:0;font-size:20px;border-radius:50%}.icon-button[aria-pressed=true]{color:var(--gold);border-color:var(--gold)}
.game-wrap{width:min(100%,var(--game-width,100%));margin-inline:auto;position:relative;border-radius:20px;overflow:hidden;border:1px solid #627897;box-shadow:0 24px 80px #0008}
canvas{width:100%;height:auto;display:block;aspect-ratio:8/5}
#overlay{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(100deg,#071120ef,#071120c9);backdrop-filter:blur(5px);padding:24px;overflow:hidden;align-items:center}
body[data-mode=start] #overlay{background:linear-gradient(90deg,#07152ae6,#07152a8c),url('forest-art.png') center/cover;backdrop-filter:none}
.panel{width:min(660px,100%);text-align:center;padding:20px}.title-panel{max-width:620px}.eyebrow{letter-spacing:3px;font-size:10px;color:#adc4df}.menu-note{display:block;font-size:11px;color:#acbfd6;margin-top:18px;letter-spacing:.4px}
h1{font:normal 40px/1.15 Georgia,serif;color:var(--gold);margin:15px 0}h1 small{display:block;font-size:30px;margin-top:7px}.title-panel h1{font-size:82px;text-shadow:0 4px 30px #0009}.title-panel h1 small{font-size:36px}.panel p{max-width:540px;margin:16px auto;color:#c5d3e5}
.tagline{font:18px/1.6 Georgia,serif}.primary{background:linear-gradient(#ffe5b1,#e8bd78);color:#202d42;border-color:#fff0c9;font-weight:700;box-shadow:0 3px 20px #f4d3971a}.primary:hover{background:#ffe2a9}.panel button{margin:5px}.menu-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-top:12px}.menu-links button{font-size:12px;padding:7px 12px;background:#10223ab8}.objective{border-top:1px solid #aec3e32b;padding-top:15px;color:#f3d99f!important;font-size:13px}.constellation{color:var(--gold);font-size:25px;letter-spacing:5px;margin:8px 0}
.settings{display:grid;text-align:left;gap:12px;padding:12px;margin:10px auto;width:max-content;max-width:100%}input{accent-color:var(--gold);width:17px;height:17px;vertical-align:middle}
.chapter-list{display:grid;gap:8px;margin:20px auto;text-align:left}.chapter-card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:11px 15px;margin:0!important}.chapter-card b{display:block;font-weight:500}.chapter-card small{color:#b1c7df;font-size:11px}.chapter-card .chapter-icon{font-size:24px;color:var(--gold);width:30px}.chapter-card .chapter-score{margin-left:auto;font-size:12px;color:var(--gold)}.chapter-card.current{border-color:var(--gold)}
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.help-grid p{font-size:12px;background:#1a304d80;border-radius:9px;padding:10px;margin:0}kbd{font:12px system-ui;border:1px solid #8a9ab3;border-radius:4px;padding:2px 5px;color:#ffe4ae}
footer{padding:12px 4px 0;font-size:11px;color:#aebed3;flex-wrap:wrap}#chapterProgress{color:var(--gold);letter-spacing:5px}progress{width:110px;height:5px;accent-color:#e6c382}.touch-controls{display:none;justify-content:space-between;padding:10px 0;gap:16px}.touch-controls>div{display:flex;gap:8px}.touch-controls button{touch-action:none;user-select:none;min-width:58px;min-height:50px;font-size:20px}.touch-controls .jump{min-width:85px;background:#34547a}
body:not([data-mode=playing]) .touch-controls{display:none}.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}
.high-contrast canvas{filter:contrast(1.3)}.high-contrast button{border-color:white}.high-contrast{color:white}
@media(pointer:coarse),(max-width:760px){.touch-controls{display:flex}.game-shell{padding:10px}.brand{font-size:23px}.brand span{font-size:11px}.hud{gap:5px;font-size:12px}#progressText{margin-right:2px}.icon-button{width:34px;height:34px;font-size:17px}header{gap:8px}.game-wrap{border-radius:12px}#overlay{padding:12px}.panel{padding:6px}h1{font-size:28px;margin:8px 0}.title-panel h1{font-size:48px}.title-panel h1 small{font-size:24px}.panel p{font-size:12px;margin:9px auto}.panel button{font-size:12px;padding:8px 12px}.eyebrow{font-size:8px;letter-spacing:2px}.menu-note{font-size:9px;margin-top:8px}.settings{gap:6px;font-size:12px}.chapter-list{gap:5px;margin:10px auto}.chapter-card{padding:7px 10px!important}.chapter-card small{font-size:9px}.help-grid p{padding:6px}.constellation{font-size:18px;margin:4px 0}}
@media(max-width:450px){.brand span{font-size:9px}.brand{font-size:20px}.hud{gap:3px;font-size:11px}.icon-button{width:30px;height:30px}.game-shell{padding:7px}#overlay{padding:8px}.eyebrow{font-size:7px;letter-spacing:1px}.title-panel h1{font-size:38px;margin:6px 0}.title-panel h1 small{font-size:20px}.title-panel .tagline{font-size:11px;line-height:1.4}.panel p{line-height:1.45;font-size:11px}.panel h1{font-size:23px}.menu-links{margin-top:4px}.panel button{padding:6px 9px;margin:3px}.menu-note{margin-top:5px}.objective{padding-top:6px;font-size:10px!important}.chapter-card b{font-size:10px}.chapter-card .chapter-icon{font-size:18px;width:20px}.chapter-card small{display:none}.chapter-list{gap:3px}.chapter-card{padding:5px 7px!important}.touch-controls{gap:6px}.touch-controls>div{gap:5px}.touch-controls button{min-width:44px;padding:8px 6px}.touch-controls .jump{min-width:60px}.help-grid{gap:4px}.help-grid p{font-size:9px}footer{font-size:9px}.settings{padding:3px;margin:5px auto;font-size:11px;gap:4px}}
@media(max-height:500px) and (orientation:landscape){.game-shell{max-width:820px;padding:6px}header{margin-bottom:5px}.brand span{display:none}footer{padding-top:3px}#overlay{padding:8px}.panel{padding:0}.panel p{font-size:11px;margin:6px auto}.title-panel h1{font-size:38px}.title-panel h1 small{font-size:23px}.panel h1{font-size:25px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none!important}}

.map-panel .chapter-list{max-height:330px;overflow:auto;padding:4px;scrollbar-color:#b59b74 #10223a}
@media(max-width:760px){.map-panel .chapter-list{max-height:180px}}
@media(max-width:450px){.map-panel .chapter-list{max-height:115px}}

@media(max-height:500px) and (orientation:landscape){
 body{min-height:100svh}.game-shell{width:min(820px,100vw);padding:6px}
 .touch-controls{padding:6px 0}
 .touch-controls button,.touch-controls .jump{min-width:46px;min-height:46px;padding:6px}
 .touch-controls>div{gap:5px}footer{font-size:10px}
}


/* Dialogs fit their content independently of the 8:5 gameplay canvas. */
body:not([data-mode=playing]) .game-wrap{width:var(--dialog-width,var(--game-width));height:var(--dialog-height);}
body:not([data-mode=playing]) canvas{position:absolute;left:50%;top:50%;width:var(--game-width);max-width:100%;transform:translate(-50%,-50%);}
#overlay{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);}
#overlay>.panel{transform:scale(var(--panel-scale,1));transform-origin:center;}
.map-panel{display:flex;flex-direction:column;min-height:0;}
.map-panel .chapter-list{flex:0 1 auto;min-height:0;max-height:var(--chapter-list-height,330px);}
@media(max-width:360px){header{flex-wrap:wrap;justify-content:center}.brand{text-align:center}.hud{flex-wrap:wrap;justify-content:center}#progressText{white-space:nowrap}}