/* ════════════════════════════════════════════════════════════════════
   IGLify — Tactical Brief
   Side-reactive design system. Lime retired (2026-05-11).
   The accent flips with the CS2 side: T = warm amber, CT = cool blue,
   neutral = desaturated steel.
   ──────────────────────────────────────────────────────────────────── */

:root {
  /* ── Typography ── */
  --font-display: 'Onest', -apple-system, system-ui, sans-serif;
  --font-body: var(--font-display);
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* ── Spatial scale (8pt grid) ── */
  --s-0: 4px;
  --s-1: 8px;
  --s-2: 12px;
  --s-3: 16px;
  --s-4: 20px;
  --s-5: 28px;
  --s-6: 40px;
  --s-7: 56px;
  --s-8: 80px;

  /* ── Surface (cool dark, slightly more neutral than before) ── */
  --ink:        #0A0B10;
  --ink-deep:   #05060A;
  --surface-1:  #0F1218;
  --surface-2:  #141822;
  --surface-3:  #1A1F2A;
  --surface-4:  #232838;
  --surface-5:  #2C3243;

  /* ── Hairlines / structural rules ── */
  --line-1: rgba(255, 255, 255, 0.04);
  --line-2: rgba(255, 255, 255, 0.07);
  --line-3: rgba(255, 255, 255, 0.12);
  --line-4: rgba(255, 255, 255, 0.20);
  --line-strong: rgba(255, 255, 255, 0.32);

  /* ── Text ── */
  --bone:   #EFF2F6;
  --bone-2: #CDD2DB;
  --bone-3: #8B919E;
  --bone-4: #5C606B;
  --bone-5: #3F424B;

  /* ── Side tokens (always static — used where BOTH sides appear) ── */
  --ct: #5BB7E8;
  --ct-deep: #2C7AAB;
  --ct-haze: rgba(91, 183, 232, 0.10);
  --ct-glow: rgba(91, 183, 232, 0.45);

  --t: #FFA940;
  --t-deep: #C77819;
  --t-haze: rgba(255, 169, 64, 0.10);
  --t-glow: rgba(255, 169, 64, 0.50);

  /* ── Functional ── */
  --vital:  #6FE07A;
  --warn:   #F5C518;
  --danger: #FF5169;

  /* ── Default accent (neutral mode — desaturated steel) ── */
  --accent:       #8E94A3;
  --accent-deep:  #5B606C;
  --accent-haze:  rgba(142, 148, 163, 0.10);
  --accent-glow:  rgba(142, 148, 163, 0.34);
  --accent-text:  var(--ink-deep);

  /* ── Motion ── */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --motion-fast: 140ms;
  --motion-base: 220ms;
  --motion-slow: 420ms;

  /* ── Radii ── */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* ── Shadow / depth ── */
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 6px 22px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 18px 48px rgba(0, 0, 0, 0.55);

  /* ── Layout constants ── */
  --topbar-h: clamp(56px, 4vh + 32px, 80px);
  --panel-radius: var(--r-lg);

  /* ── Backwards-compat legacy tokens (some code reads --lime / --ash / etc.) ── */
  --lime: var(--accent);
  --lime-glow: var(--accent-glow);
  --hairline: var(--line-2);
  --hairline-strong: var(--line-3);
  --hairline-bright: var(--line-4);
  --ash: var(--bone-3);
  --label: var(--bone-3);
  --bone-mid: var(--bone-2);
  --bone-dim: var(--bone-3);
  --bone-soft: var(--bone-4);
}

/* ══════════════════════════════════════════
   SIDE-REACTIVE FLIP
   The whole accent palette pivots from one token.
   ────────────────────────────────────────── */
body[data-side="T"] {
  --accent:      var(--t);
  --accent-deep: var(--t-deep);
  --accent-haze: var(--t-haze);
  --accent-glow: var(--t-glow);
  --accent-text: #1A0F00;
}
body[data-side="CT"] {
  --accent:      var(--ct);
  --accent-deep: var(--ct-deep);
  --accent-haze: var(--ct-haze);
  --accent-glow: var(--ct-glow);
  --accent-text: #001620;
}
/* body without data-side or [data-side="neutral"] keeps the gray default */

/* ══════════════════════════════════════════
   RESET + BASE
   ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  font-size: clamp(13px, 0.7vw + 8px, 16px); /* fluid root — drives clamps everywhere */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--bone);
  background: var(--ink);
  /* Subtle atmospheric vignette — anchors the eye without distracting */
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 255, 255, 0.025), transparent 70%),
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(0, 0, 0, 0.4), transparent 60%);
  background-attachment: fixed;
  min-height: 100vh;
  font-feature-settings: "ss01" on, "cv11" on;
  overflow-x: hidden;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ol, ul { list-style: none; }

::selection { background: var(--accent); color: var(--accent-text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }

/* Monospace utility — slashed zero + tabular alignment */
.mono,
.value.mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" on, "zero" on, "ss01" on, "cv11" on;
}

/* Tiny mono label utility (Bloomberg-style data tags) */
.label,
.eco-label,
.topbar .label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-3);
}

/* ══════════════════════════════════════════
   LAYOUT — main grid
   1080p-first: fixed sidebars, fluid middle.
   Each column is its own scroll container so
   nothing critical hides off-screen.
   ────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns:
    minmax(280px, 320px)
    minmax(0, 1fr)
    minmax(320px, 400px);
  gap: var(--s-3);
  padding: var(--s-3) var(--s-3);
  padding-top: calc(var(--topbar-h) + var(--s-3));
  min-height: 100vh;
  max-width: 1920px;
  margin: 0 auto;
  /* Total height = full viewport - topbar; panels scroll within */
  height: 100vh;
  overflow: hidden;
}

@media (min-width: 2200px) {
  .grid {
    grid-template-columns: 360px 1fr 440px;
    gap: var(--s-4);
    padding: var(--s-4);
    padding-top: calc(var(--topbar-h) + var(--s-4));
    max-width: 2400px;
  }
}
@media (max-width: 1365px) {
  .grid {
    grid-template-columns: 260px 1fr 300px;
    gap: var(--s-2);
    padding: var(--s-2);
    padding-top: calc(var(--topbar-h) + var(--s-2));
  }
}

.panel {
  position: relative;
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--line-2);
  border-radius: var(--panel-radius);
  padding: var(--s-3) var(--s-3) var(--s-4);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-4) transparent;
}
.panel::-webkit-scrollbar { width: 8px; }
.panel::-webkit-scrollbar-track { background: transparent; }
.panel::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: 4px; }
.panel::-webkit-scrollbar-thumb:hover { background: var(--surface-5); }

/* Signature element: vertical accent rule on the left edge of every panel.
   Pulses subtly when state is live. */
.panel::before {
  content: "";
  position: absolute;
  inset: var(--s-3) auto var(--s-4) 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  opacity: 0.5;
  transition: opacity var(--motion-base) var(--ease);
}
body[data-phase="live"] .panel::before {
  opacity: 1;
  animation: rulePulse 3s ease-in-out infinite;
}
@keyframes rulePulse {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 1.0; }
}

/* ══════════════════════════════════════════
   PANEL TITLES
   Section headers with side-accent dot + thin underline.
   No more numerated "01 /" labels.
   ────────────────────────────────────────── */
.panel-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-2);
  display: flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-2) 0 var(--s-1);
  border-bottom: 1px solid var(--line-2);
  margin-bottom: var(--s-1);
  position: relative;
}
.panel-title::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  border-radius: 1px;
  transform: rotate(45deg);
  flex-shrink: 0;
}
.panel-title:not(:first-child) { margin-top: var(--s-2); }

/* The eco-title-row variant: title on left, action button on right */
.eco-title-row {
  justify-content: space-between;
}
.eco-title-row > span:first-child { display: inline-flex; align-items: center; gap: var(--s-1); }
.eco-reset-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--bone-3);
  background: transparent;
  border: 1px solid var(--line-3);
  padding: 4px 8px;
  border-radius: var(--r-xs);
  transition: all var(--motion-fast) var(--ease);
}
.eco-reset-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-haze);
}

/* ══════════════════════════════════════════
   TOPBAR — pro broadcast scoreboard
   Fixed across the top, sized fluidly.
   ────────────────────────────────────────── */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  min-height: var(--topbar-h);
  background: linear-gradient(180deg,
    rgba(10, 11, 16, 0.96),
    rgba(10, 11, 16, 0.88)
  );
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 6px var(--s-3);
  z-index: 100;
  /* Allow vertical overflow ONLY for the bomb timer (it's bigger than the bar). */
  overflow: visible;
}

.topbar::after {
  /* Thin pulsing accent rule along the bottom edge */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.6;
}

.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: 1 1 0;
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}
.topbar-right {
  justify-content: flex-end;
}

.topbar .label {
  font-size: 9px;
  letter-spacing: 0.16em;
}
.topbar .value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(13px, 0.5vw + 11px, 16px);
  color: var(--bone);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 14ch;
}
.topbar .value.mono {
  font-family: var(--font-mono);
  font-weight: 600;
}

/* Logo slot — drop the IGLify SVG here in HTML */
.topbar-logo {
  display: inline-flex;
  align-items: center;
  height: 28px;
  margin-right: var(--s-2);
  color: var(--bone);
}
.topbar-logo svg { height: 100%; width: auto; }

/* ── Score block ── */
/* Layout: [CT-team] [sep] [T-team] all on one horizontal row, centered.
   Each team is its own grid (label-row, value-row) so both labels sit
   ABOVE the values regardless of HTML order. Phase + bomb timers float
   to the right of the score within the same row. */
.topbar-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  flex: 0 0 auto;
  position: relative;
}

.score-team {
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  align-items: end;
  padding: 0 4px 4px;
  position: relative;
  gap: 0;
}
/* CT HTML order: label, value → label naturally on row 1.
   T HTML order:  value, label → force label to row 1 via `order`.
   This makes both teams visually symmetric: label-on-top, value-below. */
.score-team .label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1;
  order: 1;
}
.score-team .value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(24px, 1.6vw + 10px, 40px);
  line-height: 1;
  color: var(--bone);
  letter-spacing: -0.04em;
  order: 2;
}
.score-team::after {
  /* Side-color underline rule under the value */
  content: "";
  position: absolute;
  bottom: 0;
  left: 4px; right: 4px;
  height: 2px;
  border-radius: 1px;
}
.score-team.ct .label { color: var(--ct); }
.score-team.t  .label { color: var(--t);  }
.score-team.ct::after { background: var(--ct); box-shadow: 0 0 12px var(--ct-glow); }
.score-team.t::after  { background: var(--t);  box-shadow: 0 0 12px var(--t-glow);  }

.score-sep {
  width: 4px; height: 4px;
  background: var(--bone-4);
  border-radius: 50%;
  align-self: end;
  margin-bottom: 14px;
  flex-shrink: 0;
}

/* Phase timer — small pill next to the score */
.phase-timer {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  margin-left: var(--s-1);
  flex-shrink: 0;
}
.phase-timer-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--bone-3);
}
.phase-timer-value {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--bone);
}
.phase-timer[data-phase="freezetime"] { border-color: var(--ct-deep); }
.phase-timer[data-phase="freezetime"] .phase-timer-label { color: var(--ct); }
.phase-timer[data-phase="live"]       { border-color: var(--accent-deep); }
.phase-timer[data-phase="live"] .phase-timer-label { color: var(--accent); }

/* ══════════════════════════════════════════
   BOMB TIMER — pro broadcast graphic
   Conic-gradient ring depletes from 100% → 0%.
   Set --bomb-pct (0..100) from app.js per tick.
   ────────────────────────────────────────── */
.bomb-timer {
  --bomb-color: #FF5169;
  --bomb-pct: 100;
  /* Sits in topbar-right as the FIRST item, just before the MAPA/RUNDA/FAZA
     chips. Compact enough not to inflate the topbar height. */
  margin-right: var(--s-2);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(52px, 2.4vw + 24px, 64px);
  height: clamp(52px, 2.4vw + 24px, 64px);
  border-radius: 50%;
  flex-shrink: 0;
  background:
    conic-gradient(
      from -90deg,
      var(--bomb-color) calc(var(--bomb-pct) * 1%),
      rgba(255, 255, 255, 0.06) 0
    );
  position: relative;
  isolation: isolate;
  filter: drop-shadow(0 0 18px rgba(255, 81, 105, 0.32));
  transition: filter var(--motion-base) var(--ease);
}
.bomb-timer::before {
  /* Inner disk — makes the conic become a ring */
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--surface-1), var(--ink) 70%);
  z-index: -1;
}
.bomb-timer::after {
  /* "C4" tiny label under the number */
  content: "C4";
  position: absolute;
  bottom: 12%;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--bone-3);
}
.bomb-icon { display: none; }
.bomb-timer-value {
  font-family: var(--font-mono);
  font-size: clamp(18px, 1.2vw + 8px, 22px);
  font-weight: 700;
  line-height: 1;
  color: var(--bone);
  letter-spacing: -0.04em;
  margin-top: -2px;
}
/* Stage colors — toggled by [data-stage] on the element from app.js */
.bomb-timer[data-stage="normal"]   { --bomb-color: var(--vital); filter: drop-shadow(0 0 16px rgba(111, 224, 122, 0.28)); }
.bomb-timer[data-stage="warn"]     { --bomb-color: var(--warn);  filter: drop-shadow(0 0 18px rgba(245, 197, 24, 0.30)); }
.bomb-timer[data-stage="critical"] { --bomb-color: var(--danger); filter: drop-shadow(0 0 24px rgba(255, 81, 105, 0.45)); animation: bombCritical 0.6s ease-in-out infinite; }
@keyframes bombCritical {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

/* ── Round / map info chips ── */
.round-info {
  display: inline-flex;
  flex-direction: column;
  gap: 0;
  padding: 2px 8px;
  border-left: 1px solid var(--line-2);
  min-width: 0;
}
.round-info:first-of-type { border-left: 0; }
.round-info .label { letter-spacing: 0.16em; line-height: 1; }
.round-info .value { font-size: clamp(13px, 0.5vw + 10px, 17px); line-height: 1.2; }
.round-info .value.mono { letter-spacing: -0.02em; }

/* ── GSI status badge ── */
.gsi-status-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-2);
  transition: all var(--motion-fast) var(--ease);
}
.gsi-status-btn:hover { border-color: var(--accent); color: var(--bone); }
.gsi-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--bone-4);
  flex-shrink: 0;
  transition: background var(--motion-base) var(--ease),
              box-shadow var(--motion-base) var(--ease);
}
/* app.js sets data-kind = pending|no-config|configured|idle|live. CSS used to
   read data-state which never matched — green-when-live was broken. Full
   palette now reflects every status the gsiStatus() function emits. */
.gsi-dot[data-kind="live"] {
  background: var(--vital);
  box-shadow: 0 0 10px var(--vital), 0 0 20px rgba(111, 224, 122, 0.45);
  animation: gsiLivePulse 2s ease-in-out infinite;
}
.gsi-dot[data-kind="idle"] {
  background: var(--warn);
  box-shadow: 0 0 8px rgba(245, 197, 24, 0.45);
}
.gsi-dot[data-kind="configured"] {
  background: var(--warn);
  box-shadow: 0 0 6px rgba(245, 197, 24, 0.30);
  opacity: 0.7;
}
.gsi-dot[data-kind="no-config"] {
  background: var(--danger);
  box-shadow: 0 0 8px rgba(255, 81, 105, 0.45);
}
.gsi-dot[data-kind="pending"] {
  background: var(--bone-4);
  animation: gsiPulse 1.4s ease-in-out infinite;
}
.gsi-dot.on  { background: var(--vital); box-shadow: 0 0 10px var(--vital); }
.gsi-dot.off { background: var(--bone-4); }

@keyframes gsiPulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.0); }
}
@keyframes gsiLivePulse {
  0%, 100% { box-shadow: 0 0 10px var(--vital), 0 0 20px rgba(111, 224, 122, 0.45); }
  50%      { box-shadow: 0 0 14px var(--vital), 0 0 28px rgba(111, 224, 122, 0.65); }
}

/* Status badge text adopts the kind color on live for an obvious "green" signal */
.gsi-status-btn:has(.gsi-dot[data-kind="live"])    { border-color: rgba(111, 224, 122, 0.50); color: var(--vital); }
.gsi-status-btn:has(.gsi-dot[data-kind="no-config"]) { border-color: rgba(255, 81, 105, 0.40); }

/* ── RESET ROOM button (IGL only) ── */
.reset-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid var(--line-3);
  color: var(--bone-3);
  transition: all var(--motion-fast) var(--ease);
  white-space: nowrap;
}
.reset-btn:hover {
  border-color: var(--danger);
  color: var(--danger);
  background: rgba(255, 81, 105, 0.06);
}

/* ── Role badge (in topbar + roster) ── */
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--surface-3);
  color: var(--bone-2);
  border: 1px solid var(--line-3);
  white-space: nowrap;
}
.role-badge::before {
  content: "";
  width: 5px; height: 5px;
  background: currentColor;
  border-radius: 1px;
  transform: rotate(45deg);
  opacity: 0.85;
}
.role-badge.role-empty { color: var(--bone-4); }
.role-badge.role-entry    { color: #FF8595; background: rgba(255, 81, 105, 0.10); border-color: rgba(255, 81, 105, 0.32); }
.role-badge.role-support  { color: var(--ct); background: rgba(91, 183, 232, 0.10); border-color: rgba(91, 183, 232, 0.32); }
.role-badge.role-lurker   { color: #D5B0FF; background: rgba(176, 122, 224, 0.12); border-color: rgba(176, 122, 224, 0.32); }
.role-badge.role-awp      { color: var(--vital); background: rgba(111, 224, 122, 0.10); border-color: rgba(111, 224, 122, 0.32); }
.role-badge.role-igl {
  color: var(--accent-text);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 800;
}

/* ══════════════════════════════════════════
   TEAM STRIP — horizontal roster pinned below the topbar.
   Permanently visible (never scrolls off), full viewport width.
   Frees left panel vertical space for both economy blocks at 1080p.
   ────────────────────────────────────────── */
:root {
  --team-strip-h: 78px;
}
@media (max-width: 1365px) {
  :root { --team-strip-h: 70px; }
}

.team-strip {
  position: fixed;
  top: var(--topbar-h);
  left: 0; right: 0;
  z-index: 99;
  height: var(--team-strip-h);
  padding: 8px var(--s-3);
  background: linear-gradient(180deg, rgba(10, 11, 16, 0.96), rgba(10, 11, 16, 0.88));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  max-width: 1920px;
  margin: 0 auto;
}
.team-strip::after {
  /* Thin pulsing accent rule along the bottom edge — same signature as topbar */
  content: "";
  position: absolute;
  left: var(--s-3); right: var(--s-3); bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.4;
}
.team-strip-title {
  flex: 0 0 auto;
  align-self: center;
  margin: 0 !important;
  padding: 0 var(--s-2) 0 0 !important;
  border: none !important;
  border-right: 1px solid var(--line-2) !important;
  height: 60%;
  display: flex;
  align-items: center;
}

/* Push main grid below BOTH topbar and team-strip */
.grid {
  padding-top: calc(var(--topbar-h) + var(--team-strip-h) + var(--s-3)) !important;
}
@media (min-width: 2200px) {
  .grid { padding-top: calc(var(--topbar-h) + var(--team-strip-h) + var(--s-4)) !important; }
}
@media (max-width: 1365px) {
  .grid { padding-top: calc(var(--topbar-h) + var(--team-strip-h) + var(--s-2)) !important; }
}

/* ── Player roster ── */
.players {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--s-1);
}

/* Horizontal mode inside .team-strip: 5-COLUMN GRID so every player slot
   always claims exactly 20% of the strip width, regardless of how many
   players have joined. Previously used flex: 1 1 0 which made one player
   eat the whole strip. With the grid, missing players show as "WAIT"
   placeholder tiles (rendered by app.js renderPlayers padding to 5). */
.team-strip .players {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-1);
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
  align-items: center;            /* center tiles vertically inside the strip */
}
/* Compact tile internals for the strip context — keeps everything in 2 rows
   (nick row + meta row) so 78px strip fits the whole card. Nade chips
   collapse INTO the meta row instead of a third dedicated row. */
.team-strip .player-row {
  min-width: 0;
  min-height: 0;
  height: 62px;
  padding: 6px 8px;
  grid-template-rows: auto auto;
  gap: 2px var(--s-1);
}
.team-strip .player-row.me { padding-left: 7px; }
.team-strip .player-row .player-main {
  gap: 5px;
  font-size: 12px;
}
.team-strip .player-row .p-nick {
  font-size: 12px;
  font-weight: 700;
}
.team-strip .player-row .igl-badge,
.team-strip .player-row .faceit-pill {
  transform: scale(0.88);
  transform-origin: left center;
}
.team-strip .player-row .player-meta {
  /* Force into row 2, column 1 (left side of bottom row) */
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow: hidden;
  min-width: 0;
}
.team-strip .player-row .role-badge {
  font-size: 9px;
  padding: 2px 6px;
  letter-spacing: 0.12em;
}
.team-strip .player-row .player-meta .mono {
  font-size: 10px;
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* Nades go into row 2, column 2 — RIGHT side of meta, NOT a new row */
.team-strip .player-row .player-nades {
  grid-column: 2;
  grid-row: 2;
  margin-top: 0;
  display: inline-flex;
  gap: 3px;
  flex-shrink: 0;
  justify-self: end;
}
.team-strip .player-row .nade {
  font-size: 8px;
  padding: 1px 4px;
  min-width: 22px;
  height: 14px;
  letter-spacing: 0.04em;
}
/* ── Faceit lifetime panel — floating popover anchored to clicked tile ──
   Hidden by default; renderPlayers() adds .has-lifetime to the row when the
   user clicks the ELO pill. The .faceit-lifetime element is then revealed
   as a popover positioned absolutely below the tile, NOT inside it (the tile
   is too compact). The clicked tile is raised in z-index so the popover
   isn't clipped by neighbouring tiles. */
.team-strip .player-row .faceit-lifetime { display: none; }
.team-strip .player-row.has-lifetime {
  z-index: 10;
  position: relative;
  /* Highlight border so user knows which tile they're inspecting */
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-deep);
}
.team-strip .player-row.has-lifetime .faceit-lifetime {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-1);
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  z-index: 11;
  padding: var(--s-2);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  border: 1px solid var(--accent-deep);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  /* Pointing triangle up toward the tile */
}
.team-strip .player-row.has-lifetime .faceit-lifetime::before {
  content: "";
  position: absolute;
  top: -6px;
  left: var(--s-3);
  width: 10px; height: 10px;
  background: linear-gradient(135deg, var(--surface-3), var(--surface-3) 50%, transparent 50%);
  border-top: 1px solid var(--accent-deep);
  border-left: 1px solid var(--accent-deep);
  transform: rotate(45deg);
}
.faceit-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 6px;
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  text-align: center;
}
.faceit-stat .v {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 800;
  color: var(--bone);
  line-height: 1;
  letter-spacing: -0.02em;
}
.faceit-stat .l {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--bone-3);
  text-transform: uppercase;
}
.faceit-stat.accent {
  background: linear-gradient(135deg, var(--accent-haze), var(--surface-1));
  border-color: var(--accent-deep);
}
.faceit-stat.accent .v { color: var(--accent); }
/* Loading + error states for the lifetime popover */
.faceit-lifetime.is-loading,
.faceit-lifetime.is-error {
  grid-template-columns: 1fr !important;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--bone-3);
  padding: var(--s-3);
  letter-spacing: 0.06em;
}
.faceit-lifetime.is-loading::before {
  content: "● ";
  color: var(--accent);
  animation: gsiPulse 1.2s ease-in-out infinite;
}
.faceit-lifetime.is-error { color: var(--danger); }

/* Empty slot placeholder — dashed, dim, shows "SLOT N — WAITING".
   Rendered by app.js when fewer than 5 players are in the room. */
.team-strip .player-row.player-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px dashed var(--line-2);
  color: var(--bone-4);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--s-1);
  line-height: 1.4;
  height: 62px;
  min-height: 0;
}
.team-strip .player-row.player-empty::before { content: none; }

/* Fallback when app.js hasn't yet rendered (initial state) */
.team-strip .players li.empty {
  grid-column: 1 / -1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--bone-3);
  background: var(--surface-1);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
  padding: var(--s-2);
}
.player-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px var(--s-2);
  align-items: center;
  padding: var(--s-2);
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  transition: all var(--motion-fast) var(--ease);
  min-height: 56px;
}
.player-row .player-main {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: var(--s-1);
  min-width: 0;
}
.player-row .player-main .p-nick { flex: 1 1 auto; min-width: 0; }
.player-row .player-meta {
  grid-column: 1 / -1;
  grid-row: 2;
}
.player-row:hover {
  border-color: var(--line-3);
  background: var(--surface-2);
}
.player-row.me {
  background: linear-gradient(90deg, var(--accent-haze), transparent 70%);
  border-color: var(--accent-deep);
  border-left: 2px solid var(--accent);
  padding-left: calc(var(--s-2) - 1px);
}
.player-row.offline { opacity: 0.42; }

/* .player-main = horizontal row of: dot, nick, IGL-badge, faceit-pill.
   Previous rule had `flex-direction: column` (leftover from an earlier
   layout where player-main contained nick stacked over meta). That made
   the inline badges stack vertically in the team strip. Forcing row. */
.player-main { display: flex; flex-direction: row; align-items: center; gap: var(--s-1); min-width: 0; }
.p-nick {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--bone);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--bone-3);
  display: flex;
  align-items: center;
  gap: var(--s-1);
  flex-wrap: nowrap;
}
.player-meta .alive { color: var(--vital); display: inline-flex; align-items: center; gap: 4px; }
.player-meta .alive::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--vital); display: inline-block; }
.player-meta .dead { color: var(--danger); display: inline-flex; align-items: center; gap: 4px; }
.player-meta .dead::before { content: ""; width: 6px; height: 1px; background: var(--danger); display: inline-block; }
/* Nade chips per player — small text pills (SMK / FL / HE / MOL).
   `green` = required + owned, `red` = required but missing, `black` = not
   required by current strat. Inline-flex with explicit min-width so they
   never overlap and stay readable at any width. */
.player-nades {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
  grid-column: 1 / -1;
}
.nade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 5px;
  min-width: 26px;
  height: 16px;
  border-radius: var(--r-xs);
  border: 1px solid transparent;
  white-space: nowrap;
}
.nade.black {
  background: var(--surface-3);
  color: var(--bone-4);
  border-color: var(--line-2);
  opacity: 0.55;
}
.nade.green {
  background: rgba(111, 224, 122, 0.14);
  color: var(--vital);
  border-color: rgba(111, 224, 122, 0.42);
}
.nade.red {
  background: rgba(255, 81, 105, 0.14);
  color: var(--danger);
  border-color: rgba(255, 81, 105, 0.45);
  animation: nadeMissing 1.8s ease-in-out infinite;
}
@keyframes nadeMissing {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.65; }
}

.igl-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent-text);
  background: var(--accent);
  padding: 2px 5px;
  border-radius: var(--r-xs);
}

/* Faceit pill in roster — level badge + ELO number, visually separated.
   Renders as: [ 8 ] 1633 ELO  — the level is a Faceit-orange chip, the
   ELO sits beside it as a small mono number with proper spacing. */
.faceit-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px 2px 2px;
  background: var(--surface-3);
  border: 1px solid var(--line-3);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--motion-fast) var(--ease);
  white-space: nowrap;
  font-family: var(--font-mono);
}
.faceit-pill:hover {
  border-color: var(--accent);
  background: var(--surface-4);
}
.faceit-pill .lvl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: linear-gradient(135deg, #FF5500, #FF8800);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  border-radius: var(--r-xs);
  letter-spacing: 0;
}
.faceit-pill .elo {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--bone-2);
}
/* Per-level coloring on the level chip (Faceit standard gradient buckets) */
.faceit-pill[data-level="1"]  .lvl,
.faceit-pill[data-level="2"]  .lvl,
.faceit-pill[data-level="3"]  .lvl { background: linear-gradient(135deg, #FFFFFF, #E0E0E0); color: #222; }
.faceit-pill[data-level="4"]  .lvl,
.faceit-pill[data-level="5"]  .lvl,
.faceit-pill[data-level="6"]  .lvl,
.faceit-pill[data-level="7"]  .lvl { background: linear-gradient(135deg, #FFC700, #FF9500); color: #1a0f00; }
.faceit-pill[data-level="8"]  .lvl,
.faceit-pill[data-level="9"]  .lvl { background: linear-gradient(135deg, #FF6A00, #FF3300); color: #fff; }
.faceit-pill[data-level="10"] .lvl { background: linear-gradient(135deg, #E50000, #8A0000); color: #fff; }

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.on  { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.dot.off { background: var(--bone-4); }

/* ══════════════════════════════════════════
   ECONOMY PANEL
   ────────────────────────────────────────── */
.eco-grid {
  display: grid;
  gap: var(--s-1);
}
.eco-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--s-1) var(--s-2);
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
}
.eco-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-3);
}
.eco-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 16px;
  color: var(--bone);
  letter-spacing: -0.02em;
}
.eco-stat { /* tooltip wrapper */ position: relative; }

/* MOJA EKO hero — biggest number in the right panel */
.panel-right .eco-row {
  padding: var(--s-2) var(--s-3);
}
.panel-right .eco-value.mono {
  font-size: clamp(20px, 1.2vw + 12px, 28px);
  color: var(--accent);
  text-shadow: 0 0 18px var(--accent-glow);
}

/* Alive/Dead status pill — applied to #myStatus.eco-value when the local
   player's GSI reports health. Replaces the bland default eco-value text
   with a colored pill that maps directly to game state. */
.eco-value.alive {
  color: var(--vital);
  background: rgba(111, 224, 122, 0.10);
  border: 1px solid rgba(111, 224, 122, 0.40);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  position: relative;
  padding-left: 18px;
}
.eco-value.alive::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--vital);
  box-shadow: 0 0 6px var(--vital);
  animation: gsiLivePulse 1.6s ease-in-out infinite;
}
.eco-value.dead {
  color: var(--danger);
  background: rgba(255, 81, 105, 0.10);
  border: 1px solid rgba(255, 81, 105, 0.40);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  position: relative;
  padding-left: 18px;
}
.eco-value.dead::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 1px;
  background: var(--danger);
}

/* Team side pill — #teamSide.eco-value gets .ct-side or .t-side
   when aggregate side is known. Shows as a small CT-blue / T-amber chip. */
.eco-value.ct-side,
.eco-value.t-side {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 3px 10px;
  border-radius: var(--r-xs);
  border: 1px solid transparent;
}
.eco-value.ct-side {
  color: var(--ct);
  background: var(--ct-haze);
  border-color: var(--ct-deep);
  text-shadow: 0 0 12px var(--ct-glow);
}
.eco-value.t-side {
  color: var(--t);
  background: var(--t-haze);
  border-color: var(--t-deep);
  text-shadow: 0 0 12px var(--t-glow);
}

/* ══════════════════════════════════════════
   ENEMY ECONOMY + PREDICTION
   Three stacked sub-blocks:
   1. ENEMY team card  (red rule — them)
   2. MY team card     (side-accent rule — us)
   3. PREDICTION card  (bar + hint, side-accent)
   Optional 4. LIVE card (green dot — appears only when someone is
   dead/spectating and allplayers data populates).
   ────────────────────────────────────────── */
.enemy-eco {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-family: var(--font-display);
}
.enemy-eco .empty {
  color: var(--bone-3);
  font-size: 12px;
  text-align: center;
  padding: var(--s-3) 0;
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
}

/* ── Per-team card (.eco-team-us / .eco-team-enemy) ── */
.eco-team {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px 10px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  overflow: hidden;
}
.eco-team::before {
  /* 2px left rule — red for enemy, side-accent for us */
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 2px;
}
.eco-team-enemy::before { background: var(--danger); }
.eco-team-us::before    { background: var(--accent); }

.eco-team-head {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line-2);
}
.eco-team-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-2);
  flex-grow: 1;
}
.eco-team-enemy .eco-team-label { color: var(--danger); }
.eco-team-us    .eco-team-label { color: var(--accent); }

/* Side pill (CT / T) — small inline tag next to label */
.eco-side-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 2px 6px;
  border-radius: var(--r-xs);
  min-width: 24px;
}
.eco-side-pill.ct-side { background: var(--ct-haze); color: var(--ct); border: 1px solid var(--ct-deep); }
.eco-side-pill.t-side  { background: var(--t-haze);  color: var(--t);  border: 1px solid var(--t-deep);  }

/* Loss-bonus tier counter (T0/T1/T2/T3) — small mono chip */
.eco-tier {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--bone-3);
  padding: 2px 5px;
  background: var(--surface-3);
  border-radius: var(--r-xs);
  letter-spacing: 0.04em;
}

/* Stat grid — 2-column compact layout for ETW / CASH / ASSETS / SURV / L+1 */
.eco-team-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
}
.eco-team-stats .eco-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 2px 0;
  background: none;
  border: none;
  border-radius: 0;
  min-width: 0;
}
.eco-team-stats .eco-stat-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-3);
  flex-shrink: 0;
}
.eco-team-stats .eco-stat-val {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--bone);
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Highlight ETW row — it's the "headline" number for each team */
.eco-team-stats .eco-stat:first-child .eco-stat-val {
  font-size: 14px;
}
.eco-team-enemy .eco-team-stats .eco-stat:first-child .eco-stat-val { color: var(--danger); }
.eco-team-us    .eco-team-stats .eco-stat:first-child .eco-stat-val { color: var(--accent); }

/* ── Prediction card (Bayesian — "FULL BUY 85% + hint") ── */
.enemy-prediction {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: linear-gradient(135deg, var(--accent-haze), transparent 60%),
              linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--accent-deep);
  border-radius: var(--r-md);
}
.predict-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-1);
}
.predict-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-3);
  flex-grow: 1;
}
.predict-verdict {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--bone);
}
.predict-conf {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.predict-bar {
  width: 100%;
  height: 4px;
  background: var(--surface-3);
  border-radius: 2px;
  overflow: hidden;
}
.predict-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--accent-glow);
  transition: width var(--motion-slow) var(--ease-out);
}
.predict-hint {
  font-size: 11px;
  line-height: 1.45;
  color: var(--bone-2);
  font-style: italic;
}

/* Verdict-color variants (kind = full / force / half / eco / pistol / unknown) */
.enemy-prediction.predict-full   .predict-verdict { color: var(--vital); }
.enemy-prediction.predict-force  .predict-verdict { color: var(--warn); }
.enemy-prediction.predict-half   .predict-verdict { color: var(--ct); }
.enemy-prediction.predict-eco    .predict-verdict { color: var(--danger); }
.enemy-prediction.predict-pistol .predict-verdict { color: #D5B0FF; }

/* ── Live measured overlay (only when allplayers data is available) ── */
.enemy-live {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  background: linear-gradient(135deg, rgba(111, 224, 122, 0.06), transparent 60%),
              var(--surface-1);
  border: 1px solid rgba(111, 224, 122, 0.32);
  border-radius: var(--r-md);
}
.enemy-live-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.enemy-live-dot {
  width: 8px; height: 8px;
  background: var(--vital);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--vital);
  animation: liveDotPulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes liveDotPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.enemy-live-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--vital);
  flex-grow: 1;
}
.enemy-live-source {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  color: var(--bone-3);
}
.enemy-live-stats {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.enemy-live-stats .eco-stat {
  flex: 1 1 auto;
  padding: 0;
  background: none;
  border: none;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.enemy-live-guns {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--bone-2);
  padding-top: 4px;
  border-top: 1px dashed var(--line-2);
  letter-spacing: 0.02em;
  word-break: break-all;
}

/* ── Buy recommendation card ── */
.buy-card {
  padding: var(--s-2) var(--s-3);
  background: linear-gradient(135deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-md);
}
.buy-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 4px;
}
.buy-text {
  font-size: 12px;
  color: var(--bone-2);
  line-height: 1.4;
}

/* ══════════════════════════════════════════
   IGL VOTING (panel-left)
   ────────────────────────────────────────── */
.voting {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.vote-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-1);
}
.voting-head {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--bone-3);
  padding: 4px 0;
}
.voting-head strong { color: var(--accent); font-weight: 700; }
.voting-info {
  font-size: 11px;
  color: var(--bone-3);
  font-style: italic;
  padding: 4px 0;
}
.vote-btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line-3);
  color: var(--bone-2);
  border-radius: var(--r-sm);
  transition: all var(--motion-fast) var(--ease);
  text-align: left;
}
.vote-btn:hover {
  border-color: var(--accent);
  color: var(--bone);
  background: var(--accent-haze);
}
.vote-btn.picked {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 800;
}

/* ══════════════════════════════════════════
   ROLES PANEL (assign / IGL only)
   ────────────────────────────────────────── */
.roles-panel {
  background: linear-gradient(135deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.roles-panel.hidden { display: none; }
#rolesList {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.role-row {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: var(--s-2);
  align-items: center;
  padding: 8px var(--s-2);
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  transition: border-color var(--motion-fast) var(--ease);
}
.role-row:hover { border-color: var(--line-3); }
.role-row-nick {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--bone);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Custom-styled <select> — replaces the ugly default browser dropdown.
   Native chevron hidden via appearance:none; custom arrow drawn as inline
   SVG background. Focus + hover use accent for the side-reactive feel. */
.role-row select,
.roles-panel select {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone);
  background-color: var(--surface-3);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%238B919E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding: 7px 30px 7px 12px;
  border: 1px solid var(--line-3);
  border-radius: var(--r-sm);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  transition: all var(--motion-fast) var(--ease);
  width: 100%;
}
.role-row select:hover,
.roles-panel select:hover {
  border-color: var(--accent);
  background-color: var(--surface-4);
}
.role-row select:focus,
.roles-panel select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-haze);
}
.role-row select option {
  background: var(--surface-3);
  color: var(--bone);
  font-family: var(--font-mono);
}
.role-row select option:disabled {
  color: var(--bone-4);
  font-style: italic;
}

.igl-hint {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--bone-3);
  margin-left: var(--s-1);
}

/* ══════════════════════════════════════════
   PLAYBOOK — tactics picker
   Auto-fill grid so every card stays visible.
   ────────────────────────────────────────── */
.playbook-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--bone-3);
  padding: 4px 0;
}
/* Map / side / round-type values shown as accent-colored highlights so they
   stand apart from the surrounding "Mapa · Strona · Typ" labels. */
.playbook-meta span {
  display: inline-block;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  background: var(--accent-haze);
  border-radius: var(--r-xs);
  margin: 0 2px;
}
.map-desc {
  font-size: 12px;
  color: var(--bone-2);
  padding: var(--s-2) var(--s-3);
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-sm);
  line-height: 1.5;
  /* Breathing room before the tactic cards grid — without this the
     description box visually merges with the first row of cards. */
  margin-bottom: var(--s-4);
}
.playbook-list {
  display: grid;
  /* auto-fit so cards expand to fill row when there are few; min 260px
     keeps content legible (role rows need ~240px to read comfortably). */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--s-3);
}
@media (max-width: 1365px) {
  .playbook-list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--s-2);
  }
}
.playbook-list .empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--s-5) 0;
  color: var(--bone-3);
  font-size: 12px;
}

/* ══════════════════════════════════════════
   TACTIC CARD (.strat)
   The renderer emits .strat as the card class (NOT .strat-card).
   Each card is a self-contained briefing with:
     1. Eco badge (top-right corner, color-coded by buy type)
     2. Strat name (display font, 14-16px)
     3. Tag chips (categorical, secondary)
     4. Desc paragraph (3-line clamp)
     5. 5 per-role mini-rows (Entry / Support / Lurker / AWP / IGL)
        with the local user's role highlighted + floated to top
     6. Big full-width PICK button at the bottom
   ────────────────────────────────────────── */
.strat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 12px 10px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  transition: all var(--motion-fast) var(--ease);
  min-height: 280px;
  isolation: isolate;
}
.strat:hover {
  border-color: var(--accent-deep);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.strat::before {
  /* Left accent rule — neutral by default, accent-color when picked.
     Same vertical-rule signature as our other panels. */
  content: "";
  position: absolute;
  top: 12px; bottom: 10px; left: 0;
  width: 2px;
  background: var(--line-3);
  border-radius: 1px;
  transition: background var(--motion-fast) var(--ease);
}
.strat:hover::before { background: var(--accent-deep); }
.strat.selected {
  border-color: var(--accent);
  background:
    linear-gradient(135deg, var(--accent-haze), transparent 55%),
    linear-gradient(180deg, var(--surface-3), var(--surface-1));
  box-shadow:
    0 0 0 1px var(--accent-deep),
    0 12px 36px rgba(0, 0, 0, 0.45),
    0 0 32px var(--accent-glow);
}
.strat.selected::before {
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
  animation: stratPickedPulse 2.2s ease-in-out infinite;
}
@keyframes stratPickedPulse {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}

/* ── Strat header / name ── */
.strat-header {
  display: flex;
  align-items: flex-start;
  padding-right: 78px; /* leave room for the eco-badge in the top-right */
  min-height: 30px;
}
.strat-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--bone);
}
.strat.selected .strat-name { color: var(--accent); }

/* ── Eco badge (FULL BUY / FORCE / HALF / ECO / PISTOL) ── */
.strat-eco-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  padding: 3px 7px;
  border-radius: var(--r-xs);
  text-transform: uppercase;
  background: var(--surface-4);
  color: var(--bone-2);
  border: 1px solid var(--line-3);
  z-index: 2;
}
.strat-eco-badge.eco-full   { background: rgba(111, 224, 122, 0.18); color: var(--vital); border-color: rgba(111, 224, 122, 0.45); }
.strat-eco-badge.eco-force  { background: rgba(245, 197, 24, 0.18);  color: var(--warn);  border-color: rgba(245, 197, 24, 0.45); }
.strat-eco-badge.eco-half   { background: rgba(91, 183, 232, 0.18);  color: var(--ct);    border-color: rgba(91, 183, 232, 0.45); }
.strat-eco-badge.eco-eco    { background: rgba(255, 81, 105, 0.18);  color: var(--danger); border-color: rgba(255, 81, 105, 0.45); }
.strat-eco-badge.eco-pistol { background: rgba(176, 122, 224, 0.18); color: #D5B0FF;      border-color: rgba(176, 122, 224, 0.45); }

/* ── Tag chips (execute / split / fake / rush / mid-control / ...) ── */
.strat-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.strat-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone-3);
  background: transparent;
  padding: 2px 6px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
}
.strat-tag:hover { border-color: var(--line-3); color: var(--bone-2); }

/* ── Description paragraph ── */
.strat-desc {
  font-family: var(--font-display);
  font-size: 11px;
  line-height: 1.5;
  color: var(--bone-2);
  /* 3-line clamp so cards stay similar height — user can read full text
     once the card is picked (briefing hero shows the full version) */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 6px 0;
  border-top: 1px solid var(--line-1);
  border-bottom: 1px solid var(--line-1);
}

/* ── Roles section (5 mini-rows: ENTRY / SUPPORT / LURKER / AWP / IGL) ── */
.strat-roles {
  display: flex;
  flex-direction: column;
  gap: 3px;
  /* My role's row is moved to the top via order:-1 — IGL scans "what
     do I do this round" in the first row, then context for teammates */
}
.strat-role {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 6px;
  padding: 4px 6px;
  background: var(--surface-1);
  border-radius: var(--r-xs);
  border-left: 2px solid transparent;
  font-size: 10px;
  line-height: 1.35;
  transition: background var(--motion-fast) var(--ease);
}
.strat-role-name {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--bone-3);
  align-self: center;
  white-space: nowrap;
}
.strat-role-spot {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--bone-2);
  /* 2-line clamp inside each role row */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* User's own role — pulled to top of the list + accented */
.strat-role.mine {
  order: -1;
  background: var(--accent-haze);
  border-left-color: var(--accent);
  margin-bottom: 4px;
}
.strat-role.mine .strat-role-name { color: var(--accent); font-weight: 800; }
.strat-role.mine .strat-role-spot { color: var(--bone); font-weight: 500; }
.strat-role.mine::before {
  content: "TWOJA ROLA";
  display: block;
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 2px;
  text-transform: uppercase;
}

/* ── PICK button at the bottom ── */
.strat-pick {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 10px 12px;
  background: var(--surface-3);
  border: 1px solid var(--line-3);
  color: var(--bone);
  border-radius: var(--r-sm);
  transition: all var(--motion-fast) var(--ease);
  margin-top: auto;
  width: 100%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.strat-pick::after {
  /* Subtle arrow signifier */
  content: " →";
  display: inline-block;
  transform: translateX(0);
  transition: transform var(--motion-fast) var(--ease);
}
.strat-pick:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
  box-shadow: 0 6px 20px var(--accent-glow);
}
.strat-pick:hover::after {
  transform: translateX(4px);
}
.strat-pick:active {
  transform: translateY(1px);
}
.strat-pick:disabled {
  background: transparent;
  color: var(--bone-4);
  border-color: var(--line-2);
  cursor: not-allowed;
  letter-spacing: 0.14em;
}
.strat-pick:disabled:hover {
  background: transparent;
  box-shadow: none;
}
.strat-pick:disabled::after { content: ""; }

.strat.selected .strat-pick {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
  font-weight: 900;
  box-shadow: 0 0 24px var(--accent-glow), 0 8px 24px rgba(0, 0, 0, 0.3);
}
.strat.selected .strat-pick::after { content: " ✓"; transform: none; }

/* Non-IGL viewer (read-only) — fade the cards slightly to signal they can't pick */
.strat:not(.iglable) { opacity: 0.88; }
.strat:not(.iglable):not(.selected):hover { transform: none; }

/* ══════════════════════════════════════════
   ACTIVE BRIEFING — picked tactic hero card
   ────────────────────────────────────────── */
/* ══════════════════════════════════════════
   ACTIVE BRIEFING — the picked tactic, expanded view
   Renderer emits:
     .picked-top    (header row: name + unpick button)
       .picked-name
       .picked-unpick.mini-btn
     .picked-desc   (full strat description)
     .picked-myrole (only if user has a role)
       .picked-myrole-label
         .picked-myrole-tag
       .picked-myrole-spot
     .picked-roles-label "CALY TEAM:"
     .picked-roles
       .picked-role(.mine)
         .picked-role-name
         .picked-role-spot
   ────────────────────────────────────────── */
.picked {
  position: relative;
  background:
    linear-gradient(135deg, var(--accent-haze), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--accent-deep);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  padding: var(--s-3);
  box-shadow: var(--shadow-2);
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.picked-empty {
  text-align: center;
  color: var(--bone-3);
  font-size: 12px;
  padding: var(--s-3) 0;
}

/* Header row: strat name big on left, "ZMIEŃ PICK" button on right */
.picked-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line-2);
}
.picked-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(18px, 1.2vw + 8px, 26px);
  color: var(--accent);
  line-height: 1.15;
  letter-spacing: -0.015em;
  flex: 1 1 auto;
  min-width: 0;
}
.picked-unpick {
  flex: 0 0 auto;
}

/* Description */
.picked-desc {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.6;
  color: var(--bone-2);
  padding: var(--s-2);
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--accent-deep);
  border-radius: var(--r-sm);
}

/* ── MY ROLE — the hero block ── */
.picked-myrole {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--s-3);
  background:
    linear-gradient(135deg, var(--accent-haze), transparent 80%),
    var(--surface-1);
  border: 1px solid var(--accent-deep);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  position: relative;
}
.picked-myrole::before {
  content: "▸";
  position: absolute;
  top: 12px; right: 14px;
  font-size: 20px;
  color: var(--accent);
  opacity: 0.5;
}
.picked-myrole-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--bone-3);
  text-transform: uppercase;
}
.picked-myrole-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 2px 7px;
  background: var(--accent);
  color: var(--accent-text);
  border-radius: var(--r-xs);
  margin-left: 4px;
}
.picked-myrole-spot {
  font-family: var(--font-display);
  font-size: clamp(14px, 0.7vw + 10px, 18px);
  font-weight: 600;
  color: var(--bone);
  line-height: 1.4;
}

/* ── CALY TEAM list ── */
.picked-roles-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--bone-3);
  text-transform: uppercase;
  padding-top: var(--s-1);
  padding-left: 4px;
}
.picked-roles-label::before {
  content: "▪ ";
  color: var(--accent);
}
.picked-roles {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.picked-role {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: var(--s-2);
  padding: 7px var(--s-2);
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-left: 2px solid transparent;
  border-radius: var(--r-sm);
  transition: all var(--motion-fast) var(--ease);
  align-items: center;
}
.picked-role:hover {
  border-color: var(--line-3);
  background: var(--surface-2);
}
.picked-role-name {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--bone-3);
  text-transform: uppercase;
  align-self: center;
}
.picked-role-spot {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--bone-2);
  line-height: 1.4;
}
/* Local user's role highlighted, but less aggressively than .picked-myrole
   (which already shows MY ROLE separately above) */
.picked-role.mine {
  background: var(--accent-haze);
  border-left-color: var(--accent);
  border-color: var(--accent-deep);
}
.picked-role.mine .picked-role-name { color: var(--accent); font-weight: 800; }
.picked-role.mine .picked-role-spot { color: var(--bone); font-weight: 500; }

/* Legacy classes kept for backwards-compat (some old tests/snapshots use them) */
.picked-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--bone);
  margin-bottom: var(--s-1);
  letter-spacing: -0.015em;
}
.picked-spot {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--bone);
  line-height: 1.35;
  padding: var(--s-2);
  background: var(--surface-1);
  border-radius: var(--r-sm);
  border-left: 2px solid var(--accent);
}
.picked-utility { display: flex; flex-wrap: wrap; gap: 4px; }
.picked-util-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 3px 7px;
  border-radius: var(--r-xs);
  text-transform: uppercase;
  background: var(--surface-3);
  color: var(--bone-2);
  border: 1px solid var(--line-3);
}

/* ══════════════════════════════════════════
   MINI-BTN — small action buttons used in voting + briefing
   ────────────────────────────────────────── */
.mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 14px;
  background: var(--surface-3);
  border: 1px solid var(--line-3);
  color: var(--bone-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--motion-fast) var(--ease);
  white-space: nowrap;
}
.mini-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-haze);
}
.mini-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.mini-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
  font-weight: 800;
}
.mini-btn.primary:hover:not(:disabled) {
  filter: brightness(1.1);
  box-shadow: 0 6px 20px var(--accent-glow);
  color: var(--accent-text);
}

/* ══════════════════════════════════════════
   MIRAGE TACTICAL MAP
   ────────────────────────────────────────── */
.tac-map-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.tac-map,
.tac-map-frame,
.strat-map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  overflow: hidden;
  background: var(--ink-deep);
  isolation: isolate;
}
.strat-map-tag {
  position: absolute;
  top: var(--s-1); left: var(--s-1);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 3px 7px;
  background: rgba(10, 11, 16, 0.78);
  border: 1px solid var(--accent-deep);
  color: var(--accent);
  border-radius: var(--r-xs);
  backdrop-filter: blur(6px);
}
.mirage-map { position: relative; width: 100%; height: 100%; }
.mirage-radar-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  filter: contrast(1.05) brightness(0.92);
}
.mirage-overlay {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.strat-map-img {
  width: 100%; height: 100%;
  object-fit: contain;
}

/* Callout polygons — hover + tactic-aware highlight */
.co-zones { pointer-events: auto; }
.co-zone {
  fill: rgba(255, 255, 255, 0);
  stroke: rgba(255, 255, 255, 0);
  stroke-width: 2;
  cursor: crosshair;
  transition: fill var(--motion-fast) var(--ease),
              stroke var(--motion-fast) var(--ease);
  pointer-events: auto;
}
.co-zone:hover {
  fill: var(--accent-haze);
  stroke: var(--accent);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 10px var(--accent-glow));
}

/* Teammates' tactic positions — soft dashed outline */
.co-zone.tactic-team {
  fill: rgba(180, 200, 220, 0.06);
  stroke: rgba(180, 200, 220, 0.45);
  stroke-width: 1.4;
  stroke-dasharray: 5 3;
}
/* User's tactic position — accent fill, subtle pulse */
.co-zone.tactic-mine {
  fill: var(--accent-haze);
  stroke: var(--accent);
  stroke-width: 2.4;
  filter: drop-shadow(0 0 8px var(--accent-glow));
  animation: tacticMinePulse 2.6s ease-in-out infinite;
}
@keyframes tacticMinePulse {
  0%, 100% { fill: var(--accent-haze); }
  50%      { fill: rgba(var(--accent-rgb, 142, 148, 163), 0.32); }
}

/* Utility markers on map */
.util {
  cursor: help;
}
.util circle {
  fill: var(--surface-2);
  stroke: var(--bone-2);
  stroke-width: 1.5;
}
.util text {
  fill: var(--bone);
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
}
.util-smoke circle { stroke: var(--bone-2); fill: rgba(200, 204, 211, 0.12); }
.util-smoke text   { fill: var(--bone); }
.util-flash circle { stroke: var(--warn); fill: rgba(245, 197, 24, 0.18); }
.util-flash text   { fill: var(--warn); }
.util-molly circle { stroke: var(--t); fill: rgba(255, 169, 64, 0.18); }
.util-molly text   { fill: var(--t); }
.util-he    circle { stroke: var(--danger); fill: rgba(255, 81, 105, 0.18); }
.util-he    text   { fill: var(--danger); }

/* Callout tooltip floating over map */
.callout-tip {
  position: absolute;
  display: none;
  background: var(--surface-3);
  border: 1px solid var(--line-3);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--bone);
  pointer-events: none;
  z-index: 20;
  max-width: 240px;
  box-shadow: var(--shadow-pop);
  backdrop-filter: blur(8px);
}
.callout-tip strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 4px;
}
.callout-tip-desc { color: var(--bone-2); }

/* Utility timeline (chronological numbered list below the map) */
.utility-timeline {
  font-family: var(--font-display);
  font-size: 11px;
  margin-top: var(--s-1);
}
.utility-timeline .empty { color: var(--bone-3); padding: var(--s-2) 0; text-align: center; }
.util-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.util-item {
  display: grid;
  grid-template-columns: 24px 38px auto 1fr;
  gap: 6px;
  align-items: center;
  padding: 4px 6px;
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-xs);
  transition: all var(--motion-fast) var(--ease);
}
.util-item.mine {
  border-color: var(--accent-deep);
  background: var(--accent-haze);
}
.util-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--bone);
  text-align: center;
  width: 20px; height: 20px;
  line-height: 18px;
  border: 1px solid var(--line-3);
  border-radius: var(--r-xs);
}
.util-item.mine .util-num { border-color: var(--accent); color: var(--accent); }
.util-item.util-smoke .util-num { border-color: var(--bone-3); }
.util-item.util-flash .util-num { border-color: var(--warn); color: var(--warn); }
.util-item.util-molly .util-num { border-color: var(--t); color: var(--t); }
.util-item.util-he    .util-num { border-color: var(--danger); color: var(--danger); }

.util-time {
  font-size: 10px;
  font-weight: 600;
  color: var(--bone-3);
  letter-spacing: -0.02em;
}
.util-thrower {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--bone-2);
}
.util-type {
  font-size: 11px;
  font-weight: 500;
  color: var(--bone);
}
.util-from {
  font-size: 10px;
  color: var(--bone-3);
  font-style: italic;
}

/* ══════════════════════════════════════════
   CALLOUTS REFERENCE PANEL (collapsible)
   ────────────────────────────────────────── */
.callouts-wrap {
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: var(--s-2);
}
.callouts-summary {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--bone-2);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s-1);
}
.callouts-summary::-webkit-details-marker { display: none; }
.callouts-summary::before {
  content: "▸";
  display: inline-block;
  color: var(--accent);
  transition: transform var(--motion-fast) var(--ease);
}
.callouts-wrap[open] .callouts-summary::before { transform: rotate(90deg); }
.callout-search {
  width: 100%;
  margin-top: var(--s-2);
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line-3);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--bone);
}
.callout-search:focus { border-color: var(--accent); outline: none; }
.callouts-table {
  margin-top: var(--s-1);
  max-height: 240px;
  overflow-y: auto;
}
.callout-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--s-1);
  padding: 4px 6px;
  border-bottom: 1px solid var(--line-1);
  font-size: 11px;
}
.callout-name {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--accent);
}
.callout-desc { color: var(--bone-2); }

/* ══════════════════════════════════════════
   LOGGER (event feed)
   ────────────────────────────────────────── */
.logger {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 200px;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 11px;
}
.logger li {
  padding: 4px 8px;
  background: var(--surface-1);
  border-left: 2px solid var(--line-2);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  color: var(--bone-2);
  letter-spacing: -0.01em;
}
.logger li.empty { color: var(--bone-3); text-align: center; border-left: none; }
.logger li[data-kind="bomb_planted"]  { border-left-color: var(--danger); color: var(--bone); }
.logger li[data-kind="bomb_exploded"] { border-left-color: var(--danger); color: var(--bone); }
.logger li[data-kind="bomb_defused"]  { border-left-color: var(--vital); color: var(--bone); }
.logger li[data-kind="kill"]          { border-left-color: var(--warn); }
.logger li[data-kind="round_start"]   { border-left-color: var(--accent); }
.logger li[data-kind="halftime"]      { border-left-color: var(--accent); color: var(--accent); font-weight: 600; }
.logger li[data-kind="strat_picked"]  { border-left-color: var(--accent); color: var(--bone); }

/* ══════════════════════════════════════════
   SETUP MODAL
   ────────────────────────────────────────── */
.setup-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-3);
}
.setup-modal[hidden] { display: none; }
.setup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 10, 0.72);
  backdrop-filter: blur(8px);
}
.setup-card {
  position: relative;
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--line-3);
  border-radius: var(--r-xl);
  padding: var(--s-5);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-pop);
}
.setup-close {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  width: 32px; height: 32px;
  font-size: 22px;
  line-height: 1;
  color: var(--bone-3);
  border-radius: 50%;
  transition: all var(--motion-fast) var(--ease);
}
.setup-close:hover { color: var(--bone); background: var(--surface-3); }
.setup-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.015em;
  margin-bottom: var(--s-1);
}
.setup-sub {
  color: var(--bone-2);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: var(--s-3);
}
.setup-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--line-2);
}
.setup-tab {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  padding: 8px 12px;
  color: var(--bone-3);
  border-bottom: 2px solid transparent;
  transition: all var(--motion-fast) var(--ease);
}
.setup-tab:hover { color: var(--bone); }
.setup-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.setup-pane { display: none; }
.setup-pane.is-active { display: block; }
.setup-pane-intro {
  color: var(--bone-2);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: var(--s-2);
}
.setup-warn {
  font-size: 12px;
  color: var(--bone-2);
  background: rgba(245, 197, 24, 0.07);
  border-left: 2px solid var(--warn);
  padding: var(--s-2);
  border-radius: var(--r-xs);
  margin-bottom: var(--s-2);
  line-height: 1.5;
}
.setup-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--s-3);
  counter-reset: step;
}
.setup-steps li {
  position: relative;
  padding: 6px 6px 6px 32px;
  font-size: 12px;
  color: var(--bone-2);
  line-height: 1.45;
  counter-increment: step;
}
.setup-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 6px;
  width: 22px; height: 22px;
  background: var(--surface-3);
  border: 1px solid var(--line-3);
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.setup-steps code {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 5px;
  background: var(--surface-3);
  border-radius: var(--r-xs);
  color: var(--accent);
}
.setup-cta {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  padding: 12px var(--s-3);
  background: var(--accent);
  color: var(--accent-text);
  border-radius: var(--r-sm);
  width: 100%;
  transition: all var(--motion-fast) var(--ease);
}
.setup-cta:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px var(--accent-glow);
}
.setup-cta-secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}
.setup-cta-secondary:hover { background: var(--accent-haze); }
.setup-feedback {
  font-size: 11px;
  color: var(--bone-3);
  margin-top: var(--s-1);
  min-height: 16px;
}
.setup-tiny {
  font-size: 11px;
  color: var(--bone-3);
  line-height: 1.5;
  margin-top: var(--s-2);
}
.setup-tiny code {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 4px;
  background: var(--surface-2);
  border-radius: var(--r-xs);
}
.setup-foot {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  padding-top: var(--s-2);
  border-top: 1px solid var(--line-2);
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--bone-3);
}

/* ══════════════════════════════════════════
   OVERLAY (loading state)
   ────────────────────────────────────────── */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 11, 16, 0.92);
  backdrop-filter: blur(10px);
  transition: opacity var(--motion-base) var(--ease);
}
.overlay.hidden { opacity: 0; pointer-events: none; }
.overlay-inner { text-align: center; }
.overlay-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  color: var(--bone);
  margin-bottom: var(--s-1);
}
.overlay-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--accent);
}

/* ══════════════════════════════════════════
   JOIN PAGE (index.html)
   ────────────────────────────────────────── */
.join-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--s-4);
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(255, 255, 255, 0.04), transparent 70%),
    var(--ink);
}
.join-card {
  position: relative;
  max-width: 460px;
  width: 100%;
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--line-3);
  border-radius: var(--r-xl);
  padding: var(--s-6) var(--s-5);
  box-shadow: var(--shadow-pop);
}
.join-card::before {
  /* Vertical accent rule signature */
  content: "";
  position: absolute;
  top: var(--s-4); bottom: var(--s-4); left: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  opacity: 0.6;
}
.join-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-1);
}
.join-title span {
  color: var(--accent);
  font-weight: 300;
  font-style: italic;
}
.join-sub {
  color: var(--bone-2);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: var(--s-4);
}
.join-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.join-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.join-label span {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--bone-3);
}
.join-label input {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  padding: 10px 12px;
  background: var(--surface-1);
  border: 1px solid var(--line-3);
  border-radius: var(--r-sm);
  color: var(--bone);
  transition: border-color var(--motion-fast) var(--ease);
}
.join-label input:focus { border-color: var(--accent); outline: none; }
.join-btn {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  padding: 12px var(--s-3);
  background: var(--accent);
  color: var(--accent-text);
  border-radius: var(--r-sm);
  margin-top: var(--s-1);
  transition: all var(--motion-fast) var(--ease);
}
.join-btn:hover {
  filter: brightness(1.1);
  box-shadow: 0 8px 24px var(--accent-glow);
}
.join-error {
  font-size: 12px;
  color: var(--danger);
  min-height: 16px;
  margin-top: var(--s-1);
}
.join-tip {
  margin-top: var(--s-4);
  padding: var(--s-2);
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font-size: 11px;
  line-height: 1.5;
  color: var(--bone-2);
}
.join-tip strong { color: var(--accent); }
.join-tip code {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 4px;
  background: var(--surface-3);
  border-radius: var(--r-xs);
  color: var(--bone);
}

/* Steam / Faceit login section */
.login-section {
  padding: var(--s-3);
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  margin-bottom: var(--s-3);
}
.steam-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  width: 100%;
  padding: 10px 14px;
  background: #1B2838;
  border: 1px solid #2A475E;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #66C0F4;
  transition: all var(--motion-fast) var(--ease);
}
.steam-btn:hover { background: #2A475E; color: var(--bone); }
.login-tiny {
  font-size: 11px;
  color: var(--bone-3);
  line-height: 1.5;
  margin-top: var(--s-1);
}
.login-link { color: var(--accent); font-weight: 600; }

.login-logged {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.login-avatar {
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-3);
}
.login-name { font-weight: 700; color: var(--bone); }

.faceit-divider {
  height: 1px;
  background: var(--line-2);
  margin: var(--s-2) 0;
}
.faceit-link-form {
  display: flex;
  gap: 4px;
  margin-top: var(--s-1);
}
.faceit-input {
  flex: 1;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line-3);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--bone);
}
.faceit-input:focus { border-color: var(--accent); outline: none; }
.faceit-btn {
  padding: 8px 12px;
  background: #FF5500;
  color: white;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.faceit-btn:hover { filter: brightness(1.1); }
.faceit-error {
  font-size: 11px;
  color: var(--danger);
  min-height: 14px;
}

.faceit-linked {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2);
  background: var(--surface-2);
  border-radius: var(--r-sm);
}
.faceit-elo-badge {
  font-family: var(--font-mono);
  font-weight: 700;
  text-align: center;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, #FF5500, #FF8800);
  color: white;
  min-width: 60px;
}
.faceit-level-num { display: block; font-size: 18px; line-height: 1; }
.faceit-elo-num { display: block; font-size: 10px; opacity: 0.85; }
.faceit-name { font-weight: 700; color: var(--bone); }

/* ══════════════════════════════════════════
   HELPERS
   ────────────────────────────────────────── */
.empty {
  color: var(--bone-3);
  font-size: 12px;
  text-align: center;
  padding: var(--s-3) 0;
}
.hidden { display: none !important; }

/* ══════════════════════════════════════════
   VETO ASSISTANT — pre-game map analysis modal
   ────────────────────────────────────────── */
.veto-open-btn {
  width: 100%;
  margin-top: 4px;
}
.veto-hint {
  font-size: 11px;
  color: var(--bone-3);
  line-height: 1.5;
  margin-top: 6px;
  padding: 0 2px;
}

.veto-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-3);
}
.veto-modal[hidden] { display: none; }
.veto-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 10, 0.78);
  backdrop-filter: blur(8px);
}
.veto-card {
  position: relative;
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--accent-deep);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-xl);
  padding: var(--s-5);
  max-width: 780px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: var(--shadow-pop);
}
.veto-close {
  position: absolute;
  top: var(--s-2); right: var(--s-2);
  width: 32px; height: 32px;
  font-size: 22px;
  line-height: 1;
  color: var(--bone-3);
  border-radius: 50%;
  transition: all var(--motion-fast) var(--ease);
}
.veto-close:hover { color: var(--bone); background: var(--surface-3); }

.veto-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--accent);
  margin-bottom: var(--s-1);
}
.veto-sub {
  font-size: 12px;
  color: var(--bone-2);
  line-height: 1.5;
  margin-bottom: var(--s-3);
}

.veto-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--line-2);
}
.veto-tab {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  padding: 8px 14px;
  color: var(--bone-3);
  border-bottom: 2px solid transparent;
  transition: all var(--motion-fast) var(--ease);
}
.veto-tab:hover { color: var(--bone); }
.veto-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.veto-pane { display: none; }
.veto-pane.is-active { display: block; }

.veto-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--s-2);
}
.veto-field-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--bone-3);
}
.veto-input {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 8px 12px;
  background: var(--surface-1);
  border: 1px solid var(--line-3);
  border-radius: var(--r-sm);
  color: var(--bone);
  transition: border-color var(--motion-fast) var(--ease);
}
.veto-input:focus { border-color: var(--accent); outline: none; }

.veto-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.veto-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.veto-col-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--bone-3);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.veto-col:first-child .veto-col-title { color: var(--accent); }
.veto-col:last-child  .veto-col-title { color: var(--danger); }

.veto-cta {
  display: block;
  width: 100%;
  margin-top: var(--s-2);
}
.veto-feedback {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--bone-3);
  min-height: 16px;
  margin-top: var(--s-1);
}

/* ── Results table ── */
.veto-results {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-2);
}
.veto-results-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: var(--s-2);
}
.veto-results-title::before { content: "▪ "; color: var(--accent); }
.veto-table-wrap { overflow-x: auto; }
.veto-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-display);
}
.veto-table thead th {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-3);
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-2);
}
.veto-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-1);
  font-size: 12px;
  color: var(--bone-2);
}
.veto-table tbody td small {
  color: var(--bone-4);
  font-size: 9px;
  letter-spacing: 0;
}
.veto-table .veto-map {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--bone);
  text-transform: capitalize;
}
.veto-table .veto-rec-cell {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Per-recommendation row tint + accent on rec column */
.veto-row.veto-rec-strong-keep { background: rgba(111, 224, 122, 0.06); }
.veto-row.veto-rec-strong-keep .veto-rec-cell { color: var(--vital); }
.veto-row.veto-rec-strong-keep .veto-map { color: var(--vital); }
.veto-row.veto-rec-keep .veto-rec-cell { color: var(--vital); }
.veto-row.veto-rec-strong-ban  { background: rgba(255, 81, 105, 0.07); }
.veto-row.veto-rec-strong-ban .veto-rec-cell { color: var(--danger); }
.veto-row.veto-rec-strong-ban .veto-map { color: var(--danger); }
.veto-row.veto-rec-ban .veto-rec-cell { color: var(--danger); }
.veto-row.veto-rec-neutral .veto-rec-cell { color: var(--bone-3); font-weight: 500; }

.veto-delta-pos { color: var(--vital); }
.veto-delta-neg { color: var(--danger); }
.veto-delta-neu { color: var(--bone-3); }
.drop-hint {
  font-size: 11px;
  color: var(--bone-3);
  font-style: italic;
  padding: var(--s-1);
}

/* ══════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   Mobile is out of scope — esports tool, desktop only.
   ────────────────────────────────────────── */
@media (max-width: 1100px) {
  .grid {
    grid-template-columns: 1fr;
    gap: var(--s-2);
    height: auto;
    overflow: visible;
    padding-bottom: var(--s-3);
  }
  .panel { height: auto; max-height: none; }
  .topbar { grid-template-columns: 1fr; }
  .topbar-left, .topbar-right { justify-content: center; flex-wrap: wrap; }
}