/*
 * Racerverse Viewer — 2026 redesign HUD overlay
 *
 * Loaded AFTER each page's inline styles + styles.css. Re-skins
 * HUD chrome (race info card, mode tabs, speedometer, multiplayer
 * panel, mobile controls) to match the website redesign palette
 * and fixes overlap at narrow viewports.
 *
 * Selectors here are by-ID / by-class to override the inline
 * styles in drive.html / anatomy.html / etc. without rewriting
 * those huge files.
 */

/* ── Body sits on the cosmic gradient instead of plain navy ─── */
body {
    background:
        radial-gradient(80% 80% at 50% -10%, rgba(88, 58, 110, 0.55), transparent 60%),
        radial-gradient(60% 60% at 80% 110%, rgba(255, 111, 163, 0.18), transparent 60%),
        var(--rv-bg-primary) !important;
    color: var(--rv-text-primary) !important;
}

/* ── Generic HUD glass panels — match website tokens ─────── */
.hud-glass,
.controls,
#controls,
.mp-panel,
.mp-share,
.race-info,
.mode-tabs,
.speedometer,
.help-section,
.crew-cam,
.mp-public-room-info,
.distance,
.boost-indicator,
#labels-panel,
#hover-label,
#quick-status {
    background: var(--rv-glass-fill-strong) !important;
    border: 1px solid var(--rv-glass-border-mauve) !important;
    border-radius: var(--rv-radius-lg) !important;
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);
    box-shadow: var(--rv-glass-shadow);
    color: var(--rv-text-primary);
}

/* ── Anatomy inspector — labels panel + actions ───────── */
.label-text,
.label-name,
.label-desc,
.trait-name {
    color: var(--rv-text-primary) !important;
}

.label-text {
    border-radius: var(--rv-radius-md) !important;
    padding: 10px 14px !important;
    transition: background var(--rv-motion-base) var(--rv-easing-standard),
                border-color var(--rv-motion-base) var(--rv-easing-standard);
}

.label-text:hover,
.label-text.active,
.label-text[aria-pressed="true"] {
    background: rgba(255, 111, 163, 0.14) !important;
    border-color: var(--rv-racer-pink) !important;
}

/* Category indicator dots use the redesign category palette. */
.dot {
    box-shadow: 0 0 8px currentColor;
}

/* Anatomy panel-actions — primary becomes teal pill, secondary
   becomes glass ghost. */
.panel-action.primary {
    background: linear-gradient(180deg, #5EE0D6 0%, var(--rv-turbo-teal) 60%, #2BB3AA 100%) !important;
    color: var(--rv-deep-space) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: var(--rv-radius-pill) !important;
    box-shadow: 0 8px 22px rgba(56, 208, 198, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
    font-family: var(--rv-font-viewer), 'Nunito', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.panel-action {
    background: var(--rv-glass-fill) !important;
    color: var(--rv-cream-2026) !important;
    border: 1px solid var(--rv-glass-border-mauve) !important;
    border-radius: var(--rv-radius-pill) !important;
    font-family: var(--rv-font-viewer), 'Nunito', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.panel-action:hover {
    border-color: var(--rv-racer-pink) !important;
    background: rgba(255, 111, 163, 0.1) !important;
}

/* ── Pill buttons in viewer chrome ───────────────────────── */
.jump-btn,
.mobile-drive-action,
.mp-public-room-join,
.mp-social-btn,
.help-actions a,
.help-actions button {
    background: linear-gradient(180deg, #FF85B3 0%, var(--rv-racer-pink) 60%, #E45285 100%) !important;
    color: var(--rv-deep-space) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: var(--rv-radius-pill) !important;
    box-shadow: 0 8px 22px rgba(255, 111, 163, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
    font-family: var(--rv-font-viewer), 'Nunito', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

.jump-btn:hover,
.mobile-drive-action:hover,
.mp-public-room-join:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

/* ── Badge chips ─────────────────────────────────────────── */
.mp-public-room-badge,
.mp-minimap-badge,
.crew-cam-name,
.mp-section-label,
.boost-indicator {
    background: rgba(20, 14, 24, 0.55) !important;
    color: var(--rv-cream-2026) !important;
    border: 1px solid var(--rv-glass-border-cream) !important;
    border-radius: var(--rv-radius-pill) !important;
    font-family: var(--rv-font-viewer), 'Nunito', sans-serif !important;
}

/* Live status dots inherit the racer-pink accent. */
.mp-status-dot {
    background: var(--rv-racer-pink) !important;
    box-shadow: 0 0 8px rgba(255, 111, 163, 0.6);
}

/* ── Inputs (room codes, search, etc.) ──────────────────── */
.mp-input-wrap input,
input[type="text"],
input[type="number"],
input[type="search"] {
    background: rgba(20, 14, 24, 0.62) !important;
    color: var(--rv-cream-2026) !important;
    border: 1px solid var(--rv-glass-border-mauve) !important;
    border-radius: var(--rv-radius-md) !important;
}

input[type="text"]:focus,
input[type="search"]:focus {
    outline: none !important;
    border-color: var(--rv-racer-pink) !important;
    box-shadow: 0 0 0 3px rgba(255, 111, 163, 0.18) !important;
}

/* ── Speed/distance/biome badges — readable on world ───── */
.distance,
.biome,
.boost-indicator {
    font-family: var(--rv-font-viewer), 'Nunito', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 8px 14px !important;
    letter-spacing: 0.05em !important;
}

/* ── Loading modal accents — pink + teal instead of gold ─ */
.loading-title {
    background: linear-gradient(135deg, var(--rv-cream-2026) 0%, var(--rv-racer-pink) 100%) !important;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(255, 111, 163, 0.32) !important;
}

.loading-spinner {
    border-color: rgba(255, 111, 163, 0.18) !important;
    border-top-color: var(--rv-racer-pink) !important;
}

.loading-progress-bar {
    background: linear-gradient(90deg, var(--rv-racer-pink), var(--rv-turbo-teal)) !important;
}

/* ── Mobile responsive — fix overlap at narrow widths ───
 *
 * Most overlap happens because HUD chrome uses fixed positioning
 * with no width caps. On phones the multiplayer panel can collide
 * with the controls panel, the speedometer, and the help button.
 * Cap widths and convert to corner-anchored pills so they shrink
 * gracefully.
 */
@media (max-width: 767px) {
    /* Top-left controls panel — narrow + scrollable */
    #controls,
    .controls {
        top: 12px !important;
        left: 12px !important;
        right: auto !important;
        max-width: calc(50vw - 18px) !important;
        max-height: 60vh !important;
        padding: 12px !important;
        font-size: 12px !important;
    }

    /* Top-right perf / help buttons — keep them tight */
    #perf-panel,
    .perf-toggle {
        top: 12px !important;
        right: 12px !important;
        max-width: calc(50vw - 18px) !important;
    }

    /* Multiplayer panel — collapses to a pill, expands on tap */
    .mp-panel {
        bottom: 96px !important; /* clear of mobile-drive-action footer */
        right: 12px !important;
        left: auto !important;
        max-width: calc(100vw - 24px) !important;
        max-height: 55vh !important;
        font-size: 12px !important;
    }

    /* Crew cam — top-center, smaller */
    .crew-cam {
        top: 60px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        max-width: 70vw !important;
    }

    /* Distance / biome / speedometer chips — bottom-center row,
       wraps if needed, never overlaps mobile-drive-action. */
    .distance,
    .biome,
    .boost-indicator {
        bottom: 96px !important;
        font-size: 12px !important;
        padding: 6px 12px !important;
    }

    /* Mobile drive action button — bottom-center, full clear */
    .mobile-drive-action {
        bottom: 16px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        z-index: 200 !important;
        padding: 14px 28px !important;
        font-size: 14px !important;
    }

    /* Help section — collapse by default on mobile */
    .help-section,
    .help-sections {
        max-width: calc(100vw - 24px) !important;
    }
}

/* ── Tablet — slightly larger chrome but still cap widths ── */
@media (min-width: 768px) and (max-width: 1023px) {
    #controls,
    .controls,
    .mp-panel {
        max-width: 320px !important;
    }
}

/* ── Anatomy: keep #labels-panel as the right-side column at all
 * sizes. The .panel-utility (status + actions) lives inside it, so
 * we only need to size the OUTER panel — the buttons flow naturally
 * underneath the label list.
 *
 * Important: scope this to :not(.embed-mode) so the embed (used by
 * /racer/<plate> and the modal) keeps anatomy.html's `display: none`
 * for #labels-panel and lets the parent's own RacerInspect trait
 * buttons drive category focus instead.
 */
body:not(.embed-mode) #labels-panel {
    /* Default styles for the labels panel are inherited from
     * anatomy.html. Only the redesign tokens (background/border)
     * applied earlier in this file affect the standalone view. */
}

@media (max-width: 1023px) {
    body:not(.embed-mode) #labels-panel {
        position: fixed !important;
        right: 12px !important;
        top: 12px !important;
        bottom: auto !important;
        left: auto !important;
        max-width: 240px !important;
        max-height: calc(100vh - 24px) !important;
        overflow-y: auto !important;
        z-index: 30 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    /* Stack action buttons in a column inside the panel so they
       never sit on top of each other. */
    body:not(.embed-mode) .panel-utility-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin-top: 8px !important;
    }
    body:not(.embed-mode) #explode-toggle,
    body:not(.embed-mode) #reset-focus,
    body:not(.embed-mode) #drive-link {
        width: 100% !important;
        white-space: nowrap !important;
        font-size: 13px !important;
        padding: 11px 14px !important;
        text-align: center !important;
    }
}

@media (max-width: 480px) {
    body:not(.embed-mode) #labels-panel {
        max-width: calc(100vw - 24px) !important;
        right: 12px !important;
        left: 12px !important;
        font-size: 13px !important;
    }
}

/* In embed mode, force-hide the viewer's own labels panel — the
 * parent (RacerInspect) renders the trait buttons and would
 * compete with this duplicate UI otherwise. */
body.embed-mode #labels-panel,
body.embed-mode .panel-utility-actions {
    display: none !important;
}

/* ── Drive: position toolbar CONTAINERS, not individual buttons.
 *
 * drive.html groups its top-right buttons inside #drive-toolbar
 * (cruise / resetCam in #drive-actions, plus help, fullscreen).
 * Pulling each button out into its own fixed slot was fragile —
 * widths drifted and they kept overlapping. Position the whole
 * toolbar as a column at top-right and let its native flex layout
 * keep children aligned. */

#drive-toolbar {
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 30 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-end !important;
    max-width: 220px !important;
}

#drive-toolbar #drive-actions {
    display: flex !important;
    gap: 6px !important;
    flex-direction: row !important;
}

/* Mobile: drive-actions (Cruise / Reset Cam) take vertical space in
 * the toolbar column AND show clipped text on narrow widths. They're
 * keyboard shortcuts that don't matter on touch — hide them on mobile
 * and let the toolbar shrink to icon-only buttons. The selector
 * matches the existing #drive-toolbar #drive-actions specificity
 * (2,0,0) so this rule wins via source order under the media query. */
@media (max-width: 900px) {
    #drive-toolbar #drive-actions {
        display: none !important;
    }
}

/* Racer-select bar (prev / select / next / search / Go) anchors
 * bottom-left so it stays out of the toolbar column. */
#racer-select {
    position: fixed !important;
    bottom: 16px !important;
    left: 16px !important;
    top: auto !important;
    right: auto !important;
    z-index: 30 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    max-width: calc(100vw - 32px) !important;
}

#ds-toggle,
#speedometer-collapse {
    position: fixed !important;
    z-index: 30 !important;
}

/* The mobile drive menu (#mobile-drive-menu) is a column of action
 * buttons that opens from the FAB. The buttons themselves should
 * stay in flow inside the menu — DO NOT add per-button position
 * overrides because that pulls them out of the menu and they
 * collide. Only the speed-biome chip floats independently. */
@media (max-width: 1023px) {
    #speed-biome {
        position: fixed !important;
        z-index: 25 !important;
        max-width: 200px !important;
        white-space: nowrap !important;
    }
}

/* ds-toggle and speedometer-collapse aren't inside #drive-toolbar
 * — pin them to corners that don't conflict. ds-toggle sits at
 * top-left (next to controls panel); speedometer-collapse goes
 * bottom-right above mobileResetCam. */
#ds-toggle            { top: 12px !important; left: 12px !important; right: auto !important; bottom: auto !important; }
#speedometer-collapse { bottom: 12px !important; right: 12px !important; top: auto !important; left: auto !important; }

/* The mobile drive menu (#mobile-drive-menu) shows when the FAB is
 * tapped. By default it should be off-screen — anchor it to the
 * bottom-right and hide overflow when collapsed via FAB state.
 * (drive.html's JS toggles `aria-expanded` on the FAB which we use
 * to drive the visibility.) */
#mobile-drive-ui {
    z-index: 35 !important;
}

#mobile-drive-fab[aria-expanded="false"] + #mobile-drive-menu {
    display: none !important;
}

@media (max-width: 1023px) {
    /* The mobile drive action buttons (mobileResetCam, mobileToggleHud,
     * mobileSettings, mobileScreenshot, etc.) live INSIDE the
     * collapsible #mobile-drive-menu. Don't per-button position them —
     * that pulls them out of the menu and they collide. The menu's
     * own positioning is handled by drive.html's inline styles. */

    /* Speed-biome chip floats independently above the menu. */
    #speed-biome {
        bottom: 130px !important;
        left: 50% !important;
        right: auto !important;
        top: auto !important;
        transform: translateX(-50%) !important;
        max-width: 220px !important;
        z-index: 25 !important;
        font-size: 12px !important;
    }
}

@media (max-width: 480px) {
    #speed-biome {
        bottom: 140px !important;
        max-width: 180px !important;
        padding: 4px 10px !important;
    }
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .loading-spinner {
        animation: none !important;
    }
}