*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{font-family:Arial,Helvetica,sans-serif;color:#fff;background:#020814 url('/assets/images/background-war.webp') center/cover fixed no-repeat;overflow-x:hidden}
.stage{position:relative;isolation:isolate;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(18px,3vh,42px) clamp(14px,3vw,48px);background:radial-gradient(circle at 50% 30%,rgba(24,105,210,.4),rgba(2,8,24,.93) 67%);overflow:hidden}
.stage:before{content:"";position:absolute;inset:0;z-index:-3;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.52));pointer-events:none}
.ambient{position:absolute;z-index:-2;width:45vw;aspect-ratio:1;border-radius:50%;filter:blur(80px);opacity:.25;pointer-events:none;animation:ambientMove 9s ease-in-out infinite alternate}
.ambient--one{left:-18vw;top:-18vw;background:#087fff}.ambient--two{right:-18vw;bottom:-22vw;background:#8a2cff;animation-delay:-4s}
.draw-header{display:flex;flex-direction:column;align-items:center;position:relative;z-index:2}
.logo{width:min(330px,58vw);max-height:20vh;object-fit:contain;filter:drop-shadow(0 12px 26px rgba(0,0,0,.65))}
.kicker{margin:.2rem 0 .55rem;font-size:clamp(.72rem,1.35vw,1rem);font-weight:900;letter-spacing:.2em;color:#77d4ff;text-shadow:0 2px 10px #001c46}
.live-indicator{display:inline-flex;align-items:center;gap:.48rem;padding:.42rem .8rem;border:1px solid rgba(120,215,255,.36);border-radius:999px;background:rgba(2,22,56,.64);font-size:.72rem;font-weight:900;letter-spacing:.1em;color:#bdeaff;box-shadow:0 8px 24px rgba(0,0,0,.22)}
.live-dot{width:.55rem;height:.55rem;border-radius:50%;background:#42ff9e;box-shadow:0 0 12px #42ff9e;animation:liveBlink 1.3s infinite}
.result-card{position:relative;width:min(850px,96vw);display:flex;flex-direction:column;align-items:center;margin-top:clamp(8px,1.5vh,18px);padding:clamp(12px,2vh,24px) clamp(12px,3vw,34px) clamp(18px,2.8vh,34px);border:1px solid rgba(112,207,255,.18);border-radius:28px;background:linear-gradient(145deg,rgba(4,18,48,.42),rgba(2,8,24,.72));box-shadow:0 26px 80px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(8px)}
.state{margin:.15rem 0 clamp(12px,1.8vh,22px);padding:.55rem 1rem;border-radius:999px;font-size:clamp(.86rem,1.8vw,1.3rem);font-weight:1000;letter-spacing:.07em;color:#ffe16e;background:rgba(110,75,0,.2);border:1px solid rgba(255,216,79,.35);text-shadow:0 2px 12px #000}
.state--confirmed{color:#8effbe;background:rgba(0,112,55,.2);border-color:rgba(80,255,157,.4)}
.ball-wrap{position:relative;display:grid;place-items:center}
.spark-ring{position:absolute;width:118%;aspect-ratio:1;border-radius:50%;border:2px solid rgba(95,194,255,.35);box-shadow:0 0 65px rgba(40,141,255,.45);animation:ringRotate 8s linear infinite}
.spark-ring:before,.spark-ring:after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 16px #67cfff}
.spark-ring:before{left:8%;top:20%}.spark-ring:after{right:5%;bottom:25%}
.ball{position:relative;width:min(31vw,310px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-size:clamp(5.5rem,15vw,11.2rem);line-height:1;font-weight:1000;color:#fff;background:radial-gradient(circle at 34% 23%,#fff 0 6%,#88e4ff 8%,#31a8ff 18%,#0d5bd5 52%,#03245d 78%);border:clamp(6px,1vw,10px) solid rgba(255,255,255,.9);box-shadow:0 0 72px rgba(36,141,255,.9),0 20px 45px rgba(0,0,0,.75),inset 0 -22px 38px #021437,inset 0 10px 20px rgba(255,255,255,.28);text-shadow:0 5px 18px rgba(0,0,0,.46);animation:ballFloat 2.3s ease-in-out infinite}
.ball:after{content:"";position:absolute;left:20%;top:13%;width:25%;height:13%;border-radius:50%;background:rgba(255,255,255,.44);filter:blur(2px);transform:rotate(-25deg)}
.ball--idle{filter:grayscale(.42);opacity:.76;animation:idleFloat 3s ease-in-out infinite}
h1{max-width:100%;margin:clamp(14px,2vh,24px) 0 .45rem;font-size:clamp(2.1rem,6vw,5.2rem);line-height:1.03;overflow-wrap:anywhere;text-shadow:0 5px 22px #000,0 0 26px rgba(72,167,255,.32)}
.date{margin:.7rem 0 0;font-size:clamp(.82rem,1.5vw,1.02rem);color:#b6c9e7;opacity:.9}
.prize{width:min(620px,92%);margin:.45rem 0 .35rem;padding:.9rem 1.6rem;border:1px solid rgba(112,207,255,.48);border-radius:16px;background:linear-gradient(135deg,rgba(5,35,83,.84),rgba(15,16,61,.78));box-shadow:0 12px 35px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.08)}
.prize span,.prize small{display:block;color:#f7d55c;font-weight:900;letter-spacing:.14em}.prize span{font-size:.76rem}.prize strong{display:block;margin:.34rem 0;font-size:clamp(1.35rem,3.5vw,2.6rem);line-height:1.1}.prize small{color:#9fdcff;letter-spacing:.05em}
.is-hidden{display:none!important}.connection-message{margin:.65rem 0 0;color:#ffcb83;font-size:.85rem;font-weight:700}
.result-reveal .ball{animation:drawReveal .9s cubic-bezier(.18,.89,.32,1.28),ballFloat 2.3s .9s ease-in-out infinite}
.result-reveal h1{animation:nameReveal .75s .16s both}
.result-reveal .prize{animation:nameReveal .75s .28s both}
.status-flash .state{animation:statusFlash .8s ease}
@keyframes drawReveal{0%{transform:scale(.35) rotate(-22deg);filter:brightness(2.2);opacity:0}58%{transform:scale(1.12) rotate(4deg);opacity:1}100%{transform:scale(1) rotate(0)}}
@keyframes nameReveal{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes statusFlash{50%{transform:scale(1.07);box-shadow:0 0 30px currentColor}}
@keyframes ballFloat{50%{transform:translateY(-6px);box-shadow:0 0 100px rgba(163,68,255,.82),0 24px 48px rgba(0,0,0,.72),inset 0 -22px 38px #021437}}
@keyframes idleFloat{50%{transform:translateY(-4px)}}
@keyframes ringRotate{to{transform:rotate(360deg)}}
@keyframes liveBlink{50%{opacity:.35;transform:scale(.75)}}
@keyframes ambientMove{to{transform:translate(8vw,6vh) scale(1.16)}}
@media(max-width:600px){.stage{justify-content:flex-start;padding-top:16px}.logo{width:min(260px,68vw);max-height:16vh}.kicker{letter-spacing:.11em}.result-card{border-radius:20px;padding-top:12px}.ball{width:min(56vw,250px)}.prize{padding:.78rem 1rem}.live-indicator{font-size:.62rem}.state{letter-spacing:.035em}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}


/* v1.2.0 — Show du gagnant */
.confetti-canvas{position:fixed;inset:0;z-index:50;width:100%;height:100%;pointer-events:none}
.sound-toggle{position:fixed;z-index:60;top:14px;right:14px;padding:.62rem .88rem;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(3,14,39,.82);color:#fff;font:900 .72rem/1 Arial,sans-serif;letter-spacing:.06em;cursor:pointer;box-shadow:0 8px 28px rgba(0,0,0,.35);backdrop-filter:blur(8px);transition:transform .2s ease,background .2s ease,border-color .2s ease}
.sound-toggle:hover{transform:translateY(-1px);border-color:rgba(112,207,255,.75)}
.sound-toggle.is-enabled{background:rgba(0,102,65,.82);border-color:rgba(83,255,176,.65);color:#baffdb}
.grand-prize-show{animation:grandPrizePulse 1.1s ease-in-out 3}
.grand-prize-show .ball{background:radial-gradient(circle at 34% 23%,#fff 0 6%,#fff4a3 8%,#ffd43b 22%,#e27400 54%,#501300 82%);box-shadow:0 0 115px rgba(255,204,32,.98),0 20px 50px rgba(0,0,0,.8),inset 0 -22px 38px #4a1300,inset 0 10px 20px rgba(255,255,255,.4)}
.grand-prize-show .spark-ring{border-color:rgba(255,219,72,.9);box-shadow:0 0 105px rgba(255,190,20,.85)}
.grand-prize-show .prize{border-color:rgba(255,216,70,.9);background:linear-gradient(135deg,rgba(116,56,0,.9),rgba(56,17,0,.86));box-shadow:0 0 55px rgba(255,178,20,.45),inset 0 1px 0 rgba(255,255,255,.16)}
@keyframes grandPrizePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.012);box-shadow:0 0 100px rgba(255,190,20,.26),0 26px 80px rgba(0,0,0,.4)}}
@media(max-width:600px){.sound-toggle{top:8px;right:8px;padding:.52rem .65rem;font-size:.61rem}.draw-header{padding-top:34px}}
@media(prefers-reduced-motion:reduce){.confetti-canvas{display:none}.grand-prize-show{animation:none}}

/* v1.3.0 — Show Time */
.show-overlay{position:fixed;inset:0;z-index:45;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;background:radial-gradient(circle at 50% 48%,rgba(25,74,150,.72),rgba(0,4,18,.97) 67%);overflow:hidden;transition:opacity .45s ease;pointer-events:none}
.show-overlay--out{opacity:0}
.show-overlay:before{content:"";position:absolute;inset:0;background:repeating-radial-gradient(circle at center,transparent 0 52px,rgba(255,255,255,.025) 54px 56px);animation:showPulse 1.4s ease-in-out infinite;pointer-events:none}
.show-beam{position:absolute;top:-35%;width:26vw;height:150%;background:linear-gradient(180deg,rgba(115,218,255,.62),rgba(50,115,255,.04));filter:blur(10px);transform-origin:top center;opacity:.55}
.show-beam--left{left:8%;animation:beamLeft 2.4s ease-in-out infinite alternate}.show-beam--right{right:8%;animation:beamRight 2.1s ease-in-out infinite alternate}
.show-alert,.show-countdown,.show-winner-title,.show-winner-name,.show-jackpot,.show-machine{position:relative;z-index:2;text-shadow:0 7px 28px #000}
.show-alert{margin:0;font-size:clamp(2rem,6vw,5.4rem);font-weight:1000;line-height:1.08;letter-spacing:.04em;color:#ffe36d;animation:alertEntry .65s cubic-bezier(.18,.89,.32,1.28)}
.show-alert strong{color:#fff;font-size:.68em}
.show-countdown{margin:0;font-size:clamp(8rem,28vw,19rem);font-weight:1000;line-height:.8;color:#fff;text-shadow:0 0 45px #2ea7ff,0 8px 30px #000}
.show-pop{animation:countPop .62s cubic-bezier(.18,.89,.32,1.28)}
.show-machine{width:min(440px,74vw);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 34% 22%,#fff 0 5%,#bcecff 8%,#42baff 20%,#075cce 53%,#021c51 82%);border:10px solid rgba(255,255,255,.92);box-shadow:0 0 100px rgba(47,157,255,.95),0 30px 65px rgba(0,0,0,.72),inset 0 -24px 42px #001437;animation:machineShake .11s linear infinite}
.show-machine strong{font-size:clamp(7rem,22vw,14rem);line-height:1;color:#fff;text-shadow:0 6px 20px rgba(0,0,0,.55)}
.show-machine-label{position:absolute;top:-2.6rem;padding:.55rem 1rem;border-radius:999px;background:rgba(0,12,38,.8);border:1px solid rgba(119,218,255,.5);font-size:clamp(.7rem,1.5vw,1rem);font-weight:1000;letter-spacing:.14em;color:#bcecff}
.show-machine--stop{animation:machineStop .72s cubic-bezier(.18,.89,.32,1.28)}
.show-winner-title{margin:0 0 1rem;font-size:clamp(1.6rem,4.5vw,3.8rem);font-weight:1000;color:#ffe36d;letter-spacing:.06em;animation:winnerTitle .55s ease both}
.show-winner-name{max-width:94vw;margin:0;font-size:clamp(3.2rem,10vw,8.5rem);line-height:.95;font-weight:1000;overflow-wrap:anywhere;color:#fff;text-shadow:0 0 45px #258eff,0 8px 30px #000;animation:winnerName .8s cubic-bezier(.18,.89,.32,1.28) both}
.show-jackpot{margin:1.3rem 0 0;padding:.7rem 1.35rem;border:2px solid rgba(255,231,111,.86);border-radius:999px;background:rgba(122,65,0,.68);font-size:clamp(1.35rem,4vw,3rem);font-weight:1000;letter-spacing:.08em;color:#fff0a4;box-shadow:0 0 45px rgba(255,190,28,.68);animation:jackpotPulse .72s ease-in-out infinite alternate}
.show-overlay.is-grand-prize{background:radial-gradient(circle at 50% 48%,rgba(145,81,0,.78),rgba(18,5,0,.98) 70%)}
.show-overlay.is-grand-prize .show-beam{background:linear-gradient(180deg,rgba(255,234,126,.78),rgba(255,139,0,.05));opacity:.75}
.show-overlay.is-grand-prize .show-machine{background:radial-gradient(circle at 34% 22%,#fff 0 5%,#fff3a2 8%,#ffd13b 21%,#d87500 54%,#4c1100 82%);box-shadow:0 0 135px rgba(255,199,33,.98),0 30px 65px rgba(0,0,0,.8),inset 0 -24px 42px #481100}
@keyframes alertEntry{0%{opacity:0;transform:scale(.55)}70%{transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes countPop{0%{opacity:0;transform:scale(.25) rotate(-10deg)}65%{opacity:1;transform:scale(1.12) rotate(2deg)}100%{transform:scale(1)}}
@keyframes machineShake{0%,100%{transform:translate(0,0) rotate(-.5deg)}50%{transform:translate(2px,-1px) rotate(.5deg)}}
@keyframes machineStop{0%{transform:scale(.92) rotate(-8deg)}55%{transform:scale(1.15) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
@keyframes winnerTitle{from{opacity:0;transform:translateY(-22px)}to{opacity:1;transform:translateY(0)}}
@keyframes winnerName{0%{opacity:0;transform:scale(.2) translateY(40px)}68%{opacity:1;transform:scale(1.12) translateY(0)}100%{transform:scale(1)}}
@keyframes jackpotPulse{to{transform:scale(1.07);box-shadow:0 0 80px rgba(255,190,28,.95)}}
@keyframes beamLeft{from{transform:rotate(-28deg)}to{transform:rotate(18deg)}}
@keyframes beamRight{from{transform:rotate(28deg)}to{transform:rotate(-18deg)}}
@keyframes showPulse{50%{opacity:.45;transform:scale(1.08)}}
@media(max-width:600px){.show-overlay{padding:16px}.show-machine{width:min(68vw,290px);border-width:7px}.show-machine-label{top:-2.2rem}.show-winner-name{font-size:clamp(2.8rem,15vw,5.2rem)}}
@media(prefers-reduced-motion:reduce){.show-overlay:before,.show-beam,.show-alert,.show-countdown,.show-machine,.show-winner-title,.show-winner-name,.show-jackpot{animation:none!important}}