/* ═══════════════════════════════════════════════════════
   TCC LEADERBOARD — matches fantasy.html aesthetic exactly
   Inter + Instrument Serif · Dark cinematic
═══════════════════════════════════════════════════════ */
:root {
  --bg:      hsl(0,0%,4%);
  --surface: hsl(0,0%,8%);
  --text:    hsl(0,0%,96%);
  --muted:   hsl(0,0%,52%);
  --stroke:  hsl(0,0%,13%);
  --blue1:   #89AACC;
  --blue2:   #4E85BF;
  --red:     #cc4444;
  --green:   #4aaa5a;
  --ease:    cubic-bezier(0.16,1,0.3,1);
  --gutter:  clamp(20px,5vw,80px);
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; line-height:1.5; overflow-x:hidden; }
em { font-family:'Instrument Serif',serif; font-style:italic; }
::selection { background:var(--blue2); color:#fff; }
a { color:inherit; text-decoration:none; }
::-webkit-scrollbar { width:3px; } ::-webkit-scrollbar-track { background:var(--bg); } ::-webkit-scrollbar-thumb { background:var(--stroke); }
body::after { content:''; position:fixed; inset:0; pointer-events:none; z-index:9996; opacity:0.022;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:128px; }

/* ══ NAV PILL — identical to fantasy page ══ */
.nav-wrap {
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; justify-content:center;
  padding:clamp(12px,2vw,20px) var(--gutter);
  pointer-events:none;
}
.nav-pill {
  pointer-events:all;
  display:inline-flex; align-items:center; gap:0;
  border-radius:9999px; border:1px solid rgba(255,255,255,0.09);
  background:rgba(18,18,18,0.75); backdrop-filter:blur(18px);
  padding:6px 6px; transition:box-shadow 0.3s;
}
.nav-pill.scrolled { box-shadow:0 8px 40px rgba(0,0,0,0.5); }
.nav-logo-wrap { padding:4px 8px; display:flex; align-items:center; justify-content:center; }
.nav-logo-ring {
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,var(--blue1),var(--blue2));
  padding:2px; transition:transform 0.3s;
}
.nav-logo-ring:hover { transform:scale(1.1); }
.nav-logo-img { width:100%; height:100%; border-radius:50%; object-fit:contain; background:var(--bg); display:block; }
.nav-sep { width:1px; height:20px; background:var(--stroke); margin:0 4px; }
.nav-links { display:flex; list-style:none; gap:2px; }
.nav-link { display:block; padding:6px 14px; border-radius:9999px; font-size:0.78rem; font-weight:500; color:var(--muted); transition:color 0.2s,background 0.2s; }
.nav-link:hover { color:var(--text); background:rgba(255,255,255,0.06); }
.nav-link.active { color:var(--text); background:rgba(255,255,255,0.08); }
.nav-sayhello { position:relative; border:none; background:none; cursor:pointer; padding:6px 16px; border-radius:9999px; font-size:0.78rem; font-weight:600; color:var(--text); overflow:hidden; }
.nav-sh-border { position:absolute; inset:-1px; border-radius:9999px; z-index:0; background:linear-gradient(90deg,var(--blue1),var(--blue2)); opacity:0; transition:opacity 0.3s; }
.nav-sayhello:hover .nav-sh-border { opacity:1; }
.nav-sh-inner { position:relative; z-index:1; display:block; background:rgba(18,18,18,0.9); border-radius:9999px; padding:6px 16px; margin:-6px -16px; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px 8px; }
.hamburger span { display:block; width:20px; height:1.5px; background:var(--text); transition:0.3s; }
.hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }
@media(max-width:640px) {
  .nav-sep,.nav-links,.nav-sayhello { display:none; }
  .hamburger { display:flex; }
}
/* Mobile drawer */
.mobile-drawer {
  position:fixed; top:0; left:0; right:0; z-index:490; padding-top:72px;
  background:rgba(10,10,10,0.97); backdrop-filter:blur(20px);
  transform:translateY(-100%); transition:transform 0.4s var(--ease);
  border-bottom:1px solid var(--stroke);
}
.mobile-drawer.open { transform:translateY(0); }
.mobile-drawer ul { list-style:none; padding:16px 0 24px; }
.mobile-drawer a { display:block; padding:14px var(--gutter); font-size:0.88rem; font-weight:500; color:var(--muted); border-bottom:1px solid var(--stroke); transition:color 0.2s; }
.mobile-drawer a:hover,.mobile-drawer a.active { color:var(--text); }

/* ══ HERO ══ */
.lb-hero {
  position:relative; height:70vh; min-height:480px;
  display:flex; align-items:center; overflow:hidden;
}
.lb-hero-bg { position:absolute; inset:0; overflow:hidden; }
.lb-hero-img { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); min-width:100%; min-height:100%; object-fit:cover; will-change:transform; }
.lb-hero-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.52); }
.lb-hero-fade { position:absolute; bottom:0; left:0; right:0; height:280px; background:linear-gradient(to top,var(--bg),transparent); }

.lb-hero-content { position:relative; z-index:2; padding:0 var(--gutter); max-width:860px; }
.lb-hero-eyebrow { font-size:0.68rem; font-weight:600; letter-spacing:0.3em; text-transform:uppercase; color:var(--muted); margin-bottom:24px; animation:fadeUp 0.8s var(--ease) 0.1s both; }
.lb-hero-h1 { font-family:'Instrument Serif',serif; font-style:italic; font-size:clamp(4rem,11vw,9rem); line-height:0.88; letter-spacing:-0.02em; color:var(--text); margin-bottom:24px; animation:heroIn 1.1s var(--ease) 0.2s both; }
.lb-hero-sub { font-size:0.95rem; color:var(--muted); max-width:480px; line-height:1.8; animation:fadeUp 0.8s var(--ease) 0.5s both; }

.lb-hero-scroll {
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:0.58rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted);
  animation:fadeIn 1s 1.2s both;
}
.scroll-line { width:1px; height:40px; background:var(--stroke); position:relative; overflow:hidden; }
.scroll-thumb { position:absolute; top:-100%; left:0; width:100%; height:100%; background:rgba(137,170,204,0.6); animation:scroll-down 1.5s ease-in-out infinite; }
@keyframes scroll-down { from{transform:translateY(-100%)} to{transform:translateY(200%)} }
@keyframes heroIn { from{opacity:0;transform:translateY(50px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* ══ OUTER CONTENT ══ */
.lb-outer { max-width:1080px; margin:0 auto; padding:60px var(--gutter) 100px; min-height:50vh; }

/* ══ EMPTY STATE ══ */
.lb-empty-state { min-height:40vh; display:flex; align-items:center; justify-content:center; }
.lb-empty-inner {
  text-align:center; max-width:440px;
  padding:56px 40px;
  border:1px solid var(--stroke);
  border-radius:20px;
  background:rgba(255,255,255,0.02);
}
.lb-empty-icon { font-size:3rem; margin-bottom:20px; opacity:0.6; }
.lb-empty-title {
  font-family:'Instrument Serif',serif; font-style:italic;
  font-size:2rem; color:var(--text); margin-bottom:12px; line-height:1.1;
}
.lb-empty-sub {
  font-size:0.88rem; color:var(--muted); line-height:1.75; margin-bottom:4px;
}

/* ══ PLAYER OF THE ROUND ══ */
#potr-wrap { margin-bottom:40px; }
.potr-card {
  background:rgba(137,170,204,0.06); border:1px solid rgba(137,170,204,0.18);
  border-radius:20px; padding:28px 36px;
  display:flex; align-items:center; gap:32px; flex-wrap:wrap;
}
.potr-eyebrow { font-size:0.58rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--blue1); font-weight:600; margin-bottom:6px; }
.potr-name { font-family:'Instrument Serif',serif; font-style:italic; font-size:2.2rem; color:var(--text); line-height:1; }
.potr-pts { font-family:'Instrument Serif',serif; font-style:italic; font-size:3.5rem; color:var(--blue1); line-height:1; margin-left:auto; }
.potr-pts-label { font-size:1rem; color:var(--blue2); margin-left:4px; }
.potr-stats { display:flex; gap:16px; flex-wrap:wrap; width:100%; font-size:0.72rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); }

/* ══ MOST PICKED ══ */
#most-picked-wrap { margin-bottom:40px; }
.lb-section-label { font-size:0.6rem; letter-spacing:0.28em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:16px; }
.most-picked-grid { display:flex; flex-direction:column; gap:10px; }
.mp-item { display:grid; grid-template-columns:180px 1fr 52px; align-items:center; gap:14px; }
.mp-name { font-size:0.85rem; font-weight:600; color:var(--text); }
.mp-bar-wrap { background:rgba(255,255,255,0.05); height:3px; border-radius:2px; overflow:hidden; }
.mp-bar { height:100%; background:linear-gradient(90deg,var(--blue1),var(--blue2)); transition:width 0.8s var(--ease); }
.mp-pct { font-family:'Instrument Serif',serif; font-style:italic; font-size:0.88rem; color:var(--blue1); text-align:right; }

/* ══ TOOLBAR ══ */
.lb-toolbar { margin-bottom:28px; display:flex; gap:6px; flex-wrap:wrap; }
.lb-filter-group { display:flex; gap:6px; flex-wrap:wrap; }
.filter-btn {
  padding:6px 18px; font-size:0.7rem; font-weight:600; letter-spacing:0.1em;
  border:1px solid var(--stroke); background:transparent; color:var(--muted);
  cursor:pointer; transition:all 0.2s; font-family:'Inter',sans-serif; border-radius:9999px;
}
.filter-btn:hover { border-color:var(--blue2); color:var(--text); }
.filter-btn.active { background:var(--text); border-color:var(--text); color:var(--bg); }

/* ══ TABLE ══ */
.lb-table { width:100%; border-collapse:collapse; font-size:0.88rem; }
.lb-table th {
  text-align:left; padding:10px 16px; font-size:0.58rem; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--muted); font-weight:600;
  border-bottom:1px solid var(--stroke);
}
.th-hint { font-size:0.52rem; color:var(--muted); font-weight:400; letter-spacing:0.05em; opacity:0.6; }
.lb-table td { padding:14px 16px; border-bottom:1px solid var(--stroke); color:var(--text); }
.lb-row { cursor:pointer; transition:background 0.15s; }
.lb-row:hover td { background:var(--surface); }

.lb-rank { font-family:'Instrument Serif',serif; font-style:italic; font-size:1.4rem; color:var(--muted); }
.lb-rank.gold   { color:#c8960a; }
.lb-rank.silver { color:#888; }
.lb-rank.bronze { color:#8a5a28; }
.lb-name { font-weight:600; }
.lb-sub-name { display:block; font-size:0.7rem; font-weight:400; color:var(--muted); margin-top:2px; }
.lb-expand-icon { font-size:0.65rem; color:var(--muted); margin-left:6px; opacity:0.6; }
.lb-points { font-family:'Instrument Serif',serif; font-style:italic; font-size:1.5rem; color:var(--blue1); }

/* ══ BREAKDOWN ROW ══ */
.lb-breakdown-row td { padding:0; background:rgba(255,255,255,0.015); }
.lb-breakdown { padding:20px 24px; border-left:2px solid var(--blue2); margin:0 16px 12px; }

.bd-history { margin-bottom:20px; }
.bd-history-label { font-size:0.55rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:10px; }
.bd-history-bars { display:flex; align-items:flex-end; gap:6px; height:60px; }
.bd-bar-wrap { display:flex; flex-direction:column; align-items:center; gap:3px; flex:1; height:100%; justify-content:flex-end; }
.bd-bar { width:100%; background:linear-gradient(to top,var(--blue1),var(--blue2)); min-height:4px; border-radius:2px 2px 0 0; }
.bd-bar-pts { font-family:'Instrument Serif',serif; font-style:italic; font-size:0.75rem; color:var(--blue1); }
.bd-bar-label { font-size:0.52rem; color:var(--muted); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

.bd-round-title { font-size:0.58rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--blue1); font-weight:600; margin-bottom:12px; margin-top:8px; }
.bd-player-list { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.bd-player-row { display:flex; justify-content:space-between; align-items:flex-start; padding:8px 0; border-bottom:1px solid var(--stroke); gap:16px; }
.bd-player-left { display:flex; flex-direction:column; gap:3px; }
.bd-player-name { font-size:0.88rem; font-weight:600; color:var(--text); }
.bd-player-detail { font-size:0.72rem; color:var(--muted); line-height:1.5; }
.bd-player-detail.no-score { font-style:italic; }
.bd-player-pts { font-family:'Instrument Serif',serif; font-style:italic; font-size:1.1rem; color:var(--blue1); white-space:nowrap; flex-shrink:0; }

/* ══ CTA ROW ══ */
.lb-cta-row { display:flex; justify-content:center; margin-top:48px; }
.lb-cta-btn {
  border:1px solid var(--stroke); background:transparent; color:var(--text);
  border-radius:9999px; padding:13px 32px; font-size:0.85rem; font-weight:500;
  cursor:pointer; transition:all 0.25s var(--ease); letter-spacing:0.02em; display:inline-flex;
}
.lb-cta-btn:hover { border-color:var(--blue1); color:var(--blue1); transform:scale(1.03); }

/* ══ STATE ══ */
.lb-state { display:flex; align-items:center; justify-content:center; padding:60px 0; gap:14px; color:var(--muted); font-size:0.85rem; }
.spinner { width:24px; height:24px; border:2px solid rgba(137,170,204,0.15); border-top-color:var(--blue1); border-radius:50%; animation:spin 0.8s linear infinite; flex-shrink:0; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ══ FOOTER IMAGE ══ */
.lb-footer-img-section { position:relative; height:38vh; min-height:240px; overflow:hidden; }
.lb-footer-img { position:absolute; left:0; width:100%; height:140%; object-fit:cover; object-position:center 30%; will-change:transform; }
.lb-footer-img-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.65); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
.lbfi-text { font-family:'Instrument Serif',serif; font-style:italic; font-size:clamp(2.2rem,5vw,4rem); color:var(--text); }
.lbfi-sub { font-size:0.62rem; letter-spacing:0.3em; text-transform:uppercase; color:rgba(255,255,255,0.32); font-weight:500; }

/* ══ FOOTER BAR ══ */
.lb-footer-bar { background:var(--bg); border-top:1px solid var(--stroke); padding:20px var(--gutter); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; font-size:0.78rem; color:var(--muted); }
.lb-footer-avail { display:flex; align-items:center; gap:8px; }
.avail-dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 6px rgba(74,170,90,0.6); animation:pulse-avail 2s ease-in-out infinite; }
@keyframes pulse-avail { 0%,100%{opacity:1}50%{opacity:0.35} }
.lb-footer-link { color:var(--blue1); font-weight:500; }
.copy-year {}

/* ══ MOBILE ══ */
@media(max-width:600px) {
  .mp-item { grid-template-columns:100px 1fr 40px; }
  .potr-card { padding:20px; gap:16px; }
  .potr-pts { font-size:2.5rem; margin-left:0; }
}

/* ── Mini badges on leaderboard rows ── */
.lb-badges-row { display: inline-flex; gap: 3px; margin: 0 4px; vertical-align: middle; }
.lb-mini-badge {
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; line-height: 1;
}
.lb-badge-gold  { background: rgba(201,168,76,0.15); }
.lb-badge-blue  { background: rgba(74,138,244,0.12); }
.lb-badge-green { background: rgba(74,170,90,0.12);  }
.lb-badge-red   { background: rgba(204,68,68,0.12);  }
.lb-badge-muted { background: rgba(255,255,255,0.05); }

/* ══════════════════════════════════════
   H2H STYLES
══════════════════════════════════════ */

/* View toggle group */
.lb-view-toggle { margin-left:auto; }

/* H2H Table */
.h2h-table th,
.h2h-table td { text-align:center; }
.h2h-table th:nth-child(2),
.h2h-table td:nth-child(2) { text-align:left; }
.h2h-stat { font-size:0.88rem; font-variant-numeric:tabular-nums; }
.h2h-win  { color:#5ec98a; }
.h2h-draw { color:var(--muted); }
.h2h-loss { color:#cc5555; }

/* Round blocks */
.h2h-round-block { margin-bottom:32px; }
.h2h-round-title {
  font-size:0.7rem; letter-spacing:2px; text-transform:uppercase;
  color:var(--muted); padding-bottom:10px;
  border-bottom:1px solid hsl(0,0%,13%); margin-bottom:12px;
  display:flex; align-items:center; gap:10px;
}
.h2h-pending-tag {
  font-size:0.6rem; padding:2px 7px; border-radius:20px;
  background:rgba(255,200,50,0.1); color:#ffcc32;
  border:1px solid rgba(255,200,50,0.25); letter-spacing:1px;
}

/* Match cards */
.h2h-match-grid { display:flex; flex-direction:column; gap:6px; }
.h2h-match-card {
  display:grid;
  grid-template-columns:1fr auto 1fr auto;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:8px;
  background:hsl(0,0%,8%);
  border:1px solid hsl(0,0%,13%);
  font-size:0.84rem;
  transition:border-color 0.2s;
}
.h2h-match-card.resolved { border-color:rgba(58,126,240,0.12); }
.h2h-match-card.pending  { opacity:0.6; }

.h2h-mc-name-a { text-align:right; }
.h2h-mc-name-b { text-align:left; }
.h2h-mc-winner { color:#f5d060; font-weight:700; }

.h2h-mc-vs    { font-size:0.65rem; text-transform:uppercase; letter-spacing:1px; color:var(--muted); padding:0 4px; }
.h2h-mc-score {
  font-size:0.9rem; font-weight:700; font-variant-numeric:tabular-nums;
  text-align:center; min-width:60px; color:var(--text);
}
.h2h-mc-sep   { margin:0 3px; color:var(--muted); font-weight:400; }

.h2h-result-a,.h2h-result-b,.h2h-result-draw {
  font-size:0.6rem; padding:2px 8px; border-radius:20px;
  letter-spacing:1px; text-transform:uppercase; font-weight:700;
  white-space:nowrap;
}
.h2h-result-a    { background:rgba(245,208,96,0.1);  color:#f5d060; border:1px solid rgba(245,208,96,0.25); }
.h2h-result-b    { background:rgba(144,192,255,0.1); color:#90c0ff; border:1px solid rgba(144,192,255,0.25); }
.h2h-result-draw { background:rgba(120,120,120,0.1); color:var(--muted); border:1px solid rgba(120,120,120,0.2); }

/* Toolbar row with view toggle */
.lb-toolbar {
  display:flex; align-items:center; gap:12px;
  flex-wrap:wrap;
}

@media(max-width:600px){
  .h2h-match-card { grid-template-columns:1fr auto 1fr; }
  .h2h-result-a,.h2h-result-b,.h2h-result-draw { display:none; }
}

/* ── Live Fantasy View ── */
.lb-live-match-header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.lb-live-match-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(61,140,79,0.08);
  border: 1px solid rgba(61,140,79,0.25);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 0.8rem;
  color: var(--white);
}
.lb-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3d8c4f;
  animation: frl-pulse 1s infinite;
  flex-shrink: 0;
}
.lb-live-note {
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: 12px;
  font-style: italic;
  padding: 6px 10px;
  background: rgba(255,255,255,0.02);
  border-radius: 4px;
  border-left: 2px solid rgba(201,168,76,0.3);
}
.lb-live-unlinked {
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(224,80,80,0.07);
  border: 1px solid rgba(224,80,80,0.2);
  border-radius: 5px;
  font-size: 0.75rem;
  color: #e07070;
}