/* Leaderboard (static SSR at "/leaderboard"). Loaded after landing.css and press.css, whose bar,
   backdrop and footer it shares. */

.ladder { padding-block: 3rem 4rem; }

.ladder__title {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    margin: 0 0 1.5rem;
}

.ladder__regions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: -0.5rem 0 1.5rem;
}

.ladder__regions a {
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--edge);
    border-radius: 999px;
    color: var(--ink-dim);
    text-decoration: none;
}

.ladder__regions a:hover { color: inherit; }

.ladder__regions a[aria-current="page"] {
    color: inherit;
    border-color: var(--signal);
}

.ladder__empty { color: var(--ink-dim); }

.ladder__table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(26, 17, 54, 0.7);
    border: 1px solid var(--edge);
    border-radius: 0.4rem;
    font-variant-numeric: tabular-nums;
}

.ladder__table th,
.ladder__table td {
    padding: 0.6rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--edge);
}

.ladder__table th {
    color: var(--ink-dim);
    font-weight: 600;
    font-size: 0.9rem;
}

.ladder__table tbody tr:last-child td { border-bottom: 0; }
.ladder__table tbody tr:nth-child(-n+3) .ladder__rank { color: var(--signal); font-weight: 700; }

.ladder__rank { width: 4.5rem; }
.ladder__table .ladder__num { text-align: right; }

.ladder__name {
    overflow-wrap: anywhere;
}

@media (max-width: 34rem) {
    .ladder__table th,
    .ladder__table td { padding: 0.5rem 0.6rem; }

    .ladder__rank { width: 3rem; }
}