/* ===== TOKENS ===== */
:root {
  --black:      #0a0c0f;
  --navy:       #0f1520;
  --field:      #111827;
  --surface:    #1a2235;
  --surface-2:  #222d42;
  --border:     rgba(255,255,255,0.07);
  --lime:       #b5ff4d;
  --lime-dim:   rgba(181,255,77,0.12);
  --lime-glow:  rgba(181,255,77,0.25);
  --white:      #f0f4ff;
  --muted:      #6b7a99;
  --danger:     #ff5f5f;
  --font-display: 'Bebas Neue', 'Impact', sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Pages ── */
.page { display: none; min-height: 100vh; }
.page.active { display: block; }
.page.fade-out { animation: fadeOut 0.2s ease forwards; }
.page.fade-in  { animation: fadeIn  0.25s ease forwards; }
@keyframes fadeOut { to   { opacity: 0; transform: translateY(-6px); } }
@keyframes fadeIn  { from { opacity: 0; transform: translateY(10px); } to { opacity:1; transform:translateY(0); } }

/* ── HOME ── */
#page-home {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--navy);
  overflow: hidden;
  position: relative;
}
#page-home.active { display: flex; }

.field-lines { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.field-lines span {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(181,255,77,0.07) 50%, transparent);
  animation: field-scroll 8s ease-in-out infinite;
}
.field-lines span:nth-child(1) { left:15%; animation-delay:0s; }
.field-lines span:nth-child(2) { left:30%; animation-delay:1.2s; }
.field-lines span:nth-child(3) { left:50%; animation-delay:0.6s; background: linear-gradient(to bottom,transparent,rgba(181,255,77,0.12) 50%,transparent); }
.field-lines span:nth-child(4) { left:70%; animation-delay:1.8s; }
.field-lines span:nth-child(5) { left:85%; animation-delay:0.3s; }
@keyframes field-scroll {
  0%,100% { opacity:0.4; transform:scaleY(0.9) translateY(0); }
  50%      { opacity:1;   transform:scaleY(1.05) translateY(-8px); }
}

.home-main {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 48px;
  padding: 40px 24px; width: 100%; max-width: 520px;
}
.home-header { display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.logo-mark {
  width:56px; height:56px; border-radius:14px;
  background:var(--lime); color:var(--black);
  font-family:var(--font-display); font-size:28px; letter-spacing:2px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 32px var(--lime-glow);
}
.site-title {
  font-family:var(--font-display); font-size:clamp(52px,14vw,80px);
  letter-spacing:6px; line-height:1; color:var(--white);
}
.site-title .accent { color:var(--lime); }
.site-tagline { font-size:14px; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; }

.entry-card {
  width:100%; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:32px;
  display:flex; flex-direction:column; gap:12px;
}
.entry-label { font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--lime); }
.entry-row { display:flex; gap:10px; }
.league-input {
  flex:1; background:var(--field); border:1.5px solid var(--border);
  border-radius:var(--radius-sm); color:var(--white);
  font-family:var(--font-body); font-size:15px; padding:12px 16px; outline:none;
  transition: border-color .2s, box-shadow .2s;
}
.league-input::placeholder { color:var(--muted); }
.league-input:focus { border-color:var(--lime); box-shadow:0 0 0 3px var(--lime-dim); }
.load-btn {
  background:var(--lime); color:var(--black); border:none;
  border-radius:var(--radius-sm); font-family:var(--font-body);
  font-size:14px; font-weight:700; padding:12px 20px; cursor:pointer;
  white-space:nowrap; position:relative;
  transition: background .15s, transform .1s, box-shadow .15s;
  display:flex; align-items:center; gap:8px; min-width:120px; justify-content:center;
}
.load-btn:hover { background:#c8ff6a; box-shadow:0 0 20px var(--lime-glow); }
.load-btn:active { transform:scale(0.97); }
.load-btn:disabled { opacity:.7; cursor:not-allowed; }
.load-btn.loading .btn-text { opacity:0; }
.load-btn.loading .btn-spinner { display:block; }
.btn-spinner {
  display:none; width:16px; height:16px;
  border:2.5px solid rgba(0,0,0,.25); border-top-color:var(--black);
  border-radius:50%; animation:spin .7s linear infinite;
  position:absolute;
}
@keyframes spin { to { transform:rotate(360deg); } }
.error-msg { color:var(--danger); font-size:13px; min-height:18px; }
.entry-hint { font-size:12px; color:var(--muted); line-height:1.5; }

/* ── LEAGUE PAGE ── */
#page-league { background:var(--field); }

.top-nav {
  position:sticky; top:0; z-index:10;
  background:rgba(10,12,15,.9); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px;
}
.back-btn {
  background:none; border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--muted); font-family:var(--font-body); font-size:13px; font-weight:500;
  padding:7px 14px; cursor:pointer; transition: color .15s, border-color .15s;
}
.back-btn:hover { color:var(--white); border-color:rgba(255,255,255,.25); }
.nav-logo { font-family:var(--font-display); font-size:22px; letter-spacing:3px; }
.nav-logo .accent { color:var(--lime); }
.nav-right { display:flex; align-items:center; gap:8px; }
.nav-recent-wrap { position:relative; }
.nav-recent-btn {
  background:none; border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--muted); font-family:var(--font-body); font-size:13px; font-weight:500;
  padding:7px 14px; cursor:pointer; transition:color .15s, border-color .15s;
  display:flex; align-items:center; gap:6px;
}
.nav-recent-btn:hover { color:var(--white); border-color:rgba(255,255,255,.25); }
.nav-recent-btn.open { color:var(--white); border-color:rgba(255,255,255,.25); }
.nav-recent-caret { font-size:10px; transition:transform .18s; }
.nav-recent-btn.open .nav-recent-caret { transform:rotate(180deg); }
.nav-recent-dropdown {
  position:absolute; top:calc(100% + 8px); right:0;
  background:var(--surface); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-md); min-width:240px; max-width:320px;
  box-shadow:0 8px 32px rgba(0,0,0,.5);
  overflow:hidden; z-index:100;
}
.nav-recent-dropdown[hidden] { display:none; }
.nav-dd-item {
  display:flex; flex-direction:column; gap:2px;
  width:100%; padding:11px 16px; text-align:left;
  background:none; border:none; border-bottom:1px solid var(--border);
  font-family:var(--font-body); cursor:pointer; transition:background .12s;
}
.nav-dd-item:last-child { border-bottom:none; }
.nav-dd-item:hover { background:var(--surface-2); }
.nav-dd-name { font-size:13px; font-weight:600; color:var(--white); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-dd-meta { font-size:11px; color:var(--muted); }
.nav-dd-empty { padding:14px 16px; font-size:13px; color:var(--muted); text-align:center; }

/* Loading */
.league-loading {
  display:flex; align-items:center; justify-content:center;
  min-height:calc(100vh - 57px);
}
.loading-inner { display:flex; flex-direction:column; align-items:center; gap:20px; }
.loading-spinner {
  width:44px; height:44px; border:3px solid var(--border);
  border-top-color:var(--lime); border-radius:50%; animation:spin .8s linear infinite;
}
.loading-status { font-size:14px; color:var(--muted); }

/* Content */
.league-main {
  max-width:980px; margin:0 auto; padding:40px 24px 80px;
  display:flex; flex-direction:column; gap:48px;
}

/* Hero */
.league-hero { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.hero-btn-group {
  display: flex;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}
.draft-hero-btn {
  background:var(--lime-dim); border:1px solid rgba(181,255,77,.35);
  margin-left: 0;
  border-radius:var(--radius-md); color:var(--lime);
  font-family:var(--font-body); font-size:14px; font-weight:600;
  padding:11px 22px; cursor:pointer; letter-spacing:.02em; white-space:nowrap;
  transition:background .15s, border-color .15s, box-shadow .15s;
}
.draft-hero-btn:hover {
  background:var(--lime-glow);
  border-color:rgba(181,255,77,.65);
  box-shadow:0 0 18px var(--lime-glow);
}
.league-status-row { display:flex; align-items:center; gap:12px; }
.prev-season-link {
  background:none; border:none; padding:0; cursor:pointer;
  font-family:var(--font-body); font-size:12px; font-weight:500;
  color:var(--muted); letter-spacing:.03em; text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:rgba(107,122,153,0.4);
  transition:color .15s;
}
.prev-season-link:hover { color:var(--white); }
.league-avatar-wrap {
  flex-shrink:0; width:80px; height:80px; border-radius:20px;
  overflow:hidden; border:2px solid var(--border); background:var(--surface);
  display:flex; align-items:center; justify-content:center;
}
.league-avatar { width:100%; height:100%; object-fit:cover; display:none; }
.league-avatar-initials { font-family:var(--font-display); font-size:30px; letter-spacing:2px; color:var(--lime); }
.league-identity { display:flex; flex-direction:column; gap:6px; }
.season-badge { font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--lime); text-transform:uppercase; }
.league-name { font-family:var(--font-display); font-size:clamp(28px,6vw,44px); letter-spacing:2px; line-height:1.1; }
.league-status-pill {
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 10px; border-radius:20px;
  background:var(--lime-dim); color:var(--lime); border:1px solid rgba(181,255,77,.25); width:fit-content;
}
.league-status-pill.status-complete  { background:rgba(255,95,95,.1);  color:#ff8a8a; border-color:rgba(255,95,95,.2); }
.league-status-pill.status-pre_draft { background:rgba(255,200,80,.1); color:#ffc850; border-color:rgba(255,200,80,.2); }
.league-status-pill.status-drafting  { background:rgba(80,160,255,.1); color:#50a0ff; border-color:rgba(80,160,255,.2); }

/* Stats */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; }
.stat-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:20px 22px;
  display:flex; flex-direction:column; gap:6px; transition:border-color .2s;
}
.stat-card:hover { border-color:rgba(181,255,77,.2); }
.stat-label { font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.stat-value { font-size:22px; font-family:var(--font-display); letter-spacing:1px; }

/* Superlatives */
.superlatives-grid { display:flex; flex-direction:column; gap:8px; }
.supra-pair { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.supra-pair--solo { grid-template-columns:1fr; }
.supra-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:16px 18px;
  display:flex; flex-direction:column; gap:4px;
}
.supra-label { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.supra-body { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-top:3px; }
.supra-team { font-size:15px; font-weight:600; color:var(--white); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.supra-val { font-size:20px; font-family:var(--font-display); letter-spacing:1px; color:var(--white); white-space:nowrap; flex-shrink:0; }
.supra-ctx { font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Trade history */
.trade-list { display:flex; flex-direction:column; gap:10px; }
.trade-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.trade-header { padding:8px 14px; background:var(--surface-2); border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.trade-week { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--lime); }
.trade-date { font-size:11px; color:var(--muted); }
.trade-body { display:flex; flex-wrap:wrap; }
.trade-side { flex:1; min-width:180px; padding:12px 14px; }
.trade-side + .trade-side { border-left:1px solid var(--border); }
.trade-team { font-size:13px; font-weight:600; color:var(--white); display:flex; align-items:center; gap:7px; margin-bottom:7px; }
.trade-team-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.trade-receives { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.trade-items { display:flex; flex-direction:column; gap:3px; }
.trade-item { font-size:13px; color:var(--white); }
.trade-item--pick { color:var(--muted); font-style:italic; }
.trade-item--empty { color:var(--muted); }
.trade-pagination { display:flex; align-items:center; gap:8px; }
.trade-page-btn {
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--white); font-size:14px; line-height:1; padding:4px 10px; cursor:pointer;
  transition:background .15s;
}
.trade-page-btn:hover:not(:disabled) { background:var(--lime-dim); }
.trade-page-btn:disabled { color:var(--muted); cursor:default; }
.trade-page-indicator { font-size:12px; color:var(--muted); white-space:nowrap; }

/* Waiver cards */
.waiver-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.waiver-header { padding:8px 14px; background:var(--surface-2); border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; gap:8px; }
.waiver-team { font-size:13px; font-weight:600; color:var(--white); display:flex; align-items:center; gap:7px; }
.waiver-meta { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.waiver-bid { font-size:12px; font-weight:700; color:var(--lime); }
.waiver-week { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.waiver-changes { padding:10px 14px; display:flex; flex-direction:column; gap:4px; }
.waiver-add { font-size:13px; color:#5ccb8a; }
.waiver-drop { font-size:13px; color:var(--danger); }

/* Section */
.section-block { display:flex; flex-direction:column; gap:18px; min-width:0; }
.section-heading { font-family:var(--font-display); font-size:18px; letter-spacing:3px; color:var(--muted); }

/* Standings table */
.table-wrap { overflow-x:auto; border-radius:var(--radius-md); border:1px solid var(--border); }
.data-table { width:100%; border-collapse:collapse; font-size:14px; }
.data-table thead { background:var(--surface-2); }
.data-table th {
  padding:12px 14px; text-align:left; font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
.data-table th[data-sort],
.data-table th[data-hsort] { cursor:pointer; user-select:none; transition:color .15s; }
.data-table th[data-sort]:hover,
.data-table th[data-hsort]:hover { color:var(--white); }
.data-table th.sort-active { color:var(--lime); }
.sort-indicator { margin-left:4px; font-size:9px; opacity:.8; }

/* Expandable standings rows */
.standings-row { cursor:pointer; }
.standings-row:hover { background:rgba(255,255,255,0.035) !important; }
.row-chevron { display:inline-block; font-size:9px; color:var(--muted); margin-left:7px; transition:transform .18s; vertical-align:middle; }
.row-expanded .row-chevron { transform:rotate(90deg); }
.roster-expand-row td { padding:0; background:var(--navy); border-top:none; }

/* Roster panel */
.roster-panel { padding:14px 14px 20px; }
.rp-loading { color:var(--muted); font-size:13px; }
.rp-no-db { font-size:12px; color:#fbbf24; margin-bottom:10px; }
.rp-no-db code { font-family:'Courier New',monospace; font-size:11px; }
.rp-col-headers { display:flex; padding-bottom:8px; }
.rp-col-head { flex:1; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:0 12px; }
.rp-cols { display:flex; border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.rp-cols:has(+ .rp-bench-divider) { border-radius:var(--radius-md) var(--radius-md) 0 0; }
.rp-cols--bench { border-top:none; border-radius:0 0 var(--radius-md) var(--radius-md); }
.rp-col { flex:1; padding:10px 12px; border-right:1px solid var(--border); min-width:0; }
.rp-col:last-child { border-right:none; }
.rp-player { padding:4px 0; border-bottom:1px solid rgba(255,255,255,0.04); }
.rp-player:last-child { border-bottom:none; }
.rp-player-name { display:block; font-size:12px; font-weight:500; color:var(--white); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rp-number { color:var(--muted); font-weight:400; }
.rp-player--bench .rp-player-name { color:var(--muted); font-weight:400; }
.rp-player-meta { display:block; font-size:11px; color:var(--muted); margin-top:1px; }
.rp-bench-divider { display:flex; align-items:center; gap:10px; margin:0; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; border-left:1px solid var(--border); border-right:1px solid var(--border); padding:5px 12px; background:var(--surface-2); }
.rp-bench-divider::before, .rp-bench-divider::after { content:''; flex:1; height:1px; background:var(--border); }
.data-table td { padding:11px 14px; border-top:1px solid var(--border); vertical-align:middle; }
.data-table tbody tr:hover { background:rgba(255,255,255,.025); }
.rank-num { font-family:var(--font-display); font-size:18px; color:var(--muted); }
.team-name { font-weight:600; }
.manager-name { color:var(--muted); font-size:13px; }
.record-val { font-family:var(--font-display); font-size:16px; letter-spacing:1px; }
.pts-val { font-size:13px; color:var(--muted); }
.power-bar-cell { min-width:130px; }
.power-bar-wrap { display:flex; align-items:center; gap:8px; }
.power-bar-bg { flex:1; height:6px; background:var(--surface-2); border-radius:3px; overflow:hidden; }
.power-bar-fill { height:100%; background:var(--lime); border-radius:3px; }
.power-bar-val { font-size:12px; color:var(--muted); white-space:nowrap; min-width:32px; }

/* Chart tabs */
.chart-tabs { display:flex; flex-wrap:wrap; gap:8px; }
.chart-tab {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--muted); font-family:var(--font-body); font-size:13px; font-weight:500;
  padding:8px 16px; cursor:pointer; transition: all .15s;
}
.chart-tab:hover { color:var(--white); border-color:rgba(255,255,255,.15); }
.chart-tab.active { background:var(--lime-dim); color:var(--lime); border-color:rgba(181,255,77,.3); }

.chart-container { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.chart-panel { display:none; padding:20px; }
.chart-panel.active { display:block; }
.chart-panel canvas { width:100% !important; height:400px !important; }

.chart-note { margin-top:14px; font-size:13px; color:var(--muted); line-height:1.6; }

/* ── Head-to-head matrix ──────────────────────────────────────────────────── */
.h2h-table { table-layout:fixed; }
.h2h-corner { width:80px; min-width:60px; }
.h2h-col-header {
  padding: 8px 6px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70px;
}
.h2h-row-header {
  padding: 8px 10px 8px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
  background: var(--surface);
  position: sticky;
  left: 0;
  z-index: 1;
}
.h2h-cell {
  padding: 7px 4px;
  text-align: center;
  font-size: 12px;
  vertical-align: middle;
  min-width: 52px;
}
.h2h-cell--self   { background: var(--surface-2); }
.h2h-cell--none   { color: var(--muted); font-size: 13px; }
.h2h-cell--win    { background: rgba(85,185,110,.13); }
.h2h-cell--loss   { background: rgba(255, 95, 95,.11); }
.h2h-cell--tie    { background: rgba(181,255,77,.07); }
.h2h-rec  { display:block; font-weight:600; color:var(--white); font-size:12px; line-height:1.3; }
.h2h-diff { display:block; font-size:10px; color:var(--muted); line-height:1.2; }
.h2h-cell--win  .h2h-rec  { color:#55b96e; }
.h2h-cell--loss .h2h-rec  { color:var(--danger); }
.h2h-opp-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; vertical-align:middle; flex-shrink:0; }
tr.h2h-cell--win  td { background: rgba(85, 185, 110,.12); }
tr.h2h-cell--loss td { background: rgba(255, 95, 95,.11); }
tr.h2h-cell--tie  td { background: rgba(181,255,77,.07); }

/* ── Team page ────────────────────────────────────────────────────────────── */
.team-hero {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 24px 28px;
}
.team-hero-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.team-hero-name {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 1px;
  color: var(--white);
  line-height: 1.1;
}
.team-hero-manager { color: var(--muted); font-size: 14px; margin-top: 5px; }
.team-hero-stats { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; }
.team-stat { display: flex; flex-direction: column; gap: 3px; min-width: 60px; }
.team-stat-label { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.team-stat-val { font-size: 20px; font-weight: 700; color: var(--white); }


/* Season results table */
.tw-result { font-weight: 700; font-size: 13px; }
.tw-win  { color: #55b96e; }
.tw-loss { color: var(--danger); }
.tw-tie  { color: var(--muted); }
.tw-h2h  { color: var(--muted); font-size: 13px; }

/* Details button in expanded standings row */
.expand-panel-wrap { padding-bottom: 4px; }
.expand-panel-actions {
  display: flex;
  justify-content: flex-end;
  padding: 8px 4px 10px;
}
.details-btn {
  background: transparent;
  border: 1px solid var(--lime);
  color: var(--lime);
  padding: 6px 18px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: .3px;
  transition: background .15s;
}
.details-btn:hover { background: var(--lime-dim); }

/* Team page nav switcher */
.team-nav-label { font-size: 12px; color: var(--muted); white-space: nowrap; }
.team-nav-select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 12px;
  cursor: pointer;
  max-width: 180px;
}

.chart-type-select { display:none; }

.sched-luck-select {
  width: 100%;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7a99' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.note-green { color:#4ade80; }
.note-red   { color:#f87171; }

/* Roster slots */
.roster-slots { display:flex; flex-wrap:wrap; gap:8px; }
.slot-chip {
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:6px 14px;
  font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
}
/* Position colors — approximating Sleeper's palette */
.slot-chip.pos-qb    { color:#e85b5b; border-color:rgba(232,91,91,.22); }
.slot-chip.pos-rb    { color:#5ccb8a; border-color:rgba(92,203,138,.22); }
.slot-chip.pos-wr    { color:#4faee8; border-color:rgba(79,174,232,.22); }
.slot-chip.pos-te    { color:#e8a041; border-color:rgba(232,160,65,.22); }
.slot-chip.pos-k     { color:#b87adb; border-color:rgba(184,122,219,.22); }
.slot-chip.pos-def   { color:#7ab4cc; border-color:rgba(122,180,204,.22); }
.slot-chip.pos-flex  { color:#2dd4c8; border-color:rgba(45,212,200,.22); }
.slot-chip.pos-sflex { color:#a3e8e4; border-color:rgba(163,232,228,.22); }
.slot-chip.bench     { color:var(--muted); }

/* Roster panel column header — same hues as chips */
.rp-col-head { color:var(--lime); }
.pos-head-qb  { color:#e85b5b; }
.pos-head-rb  { color:#5ccb8a; }
.pos-head-wr  { color:#4faee8; }
.pos-head-te  { color:#e8a041; }
.pos-head-oth { color:#b87adb; }

/* Draft board */
.draft-content { overflow:hidden; }
.draft-meta { font-size:12px; color:var(--muted); margin-bottom:14px; }
.draft-msg  { font-size:13px; color:var(--muted); padding:20px 0; }
.draft-msg--error { color:var(--danger); }
.db-scroll  { overflow-x:auto; border-radius:var(--radius-md); border:1px solid var(--border); -webkit-overflow-scrolling:touch; }
.db-table   { border-collapse:separate; border-spacing:0; white-space:nowrap; }
.db-rh      { width:36px; min-width:36px; padding:8px 0; position:sticky; left:0; z-index:2;
              background:var(--surface-2); box-shadow:1px 0 0 var(--border); }
.db-th      { min-width:120px; max-width:150px; padding:9px 10px; text-align:left;
              background:var(--surface-2); border-bottom:1px solid var(--border); border-right:1px solid var(--border);
              font-size:11px; font-weight:600; color:var(--white); overflow:hidden; text-overflow:ellipsis; }
.db-th:last-child { border-right:none; }
.db-rd      { position:sticky; left:0; z-index:1; width:36px; min-width:36px;
              background:var(--surface-2); box-shadow:1px 0 0 var(--border);
              text-align:center; font-size:11px; font-weight:700; color:var(--muted);
              padding:8px 4px; vertical-align:top; border-bottom:1px solid var(--border); }
.db-cell    { border-right:1px solid var(--border); border-bottom:1px solid var(--border);
              padding:7px 9px; vertical-align:top; min-width:120px; }
.db-cell:last-child { border-right:none; }
.db-cell--empty  { background:rgba(0,0,0,.12); }
.db-cell--traded { border-left:3px solid rgba(240,192,64,.7); background:rgba(240,192,64,.04); }
.db-cell--selected { background:rgba(181,255,77,0.10); box-shadow:inset 0 0 0 1px rgba(181,255,77,0.28); }
.db-cell--traded.db-cell--selected { background:rgba(181,255,77,0.10); }
.db-cell--empty.db-cell--selected { background:rgba(181,255,77,0.04); box-shadow:inset 0 0 0 1px rgba(181,255,77,0.15); }
.db-pick-no { display:block; font-size:9px; font-weight:600; color:var(--muted); letter-spacing:.04em; margin-bottom:3px; }
.db-name    { display:block; font-size:11px; font-weight:600; color:var(--white); overflow:hidden; text-overflow:ellipsis; }
.db-footer  { display:flex; align-items:center; gap:4px; margin-top:3px; }
.db-pos     { font-size:10px; font-weight:700; }
.db-tm          { font-size:10px; color:var(--muted); }
.db-traded-from { display:block; font-size:9px; color:rgba(240,192,64,.8); margin-top:3px; }

/* ── Live Draft Assistant ─────────────────────────────────────────────────── */
.da-board-wrap { max-height: 260px; overflow-y: auto; margin-bottom: 0; }
.da-board-wrap--full { max-height: none; overflow-y: visible; }
.da-on-clock {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0;
  padding: 10px 16px;
  background: var(--surface); border-left: 3px solid var(--lime);
  border-radius: var(--radius-sm);
  font-size: 14px; color: var(--white);
}
.da-on-clock strong { color: var(--lime); }
.da-clock-meta { margin-left: auto; font-size: 12px; color: var(--muted); }
.da-on-clock--done { border-left-color: var(--muted); color: var(--muted); }
.da-on-clock--done strong { color: var(--muted); }

.da-lower {
  display: flex; gap: 16px;
  align-items: flex-start;
  min-height: 420px;
}
.da-left  { flex: 0 0 33.33%; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.da-right { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.da-lower--solo { min-height: 0; margin-top: 24px; }
.da-lower--solo .da-left { flex: 0 0 320px; }
.da-lower--solo .da-team-picks { max-height: none; }

.da-pane-label {
  font-family: var(--font-display); font-size: 12px; letter-spacing: 3px;
  color: var(--muted); margin: 0;
}

.da-team-picks {
  flex: 1; overflow-y: auto; max-height: 380px;
  display: flex; flex-direction: column; gap: 4px;
}
.da-picked-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  background: var(--surface); border-radius: var(--radius-sm);
  font-size: 13px;
}
.da-pick-round { font-size: 11px; color: var(--muted); min-width: 24px; }

.da-pos-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.da-pos-tab {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer;
  font-size: 13px; color: var(--muted); transition: border-color 0.15s;
}
.da-pos-tab.active { border-color: var(--lime); color: var(--white); }
.da-pos-count {
  font-size: 11px; color: var(--muted);
  background: var(--surface-2); padding: 1px 6px; border-radius: 10px;
}

.da-player-lists { flex: 1; overflow: hidden; }
.da-player-list  { display: none; flex-direction: column; overflow-y: auto; max-height: 380px; }
.da-player-list.active { display: flex; }

.da-player-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.da-player-row:last-child { border-bottom: none; }
.da-player-name  { flex: 1; color: var(--white); font-weight: 500; }
.da-player-meta  { display: flex; align-items: center; gap: 6px; }
.da-inj          { font-size: 11px; color: var(--danger); }
.da-empty        { font-size: 13px; color: var(--muted); padding: 8px 0; margin: 0; }

@media (max-width: 640px) {
  .da-lower { flex-direction: column; }
  .da-left  { flex: none; }
  .da-board-wrap { max-height: 200px; }
}

/* Recent leagues */
#recent-leagues { width:100%; margin-top:-24px; }
.recent-heading {
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:10px;
}
.recent-list { display:flex; flex-direction:column; gap:6px; }
.recent-item {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:12px 16px;
  cursor:pointer; text-align:left; font-family:var(--font-body);
  transition:border-color .15s, background .15s;
}
.recent-item:hover { border-color:rgba(255,255,255,.18); background:var(--surface-2); }
.recent-info { display:flex; flex-direction:column; gap:2px; min-width:0; }
.recent-name { font-size:14px; font-weight:600; color:var(--white); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.recent-meta { font-size:12px; color:var(--muted); }
.recent-remove {
  flex-shrink:0; font-size:18px; line-height:1; color:var(--muted);
  padding:2px 4px; border-radius:4px; transition:color .15s;
}
.recent-remove:hover { color:var(--danger); }

/* Section header row (standings heading + toggle) */
.section-header-row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}

/* Season toggle */
.season-toggle {
  display: flex; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden;
}
.toggle-btn {
  background: none; border: none; color: var(--muted);
  font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: .04em;
  padding: 7px 14px; cursor: pointer; transition: all .15s; white-space: nowrap;
}
.toggle-btn:hover { color: var(--white); }
.toggle-btn--active { background: var(--lime-dim); color: var(--lime); }

/* Playoff result badge (standings table in playoff mode) */
.playoff-result {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 10px;
}
.pr-champion  { color: #FFD700; background: rgba(255,215,0,0.12); }
.pr-runner-up { color: #C0C0C0; background: rgba(192,192,192,0.1); }
.pr-semi      { color: #CD7F32; background: rgba(205,127,50,0.12); }
.pr-wildcard  { color: var(--muted); background: rgba(107,122,153,0.12); }
.pr-dnq       { color: #3a4259; }

/* Playoff section rows (winners bracket / losers ladder) */
.pb-section { margin-bottom: 28px; }
.pb-section:last-child { margin-bottom: 0; }
.pb-section-header {
  font-family: var(--font-display); font-size: 12px; letter-spacing: 3px;
  color: var(--muted); margin-bottom: 14px;
}

/* Bracket container */
.bracket-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
.bracket-rounds {
  display: flex; gap: 0; align-items: flex-start; min-width: max-content;
}
.bracket-col {
  flex: 0 0 240px; padding: 0 16px; border-right: 1px solid var(--border);
}
.bracket-col:last-child { border-right: none; }
.bracket-games { display: flex; flex-direction: column; gap: 12px; }

/* Consolation games within a bracket column */
.bracket-consolation-group {
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border);
  display: flex; flex-direction: column; gap: 12px;
}

/* Place label header on a matchup card */
.pm-place-label {
  font-size: 10px; font-weight: 700; color: var(--muted);
  letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 13px; border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

/* Consolation card: slightly muted vs winners bracket */
.pm--consolation { opacity: 0.72; }
.pm--consolation .pm-win-badge { display: none; }

/* Losers-ladder bracket badges */
.pm-exit-badge {
  font-size: 10px; font-weight: 700; color: var(--muted);
  background: rgba(107,122,153,0.15); padding: 2px 6px; border-radius: 3px; flex-shrink: 0;
}
.pm-adv-badge {
  font-size: 10px; font-weight: 700; color: #e8a041;
  background: rgba(232,160,65,0.12); padding: 2px 6px; border-radius: 3px; flex-shrink: 0;
}
.pm-sacko-badge { font-size: 12px; flex-shrink: 0; }

/* Playoff odds section */
.odds-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.odds-subsection { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 640px) {
  .odds-grid { grid-template-columns: 1fr; }
}

/* BYE row in bracket columns */
.bracket-byes-group {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border);
}
.pm-bye {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 13px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: var(--radius-md); opacity: 0.6;
}
.pm-bye-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--white); }
.pm-bye-badge {
  font-size: 10px; font-weight: 700; color: var(--muted);
  background: var(--surface-2); padding: 2px 6px; border-radius: 3px; flex-shrink: 0;
  letter-spacing: .04em;
}

/* Playoff round header (reused in bracket columns) */
.playoff-round-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.playoff-round-label { font-family: var(--font-display); font-size: 15px; letter-spacing: 2px; color: var(--lime); }
.playoff-round-week { font-size: 12px; color: var(--muted); }

/* Playoff matchup card (shared by bracket) */
.playoff-matchup {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden;
}
.pm-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; border-left: 3px solid transparent;
}
.pm-row + .pm-row { border-top: 1px solid var(--border); }
.pm-name {
  flex: 1; font-size: 13px; font-weight: 600; color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pm-row--loser .pm-name { color: var(--muted); font-weight: 400; }
.pm-score {
  font-size: 13px; font-weight: 700; color: var(--white);
  white-space: nowrap; font-family: var(--font-display); letter-spacing: 0.5px;
}
.pm-row--loser .pm-score { color: var(--muted); font-weight: 400; }
.pm-win-badge {
  font-size: 10px; font-weight: 700; color: var(--lime);
  background: var(--lime-dim); padding: 2px 6px; border-radius: 3px; flex-shrink: 0;
}
.pm-champ-badge { font-size: 15px; flex-shrink: 0; }

/* Footer */
.league-footer { border-top:1px solid var(--border); padding-top:20px; }
.league-footer p { font-size:12px; color:var(--muted); }
.league-footer code { font-family:'Courier New',monospace; font-size:11px; }

/* League History */
.history-load-btn {
  background: transparent;
  border: 1px solid var(--lime);
  color: var(--lime);
  padding: 8px 20px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.history-load-btn:hover { background: var(--lime-dim); }
.history-load-btn:disabled { opacity: .5; cursor: default; }

.history-status { color: var(--muted); font-size: 14px; padding: 12px 0; }
#history-page-content { min-width: 0; }

.history-subheading {
  font-family: var(--font-display);
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .08em;
  margin: 24px 0 10px;
}
.history-subheading:first-child { margin-top: 4px; }

.history-manager { font-weight: 600; }
.champ-cell { color: #ffd700; font-weight: 700; }
.sacko-cell { color: var(--danger); }

/* History page H2H matrix — scoped overrides of the team-page .h2h-* rules */
.history-h2h-wrap .h2h-table { table-layout: auto; }
.history-h2h-wrap .h2h-col-header {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  font-size: 11px;
  padding: 8px 0;
  text-align: center;
  vertical-align: bottom;
  height: 120px;
  width: 32px;
}
.history-h2h-wrap .h2h-col-header span {
  display: inline-block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.history-h2h-wrap .h2h-row-label {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--field);
  padding-right: 16px;
}
.h2h-row-label {
  font-weight: 600;
  white-space: nowrap;
  text-align: left;
  padding: 6px 10px 6px 0;
  font-size: 12px;
}
.h2h-cell, .h2h-self, .h2h-empty {
  text-align: center;
  white-space: nowrap;
  padding: 5px 8px;
  font-variant-numeric: tabular-nums;
}
.h2h-self, .h2h-empty { color: var(--muted); }
.h2h-win  { color: #5ccb8a; }
.h2h-loss { color: var(--danger); }
.h2h-even { color: var(--muted); }

/* Responsive */
@media (max-width:640px) {
  .entry-row { flex-direction:column; }
  .load-btn { width:100%; }
  .league-hero { flex-direction:column; align-items:flex-start; }
  .top-nav { padding:12px 16px; }
  .league-main { padding:24px 14px 60px; gap:32px; }

  .supra-pair { grid-template-columns:1fr; }

  .trade-body { flex-direction:column; }
  .trade-side + .trade-side { border-left:none; border-top:1px solid var(--border); }

  /* Chart tabs → dropdown on mobile */
  .chart-tabs { display:none; }
  .chart-type-select { display:block; }

  /* Taller chart area on mobile so content isn't compressed */
  .chart-panel { padding:12px; }
  .chart-panel canvas { height:320px !important; }

  /* About page */
  .about-main { padding:32px 16px 60px; gap:36px; }
  .about-features { grid-template-columns:1fr; }
  .about-section--feedback { padding:20px; }
}
/* ── ABOUT PAGE ── */
#page-about { background: var(--navy); }

.home-nav {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: flex-end;
  padding: 16px 24px; z-index: 2;
}
.home-about-link {
  background: var(--lime-dim); border: 1px solid rgba(181,255,77,.35); border-radius: var(--radius-sm);
  padding: 7px 16px; font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--lime); cursor: pointer; letter-spacing: .03em;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.home-about-link:hover { background: var(--lime-glow); border-color: rgba(181,255,77,.65); box-shadow: 0 0 18px var(--lime-glow); }

.about-main {
  max-width: 700px; margin: 0 auto; padding: 48px 24px 80px;
  display: flex; flex-direction: column; gap: 48px;
}
.about-section {
  display: flex; flex-direction: column; gap: 16px;
}
.about-section--feedback {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px 32px;
}
.about-heading {
  font-family: var(--font-display); font-size: 28px; letter-spacing: 2px;
  color: var(--lime);
}
.about-body {
  font-size: 15px; line-height: 1.7; color: var(--white); max-width: 600px;
}
.about-body strong { color: var(--white); font-weight: 700; }
.about-link {
  color: var(--lime); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: rgba(181,255,77,0.4);
  transition: text-decoration-color .15s;
}
.about-link:hover { text-decoration-color: var(--lime); }

.about-steps {
  display: flex; flex-direction: column; gap: 16px;
  padding-left: 0; list-style: none; counter-reset: steps;
}
.about-steps li {
  counter-increment: steps;
  display: flex; gap: 16px; align-items: flex-start;
  font-size: 15px; line-height: 1.6; color: var(--white);
}
.about-steps li::before {
  content: counter(steps);
  flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--lime-dim); border: 1px solid rgba(181,255,77,.3);
  color: var(--lime); font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.about-steps li strong { font-weight: 700; }
.about-inline-badge {
  display: inline; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 2px 7px; font-size: 13px; font-family: monospace;
  color: var(--white); white-space: nowrap;
}

.about-features {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.about-feature {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 6px;
}
.about-feature-title {
  font-size: 14px; font-weight: 700; color: var(--white); letter-spacing: .01em;
}
.about-feature-desc {
  font-size: 13px; line-height: 1.55; color: var(--muted);
}

@media (prefers-reduced-motion:reduce) {
  .field-lines span, .btn-spinner, .loading-spinner { animation:none; }
  .page.fade-out, .page.fade-in { animation:none; }
}