/* Shared styles for the per-league leaderboard pages (/leaderboard = WNBA, /leaderboard-nba). */
:root{
  --bg:#0a0a0c; --panel:#141418; --panel2:#17171c; --ink:#ece9e3; --amber:#ffb020;
  --dim:#969ca8; --line:#232328; --red:#fb5a6a; --green:#7ad17a; --maxw:600px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg); color:var(--ink); font-family:'IBM Plex Mono',ui-monospace,monospace;
  line-height:1.55; overflow-x:hidden; -webkit-font-smoothing:antialiased}
body::before{content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255,176,32,.16), transparent 60%),
    radial-gradient(80% 50% at 50% 110%, rgba(255,176,32,.05), transparent 60%)}
body::after{content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.wrap{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:26px 22px 60px}

.mark{display:flex; align-items:center; gap:9px}
.mark a{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink)}
.mark b{font-family:'Anton',sans-serif; font-weight:400; font-size:21px; letter-spacing:.05em}
.mark .net{color:var(--dim); font-size:10px; letter-spacing:.28em; align-self:center}
.back{margin-left:auto; color:var(--dim); text-decoration:none; font-size:12px; letter-spacing:.06em}
.back:hover{color:var(--amber)}

.eyebrow{display:flex; align-items:center; gap:9px; justify-content:center; text-align:center;
  color:var(--amber); font-weight:700; font-size:11px; letter-spacing:.2em; margin:44px 0 14px}
.dot{width:9px; height:9px; border-radius:50%; background:var(--red); animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(251,90,106,.6)}70%{box-shadow:0 0 0 9px rgba(251,90,106,0)}100%{box-shadow:0 0 0 0 rgba(251,90,106,0)}}

h1{font-family:'Anton',sans-serif; font-weight:400; text-align:center; line-height:.88;
  font-size:clamp(52px,15vw,98px); letter-spacing:.012em}
.lg-badge{display:block; text-align:center; font-family:'Anton',sans-serif; letter-spacing:.18em;
  color:#0a0a0c; background:var(--amber); width:max-content; margin:14px auto 0; padding:3px 13px 1px;
  border-radius:8px; font-size:16px}
.sub{text-align:center; color:var(--dim); font-size:13.5px; max-width:470px; margin:16px auto 4px}
.sub b{color:var(--ink); font-weight:600}

/* segmented toggle (Trending / All-Time) */
.controls{display:flex; flex-direction:column; gap:10px; align-items:center; margin:28px 0 6px}
.seg{display:inline-flex; background:var(--panel2); border:1px solid var(--line);
  border-radius:12px; padding:4px; gap:4px}
.seg button{font-family:'IBM Plex Mono',monospace; background:none; border:none; cursor:pointer;
  color:var(--dim); font-size:12.5px; font-weight:700; letter-spacing:.06em; padding:9px 16px;
  border-radius:9px; transition:color .15s, background .15s; white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button[aria-selected="true"]{background:var(--amber); color:#0a0a0c}

.note{text-align:center; color:#6b7178; font-size:11px; letter-spacing:.04em; margin:8px auto 18px; max-width:460px}
.note b{color:var(--dim); font-weight:600}

/* rows */
#board{margin-top:4px}
.row{background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:13px 15px; margin-bottom:9px; transition:border-color .15s, transform .15s}
.row:hover{border-color:#3a3a42; transform:translateY(-1px)}
.row.top{background:linear-gradient(180deg,#16120a,#141418); border-color:#3a2c0e}
.rowtop{display:flex; align-items:center; gap:12px}
.rank{font-family:'Anton',sans-serif; font-size:23px; line-height:1; color:#3a3f48; min-width:30px; text-align:center}
.row.top .rank{color:var(--amber)}
.move{min-width:40px; font-size:11px; font-weight:700; letter-spacing:.02em; text-align:center; white-space:nowrap}
.move.up{color:var(--green)} .move.down{color:var(--red)} .move.flat{color:#4b5059} .move.new{color:var(--amber)}
.meta{flex:1; min-width:0}
.nm{font-family:'Anton',sans-serif; font-size:17px; letter-spacing:.02em; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.tm{color:var(--dim); font-size:10px; letter-spacing:.14em; font-weight:700; margin-top:1px}
.val{text-align:right; white-space:nowrap}
.val .big{font-family:'Anton',sans-serif; font-size:19px; letter-spacing:.01em}
.val .unit{color:var(--dim); font-size:9.5px; letter-spacing:.1em; font-weight:700}
.val .sub2{color:#6b7178; font-size:10px; margin-top:1px}
.cta{display:block; text-decoration:none; color:var(--amber); border:1px solid #3a2c0e;
  background:rgba(255,176,32,.06); border-radius:10px; padding:8px 10px; font-size:11px; font-weight:700;
  letter-spacing:.04em; white-space:nowrap; transition:.15s}
.cta:hover{background:var(--amber); color:#0a0a0c; border-color:var(--amber)}
.acts{display:flex; flex-direction:column; align-items:flex-end; gap:5px}
.cta2{color:var(--dim); font-size:10px; letter-spacing:.05em; text-decoration:none; font-weight:600}
.cta2:hover{color:var(--amber)}
.shop{color:var(--amber); font-size:10.5px; letter-spacing:.03em; text-decoration:none; font-weight:700; white-space:nowrap}
.shop:hover{text-decoration:underline}
.bar{margin-top:10px; height:6px; border-radius:4px; background:#1d1d22; overflow:hidden}
.bar i{display:block; height:100%; border-radius:4px;
  background:linear-gradient(90deg,#ffb020,#ff8a3c); transition:width .5s cubic-bezier(.2,.7,.2,1)}

.empty{color:#5c616b; font-size:13px; text-align:center; padding:34px 14px; line-height:1.7}
.empty b{color:var(--dim)}

.how{margin-top:30px; background:var(--panel2); border:1px solid var(--line); border-radius:14px;
  padding:15px 17px; color:var(--dim); font-size:11.5px; line-height:1.65}
.how b{color:var(--ink); font-weight:600}
.how .h{color:var(--amber); font-weight:700; letter-spacing:.16em; font-size:10.5px; display:block; margin-bottom:7px}
.how .disc{display:block; margin-top:8px; color:#5c616b; font-size:10.5px; line-height:1.5}

.subcta{display:flex; align-items:center; justify-content:center; gap:9px; text-decoration:none;
  margin-top:16px; background:var(--amber); color:#0a0a0c; font-weight:800; letter-spacing:.02em;
  font-size:14px; padding:13px; border-radius:12px; box-shadow:0 10px 30px -12px rgba(255,176,32,.5);
  transition:transform .15s, box-shadow .15s}
.subcta:active{transform:translateY(1px)}
.subcta:hover{box-shadow:0 14px 38px -12px rgba(255,176,32,.7)}

footer{margin-top:36px; text-align:center; color:#5c616b; font-size:11.5px; letter-spacing:.04em}
footer .fm{color:var(--dim); font-weight:600; letter-spacing:.1em; margin-bottom:6px;
  font-family:'Anton',sans-serif; font-size:15px}
footer a{color:#5c616b; text-decoration:none}
footer a:hover{color:var(--amber)}

.rise{opacity:0; transform:translateY(14px); animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.rise{animation:none;opacity:1;transform:none}.dot{animation:none}
  .row:hover{transform:none}.bar i{transition:none}}