/* ===== BRAND: Blindside Network (written by tools/brand-pages.mjs from js/brand.js) ===== */
@font-face{font-family:"Big Shoulders Display";src:url("assets/fonts/BigShouldersDisplay.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("assets/fonts/InstrumentSans.woff2") format("woff2");font-weight:400 700;font-display:swap}
.bs-brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:#F3EEF9;min-width:0}
.bs-mark{width:46px;height:46px;flex:none;overflow:visible}
.bs-word{display:grid;line-height:.84}
.bs-name{font-family:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;font-weight:900;font-size:31px;letter-spacing:.035em}
.bs-net{font-family:"Instrument Sans",system-ui,sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.56em;color:#A898BD;margin-top:5px}
.bs-sim{display:inline-flex;align-items:center;gap:6px;font-family:"Instrument Sans",system-ui,sans-serif;font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#F3EEF9;text-decoration:none;border:1px solid rgba(255,62,165,.7);border-radius:999px;padding:8px 16px;transition:background .2s,border-color .2s}
.bs-sim:hover,.bs-sim:focus-visible{background:rgba(255,62,165,.14);border-color:#FF3EA5}
.bs-brand:focus-visible,.bs-sim:focus-visible{outline:2px solid #FFC23D;outline-offset:4px;border-radius:10px}
.bs-mark .bs-slice{transform:translate(3.5px,4.5px)}
.bs-footer{margin-top:48px;border-top:1px solid rgba(255,255,255,.08);background:rgba(10,6,16,.55)}
.bs-footer-inner{max-width:1280px;margin:0 auto;padding:28px clamp(16px,3vw,32px) 34px;display:grid;gap:14px;
  grid-template-columns:auto 1fr;align-items:center}
.bs-footer-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#F3EEF9;
  font-family:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;font-weight:900;font-size:20px;letter-spacing:.04em;text-transform:uppercase}
.bs-footer-brand .bs-mark{width:30px;height:30px}
.bs-footer nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 18px}
.bs-footer nav a{color:#A898BD;text-decoration:none;font-size:14px}
.bs-footer nav a:hover{color:#F3EEF9}
.bs-footer p{grid-column:1/-1;margin:0;color:#7E6F93;font-size:12.5px}
.bs-footer p a{color:#A898BD;text-decoration:none}.bs-footer p a:hover{color:#F3EEF9;text-decoration:underline}
@media (max-width:640px){.bs-footer-inner{grid-template-columns:1fr}.bs-footer nav{justify-content:flex-start}}
@media (prefers-reduced-motion:no-preference){
  .bs-mark.is-animated .bs-slice{animation:bs-hit 1.15s .25s cubic-bezier(.2,.8,.2,1) both}
  .bs-mark.is-animated .bs-body{animation:bs-recoil 1.15s .25s ease-out both}
  .bs-brand:hover .bs-mark.is-animated .bs-slice{animation-name:bs-hit-again}
  .bs-brand:hover .bs-mark.is-animated .bs-body{animation-name:bs-recoil-again}
  .bs-mark.is-animated .bs-glint{animation:bs-glint 7s 2.2s ease-in-out infinite}
}
@keyframes bs-hit{0%{transform:translate(24px,-3px);opacity:0}38%{transform:translate(0,0);opacity:1}58%{transform:translate(0,0)}70%{transform:translate(6px,7.5px)}84%{transform:translate(3px,4px)}100%{transform:translate(3.5px,4.5px)}}
@keyframes bs-hit-again{0%{transform:translate(3.5px,4.5px)}30%{transform:translate(0,0)}52%{transform:translate(0,0)}66%{transform:translate(6px,7.5px)}82%{transform:translate(3px,4px)}100%{transform:translate(3.5px,4.5px)}}
@keyframes bs-recoil{0%,58%{transform:none}68%{transform:translate(-1.6px,0)}100%{transform:none}}
@keyframes bs-recoil-again{0%,52%{transform:none}63%{transform:translate(-1.6px,0)}100%{transform:none}}
@keyframes bs-glint{0%,82%{transform:translateX(0)}100%{transform:translateX(70px)}}
@media (max-width:640px){.bs-mark{width:38px;height:38px}.bs-name{font-size:25px}.bs-net{font-size:9px}.bs-sim{padding:7px 12px;font-size:12px}}
@media (max-width:440px){.bs-brand{gap:8px}.bs-mark{width:32px;height:32px}.bs-name{font-size:21px}.bs-net{font-size:7.5px;letter-spacing:.5em}.bs-sim{padding:6px 10px;font-size:11px;letter-spacing:.06em}}
/* ===== /BRAND ===== */
/* ===== Type: Blindside Network =====
   Big Shoulders Display for names and numbers, Instrument Sans for reading.
   Both are declared (and self-hosted) in the BRAND block above. The network
   carries eight shows, so the headings no longer wear Total Drama's Samdan --
   the simulator keeps its own fonts. */
h1,.player-name,.mini-name{
  font-family: var(--font-display);
}

:root{
  --bg0:#0e0613;
  --bg1:#2b0f3a;
  --panel:rgba(255,255,255,.08);
  --panel2:rgba(0,0,0,.28);
  --stroke:rgba(255,255,255,.14);
  --text:#f4f1f7;
  --muted:#bdb4c7;
  --accent:#7d4cff;       /* purple */
  --accent2:#ffb347;      /* gold */
  --good:#4cffb3;
  --danger:#ff5c7a;
  --font-display: "Big Shoulders Display", "Arial Narrow", Impact, system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Kept under its old name: forty page rules read it. It is the display face now. */
  --font-samdan: var(--font-display);
}


/* ===== MODERN HEADER STYLES ===== */
.modern-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(10, 6, 20, 0.65);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 
    0 4px 30px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(125, 76, 255, 0.1) inset;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-header.scrolled {
  background: rgba(10, 6, 20, 0.70);
  box-shadow: 
    0 8px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(125, 76, 255, 0.15) inset;
}

.header-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px);
}

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 24px;
}

.header-nav {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.header-nav::-webkit-scrollbar {
  display: none;
}

.nav-list {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 8px 0;
  margin: 0;
  list-style: none;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.nav-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(125, 76, 255, 0.15), rgba(255, 76, 230, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nav-link:hover {
  color: rgba(255, 255, 255, 1);
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.nav-link:hover::before {
  opacity: 1;
}

.nav-link.active {
  color: #FFFFFF;
  background: linear-gradient(135deg, rgba(125, 76, 255, 0.25), rgba(255, 76, 230, 0.15));
  box-shadow: 
    0 2px 12px rgba(125, 76, 255, 0.3),
    0 0 0 1px rgba(125, 76, 255, 0.3) inset;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #7D4CFF, transparent);
  border-radius: 2px;
}

.nav-icon {
  font-size: 18px;
  filter: drop-shadow(0 0 8px rgba(125, 76, 255, 0.4));
  transition: transform 0.3s ease;
}

.nav-link:hover .nav-icon {
  transform: scale(1.15) rotate(5deg);
}

@media (max-width: 768px) {
  .header-top {
    padding: 12px 0;
  }

  .nav-link {
    padding: 8px 14px;
    font-size: 13px;
  }
}

/* ===== END MODERN HEADER STYLES ===== */


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family:var(--font-body);
  background:radial-gradient(1200px 500px at top, rgba(125,76,255,.35), transparent 60%),
             radial-gradient(circle at top, var(--bg1), var(--bg0));
}

a{color:inherit;text-decoration:none}
.container{max-width:1280px;margin:0 auto;padding:22px 18px 64px}

.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border-radius:16px;
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.20);
  backdrop-filter: blur(10px);
}
.brand{font-weight:900; letter-spacing:.2px}
.brand span{color:var(--accent2)}
.meta{color:var(--muted); font-size:12px}

.tabs{
  margin-top:14px;
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
}
.tab{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.06);
  color:var(--muted);
}
.tab:hover{border-color:rgba(255,255,255,.25); color:var(--text)}
.tab.active{
  background:linear-gradient(180deg, rgba(125,76,255,.35), rgba(125,76,255,.15));
  color:var(--text);
  border-color:rgba(125,76,255,.55);
}

body.hasSiteHeader .hero{
  margin:22px 0 10px;
  text-align:center;
}
body.hasSiteHeader .hero h1{margin:0 0 8px; font-size:34px; letter-spacing:.2px}
.hero p{margin:0; color:var(--muted)}

.statsbar{
  margin:18px 0 26px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
}
@media (max-width:900px){ .statsbar{grid-template-columns:repeat(2,1fr)} }
.stat{
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:16px;
  text-align:center;
}
.stat .num{font-size:30px; font-weight:900; color:var(--accent2)}
.stat .label{color:var(--muted); font-size:12px; margin-top:6px}

.section-title{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin:26px 0 10px;
}
.section-title h2{margin:0; font-size:18px}
.section-title .hint{color:var(--muted); font-size:12px}

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

.card{
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:18px;
  padding:16px;
  box-shadow:0 12px 26px rgba(0,0,0,.28);
  transition:transform .12s ease, border-color .12s ease;
}
.card:hover{transform:translateY(-2px); border-color:rgba(255,255,255,.24)}
.card.winner{outline:3px solid rgba(255,179,71,.7)}
.row{display:flex; align-items:center; gap:12px}
.avatar{
  width:56px; height:56px; border-radius:50%;
  border:1px solid var(--stroke);
  background:linear-gradient(135deg, rgba(255,255,255,.14), rgba(0,0,0,.25));
  display:grid; place-items:center; font-weight:900; color:rgba(255,255,255,.85);
}
.name{font-weight:900}
.sub{color:var(--muted); font-size:12px; margin-top:2px}
.badges{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.badge{
  background:var(--panel2);
  border:1px solid rgba(255,255,255,.10);
  padding:6px 8px;
  border-radius:10px;
  font-size:12px;
  color:var(--muted);
}
.badge.good{color:var(--good)}
.badge.gold{color:var(--accent2)}
.badge.purple{color:var(--accent)}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.04);
}
.table th,.table td{
  padding:10px 10px;
  border-bottom:1px solid var(--stroke);
  vertical-align:top;
}
.table th{
  background:rgba(255,255,255,.06);
  text-align:left;
  font-size:12px;
  color:var(--muted);
}
.table tr:last-child td{border-bottom:none}

.kpi-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px}
.kpi{
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:14px;
}
.kpi h3{margin:0 0 8px; font-size:13px; color:var(--muted); font-weight:800}
.kpi ul{margin:0; padding-left:18px}
.kpi li{margin:4px 0}

.callout{
  background:linear-gradient(180deg, rgba(255,179,71,.18), rgba(255,179,71,.08));
  border:1px solid rgba(255,179,71,.35);
  border-radius:16px;
  padding:14px;
}

.cast-photo{
  border-radius:18px;
  border:1px dashed rgba(255,255,255,.25);
  background:rgba(255,255,255,.04);
  padding:14px;
  display:grid;
  gap:10px;
}
.cast-photo img{
  width:100%;
  height:auto;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.25);
}
.cast-photo .help{color:var(--muted); font-size:12px}

.footer{margin-top:38px; color:var(--muted); font-size:12px; text-align:center}
.small{font-size:12px; color:var(--muted)}
.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.18);
  font-size:12px; color:var(--muted)
}

.controls{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  background:rgba(255,255,255,.05);
  border:1px solid var(--stroke);
  border-radius:14px;
  padding:12px;
  margin:14px 0 18px;
}
input[type="search"], select{
  background:rgba(0,0,0,.25);
  border:1px solid var(--stroke);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  outline:none;
}
input[type="search"]{flex:1; min-width:220px}
select{min-width:220px}
.kbd{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background:rgba(0,0,0,.25); border:1px solid var(--stroke); padding:2px 6px; border-radius:8px; font-size:12px; color:var(--muted)
}

/* =========================================================
   PROFILES V2 — Modern, stunning, interactive (CSS-only)
   Applies automatically to ALL player profile pages
   (uses existing HTML classes: .hero, .kpi, .panel, etc.)
   ========================================================= */

/* smoother overall feel */
:root{
  --radius-xl: 22px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --shadow-soft: 0 18px 50px rgba(0,0,0,.40);
  --shadow-card: 0 14px 34px rgba(0,0,0,.34);
  --shadow-hover: 0 22px 60px rgba(0,0,0,.46);
}

html{scroll-behavior:smooth}
body{
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* subtle animated backdrop without JS */
body::before{
  content:"";
  position:fixed;
  inset:-20%;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(700px 520px at 12% 8%, rgba(255,179,71,.18), transparent 62%),
    radial-gradient(850px 600px at 86% 14%, rgba(125,76,255,.22), transparent 62%),
    radial-gradient(760px 560px at 58% 92%, rgba(76,255,179,.12), transparent 66%);
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift{
  from{ transform: translate3d(-1.2%, -0.8%, 0) scale(1.02); opacity:.85; }
  to  { transform: translate3d( 1.2%,  0.9%, 0) scale(1.04); opacity:1; }
}

/* topbar feels more premium */
.topbar{
  border-radius: var(--radius-xl);
  background: rgba(0,0,0,.22);
  box-shadow: var(--shadow-soft);
}

/* tabs: tighter + modern hover */
.tabs{gap:10px}
.tab{
  border-radius: 999px;
  padding: 10px 14px;
  transition: transform .14s ease, border-color .14s ease, background .14s ease, color .14s ease;
}
.tab:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
}
.tab.active{
  background: linear-gradient(180deg, rgba(125,76,255,.42), rgba(125,76,255,.16));
  box-shadow: 0 10px 28px rgba(125,76,255,.18);
}

/* hero becomes a proper profile header card */
.hero{
  text-align:left;
  margin: 18px 0 12px;
  padding: 18px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(800px 300px at 12% 10%, rgba(255,179,71,.18), transparent 60%),
    radial-gradient(900px 360px at 84% 0%, rgba(125,76,255,.22), transparent 62%),
    rgba(0,0,0,.18);
  box-shadow: var(--shadow-soft);
}
.hero h1{
  font-size: clamp(28px, 2.2vw, 40px);
  letter-spacing: .15px;
}
.hero .sub{
  font-size: 13px;
  color: rgba(244,241,247,.86);
}
.hero .small{opacity:.92}

/* avatar glow ring + crisp */
.hero .avatar{
  border-radius: 24px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(0,0,0,.28));
  position: relative;
}
.hero .avatar::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 26px;
  pointer-events:none;
  background: conic-gradient(
    from 220deg,
    rgba(255,179,71,.55),
    rgba(125,76,255,.55),
    rgba(76,255,179,.35),
    rgba(255,179,71,.55)
  );
  filter: blur(10px);
  opacity:.25;
  z-index:-1;
}

/* statsbar cards: hover + more depth */
.stat{
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,.065);
  box-shadow: var(--shadow-card);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.stat:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.26);
  box-shadow: var(--shadow-hover);
}
.stat .num{
  background: linear-gradient(90deg, rgba(255,179,71,1), rgba(125,76,255,1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* badges look nicer */
.badges{gap:8px}
.badge{
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}

/* section titles */
.section-title{ margin: 28px 0 12px; }
.section-title h2{ font-size: 16px; letter-spacing: .2px; }
.section-title .hint{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
}

/* KPI tiles: interactive */
.kpi{
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,.065);
  box-shadow: var(--shadow-card);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  position: relative;
  overflow: hidden;
}
.kpi::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(420px 240px at 14% 0%, rgba(255,179,71,.16), transparent 60%),
    radial-gradient(520px 260px at 88% 12%, rgba(125,76,255,.18), transparent 64%);
  opacity:.75;
}
.kpi:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.28);
  box-shadow: var(--shadow-hover);
}
.kpi > *{ position:relative; z-index:1; }
.kpi h3{
  font-size: 12px;
  letter-spacing: .35px;
  text-transform: uppercase;
}

/* Player story / panels */
.panel{
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-xl);
  padding: 16px;
  box-shadow: var(--shadow-card);
}
.panel p{ margin: 10px 0; color: rgba(244,241,247,.92); }

/* callouts: more "feature" feel */
.callout{
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}
.callout h3{ margin-top: 0; letter-spacing: .15px; }
.callout ul{ margin: 10px 0 0; }

/* tables: modern */
.table{ border-radius: var(--radius-xl); }
.table th{ letter-spacing: .35px; text-transform: uppercase; }

/* link focus, accessibility */
a:focus-visible, .tab:focus-visible{
  outline: 2px solid rgba(255,179,71,.55);
  outline-offset: 3px;
  border-radius: 999px;
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  body::before{animation:none}
  .tab, .kpi, .stat, .card{transition:none}
}

/* =========================================================
   SEASON 5 HOME — HERO ICON WALL + 3D COVERFLOW DOCK
   (Additive: keeps existing styling intact)
   ========================================================= */

:root{
  --glass-2: rgba(15, 18, 32, 0.58);
  --glass-3: rgba(12, 14, 24, 0.42);
  --stroke-2: rgba(255,255,255,0.10);
  --stroke-3: rgba(255,255,255,0.07);
  --hero-max: 1200px;
}

/* Unified header (use on every page) */
/* OLD HEADER STYLES - REPLACED WITH .modern-header
.siteHeader{
  position: sticky;
  top: 0;
  z-index: 50;
  margin: 18px auto 0;
  width: min(var(--hero-max), calc(100% - 28px));
  border-radius: 26px;
  padding: 14px 16px 12px;
  background:
    radial-gradient(1200px 260px at 14% 0%, rgba(125,76,255,.20), transparent 55%),
    radial-gradient(1200px 260px at 86% 0%, rgba(255,153,0,.18), transparent 55%),
    linear-gradient(180deg, rgba(10,12,20,.78), rgba(10,12,20,.52));
  border: 1px solid var(--stroke-2);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
}

.siteHeader__inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
}

.brandChip{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  text-decoration:none;
  color: var(--text);
  min-width: 320px;
}

.brandDot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  margin-top: 6px;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.35) 35%, transparent 62%),
              linear-gradient(135deg, var(--accent2), var(--accent));
  box-shadow: 0 0 0 6px rgba(125,76,255,.10), 0 0 26px rgba(125,76,255,.25);
}

.brandText{
  font-size: 18px;
  font-weight: 800;
  letter-spacing:.2px;
  line-height: 1.1;
}
.brandText b{ color: var(--accent); font-weight: 900; }
.brandSub{
  display:block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
}

.statsChip{
  text-align:right;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--stroke-3);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.statsChip .big{
  font-weight: 800;
  font-size: 13px;
}
.statsChip .small{
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
}
.statsChip code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  padding: 2px 8px;
}

.siteNav,
.pillNav{
  margin-top: 12px;
  display:flex;
  flex-wrap: wrap;
  justify-content:center;
  gap: 10px;
}
.navPill{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  color: var(--text);
  text-decoration:none;
  box-shadow: 0 12px 32px rgba(0,0,0,.22);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  user-select:none;
}
.navPill:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
}
.navPill.is-active{
  border-color: rgba(125,76,255,.35);
  box-shadow: 0 18px 40px rgba(125,76,255,.10), 0 12px 30px rgba(0,0,0,.25);
}
.navIcon{
  width: 18px;
  height: 18px;
  display:grid;
  place-items:center;
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 12px;
}
@media (max-width: 720px){
  .statsChip{ display:none; }
  .brandSub{ display:none; }
}
END OLD HEADER STYLES */

/* Home hero */
.homeWrap{
  width: min(var(--hero-max), calc(100% - 28px));
  margin: 16px auto 28px;
}

.hero{
  position: relative;
  border-radius: 34px;
  overflow: hidden;
  border: 1px solid var(--stroke-2);
  background: radial-gradient(1000px 520px at 18% 0%, rgba(125,76,255,.20), transparent 58%),
              radial-gradient(1000px 520px at 82% 0%, rgba(255,153,0,.14), transparent 58%),
              linear-gradient(180deg, rgba(8,10,18,.75), rgba(8,10,18,.45));
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  min-height: 420px;
}

.heroWall{
  position:absolute;
  inset:-26% -30% -30% -30%;
  opacity: .55;
  filter: saturate(1.05) contrast(1.05);
  transform: rotate(-6deg);
  pointer-events:none;
}
.heroWall::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1100px 420px at 50% 20%, rgba(0,0,0,.15), transparent 60%),
    radial-gradient(1100px 420px at 50% 75%, rgba(0,0,0,.45), transparent 65%),
    linear-gradient(180deg, rgba(8,10,18,.25), rgba(8,10,18,.80));
}

.heroRow{
  display:flex;
  gap: 16px;
  padding: 14px 0;
  will-change: transform;
  opacity: .92;
}
.heroTile{
  width: 72px;
  height: 72px;
  border-radius: 22px;
  overflow:hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  transform: translateZ(0);
}
.heroTile img{
  width:100%;
  height:100%;
  object-fit: cover;
}

@keyframes heroMarqueeL { from { transform: translateX(0);} to { transform: translateX(-50%);} }
@keyframes heroMarqueeR { from { transform: translateX(-50%);} to { transform: translateX(0);} }

.heroRow[data-dir="l"]{ animation: heroMarqueeL 140s linear infinite; }
.heroRow[data-dir="r"]{ animation: heroMarqueeR 160s linear infinite; }
.heroRow[data-speed="fast"][data-dir="l"]{ animation-duration: 110s; }
.heroRow[data-speed="fast"][data-dir="r"]{ animation-duration: 125s; }

.heroContent{
  position: relative;
  padding: 54px 44px 34px;
  display:grid;
  gap: 16px;
  max-width: 720px;
}
.heroKicker{
  display:inline-flex;
  gap: 10px;
  align-items:center;
  width: fit-content;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: var(--muted);
  font-size: 13px;
}
.heroTitle{
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.04;
  margin: 0;
  letter-spacing: -0.6px;
}
.heroTitle .grad{
  background: linear-gradient(135deg, #fff, rgba(255,255,255,.86), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.heroLead{
  color: var(--muted);
  font-size: 15px;
  margin: 0;
  max-width: 60ch;
}
.heroCtas{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  text-decoration:none;
  color: var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.btn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); }
.btn.primary{
  border-color: rgba(125,76,255,.35);
  background:
    radial-gradient(900px 300px at 20% 0%, rgba(125,76,255,.20), transparent 60%),
    linear-gradient(180deg, rgba(125,76,255,.18), rgba(255,255,255,.02));
  box-shadow: 0 18px 45px rgba(125,76,255,.12);
}
.btn .mini{
  width: 18px; height: 18px;
  display:grid; place-items:center;
  border-radius: 7px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 12px;
}

@media (max-width: 720px){
  .heroContent{ padding: 38px 20px 22px; }
}

/* Featured frame */
.heroAside{
  position:absolute;
  right: 22px;
  top: 22px;
  width: min(360px, calc(100% - 44px));
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.06));
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 70px rgba(0,0,0,.50);
  padding: 16px;
}
.heroAside h3{
  margin: 0 0 10px;
  font-size: 14px;
  color: rgba(255,255,255,.86);
  letter-spacing: .2px;
}
.featureCard{
  display:grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items:center;
  padding: 12px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  text-decoration:none;
  color: var(--text);
}
.featureCard:hover{ border-color: rgba(255,255,255,.18); }
.featureAvatar{
  width: 64px; height: 64px;
  border-radius: 20px;
  overflow:hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
.featureAvatar img{ width:100%; height:100%; object-fit: cover; }
.featureMeta .name{ font-weight: 900; font-size: 16px; }
.featureMeta .sub{ color: var(--muted); font-size: 12px; margin-top: 4px; }
@media (max-width: 960px){
  .heroAside{ position: relative; right:auto; top:auto; margin: 0 18px 18px; width: auto; }
  .hero{ padding-bottom: 18px; }
}

/* 3D Coverflow dock */
.dockWrap{
  margin-top: 18px;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid var(--stroke-2);
  background: radial-gradient(900px 360px at 15% 0%, rgba(125,76,255,.16), transparent 60%),
              linear-gradient(180deg, rgba(10,12,20,.72), rgba(10,12,20,.42));
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
}

.dockTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 16px 18px;
}
.dockTop h2{ margin:0; font-size: 16px; letter-spacing:.2px; }
.dockTop p{ margin:0; color: var(--muted); font-size: 12px; }

.dockControls{ display:flex; gap: 8px; align-items:center; }
.iconBtn{
  width: 38px; height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--text);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition: transform .18s ease, border-color .18s ease;
}
.iconBtn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); }

.coverflow{ position: relative; padding: 16px 0 22px; perspective: 1100px; }
.coverflowTrack{
  display:flex;
  gap: 14px;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  padding: 6px 22px 18px;
  scrollbar-width: none;
}
.coverflowTrack::-webkit-scrollbar{ display:none; }

.dockItem{
  scroll-snap-align: center;
  flex: 0 0 auto;
  width: 120px;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .16s ease;
  text-decoration:none;
  color: var(--text);
}
.dockCard{
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 12px 12px 10px;
  box-shadow: 0 20px 55px rgba(0,0,0,.30);
}
.dockAvatar{
  width: 96px; height: 96px;
  border-radius: 28px;
  overflow:hidden;
  margin: 0 auto;
  background: radial-gradient(70% 80% at 50% 35%, rgba(255,255,255,.10), rgba(0,0,0,.35));
  border: 1px solid rgba(255,255,255,.12);
  display:grid;
  place-items:center;
  padding: 8px;
}
.dockAvatar img{ width:100%; height:100%; object-fit: contain; }
.dockInitials{
  display:none;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: .6px;
  color: rgba(255,255,255,.90);
}
.dockItem.is-missing .dockInitials{ display:block; }
.dockItem.is-missing img{ display:none; }

.dockName{ margin-top: 10px; font-size: 12px; text-align:center; color: rgba(255,255,255,.86); }
.dockHint{ padding: 0 22px 18px; color: var(--muted); font-size: 12px; }

/* Home: quick links cards (Rankings / Voting / Awards) */
.homeCards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.homeCard{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 14px 16px;
  text-decoration:none;
  color: var(--text);
}

.homeCardIcon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  font-size: 20px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  flex: 0 0 auto;
}

.homeCard h3{ margin: 0; font-size: 16px; letter-spacing: .2px; }
.homeCard p{ margin: 4px 0 0; color: var(--muted); font-size: 13px; }

.siteFooter{
  width: min(var(--hero-max), calc(100% - 28px));
  margin: 22px auto 26px;
  padding: 14px 16px;
  border-radius: 22px;
  border: 1px solid var(--stroke-3);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  display:flex;
  justify-content:space-between;
  gap: 10px;
}
.siteFooter a{ color: rgba(255,255,255,.78); text-decoration:none; }
.siteFooter a:hover{ text-decoration: underline; }

@media (max-width: 720px){
  .dockTop{ flex-direction: column; align-items:flex-start; }
  .siteFooter{ flex-direction: column; }
  .homeCards{ grid-template-columns: 1fr; }
}


/* ===== Season pages helpers ===== */
.bullets{margin:12px 0 0; padding-left:18px; color:var(--muted); line-height:1.65}
.bullets li{margin:6px 0}
.link{color:var(--text); text-decoration:none}
.link:hover{text-decoration:underline}
h1{margin:0}
h2{margin:0}
.kicker{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.lede{color:var(--muted); margin:10px 0 0; line-height:1.6}



/* =========================
   V7 FIXES — header/hero sanity
   ========================= */

/* If a page accidentally contains multiple .siteHeader blocks, only show the first one. */
.siteHeader ~ .siteHeader{display:none !important;}

/* When the modern header is present, hide the legacy nav blocks (topbar/tabs) to avoid double headers. */
body.hasSiteHeader .topbar,
body.hasSiteHeader .tabs{display:none !important;}

/* Keep the legacy hero/title area, but make it smaller (it was using min-height: 420px). */
.hero{
  min-height: auto !important;
  padding: 22px 26px !important;
}
.hero h1{
  font-size: clamp(28px, 4vw, 46px) !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.08 !important;
}
body.hasSiteHeader .hero .sub,
body.hasSiteHeader .hero p,
body.hasSiteHeader .hero .meta{
  font-size: 15px !important;
  opacity: .92 !important;
  margin-top: 8px !important;
}

/* Make the site header feel less "floating" and keep nav icons aligned. */
.siteHeader{
  padding: 18px 20px !important;
}
.pillNav{
  margin-top: 12px !important;
  gap: 10px !important;
}
.pillLink{
  padding: 10px 14px !important;
  line-height: 1 !important;
}
.navIcon{
  display:inline-flex !important;
  width: 1.25em !important;
  justify-content:center !important;
  margin-right: .5em !important;
}


/* Bigger nav emoji icons + better alignment */
.pillNav .navIcon{
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

/* Give pills a bit more breathing room */
.pillNav .pill,
.pillNav .pillLink{
  gap: 10px;
  padding: 10px 14px;
}

/* Optional: slightly larger label */
.pillNav .navLabel{ font-size: 14px; }

.siteNav .navIcon{
  font-size: 21px;
  line-height: 1;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.siteNav .navPill{
  gap: 12px;
  padding: 10px 14px;
}


/* ========================================
   EPISODE TAB STYLES — v3 ENHANCED
   ======================================== */

.episode-viewer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
}

.episode-input {
  background: rgba(10, 8, 18, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #fff;
  border-radius: 12px;
  padding: 12px;
  outline: none;
  resize: vertical;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
}

.episode-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* ── Stage / Script switch (Total Drama episodes) ── */
.ep-view-toggle {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
}

/* ── Episode wrapper ─────────────────────── */
.episode-wrapper {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.04);
  background: rgba(12, 7, 22, 0.92);
}

/* ── Reading progress bar ────────────────── */
.ep-reading-progress {
  height: 3px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.ep-reading-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #7c4dff, #e040fb, #ff4081);
  transition: width 0.12s linear;
}

/* ── Episode title card ──────────────────── */
.ep-title-card {
  text-align: center;
  padding: 48px 32px 36px;
  background: linear-gradient(160deg, rgba(124,77,255,0.1), rgba(224,64,251,0.06), transparent);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ep-title-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  margin-bottom: 14px;
}
.ep-title-name {
  font-size: 30px;
  font-weight: 900;
  line-height: 1.15;
  background: linear-gradient(135deg, #fff 0%, rgba(255,179,71,0.95) 45%, #e040fb 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 18px;
}
.ep-title-meta {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(255,255,255,0.38);
}
.ep-title-meta span { display: flex; align-items: center; gap: 5px; }

/* ── Stats bar ───────────────────────────── */
.ep-stats {
  padding: 18px 32px 14px;
  background: rgba(0,0,0,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ep-stats-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: 12px;
}
.ep-stats-chars {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.ep-stats-char {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 130px;
}
.ep-stats-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid;
  flex-shrink: 0;
  background: rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.ep-stats-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ep-stats-char-name {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  min-width: 58px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}
.ep-stats-bar-wrap {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
  min-width: 36px;
}
.ep-stats-bar { height: 100%; border-radius: 999px; }
.ep-stats-count {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.35);
  min-width: 18px;
  text-align: right;
}

/* ── Main content ────────────────────────── */
.episode-content {
  padding: 0 0 60px;
  background: linear-gradient(180deg, rgba(14,9,24,0.5), rgba(10,6,18,0.3));
}

/* ── Scene ───────────────────────────────── */
.scene {
  padding: 32px 40px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  animation: epFadeUp 0.5s ease-out both;
}
.scene:last-child { border-bottom: none; }

@keyframes epFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.scene-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 800;
  color: rgba(255,179,71,0.9);
  margin-bottom: 24px;
  padding: 10px 16px;
  background: linear-gradient(90deg, rgba(255,179,71,0.11), rgba(255,179,71,0.03));
  border-radius: 8px;
  border-left: 3px solid rgba(255,179,71,0.65);
}
.scene-sticky {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(12,7,22,0.96) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  margin: -32px -40px 24px -40px;
  padding: 12px 40px !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.45);
  border-left: none !important;
  border-bottom: 1px solid rgba(255,179,71,0.12) !important;
}
.scene-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,179,71,0.1);
  border: 1px solid rgba(255,179,71,0.18);
  color: rgba(255,179,71,0.55);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Dialogue ────────────────────────────── */
.dialogue-line {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 12px 0;
  padding: 8px;
  border-radius: 12px;
  transition: background 0.18s;
}
.dialogue-line:hover { background: rgba(255,255,255,0.03); }

.character-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid;
  background: rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}
.dialogue-line:hover .character-avatar { transform: scale(1.08); }
.character-avatar img { width: 100%; height: 100%; object-fit: cover; }
.character-avatar-fallback {
  font-size: 20px;
  display: flex;
  width: 100%; height: 100%;
  align-items: center;
  justify-content: center;
}

.dialogue-bubble {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px 16px 16px 16px;
  padding: 10px 16px;
  max-width: 82%;
  transition: background 0.18s, transform 0.18s;
}
.dialogue-line:hover .dialogue-bubble {
  background: rgba(255,255,255,0.07);
  transform: translateX(3px);
}

.character-name {
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.dialogue-text {
  font-size: 15px;
  color: rgba(255,255,255,0.88);
  line-height: 1.65;
}

/* ── Stage direction ─────────────────────── */
.stage-direction {
  color: rgba(255,255,255,0.36);
  margin: 8px 0;
  padding-left: 58px;
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
}

/* ── Confessional ────────────────────────── */
.confessional {
  margin: 28px 0;
  background: linear-gradient(160deg, rgba(18,8,38,0.95), rgba(10,5,20,0.95));
  border: 1px solid rgba(200,50,50,0.22);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 0 32px rgba(200,50,50,0.07), inset 0 1px 0 rgba(255,255,255,0.05);
}
.conf-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 16px;
  background: rgba(180,40,40,0.12);
  border-bottom: 1px solid rgba(200,50,50,0.14);
}
.conf-rec {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: rgba(255,80,80,0.85);
  display: flex;
  align-items: center;
  gap: 4px;
  animation: confRecPulse 1.4s ease-in-out infinite;
}
@keyframes confRecPulse {
  0%,100% { opacity: 0.85; }
  50%     { opacity: 0.28; }
}
.conf-num {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
}
.confessional-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: rgba(210,80,80,0.9);
  padding: 12px 18px 8px;
}
.confessional .dialogue-line { padding: 6px 18px; }
.confessional .stage-direction { padding-left: 76px; padding-right: 18px; }
.confessional .dialogue-line:last-of-type { padding-bottom: 14px; }

/* ── Tribal Council ──────────────────────── */
.tribal-council {
  background: linear-gradient(155deg, rgba(55,5,5,0.55), rgba(18,2,2,0.8));
  border: 1px solid rgba(255,60,0,0.2);
  border-radius: 18px;
  padding: 40px;
  margin: 40px 0;
  position: relative;
  overflow: hidden;
  animation: epFadeUp 0.6s ease-out both, tribalGlow 4s ease-in-out 0.6s infinite;
}
.tribal-council::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #ff3c00 0%, #ff8c00 50%, #ff3c00 100%);
  background-size: 200% 100%;
  animation: tribalStripe 2.5s linear infinite;
}
@keyframes tribalStripe {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}
@keyframes tribalGlow {
  0%,100% { box-shadow: 0 0 40px rgba(255,60,0,0.14); }
  50%     { box-shadow: 0 0 70px rgba(255,100,0,0.28); }
}
.tribal-header {
  font-size: 20px;
  font-weight: 900;
  color: rgba(255,110,0,0.95);
  text-align: center;
  margin-bottom: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 0 28px rgba(255,80,0,0.45);
}
.tribal-suspense {
  text-align: center;
  font-size: 13px;
  font-style: italic;
  color: rgba(255,140,0,0.6);
  margin-bottom: 28px;
  animation: suspensePulse 2.2s ease-in-out infinite;
}
@keyframes suspensePulse {
  0%,100% { opacity: 0.6; }
  50%     { opacity: 1; }
}

/* ── Vote reveal ─────────────────────────── */
.vote-reveal {
  background: rgba(0,0,0,0.48);
  border: 1px solid rgba(255,80,0,0.18);
  border-radius: 10px;
  padding: 13px 20px;
  margin: 9px 0;
  font-size: 14px;
  color: rgba(255,255,255,0.82);
  position: relative;
  overflow: hidden;
  animation: voteSlide 0.6s ease-out both;
}
.vote-reveal::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,100,0,0.14), transparent);
  animation: voteShimmer 0.7s ease-out both;
}
@keyframes voteSlide {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes voteShimmer {
  from { left: -100%; }
  to   { left: 150%; }
}

/* ── Elimination ─────────────────────────── */
.eliminated-player {
  background: linear-gradient(135deg, rgba(110,0,0,0.42), rgba(38,0,0,0.55));
  border: 1px solid rgba(255,40,40,0.38);
  border-radius: 16px;
  padding: 26px 24px;
  margin: 26px 0;
  text-align: center;
  animation: eliminationReveal 1s cubic-bezier(0.22,1,0.36,1) both;
  box-shadow: 0 0 50px rgba(255,0,0,0.1);
}
.eliminated-message {
  font-size: 18px;
  font-weight: 800;
  color: rgba(255,80,60,0.95);
  text-shadow: 0 0 20px rgba(255,50,0,0.35);
  line-height: 1.4;
}
@keyframes eliminationReveal {
  0%  { opacity: 0; transform: scale(0.85) translateY(22px); }
  60% { transform: scale(1.03); }
  100%{ opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Empty state ─────────────────────────── */
.episode-empty {
  text-align: center;
  padding: 60px 20px;
  opacity: 0.6;
}
.episode-empty-icon { font-size: 60px; margin-bottom: 20px; }
.episode-empty-text { font-size: 16px; color: rgba(255,255,255,0.7); }

/* ── Shared animation ────────────────────── */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.scene, .confessional, .tribal-council, .dialogue-line,
.stage-direction, .vote-reveal, .eliminated-player {
  animation: fadeSlideIn 0.45s ease-out both;
}

/* ============================================
   PLAYER STORY FORMATTER - CSS STYLES
   Add this to your existing CSS
   ============================================ */

.player-story-container {
  background: rgba(30, 30, 46, 0.95);
  border-radius: 16px;
  padding: 32px;
  margin: 24px 0;
  border: 1px solid rgba(155, 109, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.player-story-header {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid rgba(155, 109, 255, 0.3);
  display: flex;
  align-items: center;
  gap: 12px;
}

.season-section {
  margin-bottom: 32px;
  position: relative;
  animation: fadeInUp 0.6s ease-out backwards;
}

.season-section:last-child {
  margin-bottom: 0;
}

.season-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(155, 109, 255, 0.2);
}

.season-number {
  background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
  color: white;
  padding: 6px 16px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  min-width: 90px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.3);
}

.season-theme {
  font-size: 18px;
  font-weight: 600;
  color: #c4b5fd;
  flex: 1;
}

.season-body {
  background: rgba(0, 0, 0, 0.2);
  padding: 20px;
  border-radius: 12px;
  border-left: 4px solid #9333ea;
  position: relative;
}

.season-body p {
  color: #d1d5db;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 12px;
}

.season-body p:last-child {
  margin-bottom: 0;
}

.result-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 16px;
  font-weight: 600;
  font-size: 12px;
  margin-top: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.result-winner {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #78350f;
  box-shadow: 0 3px 10px rgba(251, 191, 36, 0.4);
}

.result-runnerup {
  background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
  color: #1e293b;
  box-shadow: 0 3px 10px rgba(148, 163, 184, 0.4);
}

.result-eliminated {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #fef2f2;
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.4);
}

.stats-highlight {
  background: rgba(147, 51, 234, 0.15);
  border: 1px solid rgba(147, 51, 234, 0.3);
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 600;
  color: #c4b5fd;
  white-space: nowrap;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.season-section:nth-child(1) { animation-delay: 0.1s; }
.season-section:nth-child(2) { animation-delay: 0.2s; }
.season-section:nth-child(3) { animation-delay: 0.3s; }
.season-section:nth-child(4) { animation-delay: 0.4s; }
.season-section:nth-child(5) { animation-delay: 0.5s; }

/* Responsive */
@media (max-width: 768px) {
  .player-story-container {
    padding: 20px;
  }
  
  .season-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .season-number {
    width: 100%;
  }
  
  .season-body {
    padding: 16px;
  }
}
/* Key Moments section */
.kpi h3:has(🔑) {
  color: #fbbf24; /* Gold color for key moments */
}

/* Alliances section */
.kpi h3:has(🤝) {
  color: #34d399; /* Green color for alliances */
}

/* Rivalries section */
.kpi h3:has(⚔️) {
  color: #f87171; /* Red color for rivalries */
}