:root{font-family:Arial,Helvetica,sans-serif;color:#f4eedb;background:#172e2d;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #f9cf75;outline-offset:4px}[hidden]{display:none!important}#game{position:fixed;inset:0;width:100%;height:100%;image-rendering:pixelated}header{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:25px 34px;z-index:5;background:linear-gradient(#12262580,transparent)}.brand{text-decoration:none;color:inherit;font-size:15px;letter-spacing:1.5px;font-weight:700}.brand b{font-weight:400}.mark{color:#f87842;font-size:24px;letter-spacing:-6px;margin-right:16px}.top-right{display:flex;align-items:center;gap:20px}.build{font-size:10px;letter-spacing:2px;opacity:.7}.icon{background:#142b2a88;color:#eee9d9;border:1px solid #ebead43a;border-radius:3px;padding:9px 12px;font-size:9px;letter-spacing:1px}.panel{position:fixed;top:95px;bottom:24px;left:5.5%;width:440px;max-width:46vw;z-index:2;overflow-y:auto;scrollbar-width:thin;padding-right:8px}body:has(#menu:not([hidden])):before{content:'';position:fixed;inset:0;z-index:1;background:linear-gradient(90deg,#102827f5 0%,#102827da 33%,#10282735 65%,transparent)}.eyebrow{font-size:9px;letter-spacing:1.6px;color:#d8d9c8;display:flex;align-items:center;gap:8px}.eyebrow i{width:6px;height:6px;border-radius:50%;background:#f57844}h1{font-size:clamp(42px,5.1vw,72px);font-weight:900;letter-spacing:-3px;line-height:.95;margin:26px 0 21px}h1 em{font-style:normal;color:#f78048}.intro{font-size:13px;line-height:1.65;color:#b9c7bd;margin:0 0 24px}.stage{display:flex;gap:15px;align-items:center;border-top:1px solid #c6d2bd40;border-bottom:1px solid #c6d2bd40;padding:15px 0}.stage-no{font-size:10px;letter-spacing:1px;color:#f78048;line-height:1.3}.stage-no b{font-size:29px;font-weight:400}.stage small,.label-row{font-size:8px;letter-spacing:1.5px;color:#bcc9bb}.stage h2{margin:4px 0 5px;font-size:21px;letter-spacing:-.5px}.stage p{font-size:8px;letter-spacing:.6px;margin:0;color:#b8c4b7}.stage p span:not(#distance){padding:0 6px;color:#f78048}.stage svg{height:65px;margin-left:auto;width:85px}.label-row{display:flex;justify-content:space-between;margin:19px 0 10px}.label-row span{opacity:.5}.cars{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.car-choice{border:1px solid #c6d2bd30;background:#173632b0;color:#d9e1d2;text-align:left;padding:10px 9px;border-radius:3px;min-height:70px}.car-choice.selected{background:#f2ebd9;color:#17322f;border-color:#f2ebd9}.car-choice svg{width:56px;height:22px;display:block;margin-bottom:6px}.car-choice b{font-size:11px}.car-choice small{font-size:6px;letter-spacing:.6px;display:block;margin-top:4px}.car-note{font-size:10px;color:#bdcbbf;margin:9px 0 15px;min-height:12px}.primary{width:100%;padding:16px 18px;background:#f78048;color:#182d2a;border:0;border-radius:3px;font-size:12px;letter-spacing:1.5px;font-weight:800;display:flex;justify-content:space-between;align-items:center}.primary:hover{background:#ff9b60}.primary span{font-size:22px;line-height:12px}.menu-foot{display:flex;justify-content:space-between;font-size:7px;letter-spacing:1px;margin-top:12px;color:#a6b6a9}.menu-foot b{color:#f2ebda;font-size:11px;letter-spacing:0;margin-left:6px}.controls{display:flex;gap:12px;flex-wrap:wrap;font-size:8px;color:#a6b6a9;margin-top:22px;line-height:2}kbd{font-family:inherit;border:1px solid #bec9b744;border-radius:2px;padding:3px;font-size:8px;color:#e3e7d8}#stageCard{position:fixed;bottom:47px;right:40px;z-index:2;text-align:right;text-shadow:0 1px 8px #0009}#stageCard>span{display:block;font-size:8px;letter-spacing:3px;color:#d9decc}#stageCard strong{display:block;font-size:12px;letter-spacing:1px;margin-top:10px}#stageCard .line{width:40px;height:2px;background:#f78048;margin:15px 0 15px auto}#stageCard p{font-size:11px;line-height:1.7;color:#dae0cf}#stageCard small{font-size:8px;color:#b5c5b4}#hud{position:fixed;inset:95px 35px 30px;pointer-events:none}.timebox{background:#122b2bbd;border-left:3px solid #f78048;padding:13px 18px;width:198px}.timebox small{display:block;font-size:9px;letter-spacing:2px;color:#bcc8b9}.timebox strong{font-size:34px;font-variant-numeric:tabular-nums;display:block;margin:5px 0}.timebox>span{font-size:10px;color:#f4c88d}.pace{position:absolute;top:0;left:50%;transform:translateX(-50%);display:flex;gap:14px;align-items:center;background:#142f2bd9;padding:12px 22px;border-radius:3px}.pace>span{font-size:38px;color:#fbc485}.pace small{display:block;font-size:8px;letter-spacing:1.5px;color:#bbccb8}.pace b{display:block;font-size:17px;margin-top:5px;white-space:nowrap}.progress{position:absolute;bottom:0;left:25%;right:25%;height:3px;background:#e2e8c95c}.progress>div{height:3px;background:#f78048;width:0}.progress>span{position:absolute;top:9px;font-size:8px;letter-spacing:2px}.progress>span:last-child{right:0}.speedbox{position:absolute;bottom:7px;right:4px;display:flex;align-items:baseline;gap:8px;text-shadow:0 2px 10px #123}.speedbox strong{font-size:68px;letter-spacing:-4px;font-weight:800;font-variant-numeric:tabular-nums}.speedbox span{font-size:10px;letter-spacing:2px}.speedbox b{margin-left:8px;border:1px solid #dfe5d18a;padding:8px 12px;font-size:23px}#map{position:absolute;top:0;right:0;width:110px;height:160px;background:#17322d77;border-radius:4px}#surface{position:absolute;bottom:0;left:0;font-size:9px;letter-spacing:2px;background:#17322d99;padding:9px}#recover{position:absolute;left:0;bottom:55px;background:#142f2b99;color:#dfdfca;border:1px solid #e8e4c83a;padding:10px;font-size:9px;pointer-events:auto}#recover b{margin-left:8px;color:#ffbb85}#countdown{position:fixed;top:43%;left:50%;transform:translate(-50%,-50%);font-size:110px;font-weight:900;color:#fff3d5;text-shadow:5px 5px #193c39;pointer-events:none}#toast{position:fixed;top:28%;left:50%;transform:translateX(-50%);background:#18362fee;padding:12px 20px;color:#f6e4c6;z-index:6;font-size:13px;opacity:0;transition:opacity .2s;pointer-events:none;text-align:center}.veil{position:fixed;inset:0;background:#0d242ab8;backdrop-filter:blur(6px);z-index:10;display:grid;place-items:center}.dialog{width:410px;max-width:90vw;background:#183630;border:1px solid #c6d3ba40;padding:32px;border-radius:5px;box-shadow:0 30px 100px #0005}.dialog>small{color:#f78048;letter-spacing:2px;font-size:10px}.dialog h2{font-size:35px;letter-spacing:-1.4px;margin:12px 0 20px}.result-time{font-size:55px;font-weight:800;letter-spacing:-2px;margin:10px 0}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 25px;font-size:11px}.result-grid span{color:#b9cbb9;display:block;font-size:9px;margin-bottom:7px}.secondary{width:100%;padding:14px;background:transparent;color:#b8cabc;border:0;font-size:9px;letter-spacing:1.5px;margin-top:9px}.split-row{font-size:11px;display:flex;justify-content:space-between;border-top:1px solid #b9cfb52b;padding:8px 0}.dialog p{font-size:12px;color:#b8cabc;line-height:1.7}.medal{color:#ffd596;font-size:12px;letter-spacing:2px}#touch{position:fixed;bottom:28px;left:15px;right:15px;z-index:8;display:flex;justify-content:space-between;pointer-events:none}#touch>div{display:flex;gap:7px}#touch button{pointer-events:auto;touch-action:none;user-select:none;background:#163c36cf;color:#ffe9c4;border:1px solid #e5ebcd66;border-radius:8px;padding:17px 12px;font-size:10px;min-width:48px}#touch .gas{background:#f78048;color:#17332e}#error{position:fixed;inset:20%;background:#15382f;padding:35px;z-index:50;font-size:17px;line-height:1.7}
@media(max-height:800px) and (min-width:760px){.panel{top:85px}h1{font-size:50px;margin:16px 0}.intro{margin-bottom:15px}.stage{padding:10px 0}.label-row{margin-top:12px}.controls{margin-top:12px}.car-choice{min-height:60px;padding:7px}.primary{padding:13px 18px}}
@media(max-width:760px){header{padding:17px 18px}.brand{font-size:11px}.build{display:none}.top-right{gap:7px}.panel{top:78px;left:6%;width:88%;max-width:none;bottom:12px;background:#12302cdc;padding:16px;border-radius:6px}h1{font-size:45px;letter-spacing:-2px;margin:20px 0 16px}.eyebrow{font-size:7px}.intro{font-size:11px;margin-bottom:15px}.stage{padding:11px 0}.controls{margin-top:15px}#stageCard{display:none}#hud{inset:75px 15px 110px}.timebox{padding:8px 10px;width:150px}.timebox strong{font-size:26px}.pace{left:auto;right:0;transform:none;padding:8px 12px}.pace b{font-size:12px}.pace>span{font-size:24px}#map{top:96px;width:75px;height:100px}.speedbox strong{font-size:45px}.speedbox span{font-size:8px}.speedbox b{font-size:17px;padding:5px}.progress{left:0;right:50%;bottom:10px}#surface{bottom:48px}#recover{bottom:86px}.dialog{padding:24px}.dialog h2{font-size:29px}.controls span{font-size:7px}.car-choice small{font-size:5px}.menu-foot{font-size:6px}.menu-foot b{font-size:10px}#toast{top:32%;width:75%}}
@media(pointer:coarse){.controls{display:none}body.racing #touch{display:flex}body.racing #hud{bottom:110px}}
@media(max-height:660px) and (min-width:760px){.panel{top:75px;bottom:15px;width:420px}h1{font-size:40px;letter-spacing:-2px;margin:12px 0}.intro{font-size:11px;line-height:1.45;margin-bottom:12px}.eyebrow{font-size:7px}.stage{padding:8px 0}.stage svg{height:48px}.stage h2{font-size:18px}.label-row{margin:10px 0 7px}.car-choice{min-height:54px;padding:5px 8px}.car-choice svg{height:17px;margin-bottom:3px}.car-note{margin:7px 0 10px;font-size:9px}.primary{padding:11px 16px}.controls{margin-top:8px;font-size:7px}.menu-foot{margin-top:9px}}

#stageSelect{width:100%;padding:12px;background:#183633;color:#f3e7c8;border:1px solid #80958c;font:600 13px Arial;margin:10px 0;cursor:pointer} #menu{max-height:calc(100vh - 105px);overflow-y:auto}

#developer{margin-top:8px}#devDialog{max-width:min(90vw,25rem);border:1px solid #69867c;border-radius:8px;background:#183331;color:#fff3dd;padding:1.5rem}#devDialog::backdrop{background:#081719cc}#devDialog label{display:grid;gap:.25rem;margin:.7rem 0}#devDialog input,#devDialog button{font:inherit;padding:.5rem}#devDialog button{margin:.4rem .2rem 0 0}#devDialog h2{margin-top:0}
/* The stage plate and service bench frame the live paddock view. */
body:has(#menu:not([hidden])):before{background:linear-gradient(180deg,#12202b77,transparent 32%,transparent 59%,#101c22bb)}
#menu.panel{inset:66px 0 10px;margin:auto;width:min(680px,95vw);max-width:none;max-height:none;padding:0 6px;display:flex;flex-direction:column;align-items:stretch;background:none;pointer-events:none}
#menu>*{pointer-events:auto}
#menu .stage{order:-3;align-self:center;color:#292c26;background:#eee5ce;border:0;border-bottom:4px solid #b74629;box-shadow:4px 5px #242c2c88;transform:rotate(-1deg);padding:8px 20px;gap:17px}
.stage-no,.stage small,.stage p{color:#43473d}.stage h2{font:italic 900 clamp(25px,4vw,44px)/1 Arial,sans-serif;text-transform:uppercase}.stage-no b{font-weight:900;color:#aa4029}.stage svg{background:#415249;height:58px}
#menu .intro{order:-2;align-self:center;background:#1c292be6;color:#f3e6c9;margin:5px 0 0;padding:3px 12px}
#stageSelect{order:-1;align-self:center;width:auto;max-width:100%;padding:5px 10px;margin:4px 0;font:12px monospace}
#menu .label-row{margin:auto 0 0;padding:8px 12px 4px;background:#263535;color:#f8e8c9;font:11px monospace}
#menu .cars{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;background:#263535;padding:4px 9px}
.car-choice{background:#384540;color:#fff0ce;border-radius:0}.car-choice.selected{background:#efce83;color:#252a23;border-color:#efce83}.car-choice svg{width:76px;max-width:100%;height:25px}
#menu .car-note,#menu .menu-foot,#menu .controls{margin:0;background:#263535;padding:5px 12px;color:#f0e9d6}
#menu .primary{background:#edac55;border-radius:0;color:#282b23}
#developer{align-self:flex-end;background:#202d2c;margin-top:3px}
@media(max-height:650px){#menu.panel{inset:54px 0 4px}.stage svg{height:36px}#menu .controls{display:none}.car-choice{min-height:45px}}
@media(max-width:560px){#menu.panel{width:98vw}.car-choice{padding:5px}.car-choice b{font-size:11px}.car-choice small{font-size:8px}.car-choice svg{width:55px}.menu-foot{flex-wrap:wrap;gap:4px}}

#audioDialog{max-width:min(32rem,90vw);color:#eee7d9;background:#233a36;border:1px solid #667a71;padding:1.6rem;line-height:1.45}#audioDialog a{color:#ffc390}#audioDialog::backdrop{background:#10221fbb}

/* Service park livery: timing slips, enamel plates and yellow bib numbers. */
@font-face{font-family:Roadbook;src:url('fonts/body.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:Grid;src:url('fonts/display.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{--ink:#101938;--blue:#2448d1;--red:#d63140;--paper:#fffaf1;--bib:#ffdb40;font-family:Roadbook,Arial,sans-serif;color:var(--paper);background:var(--ink)}
button,select,input,kbd{font-family:inherit}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--bib);outline-offset:2px}
header{background:linear-gradient(#101938b3,transparent)}.brand,.build,.icon,.stage-no,.stage h2,.primary,.dialog h2,dialog h2,.timebox strong,.pace b,.speedbox strong,.speedbox b,#countdown,.result-time,.car-choice b{font-family:Grid,'Arial Narrow',sans-serif}
.brand{font-size:clamp(15px,2.4vw,28px);line-height:1;letter-spacing:.025em;background:var(--paper);color:var(--ink);padding:5px 14px;transform:skew(-5deg);border-right:8px solid var(--red)}.mark{color:var(--blue)}.build{opacity:1}.icon,#developer,#audioSettings{border:1px solid #ffffff65;background:var(--ink);color:white;border-radius:0;font-size:13px;letter-spacing:.04em}
body:has(#menu:not([hidden])):before{background:linear-gradient(180deg,#10193835,transparent 38%,transparent 58%,#10193875)}
#menu .stage{background:var(--paper);color:var(--ink);position:relative;border:0;border-right:7px solid var(--red);box-shadow:4px 5px 0 var(--blue);padding:7px 14px 7px 7px;gap:12px}
#menu .stage-no{background:var(--bib);color:var(--ink);align-self:stretch;display:grid;align-content:center;text-align:center;padding:3px 9px;line-height:.96}#menu .stage-no br{display:none}#menu .stage-no b{font-size:clamp(35px,5vw,57px);color:var(--ink)}
.stage h2{font:900 clamp(28px,4.3vw,50px)/.98 Grid,sans-serif;letter-spacing:.01em}.stage small,.stage p{color:#414b63}.stage svg{background:var(--blue)}#routeMini polyline{stroke:#fff}#routeMini circle{fill:var(--bib)}
#menu .intro{background:var(--ink);color:#fff}#stageSelect{background:var(--paper);border:1px solid var(--ink);color:var(--ink);font:13px Roadbook,sans-serif}
#menu .label-row{border-top:4px solid var(--blue);background:var(--paper);color:var(--blue);font:14px Grid,sans-serif}#menu .label-row span{opacity:1}#menu .cars{background:var(--paper);gap:5px;padding:4px 9px 7px}
.car-choice{border:1px solid #a0a6b8;color:var(--ink);background:#e7e8ef}.car-choice b{font-size:16px}.car-choice.selected{color:white;background:var(--blue);border-color:var(--blue);box-shadow:inset 0 -3px var(--bib)}
#menu .car-note,#menu .controls,#menu .menu-foot{color:var(--ink);background:var(--paper)}#menu .menu-foot b{color:var(--blue)}kbd{color:var(--ink);border-color:#9ba0ac}
#menu .primary,.primary{background:var(--red);color:white;font-size:18px;letter-spacing:.06em;border-radius:0}.primary:hover,#menu .primary:hover{background:#b81e35}.primary span{color:var(--bib)}
.service-tools{display:flex;gap:5px;justify-content:flex-end;margin-top:4px}#developer,#audioSettings{margin:0;align-self:stretch;padding:5px 10px}#stageCard{color:white}#stageCard .line,.progress>div{background:var(--bib)}
.timebox,.pace,#surface,#recover,#map,#touch button{background:#101938e5;color:white;border-radius:0}.timebox{border-left:5px solid var(--bib)}.timebox small,.pace small{color:#d6def6}.timebox>span,.pace>span,#recover b{color:var(--bib)}.timebox strong{letter-spacing:.02em}.pace{border-bottom:3px solid var(--blue)}.speedbox strong{letter-spacing:0}.speedbox b{background:var(--blue);color:white}.progress{background:#1020458a}
#countdown{color:var(--bib);text-shadow:4px 5px var(--blue)}#toast,#error{background:var(--ink);color:white;border-left:4px solid var(--bib)}#touch .gas{background:var(--red);color:white}
.veil,#devDialog::backdrop,#audioDialog::backdrop{background:#101938bb}.dialog,#devDialog,#audioDialog{background:var(--paper);color:var(--ink);border:0;border-top:7px solid var(--blue);border-radius:0;box-shadow:6px 6px 0 var(--red)}.dialog>small,.medal,.secondary,#audioDialog a{color:var(--blue)}.dialog p,.result-grid span{color:#43506c}.split-row{border-color:#ced1df}#devDialog button:not(.primary){background:var(--ink);color:white;border:0}.result-time{color:var(--blue)}
@media(max-width:560px){header{padding:11px 8px}.brand{padding:5px 7px}.icon{padding:6px;font-size:11px}.top-right{gap:4px}#menu .stage{gap:8px}#stageSelect{font-size:11px}.car-choice b{font-size:13px}}

/* Timing control stripes stay on the plates rather than covering the road. */
#menu .primary{background:linear-gradient(116deg,transparent 0 78%,#ffffff28 78% 80%,transparent 80% 82%,#ffffff28 82% 84%,transparent 84%),var(--red)}
#menu .primary:hover{background-color:#ae2030}.car-choice:focus-visible{position:relative;z-index:1}
#sound[aria-pressed=true]{color:var(--ink);background:var(--bib);border-color:var(--bib)}
#menu .label-row:after{content:'';width:42px;align-self:center;height:6px;background:repeating-linear-gradient(115deg,var(--blue) 0 5px,transparent 5px 9px);margin-left:9px}.label-row label{margin-right:auto}
@media(max-height:620px){#menu.panel{overflow-y:auto}#menu .intro{margin:2px 0}#menu .label-row{padding-top:4px}.service-tools .icon{font-size:11px}}

.sound-controls{position:relative}
.radio-volume{display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 8px;font:14px Roadbook,sans-serif}
.radio-volume input{grid-column:1/-1;width:100%;margin:0;accent-color:#ffcc38;cursor:pointer}
.radio-volume output{font-variant-numeric:tabular-nums}
.radio-volume.live{position:absolute;top:calc(100% + 3px);right:0;width:112px;background:#101938ed;color:#fff;padding:3px 8px;font-size:11px}
#audioDialog .radio-volume{margin:.8rem 0;max-width:20rem}#audioDialog .radio-volume input{accent-color:#2448d1}

#timingDesk{width:min(92vw,480px);max-height:88dvh;overflow:auto;padding:clamp(20px,4vw,38px);background:#131a29;color:#fff4df;border:2px solid #ff6449;border-top:9px solid #ff6449;box-sizing:border-box}
#timingDesk::backdrop{background:repeating-linear-gradient(135deg,#17202f 0 64px,#1b2534 64px 128px)}
#timingDesk small{color:#ff9f66;letter-spacing:.18em}#timingDesk h2{font-size:2.4rem;line-height:1.1;margin:.45em 0}
#timingDesk button,#timingDesk input,#timingDesk select{font:inherit;padding:.65em;margin:.4em 0}
#timingDesk input,#timingDesk select{box-sizing:border-box;width:100%;color:#101928;background:#fff5df}
#timingDesk button{background:#ff6848;color:#181c25;font-weight:bold;border:0;cursor:pointer;margin-right:.5em}
#timingDesk li{padding:.45em 0;border-bottom:1px solid #515866}/* Timing sheet shared by the result screen and service park. */
.dialog{max-height:88dvh;overflow-y:auto;overscroll-behavior:contain}
.finish-board{background:#141d2c;color:#fff6e5;text-align:left;padding:14px 16px;margin:12px 0;border-left:5px solid #ff734f}
.finish-board h3{font:700 1.4rem Grid,sans-serif;margin:0;text-transform:uppercase}
.finish-board p{font-size:.94rem;color:#ede0c7;margin:.25rem 0 .5rem}
.ranking-list{list-style:none;padding:0}
.timing-row,#timingDesk li.timing-row{display:grid;grid-template-columns:3ch minmax(0,1fr) auto;align-items:baseline;gap:.55rem;padding:.35rem .25rem;font-size:1rem;line-height:1.25;border-bottom:1px solid #455062}
.timing-row b,.timing-row strong{font-variant-numeric:tabular-nums}
.timing-row span{overflow-wrap:anywhere}
.timing-row.personal{background:#ffe5aa;color:#182134;padding-inline:.45rem}
.timing-row.separated{margin-top:.65rem;border-top:3px double #805b2b}
.dialog>small,.dialog .medal{font-weight:800;color:#54251c;font-size:1rem}
.dialog .secondary,#audioDialog a,#finishBoard{font:700 1rem Grid,sans-serif;color:#1a2636}
#audioDialog a{text-decoration:underline;text-decoration-color:#b34923;text-underline-offset:3px}
#finishBoard{background:#f7d691;padding:.55rem .85rem;border:1px solid #1a2636;cursor:pointer}