:root{--gold:#ffd23f;--pink:#ff2e88;--cyan:#22e4ff;--purple:#7b2cff;--red:#ff2a2a}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#07020f;color:#fff;font-family:"Arial Black","Segoe UI",Impact,system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
#bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:radial-gradient(ellipse at center,#3a0b6b 0%,#14042a 55%,#05010b 100%)}
.rays{position:absolute;left:50%;top:50%;width:300vmax;height:300vmax;margin:-150vmax 0 0 -150vmax;background:repeating-conic-gradient(from 0deg,rgba(255,210,63,.10) 0 6deg,transparent 6deg 18deg);animation:spin 40s linear infinite}
body.hype .rays{animation-duration:4s;background:repeating-conic-gradient(from 0deg,rgba(255,46,136,.22) 0 6deg,transparent 6deg 18deg)}
body.hype2 .rays{animation-duration:1.4s;background:repeating-conic-gradient(from 0deg,rgba(255,42,42,.3) 0 6deg,transparent 6deg 14deg)}
.grid{position:absolute;left:-50%;right:-50%;bottom:-10%;height:60%;background-image:linear-gradient(rgba(34,228,255,.35) 2px,transparent 2px),linear-gradient(90deg,rgba(34,228,255,.35) 2px,transparent 2px);background-size:60px 60px;transform:perspective(400px) rotateX(65deg);animation:gridmove 1.2s linear infinite;mask-image:linear-gradient(transparent,#000 60%)}
@keyframes gridmove{to{background-position:0 60px}}
@keyframes spin{to{transform:rotate(360deg)}}
#fx{position:fixed;inset:0;z-index:5;pointer-events:none}
#flash{position:fixed;inset:0;z-index:6;background:#fff;opacity:0;pointer-events:none}
#flash.go{animation:flash .6s ease-out}
@keyframes flash{0%{opacity:1}100%{opacity:0}}
#vignette{position:fixed;inset:0;z-index:4;pointer-events:none;box-shadow:inset 0 0 0 0 rgba(255,0,60,0);transition:box-shadow .3s}
body.danger #vignette{animation:pulseRed .5s ease-in-out infinite alternate}
@keyframes pulseRed{from{box-shadow:inset 0 0 60px 10px rgba(255,0,60,.4)}to{box-shadow:inset 0 0 160px 50px rgba(255,0,60,.8)}}
#app{position:relative;z-index:3;height:100%}
.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;gap:18px}
.screen.active{display:flex}
.shake{animation:shake .12s linear infinite}
.shake-hard{animation:shakeHard .08s linear infinite}
@keyframes shake{0%{transform:translate(2px,1px) rotate(0)}25%{transform:translate(-2px,-2px) rotate(-.5deg)}50%{transform:translate(-3px,2px) rotate(.5deg)}75%{transform:translate(3px,-1px)}100%{transform:translate(1px,2px) rotate(-.5deg)}}
@keyframes shakeHard{0%{transform:translate(8px,4px) rotate(1deg)}25%{transform:translate(-8px,-6px) rotate(-1.5deg)}50%{transform:translate(-10px,6px) rotate(1.5deg)}75%{transform:translate(9px,-5px) rotate(-1deg)}100%{transform:translate(4px,8px)}}
.badge{display:inline-block;padding:8px 18px;border:3px solid var(--gold);border-radius:999px;color:var(--gold);font-size:clamp(12px,2.6vw,18px);letter-spacing:.2em;background:rgba(0,0,0,.4);box-shadow:0 0 20px rgba(255,210,63,.6);animation:bob 2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
.mega{line-height:.85;font-size:clamp(48px,13vw,150px);text-transform:uppercase;font-style:italic}
.mega span{display:block}
.mega .l1{background:linear-gradient(180deg,#fff 0%,#22e4ff 50%,#7b2cff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 0 #1b0040) drop-shadow(0 0 25px rgba(34,228,255,.7));animation:wob 3s ease-in-out infinite}
.mega .l2{background:linear-gradient(180deg,#fff7c2 0%,#ffd23f 45%,#ff7b00 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 0 #5a1800) drop-shadow(0 0 30px rgba(255,160,0,.8));animation:wob 3s ease-in-out infinite reverse}
@keyframes wob{0%,100%{transform:rotate(-2deg) scale(1)}50%{transform:rotate(2deg) scale(1.05)}}
.prize-tag{font-size:clamp(22px,5vw,44px);transform:rotate(-3deg);background:linear-gradient(90deg,var(--pink),var(--purple));padding:8px 26px;border-radius:14px;border:4px solid #fff;box-shadow:0 0 0 6px var(--pink),0 0 40px var(--pink);animation:throb 1s ease-in-out infinite}
.prize-tag .money{color:var(--gold);text-shadow:0 0 12px #000}
.prize-tag .small{font-size:.6em}
@keyframes throb{50%{transform:rotate(-3deg) scale(1.07)}}
.sub{font-family:system-ui,sans-serif;font-weight:700;font-size:clamp(14px,3vw,20px);opacity:.95;text-shadow:0 2px 6px #000}
.sub b{color:var(--gold)}
.hint{font-family:system-ui;font-size:13px;opacity:.7}
.marquee{width:min(900px,100%);overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.track{display:flex;gap:14px;width:max-content;animation:marq 30s linear infinite}
.track .chip{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.2);border-radius:999px;padding:4px 14px 4px 4px;font-family:system-ui;font-weight:700;font-size:14px;white-space:nowrap}
.track .chip img{width:32px;height:32px;border-radius:50%}
@keyframes marq{to{transform:translateX(-50%)}}
.btn-mega{font-family:inherit;font-size:clamp(18px,4.5vw,32px);color:#1a0500;padding:18px 36px;border:0;border-radius:20px;cursor:pointer;background:linear-gradient(180deg,#fff3a0,#ffd23f 40%,#ff9500);box-shadow:0 8px 0 #8a3c00,0 0 0 5px #fff,0 0 50px rgba(255,200,0,.9);animation:btnpulse 1.1s ease-in-out infinite;text-transform:uppercase;letter-spacing:.04em}
.btn-mega:active{transform:translateY(6px)!important;box-shadow:0 2px 0 #8a3c00,0 0 0 5px #fff}
.btn-mega.red{background:linear-gradient(180deg,#ffb3b3,#ff2a2a 45%,#a10000);color:#fff;box-shadow:0 8px 0 #4d0000,0 0 0 5px #fff,0 0 60px rgba(255,0,0,.9);text-shadow:0 2px 0 #000}
@keyframes btnpulse{50%{transform:scale(1.08) rotate(-1deg)}}
.btn-small{font-family:system-ui;font-weight:800;background:rgba(255,255,255,.1);color:#fff;border:2px solid rgba(255,255,255,.4);padding:10px 20px;border-radius:999px;cursor:pointer}
footer{position:fixed;bottom:6px;left:0;right:0;text-align:center;font:11px system-ui;opacity:.45;z-index:3;padding:0 10px}
/* stage */
.stage-title{font-size:clamp(40px,11vw,110px);font-style:italic;color:var(--gold);text-shadow:0 0 30px #ff9500,0 6px 0 #5a1800}
.stage-title.red{color:#fff;text-shadow:0 0 30px #f00,0 0 60px #f00,0 6px 0 #500}
.stage-sub{font-family:system-ui;font-weight:900;font-size:clamp(16px,4vw,26px);letter-spacing:.15em;text-transform:uppercase;min-height:1.3em}
.reel-wrap{position:relative;width:min(520px,92vw);padding:14px;border-radius:26px;background:linear-gradient(135deg,var(--gold),var(--pink),var(--cyan),var(--gold));background-size:300% 300%;animation:grad 2s linear infinite;box-shadow:0 0 60px rgba(255,46,136,.7)}
@keyframes grad{to{background-position:300% 0}}
.reel-lights{position:absolute;inset:4px;border-radius:22px;border:4px dotted #fff;animation:lights .3s steps(2) infinite;pointer-events:none}
@keyframes lights{50%{border-color:var(--gold)}}
.reel{--h:110px;height:calc(var(--h)*3);overflow:hidden;border-radius:16px;background:#0b0218;position:relative;mask-image:linear-gradient(transparent,#000 25%,#000 75%,transparent)}
.reel::after{content:"";position:absolute;left:0;right:0;top:var(--h);height:var(--h);border-top:3px solid var(--gold);border-bottom:3px solid var(--gold);background:rgba(255,210,63,.08);pointer-events:none}
.strip{will-change:transform}
.cell{height:var(--h);display:flex;align-items:center;gap:16px;padding:0 22px}
.cell img{width:80px;height:80px;border-radius:50%;border:3px solid #fff;object-fit:cover;background:#222;flex:none}
.cell .nm{font-size:clamp(18px,5vw,28px);text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:system-ui;font-weight:900}
.cell .un{font:600 13px system-ui;opacity:.6;text-align:left}
.cell .txt{min-width:0}
.reel-pointer{position:absolute;top:50%;transform:translateY(-50%);font-size:34px;color:#fff;text-shadow:0 0 12px var(--pink)}
.reel-pointer.l{left:-30px}.reel-pointer.r{right:-30px}
.countdown{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;font-size:40vmin;pointer-events:none;z-index:7;color:#fff;text-shadow:0 0 40px var(--pink),0 0 80px var(--purple)}
.countdown.pop{animation:cd 1s ease-out forwards}
@keyframes cd{0%{transform:scale(3);opacity:0}20%{transform:scale(1);opacity:1}80%{opacity:1}100%{transform:scale(.5);opacity:0}}
.tension{width:min(520px,92vw);height:22px;border-radius:999px;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.3);position:relative;overflow:hidden}
.tension .bar{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#22e4ff,#ffd23f,#ff2a2a);transition:width .2s}
.tension span{position:relative;font:900 12px system-ui;letter-spacing:.3em;line-height:18px}
/* winner */
.win-label{font-size:clamp(30px,8vw,70px);color:var(--gold);text-shadow:0 0 20px #ff9500,0 5px 0 #5a1800;animation:wob 1.5s ease-in-out infinite}
.win-card{position:relative;padding:28px 34px;border-radius:30px;background:linear-gradient(160deg,rgba(123,44,255,.9),rgba(255,46,136,.9));border:5px solid #fff;box-shadow:0 0 0 8px var(--gold),0 0 120px rgba(255,210,63,.9);min-width:min(420px,90vw)}
.win-card.boom{animation:boom 1.1s cubic-bezier(.2,1.6,.4,1)}
@keyframes boom{0%{transform:scale(0) rotate(-40deg);opacity:0}60%{transform:scale(1.25) rotate(6deg);opacity:1}100%{transform:scale(1) rotate(0)}}
.win-card .halo{position:absolute;left:50%;top:110px;width:420px;height:420px;margin:-210px 0 0 -210px;background:repeating-conic-gradient(rgba(255,255,255,.35) 0 10deg,transparent 10deg 20deg);border-radius:50%;animation:spin 6s linear infinite;z-index:-1;mask-image:radial-gradient(#000 30%,transparent 70%)}
.win-card img{width:clamp(140px,40vw,200px);height:clamp(140px,40vw,200px);border-radius:50%;border:6px solid var(--gold);box-shadow:0 0 40px var(--gold);object-fit:cover;background:#222}
.win-name{font-size:clamp(28px,8vw,56px);margin-top:10px;font-family:system-ui;font-weight:900;text-shadow:0 4px 0 #2a0050,0 0 20px #fff;word-break:break-word}
.win-user{font:700 16px system-ui;opacity:.85}
.win-prize{margin-top:14px;display:inline-block;background:#fff;color:#1a0040;padding:8px 18px;border-radius:12px;font-size:clamp(16px,4vw,24px);transform:rotate(-2deg);box-shadow:0 5px 0 #c19000}
#btn-next{opacity:0;pointer-events:none;transition:opacity .5s}
#btn-next.show{opacity:1;pointer-events:auto}
/* final */
.final-title{font-size:clamp(40px,11vw,100px);font-style:italic;background:linear-gradient(180deg,#fff7c2,#ffd23f 50%,#ff7b00);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 0 #5a1800) drop-shadow(0 0 30px rgba(255,160,0,.8))}
.final-row{display:flex;gap:24px;flex-wrap:wrap;justify-content:center}
.final-row .win-card{min-width:0;width:min(300px,42vw);padding:20px 14px}
.final-row .win-card img{width:clamp(90px,26vw,170px);height:clamp(90px,26vw,170px)}
.final-row .win-name{font-size:clamp(20px,5vw,36px)}
.final-row .halo{top:95px}
.final-row .rank{position:absolute;top:-22px;left:50%;transform:translateX(-50%);background:var(--gold);color:#3a1400;padding:4px 16px;border-radius:999px;font-size:16px;border:3px solid #fff;white-space:nowrap}
@media (max-width:520px){.reel{--h:84px}.cell img{width:60px;height:60px}.reel-pointer{display:none}.final-row{gap:12px}.final-row .win-card{width:44vw;padding:18px 8px}.final-row .win-prize{font-size:13px;padding:6px 8px}.screen{gap:12px}}
@media (max-height:640px){.screen{gap:10px}.reel{--h:80px}.cell img{width:58px;height:58px}}
.screen{overflow-y:auto}
@media (max-width:520px){.screen{padding:14px 10px 30px}.final-row{flex-wrap:nowrap;gap:10px}.final-row .win-card{width:calc(50vw - 16px);padding:22px 6px 14px}.final-row .win-user{font-size:11px;word-break:break-all}.final-row .rank{font-size:12px;padding:3px 10px}}
.cell .nm,.win-name{font-family:system-ui,"Noto Sans","Noto Sans Math","Segoe UI Symbol",sans-serif}