@font-face {
  font-family: 'ZG Pixel';
  src: url('/assets/fonts/zg-pixel.f4b4a444ba.woff2') format('woff2');
  font-display: swap;
}
/* Ziggy Games: an arcade after closing time. One lit marquee, a row of cabinets, blacklight carpet. */
@property --lit {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

:root {
  --night: #08080b;
  --cream: #f2ead8;
  --ink: #1b1f1c;
  --red: #ef4a2f;
  --blue: #3b74e6;
  --yellow: #f1bd2c;
  --dim: rgba(242, 234, 216, 0.66);
  --faint: rgba(242, 234, 216, 0.14);
  /* a condensed grotesk for everything printed, and the machines' own 5x7 face for their screens */
  --ui: 'Saira Semi Condensed', 'Arial Narrow', sans-serif;
  --pixel: 'ZG Pixel', ui-monospace, monospace;
  --gutter: clamp(18px, 4vw, 56px);
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --cab: 250px;
}

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

html {
  background: var(--night);
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--night);
  color: var(--cream);
  font: 400 17px/1.55 var(--ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img,
video,
svg {
  display: block;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 6px;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--gutter);
  top: 12px;
  z-index: 50;
  background: var(--cream);
  color: var(--ink);
  padding: 8px 12px;
}

/* ================================================================================== */
/* The hall                                                                            */
/* ================================================================================== */
.hall {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  background: var(--night);
}
.scene {
  position: absolute;
  inset: 0;
  transform-origin: 50% 12%;
}
.wall {
  position: absolute;
  inset: 0 0 34% 0;
  background:
    radial-gradient(ellipse 46% 36% at 50% 17%, rgba(255, 226, 184, 0.11), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 120px),
    linear-gradient(#060608, #08080b 70%, #0b0b0e);
}
/* Baseboard where the wall meets the carpet */
.wall::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  background: linear-gradient(#1b1b22, #09090c);
}
.floor {
  position: absolute;
  left: -40%;
  right: -40%;
  top: 66%;
  bottom: 0;
  perspective: 520px;
  perspective-origin: 50% 0%;
  overflow: hidden;
}
.carpet {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 240%;
  transform-origin: 50% 0;
  transform: rotateX(64deg);
  background: url('/assets/carpet.svg?v=0614cc6f21') 0 0 / 132px 132px repeat;
  opacity: 0.62;
}
/* Light falls off toward the back wall, the edges, and the camera */
.floor::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--night) 0%, rgba(8, 8, 11, 0.55) 22%, rgba(8, 8, 11, 0.1) 55%, rgba(8, 8, 11, 0.5) 80%, var(--night) 100%),
    radial-gradient(ellipse 34% 90% at 50% 0%, transparent 40%, rgba(8, 8, 11, 0.85) 100%);
}

/* A far row of machines along the back wall, deeper in the room */
.far {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 34%;
  height: 0;
  filter: blur(1.2px) brightness(0.62);
}
.far i {
  position: absolute;
  bottom: -2px;
  left: var(--x);
  width: 58px;
  height: var(--h);
  translate: -50% 0;
  background: linear-gradient(#141418, #0b0b0e);
  clip-path: polygon(0 0, 100% 0, 100% 44%, 108% 58%, 108% 64%, 100% 64%, 100% 100%, 0 100%, 0 64%, -8% 64%, -8% 58%, 0 44%);
}
.far i::before {
  /* its screen, glowing faintly */
  content: '';
  position: absolute;
  left: 11px;
  right: 11px;
  top: 26px;
  height: 26px;
  border-radius: 4px;
  background: var(--c);
  opacity: 0.4;
  box-shadow: 0 0 14px 3px var(--c);
}
.far i::after {
  /* its lit marquee */
  content: '';
  position: absolute;
  left: 3px;
  right: 3px;
  top: 3px;
  height: 12px;
  background: var(--c);
  opacity: 0.5;
}

/* ================================================================================== */
/* The sign: the original Ziggy Games logo, printed on plexi and lit from behind       */
/* ================================================================================== */
.sign-wrap {
  position: absolute;
  z-index: 3;
  top: clamp(26px, 5.5vh, 64px);
  left: 0;
  right: 0;
  text-align: center;
  transform-origin: 50% 0;
}
.sign {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 22px;
  border-radius: 10px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.07), transparent 30%),
    linear-gradient(#2b2b32, #141418);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 -2px 0 rgba(0, 0, 0, 0.5),
    0 0 50px 8px rgba(255, 228, 186, 0.2),
    0 0 180px 50px rgba(255, 190, 130, 0.09),
    0 30px 60px -20px rgba(0, 0, 0, 0.8);
}
.sign-face {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 16px 42px 18px 30px;
  border-radius: 3px;
  /* Two fluorescent tubes behind printed plexi: brighter bands, darker ends */
  background:
    linear-gradient(90deg, rgba(90, 70, 40, 0.16), transparent 14%, transparent 86%, rgba(90, 70, 40, 0.16)),
    linear-gradient(rgba(255, 255, 255, 0.35), transparent 22%, rgba(255, 255, 255, 0.22) 38%, transparent 55%, rgba(255, 255, 255, 0.22) 70%, transparent 88%),
    #f4ecd9;
  box-shadow: inset 0 0 18px rgba(120, 90, 40, 0.28), 0 0 0 3px #0c0c0f;
  overflow: hidden;
}
.sign-face::after {
  /* a little glare on the plexi */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.35) 42%, transparent 52%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}
/* Two inks, one slightly off register: blue printed first, red on top */
.bolt {
  width: 88px;
  height: 88px;
  margin: -10px 0;
  overflow: visible;
}
.bolt-b {
  fill: var(--blue);
  transform: translate(5px, 5px);
}
.bolt-a {
  fill: var(--red);
}
.word {
  display: block;
  height: calc(var(--wf, 76px) * 0.99);
  width: auto;
  overflow: visible;
}
.word-ink {
  fill: var(--ink);
}
.word-dot {
  fill: var(--red);
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Chase lights, screwed into the frame (placed by arcade.js). Two of every three are lit. */
.bulbs {
  position: absolute;
  inset: 11px;
  pointer-events: none;
}
.bulb {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fffbe8, #ffd67a 55%, #c9822a);
  box-shadow: 0 0 6px 1px rgba(255, 206, 120, 0.9), 0 0 16px 3px rgba(255, 170, 70, 0.3);
}
.bulb::after {
  /* the socket */
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: 50%;
  background: #0b0b0d;
}
.bulbs[data-p='0'] .k0,
.bulbs[data-p='1'] .k1,
.bulbs[data-p='2'] .k2 {
  background: radial-gradient(circle at 40% 35%, #6b5a3a, #3a2f1f 60%, #231c12);
  box-shadow: none;
}

/* The house message, on an LED board under the sign */
.house {
  margin: 16px auto 0;
  font-size: 15px;
  color: var(--dim);
}
.ticker {
  position: relative;
  width: min(560px, 86vw);
  height: 34px;
  margin: 22px auto 0;
  overflow: hidden;
  border-radius: 3px;
  background: #0a0405;
  box-shadow: 0 0 0 3px #1c1c21, 0 0 0 4px #2c2c33, 0 8px 18px rgba(0, 0, 0, 0.6), 0 0 36px rgba(255, 70, 40, 0.12);
}
.ticker-track {
  display: flex;
  width: max-content;
  height: 100%;
  align-items: center;
  font: 400 16px/1 var(--pixel);
  text-transform: uppercase;
  white-space: nowrap;
  color: #ff5a2e;
  text-shadow: 0 0 6px rgba(255, 80, 40, 0.85);
  /* LED dots: every font pixel is one lamp */
  -webkit-mask: radial-gradient(circle, #000 0.85px, transparent 1.05px) 0 1px / 2px 2px;
  mask: radial-gradient(circle, #000 0.85px, transparent 1.05px) 0 1px / 2px 2px;
}
.ticker-track span {
  padding-left: 18px;
}
.ticker-still {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track {
    width: 100%;
    justify-content: center;
  }
  .ticker-track span {
    display: none;
  }
  .ticker-track .ticker-still {
    display: block;
    padding: 0;
  }
}
.ticker::after {
  /* unlit lamps between the letters */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 80, 40, 0.09) 0.85px, transparent 1.05px) 0 1px / 2px 2px;
}

/* Light from the sign falling across the room, and the dust hanging in it */
.cone {
  position: absolute;
  z-index: 4;
  left: 16%;
  right: 16%;
  top: 22%;
  height: 64%;
  pointer-events: none;
  filter: blur(18px);
  mix-blend-mode: screen;
}
.cone i {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(255, 220, 165, 0.13), rgba(255, 220, 165, 0.05) 55%, transparent 92%);
  clip-path: polygon(34% 0, 66% 0, 96% 100%, 4% 100%);
}
.motes {
  position: absolute;
  z-index: 4;
  left: 32%;
  right: 32%;
  top: 6%;
  height: 46%;
  pointer-events: none;
}
.motes i {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255, 236, 200, 0.55);
  box-shadow: 0 0 4px rgba(255, 220, 170, 0.6);
  opacity: 0;
}
.motes i:nth-child(1) { left: 12%; top: 70%; --d: 17s; --dl: -3s; }
.motes i:nth-child(2) { left: 28%; top: 82%; --d: 21s; --dl: -11s; }
.motes i:nth-child(3) { left: 41%; top: 60%; --d: 19s; --dl: -7s; }
.motes i:nth-child(4) { left: 55%; top: 88%; --d: 23s; --dl: -15s; }
.motes i:nth-child(5) { left: 67%; top: 74%; --d: 18s; --dl: -1s; }
.motes i:nth-child(6) { left: 80%; top: 64%; --d: 25s; --dl: -9s; }
.motes i:nth-child(7) { left: 20%; top: 50%; --d: 22s; --dl: -18s; width: 1px; height: 1px; }
.motes i:nth-child(8) { left: 48%; top: 94%; --d: 20s; --dl: -5s; width: 1px; height: 1px; }
.motes i:nth-child(9) { left: 74%; top: 90%; --d: 24s; --dl: -13s; width: 3px; height: 3px; filter: blur(1px); }
.motes i:nth-child(10) { left: 90%; top: 80%; --d: 16s; --dl: -8s; width: 1px; height: 1px; }

/* Red EXIT sign on the left wall, and a clock on the right that keeps the visitor's time */
.exit {
  position: absolute;
  z-index: 1;
  top: 14%;
  left: 4.5%;
  padding: 6px 10px 5px;
  font: 700 12px/1 var(--ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ff5a4a;
  background: #1a0b0a;
  border: 3px solid #2d2d33;
  border-radius: 2px;
  text-shadow: 0 0 6px rgba(255, 70, 50, 0.9);
  box-shadow: 0 0 30px 6px rgba(255, 60, 40, 0.16), 0 6px 10px rgba(0, 0, 0, 0.6);
}
.exit::before {
  /* the bracket it hangs from */
  content: '';
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 22px;
  height: 7px;
  translate: -50% -3px;
  background: #1f1f24;
  border-radius: 2px 2px 0 0;
}
.exit::after {
  /* the glow it paints on the wall under it */
  content: '';
  position: absolute;
  left: -60%;
  right: -60%;
  top: 100%;
  height: 90px;
  background: radial-gradient(ellipse 50% 40% at 50% 0%, rgba(255, 60, 40, 0.14), transparent 70%);
}
.clock {
  position: absolute;
  z-index: 1;
  top: 11%;
  right: 6%;
  width: 68px;
  height: 68px;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6));
}
.clock svg {
  width: 100%;
  height: 100%;
}
.clock-face {
  fill: #b9ae96;
  stroke: #1e1e22;
  stroke-width: 5;
}
.clock-ticks path,
.clock-h,
.clock-m {
  stroke: #1d1f1c;
  stroke-linecap: round;
}
.clock-ticks path {
  stroke-width: 2.5;
}
.clock-h {
  stroke-width: 5;
}
.clock-m {
  stroke-width: 3.2;
}
.clock-s {
  stroke: var(--red);
  stroke-width: 1.6;
}
.clock circle:last-child {
  fill: #1d1f1c;
}
.clock::after {
  /* it only catches a little of the sign's light */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(115deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.1) 60%, rgba(255, 220, 170, 0.08));
}

/* ================================================================================== */
/* Cabinets                                                                            */
/* ================================================================================== */
.row {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: clamp(26px, 5vh, 60px);
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(36px, 5vw, 80px);
  transform-origin: 50% 100%;
}
.cab {
  position: relative;
  flex: 0 0 var(--cab);
  width: var(--cab);
  --side: 0;
  --depth: 0;
  --body: #1a1a1f;
  --trim: #55555c;
  --accent: #2c2c33;
  --glow: rgba(160, 200, 255, 0.45);
  --lit: 1;
  /* machines further from the middle stand further back */
  scale: calc(1 - 0.1 * var(--depth));
  translate: 0 calc(-26px * var(--depth));
  transform-origin: 50% 100%;
  transition: filter 500ms ease;
}
.cab-fairway {
  --cab: 280px;
  --flare: #000;
  --body: #163b2a;
  --trim: #e3b04c;
  --accent: #0e271c;
  --glow: rgba(255, 196, 120, 0.5);
}
.cab-dash {
  --cab: 224px;
  --flare: #62b1e6;
  --body: #1d5bd0;
  --trim: #ffd84a;
  --accent: #174aa8;
  --glow: rgba(130, 205, 255, 0.55);
}
.cab-feed {
  --flare: #efe0c2;
  --body: #b3312a;
  --trim: #f4ecd8;
  --accent: #82211b;
  --glow: rgba(255, 196, 150, 0.5);
}
.cab-drive {
  --flare: #bfd9ee;
  --body: #0a6a4b;
  --trim: #f4f1e8;
  --accent: #064e37;
  --glow: rgba(200, 236, 160, 0.5);
}
/* The row dims around whichever machine you're looking at */
@media (hover: hover) {
  .row:has(.cab-link:hover) .cab:not(:has(.cab-link:hover)) {
    filter: brightness(0.62) saturate(0.8);
  }
}
.row:has(.cab-link:focus-visible) .cab:not(:has(.cab-link:focus-visible)) {
  filter: brightness(0.62) saturate(0.8);
}
.cab-link {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 4px;
  /* no gray flash over the whole cabinet on a tap; the machine answers with its own light instead */
  -webkit-tap-highlight-color: transparent;
}
/* Light the screen throws on the carpet */
.cab::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: -70%;
  right: -70%;
  bottom: -120px;
  height: 260px;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, var(--glow), transparent 70%);
  opacity: calc(0.85 * var(--lit));
  pointer-events: none;
}
.cab::before {
  /* contact shadow */
  content: '';
  position: absolute;
  z-index: -1;
  left: -6%;
  right: -6%;
  bottom: -12px;
  height: 26px;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0, 0, 0, 0.85), transparent 70%);
}
.front {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}
/* Until a machine powers on it sits in the dark */
.front::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 8;
  background: #030304;
  opacity: calc((1 - var(--lit)) * 0.72 + var(--depth) * 0.2);
  pointer-events: none;
}
/* The sign lights the tops of the machines; the light is gone by the control panel */
.front::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 7;
  background: linear-gradient(rgba(255, 226, 180, calc(0.16 - 0.1 * var(--depth))), transparent 36%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Side panels: arcade.js sets --side from where the cabinet sits relative to the middle of the screen */
.side {
  position: absolute;
  top: 6px;
  bottom: 0;
  background:
    linear-gradient(118deg, transparent 0 46%, var(--trim) 46% 50%, transparent 50% 55%, var(--accent) 55% 64%, transparent 64%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)),
    var(--body);
  filter: brightness(calc(0.35 + 0.3 * var(--lit)));
}
.side-r {
  left: 100%;
  width: calc(max(0, -1 * var(--side)) * 40px);
  clip-path: polygon(0 0, 100% 3.5%, 100% 97%, 0 100%);
  box-shadow: inset 2px 0 0 var(--trim);
}
.side-l {
  right: 100%;
  width: calc(max(0, var(--side)) * 40px);
  clip-path: polygon(0 3.5%, 100% 0, 100% 100%, 0 97%);
  box-shadow: inset -2px 0 0 var(--trim);
}

/* Marquee */
.marquee {
  position: relative;
  height: 70px;
  padding: 6px;
  background: linear-gradient(#26262c, #121216);
  border-radius: 4px 4px 0 0;
}
/* Each lit marquee throws its color up the wall */
.marquee::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -30%;
  right: -30%;
  bottom: 40%;
  height: 320px;
  background: radial-gradient(ellipse 50% 60% at 50% 100%, var(--glow), transparent 72%);
  opacity: calc(0.85 * var(--lit));
  pointer-events: none;
}
.marquee-art {
  position: absolute;
  inset: 6px;
  background: #333 center / cover no-repeat;
  filter: brightness(calc(0.25 + 0.8 * var(--lit)));
  box-shadow: 0 0 22px 2px color-mix(in srgb, var(--glow) 60%, transparent);
  transition: filter 300ms ease;
}
.marquee-art::after {
  content: '';
  position: absolute;
  inset: 0;
  /* screen-printed: a fine halftone dot over the art, under the gloss of the plexi */
  background:
    linear-gradient(rgba(255, 255, 255, 0.28), transparent 35%, transparent 70%, rgba(0, 0, 0, 0.25)),
    radial-gradient(circle, rgba(24, 14, 10, 0.2) 0.7px, transparent 1.2px) 0 0 / 3px 3px;
}
.marquee-title {
  position: absolute;
  inset: 6px;
  display: grid;
  place-items: center;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
}
.cab-fairway .marquee-art {
  background: #2a1a44 url('/assets/art/marquee-fairway.svg?v=d8c2993c40') center 64% / cover no-repeat;
}
/* the same lettering as the 3D marquees: each machine its own face, a keyline, an extruded side */
.cab-fairway .marquee-title {
  font: italic 600 31px/1 'Bodoni Moda', Georgia, serif;
  letter-spacing: -0.01em;
  color: #fff4dc;
  -webkit-text-stroke: 3px #0d2418;
  paint-order: stroke fill;
  text-shadow: 1px 1px 0 #c8912e, 2px 2px 0 #c8912e, 3px 3px 0 #0d2418, 0 0 14px rgba(255, 190, 110, 0.45);
}
.cab-dash .marquee-art {
  background: #2a9be6 url('/assets/art/marquee-dash.svg?v=90e22fac26') center 72% / cover no-repeat;
}
.cab-dash .marquee-title {
  padding-left: 20%;
  font: 400 24px/1 Bungee, 'Arial Black', sans-serif;
  letter-spacing: 0;
  color: #ffd84a;
  -webkit-text-stroke: 4px var(--ink);
  paint-order: stroke fill;
  text-shadow: 1px 1px 0 #c8332b, 2px 2px 0 #c8332b, 3px 3px 0 #c8332b, 4px 4px 0 var(--ink);
}
.cab-feed .marquee {
  height: 80px;
}
.cab-feed .marquee-art {
  background: #f7efe0 url('/assets/art/marquee-feed.svg?v=5337996d1d') left 78% / cover no-repeat;
}
.cab-feed .marquee-title {
  padding-left: 34%;
  white-space: normal;
  font: 400 24px/0.98 Shrikhand, Georgia, serif;
  letter-spacing: 0;
  color: #fff8e8;
  -webkit-text-stroke: 4px #3d0b07;
  paint-order: stroke fill;
  text-shadow: 1px 1px 0 #8a1d15, 2px 2px 0 #8a1d15, 3px 3px 0 #3d0b07;
}
.cab-drive .marquee {
  height: 80px;
}
.cab-drive .marquee-art {
  background: #2a1a44 url('/assets/art/marquee-drive.svg?v=129a927ba9') left 72% / cover no-repeat;
}
/* lettered like the street sign at the top of the road: white on the sign's green */
.cab-drive .marquee-title {
  padding-left: 32%;
  white-space: normal;
  font: 700 21px/0.95 var(--ui);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #ffffff;
  -webkit-text-stroke: 4px #032a1d;
  paint-order: stroke fill;
  text-shadow: 1px 1px 0 #0a6a4b, 2px 2px 0 #0a6a4b, 3px 3px 0 #032a1d;
}

/* Bezel and CRT */
.bezel {
  position: relative;
  height: 218px;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(#030304, #111114 18%, #0c0c0e);
  box-shadow: inset 3px 0 0 var(--trim), inset -3px 0 0 var(--trim);
}
.grille {
  display: block;
  width: 118px;
  height: 7px;
  margin-bottom: 10px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, #050506 0 3px, #1d1d22 3px 5px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}
.crt {
  position: relative;
  width: 196px;
  height: 147px;
  border-radius: 18px / 16px;
  overflow: hidden;
  background: #020202;
  box-shadow:
    0 0 0 5px #1c1c20,
    0 0 0 6px #2a2a30,
    0 0 34px 6px var(--glow);
  isolation: isolate;
  transition: box-shadow 300ms ease, filter 200ms ease;
}
.px {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Scanlines on the same 2px grid as the pixel art, then tube curvature and glass */
.crt::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: repeating-linear-gradient(rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 2px);
  pointer-events: none;
}
.crt::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 60% 40% at 28% 16%, rgba(255, 255, 255, 0.16), transparent 70%),
    radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, 0.6) 100%);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}
.crt-text {
  position: absolute;
  z-index: 4;
  font: 400 8px/1 var(--pixel);
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.crt-top,
.crt-credit {
  padding: 3px 5px 2px;
  background: #05070e;
}
.crt-top {
  top: 8px;
  left: 10px;
  color: #ffe27a;
}
.crt-credit {
  bottom: 8px;
  left: 50%;
  translate: -50% 0;
}
.crt-start {
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  padding: 4px 6px 3px;
  background: rgba(5, 7, 14, 0.82);
  opacity: 0;
}
.cab-link:hover .crt-start,
.cab-link:focus-visible .crt-start,
.cab.attract .crt-start {
  animation: blink 900ms steps(1) infinite;
}
@keyframes blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}
.crt-off {
  background: radial-gradient(ellipse at 40% 30%, #1d1f22, #070708 70%);
  box-shadow: 0 0 0 5px #1c1c20, 0 0 0 6px #2a2a30;
}
/* TV snow behind the taped note on the machine that isn't ready yet */
.crt-off::before {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='1' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>") 0 0 / 120px 120px,
    repeating-linear-gradient(rgba(0, 0, 0, 0.3) 0 1px, transparent 1px 2px);
  opacity: 0.18;
}
.note-sign {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  rotate: -4deg;
  padding: 14px 16px 12px;
  background: #fbf6e6;
  color: #1f2a8a;
  font: 400 19px/1 'Permanent Marker', 'Marker Felt', cursive;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
}
.note-sign::before,
.note-sign::after {
  /* two strips of masking tape */
  content: '';
  position: absolute;
  top: -8px;
  width: 38px;
  height: 15px;
  background: rgba(232, 222, 190, 0.85);
}
.note-sign::before {
  left: -10px;
  rotate: -28deg;
}
.note-sign::after {
  right: -10px;
  rotate: 24deg;
}
/* Instructions painted on the bezel in the cabinet's trim color */
.bezel-print {
  margin-top: 13px;
  font: 700 13px/1 var(--ui);
  color: var(--trim);
  opacity: 0.88;
}
.crt .zap {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='1' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>") 0 0 / 120px 120px;
  mix-blend-mode: screen;
}

/* Control panel, seen from standing height */
.panel {
  position: relative;
  height: 62px;
  margin: 0 -10px;
  background:
    linear-gradient(transparent 70%, rgba(0, 0, 0, 0.55) 70%),
    linear-gradient(100deg, var(--accent), var(--body));
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 70%, 100% 100%, 0 100%, 0 70%);
}
/* The screen's light falls across the control panel */
.panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(color-mix(in srgb, var(--glow) 55%, transparent), transparent 68%);
  opacity: var(--lit);
  mix-blend-mode: screen;
  pointer-events: none;
}
.panel > * {
  z-index: 1;
}
.panel::after {
  /* front lip trim */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 70%;
  height: 3px;
  background: var(--trim);
  opacity: 0.8;
}
.stick {
  position: absolute;
  left: 26%;
  top: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff9d8a, #d62d17 45%, #7a1206 90%);
  box-shadow: 0 10px 0 -6px #000, 0 12px 6px rgba(0, 0, 0, 0.55);
}
.stick::before {
  /* dust washer */
  content: '';
  position: absolute;
  z-index: -2;
  left: -5px;
  top: 26px;
  width: 30px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, #2a2a30, #09090b 70%);
}
.stick::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 17px;
  width: 4px;
  height: 14px;
  background: linear-gradient(90deg, #111, #555, #111);
  z-index: -1;
}
.btn {
  position: absolute;
  top: 18px;
  width: 22px;
  height: 13px;
  border-radius: 50%;
  box-shadow: 0 3px 0 #000, 0 4px 0 rgba(0, 0, 0, 0.6), inset 0 -2px 0 rgba(0, 0, 0, 0.3), inset 0 2px 1px rgba(255, 255, 255, 0.55);
}
.b1 {
  left: 54%;
  background: var(--trim);
}
.b2 {
  left: 68%;
  top: 14px;
  background: #f4ecd9;
}

/* Lower cabinet: laminate grain, coin door, kick plate with vents */
.lower {
  position: relative;
  height: 158px;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 7px, rgba(0, 0, 0, 0.05) 7px 8px, transparent 8px 13px),
    linear-gradient(var(--body), color-mix(in srgb, var(--body) 45%, #000) 60%, #050506);
  box-shadow: inset 3px 0 0 var(--trim), inset -3px 0 0 var(--trim);
}
.cab-dash .lower {
  height: 134px;
}
.lower::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14px;
  background: repeating-linear-gradient(90deg, #050506 0 14px, #111115 14px 34px) 0 5px / 100% 3px no-repeat, #050506;
}
.coin {
  position: absolute;
  left: 50%;
  top: 24px;
  translate: -50% 0;
  width: 82px;
  height: 78px;
  padding: 12px 10px;
  display: flex;
  justify-content: space-between;
  background: linear-gradient(#34343b, #1c1c21);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 6px rgba(0, 0, 0, 0.6);
}
.cab-dash .coin {
  top: 16px;
}
.slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.slot i {
  width: 16px;
  height: 22px;
  border-radius: 3px;
  background: radial-gradient(ellipse at 50% 35%, #ffd2a0, #ff5a1f 55%, #a82206);
  box-shadow: 0 0 12px 2px rgba(255, 90, 30, calc(0.55 * var(--lit)));
  filter: brightness(calc(0.3 + 0.75 * var(--lit)));
}
.slot b {
  font: 700 6.5px/1 var(--ui);
  text-transform: uppercase;
  color: #ffb27a;
  opacity: calc(0.3 + 0.7 * var(--lit));
}

/* The printed lower front: the same illustrated art as the 3D cabinets (assets/art/front-*.svg) */
.lower::before {
  content: '';
  position: absolute;
  inset: 0 3px 14px;
  background:
    radial-gradient(circle, rgba(24, 14, 10, 0.18) 0.7px, transparent 1.2px) 0 0 / 3px 3px,
    var(--front, none) center var(--front-y, 72%) / cover no-repeat;
  filter: brightness(calc(0.3 + 0.62 * var(--lit)));
  pointer-events: none;
}
/* each print is framed on what matters in it: the shot over the ridge, Pam in the air, Pam on the cloth */
.cab-fairway { --front: url('/assets/art/front-fairway.webp?v=3ee5430d18'); --front-y: 50%; }
.cab-dash { --front: url('/assets/art/front-dash.webp?v=a4780dce46'); --front-y: 6%; }
.cab-feed { --front: url('/assets/art/front-feed.webp?v=76a578db8a'); --front-y: 88%; }
.cab-drive { --front: url('/assets/art/front-drive.svg?v=499fa79559'); --front-y: 100%; }

/* ---- each machine its own shape -------------------------------------------------- */
/* Fairway Studio: a golf cabinet with a hood over the marquee and a trackball */
.hood {
  display: block;
  height: 30px;
  margin: 0 -6px;
  border-radius: 90px 90px 0 0 / 30px 30px 0 0;
  background:
    linear-gradient(rgba(255, 226, 180, 0.22), transparent 60%),
    linear-gradient(#1d4a35, #0f2a1d);
  box-shadow: inset 0 3px 0 rgba(227, 176, 76, 0.85), inset 0 -2px 0 #081610;
}
.cab-fairway .marquee {
  border-radius: 0;
}
.panel-golf .ball {
  position: absolute;
  left: 50%;
  top: 2px;
  width: 42px;
  height: 42px;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #ffffff 0 7%, #f1ead6 20%, #c9bfa6 55%, #5b5444 92%);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.55);
}
.panel-golf .ball::before {
  /* the bezel ring it sits in */
  content: '';
  position: absolute;
  z-index: -1;
  left: -9px;
  right: -9px;
  top: 20px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, #2b2b31, #060607 72%);
}
.panel-golf .b1 {
  left: 16%;
  top: 16px;
  background: var(--trim);
}
.panel-golf .b2 {
  left: auto;
  right: 16%;
  top: 16px;
  background: #f4ecd9;
}
/* Suburban Super Drive: a stick, Nitro and Brake */
.panel-drive .b1 {
  background: #f2c230;
}
.panel-drive .b2 {
  background: #e8641b;
}
.panel-golf .start {
  position: absolute;
  left: 8%;
  top: 4px;
  padding: 3px 4px 2px;
  font: 700 6.5px/1 var(--ui);
  color: #1b1f1c;
  background: #e8e1cf;
  border-radius: 2px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}

/* Ziggy Dash: a shorter kiddie cabinet with one big jump button and a step stool in front */
.cab-dash .marquee {
  border-radius: 24px 24px 0 0;
}
.cab-dash .marquee-art {
  border-radius: 18px 18px 0 0;
}
.cab-dash .bezel {
  height: 204px;
}
.panel-kid .bigbtn {
  position: absolute;
  left: 50%;
  top: 5px;
  width: 50px;
  height: 30px;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at 42% 30%, #fff6c4 0 10%, #ffd84a 38%, #d99a12 88%);
  box-shadow: 0 5px 0 #7a5608, 0 7px 0 rgba(0, 0, 0, 0.55), 0 0 0 4px #10131d, 0 8px 12px rgba(0, 0, 0, 0.5);
  transition: translate 120ms ease, box-shadow 120ms ease;
}
.stool {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: -26px;
  width: 104px;
  height: 40px;
  translate: -50% 0;
  pointer-events: none;
}
.stool::before {
  /* the top, seen from above */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 18px;
  background: linear-gradient(#ff7b5a, #e0421f);
  clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3);
}
.stool::after {
  /* the front face with a hand hole, and its shadow */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 18px;
  bottom: 0;
  background:
    radial-gradient(ellipse 14px 5px at 50% 50%, #2a0a05 0 96%, transparent 100%),
    linear-gradient(#c3301a, #7a190b);
  filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.7));
}

/* Feed Pam the Pug: a spinner knob to turn her, and three food buttons */
.panel-feed .knob {
  --spin: 0deg;
  position: absolute;
  left: 18%;
  top: 7px;
  width: 38px;
  height: 22px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 45% 35%, rgba(255, 255, 255, 0.45), transparent 45%),
    repeating-conic-gradient(from var(--spin), #1a1a1f 0 8deg, #3a3a44 8deg 16deg);
  box-shadow: 0 5px 0 #0b0b0d, 0 7px 8px rgba(0, 0, 0, 0.55), 0 0 0 3px #52140f;
}
.panel-feed .fbtn {
  position: absolute;
  top: 12px;
  width: 20px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 3px 0 #000, 0 4px 0 rgba(0, 0, 0, 0.6), inset 0 -2px 0 rgba(0, 0, 0, 0.3), inset 0 2px 1px rgba(255, 255, 255, 0.55);
  transition: translate 120ms ease;
}
.panel-feed .f-pizza {
  left: 50%;
  background: #ffb02e;
}
.panel-feed .f-broc {
  left: 64%;
  top: 9px;
  background: #4fbf45;
}
.panel-feed .f-poop {
  left: 78%;
  top: 12px;
  background: #8a5a2b;
}
@property --spin {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* Hover: hands on the controls */
.stick {
  transform-origin: 50% 160%;
  transition: rotate 180ms ease;
}
.btn {
  transition: translate 120ms ease;
}
.cab-link:hover .stick,
.cab-link:focus-visible .stick {
  rotate: -12deg;
}
.cab-link:hover .b1,
.cab-link:focus-visible .b1,
.cab-link:hover .f-pizza,
.cab-link:focus-visible .f-pizza {
  translate: 0 2px;
}
.cab-link:hover .bigbtn,
.cab-link:focus-visible .bigbtn {
  translate: -50% 3px;
  box-shadow: 0 2px 0 #7a5608, 0 3px 0 rgba(0, 0, 0, 0.55), 0 0 0 4px #10131d, 0 4px 8px rgba(0, 0, 0, 0.5);
}
@media (prefers-reduced-motion: no-preference) {
  .cab-link:hover .knob,
  .cab-link:focus-visible .knob {
    animation: spin 900ms linear infinite;
  }
  .cab-link:hover .slot i,
  .cab-link:focus-visible .slot i {
    animation: lamp 240ms steps(1) 4;
  }
}
@keyframes spin {
  to {
    --spin: 360deg;
  }
}
@keyframes lamp {
  50% {
    filter: brightness(1.6);
  }
}

/* Wear: scuffed kick plates */
.lower::after {
  background:
    linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.07) 21%, transparent 23%, transparent 61%, rgba(255, 255, 255, 0.06) 62%, transparent 64%),
    repeating-linear-gradient(90deg, #050506 0 14px, #111115 14px 34px) 0 5px / 100% 3px no-repeat,
    #050506;
}

/* Pam, asleep on the carpet by her machine */
.nap {
  position: absolute;
  z-index: 4;
  right: -112px;
  bottom: -22px;
  width: 132px;
  height: 69px;
}
.nap svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.nap-body,
.nap-head,
.nap-ear {
  transform-box: fill-box;
}
.nap-body {
  transform-origin: 50% 100%;
}
.nap-head {
  transform-origin: 70% 90%;
}
.nap-ear {
  transform-origin: 0% 100%;
}
.zz {
  position: absolute;
  left: 20px;
  top: -8px;
  font: 400 8px/1 var(--pixel);
  color: rgba(242, 234, 216, 0.75);
}
.zz i {
  position: absolute;
  font-style: normal;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .nap-body {
    animation: breathe 3.2s ease-in-out infinite;
  }
  .nap-head {
    animation: breathe-head 3.2s ease-in-out infinite;
  }
  .zz i {
    animation: zz 4.8s linear infinite;
  }
  .zz i:nth-child(2) {
    animation-delay: 1.6s;
  }
  .zz i:nth-child(3) {
    animation-delay: 3.2s;
  }
  .nap:hover .nap-ear {
    animation: flick 380ms ease 2;
  }
}
@keyframes breathe {
  50% {
    transform: scale(1.02, 1.07);
  }
}
@keyframes breathe-head {
  50% {
    transform: translateY(-1px) rotate(-2deg);
  }
}
@keyframes zz {
  0% { opacity: 0; transform: translate(0, 0) scale(0.7); }
  15% { opacity: 1; }
  80% { opacity: 0.6; }
  100% { opacity: 0; transform: translate(10px, -26px) scale(1.2); }
}
@keyframes flick {
  50% {
    transform: rotate(-24deg);
  }
}

/* A couple of the sign's bulbs have burned out */
.bulb.dead,
.bulbs[data-p] .bulb.dead {
  background: radial-gradient(circle at 40% 35%, #4a4034, #2a241b 60%, #19150f);
  box-shadow: none;
}

/* Hover: the machine you're about to pick wakes up */
.cab-link:hover .marquee-art,
.cab-link:focus-visible .marquee-art {
  filter: brightness(1.22);
}
.cab-link:hover .crt,
.cab-link:focus-visible .crt {
  box-shadow: 0 0 0 5px #1c1c20, 0 0 0 6px #2a2a30, 0 0 48px 12px var(--glow);
}

/* Film grain and a lens vignette over the whole shot, kept inside the hall */
.hall::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background:
    radial-gradient(ellipse 75% 70% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}
/* The hall hands over to the page below without a hard edge */
.hall::before {
  content: '';
  position: absolute;
  z-index: 8;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72px;
  background: linear-gradient(transparent, var(--night));
  pointer-events: none;
}
.blackout {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: #000;
  opacity: 0;
  pointer-events: none;
}

/* ================================================================================== */
/* Opening: the lights come on                                                          */
/* ================================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js .scene {
    animation: dolly 2800ms cubic-bezier(0.3, 0.1, 0.1, 1) both;
  }
  .js .sign {
    animation: tube 1500ms linear 250ms both, hum 13s linear 5s infinite;
  }
  .js .wall,
  .js .floor,
  .js .far,
  .js .cone {
    animation: room 1500ms linear 250ms both;
  }
  .js .bolt-b {
    animation: register 520ms cubic-bezier(0.3, 1.5, 0.5, 1) 1150ms both;
  }
  .js .cab {
    animation: cab-on 700ms linear both;
    animation-delay: calc(1100ms + var(--i) * 240ms);
  }
  .js .px {
    animation: crt-on 560ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
    animation-delay: calc(1350ms + var(--i) * 240ms);
  }
  .js .crt-top,
  .js .crt-credit {
    animation: show 300ms steps(2) backwards;
    animation-delay: calc(1750ms + var(--i) * 240ms);
  }
  .js .ticker {
    animation: show 500ms steps(3) 1700ms backwards;
  }
  .ticker-track {
    animation: ticker 26s linear infinite;
  }
  .motes i {
    animation: mote var(--d) linear infinite var(--dl);
  }
  .cab-link:hover .zap,
  .cab-link:focus-visible .zap,
  .cab.attract .zap {
    animation: zap 260ms steps(3) 1;
  }
}
@keyframes dolly {
  from {
    scale: 1.35;
  }
}
@keyframes tube {
  0% { filter: brightness(0.12); }
  8% { filter: brightness(1); }
  11% { filter: brightness(0.2); }
  20% { filter: brightness(0.9); }
  23% { filter: brightness(0.35); }
  30% { filter: brightness(1.05); }
  34% { filter: brightness(0.6); }
  40%, 100% { filter: brightness(1); }
}
/* Now and then the tubes behind the sign stutter */
@keyframes hum {
  0%, 90% { filter: brightness(1); }
  90.6% { filter: brightness(0.55); }
  91.2% { filter: brightness(1); }
  91.8% { filter: brightness(0.7); }
  92.4%, 100% { filter: brightness(1); }
}
@keyframes room {
  0% { opacity: 0.08; }
  8% { opacity: 0.9; }
  11% { opacity: 0.2; }
  20% { opacity: 0.8; }
  23% { opacity: 0.35; }
  30% { opacity: 1; }
  34% { opacity: 0.6; }
  40%, 100% { opacity: 1; }
}
@keyframes register {
  from {
    transform: translate(15px, 10px);
  }
}
@keyframes cab-on {
  0% { --lit: 0.05; }
  14% { --lit: 0.7; }
  22% { --lit: 0.15; }
  40% { --lit: 0.9; }
  48% { --lit: 0.5; }
  100% { --lit: 1; }
}
@keyframes cab-on-dim {
  0% { --lit: 0.05; }
  30% { --lit: 0.4; }
  40% { --lit: 0.1; }
  100% { --lit: 0.35; }
}
@keyframes crt-on {
  0% {
    transform: scale(1, 0.004);
    filter: brightness(4) saturate(0);
  }
  45% {
    transform: scale(1, 0.004);
    filter: brightness(4) saturate(0);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes show {
  from {
    opacity: 0;
  }
}
@keyframes ticker {
  to {
    transform: translateX(-50%);
  }
}
@keyframes mote {
  0% { opacity: 0; transform: translate(0, 0); }
  15% { opacity: 1; }
  50% { transform: translate(14px, -60px); }
  85% { opacity: 0.8; }
  100% { opacity: 0; transform: translate(-6px, -130px); }
}
@keyframes zap {
  0% { opacity: 0.75; background-position: 0 0; transform: skewX(-4deg) scaleY(1.02); }
  50% { opacity: 0.5; background-position: -40px 30px; transform: skewX(3deg); }
  100% { opacity: 0; background-position: 20px -50px; transform: none; }
}

/* Off screen or in a background tab, everything holds still */
.hall.paused *,
.hall.paused *::before,
.hall.paused *::after {
  animation-play-state: paused !important;
}

/* Leaving for a game: walk into the screen, the tube flares, then black */
.hall.launch .scene {
  transition: scale 640ms cubic-bezier(0.55, 0, 0.2, 1), translate 640ms cubic-bezier(0.55, 0, 0.2, 1);
  scale: 7;
}
.hall.launch .crt.chosen {
  filter: brightness(2.6) saturate(0.6);
  transition: filter 240ms ease 380ms;
}
.hall.launch .blackout {
  opacity: 1;
  background: var(--flare, #000);
  transition: opacity 180ms ease 440ms;
}
.hall.launch .far,
.hall.launch .cone,
.hall.launch .motes {
  visibility: hidden;
}
.hall.launch .scene {
  will-change: transform;
}
.coin-drop {
  position: absolute;
  z-index: 9;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff4c0, #e3b04c 55%, #8a6214);
  box-shadow: 0 0 8px rgba(255, 210, 120, 0.8);
  animation: coin 240ms cubic-bezier(0.5, 0, 1, 0.6) both;
  pointer-events: none;
}
@keyframes coin {
  from {
    translate: 0 -46px;
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  to {
    translate: 0 0;
    opacity: 0;
  }
}

/* ================================================================================== */
/* Attract screens (pixel scenes drawn by scripts/art/scenes.py)                        */
/* ================================================================================== */
@keyframes flip {
  0%, 49.9% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes scroll98 {
  to { transform: translateX(-98px); }
}
.fs-flag .f2,
.zd-ziggy .b,
.zd-pam .b,
.zd-plus {
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .fs-flag .f1 { animation: flip 700ms infinite; }
  .fs-flag .f2 { animation: flip 700ms infinite -350ms; }
  .fs-star:nth-child(3n) { animation: flip 2.6s infinite; }
  .fs-star:nth-child(3n + 1) { animation: flip 3.4s infinite -1.2s; }
  .fs-sun { animation: sink 16s ease-in-out infinite alternate; }
  .zd-clouds { animation: scroll98 40s linear infinite; }
  .zd-hills-back { animation: scroll98 26s steps(98) infinite; }
  .zd-hills-front { animation: scroll98 13s steps(98) infinite; }
  .zd-fence { animation: scroll98 3.2s steps(98) infinite; }
  .zd-grass { animation: scroll98 2.6s steps(98) infinite; }
  .zd-hazard { animation: hazard 2.4s linear infinite; }
  .zd-bone { animation: bone 2.4s linear infinite; }
  .zd-plus { animation: plus 2.4s linear infinite; }
  .zd-ziggy { animation: hop-ziggy 2.4s linear infinite; }
  .zd-pam { animation: hop-pam 2.4s linear infinite; }
  .zd-ziggy .a, .zd-pam .a { animation: flip 240ms infinite; }
  .zd-ziggy .b, .zd-pam .b { animation: flip 240ms infinite -120ms; }
  .crt-off::before { animation: snow 380ms steps(4) infinite; }
}
@keyframes sink {
  to { transform: translateY(2px); }
}
@keyframes hazard {
  from { transform: translateX(100px); }
  to { transform: translateX(-12px); }
}
@keyframes bone {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes plus {
  0%, 49% { opacity: 0; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(0); }
  64% { opacity: 1; transform: translateY(-5px); }
  66%, 100% { opacity: 0; transform: translateY(-5px); }
}
@keyframes hop-ziggy {
  0%, 36% { transform: translateY(0); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); }
  50% { transform: translateY(-13px); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  63%, 100% { transform: translateY(0); }
}
@keyframes hop-pam {
  0%, 55% { transform: translateY(0); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); }
  67% { transform: translateY(-11px); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  79%, 100% { transform: translateY(0); }
}
@keyframes snow {
  0% { background-position: 0 0, 0 0; }
  25% { background-position: -37px 21px, 0 0; }
  50% { background-position: 18px -44px, 0 0; }
  75% { background-position: -52px -9px, 0 0; }
}
/* Feed Pam the Pug */
.fp-pam {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.fp-blink,
.fp-chomp,
.fp-burp,
.fp-sparkle,
.fp-broc {
  opacity: 0;
}
.fp-burp {
  transform-box: fill-box;
  transform-origin: 0 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .fp-pizza { animation: fp-pizza 6s linear infinite; }
  .fp-broc { animation: fp-broc 6s linear infinite; }
  .fp-chomp { animation: fp-chomp 6s step-end infinite; }
  .fp-pam { animation: fp-pam 6s infinite; }
  .fp-burp { animation: fp-burp 6s infinite; }
  .fp-sparkle { animation: fp-sparkle 6s step-end infinite; }
  .fp-blink { animation: fp-blink 6s step-end infinite; }
}
@keyframes fp-pizza {
  0% { transform: translateY(-46px); opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 1, 1); }
  11% { transform: translateY(0); opacity: 1; }
  22% { transform: translateY(0); opacity: 1; }
  23%, 100% { transform: translateY(0); opacity: 0; }
}
@keyframes fp-broc {
  0%, 49% { transform: translateY(-46px); opacity: 0; }
  50% { transform: translateY(-46px); opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 1, 1); }
  61% { transform: translateY(0); opacity: 1; }
  72% { transform: translateY(0); opacity: 1; }
  73%, 100% { transform: translateY(0); opacity: 0; }
}
@keyframes fp-chomp {
  0% { opacity: 0; }
  13% { opacity: 1; }
  15% { opacity: 0; }
  17% { opacity: 1; }
  19% { opacity: 0; }
  21% { opacity: 1; }
  23% { opacity: 0; }
  63% { opacity: 1; }
  65% { opacity: 0; }
  67% { opacity: 1; }
  69% { opacity: 0; }
  71% { opacity: 1; }
  73% { opacity: 0; }
}
@keyframes fp-pam {
  0%, 25% { transform: scale(1, 1); animation-timing-function: steps(4, end); }
  36% { transform: scale(1.3, 1.1); }
  42% { transform: scale(1.36, 1.05); }
  46% { transform: scale(1.3, 1.1); }
  74% { transform: scale(1.3, 1.1); animation-timing-function: steps(4, end); }
  86%, 100% { transform: scale(1, 1); }
}
@keyframes fp-burp {
  0%, 40% { opacity: 0; transform: scale(0.6); }
  42% { opacity: 1; transform: scale(1.08); }
  45% { transform: scale(1); }
  55% { opacity: 1; }
  56%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes fp-sparkle {
  0% { opacity: 0; }
  86% { opacity: 1; }
  88% { opacity: 0; }
  90% { opacity: 1; }
  92% { opacity: 0; }
}
@keyframes fp-blink {
  0% { opacity: 0; }
  95% { opacity: 1; }
  97% { opacity: 0; }
}

/* ================================================================================== */
/* The lineup: a game select screen                                                     */
/* ================================================================================== */
.lineup {
  position: relative;
  padding: clamp(40px, 6vw, 90px) var(--gutter) clamp(64px, 9vw, 120px);
  background: linear-gradient(var(--night), #0b0b10);
}
.menu-crt {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 5vw, 64px) clamp(26px, 4vw, 44px);
  border-radius: 34px / 30px;
  background:
    radial-gradient(ellipse 80% 70% at 50% 40%, rgba(40, 70, 120, 0.22), transparent 75%),
    #050608;
  box-shadow:
    0 0 0 12px #16161a,
    0 0 0 14px #26262c,
    0 0 0 26px #0f0f12,
    0 0 90px 16px rgba(70, 120, 220, 0.14),
    inset 0 0 60px rgba(0, 0, 0, 0.95);
  overflow: hidden;
}
.menu-crt::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 2px);
}
.menu-crt::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(ellipse 60% 30% at 30% 8%, rgba(255, 255, 255, 0.07), transparent 70%);
}
.menu-title {
  margin: 0 0 30px;
  text-align: center;
  font: 400 16px/1.2 var(--pixel);
  text-transform: uppercase;
  color: var(--yellow);
  text-shadow: 0 0 12px rgba(241, 189, 44, 0.55);
}
.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: game;
}
.menu li {
  counter-increment: game;
}
.menu a,
.menu .soon {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 10px 0;
  padding: 16px 18px 16px 0;
  text-decoration: none;
  border-radius: 6px;
}
.menu a::before,
.menu .soon::before {
  content: counter(game, decimal-leading-zero);
  grid-row: span 2;
  padding-top: 3px;
  text-align: right;
  padding-right: 18px;
  font: 400 16px/1.2 var(--pixel);
  color: rgba(242, 234, 216, 0.45);
}
.menu-name {
  font: 400 16px/1.3 var(--pixel);
  text-transform: uppercase;
  color: var(--cream);
}
.menu-go {
  grid-row: span 2;
  align-self: center;
  padding-left: 20px;
  font: 400 16px/1 var(--pixel);
  text-transform: uppercase;
  color: var(--yellow);
}
.menu-go::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 10px;
  margin-left: 9px;
  vertical-align: -1px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.soon .menu-go {
  color: rgba(242, 234, 216, 0.35);
}
.soon .menu-go::after {
  display: none;
}
.menu-note {
  grid-column: 2;
  font: 400 16px/1.5 var(--ui);
  color: var(--dim);
  max-width: 60ch;
}
.menu a:hover,
.menu a:focus-visible {
  background: rgba(59, 116, 230, 0.16);
  outline: none;
}
.menu a:focus-visible {
  box-shadow: inset 0 0 0 2px var(--yellow);
}
.menu a:hover .menu-name,
.menu a:focus-visible .menu-name {
  color: var(--yellow);
  text-shadow: 0 0 10px rgba(241, 189, 44, 0.5);
}
@media (prefers-reduced-motion: no-preference) {
  .menu a:hover .menu-go,
  .menu a:focus-visible .menu-go {
    animation: blink 700ms steps(1) infinite;
  }
}
.menu .soon .menu-name {
  color: rgba(242, 234, 216, 0.45);
}
.menu-foot {
  margin: 26px 0 0;
  text-align: center;
  font: 500 13px/1.6 var(--ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(242, 234, 216, 0.55);
}
.menu-foot span {
  color: var(--red);
}

/* ---- footer ---------------------------------------------------------------------- */
.foot {
  border-top: 1px solid var(--faint);
  padding: 24px var(--gutter) calc(24px + env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 28px;
  font-size: 13px;
  color: var(--dim);
}
.foot p {
  margin: 0;
}
.foot a {
  color: var(--cream);
  text-underline-offset: 3px;
}

/* ================================================================================== */
/* Sizes                                                                                */
/* ================================================================================== */
/* Short laptop screens: a smaller sign so the machines sit higher in the frame (arcade.js scales the row) */
@media (min-width: 861px) and (max-height: 820px) {
  .sign-wrap {
    scale: 0.8;
    top: 16px;
  }
  .ticker {
    margin-top: 16px;
  }
  .house {
    margin-top: 10px;
  }
}
@media (min-width: 861px) and (max-height: 700px) {
  .sign-wrap {
    scale: 0.7;
    top: 10px;
  }
  .house {
    display: none;
  }
}
@media (min-width: 1700px) and (min-height: 900px) {
  .sign-wrap {
    scale: 1.12;
  }
}
@media (min-width: 2200px) and (min-height: 1200px) {
  .sign-wrap {
    scale: 1.4;
  }
}

/* Phones and tablets: the sign on top, then a strip of machines */
@media (max-width: 860px) {
  .hall {
    height: auto;
    min-height: 0;
  }
  .scene {
    position: relative;
    padding: 18px 0 24px;
  }
  .wall {
    inset: 0 0 26% 0;
  }
  .floor {
    top: 72%;
  }
  .far,
  .fg,
  .exit,
  .clock,
  .motes,
  .cone {
    display: none;
  }
  .sign-wrap {
    position: relative;
    top: 0;
    padding: 0 var(--gutter);
  }
  .sign {
    padding: 18px;
  }
  .bulbs {
    inset: 9px;
  }
  .sign-face {
    gap: 10px;
    padding: 11px 20px 12px 14px;
  }
  .bolt {
    width: 50px;
    height: 50px;
    margin: -6px 0;
  }
  .bolt-b {
    transform: translate(3px, 3px);
  }
  .sign-face {
    --wf: clamp(32px, 10vw, 52px);
  }
  .ticker {
    width: calc(100% - 8px);
    margin-top: 14px;
  }
  .row {
    position: relative;
    bottom: 0;
    justify-content: flex-start;
    gap: 34px;
    padding: 10px calc(50% - var(--cab) / 2 + 60px) 44px calc(50% - var(--cab) / 2);
    margin-top: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .row::-webkit-scrollbar {
    display: none;
  }
  .cab {
    scroll-snap-align: center;
  }
  /* in the swipe strip Pam sleeps at the foot of her machine, not out past its edge */
  .nap {
    right: -26px;
    bottom: -30px;
    width: 112px;
    height: 59px;
  }
  .hall::before {
    height: 60px;
  }
  .menu a,
  .menu .soon {
    grid-template-columns: 40px minmax(0, 1fr);
    padding-right: 12px;
  }
  .menu a::before,
  .menu .soon::before {
    padding-right: 12px;
    font-size: 10px;
  }
  .menu-go {
    grid-row: auto;
    grid-column: 2;
    padding: 4px 0 0;
    font-size: 11px;
  }
  .menu-foot {
    font-size: 8px;
  }
}
@media (max-width: 400px) {
  :root {
    --cab: 224px;
  }
  /* the hooded golf machine sets the strip's height; trimmed so the arrows stay above the fold */
  .cab-fairway {
    --cab: 250px;
  }
}

/* ================================================================================== */
/* 404: game over                                                                       */
/* ================================================================================== */
.over-main {
  min-height: 100svh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 40px;
  padding: 40px var(--gutter);
  background: radial-gradient(ellipse 50% 40% at 50% 45%, rgba(80, 140, 255, 0.12), transparent 70%), var(--night);
}
.over-screen {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 22px;
  padding: 54px clamp(28px, 7vw, 80px);
  border-radius: 28px / 24px;
  background: #050507;
  box-shadow: 0 0 0 10px #16161a, 0 0 0 12px #26262c, 0 0 80px 10px rgba(80, 140, 255, 0.18), inset 0 0 40px rgba(0, 0, 0, 0.9);
  text-align: center;
  font-family: var(--pixel);
  text-transform: uppercase;
  background-image: repeating-linear-gradient(rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 2px);
}
.over-big {
  font-size: clamp(26px, 6vw, 48px);
  color: var(--red);
  text-shadow: 0 0 14px rgba(239, 74, 47, 0.7);
}
.over-small {
  font-size: 10px;
  line-height: 1.8;
  color: var(--cream);
}
.over-blink {
  font-size: 12px;
  color: var(--yellow);
}
@media (prefers-reduced-motion: no-preference) {
  .over-blink {
    animation: blink 1s steps(1) infinite;
  }
}
.go-home {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 24px;
  background: var(--yellow);
  color: #17130a;
  font-weight: 500;
  text-decoration: none;
  border-radius: 3px;
}

.over-credit {
  margin: -16px 0 0;
  font-size: 13px;
  color: var(--dim);
}
.over-credit a {
  color: var(--cream);
  text-underline-offset: 3px;
}

/* Position bulbs and arrows under the phone strip */
.strip-dots,
.strip-arrow {
  display: none;
}
@media (max-width: 860px) {
  .strip-dots {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
  }
  .strip-dots i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3a2f1f;
    transition: background-color 200ms ease, box-shadow 200ms ease;
  }
  .strip-dots i.on {
    background: #ffd67a;
    box-shadow: 0 0 8px 2px rgba(255, 206, 120, 0.7);
  }
  .strip-arrow {
    position: absolute;
    z-index: 6;
    top: var(--arrow-y, 50%);
    translate: 0 -50%;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(242, 234, 216, 0.2);
    border-radius: 50%;
    background: rgba(8, 8, 11, 0.62);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: var(--cream);
    cursor: pointer;
  }
  .strip-arrow.prev {
    left: 8px;
  }
  .strip-arrow.next {
    right: 8px;
  }
  .strip-arrow::before {
    content: '';
    width: 10px;
    height: 10px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    rotate: 45deg;
    translate: -2px 0;
  }
  .strip-arrow.prev::before {
    rotate: -135deg;
    translate: 2px 0;
  }
}
@media (min-width: 600px) and (max-width: 860px) {
  .strip-arrow {
    top: var(--dots-y, auto);
  }
  .strip-arrow.prev {
    left: calc(50% - 104px);
  }
  .strip-arrow.next {
    right: calc(50% - 104px);
  }
}
/* ---- The 3D room (src3d/, bundled to arcade-3d/arcade3d.js) takes over the hall on big screens ---- */
/* It keeps the full height if the window is narrowed after it starts (the drawn arcade sizes to content) */
@media (max-width: 860px) {
  .hall.three {
    height: 100svh;
    min-height: 560px;
  }
}
@media (min-width: 861px) {
  html.three-pending .hall,
  .hall.three {
    min-height: 0;
  }
}
/* a tablet held upright (under 861 px wide) gets the room too: its hall fills the screen while it loads */
@media (max-width: 860px) {
  html.three-pending .hall {
    height: 100svh;
    min-height: 0;
  }
}
.hall.three .scene {
  visibility: hidden;
}
.stage3d {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.stage3d canvas {
  display: block;
}
/* Until the 3D room is ready only the drawn sign shows, unlit, so the hero is never an empty black box.
   The room then fades in over it. (If 3D fails, the whole drawn arcade comes back.) */
html.three-pending .hall:not(.three) .scene > :not(.sign-wrap) {
  visibility: hidden;
}
/* While the room loads, the unlit drawn sign stands in (dim); when the room is ready the sign is warped onto
   the room's own sign and the two crossfade (main.js), so there is never a jump from one sign to another */
html.three-pending .hall:not(.three) .sign-wrap {
  opacity: 0.4;
  filter: brightness(0.35) saturate(0.6);
  transition: opacity 300ms ease;
}
html.three-pending.three-slow .hall:not(.three):not(.three-ready) .sign-wrap {
  opacity: 0.85;
}
html.three-pending .hall.three-ready:not(.three) .sign-wrap {
  opacity: 0;
}
/* A returning visitor sees a still of the lit room while it loads (the head script picks the shape), and
   the room fades in over it; the drawn sign stays out of the way */
html.three-pending.three-still .hall:not(.three) {
  background: var(--night) var(--still) center / cover no-repeat;
}
html.three-pending.three-still .hall:not(.three) .sign-wrap,
html.three-pending.three-still.three-slow .hall:not(.three):not(.three-ready) .sign-wrap {
  opacity: 0;
  transition: none;
}
.stage3d {
  opacity: 0;
  transition: opacity 450ms ease;
}
.stage3d.on {
  opacity: 1;
}
.stage3d:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: -6px;
}
/* While the 3D room runs, the drawn one underneath holds still */
.hall.three .scene *,
.hall.three .scene *::before,
.hall.three .scene *::after {
  animation-play-state: paused !important;
}
.hall.three .scene {
  display: none;
}

/* ---- 3D room: caption, labels, the screen switching off as you walk in ----------------------------- */
.hall-caption {
  display: none;
}
/* the drawn grain and vignette give way to the 3D room's own */
.hall.three::after {
  display: none;
}
html.three-pending .hall-caption,
.hall.three .hall-caption {
  position: absolute;
  z-index: 10;
  left: 30px;
  bottom: 24px;
  display: flex;
  gap: 14px;
  align-items: baseline;
  margin: 0;
  font: 500 clamp(16px, 0.84vw, 23px)/1.3 var(--ui);
  color: rgba(242, 234, 216, 0.78);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 16px rgba(0, 0, 0, 0.85);
  white-space: nowrap;
  transition: opacity 600ms ease;
}
/* the caption is there from the first paint, dim, and comes up once the room has powered on */
html.three-pending .hall:not(.lit) .hall-caption {
  opacity: 0.45;
}
@media (max-height: 680px) {
  html.three-pending .hall-caption,
  .hall.three .hall-caption {
    bottom: 12px;
  }
}
.hall.three.launching .hall-caption {
  opacity: 0;
  transition-duration: 150ms;
}
.hall-caption a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  font: 700 clamp(12px, 0.68vw, 17px)/1 var(--ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
  text-underline-offset: 4px;
}
/* sound: a small switch in the corner of the room, off by default */
.sound-toggle {
  position: absolute;
  z-index: 10;
  top: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: clamp(34px, 2.2vw, 52px);
  padding: 0 clamp(12px, 0.8vw, 20px);
  font: 700 clamp(11px, 0.62vw, 15px)/1 var(--ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(242, 234, 216, 0.78);
  background: rgba(8, 8, 11, 0.6);
  border: 1px solid rgba(242, 234, 216, 0.16);
  border-radius: 3px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 600ms ease, color 150ms ease, border-color 150ms ease;
}
.hall.three .sound-toggle {
  opacity: 1;
}
.hall.three.launching .sound-toggle {
  opacity: 0;
}
.sound-toggle:hover,
.sound-toggle:focus-visible {
  color: var(--cream);
  border-color: rgba(242, 234, 216, 0.4);
}
.sound-toggle:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}
.sound-toggle .spk {
  position: relative;
  width: 15px;
  height: 12px;
}
.sound-toggle .spk::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 7px;
  height: 8px;
  background: currentColor;
  clip-path: polygon(0 25%, 40% 25%, 100% 0, 100% 100%, 40% 75%, 0 75%);
}
.sound-toggle .spk::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 1px;
  width: 4px;
  height: 10px;
  border: 2px solid currentColor;
  border-left: 0;
  border-radius: 0 8px 8px 0;
  opacity: 0.25;
}
.sound-toggle[aria-pressed='true'] {
  color: var(--yellow);
}
.sound-toggle[aria-pressed='true'] .spk::after {
  opacity: 1;
}
.cab-label {
  position: absolute;
  z-index: 5;
  left: 0;
  top: 0;
  display: grid;
  gap: 2px;
  padding: 17px 11px 8px;
  min-width: min(clamp(150px, 10.5vw, 250px), var(--cab-w, 999px));
  max-width: min(clamp(178px, 12.5vw, 290px), var(--cab-w, 999px));
  transform-origin: 50% -14px;
  text-align: center;
  color: #1b1f1c;
  background:
    linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 40%),
    #f4ecd8;
  border: 1px solid rgba(27, 31, 28, 0.25);
  border-top: 4px solid var(--trim, var(--yellow));
  border-radius: 2px;
  pointer-events: none;
  opacity: 0;
  margin-top: 10px;
  transition: opacity 160ms ease, margin-top 160ms ease;
  box-shadow: 6px 10px 14px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
}
.cab-label.on {
  opacity: 1;
  margin-top: 4px;
}
/* the string it hangs from, looped over the panel lip */
.cab-label::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -14px;
  width: 1px;
  height: 14px;
  background: rgba(236, 228, 210, 0.7);
}
.cab-label::after {
  content: '';
  position: absolute;
  left: calc(50% - 3px);
  top: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0d0d10;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6);
}
.cab-label b {
  font: 700 clamp(16px, 1.1vw, 25px)/1.1 var(--ui);
}
.cab-label span {
  font: 500 clamp(12.5px, 0.86vw, 19px)/1.3 var(--ui);
  color: #4a4a44;
  text-wrap: balance;
}
.cab-label i {
  font: 600 clamp(10px, 0.6vw, 13px)/1.4 var(--ui);
  letter-spacing: 0.12em;
  font-style: normal;
  text-transform: uppercase;
  color: #c8332b;
  margin-top: 4px;
}
.cab-label.soon i {
  color: #6a645a;
}

/* The Easter egg: lake effect snow over the drawn arcade */
.hall.bills::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background-image:
    radial-gradient(2.5px 2.5px at 20px 30px, #fff, transparent),
    radial-gradient(2px 2px at 90px 120px, #fff, transparent),
    radial-gradient(3px 3px at 160px 60px, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(2px 2px at 230px 170px, #fff, transparent),
    radial-gradient(2.5px 2.5px at 300px 90px, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(1.5px 1.5px at 60px 200px, #fff, transparent),
    radial-gradient(2px 2px at 190px 230px, rgba(255, 255, 255, 0.8), transparent);
  background-size: 320px 240px;
  animation: snowfall 6s linear infinite;
  opacity: 0.9;
}
@keyframes snowfall {
  from { background-position: 0 0; }
  to { background-position: 40px 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .hall.bills::before {
    animation: none;
  }
}