/* ═══════════════════════════════════════
           Scoreboard page additions
        ═══════════════════════════════════════ */

        .sb-wrap {
            flex: 1;
            max-width: 1300px;
            margin: 0 auto;
            width: 100%;
            padding: 3.5rem 1.5rem 4rem;
            position: relative;
            z-index: 5;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        /* ── Page header ── */
        .sb-page-header {
            animation: sb-fadein 0.6s cubic-bezier(0.22,1,0.36,1) both;
        }
        @keyframes sb-fadein {
            from { opacity: 0; transform: translateY(16px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .sb-eyebrow {
            font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
            letter-spacing: 0.14em; color: var(--mauve); margin-bottom: 0.4rem;
        }
        .sb-page-title {
            font-size: 2.2rem; font-weight: 900; color: var(--text);
            line-height: 1.1; margin-bottom: 0.5rem;
            text-shadow: 0 2px 8px rgba(0,0,0,0.4);
        }
        .sb-page-title span { color: var(--mauve); }
        .sb-page-sub {
            font-size: 0.88rem; color: var(--subtext0); line-height: 1.6;
        }
        .sb-header-rule {
            height: 1px; margin-top: 1.5rem;
            background: linear-gradient(90deg, var(--mauve), var(--blue), transparent);
            opacity: 0.25;
        }

        /* ── Controls card ── */
        .sb-controls-card {
            background: var(--glass-bg);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--glass-border);
            border-radius: 16px;
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            animation: sb-fadein 0.6s cubic-bezier(0.22,1,0.36,1) 0.05s both;
        }

        .sb-controls-row {
            display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;
        }

        .sb-mode-select {
            appearance: none; -webkit-appearance: none;
            background: rgba(18, 10, 40,0.5);
            border: 1px solid var(--surface0);
            border-radius: 10px;
            color: var(--text); font-family: var(--font-main);
            font-size: 0.875rem; padding: 10px 36px 10px 14px;
            cursor: pointer; transition: border-color 0.25s; min-width: 170px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a6adc8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
            background-repeat: no-repeat; background-position: right 12px center;
        }
        .sb-mode-select:focus { outline: none; border-color: var(--mauve); }
        .sb-mode-select option { background: var(--mantle); color: var(--text); }

        .sb-search-wrap {
            position: relative; flex: 1; min-width: 220px;
        }
        .sb-search-wrap svg {
            position: absolute; left: 12px; top: 50%;
            transform: translateY(-50%); color: var(--subtext0); pointer-events: none;
        }
        .sb-search-wrap input {
            width: 100%; padding: 10px 16px 10px 38px;
            background: rgba(18, 10, 40,0.5);
            border: 1px solid var(--surface0);
            border-radius: 10px; color: var(--text);
            font-size: 0.875rem; font-family: var(--font-main);
            transition: border-color 0.25s; box-sizing: border-box;
        }
        .sb-search-wrap input:focus { outline: none; border-color: var(--mauve); }
        .sb-search-wrap input::placeholder { color: var(--subtext0); }

        .sb-hint {
            font-size: 0.72rem; color: var(--surface1);
            white-space: nowrap; align-self: center;
            background: var(--surface0); padding: 4px 10px;
            border-radius: 6px; border: 1px solid rgba(240, 241, 245,0.08);
        }

        .sb-filter-pills { display: flex; gap: 0.4rem; flex-wrap: wrap; }
        .sb-pill {
            font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
            letter-spacing: 0.06em; padding: 5px 14px; border-radius: 20px;
            border: 1px solid var(--surface0); background: transparent;
            color: var(--subtext0); cursor: pointer; font-family: var(--font-main);
            transition: all 0.2s;
        }
        .sb-pill:hover { border-color: var(--blue); color: var(--blue); }
        .sb-pill.active {
            background: rgba(224, 175, 104,0.12);
            border-color: rgba(224, 175, 104,0.35); color: var(--mauve);
        }

        /* ── Table card ── */
        .sb-table-card {
            background: var(--glass-bg);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--glass-border);
            border-radius: 16px;
            overflow: hidden;
            animation: sb-fadein 0.65s cubic-bezier(0.22,1,0.36,1) 0.1s both;
        }

        /* Count bar */
        .sb-count-bar {
            padding: 0.75rem 1.25rem;
            border-bottom: 1px solid rgba(240, 241, 245,0.06);
            font-size: 0.72rem; color: var(--subtext0); font-weight: 600;
            display: flex; align-items: center; gap: 0.5rem;
        }
        .sb-count-bar span { color: var(--mauve); font-weight: 800; }

        .sb-table-wrap { overflow-x: auto; }

        .sb-table { width: 100%; border-collapse: collapse; }

        .sb-table th {
            background: rgba(18, 10, 40,0.6);
            color: var(--subtext0); font-size: 0.7rem; font-weight: 800;
            text-transform: uppercase; letter-spacing: 0.09em;
            padding: 11px 14px; text-align: left;
            position: sticky; top: 0; z-index: 2; white-space: nowrap;
            border-bottom: 1px solid rgba(240, 241, 245,0.07);
        }

        .sb-table td {
            padding: 11px 14px; font-size: 0.84rem; color: var(--text);
            border-bottom: 1px solid rgba(240, 241, 245,0.04);
            vertical-align: middle; white-space: nowrap;
        }

        .sb-table tbody tr { transition: background 0.15s; }
        .sb-table tbody tr:hover { background: rgba(104, 147, 186,0.04); }
        .sb-table tbody tr:last-child td { border-bottom: none; }

        /* Column color classes */
        .sb-rank   { font-weight: 700; font-size: 0.78rem; color: var(--subtext0); width: 48px; text-align: center; }
        .sb-rank.gold   { color: var(--yellow); }
        .sb-rank.silver { color: #b8bfc8; }
        .sb-rank.bronze { color: #c87c3e; }

        /* Top 3 row glow */
        .sb-table tbody tr:nth-child(1) { background: rgba(249,226,175,0.03); }
        .sb-table tbody tr:nth-child(2) { background: rgba(184,191,200,0.02); }
        .sb-table tbody tr:nth-child(3) { background: rgba(200,124,62,0.02); }

        .sb-score   { font-weight: 800; color: var(--mauve); font-variant-numeric: tabular-nums; }
        .sb-player  { font-weight: 700; color: var(--blue); }
        .sb-perfect { color: var(--green); font-weight: 600; }
        .sb-great   { color: var(--teal); }
        .sb-cool    { color: var(--sky); }
        .sb-bad     { color: var(--yellow); }
        .sb-miss    { color: var(--red); }
        .sb-combo   { color: var(--mauve); font-weight: 600; }
        .sb-spark   { color: var(--yellow); font-weight: 600; }
        .sb-success { color: var(--green); font-weight: 600; }
        .sb-note    { color: var(--teal); }
        .sb-flame   { color: var(--red); }
        .sb-swing   { color: var(--sky); }

        .sb-empty {
            text-align: center; padding: 4rem 1rem;
            color: var(--subtext0); font-size: 0.9rem;
        }

        /* ── Expand button ── */
        .sb-expand-wrap { padding: 1.25rem; text-align: center; border-top: 1px solid rgba(240, 241, 245,0.05); }
        .sb-expand-btn {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 10px 28px; font-family: var(--font-main);
            background: rgba(18, 10, 40,0.4);
            border: 1px solid var(--surface0); border-radius: 10px;
            color: var(--subtext0); font-size: 0.85rem; cursor: pointer;
            transition: border-color 0.25s, color 0.25s, background 0.25s;
            font-weight: 600;
        }
        .sb-expand-btn:hover {
            border-color: var(--blue); color: var(--blue);
            background: rgba(104, 147, 186,0.06);
        }
        .sb-expand-btn:disabled { opacity: 0.3; cursor: default; }

        /* ── Responsive ── */
        @media (max-width: 700px) {
            .sb-wrap { padding: 2rem 1rem 3rem; }
            .sb-page-title { font-size: 1.7rem; }
            .sb-controls-row { flex-direction: column; align-items: stretch; }
            .sb-hint { display: none; }
        }