/* ============================================================ */
/* STATS LEADERS — "Meneurs de la ligue"                         */
/* Six top-5 boards, one per category. Moved here from the       */
/* homepage (accueil.css/accueil.js used to render this as the   */
/* signed-in hero content) — this is where league-wide reference */
/* stats belong; the homepage now leads with personal content.   */
/* ============================================================ */
@keyframes stats-leaders-card-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.stats-leaders-section {
    max-width: 1380px;
    margin: 0 auto;
    padding: 32px 24px 0;
}

.stats-leaders-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.stats-leaders-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 1.75rem; font-weight: 800; color: var(--text-main);
}
.stats-leaders-title [data-icon] { color: var(--primary); display: flex; }

.leaders-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.leader-card {
    background: var(--card-white);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 18px;
    animation: stats-leaders-card-in .4s ease both;
}

.leader-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.leader-card-icon {
    width: 26px; height: 26px; flex-shrink: 0;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,212,255,.12); color: var(--primary);
}
.leader-card-title {
    font-size: .95rem; font-weight: 700; color: var(--text-main);
}

/* Rank 1 — featured, larger than the rest */
.leader-featured {
    display: flex; align-items: center; gap: 12px;
    padding: 10px; margin-bottom: 8px;
    background: var(--bg-hover);
    border-radius: 12px;
    cursor: pointer;
    transition: box-shadow .2s ease;
}
.leader-featured:hover,
.leader-featured:focus-visible { box-shadow: 0 0 0 1px rgba(0,212,255,.3) inset; }
.leader-featured-photo {
    width: 46px; height: 46px; flex-shrink: 0;
    border-radius: 50%; object-fit: cover;
    background: var(--bg-gray-light);
    border: 2px solid var(--primary);
}
.leader-featured-id { flex: 1; min-width: 0; }
.leader-featured-name {
    font-weight: 700; font-size: .9rem; color: var(--text-dark);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.leader-featured-meta { font-size: .72rem; color: var(--text-gray); margin-top: 2px; }
.leader-featured-stat { text-align: right; flex-shrink: 0; }
.leader-featured-val {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 1.35rem; font-weight: 700; color: var(--primary); line-height: 1;
}
.leader-featured-lbl {
    font-size: .6rem; color: var(--text-gray);
    text-transform: uppercase; letter-spacing: .5px;
}

/* Ranks 2-5 — compact list */
.leader-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 4px;
    font-size: .82rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background .2s ease;
}
.leader-row:hover,
.leader-row:focus-visible { background: rgba(0,212,255,.06); }
.leader-row-rank { width: 16px; flex-shrink: 0; font-weight: 700; color: var(--text-gray); }
.leader-row-name {
    flex: 1; min-width: 0; font-weight: 600; color: var(--text-dark);
    font-size: .88rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.leader-row-team {
    flex-shrink: 0; color: var(--text-gray); font-size: .72rem;
    font-weight: 700; text-transform: uppercase;
}
.leader-row-val {
    flex-shrink: 0; min-width: 22px; text-align: right;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 700; color: var(--text-dark);
}

.leader-card-empty { padding: 24px 4px; text-align: center; color: var(--text-secondary); font-size: .85rem; }

@media (max-width: 1024px) {
    .leaders-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .stats-leaders-section { padding: 24px 20px 0; }
    .leaders-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 12px;
        margin: 0 -20px;
        padding: 2px 20px 10px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .leaders-grid::-webkit-scrollbar { display: none; }
    .leader-card { flex: 0 0 78%; scroll-snap-align: start; }
    .stats-leaders-title { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
    .leader-card { animation: none; }
}