/* Conquest weapon, grenade and health cards and the touch VIEW face.
   Design: docs/design/conquest/hud/ (desktop "unified loadout stack" A, phone
   "three cards with an own-blue accent" A). Every mode shares #ammo,
   #grenade-count and #healthbar (style.css, grenade-pouch.css, medkit.css);
   this sheet restyles them only while the Conquest HUD is up, so other modes
   keep their cards. It loads after those sheets. */

body:has(> .vb-conquest-hud:not([hidden])) {
  --cqc-panel: rgba(9, 15, 20, 0.86); --cqc-line: rgba(140, 166, 186, 0.28); --cqc-own: #4cc3ff;
  --cqc-heal: #7ef29a; --cqc-amber: #ffd166; --cqc-danger: #ff4b4b; --cqc-text: #eef3f6; --cqc-sub: #9fb0bd;
  /* Desktop stack: right edge, bottom edge, gap, column widths. The health row height
     comes from ConquestHud (--cq-health-h, measured), the fallback is one row. */
  --cqc-right: max(22px, env(safe-area-inset-right)); --cqc-bottom: 22px; --cqc-gap: 6px;
  --cqc-width: 408px; --cqc-grenade-w: 136px; --cqc-card-h: 92px;
  --cqc-stack: calc(var(--cqc-bottom) + var(--cq-health-h, 38px) + var(--cqc-gap));
}

/* ---------------------------------------------------------------- desktop */
/* Health row: cross, bar, "74 HP", medkit chip; pain / panic / armour rows span below it. */
html:not(.vb-touch-mode) body:has(> .vb-conquest-hud:not([hidden])) #hud #healthbar {
  left: auto; right: var(--cqc-right); bottom: var(--cqc-bottom); width: var(--cqc-width); min-height: 38px;
  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto auto; align-items: center; column-gap: 10px; row-gap: 6px;
  padding: 8px 10px 8px 12px; background: var(--cqc-panel); border: 1px solid var(--cqc-line); border-radius: 6px;
  clip-path: none; box-shadow: 0 6px 18px #0008, inset 0 1px 0 #ffffff0d;
}
html:not(.vb-touch-mode) body:has(> .vb-conquest-hud:not([hidden])) #healthbar::before {
  content: ''; grid-column: 1; grid-row: 1; width: 14px; height: 14px; margin: 0;
  background: linear-gradient(var(--cqc-heal), var(--cqc-heal)) center / 14px 4px no-repeat,
    linear-gradient(var(--cqc-heal), var(--cqc-heal)) center / 4px 14px no-repeat;
}
html:not(.vb-touch-mode) body:has(> .vb-conquest-hud:not([hidden])) #healthbar .hp-track { grid-column: 2; grid-row: 1; height: 8px; border-radius: 3px; background: #ffffff14; box-shadow: inset 0 0 0 1px #ffffff0a; }
html:not(.vb-touch-mode) body:has(> .vb-conquest-hud:not([hidden])) #healthbar::after {
  content: attr(data-hp) ' HP'; position: static; grid-column: 3; grid-row: 1;
  font: 800 16px/1 var(--font-ui); letter-spacing: 0.5px; font-variant-numeric: tabular-nums; color: var(--cqc-text); white-space: nowrap;
}
html:not(.vb-touch-mode) body:has(> .vb-conquest-hud:not([hidden])) #healthbar > :not(.hp-track, .vb-medkit-inventory, .cq-heal-tick) { grid-column: 1 / -1; }
/* :not([hidden]): the line hides while dead (MedkitHud), which display: flex would override. */
html:not(.vb-touch-mode) body:has(> .vb-conquest-hud:not([hidden])) .vb-medkit-inventory:not([hidden]) {
  grid-column: 4; grid-row: 1; display: flex; align-items: center; gap: 5px; margin: 0;
  font-size: 0; line-height: 1; white-space: nowrap; color: #c9f5d6;
}
html:not(.vb-touch-mode) body:has(> .vb-conquest-hud:not([hidden])) .vb-medkit-inventory::before {
  content: attr(data-key); display: inline-grid; place-items: center; min-width: 18px; height: 17px; padding: 0 4px;
  border: 1px solid var(--cqc-line); border-radius: 3px; background: #ffffff10; font: 800 10px/1 var(--font-ui); color: var(--cqc-text);
}
html:not(.vb-touch-mode) body:has(> .vb-conquest-hud:not([hidden])) .vb-medkit-inventory[data-key=""]::before { display: none; }
html:not(.vb-touch-mode) body:has(> .vb-conquest-hud:not([hidden])) .vb-medkit-inventory::after { content: attr(data-compact); font: 700 10px/1 var(--font-ui); letter-spacing: 1px; }
html:not(.vb-touch-mode) body:has(> .vb-conquest-hud:not([hidden])) .vb-medkit-inventory.is-spent { color: var(--cqc-sub); }
/* The '+5 HP' heal tick floats left of the row, in the open. */
html:not(.vb-touch-mode) body:has(> .vb-conquest-hud:not([hidden])) #healthbar .cq-heal-tick { right: calc(100% + 8px); bottom: 8px; }

/* Weapon card: name and trigger tag on top, rifle art left, magazine / spares right. */
html:not(.vb-touch-mode) body:has(> .vb-conquest-hud:not([hidden])) #ammo {
  right: calc(var(--cqc-right) + var(--cqc-grenade-w) + var(--cqc-gap)); bottom: var(--cqc-stack);
  width: calc(var(--cqc-width) - var(--cqc-grenade-w) - var(--cqc-gap)); min-width: 0; height: var(--cqc-card-h);
  align-items: flex-end; justify-content: flex-end; gap: 6px; padding: 30px 14px 10px 108px;
  background: var(--cqc-panel); border: 1px solid var(--cqc-line); border-radius: 6px; clip-path: none;
  box-shadow: 0 6px 18px #0008, inset 0 1px 0 #ffffff0d;
}
html:not(.vb-touch-mode) body:has(> .vb-conquest-hud:not([hidden])) #weapon-icon { left: 10px; bottom: 10px; width: 90px; height: 48px; filter: brightness(1.05) drop-shadow(0 2px 3px #000c); }
html:not(.vb-touch-mode) body:has(> .vb-conquest-hud:not([hidden])) #ammo #weaponname {
  left: 12px; right: 70px; top: 10px; bottom: auto; overflow: hidden; text-overflow: ellipsis;
  font: 800 13px/1 var(--font-ui); letter-spacing: 1.6px; color: var(--cqc-text); text-shadow: none;
}
html:not(.vb-touch-mode) body:has(> .vb-conquest-hud:not([hidden])) #ammo::after {
  content: attr(data-fire-mode); position: absolute; right: 10px; top: 7px; padding: 2px 6px 1px; text-transform: uppercase;
  border: 1px solid var(--cqc-amber); border-radius: 3px; font: 800 10px/1.2 var(--font-ui); letter-spacing: 1px; color: var(--cqc-amber);
}
html:not(.vb-touch-mode) body:has(> .vb-conquest-hud:not([hidden])) #ammo[data-fire-mode=""]::after { display: none; }
html:not(.vb-touch-mode) body:has(> .vb-conquest-hud:not([hidden])) #ammocount { font-size: 46px; line-height: 0.85; font-weight: 800; text-shadow: none; }
html:not(.vb-touch-mode) body:has(> .vb-conquest-hud:not([hidden])) .vb-ammo-sep, html:not(.vb-touch-mode) body:has(> .vb-conquest-hud:not([hidden])) #ammoreserve { font-size: 18px; font-weight: 700; color: var(--cqc-sub); }

/* Grenade tile right of the weapon card: key, icon, count; name; pouch dots and key. */
html:not(.vb-touch-mode) body:has(> .vb-conquest-hud:not([hidden])) #grenade-count {
  right: var(--cqc-right); bottom: var(--cqc-stack); width: var(--cqc-grenade-w); min-width: 0; height: var(--cqc-card-h);
  grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 30px auto auto; align-content: center;
  column-gap: 6px; row-gap: 6px; padding: 8px 10px 9px; background: var(--cqc-panel); border-radius: 6px;
  box-shadow: 0 6px 18px #0008, inset 0 1px 0 #ffffff0d;
}
html:not(.vb-touch-mode) body:has(> .vb-conquest-hud:not([hidden])) .vb-grenade-key { grid-column: 1; grid-row: 1; }
html:not(.vb-touch-mode) body:has(> .vb-conquest-hud:not([hidden])) .vb-grenade-card-icon { grid-column: 2; grid-row: 1; justify-self: start; width: 28px; height: 28px; }
html:not(.vb-touch-mode) body:has(> .vb-conquest-hud:not([hidden])) .vb-grenade-ammo { grid-column: 3; grid-row: 1; font: 800 20px/1 var(--font-ui); }
html:not(.vb-touch-mode) body:has(> .vb-conquest-hud:not([hidden])) .vb-grenade-name { grid-column: 1 / -1; grid-row: 2; font-size: 10px; letter-spacing: 1px; }
html:not(.vb-touch-mode) body:has(> .vb-conquest-hud:not([hidden])) .vb-grenade-dots { grid-column: 1 / 3; grid-row: 3; gap: 4px; }
html:not(.vb-touch-mode) body:has(> .vb-conquest-hud:not([hidden])) .vb-grenade-pouch { grid-column: 3; grid-row: 3; }
html:not(.vb-touch-mode) body:has(> .vb-conquest-hud:not([hidden])) .vb-grenade-flash { left: 8px; right: 8px; top: 44px; }

/* Charge, heat and fuel meter (LONGARC, minigun, flamethrower) over the weapon card. */
html:not(.vb-touch-mode) body:has(> .vb-conquest-hud:not([hidden])) #charge-meter { right: calc(var(--cqc-right) + var(--cqc-grenade-w) + var(--cqc-gap) + 4px); bottom: calc(var(--cqc-stack) + var(--cqc-card-h) + 8px); }

/* Seated: the vehicle panel takes the weapon and grenade cards' place, on the health row. */
html:not(.vb-touch-mode) body:has(> .vb-conquest-hud:not([hidden])) .vb-conquest-hud .cq-vehicle { bottom: var(--cqc-stack); width: var(--cqc-width); }
/* Support mortar fire control: on the vehicle card (its height measured into --cq-vehicle-h by ConquestHud). */
html:not(.vb-touch-mode) body:has(> .vb-conquest-hud:not([hidden])) .vb-conquest-hud .cq-mortar {
  bottom: calc(var(--cqc-stack) + var(--cq-vehicle-h, 156px) + var(--cqc-gap));
}

/* Tank driver periscope: its console fills the bottom centre, so the health row returns
   to the bottom left and the minimap stands on it again (ConquestHud --cq-floor). */
html:not(.vb-touch-mode) body:has(> .vb-conquest-hud[data-vehicle-view="driver"]:not([hidden])) #hud #healthbar {
  left: max(22px, env(safe-area-inset-left)); right: auto; width: 240px;
}

/* ------------------------------------------------------------------ touch */
/* Phones keep the touch layout (top row under the ticket bar); the cards take
   the Conquest panel, rounded corners and an own-blue left accent. */
.vb-touch-mode body:has(> .vb-conquest-hud:not([hidden])) #hud :is(#healthbar, #ammo), .vb-touch-mode body:has(> .vb-conquest-hud:not([hidden])) #grenade-count {
  background: rgba(9, 15, 20, 0.8);
  box-shadow: inset 2px 0 0 var(--cqc-own), inset 0 0 0 1px var(--cqc-line), 0 4px 12px #0006;
}
.vb-touch-mode body:has(> .vb-conquest-hud:not([hidden])) #healthbar::before {
  padding-left: 13px; color: var(--cqc-text); font-weight: 800;
  background: linear-gradient(var(--cqc-heal), var(--cqc-heal)) 0 50% / 9px 3px no-repeat,
    linear-gradient(var(--cqc-heal), var(--cqc-heal)) 3px 50% / 3px 9px no-repeat;
}
.vb-touch-mode body:has(> .vb-conquest-hud:not([hidden])) #healthbar::after { font: 800 13px/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.vb-touch-mode body:has(> .vb-conquest-hud:not([hidden])) #healthbar .hp-track { border-radius: 2px; background: #ffffff14; }
.vb-touch-mode body:has(> .vb-conquest-hud:not([hidden])) #ammo #weaponname { color: var(--cqc-sub); }
.vb-touch-mode body:has(> .vb-conquest-hud:not([hidden])) #ammocount { font-weight: 800; }

/* Health fill in both layouts: heal green, red below 30 HP (.critical). */
body:has(> .vb-conquest-hud:not([hidden])) #hpfill { background: linear-gradient(90deg, #3fbf6b, var(--cqc-heal)); background-size: 100% 100%; border-radius: inherit; transition: width 200ms; }
body:has(> .vb-conquest-hud:not([hidden])) #healthbar.critical #hpfill { background: linear-gradient(90deg, #b8242a, var(--cqc-danger)); }
body:has(> .vb-conquest-hud:not([hidden])) #healthbar.critical::after { color: var(--cqc-danger); }
body:has(> .vb-conquest-hud:not([hidden])) #healthbar.critical::before { --cqc-heal: var(--cqc-danger); }

/* VIEW (touch, seated): camera glyph over the active view's name (data-view from touch-controls). */
/* :not(.is-hidden): display: grid must not outrank touch-controls' hide (spectating, result screen). */
.vb-touch-vehicleView[data-view]:not([data-view=""]):not(.is-hidden) {
  display: grid; place-items: end center; padding: 0 2px 6px; font: 800 8px/1 var(--font-ui); letter-spacing: 0.4px; white-space: nowrap;
}
.vb-touch-vehicleView[data-view]:not([data-view=""])::before {
  content: ''; position: absolute; left: 50%; top: 8px; width: 18px; height: 13px; margin-left: -9px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 13'%3E%3Cpath d='M6 0h6l1.5 2H16a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h2.5zM9 3.6a3.4 3.4 0 1 0 0 6.8 3.4 3.4 0 0 0 0-6.8z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 13'%3E%3Cpath d='M6 0h6l1.5 2H16a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h2.5zM9 3.6a3.4 3.4 0 1 0 0 6.8 3.4 3.4 0 0 0 0-6.8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Phone portrait: VIEW (seated) or MORTAR (on foot) stands under MAP, SPOT and COMMS (270 + 44 px), where the out-of-bounds countdown starts; the countdown steps below it. */
@media (orientation: portrait) {
  .vb-touch-mode body:has(:is(.vb-touch-vehicleView, .vb-touch-mortar):not(.is-hidden)) .cq-restricted { top: max(calc(50% - 168px), calc(max(10px, env(safe-area-inset-top)) + 322px)); }
}