:root{--pad-size:1;--pad-opacity:.48;--pad-unit:clamp(108px,26vh,160px);--safe-left:max(14px,env(safe-area-inset-left));--safe-right:max(14px,env(safe-area-inset-right));--safe-bottom:max(clamp(48px,14vh,92px),env(safe-area-inset-bottom))}
html,body{width:100%;height:100%;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html{overflow:hidden}body{position:fixed;inset:0;contain:strict}#screen{overflow:hidden}#screen canvas{max-width:100%;max-height:100%}
#game-tools{position:fixed;z-index:95;top:max(12px,env(safe-area-inset-top));right:var(--safe-right);display:flex;gap:8px}
#game-tools button{width:38px;height:34px;border:1px solid #ffffff26;border-radius:11px;background:#071321a6;color:#e6efff;font:22px/1 system-ui;touch-action:none;cursor:pointer}
#game-tools button:active{background:#7ba8d95c}#fps{right:auto;left:max(8px,env(safe-area-inset-left));top:max(8px,env(safe-area-inset-top))}
#touch-controls{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:var(--pad-opacity)}
#touch-dpad{position:absolute;bottom:var(--safe-bottom);left:var(--safe-left);width:var(--pad-unit);height:var(--pad-unit);display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:3px;transform:scale(var(--pad-size));transform-origin:bottom left}
.direction,.action{border:1.5px solid #e6f4ffac;color:#fff;text-shadow:0 1px 4px #000;box-shadow:0 3px 14px #0005;background:#193048c9;pointer-events:auto;touch-action:none;padding:0;font:600 clamp(12px,3vh,17px)/1 system-ui}
.direction{border-radius:9px;font-size:20px}.direction.up{grid-area:1/2}.direction.left{grid-area:2/1}.direction.right{grid-area:2/3}.direction.down{grid-area:3/2}
#touch-actions{position:absolute;bottom:calc(var(--safe-bottom) + var(--pad-unit)*.265);right:var(--safe-right);display:flex;align-items:center;gap:10px;transform:scale(var(--pad-size));transform-origin:bottom right}
.action{width:calc(var(--pad-unit)*.47);aspect-ratio:1;border-radius:50%}.action.jump{background:#254e61c9}.action.attack{background:#85512bc9;border-color:#ffe2b7cb}
.action.is-down,.direction.is-down{background:#e6f2ffd9;color:#102237;border-color:#fff;box-shadow:0 0 22px #c5e5ff80}button:focus-visible{outline:2px solid #a1caff;outline-offset:3px}
#touch-settings{position:fixed;z-index:130;width:min(350px,88vw);padding:20px 24px;border:1px solid #86a9d94d;border-radius:18px;background:#102033f5;color:#e4edfa;box-shadow:0 20px 80px #0009;font:15px/1.6 system-ui}
#touch-settings::backdrop{background:#0008}#touch-settings header{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}#touch-settings header button{border:0;background:transparent;color:#c6d9ef;font:26px/1 system-ui;padding:4px 6px}#touch-settings label{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:16px 0}#touch-settings select{background:#1e3550;color:inherit;border:1px solid #7092bb66;border-radius:6px;padding:5px 10px}#touch-settings input{width:170px;accent-color:#c4dfff}#touch-settings small{font-size:12px;color:#9fb6cf}
#rotate-note{position:fixed;top:65px;left:50%;transform:translateX(-50%);z-index:61;padding:7px 14px;border-radius:20px;background:#102338bd;color:#ccdaed;white-space:nowrap;font:12px system-ui;pointer-events:none}
@media(max-height:360px){:root{--pad-unit:105px;--safe-bottom:max(40px,12vh,env(safe-area-inset-bottom))}#game-tools{top:7px}#game-tools button{width:32px;height:29px}#touch-settings{padding:10px 20px}#touch-settings label{margin:8px 0}}