:root{color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#070d18;color:#d9e9ff;font:14px Arial,sans-serif;display:grid;place-items:center}main{width:min(100%,1000px);padding:12px}.toolbar{display:flex;align-items:center;gap:8px;margin:0 auto 10px;max-width:800px;flex-wrap:wrap}form{display:flex;align-items:center;gap:8px;margin-right:auto}input,button{font:inherit}button{border:1px solid #366d9d;background:#0c2850;color:#e3f5ff;padding:7px 12px;cursor:pointer;border-radius:4px}button:hover{background:#155894}button:disabled{opacity:.5;cursor:default}input{background:#061d3e;border:1px solid #4073ac;color:#fff;padding:7px;width:150px}#stage{position:relative;width:min(100%,800px);aspect-ratio:4/3;margin:auto;background:#000;outline:1px solid #1b3652}canvas{display:block;width:100%;height:100%;outline:none;image-rendering:pixelated}#controls,#native-fields{position:absolute;inset:0;pointer-events:none}#controls button{position:absolute;border:0;background:transparent;padding:0;margin:0;opacity:0;pointer-events:auto;border-radius:0}#controls button:focus-visible{opacity:1;background:transparent;outline:2px solid #fff900}#native-fields input{position:absolute;pointer-events:auto;padding:0 3px;background:transparent;border:0;font:10px "Courier New",monospace;color:transparent;caret-color:transparent;height:20px;outline:1px solid transparent}#native-fields input:focus{outline-color:#89b4e9}#status,.keys{max-width:800px;margin:8px auto;font-size:12px;color:#a8bed7}.keys{color:#7a96b7}#performance{font-size:12px;font-variant-numeric:tabular-nums;color:#91a7be}


#stage{display:grid;place-items:center;isolation:isolate}
#game-view{position:relative;width:100%;height:100%;aspect-ratio:4/3;z-index:1}
#fullscreen-decor{display:none;position:absolute;inset:0;pointer-events:none;z-index:0}
:is(#stage:fullscreen,#stage:-webkit-full-screen,#stage.is-fullscreen){position:fixed;inset:0;width:100vw;height:100vh;max-width:none;aspect-ratio:auto;margin:0;overflow:hidden;outline:0;background:#061733;z-index:1000}
:is(#stage:fullscreen,#stage:-webkit-full-screen,#stage.is-fullscreen) #game-view{width:min(100vw,calc(100vh * 4 / 3));height:min(100vh,calc(100vw * 3 / 4))}
:is(#stage:fullscreen,#stage:-webkit-full-screen,#stage.is-fullscreen) #fullscreen-decor{display:block}
#fullscreen-decor[hidden]{display:none}

/* The full-screen menu frame is reconstructed at the display edge. */
:is(#stage:fullscreen,#stage:-webkit-full-screen,#stage.is-fullscreen).fullscreen-menu-extend #game{clip-path:inset(1.833333% 1.5% 2% 1.5% round 0 0 3% 3% / 0 0 4% 4%)}

/* Controller focus stays inside the original hitboxes, including fullscreen. */
#controls button[data-gamepad-focus="true"]{opacity:1;background:transparent;color:transparent;font-size:0;outline:2px solid #fff000;outline-offset:-2px;box-shadow:inset 0 0 7px #00cfff;border-radius:4px}
.gamepad-help{max-width:800px;margin:10px auto;border:1px solid #28558a;border-radius:6px;background:#071e3c;color:#bed8f5;font-size:12px;padding:10px 12px}
.gamepad-help summary{color:#8edbff;cursor:pointer;font-weight:bold}
.gamepad-help p{line-height:1.5;margin:10px 0 0}
.gamepad-help dl{display:grid;grid-template-columns:minmax(140px,1fr) 2fr;gap:8px 16px;margin-bottom:0}
.gamepad-help dt{color:#ffdb70}.gamepad-help dd{margin:0;line-height:1.4}
@media(max-width:520px){.gamepad-help dl{grid-template-columns:1fr;gap:4px}.gamepad-help dd{margin-bottom:8px}}

/* Phone controls surround the unchanged 800x600, 4:3 game surface. */
#touch-controls,#touch-panel,#touch-menu-open,#touch-menu-screen{display:none}
body.touch-immersive,body.touch-menu-visible{overflow:hidden;overscroll-behavior:none}
#stage.touch-enabled:not(.touch-playing):not(.touch-expanded){display:block;aspect-ratio:auto;padding-bottom:56px}
#stage.touch-enabled:not(.touch-playing):not(.touch-expanded) #game-view{height:auto;aspect-ratio:4/3}
#stage.touch-enabled #touch-menu-open,#stage.touch-enabled #touch-menu-screen{display:block;position:absolute;bottom:6px;min-height:44px;z-index:5;font-size:13px;touch-action:manipulation}
#touch-menu-open{left:8px}#touch-menu-screen{right:8px}
#stage:is(.touch-playing,.touch-expanded){position:fixed;inset:0;width:100vw;height:var(--touch-height,100dvh);max-width:none;margin:0;aspect-ratio:auto;z-index:1500;display:grid;place-items:center;padding:0;background:radial-gradient(ellipse,#0b3e7c,#03122c);overflow:hidden}
#stage.touch-expanded #game-view{width:min(calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)),calc((var(--touch-height,100dvh) - 72px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 4 / 3));height:auto;aspect-ratio:4/3;margin-bottom:56px}
#stage.touch-playing #game-view{width:min(calc(100vw - 264px - env(safe-area-inset-left) - env(safe-area-inset-right)),calc((var(--touch-height,100dvh) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 4 / 3));height:auto;aspect-ratio:4/3}
#stage.touch-playing #game{touch-action:none}
#stage.touch-playing #touch-controls{display:block;position:absolute;inset:0;z-index:3;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#touch-controls button,#touch-stick{touch-action:none;pointer-events:auto;-webkit-tap-highlight-color:transparent}
#touch-stick{position:absolute;left:max(12px,env(safe-area-inset-left));bottom:max(24px,env(safe-area-inset-bottom));width:112px;height:112px;border:3px solid #45cdff;border-radius:50%;background:radial-gradient(circle,#156ad9,#05255b);box-shadow:0 0 0 3px #001b49,inset 0 0 18px #0009;display:grid;place-items:center}
.touch-arrows{position:absolute;font-size:84px;line-height:1;color:#b7eaff5c;pointer-events:none}
#touch-knob{display:block;width:48px;height:48px;border-radius:50%;border:2px solid #ffe76c;background:linear-gradient(#8af5ff,#1489de);box-shadow:0 3px 8px #0007;transform:translate(var(--stick-x,0px),var(--stick-y,0px));pointer-events:none}
#touch-stick[data-direction]:not([data-direction=""]){border-color:#ffe76c}
/* Safari overrides selection on individual descendants as well as the surface. */
#stage.touch-enabled canvas,#stage.touch-enabled #controls button,#touch-controls,#touch-controls *,#touch-menu-open,#touch-menu-screen{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}
#stage.touch-enabled #native-fields input,#touch-panel input{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}

.touch-actions{position:absolute;right:max(12px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:12px}
.touch-actions button{display:flex;align-items:center;justify-content:center;flex-direction:column;border:3px solid #ffe269;box-shadow:0 0 0 2px #00235a,inset 0 2px #fffb;border-radius:50%;color:#fff;font-size:11px;font-weight:bold;text-shadow:0 1px 2px #002354;padding:5px;background:linear-gradient(#26b9ff,#0751c2)}
.touch-actions button span{font-size:25px;line-height:1.1}.touch-actions #touch-bomb{width:88px;height:88px;background:linear-gradient(#ffb54c,#d9520a)}
.touch-actions #touch-special{width:68px;height:68px}.touch-actions button[aria-pressed="true"]{filter:brightness(1.3);transform:scale(.94)}
#touch-controls .touch-screen{position:absolute;right:max(12px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top));min-height:44px;width:112px;pointer-events:auto;font-size:12px}
#stage.touch-playing #touch-menu-open{top:max(8px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));bottom:auto;max-width:112px;min-height:44px}
#stage.touch-playing #touch-menu-screen{display:none}.touch-orientation{display:none}
#stage.touch-enabled #touch-panel:not([hidden]){display:flex;flex-direction:column;position:fixed;z-index:1700;inset:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));max-width:660px;height:calc(var(--touch-height,100dvh) - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));margin:0 auto;border:3px solid #ffc82f;border-radius:16px;background:linear-gradient(125deg,#0754b8,#041b53);box-shadow:0 0 0 100vmax #001026cf;color:#edf9ff;overflow:hidden}
#touch-panel header{display:flex;justify-content:space-between;align-items:center;gap:12px;background:linear-gradient(#16c9ff,#0864be);border-bottom:2px solid #002b65;padding:8px 12px;flex-shrink:0}#touch-panel h2{font-size:17px;margin:0;text-shadow:0 2px #003173}
#touch-panel button{min-height:44px;font-size:15px;border:1px solid #4bd7ff;background:linear-gradient(#087bd3,#04377f);border-radius:8px;touch-action:manipulation;padding:10px;color:#f1fbff;text-align:center}
.touch-menu-content{overflow:auto;overscroll-behavior:contain;padding:12px;-webkit-overflow-scrolling:touch}
#touch-menu-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}#touch-menu-list button{overflow-wrap:anywhere;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px}#touch-menu-list button canvas{width:64px;height:80px;flex-shrink:0;pointer-events:none}
#touch-menu-fields label{display:block;font-size:14px;margin:0 0 10px}#touch-menu-fields input{display:block;width:100%;min-height:44px;margin-top:6px;padding:10px;font-size:16px;color:#fff;background:#021b49;border:1px solid #57b8ff;border-radius:6px}#touch-menu-fields>button{width:100%;margin-bottom:12px}
.touch-enabled #native-fields input{font-size:16px}
@media(orientation:portrait){
 #stage.touch-playing #game-view{position:absolute;top:max(68px,calc(env(safe-area-inset-top) + 56px));width:calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));height:auto;aspect-ratio:4/3}
 #stage.touch-playing .touch-orientation{display:block;position:absolute;bottom:220px;width:100%;text-align:center;font-size:12px;color:#9ec7ec;pointer-events:none}
}
@media(max-width:600px){main{padding:8px;width:100%}.toolbar{gap:6px}.toolbar button{min-height:44px;font-size:12px;padding:6px 8px}.toolbar form{flex-wrap:wrap;gap:6px}#account-name{max-width:180px;overflow-wrap:anywhere}.keys{font-size:11px}#touch-menu-list{grid-template-columns:repeat(2,minmax(0,1fr))}}

#game-shell.touch-enabled .toolbar button{min-height:44px}

/* Native hitboxes retain accessible labels without invisible text overflowing small screens. */
#controls button{overflow:hidden;color:transparent;font-size:0}

/* One language preference, shared by the entry page, toolbar and touch menu. */
.language-picker{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#e7f5ff;white-space:nowrap}
.language-picker select{font:inherit;min-height:38px;max-width:132px;padding:6px 25px 6px 9px;border:1px solid #45c7ff;border-radius:6px;color:#fff;background:#04336f;cursor:pointer}
.language-picker select:focus-visible{outline:2px solid #ffe878;outline-offset:2px}
.entry-header .language-picker>span{display:none}.entry-header .entry-tag{margin-left:auto}
.toolbar .language-picker{margin-left:auto}
.fan-notice{max-width:800px;margin:18px auto 4px;padding:0 8px;color:#fff;font:11px/1.6 Arial,sans-serif;text-align:center}
#touch-panel header{flex-wrap:wrap}#touch-panel .language-picker select{min-height:44px;font-size:14px}
@media(max-width:600px){.language-picker select{min-height:44px}.entry-header{gap:8px}.entry-header .language-picker select{max-width:112px;min-height:36px}.toolbar .language-picker>span,#touch-panel .language-picker>span{display:none}}