/* The site-wide leaderboards page (leaderboard.html). Uses the tokens and buttons from site.css. */
.lb-head { margin: 28px 0 22px; }
.lb-head h1 { margin: 0; font-family: Fraunces, Georgia, serif; font-size: clamp(2.4rem, 7vw, 4rem); line-height: 1; }
.lb-head .lede { margin: 12px 0 0; color: var(--ink-soft); font-size: 1.08rem; }

.lb-tabs { display: flex; gap: 8px; margin: 0 -20px 16px; padding: 4px 20px 8px; overflow-x: auto; scrollbar-width: none; }
.lb-tabs::-webkit-scrollbar { display: none; }
.lb-tab { display: inline-flex; flex: none; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 999px; background: var(--card); color: var(--ink-soft); font-weight: 700; box-shadow: inset 0 0 0 2px var(--line); transition: transform .12s, background .15s, color .15s; }
.lb-tab:hover { transform: translateY(-1px); color: var(--ink); }
.lb-tab.on { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.lb-tab-icon { font-size: 1.1rem; line-height: 1; }

.lb-card { padding: 22px; border-radius: 28px; background: var(--card); box-shadow: 0 20px 50px -30px rgba(0,0,0,.4); }
.lb-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.lb-card-head h2 { margin: 0; font-family: Fraunces, Georgia, serif; font-size: 1.8rem; }
.lb-scope { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--paper); }
.lb-scope button { padding: 8px 16px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-weight: 700; }
.lb-scope button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 2px 8px -3px rgba(0,0,0,.3); }

.lb-rows { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lb-row { display: grid; grid-template-columns: 44px 1fr 64px 72px 64px; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 16px; background: var(--paper); animation: lb-in .35s ease-out both; animation-delay: var(--delay, 0ms); }
.lb-row.lb-labels { background: none; padding-block: 0 2px; color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; animation: none; }
.lb-rank { font-weight: 800; text-align: center; font-size: 1.05rem; }
.lb-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.lb-name em { margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--green); color: #fff; font-size: .72rem; font-style: normal; vertical-align: 2px; }
.lb-num { text-align: right; font-variant-numeric: tabular-nums; }
.lb-wins { font-weight: 800; }
.lb-row.top-1 { background: color-mix(in srgb, var(--yellow) 30%, var(--card)); }
.lb-row.top-1 .lb-rank { font-size: 1.5rem; animation: lb-bob 1.2s ease-in-out 3; }
.lb-row.top-2 { background: color-mix(in srgb, #b9c0cc 30%, var(--card)); }
.lb-row.top-3 { background: color-mix(in srgb, #d08a4e 24%, var(--card)); }
.lb-row.me { box-shadow: inset 0 0 0 2px var(--green); }
.lb-empty { padding: 26px 16px; border-radius: 16px; background: var(--paper); color: var(--muted); text-align: center; }
.lb-foot { margin: 14px 0 0; text-align: right; }
.lb-foot .text-button { text-decoration: none; color: var(--ink); }
@keyframes lb-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes lb-bob { 50% { transform: translateY(-4px) rotate(-8deg); } }

@media (max-width: 640px) {
  .lb-tabs { margin-inline: -16px; padding-inline: 16px; }
  .lb-card { padding: 16px 12px; border-radius: 22px; }
  .lb-row { grid-template-columns: 34px 1fr 48px 52px; padding: 9px 10px; gap: 6px; }
  .lb-wide { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lb-row, .lb-row.top-1 .lb-rank { animation: none; } }