/* Layout: full-bleed WebGL cabinet screen; HUD pinned to corners; menus are translucent panels over a live attract-mode race. Single dark arcade look. */
:root{
  --ink:#07060f; --panel:rgba(12,9,30,.82); --panel2:rgba(28,20,64,.9); --line:#3b2f78;
  --hot:#ff2e88; --hot-deep:#d4126a; --sun:#ffd23f; --cyan:#3be8ff; --txt:#f4f1ff; --dim:#c3bde8; --bad:#ff4b3a;
  --f-logo:'Racing Sans One', Impact, 'Arial Black', sans-serif;
  --f-pix:'Press Start 2P', ui-monospace, 'Courier New', monospace;
  --f-ui:'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
  --f-num:'Barlow Condensed', Impact, sans-serif; /* HUD race numbers, after Screamer's */
  --orange:#ff6b2c;
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%;margin:0;background:var(--ink);color:var(--txt);overflow:hidden;font-family:var(--f-ui);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;touch-action:manipulation;overscroll-behavior:none}
#gl,#hud,#touch{touch-action:none}
#app{position:fixed;inset:0;overflow:hidden;background:var(--ink)}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges}
.pixels #gl{image-rendering:pixelated}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
::selection{background:var(--hot);color:#fff}

/* ---------- screens */
.screen{position:absolute;left:0;top:0;width:calc(100% / var(--menu-ds,1));height:calc(100% / var(--menu-ds,1));zoom:calc(1 / var(--menu-ds,1));transform:scale(var(--menu-ds,1));transform-origin:0 0;filter:var(--menu-blur,none);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,2.4vh,22px);padding:calc(env(safe-area-inset-top,0px) + 16px) 16px calc(env(safe-area-inset-bottom,0px) + 16px);text-align:center;box-sizing:border-box}
/* .screen: the HUD's downscale trick (hudDownscale, hudBlur, set by gfx.js): laid out and drawn --menu-ds times
   smaller with zoom, scaled back up to fill the screen, then blurred. */
#title{background:radial-gradient(ellipse at 50% 60%,rgba(7,6,15,.15),rgba(7,6,15,.75))}
.logo{display:flex;align-items:flex-end;gap:.15em;transform:skewX(-8deg);line-height:.85}
.logo .l1{font-family:var(--f-logo);font-size:clamp(56px,14vw,168px);letter-spacing:.01em;background:linear-gradient(180deg,#fff 0%,#fff6c9 38%,var(--sun) 49%,var(--hot) 52%,#b3179b 78%,#3a0f6e 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #1a0833) drop-shadow(0 0 18px rgba(255,46,136,.35))}
.logo .l2{font-family:var(--f-pix);font-size:clamp(16px,3.4vw,40px);color:var(--ink);background:var(--sun);padding:.35em .4em .3em;margin-bottom:.55em;box-shadow:4px 4px 0 var(--hot)}
.tag{font-family:var(--f-pix);font-size:clamp(11px,1.5vw,14px);letter-spacing:.25em;color:var(--cyan);text-shadow:2px 2px 0 #000;margin:0}
#startBtn{font-family:var(--f-pix);font-size:clamp(12px,2.2vw,20px);color:var(--sun);padding:14px 22px;border:2px solid var(--sun);background:rgba(7,6,15,.72);box-shadow:4px 4px 0 var(--hot);text-shadow:2px 2px 0 #000}
#startBtn:active{transform:translate(2px,2px);box-shadow:none}
.blink{animation:blink 1s steps(2,end) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.blink{animation:none}}
.keys{font-family:var(--f-pix);font-size:clamp(9px,1.1vw,11px);line-height:2;color:var(--dim);text-shadow:2px 2px 0 #000,-1px -1px 0 #000;max-width:62ch;margin:0}
.has-touch .kbd-only,#app:not(.has-touch) .touch-only{display:none}
.legal{font-size:12px;color:var(--dim);max-width:60ch;margin:0}
#bootErr{font-family:var(--f-pix);font-size:11px;color:var(--bad);max-width:50ch;line-height:1.8}

/* ---------- select */
.opt,.go,.btn{font-family:var(--f-pix);font-size:12px;letter-spacing:.08em;padding:12px 14px;border:2px solid var(--line);background:var(--panel);line-height:1.4}
.opt b{color:var(--sun);font-weight:400}
.go,.btn.primary{background:var(--hot-deep);border-color:#ff8cc0;color:#fff;box-shadow:4px 4px 0 #5a0f3a;font-size:13px;padding:12px 22px}
.go:active,.btn:active{transform:translate(2px,2px);box-shadow:none}

/* ---------- race setup: three arcade screens over the attract race */
.defs{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1em;height:1em;fill:currentColor;vertical-align:-.12em}
#select{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;justify-items:stretch;align-items:stretch;gap:0;padding:0;text-align:left;
  background:linear-gradient(90deg,rgba(7,6,15,.94) 0%,rgba(7,6,15,.82) 34%,rgba(7,6,15,.28) 64%,rgba(7,6,15,.55) 100%)}
#select[data-step="1"]{background:radial-gradient(ellipse 60% 70% at 64% 52%,rgba(7,6,15,.62),rgba(7,6,15,.94) 78%)}
#select[data-step="2"]{background:rgba(7,6,15,.8)}

.rail{padding:calc(env(safe-area-inset-top,0px) + 14px) 20px 4px;display:flex;justify-content:center;background:linear-gradient(rgba(7,6,15,.85),rgba(7,6,15,0))}
.rail ol{display:flex;align-items:center;gap:0;margin:0;padding:0;list-style:none}
.rail li{display:flex;align-items:center}
.rail li+li::before{content:"";width:clamp(18px,5vw,64px);height:2px;background:var(--line);margin:0 10px}
.rail li.done+li::before,.rail li[aria-current]::before{background:var(--cyan)}
.rail button{font-family:var(--f-pix);font-size:11px;letter-spacing:.14em;color:#8c84b8;padding:8px 2px 10px;border-bottom:4px solid transparent}
.rail li.done button{color:var(--cyan)}
.rail li[aria-current] button{color:var(--sun);border-bottom-color:var(--hot)}

.stage{min-height:0;overflow:hidden auto;padding:clamp(12px,3vh,36px) clamp(16px,5vw,72px);scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.step{height:100%;box-sizing:border-box}
.step.in-fwd{animation:in-x .32s cubic-bezier(.16,1,.3,1)}
.step.in-back{animation:in-x-back .32s cubic-bezier(.16,1,.3,1)}
.pick-body.in-up{animation:in-y .26s cubic-bezier(.16,1,.3,1)}
.pick-body.in-down{animation:in-y-back .26s cubic-bezier(.16,1,.3,1)}
@keyframes in-x{from{transform:translateX(4vw);opacity:.3}}
@keyframes in-x-back{from{transform:translateX(-4vw);opacity:.3}}
@keyframes in-y{from{transform:translateY(.45em);clip-path:inset(0 0 60% 0)}}
@keyframes in-y-back{from{transform:translateY(-.45em);clip-path:inset(60% 0 0 0)}}
@media (prefers-reduced-motion:reduce){.step,.pick-body{animation:none!important}}

/* the chooser: arrows above and below the name say which way it turns */
.pick{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(8px,1.6vh,14px);min-width:0}
.pick-body{display:flex;flex-direction:column;gap:12px;min-width:0;max-width:100%}
.name{font-family:var(--f-logo);font-weight:400;font-size:clamp(40px,6.4vw,96px);line-height:.92;margin:0;letter-spacing:.005em;transform:skewX(-8deg);transform-origin:0 100%;color:var(--sun);text-shadow:4px 4px 0 var(--hot),8px 8px 0 rgba(0,0,0,.5);text-wrap:balance;overflow-wrap:anywhere}
.facts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:0;font-family:var(--f-pix);font-size:11px;letter-spacing:.1em;color:var(--txt);line-height:1.6}
.stars{display:inline-flex;gap:4px}.stars svg{width:14px;height:14px;fill:#3b2f78}.stars svg.on{fill:var(--sun)}
.blurb{text-wrap:pretty;margin:0;font-size:clamp(15px,1.35vw,18px);line-height:1.5;color:var(--dim);max-width:42ch}
.arrow{display:grid;place-items:center;width:44px;height:36px;color:var(--cyan);background:var(--panel);border:2px solid var(--line);transition:color .12s,border-color .12s}
.arrow svg{width:18px;height:18px;fill:currentColor}
.arrow:hover{color:var(--sun);border-color:var(--sun)}
.arrow:active{transform:translateY(2px)}

/* course screen */
.st-course{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-rows:minmax(0,1fr) auto;gap:clamp(16px,3vh,32px) clamp(20px,4vw,64px);align-items:center}
.recs{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:6px 34px;margin:6px 0 0}
.recs dt{grid-row:1;font-family:var(--f-pix);font-size:10px;letter-spacing:.14em;color:var(--cyan)}
.recs dd{grid-row:2;margin:0;font-family:var(--f-pix);font-size:clamp(12px,1.1vw,14px);color:var(--txt);font-variant-numeric:tabular-nums}
.map-wrap{position:relative;margin:0;justify-self:center;width:min(100%,46vh,440px);aspect-ratio:1;padding:14px;box-sizing:border-box;background:rgba(7,6,15,.62);
  /* bracketed corners, like the cabinet's course map */
  --b:linear-gradient(var(--cyan),var(--cyan));
  background-image:var(--b),var(--b),var(--b),var(--b),var(--b),var(--b),var(--b),var(--b);
  background-size:26px 3px,3px 26px,26px 3px,3px 26px,26px 3px,3px 26px,26px 3px,3px 26px;
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;background-repeat:no-repeat}
#trackMap{width:100%;height:100%;display:block;image-rendering:pixelated}
.map-wrap figcaption{position:absolute;right:18px;bottom:16px;font-family:var(--f-pix);font-size:11px;letter-spacing:.14em;color:var(--dim)}
.tod{grid-column:1/-1;display:flex;align-items:center;gap:10px}
.tod .arrow{flex:none;height:60px}
.tod-list{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:760px}
.tod-list button{display:flex;flex-direction:column;gap:8px;padding:8px 8px 10px;background:var(--panel);border:2px solid var(--line);font-family:var(--f-pix);font-size:11px;letter-spacing:.12em;color:#8c84b8;text-align:left}
.tod-list button i{display:block;height:22px;opacity:.7;background:radial-gradient(circle 4px at var(--ox) var(--oy),var(--orb) 0 3px,transparent 4px),linear-gradient(transparent 76%,#07060f 76%),var(--sky);image-rendering:pixelated}
.tod-list button[aria-checked="true"]{border-color:var(--sun);color:var(--sun);background:var(--panel2);box-shadow:4px 4px 0 rgba(0,0,0,.5)}
.tod-list button[aria-checked="true"] i{opacity:1}
.tod-list button:hover{color:var(--txt);border-color:#6b5bd0}

/* machine screen */
.st-car{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:clamp(16px,3vw,48px)}
.st-car .pick{grid-column:1;grid-row:1}
#carView{grid-column:2;grid-row:1;width:100%;height:min(100%,62vh);min-height:260px;display:block;image-rendering:pixelated}
.clean #carView{image-rendering:auto}
.st-car .sw{width:16px;height:16px;border:3px solid;box-sizing:border-box}
.st-car .count{color:var(--dim)}
.stats{display:grid;grid-template-columns:auto minmax(0,260px);gap:7px 14px;align-items:center;margin-top:4px}
.stats i{font-style:normal;font-family:var(--f-pix);font-size:10px;color:var(--dim);letter-spacing:.12em}
.bar{display:flex;gap:3px}.bar u{flex:1;height:9px;background:#241d49;text-decoration:none}.bar u.on{background:var(--cyan)}.bar u.on.hi{background:var(--hot)}

/* race screen */
.st-race{display:flex;flex-direction:column;align-items:center;justify-content:center;height:auto;min-height:100%;gap:clamp(14px,3vh,28px);max-width:820px;margin:0 auto}
.rows{display:flex;flex-direction:column;gap:12px;width:100%}
.row{display:grid;grid-template-columns:minmax(120px,auto) 1fr;align-items:center;gap:10px 22px;padding:16px 18px;background:var(--panel);border:2px solid var(--line)}
.row.on{border-color:var(--sun);background:var(--panel2)}
.row .label{font-family:var(--f-pix);font-size:11px;letter-spacing:.14em;color:var(--cyan)}
.row.on .label{color:var(--sun)}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choices button{font-family:var(--f-pix);font-size:clamp(11px,1.2vw,14px);letter-spacing:.1em;padding:12px 16px;border:2px solid var(--line);color:#8c84b8;background:rgba(7,6,15,.6)}
.choices button[aria-checked="true"]{background:var(--sun);border-color:var(--sun);color:var(--ink)}
.row-tip{text-wrap:pretty;grid-column:2;margin:0;font-size:15px;line-height:1.45;color:var(--dim)}
.summary{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;font-family:var(--f-pix);letter-spacing:.1em}
.plate{display:flex;flex-direction:column;gap:6px;padding:8px 12px;border:1px solid var(--line);background:rgba(7,6,15,.7)}
.plate i{font-style:normal;font-size:10px;color:var(--cyan)}
.plate b{font-weight:400;font-size:11px;color:var(--txt)}
.extras{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.extras .opt{font-size:11px;padding:10px 12px}
.display-help{flex-basis:100%;margin:2px 0 0;font-size:13px;line-height:1.4;color:var(--dim);text-align:center}

/* footer: back, what the controls do, next */
.sel-foot{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px clamp(12px,3vw,40px);padding:12px clamp(16px,5vw,72px) calc(env(safe-area-inset-bottom,0px) + 14px);background:rgba(7,6,15,.9);border-top:1px solid var(--line)}
.legend{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;text-align:center}
.tip{text-wrap:pretty;margin:0;font-size:15px;line-height:1.45;color:var(--txt);max-width:70ch}
.link{color:var(--sun);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;padding:0}
.keys-line{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;margin:0;font-family:var(--f-pix);font-size:10px;letter-spacing:.1em;color:var(--dim);line-height:2}
.keys-line kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;margin-right:4px;box-sizing:border-box;font:inherit;font-size:9px;color:var(--txt);background:#1c1640;border:1px solid #5a4fa8;border-bottom-width:3px}
.keys-line kbd .ic{width:10px;height:10px}
.keys-line .pad{color:#8c84b8}
.nav-btn{display:flex;align-items:center;gap:10px;font-family:var(--f-pix);font-size:12px;letter-spacing:.1em;padding:14px 18px;border:2px solid var(--line);background:var(--panel)}
.nav-btn svg{width:14px;height:14px;fill:currentColor}
.nav-btn.next{background:var(--hot-deep);border-color:#ff8cc0;color:#fff;box-shadow:4px 4px 0 #5a0f3a;padding:14px 22px}
.nav-btn:active{transform:translate(2px,2px);box-shadow:none}
.has-touch .keys-line kbd{display:none}

@media (max-width:760px),(max-aspect-ratio:1/1){
  #select{background:rgba(7,6,15,.72)}
  .st-course{grid-template-columns:1fr;grid-template-rows:auto auto auto;align-items:start}
  .map-wrap{width:min(62vw,26vh,300px);grid-row:2;padding:10px}
  .tod{grid-row:3}
  .recs{display:none}
  .st-car{grid-template-columns:1fr;grid-template-rows:minmax(220px,42vh) auto}
  .st-car .pick{grid-row:2}
  #carView{grid-column:1;grid-row:1;height:100%;min-height:0}
  .row{grid-template-columns:1fr}.row-tip{grid-column:1}
  .keys-line .pad{display:none}
}
@media (max-width:560px){
  .choices{gap:6px}.choices button{padding:12px 9px} /* four weathers on one line at 360px */
  .sel-foot{grid-template-columns:1fr 1fr}
  .legend{grid-column:1/-1;grid-row:1}
  .nav-btn{justify-content:center}
  .tod .arrow{display:none}
  .tod-list{gap:6px}.tod-list button{padding:6px 5px 8px;font-size:10px;letter-spacing:.04em}.tod-list button i{height:16px}
  .tip{font-size:13px}
}
@media (max-height:500px) and (min-aspect-ratio:1/1){
  .rail{padding-top:calc(env(safe-area-inset-top,0px) + 6px)}.rail button{padding:4px 2px 6px}
  .stage{padding:8px 24px}
  .name{font-size:clamp(28px,5vw,48px)}
  .blurb,.recs{display:none}
  .row{grid-template-columns:auto auto minmax(0,1fr);gap:8px 16px}.row-tip{grid-column:3;font-size:12px}
  .map-wrap{width:min(100%,52vh)}
  .tod .arrow{height:44px}.tod-list button{padding:6px}
  .row{padding:8px 12px}
  .sel-foot{padding-top:6px;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 6px)}.tip{font-size:12px}.legend{gap:2px}
  .extras .display-help{display:none}
  .nav-btn{padding:10px 14px}
}

/* ---------- HUD */
/* The race HUD is a canvas (hudcanvas.js), drawn inside the CRT pass, or here over the race when hudInCRT is
   off (gfx.js hides #hud in the CRT case and sets its blur). */
#hud{position:absolute;inset:0;pointer-events:none}
#hud .hud-canvas{position:absolute;inset:0;width:100%;height:100%}

/* ---------- panels */
.panel{background:var(--panel);border:2px solid var(--line);padding:22px clamp(16px,4vw,36px);display:flex;flex-direction:column;gap:14px;align-items:center;max-width:min(560px,100%);box-sizing:border-box;box-shadow:8px 8px 0 rgba(0,0,0,.45)}
.panel h2{font-family:var(--f-logo);font-weight:400;font-size:clamp(40px,8vw,84px);margin:0;transform:skewX(-8deg);color:var(--sun);text-shadow:4px 4px 0 var(--hot);line-height:1}
.panel .row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
#resTable{border-collapse:collapse;font-family:var(--f-pix);font-size:11px;line-height:1;width:100%;font-variant-numeric:tabular-nums}
#resTable td{padding:6px 6px;text-align:left;border-bottom:1px solid #2a2350}
#resTable td:last-child{text-align:right}
#resTable tr.me td{color:var(--sun)}
.resStats{display:grid;grid-template-columns:auto auto;gap:8px 18px;font-family:var(--f-pix);font-size:12px;text-align:left}
.resStats span{color:var(--dim)}.resStats .rec{color:var(--hot)}
/* the boot loading bar (progress.js) and the busy bar of a course build (ui.js withLoading): the stat bars' segments,
   9px lit cyan, 3px gaps, unlit #241d49 */
#boot{display:grid;justify-items:center;gap:12px;--seg:0}
#boot .bar{position:relative;width:285px;max-width:calc(100vw - 48px);height:12px;padding:4px;border:2px solid var(--line);background:rgba(7,6,15,.72);box-shadow:4px 4px 0 rgba(255,46,136,.35)}
#boot .bar,#loading>i{background-image:repeating-linear-gradient(90deg,#241d49 0 9px,transparent 9px 12px);background-origin:content-box;background-clip:content-box}
#boot .bar>i{position:absolute;left:4px;top:4px;bottom:4px;width:min(calc(var(--seg) * 12px - 3px),calc(100% - 8px));background:repeating-linear-gradient(90deg,var(--cyan) 0 9px,transparent 9px 12px)}
#boot p{margin:0;font-family:var(--f-pix);font-size:10px;line-height:1.6}
#boot b{font-weight:normal;color:var(--cyan)}
#boot span{color:var(--txt)}
#loading{position:absolute;right:16px;top:calc(env(safe-area-inset-top,0px) + 14px);display:grid;justify-items:end;gap:6px;font-family:var(--f-pix);font-size:9px;color:var(--cyan)}
#loading>i{position:relative;display:block;width:93px;height:6px;padding:3px;border:2px solid var(--line);background-color:rgba(7,6,15,.72);overflow:hidden}
#loading>i>i{position:absolute;left:3px;top:3px;width:21px;height:6px;background:repeating-linear-gradient(90deg,var(--cyan) 0 9px,transparent 9px 12px);will-change:transform;animation:busy 1.1s steps(7,end) infinite}
@keyframes busy{from{transform:translateX(0)}to{transform:translateX(84px)}}
@media (prefers-reduced-motion:reduce){#loading>i>i{animation:none;width:93px;opacity:.5}}

/* ---------- touch */
#touch{position:absolute;inset:0;pointer-events:none}
#touch button{pointer-events:auto;position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);width:clamp(64px,18vmin,110px);height:clamp(64px,18vmin,110px);border-radius:50%;background:rgba(20,14,50,.45);border:2px solid rgba(255,255,255,.35);font-family:var(--f-pix);font-size:12px;color:#fff;touch-action:none}
#touch button.on{background:rgba(255,46,136,.55)}
#tL,#tR{font-size:22px!important}
#tL{left:16px}#tR{left:calc(28px + clamp(64px,18vmin,110px))}
#tG{right:16px}#tB{right:calc(28px + clamp(64px,18vmin,110px))}
#tP{top:calc(env(safe-area-inset-top,0px) + 70px);bottom:auto!important;right:16px;width:48px!important;height:48px!important;font-size:12px!important}
.tilt #tL,.tilt #tR{display:none}
.tilt #tB{left:16px;right:auto}
#rotate{position:absolute;left:0;right:0;bottom:45%;text-align:center;font-family:var(--f-pix);font-size:11px;line-height:2;color:var(--sun);text-shadow:2px 2px 0 #000;pointer-events:none}
#rotate small{font-size:9px;color:var(--txt)}
@media (orientation:landscape){#rotate{display:none}}

/* Keep race choices in their own scroll area, clear of the action bar. */

.keys,.legal{background:rgba(7,6,15,.92);padding:8px 12px;border-radius:3px}
.control-help{margin:0;font-size:15px;line-height:1.6;color:var(--txt)}
.gamepad-help{font-family:var(--f-ui);font-size:13px;line-height:1.5}
#pause{background:rgba(7,6,15,.65);overflow-y:auto}
#pause .panel{background:var(--ink)}
#touch button{width:clamp(52px,13vmin,82px);height:clamp(52px,13vmin,82px);background:rgba(7,6,15,.8);font-size:10px}
#tR{left:calc(24px + clamp(52px,13vmin,82px))}
#tB{right:calc(24px + clamp(52px,13vmin,82px))}
#touch #tH{right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 28px + clamp(52px,13vmin,82px));width:44px;height:44px}
#touch #tDown,#touch #tUp{width:44px;height:44px;bottom:calc(env(safe-area-inset-bottom,0px) + 28px + clamp(52px,13vmin,82px))}
#tDown{left:16px}#tUp{left:68px}
#app:not(.manual) #tDown,#app:not(.manual) #tUp{display:none}
@media (max-height:500px){
  #title{gap:8px}.logo .l1{font-size:70px}.logo .l2{font-size:20px}
  #title .keys,#title .legal{font-size:10px;padding:4px 8px}
  #pause{justify-content:flex-start}.control-help{font-size:12px}
}
@media (max-height:500px){
  #touch #tH{top:calc(env(safe-area-inset-top,0px) + 126px);bottom:auto}
}

/* Boot leader (js/leader.js): black over everything until its scene runs, which then removes it. The fade is only a
   failsafe for a page whose scripts never run; the opacity part runs on the compositor, apart from the visibility step. */
#leader{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:2147483000;background:#000;touch-action:none;
  animation:leader-out .3s linear 8s forwards,leader-gone 0s 8.3s forwards}
@keyframes leader-out{to{opacity:0}}
@keyframes leader-gone{to{visibility:hidden}}