:root{color-scheme:dark;--bg:#090d17;--text:#e6f6f4;--zoom:1}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:radial-gradient(ellipse at center,#142b32 0%,var(--bg) 76%);color:var(--text);font-family:system-ui,"Microsoft YaHei",sans-serif;touch-action:none}.app{height:100dvh;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:8px}.toolbar{width:min(100%,960px);height:42px;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #426e75;background:#081a25e8;border-radius:12px;padding:4px 7px;box-shadow:0 8px 26px #0007}.brand{font-size:15px;font-weight:900;letter-spacing:2px;color:#b8ef74;white-space:nowrap}.tools{display:flex;gap:4px;align-items:center}.tools button,.settings-panel button{border:1px solid #628e9b;background:linear-gradient(#163e50,#112a3b);color:var(--text);border-radius:8px;font-weight:700;cursor:pointer}.tools button{height:30px;min-width:31px;padding:0 7px;font-size:15px}.tools button span{font-size:12px}.tools button:active,.settings-panel button:active{transform:translateY(1px);filter:brightness(1.25)}.tools button:disabled{opacity:.45;cursor:default}#zoom-value{width:40px;text-align:center;font-size:12px;font-weight:800}.play-layout{width:100%;display:flex;align-items:center;justify-content:center;min-height:0}.canvas-frame{width:min(calc(960px * var(--zoom)),96vw,calc((100dvh - 90px) * 16 / 9));aspect-ratio:16/9;flex:none;border:2px solid #4b8387;border-radius:9px;box-shadow:0 0 28px #65ccbb30,0 20px 35px #0008;overflow:hidden;background:#000}#game{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none;outline:none}.help{margin:0;text-align:center;font-size:11px;color:#9cb8b7}.touch-help,.control-rail{display:none}.day-mode{--bg:#789c9b;--text:#f4fcf8}.day-mode .canvas-frame{filter:brightness(1.13) saturate(1.06)}.settings-overlay{position:fixed;z-index:10;inset:0;background:#020811bc;display:grid;place-items:center;padding:12px}.settings-overlay[hidden]{display:none}.settings-panel{width:min(400px,94vw);max-height:90dvh;overflow:auto;padding:16px;background:linear-gradient(#133541,#0b202e);border:2px solid #72b8bd;border-radius:15px;box-shadow:0 22px 70px #000c}.settings-head{display:flex;align-items:center;justify-content:space-between}.settings-head h2{margin:0 0 8px;color:#b8ef74}.settings-head button{width:32px;height:32px}.setting-row{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #4a71785c;font-size:14px}.setting-row input{flex:1;accent-color:#9ceb4b}.setting-row button{min-width:70px;height:31px}.setting-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}.setting-actions button{padding:8px 12px}.settings-panel p{font-size:11px;color:#a9c5c5;margin-bottom:0}
@media(pointer:coarse){.app{gap:3px;padding:3px}.toolbar{width:100%;height:34px;min-height:34px;padding:2px 4px;border-radius:8px}.brand{font-size:11px;letter-spacing:0}.tools{gap:2px}.tools button{height:28px;min-width:27px;padding:0 3px}.tools button span{display:none}#zoom-value{width:32px;font-size:10px}.desktop-help{display:none}.touch-help{display:inline}.help{font-size:9px}.play-layout{flex:1}.control-rail{width:clamp(73px,11vw,112px);height:100%;display:flex;align-items:center;justify-content:center;flex:none}.canvas-frame{width:min(calc(100% - clamp(146px,22vw,224px)),calc((100dvh - 50px) * 16 / 9 * var(--zoom)));max-height:calc(100dvh - 50px)}.dpad{position:relative;width:clamp(72px,10vw,110px);aspect-ratio:1;border:2px solid #9bdfe6;border-radius:50%;background:radial-gradient(circle at 45% 35%,#315769d6,#102839d9);box-shadow:0 0 14px #59ccdf8a,inset 0 0 18px #9bdfe632}.direction{position:absolute;width:34%;height:31%;border:1px solid #9bdfe6;border-radius:7px;background:linear-gradient(#d3f8f8,#83c5d4);color:#1483a5;font-size:clamp(14px,2.6vw,22px);font-weight:900;display:grid;place-items:center;touch-action:none;user-select:none;box-shadow:0 2px 6px #0008}.direction.up{top:6%;left:33%}.direction.down{bottom:6%;left:33%}.direction.left{left:6%;top:35%}.direction.right{right:6%;top:35%}.dpad-core{position:absolute;width:25%;height:25%;left:37.5%;top:37.5%;border-radius:50%;border:2px solid #a7f5f2;background:#1686a6;pointer-events:none}.direction.pressed,.action-btn.pressed{filter:brightness(1.3);transform:scale(.91);box-shadow:0 0 15px #aff5f0}.right-rail{flex-direction:column;gap:12px}.action-btn{width:clamp(52px,7.5vw,76px);height:clamp(52px,7.5vw,76px);border-radius:50%;border:2px solid #93e7e7;background:radial-gradient(circle at 35% 30%,#3f7886,#12364a);color:#eafafa;font-size:21px;font-weight:900;box-shadow:0 0 15px #5bdfde8a;touch-action:none;user-select:none}.action-btn small{display:block;font-size:10px}.fire-btn{border-color:#f6b96b;color:#ffd690;background:radial-gradient(circle at 35% 30%,#8b543b,#49261f);box-shadow:0 0 15px #f1a14f80}.settings-panel{width:min(400px,80vw);max-height:90dvh}}
@media(pointer:coarse) and (orientation:landscape){.help{display:none}.canvas-frame{max-height:calc(100dvh - 42px);width:min(calc(100% - clamp(146px,22vw,224px)),calc((100dvh - 42px) * 16 / 9 * var(--zoom)))}}
html:has(body.virtual-landscape){overflow:hidden}body.virtual-landscape{position:fixed;left:100vw;top:0;width:100dvh;height:100vw;min-height:0;transform:rotate(90deg);transform-origin:top left;overflow:hidden}body.virtual-landscape .app{width:100%;height:100%}body.virtual-landscape .help{display:none}body.virtual-landscape .play-layout{height:calc(100% - 38px)}body.virtual-landscape .canvas-frame{width:min(calc(100% - 156px),calc((100vw - 42px) * 16 / 9 * var(--zoom)));max-height:calc(100vw - 42px)}body.virtual-landscape .control-rail{width:78px}body.virtual-landscape .dpad{width:72px}body.virtual-landscape .action-btn{width:54px;height:54px}body.virtual-landscape .settings-overlay{position:absolute;width:100%;height:100%}body.virtual-landscape .settings-panel{max-height:calc(100vw - 14px)}
/* Keep the 16:9 canvas inside the available height at every zoom level. */
.day-mode .help{color:#193b43}
@media(pointer:coarse){.canvas-frame{width:min(calc(100% - clamp(146px,22vw,224px)),calc((100dvh - 50px) * 16 / 9),calc((100dvh - 50px) * 16 / 9 * var(--zoom)));max-height:none}}
@media(pointer:coarse) and (orientation:landscape){.canvas-frame{width:min(calc(100% - clamp(146px,22vw,224px)),calc((100dvh - 42px) * 16 / 9),calc((100dvh - 42px) * 16 / 9 * var(--zoom)))}}
body.virtual-landscape .canvas-frame{width:min(calc(100% - 156px),calc((100vw - 42px) * 16 / 9),calc((100vw - 42px) * 16 / 9 * var(--zoom)));max-height:none}
@media(pointer:coarse) and (orientation:landscape){.canvas-frame{width:min(calc(100% - clamp(146px,22vw,224px)),calc((100dvh - 46px) * 16 / 9),calc((100dvh - 46px) * 16 / 9 * var(--zoom)))}}
/* Mobile landscape cockpit: the scene uses the largest undistorted 16:9 area.
   Controls float at the lower corners instead of shrinking the canvas. */
@media (pointer:coarse), (max-width:700px), (max-width:900px) and (max-height:500px) {
  .app, body.virtual-landscape .app { position:relative; width:100%; height:100%; padding:0; display:block; overflow:hidden; }
  .play-layout, body.virtual-landscape .play-layout { position:absolute; inset:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:linear-gradient(90deg,#151326,#21152e 50%,#151326); }
  .canvas-frame { width:min(100vw,calc(100dvh * 16 / 9 * var(--zoom))) !important; height:auto; max-height:none; aspect-ratio:16/9; border:0; border-radius:0; box-shadow:none; }
  .control-rail, body.virtual-landscape .control-rail { position:absolute; z-index:5; width:auto; height:auto; display:flex; flex:none; }
  .left-rail { left:max(10px,env(safe-area-inset-left)); bottom:max(12px,env(safe-area-inset-bottom)); }
  .right-rail { right:max(10px,env(safe-area-inset-right)); bottom:max(12px,env(safe-area-inset-bottom)); flex-direction:row; align-items:flex-end; gap:10px; }
  .dpad { position:relative; width:clamp(100px,28dvh,142px); aspect-ratio:1; border:2px solid #a9ed7c; border-radius:50%; background:radial-gradient(circle at 44% 34%,#4a3155d9,#191b32e8 70%); box-shadow:0 0 15px #8ddd6b9c,inset 0 0 22px #b4ed7c44; touch-action:none; user-select:none; }
  .dpad.active { border-color:#e4fca0; box-shadow:0 0 25px #b7f477bb,inset 0 0 20px #b4ed7c66; }
  .dpad-cluster { --stick-x:0px; --stick-y:0px; position:absolute; left:50%; top:50%; width:68%; height:68%; transform:translate(-50%,-50%) translate(var(--stick-x),var(--stick-y)); transition:transform .09s ease-out; pointer-events:none; }
  .dpad.active .dpad-cluster { transition:none; }
  .direction { position:absolute; width:31%; height:31%; border:1px solid #d8f5a3; border-radius:6px; display:grid; place-items:center; background:linear-gradient(#d7f4b4,#9fce83); color:#3a6a49; font-size:clamp(11px,3.8dvh,17px); font-weight:900; pointer-events:none; box-shadow:0 2px 5px #0009; }
  .direction.up { top:0; left:34.5%; } .direction.down { bottom:0; left:34.5%; }
  .direction.left { left:0; top:34.5%; } .direction.right { right:0; top:34.5%; }
  .dpad-core { position:absolute; width:29%; height:29%; left:35.5%; top:35.5%; z-index:1; border:2px solid #ffe57d; border-radius:50%; background:radial-gradient(circle at 35% 28%,#fff8ad,#c9a548 75%); box-shadow:0 0 12px #f8d820aa,0 2px 5px #000b; pointer-events:none; }
  .action-btn, body.virtual-landscape .action-btn { width:clamp(55px,17dvh,74px); height:clamp(55px,17dvh,74px); border:2px solid; border-radius:50%; font-size:21px; font-weight:900; color:#eafafa; touch-action:none; user-select:none; opacity:.86; }
  .jump-btn { border-color:#b6f2a0; background:radial-gradient(circle at 35% 28%,#497a57,#244336); color:#e6ffd5; box-shadow:0 0 16px #8cda7b88; }
  .fire-btn { border-color:#ffc777; background:radial-gradient(circle at 35% 28%,#a15b3b,#5e2d2a); color:#fff0c6; box-shadow:0 0 16px #fa9d5588; }
  .toolbar { position:absolute; z-index:6; left:50%; bottom:max(8px,env(safe-area-inset-bottom)); transform:translateX(-50%); width:auto; height:32px; min-height:32px; padding:2px 4px; border-color:#8fb6a092; background:#0b1825cd; opacity:.87; backdrop-filter:blur(6px); }
  .brand { display:none; } .toolbar .tools { flex-wrap:nowrap; } .toolbar .tools button { min-width:28px; height:27px; padding:0 3px; } .toolbar .tools button span { display:none; } .toolbar #zoom-value { width:32px; font-size:10px; }
  .help { display:none; }
  .settings-panel { max-height:90%; }
  .day-mode .play-layout { background:linear-gradient(90deg,#4c7371,#547b76 50%,#4c7371); }
}
body.virtual-landscape .canvas-frame { width:min(100%,calc(100vw * 16 / 9 * var(--zoom))) !important; height:auto; max-height:none; }
body.virtual-landscape .left-rail { left:max(10px,env(safe-area-inset-left)); bottom:max(12px,env(safe-area-inset-bottom)); }
body.virtual-landscape .right-rail { right:max(10px,env(safe-area-inset-right)); bottom:max(12px,env(safe-area-inset-bottom)); width:auto; height:auto; flex-direction:row; gap:10px; }
body.virtual-landscape .dpad { width:clamp(100px,28vw,142px); }
body.virtual-landscape .action-btn { width:clamp(55px,17vw,74px); height:clamp(55px,17vw,74px); }
body.virtual-landscape .toolbar { position:absolute; left:50%; bottom:8px; width:auto; transform:translateX(-50%); }
.fire-btn.aiming { border-color:#ffe6a6; box-shadow:0 0 26px #ffb45dcc, inset 0 0 13px #ffc47777; }
.canvas-frame { position:relative; container-type:inline-size; }
.title-screen,.stage-screen { position:absolute; inset:0; z-index:3; font-family:system-ui,"Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.title-screen[hidden],.stage-screen[hidden] { display:none; }
.title-screen button,.stage-screen button { font:inherit; cursor:pointer; }
.title-screen h1 { position:absolute; top:4%; left:0; width:100%; margin:0; text-align:center; color:#eefbff; font-size:clamp(30px,6.8cqw,126px); line-height:1.2; font-weight:900; letter-spacing:.08em; text-shadow:0 3px 0 #40badc,0 7px 0 #12536e,0 12px 16px #061020; }
.title-start { position:absolute; top:38%; left:30%; width:40%; height:16%; border:2px solid #a9edff; background:#071b31e8; color:#f5fbff; font-size:clamp(17px,3.3cqw,62px)!important; font-weight:800!important; box-shadow:0 0 16px #4ac5e359; }
.title-start:hover,.title-start:focus-visible { background:#123b56; border-color:#e9faff; }
.title-difficulties { position:absolute; top:59%; left:20%; width:60%; height:13%; display:flex; gap:2.5%; }
.title-difficulties button { flex:1; min-width:0; border:2px solid #75a9bb; background:#071b31e8; color:#e5f5fb; font-size:clamp(15px,3cqw,56px)!important; font-weight:800!important; }
.title-difficulties button.selected { border-color:#ffe397; color:#fff1ba; background:#15506adf; }
.title-difficulties button:hover,.title-difficulties button:focus-visible { filter:brightness(1.25); }
.stage-open { position:absolute; top:79%; left:34%; width:32%; height:9%; border:1px solid #92d7e9; border-radius:6px; background:#071b31dc; color:#edfaff; font-size:clamp(13px,2cqw,40px)!important; font-weight:800!important; }
.stage-open span { margin-left:.35em; color:#74dff4; }
.stage-open:hover,.stage-open:focus-visible { background:#195474; }
.stage-screen { padding:2.4% 4%; background:linear-gradient(125deg,#071523f5,#10283aef); color:#ecfaff; display:flex; flex-direction:column; gap:2%; }
.stage-heading { display:flex; align-items:center; justify-content:space-between; min-height:12%; }
.stage-heading>div { display:flex; align-items:baseline; gap:1.2em; }
.stage-heading strong { font-size:clamp(18px,3cqw,48px); }
.stage-heading span,.stage-progress { color:#aed4df; font-size:clamp(11px,1.45cqw,24px); }
.stage-heading button { padding:.3em 1em; border:1px solid #86d4e7; border-radius:6px; background:#16445d; color:#ecfaff; font-size:clamp(12px,1.55cqw,24px)!important; }
.stage-grid { flex:1; min-height:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-rows:repeat(4,minmax(0,1fr)); gap:1.5%; }
.stage-tile { min-width:0; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.1em; border:1px solid #69a4b7; border-radius:6px; background:#0d3146; color:#d9f5fd; }
.stage-tile.unlocked { border-color:#9de9f1; background:linear-gradient(#19546a,#103548); }
.stage-tile.unlocked:hover,.stage-tile.unlocked:focus-visible { background:#276b80; box-shadow:0 0 12px #7ddae888; }
.stage-tile.locked { opacity:.55; cursor:not-allowed; }
.stage-number { font-size:clamp(15px,2.1cqw,34px); font-weight:900; line-height:1; }
.stage-name { font-size:clamp(10px,1.4cqw,19px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:95%; }
.stage-status { font-size:clamp(10px,1.2cqw,18px); color:#add9cf; }
.stage-tile.locked .stage-status { color:#a7afb5; }
.stage-progress { margin:0; text-align:center; min-height:5%; }
/* A saved desktop zoom must not crop the phone view after rotation. */
@media(pointer:coarse){.canvas-frame{width:min(100vw,calc(100dvh * 16 / 9),calc(100dvh * 16 / 9 * var(--zoom))) !important}}
body.virtual-landscape .canvas-frame{width:min(100%,calc(100vw * 16 / 9),calc(100vw * 16 / 9 * var(--zoom))) !important}
/* Keep the title and story text clear until gameplay starts. */
body:not(.playing) .control-rail{opacity:0;pointer-events:none}
body:not(.playing) .help{display:none}