/* ───────────────────────────────────────────────────────────────
   Coil. The page is a machine seen head on: powder-coated steel
   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 {
  max-width: 44ch;
  margin: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(2rem, 5vw, 3.5rem);
}
.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);
}
.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; }

/* 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 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 { 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;
}
.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; }

/* ─────────────  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; }
.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__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; }
}