/* Conquest HUD — design "Option 2 / Immersive command" (docs/design/conquest/redesign/hud/).
   Team-relative colours: own blue, enemy orange, neutral grey. */
.vb-conquest-hud {
  --cq-own: #4cc3ff; --cq-own-dim: #0e3a52; --cq-enemy: #ff8a3d; --cq-enemy-dim: #55260a;
  --cq-neutral: #d8d8d8; --cq-squad: #7ef29a; --cq-contested: #ffd166; --cq-danger: #ff4b4b;
  --cq-panel: rgba(9, 15, 20, 0.86); --cq-panel-solid: #0b1319; --cq-line: rgba(140, 166, 186, 0.28);
  --cq-text: #eef3f6; --cq-sub: #9fb0bd;
  --cq-minimap: 184px;
  position: fixed; inset: 0; z-index: calc(var(--z-menu, 100) - 9);
  pointer-events: none; color: var(--cq-text); font-family: var(--font-ui, system-ui, sans-serif);
}
.vb-conquest-hud[hidden], .vb-conquest-hud [hidden] { display: none !important; }
#hud[data-mode="conquest"] #match-header { display: none !important; }
body[data-vehicle-seated="true"] :is(#ammo, #grenade-count, #weaponname, #pickaxe-meter, #charge-meter, #medkit-inventory, #medkit-progress, #grenade-readied, #grenade-aim) { display: none !important; }
/* Mouse-aim pilots: the reticle canvas draws the aim circle at the centre instead. */
body[data-flight-aim="true"] #crosshair { display: none !important; }

/* ---------------------------------------------------------------- top bar */
.cq-top {
  position: absolute; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  display: grid; grid-template-columns: 196px auto 196px; align-items: center; gap: 14px;
  padding: 8px 14px 9px; background: linear-gradient(180deg, rgba(12, 20, 27, 0.94), rgba(9, 15, 20, 0.86));
  border: 1px solid var(--cq-line); border-radius: 6px; box-shadow: 0 4px 18px #0007, inset 0 1px 0 #ffffff0d;
}
.cq-team { display: grid; gap: 4px; }
.cq-team-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cq-team-name { font-size: 12px; font-weight: 700; letter-spacing: 1.6px; color: var(--cq-sub); }
.cq-tickets { font-size: 30px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.5px; }
.cq-team-own .cq-tickets { color: var(--cq-own); }
.cq-team-enemy .cq-tickets { color: var(--cq-enemy); }
.cq-team-enemy .cq-team-head { flex-direction: row-reverse; }
.cq-ticket-track { height: 8px; background: #ffffff14; border-radius: 3px; box-shadow: inset 0 0 0 1px #ffffff0a; overflow: hidden; }
.cq-ticket-fill { display: block; height: 100%; border-radius: 3px; transition: width 300ms linear; }
.cq-team-own .cq-ticket-fill { background: linear-gradient(90deg, #1f8fc4, var(--cq-own)); box-shadow: 0 0 10px #4cc3ff66; }
.cq-team-enemy .cq-ticket-track { transform: scaleX(-1); }
.cq-team-enemy .cq-ticket-fill { background: linear-gradient(90deg, #c45a1f, var(--cq-enemy)); box-shadow: 0 0 10px #ff8a3d66; }
.cq-bleed { min-height: 13px; font-size: 12px; font-weight: 800; letter-spacing: 0.6px; color: var(--cq-danger); }
.cq-team-enemy .cq-bleed { text-align: right; }
.cq-team[data-bleeding="true"] .cq-ticket-fill { animation: cq-bleed 1s ease-in-out infinite; }
.cq-team[data-low="true"] .cq-tickets { text-shadow: 0 0 12px #ff4b4b88; }
@keyframes cq-bleed { 50% { filter: brightness(1.45); } }
.cq-center { display: grid; justify-items: center; gap: 4px; }
.cq-chips { display: flex; gap: 12px; padding: 3px 4px 0; }
.cq-clock { font-size: 13px; font-weight: 700; letter-spacing: 1px; color: var(--cq-sub); font-variant-numeric: tabular-nums; }
.cq-clock[data-urgent="true"] { color: var(--cq-danger); }

.cq-chip {
  --chip: var(--cq-neutral); --lean: var(--cq-neutral);
  position: relative; width: 28px; height: 28px; transform: rotate(45deg); overflow: hidden;
  border: 2px solid var(--chip); background: #101a21; border-radius: 3px; box-shadow: 0 0 0 1px #0009;
}
.cq-chip[data-owner="own"] { --chip: var(--cq-own); }
.cq-chip[data-owner="enemy"] { --chip: var(--cq-enemy); }
.cq-chip[data-lean="own"] { --lean: var(--cq-own); }
.cq-chip[data-lean="enemy"] { --lean: var(--cq-enemy); }
.cq-chip-fill {
  position: absolute; inset: 0; transform: rotate(-45deg) scale(1.5); transform-origin: 50% 50%;
  background: linear-gradient(0deg, var(--lean) 0, var(--lean) calc(var(--fill, 0) * 100%), transparent calc(var(--fill, 0) * 100%));
  opacity: 0.55;
}
.cq-chip[data-contested="true"] { border-color: var(--cq-contested); animation: cq-pulse 0.8s ease-in-out infinite; }
.cq-chip[data-contested="true"] .cq-chip-fill { background: repeating-linear-gradient(45deg, #ffd166a6 0 3px, transparent 3px 7px); opacity: 1; }
.cq-chip-letter {
  position: absolute; inset: 0; display: grid; place-items: center; transform: rotate(-45deg);
  font-size: 15px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px #000;
}
.cq-chip[data-moving="own"]::after, .cq-chip[data-moving="enemy"]::after {
  content: ''; position: absolute; inset: -2px; border: 2px solid; border-color: inherit; animation: cq-ping 1.1s ease-out infinite;
}
.cq-chip[data-moving="enemy"]::after { border-color: var(--cq-enemy); }
.cq-chip[data-moving="own"]::after { border-color: var(--cq-own); }
/* Weather tab (design A, docs/design/conquest/weather/): hung under the ticket bar; values from match.conquest.wx. */
.cq-weather {
  /* Below the bar's 1 px border (an absolute child's 100% is the padding box). */
  position: absolute; top: calc(100% + 1px); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 4px 14px 5px; white-space: nowrap;
  background: linear-gradient(180deg, rgba(9, 15, 20, 0.9), rgba(9, 15, 20, 0.8));
  border: 1px solid var(--cq-line); border-top: 0; border-radius: 0 0 6px 6px; box-shadow: 0 6px 14px #0006;
  font-size: 11px; font-weight: 700; letter-spacing: 1.4px; color: var(--cq-sub); font-variant-numeric: tabular-nums;
  transition: background 160ms ease-out, box-shadow 160ms ease-out;
}
.cq-weather-glyph { display: inline-grid; place-items: center; width: 16px; height: 16px; color: #e8eef2; }
.cq-weather-icon { width: 16px; height: 16px; display: block; }
.cq-weather-label { color: var(--cq-text); font-weight: 800; letter-spacing: 1.8px; margin-left: -4px; }
.cq-weather-sep { width: 1px; height: 13px; background: #ffffff2e; }
.cq-weather-range[data-reduced="true"] { color: var(--cq-contested); }
.cq-weather-forecast { color: #7f909c; margin-left: 4px; }
.cq-weather[data-trend="worse"] .cq-weather-forecast { color: #c2cbd1; }
.cq-weather[data-state="golden"] .cq-weather-glyph { color: #ffcf6a; }
.cq-weather[data-state="storm"] .cq-weather-glyph, .cq-weather-tag[data-state="storm"] .cq-weather-glyph { color: #d6e4ff; }
.cq-weather[data-flash="true"] { background: linear-gradient(180deg, rgba(64, 80, 112, 0.94), rgba(20, 28, 40, 0.86)); box-shadow: 0 6px 14px #0006, 0 0 18px #b9ccff66; transition: none; }
/* Touch: no room under the bar, so the glyph and the state name sit beside the clock. */
.cq-weather-tag { display: none; align-items: center; gap: 3px; font-size: 10px; font-weight: 800; letter-spacing: 0.8px; color: var(--cq-sub); }
.cq-weather-tag .cq-weather-glyph, .cq-weather-tag .cq-weather-icon { width: 11px; height: 11px; }
.cq-weather-tag[data-severity="bad"] { color: var(--cq-contested); }
.cq-weather-tag[data-flash="true"] .cq-weather-glyph { color: #fff; filter: drop-shadow(0 0 4px #b9ccff); }
/* Desktop only (touch shows the weather glyph beside the clock instead): the banner lane, the view strip under a banner
   and the ribbon toast (conquest-ribbons.css) step below the tab, and the tab hides under the scoreboard. */
html:not(.vb-touch-mode) .vb-conquest-hud[data-weather="true"] .cq-banner { top: max(124px, calc(env(safe-area-inset-top) + 118px)); }
/* The 1.6 s view strip takes the slot under the ticket bar (the periscope heading tape sits right below it): the tab yields meanwhile. */
.vb-conquest-hud:has(.cq-view:not([hidden])) .cq-weather { visibility: hidden; }
html:not(.vb-touch-mode) .vb-conquest-hud[data-weather="true"]:has(.cq-banner:not([hidden])) .cq-view { top: calc(max(14px, env(safe-area-inset-top)) + 178px); }
body:has(#scoreboard.is-open[data-mode="conquest"]) .vb-conquest-hud .cq-weather { visibility: hidden; }
/* Iron Bridge state on the bridge flag's chip (bridge-hud.js): amber while damaged / collapsing, red once down. */
.cq-chip-badge { position: relative; flex: none; width: 0; height: 28px; margin-left: -12px; --badge: #ffb020; }
.cq-chip-badge[hidden] { display: none; }
.cq-chip-badge[data-bridge="down"] { --badge: var(--cq-danger); }
.cq-chip-badge::before {
  content: '!'; position: absolute; left: -6px; bottom: -4px; width: 13px; height: 12px; display: grid; place-items: end center;
  font-size: 9px; font-weight: 900; line-height: 1; color: #081016; background: var(--badge);
  clip-path: polygon(50% 0, 100% 100%, 0 100%); filter: drop-shadow(0 0 1px #000);
}
@keyframes cq-pulse { 50% { box-shadow: 0 0 0 1px #0009, 0 0 12px var(--cq-contested); } }

/* Breakthrough sector track (docs/design/conquest/breakthrough/, variant A). */
.cq-center-foot { display: flex; align-items: center; gap: 8px; }
.cq-top[data-variant="breakthrough"] { grid-template-columns: 150px auto 150px; }
.cq-top[data-variant="breakthrough"] .cq-chips { gap: 6px; align-items: stretch; padding: 0; }
.cq-sector {
  --sector: var(--cq-line); position: relative; display: flex; align-items: center; gap: 6px;
  padding: 2px 9px 3px 6px; border: 1px solid var(--sector); border-radius: 4px; background: #ffffff08; overflow: hidden;
}
.cq-sector-label { font-size: 10px; font-weight: 800; letter-spacing: 1px; color: var(--cq-sub); writing-mode: vertical-rl; transform: rotate(180deg); }
.cq-sector-flags { display: flex; gap: 10px; padding: 4px 3px; }
.cq-sector .cq-chip { width: 22px; height: 22px; }
.cq-sector .cq-chip-letter { font-size: 13px; }
.cq-sector-mark { display: none; position: absolute; right: 3px; top: 2px; width: 11px; height: 11px; color: var(--cq-sub); }
.cq-sector-mark svg { width: 100%; height: 100%; display: block; }
.cq-sector-progress { position: absolute; left: 0; bottom: 0; height: 2px; width: calc(var(--progress, 0) * 100%); background: var(--sector); }
.cq-sector[data-role="captured"] { opacity: 0.62; }
.cq-sector[data-role="locked"] { opacity: 0.5; border-style: dashed; }
.cq-sector[data-role="locked"] .cq-sector-mark { display: block; }
.cq-sector[data-role="active"] { --sector: var(--cq-contested); background: #ffd16612; box-shadow: 0 0 10px #ffd16633, inset 0 0 0 1px #ffd16633; }
.cq-sector[data-role="active"] .cq-sector-label { color: var(--cq-contested); }
.cq-top[data-side="attack"] .cq-sector[data-role="captured"] { --sector: var(--cq-own); }
.cq-top[data-side="defend"] .cq-sector[data-role="captured"] { --sector: var(--cq-enemy); }
.cq-sector-sep { align-self: center; width: 7px; height: 7px; border-top: 2px solid var(--cq-sub); border-right: 2px solid var(--cq-sub); transform: rotate(45deg); opacity: 0.7; }
.cq-top[data-side="defend"] .cq-sector-sep { transform: rotate(-135deg); }
.cq-chip[data-role="locked"] { --chip: #8a98a3; filter: saturate(0.4); }
.cq-team[data-role="defend"] .cq-ticket-track { visibility: hidden; }
.cq-team[data-role="defend"] .cq-bleed { color: var(--cq-sub); letter-spacing: 1.2px; }
.cq-team[data-role="attack"] .cq-bleed { color: var(--cq-sub); font-size: 10px; letter-spacing: 1.2px; }
.cq-team-own[data-role="defend"] .cq-team-name, .cq-team-own[data-role="attack"] .cq-team-name { color: var(--cq-own); }
.cq-team-enemy[data-role="defend"] .cq-team-name, .cq-team-enemy[data-role="attack"] .cq-team-name { color: var(--cq-enemy); }
.cq-team[data-role="attack"][data-low="true"] .cq-bleed { color: var(--cq-danger); }
.cq-sector-tag { padding: 0 6px; border-radius: 3px; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; line-height: 16px; }
.cq-sector-tag[data-kind="grace"] { background: #ffd16622; color: var(--cq-contested); }
.cq-sector-tag[data-kind="overtime"] { background: #ff4b4b2e; color: #ffb1a8; animation: cq-bleed 1s ease-in-out infinite; }
.cq-flag-marker-lock { display: none; position: absolute; left: 50%; top: -12px; width: 12px; height: 12px; margin-left: -6px; color: #e8eef2; filter: drop-shadow(0 1px 1px #000); }
.cq-flag-marker[data-role="locked"] { --tone: #a6b2bb; --lean: #a6b2bb; opacity: 0.55; }
.cq-flag-marker[data-role="locked"] .cq-flag-marker-lock { display: block; }
.cq-flag-marker[data-role="captured"] { opacity: 0.6; }
.cq-restricted[data-kind="grace"] { border-color: #ffd16688; }
.cq-restricted[data-kind="grace"] .cq-restricted-title { color: var(--cq-contested); }
.cq-restricted[data-kind="grace"] .cq-restricted-seconds { animation: none; color: #ffe7a8; }
@keyframes cq-ping { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.5); } }

/* ------------------------------------------------- vehicle camera view strip */
/* V / D-pad down: the seat's views under the ticket bar for 1.6 s, the active one underlined. */
.cq-view {
  position: absolute; top: calc(max(14px, env(safe-area-inset-top)) + 84px); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 6px; white-space: nowrap;
  background: var(--cq-panel); border: 1px solid var(--cq-line); border-radius: 5px; box-shadow: 0 4px 14px #0007;
  animation: cq-view-in 160ms ease-out;
}
.cq-view-key {
  display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 4px; border-radius: 3px;
  background: #1c2a34; border: 1px solid #ffffff2a; color: #fff; font: 800 10px/1 var(--font-ui);
}
.cq-view-list { display: flex; align-items: center; gap: 8px; }
.cq-view-item { position: relative; padding: 2px 0 3px; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; color: var(--cq-sub); }
.cq-view-item + .cq-view-item::before { content: "\00b7"; position: absolute; left: -6px; color: #ffffff40; }
.cq-view-item[data-active="true"] { color: #fff; }
.cq-view-item[data-active="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 1px; background: var(--cq-own); box-shadow: 0 0 6px #4cc3ff88; }
@keyframes cq-view-in { from { opacity: 0; transform: translateX(-50%) translateY(-4px); } }
/* A banner owns the slot under the ticket bar: the strip steps below it. */
.vb-conquest-hud:has(.cq-banner:not([hidden])) .cq-view { top: calc(max(14px, env(safe-area-inset-top)) + 150px); }
.vb-touch-mode .cq-view { top: calc(max(10px, env(safe-area-inset-top)) + 58px); padding: 3px 8px 3px 4px; gap: 6px; }
.vb-touch-mode .cq-view-item { font-size: 9px; letter-spacing: 0.8px; }
/* Phone portrait has no free row under the ticket bar (HP card, vehicle card): the view change speaks for itself. */
@media (orientation: portrait) { .vb-touch-mode .cq-view { display: none !important; } }

/* ---------------------------------------------------------------- banners */
.cq-banner {
  position: absolute; top: max(96px, calc(env(safe-area-inset-top) + 90px)); left: 50%; transform: translateX(-50%);
  min-width: 340px; padding: 9px 26px 10px; text-align: center; border-radius: 4px;
  background: linear-gradient(90deg, transparent, var(--cq-panel) 14%, var(--cq-panel) 86%, transparent);
  border-top: 2px solid var(--tone, var(--cq-neutral)); border-bottom: 1px solid #ffffff14;
}
.cq-banner[data-tone="own"] { --tone: var(--cq-own); }
.cq-banner[data-tone="enemy"] { --tone: var(--cq-enemy); }
.cq-banner[data-tone="hazard"] { --tone: #ffb020; }
.cq-banner[data-tone="danger"] { --tone: var(--cq-danger); }
.cq-banner-bar { display: block; height: 3px; margin: 6px 6% 0; border-radius: 2px; background: #ffffff1a; overflow: hidden; }
.cq-banner-bar[hidden] { display: none; }
.cq-banner-bar > i { display: block; height: 100%; width: calc(var(--left, 1) * 100%); background: var(--tone, #ffb020); box-shadow: 0 0 8px var(--tone, #ffb020); }
.cq-banner.is-in { animation: cq-banner-in 340ms cubic-bezier(.2, .9, .3, 1.2); }
.cq-banner-title { font-size: 22px; font-weight: 800; letter-spacing: 2px; color: var(--tone, #fff); text-shadow: 0 2px 8px #000a; }
.cq-banner-detail { margin-top: 1px; font-size: 12px; font-weight: 700; letter-spacing: 1.6px; color: var(--cq-sub); }
.cq-banner[data-outcome="victory"] .cq-banner-title, .cq-banner[data-outcome="defeat"] .cq-banner-title, .cq-banner[data-outcome="draw"] .cq-banner-title { font-size: 40px; letter-spacing: 6px; }
@keyframes cq-banner-in { from { opacity: 0; transform: translateX(-50%) scale(1.15); } to { opacity: 1; transform: translateX(-50%) scale(1); } }

/* ----------------------------------------------------------- capture ring */
.cq-ring {
  --tone: var(--cq-neutral); --lean: var(--cq-neutral);
  position: absolute; left: 50%; top: calc(50% + 44px); transform: translateX(-50%);
  display: grid; justify-items: center; gap: 2px; text-shadow: 0 1px 3px #000;
}
.cq-ring[data-tone="own"] { --tone: var(--cq-own); }
.cq-ring[data-tone="enemy"] { --tone: var(--cq-enemy); }
.cq-ring[data-tone="contested"] { --tone: var(--cq-contested); }
.cq-ring[data-lean="own"] { --lean: var(--cq-own); }
.cq-ring[data-lean="enemy"] { --lean: var(--cq-enemy); }
.cq-ring-dial { position: relative; width: 64px; height: 64px; }
.cq-ring-svg { width: 100%; height: 100%; overflow: visible; }
.cq-ring-track { fill: #0b131aaa; stroke: #ffffff26; stroke-width: 5; }
.cq-ring-arc { fill: none; stroke: var(--lean); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset 120ms linear; filter: drop-shadow(0 0 4px var(--lean)); }
.cq-ring[data-tone="contested"] .cq-ring-dial { animation: cq-ring-shake 0.5s ease-in-out infinite; }
.cq-ring[data-tone="contested"] .cq-ring-track { stroke: var(--cq-contested); stroke-opacity: 0.85; stroke-dasharray: 3 3; }
.cq-ring-letter { position: absolute; inset: 0; display: grid; place-items: center; font-size: 24px; font-weight: 800; color: var(--tone); }
.cq-ring-label { font-size: 14px; font-weight: 800; letter-spacing: 2px; color: var(--tone); }
.cq-ring-counts { display: flex; gap: 6px; align-items: baseline; font-size: 13px; font-weight: 800; }
.cq-ring-own { color: var(--cq-own); } .cq-ring-enemy { color: var(--cq-enemy); }
.cq-ring-vs { font-size: 10px; color: var(--cq-sub); letter-spacing: 1px; }
@keyframes cq-ring-shake { 25% { transform: translateX(-1px); } 75% { transform: translateX(1px); } }
/* Flag supply cache paying (shared/flag-cache.js): a small amber tag under the counts. */
.cq-ring-supply { margin-top: 2px; padding: 1px 7px 1px 18px; border-radius: 3px; position: relative;
  background: #2a2208d9; border: 1px solid #ffd36a88; color: #ffd36a; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; }
.cq-ring-supply::before { content: ''; position: absolute; left: 6px; top: 50%; width: 7px; height: 6px; margin-top: -3px;
  background: #ffd36a; box-shadow: inset 0 -2px 0 #8a6a1c; animation: cq-supply-pulse 1.2s ease-in-out infinite; }
@keyframes cq-supply-pulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .cq-ring-supply::before { animation: none; } }
/* The infantry RELOADING hint normally sits where the ring is: lift it above the crosshair while the ring shows. */
body:has(.vb-conquest-hud:not([hidden]) .cq-ring:not([hidden])) #reload-hint { top: -58px; }

/* ---------------------------------------------------------- score ticker */
.cq-ticker { position: absolute; left: 50%; top: calc(50% + 160px); transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; }
.cq-ticker-total { font-size: 20px; font-weight: 800; color: #fff3c4; text-shadow: 0 1px 4px #000; }
.cq-ticker-lines { display: grid; justify-items: center; gap: 1px; }
.cq-ticker-line { display: flex; gap: 6px; align-items: baseline; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-shadow: 0 1px 3px #000; animation: cq-tick-in 220ms ease-out; }
.cq-ticker-line b { color: #ffe08a; font-size: 15px; }
.cq-ticker-line span { color: #f2f4f6; }
.cq-ticker-line.is-kill b { color: #fff; }
@keyframes cq-tick-in { from { opacity: 0; transform: translateY(6px); } }

/* --------------------------------------------------------- world markers */
.cq-world { position: absolute; inset: 0; overflow: hidden; }
.cq-flag-marker {
  --tone: var(--cq-neutral); --lean: var(--cq-neutral);
  position: absolute; left: 0; top: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; will-change: transform;
  filter: drop-shadow(0 1px 2px #000c);
}
.cq-flag-marker[data-owner="own"] { --tone: var(--cq-own); }
.cq-flag-marker[data-owner="enemy"] { --tone: var(--cq-enemy); }
.cq-flag-marker[data-lean="own"] { --lean: var(--cq-own); }
.cq-flag-marker[data-lean="enemy"] { --lean: var(--cq-enemy); }
.cq-flag-marker-svg { position: absolute; inset: 0; overflow: visible; }
.cq-flag-marker-diamond { fill: #0b1319d9; stroke: var(--tone); stroke-width: 2; }
.cq-flag-marker-arc { fill: none; stroke: var(--lean); stroke-width: 3; stroke-linecap: round; }
.cq-flag-marker[data-contested="true"] .cq-flag-marker-diamond { stroke: var(--cq-contested); animation: cq-marker-pulse 0.7s ease-in-out infinite; }
.cq-flag-marker-letter { position: absolute; inset: 0; display: grid; place-items: center; font-size: 16px; font-weight: 800; color: var(--tone); }
.cq-flag-marker-distance { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 700; color: #e8eef2; white-space: nowrap; text-shadow: 0 1px 2px #000; }
.cq-flag-marker-arrow { display: none; position: absolute; inset: -12px; }
.cq-flag-marker[data-edge="true"] .cq-flag-marker-arrow { display: block; }
.cq-flag-marker-arrow::before { content: ''; position: absolute; left: 50%; top: 0; margin-left: -6px; border: 6px solid transparent; border-bottom: 8px solid var(--tone); border-top: 0; }
.cq-flag-marker[data-edge="true"] { opacity: 0.92; transform-origin: center; }
.cq-flag-marker[data-near="true"] { opacity: 0.35; }
@keyframes cq-marker-pulse { 50% { stroke-width: 4; } }
.cq-unit-marker { position: absolute; left: 0; top: 0; will-change: transform; display: grid; justify-items: center; }
.cq-unit-glyph { display: block; }
.cq-unit-marker[data-align="start"] { justify-items: start; }
.cq-unit-marker[data-align="end"] { justify-items: end; }
.cq-unit-marker[data-align="start"] .cq-unit-glyph { translate: -50% 0; }
.cq-unit-marker[data-align="end"] .cq-unit-glyph { translate: 50% 0; }
.cq-unit-marker[data-kind="team"] .cq-unit-glyph { width: 7px; height: 7px; margin: -3px 0 0; border-radius: 50%; background: var(--cq-own); box-shadow: 0 0 0 1.5px #071016; }
.cq-unit-marker[data-kind="squad"] .cq-unit-glyph { width: 9px; height: 9px; margin: -4px 0 0; border-radius: 50%; background: var(--cq-squad); box-shadow: 0 0 0 1.5px #071016; }
.cq-unit-marker[data-kind="spotted"] .cq-unit-glyph { width: 11px; height: 11px; margin: -5px 0 0; transform: rotate(45deg); background: var(--cq-danger); box-shadow: 0 0 0 1.5px #1a0505, 0 0 8px #ff4b4b99; }
.cq-unit-marker[data-kind="down"] .cq-unit-glyph, .cq-unit-marker[data-kind="spotted-vehicle"] .cq-unit-glyph { width: 22px; height: 22px; margin: -11px 0 0; }
/* Own supply crates (docs/conquest.md "Infantry supply"): a small glyph on a dark chip, the ammo stencil yellow or the medical red. */
.cq-unit-marker[data-kind="crate"] .cq-unit-glyph { width: 15px; height: 15px; margin: -8px 0 0; padding: 2px; border-radius: 3px; background: #0b1218cc; color: #ffd166; box-shadow: 0 0 0 1px #ffd16666; }
.cq-unit-marker[data-kind="crate"][data-comm="medcrate"] .cq-unit-glyph { color: #ff6b6b; box-shadow: 0 0 0 1px #ff6b6b66; }
.cq-unit-marker[data-kind="crate"] .cq-unit-label { font-size: 9px; opacity: 0.8; }
.cq-unit-marker[data-kind="down"] .cq-unit-glyph { color: #ff6b6b; filter: drop-shadow(0 0 3px #000); animation: cq-down 1s ease-in-out infinite; }
.cq-unit-marker[data-kind="spotted-vehicle"] .cq-unit-glyph { color: var(--cq-danger); border: 1.5px solid var(--cq-danger); border-radius: 4px; background: #1a0505b0; padding: 2px; }
.cq-unit-icon { width: 100%; height: 100%; display: block; }
.cq-unit-label { margin-top: 2px; font-size: 10px; font-weight: 700; color: #f2f6f8; white-space: nowrap; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.cq-unit-marker[data-kind="squad"] .cq-unit-label { color: var(--cq-squad); }
.cq-unit-marker[data-kind="down"] .cq-unit-label { color: #ffb3b3; }
.cq-unit-marker[data-kind="spotted-vehicle"] .cq-unit-label { color: #ffb0a8; }
@keyframes cq-down { 50% { transform: scale(1.12); } }

/* ---------------------------------------------------------------- minimap */
.cq-minimap {
  position: absolute; left: max(22px, env(safe-area-inset-left)); bottom: var(--cq-floor, 104px); width: var(--cq-minimap); height: var(--cq-minimap);
  border-radius: 50%; pointer-events: auto; cursor: pointer;
  box-shadow: 0 0 0 2px #0b1319, 0 0 0 4px #8aa2b455, 0 6px 18px #000a;
}
.cq-minimap-canvas { width: 100%; height: 100%; border-radius: 50%; display: block; }
.cq-minimap-ring { position: absolute; inset: 0; pointer-events: none; }
.cq-compass { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; display: grid; place-items: center;
  font-size: 10px; font-weight: 800; color: #d9e2e8; background: #0b1319; border-radius: 50%; box-shadow: 0 0 0 1px #8aa2b466; }
.cq-compass-N { color: #ffd166; }
.cq-map-hint { position: absolute; left: max(22px, env(safe-area-inset-left)); bottom: calc(var(--cq-floor, 104px) + var(--cq-minimap) + 14px); width: var(--cq-minimap);
  text-align: center; font-size: 10px; font-weight: 700; letter-spacing: 1px; color: #c4d0d8b0; text-shadow: 0 1px 2px #000; }
/* Squad list beside the minimap (reference Alt 2): kit or hull glyph, name, DOWN / DEAD. */
.cq-squad {
  position: absolute; left: calc(max(22px, env(safe-area-inset-left)) + var(--cq-minimap) + 18px); bottom: calc(var(--cq-floor, 104px) + 8px);
  display: grid; gap: 4px; min-width: 132px; max-width: 190px; padding: 6px 18px 7px 9px;
  background: linear-gradient(90deg, rgba(9, 15, 20, 0.78), rgba(9, 15, 20, 0.5) 70%, rgba(9, 15, 20, 0));
  border-left: 2px solid var(--cq-squad); border-radius: 2px; text-shadow: 0 1px 2px #000;
}
.cq-squad-head { font-size: 10px; font-weight: 800; letter-spacing: 2px; color: var(--cq-squad); }
.cq-squad-list { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.cq-squad-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 18px; }
.cq-squad-icon { display: block; width: 18px; height: 18px; color: var(--cq-squad); filter: drop-shadow(0 1px 1px #000); }
.cq-squad-glyph { width: 100%; height: 100%; display: block; }
.cq-squad-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; color: #eef3f6; }
.cq-squad-row[data-leader="true"] .cq-squad-name::after { content: ' \2605'; color: #ffd166; font-size: 10px; }
.cq-squad-state { font-size: 10px; font-weight: 800; letter-spacing: 1px; }
.cq-squad-row[data-state="down"] .cq-squad-icon, .cq-squad-row[data-state="down"] .cq-squad-state { color: #ff6b6b; }
.cq-squad-row[data-state="dead"] { opacity: 0.5; }
.cq-squad-row[data-state="dead"] .cq-squad-state { color: var(--cq-sub); }
.cq-spot-flash { position: absolute; left: 50%; top: calc(50% - 70px); transform: translateX(-50%); font-size: 13px; font-weight: 800; letter-spacing: 2px; color: var(--cq-danger); text-shadow: 0 1px 3px #000; }
/* Tank armour callout under the crosshair (RICOCHET, NO PENETRATION, TRACKS HIT, HULL REAR). */
.cq-hit-callout { position: absolute; left: 50%; top: calc(50% + 40px); transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font-size: 12px; font-weight: 800; letter-spacing: 2px; color: #f4f7f9; text-shadow: 0 1px 3px #000, 0 0 6px #000a; }
.cq-hit-callout[data-tone="good"] { color: #ffcf5c; }
.cq-hit-callout[data-tone="bad"] { color: #ff6b6b; }
.cq-hit-callout:not([hidden]) { animation: cq-callout-in 160ms ease-out; }
@keyframes cq-callout-in { from { opacity: 0; transform: translate(-50%, 4px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .cq-hit-callout:not([hidden]) { animation: none; } }

/* ------------------------------------------------------------- vehicle */
.cq-vehicle {
  position: absolute; right: max(22px, env(safe-area-inset-right)); bottom: 22px; width: 344px;
  display: grid; gap: 7px; padding: 10px 12px 11px; background: var(--cq-panel); border: 1px solid var(--cq-line);
  border-radius: 6px; box-shadow: 0 6px 18px #0008;
}
.cq-vehicle-seats { display: flex; flex-wrap: wrap; gap: 4px; }
.cq-seat { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 2px; border-radius: 3px; background: #ffffff0d; font-size: 10px; font-weight: 700; letter-spacing: 0.6px; color: var(--cq-sub); }
.cq-seat kbd, .cq-weapon-key, .cq-vehicle-cm-key, .cq-interact-key {
  display: inline-grid; place-items: center; min-width: 20px; height: 17px; padding: 0 4px; border-radius: 3px;
  background: #1c2a34; border: 1px solid #ffffff2a; color: #fff; font: 800 10px/1 var(--font-ui);
}
.cq-seat em { font-style: normal; color: var(--cq-sub); opacity: 0.8; }
.cq-seat.is-you { background: #4cc3ff2a; color: #fff; }
.cq-seat.is-you em { color: var(--cq-own); opacity: 1; }
.cq-seat.is-free { opacity: 0.6; }
.cq-vehicle-main { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: center; }
.cq-hull { width: 52px; height: 78px; }
.cq-hull-svg { width: 100%; height: 100%; overflow: visible; }
.cq-hull-zone { fill: #4cc3ff22; transition: fill 160ms; }
.cq-hull-outline { fill: none; stroke: #9fc6dd; stroke-width: 1.6; }
.cq-hull-zone.is-hit { fill: #ffcf5c; transition: none; }
.cq-hull-zone.is-spark { fill: #ffffffaa; transition: none; }
.cq-vehicle[data-hp="damaged"] .cq-hull-zone { fill: #ffcf5c26; }
.cq-vehicle[data-hp="critical"] .cq-hull-zone { fill: #ff4b4b33; }
.cq-vehicle-stats { display: grid; gap: 5px; min-width: 0; }
.cq-vehicle-title { display: flex; align-items: center; gap: 7px; }
.cq-vehicle-icon { width: 22px; height: 22px; color: var(--cq-own); }
.cq-vehicle-type-icon, .kf-vehicle-icon, .cq-kit-icon, .cq-spawn-icon, .cq-interact-icon { width: 100%; height: 100%; display: block; }
.cq-vehicle-name { font-size: 16px; font-weight: 800; letter-spacing: 1.2px; }
.cq-vehicle-role { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--cq-own); }
.cq-vehicle-hp { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.cq-vehicle-hp-track { height: 7px; border-radius: 3px; background: #ffffff14; overflow: hidden; }
.cq-vehicle-hp-track i { display: block; height: 100%; background: linear-gradient(90deg, #3fbf6b, #7ef29a); transition: width 200ms; }
.cq-vehicle[data-hp="damaged"] .cq-vehicle-hp-track i { background: linear-gradient(90deg, #d9921f, #ffcf5c); }
.cq-vehicle[data-hp="critical"] .cq-vehicle-hp-track i { background: linear-gradient(90deg, #b8242a, #ff4b4b); animation: cq-bleed 0.6s infinite; }
/* An Engineer in the crew is mending the hull: the HP track glows green. */
.cq-vehicle[data-repairing="true"] .cq-vehicle-hp-track { box-shadow: 0 0 0 1px #7ef29a99, 0 0 8px #7ef29a66; animation: cq-repair-pulse 1.2s ease-in-out infinite; }
@keyframes cq-repair-pulse { 50% { box-shadow: 0 0 0 1px #7ef29a44, 0 0 2px #7ef29a22; } }
@media (prefers-reduced-motion: reduce) { .cq-vehicle[data-repairing="true"] .cq-vehicle-hp-track { animation: none; } }
/* Forward service depot (docs/design/conquest/depot/, variant A): a green glow and a light sweep along the HP bar, one line under it. */
.cq-vehicle[data-servicing="true"] .cq-vehicle-hp-track { position: relative; box-shadow: 0 0 0 1px #7ef29acc, 0 0 10px #7ef29a80; }
.cq-vehicle[data-servicing="true"] .cq-vehicle-hp-track i { background: linear-gradient(90deg, #3fbf6b, #7ef29a); }
.cq-vehicle[data-servicing="true"] .cq-vehicle-hp-track::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #ffffff66, transparent); width: 30%; animation: cq-service-sweep 1.4s linear infinite; }
@keyframes cq-service-sweep { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) { .cq-vehicle[data-servicing="true"] .cq-vehicle-hp-track::after { animation: none; display: none; } }
.cq-vehicle-service { font-size: 11px; font-weight: 700; letter-spacing: 0.8px; color: var(--cq-sub); font-variant-numeric: tabular-nums; }
.cq-vehicle-service[hidden] { display: none; }
.cq-badge-icon { width: 11px; height: 11px; display: inline-block; vertical-align: -2px; margin-right: 3px; fill: currentColor; }
.cq-vehicle-hp-text { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cq-vehicle-badges { display: flex; gap: 4px; flex-wrap: wrap; min-height: 0; }
.cq-badge { padding: 1px 6px; border-radius: 2px; font-size: 10px; font-weight: 800; letter-spacing: 1px; }
.cq-badge-danger { background: #ff4b4b; color: #1a0606; animation: cq-bleed 0.9s infinite; }
.cq-badge-warn { background: #ffcf5c; color: #1d1404; }
.cq-badge-info { background: #4cc3ff; color: #04131c; }
.cq-badge-repair { background: #7ef29a; color: #04190b; }
/* The driver's vehicle upgrade (row `upg`): outlined in the own colour, so it never reads as a status alarm. */
.cq-badge-upgrade { padding: 0 5px; border: 1px solid var(--cq-own); color: var(--cq-own); background: #0f2533; }
.cq-vehicle-telemetry { font-size: 11px; font-weight: 700; letter-spacing: 0.8px; color: var(--cq-sub); font-variant-numeric: tabular-nums; }
.cq-vehicle-weapons { display: grid; gap: 3px; }
.cq-weapon { display: grid; grid-template-columns: 22px 1fr 80px 64px; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 3px; font-size: 12px; font-weight: 700; color: var(--cq-sub); }
.cq-weapon.is-selected { background: #ffffff12; color: #fff; box-shadow: inset 2px 0 0 var(--cq-own); }
.cq-weapon-key:empty { visibility: hidden; }
.cq-weapon-meter { height: 5px; border-radius: 3px; background: #ffffff14; overflow: hidden; }
.cq-weapon-meter i { display: block; height: 100%; background: var(--cq-own); }
.cq-weapon[data-state="hot"] .cq-weapon-meter i { background: #ffcf5c; }
.cq-weapon[data-state="overheated"] .cq-weapon-meter i { background: var(--cq-danger); }
.cq-weapon[data-state="reloading"] .cq-weapon-meter i { background: #ffcf5c; }
.cq-weapon[data-state="ready"] .cq-weapon-meter i { background: #7ef29a; }
.cq-weapon-ammo { text-align: right; font-variant-numeric: tabular-nums; }
.cq-weapon[data-state="overheated"] .cq-weapon-ammo { color: var(--cq-danger); }
.cq-vehicle-cm { display: grid; grid-template-columns: 1fr 70px auto; gap: 8px; align-items: center; font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--cq-sub); }
.cq-vehicle-cm-track { height: 5px; border-radius: 3px; background: #ffffff14; overflow: hidden; }
.cq-vehicle-cm-pip { display: block; height: 100%; background: #9fb0bd; }
.cq-vehicle-cm[data-ready="true"] { color: #7ef29a; }
.cq-vehicle-cm[data-ready="true"] .cq-vehicle-cm-pip { background: #7ef29a; }

/* ---------------------------------------------------- lock + restricted */
.cq-lock { position: absolute; left: 50%; top: calc(50% - 128px); transform: translateX(-50%); padding: 5px 16px; border-radius: 3px;
  font-size: 15px; font-weight: 800; letter-spacing: 2.4px; color: #fff; background: #8a1d1dd0; border: 1px solid #ff6b6b; }
.cq-lock[data-state="1"] { background: #6b4a10d0; border-color: #ffcf5c; animation: cq-blink 0.5s steps(2) infinite; }
.cq-lock[data-state="2"] { animation: cq-blink 0.25s steps(2) infinite; }
.cq-lock[data-state="3"] { animation: cq-blink 0.12s steps(2) infinite; font-size: 18px; }
.cq-lock-bearing { position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; transform: translate(-50%, -50%); }
.cq-lock-bearing i { position: absolute; left: 50%; top: 0; margin-left: -10px; border: 10px solid transparent; border-bottom: 16px solid var(--cq-danger); border-top: 0; filter: drop-shadow(0 0 4px #ff4b4b); }
.cq-lock-bearing[data-state="1"] i { border-bottom-color: #ffcf5c; }
@keyframes cq-blink { 50% { opacity: 0.45; } }
.cq-restricted { position: absolute; left: 50%; top: 24%; transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; padding: 12px 34px 14px;
  width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box; text-align: center;
  background: radial-gradient(ellipse at center, #3a0b0bd8, #1a0505b0 70%, transparent); text-shadow: 0 2px 6px #000; }
.cq-restricted-title { font-size: 18px; font-weight: 800; letter-spacing: 3px; color: #ffb1a8; }
.cq-restricted-seconds { font-size: 64px; line-height: 1; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; animation: cq-blink calc(1s - var(--urgency, 0) * 0.6s) steps(2) infinite; }
.cq-restricted-detail { font-size: 12px; font-weight: 700; letter-spacing: 2px; color: #ffd2cc; }

/* ------------------------------------------------------------ interact */
.cq-interact {
  position: absolute; left: 50%; bottom: 140px; transform: translateX(-50%); display: flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 6px 14px 6px 8px; pointer-events: auto; cursor: pointer;
  color: #fff; background: var(--cq-panel); border: 1px solid #ffcf5c99; border-radius: 4px; font: 800 13px/1 var(--font-ui); letter-spacing: 1px;
}
.cq-interact:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cq-interact-ringbox { position: relative; width: 34px; height: 34px; }
.cq-interact-ring { width: 100%; height: 100%; }
.cq-interact-track { fill: none; stroke: #ffffff22; stroke-width: 4; }
.cq-interact-arc { fill: none; stroke: #7ef29a; stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset 100ms linear; }
.cq-interact-glyph { position: absolute; inset: 8px; color: #ffcf5c; }
.cq-interact[data-type="revive"] .cq-interact-glyph { color: #ff6b6b; }

/* ---------------------------------------------------------- pilot control hint */
/* First pilot-seat entries: "MOUSE AIM · [W][S] THROTTLE · [A][D] ROLL · [CTRL] AIRBRAKE" at the bottom centre. */
.cq-flight-hint {
  position: absolute; left: 50%; bottom: max(22px, calc(env(safe-area-inset-bottom) + 12px)); transform: translateX(-50%);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 0; padding: 7px 14px;
  max-width: min(640px, calc(100vw - 720px)); min-width: 320px;
  background: var(--cq-panel); border: 1px solid var(--cq-line); border-radius: 6px; box-shadow: 0 4px 14px #0007;
  font: 700 12px/1 var(--font-ui); letter-spacing: 1.2px; color: var(--cq-text); white-space: nowrap;
  transition: opacity 500ms ease-out; animation: cq-flight-hint-in 200ms ease-out;
}
@keyframes cq-flight-hint-in { from { opacity: 0; transform: translateX(-50%) translateY(4px); } }
.cq-flight-hint[data-fading="true"] { opacity: 0; }
.cq-flight-hint-item { display: inline-flex; align-items: center; gap: 5px; position: relative; padding: 0 10px; }
.cq-flight-hint-item[data-sep="true"]::before { content: "\00b7"; position: absolute; left: -3px; color: #ffffff50; }
.cq-flight-hint-key {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 3px;
  background: #1c2a34; border: 1px solid #ffffff38; color: #fff; font: 800 10px/1 var(--font-ui);
}
.cq-flight-hint-text { color: var(--cq-sub); }
.cq-flight-hint-item:first-child .cq-flight-hint-text { color: #fff; }
.vb-touch-mode .cq-flight-hint { display: none; }
.cq-vehicle-telemetry[data-stall="true"] { color: #ff4b4b; }
/* The tank driver's DRIVER periscope draws its own phosphor console (reticles.js) in the card's place. */
.vb-conquest-hud[data-vehicle-view="driver"] .cq-vehicle { display: none; }
.cq-interact.is-active { border-color: #7ef29a; box-shadow: 0 0 14px #7ef29a55; }

/* --------------------------------------------------------- reticles */
.cq-reticles { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Gimbal sensor sight (attack helicopter gunner, docs/design/conquest/gunner-sensor/ variant B):
   the world turns into a monochrome sensor picture with scanlines, grain and a vignette.
   The symbology itself is drawn on .cq-reticles. */
body[data-vehicle-sight="sensor"] :is(canvas#game, canvas[data-sensor-grade]) { filter: grayscale(1) sepia(0.2) hue-rotate(70deg) brightness(0.86) contrast(1.42); }
body[data-vehicle-sight="sensor"] #crosshair { display: none !important; }
.cq-sensor {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(ellipse 78% 74% at 50% 50%, transparent 52%, #02060499 82%, #010302e6 100%),
    repeating-linear-gradient(180deg, #00000000 0 2px, #0000001f 2px 3px),
    linear-gradient(#a8ffc80d, #a8ffc80d);
  box-shadow: inset 0 0 0 1px #dcffe614;
}
.cq-sensor::after {
  content: ""; position: absolute; inset: -50%; opacity: 0.13; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: cq-sensor-grain 0.5s steps(4) infinite;
}
@keyframes cq-sensor-grain {
  0% { transform: translate(0, 0); } 25% { transform: translate(-7%, 4%); }
  50% { transform: translate(5%, -6%); } 75% { transform: translate(-3%, -2%); } 100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { .cq-sensor::after { animation: none; } }

/* Tank driver's DRIVER periscope (docs/design/conquest/tank-hud/phosphor/ variant B): a phosphor
   tactical display. The world keeps its colours (team markers must read), only slightly cooled;
   a faint phosphor wash, fine scanlines, a soft vignette and a slow refresh band sit under the
   markers. The glowing symbology itself is drawn on .cq-reticles. */
body[data-vehicle-sight="periscope"] :is(canvas#game, canvas[data-sensor-grade]) { filter: saturate(0.86) contrast(1.06) brightness(0.97); }
.cq-scope {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(ellipse 82% 78% at 50% 48%, transparent 60%, #01060380 88%, #010402c8 100%),
    repeating-linear-gradient(180deg, #00000000 0 2px, #00000012 2px 3px),
    linear-gradient(#7dffa809, #7dffa809);
}
.cq-scope::after {
  content: ""; position: absolute; left: 0; right: 0; top: -30%; height: 30%;
  background: linear-gradient(180deg, #7dffa800, #7dffa80a 50%, #7dffa800);
  animation: cq-scope-refresh 7s linear infinite;
}
@keyframes cq-scope-refresh { from { transform: translateY(0); } to { transform: translateY(440%); } }
@media (prefers-reduced-motion: reduce) { .cq-scope::after { animation: none; display: none; } }
/* The console sits under the exit prompt on desktop, so the prompt rides a little higher. */
html:not(.vb-touch-mode) .vb-conquest-hud[data-vehicle-view="driver"] .cq-interact { bottom: 158px; }

/* ------------------------------------------------------------- big map */
.cq-bigmap { position: absolute; inset: 0; display: grid; place-items: center; background: #03070acc; pointer-events: auto; z-index: 5; }
.cq-bigmap-panel { display: grid; gap: 8px; padding: 12px; background: var(--cq-panel-solid); border: 1px solid var(--cq-line); border-radius: 6px; box-shadow: 0 10px 40px #000c; }
.cq-bigmap-head { display: flex; align-items: center; gap: 12px; }
.cq-bigmap-head h2 { margin: 0; font-size: 18px; letter-spacing: 3px; }
.cq-bigmap-hint { font-size: 11px; color: var(--cq-sub); }
.cq-bigmap-close { margin-left: auto; width: 44px; height: 36px; border: 1px solid var(--cq-line); border-radius: 4px; background: #16222b; color: #fff; font: 700 16px var(--font-ui); cursor: pointer; }
.cq-northmap { position: relative; aspect-ratio: 1; }
.cq-bigmap-map { width: min(78vh, 82vw, 860px); }
.cq-northmap-canvas { display: block; width: 100%; height: 100%; border-radius: 4px; box-shadow: inset 0 0 0 1px #ffffff1a; }
.cq-bigmap-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--cq-sub); }
.cq-legend { display: inline-flex; align-items: center; gap: 5px; }
.cq-legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.cq-legend-own { --c: var(--cq-own); } .cq-legend-squad { --c: var(--cq-squad); } .cq-legend-enemy { --c: var(--cq-enemy); }
.cq-legend-spotted { --c: var(--cq-danger); } .cq-legend-spotted i { border-radius: 1px; transform: rotate(45deg); }
.cq-legend-neutral { --c: var(--cq-neutral); }

/* -------------------------------------------------------------- deploy */
.cq-deploy { position: absolute; inset: 0; display: grid; place-items: center; padding: max(12px, env(safe-area-inset-top)) 12px 12px;
  background: radial-gradient(ellipse at center, #08131bd9, #020507f2); pointer-events: auto; z-index: 6; overflow: auto; }
.cq-deploy-panel { width: min(1180px, 100%); display: grid; gap: 12px;
  /* Map (and spawn list) size follows the window height, so the classes and DEPLOY fit a 720 px laptop. */
  --cq-map: clamp(220px, calc(100vh - 440px), 440px); --cq-deploy-w: 300px; }
.cq-deploy-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cq-deploy-titles { display: grid; }
.cq-deploy-title { margin: 0; font-size: 34px; line-height: 1; letter-spacing: 6px; font-weight: 800; }
.cq-deploy-team { font-size: 12px; font-weight: 800; letter-spacing: 2px; color: var(--cq-own); }
/* Down: CALL MEDIC (the comm rose's NEED MEDIC); green once the own row carries the request. */
.cq-deploy-medic { min-height: 34px; padding: 6px 14px; border: 1px solid #ff6b6b; border-radius: 3px; background: #2a0f12d9; color: #ffb1a8;
  font: 800 12px var(--font-ui); letter-spacing: 1.6px; cursor: pointer; white-space: nowrap; }
.cq-deploy-medic[hidden] { display: none; }
.cq-deploy-medic[data-state="called"] { border-color: #7ef29a; background: #0d2416d9; color: #7ef29a; cursor: default; }
.cq-deploy-killer { margin-left: auto; display: grid; grid-template-columns: auto auto; column-gap: 10px; align-items: baseline; padding: 8px 14px;
  border-left: 3px solid var(--cq-enemy); background: #1b0f08d0; border-radius: 3px; }
.cq-deploy-killer-title { font-size: 10px; font-weight: 800; letter-spacing: 2px; color: var(--cq-sub); }
.cq-deploy-killer-name { font-size: 18px; font-weight: 800; color: var(--cq-enemy); letter-spacing: 1px; }
.cq-deploy-killer-detail { grid-column: 1 / -1; font-size: 11px; font-weight: 700; letter-spacing: 1px; color: #e2c8b8; }
/* Desktop: map + spawns, then the classes; DEPLOY shares the classes cell, beside the unlocks row (picker-a reference). */
.cq-deploy-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.cq-deploy-mapcol { display: grid; grid-template-columns: var(--cq-map) minmax(200px, 1fr); gap: 12px; align-items: start; }
.cq-deploy-side { grid-row: 2; grid-column: 1; min-width: 0; }
.cq-deploy-foot { grid-row: 2; grid-column: 1; align-self: end; justify-self: end; }
.cq-kit-row-unlock { margin-right: calc(var(--cq-deploy-w) + 10px); }
.cq-deploy-map { width: 100%; }
.cq-deploy-map .cq-northmap-canvas { cursor: crosshair; }
.cq-deploy-spawns { display: grid; gap: 5px; max-height: var(--cq-map); overflow: auto; }
.cq-spawn-row { display: grid; gap: 3px; }
.cq-spawn { display: grid; grid-template-columns: 30px 1fr; gap: 9px; align-items: center; min-height: 44px; padding: 6px 10px; text-align: left; cursor: pointer;
  border: 1px solid var(--cq-line); border-radius: 4px; background: #0e1820e6; color: #fff; font: 700 13px/1.1 var(--font-ui); }
.cq-spawn:hover:not(:disabled) { border-color: #4cc3ff88; }
.cq-spawn.is-selected { border-color: #ffd166; background: #2b2410f0; box-shadow: inset 3px 0 0 #ffd166; }
.cq-spawn:disabled { opacity: 0.5; cursor: not-allowed; }
.cq-spawn-icon, .cq-spawn-letter { width: 26px; height: 26px; color: var(--cq-own); }
.cq-spawn-letter { display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--cq-own); border-radius: 3px; font-size: 15px; font-weight: 800; }
.cq-spawn-text { display: grid; gap: 2px; min-width: 0; }
.cq-spawn-text small { font-size: 10px; letter-spacing: 1px; color: var(--cq-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cq-spawn-seats { display: flex; flex-wrap: wrap; gap: 4px; padding-left: 40px; }
.cq-spawn-seat { min-height: 30px; padding: 4px 8px; border: 1px solid var(--cq-line); border-radius: 3px; background: #0e1820; color: var(--cq-sub); font: 800 10px var(--font-ui); letter-spacing: 1px; cursor: pointer; }
.cq-spawn-seat.is-selected { color: #101418; background: #ffd166; border-color: #ffd166; }
/* A seat a bot holds: taking it puts the bot out. */
.cq-spawn-seat.is-takeover:not(.is-selected) { border-style: dashed; color: var(--cq-own, #4cc3ff); }
.cq-deploy-side { display: grid; gap: 8px; }
.cq-deploy-section { margin: 0; font-size: 12px; letter-spacing: 3px; color: var(--cq-sub); }
.cq-deploy-section-unlock { margin-top: 2px; }
.cq-deploy-section-new { margin-left: 10px; color: #7ef29a; letter-spacing: 2px; }
/* Class strip: a row of base classes, then a compact row of level unlocks (design: docs/design/conquest/classes). */
.cq-deploy-kits { display: grid; gap: 6px; align-items: start; }
/* Cards of a row share one height, so picking a class never makes its neighbours jump. */
.cq-kit-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; align-items: stretch; }
.cq-kit-row-unlock { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cq-kit-row-unlock .cq-kit { padding: 6px 10px; }
.cq-kit.is-locked { background: #0b1218d9; border-style: dashed; }
.cq-kit.is-locked .cq-kit-pick { cursor: not-allowed; grid-template-columns: 30px 1fr 18px; }
.cq-kit.is-locked .cq-kit-icon, .cq-kit.is-locked .cq-kit-name { opacity: 0.45; }
.cq-kit.is-locked .cq-kit-name small { color: #ffd166; opacity: 1; }
.cq-kit-lock { width: 16px; height: 16px; color: var(--cq-sub); }
.cq-kit-xp { display: block; height: 3px; border-radius: 2px; background: #ffffff1a; overflow: hidden; }
.cq-kit-xp-fill { display: block; height: 100%; background: #ffd166; }
.cq-kit-xp-text { font-size: 10px; letter-spacing: 1px; color: var(--cq-sub); }
.cq-kit { min-width: 0; align-content: start; }
/* Class info line: hint of the hovered / focused / selected class, or why a tapped class is locked. */
.cq-kit-info { min-height: 16px; font-size: 11px; font-weight: 700; line-height: 16px; letter-spacing: 0.8px; color: #b9d7e6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cq-kit-info[data-tone="warn"] { color: #ffd166; }
/* A corner badge on the card's top edge: out of the grid, so a long name (GRENADIER) never pushes it out of a narrow card. */
.cq-kit { position: relative; }
.cq-kit-new { position: absolute; top: -7px; right: 6px; padding: 1px 5px; border-radius: 2px; background: #7ef29a; color: #062010; font-size: 9px; font-weight: 800; letter-spacing: 1px; line-height: 12px; pointer-events: none; }
.cq-kit { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--cq-line); border-radius: 4px; background: #0e1820e6; }
.cq-kit.is-selected { border-color: var(--cq-own); background: #0f2533f0; box-shadow: inset 3px 0 0 var(--cq-own); }
.cq-kit-pick { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; min-height: 36px; padding: 0; border: 0; background: none; color: #fff; text-align: left; cursor: pointer; font: inherit; }
.cq-kit-icon { width: 28px; height: 28px; color: var(--cq-sub); }
.cq-kit.is-selected .cq-kit-icon { color: var(--cq-own); }
.cq-kit-name { display: grid; gap: 1px; }
.cq-kit-name b { font-size: 15px; letter-spacing: 1.5px; }
.cq-kit-name small { font-size: 10px; letter-spacing: 1.5px; color: var(--cq-sub); }
.cq-kit-variants { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.cq-kit-variant { min-height: 32px; padding: 4px 6px; border: 1px solid var(--cq-line); border-radius: 3px; background: #0b141b; color: var(--cq-sub); font: 700 11px var(--font-ui); letter-spacing: 0.6px; cursor: pointer; }
.cq-kit-variant.is-selected { color: #04131c; background: var(--cq-own); border-color: var(--cq-own); }
.cq-kit-gear { font-size: 10px; letter-spacing: 1px; color: var(--cq-sub); }
.cq-kit-gadgets { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.cq-kit-gadget { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px; min-height: 32px; padding: 4px 6px; border: 1px dashed var(--cq-line); border-radius: 3px; background: #0b141b; color: var(--cq-sub); font: 700 11px var(--font-ui); letter-spacing: 0.6px; text-align: left; cursor: pointer; }
.cq-kit-gadget-role { min-width: 24px; padding: 1px 4px; border: 1px solid currentColor; border-radius: 2px; font-size: 10px; letter-spacing: 1px; text-align: center; }
.cq-kit-gadget-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cq-kit-gadget:has(.cq-kit-gadget-art) { grid-template-columns: auto 1fr auto; }
.cq-kit-gadget-art { width: 34px; height: 17px; object-fit: contain; filter: drop-shadow(0 1px 1px #000a); }
.cq-kit-gadget.is-selected { color: #04131c; background: #ffcf5c; border: 1px solid #ffcf5c; }
/* The picked class's toggles share one fixed slot under the base row (one line on desktop),
   so a class with more toggles (Engineer) never moves the info line, the unlocks or DEPLOY. */
.cq-kit-loadout { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 5px 8px; border: 1px solid var(--cq-own);
  border-radius: 4px; background: #0f2533f0; box-shadow: inset 3px 0 0 var(--cq-own); }
.cq-kit-loadout-name { flex: 0 0 auto; padding-left: 4px; font-size: 12px; font-weight: 800; letter-spacing: 2px; color: var(--cq-own); }
.cq-kit-loadout .cq-kit-variants, .cq-kit-loadout .cq-kit-gadgets { flex: 0 1 300px; min-width: 0; }
/* The gadget toggles carry their slot art, so they take a little more of the line than the primaries. */
.cq-kit-loadout .cq-kit-gadgets { flex-basis: 380px; }
.cq-kit-loadout .cq-kit-gadgets.is-placeholder { display: none; }
.cq-kit-loadout .cq-kit-gear { flex: 1 1 0; min-width: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cq-kit-variant { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cq-deploy-foot { display: flex; align-items: center; gap: 14px; justify-content: flex-end; }
/* In the header, between the titles and the killer card. */
.cq-deploy-status { flex: 1 1 220px; min-width: 0; font-size: 12px; font-weight: 800; letter-spacing: 1.4px; color: var(--cq-sub); }
.cq-deploy-status:empty { display: none; }
.cq-deploy-status[data-tone="warn"] { color: #ffb1a8; }
/* A class unlocked while the screen is open: green, and a tap scrolls to the UNLOCKS row. */
.cq-deploy-status[data-tone="new"] { color: #7ef29a; cursor: pointer; }
.cq-deploy-button { width: var(--cq-deploy-w); min-height: 52px; padding: 10px 24px; border: 0; border-radius: 4px; cursor: pointer;
  background: linear-gradient(180deg, #ffd166, #f0a83a); color: #1a1205; font: 800 17px var(--font-ui); letter-spacing: 2px; box-shadow: 0 4px 18px #f0a83a55; }
.cq-deploy-button:disabled { background: #3a3f44; color: #9aa3aa; box-shadow: none; cursor: not-allowed; }
.cq-deploy-button.is-ready { background: linear-gradient(180deg, #7ef29a, #3fbf6b); color: #062010; }
/* Strip tabs CLASSES / VEHICLES and the hull upgrade cards (design docs/design/conquest/upgrades/, variant A).
   The tab pair replaces the CLASSES header; the VEHICLES tab fills the same strip, so the map, spawns and DEPLOY stay put. */
.cq-deploy-tabs { display: flex; align-items: flex-end; gap: 18px; min-width: 0; border-bottom: 1px solid #ffffff14; }
.cq-deploy-tab { margin-bottom: -1px; padding: 0 2px 4px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--cq-sub);
  font: 800 12px var(--font-ui); letter-spacing: 3px; cursor: pointer; }
.cq-deploy-tab:hover { color: #fff; }
.cq-deploy-tab.is-active { color: #fff; border-bottom-color: var(--cq-own); }
.cq-deploy-tab-level { margin-bottom: 4px; padding: 0 6px; border: 1px solid var(--cq-line); border-radius: 2px; font-size: 10px; font-weight: 800; line-height: 15px; letter-spacing: 1px; color: var(--cq-sub); }
.cq-deploy-section-base { display: none; }
.cq-upg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-items: stretch; }
.cq-upg-hull { display: grid; align-content: start; gap: 5px; min-width: 0; padding: 6px 8px; border: 1px solid var(--cq-line); border-radius: 4px; background: #0e1820e6; }
/* The hull the picked spawn seats you in. */
.cq-upg-hull.is-spawn { border-color: #ffd16699; box-shadow: inset 3px 0 0 #ffd166; }
/* The hull card the gamepad / keyboard steps (LT / RT or Q / E; LB / RB or the arrows pick its upgrade). */
.cq-upg-hull.is-focus { outline: 2px solid var(--cq-own); outline-offset: -1px; }
.cq-upg-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cq-upg-icon { flex: none; width: 26px; height: 20px; color: var(--cq-sub); }
.cq-upg-hull.is-upgraded .cq-upg-icon { color: var(--cq-own); }
.cq-upg-name { font-size: 13px; letter-spacing: 1.5px; white-space: nowrap; }
.cq-upg-options { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.cq-upg-option { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 32px; padding: 2px 4px;
  border: 1px solid var(--cq-line); border-radius: 3px; background: #0b141b; color: #c3d3de; font: 700 10px/1.15 var(--font-ui); letter-spacing: 0.5px; text-align: center; cursor: pointer; }
.cq-upg-option:hover:not(.is-locked):not(.is-selected) { border-color: #4cc3ff88; color: #fff; }
.cq-upg-option.is-selected { color: #04131c; background: var(--cq-own); border-color: var(--cq-own); }
.cq-upg-option.is-locked { border-style: dashed; background: #0b1218d9; color: #7d8b96; cursor: not-allowed; }
.cq-upg-text { display: grid; min-width: 0; }
.cq-upg-label { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.cq-upg-level { font-size: 9px; letter-spacing: 1px; color: #ffd166; }
.cq-upg-lock { flex: none; width: 12px; height: 12px; }
/* Desktop: the upgrade info line rides beside DEPLOY under the hull grid (two lines at most). */
.cq-deploy-kits[data-tab="vehicles"] .cq-kit-info { display: -webkit-box; box-sizing: border-box; min-height: 52px; margin-right: calc(var(--cq-deploy-w) + 10px);
  padding-top: 10px; white-space: normal; line-height: 15px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* ------------------------------------------------- kill feed + hitmarks */
.kf-vehicle-icon { width: 26px; height: 18px; color: currentColor; }
.kf-weapon-vehicle, .kf-weapon .kf-vehicle-icon { color: #ffd59a; }
.kf-row.kf-vehicle-destroyed .kf-vehicle-type { font-weight: 800; letter-spacing: 0.6px; color: #ffcf9a; }
#hitmarker.vb-armor-hit::before, #hitmarker.vb-armor-hit::after { background: #ffcf3a; box-shadow: 0 0 6px #ffcf3acc; width: 16px; height: 3px; }
#hitmarker.vb-armor-spark::before, #hitmarker.vb-armor-spark::after { background: #ffffff; opacity: 0.75; width: 8px; height: 2px; }

/* ------------------------------------------------------- touch buttons */
.vb-touch-flightUp { --touch-row: calc(var(--touch-fire) + 12px); border-color: #e9b461aa; color: #ffe4b0; }
.vb-touch-flightDown { --touch-column: calc(var(--touch-fire) + 12px); --touch-row: calc(var(--touch-fire) + 12px); border-color: #e9b461aa; color: #ffe4b0; }
.vb-touch-flightBrake { --touch-column: calc(var(--touch-fire) + 12px); font-size: 9px; }
.vb-touch-controls.is-left-handed :is(.vb-touch-flightUp, .vb-touch-flightDown, .vb-touch-flightBrake, .vb-touch-vehicleSeat, .vb-touch-countermeasure) { right: auto; left: calc(var(--touch-edge-x) + var(--touch-column)); }
.vb-touch-controls.is-aircraft .vb-touch-move-zone.is-sprinting .vb-touch-stick-base { border-color: #ffffff55; }
.vb-touch-controls.is-aircraft .vb-touch-move-zone.is-sprinting .vb-touch-stick-knob { border-color: #ffffff80; background: #ffffff55; }
.vb-touch-vehicleSeat { --touch-row: calc(var(--touch-fire) + var(--touch-button) + 24px); width: 64px; border-radius: 8px; font-size: 10px; }
.vb-touch-countermeasure { --touch-column: 76px; --touch-row: calc(var(--touch-fire) + var(--touch-button) + 24px); border-color: #ffcf5caa; color: #ffe6a8; font-size: 9px; }
/* VIEW (seated): the seat's next camera view, under MAP, SPOT and COMMS. */
.vb-touch-vehicleView {
  right: auto; bottom: auto; left: calc(max(12px, env(safe-area-inset-left)) + 112px); top: calc(max(10px, env(safe-area-inset-top)) + 270px);
  width: 44px; height: 44px; border-radius: 8px; font-size: 10px; border-color: #7ef29aaa; color: #d9ffe3;
}
.vb-touch-bigMap, .vb-touch-spot {
  right: auto; bottom: auto; left: calc(max(12px, env(safe-area-inset-left)) + 112px); top: calc(max(10px, env(safe-area-inset-top)) + 114px);
  width: 44px; height: 44px; border-radius: 8px; font-size: 10px;
}
.vb-touch-spot { top: calc(max(10px, env(safe-area-inset-top)) + 166px); border-color: #ff8a8aaa; color: #ffd0d0; }
.vb-touch-deploy { right: auto; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); width: min(320px, calc(100vw - 32px)); height: 54px; margin-left: calc(min(320px, calc(100vw - 32px)) / -2);
  border-radius: 6px; border: 0; background: linear-gradient(180deg, #ffd166, #f0a83a); color: #1a1205; font: 800 16px var(--font-ui); letter-spacing: 2px; }
.vb-touch-deploy[data-valid="false"] { background: #3a3f44; color: #9aa3aa; }
.vb-touch-controls.is-deploying { z-index: calc(var(--z-menu, 100) - 7); }
.vb-touch-controls.is-deploying :is(.vb-touch-look-zone, .vb-touch-move-zone) { display: none; }

/* ------------------------------------------------------------- touch HUD */
.vb-touch-mode .vb-conquest-hud { --cq-minimap: 104px; }
/* Phones: one 44 px row between the pause button and the HP / ammo cards (top + 54 px), at most 262 px wide. */
.vb-touch-mode .cq-top { top: max(10px, env(safe-area-inset-top)); grid-template-columns: 62px auto 62px; gap: 6px; padding: 4px 6px 4px; }
.vb-touch-mode .cq-team { gap: 2px; }
.vb-touch-mode .cq-team-name { font-size: 9px; letter-spacing: 0.4px; }
.vb-touch-mode .cq-tickets { font-size: 17px; }
.vb-touch-mode .cq-team-head { gap: 4px; }
.vb-touch-mode .cq-ticket-track { height: 4px; }
.vb-touch-mode .cq-bleed { font-size: 9px; line-height: 10px; min-height: 10px; letter-spacing: 0; }
.vb-touch-mode .cq-center { gap: 2px; }
.vb-touch-mode .cq-chips { gap: 4px; padding-top: 2px; }
.vb-touch-mode .cq-chip { width: 18px; height: 18px; border-width: 1.5px; }
.vb-touch-mode .cq-chip-badge { height: 18px; margin-left: -4px; }
.vb-touch-mode .cq-chip-badge::before { left: -5px; bottom: -4px; width: 10px; height: 9px; font-size: 7px; }
.vb-touch-mode .cq-chip-letter { font-size: 11px; }
.vb-touch-mode .cq-clock { font-size: 11px; }
.vb-touch-mode .cq-weather { display: none; }
.vb-touch-mode .cq-center:has(.cq-weather-tag:not([hidden])) { grid-template-columns: auto auto; column-gap: 6px; }
.vb-touch-mode .cq-center:has(.cq-weather-tag:not([hidden])) .cq-chips { grid-column: 1 / -1; }
.vb-touch-mode .cq-weather-tag { display: inline-flex; }
/* Breakthrough on phones: sector boxes keep only their chips (the S1 labels and side captions drop). */
.vb-touch-mode .cq-top[data-variant="breakthrough"] { grid-template-columns: 62px auto 62px; }
.vb-touch-mode .cq-top[data-variant="breakthrough"] .cq-chips { gap: 3px; }
.vb-touch-mode .cq-sector { min-width: 0; padding: 1px 2px; gap: 0; }
.vb-touch-mode .cq-sector-sep { display: none; }
.vb-touch-mode .cq-sector-label { display: none; }
.vb-touch-mode .cq-sector-flags { gap: 4px; padding: 2px 1px; }
.vb-touch-mode .cq-sector .cq-chip { width: 15px; height: 15px; }
.vb-touch-mode .cq-sector .cq-chip-letter { font-size: 10px; }
.vb-touch-mode .cq-sector-mark { width: 8px; height: 8px; right: 1px; top: 1px; }
.vb-touch-mode .cq-team[data-role] .cq-bleed, .vb-touch-mode .cq-team[data-role] .cq-team-name { font-size: 8px; letter-spacing: 0; }
.vb-touch-mode .cq-sector-tag { font-size: 9px; line-height: 12px; padding: 0 4px; }
/* Portrait: the card row (HP, grenade, ammo) and the minimap fill the top 228 px and COMMS (beside the minimap, under
   MAP / SPOT) reaches 262 px, so banners sit just below it; while seated, below VIEW (270 + 44 px), and below MORTAR
   (same spot, on foot). */
.vb-touch-mode .cq-banner { top: calc(max(10px, env(safe-area-inset-top)) + 270px); min-width: 0; width: max-content; max-width: calc(100vw - 40px); padding: 6px 14px; }
.vb-touch-mode .cq-banner-title { font-size: 15px; letter-spacing: 1px; }
.vb-touch-mode .cq-banner-detail { font-size: 10px; }
@media (orientation: portrait) {
  .vb-touch-mode body:has(:is(.vb-touch-vehicleView, .vb-touch-mortar):not(.is-hidden)) .cq-banner { top: calc(max(10px, env(safe-area-inset-top)) + 322px); }
}
/* Breakthrough fall-back on phones: the restricted card already says SECTOR LOST, so the banner gives way to it. */
.vb-touch-mode .vb-conquest-hud:has(.cq-restricted:not([hidden])) .cq-banner { display: none; }
.vb-touch-mode .cq-minimap { top: calc(max(10px, env(safe-area-inset-top)) + 114px); bottom: auto; left: max(12px, env(safe-area-inset-left)); }
/* Phone portrait has no free corner beside the minimap (MAP / SPOT sit there): the squad list shows in landscape only. */
.vb-touch-mode .cq-squad { display: none; }
.vb-touch-mode .cq-compass { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; font-size: 8px; }
.vb-touch-mode .cq-ring { top: calc(50% + 34px); }
.vb-touch-mode .cq-ring-dial { width: 50px; height: 50px; }
.vb-touch-mode .cq-ring-letter { font-size: 18px; }
.vb-touch-mode .cq-ring-label { font-size: 11px; letter-spacing: 1px; }
.vb-touch-mode .cq-ticker { top: calc(50% + 128px); }
.vb-touch-mode .cq-ticker-line { font-size: 11px; }
.vb-touch-mode .cq-vehicle {
  top: calc(max(10px, env(safe-area-inset-top)) + 54px); bottom: auto; right: max(12px, env(safe-area-inset-right));
  width: 196px; gap: 4px; padding: 6px 8px;
}
.vb-touch-mode .cq-vehicle-main { grid-template-columns: 30px 1fr; gap: 6px; }
.vb-touch-mode .cq-hull { width: 30px; height: 44px; }
.vb-touch-mode .cq-vehicle-name { font-size: 12px; }
.vb-touch-mode .cq-vehicle-icon { width: 16px; height: 16px; }
/* The seat strip already highlights the own seat; the name keeps one line. */
.vb-touch-mode .cq-vehicle-role { display: none; }
.vb-touch-mode .cq-vehicle-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.6px; }
.vb-touch-mode .cq-vehicle-telemetry, .vb-touch-mode .cq-vehicle-hp-text { font-size: 10px; }
.vb-touch-mode .cq-seat { font-size: 8px; padding: 1px 4px 1px 1px; }
.vb-touch-mode .cq-seat :is(kbd, em), .vb-touch-mode .cq-weapon-key, .vb-touch-mode .cq-vehicle-cm-key { display: none; }
.vb-touch-mode .cq-seat.is-free { display: none; }
.vb-touch-mode .cq-weapon { grid-template-columns: 1fr 34px 48px; gap: 5px; padding: 1px 4px; font-size: 10px; }
.vb-touch-mode .cq-vehicle-cm { grid-template-columns: 1fr 40px; font-size: 9px; }
.vb-touch-mode .cq-vehicle-badges .cq-badge { font-size: 8px; }
.vb-touch-mode .cq-vehicle-service { font-size: 9px; letter-spacing: 0.5px; }
.vb-touch-mode .cq-interact { bottom: auto; top: calc(50% + 120px); font-size: 11px; padding: 4px 10px 4px 6px; width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box; }
/* A jet's bomb pipper falls below the aim in a dive: the exit prompt steps up, under the vehicle card and clear of VIEW. */
.vb-touch-mode .vb-conquest-hud[data-bomb-sight="true"] .cq-interact { top: auto; bottom: calc(50% + 132px); left: calc(50% + 30px); }
/* Phones have room under the ring for the ticker or the interact prompt, not both: the ticker steps above the crosshair. */
.vb-touch-mode .vb-conquest-hud:has(.cq-interact:not([hidden])) .cq-ticker { top: auto; bottom: calc(50% + 70px); }
.vb-touch-mode .cq-lock { top: calc(50% - 96px); font-size: 12px; }
.vb-touch-mode .cq-lock-bearing { width: 130px; height: 130px; }
/* At most 168 px above the centre, never over COMMS (MAP / SPOT / COMMS end at 262 px). */
.vb-touch-mode .cq-restricted { top: max(calc(50% - 168px), calc(max(10px, env(safe-area-inset-top)) + 270px)); }
.vb-touch-mode .cq-restricted-seconds { font-size: 44px; }
/* The touch DEPLOY button (touch-controls) stands in for the panel button only while it is really usable. */
.vb-touch-deploying .cq-deploy-button { display: none; }
.vb-touch-deploying .cq-deploy { padding-bottom: 86px;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 96px), #0000 calc(100% - 72px)); mask-image: linear-gradient(180deg, #000 calc(100% - 96px), #0000 calc(100% - 72px)); }
/* With the panel button replaced by the touch one, the status line (countdown, refusals) moves up under the header. */
.vb-touch-deploying .cq-deploy-foot { display: none; }
.vb-touch-deploying .cq-kit-row-unlock { margin-right: 0; }
.vb-touch-deploying .cq-deploy-kits[data-tab="vehicles"] .cq-kit-info { min-height: 30px; margin-right: 0; padding-top: 0; }
.vb-touch-mode .cq-upg-option, .vb-touch-mode .cq-deploy-tab { min-height: 44px; }
/* Touch: 44 px targets on the class cards and their toggles. */
.vb-touch-mode .cq-kit-pick, .vb-touch-mode .cq-kit-variant, .vb-touch-mode .cq-kit-gadget { min-height: 44px; }
.vb-touch-mode .cq-kit-info { white-space: normal; min-height: 30px; line-height: 15px; }
/* The deploy screen announces unlocks in its own section headers: HUD banners stay under its backdrop, hidden. */
.vb-conquest-hud:has(.cq-deploy:not([hidden])) .cq-banner { visibility: hidden; }
/* The ticket bar would show through the deploy backdrop behind the title on phones. */
.vb-touch-mode .vb-conquest-hud:has(.cq-deploy:not([hidden])) .cq-top { visibility: hidden; }
/* The touch pause button stays above the deploy screen (top-left): the title starts right of it. */
.vb-touch-mode .cq-deploy-titles { padding-left: 52px; min-height: 44px; align-content: center; }
.vb-touch-mode .cq-bigmap-map { width: min(calc(100vh - 140px), calc(100vw - 48px)); }

/* Desktop narrow and all phones: deploy stacks vertically. */
@media (max-width: 1100px) {
  .cq-deploy-mapcol { grid-template-columns: var(--cq-map) minmax(180px, 1fr); }
  .cq-kit-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cq-kit-row-unlock { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Narrow desktop and tablets: four unlock cards need the full width, so DEPLOY drops
   to its own row under them (the map gives the height back) and the loadout slot
   drops its class name so the gear line keeps room beside the Engineer's toggles. */
@media (max-width: 1023px) {
  .cq-deploy-panel { --cq-map: clamp(180px, calc(100vh - 510px), 440px); }
  .cq-deploy-foot { grid-row: 3; }
  .cq-kit-row-unlock { margin-right: 0; }
  .cq-kit-loadout-name { display: none; }
  .cq-kit-loadout .cq-kit-variants, .cq-kit-loadout .cq-kit-gadgets { flex-basis: 260px; }
  /* Too narrow for the gadget art beside the names (phone portrait gets it back with the stacked toggles). */
  .cq-kit-gadget-art { display: none; }
  .cq-kit-gadget:has(.cq-kit-gadget-art) { grid-template-columns: auto 1fr; }
  .cq-deploy-kits[data-tab="vehicles"] .cq-kit-info { min-height: 30px; margin-right: 0; padding-top: 0; }
}
@media (max-width: 700px) {
  .cq-deploy { place-items: start center; }
  .cq-deploy-panel { gap: 8px; }
  .cq-deploy-title { font-size: 24px; letter-spacing: 4px; }
  .cq-deploy-head { row-gap: 6px; }
  /* The status line has its own two-line row, kept while empty: an auto-deploy timer, a
     refusal or an unlock note appearing mid-choice never pushes the classes down. */
  .cq-deploy-status, .cq-deploy-status:empty { display: -webkit-box; flex: 0 0 100%; order: 3; height: 30px; overflow: hidden;
    font-size: 11px; line-height: 15px; letter-spacing: 1px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .cq-deploy-killer { margin-left: 0; width: 100%; padding: 6px 10px; justify-content: start; }
  .cq-deploy-mapcol { grid-template-columns: 1fr; }
  /* Portrait: a smaller map and a short scrolling spawn list keep the classes near the top. */
  .cq-deploy-map { width: min(100%, 220px, 28vh); justify-self: center; }
  .cq-deploy-spawns { grid-template-columns: 1fr 1fr; max-height: 156px; }
  .cq-deploy-side, .cq-deploy-foot { grid-row: auto; }
  .cq-deploy-foot { justify-self: stretch; }
  /* Two compact columns that never reflow; the loadout slot stacks its toggles below them. */
  .cq-kit-row, .cq-kit-row-unlock { grid-template-columns: 1fr 1fr; margin-right: 0; }
  .cq-kit-loadout { display: grid; gap: 5px; padding: 6px; }
  /* Phone portrait: one hull per row, its chips side by side. */
  .cq-upg-grid { grid-template-columns: 1fr; }
  .cq-kit-loadout-name { display: none; }
  .cq-kit-loadout .cq-kit-gadgets.is-placeholder { display: block; visibility: hidden; min-height: 32px; }
  .vb-touch-mode .cq-kit-loadout .cq-kit-gadgets.is-placeholder { min-height: 44px; }
  .cq-kit-loadout .cq-kit-gear { text-align: left; }
  .cq-kit-gadget-art { display: block; }
  .cq-kit-gadget:has(.cq-kit-gadget-art) { grid-template-columns: auto 1fr auto; }
  .cq-deploy-button { width: 100%; }
  .cq-deploy-foot { flex-wrap: wrap; }
  .cq-kit-info { white-space: normal; min-height: 30px; line-height: 15px; }
  /* The touch pause button (top left) sits on the header: a sticky header keeps scrolled cards out from under it. */
  .vb-touch-mode .cq-deploy-head { position: sticky; top: 0; z-index: 2; padding: 6px 0;
    background: linear-gradient(180deg, #050b10 80%, #050b1000); }
}
@media (orientation: landscape) and (max-height: 500px) {
  /* Phone landscape: the SEAT / FLARES row sits ~150 px above the bottom edge, so the
     vehicle card moves up beside the top bar (which is centred and narrower than the gap). */
  .vb-touch-mode .cq-vehicle { top: max(8px, env(safe-area-inset-top)); max-height: calc(100vh - 240px); overflow: hidden; }
  .vb-touch-mode .cq-vehicle-main { grid-template-columns: 22px 1fr; }
  .vb-touch-mode .cq-hull { width: 22px; height: 32px; }
  .vb-touch-mode .cq-ring { top: calc(50% + 22px); }
  .vb-touch-mode .cq-ticker { top: calc(50% + 30px); bottom: auto; left: calc(50% - 122px); }
  .vb-touch-mode .vb-conquest-hud:has(.cq-interact:not([hidden])) .cq-ticker { top: calc(50% + 30px); bottom: auto; }
  .vb-touch-mode .cq-interact { top: auto; bottom: 64px; }
  /* Inside a flag zone (an event point at a flag: the dam's DEFUSE at C) the ring's label reaches 290 px: the prompt drops below it. */
  .vb-touch-mode .vb-conquest-hud:has(.cq-ring:not([hidden])) .cq-interact { bottom: 40px; }
  /* Bomb sight up: the prompt moves to the free corner left of the top bar. */
  .vb-touch-mode .vb-conquest-hud[data-bomb-sight="true"] .cq-interact { top: max(10px, env(safe-area-inset-top)); bottom: auto;
    left: calc(50% - 146px); transform: translateX(-100%); }
  /* Between the squad list and the grenade card; long place names (Redrock's COPPERHEAD MINE) take a smaller title. */
  .vb-touch-mode .cq-banner { top: calc(max(10px, env(safe-area-inset-top)) + 52px); max-width: calc(100vw - 480px); }
  .vb-touch-mode .cq-banner-title { font-size: 13px; letter-spacing: 0.6px; }
  .vb-touch-mode .cq-restricted { top: 16%; }
  /* Landscape: the squad list rides right of the HP card, left of the banner lane and above MAP / SPOT. */
  .vb-touch-mode .cq-squad {
    display: grid; left: calc(max(12px, env(safe-area-inset-left)) + 110px); top: calc(max(10px, env(safe-area-inset-top)) + 54px); bottom: auto;
    min-width: 0; width: 100px; max-width: 100px; gap: 2px; padding: 3px 6px 3px 6px;
  }
  .vb-touch-mode .cq-squad-head { font-size: 8px; letter-spacing: 1px; }
  .vb-touch-mode .cq-squad-list { gap: 1px; }
  .vb-touch-mode .cq-squad-row { grid-template-columns: 12px minmax(0, 1fr) auto; gap: 4px; min-height: 13px; }
  .vb-touch-mode .cq-squad-icon { width: 12px; height: 12px; }
  .vb-touch-mode .cq-squad-name { font-size: 10px; letter-spacing: 0.2px; }
  .vb-touch-mode .cq-squad-state { font-size: 8px; letter-spacing: 0.4px; }
  /* Phone landscape: map + spawns | the classes, each scrolling in its own column (as the old kit column did). */
  .cq-deploy-panel { gap: 8px; --cq-map: 150px; }
  .cq-deploy-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .cq-deploy-mapcol { grid-template-columns: var(--cq-map) minmax(0, 1fr); gap: 8px; }
  .cq-deploy-side { grid-row: 1; grid-column: 2; max-height: calc(100vh - 150px); overflow: auto; overscroll-behavior: contain; gap: 5px; }
  .cq-deploy-foot { grid-row: 2; grid-column: 1 / -1; justify-self: end; }
  .cq-deploy-spawns { grid-template-columns: 1fr; max-height: calc(100vh - 150px); }
  .cq-deploy-head { gap: 10px; }
  .cq-deploy-title { font-size: 20px; }
  .cq-deploy-killer { padding: 4px 10px; margin-left: auto; width: auto; }
  .cq-kit-row, .cq-kit-row-unlock { grid-template-columns: 1fr 1fr; margin-right: 0; gap: 5px; }
  .cq-kit { padding: 4px 6px; gap: 4px; }
  /* Phone landscape: the hulls stack in the scrolling classes column. */
  .cq-upg-grid { grid-template-columns: 1fr; gap: 5px; }
  .cq-upg-hull { padding: 4px 6px; gap: 4px; }
  .cq-deploy-kits[data-tab="vehicles"] .cq-kit-info { min-height: 30px; margin-right: 0; padding-top: 0; }
  .cq-kit-loadout { display: grid; gap: 4px; padding: 4px 6px; }
  .cq-kit-loadout-name { display: none; }
  .cq-kit-loadout .cq-kit-gadgets.is-placeholder { display: block; visibility: hidden; min-height: 32px; }
  .vb-touch-mode .cq-kit-loadout .cq-kit-gadgets.is-placeholder { min-height: 44px; }
  .cq-kit-loadout .cq-kit-gear { text-align: left; }
  .cq-kit-pick { grid-template-columns: 24px 1fr; gap: 6px; }
  .cq-kit.is-locked .cq-kit-pick { grid-template-columns: 24px 1fr 16px; }
  .cq-kit-icon { width: 22px; height: 22px; }
  .cq-kit-name b { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cq-chip, .cq-chip::after, .cq-ring-dial, .cq-banner.is-in, .cq-view, .cq-lock, .cq-restricted-seconds, .cq-unit-glyph, .cq-team .cq-ticket-fill, .cq-sector-tag { animation: none !important; }
}

/* --------------------------------------------- scoreboard + result (conquest) */
.vb-mode-scoreboard[data-mode="conquest"] .vb-scoreboard-team[data-rel="own"] .vb-sb-team-heading { color: #4cc3ff; }
.vb-mode-scoreboard[data-mode="conquest"] .vb-scoreboard-team[data-rel="enemy"] .vb-sb-team-heading { color: #ff8a3d; }
/* The base board styles cells through #scoreboard (id specificity); these carry it too. */
:is(#scoreboard, #match-result-scoreboard).vb-mode-scoreboard[data-mode="conquest"] .vb-sb-squad-row td { padding: 12px 8px 3px; text-align: left; font-size: 10px; font-weight: 800; letter-spacing: 2px; color: #7ef29a; border-bottom: 1px solid #7ef29a33; }
:is(#scoreboard, #match-result-scoreboard).vb-mode-scoreboard[data-mode="conquest"] td.vb-sb-squad { width: 22px; text-align: center; font-weight: 800; color: #7ef29a; }
:is(#scoreboard, #match-result-scoreboard).vb-mode-scoreboard[data-mode="conquest"] td.vb-sb-ping { white-space: nowrap; }
/* Held Tab board: below the ticket bar, and the world layer (drawn above #hud) steps aside. */
#scoreboard.vb-mode-scoreboard[data-mode="conquest"] {
  top: calc(max(14px, env(safe-area-inset-top)) + 84px); transform: translateX(-50%);
  max-height: calc(100dvh - max(14px, env(safe-area-inset-top)) - 98px);
}
.vb-touch-mode #scoreboard.vb-mode-scoreboard[data-mode="conquest"] {
  top: calc(max(10px, env(safe-area-inset-top)) + 70px);
  max-height: calc(100dvh - max(10px, env(safe-area-inset-top)) - 80px);
}
body:has(#scoreboard.is-open[data-mode="conquest"]) :is(.vb-conquest-hud :is(.cq-world, .cq-reticles, .cq-ring, .cq-ticker, .cq-minimap, .cq-squad, .cq-order, .cq-radio, .cq-rose, .cq-vehicle, .cq-view, .cq-interact, .cq-map-hint, .cq-banner, .cq-lock, .cq-lock-bearing, .cq-restricted, .cq-spot-flash, .cq-hit-callout), .vb-touch-controls > :not(.vb-touch-pause)) { visibility: hidden; }
/* Phone portrait board: drop the ping column and tighten cells so names stay on one line. */
@media (max-width: 520px) {
  #scoreboard.vb-mode-scoreboard[data-mode="conquest"] { min-width: 0; width: calc(100vw - 20px); max-width: none; padding: 12px 8px 14px; }
  #scoreboard.vb-mode-scoreboard[data-mode="conquest"] :is(th, td) { padding-left: 4px; padding-right: 4px; letter-spacing: 0.06em; }
  #scoreboard.vb-mode-scoreboard[data-mode="conquest"] td { font-size: 12px; }
  #scoreboard.vb-mode-scoreboard[data-mode="conquest"] td.vb-sb-name { white-space: nowrap; }
  #scoreboard.vb-mode-scoreboard[data-mode="conquest"] :is(th:last-child, td.vb-sb-ping) { display: none; }
}
/* The result screen replaces the live HUD: the world layer, banners and touch buttons (drawn above #hud) step aside. */
body:has(#match-result-screen[data-mode="conquest"]:not(.hidden)) :is(.vb-conquest-hud, .vb-touch-controls > :not(.vb-touch-pause)) { visibility: hidden; }
.vb-touch-mode .vb-match-result[data-mode="conquest"] .vb-match-result-eyebrow { padding-left: 50px; }
.vb-match-result[data-mode="conquest"] .vb-result-alpha-score[data-rel="own"], .vb-match-result[data-mode="conquest"] .vb-result-bravo-score[data-rel="own"] { color: #4cc3ff; }
.vb-match-result[data-mode="conquest"] .vb-result-alpha-score[data-rel="enemy"], .vb-match-result[data-mode="conquest"] .vb-result-bravo-score[data-rel="enemy"] { color: #ff8a3d; }
.vb-result-conquest { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 340px); gap: 14px; margin: 4px 0 10px; }
.vb-result-conquest[hidden] { display: none; }
.vb-result-graph { margin: 0; padding: 8px 10px; background: #0b1319c0; border: 1px solid #8ca6ba33; border-radius: 4px; }
.vb-result-graph[hidden] { display: none; }
.vb-result-graph-title { font-size: 10px; font-weight: 800; letter-spacing: 2px; color: #9fb0bd; margin-bottom: 4px; }
.vb-result-graph-svg { display: block; width: 100%; height: 110px; overflow: visible; }
.vb-result-graph-grid { stroke: #ffffff14; stroke-width: 1; }
.vb-result-graph-line { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.vb-result-graph-line.is-own { stroke: #4cc3ff; }
.vb-result-graph-line.is-enemy { stroke: #ff8a3d; }
.vb-result-mvps { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: start; }
.vb-result-mvp { display: grid; padding: 6px 9px; background: #0b1319c0; border-left: 3px solid #9fb0bd; border-radius: 3px; }
.vb-result-mvp[data-rel="own"] { border-left-color: #4cc3ff; }
.vb-result-mvp[data-rel="enemy"] { border-left-color: #ff8a3d; }
.vb-result-mvp-title { font-size: 9px; font-weight: 800; letter-spacing: 2px; color: #ffd166; }
.vb-result-mvp-name { font-size: 14px; letter-spacing: 0.6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-result-mvp-value { font-size: 10px; font-weight: 700; color: #9fb0bd; }
@media (max-width: 700px) { .vb-result-conquest { grid-template-columns: 1fr; } .vb-result-graph-svg { height: 80px; } }

/* ------------------------------------------------- medic feedback (classes) */
/* '+5 HP' from the server heal event, beside the health card (its top edge is --cq-floor). */
/* Lives inside #healthbar (clip-path: it must stay inside the card): bottom right, opposite the medkit line. */
.cq-heal-tick { position: absolute; right: 10px; bottom: 8px; white-space: nowrap; z-index: 2;
  padding: 1px 6px; border-radius: 3px; background: #0d2a18e6; border: 1px solid #7ef29a88; color: #7ef29a;
  font: 800 12px var(--font-ui); letter-spacing: 1px; pointer-events: none; animation: cq-heal-rise 1.4s ease-out both; }
@keyframes cq-heal-rise { from { transform: translateY(4px); opacity: 0.7; } 15% { transform: none; opacity: 1; } to { opacity: 0.85; } }
.cq-spot-flash[data-tone="heal"] { color: #7ef29a; }
.cq-interact[data-type="needs-medic"] { border-color: #ff6b6b88; }
.cq-interact[data-type="needs-medic"] .cq-interact-label { color: #ffb1a8; }
.cq-unit-marker[data-kind="wounded"] .cq-unit-glyph { width: 16px; height: 16px; margin: -8px 0 0; color: #7ef29a; filter: drop-shadow(0 0 3px #000); }
.vb-touch-mode .cq-heal-tick { right: 4px; bottom: 4px; padding: 0 4px; font-size: 10px; }
.vb-conquest-hud > .cq-heal-tick { left: calc(max(16px, env(safe-area-inset-left)) + 240px); top: auto; bottom: 24px; }
@media (prefers-reduced-motion: reduce) { .cq-heal-tick { animation: none; } }

/* ------------------------------------------- squad orders + comm rose (docs/design/conquest/orders/, variant A) */
/* Comm rose: eight wedges round a COMMS hub; the selected wedge lights in own blue. */
.cq-rose { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 4; }
.cq-rose-dial { position: relative; width: min(440px, 74vmin); aspect-ratio: 1; pointer-events: auto; }
.cq-rose-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 8px 22px #000b); }
.cq-rose-wedge { fill: rgba(12, 19, 25, 0.92); stroke: rgba(150, 176, 196, 0.34); stroke-width: 0.6; cursor: pointer; transition: fill 70ms linear; }
.cq-rose-wedge[data-enabled="false"] { fill: rgba(12, 19, 25, 0.66); cursor: default; }
.cq-rose-wedge[data-selected="true"] { fill: rgba(22, 92, 128, 0.92); stroke: var(--cq-own); stroke-width: 1.4; }
.cq-rose-wedge[data-selected="true"][data-enabled="false"] { fill: rgba(60, 64, 68, 0.9); stroke: #8a949c; }
.cq-rose-seg {
  position: absolute; width: 27%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 3px; padding: 0;
  background: none; border: 0; color: var(--cq-text); font: 700 12px/1.1 var(--font-ui, system-ui, sans-serif); letter-spacing: 1.4px;
  text-align: center; cursor: pointer; pointer-events: auto; text-shadow: 0 1px 2px #000;
}
.cq-rose-icon { display: block; width: 30px; height: 30px; color: #f4f7f9; filter: drop-shadow(0 1px 2px #000); }
.cq-rose-glyph { display: block; width: 100%; height: 100%; }
.cq-rose-label { white-space: nowrap; }
.cq-rose-note { min-height: 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; letter-spacing: 1px; color: var(--cq-sub); }
.cq-rose-seg[data-selected="true"] { color: #c9eeff; }
.cq-rose-seg[data-selected="true"] .cq-rose-icon { color: var(--cq-own); }
.cq-rose-seg[data-enabled="false"] { opacity: 0.45; cursor: default; }
.cq-rose-seg[data-kind="order"][data-enabled="true"] .cq-rose-icon { color: var(--cq-squad); }
.cq-rose-hub {
  position: absolute; left: 50%; top: 50%; width: 45%; aspect-ratio: 1; transform: translate(-50%, -50%); padding: 0;
  display: grid; place-content: center; justify-items: center; gap: 4px; border-radius: 50%; border: 1px solid rgba(150, 176, 196, 0.34);
  background: radial-gradient(circle, rgba(16, 26, 33, 0.9), rgba(8, 13, 17, 0.96)); color: var(--cq-text); font-family: var(--font-ui, system-ui, sans-serif); cursor: pointer;
}
.cq-rose-reticle { position: relative; width: 26px; height: 26px; margin-bottom: 4px; opacity: 0.8;
  background: linear-gradient(#dfe7ec, #dfe7ec) 50% 0 / 1px 9px no-repeat, linear-gradient(#dfe7ec, #dfe7ec) 50% 100% / 1px 9px no-repeat,
    linear-gradient(#dfe7ec, #dfe7ec) 0 50% / 9px 1px no-repeat, linear-gradient(#dfe7ec, #dfe7ec) 100% 50% / 9px 1px no-repeat; }
.cq-rose-title { font-size: 22px; font-weight: 800; letter-spacing: 3px; }
.cq-rose-sub { font-size: 9px; font-weight: 700; letter-spacing: 2px; color: var(--cq-sub); }
/* The rose owns the screen centre: the crosshair readouts step aside. */
.vb-conquest-hud:has(.cq-rose:not([hidden])) :is(.cq-spot-flash, .cq-hit-callout, .cq-ring) { visibility: hidden; }

/* Squad order chip above the minimap: SQUAD ORDER / ATTACK C – IRON BRIDGE 240 M. */
.cq-order {
  position: absolute; left: max(22px, env(safe-area-inset-left)); bottom: calc(var(--cq-floor, 104px) + var(--cq-minimap) + 14px);
  display: grid; grid-template-columns: 20px auto; align-items: center; gap: 9px; max-width: calc(100vw - 44px); padding: 6px 14px 7px 9px;
  background: linear-gradient(90deg, rgba(9, 15, 20, 0.92), rgba(9, 15, 20, 0.66)); border: 1px solid #ffffff12; border-left: 3px solid var(--cq-squad);
  border-radius: 2px; text-shadow: 0 1px 2px #000;
}
.cq-order-icon { display: block; width: 20px; height: 20px; color: #ffb27a; }
.cq-order[data-stance="defend"] .cq-order-icon { color: var(--cq-own); }
.cq-order-glyph { display: block; width: 100%; height: 100%; }
.cq-order-head { display: block; font-size: 9px; font-weight: 800; letter-spacing: 2px; color: var(--cq-sub); }
.cq-order-line { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.cq-order-title { font-size: 16px; font-weight: 800; letter-spacing: 1.6px; color: var(--cq-text); }
.cq-order-name { overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 700; letter-spacing: 1px; color: #dfe7ec; }
.cq-order-distance { font-style: normal; font-size: 13px; font-weight: 700; color: var(--cq-sub); font-variant-numeric: tabular-nums; }
.vb-conquest-hud:has(.cq-order:not([hidden])) .cq-map-hint { display: none; }

/* Squad radio: short lines above the order chip (callouts, requests the own kit answers, responders). */
.cq-radio {
  position: absolute; left: max(22px, env(safe-area-inset-left)); bottom: calc(var(--cq-floor, 104px) + var(--cq-minimap) + 68px);
  display: grid; gap: 3px; max-width: 340px; margin: 0; padding: 0; list-style: none;
}
.vb-conquest-hud:not(:has(.cq-order:not([hidden]))) .cq-radio { bottom: calc(var(--cq-floor, 104px) + var(--cq-minimap) + 16px); }
.cq-radio-line {
  padding-left: 8px; border-left: 2px solid currentColor; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; color: var(--cq-squad);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #000, 0 0 4px #000; animation: cq-radio-in 160ms ease-out;
}
.cq-radio-line[data-tone="own"] { color: var(--cq-own); }
.cq-radio-line[data-tone="warn"] { color: #ffb36b; }
@keyframes cq-radio-in { from { opacity: 0; transform: translateX(-6px); } }

/* World flag marker: the own squad's order tag (ATTACK / DEFEND) above the diamond. */
.cq-flag-marker-order {
  position: absolute; bottom: 46px; left: 50%; transform: translateX(-50%); padding: 1px 6px 2px; border-radius: 2px;
  font-size: 10px; font-weight: 800; letter-spacing: 1.4px; line-height: 12px; white-space: nowrap; color: #06120a; background: var(--cq-squad);
  box-shadow: 0 0 0 1px #06120a, 0 0 10px #7ef29a55;
}
.cq-flag-marker-order::after { content: ''; position: absolute; left: 50%; top: 100%; margin-left: -4px; border: 4px solid transparent; border-top: 4px solid var(--cq-squad); }
.cq-flag-marker:not([data-order="attack"]):not([data-order="defend"]) .cq-flag-marker-order { display: none; }
.cq-flag-marker:is([data-order="attack"], [data-order="defend"]) .cq-flag-marker-diamond { stroke-width: 3; }
.cq-flag-marker:is([data-order="attack"], [data-order="defend"])[data-near="true"] { opacity: 0.6; }

/* Request markers (NEED MEDIC 34 M) over requesters the own kit can answer. */
.cq-unit-marker[data-kind="request"] .cq-unit-glyph {
  width: 22px; height: 22px; margin: -11px 0 0; padding: 3px; box-sizing: border-box; border-radius: 50%; color: var(--cq-squad);
  background: #0b1319e0; box-shadow: 0 0 0 1.5px var(--cq-squad), 0 0 8px #7ef29a66; animation: cq-down 1.2s ease-in-out infinite;
}
.cq-unit-marker[data-kind="request"] .cq-unit-label { color: var(--cq-squad); font-weight: 800; letter-spacing: 1px; }

/* Full map: a leader's order cursor (locked pointer / pad) and pickable flags. */
.cq-bigmap-cursor {
  position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 2px solid #fff; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 1px #000a, inset 0 0 0 1px #000a;
}
.cq-bigmap-cursor[data-over="true"] { border-color: var(--cq-squad); box-shadow: 0 0 0 3px #7ef29a55, inset 0 0 0 1px #000a; }
.cq-bigmap[data-leader="true"] .cq-bigmap-map .cq-northmap-canvas { cursor: pointer; }
.cq-bigmap[data-leader="true"] .cq-bigmap-hint { color: var(--cq-squad); font-weight: 700; letter-spacing: 1px; }

/* Touch: COMMS under MAP and SPOT (VIEW below it while seated). */
.vb-touch-comms {
  right: auto; bottom: auto; left: calc(max(12px, env(safe-area-inset-left)) + 112px); top: calc(max(10px, env(safe-area-inset-top)) + 218px);
  width: 44px; height: 44px; border-radius: 8px; font-size: 8px; letter-spacing: 0.4px; border-color: #7ef29aaa; color: #d9ffe3;
}
/* Touch: MORTAR (a Support with the M-81, on foot) under COMMS, where VIEW sits while seated. */
.vb-touch-mortar {
  right: auto; bottom: auto; left: calc(max(12px, env(safe-area-inset-left)) + 112px); top: calc(max(10px, env(safe-area-inset-top)) + 270px);
  width: 44px; height: 44px; border-radius: 8px; font-size: 8px; letter-spacing: 0.4px; border-color: #ffd166aa; color: #ffe9b0;
  place-items: end center; padding-bottom: 4px;
}
/* The deployable's slot art over the label (public/assets/weapons/hud/, as on the kit wheel). */
.vb-touch-mortar::before {
  content: ''; position: absolute; left: 3px; right: 3px; top: 4px; height: 21px;
  background: center / contain no-repeat url('../assets/weapons/hud/mortar.png'); filter: drop-shadow(0 1px 1px #000a);
}
.vb-touch-mortar[data-art="fpv"]::before { background-image: url('../assets/weapons/hud/fpv.png'); }
.vb-touch-mortar[data-art="ammocrate"]::before { background-image: url('../assets/weapons/hud/ammocrate.png'); }
.vb-touch-mortar[data-art="medcrate"]::before { background-image: url('../assets/weapons/hud/medcrate.png'); }
.vb-touch-mode .cq-rose-dial { width: min(340px, 88vmin); }
.vb-touch-mode .cq-rose-seg { font-size: 10px; letter-spacing: 0.8px; gap: 2px; }
.vb-touch-mode .cq-rose-icon { width: 22px; height: 22px; }
.vb-touch-mode .cq-rose-note { font-size: 8px; letter-spacing: 0.4px; }
.vb-touch-mode .cq-rose-title { font-size: 17px; letter-spacing: 2px; }
.vb-touch-mode .cq-rose-sub { font-size: 8px; letter-spacing: 1px; }
/* Portrait: the chip and the radio stack under the minimap, as wide as it (MAP / SPOT / COMMS sit beside it);
   banners step below them. */
.vb-touch-mode .cq-order {
  top: calc(max(10px, env(safe-area-inset-top)) + 226px); bottom: auto; left: max(12px, env(safe-area-inset-left));
  grid-template-columns: 14px auto; gap: 5px; padding: 3px 6px 4px 5px; width: var(--cq-minimap); max-width: none; box-sizing: border-box;
}
.vb-touch-mode .cq-order-icon { width: 14px; height: 14px; }
.vb-touch-mode .cq-order-head { font-size: 7px; letter-spacing: 1px; }
.vb-touch-mode .cq-order-line { flex-wrap: wrap; column-gap: 5px; row-gap: 0; }
.vb-touch-mode .cq-order-title { font-size: 12px; letter-spacing: 1px; }
.vb-touch-mode .cq-order-name { display: none; }
.vb-touch-mode .cq-order-distance { font-size: 10px; }
.vb-touch-mode .cq-radio { top: calc(max(10px, env(safe-area-inset-top)) + 276px); bottom: auto; left: max(12px, env(safe-area-inset-left)); width: var(--cq-minimap); max-width: none; }
.vb-touch-mode .vb-conquest-hud:not(:has(.cq-order:not([hidden]))) .cq-radio { top: calc(max(10px, env(safe-area-inset-top)) + 226px); bottom: auto; }
.vb-touch-mode .cq-radio-line { font-size: 9px; letter-spacing: 0.4px; white-space: normal; line-height: 11px; }
.vb-touch-mode .cq-radio-line:not(:nth-last-child(-n + 2)) { display: none; }
.vb-touch-mode .vb-conquest-hud:has(.cq-order:not([hidden])) .cq-banner { top: calc(max(10px, env(safe-area-inset-top)) + 340px); }
@media (orientation: landscape) and (max-height: 500px) {
  /* Landscape: the order reads under the ticket bar (banners step down), the radio beside MAP / SPOT. */
  .vb-touch-mode .cq-order { top: calc(max(8px, env(safe-area-inset-top)) + 50px); left: 50%; transform: translateX(-50%); width: auto; }
  .vb-touch-mode .cq-order-line { flex-wrap: nowrap; }
  .vb-touch-mode .cq-order-name { display: inline; font-size: 10px; }
  .vb-touch-mode .vb-conquest-hud:has(.cq-order:not([hidden])) .cq-banner { top: calc(max(10px, env(safe-area-inset-top)) + 86px); }
  .vb-touch-mode .cq-radio, .vb-touch-mode .vb-conquest-hud:not(:has(.cq-order:not([hidden]))) .cq-radio {
    top: calc(max(10px, env(safe-area-inset-top)) + 150px); left: calc(max(12px, env(safe-area-inset-left)) + 166px); width: 150px;
  }
  .vb-touch-mode .cq-rose-dial { width: min(280px, 72vmin); }
}
@media (prefers-reduced-motion: reduce) {
  .cq-radio-line, .cq-unit-marker[data-kind="request"] .cq-unit-glyph { animation: none; }
  .cq-rose-wedge { transition: none; }
}

/* Support mortar fire control (docs/design/conquest/mortar/, variant A): right edge above the vehicle card. */
.cq-mortar {
  position: absolute; right: max(22px, env(safe-area-inset-right)); bottom: 196px; width: 262px;
  display: grid; gap: 6px; padding: 8px 10px 8px; background: var(--cq-panel); border: 1px solid var(--cq-line);
  border-radius: 6px; box-shadow: 0 6px 18px #0008;
}
.cq-mortar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cq-mortar-title { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--cq-text); }
.cq-mortar-status { font-size: 10px; font-weight: 800; letter-spacing: 1.4px; color: var(--cq-squad); }
.cq-mortar-status:is([data-state="laying"], [data-state="loading"]) { color: var(--cq-contested); }
.cq-mortar-status[data-state="reloading"] { color: var(--cq-danger); }
.cq-mortar-map { position: relative; width: 100%; aspect-ratio: 1; border: 1px solid var(--cq-line); border-radius: 3px; overflow: hidden; }
.cq-mortar-canvas { display: block; width: 100%; height: 100%; }
.cq-mortar-readouts { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--cq-line); border-radius: 3px; }
.cq-mortar-cell { display: grid; gap: 1px; padding: 3px 5px 4px; }
.cq-mortar-cell + .cq-mortar-cell { border-left: 1px solid var(--cq-line); }
.cq-mortar-label { font-size: 9px; font-weight: 700; letter-spacing: 1.2px; color: var(--cq-sub); }
.cq-mortar-value { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--cq-text); }
.cq-mortar-rounds { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; }
.cq-mortar-weapon { flex: 1; }
.cq-mortar-pips { display: inline-flex; gap: 4px; }
.cq-mortar-pip { width: 7px; height: 12px; border-radius: 4px 4px 1px 1px; border: 1px solid #ffd166aa; }
.cq-mortar-pip[data-full="true"] { background: #ffd166; border-color: #ffd166; }
.cq-mortar-count { font-variant-numeric: tabular-nums; color: var(--cq-sub); }
.cq-mortar-reload { height: 4px; border-radius: 2px; background: #ffffff1a; overflow: hidden; }
.cq-mortar-reload-fill { height: 100%; background: #ffd166; }
.cq-mortar-reload-fill[data-state="ready"] { background: var(--cq-squad); }
.cq-mortar-hints { font-size: 9px; font-weight: 700; letter-spacing: 1.3px; color: var(--cq-sub); text-align: center; white-space: nowrap; }
/* The impact ring in the world: a flat ellipse on the ground with its range. */
.cq-mortar-impact { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.cq-mortar-impact::before {
  content: ""; position: absolute; left: -26px; top: -9px; width: 52px; height: 18px; border-radius: 50%;
  border: 2px solid #ffd166; box-shadow: 0 0 8px #ffd16688, inset 0 0 6px #ffd16655;
}
.cq-mortar-impact[data-laid="false"]::before { border-style: dashed; }
.cq-mortar-impact-label {
  position: absolute; left: 0; bottom: 12px; transform: translateX(-50%); white-space: nowrap;
  font-size: 12px; font-weight: 800; letter-spacing: 1px; color: #ffd166; text-shadow: 0 1px 2px #000c;
}
/* Phones (portrait): under the banner on the right, clear of the vehicle card above and FIRE below. */
.vb-touch-mode .cq-mortar {
  top: calc(max(10px, env(safe-area-inset-top)) + 284px); bottom: auto; right: max(12px, env(safe-area-inset-right));
  width: 176px; gap: 4px; padding: 6px 8px;
}
/* Portrait banner (270 px, under COMMS): the panel steps below it, and the EXIT prompt below the panel. */
@media (orientation: portrait) {
  .vb-touch-mode .vb-conquest-hud:has(.cq-banner:not([hidden])) .cq-mortar { top: calc(max(10px, env(safe-area-inset-top)) + 318px); }
  .vb-touch-mode .vb-conquest-hud:has(.cq-banner:not([hidden])):has(.cq-mortar:not([hidden])) .cq-interact { top: calc(50% + 152px); }
}
.vb-touch-mode .cq-mortar-title { font-size: 8px; letter-spacing: 0.8px; white-space: nowrap; }
.vb-touch-mode .cq-mortar-status { font-size: 8px; letter-spacing: 0.8px; }
.vb-touch-mode .cq-mortar-rounds { font-size: 10px; }
.vb-touch-mode .cq-mortar-value { font-size: 11px; }
.vb-touch-mode .cq-mortar-label { font-size: 8px; }
.vb-touch-mode .cq-mortar-cell { padding: 2px 3px 3px; }
.vb-touch-mode .cq-mortar-hints { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  /* Phone landscape: under the vehicle card on the right, above FIRE, the map beside the readouts. */
  .vb-touch-mode .cq-mortar { top: calc(max(8px, env(safe-area-inset-top)) + 112px); right: max(12px, env(safe-area-inset-right));
    width: 236px; grid-template-columns: 96px 1fr; align-items: start; column-gap: 6px; }
  .vb-touch-mode .cq-mortar-head { grid-column: 1 / -1; }
  .vb-touch-mode .cq-mortar-map { grid-row: span 3; }
  .vb-touch-mode .cq-mortar-readouts { grid-template-columns: 1fr 1fr; }
  .vb-touch-mode .cq-mortar-cell:nth-child(3) { border-left: 0; }
  .vb-touch-mode .cq-mortar-cell:nth-child(n + 3) { border-top: 1px solid var(--cq-line); }
  .vb-touch-mode .cq-mortar-rounds { gap: 4px; font-size: 9px; }
  .vb-touch-mode .cq-mortar-weapon { display: none; }
}

/* ------------------------------------------------------------ map events */
/* docs/conquest.md "Map events", design docs/design/conquest/events/framework/ (variant A):
   the objective banner with a glyph badge at its left, hexagon world markers, disc point markers
   and the amber HOLD ring. Tones: hazard amber, danger red, own / enemy team-relative. */
.cq-banner-icon { display: none; }
.cq-banner[data-icon="true"] {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center;
  text-align: left; padding-left: 18px;
  /* Left-aligned text runs to the right edge: the panel stays solid under it and fades only past it. */
  background: linear-gradient(90deg, transparent, var(--cq-panel) 5%, var(--cq-panel) 90%, transparent);
}
html:not(.vb-touch-mode) .cq-banner[data-icon="true"] { padding-right: 40px; }
.cq-banner[data-icon="true"] .cq-banner-icon {
  display: grid; place-items: center; grid-row: 1 / span 3; width: 38px; height: 38px; border-radius: 4px;
  background: var(--tone, #ffb020); color: #14100a; box-shadow: 0 0 10px color-mix(in srgb, var(--tone, #ffb020) 45%, transparent);
}
.cq-banner[data-icon="true"] .cq-banner-icon[hidden] { display: none; }
.cq-banner-glyph { width: 26px; height: 26px; display: block; }
.cq-banner[data-icon="true"] .cq-banner-title, .cq-banner[data-icon="true"] .cq-banner-detail { grid-column: 2; }
.cq-banner[data-icon="true"] .cq-banner-bar { grid-column: 2; margin: 5px 0 0; }
.cq-unit-marker[data-tone="hazard"] { --tone: #ffb020; }
.cq-unit-marker[data-tone="danger"] { --tone: var(--cq-danger); }
.cq-unit-marker[data-tone="own"] { --tone: var(--cq-own); }
.cq-unit-marker[data-tone="enemy"] { --tone: var(--cq-enemy); }
.cq-unit-marker[data-tone="neutral"] { --tone: #d8d8d8; }
.cq-unit-marker[data-kind="event"] .cq-unit-glyph {
  position: relative; width: 30px; height: 30px; margin: -15px 0 0; padding: 7px; box-sizing: border-box; color: var(--tone, #ffb020);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--tone, #ffb020) 70%, transparent)) drop-shadow(0 1px 2px #000);
}
.cq-unit-marker[data-kind="event"] .cq-unit-glyph::before, .cq-unit-marker[data-kind="event"] .cq-unit-glyph::after {
  content: ''; position: absolute; clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
.cq-unit-marker[data-kind="event"] .cq-unit-glyph::before { inset: 0; background: var(--tone, #ffb020); }
.cq-unit-marker[data-kind="event"] .cq-unit-glyph::after { inset: 2px; background: #14100ae8; }
.cq-unit-marker[data-kind="event"] .cq-unit-icon { position: relative; z-index: 1; }
.cq-unit-marker[data-kind="event"][data-tone="hazard"] .cq-unit-glyph { animation: cq-event-pulse 1.1s ease-in-out infinite; }
.cq-unit-marker[data-kind="event"] .cq-unit-label, .cq-unit-marker[data-kind="event-point"] .cq-unit-label {
  color: var(--tone, #ffb020); font-weight: 800; letter-spacing: 1px;
}
.cq-unit-marker[data-kind="event-point"] .cq-unit-glyph {
  width: 20px; height: 20px; margin: -10px 0 0; padding: 3px; box-sizing: border-box; border-radius: 50%;
  color: var(--tone, #ffb020); background: #14100ae0; border: 1.5px solid var(--tone, #ffb020); box-shadow: 0 1px 3px #000a;
}
@keyframes cq-event-pulse {
  50% { filter: drop-shadow(0 0 9px color-mix(in srgb, var(--tone, #ffb020) 85%, transparent)) drop-shadow(0 1px 2px #000); }
}
.cq-interact[data-type="use"] .cq-interact-arc { stroke: #ffb020; }
.cq-interact[data-type="use"] .cq-interact-glyph { color: #ffb020; }
.cq-interact[data-type="use"].is-active { border-color: #ffb020; box-shadow: 0 0 14px #ffb02055; }
.vb-touch-mode .cq-banner[data-icon="true"] { padding-left: 10px; column-gap: 8px; }
.vb-touch-mode .cq-banner[data-icon="true"] .cq-banner-icon { width: 28px; height: 28px; }
.vb-touch-mode .cq-banner-glyph { width: 19px; height: 19px; }
@media (prefers-reduced-motion: reduce) { .cq-unit-marker[data-kind="event"] .cq-unit-glyph { animation: none; } }
/* ---------------------------------------------------------------- FPV drone feed */
/* Design docs/design/conquest/fpv/ (variant C): goggle vignette, analog static that
   thickens with the link's length (FPV_RULES.static), a square reticle and one bottom instrument strip. */
body[data-fpv="true"] :is(#ammo, #grenade-count, #weaponname, #pickaxe-meter, #charge-meter, #medkit-inventory, #medkit-progress, #grenade-readied, #grenade-aim, #healthbar, #crosshair, #hitmarker) { display: none !important; }
.vb-conquest-hud[data-fpv="true"] :is(.cq-minimap, .cq-squad, .cq-order, .cq-radio, .cq-map-hint, .cq-ring, .cq-interact, .cq-weather, .cq-view) { display: none !important; }
.cq-fpv { position: absolute; inset: 0; pointer-events: none; }
/* The video layer: on the picture, under #hud and the Conquest panels. */
.cq-fpv-video { position: fixed; inset: 0; z-index: calc(var(--z-hud, 40) - 1); pointer-events: none; }
.cq-fpv-video[hidden] { display: none; }
.cq-fpv-static {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; image-rendering: pixelated;
}
.cq-fpv-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 72% 70% at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.42) 82%, rgba(0, 0, 0, 0.82) 100%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 3px);
}
.cq-fpv-reticle {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 34px; transform: translate(-50%, -50%);
  background:
    linear-gradient(#f4f7f9, #f4f7f9) left top / 10px 2px no-repeat, linear-gradient(#f4f7f9, #f4f7f9) left top / 2px 10px no-repeat,
    linear-gradient(#f4f7f9, #f4f7f9) right top / 10px 2px no-repeat, linear-gradient(#f4f7f9, #f4f7f9) right top / 2px 10px no-repeat,
    linear-gradient(#f4f7f9, #f4f7f9) left bottom / 10px 2px no-repeat, linear-gradient(#f4f7f9, #f4f7f9) left bottom / 2px 10px no-repeat,
    linear-gradient(#f4f7f9, #f4f7f9) right bottom / 10px 2px no-repeat, linear-gradient(#f4f7f9, #f4f7f9) right bottom / 2px 10px no-repeat,
    radial-gradient(circle, #f4f7f9 0 1.5px, transparent 2px) center / 4px 4px no-repeat;
  filter: drop-shadow(0 0 1px #000c);
}
.cq-fpv-horizon {
  position: absolute; left: 50%; top: 50%; width: 220px; height: 2px; transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent 0 8%, #f4f7f9aa 8% 38%, transparent 38% 62%, #f4f7f9aa 62% 92%, transparent 92%);
  filter: drop-shadow(0 0 1px #000c);
}
.cq-fpv-strip {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: grid; grid-template-columns: auto repeat(5, minmax(86px, auto)); align-items: stretch;
  background: var(--cq-panel); border: 1px solid var(--cq-line); border-radius: 6px; box-shadow: 0 6px 18px #0008;
}
.cq-fpv-id { display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 14px; }
.cq-fpv-icon { width: 30px; height: 30px; color: var(--cq-text); }
.cq-fpv-name { display: grid; gap: 3px; }
.cq-fpv-name b { font-size: 13px; font-weight: 800; letter-spacing: 2px; }
.cq-fpv-name span { font-size: 10px; font-weight: 700; letter-spacing: 1.6px; color: var(--cq-sub); }
.cq-fpv-cell { display: grid; justify-items: center; align-content: center; gap: 4px; padding: 8px 12px; border-left: 1px solid var(--cq-line); }
.cq-fpv-label { font-size: 10px; font-weight: 800; letter-spacing: 1.8px; color: var(--cq-sub); }
.cq-fpv-value { font-size: 20px; font-weight: 800; letter-spacing: 1px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cq-fpv-meter { width: 74px; height: 6px; border: 1px solid var(--cq-line); border-radius: 2px; overflow: hidden; }
.cq-fpv-meter i { display: block; height: 100%; background: var(--cq-contested); }
.cq-fpv-battery[data-tone="low"] .cq-fpv-value { color: var(--cq-contested); }
.cq-fpv-battery[data-tone="critical"] :is(.cq-fpv-value) { color: var(--cq-danger); }
.cq-fpv-battery[data-tone="critical"] .cq-fpv-meter i { background: var(--cq-danger); }
.cq-fpv-bars { display: flex; align-items: flex-end; gap: 4px; height: 22px; }
.cq-fpv-bars i { display: block; width: 7px; border-radius: 1px; background: #ffffff1f; }
.cq-fpv-bars i:nth-child(1) { height: 25%; } .cq-fpv-bars i:nth-child(2) { height: 50%; }
.cq-fpv-bars i:nth-child(3) { height: 75%; } .cq-fpv-bars i:nth-child(4) { height: 100%; }
.cq-fpv-bars i[data-on="true"] { background: var(--cq-own); }
.cq-fpv-signal[data-tone="low"] .cq-fpv-bars i[data-on="true"] { background: var(--cq-contested); }
.cq-fpv-signal[data-tone="critical"] .cq-fpv-bars i[data-on="true"] { background: var(--cq-danger); }
/* Launch and link loss (docs/design/conquest/fpv-handset/, variant A): the feed boots out of static,
   SIGNAL LOST sits on heavy snow with the instruments gone. */
.cq-fpv-blank { position: absolute; inset: 0; background: #05080c; opacity: 0; }
.cq-fpv[data-phase="boot"] :is(.cq-fpv-strip, .cq-fpv-reticle, .cq-fpv-horizon, .cq-fpv-hint) { opacity: var(--fpv-shown, 1); }
.cq-fpv[data-phase="lost"] :is(.cq-fpv-strip, .cq-fpv-reticle, .cq-fpv-horizon, .cq-fpv-hint) { display: none; }
/* No picture, no world markers: the flags and spotted units drop off the lost frame too. */
.vb-conquest-hud:has(.cq-fpv[data-phase="lost"]) :is(.cq-world, .cq-reticles) { visibility: hidden; }
.cq-fpv-lost {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; gap: 6px; padding: 14px 30px 14px 26px; min-width: 250px;
  background: var(--cq-panel); border: 1px solid var(--cq-line); border-left: 6px solid var(--cq-danger); border-radius: 4px;
  box-shadow: 0 8px 22px #000a; color: var(--cq-text);
}
.cq-fpv-lost[hidden] { display: none; }
.cq-fpv-lost b { font-size: 30px; font-weight: 800; letter-spacing: 3px; line-height: 1; }
.cq-fpv-lost span { font-size: 12px; font-weight: 700; letter-spacing: 4px; color: var(--cq-sub); }
.vb-touch-mode .cq-fpv-lost { min-width: 0; padding: 10px 20px 10px 18px; }
.vb-touch-mode .cq-fpv-lost b { font-size: 22px; }
/* The handset up (raise and lower): no crosshair over its screen. */
body[data-fpv-handset="true"] :is(#crosshair, #hitmarker) { display: none !important; }
.cq-fpv-hint {
  position: absolute; left: 50%; bottom: 112px; transform: translateX(-50%); padding: 5px 14px; white-space: nowrap;
  background: var(--cq-panel); border: 1px solid var(--cq-line); border-radius: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.6px; color: var(--cq-text);
}
/* Phones: the strip sits under the ticket bar (the sticks and buttons own the bottom), compact, no hints. */
.vb-touch-mode .cq-fpv-strip { top: calc(max(10px, env(safe-area-inset-top)) + 64px); bottom: auto; grid-template-columns: repeat(5, auto); }
.vb-touch-mode .cq-fpv-id { display: none; }
.vb-touch-mode .cq-fpv-cell { padding: 4px 8px; gap: 2px; }
.vb-touch-mode .cq-fpv-cell:nth-child(2) { border-left: 0; }
.vb-touch-mode .cq-fpv-label { font-size: 8px; letter-spacing: 1px; }
.vb-touch-mode .cq-fpv-value { font-size: 13px; }
.vb-touch-mode .cq-fpv-meter { width: 46px; height: 4px; }
.vb-touch-mode .cq-fpv-bars { height: 14px; gap: 2px; }
.vb-touch-mode .cq-fpv-bars i { width: 4px; }
.vb-touch-mode .cq-fpv-hint { display: none; }