/* drive.css
   Base styles for the drive.html surface — extracted from inline <style> on 2026-05-11. See rv-newhud.css for the round 1-3 HUD overlay; behavior in /js/drive/rv-newhud/.
   Loaded via <link rel="stylesheet" href="/css/drive/drive.css"> in drive.html. */

/* ── Layout zones — single source of truth for UI positioning ── */
        :root {
            --zone-pad: 12px;
            --zone-gap: 8px;
            --zone-safe-top:    max(var(--zone-pad), env(safe-area-inset-top, 0px));
            --zone-safe-right:  max(var(--zone-pad), env(safe-area-inset-right, 0px));
            --zone-safe-bottom: max(var(--zone-pad), env(safe-area-inset-bottom, 0px));
            --zone-safe-left:   max(var(--zone-pad), env(safe-area-inset-left, 0px));

            /* Vertical offsets for stacked elements (updated by breakpoint) */
            --zone-toolbar-h: 42px;
            --zone-touch-reserve: 0px;
            --zone-hud-h: 0px;
        }

        @media (max-width: 900px) {
            :root {
                --zone-touch-reserve: 160px;
                --zone-pad: 10px;
            }
        }
        @media (max-width: 600px) {
            :root {
                --zone-touch-reserve: 160px;
                --zone-pad: 8px;
            }
        }

        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            --ui-font: "Trebuchet MS", "Avenir Next", "Segoe UI", Arial, sans-serif;
            --ui-text: #f4f8ff;
            --ui-muted: #b7c2de;
            --ui-bg: linear-gradient(145deg, rgba(8, 13, 26, 0.78), rgba(23, 30, 50, 0.62));
            --ui-bg-strong: linear-gradient(145deg, rgba(10, 16, 34, 0.9), rgba(22, 30, 54, 0.78));
            --ui-border: rgba(159, 189, 255, 0.34);
            --ui-border-strong: rgba(196, 216, 255, 0.62);
            --ui-shadow: 0 10px 30px rgba(2, 6, 18, 0.46);
            --ui-glow: 0 0 0 1px rgba(164, 190, 255, 0.22) inset;
        }
        body {
            overflow: hidden;
            background:
                radial-gradient(1200px 680px at 78% -8%, rgba(88, 121, 200, 0.22), transparent 64%),
                radial-gradient(920px 520px at 14% 100%, rgba(38, 149, 125, 0.2), transparent 62%),
                #080d18;
            line-height: 1.4;
        }
        #container { width: 100vw; height: 100vh; }
        #hud {
            position: fixed;
            top: var(--zone-safe-top);
            left: var(--zone-safe-left);
            color: rgba(246, 243, 248, 0.85);
            font-family: var(--ui-font);
            font-size: 12px;
            /* HUD glass language — 14px radius, 14% cream border. */
            background: rgba(8, 6, 14, 0.62);
            border: 1px solid rgba(246, 243, 248, 0.14);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5),
                        inset 0 1px 0 rgba(255, 255, 255, 0.05);
            padding: 10px 14px;
            border-radius: 14px;
            border: 1px solid rgba(255,255,255,0.08);
            z-index: 100;
            max-width: 200px;
        }
        #hud h2 {
            margin-bottom: 6px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            user-select: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: rgba(78, 205, 196, 0.9);
        }
        #hud h2::after {
            content: '\25BC';
            font-size: 9px;
            margin-left: 8px;
            transition: transform 0.2s;
            opacity: 0.5;
        }
        #hud.collapsed h2::after {
            transform: rotate(-90deg);
        }
        #hud .controls { opacity: 0.7; line-height: 2; transition: max-height 0.3s, opacity 0.2s; overflow: hidden; }
        #hud .controls b { color: rgba(78, 205, 196, 0.85); font-size: 11px; }
        #hud.collapsed .controls { max-height: 0; opacity: 0; margin: 0; padding: 0; }
        /* ── Kenney input prompt key icons ── */
        .key-img {
            height: 18px;
            width: auto;
            vertical-align: middle;
            image-rendering: pixelated;
            margin: 0 1px;
        }
        .key-row { white-space: nowrap; }
        #loading {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: rgba(246, 243, 248, 0.92);
            font-family: var(--ui-font);
            font-size: 14px;
            font-weight: 500;
            letter-spacing: 0.04em;
            z-index: 200;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
            padding: 22px 26px;
            border-radius: 14px;
            background: rgba(8, 6, 14, 0.55);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(246, 243, 248, 0.12);
            box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
        }
        /* Spinner ring — pulse + rotate, glassy + cream-tinted to
           match the rest of the drive UI. Pseudo-element so the
           HTML stays a plain text string ("Loading racer..."). */
        #loading::before {
            content: '';
            display: block;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 2px solid rgba(246, 243, 248, 0.18);
            border-top-color: var(--rv-racer-pink, #FF6FA3);
            animation: rv-loading-spin 800ms linear infinite;
        }
        @keyframes rv-loading-spin {
            to { transform: rotate(360deg); }
        }
        /* Failure state — replaces the spinner card with a
           recovery surface. Wider, two-line copy + primary CTA
           and secondary link. */
        #loading.rv-loading-failed::before { display: none; }
        /* Poster state (#19) — show the selected racer image while the
           scene loads. The shimmer sweep conveys progress, so the ring
           spinner is hidden in this mode. */
        #loading.rv-loading-poster::before { display: none; }
        #loading.rv-loading-poster { padding: 16px; gap: 12px; }
        .rv-loading-poster-frame {
            position: relative;
            width: min(220px, 56vw);
            aspect-ratio: 1 / 1;
            border-radius: 16px;
            overflow: hidden;
            background: rgba(246, 243, 248, 0.06);
        }
        .rv-loading-poster-img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
        }
        .rv-loading-poster-frame::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.16) 50%, transparent 70%);
            transform: translateX(-100%);
            animation: rv-loading-shimmer 1.4s ease-in-out infinite;
        }
        @keyframes rv-loading-shimmer {
            to { transform: translateX(100%); }
        }
        @media (prefers-reduced-motion: reduce) {
            .rv-loading-poster-frame::after { animation: none; }
        }
        .rv-loading-caption {
            font-size: 13px;
            color: rgba(246, 243, 248, 0.8);
            letter-spacing: 0.04em;
        }
        #loading.rv-loading-failed {
            text-align: center;
            min-width: min(380px, 90vw);
            gap: 8px;
        }
        .rv-loading-failed-title {
            font-size: 18px;
            font-weight: 700;
            color: rgba(246, 243, 248, 0.96);
        }
        .rv-loading-failed-body {
            font-size: 13px;
            font-weight: 400;
            color: rgba(246, 243, 248, 0.7);
            line-height: 1.45;
            max-width: 340px;
        }
        .rv-loading-failed-actions {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            margin-top: 8px;
        }
        #rv-loading-retry {
            border: 1px solid rgba(255, 111, 163, 0.5);
            background: rgba(255, 111, 163, 0.18);
            color: rgba(246, 243, 248, 0.96);
            font: inherit;
            font-weight: 600;
            font-size: 13px;
            padding: 10px 22px;
            border-radius: 999px;
            cursor: pointer;
            transition: background 120ms ease, border-color 120ms ease;
        }
        #rv-loading-retry:hover {
            background: rgba(255, 111, 163, 0.32);
            border-color: rgba(255, 111, 163, 0.7);
        }
        .rv-loading-back {
            color: rgba(246, 243, 248, 0.55);
            font-size: 12px;
            text-decoration: none;
            padding: 4px 8px;
        }
        .rv-loading-back:hover { color: rgba(246, 243, 248, 0.85); }
        #racer-select {
            position: fixed;
            bottom: var(--zone-safe-bottom);
            left: var(--zone-safe-left);
            background: rgba(0,0,0,0.55);
            backdrop-filter: blur(6px);
            padding: 8px 12px;
            border-radius: 10px;
            border: 1px solid rgba(255,255,255,0.08);
            color: white;
            font-family: var(--ui-font);
            font-size: 13px;
            z-index: 100;
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }
        #racer-select select {
            padding: 5px 10px;
            font-size: 14px;
            border-radius: 4px;
            margin: 0 2px;
        }
        #racer-select input {
            width: 88px;
            padding: 5px 8px;
            font-size: 13px;
            border: none;
            border-radius: 4px;
        }
        #racer-select button {
            padding: 5px 12px;
            font-size: 16px;
            border: none;
            border-radius: 4px;
            background: #444;
            color: white;
            cursor: pointer;
        }
        #racer-select .jump-btn {
            font-size: 13px;
            padding: 6px 10px;
        }
        #racer-select button:hover {
            background: #666;
        }
        /* ── Top-right toolbar ──────────────── */
        #drive-toolbar {
            position: fixed;
            top: var(--zone-safe-top);
            right: var(--zone-safe-right);
            display: flex;
            gap: var(--zone-gap);
            align-items: center;
            z-index: 100;
        }
        #fullscreen-btn,
        #drive-actions button,
        .drive-return-link {
            padding: 8px 12px;
            font-size: 13px;
            border: none;
            border-radius: 8px;
            background: rgba(0,0,0,0.55);
            backdrop-filter: blur(6px);
            border: 1px solid rgba(255,255,255,0.08);
            color: rgba(255,255,255,0.85);
            cursor: pointer;
            font-family: var(--ui-font);
            font-weight: 700;
            letter-spacing: 0;
            text-decoration: none;
            transition: background 0.15s, border-color 0.15s;
        }
        #fullscreen-btn:hover,
        #drive-actions button:hover,
        .drive-return-link:hover {
            background: rgba(40,40,70,0.7);
            border-color: rgba(78, 205, 196, 0.3);
        }
        .drive-return-link[hidden] {
            display: none !important;
        }
        /* "Open a racer like this" CTA — accent so it reads as a primary
           action, distinct from the neutral "Back to racer" link. */
        .drive-get-own-link {
            background: linear-gradient(135deg, rgba(255,111,163,0.92), rgba(255,196,87,0.92));
            border-color: rgba(255,255,255,0.22);
            color: #161020;
        }
        .drive-get-own-link:hover {
            background: linear-gradient(135deg, rgba(255,111,163,1), rgba(255,196,87,1));
            border-color: rgba(255,255,255,0.4);
        }

        /* ── Perf: kill backdrop-filter over the live WebGL canvas ──
           Every frosted (backdrop-filter: blur) panel forces the compositor
           to re-sample and blur the continuously-rendering 3D canvas behind
           it ~every frame. With ~50 such panels that is the dominant cause of
           "the UI and the 3D both feel slow, especially at the same time" —
           worst on mobile GPUs. Panels keep their translucent backgrounds, so
           they stay readable; we just drop the blur. Engaged on coarse-pointer
           (touch) devices and whenever the QualityManager isn't at full tier
           (html.rv-perf-lite, toggled in drive.html). drive.css is scoped to
           the drive page, so the broad selector only affects this page. */
        html.rv-perf-lite *,
        html.rv-perf-lite *::before,
        html.rv-perf-lite *::after {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        @media (hover: none) and (pointer: coarse) {
            *, *::before, *::after {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
            }
        }
        #fullscreen-btn {
            position: static;
        }
        #drive-actions {
            display: flex;
            gap: 6px;
            position: static;
        }
        #speedometer {
            position: fixed;
            bottom: calc(var(--zone-safe-bottom) + var(--zone-touch-reserve));
            left: 50%;
            transform: translateX(-50%);
            color: rgba(246, 243, 248, 0.95);
            font-family: var(--ui-font);
            /* HUD glass language — matches rearview, settings panel,
               and pip. 1px cream border at 14% alpha, 14px radius,
               soft outer shadow + 1px inner highlight for depth. */
            background: rgba(8, 6, 14, 0.62);
            border: 1px solid rgba(246, 243, 248, 0.14);
            padding: 12px 16px;
            border-radius: 14px;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            box-shadow:
                0 14px 36px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
            z-index: 100;
            text-align: center;
            cursor: move;
            user-select: none;
            min-width: 100px;
            min-height: 60px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
        #speedometer:hover {
            border-color: rgba(246, 243, 248, 0.26);
        }
        #speedometer .speed {
            font-size: 28px;
            font-weight: 700;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
            letter-spacing: -0.01em;
            margin-top: -4px;
        }
        #speedometer .distance {
            font-size: 12px;
            color: rgba(246, 243, 248, 0.55);
            white-space: nowrap;
            font-weight: 500;
            letter-spacing: 0.02em;
        }
        /* Speedometer dial — SVG arc + needle. Hidden when the
           speedometer is collapsed (collapsed state shows just the
           "+" button). The needle's rotation is driven by a CSS
           custom property so the JS hot-path is just a one-line
           setProperty call per frame. */
        #speedometer .speedo-dial {
            display: block;
            width: 100px;
            height: 60px;
            margin: 0 auto 4px;
            overflow: visible;
        }
        #speedometer.collapsed .speedo-dial { display: none; }
        .speedo-track {
            stroke: rgba(246, 243, 248, 0.10);
            stroke-width: 6;
            fill: none;
            stroke-linecap: round;
        }
        .speedo-fill {
            stroke: rgba(255, 111, 163, 0.85);
            stroke-width: 6;
            fill: none;
            stroke-linecap: round;
            /* Length-of-arc dasharray draws the active portion of
               the gauge. The arc is approximately 132px long; we
               trim from the end via stroke-dashoffset proportional
               to the speed (set by JS). */
            stroke-dasharray: 132;
            stroke-dashoffset: 132;
            transition: stroke-dashoffset 220ms cubic-bezier(0.22, 1, 0.36, 1);
            filter: drop-shadow(0 0 4px rgba(255, 111, 163, 0.4));
        }
        .speedo-ticks line {
            stroke: rgba(246, 243, 248, 0.45);
            stroke-width: 1.5;
            stroke-linecap: round;
        }
        .speedo-needle {
            stroke: rgba(246, 243, 248, 0.96);
            stroke-width: 1.8;
            stroke-linecap: round;
            transform-origin: 50px 60px;
            transform: rotate(calc((var(--speedo-deg, -90) * 1deg)));
            transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
            filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.6));
        }
        .speedo-pivot {
            fill: rgba(255, 111, 163, 0.96);
            stroke: rgba(246, 243, 248, 0.5);
            stroke-width: 0.6;
        }
        /* Boost: needle goes hot-pink + glow; arc fill brightens. */
        #speedometer.boost .speedo-needle {
            stroke: rgba(255, 196, 87, 1);
            filter: drop-shadow(0 0 6px rgba(255, 196, 87, 0.9));
        }
        #speedometer.boost .speedo-fill {
            stroke: rgba(255, 196, 87, 0.95);
            filter: drop-shadow(0 0 6px rgba(255, 196, 87, 0.6));
        }
        #speedometer-resize {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 14px;
            height: 14px;
            cursor: nwse-resize;
            background: linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.3) 50%);
        }
        #speedometer-resize:hover {
            background: linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.6) 50%);
        }
        #pip-container {
            position: fixed;
            top: auto;
            left: auto;
            bottom: var(--zone-safe-bottom);
            right: var(--zone-safe-right);
            width: 200px;
            height: 200px;
            /* Match the HUD glass language — 1px cream-tinted
               border at 14% alpha, 14px radius, soft outer shadow
               + 1px inner highlight. Was a thick 3px white border
               with 4px radius; visually inconsistent with the
               speedometer / rearview / settings glass. */
            border: 1px solid rgba(246, 243, 248, 0.18);
            border-radius: 14px;
            box-shadow:
                0 14px 36px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
            overflow: hidden;
            z-index: 50;
            box-shadow: 0 0 10px rgba(0,0,0,0.5);
            cursor: move;
            user-select: none;
        }
        #pip-container:hover {
            border-color: rgba(246, 243, 248, 0.34);
        }
        #pip-resize {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 16px;
            height: 16px;
            cursor: nwse-resize;
            background: linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.5) 50%);
        }
        #pip-resize:hover {
            background: linear-gradient(135deg, transparent 50%, rgba(170,170,255,0.8) 50%);
        }
        #rearview-container {
            position: fixed;
            top: calc(var(--zone-safe-top) + var(--zone-toolbar-h) + var(--zone-gap));
            left: 50%;
            transform: translateX(-50%);
            /* Cap at viewport so the mirror never overflows. */
            width: min(480px, calc(100vw - 16px));
            max-width: calc(100vw - 16px);
            height: 120px;
            /* Glass frame to match the rest of the UI — thin
               cream-tinted border, soft inner shadow for the
               "physical mirror" feel, depth via outer shadow. */
            border: 1px solid rgba(246, 243, 248, 0.18);
            border-radius: 14px;
            z-index: 50;
            box-shadow:
                0 14px 36px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(0, 0, 0, 0.5) inset,
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
            cursor: move;
            user-select: none;
            background: rgba(8, 6, 14, 0.45);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            pointer-events: auto;
            transition: border-color 160ms ease, transform 160ms ease;
            overflow: hidden;
        }
        #rearview-container:hover {
            border-color: rgba(246, 243, 248, 0.34);
        }
        /* The little hood-tab on top — a 3D-printed accent that
           reads as "this is a mirror, you can drag it". Now wider,
           uses a subtle gradient that matches the frame border. */
        #rearview-container::before {
            content: '';
            position: absolute;
            top: -5px;
            left: 50%;
            transform: translateX(-50%);
            width: 56px;
            height: 5px;
            background: linear-gradient(to bottom,
                rgba(246, 243, 248, 0.28),
                rgba(246, 243, 248, 0.10));
            border-radius: 4px 4px 0 0;
        }
        #rearview-resize {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 16px;
            height: 16px;
            cursor: nwse-resize;
            background: linear-gradient(135deg, transparent 50%, rgba(100,100,100,0.5) 50%);
        }
        #rearview-resize:hover {
            background: linear-gradient(135deg, transparent 50%, rgba(150,150,150,0.8) 50%);
        }
        .panel-collapse-btn {
            position: absolute;
            top: 6px;
            right: 6px;
            width: 20px;
            height: 20px;
            border: 1px solid rgba(255,255,255,0.3);
            border-radius: 4px;
            background: rgba(0,0,0,0.6);
            color: #fff;
            font-size: 12px;
            line-height: 1;
            padding: 0;
            margin: 0;
            cursor: pointer;
            z-index: 7;
        }
        .panel-collapse-btn:hover {
            background: rgba(80,80,120,0.8);
        }
        #speedometer #speedometer-collapse {
            top: 6px;
            right: 6px;
        }
        #pip-container #pip-collapse {
            top: 6px;
            right: 6px;
        }
        #rearview-container #rearview-collapse {
            top: 6px;
            right: 6px;
        }
        #speedometer.collapsed {
            min-width: 84px;
            min-height: 42px;
            padding: 6px 8px;
        }
        #speedometer.collapsed .distance,
        #speedometer.collapsed #speedometer-resize {
            display: none;
        }
        #speedometer.collapsed .speed {
            font-size: 20px;
        }
        #pip-container.collapsed {
            border-width: 1px;
            background: rgba(0,0,0,0.68);
        }
        #pip-container.collapsed #pip-resize {
            display: none;
        }
        #rearview-container.collapsed {
            border-width: 1px;
            background: rgba(0,0,0,0.68);
        }
        #rearview-container.collapsed::before,
        #rearview-container.collapsed #rearview-resize {
            display: none;
        }

        /* Refined UI styling for non-embed drive mode */
        body:not(.embed-mode) #hud,
        body:not(.embed-mode) #racer-select,
        body:not(.embed-mode) #speedometer {
            color: var(--ui-text);
            background: var(--ui-bg);
            border: 1px solid var(--ui-border);
            border-radius: 12px;
            box-shadow: var(--ui-shadow), var(--ui-glow);
            backdrop-filter: blur(10px) saturate(1.15);
            -webkit-backdrop-filter: blur(10px) saturate(1.15);
            transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
            font-family: var(--ui-font);
        }
        body:not(.embed-mode) #hud {
            width: 330px;
            max-width: calc(100vw - 40px);
            padding: 12px 14px;
            font-size: 13px;
            background: var(--ui-bg-strong);
        }
        body:not(.embed-mode) #hud h2 {
            margin-bottom: 7px;
            font-size: 15px;
            letter-spacing: 0.02em;
        }
        body:not(.embed-mode) #hud h2::after {
            content: "\25BC";
            font-size: 11px;
            color: var(--ui-muted);
        }
        body:not(.embed-mode) #hud .controls {
            opacity: 0.88;
            line-height: 1.58;
            color: var(--ui-muted);
        }
        body:not(.embed-mode) #hud .controls b {
            color: #eaf3ff;
        }
        body:not(.embed-mode) #hud:hover,
        body:not(.embed-mode) #racer-select:hover,
        body:not(.embed-mode) #speedometer:hover,
        body:not(.embed-mode) #pip-container:hover,
        body:not(.embed-mode) #rearview-container:hover {
            border-color: var(--ui-border-strong);
        }
        body:not(.embed-mode) #loading {
            font-family: var(--ui-font);
            letter-spacing: 0.03em;
            text-shadow: 0 4px 24px rgba(0,0,0,0.46);
        }
        body:not(.embed-mode) #racer-select {
            padding: 9px 11px;
        }
        body:not(.embed-mode) #racer-select select,
        body:not(.embed-mode) #racer-select input {
            border: 1px solid rgba(201, 217, 255, 0.42);
            background: rgba(6, 10, 24, 0.82);
            color: #f6f8ff;
            border-radius: 8px;
            outline: none;
        }
        body:not(.embed-mode) #racer-select select {
            padding: 6px 9px;
            font-size: 13px;
        }
        body:not(.embed-mode) #racer-select input {
            padding: 6px 8px;
            font-size: 13px;
        }
        body:not(.embed-mode) #racer-select button {
            border: 1px solid rgba(178, 204, 255, 0.34);
            border-radius: 8px;
            background: rgba(26, 39, 69, 0.86);
            color: #edf3ff;
            transition: background 0.15s ease, border-color 0.15s ease;
            font-family: var(--ui-font);
        }
        body:not(.embed-mode) #racer-select button:hover {
            background: rgba(48, 72, 122, 0.9);
            border-color: rgba(214, 231, 255, 0.58);
        }
        body:not(.embed-mode) #fullscreen-btn,
        body:not(.embed-mode) #drive-actions button {
            font-family: var(--ui-font);
            border: 1px solid rgba(179, 205, 255, 0.4);
            background: var(--ui-bg-strong);
            color: #f3f8ff;
            box-shadow: var(--ui-shadow);
            transition: border-color 0.15s ease, background 0.15s ease;
        }
        body:not(.embed-mode) #fullscreen-btn {
            border-radius: 10px;
            font-size: 14px;
            padding: 9px 13px;
        }
        body:not(.embed-mode) #drive-actions {
            display: flex;
            gap: 8px;
        }
        body:not(.embed-mode) #drive-actions button {
            padding: 8px 14px;
            font-size: 13px;
            border-radius: 10px;
            cursor: pointer;
        }
        body:not(.embed-mode) #fullscreen-btn:hover,
        body:not(.embed-mode) #drive-actions button:hover {
            border-color: rgba(215, 232, 255, 0.72);
            background: linear-gradient(145deg, rgba(17, 30, 62, 0.95), rgba(34, 52, 92, 0.78));
        }
        body:not(.embed-mode) #speedometer {
            background: var(--ui-bg-strong);
            padding: 10px 11px;
        }
        body:not(.embed-mode) #speedometer .speed {
            letter-spacing: 0.01em;
        }
        body:not(.embed-mode) #speedometer .distance {
            color: #b6ffd2;
            opacity: 0.94;
        }
        body:not(.embed-mode) #speedometer-resize {
            background: linear-gradient(135deg, transparent 50%, rgba(214,228,255,0.42) 50%);
        }
        body:not(.embed-mode) #speedometer-resize:hover {
            background: linear-gradient(135deg, transparent 50%, rgba(214,228,255,0.76) 50%);
        }
        body:not(.embed-mode) #pip-container,
        body:not(.embed-mode) #rearview-container {
            overflow: hidden;
            background: transparent;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            border: 1px solid var(--ui-border);
            border-radius: 12px;
            box-shadow: var(--ui-shadow), var(--ui-glow);
        }
        body:not(.embed-mode) #pip-resize {
            background: linear-gradient(135deg, transparent 50%, rgba(214,228,255,0.52) 50%);
        }
        body:not(.embed-mode) #pip-resize:hover {
            background: linear-gradient(135deg, transparent 50%, rgba(214,228,255,0.82) 50%);
        }
        body:not(.embed-mode) #rearview-container {
            background: transparent;
        }
        body:not(.embed-mode) #rearview-container::before {
            background: linear-gradient(to bottom, rgba(193, 214, 255, 0.64), rgba(80, 97, 132, 0.62));
        }
        body:not(.embed-mode) #rearview-resize {
            background: linear-gradient(135deg, transparent 50%, rgba(204,218,247,0.45) 50%);
        }
        body:not(.embed-mode) #rearview-resize:hover {
            background: linear-gradient(135deg, transparent 50%, rgba(204,218,247,0.76) 50%);
        }
        body:not(.embed-mode) .panel-collapse-btn {
            border: 1px solid rgba(178, 205, 255, 0.5);
            border-radius: 6px;
            background: rgba(13, 21, 40, 0.76);
            color: #ebf2ff;
        }
        body:not(.embed-mode) .panel-collapse-btn:hover {
            background: rgba(40, 63, 108, 0.88);
            border-color: rgba(221, 236, 255, 0.66);
        }

        .mobile-drive-hidden {
            display: none !important;
        }

        #mobile-drive-ui {
            display: none;
            position: fixed;
            right: var(--zone-safe-right);
            bottom: calc(var(--zone-safe-bottom) + var(--zone-touch-reserve) + 24px);
            z-index: 620;
        }
        #mobile-drive-fab {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,0.35);
            background: rgba(0,0,0,0.74);
            color: #fff;
            font-size: 22px;
            font-weight: 700;
            margin: 0;
            padding: 0;
            cursor: pointer;
        }
        /* Mobile drive controls — bottom sheet (#20). Slides up from the
           bottom edge, full-width, grouped (Camera / Racer / Settings /
           Share). The FAB controller (ExperienceAssist) already closes on
           outside tap; the scrim below is purely visual. */
        #mobile-drive-menu {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            max-height: min(72vh, 560px);
            overflow-y: auto;
            overscroll-behavior: contain;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            gap: 4px;
            padding: 8px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
            background: rgba(12, 10, 18, 0.97);
            border-radius: 18px 18px 0 0;
            border-top: 1px solid rgba(255, 255, 255, 0.14);
            box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.55);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            transform: translateY(101%);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, visibility 0s linear 0.24s;
            z-index: 1000;
        }
        #mobile-drive-ui.open #mobile-drive-menu {
            transform: translateY(0);
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
        }
        @media (prefers-reduced-motion: reduce) {
            #mobile-drive-menu { transition: opacity 0.2s ease; }
        }
        /* Dimming scrim behind the sheet. pointer-events:none so the tap
           falls through to the document handler, which closes the menu. */
        body.mobile-drive-menu-open::after {
            content: '';
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.42);
            z-index: 998;
            pointer-events: none;
            animation: rv-sheet-scrim-in 0.2s ease;
        }
        @keyframes rv-sheet-scrim-in { from { opacity: 0; } to { opacity: 1; } }
        .mobile-drive-sheet-header {
            position: sticky;
            top: 0;
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            gap: 8px;
            padding: 12px 2px 10px;
            margin-bottom: 4px;
            background: linear-gradient(rgba(12, 10, 18, 0.98) 60%, rgba(12, 10, 18, 0));
        }
        .mobile-drive-grabber {
            position: absolute;
            top: 6px;
            left: 50%;
            transform: translateX(-50%);
            width: 38px;
            height: 4px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.28);
        }
        .mobile-drive-sheet-title {
            font-family: var(--ui-font);
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 0.04em;
            color: rgba(255, 255, 255, 0.92);
        }
        .mobile-drive-sheet-close {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            background: rgba(255, 255, 255, 0.06);
            color: #fff;
            font-size: 20px;
            line-height: 1;
            margin: 0;
            padding: 0;
            cursor: pointer;
        }
        .mobile-drive-groups {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .mobile-drive-group-label {
            margin: 0 0 6px;
            font-family: var(--ui-font);
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.52);
        }
        .mobile-drive-group-actions {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 7px;
        }
        .mobile-drive-action {
            border: 1px solid rgba(255,255,255,0.28);
            border-radius: 12px;
            background: rgba(0,0,0,0.78);
            color: #fff;
            display: grid;
            grid-template-columns: 40px minmax(0, 1fr);
            align-items: center;
            gap: 8px;
            min-height: 44px;
            padding: 8px 12px 8px 8px;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0;
            text-align: left;
            margin: 0;
            cursor: pointer;
        }
        .mobile-drive-action::before {
            content: attr(data-icon);
            display: inline-grid;
            place-items: center;
            min-width: 34px;
            height: 28px;
            border: 1px solid rgba(255,255,255,0.18);
            border-radius: 8px;
            background: rgba(255,255,255,0.07);
            color: rgba(255,255,255,0.86);
            font-size: 9px;
            font-weight: 900;
            line-height: 1;
        }
        .mobile-drive-action.active {
            border-color: rgba(255, 215, 0, 0.7);
            color: #ffe187;
            background: rgba(74, 53, 2, 0.82);
        }
        #help-btn {
            position: static;
            width: 34px;
            height: 34px;
            border-radius: 8px;
            border: 1px solid rgba(255,255,255,0.08);
            background: rgba(0,0,0,0.55);
            backdrop-filter: blur(6px);
            color: rgba(255,255,255,0.85);
            font-family: var(--ui-font);
            font-size: 16px;
            font-weight: 700;
            line-height: 1;
            cursor: pointer;
            z-index: 620;
            transition: background 0.15s, border-color 0.15s;
        }
        #help-btn:hover {
            background: rgba(40,40,70,0.7);
            border-color: rgba(78, 205, 196, 0.3);
        }

        /* Pause button — same shape as help/fullscreen but with a
           label so it's clear at a glance. Active state shows a
           pink outline so it reads as "currently paused." */
        #pause-btn {
            min-width: 92px; padding: 0 10px;
            background: rgba(20,28,52,0.62);
            color: rgba(255,255,255,0.85);
            border: 1px solid rgba(159, 189, 255, 0.34);
            border-radius: 999px;
            font-family: var(--ui-font);
            font-size: 13px; font-weight: 600;
            letter-spacing: 0.3px;
            min-height: 36px;
            cursor: pointer;
            z-index: 620;
            transition: background 0.15s, border-color 0.15s;
        }
        #pause-btn:hover { background: rgba(40,40,70,0.7); border-color: rgba(78, 205, 196, 0.4); }
        #pause-btn.active {
            background: rgba(255, 111, 163, 0.18);
            border-color: rgba(255, 111, 163, 0.7);
            color: #ffd6e6;
        }
        body.drive-paused #scene::after,
        body.drive-paused #container::after {
            /* Dimming pseudo-element doesn't apply on canvas-only
               containers; we use a separate overlay div instead. */
        }
        #drive-pause-overlay {
            position: fixed;
            inset: 0;
            background: rgba(8, 12, 24, 0.45);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 640;
            pointer-events: none;
            color: rgba(246, 243, 248, 0.92);
            font-family: var(--ui-font);
            font-size: 22px;
            letter-spacing: 1px;
            text-shadow: 0 2px 14px rgba(0,0,0,0.6);
        }
        body.drive-paused #drive-pause-overlay {
            display: flex;
        }
        body.embed-mode #pause-btn { display: none; }

        /* Emote wheel — 4-button radial popup keyed off the local
           player. Shows on hold-key or hold-tap on a phone-screen
           button. The emote ITSELF (when received from peers or
           sent locally) renders as a transient HUD sprite via JS;
           this is just the picker. */
        #emote-wheel {
            position: fixed;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 645;
            background: rgba(8, 12, 24, 0.18);
            backdrop-filter: blur(2px);
            -webkit-backdrop-filter: blur(2px);
        }
        #emote-wheel.visible { display: flex; }
        #emote-wheel-grid {
            display: grid;
            grid-template-columns: repeat(2, 80px);
            grid-template-rows: repeat(2, 80px);
            gap: 12px;
        }
        #emote-wheel button {
            width: 80px; height: 80px;
            border-radius: 50%;
            border: 2px solid rgba(159, 189, 255, 0.5);
            background: rgba(20, 28, 52, 0.92);
            color: #fff;
            font-size: 36px;
            cursor: pointer;
            transition: transform 0.1s, border-color 0.15s;
        }
        #emote-wheel button:hover,
        #emote-wheel button:focus-visible {
            transform: scale(1.1);
            border-color: rgba(78, 205, 196, 0.9);
            outline: none;
        }
        /* Floating emote sprites that pop above the local player */
        .emote-sprite {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -100px);
            font-size: 48px;
            pointer-events: none;
            z-index: 644;
            animation: emoteFloat 2s ease-out forwards;
        }
        .emote-sprite[data-remote] {
            /* Remote emotes get a subtle name label below */
        }
        .emote-sprite .emote-label {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            font-size: 12px;
            font-family: var(--ui-font);
            color: rgba(246, 243, 248, 0.85);
            white-space: nowrap;
            text-shadow: 0 2px 6px rgba(0,0,0,0.6);
        }
        @keyframes emoteFloat {
            0%   { opacity: 0; transform: translate(-50%, -50px) scale(0.6); }
            18%  { opacity: 1; transform: translate(-50%, -100px) scale(1.1); }
            85%  { opacity: 1; transform: translate(-50%, -150px) scale(1.0); }
            100% { opacity: 0; transform: translate(-50%, -190px) scale(0.9); }
        }
        body.embed-mode #emote-wheel { display: none !important; }

        /* Multiplayer invitee welcome overlay — first-time users
           landing from a /drive?room=XXXX share link see this once.
           Auto-dismisses after 12s or on any tap. localStorage gate
           keeps it from re-appearing on subsequent invites. */
        .rv-mp-welcome {
            position: fixed;
            inset: 0;
            background: rgba(8, 12, 24, 0.7);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 700;
            opacity: 0;
            animation: rv-mp-welcome-in 0.35s ease-out forwards;
        }
        @keyframes rv-mp-welcome-in {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .rv-mp-welcome.hide {
            opacity: 0;
            transition: opacity 0.35s ease;
        }
        .rv-mp-welcome-card {
            max-width: 420px;
            width: calc(100% - 32px);
            padding: 22px 24px;
            background: linear-gradient(140deg, rgba(13, 16, 28, 0.96), rgba(20, 14, 40, 0.94));
            border: 1px solid rgba(159, 189, 255, 0.34);
            border-radius: 22px;
            color: rgba(246, 243, 248, 0.95);
            font-family: var(--ui-font);
            box-shadow: 0 18px 48px rgba(0, 0, 0, 0.65);
            text-align: center;
        }
        .rv-mp-welcome-eyebrow {
            margin: 0 0 4px;
            font-size: 12px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--rv-racer-pink, #ff6fa3);
            font-weight: 700;
        }
        .rv-mp-welcome-title { margin: 0 0 12px; font-size: 24px; font-weight: 800; }
        .rv-mp-welcome-body { margin: 0 0 12px; font-size: 14px; line-height: 1.45; opacity: 0.88; }
        .rv-mp-welcome-body strong { color: #4ECDC4; letter-spacing: 1px; }
        .rv-mp-welcome-tips {
            text-align: left;
            margin: 0 0 16px;
            padding-left: 18px;
            font-size: 13px;
            line-height: 1.55;
            opacity: 0.85;
        }
        .rv-mp-welcome-tips li { margin-bottom: 4px; }
        .rv-mp-welcome-tips a { color: var(--rv-racer-pink, #ff6fa3); }
        .rv-mp-welcome-tips code {
            background: rgba(255,255,255,0.1);
            padding: 1px 6px;
            border-radius: 4px;
            font-size: 12px;
        }
        .rv-mp-welcome-btn {
            padding: 10px 22px;
            background: linear-gradient(135deg, rgba(255,111,163,0.92), rgba(78,205,196,0.88));
            color: #0a0a12;
            border: none;
            border-radius: 999px;
            font-family: inherit;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0.4px;
            cursor: pointer;
        }
        .rv-mp-welcome-btn:hover { transform: translateY(-1px); }
        body.embed-mode .rv-mp-welcome { display: none; }

        /* Drive-side joy toasts (drift, etc.). Stacks bottom-right.
           Fades in/out via .show class. Doesn't take pointer events
           so it never blocks driving. */
        .drive-joy-toast {
            position: fixed;
            right: 20px; bottom: 80px;
            padding: 10px 16px;
            background: linear-gradient(135deg, rgba(255, 111, 163, 0.92), rgba(78, 205, 196, 0.88));
            color: #0a0a12;
            font-family: var(--ui-font);
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0.5px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,0.4);
            box-shadow: 0 4px 18px rgba(0,0,0,0.5);
            z-index: 643;
            pointer-events: none;
            opacity: 0;
            transform: translateY(8px);
            transition: opacity 0.25s ease, transform 0.25s ease;
        }
        .drive-joy-toast.show {
            opacity: 1;
            transform: translateY(0);
        }
        body.embed-mode .drive-joy-toast { display: none; }

        /* Touch-pedal labels — overlay text on the gas/brake/drift
           buttons so first-time users know which is which without
           memorizing icon shapes. Hidden on desktop where the
           pedals aren't shown anyway. */
        .touch-pedal-label {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--ui-font);
            font-size: 14px;
            font-weight: 800;
            letter-spacing: 1px;
            color: rgba(255,255,255,0.94);
            text-shadow: 0 2px 6px rgba(0,0,0,0.7);
            pointer-events: none;
            user-select: none;
        }
        .touch-pedal { position: relative; }
        body.easy-drive .touch-pedal { transform: scale(1.18); }
        body.easy-drive .touch-pedal-label { font-size: 17px; }
        /* Hide DRIFT pedal in Easy Drive — handbrake confuses
           casual users. They just need go + brake. */
        body.easy-drive #touch-handbrake { display: none; }

        /* Stuck-detection toast. Pinned center-bottom (above the
           touch pedals on mobile) with a clear "Reset Position"
           CTA. Only visible when .show is added by the JS. */
        #drive-stuck-toast {
            position: fixed;
            left: 50%; bottom: 28px;
            transform: translateX(-50%);
            display: none;
            align-items: center;
            gap: 12px;
            padding: 12px 18px;
            background: rgba(8, 12, 24, 0.94);
            border: 1px solid rgba(255, 111, 163, 0.55);
            border-radius: 999px;
            color: rgba(246, 243, 248, 0.95);
            font-family: var(--ui-font);
            font-size: 14px;
            box-shadow: 0 6px 22px rgba(0,0,0,0.5);
            z-index: 650;
            pointer-events: auto;
        }
        #drive-stuck-toast.show { display: flex; }
        body.embed-mode #drive-stuck-toast { display: none !important; }
        @media (max-width: 600px) {
            #drive-stuck-toast {
                bottom: calc(var(--zone-touch-reserve, 160px) + 24px);
                font-size: 13px;
                max-width: calc(100% - 24px);
            }
        }
        .drive-stuck-btn {
            padding: 8px 14px;
            background: linear-gradient(135deg, rgba(255, 111, 163, 0.92), rgba(78, 205, 196, 0.88));
            color: #0a0a12;
            font-family: var(--ui-font);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.5px;
            border: none;
            border-radius: 999px;
            cursor: pointer;
        }
        .drive-stuck-btn:hover { transform: translateY(-1px); }

        /* WebGL context-loss recovery overlay (#22). A blocking, centered
           recovery card on a dim full-screen scrim — deliberately heavier
           than the position "stuck" toast, because a lost GPU context means
           nothing on the canvas is live until the user restores it. */
        #drive-context-lost {
            position: fixed;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 24px;
            background: rgba(6, 5, 12, 0.82);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            z-index: 1200;
        }
        #drive-context-lost.show { display: flex; }
        .drive-context-lost-card {
            max-width: min(420px, 92vw);
            text-align: center;
            padding: 28px 26px;
            border-radius: 16px;
            background: rgba(12, 10, 18, 0.96);
            border: 1px solid rgba(255, 111, 163, 0.5);
            box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
            color: rgba(246, 243, 248, 0.95);
            font-family: var(--ui-font);
        }
        .drive-context-lost-title {
            margin: 0 0 10px;
            font-size: 20px;
            font-weight: 800;
        }
        .drive-context-lost-msg {
            margin: 0 0 20px;
            font-size: 14px;
            line-height: 1.5;
            color: rgba(246, 243, 248, 0.8);
        }
        .drive-context-lost-btn {
            padding: 12px 24px;
            background: linear-gradient(135deg, rgba(255, 111, 163, 0.95), rgba(78, 205, 196, 0.9));
            color: #0a0a12;
            font-family: var(--ui-font);
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0.5px;
            border: none;
            border-radius: 999px;
            cursor: pointer;
        }
        .drive-context-lost-btn:hover { transform: translateY(-1px); }

        /* Left-handed mode: swap touch-steer-zone and touch-pedals. */
        body.left-handed #touch-steer-zone {
            right: var(--zone-pad, 12px);
            left: auto;
        }
        body.left-handed #touch-pedals {
            left: var(--zone-pad, 12px);
            right: auto;
        }

        /* Camera hint pill — fades in on first session, fades out
           after 6s. Tells users about Q/E orbit / scroll-zoom / M
           rearview / ? help, which are otherwise keyboard-only and
           invisible. localStorage gates re-show. */
        #drive-camera-hint {
            position: fixed;
            left: 50%; bottom: 28px;
            transform: translateX(-50%);
            padding: 8px 16px;
            background: rgba(8, 12, 24, 0.78);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(159, 189, 255, 0.24);
            border-radius: 999px;
            color: rgba(246, 243, 248, 0.9);
            font-family: var(--ui-font);
            font-size: 12px;
            letter-spacing: 0.4px;
            text-shadow: 0 1px 6px rgba(0,0,0,0.5);
            z-index: 615;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s ease;
            max-width: calc(100% - 32px);
            text-align: center;
        }
        #drive-camera-hint.show { opacity: 1; }
        body.embed-mode #drive-camera-hint { display: none; }
        @media (max-width: 600px) {
            #drive-camera-hint {
                font-size: 11px;
                bottom: 84px;
                /* Mobile keyboards aren't this wide. Truncate the
                   single-line hint with ellipsis instead of letting
                   it wrap to 4+ lines. */
                max-width: calc(100vw - 32px);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            /* The floating quality widget (bottom-left, z=1100) was
               sitting on top of the virtual D-pad and FAB drawer
               on mobile. Hide it from the canvas — Settings panel
               still has the same picker. */
            #rv-quality-widget { display: none !important; }
        }
        #help-modal-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(2, 6, 14, 0.64);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            z-index: 900;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 16px;
        }
        #help-modal-backdrop.open {
            display: flex;
        }
        #help-modal {
            width: min(560px, calc(100vw - 20px));
            max-height: min(85vh, 720px);
            overflow-y: auto;
            border-radius: 16px;
            border: 1px solid rgba(170, 198, 255, 0.42);
            background: linear-gradient(160deg, rgba(8, 13, 27, 0.96), rgba(20, 29, 50, 0.94));
            color: #eef4ff;
            box-shadow: 0 22px 46px rgba(0, 0, 0, 0.5);
            padding: 16px 16px 14px;
            font-family: var(--ui-font);
        }
        #help-modal h3 {
            font-size: 18px;
            margin-bottom: 8px;
            letter-spacing: 0.01em;
        }
        #help-modal p {
            font-size: 13px;
            line-height: 1.55;
            color: #c6d3f2;
            margin: 0 0 8px;
        }
        #help-modal .help-sections {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin: 12px 0;
        }
        #help-modal .help-section {
            border: 1px solid rgba(157, 187, 248, 0.28);
            border-radius: 10px;
            padding: 10px 11px;
            background: rgba(11, 19, 36, 0.78);
        }
        #help-modal .help-section h4 {
            font-size: 13px;
            margin-bottom: 6px;
            color: #eaf2ff;
        }
        #help-modal .help-section ul {
            list-style: none;
            font-size: 12px;
            line-height: 1.5;
            color: #c1cceb;
        }
        #help-modal .help-section li {
            margin-bottom: 3px;
        }
        #help-modal .help-actions {
            display: flex;
            justify-content: flex-end;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 12px;
        }
        #help-modal button {
            min-height: 40px;
            border-radius: 9px;
            border: 1px solid rgba(170, 198, 255, 0.4);
            background: rgba(23, 39, 74, 0.92);
            color: #eff4ff;
            font-size: 13px;
            font-family: var(--ui-font);
            padding: 9px 14px;
            cursor: pointer;
        }
        #help-modal button:hover {
            background: rgba(44, 73, 132, 0.96);
        }
        #tutorial-overlay {
            position: fixed;
            inset: 0;
            display: none;
            z-index: 930;
        }
        #tutorial-overlay.active {
            display: block;
        }
        #tutorial-dim {
            position: absolute;
            inset: 0;
            background: rgba(2, 7, 18, 0.62);
        }
        #tutorial-focus {
            position: fixed;
            border-radius: 14px;
            border: 2px solid rgba(167, 205, 255, 0.92);
            box-shadow: 0 0 0 2px rgba(205, 228, 255, 0.36), 0 0 28px rgba(107, 167, 255, 0.38);
            pointer-events: none;
            z-index: 932;
            transition: all 0.16s ease;
        }
        #tutorial-card {
            position: fixed;
            width: min(360px, calc(100vw - 24px));
            border-radius: 14px;
            border: 1px solid rgba(167, 198, 255, 0.52);
            background: linear-gradient(150deg, rgba(8, 13, 28, 0.96), rgba(21, 31, 56, 0.95));
            box-shadow: 0 22px 46px rgba(0,0,0,0.52);
            color: #eef4ff;
            font-family: var(--ui-font);
            padding: 12px;
            z-index: 933;
            pointer-events: auto;
        }
        #tutorial-step-count {
            font-size: 11px;
            color: #a8bcdf;
            margin-bottom: 4px;
        }
        #tutorial-title {
            font-size: 15px;
            margin-bottom: 6px;
        }
        #tutorial-body {
            font-size: 12px;
            line-height: 1.5;
            color: #c8d6f3;
            margin-bottom: 9px;
        }
        #tutorial-card .tutorial-actions {
            display: flex;
            justify-content: space-between;
            gap: 8px;
        }
        #tutorial-card button {
            min-height: 40px;
            border-radius: 8px;
            border: 1px solid rgba(165, 197, 255, 0.42);
            background: rgba(27, 46, 87, 0.9);
            color: #eff5ff;
            font-size: 12px;
            font-family: var(--ui-font);
            padding: 9px 12px;
            cursor: pointer;
        }
        #tutorial-card button:disabled {
            opacity: 0.45;
            cursor: default;
        }
        #tutorial-card button:hover:not(:disabled) {
            background: rgba(49, 82, 146, 0.95);
        }
        #ui-tooltip {
            position: fixed;
            left: 0;
            top: 0;
            transform: translate(-50%, calc(-100% - 12px));
            pointer-events: none;
            z-index: 980;
            display: none;
            max-width: min(260px, calc(100vw - 20px));
            border: 1px solid rgba(170, 198, 255, 0.45);
            border-radius: 8px;
            background: rgba(7, 11, 23, 0.95);
            color: #f2f7ff;
            font-family: var(--ui-font);
            font-size: 12px;
            line-height: 1.35;
            padding: 6px 8px;
            box-shadow: 0 10px 24px rgba(0,0,0,0.45);
        }
        #ui-tooltip.below {
            transform: translate(-50%, 12px);
        }

        /* Embed mode responsiveness: keep key controls visible inside iframes */
        .embed-mode #fullscreen-btn {
            top: max(8px, env(safe-area-inset-top));
            right: max(8px, env(safe-area-inset-right));
            padding: 8px 12px;
            font-size: 14px;
            z-index: 550;
        }

        .embed-mode #drive-actions {
            top: auto !important;
            right: auto !important;
            left: 50% !important;
            bottom: max(10px, env(safe-area-inset-bottom)) !important;
            transform: translateX(-50%);
            display: flex !important;
            gap: 8px;
            z-index: 550;
        }

        .embed-mode #drive-actions button {
            padding: 8px 12px !important;
            font-size: 13px !important;
        }
        body.embed-mode #hud,
        body.embed-mode #racer-select,
        body.embed-mode #speedometer,
        body.embed-mode #pip-container,
        body.embed-mode #rearview-container,
        body.embed-mode #mp-minimap,
        body.embed-mode #mp-panel,
        body.embed-mode #drive-camera-hint,
        body.embed-mode .drive-return-link {
            display: none !important;
        }
        body.embed-mode #drive-mode-select,
        body.embed-mode #help-btn,
        body.embed-mode #pause-btn,
        body.embed-mode #cruise-btn,
        body.embed-mode #shuffleRacer-btn {
            display: none !important;
        }
        body.embed-mode #drive-toolbar {
            gap: 6px;
            z-index: 700;
        }
        body.embed-mode #resetCam-btn {
            min-width: 44px;
            min-height: 40px;
            font-size: 0 !important;
        }
        body.embed-mode #resetCam-btn::before {
            content: 'Reset';
            font-size: 12px;
        }
        .embed-mode #help-btn {
            top: max(8px, env(safe-area-inset-top));
            right: calc(max(8px, env(safe-area-inset-right)) + 112px);
        }
        .embed-mode #hud,
        .embed-mode #racer-select,
        .embed-mode #speedometer {
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border-color: rgba(255,255,255,0.2);
            box-shadow: 0 6px 20px rgba(0,0,0,0.35);
        }
        .embed-mode #pip-container,
        .embed-mode #rearview-container {
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            background: transparent;
            border-color: rgba(255,255,255,0.2);
            box-shadow: 0 6px 20px rgba(0,0,0,0.35);
        }
        .embed-mode #hud {
            top: max(10px, env(safe-area-inset-top));
            left: max(10px, env(safe-area-inset-left));
            max-width: 320px;
            padding: 10px 12px;
            background: rgba(8,12,24,0.66);
            z-index: 560;
        }
        .embed-mode #racer-select {
            left: max(10px, env(safe-area-inset-left));
            bottom: max(10px, env(safe-area-inset-bottom));
            background: rgba(8,12,24,0.66);
            z-index: 560;
        }
        .embed-mode #speedometer {
            bottom: max(10px, env(safe-area-inset-bottom));
            background: rgba(8,12,24,0.72);
            z-index: 560;
        }
        .embed-mode #pip-container {
            right: max(10px, env(safe-area-inset-right));
            bottom: max(10px, env(safe-area-inset-bottom));
            z-index: 558;
        }
        .embed-mode #rearview-container {
            top: max(10px, env(safe-area-inset-top));
            z-index: 557;
        }

        @media (max-width: 900px) {
            #mobile-drive-ui {
                display: block;
            }
            #fullscreen-btn {
                padding: 8px 10px;
                font-size: 13px;
                z-index: 615;
            }
            #help-btn {
                width: 38px;
                height: 38px;
                font-size: 17px;
            }
            #hud {
                right: var(--zone-safe-right);
                width: auto;
                max-width: calc(100vw - var(--zone-safe-left) - var(--zone-safe-right));
                padding: 10px 12px;
                font-size: 12px;
                z-index: 610;
            }
            #hud h2 {
                font-size: 15px;
                margin-bottom: 6px;
            }
            #racer-select {
                right: var(--zone-safe-right);
                bottom: calc(var(--zone-safe-bottom) + var(--zone-touch-reserve) + var(--zone-gap));
                padding: 8px 10px;
                gap: 5px;
                z-index: 610;
            }
            #racer-select select {
                font-size: 12px;
                padding: 4px 7px;
            }
            #racer-select input {
                width: 72px;
                font-size: 12px;
                padding: 5px 6px;
            }
            #racer-select button {
                font-size: 14px;
                padding: 5px 9px;
            }
            #drive-actions {
                display: none !important;
            }
            #speedometer {
                min-width: 88px;
                min-height: 56px;
                padding: 8px;
                z-index: 605;
            }
            #speedometer .speed {
                font-size: 28px;
            }
            #speedometer .distance {
                font-size: 13px;
            }
            #speedometer-resize,
            #pip-resize,
            #rearview-resize {
                display: none;
            }
            #speedometer .panel-collapse-btn,
            #pip-container .panel-collapse-btn,
            #rearview-container .panel-collapse-btn {
                top: 5px;
                right: 5px;
                width: 18px;
                height: 18px;
                font-size: 11px;
            }
            #pip-container {
                width: 140px;
                height: 140px;
                bottom: calc(var(--zone-safe-bottom) + var(--zone-touch-reserve));
                z-index: 603;
            }
            #rearview-container {
                width: 260px;
                height: 80px;
                z-index: 602;
            }
            #crew-cameras {
                bottom: calc(var(--zone-safe-bottom) + var(--zone-touch-reserve) + var(--zone-gap));
            }
            #loading {
                font-size: 18px;
            }
            #help-modal .help-sections {
                grid-template-columns: 1fr;
            }
            .embed-mode #drive-actions {
                width: calc(100vw - 16px);
                justify-content: center;
                flex-wrap: wrap;
            }

            .embed-mode #fullscreen-btn {
                font-size: 13px;
                padding: 7px 10px;
            }
        }

        @media (max-width: 520px) {
            /* Bottom sheet keeps its full-width geometry on phones (#20);
               only the open-state z-index + touch-suppression guards stay. */
            #mobile-drive-ui.open #mobile-drive-fab {
                z-index: 1002 !important;
            }
            body.mobile-drive-menu-open #touch-controls,
            body.mobile-drive-menu-open #touch-steer-zone,
            body.mobile-drive-menu-open #touch-pedals,
            body.mobile-drive-menu-open #rv-session-summary,
            body.mobile-drive-menu-open .rv-audio-ui {
                pointer-events: none !important;
            }
            body.mobile-drive-menu-open #ui-tooltip {
                display: none !important;
            }
            .mobile-drive-action {
                box-sizing: border-box !important;
                min-height: 44px;
                font-size: 11px;
                padding: 6px 10px 6px 6px;
                letter-spacing: 0;
            }
            .embed-mode #drive-actions {
                bottom: max(6px, env(safe-area-inset-bottom)) !important;
                gap: 6px;
            }

            .embed-mode #drive-actions button {
                padding: 7px 10px !important;
                font-size: 12px !important;
            }
            #tutorial-card {
                width: calc(100vw - 16px);
            }
        }

        .embed-mode #mobile-drive-ui {
            display: none !important;
        }
        @media (max-width: 900px) {
            .embed-mode #mobile-drive-ui {
                display: none !important;
            }
        }

        /* ── Mobile touch driving controls ────────────────────────────── */
        #touch-controls {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 90;
            pointer-events: none;
        }
        @media (max-width: 900px) {
            #touch-controls { display: block; }
        }
        /* Left: steering joystick zone */
        #touch-steer-zone {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 44vw;
            height: 40vh;
            pointer-events: auto;
            touch-action: none;
        }
        #touch-steer-base {
            position: absolute;
            left: max(24px, env(safe-area-inset-left, 0px));
            bottom: calc(60px + env(safe-area-inset-bottom, 0px));
            width: 130px;
            height: 130px;
            background-image: url('/assets/kenney/mobile-controls/joystick_circle_pad_a.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            background-color: transparent;
            pointer-events: none;
            opacity: 0.75;
        }
        #touch-steer-knob {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 54px;
            height: 54px;
            margin: -27px 0 0 -27px;
            background-image: url('/assets/kenney/mobile-controls/joystick_circle_nub_a.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            background-color: transparent;
            pointer-events: none;
            transition: none;
        }
        /* Right: gas / brake pedals */
        #touch-pedals {
            position: absolute;
            right: max(16px, env(safe-area-inset-right, 0px));
            bottom: calc(60px + env(safe-area-inset-bottom, 0px));
            display: flex;
            flex-direction: column;
            gap: 12px;
            pointer-events: auto;
            touch-action: none;
        }
        .touch-pedal {
            width: 76px;
            height: 76px;
            background-image: url('/assets/kenney/mobile-controls/button_circle.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            background-color: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            user-select: none;
            -webkit-user-select: none;
            pointer-events: auto;
            touch-action: none;
            /* Was opacity 0.82 — looked washed-out against the
               road and the on-screen virtual D-pad. Bumped to 0.96
               idle / 1.0 active. Drop-shadow gives the buttons
               readable contrast against any biome's background
               (sky, grass, sand) without darkening the canvas. */
            opacity: 0.96;
            filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
            transition: opacity 0.08s, filter 0.08s;
        }
        .touch-pedal img.pedal-icon {
            width: 46%;
            height: 46%;
            object-fit: contain;
            pointer-events: none;
            filter: brightness(0) invert(1);
            opacity: 1;
        }
        .touch-pedal.active { opacity: 1; }
        /* Per-pedal filter rules also chain in the legibility
           drop-shadow that the .touch-pedal base would set; CSS
           filter doesn't compose across selectors so each rule
           has to include its own drop-shadow. */
        #touch-gas { filter: hue-rotate(90deg) saturate(1.4) drop-shadow(0 2px 6px rgba(0,0,0,0.55)); }
        #touch-gas.active { filter: hue-rotate(90deg) saturate(2) brightness(1.25) drop-shadow(0 0 6px rgba(100,255,140,0.8)); }
        #touch-brake { filter: hue-rotate(320deg) saturate(1.6) drop-shadow(0 2px 6px rgba(0,0,0,0.55)); }
        #touch-brake.active { filter: hue-rotate(320deg) saturate(2.5) brightness(1.25) drop-shadow(0 0 6px rgba(255,100,100,0.8)); }
        #touch-handbrake {
            width: 52px;
            height: 52px;
            align-self: center;
            filter: hue-rotate(40deg) saturate(1.4) drop-shadow(0 2px 6px rgba(0,0,0,0.55));
        }
        #touch-handbrake.active { filter: hue-rotate(40deg) saturate(2) brightness(1.3) drop-shadow(0 0 6px rgba(255,200,60,0.8)); }

        /* ── Mobile HUD layout (≤900px) ────────────────────────────
         * Mobile drive needs a careful zone layout because the touch
         * pedals consume the bottom region and the toolbar lives top-
         * right. We pin the speedometer to TOP-LEFT as a compact chip
         * (no centered-translateX) so it never overlaps the toolbar
         * regardless of viewport width. The override blocks both the
         * draggable JS (which would put it bottom-center on desktop)
         * and the older centered-top rule (which collided with the
         * toolbar on every phone narrower than 400px).
         */
        @media (max-width: 900px) {
            #speedometer {
                left: var(--zone-safe-left) !important;
                top: var(--zone-safe-top) !important;
                right: auto !important;
                bottom: auto !important;
                transform: none !important;
                /* Was 96x56 — too narrow for "0 mph" + the resize
                   chevron, so the 'h' got clipped. Bump width and
                   reduce font slightly so 0–999 mph all fit. */
                width: 112px !important;
                height: 56px !important;
                min-width: 0 !important;
                min-height: 0 !important;
                padding: 6px 10px !important;
                overflow: visible !important;
                white-space: nowrap !important;
            }
            #speedometer .speed {
                font-size: 20px !important;
                white-space: nowrap !important;
            }
            #speedometer .distance {
                font-size: 11px !important;
                white-space: nowrap !important;
            }
            /* Hide the draggable resize handle on mobile — touch users
               don't expect to drag/resize a pinned chip. */
            #speedometer-resize {
                display: none !important;
            }
            /* Drive toolbar at top-right keeps its own width budget. The
               !important ensures we beat any future inline-style drift
               from drag/positioning JS. */
            #drive-toolbar {
                top: var(--zone-safe-top) !important;
                right: var(--zone-safe-right) !important;
                left: auto !important;
                gap: 6px !important;
            }
            /* Cruise / Reset Cam are keyboard shortcuts on desktop and
               clutter the mobile toolbar at narrow widths. The
               existing rule above also says display:none !important
               but we re-assert here under a more specific selector to
               beat any future CSS drift. */
            body #drive-actions,
            body:not(.embed-mode) #drive-actions {
                display: none !important;
            }
            /* Racer-select stays at bottom-LEFT on mobile (set by
               redesign-2026.css) so it doesn't collide with the
               #mobile-drive-fab at bottom-right. We deliberately do
               NOT override its position here — the redesign rule
               already pins it to (16, 16) bottom-left. */
        }

        /* Fullscreen prompt banner */
        #fullscreen-prompt {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            padding: 10px 16px;
            background: rgba(0,0,0,0.85);
            color: #fff;
            font-family: var(--ui-font);
            font-size: 14px;
            text-align: center;
            z-index: 700;
            cursor: pointer;
            border-bottom: 1px solid rgba(255,255,255,0.2);
        }
        #fullscreen-prompt span {
            text-decoration: underline;
            font-weight: 600;
        }

        /* ── Streamer mode: ?streamer=true ── */
        body.streamer { background: transparent !important; }
        body.streamer #hud,
        body.streamer #racer-select,
        body.streamer #speedometer,
        body.streamer #fullscreen-btn,
        body.streamer #drive-actions,
        body.streamer #pip-container,
        body.streamer #rearview-container,
        body.streamer #loading,
        body.streamer #touch-controls,
        body.streamer #mobile-drive-ui,
        body.streamer #fullscreen-prompt { display: none !important; }
        /* Green-screen variant: ?streamer=green */
        body.streamer-green { background: #00ff00 !important; }
        body.streamer-green #hud,
        body.streamer-green #racer-select,
        body.streamer-green #speedometer,
        body.streamer-green #fullscreen-btn,
        body.streamer-green #drive-actions,
        body.streamer-green #pip-container,
        body.streamer-green #rearview-container,
        body.streamer-green #loading,
        body.streamer-green #touch-controls,
        body.streamer-green #mobile-drive-ui,
        body.streamer-green #fullscreen-prompt { display: none !important; }

        /* ── Multiplayer Panel ───────────────────── */
        #mp-panel {
            position: fixed;
            top: calc(var(--zone-safe-top) + var(--zone-toolbar-h) + var(--zone-gap));
            right: var(--zone-safe-right);
            background: linear-gradient(165deg, rgba(10, 14, 24, 0.82), rgba(6, 10, 18, 0.78));
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(78, 205, 196, 0.25);
            box-shadow: 0 0 20px rgba(78, 205, 196, 0.08), 0 8px 32px rgba(0,0,0,0.4);
            border-radius: 14px;
            padding: 0;
            color: #fff;
            font-family: var(--ui-font);
            font-size: 13px;
            z-index: 100;
            width: 260px;
            /* slide-in animation */
            transform: translateX(0);
            opacity: 1;
            transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s ease;
            overflow: hidden;
        }
        #mp-panel.mp-hidden {
            transform: translateX(calc(100% + 20px));
            opacity: 0;
            pointer-events: none;
        }
        #mp-panel.mp-collapsed #mp-lobby,
        #mp-panel.mp-collapsed #mp-session-body { display: none !important; }
        #mp-panel.mp-collapsed { border-radius: 10px; }

        /* Title bar */
        .mp-title-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 14px 10px;
        }
        .mp-title {
            font-weight: 700;
            font-size: 15px;
            margin: 0;
            color: #4ECDC4;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .mp-title-icon {
            display: inline-flex;
            width: 18px; height: 18px;
            align-items: center; justify-content: center;
            font-size: 14px;
        }
        .mp-collapse-btn {
            width: 26px !important; height: 26px; min-width: 26px;
            padding: 0 !important; margin: 0;
            display: flex; align-items: center; justify-content: center;
            background: rgba(255,255,255,0.06) !important;
            border: 1px solid rgba(255,255,255,0.1) !important;
            border-radius: 6px !important;
            font-size: 16px; line-height: 1;
            color: rgba(255,255,255,0.5) !important;
            cursor: pointer;
            transition: background 0.15s, color 0.15s;
        }
        .mp-collapse-btn:hover { background: rgba(255,255,255,0.12) !important; color: #fff !important; }

        .mp-panel-body {
            padding: 0 14px 14px;
        }

        /* Section headers */
        .mp-section-label {
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            color: rgba(78, 205, 196, 0.6);
            margin: 10px 0 6px;
            padding-bottom: 4px;
            border-bottom: 1px solid rgba(78, 205, 196, 0.1);
        }

        /* Inputs */
        #mp-panel input[type="text"] {
            width: 100%;
            box-sizing: border-box;
            padding: 8px 10px;
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 8px;
            background: rgba(255,255,255,0.06);
            color: #fff;
            font-size: 13px;
            margin-bottom: 8px;
            outline: none;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        #mp-panel input[type="text"]:focus {
            border-color: rgba(78, 205, 196, 0.6);
            box-shadow: 0 0 0 2px rgba(78, 205, 196, 0.12);
        }
        #mp-panel input[type="text"]::placeholder { color: rgba(255,255,255,0.3); }

        /* Name input wrapper with icon */
        .mp-input-wrap {
            position: relative;
        }
        .mp-input-icon {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 13px;
            color: rgba(255,255,255,0.3);
            pointer-events: none;
            margin-top: -4px;
        }
        #mp-name { padding-left: 32px; }

        .mp-row {
            display: flex;
            gap: 6px;
            margin-bottom: 6px;
        }
        .mp-row input { flex: 1; margin-bottom: 0; }
        #mp-join-code {
            flex: none !important;
            width: 100px !important;
            font-family: 'Courier New', Courier, monospace;
            font-size: 18px !important;
            font-weight: 700;
            letter-spacing: 5px;
            text-align: center;
            padding: 9px 6px !important;
            padding-left: 6px !important;
            background: rgba(255,255,255,0.08) !important;
            border: 1px solid rgba(78, 205, 196, 0.2) !important;
        }
        #mp-join-code:focus {
            border-color: rgba(78, 205, 196, 0.6) !important;
            box-shadow: 0 0 0 2px rgba(78, 205, 196, 0.15);
        }
        .mp-row button { flex: 1; }
        .mp-divider {
            text-align: center;
            color: rgba(255,255,255,0.25);
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin: 10px 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .mp-divider::before, .mp-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: rgba(255,255,255,0.1);
        }

        /* Base button style */
        #mp-panel button {
            width: 100%;
            padding: 8px 14px;
            border: none;
            border-radius: 8px;
            background: rgba(255,255,255,0.08);
            color: #fff;
            font-weight: 600;
            font-size: 13px;
            cursor: pointer;
            transition: background 0.15s, transform 0.1s, box-shadow 0.15s, border-color 0.15s;
        }
        #mp-panel button:hover { background: rgba(255,255,255,0.14); }
        #mp-panel button:active { transform: scale(0.98); }

        /* Create Room — primary teal gradient */
        #mp-host-btn {
            background: linear-gradient(135deg, #3db8b0, #4ECDC4) !important;
            color: #fff !important;
            font-size: 14px !important;
            padding: 10px 14px !important;
            border-radius: 10px !important;
            box-shadow: 0 2px 12px rgba(78, 205, 196, 0.25);
        }
        #mp-host-btn:hover {
            box-shadow: 0 4px 18px rgba(78, 205, 196, 0.35) !important;
            background: linear-gradient(135deg, #45c4bc, #5cd8d0) !important;
        }

        /* Join button — solid teal accent */
        #mp-join-btn {
            background: linear-gradient(135deg, #3db8b0, #4ECDC4) !important;
            color: #fff !important;
        }
        #mp-join-btn:hover {
            background: linear-gradient(135deg, #45c4bc, #5cd8d0) !important;
        }

        /* Browse Public Rooms — outline/secondary style */
        #mp-browse-btn {
            background: transparent !important;
            border: 1px solid rgba(78, 205, 196, 0.3) !important;
            color: rgba(78, 205, 196, 0.8) !important;
            font-size: 12px !important;
            margin-top: 6px;
        }
        #mp-browse-btn:hover {
            background: rgba(78, 205, 196, 0.08) !important;
            border-color: rgba(78, 205, 196, 0.5) !important;
            color: #4ECDC4 !important;
        }

        /* Public room list items */
        .mp-public-room-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 6px 8px;
            border-radius: 8px;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.05);
            transition: background 0.15s, border-color 0.15s;
            margin-bottom: 4px;
        }
        .mp-public-room-item:hover {
            background: rgba(78, 205, 196, 0.06);
            border-color: rgba(78, 205, 196, 0.2);
        }
        .mp-public-room-info {
            flex: 1; min-width: 0;
        }
        .mp-public-room-name {
            font-size: 12px; font-weight: 600;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .mp-public-room-meta {
            font-size: 10px; color: rgba(255,255,255,0.45);
        }
        .mp-public-room-badge {
            display: inline-block;
            font-size: 10px;
            font-weight: 700;
            background: rgba(78, 205, 196, 0.2);
            color: #4ECDC4;
            padding: 1px 6px;
            border-radius: 10px;
            margin-left: 6px;
            flex-shrink: 0;
        }
        .mp-public-room-join {
            padding: 4px 12px !important;
            font-size: 11px !important;
            width: auto !important;
            border-radius: 6px !important;
            background: rgba(78, 205, 196, 0.15) !important;
            border: 1px solid rgba(78, 205, 196, 0.3) !important;
            color: #4ECDC4 !important;
            flex-shrink: 0;
            margin-left: 8px;
        }
        .mp-public-room-join:hover {
            background: rgba(78, 205, 196, 0.3) !important;
            border-color: #4ECDC4 !important;
        }

        /* Player list */
        #mp-player-list {
            display: flex;
            flex-direction: column;
            gap: 5px;
            margin-bottom: 10px;
        }
        .mp-player-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
            padding: 7px 10px;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.05);
            border-radius: 8px;
            transition: background 0.15s, border-color 0.15s;
        }
        .mp-player-row:hover {
            background: rgba(255,255,255,0.07);
            border-color: rgba(78, 205, 196, 0.15);
        }
        .mp-player-name {
            font-size: 13px;
            font-weight: 600;
            color: rgba(255,255,255,0.85);
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .mp-player-actions {
            display: flex;
            gap: 4px;
            flex-shrink: 0;
        }
        .mp-follow-btn {
            padding: 3px 10px !important;
            font-size: 11px !important;
            width: auto !important;
            border-radius: 20px !important;
            background: rgba(78, 205, 196, 0.1) !important;
            border: 1px solid rgba(78, 205, 196, 0.25) !important;
            color: rgba(78, 205, 196, 0.8) !important;
            transition: all 0.2s !important;
        }
        .mp-follow-btn:hover {
            background: rgba(78, 205, 196, 0.2) !important;
            border-color: rgba(78, 205, 196, 0.5) !important;
            color: #4ECDC4 !important;
        }
        .mp-follow-btn.active {
            background: rgba(78, 205, 196, 0.35) !important;
            border-color: #4ECDC4 !important;
            color: #fff !important;
            box-shadow: 0 0 10px rgba(78, 205, 196, 0.3) !important;
        }

        /* Session room code display */
        #mp-room-code {
            font-family: 'Courier New', Courier, monospace;
            font-size: 22px;
            font-weight: 700;
            letter-spacing: 4px;
            color: #fff;
            cursor: pointer;
            transition: color 0.15s;
        }
        #mp-room-code:hover { color: #4ECDC4; }
        .mp-room-code-wrap {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 4px;
        }
        .mp-room-code-copy-hint {
            font-size: 10px;
            color: rgba(255,255,255,0.3);
            font-style: italic;
        }

        /* Player count with pulsing dot */
        #mp-players {
            color: rgba(255,255,255,0.6);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
        }
        .mp-status-dot {
            width: 8px; height: 8px;
            border-radius: 50%;
            background: #4ade80;
            display: inline-block;
            animation: mp-dot-pulse 2s ease-in-out infinite;
        }
        @keyframes mp-dot-pulse {
            0%, 100% { opacity: 1; box-shadow: 0 0 4px rgba(74, 222, 128, 0.4); }
            50% { opacity: 0.5; box-shadow: 0 0 8px rgba(74, 222, 128, 0.6); }
        }

        /* Share section */
        .mp-share {
            font-size: 11px;
            color: rgba(255,255,255,0.35);
            margin-bottom: 8px;
            word-break: break-all;
            display: none;
        }
        #mp-share-url { color: rgba(78, 205, 196, 0.7); }
        #mp-share-toggle {
            background: rgba(255,255,255,0.05) !important;
            border: 1px solid rgba(255,255,255,0.1) !important;
            margin-bottom: 6px;
        }
        #mp-share-options {
            display: flex;
            flex-direction: row;
            gap: 6px;
            margin-bottom: 8px;
        }
        .mp-share-row {
            display: flex;
            flex-direction: row;
            gap: 6px;
            width: 100%;
        }
        .mp-social-btn {
            flex: 1;
            background: rgba(255,255,255,0.06) !important;
            border: 1px solid rgba(255,255,255,0.1) !important;
            font-size: 12px !important;
            border-radius: 8px !important;
            padding: 7px 8px !important;
            display: flex; align-items: center; justify-content: center; gap: 4px;
        }
        .mp-social-btn:hover { background: rgba(255,255,255,0.12) !important; border-color: rgba(255,255,255,0.2) !important; }
        #mp-copy-btn {
            flex: 1;
            background: rgba(78, 205, 196, 0.15) !important;
            border: 1px solid rgba(78, 205, 196, 0.25) !important;
            color: #4ECDC4 !important;
            border-radius: 8px !important;
            display: flex; align-items: center; justify-content: center; gap: 4px;
        }
        #mp-copy-btn:hover {
            background: rgba(78, 205, 196, 0.25) !important;
        }

        /* Leave button — destructive style */
        #mp-leave-btn {
            background: transparent !important;
            border: 1px solid rgba(239, 68, 68, 0.4) !important;
            color: #ef4444 !important;
            margin-top: 8px;
        }
        #mp-leave-btn:hover {
            background: rgba(239, 68, 68, 0.1) !important;
            border-color: #ef4444 !important;
        }

        #mp-error {
            color: #FF6B6B;
            font-size: 12px;
            margin-top: 6px;
            padding: 4px 8px;
            border-radius: 6px;
            background: rgba(255, 107, 107, 0.08);
        }

        /* Minimap */
        #mp-minimap {
            position: fixed;
            bottom: 70px;
            left: 16px;
            width: 160px;
            height: 160px;
            border-radius: 50%;
            border: 2px solid rgba(78, 205, 196, 0.3);
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            box-shadow: 0 0 16px rgba(78, 205, 196, 0.1), 0 0 32px rgba(0,0,0,0.3);
            z-index: 80;
            overflow: visible;
            display: none;
        }
        #mp-minimap canvas {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
        .mp-minimap-badge {
            position: absolute;
            top: -2px;
            right: -2px;
            min-width: 20px; height: 20px;
            border-radius: 10px;
            background: linear-gradient(135deg, #3db8b0, #4ECDC4);
            color: #fff;
            font-size: 10px;
            font-weight: 700;
            font-family: var(--ui-font);
            display: flex; align-items: center; justify-content: center;
            padding: 0 5px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.3);
            z-index: 1;
        }

        body.embed #mp-panel { display: none !important; }

        /* ── Racer Context Menu ───────────── */
        #racer-context-menu {
            position: fixed;
            z-index: 1100;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(78, 205, 196, 0.4);
            border-radius: 10px;
            padding: 8px;
            min-width: 120px;
        }
        .rcm-name {
            font-family: var(--ui-font);
            font-size: 12px;
            font-weight: 600;
            color: #4ECDC4;
            padding: 4px 8px 6px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
            margin-bottom: 4px;
        }
        .rcm-btn {
            display: block;
            width: 100%;
            padding: 6px 10px;
            border: none;
            border-radius: 6px;
            background: transparent;
            color: rgba(255,255,255,0.8);
            font-family: var(--ui-font);
            font-size: 12px;
            text-align: left;
            cursor: pointer;
            transition: background 0.12s;
        }
        .rcm-btn:hover {
            background: rgba(78, 205, 196, 0.2);
            color: #fff;
        }

        /* ── Crew Camera Panels ──────────── */
        #crew-cameras {
            position: fixed;
            right: var(--zone-safe-right);
            bottom: var(--zone-safe-bottom);
            display: flex;
            flex-direction: column-reverse;
            gap: 8px;
            z-index: 90;
            pointer-events: none;
        }
        .crew-cam {
            width: 200px;
            height: 120px;
            border-radius: 12px;
            border: 2px solid rgba(78, 205, 196, 0.3);
            overflow: hidden;
            position: relative;
            background: rgba(0,0,0,0.4);
            pointer-events: auto;
            cursor: pointer;
            box-shadow: 0 0 12px rgba(78, 205, 196, 0.08);
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        }
        .crew-cam:hover {
            transform: scale(1.04);
            box-shadow: 0 0 20px rgba(78, 205, 196, 0.2);
            border-color: rgba(78, 205, 196, 0.5);
        }
        .crew-cam.nearby {
            animation: crew-cam-pulse 2s ease-in-out infinite;
        }
        @keyframes crew-cam-pulse {
            0%, 100% { border-color: rgba(78, 205, 196, 0.3); box-shadow: 0 0 12px rgba(78, 205, 196, 0.08); }
            50% { border-color: rgba(78, 205, 196, 0.6); box-shadow: 0 0 24px rgba(78, 205, 196, 0.2); }
        }
        .crew-cam-label {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 6px 10px;
            background: linear-gradient(transparent, rgba(0,0,0,0.8));
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            color: #fff;
            font-family: var(--ui-font);
            font-size: 11px;
            font-weight: 700;
            pointer-events: none;
        }
        .crew-cam-speed {
            float: right;
            font-weight: 600;
            font-size: 11px;
        }
        .crew-cam-speed.speed-fast { color: #4ade80; }
        .crew-cam-speed.speed-medium { color: #facc15; }
        .crew-cam-speed.speed-slow { color: #ef4444; }
        @media (max-width: 600px) {
            #crew-cameras { right: var(--zone-safe-right); bottom: calc(var(--zone-safe-bottom) + var(--zone-touch-reserve) + var(--zone-gap)); }
            .crew-cam { width: 140px; height: 84px; }
            .crew-cam-label { font-size: 9px; }
        }

        /* ── Player direction indicators ──── */
        #mp-indicators {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 800;
        }
        .mp-indicator {
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3px;
            transform: translate(-50%, -50%);
            transition: opacity 0.3s;
        }
        .mp-indicator-arrow {
            width: 0; height: 0;
            border-left: 12px solid transparent;
            border-right: 12px solid transparent;
            border-bottom: 18px solid #4ECDC4;
            filter: drop-shadow(0 0 6px rgba(78, 205, 196, 0.7)) drop-shadow(0 0 12px rgba(78, 205, 196, 0.3));
        }
        .mp-indicator.nearby .mp-indicator-arrow {
            animation: indicator-pulse 1.5s ease-in-out infinite;
            border-bottom-color: #5ee8df;
        }
        @keyframes indicator-pulse {
            0%, 100% { filter: drop-shadow(0 0 6px rgba(78, 205, 196, 0.7)) drop-shadow(0 0 12px rgba(78, 205, 196, 0.3)); }
            50% { filter: drop-shadow(0 0 10px rgba(78, 205, 196, 0.9)) drop-shadow(0 0 20px rgba(78, 205, 196, 0.5)); }
        }
        .mp-indicator-name {
            font-family: var(--ui-font);
            font-size: 11px;
            font-weight: 700;
            color: #fff;
            text-shadow: 0 1px 4px rgba(0,0,0,0.6);
            white-space: nowrap;
        }
        .mp-indicator-label {
            font-family: var(--ui-font);
            font-size: 10px;
            font-weight: 600;
            color: rgba(78, 205, 196, 0.9);
            background: rgba(0, 0, 0, 0.55);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            padding: 2px 8px;
            border-radius: 6px;
            white-space: nowrap;
            border: 1px solid rgba(78, 205, 196, 0.15);
        }
        /* ── Open World mode select ─────── */
        #drive-mode-select {
            padding: 5px 10px;
            font-size: 13px;
            border-radius: 8px;
            background: rgba(0,0,0,0.55);
            backdrop-filter: blur(6px);
            border: 1px solid rgba(255,255,255,0.08);
            color: rgba(255,255,255,0.85);
            cursor: pointer;
            font-family: var(--ui-font);
            transition: background 0.15s, border-color 0.15s;
            appearance: none;
            -webkit-appearance: none;
        }
        #drive-mode-select:hover {
            background: rgba(40,40,70,0.7);
            border-color: rgba(78, 205, 196, 0.3);
        }
        #drive-mode-select option {
            background: #1a1a2e;
            color: #f4f8ff;
        }
        /* ── Map minimap overlay ───────── */
        #map-minimap {
            position: fixed;
            top: calc(var(--zone-safe-top) + var(--zone-toolbar-h) + var(--zone-gap));
            right: var(--zone-safe-right);
            z-index: 90;
            border-radius: 50%;
            border: 2px solid rgba(255,255,255,0.3);
            box-shadow: 0 2px 12px rgba(0,0,0,0.5);
        }
        /* ── Responsive ───────────────────── */
        @media (max-width: 600px) {
            #hud { display: none; }
            #racer-select { bottom: var(--zone-safe-bottom); left: var(--zone-safe-left); right: var(--zone-safe-right); padding: 6px 8px; }
            #drive-toolbar { gap: 4px; }
            #drive-toolbar button { padding: 6px 10px; font-size: 12px; }
            #help-btn { width: 30px; height: 30px; font-size: 14px; }
            #mp-panel { top: calc(var(--zone-safe-top) + var(--zone-toolbar-h) + var(--zone-gap)); right: var(--zone-safe-right); left: var(--zone-safe-left); width: auto; }
            #mp-minimap { width: 100px; height: 100px; bottom: calc(var(--zone-safe-bottom) + var(--zone-touch-reserve) + var(--zone-gap)); left: var(--zone-safe-left); }
            #mp-minimap canvas { width: 100px; height: 100px; }
            #map-minimap { top: auto; bottom: calc(var(--zone-safe-bottom) + var(--zone-touch-reserve) + var(--zone-gap)); left: var(--zone-safe-left); right: auto; }
            #speedometer { bottom: auto; top: var(--zone-safe-top); left: 50%; }
            #speedometer .speed { font-size: 24px; }
        }

        /* ─── Aspect-ratio buckets (2026-05-12) ──────────────────────
         * Ultrawide users have ~50% extra horizontal space; the
         * default centered HUD wastes it. Spread corner-anchored
         * widgets to occupy the peripheral arc. Portrait users
         * (phones) need the speedometer not to overlap the touch
         * thumb pads.
         */

        /* Ultrawide — keep speedometer / pause / FAB further from center */
        @media (min-aspect-ratio: 21/9) {
            #speedometer {
                /* Push speedometer right-edge anchor outboard */
                right: max(calc(var(--zone-safe-right) + 16px), 8vw);
            }
            #drive-actions, #pause-btn, #help-btn {
                /* Top-right cluster slides outboard */
                right: max(calc(var(--zone-safe-right) + 8px), 8vw);
            }
            #racer-select {
                /* Racer dropdown stays modal-sized; doesn't span */
                max-width: 320px;
            }
            #mp-panel {
                /* Don't let the MP panel span half the ultrawide */
                max-width: 360px;
                right: max(calc(var(--zone-safe-right) + 8px), 4vw);
            }
        }

        /* Portrait phones — speedometer moves up to clear touch pedals */
        @media (orientation: portrait) {
            #speedometer {
                /* Lift above the touch pedals which dominate bottom 40% */
                bottom: calc(max(10px, env(safe-area-inset-bottom)) + 200px);
                font-size: 12px;
                padding: 6px 10px;
            }
            #drive-actions {
                /* Stack action buttons vertically; horizontal space is gold */
                flex-direction: column;
                gap: 4px;
            }
            #help-btn, #pause-btn {
                /* Smaller controls on portrait — they're easier to mis-tap */
                width: 40px;
                height: 40px;
                font-size: 14px;
            }
            #racer-select {
                width: calc(100vw - 32px);
                max-width: 280px;
            }
        }

        /* ── Portrait HUD declutter (2026-05-30) ──────────────────────
         * On portrait phones the top edge was busy: a full-width black
         * "Fullscreen Drive" bar pinned across the top, a tall top-right
         * button ladder, and the speedo. Tidy it so the driving view
         * reads clean: shrink the fullscreen prompt to a centered pill
         * (it's tap-to-fullscreen, doesn't need to span the screen),
         * clear the notch with safe-area, and tighten the top-right
         * control cluster spacing. Touch controls + speedo unchanged. */
        @media (max-width: 600px) and (orientation: portrait) {
            #fullscreen-prompt {
                left: 50%;
                right: auto;
                top: calc(max(8px, env(safe-area-inset-top, 0px)));
                transform: translateX(-50%);
                width: auto;
                max-width: calc(100vw - 24px);
                padding: 7px 16px;
                border-radius: 999px;
                border: 1px solid rgba(255, 255, 255, 0.18);
                border-bottom: 1px solid rgba(255, 255, 255, 0.18);
                background: rgba(0, 0, 0, 0.72);
                -webkit-backdrop-filter: blur(8px);
                backdrop-filter: blur(8px);
                font-size: 13px;
                white-space: nowrap;
            }
            #drive-toolbar {
                /* Wrap the right-anchored cluster so a wide mode-select
                 * ("Endless Road") can't push siblings off the left edge
                 * or clip at the screen edge — it stacks neatly under the
                 * safe area instead. */
                gap: 6px;
                flex-wrap: wrap;
                justify-content: flex-end;
                max-width: calc(100vw - var(--zone-safe-left) - var(--zone-safe-right));
            }
            #drive-mode-select {
                max-width: 38vw;
                font-size: 12px;
                padding: 5px 8px;
                text-overflow: ellipsis;
            }
        }