:root{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#eee9d7;background:#10211c;color-scheme:dark;--gold:#e9bd62;--dim:#a7b6a1;--line:#c5d3ba26;--control-opacity:.48;--control-scale:1.15;--control-size:160px}
.speech-bubble{position:absolute;z-index:6;width:360px;max-width:calc(100% - 16px);padding:10px 13px 8px;background:#fff2ce;color:#382e29;border:2px solid #806746;border-radius:16px;box-shadow:0 3px 10px #14231850;pointer-events:auto;--speech-tail-x:50%;--speech-tail-height:14px}
.speech-tail{position:absolute;left:0;top:100%;width:100%;height:var(--speech-tail-height);overflow:visible;pointer-events:none;fill:#fff2ce}
.speech-bubble>strong{font:700 13px system-ui;color:#74542e}.speech-bubble>p{font:13px/1.4 system-ui;margin:5px 0 7px;overflow-wrap:break-word;user-select:text;-webkit-user-select:text}
.speech-actions{display:flex;align-items:center;justify-content:space-between;gap:8px}.speech-actions button{min-height:32px;padding:4px 9px;font:600 11px system-ui;border-color:#b29767;color:#503d28;background:#e8cd90}.speech-actions button:hover{background:#f7d881}.speech-actions button:last-child{background:transparent;border-color:transparent;font-weight:400}.speech-actions button:focus-visible{outline-color:#604018}
.story-route{position:absolute;z-index:5;left:50%;top:64px;transform:translateX(-50%);width:max-content;max-width:84%;text-align:center;padding:7px 12px;border-radius:20px;border:1px solid #e3c78385;background:#163025dd;color:#ffedbb;font:12px/1.4 system-ui;pointer-events:none}
@container(max-width:500px){.speech-bubble{padding:7px 10px 6px;border-radius:12px}.speech-bubble>strong{font-size:11px}.speech-bubble>p{font-size:12px;line-height:1.3;margin:3px 0 5px}.speech-actions button{font-size:10px;min-height:30px;padding:4px 7px}.story-route{top:50px;font-size:10px;padding:5px 9px}}
.menu-buttons button>span{font-size:24px;line-height:1;opacity:.85;min-width:26px;text-align:right}
.stage-cue{position:absolute;z-index:5;top:39%;left:10%;right:10%;text-align:center;padding:18px 12px;border-top:1px solid #e9bd6260;border-bottom:1px solid #e9bd6260;background:linear-gradient(90deg,#10251b00,#10251be8 20%,#10251be8 80%,#10251b00);color:#f2deb1;font:clamp(18px,4vw,36px) Georgia,serif;pointer-events:none}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.mode-card{text-align:left;padding:22px;background:linear-gradient(140deg,#46624755,#14251d);border-color:#e9bd624d;min-height:190px}.mode-card b{display:block;font:32px Georgia,serif;color:#efd69f}.mode-card span{display:block;font-size:11px;color:#ebc975;margin:12px 0}.mode-card p{font-size:13px;line-height:1.6;color:#c7d5bd;margin:0}.mode-card:hover{border-color:#f1cb76;background:#3c5535}
.mode-tabs{display:flex;gap:10px;margin-bottom:16px}.mode-tabs button{flex:1}.mode-tabs [aria-pressed=true]{background:#e9bd62;color:#21301c;font-weight:700}.level-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.level-card{padding:0 0 12px;overflow:hidden;text-align:left;background:#132a20}.level-card canvas{display:block;width:100%;height:auto;aspect-ratio:16/9}.level-card b,.level-card small{display:block;margin:8px 12px 0}.level-card b{font-size:13px}.level-card small{font-size:10px;color:#c6d4b7}.level-card:disabled canvas{filter:grayscale(.85)}
@media(max-width:500px){.mode-grid{grid-template-columns:1fr}.mode-card{min-height:0;padding:16px}.mode-card b{font-size:25px}.level-grid{gap:9px}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{margin:0;min-height:100dvh;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;background:radial-gradient(ellipse at 60% 20%,#354936,#11241c 75%)}button,input,select{font:inherit}button{cursor:pointer;color:inherit;border:1px solid var(--line);background:#ffffff0a;border-radius:9px;min-height:44px;padding:10px 16px}button:hover{background:#ffffff18}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:3px}button:disabled{opacity:.38;cursor:default}button.primary{background:var(--gold);color:#263124;font-weight:800;border-color:transparent}button.primary:hover{background:#f4cf85}[hidden]{display:none!important}
#touch-layer{position:absolute;inset:0;pointer-events:none;z-index:3;--pad-size:calc(160px * var(--control-scale))}#drag-zone{position:absolute;left:0;top:19%;bottom:0;width:49%;pointer-events:auto;touch-action:none}.joystick-idle{position:absolute;left:max(20px,env(safe-area-inset-left));bottom:calc(18px + env(safe-area-inset-bottom));width:var(--pad-size);height:var(--pad-size);border:2px solid #e0efd69c;border-radius:50%;background:#14292070;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:var(--control-opacity);pointer-events:none}.joystick-idle span{font-size:40px;color:#eff6df}.joystick-idle small{font-size:8px;letter-spacing:1px}.joystick{position:absolute;width:var(--pad-size);height:var(--pad-size);border:2px solid #eaf5dcb8;border-radius:50%;background:#10291e66;transform:translate(-50%,-50%);display:none;opacity:var(--control-opacity);pointer-events:none;align-items:center;justify-content:center}.joystick.active{display:flex}.joystick span{display:block;width:40%;height:40%;border-radius:50%;background:#d9e9c3b3;border:1px solid #f1f7dfb0}.input-floating #dpad{display:none}.input-pad #drag-zone{display:none}
.dpad{position:absolute;bottom:calc(18px + env(safe-area-inset-bottom));left:max(20px,env(safe-area-inset-left));width:var(--pad-size);height:var(--pad-size);pointer-events:auto;touch-action:none;background:#162f2690;border:1px solid #e0efd690;border-radius:32px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);opacity:var(--control-opacity)}.dpad span{display:grid;place-content:center;font-size:30px;pointer-events:none;color:#fff9e8}.dpad .up{grid-area:1/2}.dpad .left{grid-area:2/1}.dpad .right{grid-area:2/3}.dpad .down{grid-area:3/2}.dpad .centre{grid-area:2/2;font-size:22px;color:#bbc9a8}
.action-controls{position:absolute;bottom:calc(18px + env(safe-area-inset-bottom));right:max(20px,env(safe-area-inset-right));display:flex;align-items:flex-end;gap:14px;pointer-events:none}.action-controls button{width:calc(83px * var(--control-scale));height:calc(83px * var(--control-scale));display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;pointer-events:auto;touch-action:none;opacity:var(--control-opacity);background:#233e2fc9;border:2px solid #e3ecd1b3;padding:0}.action-controls button span{font-size:33px}.action-controls button small{font-size:9px;letter-spacing:1.5px}.action-controls #fire-control{width:calc(99px * var(--control-scale));height:calc(99px * var(--control-scale));background:#c39b3dcc;border:3px solid #f6d480;color:#fdf0c9}.action-controls .pressed{filter:brightness(1.6);opacity:.95}.controls-hidden .dpad,.controls-hidden .joystick,.controls-hidden .joystick-idle,.controls-hidden .action-controls button{opacity:0}.is-menu #touch-layer{visibility:hidden;pointer-events:none}.is-menu #touch-layer *{pointer-events:none}
.loading,.menu-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:#10261ab3;backdrop-filter:blur(5px)}.loading{flex-direction:column;gap:18px;color:#dfebca;font-size:14px}.loading span:last-child{font-size:12px;color:var(--dim)}.loader{border:2px solid #d7ddb433;border-top-color:var(--gold);border-radius:50%;height:32px;width:32px;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.menu-panel{width:min(440px,calc(100% - 28px));max-height:calc(100% - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;padding:28px 32px;border:1px solid #dee9c333;background:linear-gradient(140deg,#294332f7,#13291ff7);border-radius:14px;box-shadow:0 20px 70px #0006;scrollbar-width:thin;overscroll-behavior:contain;touch-action:pan-y;outline:0}.menu-panel.wide{width:min(670px,calc(100% - 28px))}.menu-header{text-align:center;margin-bottom:20px}.eyebrow{font-size:9px;letter-spacing:3px;color:var(--gold);font-weight:800}.menu-header h1{font:48px Georgia,serif;letter-spacing:-1px;margin:10px 0;color:#eee4c9}.menu-header p{font-size:12px;line-height:1.7;color:#bdcdb7;margin:9px 0 0}.menu-buttons{display:grid;gap:10px}.menu-buttons button{text-align:left;display:flex;justify-content:space-between;align-items:center;font-size:13px}.menu-buttons button span{opacity:.6}.menu-foot{text-align:center;margin-top:17px;color:#a7bc9e;font-size:10px;line-height:1.7}.menu-foot strong{color:#e8d2a0}.menu-back{width:100%;margin-top:20px}.settings-group{border:0;padding:0;margin:0 0 20px}.settings-group legend{font:20px Georgia,serif;color:#e4dabb;width:100%;padding:0 0 9px;border-bottom:1px solid var(--line);margin-bottom:5px}.setting{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:10px 0;font-size:12px}.setting small{display:block;max-width:380px;color:#a0b599;font-size:10px;line-height:1.6;margin-top:4px}.setting input[type=checkbox]{width:21px;height:21px;accent-color:var(--gold);cursor:pointer}.setting input[type=range]{width:160px;accent-color:var(--gold);touch-action:pan-x}.setting output{display:inline-block;min-width:42px;color:#e2c888;font:11px ui-monospace,monospace;text-align:right}.setting select{max-width:210px;color:#e5e8d2;background:#132c20;border:1px solid var(--line);border-radius:6px;padding:9px;font-size:12px}.range-row{display:flex;gap:8px;align-items:center}.dev-settings{border:1px solid var(--line);border-radius:8px;padding:13px;margin:5px 0}.dev-settings summary{font-size:13px;color:var(--gold);cursor:pointer;min-height:26px}.settings-note{font-size:11px;line-height:1.65;color:#a6b99b;margin:6px 0 10px}.score-list{list-style:none;margin:0;padding:0}.score-list li{display:flex;gap:15px;padding:13px 0;align-items:center;border-bottom:1px solid var(--line)}.score-list .rank{color:var(--gold);font:18px Georgia}.score-list strong{font:19px ui-monospace,monospace;flex:1}.score-list small{font-size:10px;color:#b0bea2;text-align:right}.help-copy{font-size:13px;line-height:1.8;color:#c9d6bb}.help-copy b{color:#eddeb0}.toast{position:absolute;left:50%;bottom:32%;transform:translateX(-50%);padding:10px 18px;border-radius:30px;border:1px solid #ebce8570;color:#f0dfb6;background:#192f21e6;font-size:12px;text-align:center;pointer-events:none;opacity:0;z-index:5;max-width:80%;transition:opacity .2s}.toast.visible{opacity:1}.is-menu .toast{display:none}
@media(max-width:600px){.hud{gap:6px;padding-left:9px;padding-right:9px}.hud-left{font-size:12px;gap:5px}.hud-left .crest{display:none}.hud-stats{gap:10px}.hud-stats strong{font-size:14px}.hud-stats #weapon{display:none}#lives{font-size:13px;letter-spacing:1px}.hud-actions{gap:4px}.hud-actions button{min-width:42px;min-height:42px;font-size:20px}.menu-panel{padding:23px 22px}.menu-header h1{font-size:42px}.setting{grid-template-columns:1fr}.setting input[type=checkbox]{grid-column:2;grid-row:1}.setting select{max-width:100%;width:100%}.range-row input[type=range]{width:100%}.range-row{width:100%}.setting output{min-width:48px}.action-controls{gap:7px;right:10px}.action-controls button{width:calc(63px * var(--control-scale));height:calc(63px * var(--control-scale))}.action-controls #fire-control{width:calc(79px * var(--control-scale));height:calc(79px * var(--control-scale))}#touch-layer{--pad-size:calc(130px * var(--control-scale))}.dpad,.joystick-idle{left:10px}.docked-footer{display:none}}
@media(max-height:520px) and (orientation:landscape){.menu-panel{padding:17px 27px;max-height:calc(100% - 18px)}.menu-header{margin-bottom:12px}.menu-header h1{font-size:33px;margin:5px 0}.menu-header p{font-size:11px}.menu-buttons{gap:7px}.menu-buttons button{min-height:42px;padding:9px 14px}.menu-foot{margin-top:10px;font-size:9px}.hud{padding-top:max(6px,env(safe-area-inset-top))}.hud-actions button{min-height:40px;min-width:42px}.dpad,.joystick-idle{bottom:12px;left:max(14px,env(safe-area-inset-left))}.action-controls{bottom:12px;right:max(14px,env(safe-area-inset-right))}#touch-layer{--pad-size:calc(128px * var(--control-scale))}.action-controls button{width:calc(69px * var(--control-scale));height:calc(69px * var(--control-scale))}.action-controls #fire-control{width:calc(86px * var(--control-scale));height:calc(86px * var(--control-scale))}.immersive.controls-dock #game{height:calc(100% - 125px)}.controls-dock #touch-layer{height:125px}.controls-dock .action-controls button{width:64px;height:64px}.controls-dock .action-controls #fire-control{width:76px;height:76px}.controls-dock #touch-layer{--pad-size:110px}.setting{padding:7px 0}.menu-back{margin-top:12px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.loader{animation:none}}

@media(max-height:520px) and (orientation:landscape){
 body:not(.immersive) .docked-footer{display:none}
 body.controls-dock:not(.immersive) #cabinet{width:min(1200px,96vw,calc((100dvh - 155px)*16/9))}
 body.controls-dock:not(.immersive) #arena{padding-bottom:125px}
}

#drag-zone:has(.joystick.active) .joystick-idle{visibility:hidden}



/* Fixed 16:9 game viewport. Menus use the entire screen outside it. */
body{overflow:hidden}
#cabinet,body.immersive #cabinet,body:not(.immersive) #cabinet,body.controls-dock:not(.immersive) #cabinet{position:fixed;inset:0;width:100%;height:100dvh;margin:0;border:0;border-radius:0;box-shadow:none}
#arena,body.immersive #arena,body:not(.immersive) #arena{position:absolute;inset:0;width:100%;height:100%;padding:0;aspect-ratio:auto;background:#0c1c16;overflow:hidden;isolation:isolate;touch-action:none}
body:not(.immersive) #arena{inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);border:1px solid var(--line);border-radius:12px}
#viewport{position:absolute;overflow:hidden;container-type:inline-size;background:#162b20}
#game,body.immersive #game{display:block;width:100%;height:100%;aspect-ratio:16/9;touch-action:none}
.docked-footer{display:none!important}
.hud{position:absolute;inset:0 0 auto;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:clamp(4px,1cqw,12px);padding:clamp(5px,1.2cqw,12px);pointer-events:none;background:linear-gradient(#102019df,#10201900);text-shadow:0 1px 3px #0009}
.hud-left{display:flex;align-items:center;gap:clamp(5px,1.3cqw,14px);min-width:0;font:clamp(11px,1.8cqw,18px) Georgia,serif}
.weapon-block{display:flex;align-items:center;gap:4px;min-width:0}
#weapon-icon{width:clamp(26px,4.3cqw,44px);height:clamp(26px,4.3cqw,44px);flex-shrink:0}
#weapon{display:block;font:clamp(10px,1.2cqw,12px) system-ui;max-width:95px;line-height:1.4;color:#f1d79c;letter-spacing:.3px}
.stage-block{min-width:0}.stage-block small{display:block;font:clamp(8px,1.1cqw,10px) ui-monospace,monospace;color:#c5d3b6;letter-spacing:1px;margin-top:3px}
.hud-stats{display:flex;align-items:center;gap:clamp(7px,2cqw,22px);white-space:nowrap}
.score-block small{display:block;font:clamp(7px,1cqw,9px) system-ui;letter-spacing:1px;color:#c5d3b6}
.hud-stats strong{font:clamp(12px,2.2cqw,22px) ui-monospace,monospace;color:#f0dfb2;letter-spacing:1px}
#lives{font-size:clamp(12px,2.4cqw,24px);letter-spacing:0;color:var(--gold);white-space:nowrap}
.hud-actions{display:flex;gap:clamp(4px,.8cqw,8px);pointer-events:auto}
.hud-actions button{width:clamp(32px,4.8cqw,48px);height:clamp(32px,4.8cqw,48px);min-width:0;min-height:0;background:#14281bdd;font-size:clamp(18px,2.8cqw,26px);padding:0;line-height:1}
@container(max-width:550px){.stage-block{display:none}#weapon{max-width:70px;font-size:10px}.hud-stats{gap:8px}}
.is-menu .hud{visibility:hidden}.is-settings .hud{visibility:visible;pointer-events:none}.is-settings .hud-actions{pointer-events:none}
.touch-disabled #touch-layer{display:none!important}
.touch-docked #arena>#touch-layer{position:absolute;inset:auto 0 0;height:var(--dock-height);background:#162b22;border-top:1px solid var(--line)}
.touch-docked #drag-zone{top:0}
.touch-docked #touch-layer{--pad-size:110px}
.touch-docked .action-controls button{width:70px;height:70px}
.touch-docked .action-controls #fire-control{width:85px;height:85px}
.is-settings #touch-layer{visibility:visible}.is-settings #touch-layer *{pointer-events:none}
.is-settings .menu-overlay{background:#10261a70;backdrop-filter:none}
.setting input[type=text],.score-entry input{width:210px;max-width:100%;border:1px solid var(--line);border-radius:6px;padding:9px;background:#132c20;color:#e5e8d2;user-select:text;-webkit-user-select:text;touch-action:auto}
.binding-row,.binding-header{display:grid;grid-template-columns:1fr 110px 110px;gap:8px;align-items:center;margin:7px 0;font-size:12px}
.binding-header{font-size:10px;color:var(--dim)}
.binding-row button{font-size:12px;padding:6px;min-height:38px}
.settings-actions{position:sticky;bottom:-1px;display:flex;gap:12px;padding:12px 0;background:#193024;z-index:2}
.settings-actions button{flex:1}
.score-person{flex:1;display:flex;flex-direction:column;gap:4px}.score-person b{font-size:12px;color:#e1d2a6}.score-person strong{font-size:18px}
.score-entry{display:grid;grid-template-columns:1fr auto;gap:9px;margin-top:20px;border-top:1px solid var(--line);padding-top:16px;font-size:12px}
.score-entry label,.score-entry p{grid-column:1/-1;margin:0;color:var(--dim)}.score-entry input{width:100%}
@media(max-width:600px){.binding-row,.binding-header{grid-template-columns:1fr 85px 85px;gap:5px}.setting input[type=text]{width:100%}.menu-panel{padding:20px}.menu-panel.wide{width:calc(100% - 20px)}}