:root {
  --bg: #0B0614;
  --neon-pink: #FF2BD6;
  --neon-pink-core: #FFE6FA;
  --neon-amber: #FFB000;
  --amber-core: #FFD27A;
  --tube-off: #2A1830;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(70vw 50vh at 50% 45%, rgba(255, 43, 214, .10), transparent 70%),
    var(--bg);
  overflow: hidden;
}

/* wet street: the sign up top, its reflection rippling in the road below */
main {
  min-height: 100svh;
  display: flex; flex-direction: column;
  text-align: center;
}
.sky {
  position: relative;
  flex: 1;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 16px 16px clamp(10px, 1.6vw, 22px);
  /* faint nebula clouds behind the stars */
  background:
    radial-gradient(40% 35% at 18% 22%, rgba(120, 60, 200, .16), transparent 70%),
    radial-gradient(35% 30% at 82% 30%, rgba(0, 217, 255, .07), transparent 70%),
    radial-gradient(50% 30% at 60% 8%, rgba(255, 43, 214, .07), transparent 70%);
}
.stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sky .rig { position: relative; z-index: 1; }
.road {
  min-height: 38svh;
  display: flex; justify-content: center; align-items: flex-start;
  padding: clamp(6px, .8vw, 12px) 16px 0;
  background:
    radial-gradient(45% 60% at 50% 0%, rgba(255, 43, 214, .18), transparent 70%),
    radial-gradient(20% 30% at 50% 22%, rgba(255, 176, 0, .07), transparent 70%),
    linear-gradient(#1b1222, #08050c);
  /* the horizon is a slice of a huge circle, so it bows evenly like the edge of the earth */
  clip-path: circle(360vw at 50% 360vw);
}
.ground { filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, .12)); } /* thin line along the curved horizon */
.rig {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(20px, 4vw, 40px);
}
.reflection {
  transform: scaleY(-1);
  opacity: .55;
  filter: url(#ripple) blur(1.2px);
  -webkit-mask-image: linear-gradient(to top, #000 15%, transparent 95%);
  mask-image: linear-gradient(to top, #000 15%, transparent 95%);
  pointer-events: none;
}

/* light-up sequence (brief 4.1) */
.neon-word {
  --g: var(--neon-pink);
  margin: 0;
  font: 400 clamp(30px, 11.5vw, 150px)/1.1 'Monoton', cursive;
  white-space: nowrap;
}
/* The sign's cycle is driven by script.js through data-state:
   sweep (letters switch on left to right) -> lit (random letters flicker now and again)
   -> flash (double-flash) -> bright -> down (all off) -> sweep again. Lit is the resting state.

   Each letter is three layers, back to front:
   ::after  the glow (driven by --ga = glow strength, --gs = glow size)
   ::before the dark 3D body of the letter, which stays put even when the tube is off
   the text itself, the bright tube face (script.js sets data-ch for the copies) */
@property --ga { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --gs { syntax: '<number>'; inherits: true; initial-value: 1; }

.neon-word span {
  --ga: 1; --gs: 1;
  position: relative;
  display: inline-block;
  color: #FFE6FA;
  text-shadow: 0 0 2px rgb(255 43 214 / var(--ga)); /* tight halo on the tube itself */
  transition: --gs .4s;
}
.neon-word span::before,
.neon-word span::after {
  content: attr(data-ch);
  position: absolute; left: 0; top: 0;
  pointer-events: none;
}
.neon-word span::before {
  z-index: -1;
  color: #7a2a6c;
  text-shadow:
    0.006em 0.013em 0 #6a205e,
    0.012em 0.026em 0 #5e1c54,
    0.018em 0.039em 0 #53194a,
    0.024em 0.052em 0 #471540,
    0.030em 0.065em 0 #3c1237,
    0.036em 0.078em 0 #300e2d,
    0.042em 0.091em 0 #250b23,
    0.048em 0.104em 0 #1a081a,
    .05em .1em .08em rgba(0, 0, 0, .55);
}
.neon-word span::after {
  z-index: -2;
  color: transparent;
  text-shadow:
    0 0 calc(6px * var(--gs)) rgb(255 43 214 / var(--ga)),
    0 0 calc(18px * var(--gs)) rgb(255 43 214 / var(--ga)),
    0 0 calc(42px * var(--gs)) rgb(255 43 214 / var(--ga));
}

.neon-word[data-state="sweep"] span { animation: sweep .7s cubic-bezier(.3, 0, .2, 1) calc(var(--i) * .09s) both; }
.neon-word[data-state="flash"] span { animation: dbl .5s step-end; }
.neon-word[data-state="bright"] span { --gs: 1.4; }
.neon-word[data-state="down"] span { color: #2A1830; --ga: 0; transition: none; }
.neon-word[data-state="lit"] span.flick { animation: flick .7s step-end; }

@keyframes sweep { /* tube warms up: dim ember, a soft overshoot, then settles */
  0% { color: #2A1830; --ga: 0; --gs: .3 }
  35% { color: #8A3F7E; --ga: .5; --gs: .5 }
  70% { color: #FFF4FD; --ga: 1; --gs: 1.65 }
  100% { color: #FFE6FA; --ga: 1; --gs: 1 }
}
@keyframes dbl {
  0% { color: #2A1830; --ga: 0 }
  25% { color: #FFE6FA; --ga: 1; --gs: 1 }
  50% { color: #2A1830; --ga: 0 }
  75%, 100% { color: #FFE6FA; --ga: 1; --gs: 1.4 }
}
@keyframes flick {
  0% { color: #2A1830; --ga: 0 }
  12% { color: #FFE6FA; --ga: .8; --gs: .5 }
  22% { color: #2A1830; --ga: 0 }
  34% { color: #4A2E55; --ga: .3; --gs: .3 }
  48% { color: #FFE6FA; --ga: 1; --gs: 1 }
  58% { color: #2A1830; --ga: 0 }
  70%, 100% { color: #FFE6FA; --ga: 1; --gs: 1 }
}

/* INSERT COIN: the text and its border are separate "tubes" that flicker on their own
   (script.js adds .flick-text / .flick-border, sometimes both at once) */
.coin {
  position: relative;
  margin: 0;
  font: 700 clamp(12px, 2.6vw, 18px) 'Orbitron', sans-serif;
  letter-spacing: .4em;
  padding: .9em 1.4em .9em 1.8em; /* extra left padding balances the trailing letter-spacing */
  text-transform: uppercase;
  transform-origin: 6% 12%; /* when it breaks it hangs from its top-left screw */
  z-index: 1; /* in front of the hitchhiker */
}
button.coin { appearance: none; background: none; border: 0; color: inherit; cursor: pointer; }
button.coin:hover span, button.coin:hover::before { filter: brightness(1.25); }
button.coin:focus-visible { outline: 2px dashed var(--amber-core); outline-offset: 8px; border-radius: 12px; }
.coin::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 2px solid var(--neon-amber);
  border-radius: 10px;
  box-shadow:
    0 2px 0 #7a5410, 0 4px 0 #5a3d0b, 0 6px 0 #3a2706, 0 9px 10px rgba(0, 0, 0, .5), /* depth */
    0 0 8px var(--neon-amber), 0 0 20px rgba(255, 176, 0, .5), inset 0 0 10px rgba(255, 176, 0, .35);
}
.coin span {
  display: inline-block;
  color: var(--amber-core);
  text-shadow: 0 1px 0 #7a5410, 0 2px 0 #4a3208, 0 0 8px var(--neon-amber), 0 0 20px var(--neon-amber);
}
.coin.flick-text span, .coin.flick-border::before { animation: tube-flick .7s step-end; }
@keyframes tube-flick {
  0% { filter: brightness(.18) saturate(.5) }
  12% { filter: brightness(1) }
  22% { filter: brightness(.18) saturate(.5) }
  34% { filter: brightness(.45) }
  48% { filter: brightness(1.1) }
  58% { filter: brightness(.18) saturate(.5) }
  70%, 100% { filter: brightness(1) }
}

/* ---------- INSERT COIN breaks when clicked (script.js runs the sequence) ---------- */
.coin.shorting span, .coin.shorting::before { animation: short .12s steps(1) infinite; }
@keyframes short { 0% { filter: brightness(.2) saturate(.5) } 50% { filter: brightness(1.7) } }

.coin.dead { animation: hang 2.4s ease-out forwards; }
.coin.dead span, .coin.dead::before { filter: brightness(.22) saturate(.5); animation: dying 2.6s steps(1) infinite; }
@keyframes hang {
  0% { transform: none }
  18% { transform: translateY(3px) rotate(16deg) }
  36% { transform: translateY(3px) rotate(6deg) }
  54% { transform: translateY(3px) rotate(12deg) }
  72% { transform: translateY(3px) rotate(9deg) }
  100% { transform: translateY(3px) rotate(10deg) }
}
@keyframes dying {
  0%, 70% { filter: brightness(.22) saturate(.5) }
  72% { filter: brightness(1) }
  74% { filter: brightness(.22) saturate(.5) }
  77% { filter: brightness(.8) }
  79%, 100% { filter: brightness(.22) saturate(.5) }
}

.coin.reboot { animation: unhang .5s cubic-bezier(.34, 1.56, .64, 1); }
.coin.reboot span, .coin.reboot::before { animation: relight 1.1s step-end; }
@keyframes unhang { from { transform: translateY(3px) rotate(10deg) } to { transform: none } }
@keyframes relight {
  0% { filter: brightness(.2) saturate(.5) }
  30% { filter: brightness(1.3) }
  45% { filter: brightness(.25) saturate(.5) }
  65% { filter: brightness(1.2) }
  100% { filter: brightness(1) }
}

.spark {
  position: fixed; z-index: 10; width: 3px; height: 3px; border-radius: 50%;
  background: #FFF3C4; box-shadow: 0 0 6px #FFB000, 0 0 12px #FFB000;
  pointer-events: none;
}

/* the sign glitches, then the second I hangs loose and sputters (brief 4.3) */
.neon-word[data-state="glitch"] span { animation: glitch .14s steps(1) infinite; animation-delay: calc(var(--i) * -37ms); }
@keyframes glitch {
  0% { color: #2A1830; --ga: 0; transform: translateX(-2px) }
  50% { color: #FFF4FD; --ga: 1; --gs: 1.5; transform: translateX(2px) }
}
.neon-word[data-state="broken"] span:nth-child(7) {
  color: #4A2E55; --ga: 0;
  transform-origin: 20% 8%;
  animation: sputter 4.2s linear infinite, swing 2.8s ease-in-out infinite;
}
@keyframes sputter {
  0%, 30% { color: #4A2E55; --ga: 0 }
  31% { color: #FFE6FA; --ga: .8 }
  32% { color: #4A2E55; --ga: 0 }
  34% { color: #FFE6FA; --ga: .8 }
  35% { color: #4A2E55; --ga: 0 }
  80% { color: #3A2340; --ga: .2 }
  81%, 100% { color: #4A2E55; --ga: 0 }
}
@keyframes swing { 0%, 100% { transform: translateY(.06em) rotate(14deg) } 50% { transform: translateY(.06em) rotate(19deg) } }

/* ---------- INSERT COIN: "opening soon" (script.js runs the sequence) ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the coin you drop in (and get back) */
.coin-token {
  position: fixed; z-index: 25; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; pointer-events: none;
  display: grid; place-items: center;
  font: 400 11px/1 'Monoton', cursive; color: #8a5a08;
  background: radial-gradient(circle at 35% 30%, #fffbe6, #ffd27a 28%, #e8a823 58%, #8a5a08 100%);
  box-shadow: 0 0 10px #FFB000, 0 0 24px rgba(255, 176, 0, .6), inset 0 -2px 3px rgba(0, 0, 0, .35), inset 0 2px 2px rgba(255, 255, 255, .6);
}
.coin.credit span, .coin.credit::before { animation: credit .6s steps(1) 2; }
@keyframes credit { 0% { filter: brightness(2.2) } 50% { filter: brightness(1) } }

/* the little neon hitchhiker: rises from just behind the broken coin box and the curve of the horizon, thumb out,
   holding his cardboard sign up high on a stick so it shows above the box. He's clipped at the horizon so only the top of him shows. */
.hiker {
  position: absolute; z-index: 0; left: calc(50% + clamp(30px, 5vw, 66px)); bottom: calc(-1 * clamp(10px, 1.6vw, 22px));
  width: clamp(76px, 12vw, 150px); aspect-ratio: 170 / 160;
  clip-path: inset(-60px -60px 0 -60px); /* cut off at the horizon, but let the glow spill sideways */
  pointer-events: none;
}
.hiker svg { display: block; width: 100%; height: 100%; overflow: visible; transform: translateY(105%); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hiker-body { stroke: #E6FDFF; stroke-width: 3; filter: drop-shadow(0 0 3px #00D9FF) drop-shadow(0 0 8px #00D9FF); }
.hiker-body .eye { fill: #E6FDFF; stroke: none; }
.hiker-body .wink { opacity: 0; }
.hiker-sign rect { fill: #1a1222; stroke: #FFB000; stroke-width: 2.5; filter: drop-shadow(0 0 4px #FFB000); }
.hiker-sign text { fill: #FFD27A; stroke: none; font: 700 14px 'Orbitron', sans-serif; letter-spacing: 1px; text-anchor: middle; filter: drop-shadow(0 0 3px #FFB000); }
.thumb-arm { transform-box: view-box; transform-origin: 96px 86px; }
@media (max-width: 560px) {
  .hiker { left: auto; right: -6px; width: 72px; }
}

.hiker.up svg { animation: hiker-up .75s cubic-bezier(.34, 1.56, .64, 1) forwards; }
.hiker.up .hiker-body { animation: tube-on .8s step-end; }
.hiker.up .hiker-sign { animation: tube-on 1s step-end .3s both; }
.hiker.wave .thumb-arm { animation: thumb 1.1s ease-in-out 2; }
.hiker.winking .eye { opacity: 0; }
.hiker.winking .wink { opacity: 1; }
.hiker.down svg { animation: hiker-down .45s cubic-bezier(.55, 0, .9, .5) forwards; }
@keyframes hiker-up { from { transform: translateY(105%) } to { transform: translateY(22%) } } /* waist-deep behind the horizon */
@keyframes hiker-down { from { transform: translateY(22%) } to { transform: translateY(105%) } }
@keyframes tube-on {
  0% { opacity: .15 } 15% { opacity: 1 } 25% { opacity: .2 } 40% { opacity: .9 } 50% { opacity: .3 } 65%, 100% { opacity: 1 }
}
@keyframes thumb { 0%, 100% { transform: rotate(0) } 30% { transform: rotate(-9deg) } 65% { transform: rotate(5deg) } }

/* ---------- sound toggle ---------- */
.sound-toggle {
  position: fixed; right: 16px; bottom: 16px; z-index: 20;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 10px; border-radius: 999px;
  font: 700 .62rem 'Orbitron', sans-serif; letter-spacing: .2em; text-transform: uppercase;
  color: #8a7a96; background: rgba(11, 6, 20, .65);
  border: 1px solid rgba(0, 217, 255, .3);
  cursor: pointer;
  transition: color .2s, border-color .2s, box-shadow .2s;
}
.sound-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sound-toggle .waves { opacity: .35; }
.sound-toggle:hover { color: #E6FDFF; }
.sound-toggle[aria-pressed="true"] { color: #E6FDFF; border-color: #00D9FF; box-shadow: 0 0 10px rgba(0, 217, 255, .45), inset 0 0 8px rgba(0, 217, 255, .2); }
.sound-toggle[aria-pressed="true"] .waves { opacity: 1; }
.sound-toggle:focus-visible { outline: 2px dashed #00D9FF; outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .coin.dead, .coin.reboot { animation: none; }
  .coin.dead span, .coin.dead::before { animation: none !important; }
  .hiker svg, .hiker .hiker-body, .hiker .hiker-sign, .hiker .thumb-arm { animation: none !important; }
  .hiker svg { transform: translateY(105%); }
  .hiker.up svg { transform: translateY(22%); }
  .neon-word span { animation: none !important; color: #FFE6FA !important; --ga: 1 !important; --gs: 1 !important; }
  .coin span, .coin::before { animation: none !important; }
}