/* Mobile play: a small thumb cluster, one stick, and the essential match HUD. */
.vb-touch-controls {
  --touch-edge-x: max(12px, env(safe-area-inset-left));
  --touch-edge-r: max(12px, env(safe-area-inset-right));
  --touch-edge-y: max(20px, env(safe-area-inset-bottom));
  --touch-button: 48px;
  --touch-fire: 64px;
  --touch-stick: 96px;
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-menu) - 10);
  display: none;
  overflow: hidden;
  pointer-events: none;
  touch-action: none;
  -webkit-touch-callout: none;
}
.vb-touch-controls.is-active { display: block; }
.vb-touch-controls.is-size-small { --touch-button: 44px; --touch-fire: 60px; --touch-stick: 88px; }
.vb-touch-controls.is-size-large { --touch-button: 56px; --touch-fire: 72px; --touch-stick: 108px; }
.vb-touch-mode,
.vb-touch-mode body { overscroll-behavior: none; }
.vb-touch-controls * {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.vb-touch-look-zone { position: absolute; inset: 0; pointer-events: auto; }
.vb-touch-move-zone {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 44%;
  height: min(40vh, 230px);
  pointer-events: auto;
}
.vb-touch-stick-base {
  position: absolute;
  bottom: var(--touch-edge-y);
  left: var(--touch-edge-x);
  width: var(--touch-stick);
  height: var(--touch-stick);
  border: 1px solid #ffffff55;
  border-radius: 50%;
  background: #0b0e122e;
}
.vb-touch-stick-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border: 1px solid #ffffff80;
  border-radius: 50%;
  background: #ffffff26;
  will-change: transform;
}
.vb-touch-move-zone.is-engaged .vb-touch-stick-knob { background: #ffffff55; }
.vb-touch-button {
  --touch-column: 0px;
  --touch-row: 0px;
  position: absolute;
  right: calc(var(--touch-edge-r) + var(--touch-column));
  bottom: calc(var(--touch-edge-y) + var(--touch-row));
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--touch-button);
  height: var(--touch-button);
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid #ffffff55;
  border-radius: 50%;
  background: #0b0e1273;
  color: #fff;
  font: 600 10px/1 var(--font-ui);
  letter-spacing: 0.02em;
  pointer-events: auto;
}
.vb-touch-button.is-held,
.vb-touch-button.is-latched { background: #ffffff4d; border-color: #fff; }
.vb-touch-button.is-hidden { display: none; pointer-events: none; }
.vb-touch-fire { width: var(--touch-fire); height: var(--touch-fire); border-color: #ffffffaa; font-size: 12px; }
.vb-touch-ads { --touch-column: calc(var(--touch-fire) + 12px); }
.vb-touch-jump { --touch-row: calc(var(--touch-fire) + 12px); }
.vb-touch-reload { --touch-column: calc(var(--touch-fire) + 12px); --touch-row: calc(var(--touch-fire) + 12px); }
.vb-touch-medkit { --touch-column: calc(var(--touch-fire) + 12px); --touch-row: calc(var(--touch-fire) + var(--touch-button) + 24px); color: #a1edc0; }
.vb-touch-interact,
.vb-touch-buy { --touch-row: calc(var(--touch-fire) + var(--touch-button) + 24px); width: 64px; border-radius: 8px; }
.vb-touch-pause { top: max(10px, env(safe-area-inset-top)); bottom: auto; left: var(--touch-edge-x); right: auto; width: 44px; height: 44px; border-radius: 8px; font-size: 18px; }
/* The ammo readout itself is the weapon swap target. */
.vb-touch-weapon {
  top: calc(max(10px, env(safe-area-inset-top)) + 54px);
  bottom: auto;
  width: 132px;
  height: 52px;
  border-radius: 8px;
  border-color: transparent;
  background: transparent;
  justify-items: end;
  align-items: end;
  padding: 8px;
  font-size: 18px;
}
.vb-touch-controls.is-left-handed .vb-touch-move-zone { left: auto; right: 0; }
.vb-touch-controls.is-left-handed .vb-touch-stick-base { left: auto; right: var(--touch-edge-r); }
.vb-touch-controls.is-left-handed :is(.vb-touch-fire, .vb-touch-ads, .vb-touch-jump, .vb-touch-reload, .vb-touch-interact, .vb-touch-buy, .vb-touch-medkit) {
  right: auto;
  left: calc(var(--touch-edge-x) + var(--touch-column));
}

/* Remove desktop ornaments and keyboard-only hints from mobile play. */
.vb-touch-mode :is(#compass, #player-status-strip, #grenade-count, #weapon-icon, #killfeed, .vb-breath-hint, .vb-interaction-hint, #hud-buy-prompt, #match-map-chip) { display: none !important; }
.vb-touch-mode #match-header {
  top: max(10px, env(safe-area-inset-top));
  min-width: 0;
  width: max-content;
  max-width: calc(100vw - 128px);
  gap: 8px;
  flex-wrap: nowrap;
  line-height: 1.1;
  padding: 5px 8px;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  clip-path: none;
}
.vb-touch-mode .vb-match-team { min-width: 32px; flex: 0 0 auto; flex-direction: column; gap: 2px; padding: 0; background: none; border: 0; box-shadow: none; }
.vb-touch-mode .vb-match-team .vb-team-name { font-size: 9px; letter-spacing: 0; }
.vb-touch-mode .vb-team-role { font-size: 8px; letter-spacing: 0; }
.vb-touch-mode .vb-team-score { order: 0; font-size: 16px; }
.vb-touch-mode .vb-team-details { order: 1; align-items: center; }
.vb-touch-mode .vb-match-mode-chip { font-size: 8px; padding: 0; background: none; letter-spacing: 0; }
.vb-touch-mode .vb-match-clock-box { gap: 4px; flex-wrap: wrap; justify-content: center; }
.vb-touch-mode .vb-match-clock { font-size: 17px; letter-spacing: 0; text-shadow: none; }
.vb-touch-mode .vb-match-phase-label { font-size: 0; letter-spacing: 0; }
.vb-touch-mode .vb-match-phase-label::after { content: attr(data-compact); font-size: 9px; }
.vb-touch-mode #healthbar,
.vb-touch-mode #ammo {
  top: calc(max(10px, env(safe-area-inset-top)) + 54px);
  bottom: auto;
  min-width: 0;
  border: 0;
  border-radius: 8px;
  clip-path: none;
  transform: none;
  box-shadow: none;
  background: #0b0e1273;
}
.vb-touch-mode #healthbar { left: max(12px, env(safe-area-inset-left)); width: 100px; padding: 8px; }
.vb-touch-mode #healthbar::before { content: 'HP'; font-size: 10px; letter-spacing: 0; margin-bottom: 6px; }
.vb-touch-mode #healthbar::after { top: 7px; right: 8px; font-size: 12px; }
.vb-touch-mode #healthbar .hp-track { height: 4px; }
.vb-touch-mode #ammo { right: max(12px, env(safe-area-inset-right)); width: 132px; height: 52px; gap: 4px; padding: 8px 28px 20px 8px; }
.vb-touch-mode #ammocount { font-size: 24px; }
.vb-touch-mode #ammoreserve { font-size: 12px; }
.vb-touch-mode #weaponname { left: 8px; right: 28px; bottom: 6px; font-size: 9px; letter-spacing: 0; }
.vb-touch-mode #charge-meter { right: max(12px, env(safe-area-inset-right)); top: calc(max(10px, env(safe-area-inset-top)) + 110px); bottom: auto; width: 132px; }
.vb-touch-mode #econ-cluster { top: calc(max(10px, env(safe-area-inset-top)) + 100px); left: max(12px, env(safe-area-inset-left)); bottom: auto; }
.vb-touch-mode #interaction-bar { bottom: calc(max(20px, env(safe-area-inset-bottom)) + 200px); width: min(260px, calc(100vw - 40px)); }

.vb-touch-mode .vb-match-center { order: 0; width: auto; margin: 0; gap: 1px; }
.vb-touch-mode #match-header:is([data-mode="fun"], [data-mode="training"]) .vb-match-clock-box { display: none; }
.vb-touch-mode .vb-match-bomb-banner { font-size: 8px; letter-spacing: 0; padding: 1px 2px; margin: 0; border: 0; }
.vb-touch-mode .vb-run-hud { top: 128px; left: max(12px, env(safe-area-inset-left)); min-width: 0; max-width: 210px; padding: 8px; border: 0; border-radius: 6px; box-shadow: none; }
.vb-touch-mode .vb-run-hint { font-size: 9px; letter-spacing: 0; }
.vb-touch-mode .vb-run-best { font-size: 8px; letter-spacing: 0; }
.vb-touch-mode .vb-run-timer { font-size: 20px; margin-top: 4px; }
.vb-touch-mode .vb-run-stage, .vb-touch-mode .vb-run-result { font-size: 9px; letter-spacing: 0; }
.vb-touch-mode .vb-run-toast { margin-top: 4px; font-size: 9px; letter-spacing: 0; }

@media (max-width: 640px) {
  .vb-touch-mode #match-header:is([data-mode="tdm"], [data-mode="snd"]) {
    left: auto;
    right: max(12px, env(safe-area-inset-right));
    max-width: calc(100vw - 80px - env(safe-area-inset-left) - env(safe-area-inset-right));
    transform: none;
  }
}