@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,500;0,700;0,900;1,900&family=DM+Mono:wght@400;500&display=swap');

:root {
    --ink: #eef2ee;
    --muted: #8b9692;
    --acid: #c8ff32;
    --cyan: #ff831d;
    --panel: #0b1014;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    background: #06080a;
    color: var(--ink);
}

body {
    font-family: 'DM Mono', monospace;
    overflow: hidden;
}

/* Hide only over the driving canvas. Fullscreen menus and buttons retain
   their normal cursors, including results, pauses and replay controls. */
body.driving-cursor-hidden #game {
    cursor: none !important;
}

button {
    font: inherit;
}

.shell {
    height: 100svh;
    height: 100dvh;
    display: grid;
    grid-template-rows: 56px 1fr 32px;
    padding: 0 22px;
    background: radial-gradient(circle at 80% 20%, #152226 0, transparent 35%);
}

.topbar, footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    letter-spacing: .12em;
    font-size: 10px;
}

.brand {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.brand img {
    display: block;
    width: 250px;
    height: auto;
}

.build {
    color: var(--muted);
}

.build i {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 8px;
    border-radius: 50%;
    background: var(--acid);
    box-shadow: 0 0 10px var(--acid);
}

.sound {
    border: 0;
    color: var(--muted);
    background: none;
    cursor: pointer;
    font-size: 11px;
    letter-spacing: .12em;
}

.view-button { display: none; }
.view-button[hidden], .exit-button[hidden] { display: none !important; }

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.settings-button {
    padding: 6px 9px;
    border: 1px solid #394348;
    color: var(--ink);
    background: #0d1216;
    cursor: pointer;
    font-size: 9px;
    letter-spacing: .12em;
}

.settings-button:hover, .settings-button[aria-expanded="true"] {
    color: var(--acid);
    border-color: var(--acid);
}

.game-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid #263036;
    background: #0a0d10;
    min-height: 0;
}

.settings-panel {
    position: absolute;
    z-index: 12;
    top: 12px;
    right: 12px;
    width: min(330px, calc(100% - 24px));
    max-height: calc(100% - 24px);
    overflow: hidden;
    overflow-y: auto;
    padding: 16px;
    border: 1px solid #3b474c;
    background: #090e12f2;
    box-shadow: 0 16px 45px #000b;
    backdrop-filter: blur(12px);
}

.settings-panel[hidden] { display: none; }

.settings-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid #263136;
    color: var(--acid);
    font: 700 11px 'DM Mono', monospace;
    letter-spacing: .18em;
}

.settings-title button {
    padding: 0 3px;
    border: 0;
    color: var(--muted);
    background: none;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}

.settings-driver-name {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-top: 13px;
    padding: 5px 6px 5px 10px;
    border: 1px solid #59666c;
    color: var(--acid);
    background: #0b1217;
    font-size: 7px;
    letter-spacing: .16em;
}

.settings-driver-name:focus-within {
    border-color: var(--acid);
    box-shadow: 0 0 16px #c8ff321c;
}

.settings-panel .settings-driver-name input {
    min-width: 0;
    width: 100%;
    padding: 7px 5px;
    border: 0;
    outline: 0;
    color: var(--ink);
    background: transparent;
    font: 700 11px 'DM Mono', monospace;
    letter-spacing: .1em;
    text-align: right;
    text-transform: uppercase;
    opacity: 1;
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    pointer-events: auto;
}

.settings-driver-name button {
    padding: 7px 9px;
    border: 1px solid #536067;
    color: var(--ink);
    background: #141b20;
    font: 700 8px 'DM Mono', monospace;
    letter-spacing: .1em;
    cursor: pointer;
}
.settings-driver-name button:hover, .settings-driver-name button:focus { border-color: var(--acid); outline: 0; }
.settings-driver-name button:disabled { cursor: wait; opacity: .55; }
.settings-driver-name > small { 
    grid-column: 1 / -1;
    color: var(--acid) !important;
    line-height: 1.4;
    font-size: 15px !important;
    text-align: right;
}
.settings-driver-name > small.name-error { 
        color: #ff5c5c;
    font-size: 12px;
    text-align: right;
 }
.settings-driver-name > small:empty { display: none; }

.settings-panel > .settings-section-title {
    margin: 15px 0 0;
    color: var(--muted);
    font-size: 7px;
    letter-spacing: .18em;
}

.settings-panel label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 58px;
    border-bottom: 1px solid #202a2f;
    cursor: pointer;
}
.settings-panel label.playerNameLabel {
     border-bottom: none;
}


.settings-panel label span { display: grid; gap: 4px; }
.settings-panel strong { font-size: 9px; letter-spacing: .12em; }
.settings-panel small { color: var(--muted); font-size: 8px; }
.settings-panel input { position: absolute; opacity: 0; pointer-events: none; }
.settings-panel label i {
    position: relative;
    flex: 0 0 34px;
    height: 18px;
    border: 1px solid #536067;
    background: #141b20;
}
.settings-panel label i::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    background: #6c7779;
    transition: .15s;
}
.settings-panel input:checked + i { border-color: var(--acid); }
.settings-panel input:checked + i::after { left: 19px; background: var(--acid); box-shadow: 0 0 8px #c8ff3288; }
.settings-panel .select-setting { cursor: default; }
.settings-panel select {
    max-width: 112px;
    padding: 7px 22px 7px 8px;
    border: 1px solid #536067;
    border-radius: 0;
    outline: 0;
    color: var(--ink);
    background: #141b20;
    font: 700 8px 'DM Mono', monospace;
    letter-spacing: .08em;
    cursor: pointer;
}
.settings-panel select:focus { border-color: var(--acid); box-shadow: 0 0 12px #c8ff321c; }
.settings-panel > p { margin: 13px 0 0; color: #68736f; font-size: 7px; line-height: 1.6; }

.display-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }
.display-actions button { min-height: 48px; padding: 8px; border: 1px solid #394348; color: var(--ink); background: #10171c; cursor: pointer; text-align: left; }
.display-actions button:hover { border-color: var(--acid); }
.display-actions button strong, .display-actions button small { display: block; }
.display-actions button strong { margin-bottom: 4px; }
.display-actions button small { line-height: 1.35; }
.display-actions button[hidden] { display: none; }

#game {
    width: 100%;
    height: 100%;
    display: block;
    outline: none;
}

.loading {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    justify-content: center;
    background: #070a0c;
    color: var(--acid);
    font-size: 10px;
    letter-spacing: .18em;
}

.car-card.loading {
 
    display: unset;
}

.loading[hidden] {
    display: none
}

.loading i {
    position: relative;
    display: block;
    overflow: hidden;
    width: 180px;
    height: 2px;
    background: #263027;
}

.loading i b {
    display: block;
    width: var(--load-progress, 0%);
    height: 100%;
    background: var(--acid);
    box-shadow: 0 0 8px #c8ff3277;
    transition: width .12s linear;
}

.loading span b {
    color: var(--ink);
    font-weight: 500;
}

.loading.indeterminate i b {
    width: 42%;
    animation: load-indeterminate 1.1s ease-in-out infinite;
}

@keyframes load-indeterminate {
    from { transform: translateX(-105%); }
    to { transform: translateX(245%); }
}

.hud {
    position: absolute;
    top: 24px;
    z-index: 3;
    display: grid;
    gap: 3px;
    text-shadow: 0 2px 8px #000;
}

.hud-left {
    left: 26px;
}

.hud-right {
    right: 26px;
    text-align: right;
}

.hud-label {
    color: var(--acid);
    font-size: 9px;
    letter-spacing: .18em;
}

.hud strong {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 28px;
    line-height: 1;
    font-weight: 200;
}

.hud strong b {
    display: inline-block;
    color: var(--acid);
}

.hud strong b.checkpoint-hit { animation: checkpoint-number .34s ease-out; }
@keyframes checkpoint-number { 35% { color: #fff; text-shadow: 0 0 18px var(--acid); transform: scale(1.2); } }

.fps-counter {
    position: absolute;
    z-index: 3;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 8px;
    border: 1px solid #ffffff24;
    color: var(--acid);
    background: #060a0db8;
    font: 500 10px 'DM Mono', monospace;
    letter-spacing: .1em;
    pointer-events: none;
}

.fps-counter[hidden] { display: none; }

.speedo {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    width: 150px;
    text-align: center;
    text-shadow: 0 2px 8px #000;
}

.speedo strong {
    font: 100 42px/1 'Barlow Condensed', sans-serif;
}

.speedo span {
    color: var(--muted);
    font-size: 9px;
    margin-left: 5px;
}

.boost-fx {
    position: absolute;
    z-index: 2;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    --boost-origin-x: 50%;
    --boost-origin-y: 58%;
    will-change: opacity;
    transition: opacity .24s cubic-bezier(.2,.8,.2,1);
    contain: strict;
}

.boost-fx canvas {
    position: absolute;
    left: var(--boost-origin-x);
    top: var(--boost-origin-y);
    width: 160vmax;
    height: 160vmax;
    opacity: .92;
    transform: translate(-50%,-50%) scale(.72);
    transform-origin: center;
    will-change: transform;
}

.boost-fx.active canvas { animation: boost-rush .46s linear infinite; }

@keyframes boost-rush {
    from { transform: translate(-50%,-50%) scale(.70); }
    to { transform: translate(-50%,-50%) scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
    .boost-fx.active canvas { animation: none; }
}

.race-flash {
    position: absolute;
    z-index: 4;
    inset: 0;
    pointer-events: none;
    opacity: 0;
}

.race-flash.checkpoint { animation: checkpoint-flash .34s ease-out; }
.race-flash.finish { animation: finish-flash .65s ease-out; }
.race-flash.personal-best { animation: personal-best-flash .9s ease-out; }
@keyframes checkpoint-flash { from { opacity: .55; box-shadow: inset 0 0 55px 5px #c8ff3290; } to { opacity: 0; box-shadow: inset 0 0 90px 0 #c8ff3200; } }
@keyframes finish-flash { from { opacity: .9; background: #fff; } to { opacity: 0; background: #fff0; } }
@keyframes personal-best-flash {
    0% { opacity: .95; background: #fff; box-shadow: inset 0 0 0 #c8ff3200; }
    28% { opacity: .72; background: #c8ff3245; box-shadow: inset 0 0 90px 12px #c8ff3290; }
    100% { opacity: 0; background: #c8ff3200; box-shadow: inset 0 0 150px #c8ff3200; }
}

.finish-fade { position: absolute; z-index: 4; inset: 0; pointer-events: none; background: #000; opacity: 0; }
.finish-fade.active { animation: finish-fade 3s linear forwards; }
@keyframes finish-fade { from { opacity: 0; } to { opacity: 1; } }

.pb-confetti {
    position: absolute;
    z-index: 8;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.pb-confetti[hidden] { display: none; }

.start-panel, .result-panel {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: radial-gradient(circle at center, #10191dcc 50%, #07090bed 88%);
    backdrop-filter: blur(3px);
    text-align: center;
}

.start-panel[hidden], .result-panel[hidden] {
    display: none;
}

.eyebrow {
    margin: 0 0 8px;
    color: var(--acid);
    font-size: 18px;
    letter-spacing: .25em;
}

.start-panel h1 {
    margin: 0 0 30px;
    font: 900 70px / .72 'Barlow Condensed', sans-serif;
    letter-spacing: -.04em;
    -webkit-text-stroke: 2px #000;
}

.start-panel h1 em {
    color: transparent;
    -webkit-text-stroke: 2px #fff;
  opacity: .7;
}

.intro {
    margin: 20px 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.2;
    font-family: 'Barlow Condensed';
}

.name-prompt {
    position: absolute;
    z-index: 11;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: #05090dd9;
    backdrop-filter: blur(8px);
}
.name-prompt[hidden], .race-countdown[hidden] { display: none; }
.name-prompt form { width: min(420px, 92vw); padding: 25px; border: 1px solid #4b585f; background: #0a1014f5; box-shadow: 0 25px 80px #000d; text-align: center; }
.name-prompt h2 { margin: 5px 0 8px; font: italic 900 34px 'Barlow Condensed', sans-serif; }
.name-prompt form > p:not(.eyebrow) { color: var(--muted); font-size: 9px; }
.name-prompt input { width: 100%; margin-top: 13px; padding: 13px; border: 1px solid #58656b; outline: 0; color: var(--ink); background: #11191e; font: 700 14px 'DM Mono', monospace; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.name-prompt input:focus { border-color: var(--acid); }
.name-prompt small { display: block; min-height: 22px; padding-top: 7px; color: #ff8978; font-size: 8px; }
.name-prompt form > div { display: flex; justify-content: center; gap: 8px; }
.name-prompt button { min-width: 130px; }

.exit-modal { position: absolute; z-index: 11; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(8px); }
.exit-modal[hidden] { display: none; }
.exit-modal > div { width: min(390px,92vw); padding: 26px; border: 1px solid #4b585f;  background: rgba(0, 0, 0, 0.6); box-shadow: 0 25px 80px #000d; text-align: center; }
.exit-modal h2 { margin: 6px 0 22px; font: italic 900 34px 'Barlow Condensed',sans-serif; }
.exit-modal button { display: block; width: 100%; margin-top: 9px; }

.race-countdown { position: absolute; z-index: 9; inset: 0; display: grid; place-items: center; pointer-events: none; background: radial-gradient(circle, #06101522, transparent 45%); }
.race-countdown strong { color: var(--ink); font: italic 900 clamp(100px,22vw,240px) 'Barlow Condensed', sans-serif; line-height: 1; text-shadow: 0 5px 35px #000b,0 0 35px #c8ff3240; animation: countdown-pulse .72s ease-out both; }
.race-countdown.go strong { color: var(--acid); font-size: clamp(70px,16vw,180px); }
@keyframes countdown-pulse { from { opacity: 0; transform: scale(1.3); } 18% { opacity: 1; } to { opacity: .25; transform: scale(.72); } }

.car-picker {
    display: flex;
    gap: 10px;
    width: min(600px, 90vw);
    margin: 0 0 50px;
}

.car-card {
    position: relative;
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 1px solid #30393e;
    background: #101519;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
    overflow: hidden;
        border-radius: 5px;
}

.car-card.loading::after {
    content: '';
    position: absolute;
    left: 50%;
    top: calc((100% - 29px) / 2);
    width: 22px;
    height: 22px;
    margin: -11px;
    border: 2px solid #ffffff45;
    border-top-color: var(--acid);
    border-radius: 50%;
    animation: car-loading-spin .65s linear infinite;
    pointer-events: none;
}

.car-card.loading img {
    filter: saturate(.35) brightness(.35);
}

@keyframes car-loading-spin {
    to { transform: rotate(360deg); }
}

.car-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1.8;
    object-fit: cover;
    filter: saturate(.9) brightness(.9);
    transition: .2s;
}

.car-card span {
    display: flex;
    justify-content: space-between;
    padding: 7px 9px;
    font: 700 12px 'Barlow Condensed', sans-serif;
    letter-spacing: .08em;
}

.car-card small {
    color: var(--muted);
    font: 10px 'DM Mono', monospace;
}

.car-card:hover img, .car-card.selected img {
    filter: saturate(1.15) brightness(1);
    transform: scale(1.03);
}

.car-card.selected {
    border-color: var(--acid);
    box-shadow: 0 0 18px #c8ff321b;
}

.car-card.selected span {
    color: var(--acid);
}

.primary, .secondary {
    min-width: 170px;
    padding: 12px 18px;
    border: 1px solid var(--acid);
    cursor: pointer;
    font-size: 14px;
    letter-spacing: .13em;
}

.primary {
    background: var(--acid);
    color: #0a0d0e;
    font-weight: 700;
}

.primary:disabled {
    cursor: wait;
    opacity: .55;
}

.primary span {
    float: right;
}

.secondary {
    color: var(--ink);
    background: transparent;
    border-color: #576167;
}

.result-actions button.controller-focus,
.exit-modal button.controller-focus {
    border-color: var(--acid);
    color: var(--acid);
    background: #c8ff3212;
    box-shadow: 0 0 18px #c8ff3226;
    outline: none;
}

.replay-link {
    margin-top: 10px;
    padding: 8px 12px;
    border: 0;
    color: var(--acid);
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    letter-spacing: .14em;
}

.replay-ui {
    position: absolute;
    z-index: 7;
    inset: 18px 20px auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    pointer-events: none;
    text-shadow: 0 2px 10px #000;
}

.replay-ui[hidden] { display: none; }
.replay-ui > div { display: grid; gap: 3px; }
.replay-ui span { color: var(--acid); font-size: 9px; letter-spacing: .18em; }
.replay-ui strong { font: 900 19px 'Barlow Condensed', sans-serif; letter-spacing: .08em; }
.replay-ui time { font: 700 20px 'Barlow Condensed', sans-serif; }
#replayCamera,
#replayExit { display: none; }
.replay-ui > div,
.replay-ui time { display: none; }
.replay-ui button {
    justify-self: end;
    padding: 8px 11px;
    border: 1px solid #ffffff55;
    color: var(--ink);
    background: #091014aa;
    cursor: pointer;
    pointer-events: auto;
    font-size: 8px;
    letter-spacing: .12em;
}

body.replaying .hud,
body.replaying .speedo,
body.replaying .mobile-controls { display: none; }

.controls {
margin-top: 28px;
    color: #69736f;
    font-size: 11px;
}

.controls kbd {
    color: #b7c0bc;
    font: inherit;
}

.result-panel h2 {
    margin: 3px;
    font: 900 64px 'Barlow Condensed', sans-serif;
}

.result-panel .result-status {
    min-height: 16px;
    margin: 2px 0;
    color: var(--acid);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .2em;
}

.result-panel.personal-best.pb-reveal h2 { animation: pb-time-reveal .7s cubic-bezier(.2,.9,.25,1); }
.result-panel.personal-best.pb-reveal .result-status { animation: pb-status-reveal 1.15s cubic-bezier(.2,.9,.25,1); }
.result-panel.personal-best.pb-reveal::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 1px solid transparent;
    animation: pb-frame-reveal 1.2s ease-out;
}
@keyframes pb-time-reveal {
    0% { opacity: 0; transform: scale(.82); filter: blur(5px); }
    55% { color: var(--acid); text-shadow: 0 0 28px #c8ff3290; transform: scale(1.06); }
    100% { opacity: 1; transform: scale(1); filter: none; }
}
@keyframes pb-status-reveal {
    0%, 25% { opacity: 0; letter-spacing: .5em; transform: translateY(8px); }
    100% { opacity: 1; letter-spacing: .2em; transform: translateY(0); }
}
@keyframes pb-frame-reveal {
    0% { border-color: #c8ff32cc; box-shadow: inset 0 0 70px #c8ff3240; opacity: 1; }
    100% { border-color: transparent; box-shadow: inset 0 0 130px #c8ff3200; opacity: 0; }
}

.result-panel>p:nth-of-type(2) {
    color: var(--acid);
}

.result-panel .leaderboard-result {
    min-height: 12px;
    margin: 7px 0 0;
    color: var(--cyan);
    font-size:14px;
    letter-spacing: .12em;
}

.leaderboard-panel {
    position: absolute;
    z-index: 10;
    inset: 5% 50% auto auto;
    width: min(680px, 92%);
    max-height: 90%;
    padding: 18px;
    transform: translateX(50%);
    border: 1px solid #435057;
    background: #080d11f5;
    box-shadow: 0 22px 70px #000d;
    backdrop-filter: blur(14px);
    overflow: auto;
}

.leaderboard-panel[hidden] { display: none; }
.leaderboard-title { display: flex; align-items: start; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid #263136; }
.leaderboard-title div { display: grid; gap: 4px; }
.leaderboard-title span { color: var(--acid); font-size: 8px; letter-spacing: .18em; }
.leaderboard-title strong { font: italic 900 30px 'Barlow Condensed', sans-serif; letter-spacing: .04em; }
.leaderboard-title button { padding: 0 4px; border: 0; color: var(--muted); background: none; cursor: pointer; font-size: 24px; }
.leaderboard-head, .leaderboard-list li { display: grid; grid-template-columns: 46px minmax(0,1fr) 58px 100px; align-items: center; gap: 8px; }
.leaderboard-head { padding: 7px 9px; color: #637078; font-size: 7px; letter-spacing: .14em; }
.leaderboard-list { margin: 0; padding: 0; list-style: none; counter-reset: leaderboard; }
.leaderboard-list li { min-height: 39px; padding: 7px 9px; border-top: 1px solid #202a2f; counter-increment: leaderboard; font-size: 9px; }
.leaderboard-list li::before { content: counter(leaderboard, decimal-leading-zero); color: #657176; }
.leaderboard-list li.player { color: var(--acid); background: #c8ff3209; }
.leaderboard-list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; letter-spacing: .08em; }
.leaderboard-list span { color: var(--muted); }
.leaderboard-list time { justify-self: end; color: var(--ink); font-weight: 700; }
.leaderboard-status { margin: 14px 0 2px; color: var(--muted); font-size: 8px; letter-spacing: .1em; text-align: center; }

.result-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
}

.mobile-controls {
    display: none;
    position: absolute;
    z-index: 4;
    left: 16px;
    right: 16px;
    bottom: 16px;
    justify-content: space-between;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.mobile-controls,
.mobile-controls * {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-user-drag: none;
}

.mobile-controls div {
    display: flex;
    gap: 7px;
    align-items: flex-end;
}

.mobile-controls button {
    width: 100px;
    height: 100px;
    border: 1px solid #ffffff55;
    border-radius: 12px;
    color: #fff;
    background: #111820aa;
    pointer-events: auto;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

.mobile-controls button:active {
    color: var(--acid);
    border-color: var(--acid);
}

.mobile-controls button img {
    display: block;
    width: 30px;
    height: 20px;
    margin: auto;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.mobile-controls button:hover img {
    filter: brightness(30%) saturate(100%)
            invert(91%) sepia(85%)
            saturate(931%) hue-rotate(25deg)
            brightness(108%) contrast(104%);
}

.mobile-controls .right img { transform: rotate(180deg); }
.mobile-controls .gas img { transform: rotate(90deg); }
.mobile-controls .brake img { width: 19px; height: 19px; transform: rotate(-90deg); }

.mobile-controls .left {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0; 
      width: 110px;
     
}
.mobile-controls .right {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0; 
    margin-left: -8px;
      width: 110px;
}
.mobile-controls .brake {
    width: 50px;
    height: 50px;
}
.mobile-controls button.handbrake img {
    width: 30px;
    height: 30px;
}
footer {
    color: rgba(255,255,255,0.5);
    font-size: 8px;
}

@media (pointer:coarse) {
    .view-button { display: inline-block; }
}

@media (max-width:700px), (pointer:coarse) {
    .shell {
        padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
        grid-template-rows: 44px 1fr 24px
    }

    .topbar, footer {
        padding: 0 12px
    }

    .brand img {
        width: 180px
    }

    .build {
        display: none
    }

    .mobile-controls {
        display: flex;
        left: 7px;
        right: 7px;
        bottom: max(10px, env(safe-area-inset-bottom))
    }

    .speedo {
        bottom: 2px
    }

    .replay-ui {
        inset: 10px 12px auto;
        grid-template-columns: 1fr auto;
    }

    .replay-ui time { display: none; }

    .controls {
        display: none
    }

    .start-panel h1 {
        font-size: 54px
    }

    .car-picker {
        width: min(600px, 96vw)
    }

    .leaderboard-panel { top: 2%; width: 96%; max-height: 96%; padding: 12px; }
    .leaderboard-head, .leaderboard-list li { grid-template-columns: 34px minmax(0,1fr) 42px 82px; gap: 5px; }

    .car-card span {
        padding: 5px;
        font-size: 10px
    }

    .car-card small {
        display: none
    }

    .hud {
        top: 14px
    }

    .hud-left {
        left: 14px
    }

    .hud-right {
        right: 14px
    }
}

@media (max-width:500px), (pointer:coarse) {

    .brand  {
    max-width: 35px;
    overflow: hidden;
}
}

/* Phones have plenty of landscape width but very little usable height once the
   browser chrome and safe areas are accounted for. Keep every garage action in
   view, and retain vertical scrolling as a fallback on exceptionally short UI. */
@media (max-height:600px) and (orientation:landscape) {
    .start-panel {
        
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 7px 14px 10px;
    }

    .start-panel h1 {
        display: flex;
        flex: 0 0 auto;
        gap: .18em;
        font-size: 58px;
        line-height: 1;
        margin: 0;
    }

    .start-panel h1 br {
        display: none;
    }

    .intro {
        margin: 12px 0;
        line-height: 1.25;
    }

    .car-picker {
        flex: 0 0 auto;
        width: min(600px, calc(100vw - 28px));
        margin-bottom: 18px;
    }

    .car-card img {
        height: clamp(70px, 22vh, 104px);
        aspect-ratio: auto;
    }

    .car-card span {
        padding: 4px 6px;
    }

    .start-panel > .primary {
        min-width: 170px;
        padding: 8px 14px;
    }

    .start-panel > .replay-link {
        margin-top: 20px;
        padding: 4px 10px;
    }
}