* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #000;

    font-family: Arial, sans-serif;
}

#gameCanvas {

    display: block;

    width: 100%;
    height: 100%;

    touch-action: none;
}


/* ======================================================
   CLASSEMENT
   ====================================================== */

#leaderboard {

    position: fixed;

    top: 20px;
    right: 20px;

    width: 180px;

    padding: 12px;

    background:
        rgba(10, 15, 35, 0.85);

    border:
        1px solid
        rgba(255, 255, 255, 0.15);

    border-radius: 12px;

    color: white;

    font-family: Arial, sans-serif;

    z-index: 10;

    pointer-events: none;

    backdrop-filter: blur(8px);

    box-shadow:
        0 0 20px
        rgba(0, 0, 0, 0.4);
}


.leaderboard-title {

    text-align: center;

    font-size: 15px;

    font-weight: bold;

    margin-bottom: 8px;
}


.leaderboard-player {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 4px 2px;

    font-size: 13px;

    white-space: nowrap;

    overflow: hidden;
}


.leaderboard-player.me {

    font-weight: bold;

    color: #35e8ff;
}


.leaderboard-player:first-child {

    color: #ffd700;
}


.leaderboard-player:nth-child(2) {

    color: #d8d8d8;
}


.leaderboard-player:nth-child(3) {

    color: #cd7f32;
}


/* ======================================================
   PETITS ÉCRANS
   ====================================================== */

@media (max-width: 500px) {

    #leaderboard {

        top: 12px;
        right: 12px;

        width: 150px;

        padding: 9px;
    }

    .leaderboard-title {

        font-size: 13px;
    }

    .leaderboard-player {

        font-size: 11px;

        padding: 3px 1px;
    }
}