/* ═══════════════════════════════════════════════════════
   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; }

/* ══ 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; }
}