:root{--bg:#020617;--primary:#6366f1;--secondary:#ec4899;--accent:#fbbf24;--text:#fff;--panel:rgba(0,0,0,.28);--ease:cubic-bezier(.2,1.5,.5,1)}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:Poppins,sans-serif;color:var(--text);background:radial-gradient(circle at 50% 45%,#2e1065 0%,#020617 72%);user-select:none}.ambient{position:fixed;border-radius:50%;filter:blur(80px);opacity:.32;pointer-events:none}.a1{width:35vw;height:35vw;background:#ec4899;left:-10vw;top:-12vw;animation:drift 8s ease-in-out infinite alternate}.a2{width:38vw;height:38vw;background:#6366f1;right:-12vw;bottom:-14vw;animation:drift 10s ease-in-out infinite alternate-reverse}#app{height:100%;position:relative}.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(18px,3vw,48px);opacity:0;visibility:hidden;transform:scale(.94);transition:.45s var(--ease)}.screen.active{opacity:1;visibility:visible;transform:scale(1)}.brand{font:900 clamp(3.2rem,10vw,8rem)/.78 Montserrat;text-align:center;letter-spacing:-.07em;filter:drop-shadow(0 12px 22px #0008);transform:rotate(-3deg);animation:logoIn .8s var(--ease)}.brand span{display:block;color:#fff;-webkit-text-stroke:clamp(1px,.2vw,3px) #fff}.brand b{display:block;color:var(--accent);text-shadow:6px 7px 0 var(--secondary)}.tagline{font:800 clamp(1rem,2vw,1.45rem) Montserrat;letter-spacing:.12em;margin:5vh 0 3vh}.cta,.spin,.next-btn{border:0;color:#fff;background:linear-gradient(135deg,var(--secondary),#db2777);font:900 clamp(1rem,2vw,1.4rem) Montserrat;padding:1.05em 1.8em;border-radius:999px;box-shadow:0 10px 0 #9d174d,0 18px 30px #0006;cursor:pointer;transition:.2s var(--ease)}.cta:hover,.next-btn:hover{transform:translateY(-4px) scale(1.04)}.cta:active,.next-btn:active{transform:translateY(7px);box-shadow:0 3px 0 #9d174d}.cta i{margin-left:.6em}.admin-link{position:absolute;bottom:3vh;color:#ffffff88;text-decoration:none;font-size:.86rem}.eyebrow{font:900 clamp(1rem,2.4vw,1.7rem) Montserrat;letter-spacing:.14em;color:var(--accent);margin-bottom:2vh}.wheel-wrap{position:relative;width:min(64vmin,580px);aspect-ratio:1}.wheel{position:absolute;inset:0;border-radius:50%;border:clamp(8px,1.5vmin,15px) solid #fff;box-shadow:0 0 0 8px #ffffff22,0 24px 70px #0009;transition:transform 5s cubic-bezier(.12,.7,.1,1);overflow:hidden}.wheel-label{position:absolute;left:50%;top:50%;width:47%;height:2rem;transform-origin:0 50%;display:flex;align-items:center;justify-content:flex-end;padding-right:7%;font:900 clamp(.55rem,1.5vmin,1rem) Montserrat;text-shadow:0 2px 3px #0008;white-space:nowrap}.pointer{position:absolute;z-index:3;left:50%;top:-2.5%;transform:translateX(-50%);font-size:clamp(2rem,6vmin,4rem);color:var(--accent);filter:drop-shadow(0 5px 0 #b45309)}.spin{position:absolute;z-index:4;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:25%;aspect-ratio:1;padding:0;background:var(--accent);color:#2e1065;box-shadow:0 8px 0 #b45309,0 12px 24px #0008}.spin:hover{transform:translate(-50%,-50%) scale(1.08)}.chosen{position:absolute;bottom:2vh;font:900 clamp(1.2rem,3vw,2.4rem) Montserrat}.game-head{position:absolute;top:0;left:0;width:100%;height:15vh;display:flex;align-items:center;gap:2vw;padding:2vh 4vw}.pill{background:var(--primary);padding:.75em 1.2em;border-radius:999px;font:900 clamp(.7rem,1.5vw,1.05rem) Montserrat;box-shadow:0 6px 0 #312e81}.progress{flex:1;max-width:560px;font:800 .75rem Montserrat}.progress>div{height:10px;background:#ffffff22;border-radius:20px;overflow:hidden;margin-top:7px}.progress i{display:block;height:100%;background:var(--accent);transition:width .4s var(--ease)}.icon-btn{margin-left:auto;border:0;background:#ffffff15;color:white;width:45px;height:45px;border-radius:50%;font-size:2rem;cursor:pointer}.stage{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:70vh}.card{position:relative;height:min(57vmin,58vh);aspect-ratio:1;border-radius:clamp(20px,4vmin,42px);padding:clamp(8px,1.4vmin,14px);background:linear-gradient(145deg,#fff,#ddd);box-shadow:0 25px 80px #000a,0 0 0 7px #ffffff22;transform:rotate(-1.2deg);transition:.55s var(--ease);overflow:hidden}.card.enter{animation:cardIn .65s var(--ease)}.card.revealed{transform:rotate(1.5deg) scale(.96)}.card img{width:100%;height:100%;object-fit:cover;border-radius:clamp(14px,3vmin,32px)}.answer{position:absolute;inset:auto 0 0;background:linear-gradient(transparent,#020617 28%);padding:12% 8% 7%;text-align:center;transform:translateY(105%);transition:.5s var(--ease)}.revealed .answer{transform:translateY(0)}.answer small{display:block;color:var(--accent);font:800 clamp(.65rem,1.4vmin,.9rem) Montserrat;letter-spacing:.18em}.answer strong{display:block;font:900 clamp(1.3rem,4vmin,3rem)/1.05 Montserrat;text-shadow:0 4px 0 #000}.timer{position:absolute;z-index:5;left:calc(50% + min(25vmin,27vh));top:5%;width:clamp(66px,9vmin,100px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#2e1065;border:6px solid #fff;font:900 clamp(1.6rem,4vmin,3rem) Montserrat;box-shadow:0 8px 0 #b45309}.timer.tick{animation:timerPop .35s var(--ease)}.timer.danger{background:#ef4444;color:#fff;box-shadow:0 8px 0 #991b1b}footer{position:absolute;bottom:2.5vh;display:flex;align-items:center;gap:2vw}footer span{color:#ffffff99;font-size:clamp(.7rem,1.2vw,.9rem)}.next-btn{font-size:clamp(.8rem,1.4vw,1rem);padding:.9em 1.5em}.trophy{font-size:clamp(6rem,18vmin,11rem);animation:trophy 1.2s var(--ease) infinite alternate}#finish h1{font:900 clamp(2.6rem,7vw,6rem) Montserrat;margin:0 0 5vh}#confetti{position:fixed;z-index:99;inset:0;pointer-events:none}.confetto{position:absolute;top:-20px;width:12px;height:18px;animation:fall 2.8s linear forwards}@keyframes logoIn{from{transform:translateY(-70vh) rotate(-14deg)}70%{transform:translateY(5vh) rotate(4deg)}to{transform:rotate(-3deg)}}@keyframes cardIn{from{transform:translateX(70vw) rotate(18deg) scale(.7)}70%{transform:translateX(-3vw) rotate(-4deg) scale(1.04)}to{transform:rotate(-1.2deg)}}@keyframes timerPop{50%{transform:scale(1.2) rotate(-6deg)}}@keyframes trophy{to{transform:translateY(-14px) rotate(5deg)}}@keyframes drift{to{transform:translate(10vw,8vh)}}@keyframes fall{to{transform:translate(var(--dx),110vh) rotate(800deg)}}@media(max-width:700px){.game-head{height:12vh}.stage{height:68vh}.timer{left:auto;right:4vw;top:0}.pill{max-width:42vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}footer{width:90%;justify-content:center;flex-wrap:wrap}footer span{width:100%;text-align:center}.wheel-wrap{width:min(86vw,60vh)}}

