/* rv-newhud.css
   rv-newhud overlay (compass, photo mode, pause radial, name plates, boost/gear, combo, biome card, session ribbon, free-look, comfort panel, clip recorder, session summary) — extracted from inline <style> on 2026-05-11. Behavior in /js/drive/rv-newhud/.
   Loaded via <link rel="stylesheet" href="/css/drive/rv-newhud.css"> in drive.html. */

/* ╔══════════════════════════════════════════════════════════════════╗
           ║  RV-NEWHUD  —  added 2026-05-11                                  ║
           ║  Four additive overlays: Photo Mode, Mini-Compass,               ║
           ║  Pause Radial, Quality Adapter. All namespaced .rv-* to keep     ║
           ║  out of the existing UI's way. Read globals from the main        ║
           ║  module script; init runs at end of that script.                 ║
           ╚══════════════════════════════════════════════════════════════════╝ */

        /* ── Mini-compass (top-right diegetic paper disc) ─────────────── */
        #rv-compass {
            position: fixed;
            top: calc(var(--zone-safe-top) + 8px);
            right: calc(var(--zone-safe-right) + 8px);
            width: 76px;
            height: 76px;
            z-index: 110;
            pointer-events: none;
            user-select: none;
            filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
        }
        #rv-compass.rv-hidden { display: none; }
        body.drive-paused #rv-compass { opacity: 0.25; }
        #rv-compass-disc {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background:
                radial-gradient(circle at 30% 25%, rgba(255,255,255,0.10) 0%, transparent 45%),
                radial-gradient(circle, #f4ecd8 0%, #e3d4a6 100%);
            border: 1px solid rgba(60, 36, 14, 0.45);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.5),
                inset 0 -8px 14px rgba(120, 76, 24, 0.16);
            overflow: hidden;
        }
        #rv-compass-disc::before {
            /* subtle paper grain */
            content: '';
            position: absolute; inset: 0;
            background-image: radial-gradient(circle at 20% 30%, rgba(120,76,24,0.06) 0 1px, transparent 1px),
                              radial-gradient(circle at 70% 60%, rgba(120,76,24,0.06) 0 1px, transparent 1px),
                              radial-gradient(circle at 45% 80%, rgba(120,76,24,0.05) 0 1px, transparent 1px);
            background-size: 16px 16px, 22px 22px, 14px 14px;
            opacity: 0.8;
        }
        .rv-compass-cardinal {
            position: absolute;
            font-family: var(--ui-font);
            font-size: 9px;
            font-weight: 700;
            color: rgba(60, 36, 14, 0.78);
            letter-spacing: 0.05em;
            transform: translate(-50%, -50%);
        }
        .rv-compass-cardinal.n { top: 8px; left: 50%; }
        .rv-compass-cardinal.s { top: calc(100% - 8px); left: 50%; }
        .rv-compass-cardinal.e { top: 50%; left: calc(100% - 8px); }
        .rv-compass-cardinal.w { top: 50%; left: 8px; }
        #rv-compass-needle {
            position: absolute;
            top: 50%; left: 50%;
            width: 4px;
            height: 30px;
            margin: -28px 0 0 -2px;
            background: linear-gradient(180deg, #d24a4a 0% 50%, #f4ecd8 50% 100%);
            border-radius: 2px;
            transform-origin: 50% 93%;
            box-shadow: 0 0 1px rgba(0,0,0,0.4);
            will-change: transform;
        }
        #rv-compass-pivot {
            position: absolute;
            top: 50%; left: 50%;
            width: 8px; height: 8px;
            margin: -4px 0 0 -4px;
            border-radius: 50%;
            background: #382010;
            box-shadow: 0 0 0 1px rgba(255,255,255,0.4);
        }
        @media (max-width: 768px) {
            #rv-compass { width: 60px; height: 60px; top: calc(var(--zone-safe-top) + 6px); }
            #rv-compass-needle { height: 24px; margin: -22px 0 0 -2px; }
        }

        /* ── Quality adapter pill (bottom-center) ─────────────────────── */
        #rv-quality-pill {
            position: fixed;
            left: 50%;
            bottom: calc(var(--zone-safe-bottom) + var(--zone-touch-reserve, 0px) + 80px);
            transform: translateX(-50%) translateY(20px);
            opacity: 0;
            pointer-events: none;
            z-index: 120;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 14px 9px 14px;
            border-radius: 999px;
            background: rgba(8, 6, 14, 0.78);
            border: 1px solid rgba(246, 243, 248, 0.16);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
            color: rgba(246, 243, 248, 0.95);
            font-family: var(--ui-font);
            font-size: 12px;
            font-weight: 500;
            letter-spacing: 0.02em;
            transition: opacity 0.3s, transform 0.3s;
        }
        #rv-quality-pill.rv-visible {
            opacity: 1;
            pointer-events: auto;
            transform: translateX(-50%) translateY(0);
        }
        #rv-quality-pill .rv-pill-icon {
            font-size: 14px;
        }
        #rv-quality-pill .rv-pill-action {
            background: none;
            border: none;
            color: var(--rv-racer-pink, #FF6FA3);
            font: inherit;
            font-weight: 600;
            cursor: pointer;
            padding: 0 4px;
        }
        #rv-quality-pill .rv-pill-action:hover { text-decoration: underline; }
        #rv-quality-pill .rv-pill-dismiss {
            background: none;
            border: none;
            color: rgba(246, 243, 248, 0.55);
            font: inherit;
            font-size: 14px;
            cursor: pointer;
            padding: 0 2px;
            margin-left: 2px;
            line-height: 1;
        }
        #rv-quality-pill .rv-pill-dismiss:hover { color: rgba(246, 243, 248, 0.95); }

        /* ── Pause radial (center overlay) ────────────────────────────── */
        #rv-pause-radial {
            position: fixed;
            inset: 0;
            z-index: 250;
            display: none;
            align-items: center;
            justify-content: center;
            background: rgba(8, 6, 14, 0.55);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
        }
        #rv-pause-radial.rv-visible { display: flex; }
        #rv-pause-radial-ring {
            position: relative;
            width: 340px;
            height: 340px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(8,6,14,0.85) 30%, rgba(8,6,14,0.55) 100%);
            border: 1px solid rgba(246, 243, 248, 0.14);
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6),
                        inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }
        #rv-pause-radial-center {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            font-family: var(--ui-font);
            color: rgba(246, 243, 248, 0.95);
            text-align: center;
            pointer-events: none;
        }
        #rv-pause-radial-center .rv-pause-eyebrow {
            font-size: 10px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            opacity: 0.5;
            margin-bottom: 4px;
        }
        #rv-pause-radial-center .rv-pause-title {
            font-size: 18px;
            font-weight: 600;
            color: rgba(78, 205, 196, 0.95);
        }
        #rv-pause-radial-center .rv-pause-hint {
            font-size: 11px;
            opacity: 0.55;
            margin-top: 6px;
        }
        .rv-radial-slot {
            position: absolute;
            top: 50%; left: 50%;
            width: 84px;
            height: 84px;
            margin: -42px 0 0 -42px;
            border-radius: 50%;
            background: rgba(8, 6, 14, 0.65);
            border: 1px solid rgba(246, 243, 248, 0.18);
            color: rgba(246, 243, 248, 0.95);
            font-family: var(--ui-font);
            font-size: 10px;
            font-weight: 500;
            letter-spacing: 0.03em;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            cursor: pointer;
            transition: transform 0.15s, background 0.15s, border-color 0.15s;
            user-select: none;
        }
        .rv-radial-slot:hover, .rv-radial-slot:focus-visible {
            transform: scale(1.08);
            background: rgba(78, 205, 196, 0.16);
            border-color: rgba(78, 205, 196, 0.55);
            outline: none;
        }
        .rv-radial-slot .rv-slot-icon { font-size: 22px; line-height: 1; }
        .rv-radial-slot .rv-slot-label { line-height: 1.1; text-align: center; padding: 0 4px; }
        .rv-radial-slot[data-active="true"] {
            background: rgba(78, 205, 196, 0.22);
            border-color: rgba(78, 205, 196, 0.7);
        }
        #rv-pause-radial-close {
            position: absolute;
            top: 24px; right: 24px;
            width: 36px; height: 36px;
            border-radius: 50%;
            background: rgba(8, 6, 14, 0.7);
            border: 1px solid rgba(246, 243, 248, 0.18);
            color: rgba(246, 243, 248, 0.85);
            font-size: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #rv-pause-radial-close:hover { background: rgba(8, 6, 14, 0.9); border-color: rgba(246, 243, 248, 0.36); }
        @media (max-width: 480px) {
            #rv-pause-radial-ring { width: 280px; height: 280px; }
            .rv-radial-slot { width: 72px; height: 72px; margin: -36px 0 0 -36px; font-size: 9px; }
            .rv-radial-slot .rv-slot-icon { font-size: 20px; }
        }

        /* ── Photo Mode ───────────────────────────────────────────────── */
        #rv-photo-mode {
            position: fixed;
            inset: 0;
            z-index: 300;
            display: none;
            pointer-events: auto;
            color: rgba(246, 243, 248, 0.95);
            font-family: var(--ui-font);
        }
        #rv-photo-mode.rv-visible { display: block; }
        /* When photo mode is active, hide nearly all existing UI. */
        body.rv-photo-mode-active #hud,
        body.rv-photo-mode-active #speedometer,
        body.rv-photo-mode-active #touch-controls,
        body.rv-photo-mode-active #mp-minimap,
        body.rv-photo-mode-active #map-minimap,
        body.rv-photo-mode-active #pause-btn,
        body.rv-photo-mode-active #rv-compass,
        body.rv-photo-mode-active #rv-quality-pill,
        body.rv-photo-mode-active .drive-joy-toast {
            display: none !important;
        }
        #rv-photo-frame {
            /* rule-of-thirds grid overlay during framing */
            position: absolute;
            inset: 6%;
            border: 1px solid rgba(246, 243, 248, 0.08);
            pointer-events: none;
        }
        #rv-photo-frame::before, #rv-photo-frame::after {
            content: '';
            position: absolute;
            background: rgba(246, 243, 248, 0.10);
        }
        #rv-photo-frame::before {
            left: 0; right: 0; top: 33.333%; height: 1px;
            box-shadow: 0 33.333% 0 0 rgba(246, 243, 248, 0.10);
        }
        #rv-photo-frame::after {
            top: 0; bottom: 0; left: 33.333%; width: 1px;
            box-shadow: 33.333% 0 0 0 rgba(246, 243, 248, 0.10);
        }
        #rv-photo-top {
            position: absolute;
            top: calc(var(--zone-safe-top) + 12px);
            left: 0; right: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            pointer-events: none;
        }
        #rv-photo-top .rv-photo-title {
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: rgba(78, 205, 196, 0.95);
            opacity: 0.85;
            pointer-events: none;
        }
        #rv-photo-exit {
            pointer-events: auto;
            background: rgba(8, 6, 14, 0.72);
            border: 1px solid rgba(246, 243, 248, 0.2);
            color: rgba(246, 243, 248, 0.95);
            border-radius: 999px;
            padding: 6px 14px;
            font-family: var(--ui-font);
            font-size: 12px;
            cursor: pointer;
        }
        #rv-photo-exit:hover { background: rgba(8, 6, 14, 0.92); }
        #rv-photo-panel {
            position: absolute;
            left: 50%;
            bottom: calc(var(--zone-safe-bottom) + 24px);
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 14px 18px;
            min-width: min(560px, 92vw);
            border-radius: 16px;
            background: rgba(8, 6, 14, 0.78);
            border: 1px solid rgba(246, 243, 248, 0.14);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            box-shadow: 0 22px 56px rgba(0, 0, 0, 0.55);
            pointer-events: auto;
        }
        .rv-photo-row {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 11px;
            letter-spacing: 0.04em;
        }
        .rv-photo-row label {
            min-width: 78px;
            text-transform: uppercase;
            color: rgba(246, 243, 248, 0.55);
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.14em;
        }
        .rv-photo-row input[type="range"] {
            flex: 1;
            accent-color: var(--rv-racer-pink, #FF6FA3);
        }
        .rv-photo-row .rv-photo-value {
            min-width: 40px;
            text-align: right;
            font-variant-numeric: tabular-nums;
            opacity: 0.7;
        }
        #rv-photo-actions {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            margin-top: 6px;
        }
        .rv-photo-btn {
            padding: 10px 16px;
            border-radius: 999px;
            border: 1px solid rgba(246, 243, 248, 0.18);
            background: rgba(8, 6, 14, 0.6);
            color: rgba(246, 243, 248, 0.95);
            font-family: var(--ui-font);
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.04em;
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s;
        }
        .rv-photo-btn.rv-primary {
            background: var(--rv-racer-pink, #FF6FA3);
            border-color: rgba(255, 255, 255, 0.2);
            color: #2a1428;
        }
        .rv-photo-btn:hover { border-color: rgba(246, 243, 248, 0.5); }
        .rv-photo-btn.rv-primary:hover { background: #ff85b3; }
        #rv-photo-flash {
            position: absolute;
            inset: 0;
            background: white;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.18s ease-out;
        }
        #rv-photo-flash.rv-flash { opacity: 0.95; transition: opacity 0.05s ease-in; }
        #rv-photo-preview {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%) scale(0.96);
            max-width: 80vw; max-height: 70vh;
            border-radius: 12px;
            border: 6px solid #f4ecd8;
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.25s, transform 0.25s;
        }
        #rv-photo-preview.rv-visible {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
            pointer-events: auto;
        }
        @media (max-width: 480px) {
            #rv-photo-panel { padding: 10px 12px; min-width: 0; left: 12px; right: 12px; transform: none; }
            .rv-photo-row label { min-width: 64px; font-size: 9px; }
        }

        /* ╔══════════════════════════════════════════════════════════════════╗
           ║  RV-NEWHUD ROUND 2  —  added 2026-05-11                          ║
           ║  Name plates, boost meter, gear indicator, photo vault, combo    ║
           ║  chain, first-time-biome overlay. Same .rv-* namespacing.        ║
           ╚══════════════════════════════════════════════════════════════════╝ */

        /* ── 1) Floating name plates over remote racers ─────────────── */
        #rv-mp-plates {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 80; /* under main HUD, above canvas */
        }
        .rv-mp-plate {
            position: absolute;
            transform: translate(-50%, -100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            font-family: var(--ui-font);
            color: rgba(60, 36, 14, 0.92);
            white-space: nowrap;
            user-select: none;
            transition: opacity 0.18s;
            will-change: transform, opacity;
        }
        .rv-mp-plate-tag {
            padding: 3px 9px 4px;
            border-radius: 8px;
            background: #f4ecd8;
            border: 1px solid rgba(60, 36, 14, 0.45);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4),
                        inset 0 1px 0 rgba(255, 255, 255, 0.5);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }
        .rv-mp-plate-pin {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #d24a4a;
            box-shadow: 0 0 4px rgba(210, 74, 74, 0.6);
        }
        body.rv-photo-mode-active #rv-mp-plates { display: none; }
        body.drive-paused .rv-mp-plate { opacity: 0.4; }

        /* ── 2) Boost meter + gear indicator (overlaid on speedometer) ── */
        #rv-boost-bar {
            position: absolute;
            left: 12px; right: 12px;
            bottom: 6px;
            height: 4px;
            display: flex;
            gap: 2px;
            pointer-events: none;
        }
        #rv-boost-bar .rv-boost-seg {
            flex: 1;
            border-radius: 2px;
            background: rgba(246, 243, 248, 0.12);
            transition: background 0.12s, box-shadow 0.12s;
        }
        #rv-boost-bar .rv-boost-seg.on {
            background: var(--rv-racer-pink, #FF6FA3);
            box-shadow: 0 0 4px var(--rv-racer-pink, #FF6FA3);
        }
        #rv-boost-bar .rv-boost-seg.boosting {
            background: #ffe066;
            box-shadow: 0 0 6px #ffe066;
        }
        #speedometer.collapsed #rv-boost-bar { display: none; }
        #rv-gear {
            position: absolute;
            top: 8px; right: 14px;
            font-family: var(--ui-font);
            font-size: 18px;
            font-weight: 700;
            letter-spacing: 0.02em;
            color: rgba(78, 205, 196, 0.95);
            background: rgba(8, 6, 14, 0.55);
            border: 1px solid rgba(78, 205, 196, 0.45);
            border-radius: 6px;
            padding: 0 6px;
            min-width: 22px;
            text-align: center;
            line-height: 22px;
            pointer-events: none;
            transition: color 0.12s, border-color 0.12s, background 0.12s;
        }
        #rv-gear.rv-reverse { color: #ffae64; border-color: rgba(255, 174, 100, 0.6); }
        #rv-gear.rv-neutral { color: rgba(246, 243, 248, 0.6); border-color: rgba(246, 243, 248, 0.25); }
        #speedometer.collapsed #rv-gear { display: none; }

        /* ── 3) Photo Vault (thumbnail tray in Photo Mode) ─────────────── */
        #rv-photo-vault {
            position: absolute;
            left: 50%;
            bottom: calc(var(--zone-safe-bottom) + 200px);
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            padding: 8px 12px;
            border-radius: 12px;
            background: rgba(8, 6, 14, 0.6);
            border: 1px solid rgba(246, 243, 248, 0.12);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            max-width: min(640px, 92vw);
            overflow-x: auto;
            scrollbar-width: thin;
            pointer-events: auto;
            transition: opacity 0.2s;
        }
        #rv-photo-vault:empty {
            display: none;
        }
        .rv-vault-thumb {
            position: relative;
            width: 60px;
            height: 60px;
            border-radius: 6px;
            border: 2px solid #f4ecd8;
            overflow: hidden;
            flex-shrink: 0;
            cursor: pointer;
            background: rgba(8, 6, 14, 0.5);
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
            transition: transform 0.12s, box-shadow 0.12s;
        }
        .rv-vault-thumb:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.55);
        }
        .rv-vault-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .rv-vault-thumb-del {
            position: absolute;
            top: 1px; right: 1px;
            width: 16px; height: 16px;
            border-radius: 50%;
            background: rgba(8, 6, 14, 0.85);
            color: white;
            border: none;
            font-size: 10px;
            line-height: 14px;
            padding: 0;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.12s;
        }
        .rv-vault-thumb:hover .rv-vault-thumb-del { opacity: 1; }

        /* ── 4) Combo chain readout (mid-bottom HUD) ─────────────────── */
        #rv-combo {
            position: fixed;
            left: 50%;
            bottom: calc(var(--zone-safe-bottom) + var(--zone-touch-reserve, 0px) + 130px);
            transform: translateX(-50%) translateY(8px);
            opacity: 0;
            pointer-events: none;
            z-index: 105;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 16px;
            border-radius: 999px;
            background: rgba(8, 6, 14, 0.72);
            border: 1px solid rgba(255, 224, 102, 0.5);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5),
                        0 0 18px rgba(255, 224, 102, 0.2);
            color: rgba(246, 243, 248, 0.95);
            font-family: var(--ui-font);
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.04em;
            transition: opacity 0.25s, transform 0.25s;
        }
        #rv-combo.rv-visible {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
        #rv-combo-count {
            font-size: 18px;
            font-weight: 700;
            color: #ffe066;
            font-variant-numeric: tabular-nums;
            min-width: 22px;
            text-align: right;
        }
        #rv-combo-kinds {
            display: flex;
            gap: 4px;
            font-size: 16px;
        }
        #rv-combo-bar {
            position: absolute;
            left: 12px; right: 12px;
            bottom: 4px;
            height: 2px;
            border-radius: 1px;
            background: rgba(255, 224, 102, 0.18);
            overflow: hidden;
        }
        #rv-combo-bar::after {
            content: '';
            position: absolute;
            inset: 0;
            background: #ffe066;
            transform-origin: left center;
            transform: scaleX(var(--rv-combo-fill, 0));
            transition: transform 0.12s linear;
        }
        body.rv-photo-mode-active #rv-combo { display: none; }

        /* ── 5) First-time biome overlay ────────────────────────────── */
        #rv-biome-card {
            position: fixed;
            left: 50%;
            top: 18%;
            transform: translateX(-50%) translateY(-12px);
            z-index: 140;
            opacity: 0;
            pointer-events: none;
            max-width: min(440px, 90vw);
            padding: 22px 28px 18px;
            background:
                radial-gradient(circle at 30% 20%, rgba(255,255,255,0.12) 0%, transparent 50%),
                #f4ecd8;
            color: #382010;
            border: 1px solid rgba(60, 36, 14, 0.4);
            border-radius: 14px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55),
                        inset 0 1px 0 rgba(255, 255, 255, 0.45);
            font-family: var(--ui-font);
            transition: opacity 0.4s, transform 0.4s;
        }
        #rv-biome-card.rv-visible {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
            pointer-events: auto;
        }
        .rv-biome-eyebrow {
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            opacity: 0.6;
            margin-bottom: 4px;
        }
        .rv-biome-title {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 8px;
            letter-spacing: -0.01em;
        }
        .rv-biome-blurb {
            font-size: 13px;
            line-height: 1.4;
            opacity: 0.78;
            margin-bottom: 12px;
        }
        .rv-biome-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 11px;
            opacity: 0.65;
        }
        .rv-biome-dismiss {
            background: rgba(60, 36, 14, 0.15);
            border: 1px solid rgba(60, 36, 14, 0.3);
            color: #382010;
            border-radius: 999px;
            padding: 4px 12px;
            font-family: var(--ui-font);
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
        }
        .rv-biome-dismiss:hover { background: rgba(60, 36, 14, 0.25); }
        body.embed-mode #rv-biome-card { display: none; }
        body.rv-photo-mode-active #rv-biome-card { display: none; }
        @media (max-width: 480px) {
            #rv-biome-card { padding: 16px 20px 14px; }
            .rv-biome-title { font-size: 18px; }
            .rv-biome-blurb { font-size: 12px; }
        }

        /* ╔══════════════════════════════════════════════════════════════════╗
           ║  RV-NEWHUD ROUND 3  —  added 2026-05-11                          ║
           ║  Session stats ribbon, free-orbit look, comfort/a11y submenu,    ║
           ║  15-sec clip capture, session summary card.                      ║
           ╚══════════════════════════════════════════════════════════════════╝ */

        /* HUD scale variable — applies to all rv-* surfaces via the
           comfort-submenu HUD-size setting. Default 1.0; adjusted to
           0.8 / 1.25 / 1.5 via setProperty on documentElement. */
        :root { --rv-ui-scale: 1; }
        body.rv-hud-scaled #rv-compass,
        body.rv-hud-scaled #rv-quality-pill,
        body.rv-hud-scaled #rv-combo,
        body.rv-hud-scaled #rv-biome-card,
        body.rv-hud-scaled #rv-session-ribbon,
        body.rv-hud-scaled #rv-session-summary,
        body.rv-hud-scaled #rv-comfort-panel,
        body.rv-hud-scaled #rv-rec-chip,
        body.rv-hud-scaled #rv-toggles {
            transform-origin: top center;
            transform: scale(var(--rv-ui-scale, 1));
        }
        /* HUD opacity variable — comfort-submenu "HUD opacity" setting lets
           players fade the live HUD widgets to see more of the world. Default
           1.0; 0.2–1.0 via setProperty on documentElement. Deliberately
           EXCLUDES #rv-comfort-panel (the settings UI you're adjusting) and
           #rv-session-summary (the end-of-run modal) so neither dims. */
        :root { --rv-hud-opacity: 1; }
        #rv-compass,
        #rv-quality-pill,
        #rv-combo,
        #rv-biome-card,
        #rv-session-ribbon,
        #rv-rec-chip,
        #rv-boost-meter,
        #rv-toggles {
            opacity: var(--rv-hud-opacity, 1);
        }
        /* High-contrast: bumps the cream/border opacities on rv-* surfaces. */
        body.rv-high-contrast #rv-compass-disc,
        body.rv-high-contrast .rv-mp-plate-tag {
            border-color: rgba(60, 36, 14, 0.85);
        }
        body.rv-high-contrast #rv-compass-needle {
            background: linear-gradient(180deg, #b51e1e 0% 50%, #fffaeb 50% 100%);
        }
        body.rv-high-contrast #rv-biome-card { border-color: rgba(60, 36, 14, 0.7); }
        body.rv-high-contrast #rv-session-ribbon,
        body.rv-high-contrast #rv-rec-chip,
        body.rv-high-contrast #rv-session-summary {
            background: rgba(0, 0, 0, 0.86);
            border-color: rgba(255, 255, 255, 0.45);
            color: #ffffff;
        }
        /* Low-motion: kills our CSS transitions so the HUD never animates. */
        body.rv-low-motion #rv-compass-needle,
        body.rv-low-motion .rv-mp-plate,
        body.rv-low-motion #rv-quality-pill,
        body.rv-low-motion #rv-combo,
        body.rv-low-motion #rv-biome-card,
        body.rv-low-motion #rv-session-ribbon,
        body.rv-low-motion .rv-stat-cell.rv-flash,
        body.rv-low-motion #rv-session-summary {
            transition: none !important;
            animation: none !important;
        }

        /* ── 1) Session Stats Ribbon (top center) ───────────────────── */
        #rv-session-ribbon {
            position: fixed;
            top: calc(var(--zone-safe-top) + 8px);
            left: 50%;
            transform: translateX(-50%);
            z-index: 95;
            display: flex;
            gap: 1px;
            background: rgba(8, 6, 14, 0.6);
            border: 1px solid rgba(246, 243, 248, 0.14);
            border-radius: 10px;
            overflow: hidden;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
            font-family: var(--ui-font);
            color: rgba(246, 243, 248, 0.92);
            transition: opacity 0.3s;
            pointer-events: auto;
        }
        #rv-session-ribbon.rv-collapsed .rv-stat-cell:not(.rv-stat-toggle) { display: none; }
        body.rv-photo-mode-active #rv-session-ribbon { display: none; }
        .rv-stat-cell {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 5px 10px 6px;
            min-width: 64px;
            background: rgba(0, 0, 0, 0.08);
            transition: background 0.4s;
            cursor: default;
        }
        .rv-stat-cell.rv-flash {
            background: rgba(255, 224, 102, 0.35);
            box-shadow: inset 0 0 12px rgba(255, 224, 102, 0.55);
        }
        .rv-stat-label {
            font-size: 8px;
            font-weight: 700;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            opacity: 0.55;
            margin-bottom: 1px;
        }
        .rv-stat-value {
            font-size: 13px;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
            color: rgba(78, 205, 196, 0.95);
        }
        .rv-stat-toggle {
            cursor: pointer;
            min-width: 26px;
            font-size: 11px;
            color: rgba(246, 243, 248, 0.6);
            background: rgba(0, 0, 0, 0.18);
        }
        .rv-stat-toggle:hover { color: rgba(246, 243, 248, 1); }
        @media (max-width: 480px) {
            #rv-session-ribbon { font-size: 9px; }
            .rv-stat-cell { padding: 4px 6px 5px; min-width: 50px; }
            .rv-stat-value { font-size: 11px; }
            .rv-stat-label { font-size: 7px; }
        }

        /* ── 2) Free-orbit look handle (mobile) + state class ─────────── */
        #rv-look-handle {
            position: fixed;
            top: calc(var(--zone-safe-top) + 60px);
            right: calc(var(--zone-safe-right) + 14px);
            width: 44px;
            height: 44px;
            z-index: 100;
            border-radius: 50%;
            background: rgba(8, 6, 14, 0.65);
            border: 1px solid rgba(246, 243, 248, 0.18);
            color: rgba(246, 243, 248, 0.92);
            font-family: var(--ui-font);
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: grab;
            touch-action: none;
            -webkit-touch-callout: none;
            user-select: none;
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
            transition: transform 0.12s, background 0.12s;
        }
        #rv-look-handle:active,
        #rv-look-handle.rv-active {
            cursor: grabbing;
            transform: scale(1.12);
            background: rgba(78, 205, 196, 0.32);
            border-color: rgba(78, 205, 196, 0.7);
        }
        body.rv-looking #rv-look-handle {
            box-shadow: 0 0 0 4px rgba(78, 205, 196, 0.22), 0 6px 14px rgba(0, 0, 0, 0.45);
        }
        body.rv-photo-mode-active #rv-look-handle { display: none; }
        /* Subtle vignette while free-orbit active to telegraph the mode */
        body.rv-looking::after {
            content: '';
            position: fixed;
            inset: 0;
            pointer-events: none;
            box-shadow: inset 0 0 80px rgba(78, 205, 196, 0.18);
            z-index: 90;
        }

        /* ── 3) Comfort / Accessibility panel ─────────────────────────── */
        #rv-comfort-panel {
            position: fixed;
            inset: 0;
            z-index: 270;
            display: none;
            align-items: center;
            justify-content: center;
            background: rgba(8, 6, 14, 0.6);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
        }
        #rv-comfort-panel.rv-visible { display: flex; }
        #rv-comfort-card {
            width: min(420px, 92vw);
            max-height: 80vh;
            overflow-y: auto;
            padding: 20px 22px 18px;
            border-radius: 14px;
            background: rgba(8, 6, 14, 0.85);
            border: 1px solid rgba(246, 243, 248, 0.16);
            box-shadow: 0 22px 56px rgba(0, 0, 0, 0.55);
            font-family: var(--ui-font);
            color: rgba(246, 243, 248, 0.95);
        }
        .rv-comfort-eyebrow {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: rgba(78, 205, 196, 0.9);
            margin-bottom: 2px;
        }
        .rv-comfort-title {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 12px;
        }
        .rv-comfort-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 10px 0;
            border-top: 1px solid rgba(246, 243, 248, 0.08);
            font-size: 13px;
        }
        .rv-comfort-row:first-of-type { border-top: none; }
        .rv-comfort-row .rv-comfort-label {
            font-weight: 600;
            color: rgba(246, 243, 248, 0.92);
        }
        .rv-comfort-row .rv-comfort-help {
            display: block;
            font-size: 10px;
            font-weight: 400;
            color: rgba(246, 243, 248, 0.55);
            margin-top: 2px;
            max-width: 220px;
        }
        .rv-comfort-row input[type="range"] {
            flex-shrink: 0;
            width: 130px;
            accent-color: var(--rv-racer-pink, #FF6FA3);
        }
        .rv-comfort-toggle {
            background: rgba(8, 6, 14, 0.6);
            border: 1px solid rgba(246, 243, 248, 0.2);
            color: rgba(246, 243, 248, 0.95);
            border-radius: 999px;
            padding: 4px 10px;
            font: inherit;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            flex-shrink: 0;
        }
        .rv-comfort-toggle.rv-on {
            background: rgba(78, 205, 196, 0.28);
            border-color: rgba(78, 205, 196, 0.7);
            color: #fffaeb;
        }
        .rv-comfort-seg-group {
            display: inline-flex;
            gap: 0;
            border-radius: 6px;
            overflow: hidden;
            border: 1px solid rgba(246, 243, 248, 0.18);
        }
        .rv-comfort-seg {
            background: rgba(8, 6, 14, 0.6);
            border: none;
            color: rgba(246, 243, 248, 0.85);
            font-family: var(--ui-font);
            font-size: 11px;
            font-weight: 600;
            padding: 5px 9px;
            cursor: pointer;
            border-right: 1px solid rgba(246, 243, 248, 0.18);
        }
        .rv-comfort-seg:last-child { border-right: none; }
        .rv-comfort-seg.rv-on {
            background: rgba(78, 205, 196, 0.25);
            color: #fffaeb;
        }
        .rv-comfort-value {
            min-width: 40px;
            text-align: right;
            font-variant-numeric: tabular-nums;
            opacity: 0.7;
            font-size: 11px;
        }
        #rv-comfort-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 14px;
        }
        #rv-comfort-close {
            background: var(--rv-racer-pink, #FF6FA3);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #2a1428;
            border-radius: 999px;
            padding: 8px 16px;
            font-family: var(--ui-font);
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
        }

        /* ── 4) Clip recorder REC chip (top right) ─────────────────────── */
        #rv-rec-chip {
            position: fixed;
            top: calc(var(--zone-safe-top) + 60px);
            right: calc(var(--zone-safe-right) + 70px);
            z-index: 100;
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: 999px;
            background: rgba(8, 6, 14, 0.7);
            border: 1px solid rgba(246, 243, 248, 0.2);
            color: rgba(246, 243, 248, 0.95);
            font-family: var(--ui-font);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.06em;
            cursor: pointer;
            user-select: none;
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
            transition: background 0.15s, border-color 0.15s;
        }
        #rv-rec-chip:hover { background: rgba(8, 6, 14, 0.9); }
        #rv-rec-chip .rv-rec-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #d24a4a;
            box-shadow: 0 0 4px rgba(210, 74, 74, 0.6);
        }
        #rv-rec-chip.rv-recording {
            background: rgba(210, 74, 74, 0.85);
            border-color: rgba(255, 255, 255, 0.4);
            color: #fffaeb;
        }
        #rv-rec-chip.rv-recording .rv-rec-dot {
            background: #ffffff;
            animation: rv-rec-pulse 1s infinite;
        }
        @keyframes rv-rec-pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }
        body.rv-photo-mode-active #rv-rec-chip { display: none; }
        #rv-rec-chip-time {
            font-variant-numeric: tabular-nums;
            opacity: 0.85;
            font-size: 10px;
        }

        /* ── 5) Session Summary slide-in card (top-left) ─────────────── */
        #rv-toggles {
            position: fixed;
            top: calc(var(--zone-safe-top) + 8px);
            left: calc(var(--zone-safe-left) + 8px);
            z-index: 100;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .rv-toggle-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(8, 6, 14, 0.7);
            border: 1px solid rgba(246, 243, 248, 0.18);
            color: rgba(246, 243, 248, 0.85);
            font-size: 15px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
            transition: background 0.15s, border-color 0.15s;
        }
        .rv-toggle-btn:hover {
            background: rgba(8, 6, 14, 0.9);
            border-color: rgba(246, 243, 248, 0.4);
        }
        body.rv-photo-mode-active #rv-toggles { display: none; }
        body.embed-mode #rv-toggles { display: none; }

        #rv-session-summary {
            position: fixed;
            top: 0; bottom: 0;
            left: 0;
            z-index: 240;
            width: min(340px, 80vw);
            padding: calc(var(--zone-safe-top) + 24px) 22px 24px;
            background: rgba(8, 6, 14, 0.92);
            border-right: 1px solid rgba(246, 243, 248, 0.14);
            box-shadow: 14px 0 36px rgba(0, 0, 0, 0.55);
            font-family: var(--ui-font);
            color: rgba(246, 243, 248, 0.95);
            transform: translateX(-100%);
            transition: transform 0.32s ease-out;
            overflow-y: auto;
            pointer-events: none;
        }
        #rv-session-summary.rv-visible {
            transform: translateX(0);
            pointer-events: auto;
        }
        #rv-summary-close {
            position: absolute;
            top: calc(var(--zone-safe-top) + 14px);
            right: 14px;
            width: 30px; height: 30px;
            border-radius: 50%;
            background: rgba(8, 6, 14, 0.55);
            border: 1px solid rgba(246, 243, 248, 0.2);
            color: rgba(246, 243, 248, 0.85);
            font-size: 14px;
            cursor: pointer;
            line-height: 1;
        }
        #rv-summary-close:hover { background: rgba(8, 6, 14, 0.85); }
        .rv-summary-eyebrow {
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: rgba(78, 205, 196, 0.9);
            opacity: 0.7;
            margin-bottom: 2px;
        }
        .rv-summary-title {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 18px;
            letter-spacing: -0.01em;
        }
        .rv-summary-section {
            margin-bottom: 18px;
        }
        .rv-summary-section h3 {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: rgba(246, 243, 248, 0.55);
            margin-bottom: 6px;
        }
        .rv-summary-stat {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            padding: 4px 0;
            border-bottom: 1px dashed rgba(246, 243, 248, 0.08);
            font-size: 13px;
        }
        .rv-summary-stat:last-child { border-bottom: none; }
        .rv-summary-stat-value {
            font-variant-numeric: tabular-nums;
            color: rgba(78, 205, 196, 0.95);
            font-weight: 700;
        }
        .rv-summary-biome-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 4px;
            margin-top: 6px;
        }
        .rv-summary-biome {
            text-align: center;
            padding: 6px 2px;
            border-radius: 6px;
            background: rgba(246, 243, 248, 0.04);
            font-size: 10px;
            line-height: 1.2;
            color: rgba(246, 243, 248, 0.5);
        }
        .rv-summary-biome.rv-visited {
            background: rgba(78, 205, 196, 0.18);
            color: rgba(246, 243, 248, 0.95);
        }
        .rv-summary-biome-icon { font-size: 16px; display: block; }
        .rv-summary-photo-strip {
            display: flex;
            gap: 4px;
            margin-top: 6px;
            overflow-x: auto;
        }
        .rv-summary-photo-strip img {
            width: 48px;
            height: 48px;
            object-fit: cover;
            border-radius: 4px;
            border: 2px solid rgba(246, 243, 248, 0.18);
            flex-shrink: 0;
        }


        /* ─── Drive settings section headers (2026-05-12) ─── */
        .rv-comfort-section-header {
            margin: 14px 0 6px;
            padding-top: 10px;
            border-top: 1px solid rgba(246, 243, 248, 0.10);
            font-size: 10px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: rgba(246, 243, 248, 0.55);
        }
        .rv-comfort-section-header:first-of-type { border-top: none; padding-top: 6px; }

        /* ─── Key-rebind modal (2026-05-12) ─── */
        #rv-rebind-modal {
            display: none;
            position: fixed; inset: 0;
            z-index: 70;
            align-items: center; justify-content: center;
            background: rgba(0, 0, 0, 0.55);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
        }
        #rv-rebind-modal.rv-visible { display: flex; }
        #rv-rebind-card {
            width: min(480px, 92vw);
            max-height: 80vh;
            overflow-y: auto;
            padding: 20px 22px 18px;
            border-radius: 14px;
            background: rgba(8, 6, 14, 0.92);
            border: 1px solid rgba(246, 243, 248, 0.16);
            box-shadow: 0 22px 56px rgba(0, 0, 0, 0.55);
            font-family: var(--ui-font);
            color: rgba(246, 243, 248, 0.95);
        }
        .rv-rebind-help {
            font-size: 11px;
            color: rgba(246, 243, 248, 0.62);
            margin: 8px 0 14px;
            line-height: 1.5;
        }
        #rv-rebind-list .rv-rebind-group {
            margin: 12px 0 4px;
            font-size: 10px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: rgba(246, 243, 248, 0.45);
        }
        .rv-rebind-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            padding: 8px 10px;
            margin: 2px 0;
            background: rgba(246, 243, 248, 0.04);
            border: 1px solid rgba(246, 243, 248, 0.10);
            border-radius: 6px;
            color: rgba(246, 243, 248, 0.92);
            font-family: inherit;
            font-size: 13px;
            cursor: pointer;
            text-align: left;
        }
        .rv-rebind-row:hover {
            background: rgba(246, 243, 248, 0.08);
            border-color: rgba(246, 243, 248, 0.20);
        }
        .rv-rebind-row.rv-rebind-capturing {
            background: rgba(78, 205, 196, 0.15);
            border-color: rgba(78, 205, 196, 0.55);
        }
        .rv-rebind-key {
            font-family: ui-monospace, 'SF Mono', Menlo, monospace;
            font-size: 12px;
            padding: 3px 8px;
            border-radius: 4px;
            background: rgba(0, 0, 0, 0.42);
            border: 1px solid rgba(246, 243, 248, 0.18);
            color: rgba(246, 243, 248, 0.95);
            min-width: 36px;
            text-align: center;
        }
        #rv-rebind-actions {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            margin-top: 16px;
            padding-top: 12px;
            border-top: 1px solid rgba(246, 243, 248, 0.10);
        }
        #rv-rebind-actions button {
            background: rgba(246, 243, 248, 0.08);
            border: 1px solid rgba(246, 243, 248, 0.18);
            color: rgba(246, 243, 248, 0.95);
            padding: 8px 16px;
            border-radius: 8px;
            cursor: pointer;
            font-family: inherit;
            font-size: 12px;
        }
        #rv-rebind-actions #rv-rebind-close {
            background: rgba(78, 205, 196, 0.30);
            border-color: rgba(78, 205, 196, 0.55);
        }
        #rv-rebind-actions button:hover { background: rgba(246, 243, 248, 0.15); }

        /* ─── Aspect-ratio buckets (2026-05-12) ────────────────────────
         * 16:9 is the design baseline. Two outliers need explicit
         * handling so the HUD doesn't crowd center / clip edges:
         *
         *   Ultrawide (21:9+): peripheral space goes unused with a
         *     centered HUD. Push corner-anchored widgets further
         *     out so they sit at the same eye-line as on 16:9 but
         *     don't compress the central play area.
         *
         *   Portrait (orientation: portrait): vertical space is the
         *     constraint. Compass + REC chip move closer in; HUD
         *     scale defaults to S equivalent (overridable via
         *     comfort panel). Compass + REC chip don't overlap the
         *     thumb pad on phones.
         */

        /* Ultrawide — 21:9 and beyond */
        @media (min-aspect-ratio: 21/9) {
            #rv-compass {
                /* Use 12% from the right edge instead of clamped 8px —
                 * keeps the compass on the user's far-right peripheral
                 * arc on a 3440-wide screen. */
                right: max(calc(var(--zone-safe-right) + 8px), 12vw);
            }
            #rv-rec-chip {
                /* REC chip is anchored top-right (next to compass).
                 * Slide it outboard with the compass. Don't set
                 * `left` — combined with `right` it would stretch
                 * the chip across the entire viewport width. */
                right: max(calc(var(--zone-safe-right) + 70px), calc(12vw + 62px));
            }
            #rv-toggles {
                /* Toggles top-right cluster slides outboard with the compass */
                right: max(calc(var(--zone-safe-right) + 14px), 12vw);
            }
            #rv-session-ribbon {
                /* Cap ribbon width so it doesn't span the entire view —
                 * with 3440×1440 the default ribbon would be 3000px+. */
                max-width: 1100px;
                left: 50%;
                transform: translateX(-50%);
            }
            #rv-biome-card {
                /* Center modal stays modal-sized */
                max-width: 480px;
            }
        }

        /* Portrait orientation — phones in vertical hold */
        @media (orientation: portrait) {
            #rv-compass {
                /* Smaller compass; tucks under notch / status bar */
                width: 56px;
                height: 56px;
                top: calc(var(--zone-safe-top) + 4px);
                right: calc(var(--zone-safe-right) + 4px);
            }
            #rv-session-ribbon {
                /* Ribbon stacks at the bottom edge instead of top */
                bottom: calc(var(--zone-safe-bottom) + var(--zone-touch-reserve, 0px) + 8px);
                top: auto;
                font-size: 11px;
                padding: 6px 10px;
            }
            #rv-rec-chip {
                /* REC chip moves down to clear the camera notch area */
                top: calc(var(--zone-safe-top) + 60px);
            }
            #rv-toggles {
                /* Stack toggles vertically on portrait to save horizontal space */
                flex-direction: column;
                gap: 4px;
            }
            #rv-biome-card,
            #rv-session-summary {
                /* Modal content gets near-full-width on phone portrait */
                width: calc(100vw - 32px);
                max-width: calc(100vw - 32px);
                left: 16px;
                right: 16px;
            }
            #rv-biome-card {
                transform: none;
            }
            #rv-session-summary {
                transform: translateX(calc(-100% - 24px));
            }
            #rv-session-summary.rv-visible {
                transform: translateX(0);
            }
        }

        /* Very narrow viewports — last-ditch single-column */
        @media (max-width: 360px) {
            #rv-compass { width: 48px; height: 48px; }
            #rv-rec-chip { font-size: 10px; padding: 3px 6px; }
        }


/* ── Portrait phone declutter (2026-05-30) ───────────────────────────
 * On portrait phones the floating rv-newhud chips piled onto the two
 * top corners and collided with the speedometer (top-left) and the
 * wrapped drive-toolbar (top-right). Relocate them into a tidy left
 * column below the speedometer and center the REC indicator, so the
 * top edge reads as just: speed (L) / fullscreen pill (C) / toolbar (R).
 * !important beats the inline cssText these chips set in JS. Touch
 * controls, speedometer and toolbar are untouched. */
@media (max-width: 600px) and (orientation: portrait) {
    .rv-toggles {
        top: calc(max(8px, env(safe-area-inset-top, 0px)) + 70px) !important;
        left: max(8px, env(safe-area-inset-left, 0px)) !important;
        right: auto !important;
    }
    #ds-toggle {
        top: calc(max(8px, env(safe-area-inset-top, 0px)) + 70px) !important;
    }
    .rv-look-handle {
        top: calc(max(8px, env(safe-area-inset-top, 0px)) + 156px) !important;
        bottom: auto !important;
        left: max(8px, env(safe-area-inset-left, 0px)) !important;
        right: auto !important;
    }
    .rv-rec-chip {
        top: calc(max(8px, env(safe-area-inset-top, 0px)) + 46px) !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }
}