/* HERO */

.leaderboard-hero {

    text-align: center;

    padding: 90px 20px 55px;

}


.leaderboard-hero span {

    color: #8b5cf6;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 3px;

}


.leaderboard-hero h1 {

    font-size: 52px;

    margin: 12px 0 8px;

}


.leaderboard-hero p {

    color: #a1a1aa;

    font-size: 17px;

}


/* MAIN */

.leaderboard-container {

    width: min(
        1100px,
        calc(100% - 40px)
    );

    margin: auto;

    padding-bottom: 80px;

}


/* TOOLBAR */

.leaderboard-toolbar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    margin-bottom: 30px;

}


.leaderboard-toolbar h2 {

    margin: 0 0 5px;

}


.leaderboard-toolbar p {

    margin: 0;

    color: #71717a;

}


#gameFilter {

    background: #111113;

    color: white;

    border: 1px solid #27272a;

    border-radius: 10px;

    padding: 12px 16px;

    font-size: 14px;

    cursor: pointer;

}


/* TOP THREE */

.top-three {

    display: grid;

    grid-template-columns:
        1fr 1.15fr 1fr;

    align-items: end;

    gap: 15px;

    margin-bottom: 50px;

}


.podium {

    position: relative;

    text-align: center;

    padding: 30px 15px;

    background:
        linear-gradient(
            145deg,
            #111113,
            #18181b
        );

    border: 1px solid #27272a;

    border-radius: 18px;

}


.podium.first {

    padding-top: 42px;

    border-color: #7c3aed;

    box-shadow:
        0 20px 60px
        rgba(124,58,237,.18);

}


.rank {

    font-size: 32px;

}


.crown {

    position: absolute;

    top: -22px;

    left: 50%;

    transform:
        translateX(-50%);

    font-size: 30px;

}


.avatar {

    width: 65px;

    height: 65px;

    margin: 12px auto;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    background: #27272a;

    font-size: 28px;

}


.podium h3 {

    margin: 10px 0;

}


.podium strong {

    display: block;

    font-size: 28px;

}


.podium span {

    color: #71717a;

    font-size: 9px;

    letter-spacing: 2px;

}


/* SECTIONS */

.ranking-section,
.your-scores {

    margin-top: 35px;

}


.section-title {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 15px;

}


.section-title h2 {

    margin: 0;

}


.section-title p {

    margin: 5px 0 0;

    color: #71717a;

}


.section-title > span {

    color: #71717a;

    font-size: 13px;

}


/* RANKING */

.ranking-list {

    border: 1px solid #27272a;

    border-radius: 15px;

    overflow: hidden;

    background: #09090b;

}


.ranking-header,
.ranking-row {

    display: grid;

    grid-template-columns:
        120px 1fr 160px;

    align-items: center;

    gap: 15px;

    padding: 17px 20px;

}


.ranking-header {

    background: #111113;

    color: #71717a;

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 1px;

}


.ranking-row {

    border-top: 1px solid #1f1f22;

}


.ranking-row:hover {

    background: #111113;

}


.rank-number {

    font-weight: bold;

}


.game-name {

    display: flex;

    align-items: center;

    gap: 10px;

}


.game-icon {

    font-size: 22px;

}


.game-score {

    text-align: right;

    font-weight: bold;

    font-size: 17px;

}


/* YOUR SCORES */

.score-grid {

    display: grid;

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

    gap: 12px;

}


.score-card {

    padding: 20px;

    background: #111113;

    border: 1px solid #27272a;

    border-radius: 13px;

}


.score-card-icon {

    font-size: 27px;

}


.score-card h3 {

    margin: 10px 0 5px;

    font-size: 15px;

}


.score-card strong {

    font-size: 22px;

}


.score-card span {

    display: block;

    color: #71717a;

    margin-top: 5px;

    font-size: 10px;

}


/* EMPTY */

.empty-score {

    grid-column: 1 / -1;

    padding: 40px;

    text-align: center;

    color: #71717a;

    border: 1px dashed #27272a;

    border-radius: 13px;

}


/* MOBILE */

@media(max-width:800px) {

    .leaderboard-hero h1 {

        font-size: 40px;

    }


    .top-three {

        grid-template-columns: 1fr;

        align-items: stretch;

    }


    .podium.first {

        order: -1;

    }


    .score-grid {

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

    }

}


@media(max-width:600px) {

    .leaderboard-container {

        width:
            calc(100% - 20px);

    }


    .leaderboard-toolbar {

        flex-direction: column;

        align-items: stretch;

    }


    #gameFilter {

        width: 100%;

    }


    .ranking-header,
    .ranking-row {

        grid-template-columns:
            55px 1fr 90px;

        padding: 14px 12px;

    }


    .game-score {

        font-size: 14px;

    }


    .score-grid {

        grid-template-columns: 1fr;

    }

}