:root{--btn-scale:1;--ink:#cdd2de;--bg:#08090c;--panel:#14161d;--edge:#2a2e3a;--hot:#b3402e}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;touch-action:none;margin:0;padding:0;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;overflow:hidden}#game{place-items:center;display:grid;position:fixed;inset:0}#game canvas{display:block}.pad{pointer-events:none;z-index:10;padding:max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));position:fixed;inset:0}.pad-side{bottom:max(14px, env(safe-area-inset-bottom));position:absolute}.pad-left{left:max(14px, env(safe-area-inset-left))}.pad-right{right:max(14px, env(safe-area-inset-right));width:calc(256px * var(--btn-scale));height:calc(126px * var(--btn-scale))}.btn{pointer-events:auto;touch-action:none;border:2px solid var(--edge);color:var(--ink);font:inherit;letter-spacing:.5px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#1a1d268c;border-radius:50%;place-items:center;margin:0;padding:0;font-weight:700;transition:background 60ms linear,transform 60ms linear;display:grid;position:absolute}.btn.is-down{border-color:var(--hot);background:#b3402ea6;transform:scale(.94)}.btn-dir{width:calc(86px * var(--btn-scale));height:calc(86px * var(--btn-scale));font-size:calc(26px * var(--btn-scale));bottom:0}.pad-left{width:calc(190px * var(--btn-scale));height:calc(86px * var(--btn-scale))}.btn-left{left:0}.btn-right{left:calc(100px * var(--btn-scale))}.btn-punch{width:calc(88px * var(--btn-scale));height:calc(88px * var(--btn-scale));font-size:calc(30px * var(--btn-scale));bottom:0;right:0}.btn-kick{right:calc(92px * var(--btn-scale));bottom:calc(16px * var(--btn-scale));width:calc(84px * var(--btn-scale));height:calc(84px * var(--btn-scale));font-size:calc(30px * var(--btn-scale))}.btn-jump{right:calc(180px * var(--btn-scale));bottom:calc(48px * var(--btn-scale));width:calc(76px * var(--btn-scale));height:calc(76px * var(--btn-scale));font-size:calc(16px * var(--btn-scale))}#debug-toggle{top:max(8px, env(safe-area-inset-top));right:max(8px, env(safe-area-inset-right));z-index:30;border:1px solid var(--edge);width:38px;height:38px;color:var(--ink);pointer-events:auto;background:#14161dbf;border-radius:10px;font-size:18px;position:fixed}#debug-panel{top:max(8px, env(safe-area-inset-top));left:max(8px, env(safe-area-inset-left));z-index:30;border:1px solid var(--edge);background:#101218f0;border-radius:12px;width:min(340px,48vw);max-height:calc(100dvh - 152px);padding:12px 14px;font-size:12px;line-height:1.5;position:fixed;overflow-y:auto}#debug-panel[hidden]{display:none}#debug-panel h2{letter-spacing:1.5px;color:#7d879c;justify-content:space-between;margin:0 0 10px;font-size:11px;display:flex}#debug-panel .row{align-items:center;gap:8px;margin-bottom:8px;display:flex}#debug-panel .row>span{color:#7d879c;flex:0 0 92px}#debug-panel input[type=range]{min-width:0;accent-color:var(--hot);flex:1}#debug-panel output{text-align:right;font-variant-numeric:tabular-nums;flex:0 0 54px}.seg{flex:1;gap:4px;display:flex}.seg button,.row-actions button{border:1px solid var(--edge);color:var(--ink);font:inherit;background:#1a1d26;border-radius:6px;flex:1;padding:5px 4px;font-size:11px}.seg button.is-active{background:var(--hot);border-color:var(--hot);color:#fff}.hint{color:#6c768c;margin:0 0 10px;font-size:11px;line-height:1.45}#dbg-readout{color:#93d0a5;white-space:pre;background:#0c0e13;border-radius:8px;margin:0 0 10px;padding:8px;font-size:11px;line-height:1.5;overflow-x:auto}#dbg-fps{color:#93d0a5}#rotate-overlay{z-index:50;background:var(--bg);text-align:center;place-items:center;display:none;position:fixed;inset:0}.rot-icon{margin-bottom:12px;font-size:46px}#rotate-overlay small{color:#6c768c}@media (orientation:portrait){#rotate-overlay{display:grid}}