/* =========================================================
   CROSSYRAY LEADERBOARD
========================================================= */

.leaderboard-page {

    min-height:
        100vh;

    padding:
        110px 18px 80px;

}


.leaderboard-container {

    width:
        min(820px, 100%);

    margin:
        0 auto;

}


/* =========================================================
   HEADING
========================================================= */

.leaderboard-heading {

    margin-bottom:
        25px;

    text-align:
        center;

}


.leaderboard-heading > span {

    color:
        var(--blue);

    font-size:
        10px;

    font-weight:
        950;

    letter-spacing:
        .15em;

}


.leaderboard-heading h1 {

    margin:
        6px 0 8px;

    font-size:
        clamp(38px, 7vw, 60px);

    letter-spacing:
        -.05em;

}


.leaderboard-heading p {

    margin:
        0;

    color:
        var(--text-muted);

}


/* =========================================================
   MY RANK
========================================================= */

.my-ranking-card {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        8px;

    margin-bottom:
        14px;

}


.my-ranking-card > div {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        5px;

    padding:
        16px 10px;

    background:
        rgba(17,24,36,.82);

    border:
        1px solid
        var(--border);

    border-radius:
        13px;

}


.my-ranking-card span {

    color:
        var(--text-muted);

    font-size:
        9px;

    font-weight:
        850;

}


.my-ranking-card strong {

    font-size:
        18px;

}


/* =========================================================
   LEADERBOARD
========================================================= */

.leaderboard-card {

    overflow:
        hidden;

    background:
        rgba(17,24,36,.88);

    border:
        1px solid
        var(--border);

    border-radius:
        18px;

    box-shadow:
        var(--shadow-large);

}


.leaderboard-table-header,
.leaderboard-row {

    display:
        grid;

    grid-template-columns:
        55px minmax(0,1fr) 90px 65px 65px;

    align-items:
        center;

}


.leaderboard-table-header {

    min-height:
        44px;

    padding:
        0 16px;

    color:
        var(--text-muted);

    background:
        rgba(255,255,255,.025);

    border-bottom:
        1px solid
        var(--border);

    font-size:
        9px;

    font-weight:
        950;

    letter-spacing:
        .08em;

}


.leaderboard-row {

    min-height:
        62px;

    padding:
        0 16px;

    border-bottom:
        1px solid
        rgba(255,255,255,.045);

}


.leaderboard-row:last-child {

    border-bottom:
        0;

}


.leaderboard-row.me {

    background:
        rgba(87,183,255,.08);

}


.leaderboard-rank {

    color:
        var(--text-muted);

    font-weight:
        900;

}


.leaderboard-rank.top {

    color:
        var(--yellow);

}


.leaderboard-player {

    min-width:
        0;

    overflow:
        hidden;

    font-weight:
        850;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


.leaderboard-rk {

    color:
        var(--blue);

    font-weight:
        950;

}


.leaderboard-stat {

    color:
        var(--text-secondary);

    font-size:
        12px;

}


.leaderboard-loading,
.leaderboard-empty {

    padding:
        35px 20px;

    color:
        var(--text-muted);

    text-align:
        center;

}


.leaderboard-note {

    margin:
        15px 0 0;

    color:
        var(--text-muted);

    font-size:
        11px;

    text-align:
        center;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 600px) {

    .my-ranking-card {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .leaderboard-table-header,
    .leaderboard-row {

        grid-template-columns:
            38px minmax(0,1fr) 68px 42px 42px;

        padding:
            0 9px;

    }


    .leaderboard-row {

        min-height:
            56px;

        font-size:
            12px;

    }

}