/* ============ RESET & BASE ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* Light theme. White page, navy as the working accent (links, borders,
       highlights), red reserved for primary actions and the wordmark so it
       stays an accent rather than the whole personality. */
    /* Tinted page, white surfaces — the standard light-app pattern. A pure
       white page glares and leaves cards with nothing to sit against. */
    --bg: #f4f6fa;
    --bg-card: #ffffff;
    --bg-card-hover: #eef3fa;
    /* Navy-tinted rather than neutral grey, and dark enough to actually draw a
       line. The old #dbe2ec disappeared against white. */
    --border: #c2d0e4;
    --border-strong: #93a9c9;
    --text: #101a28;
    --text-muted: #45536b;
    --tint: #eef3fa;
    --accent: #1a3f86;
    --accent-hover: #12306a;
    --accent-dim: rgba(26, 63, 134, 0.10);
    --danger: #b3261e;
    --danger-hover: #8c1c16;
    --warning: #a35b00;
    --blue: #1a3f86;
    --star: #16202e;
    --flag-blue: #193b7b;
    --flag-red: #bf0a30;
    --tennis: #b7c72f;
    --radius: 10px;
    --radius-sm: 6px;
}

html { font-size: 16px; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* ============ LAYOUT ============ */
.app-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 16px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1; padding: 24px 0; }

/* ============ HEADER / NAV ============ */
header {
    border-bottom: 1px solid var(--border);
    padding: 14px 0;
}

nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Buys back ~40px of nav width so the user block stays on one line longer. */
@media (min-width: 641px) and (max-width: 1250px) {
    .nav-links { font-size: 0.76rem; }
    .nav-links a { padding-left: 5px; padding-right: 5px; }
    .logo { font-size: 1.1rem; }
}

.logo {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.5px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

/* A crest with ring text, racquets, a star and a ladder cannot be read at nav
   size — it just becomes a blob. It gets room in the hero instead; the nav keeps
   a modest mark purely as a colour cue beside the wordmark. */
.logo-mark {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: block;
    object-fit: contain;
}

/* Where the crest actually works: big, centred, on its own. */
.hero-crest {
    display: block;
    width: 200px;
    height: 200px;
    margin: 4px auto 18px;
    object-fit: contain;
}

@media (max-width: 600px) {
    .hero-crest { width: 148px; height: 148px; }
}

/* The container is capped at 900px, so viewport breakpoints can't decide this —
   a 1400px window still has a 900px nav. Signed-in users get TTL because their
   nav has seven links plus the user block; signed-out users see the full name.
   The narrow-screen rule still applies on phones. */
.logo-text { display: inline-block; }
.logo-short { display: none; }

.logo-compact .logo-text { display: none; }
.logo-compact .logo-short { display: inline-block; }

@media (max-width: 640px) {
    .logo-text { display: none; }
    .logo-short { display: inline-block; }
}

.logo-accent { color: var(--accent); }

/* A red rule under the masthead — flag colour without a floating band, since
   the header sits inside the 900px container rather than spanning the page. */
header { border-bottom: 2px solid var(--flag-red); }

.nav-links {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.nav-links a, .nav-links .nav-dropdown-toggle {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 4px 0;
    transition: color 0.2s;
    white-space: nowrap;
}

.nav-links a:hover, .nav-links a.active, .nav-links .nav-dropdown-toggle:hover { color: var(--accent); }

.auth-section {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
}

.user-name {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ============ BUTTONS ============ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.btn-primary {
    background: var(--accent);
    color: #000;
}

.btn-primary:hover {
    background: var(--accent-hover);
    color: #000;
}

.btn-secondary {
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-secondary:hover { background: var(--bg-card-hover); }

.btn-danger {
    background: var(--danger);
    color: #fff;
}

.btn-danger:hover { background: var(--danger-hover); }

.btn-sm {
    padding: 6px 12px;
    font-size: 0.8rem;
}

.btn-google {
    background: #fff;
    color: #333;
    border: 1px solid var(--border);
    font-weight: 500;
    gap: 8px;
    padding: 12px 24px;
    font-size: 0.95rem;
    border-radius: var(--radius);
}

.btn-google:hover {
    background: #f0f0f0;
    color: #333;
}

.btn-google svg { width: 18px; height: 18px; }

.logout-btn {
    color: var(--text-muted);
    font-size: 0.75rem;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.logout-btn:hover { color: var(--danger); border-color: var(--danger); }

/* ============ CARDS ============ */
/* White surface on the tinted page. No navy top edge — it showed as a stray
   line above elements that bring their own header, like the ladder table. */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
}

h1, h2, h3 { color: var(--flag-blue); }

header { background: var(--bg-card); }

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.card-header h2, .card-header h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
}

/* ============ FLASH MESSAGES ============ */
.flash {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    font-size: 0.9rem;
    background: var(--accent-dim);
    color: var(--accent);
    border: 1px solid var(--accent);
}

.flash.error {
    background: rgba(231, 76, 60, 0.15);
    color: var(--danger);
    border-color: var(--danger);
}

.flash.flash-login-link {
    background: #ffffff;
    color: #111111;
    border: 1px solid #cccccc;
    font-family: monospace;
    font-size: 0.85rem;
    word-break: break-all;
    user-select: all;
}

/* ============ FORMS ============ */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.2s;
}

.form-group input:focus, .form-group select:focus {
    outline: none;
    border-color: var(--accent);
}

.form-row {
    display: flex;
    gap: 12px;
}

.form-row .form-group { flex: 1; }

.set-score-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.set-score-row label {
    width: 50px;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
}

.set-score-row input {
    width: 60px;
    padding: 8px;
    text-align: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 1rem;
}

.set-score-row input:focus {
    outline: none;
    border-color: var(--accent);
}

.set-score-row .dash {
    color: var(--text-muted);
    font-weight: 600;
}

/* ============ LANDING PAGE ============ */
.hero {
    text-align: center;
    padding: 60px 0 40px;
}

.hero h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: -1px;
}

.hero h1 .accent { color: var(--accent); }

.hero .subtitle {
    font-size: 1.15rem;
    color: var(--text-muted);
    max-width: 500px;
    margin: 0 auto 32px;
}

.how-it-works {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 40px 0;
}

.step {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 20px;
    text-align: center;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--accent-dim);
    color: var(--accent);
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.step h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    margin-bottom: 8px;
}

.step p {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ============ LADDER VIEW ============ */
.ladder-table {
    width: 100%;
    border-collapse: collapse;
}

/* Navy header band gives the table a top edge to hang off, instead of grey
   caps floating over hairlines. */
.ladder-table th {
    text-align: center;
    padding: 11px 12px;
    font-size: 0.75rem;
    color: #ffffff;
    background: var(--flag-blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: none;
}

.ladder-table th:first-child { border-top-left-radius: var(--radius-sm); }
.ladder-table th:last-child  { border-top-right-radius: var(--radius-sm); }

.ladder-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}

/* Shaded by GROUP of three rather than by alternate row, so each rung reads
   as one block: ranks 1-3 on the card background, 4-6 tinted, 7-9 plain, and
   so on. A heavier rule closes each group. Row hover is deliberately gone -
   this is a standings table to read, not a menu to point at. */
/* The rank sits in its own column while the opponent's rank is inline
   against their name, so the left side read much looser than the right.
   Shrink the column to its contents and centre it under the heading. */
.ladder-table td:first-child {
    text-align: center;
    width: 1%;
    white-space: nowrap;
    padding-right: 4px;
}
.ladder-table td:nth-child(2) { padding-left: 6px; }

/* Separator between the two players. Narrow, quiet, centred. */
.ladder-table .vs-cell {
    width: 1%;
    white-space: nowrap;
    text-align: center;
    padding-left: 6px;
    padding-right: 6px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.ladder-table tbody tr.grp-a td { background: transparent; }
.ladder-table tbody tr.grp-b td { background: #eaf2fb; }
.ladder-table tbody tr.grp-end td { border-bottom: 2px solid #111; }

.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.8rem;
}

.rank-1 { background: #ffd700; color: #000; }
.rank-2 { background: #c0c0c0; color: #000; }
.rank-3 { background: #cd7f32; color: #000; }
.rank-default { background: var(--accent-dim); color: var(--flag-blue); border: 1px solid var(--border-strong); }

.player-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;          /* lets the name shrink instead of overflowing */
}

.player-cell img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

/* Fixed-width avatar slot so names always start at the same x, whether or not
   the player has a profile picture. */
.player-cell .pc-avatar {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Opponent's rank number — fixed slot, right-aligned. */
.player-cell .pc-rank {
    flex: 0 0 auto;
    min-width: 1.8em;
    text-align: right;
    font-size: 0.8rem;
}

.player-cell .pc-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
}

/* Rating pinned to the right edge of the cell so ratings line up in a column
   instead of drifting with the length of each name. */
.player-cell .pc-ntrp {
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 8px;
    font-size: 0.8rem;
    white-space: nowrap;
}

.ntrp-badge {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--accent-dim);
    color: var(--accent);
}

/* ============ GROUPS ============ */
.group-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
}

.group-card h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    margin-bottom: 12px;
    color: var(--accent);
}

.group-players {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.group-player {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.group-player img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.contact-info {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ============ MATCH RESULTS ============ */
.match-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px;
    margin-bottom: 10px;
}

.match-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.match-players {
    font-weight: 600;
    font-size: 0.9rem;
}

.match-status {
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.status-pending { background: rgba(243, 156, 18, 0.2); color: var(--warning); }
.status-confirmed { background: var(--accent-dim); color: var(--accent); }
.status-disputed { background: rgba(231, 76, 60, 0.2); color: var(--danger); }

.match-scores {
    display: flex;
    gap: 24px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.set-score {
    padding: 2px 4px;
    background: var(--bg-card);
    border-radius: 4px;
}


.match-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
}
.match-actions-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ============ PROFILE ============ */
.profile-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

.profile-header img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent);
}

.profile-info h2 {
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: 4px;
}

.profile-info .meta {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
}

.stat-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--accent);
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============ ADMIN ============ */
.admin-section {
    margin-bottom: 32px;
}

.admin-section h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.admin-table th {
    text-align: left;
    padding: 8px 10px;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
}

.admin-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
}

.admin-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.inline-form {
    display: inline;
}

.badge {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}

.badge-admin { background: rgba(52, 152, 219, 0.2); color: var(--blue); }
.badge-active { background: var(--accent-dim); color: var(--accent); }
.badge-inactive { background: rgba(231, 76, 60, 0.15); color: var(--danger); }

/* ============ SECTION TITLES ============ */
.page-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 24px;
    letter-spacing: -0.5px;
}

.section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text-muted);
}

/* ============ EMPTY STATES ============ */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.empty-state p {
    margin-bottom: 16px;
}

/* ============ FOOTER ============ */
footer {
    border-top: 1px solid var(--border);
    padding: 16px 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* ============ MOVEMENT INDICATORS ============ */
.movement-up { color: var(--accent); font-weight: 600; }
.movement-down { color: var(--text-muted); }
.movement-stay { color: var(--text-muted); opacity: 0.7; }

/* Red is the action colour: primary buttons and the wordmark only. Everything
   else leans navy, so the red keeps its emphasis. */
.btn-primary { background: var(--flag-red); border-color: var(--flag-red); color: #ffffff; }
.btn-primary:hover { background: #9c0827; border-color: #9c0827; }
.logo-accent, .hub-hero h1 .accent, .hub-hero .hub-wordmark .accent { color: var(--flag-red); }

/* ============ HAMBURGER MENU ============ */
.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    margin-left: auto;
    flex-direction: column;
    gap: 5px;
}

.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 600px) {
    .hero h1 { font-size: 2rem; }
    .how-it-works { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .form-row { flex-direction: column; }
    .profile-header { flex-direction: column; text-align: center; }
    .ladder-table { font-size: 0.8rem; table-layout: fixed; }
    .ladder-table th, .ladder-table td { padding: 8px 4px; vertical-align: middle; }

    /* Phone column widths: rank and score stay narrow so the two name columns
       get the room they need and ratings stop wrapping onto a second line. */
    .ladder-table th:nth-child(1), .ladder-table td:nth-child(1) { width: 26px; }
    .ladder-table th:nth-child(5), .ladder-table td:nth-child(5) { width: 84px; }

    /* Avatars are the main cause of ragged name alignment on narrow screens,
       and they cost ~36px per column — drop them on phones. */
    .player-cell .pc-avatar { display: none; }
    .player-cell { gap: 6px; }
    .player-cell .pc-ntrp { padding-left: 4px; font-size: 0.7rem; }
    .player-cell .pc-rank { font-size: 0.7rem; min-width: 1.5em; }

    nav {
        flex-wrap: wrap;
        gap: 10px;
    }

    .hamburger { display: flex; }

    .nav-links, .auth-section {
        display: none;
        width: 100%;
    }

    nav.nav-open .nav-links,
    nav.nav-open .auth-section {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    nav.nav-open .nav-links {
        padding-top: 8px;
        border-top: 1px solid var(--border);
    }

    .nav-links a {
        padding: 8px 0;
    }

    nav.nav-open .auth-section {
        padding-bottom: 4px;
    }

    /* Hamburger animation when open */
    nav.nav-open .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    nav.nav-open .hamburger span:nth-child(2) { opacity: 0; }
    nav.nav-open .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Mobile dropdown: static, toggle via .open */
    .nav-dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        background: transparent;
        padding: 0 0 0 12px;
    }
    .nav-dropdown.open .nav-dropdown-menu { display: block; }
}

/* ============ NAV DROPDOWN ============ */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 4px 0;
    transition: color 0.2s;
    cursor: pointer;
}

.nav-dropdown-toggle:hover { color: var(--accent); }

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 0;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(22,32,46,0.12);
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    display: block;
}

.nav-dropdown-menu a {
    display: block;
    padding: 8px 16px;
    font-size: 0.85rem;
    color: var(--text);
    transition: background 0.15s;
}

.nav-dropdown-menu a:hover {
    background: var(--bg-card-hover);
    color: var(--accent);
}

.nav-dropdown-sep {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

.nav-dropdown-coming-soon {
    display: block;
    padding: 8px 16px;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
}

/* ============ HUB PAGE ============ */
.hub-hero {
    text-align: center;
    padding: 28px 0 12px;
}

/* The brand wordmark is no longer the <h1> — the H1 is now the phrase people
   actually search for. Same visual, different tag. */
.hub-hero h1,
.hub-hero .hub-wordmark {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: -0.5px;
}

.hub-hero h1 .accent,
.hub-hero .hub-wordmark .accent { color: var(--accent); }

/* Two classes beats `.hub-hero h1`, so this still wins on the H1 below. */
.hub-hero .hero-subtitle {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 10px;
    letter-spacing: 0;
}

.hub-hero p {
    font-size: 0.95rem;
    color: var(--text-muted);
}

/* Homepage explainer copy — the substance a local player reads before joining. */
.home-explainer {
    max-width: 68ch;
    margin: 40px auto 0;
    padding-top: 28px;
    border-top: 1px solid var(--border);
}
.home-explainer h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.2px;
    margin: 26px 0 8px;
}
.home-explainer h2:first-child { margin-top: 0; }
.home-explainer p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin: 0;
}

.hub-steps {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin: 16px 0 24px;
    flex-wrap: wrap;
}

.hub-step {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.hub-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--accent-dim);
    color: var(--accent);
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.75rem;
    margin-right: 4px;
}

/* ============ HUB LADDER GRID ============ */
.hub-ladder-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.hub-ladder-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 14px;
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
    text-decoration: none;
    color: var(--text);
    display: block;
}

.hub-ladder-card:hover {
    border-color: var(--accent);
    background: var(--bg-card-hover);
    color: var(--text);
}

.hub-ladder-card h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.hub-ladder-card p {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}

.hub-ladder-coming-soon {
    opacity: 0.45;
    pointer-events: none;
}

/* ============ HUB TICKER ============ */
.hub-ticker-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 16px;
    margin-bottom: 20px;
    text-align: center;
    min-height: 40px;
}

.hub-ticker-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 0.85rem;
    flex-wrap: wrap;
}

.hub-ticker-ladder {
    color: var(--accent);
    font-weight: 600;
    font-size: 0.8rem;
}

.hub-ticker-players {
    color: var(--text);
    font-weight: 500;
}

.hub-ticker-score {
    color: var(--text-muted);
    font-family: 'Space Grotesk', monospace;
}

@media (max-width: 600px) {
    .hub-ladder-grid { grid-template-columns: 1fr; }
    .hub-steps { gap: 12px; }
}

/* ============ DISPUTE MODAL ============ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
}
.modal-box {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    width: 100%;
    max-width: 440px;
    position: relative;
}
.modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
.modal-close:hover { color: var(--text); }