/* ============================================================
   PATIENCEBALL — patienceball.patienceonhood.xyz
   Loaded after styles.css: tokens, nav, footer and chrome come from there,
   everything the draw needs lives here.

   Motion rules: CSS animations and transitions are compositor-driven and
   free to run anywhere. Every JS loop behind these classes is setInterval
   with wall-clock deltas — never requestAnimationFrame — because rAF stalls
   in background and uncomposited tabs and has bitten this site before.
   ============================================================ */

.ball-app {
  --ball-face: #f2f0e6;
  --ball-shade: #b9b7a8;
  --pop: 0 0 0 1px rgba(214, 255, 0, 0.35), 0 0 34px rgba(214, 255, 0, 0.16);
  --px: 0;   /* mouse parallax, -1..1, set by JS */
  --py: 0;
  isolation: isolate;      /* so the embers canvas at z-index -1 stays above the body background */
}

.sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ============================================================
   ambient layers
   ============================================================ */
.embers {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.confetti {
  position: fixed;
  inset: 0;
  z-index: 85;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.dmode {
  position: fixed;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 0 0 180px rgba(214, 255, 0, 0.32);
  transition: opacity 1.2s var(--ease);
}
body.is-drawmode .dmode { opacity: 1; animation: dmodePulse 1.1s ease-in-out infinite alternate; }
@keyframes dmodePulse {
  from { box-shadow: inset 0 0 140px rgba(214, 255, 0, 0.18); }
  to   { box-shadow: inset 0 0 220px rgba(214, 255, 0, 0.38); }
}

.flash.is-pop { animation: flashPop 0.42s ease-out; }
@keyframes flashPop { 0% { opacity: 0.6; } 100% { opacity: 0; } }

main.is-shake { animation: shake 0.46s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@keyframes shake {
  10%, 90% { transform: translate3d(-2px, 1px, 0); }
  20%, 80% { transform: translate3d(4px, -2px, 0); }
  30%, 50%, 70% { transform: translate3d(-7px, 3px, 0); }
  40%, 60% { transform: translate3d(7px, -3px, 0); }
}

/* custom cursor: the ring lags by transition instead of a lerp loop */
.ball-app .cur-ring { transition: transform 0.16s ease-out, width 0.35s var(--ease), height 0.35s var(--ease), margin 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease); }
.ball-app .cur { transition: opacity 0.3s var(--ease); }
body.has-cursor .cur, body.has-cursor .cur-ring { opacity: 1; }

/* ============================================================
   scroll reveals
   ============================================================ */
.rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.95s var(--ease), transform 0.95s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.rv.is-in { opacity: 1; transform: none; }
.sec__t.rv {
  transform: none;
  clip-path: inset(0 100% -10% 0);
  transition: opacity 0.6s var(--ease), clip-path 1.1s var(--ease);
}
.sec__t.rv.is-in { clip-path: inset(0 -2% -10% 0); }
.sec__n.rv { transform: translateX(-16px); }
.sec__n::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 1px;
  margin-left: 12px;
  vertical-align: middle;
  background: var(--acid);
  transition: width 1s var(--ease) 0.35s;
}
.sec__n.is-in::after { width: 46px; }

/* ---------- shared section scaffolding ---------- */
.sec { position: relative; padding-block: clamp(72px, 10vw, 132px); border-top: 1px solid var(--rule); }
.sec__head { margin-bottom: clamp(30px, 4vw, 52px); }
.sec__n {
  font: 700 11px/1 var(--mono);
  letter-spacing: 0.3em;
  color: var(--acid);
  margin-bottom: 14px;
}
.sec__t {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 108%;
  font-size: clamp(30px, 5.4vw, 62px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.sec__d {
  margin-top: 14px;
  max-width: 58ch;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--bone-dim);
}

/* ============================================================
   buttons — an acid sweep on hover
   ============================================================ */
.ball-app .btn { position: relative; overflow: hidden; isolation: isolate; }
.ball-app .btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--acid);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ease);
}
.ball-app .btn:hover::before { transform: scaleX(1); }
.ball-app .btn:hover { color: var(--ink); border-color: var(--acid); }
.ball-app .btn--fill::before { background: var(--bone); }
.ball-app .btn--fill:hover { background: var(--acid); color: var(--ink); }

/* ============================================================
   01 — the hero and the machine
   ============================================================ */
.bhero {
  position: relative;
  padding-block: calc(var(--nav-h) + clamp(34px, 6vw, 70px)) clamp(60px, 8vw, 110px);
  overflow: hidden;
  text-align: center;
}
.bhero__rays {
  position: absolute;
  left: 50%;
  top: -12%;
  width: 150vw;
  height: 120%;
  transform-origin: 50% 0;
  transform: translateX(-50%) rotate(0deg);
  pointer-events: none;
  opacity: 0.9;
  background: conic-gradient(from 160deg at 50% 0%,
    transparent 0deg, rgba(214, 255, 0, 0.055) 6deg, transparent 12deg,
    transparent 16deg, rgba(214, 255, 0, 0.035) 21deg, transparent 27deg,
    transparent 30deg, rgba(214, 255, 0, 0.05) 35deg, transparent 40deg);
  -webkit-mask-image: linear-gradient(#000 20%, transparent 75%);
          mask-image: linear-gradient(#000 20%, transparent 75%);
  animation: rays 16s ease-in-out infinite alternate;
}
@keyframes rays {
  from { transform: translateX(-50%) rotate(-5deg); }
  to   { transform: translateX(-50%) rotate(5deg); }
}
.bhero__glow {
  position: absolute;
  left: 50%;
  top: 8%;
  width: min(1100px, 130vw);
  aspect-ratio: 1;
  transform: translate(calc(-50% + var(--px) * 34px), calc(var(--py) * 24px));
  transition: transform 0.9s var(--ease);
  pointer-events: none;
  background: radial-gradient(circle, rgba(214, 255, 0, 0.15) 0%, rgba(214, 255, 0, 0.05) 38%, transparent 68%);
  animation: glowBreathe 6s ease-in-out infinite alternate;
}
@keyframes glowBreathe { from { opacity: 0.75; } to { opacity: 1; } }
.bhero__wrap { position: relative; z-index: 1; }
.bhero__brow { text-align: center; margin-bottom: clamp(16px, 2vw, 26px); animation: fadeDown 1s var(--ease) 0.2s both; }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

.bhero__title {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 112%;
  font-size: clamp(44px, 12.5vw, 172px);
  line-height: 0.84;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  transform: translate(calc(var(--px) * -12px), calc(var(--py) * -8px));
  transition: transform 0.9s var(--ease);
}
.bhero__word {
  display: inline-block;
  overflow: hidden;
  padding: 0.12em 0.08em 0.06em;
  margin: -0.12em -0.08em -0.06em;
  vertical-align: top;
}
.bhero__word--acid {
  color: var(--acid);
  text-shadow: 0 0 46px rgba(214, 255, 0, 0.35);
}
.ltr {
  display: inline-block;
  animation: ltrIn 1s var(--ease) both;
  animation-delay: calc(0.25s + var(--i) * 0.055s);
}
@keyframes ltrIn {
  0%   { transform: translateY(112%) rotate(7deg) scale(0.86); opacity: 0; }
  60%  { transform: translateY(-4%) rotate(-1deg) scale(1.02); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.bhero__word--acid .ltr { animation-delay: calc(0.62s + var(--i) * 0.07s); }

.bhero__lede {
  margin: clamp(18px, 2.4vw, 28px) auto 0;
  max-width: 62ch;
  font-family: var(--mono);
  font-size: clamp(12px, 1.25vw, 14px);
  line-height: 1.95;
  color: var(--bone-dim);
  animation: fadeDown 1s var(--ease) 1.1s both;
}
.bhero__lede b { color: var(--bone); font-weight: 700; }
.bhero__lede span { display: block; margin-top: 10px; color: var(--acid-dim); }

/* ---------- the drum ---------- */
.machine {
  position: relative;
  width: min(560px, 82vw);
  aspect-ratio: 1;
  margin: clamp(28px, 4.5vw, 54px) auto clamp(30px, 4vw, 46px);
  border-radius: 50%;
  isolation: isolate;
  transform: perspective(1400px) rotateY(calc(var(--px) * 7deg)) rotateX(calc(var(--py) * -7deg));
  transition: transform 0.9s var(--ease);
  animation: machineIn 1.4s var(--ease) 0.9s both;
}
@keyframes machineIn {
  from { opacity: 0; transform: perspective(1400px) translateY(40px) scale(0.92); }
  to   { opacity: 1; transform: perspective(1400px) translateY(0) scale(1); }
}
.machine__halo {
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(214, 255, 0, 0.13) 0%, rgba(214, 255, 0, 0.04) 45%, transparent 66%);
  animation: haloPulse 3.2s ease-in-out infinite alternate;
}
@keyframes haloPulse { from { opacity: 0.55; transform: scale(0.96); } to { opacity: 1; transform: scale(1.04); } }
body.is-drawmode .machine__halo { animation-duration: 0.9s; }
.machine__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(214, 255, 0, 0.30);
  background:
    radial-gradient(circle at 50% 108%, rgba(214, 255, 0, 0.10), transparent 55%),
    radial-gradient(circle at 50% 42%, #0c0e07 0%, #070804 70%);
  box-shadow:
    inset 0 0 90px rgba(0, 0, 0, 0.9),
    inset 0 2px 0 rgba(233, 231, 220, 0.07),
    0 0 70px rgba(214, 255, 0, 0.10);
  transition: box-shadow 0.8s var(--ease), border-color 0.8s var(--ease);
}
body.is-drawmode .machine__ring {
  border-color: rgba(214, 255, 0, 0.7);
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.9), inset 0 2px 0 rgba(233, 231, 220, 0.07), 0 0 120px rgba(214, 255, 0, 0.32);
}
.machine__ring::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px solid var(--rule);
}
.machine__ring::after {
  /* the ticking scale around the rim */
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(233, 231, 220, 0.22) 0deg 0.6deg, transparent 0.6deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 5px), #000 calc(50% - 4px) 50%, transparent 50%);
          mask: radial-gradient(circle, transparent 0 calc(50% - 5px), #000 calc(50% - 4px) 50%, transparent 50%);
  animation: cageSpin 90s linear infinite;
}
.machine__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.machine__cage {
  /* a wire cage turning slowly in front of the glass */
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(233, 231, 220, 0.09) 0deg 0.5deg, transparent 0.5deg 22.5deg);
  -webkit-mask: radial-gradient(circle, transparent 0 34%, #000 35% 100%);
          mask: radial-gradient(circle, transparent 0 34%, #000 35% 100%);
  animation: cageSpin 48s linear infinite;
}
@keyframes cageSpin { to { transform: rotate(360deg); } }
body.is-drawmode .machine__cage { animation-duration: 9s; }
.machine__glass {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    linear-gradient(200deg, rgba(233, 231, 220, 0.16) 0%, rgba(233, 231, 220, 0.03) 22%, transparent 42%),
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.10), transparent 34%);
}
.machine__glass::after {
  /* a slow highlight sweep across the dome */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.09) 47%, rgba(255, 255, 255, 0.14) 50%, rgba(255, 255, 255, 0.09) 53%, transparent 62%);
  background-size: 300% 100%;
  animation: sheen 7s ease-in-out infinite;
}
@keyframes sheen { 0%, 25% { background-position: 120% 0; } 75%, 100% { background-position: -20% 0; } }
.machine__port {
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 58px;
  height: 16px;
  transform: translateX(-50%);
  background: #050603;
  border: 1px solid rgba(214, 255, 0, 0.32);
  border-top: none;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 0 0 0 rgba(214, 255, 0, 0);
}
.machine__port::before {
  content: "";
  position: absolute;
  left: 8px; right: 8px; top: 5px;
  height: 2px;
  background: rgba(214, 255, 0, 0.45);
}
.machine__port.is-flare { animation: flare 0.7s ease-out; }
@keyframes flare {
  0%   { box-shadow: 0 0 38px 8px rgba(214, 255, 0, 0.75); border-color: var(--acid); }
  100% { box-shadow: 0 0 0 0 rgba(214, 255, 0, 0); }
}
.machine__plate {
  position: absolute;
  left: 50%;
  bottom: -44px;
  transform: translateX(-50%);
  padding: 7px 18px;
  background: var(--ink);
  border: 1px solid rgba(214, 255, 0, 0.32);
}
.machine__plateTxt {
  font: 700 9.5px/1 var(--mono);
  letter-spacing: 0.34em;
  color: var(--acid);
}
body.is-drawmode .machine__plateTxt { animation: blink 0.6s steps(2, jump-none) infinite; }
@keyframes blink { to { opacity: 0.25; } }

/* ---------- live readout ---------- */
.readout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: clamp(38px, 5vw, 62px);
  background: var(--rule);
  border: 1px solid var(--rule);
  text-align: left;
}
.readout__cell {
  position: relative;
  overflow: hidden;
  background: var(--ink-2);
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.readout__cell::after {
  /* a single scan sweep when the numbers land */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(214, 255, 0, 0.14), transparent);
  transform: translateX(-120%);
  pointer-events: none;
}
.readout.is-in .readout__cell::after { animation: sweep 1.3s var(--ease) 0.3s both; }
@keyframes sweep { to { transform: translateX(120%); } }
.readout__cell--acid { background: #0d1005; }
.readout__k {
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bone-faint);
  transition: color 0.5s var(--ease);
}
body.is-drawmode .readout__cell--clock .readout__k { color: var(--acid); animation: blink 0.7s steps(2, jump-none) infinite; }
.readout__v {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 105%;
  font-size: clamp(24px, 2.7vw, 38px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.readout__v--clock { font-family: var(--mono); font-weight: 700; font-size: clamp(19px, 2.1vw, 28px); letter-spacing: -0.01em; }
.readout__cell--acid .readout__v { color: var(--acid); }
.readout__s {
  font: 400 10.5px/1.5 var(--mono);
  letter-spacing: 0.04em;
  color: var(--bone-faint);
}
.readout__v.is-tick { animation: rTick 0.5s var(--ease); }
@keyframes rTick { 0% { color: var(--acid); } 100% { color: inherit; } }

.bhero__acts {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(26px, 3.4vw, 40px);
}

/* ============================================================
   the split-flap display
   ============================================================ */
.flaps {
  display: inline-flex;
  align-items: center;
  gap: 0.12em;
  font-family: var(--mono);
  font-weight: 700;
  line-height: 1;
}
.flaps__sep {
  width: 0.4em;
  text-align: center;
  color: var(--acid);
  animation: blink 1s steps(2, jump-none) infinite;
}
.flap {
  position: relative;
  display: inline-block;
  width: 0.82em;
  height: 1.26em;
  perspective: 260px;
}
.flap__half {
  position: absolute;
  left: 0; right: 0;
  height: 50%;
  overflow: hidden;
  background: #0f1108;
  border: 1px solid rgba(233, 231, 220, 0.16);
  backface-visibility: hidden;
}
.flap__top { top: 0; border-radius: 3px 3px 0 0; border-bottom: none; }
.flap__bot { bottom: 0; border-radius: 0 0 3px 3px; border-top: none; }
.flap__top::after, .flap__bot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.flap__top::after { background: linear-gradient(rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.08)); }
.flap__bot::after { background: linear-gradient(rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.02)); }
.flap__d {
  position: absolute;
  left: 0; right: 0;
  height: 1.26em;
  line-height: 1.26em;
  text-align: center;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.flap__top .flap__d { top: 0; }
.flap__bot .flap__d { bottom: 0; }
.flap::after {
  /* the hinge line */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(6, 7, 4, 0.95);
  z-index: 4;
}
.flap__fa, .flap__fb { display: none; z-index: 3; }
.flap.is-flip .flap__fa {
  display: block;
  transform-origin: 50% 100%;
  animation: flapDown 0.22s ease-in forwards;
}
.flap.is-flip .flap__fb {
  display: block;
  transform-origin: 50% 0%;
  transform: rotateX(90deg);
  animation: flapUp 0.24s ease-out 0.2s forwards;
}
@keyframes flapDown { from { transform: rotateX(0deg); } to { transform: rotateX(-90deg); } }
@keyframes flapUp { from { transform: rotateX(90deg); } to { transform: rotateX(0deg); } }
body.is-drawmode .flap__d { color: var(--acid); }
.flaps--big { font-size: clamp(30px, 6.4vw, 72px); gap: 0.1em; }

/* ============================================================
   the ticker
   ============================================================ */
.ticker {
  overflow: hidden;
  border-block: 1px solid var(--rule);
  background: var(--ink-2);
  padding-block: 11px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker__track {
  display: flex;
  align-items: center;
  gap: 44px;
  width: max-content;
  animation: tick 46s linear infinite;
}
body.is-drawmode .ticker__track { animation-duration: 11s; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }
.ticker__i {
  font: 700 10.5px/1 var(--mono);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bone-dim);
  white-space: nowrap;
}
.ticker__i b { color: var(--acid); font-weight: 700; }
.ticker__i i { color: var(--acid); font-style: normal; margin-left: 44px; }

/* ============================================================
   02 — the draw board
   ============================================================ */
.draw__wait {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(214, 255, 0, 0.26);
  background: radial-gradient(circle at 50% 0%, rgba(214, 255, 0, 0.07), transparent 62%), var(--ink-2);
  padding: clamp(34px, 6vw, 72px) clamp(22px, 4vw, 48px);
  text-align: center;
}
.draw__waitRing {
  position: absolute;
  left: 50%; top: 50%;
  width: 520px; height: 520px;
  border-radius: 50%;
  border: 1px solid rgba(214, 255, 0, 0.14);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: waitRing 4s ease-out infinite;
}
.draw__waitRing::before, .draw__waitRing::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(214, 255, 0, 0.14);
  animation: waitRing 4s ease-out infinite;
}
.draw__waitRing::before { animation-delay: 1.3s; }
.draw__waitRing::after { animation-delay: 2.6s; }
@keyframes waitRing { from { transform: translate(-50%, -50%) scale(0.2); opacity: 0.9; } to { transform: translate(-50%, -50%) scale(1.3); opacity: 0; } }
.draw__waitRing::before, .draw__waitRing::after { transform: none; animation-name: waitRingInner; }
@keyframes waitRingInner { from { transform: scale(0.2); opacity: 0.9; } to { transform: scale(1.3); opacity: 0; } }
.draw__waitK { position: relative; font: 500 10px/1 var(--mono); letter-spacing: 0.3em; text-transform: uppercase; color: var(--bone-faint); }
.draw__waitN {
  position: relative;
  margin-top: 16px;
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 110%;
  font-size: clamp(36px, 7vw, 82px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--acid);
  text-shadow: 0 0 40px rgba(214, 255, 0, 0.3);
}
.draw__waitC { position: relative; margin-top: 18px; display: flex; justify-content: center; }
.draw__waitP {
  position: relative;
  margin: 16px 0 0;
  font: 500 10.5px/1.8 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.draw__waitP b { color: var(--acid); font-weight: 700; font-size: 13px; }
.draw__waitD {
  position: relative;
  margin: 22px auto 0;
  max-width: 48ch;
  font: 400 12.5px/1.85 var(--mono);
  color: var(--bone-dim);
}
.draw__paid {
  display: inline-block;
  margin-left: 12px;
  padding: 4px 9px;
  border: 1px solid var(--rule);
  font: 500 9.5px/1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-faint);
  vertical-align: middle;
}
.draw__paid.is-paid { border-color: var(--acid); color: var(--acid); }
.tbl__prize--paid { color: var(--acid); }
body.is-drawmode .draw__waitK { color: var(--acid); animation: blink 0.7s steps(2, jump-none) infinite; }

.draw__card {
  position: relative;
  border: 1px solid var(--rule);
  background: var(--ink-2);
  padding: clamp(24px, 3.4vw, 42px);
  overflow: hidden;
}
.draw__card::before {
  /* a hairline scan drifting down the board */
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214, 255, 0, 0.35), transparent);
  animation: boardScan 9s linear infinite;
  pointer-events: none;
}
@keyframes boardScan { from { top: -2px; } to { top: 100%; } }
.draw__top {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--rule);
}
.draw__id {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 108%;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.draw__id.is-swap { animation: idSwap 0.5s var(--ease); }
@keyframes idSwap { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
.draw__when { margin-top: 7px; font: 400 11px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-faint); }
.draw__nav {
  width: 40px; height: 40px;
  border: 1px solid var(--rule);
  color: var(--bone-dim);
  font-family: var(--mono);
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease), transform 0.3s var(--ease);
  cursor: pointer;
}
.draw__nav:hover:not(:disabled) { border-color: var(--acid); color: var(--acid); transform: translateY(-2px); }
.draw__nav:disabled { opacity: 0.25; cursor: default; }

.draw__label {
  margin: clamp(26px, 3.4vw, 40px) 0 16px;
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bone-faint);
  text-align: center;
}

/* ---------- the balls ---------- */
.balls {
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(8px, 1.5vw, 16px);
  min-height: 96px;
  padding-top: 14px;
}
.ball {
  --d: clamp(54px, 8.4vw, 92px);
  position: relative;
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 34% 28%, #ffffff 0%, var(--ball-face) 26%, var(--ball-shade) 78%, #8e8c80 100%);
  box-shadow:
    inset -5px -7px 14px rgba(0, 0, 0, 0.32),
    inset 3px 4px 10px rgba(255, 255, 255, 0.55),
    0 12px 26px rgba(0, 0, 0, 0.55);
  color: #0a0b06;
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 106%;
  font-size: calc(var(--d) * 0.46);
  line-height: 1;
  letter-spacing: -0.03em;
}
.ball::after {
  /* the printed ring a real lottery ball has around its number */
  content: "";
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  border: 1px solid rgba(10, 11, 6, 0.13);
}
.ball--acid {
  background:
    radial-gradient(circle at 34% 28%, #f6ffc4 0%, var(--acid) 28%, #a8cc00 80%, #7d9800 100%);
  box-shadow:
    inset -5px -7px 14px rgba(0, 0, 0, 0.28),
    inset 3px 4px 10px rgba(255, 255, 255, 0.5),
    0 12px 30px rgba(0, 0, 0, 0.55),
    0 0 44px rgba(214, 255, 0, 0.42);
}
.ball--acid::after { border-color: rgba(10, 11, 6, 0.2); }
.ball--hash { font-size: calc(var(--d) * 0.3); color: rgba(10, 11, 6, 0.6); }

.ball--roll { animation: ballRoll 0.6s cubic-bezier(0.2, 0.9, 0.25, 1.05) both; }
@keyframes ballRoll {
  0%   { transform: translateX(160px) rotate(300deg); opacity: 0; }
  70%  { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.ball--drop { animation: ballDrop 0.5s cubic-bezier(0.5, 0, 0.9, 0.5) both; }
@keyframes ballDrop {
  0%   { transform: translateY(-180px) scale(0.7); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.ball.is-spin { filter: blur(0.5px); }
.ball.is-lock { animation: ballLock 0.42s var(--ease); }
@keyframes ballLock {
  0%   { transform: scale(1.22) translateY(-6px); }
  55%  { transform: scale(0.94) translateY(2px); }
  100% { transform: none; }
}
.ball--acid.is-lock { animation: ballSlam 0.55s var(--ease); }
@keyframes ballSlam {
  0%   { transform: scale(1.3); filter: brightness(1.8); }
  50%  { transform: scale(0.92); filter: brightness(1.1); }
  100% { transform: none; filter: none; }
}
.ball.is-won { animation: ballGlow 2.4s ease-in-out infinite alternate; }
@keyframes ballGlow { from { box-shadow: inset -5px -7px 14px rgba(0,0,0,0.28), inset 3px 4px 10px rgba(255,255,255,0.5), 0 12px 30px rgba(0,0,0,0.55), 0 0 30px rgba(214,255,0,0.3); } to { box-shadow: inset -5px -7px 14px rgba(0,0,0,0.28), inset 3px 4px 10px rgba(255,255,255,0.5), 0 12px 30px rgba(0,0,0,0.55), 0 0 70px rgba(214,255,0,0.6); } }

.spark {
  position: absolute;
  left: 50%; top: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 8px rgba(214, 255, 0, 0.8);
  pointer-events: none;
  animation: sparkFly 0.62s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.spark--bone { background: var(--bone); box-shadow: 0 0 6px rgba(233, 231, 220, 0.7); }
@keyframes sparkFly {
  from { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  to   { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.1); opacity: 0; }
}
.shock {
  position: absolute;
  left: 50%; top: 50%;
  width: 100%; height: 100%;
  border: 2px solid var(--acid);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  pointer-events: none;
  animation: shock 0.8s var(--ease) forwards;
}
.shock--2 { animation-delay: 0.12s; border-width: 1px; }
@keyframes shock { to { transform: translate(-50%, -50%) scale(4.2); opacity: 0; } }

.draw__rail {
  margin: 22px auto 0;
  width: min(520px, 100%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--acid), transparent);
  transform: scaleX(0);
  transition: transform 1s var(--ease);
}
.draw__rail.is-in { transform: scaleX(1); }
.draw__ticketLine {
  margin-top: 12px;
  text-align: center;
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bone-faint);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.draw__ticketLine.is-in { opacity: 1; }
.draw__ticketLine b { color: var(--acid); font-weight: 700; }

/* ---------- the numbers under the balls ---------- */
.draw__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: clamp(28px, 3.6vw, 44px);
  background: var(--rule);
  border: 1px solid var(--rule);
}
.draw__cell { background: var(--ink); padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 9px; min-width: 0; opacity: 0; transform: translateY(10px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.draw__grid.is-in .draw__cell { opacity: 1; transform: none; }
.draw__grid.is-in .draw__cell:nth-child(2) { transition-delay: 0.08s; }
.draw__grid.is-in .draw__cell:nth-child(3) { transition-delay: 0.16s; }
.draw__grid.is-in .draw__cell:nth-child(4) { transition-delay: 0.24s; }
.draw__grid.is-in .draw__cell:nth-child(5) { transition-delay: 0.34s; }
.draw__cell--wide { grid-column: 1 / -1; background: #0d1005; }
.draw__k { font: 500 10px/1 var(--mono); letter-spacing: 0.24em; text-transform: uppercase; color: var(--bone-faint); }
.draw__v {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(14px, 1.5vw, 18px);
  line-height: 1.3;
  color: var(--bone);
  overflow-wrap: anywhere;
}
.draw__v--acid { color: var(--acid); font-size: clamp(16px, 1.9vw, 24px); }
.draw__addr {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(13px, 1.4vw, 17px);
  color: var(--acid);
  border-bottom: 1px solid rgba(214, 255, 0, 0.3);
  align-self: flex-start;
  overflow-wrap: anywhere;
  transition: border-color 0.4s var(--ease);
}
.draw__addr:hover { border-color: var(--acid); }

/* ---------- proof ---------- */
.proof { margin-top: 26px; border: 1px solid var(--rule); background: var(--ink); }
.proof__sum {
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-dim);
  transition: color 0.4s var(--ease);
}
.proof__sum::-webkit-details-marker { display: none; }
.proof__sum::before { content: "+ "; color: var(--acid); }
.proof[open] .proof__sum::before { content: "\2212 "; }
.proof__sum:hover { color: var(--acid); }
.proof__body { padding: 4px 20px 22px; border-top: 1px solid var(--rule); animation: fadeDown 0.5s var(--ease); }
.proof__p { margin: 16px 0 0; max-width: 72ch; font: 400 12px/1.85 var(--mono); color: var(--bone-dim); }
.proof__p--dim { color: var(--bone-faint); }
.proof__dl { margin: 18px 0 0; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.proof__dl > div { background: var(--ink-2); padding: 13px 16px; display: grid; grid-template-columns: 190px 1fr; gap: 14px; align-items: baseline; }
.proof__dl dt { font: 500 10px/1.4 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone-faint); }
.proof__dl dd { margin: 0; font: 400 12px/1.6 var(--mono); color: var(--bone); overflow-wrap: anywhere; }
.proof__hash { color: var(--acid); }
.proof__link {
  display: inline-block;
  margin-top: 18px;
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acid);
  border-bottom: 1px solid rgba(214, 255, 0, 0.3);
}

/* ============================================================
   03 — your entries
   ============================================================ */
.hunt { display: flex; gap: 12px; flex-wrap: wrap; }
.hunt__in {
  flex: 1 1 340px;
  min-width: 0;
  padding: 17px 20px;
  background: var(--ink-2);
  border: 1px solid var(--rule);
  color: var(--bone);
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.02em;
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.hunt__in::placeholder { color: var(--bone-faint); }
.hunt__in:focus { outline: none; border-color: var(--acid); box-shadow: 0 0 0 1px rgba(214, 255, 0, 0.3), 0 0 30px rgba(214, 255, 0, 0.12); }
.hunt__go { cursor: pointer; }
.hunt__msg {
  margin-top: 14px;
  min-height: 18px;
  font: 400 11.5px/1.6 var(--mono);
  letter-spacing: 0.04em;
  color: var(--bone-faint);
}
.hunt__msg.is-bad { color: #ff7a5e; }

/* ---------- the printer ---------- */
.printer {
  position: relative;
  margin-top: 26px;
  height: 22px;
  background: linear-gradient(#141608, #0a0c06);
  border: 1px solid var(--rule);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.printer__slit {
  position: absolute;
  left: 18px; right: 18px;
  bottom: -1px;
  height: 3px;
  background: #020301;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(214, 255, 0, 0.18), 0 1px 12px rgba(214, 255, 0, 0.25);
}
.printer__txt {
  font: 700 8.5px/1 var(--mono);
  letter-spacing: 0.32em;
  color: var(--acid-dim);
}
.printer.is-busy .printer__txt { animation: blink 0.35s steps(2, jump-none) infinite; color: var(--acid); }
.printer.is-busy .printer__slit { animation: slitGlow 0.35s ease-in-out infinite alternate; }
@keyframes slitGlow { to { box-shadow: 0 0 0 1px rgba(214, 255, 0, 0.6), 0 2px 22px rgba(214, 255, 0, 0.6); } }

/* ---------- the ticket stub ---------- */
.stub {
  --hx: 50%;
  --hy: 50%;
  position: relative;
  margin-top: 0;
  display: grid;
  grid-template-columns: 1fr 26px 132px;
  background: var(--ink-2);
  border: 1px solid rgba(214, 255, 0, 0.26);
  box-shadow: var(--pop);
  transform-origin: 50% 0;
  overflow: hidden;
}
.stub.is-printing { animation: stubPrint 1.5s steps(30, end) both; }
@keyframes stubPrint {
  from { clip-path: inset(0 0 100% 0); transform: translateY(-14px); }
  to   { clip-path: inset(0 0 0 0); transform: none; }
}
.stub.is-torn .stub__side { transform: translate(5px, 2px) rotate(1.3deg); }
.stub__holo {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.55;
  background:
    radial-gradient(420px circle at var(--hx) var(--hy), rgba(214, 255, 0, 0.16), transparent 55%),
    linear-gradient(115deg, transparent 0%, transparent calc(var(--hx) - 22%), rgba(233, 231, 220, 0.09) calc(var(--hx) - 6%), rgba(214, 255, 0, 0.12) var(--hx), rgba(233, 231, 220, 0.09) calc(var(--hx) + 6%), transparent calc(var(--hx) + 22%));
  transition: opacity 0.4s var(--ease);
}
.stub__main { position: relative; padding: clamp(24px, 3.2vw, 38px); min-width: 0; }
.stub__head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.stub__brand { font: 700 10px/1 var(--mono); letter-spacing: 0.34em; color: var(--acid); }
.stub__draw { font: 500 10px/1 var(--mono); letter-spacing: 0.22em; color: var(--bone-faint); }
.stub__addr {
  margin-top: 20px;
  font: 400 clamp(12px, 1.5vw, 15px)/1.4 var(--mono);
  color: var(--bone-dim);
  overflow-wrap: anywhere;
}
.stub__big { display: flex; align-items: baseline; gap: 14px; margin-top: 14px; }
.stub__bigN {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 112%;
  font-size: clamp(54px, 11vw, 132px);
  line-height: 0.86;
  letter-spacing: -0.045em;
  color: var(--acid);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 44px rgba(214, 255, 0, 0.3);
}
.stub__bigK {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 105%;
  font-size: clamp(16px, 2.2vw, 26px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--bone-faint);
}
.stub__rows { margin: 24px 0 0; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.stub__rows > div { background: var(--ink); padding: 13px 16px; display: grid; grid-template-columns: 200px 1fr; gap: 14px; align-items: baseline; }
.stub__rows dt { font: 500 10px/1.4 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone-faint); }
.stub__rows dd { margin: 0; font: 700 13px/1.5 var(--mono); color: var(--bone); overflow-wrap: anywhere; }
.stub__won {
  margin: 20px 0 0;
  padding: 15px 18px;
  border: 1px solid var(--acid);
  background: rgba(214, 255, 0, 0.07);
  font: 700 12px/1.7 var(--mono);
  letter-spacing: 0.04em;
  color: var(--acid);
  animation: wonPulse 1.6s ease-in-out infinite alternate;
}
@keyframes wonPulse { to { box-shadow: 0 0 30px rgba(214, 255, 0, 0.3); } }
.stub__barcode {
  margin: 22px 0 0;
  height: 34px;
  background: repeating-linear-gradient(90deg, var(--bone-dim) 0 2px, transparent 2px 4px, var(--bone-dim) 4px 5px, transparent 5px 9px, var(--bone-dim) 9px 12px, transparent 12px 14px);
  opacity: 0.45;
  -webkit-mask-image: linear-gradient(90deg, #000 0 70%, transparent);
          mask-image: linear-gradient(90deg, #000 0 70%, transparent);
}
.stub__rip {
  background-image: radial-gradient(circle, var(--ink) 3.2px, transparent 3.6px);
  background-size: 26px 22px;
  background-position: center;
  background-repeat: repeat-y;
  border-left: 1px dashed rgba(233, 231, 220, 0.18);
  border-right: 1px dashed rgba(233, 231, 220, 0.18);
}
.stub__side {
  background: #0d1005;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px 10px;
  transition: transform 0.7s var(--ease);
}
.stub__sideT {
  writing-mode: vertical-rl;
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--acid);
}
.stub__sideN {
  writing-mode: vertical-rl;
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.18em;
  color: var(--bone-faint);
}

/* ============================================================
   04 — how it works (extends the shared .how component)
   ============================================================ */
.how__h {
  margin: 14px 0 10px;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 110%;
  font-size: 16px;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--bone);
}
.how-sec .how { margin-top: 0; }
.how__p b { color: var(--bone); }
.ball-app .how__step { position: relative; overflow: hidden; transition: background 0.4s var(--ease), transform 0.5s var(--ease); }
.ball-app .how__step::after {
  content: "";
  position: absolute;
  right: -30px; top: -30px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 255, 0, 0.16), transparent 70%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.ball-app .how__step:hover { transform: translateY(-3px); }
.ball-app .how__step:hover::after { opacity: 1; }
.ball-app .how__step:hover .how__n { text-shadow: 0 0 18px rgba(214, 255, 0, 0.7); }
.ball-app .how__n { transition: text-shadow 0.4s var(--ease); }

/* ============================================================
   05 — winners table
   ============================================================ */
.tbl { border: 1px solid var(--rule); }
.tbl__head,
.tbl__row {
  display: grid;
  grid-template-columns: 74px 128px 104px minmax(140px, 1fr) 88px 92px 120px;
  gap: 14px;
  align-items: center;
  padding: 14px 20px;
}
.tbl__head {
  background: var(--ink-2);
  border-bottom: 1px solid var(--rule);
  font: 500 9.5px/1 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.tbl__row {
  border-bottom: 1px solid var(--rule);
  font: 400 12px/1.4 var(--mono);
  color: var(--bone-dim);
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), box-shadow 0.35s var(--ease), opacity 0.7s var(--ease), transform 0.7s var(--ease);
  text-align: left;
  width: 100%;
  box-shadow: inset 0 0 0 var(--acid);
}
.tbl__row:last-child { border-bottom: none; }
.tbl__row:hover { background: #0d0f08; color: var(--bone); box-shadow: inset 3px 0 0 var(--acid); }
.tbl__row.is-on { background: #0d1005; box-shadow: inset 3px 0 0 var(--acid); }
.tbl__id { font-weight: 700; color: var(--acid); }
.tbl__tik { font-weight: 700; color: var(--bone); }
.tbl__who { overflow-wrap: anywhere; }
.tbl__prize { color: var(--acid); font-weight: 700; }
.tbl__prize--none { color: var(--bone-faint); font-weight: 400; }
.tbl__empty { padding: 34px 20px; font: 400 12.5px/1.7 var(--mono); color: var(--bone-faint); text-align: center; }
.tbl__lab { display: none; }

/* ============================================================
   06 — the field
   ============================================================ */
.stacks { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.stack {
  --w: 0%;
  position: relative;
  background: var(--ink-2);
  padding: 13px 20px;
  display: grid;
  grid-template-columns: 40px minmax(120px, 1fr) 96px 78px;
  gap: 16px;
  align-items: center;
  overflow: hidden;
  transition: background 0.35s var(--ease), opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.stack:hover { background: #0d0f08; }
.stack__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, rgba(214, 255, 0, 0.16), rgba(214, 255, 0, 0.03));
  border-right: 1px solid rgba(214, 255, 0, 0.3);
  pointer-events: none;
  transition: width 1.2s var(--ease);
  transition-delay: calc(var(--i, 0) * 40ms + 0.2s);
}
.stack.is-in .stack__bar { width: var(--w); }
/* the text sits above the bar; the bar itself must stay absolute or it takes
   the first grid column and the whole row reflows */
.stack > :not(.stack__bar) { position: relative; }
.stack__r { font: 700 11px/1 var(--mono); letter-spacing: 0.1em; color: var(--bone-faint); }
.stack__a { font: 400 12px/1.4 var(--mono); color: var(--bone-dim); overflow-wrap: anywhere; transition: color 0.3s var(--ease); }
.stack:hover .stack__a { color: var(--bone); }
.stack__t { font: 700 13px/1 var(--mono); color: var(--bone); text-align: right; font-variant-numeric: tabular-nums; }
.stack__p { font: 700 12px/1 var(--mono); color: var(--acid); text-align: right; font-variant-numeric: tabular-nums; }
.stack.is-you { background: #0d1005; box-shadow: inset 3px 0 0 var(--acid); }
.stack.is-you .stack__a { color: var(--acid); }
.field__foot { margin-top: 16px; font: 400 11px/1.7 var(--mono); color: var(--bone-faint); }

/* ============================================================
   nav extras
   ============================================================ */
.bnav__cta { padding: 11px 18px; }
.bnav__short { display: none; }
@media (max-width: 560px) {
  .bnav__cta { padding: 10px 14px; letter-spacing: 0.14em; }
  .bnav__long { display: none; }
  .bnav__short { display: inline; }
}

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 1080px) {
  .tbl__head, .tbl__row { grid-template-columns: 62px 104px 92px minmax(110px, 1fr) 74px 78px 100px; gap: 10px; padding: 13px 14px; font-size: 11px; }
}

@media (max-width: 880px) {
  .readout { grid-template-columns: repeat(2, 1fr); }
  .draw__grid { grid-template-columns: repeat(2, 1fr); }
  .proof__dl > div { grid-template-columns: 1fr; gap: 6px; }
  .stub__rows > div { grid-template-columns: 1fr; gap: 6px; }

  .tbl__head { display: none; }
  .tbl__row { grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 18px 18px 20px; }
  .tbl__row > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .tbl__lab { display: block; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-faint); }
  .tbl__row > .tbl__who { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .machine { width: min(420px, 88vw); transform: none; }
  .bhero__title, .bhero__glow { transform: none; }
  .stub { grid-template-columns: 1fr; }
  .stub__rip {
    height: 22px;
    background-image: radial-gradient(circle, var(--ink) 3.2px, transparent 3.6px);
    background-size: 22px 26px;
    background-repeat: repeat-x;
    border: none;
    border-top: 1px dashed rgba(233, 231, 220, 0.18);
    border-bottom: 1px dashed rgba(233, 231, 220, 0.18);
  }
  .stub__side { flex-direction: row; padding: 16px 20px; }
  .stub__sideT, .stub__sideN { writing-mode: horizontal-tb; }
  .stack { grid-template-columns: 30px 1fr 74px; gap: 10px; padding: 12px 14px; }
  .stack__p { display: none; }
  .draw__top { grid-template-columns: 1fr auto auto; }
  .draw__grid { grid-template-columns: 1fr; }
  .ball--roll { animation-name: ballRollSm; }
  @keyframes ballRollSm { 0% { transform: translateX(70px) rotate(300deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
  .draw__waitRing { width: 340px; height: 340px; }
}

@media (max-width: 460px) {
  .readout { grid-template-columns: 1fr; }
  .balls { gap: 7px; }
  .ball { --d: clamp(46px, 15vw, 62px); }
}

@media (hover: none), (pointer: coarse) {
  .cur, .cur-ring { display: none !important; }
}

/* ============================================================
   the intro — one ball, dropped, then the room
   ============================================================ */
.intro {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--ink);
  pointer-events: none;
  animation: introOut 0.7s cubic-bezier(0.76, 0, 0.24, 1) 1.5s forwards;
}
.intro.is-skip { display: none; }
@keyframes introOut { to { transform: translateY(-101%); } }
.intro__ball {
  width: 92px; height: 92px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 34% 28%, #f6ffc4 0%, var(--acid) 28%, #a8cc00 80%, #7d9800 100%);
  box-shadow: inset -5px -7px 14px rgba(0, 0, 0, 0.28), inset 3px 4px 10px rgba(255, 255, 255, 0.5), 0 18px 40px rgba(0, 0, 0, 0.6), 0 0 70px rgba(214, 255, 0, 0.45);
  color: #0a0b06;
  font-family: var(--display); font-weight: 900; font-size: 40px;
  animation: introDrop 1.15s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
@keyframes introDrop {
  0%   { transform: translateY(-70vh) scale(0.6) rotate(-200deg); opacity: 0; }
  55%  { transform: translateY(0) scale(1.06) rotate(8deg); opacity: 1; }
  72%  { transform: translateY(-22px) scale(0.98) rotate(0deg); }
  100% { transform: none; opacity: 1; }
}
.intro__shadow {
  width: 96px; height: 10px;
  margin-top: -14px;
  border-radius: 50%;
  background: rgba(214, 255, 0, 0.3);
  filter: blur(6px);
  animation: introShadow 1.15s ease-out both;
}
@keyframes introShadow { 0% { transform: scaleX(0.2); opacity: 0; } 55% { transform: scaleX(1.25); opacity: 1; } 100% { transform: scaleX(1); opacity: 0.9; } }
.intro__word { font: 700 11px/1 var(--mono); letter-spacing: 0.42em; color: var(--bone-dim); animation: fadeDown 0.5s var(--ease) 0.9s both; }
.intro__word b { color: var(--acid); font-weight: 700; }

/* ============================================================
   the pot sign — bulbs chasing round a jackpot board
   ============================================================ */
.potsign {
  position: relative;
  width: min(760px, 100%);
  margin: clamp(30px, 4vw, 48px) auto 0;
  padding: 13px;
}
.potsign__bulbs { position: absolute; inset: 0; pointer-events: none; filter: drop-shadow(0 0 5px rgba(214, 255, 0, 0.55)); }
.potsign__bulbs::before,
.potsign__bulbs::after {
  content: "";
  position: absolute;
  inset: 0;
}
.potsign__bulbs::before {
  background:
    radial-gradient(circle, var(--acid) 0 2.3px, rgba(214, 255, 0, 0.12) 3px, transparent 3.4px) 0 0 / 18px 12px repeat-x,
    radial-gradient(circle, var(--acid) 0 2.3px, rgba(214, 255, 0, 0.12) 3px, transparent 3.4px) 0 100% / 18px 12px repeat-x;
  animation: bulbsX 1.4s linear infinite;
}
.potsign__bulbs::after {
  background:
    radial-gradient(circle, var(--acid) 0 2.3px, rgba(214, 255, 0, 0.12) 3px, transparent 3.4px) 0 0 / 12px 18px repeat-y,
    radial-gradient(circle, var(--acid) 0 2.3px, rgba(214, 255, 0, 0.12) 3px, transparent 3.4px) 100% 0 / 12px 18px repeat-y;
  animation: bulbsY 1.4s linear infinite;
}
@keyframes bulbsX { to { background-position: 18px 0, -18px 100%; } }
@keyframes bulbsY { to { background-position: 0 -18px, 100% 18px; } }
body.is-drawmode .potsign__bulbs::before, body.is-drawmode .potsign__bulbs::after { animation-duration: 0.32s; }
.potsign__in {
  position: relative;
  border: 1px solid rgba(214, 255, 0, 0.45);
  background: radial-gradient(circle at 50% 0%, rgba(214, 255, 0, 0.13), transparent 60%), #0b0d05;
  padding: clamp(22px, 3.4vw, 36px) clamp(18px, 3vw, 34px) clamp(20px, 3vw, 30px);
  text-align: center;
  box-shadow: 0 0 60px rgba(214, 255, 0, 0.12), inset 0 0 40px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.8s var(--ease), border-color 0.8s var(--ease);
}
body.is-drawmode .potsign__in { border-color: var(--acid); box-shadow: 0 0 100px rgba(214, 255, 0, 0.3), inset 0 0 40px rgba(0, 0, 0, 0.5); }
.potsign__k { font: 700 10.5px/1 var(--mono); letter-spacing: 0.38em; text-transform: uppercase; color: var(--bone-faint); }
.potsign__v { display: flex; align-items: baseline; justify-content: center; gap: 14px; margin-top: 16px; }
.reels--pot {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 112%;
  font-size: clamp(46px, 9.5vw, 108px);
  letter-spacing: -0.03em;
  color: var(--acid);
  /* a drop-shadow, not a text-shadow: each reel clips its own column, and a
     text-shadow would be cut off at every column edge */
  filter: drop-shadow(0 0 18px rgba(214, 255, 0, 0.42));
}
.potsign__unit { font-family: var(--display); font-weight: 800; font-stretch: 105%; font-size: clamp(16px, 2.4vw, 28px); letter-spacing: 0.04em; color: var(--bone-faint); }
.potsign__usd { margin-top: 10px; font: 700 clamp(14px, 1.8vw, 20px)/1 var(--mono); color: var(--bone); min-height: 1em; }
.potsign__s { margin-top: 12px; font: 400 10.5px/1.7 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-faint); }

/* ============================================================
   slot reels — every live number rolls to its value
   ============================================================ */
.reels { display: inline-flex; align-items: flex-end; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.reel { position: relative; display: inline-block; width: 0.64em; height: 1em; overflow: hidden; }
.reels--pot .reel { width: 0.6em; }
.reel__strip {
  display: block;
  transform: translateY(calc(var(--n, 0) * -1em));
  transition: transform 1.15s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 65ms);
  will-change: transform;
}
.reel__strip span { display: block; height: 1em; line-height: 1; text-align: center; }
.reels__sep { display: inline-block; width: 0.36em; text-align: center; }
.reels__sep--dot { width: 0.3em; }

/* ============================================================
   the room: lasers on the rules, a watermark in draw mode
   ============================================================ */
.sec::after {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  width: 180px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--acid), transparent);
  pointer-events: none;
  animation: laser 7.5s linear infinite;
  animation-delay: calc(var(--lz, 0) * -1.9s);
}
.sec:nth-of-type(2) { --lz: 1; } .sec:nth-of-type(3) { --lz: 2; } .sec:nth-of-type(4) { --lz: 3; } .sec:nth-of-type(5) { --lz: 4; }
@keyframes laser { from { transform: translateX(-180px); } to { transform: translateX(100vw); } }

.machine__halo { z-index: 0; }
.machine__mark {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 112%;
  font-size: clamp(40px, 9vw, 118px);
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(214, 255, 0, 0.38);
  opacity: 0;
  pointer-events: none;
}
body.is-drawmode .machine__mark { animation: markPulse 1s ease-in-out infinite alternate; }
@keyframes markPulse { from { transform: translate(-50%, -50%) scale(0.96); opacity: 0.3; } to { transform: translate(-50%, -50%) scale(1.04); opacity: 0.9; } }
.machine__canvas { z-index: 2; }
.machine__cage { z-index: 3; }
.machine__glass { z-index: 4; }
.machine__port { z-index: 5; }
.machine__plate { z-index: 6; }

/* the last ten seconds */
body.is-final .readout__v--clock, body.is-final .draw__waitC { animation: heartbeat 0.5s ease-in-out infinite; transform-origin: center; }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.07); } 60% { transform: scale(1.02); } }

/* a fresh draw wears a turning acid halo for a while */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.draw__card.is-fresh::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0 55%, var(--acid) 78%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: spinBorder 2.2s linear infinite, haloFade 14s linear forwards;
}
@keyframes spinBorder { to { --ang: 360deg; } }
@keyframes haloFade { 0%, 82% { opacity: 1; } 100% { opacity: 0; } }

/* cursor trail + magnetic buttons + tilting balls */
.trail {
  position: fixed;
  left: 0; top: 0;
  z-index: 298;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--acid);
  pointer-events: none;
  animation: trail 0.55s ease-out forwards;
}
@keyframes trail { to { transform: translate(var(--tx), var(--ty)) scale(0.1); opacity: 0; } }
.ball-app .btn { transition: border-color 0.5s var(--ease), color 0.5s var(--ease), background 0.5s var(--ease), transform 0.35s var(--ease); }
.ball-app .draw__nav { transition: border-color 0.4s var(--ease), color 0.4s var(--ease), transform 0.35s var(--ease); }
.ball { transition: transform 0.28s var(--ease); }

@media (max-width: 680px) {
  .potsign { padding: 10px; }
  .potsign__v { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  .potsign__bulbs::before, .potsign__bulbs::after, .sec::after, .machine__mark, .draw__card.is-fresh::after { animation: none !important; }
  .reel__strip { transition: none; }
  .trail { display: none; }
  body.is-final .readout__v--clock, body.is-final .draw__waitC { animation: none; }
  .rv { opacity: 1; transform: none; transition: none; clip-path: none !important; }
  .ltr, .machine, .bhero__brow, .bhero__lede { animation: none !important; opacity: 1; transform: none; }
  .bhero__rays, .machine__cage, .machine__ring::after, .machine__glass::after, .machine__halo, .bhero__glow, .draw__card::before, .draw__waitRing { animation: none !important; }
  .ticker__track { animation: none; }
  .ball--roll, .ball--drop, .ball.is-lock, .ball--acid.is-lock, .ball.is-won { animation: none !important; }
  .stub.is-printing { animation: none; }
  .readout__cell::after, .sec__n::after { animation: none; transition: none; }
  .machine, .bhero__title, .bhero__glow { transform: none !important; transition: none; }
  .flap.is-flip .flap__fa, .flap.is-flip .flap__fb { animation: none; display: none; }
  main.is-shake { animation: none; }
  .embers, .confetti { display: none; }
}