/* ───────────────────────────────────────────────────────────────
   Vend. The page is a machine seen head on: the machine itself is a
   under a fluorescent tube, an amber readout, one orange button.
   Nothing here is a card in a grid.
   ─────────────────────────────────────────────────────────────── */

@font-face { font-family: 'Stencil'; src: url('/assets/fonts/stencil-1.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Stencil'; src: url('/assets/fonts/stencil-2.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Supreme'; src: url('/assets/fonts/supreme-1.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Supreme'; src: url('/assets/fonts/supreme-2.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Supreme'; src: url('/assets/fonts/supreme-3.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --casing:      #7c8288;
  --casing-lit:  #9aa1a6;
  --casing-dark: #3a3f43;
  --seam:        #2b2f32;
  --void:        #15181a;
  --void-2:      #1d2124;
  --tube:        #edf2e8;
  --paint:       #e9ede8;
  --vfd:         #ffae1a;
  --vfd-dim:     #8a5c12;
  --hazard:      #e8471f;
  --ink:         #14171a;

  --gap: clamp(1rem, 2.4vw, 1.75rem);
  --bezel: clamp(.75rem, 1.6vw, 1.25rem);
  --radius: 6px;

  --display: 'Stencil', 'Arial Narrow', system-ui, sans-serif;
  --text: 'Supreme', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--text);
  font-size: clamp(15px, 1.02vw + 12px, 17px);
  line-height: 1.55;
  color: var(--paint);
  background:
    radial-gradient(120% 70% at 50% -10%, #43494e 0%, #24282b 45%, #171a1c 100%),
    #171a1c;
  min-height: 100vh;
  /* powder coat: fine speckle over everything, not a glow */
  background-attachment: fixed;
}

body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip {
  position: absolute; left: -9999px;
  background: var(--hazard); color: #fff; padding: .6rem 1rem; z-index: 1000;
}
.skip:focus { left: .75rem; top: .75rem; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--vfd);
  outline-offset: 2px;
}

main { width: min(1080px, 100% - 2rem); margin: 0 auto; }

.h-stencil {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.4rem, 3.1vw, 2.1rem);
  letter-spacing: .04em;
  color: var(--paint);
  margin: 0 0 1.1rem;
}

/* ─────────────  top rail  ───────────── */

/* painted onto the steel: light ink, a hard shadow where the paint sits proud */
.rail__lamp {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; letter-spacing: .08em; color: #93a89d;
}
.rail__lamp i {
  width: 9px; height: 9px; border-radius: 50%;
  background: #4a5054; box-shadow: 0 0 0 2px #2b2f3260;
}
.rail__lamp[data-state="working"] i { background: var(--vfd); box-shadow: 0 0 10px var(--vfd); }
.rail__lamp[data-state="idle"]    i { background: #6f9f5a; box-shadow: 0 0 8px #6f9f5a80; }
.rail__lamp[data-state="down"]    i { background: var(--hazard); box-shadow: 0 0 10px var(--hazard); }


/* the line that tells you what the machine is, painted where a machine paints it */
.rail__say::first-line { font-weight: 700; }

/* the strip above the coin slot, the way a machine states its sequence */
.steps {
  list-style: none; counter-reset: s; margin: .1rem 0 0; padding: 0;
  display: grid; gap: .25rem;
}
.steps li {
  counter-increment: s;
  display: grid; grid-template-columns: 1.2rem 1fr; gap: .45rem; align-items: baseline;
  font-size: .92rem; line-height: 1.45; color: #b8c4bf;
}
.steps li::before {
  content: counter(s); font-family: var(--display); font-weight: 700;
  font-size: .82rem; color: var(--vfd);
}




/* the cabinet's own light landing on the wet floor under it */


/* a real tube strikes twice before it holds. One moment, on load, then never again. */
  16%, 20% { opacity: 1; }
  22%, 34% { opacity: .08; }
  36%, 40% { opacity: .9; }
  42%, 52% { opacity: .12; }
  54%      { opacity: 1; }
  100%     { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .cabinet__tube { animation: none; } }




/* ─────────────  masthead  ───────────── */

.masthead {
  /* The measure belongs to the prose, not to the block: the beats sit in here too and need
     more room than a 44-character line, or the labels wrap and stop reading as three steps. */
  margin: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(2rem, 5vw, 3.5rem);
}
.masthead__say, .masthead__sub { max-width: 44ch; }
.masthead__mark {
  margin: 0 0 .9rem;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem); letter-spacing: .24em;
  color: #6fe8ad;
  text-shadow: 0 0 26px #35ffb055;
}
.masthead__say {
  margin: 0; font-weight: 400;
  font-size: clamp(1.35rem, 2.9vw, 2.05rem); line-height: 1.32;
  letter-spacing: -.005em; color: var(--paint);
}
/* Three beats, read in one glance. Arrows between them because the order is the product:
   the wait is not a loading spinner, it is the reason the card is honest. */
.beats {
  list-style: none; margin: 1.7rem 0 0; padding: 0;
  display: flex; align-items: stretch;
  /* wider than the headline it sits under: three beats on one line or none, because a strip
     that wraps puts an arrow at the start of a row and stops reading as a sequence */
  width: max-content; max-width: 100%;
}
.beats li { flex: 0 1 auto; min-width: 0; }
.beats li {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .5rem 1rem .55rem 0;
  position: relative;
}
.beats li + li { padding-left: 1.15rem; }
.beats li + li::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 7px; height: 7px; margin-top: -4px;
  border-top: 1.5px solid var(--vfd); border-right: 1.5px solid var(--vfd);
  transform: rotate(45deg);
  opacity: .8;
}
.beats b {
  white-space: nowrap;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(.86rem, .5vw + .74rem, 1.02rem); letter-spacing: .02em;
  color: var(--paint);
}
.beats span { font-size: .78rem; color: #8f989d; }

@media (max-width: 760px) {
  .beats { flex-direction: column; gap: 0; width: auto; }
  .beats li { padding: .4rem 0 .4rem 1.2rem; }
  .beats li + li { padding-left: 1.2rem; }
  .beats li::before {
    content: ""; position: absolute; left: 2px; top: 1.05rem;
    width: 7px; height: 7px; margin: 0;
    border-top: 1.5px solid var(--vfd); border-right: 1.5px solid var(--vfd);
    transform: rotate(135deg); opacity: .8;
  }
  .beats li:first-child::before { display: none; }
}

.masthead__sub {
  margin: 1rem 0 0; font-size: clamp(.9rem, 1.2vw, 1rem); line-height: 1.55;
  color: #93a89d; max-width: 52ch;
}

/* ─────────────  the machine  ─────────────
   The frame is a photograph and the live parts are positioned on the real hardware, in
   percentages of the image, so the sign, the glass, the readout and the button are where
   the machine actually has them. Regions measured off the render, not guessed. */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: start;
}

.machine {
  position: relative;
  width: 100%;
  aspect-ratio: 980 / 1181;
  background: url('/assets/machine.webp') center / 100% 100% no-repeat;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 40px 80px -30px #000e;
}

/* the same frame, breathing: rain, a flickering tube, reflections. The machine itself is
   locked, which is why the overlays stay in register on top of it. */
.machine__film {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  display: block; border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) { .machine__film { display: none; } }

/* the lit header band */
.machine__sign {
  position: absolute; left: 26%; top: 13.8%; width: 48%; height: 8%;
  margin: 0; display: grid; place-items: center;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.4rem, 4.4vw, 2.5rem); letter-spacing: .2em;
  color: #23282b;
  text-shadow: 0 1px 0 #ffffffb0;
}

/* the glass, and everything behind it */

/* the readout, on the machine's own display panel */
.machine__vfd {
  container-type: inline-size;
  position: absolute; left: 67.6%; top: 40.6%; width: 6%; height: 3.9%;
  display: grid; place-items: center; padding: 2%;
  overflow: hidden;
}
.machine__vfd .vfd__line {
  margin: 0; font-family: var(--display); font-weight: 700;
  font-size: clamp(.34rem, 11cqw, .62rem); letter-spacing: 0; text-align: center;
  white-space: nowrap; overflow: hidden;
  color: var(--vfd); text-shadow: 0 0 10px #ffae1a90;
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.machine__vfd .vfd__sub { display: none; }

/* the machine's own button, made to actually work */
.machine__press {
  position: absolute; left: 69.1%; top: 52.6%; width: 3.6%; height: 3.2%;
  appearance: none; border: 0; padding: 0; cursor: pointer;
  background: #ffffff00; border-radius: 50%;
  transition: transform .07s ease;
}
.machine__press:hover { background: #ffae1a22; }
.machine__press:active { transform: scale(.9); }
.machine__press[disabled] { cursor: not-allowed; }
/* the button on the photo is the size of a button on a photo; the hit area is the size of a
   thumb, so a tap near it on a phone lands rather than missing by a few pixels */
.machine__press::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
  border-radius: 50%;
}

/* one label to a shelf, sitting on the rail like a price strip */
.shelves {
  position: absolute; left: 28%; top: 25.1%; width: 36%; height: 47.8%;
  margin: 0; padding: 0; list-style: none;
  container-type: inline-size;
}
.shelves li {
  position: absolute; left: 0; width: 100%;
  top: calc(var(--i) * 16.5%); height: 16%;
  display: flex; align-items: flex-end;
}
.shelves span {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(.42rem, 5.4cqw, .78rem); letter-spacing: .06em;
  color: #0b1a12;
  background: linear-gradient(180deg, #d9f7e6, #a9e6c6);
  border-radius: 1px;
  padding: .12em .4em;
  box-shadow: 0 1px 3px #0009;
}
.shelves li.is-next span {
  color: #14171a; background: linear-gradient(180deg, #fff0c2, #ffd166);
  box-shadow: 0 0 10px #ffd16688, 0 1px 3px #0009;
}

/* ─────────────  the delivery  ─────────────
   Three parts, and they happen in order: the door opens, the item falls and hits it, the
   prize comes up. A 0.45× and a 20× run the same steps and look nothing alike, because a
   reveal that treats them the same is not a reveal. */

.machine__flap {
  position: absolute; left: 30.8%; top: 75.3%; width: 30.4%; height: 7.1%;
  z-index: 2; pointer-events: none;
}

/* the door itself: hinged at the top, swings in and up */
.flap__door {
  position: absolute; inset: 0;
  transform-origin: 50% 0%;
  background: linear-gradient(178deg, #1a1e21 0%, #0d1012 55%, #05070880 100%);
  border-radius: 0 0 3px 3px;
  box-shadow: inset 0 1px 0 #ffffff14, 0 1px 2px #0009;
  transition: transform .34s cubic-bezier(.3,.9,.4,1);
}
.machine__flap.is-open .flap__door { transform: rotateX(74deg) translateY(-4%); }

/* Light from inside, only while the door is open: a bright lip where the door was, and the
   fall-off of a bulb in a box. Screened over the art so it lights it rather than covering it. */
.flap__glow {
  position: absolute; left: -6%; right: -6%; top: -10%; bottom: -14%;
  background:
    radial-gradient(50% 44% at 50% 30%, #fff0cf 0%, var(--flare, #ffce7a) 26%, #ffae1a4d 52%, transparent 78%),
    radial-gradient(66% 40% at 50% 96%, #ffd98a2e, transparent 74%);
  opacity: 0; mix-blend-mode: screen; filter: blur(6px);
  transition: opacity .28s ease;
}
.machine__flap.is-open .flap__glow { opacity: .8; }
.machine__flap.is-hit .flap__glow { opacity: 1; transition: none; }
/* the lit edge of the opening */
.machine__flap.is-open::before {
  content: ""; position: absolute; left: 5%; right: 5%; top: 7%; height: 2px;
  background: #fff6dd; filter: blur(1.2px); opacity: .95;
}

/* what falls out of the coil: it accelerates, tumbles, hits the door and stops there */
/* The same tag that was on the shelf, lit the way the shelf lights the one it is about to
   give up, so the eye can follow one object the whole way down. */
.falling {
  position: absolute; z-index: 3; pointer-events: none;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(.62rem, 1.9cqw + .38rem, 1rem); letter-spacing: .05em;
  color: #14171a; background: linear-gradient(180deg, #fff6d8, #ffd166);
  border-radius: 2px; padding: .3em .55em;
  box-shadow: 0 0 18px -2px #ffc02eaa, 0 6px 14px -4px #000d, inset 0 -1px 0 #00000022;
  will-change: transform;
}
.falling.is-dropping { animation: drop-out var(--fall, 1.15s) linear forwards; }
/* It leaves the coil sideways and then gravity takes it: the sideways part is nearly done by
   the time it is a third of the way down, and the tumble is a whole turn so it lands upright
   rather than stopping at whatever angle the frame count happened to reach. */
@keyframes drop-out {
  0%   { transform: translate(0, 0) rotate(0deg); }
  8%   { transform: translate(calc(var(--fall-x, 0%) * .18), calc(var(--fall-y, 380%) * .012)) rotate(-26deg); }
  28%  { transform: translate(calc(var(--fall-x, 0%) * .58), calc(var(--fall-y, 380%) * .10)) rotate(-104deg); }
  52%  { transform: translate(calc(var(--fall-x, 0%) * .86), calc(var(--fall-y, 380%) * .32)) rotate(-196deg); }
  76%  { transform: translate(var(--fall-x, 0%), calc(var(--fall-y, 380%) * .66)) rotate(-286deg); }
  90%  { transform: translate(var(--fall-x, 0%), var(--fall-y, 380%)) rotate(-348deg) scale(1.02, .9); }
  /* one small bounce off the lip, then gone into the slot */
  96%  { transform: translate(var(--fall-x, 0%), calc(var(--fall-y, 380%) - 7%)) rotate(-358deg) scale(.99, 1.03); }
  100% { transform: translate(var(--fall-x, 0%), calc(var(--fall-y, 380%) + 4%)) rotate(-360deg); opacity: 0; }
}

/* ─────────────  the beats  ─────────────
   Money in, the wait, the roll, the coil, the landing. Each has its own motion so the rip
   reads as a sequence of things happening to a machine, not as one fade. */

/* the coin going in: the cabinet takes it */
.machine.is-coin { animation: coin-in .45s cubic-bezier(.3,.7,.3,1); }
@keyframes coin-in {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(.45%); }
  60%  { transform: translateY(-.15%); }
  100% { transform: translateY(0); }
}

/* the wait: the glass breathes, and the breath shortens as the block nears (--beat is set
   each second by the countdown, from a slow 1.6 s to a heartbeat) */
.machine.is-armed::before {
  content: ""; position: absolute; z-index: 3; pointer-events: none;
  left: 22%; top: 20%; width: 48%; height: 58%;
  border-radius: 2px;
  background: radial-gradient(60% 55% at 50% 50%, #b4ffd6cc 0%, #4be3a366 40%, transparent 72%);
  mix-blend-mode: screen; filter: blur(10px);
  animation: breathe var(--beat, 1.6s) ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
/* the machine's own light breathes with it */
.machine.is-armed .machine__film { animation: film-breathe var(--beat, 1.6s) ease-in-out infinite; }
@keyframes film-breathe { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35) saturate(1.15); } }

/* the last seconds on the display, bigger and hotter */
.machine__vfd .vfd__line.is-final {
  animation: last-seconds 1s ease-out infinite;
  color: #fff3d0; text-shadow: 0 0 10px #ffae1a, 0 0 20px #ffae1a88;
}
@keyframes last-seconds { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* the roll: a hard white frame and a jolt through the cabinet */
.machine.is-flash::after {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: #f4fff7; mix-blend-mode: screen;
  animation: hard-flash .16s ease-out forwards;
}
@keyframes hard-flash { 0% { opacity: .95; } 100% { opacity: 0; } }
.machine.is-jolt { animation: jolt .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes jolt {
  0%, 100% { transform: translate(0,0) rotate(0); }
  15%      { transform: translate(-.6%, .4%) rotate(-.25deg); }
  35%      { transform: translate(.5%, -.35%) rotate(.2deg); }
  55%      { transform: translate(-.3%, .25%) rotate(-.1deg); }
  75%      { transform: translate(.15%, -.1%); }
}

/* the coil: the chosen shelf turns, the others fall back into the dark */
.shelves.is-spot li:not(.is-next) span { opacity: .35; filter: saturate(.4); transition: opacity .25s, filter .25s; }
.shelves li.is-next span { animation: coil-turn .55s cubic-bezier(.4,0,.2,1) 2; }
@keyframes coil-turn {
  0%   { transform: rotateX(0deg); }
  50%  { transform: rotateX(180deg); filter: brightness(1.4); }
  100% { transform: rotateX(360deg); }
}

/* sparks out of the tray, thrown and left to fall */
.spark {
  position: absolute; z-index: 6; pointer-events: none;
  width: calc(.45vmin * var(--s, 1)); height: calc(.45vmin * var(--s, 1)); border-radius: 50%;
  background: #ffcf5a; box-shadow: 0 0 6px #ffae1a, 0 0 14px #ffae1a88;
  animation: spark var(--d, 1s) cubic-bezier(.15,.7,.4,1) forwards;
}
.spark--white { background: #fff8e6; box-shadow: 0 0 8px #fff, 0 0 18px #ffd27a; }
@keyframes spark {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  60%  { transform: translate(var(--dx), calc(var(--dy) + 6vmin)) scale(.9); opacity: 1; }
  100% { transform: translate(calc(var(--dx) * 1.15), calc(var(--dy) + 22vmin)) scale(.3); opacity: 0; }
}

/* row E: the shelves chase, the whole hero goes amber for a moment */
.shelves.is-chase li span { animation: chase .5s ease-in-out calc(var(--i) * .08s) 4; }
@keyframes chase {
  0%, 100% { color: #0b1a12; background: linear-gradient(180deg, #d9f7e6, #a9e6c6); box-shadow: 0 1px 3px #0009; }
  50%      { color: #14171a; background: linear-gradient(180deg, #fff0c2, #ffd166); box-shadow: 0 0 14px #ffd166cc, 0 1px 3px #0009; }
}
/* and the sign stutters like a tube taking a surge */
.machine.is-jackpot .machine__sign { animation: sign-surge 1.4s steps(1) 1; }
@keyframes sign-surge {
  0%, 9%, 14%, 30%, 34%, 100% { opacity: 1; }
  10%, 13%, 31%, 33%          { opacity: .35; }
}
.hero.is-row::after {
  content: ""; position: absolute; inset: -2rem; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 50%, #ffae1a2e, transparent 70%);
  animation: row-wash 2.6s ease-out forwards;
}
@keyframes row-wash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.hero { position: relative; }

/* the multiple on the card, and the row-E card is bigger about it */
.prize__mult {
  display: inline-block; margin-left: .5em; padding: .05em .45em; border-radius: 2px;
  font-family: var(--display); font-weight: 700; letter-spacing: .02em;
  background: #22302666; color: #16221a; font-size: 1.05em;
}
.prize[data-tier="4"] .prize__mult { background: #b8860033; }
.prize[data-tier="5"] .prize__mult { background: var(--hazard); color: #fff6dd; font-size: 1.25em; }
.prize[data-tier="5"] { animation: deliver-hard .7s cubic-bezier(.2,1.4,.3,1) both, throb 1.1s ease-in-out .7s 3; }
@keyframes deliver-hard {
  0%   { transform: translateY(40%) scale(1.5); opacity: 0; }
  45%  { opacity: 1; }
  70%  { transform: translateY(-6%) scale(.98); }
  100% { transform: none; opacity: 1; }
}

.beside__mute { margin-left: .8rem; font-size: .78rem; color: #8f989d; }

/* the whole machine takes the knock */
.machine.is-hit { animation: knock .26s cubic-bezier(.36,.07,.19,.97); }
@keyframes knock {
  0%, 100% { transform: translate(0,0); }
  25%      { transform: translate(-.35%, .5%); }
  55%      { transform: translate(.25%, -.25%); }
  80%      { transform: translate(-.12%, .2%); }
}

/* the top row floods the whole cabinet */
.machine.is-jackpot::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(58% 42% at 50% 78%, #ffe9b055 0%, #ffae1a22 40%, transparent 74%);
  animation: flood 1.5s ease-out forwards;
}
@keyframes flood { 0% { opacity: 0; } 14% { opacity: 1; } 100% { opacity: 0; } }

/* ─────────────  the prize  ───────────── */

/* It sits in the tray, under the door, so the door opening and the item landing stay
   visible above it. The machine's own light falls on it from the flap. */
.prize {
  position: absolute; left: 21%; right: 21%; bottom: 3.4%; z-index: 5;
  display: grid; gap: .1rem; justify-items: center;
  padding: .5em .9em .55em;
  border-radius: 3px 3px 2px 2px;
  text-align: center;
  background: linear-gradient(178deg, #f6f8f3, #dde3da 62%, #cfd6cc);
  color: var(--ink);
  box-shadow: 0 -2px 0 #ffffff40 inset, 0 18px 34px -14px #000e, 0 0 0 1px #0006;
  animation: deliver .62s cubic-bezier(.2,1.25,.4,1) both;
  container-type: inline-size;
}
@keyframes deliver {
  0%   { transform: translateY(46%) scale(.92); opacity: 0; }
  55%  { opacity: 1; }
  72%  { transform: translateY(-5%) scale(1.02); }
  100% { transform: none; opacity: 1; }
}

.prize__row {
  margin: 0; font-family: var(--display); font-weight: 400;
  font-size: clamp(.42rem, 2.9cqw, .64rem); letter-spacing: .2em;
  color: #5c6a60;
}
.prize__worth {
  margin: 0; font-family: var(--display); font-weight: 700;
  font-size: clamp(.95rem, 13cqw, 2.1rem); line-height: 1.02;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
  color: #16221a;
}
.prize__what {
  margin: 0; font-size: clamp(.46rem, 3.4cqw, .72rem); color: #46524a;
  font-variant-numeric: tabular-nums;
}
.prize__what b { font-family: var(--display); font-weight: 700; letter-spacing: .05em; color: #16221a; }

/* a light sweeps across the face, once, and harder the better the row */
.prize__flare {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none;
}
.prize__flare::before {
  content: ""; position: absolute; top: -60%; bottom: -60%; width: 45%; left: -60%;
  background: linear-gradient(100deg, transparent, #ffffffdd, transparent);
  transform: skewX(-18deg);
  animation: sweep 1s cubic-bezier(.4,0,.2,1) .28s both;
}
@keyframes sweep { to { left: 130%; } }

/* the rows, quietest to loudest */
.prize[data-tier="1"], .prize[data-tier="2"] { --flare: #cfe6d6; }
.prize[data-tier="1"] .prize__flare, .prize[data-tier="2"] .prize__flare { display: none; }

.prize[data-tier="3"] {
  --flare: #ffd98a;
  box-shadow: 0 -2px 0 #ffffff40 inset, 0 18px 34px -14px #000e, 0 0 0 1px #b8860055, 0 0 22px -6px #ffae1a77;
}
.prize[data-tier="4"] {
  --flare: #ffc85e;
  background: linear-gradient(178deg, #fffaf0, #f3e6cb 62%, #e6d5b2);
  box-shadow: 0 -2px 0 #ffffff55 inset, 0 18px 34px -14px #000e, 0 0 0 1px #b88600aa, 0 0 34px -6px #ffae1aaa;
}
.prize[data-tier="5"] {
  --flare: #ffe9b0;
  left: 17%; right: 17%;
  background: linear-gradient(178deg, #fffdf6, #ffeec2 55%, #f3d68a);
  color: #241a05;
  box-shadow: 0 -2px 0 #fff6 inset, 0 22px 40px -14px #000f, 0 0 0 1px #d9a300, 0 0 56px -8px #ffc02e;
  animation: deliver .62s cubic-bezier(.2,1.25,.4,1) both, throb 1.1s ease-in-out .62s 2;
}
.prize[data-tier="5"] .prize__row { color: #7a5a12; }
.prize[data-tier="5"] .prize__worth { color: #241a05; }
@keyframes throb {
  0%, 100% { box-shadow: 0 -2px 0 #fff6 inset, 0 22px 40px -14px #000f, 0 0 0 1px #d9a300, 0 0 56px -8px #ffc02e; }
  50%      { box-shadow: 0 -2px 0 #fff6 inset, 0 22px 40px -14px #000f, 0 0 0 1px #ffd24d, 0 0 86px -4px #ffd24d; }
}

.prize.is-leaving { animation: withdraw .4s cubic-bezier(.5,0,.9,.4) both; }
@keyframes withdraw { to { transform: translateY(60%); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .falling.is-dropping { animation-duration: .01ms; }
  .prize, .prize[data-tier="5"] { animation: none; }
  .prize__flare::before { animation: none; left: 130%; }
  .machine.is-hit, .machine.is-jackpot::after, .machine.is-coin, .machine.is-jolt, .machine.is-flash::after,
  .machine.is-armed::before, .machine.is-armed .machine__film, .vfd__line.is-final, .shelves li.is-next span, .shelves.is-chase li span, .hero.is-row::after,
  .machine.is-jackpot .machine__sign { animation: none; }
  .flap__door { transition: none; }
}

/* ─────────────  beside the machine  ───────────── */

.beside {
  display: flex; flex-direction: column; gap: 1.35rem;
  padding: clamp(1.4rem, 2.8vw, 2.2rem);
  border-radius: 3px;
  background: linear-gradient(180deg, #1c2124f2, #14171af5);
  box-shadow: inset 0 0 0 1px #333a3e, 0 26px 50px -24px #000d;
}
/* four bolts, because it is fixed to a wall */
.beside::before, .beside::after {
  content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7d868b, #3b4145 65%, #23282b);
}
.beside { position: relative; }
.beside::before { left: 10px; top: 10px; }
.beside::after { right: 10px; top: 10px; }
.beside__say {
  margin: 0; font-size: clamp(1.02rem, 1.5vw, 1.28rem); line-height: 1.45;
  color: var(--paint); max-width: 42ch;
}
/* the keypad: three codes on one panel, the lit one is the shelf you are playing */
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 .8rem; }
.key {
  display: grid; gap: .15rem; justify-items: center; padding: .55rem .4rem .5rem;
  border-radius: 4px; border: 1px solid #3f4548; background: #14171a; color: #9fb0a7;
  font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, color .15s;
}
.key b { font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: .06em; color: var(--paint); }
.key span { font-size: .78rem; font-variant-numeric: tabular-nums; }
.key[aria-checked="true"] {
  border-color: var(--vfd); color: var(--vfd);
  box-shadow: inset 0 0 0 1px var(--vfd), 0 0 18px #ffae1a33;
}
.key[aria-checked="true"] b { color: var(--vfd); }
.key:focus-visible { outline: 2px solid var(--vfd); outline-offset: 2px; }
.key:disabled { opacity: .5; cursor: default; }
.beside__price { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--seam); }
.beside__price > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .62rem .1rem; border-bottom: 1px solid var(--seam);
}
.beside__price dt { color: #9fb0a7; font-size: .95rem; }
.beside__price dd {
  margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.2rem;
  letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--paint);
}
.beside__alt, .beside__get { margin: 0; font-size: .9rem; line-height: 1.5; color: #a7b4ad; }
.beside__loaded { margin: 0 0 -.4rem; font-size: .8rem; color: #97a09f; }
.tickers { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.tickers li {
  font-family: var(--display); font-weight: 700; font-size: .82rem; letter-spacing: .04em;
  color: #cfe9dc; background: #1b2a23; border-radius: 2px; padding: .22rem .42rem;
  box-shadow: inset 0 0 0 1px #2c453a;
}
.beside__get a { color: var(--vfd); }
.beside__status {
  margin: 0; padding-top: .7rem; border-top: 1px solid var(--seam);
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-size: .92rem; color: #a7b4ad;
}
.beside__status b {
  font-family: var(--display); font-weight: 700; letter-spacing: .04em; color: var(--vfd);
  font-variant-numeric: tabular-nums;
}
.beside__lamp { margin: .2rem 0 0; }


.beside .press { align-self: flex-start; }


@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; }
  .machine { max-width: 420px; margin: 0 auto; }
}

/* ─────────────  the printed card of what pays  ───────────── */

.card-list__say { margin: 0 0 .8rem; font-size: .92rem; line-height: 1.5; color: #a7b4ad; }



.rows__head {
  display: grid; grid-template-columns: 2.1rem minmax(0,1fr) auto auto auto;
  gap: .75rem; padding: 0 .7rem .45rem;
  font-size: .74rem; letter-spacing: .1em; color: #8fa197;
}
.rows__head span:first-child { grid-column: 1 / 3; }
.rows__head span:last-child { text-align: right; }
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.row {
  display: grid;
  grid-template-columns: 2.1rem minmax(0,1fr) auto auto auto;
  align-items: center; gap: .75rem;
  padding: .72rem .8rem;
  background: linear-gradient(180deg, #232829, #1a1e20);
  border-left: 3px solid #3d4448;
  border-radius: 2px;
}
.row--top { border-left-color: var(--hazard); }
.row__code {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  color: #8b9a92; letter-spacing: .05em;
}
.row--top .row__code { color: var(--hazard); }
.row__name { font-weight: 500; color: var(--paint); font-size: 1rem; }
.row__odds { font-size: .84rem; color: #93a39b; font-variant-numeric: tabular-nums; }
.row__mult {
  font-family: var(--display); font-weight: 700; font-size: .95rem;
  color: #b6c4bc; letter-spacing: .02em; font-variant-numeric: tabular-nums;
  min-width: 3.2ch; text-align: right;
}
.row--top .row__mult { color: #d8b98a; }
.row__pay {
  font-variant-numeric: tabular-nums;
  font-family: var(--display); font-weight: 700;
  font-size: 1.3rem; color: var(--vfd);
  min-width: 5.5ch; text-align: right; letter-spacing: .01em;
  text-shadow: 0 0 16px #ffae1a66;
}
.row--top .row__pay { color: #ffd27a; text-shadow: 0 0 20px #ffae1a99; }

/* ─────────────  panel: coil, readout, button  ───────────── */

/* The shelf: a real dispensing coil with the stock sitting in its turns, which is where a
   coil lives in an actual machine and the only arrangement in which it explains itself. */
.shelf {
  position: relative;
  margin: -.2rem 0 1.25rem;
  padding: .55rem 0 .2rem;
}
.shelf__coil {
  --tile: 22.9px; /* the tile's own aspect at 35px tall, or the loop shows a join */
  height: 35px;
  background-image: url('/assets/coil.webp');
  background-repeat: repeat-x;
  background-position: 0 50%;
  background-size: var(--tile) 100%;
  opacity: .92;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent);
}
.shelf__coil.is-turning { animation: feed 1.05s linear infinite; }
@keyframes feed { to { background-position-x: calc(var(--tile) * -1); } }

/* the tickers hang in the turns, front one nearest the drop */
.shelf__stock {
  /* pull the tickers up into the turns, then give the space back so what follows clears it */
  list-style: none; margin: -29px 0 29px; padding: 0 2%;
  display: flex; gap: .5rem; overflow: hidden;
  position: relative; z-index: 1;
}
.shelf__stock li {
  flex: 0 0 auto;
  font-family: var(--display); font-weight: 700; font-size: clamp(.42rem, 1.2cqw + .22rem, .66rem); letter-spacing: .04em;
  color: #e9ede8; background: #23282acc; border-radius: 2px;
  padding: .3rem .45rem;
  box-shadow: 0 3px 6px -2px #000b, inset 0 0 0 1px #00000055;
}
.shelf__stock li:first-child {
  color: var(--vfd); box-shadow: 0 3px 10px -2px #000, inset 0 0 0 1px #ffae1a55;
}

.vfd {
  border-radius: 3px; padding: 3px;
  background: linear-gradient(180deg, #2b3033, #1b1f21);
  box-shadow: inset 0 0 0 1px #0d0f11;
}
.vfd__glass {
  position: relative; overflow: hidden;
  background: #0a0c0d; border-radius: 2px;
  padding: .7rem .75rem .75rem;
}
.vfd__glass::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, #ffffff0a 0 1px, transparent 1px 3px);
}
.vfd__line {
  margin: 0; font-family: var(--display); font-weight: 700;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem); letter-spacing: .09em;
  color: var(--vfd); text-shadow: 0 0 14px #ffae1a80;
  font-variant-numeric: tabular-nums;
}
.vfd__sub {
  margin: .22rem 0 0; font-size: .76rem; letter-spacing: .05em;
  color: var(--vfd-dim); font-variant-numeric: tabular-nums;
}

.press {
  appearance: none; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .85rem 1rem;
  border-radius: 4px;
  font-family: var(--display); font-weight: 700; letter-spacing: .1em;
  color: #fff;
  background: linear-gradient(180deg, #f2643c, var(--hazard) 46%, #b8330f);
  box-shadow: 0 4px 0 #8f2409, inset 0 1px 0 #ffb49e80;
  transition: transform .06s ease, box-shadow .06s ease;
}
.press:hover { background: linear-gradient(180deg, #f4715c, #e8471f 46%, #c2380f); }
.press:active { transform: translateY(3px); box-shadow: 0 1px 0 #8f2409, inset 0 1px 0 #ffb49e60; }
.press[disabled] { filter: saturate(.35) brightness(.8); cursor: not-allowed; }
.press__cap { font-size: 1.05rem; }
.press__note { font-family: var(--text); font-weight: 400; font-size: .7rem; letter-spacing: .04em; opacity: .8; }
.press--small { padding: .55rem .9rem; }
.press--small .press__cap { font-size: .85rem; }

.linkish {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--vfd); font-weight: 400; text-decoration: underline; text-underline-offset: 2px;
}

/* ─────────────  hopper gauge  ───────────── */

.hopper { margin-top: var(--gap); }
.hopper__label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-size: .78rem; letter-spacing: .12em; color: #8f989d;
}
.hopper__label strong {
  font-family: var(--display); font-size: 1.15rem; letter-spacing: .04em;
  color: var(--paint); font-variant-numeric: tabular-nums;
}
.hopper__gauge {
  margin-top: .4rem; height: 10px; border-radius: 2px; overflow: hidden;
  background: #3f4548; box-shadow: inset 0 1px 3px #0009;
}
.hopper__gauge i {
  display: block; height: 100%; width: var(--fill);
  background: repeating-linear-gradient(115deg, var(--vfd) 0 8px, #e59b14 8px 16px);
  transition: width .8s ease;
}
.hopper__note { margin: .5rem 0 0; font-size: .74rem; color: #8b9490; max-width: 62ch; }

/* ─────────────  how it works, below the fold  ───────────── */

.works {
  margin: clamp(3rem, 8vw, 5.5rem) 0 0;
  padding-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--seam);
}
.works__col {
  display: grid; gap: clamp(1.4rem, 3vw, 2.6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  align-items: start;
}
.works__group { display: flex; flex-direction: column; gap: .7rem; }
.works__group h3 {
  margin: 0; font-family: var(--display); font-weight: 700;
  font-size: .82rem; letter-spacing: .16em; color: #6fe8ad;
}
.works__group p { margin: 0; font-size: .84rem; color: #a7b4ad; line-height: 1.5; }
.works__group .hopper { margin: 0; }

/* ─────────────  feed  ───────────── */

.feed { margin: clamp(2.5rem, 6vw, 4rem) 0 0; }
.feed__table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.feed__table th {
  text-align: left; font-weight: 500; font-size: .7rem; letter-spacing: .14em;
  color: #7d878c; padding: 0 .7rem .5rem; border-bottom: 1px solid var(--seam);
}
.feed__table td {
  padding: .6rem .7rem; border-bottom: 1px solid #23282b;
  font-variant-numeric: tabular-nums;
}
.feed__table tr:hover td { background: #ffffff06; }
.feed__empty td { color: #666f74; }
.feed a { color: var(--vfd); text-decoration: none; border-bottom: 1px solid #ffae1a40; }
.feed .linkish { font-size: inherit; }
.feed__check td { font-size: .76rem; color: #8f989d; word-break: break-all; padding-top: 0; }
.feed__check code { color: #b3bdb8; }

/* ─────────────  explain  ───────────── */

.explain { margin: clamp(2.5rem, 6vw, 4rem) 0 0; }
.explain__cols { display: grid; gap: clamp(1rem, 3vw, 2.4rem); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.explain p { margin: 0 0 .9rem; max-width: 62ch; color: #c3cac6; }
.explain em { font-style: normal; color: var(--vfd); }
.explain__check {
  margin: 1.4rem 0 0; padding: .9rem 1rem; border-left: 3px solid var(--vfd);
  background: #ffffff07; font-size: .86rem; color: #c3cac6; max-width: none;
}
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; color: var(--paint); }

/* ─────────────  rules  ───────────── */

.rules { margin: clamp(2.5rem, 6vw, 4rem) 0 0; }
.plate {
  margin: 0; display: grid; gap: 0 clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
  border-top: 1px solid var(--seam);
}
.plate > div {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .7rem .2rem; border-bottom: 1px solid var(--seam);
}
.plate dt { color: #8f989d; font-size: .86rem; }
.plate dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; flex: 0 1 auto; min-width: 0; }
.plate dt { flex: 1 1 auto; }
/* questions, set like the plate: plain, scannable, no accordion to open */
.faq { margin: clamp(2.5rem, 6vw, 4rem) 0 0; }
.faq__list {
  margin: 0; display: grid; gap: 0 clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
  border-top: 1px solid var(--seam);
}
.faq__list > div { padding: .9rem .2rem 1rem; border-bottom: 1px solid var(--seam); }
.faq__list dt { font-weight: 700; color: var(--paint); margin-bottom: .35rem; }
.faq__list dd { margin: 0; font-size: .92rem; line-height: 1.55; color: #b3bdb8; max-width: 62ch; }
.faq__list code { font-size: .85em; color: var(--vfd); }
.rules__ca {
  margin: 1.2rem 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem; color: var(--vfd); word-break: break-all;
}
.rules__fine { margin: 1.3rem 0 0; font-size: .78rem; color: #79838a; max-width: 78ch; }

/* ─────────────  foot / sheet  ───────────── */

.foot {
  width: min(1080px, 100% - 2rem); margin: clamp(3rem, 7vw, 5rem) auto 3rem;
  padding-top: 1.2rem; border-top: 1px solid var(--seam);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .78rem; color: #79838a;
}
.foot p { margin: 0; }
.foot__mark { font-family: var(--display); font-weight: 700; letter-spacing: .1em; color: var(--paint); }
.foot a { color: #9aa4a9; }

.sheet {
  border: 0; border-radius: var(--radius); padding: 0;
  max-width: min(520px, calc(100% - 2rem));
  color: var(--paint);
  background: linear-gradient(180deg, #2a2f32, #1d2124);
  box-shadow: 0 30px 70px -20px #000;
}
.sheet::backdrop { background: #0b0d0ecc; }
.sheet form { padding: clamp(1.2rem, 3vw, 1.8rem); }
.sheet p { font-size: .86rem; color: #b6bec1; max-width: 52ch; }
.sheet__field { display: block; margin: 1rem 0 .6rem; }
.sheet__field span { display: block; font-size: .72rem; letter-spacing: .12em; color: #8f989d; margin-bottom: .35rem; }
.sheet__field input {
  width: 100%; padding: .6rem .7rem; border-radius: 3px;
  border: 1px solid #3f4548; background: #14171a; color: var(--paint);
  font: inherit; font-size: .9rem;
}
.sheet__out { display: block; min-height: 2.6rem; font-size: .84rem; color: var(--vfd); word-break: break-all; font-variant-numeric: tabular-nums; }
.sheet__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.sheet__top h3 { margin: 0; }
.sheet__price { margin: 0 !important; font-size: .82rem !important; color: #8f989d !important; font-variant-numeric: tabular-nums; }
.sheet__price b { color: var(--vfd); font-size: 1.05rem; }

/* the ways in, cheapest in trust first */
.ways { display: flex; gap: 2px; margin: 0 0 1rem; padding: 2px; border-radius: 3px; background: #14171a; }
.ways button {
  flex: 1; appearance: none; border: 0; cursor: pointer;
  padding: .5rem .4rem; border-radius: 2px;
  font: inherit; font-size: .78rem; letter-spacing: .02em;
  background: none; color: #97a0a4;
}
.ways button:hover { color: var(--paint); }
.ways button[aria-selected="true"] { background: #343a3e; color: var(--paint); box-shadow: inset 0 1px 0 #ffffff12; }
.ways__why { font-size: .78rem !important; color: #7f9c88 !important; }

.sheet__hint { display: block; margin-top: .4rem; font-size: .74rem; line-height: 1.4; color: #8f989d; }
.sheet__change { margin: .9rem 0 0 !important; font-size: .8rem !important; color: #8f989d !important; }
.sheet__change b { color: var(--vfd); font-variant-numeric: tabular-nums; }
.sheet__field--n { max-width: 7rem; }
.sheet__field--n input { font-variant-numeric: tabular-nums; }
.sheet__result { display: flex; align-items: flex-start; gap: .8rem; }
.sheet__result .sheet__out { flex: 1; }
.sheet__go { margin-top: .4rem; }
.sheet__slip {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-top: 1rem; padding-top: .9rem; border-top: 1px solid #ffffff10;
  font-size: .78rem; color: #8f989d;
}
.sheet__slip select {
  padding: .35rem .5rem; border-radius: 3px;
  border: 1px solid #3f4548; background: #14171a; color: var(--paint);
  font: inherit; font-size: .8rem;
}
.sheet__say { display: block; min-height: 1.4rem; margin-top: .8rem; font-size: .82rem; color: var(--vfd); }
.sheet__say[data-kind="bad"] { color: #ff8a6b; }

.sheet menu { margin: .6rem 0 0; padding: 0; display: flex; justify-content: flex-end; }

/* ─────────────  narrow  ───────────── */

@media (max-width: 720px) {
  .cabinet__body { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1.6rem minmax(0,1fr) auto auto; }
  .row__odds { display: none; }
  .rows__head { grid-template-columns: 1.6rem minmax(0,1fr) auto auto; }
  .rows__head span:nth-child(2) { display: none; }
  .press { width: 100%; }
  .feed__table th:nth-child(4), .feed__table td:nth-child(4) { display: none; }
}
@media (max-width: 480px) {
  /* long values stop fighting the label and take their own line */
  .plate > div { flex-direction: column; align-items: flex-start; gap: .15rem; }
  .plate dd { text-align: left; }
}
@media (max-width: 420px) {
  .rail__plate { display: none; }
}

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