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

body{
background:#020817;
font-family:'Inter',sans-serif;
color:white;
min-height:100vh;
overflow-x:hidden;
}

.bg-glow{
position:fixed;
top:-250px;
left:50%;
transform:translateX(-50%);
width:900px;
height:900px;
background:#2563eb;
opacity:.12;
filter:blur(180px);
z-index:0;
}

.container{
position:relative;
z-index:2;
display:flex;
justify-content:center;
padding:40px 20px;
}

.card{
width:100%;
max-width:760px;
background:rgba(15,23,42,.88);
border:1px solid rgba(255,255,255,.06);
backdrop-filter:blur(18px);
border-radius:34px;
padding:40px;
box-shadow:
0 0 40px rgba(37,99,235,.15),
0 25px 60px rgba(0,0,0,.55);
}

.topbar{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

.logo{
font-size:28px;
font-weight:900;
}

.online{
background:#0f172a;
padding:10px 16px;
border-radius:14px;
font-size:14px;
color:#4ade80;
font-weight:700;
}

h1{
font-size:56px;
font-weight:900;
text-align:center;
margin-bottom:12px;
}

.subtitle{
text-align:center;
color:#cbd5e1;
margin-bottom:35px;
font-size:18px;
}

.wheel-wrap{
position:relative;
width:420px;
height:420px;
margin:0 auto 35px;
display:flex;
justify-content:center;
align-items:center;
pointer-events:none;
}

#wheel{
display:block;
width:420px;
height:420px;
border-radius:50%;
background:#111827;
box-shadow:
0 0 50px rgba(37,99,235,.25),
0 0 90px rgba(255,255,255,.06);
pointer-events:none;
}

.pointer{
position:absolute;
top:-18px;
left:50%;
transform:translateX(-50%);
width:0;
height:0;
border-left:22px solid transparent;
border-right:22px solid transparent;
border-top:50px solid white;
z-index:20;
pointer-events:none;
}

.wheel-center{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:95px;
height:95px;
border-radius:50%;
background:#0f172a;
display:flex;
justify-content:center;
align-items:center;
font-size:24px;
font-weight:900;
border:4px solid rgba(255,255,255,.08);
box-shadow:
0 0 30px rgba(37,99,235,.3);
pointer-events:none;
z-index:5;
}

form{
position:relative;
z-index:50;
}

input{
width:100%;
padding:18px;
border:none;
border-radius:18px;
background:#e2e8f0;
font-size:17px;
margin-bottom:20px;
outline:none;
}

button{
width:100%;
padding:18px;
border:none;
border-radius:18px;
font-size:20px;
font-weight:900;
cursor:pointer;
transition:.25s;
position:relative;
z-index:100;
}

button:hover{
transform:translateY(-2px);
}

#spinBtn{
background:linear-gradient(135deg,#22c55e,#16a34a);
color:white;
box-shadow:
0 10px 35px rgba(34,197,94,.3);
}

.withdraw-btn{
margin-top:20px;
background:linear-gradient(135deg,#f59e0b,#f97316);
color:white;
box-shadow:
0 10px 35px rgba(249,115,22,.3);
}

.balance-card{
margin-top:30px;
background:#0f172a;
padding:28px;
border-radius:24px;
text-align:center;
border:1px solid rgba(255,255,255,.05);
}

.balance-label{
font-size:15px;
color:#94a3b8;
}

.balance-amount{
font-size:46px;
font-weight:900;
color:#4ade80;
margin:10px 0;
}

.balance-currency{
font-size:20px;
font-weight:700;
color:#facc15;
}

.cooldown{
margin-top:18px;
text-align:center;
font-weight:700;
color:#facc15;
font-size:18px;
}

.result{
margin-top:24px;
text-align:center;
font-size:20px;
font-weight:700;
}

.live-feed{
margin-top:35px;
background:#0f172a;
padding:24px;
border-radius:24px;
border:1px solid rgba(255,255,255,.05);
}

.feed-title{
font-size:24px;
font-weight:900;
margin-bottom:18px;
}

.feed-item{
padding:14px 0;
border-bottom:1px solid rgba(255,255,255,.05);
color:#cbd5e1;
font-size:16px;
}

.offerwall{
margin-top:35px;
text-align:center;
}

.offerwall a{
color:#facc15;
font-weight:900;
text-decoration:none;
font-size:18px;
}

footer{
margin-top:30px;
text-align:center;
color:#94a3b8;
}

footer a{
color:#facc15;
font-weight:700;
text-decoration:none;
}

.popup{
position:fixed;
inset:0;
background:rgba(0,0,0,.82);
display:flex;
justify-content:center;
align-items:center;
z-index:99999;
}

.hidden{
display:none;
}

.popup-box{
width:90%;
max-width:420px;
background:#0f172a;
padding:40px;
border-radius:34px;
text-align:center;
box-shadow:
0 0 60px rgba(255,215,0,.15);
animation:popup .25s ease;
}

.popup-box h2{
font-size:40px;
margin-bottom:25px;
}

.popup-amount{
font-size:54px;
font-weight:900;
color:#4ade80;
}

.popup-currency{
font-size:26px;
margin-bottom:15px;
color:#facc15;
}

.popup-tier{
font-size:30px;
font-weight:900;
margin-bottom:30px;
}

.popup button{
background:linear-gradient(135deg,#22c55e,#16a34a);
color:white;
}

@keyframes popup{

from{
transform:scale(.7);
opacity:0;
}

to{
transform:scale(1);
opacity:1;
}

}

canvas{
max-width:100%;
height:auto;
}

@media(max-width:768px){

.card{
padding:25px;
}

h1{
font-size:40px;
}

.wheel-wrap{
width:320px;
height:320px;
}

#wheel{
width:320px;
height:320px;
}

.balance-amount{
font-size:34px;
}

}