body {
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
            background: #0d0e11;
            color: #f4f5f6;
            margin: 0;
            padding: 40px;
            box-sizing: border-box;
            height: 100vh;
            display: flex;
            flex-direction: column;
            letter-spacing: -0.01em;
        }
        .hud-banner {
            background: #14161d;
            border: 1px solid #222630;
            border-radius: 12px;
            padding: 24px 40px;
            margin-bottom: 32px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .status-pill {
            display: flex;
            align-items: center;
            gap: 12px;
            background: rgba(0, 230, 118, 0.06);
            border: 1px solid rgba(0, 230, 118, 0.15);
            padding: 8px 16px;
            border-radius: 30px;
        }
        .status-dot {
            width: 8px;
            height: 8px;
            background: #00e676;
            border-radius: 50%;
            box-shadow: 0 0 12px #00e676;
        }
        .status-text {
            font-size: 0.85rem;
            font-weight: 600;
            color: #00e676;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .hud-metric {
            font-size: 0.9rem;
            color: #8892b0;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-weight: 500;
        }
        .hud-value {
            color: #ffffff;
            font-weight: 700;
            font-size: 1.4rem;
            margin-left: 6px;
        }
        .split-container {
            display: flex;
            gap: 32px;
            flex: 1;
            min-height: 0;
        }
        .left-column {
            flex: 65;
            display: flex;
            flex-direction: column;
        }
        .right-column {
            flex: 35;
            background: #14161d;
            border: 1px solid #222630;
            border-radius: 12px;
            padding: 32px;
            display: flex;
            flex-direction: column;
        }
        .panel-box {
            background: #14161d;
            border: 1px solid #222630;
            border-radius: 12px;
            padding: 40px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .panel-title {
            margin: 0 0 32px 0;
            color: #ffffff;
            font-size: 1.25rem;
            font-weight: 600;
            letter-spacing: -0.02em;
        }
        .vote-row {
            margin-bottom: 24px;
        }
        .vote-meta {
            display: flex;
            justify-content: space-between;
            font-size: 0.95rem;
            font-weight: 500;
            margin-bottom: 10px;
            color: #e2e5e9;
        }
        .progress-track {
            background: #1e222b;
            height: 12px;
            border-radius: 20px;
            overflow: hidden;
        }
        .progress-fill {
            background: #00e676;
            width: 0%;
            height: 100%;
            border-radius: 20px;
            transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Essential animation anchor */
        }
        .board-title {
            margin: 0 0 24px 0;
            color: #ffffff;
            font-size: 1.25rem;
            font-weight: 600;
            letter-spacing: -0.02em;
        }
        .leaderboard-table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed; /* required for name-col ellipsis to actually clip instead of stretching the table */
        }
        .leaderboard-table th {
            color: #64748b;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-weight: 600;
            padding-bottom: 16px;
            border-bottom: 1px solid #222630;
        }
        .leaderboard-table td {
            padding: 16px 0;
            border-bottom: 1px solid #1e222b;
            font-size: 1.05rem;
        }
        .indicator-col { width: 6%; }
        .rank-col { width: 9%; color: #64748b; font-weight: 600; }
        .awards-col { width: 18%; white-space: nowrap; }
        /* Emoji + name are one "identity" cell (a tight flex gap, not two
           independently-widthed columns) so they read as grouped data instead
           of leaving an arbitrary gap between them. */
        .identity-col { width: 47%; overflow: hidden; }
        .identity-wrap { display: flex; align-items: center; gap: 6px; min-width: 0; }
        .player-emoji { font-size: 1.2rem; flex-shrink: 0; }
        .player-name { font-weight: 500; color: #ffffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
        .score-col { width: 20%; text-align: right; color: #00e676; font-weight: 600; }

        /* Per-round answer status "light" -- invisible until a player submits
           (light yellow), then either turns green (correct) or reverts to
           invisible (wrong/no answer) once the reveal fires. Never red --
           the reveal only ever calls out correctness, not failure. */
        .status-indicator {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: transparent;
            transition: background-color 0.3s ease;
        }
        .status-indicator.answered { background: #ffd54f; }
        .status-indicator.correct { background: #00e676; }

        /* In-round achievement badges (framework -- see AWARD_DISPLAY in app.js
           for how new award types plug in). Each type shows as a single badge
           whose color/label reflects its current tier/level, never stacking. */
        .award-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            vertical-align: middle;
            box-sizing: border-box;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #00e676;
            color: #0d0e11;
            font-size: 0.85rem;
            font-weight: 700;
            margin-right: 4px;
        }
        .award-pulse { animation: awardPulse 1.6s ease-in-out infinite; }
        @keyframes awardPulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35); }
            50% { box-shadow: 0 0 6px 3px rgba(255, 255, 255, 0.35); }
        }
        /* Icon badges have no circular backdrop -- it's the SVG's own shape,
           painted via a CSS mask (rather than an <img>) so its color is ours to
           set independent of whatever color the source art actually uses. Same
           footprint as the number badges (22px) so they line up in the awards
           column. SPEED3 (still up for grabs this round) gets its own electric
           yellow; the EmpossDurr trio (SPYGLASS/IMPOSTOR_WIN/BULLSEYE) are
           permanent once earned, so they share the app's own green accent
           instead -- "yellow = live race, green = you earned this." */
        .award-badge-icon {
            background: transparent;
            border-radius: 0;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
            -webkit-mask-size: contain;
            mask-size: contain;
        }
        .badge-speed3 {
            background-color: #ffd600;
            -webkit-mask-image: url('/bolt-icon.svg');
            mask-image: url('/bolt-icon.svg');
        }
        .badge-spyglass {
            background-color: #00e676;
            -webkit-mask-image: url('/mag-glass.svg');
            mask-image: url('/mag-glass.svg');
        }
        .badge-impostor-win {
            background-color: #00e676;
            -webkit-mask-image: url('/spy.svg');
            mask-image: url('/spy.svg');
        }
        .badge-bullseye {
            background-color: #00e676;
            -webkit-mask-image: url('/muscle.svg');
            mask-image: url('/muscle.svg');
        }

        /* Light, unobtrusive context appended after a module's name -- never
           competes with the name itself for attention. */
        .module-descriptor { color: #64748b; font-weight: 400; font-size: 0.8rem; }
                /* Sliding Toast Alert Notification Window Styles */
        .toast-container {
            position: fixed;
            bottom: 40px;
            left: 40px;
            z-index: 9999;
            pointer-events: none;
        }
        .toast-card {
            background: rgba(20, 22, 29, 0.95);
            border: 1px solid #222630;
            border-radius: 8px;
            padding: 16px 24px;
            display: flex;
            align-items: center;
            gap: 16px;
            box-shadow: 0 12px 32px rgba(0,0,0,0.5);
            transform: translateX(-150%);
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            backdrop-filter: blur(8px);
        }
        .toast-card.active {
            transform: translateX(0);
        }
        .toast-text {
            font-size: 1rem;
            font-weight: 500;
            color: #ffffff;
        }
        .toast-highlight {
            color: #00e676;
            font-weight: 600;
        }
        /* Content-unavailable warning -- same toast shell, orange accent
           instead of the default neutral border so it reads as "heads up,"
           not just another routine notification. */
        .toast-card.warning {
            border-color: rgba(255, 165, 0, 0.4);
            background: rgba(255, 165, 0, 0.08);
        }
        .toast-warning-icon {
            font-size: 1.3rem;
        }
/* ========================================== */
/*  GATEWAY VIEW LAYER CONTROLLER              */
/* ========================================== */

/* State A: Show gateway, completely drop the game track layout */
body[data-view="gateway"] #game-screen {
    display: none !important;
}
body[data-view="gateway"] #gateway-screen {
    display: block;
}

/* State B: Remove gateway footprint, bring active panel dashboard to stage */
body[data-view="game"] #gateway-screen {
    display: none !important;
}
body[data-view="game"] #game-screen {
    display: block;
}

/* Sleek Gaming Form Button Styling rules */
.action-btn-primary {
    background: #00e676;
    color: #0b0e14;
    border: none;
    border-radius: 8px;
    padding: 16px 32px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}
.action-btn-primary:hover {
    background: #00c862;
    transform: translateY(-1px);
}
.action-btn-primary:active {
    transform: translateY(1px);
}

.action-btn-secondary {
    background: #14161d;
    color: #ffffff;
    border: 1px solid #222630;
    border-radius: 8px;
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.action-btn-secondary:hover {
    border-color: #64748b;
    background: #1c1f29;
}

/* Final leaderboard rows -- same sleek button feel as .action-btn-secondary,
   with a gold/silver/bronze accent per rank instead of an icon. */
.leaderboard-btn {
    background: #14161d;
    border: 1px solid #222630;
    border-radius: 8px;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.leaderboard-btn-name {
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 600;
    flex: 1 1 auto;
    min-width: 0; /* lets a flex child actually shrink below its content width so ellipsis can kick in */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 12px;
}
.leaderboard-btn-score {
    font-size: 1.05rem;
    font-weight: 700;
    flex-shrink: 0;
}
.leaderboard-btn.rank-gold {
    border-color: #d4af37;
    background: rgba(212, 175, 55, 0.08);
}
.leaderboard-btn.rank-gold .leaderboard-btn-score { color: #d4af37; }
.leaderboard-btn.rank-silver {
    border-color: #b8bcc4;
    background: rgba(184, 188, 196, 0.08);
}
.leaderboard-btn.rank-silver .leaderboard-btn-score { color: #b8bcc4; }
.leaderboard-btn.rank-bronze {
    border-color: #cd7f32;
    background: rgba(205, 127, 50, 0.08);
}
.leaderboard-btn.rank-bronze .leaderboard-btn-score { color: #cd7f32; }

/* ========================================== */
/*  VIEWPORT ENGINE VISIBILITY STATES         */
/* ========================================== */

/* State A: Complete lockdown of the match engine when inside the gateway */
body[data-view="gateway"] #game-screen,
body[data-view="gateway"] #game-screen * {
    display: none !important;
}
body[data-view="gateway"] #gateway-screen {
    display: block !important;
}

/* State B: Complete lockdown of the gateway when inside an active game */
body[data-view="game"] #gateway-screen,
body[data-view="game"] #gateway-screen * {
    display: none !important;
}
body[data-view="game"] #game-screen {
    display: block !important;
}

/* Custom Interactive UI Button Properties */
.action-btn-primary {
    background: #00e676;
    color: #0b0e14;
    border: none;
    border-radius: 8px;
    padding: 16px 32px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}
.action-btn-primary:hover {
    background: #00c862;
    transform: translateY(-1px);
}
.action-btn-primary:active {
    transform: translateY(1px);
}

.action-btn-secondary {
    background: #14161d;
    color: #ffffff;
    border: 1px solid #222630;
    border-radius: 8px;
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.action-btn-secondary:hover {
    border-color: #64748b;
    background: #1c1f29;
}