/* Ballfin. The GTA VI site's grammar (near-black navy, geometric sans, condensed cream headings, lavender labels, pastel pills, 24px cards)
   wrapped around the one piece of loud art: the Leonida Lottery machine, standing in its store. */
:root {
  --bg: #0c0d1b;
  --bg-2: #07080f;
  --card: #15162a;
  --card-2: #1c1d36;
  --line: rgba(204, 194, 245, 0.14);
  --line-2: rgba(204, 194, 245, 0.3);
  --text: #ffffff;
  --cream: #fff9cb;
  --muted: #ccc2f5;
  --dim: #8a84a8;
  --ink: #111117;
  --pink: #ffb4c7;
  --peach: #ffd4a8;
  --lime: #e6ffa3;
  --orange: #ffad36;
  --sans: Jost, Futura, "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  --cond: Oswald, "Arial Narrow", Impact, sans-serif;
  --paper-2: #f3e6c8;
  --sun-2: #ffd43b;
  --gutter: clamp(16px, 5vw, 72px);
  --wide: 1120px;
  --radius: 24px;
  --ease-out: cubic-bezier(0.3, 0.9, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.012' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.booting { overflow: hidden; }
body { margin: 0; font: 500 0.9375rem/1.6 var(--sans); background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, dl, dd, dt, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
b { font-weight: 600; color: var(--cream); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, svg, canvas { display: block; }
::selection { background: var(--pink); color: var(--ink); }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: #2a2b48; border-radius: 999px; border: 2px solid var(--bg-2); }
.wrap { width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; }
.eyebrow { font: 500 0.6875rem/1.3 var(--cond); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.label { font: 500 0.6875rem/1.3 var(--cond); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }
.fine { font: 400 0.8125rem/1.6 var(--sans); color: var(--dim); }
.pot, .num, .lb td, .co-nums dd, .board-sum dd, .slips td, .addr, .facts dd { font-variant-numeric: tabular-nums; }
h2 { font: 600 clamp(2.4rem, 5vw, 4rem)/1 var(--cond); text-transform: uppercase; letter-spacing: 0.01em; color: var(--cream); }
h3 { font: 600 2rem/1 var(--cond); text-transform: uppercase; letter-spacing: 0.02em; color: var(--cream); }
.head { display: grid; gap: 10px; margin-bottom: 28px; }
.tag { display: inline-block; vertical-align: middle; margin-left: 0.5em; padding: 3px 8px; border-radius: 999px; background: var(--lime); color: var(--ink); font: 500 0.5625rem/1 var(--cond); letter-spacing: 0.16em; text-transform: uppercase; }
html.live .sample-only { display: none; }
.cream { color: var(--cream); }

/* scroll reveal */
.reveal { opacity: 0; translate: 0 18px; transition: opacity 700ms var(--ease-out), translate 700ms var(--ease-out); }
.reveal.in { opacity: 1; translate: 0 0; }
.hero .reveal { transition-delay: calc(var(--i, 0) * 90ms); }

/* the boot: the mark draws itself in outline, fills, then the screen lifts */
.boot { position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; gap: 14px; background: var(--bg); transition: opacity 700ms var(--ease-in-out), visibility 700ms, translate 900ms var(--ease-in-out); }
.boot.out { opacity: 0; visibility: hidden; translate: 0 -6%; }
.boot-mark { width: min(460px, 80vw); height: auto; overflow: visible; }
.mark-lines circle, .mark-lines path { stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 1300ms var(--ease-in-out) forwards; }
.mark-lines .d2 { animation-delay: 150ms; }
.mark-lines .d3 { animation-delay: 420ms; }
.mark-lines .d4 { animation-delay: 620ms; }
.mark-word { font: 600 28px var(--cond); letter-spacing: 0.42em; fill: #fff9cb; opacity: 0; animation: land 1100ms 900ms var(--ease-out) forwards; }
@keyframes land { from { opacity: 0; letter-spacing: 0.9em; } to { opacity: 1; letter-spacing: 0.42em; } }
.boot-line { margin: 0; text-align: center; font: 500 0.625rem/1 var(--cond); letter-spacing: 0.36em; text-transform: uppercase; color: var(--dim); opacity: 0; animation: fade 600ms 1500ms forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes ink { to { fill: #fff9cb; } }
@keyframes fade { to { opacity: 1; } }

/* pills, like the site's Pre-Order and Explore More buttons */
.pill { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 22px; border-radius: 999px; background: #fff; color: var(--ink); font: 500 0.875rem/1 var(--sans); text-decoration: none; white-space: nowrap; transition: transform 160ms var(--ease-out), filter 160ms, box-shadow 160ms; }
.pill:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 10px 30px rgba(255, 180, 199, 0.18); }
.pill:active { transform: translateY(1px); }
.pill.pink { background: var(--pink); }
.pill.peach { background: var(--peach); }
.pill.lime { background: var(--lime); }
.pill.ghost { background: rgba(255, 255, 255, 0.08); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.pill.ghost:hover { background: rgba(255, 255, 255, 0.14); }
.pill.big { height: 54px; padding: 0 30px; font-size: 1rem; }
.pill.small { height: 32px; padding: 0 14px; font-size: 0.8125rem; }
.arrow { width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M8 3l5 5-5 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M8 3l5 5-5 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }

/* the bar: transparent over the hero, solid once you scroll */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 30; display: flex; align-items: center; gap: 28px; height: 76px; padding-inline: clamp(20px, 3vw, 44px); background: linear-gradient(180deg, rgba(12, 13, 27, 0.6), rgba(12, 13, 27, 0)); transition: background 300ms, backdrop-filter 300ms, height 300ms; }
.bar.solid { height: 64px; background: rgba(12, 13, 27, 0.82); backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--line); }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 700 1.125rem/1 var(--cond); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); text-decoration: none; }
.logo-mark { width: 36px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); }
.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a { font: 500 0.8125rem/1 var(--sans); color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.nav a:hover { color: var(--text); }
@media (max-width: 820px) { .nav { display: none; } .bar .pill { margin-left: auto; } }

/* the hero: the store from the picture. Green plaster, a fluorescent tube, the breaker box, a tiled floor. The machine stands on the right. */
.hero { position: relative; min-height: min(100vh, 980px); padding: 110px 0 60px; overflow: hidden; isolation: isolate; }
.scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.scene-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.wall { position: absolute; inset: 0; background: linear-gradient(180deg, #0c1f21 0%, #143f3b 16%, #17494a 34%, #143f3e 60%, #0f2f30 78%, #0a2224 82%); }
.wall::after { content: ""; position: absolute; inset: 0; background-image: var(--mottle); background-size: 900px 900px; mix-blend-mode: overlay; opacity: 0.35; }
.hero-art { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 80%; object-fit: cover; object-position: 50% 40%; opacity: 0.16; mix-blend-mode: luminosity; -webkit-mask: radial-gradient(75% 85% at 50% 35%, #000 30%, transparent 100%); mask: radial-gradient(75% 85% at 50% 35%, #000 30%, transparent 100%); }
.grime { position: absolute; inset: 0; background: radial-gradient(60% 30% at 50% 80%, rgba(0, 0, 0, 0.5), transparent 70%), radial-gradient(40% 50% at 100% 60%, rgba(0, 0, 0, 0.35), transparent 70%), radial-gradient(40% 50% at 0% 70%, rgba(0, 0, 0, 0.35), transparent 70%), var(--noise); background-size: auto, auto, auto, 240px 240px; mix-blend-mode: multiply; opacity: 0.9; }
.tube { position: absolute; left: 50%; top: 0; width: min(560px, 50vw); height: 6px; translate: -50% 0; border-radius: 0 0 6px 6px; background: linear-gradient(180deg, #ffffff, #e6f3ec 60%, #b9d3c8); box-shadow: 0 0 16px 3px rgba(230, 255, 240, 0.5), 0 0 60px 16px rgba(200, 255, 230, 0.2); }
.tube-glow { position: absolute; left: 50%; top: 0; width: min(1200px, 100vw); height: 70%; translate: -50% 0; background: radial-gradient(50% 60% at 50% 0%, rgba(214, 255, 236, 0.16), rgba(214, 255, 236, 0.04) 45%, transparent 75%); mix-blend-mode: screen; }
.chair-rail { position: absolute; left: 0; right: 0; top: 80%; height: 14px; translate: 0 -100%; background: linear-gradient(180deg, #1c4a42, #0f2e2a); box-shadow: 0 2px 0 rgba(255, 255, 255, 0.06), 0 -1px 0 rgba(0, 0, 0, 0.4); }
.floor { position: absolute; left: 0; right: 0; top: 80%; bottom: 0; overflow: hidden; background: #0f1a1c; perspective: 520px; perspective-origin: 50% 0; }
.tiles { position: absolute; left: -60%; right: -60%; top: 0; height: 320%; transform-origin: 50% 0; transform: rotateX(62deg); background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px) 0 0/120px 120px, linear-gradient(180deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px) 0 0/120px 120px, linear-gradient(180deg, #2a3a3b, #141e20); }
.floor::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 8, 10, 0.6), rgba(12, 13, 27, 0.2) 30%, var(--bg) 100%); }
.floor-glow { position: absolute; left: 0; right: 0; top: 80%; height: 20%; background: radial-gradient(40% 50% at 50% 0%, rgba(214, 255, 236, 0.12), transparent 70%); mix-blend-mode: screen; }
.vignette { position: absolute; inset: 0; background: radial-gradient(80% 65% at 50% 45%, transparent 40%, rgba(5, 6, 14, 0.7) 100%), linear-gradient(180deg, rgba(12, 13, 27, 0.5), transparent 24%, transparent 80%, var(--bg) 100%); }

.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(300px, 0.95fr) minmax(0, 1.4fr) min(380px, 36vh); gap: clamp(24px, 3vw, 56px); align-items: center; min-height: calc(min(100vh, 980px) - 200px); width: min(100% - 2 * var(--gutter), 1360px); margin: 0 auto; padding-bottom: 4vh; }
.hero-copy { display: grid; gap: 18px; padding-bottom: 4vh; }
.title { font: 500 clamp(2rem, 3.3vw, 3rem)/1.08 var(--sans); letter-spacing: -0.01em; color: var(--text); text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4); text-wrap: balance; }
.title em { font-style: normal; color: var(--cream); }
.lede { max-width: 40ch; font-size: 1rem; line-height: 1.65; color: rgba(255, 255, 255, 0.8); }
.lede b { color: var(--text); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.facts { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 10px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.facts dt { font: 500 0.625rem/1.3 var(--cond); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.facts dd { margin-top: 2px; font: 600 1.1rem/1.2 var(--cond); color: var(--cream); }

/* the still from the trailer: a purple label above the frame, a line dropping into it onto the machine, the frame itself, a caption under it */
.still-wrap { position: relative; display: grid; gap: 0; align-self: center; margin-top: -2vh; --mx: 18.3%; }
.still-label { padding-left: 13.1%; font: 600 0.9375rem/1 var(--cond); letter-spacing: 0.16em; text-transform: uppercase; color: #c9b3ff; opacity: 0; animation: fade 500ms 900ms forwards; }
.still-drop { display: block; width: 3px; height: 26px; margin: 8px 0 0 calc(var(--mx) - 1px); background: #c9b3ff; transform-origin: top; scale: 1 0; animation: drop 400ms 1200ms var(--ease-out) forwards; }
@keyframes drop { to { scale: 1 1; } }
.still { position: relative; display: block; width: 100%; aspect-ratio: 1920 / 808; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 40px 80px rgba(0, 0, 0, 0.6); text-decoration: none; color: var(--text); }
.still-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.still-mark { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.mk-line { fill: none; stroke: #c9b3ff; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 140; stroke-dashoffset: 140; filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.6)); animation: draw-box 500ms 1500ms var(--ease-out) forwards; }
.mk-box { fill: rgba(201, 179, 255, 0.08); stroke: #c9b3ff; stroke-width: 11; stroke-dasharray: 1700; stroke-dashoffset: 1700; filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.6)); animation: draw-box 1300ms 1900ms var(--ease-in-out) forwards, pulse-box 2.6s 3300ms ease-in-out infinite; }
@keyframes draw-box { to { stroke-dashoffset: 0; } }
@keyframes pulse-box { 50% { stroke-width: 15; fill: rgba(201, 179, 255, 0.18); } }
.still-play { position: absolute; left: 50%; top: 50%; z-index: 3; width: 76px; height: 76px; translate: -50% -50%; border-radius: 50%; background: rgba(255, 255, 255, 0.92); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); transition: transform 240ms var(--ease-out); }
.still-play i { position: absolute; left: 55%; top: 50%; translate: -50% -50%; border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent #0c0d1b; }
.still:hover .still-play { transform: scale(1.06); }
.still-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 14px; padding-left: 4px; }
.still-cap span { font: 500 0.6875rem/1.3 var(--cond); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.still-cap b { font: 500 0.9375rem/1 var(--sans); color: var(--text); }
@media (prefers-reduced-motion: reduce) { .mk-box, .mk-line { animation: none; stroke-dashoffset: 0; } .still-label { animation: none; opacity: 1; } .still-drop { animation: none; scale: 1 1; } }

/* the machine: the rendered cabinet, standing on the floor line */
.machine { position: relative; z-index: 2; width: 100%; align-self: center; margin-top: 6vh; }
.machine-img { width: 100%; height: auto; filter: drop-shadow(-10px 30px 30px rgba(0, 0, 0, 0.55)); }
.floor-shadow { position: absolute; left: 4%; right: 4%; bottom: 1%; height: 34px; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0) 70%); filter: blur(6px); z-index: -1; }

/* the stats bar */
.stats { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 40px; border-radius: var(--radius); background: rgba(21, 22, 42, 0.9); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px rgba(0, 0, 0, 0.45); overflow: hidden; }
.stat { padding: 30px 34px 28px; }
.stat + .stat { box-shadow: inset 1px 0 0 var(--line); }
.pot, .num { margin-top: 10px; font: 600 clamp(2rem, 3.6vw, 3rem)/1 var(--cond); letter-spacing: 0.01em; color: var(--cream); }
.pot { background: linear-gradient(180deg, #fff9cb, #ffd4a8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub { margin-top: 8px; font-size: 0.8125rem; color: var(--dim); }

/* sections and the big rounded cards */
section.wrap { padding: clamp(56px, 7vw, 100px) 0 0; }
.panel { position: relative; overflow: hidden; padding: clamp(28px, 4vw, 56px); border-radius: var(--radius); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.panel-head { display: grid; gap: 10px; margin-bottom: 32px; }
.panel.sunset { background: #2b1b47; box-shadow: none; isolation: isolate; }
.sunset-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.panel.sunset::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20, 12, 34, 0.88) 0%, rgba(43, 27, 71, 0.6) 50%, rgba(43, 27, 71, 0.15) 100%); }
.panel.sunset::after { content: ""; position: absolute; right: -120px; top: -120px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 212, 168, 0.55), rgba(255, 212, 168, 0) 70%); pointer-events: none; }
.panel.sunset .fine { color: rgba(255, 255, 255, 0.7); }

/* scenes from the trailer: big rounded cards like the GTA VI site, the heading sitting on the picture */
.shot { position: relative; display: grid; align-content: end; min-height: clamp(260px, 34vw, 420px); margin-bottom: 16px; padding: clamp(24px, 4vw, 48px); border-radius: var(--radius); overflow: hidden; isolation: isolate; }
.shot-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1600ms var(--ease-out); }
.shot.in .shot-img { transform: none; }
.shot::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 13, 27, 0) 35%, rgba(12, 13, 27, 0.85) 100%), linear-gradient(90deg, rgba(12, 13, 27, 0.55), rgba(12, 13, 27, 0) 60%); }
.shot-copy { display: grid; gap: 10px; }
.shot-copy .eyebrow { color: #fff; }
.shot-copy h2 { text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); }
.shot-cap { position: absolute; right: 20px; top: 16px; font: 500 0.625rem/1 var(--cond); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step { position: relative; display: grid; grid-template-rows: 230px auto; border-radius: var(--radius); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); transition: transform 320ms var(--ease-out), opacity 700ms var(--ease-out), translate 700ms var(--ease-out); }
.step:hover { transform: translateY(-4px); }
.step:not(:last-child)::after { content: ""; position: absolute; z-index: 3; right: -22px; top: 115px; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff9cb' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: inset 0 0 0 1px var(--line-2); }
.step-art { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; background: radial-gradient(90% 120% at 50% 0%, var(--glow), rgba(0, 0, 0, 0) 70%); border-bottom: 1px solid var(--line); }
.step.s1 { --glow: rgba(255, 180, 199, 0.22); }
.step.s2 { --glow: rgba(54, 172, 230, 0.22); }
.step.s3 { --glow: rgba(255, 212, 168, 0.24); }
.step-body { display: grid; gap: 10px; align-content: start; padding: 26px 30px 32px; }
.step-n { font: 500 0.6875rem/1 var(--cond); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.step-body h3 { font-size: 2.2rem; }
.step-body p:not(.step-n) { font-size: 1rem; color: rgba(255, 255, 255, 0.9); }

/* step 1: three trades drop their cut into the pot */
.step.s1 .step-art { grid-template-columns: 1fr auto; gap: 18px; padding: 0 28px; }
.trades { display: grid; gap: 8px; width: 100%; }
.trade { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--line); font: 500 0.8125rem/1 var(--sans); white-space: nowrap; opacity: 0; translate: -10px 0; transition: opacity 500ms var(--ease-out), translate 500ms var(--ease-out); }
.trade i { margin-left: auto; font-style: normal; color: var(--lime); font-size: 0.75rem; }
.side { padding: 4px 7px; border-radius: 6px; font: 500 0.625rem/1 var(--cond); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.side.buy { background: var(--lime); }
.side.sell { background: var(--pink); }
.step.in .trade { opacity: 1; translate: 0 0; }
.step.in .trade:nth-child(2) { transition-delay: 150ms; }
.step.in .trade:nth-child(3) { transition-delay: 300ms; }
.jar { position: relative; width: 58px; height: 150px; border-radius: 18px; overflow: hidden; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--line-2); }
.jar-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: linear-gradient(180deg, var(--cream), var(--peach)); transition: height 1400ms var(--ease-out) 500ms; }
.step.in .jar-fill { height: 72%; }
.jar-label { position: absolute; z-index: 1; left: 0; right: 0; top: 10px; text-align: center; font: 500 0.625rem/1 var(--cond); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }

/* the ticket: a sunset stub with two punched notches */
.tik { position: relative; display: grid; align-content: center; justify-items: start; gap: 4px; width: 92px; height: 120px; padding: 0 14px; border-radius: 10px; color: var(--ink); background: linear-gradient(160deg, var(--peach), var(--pink)); -webkit-mask: radial-gradient(circle 8px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 8px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle 8px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 8px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; }
.tik em { font: 500 0.5625rem/1 var(--cond); letter-spacing: 0.18em; text-transform: uppercase; font-style: normal; }
.tik strong { font: 600 2.2rem/1 var(--cond); }
.step.s2 .step-art { align-content: center; gap: 18px; }
.hold-line { font: 500 0.875rem/1 var(--sans); color: var(--muted); }
.hold-line b { font: 600 1.25rem/1 var(--cond); letter-spacing: 0.02em; }
.tix { display: flex; justify-content: center; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.35)); }
.tix .tik { margin: 0 -10px; transition: transform 700ms var(--ease-out); }
.tix .tik:nth-child(2) { z-index: 1; }
.step.in .tix .tik:nth-child(1) { transform: rotate(-9deg) translate(-8px, 6px); }
.step.in .tix .tik:nth-child(3) { transform: rotate(9deg) translate(8px, 6px); }
.step.s3 .step-art { align-content: center; gap: 16px; }
.win-wrap { filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.35)); }
.tik.big { width: 160px; height: 120px; padding: 0 20px; }
.tik.big strong { font-size: 2.8rem; }
.tik.win { background: linear-gradient(160deg, #fff3a3, var(--sun-2) 60%, var(--orange)); }
.stamp { position: absolute; right: 14px; bottom: 16px; padding: 4px 8px; border: 2px solid #b22a5b; border-radius: 6px; color: #b22a5b; font: 600 0.75rem/1 var(--cond); letter-spacing: 0.16em; text-transform: uppercase; rotate: -14deg; scale: 1.6; opacity: 0; transition: scale 380ms var(--ease-out) 600ms, opacity 200ms 600ms; }
.step.in .stamp { scale: 1; opacity: 1; }
.win-when { font: 500 0.75rem/1 var(--cond); letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream); }

/* the leaderboard */
.check { display: grid; gap: 10px; margin-bottom: 36px; }
.check-row { display: flex; gap: 12px; }
.check-row input { flex: 1; min-width: 0; height: 54px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); font: 500 1rem/1 var(--sans); outline: 0; }
.check-row input:focus { box-shadow: inset 0 0 0 2px var(--pink); }
.check-row input::placeholder { color: var(--dim); }
.check-row .pill { height: 54px; padding: 0 28px; font-size: 1rem; justify-content: center; }
.check-out { margin-top: 6px; padding: 20px 22px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--line); }
.check-out.ok { box-shadow: inset 0 0 0 1px rgba(255, 180, 199, 0.5); }
.check-out.bad { color: var(--pink); }
.check-out.wait { color: var(--muted); }
.co-sub { margin-top: 6px; color: var(--muted); }
.co-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 16px; }
.co-nums dt, .board-sum dt { font: 500 0.6875rem/1.3 var(--cond); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.co-nums dd { margin-top: 6px; font: 600 clamp(1.4rem, 2.4vw, 2rem)/1 var(--cond); }
.cream { color: var(--cream); }
.board-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.board-sum dd { margin-top: 6px; font: 600 1.6rem/1 var(--cond); color: var(--cream); }
.lb { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.lb th { padding: 16px 12px 12px; text-align: left; font: 500 0.6875rem/1.3 var(--cond); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.lb td { padding: 13px 12px; border-top: 1px solid var(--line); white-space: nowrap; }
.lb .r { text-align: right; }
.lb th:first-child, .lb td:first-child { padding-left: 0; width: 44px; }
.lb th:last-child, .lb td:last-child { padding-right: 0; }
.lb .w a { color: var(--text); text-decoration: none; font-family: ui-monospace, "Geist Mono", Consolas, monospace; font-size: 0.875rem; }
.lb .w a:hover { color: var(--pink); }
.lb .t { font-weight: 600; color: var(--cream); }
.lb .o { color: var(--muted); }
.rank span { display: inline-grid; place-items: center; min-width: 28px; height: 28px; border-radius: 8px; font: 600 0.875rem/1 var(--cond); color: var(--muted); }
.top1 .rank span { background: linear-gradient(160deg, #fff3a3, var(--sun-2)); color: var(--ink); }
.top2 .rank span { background: linear-gradient(160deg, #fff, #c9c4dc); color: var(--ink); }
.top3 .rank span { background: linear-gradient(160deg, var(--peach), #d9895a); color: var(--ink); }
.lb .chance { width: 36%; }
.chance-in { display: flex; align-items: center; gap: 12px; }
.cbar { flex: 1; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.cbar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pink), var(--peach)); }
.chance-in b { min-width: 52px; text-align: right; font-weight: 600; color: var(--text); }
.lb tr.me td { background: rgba(255, 180, 199, 0.1); }
.live-dot { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; color: var(--lime); }
.live-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.3; } }
.board .panel-head, .board .check, .board .board-sum, .board .board-scroll, .board .board-foot, .board .board-empty { position: relative; z-index: 1; }
.board-art { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 340px; object-fit: cover; object-position: 100% 30%; opacity: 0.45; -webkit-mask: linear-gradient(180deg, #000 10%, transparent), linear-gradient(90deg, transparent 30%, #000 80%); -webkit-mask-composite: source-in; mask: linear-gradient(180deg, #000 10%, transparent), linear-gradient(90deg, transparent 30%, #000 80%); mask-composite: intersect; pointer-events: none; }
.board-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; }

.slips { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.slips th { padding: 0 14px 14px 0; text-align: left; font: 500 0.6875rem/1.3 var(--cond); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line-2); }
.slips td { padding: 18px 14px 18px 0; border-bottom: 1px solid var(--line); }
.slips td.took { color: var(--cream); font-weight: 600; }
.slips td.w { color: var(--muted); }
.slips a { color: var(--pink); }
.slips td:last-child, .slips th:last-child { text-align: right; padding-right: 0; }

.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.paper { position: relative; display: grid; gap: 12px; padding: 30px; border-radius: var(--radius); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.paper p + p { color: rgba(255, 255, 255, 0.82); }
.paper-n { position: absolute; right: 18px; top: 4px; font: 600 6rem/1 var(--cond); color: rgba(204, 194, 245, 0.06); }

.faq { display: grid; gap: 10px; }
.faq details { border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; cursor: pointer; list-style: none; font: 600 1.05rem/1.3 var(--sans); color: var(--text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 240ms var(--ease-out); }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details p { padding: 0 24px 22px; color: rgba(255, 255, 255, 0.78); max-width: 70ch; }

.addr-card { position: relative; z-index: 1; padding: 22px 24px; border-radius: 16px; background: rgba(12, 13, 27, 0.4); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.addr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 8px; }
.addr { font: 500 clamp(0.875rem, 2vw, 1.125rem)/1.4 var(--sans); word-break: break-all; color: var(--text); }
.addr-card .fine { margin-top: 12px; }
.links { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* the footer, built like the Rockstar one: brand, link columns, the rating box, the legal line */
.foot { position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(64px, 8vw, 120px); padding: 56px 0 40px; border-top: 1px solid var(--line); background: var(--bg-2); }
.foot-art { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; opacity: 0.28; -webkit-mask: linear-gradient(180deg, #000, transparent 85%); mask: linear-gradient(180deg, #000, transparent 85%); pointer-events: none; }
.foot-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
.foot-brand { display: grid; gap: 16px; }
.foot-logo { width: 88px; }
.foot-brand .fine { max-width: 48ch; }
.foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.foot-cols div { display: grid; gap: 10px; align-content: start; }
.foot-cols a { font: 500 0.875rem/1 var(--sans); color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.foot-cols a:hover { color: var(--text); }
.foot-legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font: 400 0.75rem/1.6 var(--sans); color: var(--dim); }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; align-items: start; }
  .machine { order: -1; width: min(100%, 300px); margin: 0 auto 24px; }
  .still-wrap { margin: 32px auto 0; order: 1; }
  .hero-copy { text-align: center; justify-items: center; padding-bottom: 8vh; }
  .cta { justify-content: center; }
  .facts { justify-content: center; }
  .elec { display: none; }
  .notice { left: auto; right: 16px; top: 14%; width: 120px; }
  .steps, .trio { grid-template-columns: 1fr; }
  .step:not(:last-child)::after { right: 50%; top: auto; bottom: -22px; margin: 0 -14px 0 0; rotate: 90deg; }
  .co-nums, .board-sum { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr; margin-top: 0; }
  .stat + .stat { box-shadow: inset 0 1px 0 var(--line); }
  .foot-inner { grid-template-columns: 1fr; }
  .sunset-art { width: 160px; right: 10px; top: 10px; opacity: 0.5; }
}
@media (max-width: 560px) {
  .hero { padding-top: 100px; }
  .slips th:nth-child(3), .slips td:nth-child(3) { display: none; }
  .lb th:nth-child(3), .lb td:nth-child(3), .lb th:nth-child(6), .lb td:nth-child(6) { display: none; }
  .lb td, .lb th { padding-left: 8px; padding-right: 8px; }
  .check-row { flex-direction: column; }
  .check-row input { flex: none; }
  .board-sum dd { font-size: 1.3rem; }
  .cta .pill { flex: 1 1 100%; justify-content: center; }
  .notice { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; translate: none; transition: none; }
  .shot-img { transform: none; transition: none; }
  .step, .pill, .trade, .jar-fill, .tix .tik, .stamp { transition: none; }
  .tape-track { animation: none; }
  .boot { display: none; }
  .mark-lines circle, .mark-lines path { animation: none; stroke-dashoffset: 0; } .mark-word { animation: none; opacity: 1; }
}