html,body.obs-body{width:100%;height:100%;margin:0;overflow:hidden;background:transparent!important}.obs-body{font-family:Inter,"Noto Sans JP",system-ui,sans-serif}.obs-root{position:fixed;inset:0;width:100vw;height:100vh;background:transparent;overflow:hidden}.obs-root>*{width:100%;height:100%}
.obs-stage{position:relative;width:100%;height:100%;overflow:hidden;background:radial-gradient(circle at 50% 35%,#18213a 0,#0b0e15 45%,#050608 100%);color:white}.obs-stage:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0 40%,#3150ff18 45%,transparent 50%),repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 5px);animation:obsBgMove 8s linear infinite;pointer-events:none}.obs-stage:after{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at 15% 20%,#8143ff22,transparent 25%),radial-gradient(circle at 85% 70%,#27a8ff18,transparent 28%);filter:blur(30px);animation:obsFloat 7s ease-in-out infinite alternate;pointer-events:none}@keyframes obsBgMove{to{transform:translateY(16px)}}@keyframes obsFloat{to{transform:translate3d(2%,-2%,0) scale(1.03)}}
.obs-waiting{display:grid;place-items:center;text-align:center}.obs-waiting-inner{position:relative;z-index:2}.obs-kicker{font-size:1.2vw;letter-spacing:.45em;color:#8f9bb7;margin-bottom:1.4vw}.obs-wait-title{font-family:Impact,"Arial Black",sans-serif;font-size:7vw;letter-spacing:.06em;line-height:.9;margin:0;text-shadow:0 .5vw 1.8vw #000}.obs-wait-event{font-size:1.8vw;font-weight:900;margin-top:1.3vw;letter-spacing:.14em}.obs-wait-line{width:18vw;height:.3vw;margin:2vw auto 0;background:linear-gradient(90deg,transparent,#fff,transparent);position:relative;overflow:hidden}.obs-wait-line:after{content:"";position:absolute;inset:0;background:#5ea3ff;transform:translateX(-100%);animation:obsLine 1.5s ease-in-out infinite}@keyframes obsLine{50%,100%{transform:translateX(100%)}}
.obs-board-shell{position:absolute;inset:0;display:grid;place-items:center;padding:2.2vh 2.2vw}.obs-board-shell .result-preview-card{width:100%;height:100%;aspect-ratio:auto;min-height:0;border-radius:2.2vw;padding:1.5vh 1.8vw;border-width:.32vw}.obs-board-shell .result-preview-inner{height:100%;display:flex;flex-direction:column}.obs-board-shell .result-head{margin-bottom:.6vh}.obs-board-shell .result-title{font-size:3.2vw}.obs-board-shell .result-suben{font-size:1.25vw}.obs-board-shell .result-subja{font-size:.72vw}.obs-board-shell .result-columns{gap:.8vw;flex:1;min-height:0}.obs-board-shell .result-column{gap:.28vh;min-height:0}.obs-board-shell .result-header-row,.obs-board-shell .result-row{grid-template-columns:3vw minmax(0,1fr) 3.8vw 3.4vw 3.8vw 4.8vw}.obs-board-shell .result-header-row{font-size:.6vw;padding:.42vh 0}.obs-board-shell .result-row{min-height:3.15vh}.obs-board-shell .result-row+.result-row{margin-top:.28vh}.obs-board-shell .result-rank{font-size:1.05vw}.obs-board-shell .result-team{gap:.38vw;padding:.28vh .5vw}.obs-board-shell .result-team-name{font-size:.78vw}.obs-board-shell .result-logo{width:2.15vw;height:2.15vw;border-radius:.42vw}.obs-board-shell .result-avatar{width:1.88vw;height:1.88vw;border-radius:.38vw}.obs-board-shell .result-num{font-size:.82vw}.obs-board-shell .result-total{font-size:.95vw}.obs-board-shell .result-footer-note{font-size:.48vw;margin-top:.45vh}.obs-board-shell .result-badge-corner{font-size:2.15vw}.obs-board-shell .result-provisional{font-size:.52vw;padding:.18vw .45vw}
.obs-reveal .result-row{opacity:0;visibility:hidden;transform:translateX(1.5vw) scale(.985);filter:blur(3px);transition:opacity .42s cubic-bezier(.22,.8,.25,1),transform .42s cubic-bezier(.22,.8,.25,1),filter .42s,visibility 0s linear .42s}.obs-reveal .result-row.revealed{opacity:1;visibility:visible;transform:none;filter:none;transition-delay:0s}.obs-reveal .result-row.top3-mask{opacity:0!important;visibility:hidden!important;filter:blur(6px)!important}.obs-reveal .result-row.top3-mask.revealed{opacity:1!important;visibility:visible!important}.obs-reveal .result-row.top3-mask .result-team-name,.obs-reveal .result-row.top3-mask .result-team-visual,.obs-reveal .result-row.top3-mask .result-num,.obs-reveal .result-row.top3-mask .result-total{visibility:hidden}.obs-reveal .result-row.top3-mask:after{content:"TOP 3";grid-column:2/7;color:#20315e;font-weight:900;letter-spacing:.16em;font-size:.8vw}
.obs-place-scene{display:grid;place-items:center;position:relative}.obs-place-panel{position:relative;z-index:3;width:min(76vw,1500px);min-height:60vh;display:grid;grid-template-columns:33% 1fr;align-items:center;gap:4vw;padding:4vw 5vw;background:linear-gradient(135deg,#111827e8,#090c12ee);border:1px solid #ffffff20;box-shadow:0 3vw 8vw #0008;clip-path:polygon(3% 0,100% 0,97% 100%,0 100%);animation:panelIn .85s cubic-bezier(.16,.85,.2,1) both}.obs-place-panel:before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 0 40%,#ffffff0e 47%,transparent 54%);transform:translateX(-120%);animation:shine 1.5s .35s ease-out both}@keyframes panelIn{from{opacity:0;transform:translateX(7vw) scale(.97);filter:blur(14px)}to{opacity:1;transform:none;filter:none}}@keyframes shine{to{transform:translateX(120%)}}
.obs-place-number{font-family:Impact,"Arial Black",sans-serif;font-size:15vw;line-height:.75;text-align:center;color:#fff;text-shadow:0 .8vw 2vw #000}.obs-place-number small{display:block;font-family:Inter,sans-serif;font-size:1.15vw;letter-spacing:.45em;color:#9fa9c0;margin-top:2.2vw}.obs-place-content{min-width:0}.obs-place-label{font-size:1vw;letter-spacing:.4em;color:#97a2ba;font-weight:900}.obs-place-team{font-size:4vw;line-height:1;font-weight:1000;margin:.9vw 0 1.3vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.obs-place-visual{display:flex;align-items:center;gap:.7vw;margin-bottom:1.4vw}.obs-place-visual .result-logo{width:5vw;height:5vw;border-radius:1vw}.obs-place-visual .result-avatar{width:4.6vw;height:4.6vw;border-radius:.9vw}.obs-place-stats{display:flex;gap:1vw}.obs-place-stat{min-width:9vw;padding:.9vw 1vw;background:#ffffff0a;border:1px solid #ffffff12;border-radius:.7vw}.obs-place-stat span{display:block;color:#8f99ad;font-size:.75vw;letter-spacing:.08em}.obs-place-stat b{display:block;font-size:1.7vw;margin-top:.2vw}.obs-third .obs-place-number{color:#d69b70}.obs-second .obs-place-number{color:#d9e0ed}.obs-champion .obs-place-number{color:#ffe37c;text-shadow:0 0 2.3vw #ffc94e55,0 .8vw 2vw #000}.obs-champion .obs-place-panel{border-color:#ffd76a55;box-shadow:0 0 6vw #f5c54222,0 3vw 8vw #0008}.obs-champion-burst{position:absolute;inset:-20%;background:conic-gradient(from 0deg,transparent,#ffe27a12,transparent,#ffffff10,transparent);animation:spin 12s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.obs-transition-layer{position:fixed;inset:0;z-index:100;pointer-events:none;opacity:0}.obs-transition-layer.active{opacity:1}.obs-transition-layer.smooth:before,.obs-transition-layer.smooth:after{content:"";position:absolute;top:-15%;height:130%;width:65%;background:linear-gradient(115deg,#050608 0 68%,#315cff 70%,#8a54ff 72%,transparent 74%);transform:translateX(-115%) skewX(-9deg);animation:smoothWipe var(--trans-time,.65s) cubic-bezier(.65,0,.35,1) both}.obs-transition-layer.smooth:after{background:linear-gradient(115deg,#050608 0 65%,#ffffff 66%,#3c61ff 67%,transparent 69%);animation-delay:.08s;opacity:.55}@keyframes smoothWipe{0%{transform:translateX(-120%) skewX(-9deg)}48%{transform:translateX(-8%) skewX(-9deg)}55%{transform:translateX(-8%) skewX(-9deg)}100%{transform:translateX(170%) skewX(-9deg)}}
.obs-transition-layer.scan{background:#050608}.obs-transition-layer.scan:before{content:"";position:absolute;left:0;right:0;height:1.3vh;top:-3vh;background:#fff;box-shadow:0 0 2vh #6a8cff,0 0 5vh #6a8cff;animation:scanWipe var(--trans-time,.65s) cubic-bezier(.3,.8,.25,1) both}@keyframes scanWipe{0%{top:-5%;opacity:0}15%{opacity:1}55%{top:48%}100%{top:105%;opacity:.3}}
.obs-transition-layer.glitch{background:#050608;animation:glitchFlash var(--trans-time,.55s) steps(2,end) both}.obs-transition-layer.glitch:before,.obs-transition-layer.glitch:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3vh,#6d78ff44 3vh 3.4vh);mix-blend-mode:screen;animation:glitchShift .12s steps(2,end) infinite}.obs-transition-layer.glitch:after{transform:translateX(.8vw);filter:hue-rotate(120deg);opacity:.5}@keyframes glitchFlash{0%{opacity:0}20%,72%{opacity:.95}100%{opacity:0}}@keyframes glitchShift{50%{transform:translate(.7vw,-.4vh)}}
.obs-transition-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:110;display:none;background:transparent}.obs-transition-video.show{display:block}
.obs-blank{background:transparent!important}
/* v19 live lottery scenes */
.lottery-live-stage{background:radial-gradient(circle at 50% 45%,#14152d 0,#080b13 47%,#030408 100%);isolation:isolate}.lottery-live-stage:before{background:repeating-linear-gradient(90deg,#ffffff03 0 1px,transparent 1px 70px),repeating-linear-gradient(0deg,#ffffff03 0 1px,transparent 1px 70px);animation:none}.lottery-live-stage:after{background:radial-gradient(circle at 20% 30%,#633eff30,transparent 25%),radial-gradient(circle at 80% 68%,#1ac8ff20,transparent 26%);filter:blur(25px)}.lottery-scan-grid{position:absolute;inset:0;opacity:.2;background:linear-gradient(transparent 96%,#7c8dff14 100%);background-size:100% 6px;mix-blend-mode:screen;pointer-events:none}.lottery-live-header{position:absolute;z-index:8;left:4vw;right:4vw;top:4.3vh;display:grid;grid-template-columns:1fr auto;grid-template-areas:"sub prize" "title prize";align-items:end;border-bottom:1px solid #ffffff16;padding-bottom:1.4vh}.lottery-live-sub{grid-area:sub;color:#8996b9;font-size:.78vw;letter-spacing:.45em;font-weight:900}.lottery-live-title{grid-area:title;font-family:Impact,"Arial Black",sans-serif;font-size:3.9vw;letter-spacing:.07em;line-height:1;color:#fff;text-shadow:0 0 2vw #735bff30}.lottery-live-prize{grid-area:prize;align-self:center;padding:.7vw 1.2vw;border:1px solid #ffffff24;background:#ffffff08;clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);font-weight:900;font-size:1vw;letter-spacing:.1em}.lottery-slot-wrap{position:absolute;z-index:5;left:50%;top:55%;transform:translate(-50%,-50%);width:68vw}.lottery-slot-top,.lottery-slot-footer{display:flex;justify-content:space-between;align-items:center;color:#7e8aa7;font-size:.72vw;letter-spacing:.18em;font-weight:900;padding:.7vw 1.2vw}.lottery-slot-top b{color:#9d8cff}.lottery-slot-footer b{font-size:1.05vw;color:#fff;margin-left:.3vw}.lottery-reel-window{position:relative;height:54vh;overflow:hidden;border:1px solid #ffffff20;background:linear-gradient(180deg,#080b12f5,#111729ec 50%,#080b12f5);box-shadow:0 3vw 8vw #0009,inset 0 0 5vw #6d55ff0a;clip-path:polygon(2% 0,98% 0,100% 5%,100% 95%,98% 100%,2% 100%,0 95%,0 5%)}.lottery-reel-window:before,.lottery-reel-window:after{content:"";position:absolute;left:0;right:0;height:17%;z-index:5;pointer-events:none}.lottery-reel-window:before{top:0;background:linear-gradient(#080b12 10%,transparent)}.lottery-reel-window:after{bottom:0;background:linear-gradient(transparent,#080b12 90%)}.lottery-reel-glow{position:absolute;left:0;right:0;top:50%;height:12%;transform:translateY(-50%);background:linear-gradient(90deg,transparent,#735bff10,#35caff0a,transparent);box-shadow:0 0 2vw #6a5fff22,inset 0 1px #ffffff18,inset 0 -1px #ffffff18}.lottery-reel{position:absolute;inset:0;display:grid;grid-template-rows:repeat(9,1fr);padding:0 2vw}.lottery-reel-row{display:grid;grid-template-columns:6vw 1fr 8vw;align-items:center;border-bottom:1px solid #ffffff08;opacity:.27;filter:blur(1.2px);transform:scale(.97);transition:.15s}.lottery-reel-row span{font-family:Impact,"Arial Black",sans-serif;font-size:1.35vw;color:#67728e}.lottery-reel-row b{font-size:1.45vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.03em}.lottery-reel-row em{text-align:right;color:#59647e;font-size:.58vw;font-style:normal;letter-spacing:.15em}.lottery-reel-row.near-lock,.lottery-reel-row:nth-child(5){opacity:1;filter:none;transform:scale(1.035)}.lottery-reel-row:nth-child(5) span{color:#8f7cff}.lottery-reel-row:nth-child(5) b{font-size:2.25vw;text-shadow:0 0 1.5vw #725fff44}.lottery-target{position:absolute;z-index:7;left:-1vw;right:-1vw;top:50%;height:11.7%;transform:translateY(-50%);border-top:2px solid #8b79ff;border-bottom:2px solid #39d4ff;box-shadow:0 0 2vw #6c6aff20;display:flex;align-items:center;justify-content:space-between;padding:0 .9vw;color:#a9a0ff;font-size:.55vw;letter-spacing:.28em;font-weight:900;pointer-events:none}.lottery-target i{display:block;width:1.2vw;height:1.2vw;border-top:.18vw solid #fff;border-left:.18vw solid #fff;transform:rotate(135deg)}.lottery-target i:last-child{transform:rotate(-45deg)}.lottery-slot-stage.running .lottery-reel-window{animation:slotPulse .46s ease-in-out infinite alternate}.lottery-slot-stage.braking .lottery-reel-window{animation-duration:.8s}.lottery-slot-stage.locked .lottery-target{animation:targetLock .32s ease-out 3}.lottery-slot-stage.locked .lottery-reel-row:nth-child(5){color:white;background:linear-gradient(90deg,transparent,#7560ff22,transparent)}@keyframes slotPulse{to{box-shadow:0 3vw 8vw #0009,inset 0 0 6vw #735dff20}}@keyframes targetLock{50%{filter:brightness(2.2);transform:translateY(-50%) scale(1.015)}}
.lottery-winner-layer{position:absolute;z-index:30;inset:0;display:grid;place-items:center;opacity:0;visibility:hidden;transform:scale(1.08);filter:blur(18px);transition:opacity .55s,transform .7s cubic-bezier(.16,.9,.2,1),filter .55s,visibility 0s .6s}.lottery-live-stage.winner .lottery-winner-layer{opacity:1;visibility:visible;transform:none;filter:none;transition-delay:.12s,0s,0s,0s}.lottery-live-stage.winner .lottery-slot-wrap,.lottery-live-stage.winner .gacha-layout{filter:blur(12px) brightness(.35);transform-origin:center;transition:filter .7s,transform .7s}.lottery-slot-stage.winner .lottery-slot-wrap{transform:translate(-50%,-50%) scale(1.05)}.lottery-win-card{position:relative;width:min(62vw,1180px);padding:4.2vw 5vw;text-align:center;background:linear-gradient(145deg,#101522f3,#090c13f6);border:1px solid #ffffff30;box-shadow:0 0 0 1px #7e70ff35,0 3vw 9vw #000c,0 0 6vw #735cff25;clip-path:polygon(4% 0,96% 0,100% 10%,100% 90%,96% 100%,4% 100%,0 90%,0 10%)}.lottery-win-card:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#ffffff14 47%,transparent 60%);transform:translateX(-120%);animation:lotteryWinnerShine 1.7s .25s ease-out forwards}.lottery-win-kicker{color:#8f83ff;font-size:.95vw;letter-spacing:.65em;font-weight:1000;margin-bottom:1.4vw}.lottery-winner-avatar{width:9vw;height:9vw;min-width:110px;min-height:110px;max-width:180px;max-height:180px;margin:0 auto 1.2vw;border-radius:1.6vw;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,#4d57a0,#172033);font-family:Impact,"Arial Black",sans-serif;font-size:4vw;box-shadow:0 0 0 .18vw #ffffff25,0 0 2.5vw #6778ff30}.lottery-winner-avatar img{width:100%;height:100%;object-fit:cover}.lottery-win-name{font-family:Impact,"Arial Black",sans-serif;font-size:5.8vw;line-height:.95;letter-spacing:.035em;text-shadow:0 0 2.2vw #6a64ff3d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lottery-win-prize{font-size:1.35vw;font-weight:900;letter-spacing:.12em;margin-top:1.2vw;color:#dce1f8}.lottery-win-meta{font-size:.65vw;letter-spacing:.32em;color:#77829f;margin-top:1.4vw}.lottery-final-flash{position:absolute;z-index:25;inset:0;background:white;opacity:0;pointer-events:none}.lottery-live-stage.winner .lottery-final-flash{animation:lotteryFlash .65s ease-out}.lottery-confetti{position:absolute;z-index:31;inset:0;pointer-events:none;overflow:hidden}.lottery-confetti i{position:absolute;left:var(--x);top:-8%;width:.45vw;height:1.05vw;opacity:0;background:hsl(calc(var(--i)*37deg),90%,68%);transform:rotate(var(--r));box-shadow:0 0 .6vw currentColor}.lottery-live-stage.winner .lottery-confetti i{animation:confettiFall 3.6s var(--d) cubic-bezier(.1,.65,.25,1) forwards}@keyframes lotteryWinnerShine{to{transform:translateX(120%)}}@keyframes lotteryFlash{0%{opacity:0}15%{opacity:.88}100%{opacity:0}}@keyframes confettiFall{0%{opacity:1;transform:translateY(-5vh) rotate(var(--r))}100%{opacity:.15;transform:translateY(120vh) rotate(calc(var(--r) + 680deg))}}
.gacha-layout{position:absolute;z-index:5;inset:15vh 4vw 3vh;display:grid;grid-template-columns:.65fr 1.35fr;align-items:center}.gacha-copy{padding-left:5vw}.gacha-copy-small{font-size:.8vw;letter-spacing:.5em;color:#8290b5;font-weight:900}.gacha-copy-main{font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;font-size:6.6vw;font-weight:1000;line-height:.78;letter-spacing:.04em;margin-top:1vw;background:linear-gradient(#fff,#9aa9ff);-webkit-background-clip:text;color:transparent;text-shadow:0 1vw 4vw #0005}.gacha-copy-meta{font-size:.7vw;letter-spacing:.27em;color:#75829f;margin-top:1.7vw}.gacha-machine{position:relative;width:42vw;height:70vh;margin-left:auto;margin-right:5vw}.gacha-halo{position:absolute;left:50%;top:37%;width:34vw;height:34vw;transform:translate(-50%,-50%);border-radius:50%;border:1px solid #7380ff18;box-shadow:0 0 7vw #5164ff20,inset 0 0 6vw #47cfff0c}.gacha-drum{position:absolute;z-index:5;left:50%;top:5%;width:27vw;height:27vw;transform:translateX(-50%);border-radius:50%;border:.55vw solid #2c354b;background:radial-gradient(circle at 34% 27%,#ffffff20,#12192a80 28%,#060912dc 68%);box-shadow:inset 0 0 3vw #74d6ff1c,0 1.2vw 4vw #0009;overflow:hidden}.gacha-drum:before{content:"";position:absolute;inset:5%;border-radius:50%;border:1px solid #ffffff12}.gacha-drum-shine{position:absolute;z-index:3;left:15%;top:8%;width:24%;height:48%;border-radius:50%;background:linear-gradient(110deg,#ffffff20,transparent);transform:rotate(35deg);filter:blur(.2vw)}.gacha-balls{position:absolute;inset:8%;border-radius:50%}.gacha-ball{position:absolute;left:var(--x);top:var(--y);width:2.7vw;height:2.7vw;margin:-1.35vw;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#7d70ff,#2f3f91);border:.12vw solid #ffffff2a;box-shadow:inset -.25vw -.3vw .5vw #0005,inset .15vw .15vw .35vw #fff3,0 .3vw .7vw #0005;animation:gachaJitter 1.3s var(--delay) ease-in-out infinite alternate}.gacha-ball:nth-child(3n){background:linear-gradient(145deg,#5ae1ff,#2363b9)}.gacha-ball:nth-child(4n){background:linear-gradient(145deg,#ffdb68,#da6a49)}.gacha-ball:nth-child(5n){background:linear-gradient(145deg,#ff6ea9,#983e84)}.gacha-ball span{font-size:.52vw;font-weight:1000;color:#fff;text-shadow:0 1px 3px #0008}.gacha-axis{position:absolute;z-index:5;left:50%;top:50%;width:7vw;height:7vw;transform:translate(-50%,-50%);border-radius:50%;background:#11182a;border:.45vw solid #39445f;box-shadow:0 0 0 .5vw #0b0e17,0 0 1.5vw #000}.gacha-axis i{position:absolute;left:50%;top:50%;width:3.8vw;height:.55vw;background:#7b89b1;transform:translate(-50%,-50%) rotate(35deg);border-radius:999px}.gacha-neck{position:absolute;z-index:4;left:50%;top:55%;width:8vw;height:8vw;transform:translateX(-50%);background:linear-gradient(90deg,#20283b,#3c4864,#20283b);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}.gacha-base{position:absolute;z-index:6;left:50%;bottom:1%;width:21vw;height:14vw;transform:translateX(-50%);background:linear-gradient(150deg,#242d43,#101523);border:.25vw solid #35405a;border-radius:1.3vw 1.3vw 2.5vw 2.5vw;box-shadow:0 2vw 4vw #0009}.gacha-handle{position:absolute;right:2.4vw;top:2.2vw;width:6vw;height:6vw;border-radius:50%;background:#111725;border:.4vw solid #46516c;box-shadow:inset 0 0 1vw #000}.gacha-handle i{position:absolute;left:50%;top:50%;width:4.8vw;height:.7vw;background:linear-gradient(90deg,#6c78a1,#c4cced);border-radius:999px;transform:translate(-50%,-50%) rotate(-18deg)}.gacha-slot{position:absolute;left:2.3vw;bottom:2.4vw;width:9vw;height:3.2vw;display:grid;place-items:center;background:#080b12;border:.25vw solid #313b52;border-radius:.6vw;color:#7e8aa8;font-size:.62vw;letter-spacing:.2em}.gacha-chute{position:absolute;z-index:8;left:50%;bottom:-3%;width:8vw;height:14vw;transform:translateX(-50%);pointer-events:none}.gacha-selected-ball{position:absolute;left:50%;top:-5vw;width:4vw;height:4vw;margin-left:-2vw;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 28%,#fff6,#ffd85d 17%,#f45a7d 67%,#7e264a);border:.2vw solid #fff5;box-shadow:0 0 1.6vw #ffb75a55;opacity:0}.gacha-selected-ball span{font-size:1.3vw;color:white}.lottery-gacha-stage.running .gacha-drum{animation:gachaShake .45s ease-in-out infinite alternate}.lottery-gacha-stage.running .gacha-balls{animation:gachaSpin .8s linear infinite}.lottery-gacha-stage.running .gacha-handle i{animation:gachaHandle .6s linear infinite}.lottery-gacha-stage.ejecting .gacha-selected-ball{opacity:1;animation:gachaDrop 1.65s cubic-bezier(.2,.8,.32,1) forwards}.lottery-gacha-stage.opening .gacha-selected-ball{animation:gachaOpen .8s ease-out forwards}@keyframes gachaJitter{to{transform:translate(.5vw,-.25vw) rotate(30deg)}}@keyframes gachaShake{to{transform:translateX(-50%) rotate(3deg)}}@keyframes gachaSpin{to{transform:rotate(360deg)}}@keyframes gachaHandle{to{transform:translate(-50%,-50%) rotate(342deg)}}@keyframes gachaDrop{0%{top:-5vw;transform:scale(.7);opacity:0}18%{opacity:1}72%{top:7vw;transform:scale(1.05)}100%{top:8.8vw;transform:scale(1)}}@keyframes gachaOpen{0%{top:8.8vw;transform:scale(1)}45%{filter:brightness(3);transform:scale(1.35)}100%{filter:brightness(5);transform:scale(2.4);opacity:0}}
.lottery-win-team{margin-top:.65vw;color:#9da9c9;font-size:1.05vw;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
/* v23: brighter premium gacha style */
.lottery-gacha-stage{
background:
radial-gradient(circle at 50% 22%, rgba(255,255,255,.95) 0, rgba(239,247,255,.95) 16%, rgba(214,235,255,.9) 34%, rgba(191,214,255,.52) 50%, rgba(164,188,240,.22) 62%, rgba(125,154,219,.08) 72%, transparent 80%),
linear-gradient(180deg,#fcfdff 0%,#edf6ff 32%,#dbeeff 64%,#d4e4ff 100%);
color:#193153;
}
.lottery-gacha-stage:before{
background:
radial-gradient(circle at 50% 0%,rgba(255,255,255,.75),transparent 44%),
repeating-linear-gradient(90deg,rgba(117,170,255,.08) 0 2px,transparent 2px 68px),
repeating-linear-gradient(0deg,rgba(117,170,255,.08) 0 2px,transparent 2px 68px);
opacity:.75;
}
.lottery-gacha-stage:after{
background:
radial-gradient(circle at 18% 22%, rgba(255,145,199,.35), transparent 28%),
radial-gradient(circle at 84% 18%, rgba(112,224,255,.35), transparent 30%),
radial-gradient(circle at 82% 72%, rgba(255,221,118,.25), transparent 28%),
radial-gradient(circle at 20% 78%, rgba(168,146,255,.18), transparent 22%);
filter:blur(40px);
}
.lottery-gacha-stage .lottery-scan-grid{opacity:.13;background:linear-gradient(transparent 94%,rgba(79,132,221,.18) 100%);background-size:100% 8px}
.lottery-gacha-stage .lottery-live-header{border-bottom:1px solid rgba(53,99,170,.18)}
.lottery-gacha-stage .lottery-live-sub{color:#6a86af}
.lottery-gacha-stage .lottery-live-title{color:#18426e;text-shadow:0 .6vw 2.2vw rgba(100,160,255,.24)}
.lottery-gacha-stage .lottery-live-prize{background:rgba(255,255,255,.64);border-color:rgba(89,145,221,.28);color:#31578f;box-shadow:0 .4vw 1.6vw rgba(117,166,255,.16)}
.lottery-gacha-stage .gacha-copy-small{color:#6a8ab5}
.lottery-gacha-stage .gacha-copy-main{background:linear-gradient(180deg,#2e5f9b 0%,#7a59ff 55%,#ff6aa9 100%);-webkit-background-clip:text;color:transparent;text-shadow:none}
.lottery-gacha-stage .gacha-copy-meta{color:#6f82a0}
.lottery-gacha-stage .gacha-machine{filter:drop-shadow(0 1.6vw 2.8vw rgba(125,173,255,.22))}
.lottery-gacha-stage .gacha-halo{
width:36vw;height:36vw;
border:1px solid rgba(108,160,255,.22);
box-shadow:0 0 8vw rgba(88,180,255,.22),inset 0 0 6vw rgba(255,255,255,.34);
background:radial-gradient(circle, rgba(255,255,255,.35), rgba(255,255,255,0) 58%);
}
.lottery-gacha-stage .gacha-drum{
border:.55vw solid #c4ddff;
background:radial-gradient(circle at 34% 22%, rgba(255,255,255,.95), rgba(240,249,255,.94) 28%, rgba(225,240,255,.86) 48%, rgba(187,214,255,.56) 65%, rgba(165,191,232,.24) 78%, rgba(255,255,255,.12) 100%);
box-shadow:inset 0 0 5vw rgba(255,255,255,.52),0 1.2vw 4vw rgba(118,161,232,.25),0 0 3vw rgba(131,193,255,.15);
}
.lottery-gacha-stage .gacha-drum:before{border-color:rgba(108,160,255,.3)}
.lottery-gacha-stage .gacha-drum-shine{background:linear-gradient(110deg,rgba(255,255,255,.95),rgba(255,255,255,.08));filter:blur(.12vw)}
.lottery-gacha-stage .gacha-ball{border:.12vw solid rgba(255,255,255,.85);box-shadow:inset -.25vw -.3vw .5vw rgba(0,0,0,.08), inset .15vw .15vw .35vw rgba(255,255,255,.75), 0 .45vw .9vw rgba(82,122,200,.18)}
.lottery-gacha-stage .gacha-ball:nth-child(1n){background:linear-gradient(145deg,#69d2ff,#6b89ff)}
.lottery-gacha-stage .gacha-ball:nth-child(2n){background:linear-gradient(145deg,#ffd76d,#ff9c7d)}
.lottery-gacha-stage .gacha-ball:nth-child(3n){background:linear-gradient(145deg,#ff9fd1,#ff6cb3)}
.lottery-gacha-stage .gacha-ball:nth-child(4n){background:linear-gradient(145deg,#8dffd8,#52c6ad)}
.lottery-gacha-stage .gacha-ball:nth-child(5n){background:linear-gradient(145deg,#c8abff,#8a77ff)}
.lottery-gacha-stage .gacha-ball span{font-size:.5vw;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.lottery-gacha-stage .gacha-axis{background:linear-gradient(180deg,#fff,#d9edff);border-color:#a8cfff;box-shadow:0 0 0 .5vw rgba(255,255,255,.6),0 0 1.5vw rgba(120,175,255,.32)}
.lottery-gacha-stage .gacha-axis i{background:linear-gradient(90deg,#8eb6eb,#ffffff,#8eb6eb)}
.lottery-gacha-stage .gacha-neck{background:linear-gradient(90deg,#d4edff,#ffffff,#cce1ff)}
.lottery-gacha-stage .gacha-base{
background:linear-gradient(160deg,#ffffff 0%,#eff7ff 48%,#dbeaff 100%);
border-color:#bfd8ff;
box-shadow:0 1.1vw 3vw rgba(104,145,212,.23), inset 0 1px 0 rgba(255,255,255,.95);
}
.lottery-gacha-stage .gacha-handle{background:linear-gradient(180deg,#ffffff,#e6f2ff);border-color:#c5dbfb;box-shadow:inset 0 0 1vw rgba(118,161,232,.12),0 .35vw 1vw rgba(120,166,243,.16)}
.lottery-gacha-stage .gacha-handle i{background:linear-gradient(90deg,#78d9ff,#ff8fce,#ffd76d)}
.lottery-gacha-stage .gacha-slot{background:rgba(255,255,255,.85);border-color:#c5dcff;color:#4b6d9d}
.lottery-gacha-stage .gacha-chute{filter:drop-shadow(0 .5vw 1.2vw rgba(100,159,255,.2))}
.lottery-gacha-stage .gacha-selected-ball{background:radial-gradient(circle at 30% 28%,#fff,#fff1a7 19%,#ffb054 45%,#ff6b9e 72%,#8a55ff 100%);border:.24vw solid rgba(255,255,255,.95);box-shadow:0 0 2.4vw rgba(255,177,94,.55),0 0 .8vw rgba(255,255,255,.9)}
.lottery-gacha-stage .gacha-selected-ball span{color:#ffffff;text-shadow:0 1px 8px rgba(0,0,0,.25)}
.lottery-gacha-stage.winner .gacha-layout{filter:blur(10px) brightness(.82)}
.lottery-gacha-stage .lottery-win-card{
background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(242,248,255,.97) 55%, rgba(235,243,255,.97));
border-color:rgba(136,184,255,.5);
box-shadow:0 0 0 1px rgba(124,179,255,.3),0 2vw 6vw rgba(110,159,255,.22),0 0 5vw rgba(255,182,102,.12);
}
.lottery-gacha-stage .lottery-win-card:before{background:linear-gradient(110deg,transparent 26%,rgba(255,255,255,.65) 47%,transparent 62%)}
.lottery-gacha-stage .lottery-win-kicker{color:#5c7fff}
.lottery-gacha-stage .lottery-winner-avatar{background:linear-gradient(135deg,#ffffff,#dff0ff 60%,#d4d7ff);box-shadow:0 0 0 .18vw rgba(136,184,255,.38),0 0 2.5vw rgba(117,171,255,.24)}
.lottery-gacha-stage .lottery-win-name{color:#224a78;text-shadow:0 0 2vw rgba(139,177,255,.22)}
.lottery-gacha-stage .lottery-win-team{color:#5e73a1}
.lottery-gacha-stage .lottery-win-prize{color:#5a6f94}
.lottery-gacha-stage .lottery-win-meta{color:#8296b6}
.lottery-gacha-stage .lottery-final-flash{background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.9),rgba(255,249,214,.9));}
.lottery-gacha-stage .lottery-confetti i{box-shadow:0 0 .9vw currentColor}
/* v24: cute + luxury + esports + more realistic gacha */
.lottery-gacha-stage .lottery-live-header{
backdrop-filter:blur(.35vw);
background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,.08));
border:1px solid rgba(130,178,255,.18);
border-left:none;border-right:none;
padding:.9vh 1.4vw 1.2vh;
border-radius:1vw;
}
.lottery-gacha-stage .lottery-live-title{
letter-spacing:.05em;
position:relative;
}
.lottery-gacha-stage .lottery-live-title:after{
content:"LIVE ESPORTS LOTTERY";
position:absolute;left:.15vw;top:100%;margin-top:.5vw;font-size:.72vw;letter-spacing:.4em;color:#7a93ba;font-family:Inter,"Noto Sans JP",system-ui,sans-serif;font-weight:900;
}
.lottery-gacha-stage .lottery-live-prize{
clip-path:polygon(7% 0,100% 0,93% 100%,0 100%);
border-width:.12vw;
}
.lottery-gacha-stage .gacha-layout{grid-template-columns:.72fr 1.28fr}
.lottery-gacha-stage .gacha-copy{padding-left:4.2vw}
.lottery-gacha-stage .gacha-copy-main{font-size:6.7vw;line-height:.76;filter:drop-shadow(0 .4vw 1.6vw rgba(163,167,255,.18))}
.lottery-gacha-stage .gacha-copy-main .small{font-size:.6em}
.lottery-gacha-stage .gacha-copy:before{
content:"✦ PREMIUM DRAW ✦";
display:inline-flex;align-items:center;gap:.4vw;
margin-bottom:1vw;padding:.45vw .95vw;border-radius:999px;
background:linear-gradient(90deg,rgba(255,255,255,.88),rgba(255,255,255,.56));
border:1px solid rgba(143,184,255,.34);
color:#5576a8;font-size:.68vw;font-weight:900;letter-spacing:.24em;
box-shadow:0 .4vw 1vw rgba(119,171,255,.12);
}
.lottery-gacha-stage .gacha-machine:before,
.lottery-gacha-stage .gacha-machine:after{
content:"";position:absolute;pointer-events:none;z-index:2;
border:1px solid rgba(135,182,255,.18);border-radius:50%;
}
.lottery-gacha-stage .gacha-machine:before{left:8%;right:8%;top:1%;bottom:23%;box-shadow:0 0 3vw rgba(118,174,255,.14)}
.lottery-gacha-stage .gacha-machine:after{left:15%;right:15%;top:9%;bottom:31%;border-style:dashed;opacity:.55}
.lottery-gacha-stage .gacha-drum{overflow:visible}
.lottery-gacha-stage .gacha-drum::after{
content:"";position:absolute;inset:7%;border-radius:50%;
background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.75),transparent 22%, transparent 45%, rgba(123,188,255,.08) 64%, transparent 70%);
pointer-events:none;
}
.lottery-gacha-stage .gacha-balls{overflow:hidden}
.lottery-gacha-stage .gacha-ball{
transition:left .11s linear,top .11s linear,transform .11s linear,box-shadow .15s ease;
will-change:left,top,transform;
}
.lottery-gacha-stage .gacha-ball::after{
content:"";position:absolute;left:18%;top:15%;width:30%;height:30%;border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.98),rgba(255,255,255,.15) 72%,transparent 74%);
}
.lottery-gacha-stage.running .gacha-balls,
.lottery-gacha-stage.running .gacha-drum,
.lottery-gacha-stage.running .gacha-handle i{animation:none !important}
.lottery-gacha-stage.running .gacha-drum{transform:translateX(-50%) rotate(.2deg)}
.lottery-gacha-stage.braking .gacha-drum{transform:translateX(-50%) rotate(-.35deg);transition:transform .35s ease}
.lottery-gacha-stage.settling .gacha-ball{box-shadow:inset -.2vw -.2vw .45vw rgba(0,0,0,.08), inset .16vw .16vw .35vw rgba(255,255,255,.8), 0 .22vw .5vw rgba(92,132,205,.12)}
.lottery-gacha-stage .gacha-neck{box-shadow:0 .45vw .85vw rgba(105,149,219,.14)}
.lottery-gacha-stage .gacha-base{position:absolute;overflow:hidden}
.lottery-gacha-stage .gacha-base:before{
content:"";position:absolute;left:0;right:0;top:0;height:22%;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,0));opacity:.82;
}
.lottery-gacha-stage .gacha-base:after{
content:"";position:absolute;left:9%;right:9%;bottom:.9vw;height:.45vw;border-radius:999px;background:linear-gradient(90deg,#8fe3ff,#ffd76d,#ff93c6,#97a3ff,#8fe3ff);box-shadow:0 0 1vw rgba(141,206,255,.35);
}
.lottery-gacha-stage .gacha-slot{
font-weight:900;letter-spacing:.18em;
box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.lottery-gacha-stage .gacha-slot:before{
content:"WINNER BALL";position:absolute;inset:0;display:grid;place-items:center;color:#6c84ad;font-size:.56vw;letter-spacing:.18em;
}
.lottery-gacha-stage .gacha-selected-ball{
width:4.7vw;height:4.7vw;margin-left:-2.35vw;
filter:drop-shadow(0 .7vw 1vw rgba(255,154,111,.22));
}
.lottery-gacha-stage .gacha-selected-ball span{font-size:1.18vw;font-weight:1000}
.lottery-gacha-stage.ejecting .gacha-selected-ball{animation:gachaDropReal .95s cubic-bezier(.18,.8,.22,1) forwards}
.lottery-gacha-stage.opening .gacha-selected-ball{animation:gachaOpenReal 1.02s cubic-bezier(.14,.88,.2,1) forwards}
.lottery-gacha-stage .lottery-win-card{
clip-path:polygon(4% 0,96% 0,100% 9%,100% 91%,96% 100%,4% 100%,0 91%,0 9%);
}
.lottery-gacha-stage .lottery-win-card:after{
content:"";position:absolute;inset:.55vw;border:1px solid rgba(146,188,255,.26);clip-path:inherit;pointer-events:none;
}
.lottery-gacha-stage .lottery-win-kicker{
display:inline-flex;align-items:center;justify-content:center;gap:.5vw;padding:.45vw 1vw;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,.84),rgba(255,255,255,.44));border:1px solid rgba(145,183,255,.34);
}
.lottery-gacha-stage .lottery-win-name{letter-spacing:.01em}
.lottery-gacha-stage .lottery-win-team{
display:inline-flex;align-items:center;justify-content:center;margin-top:.75vw;padding:.4vw .95vw;border-radius:999px;background:rgba(255,255,255,.6);border:1px solid rgba(141,182,255,.25);
}
@keyframes gachaDropReal{
0%{top:-5vw;transform:translateY(0) scale(.72) rotate(-18deg);opacity:0}
12%{opacity:1}
50%{top:4.8vw;transform:translateY(0) scale(1.04) rotate(8deg)}
72%{top:8.2vw;transform:translateY(0) scale(.98) rotate(-4deg)}
84%{top:7.2vw;transform:translateY(0) scale(1.02) rotate(3deg)}
100%{top:8vw;transform:translateY(0) scale(1) rotate(0)}
}
@keyframes gachaOpenReal{
0%{top:8vw;transform:scale(1) rotate(0);opacity:1;filter:brightness(1)}
35%{transform:scale(1.32) rotate(8deg);filter:brightness(2.1)}
70%{transform:scale(1.95) rotate(-3deg);filter:brightness(3.8);opacity:.95}
100%{transform:scale(2.8);filter:brightness(5.4);opacity:0}
}
.lottery-gacha-stage .gacha-copy-accent{margin-top:1.15vw;font-size:.86vw;letter-spacing:.28em;color:#7c90b2;font-weight:900}
/* v25: cinematic lottery video -> luxury winner reveal */
.lottery-cinematic-stage{background:#020202;color:#fff;isolation:isolate}
.lottery-cinematic-stage:before,.lottery-cinematic-stage:after{display:none}
.lottery-cinematic-video-wrap{position:absolute;inset:0;z-index:1;background:#000;overflow:hidden;transition:opacity .12s linear}
.lottery-cinematic-video-wrap.ended{opacity:0;pointer-events:none}
.lottery-cinematic-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.lottery-cinematic-loading{position:absolute;inset:0;display:grid;place-content:center;gap:.7vw;text-align:center;background:#030303;color:#b99a5a;transition:opacity .25s ease;pointer-events:none}
.lottery-cinematic-loading span{width:3.4vw;height:3.4vw;margin:auto;border-radius:50%;border:.16vw solid rgba(217,179,95,.2);border-top-color:#e8c46f;animation:cinematicLoader .9s linear infinite}
.lottery-cinematic-loading b{font-size:.72vw;letter-spacing:.42em}
.lottery-cinematic-stage.video-playing .lottery-cinematic-loading{opacity:0}
@keyframes cinematicLoader{to{transform:rotate(360deg)}}
.cinematic-result{position:absolute;inset:0;z-index:4;display:grid;place-items:center;overflow:hidden;background:#030303;opacity:0;visibility:hidden}
.lottery-cinematic-stage.revealing .cinematic-result{opacity:1;visibility:visible}
.cinematic-result-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,#3b2917 0,#160e09 30%,#090606 56%,#020202 100%);overflow:hidden}
.cinematic-result-bg:before{content:"";position:absolute;inset:-30%;background:conic-gradient(from 0deg at 50% 50%,transparent 0 7%,rgba(255,213,111,.11) 9%,transparent 13% 23%,rgba(194,42,34,.10) 25%,transparent 29% 42%,rgba(255,216,115,.08) 44%,transparent 49% 100%);animation:cinematicRaySpin 18s linear infinite}
.cinematic-result-bg:after{content:"";position:absolute;left:8%;right:8%;top:7%;bottom:6%;border:.08vw solid rgba(255,207,102,.28);clip-path:polygon(2.5% 0,97.5% 0,100% 5%,100% 95%,97.5% 100%,2.5% 100%,0 95%,0 5%);box-shadow:inset 0 0 5vw rgba(255,200,90,.05),0 0 4vw rgba(255,187,58,.05)}
@keyframes cinematicRaySpin{to{transform:rotate(360deg)}}
.cinematic-result-lines{position:absolute;inset:0;pointer-events:none}
.cinematic-result-lines i{position:absolute;display:block;background:linear-gradient(90deg,transparent,#e9bb5a,transparent);height:.08vw;opacity:.45;filter:drop-shadow(0 0 .5vw #edb74c)}
.cinematic-result-lines i:nth-child(1){left:3%;top:18%;width:32%;transform:rotate(-8deg)}
.cinematic-result-lines i:nth-child(2){right:3%;top:18%;width:32%;transform:rotate(8deg)}
.cinematic-result-lines i:nth-child(3){left:2%;bottom:18%;width:35%;transform:rotate(8deg)}
.cinematic-result-lines i:nth-child(4){right:2%;bottom:18%;width:35%;transform:rotate(-8deg)}
.cinematic-sparks{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cinematic-sparks i{position:absolute;left:var(--x);top:-8%;width:.22vw;height:.7vw;border-radius:.08vw;background:linear-gradient(180deg,#fff4c2,#d59b31);opacity:0;transform:rotate(var(--r));box-shadow:0 0 .7vw rgba(255,206,99,.6)}
.lottery-cinematic-stage.revealing .cinematic-sparks i{animation:cinematicSparkFall 3.4s cubic-bezier(.2,.6,.35,1) var(--d) both}
@keyframes cinematicSparkFall{0%{opacity:0;transform:translateY(-8vh) rotate(var(--r)) scale(.3)}15%{opacity:.9}100%{opacity:0;transform:translateY(112vh) rotate(calc(var(--r) + 220deg)) scale(1)}}
.cinematic-flash{position:absolute;inset:0;background:radial-gradient(circle,#fff9df 0,#ffd879 20%,rgba(247,181,52,.52) 42%,transparent 68%);opacity:0;pointer-events:none;z-index:10}
.lottery-cinematic-stage.revealing .cinematic-flash{animation:cinematicResultFlash .72s ease-out both}
@keyframes cinematicResultFlash{0%{opacity:0}7%{opacity:1}24%{opacity:.62}100%{opacity:0}}
.cinematic-result-frame{position:relative;z-index:5;width:72vw;min-height:68vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4.3vh 5vw 4.6vh;text-align:center}
.cinematic-result-frame:before,.cinematic-result-frame:after{content:"";position:absolute;top:0;width:8vw;height:8vw;border-top:.16vw solid #d7a744}
.cinematic-result-frame:before{left:0;border-left:.16vw solid #d7a744}
.cinematic-result-frame:after{right:0;border-right:.16vw solid #d7a744}
.cinematic-result-eyebrow{font-size:.82vw;font-weight:900;letter-spacing:.48em;color:#c7a661;opacity:0;transform:translateY(-1vw)}
.cinematic-winner-title{display:flex;gap:.28vw;margin-top:.35vw;font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;font-size:6.6vw;font-weight:1000;line-height:.92;letter-spacing:.06em;color:#fff6d1;text-shadow:0 .12vw 0 #9a6421,0 .5vw 2vw rgba(255,185,45,.34),0 1.1vw 3vw #000}
.cinematic-winner-title span{display:inline-block;opacity:0;transform:translateY(2vw) scale(.72);filter:blur(8px)}
.cinematic-winner-core{position:relative;overflow:hidden;width:100%;display:grid;grid-template-columns:15vw minmax(0,1fr);align-items:center;gap:3.1vw;margin-top:2.2vh;padding:2.1vw 3vw;background:linear-gradient(135deg,rgba(13,10,8,.92),rgba(32,22,13,.86));border:.1vw solid rgba(222,177,83,.44);clip-path:polygon(2.2% 0,100% 0,97.8% 100%,0 100%);box-shadow:0 2.3vw 6vw rgba(0,0,0,.58),inset 0 0 3vw rgba(255,199,82,.04);opacity:0;transform:translateY(2.2vw) scale(.96)}
.cinematic-winner-core:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,233,173,.09) 45%,transparent 62%);transform:translateX(-110%)}
.cinematic-avatar-shell{position:relative;width:13.2vw;height:13.2vw;display:grid;place-items:center;margin:auto}
.cinematic-avatar-shell:before{content:"";position:absolute;inset:-.45vw;border:.14vw solid rgba(240,195,96,.45);transform:rotate(45deg);box-shadow:0 0 2.2vw rgba(255,192,59,.16)}
.cinematic-avatar-orbit{position:absolute;inset:-1.2vw;border-radius:50%;border:.09vw dashed rgba(255,212,115,.38);opacity:0}
.cinematic-winner-avatar{position:relative;width:10.2vw;height:10.2vw;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:linear-gradient(145deg,#20170f,#0b0908);border:.28vw solid #e6bb60;box-shadow:0 0 0 .36vw rgba(80,52,18,.85),0 0 2.6vw rgba(255,196,62,.26);font-size:3vw;font-weight:1000;color:#f7d784}
.cinematic-winner-avatar img{width:100%;height:100%;object-fit:cover}
.cinematic-winner-info{text-align:left;min-width:0}
.cinematic-winner-name{font-size:5.2vw;line-height:.98;font-weight:1000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;text-shadow:0 .2vw 1.1vw rgba(0,0,0,.65);letter-spacing:.015em}
.cinematic-winner-team{display:inline-flex;align-items:center;gap:.8vw;margin-top:1vw;padding:.5vw 1vw .48vw;border-left:.2vw solid #d5a443;background:linear-gradient(90deg,rgba(211,162,67,.17),transparent);font-size:1.05vw;font-weight:900;letter-spacing:.14em;color:#efe0bd}
.cinematic-winner-team span{font-size:.63vw;letter-spacing:.32em;color:#b28d4e}
.cinematic-prize-box{margin-top:1.4vw;display:flex;align-items:center;gap:1vw;font-size:1.05vw;color:#d2b274}
.cinematic-prize-box span{padding:.42vw .7vw;border:1px solid rgba(216,171,79,.42);font-size:.58vw;letter-spacing:.26em;font-weight:900}
.cinematic-prize-box b{font-size:1.45vw;color:#fff1c8;letter-spacing:.05em}
.cinematic-result-footer{display:flex;align-items:center;gap:1.2vw;margin-top:1.3vw;color:#a88950;font-size:.68vw;letter-spacing:.28em;font-weight:900;opacity:0}
.cinematic-result-footer i{display:block;width:4vw;height:1px;background:linear-gradient(90deg,transparent,#bd9143,transparent)}
.lottery-cinematic-stage.revealing .cinematic-result-eyebrow{animation:cinematicEyebrow .7s .18s cubic-bezier(.16,.84,.24,1) forwards}
.lottery-cinematic-stage.revealing .cinematic-winner-title span{animation:cinematicLetter .68s cubic-bezier(.16,.92,.28,1) forwards}
.lottery-cinematic-stage.revealing .cinematic-winner-title span:nth-child(1){animation-delay:.20s}.lottery-cinematic-stage.revealing .cinematic-winner-title span:nth-child(2){animation-delay:.25s}.lottery-cinematic-stage.revealing .cinematic-winner-title span:nth-child(3){animation-delay:.30s}.lottery-cinematic-stage.revealing .cinematic-winner-title span:nth-child(4){animation-delay:.35s}.lottery-cinematic-stage.revealing .cinematic-winner-title span:nth-child(5){animation-delay:.40s}.lottery-cinematic-stage.revealing .cinematic-winner-title span:nth-child(6){animation-delay:.45s}
.lottery-cinematic-stage.revealing .cinematic-winner-core{animation:cinematicCoreIn .86s .52s cubic-bezier(.12,.9,.2,1) forwards}
.lottery-cinematic-stage.revealing .cinematic-winner-core:before{animation:cinematicShine 1.2s 1.05s ease-out forwards}
.lottery-cinematic-stage.revealing .cinematic-avatar-orbit{animation:cinematicOrbit 7s .85s linear infinite,cinematicOrbitFade .7s .72s forwards}
.lottery-cinematic-stage.revealing .cinematic-result-footer{animation:cinematicFooter .65s 1.05s ease forwards}
@keyframes cinematicEyebrow{to{opacity:1;transform:none}}
@keyframes cinematicLetter{0%{opacity:0;transform:translateY(2vw) scale(.72);filter:blur(8px)}72%{opacity:1;transform:translateY(-.12vw) scale(1.07);filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
@keyframes cinematicCoreIn{0%{opacity:0;transform:translateY(2.2vw) scale(.96);filter:blur(8px)}70%{opacity:1;transform:translateY(-.12vw) scale(1.012);filter:none}100%{opacity:1;transform:none;filter:none}}
@keyframes cinematicShine{to{transform:translateX(130%)}}
@keyframes cinematicOrbit{to{transform:rotate(360deg)}}
@keyframes cinematicOrbitFade{to{opacity:1}}
@keyframes cinematicFooter{to{opacity:1}}
.lottery-cinematic-stage.result-only .lottery-cinematic-video-wrap{display:none}
.lottery-cinematic-stage.video-error .lottery-cinematic-loading b:after{content:" / VIDEO FALLBACK"}
/* v37 — seamless cinematic lottery result transition
Keep the final bright video frame visible and blend the result UI over it.
No hard black cut, no synthetic dark texture, no second flash. */
.lottery-cinematic-stage{background:#171108!important}
.cinematic-static-bg{
position:absolute;inset:0;z-index:0;
background:
linear-gradient(180deg,rgba(18,12,6,.02),rgba(13,9,6,.18) 54%,rgba(9,7,5,.48)),
url("assets/lottery-result-bg.jpg?v=80-video3") center/cover no-repeat;
filter:saturate(.92) brightness(.88);
transform:scale(1.01);
}
.lottery-cinematic-video-wrap{
background:transparent!important;
opacity:1!important;
transition:filter .62s cubic-bezier(.2,.72,.2,1),transform .72s cubic-bezier(.2,.72,.2,1)!important;
}
.lottery-cinematic-video-wrap.ended{
opacity:1!important;
pointer-events:none;
filter:brightness(.58) saturate(.86) contrast(.96);
transform:scale(1.012);
}
.lottery-cinematic-video{background:transparent!important}
.cinematic-result{
background:transparent!important;
opacity:0;
visibility:hidden;
transition:opacity .42s ease;
}
.lottery-cinematic-stage.revealing .cinematic-result{opacity:1;visibility:visible}
.cinematic-result-bg{
position:absolute;inset:0;
background:
radial-gradient(circle at 50% 42%,rgba(255,216,128,.08) 0,rgba(50,31,12,.10) 26%,rgba(9,8,7,.22) 58%,rgba(5,5,5,.48) 100%),
linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.22));
backdrop-filter:blur(1.8px) saturate(.92);
-webkit-backdrop-filter:blur(1.8px) saturate(.92);
}
.cinematic-result-bg:before,.cinematic-result-bg:after,.cinematic-result-lines,.cinematic-sparks,.cinematic-flash{display:none!important}
.cinematic-result-frame{
width:68vw;min-height:62vh;
padding:3.2vh 4.1vw 3.8vh;
justify-content:center;
}
.cinematic-result-frame:before,.cinematic-result-frame:after{
width:5.2vw;height:5.2vw;border-color:rgba(238,200,119,.62);
}
.cinematic-result-eyebrow{
font-size:.78vw;letter-spacing:.42em;color:#e2c687;
text-shadow:0 .1vw .6vw rgba(0,0,0,.7);
opacity:0;transform:translateY(-.6vw);
}
.cinematic-winner-title{
margin-top:.52vw;font-size:2.15vw;line-height:1;font-weight:900;letter-spacing:.22em;
color:#f8e7ba;text-shadow:0 .12vw .9vw rgba(0,0,0,.68);
}
.cinematic-winner-title span{
opacity:0;transform:translateY(.7vw);filter:none;
}
.cinematic-winner-core{
width:100%;grid-template-columns:13vw minmax(0,1fr);gap:2.5vw;
margin-top:2.2vh;padding:2.15vw 2.8vw;
background:linear-gradient(135deg,rgba(14,12,10,.76),rgba(28,20,13,.66));
border:.08vw solid rgba(238,199,112,.48);
border-radius:1.15vw;clip-path:none;
box-shadow:0 1.8vw 4.5vw rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08);
backdrop-filter:blur(12px) saturate(.94);
-webkit-backdrop-filter:blur(12px) saturate(.94);
opacity:0;transform:translateY(1.25vw) scale(.985);
}
.cinematic-winner-core:before{
background:linear-gradient(110deg,transparent 24%,rgba(255,235,181,.075) 47%,transparent 67%);
}
.cinematic-avatar-shell{width:11.5vw;height:11.5vw}
.cinematic-avatar-shell:before,.cinematic-avatar-orbit{display:none!important}
.cinematic-winner-avatar{
width:10.4vw;height:10.4vw;
border:.18vw solid #e5bf6e;
box-shadow:0 0 0 .22vw rgba(73,49,21,.72),0 .9vw 2.2vw rgba(0,0,0,.34);
}
.cinematic-winner-name{font-size:4.4vw;line-height:1;color:#fffdf7;text-shadow:0 .18vw .8vw rgba(0,0,0,.58)}
.cinematic-winner-team{
margin-top:.82vw;padding:.42vw .85vw .4vw;
border-left:.14vw solid #dfb961;
background:linear-gradient(90deg,rgba(220,177,92,.13),transparent);
color:#f4e8ca;
}
.cinematic-prize-box{margin-top:1.08vw;color:#ddc287}
.cinematic-prize-box span{border-color:rgba(226,191,117,.34)}
.cinematic-prize-box b{color:#fff1cf}
.cinematic-result-footer{margin-top:1.1vw;color:#c3a76d}
.lottery-cinematic-stage.revealing .cinematic-result-eyebrow{animation:cinematicV37Soft .55s .08s ease forwards}
.lottery-cinematic-stage.revealing .cinematic-winner-title span{animation:cinematicV37Title .58s .18s cubic-bezier(.16,.86,.26,1) forwards}
.lottery-cinematic-stage.revealing .cinematic-winner-core{animation:cinematicV37Card .72s .32s cubic-bezier(.16,.86,.26,1) forwards}
.lottery-cinematic-stage.revealing .cinematic-winner-core:before{animation:cinematicShine 1.15s .88s ease-out forwards}
.lottery-cinematic-stage.revealing .cinematic-result-footer{animation:cinematicFooter .55s .72s ease forwards}
@keyframes cinematicV37Soft{to{opacity:1;transform:none}}
@keyframes cinematicV37Title{0%{opacity:0;transform:translateY(.7vw)}100%{opacity:1;transform:none}}
@keyframes cinematicV37Card{0%{opacity:0;transform:translateY(1.25vw) scale(.985)}100%{opacity:1;transform:none}}
.lottery-cinematic-stage.result-only .cinematic-static-bg{filter:saturate(.9) brightness(.72)}
.lottery-cinematic-stage.result-only .cinematic-result-bg{background:linear-gradient(180deg,rgba(13,10,7,.08),rgba(6,6,6,.38))}
/* v38 — softer video-to-result dissolve + restored paper confetti
The final video frame remains visible and gently settles under the winner UI.
No hard black cut. No synthetic second flash. */
.lottery-cinematic-stage{
background:#171108!important;
}
.lottery-cinematic-video-wrap{
opacity:1!important;
background:transparent!important;
transition:
filter 1.05s cubic-bezier(.16,.78,.2,1),
transform 1.2s cubic-bezier(.16,.78,.2,1)!important;
will-change:filter,transform;
}
.lottery-cinematic-video-wrap.ended{
opacity:1!important;
pointer-events:none;
filter:brightness(.76) saturate(.92) contrast(1.01)!important;
transform:scale(1.018)!important;
}
.cinematic-result{
background:transparent!important;
opacity:0;
visibility:hidden;
transition:opacity .82s cubic-bezier(.18,.74,.22,1)!important;
}
.lottery-cinematic-stage.revealing .cinematic-result{
opacity:1;
visibility:visible;
}
.cinematic-result-bg{
position:absolute;inset:0;
opacity:0;
background:
radial-gradient(circle at 50% 43%,rgba(255,233,179,.02) 0,rgba(105,73,28,.055) 28%,rgba(17,13,9,.12) 58%,rgba(6,6,6,.30) 100%),
linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.05) 42%,rgba(0,0,0,.18) 100%);
backdrop-filter:blur(.7px) saturate(.97);
-webkit-backdrop-filter:blur(.7px) saturate(.97);
transition:opacity 1.05s cubic-bezier(.18,.74,.22,1);
}
.lottery-cinematic-stage.revealing .cinematic-result-bg{opacity:1}
.cinematic-result-bg:before,.cinematic-result-bg:after,.cinematic-result-lines,.cinematic-flash{display:none!important}
/* Real paper-confetti feel, restored from the earlier result animation. */
.cinematic-sparks.cinematic-confetti{
display:block!important;
position:absolute;inset:0;z-index:6;overflow:hidden;pointer-events:none;
}
.cinematic-sparks.cinematic-confetti i{
display:block!important;
position:absolute;
left:var(--x);top:-9%;
width:.30vw;height:.78vw;border-radius:.035vw;
opacity:0;
transform:rotate(var(--r));
background:#e8bd5e;
box-shadow:none;
}
.cinematic-sparks.cinematic-confetti i:nth-child(4n+1){background:#f5e4b0}
.cinematic-sparks.cinematic-confetti i:nth-child(4n+2){background:#c63e35}
.cinematic-sparks.cinematic-confetti i:nth-child(4n+3){background:#d8a544}
.cinematic-sparks.cinematic-confetti i:nth-child(4n){background:#fff8e7}
.lottery-cinematic-stage.revealing .cinematic-sparks.cinematic-confetti i{
animation:cinematicConfettiV38 4.3s cubic-bezier(.19,.64,.29,1) calc(.34s + var(--d)) both;
}
@keyframes cinematicConfettiV38{
0%{opacity:0;transform:translate3d(0,-6vh,0) rotate(var(--r)) rotateY(0deg) scale(.72)}
10%{opacity:.95}
55%{opacity:.92;transform:translate3d(1.2vw,56vh,0) rotate(calc(var(--r) + 150deg)) rotateY(145deg) scale(1)}
100%{opacity:0;transform:translate3d(-1.1vw,112vh,0) rotate(calc(var(--r) + 310deg)) rotateY(300deg) scale(.92)}
}
/* Let the information resolve out of the video's glow instead of popping on. */
.cinematic-result-frame{
width:66vw!important;
min-height:60vh!important;
padding:3.0vh 3.8vw 3.6vh!important;
}
.cinematic-result-eyebrow{
opacity:0!important;
transform:translateY(.35vw)!important;
filter:blur(2px);
}
.cinematic-winner-title span{
opacity:0!important;
transform:translateY(.42vw)!important;
filter:blur(3px)!important;
}
.cinematic-winner-core{
background:linear-gradient(135deg,rgba(16,13,10,.56),rgba(29,21,14,.50))!important;
border-color:rgba(238,199,112,.40)!important;
box-shadow:0 1.4vw 3.8vw rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.07)!important;
backdrop-filter:blur(8px) saturate(.96)!important;
-webkit-backdrop-filter:blur(8px) saturate(.96)!important;
opacity:0!important;
transform:translateY(.65vw)!important;
filter:blur(2px);
}
.lottery-cinematic-stage.revealing .cinematic-result-eyebrow{
animation:cinematicV38Resolve .62s .20s ease forwards!important;
}
.lottery-cinematic-stage.revealing .cinematic-winner-title span{
animation:cinematicV38Resolve .72s .30s cubic-bezier(.18,.82,.22,1) forwards!important;
}
.lottery-cinematic-stage.revealing .cinematic-winner-core{
animation:cinematicV38Core .86s .42s cubic-bezier(.18,.82,.22,1) forwards!important;
}
.lottery-cinematic-stage.revealing .cinematic-result-footer{
animation:cinematicFooter .58s .88s ease forwards!important;
}
@keyframes cinematicV38Resolve{
0%{opacity:0;transform:translateY(.42vw);filter:blur(3px)}
100%{opacity:1;transform:none;filter:none}
}
@keyframes cinematicV38Core{
0%{opacity:0;transform:translateY(.65vw);filter:blur(2px)}
100%{opacity:1;transform:none;filter:none}
}
/* Result-only replay uses the same video-derived still, softly dimmed. */
.lottery-cinematic-stage.result-only .cinematic-static-bg{
filter:saturate(.93) brightness(.82)!important;
}
.lottery-cinematic-stage.result-only .cinematic-result-bg{
opacity:1;
background:
radial-gradient(circle at 50% 43%,rgba(255,230,168,.03),rgba(48,32,16,.08) 36%,rgba(8,7,6,.26) 100%),
linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.14));
}
/* v39 — natural white-flash handoff + restored winner screen
Keep the actual last frame under the UI, soften only the edges, and let the
information resolve in place. Paper confetti stays as the celebration layer. */
.lottery-cinematic-stage{
background:#120e08!important;
}
.lottery-cinematic-video-wrap{
opacity:1!important;
filter:none!important;
transform:none!important;
transition:filter .9s cubic-bezier(.2,.72,.2,1)!important;
}
.lottery-cinematic-video-wrap.ended{
opacity:1!important;
filter:brightness(.70) saturate(.94) contrast(1.01)!important;
transform:none!important;
}
/* The result is an overlay on the last video frame — never a replacement screen. */
.cinematic-result{
opacity:0!important;
visibility:hidden!important;
background:transparent!important;
transition:opacity .62s cubic-bezier(.18,.72,.2,1)!important;
}
.lottery-cinematic-stage.revealing .cinematic-result{
opacity:1!important;
visibility:visible!important;
}
.cinematic-result-bg{
opacity:0!important;
background:
radial-gradient(circle at 50% 43%,rgba(255,239,199,.02) 0%,rgba(95,60,22,.045) 34%,rgba(12,9,7,.12) 66%,rgba(4,4,4,.30) 100%),
linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.025) 38%,rgba(0,0,0,.15) 100%)!important;
backdrop-filter:blur(.45px) saturate(.98)!important;
-webkit-backdrop-filter:blur(.45px) saturate(.98)!important;
transition:opacity .82s .08s ease!important;
}
.lottery-cinematic-stage.revealing .cinematic-result-bg{opacity:1!important}
.cinematic-result-bg:before,.cinematic-result-bg:after,.cinematic-result-lines,.cinematic-flash{display:none!important}
/* Elegant result layout: no giant synthetic black card. */
.cinematic-result-frame{
width:74vw!important;
min-height:58vh!important;
padding:2.6vh 4.2vw 3.2vh!important;
justify-content:center!important;
}
.cinematic-result-frame:before,.cinematic-result-frame:after{
content:""!important;
position:absolute!important;
top:50%!important;
width:8.5vw!important;
height:1px!important;
border:0!important;
background:linear-gradient(90deg,transparent,rgba(239,198,109,.62))!important;
opacity:.68!important;
}
.cinematic-result-frame:before{left:-.4vw!important}
.cinematic-result-frame:after{right:-.4vw!important;transform:scaleX(-1)!important}
.cinematic-result-eyebrow{
opacity:0!important;
transform:translateY(.35vw)!important;
filter:none!important;
font-size:.76vw!important;
letter-spacing:.44em!important;
color:#e7ca8a!important;
text-shadow:0 .12vw .75vw rgba(0,0,0,.62)!important;
transition:opacity .45s .22s ease,transform .55s .22s cubic-bezier(.18,.82,.22,1)!important;
}
.cinematic-winner-title{
margin-top:.45vw!important;
font-size:2.2vw!important;
line-height:1!important;
letter-spacing:.18em!important;
color:#fff0c5!important;
text-shadow:0 .15vw .9vw rgba(0,0,0,.52)!important;
}
.cinematic-winner-title span{
opacity:0!important;
transform:translateY(.45vw)!important;
filter:none!important;
transition:opacity .5s .30s ease,transform .62s .30s cubic-bezier(.18,.82,.22,1)!important;
}
.cinematic-winner-core{
width:100%!important;
grid-template-columns:13.6vw minmax(0,1fr)!important;
gap:2.8vw!important;
margin-top:2.0vh!important;
padding:2.15vw 3.15vw!important;
background:
linear-gradient(110deg,rgba(20,15,10,.54),rgba(20,14,9,.38) 58%,rgba(24,17,10,.50))!important;
border:0!important;
border-top:.085vw solid rgba(242,205,128,.50)!important;
border-bottom:.085vw solid rgba(242,205,128,.34)!important;
border-radius:.55vw!important;
clip-path:none!important;
box-shadow:0 1.6vw 4.5vw rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.055)!important;
backdrop-filter:blur(6px) saturate(.96)!important;
-webkit-backdrop-filter:blur(6px) saturate(.96)!important;
opacity:0!important;
transform:translateY(.72vw) scale(.995)!important;
filter:none!important;
transition:opacity .62s .39s ease,transform .76s .39s cubic-bezier(.18,.82,.22,1)!important;
}
.cinematic-winner-core:before{
background:linear-gradient(110deg,transparent 24%,rgba(255,236,187,.10) 48%,transparent 68%)!important;
transform:translateX(-115%)!important;
}
.cinematic-avatar-shell{width:11.8vw!important;height:11.8vw!important}
.cinematic-avatar-shell:before,.cinematic-avatar-orbit{display:none!important}
.cinematic-winner-avatar{
width:10.6vw!important;height:10.6vw!important;
border:.16vw solid rgba(238,198,112,.92)!important;
box-shadow:0 0 0 .18vw rgba(80,53,20,.52),0 .8vw 2.1vw rgba(0,0,0,.30)!important;
}
.cinematic-winner-name{
font-size:4.8vw!important;
line-height:.98!important;
color:#fffefa!important;
text-shadow:0 .15vw .75vw rgba(0,0,0,.56)!important;
}
.cinematic-winner-team{
margin-top:.86vw!important;
padding:.43vw .9vw .41vw!important;
border-left:.14vw solid #e0b85f!important;
background:linear-gradient(90deg,rgba(222,178,88,.13),transparent)!important;
color:#f4e8ca!important;
}
.cinematic-prize-box{margin-top:1.05vw!important;color:#e2c27e!important}
.cinematic-prize-box span{border-color:rgba(226,191,117,.36)!important}
.cinematic-prize-box b{color:#fff1cf!important}
.cinematic-result-footer{
opacity:0!important;
margin-top:1.0vw!important;
color:#caae72!important;
transition:opacity .45s .82s ease!important;
}
/* Explicit revealed states: v38's important hidden values could suppress animations. */
.lottery-cinematic-stage.revealing .cinematic-result-eyebrow{
opacity:1!important;transform:none!important;filter:none!important;animation:none!important;
}
.lottery-cinematic-stage.revealing .cinematic-winner-title span{
opacity:1!important;transform:none!important;filter:none!important;animation:none!important;
}
.lottery-cinematic-stage.revealing .cinematic-winner-core{
opacity:1!important;transform:none!important;filter:none!important;animation:none!important;
}
.lottery-cinematic-stage.revealing .cinematic-winner-core:before{
animation:cinematicShine 1.18s 1.02s ease-out forwards!important;
}
.lottery-cinematic-stage.revealing .cinematic-result-footer{
opacity:1!important;animation:none!important;
}
/* Keep the v38 paper confetti, but let it begin just after the winner starts to resolve. */
.cinematic-sparks.cinematic-confetti{display:block!important;z-index:7!important}
.lottery-cinematic-stage.revealing .cinematic-sparks.cinematic-confetti i{
animation:cinematicConfettiV39 4.5s cubic-bezier(.19,.64,.29,1) calc(.42s + var(--d)) both!important;
}
@keyframes cinematicConfettiV39{
0%{opacity:0;transform:translate3d(0,-7vh,0) rotate(var(--r)) rotateY(0deg) scale(.74)}
9%{opacity:.96}
56%{opacity:.94;transform:translate3d(1.35vw,57vh,0) rotate(calc(var(--r) + 155deg)) rotateY(150deg) scale(1)}
100%{opacity:0;transform:translate3d(-1.2vw,112vh,0) rotate(calc(var(--r) + 318deg)) rotateY(305deg) scale(.92)}
}
/* Result-only replay uses the matching video-derived still and the same UI. */
.lottery-cinematic-stage.result-only .cinematic-static-bg{
opacity:1!important;
filter:saturate(.94) brightness(.74)!important;
}
.lottery-cinematic-stage.result-only .cinematic-result-bg{opacity:1!important}
/* v40 — dark-moment handoff
The video itself supplies the fade to black. The result UI is introduced during
that fade, so there is no synthetic black texture or hard frame replacement. */
.lottery-cinematic-stage{background:#020202!important}
.lottery-cinematic-video-wrap,
.lottery-cinematic-video-wrap.handoff,
.lottery-cinematic-video-wrap.ended{
opacity:1!important;
filter:none!important;
transform:none!important;
transition:none!important;
}
.lottery-cinematic-video{background:#020202!important}
.cinematic-result{
opacity:0!important;
visibility:hidden!important;
background:transparent!important;
transition:opacity .54s cubic-bezier(.22,.72,.18,1)!important;
}
.lottery-cinematic-stage.revealing .cinematic-result{
opacity:1!important;
visibility:visible!important;
}
/* Keep the live video visible underneath. Only add a tiny warm center bloom so the
result belongs to the same gold-light scene rather than looking like a new screen. */
.cinematic-result-bg{
opacity:0!important;
background:
radial-gradient(circle at 50% 46%,rgba(211,158,65,.12) 0%,rgba(80,48,14,.055) 24%,rgba(0,0,0,0) 58%),
linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.05))!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
transition:opacity .62s ease!important;
}
.lottery-cinematic-stage.revealing .cinematic-result-bg{opacity:1!important}
.cinematic-result-bg:before,.cinematic-result-bg:after,.cinematic-result-lines,.cinematic-flash{display:none!important}
/* Let the information arrive softly after the source image starts going dark. */
.cinematic-result-frame{transform:none!important}
.cinematic-result-eyebrow{
opacity:0!important;transform:translateY(.35vw)!important;
transition:opacity .42s .08s ease,transform .50s .08s ease!important;
}
.cinematic-winner-title span{
opacity:0!important;transform:translateY(.42vw)!important;filter:none!important;
transition:opacity .46s .14s ease,transform .56s .14s cubic-bezier(.18,.82,.22,1)!important;
}
.cinematic-winner-core{
opacity:0!important;transform:translateY(.6vw) scale(.995)!important;filter:none!important;
transition:opacity .56s .24s ease,transform .68s .24s cubic-bezier(.18,.82,.22,1)!important;
background:linear-gradient(110deg,rgba(15,12,8,.66),rgba(22,16,10,.52) 58%,rgba(18,13,8,.62))!important;
border-top:.085vw solid rgba(242,205,128,.48)!important;
border-bottom:.085vw solid rgba(242,205,128,.30)!important;
box-shadow:0 1.4vw 4vw rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.05)!important;
backdrop-filter:blur(3px) saturate(.96)!important;
-webkit-backdrop-filter:blur(3px) saturate(.96)!important;
}
.cinematic-result-footer{opacity:0!important;transition:opacity .44s .58s ease!important}
.lottery-cinematic-stage.revealing .cinematic-result-eyebrow,
.lottery-cinematic-stage.revealing .cinematic-winner-title span,
.lottery-cinematic-stage.revealing .cinematic-winner-core,
.lottery-cinematic-stage.revealing .cinematic-result-footer{
opacity:1!important;transform:none!important;filter:none!important;animation:none!important;
}
/* Paper confetti remains, but begins after the name is already readable. */
.cinematic-sparks.cinematic-confetti{display:block!important;z-index:7!important}
.lottery-cinematic-stage.revealing .cinematic-sparks.cinematic-confetti i{
animation:cinematicConfettiV40 4.6s cubic-bezier(.19,.64,.29,1) calc(.55s + var(--d)) both!important;
}
@keyframes cinematicConfettiV40{
0%{opacity:0;transform:translate3d(0,-8vh,0) rotate(var(--r)) rotateY(0deg) scale(.76)}
10%{opacity:.96}
58%{opacity:.94;transform:translate3d(1.25vw,58vh,0) rotate(calc(var(--r) + 160deg)) rotateY(155deg) scale(1)}
100%{opacity:0;transform:translate3d(-1.05vw,112vh,0) rotate(calc(var(--r) + 322deg)) rotateY(310deg) scale(.92)}
}
/* Result-only replay uses the matching near-black frame extracted from this video. */
.lottery-cinematic-stage.result-only .cinematic-static-bg{
opacity:1!important;
background:url("assets/lottery-result-bg.jpg?v=80-video3") center/cover no-repeat!important;
filter:brightness(.88) saturate(.94)!important;
}
.lottery-cinematic-stage.result-only .cinematic-result-bg{opacity:1!important}
/* v41 — bright-flash handoff, no blackout + edge-burst confetti */
.lottery-cinematic-stage{
background:#f4dfaa!important;
}
.lottery-cinematic-video-wrap,
.lottery-cinematic-video-wrap.handoff,
.lottery-cinematic-video-wrap.ended{
opacity:1!important;
filter:none!important;
transform:none!important;
transition:filter .75s ease!important;
}
.lottery-cinematic-stage.flash-frozen .lottery-cinematic-video-wrap{
filter:brightness(.96) saturate(.98) contrast(1.01)!important;
}
/* Result resolves directly over the frozen gold flash. No darkening layer. */
.cinematic-result{
opacity:0!important;
visibility:hidden!important;
background:transparent!important;
transition:opacity .38s cubic-bezier(.2,.75,.2,1)!important;
}
.lottery-cinematic-stage.revealing .cinematic-result{
opacity:1!important;
visibility:visible!important;
}
.cinematic-result-bg{
opacity:0!important;
background:
radial-gradient(circle at 50% 48%,rgba(255,255,255,.10) 0%,rgba(255,243,205,.08) 30%,rgba(255,218,140,.035) 58%,rgba(255,255,255,0) 78%)!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
transition:opacity .42s ease!important;
}
.lottery-cinematic-stage.revealing .cinematic-result-bg{opacity:1!important}
/* Softer champagne-glass winner panel so it feels like part of the same stage. */
.cinematic-result-frame{
width:72vw!important;
min-height:56vh!important;
padding:2.1vh 4.0vw 2.8vh!important;
}
.cinematic-result-eyebrow{
color:#795518!important;
text-shadow:0 1px 10px rgba(255,255,255,.65)!important;
}
.cinematic-winner-title{
color:#6d4710!important;
text-shadow:0 1px 12px rgba(255,255,255,.72)!important;
}
.cinematic-winner-core{
background:
linear-gradient(112deg,rgba(255,252,241,.86),rgba(255,244,214,.72) 52%,rgba(255,251,239,.84))!important;
border:.085vw solid rgba(183,126,30,.48)!important;
border-top:.12vw solid rgba(255,255,255,.84)!important;
border-radius:1.0vw!important;
box-shadow:0 1.5vw 4vw rgba(93,56,8,.18),inset 0 1px 0 rgba(255,255,255,.95)!important;
backdrop-filter:blur(4px) saturate(1.02)!important;
-webkit-backdrop-filter:blur(4px) saturate(1.02)!important;
}
.cinematic-winner-name{
color:#2b2114!important;
text-shadow:0 .08vw .34vw rgba(255,255,255,.78)!important;
}
.cinematic-winner-team{
color:#594325!important;
background:linear-gradient(90deg,rgba(190,133,39,.10),transparent)!important;
border-left:.14vw solid #b9822d!important;
}
.cinematic-winner-team span{color:#9b6d25!important}
.cinematic-prize-box{color:#8c6220!important}
.cinematic-prize-box b{color:#3c2a12!important}
.cinematic-result-footer{color:#765522!important}
.cinematic-avatar-shell{filter:drop-shadow(0 .45vw 1.2vw rgba(115,73,14,.20))}
.cinematic-winner-avatar{
border-color:#c9963c!important;
box-shadow:0 0 0 .18vw rgba(255,248,224,.92),0 .8vw 2vw rgba(112,71,11,.18)!important;
}
/* Result elements arrive out of the flash rather than after a scene change. */
.cinematic-result-eyebrow{opacity:0!important;transform:translateY(.25vw)!important;transition:opacity .34s .04s ease,transform .42s .04s ease!important}
.cinematic-winner-title span{opacity:0!important;transform:translateY(.3vw) scale(.98)!important;transition:opacity .38s .10s ease,transform .48s .10s cubic-bezier(.18,.82,.22,1)!important}
.cinematic-winner-core{opacity:0!important;transform:translateY(.45vw) scale(.975)!important;transition:opacity .46s .17s ease,transform .58s .17s cubic-bezier(.18,.82,.22,1)!important}
.cinematic-result-footer{opacity:0!important;transition:opacity .34s .44s ease!important}
.lottery-cinematic-stage.revealing .cinematic-result-eyebrow,
.lottery-cinematic-stage.revealing .cinematic-winner-title span,
.lottery-cinematic-stage.revealing .cinematic-winner-core,
.lottery-cinematic-stage.revealing .cinematic-result-footer{
opacity:1!important;transform:none!important;filter:none!important;animation:none!important;
}
/* Confetti pops inward from the screen edges/corners, then drifts down. */
.cinematic-sparks.cinematic-confetti{
display:block!important;
z-index:9!important;
overflow:hidden!important;
}
.cinematic-sparks.cinematic-confetti i{
left:var(--sx)!important;
top:var(--sy)!important;
width:.34vw!important;
height:.86vw!important;
opacity:0!important;
border-radius:.045vw!important;
transform-origin:center!important;
}
.lottery-cinematic-stage.revealing .cinematic-sparks.cinematic-confetti i{
animation:cinematicConfettiBurstV41 3.8s cubic-bezier(.16,.72,.22,1) calc(.12s + var(--d)) both!important;
}
@keyframes cinematicConfettiBurstV41{
0%{
opacity:0;
transform:translate3d(0,0,0) rotate(var(--r)) rotateY(0deg) scale(.28);
}
5%{opacity:1}
24%{
opacity:1;
transform:translate3d(var(--dx1),var(--dy1),0) rotate(calc(var(--r) + 120deg)) rotateY(115deg) scale(1.12);
}
52%{
opacity:.98;
transform:translate3d(var(--dx2),var(--dy2),0) rotate(calc(var(--r) + 245deg)) rotateY(235deg) scale(1);
}
100%{
opacity:0;
transform:translate3d(var(--dx3),var(--dy3),0) rotate(calc(var(--r) + 520deg)) rotateY(500deg) scale(.88);
}
}
/* Result-only replay uses the same bright flash frame, never a dark substitute. */
.lottery-cinematic-stage.result-only .cinematic-static-bg{
opacity:1!important;
background:url("assets/lottery-result-bg.jpg?v=80-video3") center/cover no-repeat!important;
filter:brightness(.96) saturate(.98)!important;
}
.lottery-cinematic-stage.result-only .cinematic-result-bg{opacity:1!important}
/* v42 OBS uses the same result template classes from style.css; 1920x1080 geometry remains unchanged. */
/* v55 — OBS source always renders edge-to-edge at an exact 1920×1080 canvas. */
html,body,body.obs-body{
width:1920px !important;
height:1080px !important;
min-width:1920px !important;
min-height:1080px !important;
max-width:1920px !important;
max-height:1080px !important;
margin:0 !important;
padding:0 !important;
overflow:hidden !important;
background:transparent !important;
}
.obs-root{
position:fixed !important;
left:0 !important;
top:0 !important;
width:1920px !important;
height:1080px !important;
min-width:1920px !important;
min-height:1080px !important;
overflow:hidden !important;
}
.obs-root>*,.obs-stage,.obs-blank{
width:1920px !important;
height:1080px !important;
min-width:1920px !important;
min-height:1080px !important;
box-sizing:border-box !important;
}
.obs-board-shell{padding:0 !important;}
.obs-board-shell .result-preview-card{border-radius:0 !important;}
.obs-transition-layer,.obs-transition-video{width:1920px !important;height:1080px !important;}
/* v56 — Exact OBS alignment. No horizontal offset, no content-box overflow. */
*,*::before,*::after{box-sizing:border-box;}
html,body,body.obs-body,.obs-root{
margin:0 !important;
padding:0 !important;
}
.obs-board-shell{
position:absolute !important;
inset:0 !important;
width:1920px !important;
height:1080px !important;
padding:0 !important;
margin:0 !important;
display:block !important;
overflow:hidden !important;
transform:none !important;
}
.obs-board-shell .result-preview-card{
position:absolute !important;
inset:0 !important;
left:0 !important;
top:0 !important;
width:1920px !important;
height:1080px !important;
min-width:1920px !important;
min-height:1080px !important;
max-width:1920px !important;
max-height:1080px !important;
margin:0 !important;
box-sizing:border-box !important;
transform:none !important;
border-radius:0 !important;
}
/* v57 — right-bottom result label removed. */
.result-badge-corner{display:none!important}
/* v63 — tuned for the supplied 19.3s red-curtain / gold-garagara cinematic.
Freeze on the visible gold burst and keep the winner UI on the same stage. */
.lottery-cinematic-stage.flash-frozen .lottery-cinematic-video-wrap{
filter:brightness(.82) saturate(.94) contrast(1.03)!important;
}
.lottery-cinematic-stage.revealing .cinematic-result-bg{
opacity:1!important;
background:
radial-gradient(circle at 50% 47%,rgba(255,255,255,.04) 0%,rgba(255,234,186,.035) 34%,rgba(37,23,8,.10) 76%,rgba(8,6,4,.20) 100%)!important;
}
.lottery-cinematic-stage.revealing .cinematic-winner-core{
background:linear-gradient(112deg,rgba(255,252,241,.92),rgba(255,243,210,.82) 52%,rgba(255,250,236,.90))!important;
box-shadow:0 1.6vw 4.4vw rgba(54,34,7,.26),inset 0 1px 0 rgba(255,255,255,.96)!important;
}
.lottery-cinematic-stage.result-only .cinematic-static-bg{
background:url("assets/lottery-result-bg.jpg?v=80-video3") center/cover no-repeat!important;
filter:brightness(.82) saturate(.94)!important;
}
/* v64 — result appears over the ACTUAL ending of the supplied lottery video.
The video reaches its final gold/white burst, then an exact still of that ending
becomes the background. No black cut and no unrelated replacement background. */
.lottery-cinematic-stage .cinematic-static-bg{
background:url("assets/lottery-result-bg.jpg?v=80-video3") center/cover no-repeat!important;
filter:none!important;
transform:none!important;
opacity:0!important;
transition:opacity .18s linear!important;
}
.lottery-cinematic-stage.end-frame-active .cinematic-static-bg,
.lottery-cinematic-stage.result-only .cinematic-static-bg{
opacity:1!important;
}
.lottery-cinematic-stage.end-frame-active .lottery-cinematic-video-wrap{
opacity:0!important;
transition:opacity .18s linear!important;
}
.lottery-cinematic-stage.revealing .cinematic-result-bg{
background:
radial-gradient(circle at 50% 47%,rgba(255,255,255,0) 0%,rgba(91,57,12,.06) 48%,rgba(24,14,4,.24) 100%),
linear-gradient(180deg,rgba(20,12,4,.03),rgba(16,10,4,.10))!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
}
.lottery-cinematic-stage.revealing .cinematic-winner-core{
background:linear-gradient(112deg,rgba(18,13,8,.72),rgba(35,23,10,.62) 52%,rgba(18,13,8,.72))!important;
border-top:.085vw solid rgba(255,223,153,.62)!important;
border-bottom:.085vw solid rgba(255,223,153,.38)!important;
box-shadow:0 1.6vw 4.4vw rgba(28,17,4,.30),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.lottery-cinematic-stage.revealing .cinematic-winner-name{
color:#fffdf6!important;
text-shadow:0 .12vw .7vw rgba(0,0,0,.55)!important;
}
.lottery-cinematic-stage.revealing .cinematic-winner-team{
color:#fff0c8!important;
}
.lottery-cinematic-stage.revealing .cinematic-prize-box,
.lottery-cinematic-stage.revealing .cinematic-prize-box b{
color:#ffe9ac!important;
}
/* v65 — let the supplied movie finish completely.
Its own blurred final frame becomes the result background. */
.lottery-cinematic-stage:not(.video-ended) .cinematic-static-bg{
opacity:0!important;
}
.lottery-cinematic-stage.video-ended .cinematic-static-bg,
.lottery-cinematic-stage.result-only .cinematic-static-bg{
opacity:1!important;
transition:opacity .10s linear!important;
}
.lottery-cinematic-stage.video-ended .lottery-cinematic-video-wrap{
opacity:0!important;
transition:opacity .10s linear!important;
}
/* v79: user's final 2026-10-27 gacha MP4; exact final defocused video frame. */
.lottery-cinematic-stage{background:#10112a!important}
.lottery-cinematic-stage .lottery-cinematic-video-wrap{
background:#10112a url("assets/lottery-poster.jpg?v=80-video3") center/cover no-repeat!important;
}
.lottery-cinematic-stage .lottery-cinematic-loading{
background:linear-gradient(180deg,rgba(7,8,26,.18),rgba(7,8,26,.32))!important;
color:#d3e8ff!important;
}
.lottery-cinematic-stage .lottery-cinematic-loading span{
border-color:rgba(0,216,255,.27)!important;
border-top-color:#7dedff!important;
}
/* Freeze the last FRAME of the same movie as the winner background; never black. */
.lottery-cinematic-stage.end-frame-active .cinematic-static-bg,
.lottery-cinematic-stage.result-only .cinematic-static-bg{
background:url("assets/lottery-result-bg.jpg?v=80-video3") center/cover no-repeat!important;
filter:none!important;
opacity:1!important;
}
.lottery-cinematic-stage.revealing .cinematic-result-bg{
background:linear-gradient(90deg,rgba(7,13,34,.25),rgba(7,13,34,.08),rgba(7,13,34,.25))!important;
backdrop-filter:none!important;
}
/* v80 video replacement: thumbnail and frozen result background now match the uploaded 12.9-second MP4. */