/* Palette A (default): sampled from John Chapman's photo of a Lotus 72 in
   John Player Special colors beside a McLaren M19 (Wikimedia Commons). */
:root {
    --ink: #181716;        /* JPS black */
    --ink-2: #26241f;
    --paper: #f1f3db;      /* the cream of the number roundel */
    --muted: #b8b39c;
    --ai: #f2d785;         /* JPS gold */
    --you: #f1ca0e;        /* McLaren yellow */
    --warm: #956448;       /* the museum floor */
    --red: #e0301e;
    --green: #39b54a;
    --glass: rgba(24, 23, 22, 0.78);
    --line: rgba(241, 243, 219, 0.14);
    --wide: "Archivo", system-ui, sans-serif;
    font-family: var(--wide);
    color: var(--paper);
    background: var(--ink);
    -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { background: var(--ink); }
button { font: inherit; color: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--you); outline-offset: 2px; }

#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* numbers set in the condensed width with tabular figures */
.num, .tower, .speed, .gear, .laptime, .results table, .go-meta, #go-meta {
    font-variant-numeric: tabular-nums;
}

/* ---- circuit picker ------------------------------------------------------- */
.picker {
    position: fixed; inset: 0;
    display: grid;
    grid-template-columns: minmax(280px, 380px) 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "brand ." "tracks ." "go go";
    pointer-events: none;
}
.picker[hidden] { display: none; }
.picker > * { pointer-events: auto; }

.brand {
    grid-area: brand;
    margin: 20px 0 0 20px;
    padding: 18px 20px 16px;
    background: var(--glass);
    backdrop-filter: blur(10px);
    border-radius: 14px 14px 0 0;
}
.site { color: var(--muted); font-size: 13px; text-decoration: none; }
.site:hover { color: var(--paper); }
h1 {
    margin: 6px 0 8px;
    font-size: 44px; line-height: 1;
    font-weight: 800;
    font-stretch: 125%;
    letter-spacing: -0.01em;
}
.brand p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.45; color: #dcdcc6; max-width: 36ch; }
.link {
    background: none; border: 0; padding: 0;
    color: var(--ai); font-size: 14px; cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px;
}

.tracks {
    grid-area: tracks;
    margin: 0 0 0 20px; padding: 6px 12px 12px;
    list-style: none;
    background: var(--glass);
    backdrop-filter: blur(10px);
    border-radius: 0 0 14px 14px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    align-content: start;
    max-height: calc(100vh - 380px);
    scrollbar-width: thin;
}
.tracks button {
    width: 100%;
    display: grid; justify-items: center; gap: 2px;
    padding: 8px 4px 6px;
    background: none; border: 1px solid transparent; border-radius: 8px;
    cursor: pointer;
}
.tracks button:hover { background: rgba(241, 243, 219, 0.06); }
.tracks button[aria-pressed=true] { border-color: var(--ai); background: rgba(242, 215, 133, 0.08); }
.tracks svg { width: 72px; height: 54px; overflow: visible; }
.tracks svg path { fill: none; stroke: var(--paper); stroke-width: 2.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tracks button[aria-pressed=true] svg path { stroke: var(--ai); }
.tracks .name { font-size: 12px; font-stretch: 85%; color: #dcdcc6; text-align: center; line-height: 1.15; }

.go {
    grid-area: go;
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
    margin: 0 20px 20px;
    padding: 14px 18px;
    background: var(--glass);
    backdrop-filter: blur(10px);
    border-radius: 14px;
}
.go-name { flex: 1 1 260px; min-width: 0; }
.go h2 { margin: 0; font-size: 30px; line-height: 1.05; font-weight: 750; font-stretch: 112%; }
.go p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.laps { display: flex; align-items: center; gap: 4px; }
.laps span { color: var(--muted); font-size: 14px; margin-right: 6px; }
.laps button, .cams button, .results-actions button:not(.start), .watch {
    min-width: 40px; padding: 7px 12px;
    background: rgba(241, 243, 219, 0.07); border: 1px solid var(--line); border-radius: 8px;
    cursor: pointer; font-size: 14px;
}
.laps button[aria-pressed=true], .cams button[aria-pressed=true] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.start {
    padding: 12px 26px;
    background: var(--you); color: var(--ink);
    border: 0; border-radius: 10px;
    font-size: 17px; font-weight: 750; font-stretch: 110%;
    cursor: pointer;
}
.start:disabled, .watch:disabled { opacity: 0.6; cursor: progress; }
.watch { padding: 12px 18px; font-size: 16px; }
.keys { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 13px; }

/* ---- race HUD ----------------------------------------------------------------- */
.hud { position: fixed; inset: 0; pointer-events: none; }
.hud[hidden] { display: none; }
.hud button, .touch > * { pointer-events: auto; }

.lights {
    position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 10px;
    padding: 10px 14px;
    background: #0b0b0b; border-radius: 10px;
    transition: opacity 0.4s;
}
.lights.off { opacity: 0; }
.lights span { width: 34px; height: 34px; border-radius: 50%; background: #2a0a0a; box-shadow: inset 0 0 0 2px #000; }
.lights span.on { background: var(--red); box-shadow: 0 0 18px 2px rgba(224, 48, 30, 0.7); }

.tower {
    position: absolute; top: 20px; right: 20px;
    margin: 0; padding: 6px; list-style: none;
    background: var(--glass); backdrop-filter: blur(10px);
    border-radius: 12px;
    min-width: 248px;
    font-stretch: 80%;
}
.tower li {
    display: grid; grid-template-columns: 22px 6px 1fr auto; align-items: center; gap: 8px;
    padding: 6px 8px; font-size: 17px; font-weight: 600;
}
.tower li + li { border-top: 1px solid var(--line); }
.tower .pos { color: var(--muted); text-align: right; }
.tower .bar { width: 6px; height: 18px; border-radius: 2px; }
.tower .gap { color: #dcdcc6; font-weight: 500; }
.tower .lap { grid-column: 3 / 5; font-size: 13px; font-weight: 450; color: var(--muted); margin-top: -4px; }

.message {
    position: absolute; top: 96px; left: 50%; transform: translateX(-50%);
    padding: 8px 16px; border-radius: 10px;
    background: var(--glass);
    font-size: 18px; font-weight: 650; font-stretch: 105%;
    opacity: 0; transition: opacity 0.25s;
}
.message.show { opacity: 1; }

.minimap {
    position: absolute; left: 20px; bottom: 20px;
    width: 200px; height: 170px;
    padding: 10px;
    background: var(--glass); backdrop-filter: blur(10px);
    border-radius: 12px;
    overflow: visible;
}
.minimap path { fill: none; stroke: rgba(241, 243, 219, 0.55); stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.minimap .start-mark { stroke: var(--paper); stroke-width: 3; vector-effect: non-scaling-stroke; }

.dash {
    position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
    display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto auto; column-gap: 14px;
    padding: 10px 18px 12px;
    background: var(--glass); backdrop-filter: blur(10px);
    border-radius: 14px;
    min-width: 230px;
}
.speed { font-size: 54px; line-height: 1; font-weight: 750; font-stretch: 75%; text-align: right; }
.speed small { font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 5px; font-stretch: 100%; }
.gear { align-self: center; font-size: 40px; font-weight: 750; font-stretch: 75%; color: var(--you); }
.pedals { grid-column: 1 / 3; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.pedals i { display: block; height: 6px; border-radius: 3px; background: rgba(241, 243, 219, 0.12); position: relative; overflow: hidden; }
.pedals i::after { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--v, 0)); }
#throttle::after { background: var(--green); }
#brake::after { background: var(--red); transform-origin: right; }
#brake { order: -1; }
.laptime { grid-column: 1 / 3; margin-top: 6px; text-align: center; color: #dcdcc6; font-size: 15px; font-stretch: 85%; }

.cams {
    position: absolute; right: 20px; bottom: 20px;
    display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end;
    padding: 6px;
    background: var(--glass); backdrop-filter: blur(10px);
    border-radius: 12px;
}

.touch { display: none; }
@media (pointer: coarse) {
    .touch { display: block; }
    .touch .steer {
        position: absolute; left: 16px; bottom: 16px; width: min(46vw, 260px); height: 92px;
        border-radius: 46px; background: rgba(24, 23, 22, 0.45); border: 1px solid var(--line);
        display: grid; place-items: center; touch-action: none;
    }
    .touch .knob { width: 70px; height: 70px; border-radius: 50%; background: rgba(241, 243, 219, 0.85); transition: transform 0.05s; }
    .touch .pedal {
        position: absolute; bottom: 16px; width: 86px; height: 120px;
        border-radius: 18px; border: 1px solid var(--line);
        background: rgba(24, 23, 22, 0.5); font-size: 15px; font-weight: 650; touch-action: none;
    }
    .touch .gas { right: 16px; }
    .touch .brake { right: 112px; }
    .touch .pedal.down { background: var(--paper); color: var(--ink); }
    .minimap { display: none; }
    .dash { bottom: auto; top: 16px; left: 16px; transform: none; min-width: 0; padding: 8px 12px; }
    .speed { font-size: 36px; }
    .gear { font-size: 28px; }
    .cams { bottom: auto; top: 112px; right: 16px; }
}

/* ---- results -------------------------------------------------------------------- */
.results {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(440px, calc(100vw - 32px));
    padding: 22px 24px 20px;
    background: var(--glass); backdrop-filter: blur(14px);
    border-radius: 16px;
}
.results[hidden] { display: none; }
.results h2 { margin: 0 0 14px; font-size: 32px; line-height: 1.05; font-weight: 800; font-stretch: 115%; }
.results table { width: 100%; border-collapse: collapse; font-size: 16px; font-stretch: 85%; }
.results td { padding: 7px 4px; border-top: 1px solid var(--line); }
.results td:last-child { text-align: right; }
.results .sub td { border-top: 0; padding-top: 0; color: var(--muted); font-size: 13.5px; }
.results-actions { display: flex; gap: 10px; margin-top: 18px; align-items: center; }

/* ---- about panel ------------------------------------------------------------------ */
.about {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(560px, 100vw);
    background: #f4f2e6; color: #1d1c1a;
    transform: translateX(100%); transition: transform 0.3s ease;
    overflow-y: auto;
    padding: 28px 34px 40px;
    z-index: 10;
}
.about.open { transform: none; }
.about .close { position: sticky; top: 0; float: right; background: none; border: 0; font-size: 30px; cursor: pointer; color: #1d1c1a; }
.prose { font-size: 16px; line-height: 1.6; max-width: 62ch; }
.prose h2 { font-size: 22px; font-stretch: 110%; margin: 1.6em 0 0.4em; }
.prose .lede { font-size: 18px; }
.prose a { color: #6d4a1c; }
.prose table { border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; width: 100%; }
.prose td, .prose th { padding: 3px 6px; border-bottom: 1px solid #d9d5c4; text-align: right; }
.prose td:first-child, .prose th:first-child { text-align: left; }
.credits { font-size: 13px; color: #5a574e; }

@media (max-width: 720px) {
    .picker { grid-template-columns: 1fr; grid-template-areas: "brand" "tracks" "go"; }
    .brand { margin: 12px 12px 0; }
    .tracks { margin: 0 12px; grid-template-columns: repeat(4, 1fr); max-height: none; }
    .tracks svg { width: 54px; height: 40px; }
    .go { margin: 12px; }
    h1 { font-size: 34px; }
    .tower { top: 12px; right: 12px; min-width: 200px; }
}
@media (prefers-reduced-motion: reduce) {
    .about { transition: none; }
}