/* Neon: a glowing sign on a night-time brick wall. Prizes are drawn as neon tubes. */
:root {
  color-scheme: dark;
  --bg: #140b1d;
  --ink: #f7ecff;
  --pink: #ff3ea5;
  --cyan: #35e8ff;
  --gold: #ffd84a;
  --violet: #b47cff;
  --focus: #35e8ff;
  --font-display: "Monoton", "Impact", sans-serif;
  --font-body: "Tilt Neon", "Trebuchet MS", sans-serif;
  --lever-gap: 4px;
}
body {
  background-color: #150c1f;
  background-image:
    radial-gradient(55% 40% at 50% 22%, rgba(255, 62, 165, 0.24), transparent 70%),
    radial-gradient(45% 35% at 50% 70%, rgba(53, 232, 255, 0.14), transparent 70%),
    radial-gradient(130% 95% at 50% 40%, transparent 35%, rgba(0, 0, 0, 0.82) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.55' stroke-width='3'%3E%3Cpath d='M0 1.5H96M0 25.5H96M1.5 0V24M49.5 24V48'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(#24152f, #1a0f24);
}

/* marquee: the sign */
.marquee {
  padding: 10px 12px 12px;
  border-radius: 20px;
  background: rgba(8, 3, 14, 0.72);
  border: 2px solid rgba(255, 62, 165, 0.55);
  box-shadow: 0 0 24px rgba(255, 62, 165, 0.25), inset 0 0 30px rgba(255, 62, 165, 0.12);
}
.bulbs { padding: 0 2px; --bulb: 7px; }
.bulbs-top { margin-bottom: 8px; }
.bulbs-bottom { margin-top: 8px; }
.bulb { background: #4a3618; animation: neon-chase 1.2s steps(1) infinite; }
.bulb:nth-child(3n+2) { animation-delay: -0.4s; }
.bulb:nth-child(3n) { animation-delay: -0.8s; }
.machine.win .bulb, .machine.teasing .bulb { animation-duration: 0.36s; }
@keyframes neon-chase {
  0% { background: #fff4c2; box-shadow: 0 0 5px #ffd84a, 0 0 12px #ffb300; }
  33.3% { background: #4a3618; box-shadow: none; }
}
.marquee-title { font-family: var(--font-display); text-transform: uppercase; }
.marquee-title .t1 {
  display: block; font-size: clamp(25px, 8.6vw, 54px); letter-spacing: 0.02em;
  color: #ffe6f4;
  text-shadow: 0 0 2px #fff, 0 0 7px var(--pink), 0 0 16px var(--pink), 0 0 34px var(--pink);
}
.marquee-title .t2 {
  display: block; margin-top: 4px; font-size: clamp(20px, 6.4vw, 38px); letter-spacing: 0.18em;
  color: #dcfbff;
  text-shadow: 0 0 2px #fff, 0 0 7px var(--cyan), 0 0 16px var(--cyan), 0 0 32px var(--cyan);
  animation: neon-flicker 7s linear infinite;
}
@keyframes neon-flicker {
  0%, 61%, 63.5%, 66%, 100% { opacity: 1; }
  62%, 65% { opacity: 0.35; text-shadow: none; }
}
.marquee-sub {
  font-size: clamp(12px, 3.3vw, 15px); letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff3c4; text-shadow: 0 0 6px var(--gold), 0 0 14px rgba(255, 216, 74, 0.6);
}

/* cabinet */
.cabinet {
  border-radius: 24px;
  background: linear-gradient(180deg, #1c1128, #0c0713);
  border: 2px solid #aaf6ff;
  box-shadow: 0 0 6px var(--cyan), 0 0 22px rgba(53, 232, 255, 0.5), inset 0 0 18px rgba(53, 232, 255, 0.22), 0 30px 70px rgba(0, 0, 0, 0.6);
}
.reels-frame {
  border-radius: 16px; background: #05030a;
  box-shadow: inset 0 0 0 2px rgba(255, 62, 165, 0.7), inset 0 0 26px rgba(255, 62, 165, 0.35);
}
.reel { border-radius: 9px; background: radial-gradient(130% 55% at 50% 50%, #1a0e28, #07040c); }
.reel::after { background: linear-gradient(180deg, rgba(5, 3, 10, 0.94), rgba(5, 3, 10, 0) 28%, rgba(5, 3, 10, 0) 72%, rgba(5, 3, 10, 0.94)); }
.cell { border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.cap {
  font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.05em;
  color: color-mix(in srgb, var(--sc) 55%, white); text-shadow: 0 0 6px var(--sc);
}
.reel.teasing { box-shadow: inset 0 0 0 2px var(--gold), 0 0 18px var(--gold); animation: neon-tease 0.3s ease-in-out infinite alternate; }
@keyframes neon-tease { to { box-shadow: inset 0 0 0 2px #fff, 0 0 30px var(--gold); } }
.cell.win .icon { filter: brightness(1.35) drop-shadow(0 0 10px var(--sc)); }

/* payline: two gold arrows and faint rails */
.payline { border-top: 1px solid rgba(255, 216, 74, 0.28); border-bottom: 1px solid rgba(255, 216, 74, 0.28); }
.payline::before, .payline::after {
  width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent;
  filter: drop-shadow(0 0 5px var(--gold));
}
.payline::before { left: -2px; border-left: 12px solid var(--gold); }
.payline::after { right: -2px; border-right: 12px solid var(--gold); }
.machine.win .payline { animation: neon-line 0.25s steps(1) infinite; }
.machine.hope .payline { border-color: #fff; box-shadow: 0 0 18px var(--gold), inset 0 0 18px rgba(255, 216, 74, 0.4); }
@keyframes neon-line { 50% { border-color: #fff; box-shadow: 0 0 22px var(--gold), inset 0 0 22px rgba(255, 216, 74, 0.5); } }

/* readout */
.credits {
  border-radius: 14px; border: 2px solid rgba(255, 216, 74, 0.75);
  box-shadow: 0 0 12px rgba(255, 216, 74, 0.35), inset 0 0 12px rgba(255, 216, 74, 0.18);
  color: #fff3c4;
}
.credits .value { font-family: var(--font-body); font-size: 32px; text-shadow: 0 0 6px var(--gold), 0 0 16px var(--gold); }
.message {
  border-radius: 14px; border: 2px solid rgba(53, 232, 255, 0.7);
  box-shadow: 0 0 12px rgba(53, 232, 255, 0.3), inset 0 0 12px rgba(53, 232, 255, 0.15);
  color: #e3fcff; text-shadow: 0 0 8px var(--cyan); text-transform: uppercase; letter-spacing: 0.05em;
}
.message.good { color: #fff4c9; border-color: var(--gold); text-shadow: 0 0 8px var(--gold); }
.message.bad { color: #ffe0f0; border-color: var(--pink); text-shadow: 0 0 8px var(--pink); }

/* prize list */
.prizes-head { color: #fff3c4; text-shadow: 0 0 6px var(--gold); }
.pay-name { color: color-mix(in srgb, var(--sc) 45%, white); }

/* lever: chrome arm, glowing pink ball */
.lever-mount {
  border-radius: 0 10px 10px 0;
  background: linear-gradient(180deg, #4b4058, #221a2c 55%, #3a3046);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 10px rgba(53, 232, 255, 0.35);
}
.lever-hub {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #b9b5c6 35%, #4d4858 75%, #1d1a24);
  box-shadow: 0 0 0 2px rgba(53, 232, 255, 0.6), 0 0 14px rgba(53, 232, 255, 0.5);
}
.lever-arm {
  --arm-w: 14%;
  border-radius: 99px;
  background: linear-gradient(90deg, #5d5a68, #f5f3ff 35%, #bcb8c8 55%, #45424e);
}
.lever-knob {
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0 7%, #ffb3dd 16%, #ff3ea5 44%, #a1005a 80%, #5a0032);
  box-shadow: 0 0 calc(10px + var(--pull) * 26px) rgba(255, 62, 165, 0.95), 0 0 46px rgba(255, 62, 165, 0.45);
}
.lever-hint { color: #fff3c4; text-shadow: 0 0 6px var(--gold); font-family: var(--font-body); }

/* banner */
.banner {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(28px, 9vw, 60px);
  color: #fff6d0;
  text-shadow: 0 0 3px #fff, 0 0 10px var(--gold), 0 0 24px var(--gold), 0 0 50px #ff9d00;
}
.banner.miss { color: #e4fcff; text-shadow: 0 0 3px #fff, 0 0 10px var(--cyan), 0 0 24px var(--cyan), 0 0 50px #0090ff; }
.banner.jackpot { color: #ffe6f4; font-size: clamp(32px, 11vw, 76px); text-shadow: 0 0 3px #fff, 0 0 10px var(--pink), 0 0 26px var(--pink), 0 0 60px #ff006a; }

/* birthday screen */
.party-bg {
  background:
    radial-gradient(60% 50% at 50% 38%, rgba(255, 62, 165, 0.32), transparent 70%),
    radial-gradient(50% 40% at 50% 80%, rgba(53, 232, 255, 0.2), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.6' stroke-width='3'%3E%3Cpath d='M0 1.5H96M0 25.5H96M1.5 0V24M49.5 24V48'/%3E%3C/g%3E%3C/svg%3E"),
    #12091b;
}
.party-kicker {
  font-family: var(--font-body); font-size: clamp(16px, 4vw, 22px); letter-spacing: 0.4em; text-transform: uppercase;
  color: #fff3c4; text-shadow: 0 0 8px var(--gold), 0 0 18px var(--gold);
}
.party-title { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(38px, 13vw, 118px); font-weight: 400; }
.party-title .ch { --c: var(--pink); color: color-mix(in srgb, var(--c) 30%, white); text-shadow: 0 0 3px #fff, 0 0 10px var(--c), 0 0 26px var(--c), 0 0 60px var(--c); }
.party-title .ch:nth-child(3n+2) { --c: var(--cyan); }
.party-title .ch:nth-child(3n) { --c: var(--gold); }
.party.show .party-title .ch { animation: neon-on 1.1s steps(1) both, wave 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * 90ms + 0.2s), calc(var(--i) * 90ms + 1.6s); }
@keyframes neon-on { 0% { opacity: 0; } 30% { opacity: 1; } 40% { opacity: 0.2; } 55% { opacity: 1; } 65% { opacity: 0.4; } 75%, 100% { opacity: 1; } }
.party-name { font-family: var(--font-body); font-size: clamp(30px, 8vw, 60px); color: #e8fdff; text-shadow: 0 0 8px var(--cyan), 0 0 24px var(--cyan); }
.prize {
  border-radius: 18px; border: 2px solid var(--violet); background: rgba(10, 4, 18, 0.7);
  box-shadow: 0 0 16px rgba(180, 124, 255, 0.6), inset 0 0 18px rgba(180, 124, 255, 0.25);
}
.prize-label { color: #fff3c4; text-shadow: 0 0 6px var(--gold); }
.prize-name { font-weight: 400; color: #f3e9ff; text-shadow: 0 0 8px var(--violet), 0 0 20px var(--violet); }
.prize-note { color: #e3fcff; }
.claim-btn {
  padding: 16px 30px; border-radius: 99px;
  font-family: var(--font-body); font-size: clamp(18px, 5vw, 24px); letter-spacing: 0.06em; text-transform: uppercase;
  color: #2a0016;
  background: radial-gradient(120% 140% at 30% 20%, #fff 0 8%, #ffb3dd 30%, var(--pink) 70%);
  box-shadow: 0 0 0 2px #ffe3f3, 0 0 18px var(--pink), 0 0 46px rgba(255, 62, 165, 0.6);
  animation: claim-glow 1.6s ease-in-out 2.6s infinite;
}
.claim-btn:hover:not(:disabled) { filter: brightness(1.08); }
.claim-btn:active:not(:disabled) { transform: scale(0.97); }
.claim-btn:disabled { animation: none; background: rgba(10, 4, 18, 0.7); color: #fff3c4; box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(255, 216, 74, 0.5); text-shadow: 0 0 8px var(--gold); }
@keyframes claim-glow { 50% { box-shadow: 0 0 0 2px #fff, 0 0 30px var(--pink), 0 0 80px rgba(255, 62, 165, 0.8); } }
.claim-prompt { color: #fff3c4; text-shadow: 0 0 8px var(--gold), 0 0 18px rgba(255, 216, 74, 0.5); }
.claim-label { color: #bfefff; text-shadow: 0 0 6px var(--cyan); }
.claim-field input {
  color: #f7ecff; caret-color: var(--pink);
  background: rgba(10, 4, 18, 0.82);
  border: 2px solid rgba(53, 232, 255, 0.7);
  box-shadow: 0 0 10px rgba(53, 232, 255, 0.3), inset 0 0 10px rgba(53, 232, 255, 0.12);
}
.claim-field input:focus { border-color: #ffe3f3; box-shadow: 0 0 0 1px var(--pink), 0 0 16px var(--pink), inset 0 0 10px rgba(255, 62, 165, 0.2); }
.claim-field input[aria-invalid="true"] { border-color: var(--pink); }
.claim-status { color: #e3fcff; }
.claim-status.good { color: #fff3c4; text-shadow: 0 0 8px var(--gold); }
.claim-status.bad { color: #ffd0e8; text-shadow: 0 0 8px var(--pink); }
.claim-status.note { color: #bfefff; }
.party-replay { color: #e3fcff; }
.sound-btn { color: #e3fcff; box-shadow: 0 0 10px rgba(53, 232, 255, 0.5); }