/* The boot screen (presentation/bootScreen.js): "Wordmark Wreck" (2026-10-11, owner's pick of
   five concepts). The logo stands as toy blocks on a table in the menu's keycap style, the coral
   and cyan cars rev at either end and back up to the table edge while the shot power charges with
   real loading, and finish() sends them through it: the letters fly, the cars crumple, and the
   blocks snap back crooked before the wordmark shrinks into the menu's brand slot.
   Self-contained: SVG cars and CSS only, no model, texture or WebGL download, and no menu.css
   (this paints before anything else loads, so its colours are written out here). The JS measures
   this layout and positions the cars, the aim lines, the impact and the hubcap in px. */
body.booting{background:#080c13}
body.booting>:not(#bootScreen):not(script){visibility:hidden}
#bootScreen{
  /* --b: one big letter block; --s: one small block; --cw: a car; --tw: the table */
  --b:min(76px,calc((100vw - 40px) / 17),11vh);--s:calc(var(--b) * .5);--cw:calc(var(--b) * 1.95);--tw:min(calc(100vw - 32px),calc(var(--b) * 19));
  position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;overflow:hidden;
  padding:max(20px,env(safe-area-inset-top)) 12px max(20px,env(safe-area-inset-bottom));
  background:radial-gradient(70% 45% at 50% 112%,rgba(255,150,60,.16),transparent 72%),radial-gradient(ellipse at 50% 38%,#243147 0,#111927 46%,#080c13 82%);
  color:#f5f1e8;font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;transition:opacity .38s}
#bootScreen::before{content:'';position:absolute;inset:0;opacity:.07;background:repeating-linear-gradient(115deg,transparent 0 46px,#b3c5e8 47px 48px,transparent 49px 94px);pointer-events:none}
.boot-content{position:relative;width:var(--tw);max-width:100%;display:flex;flex-direction:column;align-items:center;text-align:center}
.boot-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* the stage: the table, the word standing on it, the cars and the impact */
.boot-stage{position:relative;width:100%;padding-bottom:calc(var(--b) * .28);transform-origin:50% 60%}
.boot-table{position:absolute;left:0;right:0;top:calc(var(--b) * .62);bottom:calc(var(--b) * .28);
  background:linear-gradient(180deg,#121b2a,#1d2a3e 70%,#22314a);clip-path:polygon(3% 0,97% 0,100% 100%,0 100%)}
.boot-table::before{content:'';position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(90deg,transparent 0 63px,rgba(179,197,232,.07) 63px 65px,transparent 65px 130px)}
.boot-stage::after{content:'';position:absolute;left:0;right:0;bottom:0;height:calc(var(--b) * .28);border-radius:0 0 16px 16px;
  background:linear-gradient(180deg,#1a273b,#0d1522);
  box-shadow:inset 0 3px 0 #ffad47,inset 0 0 0 1px rgba(179,197,232,.14),0 7px 0 #04070c,0 22px 34px rgba(0,0,0,.5)}

/* the word: big navy keycaps (TABLE TOP), small amber ones in front (DEMOLITION DERBY) */
.boot-word{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:calc(var(--b) * .32);padding-bottom:calc(var(--b) * .3);transform-origin:0 0}
.bw-big{display:flex;gap:calc(var(--b) * .5)}
.bw-w,.bw-small{display:flex;gap:calc(var(--b) * .1)}
.bw-small{gap:calc(var(--s) * .1)}
.boot-word i{display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;font-style:italic;font-weight:800;
  font-family:Barlow,'Arial Narrow',Impact,sans-serif;line-height:1;text-transform:uppercase;transform-origin:50% 100%;position:relative}
.bw-big i{width:calc(var(--b) * .9);height:var(--b);font-size:calc(var(--b) * .86);border-radius:calc(var(--b) * .12);color:#f5f1e8;
  background:linear-gradient(180deg,#2c3d5a,#172235 80%);text-shadow:0 3px 0 rgba(0,0,0,.45);
  box-shadow:inset 0 3px 0 #ffad47,inset 0 0 0 1px rgba(214,226,250,.18),0 calc(var(--b) * .08) 0 #04070c,0 14px 22px rgba(0,0,0,.45)}
.bw-small i{width:calc(var(--s) * .8);height:var(--s);font-size:calc(var(--s) * .8);border-radius:calc(var(--s) * .16);color:#131d2c;
  background:linear-gradient(180deg,#ffd781,#ff9b3d);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(19,29,44,.25),0 calc(var(--s) * .12) 0 #7a3a12,0 10px 14px rgba(0,0,0,.4)}
.bw-small b{width:calc(var(--s) * .45)}
/* the damage the crash leaves: a chipped O, a cracked B */
.boot-word i.is-chipped::before{content:'';position:absolute;right:-1px;top:-1px;width:26%;height:22%;background:#0b111b;clip-path:polygon(0 0,100% 0,100% 100%)}
.boot-word i.is-cracked::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,transparent 0 48%,#0b111b 48% 51%,transparent 51%) 0 100%/34% 46% no-repeat}

/* the cars: positioned by the JS (--x, --y in px), revving on the spot */
.boot-car{position:absolute;left:0;top:0;z-index:4;width:var(--cw);transform:translate(var(--x,0),var(--y,0));
  transition:transform .45s cubic-bezier(.2,.7,.3,1);filter:drop-shadow(0 10px 6px rgba(0,0,0,.6));will-change:transform}
.boot-car-body{position:relative;transform-origin:50% 100%;animation:bootRev .16s ease-in-out infinite alternate,bootLunge 2.2s ease-in-out infinite;transition:translate .3s}
.boot-car-right{--dir:-1}
.boot-car-right .boot-car-body{animation-delay:0s,-1.1s}
.boot-car svg{display:block;width:100%;overflow:visible}
.boot-car-right svg{transform:scaleX(-1)}
.boot-wheel{transform-box:fill-box;transform-origin:center;animation:bootWheel .4s linear infinite}
.boot-car-right .boot-wheel{animation-direction:reverse}
.boot-defs{position:absolute;width:0;height:0;overflow:hidden}
.boot-car :is(.car-body,.car-paint){fill:url(#bootPaintL)}.boot-car-right :is(.car-body,.car-paint){fill:url(#bootPaintR)}
.boot-car-right .car-num{transform:scaleX(-1);transform-box:fill-box;transform-origin:center}
.boot-car .car-stripe{fill:#ffd781}.boot-car-right .car-stripe{fill:#e9f8ff}
.boot-car .car-dent{display:none}
/* exhaust puffs out of the tail while revving; steam off the bonnet once crumpled */
.car-puffs,.car-steam{position:absolute;inset:0;pointer-events:none}
.car-puffs i,.car-steam i{position:absolute;border-radius:50%;opacity:0}
.car-puffs i{left:2%;bottom:22%;width:18%;aspect-ratio:1;background:radial-gradient(closest-side,rgba(179,197,232,.55),transparent);animation:bootPuff .7s ease-out infinite}
.boot-car-right .car-puffs i{left:auto;right:2%;--dir:1}
.boot-car-left .car-puffs i{--dir:-1}
.car-puffs i:nth-child(2){animation-delay:.23s}.car-puffs i:nth-child(3){animation-delay:.46s}
.car-steam i{right:12%;top:-6%;width:20%;aspect-ratio:1;background:radial-gradient(closest-side,rgba(231,238,247,.6),transparent)}
.boot-car-right .car-steam i{right:auto;left:12%}
.car-steam i:nth-child(2){animation-delay:.4s}.car-steam i:nth-child(3){animation-delay:.8s}

#bootScreen.is-arriving .boot-car{transition:transform 1s cubic-bezier(.15,.75,.3,1)}
#bootScreen.is-arriving .boot-wheel{animation-duration:.2s}

/* the burnout: rear wheel flat out (the front one holds), the car shudders, smoke pours back */
.car-smoke{position:absolute;inset:0;pointer-events:none}
.car-smoke i{position:absolute;left:4%;top:40%;width:48%;aspect-ratio:1;border-radius:50%;opacity:0;--dir:-1;
  background:radial-gradient(closest-side,rgba(240,244,250,.95),rgba(205,214,228,.6) 50%,transparent)}
.boot-car-right .car-smoke i{left:auto;right:4%;--dir:1}
.car-smoke i:nth-child(2){animation-delay:.16s}.car-smoke i:nth-child(3){animation-delay:.33s}
.car-smoke i:nth-child(4){animation-delay:.5s}.car-smoke i:nth-child(5){animation-delay:.66s}.car-smoke i:nth-child(6){animation-delay:.83s}
#bootScreen.is-burnout .car-smoke i{animation-name:bootSmoke;animation-duration:1s;animation-timing-function:ease-out;animation-iteration-count:infinite}
#bootScreen.is-burnout .boot-car-body{animation:bootBurn .08s linear infinite alternate;transform-origin:78% 100%}
#bootScreen.is-burnout .boot-car-right .boot-car-body{transform-origin:22% 100%}
#bootScreen.is-burnout .boot-wheel{animation-duration:.06s}
#bootScreen.is-burnout .boot-car svg>g.boot-wheel:last-of-type{animation-play-state:paused}
#bootScreen.is-burnout .car-puffs{display:none}
.boot-skid{position:absolute;left:0;top:0;z-index:2;height:9px;margin-top:-3px;width:var(--w,0);border-radius:4px;opacity:1;
  -webkit-mask:linear-gradient(#000 0 35%,transparent 35% 60%,#000 60%);mask:linear-gradient(#000 0 35%,transparent 35% 60%,#000 60%);
  transform:translate(var(--x,0),var(--y,0)) scaleX(0)}
.boot-skid-left{transform-origin:100% 50%;background:linear-gradient(90deg,transparent,#000 70%)}
.boot-skid-right{transform-origin:0 50%;background:linear-gradient(90deg,#000 30%,transparent)}
#bootScreen.has-skids .boot-skid{transform:translate(var(--x,0),var(--y,0)) scaleX(1);transition:transform 1.5s ease-out}
#bootScreen.is-leaving .boot-skid{opacity:0;transition:opacity .2s}

/* aim lines from each nose toward the gap, like the in-game aim; they fade in as power builds */
.boot-aim{position:absolute;left:0;top:0;z-index:2;height:3px;width:var(--w,0);transform:translate(var(--x,0),var(--y,0));opacity:var(--o,0);
  background:repeating-linear-gradient(90deg,var(--c) 0 10px,transparent 10px 19px);border-radius:2px;transition:opacity .3s,transform .45s cubic-bezier(.2,.7,.3,1),width .45s cubic-bezier(.2,.7,.3,1)}
.boot-aim-left{--c:#ff6741}.boot-aim-right{--c:#49cbea}

/* the impact: a starburst, sparks, chips and dust at the meeting point (placed by the JS) */
.boot-fx{position:absolute;left:0;top:0;z-index:5;width:0;height:0;transform:translate(var(--x,0),var(--y,0));pointer-events:none}
.boot-fx i{position:absolute;left:0;top:0;opacity:0}
.fx-glow{width:calc(var(--b) * 4.4);height:calc(var(--b) * 3.6);margin:calc(var(--b) * -1.8) 0 0 calc(var(--b) * -2.2);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,173,71,.75),rgba(255,173,71,.25) 55%,transparent)}
.fx-star,.fx-core{clip-path:polygon(50% 0,59% 30%,82% 8%,73% 36%,100% 40%,75% 53%,97% 78%,66% 66%,59% 100%,46% 71%,22% 96%,30% 63%,0 70%,24% 50%,4% 26%,34% 33%)}
.fx-star{width:calc(var(--b) * 2.6);height:calc(var(--b) * 2.3);margin:calc(var(--b) * -1.15) 0 0 calc(var(--b) * -1.3);background:#fff3c4;filter:drop-shadow(0 0 18px #ffad47)}
.fx-core{width:calc(var(--b) * 1.1);height:calc(var(--b) * 1);margin:calc(var(--b) * -.5) 0 0 calc(var(--b) * -.55);background:#fff;transform:rotate(20deg)}
.fx-spark{width:calc(var(--b) * .7);height:3px;margin-top:-1.5px;border-radius:2px;background:#ffd781;transform-origin:0 50%}
.fx-spark:nth-child(3n){background:#fff;height:2px}
.fx-chip{width:calc(var(--b) * .16);height:calc(var(--b) * .16);margin:calc(var(--b) * -.08) 0 0 calc(var(--b) * -.08);background:var(--c);
  clip-path:polygon(0 0,100% 30%,60% 100%);filter:drop-shadow(0 0 1px #04070c)}
.fx-puff{width:calc(var(--b) * .9);height:calc(var(--b) * .7);margin:calc(var(--b) * -.2) 0 0 calc(var(--b) * -.45);border-radius:50%;
  background:radial-gradient(closest-side,rgba(217,203,176,.55),rgba(217,203,176,.2) 60%,transparent)}
/* the hubcap the cyan car loses: it pops, bounces and rolls to the edge of the table (path set by the JS) */
.boot-hubcap{position:absolute;left:0;top:0;z-index:5;width:calc(var(--b) * .38);height:calc(var(--b) * .38);margin:calc(var(--b) * -.19) 0 0 calc(var(--b) * -.19);
  border-radius:50%;opacity:0;transform:translate(var(--x0,0),var(--y0,0));
  background:radial-gradient(circle,#e7eef7 0 28%,#bcc9d2 29% 62%,#293348 63% 72%,transparent 73%),linear-gradient(#40516c,#40516c) center/70% 12% no-repeat;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.5))}

/* the kicker; it stamps in amber once the blocks have settled */
.boot-kicker{margin:22px 0 0;font:600 11px/1.2 Barlow,'Arial Narrow',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#8f9fb6;transition:opacity .25s}

/* progress: the shot power key, the number and the menu's barber stripe turning hot */
.boot-progress{position:relative;box-sizing:border-box;width:min(520px,100%);margin-top:22px;padding:16px 20px 14px;border-radius:18px;text-align:left;
  background:linear-gradient(180deg,#1a273b,#0f1726);transition:opacity .3s;
  box-shadow:inset 0 3px 0 #ffad47,inset 0 0 0 1px rgba(179,197,232,.15),0 6px 0 #04070c,0 18px 30px rgba(0,0,0,.45)}
.boot-power{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:9px}
.boot-power-label{font:800 italic 15px/1 Barlow,'Arial Narrow',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#ffd781}
.boot-power-label small{display:block;margin-top:4px;font:600 11px/1 Barlow,'Arial Narrow',sans-serif;letter-spacing:.12em;color:#8f9fb6}
#bootPercent{font:800 italic 40px/.9 Barlow,'Arial Narrow',Impact,sans-serif;color:#ffad47;font-variant-numeric:tabular-nums;text-shadow:0 2px 0 rgba(0,0,0,.4)}
#bootProgress{-webkit-appearance:none;appearance:none;display:block;width:100%;height:20px;border:0;border-radius:999px;overflow:hidden;background:#090e17;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.6),inset 0 0 0 1px rgba(214,226,250,.18);transition:box-shadow .2s}
#bootProgress::-webkit-progress-bar{background:#090e17;border-radius:999px}
#bootProgress::-webkit-progress-value{border-radius:999px;transition:width .25s;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.2) 0 10px,transparent 10px 20px),linear-gradient(90deg,#ffe2a0,#ffad47 45%,#ff7a3d 75%,#ef453e)}
#bootProgress::-moz-progress-bar{border-radius:999px;background:repeating-linear-gradient(115deg,rgba(255,255,255,.2) 0 10px,transparent 10px 20px),linear-gradient(90deg,#ffe2a0,#ffad47 45%,#ff7a3d 75%,#ef453e)}
#bootScreen.is-full #bootProgress{box-shadow:inset 0 0 0 1.5px #fff2a3,0 0 22px rgba(255,212,84,.8)}
#bootStage{min-height:20px;margin:12px 0 4px;text-align:center;font:600 14px/1.35 system-ui,-apple-system,'Segoe UI',sans-serif;color:#bcc9d8}
#bootScreen #loadmsg{display:flex;align-items:center;justify-content:center;gap:8px;min-height:18px;margin:0 auto;font:600 12px/1.4 Barlow,'Arial Narrow',sans-serif;
  letter-spacing:.04em;color:#8f9fb6;overflow-wrap:anywhere}
#bootScreen #loadmsg::before{content:'';flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:#52e0a2;box-shadow:0 0 0 3px rgba(82,224,162,.18)}
#bootRetry{display:flex;width:max-content;align-items:center;justify-content:center;min-height:46px;margin:14px auto 0;padding:0 20px;border-radius:12px;text-decoration:none;
  font:800 italic 16px/1 Barlow,'Arial Narrow',sans-serif;letter-spacing:.02em;text-transform:uppercase;color:#f5f1e8;background:linear-gradient(180deg,#25344d,#172235);
  box-shadow:inset 0 0 0 1px rgba(214,226,250,.18),inset 0 2px 0 rgba(255,255,255,.14),0 4px 0 #04070c,0 8px 14px rgba(0,0,0,.4)}
#bootRetry[hidden]{display:none}

/* waiting, past 60%: the blocks start to rattle */
#bootScreen.is-tense .bw-big i:nth-child(2n){animation:bootRattle .22s ease-in-out infinite alternate}
#bootScreen.is-tense .bw-big i:nth-child(3n){animation:bootRattle .19s ease-in-out infinite alternate-reverse}

/* finish(), first a short ready beat at full power so everything is seen, then: launch (the cars accelerate at the gap), crash, settle, leave */
#bootScreen.is-ready .boot-car-body{animation:bootRev .07s ease-in-out infinite alternate;translate:calc(var(--dir,1) * -8%) 0}
#bootScreen.is-ready .boot-wheel{animation-duration:.14s}
#bootScreen.is-ready .car-puffs i{animation-duration:.35s}
#bootScreen.is-launching .boot-car{transition:transform .4s cubic-bezier(.55,0,.9,.55)}
#bootScreen.is-launching .boot-car-body{animation:none;transform:rotate(-3deg);translate:0 0}
#bootScreen.is-launching .boot-car-right .boot-car-body{transform:rotate(3deg)}
#bootScreen:is(.is-launching,.has-crashed) .boot-aim{opacity:0}
#bootScreen.is-launching .boot-wheel{animation-duration:.12s}
#bootScreen.has-crashed .boot-car{transition:transform .9s cubic-bezier(.15,.85,.3,1) .12s}
#bootScreen.has-crashed .boot-car-body{animation:bootRecoil .8s ease-out both}
#bootScreen.has-crashed .boot-car-right .boot-car-body{animation-name:bootRecoilR}
#bootScreen.has-crashed .car-whole,#bootScreen.has-crashed .boot-car .car-body:not(.car-dent){display:none}
#bootScreen.has-crashed .boot-car .car-dent{display:inline}
#bootScreen.has-crashed .boot-car-right .car-hub{display:none}
#bootScreen.has-crashed .boot-wheel{animation:none}
#bootScreen.has-crashed .car-puffs{display:none}
#bootScreen.has-crashed .boot-stage{animation:bootShake .45s ease-out}
#bootScreen.has-crashed .fx-glow{animation:bootGlow .7s ease-out both}
#bootScreen.has-crashed .fx-star{animation:bootStar .5s ease-out both}
#bootScreen.has-crashed .fx-core{animation:bootStar .3s ease-out both}
#bootScreen.has-crashed .fx-spark{animation:bootSpark .5s cubic-bezier(.1,.7,.4,1) both}
#bootScreen.has-crashed .fx-chip{animation:bootChip 1.1s cubic-bezier(.2,.6,.5,1) both}
#bootScreen.has-crashed .fx-puff{animation:bootDust 1.6s ease-out both}
#bootScreen.has-crashed .boot-hubcap{animation:bootHubcap 1.7s linear both}
#bootScreen.has-crashed :is(.boot-progress,.boot-kicker){opacity:0}
#bootScreen.show-logo .car-steam i{animation:bootSteam 1.2s ease-out infinite}
#bootScreen.show-logo .boot-kicker{opacity:1;font:800 italic clamp(16px,2.6vw,22px)/1 Barlow,'Arial Narrow',sans-serif;letter-spacing:.14em;color:#ffad47;
  text-shadow:0 2px 0 rgba(0,0,0,.5);animation:bootStamp .3s cubic-bezier(.3,1.6,.5,1) both}
#bootScreen.is-leaving{opacity:0;pointer-events:none}
#bootScreen.is-leaving .boot-word{transition:transform .38s cubic-bezier(.5,0,.7,1);transform:var(--handoff,none)}
#bootScreen.is-leaving :is(.boot-car,.boot-table,.boot-hubcap,.boot-kicker){opacity:0;transition:opacity .2s}

@keyframes bootWheel{to{transform:rotate(360deg)}}
@keyframes bootRev{from{transform:translateY(0) rotate(0)}to{transform:translateY(-2px) rotate(-.8deg)}}
@keyframes bootPuff{0%{opacity:.9;transform:translate(0,0) scale(.4)}100%{opacity:0;transform:translate(calc(var(--dir) * 60%),-40%) scale(1.5)}}
@keyframes bootSmoke{0%{opacity:0;transform:translate(0,0) scale(.4)}12%{opacity:1}100%{opacity:0;transform:translate(calc(var(--dir) * 170%),-110%) scale(3.4)}}
@keyframes bootBurn{from{transform:rotate(calc(var(--dir,1) * -1.4deg)) translateY(0)}to{transform:rotate(calc(var(--dir,1) * 1.6deg)) translateY(-1.5px)}}
@keyframes bootLunge{0%,52%,100%{translate:0 0}66%{translate:calc(var(--dir,1) * 14%) 0}78%{translate:calc(var(--dir,1) * -4%) 0}88%{translate:calc(var(--dir,1) * 2%) 0}}
@keyframes bootSteam{0%{opacity:.8;transform:translateY(0) scale(.5)}100%{opacity:0;transform:translateY(-120%) scale(1.5)}}
@keyframes bootRattle{from{transform:rotate(-1.6deg)}to{transform:rotate(1.8deg) translateY(-1px)}}
@keyframes bootShake{12%{transform:translate(-9px,4px)}28%{transform:translate(8px,-3px)}46%{transform:translate(-5px,2px)}64%{transform:translate(3px,-1px)}82%{transform:translate(-1px,0)}}
@keyframes bootRecoil{0%{transform:rotate(-10deg) scale(.9,1.08) translateY(-8px)}40%{transform:rotate(4deg) translateY(-4px)}70%{transform:rotate(-2deg)}100%{transform:rotate(-4deg)}}
@keyframes bootRecoilR{0%{transform:rotate(11deg) scale(.9,1.08) translateY(-10px)}40%{transform:rotate(-4deg) translateY(-4px)}70%{transform:rotate(2deg)}100%{transform:rotate(4deg)}}
@keyframes bootGlow{0%{opacity:1;transform:scale(.4)}30%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.3)}}
@keyframes bootStar{0%{opacity:1;transform:scale(.1) rotate(0)}30%{opacity:1;transform:scale(1.15) rotate(8deg)}60%{opacity:.3}100%{opacity:0;transform:scale(1.6) rotate(14deg)}}
@keyframes bootSpark{0%{opacity:1;transform:rotate(var(--a)) translateX(calc(var(--b) * .4)) scaleX(.3)}60%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateX(calc(var(--b) * 2.1)) scaleX(1)}}
@keyframes bootChip{0%{opacity:1;transform:translate(0,0) rotate(0)}45%{opacity:1;transform:translate(calc(var(--dx) * var(--b)),calc(var(--dy) * var(--b))) rotate(calc(var(--r) * .5))}
  85%{opacity:1}100%{opacity:0;transform:translate(calc(var(--dx) * var(--b) * 1.35),calc(var(--b) * .5)) rotate(var(--r))}}
@keyframes bootDust{0%{opacity:0;transform:translate(0,0) scale(.3)}20%{opacity:.9}100%{opacity:0;transform:translate(calc(var(--dx) * var(--b)),calc(var(--b) * -.35)) scale(1.7)}}
@keyframes bootHubcap{
  0%{opacity:1;transform:translate(var(--x0),var(--y0)) rotate(0)}
  22%{transform:translate(calc(var(--x0) + (var(--x1) - var(--x0)) * .3),calc(var(--y0) - var(--b) * 1.6)) rotate(260deg)}
  42%{transform:translate(calc(var(--x0) + (var(--x1) - var(--x0)) * .55),var(--yf)) rotate(480deg)}
  54%{transform:translate(calc(var(--x0) + (var(--x1) - var(--x0)) * .68),calc(var(--yf) - var(--b) * .4)) rotate(600deg)}
  68%{transform:translate(calc(var(--x0) + (var(--x1) - var(--x0)) * .82),var(--yf)) rotate(720deg)}
  88%{opacity:1;transform:translate(var(--x1),var(--yf)) rotate(880deg)}
  100%{opacity:1;transform:translate(var(--x1),calc(var(--yf) + var(--b) * .1)) rotate(900deg) scaleY(.35)}}
@keyframes bootStamp{from{opacity:0;transform:scale(1.7) rotate(-2deg)}to{opacity:1;transform:scale(1) rotate(-2deg)}}

/* phone portrait: TABLE / TOP stack, the cars wait beside TOP */
@media(max-width:639px){
  #bootScreen{--b:min(64px,calc((100vw - 32px) / 6));--s:min(calc(var(--b) * .42),calc((100vw - 40px) / 14.05));--cw:min(calc(var(--b) * 1.15),72px);--tw:calc(100vw - 24px)}
  /* the cars' lane runs along the front of the table, under DEMOLITION DERBY */
  .boot-word{padding-bottom:calc(var(--b) * .42 + var(--cw) * .5)}
  .bw-big{flex-direction:column;align-items:center;gap:calc(var(--b) * .18)}
  .boot-progress{padding:14px 16px 12px}
  #bootPercent{font-size:34px}
}
/* short landscape phones: everything tighter, the kicker only as the final stamp */
@media(max-height:500px){
  #bootScreen{padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(10px,env(safe-area-inset-bottom))}
  .boot-kicker{display:none}
  #bootScreen.show-logo .boot-kicker{display:block;position:absolute;left:0;right:0;bottom:4px;margin:0}
  .boot-progress{width:min(440px,100%);margin-top:16px;padding:10px 16px 8px}
  .boot-power{margin-bottom:6px}
  #bootPercent{font-size:28px}
  #bootStage{margin:7px 0 2px}
  #bootRetry{min-height:38px;margin-top:8px}
}
@media(prefers-reduced-motion:reduce){
  #bootScreen,.boot-car,.boot-aim,#bootScreen.is-launching .boot-car,#bootScreen.has-crashed .boot-car,#bootScreen.is-leaving .boot-word{transition:none}
  .boot-wheel,.boot-car-body,.car-puffs i,#bootScreen.is-tense .bw-big i,#bootScreen.show-logo .car-steam i,#bootScreen.show-logo .boot-kicker{animation:none}
  #bootScreen.has-crashed :is(.boot-stage,.boot-car-body,.fx-glow,.fx-star,.fx-core,.fx-spark,.fx-chip,.fx-puff,.boot-hubcap){animation:none}
  #bootScreen.has-crashed .boot-car-body{transform:none}
  #bootScreen.is-ready .boot-car-body,#bootScreen.is-ready .boot-wheel{animation:none;translate:0 0}
  #bootScreen.is-leaving .boot-word{transform:none}
}

/* OB2: the first launch's "Tap to skip" (presentation/bootScreen.js), quiet, at the foot of the screen */
#bootScreen .boot-skip{position:absolute;left:0;right:0;bottom:max(14px,env(safe-area-inset-bottom));margin:0;text-align:center;font:600 12px/1 system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(214,226,250,.5);pointer-events:none}