:root{color-scheme:dark;--navy:#06142a;--blue:#145184;--gold:#ffd31a;--red:#e63e4c}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#020713;font-family:"Courier New",monospace}
body{display:grid;place-items:center;padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));background:radial-gradient(ellipse at 50% 20%,#17456f 0,#081a35 38%,#020713 78%)}
.cabinet{width:min(1200px,100%);display:grid;gap:7px}.topbar{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border:3px solid #f2b51c;background:linear-gradient(#153f6c,#0b2547);box-shadow:inset 0 0 0 2px #071426,0 4px 18px #0008}.brand{display:flex;align-items:baseline;gap:10px;color:var(--gold);text-shadow:2px 2px #c82f40}.brand strong{font-size:22px;letter-spacing:3px}.brand em{font-size:11px;color:#fff;font-style:normal;letter-spacing:2px}.sound{border:2px solid #8eb7d6;background:#071a34;color:#fff;font:900 12px "Courier New",monospace;padding:8px 10px;cursor:pointer}.screen-wrap{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100vh - 67px);margin:auto;border:5px solid #0b101c;outline:3px solid #647f99;overflow:hidden;box-shadow:0 12px 38px #000}.screen-wrap:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;background:linear-gradient(#fff0 50%,#00000012 50%);background-size:100% 4px;mix-blend-mode:multiply}canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;background:#07152b}.overlay{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:24px;background:radial-gradient(circle at 50% 45%,#174e7ed9,#06142af5 70%);color:#fff}.overlay.hidden{display:none}.belt{background:#0b111b;border:3px solid #ffd31a;padding:7px 15px;font-weight:900;font-size:13px;letter-spacing:2px}.overlay h1{font-size:clamp(32px,7vw,72px);line-height:.72;letter-spacing:6px;color:#fff;margin:28px 0 18px;text-shadow:5px 5px #d93445,9px 9px #08101d}.overlay h1 span{font-size:.42em;color:#ffd31a;letter-spacing:3px}.overlay p{font-weight:bold;font-size:clamp(13px,2vw,18px);margin:0 0 12px}.overlay button{font:900 18px "Courier New",monospace;padding:13px 22px;margin:12px;background:#ffd31a;color:#07152b;border:3px solid #fff3a0;box-shadow:6px 6px #c92d3e;cursor:pointer}.overlay button:active{transform:translate(4px,4px);box-shadow:2px 2px #c92d3e}.overlay small{font-weight:bold;color:#b9dcf6}.controls{position:absolute;inset:auto 12px 12px;z-index:3;display:none;justify-content:space-between;pointer-events:none}.controls div{display:flex;gap:10px}.controls button{pointer-events:auto;width:70px;height:54px;border:3px solid #b1c7dc;border-radius:6px;background:#0b2848cc;color:white;font:900 16px "Courier New",monospace;box-shadow:0 5px #020713;touch-action:none}.controls .jump{background:#e3ae18dc;color:#07152b}.controls .kick{background:#cf3343dc}.controls button.pressed{transform:translateY(4px);box-shadow:0 1px #020713}.rotate{display:none;position:absolute;inset:0;z-index:8;background:#06142af5;align-items:center;justify-content:center;flex-direction:column;text-align:center;font-size:44px;color:#ffd31a}.rotate strong{font-size:19px;margin-top:10px;color:#fff}.rotate span{font-size:12px;color:#9cc5e4;margin-top:5px}
@media(pointer:coarse){.controls{display:flex}}
@media(max-height:520px){.topbar{height:38px}.brand strong{font-size:16px}.brand em{display:none}.sound{padding:6px}.screen-wrap{max-height:calc(100vh - 53px)}}
@media(orientation:portrait) and (max-width:700px){.rotate{display:flex}}

/* Viewport-fit overrides: width is constrained by both available width and height. */
body{padding:6px}
.cabinet{width:min(1200px,calc(100vw - 12px),calc((100dvh - 66px)*16/9))}
.toolbar{display:flex;gap:7px}
.sound{white-space:nowrap}
.screen-wrap{max-height:none}
@media(max-height:620px){body{padding:3px}.cabinet{width:min(1200px,calc(100vw - 6px),calc((100dvh - 47px)*16/9));gap:3px}.topbar{height:38px;padding:0 8px;border-width:2px}.brand strong{font-size:16px}.brand em{display:none}.sound{font-size:10px;padding:5px 7px}.screen-wrap{border-width:3px;outline-width:2px}.controls{inset:auto 8px 8px}.controls button{width:62px;height:47px;font-size:13px}}
@media(max-width:620px){.brand em,.brand span{display:none}.brand strong{font-size:16px}.sound{font-size:9px;padding:5px}.toolbar{gap:4px}}
:fullscreen body{padding:0}:fullscreen .cabinet{width:min(100vw,calc(100dvh*16/9));gap:0}:fullscreen .topbar{display:none}:fullscreen .screen-wrap{border:0;outline:0}

/* Fluid game viewport: the renderer adapts its camera to this exact area. */
body{display:block;padding:0}
.cabinet{width:100vw;height:100dvh;max-width:none;display:flex;flex-direction:column;gap:0}
.topbar{flex:0 0 48px;width:100%;border-width:0 0 3px;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
.screen-wrap{flex:1 1 auto;width:100%;height:calc(100dvh - 48px);min-height:0;aspect-ratio:auto;border:0;outline:0;box-shadow:none}
canvas{position:absolute;inset:0;width:100%;height:100%}
@media(max-height:620px){.cabinet{width:100vw;height:100dvh}.topbar{flex-basis:40px}.screen-wrap{height:calc(100dvh - 40px)}.controls button{width:clamp(58px,8vw,88px);height:clamp(44px,11vh,68px)}}
:fullscreen .cabinet{width:100vw;height:100dvh}:fullscreen .screen-wrap{height:100dvh}
.quit{position:absolute;z-index:6;right:max(10px,env(safe-area-inset-right));top:72px;border:2px solid #ff9cab;background:#7d1724dd;color:#fff;padding:7px 10px;font:900 11px "Courier New",monospace;cursor:pointer;box-shadow:3px 3px #12040a}.quit.hidden{display:none}.quit:active{transform:translate(2px,2px);box-shadow:1px 1px #12040a}
@media(max-height:620px){.quit{top:66px;font-size:9px;padding:5px 7px}}