TOUCH / MOBILE
   ========================================================================== */
.screen{touch-action:pan-y;-webkit-overflow-scrolling:touch;}
.btn,.row input,.wslot{touch-action:manipulation;}

/* Settings rows that only mean anything with on-screen controls. */
.row.touchOnly{display:none;}
body.touch .row.touchOnly{display:flex;}

/* ---- on-screen controls layer ---- */
/* Every button is sized and placed in multiples of --ts so one slider can shrink
   the whole set. The stick is deliberately left out: its radius lives in a JS
   constant (STICK_R) and scaling only the artwork would desync the knob. */
#touchUI{
  position:fixed;inset:0;z-index:15;display:none;pointer-events:none;--ts:1;
  padding:env(safe-area-inset-top) env(safe-area-inset-right)
          env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#touchUI.on{display:block;}

#tStick{
  position:fixed;width:132px;height:132px;margin:-66px 0 0 -66px;border-radius:50%;
  border:1px solid rgba(57,215,255,.28);background:rgba(8,16,26,.26);opacity:.38;
  transition:opacity .12s,border-color .12s,box-shadow .12s;
}
#tStick.on{opacity:.95;}
#tStick.sprint{border-color:var(--good);box-shadow:0 0 22px rgba(87,255,154,.3);}
#tKnob{
  position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;
  background:rgba(57,215,255,.26);border:1px solid rgba(57,215,255,.7);
  box-shadow:0 0 16px rgba(57,215,255,.28);
}
#tStick.sprint #tKnob{background:rgba(87,255,154,.26);border-color:var(--good);}

.tbtn{
  position:absolute;pointer-events:auto;display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid rgba(57,215,255,.35);background:rgba(8,16,26,.42);
  color:#cfeaff;font-family:inherit;font-weight:700;letter-spacing:1px;line-height:1.15;
  text-transform:uppercase;text-align:center;backdrop-filter:blur(2px);
  transition:background .07s,border-color .07s,transform .07s;
  width:calc(var(--w,44px)*var(--ts));height:calc(var(--w,44px)*var(--ts));
  font-size:calc(var(--fs,10px)*var(--ts));
}
.tbtn.act{background:rgba(57,215,255,.32);border-color:var(--accent);color:#fff;transform:scale(.93);}

/* The right thumb has to plant somewhere to swing the camera, and the old set
   filled 240px of the corner with live buttons - so it planted on SWAP, FRAG or
   BASH instead. Everything is smaller now and tucked into 154px against the
   edge, which leaves the band the thumb actually reaches for. CROUCH moved over
   here from the bottom-left for the same reason: the stick claims any touch in
   the left 45% of the screen, but a button there swallows it first, so reaching
   for the stick crouched you instead of moving you. */
#tFire  {--w:82px;--fs:13px;right:calc(16px*var(--ts)); bottom:calc(16px*var(--ts));
         border-color:rgba(255,59,92,.45);background:rgba(40,8,14,.42);}
#tFire.act{background:rgba(255,59,92,.34);border-color:var(--accent2);}
#tAds   {--w:54px;--fs:11px;right:calc(106px*var(--ts));bottom:calc(18px*var(--ts));}
#tJump  {--w:50px;--fs:10px;right:calc(20px*var(--ts)); bottom:calc(106px*var(--ts));}
#tCrouch{--w:44px;--fs:9px; right:calc(78px*var(--ts)); bottom:calc(106px*var(--ts));}
#tReload{--w:44px;--fs:9px; right:calc(128px*var(--ts));bottom:calc(82px*var(--ts));}
#tMelee {--w:44px;--fs:9px; right:calc(124px*var(--ts));bottom:calc(134px*var(--ts));}
#tNade  {--w:44px;--fs:9px; right:calc(72px*var(--ts)); bottom:calc(160px*var(--ts));}
#tSwap  {--w:44px;--fs:9px; right:calc(20px*var(--ts)); bottom:calc(164px*var(--ts));}
#tPause {--w:46px;--fs:16px;left:calc(14px*var(--ts)); top:calc(14px*var(--ts));}

/* ---- rotate-to-landscape gate ---- */#rotate{
  position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
  flex-direction:column;background:var(--bg);text-align:center;padding:30px;
}
body.touch.portrait #rotate{display:flex;}
#rotate .phone{
  width:56px;height:92px;border:3px solid var(--accent);border-radius:9px;margin-bottom:24px;
  box-shadow:0 0 26px rgba(57,215,255,.35);animation:tilt 1.8s ease-in-out infinite;
}
@keyframes tilt{0%,35%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
#rotate p{letter-spacing:6px;font-size:14px;opacity:.85;}
#rotate small{display:block;margin-top:10px;letter-spacing:2px;font-size:11px;opacity:.45;}

/* ---- compact HUD for touch devices ---- */
body.touch #scoreBox{left:68px;top:10px;padding:6px 12px;min-width:126px;}
body.touch #score{font-size:18px;}
body.touch #scoreLbl,body.touch #comboLbl{font-size:9px;letter-spacing:2px;}
body.touch #combo{font-size:12px;}
body.touch #waveBox{top:10px;padding:5px 16px;min-width:148px;}
body.touch #waveTitle{font-size:9px;letter-spacing:3px;}
body.touch #waveNum{font-size:17px;letter-spacing:2px;}
body.touch #enemiesLeft{font-size:9px;}
body.touch #mapBox{right:14px;top:10px;padding:5px;}
body.touch #minimap{width:102px;height:102px;}
body.touch #killfeed{right:14px;top:128px;width:184px;}
body.touch .kf{font-size:10px;padding:2px 6px;margin-bottom:3px;}
body.touch #vitals{left:14px;top:82px;bottom:auto;width:166px;padding:7px 9px;}
body.touch .barwrap{margin-bottom:5px;}
body.touch .barlabel{font-size:9px;letter-spacing:1px;margin-bottom:2px;}
body.touch .bar{height:7px;}
body.touch #hpNum{font-size:16px;}
body.touch #weaponBox{right:270px;bottom:12px;width:auto;min-width:0;padding:6px 10px;}
body.touch #wName{font-size:11px;letter-spacing:2px;}
body.touch #wAmmo{font-size:26px;}
body.touch #wAmmo small{font-size:13px;}
body.touch #wMode{font-size:9px;letter-spacing:2px;}
body.touch #reloadBar{margin-top:4px;height:3px;}
body.touch #wheel{gap:4px;margin-top:6px;}
body.touch .wslot{min-width:32px;padding:5px 6px;font-size:10px;white-space:nowrap;}
body.touch #banner .b1{font-size:32px;letter-spacing:8px;}
body.touch #banner .b2{font-size:11px;letter-spacing:5px;}
body.touch #notice{bottom:auto;top:62%;font-size:12px;letter-spacing:2px;padding:5px 12px;}
body.touch #crosshair{transform:translate(-50%,-50%) scale(.82);}

@media (max-width:620px){
  /* no room for the weapon strip next to the thumb zones - SWAP button covers it */
  body.touch #wheel{display:none;}
  body.touch #weaponBox{right:266px;bottom:10px;padding:4px 8px;}
  body.touch #wAmmo{font-size:21px;}
  body.touch #wName{font-size:10px;}
  body.touch #killfeed{width:150px;}
  body.touch #vitals{width:148px;}
}

/* ==========================================================================