/* Labels and icons are baked into the atlas; controls have no selectable text. */
#touch,#touch *,#pause{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none}
body.playing #touch{inset:auto max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));gap:20px;align-items:end}
body.playing #touch .actions{display:grid;grid-template-columns:repeat(3,var(--touch-size));grid-template-rows:repeat(2,var(--touch-size));gap:9px;--touch-size:clamp(52px,8.5vw,92px);pointer-events:none}
body.playing #touch .actions button{display:block;width:var(--touch-size);height:var(--touch-size);padding:0;border:0;border-radius:50%;background-color:transparent;background-image:url('assets/ui/touch-buttons-v160.png');background-repeat:no-repeat;background-size:300% 200%;background-position:var(--tx) var(--ty);color:transparent;font-size:0!important;line-height:0;pointer-events:auto;overflow:hidden;box-shadow:0 4px 7px #0006;filter:brightness(.96);transform:translateY(0);transition:transform 60ms ease,filter 60ms ease,box-shadow 60ms ease;isolation:isolate}
#touch [data-action=cycle]{--tx:0%;--ty:0%}#touch [data-action=throw]{--tx:50%;--ty:0%}#touch [data-action=skill]{--tx:100%;--ty:0%}#touch [data-action=special]{--tx:0%;--ty:100%}#touch [data-action=jump]{--tx:50%;--ty:100%}#touch [data-action=attack]{--tx:100%;--ty:100%}
body.playing #touch .actions button.is-pressed,body.playing #touch .actions button:active{transform:translateY(3px) scale(.94);filter:brightness(1.32) saturate(1.15);box-shadow:0 0 15px #f6c87299,0 1px 2px #000b}
body.playing #touch .actions button:focus-visible{outline:3px solid #fff2b9;outline-offset:2px}
body.playing #touch #stick{width:clamp(94px,15vw,166px);height:clamp(94px,15vw,166px);border:3px solid #ad814d;border-radius:50%;background:radial-gradient(circle,#16383ae8 0 46%,#071f23d9 48% 66%,#cc9c58a8 67% 69%,#09232acc 70%);box-shadow:inset 0 2px 12px #0009,0 3px 8px #0006}
body.playing #touch #stick i{left:30%;top:30%;width:40%;height:40%;border:2px solid #f2d18e;background:radial-gradient(circle at 35% 25%,#f1d496,#be8e47 65%,#81572b);box-shadow:0 4px 8px #0008,inset 0 1px 3px #fff6}
body.playing #touch #stick.is-pressed{border-color:#efca80;box-shadow:inset 0 2px 12px #0009,0 0 12px #e9bd6044}
@media(max-width:600px) and (orientation:portrait){body.playing #touch{gap:10px;bottom:max(10px,env(safe-area-inset-bottom))}body.playing #touch .actions{gap:6px;--touch-size:clamp(48px,13vw,60px)}}
@media(prefers-reduced-motion:reduce){body.playing #touch .actions button{transition:none}}

body.playing #stage,body.playing #game,body.playing #hud{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
