/* ==========================================================================
   EDHCapsul · / · minimal design system
   --------------------------------------------------------------------------
   Intentionally undecorated. Clean, readable, swappable.
   Brand pass happens after flow + content are right.
   ========================================================================== */

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }

/* ==========================================================================
   THEME TOKENS
   --------------------------------------------------------------------------
   Light by default. Dark overrides via :root[data-theme="dark"].
   nav.js sets the data-theme attribute pre-paint based on saved/preferred.
   ========================================================================== */

:root {
  /* Surfaces */
  --bg: #fafaf9;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-2: #f5f5f4;

  /* Type */
  --text: #0a0a0a;
  --text-muted: #52525b;
  --text-dim: #6f6f79;   /* S130 a11y: was #a1a1aa (2.45:1). 4.76:1 on --bg, 4.97:1 on white. */

  /* Borders */
  --border: #e4e4e7;
  --border-strong: #d4d4d8;

  /* Accent (placeholder neutral; swappable in style pass) */
  --accent: #2563eb;
  --accent-soft: #eff6ff;
  --accent-on: #ffffff;

  /* Status */
  --status-win: #059669;
  --status-win-bg: #d1fae5;
  --status-loss: #dc2626;
  --status-loss-bg: #fee2e2;
  --status-warn: #d97706;
  --status-warn-bg: #fed7aa;
  --status-info: #2563eb;

  /* MTG color identity (subtle backdrops + strong dots) */
  --mtg-w: #fef3c7; --mtg-w-strong: #fbbf24;
  --mtg-u: #dbeafe; --mtg-u-strong: #2563eb;
  --mtg-b: #e4e4e7; --mtg-b-strong: #18181b;
  --mtg-r: #fee2e2; --mtg-r-strong: #dc2626;
  --mtg-g: #d1fae5; --mtg-g-strong: #059669;
  --mtg-c: #f4f4f5; --mtg-c-strong: #71717a;

  /* Shadows (subtle on light) */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.08);

  /* Layout */
  --max: 1180px;
  --gap: 24px;
  --radius: 10px;
  --radius-lg: 14px;

  /* The frame of the product and the color of the table itself (S118 —
     was hardcoded in 13 places; the reserved-gold rule now has a token).
     --gold-dark/--gold-light are the gradient companions. */
  --gold: #C9A849;
  --gold-dark: #A88424;
  --gold-light: #E8C358;
}

:root[data-theme="dark"] {
  --bg: #09090b;
  --bg-elevated: #18181b;
  --surface: #16161a;
  --surface-2: #1c1c20;

  --text: #fafafa;
  --text-muted: #a1a1aa;
  --text-dim: #8b8b96;   /* S130 a11y: was #71717a (4.12:1). 5.9:1 on --bg, 5.26:1 on surface. */

  --border: #27272a;
  --border-strong: #3f3f46;

  --accent: #60a5fa;
  --accent-soft: #1e3a8a;
  --accent-on: #0a0a0a;

  --status-win: #34d399;
  --status-win-bg: rgba(52, 211, 153, 0.12);
  --status-loss: #f87171;
  --status-loss-bg: rgba(248, 113, 113, 0.12);
  --status-warn: #fbbf24;
  --status-warn-bg: rgba(251, 191, 36, 0.12);
  --status-info: #60a5fa;

  /* MTG colors — slightly brightened for dark surfaces */
  --mtg-w: rgba(252, 211, 77, 0.15); --mtg-w-strong: #fcd34d;
  --mtg-u: rgba(96, 165, 250, 0.18); --mtg-u-strong: #60a5fa;
  --mtg-b: rgba(212, 212, 216, 0.12); --mtg-b-strong: #d4d4d8;
  --mtg-r: rgba(248, 113, 113, 0.18); --mtg-r-strong: #f87171;
  --mtg-g: rgba(52, 211, 153, 0.18); --mtg-g-strong: #34d399;
  --mtg-c: rgba(161, 161, 170, 0.15); --mtg-c-strong: #a1a1aa;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.5);
}

/* ----------- HEADER ----------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px 32px;
}
.brand {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--text);
}
.site-header nav { display: flex; gap: 24px; align-items: center; }
.site-header nav a {
  text-decoration: none;
  font-size: 15px;
  color: var(--text-muted);
  transition: color 0.15s;
}
.site-header nav a:hover { color: var(--text); }

/* ----------- THEME TOGGLE ----------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  margin-right: 4px;
}
.theme-toggle:hover { background: var(--surface-2); }
.theme-toggle svg { display: block; }

/* ----------- BUTTONS ----------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border-radius: 8px;
  padding: 10px 18px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-family: inherit;
}
.btn-primary {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.btn-primary:hover { opacity: 0.85; }
.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--surface-2); }
.btn-lg { padding: 14px 24px; font-size: 16px; }

/* ----------- LAYOUT ----------- */
main { max-width: var(--max); margin: 0 auto; padding: 0 32px; }

/* ----------- HERO ----------- */
.hero {
  padding: 96px 0 80px;
  border-bottom: 1px solid var(--border);
}
.hero h1 {
  font-size: 60px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin-bottom: 24px;
  max-width: 18ch;
}
.hero-sub {
  font-size: 21px;
  line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: 36px;
  max-width: 60ch;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* ----------- SECTIONS ----------- */
.section {
  padding: 80px 0;
  border-bottom: 1px solid var(--border);
}
.section-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.section h2 {
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin-bottom: 20px;
  max-width: 22ch;
}
.section p {
  font-size: 18px;
  line-height: 1.65;
  color: var(--text);
  margin-bottom: 16px;
  max-width: 65ch;
}
.section p em { font-style: italic; }
.section a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--text-dim);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}
.section a:hover { text-decoration-color: var(--text); }

/* placeholder block for visuals to come */
.placeholder-block {
  margin-top: 28px;
  padding: 80px 32px;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
  letter-spacing: 0.03em;
}
.placeholder-block strong { color: var(--text-muted); display: block; margin-bottom: 6px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }

/* ----------- CTA SPLIT ----------- */
.section-cta { padding: 112px 0; border-bottom: 0; }
.section-cta h2 { margin-bottom: 32px; }
.cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cta-card {
  display: block;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none !important;
  color: var(--text);
  transition: border-color 0.15s, transform 0.15s;
}
.cta-card:hover {
  border-color: var(--text);
  transform: translateY(-2px);
}
.cta-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.cta-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.cta-card p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

/* ----------- FOOTER ----------- */
.site-footer {
  max-width: var(--max);
  margin: 0 auto;
  padding: 48px 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}
.footer-brand { font-weight: 700; color: var(--text); }
.footer-nav { display: flex; gap: 20px; }
.footer-nav a { text-decoration: none; color: var(--text-muted); }
.footer-nav a:hover { color: var(--text); }
.footer-meta { font-size: 13px; color: var(--text-dim); width: 100%; }

/* ==========================================================================
   POD-SCOPED PAGES (/p/{slug}/...)
   ========================================================================== */

/* Pod hero */
.pod-hero {
  padding: 64px 0 48px;
  border-bottom: 1px solid var(--border);
}
.pod-hero.compact {
  padding: 40px 0 24px;
  border-bottom: 0;
}
.pod-hero.compact h1 { font-size: 32px; margin-bottom: 4px; }
.pod-hero.compact .pod-tagline { display: none; }
.pod-hero.compact .pod-stats { display: none; }
.pod-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.pod-hero h1 {
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin-bottom: 16px;
}
.pod-tagline {
  font-size: 19px;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 60ch;
  margin-bottom: 32px;
}
.pod-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 640px;
}
.pod-stats > div {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pod-stats strong {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.02em;
}
.pod-stats span {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Pod sub-navigation */
.pod-subnav {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  padding: 0 0 0 0;
  margin-bottom: 0;
  overflow-x: auto;
}
.pod-subnav a {
  text-decoration: none;
  color: var(--text-muted);
  padding: 16px 16px;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.pod-subnav a:hover { color: var(--text); }
.pod-subnav a.active {
  color: var(--text);
  border-bottom-color: var(--text);
  font-weight: 600;
}

/* Pod content sections */
.pod-section {
  padding: 56px 0;
  border-bottom: 1px solid var(--border);
}
.pod-section:last-of-type { border-bottom: 0; }
.pod-section .section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}
.pod-section h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.see-all {
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
.see-all:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* Regulars grid */
.regulars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.regular-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, transform 0.15s;
}
.regular-card:hover { border-color: var(--text); transform: translateY(-2px); }
.regular-art {
  aspect-ratio: 4/3;
  background-color: var(--surface-2); background-position: center; background-size: cover; background-repeat: no-repeat;
  border-bottom: 1px solid var(--border);
}
.regular-body { padding: 12px 14px 14px; }
.regular-name { font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.regular-handle { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
.regular-stat { font-size: 13px; color: var(--text-muted); }
.regular-stat strong { color: var(--text); font-weight: 600; }

/* Game tile / row */
.game-row {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.game-row:last-child { border-bottom: 0; }
.game-date {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}
.game-players {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.game-player {
  font-size: 14px;
  display: inline-flex;
  gap: 4px;
}
.game-player.winner { font-weight: 700; }
.game-player .deck-name { color: var(--text-muted); }
.game-player.winner .deck-name { color: var(--text); }
.game-meta {
  font-size: 12px;
  color: var(--text-dim);
  text-align: right;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}

/* Featured night card */
.night-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.night-card-head h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.night-card-head .night-meta {
  font-size: 13px;
  color: var(--text-muted);
}
.night-card-blurb {
  font-size: 15px;
  color: var(--text);
  line-height: 1.6;
}
.night-game-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.night-game-tile {
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
}
.night-game-tile .winner-line {
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.night-game-tile .game-tile-meta {
  color: var(--text-muted);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
}

/* Leaderboard preview */
.lb-preview { display: flex; flex-direction: column; gap: 4px; }
.lb-row {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  gap: 14px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  align-items: center;
}
.lb-rank {
  font-weight: 700;
  font-size: 18px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  color: var(--text-muted);
  text-align: center;
}
.lb-rank.top1 { color: #b45309; }
.lb-name { font-weight: 600; }
.lb-handle { font-size: 12px; color: var(--text-muted); margin-left: 6px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
.lb-record { font-size: 14px; color: var(--text); font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
.lb-pct { font-size: 14px; color: var(--text-muted); font-family: ui-monospace, 'SF Mono', Menlo, monospace; }

/* Deck tile (compact) */
.deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.deck-tile {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, transform 0.15s;
}
.deck-tile:hover { border-color: var(--text); transform: translateY(-2px); }
.deck-tile-art {
  aspect-ratio: 16/9;
  background-color: var(--surface-2); background-position: center; background-size: cover; background-repeat: no-repeat;
  border-bottom: 1px solid var(--border);
}
.deck-tile-body { padding: 10px 12px 12px; }
.deck-tile-name { font-weight: 600; font-size: 14px; margin-bottom: 2px; line-height: 1.3; }
.deck-tile-meta { font-size: 12px; color: var(--text-muted); display: flex; gap: 8px; align-items: center; }
.deck-tile-owner { font-family: ui-monospace, 'SF Mono', Menlo, monospace; }

/* Color pips — ONE base now (S118 consolidation). The era-1 letter-dot
   block that lived here was already losing the cascade to the Scryfall-SVG
   base below on every page; its only surviving effect was a stray yellow
   border under white pips. The SVG base (search "Mana symbol pips") is
   canon: pips are the actual mana symbols, letters are the hidden fallback. */

/* Bracket pill */
.bracket-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: #f3f4f6;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* ==========================================================================
   PLAYER PROFILE (/u/{handle}/)
   ========================================================================== */
.player-hero { padding: 56px 0 32px; border-bottom: 1px solid var(--border); }
.player-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; }
.player-eyebrow a { color: var(--text-muted); text-decoration: none; }
.player-eyebrow a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.player-hero h1 { font-size: 52px; line-height: 1.05; letter-spacing: -0.025em; font-weight: 700; margin-bottom: 6px; }
.player-handle { font-size: 16px; color: var(--text-muted); font-family: ui-monospace, 'SF Mono', Menlo, monospace; margin-bottom: 24px; }
.player-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  max-width: 760px;
}
.player-stats-row > div {
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.player-stats-row strong { display: block; font-size: 24px; font-weight: 700; line-height: 1; margin-bottom: 4px; letter-spacing: -0.02em; }
.player-stats-row span { font-size: 11px; color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; }

.hero-deck-card {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.hero-deck-art { background-color: var(--surface-2); background-position: center; background-size: cover; background-repeat: no-repeat; min-height: 240px; }
.hero-deck-body { padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.hero-deck-body .label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.hero-deck-body h3 { font-size: 28px; font-weight: 700; letter-spacing: -0.015em; }
.hero-deck-body .meta-line { font-size: 14px; color: var(--text-muted); }
.hero-deck-body .meta-line strong { color: var(--text); }
.hero-deck-body .deck-tags { display: flex; gap: 6px; flex-wrap: wrap; }

.achievements-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.ach-tile {
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ach-tile .icon { font-size: 22px; line-height: 1; }
.ach-tile .name { font-weight: 700; }
.ach-tile .desc { color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.ach-tile.locked { opacity: 0.4; }

/* ==========================================================================
   DECK DETAIL (/u/{handle}/decks/{slug}/)
   ========================================================================== */
.deck-hero { padding: 48px 0 32px; }
.deck-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; }
.deck-eyebrow a { color: var(--text-muted); text-decoration: none; }
.deck-eyebrow a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.deck-hero-grid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: 32px;
  align-items: start;
}
.deck-hero-art {
  aspect-ratio: 4/3;
  background-color: var(--surface-2); background-position: center; background-size: cover; background-repeat: no-repeat;
  border-radius: 14px;
  border: 1px solid var(--border);
}
.deck-hero-body { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.deck-hero-body h1 { font-size: 44px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; }
.deck-hero-body .commander-line { font-size: 16px; color: var(--text-muted); }
.deck-hero-body .commander-line strong { color: var(--text); }
.deck-tags-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.deck-tag {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: #f3f4f6;
  color: var(--text);
  letter-spacing: 0.02em;
}
.deck-tag.bracket { background: var(--text); color: #fff; }
.deck-record-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.deck-record-strip > div {
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.deck-record-strip strong { display: block; font-size: 22px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; margin-bottom: 4px; }
.deck-record-strip span { font-size: 11px; color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.deck-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

/* ==========================================================================
   POD HOME v2 — image-forward, denser, color-coded
   ========================================================================== */

/* Hero with commander-art collage backdrop */
.pod-hero-v2 {
  position: relative;
  padding: 64px 0 48px;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.pod-hero-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--hero-collage, none);
  background-size: cover;
  background-position: center;
  opacity: 0.18;
  filter: saturate(1.1);
  pointer-events: none;
  z-index: 0;
}
:root[data-theme="dark"] .pod-hero-v2::before { opacity: 0.22; }
.pod-hero-v2::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, var(--bg) 100%);
  pointer-events: none;
  z-index: 1;
}
.pod-hero-v2 > * { position: relative; z-index: 2; }

.pod-hero-v2 .pod-eyebrow { color: var(--text); opacity: 0.7; }
.pod-hero-v2 h1 { font-size: 56px; }
.pod-hero-v2 .pod-tagline { color: var(--text); opacity: 0.7; font-weight: 500; }

/* Bigger denser stat strip */
.pod-stats-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  max-width: 760px;
  margin-top: 8px;
}
.pod-stats-v2 > div {
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.pod-stats-v2 strong {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
}
.pod-stats-v2 span {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
.pod-stats-v2 .accent { color: var(--status-win); }

/* Image-forward regular cards */
.regulars-grid-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.regular-card-v2 {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  position: relative;
}
.regular-card-v2:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.regular-card-v2::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--card-accent, var(--mtg-c-strong));
  z-index: 3;
}
.regular-art-v2 {
  aspect-ratio: 16/10;
  background-color: var(--surface-2);
  background-position: center 25%;
  background-size: cover;
  position: relative;
}
.regular-art-v2::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.4) 100%);
}
.regular-rank {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 999px;
  z-index: 2;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.regular-rank.top1 { background: #b45309; }
.regular-pips {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: inline-flex;
  gap: 3px;
  z-index: 2;
}
.regular-body-v2 {
  padding: 14px 16px 16px;
}
.regular-name-v2 { font-weight: 700; font-size: 16px; margin-bottom: 2px; letter-spacing: -0.005em; }
.regular-handle-v2 { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
.regular-deck-line { font-size: 13px; color: var(--text); margin-bottom: 10px; line-height: 1.4; }
.regular-deck-line strong { font-weight: 600; }
.regular-stats-row {
  display: flex;
  gap: 10px;
  font-size: 12px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  align-items: center;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.regular-stats-row .stat { color: var(--text-muted); }
.regular-stats-row .stat strong { color: var(--text); font-weight: 700; }
.regular-stats-row .winrate {
  margin-left: auto;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
}
.regular-stats-row .winrate.high { background: var(--status-win-bg); color: var(--status-win); }
.regular-stats-row .winrate.low { background: var(--status-loss-bg); color: var(--status-loss); }
.regular-stats-row .winrate.neutral { background: var(--surface-2); color: var(--text-muted); }

/* Featured latest night */
.night-featured {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1.4fr;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.night-featured-art {
  aspect-ratio: auto;
  min-height: 260px;
  background-color: var(--surface-2);
  background-size: cover;
  background-position: center;
  position: relative;
}
.night-featured-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(0,0,0,0.6) 100%);
}
.night-featured-meta {
  position: absolute;
  bottom: 16px;
  left: 18px;
  right: 18px;
  z-index: 2;
  color: #fff;
}
.night-featured-meta .winner-name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 2px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.night-featured-meta .winner-deck-name {
  font-size: 13px;
  opacity: 0.9;
  font-weight: 500;
}
.night-featured-body { padding: 24px 26px; display: flex; flex-direction: column; gap: 14px; }
.night-featured-body .date {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
}
.night-featured-body h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.night-featured-body .summary {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
}
.night-featured-body .game-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 6px;
  margin-top: auto;
}
.night-featured-body .game-strip .gtile {
  aspect-ratio: 1;
  border-radius: 6px;
  background-color: var(--surface-2);
  background-size: cover;
  background-position: center 25%;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.night-featured-body .game-strip .gtile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.5) 100%);
}
.night-featured-body .game-strip .gtile span {
  position: absolute;
  bottom: 4px;
  left: 6px;
  right: 6px;
  font-size: 10px;
  color: #fff;
  font-weight: 700;
  z-index: 2;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Denser leaderboard preview */
.lb-preview-v2 .lb-row-v2 {
  display: grid;
  grid-template-columns: 36px 36px 1fr auto auto;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  align-items: center;
  transition: border-color 0.15s, transform 0.15s;
  text-decoration: none;
  color: var(--text);
  margin-bottom: 6px;
}
.lb-preview-v2 .lb-row-v2:hover { border-color: var(--border-strong); transform: translateX(2px); }
.lb-preview-v2 .lb-rank-v2 {
  font-weight: 700;
  font-size: 18px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  color: var(--text-muted);
  text-align: center;
}
.lb-preview-v2 .lb-rank-v2.top1 { color: #b45309; }
.lb-preview-v2 .lb-rank-v2.top2 { color: #71717a; }
.lb-preview-v2 .lb-rank-v2.top3 { color: #92400e; }
.lb-preview-v2 .lb-avatar-v2 {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background-color: var(--surface-2);
  background-size: cover;
  background-position: center;
}
.lb-preview-v2 .lb-name-v2 { font-weight: 700; font-size: 15px; }
.lb-preview-v2 .lb-meta-v2 { font-size: 12px; color: var(--text-muted); font-family: ui-monospace, 'SF Mono', Menlo, monospace; margin-top: 2px; }
.lb-preview-v2 .lb-record-v2 { font-size: 14px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-weight: 600; }
.lb-preview-v2 .lb-pct-v2 {
  font-size: 12px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}
.lb-preview-v2 .lb-pct-v2.high { background: var(--status-win-bg); color: var(--status-win); }
.lb-preview-v2 .lb-pct-v2.low { background: var(--status-loss-bg); color: var(--status-loss); }
.lb-preview-v2 .lb-pct-v2.neutral { background: var(--surface-2); color: var(--text-muted); }

/* Archetype mix */
.archetype-bar {
  display: flex;
  height: 24px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  margin-bottom: 14px;
}
.archetype-segment {
  height: 100%;
  position: relative;
  cursor: default;
}
.archetype-segment:hover { filter: brightness(1.1); }
.archetype-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 12px;
  color: var(--text-muted);
}
.archetype-legend .item { display: inline-flex; align-items: center; gap: 6px; }
.archetype-legend .swatch { width: 10px; height: 10px; border-radius: 2px; }

/* Deck tile v2 — better hover, more meta */
.deck-tile-v2 {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  position: relative;
}
.deck-tile-v2:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.deck-tile-v2 .art {
  aspect-ratio: 16/9;
  background-color: var(--surface-2);
  background-size: cover;
  background-position: center 25%;
  position: relative;
}
.deck-tile-v2 .art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.5) 100%);
}
.deck-tile-v2 .art .pips-overlay {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  gap: 2px;
  z-index: 2;
}
.deck-tile-v2 .art .record-overlay {
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-size: 11px;
  font-weight: 700;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  z-index: 2;
}
.deck-tile-v2 .body { padding: 12px 14px 14px; }
.deck-tile-v2 .name { font-weight: 700; font-size: 14px; margin-bottom: 4px; line-height: 1.3; letter-spacing: -0.005em; }
.deck-tile-v2 .meta { font-size: 12px; color: var(--text-muted); }
.deck-tile-v2 .meta .owner { font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
.deck-tile-v2 .meta .bracket { color: var(--text); font-weight: 600; margin-left: 6px; }

/* Mana symbol pips — Scryfall's official SVGs as background images.
   Existing JS produces <span class="pip W">W</span>; the letter is hidden,
   the SVG fills the disc. Same SVG source used in gamenight.html / play.html. */
.pip {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  text-indent: -9999px;
  overflow: hidden;
  flex-shrink: 0;
  vertical-align: middle;
}
.pip.W { background-image: url("https://svgs.scryfall.io/card-symbols/W.svg"); }
.pip.U { background-image: url("https://svgs.scryfall.io/card-symbols/U.svg"); }
.pip.B { background-image: url("https://svgs.scryfall.io/card-symbols/B.svg"); }
.pip.R { background-image: url("https://svgs.scryfall.io/card-symbols/R.svg"); }
.pip.G { background-image: url("https://svgs.scryfall.io/card-symbols/G.svg"); }
.pip.C { background-image: url("https://svgs.scryfall.io/card-symbols/C.svg"); }

/* Size variants */
.pip.sm { width: 14px; height: 14px; }
.pip.lg { width: 28px; height: 28px; }
.pip.xl { width: 38px; height: 38px; }

.pips { display: inline-flex; gap: 3px; align-items: center; }
.pips.lg { gap: 5px; }
.pips.xl { gap: 6px; }

/* ==========================================================================
   PLAYER PROFILE v2 — image-forward
   ========================================================================== */
.player-hero-v2 {
  position: relative;
  padding: 72px 0 48px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.player-hero-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--player-hero-art, none);
  background-size: cover;
  background-position: center 25%;
  opacity: 0.22;
  filter: saturate(1.1);
  pointer-events: none;
  z-index: 0;
}
:root[data-theme="dark"] .player-hero-v2::before { opacity: 0.32; }
.player-hero-v2::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, var(--bg) 100%);
  pointer-events: none;
  z-index: 1;
}
.player-hero-v2 > * { position: relative; z-index: 2; }
.player-hero-v2 .player-eyebrow { color: var(--text); opacity: 0.7; }
.player-hero-v2 h1 {
  font-size: 64px;
  line-height: 1.0;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.player-hero-v2 .player-handle {
  font-size: 16px;
  color: var(--text);
  opacity: 0.7;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  margin-bottom: 28px;
}
.rank-pill-inline {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: var(--text);
  color: var(--bg);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
.rank-pill-inline.top1 { background: #b45309; color: #fff; }

.player-stats-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  max-width: 820px;
}
.player-stats-v2 > div {
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.player-stats-v2 strong {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
}
.player-stats-v2 strong.win { color: var(--status-win); }
.player-stats-v2 strong.loss { color: var(--status-loss); }
.player-stats-v2 span {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Hero deck card v2 — bigger, image-forward */
.hero-deck-card-v2 {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  position: relative;
}
.hero-deck-card-v2:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.hero-deck-card-v2 .art {
  aspect-ratio: 4/3;
  background-color: var(--surface-2);
  background-position: center 25%;
  background-size: cover;
  position: relative;
}
.hero-deck-card-v2 .art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.4) 100%);
}
.hero-deck-card-v2 .art .pips-overlay {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  gap: 3px;
  z-index: 2;
}
.hero-deck-card-v2 .body {
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
}
.hero-deck-card-v2 .label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hero-deck-card-v2 h3 { font-size: 32px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.1; }
.hero-deck-card-v2 .commander-line { font-size: 14px; color: var(--text-muted); }
.hero-deck-card-v2 .commander-line strong { color: var(--text); font-weight: 600; }
.hero-deck-card-v2 .deck-tags-row { margin-top: 4px; }
.hero-deck-card-v2 .record-row {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 8px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 14px;
}
.hero-deck-card-v2 .record-row .pill {
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
}
.hero-deck-card-v2 .record-row .pill.high { background: var(--status-win-bg); color: var(--status-win); }
.hero-deck-card-v2 .record-row .pill.low { background: var(--status-loss-bg); color: var(--status-loss); }
.hero-deck-card-v2 .record-row .pill.neutral { background: var(--surface-2); color: var(--text-muted); }

/* Game row v2 with winner commander mini-art */
.game-row-v2 {
  display: grid;
  grid-template-columns: 76px 40px 1fr auto;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  align-items: center;
  margin-bottom: 6px;
}
.game-row-v2 .gdate {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.game-row-v2 .winner-mini {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: var(--surface-2);
  background-size: cover;
  background-position: center 25%;
  border: 2px solid var(--status-win);
}
.game-row-v2 .gplayers {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 13px;
  align-items: center;
}
.game-row-v2 .gplayers .winner { font-weight: 700; }
.game-row-v2 .gplayers .me { text-decoration: underline; text-underline-offset: 3px; }
.game-row-v2 .gplayers .deck { color: var(--text-muted); }
.game-row-v2 .gplayers .winner .deck { color: var(--text); }
.game-row-v2 .gmeta {
  font-size: 12px;
  color: var(--text-dim);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ==========================================================================
   DECK DETAIL v3 — full passport showcase with decklist + preview
   ========================================================================== */
/* ==========================================================================
   DECK PAGE v4 — page-level color identity bg + contained content card
   (Adam's mockup direction — currently scoped to single deck pages that opt-in)
   ========================================================================== */
body.deck-page-v4,
body.player-page-v4,
body.recap-page-v4,
body.pod-page-v4 {
  background: var(--bg);
  min-height: 100vh;
}
/* Subtle separator between solid nav band and the gradient zone */
body.deck-page-v4 .site-header,
body.player-page-v4 .site-header,
body.recap-page-v4 .site-header,
body.pod-page-v4 .site-header {
  border-bottom: 1px solid var(--border);
}
/* Breadcrumb bar — solid bg between nav and gradient zone */
.deck-breadcrumb-bar {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 0;
}
.deck-breadcrumb-bar .deck-breadcrumb-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.deck-breadcrumb-bar .crumb-trail {
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
}
.deck-breadcrumb-bar .crumb-trail a {
  color: var(--text-muted);
  text-decoration: none;
}
.deck-breadcrumb-bar .crumb-trail a:hover { color: var(--text); }
.deck-breadcrumb-bar .crumb-current {
  color: var(--text);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  text-transform: none;
}
.deck-breadcrumb-bar .breadcrumb-share {
  margin-left: auto;
  padding: 6px 14px;
  background: var(--text);
  color: var(--bg);
  border: 1px solid var(--text);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.15s;
}
.deck-breadcrumb-bar .breadcrumb-share:hover { opacity: 0.85; }
/* Gradient zone — full-width band between solid header and solid footer */
.deck-gradient-zone {
  background: var(--deck-page-gradient, var(--bg));
  padding: 32px 0 48px;
  width: 100%;
}
.deck-page-shell-v4 {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
/* Gold frame around the whole passport (hero + content) — mirrors the gold
   border on multicolor legendary cards in Magic */
.deck-page-frame {
  position: relative;
  border: 2px solid var(--gold);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.20), 0 0 0 4px rgba(201, 168, 73, 0.08);
}

/* Bracket badge — sticks out of the top-right corner like a sticker */
.bracket-badge-corner {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 5;
  padding: 9px 18px;
  background: var(--gold);
  color: #0D0F0F;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 2px solid var(--bg);
  box-shadow: 0 4px 14px rgba(0,0,0,0.32);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}
.bracket-badge-corner .label-mini {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  opacity: 0.65;
  font-weight: 700;
}
.bracket-badge-corner .level {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: none;
}
.bracket-badge-corner.suggested {
  background: var(--status-warn-bg);
  color: var(--status-warn);
  border: 2px dashed var(--status-warn);
}
.bracket-badge-corner.suggested .needs-confirm {
  font-size: 9px;
  letter-spacing: 0.06em;
  font-weight: 800;
  background: rgba(217, 119, 6, 0.20);
  padding: 2px 6px;
  border-radius: 3px;
}

/* ==========================================================================
   PLAYER / RECAP / POD shared visual primitives — extends the deck-v4 system
   ========================================================================== */
/* Reuse .deck-gradient-zone, .deck-page-shell-v4, .deck-page-frame on these
   pages — names are slightly deck-flavored but the visuals are page-agnostic. */

/* Generic identity badge — mirrors bracket-badge-inline but neutral */
.identity-badge-inline {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 14px;
  background: var(--gold);
  color: #0D0F0F;
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  margin-left: auto;
  white-space: nowrap;
  border: 1.5px solid rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.identity-badge-inline .label-mini { font-size: 9.5px; letter-spacing: 0.08em; opacity: 0.7; font-weight: 700; }
.identity-badge-inline .level { font-size: 16px; font-weight: 900; letter-spacing: -0.02em; text-transform: none; }

/* Bracket badge — inline variant (sits in the commander line) */
.bracket-badge-inline {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 14px;
  background: var(--gold);
  color: #0D0F0F;
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  margin-left: auto;
  white-space: nowrap;
  border: 1.5px solid rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.bracket-badge-inline .label-mini {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  opacity: 0.7;
  font-weight: 700;
}
.bracket-badge-inline .level {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: none;
}
.bracket-badge-inline.suggested {
  background: var(--status-warn-bg);
  color: var(--status-warn);
  border: 1.5px dashed var(--status-warn);
}
.bracket-badge-inline.suggested .needs-confirm {
  font-size: 9px;
  letter-spacing: 0.06em;
  font-weight: 800;
  background: rgba(217, 119, 6, 0.20);
  padding: 2px 6px;
  border-radius: 3px;
}

.deck-top-hero-v4 {
  position: relative;
  border-radius: 22px 22px 0 0;
  overflow: hidden;
  padding: 36px 48px 40px;
  /* Key art is the BASE — fully visible */
  background-color: var(--surface);
  background-image: var(--deck-hero-art, none);
  background-size: cover;
  background-position: center 22%;
}
/* Color identity gradient layered on top — light tint, barely there */
.deck-top-hero-v4::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--deck-color-gradient, transparent);
  opacity: 0.30;
  mix-blend-mode: multiply;
  pointer-events: none;
}
:root[data-theme="dark"] .deck-top-hero-v4::after {
  opacity: 0.40;
  mix-blend-mode: screen;
}
.deck-top-hero-v4 > * { position: relative; z-index: 1; }
.deck-top-hero-v4 > * { position: relative; z-index: 1; }

.deck-content-card-v4 {
  background: var(--surface);
  border-radius: 0 0 22px 22px;
  padding: 48px 56px;
  border: none; /* gold frame on parent handles the border */
  box-shadow: none;
}

/* Hero grid inside the new top hero */
.deck-hero-grid-v4 {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 36px;
  align-items: stretch; /* body matches card+under-card height */
}
.deck-hero-card-column {
  display: flex;
  flex-direction: column;
}
.deck-hero-art-v4 {
  aspect-ratio: 5/7;
  background-color: var(--surface-2);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 18px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.35);
  position: relative;
  /* no overflow:hidden — bracket badge overlaps the corner */
}
.deck-hero-art-v4 .pips-overlay-v4 {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  gap: 4px;
  z-index: 2;
}
.deck-hero-art-v4 .bracket-overlay-v4 {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 4px 12px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  z-index: 2;
}
/* Body sits on a translucent frosted-glass panel — art bleeds through while staying readable */
.deck-hero-body-v4 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 28px;
  background: rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  position: relative;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}
:root[data-theme="dark"] .deck-hero-body-v4 {
  background: rgba(18, 18, 22, 0.72);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
}
.deck-hero-body-v4::after { /* color identity ribbon along the top edge of the panel */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--deck-color-gradient, var(--text));
  border-radius: 14px 14px 0 0;
  opacity: 0.85;
}
/* Top row of body: deck name on left, color identity on right */
.deck-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.deck-name-row h1 {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.0;
  margin-top: 4px;
  flex: 1;
}
.deck-name-row .color-id-corner {
  flex-shrink: 0;
  padding-top: 6px; /* visually top-align with cap height of the h1 */
}
.deck-hero-body-v4 h1 {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.0;
  margin-top: 4px;
}
.deck-hero-body-v4 .commander-line {
  font-size: 18px;
  color: var(--text);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.deck-hero-body-v4 .commander-line .label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 700;
}
.deck-hero-body-v4 .commander-line strong { color: var(--text); font-weight: 700; }

/* On player + recap + pod-home pages the hero-grid wrapper should NOT be a 2-col layout.
   The inner v5 hero handles its own columns / rows. */
.player-page-v4 .deck-hero-grid-v4,
.recap-page-v4 .deck-hero-grid-v4,
.pod-home-v5 .deck-hero-grid-v4 {
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
}

/* ==========================================================================
   Pod home hero v5 — pod-as-subject layout
   --------------------------------------------------------------------------
   Big serif pod name + eyebrow + tagline + stat strip on the left, regulars
   mosaic on the right. Pod-level parchment/gold gradient for backdrop.
   ========================================================================== */
.pod-hero-v5 {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 32px;
  padding: 28px 32px;
  align-items: start;
}
.pod-hero-v5 .pod-hero-identity {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(14px) saturate(1.2);
  border-radius: 16px;
  border: 1px solid rgba(201, 168, 73, 0.4);
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.06);
}
[data-theme="dark"] .pod-hero-v5 .pod-hero-identity {
  background: rgba(15, 15, 15, 0.62);
}
.pod-hero-v5 .pod-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dark);
}
.pod-hero-v5 h1 {
  font-size: 56px;
  line-height: 0.98;
  letter-spacing: -0.025em;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.pod-hero-v5 .pod-tagline {
  font-size: 17px;
  line-height: 1.5;
  color: var(--text);
  max-width: 60ch;
  margin: 0;
  font-style: italic;
  font-family: 'Cormorant Garamond', Georgia, serif;
}
.pod-hero-v5 .pod-stat-strip {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid rgba(201, 168, 73, 0.25);
  margin-top: 4px;
}
.pod-hero-v5 .pod-stat-strip > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pod-hero-v5 .pod-stat-strip strong {
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  font-family: 'Cormorant Garamond', Georgia, serif;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}
.pod-hero-v5 .pod-stat-strip span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Regulars mosaic on the right */
.pod-hero-v5 .pod-hero-mosaic-wrap {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px) saturate(1.1);
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
[data-theme="dark"] .pod-hero-v5 .pod-hero-mosaic-wrap {
  background: rgba(15, 15, 15, 0.55);
}
.pod-hero-v5 .pod-hero-mosaic-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.pod-hero-v5 .pod-hero-mosaic-head .lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}
.pod-hero-v5 .pod-hero-mosaic-head .meta {
  font-size: 11px;
  color: var(--text-muted);
}
.pod-hero-v5 .pod-regulars-mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
/* S129 — who runs the pod, on the roster mosaic. */
.pod-role-tag {
  display: inline-block; vertical-align: 1px; margin-left: 4px;
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold-dark, #8a6d1d); border: 1px solid var(--gold, #c9a849);
  border-radius: 999px; padding: 1px 5px; line-height: 1.3;
}
.pod-hero-v5 .pod-regular-tile {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.pod-hero-v5 .pod-regular-tile:hover {
  transform: translateY(-1px);
  border-color: rgba(201, 168, 73, 0.55);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.pod-hero-v5 .pod-regular-art {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  background-color: var(--surface-2);
  background-size: cover;
  background-position: center 22%;
}
.pod-hero-v5 .pod-regular-rank {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 10px;
  font-weight: 800;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.pod-hero-v5 .pod-regular-rank.top1 {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold-light));
  color: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.pod-hero-v5 .pod-regular-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  font-size: 11px;
  gap: 6px;
}
.pod-hero-v5 .pod-regular-cap .name {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pod-hero-v5 .pod-regular-cap .record {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  color: var(--text-muted);
  font-size: 10px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1080px) {
  .pod-hero-v5 {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px;
  }
  .pod-hero-v5 h1 { font-size: 42px; }
  .pod-hero-v5 .pod-stat-strip strong { font-size: 26px; }
}
@media (max-width: 540px) {
  .pod-hero-v5 .pod-regulars-mosaic { grid-template-columns: repeat(2, 1fr); }
  .pod-hero-v5 h1 { font-size: 32px; }
}

/* Pod-home content sections — match player page section-head treatment */
.pod-home-v5 .pod-section .section-head h2 {
  font-size: 24px;
  letter-spacing: -0.015em;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
}

/* ==========================================================================
   Player hero v5 — player-as-subject layout
   --------------------------------------------------------------------------
   Drops the deck-card-column shape. Identity block (initials, name, handle,
   bio, lifetime stats). Arsenal mosaic (top 6 deck arts). Archetype
   tendencies bar from deck tags. Neutral page gradient — player isn't a deck.
   ========================================================================== */
.player-hero-v5 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 28px 32px;
}
.player-hero-v5 .player-identity-block {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: center;
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--border);
  padding: 24px 28px;
}
.player-hero-v5 .player-avatar-block,
.player-hero-v5 .player-avatar-block-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.player-hero-v5 .player-initials {
  width: 96px;
  height: 96px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  font-family: 'Cormorant Garamond', Georgia, serif;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}

/* v5.1 bigger avatar — uses commander art as backdrop with edit-on-hover */
.player-hero-v5 .player-avatar-frame {
  position: relative;
  width: 240px;
  height: 240px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
  background-size: cover;
  background-position: center 22%;
  border: 2px solid var(--border);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.player-hero-v5 .player-avatar-frame.has-art {
  border-color: rgba(201, 168, 73, 0.5);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), inset 0 0 0 1px rgba(255,255,255,0.4);
}
.player-hero-v5 .player-avatar-frame:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.18);
  border-color: rgba(201, 168, 73, 0.85);
}
/* Subtle gradient scrim for legibility when art is showing */
.player-hero-v5 .player-avatar-frame.has-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}
.player-hero-v5 .player-initials-overlay {
  font-size: 84px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  font-family: 'Cormorant Garamond', Georgia, serif;
  z-index: 1;
}
.player-hero-v5 .avatar-edit-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(201, 168, 73, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b5410;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.player-hero-v5 .player-avatar-frame:hover .avatar-edit-btn {
  opacity: 1;
  transform: scale(1);
}
.player-hero-v5 .player-rank-pill {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-dark);
  background: rgba(232, 195, 88, 0.18);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(201, 168, 73, 0.4);
}
.player-hero-v5 .player-name-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.player-hero-v5 .player-name-block h1 {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text);
}
.player-hero-v5 .player-handle {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 14px;
  color: var(--text-muted);
}
.player-hero-v5 .player-tagline {
  font-size: 16px;
  color: var(--text);
  line-height: 1.5;
  margin-top: 4px;
  max-width: 60ch;
}
.player-hero-v5 .player-tagline em.placeholder-mark {
  font-style: normal;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 6px;
  letter-spacing: 0.04em;
}
.player-hero-v5 .hero-deck-callout-inline {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 12px;
  background: var(--surface-2);
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 13px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
  align-self: flex-start;
}
.player-hero-v5 .hero-deck-callout-inline:hover { background: var(--surface); }
.player-hero-v5 .hero-deck-callout-inline.empty { color: var(--text-dim); }
.player-hero-v5 .hero-deck-callout-inline .lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.player-hero-v5 .hero-deck-callout-inline strong { color: var(--text); font-weight: 600; }
.player-hero-v5 .hero-deck-callout-inline .meta { color: var(--text-dim); font-size: 12px; }
.player-hero-v5 .player-lifetime-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 18px;
  background: var(--surface-2);
  border-radius: 12px;
  border: 1px solid var(--border);
  min-width: 180px;
}
.player-hero-v5 .player-lifetime-stats > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.player-hero-v5 .player-lifetime-stats strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.player-hero-v5 .player-lifetime-stats strong.win { color: var(--status-win); }
.player-hero-v5 .player-lifetime-stats strong.loss { color: var(--status-loss); }
.player-hero-v5 .player-lifetime-stats span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ==========================================================================
   Pod context switcher (above quick-strip on player pages)
   --------------------------------------------------------------------------
   Toggles between "Overall — all pods" and a specific pod via ?pod= URL param.
   Today: 1 pod, so the dropdown has 2 options. Multi-pod future: dropdown
   reads from player.pods[].
   ========================================================================== */
.player-hero-v5 .pod-context-switcher {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: -4px;
  flex-wrap: wrap;
}
.player-hero-v5 .pcs-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.player-hero-v5 .pcs-select {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 28px 5px 10px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23A88424' d='M2 4l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color 0.15s ease;
}
.player-hero-v5 .pcs-select:hover { border-color: rgba(201, 168, 73, 0.5); }
.player-hero-v5 .pcs-select:focus {
  outline: none;
  border-color: var(--gold-dark);
  box-shadow: 0 0 0 3px rgba(201, 168, 73, 0.15);
}
.player-hero-v5 .pcs-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.player-hero-v5 .pod-context-switcher[data-mode="pod"] {
  background: rgba(232, 195, 88, 0.12);
  border-color: rgba(201, 168, 73, 0.4);
}

/* Crumb-pill for pod context badge inside breadcrumb */
.crumb-current .crumb-context-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-dark);
  background: rgba(232, 195, 88, 0.18);
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
  border: 1px solid rgba(201, 168, 73, 0.4);
}

/* Rank pill in overall mode (less prominent — it's not really a rank) */
.player-hero-v5 .player-rank-pill.overall {
  background: var(--surface-2);
  color: var(--text-muted);
  border-color: var(--border);
  font-weight: 600;
}

/* ==========================================================================
   Player quick stats strip (6 horizontal cards above the viz grid)
   ========================================================================== */
.player-hero-v5 .player-quick-strip {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
}
.player-hero-v5 .quick-stat {
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  transition: border-color 0.15s ease;
}
.player-hero-v5 .quick-stat:hover { border-color: rgba(201, 168, 73, 0.4); }
.player-hero-v5 .quick-stat strong {
  font-size: 44px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  line-height: 0.95;
  font-family: 'Cormorant Garamond', Georgia, serif;
}
.player-hero-v5 .quick-stat span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.player-hero-v5 .quick-stat.win strong { color: var(--status-win); }
.player-hero-v5 .quick-stat.loss strong { color: var(--status-loss); }
.player-hero-v5 .quick-stat.muted strong { color: var(--text-dim); }

@media (max-width: 1280px) {
  .player-hero-v5 .player-quick-strip {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 720px) {
  .player-hero-v5 .player-quick-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   Player stats grid — now 5 cards (3 narrow + 2 wide on desktop)
   --------------------------------------------------------------------------
   Layout: 3 columns × 2 rows. First row has color/archetype/bracket (narrow,
   bar-chart cards). Second row has season sparkline + h2h, each spanning 1.5
   columns via wide modifier.
   ========================================================================== */
.player-hero-v5 .player-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.player-hero-v5 .player-stats-grid .stats-card {
  background:
    linear-gradient(135deg, rgba(248, 231, 185, 0.08) 0%, rgba(248, 231, 185, 0.0) 60%),
    var(--surface);
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.player-hero-v5 .player-stats-grid .stats-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, rgba(201, 168, 73, 0.5) 30%, rgba(232, 195, 88, 0.7) 50%, rgba(201, 168, 73, 0.5) 70%, transparent 100%);
  opacity: 0.7;
}
.player-hero-v5 .player-stats-grid .stats-card:hover {
  border-color: rgba(201, 168, 73, 0.5);
  box-shadow: 0 8px 24px rgba(0,0,0,0.07);
  transform: translateY(-1px);
}
[data-theme="dark"] .player-hero-v5 .player-stats-grid .stats-card {
  background:
    linear-gradient(135deg, rgba(232, 195, 88, 0.04) 0%, rgba(232, 195, 88, 0.0) 60%),
    var(--surface);
}
[data-theme="dark"] .player-hero-v5 .player-stats-grid .stats-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
[data-theme="dark"] .player-hero-v5 .player-stats-grid .stats-card {
  background: var(--surface);
}
[data-theme="dark"] .player-hero-v5 .player-stats-grid .stats-card:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
.player-hero-v5 .player-stats-grid .stats-card-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.player-hero-v5 .player-stats-grid .stats-card-head .label {
  font-weight: 700;
  color: var(--text);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.player-hero-v5 .player-stats-grid .stats-card-head .meta {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* Primary metric pull-out — sits above each chart, gives instant readability */
.player-hero-v5 .stats-card-headline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.player-hero-v5 .stats-card-headline .hl-pip {
  align-self: center;
  width: 26px;
  height: 26px;
  font-size: 12px;
}
.player-hero-v5 .stats-card-headline .bracket-pill {
  font-size: 13px;
  padding: 3px 10px;
}
.player-hero-v5 .stats-card-headline strong {
  font-size: 40px;
  font-weight: 700;
  font-family: 'Cormorant Garamond', Georgia, serif;
  letter-spacing: -0.025em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 0.95;
}
.player-hero-v5 .stats-card-headline .hl-meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-left: auto;
  text-align: right;
}
.player-hero-v5 .stats-card-headline .hl-meta em {
  font-style: normal;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
}

/* Saturate the bars — vibrance pass */
.player-hero-v5 .color-bar-track {
  height: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.player-hero-v5 .color-bar-played { opacity: 0.92; }
.player-hero-v5 .color-bar-won {
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 0 8px rgba(232, 195, 88, 0.4);
}

/* Color stat rows (W/U/B/R/G — games + win rate per color) */
.player-hero-v5 .color-stat-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.player-hero-v5 .color-stat-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 10px;
  align-items: center;
}
.player-hero-v5 .color-stat-row .pip {
  width: 22px;
  height: 22px;
  font-size: 11px;
}
.player-hero-v5 .color-bar-track {
  height: 14px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.player-hero-v5 .color-bar-played {
  height: 100%;
  border-radius: 999px;
  position: relative;
  opacity: 0.55;
  transition: width 0.3s ease;
}
.player-hero-v5 .color-bar-won {
  height: 100%;
  background: rgba(201, 168, 73, 0.85);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}
.player-hero-v5 .color-stat-meta {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Archetype/bracket WR rows — same shape as color stats but text label instead of pip */
.player-hero-v5 .arch-wr-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.player-hero-v5 .arch-wr-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 10px;
  align-items: center;
}
.player-hero-v5 .arch-wr-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-hero-v5 .arch-wr-row .color-bar-played {
  background: rgba(201, 168, 73, 0.35);
}
.player-hero-v5 .arch-wr-row.bracket-row .arch-wr-name {
  text-align: center;
}
.player-hero-v5 .bracket-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.04em;
}

/* WUBRG color palette — light mode (full saturation, no alpha) */
.player-hero-v5 .color-bar-played { background: var(--surface-2); }
.player-hero-v5 .color-stat-row:nth-child(1) .color-bar-played { background: linear-gradient(90deg, #f5e9b8, #e8d68c); border: 1px solid #d4b85a; } /* W */
.player-hero-v5 .color-stat-row:nth-child(2) .color-bar-played { background: linear-gradient(90deg, #1e6db5, #0e68ab); }  /* U */
.player-hero-v5 .color-stat-row:nth-child(3) .color-bar-played { background: linear-gradient(90deg, #3a3028, #1f1812); }   /* B */
.player-hero-v5 .color-stat-row:nth-child(4) .color-bar-played { background: linear-gradient(90deg, #d4202a, #b81e26); }   /* R */
.player-hero-v5 .color-stat-row:nth-child(5) .color-bar-played { background: linear-gradient(90deg, #008c4f, #00733e); }   /* G */

/* WUBRG palette — dark mode (HSL-shifted brighter so colors stay visible against dark bg) */
[data-theme="dark"] .player-hero-v5 .color-stat-row:nth-child(1) .color-bar-played { background: linear-gradient(90deg, #fff5d4, #f5e0a0); border-color: #d4b85a; } /* W */
[data-theme="dark"] .player-hero-v5 .color-stat-row:nth-child(2) .color-bar-played { background: linear-gradient(90deg, #4ea0ff, #2080e8); }  /* U */
[data-theme="dark"] .player-hero-v5 .color-stat-row:nth-child(3) .color-bar-played { background: linear-gradient(90deg, #6e6258, #4a4038); }   /* B (lifted) */
[data-theme="dark"] .player-hero-v5 .color-stat-row:nth-child(4) .color-bar-played { background: linear-gradient(90deg, #ff4a52, #e7333d); }   /* R */
[data-theme="dark"] .player-hero-v5 .color-stat-row:nth-child(5) .color-bar-played { background: linear-gradient(90deg, #2bc476, #1ea860); }   /* G */

/* Sparkline */
.player-hero-v5 .player-sparkline {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.player-hero-v5 .player-sparkline svg {
  display: block;
  width: 100%;
  height: 100px;
}
.player-hero-v5 .player-sparkline .spark-axis {
  display: flex;
  justify-content: space-between;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

/* Head-to-head list */
.player-hero-v5 .h2h-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.player-hero-v5 .h2h-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.player-hero-v5 .h2h-row:hover {
  background: var(--surface);
  border-color: rgba(201, 168, 73, 0.4);
}
.player-hero-v5 .h2h-avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: var(--surface);
  border: 1px solid var(--border);
}
.player-hero-v5 .h2h-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.player-hero-v5 .h2h-info .name { font-size: 13px; font-weight: 600; color: var(--text); }
.player-hero-v5 .h2h-info .commander {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  color: var(--text-muted);
}
.player-hero-v5 .h2h-record {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
.player-hero-v5 .h2h-record.win { background: var(--status-win-bg); color: var(--status-win); }
.player-hero-v5 .h2h-record.loss { background: var(--status-loss-bg); color: var(--status-loss); }
.player-hero-v5 .h2h-record.even { background: var(--surface); color: var(--text-muted); }
.player-hero-v5 .h2h-empty {
  font-size: 12px;
  color: var(--text-dim);
  padding: 12px 0;
  text-align: center;
}

/* Inline-icon styling for section + card heads */
.player-hero-v5 .stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
}
.player-hero-v5 .player-stats-grid .stats-card-head .label .stat-icon {
  width: 18px;
  height: 18px;
  color: var(--gold-dark);
  margin-right: 8px;
}
.player-hero-v5 .player-stats-grid .stats-card-head .label .stat-icon svg {
  width: 100%;
  height: 100%;
}
[data-theme="dark"] .player-hero-v5 .player-stats-grid .stats-card-head .label .stat-icon { color: var(--gold-light); }
.player-hero-v5 .player-stats-grid .stats-card-head .label {
  display: flex;
  align-items: center;
  gap: 0;
}

/* Section-head icon — bigger, more presence */
.player-hero-v5 .stats-section-title {
  display: flex;
  align-items: center;
  gap: 14px;
}
.player-hero-v5 .stats-section-title .stat-icon {
  width: 32px;
  height: 32px;
  color: var(--gold-dark);
  background: rgba(232, 195, 88, 0.14);
  border: 1px solid rgba(201, 168, 73, 0.4);
  border-radius: 8px;
  padding: 5px;
}
.player-hero-v5 .stats-section-title .stat-icon svg {
  width: 100%;
  height: 100%;
}
[data-theme="dark"] .player-hero-v5 .stats-section-title .stat-icon {
  color: var(--gold-light);
  background: rgba(232, 195, 88, 0.10);
}

/* Section heads — Performance vs Arsenal composition. Gold rule, big serif title. */
.player-hero-v5 .stats-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 4px 10px;
  border-bottom: 2px solid var(--gold);
  margin: 16px 0 4px;
  position: relative;
}
.player-hero-v5 .stats-section-head::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
}
.player-hero-v5 .stats-section-title {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  line-height: 1.05;
}
.player-hero-v5 .stats-section-meta {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  font-family: 'Cormorant Garamond', Georgia, serif;
}

/* Identity-preference rows: glyph + label */
.player-hero-v5 .arch-wr-row.id-row .id-glyph {
  display: inline-block;
  width: 16px;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
  margin-right: 4px;
}
.player-hero-v5 .arch-wr-row.id-row.empty,
.player-hero-v5 .arch-wr-row.bracket-row.empty {
  opacity: 0.5;
}

/* Unset-bracket pill */
.player-hero-v5 .bracket-pill.unset {
  background: transparent;
  border-style: dashed;
  color: var(--text-dim);
  font-style: italic;
}

/* Composition grid uses the same saturated palette so light/dark stay vibrant. */
.player-hero-v5 .composition-grid .color-bar-played {
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
}
.player-hero-v5 .composition-grid .color-stat-row:nth-child(1) .color-bar-played { background: linear-gradient(90deg, #f5e9b8, #e8d68c); border: 1px solid #d4b85a; }
.player-hero-v5 .composition-grid .color-stat-row:nth-child(2) .color-bar-played { background: linear-gradient(90deg, #1e6db5, #0e68ab); }
.player-hero-v5 .composition-grid .color-stat-row:nth-child(3) .color-bar-played { background: linear-gradient(90deg, #3a3028, #1f1812); }
.player-hero-v5 .composition-grid .color-stat-row:nth-child(4) .color-bar-played { background: linear-gradient(90deg, #d4202a, #b81e26); }
.player-hero-v5 .composition-grid .color-stat-row:nth-child(5) .color-bar-played { background: linear-gradient(90deg, #008c4f, #00733e); }

[data-theme="dark"] .player-hero-v5 .composition-grid .color-stat-row:nth-child(1) .color-bar-played { background: linear-gradient(90deg, #fff5d4, #f5e0a0); border-color: #d4b85a; }
[data-theme="dark"] .player-hero-v5 .composition-grid .color-stat-row:nth-child(2) .color-bar-played { background: linear-gradient(90deg, #4ea0ff, #2080e8); }
[data-theme="dark"] .player-hero-v5 .composition-grid .color-stat-row:nth-child(3) .color-bar-played { background: linear-gradient(90deg, #6e6258, #4a4038); }
[data-theme="dark"] .player-hero-v5 .composition-grid .color-stat-row:nth-child(4) .color-bar-played { background: linear-gradient(90deg, #ff4a52, #e7333d); }
[data-theme="dark"] .player-hero-v5 .composition-grid .color-stat-row:nth-child(5) .color-bar-played { background: linear-gradient(90deg, #2bc476, #1ea860); }

/* Won-bar gold gradient — bumped saturation, stronger glow */
.player-hero-v5 .color-bar-won {
  background: linear-gradient(90deg, #b8861f, #f0c948);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6), 0 0 12px rgba(232, 195, 88, 0.55);
}
[data-theme="dark"] .player-hero-v5 .color-bar-won {
  background: linear-gradient(90deg, #d4a52e, #ffd866);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4), 0 0 14px rgba(255, 216, 102, 0.7);
}

/* Archetype/bracket WR rows + theme rows: gold gradient when populated, varies by mode */
.player-hero-v5 .arch-wr-row .color-bar-played {
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
}
[data-theme="dark"] .player-hero-v5 .arch-wr-row .color-bar-played {
  background: linear-gradient(90deg, #d4a52e, #ffd866);
}

/* Composition mix: stacked horizontal bar + legend */
.player-hero-v5 .comp-stack-bar {
  display: flex;
  height: 28px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
}
.player-hero-v5 .comp-stack-seg {
  height: 100%;
  transition: filter 0.15s ease;
}
.player-hero-v5 .comp-stack-seg:hover { filter: brightness(1.15); }
.player-hero-v5 .comp-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  margin-top: 4px;
}
.player-hero-v5 .comp-legend-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}
.player-hero-v5 .comp-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}
.player-hero-v5 .comp-name {
  color: var(--text);
  font-weight: 600;
}
.player-hero-v5 .comp-meta {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.player-hero-v5 .comp-cmc-line {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  text-align: right;
}
.player-hero-v5 .comp-cmc-line strong {
  color: var(--text);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}
.player-hero-v5 .comp-empty {
  font-size: 12px;
  color: var(--text-dim);
  padding: 12px;
  text-align: center;
}

/* Wide cards (sparkline + h2h) span more horizontally on desktop */
.player-hero-v5 .player-stats-grid {
  grid-template-columns: repeat(6, 1fr);
}
.player-hero-v5 .player-stats-grid .stats-card { grid-column: span 2; }
.player-hero-v5 .player-stats-grid .stats-card.stats-card-wide { grid-column: span 3; }

@media (max-width: 1080px) {
  .player-hero-v5 .player-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .player-hero-v5 .player-stats-grid .stats-card { grid-column: span 1; }
  .player-hero-v5 .player-stats-grid .stats-card.stats-card-wide { grid-column: span 2; }
}
@media (max-width: 720px) {
  .player-hero-v5 .player-stats-grid {
    grid-template-columns: 1fr;
  }
  .player-hero-v5 .player-stats-grid .stats-card,
  .player-hero-v5 .player-stats-grid .stats-card.stats-card-wide { grid-column: span 1; }
}

/* Arsenal strip */
.player-hero-v5 .player-arsenal-strip {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--surface);
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 20px 24px;
}
.player-hero-v5 .arsenal-strip-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.player-hero-v5 .arsenal-strip-head .lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}
.player-hero-v5 .arsenal-strip-head .meta {
  font-size: 12px;
  color: var(--text-muted);
}
.player-hero-v5 .arsenal-strip-mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.player-hero-v5 .player-arsenal-tile {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.player-hero-v5 .player-arsenal-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.player-hero-v5 .player-arsenal-tile .art {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--surface-2);
}
.player-hero-v5 .player-arsenal-tile .cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  font-size: 11px;
  gap: 6px;
}
.player-hero-v5 .player-arsenal-tile .name {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-hero-v5 .player-arsenal-tile .g {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  color: var(--text-muted);
  font-size: 10px;
  flex-shrink: 0;
}
.player-hero-v5 .arsenal-empty {
  font-size: 13px;
  color: var(--text-dim);
  padding: 20px;
  text-align: center;
}

/* Archetype tendencies */
.player-hero-v5 .player-archetype-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px) saturate(1.1);
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 16px 20px;
}
[data-theme="dark"] .player-hero-v5 .player-archetype-block {
  background: rgba(15, 15, 15, 0.55);
}
.player-hero-v5 .arch-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.player-hero-v5 .arch-head .lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}
.player-hero-v5 .arch-head .meta {
  font-size: 12px;
  color: var(--text-muted);
}
.player-hero-v5 .arch-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.player-hero-v5 .arch-row {
  display: grid;
  grid-template-columns: 130px 1fr 32px;
  gap: 12px;
  align-items: center;
}
.player-hero-v5 .arch-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.player-hero-v5 .arch-bar {
  height: 10px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.player-hero-v5 .arch-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light));
  border-radius: 999px;
}
.player-hero-v5 .arch-count {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.player-hero-v5 .arch-empty {
  font-size: 13px;
  color: var(--text-dim);
  padding: 8px 0;
}

@media (max-width: 880px) {
  .player-hero-v5 { padding: 20px; gap: 16px; }
  .player-hero-v5 .player-identity-block {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .player-hero-v5 .player-name-block h1 { font-size: 28px; }
  .player-hero-v5 .arsenal-strip-mosaic {
    grid-template-columns: repeat(3, 1fr);
  }
  .player-hero-v5 .arch-row {
    grid-template-columns: 100px 1fr 30px;
  }
}

/* ==========================================================================
   Game card v3 — set-height summary + collapsible broadcast drawer
   --------------------------------------------------------------------------
   Summary stays a fixed height (200px) regardless of how much narrative
   exists. The drawer is a native <details> element that expands on click.
   ========================================================================== */
.game-card-v3 {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.game-card-v3:hover { border-color: rgba(201, 168, 73, 0.4); }
.game-card-v3:target {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 168, 73, 0.18);
}
.game-card-v3.has-planar-log {
  border-color: rgba(147, 51, 234, 0.4);
  box-shadow: 0 4px 16px rgba(147, 51, 234, 0.06);
}
.game-card-v3.has-planar-log:target {
  border-color: #9333ea;
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.18);
}

/* Summary — set-height grid */
.gc-summary {
  display: grid;
  grid-template-columns: 220px 1fr;
  height: 200px;
}
.gc-spotlight {
  position: relative;
  background-color: var(--surface-2);
  background-size: cover;
  background-position: center 22%;
  overflow: hidden;
}
.gc-spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.85) 100%),
    linear-gradient(90deg, rgba(0,0,0,0) 70%, rgba(0,0,0,0.4) 100%);
}
/* Subtle gold edge between spotlight and body */
.gc-spotlight::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent 0%, rgba(201, 168, 73, 0.5) 50%, transparent 100%);
  z-index: 1;
}
.gc-spotlight-overlay {
  position: absolute;
  bottom: 14px;
  left: 16px;
  right: 16px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gc-spotlight-crown {
  font-size: 22px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
  margin-bottom: 4px;
}
.gc-spotlight-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 26px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.gc-spotlight-deck {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Body — game info on the right */
.gc-body {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.gc-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted);
}
.gc-num-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
}
.gc-duration {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.gc-meta-row .turns-placeholder {
  font-size: 11px;
}
.gc-meta-row .share-link {
  font-size: 10px;
  color: var(--text-muted);
  text-decoration: none;
  margin-left: auto;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.gc-meta-row .share-link:hover { color: var(--text); border-color: var(--text-muted); }

.gc-winner-line {
  font-size: 17px;
  color: var(--text);
  letter-spacing: -0.005em;
}
.gc-winner-line strong {
  color: var(--text);
  font-weight: 700;
}
.gc-winner-line .gc-with {
  color: var(--text-muted);
  margin: 0 4px;
  font-weight: 400;
}
.gc-winner-line .gc-deck-name {
  color: var(--text);
  font-style: italic;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  font-weight: 700;
}

.gc-players-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 12.5px;
  align-items: baseline;
  margin-top: auto;  /* push to bottom of card */
}
.gc-players-line .player-line {
  color: var(--text-muted);
  white-space: nowrap;
}
.gc-players-line .player-line.winner-line-inline {
  color: var(--text);
  font-weight: 700;
}
.gc-players-line .player-deck { opacity: 0.65; }
.gc-players-line .players-sep { color: var(--text-dim); }

/* Drawer — native <details> for accessibility */
.gc-details {
  border-top: 1px solid var(--border);
}
.gc-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  cursor: pointer;
  list-style: none;
  background: linear-gradient(135deg, rgba(248, 231, 185, 0.05) 0%, rgba(248, 231, 185, 0.0) 60%), var(--surface);
  transition: background 0.15s ease;
  user-select: none;
}
.gc-toggle::-webkit-details-marker { display: none; }
.gc-toggle:hover {
  background: linear-gradient(135deg, rgba(248, 231, 185, 0.12) 0%, rgba(248, 231, 185, 0.04) 60%), var(--surface);
}
.gc-toggle-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-dark);
}
[data-theme="dark"] .gc-toggle-label { color: var(--gold-light); }
.gc-toggle-meta {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}
.gc-chevron {
  margin-left: auto;
  font-size: 14px;
  color: var(--gold-dark);
  transition: transform 0.2s ease;
}
[data-theme="dark"] .gc-chevron { color: var(--gold-light); }
.gc-details[open] .gc-chevron { transform: rotate(180deg); }
.gc-details[open] .gc-toggle-label::before { content: 'Hide '; }
.gc-details[open] .gc-toggle-label {
  color: var(--text);
}

.gc-drawer-inner {
  padding: 18px 22px 22px;
  background: linear-gradient(180deg, rgba(248, 231, 185, 0.04) 0%, rgba(248, 231, 185, 0) 80%);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
[data-theme="dark"] .gc-drawer-inner {
  background: linear-gradient(180deg, rgba(232, 195, 88, 0.04) 0%, rgba(232, 195, 88, 0) 80%);
}
.gc-narrative {
  border-left: 3px solid var(--gold);
  padding: 6px 0 6px 16px;
}
.gc-narrative .narrator-tag-mini {
  margin-bottom: 8px;
}

/* When details is open on planechase card, accent shifts purple */
.game-card-v3.has-planar-log .gc-toggle-label,
.game-card-v3.has-planar-log .gc-chevron { color: #7c3aed; }
[data-theme="dark"] .game-card-v3.has-planar-log .gc-toggle-label,
[data-theme="dark"] .game-card-v3.has-planar-log .gc-chevron { color: #c084fc; }

@media (max-width: 720px) {
  .gc-summary {
    grid-template-columns: 1fr;
    height: auto;
  }
  .gc-spotlight { height: 140px; }
  .gc-body { padding: 16px 18px; }
}

/* ==========================================================================
   Recap broadcast section + per-game narrative blocks
   --------------------------------------------------------------------------
   The broadcast prose at the top of each recap. Per-game game-narrative
   blocks inside each game card. Salt meter, variant badges, planar log.
   ========================================================================== */
.recap-broadcast-section { padding-top: 0; }
.recap-broadcast {
  background:
    linear-gradient(135deg, rgba(248, 231, 185, 0.10) 0%, rgba(248, 231, 185, 0.0) 60%),
    var(--surface);
  border: 1px solid rgba(201, 168, 73, 0.4);
  border-radius: 16px;
  padding: 28px 32px 32px;
  position: relative;
  overflow: hidden;
}
.recap-broadcast::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent 0%, rgba(201, 168, 73, 0.6) 30%, rgba(232, 195, 88, 0.85) 50%, rgba(201, 168, 73, 0.6) 70%, transparent 100%);
}
.recap-broadcast .broadcast-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: rgba(232, 195, 88, 0.18);
  border: 1px solid rgba(201, 168, 73, 0.4);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--gold-dark);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.recap-broadcast .broadcast-tag .tag-icon {
  font-size: 14px;
  filter: saturate(1.4);
}
.recap-broadcast .broadcast-title {
  font-size: 38px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--text);
  margin: 0 0 18px;
}
.recap-broadcast .broadcast-prose {
  max-width: 65ch;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.recap-broadcast .broadcast-prose p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
}
.recap-broadcast .broadcast-prose em {
  font-style: italic;
  color: var(--gold-dark);
  font-weight: 600;
}
[data-theme="dark"] .recap-broadcast .broadcast-prose em { color: var(--gold-light); }
.recap-broadcast .broadcast-prose strong { color: var(--text); font-weight: 700; }
/* Beat sub-headers inside broadcast prose */
.recap-broadcast .broadcast-prose .beat {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin: 12px 0 -2px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(201, 168, 73, 0.25);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
[data-theme="dark"] .recap-broadcast .broadcast-prose .beat { color: var(--gold-light); }
.recap-broadcast .broadcast-prose .beat:first-child { margin-top: 0; }

/* Per-game narrative block inside game cards */
.game-card-v2 .game-narrative {
  margin-top: 14px;
  padding: 16px 18px 14px;
  background: rgba(248, 231, 185, 0.06);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
}
[data-theme="dark"] .game-card-v2 .game-narrative {
  background: rgba(232, 195, 88, 0.04);
}
.narrator-tag-mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 10px;
}
[data-theme="dark"] .narrator-tag-mini { color: var(--gold-light); }
.narrator-tag-mini .tag-icon { font-size: 13px; filter: saturate(1.4); }
.narrator-prose { display: flex; flex-direction: column; gap: 10px; }
.narrator-prose p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text);
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
}
.narrator-prose em { color: var(--gold-dark); font-style: italic; font-weight: 600; }
[data-theme="dark"] .narrator-prose em { color: var(--gold-light); }
.narrator-prose strong { color: var(--text); font-weight: 700; }
/* Beat sub-headers inside per-game narrator prose */
.narrator-prose .beat {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin: 10px 0 -2px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(201, 168, 73, 0.22);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
[data-theme="dark"] .narrator-prose .beat { color: var(--gold-light); }
.narrator-prose .beat:first-child { margin-top: 0; }
.game-note-quote {
  margin-top: 12px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  border-top: 1px dashed var(--border);
  padding-top: 10px;
}
.game-note-quote em { color: var(--text); font-weight: 500; }

/* Salt meter — 5 grains, replaces "salt 4" text */
.salt-meter {
  display: inline-flex;
  gap: 1px;
  align-items: center;
  margin-left: 4px;
}
.salt-grain {
  font-size: 14px;
  filter: grayscale(1) opacity(0.3);
  transition: filter 0.15s ease;
}
.salt-grain.on {
  filter: grayscale(0) opacity(1) saturate(1.4);
}

/* Variant badge — distinct color per variant */
.variant-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.variant-badge.variant-planechase {
  background: linear-gradient(135deg, #6b46c1, #9333ea);
  color: #fff;
  box-shadow: 0 1px 4px rgba(107, 70, 193, 0.4);
}
.variant-badge.variant-2hg {
  background: linear-gradient(135deg, #0891b2, #06b6d4);
  color: #fff;
}
.variant-badge.variant-star {
  background: linear-gradient(135deg, #d97706, #f59e0b);
  color: #fff;
}
.variant-badge.variant-archenemy {
  background: linear-gradient(135deg, #b91c1c, #dc2626);
  color: #fff;
}
.variant-badge.variant-horde {
  background: linear-gradient(135deg, #1e40af, #2563eb);
  color: #fff;
}

/* Game card winner crown */
.game-card-v2 .winner-crown {
  font-size: 16px;
  margin-right: 4px;
  filter: saturate(1.4) drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
.game-card-v2 .game-num-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text);
}

/* Planar travel log (planechase finale) */
.planar-log {
  margin-top: 16px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(107, 70, 193, 0.08), rgba(147, 51, 234, 0.04));
  border: 1px solid rgba(147, 51, 234, 0.3);
  border-radius: 8px;
}
[data-theme="dark"] .planar-log {
  background: linear-gradient(135deg, rgba(107, 70, 193, 0.18), rgba(147, 51, 234, 0.08));
  border-color: rgba(147, 51, 234, 0.45);
}
.planar-log-head {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7c3aed;
  margin-bottom: 12px;
}
[data-theme="dark"] .planar-log-head { color: #c084fc; }
.planar-log-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.planar-log-list li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.12s ease;
}
.planar-log-list li:hover { background: rgba(147, 51, 234, 0.08); }
.planar-log-list .plane-num {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: right;
}
.planar-log-list .plane-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  font-family: 'Cormorant Garamond', Georgia, serif;
}
.planar-log-list .plane-by {
  font-size: 11px;
  color: var(--text-dim);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}

/* Highlighted game card when planechase — purple accent border */
.game-card-v2.has-planar-log {
  border-color: rgba(147, 51, 234, 0.4);
  box-shadow: 0 4px 16px rgba(147, 51, 234, 0.08);
}

@media (max-width: 720px) {
  .recap-broadcast { padding: 20px 22px 24px; }
  .recap-broadcast .broadcast-title { font-size: 28px; }
  .recap-broadcast .broadcast-prose p { font-size: 16px; }
}

/* ==========================================================================
   Recap hero v5 — story-of-the-night layout
   --------------------------------------------------------------------------
   Drops the deck-card-column shape. Date is the visual anchor. Pull-quote
   TL;DR. Stat strip. Mosaic of winning commander arts (one tile per game).
   Pod-level parchment/gold gradient — recap is a pod artifact, not a deck.
   ========================================================================== */
.recap-hero-v5 {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto auto;
  gap: 24px 32px;
  padding: 28px 32px;
  align-items: start;
}
.recap-hero-v5 .recap-date-block {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 18px 12px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px) saturate(1.1);
  border-radius: 14px;
  border: 1px solid rgba(201, 168, 73, 0.4);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  text-align: center;
}
[data-theme="dark"] .recap-hero-v5 .recap-date-block {
  background: rgba(20, 20, 20, 0.55);
  border-color: rgba(201, 168, 73, 0.35);
}
.recap-hero-v5 .recap-date-block .month {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-family: 'Cormorant Garamond', Georgia, serif;
}
.recap-hero-v5 .recap-date-block .day {
  font-size: 88px;
  font-weight: 800;
  line-height: 0.92;
  color: var(--text);
  font-family: 'Cormorant Garamond', Georgia, serif;
  letter-spacing: -0.04em;
  margin-top: 2px;
}
.recap-hero-v5 .recap-date-block .year-meta {
  font-size: 12px;
  color: var(--text-muted);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  letter-spacing: 0.04em;
  margin-top: 6px;
}
.recap-hero-v5 .recap-headline-block {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(14px) saturate(1.2);
  border-radius: 16px;
  border: 1px solid rgba(201, 168, 73, 0.35);
  padding: 24px 28px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.06);
}
[data-theme="dark"] .recap-hero-v5 .recap-headline-block {
  background: rgba(15, 15, 15, 0.62);
}
.recap-hero-v5 .recap-pod-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.recap-hero-v5 .recap-tldr {
  font-size: 26px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
}
.recap-hero-v5 .recap-tldr.placeholder em.placeholder-mark {
  font-style: normal;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-dark);
  background: rgba(232, 195, 88, 0.18);
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 8px;
  letter-spacing: 0.04em;
}
.recap-hero-v5 .recap-stat-strip {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 4px;
  border-top: 1px solid rgba(201, 168, 73, 0.25);
  padding: 12px 0 0;
  margin-top: 4px;
}
.recap-hero-v5 .recap-stat-strip > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.recap-hero-v5 .recap-stat-strip strong {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.recap-hero-v5 .recap-stat-strip span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.recap-hero-v5 .recap-winners-mosaic {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.recap-hero-v5 .recap-winner-tile {
  flex: 1 1 140px;
  max-width: 200px;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(201, 168, 73, 0.4);
  background: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
[data-theme="dark"] .recap-hero-v5 .recap-winner-tile {
  background: rgba(20, 20, 20, 0.5);
}
.recap-hero-v5 .recap-winner-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.recap-hero-v5 .recap-winner-tile .art {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--surface-2);
}
.recap-hero-v5 .recap-winner-tile .cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  font-size: 12px;
}
.recap-hero-v5 .recap-winner-tile .g-num {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.recap-hero-v5 .recap-winner-tile .g-winner {
  font-weight: 600;
  color: var(--text);
}
@media (max-width: 720px) {
  .recap-hero-v5 {
    grid-template-columns: 1fr;
    padding: 20px;
  }
  .recap-hero-v5 .recap-date-block {
    grid-column: 1;
    flex-direction: row;
    justify-content: flex-start;
    gap: 16px;
    padding: 12px 16px;
  }
  .recap-hero-v5 .recap-date-block .day { font-size: 56px; }
  .recap-hero-v5 .recap-headline-block { grid-column: 1; padding: 18px; }
  .recap-hero-v5 .recap-tldr { font-size: 20px; }
}

/* ==========================================================================
   Pod-input block — bracket voting + fun rating on deck pages
   --------------------------------------------------------------------------
   Lives inside .deck-hero-body-v4, below the record strip. Two cards side-by-
   side: bracket-vote distribution + fun-rating display. Both have prototype
   "cast" UI that fires alerts (real impl writes to bracket_votes / fun_ratings
   tables — flagged in Jordan's data-model gap list).
   ========================================================================== */
.deck-hero-body-v4 .pod-input-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.pod-input-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pod-input-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.pod-input-head .lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}
.pod-input-head .meta {
  font-size: 11px;
  color: var(--text-muted);
}

/* Bracket vote distribution */
.bv-distribution {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bv-row {
  display: grid;
  grid-template-columns: 28px 1fr 24px;
  gap: 8px;
  align-items: center;
}
.bv-label {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: right;
}
.bv-bar {
  height: 8px;
  background: var(--surface);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.bv-fill {
  height: 100%;
  background: rgba(201, 168, 73, 0.45);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.bv-fill.is-mode {
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
}
.bv-count {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Cast-vote row (bracket + fun share) */
.bv-cast-row, .fr-cast-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.bv-cast-row .cast-lbl, .fr-cast-row .cast-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.bv-cast-pills, .fr-cast-pills {
  display: flex;
  gap: 4px;
}
.bv-cast-btn, .fr-cast-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.1s ease;
}
.bv-cast-btn:hover, .fr-cast-btn:hover {
  background: var(--surface-2);
  border-color: rgba(201, 168, 73, 0.5);
}
.bv-cast-btn.active, .fr-cast-btn.active {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  border-color: var(--gold-dark);
  color: #fff;
  box-shadow: 0 1px 4px rgba(168, 132, 36, 0.4);
}

/* Fun-rating display */
.fr-display {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}
.fr-stars {
  font-size: 22px;
  letter-spacing: 0.05em;
  line-height: 1;
}
.fr-stars .on { color: var(--gold-light); }
.fr-stars .off { color: var(--border); }
.fr-num {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .deck-hero-body-v4 .pod-input-block {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Misc additions to existing components for pod-asks UI
   ========================================================================== */
/* Avg salt pill on deck tiles in player view */
.deck-tile-v2 .deck-tile-salt {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  border: 1px solid var(--border);
}

/* Empty-data quick-stat tile (fades the "—" so it's clearly not yet captured) */
.player-hero-v5 .quick-stat.empty-data { opacity: 0.55; }
.player-hero-v5 .quick-stat.empty-data strong {
  color: var(--text-dim);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 18px;
}

/* Turn count placeholder on recap game cards */
.turns-placeholder {
  color: var(--text-dim);
  font-style: italic;
  border-bottom: 1px dotted var(--text-dim);
  cursor: help;
}

/* MTG-card-style type line — small italic subhead under the commander */
.deck-hero-body-v4 .commander-type-line {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  letter-spacing: 0.01em;
  margin-top: -4px;
  margin-bottom: 2px;
  font-variant: small-caps;
  font-weight: 500;
}

/* Description + how-it-wins inside the hero body */
.deck-blurbs { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.deck-blurb-block { display: flex; flex-direction: column; gap: 6px; }
.deck-blurb-block .blurb-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.deck-blurb-block p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.deck-blurb-block em.placeholder {
  background: var(--status-warn-bg);
  color: var(--status-warn);
  padding: 2px 6px;
  border-radius: 4px;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
}

/* Under-card block — sits below the Magic card on the left column */
.under-card-block {
  margin-top: 16px;
  background: rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
:root[data-theme="dark"] .under-card-block {
  background: rgba(18, 18, 22, 0.72);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
.under-card-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.under-card-last-played {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.under-card-last-played .label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.under-card-last-played .date {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
}
.under-card-block .deck-qr-placeholder {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}
.under-card-block .deck-qr-placeholder span { font-size: 8px; padding: 1px 4px; }
.under-card-block .deck-qr-placeholder::before,
.under-card-block .deck-qr-placeholder::after {
  width: 12px;
  height: 12px;
  border-width: 2px;
}
.under-card-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 16px;
  background: var(--text);
  color: var(--bg);
  border: 1px solid var(--text);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.005em;
  transition: opacity 0.15s;
}
.under-card-share-btn:hover { opacity: 0.85; }

/* Hero footer row — meta + QR code */
.deck-hero-footer-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.deck-qr-placeholder {
  width: 78px;
  height: 78px;
  flex-shrink: 0;
  background: repeating-linear-gradient(
    45deg,
    var(--text) 0 4px,
    var(--bg) 4px 8px
  );
  border: 1.5px solid var(--text);
  border-radius: 6px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
.deck-qr-placeholder span {
  background: var(--bg);
  padding: 2px 5px;
  border: 1px solid var(--text);
  border-radius: 3px;
}
.deck-qr-placeholder::before {
  content: '';
  position: absolute;
  top: 4px; left: 4px;
  width: 16px; height: 16px;
  background: var(--bg);
  border: 3px solid var(--text);
}
.deck-qr-placeholder::after {
  content: '';
  position: absolute;
  top: 4px; right: 4px;
  width: 16px; height: 16px;
  background: var(--bg);
  border: 3px solid var(--text);
}

/* Reuse v3 styles for the rest (tagline, archetype, record-strip, etc.) */

@media (max-width: 720px) {
  .deck-page-shell-v4 { margin: 12px auto; padding: 0 12px; }
  .deck-top-hero-v4 { padding: 48px 24px 32px; border-radius: 18px 18px 0 0; }
  .deck-content-card-v4 { padding: 32px 20px; border-radius: 0 0 18px 18px; }
  .deck-hero-grid-v4 { grid-template-columns: 1fr; gap: 20px; }
  .deck-hero-body-v4 h1 { font-size: 36px; }
}

.deck-hero-v3 {
  position: relative;
  padding: 72px 0 56px;
  overflow: hidden;
  background: var(--deck-color-gradient, linear-gradient(135deg, rgba(161, 161, 170, 0.30), rgba(161, 161, 170, 0.10)));
}
/* Subtle gradient sheen on top — adds depth without competing with color identity */
.deck-hero-v3::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 0%, rgba(255,255,255,0.18) 0%, transparent 50%),
              radial-gradient(ellipse at 0% 100%, rgba(0,0,0,0.10) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
:root[data-theme="dark"] .deck-hero-v3::before {
  background: radial-gradient(ellipse at 80% 0%, rgba(255,255,255,0.06) 0%, transparent 50%),
              radial-gradient(ellipse at 0% 100%, rgba(0,0,0,0.30) 0%, transparent 60%);
}
.deck-hero-v3 > * { position: relative; z-index: 1; }

.deck-hero-grid-v3 {
  display: grid;
  grid-template-columns: minmax(320px, 440px) 1fr;
  gap: 36px;
  align-items: start;
  margin-top: 20px;
}
.deck-hero-art-v3 {
  aspect-ratio: 4/3;
  background-color: var(--surface-2);
  background-size: cover;
  background-position: center 18%;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.deck-hero-art-v3 .mana-overlay {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  gap: 4px;
  z-index: 2;
}
.deck-hero-art-v3 .bracket-overlay {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 4px 12px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  z-index: 2;
}

.deck-hero-body-v3 { display: flex; flex-direction: column; gap: 14px; padding-top: 10px; }
.deck-hero-body-v3 h1 { font-size: 56px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.0; }
.deck-hero-body-v3 .commander-line { font-size: 17px; color: var(--text-muted); }
.deck-hero-body-v3 .commander-line strong { color: var(--text); font-weight: 600; }

.deck-tagline {
  font-size: 22px;
  line-height: 1.35;
  color: var(--text);
  font-weight: 500;
  font-style: italic;
  padding: 14px 18px;
  background: var(--surface);
  border-left: 3px solid var(--card-accent, var(--text));
  border-radius: 8px;
  margin: 4px 0;
}
.deck-tagline.placeholder { color: var(--text-muted); font-style: normal; font-size: 18px; font-weight: 400; }

.deck-archetype-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.archetype-chip {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.archetype-chip.primary {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

/* Mana symbols — sized variants */
.mana-row { display: inline-flex; gap: 4px; align-items: center; }
.mana-row .ms { font-size: 22px; }
.mana-row.lg .ms { font-size: 32px; }
.mana-row.sm .ms { font-size: 14px; }
.ms.ms-cost.ms-shadow { box-shadow: -1px 1px 0 rgba(0,0,0,0.3); }

/* Top 5 cards strip — name above, card image, hover reveals owner one-liner */
.top5-section { padding: 56px 0; border-bottom: 1px solid var(--border); }
.top5-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.top5-slot {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.top5-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  letter-spacing: -0.005em;
  line-height: 1.2;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
}
.top5-card {
  aspect-ratio: 5/7;
  border-radius: 10px;
  background-color: var(--surface);
  border: 2px dashed var(--border-strong);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.top5-slot.filled .top5-card {
  border: 1px solid var(--border);
  border-style: solid;
  background-size: contain;
  background-repeat: no-repeat;
}
.top5-card .empty-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  font-weight: 500;
  text-transform: uppercase;
}
/* Hover reveals one-liner overlay on the card image */
.top5-oneliner {
  position: absolute;
  inset: auto 0 0 0;
  padding: 12px 10px;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.78) 60%, rgba(0,0,0,0) 100%);
  color: #fff;
  font-size: 12px;
  font-style: italic;
  text-align: center;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(8%);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
  letter-spacing: 0.005em;
}
.top5-oneliner.placeholder {
  background: linear-gradient(to top, rgba(217, 119, 6, 0.95) 0%, rgba(217, 119, 6, 0.85) 60%, rgba(217, 119, 6, 0) 100%);
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.top5-card:hover .top5-oneliner { opacity: 1; transform: translateY(0); }
.top5-hint { font-size: 11px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }

/* Deck tags section in hero — capped to ~2 rows; overflow hidden with fade */
.deck-tags-row-v2 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
  max-height: 64px;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
}
.deck-tags-row-v2 .tags-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 4px;
}
.deck-tag-chip {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}
.deck-tag-chip.add {
  background: transparent;
  color: var(--text-muted);
  border-style: dashed;
  cursor: default;
}

/* ==========================================================================
   DECK STATS & CURVES
   ========================================================================== */
.deck-stats-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 16px;
  margin-top: 18px;
}
.stats-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.stats-card:hover { border-color: var(--border-strong); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
:root[data-theme="dark"] .stats-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
.stats-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}
.stats-card-head .label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.stats-card-head .meta {
  font-size: 11px;
  color: var(--text-dim);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}

/* Mana curve — vertical bars */
.mana-curve {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  align-items: flex-end;
  height: 140px;
  margin-bottom: 6px;
}
.curve-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  gap: 0;
  position: relative;
}
.curve-spacer { flex: 1; }
.curve-bar {
  background: var(--curve-bar-bg, linear-gradient(to top, #2563eb 0%, #7c3aed 50%, #dc2626 100%));
  border-radius: 5px 5px 0 0;
  min-height: 4px;
  position: relative;
  transition: filter 0.15s, transform 0.15s;
  cursor: default;
}
.curve-col:hover .curve-bar {
  filter: brightness(1.15) saturate(1.15);
  transform: translateY(-2px);
}
.curve-col:hover .curve-bar .count { color: var(--accent); }
.curve-bar .count {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.curve-labels {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin-top: 6px;
}
.curve-label {
  font-size: 11px;
  color: var(--text-muted);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-weight: 600;
  text-align: center;
}
.curve-meta {
  display: flex;
  gap: 16px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-muted);
}
.curve-meta strong { color: var(--text); font-weight: 700; }

/* Type breakdown — horizontal stacked bar */
.type-bar {
  display: flex;
  height: 24px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 12px;
}
.type-segment { transition: filter 0.15s; }
.type-segment:hover { filter: brightness(1.08); }
.type-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.type-legend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
}
.type-legend-row .lhs { display: flex; align-items: center; gap: 8px; }
.type-legend-row .swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.type-legend-row .name { color: var(--text); }
.type-legend-row .count {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-weight: 700;
  color: var(--text-muted);
}

/* Head-to-head matchups */
.h2h-list { display: flex; flex-direction: column; gap: 8px; }
.h2h-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.h2h-row:last-child { border-bottom: 0; }
.h2h-row { transition: transform 0.15s, background 0.15s; padding-left: 4px; padding-right: 4px; border-radius: 6px; }
.h2h-row:hover { background: var(--surface-2); transform: translateX(2px); }
.h2h-avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: var(--surface-2);
}
.h2h-info { display: flex; flex-direction: column; gap: 2px; }
.h2h-info .name { font-weight: 700; font-size: 13px; }
.h2h-info .commander { font-size: 11px; color: var(--text-muted); }
.h2h-record {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-weight: 700;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
}
.h2h-record.win { background: var(--status-win-bg); color: var(--status-win); }
.h2h-record.loss { background: var(--status-loss-bg); color: var(--status-loss); }
.h2h-record.even { background: var(--surface-2); color: var(--text-muted); }

/* Compact stats row — 4 narrower cards */
.deck-stats-grid-compact {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 16px;
}
.stats-card.compact { padding: 18px 20px; }
.compact-stat-stack { display: flex; flex-direction: column; gap: 10px; }
.compact-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--text-muted);
  padding: 4px 0;
  border-bottom: 1px dashed var(--border);
}
.compact-stat:last-child { border-bottom: 0; }
.compact-stat .key { font-weight: 500; }
.compact-stat .value {
  font-weight: 700;
  color: var(--text);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 14px;
}
.compact-stat .value.win { color: var(--status-win); }
.compact-stat .value.loss { color: var(--status-loss); }

.compact-bigstat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.compact-bigstat strong {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--text);
}
.compact-bigstat span {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Mini bar chart for win-turn distribution */
.mini-bars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  align-items: flex-end;
  height: 60px;
  margin-bottom: 6px;
}
.mini-bar-col { display: flex; flex-direction: column; align-items: stretch; height: 100%; }
.mini-bar-spacer { flex: 1; }
.mini-bar {
  background: linear-gradient(to top, #16a34a 0%, #ca8a04 60%, #dc2626 100%);
  border-radius: 3px 3px 0 0;
  min-height: 3px;
  transition: filter 0.15s, transform 0.15s;
  cursor: default;
}
.mini-bar-col:hover .mini-bar {
  filter: brightness(1.2);
  transform: translateY(-2px);
}
.mini-bar-labels {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  font-size: 10px;
  color: var(--text-muted);
  font-family: ui-monospace, Menlo, monospace;
  text-align: center;
}

/* Full-width sparkline card */
.deck-stats-grid-full {
  margin-top: 16px;
}
.sparkline-card { padding: 22px 26px; }
.sparkline-row {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 24px;
  align-items: center;
}
.sparkline-svg {
  width: 100%;
  height: 80px;
}
.sparkline-svg .sparkline-dot {
  cursor: pointer;
  transition: r 0.12s ease;
}
.sparkline-svg .sparkline-dot:hover { r: 6; }
.sparkline-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
}
.sparkline-summary .row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sparkline-summary .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.sparkline-summary .row strong { color: var(--text); font-family: ui-monospace, Menlo, monospace; }

/* Bracket — suggested state */
.archetype-chip.bracket-suggested {
  background: var(--status-warn-bg);
  color: var(--status-warn);
  border: 1.5px dashed var(--status-warn);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
.archetype-chip.bracket-suggested .needs-confirm {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800;
  background: rgba(217, 119, 6, 0.18);
  color: var(--status-warn);
  padding: 2px 7px;
  border-radius: 4px;
}

@media (max-width: 900px) {
  .deck-stats-grid { grid-template-columns: 1fr; }
  .deck-stats-grid-compact { grid-template-columns: repeat(2, 1fr); }
  .sparkline-row { grid-template-columns: 1fr; }
}

/* Share button near QR */
.deck-share-pair {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.deck-share-pair .share-near-qr {
  padding: 10px 16px;
  background: var(--text);
  color: var(--bg);
  border: 1px solid var(--text);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  align-self: flex-end;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.deck-share-pair .share-near-qr:hover { opacity: 0.85; }

/* Decklist + preview lockup */
.decklist-lockup {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 320px);
  gap: 36px;
  margin-top: 24px;
  align-items: start;
}
.decklist-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 28px 24px;
}
.decklist-cat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.decklist-cat .cat-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
}
.decklist-cat .cat-head .count {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  color: var(--text-dim);
}
.decklist-cat .card-name {
  display: block;
  padding: 4px 6px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  border-radius: 4px;
  cursor: default;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.decklist-cat .card-name:hover {
  background: var(--surface-2);
  color: var(--text);
}
.decklist-cat .card-name.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.card-preview {
  position: sticky;
  top: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card-preview .preview-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.card-preview .preview-img {
  aspect-ratio: 5/7;
  border-radius: 12px;
  background-color: var(--surface-2);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border);
}
.card-preview .preview-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-top: 4px;
  letter-spacing: -0.005em;
}
.card-preview .preview-hint { font-size: 11px; color: var(--text-dim); }

.decklist-note {
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--status-warn-bg);
  color: var(--status-warn);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
}

/* ==========================================================================
   DECK DETAIL v2 — DeckPassport-style passport card (legacy, kept for ref)
   ========================================================================== */
.deck-hero-v2 {
  position: relative;
  padding: 56px 0 40px;
  overflow: hidden;
}
.deck-hero-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--deck-hero-art, none);
  background-size: cover;
  background-position: center 25%;
  opacity: 0.18;
  filter: saturate(1.15) blur(2px);
  pointer-events: none;
  z-index: 0;
}
:root[data-theme="dark"] .deck-hero-v2::before { opacity: 0.28; }
.deck-hero-v2::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, var(--bg) 95%);
  pointer-events: none;
  z-index: 1;
}
.deck-hero-v2 > * { position: relative; z-index: 2; }

.deck-hero-grid-v2 {
  display: grid;
  grid-template-columns: minmax(320px, 440px) 1fr;
  gap: 36px;
  align-items: start;
  margin-top: 20px;
}
.deck-hero-art-v2 {
  aspect-ratio: 4/3;
  background-color: var(--surface-2);
  background-size: cover;
  background-position: center 20%;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.deck-hero-art-v2 .pips-overlay {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  gap: 4px;
  z-index: 2;
}
.deck-hero-art-v2 .bracket-overlay {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 4px 12px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  z-index: 2;
}

.deck-hero-body-v2 {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 12px;
}
.deck-hero-body-v2 h1 {
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.0;
}
.deck-hero-body-v2 .commander-line {
  font-size: 17px;
  color: var(--text-muted);
}
.deck-hero-body-v2 .commander-line strong { color: var(--text); font-weight: 600; }
.deck-hero-body-v2 .archetype-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.deck-hero-body-v2 .deck-tag-lg {
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
}

.deck-record-strip-v2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 4px;
}
.deck-record-strip-v2 > div {
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.deck-record-strip-v2 strong {
  display: block;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: 4px;
}
.deck-record-strip-v2 strong.win { color: var(--status-win); }
.deck-record-strip-v2 strong.loss { color: var(--status-loss); }
.deck-record-strip-v2 span {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

.deck-meta-line {
  font-size: 13px;
  color: var(--text-muted);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.deck-meta-line span strong { color: var(--text); font-weight: 600; }

/* Owner card v2 with avatar */
.owner-card-v2 {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, transform 0.15s;
}
.owner-card-v2:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.owner-card-v2 .avatar {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background-color: var(--surface-2);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.owner-card-v2 .info .label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.owner-card-v2 .info .name { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.owner-card-v2 .info .meta { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.owner-card-v2 .arrow { margin-left: auto; font-size: 24px; color: var(--text-muted); }

/* ==========================================================================
   RECAP v2
   ========================================================================== */
.recap-hero-v2 {
  position: relative;
  padding: 64px 0 36px;
  overflow: hidden;
}
.recap-hero-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--recap-hero-art, none);
  background-size: cover;
  background-position: center 30%;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}
:root[data-theme="dark"] .recap-hero-v2::before { opacity: 0.28; }
.recap-hero-v2::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, var(--bg) 100%);
  pointer-events: none;
  z-index: 1;
}
.recap-hero-v2 > * { position: relative; z-index: 2; }
.recap-hero-v2 h1 {
  font-size: 72px;
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin-bottom: 12px;
}
.recap-hero-v2 .recap-eyebrow { color: var(--text); opacity: 0.7; }
.recap-hero-v2 .recap-subtitle {
  font-size: 22px;
  color: var(--text-muted);
  line-height: 1.4;
  max-width: 64ch;
}

.tldr-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin: 28px 0 56px;
}
.tldr-strip > div {
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.tldr-strip strong {
  display: block;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: 4px;
}
.tldr-strip span {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Recap game card v2 — with winner commander art */
.game-card-v2 {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
  align-items: stretch;
  scroll-margin-top: 24px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.game-card-v2:target {
  border-color: var(--text);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.game-card-v2 .share-link {
  font-size: 11px;
  color: var(--text-muted);
  text-decoration: none;
  margin-left: auto;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: border-color 0.15s, color 0.15s;
}
.game-card-v2 .share-link:hover { color: var(--text); border-color: var(--text); }
.game-card-v2 .winner-art {
  background-color: var(--surface-2);
  background-size: cover;
  background-position: center 22%;
  position: relative;
  align-self: stretch;
  min-height: 200px;
}
.game-card-v2 .winner-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.45) 100%),
    linear-gradient(90deg, transparent 75%, rgba(0,0,0,0.25) 100%);
}
/* Subtle gold edge between art and body to match v4 frame */
.game-card-v2 .winner-art::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent 0%, rgba(201, 168, 73, 0.4) 50%, transparent 100%);
  z-index: 1;
}
.game-card-v2 .body { padding: 18px 22px; display: flex; flex-direction: column; gap: 8px; }
.game-card-v2 .game-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.game-card-v2 .game-meta-line {
  font-size: 12px;
  color: var(--text-dim);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.game-card-v2 .winner-line {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.game-card-v2 .winner-line .deck { color: var(--text-muted); font-weight: 500; font-size: 14px; margin-left: 6px; }
.game-card-v2 .players-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 13px;
  margin-top: 4px;
}
.game-card-v2 .players-line .player-line { color: var(--text-muted); }
.game-card-v2 .players-line .player-line.winner-line-inline { color: var(--text); font-weight: 600; }
.game-card-v2 .notes {
  font-size: 13px;
  color: var(--text-muted);
  background: var(--bg);
  padding: 10px 14px;
  border-radius: 8px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  line-height: 1.5;
  margin-top: 6px;
}

/* Visual recap tiles (recaps index) */
.recap-tile-v2 {
  display: grid;
  grid-template-columns: minmax(160px, 240px) 1fr;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  margin-bottom: 14px;
}
.recap-tile-v2:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.recap-tile-v2 .art {
  aspect-ratio: auto;
  min-height: 160px;
  background-color: var(--surface-2);
  background-size: cover;
  background-position: center 25%;
  position: relative;
}
.recap-tile-v2 .art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(0,0,0,0.45) 100%);
}
.recap-tile-v2 .body { padding: 22px 26px; display: flex; flex-direction: column; gap: 10px; }
.recap-tile-v2 .date { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.recap-tile-v2 .meta { font-size: 13px; color: var(--text-muted); font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
.recap-tile-v2 .winners { font-size: 14px; color: var(--text); display: flex; flex-wrap: wrap; gap: 6px 14px; }
.recap-tile-v2 .winners strong { font-weight: 700; }
.recap-tile-v2 .footer-line {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-muted);
}
.recap-tile-v2 .footer-line .read { color: var(--text); font-weight: 600; }

/* ----------- RESPONSIVE ----------- */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .site-header { padding: 20px; flex-wrap: wrap; gap: 12px; }
  .site-header nav { gap: 16px; }
  .site-header nav a { font-size: 14px; }

  /* The header carries a pod name, page links, and the account chip auth.js
     paints. On a phone that ran off the edge and overlapped — Waid's own name
     collided with a Sign out button. Let it wrap and keep the long bits from
     forcing the row wider than the screen. */
  .site-header nav { flex-wrap: wrap; row-gap: 8px; max-width: 100%; }
  .site-header nav > * { min-width: 0; }
  .site-header nav .auth-slot {
    display: inline-flex; align-items: center; gap: 10px;
    max-width: 100%; min-width: 0;
  }
  .site-header nav .auth-slot > a {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .site-header nav .auth-slot .edh-signout { flex: none; }
  main { padding: 0 20px; }
  .hero { padding: 56px 0 48px; }
  .hero h1 { font-size: 38px; }
  .hero-sub { font-size: 18px; }
  .section { padding: 56px 0; }
  .section h2 { font-size: 28px; }
  .section p { font-size: 16px; }
  .section-cta { padding: 72px 0; }
  .cta-grid { grid-template-columns: 1fr; }
  .site-footer { padding: 32px 20px; flex-direction: column; align-items: flex-start; }
  .pod-hero { padding: 40px 0 32px; }
  .pod-hero h1 { font-size: 32px; }
  .pod-tagline { font-size: 16px; }
  .pod-stats { grid-template-columns: repeat(2, 1fr); }
  .pod-stats strong { font-size: 22px; }
  .pod-section { padding: 40px 0; }
  .pod-section h2 { font-size: 18px; }
  .game-row { grid-template-columns: 80px 1fr; }
  .game-row .game-meta { grid-column: 1 / -1; text-align: left; }
  .player-hero { padding: 40px 0 28px; }
  .player-hero h1 { font-size: 36px; }
  .hero-deck-card { grid-template-columns: 1fr; }
  .hero-deck-art { min-height: 180px; }
  .deck-hero-grid { grid-template-columns: 1fr; gap: 20px; }
  .deck-hero-body h1 { font-size: 32px; }
  .deck-record-strip { grid-template-columns: repeat(2, 1fr); }
  .deck-hero-grid-v3 { grid-template-columns: 1fr; gap: 20px; }
  .deck-hero-body-v3 h1 { font-size: 36px; }
  .deck-tagline { font-size: 18px; }
  /* The Top 5 is the headline of a deck page — the owner picked exactly five
     cards to explain the deck. A narrow screen is not a reason to show three
     of them, which is what hiding slots 4 and 5 used to do. Wrap instead. */
  .top5-grid { grid-template-columns: repeat(3, 1fr); }
  @media (max-width: 480px) { .top5-grid { grid-template-columns: repeat(2, 1fr); } }
  .decklist-lockup { grid-template-columns: 1fr; }
  /* The preview belongs ABOVE the list on a phone. Source order puts the list
     first, which is right for a wide screen where the pane sits alongside, and
     wrong for a narrow one where it lands somewhere below the fold and nobody
     ever sees the card they just tapped. Sticky so it stays put while the list
     scrolls under it. */
  .card-preview {
    order: -1;
    position: sticky;
    top: 0;
    z-index: 5;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 12px;
  }
  .card-preview .preview-label,
  .card-preview .preview-hint { display: none; }
  .card-preview .preview-img {
    width: 86px; flex: none; aspect-ratio: 5/7; margin: 0;
  }
  .card-preview .preview-name {
    font-size: 15px; text-align: left; margin: 0;
  }
  .pod-hero-v2 h1 { font-size: 36px; }
  .pod-hero-v2 { padding: 40px 0 32px; }
  .pod-stats-v2 strong { font-size: 26px; }
  .night-featured { grid-template-columns: 1fr; }
  .night-featured-art { min-height: 200px; }
  .lb-preview-v2 .lb-row-v2 { grid-template-columns: 28px 32px 1fr auto; }
  .lb-preview-v2 .lb-record-v2 { display: none; }
  .player-hero-v2 { padding: 48px 0 32px; }
  .player-hero-v2 h1 { font-size: 40px; }
  .hero-deck-card-v2 { grid-template-columns: 1fr; }
  .hero-deck-card-v2 h3 { font-size: 24px; }
  .deck-hero-v2 { padding: 40px 0 28px; }
  .deck-hero-grid-v2 { grid-template-columns: 1fr; gap: 20px; }
  .deck-hero-body-v2 h1 { font-size: 36px; }
  .deck-record-strip-v2 { grid-template-columns: repeat(2, 1fr); }
  .recap-hero-v2 { padding: 48px 0 28px; }
  .recap-hero-v2 h1 { font-size: 44px; }
  .recap-hero-v2 .recap-subtitle { font-size: 17px; }
  .game-card-v2 { grid-template-columns: 1fr; }
  .game-card-v2 .winner-art { min-height: 120px; aspect-ratio: 16/6; }
  .recap-tile-v2 { grid-template-columns: 1fr; }
  .recap-tile-v2 .art { aspect-ratio: 16/9; min-height: 0; }
  .game-row-v2 { grid-template-columns: 60px 32px 1fr; }
  .game-row-v2 .gmeta { grid-column: 1 / -1; }
}

/* ============================================================================
   SYNTHWAVE — from the gradient cover collection, S107
   ----------------------------------------------------------------------------
   Scoped to chrome: background gradients, CTAs, controls, edges.

   Deck pages are deliberately EXEMPT. A deck page is already coloured by its
   commander's identity and its card art, and that is the right call for those
   pages — a brand gradient behind Magic art just makes both louder. The
   palette takes the rest of the site.

   Light is not the dark palette at lower opacity. Measured against #fafaf9,
   seven of the eight source neons fail 4.5:1 — #50d0d0 lands at 1.78 — so the
   light set is genuinely different pigment, darkened until it holds, with the
   neons kept for the black ground they were drawn for.

   Hues were checked against the colours already carrying meaning here (win /
   loss, the eight composition types). Everything sits within ~20 degrees of
   something semantic, so placement does the work:

     violet   primary accent. Clashes only with sorcery-purple, which lives in
              the composition legend beside a text label, never on a control.
     cyan     focus and hover ONLY — 19 degrees from win-green, so it stays
              transient rather than sitting static beside a W/L record.
     magenta  gradients only. 15 degrees from the pink type swatch, 40 from
              loss red. The most crowded region on the wheel; never a control.
   ========================================================================= */
:root {
  --accent:      #8712d4;
  --accent-2:    #227d7d;
  --accent-soft: #f6edfd;
  --accent-on:   #ffffff;
  --edge:        linear-gradient(90deg, #8712d4 0%, #227d7d 100%);
  --grad-hero:   linear-gradient(140deg, #d9c0f7 0%, #efe4fb 45%, #b9e6e6 100%);
  --grad-cta:    linear-gradient(120deg, #8712d4 0%, #b3187a 100%);
  --grad-page:   linear-gradient(160deg, #e6d4fa 0%, #f4ecfc 34%, #f7f5fb 60%, #c9ecec 100%);
}
:root[data-theme="dark"] {
  --accent:      #b050f0;
  --accent-2:    #50d0d0;
  --accent-soft: #1c1033;
  --accent-on:   #0d0d0d;
  --edge:        linear-gradient(90deg, #b050f0 0%, #50d0d0 100%);
  --grad-hero:   linear-gradient(140deg, #35155e 0%, #150c26 52%, #0f3a3d 100%);
  --grad-cta:    linear-gradient(120deg, #b050f0 0%, #d01090 100%);
  --grad-page:   linear-gradient(160deg, #2a1450 0%, #140a24 35%, #09090b 62%, #0d3033 100%);
}

/* CTA. Text is --accent-on, not --bg, so it stays legible on the gradient in
   both modes instead of inheriting whatever the surface happens to be. */
.btn-primary {
  background: var(--grad-cta);
  color: var(--accent-on);
  border-color: transparent;
}
.btn-primary:hover { opacity: .9; }

/* Controls. The only place cyan appears, and only while focused. */
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }


/* ============================================================================
   FORMS — the shared controls (S130, DESIGN-SYSTEM Debt #8)
   ----------------------------------------------------------------------------
   Every page used to re-invent these locally, which is how a field rule
   styled the checkboxes in /app/decks' tag panel as text inputs. One set,
   here, documented in docs/DESIGN-SYSTEM.md § Forms and rendered on
   /styleguide/. Pages migrate on touch.

   .field         label + input/textarea/select stack, with .hint below
   .check-row     a checkbox (or radio) with its label and an optional .n count
   .dd            <details> dropdown: .dd > summary.dd-btn + .dd-panel
   .dd-panel      the floating panel (scrolls inside itself; full-width on phones)
   .filter-pill   the toggle pills used across filters (.on when selected)
   .seg           a segmented control: .seg > button/a, .on for the active one
   ========================================================================= */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.field > label .opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-dim); }
.field input:not([type=checkbox]):not([type=radio]):not([type=color]),
.field textarea, .field select {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 16px;
  padding: 10px 12px; border-radius: 9px; border: 1px solid var(--border-strong);
  background: var(--bg); color: var(--text);
}
.field textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.field .hint { font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.field.err input, .field.err textarea, .field.err select { border-color: var(--status-loss); }
.field .err-msg { font-size: 12px; color: var(--status-loss); }

.check-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 7px; cursor: pointer; font-size: 13.5px; }
.check-row:hover { background: var(--surface-2); }
.check-row input[type=checkbox], .check-row input[type=radio] { flex: none; width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--text); }
.check-row > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.check-row .n { margin-left: auto; font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

.dd { position: relative; display: inline-block; }
.dd > summary, .dd-btn { list-style: none; cursor: pointer; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text-muted); white-space: nowrap; user-select: none; background: transparent; font-family: inherit; }
.dd > summary::-webkit-details-marker { display: none; }
.dd > summary:hover, .dd-btn:hover { color: var(--text); border-color: var(--text-muted); }
.dd[open] > summary, .dd.has > summary { background: var(--text); color: var(--bg); border-color: var(--text); }
.dd-panel { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 240px; max-height: 320px; overflow: auto;
  background: var(--bg); border: 1px solid var(--border-strong); border-radius: 12px; padding: 8px; box-shadow: var(--shadow-lg); }
.dd-panel .dd-search { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 6px 10px; margin-bottom: 6px; border-radius: 8px; border: 1px solid var(--border-strong); background: none; color: var(--text); }
.dd-panel .dd-clear { font: inherit; font-size: 12px; padding: 4px 8px; margin-top: 4px; border: none; background: none; color: var(--text-muted); cursor: pointer; text-decoration: underline; }
@media (max-width: 540px) {
  .dd { position: static; }
  .dd-panel { left: 0; right: 0; top: 100%; min-width: 0; max-height: 50vh; }
}

.filter-pill { font: inherit; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text-muted); background: transparent; cursor: pointer; white-space: nowrap; text-decoration: none; }
.filter-pill:hover { color: var(--text); border-color: var(--text-muted); }
.filter-pill.on { background: var(--text); color: var(--bg); border-color: var(--text); }

.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 9px; overflow: hidden; }
.seg > button, .seg > a { font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; text-decoration: none; }
.seg > button + button, .seg > a + a { border-left: 1px solid var(--border-strong); }
.seg > .on { background: var(--text); color: var(--bg); }

/* Edges. A 2px gradient rule reads as brand without tinting a whole surface. */
.site-header { position: relative; }
.site-header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--edge);
}

/* Background gradients belong on the PAGE. First pass put them on .hero, which
   is a section — so only the masthead area tinted and the rest of the document
   stayed flat --bg. Fixed attachment so the ramp spans the viewport once
   instead of tiling down a long scroll.

   Deck pages opt out entirely: their colour comes from the commander's
   identity and the card art, which is the right call for those pages. */
body {
  background-image: var(--grad-page);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
}
body.deck-page-v4 { background-image: none; }

.auth-shell, .join-shell { background-image: var(--grad-hero); }

/* ---------------------------------------------------------------------------
   More of the palette. The first pass only touched CTAs and a focus ring,
   which is not a look — it's a hint. These are the surfaces that can carry
   colour without colliding with anything that already means something:
   links, tags, section rules, card edges, active nav, and the accent number.
   Win/loss and the eight composition colours are still untouched.
   ------------------------------------------------------------------------ */

a { color: var(--accent); }
a:hover { color: var(--accent-2); }
.site-header .brand { color: var(--text); }

/* Nav: current page gets the accent and a matching underline. */
.site-header nav a.active,
.site-header nav a[aria-current="page"] { color: var(--accent); }

/* Secondary buttons pick up the accent on hover rather than going grey. */
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

/* Tags and pills — accent tint instead of a neutral outline. Excludes the
   no-list warning tag, which is amber on purpose. */
.tag:not(.nolist) {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent);
}

/* Section rules: a short gradient rule under a heading reads as brand at a
   glance and costs nothing structurally. */
.section-head, .stats-section-title { position: relative; }
.section-head::after {
  content: ''; position: absolute; left: 0; bottom: -1px;
  width: 46px; height: 2px; background: var(--edge);
}

/* Cards get a hairline gradient top edge. Subtle at 2px, and it ties the
   whole grid together without tinting any surface. */
.stats-card, .pod-section > .deck-card, .dcard {
  position: relative; overflow: hidden;
}
.stats-card::before, .dcard::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: var(--edge); opacity: .55;
}

/* Big numbers carry the accent — the one place a stat should be coloured,
   because it's the thing you're meant to read first. */
.compact-bigstat strong, .stats-card .label { color: var(--accent); }

/* ============================================================================
   MARKETING VISUALS   (S107)
   ----------------------------------------------------------------------------
   Four sections shipped a dashed box reading "Visual coming Wed" — naming a
   Wednesday that had passed. These replace them.

   Built in CSS rather than as screenshots, for three reasons that all happen to
   also be the fastest route: they inherit the palette so they work in light and
   dark without a second export, they cost no binary assets on a site whose new
   half is otherwise self-contained, and they can't go stale the way a
   screenshot of a UI does the moment that UI changes.

   The figures shown are the pod's real ones — Bryan 13-17, Adam 4-26 — because
   inventing flattering numbers for a page about honest stats would be a strange
   thing to do.
   ========================================================================= */
.viz { margin-top: 28px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); padding: 22px; overflow: hidden; }
.viz-cap { margin-top: 12px; font-size: 12.5px; color: var(--text-dim);
  text-align: center; letter-spacing: .02em; }

/* --- TV + phone ---------------------------------------------------------- */
.viz-stage { display: flex; gap: 20px; align-items: flex-end; justify-content: center;
  flex-wrap: wrap; }
.viz-tv { flex: 1 1 380px; max-width: 520px; border: 1px solid var(--border-strong);
  border-radius: 10px; background: var(--bg); padding: 16px; position: relative; }
.viz-tv::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--grad-cta); border-radius: 10px 10px 0 0; }
.viz-tv-head { display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 14px; }
.viz-code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-weight: 700;
  letter-spacing: .22em; color: var(--accent); }
.viz-seats { display: flex; flex-direction: column; gap: 7px; }
.viz-seat { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px;
  align-items: center; padding: 8px 10px; border-radius: 7px;
  background: var(--surface-2); font-size: 13px; }
.viz-seat.act { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.viz-seat .pip { width: 22px; height: 22px; border-radius: 50%; display: grid;
  place-items: center; font-size: 10px; font-weight: 700; color: #fff;
  /* These are SEAT dots (player colors + initial), not mana pips — undo the
     mana base's text hiding, which was eating the initials (found during the
     S118 pip consolidation; the letters had been invisible on the homepage). */
  text-indent: 0; overflow: visible; }
.viz-seat .life { font-variant-numeric: tabular-nums; font-weight: 600; }
.viz-seat.out { opacity: .42; }
.viz-seat.out .life { font-size: 10px; letter-spacing: .1em; }
.viz-phone { flex: 0 0 172px; border: 1px solid var(--border-strong); border-radius: 20px;
  background: var(--bg); padding: 14px 12px 16px; }
.viz-notch { width: 40px; height: 4px; border-radius: 3px; background: var(--border-strong);
  margin: 0 auto 12px; }
.viz-phone-who { font-size: 12px; color: var(--text-muted); text-align: center;
  margin-bottom: 2px; }
.viz-phone-life { font-size: 38px; font-weight: 700; text-align: center; line-height: 1.1;
  font-variant-numeric: tabular-nums; }
.viz-btns { display: flex; gap: 6px; margin: 12px 0 10px; }
.viz-btn { flex: 1; text-align: center; padding: 8px 0; border-radius: 7px;
  border: 1px solid var(--border-strong); font-size: 15px; font-weight: 700;
  color: var(--text-muted); }
.viz-btn.pri { background: var(--grad-cta); color: #fff; border-color: transparent; }
.viz-tag { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  text-align: center; color: var(--text-dim); }

/* --- leaderboard / records ----------------------------------------------- */
.viz-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px; }
.viz-h { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 11px; }
.viz-row { display: grid; grid-template-columns: 14px 1fr auto; gap: 9px;
  align-items: center; padding: 5px 0; font-size: 13px; }
.viz-row .rk { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.viz-bar { height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.viz-bar i { display: block; height: 100%; background: var(--grad-cta); }
.viz-rec { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.viz-mix { display: flex; height: 9px; border-radius: 5px; overflow: hidden; margin-bottom: 10px; }
.viz-mix i { display: block; height: 100%; }
.viz-leg { display: flex; flex-wrap: wrap; gap: 7px 14px; font-size: 11.5px;
  color: var(--text-muted); }
.viz-leg span { display: inline-flex; align-items: center; gap: 5px; }
.viz-sw { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

/* --- recap --------------------------------------------------------------- */
.viz-recap-tl { font-size: 19px; font-weight: 700; margin-bottom: 4px; }
.viz-recap-sub { font-size: 12.5px; color: var(--text-dim); margin-bottom: 16px; }
.viz-stats { display: flex; gap: 26px; flex-wrap: wrap; padding-top: 14px;
  border-top: 1px solid var(--border); }
.viz-stat b { display: block; font-size: 21px; font-weight: 700; line-height: 1.2; }
.viz-stat span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dim); }

@media (max-width: 640px) {
  .viz { padding: 16px; }
  .viz-stage { gap: 14px; }
  .viz-phone { flex: 1 1 100%; max-width: 220px; margin: 0 auto; }
}

/* ============================================================================
   LEADERBOARD — MOBILE   (S109)
   ----------------------------------------------------------------------------
   The leaderboard page had NO media queries at all. Measured on a 390px phone:
   the 8-column table wants 576px against 358px of content width — 218px of
   overflow, about 60% too wide. That is the "wonky" Adam reported.

   Below 720px the table stops being a table and becomes stacked cards. Each
   data cell carries its column name via a data-label attribute rendered as a
   ::before, so the numbers stay legible instead of being read against a header
   row that has scrolled off to the left. The name row keeps the avatar and
   spans the full width; everything else becomes a label/value pair.

   Chose reflow over horizontal scroll deliberately: a leaderboard is scanned,
   and side-scrolling to find out whether you are above par defeats the point.
   ========================================================================== */
@media (max-width: 720px) {
  .lb-table thead { display: none; }
  .lb-table, .lb-table tbody, .lb-table tr, .lb-table td { display: block; width: 100%; }

  .lb-table tr {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    background: var(--surface);
  }
  .lb-table td { border: 0 !important; padding: 5px 0 !important; }

  /* Rank + player ride together on the card's first line. */
  .lb-table td.rank-cell {
    display: inline-block; width: auto; font-size: 13px;
    color: var(--text-dim); margin-right: 8px; vertical-align: middle;
  }
  .lb-table td.player-cell {
    display: inline-block; width: auto; vertical-align: middle;
    padding-bottom: 10px !important;
  }

  /* Every remaining cell becomes "Label ......... value". */
  .lb-table td.num {
    display: flex; justify-content: space-between; align-items: center;
    text-align: right; font-size: 14px;
    border-top: 1px solid var(--border) !important; padding: 8px 0 !important;
  }
  .lb-table td.num::before {
    content: attr(data-label);
    font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
    color: var(--text-muted); font-family: inherit; font-weight: 600;
    text-align: left; margin-right: 12px;
  }
  /* A cell with no label (shouldn't happen) must not collapse weirdly. */
  .lb-table td.num:not([data-label])::before { content: ''; }
}

/* ---- deck leaderboard --------------------------------------------------- */
.dl-toggle { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px;
  background: var(--surface-2); margin-bottom: 16px; flex-wrap: wrap; }
.dl-toggle button { border: 0; background: none; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  padding: 7px 14px; border-radius: 7px; }
.dl-toggle button[aria-pressed="true"] { background: var(--grad-cta); color: #fff; }
.dl-par { font-size: 12.5px; color: var(--text-muted); margin: 0 0 16px;
  line-height: 1.6; }
.dl-par b { color: var(--text); }
.dl-rows { display: flex; flex-direction: column; gap: 8px; }
/* .dl-row is an <a>, so it inherits the document link styling - underlines on
   every line of every row and visited-purple on the names. Reset it here and
   let the row itself carry the affordance via hover. */
.dl-row { display: grid; grid-template-columns: 26px 40px 1fr auto;
  gap: 12px; align-items: center; padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface);
  text-decoration: none; color: var(--text);
  transition: border-color .12s ease, transform .12s ease; }
.dl-row:hover { border-color: var(--accent); transform: translateX(2px); }
.dl-row:visited { color: var(--text); }
.dl-row * { text-decoration: none; }
.dl-row.top { border-color: var(--accent); }
.dl-rk { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.dl-art { width: 40px; height: 40px; border-radius: 7px; object-fit: cover;
  background: var(--surface-2); display: block; }
/* display:block is load-bearing. As an inline span, text-overflow:ellipsis
   never engages and a long commander name pushes the whole row past the
   viewport - which is exactly what it did: 303px of content reaching to 420px
   in a 390px window. The wrapper needs min-width:0 for the same reason, since
   a grid item's default min-width:auto refuses to shrink below its content. */
.dl-cell { display: block; min-width: 0; overflow: hidden; }
.dl-nm { display: block; font-size: 14px; font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-right { text-align: right; white-space: nowrap; }
.dl-rec { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dl-pct { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.dl-pct.over { color: #1BBA01; }
.dl-empty { padding: 20px 0; font-size: 13.5px; color: var(--text-muted); }
@media (max-width: 480px) {
  .dl-row { grid-template-columns: 20px 34px 1fr auto; gap: 9px; padding: 8px 10px; }
  .dl-art { width: 34px; height: 34px; }
}

/* ============================================================================
   S115 — TABLET BAND (541–720px)
   Every query in this codebase is max-width, so a 600px viewport already
   inherits the 720/700/640/620 rules — and most of those ARE tablet-tuned
   (deck pages land on 48/24 padding, recap hero on 20, pod hero on 20). The
   band is NOT the wasteland it looked like from the outside, and bulk-moving
   the phone block up to 720 would have been a bug: same specificity, later in
   source order, so phone values would have overridden good tablet ones.

   Only two things genuinely fall through. Both are fixed here, at tablet
   values — not phone values.

   1. .pod-hero-identity keeps its desktop 28px/32px until 540px. At 600px
      that stacks main(20) + hero(20) + identity(32) = 72px per side — 24% of
      the screen gone to padding, the worst moat left anywhere in the band.
   2. The .see-all nowrap overflow. Found on phones at S113, but the cause is
      a long meta string in a non-wrapping flex row, and that overruns a 600px
      screen too. Horizontal shove breaks the whole page rather than one
      component, so it gets the wider net. Moved UP from the 540 block rather
      than duplicated — 720 already covers phones.
   Same reason input sizing moved: iOS focus-zoom isn't phone-exclusive, and
   16px controls are correct on a tablet anyway.

   Placed BEFORE the S113 phone block on purpose. Equal specificity means
   source order decides, and at ≤540px the phone values must still win.
   ========================================================================= */
@media (max-width: 720px) {
  .pod-hero-v5 .pod-hero-identity { padding: 22px 20px; }

  /* overflow guard — see note 2 above */
  .pod-section .section-head { flex-wrap: wrap; row-gap: 4px; }
  .see-all { white-space: normal; }

  /* iOS auto-zooms any focused field under 16px. Bigger type is the fix;
     a maximum-scale hack would break pinch-zoom for people who need it. */
  input, select, textarea { font-size: 16px; }

  /* ⚠️ The rule above is (0,0,1) and loses to ANY class-scoped field rule.
     A sweep at S115 found 21 such rules across the site — meaning the S113
     zoom fix silently never reached most real fields, including every one in
     the deck editor and all three auth forms. Those are fixed at matching
     specificity in their own files; this is the one that lives here. */
  .player-hero-v5 .pcs-select { font-size: 16px; }
}

/* ============================================================================
   S113 — PHONE MARGIN COMPRESSION
   (Adam: "there is really large margins and we arent really optimizing for
   mobile.")
   The v4/v5 templates nest shell → gold frame → glass card, each layer with
   its own padding. Handsome at desktop; on a phone the three layers were
   spending 60–100px per side before any content — a third of a 390px screen.
   At phone width the frame is a border, not a moat: gutters collapse and each
   card keeps just enough padding to still read as a card.
   Measured before (606px CSS viewport): pod hero text at x≈91, recap prose at
   x≈57, deck hero at x≈67. Target: first text within ~28px of the edge.
   Deliberately LAST in the file: same specificity as the template rules, so
   source order decides, and this block must win.
   ========================================================================= */
@media (max-width: 540px) {
  /* shells and gutters */
  main { padding: 0 10px; }
  .deck-page-shell-v4 { margin: 8px auto; padding: 0 4px; }

  /* the gold frame becomes a border, not a moat */
  .deck-top-hero-v4 { padding: 16px 10px 14px; border-radius: 14px 14px 0 0; }
  .deck-content-card-v4 { padding: 18px 12px; border-radius: 0 0 14px 14px; }

  /* pod hero: frame → hero grid → glass identity card, each compressed */
  .pod-hero-v5 { padding: 8px 4px; gap: 16px; grid-template-columns: 1fr; }
  .pod-hero-v5 .pod-hero-identity { padding: 18px 16px; gap: 10px; }
  .pod-hero-v5 h1 { font-size: 34px; }

  /* recap pages: same nesting, same cure */
  .recap-broadcast { padding: 18px 14px 20px; }
  .recap-broadcast .broadcast-title { font-size: 30px; }
  .recap-broadcast .broadcast-prose p { font-size: 16px; }

  /* headline type was desktop-scaled — two lines of screen per H1 on a phone */
  .hero h1 { font-size: 32px; }
  .pod-hero-v2 h1, .player-hero-v2 h1 { font-size: 32px; }
  .deck-hero-body-v4 h1, .deck-hero-body-v3 h1 { font-size: 30px; }

  /* vertical rhythm tightens with the horizontal */
  .hero { padding: 40px 0 32px; }
  .section { padding: 40px 0; }
  .pod-section { padding: 28px 0; }
  .pod-hero-v2, .player-hero-v2 { padding: 28px 0 22px; }

  /* (.see-all nowrap overflow moved UP to the S115 720px tier — the long
     meta string "Mar 27 → Jul 18 · 30 games over 7 nights · final" shoves a
     600px screen too, not just a 390px one.) */

  /* Nested radii (Adam caught this on his phone: "we're also breaking the
     rounded corners on the gold frame"). An inner corner must be tighter than
     the frame it sits in — inner ≈ outer − gap. The 16px glass cards were
     overrunning a 14px frame curve across a 10px gutter. Frame goes to 16,
     corner-adjacent cards go to 7. */
  .deck-top-hero-v4 { border-radius: 16px 16px 0 0; }
  .pod-hero-v5 .pod-hero-identity { border-radius: 7px; }
  .pod-hero-v5 .pod-hero-mosaic-wrap { border-radius: 7px; }
  .recap-hero-v5 { padding: 12px 8px; gap: 14px; }
  .recap-hero-v5 .recap-date-block,
  .recap-hero-v5 .recap-headline-block { border-radius: 7px; }

  /* (16px form controls moved UP to the S115 720px tier — iOS focus-zoom
     isn't phone-exclusive and 16px is correct on a tablet regardless.) */
}

/* ═══ S114 — first-mention links in recap prose ═══════════════════════════
   Adam's blog rule: the first time a person or deck is named in a write-up it
   links to them. These sit INSIDE body copy, so they must read as prose that
   happens to be tappable — not as a wall of blue. Underline on hover only,
   colour carried from the accent at low emphasis. */
.edh-mention {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(230, 114, 1, .45);
  transition: border-color .15s ease, color .15s ease;
}
.edh-mention:hover,
.edh-mention:focus-visible {
  color: var(--accent, #E67201);
  border-bottom-color: var(--accent, #E67201);
}
.edh-mention-deck { border-bottom-style: dotted; }
@media (hover: none) {
  /* Touch devices get a slightly stronger cue since there's no hover to reveal it. */
  .edh-mention { border-bottom-color: rgba(230, 114, 1, .6); }
}

/* ============================================================================
   ACCESSIBILITY (S130 pass)
   ---------------------------------------------------------------------------- */
/* Skip link — nav.js injects it as the first thing in <body> on any page with
   a <main>. Invisible until it has keyboard focus. */
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 1000; padding: 10px 14px;
  border-radius: 8px; background: var(--text); color: var(--bg); font-weight: 700;
  text-decoration: none; transition: top .12s; }
.skip-link:focus-visible { top: 12px; outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* Motion is a preference. Life curves, sparklines and hover lifts all fall
   back to instant when the OS says so. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ============================================================================
   BRAND PREVIEW — "Electric + lime"   (S130, docs/BRAND.md)
   ----------------------------------------------------------------------------
   THE BRAND, as of Sep 9 2026. nav.js sets <html data-brand="electric">
   for everyone (?brand=off opts a browser out while the old tokens still
   exist). Next housekeeping pass: fold these values into the base blocks
   above and drop the [data-brand] wrapper.
   ========================================================================= */
:root[data-brand="electric"] {
  --violet: #7c3aed; --deep: #5b21b6; --teal: #14b8a6; --cyan: #22d3ee; --lime: #a3e635;
  --accent:      var(--violet);
  --accent-2:    #0e7490;                 /* cyan, darkened for paper */
  --accent-soft: #ede9fe;
  --accent-on:   #070a14;                 /* ink on the CTA gradient — white fails on the lime end */
  --link:        #0e7490;
  --live:        #4d7c0f;
  --g-mark: radial-gradient(ellipse 45% 85% at 50% 88%, #a3e635 0%, #14b8a6 32%, #7c3aed 70%, #5b21b6 100%);
  --g-cta:  radial-gradient(ellipse 120% 200% at 100% 50%, #a3e635 0%, #14b8a6 30%, #7c3aed 70%, #5b21b6 100%);
  --g-icon: radial-gradient(circle at 50% 50%, #a3e635 0%, #14b8a6 30%, #7c3aed 70%, #5b21b6 100%);
  --g-rule: linear-gradient(90deg, #7c3aed, #14b8a6, #a3e635);
  --edge:     var(--g-rule);
  --grad-cta: var(--g-cta);
  --grad-hero: linear-gradient(140deg, #ede9fe 0%, #f8fafc 45%, #ccfbf1 100%);
  --grad-page: linear-gradient(160deg, #ede9fe 0%, #f5f3ff 34%, #f8fafc 60%, #ccfbf1 100%);
  /* gold retires as chrome: frames go to a violet hairline */
  --gold: #7c3aed; --gold-dark: #5b21b6; --gold-light: #a78bfa;
  --bg: #f8fafc; --text: #070a14;
}
:root[data-brand="electric"][data-theme="dark"] {
  /* dark: violet as TEXT must be the light tints — #8b5cf6 is 4.1:1 on ink,
     and --gold-dark is used as text on several pages (Adam: "hard to read"). */
  --accent:      #a78bfa;                 /* 6.6:1 on ink */
  --accent-2:    #22d3ee;
  --accent-soft: #2e1065;
  --accent-on:   #070a14;
  --link:        #22d3ee;
  --live:        #a3e635;
  --grad-hero: linear-gradient(140deg, #2e1065 0%, #0b0f1e 52%, #042f2e 100%);
  --grad-page: linear-gradient(160deg, #2e1065 0%, #12082a 35%, #070a14 62%, #042f2e 100%);
  --gold: #a78bfa; --gold-dark: #c4b5fd; --gold-light: #ddd6fe;
  --bg: #070a14; --text: #f8fafc;
}
/* the mark, as a mask so any fill applies */
[data-brand="electric"] .site-header .brand { display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 600; font-size: 23px; letter-spacing: -0.02em; }
[data-brand="electric"] .brand-mark {
  /* 33px, middle-aligned with the wordmark (Adam). Header may grow; fine. */
  display: inline-block; width: 33px; height: 33px; flex: none;
  background: var(--g-mark);
  -webkit-mask: url(../assets/mark.png) center / contain no-repeat; mask: url(../assets/mark.png) center / contain no-repeat;
}
/* Buttons. Everyday primary = flat violet. The gradient is reserved for the
   big door (.btn-lg / .btn-cta). The header's "Start your pod" is a ring —
   Adam: "gaudy" at that size. */
[data-brand="electric"] .btn-primary { background: #7c3aed; color: #fff; border-color: transparent; text-shadow: none; }
/* No gradient-FILLED buttons anywhere (Adam, Sep 9: "gross"). The CTA is
   the ring — gradient border, ground fill, ink/paper text — in the header
   and on the hero alike. --g-cta stays defined for non-button surfaces. */
[data-brand="electric"] .btn-primary.btn-lg, [data-brand="electric"] .btn-cta, [data-brand="electric"] .site-header .btn-primary {
  position: relative; background: var(--bg); color: var(--text); border: 2px solid transparent; background-clip: padding-box; }
[data-brand="electric"] .site-header .btn-primary { padding: 7px 14px; }
[data-brand="electric"] .btn-primary.btn-lg::before, [data-brand="electric"] .btn-cta::before, [data-brand="electric"] .site-header .btn-primary::before {
  content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: var(--g-rule);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
[data-brand="electric"] .btn-primary.btn-lg:hover, [data-brand="electric"] .btn-cta:hover, [data-brand="electric"] .site-header .btn-primary:hover { background: var(--accent-soft); opacity: 1; }
/* Pod hero eyebrow over a banner: the frosted card was too thin and the
   eyebrow color too light to survive a busy photo (Adam). Applies to every
   brand, it's a legibility fix. */
.pod-hero-v5 .pod-hero-identity { background: rgba(255, 255, 255, 0.8); }
[data-theme="dark"] .pod-hero-v5 .pod-hero-identity { background: rgba(12, 12, 16, 0.78); }
.pod-hero-v5 .pod-eyebrow { color: var(--text); opacity: .72; }
/* CTA ring: gradient border, ground fill, ink/paper text */
[data-brand="electric"] .btn-cta-ring { position: relative; background: var(--bg); color: var(--text); border: 2px solid transparent; background-clip: padding-box; }
[data-brand="electric"] .btn-cta-ring::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: var(--g-rule);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
/* header rule: purple → green like every rule (Adam, Sep 9) */
[data-brand="electric"] .site-header::after { background: var(--g-rule); }
/* section rules: full-width gradient hairline, lime on the right */
[data-brand="electric"] .section-head::after { width: 100%; height: 2px; background: var(--g-rule); opacity: .9; }
/* links inside prose go cyan; focus stays violet */
[data-brand="electric"] .section a, [data-brand="electric"] .see-all { color: var(--link); text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent); }
[data-brand="electric"] input:focus-visible, [data-brand="electric"] select:focus-visible, [data-brand="electric"] textarea:focus-visible,
[data-brand="electric"] button:focus-visible, [data-brand="electric"] a:focus-visible { outline-color: var(--violet); }
/* live signal */
[data-brand="electric"] .live-dot, [data-brand="electric"] .pill-live { color: var(--live); border-color: var(--live); }