/* =========================================================================
   DESIGN TOKENS
   Dark olive / military aesthetic. Restrained palette with brass + blood
   accents. Everything keys off CSS vars so global tweaks are one-line.
========================================================================= */
:root {
  --bg-void: #0a0d08; /* deepest background */
  --bg-base: #0e1410; /* page background */
  --bg-panel: #151a13; /* panel/card surface */
  --bg-panel-2: #1c211a; /* nested panel surface */
  --border-faint: #232a1f; /* subtle dividers */
  --border: #2f3825; /* visible borders */
  --border-bright: #4a5530; /* hover / emphasis borders */

  --brass: #c9b074; /* primary accent - military brass */
  --brass-bright: #e6cc8a;
  --blood: #a83232; /* danger / KIA / heat */
  --blood-bright: #c84a3a;
  --moss: #6b8c4e; /* secondary - fatigue green */
  --ice: #4a7ac8; /* spl181's color - matches the East faction stripe */
  --ice-bright: #6a9ad8;
  --bone: #e8e3d0; /* primary text - bone white */
  --bone-dim: #b8b29a;
  --steel: #424549; /* cool gray - used for headshot crosshairs */
  --muted: #6e6b58; /* secondary text */
  --muted-deep: #4a4838; /* tertiary text */

  --hs-ring: conic-gradient(
    from -90deg,
    var(--brass) 0%,
    var(--brass) var(--pct, 0%),
    transparent var(--pct, 0%)
  );
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  background: var(--bg-base);
  color: var(--bone);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  overflow-x: hidden;
  background-image:
    radial-gradient(
      ellipse at 20% 0%,
      rgba(201, 176, 116, 0.04) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 80% 100%,
      rgba(168, 50, 50, 0.03) 0%,
      transparent 50%
    );
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 3px
  );
  opacity: 0.4;
}

.shell {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 48px 80px;
  position: relative;
  z-index: 1;
}

.ops-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 48px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-void);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bone-dim);
  position: relative;
}

.ops-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: repeating-linear-gradient(
    -45deg,
    var(--brass) 0,
    var(--brass) 6px,
    transparent 6px,
    transparent 12px
  );
  opacity: 0.5;
}

.ops-header .classification {
  color: var(--brass);
  font-weight: 700;
}
.ops-header .status {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ops-header .status .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--moss);
  box-shadow: 0 0 8px var(--moss);
  animation: pulse 2s ease-in-out infinite;
}

/* Stacked timestamps in the header - top line is when the data was
last refreshed, bottom line is a live ticking wall clock. */
.ops-header .timestamps {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  line-height: 1.3;
}
.ops-header .timestamps .label {
  color: var(--brass);
  margin-right: 4px;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.85);
  }
}

.title-block {
  padding: 64px 0 48px;
  border-bottom: 1px solid var(--border-faint);
  position: relative;
}
.title-block .prefix,
.title-block .suffix {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
}
.title-block .prefix {
  color: var(--brass);
  margin-bottom: 16px;
}
.title-block .suffix {
  margin-top: 8px;
}

.title-block h1 {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: clamp(56px, 9vw, 132px);
  letter-spacing: -0.02em;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--bone);
  background: linear-gradient(180deg, var(--bone) 0%, var(--bone-dim) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.title-block h1 .accent {
  color: var(--brass);
  -webkit-text-fill-color: var(--brass);
}

.title-block .coord {
  position: absolute;
  top: 64px;
  right: 0;
  font-family: "Special Elite", monospace;
  font-size: 15px;
  color: var(--muted);
  text-align: right;
  line-height: 1.6;
}
.title-block .coord span {
  color: var(--brass);
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 48px 0;
  border-bottom: 1px solid var(--border-faint);
}
.stat-block {
  padding: 8px 32px;
  border-left: 1px solid var(--border-faint);
  position: relative;
}
.stat-block:first-child {
  border-left: none;
  padding-left: 0;
}

.stat-block .label {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.stat-block .label::before {
  content: "";
  width: 16px;
  height: 1px;
  background: var(--brass);
}

.stat-block .value {
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-size: 76px;
  line-height: 1;
  color: var(--bone);
  letter-spacing: -0.02em;
}
.stat-block .value .unit {
  font-size: 32px;
  color: var(--muted);
  margin-left: 4px;
  font-weight: 400;
}
.stat-block .suffix {
  font-family: "Special Elite", monospace;
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
  letter-spacing: 0.05em;
}
.stat-block.accent .value {
  color: var(--brass);
}
.stat-block.danger .value {
  color: var(--blood-bright);
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 56px 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-faint);
}
.section-head .num {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--brass);
  margin-right: 16px;
}
.section-head .title {
  font-family: "Oswald", sans-serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bone);
}
.section-head .meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  position: relative;
}
.panel::before,
.panel::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid var(--brass);
  pointer-events: none;
}
.panel::before {
  top: -1px;
  left: -1px;
  border-right: none;
  border-bottom: none;
}
.panel::after {
  bottom: -1px;
  right: -1px;
  border-left: none;
  border-top: none;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-faint);
}
.panel-header .title {
  font-family: "Oswald", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.panel-header .meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--muted);
}
.panel-body {
  padding: 24px;
}

.main-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
}

.operative {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px dashed var(--border-faint);
  align-items: center;
}
.operative:last-child {
  border-bottom: none;
}
.operative .ident {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 16px;
}
.operative .rank {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--brass);
  padding: 2px 8px;
  border: 1px solid var(--brass);
}
.operative .codename {
  font-family: "Oswald", sans-serif;
  font-size: 38px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bone);
}
.operative .stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.operative .stat-row .stat .label {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.operative .stat-row .stat .num {
  font-family: "Oswald", sans-serif;
  font-size: 28px;
  color: var(--bone);
  line-height: 1;
}
.operative .stat-row .stat .num .small {
  font-size: 14px;
  color: var(--muted);
  margin-left: 2px;
}

.hs-ring {
  width: 100px;
  height: 100px;
  position: relative;
  display: grid;
  place-items: center;
}
.hs-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--hs-ring);
  -webkit-mask: radial-gradient(circle, transparent 36px, black 38px);
  mask: radial-gradient(circle, transparent 36px, black 38px);
}
.hs-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  -webkit-mask: radial-gradient(circle, transparent 36px, black 38px);
  mask: radial-gradient(circle, transparent 36px, black 38px);
  z-index: -1;
}
.hs-ring .pct {
  font-family: "Oswald", sans-serif;
  font-size: 22px;
  color: var(--brass);
  line-height: 1;
}
.hs-ring .lbl {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.2em;
  margin-top: 2px;
}

.timeline {
  display: flex;
  flex-direction: column;
}
.timeline .panel-body {
  flex: 1;
  min-height: 320px;
  position: relative;
}
.timeline canvas {
  width: 100% !important;
  height: 100% !important;
}

.combat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.silhouette-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  padding: 24px;
}
.silhouette-svg {
  width: 180px;
  height: 360px;
}
.silhouette-svg path {
  fill: var(--bg-panel-2);
  stroke: var(--border-bright);
  stroke-width: 1;
  transition: fill 0.3s ease;
}
.silhouette-svg path.zone {
  cursor: pointer;
}
.silhouette-svg path.zone:hover {
  filter: brightness(1.4);
}

.zone-labels {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.zone-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}
.zone-row .name {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.zone-row .bar {
  height: 4px;
  background: var(--bg-void);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-faint);
}
.zone-row .bar .fill {
  position: absolute;
  inset: 0;
  width: var(--w, 0%);
  background: linear-gradient(90deg, var(--blood), var(--blood-bright));
  transition: width 0.8s ease;
}
.zone-row .num {
  font-family: "Oswald", sans-serif;
  font-size: 18px;
  color: var(--bone);
  min-width: 40px;
  text-align: right;
}
.zone-row .num .small {
  font-size: 12px;
  color: var(--muted);
  margin-left: 2px;
  font-family: "JetBrains Mono", monospace;
}

.faction-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
}
.faction-row {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 16px;
  align-items: center;
}
.faction-row .name {
  font-family: "Oswald", sans-serif;
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.faction-row .threat-bar {
  height: 8px;
  background: var(--bg-void);
  border: 1px solid var(--border-faint);
  position: relative;
}
.faction-row .threat-bar .fill {
  position: absolute;
  inset: 0;
  width: var(--w, 0%);
  background-image:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 4px,
      rgba(0, 0, 0, 0.2) 4px,
      rgba(0, 0, 0, 0.2) 5px
    ),
    linear-gradient(90deg, var(--blood-bright), var(--blood));
}
.faction-row .stats {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  text-align: right;
}
.faction-row .stats .kill {
  color: var(--blood-bright);
  font-weight: 700;
}
.faction-row .stats .killed {
  color: var(--moss);
  display: block;
  font-size: 12px;
  letter-spacing: 0.1em;
}

.weapons-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}
.weapons-table thead th {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--muted);
  text-transform: uppercase;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-weight: 500;
}
.weapons-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-faint);
  color: var(--bone-dim);
}

/* Match the right-aligned headers (kills, headshots, avg dist, max dist).
   Setting text-align on the <td> works for both the plain text cells
   AND the inline .num spans inside them — the inner span's own
   text-align is a no-op since text-align doesn't affect inline boxes. */
.weapons-table tbody td:nth-child(2),
.weapons-table tbody td:nth-child(3),
.weapons-table tbody td:nth-child(4),
.weapons-table tbody td:nth-child(5) {
  text-align: right;
}
.weapons-table tbody tr {
  transition: background 0.15s ease;
}
.weapons-table tbody tr:hover {
  background: var(--bg-panel-2);
}
.weapons-table .weapon-name {
  font-family: "Oswald", sans-serif;
  font-size: 16px;
  color: var(--bone);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.weapons-table .num {
  font-family: "Oswald", sans-serif;
  font-size: 18px;
  color: var(--bone);
  text-align: right;
}
.weapons-table .num.kills {
  color: var(--brass);
}
.weapons-table .num.dmg {
  color: var(--blood-bright);
}

.weapons-table .inline-bar {
  display: inline-block;
  width: 60px;
  height: 4px;
  background: var(--bg-void);
  vertical-align: middle;
  margin-left: 8px;
  border: 1px solid var(--border-faint);
  position: relative;
}
.weapons-table .inline-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--w, 0%);
  background: var(--brass);
}

.wanted-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}
.wanted-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  padding: 20px;
  position: relative;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}
.wanted-card:nth-child(odd) {
  transform: rotate(-0.5deg);
}
.wanted-card:nth-child(even) {
  transform: rotate(0.4deg);
}
.wanted-card:hover {
  transform: rotate(0deg) scale(1.02);
  border-color: var(--blood-bright);
  z-index: 2;
}

.wanted-card::before {
  content: "HOSTILE";
  position: absolute;
  top: -10px;
  left: 16px;
  background: var(--blood);
  color: var(--bone);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.25em;
  padding: 2px 8px;
  font-weight: 700;
}
.wanted-card .codename {
  font-family: "Oswald", sans-serif;
  font-size: 28px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 8px 0 4px;
  color: var(--bone);
}
.wanted-card .faction {
  font-family: "Special Elite", monospace;
  font-size: 12px;
  color: var(--brass);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.wanted-card .kills-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
}
.wanted-card .kills-line .lbl {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--muted);
  text-transform: uppercase;
}
.wanted-card .kills-line .num {
  font-family: "Oswald", sans-serif;
  font-size: 32px;
  color: var(--blood-bright);
  line-height: 1;
}

.wanted-card[data-faction="East"] {
  border-left: 3px solid #c84a3a;
}
.wanted-card[data-faction="West"] {
  border-left: 3px solid #4a7ac8;
}
.wanted-card[data-faction="Guards"] {
  border-left: 3px solid #c9b074;
}
.wanted-card[data-faction="Shamans"] {
  border-left: 3px solid #8a4ec8;
}
.wanted-card[data-faction="Civilian"] {
  border-left: 3px solid #6e6b58;
}
.wanted-card[data-faction="Mercenaries"] {
  border-left: 3px solid #6b8c4e;
}

.ops-footer {
  margin-top: 80px;
  padding: 24px 0;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* =========================================================================
   FACTION WAR MATRIX
   AI-vs-AI kill grid with the Bad News Bears (player team) included as
   their own row/column. Bears cells are tinted brass for visual contrast,
   AI-vs-AI cells use blood-red intensity proportional to kill count.
========================================================================= */
.faction-matrix {
  padding: 24px;
  overflow-x: auto; /* horizontal scroll on narrow screens */
}

.faction-matrix table {
  width: 100%;
  border-collapse: collapse;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}

.faction-matrix th,
.faction-matrix td {
  padding: 10px 8px;
  text-align: center;
  border: 1px solid var(--border-faint);
  min-width: 56px;
}

/* Top header row — column labels (the killer dimension) */
.faction-matrix thead th {
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 500;
  background: var(--bg-void);
}

/* Left header column — row labels (the victim dimension) */
.faction-matrix tbody th {
  font-family: "Oswald", sans-serif;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--bone);
  text-align: right;
  text-transform: uppercase;
  background: var(--bg-void);
  font-weight: 500;
  padding-right: 12px;
}

/* Top-left corner cell with the axis legend */
.faction-matrix .corner {
  font-family: "Special Elite", monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
  text-align: left;
  padding-left: 12px;
  background: var(--bg-void);
  line-height: 1.4;
}

/* Diagonal cells (faction killing itself) — meaningless, dashed pattern */
.faction-matrix td.diag {
  color: var(--muted-deep);
  background: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 4px,
    rgba(255, 255, 255, 0.02) 4px,
    rgba(255, 255, 255, 0.02) 5px
  );
  cursor: default;
}

/* Standard kill cells — blood red intensity scaled to count */
.faction-matrix td.kill {
  font-family: "Oswald", sans-serif;
  font-size: 16px;
  color: var(--bone);
  background: rgba(168, 50, 50, var(--intensity, 0));
  cursor: help;
  transition: background 0.2s ease;
}

.faction-matrix td.kill:hover {
  background: var(--blood);
}

/* Cells with zero kills — dim, smaller text so non-zeros stand out */
.faction-matrix td.kill.zero {
  color: var(--muted-deep);
  font-size: 12px;
}

/* Bears highlighting — brass tint for the row/column headers */
.faction-matrix tbody th.bears,
.faction-matrix thead th.bears {
  background: rgba(201, 176, 116, 0.12);
  color: var(--brass);
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* Bears kill cells use brass tint instead of blood */
.faction-matrix td.bears.kill {
  background: rgba(201, 176, 116, var(--intensity, 0.05));
}

.faction-matrix td.bears.kill:hover {
  background: var(--brass);
  color: var(--bg-void);
}

.faction-matrix td.bears.kill.zero {
  color: var(--muted);
}

/* Legend strip below the matrix */
.faction-matrix-legend {
  margin-top: 0;
  padding: 16px 24px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--muted);
  text-transform: uppercase;
  border-top: 1px solid var(--border-faint);
}

.faction-matrix-legend .item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.faction-matrix-legend .swatch {
  width: 14px;
  height: 14px;
  display: inline-block;
  border: 1px solid var(--border-faint);
}

.faction-matrix-legend .swatch.bears {
  background: rgba(201, 176, 116, 0.4);
}
.faction-matrix-legend .swatch.kill {
  background: rgba(168, 50, 50, 0.6);
}
.faction-matrix-legend .swatch.zero {
  background: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 4px,
    rgba(255, 255, 255, 0.05) 4px,
    rgba(255, 255, 255, 0.05) 5px
  );
}

.fade-up {
  opacity: 0;
  transform: translateY(12px);
  animation: fadeUp 0.7s ease forwards;
}
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Subtle skeleton state for panels while their data is in-flight */
.loading {
  opacity: 0.4;
  pointer-events: none;
}

/* =========================================================================
   ENGAGEMENT MAP - Section [06]
   Topographical map of Livonia with an SVG overlay drawing kill events.
   Each engagement is a <g> containing the trajectory line, an open circle
   at the shooter's position, and a filled circle at the victim's position.
   Hovering an engagement dims all the others via :has().
========================================================================= */

/* Filter button group lives in the panel header */
.engagement-map-panel .panel-header {
  flex-wrap: wrap;
  gap: 16px;
}

.map-filters {
  display: flex;
  gap: 4px;
}

.map-filter {
  background: var(--bg-void);
  color: var(--muted);
  border: 1px solid var(--border-faint);
  padding: 6px 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}

.map-filter:hover {
  border-color: var(--brass);
  color: var(--bone-dim);
}

.map-filter.active {
  background: var(--brass);
  color: var(--bg-void);
  border-color: var(--brass);
  font-weight: 700;
}

/* Two-column layout: map on the left, details panel on the right */
.map-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  padding: 24px;
}

.map-container {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg-void);
  border: 1px solid var(--border-faint);
  overflow: hidden;
  cursor: grab;
  /* The CSS variable --zoom is updated by JS on wheel events. All
     engagement geometry below references it via calc() so dots and
     lines stay the same on-screen size as the map zooms. */
  --zoom: 1;
}

.map-container.dragging {
  cursor: grabbing;
}

/* Wrapper that gets transformed for pan/zoom. The map image and SVG
   overlay both live inside it so they move together.
   Note: NO `will-change: transform` here — it was causing the SVG to
   render into a compositing layer at base resolution and then bitmap-
   scale up, making the dots blurry. Without it, the browser redraws
   the SVG vector content at the new effective resolution = sharp. */
.map-pan-zoom {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
}

.map-image {
  width: 100%;
  height: 100%;
  display: block;
  /* The topo map is bright greens — knock it back so the overlay pops */
  filter: brightness(0.6) saturate(0.65) contrast(1.15);
  pointer-events: none; /* pan drags shouldn't be intercepted by the image */
  -webkit-user-drag: none;
  user-select: none;
}

.map-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Floating control cluster — sits above the pan-zoom layer so its
   buttons don't get translated when the map moves. */
.map-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  gap: 6px;
}

.map-reset {
  background: rgba(14, 20, 16, 0.85);
  color: var(--brass);
  border: 1px solid var(--brass);
  width: 32px;
  height: 32px;
  font-family: "JetBrains Mono", monospace;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.map-reset:hover {
  background: var(--brass);
  color: var(--bg-void);
}

/* Engagement group — wraps the line + two dots for one kill event */
.engagement {
  transition: opacity 0.2s ease;
}

/* When ANY engagement is hovered, dim all the others. Modern browsers
   only — :has() is in all evergreen browsers since 2023. */
.map-overlay:has(.engagement:hover) .engagement:not(:hover) {
  opacity: 0.12;
}

/* Trajectory line from killer to victim — stroke width compensates
   for current zoom so it stays the same on-screen thickness */
.engagement .trajectory {
  fill: none;
  stroke-width: calc(14 / var(--zoom));
  stroke-opacity: 0.55;
}

/* Open circle at the shooter's position */
.engagement .origin {
  r: calc(55 / var(--zoom));
  fill: none;
  stroke-width: calc(20 / var(--zoom));
  opacity: 0.75;
  pointer-events: none;
}

/* Filled circle at the victim's position — main hover target */
.engagement .victim {
  r: calc(75 / var(--zoom));
  cursor: pointer;
  stroke: var(--bg-void);
  stroke-width: calc(10 / var(--zoom));
}

/* Color variants by engagement type */
.engagement.kind-bears .trajectory,
.engagement.kind-bears .origin {
  stroke: var(--brass);
}
.engagement.kind-bears .victim {
  fill: var(--brass-bright);
}

.engagement.kind-bears-down .trajectory,
.engagement.kind-bears-down .origin {
  stroke: var(--blood);
}
.engagement.kind-bears-down .victim {
  fill: var(--blood-bright);
}

.engagement.kind-ai .trajectory,
.engagement.kind-ai .origin {
  stroke: var(--moss);
}
.engagement.kind-ai .victim {
  fill: var(--moss);
}

/* Player-specific override: when spl181 is involved as the killer
   (kind-bears engagement), tint blue instead of brass to make it
   visually obvious which Bear scored the kill in mixed views.
   Deaths (kind-bears-down) stay blood-red regardless of which Bear
   went down, since color there represents outcome (death = bad). */
.engagement.kind-bears.player-spl181 .trajectory,
.engagement.kind-bears.player-spl181 .origin {
  stroke: var(--ice);
}
.engagement.kind-bears.player-spl181 .victim {
  fill: var(--ice-bright);
}

/* Headshot marker — a small crosshair (4 tick marks) drawn on top of
   the victim dot. The group has its position+scale set via the SVG
   transform attribute (updated in JS) so the crosshair stays the same
   on-screen size at every zoom level — same treatment as the dots. */
.engagement .headshot-mark {
  pointer-events: none;
}

.engagement .headshot-mark line {
  stroke: var(--steel);
  stroke-width: 14;
  stroke-linecap: round;
}

/* =========================================================================
   RECORD SHOT
   The longest player kill in the current filter view gets a pulsing ring
   around the victim dot plus a small "LONGEST · Xm" label above it.
   Goal is to make the record visible without the user having to hunt.
========================================================================= */

/* Slow pulse ring drawn behind the victim dot.
   Note: we use transform: scale() for the pulse rather than animating
   r directly. Animating SVG `r` via calc(var(--zoom)) inside @keyframes
   has interpolation issues across browsers. transform: scale() is rock
   solid and gives the same visual effect. */
.engagement .pulse-ring {
  fill: none;
  stroke: var(--brass-bright);
  /* Stroke width has to be much higher than feels natural in SVG units
     because the SVG viewBox is 12800 wide but renders to ~1000px on
     screen — every SVG unit is ~0.08 actual pixels, so calc(8 / zoom)
     = 0.5px = invisible. ~40 SVG units gives a ~3px on-screen stroke. */
  stroke-width: calc(40 / var(--zoom));
  pointer-events: none;
  /* Base radius — the animation scales away from this value */
  r: calc(110 / var(--zoom));
  /* transform-box + transform-origin make scale() pivot from the
     circle's center instead of the SVG origin. Both required. */
  transform-box: fill-box;
  transform-origin: center;
  animation: recordPulse 2.4s ease-in-out infinite;
}

@keyframes recordPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.75);
    /* Don't fade all the way to invisible — keep a hint visible at the
       widest point so the eye picks up the pulse rhythm */
    opacity: 0.25;
  }
}

/* Floating label above the dot. font-size in SVG accepts unitless
   values measured in user units, so the calc() trick keeps the text
   the same on-screen size at all zoom levels. */
.engagement .record-label {
  font-size: calc(160 / var(--zoom));
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  fill: black;
  text-anchor: middle;
  letter-spacing: 0.08em;
  pointer-events: none;
  /* Black stroke painted underneath the fill keeps it legible
     against the busy topo map background */
  stroke: var(--bg-void);
  stroke-width: calc(6 / var(--zoom));
  paint-order: stroke fill;
}

/* When in spl181 ice-blue mode, the record ring + label match */
.engagement.player-spl181 .pulse-ring {
  stroke: var(--ice-bright);
}

/* Details panel on the right */
.map-details {
  background: var(--bg-panel-2);
  border: 1px solid var(--border-faint);
  padding: 20px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--bone-dim);
  position: sticky;
  top: 24px;
  height: fit-content;
  align-self: start;
}

.map-details .placeholder {
  color: var(--muted);
  text-align: center;
  padding: 60px 0;
  letter-spacing: 0.18em;
  font-size: 12px;
}

.map-details .detail-title {
  font-family: "Oswald", sans-serif;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-faint);
}

.map-details .row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}

.map-details .row .lbl {
  color: var(--muted);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 12px;
}

.map-details .row .val {
  color: var(--bone);
  text-align: right;
}

.map-details .row .val.outcome-win {
  color: var(--brass);
}
.map-details .row .val.outcome-lose {
  color: var(--blood-bright);
}
.map-details .row .val.outcome-neutral {
  color: var(--moss);
}

/* =========================================================================
   MAP LEGEND
   Static reference at the bottom of the details panel — always visible
   whether or not an engagement is hovered. Each row pairs a small
   visual sample with a label.
========================================================================= */
.map-legend {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-faint);
}

.map-legend .legend-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--brass);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.map-legend .legend-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 5px 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--bone-dim);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Icon container — fixed size so labels line up regardless of icon */
.map-legend .legend-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Dot variants — one per engagement color on the map */
.map-legend .legend-icon.dot-cazzac,
.map-legend .legend-icon.dot-spl181,
.map-legend .legend-icon.dot-down,
.map-legend .legend-icon.dot-ai {
  width: 12px;
  border-radius: 50%;
  border: 1px solid var(--bg-void);
}

.map-legend .legend-icon.dot-cazzac {
  background: var(--brass-bright);
}
.map-legend .legend-icon.dot-spl181 {
  background: var(--ice-bright);
}
.map-legend .legend-icon.dot-down {
  background: var(--blood-bright);
}
.map-legend .legend-icon.dot-ai {
  background: var(--moss);
}

/* Pulsing ring icon — center dot + animated outer ring, mirrors the
   record-shot effect on the map */
.map-legend .legend-icon.icon-pulse::before {
  content: "";
  position: absolute;
  inset: 6px;
  background: var(--brass-bright);
  border-radius: 50%;
}

.map-legend .legend-icon.icon-pulse::after {
  content: "";
  position: absolute;
  inset: 1px;
  border: 1.5px solid var(--brass-bright);
  border-radius: 50%;
  animation: legendPulse 2.4s ease-in-out infinite;
}

@keyframes legendPulse {
  0%,
  100% {
    transform: scale(0.7);
    opacity: 0.9;
  }
  50% {
    transform: scale(1);
    opacity: 0.25;
  }
}

/* Headshot crosshair icon — inline SVG mirrors the on-map crosshair */
.map-legend .legend-icon.icon-headshot svg {
  width: 18px;
  height: 18px;
}

.map-legend .legend-icon.icon-headshot line {
  stroke: var(--steel);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.map-legend .legend-icon.icon-headshot circle {
  fill: var(--steel);
}

@media (max-width: 1100px) {
  .shell {
    padding: 0 24px 60px;
  }
  .ops-header {
    padding: 12px 24px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 0;
  }
  .stat-block:nth-child(3) {
    border-left: none;
    padding-left: 0;
  }
  .main-grid {
    grid-template-columns: 1fr;
  }
  .combat-grid {
    grid-template-columns: 1fr;
  }
  .silhouette-wrap {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .title-block .coord {
    display: none;
  }
  /* Stack the map and details panel on narrow screens */
  .map-layout {
    grid-template-columns: 1fr;
  }
  .map-details {
    position: static;
  }
}