:root {
  --u: 1px; /* one world unit: 1/1000 of the viewport height, set from main.js */
  --blue: #0c73fe;
  --orange: #ff6a1f;
  --ink: #0c131d;
  --paper: #fff6e6;
  --display: 'Rubik Mono One', 'Arial Black', sans-serif;
  --text: 'Golos Text', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--text);
  overscroll-behavior: none;
}

img { user-select: none; -webkit-user-drag: none; display: block; }

#stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  opacity: 0;
  transition: opacity .5s;
}
#stage.ready { opacity: 1; }
#stage.dragging { cursor: grabbing; }

#tilt {
  position: absolute;
  inset: 0;
  transform-origin: 50% 88%;
  will-change: transform;
}

#world {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: calc(var(--u) * 8000);
  will-change: transform;
}

.panel {
  position: absolute;
  top: 0;
  width: calc(var(--u) * 1502);
  height: calc(var(--u) * 1000);
  object-fit: cover;
  pointer-events: none;
}
.panel.flip { transform: scaleX(-1); }
.panel.under { transform: scaleY(-1); }
.panel.flip.under { transform: scale(-1, -1); }

.prop {
  position: absolute;
  pointer-events: none;
}
.prop.fit { transform: scale(var(--wf, 1)); transform-origin: 50% 100%; }
.prop.fit-top { transform-origin: 50% 0; }

.seam {
  position: absolute;
  top: calc(var(--u) * -120);
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 1440);
  background: var(--paper);
  pointer-events: none;
  clip-path: polygon(14% 0, 88% 0, 74% 6%, 96% 12%, 80% 19%, 100% 27%, 84% 34%, 94% 42%, 72% 49%, 92% 57%, 78% 64%, 100% 72%, 82% 80%, 96% 88%, 76% 94%, 90% 100%, 8% 100%, 22% 93%, 2% 86%, 18% 78%, 0 70%, 20% 62%, 6% 55%, 26% 47%, 4% 39%, 20% 31%, 0 24%, 18% 16%, 6% 9%, 24% 4%);
}

.neon {
  position: absolute;
  margin: 0;
  transform: translateX(-50%);
  font-family: var(--display);
  font-size: calc(var(--u) * 150 * var(--wf, 1));
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
  pointer-events: none;
  color: #eaf3ff;
  text-shadow:
    0 0 calc(var(--u) * 4) #fff,
    0 0 calc(var(--u) * 16) var(--blue),
    0 0 calc(var(--u) * 46) var(--blue),
    0 0 calc(var(--u) * 90) var(--blue);
  animation: buzz 5s steps(1) infinite;
}
.neon.warm {
  color: #fff1e3;
  text-shadow:
    0 0 calc(var(--u) * 4) #fff,
    0 0 calc(var(--u) * 16) var(--orange),
    0 0 calc(var(--u) * 46) var(--orange),
    0 0 calc(var(--u) * 90) var(--orange);
}
@keyframes buzz {
  0%, 41%, 44%, 100% { opacity: 1; }
  42%, 43.5% { opacity: .55; }
}

.tag {
  position: absolute;
  margin: 0;
  padding: calc(var(--u) * 6) calc(var(--u) * 12) calc(var(--u) * 8);
  transform: translateX(-50%) rotate(-3deg);
  background: var(--paper);
  color: var(--ink);
  font-size: max(13px, calc(var(--u) * 21));
  font-weight: 500;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  border: 0;
  font-family: var(--text);
  cursor: pointer;
  box-shadow: calc(var(--u) * 4) calc(var(--u) * 5) 0 rgb(12 19 29 / .45);
  transition: scale .15s;
}
.tag:hover { scale: 1.08; }
.tag:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.tag b { display: block; font-size: 1.5em; color: var(--blue); }

/* the gallery's walls are generated panels (museum-a); this layer only carries layout variables */
.gallery { display: none; }

/* the exhibit: a generated gilt frame, lamp, plaque and wall label, with the black card and the words on top */
.exhibit {
  position: absolute;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.exhibit:focus-visible { outline: 3px solid #fff; outline-offset: 8px; }
.exhibit img { display: block; pointer-events: none; }
.ex-lamp {
  position: absolute;
  z-index: 2;
  left: 31%;
  top: -12.6cqw;
  width: 38%;
  height: auto;
  filter: drop-shadow(0 .6cqw .8cqw rgb(0 0 0 / .5));
}
/* 1400x944 art; the empty canvas inside is 12.3-87.6% across and 17.7-82.1% down */
.ex-frame { position: relative; display: block; width: 100%; aspect-ratio: 1400 / 944; }
.ex-frame-art { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 1.4cqw 2.2cqw rgb(0 0 0 / .6)); }
.ex-canvas {
  position: absolute;
  left: 12.3%;
  top: 17.7%;
  right: 12.4%;
  bottom: 17.9%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.4cqw;
  padding: 0 6.5cqw;
}
.ex-canvas::before {
  /* the picture light falling on the canvas from above */
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 55% at 50% 0, rgb(255 236 190 / .45), transparent 80%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.ex-card {
  display: block;
  aspect-ratio: 1.89;
  border-radius: 2.4cqw;
  background: #111113;
  box-shadow: inset 0 0 4cqw rgb(0 0 0 / .55), 0 .3cqw .6cqw rgb(0 0 0 / .25);
}
.ex-title {
  display: block;
  font: 700 max(12px, 3.5cqw)/1.15 var(--text);
  letter-spacing: -.01em;
  color: #15130f;
  text-align: center;
  text-wrap: balance;
}
.ex-plaque { position: relative; display: block; width: 50%; margin-top: 1.2cqw; }
.ex-plaque img { width: 100%; height: auto; filter: drop-shadow(0 .4cqw .5cqw rgb(0 0 0 / .5)); }
.ex-plaque span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 8%; /* clear of the screws */
  color: #241703;
  font: 400 max(9px, 2.9cqw)/1 var(--display);
  text-transform: uppercase;
  letter-spacing: .02em;
  text-shadow: 0 1px 0 rgb(255 240 200 / .6);
  white-space: nowrap;
}
/* the exhibit has no wall label: hovering lifts the plaque a little instead */
.ex-plaque { transition: translate .15s; }
@media (hover: hover) { .exhibit:hover .ex-plaque { translate: 0 -.6cqw; } }
.exhibit:focus-visible .ex-plaque { translate: 0 -.6cqw; }
.exhibit[data-mode='stack'] .ex-plaque { width: 58%; }
.exhibit[data-mode='stack'] .ex-plaque span { font-size: max(9px, 3.3cqw); }

/* the way out: a doorway (607x1100 art) under a lit sign (700x338 art, glowing face 3-97% across, 51-94% down) */
.exit {
  position: absolute;
  container-type: inline-size;
  display: block;
  color: #1c1408;
  text-decoration: none;
}
.exit img { display: block; width: 100%; height: auto; pointer-events: none; }
.exit-sign { position: relative; width: 74% !important; margin: 0 auto -2cqw; filter: drop-shadow(0 1cqw 1.6cqw rgb(255 220 150 / .35)); }
.exit-text {
  position: absolute;
  left: 13%;
  right: 13%;
  top: 0;
  height: calc(74cqw * 338 / 700);
  padding-top: calc(74cqw * 338 / 700 * .51);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font: 400 max(10px, 4.6cqw)/1 var(--display);
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: color .15s;
}
.exit-text span { display: inline-block; transition: translate .15s; }
.exit-door { filter: drop-shadow(0 2cqw 3cqw rgb(0 0 0 / .55)); transition: filter .2s; }
@media (hover: hover) {
  .exit:hover .exit-text { color: var(--blue); }
  .exit:hover .exit-text span { translate: 1.5cqw 0; }
  .exit:hover .exit-door { filter: drop-shadow(0 2cqw 3cqw rgb(0 0 0 / .55)) brightness(1.12); }
}
.exit:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }
/* phones: only the sign, under the picture */
.exit[data-mode='sign'] .exit-door { display: none; }
.exit[data-mode='sign'] .exit-sign { width: 100% !important; margin: 0; }
.exit[data-mode='sign'] .exit-text { left: 8%; right: 8%; height: calc(100cqw * 338 / 700); padding-top: calc(100cqw * 338 / 700 * .51); font-size: max(11px, 6.2cqw); }
@media (prefers-reduced-motion: reduce) {
  .exit-text span, .exit-door, .ex-plaque { transition: none; }
  .exit:hover .exit-text span { translate: none; }
}

.body {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0;
  border: 0;
  background: none;
  will-change: transform;
  pointer-events: none;
  filter: drop-shadow(calc(var(--u) * 5) calc(var(--u) * 8) 0 rgb(12 19 29 / .35));
}
.body img { width: 100%; height: 100%; }

button.dest {
  pointer-events: auto;
  cursor: pointer;
  border-radius: 12%;
}
@media (hover: hover) {
  button.dest:hover img { animation: shimmy .5s ease-in-out infinite alternate; }
}
button.dest:focus-visible { outline: calc(var(--u) * 5) solid #fff; outline-offset: calc(var(--u) * 6); }
@keyframes shimmy {
  from { transform: rotate(-2deg) scale(1.03); }
  to { transform: rotate(2deg) scale(1.03); }
}

#rider {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  will-change: transform;
}
#rider-lean {
  position: absolute;
  left: 0;
  bottom: calc(var(--u) * 24);
  width: 0;
  height: 0;
  transform-origin: 0 0;
  will-change: transform;
}
/* a zero-height box whose line sits on the deck: every state sprite hangs its soles from it.
   The deck's blue surface spans 21-52 units below the board's top; soles stand at 42, on the
   surface, because at the top edge the character reads as hovering behind the board. */
#hero {
  position: absolute;
  left: 0;
  bottom: calc(var(--u) * 130);
  width: 0;
  height: 0;
  transform-origin: 0 0;
  will-change: transform;
}
.sprite {
  position: absolute;
  bottom: 0;
  height: auto;
  max-width: none;
  visibility: hidden;
  /* sideways only: a shadow falling below the soles would open a visual gap above the deck */
  filter: drop-shadow(calc(var(--u) * 8) calc(var(--u) * -2) 0 rgb(12 19 29 / .28));
}
.sprite.on { visibility: visible; }
.foot-shadow {
  position: absolute;
  height: calc(var(--u) * 13);
  bottom: calc(var(--u) * -6);
  border-radius: 50%;
  background: rgb(4 12 40 / .62);
  filter: blur(calc(var(--u) * 1.6));
  visibility: hidden;
}
.foot-shadow.on { visibility: visible; }
#board {
  position: absolute;
  left: calc(var(--u) * -320);
  bottom: 0;
  width: calc(var(--u) * 640);
  height: calc(var(--u) * 172);
}
#board > img:first-child { width: 100%; height: 100%; }
.wheel {
  position: absolute;
  --d: calc(var(--u) * 80.2);
  width: var(--d);
  height: var(--d);
  left: calc(var(--x) * var(--u) * 640 - var(--d) / 2);
  top: calc(.7632 * var(--u) * 172 - var(--d) / 2);
  will-change: transform;
}

#gl {
  transition: opacity .2s;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#hint {
  position: absolute;
  left: 50%;
  top: 63%;
  width: min(calc(var(--u) * 700), 92vw);
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: nudge 1.3s ease-in-out infinite alternate;
  transition: opacity .35s;
}
#hint.gone, #hint.wait { opacity: 0; }
@keyframes nudge {
  from { translate: -2.5% 0; rotate: -2deg; }
  to { translate: 2.5% 0; rotate: 1deg; }
}

#hud {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 16px;
  padding: 16px max(clamp(16px, 2vw, 32px), env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(clamp(16px, 2vw, 32px), env(safe-area-inset-left));
  pointer-events: none;
}
#hud > * { margin: 0; }
.hud-right {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
}
.sound-box {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-right: 2px;
  background: var(--ink);
  transform: rotate(1.5deg);
}
#sound {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 10px 0 12px;
  border: 0;
  background: none;
  color: #fff;
  font: 500 14px/1 var(--text);
  cursor: pointer;
}

/* stage lights: beams on the terminal walls, under the rider */
#lights { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#lights .beam {
  position: absolute;
  top: -8%;
  left: var(--x);
  width: 56vmin;
  height: 118%;
  margin-left: -28vmin;
  transform-origin: 50% 0;
  rotate: var(--r0);
  background: linear-gradient(90deg, transparent 4%, var(--c, #fff6d8) 30%, color-mix(in srgb, var(--c, #fff6d8) 45%, #fff) 50%, var(--c, #fff6d8) 70%, transparent 96%);
  -webkit-mask-image: linear-gradient(#000, rgb(0 0 0 / .5) 55%, transparent 96%);
  mask-image: linear-gradient(#000, rgb(0 0 0 / .5) 55%, transparent 96%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  mix-blend-mode: screen;
  opacity: .08;
  will-change: opacity, rotate;
}
#lights .wash {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 75% at 50% 0%, var(--c, #ff3ea5), transparent 72%);
  mix-blend-mode: screen;
  opacity: 0;
}

#toast {
  inset: auto auto 84px 50%;
  translate: -50% 0;
  max-width: min(460px, calc(100vw - 32px));
  margin: 0;
  padding: 10px 14px 11px;
  border: 0;
  background: var(--ink);
  color: #fff;
  font: 500 15px/1.3 var(--text);
  box-shadow: 4px 5px 0 var(--orange);
  rotate: -1deg;
}
#sound:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.bars i { width: 3px; height: 100%; background: var(--orange); transform-origin: 50% 100%; animation: bar .46s ease-in-out infinite alternate; }
.bars i:nth-child(2) { animation-delay: -.2s; }
.bars i:nth-child(3) { animation-delay: -.34s; }
#sound[aria-pressed='false'] .bars i { animation: none; transform: scaleY(.25); background: #8a93a0; }
@keyframes bar { from { transform: scaleY(.3); } to { transform: scaleY(1); } }

#pilot {
  pointer-events: auto;
  position: relative;
  width: 124px;
  height: 124px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  rotate: -8deg;
  transition: scale .18s cubic-bezier(.3, 1.8, .5, 1), rotate .18s;
  animation: nudge-pilot 3.4s ease-in-out infinite;
}
#pilot:hover { scale: 1.14; rotate: 5deg; animation: none; }
#pilot:active { scale: .9; }
#pilot:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 50%; }
.burst {
  position: absolute;
  inset: 0;
  background: var(--orange);
  filter: drop-shadow(4px 5px 0 var(--ink));
  clip-path: polygon(50% 0, 60% 13%, 75% 7%, 79% 22%, 95% 22%, 91% 38%, 100% 50%, 91% 62%, 95% 78%, 79% 78%, 75% 93%, 60% 87%, 50% 100%, 40% 87%, 25% 93%, 21% 78%, 5% 78%, 9% 62%, 0 50%, 9% 38%, 5% 22%, 21% 22%, 25% 7%, 40% 13%);
  animation: spin-burst 16s linear infinite;
}
#pilot:hover .burst { background: #ffd23c; }
.pilot-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  color: #fff;
  font: 400 15px/1.08 var(--display);
  text-align: center;
  text-shadow: 0 2px 0 var(--ink);
}
#pilot:hover .pilot-text { color: var(--ink); text-shadow: none; } /* white would vanish on the yellow */
.pilot-plane {
  position: absolute;
  width: 64px;
  height: auto;
  left: -14px;
  top: -6px;
  rotate: -14deg;
  animation: hover-plane 1.6s ease-in-out infinite alternate;
}
#pilot:hover .pilot-plane { animation: loop-plane .9s ease-in-out infinite; }
@keyframes nudge-pilot {
  0%, 82%, 100% { transform: none; }
  86% { transform: translateY(-9px) rotate(-7deg); }
  90% { transform: translateY(0) rotate(5deg); }
  94% { transform: translateY(-4px) rotate(-3deg); }
}
@keyframes spin-burst { to { rotate: 360deg; } }
@keyframes hover-plane { from { translate: 0 3px; } to { translate: 3px -5px; } }
@keyframes loop-plane {
  0% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(62px, -22px) rotate(14deg); }
  100% { transform: translate(0, 0) rotate(0); }
}

.cta {
  pointer-events: auto;
  display: inline-block;
  padding: 12px 18px;
  min-height: 44px;
  background: var(--orange);
  color: var(--ink);
  font-family: var(--display);
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
  transform: rotate(-1.5deg);
  box-shadow: 4px 5px 0 var(--ink);
  transition: transform .15s;
}
.cta:hover { transform: rotate(1.5deg) scale(1.04); }
.cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.sheet .cta:focus-visible { outline-color: var(--ink); }

.sheet {
  width: min(920px, calc(100vw - 32px), calc((100dvh - 32px) * 1.95));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  overflow: visible;
  background: none;
  color: var(--ink);
}
.sheet::backdrop { background: rgb(12 19 29 / .74); }
.sheet[open] { animation: stamp .32s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes stamp { from { scale: 1.25; rotate: -6deg; opacity: 0; } }

.ticket {
  container-type: inline-size;
  position: relative;
  rotate: -1.4deg;
  filter: drop-shadow(0 12px 0 rgb(12 19 29 / .55));
}
.ticket-art { display: block; width: 100%; height: auto; }

/* text sits on the empty cream panels of the generated art; percentages are measured from it */
.t-main, .t-stub { position: absolute; display: flex; flex-direction: column; }
.ticket-pass .t-main { left: 32.5%; top: 28%; right: 33.4%; bottom: 13.5%; justify-content: center; }
.ticket-pass .t-stub { left: 75%; top: 26%; right: 7%; bottom: 13.5%; align-items: center; justify-content: space-between; text-align: center; }
.ticket-crew .t-main { left: 12%; top: 20%; right: 39%; bottom: 16%; justify-content: center; }
.ticket-crew .t-stub { left: 77%; top: 21%; right: 4%; bottom: 13.5%; align-items: center; justify-content: space-between; text-align: center; }

.ticket-sticker {
  position: absolute;
  left: 7%;
  top: 8%;
  width: 24%;
  height: 80%;
  object-fit: contain;
  object-position: 50% 100%;
  rotate: -4deg;
  filter: drop-shadow(.5cqw .7cqw 0 rgb(12 19 29 / .4));
}

.eyebrow { margin: 0 0 .4cqw; font: 500 1.55cqw/1.2 var(--text); }
.sheet h2 { margin: 0; font: 400 4.6cqw/1.05 var(--display); color: var(--blue); }
.ticket-crew h2 { font-size: 3.3cqw; white-space: nowrap; }
#pass-stats { margin: 1.3cqw 0 0; font-size: 1.65cqw; line-height: 1.25; }
#pass-stats div { display: flex; gap: 1cqw; justify-content: space-between; border-bottom: .2cqw dotted rgb(12 19 29 / .4); padding: .35cqw 0; }
#pass-stats dt { color: #4b5563; }
#pass-stats dd { margin: 0; font-weight: 700; text-align: right; }

.crew-role { margin: .5cqw 0 1.2cqw; font: 500 1.7cqw/1.2 var(--text); }
.crew-links { margin: 0; padding: 0; list-style: none; font-size: 1.75cqw; line-height: 1.3; }
.crew-links li { display: flex; gap: 1.2cqw; justify-content: space-between; align-items: baseline; border-bottom: .2cqw dotted rgb(12 19 29 / .4); padding: .45cqw 0; }
/* the labels sit over the collage at the left edge, so each gets a scrap of paper behind it */
.crew-links span { padding: .05cqw .5cqw .15cqw; border-radius: .3cqw; background: #f6efe0; color: #374151; box-shadow: 0 0 0 .15cqw #f6efe0; }
.crew-links a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: .25cqw; text-underline-offset: .3cqw; }
.crew-links a:hover { color: var(--blue); }
.crew-links a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.stub-code { margin: 0; font: 400 5.4cqw/1 var(--display); color: var(--ink); }
.stub-gate { margin: .2cqw 0 0; font: 500 1.4cqw/1.15 var(--text); }
.barcode {
  flex: 1;
  width: 86%;
  margin: .8cqw 0;
  min-height: 2cqw;
  display: flex; /* the drawing sits centred in whatever room the stub leaves */
  overflow: hidden;
}
.barcode rect { fill: var(--ink); }
.qr { display: block; width: 88%; margin: auto 0 .4cqw; }
.qr svg { display: block; width: 100%; height: auto; fill: var(--ink); }
.qr:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.qr-note { margin: 0 0 auto; font: 500 1.3cqw/1.2 var(--text); color: #374151; }

.close {
  position: absolute;
  right: -1cqw;
  top: -1cqw;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font: 700 24px/1 var(--text);
  cursor: pointer;
  rotate: 8deg;
}
.close:hover { background: var(--orange); color: var(--ink); }
.close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.sheet form { margin: 0; }
.sheet .cta { padding: .9cqw 1.1cqw; min-height: 0; font-size: 1.25cqw; line-height: 1.2; white-space: normal; box-shadow: .35cqw .45cqw 0 var(--ink); }

/* the lost-and-found report: generated collage card, text on its cream panel, the rider with a wrench beside it.
   Sizes are in cqw of the whole report, so text and art scale together. */
.sheet-found { width: min(1000px, calc(100vw - 32px), calc((100dvh - 48px) * 2.1)); }
.sheet-found::backdrop { background: rgb(12 19 29 / .84); backdrop-filter: blur(4px); }
#rider { transition: opacity .2s; }
body:has(#found[open]) #rider { opacity: 0; }
.found {
  container-type: inline-size;
  position: relative;
  padding-bottom: 3cqw; /* room for the rider's boots below the card */
}
.found-card {
  position: relative;
  width: 78%;
  rotate: -1.2deg;
  filter: drop-shadow(0 1.2cqw 0 rgb(12 19 29 / .55));
}
.found-art { display: block; width: 100%; height: auto; }
/* the cream panel of found-a.webp, measured from the art: 2-56% across, 9-88% down */
.found-text {
  position: absolute;
  left: 6%;
  top: 16%;
  right: 44%;
  bottom: 19%; /* clear of the torn orange edge and the star */
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--ink);
}
.found .eyebrow { margin: 0 0 1cqw; font: 700 max(11px, 1.1cqw)/1 var(--text); color: var(--orange); text-transform: uppercase; letter-spacing: .12em; }
.found .found-text h2 { margin: 0; font: 700 max(20px, 2.8cqw)/1.06 var(--text); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.found-lead { margin: 1.4cqw 0 .9cqw; font: 500 max(14px, 1.55cqw)/1.35 var(--text); color: var(--ink); }
.found-why { margin: 1.6cqw 0 2.2cqw; font: 700 max(15px, 1.65cqw)/1.35 var(--text); color: var(--ink); }
.found-why b { font-weight: 700; color: var(--ink); }
.found code { padding: .05cqw .4cqw; border-radius: .35cqw; background: var(--ink); color: #ffd23c; font: 600 .95em/1.3 ui-monospace, Consolas, monospace; white-space: nowrap; }
.found-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8cqw .8cqw; }
.paper-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: max(160px, 19cqw);
  aspect-ratio: 700 / 240;
  padding: 0 0 .55cqw .2cqw;
  border: 0;
  background: url(assets/btn-orange.webp) center / 100% 100% no-repeat;
  color: var(--ink);
  font: 700 max(13px, 1.42cqw)/1.1 var(--text);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: rotate .15s, scale .15s;
}
.paper-btn span { padding: 0 .2em; text-align: center; }
.paper-orange { rotate: -1.5deg; }
.paper-blue { background-image: url(assets/btn-blue.webp); color: #fff; rotate: 1deg; }
.paper-btn:hover { scale: 1.05; rotate: 0deg; }
.paper-btn:active { scale: .97; }
.paper-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 1cqw; }
.found-actions .cta { padding: 1cqw 1.4cqw; min-height: 0; border: 0; font-size: max(13px, 1.25cqw); line-height: 1.2; box-shadow: .35cqw .45cqw 0 var(--ink); cursor: pointer; }
.found-actions .cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.found-link { color: var(--ink); font: 500 max(13px, 1.25cqw)/1.2 var(--text); text-decoration-color: var(--orange); text-decoration-thickness: .2cqw; text-underline-offset: .35cqw; }
.found-link:hover { color: var(--blue); }
.found .close { right: -1cqw; top: -1cqw; }
/* the rider steps in from the right edge of the card, clear of the black TV */
.found-hero {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 26%;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(.6cqw .9cqw 0 rgb(12 19 29 / .45));
}
.sheet-found[open] .found-hero { animation: hero-in .5s cubic-bezier(.2, 1.4, .4, 1) .12s both; }
@keyframes hero-in { from { translate: 30% 0; rotate: 8deg; opacity: 0; } }

@media (max-width: 640px) {
  .sheet-found { width: min(calc(100vw - 24px), calc((100dvh - 24px) * .78)); }
  .found { padding-bottom: 0; }
  .found-card { width: 100%; rotate: -.6deg; }
  /* the cream panel of found-tall.webp: 1-73% across, 7-84% down */
  .found-text { left: 7%; top: 10%; right: 35%; bottom: 19%; justify-content: flex-start; }
  .found .eyebrow { font-size: max(10px, 2.6cqw); margin-bottom: 1.6cqw; }
  .found .found-text h2 { font-size: max(19px, 6.2cqw); }
  .found-lead { font-size: max(13px, 3.6cqw); margin: 2.4cqw 0 1.6cqw; }
  .found-why { font-size: max(14px, 3.8cqw); margin: 3cqw 0 3.6cqw; }
  .found-actions { gap: 2cqw; }
  .paper-btn { width: 58cqw; font-size: max(13px, 3.8cqw); }
  .found-actions .cta { font-size: 3cqw; padding: 2cqw 2.6cqw; box-shadow: .8cqw 1cqw 0 var(--ink); }
  .found-link { font-size: 3cqw; }
  .found .close { right: 1cqw; top: 1cqw; }
  /* on a phone the rider is a small sticker in the bottom-left corner, over the leopard print */
  .found-hero { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet-found[open] .found-hero { animation: none; }
}

/* the start screen: a curtain that loads, then opens */
#gate {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--ink);
  user-select: none;
  -webkit-user-select: none;
}
#gate[hidden] { display: none; }
.curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.2%;
  background: url(assets/curtain.webp) center / 200% 100% no-repeat;
  transition: transform 1.25s cubic-bezier(.7, 0, .25, 1);
}
.curtain-l { left: 0; background-position: 0 0; }
.curtain-r { right: 0; background-position: 100% 0; }
#gate.open { background: transparent; pointer-events: none; }
#gate.open .curtain-l { transform: translateX(-101%); }
#gate.open .curtain-r { transform: translateX(101%); }
.gate-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 3vh, 30px);
  width: min(760px, 92vw);
  transition: opacity .3s;
}
#gate.open .gate-body { opacity: 0; }
.gate-title {
  width: 100%;
  height: auto;
  max-height: 38vh;
  object-fit: contain;
  filter: drop-shadow(0 8px 0 rgb(12 19 29 / .5));
}
#gate-load { display: grid; place-items: center; min-height: 72px; }
#gate-load[hidden], #gate-go[hidden] { display: none; }
/* the loader: a typed word, one letter at a time replaced by a magazine cut-out */
.ransom {
  margin: 0;
  display: flex;
  align-items: center;
  color: var(--paper);
  font: 700 clamp(26px, 4vh, 40px)/1 "Courier New", Courier, monospace;
  letter-spacing: .06em;
  text-shadow: 0 2px 0 rgb(12 19 29 / .45);
  user-select: none;
}
.rl { display: inline-block; min-width: .62em; text-align: center; }
.rl.cut {
  margin: 0 .08em;
  padding: .12em .2em .1em;
  font-size: 1.45em;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: none;
  filter: drop-shadow(0 3px 0 rgb(12 19 29 / .5));
}
#gate-go {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
#enter {
  position: relative;
  width: clamp(150px, 26vh, 210px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  rotate: -6deg;
  transition: scale .18s cubic-bezier(.3, 1.8, .5, 1), rotate .18s;
  animation: enter-in .45s cubic-bezier(.2, 1.6, .4, 1), breathe-enter 1.15s ease-in-out .45s infinite alternate;
}
#enter:hover { scale: 1.1; rotate: 4deg; }
#enter:active { scale: .92; }
#enter:hover .burst { background: #ffd23c; }
#enter:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 50%; }
.enter-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  font: 400 clamp(17px, 3.1vh, 24px)/1.1 var(--display); /* «сделать» is the widest word the burst must hold */
  text-align: center;
}
@keyframes enter-in { from { transform: scale(.2); opacity: 0; } }
@keyframes breathe-enter { from { transform: scale(1); } to { transform: scale(1.05); } }
#enter-quiet {
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  background: none;
  color: var(--paper);
  font: 500 16px/1 var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
#enter-quiet:hover { color: #ffd23c; }
#enter-quiet:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.gate-note {
  margin: 0;
  padding: 5px 10px 6px;
  background: var(--ink);
  color: #fff;
  font: 500 13px/1.2 var(--text);
  text-align: center;
  transform: rotate(-.8deg);
}

/* the lyrics panel: bold words on brand blue, the current line lit */
#lyrics {
  position: absolute;
  z-index: 3;
  top: 16px;
  right: max(16px, env(safe-area-inset-right));
  bottom: 158px;
  width: clamp(270px, 25vw, 400px);
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: var(--blue);
  box-shadow: 6px 7px 0 var(--ink);
  transition: transform .35s cubic-bezier(.3, 1, .4, 1), visibility .35s;
}
#lyrics.off { transform: translateX(calc(100% + 40px)); visibility: hidden; }
/* in the museum the panel folds to its title and player */
#lyrics.quiet { bottom: auto; height: auto; }
#lyrics.quiet #lyrics-scroll { display: none; }
.lyrics-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  margin: 0;
  padding: 12px 16px 8px;
  color: #fff;
  font: 700 13px/1.2 var(--text);
}
.lyrics-head .bars i { background: #ffd23c; }
#lyrics-scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 6px 16px 30vh; /* room below, so the last lines can still rise to the upper third */
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(transparent, #000 4%, #000 88%, transparent);
  mask-image: linear-gradient(transparent, #000 4%, #000 88%, transparent);
}
#lyrics-scroll::-webkit-scrollbar { display: none; }
.line {
  display: block;
  width: 100%;
  margin: 0 0 clamp(10px, 1.6vh, 16px);
  padding: 0;
  border: 0;
  background: none;
  color: #06101d;
  font: 700 clamp(18px, 1.55vw, 25px)/1.2 var(--text);
  letter-spacing: -.01em;
  text-align: left;
  cursor: pointer;
  transition: color .22s;
}
.line:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.line.past { color: rgb(255 255 255 / .72); }
.line.now { color: #fff; }
.line.gap { cursor: default; text-decoration: none; }

/* the player under the words, one row: timeline, then volume */
.player {
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px 14px;
  background: rgb(6 16 29 / .16);
  color: #fff;
}
.timeline {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  font: 500 12px/1 var(--text);
  font-variant-numeric: tabular-nums;
}
#t-total { text-align: right; }
.vol { display: flex; align-items: center; gap: 10px; }
.vol-icon { flex: none; width: 18px; height: 18px; fill: currentColor; }
.player .vol input[type='range'] { width: clamp(56px, 5vw, 84px); }
.player input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 18px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.player input[type='range']::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #fff var(--p, 0%), rgb(255 255 255 / .32) var(--p, 0%));
}
.player input[type='range']::-moz-range-track { height: 4px; border-radius: 2px; background: rgb(255 255 255 / .32); }
.player input[type='range']::-moz-range-progress { height: 4px; border-radius: 2px; background: #fff; }
.player input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / .35);
  opacity: 0;
  transition: opacity .15s;
}
.player input[type='range']::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; opacity: 0; transition: opacity .15s; }
.player input[type='range']:hover::-webkit-slider-thumb,
.player input[type='range']:focus-visible::-webkit-slider-thumb { opacity: 1; }
.player input[type='range']:hover::-moz-range-thumb,
.player input[type='range']:focus-visible::-moz-range-thumb { opacity: 1; }
.player input[type='range']:hover::-webkit-slider-runnable-track { background: linear-gradient(90deg, #ffd23c var(--p, 0%), rgb(255 255 255 / .32) var(--p, 0%)); }
.player input[type='range']:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }

#lyrics-toggle {
  pointer-events: auto;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: var(--ink);
  color: #fff;
  font: 500 14px/1 var(--text);
  cursor: pointer;
  transform: rotate(-1.5deg);
}
#lyrics-toggle[aria-pressed='true'] { background: var(--blue); }
#lyrics-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.noscript { position: fixed; inset: 16px; font-size: 20px; }
.noscript a { color: var(--orange); }

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 640px) {
  /* the rider stands above the HUD, whose chips would otherwise sit on the wheels */
  #rider { bottom: 84px; }
  #sound-label { display: none; }
  #pilot { width: 96px; height: 96px; }
  .pilot-text { font-size: 12px; }
  .pilot-plane { width: 50px; left: -10px; }
  #sound { padding: 0 8px 0 10px; }
  .sound-box { padding-right: 0; }

  #lyrics { top: 12px; left: 12px; right: 12px; bottom: auto; width: auto; height: 32dvh; }
  #lyrics.off { transform: translateY(calc(-100% - 40px)); }
  #lyrics-scroll { padding: 4px 14px 16vh; }
  .vol { display: none; } /* phones have volume buttons */
  .player { grid-template-columns: 1fr; padding: 8px 14px 10px; }
  .line { font-size: 19px; }
  #lyrics-toggle { padding: 0 10px; font-size: 13px; }
  .hud-right { gap: 8px; }

  /* the vertical ticket art: 826×978, panels measured from the image */
  .sheet {
    --tm-l: 9%; --tm-t: 23%; --tm-r: 9%; --tm-b: 27.5%;
    --ts-l: 9%; --ts-t: 82%; --ts-r: 9%; --ts-b: 4%;
    width: min(calc(100vw - 24px), calc((100dvh - 24px) * .845));
  }
  .ticket-pass .t-main, .ticket-crew .t-main { left: var(--tm-l); top: calc(var(--tm-t) + 17%); right: var(--tm-r); bottom: var(--tm-b); justify-content: flex-start; }
  .ticket-crew .t-main { top: calc(var(--tm-t) + 3%); }
  .ticket-pass .t-stub, .ticket-crew .t-stub { left: var(--ts-l); top: var(--ts-t); right: var(--ts-r); bottom: var(--ts-b); flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; text-align: left; }
  .ticket-sticker { left: 26%; top: 7%; width: 48%; height: 32%; }
  .eyebrow { font-size: 3.4cqw; margin-bottom: 1cqw; }
  .sheet h2 { font-size: 8.4cqw; }
  .ticket-crew h2 { font-size: 7.4cqw; white-space: normal; }
  #pass-stats { font-size: 3.5cqw; margin-top: 2cqw; }
  #pass-stats div { padding: .9cqw 0; }
  .crew-role { font-size: 3.6cqw; margin: 1cqw 0 3cqw; }
  .crew-links { font-size: 3.7cqw; }
  .crew-links li { padding: 1.6cqw 0; }
  .stub-code { font-size: 9cqw; }
  .stub-gate { font-size: 3cqw; max-width: 38%; }
  .barcode, .qr-note { display: none; }
  .qr { width: 15cqw; margin: 0; }
  .sheet .cta { padding: 2.2cqw 3cqw; font-size: 3cqw; box-shadow: 1cqw 1.2cqw 0 var(--ink); }
  .close { right: 1cqw; top: 1cqw; }
}

@media (prefers-reduced-motion: reduce) {
  #hint, .neon, button.dest:hover img, #pilot, .burst, .pilot-plane, #pilot:hover .pilot-plane, .bars i, .sheet[open], #enter { animation: none; }
  .curtain, .gate-body { transition: none; }
}