html {
  overflow-x: auto; /* horizontal scroll instead of collapse when viewport < min-width */
}

/* ── Accessibility ───────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html, body {
  border: 0;
  margin: 0;
  font-family: verdana;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

#modal-backdrop {
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1000;
  position: absolute;
  background: rgba(80, 80, 80, 0.9);
  margin-top: 0px;
  margin-left: 0px;
  cursor: pointer;
}

#app {
  display: flex;
  flex-direction: column;
  min-width: 960px;
  flex: 1;
  min-height: 0;
}

#app[class*="layout-mode-"] {
  overflow: hidden;
}

#menu {
  display: flex;
  align-items: center;
  max-height: 2.5rem;
  padding: 0.15rem 0.25rem;
  border-bottom: 1px solid #000;
  background-color: #5fa5cb;
}

#menu-target svg:hover {
  cursor: pointer;
  fill: #FFF;
}

#menu-target svg:active {
  fill: #EEE;
}

.menu-item {
  display: inline-block;
  vertical-align: top;
  font: 14px Verdana;
  padding-left: 0.25rem;
}

.menu-item:last-child {
  margin-left: auto;
  margin-right: 0.25rem;
  float: right;
}

.menu-item a {
  text-decoration: none;
}

.menu-item select {
  font: 14px Verdana;
}

.menu-item-button {
  height: 26px;
  font: 14px Verdana;
}

.spacer {
  margin-left: 0.25rem;
}


#panel {
  display: none;
  font-size: 12px;
  background: #CCC;
  border: 1px solid #333;
  position: absolute;
  top: 2.35rem;
  z-index: 20;
  padding: 0.55rem;
}

#panel input {
  width: 60px;
}

#panel ul {
  margin: 0;
  padding: 0;
  margin-top: 0.45rem;
}

#panel li {
  display: block;
  list-style: none;
  padding: 0.45rem 0;
  padding-left: 0.15rem;
  border-bottom: 1px solid #333;
  cursor: pointer;
  user-select: none;
}

#panel li:hover {
  background-color: #EEE;
}

#panel li:last-child {
  border-bottom: none;
}

#upload-wrapper {
  display: none;
  z-index: 10;
  position: absolute;
  left: calc(50% - (325px /2));
  top: 125px;
  width: 325px;
  height: 65px;
  background: #EEE;
  border: 1px solid #000;
  border-radius: 1.25rem;
  font-size: 11px;
}

#upload-finished,
#upload-error,
#upload-no-ticket,
#upload-progress-loader,
#upload-not-found,
#upload-not-supported {
  display: flex;
  align-items: center;
  justify-content: center;
}

#upload-finished,
#upload-error,
#upload-no-ticket,
#upload-not-found,
#upload-not-supported {
  display: none;
  padding: 1rem;
}

#upload-finished {
  flex-direction: column;
}

#uploading-icon {
  display: inline-block;
  width: 65px;
  height: 65px;
}

.side-panel {
  display: none !important;
  overflow: hidden;
  background: #EEE;
  z-index: 20;
  border: 1px solid #333;
  border-right: none;
  float: right;
  position: absolute;
  right: 0;
  top: 60px;
  min-height: 400px;
}

.side-panel-header {
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  height: 1.75rem;
  border-bottom: 1px solid #333;
  padding: 0.15rem 0.25rem;
  font-size: 13px;
}

.side-panel-header .panel-header-item {
  display: flex;
  justify-content: left;
  align-items: center;
  height: 100%;
  background-color: #99c5de;
}

.side-panel-header .panel-header-item div {
  padding: 0 0.5rem;
}

.side-panel-header .panel-header-item:hover {
  cursor: pointer;
  background-color: #5fa5cb;
}

.side-panel-header .shown-header {
  background-color: #C3C3C3;
}

#pro-replays,
#about-wc3v {
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#recent-replays {
  display: flex;
}

#about-wc3v {
  padding: 0.5rem;
  font-size: 14px;
}

.side-panel table {
  font-size: 12px;
}

.side-panel h4 {
  padding: 0.25rem;
}

.side-panel p {
  padding: 0.25rem;
  width: 325px;
}

.side-panel td {
  padding: 0.25rem;
  border-bottom: 1px solid #C3C3C3;
  max-width: 150px;
}

.shown {
  display: block;
}

.wc3v-logo {
  font: 20px Verdana;
  color: #FFFFFF;
}

#input-map-file {
  font-size: 18px;
  width: 400px;
  text-align: center;
}

/* ============================================================
   LAYOUT MODE SYSTEM — CSS Grid on #content
   ============================================================ */

#content {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* --- Gameplay Area: flex column, match-header + gameplay-row --- */
#gameplay-area {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#gameplay-row {
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#scrubber-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2.25rem;
  z-index: 10;
}

/* --- Gameplay Mode (Replay Only) --- */
.layout-mode-gameplay #build-area { display: none; }

/* --- Static Build Order Mode (Build Only) --- */
.layout-mode-static-bo #gameplay-area { display: none; }
.layout-mode-static-bo #build-area { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow-y: auto; }

.layout-mode-static-bo #build-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  top: auto;
}

/* --- Live Build Order Mode (Default) --- */
.layout-mode-live-bo #content {
  display: flex;
  background: var(--bo-bg);
}

.layout-mode-live-bo #gameplay-area { position: relative; flex: 1 1 0%; min-width: 340px; min-height: 0; max-height: 100%; border-left: 1px solid var(--bo-border-solid); background: var(--bo-bg); padding-right: 12px; }
.layout-mode-live-bo #build-area { display: block; flex: 0 0 auto; width: 660px; min-width: 480px; overflow-y: auto; order: -1; padding: 0 12px; }

.layout-mode-live-bo #build-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  top: auto;
}

.layout-mode-live-bo #player-status-wrapper { display: none; }
.layout-mode-live-bo #scrubber-bar { background: var(--bo-bg); }

/* --- Gameplay Row overrides --- */

/* --- Map Container (wraps canvases + option buttons) --- */

#map-container {
  position: relative;
  flex: 1 1 0%;
  min-height: 0;
  border: 1px solid #000;
}

#main-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  container-type: inline-size;
}

/* --- Build Area --- */

#build-area {
  display: none;
  overflow-x: auto;
}

/* --- Scrubber Bar --- */

/* --- Live BO event highlight --- */

.bo-row.bo-live-active,
.bo-hero-training-card.bo-live-active {
  outline: 1px solid var(--bo-accent);
  background: rgba(240, 178, 50, 0.08) !important;
}

.layout-mode-live-bo .bo-row,
.layout-mode-live-bo .bo-hero-training-card {
  cursor: pointer;
}

/* ============================================================
   BUILD ORDER PANEL — bo- prefixed styles
   ============================================================ */

#build-wrapper {
  display: block;
  position: relative;
  top: auto;
  z-index: 5;
  background: var(--bo-bg);
  border: none;
  padding: 0;
  overflow-y: auto;
  font-family: 'Segoe UI', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--bo-text);
}

#build-wrapper::-webkit-scrollbar { width: 6px; }
#build-wrapper::-webkit-scrollbar-track { background: var(--bo-bg); }
#build-wrapper::-webkit-scrollbar-thumb { background: var(--bo-scrollbar-thumb); border-radius: 3px; }

/* (bo-header removed — player chips auto-selected, no header bar) */

/* View toggle buttons */

#bo-view-toggle {
  display: flex;
  gap: 4px;
}

.bo-toggle-btn {
  font-weight: 600;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  background: var(--bo-button-bg);
  color: var(--bo-text-muted);
  transition: all 0.15s ease;
}

.bo-toggle-btn.selected {
  background: var(--bo-accent);
  color: var(--bo-bg);
}

.bo-toggle-btn:hover:not(.selected) {
  background: var(--bo-button-hover);
  color: var(--bo-text);
}

/* --- Empty state --- */

#bo-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 48px 16px;
  color: var(--bo-text-muted);
  font-size: 14px;
}

#bo-empty span {
  background: var(--bo-header-bg);
  border: 1px solid var(--bo-border-solid);
  border-radius: 6px;
  padding: 16px 24px;
}

/* --- Player columns container --- */

#bo-content {
  position: relative;
}

#bo-columns {
  display: flex;
  gap: 0;
  padding: 0 6px;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  position: relative;
}

#bo-columns.bo-single {
  justify-content: center;
  padding-left: 40px;
}

.bo-side {
  flex: 1;
  display: flex;
  gap: 4px;
  position: relative;
  z-index: 1;
}

#bo-timeline-gap {
  width: 40px;
  flex-shrink: 0;
}

.bo-column {
  flex: 1;
  min-width: 170px;
  max-width: 280px;
}

/* --- Timeline Spline SVG overlay --- */

#bo-timeline-svg {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 2;
}

.bo-spline-line {
  stroke: rgba(160, 180, 200, 0.55);
  stroke-width: 2.5;
}

.bo-spline-glow {
  stroke: rgba(100, 160, 220, 0.15);
  stroke-width: 6;
}

.bo-connector {
  fill: none;
  stroke: rgba(170, 190, 210, 0.55);
  stroke-width: 2;
}

/* ── Hierarchical tick marks — ruler/clock aesthetic ── */

/* 30-second sub-ticks: subtle but clearly present */
.bo-tick-30s {
  stroke: rgba(150, 175, 200, 0.35);
  stroke-width: 1.5;
}

/* 1-minute ticks: solid, readable */
.bo-tick-1m {
  stroke: rgba(170, 195, 220, 0.60);
  stroke-width: 2;
}

/* 1-minute dot on spine */
.bo-marker-1m {
  fill: rgba(170, 195, 220, 0.65);
}

/* 1-minute label — solid pill container */
.bo-time-label-1m {
  fill: rgba(210, 225, 240, 1.0);
  font-size: 10px;
  font-weight: 700;
  font-family: 'Consolas', 'Cascadia Mono', monospace;
  user-select: none;
}

.bo-time-label-bg-1m {
  fill: #1a3050;
  stroke: rgba(140, 180, 220, 0.7);
  stroke-width: 1;
}

/* 5-minute: filled background bar across the spine */
.bo-tick-bar-5m {
  fill: rgba(80, 140, 200, 0.35);
}

/* 5-minute diamond */
.bo-marker-5m {
  fill: rgba(120, 180, 240, 0.80);
  stroke: rgba(160, 210, 255, 0.60);
  stroke-width: 1;
}

/* 5-minute label — prominent pill */
.bo-time-label-5m {
  fill: rgba(230, 240, 255, 1.0);
  font-size: 11px;
  font-weight: 700;
  font-family: 'Consolas', 'Cascadia Mono', monospace;
  user-select: none;
}

.bo-time-label-bg-5m {
  fill: #1e3a5c;
  stroke: rgba(100, 175, 250, 0.8);
  stroke-width: 1.25;
}

/* 10-minute: bold filled bar, unmissable */
.bo-tick-bar-10m {
  fill: rgba(70, 140, 220, 0.50);
}

/* 10-minute diamond — large and bright */
.bo-marker-10m {
  fill: rgba(130, 190, 255, 0.90);
  stroke: rgba(180, 220, 255, 0.80);
  stroke-width: 1.5;
}

/* 10-minute decorative ring */
.bo-marker-10m-ring {
  fill: none;
  stroke: rgba(90, 170, 255, 0.55);
  stroke-width: 1.5;
}

/* 10-minute label — bold, unmissable pill */
.bo-time-label-10m {
  fill: rgba(250, 252, 255, 1.0);
  font-size: 12px;
  font-weight: 700;
  font-family: 'Consolas', 'Cascadia Mono', monospace;
  user-select: none;
}

.bo-time-label-bg-10m {
  fill: #224268;
  stroke: rgba(100, 185, 255, 0.9);
  stroke-width: 1.5;
}

.bo-spine-node {
  fill: rgba(180, 200, 220, 0.55);
}

/* --- Build Order Theme Variables --- */

:root {
  --bo-bg: #0F1923;
  --bo-card-bg: #1A2332;
  --bo-row-hover: #1C2836;
  --bo-header-bg: #141D29;
  --bo-border: rgba(48,54,61,0.4);
  --bo-border-solid: #21262D;
  --bo-chip-bg: #21262D;
  --bo-button-bg: #21262D;
  --bo-button-hover: #30363D;
  --bo-scrollbar-thumb: #30363D;
  --bo-supply-bg: rgba(33,38,45,0.6);
  --bo-tavern: #9B6DFF;
  --bo-gold: #FFD700;
  --bo-lumber: #44DD88;
  --bo-food: #58A6FF;
  --bo-text: #C9D1D9;
  --bo-text-dim: #6E7681;
  --bo-text-muted: #8B949E;
  --bo-accent: #F0B232;
  --bo-tier1: #FFFFFF;
  --bo-tier2: #21A5E3;
  --bo-tier3: #FFFF33;
  --bo-font-mono: 'Consolas', 'Cascadia Mono', monospace;
}

/* === REDESIGNED PLAYER HEADER === */

.bo-player-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 3px solid var(--race-border, var(--bo-text-muted));
  background: var(--race-bg-grad, var(--bo-header-bg));
  position: relative;
}

.bo-player-header.bo-hdr-selected {
  outline: 2px solid #daa520;
  outline-offset: -2px;
  border-radius: 4px;
}

/* --- Toggle bar (always visible) --- */
.bo-hdr-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  margin: -4px -6px;
  border-radius: 4px;
}

.bo-hdr-build-name {
  font-weight: 400;
  font-size: 13px;
  color: var(--bo-text-muted);
  margin-left: 4px;
}

.bo-hdr-player-name {
  font-weight: 700;
  font-size: 18px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1; /* shrink to available space before ellipsis kicks in */
}

.bo-hdr-tier-badge {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 2px 7px;
  border-radius: 3px;
  flex-shrink: 0;
}

.bo-hdr-tier-badge.t1 { color: var(--bo-tier1); border: 1px solid rgba(255,255,255,0.25); }
.bo-hdr-tier-badge.t2 { color: var(--bo-tier2); border: 1px solid rgba(33,165,227,0.35); }
.bo-hdr-tier-badge.t3 { color: var(--bo-tier3); border: 1px solid rgba(255,255,51,0.35); }

.bo-hdr-race-badge {
  display: inline-block;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 2px;
  padding: 3px 10px;
  border-radius: 3px;
  color: #FFFFFF;
  background: var(--race-border, var(--bo-text-muted));
  flex-shrink: 0;
  margin-left: auto;
}

.bo-hdr-base-btn {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 3px;
  color: #aab;
  border: 1px solid #3a4a55;
  background: #1a2830;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 6px;
  text-transform: uppercase;
}
.bo-hdr-base-btn:hover {
  color: #fff;
  border-color: #5a7a8a;
  background: #243540;
}

/* --- Tier header --- */

.bo-tier-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  padding: 0 12px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1px;
  border-left: 4px solid;
  border-radius: 3px;
  margin: 4px 4px 2px;
}

/* Tier 1 header hidden via JS — these rules kept only as fallback */
.bo-tier-header.tier-1 { border-left-color: var(--bo-tier1); color: var(--bo-tier1); background: var(--bo-header-bg); }
.bo-tier-header.tier-2 {
  border-left-color: var(--bo-tier2);
  color: var(--bo-tier2);
  background: rgba(33, 165, 227, 0.12);
  border: 1px solid rgba(33, 165, 227, 0.30);
  border-left: 4px solid var(--bo-tier2);
}
.bo-tier-header.tier-3 {
  border-left-color: var(--bo-tier3);
  color: var(--bo-tier3);
  background: rgba(255, 255, 51, 0.10);
  border: 1px solid rgba(255, 255, 51, 0.25);
  border-left: 4px solid var(--bo-tier3);
}

.bo-tier-time-badge {
  font-weight: 700;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 3px;
  color: var(--bo-bg);
  margin-left: 6px;
}

.bo-tier-header.tier-2 .bo-tier-time-badge { background: var(--bo-tier2); }
.bo-tier-header.tier-3 .bo-tier-time-badge { background: var(--bo-tier3); }

.bo-tier-supply {
  font-weight: 600;
  font-size: 14px;
  color: var(--bo-text-muted);
}

/* --- Tier upgrade card (inline in build order timeline) --- */

.bo-tier-upgrade-card {
  font-weight: 700;
  font-size: 14px;
}

.bo-tier-upgrade-card .bo-row-icon {
  border-color: currentColor;
}

.bo-tier-upgrade-card.tier-2 {
  background: linear-gradient(90deg, rgba(33,165,227,0.2), rgba(33,165,227,0.05));
  border-left: 4px solid var(--bo-tier2);
  color: var(--bo-tier2);
}

.bo-tier-upgrade-card.tier-3 {
  background: linear-gradient(90deg, rgba(255,255,51,0.15), rgba(255,255,51,0.03));
  border-left: 4px solid var(--bo-tier3);
  color: var(--bo-tier3);
}

/* --- Tier complete card (upgrade finished + army summary) --- */

.bo-tier-complete-card {
  border-radius: 4px;
  margin: 2px 4px;
  overflow: hidden;
}

.bo-tier-complete-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  min-height: 42px;
  font-weight: 700;
  font-size: 14px;
}

.bo-tier-complete-header .bo-tier-complete-icon {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}

.bo-tier-complete-header .bo-tier-complete-label {
  font-weight: 800;
  letter-spacing: 0.5px;
}

.bo-tier-complete-header .bo-tier-complete-time {
  margin-left: auto;
  font-size: 0.85rem;
  opacity: 0.7;
  font-weight: 400;
}

.bo-tier-complete-card.tier-2 {
  border-left: 4px solid var(--bo-tier2);
}

.bo-tier-complete-card.tier-2 .bo-tier-complete-header {
  background: linear-gradient(90deg, rgba(33,165,227,0.25), rgba(33,165,227,0.08));
  color: var(--bo-tier2);
}

.bo-tier-complete-card.tier-3 {
  border-left: 4px solid var(--bo-tier3);
}

.bo-tier-complete-card.tier-3 .bo-tier-complete-header {
  background: linear-gradient(90deg, rgba(255,255,51,0.2), rgba(255,255,51,0.05));
  color: var(--bo-tier3);
}

.bo-tier-complete-card .bo-army-summary {
  padding: 6px 12px 8px;
  background: rgba(255,255,255,0.03);
}

/* --- Expansion Made bar --- */

.bo-expansion-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  margin: 3px 0;
  background: linear-gradient(90deg, rgba(255, 200, 50, 0.15), rgba(255, 200, 50, 0.04));
  border-left: 4px solid #f5c542;
  border-radius: 0 3px 3px 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #f5c542;
}

.bo-expansion-icon {
  width: 28px;
  height: 28px;
  border-radius: 3px;
  flex-shrink: 0;
}

.bo-expansion-label {
  flex: 1;
}

.bo-expansion-cost {
  color: #aaa;
  font-weight: 400;
  font-size: 11px;
}

/* --- Scout card --- */

.bo-scout-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  margin: 3px 0;
  background: linear-gradient(90deg, rgba(68, 221, 187, 0.12), rgba(68, 221, 187, 0.03));
  border-left: 3px solid #44DDBB;
  border-radius: 0 3px 3px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #44DDBB;
  opacity: 0.85;
}

.bo-scout-label {
  flex: 1;
}

/* --- Research / Upgrade bars --- */

.bo-research-bar {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  min-height: 32px;
  padding: 2px 4px;
  margin: 3px 0;
  border-radius: 0 3px 3px 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.bo-attack-upgrade {
  background: linear-gradient(90deg, rgba(230, 80, 60, 0.18), rgba(230, 80, 60, 0.04));
  border-left: 4px solid #e6503c;
  color: #e8a090;
}

.bo-defense-upgrade {
  background: linear-gradient(90deg, rgba(70, 140, 220, 0.18), rgba(70, 140, 220, 0.04));
  border-left: 4px solid #468cdc;
  color: #90b8e0;
}

.bo-ability-research {
  background: linear-gradient(90deg, rgba(160, 100, 220, 0.15), rgba(160, 100, 220, 0.04));
  border-left: 4px solid #a064dc;
  color: #c8a8e8;
}

.bo-research-bar .bo-row-desc {
  gap: 8px;
}

.bo-research-badge {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 1px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}

.bo-research-badge.atk {
  background: rgba(230, 80, 60, 0.3);
  color: #f0a090;
}

.bo-research-badge.def {
  background: rgba(70, 140, 220, 0.3);
  color: #a0c8f0;
}

.bo-research-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Item purchase bar --- */
.bo-item-bar {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  min-height: 32px;
  padding: 2px 4px;
  margin: 3px 0;
  border-radius: 0 3px 3px 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: linear-gradient(90deg, rgba(68, 221, 136, 0.15), rgba(68, 221, 136, 0.04));
  border-left: 4px solid #44DD88;
  color: #a0e8c0;
}

.bo-item-bar .bo-row-desc {
  gap: 8px;
}

.bo-item-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 1px 6px;
  border-radius: 3px;
  flex-shrink: 0;
  background: rgba(68, 221, 136, 0.25);
  color: #a0f0c0;
}

.bo-item-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bo-item-uncertain {
  opacity: 0.6;
  border-left-style: dashed;
}

/* --- Mercenary hire bar --- */
.bo-merc-bar {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  min-height: 32px;
  padding: 2px 4px;
  margin: 3px 0;
  border-radius: 0 3px 3px 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: linear-gradient(90deg, rgba(255, 136, 68, 0.15), rgba(255, 136, 68, 0.04));
  border-left: 4px solid #FF8844;
  color: #e8c0a0;
}

.bo-merc-bar .bo-row-desc {
  gap: 8px;
}

.bo-merc-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 1px 6px;
  border-radius: 3px;
  flex-shrink: 0;
  background: rgba(255, 136, 68, 0.25);
  color: #f0c0a0;
}

.bo-merc-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bo-research-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-right: 2px;
}

/* Upgrade badges in army summaries */
.bo-summary-items.upgrades {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.bo-summary-upgrade {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
}
.bo-summary-upgrade.atk {
  background: rgba(200, 60, 60, 0.25);
  color: #f08080;
}
.bo-summary-upgrade.def {
  background: rgba(60, 120, 200, 0.25);
  color: #7ab8f5;
}
.bo-summary-upgrade.ability {
  background: rgba(140, 80, 200, 0.2);
  color: #c8a0f0;
}
.bo-upgrade-badge {
  font-weight: 700;
  font-size: 11px;
}
.bo-upgrade-badge.atk { color: #f08080; }
.bo-upgrade-badge.def { color: #7ab8f5; }
.bo-upgrade-name {
  font-weight: 400;
  font-size: 11px;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bo-summary-upgrade .bo-summary-icon {
  width: 20px;
  height: 20px;
  border-radius: 2px;
}

/* --- Column header (sticky icon labels for grid columns) --- */

.bo-col-header {
  display: grid;
  grid-template-columns: 1fr 44px;
  align-items: center;
  height: 24px;
  padding: 0 4px;
  background: var(--bo-header-bg);
  border-top: 1px solid var(--bo-border-solid);
  border-bottom: 1px solid var(--bo-border-solid);
  position: sticky;
  top: 0;
  z-index: 2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--bo-text-dim);
  text-transform: uppercase;
}

.bo-col-h-icon {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  object-fit: cover;
  vertical-align: middle;
}

.bo-col-h-desc { text-align: left; padding-left: 2px; }
.bo-col-h-supply { text-align: center; color: #8CB4FF; font-size: 11px; }

/* --- Build order rows (3-column grid: desc | cost | supply) --- */

.bo-row {
  display: grid;
  grid-template-columns: 1fr 44px;
  align-items: center;
  min-height: 32px;
  padding: 2px 3px;
  border-bottom: 1px solid var(--bo-border);
}

.bo-row:hover { background: var(--bo-row-hover); }

.bo-row-supply {
  font-family: var(--bo-font-mono);
  text-align: center;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 1px 2px;
  margin: 1px 0;
}
.bo-supply-nums {
  display: flex;
  align-items: baseline;
  justify-content: center;
}
.bo-supply-used { font-size: 12px; font-weight: 700; }
.bo-supply-sep { font-size: 10px; margin: 0 1px; font-weight: 600; }
.bo-supply-cap { font-size: 12px; font-weight: 700; }
.bo-supply-upkeep {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 0;
}

/* WC3-style upkeep coloring + borders */
.bo-row-supply.bo-upkeep-none {
  color: #E8F0FF;
  border-color: rgba(140, 180, 255, 0.35);
}
.bo-row-supply.bo-upkeep-low {
  color: #FF8C00;
  border-color: rgba(255, 140, 0, 0.4);
}
.bo-row-supply.bo-upkeep-high {
  color: #FF4444;
  border-color: rgba(255, 68, 68, 0.45);
}

/* Glow on the used number */
.bo-row-supply.bo-upkeep-none .bo-supply-used { text-shadow: 0 0 10px rgba(140, 180, 255, 0.6); }
.bo-row-supply.bo-upkeep-low  .bo-supply-used { text-shadow: 0 0 10px rgba(255, 140, 0, 0.6); }
.bo-row-supply.bo-upkeep-high .bo-supply-used { text-shadow: 0 0 10px rgba(255, 68, 68, 0.6); }

.bo-row-desc {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--bo-text);
  padding: 1px 2px;
  min-width: 0;
}

/* When icon is inside a cost-wrapper, flatten bottom corners so badge connects */
.bo-icon-wrap .bo-row-icon { border-radius: 3px 3px 0 0; }

.bo-row-icon {
  width: 28px;
  height: 28px;
  border-radius: 3px;
  border: 2px solid var(--bo-border-solid);
  object-fit: cover;
  flex-shrink: 0;
}

.bo-row.building-row .bo-row-icon { border-color: var(--bo-food); }
.bo-row.worker-row .bo-row-icon { opacity: 0.85; }

.bo-row-text {
  flex: 1;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Icon wrapper: portrait + inline cost badge underneath */
.bo-icon-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 32px;
}

.bo-icon-cost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: 9px;
  font-weight: 600;
  font-family: var(--bo-font-mono);
  line-height: 1;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0 0 3px 3px;
  padding: 1px 2px;
  margin-top: -1px;
  width: 100%;
  box-sizing: border-box;
}

.bo-icon-cost .bo-cost-gold,
.bo-icon-cost .bo-cost-lumber {
  font-size: 9px;
  font-weight: 600;
  font-family: var(--bo-font-mono);
}
.bo-cost-gold { color: var(--bo-gold); }
.bo-cost-lumber { color: var(--bo-lumber); }

.bo-icon-cost-sep {
  color: rgba(255, 255, 255, 0.25);
  font-size: 8px;
  margin: 0 1px;
}

/* Inline cost dot (used in upgrade bars, army summary) */
.bo-cost-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 3px;
  vertical-align: middle;
}
.gold-dot { background: var(--bo-gold); }
.lumber-dot { background: var(--bo-lumber); }

/* Inline cost colors (for upgrade bars, etc.) */
.bo-gold { color: var(--bo-gold); font-weight: 600; }
.bo-lumber { color: var(--bo-lumber); font-weight: 600; }
.bo-food { color: var(--bo-text-muted); }
.bo-food-provide { color: var(--bo-food); }

/* Group count badge */
.bo-unit-count {
  font-size: 17px;
  font-weight: 800;
  color: var(--bo-accent);
  margin-right: 2px;
}

/* Worker assignment rows */
.bo-row.worker-row { border-left: 3px solid transparent; }
.bo-row.worker-row.assign-gold { border-left-color: var(--bo-gold); }
.bo-row.worker-row.assign-lumber { border-left-color: var(--bo-lumber); }
.bo-row.worker-row.assign-build { border-left-color: var(--bo-food); }

.bo-assign-gold { color: var(--bo-gold); }
.bo-assign-lumber { color: var(--bo-lumber); }
.bo-assign-build { color: var(--bo-food); }

/* Worker assignment target pill */
.bo-assign-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: middle;
  text-transform: uppercase;
}
.bo-assign-tag.tag-gold {
  background: rgba(255, 215, 0, 0.2);
  color: var(--bo-gold);
  border: 1px solid rgba(255, 215, 0, 0.35);
}
.bo-assign-tag.tag-lumber {
  background: rgba(68, 221, 136, 0.15);
  color: var(--bo-lumber);
  border: 1px solid rgba(68, 221, 136, 0.3);
}
.bo-assign-tag.tag-build {
  background: rgba(88, 166, 255, 0.15);
  color: var(--bo-food);
  border: 1px solid rgba(88, 166, 255, 0.3);
}

/* Inline worker G/L counts on worker assign rows */
.bo-wk-inline {
  font-size: 11px;
  font-weight: 600;
  font-family: var(--bo-font-mono);
  margin-left: 6px;
  padding: 1px 5px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  color: var(--bo-text-dim);
}
.bo-wk-g { color: var(--bo-gold); }
.bo-wk-l { color: var(--bo-lumber); }

/* Consumed worker note on building rows */
.bo-consumed-note {
  font-size: 0.75em;
  color: #F57C00;
  margin-left: 4px;
  font-style: italic;
  opacity: 0.85;
}

/* Supply building rows — use race building bg, food-colored left border + brighter text */
.bo-row.supply-row,
.bo-tier-section .bo-row.supply-row {
  border-left: 3px solid var(--bo-food);
}
.bo-row.supply-row .bo-row-text {
  color: #fff;
  font-weight: 600;
}

/* Supply completion row — appears when supply building finishes */
.bo-row.supply-complete-row,
.bo-tier-section .bo-row.supply-complete-row {
  border-left: 3px solid #4ECDC4;
  background: rgba(78, 205, 196, 0.12);
  min-height: 32px;
}

.bo-supply-complete-text {
  color: #4ECDC4;
  font-weight: 500;
  font-size: 13px;
}

.bo-supply-badge {
  display: inline-block;
  background: rgba(78, 205, 196, 0.25);
  color: #4ECDC4;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 6px;
  letter-spacing: 0.3px;
}

/* Shop building rows */
.bo-row.shop-row .bo-row-icon {
  border: 2px solid var(--bo-tavern);
  border-radius: 4px;
}

/* --- Combined hero training card (badge left, portrait, name, stacked costs) --- */

.bo-hero-training-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bo-card-bg);
  border-radius: 6px;
  border-left: 4px solid var(--player-color, var(--bo-text-muted));
  padding: 8px 12px;
  margin: 4px 4px;
  min-height: 56px;
}

.bo-hero-portrait-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.bo-training-costs {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 13px;
  font-family: var(--bo-font-mono);
  align-items: flex-end;
  margin-left: auto;
  flex-shrink: 0;
}

/* First skill choice bar in hero training card (larger than level-up skill bar) */
.bo-training-skills {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.bo-skill.bo-skill-lg .bo-skill-icon {
  width: 28px;
  height: 28px;
  border-radius: 4px;
}

.bo-skill.bo-skill-lg .bo-skill-level {
  font: 700 0.65rem Verdana;
}

.bo-hero-training-card.bo-live-active {
  outline: 1px solid var(--bo-accent);
  background: rgba(240,178,50,0.08);
}

/* --- Hero level-up card --- */

.bo-hero-level-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bo-card-bg);
  border-radius: 4px;
  border-left: 3px solid;
  padding: 6px 12px;
  margin: 2px 4px;
  min-height: 42px;
  cursor: pointer;
}

.bo-hero-level-card:hover { background: var(--bo-row-hover); }

.bo-level-portrait {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--bo-accent);
  object-fit: cover;
  flex-shrink: 0;
}

.bo-level-info { flex: 1; min-width: 0; }

.bo-level-title {
  font-size: 14px;
  color: var(--bo-accent);
  font-weight: 700;
  display: block;
}

.bo-level-skills { display: flex; gap: 6px; margin-top: 2px; }

.bo-skill {
  position: relative;
  display: inline-block;
  font-size: 11px;
  color: var(--bo-text-dim);
}

.bo-skill.active { color: var(--bo-accent); }

.bo-skill-icon {
  width: 22px;
  height: 22px;
  border-radius: 3px;
  border: 2px solid transparent;
  object-fit: cover;
  display: block;
}

/* Untrained spell — slight dim, no border */
.bo-skill-icon.dimmed { opacity: 0.55; }

/* Trained spell — white border */
.bo-skill.learned .bo-skill-icon { border-color: rgba(255,255,255,0.7); }

/* Just leveled in this card — yellow border */
.bo-skill.active .bo-skill-icon { border-color: #f0b232; }

/* Skill level badge — overlaid on icon (bottom-right) */
.bo-skill-level {
  position: absolute;
  bottom: 1px;
  right: 1px;
  font: 700 0.6rem Verdana;
  color: #fff;
  background: rgba(0,0,0,0.75);
  border-radius: 2px;
  padding: 0 2px;
  line-height: 1.2;
}
.bo-skill.active .bo-skill-level { color: #f0b232; }
.bo-skill-level.hidden { display: none; }


.bo-hero-level-card.bo-live-active {
  outline: 1px solid var(--bo-accent);
  background: rgba(240,178,50,0.08);
}

/* --- Hero portrait + info (shared by hero training card) --- */

.bo-hero-portrait {
  width: 46px;
  height: 46px;
  border-radius: 6px;
  border: 2px solid var(--player-color, var(--bo-text-muted));
  object-fit: cover;
  flex-shrink: 0;
}

.bo-hero-card-info { flex: 1; }

.bo-hero-card-name {
  font-weight: 700;
  font-size: 16px;
  color: var(--bo-tier1);
  display: block;
}


.bo-hero-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--bo-tier1);
  flex-shrink: 0;
  white-space: nowrap;
}

.bo-hero-card-badge.tavern { background: var(--bo-tavern); }

/* --- Hero complete banner row (like supplyComplete) --- */

.bo-row.hero-complete-row,
.bo-tier-section .bo-row.hero-complete-row {
  background: rgba(240, 178, 50, 0.08);
  border-left: 3px solid var(--bo-accent);
  min-height: 32px;
}

.bo-hero-complete-text {
  color: var(--bo-accent);
  font-weight: 600;
  font-size: 13px;
}

.bo-hero-complete-skill {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  border: 1px solid var(--bo-accent);
  object-fit: cover;
  vertical-align: middle;
  margin-right: 6px;
}

/* --- Army summary (multi-section card) --- */

.bo-army-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  margin: 6px 4px;
  font-size: 13px;
  color: var(--bo-text-muted);
  background: var(--bo-card-bg);
  border: 1px solid var(--bo-border);
  border-radius: 6px;
  max-width: 380px;
}

.bo-summary-section {
  display: grid;
  grid-template-columns: 68px 1fr;
  align-items: start;
  gap: 2px 6px;
  padding: 3px 0;
}

.bo-summary-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--bo-text-dim);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 30px;
}

.bo-summary-items {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.bo-summary-hero {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.bo-summary-hero.training { opacity: 0.5; font-style: italic; }
.bo-summary-hero.training img { filter: grayscale(0.5); }

.bo-summary-hero-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--bo-text);
}

.bo-summary-hero.training .bo-summary-hero-label { color: var(--bo-text-muted); }
.bo-summary-hero.alive .bo-summary-hero-label { color: var(--bo-accent); }

.bo-summary-icon {
  width: 30px;
  height: 30px;
  border-radius: 3px;
  object-fit: cover;
  border: 1px solid var(--bo-border);
}

.bo-summary-icon.hero { border-radius: 50%; border-color: var(--bo-accent); }

.bo-summary-unit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.bo-army-count { font-weight: 700; font-size: 0.8rem; color: var(--bo-text); }

/* Attack / Armor type summary icons */
.bo-type-summary-icon {
  width: 20px;
  height: 20px;
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,0.15);
}

/* Summary card header */
.bo-summary-header {
  font-size: 10px;
  font-weight: 700;
  color: #c8d8f0;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: -8px -10px 4px -10px;
  padding: 5px 10px;
  background: rgba(60, 90, 140, 0.25);
  border-bottom: 1px solid rgba(100, 150, 220, 0.3);
  border-radius: 6px 6px 0 0;
}

/* Unit row type icons (first occurrence) */
.bo-row-type-icon {
  width: 18px;
  height: 18px;
  border-radius: 2px;
  vertical-align: middle;
  margin-left: 4px;
  opacity: 0.85;
}


.bo-summary-section.economy {
  grid-template-columns: auto 1fr;
  padding-top: 4px;
  border-top: 1px solid var(--bo-border);
}
.bo-summary-section.economy .bo-summary-spent {
  justify-self: end;
}

.bo-summary-workers {
  display: flex;
  gap: 5px;
  font-weight: 600;
  font-family: var(--bo-font-mono);
  font-size: 11px;
}

.bo-summary-supply {
  font-weight: 700;
  font-family: var(--bo-font-mono);
  font-size: 11px;
  color: var(--bo-food);
}

.bo-summary-spent {
  display: flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
  font-family: var(--bo-font-mono);
  font-size: 11px;
}

/* --- Phase borders on tier sections --- */
.bo-tier-section.tier-1 :is(.bo-row, .bo-hero-level-card, .bo-hero-training-card) { border-left: 3px solid rgba(255,255,255,0.13); }
.bo-tier-section.tier-2 :is(.bo-row, .bo-hero-level-card, .bo-hero-training-card) { border-left: 3px solid rgba(33,165,227,0.13); }
.bo-tier-section.tier-3 :is(.bo-row, .bo-hero-level-card, .bo-hero-training-card) { border-left: 3px solid rgba(255,255,51,0.13); }

/* Worker rows override phase border with assignment color */
.bo-tier-section .bo-row.worker-row.assign-gold { border-left-color: var(--bo-gold); }
.bo-tier-section .bo-row.worker-row.assign-lumber { border-left-color: var(--bo-lumber); }
.bo-tier-section .bo-row.worker-row.assign-build { border-left-color: var(--bo-food); }

/* --- Race-themed row backgrounds by event type --- */
.bo-row.building-row { background: var(--race-row-building, rgba(88,166,255,0.08)); }
.bo-row.unit-row     { background: var(--race-row-unit, rgba(200,200,200,0.05)); }
.bo-hero-training-card { background: var(--race-row-hero, var(--bo-card-bg)); }
.bo-hero-level-card    { background: var(--race-row-hero, var(--bo-card-bg)); }

/* Hero-complete rows keep their own distinct background */
.bo-row.hero-complete-row { background: rgba(240, 178, 50, 0.08); }

/* --- Sticky army summary footer --- */
.bo-army-summary.sticky {
  z-index: 5;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.5);
}

/* --- Final economy summary card --- */
.bo-econ-summary {
  padding: 6px 10px;
  margin: 4px 4px;
  background: var(--bo-card-bg);
  border: 1px solid var(--bo-border);
  border-radius: 6px;
  max-width: 380px;
}

.bo-econ-summary > .bo-summary-label {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--bo-text-dim);
}

.bo-econ-detail {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px 10px;
  font-size: 11px;
}

.bo-econ-group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.bo-econ-group:last-child {
  justify-self: end;
}

.bo-econ-group .bo-summary-label {
  font-size: 9px;
  margin-right: 2px;
}

/* --- Live mode highlights --- */
.bo-row.bo-live-active, .bo-hero-training-card.bo-live-active {
  outline: 1px solid var(--bo-accent);
  background: rgba(240,178,50,0.08) !important;
}

/* --- Build order uses fixed width (1100px), scrolls horizontally on small screens --- */

/* #main-wrapper is now defined in the layout section above #map-container */

/* Wrapper that keeps overlay canvases aligned with the main canvas */
#canvas-group {
  position: relative;
  display: inline-block;
}

#view-selector {
  display: none;
  position: relative;
  top: 0;
  left: 0;
  z-index: 50
}

#view-selector ul {
  margin: 0;
  padding: 0;
}

#view-selector li {
  display: inline-block;
  width: 8rem;
  height: 2.25rem;
}

#view-selector li:hover {
  cursor: pointer;
  background-color: #ccc;
}

#view-selector li div {
  text-align: center;
  padding-top: 0.35rem;
}


/* #view-type-toggles removed — mode switching now in menu bar */

#player-status-toggles {
  font: 12px Verdana;
  width: 220px;
  text-align: center;
  padding: 4px 0;
}

.status-toggle {
  text-selection: none;
  cursor: pointer;
  border: 1px solid #CCC;
  display: inline-block;
  color: #FFFFFF;
  font-size: 13px;
  padding: 0.45rem 0.35rem;
}

.status-toggle.selected {
  border: 1px solid #000033;
  background-color: #CCC;
  color: #000;
}

.status-toggle:hover:not(.selected) {
  background: #C9DF9F;
}

/* --- Viewer Controls Bar (below canvas) --- */

.vc-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font: 11px Verdana;
  font-weight: 600;
  cursor: pointer;
  border-radius: 10px;
  background: #2a3a45;
  color: #6a7a85;
  border: 1px solid #3a4a55;
  user-select: none;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}

.vc-btn::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4a5a65;
  transition: background 0.12s;
  flex-shrink: 0;
}

.vc-btn:hover {
  background: #354550;
  color: #8a9aa5;
}

.vc-btn.on {
  background: #3a7ca5;
  color: #fff;
  border-color: #5fa5cb;
}

.vc-btn.on::before {
  background: #7ddfff;
}

.vc-btn.on:hover {
  background: #4a8cb5;
}

/* ============================================================
   MATCH HEADER — replay info dashboard above content
   ============================================================ */

#match-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: linear-gradient(to bottom, #1a2830, #15222a);
  border-bottom: 1px solid #2a3a45;
  flex-shrink: 0;
}

/* Creep Routes featured button — gold accent to stand out */
.vc-btn.vc-featured {
  border-color: rgba(218,165,32,0.4);
  color: #daa520;
}

.vc-btn.vc-featured:hover {
  background: rgba(218,165,32,0.15);
  color: #e8b830;
}

.vc-btn.vc-featured.on {
  background: rgba(218,165,32,0.3);
  color: #fff;
  border-color: #daa520;
}

.vc-btn.vc-featured::before {
  background: rgba(218,165,32,0.4);
}

.vc-btn.vc-featured.on::before {
  background: #f0c840;
}

.vc-btn.vc-featured.on:hover {
  background: rgba(218,165,32,0.4);
}

/* --- Player Matchup --- */
.mh-matchup {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  min-width: 540px;
}

.mh-vs {
  font: 700 0.85rem Verdana;
  color: #5a6a75;
  align-self: center;
  padding: 0 0.15rem;
  flex-shrink: 0;
}

.mh-player {
  flex: 1;
  min-width: 365px;
  padding: 0.4rem 0.6rem;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  border-left: 3px solid #3a4a55;
  flex-shrink: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.mh-expand-all {
  font: 600 0.65rem Verdana;
  color: #6a7a85;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 3px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  align-self: flex-start;
  user-select: none;
  transition: color 0.12s, background 0.12s;
  margin-bottom: 0.3rem;
}

.mh-expand-all:hover {
  color: #a0b0c0;
  background: rgba(255,255,255,0.08);
}

.mh-player-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0.05rem;
}

.mh-player-header-text {
  flex: 1;
  min-width: 0;
}

.mh-player-name {
  font: 700 1rem Verdana;
}

.mh-race-icon-lg {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(0,0,0,0.5);
}

/* Hero + Upgrade combined inline row */
.mh-hero-upgrades {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 0;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.mh-hu-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(255,255,255,0.12);
  min-height: 30px;
}

.mh-upgrades-inline {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.mh-status-compact {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mh-upg-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
}

/* Heroes (compact, max 2 per row via grid) */
.mh-heroes {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 6px;
  align-items: center;
}

.mh-hero {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
}

.mh-hero-portrait-wrap {
  position: relative;
  flex-shrink: 0;
}

.mh-hero-portrait {
  width: 38px;
  height: 38px;
  border-radius: 4px;
  border: 2px solid #4a5a65;
  display: block;
}

.mh-hero-level {
  position: absolute;
  bottom: -2px;
  right: -2px;
  font: 700 0.6rem Verdana;
  color: #fff;
  background: rgba(0,0,0,0.85);
  border: 1px solid #4a5a65;
  padding: 0 3px;
  border-radius: 3px;
  line-height: 1.3;
}

/* Hero spells — 2-col grid beside portrait */
.mh-hero-spells {
  display: grid;
  grid-template-columns: repeat(2, 20px);
  gap: 1px;
}

.mh-spell {
  position: relative;
  display: inline-block;
}

.mh-spell-icon {
  width: 20px;
  height: 20px;
  border-radius: 2px;
  border: 1px solid #3a4a55;
  display: block;
}

.mh-spell-level {
  position: absolute;
  bottom: 0;
  right: 0;
  font: 700 0.6rem Verdana;
  color: #fff;
  background: rgba(0,0,0,0.75);
  border-radius: 2px;
  padding: 0 2px;
  line-height: 1.2;
}

/* Tier progression */
.mh-tier-prog {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 0.3rem;
  flex-wrap: wrap;
}

.mh-tier-badge {
  font: 700 0.8rem Verdana;
  padding: 2px 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.05);
}

.mh-tier-badge.t1 { color: var(--bo-tier1, #ccc); border: 1px solid rgba(255,255,255,0.25); }
.mh-tier-badge.t2 { color: var(--bo-tier2, #21a5e3); border: 1px solid rgba(33,165,227,0.35); }
.mh-tier-badge.t3 { color: var(--bo-tier3, #ff3); border: 1px solid rgba(255,255,51,0.35); }

.mh-tier-arrow {
  font: 0.85rem Verdana;
  color: #5a6a75;
}

.mh-tier-time {
  font: 0.8rem Verdana;
  color: #7a8a95;
}

/* Expansion marker */
.mh-expansion-marker {
  font: 700 0.65rem Verdana;
  padding: 0 4px;
  border-radius: 3px;
  display: inline-block;
  white-space: nowrap;
}

.mh-expanded {
  color: #4caf50;
  background: rgba(76,175,80,0.12);
  border: 1px solid rgba(76,175,80,0.3);
}

.mh-no-expo {
  color: #9e9e9e;
  background: rgba(158,158,158,0.08);
  border: 1px solid rgba(158,158,158,0.2);
}

.mh-status-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  margin-bottom: 4px;
}

.mh-tier-max {
  font: 700 0.7rem Verdana;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.05);
}

.mh-tier-max.t1 { color: var(--bo-tier1, #ccc); border: 1px solid rgba(255,255,255,0.25); }
.mh-tier-max.t2 { color: var(--bo-tier2, #21a5e3); border: 1px solid rgba(33,165,227,0.35); }
.mh-tier-max.t3 { color: var(--bo-tier3, #ff3); border: 1px solid rgba(255,255,51,0.35); }

/* Tech rows (buildings + units per tier) */
.mh-tech-row {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 4px;
  margin-bottom: 6px;
  min-height: 48px;
  align-items: start;
}

.mh-tech-row .mh-tech-tier {
  padding-top: 2px;
}

.mh-tech-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.mh-tech-row.mh-tier-unreached {
  opacity: 0.3;
}

.mh-tier-empty {
  font: 0.8rem Verdana;
  color: #5a6a75;
}

.mh-tech-tier {
  font: 700 0.8rem Verdana;
  padding: 1px 4px;
  border-radius: 2px;
  margin-right: 2px;
  min-width: 22px;
  text-align: center;
}

.mh-tech-tier.t1 { color: var(--bo-tier1, #ccc); }
.mh-tech-tier.t2 { color: var(--bo-tier2, #21a5e3); }
.mh-tech-tier.t3 { color: var(--bo-tier3, #ff3); }

.mh-icon-wrap {
  display: inline-flex;
  align-items: stretch;
  gap: 2px;
}
.mh-portrait-wrap {
  position: relative;
  display: inline-block;
}
.mh-type-stack {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mh-type-icon {
  width: 22px;
  height: 22px;
  border-radius: 2px;
  display: block;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.mh-tech-icon {
  width: 46px;
  height: 46px;
  border-radius: 3px;
  border: 1px solid #3a4a55;
  display: block;
}

.mh-unit-count {
  position: absolute;
  bottom: -1px;
  right: -1px;
  font: 700 0.75rem Verdana;
  color: #fff;
  background: rgba(0,0,0,0.85);
  border: 1px solid #5a6a75;
  padding: 1px 4px;
  border-radius: 0 3px 0 3px;
  line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Inline info row: upgrades | atk | def */
.mh-info-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  padding: 3px 0;
}
.mh-info-segment {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  min-width: 0;
}
.mh-info-label {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 2px;
}
.mh-info-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 1px 3px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.mh-info-badge.atk {
  background: rgba(230, 80, 60, 0.3);
  color: #f0a090;
}
.mh-info-badge.def {
  background: rgba(70, 140, 220, 0.3);
  color: #a0c8f0;
}
.mh-upgrade-level {
  font-size: 10px;
  font-weight: 800;
  min-width: 10px;
  text-align: center;
}
.mh-info-icon {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,0.15);
}
.mh-info-upgrade {
  display: inline-flex;
}

/* Generic collapsible section toggle */
.mh-section-toggle {
  font: 700 0.75rem Verdana;
  color: #8a9aa5;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  padding: 6px 8px;
  user-select: none;
  border-top: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  transition: background 0.15s, color 0.15s;
}

.mh-section-toggle:hover {
  background: rgba(255,255,255,0.08);
  color: #b0c0cc;
}

.mh-section-toggle::before {
  content: '\25B6';
  display: inline-block;
  margin-right: 5px;
  font-size: 0.6rem;
  transition: transform 0.15s;
}

.mh-section-toggle.mh-open::before {
  transform: rotate(90deg);
}

.mh-section-content.mh-hidden {
  display: none;
}

.mh-section-content {
  background: rgba(26,37,48,0.95);
  border: 1px solid #3a4a55;
  border-radius: 4px;
  padding: 6px 8px;
  margin-top: 4px;
}

/* Section-specific modifiers */
.mh-unit-toggle {
  margin-top: auto;
  border-radius: 4px;
}

.mh-unit-flat {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.mh-subsection-label {
  font: 700 0.7rem Verdana;
  color: #6a7a85;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 6px 0 3px;
}

.mh-subsection-label:first-child {
  margin-top: 0;
}

.mh-item-summary {
  margin-top: 2px;
}

.mh-item-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.mh-item-portrait {
  border-color: #44DD88;
}

.mh-merc-portrait {
  border-color: #FF8844;
}

.mh-item-gold-total {
  font: 0.75rem Verdana;
  color: #8a9a55;
  margin-top: 4px;
}

.mh-cost-gold-icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #d4a017;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

.mh-tech-sep {
  width: 1px;
  height: 28px;
  background: #3a4a55;
  margin: 0 3px;
}

/* Economy row */
.mh-economy {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.15rem;
  font: 0.7rem Verdana;
}

.mh-econ-workers {
  display: flex;
  gap: 0.25rem;
}

.mh-econ-supply {
  color: #8a9aa5;
}

.mh-econ-spent {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

/* Hide map name overlay in static-bo mode (no canvas visible) */

#mega-play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  opacity: 1;
  transition: opacity 0.4s ease;
}

#mega-play-overlay.fading-out {
  opacity: 0;
  pointer-events: none;
}

#mega-play-title-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

#mega-play-title {
  padding: clamp(0.3rem, 1.5cqw, 1rem) clamp(0.5rem, 2.5cqw, 2.5rem);
  font: 700 clamp(0.8rem, 4cqw, 2.2rem) Verdana;
  color: rgba(255, 255, 255, 0.95);
  text-transform: uppercase;
  letter-spacing: clamp(0.06em, 0.2cqw, 0.25em);
  background: rgba(0, 0, 0, 0.85);
  border-radius: 8px;
  white-space: nowrap;
  border: 3px solid #3a8cc5;
  box-shadow: 0 0 12px rgba(58, 140, 197, 0.6), inset 0 0 8px rgba(58, 140, 197, 0.15);
  text-shadow: 0 0 10px rgba(58, 140, 197, 0.5);
  animation: billboard-glow 3s ease-in-out infinite;
}

@keyframes billboard-glow {
  0%, 100% {
    border-color: #3a8cc5;
    box-shadow: 0 0 12px rgba(58, 140, 197, 0.6), inset 0 0 8px rgba(58, 140, 197, 0.15);
    text-shadow: 0 0 10px rgba(58, 140, 197, 0.5);
    transform: scale(1);
  }
  33% {
    border-color: #8ed4ff;
    box-shadow: 0 0 24px rgba(142, 212, 255, 0.8), inset 0 0 12px rgba(142, 212, 255, 0.2);
    text-shadow: 0 0 16px rgba(142, 212, 255, 0.7);
    transform: scale(1.02);
  }
  66% {
    border-color: #d4a535;
    box-shadow: 0 0 20px rgba(212, 165, 53, 0.7), inset 0 0 10px rgba(212, 165, 53, 0.15);
    text-shadow: 0 0 14px rgba(212, 165, 53, 0.5);
    transform: scale(1.01);
  }
}

#mega-play-title-logo {
  display: flex;
  align-items: center;
  gap: 0;
  background: #1a3a50;
  border-radius: 4px;
  padding: clamp(4px, 1.2cqw, 8px) clamp(6px, 2cqw, 12px);
  border: 2px solid #3a8cc5;
  box-shadow: 0 0 8px rgba(58, 140, 197, 0.5), inset 0 0 6px rgba(58, 140, 197, 0.15);
  animation: logo-glow 2.5s ease-in-out infinite;
  cursor: pointer;
  transition: gap 0.25s ease, padding 0.25s ease;
}

#mega-play-title-logo:hover {
  gap: 8px;
  padding: 8px 14px;
}

@keyframes logo-glow {
  0%, 100% { border-color: #3a8cc5; box-shadow: 0 0 8px rgba(58, 140, 197, 0.5), inset 0 0 6px rgba(58, 140, 197, 0.15); }
  50% { border-color: #5fb5e8; box-shadow: 0 0 16px rgba(95, 181, 232, 0.7), inset 0 0 10px rgba(95, 181, 232, 0.25); }
}

#mega-play-title-logo img:first-child {
  height: clamp(18px, 5.5cqw, 32px);
  width: auto;
  display: block;
}

#mega-play-title-logo .logo-play-icon {
  height: 0;
  width: 0;
  display: none;
}

#mega-play-title-logo:hover .logo-play-icon {
  display: block;
  height: 24px;
  width: 24px;
  opacity: 1;
}


#mega-play-button {
  background-image: url('/assets/mega-play-icon.svg');
  background-color: transparent;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  height: clamp(48px, 20cqw, 120px);
  width: clamp(48px, 20cqw, 120px);
  border: 3px solid rgba(58, 140, 197, 0.6);
  box-shadow: 0 0 20px rgba(58, 140, 197, 0.3), inset 0 0 20px rgba(58, 140, 197, 0.1);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  animation: play-btn-pulse 2.5s ease-in-out infinite;
}

#mega-play-button:hover {
  transform: scale(1.1);
  border-color: #8ed4ff;
  box-shadow: 0 0 30px rgba(142, 212, 255, 0.6), inset 0 0 25px rgba(142, 212, 255, 0.15);
}

@keyframes play-btn-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(58, 140, 197, 0.3), inset 0 0 20px rgba(58, 140, 197, 0.1);
    border-color: rgba(58, 140, 197, 0.6);
  }
  50% {
    box-shadow: 0 0 30px rgba(95, 181, 232, 0.5), inset 0 0 25px rgba(95, 181, 232, 0.15);
    border-color: rgba(95, 181, 232, 0.8);
  }
}

#mega-play-hints {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.8);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
}

#mega-play-hints-title {
  grid-column: 1 / -1;
  text-align: center;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.15rem;
}


.mega-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.25rem;
  color: #ccc;
  font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, border-color 0.15s;
}

.mega-hint:hover {
  background: rgba(0, 0, 0, 0.8);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.mega-hint.on {
  background: rgba(60, 140, 220, 0.35);
  border-color: rgba(60, 140, 220, 0.7);
  color: #fff;
}

.mega-hint-icon::after {
  content: "\2715";
  margin-left: 0.1rem;
  font-size: 0.7rem;
  opacity: 0.6;
}

.mega-hint.on .mega-hint-icon::after {
  content: "\25C9";
  opacity: 0.9;
}


.mega-hint-featured {
  border-color: rgba(218,165,32,0.4);
  color: #daa520;
}

.mega-hint-featured:hover {
  background: rgba(218,165,32,0.15);
  color: #e8b830;
}

.mega-hint-featured.on {
  background: rgba(218,165,32,0.3);
  border-color: #daa520;
  color: #fff;
}

/* --- Match Complete Banner --- */
#match-complete-banner {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 35%;
  z-index: 50;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 0;
  background: rgba(10, 16, 22, 0.85);
  border-top: 2px solid #5fa5cb;
  border-bottom: 2px solid #5fa5cb;
}

.mcb-text {
  font: 700 28px Verdana;
  color: #fff;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.mcb-restart {
  padding: 6px 20px;
  font: 600 13px Verdana;
  color: #fff;
  background: #3a7ca5;
  border: 1px solid #5fa5cb;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s;
}

.mcb-restart:hover {
  background: #4a8cb5;
}

#loading-overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(11, 16, 20, 0.92);
  z-index: 50;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  pointer-events: all;
}
#loading-overlay.active {
  display: flex;
}
#loading-overlay img {
  width: 80px;
  height: 80px;
  opacity: 0.8;
}
#loading-status {
  color: #8a9ba8;
  font-size: 0.85rem;
  font-family: 'Segoe UI', Arial, sans-serif;
  letter-spacing: 0.5px;
}
#loading-icon {
  display: none;
  position: absolute;
  top: calc(50% - 100px);
  left: calc(50% - 100px);
}

/* WebGL terrain canvas (Z=0) — sits behind the 2D overlay stack */
#three-canvas {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 50% 50% 0;
  backface-visibility: hidden;
  z-index: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* main canvas element (Z=1) — now transparent, reserved for 2D overlay compat */
#main-canvas {
  background-color: transparent;
  transform-origin: 50% 50% 0;
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* utility canvas element (Z=2) */
#utility-canvas {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 50% 50% 0;
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
  z-index: 2;
  pointer-events: none;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}


/* player canvas element  (Z=3) */
#player-canvas {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 50% 50% 0;
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
  z-index: 3;
  pointer-events: none;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.logo-colors {
  color: #ded599;
}

#empty-game-wrapper {
  position: absolute;
  left: 25%;
  top: 30%;
  width: 38%;
  height: 18%;
  border: 2px solid #000;
  background: #FFF;
  border-radius: 0.35rem;
  padding: 0.5rem;
  z-index: 500;
}

.empty-game-label {
  text-align: center;
}

.empty-game-browse {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.4rem 0.9rem;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #8890a4;
  text-decoration: none;
  font-size: 0.8rem;
  transition: color 0.15s, border-color 0.15s;
}

.empty-game-browse:hover {
  color: #e8eaf0;
  border-color: rgba(255,255,255,0.3);
}


#tutorial-wrapper {
  display: none;
  position: absolute;
  left: 8%;
  top: 1%;
  width: 80%;
  height: 95%;
  border: 2px solid #000;
  background: #FFF;
  border-radius: 0.35rem;
  padding: 0.5rem;
  z-index: 2000;
}

#tutorial-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.25rem;
  height: 600px;
}

#tutorial-content h2 {
  text-align: center;
}

#tutorial-content h5 {
  margin: 0;
  margin-top: 0.25rem;
  padding: 0;
}

#tutorial-content .tutorial-slide {
  height: 100%;
  width: 20rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#tutorial-content .tutorial-button-wrapper {
  width: 24rem;
  border-top: 1px solid #333;
  padding-top: 0.5rem;
  margin-top: 0.65rem;
}

#tutorial-content .tutorial-text {
  padding: 0.45rem;
  text-align: center;
  border: 1px solid #ded599;
  background: #EEE;
  width: 400px;
}

#tutorial-content .tutorial-text-small {
  font-size: 12px;
}

#tutorial-content .tutorial-img {
  padding: 0.25rem;
  margin: 0.15rem;
  border: 1px solid #CCC;
}

.tutorial-button-wrapper .tutorial-hide,
.tutorial-button-wrapper .tutorial-continue {
  background-color: #EEE;
  border: 1px solid #333;
  border-radius: 0.55rem;
  padding: 0.25rem;
  text-align: center;
  width: 10.5rem;
  display: inline-block;
}

.tutorial-button-wrapper .tutorial-hide:hover,
.tutorial-button-wrapper .tutorial-continue:hover {
  border: 1px solid #5fa5cb;
  color: #FF00FF;
  cursor: pointer;
}

.tutorial-button-wrapper .tutorial-continue {
  float: right;
  background-color: #90EE90;
}

#tutorial-content .slide-1 h4 {
  margin-top: 0;
  margin-bottom: 0;
  width: 14rem;
  text-align: center;
  color: #29373E;
}

.slide-1 .github-button {
  margin-top: 0.35rem;
  margin-bottom: 0.5rem;
  border: 1px solid #333;
  border-radius: 0.35rem;
  width: 50px;
}

.slide-1 .github-button:hover {
  border: 1px solid #CCC;
}

.upload-button {
  border: 1px solid #666;
  border-radius: 0.45rem;
  padding: 0.25rem;
  text-align: center;
  background-color: #ded599;
  font-size: 16px;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 4rem;
  width: 12rem;
}

.upload-button:hover {
  color: #0000FF;
  cursor: pointer;
}

.upload-button-subtext {
  font-size: 13px;
}

.slide-3 li {
  text-align: left;
}

.slide-5 table {
  text-align: center;
}

.slide-5 td {
  border-bottom: 1px solid #CCC;
  height: 2rem;
}

#tutorial-content .slide-2,
#tutorial-content .slide-3,
#tutorial-content .slide-4,
#tutorial-content .slide-5,
#tutorial-content .slide-6 {
  display: none;
}


#game-display-box {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 260px;
  background: #1a1f2e;
  border: 1px solid #3a4a5c;
  border-radius: 5px;
  padding: 0;
  font-size: 12px;
  color: #d0d6e0;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

#game-display-box.visible {
  opacity: 1;
}

/* ── Building Info Tooltip ────────────────────────────────────────── */
#building-info-tooltip {
  position: fixed;
  z-index: 900;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  background: #1a1f2e;
  border: 1px solid #3a4a5c;
  border-radius: 6px;
  padding: 8px 10px;
  min-width: 140px;
  max-width: 280px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  font-size: 0.85rem;
  color: #ddd;
}

#building-info-tooltip.visible {
  opacity: 1;
}

.bit-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.bit-icon {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid #555;
  object-fit: cover;
}

.bit-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: #eee;
  padding-bottom: 2px;
}

.bit-section-label {
  font-size: 0.75rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 6px;
  margin-bottom: 4px;
}

.bit-icon-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.bit-grid-icon {
  width: 36px;
  height: 36px;
  border-radius: 3px;
  border: 1px solid #444;
  object-fit: cover;
}

.bit-type-badge {
  font-size: 0.75rem;
  color: #aaa;
  margin-top: 6px;
  text-align: center;
  padding: 3px 0;
  border-top: 1px solid #333;
}

.camp-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  background: #232a3a;
  border-bottom: 1px solid #3a4a5c;
  border-radius: 5px 5px 0 0;
}

.camp-popup-header h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #e8ecf2;
}

.camp-level-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.camp-level-badge.green {
  background: #1a7a2e;
  border-color: #00c850;
  color: #00c850;
}

.camp-level-badge.yellow {
  background: #5a3a00;
  border-color: #ff8c00;
  color: #ff8c00;
}

.camp-level-badge.red {
  background: #5a1010;
  border-color: #e02020;
  color: #e02020;
}

.camp-creep-list {
  padding: 3px 0;
  margin: 0;
  list-style: none;
}

.camp-creep-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 8px;
}

.camp-creep-row:not(:last-child) {
  border-bottom: 1px solid #2a3245;
}

.camp-creep-name-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.camp-creep-icon {
  width: 28px;
  height: 28px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
  object-fit: cover;
}

.camp-creep-name {
  font-size: 12px;
  color: #c8cdd8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.camp-creep-level {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  background: #1e2536;
  min-width: 16px;
  text-align: center;
  flex-shrink: 0;
  margin-left: 4px;
}

.camp-creep-more {
  padding: 2px 8px;
  font-size: 11px;
  color: #6a7a90;
  font-style: italic;
}

.camp-creep-level.easy { color: #00c850; }
.camp-creep-level.medium { color: #ff8c00; }
.camp-creep-level.hard { color: #e02020; }

.camp-claim-info {
  padding: 4px 8px;
  border-top: 1px solid #3a4a5c;
  font-size: 11px;
  color: #8a9ab5;
}

.camp-claim-row {
  display: flex;
  justify-content: space-between;
  padding: 1px 0;
}

.camp-claim-row .camp-claim-value {
  font-weight: 600;
  color: #c8cdd8;
}

.camp-status-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 3px;
}

.camp-status-tag.unclaimed { background: #2a3245; color: #6a7a90; }
.camp-status-tag.contested { background: #3d3520; color: #e0c84a; }
.camp-status-tag.claimed { background: #1e3320; color: #6dc955; }
.camp-status-tag.partial { background: #3d3020; color: #e0a030; }
.camp-status-tag.uncontested {
  background: #1e2e38;
  color: #6ab0d0;
  font-size: 10px;
  padding: 1px 5px;
  margin-left: 4px;
}

.camp-progress-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 5px 0 3px 0;
}
.camp-progress-track {
  flex: 1;
  display: flex;
  height: 6px;
  background: #1a2030;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid #2a3a4c;
}
.camp-progress-seg {
  height: 100%;
  min-width: 2px;
  transition: width 0.2s ease;
}
.camp-progress-label {
  font-size: 10px;
  font-weight: 700;
  color: #b0b8c4;
  min-width: 28px;
  text-align: right;
}

.camp-spot-square {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.3);
  width: 10px;
  height: 10px;
  border-radius: 2px;
  vertical-align: middle;
}

/* --- creep camp item drop table --- */
.camp-creep-has-drops {
  border-left: 3px solid #d4a017;
}
.camp-drop-indicator {
  color: #d4a017;
  font-size: 0.65rem;
  margin-left: 4px;
}
.camp-drop-table {
  border-top: 1px solid #2a3a4c;
  padding: 6px 10px 8px;
}
.camp-drop-label {
  display: block;
  font-size: 0.7rem;
  color: #6a7a90;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.camp-drop-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.camp-drop-icon-wrap {
  position: relative;
}
.camp-drop-icon {
  width: 36px;
  height: 36px;
  border-radius: 3px;
  border: 1px solid #3a4a5c;
  object-fit: cover;
  display: block;
}
.camp-drop-random-wrap {
  width: 36px;
  min-height: 36px;
  border-radius: 3px;
  border: 1px dashed #7a6a4a;
  background: #252030;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.camp-drop-random-wrap .camp-drop-icon {
  border: none;
  border-radius: 3px 3px 0 0;
  opacity: 0.65;
}
.camp-drop-random-label {
  font-size: 0.5rem;
  color: #c8a84a;
  text-align: center;
  line-height: 1.1;
  padding: 1px 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 36px;
}
.camp-drop-chance {
  position: absolute;
  bottom: -2px;
  right: -2px;
  font-size: 0.55rem;
  background: #1a1f2e;
  color: #ff8c00;
  padding: 0 2px;
  border-radius: 2px;
  line-height: 1.2;
}
.camp-drop-more {
  color: #6a7a90;
  font-size: 0.75rem;
  align-self: center;
  margin-left: 2px;
}

/* sub-canvas element */
#player-status-canvas {
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
  background-color: #29373E;
}

#player-status-wrapper {
  width: 265px;
  flex-shrink: 0;
  z-index: 1;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 5rem);
}

/* ═══════════════════════════════════════════════════
   Units & Production Panel (up- prefix)
   ═══════════════════════════════════════════════════ */

#up-panel {
  position: absolute;
  top: 3.5rem;
  left: 0.5rem;
  z-index: 12;
  background: transparent;
  color: #ddd;
  font-family: Arial, sans-serif;
  padding: 0;
  max-height: calc(100% - 4rem);
  width: clamp(140px, 22%, 280px);
  overflow-y: auto;
  overflow-x: hidden;
  pointer-events: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}

#up-panel::-webkit-scrollbar { width: 4px; }
#up-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
#up-panel::-webkit-scrollbar-track { background: transparent; }

.up-toggles {
  display: flex;
  gap: 3px;
  margin-bottom: 6px;
}

.up-toggle {
  flex: 1;
  text-align: center;
  padding: 3px 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.4);
  background: rgba(0,0,0,0.35);
  border-radius: 3px;
  user-select: none;
  transition: background 0.15s, color 0.15s;
  pointer-events: auto;
}

.up-toggle:hover {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
}

.up-toggle.up-active {
  background: rgba(40, 80, 55, 0.55);
  color: #fff;
  border-color: rgba(90, 140, 106, 0.6);
}

.up-player {
  margin-bottom: 8px;
  padding: 4px 6px;
}

.up-player:last-child {
  margin-bottom: 0;
}

.up-player-header {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
}

.up-player-color {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

.up-player-name {
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.up-section {
  margin-bottom: 4px;
}

.up-section-label {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 3px;
  padding-left: 1px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* --- Hero row: heroes on their own line --- */

.up-hero-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}

.up-hero-row:empty {
  display: none;
  margin-bottom: 0;
}

/* --- Unit/Hero grid: uniform columns --- */

.up-unit-grid,
.up-production-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: start;
}

.up-unit,
.up-prod-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--up-cell-w, 42px);
}

/* Hero card is wider */
.up-hero {
  width: var(--up-hero-cell-w, 48px);
}

.up-portrait {
  position: relative;
  width: var(--up-icon, 36px);
  height: var(--up-icon, 36px);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 3px;
  overflow: hidden;
  background: rgba(0,0,0,0.4);
}

.up-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.up-portrait-hero {
  width: var(--up-hero-icon, 42px);
  height: var(--up-hero-icon, 42px);
  border-color: rgba(200, 168, 78, 0.7);
  border-width: 2px;
}

.up-hero-level {
  position: absolute;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.75);
  color: #ffd700;
  font-size: 11px;
  font-weight: 700;
  padding: 0 3px;
  line-height: 14px;
  border-top-left-radius: 3px;
}

.up-unit-count {
  position: absolute;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 0 3px;
  line-height: 14px;
  min-width: 14px;
  text-align: center;
  border-top-left-radius: 3px;
}

/* Abilities grow downward under each card */
.up-abilities {
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: center;
  margin-top: 1px;
}

/* Wrap ability icons into rows within the card width */
.up-abilities-row {
  display: flex;
  gap: 1px;
  justify-content: center;
}

.up-spell-icon,
.up-ability-icon,
.up-type-icon {
  width: var(--up-ability-icon, 16px);
  height: var(--up-ability-icon, 16px);
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,0.2);
  object-fit: cover;
}

.up-spell-unlearned {
  opacity: 0.2;
  filter: grayscale(100%);
}

.up-type-icon {
  border-color: rgba(255,255,255,0.3);
}

/* --- Production --- */

.up-prod-bar {
  width: var(--up-icon, 36px);
  height: 3px;
  background: rgba(255,255,255,0.12);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 2px;
}

.up-prod-fill {
  height: 100%;
  background: #4caf50;
  border-radius: 2px;
  transition: width 0.15s linear;
}

@keyframes up-complete-flash {
  0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.9); }
  40% { box-shadow: 0 0 10px 4px rgba(255, 215, 0, 0.6); }
  100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
}

.up-prod-complete .up-portrait {
  animation: up-complete-flash 0.7s ease-out;
}

.up-prod-empty {
  color: rgba(255,255,255,0.3);
  font-size: 0.8rem;
  padding: 2px 4px;
}

/* ═══════════════════════════════════════════════════ */

.info-wrapper {
  padding: 1rem;
  min-height: calc(600px - 1rem);
}

#unit-list {
  max-height: 300px;
  overflow-y: auto;
  margin: 0;
  padding: 0 0.5rem;
}

#unit-list li {
  list-style-type: none;
  text-decoration: underline;
  color: blue;
  cursor: pointer;
}

#unit-list li:hover {
  text-decoration: none;
}

.time-scrubber {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  position: relative;
  top: 0rem;
  height: 2.25rem;
  border-top: 1px solid #2a3a45;
  background-color: #1a2830;
  cursor: pointer;
}

.time-scrubber-control {
  text-align: center;
  user-select: none;
}

.time-scrubber-control.play-button {
  width: 1.5rem;
  height: 1.5rem;
}

.play-button path {
  color: #ccc;
  opacity: 0.7;
}

.play-button:hover path {
  opacity: 1;
  color: #fff;
}

.speed-modal {
  display: none;
  position: absolute;
  left: 2.1rem;
  bottom: calc(100% + 0.35rem);
  width: 3.25rem;
  padding: 0.25rem 0;
  background-color: #1a2830;
  border: 1px solid #3a4a55;
  border-radius: 0.5rem;
  font-size: 13px;
  color: #ccc;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.speed-modal ul {
  margin: 0;
  padding: 0;
}

.speed-modal li {
  list-style-type: none;
  padding: 0.18rem 0.5rem;
  text-align: center;
  cursor: pointer;
  line-height: 1.2;
}

.speed-modal li:hover {
  color: #5ac8fa;
  background-color: rgba(90, 200, 250, 0.08);
}

.time-scrubber-control.speed-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 1.5rem;
  font-size: 13px;
  font-weight: bold;
  color: #ccc;
  cursor: pointer;
}

.time-scrubber-control.speed-button:hover {
  color: #fff;
}

.time-scrubber-track {
  display: flex;
  align-items: center;
  position: relative;
  overflow: visible;
  height: 0.75rem;
  width: calc(100% - 23rem);
  background-color: #0a1218;
  border: 1px solid #3a4a55;
  border-radius: 2rem;
  opacity: 1;
  margin-right: 0.65rem;
}

.time-scrubber-tracker {
  pointer-events: none;
  position: relative;
  z-index: 2;
  left: 0;
  height: 0.95rem;
  width: 0.95rem;
  background-color: #FFF;
  border: 2px solid #000;
  border-radius: 100%;
}

/* --- Zoom Control (inside scrubber bar) --- */

.zoom-control {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  margin-right: 0.5rem;
  user-select: none;
  flex-shrink: 0;
}

.zoom-label {
  font: 11px Verdana;
  font-weight: 600;
  color: #222;
  min-width: 2.8rem;
  text-align: right;
}

.zoom-btn {
  width: 1.4rem;
  height: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid #888;
  border-radius: 3px;
  cursor: pointer;
  line-height: 1;
}

.zoom-btn:hover {
  background: rgba(255, 255, 255, 0.6);
  color: #000;
}

.zoom-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 5rem;
  height: 6px;
  background: #555;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

.zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: #3a8fd4;
  border: 2px solid #1a5f9e;
  border-radius: 50%;
  cursor: pointer;
}

.zoom-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: #3a8fd4;
  border: 2px solid #1a5f9e;
  border-radius: 50%;
  cursor: pointer;
}

.zoom-slider::-webkit-slider-thumb:hover {
  background: #5aaef0;
}

.zoom-slider::-moz-range-thumb:hover {
  background: #5aaef0;
}

/* --- Settings Button (inside scrubber bar) --- */

.settings-button {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.25rem;
  margin-right: 0.5rem;
  position: relative;
  flex-shrink: 0;
}

.settings-button svg {
  width: 1.1rem;
  height: 1.1rem;
}

.settings-button path {
  fill: #ccc;
  opacity: 0.7;
  transition: opacity 0.12s;
}

.settings-button:hover path {
  opacity: 1;
  fill: #fff;
}

.settings-modal {
  display: none;
  position: absolute;
  right: 0;
  bottom: 2.25rem;
  min-width: 10rem;
  padding: 0.5rem;
  background-color: #1a2830;
  border: 1px solid #3a4a55;
  border-radius: 0.5rem;
  z-index: 100;
}

.settings-modal .vc-btn {
  display: flex;
  width: 100%;
  margin-bottom: 4px;
  box-sizing: border-box;
}

.settings-modal .vc-btn:last-child {
  margin-bottom: 0;
}

/* --- Fullscreen Button (inside scrubber bar) --- */

.fullscreen-button {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.25rem;
  flex-shrink: 0;
}

.fullscreen-button svg {
  width: 1.1rem;
  height: 1.1rem;
}

.fullscreen-button path {
  fill: #ccc;
  opacity: 0.7;
  transition: opacity 0.12s;
}

.fullscreen-button:hover path {
  opacity: 1;
  fill: #fff;
}

/* --- Camera Toolbar --- */

.camera-toolbar {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 20;
  display: flex;
  gap: 2px;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 4px;
  padding: 3px;
  backdrop-filter: blur(4px);
}

.cam-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #aaa;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  padding: 4px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}

.cam-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #ddd;
}

.cam-btn-active {
  background: rgba(100, 180, 255, 0.25);
  color: #8cc8ff;
  border-color: rgba(100, 180, 255, 0.4);
}

.cam-btn-unavailable {
  opacity: 0.25;
  pointer-events: none;
}

/* Camera mode indicators on player panels */
.up-camera-follow,
.up-camera-auto {
  transition: background 0.4s;
}

.up-camera-follow {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.up-camera-follow > .up-player-header > .up-player-color {
  width: 10px;
  height: 10px;
  box-shadow: 0 0 6px 2px currentColor;
  border-radius: 50%;
  transition: all 0.3s;
}

.up-camera-auto {
  background: rgba(255, 200, 50, 0.03);
  border-radius: 4px;
}

.up-camera-auto > .up-player-header > .up-player-color {
  width: 10px;
  height: 10px;
  box-shadow: 0 0 6px 2px rgba(255, 200, 50, 0.6);
  border-radius: 50%;
  transition: all 0.3s;
}

/* --- Fullscreen mode overrides --- */

#map-container:fullscreen {
  background: #000;
  border: none;
  width: 100vw;
  height: 100vh;
}

#map-container:fullscreen #main-wrapper {
  background: #000;
}

#map-container:-webkit-full-screen {
  background: #000;
  border: none;
  width: 100vw;
  height: 100vh;
}

#map-container:-webkit-full-screen #main-wrapper {
  background: #000;
}

/* --- Minimap Pip (camera viewport indicator) --- */

.minimap-pip {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  z-index: 5;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.7);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  pointer-events: auto;
  cursor: crosshair;
  opacity: 0;
  transition: opacity 0.2s ease;
  overflow: hidden;
}

.minimap-pip.minimap-pip-visible {
  opacity: 1;
}

.minimap-pip canvas {
  display: block;
}

#map-container:fullscreen .minimap-pip,
#map-container:-webkit-full-screen .minimap-pip {
  bottom: 1rem;
  right: 1rem;
}

/* --- Map Name Overlay (floating on canvas) --- */

#map-name-overlay {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 3000;
  padding: 0.35rem 0.75rem;
  background: rgba(10, 16, 22, 0.55);
  border-radius: 4px;
  font: 700 1.8rem Verdana;
  color: rgba(224, 232, 240, 0.75);
  pointer-events: none;
  white-space: nowrap;
}

#map-name-overlay:empty {
  display: none;
}

.layout-mode-static-bo #map-name-overlay { display: none; }

/* ── Split View label ────────────────────────────────────────────────────── */
#split-view-label {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 3001;
  padding: 0.25rem 0.6rem;
  background: rgba(100, 180, 255, 0.18);
  border: 1px solid rgba(100, 180, 255, 0.35);
  border-radius: 3px;
  font: 600 0.75rem/1 Arial, sans-serif;
  letter-spacing: 0.1em;
  color: #8cc8ff;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s, transform 0.3s;
}

/* When map name is present, push split label below it */
#map-name-overlay:not(:empty) ~ #split-view-label {
  top: 3rem;
}

#split-view-label.split-label-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Split-screen: full overlay container, cards positioned per-player */
#up-panel.up-split-mode {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  max-height: none;
  overflow: visible;
  background: transparent;
  pointer-events: none;
  padding: 0;
  transition: opacity 0.3s;
}

/* Hide controls not needed in split view */
.up-split-mode .up-toggles,
.up-split-mode .up-section-label,
.up-split-mode .up-abilities,
.up-split-mode .up-prod-empty {
  display: none !important;
}

/* Hide production in split mode (early game, army comp is what matters) */
.up-split-mode .up-production-section {
  display: none !important;
}

/* Each player becomes a positioned floating card */
.up-split-mode .up-player {
  position: absolute;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  padding: 5px 8px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 36%;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Player name: single line, ellipsis if too long */
.up-split-mode .up-player-name {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Left player owns the top-left triangle of the split.
   Card sits below the map name overlay, in the corner opposite the diagonal. */
.up-split-mode .up-player[data-split-pos="left"] {
  top: 4rem;
  left: 0.5rem;
}

/* Right player owns the bottom-right triangle of the split.
   Card sits above the scrubber, offset left of the 180px minimap pip. */
.up-split-mode .up-player[data-split-pos="right"] {
  bottom: 3rem;
  right: 13rem;
}

/* Player header: name with color swatch, clearly visible */
.up-split-mode .up-player-header {
  margin-bottom: 1px;
}

.up-split-mode .up-player-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
}

.up-split-mode .up-player-color {
  width: 10px;
  height: 10px;
}

/* Flatten sections so grids flow inline under header */
.up-split-mode .up-section {
  display: contents;
}

/* Grids: horizontal, compact, no wrapping */
.up-split-mode .up-hero-row,
.up-split-mode .up-unit-grid {
  flex-wrap: nowrap;
  gap: 3px;
  margin-bottom: 0;
}

.up-split-mode .up-unit,
.up-split-mode .up-hero {
  width: auto;
}

/* ── Site-nav back link (← Builds) ─────────────────────────────────────── */
.site-nav-back {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.25rem 0.65rem; border-radius: 4px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  color: #c0c8d8; text-decoration: none; flex-shrink: 0;
  font-weight: 600; font-size: 0.8rem; margin-left: 0.75rem;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.site-nav-back:hover { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.3); }

/* ── Build name in match header player card ────────────────────────────── */
.mh-build-name {
  font: 600 0.78rem Verdana;
  color: #8890a4;
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SITE-WIDE STYLES  (site- prefix)
   Used by index.html (browse page) — not the viewer
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --site-bg:          #1a1d2e;
  --site-surface:     #212538;
  --site-surface-2:   #2a2f45;
  --site-border:      rgba(255,255,255,0.10);
  --site-text:        #e8eaf0;
  --site-text-muted:  #9ca3b8;
  --site-accent:      #4488FF;
  --site-radius:      8px;
  --site-radius-lg:   14px;
  --race-color:       #888;
}

.site-page {
  background:
    radial-gradient(ellipse 80% 50% at 20% 0%, rgba(68,136,255,0.06), transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 10%, rgba(170,102,255,0.04), transparent 50%),
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(68,68,255,0.03), transparent 60%),
    var(--site-bg);
  color: var(--site-text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

#site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(22, 25, 40, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--site-border);
  box-shadow: 0 1px 12px rgba(0,0,0,0.4), 0 0 24px rgba(68,136,255,0.03);
}

.site-nav-inner {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0.15rem 1.5rem;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.site-nav-logo {
  text-decoration: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.site-nav-logo-img {
  height: 36px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 6px rgba(68,136,255,0.15));
}

.site-nav-spacer {
  flex: 1;
}

.site-nav-search-wrap {
  display: flex;
  align-items: center;
  margin-left: 1rem;
}

.site-nav-search {
  width: 220px;
  padding: 0.4rem 0.75rem;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  color: var(--site-text);
  font-size: 0.85rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  animation: search-glow-intro 1.6s ease-out 0.4s both;
}

@keyframes search-glow-intro {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0); border-color: rgba(255,255,255,0.3); }
  35%  { box-shadow: 0 0 12px 2px rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.55); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); border-color: rgba(255,255,255,0.3); }
}

.site-nav-search::placeholder {
  color: rgba(255,255,255,0.5);
}

.site-nav-search:focus {
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 0 8px 1px rgba(255,255,255,0.1);
}

.site-nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.site-nav-races {
  display: flex;
  gap: 0.25rem;
  margin-right: 1rem;
}

.site-nav-race {
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--race-color);
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.site-nav-race-icon {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  object-fit: cover;
}

.site-nav-race:hover {
  background: rgba(0,0,0,0.2);
  border-color: color-mix(in srgb, var(--race-color) 30%, transparent);
}

.site-nav-race.active {
  background: color-mix(in srgb, var(--race-color) 12%, transparent);
  border-color: color-mix(in srgb, var(--race-color) 40%, transparent);
  box-shadow: inset 0 -2px 0 var(--race-color);
}

.site-nav-link {
  padding: 0.35rem 0.9rem;
  border-radius: 5px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--site-text);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.site-nav-link:hover,
.site-nav-link.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.3);
}

.site-content {
  max-width: 1800px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem 4rem;
}

/* ── Intro row: video thumb + tagline ───────────────────── */
.site-intro {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--site-border);
}

.site-intro-video {
  position: relative;
  flex-shrink: 0;
  width: 280px;
  border-radius: var(--site-radius);
  overflow: hidden;
  border: 1px solid var(--site-border);
  cursor: pointer;
  transition: width 0.3s ease, box-shadow 0.3s ease;
  background: #000;
}

.site-intro-video video {
  width: 100%;
  display: block;
}

.site-intro-video.expanded {
  width: 560px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}

.site-video-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
  transition: background 0.15s;
}

.site-intro-video:hover .site-video-play-overlay {
  background: rgba(0,0,0,0.2);
}

.site-intro-text {
  flex: 1;
  min-width: 0;
}

.site-intro-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--site-text);
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.site-intro-sub {
  font-size: 0.92rem;
  color: var(--site-text-muted);
  line-height: 1.6;
  margin: 0 0 0.75rem;
  max-width: 480px;
}

.site-intro-stats {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--site-accent);
  letter-spacing: 0.03em;
}

@media (max-width: 640px) {
  .site-intro {
    flex-direction: column;
    align-items: stretch;
  }
  .site-intro-video,
  .site-intro-video.expanded {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-intro-video { transition: none; }
  .site-build-card  { transition: none; }
}

.site-hero {
  padding: 1.5rem 1.5rem 1.5rem;
  text-align: center;
  background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(68,136,255,0.12), transparent);
  border-bottom: 1px solid var(--site-border);
}

.site-hero-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--site-accent);
  margin-bottom: 1rem;
}

.site-hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 1rem;
  letter-spacing: -0.03em;
  color: var(--site-text);
}

.site-hero h1 em {
  font-style: normal;
  color: var(--site-accent);
}

.site-hero-sub {
  font-size: 1.05rem;
  color: var(--site-text-muted);
  max-width: 540px;
  margin: 0 auto 2.5rem;
  line-height: 1.6;
}

.site-hero-demo {
  max-width: 900px;
  margin: 2.5rem auto 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.site-demo-video {
  width: 100%;
  display: block;
  border-radius: 12px;
}

/* ── Hero banner for homepage ─────────────────────────────── */
.site-hero-banner {
  text-align: left;
  padding: 1rem 1.5rem 0.75rem;
  margin-bottom: 0.5rem;
  position: relative;
  overflow: hidden;
}

.site-hero-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 50% -20%, rgba(68,136,255,0.10), transparent 70%),
    radial-gradient(ellipse 50% 60% at 20% 50%, rgba(68,221,136,0.04), transparent 60%),
    radial-gradient(ellipse 50% 60% at 80% 50%, rgba(255,68,68,0.04), transparent 60%);
  pointer-events: none;
}

.site-hero-banner::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--site-border) 20%,
    rgba(68,136,255,0.15) 50%,
    var(--site-border) 80%,
    transparent
  );
}

.site-hero-banner-inner {
  position: relative;
  z-index: 1;
  max-width: 1800px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.site-hero-text {
  flex: 1;
  min-width: 0;
}

.site-hero-divider {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(180deg, transparent, var(--site-border) 20%, rgba(68,136,255,0.2) 50%, var(--site-border) 80%, transparent);
  flex-shrink: 0;
}

.site-hero-banner .site-hero-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-accent);
  margin-bottom: 0.35rem;
}

.site-hero-banner-title {
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 0.4rem;
  letter-spacing: -0.03em;
  color: var(--site-text);
}

.site-hero-banner-title em {
  font-style: normal;
  color: var(--site-accent);
}

.site-hero-banner-sub {
  font-size: 0.85rem;
  color: var(--site-text-muted);
  line-height: 1.5;
  margin: 0;
  max-width: 480px;
}

/* ── Hero feature badges ─────────────────────────────────── */
.site-hero-features {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 0.45rem;
  margin-top: 0.75rem;
  justify-content: start;
}

.site-hero-feat {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem 0.4rem 0.45rem;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.site-hero-feat img {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  object-fit: cover;
  display: block;
}

.site-hero-feat-svg {
  width: 26px;
  height: 26px;
  color: var(--site-accent);
  flex-shrink: 0;
}

.site-hero-feat span {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--site-text-muted);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* ── Hero CTA panels ─────────────────────────────────────── */
.site-hero-cta {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex-shrink: 0;
  min-width: 260px;
}

.site-cta-panel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.site-cta-body { flex: 1; min-width: 0; }

.site-cta-heading {
  font-size: 0.92rem;
  font-weight: 800;
  margin: 0 0 0.15rem;
  line-height: 1.2;
}

.site-cta-desc {
  font-size: 0.75rem;
  line-height: 1.4;
  margin: 0;
}

/* ── Hero icon cluster (pro replays) ── */
.site-cta-icons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  flex-shrink: 0;
}

.site-cta-icons img {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  display: block;
  object-fit: cover;
}

/* ── Upload icon ── */
.site-cta-upload-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--site-text-muted);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

/* ── Active panel (pro replays — "you are here") ── */
.site-cta-active {
  background: var(--site-accent);
  box-shadow: 0 4px 20px rgba(68, 136, 255, 0.35), 0 1px 4px rgba(0,0,0,0.2);
}

.site-cta-active .site-cta-heading { color: #fff; }
.site-cta-active .site-cta-desc { color: rgba(255, 255, 255, 0.8); }

.site-cta-active .site-cta-icons img {
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.site-cta-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  padding: 0.12rem 0.45rem;
  border-radius: 3px;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--site-accent);
  background: rgba(255, 255, 255, 0.92);
}

/* ── Upload panel (clickable) ── */
.site-cta-upload {
  cursor: pointer;
  background: var(--site-surface);
  border: 1px solid var(--site-border);
}

.site-cta-upload .site-cta-heading { color: var(--site-text); }
.site-cta-upload .site-cta-desc { color: var(--site-text-muted); }

.site-cta-upload:hover {
  background: var(--site-surface-2);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}

.site-cta-upload:hover .site-cta-heading { color: #fff; }

.site-cta-upload:hover .site-cta-upload-icon {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.site-cta-upload:hover .site-cta-arrow {
  color: #fff;
  transform: translateX(3px);
}

.site-cta-arrow {
  flex-shrink: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--site-text-muted);
  transition: color 0.15s, transform 0.15s;
}

/* ── CTA buttons (used on about page) ────────────────────── */
.site-cta-btn {
  display: block;
  padding: 0.55rem 1.5rem;
  border-radius: 6px;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  cursor: pointer;
}

.site-cta-primary {
  background: var(--site-accent);
  color: #000;
  border: 1px solid var(--site-accent);
}

.site-cta-primary:hover {
  background: color-mix(in srgb, var(--site-accent) 85%, #fff);
  box-shadow: 0 0 12px rgba(240, 178, 50, 0.3);
}

.site-cta-secondary {
  background: transparent;
  color: var(--site-text);
  border: 1px solid var(--site-border);
}

.site-cta-secondary:hover {
  border-color: var(--site-text-muted);
  background: rgba(255, 255, 255, 0.05);
}

@media (max-width: 700px) {
  .site-hero-banner-inner {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }
  .site-hero-divider {
    width: 60%;
    height: 1px;
    align-self: center;
    background: linear-gradient(90deg, transparent, var(--site-border) 20%, rgba(68,136,255,0.2) 50%, var(--site-border) 80%, transparent);
  }
  .site-hero-banner-sub { margin: 0 auto; }
  .site-hero-features { justify-content: center; }
  .site-hero-cta { min-width: 0; }
}

.site-race-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: 900px;
  margin: 3rem auto 0;
}

@media (max-width: 700px) {
  .site-race-grid { grid-template-columns: repeat(2, 1fr); }
}

.site-race-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem 1rem;
  border-radius: var(--site-radius-lg);
  border: 1px solid color-mix(in srgb, var(--race-color) 20%, transparent);
  background: color-mix(in srgb, var(--race-color) 6%, var(--site-surface));
  text-decoration: none;
  color: var(--site-text);
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  cursor: pointer;
}

.site-race-tile:hover {
  border-color: color-mix(in srgb, var(--race-color) 50%, transparent);
  background: color-mix(in srgb, var(--race-color) 12%, var(--site-surface));
  transform: translateY(-2px);
}

.site-race-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--race-color) 20%, #1a1e2a);
  border: 2px solid color-mix(in srgb, var(--race-color) 40%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--race-color);
  letter-spacing: -0.02em;
}

.site-race-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--site-text);
}

.site-race-count {
  font-size: 0.75rem;
  color: var(--site-text-muted);
}

.site-section-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.site-section-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--site-text);
  margin: 0;
}

.site-section-sub {
  font-size: 0.85rem;
  color: var(--site-text-muted);
}

.site-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
}

@media (max-width: 640px) {
  .site-steps { grid-template-columns: 1fr; }
}

.site-step {
  padding: 1.5rem;
  border-radius: var(--site-radius);
  background: var(--site-surface);
  border: 1px solid var(--site-border);
}

.site-step-number {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--site-accent);
  margin-bottom: 0.6rem;
}

.site-step-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--site-text);
  margin-bottom: 0.4rem;
}

.site-step-body {
  font-size: 0.83rem;
  color: var(--site-text-muted);
  line-height: 1.5;
}

.site-build-grid-header {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--site-text-muted);
  margin-top: 1.5rem;
  margin-bottom: 1.25rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--site-border);
  position: relative;
}

.site-build-grid-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--site-accent);
  border-radius: 1px;
}

.site-build-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

@media (min-width: 1700px) {
  .site-build-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.site-build-grid > * {
  min-width: 0;
}

/* ── Build card — single clickable surface ────────────────── */
.site-build-card {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  color: inherit;
  background: var(--card-bg, #242840);
  border: 1px solid var(--card-border, #363a50);
  border-radius: 10px;
  padding: 10px 12px 10px;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  overflow: hidden;
  min-width: 0;
  cursor: pointer;
}

.site-build-card:hover {
  background: var(--card-bg-hover, #2c3050);
  border-color: var(--card-border-hover, var(--race-color));
  box-shadow:
    0 4px 16px rgba(0,0,0,0.25),
    inset 0 0 30px var(--card-glow, rgba(255,255,255,0.04));
}

/* ── Race-specific card themes ──────────────────────────────── */
.site-build-card.race-H {
  --card-bg: #1e2848;
  --card-header-bg: #283c6a;
  --card-border: #3860b0;
  --card-bg-hover: #263458;
  --card-border-hover: #5888dd;
  --card-glow: rgba(80,130,220,0.10);
  --card-divider: rgba(80,130,220,0.18);
}
.site-build-card.race-O {
  --card-bg: #2c1e18;
  --card-header-bg: #5a2820;
  --card-border: #904030;
  --card-bg-hover: #382820;
  --card-border-hover: #bb5540;
  --card-glow: rgba(200,80,40,0.10);
  --card-divider: rgba(200,80,40,0.18);
}
.site-build-card.race-E {
  --card-bg: #162820;
  --card-header-bg: #1e4830;
  --card-border: #286848;
  --card-bg-hover: #1e3428;
  --card-border-hover: #389068;
  --card-glow: rgba(60,200,140,0.10);
  --card-divider: rgba(60,200,140,0.18);
}
.site-build-card.race-U {
  --card-bg: #221a38;
  --card-header-bg: #382858;
  --card-border: #583880;
  --card-bg-hover: #2a2248;
  --card-border-hover: #7848a8;
  --card-glow: rgba(160,80,240,0.10);
  --card-divider: rgba(160,80,240,0.18);
}

/* ── Match header resets on homepage cards ─────────────────── */

.mh-race-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--race-color);
  object-fit: cover;
  flex-shrink: 0;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.site-build-card:hover .mh-race-icon {
  box-shadow: 0 0 6px color-mix(in srgb, var(--race-color) 60%, transparent);
}

.mh-build-label {
  font: 700 1rem Verdana;
  color: #e8e8ec;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-build-card .mh-hero-portrait {
  width: 46px;
  height: 46px;
  border-color: #444;
  transition: border-color 0.2s;
}

.site-build-card .mh-tech-icon {
  width: 36px;
  height: 36px;
}

.site-build-card:hover .mh-hero-portrait {
  border-color: var(--race-color);
}

/* Non-togglable key units label on homepage */
.mh-unit-toggle.mh-static {
  cursor: default;
}

.mh-unit-toggle.mh-static::before {
  display: none;
}

.mh-unit-toggle.mh-static:hover {
  background: rgba(255,255,255,0.04);
  color: #8a9aa5;
}

/* ── Race watermark (floated behind card content) ────────── */
.site-card-race-watermark {
  position: absolute;
  top: 50%;
  left: 65%;
  transform: translateY(-15%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid var(--race-color);
  object-fit: cover;
  opacity: 0.45;
  pointer-events: none;
  z-index: 2;
}

.site-build-card:hover .site-card-race-watermark {
  opacity: 0.65;
}

/* ── Section labels ──────────────────────────────────────── */
.site-card-section-label {
  display: block;
  font: 600 0.65rem Verdana;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.site-card-section-label + .site-card-section-label,
.site-card-key-units + .site-card-section-label {
  margin-top: 6px;
}

/* ── Card Header (Zone A) — colored header band ──────────── */
.site-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -10px -12px 0;
  padding: 8px 12px 6px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
  background: var(--card-header-bg, rgba(255,255,255,0.04));
  border-bottom: 1px solid var(--card-divider, rgba(255,255,255,0.06));
}

.site-card-matchups {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 4px;
}

.site-card-matchup {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: color-mix(in srgb, var(--opp-color, #888) 12%, var(--card-bg, #1a1a1e));
  color: color-mix(in srgb, var(--opp-color, #888) 80%, #ccc);
  border: 1px solid color-mix(in srgb, var(--opp-color, #888) 25%, transparent);
  white-space: nowrap;
}

/* ── Hero Sequence (Zone B) ──────────────────────────────── */
.site-card-heroes {
  padding: 8px 0 6px;
  border-bottom: 1px solid var(--card-divider, rgba(255,255,255,0.06));
  position: relative;
  z-index: 1;
}

.site-card-heroes-row {
  display: flex;
  gap: 12px;
}

.site-card-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.site-card-hero .mh-hero-portrait-wrap {
  position: relative;
  display: inline-block;
}

.site-card-hero .mh-hero-portrait {
  width: 43px;
  height: 43px;
}

.site-card-hero-ord {
  position: absolute;
  bottom: 1px;
  right: 1px;
  font: 700 0.5rem Verdana;
  color: #fff;
  background: rgba(0,0,0,0.75);
  padding: 0 3px;
  line-height: 1.3;
  border-radius: 3px 0 0 0;
}

.site-card-hero-skills {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}

.site-skill-icon {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid #555;
}

.site-skill-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.site-skill-dim {
  opacity: 0.25;
}

.site-skill-ult {
  border-color: #886622;
}

.site-skill-lvl {
  position: absolute;
  bottom: 0;
  right: 0;
  font: 700 0.5rem Verdana;
  color: #fff;
  background: rgba(0,0,0,0.75);
  padding: 0 2px;
  line-height: 1.2;
  border-radius: 2px 0 0 0;
}

.site-build-card:hover .site-skill-icon:not(.site-skill-dim) {
  border-color: var(--race-color);
}

/* ── Key Units Section ────────────────────────────────────── */
.site-card-units {
  padding: 6px 0;
  border-top: 1px solid var(--card-divider, rgba(255,255,255,0.06));
  position: relative;
  z-index: 1;
}

.site-card-key-units {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}

.site-card-key-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.site-card-key-icon {
  width: 54px;
  height: 54px;
  border-radius: 4px;
  border: 1px solid #444;
  object-fit: cover;
}

.site-build-card:hover .site-card-key-icon {
  border-color: var(--race-color);
}

.site-card-key-label {
  font: 600 0.6rem Verdana;
  color: #6a7a85;
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.site-card-expo-row {
  margin-top: 4px;
}

/* ── Core Upgrades Section ─────────────────────────────── */
.site-card-upgrades {
  padding: 6px 0 4px;
  border-top: 1px solid var(--card-divider, rgba(255,255,255,0.06));
  position: relative;
  z-index: 1;
}

.site-card-upgrade-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.site-upgrade-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px;
  border-radius: 3px;
}

.site-upgrade-badge.atk {
  background: rgba(230, 80, 60, 0.25);
}

.site-upgrade-badge.def {
  background: rgba(70, 140, 220, 0.25);
}

.site-upgrade-badge.res {
  background: rgba(160, 80, 220, 0.25);
}

.site-upgrade-icon {
  width: 20px;
  height: 20px;
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,0.15);
}

.site-upgrade-level {
  font: 800 0.6rem Verdana;
  color: #ccc;
  min-width: 10px;
  text-align: center;
}


/* ── Replay Modal ────────────────────────────────────────── */
.site-replay-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,0);
  align-items: center;
  justify-content: center;
}

.site-replay-modal.open {
  display: flex;
}

.site-replay-modal-box {
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--race-color, #888) 12%, transparent) 0%, transparent 60%),
    #16161a;
  border: 1px solid color-mix(in srgb, var(--race-color, #888) 28%, #2d2d32);
  border-radius: 12px;
  padding: 0;
  width: min(760px, 94vw);
  max-height: min(82vh, 820px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--race-color, #888) 12%, transparent),
    0 0 38px color-mix(in srgb, var(--race-color, #888) 18%, transparent),
    0 22px 60px rgba(0,0,0,0.72);
}

@media (max-width: 680px) {
  .site-replay-modal-box {
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }
}

.site-replay-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--race-color, #888) 14%, rgba(255,255,255,0.06));
  background: linear-gradient(180deg, color-mix(in srgb, var(--race-color, #888) 9%, transparent), transparent 80%);
}

.site-replay-modal-title-block {
  min-width: 0;
}

.site-replay-modal-title {
  font: 700 1rem Verdana;
  color: #f0f0f4;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-replay-modal-subtitle {
  font: 600 0.72rem Verdana;
  color: #888;
  margin-top: 3px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.site-replay-modal-close {
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  color: #888;
  font-size: 1rem;
  cursor: pointer;
  padding: 2px 9px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
}

.site-replay-modal-close:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.3);
}

.site-replay-modal-list {
  padding: 14px 18px 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.site-replay-modal-group + .site-replay-modal-group {
  margin-top: 16px;
}

.site-replay-modal-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 2px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  margin-bottom: 8px;
}

.site-replay-modal-map {
  font: 700 0.82rem Verdana;
  color: var(--race-color, #d8d8de);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

.site-replay-modal-count {
  font: 700 0.65rem Verdana;
  color: #aaa;
  background: rgba(255,255,255,0.07);
  padding: 2px 8px;
  border-radius: 9px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.site-replay-modal-group-rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.site-replay-modal-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 6px;
  padding: 12px 14px;
  border-radius: 7px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.05);
  transition: background 0.15s, border-color 0.15s;
}

.site-replay-modal-row:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.10);
}

/* Leading hero portrait — gives instant race/build identity at a glance. */
.site-replay-modal-hero {
  grid-row: 1 / span 2;
  grid-column: 1;
  width: 36px;
  height: 36px;
  border-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--race-color, #888) 32%, #2d2d32);
  align-self: center;
  flex-shrink: 0;
  object-fit: cover;
  display: block;
}

.site-replay-modal-hero-empty {
  background: rgba(255,255,255,0.03);
  border-style: dashed;
  border-color: rgba(255,255,255,0.10);
}

/* Top line: identity (player vs opponent + tournament chip + stage text), all horizontal */
.site-replay-modal-identity {
  grid-row: 1;
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  min-width: 0;
}

.site-replay-modal-matchup {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-size: 0.92rem;
  flex-shrink: 0;
}

.site-replay-modal-matchup .player {
  color: #f0f0f4;
  font-weight: 700;
}

.site-replay-modal-matchup .vs {
  color: #666;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.site-replay-modal-matchup .opponent {
  color: #aaa;
  font-weight: 500;
}

.site-replay-modal-tournament {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  background: rgba(200, 168, 78, 0.16);
  border: 1px solid rgba(200, 168, 78, 0.32);
  color: #c8a84e;
  font: 700 0.68rem Verdana;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}

.site-replay-modal-stage {
  color: #999;
  font-size: 0.78rem;
  line-height: 1.3;
}

.site-replay-modal-row .site-replay-view-btn {
  grid-row: 1 / span 2;
  grid-column: 3;
  align-self: center;
  flex-shrink: 0;
}

/* Bottom line: prominent diff/similarity content. Visual focal point of the row. */
.site-replay-modal-diff {
  grid-row: 2;
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 6px;
  padding-top: 2px;
}

.site-replay-modal-diff-empty {
  color: #666;
  font-size: 0.72rem;
  font-style: italic;
  letter-spacing: 0.02em;
}

/* Similarity pills (Same build, Same opener, Diff hero, Same pro, etc.) */
.site-replay-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 11px;
  font: 700 0.74rem Verdana;
  letter-spacing: 0.03em;
  white-space: nowrap;
  border: 1px solid transparent;
}

.site-replay-pill.pill-same {
  background: rgba(80, 180, 110, 0.14);
  border-color: rgba(80, 180, 110, 0.35);
  color: #6fcf8a;
}
.site-replay-pill.pill-similar {
  background: rgba(80, 180, 110, 0.10);
  border-color: rgba(80, 180, 110, 0.25);
  color: #8fd6a4;
}
.site-replay-pill.pill-same-opener {
  background: rgba(110, 160, 220, 0.12);
  border-color: rgba(110, 160, 220, 0.30);
  color: #9bbfe8;
}
.site-replay-pill.pill-diff-hero {
  background: rgba(196, 145, 91, 0.12);
  border-color: rgba(196, 145, 91, 0.32);
  color: #d4a877;
}
.site-replay-pill.pill-same-player {
  background: color-mix(in srgb, var(--race-color, #888) 14%, transparent);
  border-color: color-mix(in srgb, var(--race-color, #888) 35%, transparent);
  color: color-mix(in srgb, var(--race-color, #888) 75%, #ddd);
}

/* Unit/upgrade delta chips (+Mountain Giant, −Druids, ±2 upgrades) */
.site-replay-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 4px;
  border-radius: 3px;
  font: 600 0.72rem Verdana;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid transparent;
  line-height: 1.2;
}

.site-replay-delta .delta-icon {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  object-fit: cover;
  flex-shrink: 0;
}

.site-replay-delta .delta-sign {
  font-weight: 800;
  opacity: 0.85;
}

/* Chips without a leading icon (e.g. delta-more, delta-upgrade) keep symmetric padding */
.site-replay-delta.delta-more,
.site-replay-delta.delta-upgrade {
  padding: 3px 8px;
}

/* Pills can carry a small leading icon (hero portrait for "Same opener") */
.site-replay-pill {
  gap: 5px;
}

.site-replay-pill .pill-icon {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  object-fit: cover;
  flex-shrink: 0;
}

.site-replay-delta.delta-add {
  background: rgba(95, 175, 110, 0.10);
  border-color: rgba(95, 175, 110, 0.28);
  color: #7fc798;
}
.site-replay-delta.delta-rem {
  background: rgba(200, 110, 110, 0.10);
  border-color: rgba(200, 110, 110, 0.28);
  color: #d28a8a;
}
.site-replay-delta.delta-more {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
  color: #999;
  font-weight: 500;
}
.site-replay-delta.delta-upgrade {
  background: rgba(166, 120, 200, 0.10);
  border-color: rgba(166, 120, 200, 0.28);
  color: #b894d4;
  cursor: help;
}

@media (max-width: 680px) {
  .site-replay-modal-row {
    padding: 10px 12px;
    column-gap: 10px;
  }
  .site-replay-modal-hero { width: 30px; height: 30px; }
  .site-replay-modal-matchup { font-size: 0.86rem; }
  .site-replay-modal-stage { font-size: 0.72rem; }
  .site-replay-pill { font-size: 0.68rem; padding: 2px 8px; }
  .site-replay-delta { font-size: 0.66rem; padding: 2px 7px 2px 4px; }
  .site-replay-delta .delta-icon { width: 14px; height: 14px; }
  .site-replay-pill .pill-icon { width: 14px; height: 14px; }
}

/* ── Description (hidden on card, shown on detail page) ─── */
.site-card-desc {
  display: none;
}

/* replay count moved to .site-replay-section */

/* ── Race badge (used on build detail page) ──────────────── */
.site-race-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.25rem 0.65rem 0.25rem 0.3rem;
  border-radius: 5px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--race-color) 15%, #1a1e2a);
  color: var(--race-color);
  border: 1px solid color-mix(in srgb, var(--race-color) 30%, transparent);
}

.site-race-badge img {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  object-fit: cover;
}


.site-tag {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  font-size: 0.68rem;
  font-weight: 600;
  background: var(--site-surface-2);
  color: var(--site-text-muted);
  border: 1px solid var(--site-border);
  text-transform: lowercase;
}

.site-difficulty {
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: auto;
}
.site-difficulty.beginner     { background: rgba(68,221,136,0.12); color: #44DD88; }
.site-difficulty.intermediate { background: rgba(255,193,7,0.12);  color: #FFC107; }
.site-difficulty.advanced     { background: rgba(255,68,68,0.12);  color: #FF4444; }

.site-replay-count {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--site-text-muted);
}

.site-filter-bar {
  background: var(--site-surface);
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius);
  padding: 1.1rem 1.4rem;
  margin-bottom: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.site-filter-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.site-filter-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--site-text-muted);
  width: 3.5rem;
  flex-shrink: 0;
}

.site-filter-btn {
  padding: 0.3rem 0.75rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid var(--site-border);
  background: var(--site-surface-2);
  color: var(--site-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.site-filter-btn:hover { color: var(--site-text); border-color: rgba(255,255,255,0.2); }

.site-filter-btn.active {
  background: var(--site-surface-2);
  border-color: var(--race-color, var(--site-accent));
  color: var(--race-color, var(--site-accent));
}

.site-no-results {
  padding: 3rem;
  text-align: center;
  color: var(--site-text-muted);
  font-size: 0.9rem;
}

.site-build-hero {
  padding: 2.5rem 0 2rem;
  border-bottom: 1px solid var(--site-border);
  margin-bottom: 2.5rem;
}

.site-breadcrumb {
  font-size: 0.8rem;
  color: var(--site-text-muted);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.site-breadcrumb a { color: var(--site-text-muted); text-decoration: none; }
.site-breadcrumb a:hover { color: var(--site-text); }

.site-build-hero-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.site-build-hero-name {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--site-text);
  margin: 0;
  letter-spacing: -0.02em;
}

.site-build-hero-desc {
  font-size: 0.95rem;
  color: var(--site-text-muted);
  line-height: 1.6;
  max-width: 680px;
}

.site-strategy-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.site-strategy-list li {
  font-size: 0.875rem;
  color: var(--site-text-muted);
  line-height: 1.5;
  padding-left: 1.1rem;
  position: relative;
}

.site-strategy-list li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--race-color, var(--site-accent));
  font-weight: 700;
}

.site-timings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin-top: 0.75rem;
}

.site-timings-table th {
  text-align: left;
  padding: 0.4rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--site-text-muted);
  border-bottom: 1px solid var(--site-border);
}

.site-timings-table td {
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--site-text);
  vertical-align: top;
}

.site-timings-table tr:last-child td { border-bottom: none; }
.site-timings-table tr:hover td { background: rgba(255,255,255,0.02); }

.site-timing-type-building { color: #88AAFF; }
.site-timing-type-unit     { color: var(--site-text-muted); }
.site-timing-type-hero     { color: #FFD700; }
.site-timing-type-expansion{ color: #FFD700; }

.site-replay-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.site-replay-card {
  background: var(--site-surface);
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius);
  padding: 1.25rem 1.4rem;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  transition: border-color 0.15s;
}

.site-replay-card:hover { border-color: rgba(255,255,255,0.15); }

.site-replay-card-info { flex: 1; min-width: 0; }

.site-replay-matchup-line {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--site-text);
  margin-bottom: 0.25rem;
}

.site-replay-meta {
  font-size: 0.78rem;
  color: var(--site-text-muted);
  margin-bottom: 0.5rem;
}

.site-replay-notes {
  font-size: 0.8rem;
  color: var(--site-text-muted);
  line-height: 1.5;
  font-style: italic;
}

.site-replay-outcome {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 0.4rem;
}
.site-replay-outcome.win  { background: rgba(68,221,136,0.12); color: #44DD88; }
.site-replay-outcome.loss { background: rgba(255,68,68,0.12);  color: #FF6666; }

.site-watch-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--site-radius);
  background: var(--race-color, var(--site-accent));
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  flex-shrink: 0;
  white-space: nowrap;
}

.site-watch-btn:hover { opacity: 0.88; transform: translateY(-1px); }

.site-featured-build {
  background: var(--site-surface);
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius-lg);
  padding: 1.5rem 1.75rem;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
}

.site-featured-build::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--race-color, var(--site-accent));
}

.site-featured-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--site-accent);
  margin-bottom: 0.4rem;
}

.site-featured-name {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--site-text);
  margin-bottom: 0.35rem;
}

.site-featured-desc {
  font-size: 0.85rem;
  color: var(--site-text-muted);
  line-height: 1.5;
}

.site-divider {
  border: none;
  height: 1px;
  margin: 2.5rem 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--site-border) 15%,
    rgba(68,136,255,0.12) 50%,
    var(--site-border) 85%,
    transparent
  );
}

.site-loading {
  padding: 3rem;
  text-align: center;
  color: var(--site-text-muted);
  font-size: 0.9rem;
}

.site-error {
  padding: 2rem;
  background: rgba(255,68,68,0.06);
  border: 1px solid rgba(255,68,68,0.2);
  border-radius: var(--site-radius);
  color: #FF8888;
  font-size: 0.85rem;
}

/* ── (finder styles removed — replaced by matchup columns) ── */

/* ── Browse layout: sidebar + grid ───────────────────────── */
.site-browse-layout {
  display: grid;
  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  max-width: none;
  margin: 0 auto;
  padding: 12px 24px 24px;
}

@media (max-width: 1024px) {
  .site-browse-layout {
    grid-template-columns: 1fr;
    padding: 10px 16px 20px;
    gap: 18px;
  }
}

@media (max-width: 640px) {
  .site-card-portrait {
    width: 52px;
    height: 52px;
  }
}

/* ── Filter sidebar ──────────────────────────────────────── */
.site-filter-panel {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--site-accent) 2%, var(--site-surface)) 0%,
      var(--site-surface) 30%
    );
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius-lg);
  padding: 0.65rem;
  position: sticky;
  top: 80px;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.03);
}

.site-filter-section {
  margin-bottom: 0.75rem;
}

.site-filter-section:last-of-type {
  margin-bottom: 0.5rem;
}

.site-filter-section-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--site-text-muted);
  margin-bottom: 0.35rem;
}

/* ── Race filter list (single column) ───────────────────── */
.site-race-filter-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.site-race-pick {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--site-border);
  background: var(--site-surface-2);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  width: 100%;
  font-family: inherit;
}

.site-race-pick:hover {
  border-color: color-mix(in srgb, var(--race-color) 40%, transparent);
  background: color-mix(in srgb, var(--race-color) 6%, var(--site-surface-2));
}

.site-race-pick.active {
  border-color: var(--race-color);
  background: color-mix(in srgb, var(--race-color) 12%, var(--site-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--race-color) 20%, transparent);
}

.site-race-pick-icon {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}

.site-race-pick-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--race-color);
  white-space: nowrap;
}

.site-playstyle-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.site-playstyle-btn {
  padding: 0.4rem 0.75rem;
  border-radius: 4px;
  border: 1px solid var(--site-border);
  background: var(--site-surface-2);
  color: var(--site-text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.site-playstyle-btn:hover {
  color: var(--site-text);
  border-color: rgba(255,255,255,0.2);
}

.site-playstyle-btn.active {
  border-color: var(--site-accent);
  color: var(--site-accent);
  background: rgba(68,136,255,0.1);
}

/* ── 3-axis filter buttons ────────────────────────────────── */
.site-filter-axis-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.site-axis-btn {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--site-border);
  background: var(--site-surface-2);
  color: var(--site-text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.site-axis-btn:hover {
  color: var(--tag-color, var(--site-text));
  border-color: color-mix(in srgb, var(--tag-color, #fff) 40%, transparent);
}

.site-axis-btn.active {
  border-color: var(--tag-color);
  color: var(--tag-color);
  background: color-mix(in srgb, var(--tag-color) 12%, var(--site-surface));
}

/* ── Tags row ────────────────────────────────────────────── */
.site-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.site-card-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  background: color-mix(in srgb, var(--tag-color, #888) 15%, #1a1a1e);
  color: var(--tag-color, #aaa);
  border: 1px solid color-mix(in srgb, var(--tag-color, #888) 30%, transparent);
}

/* ── Matchup filter buttons ──────────────────────────────── */
.site-matchup-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.site-matchup-btn {
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid #333;
  background: transparent;
  color: #888;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.site-matchup-btn:hover {
  color: var(--site-text);
  border-color: rgba(255,255,255,0.2);
}

.site-matchup-btn.active {
  border-color: var(--race-color, var(--site-accent));
  color: var(--race-color, var(--site-accent));
  background: rgba(255,255,255,0.05);
}


/* ── No-replay card state ─────────────────────────────── */

.site-build-card.no-replay {
  cursor: default;
  opacity: 1;
}

.site-build-card.no-replay:hover {
  background: var(--card-bg, #1a1a1e);
  border-color: var(--card-border, #2d2d32);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ── Replay list section ──────────────────────────────── */
.site-replay-section {
  padding-top: 10px;
  border-top: 1px solid var(--card-divider, rgba(255,255,255,0.08));
  margin-top: auto;
  position: relative;
  z-index: 1;
}

.site-replay-item {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  gap: 6px;
  padding: 10px;
  border-radius: 4px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  font-size: 0.82rem;
}

.site-replay-item-meta {
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}

.site-replay-item-meta:empty {
  display: none;
}

.site-replay-item-info {
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  min-width: 0;
}

.site-replay-item-actions {
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.site-replay-item .site-replay-view-btn {
  align-self: center;
}

.site-replay-item:hover {
  background: rgba(255,255,255,0.14);
}

.site-replay-item .site-replay-outcome {
  padding: 1px 4px;
  font-size: 0.6rem;
  margin-right: 0;
  flex-shrink: 0;
}

.site-replay-players {
  color: #ccc;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.site-replay-player {
  color: #e8e8ec;
  font-weight: 700;
  white-space: normal;
  overflow-wrap: break-word;
  min-width: 0;
}

.site-replay-map {
  color: #999;
  font-size: 0.78rem;
  white-space: normal;
  overflow-wrap: break-word;
  min-width: 0;
}

.site-replay-stage {
  color: #999;
  font-size: 0.74rem;
  line-height: 1.3;
  min-width: 0;
  flex: 1 1 auto;
  white-space: normal;
  overflow-wrap: break-word;
}

/* ── Tournament badge on replay items ───────────────── */
.site-replay-tournament {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgba(200, 168, 78, 0.16);
  border: 1px solid rgba(200, 168, 78, 0.32);
  color: #c8a84e;
  font: 700 0.66rem Verdana;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}

.site-tournament-btn {
  border-color: rgba(200, 168, 78, 0.3) !important;
}

/* ── "View More Replays" toggle — secondary action paired with View ──── */
.site-replay-toggle {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 4px;
  color: #bbb;
  font: 600 0.74rem Verdana;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.site-replay-toggle:hover {
  color: #fff;
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.24);
}

.site-replay-view-btn {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--race-color);
  background: color-mix(in srgb, var(--race-color) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--race-color) 30%, transparent);
  border-radius: 4px;
  padding: 3px 10px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}

.site-replay-view-btn:hover {
  background: color-mix(in srgb, var(--race-color) 22%, transparent);
  border-color: color-mix(in srgb, var(--race-color) 50%, transparent);
}

.site-replay-none {
  font-size: 0.82rem;
  color: #997744;
  font-weight: 600;
  font-style: italic;
  padding: 4px 0;
}

/* ── Accessibility: focus indicators ─────────────────────── */
.site-nav-link:focus-visible,
.site-build-card:focus-visible,
.site-race-pick:focus-visible,
.site-playstyle-btn:focus-visible,
.site-matchup-btn:focus-visible,
.site-axis-btn:focus-visible {
  outline: 2px solid var(--site-accent);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   VIEWER RESPONSIVE — desktop minimum + mobile build-order-only layout
   ══════════════════════════════════════════════════════════════════════════ */

/* Below the viewer minimum: #app enforces 960px via min-width, html scrolls.
   No additional rules needed here — the min-width on #app handles it.       */

/* Mobile viewport (≤ 767px): collapse to build-order-only, no canvas.       */
@media (max-width: 767px) {
  #app {
    min-width: 0; /* let the viewer fill a narrow mobile screen */
  }

  /* Override all layout-mode grid variants to show build order only */
  #content {
    grid-template-areas: "buildorder" !important;
    grid-template-rows: 1fr !important;
    grid-template-columns: 1fr !important;
  }

  #gameplay-area { display: none !important; }
  #scrubber-bar  { display: none !important; }

  #build-area {
    display: block !important;
    grid-area: buildorder;
    overflow-y: auto;
  }

  #build-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    top: auto;
  }

  /* Compact menu bar on mobile */
  #menu {
    flex-wrap: wrap;
    max-height: none;
    padding: 0.3rem 0.5rem;
    gap: 0.25rem;
  }

  /* Slightly tighter rows */
  .bo-row { min-height: 34px; padding: 2px 4px; }
  .bo-row-desc { font-size: 14px; gap: 6px; }
  .bo-row-icon { width: 28px; height: 28px; }
}

/* ── About page ──────────────────────────────────────── */
.site-about-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 0.5rem 0 2rem;
}

/* ── About: hero ── */
.about-hero {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--site-border);
}

.about-hero-title {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 800;
  color: var(--site-text);
  margin: 0 0 0.6rem;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.about-hero-sub {
  font-size: 0.9rem;
  color: var(--site-text-muted);
  line-height: 1.65;
  margin: 0;
}

.about-hero-sub em {
  font-style: normal;
  color: var(--site-accent);
}

.about-hero-text { flex: 1; min-width: 0; }

.about-hero-demo {
  flex-shrink: 0;
  width: 320px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--site-border);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.about-hero-demo video {
  width: 100%;
  display: block;
}

/* ── About: feature strip ── */
.about-feature-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2.5rem;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.about-feat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1rem 0.75rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

.about-feat-icon {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

svg.about-feat-icon {
  color: var(--site-accent);
}

.about-feat-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
}

.about-feat-desc {
  font-size: 0.8rem;
  color: var(--site-text-muted);
  line-height: 1.35;
}

/* ── About: sections ── */
.about-section {
  margin-bottom: 2.5rem;
}

.about-section-muted {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--site-border);
  border-radius: 10px;
  padding: 1.5rem;
}

.about-section-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--site-text);
  margin: 0 0 0.35rem;
  letter-spacing: -0.02em;
}

.about-section-sub {
  font-size: 0.88rem;
  color: var(--site-text-muted);
  line-height: 1.6;
  margin: 0 0 1.25rem;
  max-width: 600px;
}

.about-section a {
  color: var(--site-accent);
  text-decoration: none;
}
.about-section a:hover { text-decoration: underline; }

/* ── About: feature cards ── */
.about-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.about-feature-card {
  background: var(--site-surface);
  border: 1px solid var(--site-border);
  border-radius: 8px;
  padding: 1rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.about-feature-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.about-feature-icon-row {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
}

.about-feature-icon-row img {
  width: 36px;
  height: 36px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  object-fit: cover;
}

.about-feature-card h3 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--site-text);
  margin: 0 0 0.3rem;
}

.about-feature-card p {
  font-size: 0.82rem;
  color: var(--site-text-muted);
  line-height: 1.55;
  margin: 0;
}

/* ── About: two-column layout ── */
.about-two-col {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.about-col-text { flex: 1; min-width: 0; }

.about-col-heroes {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.about-highlight-item {
  margin-bottom: 1rem;
}

.about-highlight-label {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--site-accent);
  margin-bottom: 0.2rem;
}

.about-highlight-item p {
  font-size: 0.85rem;
  color: var(--site-text-muted);
  line-height: 1.6;
  margin: 0;
}

.about-hero-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.about-hero-grid img {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  object-fit: cover;
  transition: border-color 0.15s, transform 0.15s;
}

.about-hero-grid img:hover {
  border-color: rgba(255, 255, 255, 0.35);
  transform: scale(1.08);
}

/* ── About: steps ── */
.about-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1rem;
}

.about-step { text-align: center; }

.about-step-num {
  width: 36px;
  height: 36px;
  margin: 0 auto 0.6rem;
  border-radius: 50%;
  background: var(--site-accent);
  color: #000;
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-step h3 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--site-text);
  margin: 0 0 0.3rem;
}

.about-step p {
  font-size: 0.82rem;
  color: var(--site-text-muted);
  line-height: 1.55;
  margin: 0;
}

/* ── About: info cards (open source / free) ── */
.about-two-col-even { gap: 1rem; }
.about-two-col-even > * { flex: 1; }

.about-info-card {
  background: var(--site-surface);
  border: 1px solid var(--site-border);
  border-radius: 8px;
  padding: 1.25rem;
}

.about-info-card h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--site-text);
  margin: 0 0 0.5rem;
}

.about-info-card p {
  font-size: 0.85rem;
  color: var(--site-text-muted);
  line-height: 1.65;
  margin: 0;
}

.about-info-card a {
  color: var(--site-accent);
  text-decoration: none;
}
.about-info-card a:hover { text-decoration: underline; }

/* ── About: bottom CTA ── */
.about-bottom-cta {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--site-border);
}

/* ── About: responsive ── */
@media (max-width: 700px) {
  .about-hero {
    flex-direction: column;
    gap: 1.25rem;
    text-align: center;
  }
  .about-hero-demo { width: 100%; max-width: 360px; }
  .about-feature-strip { grid-template-columns: repeat(2, 1fr); }
  .about-feat { padding: 0.75rem 0.5rem; }
  .about-feature-grid { grid-template-columns: 1fr; }
  .about-two-col { flex-direction: column; gap: 1.25rem; }
  .about-col-heroes { align-self: center; }
  .about-steps { grid-template-columns: 1fr; gap: 1rem; }
  .about-two-col-even { flex-direction: column; }
  .about-bottom-cta { flex-direction: column; align-items: center; }
}

@media (min-width: 701px) and (max-width: 900px) {
  .about-feature-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Site footer ──────────────────────────────────────── */
.site-footer {
  max-width: 1800px;
  margin: 0 auto;
  padding: 2rem 1.5rem 1.5rem;
  border-top: 1px solid var(--site-border);
}

.site-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 1.25rem;
}

.site-footer-brand {
  font-size: 1rem;
  font-weight: 800;
  color: var(--site-text);
  margin-bottom: 0.35rem;
  letter-spacing: -0.02em;
}

.site-footer-about {
  max-width: 420px;
  font-size: 0.82rem;
  color: var(--site-text-muted);
  line-height: 1.6;
}

.site-footer-about p { margin: 0; }

.site-footer-links {
  display: flex;
  gap: 1.25rem;
  flex-shrink: 0;
}

.site-footer-links a {
  font-size: 0.82rem;
  color: var(--site-text-muted);
  text-decoration: none;
  white-space: nowrap;
}

.site-footer-links a:hover {
  color: var(--site-accent);
}

.site-footer-legal {
  font-size: 0.75rem;
  color: #666;
  line-height: 1.5;
  border-top: 1px solid var(--site-border);
  padding-top: 1rem;
}

@media (max-width: 600px) {
  .site-footer-inner {
    flex-direction: column;
    gap: 1rem;
  }
  .site-footer-links {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
}

/* ===== Building Placement Viewer Modal ===== */

#placement-viewer-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  z-index: 5000;
}

.placement-viewer-panel {
  background-color: #1a2830;
  border: 1px solid #3a4a55;
  border-radius: 0.5rem;
  padding: 0.75rem;
  max-width: 92vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.placement-viewer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  flex: 0 0 auto;
}

.placement-viewer-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #c8d0d8;
  font-size: 0.9rem;
  font-weight: bold;
}

.pv-race-icon {
  width: 20px;
  height: 20px;
  border-radius: 3px;
}

.pv-player-name {
  font-weight: bold;
}

.pv-title-sep {
  color: #667;
  font-weight: normal;
}

.placement-viewer-close {
  color: #888;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0 0.25rem;
  line-height: 1;
}
.placement-viewer-close:hover {
  color: #fff;
}

.placement-viewer-canvas {
  border: 1px solid #2a3a45;
  border-radius: 0.25rem;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.placement-viewer-canvas canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.placement-viewer-controls {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding-top: 0.6rem;
  flex: 0 0 auto;
}

.pv-snapshot-btn {
  background: #1a2830;
  color: #c0c8d0;
  border: 1px solid #3a4a55;
  border-radius: 4px;
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.pv-snapshot-btn:hover:not(:disabled) {
  background: #243440;
  border-color: #5a6a75;
}

.pv-snapshot-btn.active {
  background: #2a3a20;
  border-color: #c8a030;
  color: #e8d878;
}

.pv-snapshot-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.placement-viewer-label {
  color: #889098;
  font-size: 0.8rem;
  margin-top: 0.4rem;
  text-align: center;
  flex: 0 0 auto;
}

/* ====================================================================
   Chapter Markers (cm-) — scrubber markers, heatmap, BO quick-jump
   ==================================================================== */

.cm-scrubber-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 1;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.cm-scrubber-marker:hover {
  transform: translate(-50%, -50%) scale(1.6);
}

.cm-scrubber-marker.cm-major {
  width: 10px;
  height: 10px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  filter: brightness(1.2);
}
.cm-scrubber-marker.cm-minor {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0.55;
}

/* Cluster markers — larger circle with count badge */
.cm-scrubber-marker.cm-cluster {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  clip-path: none;
  opacity: 1;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  box-sizing: border-box;
  filter: none;
}
.cm-scrubber-marker.cm-cluster.cm-major {
  width: 16px;
  height: 16px;
}
.cm-cluster-count {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 14px;
  height: 14px;
  line-height: 14px;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  background: #1a2830;
  color: #e0e0e0;
  border-radius: 7px;
  border: 1px solid #3a4a55;
  pointer-events: none;
  padding: 0 2px;
}

/* Tooltip — multi-row for clusters */
.cm-tooltip {
  position: fixed;
  transform: translateX(-50%);
  background: #141d29;
  color: #e0e0e0;
  font-size: 0.75rem;
  padding: 6px 10px;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
  border: 1px solid #3a4a55;
  z-index: 10000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cm-tooltip-row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.cm-tooltip-pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cm-tooltip-icon {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  flex-shrink: 0;
}

.cm-heatmap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.35;
  border-radius: inherit;
  z-index: 0;
}

/* BO Quick-Jump nav */
.bo-chapter-nav {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #3a4a55 transparent;
  flex-wrap: wrap;
  background: #1a2a3e;
  border: 1px solid #2e4560;
  border-radius: 6px;
  margin: 4px 6px;
}
.bo-chapter-heading {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #c0c8d0;
  flex-shrink: 0;
  padding-right: 3px;
}

.bo-chapter-btn {
  font-family: inherit;
  font-size: 0.8rem;
  line-height: 1.2;
  padding: 2px 10px;
  border-radius: 10px;
  border: 1px solid var(--race-muted, #3a4a55);
  background: rgba(15, 22, 32, 0.85);
  color: #999;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.bo-chapter-btn:hover {
  background: rgba(40, 60, 85, 0.9);
  color: #ddd;
}
.bo-chapter-btn.bo-chapter-major {
  color: #ccc;
  border-color: var(--race-accent, #6BA3FF);
  font-weight: 600;
}
.bo-chapter-btn.bo-chapter-major:hover {
  color: #fff;
}
.bo-chapter-icon {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 2px;
}

/* ===== BO Filter Bar ===== */

.bo-filter-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  margin: 0 6px 6px;
  background: linear-gradient(180deg, #0a1220 0%, #0d1625 100%);
  border: 1px solid #1f2d42;
  border-radius: 7px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  flex-wrap: nowrap;
  overflow: hidden;
}
.bo-filter-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #4a5668;
  flex-shrink: 0;
  padding: 0 5px 0 3px;
}
.bo-filter-chip {
  font-family: inherit;
  font-size: 0.8rem;
  line-height: 1;
  padding: 6px 4px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: #4e5a6c;
  cursor: pointer;
  white-space: nowrap;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
}
.bo-filter-chip:hover {
  color: #a8b3c0;
  background: rgba(255, 255, 255, 0.035);
}
.bo-filter-chip.selected {
  background: color-mix(in srgb, var(--race-accent, #6BA3FF) 16%, transparent);
  color: var(--race-accent, #6BA3FF);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--race-accent, #6BA3FF) 42%, transparent),
              0 1px 0 rgba(0, 0, 0, 0.25);
}
.bo-filter-chip.selected:hover {
  background: color-mix(in srgb, var(--race-accent, #6BA3FF) 24%, transparent);
  filter: brightness(1.08);
}

/* ===== Match Summary Modal ===== */

#ms-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.88);
  z-index: 5000;
}

.ms-panel {
  background-color: #111a22;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.5rem;
  width: 92%;
  max-width: 1100px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}

.ms-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
  background: rgba(0,0,0,0.2);
}

.ms-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ms-title {
  font: 700 1.1rem Verdana, sans-serif;
  color: #fff;
}

.ms-map-name {
  font: 400 0.85rem Verdana, sans-serif;
  color: #8a9aa5;
}

.ms-duration {
  font: 600 0.85rem Verdana, sans-serif;
  color: #5fa5cb;
}

.ms-close {
  color: #666;
  font-size: 1.6rem;
  cursor: pointer;
  padding: 0 0.25rem;
  line-height: 1;
  transition: color 0.15s;
}

.ms-close:hover {
  color: #fff;
}

/* Tab bar */
.ms-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
  overflow-x: auto;
  background: rgba(0,0,0,0.15);
}

.ms-tab {
  padding: 0.6rem 1rem;
  font: 600 0.8rem Verdana, sans-serif;
  color: #8a9aa5;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  user-select: none;
}

.ms-tab:hover {
  color: #c8d0d8;
}

.ms-tab-active {
  color: #fff;
  border-bottom-color: #00aaff;
}

/* Scrollable body */
.ms-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
}

/* Side-by-side player columns */
.ms-players {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.ms-player-col {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 0.4rem;
  padding: 0.5rem 0.6rem;
  display: flex;
  flex-direction: column;
}

/* Overview column layout: top content grows, bottom stats pin down */
.ms-ov-top { flex: 1; }
.ms-ov-bottom { margin-top: auto; }

/* Player header */
.ms-player-name {
  font: 700 0.95rem Verdana, sans-serif;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ms-race-icon {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 2px solid #555;
}

.ms-race-label {
  font: 600 0.7rem Verdana, sans-serif;
  opacity: 0.7;
}

/* Section labels */
.ms-section-label {
  font: 700 0.75rem Verdana, sans-serif;
  color: #5fa5cb;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0.6rem 0 0.3rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.ms-section-label:first-child {
  margin-top: 0;
}

.ms-subsection {
  font: 600 0.75rem Verdana, sans-serif;
  color: #8a9aa5;
  margin: 0.3rem 0 0.2rem;
}

/* Tier labels */
.ms-tier-label {
  font: 700 0.75rem Verdana, sans-serif;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  margin: 0.5rem 0 0.25rem;
}

.ms-tier-label:first-child {
  margin-top: 0;
}

.ms-tier-label.t1 { color: #fff; background: rgba(255,255,255,0.06); }
.ms-tier-label.t2 { color: #21a5e3; background: rgba(33,165,227,0.1); }
.ms-tier-label.t3 { color: #FFFF33; background: rgba(255,255,51,0.08); }

/* Icon grid */
.ms-icon-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ms-icon-wrap {
  position: relative;
  display: inline-block;
}

.ms-icon {
  width: 36px;
  height: 36px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.15);
  display: block;
}

.ms-icon-count {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: rgba(0,0,0,0.85);
  color: #fff;
  font: 700 0.6rem Verdana, sans-serif;
  padding: 0 3px;
  border-radius: 2px;
  min-width: 14px;
  text-align: center;
  line-height: 1.4;
}

/* Stat rows */
.ms-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.2rem 0;
  font: 400 0.82rem Verdana, sans-serif;
  color: rgba(255,255,255,0.7);
}

.ms-stat-value {
  color: #fff;
  font-weight: 600;
}

.ms-gold { color: #FFD700; }
.ms-lumber { color: #7CFC00; }

/* Stats table for aligned overview columns */
.ms-stats-table {
  width: 100%;
  border-collapse: collapse;
}

.ms-stats-table td {
  padding: 0.2rem 0;
  font: 400 0.82rem Verdana, sans-serif;
  color: rgba(255,255,255,0.7);
  vertical-align: middle;
}

.ms-stats-table td:first-child {
  width: 40%;
}

.ms-stats-table td:last-child {
  text-align: right;
  color: #fff;
  font-weight: 600;
}

.ms-tier-badge {
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.8rem;
}

.ms-tier-badge.t1 { background: rgba(255,255,255,0.1); }
.ms-tier-badge.t2 { color: #21a5e3; background: rgba(33,165,227,0.15); }
.ms-tier-badge.t3 { color: #FFFF33; background: rgba(255,255,51,0.12); }

.ms-expo-yes { color: #44DD88; }
.ms-expo-no { color: #888; }

/* Heroes — inline row, portrait on top, spells below */
.ms-heroes-row {
  display: flex;
  gap: 10px;
  margin-bottom: 0.3rem;
}

.ms-hero-inline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.ms-hero-portrait-wrap {
  position: relative;
  flex-shrink: 0;
}

.ms-hero-portrait {
  width: 42px;
  height: 42px;
  border-radius: 4px;
  border: 2px solid rgba(255,255,255,0.2);
  display: block;
}

.ms-hero-level {
  position: absolute;
  bottom: -3px;
  right: -3px;
  background: #111;
  color: #FFD700;
  font: 700 0.6rem Verdana, sans-serif;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #FFD700;
}

.ms-hero-spells-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}

.ms-spell {
  position: relative;
  display: inline-block;
}

.ms-spell-icon {
  width: 20px;
  height: 20px;
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,0.1);
  display: block;
}

.ms-spell-level {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: rgba(0,0,0,0.85);
  color: #5fa5cb;
  font: 700 0.5rem Verdana, sans-serif;
  padding: 0 2px;
  border-radius: 2px;
  min-width: 9px;
  text-align: center;
}

/* Resource icons for workers/economy */
.ms-res-icon {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  vertical-align: middle;
  margin: 0 2px 0 6px;
}

.ms-res-icon:first-child { margin-left: 0; }

.ms-res-pip {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin: 0 2px 0 6px;
  vertical-align: middle;
}

.ms-res-build { background: #58A6FF; }

/* APM line chart */
.ms-apm-chart {
  width: 100%;
  height: auto;
  max-height: 65px;
  display: block;
}

/* Upgrade rows */
.ms-upgrade-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ms-upgrade-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.3rem;
  border-radius: 3px;
  font: 400 0.8rem Verdana, sans-serif;
  color: rgba(255,255,255,0.85);
}

.ms-upgrade-row.ms-atk { border-left: 3px solid #e74c3c; }
.ms-upgrade-row.ms-def { border-left: 3px solid #3498db; }
.ms-upgrade-row.ms-res { border-left: 3px solid #9b59b6; }

.ms-atk-label { color: #e74c3c; }
.ms-def-label { color: #3498db; }
.ms-res-label { color: #9b59b6; }

.ms-upgrade-icon {
  width: 28px;
  height: 28px;
  border-radius: 3px;
  flex-shrink: 0;
}

.ms-upgrade-name {
  flex: 1;
}

.ms-upgrade-level {
  font-weight: 700;
  color: #fff;
}

/* Timeline mini (within upgrade tab) */
.ms-timeline-mini {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0;
  font: 400 0.78rem Verdana, sans-serif;
  color: rgba(255,255,255,0.7);
}

.ms-timeline-mini .ms-timeline-time {
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  color: #5fa5cb;
  min-width: 3rem;
  text-align: right;
}

.ms-timeline-mini .ms-timeline-icon {
  width: 22px;
  height: 22px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* Creep route */
.ms-creep-route {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 0.2rem;
}

.ms-creep-step {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 2px 0;
}

.ms-creep-order {
  font: 700 0.6rem Verdana, sans-serif;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid #FFD700;
  color: #FFD700;
  background: rgba(0,0,0,0.3);
}

.ms-creep-diff-label {
  font: 700 0.7rem Verdana, sans-serif;
  margin: 0.35rem 0 0.15rem;
}

.ms-creep-diff-label:first-child {
  margin-top: 0;
}

.ms-creep-footer {
  display: flex;
  gap: 1rem;
  padding: 0.4rem 0 0;
  font: 400 0.72rem Verdana, sans-serif;
  color: rgba(255,255,255,0.4);
}

.ms-creep-footer-item::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  margin-right: 4px;
  vertical-align: middle;
}

.ms-creep-camp {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
}

.ms-creep-icons {
  display: flex;
  gap: 3px;
}

.ms-creep-icon-wrap {
  position: relative;
  display: inline-block;
}

.ms-creep-icon {
  width: 32px;
  height: 32px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.1);
  display: block;
}

.ms-creep-lvl {
  position: absolute;
  bottom: -1px;
  right: -1px;
  background: rgba(0,0,0,0.82);
  color: #ccc;
  font: 700 0.55rem Verdana, sans-serif;
  padding: 0 3px;
  border-radius: 2px;
  line-height: 1.4;
}

.ms-creep-camp-info {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ms-creep-meta {
  font: 600 0.68rem 'Courier New', monospace;
  color: #5fa5cb;
  white-space: nowrap;
}

.ms-creep-xp {
  font: 600 0.62rem Verdana, sans-serif;
  color: #FFD700;
}

.ms-creep-partial {
  font: 600 0.62rem Verdana, sans-serif;
  color: #e0a030;
}

.ms-creep-step-partial {
  opacity: 0.65;
  border-left: 2px dashed #e0a030;
  padding-left: 4px;
}

/* Creep score comparison */
.ms-creep-score {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.ms-creep-score-side {
  display: flex;
  flex-direction: column;
}

.ms-creep-score-name {
  font: 700 0.8rem Verdana, sans-serif;
}

.ms-creep-score-stat {
  font: 400 0.7rem Verdana, sans-serif;
  color: rgba(255,255,255,0.5);
}

.ms-creep-bar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  gap: 2px;
  margin-bottom: 0.6rem;
}

.ms-creep-bar-seg {
  height: 100%;
  border-radius: 3px;
  opacity: 0.7;
}

/* Hero XP breakdown */
.ms-hero-xp-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 2px 0;
}

.ms-hero-xp-icon {
  width: 24px;
  height: 24px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.12);
  flex-shrink: 0;
}

.ms-hero-xp-name {
  font: 600 0.72rem Verdana, sans-serif;
  color: rgba(255,255,255,0.7);
  min-width: 60px;
}

.ms-hero-xp-bar-track {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  overflow: hidden;
}

.ms-hero-xp-bar {
  height: 100%;
  border-radius: 4px;
  opacity: 0.6;
}

.ms-hero-xp-val {
  font: 700 0.68rem Verdana, sans-serif;
  color: #FFD700;
  min-width: 35px;
  text-align: right;
}

/* Charts */
.ms-chart {
  width: 100%;
  height: auto;
  max-height: 140px;
  margin-bottom: 0.5rem;
}

.ms-chart-label {
  fill: rgba(255,255,255,0.4);
  font-size: 9px;
  font-family: 'Courier New', monospace;
}

/* Tier comparison bar */
.ms-tier-compare {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.ms-tier-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ms-tier-player {
  font: 600 0.8rem Verdana, sans-serif;
  min-width: 80px;
  text-align: right;
}

.ms-tier-bar-track {
  flex: 1;
  height: 20px;
  display: flex;
  border-radius: 3px;
  overflow: hidden;
}

.ms-tier-seg {
  height: 100%;
}

.ms-tier-seg.t1 { background: rgba(255,255,255,0.12); }
.ms-tier-seg.t2 { background: rgba(33,165,227,0.35); }
.ms-tier-seg.t3 { background: rgba(255,255,51,0.3); }

.ms-tier-times {
  display: flex;
  gap: 0.4rem;
  min-width: 120px;
}

.ms-tier-time {
  font: 600 0.7rem 'Courier New', monospace;
}

.ms-tier-time.t2 { color: #21a5e3; }
.ms-tier-time.t3 { color: #FFFF33; }

/* Category comparison bars */
.ms-cat-compare {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.ms-cat-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ms-cat-label {
  font: 600 0.75rem Verdana, sans-serif;
  color: #5fa5cb;
  min-width: 55px;
  text-align: right;
}

.ms-cat-bars {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ms-cat-bar-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.ms-cat-bar {
  height: 12px;
  border-radius: 2px;
  min-width: 2px;
  transition: width 0.3s;
}

.ms-cat-val {
  font: 400 0.65rem Verdana, sans-serif;
  color: rgba(255,255,255,0.5);
  min-width: 30px;
}

/* Combat types — unit roster cards */
.ms-ct-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ms-ct-unit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 4px 5px;
  background: rgba(255,255,255,0.02);
  border-radius: 4px;
}

.ms-ct-name {
  font: 600 0.68rem Verdana, sans-serif;
  color: rgba(255,255,255,0.6);
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-ct-portrait-wrap {
  position: relative;
  display: inline-block;
}

.ms-ct-unit-icon {
  width: 42px;
  height: 42px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.15);
  display: block;
}

.ms-ct-count {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: rgba(0,0,0,0.85);
  color: #fff;
  font: 700 0.6rem Verdana, sans-serif;
  padding: 0 3px;
  border-radius: 2px;
  min-width: 14px;
  text-align: center;
  line-height: 1.4;
}

.ms-ct-type-col {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ms-ct-typed {
  display: flex;
  align-items: center;
  gap: 3px;
}

.ms-ct-type-icon {
  width: 18px;
  height: 18px;
  border-radius: 2px;
}

.ms-ct-type-lbl {
  font: 400 0.62rem Verdana, sans-serif;
  color: rgba(255,255,255,0.45);
}

/* Damage matchup matrix table */
.ms-matrix {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.15rem;
}

.ms-matrix-corner {
  width: 1px;
}

.ms-matrix-col-hdr,
.ms-matrix-row-hdr {
  padding: 3px 5px;
  font: 600 0.68rem Verdana, sans-serif;
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
}

.ms-matrix-col-hdr {
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.ms-matrix-row-hdr {
  text-align: right;
  border-right: 1px solid rgba(255,255,255,0.08);
}

.ms-matrix-col-hdr span,
.ms-matrix-row-hdr span {
  vertical-align: middle;
}

.ms-matrix-hdr-icon {
  width: 18px;
  height: 18px;
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,0.12);
  vertical-align: middle;
  margin-left: 3px;
}

.ms-matrix-cell {
  text-align: center;
  padding: 3px 6px;
  font: 700 0.72rem Verdana, sans-serif;
}

.ms-mx-strong { color: #44DD88; background: rgba(68,221,136,0.08); }
.ms-mx-weak   { color: #FF6666; background: rgba(255,68,68,0.06); }
.ms-mx-neutral { color: rgba(255,255,255,0.45); }


/* Hero inventory label */
.ms-hero-inv-label {
  font: 600 0.78rem Verdana, sans-serif;
  color: rgba(255,255,255,0.7);
  margin: 0.4rem 0 0.2rem;
}

/* Empty state */
.ms-empty {
  font: 400 0.85rem Verdana, sans-serif;
  color: #555;
  padding: 1rem;
  text-align: center;
}

/* Summary button in match-complete-banner */
.mcb-summary {
  padding: 6px 20px;
  font: 600 13px Verdana, sans-serif;
  color: #fff;
  background: #2a6e3e;
  border: 1px solid #44aa66;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s;
}

.mcb-summary:hover {
  background: #3a8e5e;
}

/* Persistent summary button in scrubber bar */
.ms-trigger-btn {
  padding: 3px 10px;
  font: 600 11px Verdana, sans-serif;
  color: #aaa;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  user-select: none;
}

.ms-trigger-btn:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}

/* Responsive */
@media (max-width: 700px) {
  .ms-players {
    grid-template-columns: 1fr;
  }

  .ms-panel {
    width: 98%;
    max-height: 95vh;
  }

  .ms-tabs {
    flex-wrap: wrap;
  }
}

/* ===== Upload + My Replays (browser-side parsing) ===== */

.site-upload-cta {
  margin: 24px 0;
  padding: 32px 24px;
  background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  text-align: center;
}

.site-upload-cta h3 {
  margin: 0 0 8px 0;
  font-size: 1.4rem;
  color: #f0f0f0;
}

.site-upload-cta p {
  margin: 0 0 16px 0;
  color: #aaa;
  font-size: 0.95rem;
}

.site-upload-btn {
  display: inline-block;
  padding: 10px 24px;
  background: #3a8c4a;
  color: #fff;
  border: 1px solid #5cb878;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.site-upload-btn:hover {
  background: #4ba85b;
}

.site-my-replays {
  margin: 24px 0;
}

.site-my-replays-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.site-my-replays-title {
  margin: 0;
  font-size: 1.4rem;
  color: #f0f0f0;
}

.site-my-replays-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.site-my-replays-status {
  margin-top: 12px;
  font-size: 0.9rem;
  color: #c4915b;
}

.my-replay-card {
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.my-replay-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.my-replay-card-race {
  display: inline-block;
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 4px;
  background: rgba(255,255,255,0.1);
}

.my-replay-card-race.race-H { background: #4a6da8; }
.my-replay-card-race.race-O { background: #a8543a; }
.my-replay-card-race.race-E { background: #5a9c4a; }
.my-replay-card-race.race-U { background: #6c4a8c; }

.my-replay-card-map {
  font-size: 0.95rem;
  color: #d8d8d8;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.my-replay-card-players {
  font-size: 0.9rem;
  color: #c0c0c0;
}

.my-replay-card-meta {
  font-size: 0.82rem;
  color: #888;
}

.my-replay-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.my-replay-open,
.my-replay-remove {
  flex: 1;
  padding: 6px 10px;
  font-size: 0.85rem;
  background: transparent;
  color: #c8c8c8;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px;
  cursor: pointer;
}

.my-replay-open:hover {
  background: #3a8c4a;
  border-color: #5cb878;
  color: #fff;
}

.my-replay-remove:hover {
  background: #6a2a2a;
  border-color: #a05050;
  color: #fff;
}

.my-replays-empty {
  padding: 16px;
  color: #888;
  font-style: italic;
  text-align: center;
}

/* ===== Compare page ===== */

.compare-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

.compare-header {
  margin-bottom: 24px;
}

.compare-title {
  font-size: 1.8rem;
  margin: 0 0 8px 0;
  color: #f0f0f0;
}

.compare-sub {
  margin: 0;
  color: #aaa;
  font-size: 1rem;
}

.compare-pickers {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  padding: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  margin-bottom: 24px;
}

.compare-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 220px;
}

.compare-picker-label {
  font-size: 0.85rem;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.compare-select {
  background: #1a1a1a;
  color: #e0e0e0;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.95rem;
  font-family: inherit;
}

.compare-slot-select {
  margin-top: 6px;
}

.compare-empty {
  padding: 32px;
  text-align: center;
  color: #aaa;
  border: 1px dashed rgba(255,255,255,0.2);
  border-radius: 8px;
}

.compare-empty a {
  color: #5cb878;
  text-decoration: none;
}

.compare-warnings {
  margin-bottom: 16px;
}

.compare-warning {
  padding: 10px 14px;
  margin-bottom: 6px;
  background: rgba(184, 130, 60, 0.15);
  border-left: 3px solid #c4915b;
  border-radius: 4px;
  color: #e8d8b8;
  font-size: 0.95rem;
}

.compare-result {
  margin-top: 24px;
}

.compare-overall {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  margin-bottom: 24px;
}

.compare-overall-grade-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 120px;
}

.compare-overall-grade {
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1;
}

.compare-overall-score {
  font-size: 1.1rem;
  color: #aaa;
  margin-top: 4px;
}

.grade-A { color: #5cb878; }
.grade-B { color: #8cc878; }
.grade-C { color: #c4b85b; }
.grade-D { color: #c4915b; }
.grade-F { color: #c46060; }
.grade-NA { color: #888; }

.compare-overall-meta {
  flex: 1;
}

.compare-overall-vs {
  font-size: 1.4rem;
  color: #f0f0f0;
  font-weight: 600;
  margin-bottom: 6px;
}

.compare-overall-context {
  color: #aaa;
  font-size: 0.95rem;
}

.compare-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.compare-tile {
  padding: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
}

.compare-tile-off {
  opacity: 0.6;
}

.compare-tile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.compare-tile-label {
  font-size: 1rem;
  color: #d8d8d8;
  font-weight: 600;
}

.compare-tile-grade {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.compare-tile-score {
  font-size: 0.95rem;
  color: #999;
  margin-bottom: 8px;
}

.compare-tile-reason {
  font-size: 0.9rem;
  color: #888;
  font-style: italic;
}

.compare-findings {
  list-style: none;
  padding: 0;
  margin: 8px 0 0 0;
}

.compare-finding {
  padding: 6px 10px;
  margin-bottom: 4px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  font-size: 0.85rem;
  color: #c0c0c0;
}

.compare-finding-warn {
  border-left: 3px solid #c4915b;
}
.compare-finding-good {
  border-left: 3px solid #5cb878;
}
.compare-finding-info {
  border-left: 3px solid #888;
}

.compare-methodology {
  margin-top: 24px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
}

.compare-methodology summary {
  cursor: pointer;
  color: #aaa;
  font-size: 0.95rem;
}

.compare-method-body {
  margin-top: 12px;
  color: #b0b0b0;
  font-size: 0.9rem;
}

.compare-method-body p {
  margin: 8px 0;
}

/* ===== Homepage v3: compact hero (single tight band) ===== */

/* ===== Single-row hero bar ===== */

.site-hero-bar {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.hero-bar-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
}

/* Big WC3V wordmark — the page's primary visual anchor on the homepage. */
.hero-bar-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.hero-bar-logo img {
  height: 40px;
  width: auto;
  display: block;
}

.hero-bar-tagline {
  font-size: 1rem;
  color: #d0d0d0;
  font-weight: 500;
  white-space: nowrap;
  /* Subtle vertical rule visually separates tagline from logo without
     using a left-border accent stripe (forbidden pattern). */
  position: relative;
  padding-left: 14px;
}
.hero-bar-tagline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15%;
  bottom: 15%;
  width: 1px;
  background: rgba(255,255,255,0.12);
}
.hero-bar-tagline em {
  font-style: normal;
  color: #8cc878;
  font-weight: 700;
}

/* Single-line upload label. */
.hero-bar-upload-label {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #b8e0a0;
  line-height: 1;
}
.hero-bar-upload-icon { color: #b8e0a0; flex-shrink: 0; }

/* ── Stamped "BROWSER-ONLY" privacy badge ────────────────────────────
   Sits to the left of the upload button. Two-tone treatment: a darker
   tactical-green inset that visually reads as a hardware status indicator
   rather than a generic UI pill. The shield icon has an always-on slow
   pulse so the badge feels "live" without the text needing to animate. */
.hero-bar-private {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 11px 0 9px;
  margin-left: auto;
  height: 36px;
  box-sizing: border-box;
  background:
    linear-gradient(180deg, rgba(60,140,80,0.18), rgba(40,90,55,0.22));
  border: 1px solid rgba(120,200,140,0.45);
  border-radius: 5px;
  box-shadow:
    inset 0 1px 0 rgba(180,224,160,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 0 0 1px rgba(0,0,0,0.25);
  flex-shrink: 0;
  user-select: none;
}

.hero-bar-private-shield {
  color: #8cf09a;
  filter: drop-shadow(0 0 4px rgba(140,240,154,0.55));
  animation: hero-private-pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes hero-private-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 3px rgba(140,240,154,0.4));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(140,240,154,0.85));
    transform: scale(1.08);
  }
}

.hero-bar-private-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  gap: 2px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.hero-bar-private-line1 {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #d8f5cc;
  text-shadow: 0 0 6px rgba(140,240,154,0.4);
}
.hero-bar-private-line2 {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: rgba(184,224,160,0.7);
  text-transform: uppercase;
}

/* The upload button no longer needs margin-left:auto — the privacy badge
   has it instead, pushing both right-aligned together. */
.hero-bar-upload { margin-left: 0; }

/* "Where are my replays?" help button — sits right next to the upload. */
.hero-bar-help {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  color: #c0c0c0;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.hero-bar-help:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}

/* Upload becomes a compact dashed pill on the right of the bar — still a
   real button + drag-drop target, just visually tight. Height matches
   .hero-bar-private exactly (36px box-sized). */
.hero-bar-upload {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  height: 36px;
  box-sizing: border-box;
  background: rgba(92,184,120,0.06);
  border: 1px dashed rgba(92,184,120,0.45);
  border-radius: 6px;
  color: #b8e0a0;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.hero-bar-upload:hover {
  background: rgba(92,184,120,0.12);
  border-color: #5cb878;
  color: #fff;
}
.hero-bar-upload svg { flex-shrink: 0; }
.hero-bar-upload-label { white-space: nowrap; }
.hero-bar-upload-sub {
  font-size: 0.75rem;
  font-weight: 500;
  color: #c4915b;
  margin-left: 4px;
}
.hero-bar-upload-sub:empty { display: none; }

/* Drag-over state (replaces the old .hero-tile-dragover). */
.hero-tile-dragover {
  background: rgba(92,184,120,0.2) !important;
  border-color: #5cb878 !important;
  border-style: solid !important;
}

@media (max-width: 900px) {
  /* Drop the tagline, keep logo + help + upload. */
  .hero-bar-tagline { display: none; }
}
@media (max-width: 1000px) {
  /* Drop the badge's secondary line first — keeps the BROWSER-ONLY label
     visible for as long as possible. */
  .hero-bar-private-line2 { display: none; }
  .hero-bar-private { padding: 0 10px 0 8px; }
}
@media (max-width: 760px) {
  /* Drop the text entirely; keep just the pulsing shield as a glanceable
     icon. The title attribute carries the full message on hover. */
  .hero-bar-private-text { display: none; }
  .hero-bar-private { padding: 0 8px; }
}
@media (max-width: 700px) {
  .hero-bar-inner {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 16px;
  }
  .hero-bar-help span { display: none; }       /* icon only */
  .hero-bar-help { padding: 5px 8px; }
}

/* My Replays header — extra layout when there are multiple actions */
.site-my-replays-header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-my-replays-link {
  color: #8cc878;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}

.site-my-replays-link:hover {
  text-decoration: underline;
}

/* My Replays card actions: 3-button layout (Open / Compare / Remove) */
.my-replay-compare {
  flex: 1;
  padding: 6px 10px;
  font-size: 0.85rem;
  background: transparent;
  color: #c8c8c8;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px;
  cursor: pointer;
}

.my-replay-compare:hover {
  background: #c4915b;
  border-color: #d8a874;
  color: #fff;
}

.my-replay-card .my-replay-remove {
  flex: 0 0 auto;
  width: 32px;
  padding: 6px;
  font-size: 1rem;
  line-height: 1;
}

/* ===== Full-page parsing overlay ===== */

.parse-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 12, 18, 0.88);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: parse-overlay-fade 0.18s ease;
}

@keyframes parse-overlay-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.parse-overlay-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 32px 36px;
  min-width: 360px;
  max-width: 480px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.parse-overlay-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(255,255,255,0.12);
  border-top-color: #5cb878;
  border-radius: 50%;
  animation: parse-overlay-spin 0.9s linear infinite;
}

@keyframes parse-overlay-spin {
  to { transform: rotate(360deg); }
}

.parse-overlay-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #f0f0f0;
  margin: 0;
}

.parse-overlay-sub {
  font-size: 0.9rem;
  color: #aaa;
  margin: 0;
  line-height: 1.4;
}

.parse-overlay-progress {
  font-size: 0.95rem;
  color: #8cc878;
  font-weight: 500;
  margin-top: 4px;
  min-height: 1.2em;
}

/* ===== Missing-replay friendly error card =====
   Shown over the .parse-overlay backdrop when ?local=ID points to a replay
   that isn't in this browser's IndexedDB. Larger and more prose-friendly
   than the spinner card. */

.missing-replay-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 32px 36px;
  width: 100%;
  max-width: 540px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.missing-replay-icon {
  color: #c4915b;
  display: flex;
  justify-content: center;
}

.missing-replay-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #f0f0f0;
  margin: 0;
}

.missing-replay-body {
  font-size: 0.95rem;
  color: #c0c0c0;
  line-height: 1.55;
  text-align: left;
}
.missing-replay-body p {
  margin: 0 0 10px 0;
}
.missing-replay-body p:last-child {
  margin-bottom: 0;
}
.missing-replay-body strong {
  color: #f0f0f0;
}
.missing-replay-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 1px 6px;
  border-radius: 4px;
  color: #e0e0e0;
}
.missing-replay-tip {
  color: #d8d8d8;
}

.missing-replay-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
}

.missing-replay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.04);
  color: #d8d8d8;
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.missing-replay-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.25);
  color: #fff;
}
.missing-replay-btn-primary {
  background: rgba(140, 200, 120, 0.15);
  border-color: rgba(140, 200, 120, 0.45);
  color: #a8d896;
}
.missing-replay-btn-primary:hover {
  background: rgba(140, 200, 120, 0.25);
  border-color: #8cc878;
  color: #c8e8b8;
}

/* ===== Parse overlay progress bar ===== */

.parse-overlay-bar {
  width: 100%;
  height: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}

.parse-overlay-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #5cb878, #8cc878);
  border-radius: 999px;
  transition: width 0.18s ease;
  box-shadow: 0 0 6px rgba(92, 184, 120, 0.4);
}

.parse-overlay-stats {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  font-size: 0.85rem;
  color: #aaa;
  margin-top: -6px;
}

.parse-overlay-phase {
  text-transform: lowercase;
  letter-spacing: 0.3px;
}

.parse-overlay-percent {
  font-weight: 600;
  color: #8cc878;
  font-variant-numeric: tabular-nums;
}

/* ===== Inline Compare panel (CompareInline) ===== */

.my-replay-card-expanded {
  grid-column: 1 / -1;
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
}

.my-replay-compare-panel {
  margin-top: 12px;
  padding: 16px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ci-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #aaa;
  font-size: 0.95rem;
}

.ci-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.15);
  border-top-color: #5cb878;
  border-radius: 50%;
  animation: parse-overlay-spin 0.8s linear infinite;
}

.ci-error { color: #c46060; font-size: 0.9rem; }

.ci-empty,
.ci-no-candidates {
  text-align: center;
  padding: 16px 8px;
  color: #c0c0c0;
}

.ci-no-candidates .ci-headline {
  font-size: 1.05rem;
  font-weight: 600;
  color: #f0f0f0;
  margin-bottom: 6px;
}

.ci-no-candidates .ci-detail {
  font-size: 0.9rem;
  color: #aaa;
  margin-bottom: 12px;
}

.ci-header {
  display: flex;
  justify-content: space-between;
  align-items: stretch;       /* both columns stretch to top */
  gap: 16px;
  flex-wrap: wrap;
}

/* Pro card: banner header (eyebrow strip) + bordered body. Replaces the
   loose ".ci-vs / .ci-pro-label / .ci-pro-name" stack. */
.ci-pro-card {
  flex: 1 1 280px;
  min-width: 260px;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 6px;
  overflow: hidden;
  align-self: flex-start;     /* don't stretch tall, sit at top */
}
.ci-pro-banner {
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  border-bottom: 1px solid rgba(0,0,0,0.35);
}
.ci-pro-banner-auto {
  background: linear-gradient(90deg, rgba(140,200,120,0.30), rgba(140,200,120,0.10));
  color: #c8e8b8;
}
.ci-pro-banner-self {
  background: linear-gradient(90deg, rgba(212,168,72,0.32), rgba(212,168,72,0.10));
  color: #f0d68c;
}
.ci-pro-banner-manual {
  background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  color: #c8c8c8;
}
.ci-pro-banner-lowconf {
  background: linear-gradient(90deg, rgba(204,140,72,0.32), rgba(204,140,72,0.10));
  color: #f0c890;
}
.ci-pro-banner-graded {
  background: linear-gradient(90deg, rgba(108,163,196,0.30), rgba(108,163,196,0.10));
  color: #b8d8ec;
}
.ci-pro-banner-divergent {
  background: linear-gradient(90deg, rgba(196,90,72,0.32), rgba(196,90,72,0.10));
  color: #f0a890;
}
.ci-pro-banner-text { display: inline-block; }

/* Header notices: contextual warnings that sit above the pro card / grade
   pair. Used for "low-confidence match" and "uploaded pro replay" cases. */
.ci-notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  margin-bottom: 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  font-size: 0.88rem;
  line-height: 1.4;
  color: #d0d0d0;
}
.ci-notice-icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  background: rgba(255,255,255,0.08);
  color: #d0d0d0;
}
.ci-notice-body { flex: 1; }
.ci-notice-body strong { color: #f0f0f0; }
.ci-notice-lowconf {
  background: rgba(204,140,72,0.10);
  border-color: rgba(204,140,72,0.35);
  color: #e8d4b8;
}
.ci-notice-lowconf .ci-notice-icon {
  background: rgba(204,140,72,0.30);
  color: #f0c890;
}
.ci-notice-pro-upload {
  background: rgba(212,168,72,0.10);
  border-color: rgba(212,168,72,0.35);
  color: #e8dcb8;
}
.ci-notice-pro-upload .ci-notice-icon {
  background: rgba(212,168,72,0.30);
  color: #f0d68c;
}
.ci-notice-graded {
  background: rgba(108,163,196,0.10);
  border-color: rgba(108,163,196,0.35);
  color: #d0e2ee;
}
.ci-notice-graded .ci-notice-icon {
  background: rgba(108,163,196,0.30);
  color: #b8d8ec;
}
.ci-notice-divergent {
  background: rgba(196,90,72,0.12);
  border-color: rgba(196,90,72,0.40);
  color: #f0d0c8;
}
.ci-notice-divergent .ci-notice-icon {
  background: rgba(196,90,72,0.32);
  color: #f0a890;
}
.ci-pro-card-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.ci-pro-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: #f0f0f0;
  letter-spacing: -0.01em;
}
.ci-pro-meta { font-size: 0.85rem; color: #aaa; }

.ci-grade-card {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 96px;
  align-self: flex-start;
}

.ci-grade-letter {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
}

.ci-grade-score { font-size: 0.85rem; color: #aaa; margin-top: 2px; }

/* 15-tier grade colors. Greens for As, yellow-greens for Bs, yellows for
   Cs, oranges for Ds, reds for Fs. */
.grade-Aplus  { color: #4eed8a; }
.grade-A      { color: #5cb878; }
.grade-Aminus { color: #6cc080; }
.grade-Bplus  { color: #88c870; }
.grade-B      { color: #8cc878; }
.grade-Bminus { color: #a8c860; }
.grade-Cplus  { color: #c4c45e; }
.grade-C      { color: #c4b85b; }
.grade-Cminus { color: #d0a85a; }
.grade-Dplus  { color: #d09858; }
.grade-D      { color: #c4915b; }
.grade-Dminus { color: #c47a5a; }
.grade-Fplus  { color: #c66a5a; }
.grade-F      { color: #c46060; }
.grade-Fminus { color: #b04848; }
.grade-NA     { color: #888; }

.ci-checklist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(0,0,0,0.15);
  padding: 10px 12px;
  border-radius: 6px;
}

.ci-check {
  display: grid;
  grid-template-columns: 18px 160px 1fr;
  gap: 10px;
  align-items: center;
  font-size: 0.9rem;
}

.ci-check-icon { font-weight: 700; text-align: center; line-height: 1; }
.ci-check-match    .ci-check-icon { color: #5cb878; }
.ci-check-partial  .ci-check-icon { color: #c4915b; }
.ci-check-mismatch .ci-check-icon { color: #c46060; }
.ci-check-unknown  .ci-check-icon { color: #888; }

.ci-check-label  { color: #d0d0d0; }
.ci-check-detail { color: #999; font-size: 0.85rem; }

.ci-check-mismatch .ci-check-label,
.ci-check-partial  .ci-check-label { color: #f0f0f0; }

@media (max-width: 600px) {
  .ci-check { grid-template-columns: 18px 1fr; }
  .ci-check-detail { grid-column: 2; padding-left: 0; }
}

.ci-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.ci-tile {
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
}

.ci-tile-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.ci-tile-label { font-size: 0.95rem; color: #d8d8d8; font-weight: 600; }

.ci-tile-grade { font-size: 1.4rem; font-weight: 700; line-height: 1; }

.ci-tile-score  { font-size: 0.8rem; color: #999; margin-bottom: 6px; }

/* Ungraded group: one banner per shared reason, plus a compact chip row
   listing the affected categories. Replaces the old behavior of rendering
   9 identical "Not graded — <reason>" tiles. */
.ci-ungraded-group {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
}
.ci-ungraded-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 10px;
  margin-bottom: 8px;
}
.ci-ungraded-badge {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #b0b0b0;
  background: rgba(255,255,255,0.06);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.ci-ungraded-reason {
  font-size: 0.85rem;
  color: #aaa;
  flex: 1;
  min-width: 200px;
}
.ci-ungraded-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ci-ungraded-chip {
  font-size: 0.8rem;
  color: #c0c0c0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 3px 8px;
  border-radius: 4px;
  cursor: help;
}

.ci-findings { list-style: none; padding: 0; margin: 6px 0 0 0; }

/* Findings: severity is conveyed by a small leading colored dot + a subtle
   matching background tint. No left-stripe accent. */
.ci-finding {
  position: relative;
  padding: 5px 8px 5px 20px;
  margin-bottom: 3px;
  background: rgba(255,255,255,0.03);
  border-radius: 4px;
  font-size: 0.82rem;
  color: #c0c0c0;
}
.ci-finding::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #888;
}
.ci-finding-warn { background: rgba(196,145,91,0.08); }
.ci-finding-warn::before { background: #c4915b; }
.ci-finding-good { background: rgba(92,184,120,0.08); }
.ci-finding-good::before { background: #5cb878; }
.ci-finding-info { background: rgba(255,255,255,0.04); }
.ci-finding-info::before { background: #888; }

.ci-switcher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.ci-switcher-label { font-size: 0.85rem; color: #aaa; margin-right: 4px; }

.ci-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }

.ci-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  font-size: 0.82rem;
  font-family: inherit;
  color: #d0d0d0;
  cursor: pointer;
}

.ci-chip:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.3);
}

.ci-chip-active {
  background: rgba(92, 184, 120, 0.18);
  border-color: #5cb878;
  color: #f0f0f0;
}

.ci-chip-race {
  width: 18px;
  height: 18px;
  text-align: center;
  line-height: 18px;
  font-weight: 700;
  font-size: 0.72rem;
  border-radius: 4px;
}

.ci-chip-race.race-H { background: #4a6da8; color: #fff; }
.ci-chip-race.race-O { background: #a8543a; color: #fff; }
.ci-chip-race.race-E { background: #5a9c4a; color: #fff; }
.ci-chip-race.race-U { background: #6c4a8c; color: #fff; }

.ci-chip-mu { font-size: 0.72rem; color: #999; font-weight: 500; }

/* Graded indicator: a small green check on chips whose pro replay's game
   length overlaps enough with the user's to produce a real grade. Pros
   without it will come back with all categories ungraded. */
.ci-chip-graded {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(140,200,120,0.30);
  color: #c8e8b8;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}
/* Build-divergent chip indicator: signature unit ≠ user's. Sits next to
   the graded ✓ when the pro grades but built a different army. */
.ci-chip-divergent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(196,90,72,0.30);
  color: #f0a890;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  margin-left: 2px;
}
.ci-chip-build-mismatch { opacity: 0.85; }
.ci-chip-no-grade { opacity: 0.65; }
.ci-chip-no-grade:hover { opacity: 0.9; }

.ci-advanced-btn {
  padding: 5px 12px;
  background: transparent;
  color: #8cc878;
  border: 1px solid rgba(140, 200, 120, 0.3);
  border-radius: 999px;
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
}

.ci-advanced-btn:hover {
  background: rgba(140, 200, 120, 0.1);
  border-color: #8cc878;
}

/* ===== Compare modal — broadcast layout additions ===== */

/* Slot-card row: pick which player in the user's replay is "you". Active
   card is the visible source of truth for the user identity at the top of
   the compare modal — it's part of the layout, not a banner. */
.ci-slot-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.ci-slot-row-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 2px;
}
.ci-slot-row-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: #d8d8d8;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ci-slot-row-hint { font-size: 0.82rem; color: #888; }

.ci-slot-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.ci-slot-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(140,200,120,0.55);
  transform: translateY(-1px);
}
.ci-slot-card-active {
  border-color: #5cb878;
  background: rgba(92,184,120,0.10);
  box-shadow: 0 0 0 2px rgba(92,184,120,0.30);
  cursor: default;
}
.ci-slot-card-active:hover { transform: none; }

.ci-slot-portrait-wrap {
  position: relative;
  width: 44px; height: 44px;
}
.ci-slot-portrait {
  width: 44px; height: 44px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.3);
  object-fit: cover;
  display: block;
}
.ci-slot-race-badge {
  position: absolute;
  bottom: -4px; left: -4px;
  min-width: 24px;
  padding: 0 4px;
  height: 18px;
  text-align: center;
  line-height: 16px;
  font-size: 0.66rem;
  font-weight: 800;
  border-radius: 3px;
  letter-spacing: 0.04em;
  border: 1px solid rgba(0,0,0,0.45);
}
.ci-slot-race-badge.race-H { background: #4a6da8; color: #fff; }
.ci-slot-race-badge.race-O { background: #a8543a; color: #fff; }
.ci-slot-race-badge.race-E { background: #5a9c4a; color: #fff; }
.ci-slot-race-badge.race-U { background: #6c4a8c; color: #fff; }
.ci-slot-race-badge.race-R { background: #555; color: #ddd; }

.ci-slot-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ci-slot-name {
  font-size: 0.98rem;
  font-weight: 800;
  color: #f0f0f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ci-slot-meta {
  font-size: 0.82rem;
  color: #aaa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ci-slot-pill {
  margin-top: 4px;
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  align-self: flex-start;
}
.ci-slot-pill-active { background: rgba(92,184,120,0.20); color: #b3df9c; }
.ci-slot-pill-pick   { background: rgba(255,255,255,0.06); color: #c8c8c8; }

.ci-fresh-headline {
  font-size: 1.05rem;
  font-weight: 700;
  color: #f0f0f0;
  background: linear-gradient(90deg, rgba(140,200,120,0.18), rgba(140,200,120,0.04));
  border: 1px solid rgba(92,184,120,0.45);
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: 6px;
}
.ci-fresh-headline::before {
  content: '\2713';            /* leading check glyph */
  display: inline-block;
  margin-right: 6px;
  color: #5cb878;
  font-weight: 900;
}

.ci-pro-label-self {
  background: rgba(92, 184, 120, 0.22);
  color: #b9e3c2;
  padding: 2px 8px;
  border-radius: 3px;
}

.ci-watch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 4px 0;
}

.ci-watch-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 180px;
  padding: 14px 22px;
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 6px;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 0 rgba(0,0,0,0.25);
  border: 1px solid transparent;
  transition: filter 0.12s ease;
}
.ci-watch-cta:hover { filter: brightness(1.10); text-decoration: none; }

/* "Watch my replay" — primary green. */
.ci-watch-mine {
  background: linear-gradient(180deg, #5cb878 0%, #449861 100%);
  color: #0d1410;
}

/* "Watch pro replay" — secondary amber/gold so users see they're distinct
   actions, but it's still clearly a real button (not a tiny link). */
.ci-watch-pro {
  background: linear-gradient(180deg, #d4a848 0%, #b18d2c 100%);
  color: #1a1206;
}

/* "No overall grade" panel replaces the "N/A 0/100" card when nothing
   could be scored. */
.ci-no-grade {
  flex: 1 1 280px;
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: 6px;
  padding: 12px 16px;
  min-width: 260px;
  max-width: 480px;
  align-self: flex-start;
}
.ci-no-grade-head {
  font-size: 0.95rem;
  font-weight: 800;
  color: #d8d8d8;
  margin-bottom: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ci-no-grade-body {
  font-size: 0.88rem;
  line-height: 1.45;
  color: #b8b8b8;
}
.ci-no-grade-list {
  margin: 8px 0 0 0;
  padding-left: 18px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #d0d0d0;
}
.ci-no-grade-list li {
  margin-bottom: 2px;
  list-style: '\2022\00a0';   /* bullet + nbsp */
  list-style-position: outside;
}
.ci-no-grade-foot {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 0.82rem;
  color: #999;
  font-style: italic;
}

.ci-tile-info {
  display: inline-block;
  width: 16px; height: 16px;
  margin-left: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: #aaa;
  font-size: 0.72rem;
  text-align: center;
  line-height: 16px;
  cursor: help;
  font-weight: 600;
}
.ci-tile-info:hover { background: rgba(255,255,255,0.15); color: #f0f0f0; }

.ci-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.ci-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #e0e0e0;
  margin: 0 0 10px 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ci-vs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ci-side-label {
  font-size: 0.82rem;
  color: #aaa;
  font-weight: 600;
  margin-bottom: 8px;
}

/* Hero card */
.ci-hero-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 12px;
}
.ci-hero-empty .ci-hero-none { color: #888; font-style: italic; font-size: 0.9rem; }
.ci-hero-body { display: flex; align-items: center; gap: 12px; }
.ci-hero-portrait {
  width: 56px; height: 56px;
  border-radius: 6px;
  border: 2px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.3);
  flex-shrink: 0;
  object-fit: cover;
}
.ci-hero-meta { display: flex; flex-direction: column; gap: 2px; }
.ci-hero-name { font-size: 1rem; font-weight: 700; color: #f0f0f0; }
.ci-hero-time { font-size: 0.85rem; color: #999; }

/* Build order side-by-side */
.ci-bo-track {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 10px;
}
.ci-bo-rows { display: flex; flex-direction: column; gap: 4px; }
.ci-bo-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.03);
}
/* Match: tinted background + a small green dot before the icon column.
   Miss: just a soft red-tinted background. No left-stripe in either case. */
.ci-bo-row-match {
  position: relative;
  background: rgba(92,184,120,0.14);
}
.ci-bo-row-match::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(92,184,120,0.85);
}
.ci-bo-row-miss { background: rgba(196,96,96,0.07); }
.ci-bo-icon {
  width: 36px; height: 36px;
  border-radius: 4px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.10);
  object-fit: cover;
}
.ci-bo-name {
  font-size: 0.88rem;
  color: #e0e0e0;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ci-bo-time {
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  color: #999;
}
.ci-bo-badge {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: rgba(255,255,255,0.08);
  color: #c8c8c8;
}
.ci-bo-badge-expo { background: rgba(212,168,72,0.22); color: #f0d68c; }
.ci-bo-badge-hero { background: rgba(108,74,140,0.30); color: #d3bce6; }
.ci-bo-empty { color: #888; font-style: italic; font-size: 0.9rem; }
.ci-bo-legend {
  margin-top: 8px;
  font-size: 0.8rem;
  color: #999;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.ci-bo-legend-pip {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 4px;
}
.ci-bo-legend-match { background: rgba(92,184,120,0.6); }
.ci-bo-legend-miss  { background: rgba(196,96,96,0.4); }

/* Economy chart */
.ci-econ-chart {
  width: 100%;
  height: auto;
  display: block;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
}
.ci-econ-grid { stroke: rgba(255,255,255,0.06); stroke-width: 1; }
.ci-econ-axis { fill: #888; font-size: 10px; font-family: inherit; }
.ci-econ-line { fill: none; stroke-width: 1.8; stroke-linejoin: round; }
.ci-econ-you   { stroke: #5cb878; }
.ci-econ-pro   { stroke: #c4915b; }
.ci-econ-you-w { stroke: #5cb878; opacity: 0.55; stroke-dasharray: 3 3; }
.ci-econ-pro-w { stroke: #c4915b; opacity: 0.55; stroke-dasharray: 3 3; }
.ci-econ-legend {
  margin-top: 6px;
  font-size: 0.8rem;
  color: #aaa;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ci-econ-pip {
  display: inline-block;
  width: 14px; height: 3px;
  vertical-align: middle;
  margin-right: 4px;
  border-radius: 2px;
}
.ci-econ-pip-you   { background: #5cb878; }
.ci-econ-pip-pro   { background: #c4915b; }
.ci-econ-pip-you-w { background: #5cb878; opacity: 0.55; }
.ci-econ-pip-pro-w { background: #c4915b; opacity: 0.55; }

/* Stack the side-by-side panels on narrow screens. */
@media (max-width: 720px) {
  .ci-vs-grid { grid-template-columns: 1fr; }
}

/* ===== Tabs ============================================================== */
/* `.compare-drawer-body` is a flex column. Its children can shrink (default
   flex-shrink: 1), which causes content-tall children to be allocated less
   vertical space than their content needs — the children's content then
   visually overflows past sibling boundaries. flex-shrink: 0 on every direct
   child of the rootEl prevents that. */
.ci-tabs {
  display: flex; gap: 0; flex-wrap: wrap;
  border-bottom: 1px solid #2c3138;
  margin: 0.75rem 0 0;
  flex-shrink: 0;
}
.ci-tab {
  background: transparent; border: 0; color: #aaa;
  padding: 0.5rem 1rem; cursor: pointer; font-size: 0.95rem;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 120ms, border-color 120ms;
}
.ci-tab:hover { color: #ddd; }
.ci-tab-active {
  color: #fff; border-bottom-color: #5fa5cb; font-weight: 600;
}
.ci-tab-content { padding: 0.75rem 0; flex-shrink: 0; }

/* All top-level CompareInline sections must keep their natural height inside
   the flex column. Without this, tall tile grids overflow into the switcher. */
.ci-slot-row,
.ci-fresh-headline,
.ci-header,
.ci-watch-row,
.ci-checklist,
.ci-tiles,
.ci-section,
.ci-switcher,
.ci-no-grade { flex-shrink: 0; }

/* ===== Drill button on Overview tiles ==================================== */
.ci-tile-drill {
  margin-top: 0.5rem; background: transparent; border: 1px solid #3a4148;
  color: #b8c8d4; padding: 0.25rem 0.6rem; border-radius: 4px;
  font-size: 0.85rem; cursor: pointer; transition: all 120ms;
}
.ci-tile-drill:hover { background: #2a3038; color: #fff; border-color: #5fa5cb; }

/* ===== Top fixes — coaching cards ======================================== */
.ci-section-fixes { margin-top: 1rem; }
.ci-fix2-list {
  display: flex; flex-direction: column; gap: 10px;
}
.ci-fix2-card {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: #161a1f;
  border: 1px solid #232830;
  border-radius: 8px;
}
/* Severity-tinted background — no single-edge stripes per project rule */
.ci-fix2-warn { background: linear-gradient(180deg, rgba(212,162,58,0.08), rgba(212,162,58,0.02)); }
.ci-fix2-info { background: #161a1f; }
.ci-fix2-good { background: linear-gradient(180deg, rgba(92,184,120,0.08), rgba(92,184,120,0.02)); }

.ci-fix2-badge {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem;
  color: #0a0d10;
}
.ci-fix2-warn .ci-fix2-badge { background: #d4a23a; }
.ci-fix2-info .ci-fix2-badge { background: #5fa5cb; }
.ci-fix2-good .ci-fix2-badge { background: #5cb878; }

.ci-fix2-body {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.ci-fix2-cat {
  font-size: 0.72rem; font-weight: 700;
  color: #8aa3b3; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ci-fix2-headline {
  font-size: 1rem; font-weight: 700; color: #f0f4f8; line-height: 1.25;
}
.ci-fix2-detail {
  font-size: 0.85rem; color: #b8c2cc; line-height: 1.4;
}
.ci-fix2-aside {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  min-width: 0;
}
.ci-fix2-metric {
  display: inline-block;
  padding: 3px 9px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  font-size: 0.78rem;
  font-family: monospace;
  color: #e0e6ec;
  white-space: nowrap;
}
.ci-fix2-spark { width: 88px; height: 28px; }
.ci-spark { display: block; width: 100%; height: 100%; overflow: visible; }
.ci-spark-pro { fill: none; stroke: #c4915b; stroke-width: 1.5; opacity: 0.55; }
.ci-spark-you { fill: none; stroke: #5fa5cb; stroke-width: 2; }

/* Stack metric/spark below headline on narrow screens */
@media (max-width: 600px) {
  .ci-fix2-card { grid-template-columns: 32px 1fr; }
  .ci-fix2-aside { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; }
}

/* ===== Build tab — divergence highlight + tier composition =============== */
.ci-divergence-banner {
  background: linear-gradient(180deg, #2d2418, #221b13);
  border: 1px solid #5a4520; color: #e8d8a8;
  padding: 0.6rem 0.9rem; border-radius: 6px;
  font-size: 0.95rem; line-height: 1.5; margin-bottom: 0.75rem;
}
.ci-bo-row { display: grid; grid-template-columns: 24px 36px 1fr auto; gap: 0.5rem; align-items: center; padding: 0.3rem 0.5rem; border-radius: 4px; }
.ci-bo-index { font-size: 0.8rem; color: #888; text-align: center; }
.ci-bo-row-divergence { outline: 2px solid #d4a23a; outline-offset: -2px; }
.ci-bo-legend-pip.ci-bo-legend-div { background: #d4a23a; }

.ci-tier-block { margin-top: 1rem; }
.ci-tier-block-title { font-size: 0.95rem; color: #b8c8d4; margin: 0 0 0.5rem; font-weight: 600; }
.ci-comp-side { padding: 0.5rem; background: #181c20; border: 1px solid #232830; border-radius: 6px; }
.ci-comp-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.ci-comp-icon {
  width: 36px; height: 36px; border: 1px solid #2c3138; border-radius: 4px;
  overflow: hidden; background: #0a0d10;
}
.ci-comp-icon img { width: 100%; height: 100%; object-fit: cover; }
.ci-comp-empty { font-size: 0.8rem; color: #666; font-style: italic; }

/* ===== Tech tab — tier progression bars + timings table ================== */
.ci-tier-bars { display: flex; flex-direction: column; gap: 0.6rem; }
.ci-tier-row {
  display: grid; grid-template-columns: 200px 1fr 160px; gap: 0.6rem; align-items: center;
}
.ci-tier-row-label { font-size: 0.9rem; color: #d8d8d8; }
.ci-tier-bar { height: 22px; display: flex; border-radius: 4px; overflow: hidden; background: #0a0d10; }
.ci-tier-seg-t1 { background: #4a5560; }
.ci-tier-seg-t2 { background: #21a5e3; }
.ci-tier-seg-t3 { background: #ffd44d; }
.ci-tier-row-times {
  font-size: 0.8rem; color: #aaa; display: flex; gap: 0.6rem; justify-content: flex-end;
}
.ci-tier-legend {
  font-size: 0.8rem; color: #888; display: flex; gap: 0.7rem; align-items: center;
  margin-top: 0.4rem; margin-left: 200px;
}
.ci-tier-legend-pip {
  display: inline-block; width: 12px; height: 12px; border-radius: 2px;
  margin-right: 0.3rem; vertical-align: middle;
}
.ci-tier-legend-t1 { background: #4a5560; }
.ci-tier-legend-t2 { background: #21a5e3; }
.ci-tier-legend-t3 { background: #ffd44d; }

.ci-timings-table, .ci-final-table {
  width: 100%; border-collapse: collapse; font-size: 0.95rem;
}
.ci-timings-table th, .ci-timings-table td,
.ci-final-table th, .ci-final-table td {
  padding: 0.4rem 0.7rem; text-align: left; border-bottom: 1px solid #232830;
}
.ci-timings-table th, .ci-final-table th { color: #b8c8d4; font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
.ci-delta-good  { color: #5cb878; }
.ci-delta-late  { color: #d04848; }
.ci-delta-early { color: #21a5e3; }

/* ===== Charts (shared by Economy + others) =============================== */
.ci-chart {
  width: 100%; height: auto; max-height: 220px;
  background: #0e1216; border: 1px solid #1d2228; border-radius: 6px;
  padding: 0.3rem;
}
.ci-chart-grid { stroke: #1d2228; stroke-width: 1; }
.ci-chart-axis { fill: #888; font-size: 10px; }
.ci-chart-title { fill: #b8c8d4; font-size: 11px; font-weight: 600; }
.ci-chart-line { fill: none; stroke-width: 2; }
.ci-chart-you { stroke: #5fa5cb; }
.ci-chart-pro { stroke: #c4915b; }
.ci-chart-legend { font-size: 0.85rem; color: #b8c8d4; margin-top: 0.4rem; display: flex; gap: 0.8rem; }
.ci-chart-pip { display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-right: 0.3rem; vertical-align: middle; }
.ci-chart-pip-you { background: #5fa5cb; }
.ci-chart-pip-pro { background: #c4915b; }

.ci-empty-mini { font-size: 0.85rem; color: #888; font-style: italic; padding: 0.5rem 0; }

/* ===== Heroes tab ======================================================== */
.ci-hero-section {
  margin-top: 1rem; padding: 0.9rem;
  background: #161a1f; border: 1px solid #232830; border-radius: 8px;
}
.ci-hero-section-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.7rem; }
.ci-hero-section-portrait {
  width: 48px; height: 48px; border-radius: 50%; border: 2px solid #5fa5cb;
  background: #0a0d10; object-fit: cover;
}
.ci-hero-section-name { font-size: 1.1rem; font-weight: 600; color: #fff; }
.ci-hero-section-levels { font-size: 0.85rem; color: #888; }

.ci-hero-block { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid #232830; }
.ci-hero-block:first-child { border-top: 0; padding-top: 0; }
.ci-hero-block-title { font-size: 0.85rem; color: #5fa5cb; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 0.5rem; font-weight: 600; }

/* Skill build grid — row 1: blank + L1..Ln headers
                      row 2: "You" label + N skill cells
                      row 3: blank + N connector pills (✓ / ✗)
                      row 4: "Pro" label + N skill cells */
.ci-skill2-grid {
  display: grid;
  grid-template-columns: 50px repeat(var(--ci-skill2-cols, 5), minmax(78px, 1fr));
  gap: 6px 6px;
  align-items: stretch;
}
.ci-skill2-side-label {
  font-size: 0.85rem; color: #b8c8d4; font-weight: 600;
  display: flex; align-items: center; justify-content: flex-start;
}
.ci-skill2-head-col {
  font-size: 0.75rem; color: #5fa5cb; text-transform: uppercase; letter-spacing: 0.05em;
  text-align: center; padding-bottom: 2px; font-weight: 600;
}
.ci-skill2-cell {
  background: #0e1216;
  border: 1px solid #232830;
  border-radius: 6px;
  padding: 6px 6px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 100px;
  transition: background 120ms;
}
.ci-skill2-empty { opacity: 0.35; }
.ci-skill2-match { background: rgba(92, 184, 120, 0.06); border-color: rgba(92, 184, 120, 0.4); }
.ci-skill2-miss  { background: rgba(208, 72, 72, 0.06);  border-color: rgba(208, 72, 72, 0.4);  }
.ci-skill2-icon-slot {
  position: relative;
  width: 48px; height: 48px;
  border-radius: 6px;
  background: #050708;
  border: 1px solid #1d2228;
  overflow: hidden;
}
.ci-skill2-icon { width: 100%; height: 100%; object-fit: cover; display: block; }
.ci-skill2-rank {
  position: absolute; left: 2px; bottom: 2px; right: 2px;
  display: flex; gap: 2px; justify-content: center;
}
.ci-skill2-pip {
  width: 8px; height: 4px; border-radius: 1px;
  background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.18);
}
.ci-skill2-pip-on { background: #ffd44d; border-color: #b88a1a; }
.ci-skill2-name {
  font-size: 0.78rem; color: #e0e6ec; line-height: 1.2; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ci-skill2-foot {
  display: flex; gap: 6px; font-size: 0.7rem; color: #888;
  margin-top: auto;
}
.ci-skill2-hl   { color: #5fa5cb; font-weight: 600; }
.ci-skill2-time { font-family: monospace; }
.ci-skill2-conn {
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem; font-weight: 700; line-height: 1;
  border-radius: 4px; min-height: 22px;
}
.ci-skill2-conn-match { color: #5cb878; background: rgba(92, 184, 120, 0.10); }
.ci-skill2-conn-miss  { color: #d04848; background: rgba(208, 72, 72, 0.10); }
.ci-skill2-conn-na    { color: #444; }

.ci-level-bar {
  position: relative; height: 24px; background: #0e1216;
  border: 1px solid #232830; border-radius: 4px; margin: 0.2rem 0;
}
.ci-level-tick {
  position: absolute; top: 2px; bottom: 2px; width: 2px; background: #5fa5cb;
}
.ci-level-tick-label {
  position: absolute; top: -2px; left: 4px; font-size: 0.7rem; color: #5fa5cb;
  white-space: nowrap;
}

.ci-hero-items { display: flex; gap: 4px; flex-wrap: wrap; padding: 0.2rem 0; }
.ci-hero-item {
  width: 36px; height: 36px; border: 1px solid #2c3138; border-radius: 4px;
  background: #0a0d10; object-fit: cover;
}

.ci-camp-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.25rem;
}
.ci-camp-item {
  display: grid; grid-template-columns: 24px 50px 1fr; gap: 0.5rem;
  align-items: center; padding: 0.25rem 0.4rem;
  background: #0e1216; border: 1px solid #232830; border-radius: 4px;
  font-size: 0.85rem;
}
.ci-camp-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; background: #2c3138; color: #b8c8d4;
  font-size: 0.75rem; font-weight: 600;
}
.ci-camp-time { color: #888; font-family: monospace; }
.ci-camp-xp { color: #5cb878; text-align: right; }

/* ===== Upgrades tab — horizontal Gantt-style ============================ */
.ci-upg2-totals { display: flex; flex-wrap: wrap; gap: 8px; }
.ci-upg2-total {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 4px; font-size: 0.85rem;
  background: #161a1f; border: 1px solid #232830;
}
.ci-upg2-dot { width: 10px; height: 10px; border-radius: 50%; }
.ci-upg2-total-attack  .ci-upg2-dot { background: #d04848; }
.ci-upg2-total-defense .ci-upg2-dot { background: #4eb6e0; }
.ci-upg2-total-ability .ci-upg2-dot { background: #9b59b6; }

.ci-upg2-block {
  margin-top: 14px;
  background: #0e1216; border: 1px solid #232830; border-radius: 8px;
  padding: 12px;
}
.ci-upg2-block-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.ci-upg2-cat-label {
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 3px;
}
.ci-upg2-attack  .ci-upg2-cat-label { color: #f28a8a; background: rgba(208,72,72,0.12); }
.ci-upg2-defense .ci-upg2-cat-label { color: #8ed0f0; background: rgba(78,182,224,0.12); }
.ci-upg2-ability .ci-upg2-cat-label { color: #c897e0; background: rgba(155,89,182,0.12); }

.ci-upg2-track-wrap {
  display: grid;
  grid-template-columns: 44px 1fr;
  row-gap: 6px;
  column-gap: 8px;
  align-items: start;
}
.ci-upg2-side-label {
  font-size: 0.78rem; font-weight: 600; color: #888;
  text-align: right; padding-right: 4px;
  padding-top: 6px;
}
.ci-upg2-track {
  position: relative;
  background: rgba(255,255,255,0.02);
  border-radius: 4px;
  min-height: 36px;
}
.ci-upg2-track-empty {
  display: flex; align-items: center; justify-content: center;
  color: #555; font-style: italic; font-size: 0.8rem; min-height: 36px;
}
.ci-upg2-track-line {
  position: absolute; left: 0; right: 0; top: 18px;
  height: 1px; background: #232830;
}
.ci-upg2-attack  .ci-upg2-track-line { background: rgba(208,72,72,0.3); }
.ci-upg2-defense .ci-upg2-track-line { background: rgba(78,182,224,0.3); }
.ci-upg2-ability .ci-upg2-track-line { background: rgba(155,89,182,0.3); }

.ci-upg2-event {
  position: absolute;
  transform: translateX(-50%);
  top: 0;
  display: flex; flex-direction: column; align-items: center;
}
.ci-upg2-event-pin {
  width: 9px; height: 9px; border-radius: 50%;
  margin-top: 14px; margin-bottom: 2px;
  border: 2px solid #0e1216;
}
.ci-upg2-attack  .ci-upg2-event-pin { background: #d04848; }
.ci-upg2-defense .ci-upg2-event-pin { background: #4eb6e0; }
.ci-upg2-ability .ci-upg2-event-pin { background: #9b59b6; }
.ci-upg2-event-card {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px 3px 4px;
  background: #161a1f;
  border: 1px solid #232830;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 0.78rem; color: #d8d8d8;
}
.ci-upg2-attack  .ci-upg2-event-card { border-color: rgba(208,72,72,0.4); }
.ci-upg2-defense .ci-upg2-event-card { border-color: rgba(78,182,224,0.4); }
.ci-upg2-ability .ci-upg2-event-card { border-color: rgba(155,89,182,0.4); }
.ci-upg2-event-icon {
  width: 22px; height: 22px; border-radius: 3px;
  background: #050708; object-fit: cover;
}
.ci-upg2-event-name { color: #e0e6ec; }
.ci-upg2-lvl {
  display: inline-block; padding: 0 4px; border-radius: 2px;
  background: rgba(95,165,203,0.2); color: #8ed0f0;
  font-weight: 700; font-size: 0.72rem; margin-left: 2px;
}
.ci-upg2-event-time { color: #777; font-family: monospace; font-size: 0.72rem; }

.ci-upg2-axis-spacer { /* empty cell to align with axis row */ }
.ci-upg2-axis {
  position: relative; height: 16px;
  margin-top: 4px;
}
.ci-upg2-axis-tick {
  position: absolute;
  transform: translateX(-50%);
  font-size: 0.7rem; font-family: monospace; color: #666;
}

/* ===== Creeps tab — map view + ordered camp routes ====================== */
.ci-creeps-summary { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.9rem; }
.ci-creeps-stat {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px; border-radius: 4px;
  background: #161a1f; border: 1px solid #232830;
}
.ci-creeps-pip {
  width: 12px; height: 12px; border-radius: 2px;
  border: 1px solid rgba(255,255,255,0.2);
}
.ci-creeps-stat-you .ci-creeps-pip { background: #5fa5cb; }
.ci-creeps-stat-pro .ci-creeps-pip { background: #d4a23a; }
.ci-creeps-warn {
  margin-top: 8px; padding: 8px 12px;
  background: rgba(212, 162, 58, 0.08);
  border: 1px solid rgba(212, 162, 58, 0.3);
  border-radius: 4px;
  color: #e8d8a8; font-size: 0.85rem;
}
.ci-creeps-canvas-wrap {
  position: relative;
  background: #050708; border: 1px solid #232830; border-radius: 8px;
  padding: 6px; max-width: 620px; margin: 0 auto;
  aspect-ratio: 1 / 1;
}
.ci-creeps-canvas {
  width: 100%; height: auto; display: block;
  border-radius: 4px;
  image-rendering: -webkit-optimize-contrast;
}
.ci-creeps-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #888; font-size: 0.9rem;
}
.ci-creeps-side-you { color: #5fa5cb; }
.ci-creeps-side-pro { color: #d4a23a; }
.ci-camp2-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.ci-camp2-item {
  display: grid;
  grid-template-columns: 24px 50px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 4px 8px;
  background: #0e1216; border: 1px solid #232830; border-radius: 4px;
  font-size: 0.85rem;
}
.ci-camp2-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: #2c3138; color: #b8c8d4;
  font-size: 0.75rem; font-weight: 700;
}
.ci-camp2-time { color: #b8c8d4; font-family: monospace; font-size: 0.8rem; }
.ci-camp2-lvl  { color: #888; font-size: 0.8rem; }
.ci-camp2-xp   { color: #5cb878; font-weight: 600; }

@media (max-width: 720px) {
  .ci-tier-row { grid-template-columns: 1fr; }
  .ci-tier-row-times { justify-content: flex-start; }
  .ci-skill2-grid { font-size: 0.7rem; }
}

/* ===== PlayerPicker (post-upload "Which player are you?" modal) ===== */

.pp-modal {
  position: fixed;
  inset: 0;
  z-index: 10001; /* above acp-modal */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pp-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 14, 0.78);
  backdrop-filter: blur(4px);
}
.pp-card {
  position: relative;
  z-index: 1;
  width: min(720px, 96vw);
  max-height: 90vh;
  overflow-y: auto;
  background: #161a22;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  padding: 22px 24px 16px;
}
.pp-head { position: relative; margin-bottom: 16px; }
.pp-title {
  margin: 0 0 4px 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: #f0f0f0;
}
.pp-sub { font-size: 0.95rem; color: #aaa; }
.pp-close {
  position: absolute;
  top: -4px; right: -4px;
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  color: #aaa;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
}
.pp-close:hover { color: #f0f0f0; border-color: rgba(255,255,255,0.4); }

.pp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.pp-player {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.pp-player:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(140, 200, 120, 0.65);
  transform: translateY(-1px);
}
.pp-player-current {
  border-color: #5cb878;
  background: rgba(92,184,120,0.08);
}

.pp-player-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pp-race-badge {
  display: inline-block;
  width: 36px; height: 22px;
  text-align: center;
  line-height: 22px;
  font-weight: 800;
  font-size: 0.78rem;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.pp-race-badge.race-H { background: #4a6da8; color: #fff; }
.pp-race-badge.race-O { background: #a8543a; color: #fff; }
.pp-race-badge.race-E { background: #5a9c4a; color: #fff; }
.pp-race-badge.race-U { background: #6c4a8c; color: #fff; }
.pp-race-badge.race-R { background: #555; color: #ddd; }
.pp-player-name {
  font-size: 1rem;
  font-weight: 700;
  color: #f0f0f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pp-player-mid {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pp-hero-portrait {
  width: 56px; height: 56px;
  border-radius: 6px;
  border: 2px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.3);
  flex-shrink: 0;
  object-fit: cover;
}
.pp-hero-blank { background: rgba(255,255,255,0.06); }
.pp-hero-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-hero-race { font-size: 0.85rem; color: #aaa; }
.pp-hero-name {
  font-size: 0.95rem;
  color: #d8d8d8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pp-pick-tag {
  font-size: 0.82rem;
  color: #8cc878;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.pp-current-tag {
  font-size: 0.82rem;
  color: #5cb878;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-top: 4px;
  border-top: 1px solid rgba(92,184,120,0.20);
}

.pp-foot {
  font-size: 0.82rem;
  color: #888;
  text-align: center;
  padding-top: 8px;
}
.pp-foot-hint { font-style: italic; }

/* ===== Advanced compare picker (modal) ===== */

.acp-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.acp-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 18, 0.7);
  backdrop-filter: blur(3px);
}

.acp-card {
  position: relative;
  width: 100%;
  max-width: 800px;
  max-height: 85vh;
  background: linear-gradient(180deg, rgba(40, 45, 55, 0.98), rgba(28, 32, 40, 0.98));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.acp-head {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.acp-title { margin: 0; font-size: 1.1rem; color: #f0f0f0; }

.acp-close {
  background: transparent;
  border: none;
  color: #aaa;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0 6px;
  line-height: 1;
}

.acp-close:hover { color: #fff; }

.acp-filters {
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(0,0,0,0.15);
}

.acp-filter-row { display: flex; align-items: center; gap: 10px; }

.acp-filter-label {
  width: 90px;
  font-size: 0.82rem;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.acp-filter-chips { display: flex; flex-wrap: wrap; gap: 5px; }

.acp-filter-chip {
  padding: 4px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  font-size: 0.78rem;
  font-family: inherit;
  color: #c0c0c0;
  cursor: pointer;
}

.acp-filter-chip:hover { background: rgba(255,255,255,0.08); }

.acp-filter-chip-active {
  background: rgba(92, 184, 120, 0.18);
  border-color: #5cb878;
  color: #f0f0f0;
}

.acp-results { overflow-y: auto; padding: 8px; flex: 1; }

.acp-empty { padding: 32px; text-align: center; color: #888; }

.acp-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
}

.acp-result:hover { background: rgba(255,255,255,0.04); }

.acp-result-icon {
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  font-weight: 700;
  border-radius: 6px;
  flex-shrink: 0;
}

.acp-result-icon.race-H { background: #4a6da8; color: #fff; }
.acp-result-icon.race-O { background: #a8543a; color: #fff; }
.acp-result-icon.race-E { background: #5a9c4a; color: #fff; }
.acp-result-icon.race-U { background: #6c4a8c; color: #fff; }

.acp-result-body { flex: 1; min-width: 0; }

.acp-result-name { color: #f0f0f0; font-weight: 600; font-size: 0.95rem; }
.acp-result-vs { color: #aaa; font-weight: 400; }
.acp-result-meta {
  color: #888;
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acp-result-pick {
  padding: 6px 14px;
  background: #3a8c4a;
  color: #fff;
  border: 1px solid #5cb878;
  border-radius: 6px;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
}

.acp-result-pick:hover { background: #4ba85b; }

.site-my-replays-hint { font-size: 0.85rem; color: #888; }
.site-my-replays-hint strong { color: #c8c8c8; font-weight: 600; }

.hero-compact-actions-single {
  grid-template-columns: 1fr;
  max-width: 720px;
  margin: 0 auto;
}

/* =============================================================
   HOMEPAGE REDESIGN: side-by-side broadcast layout
   ============================================================= */

/* ── Left rail: Your replays ── */

.site-mine {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.site-mine-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.site-mine-title {
  font-size: 1.05rem;
  margin: 0;
  color: #d8d8d8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.site-mine-upload-btn {
  font-size: 0.82rem;
  padding: 5px 12px;
  background: transparent;
  color: #8cc878;
  border: 1px solid rgba(140, 200, 120, 0.35);
  border-radius: 6px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.site-mine-upload-btn:hover {
  background: rgba(140, 200, 120, 0.1);
  border-color: #8cc878;
}

.site-mine-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-mine-status {
  font-size: 0.85rem;
  color: #c4915b;
  min-height: 1em;
}

.site-mine-empty {
  padding: 32px 24px;
  text-align: center;
  color: #aaa;
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  transition: border-color 0.12s, background 0.12s;
}
.site-mine-empty-dragover {
  border-color: rgba(140, 200, 120, 0.65);
  background: rgba(140, 200, 120, 0.08);
}
.site-mine-empty-icon {
  color: #5cb878;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
}
.site-mine-empty-title {
  font-size: 1rem;
  font-weight: 600;
  color: #e0e0e0;
  margin-bottom: 6px;
}
.site-mine-empty-sub {
  font-size: 0.85rem;
  color: #999;
  line-height: 1.4;
}

/* When the rail has no replays yet, hide the sort/count toolbar — there's
   nothing to sort and the bare "Sort: Newest" row looks broken next to the
   empty-state card. */
.site-mine-is-empty .mine-toolbar {
  display: none;
}

/* ── Right column: Pro library ── */

.site-pros {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.site-pros-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.site-pros-title {
  font-size: 1.05rem;
  margin: 0;
  color: #d8d8d8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* ── Horizontal filter bar ── */

.pro-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  position: relative;
}

.pfb-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pfb-label {
  font-size: 0.72rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
  margin-right: 2px;
}

.pfb-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Race chip — overrides the old vertical sidebar pick style. The legacy
   .site-race-pick rule sets width:100% (sidebar context) which we have to
   undo explicitly. */
#race-filter.pfb-chips .site-race-pick,
.pfb-chips .site-race-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
  color: #d0d0d0;
  font-family: inherit;
  width: auto;
  box-shadow: none;
}
.pfb-chips .site-race-pick:hover {
  background: rgba(255,255,255,0.08);
}
.pfb-chips .site-race-pick.active {
  background: var(--race-color, rgba(92,184,120,0.18));
  border-color: var(--race-color, #5cb878);
  color: #fff;
}
.pfb-chips .site-race-pick-icon {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  flex-shrink: 0;
}
.pfb-chips .site-race-pick-icon img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}
.pfb-chips .site-race-pick-label {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Matchup + axis chips: same chip style. */
.pfb-chips .site-matchup-btn,
.pfb-chips .site-axis-btn,
.pfb-chips .site-tournament-btn,
.pfb-pop-chips .site-axis-btn,
.pfb-pop-chips .site-tournament-btn {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.82rem;
  color: #d0d0d0;
  font-family: inherit;
}
.pfb-chips .site-matchup-btn:hover,
.pfb-chips .site-axis-btn:hover,
.pfb-chips .site-tournament-btn:hover,
.pfb-pop-chips .site-axis-btn:hover,
.pfb-pop-chips .site-tournament-btn:hover {
  background: rgba(255,255,255,0.08);
}
.pfb-chips .site-matchup-btn.active,
.pfb-chips .site-axis-btn.active,
.pfb-chips .site-tournament-btn.active,
.pfb-pop-chips .site-axis-btn.active,
.pfb-pop-chips .site-tournament-btn.active {
  background: rgba(92,184,120,0.18);
  border-color: #5cb878;
  color: #f0f0f0;
}

/* "+ More filters" expander */
.pfb-more {
  position: relative;
}
.pfb-more-btn {
  padding: 4px 10px;
  background: transparent;
  color: #aaa;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
}
.pfb-more-btn:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
.pfb-more-btn[aria-expanded="true"] {
  background: rgba(255,255,255,0.06);
  color: #fff;
}
.pfb-more-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  min-width: 320px;
  max-width: 480px;
  background: rgba(28, 32, 40, 0.98);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
/* The `hidden` attribute on this element should hide it. The `display: flex`
   above overrides the UA `[hidden] { display: none }` rule (same specificity,
   later in the cascade), so we have to assert it explicitly. */
.pfb-more-pop[hidden] { display: none; }
.pfb-pop-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pfb-pop-label {
  font-size: 0.72rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}
.pfb-pop-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.pfb-count {
  margin-left: auto;
  font-size: 0.78rem;
  color: #888;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Broadcast-style replay card (rep-card-*) ── */

.rep-card {
  --race-color: #4a5568;
  --race-color-glow: rgba(80,90,110,0.3);
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  min-height: 168px;
  isolation: isolate;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.rep-card:hover {
  transform: translateY(-2px);
  border-color: var(--race-color);
  box-shadow: 0 6px 24px rgba(0,0,0,0.35), 0 0 0 1px var(--race-color);
}

.rep-card.race-H { --race-color: #4a6da8; --race-color-glow: rgba(74,109,168,0.35); }
.rep-card.race-O { --race-color: #a8543a; --race-color-glow: rgba(168,84,58,0.35); }
.rep-card.race-E { --race-color: #5a9c4a; --race-color-glow: rgba(90,156,74,0.35); }
.rep-card.race-U { --race-color: #6c4a8c; --race-color-glow: rgba(108,74,140,0.35); }

.rep-card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.rep-card-banner {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(135deg, var(--race-color) 0%, transparent 60%),
    radial-gradient(ellipse at top right, var(--race-color-glow) 0%, transparent 70%);
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
  opacity: 0.6;
}

.rep-card-map {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 50%;
  object-fit: cover;
  opacity: 0.45;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 60%);
}
.rep-card-map.rep-card-map-failed { display: none; }

.rep-card-bg-tint {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15,18,25,0.45) 0%, rgba(15,18,25,0.7) 100%),
    linear-gradient(90deg, rgba(15,18,25,0.85) 0%, rgba(15,18,25,0.4) 50%, rgba(15,18,25,0.7) 100%);
}

.rep-card-fg {
  position: relative;
  z-index: 1;
  padding: 14px 16px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  min-height: 168px;
  box-sizing: border-box;
}

.rep-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.rep-card-races {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rep-card-race-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: rgba(255,255,255,0.1);
  color: #fff;
}
.rep-card-race-badge.race-H { background: #4a6da8; }
.rep-card-race-badge.race-O { background: #a8543a; }
.rep-card-race-badge.race-E { background: #5a9c4a; }
.rep-card-race-badge.race-U { background: #6c4a8c; }
.rep-card-race-badge.race-R { background: #6a6a6a; }
.rep-card-vs {
  font-size: 0.72rem;
  color: #999;
  text-transform: uppercase;
  font-weight: 600;
}

.rep-card-grade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 1.05rem;
  font-weight: 800;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}
.rep-card-grade-badge[data-empty="true"] {
  color: #666;
  font-weight: 500;
}
.rep-card-grade-badge.grade-NA,
.rep-card-grade-badge.grade-none { color: #666; }

.rep-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rep-card-players {
  font-size: 1rem;
  color: #f0f0f0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rep-card-players strong { font-weight: 700; }
.rep-card-vs-text { color: #888; font-weight: 400; margin: 0 4px; }
.rep-card-map-line {
  font-size: 0.82rem;
  color: #aaa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rep-card-build {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}
.rep-card-build-label {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 9px;
  background: rgba(140,200,120,0.18);
  color: #b8e0a0;
  border: 1px solid rgba(140,200,120,0.4);
  border-radius: 999px;
}
.rep-card-timings {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}
.rep-tp {
  display: inline-block;
  padding: 2px 7px;
  font-size: 0.72rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  background: rgba(0,0,0,0.4);
  color: #c4c4c4;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
}
.rep-tp-expo { color: #b8e0a0; border-color: rgba(140,200,120,0.3); }
.rep-tp-no { color: #c47a5a; border-color: rgba(196,122,90,0.3); }

.rep-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.rep-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  font-size: 0.82rem;
  font-family: inherit;
  color: #d8d8d8;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.rep-card-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.25);
  color: #fff;
}
.rep-card-btn-primary {
  background: var(--race-color);
  border-color: var(--race-color);
  color: #fff;
  font-weight: 600;
}
.rep-card-btn-primary:hover {
  filter: brightness(1.15);
}
.rep-card-btn-compare {
  flex: 1;
}
.rep-card-btn-icon {
  width: 32px;
  padding: 6px;
  font-size: 1.1rem;
  line-height: 1;
}

/* ── Compare modal (centered, overlays the page) ──
   Class names kept as `.compare-drawer*` for backwards compatibility with
   the existing JS — the visual treatment is now a centered modal. */

.compare-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(8, 10, 14, 0.65);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.compare-drawer-backdrop.compare-drawer-open {
  opacity: 1;
}

.compare-drawer {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 9001;
  width: min(820px, 94vw);
  max-height: min(88vh, 960px);
  background: linear-gradient(180deg, rgba(28, 32, 40, 0.99), rgba(20, 24, 32, 0.99));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.96);
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.compare-drawer.compare-drawer-open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.compare-drawer[hidden],
.compare-drawer-backdrop[hidden] { display: none; }

.compare-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  flex-shrink: 0;
}
.compare-drawer-head-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.compare-drawer-eyebrow {
  font-size: 0.7rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.compare-drawer-title {
  font-size: 1.05rem;
  color: #f0f0f0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.compare-drawer-close {
  background: transparent;
  border: none;
  color: #aaa;
  font-size: 1.6rem;
  cursor: pointer;
  padding: 0 8px;
  line-height: 1;
}
.compare-drawer-close:hover { color: #fff; }

.compare-drawer-body {
  overflow-y: auto;
  padding: 16px 18px 24px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* The drawer hosts the existing CompareInline DOM directly. The
   ci-tiles grid auto-fits columns based on width — at the drawer's
   ~680px width that's ~3 tiles per row. Looks great. */

body.compare-drawer-active {
  overflow: hidden;
}

/* ── Mobile / responsive ── */

@media (max-width: 1024px) {
  .pfb-count { width: 100%; text-align: right; }
}

@media (max-width: 768px) {
  .compare-drawer {
    width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    border: none;
  }
  .rep-card-map {
    width: 35%;
  }
}

@media (max-width: 600px) {
  .rep-card-fg {
    padding: 12px 14px 10px 14px;
  }
  .rep-card-map {
    display: none;
  }
  .rep-card-banner {
    opacity: 0.4;
  }
  .pfb-more-pop {
    left: -120px;  /* keep on-screen when triggering button is offset */
  }
}

/* ===== "Where are my replays?" help modal ===== */

.help-modal {
  position: fixed;
  inset: 0;
  z-index: 9050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.help-modal[hidden] { display: none; }

.help-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 14, 0.7);
  backdrop-filter: blur(3px);
}

.help-modal-card {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  max-width: 620px;
  background: linear-gradient(180deg, rgba(36, 40, 50, 0.99), rgba(24, 28, 36, 0.99));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
  overflow: hidden;
}

.help-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.help-modal-title {
  margin: 0;
  font-size: 1.1rem;
  color: #f0f0f0;
  font-weight: 600;
}

.help-modal-close {
  background: transparent;
  border: none;
  color: #aaa;
  font-size: 1.6rem;
  cursor: pointer;
  padding: 0 8px;
  line-height: 1;
}
.help-modal-close:hover { color: #fff; }

.help-modal-body {
  padding: 16px 20px 20px 20px;
  color: #c8c8c8;
  font-size: 0.92rem;
  line-height: 1.55;
}
.help-modal-body p {
  margin: 0 0 12px 0;
}
.help-modal-body code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.88em;
  background: rgba(0,0,0,0.4);
  padding: 1px 6px;
  border-radius: 4px;
  color: #b8e0a0;
}
.help-modal-body strong { color: #f0f0f0; }

.help-path {
  margin: 8px 0;
  padding: 10px 12px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.help-path-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #8cc878;
  font-weight: 700;
}
.help-path-code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.85rem;
  color: #e0e0e0;
  background: transparent;
  padding: 0;
  /* Allow wrapping on backslashes/spaces so long paths don't trigger
     horizontal scroll inside the modal. */
  white-space: normal;
  word-break: break-all;
  overflow-wrap: anywhere;
}

.help-modal-tip {
  margin-top: 14px !important;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  color: #b8b8b8;
  font-size: 0.88rem;
}

body.help-modal-active {
  overflow: hidden;
}

/* .help-path is already a single-column flex layout, no breakpoint needed. */

/* =============================================================
   Your Replays rail v2: toolbar, hero portraits, confirm-delete,
   View-all link, full-management page (/replays.html)
   ============================================================= */

.site-mine-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.site-mine-head-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.mine-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.82rem;
}
.mine-toolbar-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
  font-weight: 600;
  margin-right: 4px;
}
.mine-toolbar-sort {
  display: inline-flex;
  align-items: center;
}
.mine-sort-select {
  background: rgba(255,255,255,0.04);
  color: #d8d8d8;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
}
.mine-sort-select:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.25);
}
.mine-toolbar-count {
  margin-left: auto;
  font-size: 0.78rem;
  color: #888;
  font-variant-numeric: tabular-nums;
}

.mine-view-all-link {
  display: inline-block;
  margin-top: 4px;
  padding: 6px 10px;
  text-align: center;
  text-decoration: none;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: #c8c8c8;
  font-size: 0.85rem;
  font-weight: 500;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.mine-view-all-link:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}
.mine-view-all-link[hidden] {
  display: none;
}

/* ── Hero portraits row on cards ── */

.rep-card-heroes {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  min-height: 28px;
}
.rep-card-heroes:empty { display: none; }

.rep-card-hero {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.18);
  object-fit: cover;
  flex-shrink: 0;
  transition: transform 0.12s, border-color 0.12s;
  background: rgba(0,0,0,0.4);
}
.rep-card-hero:hover {
  transform: scale(1.08);
  border-color: var(--race-color, rgba(255,255,255,0.4));
}
.rep-card-hero-failed { display: none; }

.rep-card.race-H .rep-card-hero { border-color: rgba(74,109,168,0.45); }
.rep-card.race-O .rep-card-hero { border-color: rgba(168,84,58,0.45); }
.rep-card.race-E .rep-card-hero { border-color: rgba(90,156,74,0.45); }
.rep-card.race-U .rep-card-hero { border-color: rgba(108,74,140,0.45); }

/* ── Inline delete confirm bar ── */

.rep-card-actions-confirming {
  background: rgba(196,96,96,0.08);
  border-radius: 6px;
  padding: 4px 6px;
  margin: 0 -6px;
  align-items: center;
  gap: 8px;
}
.rep-card-confirm-msg {
  flex: 1;
  text-align: center;
  font-size: 0.85rem;
  color: #f0d0d0;
  font-weight: 500;
}
.rep-card-btn-cancel {
  padding: 6px 10px;
  background: transparent;
  color: #d0d0d0;
}
.rep-card-btn-danger {
  padding: 6px 14px;
  background: #c44a4a;
  border: 1px solid #d05a5a;
  color: #fff;
  font-weight: 600;
}
.rep-card-btn-danger:hover {
  background: #d65656;
  border-color: #e06868;
  color: #fff;
}
.rep-card-removing {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  pointer-events: none;
}

/* ============================================================= */
/* Replays library page (/replays.html)                          */
/* ============================================================= */

.replays-page {
  max-width: 1440px;
  margin: 0 auto;
  padding: 16px 24px 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.replays-page-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-wrap: wrap;
}

.replays-search {
  flex: 1;
  min-width: 200px;
  background: rgba(255,255,255,0.04);
  color: #e0e0e0;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 0.92rem;
}
.replays-search:focus {
  outline: none;
  border-color: rgba(140,200,120,0.5);
  background: rgba(255,255,255,0.06);
}

.replays-race-filter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.replays-race-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  font-size: 0.78rem;
  font-family: inherit;
  font-weight: 600;
  color: #c0c0c0;
  cursor: pointer;
}
.replays-race-chip:hover { background: rgba(255,255,255,0.08); }
.replays-race-chip.active {
  background: rgba(140,200,120,0.18);
  border-color: #5cb878;
  color: #f0f0f0;
}
.replays-race-chip.race-H.active { background: rgba(74,109,168,0.22); border-color: #4a6da8; }
.replays-race-chip.race-O.active { background: rgba(168,84,58,0.22); border-color: #a8543a; }
.replays-race-chip.race-E.active { background: rgba(90,156,74,0.22); border-color: #5a9c4a; }
.replays-race-chip.race-U.active { background: rgba(108,74,140,0.22); border-color: #6c4a8c; }

.replays-page-count {
  font-size: 0.85rem;
  color: #888;
  font-variant-numeric: tabular-nums;
}

.replays-select-toggle {
  padding: 6px 12px;
  background: rgba(255,255,255,0.04);
  color: #c8c8c8;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.replays-select-toggle.active {
  background: rgba(140,200,120,0.18);
  border-color: #5cb878;
  color: #fff;
}

.replays-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.replays-page-empty {
  padding: 48px 24px;
  text-align: center;
  color: #aaa;
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
}
.replays-empty-link {
  color: #8cc878;
  text-decoration: none;
}
.replays-empty-link:hover { text-decoration: underline; }

.replays-page-pager {
  display: flex;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
  padding-top: 12px;
}
.replays-page-pager:empty { display: none; }
.replays-pager-btn {
  min-width: 32px;
  padding: 5px 10px;
  background: rgba(255,255,255,0.04);
  color: #c8c8c8;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.replays-pager-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.replays-pager-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.replays-pager-active {
  background: rgba(140,200,120,0.22) !important;
  border-color: #5cb878 !important;
  color: #fff !important;
}
.replays-pager-ellipsis {
  display: inline-block;
  padding: 5px 4px;
  color: #666;
}

.rep-card-selectable {
  position: relative;
}
.rep-card-checkbox {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
  background: rgba(0,0,0,0.7);
  border-radius: 4px;
  padding: 4px;
  display: inline-flex;
  cursor: pointer;
}
.rep-card-checkbox input { cursor: pointer; }

.replays-bulk-bar {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(28, 32, 40, 0.98);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.replays-bulk-bar[hidden] { display: none; }
.replays-bulk-count {
  font-size: 0.9rem;
  font-weight: 600;
  color: #f0f0f0;
  margin-right: 4px;
}

@media (max-width: 700px) {
  .replays-page-grid {
    grid-template-columns: 1fr;
  }
  .replays-page-toolbar { gap: 8px; }
  .replays-search { min-width: 0; width: 100%; }
}

/* ===== Terms acknowledgment banner =====
   One-time, slim info strip directly beneath the top nav. Dismissed via
   localStorage flag. Intentionally low-contrast — should read as a quiet
   notice, not a banner ad. */
.tos-banner {
  padding: 6px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.025);
  border-bottom: 1px solid var(--site-border);
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--site-text-muted);
}

.tos-banner[hidden] { display: none; }

.tos-banner-text {
  min-width: 0;
}

.tos-banner-text a {
  color: var(--site-text);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.25);
  text-underline-offset: 2px;
}
.tos-banner-text a:hover {
  color: var(--site-accent);
  text-decoration-color: var(--site-accent);
}

.tos-banner-dismiss {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--site-text-muted);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tos-banner-dismiss:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--site-text);
  border-color: rgba(255, 255, 255, 0.25);
}

@media (max-width: 700px) {
  .tos-banner {
    padding: 6px 16px;
    font-size: 0.74rem;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}