:root{
  --bg0:#07040f;--bg1:#140a2b;--bg2:#2a1257;
  --card:rgba(255,255,255,.06);--card2:rgba(255,255,255,.1);--line:rgba(255,231,160,.16);
  --text:#fbf7ff;--muted:#c6bde3;--gold:#f2c14e;--gold2:#ffe08a;--gold3:#8a5a12;--danger:#fb7185;
  --display:"Luckiest Guy",system-ui,sans-serif;--body:Nunito,system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg0)}
body{margin:0;min-height:100vh;color:var(--text);font-family:var(--body);font-weight:700;overflow-x:hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%,rgba(168,85,247,.45),transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%,rgba(242,193,78,.12),transparent 70%),
    linear-gradient(180deg,var(--bg2) 0%,var(--bg1) 40%,var(--bg0) 100%);
  background-attachment:fixed}
/* céu estrelado */
body::before,body::after{content:"";position:fixed;inset:-50%;pointer-events:none;z-index:0;
  background-image:radial-gradient(1.5px 1.5px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 120px 80px,#fff,transparent),
    radial-gradient(1.5px 1.5px at 200px 160px,#ffe9a3,transparent),radial-gradient(1px 1px at 60px 200px,#fff,transparent),
    radial-gradient(1px 1px at 260px 40px,#d8ccff,transparent);
  background-size:300px 240px;opacity:.55;animation:drift 120s linear infinite}
body::after{background-size:420px 360px;opacity:.35;animation-duration:200s;animation-direction:reverse}
@keyframes drift{to{transform:translate(300px,240px)}}
body>*{position:relative;z-index:1}
button,input{font:inherit}
button{cursor:pointer;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--text);padding:10px 16px;font-weight:800;
  transition:transform .15s,background .15s,box-shadow .15s}
button:hover:not(:disabled){background:var(--card2)}
button:active:not(:disabled){transform:translateY(1px) scale(.98)}
button:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible{outline:3px solid var(--gold2);outline-offset:3px}

/* botão principal dourado */
.btn-gold{border:0;font-family:var(--display);font-weight:400;letter-spacing:.06em;color:#3b2304;font-size:24px;padding:16px 56px 12px;border-radius:999px;
  background:linear-gradient(180deg,#fff3c4 0%,#ffd86b 40%,#e9a92a 60%,#c7861a 100%);
  box-shadow:0 6px 0 #7a4d0c,0 10px 24px rgba(0,0,0,.45),0 0 40px rgba(242,193,78,.35),inset 0 2px 0 rgba(255,255,255,.8);
  text-shadow:0 1px 0 rgba(255,255,255,.6)}
.btn-gold:hover:not(:disabled){background:linear-gradient(180deg,#fffbe6 0%,#ffe08a 40%,#f2b93a 60%,#d4921f 100%)}
.btn-gold:active:not(:disabled){transform:translateY(4px);box-shadow:0 2px 0 #7a4d0c,0 4px 12px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.8)}
.btn-gold.sm{font-size:18px;padding:12px 28px 9px}

/* título estilo jogo */
.hero{text-align:center;padding:28px 16px 4px}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:900;letter-spacing:.28em;text-transform:uppercase;color:var(--gold2)}
.kicker::before,.kicker::after{content:"";width:28px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.kicker::after{transform:scaleX(-1)}
.game-title{margin:8px 0 0;font-family:var(--display);font-weight:400;font-size:clamp(42px,10vw,84px);line-height:.95;letter-spacing:.02em;
  color:#ffe08a;background:linear-gradient(180deg,#fffbe6 10%,#ffd86b 45%,#e9a92a 60%,#fff0b8 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 3px 0 #7a4d0c) drop-shadow(0 6px 0 #3b2304) drop-shadow(0 12px 18px rgba(0,0,0,.55));
  overflow-wrap:anywhere}
.game-sub{margin:14px auto 0;max-width:640px;font-size:clamp(16px,3.6vw,22px);font-weight:900;color:#efe9ff;text-transform:uppercase;letter-spacing:.03em;text-shadow:0 2px 10px rgba(0,0,0,.5)}

/* ---------- roleta ---------- */
.stage{display:flex;flex-direction:column;align-items:center;gap:26px;padding:18px 16px 32px;overflow-x:clip}
.wheel{position:relative;width:min(100%,600px);aspect-ratio:1;user-select:none;-webkit-tap-highlight-color:transparent}
.wheel::before{content:"";position:absolute;inset:-6%;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(242,193,78,.35) 0%,rgba(168,85,247,.25) 45%,transparent 70%);filter:blur(10px);transition:opacity .4s}
.wheel.win::before{animation:halo 1.2s ease-in-out infinite alternate}
@keyframes halo{from{opacity:.6;transform:scale(.97)}to{opacity:1;transform:scale(1.04)}}
.wheel-frame{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 20deg,#7a4d0c,#ffe9a3,#c7861a,#fff6d5,#8a5a12,#f2c14e,#7a4d0c,#ffe08a,#b07a1c,#fff2b3,#7a4d0c);
  box-shadow:0 24px 50px rgba(0,0,0,.6),0 0 0 3px #3b2304,inset 0 0 0 3px rgba(255,255,255,.35),inset 0 0 18px rgba(0,0,0,.5)}
.wheel-disc{position:absolute;inset:6.6%;border-radius:50%;overflow:hidden;will-change:transform;
  box-shadow:0 0 0 4px #3b2304,0 0 0 6px #fff2b3}
.wheel-disc canvas{width:100%;height:100%;display:block}
.bulb{position:absolute;width:3.2%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 35% 35%,#fff,#ffe9a3 35%,#c7861a 75%);box-shadow:0 0 0 1.5px #5c3a08}
.wheel.idle .bulb{animation:chase 1s steps(1) infinite;animation-delay:var(--d)}
.wheel.spinning .bulb{animation:chase .16s steps(1) infinite;animation-delay:calc(var(--d) * .16)}
.wheel.win .bulb{animation:lit .5s ease-in-out infinite alternate}
@keyframes chase{0%{filter:brightness(1.25);box-shadow:0 0 0 1.5px #5c3a08,0 0 10px 3px rgba(255,225,130,.9)}50%{filter:brightness(.55);box-shadow:0 0 0 1.5px #5c3a08}}
@keyframes lit{from{filter:brightness(1);box-shadow:0 0 0 1.5px #5c3a08,0 0 8px 2px rgba(255,225,130,.7)}to{filter:brightness(1.4);box-shadow:0 0 0 1.5px #5c3a08,0 0 16px 6px rgba(255,225,130,1)}}
.wheel-pointer{position:absolute;left:50%;top:-4.2%;width:11%;transform:translateX(-50%);transform-origin:50% 33%;z-index:3;
  filter:drop-shadow(0 6px 6px rgba(0,0,0,.55))}
.wheel-hub{position:absolute;inset:0;margin:auto;width:25%;height:25%;border-radius:50%;padding:0;z-index:2;border:0;
  background:radial-gradient(circle at 50% 50%,#2b1650 0 53%,transparent 54%),
    conic-gradient(from 30deg,#7a4d0c,#ffe9a3,#c7861a,#fff6d5,#8a5a12,#f2c14e,#7a4d0c);
  box-shadow:0 10px 22px rgba(0,0,0,.6),0 0 0 3px #3b2304,inset 0 0 0 2px rgba(255,255,255,.4);
  transition:transform .15s,filter .2s}
.wheel-hub span{position:absolute;inset:14%;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 40% 30%,#ffe08a,#e9a92a 55%,#a86f15);box-shadow:inset 0 3px 4px rgba(255,255,255,.7),inset 0 -4px 8px rgba(90,50,5,.6);
  font-family:var(--display);font-size:clamp(14px,3.6vw,24px);letter-spacing:.04em;color:#4a2c05;text-shadow:0 1px 0 rgba(255,255,255,.6);padding-top:.15em}
.wheel-hub:hover:not(:disabled){filter:brightness(1.1)}
.wheel-hub:active:not(:disabled){transform:scale(.95)}
.wheel.idle .wheel-hub:not(:disabled) span{animation:breathe 2.2s ease-in-out infinite}
@keyframes breathe{50%{box-shadow:inset 0 3px 4px rgba(255,255,255,.7),inset 0 -4px 8px rgba(90,50,5,.6),0 0 22px 6px rgba(255,214,107,.55)}}
.wheel-hub:disabled{opacity:1;cursor:default}

/* fileira de opções */
.roster{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:640px}
.roster figure{margin:0;width:58px;text-align:center;transition:opacity .3s,filter .3s}
.roster img,.roster .sw{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 20%;display:block;margin:0 auto;
  box-shadow:0 0 0 2px var(--gold),0 6px 14px rgba(0,0,0,.5)}
.roster figcaption{font-size:11px;font-weight:800;color:var(--muted);margin-top:6px;line-height:1.15;overflow-wrap:anywhere}
.roster figure.out{opacity:.3;filter:grayscale(1)}
.muted{color:var(--muted);font-size:14px;font-weight:700}

/* ---------- revelação do resultado ---------- */
dialog.reveal{border:0;padding:16px;background:transparent;color:var(--text);overflow:hidden;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0}
dialog.reveal[open]{display:grid;place-items:center}
dialog.reveal .reveal-card{width:min(100%,460px);max-height:calc(100dvh - 32px);overflow:auto}
dialog.reveal::backdrop{background:radial-gradient(circle at 50% 45%,rgba(40,16,80,.75),rgba(3,1,8,.92));backdrop-filter:blur(6px)}
.rays{position:absolute;left:50%;top:45%;width:max(160vmin,900px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;z-index:-1;
  background:repeating-conic-gradient(from 0deg,rgba(255,224,138,.22) 0 8deg,transparent 8deg 20deg);
  -webkit-mask:radial-gradient(circle,#000 0,transparent 62%);mask:radial-gradient(circle,#000 0,transparent 62%);
  animation:spinRays 18s linear infinite}
@keyframes spinRays{to{transform:translate(-50%,-50%) rotate(360deg)}}
.reveal-card{position:relative;border-radius:28px;padding:22px 22px 24px;text-align:center;
  background:linear-gradient(180deg,#2c1856,#170c31);
  box-shadow:0 0 0 2px #f2c14e,0 0 0 6px #3b2304,0 0 0 8px #c7861a,0 30px 80px rgba(0,0,0,.7),0 0 80px rgba(242,193,78,.35)}
dialog.reveal[open] .reveal-card{animation:cardIn .7s cubic-bezier(.18,1.35,.4,1) both}
dialog.reveal[open] .rays{animation:raysIn .6s ease-out both,spinRays 18s linear infinite}
@keyframes cardIn{0%{transform:scale(.2) rotate(-10deg);opacity:0}60%{opacity:1}100%{transform:none}}
@keyframes raysIn{from{opacity:0}}
.reveal-card .kicker{font-size:12px}
.reveal-frame{margin:14px auto 0;border-radius:20px;padding:6px;
  background:conic-gradient(from 0deg,#7a4d0c,#ffe9a3,#c7861a,#fff6d5,#8a5a12,#f2c14e,#7a4d0c)}
.reveal-frame img{display:block;width:100%;max-height:48vh;object-fit:contain;border-radius:15px;background:#0d0820}
.reveal-name{margin:18px 0 20px;font-family:var(--display);font-weight:400;font-size:clamp(32px,8vw,46px);line-height:1;letter-spacing:.03em;
  background:linear-gradient(100deg,#ffd86b 20%,#fffbe6 40%,#ffd86b 60%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 3px 0 #5c3a08);animation:shine 2.4s linear infinite}
@keyframes shine{from{background-position:120% 0}to{background-position:-130% 0}}
.row{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
}