/* ========== LEADERBOARDS PAGE ========== */

.leaderboards-page {
    max-width: 900px;
    margin: 0 auto;
}

.leaderboards-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.leaderboards-header h1 {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    margin-bottom: 0.35rem;
}

.leaderboards-header p {
    color: var(--muted);
    margin: 0;
}

.leaderboards-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.lb-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 999px;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    transition: all 150ms ease;
}

.lb-tab:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.lb-tab.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.lb-tab.active .mc4-r,
.lb-tab.active .mc4-g {
    filter: brightness(1.2);
}

.leaderboards-controls {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    min-width: 250px;
}

.search-box svg {
    color: var(--muted);
    flex-shrink: 0;
}

.search-box input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1rem;
    outline: none;
}

.search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    color: var(--muted);
    cursor: pointer;
}

.leaderboards-content {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    overflow: hidden;
}

.lb-loading,
.lb-error,
.lb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--muted);
}

.lb-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgb(from var(--mud-palette-primary) r g b / 0.2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 1rem;
}

.lb-error svg,
.lb-empty svg {
    opacity: 0.4;
    margin-bottom: 0.75rem;
}

.lb-error {
    color: #b03434;
}

.lb-empty p {
    margin: 0 0 0.25rem;
    color: var(--ink);
}

.lb-table-header {
    display: grid;
    grid-template-columns: 80px 1fr 70px 90px 130px;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    background: rgb(from var(--mud-palette-primary) r g b / 0.06);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}

.lb-row {
    display: grid;
    grid-template-columns: 80px 1fr 70px 90px 130px;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    align-items: center;
    border-bottom: 1px solid var(--line);
    transition: background 150ms ease;
}

.lb-row:last-child {
    border-bottom: none;
}

.lb-row:hover {
    background: rgb(from var(--mud-palette-primary) r g b / 0.03);
}

.lb-row-me {
    background: rgb(from var(--mud-palette-primary) r g b / 0.08);
}

.lb-row-me:hover {
    background: rgb(from var(--mud-palette-primary) r g b / 0.12);
}

.lb-row-top {
    background: linear-gradient(90deg, rgba(242, 165, 65, 0.08), transparent);
}

.trophy {
    font-size: 1.1rem;
    margin-right: 0.35rem;
}

.rank-num {
    font-weight: 500;
    color: var(--muted);
}

.lb-col-player {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.player-avatar {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #fff;
    border-radius: 50%;
    font-weight: 600;
    font-size: 0.85rem;
}

.player-name {
    font-weight: 500;
}

.you-badge {
    padding: 0.1rem 0.4rem;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

.lb-col-level,
.lb-col-xp {
    font-variant-numeric: tabular-nums;
}

.tier-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Rank inks. Each tier's fill is a translucent tint, so the ink is really being read against the
   tint composited over the row -- and the row is lighter still on .lb-row-me. Every value below is
   measured against that worst case (the "me" row), not against the bare surface. The ranks have to
   stay tellable apart from each other as well as legible, so the hue is fixed per tier and only the
   lightness moves; the dark theme needs the mirror-image ink and gets it in the .dark-mode block. */
.tier-novice {
    background: rgba(120, 120, 120, 0.15);
    color: #5b5b6b;
}

.tier-freshman {
    background: rgba(59, 130, 246, 0.15);
    color: #1056c6;
}

.tier-casual {
    background: rgba(34, 197, 94, 0.15);
    color: #196b3b;
}

.tier-pro {
    background: rgb(from var(--mud-palette-primary) r g b / 0.15);
    color: var(--accent-strong);
}

.tier-master {
    background: rgba(139, 92, 246, 0.15);
    color: #9d18aa;
}

.tier-grandmaster {
    background: rgba(242, 165, 65, 0.2);
    color: #84520b;
}

.tier-ultimate-warrior {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(242, 165, 65, 0.15));
    color: #b31414;
}

.lb-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    border-top: 1px solid var(--line);
}

.pagination-info {
    font-size: 0.85rem;
    color: var(--muted);
}

/* Pins the current player's row to the bottom of the viewport so their standing stays
   visible while they scroll the board. Sits outside .leaderboards-content because that
   card is overflow: hidden, which would trap position: sticky. */
.lb-sticky-me {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    overflow: hidden;
}

.lb-sticky-note {
    margin: 0;
    padding: 0.85rem 1.25rem;
    font-size: 0.85rem;
    color: var(--muted);
}

/* The one deliberate exception to the 600/960/1280 scale above, and it stays at 700.
   .lb-row's chrome is rigid: 80+70+90+130 of fixed tracks + 4x1rem gaps + 2x1.25rem padding
   = 474px before the 1fr name column gets anything. A name like "MidnightCrusader_92" has a
   153px min-content width and cannot shrink past it, so the row needs ~627px. At a 601px
   viewport the main area is 569px -- measured 23px of horizontal page overflow if this stop is
   moved down to 600. Overflow starts below ~660px, so 700 is the empirical stop with a little
   margin. Moving it UP to 960 instead would drop the XP and Tier columns on tablets that fit
   the full table comfortably (at 760px the name column still gets 254px). Leave it at 700. */
@media (max-width: 700px) {
    .lb-table-header,
    .lb-row {
        grid-template-columns: 60px 1fr 60px;
    }

    .lb-col-xp,
    .lb-col-tier {
        display: none;
    }
}