/* One two-thumb layout shared by every action game. Native scroll/menus remain free. */
:root{--thumb-edge:18px;--thumb-bottom:max(24px,env(safe-area-inset-bottom));--thumb-ring:112px;--thumb-action:72px}
@media(min-width:700px) and (min-height:550px){:root{--thumb-edge:44px;--thumb-bottom:max(40px,env(safe-area-inset-bottom));--thumb-ring:132px;--thumb-action:84px}}
:root[data-thumb-reach=close]{--thumb-edge:14px;--thumb-ring:104px;--thumb-action:68px}
:root[data-thumb-reach=wide]{--thumb-edge:34px;--thumb-ring:132px;--thumb-action:84px}
.thumb-reach{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-top:12px;border-top:1px solid #879caa33;padding-top:10px}
.thumb-reach>span{font-size:9px;letter-spacing:1px;width:100%;color:#adc3cf}
html[data-input=keyboard] .thumb-reach{display:none}
.thumb-zone{display:none}
html[data-input=touch] .thumb-zone{display:block;position:fixed;z-index:6;left:0;bottom:0;width:43%;height:min(48dvh,360px);touch-action:none;pointer-events:auto;user-select:none;-webkit-user-select:none;overflow:visible}
.thumb-ring{position:absolute;left:calc(var(--thumb-edge) + var(--thumb-ring)/2);top:calc(100% - var(--thumb-bottom) - var(--thumb-ring)/2 - 24px);width:var(--thumb-ring);height:var(--thumb-ring);border-radius:50%;transform:translate(-50%,-50%);border:1px solid #b8d8dc55;background:radial-gradient(circle,#17313b66 36%,#13313b33 38%,#11243155 70%);box-shadow:inset 0 0 0 9px #acdee70a;pointer-events:none}
.thumb-ring i{position:absolute;left:50%;top:50%;width:42%;height:42%;border-radius:50%;transform:translate(-50%,-50%);background:#b6d3d04d;border:1px solid #dfffe477;box-shadow:0 4px 15px #0002}
.thumb-ring span{position:absolute;inset:auto 0 9px;text-align:center;font:700 8px Arial;letter-spacing:1px;color:#e4f3e1}
.thumb-zone>small{position:absolute;bottom:10px;left:var(--thumb-edge);font:700 8px Arial;letter-spacing:.5px;color:#daece0;text-shadow:0 1px 4px #000;pointer-events:none}
.thumb-zone.engaged .thumb-ring{border-color:#d0ff72;background:#163442aa}
.thumb-zone.engaged .thumb-ring i{background:#caff6388;border-color:#d0ff72}
html[data-input=touch] #hud button,html[data-input=touch] #controls button{-webkit-touch-callout:none;touch-action:none}
html[data-input=touch] #hud button.pressed,html[data-input=touch] #controls button.pressed{box-shadow:0 0 0 3px #d8ff7940;filter:brightness(1.25)}
.touch-pause-options{margin:12px 0;color:#c6d9e2;border-block:1px solid #617b8855}
.touch-pause-options summary{min-height:48px;display:flex;align-items:center;cursor:pointer;font-size:12px}
.touch-pause-options>div{display:flex;gap:10px;flex-wrap:wrap;padding:10px 0}
.touch-pause-options button{min-height:48px;padding:12px;font-size:10px}
/* Bear Force: left pad; right jump/dash/bomb. Fire takes space only in manual mode. */
html[data-input=touch][data-game=strike] #hud .movement{display:none}
html[data-input=touch][data-game=strike] #hud .touch-controls{display:block;position:fixed;inset:0;padding:0;pointer-events:none;z-index:7}
html[data-input=touch][data-game=strike] #hud .actions{display:block;position:absolute;right:max(var(--thumb-edge),env(safe-area-inset-right));bottom:calc(var(--thumb-bottom) + 18px);width:170px;height:185px;pointer-events:none}
html[data-input=touch][data-game=strike] #hud .actions button{position:absolute;pointer-events:auto;border-radius:50%;margin:0;padding:6px;font-size:10px;letter-spacing:0;min-height:56px;min-width:56px;box-shadow:0 4px 18px #0003}
html[data-input=touch][data-game=strike] #hud #jump-touch{right:0;bottom:0;width:var(--thumb-action);height:var(--thumb-action);background:#d3ff58e8;color:#172b20;border-color:#d3ff58}
html[data-input=touch][data-game=strike] #hud #dash-touch{right:calc(var(--thumb-action) + 12px);bottom:2px;width:60px;height:60px}
html[data-input=touch][data-game=strike] #hud #grenade-touch{right:5px;bottom:calc(var(--thumb-action) + 16px);width:58px;height:58px;background:#243c4cdd}
html[data-input=touch][data-game=strike] #hud .actions .fire{right:80px;bottom:88px;width:70px;height:70px}
html[data-input=touch][data-auto-fire=true][data-game=strike] #hud .actions .fire{display:none}
html[data-input=touch][data-game=strike] #hud .hud-bottom{left:var(--thumb-edge);right:auto;bottom:calc(var(--thumb-bottom) + var(--thumb-ring) + 53px);display:block;pointer-events:none;z-index:7}
html[data-input=touch][data-game=strike] #hud #weapon{min-height:44px;width:134px;max-width:40vw;padding:8px 12px;border-radius:12px;pointer-events:auto;background:#122b3bc7}
html[data-input=touch][data-game=strike] #weapon small{font-size:8px}html[data-input=touch][data-game=strike] #weapon b{font-size:17px}
html[data-input=touch][data-game=strike] #weapon span,html[data-input=touch][data-game=strike] #ability-status{display:none}
html[data-input=touch][data-game=strike] #open-supply{left:50%;right:auto;bottom:calc(var(--thumb-bottom) + 188px);transform:translateX(-50%);min-height:48px;max-width:80%;z-index:8}
/* Duel: up on the pad jumps, down crouches. Keep primary attacks close to the thumb. */
html[data-input=touch][data-game=duel] #controls{padding:0;inset:0;pointer-events:none}
html[data-input=touch][data-game=duel] #controls .move-pad{position:absolute;left:var(--thumb-edge);bottom:calc(var(--thumb-bottom) + var(--thumb-ring) + 48px);display:flex;gap:8px;z-index:8}
html[data-input=touch][data-game=duel] #controls .move-pad [data-key=left],html[data-input=touch][data-game=duel] #controls .move-pad [data-key=right],html[data-input=touch][data-game=duel] #controls .move-pad [data-key=jump],html[data-input=touch][data-game=duel] #controls .move-pad [data-key=down]{display:none}
html[data-input=touch][data-game=duel] #controls .move-pad button{width:54px;height:48px;min-height:48px!important;border-radius:16px;font-size:9px!important}
html[data-input=touch][data-game=duel] #controls .attack-pad{position:absolute;right:max(var(--thumb-edge),env(safe-area-inset-right));bottom:calc(var(--thumb-bottom) + 18px);display:grid;grid-template-columns:repeat(2,min(var(--thumb-action),20vw));grid-template-rows:54px 48px var(--thumb-action);gap:9px;z-index:8}
html[data-input=touch][data-game=duel] #controls .attack-pad button{width:auto;min-width:0;min-height:48px!important;padding:5px;grid-column:auto;font-size:10px;border-radius:18px;line-height:1.2}
html[data-input=touch][data-game=duel] #controls .attack-pad [data-key=special]{grid-area:1/1}
html[data-input=touch][data-game=duel] #controls .attack-pad [data-key=ultimate]{grid-area:1/2}
html[data-input=touch][data-game=duel] #controls .attack-pad [data-key=block]{grid-area:2/1/3/3;border-radius:24px;background:#173746bb}
html[data-input=touch][data-game=duel] #controls .attack-pad [data-key=punch]{grid-area:3/1;border-radius:50%;background:#cee98adb;color:#152b20;font-size:12px}
html[data-input=touch][data-game=duel] #controls .attack-pad [data-key=kick]{grid-area:3/2;border-radius:50%;background:#314861df;font-size:12px}
html[data-input=touch][data-game=duel] #controls .attack-pad small{font-size:8px}
html[data-input=touch][data-game=duel] #tip,html[data-input=touch][data-game=duel] #ability-readout{display:none}
/* Arena already auto-aims. Only dash and charged power need the right thumb. */
html[data-input=touch][data-game=arena] #hud .joystick-wrap{display:none!important}
html[data-input=touch][data-game=arena] #hud .ability-controls{position:fixed;right:max(var(--thumb-edge),env(safe-area-inset-right));bottom:calc(var(--thumb-bottom) + 18px);display:flex;gap:12px;align-items:end;z-index:8}
html[data-input=touch][data-game=arena] #hud .ability-controls button{width:var(--thumb-action);height:var(--thumb-action);min-width:0;border-radius:50%;padding:8px;min-height:68px}
html[data-input=touch][data-game=arena] #hud .ability-controls #bear{margin-bottom:52px}
html[data-input=touch][data-game=arena] #hud .ability-controls .ability-symbol{font-size:20px}
html[data-input=touch][data-game=arena] #hud .ability-controls strong{font-size:9px}
/* Breach: floating movement, right look/fire, sticky aim, nearby-only Use. */
html[data-input=touch][data-game=breach] #hud #move-zone{display:none!important}
html[data-input=touch][data-game=breach] #hud #look-zone{position:fixed;top:80px;bottom:0;right:0;width:57%;z-index:1}
html[data-input=touch][data-game=breach] #hud .thumb-zone{height:calc(100dvh - 170px)}
html[data-input=touch][data-game=breach] #hud .touch-actions{position:fixed;right:max(var(--thumb-edge),env(safe-area-inset-right));bottom:calc(var(--thumb-bottom) + 38px);width:170px;height:170px;transform:none;z-index:8;pointer-events:none}
html[data-input=touch][data-game=breach] #hud .touch-actions button{border-radius:50%;font-size:10px;padding:6px;min-width:56px;min-height:56px}
html[data-input=touch][data-game=breach] #hud #fire{right:0;bottom:0;width:var(--thumb-action);height:var(--thumb-action);background:#718b39cc;font-size:10px}
html[data-input=touch][data-game=breach] #hud #aim{right:calc(var(--thumb-action) + 10px);bottom:2px;width:58px;height:58px}
html[data-input=touch][data-game=breach] #hud #reload{right:4px;bottom:calc(var(--thumb-action) + 12px);width:56px;height:56px}
html[data-input=touch][data-game=breach] #hud #interact{right:80px;bottom:90px;width:66px;height:66px;background:#caff63;color:#142620;font-weight:800}
html[data-input=touch][data-game=breach] #hud .tactical-actions{position:fixed;left:var(--thumb-edge);right:auto;bottom:calc(var(--thumb-bottom) + var(--thumb-ring) + 52px);flex-direction:row;gap:8px;z-index:8}
html[data-input=touch][data-game=breach] #hud .tactical-actions button{min-width:52px;min-height:48px;width:58px;padding:5px;border-radius:16px;font-size:9px}
html[data-input=touch][data-game=breach] #hud #build-cover{position:fixed;left:var(--thumb-edge);right:auto;bottom:calc(var(--thumb-bottom) + var(--thumb-ring) + 108px);width:64px;min-height:44px;z-index:8}
html[data-input=touch][data-game=breach] #hud .bottom-hud{bottom:7px;left:14px;right:14px;z-index:7}
html[data-input=touch][data-game=breach] #hud .vitals{padding:4px 8px}
html[data-input=touch][data-game=breach] #hud .vitals>b{font-size:24px}
html[data-input=touch][data-game=breach] #hud .vitals>div,html[data-input=touch][data-game=breach] #hud .vitals>small,html[data-input=touch][data-game=breach] #hud .ammo>small,html[data-input=touch][data-game=breach] #hud .mission-stats{display:none}
html[data-input=touch][data-game=breach] #hud .ammo{display:flex;align-items:center;gap:8px}
html[data-input=touch][data-game=breach] #hud .ammo button{min-height:44px;font-size:8px;padding:7px}
/* Runner: two lane taps on the left, jump/boost on the right. Swipe remains active. */
html.runner-touch #game .touch-controls{display:block;position:absolute;inset:0;pointer-events:none;z-index:8}
html.runner-touch #game .touch-controls button{position:absolute;width:60px;height:64px;bottom:var(--thumb-bottom);border-radius:20px;pointer-events:auto;touch-action:none}
html.runner-touch #game #left{left:var(--thumb-edge)}html.runner-touch #game #right{left:calc(var(--thumb-edge) + 70px)}
html.runner-touch #game #jump{right:var(--thumb-edge);left:auto;width:var(--thumb-action);height:var(--thumb-action);border-radius:50%}
html.runner-touch #game .game-bottom{inset:0;pointer-events:none}
html.runner-touch #game #boost{position:absolute;right:var(--thumb-edge);bottom:calc(var(--thumb-bottom) + var(--thumb-action) + 14px);min-width:0;width:140px;min-height:54px;border-radius:18px;padding:10px;font-size:9px;pointer-events:auto;z-index:9}
html.runner-touch #game .run-audio{position:absolute;top:85px;left:14px;pointer-events:auto;font-size:8px}
html.runner-touch #game .run-audio #bear-size,html.runner-touch #game .keyboard-hint{display:none}
@media(max-height:500px) and (orientation:landscape){
 :root{--thumb-bottom:max(12px,env(safe-area-inset-bottom));--thumb-ring:100px;--thumb-action:64px}
 html[data-input=touch] .thumb-zone{height:65dvh}
 html[data-input=touch][data-game=duel] #controls .attack-pad{grid-template-rows:48px 44px 64px;gap:6px}
 html[data-input=touch][data-game=duel] #controls .move-pad{bottom:calc(var(--thumb-bottom) + 146px)}
 html[data-input=touch][data-game=strike] #hud .hud-bottom{bottom:calc(var(--thumb-bottom) + 145px)}
 html[data-input=touch][data-game=breach] #hud .tactical-actions{bottom:calc(var(--thumb-bottom) + 154px)}
 html[data-input=touch][data-game=breach] #hud #build-cover{left:150px;bottom:calc(var(--thumb-bottom) + 90px)}
}

html[data-input=touch][data-game=breach] .thumb-zone>small{bottom:54px}
html[data-input=touch] .thumb-pause-panel{max-height:90dvh;overflow:auto}
html[data-input=touch][data-game=arena] #hud #reload{position:fixed;left:var(--thumb-edge);right:auto;top:auto;bottom:calc(var(--thumb-bottom) + var(--thumb-ring) + 54px);min-height:48px;width:86px;border-radius:16px;z-index:8}

html.runner-touch #game .run-audio{display:none}
html.runner-touch #game .game-toast{bottom:calc(var(--thumb-bottom) + var(--thumb-action) + 100px);max-width:calc(100% - 30px);font-size:10px}
html.runner-touch #pause-overlay #runner-camera{display:block;margin:12px auto;min-height:44px;color:#e2f0e2}