[hidden]{display:none!important}*{box-sizing:border-box}body{margin:0;background:#070914;color:#eaf4ff;font-family:system-ui,Segoe UI,sans-serif}#shell{width:min(1100px,100vw);padding:12px}canvas{display:block;width:100%;aspect-ratio:16/9;background:#070d23;border:1px solid #476078;border-radius:8px;image-rendering:pixelated;touch-action:none}p{margin:9px 0;color:#acc7e5;font-size:13px}button{font:inherit;color:#fff;background:#243a61;border:1px solid #7ab5dd;border-radius:7px;padding:10px 18px;cursor:pointer}button:hover,button:focus{background:#40659b}.panel{position:relative}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#03091cbb;text-align:center;border-radius:8px}.card{max-width:min(600px,94%);background:#0b1834ef;border:1px solid #77bdec;border-radius:16px;padding:18px 25px;box-shadow:0 0 38px #0088ff25}.card h1{margin:0 0 8px;letter-spacing:2px}.card small{color:#b5d2e8}.buttons{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}.difficulty.selected{border-color:#ffbf61;background:#5a3658}#ranking{max-height:156px;overflow:auto;text-align:left;font-size:13px;margin-top:12px}#ranking table{width:100%;border-collapse:collapse}td,th{padding:3px 7px;border-bottom:1px solid #34425e}#mobile{display:none;gap:8px;justify-content:space-between;margin-top:8px}#mobile button{touch-action:none;-webkit-user-select:none;user-select:none;min-width:55px}@media(pointer:coarse){#mobile{display:flex}}.volumes{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;margin-top:12px;font-size:13px;color:#cfe3f5}.volumes label{display:flex;align-items:center;gap:6px}.volumes input{width:120px;accent-color:#ffbf61}.volumes output{min-width:3.2em;text-align:right;font-variant-numeric:tabular-nums}html,body{height:100%;overscroll-behavior:none}@media(pointer:coarse){body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}.card{padding:10px 14px;max-height:92%;overflow:auto}.card h1{font-size:20px;margin-bottom:4px}.card small{display:none}.buttons{margin-top:8px}.card button{padding:9px 14px;min-height:44px}#mobile{display:flex;position:fixed;left:0;right:0;bottom:0;justify-content:space-between;align-items:flex-end;pointer-events:none;z-index:5;padding:0 max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));margin:0}#mobile button{pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:#1b2c4d88;border:1px solid #9fd2ff99;color:#fff;font-size:22px;padding:0;border-radius:14px}#mobile button:active{background:#5a8fd0cc}.dpad{display:grid;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(3,64px);gap:4px}.dpad .up{grid-area:1/2}.dpad .left{grid-area:2/1}.dpad .right{grid-area:2/3}.dpad .down{grid-area:3/2}.sys{display:flex;flex-direction:column;gap:10px}.sys button{width:60px;height:60px;border-radius:50%!important}}@media(pointer:coarse)and (orientation:landscape){.dpad,.sys{opacity:.75}}@media(pointer:coarse)and (orientation:portrait){.dpad{grid-template-columns:repeat(3,68px);grid-template-rows:repeat(3,68px)}#mobile{bottom:0}}@media(pointer:fine){#mobile{display:none!important}}:root{--app-h:100vh;--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px)}@supports (height:100dvh){:root{--app-h:100dvh}}html,body{margin:0;padding:0;width:100%;height:var(--app-h);overflow:hidden}body{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}#shell{margin:0;padding:0;flex:none;--avail-w:calc(100vw - var(--sal) - var(--sar) - 16px);--avail-h:calc(var(--app-h) - var(--sat) - var(--sab) - 16px);width:min(1100px,var(--avail-w),calc(var(--avail-h) * 16 / 9))}@media(pointer:coarse){#shell{--avail-w:calc(100vw - var(--sal) - var(--sar) - 8px);--avail-h:calc(var(--app-h) - var(--sat) - var(--sab) - 8px)}.card{max-height:calc(100% - 8px);overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y}}@media(pointer:coarse)and (orientation:portrait){.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:6;border-radius:0;background:#03091cdd;padding:calc(var(--sat) + 8px) calc(var(--sar) + 8px) calc(var(--sab) + 8px) calc(var(--sal) + 8px);overflow:auto}.card{max-height:100%;max-width:100%}}