*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Segoe UI, Arial;
background:#0b0c14;
color:white;
height:100vh;
overflow:hidden;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}

/* FUNDO */

.background{
position:fixed;
width:100%;
height:100%;
background:url(images/background.jpg);
background-size:cover;
background-position:center;
opacity:.35;
z-index:-1;
}

/* TOPO */

.topbar{
position:fixed;
top:0;
left:50%;
transform:translateX(-50%);

display:flex;
justify-content:space-between;
align-items:center;

padding:20px 40px;

width:100%;
max-width:1200px;

z-index:10;
}

.logo img{
height:50px;
}

/* ONLINE */

.online-box{
display:flex;
align-items:center;
gap:8px;

background:rgba(15,15,25,0.9);
padding:10px 16px;

border-radius:12px;

font-size:14px;
font-weight:600;

border:1px solid rgba(0,255,255,0.3);

box-shadow:
0 0 8px rgba(0,255,255,0.4),
0 0 18px rgba(0,255,255,0.2);

color:#ffffff;
}

.online-box::before{
content:"";
width:10px;
height:10px;

background:#00ff9c;

border-radius:50%;

box-shadow:0 0 8px #00ff9c;

animation:pulseOnline 1.5s infinite;
}

@keyframes pulseOnline{
0%{opacity:1}
50%{opacity:.4}
100%{opacity:1}
}

/* LAYOUT */

.container{
flex:1;
display:flex;
justify-content:center;
align-items:center;
width:100%;
}

/* ROLETA */

.wheel-area{
display:flex;
justify-content:center;
align-items:center;
width:100%;
}

.wheel-container{
position:relative;
display:flex;
justify-content:center;
align-items:center;
}

/* IMAGEM ROLETA */

#wheel{
width:85vw;
max-width:520px;
aspect-ratio:1/1;

border-radius:50%;

transition:transform 6s cubic-bezier(.17,.67,.83,.67);

box-shadow:0 0 20px #0b44ff;
}

/* PONTEIRO */

.pointer{
position:absolute;
top:-30px;
left:50%;
transform:translateX(-50%);
transform-origin:top center;

z-index:20;
width:60px;
}

.pointer img{
width:100%;
display:block;
}

/* BOTÃO GIRAR */

#spin{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);

width:120px;
height:120px;

border-radius:50%;
border:none;

background:#3721ff;

font-size:20px;
font-weight:bold;

cursor:pointer;

color:white;

box-shadow:
0 0 20px #fff,
0 0 40px #0e12ff,
0 0 80px #0d11ff;

transition:.3s;
}

#spin:hover{
transform:translate(-50%,-50%) scale(1.07);
}

/* RESULTADO */

.result-popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
display:none;
justify-content:center;
align-items:center;
background:rgba(0,0,0,.7);
z-index:999;
}

.result-box{
background:#111;
padding:40px;
border-radius:14px;
text-align:center;

max-width:320px;

box-shadow:
0 0 20px rgba(0,255,255,.3),
0 0 40px rgba(0,0,0,.9);
}

.result-box h2{
margin-bottom:20px;
font-size:22px;
}

/* BOTÕES DO POPUP */

.result-buttons{
display:flex;
gap:12px;
justify-content:center;
}

button{
padding:10px 20px;
border:none;
border-radius:8px;
cursor:pointer;
font-weight:600;
}

/* BOTÃO RESGATAR */

#claimButton{
background:#00d9ff;
color:#000;
font-weight:bold;

box-shadow:
0 0 10px #00d9ff,
0 0 25px #00d9ff;

transition:.2s;
}

#claimButton:hover{
transform:scale(1.05);
}

/* NOTIFICAÇÕES */

#liveWins{
position:fixed;
left:20px;
bottom:20px;

display:flex;
flex-direction:column;
gap:12px;

z-index:9999;
}

.win-toast{
background:rgba(10,10,20,0.95);
color:white;
padding:12px 18px;
border-radius:10px;

font-size:14px;
font-weight:500;

border:1px solid rgba(0,255,255,0.3);

box-shadow:
0 0 10px rgba(0,255,255,0.5),
0 0 20px rgba(0,255,255,0.2);

animation:toastSlide 0.4s ease;
}

@keyframes toastSlide{
from{
opacity:0;
transform:translateX(-60px);
}
to{
opacity:1;
transform:translateX(0);
}
}

/* RESPONSIVO */

@media(max-width:600px){

.logo img{
height:35px;
}

.online-box{
font-size:12px;
padding:8px 12px;
}

.pointer{
width:45px;
top:-20px;
}

#spin{
width:90px;
height:90px;
font-size:16px;
}

#wheel{
width:90vw;
}

.result-box{
padding:25px;
}

}

/* ANIMAÇÃO PONTEIRO */

@keyframes pointerTick{

0%{transform:translateX(-50%) rotate(0deg);}
50%{transform:translateX(-50%) rotate(-18deg);}
100%{transform:translateX(-50%) rotate(0deg);}

}

.pointer.tick{
animation:pointerTick .12s linear;
}