@font-face{font-family:Fredoka;src:url('assets/fredoka.ttf');font-display:swap}@font-face{font-family:Trebuchet;src:url('assets/trebuchet.ttf');font-display:swap}
:root{--ink:#183f46;--cream:#fff5df;--orange:#cc4b23;--muted:#4a6566;--shadow:0 12px 32px #17494c30;font-family:Trebuchet,sans-serif;color:var(--ink)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#078b99}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,canvas:focus-visible{outline:3px solid #e95d32;outline-offset:5px}button:disabled{cursor:wait;opacity:.65}.hidden{display:none!important}#game,#world{position:absolute;inset:0;width:100%;height:100%}#world{display:block;outline:none}.hud{position:absolute;z-index:3;inset:26px 32px auto;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}.wordmark{display:flex;align-items:baseline;gap:5px;white-space:nowrap;font-family:Fredoka,sans-serif;font-weight:700;font-size:34px;line-height:1;letter-spacing:-.025em;color:var(--cream);transform:skewX(-6deg);text-shadow:0 2px 4px #183f4690}.wordmark span{font-size:14px;letter-spacing:.02em;color:#ffd365}.scoreboard{background:var(--cream);border-radius:0 0 18px 18px;padding:14px 28px 12px;min-width:160px;text-align:center;margin-top:-26px;box-shadow:var(--shadow);font-family:Fredoka,sans-serif}.score-label{display:block;font:700 10px Trebuchet;letter-spacing:.14em;margin-bottom:2px}.scoreboard strong{font-size:39px;line-height:1}.meters{font-size:18px;margin-left:4px}.best{display:block;font:700 10px Trebuchet;letter-spacing:.1em;margin-top:8px}.toolbar{display:flex;gap:10px;pointer-events:auto}.icon-button{width:42px;height:42px;border:0;border-radius:50%;background:var(--cream);box-shadow:0 4px 12px #153c4633;color:var(--ink);display:grid;place-items:center}.icon-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}.icon-button:hover{background:#ffd579}.sheet{position:absolute;z-index:5;left:7%;top:50%;transform:translateY(-42%);width:340px;background:var(--cream);padding:30px 32px 22px;border-radius:16px 44px 16px 16px;box-shadow:var(--shadow)}h1,h2,p{margin:0}h1{font:600 57px/.98 Fredoka,sans-serif;letter-spacing:-.025em}h1 em{font-style:normal;color:var(--orange)}.sheet>p{font-size:14px;line-height:1.6;margin:18px 0}.howto{display:grid;gap:11px;margin:22px 0;font-size:12px}.howto span{display:flex;align-items:center;gap:7px}kbd{font:700 10px Trebuchet,sans-serif;display:inline-grid;place-items:center;border:1px solid #a5b2aa;border-bottom:3px solid #a5b2aa;border-radius:5px;padding:4px 7px;min-width:24px;background:#fffbf1}.primary{border:0;background:var(--orange);color:#fffaf0;border-radius:10px;min-height:52px;width:100%;font:600 21px Fredoka,sans-serif;padding:12px 20px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 6px 14px #89351123;transition:background .15s,transform .15s}.primary:hover{background:#a83616;transform:translateY(-2px)}.primary:active{transform:translateY(1px)}.sheet .loading{font-size:10px;text-align:center;margin:10px 0 0;color:var(--muted)}.legend{z-index:3;position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:22px;white-space:nowrap;background:var(--cream);box-shadow:var(--shadow);padding:10px 18px;border-radius:12px;font:700 10px Trebuchet;letter-spacing:.05em}.legend span{display:flex;align-items:center;gap:5px}.location{position:absolute;bottom:28px;left:30px;color:#fff5df;font-size:9px;font-weight:700;letter-spacing:.14em;text-shadow:0 1px 4px #15565d}.touch-controls{display:none}#toast{position:absolute;z-index:6;left:50%;top:120px;transform:translateX(-50%);padding:10px 19px;border-radius:30px;background:var(--cream);font:500 17px Fredoka;box-shadow:var(--shadow);opacity:0;transition:opacity .15s;pointer-events:none}#toast.show{opacity:1}#action-state{position:absolute;z-index:3;bottom:95px;left:50%;transform:translateX(-50%);font:600 20px Fredoka;color:var(--cream);text-shadow:0 2px 4px #084953;pointer-events:none}.pause-sheet{position:absolute;z-index:7;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--cream);border-radius:16px;padding:30px;box-shadow:var(--shadow);width:320px;text-align:center}.pause-sheet h2{font:600 30px Fredoka}.pause-sheet p{margin:15px 0 22px;font-size:14px}.final-score{margin-top:22px}.final-score strong{font:600 65px Fredoka;display:block}.final-score span{font-size:13px}body.playing .location{display:none}body.playing .scoreboard{background:#fff5edf0}.vignette{pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 95px #064e5925}body.hit .vignette{box-shadow:inset 0 0 110px #df402ab0}
@media(max-width:960px){.hud{inset:18px 16px auto}.wordmark{font-size:24px;gap:4px}.wordmark span{font-size:11px}.scoreboard{margin-top:-18px;min-width:115px;padding:12px 15px}.scoreboard strong{font-size:32px}.icon-button{width:36px;height:36px}.toolbar{gap:6px}.sheet{left:20px;top:auto;bottom:100px;transform:none;width:calc(100% - 40px);max-width:370px;padding:22px 26px}.sheet h1{font-size:46px}.sheet>p{margin:12px 0;font-size:13px}.howto{margin:15px 0;gap:8px}.legend,.location{display:none}.touch-controls{position:absolute;z-index:4;bottom:max(18px,env(safe-area-inset-bottom));left:16px;right:16px;display:flex;justify-content:space-between;gap:16px}.touch-controls>div{display:flex;gap:9px}.touch-controls button{min-width:53px;height:56px;border:0;border-radius:13px;background:var(--cream);color:var(--ink);box-shadow:0 5px 12px #174d5530;font:600 14px Fredoka}.touch-controls>div:first-child button{font-size:23px}.touch-controls .jump{background:var(--orange);color:#fff5df;min-width:68px}#toast{top:102px;font-size:14px;white-space:nowrap}#action-state{bottom:89px}.pause-sheet{width:calc(100% - 40px);max-width:340px}}
@media(max-height:600px) and (min-width:721px){.sheet{top:100px;transform:none;padding:18px 24px;width:300px}.sheet h1{font-size:40px}.sheet>p{margin:10px 0}.howto{margin:12px 0;gap:6px}.legend{bottom:12px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.camera-controls{position:absolute;z-index:8;right:32px;top:82px;font-size:13px;color:var(--ink)}.camera-controls summary{list-style:none;cursor:pointer;background:var(--cream);padding:11px 15px;border-radius:12px;box-shadow:var(--shadow);font:500 16px Fredoka;min-height:42px;text-align:right}.camera-controls summary::-webkit-details-marker{display:none}.camera-controls summary span{margin-left:9px}.camera-panel{width:260px;background:var(--cream);padding:16px;border-radius:12px;margin-top:7px;box-shadow:var(--shadow);max-height:calc(100dvh - 220px);overflow:auto}.view-presets{display:grid;grid-template-columns:1fr 1fr;gap:6px}.camera-panel button{border:1px solid #9cab9b;background:#fffbef;border-radius:7px;padding:9px;color:var(--ink);min-height:38px}.camera-panel button:hover{background:#ffdd8a}.camera-panel label{display:block;margin-top:14px;font-weight:bold}.camera-panel input{display:block;width:100%;margin:7px 0 0;accent-color:var(--orange);height:24px}.camera-panel output{float:right;font-weight:normal}.camera-panel p{font-size:11px;line-height:1.5;margin:12px 0;color:var(--muted)}#camera-reset{width:100%}.camera-controls summary:focus-visible,.camera-panel input:focus-visible{outline:3px solid var(--orange);outline-offset:3px}@media(max-width:960px){.camera-controls{top:72px;right:16px}.camera-panel{width:235px}.camera-controls summary{font-size:14px;padding:9px 12px}.camera-controls[open]~#toast{opacity:0}}

#weather-status{position:absolute;z-index:3;left:30px;top:115px;color:var(--cream);background:#204c57bb;border-radius:18px;padding:7px 12px;font:12px Trebuchet,sans-serif;pointer-events:none}@media(max-width:960px){#weather-status{left:16px;top:88px;font-size:10px;padding:6px 9px}}

/* Opening press briefing: same cream, teal and Fredoka as the game. */
.briefing{position:absolute;inset:0;z-index:20;display:grid;place-items:safe center;padding:24px;background:#183f4699;overflow:auto}
.briefing-frame{display:grid;grid-template-columns:1fr 1.12fr;width:min(920px,100%);background:var(--cream);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.briefing-portrait{position:relative;margin:0;background:#568c8b;min-height:490px}
.briefing-portrait img{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:50% 35%}
.briefing-portrait figcaption{position:absolute;bottom:0;left:0;right:0;padding:16px 24px;background:var(--ink);color:var(--cream);font:600 24px Fredoka,sans-serif}
.briefing-portrait figcaption span{display:block;font:12px/1.5 Trebuchet,sans-serif;margin-top:4px}
.briefing-copy{padding:28px 32px;display:flex;flex-direction:column;gap:24px}
.briefing-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.briefing-brand{font:600 17px Fredoka,sans-serif}
.briefing-skip{border:0;background:none;color:var(--ink);text-decoration:underline;text-underline-offset:4px;min-height:44px;padding:8px 0;font-size:13px}
.briefing-copy h1{font-size:44px;line-height:1.05;min-height:94px;text-wrap:balance}
.briefing-dialogue{flex:1;min-height:155px}
.briefing-dialogue>p{font:16px/1.6 Trebuchet,sans-serif}
.briefing-dialogue .briefing-aside{font-size:13px;line-height:1.5;color:var(--muted);margin-top:16px;font-style:italic}
.briefing-bottom{display:flex;align-items:center;gap:20px}
.briefing-step{font:500 14px Fredoka,sans-serif;white-space:nowrap}
.briefing-bottom .primary{justify-content:center}
.briefing-fiction{font:12px/1.4 Trebuchet,sans-serif;color:var(--muted);text-align:center}
.briefing-open .hud,.briefing-open #intro,.briefing-open .legend,.briefing-open .touch-controls,.briefing-open .camera-controls,.briefing-open #weather-status,.briefing-open .location{visibility:hidden}
@media(max-width:640px){.briefing{padding:12px}.briefing-frame{grid-template-columns:1fr;max-width:430px}.briefing-portrait{min-height:210px;height:26dvh;max-height:270px}.briefing-portrait img{object-fit:contain;object-position:50% 0%;height:calc(100% - 38px)}.briefing-portrait figcaption{padding:9px 16px;font-size:18px}.briefing-portrait figcaption span{display:inline;margin-left:8px;font-size:10px}.briefing-copy{padding:16px 20px;gap:14px}.briefing-copy h1{font-size:34px;min-height:72px}.briefing-dialogue{min-height:0}.briefing-dialogue>p{font-size:16px;line-height:1.5}.briefing-dialogue .briefing-aside{margin-top:10px}.briefing-fiction{font-size:11px}}
@media(max-height:600px) and (min-width:641px){.briefing-portrait{min-height:420px}.briefing-copy{gap:14px;padding:18px 28px}.briefing-copy h1{font-size:36px;min-height:76px}}

/* Reserve gameplay touches for swipes and camera gestures, not page scrolling. */
#world{touch-action:none;}

#world:focus-visible{outline:3px solid var(--orange);outline-offset:-5px}
.icon-button{min-width:44px;min-height:44px}
.camera-panel select{display:block;width:100%;min-height:44px;margin-top:7px;border:1px solid var(--muted);border-radius:7px;background:var(--cream);color:var(--ink);font:inherit;padding:8px}
.camera-panel select:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
@media(any-pointer:coarse){.touch-controls{position:absolute;z-index:4;bottom:max(18px,env(safe-area-inset-bottom));left:16px;right:16px;display:flex;justify-content:space-between;gap:16px}.touch-controls>div{display:flex;gap:9px}.touch-controls button{min-width:56px;height:56px;border:0;border-radius:13px;background:var(--cream);color:var(--ink);font:600 20px Fredoka}.touch-controls .jump{background:var(--orange);color:var(--cream);min-width:72px}.legend{display:none}}
@media(max-height:500px){.sheet{top:80px;bottom:auto;transform:none;left:20px;width:min(340px,calc(100% - 40px));max-height:calc(100dvh - 164px);overflow:auto;padding:16px 22px}.sheet h1{font-size:34px}.sheet>p{margin:10px 0}.howto{margin:12px 0}.touch-controls{bottom:max(12px,env(safe-area-inset-bottom))}.touch-controls button{height:48px}.camera-panel{max-height:calc(100dvh - 142px)}.pause-sheet{max-height:calc(100dvh - 80px);overflow:auto}.legend{bottom:8px}}

@media (max-width:960px), (any-pointer:coarse){.touch-controls [data-lane-button]{width:clamp(80px,22vw,120px);flex:0 0 auto;}}

/* Allow panel scrolling, but never browser pinch or double-tap zoom. */
html,body,#game{touch-action:pan-x pan-y;}
#world{touch-action:none;}