/* ============================================================
   Player Page V3 — PRODUCTION (scoped)
   Source: preview/player-page-v3.css  ·  built by scripts/build-player-page-v3-css.mjs
   Active when body.pp-v3-open + #detailView.pp-v3
   ============================================================ */

/* ============================================================
   Player Page v3 — V1 story chapters + V2 depth blocks
   Linked exclusively from preview/player-page-v3.html
   Does NOT load on the live site. Production openPlayer untouched.
   ============================================================ */

body.pp-v3-open {
  /* PTB foundation + strong chapter team identity (early V1 / first V3) */
  --ptb-bg: #0c1018;
  --ptb-surface: #121722;
  --ptb-elevated: #161c28;
  --ptb-border: rgba(255, 255, 255, 0.08);
  --ptb-border-strong: rgba(255, 255, 255, 0.14);
  --text: #e8ecf2;
  --muted: #7a8498;
  --soft: #9aa3b2;
  --body: #c2cad8;
  --gold: #ffa64d;
  --gold-soft: #ffd089;
  --gold-glow: rgba(255, 166, 77, 0.45);
  --dc-radius: 18px;
  --dc-ease: cubic-bezier(.22, .9, .28, 1);
  /* Default: Knicks — primary blue wash + light secondary orange corner */
  --team: #006BB6;
  --team-s: #F58426;
  --team-wash-40: rgba(0, 107, 182, 0.40);
  --team-wash-22: rgba(0, 107, 182, 0.24);
  --team-wash-10: rgba(0, 107, 182, 0.12);
  --team-wash-38: rgba(0, 107, 182, 0.38);
  --team-s-wash: rgba(245, 132, 38, 0.12);
  --chapter-accent: #006BB6;
  --accent-wash: rgba(0, 107, 182, 0.12);
  --nav-h: 52px;
  --banner-h: 44px;
  --theme-ms: 480ms;
  --radius: 14px;
  --radius-lg: 16px;
  --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
}

body.pp-v3-open {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
  /*
   Atmospheric chapter wash:
   - Primary team color = main page tint (top-right + bottom)
   - Secondary (e.g. NYK orange) = light corner accent only — never full page
   Wins over theme.css solid fills when body.pp-v3-open is set.
   */
  background:
    radial-gradient(ellipse 72% 46% at 74% -8%, var(--team-wash-22), transparent 54%),
    radial-gradient(ellipse 58% 38% at 6% 10%, var(--team-s-wash, transparent), transparent 56%),
    radial-gradient(ellipse 82% 52% at 42% 100%, var(--team-wash-10), transparent 52%),
    linear-gradient(180deg, #10151f 0%, var(--ptb-bg) 35%, #0a0d14 100%) !important;
  background-attachment: fixed !important;
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition:
    background var(--theme-ms) var(--dc-ease),
    color var(--theme-ms) ease;
}

body.pp-v3-open.is-theming::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  background: radial-gradient(ellipse 80% 60% at 50% 20%, var(--team-wash-22), transparent 70%);
  animation: themeFlash 520ms var(--dc-ease) forwards;
}
@keyframes themeFlash {
  0%   { opacity: 0.55; }
  100% { opacity: 0; }
}

/* Dallas — official navy primary wash (silver secondary is subtle) */
body.pp-v3-open.chapter-dal {
  --team: #00538C;
  --team-s: #B8C4CE;
  --team-wash-40: rgba(0, 83, 140, 0.42);
  --team-wash-22: rgba(0, 83, 140, 0.28);
  --team-wash-10: rgba(0, 83, 140, 0.14);
  --team-wash-38: rgba(0, 83, 140, 0.38);
  --team-s-wash: rgba(184, 196, 206, 0.08);
  --chapter-accent: #00538C;
  --accent-wash: rgba(0, 83, 140, 0.14);
}
/* Knicks — official blue primary wash + light orange corner */
body.pp-v3-open.chapter-nyk {
  --team: #006BB6;
  --team-s: #F58426;
  --team-wash-40: rgba(0, 107, 182, 0.40);
  --team-wash-22: rgba(0, 107, 182, 0.24);
  --team-wash-10: rgba(0, 107, 182, 0.12);
  --team-wash-38: rgba(0, 107, 182, 0.38);
  --team-s-wash: rgba(245, 132, 38, 0.12);
  --chapter-accent: #006BB6;
  --accent-wash: rgba(0, 107, 182, 0.12);
}
/* Hawks — primary red only; never volt/chartreuse secondary #C1D32F */
body.pp-v3-open.chapter-atl {
  --team: #E03A3E;
  --team-s: #E03A3E;
  --team-wash-40: rgba(224, 58, 62, 0.42);
  --team-wash-22: rgba(224, 58, 62, 0.26);
  --team-wash-10: rgba(224, 58, 62, 0.13);
  --team-wash-38: rgba(224, 58, 62, 0.38);
  --team-s-wash: transparent;
  --chapter-accent: #E03A3E;
  --accent-wash: rgba(224, 58, 62, 0.14);
}

/* ----- Preview banner ----- */
.proto-banner {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 18px;
  min-height: var(--banner-h);
  background: rgba(18, 23, 34, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ptb-border);
  font-size: 13px;
  color: var(--soft);
  transition: border-color var(--theme-ms) ease, box-shadow var(--theme-ms) ease;
}
body.pp-v3-open.chapter-dal .proto-banner {
  border-bottom-color: color-mix(in srgb, var(--team) 35%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--team) 20%, transparent);
}
body.pp-v3-open.chapter-nyk .proto-banner {
  border-bottom-color: color-mix(in srgb, var(--team-s) 30%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--team-s) 18%, transparent);
}
.proto-banner strong { color: var(--gold); font-weight: 700; }
.proto-banner a { color: var(--gold); text-decoration: none; font-weight: 600; }
.proto-banner a:hover { text-decoration: underline; }
.proto-banner a.is-here { color: var(--text); pointer-events: none; }
.proto-banner code {
  font-size: 11px;
  color: var(--gold-soft);
  background: rgba(0, 0, 0, 0.3);
  padding: 1px 5px;
  border-radius: 4px;
}
.compare-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-wrap: wrap;
}
.compare-nav .sep { color: var(--muted); font-weight: 400; }
.proto-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #1a1200;
  background: var(--gold);
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

#detailView.pp-v3 {
  padding: 8px 16px 72px;
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* ============================================================
   1. HERO + MOVIE POSTER (V1)
   ============================================================ */
.pp-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 0;
  align-items: stretch;
  margin-bottom: 20px;
  border-radius: var(--dc-radius);
  border: 1px solid var(--ptb-border);
  overflow: hidden;
  background:
    radial-gradient(ellipse 65% 120% at 8% 50%, var(--team-wash-40), transparent 55%),
    linear-gradient(115deg, var(--team-wash-22) 0%, transparent 42%),
    linear-gradient(180deg, #141922 0%, #0c1018 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 24px 48px rgba(0, 0, 0, 0.35);
  transition:
    background var(--theme-ms) var(--dc-ease),
    border-color var(--theme-ms) ease,
    box-shadow var(--theme-ms) ease;
}
.pp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -32deg,
    transparent 0 18px,
    var(--team-wash-10) 18px 20px
  );
  pointer-events: none;
  opacity: 0.85;
  transition: opacity var(--theme-ms) ease;
}
.pp-hero > .pp-poster {
  position: relative;
  min-height: 340px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background: #06080f;
  overflow: hidden;
}
.pp-poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  will-change: transform;
  transition: opacity 400ms ease, transform 500ms var(--dc-ease);
}
.pp-poster:hover img { transform: scale(1.04); }
body.pp-v3-open.is-theming .pp-poster img { transform: scale(1.04); }
.pp-poster-wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 28%, rgba(6, 8, 15, 0.55) 62%, rgba(6, 8, 15, 0.96) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--team) 35%, transparent), transparent 55%);
  pointer-events: none;
  transition: background var(--theme-ms) var(--dc-ease);
}
.pp-poster-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}
.pp-poster-year {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gold-soft);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
}
.pp-poster-team {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}
.pp-poster-team img {
  position: static;
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
.pp-poster-tagline {
  font-size: 13px;
  font-style: italic;
  color: var(--soft);
  line-height: 1.35;
  max-width: 28ch;
}
.pp-poster-chapter {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  color: var(--gold-soft);
}
.pp-poster-chapter .ch-num {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.pp-poster-chapter .ch-icon {
  display: grid;
  place-items: center;
  color: var(--chapter-accent);
}

.pp-hero-body {
  padding: 28px 28px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.pp-hero-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px 20px;
  margin-bottom: 12px;
}
.pp-team-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 20px var(--team-wash-38);
}
.pp-team-badge img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  padding: 4px;
}
.pp-team-badge-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-right: 4px;
}
.pp-team-badge-text .abbr {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.6px;
  color: #fff;
  line-height: 1;
}
.pp-team-badge-text .label {
  font-size: 10px;
  font-weight: 600;
  color: var(--soft);
}
.pp-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.pp-chip {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--soft);
}
.pp-chip b { color: var(--text); font-weight: 800; }
.pp-chip.pos {
  color: #1a1200;
  background: linear-gradient(180deg, #ffb965 0%, var(--gold) 100%);
  border-color: rgba(255, 166, 77, 0.4);
  box-shadow: 0 4px 12px rgba(255, 166, 77, 0.28);
}
.pp-flag-wrap {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.pp-flag-wrap .pp-flag,
.pp-chip .pp-flag {
  display: block;
  width: 22px;
  height: 15px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 1px 3px rgba(0, 0, 0, 0.35);
}
.pp-chapter-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--chapter-accent);
  margin-bottom: 6px;
}
.pp-name {
  font-size: clamp(36px, 5.5vw, 56px);
  font-weight: 900;
  letter-spacing: -1.8px;
  line-height: 0.95;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.pp-name span {
  background: linear-gradient(90deg, #fff 0%, #e8ecf2 55%, var(--gold-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pp-era-title {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--chapter-accent);
  margin-bottom: 10px;
}
.pp-sub {
  font-size: 14px;
  color: var(--soft);
  line-height: 1.55;
  max-width: 52ch;
  margin-bottom: 18px;
}
.pp-sub b { color: var(--text); font-weight: 700; }
.pp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pp-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #aeb6c8;
}
.pp-badge.ring {
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.32);
  color: #fbbf24;
}
.pp-badge.elite {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.32);
  color: #c084fc;
}
.pp-badge.blue {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
  color: #60a5fa;
}
.pp-badge.years {
  background: rgba(255, 255, 255, 0.06);
  color: #c7cdd8;
}

/* ============================================================
   CAREER JOURNEY (scrolls away — section pill nav sticks instead)
   ============================================================ */
.journey-sticky {
  position: relative;
  top: auto;
  z-index: 1;
  margin: 0 -8px 8px;
  padding: 4px 8px 10px;
  background: transparent;
  border-bottom: 1px solid transparent;
}
.journey-sticky.is-stuck {
  /* no-op · journey no longer sticks on any viewport */
  border-bottom-color: transparent;
  box-shadow: none;
}
.pp-section--journey {
  margin-bottom: 0;
  scroll-margin-top: calc(var(--banner-h) + 12px);
}
.pp-section--journey .pp-section-head { margin-bottom: 10px; }

/* ============================================================
   CAREER ARC (horizontal fill bar · same UI as Legacy Meter)
   ============================================================ */
.pp-legacy {
  margin-bottom: 8px;
  padding: 18px 20px 20px;
  border-radius: 16px;
  border: 1px solid var(--ptb-border);
  background:
    radial-gradient(ellipse 70% 120% at 100% 0%, var(--team-wash-22), transparent 55%),
    linear-gradient(180deg, #141922 0%, #0c1018 100%);
  transition: background var(--theme-ms) var(--dc-ease), border-color var(--theme-ms) ease;
  /* Labels under first/last dots stick past the track — don't clip the "N" on League Icon */
  overflow: visible;
}
.pp-legacy-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.pp-legacy-copy {
  margin-top: 6px;
  font-size: 13px;
  color: var(--soft);
  max-width: 58ch;
  line-height: 1.45;
}
.pp-legacy-copy strong { color: var(--text); }
.pp-legacy-tier {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #1a1200;
  background: linear-gradient(180deg, #ffb965 0%, var(--gold) 100%);
  padding: 8px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(255, 166, 77, 0.35);
  white-space: nowrap;
}

.pp-legacy-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  /* Room under track for 2-line labels; inset so end dots aren't flush with card edge */
  margin: 0 6px 42px;
}
.pp-legacy-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--fill, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--team) 0%, var(--chapter-accent) 55%, var(--gold) 100%);
  box-shadow:
    0 0 16px color-mix(in srgb, var(--chapter-accent) 45%, transparent),
    0 0 4px var(--gold-glow);
  transition: width 900ms var(--dc-ease), background var(--theme-ms) ease;
}
.pp-legacy-fill::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translate(50%, -50%);
  background: var(--gold);
  box-shadow: 0 0 12px var(--gold-glow);
  border: 2px solid #fff;
}

.pp-legacy-nodes {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
}
.pp-legacy-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 0;
}
.pp-legacy-node .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #1a2030;
  border: 2px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 0 4px rgba(12, 16, 24, 0.9);
  transition: background 400ms ease, border-color 400ms ease, transform 400ms ease;
  flex-shrink: 0;
}
.pp-legacy-node .lab {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
  white-space: normal;
  text-align: center;
  line-height: 1.15;
  max-width: 4.75rem;
  transition: color 400ms ease;
}
/* Flush multi-word end labels so "League Icon" / "Prospect" don't hang outside the card */
.pp-legacy-node:first-child .lab {
  left: 0;
  transform: none;
  text-align: left;
  max-width: 4.25rem;
}
.pp-legacy-node:last-child .lab {
  left: auto;
  right: 0;
  transform: none;
  text-align: right;
  max-width: 4.25rem;
}
.pp-legacy-node.is-done .dot {
  background: var(--team);
  border-color: color-mix(in srgb, var(--team) 70%, #fff);
}
.pp-legacy-node.is-done .lab { color: var(--soft); }
.pp-legacy-node.is-current .dot {
  background: var(--gold);
  border-color: #fff;
  transform: scale(1.2);
  box-shadow:
    0 0 0 4px rgba(12, 16, 24, 0.9),
    0 0 14px var(--gold-glow);
}
.pp-legacy-node.is-current .lab {
  color: var(--gold-soft);
}

/* Sticky section nav (Journey / Chapter story / …) — PC + mobile */
.pp-nav-wrap {
  position: sticky;
  top: calc(var(--banner-h) + 8px);
  z-index: 55;
  margin: 0 0 28px;
  padding-top: 10px;
  background: linear-gradient(180deg, var(--ptb-bg) 60%, transparent);
}
.pp-nav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.25);
  scrollbar-width: none;
}
.pp-nav::-webkit-scrollbar { display: none; }
.pp-nav a {
  flex: 0 0 auto;
  text-decoration: none;
  color: var(--soft);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.35px;
  padding: 10px 16px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 160ms, color 160ms, box-shadow 160ms;
}
.pp-nav a[hidden] { display: none; }
.pp-nav a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}
.pp-nav a.is-active {
  color: #fff;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--chapter-accent) 55%, var(--team)) 0%,
    var(--team) 100%
  );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--team) 50%, transparent),
    0 4px 14px var(--team-wash-38);
}

/* Section shell */
.pp-section {
  margin-bottom: 36px;
  scroll-margin-top: calc(var(--banner-h) + 80px);
}
/* Last module (Past 5) — a little more room before preview notes */
.pp-section--last {
  margin-bottom: 48px;
}
.pp-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.pp-section-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.pp-section-title em {
  font-style: normal;
  color: var(--gold);
}
.pp-section-hint {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

/* Chapter cards — horizontal scroll + snap for N stints (1…∞)
   Must beat legacy .timeline (height:78px; overflow:hidden; flex) from styles.css
   when #timeline carries both .timeline and .pp-chapters. */
.pp-chapters-wrap {
  margin: 0;
  min-width: 0;
}
.pp-chapters,
#detailView.pp-v3 .timeline.pp-chapters {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 12px;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 2px 2px 10px;
  border: none;
  border-radius: 0;
  background: transparent !important;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 4px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--chapter-accent, var(--gold)) 45%, transparent) transparent;
}
.pp-chapters::-webkit-scrollbar {
  height: 6px;
}
.pp-chapters::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--chapter-accent, var(--gold)) 40%, transparent);
  border-radius: 999px;
}
.pp-chapters::-webkit-scrollbar-track {
  background: transparent;
}

/* 1–2 chapters: fill row. 3+: fixed card width + scroll. */
.pp-chapters[data-count="1"] .pp-chapter-card,
.pp-chapters[data-count="2"] .pp-chapter-card {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: none;
}
.pp-chapters:not([data-count="1"]):not([data-count="2"]) .pp-chapter-card {
  flex: 0 0 min(300px, 82vw);
  width: min(300px, 82vw);
  max-width: min(300px, 82vw);
}

.pp-chapter-card,
#detailView.pp-v3 .pp-chapter-card.stint-bar {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 10px 12px;
  align-items: center;
  text-align: left;
  padding: 16px 16px 14px;
  border-radius: 16px;
  border: 1px solid var(--ptb-border);
  border-right: 1px solid var(--ptb-border);
  background: linear-gradient(165deg, #141922 0%, #0c1018 100%) !important;
  color: inherit;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  min-width: 0;
  min-height: 108px;
  box-sizing: border-box;
  scroll-snap-align: start;
  flex-direction: unset;
  justify-content: unset;
  filter: none;
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms var(--dc-ease),
    background var(--theme-ms) ease;
}
.pp-chapter-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 220ms ease;
  /* Per-card team wash via --stint-* set inline in player-page-v3.js */
  background:
    radial-gradient(ellipse 80% 100% at 0% 0%, var(--stint-wash, transparent), transparent 55%),
    linear-gradient(135deg, var(--stint-wash-soft, transparent), transparent 50%),
    radial-gradient(ellipse 60% 80% at 100% 100%, var(--stint-wash-end, transparent), transparent 50%);
}
.pp-chapter-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--stint-accent, var(--gold)) 40%, transparent);
}
.pp-chapter-card.is-active {
  border-color: color-mix(in srgb, var(--stint-accent, var(--chapter-accent)) 55%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--stint-accent, var(--chapter-accent)) 25%, transparent),
    0 16px 40px rgba(0, 0, 0, 0.35),
    0 0 32px color-mix(in srgb, var(--stint-c, var(--team)) 22%, transparent);
}
/* Override legacy .stint-bar.active inset bar so active chapter stays readable */
#detailView.pp-v3 .pp-chapter-card.stint-bar.active,
#detailView.pp-v3 .pp-chapter-card.stint-bar.is-active {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--stint-accent, var(--chapter-accent)) 25%, transparent),
    0 16px 40px rgba(0, 0, 0, 0.35),
    0 0 32px color-mix(in srgb, var(--stint-c, var(--team)) 22%, transparent);
  filter: none;
}
.pp-chapter-card.is-active::before { opacity: 0.9; }
.pp-chapter-card > .pp-ch-num {
  grid-column: 1;
  grid-row: 1;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: color-mix(in srgb, var(--text) 35%, transparent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pp-chapter-card.is-active .pp-ch-num {
  color: var(--stint-accent, var(--chapter-accent));
}
.pp-ch-icon {
  grid-column: 1;
  grid-row: 2;
  color: var(--stint-accent, var(--muted));
  opacity: 0.75;
  transition: color 220ms ease, opacity 220ms ease;
}
.pp-chapter-card.is-active .pp-ch-icon { opacity: 1; }

.pp-ch-logo-wrap {
  grid-column: 3;
  grid-row: 1 / span 2;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  align-self: center;
}
.pp-ch-logo-wrap img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.pp-ch-meta {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.pp-ch-team {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: #fff;
}
.pp-ch-years {
  font-size: 12px;
  font-weight: 600;
  color: var(--soft);
}
.pp-ch-era {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--stint-accent, var(--gold));
  margin-top: 2px;
}

.pp-ch-stats {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.pp-ch-stat b {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pp-ch-stat span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.pp-ch-achieve {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--soft);
}

/* Active chapter detail */
.pp-detail-grid {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 16px;
}
.pp-jersey-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.pp-jersey {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 380px;
  background: #06080f;
  border: 1px solid var(--ptb-border);
}

/* View highlights — gold-first CTA (chapter accent stays a quiet undertone) */
.pp-highlights-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--gold) 58%, transparent);
  background:
    linear-gradient(165deg,
      color-mix(in srgb, var(--gold) 26%, #1c1610) 0%,
      color-mix(in srgb, var(--gold) 8%, #0c1018) 100%);
  color: var(--gold-soft);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gold) 12%, transparent),
    0 6px 18px color-mix(in srgb, var(--gold-glow) 32%, transparent);
  transition:
    transform 160ms var(--dc-ease, ease),
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    background 160ms ease;
}
.pp-highlights-btn:hover {
  color: #fff8ea;
  border-color: var(--gold);
  background:
    linear-gradient(165deg,
      color-mix(in srgb, var(--gold) 40%, #241a10) 0%,
      color-mix(in srgb, var(--gold) 14%, #121018) 100%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gold) 28%, transparent),
    0 8px 24px color-mix(in srgb, var(--gold-glow) 50%, transparent);
  transform: translateY(-1px);
}
.pp-highlights-btn:active {
  transform: translateY(0);
}
.pp-highlights-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.pp-highlights-btn__icon {
  flex-shrink: 0;
  color: var(--gold);
  filter: drop-shadow(0 0 6px var(--gold-glow));
}
.pp-highlights-btn:hover .pp-highlights-btn__icon {
  color: var(--gold-soft);
}

/* Highlights lightbox */
body.pp-v3-open.pp-hl-open { overflow: hidden; }
.pp-hl-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}
.pp-hl-lightbox[hidden] { display: none !important; }
.pp-hl-lightbox__backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: rgba(4, 6, 10, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.pp-hl-lightbox__panel {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--gold) 35%, rgba(255, 255, 255, 0.08));
  background: linear-gradient(175deg, #161b24 0%, #0a0d14 100%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gold) 12%, transparent),
    0 24px 64px rgba(0, 0, 0, 0.65),
    0 0 40px color-mix(in srgb, var(--gold-glow) 20%, transparent);
  overflow: hidden;
  animation: pp-hl-in 220ms var(--dc-ease, ease) both;
}
@keyframes pp-hl-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.pp-hl-lightbox__head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 14px 12px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--gold) 10%, transparent) 0%,
      transparent 55%);
}
.pp-hl-lightbox__title {
  margin: 0;
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.pp-hl-lightbox__watch {
  flex: 0 0 auto;
  margin-left: auto;
  margin-right: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pp-accent, #3b82f6);
  text-decoration: none;
  white-space: nowrap;
}
.pp-hl-lightbox__watch:hover { text-decoration: underline; }
.pp-hl-lightbox__watch[hidden] { display: none !important; }
.pp-hl-lightbox__close {
  flex: 0 0 auto;  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.35);
  color: var(--soft);
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.pp-hl-lightbox__close:hover {
  color: #fff;
  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
  background: color-mix(in srgb, var(--gold) 14%, rgba(0, 0, 0, 0.4));
}
.pp-hl-lightbox__close:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.pp-hl-lightbox__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.pp-hl-lightbox__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.pp-jersey img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  will-change: transform;
  transition: transform 450ms var(--dc-ease);
  opacity: 1;
  z-index: 0;
  background: transparent;
}
.pp-jersey img[src=""],
.pp-jersey img:not([src]) {
  opacity: 0;
}
.pp-jersey:hover img { transform: scale(1.045); }
.pp-jersey-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 36px;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
}
.pp-jersey-year {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.pp-jersey-tag {
  font-size: 13px;
  font-style: italic;
  color: var(--soft);
}
.pp-jersey-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.65);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
}
.pp-jersey::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(6, 8, 15, 0.85) 88%);
  pointer-events: none;
}
.pp-detail-panel {
  border-radius: 16px;
  border: 1px solid var(--ptb-border);
  background: linear-gradient(165deg, #141922 0%, #0c1018 100%);
  padding: 22px 24px;
  min-width: 0;
}
.pp-era-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--chapter-accent);
  margin-bottom: 12px;
}
.pp-era-icon {
  display: grid;
  place-items: center;
  color: var(--chapter-accent);
}
.pp-chapter-title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 900;
  letter-spacing: -0.6px;
  margin-bottom: 6px;
}
.pp-detail-panel .sm {
  font-size: 13px;
  color: var(--soft);
  margin-bottom: 16px;
}
.pp-detail-panel .sm b { color: var(--text); }
.pp-year-tabs-wrap {
  margin: 0 0 10px;
}
.pp-year-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0 8px;
  margin: 0 -2px 4px;
  scrollbar-width: thin;
}
.pp-year-tabs::-webkit-scrollbar { height: 4px; }
.pp-year-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--ptb-border);
  background: rgba(255,255,255,0.03);
  color: var(--soft);
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.pp-year-tab:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--chapter-accent) 45%, var(--ptb-border));
}
.pp-year-tab.is-active {
  color: var(--text);
  background: color-mix(in srgb, var(--chapter-accent) 18%, transparent);
  border-color: var(--chapter-accent);
}
.pp-year-tab.is-champ {
  color: #e8c872;
  border-color: color-mix(in srgb, #d4af37 55%, var(--ptb-border));
  background: linear-gradient(180deg, rgba(212,175,55,0.14), rgba(212,175,55,0.05));
}
.pp-year-tab.is-champ.is-active {
  color: #f6e27a;
  border-color: #e4c15a;
  background: linear-gradient(180deg, rgba(228,193,90,0.28), rgba(184,134,11,0.12));
  box-shadow: 0 0 0 1px rgba(228,193,90,0.25);
}
.pp-year-tab-ring {
  flex-shrink: 0;
  color: #e4c15a;
}
.pp-year-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin: 0 0 10px;
  color: var(--text);
}
.pp-year-title.is-champ {
  color: #f0d078;
}
.pp-narrative--champ {
  border-left: 3px solid #e4c15a;
  padding-left: 14px;
}
.pp-narrative {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}
.pp-narrative p {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--body);
}
.pp-narrative p:first-child {
  font-size: 15px;
  color: var(--text);
  font-weight: 500;
}
.pp-narrative p.pp-era-legacy {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--ptb-border);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--soft);
}
.pp-era-legacy-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--chapter-accent);
  margin-bottom: 6px;
}
.pp-why-block {
  padding-top: 16px;
  border-top: 1px solid var(--ptb-border);
}
.pp-why-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--chapter-accent);
  margin-bottom: 8px;
}
.pp-why-text {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--soft);
}

/* Story grid (light) — DOM order L→R: blurb · turning · peak · headline · injury · why he left (last). Empty cards hide. */
.pp-story-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 12px;
}
.pp-story-grid--light {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
#sec-why[data-story-count="1"] .pp-story-grid--light,
#sec-why[data-story-count="2"] .pp-story-grid--light {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
#sec-why[data-story-count="3"] .pp-story-grid--light,
#sec-why[data-story-count="4"] .pp-story-grid--light {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
/* 5–6 cards (modules + optional blurb/injury): slightly denser min track */
#sec-why[data-story-count="5"] .pp-story-grid--light,
#sec-why[data-story-count="6"] .pp-story-grid--light {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.pp-story-card--injury h3 {
  font-size: 14px;
  line-height: 1.35;
}
.pp-story-card--injury p {
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--chapter-accent) 72%, var(--soft));
  font-weight: 650;
}
.pp-story-card {
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--ptb-border);
  background: linear-gradient(165deg, #141922 0%, #0c1018 100%);
  padding: 16px 16px 14px;
  overflow: hidden;
  transition: border-color 180ms, transform 180ms, box-shadow 180ms;
}
.pp-story-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--chapter-accent);
  opacity: 0.55;
}
.pp-story-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--chapter-accent) 35%, transparent);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}
.pp-story-card--blurb {
  grid-column: 1 / -1;
  background:
    radial-gradient(ellipse 80% 80% at 0% 0%, var(--team-wash-22), transparent 60%),
    linear-gradient(165deg, #141922 0%, #0c1018 100%);
}
.pp-story-card--blurb p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--body);
}
.pp-story-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--chapter-accent);
  margin-bottom: 8px;
}
.pp-story-card h3 {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
  line-height: 1.3;
}
.pp-story-card p {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--soft);
}

/* ============================================================
   V2-STYLE DEPTH BLOCKS
   ============================================================ */
.v3-depth-row {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 14px;
  align-items: stretch;
}
.v3-panel {
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 50% 70% at 0% 0%, var(--team-wash-10), transparent 60%),
    var(--ptb-surface);
  border: 1px solid color-mix(in srgb, var(--chapter-accent) 14%, var(--ptb-border));
  padding: 18px;
  transition: border-color 160ms, box-shadow 160ms, background var(--theme-ms) var(--dc-ease);
}
.v3-panel:hover {
  border-color: color-mix(in srgb, var(--chapter-accent) 32%, var(--ptb-border-strong));
}
.v3-panel-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.v3-highs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.v3-high {
  padding: 14px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--ptb-border);
  text-align: center;
  transition: border-color 160ms, background 160ms, transform 160ms;
}
.v3-high:hover {
  border-color: color-mix(in srgb, var(--chapter-accent) 40%, transparent);
  background: var(--accent-wash);
  transform: translateY(-2px);
}
.v3-high b {
  display: block;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 4px;
}
.v3-high span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.v3-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.v3-tile {
  padding: 14px 14px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--ptb-border);
  transition: border-color 160ms, background 160ms, transform 160ms;
  min-height: 78px;
}
.v3-tile:hover {
  border-color: var(--ptb-border-strong);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
}
.v3-tile .k {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.v3-tile .v {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
}
.v3-tile .s {
  margin-top: 4px;
  font-size: 12px;
  color: var(--soft);
  font-weight: 600;
  line-height: 1.3;
}
.v3-panel--micro {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.v3-panel--micro .v3-panel-title {
  margin-bottom: 14px;
}
/* Clean vertical event list: rail + date + label */
.v3-micro-track {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  flex: 1;
  margin: 0;
  padding: 2px 0 2px 0;
  list-style: none;
}
/* Progressive chapter-colored spine */
.v3-micro-track::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    var(--chapter-accent) 0%,
    color-mix(in srgb, var(--chapter-accent) 70%, transparent) 42%,
    color-mix(in srgb, var(--chapter-accent) 28%, transparent) 100%
  );
  box-shadow: 0 0 10px color-mix(in srgb, var(--chapter-accent) 22%, transparent);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}
.v3-micro-item {
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(4.5rem, 5.5rem) 1fr;
  align-items: start;
  column-gap: 12px;
  padding: 11px 4px 11px 0;
  z-index: 1;
}
.v3-micro-item + .v3-micro-item {
  border-top: 1px solid color-mix(in srgb, var(--chapter-accent) 10%, transparent);
}
.v3-micro-item:first-child { padding-top: 4px; }
.v3-micro-item:last-child { padding-bottom: 4px; }
.v3-micro-dot {
  width: 12px;
  height: 12px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--chapter-accent);
  border: 2px solid color-mix(in srgb, var(--chapter-accent) 35%, #0c1018);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--chapter-accent) 14%, transparent),
    0 0 8px color-mix(in srgb, var(--chapter-accent) 22%, transparent);
  flex-shrink: 0;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.v3-micro-item:hover .v3-micro-dot {
  transform: scale(1.12);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--chapter-accent) 20%, transparent),
    0 0 12px color-mix(in srgb, var(--chapter-accent) 30%, transparent);
}
.v3-micro-item .when {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--chapter-accent);
  line-height: 1.3;
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.v3-micro-item .what {
  font-size: 13px;
  font-weight: 650;
  color: var(--body);
  line-height: 1.4;
  padding-top: 1px;
}
.v3-micro-item:hover .what { color: var(--text); }

/* Season table */
.v3-season-block {
  display: grid;
  grid-template-columns: 1.45fr 0.8fr;
  gap: 16px;
  align-items: start;
}
.v3-season-table-wrap {
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--ptb-border);
  background: var(--ptb-surface);
}
.v3-season-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.v3-season-table th {
  text-align: left;
  padding: 12px 14px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid var(--ptb-border);
}
.v3-season-table th.num,
.v3-season-table td.num { text-align: right; }
.v3-season-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--body);
}
.v3-season-table tr:last-child td { border-bottom: none; }
.v3-season-table tr:hover td {
  background: var(--accent-wash);
}
.v3-season-table td.yr {
  font-weight: 800;
  color: var(--gold);
  white-space: nowrap;
}
.v3-season-table td.note {
  font-size: 12.5px;
  color: var(--soft);
  max-width: 240px;
}
.v3-season-table td.num b {
  color: #fff;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.v3-spark-card {
  border-radius: 14px;
  border: 1px solid var(--ptb-border);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, var(--accent-wash), transparent 70%),
    var(--ptb-surface);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-self: start;
  width: 100%;
  max-width: 100%;
  /* Never grow with “show more seasons” table height */
  height: auto;
  min-height: 0;
}
.v3-spark-card .label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  flex-shrink: 0;
}
.v3-spark {
  /* Fixed plot height — was flex:1 + height:100% so the SVG ballooned with the table */
  flex: 0 0 auto;
  height: 148px;
  min-height: 148px;
  max-height: 148px;
  width: 100%;
  overflow: hidden;
}
.v3-spark svg {
  width: 100%;
  height: 148px;
  max-height: 148px;
  display: block;
}
.v3-spark .spark-line {
  fill: none;
  stroke: var(--chapter-accent, var(--accent, #6b8cae));
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.v3-spark .spark-area {
  pointer-events: none;
}
.v3-spark .spark-dot {
  fill: var(--gold);
  stroke: #0c1018;
  stroke-width: 1.5;
}
.v3-spark .spark-y-label {
  fill: var(--muted, #8a93a5);
  font-size: 9px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.v3-spark .spark-y-grid {
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}
.v3-spark .spark-val {
  fill: var(--body, #e8ecf4);
  font-size: 9.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  paint-order: stroke;
  stroke: #0c1018;
  stroke-width: 3px;
  stroke-linejoin: round;
}
.v3-spark-x {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  margin-left: 30px; /* align under plot after y-axis gutter */
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  flex-shrink: 0;
  gap: 0;
  line-height: 1.2;
  overflow: hidden;
}
.v3-spark-x span {
  flex: 1 1 0;
  text-align: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.v3-spark-x span.is-skip {
  visibility: hidden;
  pointer-events: none;
}
.v3-spark-x span:first-child { text-align: left; }
.v3-spark-x span:last-child { text-align: right; }

/* Side grid: contract · teammates · achievements */
.v3-side-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  align-items: start;
}
.v3-contract {
  border-radius: var(--radius-lg);
  padding: 18px 18px 16px;
  background:
    linear-gradient(145deg, rgba(240, 180, 41, 0.14), transparent 50%),
    linear-gradient(180deg, #1a2030, #131925);
  border: 1px solid rgba(240, 180, 41, 0.28);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  transition: border-color 160ms, transform 160ms;
}
.v3-contract:hover {
  border-color: rgba(240, 180, 41, 0.5);
  transform: translateY(-1px);
}
.v3-contract-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.v3-contract-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(240, 180, 41, 0.12);
  border: 1px solid rgba(240, 180, 41, 0.28);
  color: var(--gold-soft);
}
.v3-contract-icon svg { width: 22px; height: 22px; fill: currentColor; }
.v3-contract-type {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-soft);
  text-align: right;
}
.v3-contract-headline {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 4px;
}
.v3-contract-aav {
  font-size: 14px;
  font-weight: 700;
  color: var(--gold-soft);
  margin-bottom: 6px;
}
.v3-contract-meta {
  font-size: 12.5px;
  color: var(--soft);
  font-weight: 600;
  margin-bottom: 14px;
  line-height: 1.4;
}
.v3-contract-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 6px;
}
.v3-contract-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  border: 1px solid rgba(240, 180, 41, 0.15);
}
.v3-contract-bar > i {
  display: block;
  height: 100%;
  width: var(--progress, 50%);
  border-radius: inherit;
  background: linear-gradient(90deg, #c9922a, var(--gold-soft));
  box-shadow: 0 0 12px rgba(240, 180, 41, 0.35);
  transition: width 600ms var(--dc-ease);
}
.v3-contract-remain {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--soft);
  line-height: 1.35;
}

.v3-tm-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.v3-tm-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px;
  border-radius: 10px;
  transition: background 160ms;
}
button.v3-tm-row {
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  box-sizing: border-box;
}
button.v3-tm-row:disabled {
  cursor: default;
  opacity: 0.85;
}
.v3-tm-row:hover { background: rgba(255, 255, 255, 0.04); }
.v3-tm-shot {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--ptb-border);
}
.v3-tm-shot .fb {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
}
.v3-tm-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.v3-tm-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
}
.v3-tm-meta {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

.v3-ach-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v3-ach-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 650;
  color: var(--body);
  line-height: 1.35;
  transition: background 160ms, border-color 160ms;
}
.v3-ach-list li:hover {
  background: var(--accent-wash);
  border-color: color-mix(in srgb, var(--chapter-accent) 25%, transparent);
}
.v3-ach-list .ico {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: rgba(240, 180, 41, 0.12);
  color: var(--gold-soft);
}
.v3-ach-list .ico svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

/* Draft board */
.pp-draft {
  border-radius: 14px;
  border: 1px solid var(--ptb-border);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}
#sec-draft.is-chapter-focus .pp-draft {
  border-color: color-mix(in srgb, var(--team) 45%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--team) 20%, transparent), 0 12px 32px rgba(0, 0, 0, 0.25);
}
#sec-draft[hidden] { display: none; }
.pp-draft-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--chapter-accent) 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--chapter-accent) 22%, transparent);
}
.pp-draft-head h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.4px;
}
.pp-draft-head .from {
  font-size: 12px;
  color: var(--soft);
}
.pp-draft table { width: 100%; border-collapse: collapse; }
.pp-draft tr { border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.pp-draft tr:last-child { border-bottom: none; }
.pp-draft tr.is-me {
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  border-left: 2px solid var(--gold);
}
.pp-draft td {
  padding: 9px 12px;
  font-size: 13px;
  vertical-align: middle;
}
.pp-draft td.pick {
  font-weight: 800;
  color: var(--muted);
  width: 44px;
}
.pp-draft tr.is-me td.pick { color: var(--gold); }
.pp-draft td.team {
  font-weight: 600;
  color: var(--text);
  width: 100px;
}
.pp-draft td.player { color: var(--body); }
.pp-draft tr.is-me td.player {
  color: #fff;
  font-weight: 700;
}
.pp-draft td.pos {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.4px;
  width: 48px;
  text-align: right;
}
.pp-draft-logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 6px;
}

/* Preview notes */
.preview-notes {
  margin-top: 48px;
  padding: 22px 24px;
  border-radius: var(--dc-radius);
  border: 1px dashed rgba(255, 166, 77, 0.28);
  background: rgba(255, 166, 77, 0.04);
}
.preview-notes h2 {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--gold);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.preview-notes ul {
  margin: 0 0 0 18px;
  color: var(--body);
  font-size: 13px;
  line-height: 1.65;
}
.preview-notes li { margin-bottom: 4px; }
.preview-notes code {
  font-size: 11.5px;
  color: var(--gold);
  background: rgba(0, 0, 0, 0.35);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: "SF Mono", Monaco, Consolas, monospace;
}

/* Responsive */
@media (max-width: 1020px) {
  .v3-depth-row { grid-template-columns: 1fr 1fr; }
  .v3-panel--micro { grid-column: 1 / -1; }
  .v3-micro-item {
    grid-template-columns: 16px minmax(4.25rem, 5.25rem) 1fr;
  }
  .v3-side-grid { grid-template-columns: 1fr 1fr; }
  .v3-contract { grid-column: 1 / -1; }
  .pp-story-grid--light { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .pp-story-card--blurb { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
  .pp-detail-grid { grid-template-columns: 1fr; }
  .pp-jersey-col {
    max-width: 300px;
    margin: 0 auto;
    width: 100%;
  }
  .pp-jersey {
    max-width: none;
    margin: 0;
    min-height: 340px;
  }
  .v3-season-block { grid-template-columns: 1fr; }
  .pp-nav-wrap { top: calc(var(--banner-h) + 8px); }
}

@media (max-width: 720px) {
  #detailView.pp-v3 {
  padding: 8px 16px 72px;
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
  .pp-hero { grid-template-columns: 1fr; }
  .pp-poster {
    min-height: 280px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .pp-hero-body { padding: 20px 18px 22px; }
  .pp-name { font-size: 34px; letter-spacing: -1.2px; }
  /* Mobile: scroll when 2+ chapters; single chapter stays full-width */
  .pp-chapters[data-count="2"] .pp-chapter-card,
  .pp-chapters:not([data-count="1"]):not([data-count="2"]) .pp-chapter-card {
    flex: 0 0 min(280px, 86vw);
    width: min(280px, 86vw);
    max-width: min(280px, 86vw);
  }
  .pp-chapters[data-count="1"] .pp-chapter-card {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
  }
  .pp-chapter-card,
  #detailView.pp-v3 .pp-chapter-card.stint-bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 14px 14px 12px;
    min-height: 100px;
  }
  .pp-ch-team { font-size: 14px; }
  .pp-ch-stat b { font-size: 16px; }
  .pp-story-grid--light { grid-template-columns: 1fr; }
  .v3-depth-row { grid-template-columns: 1fr; }
  .v3-side-grid { grid-template-columns: 1fr; }
  .v3-contract { grid-column: auto; }
  .v3-micro-item {
    grid-template-columns: 16px minmax(3.75rem, 4.75rem) 1fr;
    column-gap: 10px;
  }
  .v3-micro-item .what { font-size: 12.5px; }
  .pp-nav a { padding: 9px 12px; font-size: 11px; }
  .pp-legacy-node .lab { font-size: 9px; max-width: 3.6rem; }
  .pp-legacy {
    padding: 16px 14px 18px;
  }
  .pp-legacy-track { margin-bottom: 44px; }
  .pp-legacy-node:first-child .lab,
  .pp-legacy-node:last-child .lab { max-width: 3.5rem; }
  .pp-nav-wrap { top: calc(var(--banner-h) + 8px); }
  .pp-section { scroll-margin-top: calc(var(--banner-h) + 80px); }
}

@media (max-width: 420px) {
  .pp-ch-logo-wrap { width: 44px; height: 44px; }
  .pp-ch-logo-wrap img { width: 32px; height: 32px; }
  .v3-highs { grid-template-columns: 1fr 1fr; }
  .pp-legacy-node .lab {
    max-width: 3.25rem;
    font-size: 8px;
    letter-spacing: 0.2px;
  }
  .pp-legacy-node:first-child .lab,
  .pp-legacy-node:last-child .lab { max-width: 3.1rem; }
}

/* ============================================================
   Acquisition · trade panel · past 5 · show more (V3 modules)
   Chapter-themed cards — same family as career highs / tiles
   ============================================================ */

/* --- Show more --- */
.pp-more-wrap { position: relative; }
.pp-more-body.is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
#storyBlurb.is-clamped { -webkit-line-clamp: 3; }
.pp-more-body.is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.pp-more-btn,
.espn-pgl-more-btn,
.v3-games-more {
  margin-top: 12px;
  background: color-mix(in srgb, var(--chapter-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--chapter-accent) 28%, transparent);
  color: var(--gold-soft, #ffd089);
  font-size: 12px;
  font-weight: 700;
  padding: 11px 16px;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  transition: background 0.15s, border-color 0.15s;
}
.pp-more-btn:hover,
.espn-pgl-more-btn:hover,
.v3-games-more:hover {
  background: color-mix(in srgb, var(--chapter-accent) 20%, transparent);
  border-color: color-mix(in srgb, var(--chapter-accent) 42%, transparent);
}
.v3-panel .pp-more-btn { margin-top: 8px; }

/* --- Acquire mount (shared shell) --- */
.v3-acquire-mount { margin-bottom: 14px; }
.v3-acquire {
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--chapter-accent) 28%, var(--ptb-border));
  background:
    radial-gradient(ellipse 70% 90% at 0% 0%, var(--team-wash-22), transparent 58%),
    radial-gradient(ellipse 50% 60% at 100% 100%, color-mix(in srgb, var(--chapter-accent) 10%, transparent), transparent 55%),
    var(--ptb-surface);
  padding: 16px 16px 14px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 10px 28px rgba(0, 0, 0, 0.22);
  transition: border-color var(--theme-ms) ease, background var(--theme-ms) var(--dc-ease);
}
.v3-acquire-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--chapter-accent);
  margin-bottom: 14px;
}
.v3-acquire-ico {
  display: inline-flex;
  color: var(--chapter-accent);
  opacity: 0.95;
}
.v3-acquire-card {
  border-radius: 14px;
  padding: 4px 2px 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--chapter-accent) 16%, transparent) 0%, transparent 44%),
    rgba(8, 12, 20, 0.55);
  border: 1px solid color-mix(in srgb, var(--chapter-accent) 22%, rgba(255, 255, 255, 0.06));
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.v3-acquire-card--fa {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--chapter-accent) 18%, transparent) 0%, transparent 40%),
    rgba(8, 12, 20, 0.55);
}
.v3-acquire-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  padding: 14px 14px 4px;
  margin-bottom: 8px;
}
.v3-acquire-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #fff;
  line-height: 1.2;
}
.v3-acquire-sub {
  font-size: 12.5px;
  color: var(--soft, #9aa3b2);
  margin-top: 3px;
}
.v3-acquire-date {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--muted, #7a8498);
}
.v3-acquire-money {
  margin-left: auto;
  text-align: right;
}
.v3-acquire-money b {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: var(--chapter-accent);
  letter-spacing: -0.3px;
}
.v3-acquire-money span {
  font-size: 11px;
  color: var(--muted, #7a8498);
  font-weight: 600;
}
.v3-acquire-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 8px 14px 10px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(0, 0, 0, 0.22);
}
.v3-acquire-row {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}
.v3-acquire-row:nth-child(2n) { border-right: none; }
.v3-acquire-row:nth-last-child(-n+2) { border-bottom: none; }
.v3-acquire-row .lab {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted, #7a8498);
  margin-bottom: 3px;
}
.v3-acquire-row .val {
  font-size: 13px;
  font-weight: 600;
  color: #e8ecf2;
  line-height: 1.35;
}
.v3-acquire-blurb {
  margin: 4px 14px 12px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--body, #c2cad8);
  max-width: 68ch;
}
.v3-acquire-timeline {
  margin: 4px 14px 12px;
  padding: 10px 0 0;
  border-top: 1px dashed color-mix(in srgb, var(--chapter-accent) 18%, transparent);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v3-acquire-tl-item {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 10px;
  font-size: 12.5px;
}
.v3-acquire-tl-item .when {
  font-weight: 700;
  color: var(--chapter-accent);
  font-size: 11px;
  letter-spacing: 0.3px;
}
.v3-acquire-tl-item .what { color: var(--body, #c2cad8); line-height: 1.4; }

/* FA dual panels */
.v3-fa-sides {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: stretch;
  padding: 8px 12px 12px;
}
.v3-fa-side {
  background: rgba(8, 10, 16, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px 14px;
  border-top: 4px solid var(--sideColor, #666);
}
.v3-fa-side ul { list-style: none; margin: 0; padding: 0; }
.v3-fa-side li {
  font-size: 13px;
  color: #e8ecf2;
  padding: 8px 0 8px 16px;
  position: relative;
  line-height: 1.45;
}
.v3-fa-side li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 7px;
  height: 7px;
  background: var(--sideColor, #666);
  border-radius: 50%;
}
.v3-fa-side li.headline { font-weight: 700; color: var(--gold-soft); }
.v3-tlogo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}
.v3-tlogo--sm { width: 22px; height: 22px; }
.v3-career-chip {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.28);
  vertical-align: middle;
}
.v3-trade-pname { font-weight: 700; color: var(--gold-soft); }
.v3-trade-meta {
  font-size: 11px;
  color: #7a8498;
  margin-top: 2px;
}
.v3-trade-result { color: #9aa3b2; font-size: 12px; }
.v3-trade-result em { font-style: normal; color: var(--gold-soft); }
.v3-trade-from { color: #7a8498; font-size: 11px; }

/* Production-structure trade card — chapter themed shell */
.trade-card,
.v3-trade-card {
  margin-top: 0;
  padding: 2px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--chapter-accent) 22%, transparent) 0%, transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--team) 18%, #121722) 0%, rgba(10, 14, 20, 0.85) 100%);
  border: 1px solid color-mix(in srgb, var(--chapter-accent) 32%, rgba(255, 255, 255, 0.08));
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
  transition: border-color var(--theme-ms) ease, background var(--theme-ms) var(--dc-ease);
}
.v3-acquire--trade .v3-trade-card {
  /* Nested inside acquire shell — lighter chrome */
  box-shadow: none;
  border-color: color-mix(in srgb, var(--chapter-accent) 22%, rgba(255, 255, 255, 0.06));
}
.trade-multi-banner {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--chapter-accent);
  text-align: center;
  padding: 10px 14px 0;
  margin: 0;
}
.trade-viz {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: stretch;
  padding: 12px 14px 14px;
}
.trade-viz.trade-viz--multi {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 12px 10px;
  grid-template-columns: unset;
}
.trade-viz.trade-viz--multi .trade-side {
  flex: 1 1 168px;
  max-width: 340px;
  min-width: 150px;
}
.trade-viz.trade-viz--multi .trade-arrow {
  flex: 0 0 auto;
  align-self: center;
  padding: 0 4px;
}
.trade-side {
  background: rgba(8, 10, 16, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px 14px;
  border-top: 4px solid var(--sideColor, #666);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.trade-side-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.trade-side .ts-team {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  line-height: 1.2;
  color: #fff;
}
.trade-side .ts-got,
.v3-fa-side .ts-got {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #8b95a8;
  margin-bottom: 10px;
  font-weight: 700;
}
.trade-side ul { list-style: none; margin: 0; padding: 0; }
.trade-side li {
  font-size: 13px;
  color: #e8ecf2;
  padding: 10px 0 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  line-height: 1.45;
}
.trade-side li:last-child { border-bottom: none; }
.trade-side li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  width: 7px;
  height: 7px;
  background: var(--sideColor, #666);
  border-radius: 50%;
}
.trade-side li.headline { font-weight: 700; color: var(--gold-soft); }
.trade-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--chapter-accent);
  font-weight: 800;
  padding: 0 2px;
  opacity: 0.95;
}
.trade-date {
  font-size: 11px;
  color: #9aa3b2;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  margin: 4px 16px 10px;
  text-align: center;
  font-weight: 600;
}
.trade-detail-text {
  font-size: 13px;
  color: #c2cad8;
  line-height: 1.6;
  margin: 0 14px 14px;
  padding: 12px 12px 4px;
  border-top: 1px solid color-mix(in srgb, var(--chapter-accent) 14%, transparent);
  max-width: 72ch;
}

.v3-trade-module-note {
  font-size: 12px;
  color: var(--muted, #7a8498);
  line-height: 1.5;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--accent-wash);
  border: 1px solid color-mix(in srgb, var(--chapter-accent) 16%, transparent);
}

.v3-trade-demo {
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--chapter-accent) 26%, var(--ptb-border));
  background:
    radial-gradient(ellipse 60% 80% at 0% 0%, var(--team-wash-22), transparent 60%),
    var(--ptb-surface);
  overflow: hidden;
  transition: border-color var(--theme-ms) ease, background var(--theme-ms) var(--dc-ease);
}
.v3-trade-demo > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  padding: 14px 16px;
  user-select: none;
}
.v3-trade-demo > summary::-webkit-details-marker { display: none; }
.v3-trade-demo__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--chapter-accent);
}
.v3-trade-demo__hint {
  font-size: 12px;
  color: var(--muted, #7a8498);
}
.v3-trade-demo[open] > summary {
  border-bottom: 1px solid color-mix(in srgb, var(--chapter-accent) 14%, transparent);
}
.v3-trade-demo__body { padding: 12px 12px 16px; }

/* ============================================================
   Past 5 games — clean table module (production log shape + chapter shell)
   ============================================================ */
.v3-games-mount { margin-top: 0; }

.v3-games-panel {
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--chapter-accent) 26%, var(--ptb-border));
  background:
    radial-gradient(ellipse 55% 80% at 100% 0%, var(--team-wash-22), transparent 58%),
    linear-gradient(180deg, #141922 0%, #0c1018 100%);
  padding: 14px 14px 16px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 10px 28px rgba(0, 0, 0, 0.2);
  transition: border-color var(--theme-ms) ease, background var(--theme-ms) var(--dc-ease);
  overflow: hidden;
}

.v3-games-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 0 2px;
}
.v3-games-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.v3-games-title em {
  font-style: normal;
  color: var(--chapter-accent);
}
.v3-games-record {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--soft);
}
.v3-games-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.v3-games-pill--w {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.28);
}
.v3-games-pill--l {
  color: #f87171;
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.28);
}

.v3-games-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(8, 11, 18, 0.72);
}

.v3-games-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 680px;
  white-space: nowrap;
}
.v3-games-table thead tr {
  background: rgba(0, 0, 0, 0.32);
}
.v3-games-table th {
  padding: 9px 12px;
  color: #5a6578;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  text-align: right;
}
.v3-games-table th:nth-child(1),
.v3-games-table th:nth-child(2),
.v3-games-table th:nth-child(3) {
  text-align: left;
}
.v3-games-table th.is-pts {
  color: color-mix(in srgb, var(--chapter-accent) 55%, #5a6578);
}

.v3-games-table td {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #b8c4d8;
  font-size: 13px;
  text-align: right;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.v3-games-table tbody tr:last-child td { border-bottom: none; }
.v3-games-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.035);
}

/* Latest row — chapter accent rail */
.v3-games-table tr.is-latest td {
  background: color-mix(in srgb, var(--chapter-accent) 8%, transparent);
}
.v3-games-table tr.is-latest td:first-child {
  box-shadow: inset 3px 0 0 var(--chapter-accent);
}

.v3-g-date,
.v3-g-opp,
.v3-g-res {
  text-align: left !important;
}

.v3-g-date { width: 72px; }
.v3-g-dm {
  display: block;
  color: #dde4f0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
}
.v3-g-dy {
  display: block;
  color: #4a5568;
  font-size: 10px;
  margin-top: 1px;
}

.v3-g-opp-inner {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 118px;
}
.v3-g-ha {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #5a6578;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  padding: 2px 5px;
  flex-shrink: 0;
}
.v3-g-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 3px;
}
.v3-g-on {
  color: #d4dcea;
  font-weight: 600;
}

.v3-g-res { white-space: nowrap; }
.v3-g-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2px;
  margin-right: 7px;
  vertical-align: middle;
}
.v3-g-badge.is-w {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.28);
}
.v3-g-badge.is-l {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.28);
}
.v3-g-score {
  color: #7a8799;
  font-size: 12px;
  font-weight: 500;
  vertical-align: middle;
}

.v3-g-pts {
  color: var(--gold-soft) !important;
  font-weight: 700 !important;
}
.v3-g-ratio { color: #7a8799; font-size: 12px; }
.v3-g-min { color: #5a6a82; font-size: 12px; }
.v3-g-dim { color: #2e3a50 !important; }

.v3-games-more-body { display: none; }
.v3-games-more-body.is-open { display: table-row-group; }

@media (max-width: 720px) {
  .v3-fa-sides {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .v3-fa-sides .trade-arrow { transform: rotate(90deg); }
  .v3-acquire-grid { grid-template-columns: 1fr; }
  .v3-acquire-row { border-right: none; }
  .v3-acquire-row:nth-last-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
  .v3-acquire-row:last-child { border-bottom: none; }
  .v3-acquire-money,
  .v3-acquire-date { margin-left: 0; text-align: left; width: 100%; }
  .v3-acquire-tl-item { grid-template-columns: 1fr; gap: 2px; }
  .trade-viz { grid-template-columns: 1fr; gap: 10px; }
  .trade-arrow { transform: rotate(90deg); }
  .trade-viz.trade-viz--multi { flex-direction: column; }
  .trade-viz.trade-viz--multi .trade-side { max-width: none; }
  .trade-viz.trade-viz--multi .trade-arrow { transform: rotate(90deg); }

  .v3-games-panel { padding: 12px; }
  .v3-games-table { min-width: 620px; }
}


/* ========== Production wiring (not in preview) ========== */
#detailView.pp-v3 .back-btn {
  margin: 4px 0 14px;
  position: relative;
  z-index: 5;
}
#detailView.pp-v3 .pp-legacy-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
#detailView.pp-v3.is-coach .pp-player-only { display: none !important; }
#detailView.pp-v3.is-coach .pp-coach-shell { display: block !important; }
#detailView.pp-v3:not(.is-coach) .pp-coach-shell { display: none !important; }

/* Photo / poster bind to loadPhoto(#photoPanel)
   Important: styles.css .photo-panel uses aspect-ratio 3/4. When a long chapter
   stretches the hero row, that ratio expands #photoPanel *wider* than .pp-poster
   (overflow:hidden clips to an arm crop — looks like a missing photo). */
#detailView.pp-v3 .pp-hero {
  align-items: start;
}
#detailView.pp-v3 .pp-hero > .pp-poster,
#detailView.pp-v3 .pp-poster {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  min-height: 0;
  max-height: none;
  height: auto;
  overflow: hidden;
  background: #06080f;
}
#detailView.pp-v3 #photoPanel {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  border-radius: 0;
  background: #06080f;
  overflow: hidden;
}
#detailView.pp-v3 #photoPanel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}
#detailView.pp-v3 #photoPanel .photo-placeholder {
  min-height: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

/* Production trade/draft/FA panels keep house styles inside V3 */
#detailView.pp-v3 #sHowDetail .trade-card,
#detailView.pp-v3 #sHowDetail .draft-viz,
#detailView.pp-v3 #sHowDetail .fa-viz,
#detailView.pp-v3 #sHowDetail .tw-viz {
  margin-top: 10px;
}
#detailView.pp-v3 #sHow {
  font-size: 13px;
  font-weight: 700;
  color: var(--soft, #9aa3b2);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
#detailView.pp-v3.pp-v3--ready .hero,
#detailView.pp-v3 .timeline-wrap:not(.pp-chapters-wrap) { display: none; }

/* Gamelog section */
#detailView.pp-v3 #pGamelogSection { margin-top: 0; }
#detailView.pp-v3 .espn-pgl-section .section-title { display: none; }

/* Hide empty modules */
#detailView.pp-v3 .pp-mod-empty { display: none !important; }

/* Stats order reminder: tables use PPG/RPG/APG columns from renderer */
#detailView.pp-v3 .v3-season-table th.num,
#detailView.pp-v3 .v3-high span { text-transform: uppercase; letter-spacing: 0.04em; }

/* Mobile: keep poster stack */
@media (max-width: 760px) {
  #detailView.pp-v3 { padding: 8px 12px 56px; }
  #detailView.pp-v3 .pp-hero > .pp-poster,
  #detailView.pp-v3 .pp-poster { aspect-ratio: 3 / 4; min-height: 0; }
}