/* Twemoji-derived font that contains every regional-indicator pair as a
 * coloured flag glyph. Windows ships no such glyphs in any system font, so
 * flag emojis would otherwise render as raw country code letters there.
 * Listing this family FIRST in the font stack lets the browser substitute
 * just the flag codepoints while keeping Outfit for everything else.
 * unicode-range scopes the font to the regional-indicator block so the
 * font file isn't downloaded unless a flag glyph is actually rendered. */
@font-face {
    font-family: 'Twemoji Country Flags';
    src: url('/fonts/TwemojiCountryFlags.woff2') format('woff2');
    font-display: swap;
    unicode-range: U+1F1E6-1F1FF;
}

:root {
    --bg-color: #0f0f12;
    --accent-color: #ff1e1e;
    --text-color: #ffffff;
    --glass-bg: rgba(20, 20, 25, 0.85);
    --glass-border: rgba(255, 255, 255, 0.1);
    /* Flags in the DOM render as <img> from /flags/<cp1>-<cp2>.svg (see
       window.flagImg in Data.js). The Twemoji Country Flags webfont is
       still loaded — but only used for canvas-rendered driver labels in
       Game.js. In the DOM the font causes Safari to bleed CPAL palette
       colors into adjacent text on the same line, hence the <img>
       approach for everything in the DOM. */
    --font-main: 'Outfit', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-main);
    overflow: hidden;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#game-container {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
}

canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Layered-canvas mode: bg canvas sits behind the main game canvas and gets
   shifted via translate3d each frame instead of being repainted. Both abs-
   positioned with no z-index so DOM order alone stacks them: bgCanvas (first)
   below gameCanvas (second) below ui-layer (third). Avoids creating extra
   stacking contexts that would re-order ui-layer below the canvases.
   width/height for #bgCanvas are set inline in JS (custom px size). */
#game-container > #bgCanvas,
#game-container > #gameCanvas {
    position: absolute;
    top: 0;
    left: 0;
}
#game-container > #bgCanvas {
    will-change: transform;
    transform: translate3d(0, 0, 0);
    pointer-events: none;
}

#ui-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.screen {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background: transparent;
    transition: opacity 0.3s ease;
    pointer-events: auto;
    padding: 1rem;
    overflow-y: auto;
    overflow-x: hidden;
}

.menu-content {
    width: 100%;
    padding: 0 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.screen.hidden {
    opacity: 0;
    pointer-events: none;
}

.screen.active {
    opacity: 1;
}

/* Pre-paint guard: when a returning user has an auth token, the head-inline
   script sets html.has-auth so the welcome (pre-menu) screen is invisible
   before the first paint. Game.onIdentityReady() removes this class after
   identity state is settled, handing control back to the .active/.hidden
   toggling above. */
html.has-auth #welcome-screen {
    opacity: 0;
    pointer-events: none;
}
html.has-auth #main-menu {
    opacity: 1;
    pointer-events: auto;
}
/* Auto-launch arrivals (portal=true / play=true) skip the main menu too —
   main.js auto-launches a race. The class is added pre-paint by an inline
   script in index.html so the menu never flashes before JS hides it. */
html.portal-arrival #main-menu {
    opacity: 0;
    pointer-events: none;
}
/* Full app-view deep links (/stats, /sponsor, /p, /c) mount after the
   bundled game scripts boot. Keep the game shell hidden pre-paint so the
   menu/canvas cannot flash before the router attaches the app page host. */
html.app-route-prepaint #welcome-screen,
html.app-route-prepaint #main-menu {
    opacity: 0;
    pointer-events: none;
}
html.app-route-prepaint #bgCanvas,
html.app-route-prepaint #gameCanvas {
    visibility: hidden;
}
html.app-route-prepaint #app-page-host {
    display: block;
}
html.app-route-prepaint #app-page-host:not(.active)::after {
    content: 'Loading...';
    position: fixed;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: #0f0f12;
}

/* Main Menu */
.menu-card {
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 2rem 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 540px;
    margin: auto 0;
}

h1 {
    position: relative;
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -2px;
    margin-bottom: 1.5rem;
    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.9),
        0 4px 0 rgba(0, 0, 0, 0.5);
    text-align: center;
    padding: 0 1rem;
}

/* Version badge anchored to the right of "FULL SEND". Absolute so it does
   not change the h1's intrinsic width — the logo stays centered in the
   menu card regardless of the version string length. */
.title-version {
    position: absolute;
    left: 100%;
    bottom: 0.6rem;
    margin-left: -0.4rem;
    font-family: var(--font-main);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.35);
    text-shadow: none;
    white-space: nowrap;
    user-select: none;
    /* pointer-events left enabled so the build/deploy title tooltip fires
       on hover (see main.js). The badge sits in the h1's empty right-edge
       gutter, so taking hover focus here doesn't steal clicks from anything. */
}

h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

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

.btn-primary,
.btn-secondary {
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background: var(--accent-color);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: transform 0.1s, box-shadow 0.2s;
    clip-path: polygon(10% 0, 100% 0, 100% 80%, 90% 100%, 0 100%, 0 20%);
    width: 100%;
    max-width: 280px;
}

.btn-primary:focus,
.btn-secondary:focus,
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
    outline: none;
}

.btn-primary:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(255, 30, 30, 0.6);
}

.btn-secondary {
    background: #333;
}

.btn-secondary:hover {
    background: #444;
}

/* Vibe Jam button: webring portal green so it stands out from the
   regular menu options and ties visually to the green portal ring. */
#vibe-jam-btn {
    background: #28ff5a;
    color: #062a10;
    text-shadow: none;
    box-shadow: 0 0 18px rgba(40, 255, 90, 0.35);
}
#vibe-jam-btn:hover {
    background: #4dff7a;
    box-shadow: 0 0 28px rgba(40, 255, 90, 0.6);
}

.menu-options {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    width: 100%;
    padding: 0 2rem;
    align-items: center;
}

/* Persistent claim-reminder banner inside the main menu. Visible whenever
   the active player is unclaimed and has at least one valid lap on the
   leaderboard. Acts as a single big tap target (the whole banner is a
   button) since the user said to "keep pestering" — making it a button
   means missing the SAVE label still leads to claim. */
.claim-reminder.hidden { display: none; }
.claim-reminder {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: calc(100% - 4rem);
    max-width: 360px;
    margin: 0 auto;
    padding: 10px 14px;
    background: rgba(255, 181, 90, 0.12);
    border: 1px solid rgba(255, 181, 90, 0.55);
    border-radius: 6px;
    color: #ffd9a8;
    font-family: inherit;
    font-size: 0.82rem;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.claim-reminder:hover,
.claim-reminder:focus-visible {
    background: rgba(255, 181, 90, 0.22);
    border-color: rgba(255, 181, 90, 0.85);
    outline: none;
}
.claim-reminder-text {
    flex: 1 1 auto;
}
.claim-reminder-text strong {
    color: #ffe6c2;
    font-weight: 700;
}
.claim-reminder-cta {
    flex: 0 0 auto;
    padding: 6px 12px;
    background: #ffb55a;
    color: #1a1410;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
}
@media (max-width: 480px) {
    .claim-reminder {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .claim-reminder-cta {
        align-self: center;
    }
}

/* Title sponsor pill — hardcoded n8n branding for the current sponsorship
   term. When the term ends, remove the markup on /, /stats, leaderboard,
   badges, and the in-game HUD; CSS can stay or be removed with it. */
.title-sponsor-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 0.85rem;
    line-height: 1;
    letter-spacing: 0.1em;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 120ms ease, border-color 120ms ease;
}
.title-sponsor-pill:hover,
.title-sponsor-pill:focus-visible {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.3);
    outline: none;
}
.title-sponsor-pill .ts-label {
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
    font-size: 0.75rem;
}
.title-sponsor-pill .ts-logo {
    width: 1.4rem;
    height: 1.4rem;
    object-fit: contain;
    display: block;
}
.title-sponsor-pill .ts-name {
    font-weight: 600;
    color: #fff;
    letter-spacing: 0;
    font-size: 1.1rem;
}
/* Pull the menu pill up so it reads as part of the FULL SEND title block
   rather than floating in its own band of empty space. Top/bottom margins
   are balanced — the h1's own 1.5rem margin-bottom is absorbed so the pill
   has equal breathing room above and below. */
.menu-card > h1 + .title-sponsor-pill {
    margin-top: -1.25rem;
    margin-bottom: 1rem;
}

/* Menu fields (player name, track picker) */
.menu-field {
    width: 100%;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.menu-separator {
    width: 100%;
    max-width: 280px;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 0.2rem 0;
}

.player-name-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.3rem;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 1px;
    opacity: 0.7;
    /* Reserve space so the menu card doesn't shrink vertically before the
       username label gets populated by JS. */
    min-height: 1.2em;
}

.btn-icon {
    background: none;
    border: none;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s;
    padding: 0.2rem;
}

.btn-icon:hover {
    opacity: 1;
}

.music-toggle.muted {
    opacity: 0.35;
}

/* Horizontal strikethrough for the muted state — replaces
   text-decoration: line-through which doesn't apply to SVG content. */
.music-toggle.muted::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 18%;
    right: 18%;
    height: 1.5px;
    background: currentColor;
    pointer-events: none;
}

.account-corner-btn {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-main);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 0.45rem 0.75rem;
    min-height: 1.7rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.account-corner-btn:hover {
    color: #fff;
    border-color: rgba(255, 30, 30, 0.45);
    background: rgba(0, 0, 0, 0.55);
}

.account-corner-btn #player-name-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.bottom-toolbar {
    /* `fixed` (not `absolute`) so iOS Safari anchors us to the small
       (URL-bar-collapsed) visual viewport — same trick the Vibe Jam
       widget script uses. With `absolute` inside a 100%-height layer
       the toolbar ends up behind Safari's bottom URL bar on mobile.
       safe-area-inset-bottom adds a hair more clearance when the home
       indicator is visible. */
    position: fixed;
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    left: calc(1.25rem + env(safe-area-inset-left, 0px));
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.15rem;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 0.2rem 0.3rem;
}

.bottom-toolbar .btn-icon {
    line-height: 0;
    padding: 0.3rem;
    opacity: 0.55;
    position: relative;
    color: #fff;
    text-decoration: none;
}

/* Notification dot for toolbar buttons (e.g. unread admin reply on the
   suggestions icon). Anchored to the top-right of the icon's tap target.
   Sized small so it reads as a status indicator, not a count badge. */
.badge-dot {
    position: absolute;
    top: 0.15rem;
    right: 0.15rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #ff1e1e;
    box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.55);
    pointer-events: none;
}
.badge-dot[hidden] { display: none; }

.bottom-toolbar .btn-icon svg {
    width: 1.05rem;
    height: 1.05rem;
    display: block;
}

.bottom-toolbar .btn-icon:hover {
    opacity: 1;
}

.about-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    pointer-events: auto;
}

.about-modal.hidden {
    display: none;
}

.about-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    cursor: pointer;
}

.about-modal-card {
    position: relative;
    z-index: 1;
    max-width: min(420px, 100%);
    max-height: min(90vh, 100%);
    overflow: auto;
    /* Fully opaque (rather than --glass-bg's 0.85 alpha) so the photo and
       credit text are crisper, not muddied by menu art behind the modal. */
    background: rgb(20, 20, 25);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1.5rem 1.5rem 1.25rem;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.about-modal-close {
    position: absolute;
    top: 0.5rem;
    right: 0.65rem;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2rem;
}

.about-modal-close:hover {
    color: #fff;
}

.about-modal-heading {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--accent-color);
    text-transform: uppercase;
    margin: 0;
    margin-top: 0.25rem;
}

.about-modal-photo {
    width: 100%;
    max-height: min(52vh, 360px);
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.about-modal-text {
    font-size: 0.95rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
    padding: 0 0.25rem;
}

.about-modal-text .about-name {
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: underline;
}

.about-modal-credit {
    font-size: 0.7rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.45);
    margin: 0.25rem 0 0;
    letter-spacing: 0.02em;
}

.about-modal-credit a {
    color: inherit;
    text-decoration: underline;
}

.about-modal-discord {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0.03em;
    margin-top: 0.15rem;
}

.about-modal-ok {
    margin-top: 0.25rem;
    min-width: 140px;
}

/* ---------- Customise Car ---------- */
/* Lives inside the guest/claimed account panels, slotted right after the
   username row. Matches the main-menu field width so the CAR COLOR picker
   renders with the same 280px footprint as TRACK / CLASS. */
.account-car-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.account-car-section.hidden { display: none; }

/* Tiny top-down car used as the swatch in the color picker. Sized to match
   the old colored dot's footprint while preserving the car's 1:2 aspect. */
.color-row-car {
    width: 18px;
    height: 30px;
    flex-shrink: 0;
}

.menu-field-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 2px;
    opacity: 0.5;
    text-transform: uppercase;
    padding-left: 0.2rem;
}

/* ---------- Lap Picker ---------- */
.lap-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.lap-picker-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.lap-picker-btn:hover {
    background: rgba(255,255,255,0.18);
    border-color: var(--accent-color);
}
.lap-picker-value {
    font-size: 1.6rem;
    font-weight: 700;
    min-width: 2.5ch;
    text-align: center;
}

.menu-field-input {
    width: 100%;
    min-height: 50px;
    padding: 0.7rem 1rem;
    font-family: var(--font-main);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.menu-field-input:hover {
    border-color: var(--accent-color);
    box-shadow: 0 0 20px rgba(255, 30, 30, 0.15);
}

.menu-field-input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 20px rgba(255, 30, 30, 0.15);
}

/* Custom select (track picker) */
.custom-select {
    position: relative;
    width: 100%;
}

.custom-select-selected {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    font-family: var(--font-main);
    /* Mobile: kept smaller than .btn-primary so the dropdown reads as a
       setting rather than an action. The desktop media query below
       restores 1rem to pair with the larger desktop button text. */
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.custom-select-selected:hover {
    border-color: var(--accent-color);
    box-shadow: 0 0 20px rgba(255, 30, 30, 0.15);
}

@media (min-width: 600px) {
    .custom-select-selected {
        font-size: 1rem;
    }
}

#track-picker-text {
    flex: 1;
}

.custom-select-arrow {
    font-size: 0.7rem;
    opacity: 0.5;
    transition: transform 0.2s;
    flex-shrink: 0;
    margin-left: auto;
}

.custom-select.open .custom-select-arrow {
    transform: rotate(180deg);
}

.custom-select-options {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    max-height: 10rem;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    z-index: 100;
    backdrop-filter: blur(10px);
}

.custom-select.open .custom-select-options {
    display: block;
}

/* Track picker options are taller than color/nation rows (they include a
   28px thumbnail), so bump the max-height to fit 4 rows without scrolling. */
#track-picker-options {
    max-height: 13rem;
}

.track-thumb {
    display: block;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

.track-thumb-wrap {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.custom-select-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    font-family: var(--font-main);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.custom-select-option:hover {
    background: rgba(255, 30, 30, 0.15);
    color: #fff;
}

.custom-select-option.selected {
    color: var(--accent-color);
}

.custom-select-option.selected .track-thumb {
    filter: brightness(1.5);
}

.custom-select-options::-webkit-scrollbar {
    width: 6px;
}

.custom-select-options::-webkit-scrollbar-track {
    background: transparent;
}

.custom-select-options::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

/* Flag image (rendered by window.flagImg). Sized to the parent's
   font-size so contexts that previously used a flag emoji glyph stay
   visually consistent without per-site overrides. */
.flag-img {
    width: 1.2em;
    height: 1.2em;
    object-fit: contain;
    vertical-align: -0.2em;
    display: inline-block;
    user-select: none;
}

/* Nation picker */
.nation-flag-display {
    font-size: 1.2rem;
    line-height: 1;
    flex-shrink: 0;
}
.nation-flag-display .flag-img,
.nation-option-flag .flag-img,
.lb-flag .flag-img {
    /* Scale within the existing fixed-width slot */
    width: 1.2em;
    height: 1.2em;
}
.nation-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.8rem;
    cursor: pointer;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    transition: background 0.15s, color 0.15s;
}
.nation-option:hover {
    background: rgba(255, 30, 30, 0.15);
    color: #fff;
}
.nation-option.selected {
    color: var(--accent-color);
}
.nation-option-flag {
    font-size: 1.2rem;
    flex-shrink: 0;
}
.nation-option-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#nation-picker .custom-select-options {
    max-height: 200px;
}
.nation-search-wrap {
    padding: 0.4rem;
    position: sticky;
    top: 0;
    background: rgba(20, 20, 28, 0.98);
    z-index: 1;
}
.nation-search-input {
    width: 100%;
    padding: 0.4rem 0.6rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    outline: none;
}
.nation-search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Settings screen */
.settings-section {
    width: 100%;
    max-width: 320px;
    margin-bottom: 1rem;
}
.settings-heading {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--accent-color);
    margin: 0 0 0.6rem 0;
    text-transform: uppercase;
}
.settings-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}
.settings-label {
    flex: 0 0 100px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: right;
}
.settings-val {
    flex: 0 0 36px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: left;
}
.settings-slider {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.15);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    outline: none;
}
.settings-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--accent-color);
    cursor: pointer;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}
.settings-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--accent-color);
    cursor: pointer;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}
.settings-select {
    flex: 1;
    padding: 0.5rem 0.8rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.6) 50%),
                      linear-gradient(135deg, rgba(255,255,255,0.6) 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% - 2px),
                         calc(100% - 12px) calc(50% - 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 28px;
}
.settings-select:hover {
    border-color: var(--accent-color);
    background-color: rgba(255, 30, 30, 0.1);
}
.settings-select option {
    background: #1a1a1a;
    color: #fff;
}
.settings-key-btn {
    flex: 1;
    padding: 0.5rem 0.8rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    min-width: 80px;
}
.settings-key-btn:hover {
    border-color: var(--accent-color);
    background: rgba(255, 30, 30, 0.1);
}
.settings-key-btn.listening {
    border-color: var(--accent-color);
    background: rgba(255, 30, 30, 0.2);
    animation: pulse-border 1s infinite;
}
@keyframes pulse-border {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 30, 30, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(255, 30, 30, 0.1); }
}

.menu-actions {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    padding: 0 1rem;
    align-items: center;
}

/* Suggestions screen — single textarea + submit. Styled to match the rest
   of the menu card so it doesn't feel like a different page. */
.suggestions-blurb {
    width: 100%;
    max-width: 420px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: center;
    margin: 0 0 1rem 0;
}
.suggestion-textarea {
    width: 100%;
    max-width: 420px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: var(--text-color, #fff);
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    line-height: 1.45;
    padding: 0.7rem 0.9rem;
    resize: vertical;
    min-height: 8rem;
    outline: none;
}
.suggestion-textarea:focus {
    border-color: var(--accent-color, #ff1e1e);
}
.suggestion-status {
    width: 100%;
    max-width: 420px;
    min-height: 1.2em;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
}
.suggestion-status.is-error { color: #ff5c5c; }
.suggestion-status.is-success { color: #22c55e; }

/* Conversation thread shown above the textarea: prior suggestions and
   any owner replies. Scrolls when long so the form stays reachable. */
.suggestions-thread {
    width: 100%;
    max-width: 420px;
    margin: 0 0 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 16rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}
.suggestions-thread .thread-item {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
}
.suggestions-thread .thread-item.unread {
    border-color: rgba(255, 30, 30, 0.5);
    box-shadow: 0 0 0 1px rgba(255, 30, 30, 0.2) inset;
}
.suggestions-thread .thread-mine {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.4;
}
.suggestions-thread .thread-when {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 0.2rem;
}
.suggestions-thread .thread-reply {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}
.suggestions-thread .thread-reply-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 30, 30, 0.85);
    margin-bottom: 0.25rem;
}
.suggestions-thread .thread-reply-text {
    font-size: 0.9rem;
    color: #fff;
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.45;
}
.suggestions-thread .thread-reply-when {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 0.2rem;
}

/* Driver Selection */
.driver-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 15px;
    width: 100%;
    max-width: 320px;
    max-height: 55vh;
    overflow-y: auto;
    padding: 5px;
}

.driver-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.driver-card:hover {
    background: rgba(255, 40, 0, 0.2);
    border-color: #ff2800;
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
}

.driver-card .driver-name {
    font-size: 0.95rem;
    font-weight: 600;
}

.driver-card .driver-team {
    font-size: 0.75rem;
    opacity: 0.8;
}

.driver-card .driver-number {
    font-size: 0.8rem;
    opacity: 0.9;
}

/* Tyre Selection */
.tyre-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 15px;
    width: 100%;
    max-width: 320px;
    max-height: 50vh;
    overflow-y: auto;
    padding: 5px;
}

.tyre-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 12px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 14px;
}

.tyre-card:hover {
    background: rgba(255, 40, 0, 0.2);
    border-color: #ff2800;
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
}

.tyre-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: #000;
}

.tyre-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tyre-label {
    font-size: 1rem;
    font-weight: 600;
}

.tyre-description {
    font-size: 0.75rem;
    opacity: 0.75;
}

/* HUD */
#hud {
    background: none;
    backdrop-filter: none;
    justify-content: space-between;
    padding: 2rem;
    pointer-events: none;
}

.hud-top {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    align-items: flex-start;
}

/* Wrapper that keeps the title sponsor pill + HUD top row as a single flex
   child of #hud so #hud's `justify-content: space-between` continues to pin
   them to the top of the screen (previously, two separate flex children
   were spaced apart and pushed POS/LAP/TELEMETRY into the middle). */
.hud-top-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

/* Title sponsor pill rendered inside #hud (above POS/LAP/TELEMETRY).
   #hud has pointer-events: none, so re-enable on the link itself.
   Background is bumped to 0.55 (vs the 0.4 menu/leaderboard pills)
   because the in-game canvas behind it can be very light (tarmac, sky,
   sand) and the translucent default doesn't read on those surfaces.
   No backdrop-filter: blurring a region over an animated canvas forces
   Safari to readback + re-blur every frame, which dominated composite
   time during racing — opaque background does the legibility job for
   ~free.
   Hidden below 780px so the in-game HUD on phones isn't crowded. */
.hud-title-sponsor {
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.55);
    border-color: rgba(255, 255, 255, 0.35);
}
.hud-title-sponsor:hover,
.hud-title-sponsor:focus-visible {
    background: rgba(0, 0, 0, 0.7);
    border-color: rgba(255, 255, 255, 0.55);
}
.hud-title-sponsor .ts-label {
    color: rgba(255, 255, 255, 0.75);
}
@media (max-width: 780px) {
    .hud-title-sponsor {
        display: none;
    }
}

/* Multiplayer race waiting message */
.race-waiting-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--glass-bg);
    border: 2px solid var(--accent-color);
    border-radius: 12px;
    padding: 2rem 3rem;
    z-index: 10;
    animation: pulse 1.5s ease-in-out infinite;
}

.race-waiting-message span {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Loading overlay. Transparent backdrop so the menu canvas shows through
   while the auto-launch / scenery-prerender wait happens; the "Loading…"
   text gets a pill to stay legible against the moving track preview. */
.scenery-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    pointer-events: none;
}

.scenery-loading > span {
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
    color: #f0f0f0;
    font-family: 'Outfit', Arial, sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.scenery-loading.hidden { display: none; }

/* Auto-launch arrivals (?portal=true / ?play=true): show the loading pill
   pre-paint so the player isn't staring at a silent menu canvas while
   identity-init / track-load runs. _prerenderSceneryThenStart() drops the
   class once it takes over visibility control. */
html.portal-arrival #scenery-loading { display: flex; }

.start-lights {
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 5;
    pointer-events: none;
}

.start-light {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(60, 0, 0, 0.8); /* off state: dark red */
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.8);
    border: 3px solid #111;
    transition: all 0.1s ease;
}

.start-light.on {
    background: #ff1e1e;
    box-shadow: inset 0 -2px 6px rgba(0, 0, 0, 0.3), 0 0 25px rgba(255, 30, 30, 1), 0 0 50px rgba(255, 30, 30, 0.6);
    border: 3px solid #ff5555;
}

.hud-bottom-left {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lap-time-box {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 1rem 2rem;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.lap-time-value {
    font-size: 2.5rem;
    font-weight: 700;
    font-family: var(--font-main);
    letter-spacing: 1px;
    color: #22c55e; /* Green by default for time trials */
    text-shadow: 0 0 15px rgba(34, 197, 94, 0.4);
}

.best-lap-value {
    font-size: 1.8rem;
    font-weight: 700;
    font-family: var(--font-main);
    letter-spacing: 1px;
    color: #a855f7; /* Purple for best lap */
    text-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
}

/* Lap Times Panel */
.lap-times-panel {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    width: 220px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lap-history {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 0.5rem;
    min-height: 1.5rem;
}

.lap-history:empty {
    border-bottom: none;
    padding-bottom: 0;
    min-height: 0;
}

.lap-history-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-main);
    font-size: 1.1rem;
    font-weight: 500;
}

.lap-history-row .lap-num {
    opacity: 0.6;
    font-size: 0.9rem;
    min-width: 50px;
}

.lap-history-row .lap-time {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.lap-history-row.record .lap-time {
    color: #a855f7; /* Purple for track record */
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
}

.lap-history-row.pb .lap-time {
    color: #22c55e; /* Green for personal best */
    text-shadow: 0 0 10px rgba(34, 197, 94, 0.4);
}

.lap-history-row.ghost .lap-time {
    color: #f59e0b; /* Orange to match the leaderboard ghost car */
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}

.lap-history-row.invalid .lap-time {
    color: #ef4444; /* Red for invalid / deleted laps */
}

/* Any LAST row without a record/pb/invalid classification is a valid
   non-PB lap — shown in yellow. Other rows default to neutral. */
.lap-history-row.last:not(.record):not(.pb):not(.invalid) .lap-time {
    color: #fbbf24;
}

.current-lap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 0.25rem;
}

.current-lap .label {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-bottom: 0.25rem;
}

/* Row that holds the CURRENT label + class badge so they sit inline
   above the lap-time value. */
.current-lap-label-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.current-lap-label-row .label {
    margin-bottom: 0;
}
.current-lap-label-row .lap-class-badge {
    margin-left: 0; /* gap on the row container handles spacing */
}

.current-lap .lap-time-value {
    font-size: 2rem;
    font-variant-numeric: tabular-nums;
}

.position-box,
.lap-box {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 1rem 2rem;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.label {
    font-size: 0.8rem;
    font-weight: 300;
    opacity: 0.8;
}

.value {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

.total {
    font-size: 1.2rem;
    opacity: 0.7;
    font-weight: 500;
}

.hud-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
}

.telemetry {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
}

.speed-box {
    background: var(--glass-bg);
    padding: 1rem 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    text-align: right;
}

/* Lock the speed value to a 3-digit footprint so the HUD box doesn't
   resize as the number of digits changes. Tabular-nums keeps each digit
   the same width so the readout doesn't twitch between values. */
#speed-display {
    display: inline-block;
    min-width: 3ch;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.unit {
    display: block;
    font-size: 0.8rem;
    opacity: 0.7;
}

.gear-box {
    background: var(--accent-color);
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    font-size: 2rem;
    font-weight: 700;
    box-shadow: 0 0 15px rgba(255, 30, 30, 0.4);
}

/* Results Screen */
#results-list {
    width: 100%;
    max-width: 720px;
    margin: 10px 0;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 10px;
    max-height: 60vh;
    overflow-y: auto;
}

/* Multiplayer results table (position / name / time / best / avg / gap) */
.results-table {
    display: flex;
    flex-direction: column;
    width: 100%;
    font-size: 0.95rem;
}

.results-head,
.results-row {
    display: grid;
    grid-template-columns: 40px minmax(120px, 1fr) 110px 110px 90px 120px;
    align-items: center;
    padding: 8px 10px;
    gap: 6px;
}

.results-head {
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.results-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.results-row:last-child {
    border-bottom: none;
}

.results-row.is-self {
    background: rgba(255, 30, 30, 0.08);
}

.results-row .col-pos {
    font-weight: 700;
    color: var(--accent-color);
}

.results-row .col-name {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.results-row .col-name .color-chip {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex: 0 0 auto;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.results-row .col-time,
.results-row .col-best,
.results-row .col-avg,
.results-row .col-gap {
    font-variant-numeric: tabular-nums;
}

.results-row .col-gap {
    color: rgba(255, 255, 255, 0.75);
}

/* Full-screen multiplayer results (mirrors leaderboard layout) */
#results-screen.multiplayer {
    background: none;
    justify-content: flex-start;
    align-items: stretch;
    padding: 1.75rem 2rem 1.25rem;
    overflow-x: hidden;
}

#results-screen.multiplayer .menu-card {
    max-width: none;
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#results-screen.multiplayer #results-list {
    max-width: none;
    width: 100%;
    flex: 1;
    max-height: none;
}

#results-screen.multiplayer .results-head,
#results-screen.multiplayer .results-row {
    grid-template-columns: 50px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    font-size: 1rem;
    padding: 10px 14px;
}

.result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 1rem;
}

.result-row:last-child {
    border-bottom: none;
}

.result-row .pos {
    font-weight: 700;
    flex: 0 0 52px;
    min-width: 0;
    color: var(--accent-color);
    text-align: left;
}

.result-row .name {
    flex: 0 0 170px;
    text-align: left;
    padding-left: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.result-row .team {
    font-size: 1.5rem;
}

/* Leaderboard — full-screen table layout */
#leaderboard-screen {
    background: rgba(0, 0, 0, 0.46);
    justify-content: flex-start;
    align-items: stretch;      /* let the card take the full width */
    padding: 1.75rem 2rem 1.25rem;
    overflow-x: hidden;         /* guarantee no horizontal scrollbar */
}

.leaderboard-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* No gap — topbar handles its own bottom spacing via padding-bottom, and
       the header should sit flush against the first row (no empty strip
       between the header's bottom border and the first row's top). */
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
}

.leaderboard-topbar {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.leaderboard-title {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    margin: 0;
}

/* In-topbar track switcher. Reuses .custom-select styling but overrides the
   100%-wide, 50px-tall footprint of the main-menu pickers so it sits inline
   with the title and action buttons without dominating the topbar. */
.leaderboard-track-picker {
    width: auto;
    min-width: 200px;
    max-width: 280px;
}
.leaderboard-track-picker .custom-select-selected {
    min-height: 38px;
    padding: 0.35rem 0.75rem;
    font-size: 0.9rem;
    letter-spacing: 0.08em;
}
.leaderboard-track-picker .custom-select-options {
    /* The leaderboard screen has the full viewport to work with, so give the
       dropdown more room than the main-menu picker — ~6 rows visible before
       it starts scrolling. */
    max-height: 19.5rem;
}

.leaderboard-topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.leaderboard-compare-btn {
    padding: 0.5rem 1.1rem;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    max-width: none;
    width: auto;
}

.leaderboard-compare-btn.hidden {
    display: none;
}

.leaderboard-table-head,
.leaderboard-list .lb-row {
    display: grid;
    /* All flexible columns use minmax(0, Xfr) so nothing has an intrinsic
       min-width that could push the row wider than its container. Fixed-size
       columns (flag, actions, compare) keep their exact pixel widths. */
    grid-template-columns:
        minmax(0, 0.5fr)   /* # */
        minmax(0, 3fr)     /* driver (flag + name in one cell) */
        minmax(0, 1fr)     /* time */
        minmax(0, 1fr)     /* gap */
        minmax(0, 1.1fr)   /* set */
        100px              /* actions: 3x28 + 2x8 gap = 100 */
        44px;              /* compare */
    align-items: stretch;    /* let each cell fill the row so flex-centered text aligns on the row's midline */
    gap: 0.5rem;
    padding: 0 0.9rem;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Every cell is a flex container so content is centered on the row's midline.
   Stretching each cell (via grid align-items: stretch) and centering within
   avoids any drift from font-metric / baseline asymmetry. */
.lb-col {
    display: flex;
    align-items: center;
    min-width: 0;
}

.leaderboard-table-head {
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    height: 2.4rem;          /* explicit row height → cells stretch to fill, flex-centers cleanly */
    margin-top: 0.75rem;     /* breathing room below the topbar */
    background: rgba(8, 10, 12, 0.78);
    /* Header sits OUTSIDE the scroll container. Its right-padding is extended
       by the list's reserved scrollbar-gutter width so the grid columns line
       up with the rows below. --scrollbar-width is measured once at runtime
       (see Game.js), defaulting to 0 for overlay-scrollbar platforms. */
    padding-right: calc(0.9rem + var(--scrollbar-width, 0px));
}

.leaderboard-table-head .lb-col {
    font-weight: 600;
}

.leaderboard-table-head .lb-time,
.leaderboard-table-head .lb-gap,
.leaderboard-table-head .lb-set {
    justify-content: flex-end;
    font-variant-numeric: tabular-nums;
}

.leaderboard-table-head .lb-actions,
.leaderboard-table-head .lb-select {
    justify-content: center;
}

.leaderboard-list {
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    background: rgba(0, 0, 0, 0.28);
    /* Always reserve space for the scrollbar so the list's content width
       stays constant regardless of content length. The header compensates
       for this gutter via its padding-right (see .leaderboard-table-head). */
    scrollbar-gutter: stable;
}

.leaderboard-list .lb-row {
    font-size: 0.95rem;
    min-height: 2.6rem;    /* body rows a touch taller than the header */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.12s ease;
    background: rgba(0, 0, 0, 0.18);
}

.leaderboard-list .lb-row:nth-child(even) {
    background: rgba(0, 0, 0, 0.12);
}

.leaderboard-list .lb-row:hover {
    background: rgba(255, 255, 255, 0.055);
}

.leaderboard-list .lb-row.is-me {
    background: rgba(255, 30, 30, 0.16);
    border-left: 2px solid var(--accent-color);
    padding-left: calc(0.9rem - 2px);
}

/* The .is-me background is more specific than .lb-row:hover, so hover would
   otherwise have no visible effect. Bump the red tint on hover for parity. */
.leaderboard-list .lb-row.is-me:hover {
    background: rgba(255, 30, 30, 0.22);
}

.leaderboard-list .lb-pos {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    font-variant-numeric: tabular-nums;
}

.leaderboard-list .lb-row.is-record .lb-pos,
.leaderboard-list .lb-row.is-record .lb-time {
    color: #a855f7;
}

.leaderboard-list .lb-row.is-record .lb-time {
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
}

/* Player's personal best row — green to match the HUD's PB color palette.
   `is-my-pb` is set only on the first (fastest) row matching the player's
   username. If that same row is also the overall record (is-record), the
   record's purple styling wins via later-defined specificity — keep this
   rule ABOVE the record rules if you want PB-green to dominate; below to
   let purple win. We want purple to win for the "player holds record"
   case, so this rule lives AFTER is-record. */
.leaderboard-list .lb-row.is-my-pb:not(.is-record) .lb-time {
    color: #22c55e;
    text-shadow: 0 0 10px rgba(34, 197, 94, 0.35);
}

/* Driver cell — flag + name live in one grid cell with a fixed-width flag
   slot, so the name's x-position is identical whether the flag emoji is
   present or not (emoji glyph widths vary across rows/platforms). */
.leaderboard-list .lb-driver,
.leaderboard-table-head .lb-driver {
    gap: 0.6rem;
}

.lb-flag {
    flex: 0 0 1.4rem;       /* fixed-width slot regardless of flag intrinsic width */
    width: 1.4rem;
    text-align: center;
    font-size: 1.15rem;
    line-height: 1;
    /* No overflow:hidden — the tooltip pseudo-element is absolutely
       positioned below this span and would otherwise be clipped. */
    position: relative;
}

.lb-name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.leaderboard-list .lb-driver .lb-name {
    flex: 0 1 auto;
}

.lb-badge-counts {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    color: rgba(255, 255, 255, 0.68);
    font-family: 'Outfit', sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.lb-badge-count {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
}

.lb-badge-count-dot {
    width: 0.38rem;
    height: 0.38rem;
    border-radius: 999px;
    background: var(--lb-badge-dot, rgba(255, 255, 255, 0.5));
    box-shadow: 0 0 0.48rem var(--lb-badge-dot-glow, rgba(255, 255, 255, 0.16));
}

.lb-badge-count-gold {
    --lb-badge-dot: #ffd770;
    --lb-badge-dot-glow: rgba(255, 215, 112, 0.34);
}
.lb-badge-count-silver {
    --lb-badge-dot: #e3e8f0;
    --lb-badge-dot-glow: rgba(227, 232, 240, 0.26);
}
.lb-badge-count-bronze {
    --lb-badge-dot: #9c5a2e;
    --lb-badge-dot-glow: rgba(156, 90, 46, 0.36);
}
.lb-badge-count-title {
    color: rgba(255, 255, 255, 0.78);
}
.lb-badge-count-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.43rem;
    height: 0.43rem;
    color: #fff2a0;
    font-size: 0.56rem;
    line-height: 1;
    filter: drop-shadow(0 0 0.36rem rgba(255, 242, 160, 0.44));
}

/* Clickable driver column — opens that player's profile screen.
   The whole cell (flag + name + badges) is the click target so it's
   easy to tap on mobile, but only the name picks up the underline so
   the affordance reads cleanly. Focus ring for keyboard users via the
   role="button" + tabindex pair on the cell. */
.lb-driver-link {
    cursor: pointer;
}
.lb-driver-link:hover .lb-name,
.lb-driver-link:focus-visible .lb-name {
    text-decoration: underline;
    text-underline-offset: 2px;
    color: #fff;
}
.lb-driver-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.4);
    outline-offset: -2px;
    border-radius: 4px;
}

/* Warning badge for unverified (is_valid = 0) laps. Sits inside the driver
   column right after the name. Amber so it reads as "heads up" rather than
   error red — the lap is still visible, just pending review. */
.lb-pending {
    flex: 0 0 auto;
    margin-left: 0.4rem;
    color: #f59e0b;
    font-size: 0.95rem;
    line-height: 1;
    cursor: help;
}
.leaderboard-list .lb-row.is-pending .lb-name {
    opacity: 0.82;
}

.leaderboard-table-head .lb-driver .lb-name {
    /* Header just wants the "DRIVER" label aligned with driver names below —
       no bold, no letter-spacing overrides from row styling. */
    font-weight: 600;
    letter-spacing: 0.14em;
}

.leaderboard-list .lb-time {
    /* Column-flex so the optional normalized-time line stacks below the
       wall-clock time. justify-content: center centers the whole stack on
       the row's midline so single-line and two-line cells stay visually
       aligned across the row. align-items: flex-end right-justifies the
       text on the cross (horizontal) axis. */
    justify-content: center;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.05;
    gap: 1px;
}

/* Equivalent HARDCORE-frame time shown under a NEWBIE entry's wall-clock
   time, plus the matching normalized gap shown under the raw gap. Smaller,
   dimmer, cyan so they read as secondary skill-comparison values. The
   tooltip lives on the number itself — `cursor: help` cues the hover. */
.leaderboard-list .lb-time-equiv,
.leaderboard-list .lb-gap-equiv,
.profile-lap-list .lb-time-equiv {
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(34, 211, 238, 0.75);
    letter-spacing: 0.04em;
    cursor: help;
}
.leaderboard-list .lb-time-equiv:hover,
.leaderboard-list .lb-gap-equiv:hover,
.profile-lap-list .lb-time-equiv:hover {
    color: rgba(34, 211, 238, 1);
}

.leaderboard-list .lb-gap {
    /* Same column-flex / centered-stack treatment as .lb-time so the
       normalized gap line stacks under the raw gap and stays vertically
       centered on the row midline. */
    justify-content: center;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.05;
    gap: 1px;
}

.leaderboard-list .lb-set {
    justify-content: flex-end;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    font-variant-numeric: tabular-nums;
}

.leaderboard-list .lb-actions {
    justify-content: center;
    gap: 4px;
}

.leaderboard-list .lb-select {
    justify-content: center;
}

/* Pretty custom checkbox for compare selection */
.lb-compare {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    position: relative;
    transition: all 0.15s ease;
    margin: 0;
    flex-shrink: 0;
}

.lb-compare:hover {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.08);
}

.lb-compare:checked {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

.lb-compare:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.lb-compare:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.leaderboard-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.95rem;
}

.leaderboard-page-status {
    padding: 0.9rem 1rem 1rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ─── Instant styled tooltips ────────────────────────────────────────────
   Any element with `.has-tooltip` + `data-tooltip="…"` gets a tooltip
   rendered above it on hover/focus. No delay. Purely CSS — no JS needed.
   Variant: `.tt-right` anchors the tooltip to the element's right edge
   (useful for cells near the right side of the viewport so it doesn't
   clip off). */
.has-tooltip {
    position: relative;
}
.has-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    /* Render BELOW the element — tooltips above would get clipped by the
       leaderboard list's overflow-y: auto. Below stays inside the scroll
       container's visible bounds for every row except the very last. */
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 10, 14, 0.96);
    color: #fff;
    padding: 5px 9px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.08s ease;
    z-index: 50;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.has-tooltip:hover::after,
.has-tooltip:focus-visible::after {
    opacity: 1;
    visibility: visible;
}
.has-tooltip.tt-right::after {
    left: auto;
    right: 0;
    transform: none;
}
.has-tooltip.tt-left::after {
    left: 0;
    right: auto;
    transform: none;
}
.has-tooltip.tt-wrap::after {
    width: max-content;
    max-width: min(24rem, calc(100vw - 2rem));
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
    line-height: 1.25;
}
/* The version badge is already `position: absolute` against the h1 — restore
   that after .has-tooltip forces `position: relative` for its pseudo. The
   pseudo-element still anchors correctly because absolute elements also
   establish a containing block for their descendants. */
.title-version.has-tooltip {
    position: absolute;
}

/* Narrow screens: tighten columns, drop the SET column, smaller padding.
   Grid shows: pos, driver (flag+name combined), time, gap, actions, select. */
@media (max-width: 780px) {
    #leaderboard-screen {
        padding: 1rem 0.75rem 0.75rem;
    }
    .leaderboard-topbar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .leaderboard-title {
        display: none;
    }
    .leaderboard-table-head,
    .leaderboard-list .lb-row {
        /* On narrow screens: fit the compare checkbox + actions as fixed pixels;
           everything else shares the remaining space as fractional columns so
           the row can't overflow the viewport no matter how narrow it gets. */
        grid-template-columns:
            minmax(0, 0.6fr)
            minmax(0, 3fr)
            minmax(0, 1.1fr)
            minmax(0, 0.9fr)
            96px
            44px;
        gap: 0.4rem;
        padding: 0 0.5rem;
        font-size: 0.85rem;
    }
    .leaderboard-table-head .lb-set,
    .leaderboard-list .lb-set {
        display: none;
    }
    .leaderboard-list .lb-badge-counts {
        display: none;
    }
    .lb-btn {
        width: 24px;
        height: 24px;
        font-size: 0.62rem;
    }
    .lb-compare {
        width: 20px;
        height: 20px;
    }
    .lb-compare:checked::after {
        left: 5px;
        top: 2px;
        width: 5px;
        height: 9px;
    }
}

/* Desktop default: kebab hidden, three buttons sit inline. The popover
   wrapper is its own inline-flex container so the three lb-btn buttons
   sit side-by-side with consistent spacing. We deliberately AVOID
   `display: contents` here even though it would let the buttons
   participate in .lb-actions' flexbox directly — Safari has a
   long-standing bug (WebKit #190035 and friends) where <button>
   elements inside `display: contents` ancestors silently drop click
   events. Wrapping in our own flex container side-steps it entirely.
   Visual layout is unchanged: the gap moves from .lb-actions to
   .lb-actions-pop, and the popover is the only flex item left in
   .lb-actions on desktop because the kebab is display:none. */
.lb-btn.lb-actions-kebab { display: none; }
.lb-actions-pop {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Class label abbreviations (full vs short). Default = desktop = full;
   the mobile media query below flips them. Applies to both the filter
   tabs (lb-tab-*) and the per-row class badges (lb-class-badge-*). */
.lb-tab-short,
.lb-class-badge-short,
.lb-pb-short { display: none; }
.lb-tab-full,
.lb-class-badge-full,
.lb-pb-full { display: inline; }

/* Phone-sized screens: drop the GAP column, collapse the three action
   buttons behind a single ⋯ kebab whose popover holds them, and give
   the freed space back to the driver name column. */
@media (max-width: 480px) {
    .leaderboard-table-head,
    .leaderboard-list .lb-row {
        /* 5 columns (GAP is display:none'd below). The actions column
           is now just the kebab button (~32px) instead of three buttons. */
        grid-template-columns:
            minmax(0, 0.55fr)   /* # */
            minmax(0, 4fr)      /* driver */
            minmax(0, 1.4fr)    /* time */
            32px                /* actions kebab */
            32px;               /* compare */
        gap: 0.35rem;
        padding: 0 0.4rem;
        font-size: 0.82rem;
    }
    .leaderboard-table-head .lb-gap,
    .leaderboard-list .lb-gap {
        display: none;
    }
    .leaderboard-list .lb-row.is-me {
        padding-left: calc(0.4rem - 2px);
    }
    .leaderboard-table-head {
        height: 2.1rem;
        font-size: 0.62rem;
        letter-spacing: 0.1em;
        padding-right: calc(0.4rem + var(--scrollbar-width, 0px));
    }
    .leaderboard-list .lb-row {
        min-height: 2.4rem;
    }
    .leaderboard-list .lb-driver,
    .leaderboard-table-head .lb-driver {
        gap: 0.4rem;
    }
    .lb-flag {
        flex: 0 0 1.2rem;
        width: 1.2rem;
        font-size: 1rem;
    }
    .leaderboard-list .lb-time-equiv,
    .leaderboard-list .lb-gap-equiv,
    .profile-lap-list .lb-time-equiv {
        font-size: 0.65rem;
    }
    .lb-class-badge {
        min-width: 1.45rem;
        padding: 0.05rem 0.28rem;
    }
    .lb-badge-counts {
        gap: 0.24rem;
        font-size: 0.58rem;
    }
    .lb-badge-count {
        gap: 0.14rem;
    }
    .lb-badge-count-dot {
        width: 0.32rem;
        height: 0.32rem;
    }
    .lb-compare {
        width: 18px;
        height: 18px;
        border-radius: 4px;
    }
    .lb-compare:checked::after {
        left: 4px;
        top: 1px;
        width: 5px;
        height: 9px;
    }

    /* Action buttons → kebab dropdown on mobile.
       The .lb-actions cell anchors the absolutely-positioned popover. */
    .leaderboard-list .lb-actions {
        position: relative;
        overflow: visible;     /* let the popover spill outside the row */
    }
    .lb-btn.lb-actions-kebab {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        font-size: 1.1rem;
        line-height: 1;
        background: none;
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #fff;
        border-radius: 4px;
        cursor: pointer;
    }
    .lb-btn.lb-actions-kebab:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.4);
    }
    .lb-actions-pop {
        display: none;
        position: absolute;
        top: calc(100% + 4px);
        right: 0;
        z-index: 30;
        background: rgba(15, 15, 18, 0.97);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 6px;
        padding: 6px;
        gap: 6px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    }
    .lb-actions.is-open .lb-actions-pop {
        display: inline-flex;
    }
    /* Larger tap targets in the popover than in the inline desktop row. */
    .lb-actions-pop .lb-btn {
        width: 34px;
        height: 34px;
        font-size: 0.85rem;
    }
    /* Hide tooltips on mobile popover buttons — the icons are large and
       a tap toggles instantly, no hover needed. */
    .lb-actions-pop .lb-btn.has-tooltip::after { display: none; }
    .lb-driver .has-tooltip.tt-wrap::after {
        max-width: min(14rem, calc(100vw - 2rem));
    }

    /* Header has no kebab/popover — keep its actions cell empty. */
    .leaderboard-table-head .lb-actions { overflow: hidden; }

    /* HARDCORE / NEWBIE → H / N on phones. Tab text abbreviates so the
       three filter tabs + PB toggle fit on a single row; the inline row
       badge (shown on the ALL tab) abbreviates for the same reason. */
    .lb-tab-full,
    .lb-class-badge-full,
    .lb-pb-full { display: none; }
    .lb-tab-short,
    .lb-class-badge-short,
    .lb-pb-short { display: inline; }
}

/* Controls hint panel */
.controls-panel {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 0.8rem 1.15rem;
    font-family: 'Outfit', Arial, sans-serif;
    pointer-events: none;
    opacity: 0.7;
}

.controls-panel .controls-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--accent-color);
    margin-bottom: 0.45rem;
}

.controls-panel .controls-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
}

.controls-panel .controls-row span {
    margin-left: auto;
    text-align: right;
}

.controls-panel kbd {
    display: inline-block;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    padding: 1px 6px;
    font-size: 0.78rem;
    font-family: 'Outfit', Arial, sans-serif;
    color: #fff;
    min-width: 1.3rem;
    text-align: center;
}

/* Minimap */
#minimap-container {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid rgba(255, 30, 30, 0.6);
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
}

#minimap {
    display: block;
    width: 200px;
    height: 200px;
}

/* Multiplayer Lobby */
.lobby-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 2rem 0;
    width: 100%;
    padding: 0 2rem;
    align-items: center;
}

.multiplayer-room-card {
    max-width: 620px;
    align-items: stretch;
    gap: 1rem;
}

.room-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.room-topbar h2 {
    margin: 0 0 0.25rem;
}

.room-subtitle {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.62);
    text-transform: uppercase;
}

.room-code-inline {
    color: var(--accent-color);
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.room-phase-pill {
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 0.35rem 0.65rem;
    color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.room-phase-pill.is-hidden {
    display: none;
}

.room-phase-pill.is-racing {
    color: #ffd7d7;
    border-color: rgba(255, 30, 30, 0.55);
    background: rgba(255, 30, 30, 0.18);
}

.room-host-controls {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.room-host-controls.is-hidden,
.room-settings-summary.is-hidden {
    display: none;
}

.room-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.room-host-controls .menu-field,
.room-settings-grid .menu-field {
    margin: 0;
}

.room-settings-summary {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.055);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.92rem;
    line-height: 1.45;
}

.room-player-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.room-player-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
}

.room-player-name {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: #fff;
    font-weight: 700;
    overflow: hidden;
}

.room-player-name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.room-player-roles {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.room-player-role {
    display: inline-flex;
    align-items: center;
    min-height: 1.35rem;
    padding: 0 0.42rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.72rem;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.room-ready-state {
    justify-self: end;
    min-width: 82px;
    text-align: center;
    border-radius: 999px;
    padding: 0.28rem 0.55rem;
    color: rgba(255, 255, 255, 0.68);
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.room-ready-state.is-ready {
    color: #d9ffe4;
    background: rgba(34, 197, 94, 0.24);
}

.room-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    width: 100%;
}

.room-actions .btn-primary,
.room-actions .btn-secondary {
    max-width: none;
}

.room-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    transform: none;
    box-shadow: none;
}

@media (max-width: 560px) {
    .multiplayer-room-card {
        padding: 1.4rem;
    }

    .room-topbar,
    .room-actions {
        grid-template-columns: 1fr;
    }

    .room-topbar {
        display: grid;
    }

    .room-settings-grid {
        grid-template-columns: 1fr;
    }

    .room-actions {
        display: grid;
    }
}

.room-code-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin: 2rem 0;
}

.room-code {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.3rem;
    color: var(--accent-color);
    font-family: 'Courier New', monospace;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.8rem 1.2rem;
    border-radius: 8px;
    border: 2px solid var(--accent-color);
}

.room-hint {
    font-size: 0.8rem;
    opacity: 0.7;
    margin-top: 0.5rem;
}

.room-code-input {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin: 2rem 0;
}

.code-input {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.3rem;
    text-align: center;
    text-transform: uppercase;
    color: var(--text-color);
    background: rgba(255, 255, 255, 0.1);
    padding: 0.8rem 1rem;
    border-radius: 8px;
    border: 2px solid var(--glass-border);
    outline: none;
    width: 220px;
    font-family: 'Courier New', monospace;
}

.code-input:focus {
    border-color: var(--accent-color);
}

.code-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.connection-status {
    font-size: 0.9rem;
    opacity: 0.8;
    margin: 1rem 0;
    min-height: 1.5rem;
    padding: 0 1rem;
    text-align: center;
}

.connection-status.error {
    color: #ef4444;
}

.connection-status.success {
    color: #22c55e;
}

/* Waiting screen */
.waiting-message {
    text-align: center;
    margin: 2rem 0;
}

.waiting-message p {
    font-size: 1rem;
    opacity: 0.8;
    margin-bottom: 1rem;
}

.loading-dots {
    font-size: 2rem;
    color: var(--accent-color);
}

.loading-dots span {
    animation: blink 1.4s infinite;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes blink {
    0%, 20% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

/* Wider containers on desktop */
@media (min-width: 600px) {
    h1 {
        font-size: 3rem;
    }
    
    h2 {
        font-size: 1.8rem;
    }
    
    .btn-primary,
    .btn-secondary {
        max-width: 400px;
        padding: 1rem 2rem;
        font-size: 1.2rem;
    }

    .menu-field,
    .menu-separator {
        max-width: 400px;
    }


    .driver-grid {
        max-width: 450px;
        gap: 12px;
    }
    
    .driver-card {
        padding: 14px 16px;
    }
    
    .driver-card .driver-name {
        font-size: 1.1rem;
    }
    
    .driver-card .driver-team {
        font-size: 0.85rem;
    }
    
    .tyre-grid {
        max-width: 450px;
    }
    
    .tyre-card {
        padding: 16px 18px;
    }
    
    .tyre-circle {
        width: 44px;
        height: 44px;
    }
    
    .tyre-label {
        font-size: 1.1rem;
    }
    
    #results-list {
        max-width: 450px;
        padding: 15px;
    }
    
    .result-row {
        font-size: 1.1rem;
        padding: 10px;
    }
    
    .room-code {
        font-size: 2.5rem;
        letter-spacing: 0.4rem;
    }
    
    .code-input {
        font-size: 2rem;
        width: 260px;
    }
}

/* Extra small screens (very narrow phones) */
@media (max-width: 380px) {
    h1 {
        font-size: 1.8rem;
    }
    
    .btn-primary,
    .btn-secondary {
        padding: 0.7rem 1.2rem;
        font-size: 0.9rem;
    }
    
    .driver-grid {
        grid-template-columns: 1fr;
    }
    
    .room-code {
        font-size: 1.6rem;
    }
    
    .code-input {
        font-size: 1.5rem;
        width: 200px;
    }
}

/* ==================== Mobile Touch Controls ==================== */
.touch-controls {
    display: none; /* Hidden by default, shown on touch devices */
    position: absolute;
    /* Leave a gap at the bottom so the fixed-position Vibe Jam 2026
       widget link in the bottom-right corner stays clear of the pedals. */
    bottom: 80px;
    left: 0;
    right: 0;
    height: 40%;
    pointer-events: auto;
    z-index: 100;
}

/* Show on touch devices */
@media (hover: none) and (pointer: coarse) {
    .touch-controls {
        display: flex;
        justify-content: space-between;
    }

    #hud.hidden .touch-controls {
        display: none;
    }

    .controls-panel {
        display: none;
    }
    
    /* Adjust HUD for mobile */
    #hud {
        padding: 0.5rem;
    }
    
    /* Reserve space at the left for the lap-times panel and on the right
       for the minimap — both are absolutely-positioned siblings. Without
       a right margin, the gear badge ends up hidden behind the minimap. */
    .hud-top-wrap {
        margin-left: 160px;
        margin-right: 100px;
    }

    .hud-top {
        flex-wrap: wrap;
        gap: 6px;
    }

    .position-box,
    .lap-box {
        padding: 0.4rem 0.6rem;
    }

    .position-box .value,
    .lap-box .value {
        font-size: 1.3rem;
    }

    .position-box .total,
    .lap-box .total {
        font-size: 0.8rem;
    }

    .position-box .label,
    .lap-box .label {
        font-size: 0.6rem;
    }

    /* Combine speed + gear into a single visual overlay on mobile.
       The .telemetry flex container becomes the box; the inner
       speed-box / gear-box lose their individual chrome. */
    .telemetry {
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        border-radius: 8px;
        padding: 0.4rem 0.7rem;
        gap: 0.6rem;
        align-items: center;
    }

    .speed-box {
        background: none;
        border: none;
        padding: 0;
        width: 3.4rem;
        text-align: right;
    }

    .speed-box .value {
        font-size: 1.4rem;
    }

    .gear-box {
        background: var(--accent-color);
        box-shadow: 0 0 8px rgba(255, 30, 30, 0.4);
        width: 1.8rem;
        height: 1.8rem;
        padding: 0;
        border-radius: 6px;
        flex-shrink: 0;
    }

    .gear-box .value {
        color: #fff;
        font-size: 1.1rem;
    }

    /* Minimap smaller on mobile */
    #minimap-container {
        top: 10px;
        right: 10px;
        padding: 4px;
    }

    #minimap {
        width: 80px;
        height: 80px;
    }

    /* Lap times panel — top-left corner */
    .lap-times-panel {
        bottom: auto;
        top: 10px;
        left: 10px;
        width: 140px;
        padding: 0.4rem 0.5rem;
        transform: none;
    }
    
    .lap-history-row {
        font-size: 0.85rem;
    }
    
    .lap-history-row .lap-num {
        font-size: 0.75rem;
        min-width: 40px;
    }
    
    .current-lap .lap-time-value {
        font-size: 1.3rem;
    }
    
    .current-lap .label {
        font-size: 0.65rem;
    }
    
    /* Start lights smaller */
    .start-lights {
        top: 12%;
        gap: 8px;
    }
    
    .start-light {
        width: 16px;
        height: 16px;
    }
}

/* Steering zones (left side): a column with an action row on top
   (Restart / Menu) and the left/right arrow zones below. */
.touch-steering {
    display: flex;
    flex-direction: column;
    width: 45%;
    height: 100%;
    gap: 6px;
}

.touch-actions {
    display: flex;
    gap: 6px;
    height: 36px;
    flex-shrink: 0;
}

.touch-action-btn {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.85);
    border-radius: 8px;
    font-family: var(--font-main);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0;
    pointer-events: auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.1s, border-color 0.1s;
}

.touch-action-btn.active {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.touch-steering-arrows {
    display: flex;
    flex: 1;
    min-height: 0;
}

.steer-zone {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.1s;
}

.steer-left {
    border-radius: 20px 0 0 0;
}

.steer-right {
    border-radius: 0 20px 0 0;
}

.steer-zone.active {
    background: rgba(255, 255, 255, 0.2);
}

.steer-arrow {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
}

.steer-zone.active .steer-arrow {
    color: rgba(255, 255, 255, 0.8);
}

/* Pedals (right side) */
.touch-pedals {
    display: flex;
    flex-direction: column;
    width: 30%;
    height: 100%;
    gap: 4px;
}

.pedal {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    transition: all 0.1s;
    border: 2px solid transparent;
}

.pedal-gas {
    background: rgba(34, 197, 94, 0.3);
    border-color: rgba(34, 197, 94, 0.5);
}

.pedal-gas.active {
    background: rgba(34, 197, 94, 0.6);
    border-color: rgba(34, 197, 94, 0.9);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
}

.pedal-brake {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.5);
}

.pedal-brake.active {
    background: rgba(239, 68, 68, 0.6);
    border-color: rgba(239, 68, 68, 0.9);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
}

.pedal-label {
    font-size: 1.5rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    pointer-events: none;
    letter-spacing: 2px;
}

.pedal.active .pedal-label {
    color: rgba(255, 255, 255, 1);
}

/* Landscape orientation adjustments for touch devices */
@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
    .touch-controls {
        height: 45%;
    }
    
    .lap-times-panel {
        top: 10px;
        bottom: auto;
        left: 10px;
    }

    #minimap-container {
        top: 5px;
        right: 5px;
    }

    #minimap {
        width: 80px;
        height: 80px;
    }

    .hud-top {
        gap: 5px;
    }
}

/* Portrait orientation for touch devices */
@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
    .touch-controls {
        height: 35%;
    }

    .lap-times-panel {
        top: 10px;
        bottom: auto;
    }
}

/* Leaderboard flag — fixed column width so usernames align whether
   the row has a flag or not. */
.lb-flag {
    font-size: 1.1rem;
    flex-shrink: 0;
    display: inline-block;
    width: 1.75rem;
    text-align: center;
}

/* Leaderboard action buttons */
.lb-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
    padding: 0;
    /* Spacing between buttons comes from .lb-actions' flex gap; no margin-left here
       (otherwise the first button adds 4px of phantom lead space that can push the
       row past its column min-width and trigger horizontal overflow). */
}

.lb-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 1rem;
    gap: 6px;
}

.result-row .time {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    margin-left: auto;
}

/* ---------- Account + Login UI ---------- */

.menu-field-error {
    color: #ff5a5a;
    font-size: 0.8rem;
    margin-top: 6px;
    text-align: center;
    min-height: 1em;
}
.menu-field-error.hidden { display: none; }

.link-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-family: inherit;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-top: 4px;
}
.link-btn:hover {
    color: #ff1e1e;
}

.account-panel.hidden { display: none; }
/* Edit panel mirrors the welcome-screen .menu-options layout so inputs and
   the country picker render at the same 280px width. */
#account-panel-edit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    padding: 0 2rem;
}
#account-panel-edit.hidden { display: none; }

.account-row {
    display: flex;
    align-items: center;
    padding: 10px 0;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.account-row-label {
    flex: 0 0 110px;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
}
.account-row-value {
    flex: 1 1 auto;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #fff;
}
.account-status-guest { color: rgba(255, 255, 255, 0.5); }
.account-claimed-badge {
    background: #ff1e1e;
    color: #fff;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    font-weight: 700;
}
.account-edit-username {
    flex: 0 0 auto;
    margin-left: 4px;
}

.account-explainer {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    line-height: 1.45;
    margin: 16px 0;
    text-align: center;
}
.account-explainer.account-warning {
    color: #ffb55a;
    border: 1px solid rgba(255, 181, 90, 0.4);
    background: rgba(255, 181, 90, 0.08);
    padding: 10px 12px;
    border-radius: 4px;
}

.account-code-display {
    font-family: 'Courier New', Courier, monospace;
    font-size: 2.2rem;
    letter-spacing: 0.3em;
    text-align: center;
    padding: 18px 12px;
    margin: 12px 0 18px;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(255, 30, 30, 0.6);
    border-radius: 6px;
    color: #fff;
    font-weight: 700;
    user-select: all;
}

.account-code-autosave-note {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    text-align: center;
    margin: -8px 0 14px;
    min-height: 1em;
}

/* Two-step claim flow: passkey-first, then backup recovery code.
   Both steps live inside #account-panel-code and only one is visible
   at a time. Hide rule needs to override flex/block defaults. */
.account-code-step.hidden,
.account-passkeys-section.hidden { display: none; }
.account-code-step {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* Subtle text-button used for the "skip" link under ADD PASSKEY. */
.btn-link {
    background: none;
    border: none;
    color: rgba(220, 240, 255, 0.7);
    font-size: 0.82rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 6px 4px;
    text-align: center;
    font-family: inherit;
}
.btn-link:hover { color: rgba(255, 255, 255, 0.95); }
.account-code-skip-link { margin-top: -2px; align-self: center; }
.account-passkey-status {
    color: rgba(220, 240, 255, 0.85);
    font-size: 0.8rem;
    text-align: center;
    margin: 6px 0;
    min-height: 1em;
}
.account-passkeys-section {
    margin: 14px 0 4px;
}
.account-passkeys-header {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    margin-bottom: 6px;
}
.account-passkeys-list {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.account-passkey-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
}
.account-passkey-label {
    color: #fff;
    font-size: 0.85rem;
    flex: 0 0 auto;
}
.account-passkey-meta {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    flex: 1 1 auto;
    text-align: right;
}
.account-passkey-remove {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    line-height: 1;
    font-size: 1.1rem;
}
.account-passkey-empty {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    text-align: center;
    padding: 6px 0;
}

/* Login-modal passkey shortcut: the button is the modal's primary CTA
   when WebAuthn is available, with the username/code form sitting below
   it as a fallback. The "or" divider mirrors the visual idiom users
   expect from social-login screens. */
.login-passkey-row.hidden { display: none; }
.login-passkey-row {
    margin-bottom: 16px;
}
.login-passkey-row .btn-primary {
    width: 100%;
}
.login-passkey-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 4px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.login-passkey-divider::before,
.login-passkey-divider::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
}

.account-qr-container {
    display: flex;
    justify-content: center;
    padding: 16px;
    background: #fff;
    border-radius: 6px;
    margin: 12px auto;
    width: fit-content;
}
.account-qr-container.hidden { display: none; }
.account-qr-container svg {
    display: block;
    width: 150px;
    height: 150px;
}
/* Square icon button for the QR toggle. Sized to match COPY in the
   pair-url row so the three controls align flush. */
.account-pair-qr-btn {
    flex: 0 0 auto;
    width: auto !important;
    max-width: none !important;
    padding: 0 10px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.account-pair-qr-btn svg {
    width: 16px;
    height: 16px;
}
.account-pair-qr-btn[aria-expanded="true"] {
    background: #555;
}

.account-pair-url-wrap {
    display: flex;
    gap: 8px;
    align-items: stretch;
    margin: 12px 0;
    width: 100%;
}
.account-pair-url-wrap input {
    flex: 1 1 auto;
    min-width: 0;                /* let flex shrink past intrinsic width */
    font-size: 0.8rem;
    /* URL should stay lowercase — the shared .menu-field-input rule
       uppercases text, which turns pair URLs into unreadable shouty caps. */
    text-transform: none;
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 0;
}
.account-pair-url-wrap .btn-secondary {
    flex: 0 0 auto;
    width: auto;                 /* override .btn-secondary width:100% */
    max-width: none;
    padding: 0 16px;
    font-size: 0.75rem;
}

/* ---------- Login modal variations ---------- */

.login-modal-card {
    max-width: 420px;
}
.login-code-input {
    text-transform: uppercase;
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 0.25em;
    font-size: 1.1rem;
    text-align: center;
}

/* ---------- Game-class toggle (NEWBIE / HARDCORE) ---------- */

.class-toggle {
    display: flex;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.class-toggle-btn {
    flex: 1;
    background: transparent;
    color: rgba(255, 255, 255, 0.62);
    border: none;
    /* Vertical padding and font size are intentionally tighter than
       .btn-primary so the toggle reads as a setting rather than an action.
       The desktop media query below restores the slightly larger sizing
       that pairs with the larger desktop button height. */
    padding: 0.35rem 0.75rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.class-toggle-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

/* NEWBIE label always reads cyan so the class is visually identifiable
   even when the toggle isn't active. Hover keeps the cyan tint (just
   brighter) instead of going to white, so the color identity is stable. */
.class-toggle-btn[data-class="newbie"] {
    color: #67e8f9;
}
.class-toggle-btn[data-class="newbie"]:hover {
    color: #a5f3fc;
}

.class-toggle-btn.is-active[data-class="newbie"] {
    background: #22d3ee;
    color: #062a3a;
}

/* Symmetric to NEWBIE: HARDCORE label always reads red so the class is
   identifiable from its color before you even read the word. */
.class-toggle-btn[data-class="hardcore"] {
    color: #ff5c5c;
}
.class-toggle-btn[data-class="hardcore"]:hover {
    color: #ff8a8a;
}

.class-toggle-btn.is-active[data-class="hardcore"] {
    background: #ff2828;
    color: #fff;
}

/* Restore the slightly taller toggle padding on desktop, where the
   surrounding buttons grow (.btn-primary padding bumps in the
   min-width: 600px block above). Lives here rather than in that block
   so it appears after the base .class-toggle-btn rule and actually wins
   the cascade. */
@media (min-width: 600px) {
    .class-toggle-btn {
        padding: 0.55rem 0.75rem;
        font-size: 0.85rem;
    }
}

/* ---------- Leaderboard class tabs + per-row badge ---------- */

.leaderboard-class-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0.4rem 0 0.6rem;
    padding: 0 0.2rem;
}

/* PB-only toggle sits on the same row as the class tabs, flush right. It
   reuses the tab look for visual consistency but with its own colour so it
   never gets mistaken for a class selector. */
.lb-pb-toggle {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 0.4rem 0.85rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.lb-pb-toggle:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.09);
}

.lb-pb-toggle.is-active {
    background: rgba(250, 204, 21, 0.18);
    border-color: rgba(250, 204, 21, 0.55);
    color: #fde68a;
}

.lb-class-tab {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 0.4rem 0.85rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.lb-class-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.09);
}

/* HARDCORE tab text always reads red to match the class identity. */
.lb-class-tab[data-class="hardcore"] {
    color: #ff5c5c;
}
.lb-class-tab[data-class="hardcore"]:hover {
    color: #ff8a8a;
}
.lb-class-tab[data-class="hardcore"].is-active {
    background: rgba(255, 30, 30, 0.18);
    border-color: rgba(255, 60, 60, 0.55);
    color: #ff8a8a;
}

/* NEWBIE tab text always reads cyan to match the class identity. */
.lb-class-tab[data-class="newbie"] {
    color: #67e8f9;
}
.lb-class-tab[data-class="newbie"]:hover {
    color: #a5f3fc;
}
.lb-class-tab[data-class="newbie"].is-active {
    background: rgba(34, 211, 238, 0.18);
    border-color: rgba(34, 211, 238, 0.55);
    color: #a5f3fc;
}

.lb-class-tab[data-class="all"].is-active {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
}

.lb-class-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    min-width: 4.65rem;
    box-sizing: border-box;
    padding: 0.05rem 0.4rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    border-radius: 3px;
    vertical-align: middle;
}

.lb-class-badge.lb-class-newbie {
    background: rgba(34, 211, 238, 0.18);
    color: #67e8f9;
    border: 1px solid rgba(34, 211, 238, 0.45);
}

.lb-class-badge.lb-class-hardcore {
    background: rgba(255, 40, 40, 0.18);
    color: #ff5c5c;
    border: 1px solid rgba(255, 40, 40, 0.45);
}

/* Smaller variant used inside the in-race HUD's PB row. */
.lap-class-badge {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0 0.3rem;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    border-radius: 3px;
    vertical-align: middle;
}

.lap-class-badge.lb-class-newbie {
    background: rgba(34, 211, 238, 0.20);
    color: #67e8f9;
}

.lap-class-badge.lb-class-hardcore {
    background: rgba(255, 40, 40, 0.20);
    color: #ff5c5c;
}

/* =====================================================================
   Track Editor
   ===================================================================== */
.track-editor {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    font-family: var(--font-main);
    color: #fff;
}

.track-editor.hidden { display: none; }

.track-editor .te-topbar,
.track-editor .te-sidebar,
.track-editor .te-status {
    pointer-events: auto;
}

.track-editor .te-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 52px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    background: rgba(15, 15, 18, 0.92);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
}

.track-editor .te-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.track-editor .te-spacer { flex: 1; }

.track-editor .te-logo {
    color: var(--accent-color);
    font-weight: 700;
    letter-spacing: 0.06em;
    font-size: 14px;
    margin-right: 6px;
}

.track-editor .te-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.track-editor .te-input,
.track-editor .te-select {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 5px 8px;
    font-family: inherit;
    font-size: 13px;
    outline: none;
    min-width: 0;
}

.track-editor .te-input:focus,
.track-editor .te-select:focus {
    border-color: var(--accent-color);
}

.track-editor .te-input-num { width: 70px; text-align: center; }
.track-editor .te-input-text { flex: 1; width: 120px; }
.track-editor .te-input-color {
    width: 42px;
    height: 30px;
    padding: 2px;
    cursor: pointer;
}

.track-editor .te-btn {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    padding: 6px 10px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    text-transform: uppercase;
    transition: background 120ms ease, border-color 120ms ease;
}

.track-editor .te-btn:hover { background: rgba(255, 255, 255, 0.16); }
.track-editor .te-btn:disabled,
.track-editor .te-btn:disabled:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.42);
    cursor: not-allowed;
}
.track-editor .te-btn-primary {
    background: var(--accent-color);
    border-color: var(--accent-color);
}
.track-editor .te-btn-primary:hover { background: #ff4a4a; }
.track-editor .te-btn-danger {
    background: rgba(255, 60, 60, 0.18);
    border-color: rgba(255, 60, 60, 0.4);
    color: #ff8c8c;
}
.track-editor .te-btn-danger:hover { background: rgba(255, 60, 60, 0.28); }

.track-editor .te-sidebar {
    position: absolute;
    top: 64px;
    left: 12px;
    width: 224px;
    background: rgba(15, 15, 18, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px;
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
}

.track-editor .te-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 8px;
}

.track-editor .te-tools {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.track-editor .te-tool {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    border-radius: 6px;
    padding: 8px 6px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

.track-editor .te-tool:hover { background: rgba(255, 255, 255, 0.12); }

.track-editor .te-tool.is-active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
    box-shadow: 0 0 0 2px rgba(255, 30, 30, 0.25);
}

.track-editor .te-tool[data-surface="grass"].is-active  { background: #1a8a2c; border-color: #1a8a2c; }
.track-editor .te-tool[data-surface="gravel"].is-active { background: #8b7752; border-color: #8b7752; }
.track-editor .te-tool[data-surface="sand"].is-active   { background: #c9aa55; border-color: #c9aa55; color: #2a1f00; }

.track-editor .te-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.track-editor .te-row-stack {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.track-editor .te-row-tight { margin-bottom: 0; }
.track-editor .te-row-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.track-editor .te-value {
    font-weight: 700;
    color: var(--accent-color);
}

.track-editor .te-help {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 11px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.75);
}

.track-editor .te-help b {
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
    padding: 1px 5px;
    border-radius: 3px;
    margin-right: 2px;
}

.track-editor .te-status {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 12px;
    letter-spacing: 0.04em;
    max-width: 80%;
    text-align: center;
}


/* ------------------------------------------------------------------ */
/* Language picker (i18n)                                              */
/* ------------------------------------------------------------------ */

/* Toolbar language button: hosts the heroicons globe SVG. Sized like the
   other bottom-toolbar icons so it lines up visually. */
.lang-toggle-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    line-height: 0;
}

.lang-toggle-flag svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Language list inside the modal. Uses the existing .about-modal-card
   shell for backdrop/positioning; only the inner list needs styling. */
.lang-modal-card {
    max-width: min(360px, 100%);
}

.lang-modal-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
    max-height: 60vh;
    overflow-y: auto;
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    color: #fff;
    font: inherit;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.lang-option:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.18);
}

.lang-option.is-active {
    background: rgba(255, 30, 30, 0.18);
    border-color: var(--accent-color);
}

.lang-option-flag {
    width: 24px;
    height: 16px;
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.08);
    line-height: 0;
}

.lang-option-flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lang-option-name {
    font-size: 0.95rem;
    font-weight: 600;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lang-option-native {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    margin-left: auto;
    font-weight: 400;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 0.5rem;
}

/* =====================================================================
   BADGES
   Two surfaces:
     1. Viewer modal — read-only grid of all the badges the player has
        earned (and a locked silhouette for ones they haven't yet).
     2. Earned toast — slides in from the right when the server reports
        a newly-awarded badge in any API response.
   ===================================================================== */

/* ----- Badge viewer ----- */

#badges-modal {
    align-items: stretch;
    justify-content: flex-start;
    padding: 1.75rem 2rem 1.25rem;
    background: rgba(0, 0, 0, 0.46);
    overflow-x: hidden;
}

/* Full-screen, leaderboard-like awards surface. The card acts as the
   page frame while the inner list behaves like a grouped table. */
.badges-modal-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    max-width: none;
    max-height: none;
    height: auto;
    padding: 0;
    gap: 0;
    align-items: stretch;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.badges-modal-topbar {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.badges-modal-title-block {
    min-width: 0;
    flex: 0 1 auto;
}

.badges-modal-title {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    margin: 0;
    color: #fff;
}

.badges-modal-summary {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-left: auto;
}

.badges-modal-summary-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2rem;
    padding: 0.4rem 0.85rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.badges-modal-summary-chip::before {
    content: '';
    flex: 0 0 auto;
    width: 0.46rem;
    height: 0.46rem;
    border-radius: 999px;
    background: var(--summary-chip-dot, rgba(255, 255, 255, 0.55));
    box-shadow: 0 0 0.55rem var(--summary-chip-glow, rgba(255, 255, 255, 0.18));
}
.badges-modal-summary-chip strong {
    color: #fff;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}
.badges-modal-summary-chip.tier-bronze {
    --summary-chip-dot: #9c5a2e;
    --summary-chip-glow: rgba(156, 90, 46, 0.36);
    border-color: rgba(156, 90, 46, 0.38);
}
.badges-modal-summary-chip.tier-silver {
    --summary-chip-dot: #e3e8f0;
    --summary-chip-glow: rgba(227, 232, 240, 0.28);
    border-color: rgba(227, 232, 240, 0.3);
}
.badges-modal-summary-chip.tier-gold {
    --summary-chip-dot: #ffd770;
    --summary-chip-glow: rgba(255, 215, 112, 0.34);
    border-color: rgba(255, 215, 112, 0.35);
}
.badges-modal-summary-chip.tier-title {
    --summary-chip-dot: #fff2a0;
    --summary-chip-glow: rgba(255, 242, 160, 0.32);
    border-color: rgba(255, 242, 160, 0.32);
}
.badges-modal-summary-chip.tier-title::before {
    content: '★';
    width: 0.46rem;
    height: 0.46rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--summary-chip-dot);
    font-size: 0.54rem;
    line-height: 1;
}

.badges-modal-back {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}

@media (max-width: 760px) {
    #badges-modal {
        padding: 1rem 0.75rem 0.75rem;
    }
    .badges-modal-card {
        max-width: none;
        height: auto;
        max-height: none;
    }
    .badges-modal-topbar {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 0.95rem;
    }
    .badges-modal-title {
        font-size: 1.15rem;
    }
    .badges-modal-summary {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }
    .badges-modal-summary-chip {
        min-height: 1.75rem;
        padding: 0.28rem 0.45rem;
        font-size: 0.56rem;
    }
    .badges-modal-summary-chip strong {
        font-size: 0.7rem;
    }
    .badges-modal-back {
        margin-left: auto;
    }
}

/* ----- Earned-badge celebration ----- */
/* Anchored to the right edge, slotted UNDER the in-race minimap (which
   sits at top:20px right:20px and is ~220px tall with padding). On menu
   screens the minimap isn't drawn but we keep the same offset so the
   toast appears in a consistent spot regardless of context — important
   for in-race ghost races, replay viewing, and telemetry compare, where
   the minimap is critical for spatial awareness and the toast must not
   cover it. The container itself is pointer-events:none so the gaps
   between cards never block clicks underneath; individual cards opt back
   in so their clear buttons remain usable. */
.badge-earned-stack {
    position: fixed;
    top: calc(260px + env(safe-area-inset-top, 0px));
    right: calc(1.25rem + env(safe-area-inset-right, 0px));
    z-index: 6000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    pointer-events: none;
    width: min(380px, calc(100vw - 2rem));
    max-height: max(12rem, calc(100vh - 290px - env(safe-area-inset-top, 0px)));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.1rem 0.15rem 0.1rem 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.badge-earned-stack::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Each toast is a tier-tinted celebration card with badge art on the left
   and a 3-line text block on the right. The two CSS custom properties
   (--tier-glow, --tier-edge) are set inline by Game.js based on the
   badge's tier; everything else stays static so the rendering pipeline is
   purely CSS once Game.js plops the element in. */
.badge-earned-toast {
    /* Persistent until the player clears it. The stack's empty space stays
       click-through, while the card itself accepts pointer events for the
       close button. */
    pointer-events: auto;
    position: relative;
    background:
        linear-gradient(135deg, rgba(20, 20, 25, 0.97) 0%, rgba(28, 24, 36, 0.97) 100%);
    border: 1px solid var(--tier-edge, rgba(255, 255, 255, 0.18));
    border-radius: 14px;
    padding: 0.85rem 2.35rem 0.85rem 0.95rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.55),
        0 0 30px -10px var(--tier-glow, rgba(255, 206, 59, 0.55)),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    width: 100%;
    /* Entrance: slid in from the right + scaled-down + invisible. JS
       adds .show next frame to trigger the animation. The cubic-bezier
       overshoots slightly so the card "lands" with a touch of bounce —
       feels celebratory without being cartoonish. */
    opacity: 0;
    transform: translateX(24px) scale(0.92);
    transition:
        opacity 0.28s ease,
        transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.badge-earned-toast.show {
    opacity: 1;
    transform: translateX(0) scale(1);
}
.badge-earned-toast.dismissing {
    opacity: 0;
    transform: translateX(20px) scale(0.96);
    transition:
        opacity 0.22s ease-in,
        transform 0.22s ease-in;
}

.badge-earned-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    width: 1.45rem;
    height: 1.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition:
        background 0.16s ease,
        color 0.16s ease,
        border-color 0.16s ease,
        transform 0.16s ease;
}
.badge-earned-close:hover,
.badge-earned-close:focus-visible {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}
.badge-earned-close:active { transform: scale(0.94); }

.badge-earned-toast .badge-earned-art {
    width: 72px;
    height: 72px;
    flex: 0 0 auto;
    line-height: 0;
    /* Soft tier-color drop-shadow so the badge feels like it's emitting
       light, not just sitting on the card. */
    filter: drop-shadow(0 0 14px var(--tier-glow, rgba(255, 206, 59, 0.55)));
}
.badge-earned-toast .badge-earned-art svg { width: 100%; height: 100%; }

.badge-earned-toast .badge-earned-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.badge-earned-toast .badge-earned-eyebrow {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--accent-color);
    font-weight: 700;
}
.badge-earned-toast .badge-earned-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    letter-spacing: 0.01em;
    /* Wrap up to two lines for longer badge names like "Multiplayer
       Rookie" etc., then ellipsize. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.badge-earned-toast .badge-earned-tier {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
}
.badge-earned-toast .badge-earned-tier.tier-bronze   { color: #f1ad6a; }
.badge-earned-toast .badge-earned-tier.tier-silver   { color: #e3e8f0; }
.badge-earned-toast .badge-earned-tier.tier-gold     { color: #ffd770; }

.badge-earned-toast .badge-earned-desc {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Phones: the minimap shrinks (see `@media (max-width:600px) #minimap`),
   so the toast can ride higher. Span the screen minus a margin so the
   card reads as a "full-width pill" rather than a corner sliver. */
@media (max-width: 600px) {
    .badge-earned-stack {
        top: calc(170px + env(safe-area-inset-top, 0px));
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
        align-items: stretch;
        max-height: max(12rem, calc(100vh - 200px - env(safe-area-inset-top, 0px)));
        padding-right: 0;
    }
    .badge-earned-toast {
        padding: 0.7rem 2.15rem 0.7rem 0.7rem;
        gap: 0.7rem;
    }
    .badge-earned-toast .badge-earned-art { width: 60px; height: 60px; }
    .badge-earned-toast .badge-earned-name { font-size: 1rem; }
}

/* Reduced-motion users get a flat fade — no scale, no overshoot. The
   badge is still announced, just without the bouncy entrance. */
@media (prefers-reduced-motion: reduce) {
    .badge-earned-toast {
        transition: opacity 0.2s ease;
        transform: none;
    }
    .badge-earned-toast.show       { transform: none; }
    .badge-earned-toast.dismissing { transform: none; }
}

/* Router app pages. These first-class views cover the game shell without
   replacing the top-level document, so /stats, /sponsor, profiles, and
   country pages can be deep-linked with History API transitions. */
.app-page-host {
    position: fixed;
    inset: 0;
    z-index: 920;
    display: none;
    overflow: auto;
    pointer-events: auto;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    background: #0f0f12;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    height: 100dvh;
    isolation: isolate;
}

.app-page-host::before {
    content: '';
    position: fixed;
    inset: -100vh 0;
    z-index: 0;
    background: #0f0f12;
    pointer-events: none;
}

.app-page-host.active {
    display: block;
}

.app-page-root {
    position: relative;
    z-index: 1;
    width: min(1200px, calc(100% - 48px));
    min-height: 100dvh;
    margin: 0 auto;
    padding: 20px 0 40px;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    background: #0f0f12;
    box-sizing: border-box;
}

.app-page-root.app-page-narrow {
    width: min(1100px, calc(100% - 48px));
}

.app-page-root * {
    box-sizing: border-box;
}

.app-page-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.app-page-header h1 {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.16);
}

.app-page-header .accent {
    color: #ff1e1e;
}

.app-page-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: #333;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 4px;
    clip-path: polygon(10% 0, 100% 0, 100% 80%, 90% 100%, 0 100%, 0 20%);
    transition: background 0.15s, transform 0.1s;
}

.app-page-back:hover {
    background: #444;
    transform: scale(1.03);
}

.app-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.app-metrics-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.app-metric,
.app-panel,
.app-hero-card {
    background: rgba(20, 20, 25, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.app-metric {
    padding: 12px 16px;
}

.app-metric .label,
.app-panel h2,
.laps-chart-head h3 {
    margin: 0;
    font-size: 10px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    font-weight: 500;
}

.app-metric .label {
    margin-bottom: 4px;
}

.app-metric .value {
    font-size: 24px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.22);
}

.app-panel {
    padding: 16px 20px 20px;
    overflow-x: auto;
}

.app-panel + .app-panel,
.app-sponsor-promo + .app-panel,
.app-panel + .app-sponsor-promo {
    margin-top: 20px;
}

.app-panel h2 {
    margin-bottom: 12px;
}

.app-sponsor-promo {
    display: block;
    width: 100%;
    margin-bottom: 20px;
    padding: 14px 18px;
    color: #fff;
    background: #ff1e1e;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 4px;
    clip-path: polygon(10% 0, 100% 0, 100% 80%, 90% 100%, 0 100%, 0 20%);
    transition: filter 0.15s, transform 0.1s;
}

.app-sponsor-promo:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.app-map,
#app-stats-map {
    height: 483px;
    width: 100%;
    touch-action: pan-y;
}

.app-map .jvm-region {
    cursor: pointer;
}

body .jvm-tooltip {
    background: rgba(10, 10, 14, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 5px 9px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 4000;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.app-chart,
.laps-chart-card canvas {
    display: block;
    width: 100%;
    height: 220px;
}

.chart-tooltip,
.sponsor-tooltip {
    position: fixed;
    display: none;
    pointer-events: none;
    z-index: 4000;
    background: rgba(10, 10, 12, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.app-chart-link-row {
    margin-top: 8px;
    font-size: 12px;
}

.app-chart-link-row a,
.player-link {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.app-chart-link-row a:hover,
.player-link:hover {
    color: #ff5a5a;
}

.app-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.app-table th,
.app-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 14px;
}

.app-table th {
    font-size: 10px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    font-weight: 500;
}

.app-table tr:last-child td {
    border-bottom: none;
}

.app-table td.num,
.app-table th.num {
    text-align: right;
}

.app-table td.rank {
    color: rgba(255, 255, 255, 0.55);
    width: 40px;
}

.app-table td.flag {
    width: 28px;
    line-height: 1;
}

.app-table .flag-img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    vertical-align: middle;
}

.app-country-table th.app-podium-col,
.app-country-table td.app-podium-cell {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.app-country-table th.app-podium-col {
    padding-left: 4px;
    padding-right: 4px;
}

.app-podium-chip {
    display: inline-block;
    min-width: 28px;
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1px;
    color: #1a1006;
}

.app-podium-chip.p1 {
    background: #ffd770;
}

.app-podium-chip.p2 {
    background: #d8dee9;
}

.app-podium-chip.p3 {
    background: #c97e3f;
    color: #1a0d04;
}

.app-country-table td.app-podium-cell {
    color: rgba(255, 255, 255, 0.55);
}

.app-country-table td.app-podium-cell.has-value {
    color: #fff;
}

.country-row {
    cursor: pointer;
}

.country-row:hover td {
    background: rgba(255, 255, 255, 0.04);
}

.country-row:focus-within td {
    background: rgba(255, 255, 255, 0.05);
}

.country-row td.caret {
    width: 18px;
    color: rgba(255, 255, 255, 0.55);
}

.country-row td.caret::before {
    content: '▸';
}

.country-row.is-expanded td.caret::before {
    content: '▾';
}

.country-row.is-expanded td.caret,
.country-row:hover td.caret {
    color: #fff;
}

.country-row.is-expanded td {
    background: rgba(255, 255, 255, 0.05);
}

.app-country-table .country-name-inner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    width: 100%;
}

.app-country-table .country-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.app-country-table .country-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    font-size: 12px;
    line-height: 1;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    flex: 0 0 auto;
}

.app-country-table .country-link-icon:hover,
.app-country-table .country-link-icon:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    outline: none;
}

.app-country-table tr.country-detail td {
    background: rgba(0, 0, 0, 0.2);
    padding: 0;
}

.app-podium-detail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 14px 16px 16px;
}

.app-podium-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.app-podium-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.55);
}

.app-podium-group-header .group-count {
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.app-podium-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.app-podium-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.03);
    font-size: 13px;
    line-height: 1.3;
    min-width: 0;
}

.app-podium-entry .entry-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.app-podium-entry .entry-player {
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-podium-entry .entry-player:hover {
    color: #ff5a5a;
}

.app-podium-entry .entry-track {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-podium-entry .entry-class {
    opacity: 0.7;
    margin-left: 4px;
    font-size: 10px;
    letter-spacing: 0.5px;
}

.app-podium-entry .entry-time {
    align-self: center;
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.app-podium-empty {
    padding: 6px 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-style: italic;
}

.app-podium-detail-footer {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.app-podium-detail-footer .country-page-link {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 5px 12px;
    border-radius: 4px;
    transition: color 0.15s, border-color 0.15s;
}

.app-podium-detail-footer .country-page-link:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.app-podium-detail-loading,
.app-podium-detail-empty {
    padding: 14px 16px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-style: italic;
    text-align: center;
}

.app-loading,
.app-empty {
    padding: 32px;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
}

.app-empty {
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(20, 20, 25, 0.55);
}

.app-hero-card {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.app-hero-flag {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.app-hero-flag .flag-img {
    width: 44px;
    height: 44px;
}

.app-hero-name {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    word-break: break-word;
}

.app-pill {
    margin-left: auto;
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.14);
    text-transform: uppercase;
}

.app-pill.profile-pill {
    background: rgba(34, 197, 94, 0.18);
    color: rgba(190, 242, 200, 0.95);
    border-color: rgba(34, 197, 94, 0.4);
}

.profile-award-summary.hidden,
.profile-pill.hidden {
    display: none;
}

.profile-award-summary {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.app-track-thumb-wrap,
.profile-track-thumb-wrap,
.sponsor-track-thumb-wrap {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
}

.app-track-thumb,
.profile-track-thumb,
.sponsor-track-thumb {
    display: block;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.app-track-thumb-path,
.profile-track-thumb-path,
.sponsor-track-thumb .app-track-thumb-path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.68);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.app-track-thumb-path-soft,
.profile-track-thumb-path-soft,
.sponsor-track-thumb .app-track-thumb-path-soft {
    fill: none;
    stroke: rgba(255, 255, 255, 0.16);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.track-times-track-entry,
.sponsor-track-entry {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.track-name-cell,
.sponsor-menu td.track {
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.track-pb {
    display: inline-grid;
    grid-template-columns: 5.9rem 3rem;
    column-gap: 0.55rem;
    align-items: baseline;
    justify-content: end;
}

.track-pb-time {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.24rem;
    text-align: right;
    font-weight: 600;
}

.track-pb-rank {
    text-align: right;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.track-pb-title-star {
    flex: 0 0 auto;
    margin-right: 0.08rem;
}

.profile-lap-section {
    overflow: visible;
}

.profile-lap-table {
    width: 100%;
    min-width: 0;
    background: rgba(0, 0, 0, 0.28);
}

.profile-lap-head,
.profile-lap-list .lb-row {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1.1fr) minmax(0, 1.1fr) 100px;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0 0.9rem;
    min-width: 0;
    width: 100%;
}

.profile-lap-head {
    height: 2.4rem;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(8, 10, 12, 0.78);
}

.profile-lap-list {
    display: flex;
    flex-direction: column;
}

.profile-lap-list .lb-row {
    min-height: 2.6rem;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.12s ease;
    background: rgba(0, 0, 0, 0.18);
}

.profile-lap-list .lb-row:nth-child(even) {
    background: rgba(0, 0, 0, 0.12);
}

.profile-lap-list .lb-row:hover {
    background: rgba(255, 255, 255, 0.055);
}

.profile-lap-list .lb-driver,
.profile-lap-head .lb-driver {
    gap: 0.6rem;
}

.profile-lap-track-name {
    text-transform: uppercase;
}

.profile-lap-list .lb-time {
    justify-content: center;
    font-variant-numeric: tabular-nums;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.05;
    gap: 1px;
    font-weight: 700;
}

.profile-lap-list .lb-set {
    justify-content: flex-end;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    font-variant-numeric: tabular-nums;
}

.profile-lap-list .lb-actions {
    justify-content: center;
    gap: 4px;
}

.profile-laps-loading {
    padding: 0.85rem 0.5rem 0.15rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.badges-section .badges-list {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.badges-section .badges-list .tier-heading {
    padding-left: 0;
    padding-right: 0;
    background: transparent;
}

.badges-section .badge-card {
    padding-left: 0;
    padding-right: 0;
}

.package-intro {
    display: grid;
    grid-template-columns: minmax(420px, 1fr) minmax(280px, 420px);
    align-items: start;
    gap: 18px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.55);
    font-size: 15px;
    line-height: 1.5;
}

.package-copy h2 {
    margin: 0 0 16px;
    color: #fff;
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.package-copy strong {
    display: block;
    color: #fff;
    font-size: 17px;
    margin-bottom: 8px;
}

.package-copy p {
    margin: 0;
    font-weight: 600;
}

.title-sponsor-actions {
    display: grid;
    gap: 8px;
}

.title-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}

.title-price-copy {
    display: grid;
    gap: 4px;
}

.title-price-copy strong {
    color: #fff;
}

.title-price-copy span {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-weight: 700;
}

.price-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    background: #ff1e1e;
    color: #fff;
    font: inherit;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.price-link:disabled,
.price-pending {
    cursor: default;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.55);
    border-style: dashed;
}

.sponsor-preview {
    margin: 0;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.35);
}

.sponsor-preview img {
    display: block;
    width: 100%;
    height: auto;
}

.sponsor-preview figcaption {
    padding: 8px 10px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.laps-chart-card {
    margin-top: 14px;
}

.laps-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.laps-chart-head span,
.title-loading,
.track-status {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-weight: 700;
}

.track-status {
    display: inline-flex;
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    text-transform: uppercase;
    font-size: 10px;
}

.notice {
    display: none;
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    background: rgba(255, 30, 30, 0.14);
}

.notice.show {
    display: block;
}

.notice.good {
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(34, 197, 94, 0.35);
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0, 0, 0, 0.72);
}

.modal-backdrop[hidden] {
    display: none;
}

.sponsor-dialog {
    width: min(520px, 100%);
    padding: 18px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #15151b;
    color: #fff;
}

.dialog-head,
.dialog-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.dialog-title {
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.dialog-subtitle,
.dialog-error {
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    margin-top: 4px;
}

.dialog-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    cursor: pointer;
}

.sponsor-field {
    display: grid;
    gap: 6px;
    margin-top: 14px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sponsor-field input {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    padding: 10px 11px;
    font: inherit;
}

.logo-preview {
    display: none;
    margin-top: 12px;
}

.logo-preview.show {
    display: block;
}

.logo-preview img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
}

.dialog-actions {
    margin-top: 16px;
    justify-content: flex-end;
}

.dialog-actions button {
    border: 0;
    border-radius: 6px;
    padding: 9px 13px;
    color: #fff;
    background: #ff1e1e;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.dialog-actions .secondary {
    background: rgba(255, 255, 255, 0.08);
}

.app-page-footer {
    margin-top: 16px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
}

@media (max-width: 700px) {
    .app-page-root,
    .app-page-root.app-page-narrow {
        width: min(100% - 24px, 1200px);
        padding-top: 14px;
        padding-bottom: 28px;
    }

    .app-page-header h1 {
        font-size: 24px;
        letter-spacing: 1.5px;
    }

    .app-page-back {
        padding: 0.7rem 1.15rem;
        font-size: 0.9rem;
    }

    .app-metrics,
    .app-metrics-four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .app-panel {
        padding: 14px 12px 16px;
    }

    .app-map,
    #app-stats-map {
        height: min(72.45vh, calc((100vw - 48px) * 0.676));
        min-height: 242px;
    }

    .app-chart,
    .laps-chart-card canvas {
        height: 160px;
    }

    .app-table th,
    .app-table td {
        padding: 6px;
        font-size: 12px;
    }

    .app-country-table th.app-podium-col,
    .app-country-table td.app-podium-cell {
        padding-left: 2px;
        padding-right: 2px;
    }

    .app-podium-chip {
        min-width: 22px;
        padding: 2px 6px;
        font-size: 10px;
        letter-spacing: 0.5px;
    }

    .app-podium-detail {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 10px 12px 12px;
    }

    .app-hero-name {
        font-size: 24px;
    }

    .app-pill {
        margin-left: 0;
    }

    .package-intro {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .profile-lap-head,
    .profile-lap-list .lb-row {
        grid-template-columns: minmax(0, 2.7fr) minmax(0, 1.1fr) minmax(0, 1.05fr) 92px;
        gap: 0.35rem;
        padding: 0 0.5rem;
    }
}

@media (max-width: 480px) {
    .profile-lap-head,
    .profile-lap-list .lb-row {
        grid-template-columns: minmax(0, 3fr) minmax(0, 1.3fr) 86px;
    }

    .profile-lap-head .lb-set,
    .profile-lap-list .lb-set {
        display: none;
    }
}