:root{--ink:#f2efe6;--dim:#a9a49a;--accent:#ffb454;--gold:#f3c34b;--silver:#c8d0d8;--bronze:#c98a52;--good:#6ee08a;--bad:#ff6a5a;--sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--mono:ui-monospace,Menlo,Consolas,monospace}
*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;background:#0a0d10;color:var(--ink);font-family:var(--sans)}
body{-webkit-font-smoothing:antialiased;user-select:none}
canvas#gl{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none !important}

/* ---- the HUD ---- */
#hud{position:fixed;inset:0;pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.7)}
/* THE RUN: the credits over the speed, and the load along the bottom — read at a glance, never read for long */
#run{position:absolute;right:28px;bottom:96px;text-align:right}
#run b{font-size:27px;font-weight:700;letter-spacing:-.01em}#run i{font-style:normal;font-size:12px;color:var(--dim);margin-left:6px;letter-spacing:.2em}
/* the rank, under the credits: what has been earned in a life, which is what THE RUN is climbing (open/jobs.js RANKS) */
#run u{display:block;text-decoration:none;font-size:10px;letter-spacing:.3em;color:var(--dim);margin-top:2px}
#load,#next{position:absolute;left:28px;bottom:52px;display:flex;align-items:baseline;gap:9px}
#load i,#next i{font-style:normal;font-size:11px;color:var(--dim);letter-spacing:.2em}#load b,#next b{font-size:15px;font-weight:600;letter-spacing:.06em}
/* what the build wants next, shown only while there is nothing in the back (main.js nextBuild) */
#next b{color:var(--gold)}
#r-purse{font-size:12px;letter-spacing:.22em;color:var(--dim);margin-top:-2px}   /* the stake and the purse on the results */
#cond{font-style:normal;font-size:11px;letter-spacing:.2em;color:#ffb07a;margin-left:10px}
#scrap{font-style:normal;font-size:11px;letter-spacing:.2em;color:#cbb089;margin-left:10px}
#bounty{font-style:normal;font-size:11px;letter-spacing:.2em;color:#ff8a5a;margin-left:10px}
#onyou{font-style:normal;font-size:11px;letter-spacing:.2em;color:#ff5a3c;margin-left:10px}
#cond.bad{color:#ff6a4a}
#load.hurt b{color:#ffb07a}#load.late #load-to{color:#ff9a86}   /* a load taking a battering, and a clock that has run out */
#speed{position:absolute;right:28px;bottom:22px;text-align:right}
#speed b{font-size:64px;font-weight:700;letter-spacing:-.02em;line-height:1}#speed i{font-style:normal;font-size:13px;color:var(--dim);margin-left:8px;letter-spacing:.2em}
#times{position:absolute;left:24px;top:20px;display:flex;flex-direction:column;gap:6px;font-family:var(--mono)}
#times div{display:flex;gap:12px;align-items:baseline}#times i{font-style:normal;font-size:10px;letter-spacing:.24em;color:var(--dim);width:48px}#times b{font-weight:600;font-size:18px}
#times .gold b{color:var(--gold);font-size:14px}
#times .pos b{font-size:30px;font-weight:800;color:var(--accent)}
#mapwrap{position:absolute;right:22px;top:20px;width:170px}
#map{width:170px;height:170px;border-radius:8px;display:block;box-shadow:0 4px 18px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.18)}
#stage-tag{margin-top:6px;text-align:right;font-size:12px;letter-spacing:.18em}#stage-tag b{font-weight:800}#stage-tag i{font-style:normal;color:var(--dim);margin-left:8px;font-size:10px}
#toast{position:absolute;left:50%;top:20%;transform:translateX(-50%);font-size:40px;font-weight:800;letter-spacing:.05em;opacity:0;white-space:nowrap;padding:8px 24px;border-radius:9px;background:rgba(8,12,16,.72);text-align:center;border:2px solid rgba(255,255,255,.12);box-shadow:0 8px 40px rgba(0,0,0,.5)}
/* THE SHINE: every toast's words are lit by a band of white that sweeps across them once as it lands */
#toast .t{display:block;background:linear-gradient(105deg,currentColor 38%,#fff 50%,currentColor 62%) 100% 0/280% 100% no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#toast.pop .t{animation:shine 1.1s ease-out .1s both}@keyframes shine{from{background-position:100% 0}to{background-position:0 0}}
/* the kinds (main.js toast): paid and rank in gold, took in the accent, no in red with a shake, hurt in amber */
#toast.paid,#toast.rank,#toast.best,#toast.grew{color:var(--gold);border-color:rgba(243,195,75,.55);box-shadow:0 0 0 1px rgba(243,195,75,.25),0 0 46px rgba(243,195,75,.35),0 8px 40px rgba(0,0,0,.5)}
#toast.took{color:var(--accent);border-color:rgba(255,180,84,.5);box-shadow:0 0 36px rgba(255,180,84,.28),0 8px 40px rgba(0,0,0,.5)}
#toast.no{color:var(--bad);border-color:rgba(255,106,90,.55);box-shadow:0 0 36px rgba(255,106,90,.35),0 8px 40px rgba(0,0,0,.5)}
#toast.hurt{color:#ffb454;border-color:rgba(255,180,84,.45)}
#toast.rank{font-size:52px;padding:14px 40px}
/* a payment's credits on their own line, counted up: big, with the plus and CR small beside the number */
#toast .cr{display:block;font-size:1.9em;line-height:1.05;letter-spacing:-.01em;margin-top:2px;text-shadow:0 0 24px rgba(243,195,75,.6)}
#toast .cr em{font-style:normal;font-size:.55em;vertical-align:.35em;margin-right:.08em;opacity:.85}#toast .cr i{font-style:normal;font-size:.36em;letter-spacing:.2em;margin-left:.3em;vertical-align:.5em;color:var(--dim)}
#toast .s{display:block;font-size:.42em;letter-spacing:.14em;color:var(--dim);margin-top:2px}#toast .s:empty{display:none}
/* the pieces a toast throws (main.js throwPieces): each flung on its own arc, spinning, gone in a second */
#burst{position:fixed;inset:0;pointer-events:none;overflow:hidden}
#burst .p{position:absolute;width:9px;height:9px;border-radius:2px;background:var(--gold);box-shadow:0 0 8px rgba(243,195,75,.8);animation:fling 1.1s cubic-bezier(.15,.7,.35,1) both}
#burst .p.big{width:14px;height:14px;border-radius:50%}#burst .p.took{background:var(--accent);box-shadow:0 0 8px rgba(255,180,84,.8)}
@keyframes fling{0%{opacity:0;transform:translate(0,0) rotate(0) scale(.4)}12%{opacity:1;transform:translate(calc(var(--dx) * .35),calc(var(--dy) * .35)) rotate(calc(var(--r) * .3)) scale(1.1)}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 120px)) rotate(var(--r)) scale(.6)}}
/* the flash (main.js flash): a pulse of colour in from the edge of the glass, out again in under a second */
#flash{position:fixed;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,transparent 45%,var(--fl) 130%)}
#flash.paid,#flash.best,#flash.grew{--fl:rgba(243,195,75,.55)}#flash.rank{--fl:rgba(243,195,75,.8)}#flash.no{--fl:rgba(255,80,60,.6)}#flash.hurt{--fl:rgba(255,150,50,.5)}
#flash.on{animation:flash .8s ease-out}#flash.rank.on{animation-duration:1.6s}@keyframes flash{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
/* the HUD's credits bumped as a payment goes in */
#credits.bump{animation:bump .9s cubic-bezier(.2,1.4,.4,1)}@keyframes bump{0%{transform:scale(1)}20%{transform:scale(1.55);color:var(--gold);text-shadow:0 0 18px rgba(243,195,75,.9)}100%{transform:scale(1)}}
#run b{display:inline-block;transform-origin:100% 60%}
#way{position:absolute;left:50%;top:6%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:7px 18px;border-radius:8px;background:rgba(8,12,16,.6);font-size:16px;font-weight:700;letter-spacing:.1em;white-space:nowrap}
/* a proper arrow, head and shaft, so which way it points is read at a glance (it was a triangle 20 wide and 22 tall,
   as near as makes no difference equilateral, and its tip was anyone's guess) */
#way s{display:block;width:22px;height:28px;background:var(--gold);clip-path:polygon(50% 0,100% 46%,68% 46%,68% 100%,32% 100%,32% 46%,0 46%);transform-origin:50% 50%;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
#way i{font-style:normal;color:var(--dim);letter-spacing:.14em}
#said{position:absolute;left:50%;bottom:22%;transform:translateX(-50%);font-size:14px;font-weight:600;letter-spacing:.12em;color:var(--dim);white-space:nowrap;opacity:0;transition:opacity .6s;max-width:84vw;overflow:hidden;text-overflow:ellipsis}
#said.on{opacity:1}
#toast.best{color:var(--gold)}
#toast.pop{animation:toast 1.6s ease-out}
#toast.no.pop{animation:toast 1.6s ease-out,shake .5s ease-out .08s}
#toast.long{font-size:28px;white-space:normal;max-width:84vw;text-align:center;line-height:1.25}
/* THE SLAM: in at half again its size, dropped onto the glass with a bounce, held, then lifted off */
@keyframes toast{0%{opacity:0;transform:translateX(-50%) scale(1.7)}9%{opacity:1;transform:translateX(-50%) scale(.94)}15%{transform:translateX(-50%) scale(1.05)}22%{transform:translateX(-50%) scale(1)}78%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) translateY(-18px) scale(.96)}}
@keyframes shake{0%,100%{margin-left:0}15%{margin-left:-14px}35%{margin-left:12px}55%{margin-left:-8px}75%{margin-left:5px}}
/* what the plane's stick does (open/air.js tell): a line low in the middle, held as long as it takes to read — faded in and
   out, and not over the pause screen */
#hint{position:absolute;left:50%;bottom:15%;transform:translateX(-50%);padding:9px 20px;border-radius:7px;background:rgba(8,12,16,.6);font-size:18px;font-weight:700;letter-spacing:.08em;white-space:nowrap;opacity:0;transition:opacity .45s}
#hint.on{opacity:1}
body:has(#screen-pause:not(.hidden)) #hint{opacity:0;transition:none}
.touch #hint{bottom:auto;top:calc(66px + env(safe-area-inset-top,0px))}
#split{position:absolute;left:50%;top:29%;transform:translateX(-50%);font-family:var(--mono);opacity:0;white-space:nowrap;display:flex;gap:14px;align-items:baseline;background:rgba(8,12,16,.55);padding:6px 16px;border-radius:6px}
#split i{font-style:normal;font-size:11px;letter-spacing:.22em;color:var(--dim)}#split b{font-size:26px;font-weight:700}
#split.good b{color:var(--good)}#split.bad b{color:var(--bad)}
#split.pop{animation:split 1.8s ease-out}@keyframes split{0%{opacity:0}10%{opacity:1}75%{opacity:1}100%{opacity:0}}
#count{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-size:150px;font-weight:900;opacity:0;letter-spacing:-.04em}
#count.go{color:var(--good)}
#count.pop{animation:count .95s ease-out forwards}@keyframes count{0%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}15%{opacity:1;transform:translate(-50%,-50%) scale(1)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(.85)}}
/* the key list is for somebody who has not driven yet: it fades once they are moving and comes back when they stop */
#keys{position:absolute;left:24px;bottom:22px;font-size:11px;color:var(--dim);letter-spacing:.06em;transition:opacity .7s ease}
#keys.gone{opacity:0}

/* ---- by touch (touch.js): the steering on the left half, the pedals on the right, pause, reset and camera in the corner —
   translucent, low and to the sides, clear of the car; laid over the road only while driving ---- */
canvas#gl,#touch{touch-action:none}
#touch{position:fixed;inset:0;z-index:5;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
  --sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);--sb:env(safe-area-inset-bottom,0px);--st:env(safe-area-inset-top,0px)}
.t-corner{position:absolute;left:calc(14px + var(--sl));top:calc(10px + var(--st));display:flex;gap:8px}
.t-btn{min-width:0;width:44px;height:40px;padding:0;border-radius:10px;font-size:13px;font-weight:800;letter-spacing:0;background:rgba(14,18,22,.42);color:rgba(242,239,230,.85);border:1px solid rgba(255,255,255,.22);touch-action:none}
.t-btn:hover{background:rgba(14,18,22,.42)}.t-btn:active{background:rgba(255,180,84,.55);color:#0a0d10}
.t-pedal{position:absolute;display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;border-radius:14px;background:rgba(14,18,22,.3);border:2px solid rgba(255,255,255,.26);color:rgba(242,239,230,.72);font-size:11px;letter-spacing:.2em;transition:background .06s,transform .06s}
.t-pedal b{font-weight:800}
.t-pedal.on{background:rgba(255,180,84,.42);border-color:rgba(255,210,150,.8);color:#fff;transform:scale(.97)}
.t-gas{right:calc(18px + var(--sr));bottom:calc(18px + var(--sb));width:96px;height:156px}
.t-brake{right:calc(126px + var(--sr));bottom:calc(18px + var(--sb));width:92px;height:108px}
.t-brake.on{background:rgba(255,106,90,.42);border-color:rgba(255,160,150,.8)}
.t-hb{right:calc(136px + var(--sr));bottom:calc(140px + var(--sb));width:72px;height:72px;border-radius:50%;align-items:center;padding:0}
/* the wheel: a ring and a knob, resting low on the left until a thumb lands, then under the thumb */
.t-wheel{position:absolute;left:calc(120px + var(--sl));top:calc(100% - 104px - var(--sb));width:0;height:0;pointer-events:none}
.t-wheel::before{content:"";position:absolute;left:-86px;top:-26px;width:172px;height:52px;border-radius:26px;border:2px solid rgba(255,255,255,.2);background:rgba(14,18,22,.18)}
.t-knob{position:absolute;left:-24px;top:-24px;width:48px;height:48px;border-radius:50%;background:rgba(242,239,230,.3);border:2px solid rgba(255,255,255,.5)}
.t-wheel em{position:absolute;left:-60px;top:32px;width:120px;text-align:center;font-style:normal;font-size:10px;letter-spacing:.2em;color:rgba(242,239,230,.55)}
.t-wheel.on::before{border-color:rgba(255,255,255,.35)}.t-wheel.on .t-knob{background:rgba(255,180,84,.55);border-color:rgba(255,220,170,.9)}.t-wheel.on em{display:none}
.t-rotate{display:none;position:absolute;left:50%;top:38%;transform:translateX(-50%);padding:10px 16px;border-radius:8px;background:rgba(8,12,16,.7);font-size:12px;font-weight:700;letter-spacing:.2em;white-space:nowrap;pointer-events:none}
@media (orientation:portrait){.t-rotate{display:block}}
/* the HUD round the controls: no key list, the speed up in the middle, the lap times under the corner buttons */
.touch #keys{display:none}
.touch #speed{right:auto;left:50%;bottom:auto;top:calc(8px + env(safe-area-inset-top,0px));transform:translateX(-50%);text-align:center}
.touch #speed b{font-size:34px}.touch #speed i{margin-left:4px;font-size:10px}
.touch #times{top:calc(60px + env(safe-area-inset-top,0px));left:calc(16px + env(safe-area-inset-left,0px))}
.touch #mapwrap{top:calc(10px + env(safe-area-inset-top,0px));right:calc(14px + env(safe-area-inset-right,0px));width:112px}
.touch #map{width:112px;height:112px}.touch #stage-tag{font-size:10px;margin-top:4px}.touch #stage-tag i{display:block;margin:2px 0 0}

/* ---- screens ---- */
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:10;background:linear-gradient(180deg,rgba(6,10,14,.55),rgba(6,10,14,.9));backdrop-filter:blur(6px)}
.wrap{text-align:center;max-width:560px;padding:30px}.wrap.wide{max-width:900px}.cols{display:grid;grid-template-columns:1fr 1fr;gap:28px;text-align:left}
h1{font-size:88px;font-weight:800;letter-spacing:-.03em;line-height:1}h2{font-size:30px;font-weight:700;margin-bottom:12px}
.tag{color:var(--dim);font-size:15px;margin:10px 0 26px}.foot{margin-top:24px;font-size:12px;color:var(--dim)}.foot span{color:var(--accent)}
.kicker{font-size:12px;letter-spacing:.3em;color:var(--dim);margin-bottom:6px}
p{font-size:14px;line-height:1.7;color:#d8d3c8;margin-bottom:10px}p b{color:var(--accent);font-weight:600}
.menu{display:flex;flex-direction:column;gap:10px;align-items:center;margin-top:18px}.menu.row{flex-direction:row;justify-content:flex-start;flex-wrap:wrap}
button{pointer-events:auto;font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.08em;background:var(--ink);color:#0a0d10;border:0;padding:13px 40px;min-width:220px;cursor:pointer;border-radius:4px;transition:.14s}
button:hover{background:var(--accent)}button.primary{background:var(--accent)}button.primary:hover{background:#ffd08c}
.menu.row button{min-width:0;padding:13px 28px}
/* until the first stage stands behind the title, the buttons wait and say so */
button:disabled,button:disabled:hover{opacity:.35;cursor:progress;background:var(--ink)}button.primary:disabled{background:var(--accent)}
.boot{display:none;align-self:center;margin-left:8px;font-size:12px;letter-spacing:.3em;color:var(--dim);animation:boot 1.1s ease-in-out infinite alternate}
.title.booting .boot{display:inline-block}
@keyframes boot{from{opacity:.35}to{opacity:1}}

/* ---- THE BOOT SCREEN: what is on the screen from the first byte until the country is built ----
   It is deliberately the whole screen and nothing else: no menu behind it to press, no half-built world showing
   through. The ring turns on its own (a CSS animation, so it keeps turning while the main thread is busy laying out
   a county and nothing else on the page can move), and the bar under it is real -- the packs fetched, then the
   world surveyed, then the land built about where the car will stand. */
#boot{position:fixed;inset:0;z-index:99;display:flex;align-items:center;justify-content:center;
      background:radial-gradient(120% 90% at 50% 40%,#131a21 0%,#0a0d10 70%);transition:opacity .45s ease}
#boot.gone{opacity:0;pointer-events:none}
.boot-inner{text-align:center;padding:0 24px}
#boot h1{font-size:clamp(34px,7vw,58px);font-weight:800;letter-spacing:.22em;margin:22px 0 2px}
.boot-tag{font-size:12px;letter-spacing:.28em;color:var(--dim);margin-bottom:26px}
/* the ring: a circle with one lit quarter, turning once a second */
.boot-ring{width:46px;height:46px;margin:0 auto;border-radius:50%;
           border:3px solid rgba(255,255,255,.12);border-top-color:var(--accent);animation:ring 1s linear infinite}
.boot-ring.small{width:26px;height:26px;border-width:2px;margin-bottom:14px}
@keyframes ring{to{transform:rotate(360deg)}}
.boot-bar{width:min(360px,68vw);height:4px;margin:0 auto 12px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.boot-bar i{display:block;height:100%;width:4%;background:var(--accent);border-radius:2px;transition:width .35s ease}
#boot-what{font-size:11px;letter-spacing:.3em;color:var(--dim);min-height:1.7em}
@media (prefers-reduced-motion:reduce){.boot-ring{animation:none}}

/* ---- the title: the stage flies by behind; a panel for the stage, a strip of all of them ---- */
.screen.title{display:block;background:linear-gradient(180deg,rgba(6,10,14,.55) 0%,rgba(6,10,14,0) 26%,rgba(6,10,14,0) 46%,rgba(6,10,14,.82) 100%);backdrop-filter:none}
.title header{position:absolute;left:44px;top:32px;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.title header .tag{margin:8px 0 0;color:var(--ink);font-size:16px;letter-spacing:.04em;text-shadow:0 1px 8px rgba(0,0,0,.8)}
/* clear of the strip below, which grows a scrollbar once there are more stages than fit across */
#detail{position:absolute;left:44px;bottom:226px;max-width:560px;text-shadow:0 1px 6px rgba(0,0,0,.7);padding:22px 26px 24px;border-radius:10px;background:rgba(8,12,16,.66);backdrop-filter:blur(3px)}
.title.lone #detail{bottom:64px}.stages.lone{display:none}
.title header{padding:18px 26px 20px;border-radius:10px;background:rgba(8,12,16,.5)}
.d-head{display:flex;align-items:baseline;gap:14px}.d-head h2{font-size:46px;font-weight:800;letter-spacing:-.01em;margin:0}.d-head span{font-size:12px;letter-spacing:.3em;color:var(--accent)}
#st-blurb{font-size:15px;margin:10px 0 14px;max-width:540px}
/* what the save has, under the blurb: where you stopped, what you are, what you have, what you are building */
#st-save{font-size:13px;font-weight:600;letter-spacing:.06em;margin:-6px 0 14px;color:#e9b06a}
.d-stats{display:flex;gap:28px;font-family:var(--mono);margin-bottom:12px}.d-stats span{display:flex;flex-direction:column;gap:2px}.d-stats i{font-style:normal;font-size:10px;letter-spacing:.22em;color:var(--dim)}.d-stats b{font-size:18px;font-weight:600}
.medals{display:flex;gap:18px;font-family:var(--mono);font-size:14px}
.m{display:flex;align-items:center;gap:7px;opacity:.55}.m.won{opacity:1}
.m em,.medal em,.pip{display:inline-block;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 -2px 3px rgba(0,0,0,.35),0 0 0 2px rgba(255,255,255,.12)}
.m.gold em,.pip.gold,.medal.gold em{background:radial-gradient(circle at 35% 30%,#fff3b8,var(--gold) 45%,#a87712)}
.m.silver em,.pip.silver,.medal.silver em{background:radial-gradient(circle at 35% 30%,#fff,var(--silver) 45%,#7c8791)}
.m.bronze em,.pip.bronze,.medal.bronze em{background:radial-gradient(circle at 35% 30%,#ffd9b5,var(--bronze) 45%,#7c4a1e)}
.stages{position:absolute;left:44px;right:44px;bottom:44px;display:flex;gap:12px;overflow-x:auto;padding:8px 2px 4px}
.stage{position:relative;flex:0 0 auto;width:150px;min-width:0;padding:0;text-align:left;background:rgba(14,18,22,.72);color:var(--ink);border:2px solid rgba(255,255,255,.12);border-radius:6px;overflow:hidden;transition:.16s;letter-spacing:0}
.stage:hover{background:rgba(24,30,36,.9);border-color:rgba(255,255,255,.35)}
.stage.on{border-color:var(--accent);transform:translateY(-6px);box-shadow:0 10px 24px rgba(0,0,0,.5)}
.stage .pic{display:block;height:84px;background:linear-gradient(135deg,#3a5a4a,#1e2a33) center/cover no-repeat}
.stage .nm{display:block;font-size:14px;font-weight:800;letter-spacing:.06em;padding:7px 10px 0}
.stage .rg{display:block;font-size:9px;letter-spacing:.22em;color:var(--dim);padding:2px 10px 9px}
.stage .pip{position:absolute;right:8px;top:8px;width:13px;height:13px}.stage .pip:not(.gold):not(.silver):not(.bronze){display:none}
.title .foot{position:absolute;left:44px;bottom:14px;margin:0}

/* ---- building a stage: a bar and the phase it is in ---- */
.loadbar{width:320px;height:4px;margin:6px auto 10px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.loadbar i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
#load-step{font-size:11px;letter-spacing:.3em;color:var(--dim);min-height:1.7em}

/* ---- the inspector (?admin, from the pause screen): what drew a pixel, over the frozen frame ---- */
#screen-inspect{position:fixed;inset:0;z-index:40;cursor:crosshair}
#in-out{position:absolute;left:20px;bottom:78px;max-width:min(760px,62vw);margin:0;padding:12px 14px;border-radius:8px;
  background:rgba(8,12,16,.82);border:1px solid rgba(255,255,255,.16);color:#cfe3f2;
  font:12px/1.5 var(--mono,ui-monospace,monospace);white-space:pre-wrap;box-shadow:0 8px 28px rgba(0,0,0,.5)}
#in-out:empty{display:none}
#in-hint{position:absolute;left:20px;bottom:54px;margin:0;font-size:11px;letter-spacing:.24em;color:var(--dim)}

/* ---- results ---- */
.results{min-width:420px}
.medal{display:flex;flex-direction:column;align-items:center;gap:6px;margin:14px 0 18px}
.medal em{width:66px;height:66px}.medal b{font-size:20px;letter-spacing:.24em}.medal i{font-style:normal;font-size:11px;letter-spacing:.2em;color:var(--dim)}
.medal.gold b{color:var(--gold)}.medal.silver b{color:var(--silver)}.medal.bronze b{color:var(--bronze)}
.medal i:first-of-type{color:var(--accent)}
#r-laps{list-style:none;font-family:var(--mono);display:flex;flex-direction:column;gap:6px;margin:0 auto 12px;width:260px}
#r-laps li{display:flex;justify-content:space-between;padding:6px 12px;background:rgba(255,255,255,.05);border-radius:4px}#r-laps i{font-style:normal;color:var(--dim);font-size:12px;letter-spacing:.2em}#r-laps b{font-weight:600}
#r-laps li.best{background:rgba(255,180,84,.16)}#r-laps li.best b{color:var(--accent)}
#r-total{font-family:var(--mono);display:flex;gap:12px;justify-content:center;align-items:baseline}#r-total i{font-style:normal;font-size:11px;letter-spacing:.2em;color:var(--dim)}#r-total b{margin-right:14px}
.results .menu.row{justify-content:center}
/* racing the field: where you came, and the order they came home in */
.place{font-size:34px;font-weight:900;letter-spacing:.06em;margin:6px 0 10px;color:var(--ink)}
.place.p1{color:var(--gold)}.place.p2{color:var(--silver)}.place.p3{color:var(--bronze)}
.order{list-style:none;font-family:var(--mono);display:flex;flex-direction:column;gap:4px;margin:0 auto 10px;width:340px}
.order li{display:grid;grid-template-columns:14px 22px 1fr auto;gap:10px;align-items:center;padding:5px 12px;background:rgba(255,255,255,.05);border-radius:4px;font-size:13px}
.order li em{width:12px;height:12px;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.order li i{font-style:normal;color:var(--dim)}.order li b{font-weight:600;text-align:left}.order li span{color:var(--dim)}
.order li.you{background:rgba(255,180,84,.18)}.order li.you b{color:var(--accent)}
/* the two ways to drive a stage */
.modes{display:flex;gap:8px;margin-top:14px}
.modes button{min-width:0;padding:8px 16px;font-size:12px;background:rgba(14,18,22,.72);color:var(--dim);border:1px solid rgba(255,255,255,.18)}
.modes button.on{background:var(--ink);color:#0a0d10;border-color:var(--ink)}.modes button:hover{background:var(--accent);color:#0a0d10}
/* the graphics settings: the presets in a row, then each setting of your own, its label and its choices */
.settings .q-presets{justify-content:center;flex-wrap:wrap;margin:6px 0 22px}
/* The settings are the one screen with more in it than fits a short window, so it scrolls -- and says so, with a
   scrollbar you can see rather than one you have to guess at. `safe center` keeps it centred while it fits and
   pins it to the top the moment it does not, which is what stops the first rows being cut off above the edge. */
#screen-settings{align-items:safe center;overflow-y:auto;-webkit-overflow-scrolling:touch;
                 scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.4) rgba(255,255,255,.08)}
#screen-settings::-webkit-scrollbar{width:10px}
#screen-settings::-webkit-scrollbar-track{background:rgba(255,255,255,.06)}
#screen-settings::-webkit-scrollbar-thumb{background:rgba(255,255,255,.34);border-radius:5px}
#screen-settings::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.5)}
#screen-settings .wrap{padding-top:22px;padding-bottom:22px}
.qgrid{display:grid;grid-template-columns:auto auto;gap:10px 18px;align-items:center;justify-content:center;text-align:left}
.qgrid .ql{font-size:11px;letter-spacing:.22em;color:var(--dim)}.qgrid .modes{margin:0;flex-wrap:wrap}
.settings .q-sub{margin:22px 0 10px}
/* an open world: no laps, no medals, no field — the map follows the car and names the country it is in */
#detail.roam .race-only,#detail:not(.roam) .roam-only{display:none}
#hud.roam #times{display:none}
.stage.world .pic{background-image:linear-gradient(135deg,#4a6a3a,#20333d)}
/* what a key does, said as a tappable word (the mode and the livery in the title's foot); the keys' hints hidden by touch */
button.link{display:inline;min-width:0;padding:0;background:none;color:var(--accent);font:inherit;letter-spacing:inherit;border-radius:0;text-decoration:underline dotted rgba(255,180,84,.5);text-underline-offset:3px}
button.link:hover{background:none;color:#ffd08c}
.touch-only{display:none}.touch .touch-only{display:block}.touch .kb{display:none}

/* ---- a phone: a pinch never zooms the page (the strip still scrolls); a screen too tall for it scrolls, from its top ---- */
html,body{touch-action:pan-x pan-y;overscroll-behavior:none}
@media (max-height:500px),(max-width:600px){
  .screen{align-items:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .screen>.wrap{margin:auto;padding:14px calc(16px + env(safe-area-inset-right,0px)) 14px calc(16px + env(safe-area-inset-left,0px))}
  h2{font-size:22px;margin-bottom:8px}
  .menu{gap:8px;margin-top:12px}
  button{padding:10px 26px;min-width:180px;font-size:13px}
  .menu.row button{padding:10px 18px}
  .modes button{padding:7px 12px;font-size:11px}
  .foot{margin-top:12px}.kicker{font-size:11px}
  .cols{grid-template-columns:1fr;gap:4px}
  p{font-size:13px;line-height:1.55}
  /* the title: its name small, the chosen card's panel under it, the strip of cards along the bottom, clear of a notch */
  .title header{left:calc(20px + env(safe-area-inset-left,0px));top:calc(12px + env(safe-area-inset-top,0px))}
  h1{font-size:40px}.title header .tag{display:none}
  #detail{left:calc(20px + env(safe-area-inset-left,0px));right:calc(20px + env(safe-area-inset-right,0px));top:calc(60px + env(safe-area-inset-top,0px));bottom:auto;max-width:560px}
  .d-head h2{font-size:26px}.d-head span{font-size:10px}
  #st-blurb{font-size:12px;margin:6px 0 8px}
  .d-stats{gap:6px 16px;flex-wrap:wrap;margin-bottom:8px}.d-stats b{font-size:14px}.d-stats i{font-size:9px}
  .medals{gap:12px;font-size:12px}.modes{margin-top:8px}.menu.row{margin-top:10px}
  .stages{left:calc(20px + env(safe-area-inset-left,0px));right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));gap:8px;padding-top:6px}
  .stage{width:112px}.stage .pic{height:50px}.stage .nm{font-size:11px;padding:5px 8px 0}.stage .rg{font-size:8px;padding:1px 8px 6px}
  .stage.on{transform:translateY(-3px)}
  .title .foot{left:calc(20px + env(safe-area-inset-left,0px));bottom:calc(5px + env(safe-area-inset-bottom,0px));font-size:11px}
  /* the results, and the HUD's big words */
  .results{min-width:0}.place{font-size:22px;margin:2px 0 6px}.medal em{width:40px;height:40px}.medal{margin:6px 0 10px}.medal b{font-size:16px}
  .order{width:min(320px,100%)}.order li{padding:3px 10px;font-size:12px}#r-laps{gap:4px;width:220px}#r-laps li{padding:4px 10px}
  #toast{font-size:24px}#toast.rank{font-size:30px;padding:10px 22px}#count{font-size:90px}#split b{font-size:18px}#hint{font-size:12px;padding:6px 12px;letter-spacing:.06em}
  #times{gap:3px}#times b{font-size:14px}#times i{font-size:9px;width:40px}#times .pos b{font-size:22px}
  #pausemap{width:min(92vw,62vh,520px)!important;height:min(92vw,62vh,520px)!important}
}
/* a phone upright (the hint says to turn it): the speed under the corner buttons, the wheel's resting place clear of the pedals */
@media (orientation:portrait){
  .touch #speed{top:calc(58px + env(safe-area-inset-top,0px))}
  .t-wheel{left:calc(96px + var(--sl));top:calc(100% - 200px - var(--sb))}
}
/* a phone on its side: no blurb on the title, the settings and the results in two columns, the pause map beside its buttons */
@media (max-height:500px) and (orientation:landscape){
  #st-blurb{display:none}
  #st-save{font-size:11px;margin:2px 0 8px}
  .settings{display:grid;grid-template-columns:auto auto;column-gap:40px;align-items:start;max-width:none}
  .settings>*{grid-column:1/-1}.settings #q-opts{grid-column:1;grid-row:4}.settings #g-opts{grid-column:2;grid-row:4}.settings .q-sub{display:none}
  .settings .q-presets{margin:4px 0 14px}.qgrid{gap:6px 12px}.settings .foot{margin-top:10px}
  .results{display:grid;grid-template-columns:auto auto;column-gap:36px;align-items:center;max-width:none}
  .results>*{grid-column:1}.results #r-order{grid-column:2;grid-row:1/span 4}.results #r-laps{grid-column:2;grid-row:5/span 3}
  #screen-pause .wrap{display:grid;grid-template-columns:auto auto;column-gap:32px;align-items:center;max-width:none}
  #screen-pause h2{grid-column:2;grid-row:1;align-self:end}#screen-pause .menu{grid-column:2;grid-row:2;align-self:start}
  #pausemap{grid-column:1;grid-row:1/span 2;width:min(82vh,520px)!important;height:min(82vh,520px)!important;margin:0!important}
}

/* ---------------------------------------------------------------- THE MISSION: the build as a report, not a bar */
#screen-story .wrap{max-width:980px;text-align:left}
#screen-story .menu{justify-content:flex-start;margin-top:18px}
.story-head{border-bottom:2px solid rgba(233,176,106,.55);padding-bottom:14px;margin-bottom:6px;position:relative}
.story-head h2{margin:0;letter-spacing:.06em}
#sy-lede{font-size:15px;line-height:1.55;margin:8px 0 0;max-width:640px;color:rgba(255,255,255,.82)}
/* THE RUN so far (main.js renderStory): the haulage's own report above the build's */
.story-run{margin:6px 0 16px;padding:12px 16px;border:1px solid rgba(233,176,106,.35);border-radius:8px;background:rgba(255,255,255,.03)}
.story-run h3{margin:0 0 6px;font-size:13px;letter-spacing:.18em;color:#e9b06a}
.story-run p{margin:0;font-size:14px;letter-spacing:.04em}.story-run p b{color:#fff;font-variant-numeric:tabular-nums}
.story-run p.sub{margin-top:4px;font-size:12px;color:rgba(255,255,255,.55)}
.story-run ul{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:5px 20px}
.story-run li{display:flex;gap:10px;align-items:baseline;font-size:13px;letter-spacing:.04em}
.story-run li b{white-space:nowrap}.story-run li i{font-style:normal;color:#e9b06a;white-space:nowrap;font-variant-numeric:tabular-nums}
.story-run li span{font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.55)}
.story-count{position:absolute;right:0;top:0;text-align:right}
.story-count b{display:block;font-size:40px;line-height:1;color:#e9b06a;font-variant-numeric:tabular-nums}
.story-count span{font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.6)}
.story-next{margin:10px 0 0;font-size:12px;font-weight:700;letter-spacing:.09em;color:#e9b06a}
.story-list{max-height:min(58vh,560px);overflow-y:auto;padding-right:8px;scrollbar-width:thin}
/* a stage: its picture, its words, its loads. Done is in colour; what is to come is not. */
.sy{display:grid;grid-template-columns:200px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.sy-pic{display:block;width:200px;height:113px;background-size:cover;background-position:center;border-radius:6px;
  border:1px solid rgba(255,255,255,.18);filter:saturate(.25) brightness(.5);transition:filter .25s}
.sy.done .sy-pic{filter:none}
.sy.now .sy-pic{filter:saturate(.8) brightness(.88);border-color:rgba(233,176,106,.8);box-shadow:0 0 0 2px rgba(233,176,106,.35)}
.sy-txt h3{margin:0 0 4px;font-size:16px;letter-spacing:.05em;display:flex;align-items:center;gap:10px}
.sy-txt h3 i{font-style:normal;font-size:12px;width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.14);color:rgba(255,255,255,.75)}
.sy.done .sy-txt h3 i{background:#5fa463;color:#0d1a0f}
.sy.now .sy-txt h3 i{background:#e9b06a;color:#241605}
.sy-txt h3 em{font-style:normal;font-size:10px;letter-spacing:.12em;padding:2px 7px;border-radius:999px}
.sy-txt h3 em.ok{background:rgba(95,164,99,.2);color:#8fd094}
.sy-txt h3 em.now{background:rgba(233,176,106,.2);color:#e9b06a}
.sy-txt p{margin:0 0 8px;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.72)}
.sy.todo .sy-txt p,.sy.todo .sy-txt h3{color:rgba(255,255,255,.42)}
.sy-txt ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 10px}
.sy-txt li{display:flex;align-items:baseline;gap:6px;font-size:11px;letter-spacing:.06em;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:3px 10px}
.sy-txt li.in{background:rgba(95,164,99,.16);border-color:rgba(95,164,99,.45)}
.sy-txt li i{font-style:normal;font-weight:700;color:#e9b06a;font-variant-numeric:tabular-nums}
.sy-txt li.in i{color:#8fd094}
.sy-txt li b{font-weight:700;color:rgba(255,255,255,.88)}
.sy-txt li span{color:rgba(255,255,255,.45)}
@media (max-width:760px){
  .sy{grid-template-columns:1fr;gap:8px}
  .sy-pic{width:100%;height:150px}
  .story-count{position:static;text-align:left;margin-top:8px}
  .story-count b{display:inline;font-size:24px;margin-right:6px}
  .story-list{max-height:52vh}
}