:root {
            font-family: 'DM Sans', sans-serif;
            color: #fff6ea;
            background: #d97842;
            font-synthesis: none;
            --cream: #fff6ea;
            --ink: #33251d;
            --orange: #ff7a32;
            --orange-dark: #b84922;
            --terracotta: #cb6135;
            --teal: #1f6762
        }

        * {
            box-sizing: border-box
        }

        body {
            margin: 0;
            overflow: hidden
        }

        button {
            font: inherit;
            cursor: pointer
        }

        button:focus-visible {
            outline: 3px solid #ffb05c;
            outline-offset: 4px
        }

        #app,
        #game,
        #vignette {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%
        }

        #game {
            display: block;
            outline: none;
            touch-action: none
        }

        #vignette {
            pointer-events: none;
            background: linear-gradient(180deg, rgba(138, 63, 25, .25), transparent 25%, transparent 58%, rgba(49, 32, 22, .42)),
                radial-gradient(ellipse at 50% 12%, rgba(255, 154, 74, .25), transparent 52%)
        }

        .topbar {
            position: absolute;
            top: 30px;
            left: 34px;
            right: 34px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            pointer-events: none
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 12px;
            text-shadow: 0 2px 12px #7b341c55
        }

        .brand svg {
            width: 43px;
            height: 50px;
            fill: none;
            stroke: var(--cream);
            stroke-width: 2.7;
            stroke-linecap: round;
            stroke-linejoin: round
        }

        .brand h1 {
            font: 800 34px/.96 'Barlow Condensed', Impact, sans-serif;
            letter-spacing: 1px;
            margin: 0
        }

        .brand h1 span {
            font: 600 8px 'DM Sans', sans-serif;
            letter-spacing: 1.4px;
            padding: 5px 7px;
            border: 1px solid #fff8e87a;
            vertical-align: middle;
            margin-left: 13px;
            border-radius: 3px
        }

        .brand p {
            font-size: 8px;
            letter-spacing: 3.3px;
            margin: 8px 0 0
        }

        /* ===== MODERN GTA-STYLE DEDICATED HEALTH HUD ===== */
        .player-health-hud {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            background: rgba(18, 14, 24, 0.88);
            border: 1px solid rgba(255, 255, 255, 0.15);
            padding: 5px 12px 5px 9px;
            border-radius: 999px;
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(8px);
            user-select: none;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .player-health-hud.critical {
            border-color: #ff3b30;
            box-shadow: 0 0 15px rgba(255, 59, 48, 0.6), inset 0 0 8px rgba(255, 59, 48, 0.3);
            animation: healthPulse 1.2s infinite alternate;
        }

        @keyframes healthPulse {
            0% { transform: scale(1); }
            100% { transform: scale(1.04); }
        }

        .player-health-icon-wrap {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: rgba(46, 204, 113, 0.2);
            color: #2ecc71;
            font-size: 13px;
            font-weight: 900;
            transition: all 0.25s ease;
        }

        .player-health-hud.critical .player-health-icon-wrap {
            background: rgba(255, 59, 48, 0.3);
            color: #ff3b30;
        }

        .player-health-bars {
            display: flex;
            flex-direction: column;
            gap: 3px;
            min-width: 85px;
        }

        .player-health-meta {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 0.6px;
            text-transform: uppercase;
        }

        .player-health-label {
            color: rgba(255, 240, 225, 0.7);
        }

        .player-health-pct {
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 13px;
            font-weight: 800;
            color: #ffffff;
            letter-spacing: 0.5px;
            font-variant-numeric: tabular-nums;
        }

        .player-health-track {
            position: relative;
            width: 100%;
            height: 5px;
            background: rgba(255, 255, 255, 0.12);
            border-radius: 999px;
            overflow: hidden;
        }

        .player-health-fill {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            border-radius: 999px;
            background: linear-gradient(90deg, #2ecc71, #27ae60);
            box-shadow: 0 0 8px rgba(46, 204, 113, 0.6);
            transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;
        }

        /* Screen Edge Damage Vignette */
        #damage-flash-overlay {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 9998;
            opacity: 0;
            box-shadow: inset 0 0 90px rgba(230, 40, 20, 0.85), inset 0 0 160px rgba(180, 20, 10, 0.6);
            transition: opacity 0.3s ease-out;
        }

        #damage-flash-overlay.flashing {
            opacity: 1;
            transition: none;
        }

        .top-actions {
            display: flex;
            align-items: center;
            gap: 12px;
            pointer-events: auto
        }

        .weather {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 1.5px;
            margin-right: 8px;
            text-shadow: 0 1px 8px #74301755
        }

        #weather-control {
            border: 0;
            padding: 4px 7px;
            color: inherit;
            background: transparent;
            font: inherit;
            letter-spacing: inherit;
            cursor: pointer;
        }

        #weather-control:hover {
            background: #fff8e829;
        }

        .weather i {
            height: 12px;
            width: 1px;
            background: #fff8e875;
            margin: 0 4px
        }

        .game-clock {
            min-width: 86px;
            color: #fff5e8;
            font: 700 9px 'DM Sans', sans-serif;
            letter-spacing: 1px;
            text-align: center;
            white-space: nowrap;
        }

        .sun-icon {
            font-size: 23px;
            line-height: 1
        }

        .icon-button {
            border: 1px solid #fff8e85c;
            border-radius: 50%;
            background: #6b2f1d26;
            width: 39px;
            height: 39px;
            color: var(--cream);
            display: grid;
            place-items: center;
            backdrop-filter: blur(10px)
        }

        .icon-button:hover {
            background: #fff8e829
        }

        .icon-button svg {
            width: 17px;
            height: 17px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.6;
            stroke-linecap: round;
            stroke-linejoin: round
        }

        #welcome {
            position: absolute;
            top: 104px;
            left: 36px;
            max-width: 390px;
            padding: 24px 0 0 24px;
            text-shadow: 0 2px 14px #57220f66;
            transition: opacity .7s, transform .7s;
            z-index: 15;
        }

        #welcome::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(#ffd08a, var(--orange), var(--orange-dark));
            box-shadow: 0 0 28px #ff7a3288
        }

        .eyebrow {
            font-size: 8px;
            font-weight: 700;
            letter-spacing: 2.4px
        }

        #welcome h2 {
            font: 800 58px/.88 'Barlow Condensed', Impact, sans-serif;
            letter-spacing: .1px;
            margin: 15px 0 13px
        }

        #welcome p {
            font-size: 11px;
            opacity: .9;
            max-width: 270px
        }

        .welcome-stats {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin: 18px 0 2px
        }

        .welcome-stats span {
            border: 1px solid #fff6ea6b;
            background: #4f24184a;
            backdrop-filter: blur(10px);
            border-radius: 4px;
            padding: 7px 9px;
            font-size: 8px;
            font-weight: 800;
            letter-spacing: 1.2px
        }

        #dismiss-welcome {
            background: linear-gradient(135deg, #ffe2ad, #ff8c43);
            border: 0;
            color: #321c12;
            font-size: 10px;
            font-weight: 700;
            padding: 11px 15px;
            border-radius: 3px;
            margin-top: 15px;
            min-width: 112px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            box-shadow: 0 10px 30px #7b2f163d
        }

        .welcome-actions {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 9px;
            margin-top: 15px;
        }

        .welcome-actions #dismiss-welcome {
            margin-top: 0;
        }

        #new-game {
            border: 1px solid #fff6ea9c;
            background: #33251d55;
            color: var(--cream);
            border-radius: 3px;
            min-height: 38px;
            padding: 0 13px;
            font-size: 9px;
            font-weight: 800;
        }

        #new-game:hover {
            background: #fff6ea22;
        }

        #new-game[hidden] {
            display: none;
        }

        #welcome.dismissed {
            opacity: 0;
            transform: translateY(-10px);
            pointer-events: none
        }

        #tour-label {
            position: absolute;
            left: 50%;
            bottom: 78px;
            transform: translateX(-50%);
            display: grid;
            gap: 3px;
            min-width: 260px;
            text-align: center;
            pointer-events: none;
            text-shadow: 0 2px 14px #2d2119, 0 0 3px #2d2119;
            transition: opacity .45s ease;
        }

        #tour-label[hidden] {
            display: none;
        }

        #tour-label span {
            color: #ffe0a9;
            font-size: 8px;
            font-weight: 800;
            letter-spacing: 2px;
        }

        #tour-label strong {
            font: 700 20px/1 'Barlow Condensed', Impact, sans-serif;
        }

        #tour-label small {
            font-size: 9px;
            color: #fff1dc;
        }

        #location-banner {
            position: absolute;
            top: 35px;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            display: flex;
            flex-direction: column;
            gap: 6px;
            text-shadow: 0 2px 8px #6b2b1544
        }

        #district {
            font: 600 13px 'Barlow Condensed', sans-serif;
            letter-spacing: 3.2px
        }

        .location-sub {
            font-size: 6px;
            letter-spacing: 2px;
            opacity: .7
        }

        .minimap-panel {
            position: absolute;
            bottom: 24px;
            left: 24px;
            width: 216px;
            padding: 12px 12px 8px;
            background: #fff4e6ed;
            color: #5b3327;
            border-radius: 8px;
            box-shadow: 0 4px 24px #6b2e181c;
            z-index: 12;
            transition: width .25s ease, height .25s ease, bottom .25s ease, left .25s ease;
        }

        .minimap-panel.full-map {
            z-index: 130;
            pointer-events: auto;
            width: min(92vw, 840px);
            bottom: 50%;
            left: 50%;
            transform: translate(-50%, 50%);
            box-shadow: 0 16px 50px rgba(0, 0, 0, .6);
            background: #fff8f0fc;
            padding: 16px 16px 12px;
            border: 2px solid #e4bc91;
        }

        .minimap-panel.full-map #minimap {
            height: min(65vh, 480px);
            cursor: crosshair;
        }

        .map-top,
        .map-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 7px;
            font-weight: 700;
            letter-spacing: 1px
        }

        .map-actions {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .map-actions button {
            background: #ffe3cf;
            color: #923d24;
            border: 1px solid #f29f79;
            border-radius: 4px;
            padding: 2px 7px;
            font-size: 8px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.15s ease;
        }
        .map-actions button:hover {
            background: #ff7a32;
            color: #fff;
            border-color: #ff7a32;
        }

        .map-top>span:first-child {
            display: flex;
            align-items: center;
            gap: 5px
        }

        .map-top i {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--orange)
        }

        #minimap {
            width: 100%;
            height: 145px;
            display: block;
            margin-top: 7px;
            border-radius: 4px;
        }

        .map-hint {
            display: none;
            text-align: center;
            font-size: 8.5px;
            color: #7c412e;
            font-weight: 600;
            letter-spacing: 0.5px;
            margin: 4px 0 2px;
        }
        .minimap-panel.full-map .map-hint {
            display: block;
        }

        .map-bottom {
            font-size: 5.5px;
            letter-spacing: .7px;
            border-top: 1px solid #46685a1a;
            padding-top: 8px
        }

        .map-bottom span {
            display: flex;
            align-items: center;
            gap: 4px
        }

        #nikol-tracker {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #ffe3cf;
            color: #923d24;
            border: 1px solid #f29f79;
            border-radius: 4px;
            padding: 4px 7px;
            margin-top: 6px;
            font-size: 8px;
            font-weight: 700;
            letter-spacing: .5px;
            cursor: pointer;
        }

        #nikol-tracker:hover {
            background: #ffd5b9;
        }

        #map-key {
            border-top: 1px solid #46685a1a;
            padding-top: 6px;
            margin-top: 6px;
            color: #42564e;
            font-size: 9px;
            line-height: 1.55;
        }

        #map-key[hidden] {
            display: none;
        }

        #map-key p {
            margin: 2px 0;
        }

        #map-key i {
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            vertical-align: 1px;
        }

        #map-key .legend-you {
            background: #e8774f;
        }

        #map-key .legend-place {
            background: #d95335;
        }

        #map-key .legend-nikol {
            background: #e67e3a;
            border: 1px solid #fff;
        }

        #map-key .legend-traffic {
            background: #1f8278;
        }

        #explore-status {
            color: #245943;
            font-weight: 700;
        }

        .map-top button {
            border: 0;
            background: transparent;
            color: #245943;
            font: inherit;
            cursor: pointer;
            text-decoration: underline;
            font-weight: 700;
        }

        .binding-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 6px;
            margin: 14px 0;
        }

        .binding-grid button {
            min-height: 36px;
            border: 1px solid #ffffff40;
            background: #ffffff0b;
            color: inherit;
            text-align: left;
            padding: 6px 9px;
            cursor: pointer;
        }

        .binding-grid button strong {
            display: block;
            font-size: 10px;
            text-transform: uppercase;
        }

        .binding-grid button span {
            color: #ffc17d;
            font-size: 11px;
        }

        .wallet-chip {
            color: #ffe1a9;
            font-size: 11px;
            font-weight: 700;
        }

        .you-dot,
        .car-dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--orange);
            display: inline-block
        }

        .car-dot {
            background: var(--teal);
            width: 4px;
            height: 4px
        }

        #interaction {
            position: absolute;
            bottom: 100px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            gap: 13px;
            padding: 13px 18px 13px 12px;
            background: #fff4e6f5;
            color: #4b2d24;
            border-radius: 6px;
            min-width: 253px;
            box-shadow: 0 4px 28px #7b341c24;
            transition: opacity .2s
        }

        #interaction>kbd {
            width: 33px;
            height: 35px;
            display: grid;
            place-items: center;
            font: 700 16px 'DM Sans', sans-serif;
            background: var(--orange);
            color: #fff8e8;
            border: 0;
            box-shadow: 0 2px 0 var(--orange-dark)
        }

        #interaction strong {
            display: block;
            font-size: 12px;
            font-weight: 700;
            margin-bottom: 4px
        }

        #interaction div>span {
            display: block;
            font-size: 8px;
            color: #738078
        }

        .prompt-arrow {
            margin-left: auto;
            font-size: 23px;
            opacity: .7
        }

        #driving-tip {
            position: absolute;
            bottom: 88px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 10px;
            letter-spacing: 1px;
            opacity: .9;
            text-shadow: 0 2px 5px #152b28;
            display: none
        }

        #telemetry {
            position: absolute;
            bottom: 30px;
            right: 32px;
            width: 250px;
            height: 250px;
            user-select: none;
            -webkit-user-select: none;
            pointer-events: none;
            z-index: 90;
            filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.75));
            transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        #telemetry.on-foot {
            opacity: 0.35;
            transform: scale(0.85);
            transform-origin: bottom right;
        }

        /* Speedometer Curved Gauge Container */
        .gauge-wrap {
            position: relative;
            width: 250px;
            height: 250px;
        }

        .gauge-svg {
            width: 100%;
            height: 100%;
            overflow: visible;
        }

        /* Center Speed & Gear Digital Readout */
        .gauge-center-data {
            position: absolute;
            top: 52%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: baseline;
            justify-content: center;
            gap: 4px;
            pointer-events: none;
        }

        .gauge-speed-val {
            font-family: 'Barlow Condensed', 'Impact', sans-serif;
            font-size: 78px;
            font-weight: 800;
            line-height: 0.85;
            color: #ffffff;
            letter-spacing: -2px;
            text-shadow: 0 4px 16px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 255, 255, 0.25);
            font-variant-numeric: tabular-nums;
        }

        .gauge-unit-gear {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin-left: 2px;
            gap: 2px;
        }

        .gauge-unit {
            font-family: 'DM Sans', sans-serif;
            font-size: 11px;
            font-weight: 800;
            color: rgba(255, 255, 255, 0.75);
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .gauge-gear {
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 14px;
            font-weight: 800;
            color: #ff9d42;
            letter-spacing: 0.5px;
            line-height: 1;
        }

        /* Bottom Segmented Bar (12 RPM / Speed dashes) */
        .gauge-seg-bar {
            position: absolute;
            bottom: 34px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 3.5px;
            width: 170px;
            height: 9px;
            align-items: center;
            justify-content: center;
        }

        .gauge-seg {
            flex: 1;
            height: 8px;
            background: rgba(255, 255, 255, 0.16);
            transform: skew(-25deg);
            border-radius: 1px;
            transition: background 0.1s ease, box-shadow 0.1s ease;
        }

        .gauge-seg.lit {
            background: #ffffff;
            box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
        }

        .gauge-seg.redline.lit {
            background: #ff3b30;
            box-shadow: 0 0 10px rgba(255, 59, 48, 0.9);
        }

        /* Vehicle Name & Health Baseline Strip */
        .gauge-meta-strip {
            position: absolute;
            bottom: 12px;
            left: 50%;
            transform: translateX(-50%);
            width: 170px;
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .gauge-meta-labels {
            display: flex;
            justify-content: space-between;
            font-size: 9px;
            font-weight: 800;
            font-family: 'DM Sans', sans-serif;
            letter-spacing: 0.8px;
            color: rgba(255, 255, 255, 0.65);
            text-transform: uppercase;
        }

        .gauge-meta-labels span:last-child {
            color: #ffb466;
        }

        .gauge-health-line {
            width: 100%;
            height: 2.5px;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 2px;
            overflow: hidden;
        }

        .gauge-health-fill {
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, #ff9b43, #ffffff);
            transition: width 0.3s ease, background 0.3s ease;
        }

        /* ===== GTA-STYLE WEAPON WHEEL & MISSION HUD ===== */
        #weapon-wheel {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;
            width: 320px;
            height: 320px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(22, 28, 34, 0.94) 0%, rgba(10, 14, 18, 0.96) 72%);
            border: 2px solid rgba(255, 180, 80, 0.45);
            box-shadow: 0 0 35px rgba(0, 0, 0, 0.8), inset 0 0 24px rgba(255, 140, 40, 0.2);
            z-index: 130;
            pointer-events: auto;
            backdrop-filter: blur(8px);
            user-select: none;
        }

        #weapon-wheel.open {
            display: block;
        }

        .wheel-center-label {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            pointer-events: none;
        }

        .wheel-center-label strong {
            display: block;
            font-size: 14px;
            color: #ffe0a3;
            letter-spacing: 1.5px;
            text-transform: uppercase;
        }

        .wheel-center-label span {
            font-size: 11px;
            color: #ff9b42;
            font-weight: 600;
        }

        .wheel-slot {
            position: absolute;
            width: 82px;
            height: 52px;
            transform: translate(-50%, -50%);
            background: rgba(35, 45, 54, 0.85);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 6px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.15s ease;
            color: #f0f0f0;
        }

        .wheel-slot:hover,
        .wheel-slot.active {
            background: linear-gradient(135deg, rgba(255, 122, 50, 0.9), rgba(184, 73, 34, 0.95));
            border-color: #ffe6aa;
            transform: translate(-50%, -50%) scale(1.12);
            box-shadow: 0 0 16px rgba(255, 140, 40, 0.6);
            color: #fff;
        }

        .wheel-slot .w-name {
            font-size: 9.5px;
            font-weight: 700;
            letter-spacing: 0.8px;
            text-transform: uppercase;
        }

        .wheel-slot .w-ammo {
            font-size: 9px;
            color: #ffd89c;
            opacity: 0.9;
        }

        .wheel-slot.active .w-ammo {
            color: #fff;
            font-weight: 700;
        }

        /* Weapon display in bottom right HUD */
        #weapon-hud {
            position: absolute;
            bottom: 24px;
            right: 35px;
            background: rgba(22, 28, 34, 0.85);
            border-left: 3px solid var(--orange);
            padding: 6px 14px;
            border-radius: 3px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
            display: flex;
            align-items: center;
            gap: 12px;
            z-index: 80;
        }

        #weapon-hud-name {
            font-size: 11px;
            font-weight: 700;
            color: #fff;
            letter-spacing: 1px;
        }

        #weapon-hud-ammo {
            font-size: 13px;
            font-weight: 800;
            color: #ffb466;
            font-family: 'Barlow Condensed', sans-serif;
            letter-spacing: 0.5px;
        }

        /* GTA-Style Mission Banner */
        #mission-banner {
            position: absolute;
            top: 76px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(18, 24, 30, 0.92);
            border-top: 2px solid #ffb466;
            border-bottom: 2px solid #ff7a32;
            padding: 8px 24px;
            border-radius: 4px;
            color: #fff;
            text-align: center;
            z-index: 100;
            display: none;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
        }

        #mission-banner.visible {
            display: block;
        }

        #mission-title {
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 1.5px;
            color: #ffb466;
            text-transform: uppercase;
        }

        #mission-detail {
            font-size: 10px;
            color: #eed6b6;
            margin-top: 2px;
        }

        #mission-timer {
            font-size: 14px;
            font-weight: 800;
            color: #ff4d4d;
            font-family: 'Barlow Condensed', sans-serif;
            margin-left: 8px;
        }

        
        .controls {
            position: absolute;
            bottom: 24px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            gap: 23px;
            font-size: 8px;
            color: #fff8e8c4
        }

        .controls>span {
            display: flex;
            align-items: center;
            gap: 5px
        }

        kbd {
            display: inline-block;
            border: 1px solid #fff8e857;
            border-radius: 3px;
            font: 500 8px 'DM Sans', sans-serif;
            padding: 4px 5px;
            color: #fff8e8;
            min-width: 19px;
            text-align: center;
            background: #6b2f1d2b
        }

        .controls>span:first-child {
            gap: 3px
        }

        .controls>span:first-child>span {
            margin-left: 3px
        }

        #toast {
            position: absolute;
            top: 119px;
            left: 50%;
            transform: translate(-50%, -10px);
            opacity: 0;
            transition: opacity .3s, transform .3s;
            text-align: center;
            pointer-events: none;
            padding: 13px 23px;
            background: #5b2d20df;
            backdrop-filter: blur(12px);
            border-radius: 5px
        }

        #toast.visible {
            opacity: 1;
            transform: translate(-50%, 0)
        }

        #toast-title {
            font: 600 21px 'Barlow Condensed', sans-serif;
            letter-spacing: 1px;
            display: block
        }

        #toast-sub {
            display: block;
            font-size: 9px;
            margin-top: 5px;
            opacity: .75
        }

        .overlay {
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 50% 35%, rgba(18, 14, 26, 0.82) 0%, rgba(6, 4, 10, 0.96) 100%);
            backdrop-filter: blur(18px) saturate(1.35);
            -webkit-backdrop-filter: blur(18px) saturate(1.35);
            display: grid;
            place-items: center;
            z-index: 5000;
            padding: 24px;
            overflow-y: auto;
            transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .overlay[hidden] {
            display: none;
        }

        .menu-card {
            position: relative;
            width: 530px;
            max-width: calc(100vw - 28px);
            background: linear-gradient(165deg, rgba(28, 22, 38, 0.96) 0%, rgba(16, 12, 24, 0.98) 100%);
            color: #fff6ea;
            padding: 34px 36px 30px;
            border-radius: 20px;
            border: 1px solid rgba(255, 160, 80, 0.18);
            box-shadow: 0 25px 70px rgba(0, 0, 0, 0.65), 0 0 45px rgba(255, 110, 40, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1);
            animation: menuCardPop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        @keyframes menuCardPop {
            0% { transform: scale(0.96) translateY(12px); opacity: 0; }
            100% { transform: scale(1) translateY(0); opacity: 1; }
        }

        .menu-badge {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            background: rgba(255, 122, 50, 0.14);
            border: 1px solid rgba(255, 122, 50, 0.35);
            color: #ff9b57;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 2.2px;
            text-transform: uppercase;
            padding: 5px 12px;
            border-radius: 999px;
            margin-bottom: 12px;
        }

        .menu-badge .pulse-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #ff7a32;
            box-shadow: 0 0 8px #ff7a32;
            animation: dotBlink 1.8s infinite;
        }

        @keyframes dotBlink {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.4; transform: scale(0.7); }
        }

        .menu-card h2 {
            font: 800 38px/1.05 'Barlow Condensed', Impact, sans-serif;
            letter-spacing: 0.5px;
            color: #fffaf2;
            text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
            margin: 0 0 6px;
        }

        .menu-sub {
            font-size: 13px;
            color: rgba(255, 235, 215, 0.65);
            margin: 0 0 20px;
            font-weight: 500;
        }

        .control-grid-modern {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
            margin-bottom: 22px;
            background: rgba(0, 0, 0, 0.22);
            padding: 14px;
            border-radius: 14px;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .control-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 7px 11px;
            background: rgba(255, 255, 255, 0.035);
            border-radius: 9px;
            border: 1px solid rgba(255, 255, 255, 0.04);
            font-size: 11px;
            color: rgba(255, 240, 225, 0.85);
            gap: 8px;
        }

        .control-item .action-name {
            font-size: 11px;
            color: rgba(255, 230, 210, 0.75);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .control-item .keys-wrap {
            display: flex;
            align-items: center;
            gap: 4px;
            flex-shrink: 0;
        }

        .keycap {
            display: inline-block;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 100%);
            border: 1px solid rgba(255, 255, 255, 0.22);
            border-bottom: 2px solid rgba(255, 160, 90, 0.4);
            color: #fff9f0;
            font-family: 'DM Sans', sans-serif;
            font-size: 10px;
            font-weight: 800;
            padding: 3px 6px;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
            letter-spacing: 0.3px;
            text-transform: uppercase;
        }

        .menu-btn-group {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 18px;
        }

        .primary {
            border: 0;
            width: 100%;
            padding: 15px 22px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 800;
            letter-spacing: 0.6px;
            text-transform: uppercase;
            background: linear-gradient(135deg, #ff7a32 0%, #e6511e 60%, #c4380d 100%);
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            box-shadow: 0 8px 24px rgba(230, 81, 30, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.3);
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .primary:hover {
            background: linear-gradient(135deg, #ff8c47 0%, #f05c26 60%, #d44012 100%);
            transform: translateY(-2px);
            box-shadow: 0 12px 30px rgba(230, 81, 30, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4);
        }

        .primary:active {
            transform: translateY(1px);
            box-shadow: 0 4px 14px rgba(230, 81, 30, 0.3);
        }

        .secondary {
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(255, 255, 255, 0.05);
            color: rgba(255, 240, 225, 0.75);
            width: 100%;
            padding: 13px 20px;
            border-radius: 12px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.2s ease;
        }

        .secondary:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #ffffff;
            border-color: rgba(255, 122, 50, 0.4);
            transform: translateY(-1px);
        }

        .control-settings {
            background: rgba(0, 0, 0, 0.24);
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            padding: 12px 16px;
            margin-bottom: 16px;
            transition: background 0.2s ease;
        }

        .control-settings[open] {
            background: rgba(0, 0, 0, 0.35);
        }

        .control-settings summary {
            font-size: 12px;
            font-weight: 700;
            color: #ff9b57;
            cursor: pointer;
            user-select: none;
            outline: none;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .control-settings summary::-webkit-details-marker {
            display: none;
        }

        .control-settings summary::before {
            content: '▶';
            font-size: 9px;
            color: #ff9b57;
            transition: transform 0.2s ease;
        }

        .control-settings[open] summary::before {
            transform: rotate(90deg);
        }

        .control-settings p {
            font-size: 11px;
            color: rgba(255, 235, 215, 0.6);
            margin: 10px 0 12px;
        }

        .binding-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
            margin: 8px 0 4px;
        }

        .binding-grid button {
            min-height: 40px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.05);
            color: #fff6ea;
            border-radius: 8px;
            text-align: left;
            padding: 7px 12px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .binding-grid button:hover {
            background: rgba(255, 122, 50, 0.15);
            border-color: rgba(255, 122, 50, 0.4);
        }

        .binding-grid button strong {
            display: block;
            font-size: 10px;
            text-transform: uppercase;
            color: rgba(255, 230, 210, 0.75);
            letter-spacing: 0.3px;
        }

        .binding-grid button span {
            color: #ffc17d;
            font-size: 11px;
            font-weight: 800;
            background: rgba(0, 0, 0, 0.3);
            padding: 3px 7px;
            border-radius: 5px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .menu-footnote {
            text-align: center;
            font-size: 11px;
            letter-spacing: 0.5px;
            color: rgba(255, 235, 215, 0.4);
            margin: 0;
            text-transform: uppercase;
        }

        #loading {
            position: absolute;
            inset: 0;
            z-index: 9999;
            background: #0d0a10;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #fff6ea;
            font-family: 'DM Sans', sans-serif;
            transition: opacity .5s ease-out, visibility .5s ease-out;
            padding: 24px;
            overflow: hidden;
            user-select: none;
            -webkit-user-select: none;
        }

        #loading-map-canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.38;
            filter: saturate(1.2) contrast(1.1) brightness(0.75);
            pointer-events: none;
            z-index: 0;
            transform: scale(1.05);
            animation: slowMapDrift 25s ease-in-out infinite alternate;
        }

        @keyframes slowMapDrift {
            0% { transform: scale(1.03) translate(0px, 0px); }
            100% { transform: scale(1.08) translate(-15px, -10px); }
        }

        .loading-map-overlay {
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            background: radial-gradient(circle at 50% 50%, rgba(13, 10, 16, 0.6) 0%, rgba(6, 5, 8, 0.92) 85%);
        }

        .loading-bg-glow {
            position: absolute;
            width: 580px;
            height: 580px;
            max-width: 90vw;
            max-height: 90vw;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255, 94, 54, 0.22) 0%, rgba(255, 162, 0, 0.08) 45%, transparent 70%);
            filter: blur(45px);
            pointer-events: none;
            animation: pulseGlow 4s ease-in-out infinite alternate;
        }

        .loading-card {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            max-width: 500px;
            width: 100%;
        }

        .loading-brand-badge {
            font: 800 11px 'Barlow Condensed', Impact, sans-serif;
            letter-spacing: 3.5px;
            text-transform: uppercase;
            color: #ff9d66;
            background: rgba(255, 94, 54, 0.12);
            border: 1px solid rgba(255, 94, 54, 0.3);
            padding: 4px 14px;
            border-radius: 20px;
            margin-bottom: 12px;
            box-shadow: 0 2px 12px rgba(255, 94, 54, 0.15);
        }

        .loading-brand {
            font: 900 clamp(48px, 9vw, 76px) 'Barlow Condensed', Impact, sans-serif;
            letter-spacing: 4px;
            line-height: 0.95;
            text-transform: uppercase;
            font-style: italic;
            margin-bottom: 6px;
            background: linear-gradient(180deg, #ffffff 20%, #ffd8b0 65%, #ff7a32 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(0 4px 18px rgba(255, 94, 54, 0.45));
        }

        .loading-city-tag {
            font: 700 12px 'Barlow Condensed', sans-serif;
            letter-spacing: 3px;
            color: #b5a092;
            text-transform: uppercase;
            margin-bottom: 30px;
        }

        .loading-progress-block {
            width: 100%;
            max-width: 440px;
            margin-bottom: 22px;
        }

        .loading-meta-row {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            margin-bottom: 10px;
            padding: 0 2px;
        }

        .loading-status {
            font: 700 11px 'DM Sans', sans-serif;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: #e4d5c7;
            text-align: left;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 78%;
        }

        .loading-pct-wrap {
            font: 800 24px 'Barlow Condensed', sans-serif;
            color: #ff9d42;
            letter-spacing: 0.5px;
            display: flex;
            align-items: baseline;
        }

        .loading-pct-unit {
            font-size: 14px;
            margin-left: 2px;
            color: #ffaa55;
            opacity: 0.85;
        }

        .loading-bar-track {
            width: 100%;
            height: 12px;
            background: rgba(0, 0, 0, 0.7);
            border: 1px solid rgba(255, 140, 60, 0.32);
            border-radius: 999px;
            padding: 2px;
            position: relative;
            overflow: hidden;
            box-shadow: inset 0 2px 6px rgba(0,0,0,0.8), 0 4px 16px rgba(0,0,0,0.5);
        }

        .loading-bar-fill {
            width: 0%;
            height: 100%;
            border-radius: 999px;
            background: linear-gradient(90deg, #ff4500 0%, #ff8c00 50%, #ffc107 100%);
            box-shadow: 0 0 16px rgba(255, 110, 30, 0.85);
            position: relative;
            overflow: hidden;
            transition: width 0.15s ease-out;
        }

        .loading-bar-glint {
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
            background-size: 140px 100%;
            animation: glint 1.4s infinite linear;
        }

        .loading-tip {
            font-size: 12px;
            line-height: 1.45;
            color: #c4b3a4;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            padding: 10px 18px;
            border-radius: 12px;
            max-width: 440px;
            transition: opacity 0.25s ease;
        }

        .loading-tip strong {
            color: #ffd4a8;
            font-weight: 700;
        }

        @keyframes pulseGlow {
            0% { transform: scale(0.92); opacity: 0.65; }
            100% { transform: scale(1.12); opacity: 1; }
        }

        @keyframes glint {
            0% { background-position: -140px 0; }
            100% { background-position: 440px 0; }
        }

        #fatal {
            position: absolute;
            inset: 0;
            background: #fff4e6;
            color: #573125;
            padding: 15vh 15vw
        }

        #fatal[hidden] {
            display: none
        }

        .hide-hud .topbar,
        .hide-hud #welcome,
        .hide-hud #location-banner,
        .hide-hud .minimap-panel,
        .hide-hud #interaction,
        .hide-hud #driving-tip,
        .hide-hud #telemetry,
        .hide-hud .controls,
        .hide-hud #toast,
        .hide-hud #touch-controls,
        .hide-hud #crosshair {
            visibility: hidden
        }

        #touch-controls {
            display: none
        }

        @media(max-width:850px) {
            .topbar {
                top: 22px;
                left: 22px;
                right: 22px
            }

            .brand h1 {
                font-size: 28px
            }

            .brand svg {
                width: 32px
            }

            .brand h1 span {
                display: none
            }

            .weather {
                display: none
            }

            #location-banner {
                display: none
            }

            #welcome {
                top: 118px;
                left: 25px
            }

            #welcome h2 {
                font-size: 35px
            }

            .minimap-panel {
                left: 20px;
                bottom: 63px;
                width: 158px;
                padding: 10px
            }

            #minimap {
                height: 112px
            }

            #telemetry {
                right: 20px;
                bottom: 65px;
                width: 140px
            }

            .speed-display>span {
                font-size: 72px
            }

            .speed-display {
                height: 66px
            }

            .controls {
                gap: 12px;
                font-size: 7px;
                bottom: 20px
            }

            .controls>span:nth-last-child(2) {
                display: none
            }

            #interaction {
                bottom: 88px;
                min-width: 220px
            }

            #driving-tip {
                bottom: 68px;
                font-size: 8px
            }
        }

        @media(max-width:580px) {
            .topbar {
                top: 17px;
                left: 16px;
                right: 16px
            }

            .brand p {
                font-size: 6px;
                letter-spacing: 2px
            }

            .icon-button {
                width: 34px;
                height: 34px
            }

            #welcome {
                top: 100px;
                left: 20px
            }

            #tour-label {
                bottom: 105px;
                min-width: 220px;
            }

            #tour-label strong {
                font-size: 17px;
            }

            .minimap-panel {
                width: 133px;
                left: 15px;
                bottom: 162px
            }

            #minimap {
                height: 90px
            }

            .map-bottom {
                display: none
            }

            #telemetry {
                right: 17px;
                bottom: 167px;
                width: 108px
            }

            .vehicle-label>span:last-child {
                font-size: 15px
            }

            .speed-display>span {
                font-size: 59px
            }

            .speed-display {
                height: 56px
            }

            .speed-ticks {
                gap: 3px;
                margin-bottom: 12px
            }

            .condition {
                font-size: 5px
            }

            .controls {
                display: none
            }

            #interaction {
                bottom: 30px;
                left: 50%;
                min-width: 178px;
                padding: 10px;
                gap: 9px
            }

            #interaction strong {
                font-size: 10px
            }

            #interact-detail {
                font-size: 7px !important
            }

            #interaction>kbd {
                width: 28px;
                height: 30px
            }

            #driving-tip {
                bottom: 28px
            }

            .prompt-arrow {
                display: none
            }

            #touch-controls {
                position: absolute;
                bottom: 25px;
                left: 14px;
                right: 14px;
                display: flex;
                justify-content: space-between;
                pointer-events: none
            }

            .touch-pad {
                display: grid;
                grid-template-columns: 42px 42px 42px;
                gap: 5px
            }

            .touch-pad button:first-child {
                grid-column: 2
            }

            .touch-pad button:nth-child(2) {
                grid-column: 1
            }

            .touch-pad button {
                width: 42px;
                height: 42px
            }

            .touch-actions {
                display: flex;
                flex-direction: column;
                gap: 8px
            }

            .touch-actions button {
                height: 42px;
                min-width: 47px;
                font-size: 9px
            }

            .touch-pad button,
            .touch-actions button {
                pointer-events: auto;
                border: 1px solid #fff8e877;
                background: #31534d70;
                color: #fff8e8;
                border-radius: 7px;
                touch-action: none;
                backdrop-filter: blur(6px)
            }

            #toast {
                top: 88px;
                min-width: 210px
            }

            #toast-title {
                font-size: 18px
            }

            .menu-card {
                padding: 27px
            }

            .control-grid {
                gap: 12px
            }
        }

        @media(max-width:580px) {
            .minimap-panel {
                bottom: 215px
            }

            #telemetry {
                bottom: 220px
            }

            #interaction {
                bottom: 129px
            }

            #driving-tip {
                bottom: 142px
            }
        }

        #loading[hidden] {
            display: none
        }

        #crosshair {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 16px;
            height: 16px;
            transform: translate(-50%, -50%);
            pointer-events: none;
            display: none
        }

        #crosshair.aiming {
            width: 22px;
            height: 22px;
        }

        #crosshair.aiming::before,
        #crosshair.aiming::after {
            background: #ffbd73;
            box-shadow: 0 0 6px #ff6d39;
        }

        #crosshair::before,
        #crosshair::after {
            content: '';
            position: absolute;
            background: #fff8e8cc;
            box-shadow: 0 0 3px #16302a99
        }

        #crosshair::before {
            left: 50%;
            top: 0;
            width: 2px;
            height: 100%;
            margin-left: -1px
        }

        #crosshair::after {
            top: 50%;
            left: 0;
            height: 2px;
            width: 100%;
            margin-top: -1px
        }

        #touch-fire {
            background: #c9503f99 !important;
            font-size: 17px !important
        }

        .wanted {
            font-size: 17px;
            letter-spacing: 3px;
            color: #ffd66b;
            text-shadow: 0 2px 8px #00000066;
            margin-right: 2px;
            min-width: 20px
        }

        .controls {
            font-size: 10px;
            gap: 22px
        }

        .controls kbd {
            font-size: 9px;
            min-width: 21px;
            padding: 5px
        }

        .map-top {
            font-size: 8px
        }

        .map-bottom {
            font-size: 6px
        }

        .weather {
            font-size: 10px
        }

        .location-sub {
            font-size: 7px
        }

        .vehicle-label>span:first-child {
            font-size: 8px
        }

        .vehicle-label>span:last-child {
            font-size: 20px
        }

        .condition {
            font-size: 7px
        }

        #interaction strong {
            font-size: 13px
        }

        #interaction div>span {
            font-size: 10px
        }

        #toast-sub {
            font-size: 10px
        }

        @media(max-width:850px) {
            .controls {
                font-size: 8px;
                gap: 11px
            }

            .controls kbd {
                font-size: 8px;
                min-width: 18px;
                padding: 4px
            }

            .vehicle-label>span:last-child {
                font-size: 17px
            }
        }

        @media(max-width:580px) {
            #interaction {
                max-width: calc(100vw - 36px)
            }

            #interaction strong {
                font-size: 12px
            }

            #interaction div>span {
                font-size: 9px !important
            }

            .vehicle-label>span:last-child {
                font-size: 15px
            }

            .vehicle-label>span:first-child {
                font-size: 7px
            }

            .condition {
                font-size: 6px
            }

            #toast-sub {
                font-size: 9px
            }
        }

        /* Touch layout also covers landscape phones and tablets. */
        #touch-controls {
            user-select: none;
            -webkit-user-select: none;
            touch-action: none
        }

        #touch-controls button {
            border-radius: 4px;
            box-shadow: none
        }

        #touch-controls button.held {
            background: #fff8e8 !important;
            color: #253c3c !important
        }

        @media(any-pointer:coarse), (max-width:580px) {
            #touch-controls {
                position: absolute;
                display: flex;
                align-items: flex-end;
                justify-content: space-between;
                left: max(12px, env(safe-area-inset-left));
                right: max(12px, env(safe-area-inset-right));
                bottom: max(12px, env(safe-area-inset-bottom));
                pointer-events: none;
                gap: 12px
            }

            .touch-pad {
                display: grid;
                grid-template-columns: repeat(3, 48px);
                gap: 6px
            }

            .touch-pad button:first-child {
                grid-column: 2
            }

            .touch-pad button:nth-child(2) {
                grid-column: 1
            }

            .touch-actions {
                display: grid;
                grid-template-columns: repeat(2, 68px);
                gap: 6px
            }

            #touch-controls button {
                pointer-events: auto;
                touch-action: none;
                min-width: 0;
                width: 100%;
                height: 48px;
                padding: 3px;
                border: 1px solid #fff8e8;
                background: #253c3c;
                color: #fff8e8;
                font: 700 10px 'DM Sans', sans-serif;
                display: flex;
                align-items: center;
                justify-content: center
            }

            #touch-fire {
                background: #b5482b !important;
                font-size: 11px !important
            }

            .controls {
                display: none
            }

            .minimap-panel {
                bottom: 190px;
                width: 125px;
                left: 12px
            }

            #minimap {
                height: 85px
            }

            .map-bottom {
                display: none
            }

            #telemetry {
                bottom: 190px;
                right: 12px;
                width: 115px
            }

            #interaction {
                bottom: 178px;
                min-width: 170px;
                max-width: 65vw
            }

            #driving-tip {
                display: none !important
            }

            .menu-card {
                max-height: 90dvh;
                overflow: auto
            }

            #location-banner,
            .weather {
                display: none
            }
        }

        @media(any-pointer:coarse) and (max-height:500px) {
            .minimap-panel {
                top: 76px;
                bottom: auto;
                width: 100px
            }

            #minimap {
                height: 60px
            }

            #telemetry {
                top: 76px;
                bottom: auto;
                width: 95px
            }

            .speed-display {
                height: 45px
            }

            .speed-display>span {
                font-size: 44px
            }

            .speed-ticks {
                display: none
            }

            #interaction {
                bottom: 14px;
                max-width: 36vw
            }

            #welcome {
                top: 85px
            }

            #welcome h2 {
                font-size: 26px
            }

            .topbar {
                top: 12px
            }
        }