.leaderboard-content {
    flex: 1;
    min-height: 0;
    padding:
        clamp(18px, 5.4vw, 30px)
        clamp(31px, 8.5vw, 43px)
        clamp(34px, 9vw, 52px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 2.8vw, 12px);
    box-sizing: border-box;
}

.leaderboard-empty-state {
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 2.8vw, 12px);
}

.leaderboard-calculating-text,
.leaderboard-ready-text {
    margin: 0;
    max-width: 240px;
    font-family: 'Nunito', sans-serif;
    font-size: clamp(11px, 3.1vw, 13px);
    font-weight: 900;
    line-height: 1.25;
    color: #ffd55c;
    text-shadow:
        1px 1px 2px #000,
        0 0 6px rgba(255, 213, 92, 0.35);
}

.leaderboard-ready-text {
    margin-top: -4px;
    color: #d8d8d8;
}

.leaderboard-list-section {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
}

.leaderboard-list-title {
    font-family: 'Graduate', serif;
    font-size: clamp(13px, 3.7vw, 16px);
    font-weight: bold;
    color: #ffd55c;
    text-align: center;
    line-height: 1;
    text-shadow:
        1px 1px 2px #000,
        0 0 7px rgba(255, 213, 92, 0.35);
    margin-bottom: clamp(4px, 1.4vw, 7px);
}

.leaderboard-updated-text {
    min-height: 13px;
    margin-bottom: clamp(7px, 2vw, 10px);
    font-family: 'Nunito', sans-serif;
    font-size: clamp(8px, 2.35vw, 10px);
    font-weight: 800;
    color: rgba(240, 240, 240, 0.75);
    text-align: center;
    line-height: 1.2;
    text-shadow: 1px 1px 2px #000;
}

.leaderboard-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1.8vw, 8px);
    padding-right: 2px;
    scrollbar-width: none;
}

.leaderboard-list::-webkit-scrollbar {
    display: none;
}

.leaderboard-row {
    position: relative;
    display: grid;
    grid-template-columns:
        clamp(20px, 6vw, 26px)
        clamp(30px, 8.5vw, 36px)
        minmax(0, 1fr)
        auto;
    align-items: center;
    gap: clamp(5px, 1.8vw, 8px);

    min-height: clamp(39px, 11vw, 46px);
    padding:
        clamp(5px, 1.7vw, 7px)
        clamp(7px, 2.2vw, 9px);

    box-sizing: border-box;
    border-radius: clamp(10px, 3vw, 13px);
    border: 1px solid rgba(255, 213, 92, 0.22);
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.025)),
        linear-gradient(135deg,
            rgba(255, 213, 92, 0.08),
            rgba(80, 160, 255, 0.035));
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.leaderboard-row::before {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: 0;
    height: 1px;
    background: linear-gradient(to right,
            transparent,
            rgba(255, 213, 92, 0.36),
            transparent);
    pointer-events: none;
}

.leaderboard-rank {
    font-family: 'Graduate', serif;
    font-size: clamp(11px, 3.3vw, 14px);
    font-weight: bold;
    color: #ffd55c;
    text-align: right;
    text-shadow:
        1px 1px 0 #000,
        0 0 5px rgba(255, 213, 92, 0.35);
}

.leaderboard-avatar {
    width: clamp(30px, 8.5vw, 36px);
    height: clamp(30px, 8.5vw, 36px);
    border-radius: 50%;
    border: 1px solid rgba(255, 213, 92, 0.42);
    background: rgba(0, 0, 0, 0.4);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.leaderboard-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.leaderboard-avatar-fallback {
    color: #ffd55c;
    font-family: 'Nunito', sans-serif;
    font-size: clamp(10px, 3vw, 12px);
    font-weight: 900;
    text-shadow: 1px 1px 0 #000;
}

.leaderboard-player-middle {
    min-width: 0;
    display: flex;
    align-items: center;
}

.leaderboard-name-row {
    min-width: 0;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.leaderboard-player-name {
    min-width: 0;
    max-width: clamp(92px, 31vw, 138px);
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: 'Nunito', sans-serif;
    font-size: clamp(11px, 3.35vw, 14px);
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    text-shadow: 1px 1px 2px #000;
}

.leaderboard-name-gold {
    background: linear-gradient(to right,
            #D4AF37 0%,
            #D4AF37 40%,
            #FFF7B6 50%,
            #D4AF37 60%,
            #D4AF37 100%);
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: rainbow-wave 7s linear infinite;
    text-shadow: none;
}

.leaderboard-name-silver {
    background: linear-gradient(to right,
            #A9A9A9 0%,
            #A9A9A9 40%,
            #FFFFFF 50%,
            #A9A9A9 60%,
            #A9A9A9 100%);
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: rainbow-wave 7s linear infinite;
    text-shadow: none;
}

.leaderboard-prestige-badge {
    width: clamp(12px, 3.6vw, 15px);
    height: clamp(12px, 3.6vw, 15px);
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.75));
}

.leaderboard-level {
    flex-shrink: 0;
    justify-self: end;
    padding: 2px 5px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.36);
    border: 1px solid rgba(255, 213, 92, 0.22);

    font-family: 'Nunito', sans-serif;
    font-size: clamp(10px, 3vw, 12px);
    font-weight: 900;
    color: #87ceeb;
    line-height: 1.1;
    white-space: nowrap;
    text-shadow:
        1px 1px 1px #000,
        0 0 5px rgba(135, 206, 235, 0.35);
}