/* Thumb reach, not viewport pixel offsets. Last stylesheet owns touch layout. */
html{overscroll-behavior:none}#touch-controls{--touch-scale:1;--touch-opacity:.8;--button:calc(clamp(46px,10vmin,62px)*var(--touch-scale));--gap:calc(var(--button) + 12px);--edge:max(16px,env(safe-area-inset-right));--base:max(72px,calc(env(safe-area-inset-bottom) + 60px))}
#touch-controls .look-pad{left:43%;right:0;top:12%;bottom:0}
#touch-controls .move-pad{position:absolute;left:max(8px,env(safe-area-inset-left));width:40%;top:30%;bottom:max(55px,env(safe-area-inset-bottom));touch-action:none;pointer-events:auto}
#touch-controls .move-stick{pointer-events:none;width:calc(clamp(96px,23vmin,125px)*var(--touch-scale));height:calc(clamp(96px,23vmin,125px)*var(--touch-scale));left:20px;bottom:22px;opacity:var(--touch-opacity)}
#touch-controls .stick-knob{width:42%;height:42%}#touch-controls.sprinting .move-stick{border-color:#cde8a4;box-shadow:0 0 0 4px #cde8a422}
#touch-controls button{width:var(--button);height:var(--button);font-size:clamp(9px,2vmin,12px);letter-spacing:.3px;opacity:var(--touch-opacity);backdrop-filter:none;-webkit-touch-callout:none;touch-action:none;min-width:44px;min-height:44px}
#touch-controls button.held{opacity:1}
#touch-controls .touch-fire{width:calc(var(--button)*1.27)!important;height:calc(var(--button)*1.27)!important;right:var(--edge);bottom:calc(var(--base) + var(--gap));font-size:12px!important}
#touch-controls .touch-aim{right:calc(var(--edge) + var(--gap)*1.4);bottom:calc(var(--base) + var(--gap)*1.35)}
#touch-controls .touch-jump{right:var(--edge);bottom:calc(var(--base) + var(--gap)*2.55)}
#touch-controls .touch-reload{right:calc(var(--edge) + var(--gap));bottom:var(--base)}
#touch-controls .touch-crouch{right:var(--edge);bottom:var(--base)}
#touch-controls .touch-prone{left:auto;right:calc(var(--edge) + var(--gap)*2);bottom:var(--base)}
#touch-controls .touch-swap{right:calc(var(--edge) + var(--gap)*2.6);bottom:calc(var(--base) + var(--gap)*1.1)}
/* MW2's Use Killstreak: only while a reward is ready, showing its D-pad icon. */
#touch-controls .touch-killstreak{right:calc(var(--edge) + var(--gap)*2.6);bottom:calc(var(--base) + var(--gap)*3.1);display:grid;place-items:center;gap:0}
#touch-controls .touch-killstreak:not(.ready){display:none}
#touch-controls .touch-killstreak canvas{width:60%;height:60%}
#touch-controls .touch-killstreak:not(.has-icon) canvas{display:none}
#touch-controls .touch-killstreak.has-icon span{font-size:9px;opacity:.8}
#touch-controls .touch-sprint{left:max(18px,env(safe-area-inset-left));right:auto;bottom:calc(var(--base) + var(--gap)*2.6)}
/* The RUN button sits where the FPS / ping chips are under the minimap: with touch controls the chips go top-centre. */
body.touch-visible #hud #telemetry{left:50%;right:auto;top:max(8px,env(safe-area-inset-top));transform:translateX(-50%);justify-content:center;transition:opacity .15s}
/* MW2's killstreak splash takes the top centre for its 2.5 s: the chips fade out under it and come back after. */
body.touch-visible #hud.mw2-splash #telemetry{opacity:0}
/* The scoreboard on a touch screen (Tab on a keyboard, Back on a pad): a toolbar button beside fullscreen and MENU;
   a tap shows it, another hides it. Hidden without touch controls. */
#hud .hud-actions .scores-button{display:none}
body.touch-visible #hud .hud-actions .scores-button{display:grid;place-items:center;position:static;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border:1px solid #d8dec85c;background:#152018ad;border-radius:6px;color:#eee8d5}
body.touch-visible #hud .hud-actions .scores-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
body.touch-visible #hud .hud-actions .scores-button[aria-pressed=true]{background:#dbc58e;color:#152018;border-color:#dbc58e}
/* A care package in reach: MW2's hint is the button to hold, under the crosshair where the hint sits. */
#touch-controls .touch-use{position:absolute;left:50%;top:calc(100% - 144 * 100vh / 480);right:auto;bottom:auto;transform:translateX(-50%);width:auto;height:auto;min-height:44px;padding:10px 16px;border-radius:2px;border:1px solid #ffffff59;background:#0b0f0bb3;color:#fff;font:400 max(13px,calc(13 * 100vh / 480))/1.2 MW2Conduit,Arial,sans-serif;white-space:nowrap;text-shadow:1px 1px 0 #000;pointer-events:auto}
#touch-controls .touch-use.held{background:#262c1fcc;border-color:#ffff0080}
#touch-controls .touch-fire-left{display:none;left:max(90px,calc(env(safe-area-inset-left) + 80px));right:auto;top:max(85px,calc(env(safe-area-inset-top) + 70px));bottom:auto}
#touch-controls[data-layout=claw] .touch-fire-left{display:block}
.fullscreen-button{min-height:44px;padding:10px 14px;border:1px solid #d5d3b050;background:#192119cc;font-size:11px;letter-spacing:1px;white-space:nowrap}
.hud-actions{display:flex;gap:8px;pointer-events:auto}.hud-actions .fullscreen-button{font-size:10px}#pause-button{min-height:44px;min-width:44px}
#fullscreen-help{max-width:min(520px,90vw);max-height:85dvh;overflow:auto;color:var(--ui-ink);background:#0d0f0cf7;border:1px solid var(--ui-line);border-top:3px solid var(--ui-accent);border-radius:0;padding:24px;font:16px/1.5 var(--ui-font-body)}#fullscreen-help::backdrop{background:#030402c7}#fullscreen-help-close{min-height:44px;padding:0 24px;font:16px/1 var(--ui-font-body);letter-spacing:.08em;background:var(--ui-select);color:var(--ui-select-ink);border:0;border-radius:0}.touch-advice{font-size:12px;line-height:1.5;color:#c4ccb9}
@media(orientation:portrait){#touch-controls{--base:max(86px,calc(env(safe-area-inset-bottom) + 65px))}#touch-controls .move-pad{width:43%;top:44%;bottom:calc(var(--base) + var(--gap)*.6)}#touch-controls .touch-swap{right:calc(var(--edge) + var(--gap)*1.4);bottom:calc(var(--base) + var(--gap)*2.6)}#touch-controls .touch-sprint{bottom:calc(var(--base) + var(--gap)*3.6)}.topbar .build{display:none}.hud-actions{gap:4px}}
@media(orientation:landscape) and (max-height:480px){#touch-controls{--button:calc(46px*var(--touch-scale));--base:max(48px,calc(env(safe-area-inset-bottom) + 36px))}#touch-controls .move-pad{top:29%;bottom:40px}#touch-controls .touch-fire-left{top:max(70px,calc(env(safe-area-inset-top) + 45px))}.hud-actions .fullscreen-button{padding:5px 8px}}
@media(max-width:420px){#touch-controls{--gap:calc(var(--button) + 8px);--edge:max(10px,env(safe-area-inset-right))}.topbar{gap:8px}.topbar .brand{font-size:15px;gap:5px}.topbar .edition{font-size:11px}.topbar .fullscreen-button{padding:8px;font-size:10px}}
@media(display-mode:standalone){body{padding:0}.topbar{padding-top:env(safe-area-inset-top)}}
/* Riding a Predator Missile: a drag anywhere steers it and FIRE boosts it (once; spent, the button dims). Nothing else
   does anything in its camera, so the other controls step away (docs/MOBILE-CONTROLS.md). */
#touch-controls.riding .look-pad{left:0}
#touch-controls.riding>:not(.look-pad,.touch-fire,.touch-fire-left){display:none!important}
#touch-controls.boosted :is(.touch-fire,.touch-fire-left){opacity:.35}