/* Leaderboard page styles.
   Shared shell rules (statusbar/nav/brand/footer/btn/chip/grid-bg/tier/wrap/
   page-head/section/mono-small/main) live in shared.css — don't redefine.
   Tokens are inherited from :root in shared.css. */

/* ── HEAD META UPDATED PILL ── */
.page-head .meta .lb-updated{display:inline-flex;align-items:center;gap:6px;color:var(--green)}

/* ── FILTER BAR ── */
.lb-filters{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:24px;padding:14px 16px;background:var(--bg-1);border:1px solid var(--line)}
.lb-filters .f{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--fg-dim);letter-spacing:0.08em;text-transform:uppercase}
.lb-filters select,
.lb-filters input{background:var(--bg);border:1px solid var(--line-2);color:var(--fg);padding:6px 10px;font-family:var(--mono);font-size:11px}
.lb-filters input{width:180px}
.lb-filters select:focus-visible,
.lb-filters input:focus-visible{outline:2px solid var(--red);outline-offset:1px}
.lb-filters .sp{flex:1}
.lb-filters .live{color:var(--green);display:flex;align-items:center;gap:6px}

/* ── PODIUM ── */
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0 0}
.podium .p{border:1px solid var(--line);background:var(--bg-1);padding:22px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.podium .p::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.podium .p.p1::before{background:var(--amber)}
.podium .p.p2::before{background:#c9cdd6}
.podium .p.p3::before{background:#c68c4c}
.podium .p1{background:linear-gradient(135deg,rgba(255,181,71,0.06),transparent 60%),var(--bg-1)}
.podium .rank{font-family:var(--mono);font-size:11px;color:var(--fg-mute);letter-spacing:0.2em;display:flex;justify-content:space-between;align-items:center}
.podium .rank .n{font-size:52px;font-weight:700;color:var(--fg);letter-spacing:-0.04em;line-height:1}
.podium .p1 .rank .n{color:var(--amber)}
.podium .p2 .rank .n{color:#c9cdd6}
.podium .p3 .rank .n{color:#c68c4c}
.podium .pname{font-family:var(--mono);font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.podium .elo{font-family:var(--mono);font-size:28px;font-weight:600;letter-spacing:-0.01em;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.podium .elo .delta{font-size:11px;font-weight:500}
.podium .elo .delta.up{color:var(--green)}
.podium .elo .delta.down{color:var(--red)}
.podium .elo .delta.flat{color:var(--fg-mute)}
.podium .sm{display:flex;gap:14px;font-family:var(--mono);font-size:10px;color:var(--fg-dim);letter-spacing:0.1em;text-transform:uppercase;flex-wrap:wrap}
.podium .sm > span{display:inline-flex;gap:4px;align-items:baseline}
.podium .sm b{color:var(--fg);font-weight:600}
.podium .sm .streak-up{color:var(--green)}
.podium .sm .streak-down{color:var(--red)}
.podium .sm .streak-flat{color:var(--fg-mute)}
.podium .peak-badge{color:var(--amber)}

/* ── MAIN TABLE ── */
.lb{margin-top:8px;border:1px solid var(--line);background:var(--bg-1)}
.lb-head{display:grid;grid-template-columns:56px 1fr 90px 92px 100px 72px 78px 120px 82px;padding:12px 16px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10px;color:var(--fg-mute);letter-spacing:0.14em;text-transform:uppercase;font-weight:600}
.lb-row{display:grid;grid-template-columns:56px 1fr 90px 92px 100px 72px 78px 120px 82px;padding:12px 16px;border-bottom:1px solid var(--line);align-items:center;font-family:var(--mono);font-size:12px;transition:background 0.12s ease}
.lb-row:last-child{border-bottom:none}
.lb-row:hover{background:var(--bg-2)}
.lb-row.me{border-left:2px solid var(--fg);padding-left:14px;background:rgba(255,255,255,0.015)}
.lb-row .r{color:var(--fg-mute);font-weight:600}
.lb-row.t1 .r{color:var(--amber)}
.lb-row.t2 .r{color:#c9cdd6}
.lb-row.t3 .r{color:#c68c4c}
.lb-row .p{display:flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:600;font-size:13px;min-width:0}
.lb-row .p .pname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.lb-row .av{width:28px;height:28px;background:var(--bg-3);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--fg-dim);font-weight:700;font-family:var(--mono);flex-shrink:0}
.lb-row.me .av{outline:1px solid var(--fg);outline-offset:2px}
.lb-row .elo{font-weight:600;color:var(--fg)}
.lb-row .wl{color:var(--fg-dim)}
.lb-row .wr{color:var(--fg-dim)}
.lb-row .streak.up{color:var(--green);font-weight:600}
.lb-row .streak.down{color:var(--red);font-weight:600}
.lb-row .streak.flat{color:var(--fg-mute)}
.lb-row .form{display:flex;gap:2px;align-items:center;justify-content:flex-start}
.lb-row .form svg{display:block}
.lb-row .form .seg{display:inline-block;width:6px;height:14px;background:var(--bg-3);border:1px solid var(--line)}
.lb-row .form .seg.w{background:var(--green);border-color:var(--green)}
.lb-row .form .seg.l{background:var(--red);border-color:var(--red)}
.lb-row .delta{text-align:right}
.lb-row .delta.up{color:var(--green)}
.lb-row .delta.down{color:var(--red)}
.lb-row .delta.flat{color:var(--fg-mute)}

/* Empty / loading state */
.lb-row.lb-empty{color:var(--fg-mute)}
.lb-row.lb-empty .pname{color:var(--fg-dim)}

/* ── TWO-COLUMN LAYOUT ── */
.twocol{display:grid;grid-template-columns:1fr 320px;gap:28px;margin-top:8px}
.lb-aside{display:flex;flex-direction:column;gap:20px}

/* ── SIDE PANELS ── */
.side-card{border:1px solid var(--line);background:var(--bg-1);padding:20px}
.side-card h3{font-family:var(--mono);font-size:11px;color:var(--fg-mute);letter-spacing:0.14em;text-transform:uppercase;font-weight:600;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.side-card h3 .c{color:var(--red)}

/* Rising stars */
.stars{display:flex;flex-direction:column;gap:10px}
.star{padding:10px 12px;border:1px solid var(--line);background:var(--bg);display:flex;justify-content:space-between;align-items:center;gap:10px;color:inherit;text-decoration:none;transition:background 0.12s ease}
.star:hover{background:var(--bg-2)}
.star .b{font-family:var(--sans);font-size:13px;font-weight:600}
.star .d{font-family:var(--mono);font-size:10px;color:var(--fg-dim);letter-spacing:0.08em;margin-top:2px}
.star .g{font-family:var(--mono);font-size:14px;color:var(--green);font-weight:600}
.star.star-empty .b{color:var(--fg-mute)}
.star.star-empty .g{color:var(--fg-mute)}

/* Podium name link — subtle hover underline. */
.lb-link{color:inherit;text-decoration:none;border-bottom:1px dashed transparent;transition:border-color 0.12s ease}
.lb-link:hover{border-bottom-color:var(--fg-dim)}

/* Elo distribution */
.elo-dist{display:flex;flex-direction:column;gap:10px;font-family:var(--mono);font-size:11px}
.elo-bucket-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.elo-bucket-head .tier{font-size:10px;padding:1px 6px}
.elo-bucket-count{font-weight:600;color:var(--fg)}
.elo-bucket-bar{height:4px;background:var(--bg)}
.elo-bucket-fill{height:100%;transition:width 0.3s ease}

/* Most active maps */
.active-maps{font-family:var(--mono);display:flex;flex-direction:column;gap:8px;font-size:12px}
.active-maps .map-row{display:flex;justify-content:space-between;align-items:center}
.active-maps .map-row b{color:var(--fg);font-weight:600}
.active-maps .map-row.dim{color:var(--fg-mute)}

/* ── RESPONSIVE ── */
@media (max-width:1100px){
  .twocol{grid-template-columns:1fr}
  .lb-aside{flex-direction:row;flex-wrap:wrap}
  .lb-aside .side-card{flex:1 1 280px}
}
@media (max-width:900px){
  .podium{grid-template-columns:1fr}
  .lb-head,
  .lb-row{grid-template-columns:40px 1fr 70px 62px 78px;font-size:11px;padding:10px 12px;gap:8px}
  .lb-head span:nth-child(3),
  .lb-head span:nth-child(7),
  .lb-head span:nth-child(8),
  .lb-head span:nth-child(9),
  .lb-row > *:nth-child(3),
  .lb-row > *:nth-child(7),
  .lb-row > *:nth-child(8),
  .lb-row > *:nth-child(9){display:none}
  .lb-filters input{width:140px}
}