:root {
  color-scheme: dark;
  --cabinet: #171126;
  --panel: #2d2050;
  --reel: #0b0813;
  --accent: #b7ff4a;
  --copy: #fff8e7;
  --machine-font: "Trebuchet MS", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body { margin: 0; background: transparent; color: var(--copy); font-family: var(--machine-font); }
.hidden { display: none !important; }
#confetti { position: fixed; inset: 0; z-index: 20; width: 100%; height: 100%; pointer-events: none; }

.overlay-stage { transform-origin: center bottom; position: absolute; left: 50%; bottom: 4%; width: min(940px,78vw); transform: translateX(-50%) scale(var(--overlay-scale,1)); opacity: 0; filter: blur(5px); transition: opacity .42s ease, filter .42s ease; }
.overlay-stage.visible { transform: translateX(-50%) scale(var(--overlay-scale,1)); opacity: 1; filter: none; }
.overlay-stage.leaving { transform: translateX(-50%) scale(var(--overlay-scale,1)); opacity: 0; }

.machine { position: relative; filter: drop-shadow(0 38px 35px rgba(0,0,0,.48)); }
.marquee-shell { position: relative; z-index: 3; width: 80%; margin: 0 auto -5px; padding: 8px 12px 6px; border: 2px solid color-mix(in srgb,var(--cabinet),white 18%); border-radius: 28px 28px 10px 10px; background: linear-gradient(145deg,color-mix(in srgb,var(--cabinet),white 16%),var(--cabinet)); box-shadow: inset 0 2px rgba(255,255,255,.22),0 16px 30px rgba(0,0,0,.25); }
.bulb-row { height: 10px; display: flex; justify-content: space-around; }
.bulb-row i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 9px var(--accent); animation: bulb 1.1s ease-in-out infinite alternate; }
.bulb-row i:nth-child(even) { animation-delay: -.55s; }
@keyframes bulb { from { opacity: .35; transform: scale(.72); } to { opacity: 1; transform: scale(1); } }
.marquee-face { height: 58px; padding: 0 28px; display: flex; align-items: center; justify-content: center; gap: 18px; border: 2px solid color-mix(in srgb,var(--accent),white 14%); border-radius: 17px 17px 7px 7px; color: var(--cabinet); background: linear-gradient(180deg,color-mix(in srgb,var(--accent),white 17%),var(--accent)); box-shadow: inset 0 -10px 19px rgba(0,0,0,.12),0 0 22px color-mix(in srgb,var(--accent),transparent 72%); }
.marquee-face h1 { max-width: 80%; margin: 0; overflow: hidden; font-size: clamp(1.55rem,2.7vw,2.55rem); font-weight: 1000; letter-spacing: .11em; line-height: 1; white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 2px rgba(255,255,255,.23); }
.marquee-star { font-size: 1.2rem; animation: star-pulse .8s ease-in-out infinite alternate; }
@keyframes star-pulse { to { transform: rotate(90deg) scale(1.25); } }

.cabinet { position: relative; padding: 28px 32px 15px; border: 2px solid color-mix(in srgb,var(--cabinet),white 14%); border-radius: 36px 36px 25px 25px; background: linear-gradient(135deg,color-mix(in srgb,var(--cabinet),white 13%),var(--cabinet) 48%,color-mix(in srgb,var(--cabinet),black 16%)); box-shadow: inset 0 2px rgba(255,255,255,.19),inset 12px 0 30px rgba(255,255,255,.025),inset -14px -18px 36px rgba(0,0,0,.18); }
.cabinet::before, .cabinet::after { content: ""; position: absolute; top: 44%; width: 13px; height: 90px; border-radius: 7px; background: var(--accent); box-shadow: 0 0 22px color-mix(in srgb,var(--accent),transparent 45%); opacity: .72; }
.cabinet::before { left: 9px; }
.cabinet::after { right: 9px; }
.screen-bezel { padding: 10px 13px 12px; border: 2px solid color-mix(in srgb,var(--panel),white 16%); border-radius: 19px; background: linear-gradient(145deg,color-mix(in srgb,var(--panel),black 10%),var(--panel)); box-shadow: inset 0 0 24px rgba(0,0,0,.32),0 9px 18px rgba(0,0,0,.25); }
.screen-header { height: 21px; display: flex; justify-content: space-between; align-items: flex-start; color: color-mix(in srgb,var(--copy),transparent 37%); font-size: .55rem; font-weight: 900; letter-spacing: .13em; }
.screen-header span:last-child { display: flex; align-items: center; gap: 6px; color: var(--accent); }
.screen-header i { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: var(--accent); box-shadow: 0 0 9px var(--accent); }
.reel-window { container-type: inline-size; position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; padding: 8px; overflow: hidden; border: 2px solid color-mix(in srgb,var(--copy),transparent 82%); border-radius: 13px; background: color-mix(in srgb,var(--reel),black 9%); box-shadow: inset 0 18px 30px rgba(0,0,0,.4),inset 0 -18px 30px rgba(0,0,0,.4),0 0 0 5px rgba(0,0,0,.13); }
.payline-layer { position: absolute; inset: 8px; z-index: 3; width: calc(100% - 16px); height: calc(100% - 16px); overflow: visible; pointer-events: none; }
.payline-path { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 7px var(--accent)); stroke-dasharray: 700; stroke-dashoffset: 700; animation: draw-payline .65s cubic-bezier(.16,1,.3,1) forwards; }
.payline-path.jackpot { stroke: #ffc857; stroke-width: 6; filter: drop-shadow(0 0 10px #ffc857) drop-shadow(0 0 18px var(--accent)); }
@keyframes draw-payline { to { stroke-dashoffset: 0; } }
.reel-window::before, .reel-window::after { content: ""; position: absolute; z-index: 5; left: 0; right: 0; height: 13%; pointer-events: none; }
.reel-window::before { top: 0; background: linear-gradient(rgba(0,0,0,.48),transparent); }
.reel-window::after { bottom: 0; background: linear-gradient(transparent,rgba(0,0,0,.48)); }
.reel { min-width: 0; display: grid; grid-template-rows: repeat(var(--grid-rows,3),1fr); gap: 6px; }
.reel-cell { position: relative; min-width: 0; min-height: 0; aspect-ratio: 1.5; display: grid; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb,var(--copy),transparent 89%); border-radius: 9px; background: radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--reel),white 9%),var(--reel) 72%); transition: transform .2s,filter .2s,opacity .2s,box-shadow .2s,border-color .2s; }
.reel-cell img { position: absolute; width: 74%; height: 74%; object-fit: contain; filter: drop-shadow(0 6px 7px rgba(0,0,0,.48)); }
.reel-cell .symbol-glyph { color: var(--accent); font: 1000 clamp(1rem,4vw,4.2rem) Georgia,serif; text-shadow: 0 4px 8px rgba(0,0,0,.38),0 0 18px color-mix(in srgb,var(--accent),transparent 56%); }
.reel-cell.jackpot-symbol::after { content: "★"; position: absolute; right: 8px; top: 5px; color: #ffc857; font-size: clamp(.65rem,1.2vw,1rem); filter: drop-shadow(0 0 6px rgba(255,200,87,.8)); }
.wild-marker { display: grid; place-items: center; gap: 2px; color: var(--accent); filter: drop-shadow(0 0 10px var(--accent)); }
.wild-marker b { font-size: clamp(2rem,4vw,4rem); line-height: .8; }
.wild-marker small { font-size: clamp(.42rem,.8vw,.72rem); font-weight: 1000; letter-spacing: .15em; }
.reel-cell.wild-resolving { z-index: 6; border-color: var(--accent); box-shadow: inset 0 0 32px color-mix(in srgb,var(--accent),transparent 72%),0 0 24px color-mix(in srgb,var(--accent),transparent 38%); animation: wild-cycle .21s ease-in-out infinite alternate; }
.reel-cell.wild-landed { z-index: 6; border-color: #fff; box-shadow: inset 0 0 28px color-mix(in srgb,var(--accent),transparent 65%),0 0 28px var(--accent); animation: wild-land .55s cubic-bezier(.16,1,.3,1); }
@keyframes wild-cycle { to { transform: scale(.91) rotate(-1deg); filter: brightness(1.42) saturate(1.35); } }
@keyframes wild-land { 0% { transform: scale(1.22); filter: brightness(2); } 100% { transform: none; } }
.reel.spinning .reel-cell { animation: reel-rattle .1s linear infinite; filter: blur(2.4px); opacity: .68; }
@keyframes reel-rattle { 50% { transform: translateY(7px) scaleY(.92); } }
.reel.stopped { animation: reel-stop .34s cubic-bezier(.18,.89,.32,1.5); }
@keyframes reel-stop { 0% { transform: translateY(-12px); } 55% { transform: translateY(8px); } 100% { transform: none; } }
.reel-cell.win { z-index: 4; border-color: var(--accent); transform: scale(1.035); box-shadow: inset 0 0 25px color-mix(in srgb,var(--accent),transparent 76%),0 0 21px color-mix(in srgb,var(--accent),transparent 48%); animation: winner-cell .55s ease-in-out infinite alternate; }
.reel-cell.win.jackpot-win { border-color: #ffc857; box-shadow: inset 0 0 30px rgba(255,200,87,.3),0 0 28px #ffc857,0 0 45px color-mix(in srgb,var(--accent),transparent 35%); }
.reel-cell.dim { opacity: .38; filter: saturate(.48); }
@keyframes winner-cell { to { transform: scale(.96); filter: brightness(1.22); } }
.win-flash { position: absolute; inset: 0; z-index: 10; display: grid; place-content: center; justify-items: center; pointer-events: none; opacity: 0; transform: scale(.45); color: var(--accent); background: radial-gradient(ellipse at center,rgba(7,5,12,.94) 0,rgba(7,5,12,.76) 42%,transparent 73%); text-align: center; text-shadow: 0 4px 8px rgba(0,0,0,.9),0 0 22px var(--accent); }
.win-flash small, .win-flash span { font-size: clamp(.68rem,1.2vw,1.05rem); font-weight: 1000; letter-spacing: .28em; }
.win-flash strong { font-size: clamp(2rem,12cqw,7rem); font-weight: 1000; line-height: .92; letter-spacing: -.07em; font-variant-numeric: tabular-nums; }
#win-flash-score { margin-top: 12px; letter-spacing: .08em; }
.win-flash.show { animation: win-flash 1.4s cubic-bezier(.16,1,.3,1) both; }
.win-flash.big strong { font-size: clamp(2rem,13cqw,8rem); }
.win-flash.jackpot { color: #ffc857; text-shadow: 0 4px 8px rgba(0,0,0,.9),0 0 24px #ffc857,0 0 38px var(--accent); }
@keyframes win-flash {
  0% { opacity: 0; transform: scale(.45) rotate(-2deg); }
  13%,80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.2); }
}
.payline-dots { height: 9px; margin-top: 7px; display: flex; justify-content: center; gap: 8px; }
.payline-dots i { width: 5px; height: 5px; border-radius: 50%; border: 1px solid color-mix(in srgb,var(--copy),transparent 68%); }
.payline-dots.active i { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 10px var(--accent); animation: dot-wave .65s ease-in-out infinite alternate; }
.payline-dots.active i:nth-child(2) { animation-delay: .1s; }.payline-dots.active i:nth-child(3) { animation-delay: .2s; }.payline-dots.active i:nth-child(4) { animation-delay: .3s; }.payline-dots.active i:nth-child(5) { animation-delay: .4s; }
.payline-dots.active i:nth-child(6) { animation-delay: .5s; }.payline-dots.active i:nth-child(7) { animation-delay: .6s; }.payline-dots.active i:nth-child(8) { animation-delay: .7s; }.payline-dots.active i:nth-child(9) { animation-delay: .8s; }
.payline-dots.active i:nth-child(10) { animation-delay: .9s; }.payline-dots.active i:nth-child(11) { animation-delay: 1s; }.payline-dots.active i:nth-child(12) { animation-delay: 1.1s; }.payline-dots.active i:nth-child(13) { animation-delay: 1.2s; }.payline-dots.active i:nth-child(14) { animation-delay: 1.3s; }.payline-dots.active i:nth-child(15) { animation-delay: 1.4s; }
@keyframes dot-wave { to { transform: translateY(-4px); } }

.machine.big-win .cabinet { animation: big-win-cabinet .42s ease-in-out 5 alternate; }
.machine.big-win .marquee-shell { animation: big-win-marquee .22s ease-in-out 9 alternate; }
@keyframes big-win-cabinet { to { filter: brightness(1.18); } }
@keyframes big-win-marquee { to { filter: brightness(1.45); } }

.result-panel { height: 70px; margin-top: 10px; padding: 9px 12px; display: grid; grid-template-columns: minmax(145px,.9fr) minmax(190px,1.15fr) auto; align-items: center; gap: 14px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--copy),transparent 87%); border-radius: 13px; background: color-mix(in srgb,var(--panel),black 18%); transition: border-color .2s,box-shadow .2s; }
.result-panel.win { border-color: color-mix(in srgb,var(--accent),transparent 24%); box-shadow: inset 0 0 25px color-mix(in srgb,var(--accent),transparent 88%),0 0 20px color-mix(in srgb,var(--accent),transparent 82%); }
.spin-meta { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline; column-gap: 10px; }
.spin-meta small { grid-column: 1 / -1; color: color-mix(in srgb,var(--copy),transparent 55%); font-size: .48rem; font-weight: 900; letter-spacing: .15em; }
.spin-meta strong { overflow: hidden; color: var(--copy); font-size: clamp(.88rem,1.6vw,1.2rem); line-height: 1.1; white-space: nowrap; text-overflow: ellipsis; }
.spin-meta span { color: color-mix(in srgb,var(--copy),transparent 42%); font-size: .53rem; font-weight: 900; letter-spacing: .08em; white-space: nowrap; }
.spin-meta b { color: var(--accent); font-size: .9rem; font-variant-numeric: tabular-nums; }
.result-copy { display: grid; gap: 1px; }
.result-copy small { color: color-mix(in srgb,var(--copy),transparent 50%); font-size: .6rem; font-weight: 900; letter-spacing: .18em; }
.result-copy strong { color: var(--accent); font-size: clamp(1.35rem,2.45vw,2.15rem); line-height: 1.06; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.rank-copy { display: flex; gap: 7px; }
.rank-copy > span { min-width: 64px; padding: 6px 8px; display: grid; gap: 1px; border: 1px solid color-mix(in srgb,var(--copy),transparent 88%); border-radius: 9px; background: rgba(0,0,0,.13); text-align: center; }
.rank-copy small { color: color-mix(in srgb,var(--copy),transparent 55%); font-size: .5rem; font-weight: 900; letter-spacing: .1em; }
.rank-copy b { font-size: 1rem; }
.cabinet-footer { height: 31px; padding: 0 5px; display: flex; align-items: center; justify-content: space-between; color: color-mix(in srgb,var(--copy),transparent 52%); font-size: .52rem; font-weight: 850; letter-spacing: .12em; }
.speaker { display: flex; gap: 4px; }
.speaker i { width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb,var(--copy),transparent 75%); }
.machine-feet { width: 88%; height: 15px; margin: 0 auto; display: flex; justify-content: space-between; }
.machine-feet i { width: 72px; height: 12px; border-radius: 0 0 13px 13px; background: color-mix(in srgb,var(--cabinet),black 26%); }
.test-ribbon { position: absolute; top: 100%; left: 50%; width: max-content; margin-top: 8px; padding: 6px 12px; transform: translateX(-50%) scale(var(--overlay-scale,1)); border: 1px solid rgba(255,255,255,.14); border-radius: 99px; color: rgba(255,255,255,.76); background: rgba(7,5,12,.74); font-size: .55rem; font-weight: 900; letter-spacing: .15em; backdrop-filter: blur(8px); }

.overlay-stage.reels-only { width: min(840px,70vw); }
.reels-only .machine { filter: drop-shadow(0 18px 24px rgba(0,0,0,.42)); }
.reels-only .marquee-shell,
.reels-only .screen-header,
.reels-only .result-panel,
.reels-only .cabinet-footer,
.reels-only .machine-feet,
.reels-only .test-ribbon,
.reels-only .payline-dots,
.reels-only .idle-leaderboard { display: none !important; }
.reels-only .cabinet { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.reels-only .cabinet::before,
.reels-only .cabinet::after { display: none; }
.reels-only .screen-bezel { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.reels-only .reels-view.view-muted { visibility: visible; }

@media (max-height: 800px) {
  .overlay-stage { bottom: 2%; width: min(820px,70vw); }
  .marquee-face { height: 50px; }
  .cabinet { padding-top: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}