/* ===== LEADERBOARD TOP 3 PREMIUM EFFECTS ===== */

/* Enhanced Leaderboard Styles */
.leaderboard-item {
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Top 3 Special Highlighting */
.leaderboard-item[data-rank="1"],
.leaderboard-item.rank-1 {
    background: linear-gradient(135deg,
            rgba(255, 215, 0, 0.15) 0%,
            rgba(255, 215, 0, 0.05) 100%);
    border: 2px solid rgba(255, 215, 0, 0.4);
    box-shadow:
        0 20px 40px rgba(255, 215, 0, 0.2),
        0 0 60px rgba(255, 215, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: visible;
}

.leaderboard-item[data-rank="1"]::before {
    content: '👑';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 32px;
    animation: crownFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.4));
}

@keyframes crownFloat {

    0%,
    100% {
        transform: translateX(-50%) translateY(0) rotate(-5deg);
    }

    50% {
        transform: translateX(-50%) translateY(-5px) rotate(5deg);
    }
}

.leaderboard-item[data-rank="2"],
.leaderboard-item.rank-2 {
    background: linear-gradient(135deg,
            rgba(192, 192, 192, 0.15) 0%,
            rgba(192, 192, 192, 0.05) 100%);
    border: 2px solid rgba(192, 192, 192, 0.3);
    box-shadow:
        0 15px 30px rgba(192, 192, 192, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.leaderboard-item[data-rank="3"],
.leaderboard-item.rank-3 {
    background: linear-gradient(135deg,
            rgba(205, 127, 50, 0.15) 0%,
            rgba(205, 127, 50, 0.05) 100%);
    border: 2px solid rgba(205, 127, 50, 0.3);
    box-shadow:
        0 15px 30px rgba(205, 127, 50, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Medal Icons */
.rank-medal {
    display: inline-block;
    font-size: 24px;
    margin-right: 12px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.rank-medal-1 {
    animation: medalSpinGold 4s ease-in-out infinite;
}

.rank-medal-2 {
    animation: medalSpinSilver 4s ease-in-out infinite;
}

.rank-medal-3 {
    animation: medalSpinBronze 4s ease-in-out infinite;
}

@keyframes medalSpinGold {

    0%,
    100% {
        transform: rotate(0deg) scale(1);
        filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.4));
    }

    50% {
        transform: rotate(10deg) scale(1.1);
        filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.6));
    }
}

@keyframes medalSpinSilver {

    0%,
    100% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(-8deg) scale(1.05);
    }
}

@keyframes medalSpinBronze {

    0%,
    100% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(8deg) scale(1.05);
    }
}

/* XP Display for Top Players */
.leaderboard-item[data-rank="1"] .player-xp,
.leaderboard-item[data-rank="2"] .player-xp,
.leaderboard-item[data-rank="3"] .player-xp {
    background: linear-gradient(90deg,
            rgba(139, 92, 246, 0.3),
            rgba(167, 139, 250, 0.2));
    padding: 4px 12px;
    border-radius: 8px;
    font-weight: 800;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
}

.leaderboard-item[data-rank="1"] .player-xp {
    color: #FFD700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* Rays effect for #1 position */
.leaderboard-item[data-rank="1"]::after {
    content: '';
    position: absolute;
    inset: -50%;
    background: repeating-conic-gradient(from 0deg at 50% 50%,
            transparent 0deg,
            rgba(255, 215, 0, 0.05) 2deg,
            transparent 4deg,
            transparent 8deg);
    animation: raysRotate 20s linear infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes raysRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}