/**
 * Fichier : leaderboard.css
 * Type : CSS
 */
 
.leaderboard-controls {
    display: flex;
    gap: var(--spacing-medium);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-large);
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-small);
}

.control-label {
    font-size: var(--font-xs);
    color: var(--color-ice-07);
    text-transform: uppercase;
    font-weight: bold;
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium);
}

.leaderboard-card {
    display: flex;
    align-items: center;
    background: linear-gradient(145deg, var(--color-slate-09) 0%, var(--color-ocean-10) 100%);
    border: 1px solid var(--color-slate-07);
    border-radius: var(--radius-medium);
    padding: var(--spacing-medium);
    transition: all 0.2s ease;
}

.leaderboard-card:hover {
    border-color: var(--color-purple-05);
    transform: translateX(4px);
}

.leaderboard-card.is-me {
    border-color: var(--color-purple-10);
    background: linear-gradient(145deg, var(--color-purple-02) 0%, var(--color-ocean-10) 100%);
}

.lb-rank {
    font-size: var(--font-large);
    font-weight: 800;
    width: 40px;
    text-align: center;
    margin-right: var(--spacing-medium);
}

.lb-user {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-small);
}

.lb-username {
    font-weight: bold;
    font-size: var(--font-medium);
    color: var(--color-ice-10);
}

.lb-stats {
    display: flex;
    gap: var(--spacing-large);
}

.stat-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: bold;
    font-size: var(--font-medium);
    color: var(--color-ice-10);
}

.stat-mini span {
    font-size: 0.6rem;
    color: var(--color-ice-07);
    text-transform: uppercase;
    margin-bottom: 2px;
}

@media (max-width: 600px) {
    .leaderboard-card {
        flex-wrap: wrap;
    }
    
    .lb-stats {
        width: 100%;
        margin-top: var(--spacing-medium);
        padding-top: var(--spacing-small);
        border-top: 1px solid rgba(255,255,255,0.05);
        justify-content: space-between;
    }
}