/* Leaderboard Section Styles */

.leaderboard-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    padding: 0 10px;
}

.leader-tab-btn {
    flex: 1;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.leader-tab-btn.active {
    background: var(--primary-gradient);
    color: #fff;
    border: none;
    box-shadow: 0 4px 15px var(--primary-glow);
}

.leader-name {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 2px;

    /* Gradient Text */
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    /* Fallback */
}

.leader-id {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    /* Force ID and Number to stay together */
    white-space: nowrap;
    display: block;
    /* Ensure it takes its own line if needed, though flex parent handles this */
}

.leader-score {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.score-value {
    font-weight: 800;
    color: #ffca28;
    /* Gold */
    font-size: 1.1rem;
}

.score-label {
    font-size: 0.7rem;
    color: #ffca28;
    /* Gold (for % and unit) */
    opacity: 0.8;
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 30px;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 12px 15px;
    gap: 15px;
    transition: transform 0.2s;
}

/* Ensure Info takes available space to push Score to the end (Left in Arabic/RTL) */
.leader-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center Name/ID */
    text-align: center;
}

.leaderboard-item:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateX(-5px);
}

.leader-rank-box {
    width: 110px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    margin-left: -20px;
    /* Slight offset to align nicely */
}



.rank-number {
    font-size: 1.2rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.4);
    font-family: monospace;
}

/* Badge with Subtle Glow - ENLARGED & 3D Enabled */
.leader-badge-wrapper {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Enable 3D space for children */
    perspective: 1000px;
    transform-style: preserve-3d;
}

/* Removed oval background - using glow instead */
.badge-bg-saturated {
    display: none;
}

.leader-badge-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    /* Remove high z-index to allow sorting */
    transform: translateZ(0);
    /* Default fallback glow */
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.2));
}

/* Rank Colors & Glows (User Specified V2) */
.rank-1 {
    --rank-glow: #ffca28;
}

/* Gold */
.rank-2 {
    --rank-glow: #f44336;
}

/* Red */
.rank-3 {
    --rank-glow: #9c27b0;
}

/* Purple */
.rank-4 {
    --rank-glow: #2196f3;
}

/* Blue */
.rank-5 {
    --rank-glow: #4caf50;
}

/* Green */
.rank-6 {
    --rank-glow: #ffffff;
}

/* White */
.rank-7 {
    --rank-glow: #ff9800;
}

/* Orange */
.rank-8 {
    --rank-glow: #ff4081;
}

/* Pink */
.rank-9 {
    --rank-glow: #cd7f32;
}

/* Bronze */
.rank-10 {
    --rank-glow: #e0e0e0;
}

/* Silver */

.leader-badge-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    /* Remove high z-index to allow sorting */
    transform: translateZ(0);

    /* Dynamic Glow based on Rank Color */
    filter: drop-shadow(0 0 10px var(--rank-glow, rgba(255, 255, 255, 0.2))) drop-shadow(0 0 5px var(--rank-glow, rgba(255, 255, 255, 0.2)));
    transition: filter 0.3s ease;
}

/* Specific intensifiers if needed, but variables handle it now */

/* Star Animation */
.star-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    /* Enable 3D sorting with the badge */
    transform-style: preserve-3d;
    /* Remove explicit z-index to allow 3D intermingling with img */
}

/* The Orbiting Container */
.star {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    opacity: 0;
    transform-style: preserve-3d;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* The Star Itself (Dot) */
.star::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;

    /* Use dynamic rank color for the HEAD itself */
    background: var(--rank-glow, #fff);

    /* Stronger colored glow, remove white inner glow to ensure color shows */
    box-shadow:
        0 0 6px var(--rank-glow, #ffca28),
        0 0 12px var(--rank-glow, #ffca28);

    transform: translateX(var(--r));

    margin-top: calc(var(--size) / -2);
    margin-left: calc(var(--size) / -2);

    z-index: 2;
    /* Ensure Star is ON TOP of tail */
}

/* The Tail (Ring Segment - Tapered "Crescent") */
.star::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Reset rotation */
    width: calc(var(--r) * 2);
    height: calc(var(--r) * 2);
    border-radius: 50%;

    border: none;
    background: transparent;

    /* Tapered Shadow - DYNAMIC RANK COLOR */
    /* Outset shadow, creates sharp crescent */
    box-shadow: 6px 0 0 0 currentColor;
    color: var(--rank-glow, #ffca28);
    /* Defaults to Gold if variable missing */

    /* Alignment Fix */
    transform: translate(-50%, -50%) rotate(-15deg);

    /* Mask */
    mask-image: conic-gradient(from 280deg, transparent 0%, rgba(0, 0, 0, 1) 100%);
    -webkit-mask-image: conic-gradient(from 280deg, transparent 0%, rgba(0, 0, 0, 1) 100%);

    animation: tailPulse 1s infinite alternate;
    z-index: 1;
    will-change: opacity, color;
}

@keyframes tailPulse {
    from {
        opacity: 0.5;
    }

    to {
        opacity: 1;
    }
}

/* 
   Chaotic ELLIPTICAL Orbits 
   No circles allowed. We use rotateX/Y to tilt, and scale() to squash into ellipses.
   Radii Tightened (45px - 55px) to stay IN FRAME.
   Optimize for 3D sorting.
*/

/* 1. Steep Diagonal Ellipse */
.star-path-1 {
    --r: 50px;
    --size: 4px;
    animation: orbitEll1 4s linear infinite, fadeIn 0.5s forwards;
    will-change: transform;
}

@keyframes orbitEll1 {
    from {
        transform: rotateZ(45deg) rotateX(65deg) rotateZ(0deg);
    }

    to {
        transform: rotateZ(45deg) rotateX(65deg) rotateZ(360deg);
    }
}

/* 2. Flat-ish Ellipse (Squashed) */
.star-path-2 {
    --r: 55px;
    --size: 3px;
    animation: orbitEll2 5s linear infinite, fadeIn 0.5s forwards;
    will-change: transform;
}

@keyframes orbitEll2 {
    from {
        transform: rotateZ(-15deg) rotateX(75deg) rotateZ(0deg);
    }

    to {
        transform: rotateZ(-15deg) rotateX(75deg) rotateZ(360deg);
    }
}

/* 3. Backward Diagonal Ellipse */
.star-path-3 {
    --r: 45px;
    --size: 5px;
    animation: orbitEll3 6s linear infinite, fadeIn 0.5s forwards;
    will-change: transform;
}

@keyframes orbitEll3 {
    from {
        transform: rotateZ(-135deg) rotateX(60deg) rotateZ(0deg);
    }

    to {
        transform: rotateZ(-135deg) rotateX(60deg) rotateZ(360deg);
    }
}

/* 4. Near Vertical Ellipse (The one moving Bottom-Top) */
/* Reduce tilt from 80deg to 70deg to stop "shaking" artifacts */
.star-path-4 {
    --r: 48px;
    --size: 3px;
    animation: orbitEll4 6s linear infinite, fadeIn 0.5s forwards;
    /* Slowed from 4.5s */
    will-change: transform;
}

@keyframes orbitEll4 {
    from {
        transform: rotateZ(10deg) rotateY(70deg) rotateZ(0deg);
    }

    to {
        transform: rotateZ(10deg) rotateY(70deg) rotateZ(360deg);
    }
}

/* 5. Fast Inner Chaotic */
/* Slowed down slightly to match smoother vibe */
.star-path-5 {
    --r: 42px;
    --size: 4px;
    animation: orbitEll5 5s linear infinite, fadeIn 0.5s forwards;
    /* Slowed from 3.5s */
    will-change: transform;
}

@keyframes orbitEll5 {
    from {
        transform: rotateX(50deg) rotateY(30deg) rotateZ(0deg);
    }

    to {
        transform: rotateX(50deg) rotateY(30deg) rotateZ(360deg);
    }
}

/* Loading State */
.loading-leaderboard {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 100px 0;
    color: rgba(255, 255, 255, 0.5);
}

.loading-leaderboard i {
    font-size: 2.5rem;
}

/* Profile Badge - Matching Leaderboard Size */
.profile-rank-badge {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.profile-rank-badge .leader-badge-wrapper {
    width: 120px;
    height: 120px;
}

@media (max-width: 480px) {
    .leader-name {
        font-size: 0.9rem;
    }

    .score-value {
        font-size: 1rem;
    }
}