:root{color-scheme:dark;--ink:#101316;--paper:#f4f0e7;--muted:#bdc5c9;--gold:#e6bb75;--teal:#87c9c1;--line:#ffffff26;--glass:#161b20ed;font:14px system-ui,sans-serif;color:var(--paper)}
*{box-sizing:border-box}body{margin:0;background:#101316;overflow:hidden}#gameContainer{position:fixed;inset:0}canvas{display:block;touch-action:none}button,input,select{font:inherit}button,select{color:var(--paper);background:#252c32;border:1px solid var(--line);border-radius:9px;padding:11px 14px}button,summary{cursor:pointer}button:hover,select:hover{border-color:var(--gold);background:#32383c}button:disabled{opacity:.45;cursor:default}button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--teal);outline-offset:4px}input{accent-color:var(--gold)}
header{position:fixed;top:24px;left:28px;pointer-events:none;text-shadow:0 2px 7px #000}header small,#loading small{font-size:10px;letter-spacing:.3em;color:var(--gold)}h1{font:500 clamp(21px,2.2vw,32px) Georgia,serif;margin:7px 0}header p{font-size:12px;color:#e1e4e3;margin:5px 0;max-width:380px}.panel{background:var(--glass);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 30px #0003;backdrop-filter:blur(14px)}
.toolbar{position:fixed;right:24px;top:24px;display:flex;gap:7px;z-index:12}.toolbar button{display:flex;align-items:center;gap:5px;min-height:48px;background:#171c23ed}.control-icon{height:30px;width:30px;object-fit:contain;vertical-align:middle;flex:none}.toolbar .control-icon{height:34px;width:34px}.controls summary .control-icon,summary .control-icon{width:25px;height:25px;margin-right:8px}
summary{font-weight:600;font-size:12px;letter-spacing:.02em;color:var(--paper);list-style:none;display:flex;align-items:center;gap:5px}summary::-webkit-details-marker{display:none}summary:after{content:'+';font-size:17px;color:var(--gold);margin-left:auto;padding-left:18px}details[open]>summary:after{content:'−'}details[open]>summary{padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:14px}.hud,.time{position:fixed;bottom:24px;padding:13px 16px;z-index:10}.hud{left:24px;max-width:280px}.hud small{display:block;color:var(--muted);font-size:10px;letter-spacing:.14em;margin:10px 0 5px}.hud strong{font:500 27px Georgia;color:var(--gold)}#equipped{color:var(--muted);font-size:12px;margin-top:9px}.time{right:24px;max-width:260px}.time label{display:block;font-size:12px;color:var(--muted);margin-top:12px}.time input[type=range]{width:200px;display:block;margin:13px 0}.time input[type=checkbox]{width:auto;display:inline}
.controls{position:fixed;top:88px;right:24px;z-index:14;padding:13px 16px;max-width:350px}.controls dl{display:grid;grid-template-columns:100px 1fr;gap:10px;font-size:12px;line-height:1.5}.controls dt{color:var(--gold)}.controls dd{margin:0;color:var(--muted)}.controls p{font-size:12px;line-height:1.6;color:var(--muted)}.mission-panel{left:24px!important;right:auto!important;top:134px!important;max-width:330px!important}.mission-panel:not([open]){max-width:320px!important}.mission-panel summary{font-size:12px}.graphics-panel{top:auto;bottom:82px;right:24px;width:290px}.graphics-panel:not([open]){width:auto}.graphics-panel label{display:grid;gap:9px;font-size:12px;margin:14px 0}.graphics-panel output{display:block;max-width:260px;color:var(--teal);font:12px/1.6 ui-monospace,monospace}.graphics-panel .quality-note{font-size:11px;color:var(--muted)}
#modal{position:fixed;inset:90px 6% 80px;z-index:25;display:none;padding:28px;overflow:auto;background:#12171cf7}#modal h2{font:500 29px Georgia;margin:0}.bar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px}.tabs,.filters{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.tabs button{text-transform:capitalize}.tabs button.active{background:var(--gold);color:#171717;border-color:var(--gold)}.filters input{background:#20272c;border:1px solid var(--line);border-radius:8px;color:var(--paper);padding:13px;min-width:0;flex:1}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}.card{background:linear-gradient(145deg,#272f35,#191f25);border:1px solid var(--line);border-radius:13px;padding:19px;display:flex;flex-direction:column}.card .item-icon{height:65px;width:65px;margin:2px auto 15px;object-fit:contain}.card h3{font-size:16px;font-weight:600;margin:10px 0}.card p{font-size:12px;line-height:1.6;color:var(--muted);flex:1}.card .meta{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--teal)}.card button{width:100%;margin-top:12px}.pages{display:flex;align-items:center;justify-content:center;gap:20px;margin:22px 0}.badge{color:var(--gold)}.footer-note{font-size:12px;line-height:1.6;color:var(--muted)}.hint{display:none}
.touch-actions{display:flex;gap:6px;flex-wrap:wrap}.touch-actions button{min-height:44px;font-size:12px;padding:9px}.touch-actions .control-icon{width:24px;height:24px;margin-right:4px}#touch{display:none;position:fixed;bottom:120px;left:24px;width:156px;gap:5px;flex-wrap:wrap;z-index:12}#touch button{width:48px;height:48px;touch-action:none;user-select:none;background:#182127df;font-size:20px}#touch button:first-child{margin:0 50px}.crosshair{position:fixed;top:50%;left:50%;width:5px;height:5px;border-radius:50%;background:white;opacity:.7;pointer-events:none;box-shadow:0 0 2px #000}.toast{display:none;position:fixed;left:50%;top:90px;transform:translateX(-50%);z-index:35;padding:14px 22px;max-width:min(550px,88vw);color:#ffe1af;font-size:13px;text-align:center}#loading{position:fixed;inset:0;display:grid;place-content:center;text-align:center;background:radial-gradient(ellipse at 50% 30%,#313b43,#101316 65%);z-index:40;padding:30px}#loading p{color:var(--muted);font-size:13px}#loading h1{font-size:34px}#battle{position:fixed;top:145px;right:24px;padding:18px;width:240px;display:none}progress{width:100%;accent-color:var(--teal)}
@media(pointer:coarse){#touch{display:flex}}@media(max-width:850px){header{top:17px;left:18px}header p{max-width:310px;font-size:11px}.toolbar{top:86px;left:18px;right:auto}.toolbar button{font-size:11px;padding:7px 10px}.toolbar .control-icon{width:25px;height:25px}.controls{top:145px;right:16px;max-width:300px}.mission-panel{top:145px!important;left:16px!important;max-width:calc(100vw - 178px)!important}.mission-panel:not([open]){max-width:calc(100vw - 178px)!important}.graphics-panel{top:auto;bottom:77px;right:16px}.hud{bottom:17px;left:16px}.time{bottom:17px;right:16px}.hud,.time{padding:11px 13px}.hud[open],.time[open]{bottom:70px}.time input[type=range]{width:160px}#modal{inset:145px 12px 75px;padding:18px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.card{padding:13px}.card h3{font-size:14px}.card .item-icon{height:48px;width:48px}.bar h2{font-size:24px}#touch{left:16px;bottom:95px;width:145px}#touch button{width:44px;height:44px}#touch button:first-child{margin:0 47px}.toast{top:205px}.pages{gap:10px;font-size:12px}.pages button{padding:9px}}
@media(max-width:430px){header p{max-width:320px}.toolbar{gap:4px}.toolbar button{padding:7px;font-size:10px}.toolbar .control-icon{width:22px;height:22px}.controls{padding:11px;font-size:11px;right:12px}.controls summary{font-size:11px}.controls .control-icon{width:20px;height:20px}.mission-panel{left:12px!important;max-width:calc(100vw - 190px)!important}.mission-panel:not([open]){max-width:calc(100vw - 190px)!important}.mission-panel[open]{max-width:calc(100vw - 24px)!important;z-index:17}.mission-panel summary{font-size:10px}.graphics-panel{bottom:75px}.hud,.time{font-size:11px}summary{font-size:11px}}
/* Keep every action reachable when a guide is opened on a small screen. */
.controls[open]{max-height:calc(100vh - 172px);max-height:calc(100dvh - 172px);overflow-y:auto;overscroll-behavior:contain}.graphics-panel[open]{max-height:calc(100vh - 104px);max-height:calc(100dvh - 104px)}
/* Each world has its own visual language; controls stay in the same places. */
body[data-game-theme=worlds]{--gold:#9af1f3;--teal:#b9d2ff;--line:#78d7ee55;--glass:#0d2034ed;--edge:#66e2ff;--wash:#173b57}
body[data-game-theme=hushwater]{--gold:#ffbe93;--teal:#b6ead0;--line:#e3826659;--glass:#231a20ed;--edge:#ff947b;--wash:#502b33}
body[data-game-theme=boulevard]{--gold:#f3d195;--teal:#8de4e5;--line:#c1d6df50;--glass:#14252ded;--edge:#8cdde2;--wash:#28444b}
.panel{border-color:var(--line);background:linear-gradient(135deg,color-mix(in srgb,var(--wash) 65%,transparent),transparent 50%),var(--glass);box-shadow:0 12px 35px #0004,inset 0 1px 0 #e2f8ff25,0 0 16px color-mix(in srgb,var(--edge) 7%,transparent)}
header small{font-weight:700}header h1{font-family:system-ui,sans-serif;font-weight:450;letter-spacing:-.035em}header:before{content:'';position:absolute;left:-12px;top:0;bottom:0;width:2px;background:var(--edge);box-shadow:0 0 10px var(--edge)}
.toolbar button{border-color:var(--line);background:linear-gradient(120deg,var(--wash),#111c28e8);box-shadow:inset 0 1px 0 #ffffff25,0 6px 20px #0003}.toolbar button:hover{box-shadow:inset 0 0 18px color-mix(in srgb,var(--edge) 15%,transparent),0 0 12px color-mix(in srgb,var(--edge) 20%,transparent)}
.card{border-color:var(--line);background:linear-gradient(140deg,var(--wash),#111b28)}.card .meta{color:var(--gold)}.card button{border-color:var(--line)}.card:hover{border-color:var(--edge)}
#modal{background:linear-gradient(150deg,var(--wash),#0d1524f7 60%)}#modal h2{font-family:system-ui,sans-serif;letter-spacing:-.04em}.tabs button.active{background:var(--gold);box-shadow:0 0 15px color-mix(in srgb,var(--gold) 15%,transparent)}
body[data-game-theme=hushwater] header h1{font-weight:700;letter-spacing:.015em;text-transform:uppercase;font-size:clamp(20px,2vw,30px)}body[data-game-theme=hushwater] .mission-panel{border-left:3px solid var(--edge)}body[data-game-theme=worlds] .mission-panel{border-top:2px solid var(--edge)}body[data-game-theme=boulevard] .panel{border-radius:18px}
#loading{background:radial-gradient(ellipse at 45% 28%,var(--wash),#0a111c 70%)}#loading h1{font-family:system-ui,sans-serif;letter-spacing:-.04em}#loading:after{content:'';width:120px;height:2px;background:linear-gradient(90deg,transparent,var(--edge),transparent);margin:20px auto;box-shadow:0 0 20px var(--edge)}