*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0b0d18}body{font-family:monospace}#game{width:100%;height:100%;display:block}canvas{display:block;image-rendering:pixelated;touch-action:none;outline:none}body:after{content:"";pointer-events:none;position:fixed;top:0;right:0;bottom:0;left:0;box-shadow:inset 0 0 80px #0005}#load-error{color:#fff;padding:40px;max-width:600px;line-height:1.6}body{overscroll-behavior:none}#touch-controls{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}#touch-controls button,.dpad{pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent}.dpad{position:absolute;left:max(16px,env(safe-area-inset-left));bottom:max(28px,env(safe-area-inset-bottom));width:156px;height:156px;border-radius:28px;background:#172238c9;border:2px solid #71859d;box-shadow:0 5px #080f21,0 0 0 5px #0d182766;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);color:#dbe8f4;font:700 25px monospace}.dpad span{display:grid;place-items:center;border-radius:13px;pointer-events:none}.dpad .up{grid-area:1/2}.dpad .left{grid-area:2/1}.dpad .center{grid-area:2/2;font-size:10px;color:#aec3d9}.dpad .right{grid-area:2/3}.dpad .down{grid-area:3/2}.dpad.up .up,.dpad.down .down,.dpad.left .left,.dpad.right .right{background:#72dac1;color:#14283c}.touch-actions{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(28px,env(safe-area-inset-bottom));width:185px;height:156px}.touch-actions button{position:absolute;border-radius:50%;border:2px solid #d7e6ed;font:700 13px monospace;color:#fff;box-shadow:0 5px #081225,0 0 0 4px #0d182755;width:72px;height:72px;text-shadow:1px 2px #172238}.touch-actions .hit{right:0;bottom:0;width:86px;height:86px;background:#a34367e8;font-size:18px}.touch-actions .jump{left:0;bottom:0;background:#426d9be8}.touch-actions .super{right:18px;top:0;background:#337c78e8}.touch-actions .pressed{transform:translateY(3px);filter:brightness(1.55);box-shadow:0 2px #081225}.touch-actions .charging{opacity:.5}.touch-utility{position:absolute;left:50%;transform:translate(-50%);bottom:max(8px,env(safe-area-inset-bottom));display:flex;gap:8px}.touch-utility button{min-width:64px;min-height:44px;background:#172238e8;border:1px solid #71859d;border-radius:10px;color:#dbe8f4;font:700 10px monospace}.touch-hint{display:none;position:absolute;left:0;right:0;bottom:230px;margin:0;text-align:center;color:#aebfd4;font:700 11px monospace;letter-spacing:1px}@media(orientation:portrait){.touch-hint{display:block}}@media(orientation:portrait)and (min-width:700px){.touch-hint{bottom:260px}}@media(orientation:portrait){body.touch-playing #game{height:calc(100dvh - 220px)}.touch-playing{background:linear-gradient(#0b0d18 62%,#1b2942)}.dpad,.touch-actions{bottom:max(65px,calc(env(safe-area-inset-bottom) + 48px))}.touch-utility{bottom:max(8px,env(safe-area-inset-bottom))}}@media(orientation:landscape)and (max-height:460px){.dpad{width:132px;height:132px;bottom:max(18px,env(safe-area-inset-bottom))}.touch-actions{height:137px;bottom:max(18px,env(safe-area-inset-bottom))}.touch-actions button{width:62px;height:62px}.touch-actions .hit{width:74px;height:74px}.touch-utility button{min-height:36px}}@media(min-width:700px)and (min-height:700px){.dpad{width:184px;height:184px}.touch-actions{width:220px;height:184px}.touch-actions button{width:84px;height:84px;font-size:15px}.touch-actions .hit{width:100px;height:100px;font-size:21px}body.touch-playing #game{height:calc(100dvh - 245px)}}