:root {
  /* DESIGN FONT TOKENS: Bungee marquee; Space Grotesk** Groteskk for body text; IBM Plex Mono for timestamp strips. */
  --ink: #14121F;
  --cream: #FFF2C7;
  --cyan: #22D7E8;
  --magenta: #FF3FA4;
  --yellow: #FFD93D;
  --orange: #FF5A36;
  --mint: #7CFFB2;
  --violet: #6B42F5;
  --display: Bungee, Impact, Haettenschweiler, 'Arial Black', sans-serif;
  --body: 'Space Grotesk', Inter, ui-sans-serif, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
  --scribble: Gaegu, 'Comic Sans MS', cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--cream);
  background: var(--ink);
  font-family: var(--body);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,63,164,.28) 0 8%, transparent 9%),
    radial-gradient(circle at 82% 8%, rgba(34,215,232,.25) 0 9%, transparent 10%),
    linear-gradient(135deg, transparent 0 47%, rgba(255,217,61,.12) 48% 52%, transparent 53%),
    var(--ink);
  pointer-events: none;
  z-index: -3;
}

.glass-scratches {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .36;
  background:
    linear-gradient(102deg, transparent 12%, rgba(255,242,199,.18) 12.2%, transparent 12.8%),
    linear-gradient(73deg, transparent 62%, rgba(255,242,199,.16) 62.2%, transparent 62.7%),
    repeating-radial-gradient(circle at 30% 40%, transparent 0 12px, rgba(255,242,199,.05) 13px 14px);
  mix-blend-mode: screen;
}

.cursor-glow {
  position: fixed;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,255,178,.28), transparent 64%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 4;
}

.cabinet-lights {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 12px;
  z-index: 30;
  font: 700 10px/1 var(--mono);
  text-transform: uppercase;
}
.light {
  color: var(--cream);
  text-decoration: none;
  display: flex;
  gap: 7px;
  align-items: center;
  opacity: .6;
}
.light span {
  width: 16px;
  height: 16px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 3px 3px 0 var(--violet);
}
.light.active { opacity: 1; color: var(--mint); }
.light.active span { background: var(--mint); box-shadow: 0 0 18px var(--mint), 3px 3px 0 var(--magenta); }

.pinball-cabinet {
  width: min(1180px, calc(100vw - 24px));
  margin: 12px auto 60px;
  border: 14px solid var(--cream);
  border-radius: 42px 42px 120px 120px;
  background:
    linear-gradient(90deg, rgba(255,242,199,.07) 0 3px, transparent 3px 84px),
    var(--ink);
  box-shadow: 0 0 0 8px var(--magenta), 18px 18px 0 var(--violet), inset 0 0 90px rgba(34,215,232,.12);
  overflow: hidden;
  position: relative;
}

.scene {
  min-height: 100vh;
  position: relative;
  padding: clamp(34px, 6vw, 82px);
  isolation: isolate;
  border-bottom: 8px dashed rgba(255,242,199,.38);
  overflow: hidden;
}
.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(var(--cream) 1px, transparent 1.6px) 0 0/18px 18px;
  opacity: .12;
  z-index: -2;
}
.scene::after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  right: -80px;
  bottom: 30px;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--cyan) 0 12deg, var(--yellow) 12deg 24deg, var(--magenta) 24deg 36deg);
  opacity: .38;
  z-index: -1;
}

.cabinet-top {
  position: relative;
  margin: 0 auto 48px;
  padding: 30px 24px;
  border: 8px solid var(--ink);
  background: var(--yellow);
  color: var(--ink);
  transform: perspective(900px) rotateX(6deg);
  box-shadow: 0 14px 0 var(--orange), 0 24px 0 var(--violet);
}
.marquee {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(48px, 11vw, 138px);
  line-height: .9;
  letter-spacing: .02em;
  text-align: center;
  text-shadow: 5px 5px 0 var(--cyan), 10px 10px 0 var(--magenta);
}
.marquee-reflection {
  margin: 5px 0 0;
  font-family: var(--display);
  font-size: clamp(26px, 6vw, 70px);
  line-height: .8;
  text-align: center;
  transform: scaleY(-1) skewX(-12deg);
  opacity: .23;
}
.marquee-bulbs, .marquee-bulbs::before {
  content: "";
  position: absolute;
  inset: -21px 14px auto;
  height: 18px;
  background: radial-gradient(circle, var(--mint) 0 5px, transparent 6px) 0 0/36px 18px;
  animation: bulbs 1s steps(2) infinite;
}
.marquee-bulbs::before { inset: auto 0 -21px; animation-delay: .5s; }

.score-window {
  position: absolute;
  right: clamp(28px, 7vw, 100px);
  top: 238px;
  background: var(--ink);
  color: var(--mint);
  border: 5px solid var(--cyan);
  padding: 14px 20px;
  transform: rotate(3deg);
  box-shadow: 7px 7px 0 var(--magenta);
}
.score-window strong { display: block; font: 900 34px/1 var(--mono); }
.mono { font-family: var(--mono); letter-spacing: .08em; }

.chapter-label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  color: var(--ink);
  background: var(--cream);
  border: 4px solid var(--ink);
  box-shadow: 7px 7px 0 var(--violet);
  font: 900 18px/1 var(--display);
  text-transform: uppercase;
}
.chapter-label span { color: var(--magenta); font-size: 1.45em; }
.tilt-left { transform: rotate(-5deg); }
.tilt-right { transform: rotate(5deg); }

h2 {
  max-width: 760px;
  margin: 42px 0 18px;
  font-family: var(--display);
  font-size: clamp(42px, 8vw, 96px);
  line-height: .92;
  color: var(--yellow);
  text-shadow: 5px 5px 0 var(--magenta), 9px 9px 0 var(--violet);
}
.scene-copy {
  max-width: 560px;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.25;
  color: var(--cream);
}
.intro-copy { margin-left: 7vw; transform: rotate(-2deg); }

.rail { position: absolute; inset: 24% 4% auto; width: 86%; height: 55%; overflow: visible; z-index: -1; }
.rail path, .return-loop path { fill: none; stroke: var(--cyan); stroke-width: 18; stroke-linecap: round; filter: drop-shadow(7px 7px 0 var(--violet)); }
.rail text, .return-loop text { font: 700 22px var(--mono); fill: var(--cream); text-transform: uppercase; }

.speech-token {
  position: absolute;
  right: 118px;
  bottom: 180px;
  width: 74px;
  height: 62px;
  border-radius: 50% 50% 50% 12px;
  background: var(--magenta);
  color: var(--cream);
  border: 5px solid var(--ink);
  box-shadow: 8px 8px 0 var(--violet);
  display: grid;
  place-items: center;
  font: 900 40px/1 var(--display);
  z-index: 5;
}
.speech-token.launched { animation: tokenRide 2.8s cubic-bezier(.16,.9,.22,1) both; }

.plunger {
  position: absolute;
  right: 34px;
  bottom: 90px;
  width: 72px;
  height: 290px;
  border: 6px solid var(--cream);
  border-radius: 34px;
  display: grid;
  place-items: end center;
  padding-bottom: 12px;
  background: rgba(255,242,199,.06);
}
.spring { position: absolute; top: 30px; width: 28px; height: 160px; background: repeating-linear-gradient(0deg, var(--cyan) 0 7px, transparent 7px 16px); }
.plunger button, .playback-button {
  border: 5px solid var(--ink);
  background: var(--orange);
  color: var(--cream);
  box-shadow: 5px 5px 0 var(--violet);
  font: 900 16px/1 var(--display);
  padding: 14px 10px;
  cursor: pointer;
}
.plunger.pulled button { transform: translateY(38px); }

.flipper { position: absolute; bottom: 42px; width: 190px; height: 34px; background: var(--mint); border: 5px solid var(--ink); border-radius: 30px; box-shadow: 6px 6px 0 var(--magenta); }
.left-flipper { left: 27%; transform: rotate(22deg); }
.right-flipper { right: 27%; transform: rotate(-22deg); }
.ping { position: absolute; left: 10%; top: 46%; font: 900 clamp(48px, 8vw, 100px)/1 var(--display); color: var(--cyan); text-shadow: 6px 6px 0 var(--ink), 10px 10px 0 var(--magenta); transform: rotate(-12deg); animation: wobble 1.8s infinite; }
.ticket-strip { position: absolute; left: 10%; bottom: 16%; padding: 12px 22px; background: var(--cream); color: var(--ink); font: 700 14px var(--mono); transform: rotate(6deg); }

.chorus-scene { background: linear-gradient(150deg, transparent 0 57%, rgba(107,66,245,.35) 58% 100%); }
.bumper-field { position: relative; min-height: 430px; margin-top: 30px; }
.bumper {
  position: absolute;
  border: 7px solid var(--ink);
  border-radius: 50%;
  width: 176px;
  height: 148px;
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 10px 10px 0 var(--violet), inset -12px -12px 0 rgba(255,90,54,.25);
  font: 900 22px/1 var(--display);
  cursor: pointer;
}
.bumper:nth-child(1) { left: 8%; top: 70px; }
.bumper:nth-child(2) { left: 38%; top: 10px; }
.bumper:nth-child(3) { left: 63%; top: 180px; }
.bumper:nth-child(4) { left: 24%; top: 260px; }
.bumper.big { width: 220px; height: 190px; background: var(--magenta); color: var(--cream); }
.bumper.mint { background: var(--mint); }
.bumper.hit { animation: bumperHit .45s ease; }
.bumper::after { content: attr(data-burst); position: absolute; inset: -42px auto auto 55%; color: var(--cyan); text-shadow: 4px 4px 0 var(--ink); opacity: 0; }
.bumper.hit::after { animation: burst .55s ease; }
.chorus-ribbons { display: flex; flex-wrap: wrap; gap: 12px; transform: rotate(-3deg); }
.chorus-ribbons span, .quiet-notes b { padding: 10px 16px; background: var(--cyan); color: var(--ink); border: 4px solid var(--ink); box-shadow: 5px 5px 0 var(--magenta); font-family: var(--scribble); font-size: 24px; }
.megaphone, .bubble-face { position: absolute; display: grid; place-items: center; border: 5px solid var(--ink); box-shadow: 6px 6px 0 var(--violet); }
.megaphone { right: 10%; top: 16%; width: 120px; height: 80px; background: var(--orange); font: 900 42px var(--display); transform: rotate(12deg); }
.bubble-face { border-radius: 50% 50% 12px 50%; background: var(--cream); color: var(--ink); font: 900 28px var(--display); }
.bubble-one { right: 20%; bottom: 18%; width: 80px; height: 70px; }
.bubble-two { right: 36%; bottom: 12%; width: 64px; height: 58px; }
.bubble-three { right: 12%; bottom: 34%; width: 70px; height: 62px; background: var(--mint); }

.stamp-scene { background: linear-gradient(68deg, rgba(255,90,54,.28) 0 42%, transparent 43%); }
.stamp-table { position: relative; min-height: 500px; margin-top: 20px; }
.stamp-pad { position: absolute; left: 8%; bottom: 34px; width: 310px; height: 92px; background: var(--magenta); border: 7px solid var(--ink); border-radius: 50%; box-shadow: 10px 10px 0 var(--violet); }
.stamp-handle { position: absolute; left: 18%; top: 58px; width: 126px; height: 210px; border: 7px solid var(--ink); border-radius: 60px 60px 18px 18px; background: var(--orange); color: var(--cream); box-shadow: 8px 8px 0 var(--violet); cursor: pointer; transform-origin: bottom center; }
.stamp-handle span { writing-mode: vertical-rl; font: 900 28px var(--display); }
.stamp-handle.slam { animation: slam .55s ease; }
.paper-note { position: absolute; right: 7%; top: 48px; width: min(520px, 54vw); min-height: 315px; background: var(--cream); color: var(--ink); border: 7px solid var(--ink); padding: 34px; transform: rotate(4deg); box-shadow: 12px 12px 0 var(--cyan); }
.paper-note p { font-size: clamp(24px, 4vw, 44px); line-height: 1; margin: 0 0 28px; font-weight: 900; }
.crossed { text-decoration: line-through var(--orange) 8px; opacity: .75; }
.fixed { font-family: var(--scribble); color: var(--violet); }
.stamp-mark { display: inline-block; border: 7px solid var(--orange); color: var(--orange); padding: 10px 18px; font: 900 30px/1 var(--display); transform: rotate(-9deg) scale(.2); opacity: 0; }
.stamp-mark.visible { animation: stampAppear .35s ease forwards; }
.stamp-cloud { position: absolute; right: 10%; bottom: 10%; display: grid; gap: 10px; font: 900 22px var(--display); color: var(--orange); }
.stamp-cloud span { border: 4px solid currentColor; padding: 8px 12px; transform: rotate(var(--r, -4deg)); }
.stamp-cloud span:nth-child(2) { --r: 6deg; color: var(--mint); }
.stamp-cloud span:nth-child(3) { --r: -9deg; color: var(--yellow); }

.revision-scene { background: linear-gradient(115deg, transparent 0 35%, rgba(124,255,178,.18) 36% 60%, transparent 61%); }
.revision-lane { position: relative; margin-top: 70px; min-height: 420px; }
.receipt { width: min(520px, 72vw); background: var(--cream); color: var(--ink); border: 5px solid var(--ink); padding: 22px; box-shadow: 9px 9px 0 var(--violet); }
.receipt.old { transform: rotate(-5deg); }
.receipt.new { position: absolute; right: 6%; top: 160px; transform: rotate(4deg); }
.receipt p { margin: 8px 0; font: 900 clamp(26px, 4vw, 45px)/1.03 var(--body); }
.receipt.new i { display: block; width: 0; height: 8px; background: var(--mint); margin-top: 10px; box-shadow: 0 5px 0 var(--cyan); transition: width .9s ease; }
.receipt.new.draw i { width: 94%; }
.pencil { position: absolute; left: 43%; top: 112px; width: 260px; height: 32px; background: var(--yellow); border: 4px solid var(--ink); transform: rotate(-22deg); box-shadow: 6px 6px 0 var(--magenta); }
.pencil::after { content: ""; position: absolute; right: -35px; top: -4px; border-left: 38px solid var(--orange); border-top: 19px solid transparent; border-bottom: 19px solid transparent; }
.pencil.move { animation: pencilMove 1.2s ease both; }
.quiet-notes { display: flex; gap: 14px; flex-wrap: wrap; }
.eye-icon { position: absolute; right: 14%; top: 11%; width: 120px; height: 70px; border: 6px solid var(--cyan); border-radius: 50%; background: var(--cream); box-shadow: 7px 7px 0 var(--violet); }
.eye-icon span { position: absolute; inset: 18px 44px; border-radius: 50%; background: var(--ink); animation: blink 2.6s infinite; }

.return-scene { background: linear-gradient(160deg, rgba(34,215,232,.2), transparent 45%), linear-gradient(25deg, transparent 0 58%, rgba(255,63,164,.28) 59%); border-bottom: 0; }
.loop-machine { position: relative; min-height: 470px; }
.return-loop { position: absolute; left: 5%; top: 10px; width: min(620px, 70vw); height: 420px; overflow: visible; }
.prize-capsules { position: absolute; right: 4%; bottom: 40px; display: flex; gap: 16px; flex-wrap: wrap; max-width: 480px; }
.capsule { width: 142px; height: 142px; border-radius: 50%; border: 7px solid var(--ink); background: linear-gradient(90deg, var(--mint) 0 50%, var(--cream) 51%); color: var(--ink); box-shadow: 8px 8px 0 var(--violet); cursor: pointer; transform-style: preserve-3d; transition: transform .5s ease; }
.capsule span { font: 900 20px/1 var(--display); }
.capsule.flip { transform: rotateY(180deg) rotate(-8deg); background: linear-gradient(90deg, var(--yellow) 0 50%, var(--magenta) 51%); }
.playback-button { display: block; margin: 20px auto 0; width: min(440px, 80vw); padding: 24px; font-size: clamp(30px, 5vw, 58px); background: var(--mint); color: var(--ink); box-shadow: 9px 9px 0 var(--magenta), 17px 17px 0 var(--violet); }
.playback-button.play { animation: playback .8s ease; }
.final-ticket { margin: 44px auto 0; width: fit-content; max-width: 90%; padding: 14px 20px; color: var(--ink); background: var(--cream); font: 800 13px var(--mono); transform: rotate(-2deg); }

@keyframes bulbs { 50% { filter: hue-rotate(95deg) brightness(1.4); } }
@keyframes wobble { 50% { transform: rotate(-7deg) scale(1.06); } }
@keyframes tokenRide {
  0% { right: 118px; bottom: 180px; transform: scale(.8) rotate(0); }
  18% { right: 22%; bottom: 56%; transform: scale(1.15) rotate(95deg); }
  38% { right: 50%; bottom: 63%; transform: scale(.9) rotate(190deg); }
  58% { right: 70%; bottom: 42%; transform: scale(1.16) rotate(270deg); }
  82% { right: 42%; bottom: 18%; transform: scale(.94) rotate(340deg); }
  100% { right: 26%; bottom: 30%; transform: scale(1) rotate(390deg); }
}
@keyframes bumperHit { 50% { transform: scale(1.16) rotate(-6deg); filter: brightness(1.22); } }
@keyframes burst { 0% { opacity: 0; transform: translateY(18px) scale(.4); } 45%, 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-28px) scale(1.4) rotate(8deg); } }
@keyframes slam { 45% { transform: translateY(170px) rotate(-4deg) scaleY(.75); } 70% { transform: translateY(70px) rotate(3deg); } }
@keyframes stampAppear { to { opacity: 1; transform: rotate(-9deg) scale(1); } }
@keyframes pencilMove { 0% { transform: translateX(-90px) rotate(-22deg); } 70% { transform: translateX(160px) rotate(-18deg); } 100% { transform: translateX(118px) rotate(-22deg); } }
@keyframes blink { 0%, 44%, 54%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.08); } }
@keyframes playback { 30% { transform: translateY(12px) scale(.98); } 65% { transform: translateY(-16px) rotate(-2deg); } }

@media (max-width: 760px) {
  .pinball-cabinet { width: 100%; margin: 0; border-width: 8px; border-radius: 0 0 70px 70px; }
  .scene { padding: 28px 22px 96px; }
  .cabinet-lights { right: 7px; font-size: 0; }
  .score-window { position: relative; top: auto; right: auto; margin: 22px 0; width: fit-content; }
  .plunger { right: 10px; height: 210px; }
  .speech-token { right: 78px; }
  .bumper:nth-child(n) { position: relative; left: auto; top: auto; margin: 12px; display: inline-grid; }
  .bumper-field { min-height: auto; }
  .paper-note { position: relative; right: auto; top: 260px; width: 100%; }
  .stamp-table { min-height: 720px; }
  .receipt.new { position: relative; right: auto; top: 40px; }
  .return-loop { opacity: .55; }
  .prize-capsules { position: relative; right: auto; bottom: auto; margin-top: 230px; }
}