*{box-sizing:border-box}body,html{margin:0;padding:0;font-family:Arial,sans-serif}
body.casino-bg{background:#111 url('../img/bg.jpg') center/cover fixed no-repeat;color:#fff;min-height:100vh}
.page-wrap{max-width:1280px;margin:auto;padding:20px}
.top-logo{display:block;margin:0 auto 10px;max-width:260px;filter:drop-shadow(0 6px 12px #000)}
.floating{animation:floaty 2s infinite alternate}
@keyframes floaty{from{transform:translateY(0)}to{transform:translateY(-8px)}}

.main-grid{display:grid;grid-template-columns:58% 42%;align-items:center}

/* ===============================
   WHEEL AREA
=================================*/
.wheel-side{
position:relative;
display:flex;
justify-content:center;
align-items:center;
min-height:520px
}

.wheel-wrap{
position:relative;
width:460px;
height:460px;
display:flex;
justify-content:center;
align-items:center;
}

.pointer{
position:absolute;
top:-8px;
left:50%;
transform:translateX(-50%);
width:0;
height:0;
border-left:18px solid transparent;
border-right:18px solid transparent;
border-top:42px solid #ffd700;
z-index:50;
filter:drop-shadow(0 4px 8px #000)
}

/* LINGKARAN LUAR */
.wheel-premium{
width:460px;
height:460px;
border-radius:50%;
position:relative;
overflow:hidden;
border:14px solid #8b5a00;
box-shadow:
0 0 0 8px #e7b300,
0 0 35px rgba(255,215,0,.35),
0 20px 40px rgba(0,0,0,.55);
background:#111;
}

/* BAGIAN YANG BERPUTAR */
.wheel-rotor{
position:absolute;
inset:0;
border-radius:50%;
background:
conic-gradient(
#f7d24b 0deg 72deg,
#b30000 72deg 144deg,
#f7d24b 144deg 216deg,
#b30000 216deg 288deg,
#f7d24b 288deg 360deg
);
}

/* GARIS PUTIH PUTUS */
.wheel-rotor:before{
content:'';
position:absolute;
inset:18px;
border-radius:50%;
border:6px dashed rgba(255,255,255,.35);
}

/* TOMBOL TENGAH TETAP DIAM */
.wheel-center{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:120px;
height:120px;
border-radius:50%;
background:radial-gradient(circle,#ffd700,#c68a00);
display:flex;
align-items:center;
justify-content:center;
color:#111;
font-weight:900;
font-size:28px;
box-shadow:0 10px 20px rgba(0,0,0,.4);
z-index:99;
}

/* ===============================
   FORM
=================================*/
.form-side{display:flex;justify-content:center}
.ticket-box{width:100%;max-width:430px;transform:scale(.95)}

.notice-bar{
background:linear-gradient(#f3c538,#c98900);
padding:12px;
border-radius:14px;
color:#111;
font-weight:900;
text-align:center;
margin-bottom:12px;
box-shadow:0 8px 20px rgba(0,0,0,.35)
}

.ticket-input{
width:100%;
padding:14px 16px;
margin-bottom:10px;
border-radius:12px;
border:1px solid #777;
background:#d9d9d9;
font-size:22px;
text-align:center
}

.gold-btn{
width:100%;
padding:14px;
border:0;
border-radius:16px;
background:linear-gradient(#f5cb42,#c67f00);
font-size:22px;
font-weight:900;
color:#111;
box-shadow:0 6px 0 #7c2500;
cursor:pointer
}

.gold-btn:hover{filter:brightness(1.08)}

.btn-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
margin-top:12px
}

.full{margin-top:4px}

.msg{
display:block;
color:#ffdd57;
min-height:18px;
text-align:center
}

/* ===============================
   POPUP
=================================*/
.popup{
position:fixed;
inset:0;
background:rgba(0,0,0,.7);
display:flex;
align-items:center;
justify-content:center;
z-index:99
}

.hidden{display:none}

.popup-card{
width:92%;
max-width:420px;
background:#1d1d1d;
border:2px solid #ffd700;
border-radius:18px;
padding:22px;
position:relative
}

.x{
position:absolute;
right:12px;
top:8px;
font-size:32px;
cursor:pointer
}

/* ===============================
   MOBILE
=================================*/
@media(max-width:900px){

.main-grid{grid-template-columns:1fr}

.wheel-side{min-height:360px}

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

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

.wheel-center{
width:90px;
height:90px;
font-size:22px
}

.pointer{
top:-8px
}

.ticket-box{
max-width:100%;
transform:scale(1)
}

.ticket-input,.gold-btn{
font-size:18px
}

}