:root{
    --bg:#0b0f1a;
    --panel:#0f1627;
    --text:#e9eefc;
    --muted:#aab6da;
    --gold:#ffcc5c;
    --stroke: rgba(255,255,255,.10);
    --shadow: 0 20px 80px rgba(0,0,0,.55);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
    color:var(--text);
    background:
            radial-gradient(900px 500px at 50% 30%, rgba(255,204,92,.12), transparent 55%),
            radial-gradient(700px 400px at 80% 70%, rgba(120,160,255,.10), transparent 60%),
            var(--bg);
}

.page{
    min-height:100%;
    display:grid;
    place-items:center;
}

.cta{
    padding:14px 20px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.14);
    background: linear-gradient(180deg, rgba(255,204,92,.18), rgba(255,184,77,.10));
    color: var(--text);
    font-weight:700;
    font-size:16px;
    cursor:pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.cta:hover{ transform: translateY(-1px); }
.cta:active{ transform: translateY(0px); }

.overlay{
    position:fixed;
    inset:0;
    background: rgba(0,0,0,.62);
    display:grid;
    place-items:center;
    padding:18px;
}
.hidden{ display:none; }

.modal{
    width:min(560px, 96vw);
    border-radius:22px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border:1px solid var(--stroke);
    box-shadow: var(--shadow);
    position:relative;
    overflow:hidden;
}

.close{
    position:absolute;
    top:12px;
    right:12px;
    width:40px;
    height:40px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.14);
    background: rgba(15,22,39,.65);
    color: var(--text);
    cursor:pointer;
}
.close:hover{ background: rgba(15,22,39,.85); }

.modalHeader{
    padding:18px 18px 8px 18px;
}
.title{
    font-size:18px;
    font-weight:800;
}
.subtitle{
    margin-top:4px;
    font-size:13px;
    color: var(--muted);
}

.wheelWrap{
    padding: 12px 18px 0 18px;
    display:grid;
    place-items:center;
    position:relative;
}

.pointer{
    position:absolute;
    top: 2px;
    width:0;height:0;
    border-left:12px solid transparent;
    border-right:12px solid transparent;
    border-top:18px solid var(--gold);
    filter: drop-shadow(0 6px 8px rgba(0,0,0,.55));
    z-index:3;
}

.wheelHost{
    width: 360px;
    height: 360px;
    border-radius: 999px;
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.10), rgba(255,255,255,.02) 60%, rgba(0,0,0,.25));
    border:1px solid rgba(255,255,255,.10);
    display:grid;
    place-items:center;
    position:relative;
}

.bonusArea{
    padding: 12px 18px 0 18px;
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
}

.bonusNav{
    width:38px;
    height:38px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.14);
    background: rgba(15,22,39,.55);
    color: var(--text);
    cursor:pointer;
    flex: 0 0 auto;
}
.bonusNav:hover{ background: rgba(15,22,39,.85); }
.bonusNav:disabled{ opacity:.35; cursor:default; }

.bonusSlider{
    flex: 1 1 auto;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.12);
    background: rgba(15,22,39,.55);
    padding:10px;
    display:flex;
    gap:10px;

    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;

    scrollbar-width: none;
}
.bonusSlider::-webkit-scrollbar{ display:none; }

.bonusCard{
    flex: 0 0 auto;
    width: 170px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.12);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    padding:10px;
    cursor:pointer;
    scroll-snap-align: start;
}

.bonusCard:hover{ background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); }

.bonusTop{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-weight:800;
    font-size:12px;
}
.badge{
    font-weight:800;
    font-size:11px;
    padding:2px 8px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.25);
}
.bonusMid{
    margin-top:10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}
.tickets{
    font-weight:900;
    font-size:22px;
}
.sub{
    margin-top:8px;
    color: var(--muted);
    font-size:12px;
    line-height:1.2;
}

.bonusCard.claimable .badge{
    border-color: rgba(255,204,92,.55);
    background: rgba(255,204,92,.10);
}
.bonusCard.claimed{
    opacity:.55;
    cursor:default;
}
.bonusCard.claimed:hover{
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}

.modalFooter{
    padding: 14px 18px 18px 18px;
    display:grid;
    gap:10px;
}
.spin{
    padding:12px 14px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.14);
    background: linear-gradient(180deg, rgba(255,204,92,.28), rgba(255,184,77,.12));
    color: var(--text);
    font-weight:900;
    cursor:pointer;
}
.spin:disabled{
    opacity:.55;
    cursor:not-allowed;
}
.result{
    min-height:18px;
    font-size:13px;
    color: var(--muted);
}

@media (max-width: 420px){
    .wheelHost{ width: 300px; height:300px; }
}

/* Dev panel */
#devPanel{
    position:fixed;
    bottom:10px;
    left:10px;
    background:#111;
    color:#0f0;
    font:12px monospace;
    padding:6px;
    border:1px solid #333;
    z-index:9999;
    user-select:none;
}
#devBar{
    display:flex;
    gap:6px;
    cursor:move;
    margin-bottom:6px;
}
#devBody{
    user-select:text;
}
#devPanel button, #devPanel input{
    font:12px monospace;
}
#devPanel input{
    width:120px;
}
#devPanel[data-size="s"]{ width:220px; }
#devPanel[data-size="m"]{ width:320px; }
#devPanel[data-size="l"]{ width:420px; }
#devPanel hr{ border:0; border-top:1px solid #333; margin:8px 0; }
#devUserInfo, #devSpinInfo{ margin-top:6px; white-space:pre-wrap; }