:root{--panel:linear-gradient(180deg,rgba(14,18,22,.58),rgba(8,11,14,.68));--panel-edge:rgba(255,255,255,.16);--panel-hi:inset 0 1px 0 rgba(255,255,255,.12);--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:22px;bottom:150px;text-align:right;padding:7px 12px 6px;border-radius:10px;background:var(--panel);border:1px solid var(--panel-edge);box-shadow:0 4px 16px rgba(0,0,0,.28),var(--panel-hi);backdrop-filter:blur(8px)}
#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:22px;bottom:48px;display:flex;align-items:baseline;gap:9px}
/* the build line as a small glass card (#48), as the minimap and the gauge are */
#load,#next{padding:7px 12px;border-radius:10px;background:var(--panel);
  border:1px solid var(--panel-edge);box-shadow:0 4px 16px rgba(0,0,0,.28),var(--panel-hi);backdrop-filter:blur(8px)}
#load i,#next i{font-style:normal;font-size:11px;color:var(--dim);letter-spacing:.2em}#load b,#next b{font-size:14px;font-weight:600;letter-spacing:.08em}
/* 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 */
/* THE CARGO CARD (#45): CARRYING and what, where for and the rest under it, and the load's condition as a bar whose live
   end is how near the driving is to making it mind (open/jobs.js strain: the slosh, the swing) */
#load{display:grid;grid-template-columns:auto 1fr;align-items:baseline;row-gap:4px;max-width:min(560px,calc(100vw - 280px))}
#load-to{grid-column:1/-1}
#cargo-bar{grid-column:1/-1;position:relative;height:6px;margin-top:3px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
#cargo-bar s{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:#7fd48a;transition:width .25s}
#cargo-bar u{position:absolute;top:0;bottom:0;border-radius:3px;background:#ffb070;box-shadow:0 0 6px #ff9a5a}
#load.hurt #cargo-bar s{background:#ffb07a}
/* THE GAUGE (#46): a glass panel as the minimap's, an arc of the revs in the gear the car is in (sound.js gearOf) with its
   red end, the gear in a box, and the speed in the middle of the arc */
#speed{position:absolute;right:22px;bottom:18px;width:210px;height:122px;text-align:center;border-radius:14px;
  background:var(--panel);border:1px solid var(--panel-edge);
  box-shadow:0 6px 22px rgba(0,0,0,.3),var(--panel-hi);backdrop-filter:blur(8px) saturate(1.2)}
#gauge{position:absolute;left:10px;top:9px;width:190px;height:104px;overflow:visible}
#gauge path{fill:none;stroke-width:8;stroke-linecap:round}
#g-track{stroke:rgba(255,255,255,.16)}#g-red{stroke:rgba(255,86,62,.8);stroke-dasharray:14 100;stroke-dashoffset:-86}
#g-rev{stroke:#f4f1e8;stroke-dasharray:0 100}
#speed b{position:absolute;left:0;right:0;top:42px;font-size:50px;font-weight:700;letter-spacing:-.02em;line-height:1}
#speed i{position:absolute;left:0;right:0;bottom:9px;font-style:normal;font-size:11px;color:var(--dim);letter-spacing:.2em}
#gear{position:absolute;left:10px;top:8px;width:26px;height:26px;border:1px solid rgba(255,255,255,.45);border-radius:7px;
  font-size:15px;font-weight:800;line-height:24px;text-decoration:none;color:var(--ink)}
#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:186px}
/* the minimap in a glass frame, its region's name under it inside the frame (#47) */
#mapwrap{padding:7px 7px 6px;border-radius:14px;background:var(--panel);
  border:1px solid var(--panel-edge);box-shadow:0 6px 22px rgba(0,0,0,.35),var(--panel-hi);backdrop-filter:blur(8px) saturate(1.2)}
#map{width:170px;height:170px;border-radius:9px;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);border:1px solid rgba(0,0,0,.25)}
#mapwrap #stage-tag{text-align:center;margin-top:5px;font-size:11px;letter-spacing:.14em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mapwrap #stage-tag i{display:block;margin:2px 0 0;overflow:hidden;text-overflow:ellipsis}
#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:10px;background:var(--panel);border:1px solid var(--panel-edge);box-shadow:0 4px 16px rgba(0,0,0,.28),var(--panel-hi);backdrop-filter:blur(8px);font-size:14px;font-weight:600;letter-spacing:.12em;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}
/* the way in the world (#43): a hairline down from the pill to the place, and a pin over it */
#wayline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
/* (the pin over the target in the WAY pill's own gold, and no line down to it from the pill: #119) */
#wl-pin{fill:var(--gold);stroke:rgba(10,12,14,.6);stroke-width:1.2;stroke-linejoin:round;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
#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}
/* THE BOARD ON THE GLASS (#86): the question, stopped at a haulage board — and, said yes to, the board itself up on the
   screen, big enough to read, the lit line a filled bar rather than a > at the start of it */
#ask{position:absolute;left:50%;bottom:15%;transform:translate(-50%,12px);display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 22px 14px;border-radius:10px;background:rgba(8,12,16,.78);border:2px solid rgba(255,180,84,.45);box-shadow:0 0 36px rgba(255,180,84,.18),0 8px 40px rgba(0,0,0,.5);opacity:0;transition:opacity .3s,transform .3s;white-space:nowrap}
#ask.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#ask:not(.on) button{pointer-events:none}
/* (over the touch controls' layer while there is something here to tap: it covers the screen, z-index 5) */
#hud:has(#ask.on),#hud:has(#board:not(.hidden)){z-index:6}
#ask i{font-style:normal;font-size:11px;letter-spacing:.26em;color:var(--accent)}
#ask b{font-size:24px;font-weight:800;letter-spacing:.04em}
#ask u{text-decoration:none;font-size:12px;letter-spacing:.16em;color:var(--dim)}
#ask u:empty{display:none}
.ask-do{display:flex;gap:10px;margin-top:8px}
#ask button,#board button{min-width:0;padding:9px 18px;font-size:13px;font-weight:700;letter-spacing:.1em;border-radius:6px}
#ask button[data-board=no],#board button[data-board=back]{background:rgba(255,255,255,.1);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
#ask button[data-board=yes],#board button.go{background:var(--accent);color:#1a1206}
#ask kbd,#board kbd{font:600 10px/1 var(--mono);letter-spacing:.04em;padding:3px 5px;border-radius:3px;margin-right:8px;background:rgba(0,0,0,.28);vertical-align:1px}
#board kbd{background:rgba(255,255,255,.12);margin:0 6px 0 0}
.touch #ask kbd{display:none}
.touch #ask{bottom:auto;top:calc(156px + env(safe-area-inset-top,0px))}
#board{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(4,7,10,.55),rgba(4,7,10,.78));pointer-events:auto;transition:opacity .3s;text-shadow:none}
#board.away{opacity:0}
.b-card{width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:#11161b;border-radius:12px;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 6px rgba(255,255,255,.04);overflow:hidden;transform-origin:50% 50%}
.b-card header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:18px 24px 14px;border-bottom:1px solid rgba(255,255,255,.1);background:#171d23}
.b-card header b{font-size:26px;font-weight:800;letter-spacing:.06em}
.b-card header i{font-style:normal;font-size:11px;letter-spacing:.24em;color:var(--dim);margin-right:8px}
.b-card header em{font-style:normal;font-size:20px;font-weight:700;color:var(--gold)}
#b-head{padding:10px 24px 0;font-size:14px;font-weight:600;letter-spacing:.08em;color:var(--dim)}#b-head:empty{display:none}
#b-head div:first-child{color:var(--ink)}
#b-rows{list-style:none;padding:10px 12px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
#b-rows li{display:grid;grid-template-columns:78px 1fr auto;align-items:center;gap:6px 14px;padding:11px 14px;border-radius:7px;cursor:pointer;transition:background .12s}
#b-rows li:hover{background:rgba(255,255,255,.06)}
#b-rows .k{font-size:10px;font-weight:700;letter-spacing:.18em;color:var(--dim);border:1px solid rgba(255,255,255,.2);border-radius:4px;padding:3px 0;text-align:center}
#b-rows .w{font-size:18px;font-weight:700;letter-spacing:.04em;min-width:0}
#b-rows .w em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--accent);margin-left:10px;vertical-align:2px}
#b-rows .w s{text-decoration:none;display:block;font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--dim);margin-top:2px}
#b-rows .p{font-size:18px;font-weight:700;color:var(--gold);white-space:nowrap}
#b-rows li.garage .k{color:#ff8a5a;border-color:rgba(255,138,90,.5)}#b-rows li.build .k{color:var(--good);border-color:rgba(110,224,138,.5)}
#b-rows li.shop .k,#b-rows li.contract .k{color:var(--silver)}
#b-rows li.short .p{color:var(--bad)}#b-rows li.short .w{opacity:.7}
/* the lit line: a filled bar, dark on the accent */
#b-rows li.lit{background:var(--accent);color:#1a1206;box-shadow:0 0 0 2px rgba(255,210,150,.6),0 6px 24px rgba(255,180,84,.3)}
#b-rows li.lit .k{color:#1a1206;border-color:rgba(26,18,6,.45)}#b-rows li.lit .w em,#b-rows li.lit .w s,#b-rows li.lit .p{color:#1a1206}
#b-rows li.lit.short .p{color:#8a1a0e}#b-rows li.lit.short .w{opacity:1}
#b-notes{padding:8px 24px;border-top:1px solid rgba(255,255,255,.07);font-size:13px;font-weight:600;letter-spacing:.08em;color:#ffb07a}#b-notes:empty{display:none}
.b-card footer{display:flex;align-items:center;gap:10px;padding:12px 16px 12px 24px;border-top:1px solid rgba(255,255,255,.1);background:#0d1115}
#b-keys{flex:1;font-size:12px;letter-spacing:.08em;color:var(--dim)}
@media (max-width:760px),(max-height:500px){
  #ask b{font-size:17px}#ask{padding:10px 16px}
  .b-card header{padding:10px 16px 8px}.b-card header b{font-size:18px}.b-card header em{font-size:16px}
  #b-rows{padding:6px 8px}#b-rows li{grid-template-columns:62px 1fr auto;padding:8px 10px;gap:4px 10px}
  #b-rows .w,#b-rows .p{font-size:15px}#b-rows .w s{font-size:11px}#b-keys{font-size:11px}
  .b-card footer{padding:8px 10px 8px 16px}
}
body:has(#screen-pause:not(.hidden)) #hint{opacity:0;transition:none}
.touch #hint{bottom:auto;top:calc(156px + 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}
#keys-hint{position:absolute;left:24px;bottom:22px;font-size:10px;color:var(--dim);letter-spacing:.2em;opacity:.7;transition:opacity .7s ease}
#keys-hint.gone{opacity:0}.touch #keys-hint{display:none}

/* ---- 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;width:150px;height:88px}
.touch #gauge{left:7px;top:6px;width:136px;height:75px}.touch #gauge path{stroke-width:9}
.touch #speed b{top:30px;font-size:32px}.touch #speed i{bottom:6px;font-size:9px}.touch #gear{width:20px;height:20px;line-height:18px;font-size:12px;left:6px;top:5px}
/* (and the arrow to the next job under it, not on it — it sat at 6 % of the height, inside the speedometer: #138) */
.touch #way{top:calc(104px + env(safe-area-inset-top,0px))}
.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:128px}
.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)}
/* A SCREEN TALLER THAN THE WINDOW scrolls as one page, from its top (#89). Centred, it lost its top off the window's edge
   with no way to reach it — THE MISSION on a 550 px window began mid-sentence — and the scrolling a phone got under
   500 px never came on for a short laptop window. `safe center` centres a screen while it fits and pins it to the top
   the moment it does not, as the settings did on their own; every screen but the title (its own layout) does it now. */
.screen:not(.title){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)}
/* behind the pause menu the world is out of focus by its own depth (shared/renderreal.js `dof`): the car sharp, the land
   behind it soft. The flat 6px blur over that undid it; a light one is left, so the HUD under the menu stays soft. */
#screen-pause{backdrop-filter:blur(2px)}
.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 (#152): one column instead of boxes placed by guesswork — its name, the chosen card's panel under it, the
     strip of cards and the foot line at the bottom — which scrolls as one where the screen is too short for it. Placed
     absolutely, the card sat at a fixed 60 px over a header taller than that, and the lone card's bottom (.title.lone
     #detail, the more specific rule) stretched it to the foot, as tall as the screen whatever it held. */
  .screen.title{display:flex;flex-direction:column;align-items:flex-start;gap:10px;
    padding:calc(12px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px))}
  .screen.title>*{flex-shrink:0}
  .title header,#detail,.title.lone #detail,.stages,.title .foot{position:static;left:auto;right:auto;top:auto;bottom:auto}
  .title header{padding:10px 18px 12px}
  h1{font-size:40px}.title header .tag{display:none}
  #detail{align-self:stretch;max-width:560px;padding:16px 18px 18px}
  .d-head{flex-wrap:wrap;gap:2px 12px}.d-head h2{font-size:26px;white-space:nowrap}.d-head span{font-size:11px}
  #st-blurb{font-size:13px;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:11px;letter-spacing:.16em}
  .medals{gap:12px;font-size:12px}.modes{margin-top:8px}.menu.row{margin-top:10px}
  .menu.row button{flex:1 1 auto}
  .stages{align-self:stretch;margin-top:auto;gap:8px;padding-top:6px}
  .title.lone .foot{margin-top:auto}
  .stage{width:112px}.stage .pic{height:50px}.stage .nm{font-size:11px;padding:5px 8px 0}.stage .rg{font-size:10px;letter-spacing:.14em;padding:1px 8px 6px}
  .stage.on{transform:translateY(-3px)}
  .title .foot{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 */
/* A PHONE: only what you drive by while you drive (#139) — the controls, the speed, the arrow, the minimap, the toasts.
   The credits a short line in the top left under the corner buttons, off the handbrake; the rank under them and THE
   BUILD card only when stopped (main.js sets #hud.stopped: at a board, standing, or paused); the region's name gone from
   under the minimap (its toast says it on the way in); the cargo card cut to what it is, where for and its bar, where
   the build card would be — clear of the wheel. */
@media (max-height:520px),(max-width:520px){
  .touch #stage-tag{display:none}
  /* (no speedometer: the road is what you look at on a phone, and the arrow goes up where it was, out of the view) */
  html.touch #speed{display:none}
  html.touch #way{top:calc(10px + env(safe-area-inset-top,0px))}
  html.touch #ask,html.touch #hint{top:calc(58px + env(safe-area-inset-top,0px))}
  /* (the arrow between the left column and the minimap, however long the name it points at: an ellipsis, not an overlap) */
  .touch #way{max-width:calc(100vw - 2 * (180px + env(safe-area-inset-left,0px)));padding:6px 12px;gap:8px}
  .touch #way b{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .touch #hud:has(#ask.on) #hint{opacity:0}
  .touch #run{right:auto;bottom:auto;left:calc(14px + env(safe-area-inset-left,0px));top:calc(58px + env(safe-area-inset-top,0px));text-align:left;padding:4px 10px 4px;max-width:150px}
  .touch #run b{font-size:18px}.touch #run i{font-size:10px;margin-left:4px}
  .touch #run #scrap,.touch #run #bounty,.touch #run #onyou,.touch #run #cond{display:block;margin:2px 0 0;font-size:9px}
  .touch #run #scrap[hidden],.touch #run #bounty[hidden],.touch #run #onyou[hidden],.touch #run #cond[hidden]{display:none}
  .touch #hud:not(.stopped) #run u{display:none}
  .touch #run u{font-size:8px;letter-spacing:.2em}
  .touch #hud:not(.stopped) #next{display:none}
  .touch #load,.touch #next{left:calc(14px + env(safe-area-inset-left,0px));bottom:auto;top:calc(112px + env(safe-area-inset-top,0px));padding:5px 10px;
    max-width:min(170px,calc(50vw - 178px))}
  .touch #next{flex-direction:column;align-items:flex-start;gap:2px}
  .touch #load>i:first-child,.touch #next>i:first-child{display:none}
  .touch #load{grid-template-columns:1fr;row-gap:2px}
  .touch #load b,.touch #next b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .touch #load-to,.touch #next-to{font-size:9px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
}
/* a phone on its side, short: the board's question small and high, so it clears the handbrake and the wheel, and the
   arrow put away while it is asked (#139) */
@media (max-height:520px) and (orientation:landscape){
  html.touch #ask{padding:7px 12px;gap:2px;left:calc(50% - 20px)}
  .touch #ask b{font-size:13px}.touch #ask-sub{display:none}
  .touch #hud:has(#ask.on) #way{display:none}
}
/* a phone upright: the credits between the corner buttons and the speed, the cards above the controls the width of the
   screen, and the note to turn it under the board's question (#139) */
@media (max-width:520px) and (orientation:portrait){
  .touch #load,.touch #next{top:auto;bottom:calc(232px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 28px)}
  /* (the credits top left as on its side, the arrow the width of the screen under the minimap, the prompts under it) */
  /* (html.touch: over the portrait rules of #138 further down, which placed these for the full layout) */
  html.touch #way{top:calc(152px + env(safe-area-inset-top,0px));max-width:calc(100vw - 28px)}
  html.touch #ask,html.touch #hint{top:calc(250px + env(safe-area-inset-top,0px))}
  html.touch .t-rotate{top:calc(400px + env(safe-area-inset-top,0px))}
}
@media (orientation:portrait){
  .touch #speed{top:calc(58px + env(safe-area-inset-top,0px))}
  /* (in portrait the arrow is as wide as the screen: under the minimap too, and the prompts under it — #138) */
  .touch #way{top:calc(182px + env(safe-area-inset-top,0px))}
  .touch #ask,.touch #hint{top:calc(236px + 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}
/* (the stages are part of the page, not a letterbox of their own: the screen scrolls, head, run, stages and all) */
.story-list{padding-right:8px}
/* and BACK stays at hand however far down the stages you are: it rides the foot of the window while the page scrolls */
#screen-story .menu{position:sticky;bottom:0;margin-bottom:0;padding:14px 0 calc(10px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,rgba(8,12,16,0),rgba(8,12,16,.92) 45%)}
/* 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}
}
/* SAVES (#84): the snapshots, newest first — where, when, what it held, and the way back to it */
.saves .menu.row{justify-content:center;margin-top:14px}
.saves button.danger{background:#3a1512;color:var(--bad);box-shadow:inset 0 0 0 1px rgba(255,106,90,.55)}
.saves button.danger:hover{background:var(--bad);color:#0a0d10}
#sv-confirm{margin:16px auto 0;padding:14px 18px;max-width:640px;border-radius:8px;background:rgba(255,106,90,.1);border:1px solid rgba(255,106,90,.45)}
#sv-confirm p{font-size:13px;font-weight:600;letter-spacing:.05em;line-height:1.5}
#sv-confirm .menu{margin-top:10px}
#sv-list{list-style:none;margin:18px 0 0;text-align:left;max-height:min(46vh,440px);overflow-y:auto;padding-right:8px;scrollbar-width:thin}
#sv-list li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.12)}
#sv-list li>div{flex:1;min-width:0}
#sv-list b{font-size:15px;letter-spacing:.05em;margin-right:10px}
#sv-list i{font-style:normal;font-size:11px;letter-spacing:.18em;color:var(--dim)}
#sv-list li.hand i{color:var(--accent)}
#sv-list span{display:block;margin-top:3px;font-size:12px;letter-spacing:.04em;color:rgba(242,239,230,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sv-list button{min-width:0;padding:9px 18px;font-size:12px}
#sv-list button.x{padding:9px 12px;background:transparent;color:var(--dim);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
#sv-list button.x:hover{color:var(--bad);box-shadow:inset 0 0 0 1px var(--bad)}
#sv-list li.none{justify-content:center;color:var(--dim);font-size:12px;letter-spacing:.14em;border:0;padding:24px 0}
@media (max-width:640px){#sv-list li{flex-wrap:wrap}#sv-list li>div{flex-basis:100%}.saves .menu.row button{padding:11px 16px}}
/* (the pause screen's buttons in two columns: at six of them under the map, TITLE went off the bottom of an 820 px window) */
#screen-pause .menu{display:grid;grid-template-columns:repeat(2,minmax(0,220px));justify-content:center}
#screen-pause .menu button{min-width:0;padding:13px 16px}