/* Bunker Mode, DOWN BAD: the page over the run's picture. THE HEADS UP stays light (no panels): the score big at the top, the depth,
   the time and three hard hats top left, coins top right, the speedometer at the foot; every number in a box of its own width, so
   nothing moves as it counts; the count, the pickups' words and the stage's card; the thumbs' keys on a touch screen; the full
   screen key; the SOUND panel (runner/audio.js, the old one panel's look, .modal). Every screen but the run is THE MONITOR,
   runner/monitor.css. Nothing scrolls or zooms. */
:root{--px:2px;--pad:14px;--lime:#45f08e;--ink:#0a0a0a}
@media (min-resolution:2dppx) and (min-width:1100px),(-webkit-min-device-pixel-ratio:2) and (min-width:1100px){:root{--px:2.5px}}
@media (min-width:1800px){:root{--px:3px}}
html,body{margin:0;height:100%;background:var(--ink);color:#ececec;overflow:hidden;overscroll-behavior:none;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
body{font:13px/1.4 var(--mono)}
[hidden]{display:none!important}
/* THE LOADING SCREEN (runner.html #load, its script there): the page's black over everything, the word and the bar on one canvas
   laid on whole device px by that script; it fades off in a quarter second once the bar is full (a plain swap under reduced motion) */
#load{position:fixed;inset:0;z-index:2147483000;background:var(--ink);touch-action:none}
#load canvas{position:absolute;left:0;top:0;display:block;image-rendering:pixelated}
#load.out{opacity:0;transition:opacity .25s ease-out;pointer-events:none}
@media (prefers-reduced-motion:reduce){#load.out{transition:none}}
#view{position:fixed;left:0;top:0;display:block}
#play{position:fixed;inset:0;touch-action:none}
#lvh{position:fixed;left:0;top:0;width:0;height:100vh;height:100lvh;visibility:hidden;pointer-events:none}
/* ---------- the heads up ---------- */
#hud{position:fixed;inset:0;pointer-events:none;font-family:var(--mono);font-variant-numeric:tabular-nums;text-shadow:0 2px 0 var(--ink)}
#hud .tl{position:absolute;left:calc(var(--pad) + env(safe-area-inset-left));top:calc(var(--pad) + env(safe-area-inset-top));display:flex;flex-direction:column;align-items:flex-start}
#hud .tr{position:absolute;right:calc(var(--pad) + 52px + env(safe-area-inset-right));top:calc(var(--pad) + env(safe-area-inset-top));text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
#hud .tc{position:absolute;left:50%;top:calc(8px + env(safe-area-inset-top));transform:translateX(-50%);text-align:center;white-space:nowrap}
.dep{font:700 22px/1 var(--mono);min-width:6ch}
.dep i{font-style:normal;font-size:12px;margin-left:5px;color:#8b8b8b}
/* THE STAGE YOU ARE IN (the owner, Thu 22 Oct: "the screen should tell me where i am", "drain etc", "somewhere the label of each
   stage"): its name right under the metres, the depth in words, in the heads up's own mono; one box as wide as the longest name
   (THE BASEMENTS, 13 letters, every letter of the mono one width) and one line high, so a new name never resizes it or moves
   anything; on a phone it drops under the hard hats, clear of the score's rows (below). The heads up's ink drop with a one px ink
   edge round the letters, so a name reads on DMT's white eyes and the Drain's amber tape too */
#hStage{--ls:.08em;font:700 15px/1 var(--mono);letter-spacing:var(--ls);color:#ececec;margin-top:8px;width:calc(13ch + 13 * var(--ls));height:15px;white-space:nowrap;
  text-shadow:1px 0 0 var(--ink),-1px 0 0 var(--ink),0 -1px 0 var(--ink),0 1px 0 var(--ink),0 2px 0 var(--ink)}
#hTime{font:400 13px/1 var(--mono);color:#a8a7a7;margin-top:6px;min-width:7ch}
#hHits{display:flex;gap:var(--hg,6px);margin-top:9px}
#hHits span{display:block;width:var(--hw,28px);height:var(--hh,20px)}
#hHits canvas{display:block;width:var(--hw,28px);height:var(--hh,20px);image-rendering:pixelated}
#hHits span.crack{animation:hatoff .65s steps(8) 1 forwards}
#hHits span.pop{animation:hatpop .35s steps(4) 1}
#hHits span.off{visibility:hidden}
#hHits.two{flex-wrap:wrap}
@keyframes hatoff{0%{transform:none}25%{transform:translateY(-8px) rotate(-20deg)}100%{transform:translate(-6px,46px) rotate(-200deg);opacity:0}}
@keyframes hatpop{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:none}}
#hBest{font:400 11px/1 var(--mono);color:#8b8b8b;letter-spacing:.06em;min-height:11px}
.sc{position:relative;display:inline-block;font:700 34px/1.1 var(--mono);color:#ececec}
#hScore{display:inline-block;min-width:4ch}
/* the combo hangs off the score's right edge, so the digits sit centred over the BUNKER letters (the owner, Wed 21 Oct: "make sure
   its centered with digits above it") */
#hMult{position:absolute;left:100%;top:0;margin-left:4px;font-size:18px;color:#ffb000;text-align:left}
#hWord{display:flex;gap:4px;justify-content:center;margin-top:6px;font:400 14px/1 var(--display)}
#hWord i{font-style:normal;color:#3b4248;width:14px;text-align:center}
#hWord i.on{color:#ffb000}
#hCoinsW{display:inline-flex;align-items:center;gap:6px;font:700 16px/1 var(--mono)}
#hCoins{min-width:3ch;text-align:left}
canvas.ic-coin{width:10px;height:12px;image-rendering:pixelated}
canvas.ic-crate{width:12px;height:10px;image-rendering:pixelated}
canvas.ic-paint{width:12px;height:14px;image-rendering:pixelated}
/* a power up's picture, a lime ring round it draining as it runs out */
/* star power: the star, a gold ring draining round it */
#hStar{position:relative;width:32px;height:32px;--f:1;margin-top:10px}
#hStar canvas{position:absolute;left:0;top:0;width:32px;height:32px;image-rendering:pixelated}
#hStar::after{content:"";position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(#ffb000 calc(var(--f) * 360deg),#272b34 0);
  -webkit-mask:radial-gradient(circle,transparent 18px,#000 19px);mask:radial-gradient(circle,transparent 18px,#000 19px)}
#hPu{position:relative;width:32px;height:32px;--f:1}
#hPu canvas{position:absolute;left:0;top:0;width:32px;height:32px;image-rendering:pixelated}
#hPu::after{content:"";position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(var(--lime) calc(var(--f) * 360deg),#272b34 0);
  -webkit-mask:radial-gradient(circle,transparent 18px,#000 19px);mask:radial-gradient(circle,transparent 18px,#000 19px)}
/* the magnet's last second: its ring off and on, as its field round the ride */
#hPu.end{animation:puend .14s steps(1) infinite}
@keyframes puend{50%{opacity:.15}}
#meter{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));width:132px;height:6px;margin-left:-68px;border:2px solid #242424;background:rgba(10,10,10,.7)}
#meter i{position:absolute;inset:0;background:#8b8b8b;transform-origin:0 50%;transform:scaleX(0)}
#meter.on i{background:var(--lime)}
/* something coming after you: its word in the AI's red over the speed bar, a bar of how near */
#hRear{position:absolute;left:50%;bottom:calc(68px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;--n:0}
#hRear b{font:400 calc(var(--px) * 7)/1 var(--display);color:#ff4d3d;text-shadow:0 var(--px) 0 #0a0a0a;animation:pulse .5s steps(2) infinite}
#hRear i{display:block;width:96px;height:4px;border-radius:2px;overflow:hidden;background:rgba(255,77,61,.22)}
#hRear i::after{content:"";display:block;height:100%;width:calc(var(--n) * 100%);background:#ff4d3d}
/* the first time THE ENTITIES come (runner/stages/elf.js): their word in their magenta */
#hRear.elf b{color:#d62898}
#hRear.elf i{background:rgba(214,40,152,.22)}
#hRear.elf i::after{background:#d62898}
.pulse{animation:pulse .22s steps(2) 1}
@keyframes pulse{50%{filter:brightness(1.8)}}
/* ================= THE PANEL: one for every modal (the title, pause, and after a crash the continue's offer and its pay ask, one
   panel whose content changes; the end screen after it lies on the wrapper). The full screen key's language made big: a soft dark translucent rounded square, no
   frame, rivets, steel or lamp; quiet grey labels, near white values, amber for the primary key and what is yours. ONE SIZE A SCREEN,
   placed over the car's rear window, never on it (--gl, about where runner/car.js finds the glass's top on a screen of that shape:
   a computer and a phone on its side, the camera's wide view; a phone upright, its tall one; car.clearCard still moves the end
   panel off the glass wherever the guess is out). Inside, its own grid: the heading, the content, the keys at its foot (the primary
   and under it the secondary, each in its own place whatever the content), the sizes from the panel's own (container units) ====== */
:root{--vh:1vh}
@supports (height:1lvh){:root{--vh:1lvh}}
.modal{--mt:12px;--gl:calc(86.5 * var(--vh) - 24.7vw);--mw:clamp(440px,44vw,860px);--mh:clamp(300px,calc(var(--gl) - 12px - var(--mt)),560px);
  --pad:24px;--hd:32px;--k1h:62px;--k1w:min(400px,100%);--k1f:20px;--k2h:44px;--gap:14px;--bigh:21cqh;--bigw:11cqw;
  position:fixed;z-index:102;left:50%;top:calc(var(--mt) + var(--mh) / 2);transform:translate(-50%,-50%);width:var(--mw);height:var(--mh);box-sizing:border-box;
  padding:var(--pad);border-radius:14px;background:rgba(10,10,10,.8);color:#ececec;text-align:center;pointer-events:none;container-type:size;
  font:400 15px/1.35 var(--plain);text-shadow:none}
/* a pixel panel (the owner, Wed 21 Oct: "not so see through", then "maybe see through was better", "we need some way to make it match
   with pixel game"): the glass stays see through; its frame is drawn in pixels the size of the heading's (--p, a Silkscreen pixel):
   corners stepped, a dark outer line and a light inner one that stop at the steps, the top row lit and the foot in shadow, a dotted
   pixel rule under the heading and an amber pixel bracket in each corner */
.modal{--p:calc(var(--hd) / 8);border-radius:0;background:rgba(10,10,10,.95);
  clip-path:polygon(0 calc(var(--p) * 2),var(--p) calc(var(--p) * 2),var(--p) var(--p),calc(var(--p) * 2) var(--p),calc(var(--p) * 2) 0,
    calc(100% - var(--p) * 2) 0,calc(100% - var(--p) * 2) var(--p),calc(100% - var(--p)) var(--p),calc(100% - var(--p)) calc(var(--p) * 2),100% calc(var(--p) * 2),
    100% calc(100% - var(--p) * 2),calc(100% - var(--p)) calc(100% - var(--p) * 2),calc(100% - var(--p)) calc(100% - var(--p)),calc(100% - var(--p) * 2) calc(100% - var(--p)),calc(100% - var(--p) * 2) 100%,
    calc(var(--p) * 2) 100%,calc(var(--p) * 2) calc(100% - var(--p)),var(--p) calc(100% - var(--p)),var(--p) calc(100% - var(--p) * 2),0 calc(100% - var(--p) * 2));
  box-shadow:inset 0 0 0 var(--p) #050505,inset 0 0 0 calc(var(--p) * 2) rgba(236,236,236,.16),
    inset 0 calc(var(--p) * 3) 0 calc(var(--p) * -1) rgba(236,236,236,.07),inset 0 calc(var(--p) * -3) 0 calc(var(--p) * -1) rgba(0,0,0,.35)}
.modal::before{content:"";position:absolute;left:calc(var(--p) * 4);right:calc(var(--p) * 4);top:calc(var(--pad) + var(--hd) + var(--gap) / 2 - var(--p));
  height:var(--p);pointer-events:none;background:repeating-linear-gradient(90deg,rgba(236,236,236,.22) 0 var(--p),transparent var(--p) calc(var(--p) * 2))}
.modal::after{content:"";position:absolute;inset:calc(var(--p) * 3);pointer-events:none;--a:#ffb000;--l:calc(var(--p) * 3);
  background:linear-gradient(var(--a),var(--a)) left top/var(--l) var(--p) no-repeat,linear-gradient(var(--a),var(--a)) left top/var(--p) var(--l) no-repeat,
    linear-gradient(var(--a),var(--a)) right top/var(--l) var(--p) no-repeat,linear-gradient(var(--a),var(--a)) right top/var(--p) var(--l) no-repeat,
    linear-gradient(var(--a),var(--a)) left bottom/var(--l) var(--p) no-repeat,linear-gradient(var(--a),var(--a)) left bottom/var(--p) var(--l) no-repeat,
    linear-gradient(var(--a),var(--a)) right bottom/var(--l) var(--p) no-repeat,linear-gradient(var(--a),var(--a)) right bottom/var(--p) var(--l) no-repeat}
/* the panel's keys in the same pixels: square corners with one pixel step, the amber key lit along its top row and shaded along its foot */
.modal .k1,.modal .k2,.modal .ik{border-radius:0;
  clip-path:polygon(0 var(--p),var(--p) var(--p),var(--p) 0,calc(100% - var(--p)) 0,calc(100% - var(--p)) var(--p),100% var(--p),100% calc(100% - var(--p)),
    calc(100% - var(--p)) calc(100% - var(--p)),calc(100% - var(--p)) 100%,var(--p) 100%,var(--p) calc(100% - var(--p)),0 calc(100% - var(--p)))}
.modal .k1{box-shadow:inset 0 var(--p) 0 rgba(255,255,255,.38),inset 0 calc(var(--p) * -1) 0 rgba(120,60,0,.35)}
/* an upright screen: the panel the screen's width less a gutter, under the full screen key */
@media (max-aspect-ratio:10/11){.modal{--gl:calc(78.4 * var(--vh) - 30.6vw);--mw:min(calc(100vw - 24px),600px);--pad:20px;--hd:24px;--k1h:60px;--k1w:100%;--k1f:18px;--gap:14px;--bigh:13cqh;--bigw:20cqw}}
@media (max-aspect-ratio:10/11) and (max-width:640px){.modal{--mt:calc(66px + env(safe-area-inset-top))}}
/* a phone on its side: the car fills the middle, so the panel stands beside it on the left, clear of the sound key under it */
/* a short laptop screen (1366 by 768, 1280 by 800): the room over the car is too low, so the panel stands beside it on the left, in
   the middle of the height, laid out as a phone's */
@media (min-aspect-ratio:10/11) and (max-height:860px),(min-aspect-ratio:17/10) and (max-height:920px){.modal{--mw:min(calc(31vw - 36px),440px);
  --mh:min(calc(var(--mw) * 1.3),calc(100 * var(--vh) - 120px));--mt:calc((100 * var(--vh) - var(--mh)) / 2);--pad:20px;--hd:24px;--k1h:56px;--k1w:100%;--k1f:18px;--gap:14px;
  --bigh:13cqh;--bigw:20cqw;left:calc(24px + env(safe-area-inset-left) + var(--mw) / 2)}}
/* a very wide screen (21:9): the car stands taller than the room over it, and there is room beside it, so the panel stands on the
   left of it, in the middle of the height */
@media (min-aspect-ratio:2/1) and (min-height:521px){.modal{--mw:min(calc(30vw - 36px),860px);--mh:min(calc(var(--mw) * .58),calc(100 * var(--vh) - 120px));
  --mt:calc((100 * var(--vh) - var(--mh)) / 2);left:calc(24px + env(safe-area-inset-left) + var(--mw) / 2)}}
@media (max-height:520px) and (min-aspect-ratio:10/11){.modal{--mt:calc(10px + env(safe-area-inset-top));--mw:clamp(200px,calc(30vw - 22px),340px);
  --mh:calc(100 * var(--vh) - var(--mt) - 74px - env(safe-area-inset-bottom));--pad:14px;--hd:16px;--k1h:48px;--k1w:100%;--k1f:15px;--gap:10px;
  left:calc(max(12px,env(safe-area-inset-left)) + var(--mw) / 2)}}
/* every panel in the middle of the screen, across and down, wherever the ride is (the owner, Wed 21 Oct: "i think we need to just
   center the modal", "reguardless of where the car is", "centered top to bottom left to right"; before, its foot sat just above the
   tail lights); the sizes above pick its width and its height, one size a screen, so it never moves or changes size */
.modal{height:var(--mh);left:50%;top:calc(50 * var(--vh))}
.modal[hidden]{display:none}
/* (the panels show once their place is set, runner/main.js placeTail, so none ever shows anywhere else first) */
html:not(.placed) .modal{visibility:hidden;opacity:0}
/* a panel comes in where it stands at its own size (the owner, Wed 21 Oct: "can NEVER change or move"): it only fades in */
.modal{animation:pin .2s ease-out 1}
@keyframes pin{0%{opacity:0}100%{opacity:1}}
/* a content: the heading, what it holds, the keys */
.mg{display:grid;grid-template-rows:auto minmax(0,1fr) auto;justify-items:center;min-height:0}
@keyframes cin{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.modal{animation:none}}
.hd{grid-area:hd;margin:0 0 var(--gap);font:400 var(--hd)/1 var(--display);color:#ececec;letter-spacing:.02em;white-space:nowrap}
/* the title's heading is DOWN BAD's wordmark (assets/downbad-mark.js, laid by runner/main.js placeMark): its words keep the heading's
   box, unseen, the mark over them */
.hd.mk{position:relative;color:transparent}
#hdMark{position:absolute;left:0;top:0;width:0;height:0;image-rendering:pixelated;pointer-events:none}
.mg .bd{align-self:stretch;justify-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;min-width:0}
.mg .ft{grid-area:ft;display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;margin-top:var(--gap);height:calc(var(--k1h) + 8px + var(--k2h))}
.mg{grid-template-areas:"hd" "bd" "ft"}
.mg .bd{grid-area:bd}
/* THE KEYS: the primary flat amber with dark letters, the secondary a soft dark square, grey turning amber; 44 px or more */
.k1,.k2,.ik{-webkit-appearance:none;appearance:none;margin:0;border:0;cursor:pointer;pointer-events:auto;box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.k1{display:inline-flex;align-items:center;justify-content:center;gap:.9em;flex:none;width:var(--k1w);height:var(--k1h);padding:0 24px;border-radius:10px;
  background:#ffb000;color:#0a0a0a;font:700 var(--k1f)/1 var(--plain);letter-spacing:.14em;text-indent:.14em;text-transform:uppercase;transition:background-color .12s}
.k1:hover{background:#ffc233}
.k1:active{background:#e49e01}
.k1:focus-visible{outline:none}
.k2{display:inline-flex;align-items:center;justify-content:center;flex:none;height:var(--k2h);min-width:min(200px,100%);padding:0 22px;border-radius:8px;
  background:rgba(255,255,255,.06);color:#8b8b8b;font:500 15px/1 var(--plain);transition:color .12s,background-color .12s}
.k2:hover,.k2:focus-visible{color:#ffb000;background:rgba(255,255,255,.1);outline:none}
/* a line in the secondary's place (the title's how to) */
.k2t{display:flex;align-items:center;justify-content:center;height:var(--k2h);margin:0;font:400 14px/1.3 var(--plain);color:#8b8b8b}
/* an icon key, the full screen key's own: a clean vector icon, quiet grey on a soft square, amber under a mouse or a key */
.ik{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;border-radius:8px;background:rgba(255,255,255,.06);color:#8b8b8b;transition:color .12s,background-color .12s}
.ik:hover,.ik:focus-visible{color:#ffb000;background:rgba(255,255,255,.1);outline:none}
.ik svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:square;stroke-linejoin:miter}
/* the big number (pause's) and the depth and time under it */
.big{font:400 clamp(36px,min(var(--bigh),var(--bigw)),104px)/1 var(--display);color:#ececec;white-space:nowrap;font-variant-numeric:tabular-nums}
/* (the display letters crisp: a whole number of CSS px a letter px, so whole device px on every screen) */
.big{font-size:round(down,clamp(40px,min(var(--bigh),var(--bigw)),104px),8px)}
.modal .dt{display:flex;justify-content:center;gap:1.2em;margin-top:12px;font:400 18px/1 var(--mono);color:#a8a7a7;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- THE TERMS AND THE PRIVACY POLICY (runner/legal-modal.js, the words runner/legal.js; the owner, Thu 22 Oct: "terms and
   privacy should be downbad game specific, and on a modal on top of cover screen"): the game's one panel (.modal above: its glass,
   its pixel frame, the dotted rule, the amber brackets, the stepped key) over the dimmed monitor, in the middle of the screen at a
   reading size (roomier than the run's: 720 by up to 800 on a computer, on a phone held upright the game's panel's own width (the
   screen less 12 px a side) and the screen's height less 16 px a side, up to 640 wide on a phone on its side; the one panel in the game not at the game's panel size, on purpose, as at that size it
   would show about 8 lines of the words), ONE SIZE A SCREEN: its tab and its words never move or resize it, they scroll inside it;
   on a phone its height is the small viewport's (the bars shown), so the bars never move it. Its heading is its two tabs, the one
   you read near white, the other grey (amber under a mouse or a key); the words in the plain sans, left aligned in a column of a
   comfortable measure, section heads in the mono; a placeholder for counsel marked in amber ---------- */
:root{--svh:1vh}
@supports (height:1svh){:root{--svh:1svh}}
#lgVeil{position:fixed;inset:0;z-index:101;touch-action:none}
#legal{--mw:min(720px,calc(100vw - 48px));--mh:min(800px,calc(100 * var(--svh) - 64px));--pad:28px;--hd:32px;--gap:18px;
  z-index:103;top:calc(50 * var(--svh));width:var(--mw);height:var(--mh);pointer-events:auto;display:grid;grid-template-rows:auto minmax(0,1fr) auto;text-align:left;outline:none}
html:not(.placed) #legal{visibility:visible;opacity:1}
/* the heading: the two tabs, each in the heading's own letters and its box exactly the heading's height (so the dotted rule falls in
   the gap under it); 44 px or more to press */
#legal .lgtabs{display:flex;justify-content:center;align-items:flex-end;gap:calc(var(--hd) * 1.25);height:var(--hd);margin:0 0 var(--gap);white-space:nowrap}
#legal .lgtab{position:relative;-webkit-appearance:none;appearance:none;margin:0;padding:0;border:0;background:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  font:400 var(--hd)/1 var(--display);letter-spacing:.02em;color:#626262;transition:color .12s}
#legal .lgtab::after{content:"";position:absolute;left:50%;top:50%;width:calc(100% + 20px);height:max(100%,44px);transform:translate(-50%,-50%)}
#legal .lgtab[aria-selected="true"]{color:#ececec;cursor:default}
#legal .lgtab:hover:not([aria-selected="true"]),#legal .lgtab:focus-visible{color:#ffb000;outline:none}
/* the words */
#lgBody{min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;outline:none;
  scrollbar-width:thin;scrollbar-color:rgba(236,236,236,.28) transparent;-webkit-user-select:text;user-select:text;
  font:400 16px/1.6 var(--plain);color:#bdbcbb;text-shadow:none}
/* (the words fade out over 20 px at the top and the foot of their box as they scroll, so no line is cut hard against the rule or the
   key; the column's own padding lets the first and the last line clear the fade) */
#lgBody{-webkit-mask-image:linear-gradient(transparent,#000 20px,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(transparent,#000 20px,#000 calc(100% - 20px),transparent)}
#lgBody .col{max-width:600px;margin:0 auto;padding:20px 4px}
/* the words' box: the ring a key shows on the words (Tab, or the panel opened from a key) drawn on the box round them, which the fade
   never masks, so it shows whole on all four sides */
#legal .lgwin{position:relative;display:grid;grid-template-rows:minmax(0,1fr);min-height:0}
#legal .lgwin:has(#lgBody:focus-visible)::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 2px rgba(255,176,0,.45)}
#lgBody p{margin:0 0 12px;text-wrap:pretty}
#lgBody .lu{margin:0 0 18px;font:500 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#8b8b8b}
#lgBody h3{margin:26px 0 8px;font:700 13px/1.35 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#ececec;text-wrap:balance}
#lgBody ul{margin:0 0 12px;padding:0;list-style:none}
#lgBody li{position:relative;margin:0 0 6px;padding-left:18px;text-wrap:pretty}
#lgBody li::before{content:"";position:absolute;left:2px;top:.66em;width:4px;height:4px;background:#ffb000}
#lgBody b{font-weight:600;color:#ececec}
#lgBody a{color:#ffb000;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
#lgBody a:hover,#lgBody a:focus-visible{color:#ffcf6b;outline:none}
#lgBody .ph{padding:1px 5px;background:rgba(255,176,0,.14);box-shadow:inset 0 0 0 1px rgba(255,176,0,.55);color:#ffb000;font:600 .82em/1 var(--mono);letter-spacing:.04em;white-space:nowrap}
/* CLOSE: the panel's primary key, the locked DONE key of the game's panel at every size (its height, its letters and its width as
   DONE's: .modal above; on a short laptop and a phone on its side, where DONE fills a narrower panel, as wide as DONE is there) */
#legal .lgft{display:flex;justify-content:center;margin-top:var(--gap)}
#legal .k1:focus-visible{background:#ffc233;box-shadow:inset 0 0 0 var(--p) #0a0a0a}
/* a phone held upright (or a window narrower than tall): as wide as the game's panel there (the screen less 12 px a side), its height
   the screen less 16 px a side, the panel's own smaller heading */
@media (max-aspect-ratio:10/11){
  #legal{--mw:min(calc(100vw - 24px),600px);--mh:calc(100 * var(--svh) - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    --pad:20px;--hd:24px;--gap:14px}
  #lgBody{font-size:15px}
}
@media (min-aspect-ratio:10/11) and (max-height:860px),(min-aspect-ratio:17/10) and (max-height:920px){#legal{--k1w:calc(min(calc(31vw - 36px),440px) - 40px)}}
@media (min-aspect-ratio:2/1) and (min-height:521px) and (max-height:920px){#legal{--k1w:calc(min(calc(30vw - 36px),860px) - 40px)}}
/* a phone on its side (or any short screen): as wide as reads well, the height less a 12 px margin, the smallest heading */
@media (max-height:520px) and (min-aspect-ratio:10/11){
  #legal{--mw:min(640px,calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)));--mh:calc(100 * var(--svh) - 24px);
    --pad:14px;--hd:16px;--gap:10px;--k1w:calc(clamp(200px,calc(30vw - 22px),340px) - 28px)}
  #lgBody{font-size:14px;line-height:1.55}
  #lgBody h3{margin-top:20px}
}
/* the monitor under it: dimmed and blurred as under a placard (runner/main.js monDim), its own motion held (the cover frozen), a
   placard under it out of sight till it shuts */
#mon[data-legal] .dlg{visibility:hidden}
#mon[data-legal],#mon[data-legal] *,#mon[data-legal] *::before,#mon[data-legal] *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){#legal{animation:none}#legal .lgtab{transition:none}}

/* ---------- THE REPLAY (runner/main.js rpStart): the heads up shows the replay's numbers inside the monitor's glass, under its words
   and over its timeline (--rpT, --rpS, --rpB from main.js monLay); the stage's card under the score as ever ---------- */
html.rp #hud{inset:var(--rpT,150px) var(--rpS,120px) var(--rpB,190px)}
html.rp #hud .tl{left:var(--pad);top:var(--pad)}
html.rp #hud .tr{right:var(--pad);top:var(--pad)}
html.rp #stage{top:calc(var(--rpT,150px) + 88px)}
/* (the speedometer at the right foot of the heads up, as on a computer: a touch screen's middle is the ride's) */
html.rp #speedo{left:auto!important;right:var(--pad)!important}
/* ---------- PAUSE and the continue are placards on THE MONITOR (runner/monitor.css); the heads up steps aside under them ---------- */
body:has(#mon[data-dlg]) #hud{visibility:hidden}

/* ---------- THE COUNT: big clean numerals, no box ---------- */
#count{position:fixed;left:0;right:0;top:26%;text-align:center;font:700 clamp(112px,22 * var(--vh),240px)/1 var(--mono);color:#ececec;pointer-events:none;
  text-shadow:0 4px 28px rgba(0,0,0,.45)}
/* ---------- the words over the ride (NITRO and the rest): clean letters, no box, a soft shadow so they read on anything ---------- */
#flash{position:fixed;left:50%;top:22%;transform:translate(-50%,-100%);white-space:nowrap;text-align:center;font:400 calc(var(--px) * 14)/1 var(--display);font-size:round(down,calc(var(--px) * 14),8px);color:#ffb000;pointer-events:none;
  text-shadow:0 2px 0 rgba(10,10,10,.75),0 0 18px rgba(10,10,10,.45)}
#flash.show{animation:fl 1.1s cubic-bezier(.2,.75,.3,1) 1 forwards}
#flash.lime{color:var(--lime)}
#flash.teal{color:#37dbe0}
#flash.steel{color:#dfe0e2}
#flash.mag{color:#d62898}
@keyframes fl{0%{opacity:0;transform:translate(-50%,-88%) scale(.92)}14%{opacity:1;transform:translate(-50%,-100%)}75%{opacity:1;transform:translate(-50%,-112%)}100%{opacity:0;transform:translate(-50%,-122%)}}
#hChain{display:inline-block;min-width:3ch;font:700 13px/1 var(--mono);color:#ffb000;text-align:left}
.bump{animation:bump .22s steps(4) 1}
@keyframes bump{40%{transform:scale(1.28);filter:brightness(1.7)}100%{transform:none}}
.pop{animation:popin .35s steps(5) 1}
@keyframes popin{0%{transform:scale(.3)}60%{transform:scale(1.3)}100%{transform:none}}
/* ---------- a stage's card as you enter it: STAGE 2 in amber over its name, no box, for a moment; under the score, so it never
   hangs over the far end of the pipe where the next hazard comes from ---------- */
#stage{position:fixed;left:50%;top:calc(88px + env(safe-area-inset-top));transform:translateX(-50%);pointer-events:none;white-space:nowrap;display:flex;flex-direction:column;align-items:center;gap:10px;
  text-shadow:0 2px 0 rgba(10,10,10,.75),0 0 18px rgba(10,10,10,.5)}
#stage b{font:700 13px/1 var(--plain);letter-spacing:.24em;text-indent:.24em;color:#ffb000}
#stage span{font:400 calc(var(--px) * 12)/1 var(--display);font-size:round(calc(var(--px) * 12),8px);color:#ececec}
#stage.show{animation:stg 1.2s ease 1 forwards}
/* (the first stage's card after THE TIME MACHINE PORTAL, JUMP 2: held longer, on the portal's white) */
#stage.show.jump{animation-duration:2.6s}
@keyframes stg{0%{opacity:0;transform:translate(-50%,6px)}14%{opacity:1;transform:translate(-50%,0)}80%{opacity:1}100%{opacity:0}}
.sa #hud .tr{right:calc(var(--pad) + env(safe-area-inset-right))}
/* a phone: the coins drop under the full screen key and the stage's name under the hard hats, so the score, its combo and the
   BUNKER letters have the top rows to themselves */
@media (max-width:520px){#hud .tr{right:calc(var(--pad) + env(safe-area-inset-right));top:calc(var(--pad) + 50px + env(safe-area-inset-top))}
  .sa #hud .tr{top:calc(var(--pad) + env(safe-area-inset-top))}
  #hStage{order:1;margin-top:10px;--ls:.04em;font-size:14px;height:14px}
  /* while a stage's card is up it already shows the same name, right beside this corner on a phone: the small name steps out of
     sight for that moment (its box kept, so nothing moves) and comes back as the card goes */
  body:has(#stage.show:not([hidden])) #hStage{visibility:hidden}}
/* the full screen key: a clean icon on a soft dark square, as the Basement's chat and floors icons (the owner, Wed 21 Oct: "don't put
   fullscreen icon on those stupid panels", "same design as we just did on basement"): a 28 px icon in quiet grey on a 40 px square, amber
   under a mouse or a key, 44 px to press */
#fsKey{position:fixed;z-index:110;top:calc(14px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right));width:44px;height:44px;margin:0;padding:2px;
  display:flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:rgba(10,10,10,.72) content-box;color:#8b8b8b;cursor:pointer;-webkit-tap-highlight-color:transparent}
#fsKey:hover,#fsKey:focus-visible{color:#ffb000;background-color:rgba(10,10,10,.86);outline:none}
#fsKey svg{display:block;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:square}
#fsKey[hidden]{display:none}
#fsKey .co,#fsKey.on .ex{display:none}#fsKey.on .co{display:block}
#fsHint{position:fixed;z-index:110;top:calc(64px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right));max-width:220px;padding:10px 12px;border-radius:8px;
  background:rgba(10,10,10,.86);font:400 13px/1.35 var(--plain);color:#ececec;text-align:right}
/* ---------- THE THUMBS' KEYS (a touch screen): soft dark rounded squares, the word in quiet grey, amber while pressed; NITRO lime
   (lit while it burns); GAS the bigger, all low on the right, never over the middle ---------- */
#keys{position:fixed;right:calc(12px + env(safe-area-inset-right));bottom:calc(30px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:flex-end;gap:12px}
#keys .tk{-webkit-appearance:none;appearance:none;display:flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;border-radius:14px;background:rgba(10,10,10,.72);
  color:#8b8b8b;font:700 13px/1 var(--plain);letter-spacing:.16em;text-indent:.16em;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;transition:background-color .08s,color .08s}
#keys .tk.down{background:#ffb000;color:#0a0a0a}
#kGas{width:84px;height:84px}
#kBrake{width:72px;height:56px}
/* ===== nitro: the bank as five little juice canisters (under the speed bar; on a touch screen on the NITRO key), each a steel
   capped glass with a brass valve, filling with lime as a charge is banked; the key over GAS ===== */
.cells{display:flex;gap:6px;justify-content:center;align-items:flex-end}
.cells i{position:relative;display:block;box-sizing:content-box;width:8px;height:12px;margin-top:3px;border-style:solid;border-width:3px 2px;border-color:#a8a7a7 #686c73 #49525a #c6cbd4;background:linear-gradient(90deg,transparent 1px,#3b4248 1px 2px,transparent 2px) #0d1115}
.cells i::before{content:"";position:absolute;left:2px;top:-6px;width:4px;height:3px;background:#ad8925;box-shadow:inset 0 1px 0 #fee7a8}
.cells i::after{content:"";position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(#fefcd8 0 2px,transparent 2px),linear-gradient(90deg,#20893b 0 1px,#fefcd8 1px 2px,#45f08e 2px 5px,#4ae172 5px 7px,#20893b 7px);transition:height .3s steps(6)}
.cells i.on{box-shadow:0 0 8px rgba(69,240,142,.5)}
.cells i.on::after{height:100%}
#hNit{position:absolute;left:50%;bottom:calc(30px + env(safe-area-inset-bottom));transform:translateX(-50%)}
@media (hover:none) and (pointer:coarse){#hNit{display:none}}
/* the chase's word clear of the nitro cells (a computer) and of the speedometer (a phone, its middle: its foot 8 px over the
   dial's top, the dial 12 px up and --speedoH tall, runner/speedo.js; 103 px at 3x, 116 at 2x) */
@media (hover:none) and (pointer:coarse){#hRear{bottom:calc(20px + var(--speedoH, 116px) + env(safe-area-inset-bottom))}}
#kNit{width:84px;height:62px;flex-direction:column;gap:6px;color:#45f08e!important}
#kNit .cells{gap:3px}#kNit .cells i{width:6px;height:9px;border-width:2px}#kNit .cells i::before{left:1px;top:-4px;height:2px}
#kNit.burn,#kNit.down{background:rgba(69,240,142,.92);color:#0a0a0a!important}

/* ================= the dip to black between the cover and the garage (THE MONITOR is runner/monitor.css) ================= */
#dip{position:fixed;inset:0;z-index:2147482500;background:#0a0a0a;opacity:0;pointer-events:none;transition:opacity .14s ease-in}
#dip.on{opacity:1}
#dip.off{transition:opacity .26s ease-out}
@media (prefers-reduced-motion:reduce){#dip,#dip.off{transition:none}}
/* the site's wallet picker over everything but the loading screen (assets/wallet-pick.css; its own veil) */
.wpveil{z-index:2147482000}
.wpmodal.board{z-index:2147482001}