/* BOBBLE — the hub (index.html, docs/HUB.md). Colours and font families are
   overridden at runtime from src/config.js (HubUI / applyTheme); the values
   below are fallbacks. The header lives in css/nav.css. */

:root {
  --c-black: #050505;
  --c-white: #f4f4f0;
  --c-mint: #cfe6d2;
  --c-accent: #57b947;
  --c-accent-dark: #2f7d2a;
  --c-neon: #39ff88;
  --c-cardboard: #c9a57a;

  --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', monospace;

  --gutter: clamp(16px, 3vw, 44px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --pop: cubic-bezier(.22, 1.25, .36, 1);

  color-scheme: dark;
}

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

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #000;
  color: var(--c-white);
}

body {
  font-family: var(--f-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

button { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 4px; }

.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;
}

.gl,
.xfade {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
}

.gl:focus,
.gl:focus-visible { outline: none; }

[data-mode='sealed'][data-hover='box'] .gl,
[data-mode='open'][data-hover='dock'] .gl,
[data-mode='open'][data-hover='run'] .gl,
[data-mode='open'][data-hover='bobble'] .gl { cursor: pointer; }
[data-mode='sealed'][data-hover='dock'] .gl,
[data-mode='sealed'][data-hover='run'] .gl { cursor: not-allowed; }

.xfade { z-index: 2; pointer-events: none; opacity: 0; visibility: hidden; }
.xfade.is-on { opacity: 1; visibility: visible; }
.xfade.is-on.is-fading { opacity: 0; transition: opacity .5s ease !important; }

/* The header steps back while the stage is busy. */
[data-mode='loading'] .site-top,
[data-mode='dive'] .site-top,
[data-mode='leave'] .site-top { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }
.load-failed .site-top,
.no-webgl .site-top { z-index: 55; opacity: 1; visibility: visible; } /* the links still work */
/* First visit: the page links stay quiet, so everything points at the box. */
[data-mode='sealed'] .site-nav__link:not(:hover, :focus-visible),
[data-mode='sealed'] .site-sound:not(:hover, :focus-visible) { background: rgb(0 0 0 / .3); border-color: rgb(255 255 255 / .16); color: rgb(255 255 255 / .66); }
/* (phones: the sound switch needs the room of a slightly smaller logo) */
@media (max-width: 640px) {
  .hub .logo-link { width: clamp(78px, 20.5vw, 136px); }
}
@media (max-width: 379px) {
  .hub .logo-link { width: 40px; }
}
/* (320 px phones: four links and the sound switch fit only a touch tighter) */
@media (max-width: 340px) {
  .hub .site-nav { gap: 3px; }
  .hub .site-nav__link { padding: .8em .62em .68em; letter-spacing: .02em; }
}

/* ---------------------------------------------------------------- buttons */

/* The price tag off the blister card (the story finale's primary action). */
.tag-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .58em;
  padding: .58em 1.15em .5em .7em;
  border: 3px solid #050505;
  border-radius: .42em .9em .9em .42em;
  background: linear-gradient(#7ad866, var(--c-accent) 55%, #4aa83b);
  box-shadow: 0 0 0 3px #fff, 0 6px 0 3px rgb(0 0 0 / .34);
  font: 400 clamp(17px, 1.55vw, 25px)/1 var(--f-logo);
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  color: #081606;
  cursor: pointer;
  rotate: -2.5deg;
  transition: rotate .35s var(--ease-out), translate .35s var(--ease-out);
}

.tag-btn:hover,
.tag-btn:focus-visible { rotate: -1deg; translate: 0 -3px; }
.tag-btn:focus-visible { outline-offset: 8px; border-radius: .42em .9em .9em .42em; }

.tag-btn__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);
}

.tag-btn--big {
  padding: .56em 1.2em .47em .72em;
  border-width: 4px;
  box-shadow: 0 0 0 4px #fff, 0 8px 0 4px rgb(0 0 0 / .36);
  font-size: clamp(22px, 2.3vw, 40px);
  animation: tug 3.6s var(--ease-in-out) infinite;
}

/* the tag tugs at its string now and then, like the box at its tape */
@keyframes tug {
  0%, 72%, 100% { transform: none; }
  78% { transform: translateY(-4px) rotate(1.4deg); }
  84% { transform: translateY(1px) rotate(-.8deg); }
  90% { transform: translateY(-2px) rotate(.5deg); }
}

.quiet {
  font: 500 clamp(10.5px, .82vw, 12px)/1 var(--f-mono);
  letter-spacing: .06em;
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / .34);
  text-underline-offset: .32em;
  color: rgb(244 244 240 / .62);
  text-shadow: 0 1px 10px rgb(0 0 0 / .8);
  transition: color .2s ease, text-decoration-color .2s ease;
}

.quiet:hover,
.quiet:focus-visible { color: #fff; text-decoration-color: #fff; }

/* Sticker lettering: white (or brand green) letters, thick black outline. */
.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: #050505;
  -webkit-text-stroke: .19em #050505;
}

.stk--green { color: var(--c-accent); }
.stk--pink { color: #ff7fd0; }
.stk--gold { color: #ffc93c; }
.stk--red { color: #ff6a52; }

/* ----------------------------------------------------------------- sealed */

.sealed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(max(3.4vh, 16px) + env(safe-area-inset-bottom));
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--gutter);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .6s var(--ease-out), visibility 0s .6s;
}

[data-mode='sealed'] .sealed {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .9s ease .2s, transform 1.2s var(--ease-out) .2s;
}

/* First reveal: the box comes out of the dark first (the spot flickers on),
   then the call to action, then the cartons' tags. */
.is-first[data-mode='sealed'] .sealed { transition-delay: 1.35s; }

/* The box and its button are one thing: pointing at the box lifts the tag. */
[data-mode='sealed'][data-hover='box'] .tag-btn--big { rotate: -1deg; translate: 0 -3px; }

.sealed > * { pointer-events: auto; }

.sealed__kicker {
  margin: 0 0 .95em;
  font: 400 clamp(15px, 1.5vw, 24px)/1.3 var(--f-ui);
  letter-spacing: .005em;
  text-shadow: 0 1px 18px rgb(0 0 0 / .8), 0 0 2px rgb(0 0 0 / .6);
  text-wrap: balance;
  pointer-events: none;
}

.sealed__hint {
  margin: 1.75em 0 0;
  font: 500 clamp(8.5px, .68vw, 10.5px)/1 var(--f-mono);
  letter-spacing: .22em;
  text-indent: .22em;
  text-transform: uppercase;
  color: rgb(244 244 240 / .46);
  pointer-events: none;
}

.sealed .quiet { margin-top: 1.25em; padding: .35em .2em; }

/* Carton hang tags: kraft paper, punched hole, stencil name. They follow the
   cartons (transform set per frame) and stay in the half-dark with them. */
.ctag {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9;
  display: grid;
  grid-template-columns: auto auto;
  column-gap: .6em;
  align-items: baseline;
  margin: 0;
  padding: .55em .85em .46em 1.9em;
  border: 2px solid #050505;
  border-radius: 6px;
  background: linear-gradient(90deg, #a98356 0 1.25em, #dcc09a 1.25em);
  box-shadow: 0 3px 0 rgb(0 0 0 / .45);
  white-space: nowrap;
  color: #1c120a;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .5s ease, visibility 0s .5s;
  will-change: transform;
}

.ctag::before {
  content: '';
  position: absolute;
  left: .44em;
  top: 50%;
  width: .46em;
  height: .46em;
  margin-top: -.23em;
  border-radius: 50%;
  background: #050505;
}

.ctag__no { font: 700 9px/1 var(--f-mono); letter-spacing: .06em; opacity: .7; }
.ctag__name { font: 400 clamp(10px, .86vw, 12.5px)/1 var(--f-block); letter-spacing: .05em; }

.ctag__note {
  grid-column: 1 / -1;
  margin-top: .5em;
  font: 700 8.5px/1 var(--f-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .66;
}

[data-mode='sealed'] .ctag { opacity: .66; visibility: visible; transition: opacity 1.2s ease .7s; }
.is-first[data-mode='sealed'] .ctag { transition-delay: 2.2s; }
/* open: the tags name the playsets (no note); the one pointed at hands over to its card */
[data-mode='open'] .ctag { opacity: .92; visibility: visible; transition: opacity .6s ease; }
[data-mode='open'] .ctag__note { display: none; }
[data-mode='open'][data-focus='dock'] #tag-dock,
[data-mode='open'][data-focus='run'] #tag-run { opacity: 0; }

/* Parcel #004's tag (the teaser, src/hub/teaser.js): the same kraft tag, a
   size smaller and left in the half-dark with its parcel, so the eye finds it
   after everything else; it comes up last and lights up when pointed at. A
   button only so that keyboard and touch can ask for its one line (.padline);
   it is not a link. */
.ctag--pad {
  z-index: 8;
  font: inherit;
  font-size: 14px;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: auto;
  cursor: help;
  filter: brightness(.5) saturate(.8);
  transition: opacity .5s ease, visibility 0s .5s, filter .25s ease;
}

.ctag--pad .ctag__no { font-size: 8.5px; }
.ctag--pad .ctag__name { font-size: clamp(9.5px, .78vw, 11.5px); }
.ctag--pad .ctag__note { font-size: 8px; }

[data-mode='sealed'] .ctag--pad { opacity: .9; transition: opacity 1.4s ease 1.3s, filter .25s ease; }
.is-first[data-mode='sealed'] .ctag--pad { transition-delay: 3.4s, 0s; }
[data-mode='open'] .ctag--pad { opacity: .95; filter: brightness(.72) saturate(.9); transition: opacity .8s ease .3s, filter .25s ease; }
[data-mode='open'] .ctag--pad .ctag__note { display: block; }
/* (a playset pointed at: it steps further back) */
[data-mode='open'][data-focus='dock'] .ctag--pad,
[data-mode='open'][data-focus='run'] .ctag--pad { opacity: .55; }
[data-mode] .ctag--pad:hover,
[data-mode] .ctag--pad:focus-visible,
[data-mode] .ctag--pad.is-on { opacity: 1; filter: none; }
[data-mode] .ctag--pad.is-off { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
[data-hover='pad'] .gl { cursor: help; }

/* Parcel #005's tag (the capsule machine, src/hub/capsule): sealed — left in
   the half-dark with its unlit machine, locked like the cartons; open — it
   names the machine and pointing at it points at the machine. */
.ctag--cap {
  z-index: 8;
  font: inherit;
  font-size: 14px;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity .5s ease, visibility 0s .5s, filter .25s ease;
}

[data-mode='sealed'] .ctag--cap { cursor: not-allowed; opacity: .9; filter: brightness(.5) saturate(.8); transition: opacity 1.4s ease 1.1s, filter .25s ease; }
.is-first[data-mode='sealed'] .ctag--cap { transition-delay: 3s, 0s; }
[data-mode='sealed'] .ctag--cap:hover,
[data-mode='sealed'] .ctag--cap:focus-visible { filter: brightness(.8); }
[data-mode='open'] .ctag--cap { border-color: #050505; box-shadow: 0 3px 0 rgb(0 0 0 / .45), 0 0 18px rgb(255 95 200 / .35); }
[data-mode='open'][data-focus='capsule'] .ctag--cap { opacity: 0; }
/* (a playset pointed at: it steps back with its machine) */
[data-mode='open'][data-focus='dock'] .ctag--cap,
[data-mode='open'][data-focus='run'] .ctag--cap { opacity: .55; }
[data-mode] .ctag--cap.is-off { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
[data-mode='sealed'][data-hover='capsule'] .gl { cursor: not-allowed; }
[data-mode='open'][data-hover='capsule'] .gl,
[data-mode='machine'][data-hover='crank'] .gl { cursor: pointer; }

/* Parcel #006's tag (the stockroom, src/hub/stockroom.js): like the machine's —
   locked with the cartons while the box is sealed; once open, the way to the
   collection page. Its second line is the size of the collection. */
.ctag--stock {
  z-index: 8;
  font: inherit;
  font-size: 14px;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity .5s ease, visibility 0s .5s, filter .25s ease;
}

[data-mode='sealed'] .ctag--stock { cursor: not-allowed; opacity: .9; filter: brightness(.5) saturate(.8); transition: opacity 1.4s ease 1.2s, filter .25s ease; }
.is-first[data-mode='sealed'] .ctag--stock { transition-delay: 3.1s, 0s; }
[data-mode='sealed'] .ctag--stock:hover,
[data-mode='sealed'] .ctag--stock:focus-visible { filter: brightness(.8); }
[data-mode='open'] .ctag--stock { box-shadow: 0 3px 0 rgb(0 0 0 / .45), 0 0 16px rgb(255 201 60 / .22); }
[data-mode='open'][data-focus='stockroom'] .ctag--stock { opacity: 0; }
[data-mode='open'][data-focus='dock'] .ctag--stock,
[data-mode='open'][data-focus='run'] .ctag--stock,
[data-mode='open'][data-focus='capsule'] .ctag--stock { opacity: .55; }
[data-mode='open'][data-focus='stockroom'] .ctag--cap,
[data-mode='open'][data-focus='stockroom'] .ctag--pad { opacity: .55; }
/* (the camera leans over the dock to the crate: the playsets' tags step out) */
[data-mode='open'][data-focus='stockroom'] #tag-dock,
[data-mode='open'][data-focus='stockroom'] #tag-run { opacity: 0; }
[data-mode] .ctag--stock.is-off { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
.ctag--stock .ctag__live { font-size: 8.5px; color: #3a2a08; }
.ctag--stock .ctag__live::before { background: #b9831c; box-shadow: 0 0 0 .16em rgb(185 131 28 / .28); }
[data-mode='sealed'][data-hover='stockroom'] .gl { cursor: not-allowed; }
[data-mode='open'][data-hover='stockroom'] .gl { cursor: pointer; }

/* Parcel #007's tag (the ticket booth, src/hub/booth.js): like the stockroom's — locked with the cartons while the box is
   sealed; once open, the way to The Ticket Booth page. Its second line says what it is (the X raffle). */
.ctag--booth {
  z-index: 8;
  font: inherit;
  font-size: 14px;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity .5s ease, visibility 0s .5s, filter .25s ease;
}
[data-mode='sealed'] .ctag--booth { cursor: not-allowed; opacity: .9; filter: brightness(.5) saturate(.8); transition: opacity 1.4s ease 1.25s, filter .25s ease; }
.is-first[data-mode='sealed'] .ctag--booth { transition-delay: 3.2s, 0s; }
[data-mode='sealed'] .ctag--booth:hover,
[data-mode='sealed'] .ctag--booth:focus-visible { filter: brightness(.8); }
[data-mode='sealed'] .ctag--booth .ctag__live { display: none; }
[data-mode='open'] .ctag--booth { box-shadow: 0 3px 0 rgb(0 0 0 / .45), 0 0 16px rgb(255 170 90 / .3); }
[data-mode='open'][data-focus='booth'] .ctag--booth { opacity: 0; }
[data-mode='open'][data-focus='dock'] .ctag--booth,
[data-mode='open'][data-focus='capsule'] .ctag--booth,
[data-mode='open'][data-focus='stockroom'] .ctag--booth { opacity: .55; }
/* (the run pointed at: the camera leans in under the booth, its tag would lie on the run playset) */
[data-mode='open'][data-focus='run'] .ctag--booth { opacity: 0; visibility: hidden; }
[data-mode='open'][data-focus='booth'] .ctag--cap,
[data-mode='open'][data-focus='booth'] .ctag--stock,
[data-mode='open'][data-focus='booth'] .ctag--pad { opacity: .55; }
/* (the camera leans over the run playset to the booth: the playsets' tags step out) */
[data-mode='open'][data-focus='booth'] #tag-dock,
[data-mode='open'][data-focus='booth'] #tag-run { opacity: 0; }
/* (the machine pointed at: its card stands over the dock playset, whose tag stood beside the card's button) */
[data-mode='open'][data-focus='capsule'] #tag-dock,
[data-mode='open'][data-focus='capsule'] #tag-run { opacity: 0; }
[data-mode] .ctag--booth.is-off { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
.ctag--booth .ctag__live { font-size: 8.5px; color: #4a1a08; }
.ctag--booth .ctag__live::before { background: #ff5a46; box-shadow: 0 0 0 .16em rgb(255 90 70 / .3); }
[data-mode='sealed'][data-hover='booth'] .gl { cursor: not-allowed; }
[data-mode='open'][data-hover='booth'] .gl { cursor: pointer; }

.padline {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 12;
  margin: 0;
  pointer-events: none;
}

.padline > span {
  display: block;
  padding: .62em 1em .6em;
  border: 1.5px solid rgb(220 192 154 / .5);
  border-radius: 999px;
  background: rgb(14 10 7 / .94);
  box-shadow: 0 3px 0 rgb(0 0 0 / .45);
  font: 600 clamp(11.5px, .9vw, 13px)/1.2 var(--f-ui);
  letter-spacing: .01em;
  white-space: nowrap;
  color: #f1e6d0;
  opacity: 0;
  scale: .9;
  transition: opacity .25s ease, scale .3s ease;
}

.padline.is-on > span { opacity: 1; scale: 1; transition: opacity .15s ease, scale .45s var(--pop); }
body:not([data-mode='sealed'], [data-mode='open']) .padline { visibility: hidden; }

.locked {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 12;
  margin: 0;
  pointer-events: none;
}

.locked > span {
  display: block;
  padding: .62em .9em .52em;
  border: 2px solid #050505;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 3px 0 rgb(0 0 0 / .45);
  font: 400 clamp(10px, .86vw, 12.5px)/1 var(--f-block);
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #050505;
  opacity: 0;
  scale: .8;
  rotate: -3deg;
  transition: opacity .25s ease, scale .3s ease;
}

.locked.is-on > span { opacity: 1; scale: 1; transition: opacity .15s ease, scale .45s var(--pop); }
body:not([data-mode='sealed']) .locked { display: none; }

/* ------------------------------------------------------------------- open */

.open {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility 0s .45s;
}

[data-mode='open'] .open { opacity: 1; visibility: visible; transition: opacity 1s ease .15s; }

.open__intro {
  position: absolute;
  left: 50%;
  bottom: calc(max(9.5vh, 64px) + env(safe-area-inset-bottom));
  width: min(92vw, 30em);
  translate: -50% 0;
  text-align: center;
  transition: opacity .45s ease, translate .6s var(--ease-out);
}

[data-focus='dock'] .open__intro,
[data-focus='run'] .open__intro,
[data-focus='capsule'] .open__intro,
[data-focus='stockroom'] .open__intro,
[data-focus='booth'] .open__intro { opacity: 0; translate: -50% 10px; }

.open__kicker {
  margin: 0;
  font: 400 clamp(24px, 2.7vw, 46px)/1 var(--f-logo);
  letter-spacing: .004em;
  text-transform: uppercase;
  color: #fff;
  -webkit-text-stroke: .05em #050505;
  paint-order: stroke fill;
  text-shadow: 0 .09em 0 rgb(0 0 0 / .45);
  rotate: -1.5deg;
}

.open__line {
  margin: .7em 0 0;
  font: 400 clamp(14px, 1.2vw, 19px)/1.35 var(--f-ui);
  text-shadow: 0 1px 16px rgb(0 0 0 / .85), 0 0 2px rgb(0 0 0 / .6);
  text-wrap: balance;
}

.open__foot {
  position: absolute;
  left: 50%;
  bottom: calc(max(3.2vh, 16px) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  translate: -50% 0;
  pointer-events: auto;
}

.open__foot .quiet { padding: .35em .2em; }

.pager { display: none; gap: 10px; }

.pager__dot {
  width: 30px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.pager__dot::before {
  content: '';
  display: block;
  width: 9px;
  height: 9px;
  margin: 0 auto;
  border: 1.5px solid rgb(255 255 255 / .7);
  border-radius: 50%;
  transition: background-color .25s ease, scale .3s var(--pop);
}

.pager__dot.is-on::before { background: var(--c-accent); border-color: #fff; scale: 1.25; }

/* Playset cards: the title sticker, one line and the button, on the playset's
   side of the stage. Hidden (but still reachable with Tab: focusing a button
   points at its playset) until the playset is pointed at. */
.card {
  position: absolute;
  bottom: calc(max(8vh, 46px) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: min(34vw, 460px);
  opacity: 0;
  translate: 0 14px;
  transition: opacity .35s ease, translate .5s var(--ease-out);
}

/* (the left cards stand a little higher: the token's line lies under them) */
.card--dock,
.card--capsule,
.card--stockroom { left: clamp(20px, 5vw, 84px); bottom: calc(max(8.6vh, 62px) + env(safe-area-inset-bottom)); text-align: left; }
.card--run,
.card--booth { right: clamp(20px, 5vw, 84px); align-items: flex-end; text-align: right; }
.card.is-on { opacity: 1; translate: 0 0; transition: opacity .5s ease .12s, translate .7s var(--ease-out) .12s; }
.card.is-on > * { pointer-events: auto; }

.card__title {
  margin: 0;
  font: 400 clamp(34px, 4.6vw, 78px)/.86 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 / .32));
  rotate: -2deg;
}

.card--run .card__title,
.card--booth .card__title { rotate: 2deg; }
.card__title .stk { display: block; width: max-content; }
.card--run .card__title .stk,
.card--booth .card__title .stk { margin-left: auto; }

.card__line {
  max-width: 25em;
  margin: 1.25em 0 1.15em;
  font: 600 clamp(13.5px, 1.12vw, 17px)/1.42 var(--f-ui);
  text-shadow: 0 1px 14px rgb(0 0 0 / .9), 0 0 2px rgb(0 0 0 / .7);
  text-wrap: balance;
}

.card--run .tag-btn,
.card--booth .tag-btn { rotate: 2deg; }
.card--run .tag-btn:hover,
.card--run .tag-btn:focus-visible,
.card--booth .tag-btn:hover,
.card--booth .tag-btn:focus-visible { rotate: .6deg; }

/* ------------------------------------------------------ the capsule machine */

/* The machine view (docs/CAPSULES.md): the camera is at the machine; its
   panel sits beside it (under it on a tall screen). After a pull the panel
   steps away and the figure's card takes its place. */
.machine {
  --r-common: #f4f4f0;
  --r-rare: #57cfff;
  --r-epic: #b46bff;
  --r-legendary: #ffc93c;
  --r-secret: #39ff88;
  --neon: #ff5fc8;
  --gold: #ffc53d;
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility 0s .4s;
}

[data-mode='machine'] .machine { opacity: 1; visibility: visible; transition: opacity .7s ease .35s; }

/* a coin, drawn (the price, the balance) */
.coin {
  flex: none;
  display: inline-block;
  width: 1em;
  height: 1em;
  border: .09em solid #7a4c08;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff3bf 0 12%, #ffd35c 34%, #e9a92a 72%, #c98718);
  box-shadow: inset 0 0 0 .1em rgb(255 255 255 / .28), inset 0 0 0 .2em rgb(122 76 8 / .32);
}

.coin--s { font-size: .8em; }

.cpanel {
  position: absolute;
  left: clamp(20px, 6.5vw, 120px);
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: min(390px, 36vw);
  padding: 22px 24px 18px;
  border: 2px solid #050505;
  border-radius: 20px;
  background: linear-gradient(rgb(30 17 52 / .93), rgb(12 8 22 / .95));
  box-shadow: 0 0 0 2px var(--neon), 0 0 34px rgb(255 95 200 / .3), 0 9px 0 2px rgb(0 0 0 / .4);
  translate: 0 -50%;
  opacity: 0;
  scale: .97;
  pointer-events: none;
  transition: opacity .3s ease, scale .4s var(--ease-out), translate .4s var(--ease-out);
}

[data-mode='machine'] [data-cap='idle'] .cpanel,
[data-mode='machine'] [data-cap='pull'] .cpanel { opacity: 1; scale: 1; transition: opacity .45s ease .1s, scale .6s var(--pop) .1s, translate .5s var(--ease-out); }
[data-mode='machine'] [data-cap='idle'] .cpanel { pointer-events: auto; }
/* the coin is in, the crank turns: the panel only watches (the balance ticks down) */
[data-cap='pull'] .cpanel .tag-btn--crank { translate: 0 3px; filter: brightness(.8); }
[data-cap='pull'] .cpanel .pill,
[data-cap='pull'] .cpanel__foot { opacity: .45; }

.cpanel__kicker {
  margin: 0 0 .9em;
  font: 700 10px/1 var(--f-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #ff9bdc;
}

.cpanel__title {
  margin: 0 0 .5em;
  font: 400 clamp(30px, 3vw, 44px)/.9 var(--f-logo);
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: #fff;
  rotate: -2deg;
}

.cpanel__title .stk { margin-right: .22em; }

.cpanel__coins {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0 14px;
  font-size: 40px;
}

.cpanel__n {
  font: 400 1em/1 var(--f-block);
  letter-spacing: .01em;
  color: var(--gold);
  text-shadow: 0 3px 0 rgb(0 0 0 / .5);
  font-variant-numeric: tabular-nums;
}

.cpanel__k {
  font: 700 10px/1.5 var(--f-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgb(244 244 240 / .7);
}

.cpanel__who { display: block; letter-spacing: .06em; text-transform: none; color: rgb(244 244 240 / .5); }
.cpanel__who:empty { display: none; }

.cpanel__lead {
  margin: 2px 0 14px;
  font: 600 clamp(15px, 1.25vw, 18px)/1.35 var(--f-ui);
  text-wrap: balance;
}

/* signed in: the coins; guest / offline: the invitation */
[data-wallet='signed'] .cpanel__lead,
.machine:not([data-wallet='signed']) .cpanel__coins { display: none; }
[data-wallet='offline'] .cpanel__lead { font-family: var(--f-block); font-weight: 400; letter-spacing: .03em; text-transform: uppercase; color: #ffb38a; }

/* The crank: the stage's price tag with the price on it. */
.tag-btn--crank { rotate: -1.5deg; margin: 2px 0 4px; }
.tag-btn--crank[hidden] { display: none; }

.tag-btn__price {
  display: inline-flex;
  align-items: center;
  gap: .32em;
  margin-left: .2em;
  padding: .26em .5em .2em .36em;
  border-radius: 999px;
  background: #081606;
  font: 400 .66em/1 var(--f-block);
  letter-spacing: .02em;
  color: var(--gold);
}

.tag-btn__price[hidden] { display: none; }

.tag-btn:disabled {
  cursor: not-allowed;
  filter: grayscale(.9) brightness(.62);
  translate: none;
  rotate: -1.5deg;
}

.cpanel__short {
  margin: 12px 0 0;
  font: 600 13.5px/1.45 var(--f-ui);
  color: #ffd0a8;
}

.cpanel__short[hidden] { display: none; }
.cpanel__earn { color: #fff; font-weight: 800; text-underline-offset: .2em; white-space: nowrap; }
.cpanel__earn:hover,
.cpanel__earn:focus-visible { color: var(--c-neon); }

.cpanel__row { display: flex; flex-wrap: wrap; gap: 10px; }

.pill {
  padding: .78em 1.15em .7em;
  border: 2px solid rgb(255 255 255 / .82);
  border-radius: 999px;
  background: rgb(0 0 0 / .35);
  font: 400 clamp(11px, .9vw, 12.5px)/1 var(--f-block);
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, translate .3s var(--ease-out);
}

.pill:hover,
.pill:focus-visible { background: #fff; color: #050505; translate: 0 -2px; }
.pill--solid { border-color: #050505; background: #fff; box-shadow: 0 0 0 2px #fff, 0 4px 0 2px rgb(0 0 0 / .4); color: #050505; }
.pill--solid:hover,
.pill--solid:focus-visible { background: var(--c-neon); }
.pill[hidden] { display: none; }
.pill:disabled { opacity: .4; cursor: not-allowed; translate: none; background: rgb(0 0 0 / .35); color: #fff; }

.cpanel__status {
  min-height: 1.4em;
  margin: 12px 0 0;
  font: 500 12px/1.45 var(--f-ui);
  color: rgb(244 244 240 / .66);
  text-wrap: pretty;
}

.cpanel__status:empty { min-height: 0; margin-top: 4px; }
.cpanel__status[data-kind='error'] { color: #ffb38a; }
.cpanel__status[data-kind='ok'] { color: #a9f59a; }

.cpanel__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  align-self: stretch;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgb(255 255 255 / .2);
}

.cpanel__foot .quiet {
  padding: .35em 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.cpanel__foot .quiet[hidden] { display: none; }
.cpanel__progress { color: var(--gold); }

/* Back: a round arrow in the bottom left corner of the screen, out of the
   panel (the machine -> the stage; a figure's card -> the machine). */
.cback {
  position: absolute;
  left: calc(max(var(--gutter), 22px) + env(safe-area-inset-left));
  bottom: calc(max(3.4vh, 22px) + env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 2px solid #050505;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px #fff, 0 5px 0 2px rgb(0 0 0 / .42);
  color: #050505;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  scale: .8;
  transition: opacity .25s ease, visibility 0s .25s, scale .3s ease, translate .3s var(--ease-out), background-color .2s ease;
}

[data-mode='machine'] [data-cap='idle'] .cback,
[data-mode='machine'] [data-cap='result'] .cback {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  scale: 1;
  transition: opacity .4s ease .25s, scale .5s var(--pop) .25s, translate .3s var(--ease-out), background-color .2s ease;
}

.cback:hover,
.cback:focus-visible { background: var(--c-neon); translate: -3px 0; }
.cback:focus-visible { outline-offset: 7px; border-radius: 50%; }
.cback__icon { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.is-shelf .cback { opacity: 0; visibility: hidden; pointer-events: none; }

/* The figure's card: what came out. No plate: the name stands on the stage
   like the playsets' titles. */
.cresult {
  --r: var(--r-common);
  position: absolute;
  left: clamp(20px, 6.5vw, 120px);
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: min(440px, 38vw);
  translate: 0 calc(-50% + 16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, translate .4s var(--ease-out);
}

.cresult[data-rarity='rare'] { --r: var(--r-rare); }
.cresult[data-rarity='epic'] { --r: var(--r-epic); }
.cresult[data-rarity='legendary'] { --r: var(--r-legendary); }
.cresult[data-rarity='secret'] { --r: var(--r-secret); }

[data-mode='machine'] [data-cap='result'] .cresult { opacity: 1; translate: 0 -50%; pointer-events: auto; transition: opacity .4s ease, translate .7s var(--pop); }

.cresult__top { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }

.cresult__rarity {
  padding: .5em .8em .4em;
  border: 2px solid #050505;
  border-radius: 6px;
  background: var(--r);
  box-shadow: 0 3px 0 rgb(0 0 0 / .45), 0 0 22px color-mix(in srgb, var(--r) 55%, transparent);
  font: 400 clamp(12px, 1vw, 15px)/1 var(--f-block);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #050505;
  rotate: -2deg;
}

.cresult__count {
  font: 700 clamp(15px, 1.3vw, 19px)/1 var(--f-mono);
  color: #fff;
  text-shadow: 0 1px 10px rgb(0 0 0 / .8);
}

.cresult__count[hidden] { display: none; }

/* NEW: a round sticker */
.cresult__count[data-fresh='true'] {
  display: grid;
  place-items: center;
  width: 3.5em;
  height: 3.5em;
  border: 2px solid #050505;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 2px #fff, 0 4px 0 2px rgb(0 0 0 / .4);
  font: 400 clamp(12px, 1vw, 14px)/1 var(--f-block);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-shadow: none;
  color: #081606;
  rotate: 9deg;
}

.cresult__name {
  margin: 0;
  font: 400 clamp(36px, 4.3vw, 70px)/.92 var(--f-logo);
  letter-spacing: -.012em;
  text-transform: uppercase;
  text-wrap: balance;
  color: #fff;
  -webkit-text-stroke: .1em #050505;
  paint-order: stroke fill;
  filter: drop-shadow(0 .07em 0 rgb(0 0 0 / .4));
  rotate: -1.5deg;
}

.cresult[data-rarity='legendary'] .cresult__name,
.cresult[data-rarity='secret'] .cresult__name { color: var(--r); }

.cresult__where {
  margin: 1.5em 0 0;
  font: 700 clamp(10px, .82vw, 12px)/1.3 var(--f-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--r);
  text-shadow: 0 1px 10px rgb(0 0 0 / .9);
}

.cresult__blurb {
  max-width: 26em;
  margin: .8em 0 0;
  font: 600 clamp(13.5px, 1.12vw, 17px)/1.42 var(--f-ui);
  text-shadow: 0 1px 14px rgb(0 0 0 / .9), 0 0 2px rgb(0 0 0 / .7);
  text-wrap: balance;
}

.cresult__blurb[hidden] { display: none; }

.cresult__note {
  margin: 1em 0 0;
  font: 500 clamp(10.5px, .82vw, 12px)/1.5 var(--f-mono);
  letter-spacing: .03em;
  color: rgb(244 244 240 / .7);
  text-shadow: 0 1px 10px rgb(0 0 0 / .9);
}

.cresult__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }

/* "Tap to skip" while the capsule is on its way */
.cskip {
  position: absolute;
  left: 50%;
  bottom: calc(max(3.2vh, 16px) + env(safe-area-inset-bottom));
  margin: 0;
  translate: -50% 0;
  font: 500 clamp(8.5px, .68vw, 10.5px)/1 var(--f-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgb(244 244 240 / .5);
  opacity: 0;
  transition: opacity .3s ease;
}

[data-mode='machine'] [data-cap='roll'] .cskip { opacity: 1; transition: opacity .5s ease .2s; }

/* ------------------------------------------------------------- the shelf */

/* The album: 8 locations x 5 places and the chase, owned figures as their
   pictures, missing ones as silhouettes; the odds, published. */
.shelf {
  --r-common: #f4f4f0;
  --r-rare: #57cfff;
  --r-epic: #b46bff;
  --r-legendary: #ffc93c;
  --r-secret: #39ff88;
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: calc(var(--site-top, 64px) + 6px) var(--gutter) max(16px, env(safe-area-inset-bottom));
  background: rgb(4 2 8 / .72);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.shelf[hidden] { display: none; }

.shelf__sheet {
  width: min(1000px, 100%);
  max-height: 100%;
  padding: 20px 26px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  border: 2px solid #050505;
  border-radius: 20px;
  background: linear-gradient(#1d1232, #0f0a1a);
  box-shadow: 0 0 0 2px #ff5fc8, 0 0 40px rgb(255 95 200 / .25), 0 10px 0 2px rgb(0 0 0 / .45);
  scrollbar-width: thin;
  scrollbar-color: rgb(255 255 255 / .3) transparent;
}

.shelf__head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px 22px;
  align-items: center;
  margin-bottom: 18px;
}

.shelf__title {
  margin: 0;
  font: 400 clamp(28px, 3vw, 44px)/.95 var(--f-logo);
  text-transform: uppercase;
  color: #fff;
  -webkit-text-stroke: .1em #050505;
  paint-order: stroke fill;
  rotate: -1.5deg;
  transform-origin: left center;
}

.shelf__lede { margin: .7em 0 0; font: 500 13px/1.4 var(--f-ui); color: rgb(244 244 240 / .7); }
.shelf__count { min-width: 150px; text-align: right; }

.shelf__progress {
  margin: 0;
  font: 400 clamp(24px, 2.4vw, 36px)/1 var(--f-block);
  color: #ffc53d;
  font-variant-numeric: tabular-nums;
}

.shelf__bar { height: 6px; margin-top: 8px; border-radius: 3px; background: rgb(255 255 255 / .14); overflow: hidden; }
.shelf__bar > span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #ff5fc8, #ffc53d); }
.shelf__note { margin: 6px 0 0; font: 500 10.5px/1.3 var(--f-mono); letter-spacing: .04em; color: rgb(244 244 240 / .55); }
.shelf__note:empty { display: none; }

.shelf__x {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid rgb(255 255 255 / .8);
  border-radius: 50%;
  background: none;
  font: 400 24px/1 var(--f-ui);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.shelf__x:hover,
.shelf__x:focus-visible { background: #fff; color: #050505; }

.shelf__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 30px; }
.shelf__row { --loc: #888; min-width: 0; }

.shelf__loc {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 7px;
  padding-left: 12px;
  border-left: 4px solid var(--loc);
  font: 400 11.5px/1 var(--f-block);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.shelf__locn { margin-left: auto; font: 700 10.5px/1 var(--f-mono); letter-spacing: .04em; color: rgb(244 244 240 / .55); }
.shelf__row.is-full .shelf__locn { color: var(--c-neon); }
.shelf__cells { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }

.mini {
  --r: var(--r-common);
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid #050505;
  border-radius: 12px;
  background: radial-gradient(90% 80% at 50% 38%, #5d4f82, #2c2344 78%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07);
  overflow: hidden;
  cursor: default;
  transition: translate .3s var(--ease-out), box-shadow .2s ease;
}

.mini[data-rarity='rare'] { --r: var(--r-rare); }
.mini[data-rarity='epic'] { --r: var(--r-epic); }
.mini[data-rarity='legendary'] { --r: var(--r-legendary); }
.mini[data-rarity='secret'] { --r: var(--r-secret); }

.mini.is-owned {
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--r) 34%, #2a1c44), #1b1230 70%);
  box-shadow: 0 0 0 2px var(--r), 0 4px 0 2px rgb(0 0 0 / .4);
  cursor: pointer;
}

.mini.is-owned:hover,
.mini.is-owned:focus-visible { translate: 0 -3px; box-shadow: 0 0 0 2px var(--r), 0 7px 0 2px rgb(0 0 0 / .4), 0 0 20px color-mix(in srgb, var(--r) 55%, transparent); }

/* owned: the picture fills its place (the renders carry their own backdrop) */
.mini__pic {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
}

.mini__pic.is-standin { inset: 8% 8% 6%; background-size: contain; }

/* missing: a silhouette (the silhouette render, or the picture blacked out) */
.mini:not(.is-owned) .mini__pic { inset: 4% 4% 2%; background-size: contain; filter: brightness(.6); }
/* (the rare ones are rimmed in their colour: the places worth filling) */
.mini[data-rarity='epic']:not(.is-owned) .mini__pic { filter: brightness(.6) drop-shadow(0 0 4px color-mix(in srgb, var(--r) 60%, transparent)); }
.mini[data-rarity='legendary']:not(.is-owned) .mini__pic,
.mini[data-rarity='secret']:not(.is-owned) .mini__pic { filter: brightness(.6) drop-shadow(0 0 5px color-mix(in srgb, var(--r) 85%, transparent)); }
.mini:not(.is-owned) .mini__pic.is-dark { filter: brightness(0); opacity: .7; }
.mini:not(.is-owned) .mini__pic.is-standin { filter: brightness(.22); opacity: .8; }

.mini__pip {
  position: absolute;
  left: 6px;
  top: 6px;
  width: 8px;
  height: 8px;
  border: 1.5px solid #050505;
  border-radius: 50%;
  background: var(--r);
}

.mini:not(.is-owned) .mini__pip { opacity: .7; }

.mini__n {
  position: absolute;
  right: 4px;
  bottom: 6px;
  padding: .28em .46em .22em;
  border-radius: 999px;
  background: #050505;
  font: 700 10.5px/1 var(--f-mono);
  color: #fff;
}

.mini__n:empty { display: none; }

/* the chase: one place, across the sheet */
.shelf__row--secret { grid-column: 1 / -1; display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 16px; padding-top: 12px; border-top: 1px dashed rgb(255 255 255 / .2); }
.shelf__row--secret .shelf__loc { flex: 1; flex-wrap: wrap; gap: 6px 12px; margin: 0; padding: 4px 0 4px 12px; border-left-color: var(--r-secret); }
.shelf__row--secret .shelf__locn { margin-left: 0; font-weight: 500; letter-spacing: .02em; text-transform: none; }
.shelf__row--secret .shelf__cells { flex: none; grid-template-columns: 1fr; width: clamp(60px, 8.5%, 84px); }

/* the odds, published: one strip over the album */
.shelf__odds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 18px;
  padding: 11px 0;
  border-top: 1px dashed rgb(255 255 255 / .2);
  border-bottom: 1px dashed rgb(255 255 255 / .2);
}

.shelf__h3 { margin: 0; font: 400 11.5px/1 var(--f-block); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.odds { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }

.odds__item {
  --r: var(--r-common);
  display: flex;
  align-items: baseline;
  gap: .6em;
  padding: .5em .8em .42em;
  border: 2px solid #050505;
  border-radius: 6px;
  background: var(--r);
  color: #050505;
}

.odds__item[data-rarity='rare'] { --r: var(--r-rare); }
.odds__item[data-rarity='epic'] { --r: var(--r-epic); }
.odds__item[data-rarity='legendary'] { --r: var(--r-legendary); }
.odds__item[data-rarity='secret'] { --r: var(--r-secret); }
.odds__name { font: 400 11px/1 var(--f-block); letter-spacing: .06em; text-transform: uppercase; }
.odds__pct { font: 700 13px/1 var(--f-mono); }
.shelf__fine { flex: 1 1 100%; margin: 0; font: 500 11px/1.45 var(--f-ui); color: rgb(244 244 240 / .58); }
.shelf__commit { font-family: var(--f-mono); font-size: 10.5px; white-space: nowrap; color: rgb(244 244 240 / .45); }

/* --------------------------------------------------- live numbers on the tags */

/* What is happening right now, under the name on a tag (src/hub/live.js): the
   raffle's tickets, the season and its top score, the coins. Hidden until its
   source has answered; tabular figures and a reserved width, so a number that
   ticks up never moves the tag. */
.ctag__live {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .55em;
  margin-top: .6em;
  font: 700 9px/1 var(--f-mono);
  letter-spacing: .05em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #17300f;
}

.ctag__live[hidden] { display: none; }

.ctag__live::before {
  content: '';
  flex: none;
  width: .5em;
  height: .5em;
  border-radius: 50%;
  background: var(--c-accent-dark);
  box-shadow: 0 0 0 .16em rgb(47 125 42 / .28);
}

.ctag__live b { display: inline-block; font-weight: 700; text-align: right; }
/* Under the dock's live line while its numbers are the sample (src/hub/ui.js markDockSample):
   the same yellow as the dock page's "Sample data". Only with the line itself. */
.ctag__sample {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: .5em;
  padding: .38em .55em .32em;
  border-radius: 2px;
  background: #ffd24a;
  box-shadow: 0 1px 0 rgb(0 0 0 / .35);
  font: 700 7.5px/1 var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #1c120a;
}
.ctag__sample[hidden],
.ctag__live[hidden] + .ctag__sample { display: none; }
.ctag__sep { font-style: normal; opacity: .55; }
[data-mode='sealed'] .ctag__live { margin-top: .5em; opacity: .85; }
.ctag--cap .ctag__live,
.ctag--pad .ctag__live { font-size: 8.5px; }

/* ------------------------------------------------------------ the token tag */

/* The token's hang tag (src/hub/token.js): a kraft price tag tied to the
   stage, bottom left. `data-view`: compact (one line), full (the whole tag),
   off (the stage is busy). */
.token {
  position: fixed;
  left: var(--gutter);
  bottom: calc(max(1.9vh, 12px) + env(safe-area-inset-bottom));
  z-index: 11;
  color: #1c120a;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .4s ease, visibility 0s .4s;
}

[data-mode='sealed'] .token,
[data-mode='open'] .token { opacity: 1; visibility: visible; transition: opacity .9s ease .45s; }
/* first visit: it comes up last, after the box, its button and the cartons' tags */
.is-first[data-mode='sealed'] .token { transition-delay: 3.2s; }
[data-mode] .token[data-view='off'] { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }

.token__line {
  position: relative;
  display: flex;
  align-items: center;
  gap: .7em;
  margin: 0;
  padding: .62em 1em .54em 2em;
  border: 2px solid #050505;
  border-radius: 6px;
  background: linear-gradient(90deg, #a98356 0 1.3em, #dcc09a 1.3em);
  box-shadow: 0 3px 0 rgb(0 0 0 / .45);
  font: 700 9.5px/1 var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: auto;
  rotate: -1.2deg;
  transform-origin: left bottom;
  transition: opacity .3s ease, translate .45s var(--ease-out), filter .25s ease;
}

.token__line::before {
  content: '';
  position: absolute;
  left: .46em;
  top: 50%;
  width: .5em;
  height: .5em;
  margin-top: -.25em;
  border-radius: 50%;
  background: #050505;
}

/* the first screen points at the box: the line keeps to the half-dark there */
[data-mode='sealed'] .token__line { filter: brightness(.62) saturate(.85); }
[data-mode='sealed'] .token__line:hover,
[data-mode='sealed'] .token__line:focus-within { filter: none; }
.token[data-view='full'] .token__line { opacity: 0; translate: 0 8px; pointer-events: none; }

.token__dot { opacity: .5; }

.token__tick {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: 0;
  border: 0;
  background: none;
  font: 400 1.22em/1 var(--f-block);
  letter-spacing: .04em;
  color: inherit;
  cursor: pointer;
}

.token__tick::after {
  content: '';
  border: .3em solid transparent;
  border-bottom-color: currentColor;
  translate: 0 -.16em;
  opacity: .6;
}

.token__soon { opacity: .78; }
.token[data-contract='set'] .token__soon { display: none; }

.token__ca {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .34em .4em .3em .7em;
  border: 1.5px solid #050505;
  border-radius: 999px;
  background: #fff6e4;
  font: 700 11.5px/1 var(--f-mono);
  letter-spacing: .02em;
  text-transform: none;
  color: #1c120a;
  cursor: copy;
  transition: background-color .2s ease, translate .25s var(--ease-out);
}

.token__ca[hidden] { display: none; }
.token__ca:hover,
.token__ca:focus-visible { background: #fff; translate: 0 -1px; }
.token__ca--s { padding: .3em .7em .26em; font-size: 10px; }

.token__copy {
  padding: .36em .6em .3em;
  border-radius: 999px;
  background: #1c120a;
  font: 700 8.5px/1 var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #f1e6d0;
}

.token__buy {
  display: inline-flex;
  align-items: baseline;
  gap: .5em;
  padding: .4em .8em .32em;
  border: 1.5px solid #050505;
  border-radius: 999px;
  background: var(--c-accent);
  font: 400 1.1em/1 var(--f-block);
  letter-spacing: .05em;
  text-decoration: none;
  color: #081606;
}

.token__note { font: 700 7.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.token__buy:not([aria-disabled]) .token__note,
.token__btn:not([aria-disabled]) .token__note { display: none; }
.token__buy[aria-disabled='true'] { border-style: dashed; background: none; color: rgb(28 18 10 / .62); cursor: not-allowed; }

/* the whole tag */
.token__tag {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(322px, calc(100vw - 2 * var(--gutter)));
  padding: 13px 15px 10px 17px;
  border: 2px solid #050505;
  border-radius: 10px;
  background: linear-gradient(172deg, #e6cda9, #d7b98f 70%, #cfae82);
  box-shadow: 0 4px 0 rgb(0 0 0 / .45), 0 16px 34px rgb(0 0 0 / .4);
  rotate: -1.6deg;
  transform-origin: 8% 100%;
  opacity: 0;
  translate: 0 14px;
  pointer-events: none;
  transition: opacity .3s ease, translate .45s var(--ease-out);
}

.token[data-view='full'] .token__tag { opacity: 1; translate: 0 0; pointer-events: auto; transition: opacity .4s ease .05s, translate .6s var(--pop) .05s; }

/* the punched, reinforced hole and the string it hangs by */
.token__tag::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 14px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #050505;
  box-shadow: 0 0 0 4px #a98356, 0 0 0 5.5px rgb(28 18 10 / .5);
}

.token__tag::after {
  content: '';
  position: absolute;
  right: calc(100% - 19px);
  top: 18px;
  width: 140px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, #e9dcc3 30%);
  transform-origin: right center;
  rotate: 24deg;
  pointer-events: none;
}

.token__x {
  position: absolute;
  right: 7px;
  top: 7px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1.5px solid #050505;
  border-radius: 50%;
  background: none;
  font: 400 15px/1 var(--f-ui);
  color: #1c120a;
  cursor: pointer;
}

.token__x:hover,
.token__x:focus-visible { background: #1c120a; color: #f1e6d0; }
/* (the stage itself shows the whole tag: nothing to close) */
.token[data-base='full'] .token__x { display: none; }

.token__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 9px 30px;
}

.token:not([data-base='full']) .token__head { margin-right: 24px; }

.token__ticker {
  font: 400 27px/.9 var(--f-logo);
  letter-spacing: -.005em;
  color: #0d1a0b;
}

.token__chain {
  padding: .5em .7em .42em;
  border-radius: 4px;
  background: #1c120a;
  font: 700 8.5px/1 var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #e9d4b0;
}

.token__rows { margin: 0; padding: 6px 0 0; border-top: 1.5px dashed rgb(28 18 10 / .45); }
.token__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 23px; }
.token__row dt { font: 700 8.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; opacity: .68; }
.token__row dd { margin: 0; font: 700 12px/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.token__row .token__soon { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }

.token__actions { display: flex; gap: 5px; margin-top: 8px; }

.token__btn {
  display: inline-flex;
  align-items: baseline;
  gap: .5em;
  padding: .7em .9em .58em;
  border: 2px solid #050505;
  border-radius: 999px;
  background: #1c120a;
  font: 400 10px/1 var(--f-block);
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: #f1e6d0;
  transition: translate .25s var(--ease-out), background-color .2s ease, color .2s ease;
}

.token__btn--buy { background: var(--c-accent); box-shadow: 0 2px 0 rgb(0 0 0 / .4); color: #081606; }
.token__btn--x { text-transform: none; letter-spacing: .02em; }
.token__btn--x[hidden] { display: none; }
.token__xmark { font-family: var(--f-block); }
.token__btn[href]:hover,
.token__btn[href]:focus-visible { translate: 0 -2px; background: #fff; color: #050505; }
.token__btn[aria-disabled='true'] { border-style: dashed; background: none; box-shadow: none; color: rgb(28 18 10 / .6); cursor: not-allowed; }

.token__fine {
  margin: 8px 0 0;
  font: 700 7.5px/1 var(--f-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .6;
}

.token__toast {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  margin: 0;
  padding: .62em .9em .52em;
  border: 2px solid #050505;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 3px 0 rgb(0 0 0 / .45);
  font: 400 10.5px/1 var(--f-block);
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #050505;
  translate: -50% calc(-100% - 8px);
  opacity: 0;
  scale: .8;
  pointer-events: none;
  transition: opacity .25s ease, scale .3s ease;
}

.token__toast:empty { display: none; }
.token__toast.is-on { opacity: 1; scale: 1; transition: opacity .15s ease, scale .45s var(--pop); }

/* a screen with no room for the whole tag beside the open stage's line (the
   visitor opened it from its one line): the line steps away while it is up */
@media (max-width: 1159px) {
  [data-mode='open'][data-token='full'] .open__intro,
  [data-mode='open'][data-token='full'] .open__foot { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
  [data-mode='sealed'][data-token='full'] .sealed .quiet,
  [data-mode='sealed'][data-token='full'] .sealed__hint { opacity: 0; pointer-events: none; }
}

.no-webgl .token,
.load-failed .token { opacity: 1; visibility: visible; z-index: 72; } /* the token still says what it is */

/* --------------------------------------------------------- iris + curtain */

.iris {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  visibility: hidden;
}

.curtain {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .42s ease;
}

.curtain.is-on { opacity: 1; pointer-events: auto; }
.curtain:not(.is-on) { transition: opacity .95s ease; }
.curtain.is-instant { transition: none; }

/* ------------------------------------------------------------------ loader */

/* The story's loader, so the two pages open the same way: sticker wordmark, a
   strip of packing tape sealing as the stage builds, the edition line. */
.loader {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: #000;
  pointer-events: none;
  transition: opacity 1.25s ease, visibility 0s 1.3s;
}

.loader.is-done { opacity: 0; }
.loader.is-gone { visibility: hidden; }

/* Later visits and the way back from the story: only the black, and the
   wordmark with its tape strip if the stage takes a moment (no typed line). */
.loader--quiet { transition: opacity .95s ease, visibility 0s 1s; }
.loader--quiet .loader__inner { transition-delay: .7s; }
.loader--quiet .edition { visibility: hidden; }
.loader--quiet.is-done .loader__inner { opacity: 0; transition-delay: 0s; transition-duration: .5s; }
.loader--quiet.is-done .loader__brand { transform: none; }

.loader__brand {
  font-size: clamp(36px, 4.7vw, 84px);
  transition: transform 1.3s var(--ease-in-out);
}

.loader.is-done .loader__brand { transform: translateY(-3vh) scale(.92); }

.loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1s ease, transform 1.4s var(--ease-out);
}

.brand-ready .loader__inner,
.fonts-ready .loader__inner,
.load-failed .loader__inner { opacity: 1; transform: none; }

/* The logo (src/core/logo.js), alive while the stage builds (css/logo-live.css). */
.loader__logo {
  width: 5.6em;
  margin: 0;
  font-size: 1em;
}

.seal {
  position: relative;
  width: 4.4em;
  height: .36em;
  margin-top: .34em;
  rotate: -1.4deg;
}

.seal__track {
  position: absolute;
  inset: 0;
  border: 1px dashed rgb(255 255 255 / .34);
  border-radius: 2px;
}

.seal__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--seal, 0) * 100%);
  background: var(--tape, none) left center / auto 100% repeat-x, var(--c-accent);
  clip-path: polygon(0 0, 100% 0, calc(100% - .09em) 20%, 100% 40%, calc(100% - .09em) 60%, 100% 80%, calc(100% - .09em) 100%,
    0 100%, .09em 80%, 0 60%, .09em 40%, 0 20%);
  transition: width .7s var(--ease-out);
}

.seal__fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgb(255 255 255 / .34), rgb(255 255 255 / .06) 42%, transparent 55%, rgb(0 0 0 / .12));
}

.edition {
  position: relative;
  display: flex;
  align-items: center;
  gap: .55em;
  margin: .5em 0 0;
  font: 400 max(12px, .22em)/1 var(--f-block);
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #f1f1ea;
}

.edition__no {
  padding: .34em .5em .28em;
  border: 2px solid #050505;
  border-radius: .32em;
  background: var(--c-accent);
  box-shadow: 0 0 0 2px #fff;
  color: #07150a;
  rotate: -4deg;
}

.edition__no:empty { display: none; }

.edition__caret {
  align-self: flex-end;
  width: .55em;
  height: .14em;
  margin: 0 0 .05em -.4em;
  background: var(--c-accent);
  animation: blink 1.05s steps(1) infinite;
}

.edition__pct {
  position: absolute;
  left: 100%;
  margin-left: .7em;
  font: 400 .92em/1 var(--f-mono);
  letter-spacing: .02em;
  color: #8f8f88;
  transition: opacity .6s ease;
}

.loader.is-done .edition__pct { opacity: 0; }

@keyframes blink { 50% { opacity: 0; } }

/* ----------------------------------------------------------------- notices */

.notice {
  position: fixed;
  left: 50%;
  bottom: 12vh;
  z-index: 70;
  width: min(92vw, 440px);
  margin: 0;
  padding: 18px 22px;
  translate: -50% 0;
  border: 1px solid rgb(255 255 255 / .14);
  border-radius: 4px;
  background: rgb(10 10 10 / .92);
  text-align: center;
  font: 400 13px/1.5 var(--f-ui);
  color: #cfcfcf;
}

.notice[hidden] { display: none; }
.notice__title { margin: 0 0 4px; font: 400 18px/1.3 var(--f-block); letter-spacing: .02em; color: #fff; }
.notice__text { margin: 0; }

.notice__btn {
  margin-top: 12px;
  padding: 7px 16px;
  border: 1px solid #fff;
  border-radius: 999px;
  background: none;
  font: 600 10px/1 var(--f-ui);
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
}

.notice--toast { bottom: 24px; }

/* No WebGL: a warm studio backdrop instead of the stage, the layers still work. */
.no-webgl body { background: radial-gradient(60% 55% at 50% 42%, #3a2716, #120b06 62%, #000); }
.no-webgl .gl { display: none; }
.no-webgl .ctag--pad,
.no-webgl .padline { display: none; } /* nothing on stage for it to follow */
.load-failed .seal,
.load-failed .edition { display: none; }

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

/* Portrait phones: the box fills the stage and the call to action sits under
   it; open — BOBBLE on top, the playsets a swipe pair under him, one card. */
@media (max-width: 760px), (max-aspect-ratio: 4 / 5) {
  /* the token: one line along the bottom edge in both states (the layers above
     it stand 36px higher); a tap on the ticker lifts the whole tag as a sheet */
  .sealed { bottom: calc(max(3.4vh, 18px) + 36px + env(safe-area-inset-bottom)); }
  .token { left: 0; right: 0; bottom: calc(max(1.2vh, 9px) + env(safe-area-inset-bottom)); display: flex; justify-content: center; }
  .token__line { rotate: 0deg; font-size: 9px; padding: .7em 1em .6em 2em; }
  .token__tag {
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
    padding: 16px 18px 14px 20px;
    rotate: 0deg;
    translate: 0 30px;
  }
  .token__tag::after { display: none; }
  .token__x,
  .token[data-base='full'] .token__x { display: block; width: 30px; height: 30px; font-size: 19px; }
  .token__head,
  .token:not([data-base='full']) .token__head { margin-right: 34px; }
  .token__ticker { font-size: 34px; }
  .token__row { min-height: 32px; }
  .token__btn { padding: .9em 1.15em .78em; font-size: 11px; }
  /* narrow phones: the chain chip drops under the ticker instead of running under the close
     button, and the three pills wrap instead of running off the card */
  .token__head { flex-wrap: wrap; row-gap: 7px; }
  .token__actions { flex-wrap: wrap; }
  .open__foot { bottom: calc(max(3.2vh, 16px) + 36px + env(safe-area-inset-bottom)); }
  .sealed__kicker { font-size: clamp(15px, 4.3vw, 19px); }
  .tag-btn--big { font-size: clamp(27px, 8.2vw, 38px); }
  .sealed__hint { margin-top: 1.6em; }
  .ctag { padding: .46em .7em .4em 1.7em; }
  /* sealed: the cartons only peek in from the edges; a tap on one explains */
  [data-mode='sealed'] .ctag { display: none; }
  .ctag__no { display: none; }
  .ctag__name { font-size: 9.5px; }
  .ctag__note { font-size: 7.5px; letter-spacing: .1em; }
  /* the live line: its first two facts (the playsets stand side by side) */
  .ctag__live { gap: .45em; font-size: 8px; letter-spacing: .02em; }
  .ctag__live .ctag__seg:nth-of-type(n + 3),
  .ctag__live .ctag__sep:nth-of-type(n + 2) { display: none; }
  /* parcel #004 keeps its tag (under the header) and its number: it is all there is to read of it */
  [data-mode='sealed'] .ctag--pad,
  [data-mode='sealed'] .ctag--cap { display: grid; }
  .ctag--pad .ctag__no,
  .ctag--cap .ctag__no { display: inline; }
  .ctag--pad .ctag__name { font-size: 9.5px; }
  .ctag--pad .ctag__note,
  .ctag--cap .ctag__note { font-size: 8px; }
  .padline > span { font-size: 11.5px; }

  /* something pointed at: its card takes the room, the pager shows there are three */
  [data-mode='open'][data-focus='dock'] .ctag,
  [data-mode='open'][data-focus='run'] .ctag,
  [data-mode='open'][data-focus='capsule'] .ctag,
  [data-mode='open'][data-focus='stockroom'] .ctag,
  [data-mode='open'][data-focus='booth'] .ctag { opacity: 0; }
  [data-mode='open'][data-focus='dock'] .ctag--pad,
  [data-mode='open'][data-focus='run'] .ctag--pad,
  [data-mode='open'][data-focus='capsule'] .ctag--pad,
  [data-mode='open'][data-focus='stockroom'] .ctag--pad,
  [data-mode='open'][data-focus='dock'] .ctag--cap,
  [data-mode='open'][data-focus='run'] .ctag--cap,
  [data-mode='open'][data-focus='stockroom'] .ctag--cap,
  [data-mode='open'][data-focus='dock'] .ctag--stock,
  [data-mode='open'][data-focus='run'] .ctag--stock,
  [data-mode='open'][data-focus='capsule'] .ctag--stock,
  [data-mode='open'][data-focus='booth'] .ctag--pad,
  [data-mode='open'][data-focus='booth'] .ctag--cap,
  [data-mode='open'][data-focus='booth'] .ctag--stock,
  [data-mode='open'][data-focus='dock'] .ctag--booth,
  [data-mode='open'][data-focus='run'] .ctag--booth,
  [data-mode='open'][data-focus='capsule'] .ctag--booth,
  [data-mode='open'][data-focus='stockroom'] .ctag--booth { visibility: hidden; }
  .ctag--stock .ctag__no { display: inline; }
  /* (the booth's tag stands right of BOBBLE, under its booth: no number, so it keeps clear of him) */
  .ctag--booth { padding-right: .55em; }

  .open__intro { bottom: calc(max(11vh, 84px) + 36px + env(safe-area-inset-bottom)); }
  .open__kicker { font-size: clamp(26px, 8vw, 36px); }
  .open__line { font-size: 14.5px; }
  .pager { display: flex; }

  .card,
  .card--dock,
  .card--run,
  .card--capsule,
  .card--stockroom,
  .card--booth {
    left: var(--gutter);
    right: var(--gutter);
    bottom: calc(max(10.5vh, 88px) + 36px + env(safe-area-inset-bottom));
    width: auto;
    align-items: center;
    text-align: center;
  }
  .card__title { font-size: clamp(34px, 11vw, 50px); }
  .card__title .stk,
  .card--run .card__title .stk,
  .card--booth .card__title .stk { display: inline-block; margin: 0 .08em; }
  .card__line { max-width: 22em; margin: 1em 0 1em; font-size: 13.5px; }
  .tag-btn { font-size: clamp(19px, 5.6vw, 24px); }

  /* the machine view: the machine on top, its panel / the figure's card under it */
  .cpanel {
    left: var(--gutter);
    right: var(--gutter);
    top: auto;
    bottom: calc(max(1.6vh, 10px) + 56px + env(safe-area-inset-bottom)); /* (over the back arrow's corner) */
    width: auto;
    padding: 15px 18px 10px;
    translate: 0 14px;
  }
  /* the back arrow: bottom left, above the safe area, with the panel / the card over it, not on it */
  .cback {
    left: calc(var(--gutter) + env(safe-area-inset-left));
    bottom: calc(max(1.6vh, 10px) + env(safe-area-inset-bottom));
    width: 46px;
    height: 46px;
  }
  .cback__icon { width: 22px; height: 22px; }
  [data-mode='machine'] [data-cap='idle'] .cpanel { translate: 0 0; }
  .cpanel__kicker { margin-bottom: .7em; font-size: 9px; }
  .cpanel__title { font-size: 26px; }
  .cpanel__title .stk { display: inline-block; }
  .cpanel__coins { margin-bottom: 10px; font-size: 32px; }
  .cpanel__lead { margin-bottom: 10px; font-size: 15px; }
  .cpanel__status { margin-top: 9px; font-size: 11.5px; }
  .cpanel__foot { margin-top: 9px; padding-top: 7px; }
  .pill { font-size: 11px; }

  .cresult {
    left: var(--gutter);
    right: var(--gutter);
    top: auto;
    bottom: calc(max(1.6vh, 10px) + 62px + env(safe-area-inset-bottom));
    width: auto;
    align-items: center;
    text-align: center;
    translate: 0 16px;
  }
  [data-mode='machine'] [data-cap='result'] .cresult { translate: 0 0; }
  .cresult__top { margin-bottom: 10px; }
  .cresult__name { font-size: clamp(32px, 10vw, 46px); }
  .cresult__where { margin-top: 1.2em; }
  .cresult__blurb { font-size: 13.5px; }
  .cresult__actions { justify-content: center; margin-top: 14px; }

  .shelf { padding-left: 10px; padding-right: 10px; }
  .shelf__sheet { padding: 16px 14px 14px; }
  .shelf__head { grid-template-columns: 1fr auto; margin-bottom: 14px; }
  .shelf__count { grid-column: 1 / -1; grid-row: 2; text-align: left; }
  .shelf__lede { font-size: 12px; }
  .shelf__grid { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .shelf__cells { gap: 6px; }
  .shelf__row--secret .shelf__cells { width: calc((100% - 24px) / 5); }
}
/* (narrow phones, 320-379 px: smaller pills, so Buy, Chart and X still share one row) */
@media (max-width: 379px) {
  .token__btn { padding: .85em .8em .72em; font-size: 10px; letter-spacing: .03em; }
  .token__tag { padding-left: 16px; padding-right: 14px; }
}
/* (very narrow phones, 320-340 px: the open state's tags shrink once more - no numbers, one fact on the live line,
   a smaller sticker - so the tags of the pairs that stand side by side (dock / run, machine / launchpad,
   stockroom / booth) no longer run into each other) */
@media (max-width: 340px) {
  .ctag { padding: .4em .5em .34em 1.45em; column-gap: .4em; }
  [data-mode='open'] .ctag .ctag__no { display: none; }
  .ctag .ctag__name,
  .ctag--pad .ctag__name { font-size: 8.5px; letter-spacing: .03em; }
  .ctag .ctag__note,
  .ctag--pad .ctag__note,
  .ctag--cap .ctag__note { font-size: 7px; letter-spacing: .06em; }
  .ctag .ctag__live { font-size: 7.5px; }
  [data-mode='open'] .ctag .ctag__live .ctag__seg:nth-of-type(n + 2),
  [data-mode='open'] .ctag .ctag__live .ctag__sep { display: none; }
  .ctag .ctag__sample { padding: .3em .45em .26em; font-size: 6.5px; }
  /* (sealed, the machine's tag under the header keeps to two lines: its third ran onto the box's corner) */
  [data-mode='sealed'] .ctag--cap .ctag__live { display: none; }
}
/* (phones under 360 px: the token's line is the ticker and Buy, as on a phone on its side; the contract is in the tag
   the ticker opens - the whole line ran from edge to edge) */
@media (max-width: 359px) {
  .token__line > .token__soon,
  .token__line > .token__ca--s,
  .token__line > .token__dot:first-of-type { display: none; }
}

/* Short landscape screens (a phone on its side). */
@media (max-height: 520px) and (orientation: landscape) {
  .sealed { bottom: calc(8px + env(safe-area-inset-bottom)); }
  /* the token's line keeps to the bottom left corner; a card on that side takes its place */
  .token { left: var(--gutter); right: auto; bottom: calc(6px + env(safe-area-inset-bottom)); display: block; }
  .token__line { font-size: 8.5px; }
  /* (no room beside the links in the middle: the ticker and Buy; the contract is in the tag) */
  .token__line > .token__soon,
  .token__line > .token__ca--s,
  .token__line > .token__dot:first-of-type { display: none; }
  [data-focus='dock'] .token,
  [data-focus='capsule'] .token,
  [data-focus='stockroom'] .token { opacity: 0; visibility: hidden; }
  /* (the booth pointed at: the launchpad's tag would lie on it) */
  [data-mode='open'][data-focus='booth'] .ctag--pad { visibility: hidden; }
  .token__tag { left: 0; right: auto; width: min(296px, 60vw); padding: 12px 14px 10px 16px; }
  .token__ticker { font-size: 24px; }
  .token__row { min-height: 24px; }
  .open__foot { bottom: 8px; }
  .open__intro { bottom: 46px; }
  .sealed__kicker { margin-bottom: .5em; font-size: 13.5px; }
  .tag-btn--big { font-size: clamp(19px, 2.9vw, 25px); border-width: 3px; box-shadow: 0 0 0 3px #fff, 0 5px 0 3px rgb(0 0 0 / .36); }
  .sealed__hint { display: none; }
  .sealed .quiet { margin-top: .75em; }
  /* no room for the hang tags beside the call to action: the stencils on the cartons say it */
  [data-mode='sealed'] .ctag { display: none; }
  [data-mode='sealed'] .ctag--pad { display: grid; }
  .open__intro { bottom: 46px; }
  .open__kicker { font-size: 22px; }
  .open__line { margin-top: .4em; font-size: 12.5px; }
  .card,
  .card--dock,
  .card--run,
  .card--capsule,
  .card--stockroom,
  .card--booth { bottom: 34px; }
  .card__title { font-size: clamp(26px, 5vw, 40px); }
  .card__line { margin: .7em 0 .7em; font-size: 12px; }
  [data-mode='sealed'] .ctag--cap { display: grid; }
  .cpanel { top: calc(50% + 4px); padding: 12px 16px 8px; } /* (clear of the back arrow in the corner under it) */
  .cback { bottom: calc(6px + env(safe-area-inset-bottom)); width: 42px; height: 42px; }
  .cback__icon { width: 20px; height: 20px; }
  .cpanel__kicker,
  .cpanel__status:not([data-kind='error']) { display: none; }
  .cpanel__title { font-size: 24px; }
  .cpanel__coins { margin-bottom: 8px; font-size: 28px; }
  .cpanel__lead { margin-bottom: 8px; font-size: 13.5px; }
  .cpanel__foot { margin-top: 8px; padding-top: 6px; }
  .cresult { top: calc(50% + 4px); }
  .cresult__name { font-size: clamp(26px, 5vw, 40px); }
  .cresult__where { margin-top: 1em; }
  .cresult__blurb { display: none; }
  .cresult__actions { margin-top: 12px; }
  .shelf__sheet { padding: 12px 16px; }
}

/* .. and a narrow one (under 760px wide): the machine's panel and the figure's
   card keep their place beside the machine, as on any landscape screen. */
@media (max-width: 760px) and (max-height: 520px) and (orientation: landscape) {
  .cpanel,
  .cresult {
    left: var(--gutter);
    right: auto;
    top: calc(50% + 4px);
    bottom: auto;
    width: min(330px, 46vw);
    align-items: flex-start;
    text-align: left;
    translate: 0 -50%;
  }
  [data-mode='machine'] [data-cap='idle'] .cpanel,
  [data-mode='machine'] [data-cap='result'] .cresult { translate: 0 -50%; }
  .cpanel { padding: 10px 14px 7px; }
  .cpanel__title { font-size: 21px; }
  .cpanel .tag-btn,
  .cresult .tag-btn { font-size: 17px; }
  .cresult__top { margin-bottom: 8px; }
  .cresult__actions { justify-content: flex-start; margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .2s !important;
    transition-delay: 0s !important;
  }
  .sealed,
  .card { transform: none; translate: 0 0; }
}

.is-reduced .tag-btn--big { animation: none; }

/* Check close-up of parcel #004 (&cam=pad): only its own tag stays. */
.is-closeup .sealed,
.is-closeup .open,
.is-closeup .ctag:not(.ctag--pad) { display: none; }
/* .. of the wall (&cam=coins): nothing over the picture */
.is-wallshot .ctag--pad,
.is-wallshot .padline,
.is-wallshot .token { display: none; }

/* The machine view: the stage's own layers step away. */
[data-mode='machine'] .ctag,
[data-mode='machine'] .padline { opacity: 0; visibility: hidden; }
.no-webgl .ctag--cap,
.no-webgl .ctag--stock,
.no-webgl .ctag--booth { display: none; }

/* Headless check mode: DOM snaps to its final state for the screenshot. */
.is-check *,
.is-check *::before,
.is-check *::after { transition: none !important; animation: none !important; }