/*
 * Replay Dashboard — port of the B v2.5 prototype.
 * Required Google Fonts (add to index.html, not here):
 *   <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
 *
 * All rules are scoped under `.replay-dashboard` so they cannot leak into the
 * rest of the app. Direction A and v3 (Persona-5) prototype rules were dropped.
 *
 * Source: New replay dashboard/styles.css (v2.5 / v2 / generic .b-* / atoms)
 */

/* ============================================================
 * TOKENS — scoped (do NOT redefine app globals)
 * ============================================================ */
.replay-dashboard {
  --rd-cyan: #56c2ff;
  --rd-purple: #a24dff;
  --rd-amber: #fbbf24;
  --rd-green: #4ade80;
  --rd-red: #f87171;
  --rd-bg-0: #04060c;
  --rd-bg-1: #0a0e18;
  --rd-bg-2: #0f1422;
  --rd-line: rgba(255,255,255,0.08);
  --rd-line-2: rgba(255,255,255,0.14);
  --rd-text: #e6e9ef;
  --rd-text-dim: #8891a0;
  --rd-text-mute: #5a6373;

  /* The prototype source used --cyan, --text, etc. We re-publish the same
   * names locally so the prototype rules below work without rewriting every
   * `var(--cyan)` reference. They only resolve inside `.replay-dashboard`. */
  --cyan: var(--rd-cyan);
  --purple: var(--rd-purple);
  --amber: var(--rd-amber);
  --green: var(--rd-green);
  --red: var(--rd-red);
  --bg-0: var(--rd-bg-0);
  --bg-1: var(--rd-bg-1);
  --bg-2: var(--rd-bg-2);
  --line: var(--rd-line);
  --line-2: var(--rd-line-2);
  --text: var(--rd-text);
  --text-dim: var(--rd-text-dim);
  --text-mute: var(--rd-text-mute);

  /* Direction-B base font + background */
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  background:
    radial-gradient(circle at 20% 0%, rgba(86,194,255,0.04), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(162,77,255,0.03), transparent 40%),
    var(--rd-bg-0);
  color: var(--rd-text);

  /* B v2.5 extras */
  --b25-row-h: 52px;
}
.replay-dashboard * { box-sizing: border-box; }
.replay-dashboard a { text-decoration: none; color: inherit; }
.replay-dashboard button { font-family: inherit; }

/* ============================================================
 * ATOMS — mmr-pill / mu-badge / mapthumb / play-pill
 * ============================================================ */
.replay-dashboard .mmr-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  background: rgba(251, 191, 36, 0.10);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: var(--amber);
  border-radius: 3px;
  padding: 2px 7px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.replay-dashboard .mmr-num { font-weight: 700; }
.replay-dashboard .mmr-delta { font-size: 10px; }
.replay-dashboard .mmr-delta.up { color: #4ade80; }
.replay-dashboard .mmr-delta.down { color: #f87171; }

.replay-dashboard .mu-badge {
  display: inline-flex; align-items: center; gap: 1px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 3px;
}
.replay-dashboard .mu-badge-v { color: var(--text-mute); font-size: 10px; padding: 0 1px; }

.replay-dashboard .mapthumb {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #050810;
  flex-shrink: 0;
}
.replay-dashboard .mapthumb-label {
  position: absolute; left: 6px; bottom: 4px;
  font-size: 9px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.replay-dashboard .play-pill {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  background: var(--cyan); color: #04111f;
  border-radius: 3px;
  flex-shrink: 0;
}
.replay-dashboard .play-pill.is-live { background: var(--red); }

/* ============================================================
 * GENERIC .b-* — section / button / panel / chip primitives
 * (only the rules actually referenced by v2.5 / v2 components)
 * ============================================================ */
.replay-dashboard .b-main { max-width: 1500px; margin: 0 auto; padding: 28px 20px 0; }
.replay-dashboard .b-section-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-mute);
  margin-bottom: 16px;
  display: flex; justify-content: space-between;
}
.replay-dashboard .b-section-tag-r { color: var(--cyan); }

.replay-dashboard .b-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cyan); color: #04111f;
  border: none; padding: 8px 16px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700; font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s;
}
.replay-dashboard .b-btn-primary:hover { background: #79d0ff; }
.replay-dashboard .b-btn-primary.b-btn-block { display: flex; width: 100%; justify-content: center; }
.replay-dashboard .b-btn-prefix { color: rgba(4,17,31,0.5); }

.replay-dashboard .b-btn-ghost {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--line-2);
  padding: 8px 14px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.15s;
}
.replay-dashboard .b-btn-ghost:hover { color: var(--text); border-color: rgba(255,255,255,0.3); }

.replay-dashboard .b-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 32px;
}
.replay-dashboard .b-panel {
  background: rgba(15,20,34,0.5);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px 16px;
}
.replay-dashboard .b-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.replay-dashboard .b-panel-eyebrow {
  font-size: 10px; color: var(--text-mute);
  letter-spacing: 0.08em; font-weight: 600;
}
.replay-dashboard .b-panel-link {
  font-size: 10px; color: var(--cyan);
  cursor: pointer;
  letter-spacing: 0.04em;
}

/* MMR ribbon stats card */
.replay-dashboard .b-mmr-body {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 12px;
}
.replay-dashboard .b-mmr-num-block { display: flex; flex-direction: column; gap: 2px; }
.replay-dashboard .b-mmr-num {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800; font-size: 36px; line-height: 1;
  color: var(--text);
}
.replay-dashboard .b-mmr-delta { font-size: 12px; font-weight: 700; }
.replay-dashboard .b-mmr-delta.up { color: var(--green); }
.replay-dashboard .b-mmr-delta.down { color: var(--red); }
.replay-dashboard .b-mmr-rank { font-size: 10px; color: var(--text-dim); margin-top: 2px; }
.replay-dashboard .b-mmr-spark { flex: 1; height: 50px; min-width: 0; }
.replay-dashboard .b-mmr-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.replay-dashboard .b-mmr-stats > div { display: flex; flex-direction: column; gap: 2px; }
.replay-dashboard .b-mmr-s-label { font-size: 9px; color: var(--text-mute); letter-spacing: 0.08em; }
.replay-dashboard .b-mmr-s-val { font-size: 12px; color: var(--text); font-weight: 600; }
.replay-dashboard .b-mmr-s-val.warn { color: var(--amber); }

/* Mistake compass card */
.replay-dashboard .b-compass-list { display: flex; flex-direction: column; gap: 6px; }
.replay-dashboard .b-compass-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center; gap: 10px;
  padding: 8px 10px;
  background: rgba(248,113,113,0.03);
  border: 1px solid rgba(248,113,113,0.18);
  border-left: 2px solid var(--red);
  border-radius: 4px;
}
.replay-dashboard .b-compass-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--text-mute);
}
.replay-dashboard .b-compass-label { font-size: 12px; color: var(--text); margin-bottom: 2px; }
.replay-dashboard .b-compass-meta {
  display: flex; gap: 8px;
  font-size: 10px; color: var(--text-dim);
}
.replay-dashboard .b-compass-target { color: var(--green); }
.replay-dashboard .b-compass-fix {
  background: rgba(248,113,113,0.12);
  border: 1px solid rgba(248,113,113,0.4);
  color: var(--red);
  padding: 4px 9px; border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.05em;
}

/* Learn-progress card */
.replay-dashboard .b-learn-row1 {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.replay-dashboard .b-learn-arch {
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px; font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
}
.replay-dashboard .b-learn-prog { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.replay-dashboard .b-learn-prog-bar {
  flex: 1; height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px; overflow: hidden;
  position: relative;
}
.replay-dashboard .b-learn-prog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(86,194,255,0.5);
}
.replay-dashboard .b-learn-prog-label { font-size: 10px; color: var(--text-dim); white-space: nowrap; }
.replay-dashboard .b-learn-next {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 12px;
}
.replay-dashboard .b-learn-next-label {
  font-size: 9px; color: var(--cyan);
  letter-spacing: 0.12em; font-weight: 700;
  margin-bottom: 4px;
}
.replay-dashboard .b-learn-next-text { font-size: 11px; color: var(--text); line-height: 1.4; }

/* Section primitives */
.replay-dashboard .b-section { margin-bottom: 32px; }
.replay-dashboard .b-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; gap: 12px;
}
.replay-dashboard .b-section-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--text);
  letter-spacing: 0.08em; font-weight: 600;
}
.replay-dashboard .b-section-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.replay-dashboard .b-section-link {
  background: none; border: none;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-dim);
  font-size: 10px;
  padding: 4px 9px; border-radius: 3px;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.replay-dashboard .b-section-link:hover { color: var(--text); }
.replay-dashboard .b-section-link.is-active {
  color: var(--cyan);
  background: rgba(86,194,255,0.1);
}
.replay-dashboard .b-chip {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  color: var(--text-dim);
  padding: 3px 9px; border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.replay-dashboard .b-chip:hover { color: var(--text); }
.replay-dashboard .b-chip.is-active {
  color: var(--cyan); background: rgba(86,194,255,0.12);
  border-color: rgba(86,194,255,0.4);
}

/* ============================================================
 * B v2 — HERO (cinematic featured-replay card)
 * ============================================================ */
.replay-dashboard .b2-hero { margin-bottom: 18px; }
.replay-dashboard .b2-hero-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.replay-dashboard .b2-hero-bg { position: absolute; inset: 0; opacity: 0.4; }
.replay-dashboard .b2-hero-bg .mapthumb { width: 100% !important; height: 100% !important; border-radius: 0; }
.replay-dashboard .b2-hero-bg .mapthumb svg { width: 100%; height: 100%; }
.replay-dashboard .b2-hero-fade {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(4,6,12,0.3) 0%, rgba(4,6,12,0.85) 70%),
    linear-gradient(180deg, rgba(4,6,12,0.55) 0%, rgba(4,6,12,0.96) 100%);
}

.replay-dashboard .b2-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 460px 1fr;
  align-items: center;
  gap: 32px;
  padding: 28px 32px 22px;
  z-index: 1;
}

.replay-dashboard .b2-hero-col {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}
.replay-dashboard .b2-hero-col-r { flex-direction: row-reverse; }

.replay-dashboard .b2-hero-portrait {
  flex-shrink: 0;
  padding: 8px;
  border-radius: 4px;
}
.replay-dashboard .b2-hero-col[data-race="P"] .b2-hero-portrait { box-shadow: inset 0 0 0 1px rgba(86,194,255,0.4); background: rgba(86,194,255,0.04); }
.replay-dashboard .b2-hero-col[data-race="T"] .b2-hero-portrait { box-shadow: inset 0 0 0 1px rgba(251,191,36,0.4); background: rgba(251,191,36,0.04); }
.replay-dashboard .b2-hero-col[data-race="Z"] .b2-hero-portrait { box-shadow: inset 0 0 0 1px rgba(162,77,255,0.4); background: rgba(162,77,255,0.04); }

.replay-dashboard .b2-hero-meta { min-width: 0; flex: 1; }
.replay-dashboard .b2-hero-meta-r { text-align: right; }

.replay-dashboard .b2-hero-name-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.replay-dashboard .b2-hero-meta-r .b2-hero-name-row { justify-content: flex-end; }
.replay-dashboard .b2-hero-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 30px; font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1;
}
.replay-dashboard .b2-hero-w {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--green);
  background: rgba(74,222,128,0.14);
  border: 1px solid rgba(74,222,128,0.45);
  padding: 2px 7px;
  border-radius: 2px;
}
.replay-dashboard .b2-hero-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.replay-dashboard .b2-hero-meta-r .b2-hero-sub { justify-content: flex-end; }
.replay-dashboard .b2-hero-sep-dot { color: var(--text-mute); }
.replay-dashboard .b2-hero-race-chip {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: 11px;
  width: 20px; height: 20px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 3px;
}
.replay-dashboard .b2-hero-race-chip[data-race="P"] { background: rgba(86,194,255,0.2); color: #56c2ff; }
.replay-dashboard .b2-hero-race-chip[data-race="T"] { background: rgba(251,191,36,0.2); color: #fbbf24; }
.replay-dashboard .b2-hero-race-chip[data-race="Z"] { background: rgba(162,77,255,0.2); color: #a24dff; }
.replay-dashboard .b2-hero-build {
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  color: var(--cyan);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.replay-dashboard .b2-hero-stats {
  display: flex;
  gap: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.replay-dashboard .b2-hero-meta-r .b2-hero-stats { justify-content: flex-end; }
.replay-dashboard .b2-hero-stats b { color: var(--text); font-weight: 600; }

/* MID match strip */
.replay-dashboard .b2-hero-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  padding: 14px 20px;
  border-left: 1px dashed rgba(255,255,255,0.1);
  border-right: 1px dashed rgba(255,255,255,0.1);
}
.replay-dashboard .b2-hero-mid-mu .mu-badge { font-size: 12px; padding: 2px 8px; }
.replay-dashboard .b2-hero-vs-glyph {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: 36px;
  letter-spacing: 0.05em;
  color: var(--text);
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.replay-dashboard .b2-hero-mid-map {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.replay-dashboard .b2-hero-map-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.replay-dashboard .b2-hero-map-dur {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-dim);
}
.replay-dashboard .b2-hero-beats {
  display: flex;
  gap: 0;
  width: 100%;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 6px 0;
}
.replay-dashboard .b2-hero-beat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.06em;
}
.replay-dashboard .b2-hero-beat-t { color: var(--cyan); font-weight: 600; }
.replay-dashboard .b2-hero-beat-e { color: var(--text-mute); text-transform: uppercase; }
.replay-dashboard .b2-hero-mid-pop {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

.replay-dashboard .b2-hero-actions {
  display: flex;
  gap: 8px;
  padding: 0 32px 22px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* ============================================================
 * B v2 — SLIM UPLOAD BAR
 * ============================================================ */
.replay-dashboard .b2-uploadbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  background: rgba(15,20,34,0.6);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 28px;
}
.replay-dashboard .b2-uploadbar-icon {
  display: inline-flex;
  width: 28px; height: 28px;
  align-items: center; justify-content: center;
  background: rgba(86,194,255,0.12);
  border: 1px solid rgba(86,194,255,0.35);
  border-radius: 4px;
  color: var(--cyan);
  flex-shrink: 0;
}
.replay-dashboard .b2-uploadbar-text { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; }
.replay-dashboard .b2-uploadbar-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text);
}
.replay-dashboard .b2-uploadbar-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: 0.04em;
}
.replay-dashboard .b2-uploadbar-input {
  flex: 1;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 7px 12px;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  min-width: 200px;
}
.replay-dashboard .b2-uploadbar-input::placeholder { color: var(--text-mute); }
.replay-dashboard .b2-uploadbar-input:focus { outline: none; border-color: rgba(86,194,255,0.5); }

/* ============================================================
 * PTR PROMO CARD — links to #/coaching/ptr
 * ============================================================ */
.replay-dashboard .ptr-promo {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  background: rgba(251,191,36,0.05);
  border: 1px solid rgba(251,191,36,0.30);
  border-radius: 6px;
  margin-bottom: 20px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.replay-dashboard .ptr-promo:hover {
  background: rgba(251,191,36,0.10);
  border-color: rgba(251,191,36,0.55);
}
.replay-dashboard .ptr-promo-icon {
  display: inline-flex;
  width: 32px; height: 32px;
  align-items: center; justify-content: center;
  background: rgba(251,191,36,0.14);
  border: 1px solid rgba(251,191,36,0.40);
  border-radius: 5px;
  color: var(--amber);
  flex-shrink: 0;
  font-size: 17px;
  line-height: 1;
}
.replay-dashboard .ptr-promo-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.replay-dashboard .ptr-promo-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
}
.replay-dashboard .ptr-promo-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.replay-dashboard .ptr-promo-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.replay-dashboard .ptr-promo-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(251,191,36,0.15);
  border: 1px solid rgba(251,191,36,0.45);
  color: var(--amber);
  padding: 6px 13px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.15s, border-color 0.15s;
  cursor: pointer;
}
.replay-dashboard .ptr-promo:hover .ptr-promo-cta {
  background: rgba(251,191,36,0.24);
  border-color: rgba(251,191,36,0.70);
}
@media (max-width: 767px) {
  .replay-dashboard .ptr-promo {
    flex-wrap: wrap;
    gap: 10px;
  }
  .replay-dashboard .ptr-promo-sub { display: none; }
  .replay-dashboard .ptr-promo-cta { width: 100%; justify-content: center; }
}

/* ============================================================
 * B v2.5 — root + dashboard header
 * ============================================================ */
.replay-dashboard.dir-b25 { --b25-row-h: 52px; }
.replay-dashboard .b25-main { padding-bottom: 0; }

/* ============================================================
 * B v2.5 — DUAL COLUMN LAYOUT (authored from scratch)
 * ============================================================ */
.replay-dashboard .b25-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}
/* When logged out, only one column shows — fall back to single column */
.replay-dashboard .b25-cols.single-col {
  grid-template-columns: minmax(0, 1fr);
}

/* ============================================================
 * B v2.5 — FILTER BAR
 * ============================================================ */
.replay-dashboard .b25-filterbar {
  display: flex; flex-direction: column;
  background: rgba(8,12,22,0.7);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  backdrop-filter: blur(8px);
}
.replay-dashboard .b25-filterbar-row {
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap;
}
.replay-dashboard .b25-filterbar-group {
  display: flex; align-items: center; gap: 8px;
}
.replay-dashboard .b25-filterbar-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.replay-dashboard .b25-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.replay-dashboard .b25-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  color: var(--text-mute);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.replay-dashboard .b25-chip:hover:not(:disabled) {
  background: rgba(86,194,255,0.06);
  border-color: rgba(86,194,255,0.25);
  color: var(--text);
  transform: translateY(-1px);
}
.replay-dashboard .b25-chip.is-active {
  background: rgba(86,194,255,0.15);
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 0 1px rgba(86,194,255,0.3), 0 4px 12px rgba(86,194,255,0.15);
}
.replay-dashboard .b25-chip.is-empty:disabled { opacity: 0.3; cursor: not-allowed; }
.replay-dashboard .b25-chip-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-mute);
  background: rgba(0,0,0,0.3);
  padding: 1px 5px;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.replay-dashboard .b25-chip.is-active .b25-chip-count {
  color: var(--cyan);
  background: rgba(86,194,255,0.12);
}

/* FLIP morph helper class — JS adds this during pill activation animation */
.replay-dashboard .b25-chip.flip-animating {
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.replay-dashboard .b25-select {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text);
  padding: 4px 8px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  cursor: pointer;
}
.replay-dashboard .b25-select:hover { border-color: rgba(86,194,255,0.3); }
.replay-dashboard .b25-filterbar-spacer { flex: 1; }

/* Search */
.replay-dashboard .b25-search {
  display: flex; align-items: center;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  overflow: hidden;
  transition: width 0.2s, border-color 0.2s, background 0.2s;
  /* flex-shrink: 0 so the wrapper holds its declared 36/240px width even
   * when the filter row's flex-wrap: nowrap path runs out of space. The
   * row's `overflow-x: auto` (line 2314) handles overflow with a
   * horizontal scroll instead — without this rule the wrapper got
   * crushed below 36px and the magnifier icon clipped on the right. */
  flex: 0 0 36px;
  width: 36px;
  height: 28px;
  box-sizing: border-box;
}
.replay-dashboard .b25-search.is-open {
  flex: 0 0 240px;
  width: 240px;
  border-color: rgba(86,194,255,0.4);
  background: rgba(86,194,255,0.04);
}
.replay-dashboard .b25-search-btn {
  background: none; border: none; color: var(--text-mute);
  padding: 6px 10px; cursor: pointer; display: flex; align-items: center;
}
.replay-dashboard .b25-search-input {
  background: none; border: none; outline: none;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  flex: 1;
  width: 0;
  padding: 6px 0;
  transition: width 0.2s;
}
.replay-dashboard .b25-search.is-open .b25-search-input { width: auto; }
.replay-dashboard .b25-search-clear {
  background: none; border: none; color: var(--text-mute);
  padding: 0 8px; cursor: pointer; font-size: 14px;
}
.replay-dashboard .b25-search-clear:hover { color: var(--text); }

/* Active filters row */
.replay-dashboard .b25-active-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-wrap: wrap;
  animation: b25-slide-in 0.18s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes b25-slide-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.replay-dashboard .b25-active-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
}
.replay-dashboard .b25-active-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(86,194,255,0.15);
  border: 1px solid rgba(86,194,255,0.4);
  color: var(--cyan);
  padding: 3px 8px;
  border-radius: 12px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.12s;
}
.replay-dashboard .b25-active-pill:hover { background: rgba(86,194,255,0.25); }
.replay-dashboard .b25-active-x { opacity: 0.6; font-weight: 700; }
.replay-dashboard .b25-active-clear {
  background: none; border: none;
  color: var(--text-mute);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-decoration: underline;
  cursor: pointer;
  margin-left: auto;
}
.replay-dashboard .b25-active-clear:hover { color: var(--text); }

/* ============================================================
 * B v2.5 — SECTION
 * ============================================================ */
.replay-dashboard .b25-section { margin-bottom: 32px; }
.replay-dashboard .b25-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px;
}
.replay-dashboard .b25-section-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 600;
}
.replay-dashboard .b25-section-count {
  color: var(--cyan);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.replay-dashboard .b25-section-of {
  color: var(--text-mute);
  font-weight: 400;
  font-size: 10px;
  margin-left: 2px;
}

/* ============================================================
 * B v2.5 — LIST SHELL: rows on left, timeline rail on right
 * ============================================================ */
.replay-dashboard .b25-list-shell {
  display: flex; gap: 0;
  background: rgba(8,12,22,0.4);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  max-height: 640px;
  scrollbar-width: thin;
  scrollbar-color: rgba(86,194,255,0.2) transparent;
}
.replay-dashboard .b25-list-shell::-webkit-scrollbar { width: 8px; }
.replay-dashboard .b25-list-shell::-webkit-scrollbar-track { background: transparent; }
.replay-dashboard .b25-list-shell::-webkit-scrollbar-thumb {
  background: rgba(86,194,255,0.15);
  border-radius: 4px;
}
.replay-dashboard .b25-list-shell::-webkit-scrollbar-thumb:hover { background: rgba(86,194,255,0.3); }
.replay-dashboard .b25-vlist {
  flex: 1; min-width: 0;
  position: relative;
}
.replay-dashboard .b25-vlist-rows {
  position: absolute; top: 0; left: 0; right: 0;
}

/* ============================================================
 * B v2.5 — ROW (52px dense list row)
 * ============================================================ */
.replay-dashboard .b25-row {
  display: grid;
  grid-template-columns: 32px minmax(120px, 1fr) 50px minmax(120px, 1fr) 200px minmax(140px, 1.2fr) 56px 100px 100px;
  align-items: center;
  height: var(--b25-row-h);
  padding: 0 14px 0 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  background: transparent;
  position: relative;
  cursor: pointer;
  gap: 10px;
  transition: background 0.12s;
  contain: layout style;
  /* Reveal stagger: base is fully visible — animation only fires when
   * `.is-revealing` is added by the virtualizer once per ID. */
  opacity: 1;
}
.replay-dashboard .b25-row:hover {
  background: rgba(86,194,255,0.04);
}
.replay-dashboard .b25-row.is-pinned {
  background: rgba(86,194,255,0.06);
  box-shadow: inset 3px 0 0 var(--cyan);
}

/* Variant: pro library hides mistakes column, replaces with tournament */
.replay-dashboard.dir-b25 .b25-row:not(.is-win):not(.is-loss),
.replay-dashboard .dir-b25 .b25-row:not(.is-win):not(.is-loss) {
  grid-template-columns: 56px minmax(120px, 1fr) 50px minmax(120px, 1fr) 200px minmax(140px, 1.2fr) 140px 100px 100px;
}

/* Reveal stagger gating — animation only plays once per row, when JS adds
 * `.is-revealing`. The base row stays visible. */
.replay-dashboard .b25-row.is-revealing {
  animation: b25-row-decode 0.42s cubic-bezier(0.2, 0, 0, 1) backwards;
}
@keyframes b25-row-decode {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Color rail (left edge) */
.replay-dashboard .b25-row-rail {
  position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 2px;
  background: rgba(255,255,255,0.1);
  border-radius: 1px;
  transition: background 0.18s, width 0.18s;
}
.replay-dashboard .b25-row.is-win .b25-row-rail { background: rgba(74,222,128,0.5); }
.replay-dashboard .b25-row.is-loss .b25-row-rail { background: rgba(248,113,113,0.5); }
.replay-dashboard .b25-row:hover .b25-row-rail { width: 3px; }
.replay-dashboard .b25-row.is-win:hover .b25-row-rail { background: var(--green); box-shadow: 0 0 8px rgba(74,222,128,0.6); }
.replay-dashboard .b25-row.is-loss:hover .b25-row-rail { background: var(--red); box-shadow: 0 0 8px rgba(248,113,113,0.6); }

/* Streak shimmer — only fires when `.streak-win` / `.streak-loss` is set
 * by JS (e.g. Most-recent sort with 3+ contiguous results). */
.replay-dashboard .b25-row.streak-win .b25-row-rail {
  background: linear-gradient(180deg, rgba(74,222,128,0.3), var(--green), rgba(74,222,128,0.3));
  background-size: 100% 200%;
  animation: b25-streak-flow 2.4s linear infinite;
}
.replay-dashboard .b25-row.streak-loss .b25-row-rail {
  background: linear-gradient(180deg, rgba(248,113,113,0.3), var(--red), rgba(248,113,113,0.3));
  background-size: 100% 200%;
  animation: b25-streak-flow 2.4s linear infinite;
}
@keyframes b25-streak-flow {
  0%   { background-position: 0% 0%; }
  100% { background-position: 0% 200%; }
}

/* Rank / W/L letter */
.replay-dashboard .b25-row-rank {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-mute);
  letter-spacing: 0.04em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.replay-dashboard .b25-row.is-win .b25-row-rank { color: var(--green); }
.replay-dashboard .b25-row.is-loss .b25-row-rank { color: var(--red); }

/* Player columns */
.replay-dashboard .b25-row-p {
  display: flex; align-items: baseline; gap: 6px;
  min-width: 0;
}
.replay-dashboard .b25-row-p-r { justify-content: flex-end; }
.replay-dashboard .b25-row-pname {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.replay-dashboard .b25-row-p[data-race="P"] .b25-row-pname { color: #56c2ff; }
.replay-dashboard .b25-row-p[data-race="T"] .b25-row-pname { color: #fbbf24; }
.replay-dashboard .b25-row-p[data-race="Z"] .b25-row-pname { color: #a24dff; }
.replay-dashboard .b25-row-pmmr {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.replay-dashboard .b25-row-tri { color: var(--green); font-size: 9px; }

/* VS column */
.replay-dashboard .b25-row-vs {
  display: flex; justify-content: center; align-items: center;
}
.replay-dashboard .b25-row-vs-mu {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-mute);
  background: rgba(255,255,255,0.04);
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.06em;
}

/* Map cell */
.replay-dashboard .b25-row-map {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
.replay-dashboard .b25-row-map-thumb {
  width: 32px; height: 22px; border-radius: 3px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  background: hsl(var(--mh, 200), 60%, 12%);
}
.replay-dashboard .b25-row-map-thumb svg,
.replay-dashboard .b25-row-map-thumb canvas { width: 100%; height: 100%; display: block; }
.replay-dashboard .b25-row-map-meta { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.replay-dashboard .b25-row-map-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.replay-dashboard .b25-row-map-dur {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--text-mute);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* Hover scrub overlay on map thumb */
.replay-dashboard .b25-scrub {
  position: absolute; inset: 0;
  pointer-events: none;
}
.replay-dashboard .b25-scrub-sweep {
  position: absolute; top: 0; bottom: 0;
  left: -40%; width: 40%;
  animation: b25-sweep 1.4s ease-in-out infinite;
}
@keyframes b25-sweep {
  0%   { left: -40%; }
  100% { left: 100%; }
}
.replay-dashboard .b25-scrub-dot {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
  opacity: 0.9;
}
.replay-dashboard .b25-scrub-dot-1 { animation: b25-dot-1 2.2s ease-in-out infinite; }
.replay-dashboard .b25-scrub-dot-2 { animation: b25-dot-2 2.6s ease-in-out infinite 0.3s; }
.replay-dashboard .b25-scrub-dot-3 { animation: b25-dot-3 2.4s ease-in-out infinite 0.6s; }
@keyframes b25-dot-1 {
  0%   { left: 20%; top: 80%; opacity: 0; }
  10%  { opacity: 0.9; }
  100% { left: 70%; top: 20%; opacity: 0; }
}
@keyframes b25-dot-2 {
  0%   { left: 70%; top: 70%; opacity: 0; }
  10%  { opacity: 0.9; }
  100% { left: 30%; top: 30%; opacity: 0; }
}
@keyframes b25-dot-3 {
  0%   { left: 50%; top: 30%; opacity: 0; }
  10%  { opacity: 0.9; }
  100% { left: 50%; top: 80%; opacity: 0; }
}

/* Build / archetype */
.replay-dashboard .b25-row-build {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}

/* Replay-quality pill (repurposes the build slot on the user's own rows):
   HQ = pysc2-enriched pathing done, LQ = queued/pending (+ ETA). */
.replay-dashboard .b25-row-q {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.4;
}
.replay-dashboard .b25-row-q-hq {
  color: var(--green, #4ade80);
  background: rgba(74,222,128,0.12);
  border: 1px solid rgba(74,222,128,0.28);
}
.replay-dashboard .b25-row-q-lq {
  color: var(--amber, #fbbf24);
  background: rgba(251,191,36,0.10);
  border: 1px solid rgba(251,191,36,0.25);
}
/* PTR build chip in the list-row archetype slot. Orange to match the
   hero-card .b25-hero-q-ptr badge — signals "experimental build" so the
   uncalibrated PTR MMR shown on the row doesn't read as a real ladder MMR. */
.replay-dashboard .b25-row-q-ptr {
  color: #ffa94d;
  background: rgba(255,169,77,0.14);
  border: 1px solid rgba(255,169,77,0.36);
}

/* Mistakes */
.replay-dashboard .b25-row-mist {
  display: flex; justify-content: center;
}
.replay-dashboard .b25-row-mist-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--amber);
  background: rgba(251,191,36,0.1);
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 700;
}
.replay-dashboard .b25-row-mist-clean {
  color: var(--green);
  font-size: 12px;
  opacity: 0.6;
}

/* Tournament */
.replay-dashboard .b25-row-tour {
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Date */
.replay-dashboard .b25-row-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: 0.04em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Result column */
.replay-dashboard .b25-row-result {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
}
.replay-dashboard .b25-row-result.is-win { color: var(--green); }
.replay-dashboard .b25-row-result.is-loss { color: var(--red); }
.replay-dashboard .b25-row-result.is-watch { color: var(--cyan); }
.replay-dashboard .b25-row-result-text { white-space: nowrap; }
.replay-dashboard .b25-row-delta {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  padding: 1px 5px;
  border-radius: 3px;
}
.replay-dashboard .b25-row-delta.up { color: var(--green); background: rgba(74,222,128,0.1); }
.replay-dashboard .b25-row-delta.down { color: var(--red); background: rgba(248,113,113,0.1); }

.replay-dashboard .b25-row-pin-badge {
  position: absolute;
  top: 4px; right: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--cyan);
  background: rgba(86,194,255,0.15);
  padding: 1px 4px;
  border-radius: 2px;
}

/* ============================================================
 * B v2.5 — TIMELINE DENSITY RAIL
 * ============================================================ */
@media (max-width: 720px) {
  .replay-dashboard,
  .replay-dashboard.dir-b25 {
    --b25-row-h: 156px;
  }

  .replay-dashboard .b25-list-shell {
    max-height: min(72vh, 720px);
  }

  .replay-dashboard .b25-rail-wrap {
    display: none;
  }

  .replay-dashboard .b25-row,
  .replay-dashboard.dir-b25 .b25-row:not(.is-win):not(.is-loss),
  .replay-dashboard .dir-b25 .b25-row:not(.is-win):not(.is-loss) {
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    grid-template-rows: 24px 22px 36px 24px;
    align-items: center;
    height: calc(var(--b25-row-h) - 8px);
    padding: 12px 12px 12px 14px;
    gap: 6px 10px;
    border: 1px solid rgba(255,255,255,0.07);
    border-left: 0;
    border-radius: 6px;
    margin: 4px 0;
    background: rgba(15,20,34,0.78);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  }

  .replay-dashboard .b25-row:hover {
    background: rgba(15,20,34,0.92);
  }

  .replay-dashboard .b25-row-rail {
    top: 10px;
    bottom: 10px;
    width: 3px;
  }

  .replay-dashboard .b25-row-rank {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    font-size: 11px;
  }

  .replay-dashboard .b25-row-p:not(.b25-row-p-r) {
    grid-column: 2;
    grid-row: 1;
  }

  .replay-dashboard .b25-row-p-r {
    grid-column: 2;
    grid-row: 2;
    justify-content: flex-start;
  }

  .replay-dashboard .b25-row-vs {
    display: none;
  }

  .replay-dashboard .b25-row-result {
    grid-column: 3;
    grid-row: 1;
    justify-content: flex-end;
    align-self: center;
  }

  .replay-dashboard .b25-row-date {
    grid-column: 3;
    grid-row: 2;
    align-self: center;
    text-align: right;
    white-space: nowrap;
  }

  .replay-dashboard .b25-row-map {
    grid-column: 1 / 4;
    grid-row: 3;
    min-width: 0;
  }

  .replay-dashboard .b25-row-map-thumb {
    width: 44px;
    height: 28px;
  }

  .replay-dashboard .b25-row-map-name {
    font-size: 12px;
  }

  .replay-dashboard .b25-row-build {
    grid-column: 1 / 3;
    grid-row: 4;
    align-self: center;
    line-height: 1.2;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .replay-dashboard .b25-row-mist,
  .replay-dashboard .b25-row-tour {
    grid-column: 3;
    grid-row: 4;
    justify-self: end;
    align-self: center;
    max-width: 108px;
    text-align: right;
  }

  .replay-dashboard .b25-row-pin-badge {
    top: auto;
    right: 10px;
    bottom: 6px;
  }
}

.replay-dashboard .b25-rail-wrap {
  position: sticky;
  top: 0;
  align-self: flex-start;
  width: 56px;
  height: 640px;
  flex-shrink: 0;
  border-left: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.2);
}
.replay-dashboard .b25-rail-density {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: flex-end;
  padding: 8px 6px 8px 0;
  cursor: ns-resize;
}
.replay-dashboard .b25-rail-bar {
  background: var(--cyan);
  border-radius: 1px 0 0 1px;
  margin-bottom: 1px;
  transition: opacity 0.15s, width 0.15s;
}
.replay-dashboard .b25-rail-thumb {
  position: absolute;
  right: 0;
  width: 100%;
  background: rgba(86,194,255,0.12);
  border-left: 2px solid var(--cyan);
  pointer-events: none;
  transition: top 0.05s linear;
}
.replay-dashboard .b25-rail-labels {
  position: absolute;
  left: 4px; top: 0; bottom: 0;
  pointer-events: none;
}
.replay-dashboard .b25-rail-label {
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  color: var(--text-mute);
  letter-spacing: 0.06em;
  transform: translateY(-50%);
  background: rgba(8,12,22,0.6);
  padding: 1px 3px;
  border-radius: 2px;
}
.replay-dashboard .b25-rail-tooltip {
  position: absolute;
  right: 100%; margin-right: 8px;
  background: rgba(20,26,44,0.95);
  border: 1px solid rgba(86,194,255,0.4);
  color: var(--cyan);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  transform: translateY(-50%);
  letter-spacing: 0.04em;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* ============================================================
 * B v2.5 — CMD-K PALETTE
 * (backdrop is `position:fixed`; lives outside `.replay-dashboard` via JS,
 * but the prototype's selectors stay nested for parity. The backdrop's
 * own root is rendered inside the dashboard tree.)
 * ============================================================ */
.replay-dashboard .b25-cmdk-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: 14vh;
  animation: b25-cmdk-fade 0.18s ease;
}
@keyframes b25-cmdk-fade { from { opacity: 0; } to { opacity: 1; } }
.replay-dashboard .b25-cmdk-panel {
  width: 580px; max-width: 90vw;
  background: rgba(15,20,34,0.96);
  border: 1px solid rgba(86,194,255,0.3);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
  animation: b25-cmdk-pop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes b25-cmdk-pop {
  from { opacity: 0; transform: translateY(-12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.replay-dashboard .b25-cmdk-input-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: var(--text-mute);
}
.replay-dashboard .b25-cmdk-input {
  flex: 1;
  background: none; border: none; outline: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--text);
}
.replay-dashboard .b25-cmdk-input::placeholder { color: var(--text-mute); }
.replay-dashboard .b25-cmdk-esc {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-mute);
  background: rgba(255,255,255,0.06);
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}
.replay-dashboard .b25-cmdk-results { max-height: 360px; overflow-y: auto; padding: 6px; }
.replay-dashboard .b25-cmdk-empty {
  padding: 24px; text-align: center;
  color: var(--text-mute);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.replay-dashboard .b25-cmdk-item {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.08s;
}
.replay-dashboard .b25-cmdk-item.is-sel { background: rgba(86,194,255,0.1); box-shadow: inset 2px 0 0 var(--cyan); }
.replay-dashboard .b25-cmdk-icon {
  font-family: 'JetBrains Mono', monospace;
  color: var(--cyan);
  text-align: center;
  font-size: 14px;
}
.replay-dashboard .b25-cmdk-item .b25-cmdk-icon {
  grid-column: 1; grid-row: 1;
}
.replay-dashboard .b25-cmdk-item .b25-cmdk-label {
  grid-column: 2; grid-row: 1;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.replay-dashboard .b25-cmdk-item .b25-cmdk-sub {
  grid-column: 2; grid-row: 2;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-mute);
  margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.replay-dashboard .b25-cmdk-item .b25-cmdk-kind {
  grid-column: 3; grid-row: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: rgba(255,255,255,0.04);
  padding: 2px 6px;
  border-radius: 3px;
  justify-self: end;
}
.replay-dashboard .b25-cmdk-foot {
  display: flex; gap: 16px;
  padding: 8px 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--text-mute);
  letter-spacing: 0.06em;
}
.replay-dashboard .b25-cmdk-foot kbd {
  background: rgba(255,255,255,0.06);
  padding: 1px 4px;
  border-radius: 2px;
  font-family: inherit;
  margin-right: 4px;
}

/* ============================================================
 * B v2.5 — PIN TRAY
 * ============================================================ */
.replay-dashboard .b25-pin-tray {
  position: sticky;
  bottom: 0;
  margin: 0 -32px;
  padding: 12px 32px;
  background: rgba(8,12,22,0.94);
  border-top: 1px solid rgba(86,194,255,0.3);
  backdrop-filter: blur(12px);
  z-index: 50;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.5);
  animation: b25-tray-up 0.24s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes b25-tray-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.replay-dashboard .b25-pin-tray-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px;
}
.replay-dashboard .b25-pin-tray-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 700;
}
.replay-dashboard .b25-pin-tray-cmp {
  background: var(--cyan); color: #04111f;
  border: none;
  padding: 5px 12px;
  border-radius: 4px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.replay-dashboard .b25-pin-tray-clear {
  background: none; border: none;
  color: var(--text-mute);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-decoration: underline;
  cursor: pointer;
  margin-left: auto;
}
.replay-dashboard .b25-pin-tray-items { display: flex; gap: 8px; flex-wrap: wrap; }
.replay-dashboard .b25-pin-item {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(86,194,255,0.08);
  border: 1px solid rgba(86,194,255,0.3);
  padding: 4px 10px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}
.replay-dashboard .b25-pin-item-mu { color: var(--cyan); font-weight: 700; }
.replay-dashboard .b25-pin-item-name { color: var(--text); font-family: 'Rajdhani', sans-serif; font-weight: 600; }
.replay-dashboard .b25-pin-item-map { color: var(--text-mute); }
.replay-dashboard .b25-pin-item-x {
  background: none; border: none; color: var(--text-mute);
  cursor: pointer; padding: 0; font-size: 14px; line-height: 1;
}
.replay-dashboard .b25-pin-item-x:hover { color: var(--red); }

/* ============================================================
 * B v2.5 — TOAST (authored from scratch — for COMPARE button feedback)
 * ============================================================ */
.replay-dashboard .b25-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 20, 34, 0.96);
  color: #d8dde6;
  padding: 12px 20px;
  border-radius: 6px;
  border: 1px solid rgba(86, 194, 255, 0.4);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.5px;
  z-index: 1001;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.replay-dashboard .b25-toast.is-visible { opacity: 1; }

/* ============================================================
 * B v2.5 — EMPTY-STATE (authored from scratch — stats cards & lists)
 * ============================================================ */
.replay-dashboard .b25-empty {
  padding: 28px 20px;
  text-align: center;
  color: rgba(216, 221, 230, 0.5);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
}

/* ============================================================
 * HERO STRIP — three condensed featured-replay cards.
 *
 * Replaces the prototype's full-width B2_HeroFeatured (the .b2-hero-*
 * styles still exist above for any other consumers, but the dashboard
 * no longer renders them). Three cards in a 1fr grid; each card has
 * a faded map background, tight metadata strip, two player rows, and
 * a Watch button. APM/SPM/EAPM placeholders are gone.
 * ============================================================ */
.replay-dashboard .b25-hero-strip {
  margin: 4px 0 24px;
}
.replay-dashboard .b25-hero-strip .b-section-tag {
  margin-bottom: 8px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.replay-dashboard .b25-hero-cycle {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(86, 194, 255, 0.85);
  background: rgba(86, 194, 255, 0.08);
  border: 1px solid rgba(86, 194, 255, 0.30);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.replay-dashboard .b25-hero-cycle:hover {
  background: rgba(86, 194, 255, 0.16);
  border-color: rgba(86, 194, 255, 0.55);
  color: rgba(86, 194, 255, 1);
}
.replay-dashboard .b25-hero-cycle:active {
  transform: translateY(1px);
}
.replay-dashboard .b25-hero-cycle:focus-visible {
  outline: 2px solid rgba(86, 194, 255, 0.6);
  outline-offset: 2px;
}
/* Per-card cycle button — sits inline at the end of the card's top-right
   meta row, after the duration text. Amber to match the YOUR LATEST accent
   so it reads as a control on the user's own card (not the pros). Was
   absolutely-positioned at top-right but that collided with the duration. */
.replay-dashboard .b25-hero-card-cycle {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
  border: 1px solid rgba(251, 191, 36, 0.30);
  background: rgba(251, 191, 36, 0.08);
  color: rgba(251, 191, 36, 0.85);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  padding: 0;
}
.replay-dashboard .b25-hero-card-cycle:hover {
  background: rgba(251, 191, 36, 0.18);
  border-color: rgba(251, 191, 36, 0.55);
  color: rgba(251, 191, 36, 1);
}
.replay-dashboard .b25-hero-card-cycle:active { transform: translateY(1px); }
.replay-dashboard .b25-hero-card-cycle:focus-visible {
  outline: 2px solid rgba(251, 191, 36, 0.6);
  outline-offset: 2px;
}
.replay-dashboard .b25-hero-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.replay-dashboard .b25-hero-strip-empty .b25-empty {
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: 8px;
}
.replay-dashboard .b25-hero-card {
  position: relative;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(15,20,34,0.85), rgba(8,12,22,0.9));
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  min-height: 200px;
  display: flex; flex-direction: column;
  /* Auto-cycle fade: every render of a card animates from translucent +
     slightly offset, so when dashboard.js auto-advances the pro pool the
     swap looks intentional rather than abrupt. The animation runs once
     per render; the manual "Next →" click triggers the same effect.
     prefers-reduced-motion users opt out via the override below. */
  animation: b25-hero-card-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes b25-hero-card-in {
  from { opacity: 0; transform: translateY(6px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .replay-dashboard .b25-hero-card { animation: none; }
}
/* When the auto-cycle is paused (hover or tab hidden), gently dim the
   "NEXT ›" affordance so the user knows manual control is in their hands. */
.replay-dashboard .b25-hero-strip[data-autocycle="paused"] .b25-hero-cycle {
  opacity: 0.55;
}
.replay-dashboard .b25-hero-card:hover {
  transform: translateY(-2px);
  border-color: rgba(86,194,255,0.35);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(86,194,255,0.15);
}
/* User's own latest replay — amber accent so it reads as "yours" at a glance
   and stays distinct from the cyan-themed pro featured cards. */
.replay-dashboard .b25-hero-card.is-mine {
  border-color: rgba(251,191,36,0.30);
}
.replay-dashboard .b25-hero-card.is-mine:hover {
  border-color: rgba(251,191,36,0.55);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(251,191,36,0.18);
}
.replay-dashboard .b25-hero-tag {
  display: inline-flex; align-items: center;
  padding: 2px 7px;
  background: rgba(251,191,36,0.12);
  border: 1px solid rgba(251,191,36,0.45);
  border-radius: 3px;
  color: #fbbf24;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.replay-dashboard .b25-hero-card .b25-hero-bg {
  position: absolute; inset: 0;
  opacity: 0.32;
  pointer-events: none;
  filter: saturate(1.05) contrast(1.05);
}
/* Replay-quality corner badge — anchored to .b25-hero-bg (which is
   `position:absolute; inset:0`, so it's a valid containing block). */
.replay-dashboard .b25-hero-q {
  position: absolute;
  top: 6px; right: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 6px;
  border-radius: 3px;
  pointer-events: none;
  z-index: 2;
}
.replay-dashboard .b25-hero-q-hq {
  color: var(--green, #4ade80);
  background: rgba(74,222,128,0.12);
  border: 1px solid rgba(74,222,128,0.28);
}
.replay-dashboard .b25-hero-q-lq {
  color: var(--amber, #fbbf24);
  background: rgba(251,191,36,0.10);
  border: 1px solid rgba(251,191,36,0.25);
}
/* PTR build badge — placed at TOP-LEFT (opposite corner from HQ/LQ) so a
   replay enriched with pysc2 AND on PTR shows both badges without
   overlap. Orange to signal "experimental build" without being alarming;
   distinct enough from amber (LQ) that the two read differently when the
   user glances at a card. pointer-events:auto so the tooltip title fires
   on hover (HQ/LQ are pure decoration so they stay pointer-events:none). */
.replay-dashboard .b25-hero-q-ptr {
  top: 6px; right: auto; left: 8px;
  color: #ffa94d;
  background: rgba(255,169,77,0.14);
  border: 1px solid rgba(255,169,77,0.36);
  letter-spacing: 0.08em;
  pointer-events: auto;
  cursor: help;
}
.replay-dashboard .b25-hero-card .b25-hero-bg .mapthumb {
  width: 100% !important; height: 100% !important;
  border-radius: 0;
}
.replay-dashboard .b25-hero-card .b25-hero-bg .mapthumb img,
.replay-dashboard .b25-hero-card .b25-hero-bg .mapthumb svg {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.replay-dashboard .b25-hero-card .b25-hero-fade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,12,22,0.10) 0%, rgba(8,12,22,0.78) 70%, rgba(8,12,22,0.95) 100%);
  pointer-events: none;
}
.replay-dashboard .b25-hero-card .b25-hero-content {
  position: relative;
  display: flex; flex-direction: column;
  gap: 12px;
  padding: 14px 14px 12px;
  flex: 1;
}

/* Top meta row: matchup + date on the left, map name + duration on the right. */
.replay-dashboard .b25-hero-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
}
.replay-dashboard .b25-hero-meta-l,
.replay-dashboard .b25-hero-meta-r {
  display: inline-flex; align-items: center; gap: 8px;
}
.replay-dashboard .b25-hero-date { color: var(--text-mute); }
.replay-dashboard .b25-hero-map-name {
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
}
.replay-dashboard .b25-hero-dur {
  color: var(--cyan);
  font-weight: 600;
}

/* Player rows */
.replay-dashboard .b25-hero-players {
  display: flex; flex-direction: column;
  gap: 8px;
  margin-top: auto;
}
.replay-dashboard .b25-hero-player {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: rgba(8,12,22,0.55);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 5px;
  position: relative;
}
/* `.is-win` row tinting + the WIN badge styling were removed: the hero strip
   is meant to invite a watch, and revealing the winner up-front spoiled the
   pro game. Outcomes are still revealed in the row-level Pro Library list. */
.replay-dashboard .b25-hero-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: 4px;
  border: 1px solid currentColor;
  background: rgba(0,0,0,0.25);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: 14px;
}
.replay-dashboard .b25-hero-player-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.replay-dashboard .b25-hero-name-row {
  display: flex; align-items: center; gap: 8px;
}
.replay-dashboard .b25-hero-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.replay-dashboard .b25-hero-win {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: #4ade80;
  background: rgba(74,222,128,0.1);
  border: 1px solid rgba(74,222,128,0.4);
  padding: 1px 6px;
  border-radius: 3px;
}
.replay-dashboard .b25-hero-sub {
  display: flex; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-mute);
  white-space: nowrap; overflow: hidden;
}
.replay-dashboard .b25-hero-mmr {
  color: #fbbf24;
  font-weight: 600;
}
.replay-dashboard .b25-hero-build {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}

/* Watch button */
.replay-dashboard .b25-hero-watch {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  align-self: stretch;
  padding: 8px 12px;
  background: rgba(86,194,255,0.12);
  border: 1px solid rgba(86,194,255,0.35);
  border-radius: 4px;
  color: var(--cyan);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: all 0.15s;
}
.replay-dashboard .b25-hero-watch:hover {
  background: rgba(86,194,255,0.2);
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px rgba(86,194,255,0.3), 0 4px 12px rgba(86,194,255,0.18);
}
.replay-dashboard .b25-hero-watch .play-pill {
  display: inline-flex; align-items: center;
  color: var(--cyan);
}

/* Responsive: collapse to 2 cols then 1 col on narrower viewports. */
@media (max-width: 1100px) {
  .replay-dashboard .b25-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .replay-dashboard .b25-hero-card:nth-child(3) { display: none; }
}
@media (max-width: 720px) {
  .replay-dashboard .b25-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .replay-dashboard .b25-hero-card:nth-child(2),
  .replay-dashboard .b25-hero-card:nth-child(3) { display: none; }
}

/* ============================================================
 * STATS CARDS — authored from scratch (the prototype's v1 .b-card
 * + .b-mmr-* / .b-compass-* / .b-learn-* rules were lost). Three-card
 * row uses the existing .b-grid-3 grid; cards key off .b-card +
 * .b25-stats-* utility classes emitted by stats-cards.js.
 * ============================================================ */
.replay-dashboard .b25-stats-grid {
  margin-bottom: 24px;
}
.replay-dashboard .b-card {
  background: linear-gradient(180deg, rgba(15,20,34,0.85), rgba(8,12,22,0.8));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 138px;
  position: relative;
  overflow: hidden;
}
.replay-dashboard .b-card::before {
  content: ''; position: absolute; left: 0; top: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(86,194,255,0.25), transparent);
}
.replay-dashboard .b-card-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.replay-dashboard .b-card-num {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1;
}

/* Lobby promo card (left slot). Cool teal accent for "live / community"
 * vibe so it sits visually distinct from the warm BW promo and the
 * accent-shifting feature carousel. Whole card is clickable. */
.replay-dashboard .b25-stats-lobby {
  position: relative;
  cursor: pointer;
  text-align: left;
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.45), rgba(8, 47, 73, 0.4));
  border: 1px solid rgba(94, 234, 212, 0.30);
  color: var(--text);
  font: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.replay-dashboard .b25-stats-lobby::before {
  background: linear-gradient(90deg, transparent, rgba(94, 234, 212, 0.5), transparent);
  height: 2px;
}
.replay-dashboard .b25-stats-lobby:hover {
  transform: translateY(-1px);
  border-color: rgba(94, 234, 212, 0.55);
  box-shadow: 0 6px 18px rgba(15, 118, 110, 0.35);
}
.replay-dashboard .b25-stats-lobby:focus-visible {
  outline: 2px solid rgba(94, 234, 212, 0.7);
  outline-offset: 2px;
}
.replay-dashboard .b25-stats-lobby-eyebrow {
  color: #5eead4;
}
.replay-dashboard .b25-stats-lobby.has-live .b25-stats-lobby-eyebrow {
  color: #fb7185;  /* live red — pulls eye to the active state */
}
.replay-dashboard .b25-stats-lobby.has-live .b25-stats-lobby-eyebrow::before {
  content: '●';
  display: inline-block;
  margin-right: 6px;
  color: #fb7185;
  animation: b25-stats-lobby-pulse 1.6s ease-in-out infinite;
}
@keyframes b25-stats-lobby-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
.replay-dashboard .b25-stats-lobby-headline {
  font-family: 'Rajdhani', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  color: #f0fdfa;
}
.replay-dashboard .b25-stats-lobby-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(240, 253, 250, 0.75);
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.replay-dashboard .b25-stats-lobby.is-loading .b25-stats-lobby-headline,
.replay-dashboard .b25-stats-lobby.is-loading .b25-stats-lobby-meta {
  opacity: 0.55;
}
.replay-dashboard .b25-stats-lobby-cta {
  margin-top: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5eead4;
}
.replay-dashboard .b25-stats-lobby.has-live .b25-stats-lobby-cta {
  color: #fda4af;
}

/* Generic carousel slot — wraps multiple cards in a single grid cell,
 * alternating between them. Used by both the left slot (Notes ↔ Stardex)
 * and the middle slot (Lobby ↔ Brood War). Both cards mount; the inactive
 * one has `display: none` so the wrapper sizes vertically to the active
 * card (and any extra cell height from grid stretching lands on the
 * active card via flex: 1, so the visible card always fills the cell —
 * fixes the height misalignment where the static BW card next to a
 * carousel wrapper used to leave a gap below the active wrapped card).
 *
 * Each card carries its own dot row (appended in JS after the CTA) — when
 * the card is hidden its dots hide along with it, so the dot affordance
 * always sits aligned with the visible card's bottom edge. Same shape the
 * right-slot feature carousel uses, just per-card instead of per-shell. */
.replay-dashboard .b25-stats-carousel {
  position: relative;
  display: flex;
  flex-direction: column;
}
.replay-dashboard .b25-stats-carousel > .b-card {
  /* flex: 1 — visible card fills the wrapper height even when the grid
     row stretches to match a taller sibling slot. The hidden sibling
     (display: none) is out of the flex flow so the visible card takes
     all of the wrapper's height. */
  flex: 1;
}
.replay-dashboard .b25-stats-carousel-dots {
  display: flex; gap: 5px;
  margin-top: 0;
}
.replay-dashboard .b25-stats-carousel-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  transition: background-color 0.25s ease, transform 0.25s ease;
  cursor: pointer;
}
.replay-dashboard .b25-stats-carousel-dot.is-active {
  transform: scale(1.25);
}
/* Per-slide accent: dot inherits the active card's color so the carousel
 * reads as one rotating slot in distinct accent palettes. The lobby
 * card uses two — teal for the idle pitch and rose for the live-lobby
 * state — because the eyebrow + CTA flip color in the live state too. */
.replay-dashboard .b25-stats-lobby .b25-stats-carousel-dot.is-active {
  background: #5eead4;
}
.replay-dashboard .b25-stats-lobby.has-live .b25-stats-carousel-dot.is-active {
  background: #fb7185;
}
.replay-dashboard .b25-stats-notes-promo .b25-stats-carousel-dot.is-active {
  background: #bef264;
}
.replay-dashboard .b25-stats-stardex-promo .b25-stats-carousel-dot.is-active {
  background: #fda4af;
}
.replay-dashboard .b25-stats-bw-promo .b25-stats-carousel-dot.is-active {
  background: #fcd34d;
}

/* Notes promo card — second slide of the left carousel. Lime accent on a
 * slate body, structurally similar to the right-slot feature carousel
 * (title / sub / CTA / dots) so the two halves of the dashboard read as
 * coherent. Whole card is clickable and deep-links to #notes. */
.replay-dashboard .b25-stats-notes-promo {
  position: relative;
  cursor: pointer;
  text-align: left;
  background:
    linear-gradient(135deg, rgba(101, 163, 13, 0.20), rgba(30, 41, 59, 0.55) 65%),
    var(--card-bg, #161b22);
  border: 1px solid rgba(190, 242, 100, 0.30);
  color: var(--text);
  font: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.replay-dashboard .b25-stats-notes-promo::before {
  background: linear-gradient(90deg, transparent, rgba(190, 242, 100, 0.55), transparent);
  height: 2px;
}
.replay-dashboard .b25-stats-notes-promo:hover {
  transform: translateY(-1px);
  border-color: rgba(190, 242, 100, 0.55);
  box-shadow: 0 6px 18px rgba(101, 163, 13, 0.25);
}
.replay-dashboard .b25-stats-notes-promo:focus-visible {
  outline: 2px solid rgba(190, 242, 100, 0.7);
  outline-offset: 2px;
}
.replay-dashboard .b25-stats-notes-promo-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: #f7fee7;
}
.replay-dashboard .b25-stats-notes-promo-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(247, 254, 231, 0.72);
  line-height: 1.55;
  letter-spacing: 0.01em;
}
.replay-dashboard .b25-stats-notes-promo-cta {
  margin-top: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #bef264;
}

/* Stardex install promo — third slide of the left carousel. Rose accent
 * on a slate body, structurally identical to the notes-promo (title /
 * sub / CTA / dots) but tinted distinct so the third carousel tick reads
 * as visibly different from the lime notes slide. Whole card is
 * clickable; the JS click handler fires the sc2tree://install-addon
 * protocol URL with a visibility-state fallback toast. */
.replay-dashboard .b25-stats-stardex-promo {
  position: relative;
  cursor: pointer;
  text-align: left;
  background:
    linear-gradient(135deg, rgba(244, 63, 94, 0.18), rgba(30, 41, 59, 0.55) 65%),
    var(--card-bg, #161b22);
  border: 1px solid rgba(244, 114, 182, 0.30);
  color: var(--text);
  font: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.replay-dashboard .b25-stats-stardex-promo::before {
  background: linear-gradient(90deg, transparent, rgba(244, 114, 182, 0.55), transparent);
  height: 2px;
}
.replay-dashboard .b25-stats-stardex-promo:hover {
  transform: translateY(-1px);
  border-color: rgba(244, 114, 182, 0.55);
  box-shadow: 0 6px 18px rgba(244, 63, 94, 0.25);
}
.replay-dashboard .b25-stats-stardex-promo:focus-visible {
  outline: 2px solid rgba(244, 114, 182, 0.7);
  outline-offset: 2px;
}
.replay-dashboard .b25-stats-stardex-promo-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: #fff1f2;
}
.replay-dashboard .b25-stats-stardex-promo-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(255, 241, 242, 0.72);
  line-height: 1.55;
  letter-spacing: 0.01em;
}
.replay-dashboard .b25-stats-stardex-promo-cta {
  margin-top: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fda4af;
}

/* BW promo card — replaces the matchup-compass slot. Visually distinct from
 * the cool-blue MMR ribbon and Learn cards: warm violet/amber accent so it
 * reads as cross-game promotion, not user data. Whole card is clickable
 * (rendered as <button>) and deep-links to a 2500+ MMR BW replay. */
.replay-dashboard .b25-stats-bw-promo {
  position: relative;
  cursor: pointer;
  text-align: left;
  background: linear-gradient(135deg, rgba(76, 29, 149, 0.55), rgba(120, 53, 15, 0.45));
  border: 1px solid rgba(196, 181, 253, 0.35);
  color: var(--text);
  font: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.replay-dashboard .b25-stats-bw-promo::before {
  background: linear-gradient(90deg, transparent, rgba(196, 181, 253, 0.6), rgba(251, 191, 36, 0.5), transparent);
  height: 2px;
}
.replay-dashboard .b25-stats-bw-promo:hover {
  transform: translateY(-1px);
  border-color: rgba(196, 181, 253, 0.65);
  box-shadow: 0 6px 18px rgba(76, 29, 149, 0.35);
}
.replay-dashboard .b25-stats-bw-promo:focus-visible {
  outline: 2px solid rgba(196, 181, 253, 0.8);
  outline-offset: 2px;
}
.replay-dashboard .b25-stats-bw-promo-eyebrow {
  color: #fcd34d;
}
/* Map thumb as decorative background — same 3-layer pattern the SC2 hero
 * cards use (.b25-hero-bg / .b25-hero-fade / .b25-hero-content). Absolute
 * positioning keeps the thumb out of the layout flow so the card stays
 * the same height as the lobby + carousel cards in its row regardless
 * of whether the thumb has loaded yet. */
.replay-dashboard .b25-stats-bw-promo {
  overflow: hidden;  /* clip the absolute bg + fade to the card border-radius */
}
.replay-dashboard .b25-stats-bw-promo-bg {
  position: absolute; inset: 0;
  opacity: 0.32;
  pointer-events: none;
  filter: saturate(1.05) contrast(1.05);
}
.replay-dashboard .b25-stats-bw-promo-bg .mapthumb {
  width: 100% !important; height: 100% !important;
  border-radius: 0;
}
.replay-dashboard .b25-stats-bw-promo-bg .mapthumb-image,
.replay-dashboard .b25-stats-bw-promo-bg .mapthumb-svg-backdrop,
.replay-dashboard .b25-stats-bw-promo-bg .mapthumb img,
.replay-dashboard .b25-stats-bw-promo-bg .mapthumb svg {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.replay-dashboard .b25-stats-bw-promo-fade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,12,22,0.10) 0%, rgba(8,12,22,0.62) 70%, rgba(8,12,22,0.85) 100%);
  pointer-events: none;
}
.replay-dashboard .b25-stats-bw-promo-content {
  position: relative;
  display: flex; flex-direction: column;
  gap: 12px;
  flex: 1;
}
.replay-dashboard .b25-stats-bw-promo-headline {
  font-family: 'Rajdhani', sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  color: #f5f3ff;
  letter-spacing: 0.005em;
}
.replay-dashboard .b25-stats-bw-promo-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(245, 243, 255, 0.78);
  letter-spacing: 0.02em;
}
.replay-dashboard .b25-stats-bw-promo.is-loading .b25-stats-bw-promo-meta {
  opacity: 0.55;
}
.replay-dashboard .b25-stats-bw-promo-cta {
  margin-top: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fcd34d;
}

/* Feature carousel (right slot) — rotates through under-discovered surfaces
 * (Tournaments, AI Coach, Find/Become a Coach, Courses). Each item carries
 * a `data-accent` value driving the eyebrow + CTA color so neighbouring
 * ticks read as visually distinct without changing card structure. */
.replay-dashboard .b25-stats-promo {
  position: relative;
  cursor: pointer;
  text-align: left;
  background:
    linear-gradient(135deg, rgba(244, 63, 94, 0.18), rgba(30, 41, 59, 0.55) 65%),
    var(--card-bg, #161b22);
  border: 1px solid rgba(244, 114, 182, 0.30);
  color: var(--text);
  font: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.18s ease;
}
.replay-dashboard .b25-stats-promo::before {
  background: linear-gradient(90deg, transparent, rgba(244, 114, 182, 0.55), transparent);
  height: 2px;
}
.replay-dashboard .b25-stats-promo:hover {
  transform: translateY(-1px);
  border-color: rgba(244, 114, 182, 0.55);
  box-shadow: 0 6px 18px rgba(244, 63, 94, 0.25);
}
.replay-dashboard .b25-stats-promo:focus-visible {
  outline: 2px solid rgba(244, 114, 182, 0.7);
  outline-offset: 2px;
}
/* Title is now the visual anchor (no eyebrow / no big icon competing for
 * attention). Slightly larger + tighter than before so it actually reads
 * as the focal point in the card. */
.replay-dashboard .b25-stats-promo-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: #fff1f2;
}
.replay-dashboard .b25-stats-promo-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(255, 241, 242, 0.7);
  line-height: 1.55;
  letter-spacing: 0.01em;
}
.replay-dashboard .b25-stats-promo-cta {
  margin-top: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--b25-promo-accent, #fda4af);
}
/* Bottom dot row — plays the role the eyebrow used to, signaling
 * "this rotates" without restating the active item's category. */
.replay-dashboard .b25-stats-promo-dots {
  display: flex; gap: 5px;
  margin-top: 0;
}
.replay-dashboard .b25-stats-promo-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255, 241, 242, 0.22);
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.replay-dashboard .b25-stats-promo-dot.is-active {
  background: var(--b25-promo-accent, #fda4af);
  transform: scale(1.25);
}
/* Per-accent overrides: CTA + dot color shift each tick while the card
 * body keeps the rose tint. The card reads as one coherent slot rotating
 * through five surfaces rather than five different cards. */
.replay-dashboard .b25-stats-promo[data-accent="amber"]  { --b25-promo-accent: #fcd34d; }
.replay-dashboard .b25-stats-promo[data-accent="cyan"]   { --b25-promo-accent: #67e8f9; }
.replay-dashboard .b25-stats-promo[data-accent="rose"]   { --b25-promo-accent: #fda4af; }
.replay-dashboard .b25-stats-promo[data-accent="lime"]   { --b25-promo-accent: #bef264; }
.replay-dashboard .b25-stats-promo[data-accent="blue"]   { --b25-promo-accent: #93c5fd; }
/* Zerg-toned accent for player-study cards on a Zerg pro. */
.replay-dashboard .b25-stats-promo[data-accent="violet"] { --b25-promo-accent: #c4b5fd; }

/* Hide the legacy engagement "Lv 1 · 1d" pill from the top nav. The badge
   element + its handlers stay mounted so the engagement drawer is still
   reachable programmatically. */
.engagement-wrapper { display: none !important; }

/* ============================================================
 * Cycle chip — single-click toggle through a list of values.
 * Replaces the dropdowns and 3-chip Result group: one chip shows
 * the current value with a small ↻ arrow and cycles on click.
 * ============================================================ */
.replay-dashboard .b25-chip-cycle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  min-width: 80px;
  justify-content: space-between;
}
.replay-dashboard .b25-chip-cycle .b25-cycle-val {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.replay-dashboard .b25-chip-cycle .b25-cycle-arrow {
  font-size: 11px;
  opacity: 0.55;
  transition: transform 0.15s, opacity 0.15s;
}
.replay-dashboard .b25-chip-cycle:hover .b25-cycle-arrow {
  opacity: 0.95;
  transform: rotate(60deg);
}

/* ============================================================
 * FIX: prevent matchup chip row from wrapping at desktop widths
 * (was flex-wrap: wrap on .b25-filterbar-row, which spilled the
 * Pro Library chips to a second row). Chips scroll horizontally
 * inside their group instead. The whole filter bar still wraps if
 * the viewport drops below ~900px.
 * ============================================================ */
.replay-dashboard .b25-filterbar-row {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}
.replay-dashboard .b25-filterbar-row::-webkit-scrollbar { height: 4px; }
.replay-dashboard .b25-filterbar-row::-webkit-scrollbar-thumb {
  background: rgba(86,194,255,0.15); border-radius: 2px;
}
.replay-dashboard .b25-chips {
  flex-wrap: nowrap;
  flex-shrink: 0;
}

/* ============================================================
 * FIX: timeline rail — widen + push labels left so they don't
 * collide with the density bars. The prototype rendered labels
 * INSIDE the same 56px column as the bars, which produced the
 * stacked "1mo ago" / "3w" overlap on populated lists.
 * ============================================================ */
.replay-dashboard .b25-rail-wrap {
  width: 80px;
  padding-left: 44px;          /* labels live in this gutter */
}
.replay-dashboard .b25-rail-density {
  inset: 0 0 0 44px;           /* density bars start AFTER the gutter */
}
.replay-dashboard .b25-rail-labels {
  left: 0; right: 44px;        /* labels confined to the gutter */
}
.replay-dashboard .b25-rail-label {
  font-size: 9px;
  white-space: nowrap;
  background: transparent;     /* let the dark rail bg show through */
  padding: 0;
}

/* ============================================================
 * Misc shared keyframe used by .b-nav-dot.live (kept for the
 * dashboard header LIVE indicator if we choose to surface it).
 * ============================================================ */
@keyframes pulse { 50% { opacity: 0.4; } }

/* ============================================================
 * Stardex install toast — lives on <body>, NOT scoped to
 * .replay-dashboard, so it survives hash-route changes.
 * Typography matches the dashboard chrome (JetBrains Mono at the
 * existing 11-12px caption size) rather than introducing a stray
 * Inter/system-ui call. Width caps at `viewport - 32px` and drops
 * the previous `white-space: nowrap` so the toast wraps gracefully
 * on narrow viewports (was previously overflowing at <=375px).
 * ============================================================ */
.b25-stardex-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  max-width: calc(100vw - 32px);
  background: #1a1a2e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 14px 40px 14px 20px;
  color: #ccc;
  font-size: 12px;
  line-height: 1.5;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  animation: stardexToastIn 0.25s ease-out;
}
.b25-stardex-toast-link {
  color: #fda4af;  /* rose — matches the Stardex card's accent so the
                     toast reads as part of the same install flow */
  text-decoration: underline;
  cursor: pointer;
}
.b25-stardex-toast-link:hover {
  color: #fecdd3;
}
.b25-stardex-toast-close {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #888;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}
.b25-stardex-toast-close:hover {
  color: #fff;
}
@keyframes stardexToastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}