/* STRIKEZONE - phone / tablet layer. Everything is scoped to html.touch (set by js/core/perf.js), so desktop is untouched. */
html.touch { --b: clamp(46px, 14.5vh, 68px); --R: max(14px, env(safe-area-inset-right)); --L: max(12px, env(safe-area-inset-left)); --B: max(12px, 4vh);
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
html.touch, html.touch body { touch-action: none; position: fixed; inset: 0; }
html.touch * { -webkit-tap-highlight-color: transparent; }
html.touch #lobby, html.touch .win, html.touch #mBody, html.touch #pause .box, html.touch #end .box { touch-action: pan-y; -webkit-overflow-scrolling: touch; }
html.touch #stageDrag { touch-action: none; }
/* blur over a live WebGL canvas is very expensive on phones */
html.touch * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.touch .panel, html.touch .team, html.touch #rail button { background: rgba(10, 14, 22, .9); }
html.touch #winBack, html.touch #meta, html.touch #pause, html.touch #end { background: rgba(4, 6, 10, .82); }
html.touch .dmg { filter: none; }

/* ---------- rotate hint (portrait) ---------- */
#rotate { display: none; position: fixed; inset: 0; z-index: 300; background: #080b11; align-items: center; justify-content: center; text-align: center; }
#rotate b { display: block; font-size: 26px; letter-spacing: .2em; color: var(--orange); margin-bottom: 8px; } #rotate span { color: var(--dim); letter-spacing: .14em; font-size: 14px; }
@media (orientation: portrait) { html.touch #rotate { display: flex; } }

/* ---------- touch controls ---------- */
#touch { position: fixed; inset: 0; z-index: 12; touch-action: none; user-select: none; -webkit-user-select: none; }
#touch * { touch-action: none; }
#t-look { position: absolute; left: 46%; right: 0; top: 0; bottom: 0; }
#t-joyzone { position: absolute; left: 0; top: 16%; bottom: 0; width: 46%; }
#t-stick { display: none; position: absolute; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); background: rgba(255,255,255,.07); pointer-events: none; }
#t-stick i { position: absolute; left: 50%; top: 50%; width: 44%; height: 44%; border-radius: 50%; background: rgba(255,255,255,.4); border: 2px solid rgba(255,255,255,.6); transform: translate(-50%, -50%); }
.tb { position: absolute; width: var(--b); height: var(--b); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: rgba(10, 14, 22, .42); border: 2px solid rgba(255,255,255,.38); color: #fff; font: 800 9px var(--font); letter-spacing: .08em; opacity: .9; transition: background .08s; }
.tb svg { width: 44%; height: 44%; pointer-events: none; } .tb span { pointer-events: none; line-height: 1; }
.tb.on { background: rgba(255,138,26,.6); border-color: #ffb15a; transform: scale(.92); }
.tb.lit { background: rgba(25,227,255,.32); border-color: var(--cyan); }
.tb.dim { opacity: .35; }
.tb.hide { display: none; }
.tb.big { width: calc(var(--b) * 1.55); height: calc(var(--b) * 1.55); background: rgba(255,110,40,.3); border-color: rgba(255,170,90,.8); }
.tb.mid { width: calc(var(--b) * 1.05); height: calc(var(--b) * 1.05); background: rgba(255,110,40,.26); border-color: rgba(255,170,90,.7); }
.tb.sm { width: calc(var(--b) * .62); height: calc(var(--b) * .62); }
#t-fire { right: var(--R); bottom: var(--B); }
#t-ads { right: calc(var(--R) + var(--b) * 1.73); bottom: calc(var(--B) + var(--b) * .06); }
#t-crouch { right: calc(var(--R) + var(--b) * 2.91); bottom: calc(var(--B) + var(--b) * .06); }
#t-jump { right: calc(var(--R) + var(--b) * .27); bottom: calc(var(--B) + var(--b) * 1.74); }
#t-reload { right: calc(var(--R) + var(--b) * 1.5); bottom: calc(var(--B) + var(--b) * 1.4); }
#t-nade { right: calc(var(--R) + var(--b) * 2.68); bottom: calc(var(--B) + var(--b) * 1.4); }
#t-swap { right: calc(var(--R) + var(--b) * 1.5); bottom: calc(var(--B) + var(--b) * 2.5); }
#t-revive { right: calc(var(--R) + var(--b) * 3.4); bottom: calc(var(--B) + var(--b) * 3.2); }
#t-fire2 { left: var(--L); top: 54%; }
#t-pause { right: var(--R); top: 8px; } #t-score { right: calc(var(--R) + var(--b) * .74); top: 8px; } #t-view { right: calc(var(--R) + var(--b) * 1.48); top: 8px; }

/* ---------- HUD on phones ---------- */
html.touch #hint { display: none; }
html.touch #scorebar { top: 6px; } html.touch #scorebar .tm { width: 50px; font-size: 22px; } html.touch #timer { font-size: 19px; } html.touch #scorebar .mid { padding: 2px 12px; } html.touch #goal { font-size: 9px; }
html.touch #radar { width: 92px; height: 92px; top: 8px; left: var(--L); }
html.touch #healthBox { left: var(--L); top: 108px; bottom: auto; width: 100px; }
html.touch #healthBox .lbl { font-size: 9px; } html.touch #hpNum { font-size: 26px; } html.touch .bar { height: 5px; margin-top: 3px; } html.touch #shield { font-size: 9px; margin-top: 2px; }
html.touch #ammoBox { right: calc(var(--R) + var(--b) * 4.05); bottom: var(--B); pointer-events: none; }
html.touch #wName { font-size: 11px; } html.touch #mag { font-size: 38px; } html.touch #reserve { font-size: 17px; } html.touch #nades { font-size: 13px; } html.touch #reloadTxt { font-size: 11px; height: 14px; }
html.touch #killfeed { top: 52px; right: var(--R); gap: 2px; } html.touch .kf { font-size: 12px; padding: 2px 8px; } html.touch #killfeed .kf:nth-last-child(n+4) { display: none; }
html.touch #toast { font-size: 13px; letter-spacing: .1em; bottom: auto; top: 56px; width: 56vw; text-align: center; }
html.touch #banner { top: 20%; } html.touch #banner b { font-size: 44px; } html.touch #banner span { font-size: 13px; }
html.touch #deadBox { top: 46%; } html.touch #deadTitle { font-size: 30px; } html.touch #deadBy { font-size: 14px; }
html.touch #reviveBox { top: 56%; font-size: 14px; width: 200px; }
html.touch #scoreboard { width: min(92vw, 520px); padding: 10px 14px; max-height: 92vh; overflow: auto; } html.touch #scoreboard td { padding: 4px 8px; font-size: 14px; }
html.touch #fps { left: calc(var(--L) + 100px); top: 12px; }
html.touch .ch.t, html.touch .ch.b { height: 8px; } html.touch .ch.l, html.touch .ch.r { width: 8px; }

/* ---------- pause / end ---------- */
html.touch .box { padding: 16px 22px; min-width: 0; gap: 8px; max-height: 96vh; overflow: auto; }
html.touch .box.wide { min-width: 0; width: min(94vw, 560px); }
html.touch .box h1 { font-size: 34px; } html.touch .box p { font-size: 13px; }
html.touch #endScore { font-size: 26px; } html.touch #endTable table { font-size: 13px; } html.touch #endTable td { padding: 3px 8px; }
html.touch .start { padding: 11px 22px; font-size: 20px; } html.touch .ghost { padding: 10px; }

/* ---------- lobby / menus on phones ---------- */
html.touch #lobby { padding: 6px 10px 8px calc(var(--L) + 66px) !important; gap: 4px 10px; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
html.touch .lb-head, html.touch #stageDrag, html.touch .lb-foot { grid-column: 1; }
html.touch .lb-head { gap: 12px; align-items: center; } html.touch .lb-head .logo { font-size: 22px !important; }
html.touch .mode { font-size: 9px; gap: 5px; letter-spacing: .1em; white-space: nowrap; } html.touch .mode span { white-space: nowrap; } html.touch #profileBar { padding: 3px 9px; font-size: 13px; gap: 6px; } html.touch .xpb { width: 50px; }
html.touch #rail { left: var(--L); top: 44px; gap: 4px; } html.touch #rail .dot { top: 2px; right: 3px; width: 7px; height: 7px; } html.touch #rail button { width: 60px; padding: 7px 0; font-size: 8.5px; letter-spacing: .08em; min-height: 30px; }
html.touch .lb-foot { gap: 8px; grid-template-columns: 1fr auto 1fr; }
html.touch .team { padding: 4px 8px; } html.touch .team .th { font-size: 10px; margin-bottom: 1px; }
html.touch .roster .pl { padding: 2px 0; font-size: 12px; gap: 6px; } html.touch .roster .pl small, html.touch .roster .rd, html.touch .roster .you { display: none; } html.touch .roster .av { width: 20px; height: 20px; }
html.touch .startbox { min-width: 190px; gap: 4px; } html.touch .modesel .mlabel { display: none; } html.touch .modesel .seg button { font-size: 9px; padding: 7px 3px; letter-spacing: 0; white-space: nowrap; } html.touch .modesel .mdesc { display: none; }
html.touch #rerollBtn { padding: 6px; font-size: 11px; }
html.touch .win { max-height: 94vh; left: calc(var(--L) + 70px); width: calc(100vw - var(--L) - 82px); max-width: 760px; transform: translateY(-50%); padding: 0 14px 12px; }
html.touch #meta { padding-left: calc(var(--L) + 70px); padding-right: 8px; } html.touch .mbox { width: 100%; max-width: 760px; }
html.touch .win h2 { margin: 0 -14px 4px; padding: 10px 14px 8px; font-size: 18px; }
html.touch .win .keys, html.touch .win .sub:has(+ .keys) { display: none; }
html.touch .win .cgrid { grid-template-columns: repeat(4, 1fr); gap: 7px; } html.touch .win .cgrid.gunsg { grid-template-columns: repeat(3, 1fr); }
html.touch .row { margin: 6px 0; font-size: 11px; } html.touch .seg button { padding: 8px 10px; font-size: 12px; } html.touch .row input[type=range] { min-height: 28px; }
html.touch .mbox { max-height: 94vh; } html.touch .mhead { padding: 8px 14px; } html.touch .mhead h2 { font-size: 18px; } html.touch #mBody { padding: 8px 14px 12px; }
html.touch #mClose, html.touch .wclose { min-width: 44px; min-height: 36px; }
html.touch .mgrid { grid-template-columns: repeat(3, 1fr); } html.touch .tiers { grid-template-columns: repeat(5, 1fr); }
html.touch .mcard { padding: 8px 10px; margin-bottom: 5px; } html.touch .mcard b { font-size: 15px; }
html.touch .mcard.spin { flex-direction: row; } html.touch .wheelbox { width: 170px; height: 170px; }
html.touch #olBox { top: 4px; }

/* short phones (iPhone SE class) */
@media (max-height: 340px) { html.touch { --b: 44px; } html.touch #hpNum { font-size: 22px; } html.touch .roster .pl { font-size: 11px; } }