/* =====================================================================================
   Flip 'Em! website. The look comes from the game's own UI: Tokens.uss and the logo.
   Chamfered plates with an ink keyline, Bungee signs, Barlow Condensed for reading,
   studio purple surfaces, orange for "do this", yellow for the show's own voice.
   ===================================================================================== */

@font-face { font-family: Bungee; src: url(../assets/fonts/Bungee-Regular.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Barlow; font-weight: 600; src: url(../assets/fonts/BarlowCondensed-SemiBold.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Barlow; font-weight: 700; src: url(../assets/fonts/BarlowCondensed-Bold.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Barlow; font-weight: 900; src: url(../assets/fonts/BarlowCondensed-Black.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Barlow; font-weight: 800; font-style: italic; src: url(../assets/fonts/BarlowCondensed-ExtraBoldItalic.woff2) format("woff2"); font-display: swap; }

:root {
  --ink: #0e0816;
  --deep: #12081e;
  --plum: #201032;
  --surface: #3c1e5e;
  --violet: #4e2878;
  --lilac: #6436a0;
  --orange: #f8961e;
  --orange-hot: #ff6a13;
  --yellow: #ffd21f;
  --cream: #fbf3e0;
  --teal: #19c8c2;
  --pink: #ff3d8b;
  --blue: #2a8dff;
  --royal: #1e3fbf;
  --red: #e8232f;
  --green: #5fd13a;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --safe-x: clamp(20px, 5vw, 96px);
  --section-y: clamp(84px, 11vh, 130px);
  --intro: 1.5s;
}
.no-intro { --intro: .05s; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--deep); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--deep);
  color: var(--cream);
  font: 600 clamp(17px, 1.25vw, 21px)/1.3 Barlow, "Arial Narrow", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
img { height: auto; user-select: none; -webkit-user-drag: none; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* ----- Sections: ordinary blocks in an ordinary page ----- */
main { overflow-x: clip; }
.section { position: relative; overflow: hidden; isolation: isolate; padding: var(--section-y) var(--safe-x); border-top: 5px solid var(--ink); }
.bleed { margin-inline: calc(var(--safe-x) * -1); }
.section.is-offscreen *, .section.is-offscreen *::before, .section.is-offscreen *::after { animation-play-state: paused !important; }

/* ----- Reveals: timed, and started by coming into view ----- */
.motion [data-reveal] {
  opacity: 0;
  transition: opacity .55s ease-out, transform .85s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.motion [data-reveal=""], .motion [data-reveal="up"] { transform: translateY(32px); }
.motion [data-reveal="left"] { transform: translateX(-70px); }
.motion [data-reveal="right"] { transform: translateX(70px); }
.motion [data-reveal="pop"] { transform: scale(.55) rotate(-4deg); transition-timing-function: ease-out, var(--ease-back); transition-duration: .4s, .7s; }
.motion [data-reveal="flip"] { opacity: 1; transform: rotateY(180deg) translateY(30px); transition: transform 1s var(--ease-out); transition-delay: calc(var(--i, 0) * 170ms); }
.motion [data-reveal].is-in { opacity: 1; transform: none; }

/* ----- Sunbursts: the same rays as the game's arena cards ----- */
.rays {
  position: absolute; z-index: -3; left: 50%; top: var(--ray-y, 50%);
  width: min(220vmax, 3400px); aspect-ratio: 1; margin-left: calc(min(220vmax, 3400px) / -2);
  translate: 0 -50%;
  background: repeating-conic-gradient(from 0deg, var(--r1) 0 7.3deg, var(--r2) 7.7deg 14.6deg, var(--r1) 15deg);
  animation: spin 110s linear infinite;
}
.rays::after { content: ""; position: absolute; inset: 0; background: radial-gradient(closest-side, var(--ray-glow, transparent) 0, transparent 26%, var(--ray-edge, rgba(0,0,0,.65)) 62%); }
.rays--studio { --r1: #5a2a96; --r2: #3f1c70; --ray-glow: rgba(255, 140, 60, .55); --ray-edge: rgba(14, 6, 24, .85); --ray-y: 58%; }
.rays--dim    { --r1: #2a1544; --r2: #201034; --ray-glow: rgba(120, 60, 200, .35); --ray-edge: rgba(10, 4, 18, .9); }
.rays--violet { --r1: #6436a0; --r2: #4e2878; --ray-glow: rgba(255, 210, 31, .4); --ray-edge: rgba(18, 8, 30, .8); --ray-y: 55%; }
.rays--sunset { --r1: #ff7a1a; --r2: #e8481c; --ray-glow: rgba(255, 220, 120, .6); --ray-edge: rgba(90, 10, 40, .78); }
.rays--party  { --r1: #e82a9a; --r2: #b0189a; --ray-glow: rgba(255, 220, 90, .5); --ray-edge: rgba(50, 8, 90, .85); --ray-y: 40%; }
.rays--gold   { --r1: #38123a; --r2: #240a2c; --ray-glow: rgba(255, 196, 40, .55); --ray-edge: rgba(8, 2, 12, .92); }
.rays--hosts  { --r1: #3a2ca8; --r2: #2c1f8c; --ray-glow: rgba(255, 170, 110, .55); --ray-edge: rgba(12, 6, 40, .85); }
.rays--yellow { --r1: #ffd21f; --r2: #ffc400; --ray-glow: rgba(255, 255, 255, .55); --ray-edge: rgba(255, 140, 30, .55); --ray-y: 42%; }
.rays--sky    { --r1: #2f9bf5; --r2: #1f7fe0; --ray-glow: rgba(255, 255, 255, .55); --ray-edge: rgba(12, 30, 110, .8); --ray-y: 55%; }
@keyframes spin { to { rotate: 360deg; } }

/* ----- Stage lights ----- */
.beams { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.beams i {
  position: absolute; top: -12%; width: 34vmax; height: 130%; left: var(--x);
  margin-left: -17vmax; transform-origin: 50% 0; rotate: var(--a);
  background: linear-gradient(to bottom, var(--c), transparent 82%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  opacity: .2; animation: sweep var(--t) ease-in-out infinite alternate;
}
.beams i:nth-child(1) { --x: 12%; --a: 16deg; --c: #ff9d3c; --t: 7s; --to: -6deg; }
.beams i:nth-child(2) { --x: 36%; --a: -10deg; --c: #ff4fa8; --t: 9s; --to: 14deg; }
.beams i:nth-child(3) { --x: 64%; --a: 10deg; --c: #4fc9ff; --t: 8s; --to: -14deg; }
.beams i:nth-child(4) { --x: 88%; --a: -16deg; --c: #ffd21f; --t: 10s; --to: 6deg; }
@keyframes sweep { to { rotate: var(--to); } }

/* ----- Marquee bulbs (the SVG is drawn by JS, sized to the element) ----- */
.bulbs { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.bulbs svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bulbs .b-halo { fill: none; stroke-linecap: round; stroke: #ffd76b; opacity: .24; }
.bulbs .b-lamp { fill: none; stroke-linecap: round; stroke: #fff4c4; }
.bulbs .b-off  { fill: none; stroke-linecap: round; stroke: #6d4a2e; }
.bulbs .chase-a { animation: chase-a 1s steps(1) infinite; }
.bulbs .chase-b { animation: chase-b 1s steps(1) infinite; }
@keyframes chase-a { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .12; } }
@keyframes chase-b { 0%, 49% { opacity: .12; } 50%, 100% { opacity: 1; } }

/* ----- Type ----- */
.sign {
  font-family: Bungee, Impact, sans-serif; font-weight: 400; line-height: .98; letter-spacing: .005em;
  color: var(--cream); font-size: clamp(38px, 6vw, 96px);
  -webkit-text-stroke: .1em var(--ink); paint-order: stroke fill;
  text-shadow: 0 .09em 0 var(--ink);
}
.sign--huge { font-size: clamp(56px, 10vw, 170px); color: var(--c, var(--cream)); }
.sign--big { font-size: clamp(36px, 5vw, 84px); }
.lead { font-size: clamp(19px, 1.65vw, 27px); font-weight: 700; line-height: 1.22; max-width: 36ch; text-wrap: pretty; text-shadow: 0 2px 0 rgba(14, 8, 22, .55); }
.lead--dark { color: var(--ink); text-shadow: none; }

.chip {
  display: inline-flex; align-items: center; gap: .45em; padding: .28em .8em .24em;
  font: 400 clamp(12px, .95vw, 15px)/1.1 Bungee, sans-serif; letter-spacing: .03em;
  color: var(--cream); background: var(--surface);
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
}
.chip--red { background: var(--red); }
.chip--blue { background: var(--blue); color: var(--ink); }
.chip--yellow { background: var(--yellow); color: var(--ink); }
.chip--cream { background: var(--cream); color: var(--ink); }
.chip--ink { background: var(--ink); color: var(--yellow); }
.dot { width: .62em; height: .62em; border-radius: 50%; background: currentColor; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: .2; } }

/* ----- Buttons ----- */
.btn {
  --bg: var(--orange); --fg: var(--ink);
  position: relative; display: inline-block; padding: 3px; text-decoration: none; background: var(--ink); cursor: pointer;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  transition: transform .35s var(--ease-back), filter .25s;
}
.btn span {
  display: block; padding: .72em 1.5em .66em; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, white), var(--bg) 55%, color-mix(in srgb, var(--bg) 85%, black));
  color: var(--fg); font: 400 clamp(15px, 1.2vw, 20px)/1 Bungee, sans-serif;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.btn:hover { transform: translateY(-3px) scale(1.04); filter: brightness(1.08); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn--ghost { --bg: var(--surface); --fg: var(--cream); }
.btn--small span { font-size: clamp(12px, .95vw, 15px); padding: .62em 1.1em .56em; }
.btn--big span { font-size: clamp(18px, 1.7vw, 30px); padding: .78em 1.5em .72em; }
.btn.is-soon { cursor: default; --bg: var(--yellow); }

/* ----- Speech bubbles ----- */
.bubble {
  position: relative; display: inline-block; max-width: 30ch; padding: .7em 1em; color: var(--ink); background: var(--cream);
  font-weight: 700; font-size: clamp(16px, 1.35vw, 23px); line-height: 1.16; border: 3px solid var(--ink); border-radius: 14px;
  box-shadow: 0 6px 0 var(--ink);
}
.bubble b {
  position: absolute; top: -.85em; right: .8em; padding: .18em .6em .12em; color: var(--ink); background: var(--blue);
  font: 400 .68em/1.1 Bungee, sans-serif; border: 2px solid var(--ink); border-radius: 6px;
}
.bubble::after {
  content: ""; position: absolute; bottom: -15px; left: var(--tail, 50%); width: 22px; height: 22px; margin-left: -11px; background: var(--cream);
  border: 3px solid var(--ink); border-width: 0 3px 3px 0; rotate: 45deg;
}
.bubble--toright::after { left: auto; right: -13px; bottom: 24px; rotate: -45deg; }
.bubble--crayon {
  font: 800 italic clamp(18px, 1.6vw, 26px)/1.08 Barlow, sans-serif; rotate: -2deg; background: #fffbe9; color: #c9202c;
  border-radius: 40% 46% 42% 44% / 60% 55% 62% 58%; padding: .8em 1.2em;
}
.bubble--crayon::after { background: #fffbe9; }
.crayon { font: 800 italic 1.05em/1 Barlow, sans-serif; color: #e0303c; rotate: -2deg; display: inline-block; white-space: nowrap; margin-left: .3em; }

.note { position: relative; padding-left: 1em; border-left: 4px solid var(--yellow); font-style: normal; font-weight: 700; max-width: 34ch; line-height: 1.2; }
.note cite { display: block; margin-top: .4em; font: 400 .66em/1 Bungee, sans-serif; color: var(--yellow); font-style: normal; }

/* ----- Opening shutter ----- */
.shutter { position: fixed; inset: 0; z-index: 200; pointer-events: none; display: none; }
.motion .shutter { display: block; }
.no-intro .shutter { display: none; }
.shutter__half {
  position: absolute; left: 0; right: 0; height: 50.5%; background: repeating-linear-gradient(115deg, #2c1548 0 56px, #1f0e36 56px 112px);
  transition: transform .95s cubic-bezier(.77, 0, .18, 1);
}
.shutter__half--top { top: 0; border-bottom: 10px solid var(--yellow); }
.shutter__half--bottom { bottom: 0; border-top: 10px solid var(--yellow); }
.shutter__count { position: absolute; inset: 0; display: grid; place-items: center; font: 400 clamp(90px, 22vmin, 220px)/1 Bungee, sans-serif; color: var(--cream); transition: opacity .2s; }
.shutter__count span { grid-area: 1 / 1; opacity: 0; scale: 1.5; -webkit-text-stroke: .08em var(--ink); paint-order: stroke fill; animation: .36s var(--ease-out) forwards; }
.shutter__count span:nth-child(1) { animation-delay: 0s; animation-name: count-out; }
.shutter__count span:nth-child(2) { animation-delay: .34s; animation-name: count-out; }
.shutter__count span:nth-child(3) { animation-delay: .68s; color: var(--orange); animation-name: count-hold; }
@keyframes count-out { 0% { opacity: 0; scale: 1.6; } 30% { opacity: 1; scale: 1; } 80% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: .9; } }
@keyframes count-hold { 0% { opacity: 0; scale: 1.6; } 30%, 100% { opacity: 1; scale: 1; } }
.is-open .shutter__half--top { transform: translateY(-104%); }
.is-open .shutter__half--bottom { transform: translateY(104%); }
.is-open .shutter__count { opacity: 0; }
.is-gone .shutter { display: none; }

/* ----- Top bar and right rail ----- */
.topbar {
  position: fixed; z-index: 100; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 24px;
  padding: 12px var(--safe-x); background: linear-gradient(to bottom, rgba(14, 6, 24, .78), transparent);
}
.topbar__logo img { height: clamp(32px, 3.4vw, 46px); width: auto; transition: rotate .4s var(--ease-back), scale .4s var(--ease-back); }
.topbar__logo:hover img { rotate: -4deg; scale: 1.08; }
.topbar__nav { display: flex; gap: clamp(12px, 1.8vw, 28px); margin-left: auto; }
.topbar .btn { margin-left: clamp(4px, 1vw, 16px); }
.topbar__nav a {
  position: relative; text-decoration: none; font: 400 clamp(12px, .95vw, 15px)/1 Bungee, sans-serif; padding: .5em 0; color: var(--cream);
  text-shadow: 0 2px 0 var(--ink);
}
.topbar__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--yellow); scale: 0 1; transition: scale .3s var(--ease-out); }
.topbar__nav a:hover::after { scale: 1 1; }
.onair { display: flex; align-items: center; gap: 6px; pointer-events: none; white-space: nowrap; font: 400 clamp(10px, .78vw, 12px)/1 Bungee, sans-serif; }
.onair__live { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 4px; color: var(--cream); background: var(--red); border-radius: 3px; }
.onair__live i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: blink 1.1s steps(1) infinite; }
.onair__channel { padding: 5px 10px 4px; background: rgba(14, 6, 24, .82); color: var(--cream); border-radius: 3px; }

.rail { position: fixed; z-index: 90; right: clamp(8px, 1.1vw, 20px); top: 50%; translate: 0 -50%; display: flex; flex-direction: column; gap: 10px; }
.rail a { position: relative; display: block; width: 12px; height: 12px; border-radius: 50%; background: #6d4a2e; border: 2px solid var(--ink); transition: background .2s, box-shadow .2s, scale .3s var(--ease-back); }
.rail a.is-on { background: #fff0ae; box-shadow: 0 0 12px 3px rgba(255, 210, 90, .75); scale: 1.2; }
.rail a span {
  position: absolute; right: 22px; top: 50%; translate: 6px -50%; white-space: nowrap; padding: 4px 8px 3px; background: var(--ink); color: var(--cream);
  font: 400 11px/1 Bungee, sans-serif; border-radius: 3px; opacity: 0; pointer-events: none; transition: opacity .2s, translate .25s var(--ease-out);
}
.rail a:hover span { opacity: 1; translate: 0 -50%; }

.confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 80; pointer-events: none; visibility: hidden; }
.confetti.is-on { visibility: visible; }

/* ----- Idle life ----- */
.bob { animation: bob 2.7s ease-in-out infinite alternate; }
.bob--b { animation-duration: 3.3s; animation-delay: -1s; }
.bob--c { animation-duration: 2.1s; animation-delay: -.6s; }
@keyframes bob { from { translate: 0 0; rotate: -.7deg; } to { translate: 0 -2.2%; rotate: .9deg; } }
.sway { transform-origin: 50% 100%; animation: sway 3.4s ease-in-out infinite alternate; }
.sway--b { animation-duration: 2.8s; animation-delay: -1.2s; }
@keyframes sway { from { rotate: -1.6deg; scale: 1 1; } to { rotate: 1.6deg; scale: 1.012 .99; } }
.hop { animation: hop 1.3s cubic-bezier(.3, 0, .7, 1) infinite; transform-origin: 50% 100%; }
@keyframes hop { 0%, 100% { translate: 0 0; scale: 1.03 .97; } 12% { scale: .98 1.03; } 50% { translate: 0 -10%; scale: 1 1; rotate: -3deg; } 86% { scale: .98 1.03; } }

/* ---------------------------------------------------------------- HERO */
.hero { height: 100vh; height: 100svh; min-height: 600px; padding: 0; background: radial-gradient(ellipse at 50% 58%, #4e2196 0, #1d0d38 70%); border-top: 0; }
.crowd {
  position: absolute; z-index: -1; left: 0; right: 0; top: 40%; height: 15%;
  background:
    radial-gradient(circle at 5px 5px, rgba(255, 255, 255, .85) 0 2.4px, transparent 3px) 0 0 / 15px 15px,
    radial-gradient(circle at 5px 5px, #ff5fa8 0 2.4px, transparent 3px) 7px 7px / 19px 15px,
    radial-gradient(circle at 5px 5px, #5fd6ff 0 2.4px, transparent 3px) 3px 11px / 23px 15px,
    radial-gradient(circle at 5px 5px, var(--yellow) 0 2.4px, transparent 3px) 13px 3px / 29px 15px;
  opacity: .34; -webkit-mask: linear-gradient(to bottom, transparent, #000 40%, #000 72%, transparent);
          mask: linear-gradient(to bottom, transparent, #000 40%, #000 72%, transparent);
}
.hero__world { position: absolute; inset: 0; }
.hero__floor { position: absolute; left: 50%; bottom: -46vh; width: 150vh; height: 150vh; margin-left: -75vh; transform: rotateX(74deg); pointer-events: none; }
.floor-disc {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(closest-side, #ffb12e 0 9%, #fff 9% 9.8%, #18b9d4 9.8% 37%, #fff 37% 37.9%, #1096c7 37.9% 67%, #fff 67% 68%, #2a2f9e 68% 80%, transparent 80.3%),
    repeating-conic-gradient(var(--ink) 0 4deg, var(--yellow) 4deg 8deg);
  box-shadow: 0 0 0 16px #2a2f9e, 0 0 0 26px var(--ink), 0 40px 180px 70px rgba(255, 120, 40, .4);
  animation: spin 70s linear infinite;
}
.hero__car { position: absolute; display: block; transition: scale .3s var(--ease-back); }
.hero__car:hover { scale: 1.07; }
.hero__car img { width: 100%; }
.hero__car.is-flip img { animation: car-flip 1.05s cubic-bezier(.3, .1, .4, 1) both; }
@keyframes car-flip {
  0% { translate: 0 0; rotate: 0deg; scale: 1.08 .9; }
  12% { translate: 0 -10%; scale: .95 1.08; }
  50% { translate: 0 -135%; rotate: -200deg; scale: 1.1; }
  82% { translate: 0 0; rotate: -360deg; scale: 1.1 .86; }
  92% { translate: 0 -8%; rotate: -360deg; scale: .98 1.03; }
  100% { translate: 0 0; rotate: -360deg; scale: 1; }
}
.hero__car--1 { width: clamp(150px, 20vw, 330px); left: 18%; bottom: 13%; }
.hero__car--2 { width: clamp(120px, 15.5vw, 260px); left: 37.5%; bottom: 27%; }
.hero__car--3 { width: clamp(130px, 17vw, 270px); left: 43%; bottom: 7%; }
.hero__car--4 { width: clamp(110px, 14vw, 230px); right: 31.5%; bottom: 29%; }
.hero__car--5 { width: clamp(150px, 20vw, 320px); right: 18.5%; bottom: 12%; }
.hero__host { position: absolute; bottom: 42px; height: min(64vh, 44vw); aspect-ratio: .52; pointer-events: none; }
.hero__host img { position: absolute; left: 50%; bottom: 0; translate: -50% 0; height: 100%; width: auto; max-width: none; }
.hero__host--pin { left: 2.5%; }
.hero__host--dippy { right: 2.5%; }
.motion .hero__host--pin { animation: enter-left 1s var(--ease-back) var(--intro) both; }
.motion .hero__host--dippy { animation: enter-right 1s var(--ease-back) calc(var(--intro) + .12s) both; }
@keyframes enter-left { from { translate: -60vw 0; } to { translate: 0 0; } }
@keyframes enter-right { from { translate: 60vw 0; } to { translate: 0 0; } }
.hero__title { position: absolute; z-index: 3; left: 0; right: 0; top: clamp(58px, 9.5vh, 110px); display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.4vh, 16px); padding: 0 var(--safe-x); text-align: center; pointer-events: none; }
.hero__title a { pointer-events: auto; }
.hero__logo { width: min(58vw, 88vh); }
.hero__logo img { width: 100%; }
.motion .hero__logo img { animation: slam .8s var(--ease-back) var(--intro) both; }
@keyframes slam { 0% { scale: 2.6; opacity: 0; rotate: -8deg; } 60% { opacity: 1; } 100% { scale: 1; opacity: 1; rotate: 0deg; } }
.hero__hosted { width: min(35vw, 52vh); }
.motion .hero__hosted { animation: rise .7s var(--ease-out) calc(var(--intro) + .35s) both; }
.hero__tag { font-weight: 800; font-style: italic; font-size: clamp(20px, 2.2vw, 34px); line-height: 1.05; text-shadow: 0 3px 0 var(--ink); }
.motion .hero__tag { animation: rise .7s var(--ease-out) calc(var(--intro) + .5s) both; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: .3em; }
.motion .hero__cta { animation: rise .7s var(--ease-out) calc(var(--intro) + .65s) both; }
@keyframes rise { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }

/* A car jumps over the set every so often, a different one each pass (js/main.js). It tips with the jump but stays upright. */
.hero__flyer { position: absolute; z-index: 4; left: 0; top: 0; width: clamp(180px, 22vw, 380px); pointer-events: none; display: none; }
.motion .hero__flyer { display: block; animation: fly-x 13s linear calc(var(--intro) + 1.4s) infinite both; }
.hero__flyer img { width: 100%; }
.motion .hero__flyer img { animation: fly-arc 13s linear calc(var(--intro) + 1.4s) infinite both; }
@keyframes fly-x { 0% { transform: translateX(112vw); } 24%, 100% { transform: translateX(-34vw); } }
@keyframes fly-arc {
  0% { translate: 0 44vh; rotate: 16deg; animation-timing-function: cubic-bezier(.2, .7, .5, 1); }
  12% { translate: 0 8vh; rotate: 0deg; animation-timing-function: cubic-bezier(.5, 0, .8, .4); }
  24%, 100% { translate: 0 50vh; rotate: -16deg; }
}

.hero__hint { position: absolute; z-index: 5; left: 50%; bottom: 52px; translate: -50% 0; padding: 6px 14px 5px; background: var(--ink); color: var(--cream); border-radius: 999px; font: 400 12px/1 Bungee, sans-serif; white-space: nowrap; pointer-events: none; }
.motion .hero__hint { animation: rise .7s var(--ease-out) calc(var(--intro) + 1.2s) both; }

.ticker { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; height: 40px; overflow: hidden; background: var(--ink); border-top: 3px solid var(--yellow); display: flex; align-items: center; }
.ticker--band { position: relative; z-index: 2; border-bottom: 3px solid var(--yellow); }
.ticker__run { display: flex; white-space: nowrap; font: 400 14px/1 Bungee, sans-serif; color: var(--yellow); animation: run 44s linear infinite; }
@keyframes run { to { translate: -50% 0; } }

/* ---------------------------------------------------------------- THE RULES */
.show { background: var(--deep); padding-bottom: 0; }
.show__grid { display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: clamp(24px, 4vw, 70px); align-items: center; padding-bottom: clamp(44px, 7vh, 80px); }
.show__screen { position: relative; }
.tv { position: relative; width: 100%; aspect-ratio: 16 / 9; padding: clamp(14px, 1.8vw, 28px); background: linear-gradient(160deg, #4e2878, #2a1244); border-radius: 26px; box-shadow: 0 0 0 4px var(--ink), 0 30px 90px rgba(0, 0, 0, .55); }
.tv__glass { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 12px; background: #000; box-shadow: 0 0 0 3px var(--ink); }
.tv__glass video { width: 100%; height: 100%; object-fit: cover; }
.tv__scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .08) 0 2px, transparent 2px 4px), radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(0, 0, 0, .34)); }
.tv__bug { position: absolute; top: 14px; right: 16px; }
.pop { position: absolute; z-index: 6; display: grid; place-items: center; width: clamp(96px, 11vw, 190px); aspect-ratio: 1; animation: wobble 3.1s ease-in-out infinite alternate; }
.pop::before { content: ""; position: absolute; inset: 0; background: var(--ink); clip-path: var(--burst); }
.pop::after { content: ""; position: absolute; inset: 5%; background: var(--c); clip-path: var(--burst); }
.pop span { position: relative; z-index: 1; font: 400 clamp(20px, 2.6vw, 44px)/1 Bungee, sans-serif; color: var(--cream); -webkit-text-stroke: .12em var(--ink); paint-order: stroke fill; rotate: -8deg; }
.pop--flip { --c: var(--pink); left: -3%; top: -9%; --burst: polygon(50% 0, 60% 22%, 82% 7%, 78% 32%, 100% 36%, 82% 52%, 98% 73%, 73% 72%, 70% 97%, 51% 79%, 32% 98%, 28% 72%, 3% 75%, 18% 52%, 0 35%, 23% 32%, 18% 6%, 40% 21%); }
.pop--bam { --c: var(--orange-hot); right: -4%; bottom: -8%; animation-delay: -1.4s; --burst: polygon(50% 3%, 58% 26%, 79% 10%, 75% 35%, 98% 39%, 79% 53%, 92% 77%, 68% 72%, 62% 96%, 47% 76%, 28% 93%, 28% 69%, 4% 72%, 20% 51%, 2% 33%, 26% 34%, 22% 10%, 42% 26%); }
@keyframes wobble { from { rotate: -5deg; scale: .97; } to { rotate: 5deg; scale: 1.04; } }
.show__rules { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(10px, 1.6vh, 18px); }
.rules { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.rule { display: flex; align-items: stretch; }
.rule__n { display: grid; place-items: center; min-width: 1.5em; padding: .08em .3em; font: 400 clamp(26px, 2.8vw, 46px)/1 Bungee, sans-serif; background: var(--yellow); color: var(--ink); clip-path: polygon(0 0, 100% 0, 100% 100%, 16% 100%, 0 80%); }
.rule__text { display: flex; align-items: center; padding: .3em .7em; font: 400 clamp(16px, 1.65vw, 27px)/1.05 Bungee, sans-serif; background: var(--cream); color: var(--ink); clip-path: polygon(0 0, 97% 0, 100% 22%, 100% 100%, 0 100%); }
.show__pin { display: flex; align-items: flex-end; gap: 16px; align-self: flex-end; margin-bottom: calc(clamp(44px, 7vh, 80px) * -1); }
.show__pin img { height: clamp(190px, 30vh, 320px); width: auto; flex: none; }
.show__pin .bubble { max-width: 19ch; margin-bottom: 18%; }
.stats { position: relative; z-index: 7; display: grid; grid-template-columns: repeat(6, 1fr); background: var(--ink); border-top: 4px solid var(--yellow); }
.stats li { padding: clamp(10px, 1.8vh, 22px) 6px; text-align: center; border-left: 2px solid rgba(255, 255, 255, .1); }
.stats li:first-child { border-left: 0; }
.stats b { display: block; font: 400 clamp(28px, 3.4vw, 58px)/1 Bungee, sans-serif; color: var(--yellow); }
.stats span { font-size: clamp(13px, 1.15vw, 19px); font-weight: 700; }

/* ---------------------------------------------------------------- THREE WAYS */
.ways { background: var(--plum); display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 3.5vh, 44px); }
.ways__title { text-align: center; font-size: clamp(32px, 4.6vw, 74px); }
.ways__title br { display: none; }
.ways__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 36px); width: min(100%, 1320px); perspective: 1500px; }
.way { position: relative; display: block; aspect-ratio: 4 / 5; width: 100%; text-decoration: none; transform-style: preserve-3d; }
.way__front, .way__back {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 4px solid var(--ink); border-radius: 26px; overflow: hidden; box-shadow: 0 10px 0 var(--ink);
}
.way__back { justify-content: center; rotate: y 180deg; background: repeating-conic-gradient(from 0deg at 50% 50%, #5a2a96 0 15deg, #41207a 15deg 30deg); }
.way__back img { width: 72%; }
.way__front { padding: clamp(10px, 1.5vw, 22px); justify-content: flex-end; text-align: center; background: repeating-conic-gradient(from 0deg at 50% 36%, var(--a) 0 15deg, var(--b) 15deg 30deg); transition: translate .35s var(--ease-back); }
.way:hover .way__front { translate: 0 -6px; }
.way--stock { --a: #ff7a1a; --b: #e8481c; }
.way--pit { --a: #1f4fd8; --b: #1a3fb5; }
.way--party { --a: #e82a9a; --b: #b0189a; }
.way__ch { position: absolute; top: clamp(10px, 1.3vw, 18px); left: 50%; translate: -50% 0; padding: .3em .7em .24em; background: var(--ink); color: var(--yellow); font: 400 clamp(11px, .95vw, 15px)/1 Bungee, sans-serif; border-radius: 5px; white-space: nowrap; }
.way__car { position: absolute; left: 7%; right: 7%; width: 86%; top: 17%; transition: translate .4s var(--ease-back), rotate .4s var(--ease-back); }
.way:hover .way__car { translate: 0 -5%; rotate: -5deg; }
.way__name { position: relative; font: 400 clamp(30px, 4vw, 66px)/1 Bungee, sans-serif; -webkit-text-stroke: .1em var(--ink); paint-order: stroke fill; text-shadow: 0 .08em 0 var(--ink); }
.way__line { position: relative; margin-top: .3em; font-weight: 700; font-size: clamp(15px, 1.35vw, 23px); line-height: 1.1; text-shadow: 0 2px 0 rgba(14, 8, 22, .55); }

/* ---------------------------------------------------------------- STOCK */
.stock { background: #c4360f; padding-bottom: 0; }
.stock__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -5; opacity: .5; }
.stock__tint { position: absolute; inset: 0; z-index: -4; background: linear-gradient(100deg, rgba(170, 34, 16, .94) 0%, rgba(214, 60, 18, .78) 42%, rgba(255, 120, 26, .25) 100%); }
.stock .rays { opacity: .13; }
.stock__grid { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); align-items: center; gap: 2vw; padding-bottom: clamp(40px, 6vh, 70px); }
.stock__copy { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(10px, 1.7vh, 20px); }
.stock__word { --c: var(--yellow); }
.stock__tabs { display: flex; flex-direction: column; gap: 4px; margin-top: .3em; }
.stock__tabs button { display: flex; align-items: center; gap: .6em; padding: .22em 0; font: 400 clamp(14px, 1.2vw, 20px)/1.1 Bungee, sans-serif; color: rgba(251, 243, 224, .68); text-shadow: 0 2px 0 rgba(14, 8, 22, .5); transition: color .2s, translate .35s var(--ease-out); text-align: left; }
.stock__tabs button::before { content: ""; width: 12px; height: 12px; flex: none; rotate: 45deg; background: currentColor; transition: background .2s; }
.stock__tabs button:hover { color: var(--cream); }
.stock__tabs button.is-on { color: var(--cream); translate: 10px 0; }
.stock__tabs button.is-on::before { background: var(--yellow); }
.deck { display: grid; justify-items: center; align-items: center; min-width: 0; }
.mcard { grid-area: 1 / 1; width: min(29vw, 56vh, 620px); display: flex; flex-direction: column; background: var(--ink); border-radius: 26px; padding: 4px; box-shadow: 0 12px 0 rgba(14, 8, 22, .75); transform-origin: 50% 120%; transition: transform .75s var(--ease-out), opacity .4s ease-out; cursor: pointer; }
.mcard[aria-hidden="false"] { cursor: default; }
.mcard__art { position: relative; aspect-ratio: 16 / 11; border-radius: 22px 22px 0 0; overflow: hidden; background: repeating-conic-gradient(from 0deg at 50% 62%, var(--a) 0 12deg, var(--b) 12deg 24deg); }
.mcard__art img { position: absolute; left: 8%; width: 84%; bottom: 7%; }
.mcard__n { position: absolute; z-index: 1; top: 10px; left: 12px; padding: .2em .55em .14em; font: 400 clamp(11px, .85vw, 14px)/1 Bungee, sans-serif; color: var(--yellow); background: var(--ink); border-radius: 4px; }
.mcard__body { flex: 1; padding: clamp(12px, 1.3vw, 22px); background: var(--cream); color: var(--ink); border-radius: 0 0 22px 22px; }
.mcard h3 { font: 400 clamp(22px, min(2.5vw, 4.4vh), 56px)/1 Bungee, sans-serif; }
.mcard p { margin-top: .35em; font-size: clamp(16px, min(1.35vw, 2.4vh), 30px); line-height: 1.14; font-weight: 700; }
.mcard q { display: block; quotes: none; margin-top: .55em; padding-top: .55em; border-top: 2px dashed rgba(14, 8, 22, .25); font-size: clamp(14px, min(1.15vw, 2vh), 25px); line-height: 1.12; color: #5a3190; font-weight: 700; }
.mcard q::before { content: "PIN: "; font: 400 .78em/1 Bungee, sans-serif; color: var(--royal); }
.twists { display: flex; align-items: center; gap: clamp(12px, 2vw, 30px); padding: 10px var(--safe-x); background: var(--ink); border-top: 4px solid var(--yellow); }
.twists__label { flex: none; font-weight: 700; line-height: 1.04; font-size: clamp(14px, 1.15vw, 18px); }
.twists__label b { color: var(--yellow); }
.twists__icons { display: flex; gap: clamp(10px, 1.7vw, 26px); overflow: hidden; flex: 1; align-items: center; justify-content: space-between; }
.twist { display: flex; align-items: center; gap: .4em; flex: none; font: 400 clamp(11px, .85vw, 13px)/1.05 Bungee, sans-serif; }
.twist img { width: clamp(30px, 3.2vw, 50px); height: auto; }

/* ---------------------------------------------------------------- PIT STOP */
.pit { background: #0b1136; display: flex; flex-direction: column; gap: clamp(20px, 4vh, 44px); padding-bottom: 0; }
.pit__bg { position: absolute; inset: 0; z-index: -4; overflow: hidden; }
.pit__bg img { width: 100%; height: 100%; object-fit: cover; }
.pit__shade { position: absolute; inset: 0; z-index: -3; background: linear-gradient(180deg, rgba(8, 12, 50, .8) 0%, rgba(8, 12, 50, .3) 44%, rgba(8, 10, 40, .88) 100%); }
.pit__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 3vw; }
.pit__copy { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(8px, 1.4vh, 16px); flex: none; }
.pit__word { --c: var(--yellow); font-size: clamp(50px, 8vw, 138px); }
.pit .lead { max-width: 44ch; }
.belt { flex: 1; min-width: 0; margin-right: calc(var(--safe-x) * -1); overflow: hidden; -webkit-mask: linear-gradient(to right, transparent, #000 12%); mask: linear-gradient(to right, transparent, #000 12%); }
.belt__run { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); gap: 8px 12px; width: max-content; animation: run 60s linear infinite; }
.belt__run img { width: clamp(52px, 6vw, 96px); }
.bays { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 22px); }
.bay { position: relative; background: var(--ink); border-radius: 18px; overflow: hidden; padding: 3px; box-shadow: 0 8px 0 rgba(14, 8, 22, .7); }
.bay img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 15px 15px 0 0; }
.bay__text { padding: clamp(8px, 1vw, 15px) clamp(10px, 1.1vw, 18px) clamp(10px, 1.1vw, 16px); }
.bay h3 { font: 400 clamp(16px, 1.65vw, 28px)/1 Bungee, sans-serif; color: var(--c); }
.bay p { margin-top: .25em; font-size: clamp(14px, 1.15vw, 19px); line-height: 1.12; }
.bay--own { --c: #6dea4a; } .bay--hot { --c: #54d2ff; } .bay--gold { --c: var(--yellow); } .bay--gamble { --c: #ff5fd0; }
.horn { display: flex; align-items: center; justify-content: center; gap: 14px; padding: clamp(8px, 1.4vh, 14px); font: 400 clamp(14px, 1.5vw, 24px)/1 Bungee, sans-serif; background: repeating-linear-gradient(115deg, var(--yellow) 0 34px, var(--ink) 34px 68px); }
.horn b { padding: .3em .7em .24em; background: var(--ink); font-weight: 400; color: var(--cream); border-radius: 5px; text-align: center; line-height: 1.1; }
.door { position: absolute; z-index: 20; inset: 0; display: none; place-items: center; background: #1a1f5a; transition: transform 1.3s cubic-bezier(.7, 0, .2, 1) .45s; }
.motion .door { display: grid; }
.pit.is-seen .door { transform: translateY(-104%); }
.door__slats { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, #d9dcef 0 7px, #b6bada 7px 44px, #8d91bb 44px 48px, #5b5f90 48px 52px); }
.door__sign { position: relative; padding: clamp(24px, 3.6vw, 60px) clamp(32px, 6vw, 96px); background: var(--surface); border: 4px solid var(--ink); border-radius: 22px; box-shadow: 0 12px 0 var(--ink); }
.door__sign .sign { display: block; position: relative; z-index: 2; text-align: center; color: var(--yellow); font-size: clamp(40px, 7.4vw, 124px); }
.door__edge { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(26px, 5vh, 48px); background: repeating-linear-gradient(115deg, var(--yellow) 0 44px, var(--ink) 44px 88px); border-top: 6px solid var(--ink); }
.motion .pit .bay[data-reveal], .motion .pit .pit__copy [data-reveal] { transition-delay: calc(1.05s + var(--i, 0) * 90ms); }

/* ---------------------------------------------------------------- PARTY */
.party { background: #84137f; }
.party__grid { display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); gap: 3vw; align-items: center; }
.party__copy { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(10px, 1.6vh, 18px); }
.party__word { --c: var(--yellow); font-size: clamp(56px, 9.6vw, 164px); }
.party__car { width: min(24vw, 32vh); }
.spot { display: grid; align-items: center; perspective: 1500px; }
.spot__card { grid-area: 1 / 1; width: 100%; display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); gap: clamp(12px, 1.8vw, 28px); align-items: center; padding: clamp(14px, 2vw, 30px); background: var(--cream); color: var(--ink); border: 5px solid var(--ink); border-radius: 30px; box-shadow: 0 14px 0 var(--ink); backface-visibility: hidden; visibility: hidden; opacity: 0; transform: rotateX(-82deg) scale(.94); transform-origin: 50% 50% -60px; transition: transform .28s ease-in, opacity .1s linear .18s, visibility 0s linear .28s; }
.spot__card.is-on { visibility: visible; opacity: 1; transform: none; transition: transform .55s var(--ease-back) .22s, opacity .1s linear .22s, visibility 0s linear .22s; }
.spot__art { position: relative; aspect-ratio: 1; display: grid; place-items: center; background: repeating-conic-gradient(from 0deg at 50% 50%, #ffd21f 0 15deg, #ffc400 15deg 30deg); border-radius: 22px; overflow: hidden; }
.spot__art img { width: 90%; }
.spot__card h3 { font: 400 clamp(24px, min(3vw, 5.4vh), 72px)/1 Bungee, sans-serif; color: #a5129a; }
.spot__card p { margin-top: .4em; font-size: clamp(15px, min(1.3vw, 2.4vh), 30px); line-height: 1.14; font-weight: 700; }
.spot__card q { display: block; quotes: none; margin-top: .55em; padding-top: .55em; border-top: 2px dashed rgba(14, 8, 22, .25); font-size: clamp(14px, 1.1vw, 18px); line-height: 1.12; color: #4a2a84; font-weight: 700; }
.spot__card q::before { content: "PIN: "; font: 400 .78em/1 Bungee, sans-serif; color: var(--royal); }
.spot__card .crayon { display: block; margin: .5em 0 0; white-space: normal; font-size: clamp(16px, 1.3vw, 22px); }
.picker { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(6px, .8vw, 12px); margin-top: clamp(24px, 4vh, 44px); }
.pick { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 7px; background: rgba(40, 6, 72, .72); border: 3px solid var(--ink); border-radius: 14px; }
.pick img { width: min(78%, 92px); transition: scale .3s var(--ease-back), rotate .3s var(--ease-back); }
.pick span { font: 400 clamp(9px, .72vw, 12px)/1.1 Bungee, sans-serif; text-align: center; min-height: 2.2em; display: flex; align-items: center; }
.pick:hover img { scale: 1.12; rotate: -5deg; }
.pick.is-on { background: var(--yellow); color: var(--ink); }

/* ---------------------------------------------------------------- OVERTIME */
.over { background: #14061c; display: grid; grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); align-items: center; gap: 2vw; }
.over__copy { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(10px, 1.8vh, 20px); position: relative; z-index: 2; }
.over__word { color: var(--yellow); }
.slot { position: relative; justify-self: center; margin-right: 12vw; width: min(40vw, 74vh); padding: clamp(10px, 1.4vw, 20px); padding-top: 0; background: linear-gradient(180deg, #7a2494, #4a1266 60%, #2c0b44); border: 5px solid var(--ink); border-radius: 30px 30px 18px 18px; box-shadow: 0 16px 0 var(--ink), 0 0 120px rgba(255, 196, 40, .22); }
.slot__top { position: relative; margin-top: -5px; margin-bottom: clamp(10px, 1.2vw, 18px); margin-inline: calc(clamp(10px, 1.4vw, 20px) * -1 - 5px); padding: clamp(14px, 1.8vw, 28px) 10px; text-align: center; background: linear-gradient(180deg, #ff5a2a, #c9140e); border: 5px solid var(--ink); border-radius: 30px 30px 10px 10px; }
.slot__top span { position: relative; z-index: 4; font: 400 clamp(26px, 3.6vw, 58px)/1 Bungee, sans-serif; color: var(--yellow); -webkit-text-stroke: .1em var(--ink); paint-order: stroke fill; text-shadow: 0 .08em 0 var(--ink); }
.slot__window { background: var(--ink); padding: clamp(6px, .7vw, 10px); border-radius: 14px; }
.slot__labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px 0 8px; text-align: center; font: 400 clamp(10px, .85vw, 13px)/1 Bungee, sans-serif; color: var(--yellow); }
.slot__reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.reel { position: relative; aspect-ratio: 1 / 1.3; overflow: hidden; background: linear-gradient(180deg, #a89f8e, #f7f0dc 22%, #fffaf0 50%, #f7f0dc 78%, #a89f8e); border-radius: 8px; }
.reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 8, 22, .6), transparent 26%, transparent 74%, rgba(14, 8, 22, .6)); pointer-events: none; }
.reel__strip { position: absolute; left: 0; right: 0; top: 0; background-size: 100% auto; background-repeat: repeat-y; will-change: transform; }
.slot__payout { margin-top: clamp(8px, 1vw, 14px); padding: clamp(8px, 1vw, 16px) 8px; min-height: 4.2em; display: flex; flex-direction: column; justify-content: center; text-align: center; background: var(--ink); border-radius: 12px; color: #a48fb6; font: 400 clamp(16px, 2vw, 34px)/1 Bungee, sans-serif; transition: background .25s, color .25s, scale .5s var(--ease-back); }
.slot__payout small { display: block; margin-bottom: .25em; font-size: .46em; }
.slot__payout b { font-weight: 400; }
.slot__payout b.is-long { font-size: .6em; line-height: 1.15; color: var(--cream); }
.slot.is-won .slot__payout { background: linear-gradient(180deg, #ffe263, #ffb400); color: var(--ink); scale: 1.05; }
.slot.is-spinning .slot__payout b { animation: blink .5s steps(1) infinite; }
.slot__lever { position: absolute; left: 100%; top: 30%; width: clamp(24px, 3vw, 46px); height: clamp(16px, 2vw, 28px); background: #2a2230; border: 4px solid var(--ink); border-left: 0; border-radius: 0 8px 8px 0; cursor: pointer; }
.slot__arm { position: absolute; left: 62%; bottom: 40%; width: clamp(10px, 1.1vw, 16px); height: clamp(120px, 15vw, 230px); background: linear-gradient(90deg, #d4d7e2, #f5f6fb 40%, #8c90a6); border: 3px solid var(--ink); border-radius: 8px; transform-origin: 50% 100%; transition: rotate .7s cubic-bezier(.3, 1.8, .5, 1); rotate: -4deg; }
.slot__arm::before { content: ""; position: absolute; left: 50%; top: -1.3em; width: 2.2em; height: 2.2em; margin-left: -1.1em; font-size: clamp(16px, 1.5vw, 24px); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8a7a, #e8232f 55%, #8e0d17); border: 3px solid var(--ink); }
.slot__lever:hover .slot__arm { rotate: 6deg; }
.slot__lever.is-pulled .slot__arm { rotate: 100deg; transition: rotate .22s ease-in; }
.over__dippy { position: absolute; right: 1.5vw; bottom: 0; height: min(52vh, 34vw); z-index: 3; pointer-events: none; }
.over__dippy img { height: 100%; width: auto; max-width: none; margin-bottom: -2%; }
.over__dippy .bubble { position: absolute; right: 44%; top: -10%; white-space: nowrap; }
.over__dippy .bubble::after { left: 76%; }

/* ---------------------------------------------------------------- HOSTS */
.hosts { background: #1d1370; padding-bottom: 0; }
.hosts__title { text-align: center; color: var(--yellow); margin-bottom: clamp(16px, 3vh, 30px); }
.host-row { position: relative; display: grid; align-items: center; gap: clamp(16px, 4vw, 80px); padding-bottom: clamp(30px, 6vh, 60px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.host-row::after { content: ""; position: absolute; z-index: -1; left: calc(var(--safe-x) * -1); right: calc(var(--safe-x) * -1); bottom: 0; height: 22%; border-top: 6px solid var(--yellow); background: repeating-linear-gradient(115deg, var(--yellow) 0 30px, var(--ink) 30px 60px) 0 0 / 100% 22px no-repeat, radial-gradient(ellipse at 50% 0, #4b6ee0, #2230a0 60%, #151a6a); }
.host { position: relative; height: min(78vh, 52vw); width: min-content; aspect-ratio: .55; justify-self: center; }
.host__figure { position: relative; display: block; width: 100%; height: 100%; }
.host__pose { position: absolute; left: 50%; bottom: 0; translate: -50% 0; height: 100%; width: auto; max-width: none; opacity: 0; transition: opacity .12s; }
.host__pose.is-on { opacity: 1; }
.host__figure:hover .host__pose.is-on { animation: wiggle .5s var(--ease-out); }
@keyframes wiggle { 25% { rotate: -2.5deg; } 60% { rotate: 2deg; } }
.host__bubble { position: absolute; z-index: 4; top: 0; left: 82%; width: max-content; max-width: 25ch; }
.host-row--pin .host__bubble::after { left: 16%; }
.host--dippy .host__bubble { left: auto; right: 82%; }
.host--dippy .host__bubble::after { left: 80%; }
.card-id { position: relative; z-index: 3; width: 100%; max-width: 76vh; justify-self: center; padding: clamp(14px, 1.8vw, 30px); color: var(--ink); background: var(--cream); border: 5px solid var(--ink); border-radius: 26px; box-shadow: 0 14px 0 var(--ink); margin-bottom: 8%; }
.card-id h3 { margin-top: .22em; font: 400 clamp(26px, min(3.2vw, 5.8vh), 76px)/1 Bungee, sans-serif; }
.card-id--pin h3 { color: var(--royal); } .card-id--dippy h3 { color: var(--red); }
.card-id h3 .crayon { font-size: .42em; vertical-align: middle; }
.card-id header p { margin-top: .3em; font-size: clamp(16px, min(1.4vw, 2.5vh), 32px); line-height: 1.12; font-weight: 700; }
.card-id dl { margin-top: .8em; font-size: clamp(15px, min(1.2vw, 2.2vh), 28px); line-height: 1.12; }
.card-id dl div { display: grid; grid-template-columns: 8.2em 1fr; gap: .6em; padding: .34em 0; border-top: 2px dashed rgba(14, 8, 22, .22); }
.card-id dt { font: 400 .72em/1.5 Bungee, sans-serif; color: #5a3190; }
.card-id .crayon { white-space: normal; }
.card-id__sig { width: 38%; max-height: 72px; object-fit: contain; object-position: left; margin-top: .6em; }

/* ---------------------------------------------------------------- ROSTER */
.cars { --car-h: clamp(170px, 30vh, 320px); padding-bottom: clamp(30px, 5vh, 50px); background: #272a48; }
.cars__sky { position: absolute; left: 0; right: 0; top: 0; height: 66%; z-index: -3; background: linear-gradient(180deg, #38a5ea 0%, #8ad7f5 70%, #ffe6b0 100%); }
.cars__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 3vw; margin-bottom: clamp(16px, 3vh, 30px); }
.cars__head .lead { max-width: 44ch; margin-top: .3em; }
.cars__arrows { display: flex; gap: 10px; }
.arrow { position: relative; width: 58px; height: 58px; background: var(--orange); border: 4px solid var(--ink); border-radius: 14px; box-shadow: 0 5px 0 var(--ink); transition: translate .2s, box-shadow .2s, background .2s; }
.arrow::after { content: ""; position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; border: solid var(--ink); border-width: 5px 5px 0 0; translate: -68% -50%; rotate: 45deg; }
.arrow--prev::after { translate: -32% -50%; rotate: 225deg; }
.arrow:hover { background: var(--yellow); }
.arrow:active { translate: 0 4px; box-shadow: 0 1px 0 var(--ink); }
.cars__track { position: relative; }
.cars__stands { position: absolute; z-index: -2; left: 0; right: 0; top: calc(var(--car-h) * .25); height: calc(var(--car-h) * .85); background:
    radial-gradient(circle at 5px 5px, #fff 0 3px, transparent 3.5px) 0 0 / 17px 17px,
    radial-gradient(circle at 5px 5px, #ff5fa8 0 3px, transparent 3.5px) 7px 7px / 21px 17px,
    radial-gradient(circle at 5px 5px, var(--yellow) 0 3px, transparent 3.5px) 3px 11px / 25px 17px,
    linear-gradient(#3540a8, #2a2f8c); border-top: 8px solid #fff; filter: saturate(.75); }
.cars__stands::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(53, 64, 168, .55), rgba(42, 47, 140, .25)); }
.road { position: absolute; z-index: -1; left: 0; right: 0; top: calc(var(--car-h) + 8px); bottom: calc(clamp(30px, 5vh, 50px) * -1); background: linear-gradient(180deg, #363a5c, #272a48); border-top: 10px solid var(--ink); }
.road::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px; background: repeating-linear-gradient(90deg, #fff 0 60px, var(--red) 60px 120px); }
.road i { position: absolute; left: 0; right: 0; bottom: 10px; height: 10px; background: repeating-linear-gradient(90deg, var(--yellow) 0 90px, transparent 90px 180px); }
.parade { display: flex; align-items: stretch; gap: clamp(20px, 3vw, 54px); padding: 0 var(--safe-x) 40px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--safe-x); scrollbar-width: none; cursor: grab; touch-action: pan-x pan-y; outline-offset: -6px; }
.parade::-webkit-scrollbar { display: none; }
.parade.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.pcar { flex: none; width: clamp(250px, 26vw, 460px); display: flex; flex-direction: column; scroll-snap-align: start; }
.pcar__img { height: var(--car-h); display: flex; align-items: flex-end; justify-content: center; transform-origin: 50% 100%; transition: translate .3s var(--ease-back), rotate .3s var(--ease-back); pointer-events: none; }
.pcar:hover .pcar__img { translate: 0 -5%; rotate: -2deg; }
.pcar__img img { max-height: 100%; width: auto; }
.pcar__plate { flex: 1; margin-top: 34px; padding: clamp(10px, 1vw, 16px) clamp(12px, 1.2vw, 20px); background: var(--cream); color: var(--ink); border: 4px solid var(--ink); border-radius: 16px; box-shadow: 0 7px 0 var(--ink); }
.pcar__plate h3 { font: 400 clamp(19px, 1.9vw, 32px)/1 Bungee, sans-serif; }
.pcar__cls { display: block; margin-top: .22em; color: #a5129a; font: 400 clamp(10px, .85vw, 13px)/1 Bungee, sans-serif; }
.pcar__plate p { margin-top: .4em; font-size: clamp(14px, 1.1vw, 18px); line-height: 1.12; }

/* ---------------------------------------------------------------- PRIZES */
.prizes { background: var(--yellow); display: flex; flex-direction: column; gap: clamp(16px, 3vh, 30px); }
.prizes__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 3vw; }
.prizes__head .lead { max-width: 52ch; }
.wall { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: clamp(5px, .7vw, 12px); }
.prize { position: relative; aspect-ratio: 1; display: grid; place-items: center; background: var(--surface); border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; }
.prize img { width: 72%; margin-bottom: 10%; transition: scale .35s var(--ease-back), rotate .35s var(--ease-back); }
.prize span { position: absolute; left: 0; right: 0; bottom: 0; padding: .2em .1em; text-align: center; font: 400 clamp(7px, .66vw, 11px)/1.15 Bungee, sans-serif; color: var(--ink); background: var(--yellow); }
.prize:hover img { scale: 1.18; rotate: -8deg; }

/* ---------------------------------------------------------------- ARENAS */
.arenas { background: #1763c4; }
.arenas__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 3vw; }
.arenas__head .lead { max-width: 40ch; }
.ring-wrap { position: relative; height: clamp(300px, min(50vh, 42vw), 620px); margin-inline: calc(var(--safe-x) * -1); perspective: 1500px; perspective-origin: 50% 42%; display: grid; place-items: center; }
.ring { position: relative; width: clamp(240px, min(27vw, 52vh), 760px); aspect-ratio: 16 / 9; transform-style: preserve-3d; animation: ring-spin 90s linear infinite; }
.ring-wrap:hover .ring { animation-play-state: paused; }
@keyframes ring-spin { from { transform: translateZ(var(--rz, -1500px)) rotateX(-4deg) rotateY(0deg); } to { transform: translateZ(var(--rz, -1500px)) rotateX(-4deg) rotateY(-360deg); } }
.arena-card { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 4px solid var(--ink); border-radius: 18px; overflow: hidden; background: var(--ink); box-shadow: 0 10px 0 var(--ink); }
.arena-card img { width: 100%; height: 100%; object-fit: cover; }
.arena-card span { position: absolute; left: 0; right: 0; bottom: 0; padding: .3em .4em .2em; text-align: center; font: 400 clamp(12px, 1.1vw, 18px)/1.1 Bungee, sans-serif; background: rgba(14, 8, 22, .82); }

/* ---------------------------------------------------------------- CTA */
.cta { min-height: 100vh; min-height: 100svh; background: #1d0d38; display: grid; place-items: center; text-align: center; border-top: 0; }
.cta__floor { position: absolute; left: 50%; bottom: -66vh; width: 150vh; height: 150vh; margin-left: -75vh; transform: rotateX(74deg); z-index: -1; }
.cta__host { position: absolute; bottom: 2vh; height: min(58vh, 40vw); aspect-ratio: .52; z-index: 1; pointer-events: none; }
.cta__host img { position: absolute; left: 50%; bottom: 0; translate: -50% 0; height: 100%; width: auto; max-width: none; }
.cta__host--pin { left: 4vw; } .cta__host--dippy { right: 4vw; }
.cta__body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2.2vh, 26px); margin-top: -8vh; }
.cta__logo { width: min(56vw, 82vh); }
.motion .cta.is-seen .cta__logo { animation: slam .9s var(--ease-back) .55s both; }
.cta__quote { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6em; font-size: clamp(22px, 2.6vw, 42px); font-weight: 800; font-style: italic; line-height: 1.05; text-shadow: 0 3px 0 var(--ink); }
.cta__quote img { height: 1.5em; width: auto; filter: brightness(0) invert(1); }
.cta__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cta .btn--big span { font-size: clamp(20px, 2vw, 34px); padding: .78em 1.7em .72em; }
.cta__small { padding: .4em .9em .34em; background: rgba(14, 6, 24, .86); border-radius: 8px; font-size: clamp(15px, 1.25vw, 20px); }
.curtain { display: none; position: absolute; z-index: 10; top: 0; bottom: 0; width: 52%; background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(255,255,255,.08) 3%, rgba(0,0,0,.4) 7%) 0 0 / 7.5vw 100%, linear-gradient(180deg, #d91c2c, #9c0d1c); box-shadow: 0 0 60px rgba(0, 0, 0, .6); transition: transform 1.6s cubic-bezier(.7, 0, .2, 1) .15s; }
.motion .curtain { display: block; }
.curtain--l { left: 0; } .curtain--r { right: 0; }
.cta.is-seen .curtain--l { transform: translateX(-104%); }
.cta.is-seen .curtain--r { transform: translateX(104%); }
.curtain__fringe { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: repeating-linear-gradient(90deg, var(--yellow) 0 8px, #b98800 8px 12px); }

.foot { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 22px; padding: 26px var(--safe-x); background: var(--ink); border-top: 4px solid var(--yellow); font-size: 15px; }
.foot img { width: 120px; }
.foot small { opacity: .62; font-size: 14px; }

/* =====================================================================================
   Without motion: nothing moves, and everything is simply there.
   ===================================================================================== */
html:not(.motion) { scroll-behavior: auto; }
html:not(.motion) *, html:not(.motion) *::before, html:not(.motion) *::after { animation: none !important; transition: none !important; }
html:not(.motion) .ring-wrap { height: auto; perspective: none; margin-inline: 0; margin-top: 30px; display: block; }
html:not(.motion) .ring { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; width: 100%; max-width: none; aspect-ratio: auto; transform: none; }
html:not(.motion) .arena-card { position: relative; aspect-ratio: 16 / 9; }

/* =====================================================================================
   Small screens and portrait
   ===================================================================================== */
@media (max-width: 1100px) {
  .topbar__nav { display: none; }
  .topbar .btn { margin-left: auto; }
  .rail { display: none; }
}

@media (max-width: 820px), (orientation: portrait) {
  .onair__channel { display: none; }
  .topbar { gap: 10px; }

  .hero__logo { width: min(86vw, 640px); }
  .hero__hosted { width: min(66vw, 460px); }
  .hero__tag { font-size: clamp(19px, 5vw, 30px); }
  .hero__host { height: 39vh; bottom: 7vh; }
  .hero__host--pin { left: -5vw; } .hero__host--dippy { right: -5vw; }
  .hero__car { scale: .85; }
  .hero__car:hover { scale: .9; }
  .hero__car--1 { left: 8%; bottom: 25%; } .hero__car--2 { left: 37%; bottom: 33%; } .hero__car--3 { left: 33%; bottom: 8%; width: 36vw; }
  .hero__car--4 { display: none; } .hero__car--5 { right: 9%; bottom: 25%; }
  .hero__floor { bottom: -26vh; width: 110vh; height: 110vh; margin-left: -55vh; }
  .hero__flyer { width: 44vw; }
  @keyframes fly-arc { 0% { translate: 0 52vh; rotate: 16deg; } 12% { translate: 0 30vh; rotate: 0deg; } 24%, 100% { translate: 0 56vh; rotate: -16deg; } }

  .show__grid { grid-template-columns: 1fr; padding-bottom: 28px; }
  .pop { width: 92px; } .pop span { font-size: 19px; }
  .pop--flip { left: -2%; top: -12%; } .pop--bam { right: -2%; bottom: -10%; }
  .show__pin { margin-bottom: -28px; }
  .show__pin img { height: 210px; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stats li:nth-child(4) { border-left: 0; }

  .ways__title br { display: inline; }
  .ways__cards { grid-template-columns: 1fr; gap: 14px; width: min(100%, 460px); }
  .way { aspect-ratio: 2.6 / 1; }
  .way__front { padding: 10px 12px 10px 40%; align-items: flex-start; justify-content: center; text-align: left; }
  .way__car { left: 3%; width: 36%; top: 50%; translate: 0 -50%; }
  .way:hover .way__car { translate: 0 -50%; rotate: 0deg; }
  .way__ch { position: static; translate: 0 0; margin-bottom: .4em; }
  .way__name { font-size: clamp(26px, 8vw, 40px); }

  .stock__grid { grid-template-columns: 1fr; gap: 16px; }
  .stock__tabs { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; }
  .stock__tabs button.is-on { translate: 0 0; }
  .mcard { width: min(80vw, 420px); }
  .twist span { display: none; }

  .pit__top { display: block; }
  .pit__word { font-size: clamp(46px, 14vw, 90px); }
  .belt { display: none; }
  .bays { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bay p { font-size: 14px; }

  .party__grid { grid-template-columns: 1fr; gap: 16px; }
  .party__word { font-size: clamp(50px, 16vw, 100px); }
  .party__car { display: none; }
  .spot__card { grid-template-columns: 1fr; gap: 8px; }
  .spot__art { aspect-ratio: 2 / 1; } .spot__art img { width: auto; height: 90%; }
  .picker { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .over { grid-template-columns: 1fr; padding-bottom: 190px; gap: 22px; }
  .over .note { display: none; }
  .over__word br { display: none; }
  .slot { width: min(76vw, 460px); margin: 0 auto 0 0; justify-self: start; }
  .over__dippy { height: 180px; right: 2vw; }
  .over__dippy .bubble { top: -18%; right: 50%; font-size: 15px; }

  .hosts { padding-bottom: 0; }
  .host-row { grid-template-columns: 1fr; gap: 14px; padding-bottom: 28px; }
  .host-row::after { height: 12%; }
  .host-row--dippy .card-id { order: 2; }
  .host { height: min(50vh, 92vw); justify-self: start; margin-left: 2vw; }
  .host--dippy { justify-self: end; margin: 0 2vw 0 0; }
  .host__bubble { top: 2%; left: 66%; max-width: 19ch; font-size: 14px; }
  .host--dippy .host__bubble { right: 62%; }
  .card-id { max-width: none; margin-bottom: 0; }
  .card-id dl { font-size: 14px; }
  .card-id__sig { display: none; }

  .pcar { width: 74vw; scroll-snap-align: center; }
  .cars__arrows { display: none; }

  .wall { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .prize span { font-size: 7px; }

  .ring { width: 58vw; }
  .ring-wrap { height: 44vw; min-height: 220px; }

  .cta__host { height: 30vh; bottom: 8vh; }
  .cta__host--pin { left: -4vw; } .cta__host--dippy { right: -4vw; }
  .cta__logo { width: 86vw; }
  .cta__body { margin-top: -18vh; }
  .foot { flex-direction: column; text-align: center; }
}