/* BOBBLE RUN (run.html). Same packaging language as the story and the dock:
   sticker wordmark, kraft cardboard, packing tape, white shipping labels with
   black ink. Fonts and brand colours match src/config.js. The page is one
   fixed play field; the screens are layers over the WebGL canvas, switched by
   body[data-mode] = boot | title | playing | paused | over (+ .is-board / .is-how). */

:root {
  --ink: #14110d;
  --ink-2: #4b443a;
  --ink-3: #7d7466;
  --paper: #fbf9f2;
  --paper-2: #f0ece0;
  --rule: #d9d2c2;
  --kraft: #c8a479;
  --kraft-hi: #dcc19b;
  --kraft-lo: #a98458;
  --dark: #1a140d;
  --accent: #57b947;
  --accent-hi: #7ad866;
  --accent-dark: #2f7d2a;
  --red: #cf3a2e;
  --orange: #d8791c;
  --blue: #2456c4;
  --gold: #e8b84a;
  --pink: #ff4fd8;
  --sky: #8cc8ea;

  --f-logo: 'Bagel Fat One', 'Arial Black', sans-serif;
  --f-block: 'Bungee', 'Arial Black', sans-serif;
  --f-ui: 'Fredoka', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --gutter: clamp(12px, 3vw, 40px);
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --hard: 0 5px 0 rgb(20 12 4 / .34);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; overflow: hidden; overscroll-behavior: none; }

body {
  position: fixed;
  inset: 0;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  color: var(--ink);
  font: 400 16px/1.5 var(--f-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--dark);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 6px; box-shadow: 0 0 0 6px var(--blue); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------- stage */

.stage {
  position: fixed;
  inset: 0;
  /* shown until the first frame (and when WebGL is missing): a warm warehouse
     wall with the three lanes running to the horizon */
  background:
    radial-gradient(70% 60% at 50% 38%, rgb(255 236 196 / .5), transparent 70%),
    linear-gradient(#3a2c1c 0 44%, #1a140d 44%);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.stage__gl { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; touch-action: none; }
.is-live .stage__gl { opacity: 1; }
.is-check .stage__gl { transition: none; }

/* a wash over the scene so the layers stay readable */
.stage__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease, background-color .35s ease;
  background: linear-gradient(90deg, rgb(12 8 4 / .8), rgb(12 8 4 / .46) 36%, transparent 66%),
    linear-gradient(0deg, rgb(12 8 4 / .5), transparent 34%);
}
[data-mode='title'] .stage__scrim { opacity: 1; }
[data-mode='paused'] .stage__scrim, [data-mode='over'] .stage__scrim, .is-board .stage__scrim, .is-how .stage__scrim {
  opacity: 1;
  background: rgb(14 9 4 / .62);
  -webkit-backdrop-filter: blur(3px) saturate(.85);
  backdrop-filter: blur(3px) saturate(.85);
}
[data-mode='playing'] .stage__scrim {
  opacity: 1;
  background: linear-gradient(rgb(12 8 4 / .38), transparent 22%);
}
.is-check .stage__scrim { transition: none; }

/* ------------------------------------------------------------- shared bits */

.h-block {
  font: 400 clamp(22px, min(3.6vw, 7vh), 40px)/1 var(--f-block);
  letter-spacing: .01em;
  text-transform: uppercase;
}

.chip {
  display: inline-block;
  padding: .5em .7em .42em;
  border: 2px solid var(--ink);
  border-radius: .5em;
  background: #fff;
  box-shadow: 0 0 0 2px #fff, 0 4px 0 2px rgb(0 0 0 / .28);
  font: 400 clamp(10px, 1.05vw, 13px)/1 var(--f-block);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink);
  rotate: -2deg;
}
.chip--green { background: var(--accent); rotate: 1.5deg; }

/* Sticker text: white fill, black outline (stroked copy behind), white rim. */
.stk { position: relative; display: inline-block; isolation: isolate; white-space: nowrap; }
.stk::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: #000;
  -webkit-text-stroke: .19em #000;
}
.stk--green { color: var(--accent); }

/* Primary: the price tag off the blister card (same as the story's finale). */
.btn-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: .58em 1.1em .5em .7em;
  border: 3px solid #050505;
  border-radius: .42em .9em .9em .42em;
  background: linear-gradient(var(--accent-hi), var(--accent) 55%, #4aa83b);
  box-shadow: 0 0 0 3px #fff, 0 6px 0 3px rgb(0 0 0 / .34);
  font: 400 clamp(17px, 1.7vw, 24px)/1 var(--f-logo);
  letter-spacing: .01em;
  color: #081606;
  text-decoration: none;
  rotate: -2deg;
  transition: rotate .35s var(--ease-out), translate .35s var(--ease-out);
}
.btn-tag:hover, .btn-tag:focus-visible { rotate: -.5deg; translate: 0 -3px; }
.btn-tag:active { translate: 0 2px; }
.btn-tag--big { font-size: clamp(24px, min(3.4vw, 8vh), 44px); padding-right: 1.3em; }
.btn-tag__hole {
  flex: none; width: .5em; height: .5em; border-radius: 50%; background: #050505;
  box-shadow: inset 0 .08em .1em rgb(255 255 255 / .25), 0 0 0 .1em rgb(0 0 0 / .18);
}

.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .82em 1.1em .72em;
  border: 2px solid rgb(255 255 255 / .92);
  border-radius: 999px;
  background: rgb(10 6 2 / .62);
  font: 400 clamp(11.5px, 1vw, 14px)/1 var(--f-block);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  transition: background-color .25s ease;
}
.btn-pill:hover, .btn-pill:focus-visible { background: rgb(10 6 2 / .9); }

.btn-ink {
  flex: none;
  padding: .86em 1.4em .76em;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: var(--ink);
  box-shadow: var(--hard);
  font: 400 15px/1 var(--f-block);
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  transition: translate .15s ease, box-shadow .15s ease, background-color .2s ease;
}
.btn-ink:hover { background: #2a231a; }
.btn-ink:active { translate: 0 3px; box-shadow: 0 2px 0 rgb(20 12 4 / .3); }
.btn-ink--small { padding: .78em 1em .68em; font-size: 12.5px; border-radius: 10px; box-shadow: 0 3px 0 rgb(20 12 4 / .28); }
.btn-ink--green { background: var(--accent); color: #07150a; }
.btn-ink--green:hover { background: var(--accent-hi); }
.btn-ink--paper { background: var(--paper); color: var(--ink); }
.btn-ink--paper:hover { background: #fff; }
.btn-ink[disabled] { border-color: #3a342b; background: #b9b2a2; box-shadow: none; color: #5d564a; cursor: default; }
.btn-ink.is-done { background: var(--paper); color: var(--accent-dark); border-style: dashed; box-shadow: none; opacity: 1; }

.x {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0 0 2px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 3px 0 rgb(20 12 4 / .28);
  font: 700 22px/1 var(--f-mono);
  color: var(--ink);
}
.x:hover { background: #fff; }

.stamp {
  display: inline-block;
  padding: 4px;
  border: 3px solid currentColor;
  border-radius: 10px;
  color: var(--ink-3);
  rotate: -7deg;
  opacity: .92;
}
.stamp span {
  display: block;
  padding: .5em .7em .42em;
  border: 1.5px solid currentColor;
  border-radius: 6px;
  font: 400 clamp(13px, 1.8vw, 22px)/1 var(--f-block);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.stamp--best { color: var(--accent-dark); }
.stamp--over { color: var(--red); }
.stamp--offline { color: var(--orange); }

/* a strip of brand packing tape with a torn edge */
.carton__tape, .label__tape, .sheet__tape {
  position: absolute;
  top: -3px;
  left: 50%;
  width: clamp(110px, 24%, 200px);
  height: 26px;
  translate: -50% 0;
  background:
    linear-gradient(rgb(255 255 255 / .3), rgb(255 255 255 / .05) 45%, transparent 60%, rgb(0 0 0 / .12)),
    linear-gradient(90deg, var(--accent-dark) 0 7%, var(--accent) 7% 93%, var(--accent-dark) 93%);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 96% 100%, 92% 72%, 88% 100%, 84% 72%, 80% 100%, 76% 72%, 72% 100%, 68% 72%, 64% 100%, 60% 72%,
    56% 100%, 52% 72%, 48% 100%, 44% 72%, 40% 100%, 36% 72%, 32% 100%, 28% 72%, 24% 100%, 20% 72%, 16% 100%, 12% 72%, 8% 100%, 4% 72%, 0 100%);
}

.label__tape { left: 64%; }

/* a flat-packed carton panel */
.carton {
  position: relative;
  padding: clamp(32px, 4vw, 46px) clamp(14px, 2.6vw, 30px) clamp(16px, 2.4vw, 28px);
  border: 3px solid var(--ink);
  border-radius: 16px;
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .07) 0 2px, transparent 2px 9px),
    var(--kraft-hi);
  box-shadow: var(--hard);
}
.carton__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: clamp(10px, 1.6vw, 18px); }

/* --------------------------------------------------------------------- top */

.top {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(12px, var(--sat)) max(var(--gutter), var(--sar)) 0 max(var(--gutter), var(--sal));
  pointer-events: none;
  transition: opacity .3s ease, translate .4s var(--ease-out);
}
.top > * { pointer-events: auto; }
[data-mode='playing'] .top, [data-mode='paused'] .top, [data-mode='boot'] .top { opacity: 0; translate: 0 -120%; visibility: hidden; }
.is-check .top { transition: none; }

/* The logo link: .logo-link in css/nav.css (size, tilt, wobble). */

.nav { display: flex; align-items: center; gap: clamp(5px, .8vw, 10px); }
.nav__link {
  padding: .72em .9em .62em;
  border: 2px solid var(--ink);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 3px 0 rgb(0 0 0 / .32);
  font: 400 clamp(10.5px, 1.24vw, 16.9px)/1 var(--f-block);
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink);
  transition: translate .2s var(--ease-out), background-color .2s ease;
}
.nav__link:hover { translate: 0 -2px; background: #f3ffe9; }
.nav__link[aria-current='page'] { background: var(--accent); }

/* --------------------------------------------------------------------- HUD */

.hud {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  padding: max(10px, var(--sat)) max(var(--gutter), var(--sar)) max(10px, var(--sab)) max(var(--gutter), var(--sal));
  font-family: var(--f-block);
  color: #fff;
  --hs: clamp(30px, min(5.4vw, 11vh), 62px);   /* the score numerals */
  --hk: clamp(9px, 1vw, 11.5px);               /* the score / level tags */
}

/* outlined sticker numbers: stroke painted under the fill */
.hud__v, .hud__coins b, .hud__count {
  -webkit-text-stroke: .2em #050505;
  paint-order: stroke fill;
  font-variant-numeric: tabular-nums;
}

/* The tier (0..8, view.tier) sets the colour of the level chip, the level-up banner and the flash:
   the climb goes green, lime, gold, amber, orange, coral, red, pink, violet. */
.hud__lvl, .hud__biome, .hud__flash { --lv: #7ad866; --lv-dk: #2f7d2a; }
[data-tier='1'] { --lv: #b4e24a; --lv-dk: #5f8514; }
[data-tier='2'] { --lv: #f2c230; --lv-dk: #9a7410; }
[data-tier='3'] { --lv: #ffa928; --lv-dk: #a05e08; }
[data-tier='4'] { --lv: #ff7f3d; --lv-dk: #a8400f; }
[data-tier='5'] { --lv: #ff5e4a; --lv-dk: #a82a1c; }
[data-tier='6'] { --lv: #ff3f6c; --lv-dk: #a0173f; }
[data-tier='7'] { --lv: #ff4fd8; --lv-dk: #9c1a82; }
[data-tier='8'] { --lv: #b685ff; --lv-dk: #5b2fb0; }

.hud__score { position: absolute; left: max(var(--gutter), var(--sal)); top: max(10px, var(--sat)); display: grid; justify-items: start; }
.hud__tags { display: flex; align-items: stretch; gap: 6px; }
.hud__k {
  display: inline-flex;
  align-items: center;
  padding: .4em .6em .3em;
  border-radius: 5px;
  background: #050505;
  font-size: clamp(9px, 1vw, 11.5px);
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* the level chip: tier colour, the level as a big numeral, the lap from lap 2, a progress bar to the next gate */
.hud__lvl {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: .4em;
  padding: .32em .6em .74em;
  border: 2px solid #050505;
  border-radius: 6px;
  background: var(--lv);
  box-shadow: 0 2px 0 rgb(0 0 0 / .32);
  font-size: clamp(9px, 1vw, 11.5px);
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #050505;
  transform-origin: 0 50%;
  transition: background-color .5s ease;
}
.hud__lvl b { font-size: 1.7em; font-weight: 400; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.hud__lvl-lap { align-self: center; padding: .28em .45em .2em; border-radius: 3px; background: #050505; color: var(--lv); letter-spacing: .08em; }
.hud__lvl-bar {
  position: absolute;
  left: .6em;
  right: .6em;
  bottom: .3em;
  height: .3em;
  border-radius: 99px;
  background: rgb(0 0 0 / .24);
  overflow: hidden;
}
.hud__lvl-bar i { display: block; height: 100%; background: #050505; transform: scaleX(0); transform-origin: 0 50%; }
.hud__lvl.is-pop { animation: lvl-pop .7s var(--ease-out); }
@keyframes lvl-pop { 0% { scale: 1.55; rotate: -5deg; } 100% { scale: 1; rotate: 0deg; } }

.hud__row { display: flex; align-items: flex-end; gap: .55em; }
.hud__v { margin-top: .06em; font-size: var(--hs); line-height: 1.02; font-weight: 400; letter-spacing: -.01em; }
/* the total score multiplier = capsule x level multiplier; pink while it is above x1, hot while the capsule runs */
.hud__mult {
  flex: none;
  margin-bottom: .45em;
  padding: .3em .5em .22em;
  border: 2px solid #050505;
  border-radius: 8px;
  background: var(--pink);
  box-shadow: 0 0 0 2px #fff, 0 3px 0 2px rgb(0 0 0 / .3);
  font-size: clamp(14px, 2vw, 22px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #1a0318;
  rotate: 6deg;
  transition: background-color .3s ease;
}
.hud__mult.is-base { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 2px rgb(255 255 255 / .6), 0 3px 0 2px rgb(0 0 0 / .3); }
.hud__mult.is-hot { animation: mult-hot .45s ease-in-out infinite alternate; }
.hud__mult.is-pop { animation: mult-pop .5s var(--ease-out); }
@keyframes mult-pop { 0% { scale: 1.45; } 100% { scale: 1; } }
@keyframes mult-hot { to { scale: 1.1; } }
.is-check .hud__mult, .is-check .hud__lvl { animation: none; }

/* the screen-edge pulse at a gate, in the new tier's colour */
.hud__flash {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 90px 26px var(--lv);
  animation: lvl-flash .85s ease-out both;
}
@keyframes lvl-flash { 0% { opacity: 0; } 14% { opacity: .95; } 100% { opacity: 0; } }
.is-check .hud__flash { animation: none; opacity: .6; }

.hud__coins {
  position: absolute;
  top: max(13px, calc(var(--sat) + 3px));
  right: calc(max(var(--gutter), var(--sar)) + 106px);
  display: flex;
  align-items: center;
  gap: .32em;
  font-size: clamp(22px, min(3.4vw, 8vh), 38px);
  line-height: 1;
}
.hud__coins b { font-weight: 400; }
.coin {
  flex: none;
  width: .86em;
  height: .86em;
  border: .11em solid #050505;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff3c4, var(--gold) 46%, #b8841c);
  box-shadow: inset 0 0 0 .1em rgb(255 255 255 / .35), 0 .1em 0 rgb(0 0 0 / .4);
}

.hud__powers {
  position: absolute;
  left: max(var(--gutter), var(--sal));
  top: calc(max(10px, var(--sat)) + var(--hk) * 3.5 + var(--hs) * 1.12 + 10px);   /* under the level chip and the score */
  display: grid;
  gap: 6px;
}
.pw {
  --c: var(--gold);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 7px;
  min-width: clamp(118px, 15vw, 170px);
  padding: 5px 8px 6px 6px;
  border: 2px solid #050505;
  border-radius: 9px;
  background: var(--paper);
  box-shadow: 0 3px 0 rgb(0 0 0 / .32);
  color: var(--ink);
}
.pw__dot { grid-row: span 2; width: 18px; height: 18px; border: 2px solid #050505; border-radius: 50%; background: var(--c); }
.pw__name { font-size: clamp(9px, .95vw, 11px); line-height: 1; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.pw__bar { height: 6px; margin-top: 4px; border: 1.5px solid #050505; border-radius: 99px; background: #fff; overflow: hidden; }
.pw__bar i { display: block; height: 100%; background: var(--c); transform-origin: 0 50%; }
.pw--magnet, .dot--magnet { --c: #ff5a4e; }
.pw--shield, .dot--shield { --c: var(--sky); }
.pw--jet, .dot--jet { --c: #ff9a3d; }
.pw--x2, .dot--x2 { --c: var(--pink); }
.dot--level { --c: var(--accent); }
.dot--roll { --c: #ff6fd1; }
.dot--drop { --c: #b07a3c; }
.dot--toggle { --c: #ffc23d; }
.pw.is-low { animation: pw-low .4s steps(2, jump-none) infinite; }
@keyframes pw-low { 50% { background: #ffe1dc; } }

/* gate banner: a run of tape across the track */
.hud__biome {
  position: absolute;
  left: 50%;
  top: clamp(64px, 20vh, 170px);
  translate: -50% 0;
  rotate: -2deg;
  display: grid;
  justify-items: center;
  gap: 5px;
  width: max-content;
  max-width: 92vw;
  padding: 10px clamp(18px, 4vw, 44px) 9px;
  background:
    linear-gradient(rgb(255 255 255 / .3), rgb(255 255 255 / .05) 45%, transparent 60%, rgb(0 0 0 / .12)),
    linear-gradient(var(--lv-dk) 0 9%, var(--lv) 9% 91%, var(--lv-dk) 91%);
  box-shadow: 0 5px 0 rgb(0 0 0 / .3);
  color: #06130a;
  text-align: center;
  animation: biome-in .45s var(--ease-out) both;
}
.hud__biome-top { display: flex; align-items: center; gap: 9px; }
.hud__biome-lvl {
  display: inline-flex;
  align-items: baseline;
  gap: .45em;
  padding: .4em .65em .3em;
  border-radius: 5px;
  background: #050505;
  font-size: clamp(9px, 1vw, 11.5px);
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
}
.hud__biome-lvl i { font-style: normal; }
.hud__biome-lvl b { display: inline-block; font-size: 2.1em; font-weight: 400; letter-spacing: 0; color: var(--lv); animation: lvl-punch .8s var(--ease-out) both; }
.hud__biome-k { font-size: clamp(9px, 1vw, 11.5px); line-height: 1; letter-spacing: .14em; text-transform: uppercase; }
.hud__biome > b { font: 400 clamp(19px, min(3.6vw, 8vh), 40px)/1 var(--f-block); letter-spacing: .01em; text-transform: uppercase; }
.hud__biome-h { font: 600 clamp(10.5px, 1.1vw, 13px)/1.3 var(--f-ui); letter-spacing: 0; color: rgb(6 19 10 / .86); }
@keyframes biome-in { from { opacity: 0; translate: -50% -16px; scale: .92; } }
@keyframes lvl-punch { 0% { scale: 2.1; opacity: 0; } 40% { opacity: 1; } 100% { scale: 1; } }
.is-check .hud__biome, .is-check .hud__biome-lvl b { animation: none; }

.hud__count {
  position: absolute;
  left: 50%;
  top: 42%;
  translate: -50% -50%;
  font: 400 clamp(72px, 22vh, 190px)/1 var(--f-logo);
}

/* sound + pause */
.ctl {
  position: fixed;
  z-index: 40;
  right: max(var(--gutter), var(--sar));
  top: max(10px, var(--sat));
  display: flex;
  gap: 8px;
}
.ctl__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 3px solid #050505;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 3px 0 rgb(0 0 0 / .34);
  color: var(--ink);
}
.ctl__btn:hover { background: #fff; }
.ctl__btn svg { width: 22px; height: 22px; }
.ctl__off { display: none; }
.ctl__btn[aria-pressed='false'] .ctl__on { display: none; }
.ctl__btn[aria-pressed='false'] .ctl__off { display: inline; }
.ctl__btn[aria-pressed='false'] { background: var(--paper-2); color: var(--ink-3); }
.ctl__btn--pause { display: none; }
[data-mode='playing'] .ctl__btn--pause { display: grid; }
[data-mode='boot'] .ctl { display: none; }
/* with the header on screen the sound switch sits in the bottom corner */
[data-mode='title'] .ctl, [data-mode='over'] .ctl { top: auto; bottom: max(12px, var(--sab)); }
.is-board .ctl, .is-how .ctl, [data-mode='over'] .ctl, [data-mode='paused'] .ctl { display: none; }

/* ----------------------------------------------------------------- screens */

.scr {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: grid;
  padding: calc(max(12px, var(--sat)) + clamp(48px, 9vh, 70px)) max(var(--gutter), var(--sar)) max(14px, var(--sab)) max(var(--gutter), var(--sal));
  overflow: auto;
  overscroll-behavior: contain;
  pointer-events: none;
  animation: scr-in .4s var(--ease-out) both;
}
.scr > * { pointer-events: auto; }
@keyframes scr-in { from { opacity: 0; translate: 0 14px; } }
.is-check .scr { animation: none; }
.scr--how, .scr--board { z-index: 35; }
/* a panel is open: the layer under it and the header step aside */
.is-how .scr--title, .is-board .scr--title, .is-board .scr--over, .is-how .top, .is-board .top { visibility: hidden; }
.scr--pause, .scr--how, .scr--board { padding-top: max(14px, var(--sat)); place-items: center; pointer-events: auto; }

/* ---- title */
.scr--title {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 14px clamp(14px, 3vw, 40px);
  overflow: hidden;
}
.title { display: grid; justify-items: start; gap: clamp(8px, 1.6vh, 18px); min-width: 0; padding-bottom: 4px; }
.title__kicker { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.title__h {
  font: 400 clamp(44px, min(17vw, 19vh), 128px)/.84 var(--f-logo);
  letter-spacing: -.015em;
  text-transform: uppercase;
  color: #fff;
  filter:
    drop-shadow(.045em 0 0 #fff) drop-shadow(-.045em 0 0 #fff)
    drop-shadow(0 .045em 0 #fff) drop-shadow(0 -.045em 0 #fff)
    drop-shadow(0 .09em 0 rgb(0 0 0 / .3));
  rotate: -2deg;
  transform-origin: 0 100%;
  margin: .06em 0 .1em .04em;
}
.title__h .stk { display: block; width: max-content; }
.title__lede { max-width: 30em; font: 600 clamp(13.5px, 1.3vw, 18px)/1.4 var(--f-ui); color: #fff; text-shadow: 0 2px 0 rgb(0 0 0 / .45); }
.title__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: clamp(2px, 1vh, 10px); }
.title__meta { display: flex; align-items: stretch; gap: 10px; padding-right: 54px; }

/* a small shipping tag: black header, big value */
.tag {
  display: grid;
  min-width: 84px;
  padding: 0;
  border: 2px solid #050505;
  border-radius: 9px;
  background: var(--paper);
  box-shadow: 0 3px 0 rgb(0 0 0 / .34);
  overflow: hidden;
  text-align: left;
  color: var(--ink);
}
.tag__k { padding: .5em .7em .4em; background: #050505; font: 400 9.5px/1 var(--f-block); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.tag b { padding: .34em .6em .3em; font: 400 clamp(14px, 1.5vw, 19px)/1.1 var(--f-block); white-space: nowrap; }
.tag--btn:hover { background: #f3ffe9; }
.tag--btn b { font: 700 clamp(12.5px, 1.2vw, 15px)/1.4 var(--f-mono); }

/* ---- how to play */
.how { width: min(100%, 640px); max-height: 100%; overflow: auto; }
.how__moves { display: grid; gap: 8px; }
.move {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) repeat(3, auto);
  align-items: center;
  gap: 2px 8px;
  padding: 8px 10px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  font: 400 13px/1.3 var(--f-ui);
}
.move b { grid-column: 2; font: 400 14px/1.1 var(--f-block); letter-spacing: .03em; text-transform: uppercase; }
.move span:not(.move__ico) { grid-column: 2; grid-row: 2; color: var(--ink-2); }
.move kbd {
  grid-row: 1 / span 2;
  padding: .3em .5em;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 2px 0 var(--ink);
  font: 700 12px/1 var(--f-mono);
  white-space: nowrap;
}
.move__ico { grid-row: 1 / span 2; width: 34px; height: 34px; border: 2px solid var(--ink); border-radius: 50%; background: var(--accent) center / 20px 20px no-repeat; }
.move__ico--lr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6M4 12h16' fill='none' stroke='%23050505' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.move__ico--up { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 11l6-7 6 7M12 5v15' fill='none' stroke='%23050505' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.move__ico--down { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 13l6 7 6-7M12 19V4' fill='none' stroke='%23050505' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.how__powers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin-top: 12px; font: 400 13px/1.35 var(--f-ui); }
.how__powers b { font-weight: 800; }
.dot { display: inline-block; width: 13px; height: 13px; margin-right: 7px; border: 2px solid var(--ink); border-radius: 50%; background: var(--c); vertical-align: -1px; }
.how__hazards { display: grid; gap: 5px; margin-top: 12px; padding-top: 10px; border-top: 2px dashed var(--ink); font: 400 13px/1.35 var(--f-ui); }
.how__hazards b { margin-right: .3em; font-weight: 800; }
.how__fine { margin-top: 12px; font: 400 12px/1.5 var(--f-mono); color: var(--ink-2); }

/* ---- pause */
.carton--small { width: min(100%, 340px); text-align: center; }
.pause__stats { margin-top: 6px; font: 700 13px/1.4 var(--f-mono); color: var(--ink-2); }
.stack { display: grid; justify-items: center; gap: 16px; margin-top: 18px; }
.stack__row { display: flex; gap: 10px; }

/* ---- game over: the shipping label */
.scr--over {
  grid-template-columns: minmax(0, auto) auto;
  place-content: center;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
}
.label {
  position: relative;
  width: clamp(280px, 46vw, 500px);
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: var(--hard);
  rotate: -1.2deg;
}
.label__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 1em 1.1em .68em;
  border-radius: 10px 10px 0 0;
  background: var(--ink);
  font: 400 clamp(10px, .95vw, 12.5px)/1 var(--f-block);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}
.label__bar h2 { font: inherit; }
.label__bar span { color: var(--accent-hi); text-align: right; }
.label__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding: clamp(10px, 1.6vw, 18px) clamp(12px, 2vw, 22px); }
.label__k { font: 400 11px/1 var(--f-block); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.label__where { color: var(--accent-dark); }
.label__where:not(:empty)::before { content: '\00b7'; margin: 0 .55em; }   /* "Score · Gacha arcade": where the run ended */
.label__score { margin-top: 2px; font: 400 clamp(38px, min(6.4vw, 15vh), 78px)/1 var(--f-block); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.label__cause { margin-top: 6px; font: 700 clamp(12px, 1.25vw, 14.5px)/1.35 var(--f-mono); color: #9c1f15; }
.label__grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--ink); border-left: 2px solid var(--ink); }
.label__f--lvl { background: #fff1cf; }
.label__f--lvl dd { color: #a8400f; }
.label__f { min-width: 0; padding: 7px 9px 8px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.label__f dt { font: 400 9.5px/1.1 var(--f-block); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.label__f dd { margin-top: 5px; font: 400 clamp(15px, 1.9vw, 22px)/1.05 var(--f-block); white-space: nowrap; }
.label__f--ok dd { color: var(--accent-dark); }
.label__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 46px;
  padding: 8px clamp(12px, 2vw, 22px) 10px;
  border-top: 2px dashed var(--ink);
}
.label__status { flex: 1 1 auto; font: 400 12px/1.4 var(--f-mono); color: var(--ink-2); }
.label__status.is-ok { color: var(--accent-dark); font-weight: 700; }
.label__status.is-error { color: #9c1f15; }
.barcode { flex: none; width: 96px; height: 26px; fill: var(--ink); }
/* The run coins banked on the server and the way to the capsule machine on the hub (docs/CAPSULES.md);
   the line is built by src/run/screens.js and sits above the receipt's foot. */
.label__bank {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px clamp(12px, 2vw, 22px);
  background: #fff6dc;
  font: 700 12px/1.3 var(--f-mono);
  color: var(--ink-2);
}
.label__bank-coin {
  flex: none;
  width: 15px;
  height: 15px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--gold);
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / .5);
}
.label__bank-text { flex: 1 1 auto; min-width: 0; }
.label__bank-link {
  flex: none;
  padding: .55em .85em .45em;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font: 400 10.5px/1 var(--f-block);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink);
}
.label__bank.is-rich .label__bank-link { background: var(--accent-hi); }
.label__bank-link:hover,
.label__bank-link:focus-visible { background: var(--ink); color: var(--paper); }

.over__actions { display: grid; justify-items: center; gap: 16px; }
.over__row { display: flex; gap: 10px; }

/* ---- leaderboard */
.sheet {
  display: flex;
  flex-direction: column;
  width: min(100%, 620px);
  max-height: 100%;
  min-height: 0;
  padding: clamp(12px, 2vw, 24px);
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: var(--hard);
}
.scr--board { overflow: hidden; }
.sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sheet__lede { margin-top: 4px; font: 400 12px/1.4 var(--f-mono); color: var(--ink-2); }
.board__prize {
  margin: 10px calc(-1 * clamp(12px, 2vw, 24px)) 0;
  padding: 7px clamp(12px, 2vw, 24px) 6px;
  background:
    linear-gradient(rgb(255 255 255 / .28), rgb(255 255 255 / .04) 45%, transparent 60%, rgb(0 0 0 / .1)),
    linear-gradient(var(--accent-dark) 0 9%, var(--accent) 9% 91%, var(--accent-dark) 91%);
  font: 400 clamp(10px, 1.1vw, 12px)/1.3 var(--f-block);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #06130a;
}
.lb { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 96px; margin-top: 10px; border: 3px solid var(--ink); border-radius: 12px; overflow: hidden; background: #fff; }
.lb__row { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto 64px; align-items: center; column-gap: 10px; padding: 0 12px; }
.lb__row > :nth-child(3), .lb__row > :nth-child(4) { text-align: right; }
.lb__row--head { flex: none; min-height: 32px; background: var(--ink); font: 400 10px/1 var(--f-block); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.lb__rows { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.lb__rows:focus-visible { outline-offset: -3px; box-shadow: none; outline-color: var(--blue); }
.lb__rows .lb__row { min-height: 38px; border-bottom: 1px dashed var(--rule); font: 400 13px/1.2 var(--f-mono); }
.lb__rank { justify-self: start; font-weight: 700; }
.lb__addr { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb__score { font: 400 14px/1 var(--f-block); }
.lb__row.is-top .lb__rank { padding: .3em .5em .22em; border: 2px solid var(--ink); border-radius: 6px; }
.lb__row.is-top1 .lb__rank { background: linear-gradient(135deg, #ffe9a6, var(--gold) 55%, #c9952a); }
.lb__row.is-top2 .lb__rank { background: linear-gradient(135deg, #fff, #cfd6dd 55%, #9aa4ae); }
.lb__row.is-top3 .lb__rank { background: linear-gradient(120deg, #ffd0ec, #c9f0ff 35%, #d9ffcf 65%, #fff2b8); }
.lb__row.is-me { background: #e6f7df; box-shadow: inset 5px 0 0 var(--accent); }
.lb__you { margin-left: 6px; padding: .3em .45em .22em; border: 2px solid var(--ink); border-radius: 6px; background: var(--accent); font: 400 9px/1 var(--f-block); letter-spacing: .08em; }
.lb__state { flex: 1 1 auto; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 16px 16px 18px; text-align: center; font: 400 12.5px/1.5 var(--f-mono); color: var(--ink-2); }
.lb__state p:not(.stamp) { max-width: 34em; }
.board__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; margin-top: 10px; }
.board__me { font: 700 13px/1.35 var(--f-mono); }
.board__note { grid-column: 1 / -1; font: 400 11.5px/1.45 var(--f-mono); color: var(--ink-2); }
.board__note.is-error { color: #9c1f15; }

/* -------------------------------------------------------------------- boot */

.boot {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  background: var(--dark);
  color: #fff;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.is-ready .boot { opacity: 0; visibility: hidden; }
.is-check .boot { transition: none; }
/* The logo (src/core/logo.js, alive: css/logo-live.css) with the game's sticker "RUN" stuck on its
   corner. The lockup waits for Dela Gothic One, the sticker with it. */
.boot__logo { position: relative; width: clamp(220px, 42vw, 440px); margin-bottom: clamp(8px, 1.6vh, 16px); rotate: -2deg; }
.boot__logo .logo-live { --logo-hop: 16px; }
.boot__tag {
  position: absolute;
  right: 3%;
  bottom: -20%;
  padding: .5em .8em .4em;
  border: 2px solid #050505;
  border-radius: .32em;
  background: var(--accent);
  box-shadow: 0 0 0 2px #fff;
  font: 400 clamp(11px, 1.5vw, 16px)/1 var(--f-block);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #07150a;
  rotate: 4deg;
  transition: opacity .3s ease;
}
.logo-live:not(.is-in) ~ .boot__tag { opacity: 0; }
.is-check .boot__tag { transition: none; }
.boot__tape { width: min(60vw, 320px); height: 14px; border: 2px solid #000; border-radius: 3px; background: #3a2f22; overflow: hidden; }
.boot__tape i {
  display: block;
  width: 40%;
  height: 100%;
  background: linear-gradient(var(--accent-dark) 0 14%, var(--accent) 14% 86%, var(--accent-dark) 86%);
  animation: boot-run 1.1s ease-in-out infinite alternate;
}
@keyframes boot-run { from { translate: -20% 0; } to { translate: 170% 0; } }
.boot__line { font: 400 11px/1 var(--f-block); letter-spacing: .12em; text-transform: uppercase; color: #b9ad97; }
.is-failed .boot__tape { display: none; }
.is-failed .boot__line { color: #ffb3a8; max-width: 80vw; text-align: center; line-height: 1.5; }

.noscript { position: fixed; inset: auto 16px 16px; z-index: 60; padding: 14px; border: 3px solid var(--ink); border-radius: 12px; background: #fff; font: 600 15px/1.4 var(--f-ui); }

/* --------------------------------------------------------------- responsive */

/* portrait phones: the copy sits at the bottom of the play field */
@media (orientation: portrait), (max-width: 560px) {
  .stage__scrim {
    background: linear-gradient(0deg, rgb(12 8 4 / .88), rgb(12 8 4 / .5) 38%, transparent 62%),
      linear-gradient(rgb(12 8 4 / .5), transparent 16%);
  }
  .scr--title { grid-template-columns: minmax(0, 1fr); align-content: end; }
  .title__meta { padding-right: 54px; }
  .scr--over { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; }
  .label { width: min(100%, 420px); }
  .label__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .over__actions { margin-top: 8px; }
}

@media (max-width: 720px) {
  .nav__long { display: none; }
  .nav__link { padding: .8em .7em .7em; }
  .hud__coins { right: calc(max(var(--gutter), var(--sar)) + 102px); }
  .how__powers { grid-template-columns: minmax(0, 1fr); }
  .move { grid-template-columns: 38px minmax(0, 1fr); }
  .move kbd { display: none; }
  .lb__row { grid-template-columns: 44px minmax(0, 1fr) auto 46px; column-gap: 8px; padding: 0 9px; }
}

/* phones: the coin counter drops under the sound / pause buttons, the score row gets the width */
@media (max-width: 560px) {
  .hud__coins { top: calc(max(10px, var(--sat)) + 54px); right: max(var(--gutter), var(--sar)); }
  .hud__biome-h { font-size: 10.5px; }
}

@media (max-width: 400px) {
  .nav__link { font-size: 10px; padding: .8em .56em .7em; }
  .title__actions { gap: 12px 10px; }
  .btn-pill { padding: .82em .9em .72em; font-size: 11px; }
}

/* short landscape (phones on their side): tighten everything vertically */
@media (max-height: 460px) {
  .scr { padding-top: calc(max(8px, var(--sat)) + 44px); padding-bottom: max(10px, var(--sab)); }
  .scr--pause, .scr--how, .scr--board { padding-top: max(8px, var(--sat)); }
  .title__lede { display: none; }
  .title { gap: 8px; }
  .carton { padding-top: 30px; }
  .how__moves { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .move { grid-template-columns: 34px minmax(0, 1fr); padding: 6px 8px; font-size: 12px; }
  .move kbd { display: none; }
  .how__powers { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 8px; font-size: 12px; }
  .how__hazards { gap: 3px; margin-top: 8px; padding-top: 6px; font-size: 11.5px; line-height: 1.25; }
  .how__fine { margin-top: 6px; font-size: 10.5px; line-height: 1.35; }
  .title__h { font-size: clamp(40px, min(15vw, 16vh), 96px); }
  /* the receipt must fit a phone on its side (360 - 390 px tall) without its top going under the header:
     a smaller label, and a too-tall one scrolls instead of being cut off at both ends */
  .scr--over { place-content: safe center; padding-top: calc(max(8px, var(--sat)) + 40px); }
  .label__bar { padding: .8em 1em .55em; }
  .label__body { gap: 4px 10px; padding: 7px 12px 9px; }
  .label__score { font-size: clamp(32px, 11vh, 44px); }
  .label__cause { margin-top: 3px; font-size: 11.5px; }
  .label__f { padding: 4px 8px 5px; }
  .label__f dd { margin-top: 3px; font-size: 15px; }
  .label__foot { min-height: 34px; padding-top: 5px; padding-bottom: 6px; }
  .label__status { font-size: 11px; line-height: 1.3; }
  .barcode { height: 20px; }
  .label__bank { padding-top: 4px; padding-bottom: 4px; font-size: 11px; }
  .over__actions { gap: 12px; }
  .stack { margin-top: 12px; gap: 12px; }
  .lb__rows .lb__row { min-height: 30px; }
  .board__prize { margin-top: 6px; }
  .lb { margin-top: 6px; }
  .board__foot { margin-top: 6px; }
}
/* small phones on their side (640 x 360): the title's chips make room for the buttons */
@media (max-height: 460px) and (max-width: 700px) {
  .title__kicker { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}