.leaderboard-listing {
    display: flex;
    flex-direction: column;
    padding-block: 40px;
}


.ly-leaderboard-container {
    width: max(310px,75%);
    margin-top: 50px;
}

    .ly-leaderboard-container > .title {
        color: var(--ly-dark-red);
    }

.ly-leaderboard-ranking {
    display: grid;
    grid-template-columns: 40px clamp(60px,5vw,80px) 1fr 80px;
    grid-auto-rows: clamp(60px,5vw,80px);
    align-items: center;
    padding-block: clamp(5px,.8vw,10px);
    gap:5px;
}

    .ly-leaderboard-ranking.current-user {
        order: -1;
    }

    .ly-leaderboard-ranking:first-child {
        border-bottom: 2px solid rgba(193, 193, 193, 0.57);
    }

    .ly-leaderboard-ranking .user-profile {
        width: 100%;
        height: 100%;
        border-radius:50%;
        overflow:hidden;
    }

        .ly-leaderboard-ranking .user-profile img {
            width: 100%;
            height: 100%;
            object-fit:cover;
        }

        .ly-leaderboard-ranking .align-start {
            text-align: start;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    .ly-leaderboard-ranking .align-end {
        text-align: end;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.ly-scroll-to-top-btn {
    opacity:0;
    pointer-events:none;
    --scroll-top-btn-size: clamp(40px,4vw,60px);
    width: var(--scroll-top-btn-size);
    height: var(--scroll-top-btn-size);
    position: fixed;
    inset-inline-end: 25px;
    inset-block-end: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 1px solid var(--ly-black);
    background-color: var(--ly-white);
    transition: all ease .3s;
}

.ly-scroll-to-top-btn img{
    width:60%;
}

    .ly-scroll-to-top-btn.visible {
        opacity: 1;
        pointer-events: auto;
        inset-block-end: 65px;
    }