/* ── Leaderboard View ─────────────────────────────────────────────────────── */

.leaderboard-container {
    padding: var(--spacing-xl) var(--spacing-xl);
    max-width: 900px;
    margin: 0 auto;
}

.leaderboard-header {
    margin-bottom: var(--spacing-xl);
}

.leaderboard-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-secondary);
    margin-bottom: var(--spacing-sm);
}

.leaderboard-description {
    font-size: var(--font-size-md);
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    max-width: 720px;
}

/* ── Master tabs ──────────────────────────────────────────────────────────── */

.leaderboard-tab-bar {
    display: flex;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-lg);
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 0;
}

.leaderboard-tab {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 10px 20px;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: color var(--transition-speed), border-color var(--transition-speed);
}

.leaderboard-tab:hover {
    color: rgba(255, 255, 255, 0.8);
}

.leaderboard-tab--active {
    color: var(--color-secondary);
    border-bottom-color: var(--color-secondary);
}

/* ── Loading / error / empty ──────────────────────────────────────────────── */

.leaderboard-loading,
.leaderboard-empty {
    text-align: center;
    padding: var(--spacing-xl) 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--font-size-md);
}

.leaderboard-error {
    color: #f44336;
}

/* ── Table wrapper ────────────────────────────────────────────────────────── */

.leaderboard-table-wrapper {
    overflow-x: auto;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
}

/* ── Table ────────────────────────────────────────────────────────────────── */

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Fixed 4-column widths (rank col is narrow) */
.leaderboard-table th:nth-child(1),
.leaderboard-table td:nth-child(1) { width: 70px; text-align: center; }

.leaderboard-table th:nth-child(2),
.leaderboard-table td:nth-child(2) { width: auto; text-align: center; }       /* Username — flexible */

.leaderboard-table th:nth-child(3),
.leaderboard-table td:nth-child(3) { width: 110px; text-align: center; }

.leaderboard-table th:nth-child(4),
.leaderboard-table td:nth-child(4) { width: 140px; text-align: center; }

.leaderboard-table th:nth-child(5),
.leaderboard-table td:nth-child(5) { width: 100px; text-align: center; }

/* Head */
.leaderboard-table thead tr {
    background: rgba(255, 255, 255, 0.06);
    border-bottom: 2px solid var(--color-border);
}

.leaderboard-table th {
    padding: 12px 16px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* Body rows */
.leaderboard-table tbody tr {
    border-bottom: 1px solid var(--color-border);
    transition: background var(--transition-speed);
}

.leaderboard-table tbody tr.lb-row-clickable {
    cursor: pointer;
}

.leaderboard-table tbody tr:last-child {
    border-bottom: none;
}

.leaderboard-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
}

.leaderboard-table td {
    padding: 14px 16px;
    font-size: var(--font-size-md);
    color: var(--color-text);
}

/* ── Rank cell ────────────────────────────────────────────────────────────── */

.lb-rank {
    font-weight: 700;
    font-size: 1.2rem !important;
}

/* ── Username cell ────────────────────────────────────────────────────────── */

.lb-username {
    font-weight: 600;
    color: var(--color-secondary) !important;
}

/* ── Score cell ───────────────────────────────────────────────────────────── */

.lb-score {
    font-weight: 700;
    color: var(--color-text) !important;
}

/* ── Top-3 row highlights ─────────────────────────────────────────────────── */

.leaderboard-table tbody tr.lb-top-1 {
    background: rgba(255, 215, 0, 0.06);
}

.leaderboard-table tbody tr.lb-top-2 {
    background: rgba(192, 192, 192, 0.05);
}

.leaderboard-table tbody tr.lb-top-3 {
    background: rgba(205, 127, 50, 0.05);
}

.leaderboard-table tbody tr.lb-top-1:hover { background: rgba(255, 215, 0, 0.1); }
.leaderboard-table tbody tr.lb-top-2:hover { background: rgba(192, 192, 192, 0.09); }
.leaderboard-table tbody tr.lb-top-3:hover { background: rgba(205, 127, 50, 0.09); }