:root{
    --red1:#9f1010;
    --red2:#d62828;
    --green1:#14532d;
    --green2:#198754;
    --gold:#f4c542;
    --white:#ffffff;
}

body.christmas-bg{
    min-height:100vh;
    background:
        radial-gradient(circle at top, rgba(255,255,255,.08), transparent 30%),
        linear-gradient(135deg, var(--green1), var(--red1));
    color:#fff;
}

.main-card{
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(8px);
    border-radius: 24px;
    color:#fff;
}

.title-main{
    font-size: 2.2rem;
    font-weight: 800;
    text-shadow: 0 2px 12px rgba(0,0,0,.25);
}

.subtitle{
    color: rgba(255,255,255,.92);
}

.panel-box{
    background: rgba(0,0,0,.18);
    border:1px solid rgba(255,255,255,.12);
    border-radius: 20px;
    padding: 24px;
}

.btn-spin{
    background: linear-gradient(135deg, var(--red2), #ff5c5c);
    color:#fff;
    border:none;
    border-radius:14px;
    font-weight:700;
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

.btn-spin:hover{
    color:#fff;
    opacity:.95;
}

.wheel-wrapper{
    position:relative;
    width:100%;
    max-width:420px;
    aspect-ratio:1/1;
    margin:0 auto;
}

.wheel{
    width:100%;
    height:100%;
    border-radius:50%;
    border:10px solid rgba(255,255,255,.9);
    position:relative;
    box-shadow:0 18px 35px rgba(0,0,0,.35);
    transition: transform 4.8s cubic-bezier(.17,.67,.17,1);
    background:
        conic-gradient(
            #c62828 0deg 45deg,
            #2e7d32 45deg 90deg,
            #ef5350 90deg 135deg,
            #43a047 135deg 180deg,
            #ad1457 180deg 225deg,
            #1b5e20 225deg 270deg,
            #d32f2f 270deg 315deg,
            #388e3c 315deg 360deg
        );
}

.wheel::before{
    content:"🎁 ⭐ 🎄 ❄️ 🎁 ⭐ 🎄 ❄️";
    position:absolute;
    inset:18%;
    border-radius:50%;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    font-size:1.7rem;
    line-height:1.8;
    letter-spacing:8px;
    transform: rotate(-14deg);
}

.wheel-center{
    position:absolute;
    inset:50%;
    transform:translate(-50%, -50%);
    width:90px;
    height:90px;
    border-radius:50%;
    background:#fff;
    color:#333;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:2rem;
    border:6px solid var(--gold);
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

.wheel-pointer{
    position:absolute;
    top:-6px;
    left:50%;
    transform:translateX(-50%);
    width:0;
    height:0;
    border-left:18px solid transparent;
    border-right:18px solid transparent;
    border-top:40px solid var(--gold);
    z-index:5;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,.3));
}

.result-modal{
    background: linear-gradient(135deg, var(--green1), var(--red2));
    color:#fff;
    border-radius:20px;
}

.result-name{
    font-size:2rem;
    font-weight:800;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.14);
    border-radius:18px;
    padding:18px 12px;
}

.admin-stat-box{
    background: rgba(0,0,0,.18);
    border-radius:18px;
    padding:20px;
    text-align:center;
    border:1px solid rgba(255,255,255,.08);
}

.stat-label{
    font-size:.9rem;
    color:rgba(255,255,255,.8);
}

.stat-value{
    font-size:2rem;
    font-weight:800;
}

.snow-layer::before,
.snow-layer::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.75) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,255,255,.45) 1px, transparent 1px);
    background-size:50px 50px, 90px 90px;
    animation:snow 18s linear infinite;
    opacity:.18;
}

.snow-layer::after{
    animation-duration:28s;
    opacity:.10;
}

@keyframes snow{
    from{ transform:translateY(-20px); }
    to{ transform:translateY(40px); }
}