/* Phone-only interaction layer. Desktop HUD and keyboard layout stay unchanged. */
.mobile-only, #shop-tabs { display: none; }
.ab { color: var(--hud); font-family: inherit; }
.ab .ab-ico { margin: 0 auto; }
.shop-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#shop-loadout { font-size: 13px; color: var(--atk); }
#shop-feedback { display: block; font-size: 11px; color: var(--dim); }
body.touch { --sl: max(12px, env(safe-area-inset-left)); --sr: max(12px, env(safe-area-inset-right)); --st: max(8px, env(safe-area-inset-top)); --sb: max(12px, env(safe-area-inset-bottom)); overscroll-behavior: none; }
body.touch #view { height: 100dvh; touch-action: none; }
body.touch .mobile-only { display: block; }
body.touch .desktop-pause-help, body.touch .desktop-board-help { display: none; }
body.touch #hud { font-size: 12px; }
body.touch #touch { z-index: 5; touch-action: none; }
body.touch #hud button, body.touch #ammo, body.touch #touch button { touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none; }
body.touch #abilities, body.touch #ammo { pointer-events: auto; }
/* Top strip: map left, round information centre, system controls right. */
body.touch #minimap { left: var(--sl); top: var(--st); width: 88px; height: 98px; border-radius: 7px; }
body.touch #topbar { top: var(--st); width: 184px; padding: 4px 8px; gap: 8px; justify-content: space-between; border-radius: 7px; line-height: 1.25; }
body.touch #topbar .score { min-width: 23px; font-size: 23px; gap: 3px; flex-direction: column; }
body.touch #topbar .score span { font-size: 8px; }
body.touch #topbar .score.def { flex-direction: column-reverse; }
body.touch #topbar .clock { min-width: 88px; }
body.touch #phase-label { font-size: 9px; letter-spacing: .06em; }
body.touch #timer { font-size: 22px; line-height: 1.15; }
body.touch #round-label { font-size: 9px; }
body.touch #alive { top: calc(var(--st) + 66px); font-size: 10px; padding: 2px 8px; white-space: nowrap; }
body.touch #spike-status { top: calc(var(--st) + 92px); padding: 4px 8px; gap: 5px; font-size: 11px; white-space: nowrap; }
body.touch #defuse-wrap { width: 74px; }
body.touch .defuse-label { font-size: 8px; }
body.touch #t-sys { right: var(--sr); top: var(--st); gap: 6px; }
body.touch #t-sys button { width: 44px; height: 44px; border-radius: 8px; background: rgba(12,22,30,.8); }
body.touch #t-sys button[hidden] { display: none; }
body.touch #t-stats { top: calc(var(--st) + 50px); right: var(--sr); bottom: auto; width: 94px; height: 44px; padding: 4px; border-color: var(--edge); font-size: 10px; }
body.touch #t-buy { left: var(--sl); right: auto; bottom: auto; top: calc(var(--st) + 105px); width: 88px; min-height: 44px; padding: 4px; color: var(--atk); border-radius: 7px; }
body.touch #t-buy::after { content: ' ARMORY'; font-size: 9px; }
body.touch #spike-carry { left: var(--sl); right: auto; top: calc(var(--st) + 105px); padding: 4px 8px; font-size: 9px; background: rgba(255,70,85,.8); }
body.touch.mobile-buy #spike-carry { display: none; }
body.touch #killfeed { top: calc(var(--st) + 103px); right: var(--sr); max-width: 170px; font-size: 9px; gap: 3px; }
body.touch #killfeed > div { padding: 2px 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.touch #killfeed > div:nth-last-child(n+3) { display: none; }
/* Dedicated lower controls: generous targets without panels across the view. */
body.touch #stick { width: 104px; height: 104px; left: calc(var(--sl) + 16px); bottom: calc(var(--sb) + 76px); border: 1px solid rgba(255,255,255,.32); background: radial-gradient(circle, rgba(124,242,196,.09) 44%, transparent 45%), rgba(9,18,26,.16); }
body.touch #stick.idle { opacity: .6; }
body.touch #stick-knob { width: 40px; height: 40px; margin: -20px; background: rgba(217,240,244,.38); border: 1px solid rgba(255,255,255,.4); }
body.touch #move-label { position: absolute; left: calc(var(--sl) + 44px); bottom: calc(var(--sb) + 60px); font-size: 9px; letter-spacing: .12em; color: var(--dim); }
.touch-action { position: absolute; pointer-events: auto; color: var(--hud); border: 1px solid rgba(232,248,255,.5); background: rgba(10,20,29,.48); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; }
body.touch #t-fire { right: calc(var(--sr) + 12px); bottom: calc(var(--sb) + 104px); width: 78px; height: 78px; border-radius: 50%; border-width: 2px; box-shadow: 0 0 0 5px rgba(15,25,35,.15); gap: 3px; }
body.touch #t-fire span { font-size: 10px; font-weight: 800; letter-spacing: .08em; }
body.touch #t-fire:disabled { opacity: .35; }
body.touch #t-fire.utility-ready { color: var(--atk); border-color: var(--atk); }
body.touch #t-jump { right: calc(var(--sr) + 104px); bottom: calc(var(--sb) + 74px); width: 48px; height: 48px; border-radius: 12px; }
body.touch #t-jump span { font-size: 24px; line-height: 1; }
body.touch #t-jump small { font-size: 8px; font-weight: 700; }
body.touch #t-scope { right: calc(var(--sr) + 104px); bottom: calc(var(--sb) + 132px); width: 48px; height: 48px; padding: 2px; font-size: 8px; border-color: var(--edge); }
body.touch #t-scope.active { border-color: var(--atk); color: var(--atk); }
body.touch #t-plant { bottom: calc(var(--sb) + 76px); width: 104px; min-height: 48px; padding: 4px 8px; font-size: 11px; line-height: 1.25; color: var(--gold); }
body.touch #t-plant.active { background: rgba(140,113,35,.55); }
body.touch #plant-wrap { top: auto; bottom: calc(var(--sb) + 132px); width: 160px; font-size: 9px; }
body.touch #vitals { left: var(--sl); bottom: var(--sb); width: 92px; height: 58px; gap: 0; border: 1px solid var(--edge); border-radius: 8px; background: var(--panel); align-items: center; padding: 5px 7px; }
body.touch .hp { min-width: 0; padding: 0; border: 0; background: none; border-radius: 0; width: 48px; }
body.touch .hp b { font-size: 23px; line-height: 1; }
body.touch .hp .bar { height: 3px; margin-top: 6px; }
body.touch .shield { min-width: 0; padding: 0 0 0 7px; border: 0; background: none; font-size: 12px; line-height: 1.3; }
body.touch #abilities { left: auto; right: calc(var(--sr) + 112px); bottom: var(--sb); transform: none; gap: 8px; }
body.touch .ab { width: 56px; height: 58px; min-height: 44px; padding: 6px 3px; font-size: 8px; border-radius: 8px; line-height: 1.2; }
body.touch .ab kbd { display: block; font-size: 8px; background: none; padding: 0; border: 0; left: 5px; top: 4px; }
body.touch .ab .ab-ico { width: 17px; height: 17px; margin: 3px auto 6px; }
body.touch .ab span:not(.ab-ico) { margin-top: 0; font-size: 8px; line-height: 1.15; white-space: normal; color: #e1eef3; }
body.touch .ab em { font-size: 11px; right: 5px; }
body.touch .ab.off { opacity: .48; }
body.touch #ammo { right: var(--sr); bottom: var(--sb); width: 104px; height: 58px; padding: 4px 7px 13px; border-radius: 8px; line-height: 1.15; background: linear-gradient(90deg,rgba(124,242,196,.18) var(--reload-progress,0%),transparent 0%),var(--panel); }
body.touch #ammo b { font-size: 22px; }
body.touch #ammo span, body.touch #ammo i { font-size: 12px; }
body.touch #wname { font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .04em; }
body.touch #credits { display: none; }
body.touch #ammo::after { content: attr(data-reload); position: absolute; bottom: 3px; right: 7px; font-size: 8px; letter-spacing: .05em; color: var(--dim); }
body.touch #ammo.low { border-color: var(--gold); }
body.touch #ammo.low::after { color: var(--gold); }
body.touch #ammo.reloading { border-color: var(--atk); }
body.touch .pressed, body.touch #t-fire.pressed { color: var(--atk); background-color: rgba(37,84,73,.7); border-color: var(--atk); }
/* Small, non-interactive feedback above the action area. */
body.touch #center-msg { top: calc(var(--st) + 109px); font-size: 20px; width: 42%; line-height: 1.2; }
body.touch #sub-msg { top: calc(var(--st) + 139px); width: 42%; font-size: 10px; line-height: 1.3; text-align: center; }
body.touch #hint { bottom: calc(var(--sb) + 68px); width: min(40%, 300px); text-align: center; font-size: 10px; line-height: 1.3; }
body.touch #hint.utility-hint { color: var(--atk); }
body.touch:has(#t-plant:not(.hidden)) #hint { visibility: hidden; }
body.touch #kill-banner { top: auto; bottom: calc(var(--sb) + 140px); transform: translateX(-50%) scale(.72); transform-origin: center bottom; }
body.touch #round-end { top: 36%; width: min(360px,70vw); padding: 12px; }
body.touch #re-title { font-size: 24px; }
body.touch #re-reason { font-size: 12px; }
body.touch #spectate { z-index: 6; bottom: calc(var(--sb) + 8px); gap: 8px; width: min(420px,calc(100% - var(--sl) - var(--sr))); }
body.touch #spectate button { flex-shrink: 0; width: 48px; height: 48px; }
body.touch #spectate .spec-info { flex: 1; min-width: 0; padding: 6px 4px; }
body.touch #spec-name { font-size: 14px; }
body.touch #spec-sub { font-size: 10px; }
body.touch #rotate-tip { display: none; }
body.touch.mobile-blocked #touch, body.touch.mobile-blocked #hud, body.touch.mobile-blocked #spectate, body.touch.mobile-blocked #round-end { visibility: hidden; }
body.touch.mobile-spectating :is(#abilities,#ammo,#vitals,#stick,#move-label,#t-fire,#t-jump,#t-scope,#t-plant,#plant-wrap),
body.touch.mobile-round-end :is(#t-fire,#t-jump,#t-scope,#t-plant,#stick,#move-label) { visibility: hidden; }
/* Phone armory: one scrolling item region, fixed category rail and exit footer. */
body.touch #shop { padding: var(--st) var(--sr) var(--sb) var(--sl); background: rgba(6,13,20,.98); height: 100dvh; overflow: hidden; }
body.touch .shop-inner { width: min(100%,920px); height: 100%; min-height: 0; padding: 0; gap: 0; border: 0; background: none; }
body.touch .shop-inner header { flex: none; gap: 8px 16px; padding: 6px 0 10px; flex-wrap: wrap; }
body.touch .shop-inner header h2 { font-size: 22px; margin: 0; letter-spacing: -.03em; }
body.touch .shop-credits { margin-left: auto; font-size: 15px; }
body.touch .shop-timer { font-size: 11px; color: var(--dim); }
body.touch .shop-timer b { color: var(--gold); }
body.touch #shop-tabs { display: flex; flex: none; gap: 6px; overflow-x: auto; padding: 2px 0 9px; scrollbar-width: thin; touch-action: pan-x; }
body.touch #shop-tabs button { flex-shrink: 0; padding: 8px 14px; min-height: 44px; border: 1px solid var(--edge); border-radius: 7px; font-size: 12px; background: #14212b; color: var(--dim); }
body.touch #shop-tabs button[aria-pressed="true"] { background: var(--atk); color: #071b14; border-color: var(--atk); font-weight: 800; }
body.touch .shop-grid { flex: 1; min-height: 0; display: block; overflow: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 6px 2px 16px; }
body.touch .shop-weapons { display: block; max-height: none; overflow: visible; padding: 0; }
body.touch .shop-weapons section:not(.mobile-selected), body.touch .shop-gear:not(.mobile-selected) { display: none; }
body.touch .shop-grid h3 { font: 700 10px var(--font-text); color: var(--dim); letter-spacing: .12em; margin: 10px 0; text-transform: uppercase; }
body.touch .shop-grid .items { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
body.touch .item { min-height: 82px; gap: 10px; padding: 12px; border-radius: 8px; background: #12212b; text-align: left; }
body.touch .item > span:first-child { min-width: 0; }
body.touch .item b { font-size: 15px; }
body.touch .item small { display: block; font-size: 11px; line-height: 1.4; margin-top: 4px; }
body.touch .item .price { flex-shrink: 0; font-size: 11px; }
body.touch .item:disabled { opacity: .55; }
body.touch .item.owned { border-color: var(--atk); background: #132f2b; opacity: 1; }
body.touch .shop-footer { flex: none; padding: 10px 0 0; border-top: 1px solid var(--edge); gap: 12px; }
body.touch #shop-loadout { font-size: 11px; }
body.touch #shop-feedback { font-size: 10px; line-height: 1.4; margin-top: 3px; }
body.touch #shop-close { flex-shrink: 0; min-height: 48px; margin: 0; padding: 8px 20px; font-size: 13px; }
/* Live stats and menus: scroll inside the panel; always keep a dismissal target. */
body.touch #board { visibility: visible; pointer-events: auto; inset: var(--st) var(--sr) var(--sb) var(--sl); width: auto; max-height: none; transform: none; padding: 0 12px 12px; background: rgba(7,14,22,.98); overflow: auto; touch-action: pan-x pan-y; }
body.touch #board .board-head { position: sticky; top: 0; left: 0; z-index: 2; background: #0b1721; display: flex; align-items: center; justify-content: space-between; min-height: 56px; font-size: 10px; margin: 0 -2px; }
body.touch #board-close { width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--edge); background: #192a36; color: white; border-radius: 7px; }
body.touch #board table { font-size: 11px; }
body.touch #board th, body.touch #board td { padding: 7px 6px; }
body.touch .overlay:not(#shop) { padding: var(--st) var(--sr) var(--sb) var(--sl); touch-action: pan-y; overscroll-behavior: contain; }
body.touch .menu-inner { padding: 18px; }
body.touch .menu-inner .btn { min-height: 48px; }
body.touch .phone-help { font-size: 12px; color: var(--dim); line-height: 1.5; border-top: 1px solid var(--edge); padding-top: 12px; }
body.touch .phone-help p { margin-bottom: 10px; }
body.touch .sens { flex-wrap: wrap; }
body.touch .sens input[type=range] { min-width: 100px; min-height: 36px; }
body.touch #me-table { display: block; overflow-x: auto; touch-action: pan-x; }
body.touch .end-actions .btn { margin: 0; flex: 1 1 160px; }
@media (orientation: portrait) {
  body.touch #minimap { width: 72px; height: 80px; }
  body.touch #topbar { width: 158px; }
  body.touch #topbar .clock { min-width: 74px; }
  body.touch #topbar .score { font-size: 20px; min-width: 20px; }
  body.touch #t-sys { flex-direction: column-reverse; gap: 6px; }
  body.touch #t-stats { width: 44px; top: calc(var(--st) + 100px); font-size: 8px; }
  body.touch #t-buy, body.touch #spike-carry { top: calc(var(--st) + 88px); width: 72px; }
  body.touch #t-buy::after { display: block; }
  body.touch #killfeed { top: calc(var(--st) + 154px); max-width: 145px; }
  body.touch #center-msg { top: calc(var(--st) + 196px); width: 80%; }
  body.touch #sub-msg { top: calc(var(--st) + 225px); width: 80%; }
  body.touch #stick { bottom: calc(var(--sb) + 90px); }
  body.touch #move-label { bottom: calc(var(--sb) + 72px); }
  body.touch #t-fire { bottom: calc(var(--sb) + 128px); }
  body.touch #t-scope { bottom: calc(var(--sb) + 150px); }
  body.touch #t-jump { bottom: calc(var(--sb) + 92px); }
  body.touch #t-plant { bottom: calc(var(--sb) + 224px); }
  body.touch #plant-wrap { bottom: calc(var(--sb) + 280px); }
  body.touch #hint { bottom: calc(var(--sb) + 286px); width: 82%; }
  body.touch #kill-banner { bottom: calc(var(--sb) + 332px); }
  body.touch #rotate-tip { position: absolute; display: none; top: calc(var(--st) + 266px); left: 10%; width: 80%; font-size: 10px; text-align: center; color: var(--dim); }
  body.touch.mobile-buy #rotate-tip { display: block; }
  body.touch .shop-grid .items { grid-template-columns: 1fr; }
  body.touch .shop-timer { width: 100%; }
  body.touch #shop-close { padding-inline: 12px; }
}
@media (max-width: 359px) and (orientation: portrait) {
  body.touch { --sl: 8px; --sr: 8px; }
  body.touch #minimap { width: 60px; height: 67px; }
  body.touch #topbar { width: 144px; }
  body.touch #topbar .clock { min-width: 62px; }
  body.touch #vitals { width: 72px; padding: 4px; }
  body.touch .hp { width: 37px; }
  body.touch .hp b { font-size: 20px; }
  body.touch .shield { padding-left: 4px; font-size: 10px; }
  body.touch #ammo { width: 90px; }
  body.touch #abilities { right: calc(var(--sr) + 98px); gap: 6px; }
  body.touch .ab { width: 52px; }
}
@media (orientation: landscape) and (max-height: 380px) {
  body.touch #minimap { width: 72px; height: 80px; }
  body.touch #t-buy, body.touch #spike-carry { top: calc(var(--st) + 86px); width: 72px; }
  body.touch #stick { width: 90px; height: 90px; bottom: calc(var(--sb) + 66px); }
  body.touch #t-fire { width: 70px; height: 70px; bottom: calc(var(--sb) + 84px); }
  body.touch #t-scope { bottom: calc(var(--sb) + 128px); }
  body.touch #t-jump { bottom: calc(var(--sb) + 70px); }
  body.touch #sub-msg { top: calc(var(--st) + 139px); }
  body.touch .shop-inner header { padding: 2px 0 6px; }
  body.touch #shop-tabs { padding-bottom: 5px; }
  body.touch .shop-footer { padding-top: 6px; }
}

/* Phone: slot strip sits just above the move stick; PICK UP / DROP sits beside it, clear of the plant and fire buttons. */
body.touch #slots { left: var(--sl); right: auto; transform: none; bottom: calc(var(--sb) + 184px); gap: 4px; }
body.touch #slots button { min-width: 0; width: 44px; min-height: 36px; padding: 3px 2px; font-size: 7px; gap: 1px; touch-action: none; }
body.touch #slots button kbd { font-size: 8px; }
body.touch #slots button em { max-width: 40px; font-size: 7px; }
body.touch #t-pick { left: calc(var(--sl) + 208px); right: auto; transform: none; bottom: calc(var(--sb) + 184px); width: 88px; min-height: 36px; padding: 3px 6px; font-size: 10px; line-height: 1.1; }
body.touch #t-pick small { font-size: 7px; }
body.touch.mobile-buy #t-pick { display: none; }
body.touch.mobile-spectating #slots, body.touch.mobile-spectating #t-pick { display: none; }
@media (orientation: landscape) and (max-height: 380px) {
  body.touch #slots { bottom: calc(var(--sb) + 160px); }
  body.touch #t-pick { bottom: calc(var(--sb) + 160px); }
}