/**
 * Meetgle Weekly Leaderboard Styles
 */

/* Scrollbar hiding */
.leaderboard-modal-content {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.leaderboard-modal-content::-webkit-scrollbar {
    display: none;
}
.lb-list-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.lb-list-scroll::-webkit-scrollbar {
    display: none;
}

/* Loading spinner */
@keyframes lbSpin {
    to { transform: rotate(360deg); }
}

/* Podium animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.leaderboard-rank-animated {
    opacity: 0;
    animation: fadeInUp 0.5s forwards;
}

/* Podium hover */
.lb-podium-card .lb-rank-inner:hover {
    transform: translateY(-2px);
}
.lb-rank-gold:hover {
    background: rgba(255,215,0,0.1) !important;
    border-color: rgba(255,215,0,0.35) !important;
    box-shadow: 0 0 40px rgba(255,215,0,0.12) !important;
}
.lb-rank-silver:hover {
    background: rgba(192,192,192,0.1) !important;
    border-color: rgba(192,192,192,0.3) !important;
}
.lb-rank-bronze:hover {
    background: rgba(205,127,50,0.1) !important;
    border-color: rgba(205,127,50,0.3) !important;
}

/* List item hover */
.lb-list-item:hover {
    background: rgba(255,255,255,0.06) !important;
}

/* Mobile fullscreen */
@media (max-width: 900px) {
    #leaderboardModal { padding: 0 !important; }
    #leaderboardModal > .leaderboard-modal-content {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100svh !important;
        max-height: 100vh !important;
        max-height: 100svh !important;
        border-radius: 0 !important;
    }
}

/* Mobile podium: stack vertically as rows */
@media (max-width: 900px) {
    .lb-podium {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    /* Reorder: 1st, 2nd, 3rd */
    #rank1 { order: 1 !important; }
    #rank2 { order: 2 !important; }
    #rank3 { order: 3 !important; }

    /* Horizontal row layout */
    .lb-podium-card .lb-rank-inner {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 12px 14px !important;
        text-align: left !important;
    }

    /* Rank badge: left side circle instead of top centered */
    .lb-podium-card .lb-rank-badge {
        position: static !important;
        transform: none !important;
        flex-shrink: 0;
    }

    /* Hide crown emoji on mobile */
    #rank1 .lb-rank-inner > div:first-child {
        display: none !important;
    }

    /* Avatars inline */
    #avatar1, #avatar2, #avatar3 {
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        flex-shrink: 0;
    }

    /* Username fills space */
    #username1, #username2, #username3 {
        flex: 1 !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    /* Sparks right-aligned */
    .lb-podium-card .lb-rank-inner > div:last-child {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Truncate usernames */
    .leaderboard-username-text {
        max-width: 80px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        display: inline-block !important;
        vertical-align: middle !important;
    }
}