.wheel-overlay{
    position:fixed;
    inset:0;
    z-index:999999;

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

    background:rgba(0,0,0,.82);
    backdrop-filter:blur(5px);

    padding:15px;
}

.wheel-popup{
    position:relative;

    width:min(1200px,96vw);
    height:min(720px,92vh);

    display:grid;
    grid-template-columns:58% 42%;

    overflow:visible;

    border:2px solid #c88a25;
    border-radius:20px;

    background:
        radial-gradient(circle at 25% 50%,rgba(115,31,18,.55),transparent 40%),
        linear-gradient(135deg,#160807,#35130e 55%,#190806);

    box-shadow:
        0 30px 90px rgba(0,0,0,.8),
        0 0 45px rgba(255,170,50,.16);
}

.wheel-close{
    position:absolute;
    right:18px;
    top:16px;

    z-index:100;

    width:42px;
    height:42px;

    border:1px solid #a96c25;
    border-radius:50%;

    background:#2a110d;

    color:#ffd66b;
    font-size:28px;

    cursor:pointer;
}


/* LEFT */

.wheel-left{
    position:relative;
    overflow:visible;
    z-index:2;
}

.wheel-frame-image{
    position:absolute;

    width:780px;
    height:auto;

    max-width:none;
    max-height:none;

    object-fit:contain;

    left:-95px;
    bottom:-70px;

    z-index:2;

    pointer-events:none;
    user-select:none;

    filter:
        drop-shadow(0 18px 18px rgba(0,0,0,.50))
        drop-shadow(0 0 12px rgba(255,170,65,.10));
}

.wheel-real-wrap{
    position:absolute;

    z-index:4;

    width:400px;
    height:400px;

    left:187px;
    top:92px;
}

.wheel-circle{
    position:relative;

    width:100%;
    height:100%;

    /*
     * CHỈ CHỈNH 1 GIÁ TRỊ NÀY nếu muốn
     * toàn bộ 8 reward gần / xa tâm hơn.
     */
    --wheel-reward-radius:132px;

    border-radius:50%;

    border:9px solid #d59c32;

    background:
        conic-gradient(
            #9f3226 0deg 36deg,
            #ce9028 36deg 72deg,
            #8b241e 72deg 108deg,
            #d29a31 108deg 144deg,
            #9b2d23 144deg 180deg,
            #c77b25 180deg 216deg,
            #81201b 216deg 252deg,
            #d0922f 252deg 288deg,
            #92271f 288deg 324deg,
            #c98128 324deg 360deg
        );

    box-shadow:
        inset 0 0 35px rgba(77,12,8,.55),
        0 0 20px rgba(255,178,54,.18);

    transition:transform 3.4s cubic-bezier(.12,.68,.18,1);
}

.wheel-circle:before{
    content:"";

    position:absolute;
    inset:13px;

    border:2px solid rgba(255,226,153,.22);
    border-radius:50%;
}

.wheel-pointer{
    position:absolute;

    top:0;
    left:50%;

    transform:translateX(-50%);

    z-index:10;

    width:0;
    height:0;

    border-left:17px solid transparent;
    border-right:17px solid transparent;
    border-top:30px solid #ffd34d;

    filter:drop-shadow(0 2px 2px #5d2609);
}

.wheel-center{
    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    width:105px;
    height:105px;

    border-radius:50%;

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

    background:
        radial-gradient(circle at 35% 30%,#ffe37a,#df9a20 55%,#a85b0d);

    border:7px solid #783b0b;

    color:#4d1909;

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

    box-shadow:
        0 4px 12px rgba(0,0,0,.45);

    z-index:20;
}


/* =========================================================
   8 SLOT PHẦN THƯỞNG
   - KHÔNG top/left riêng từng item
   - tâm mỗi lát lệch đúng 45deg
   - conic-gradient hiện tại bắt đầu từ 12 giờ và đi clockwise
   ========================================================= */

.wheel-reward-slots{
    position:absolute;
    inset:0;

    z-index:8;

    pointer-events:none;
}

.wheel-segment,
.wheel-reward-slot{
    position:absolute;

    left:50%;
    top:50%;

    width:76px;
    min-height:78px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    box-sizing:border-box;

    text-align:center;

    color:#fff0ca;

    font-size:10px;
    font-weight:700;
    line-height:1.1;

    text-shadow:0 2px 3px #4c130c;

    transform:
        translate(-50%,-50%)
        rotate(var(--slot-angle))
        translateY(var(--slot-radius))
        rotate(var(--slot-angle-back));

    transform-origin:center center;
}

/*
 * translateY âm = đi từ tâm lên phía 12 giờ.
 * Sau đó rotate(angle) sẽ chạy CLOCKWISE đúng theo conic-gradient.
 */
.wheel-reward-slot{
    --slot-radius:calc(0px - var(--wheel-reward-radius));
}

.wheel-reward-slot:nth-child(1){
    --slot-angle:18deg;
    --slot-angle-back:-18deg;
}

.wheel-reward-slot:nth-child(2){
    --slot-angle:54deg;
    --slot-angle-back:-54deg;
}

.wheel-reward-slot:nth-child(3){
    --slot-angle:90deg;
    --slot-angle-back:-90deg;
}

.wheel-reward-slot:nth-child(4){
    --slot-angle:126deg;
    --slot-angle-back:-126deg;
}

.wheel-reward-slot:nth-child(5){
    --slot-angle:162deg;
    --slot-angle-back:-162deg;
}

.wheel-reward-slot:nth-child(6){
    --slot-angle:198deg;
    --slot-angle-back:-198deg;
}

.wheel-reward-slot:nth-child(7){
    --slot-angle:234deg;
    --slot-angle-back:-234deg;
}

.wheel-reward-slot:nth-child(8){
    --slot-angle:270deg;
    --slot-angle-back:-270deg;
}

.wheel-reward-slot:nth-child(9){
    --slot-angle:306deg;
    --slot-angle-back:-306deg;
}

.wheel-reward-slot:nth-child(10){
    --slot-angle:342deg;
    --slot-angle-back:-342deg;
}

.wheel-reward-icon{
    display:block;

    width:42px;
    height:42px;

    flex:0 0 42px;

    object-fit:contain;

    margin:0 auto 2px;

    filter:
        drop-shadow(0 2px 2px rgba(0,0,0,.55))
        drop-shadow(0 0 4px rgba(255,215,90,.28));
}

.wheel-reward-name{
    display:block;

    width:76px;
    max-height:23px;

    overflow:hidden;

    color:#fff2c9;

    font-size:9px;
    font-weight:800;
    line-height:11px;

    text-align:center;

    text-shadow:
        0 1px 2px #000,
        0 0 3px rgba(0,0,0,.9);
}

.wheel-reward-qty{
    display:block;

    margin-top:2px;

    color:#ffd65a;

    font-size:10px;
    font-weight:900;
    line-height:11px;

    text-shadow:
        0 1px 2px #000,
        0 0 3px #000;
}

.wheel-reward-slot.is-empty{
    visibility:hidden;
}


/* RIGHT */

.wheel-right{
    position:relative;

    z-index:5;

    padding:10px 55px 45px 25px;

    box-sizing:border-box;
}

.wheel-title{
    text-align:center;

    color:#ffd26a;

    font-size:44px;
    line-height:1.3;

    font-weight:900;

    text-shadow:
        0 3px 0 #6d250d,
        0 0 15px rgba(255,179,47,.28);

    margin-bottom:12px;
}

.wheel-title span{
    display:block;

    font-size:55px;

    color:#ffc64a;
}

.wheel-event-name{
    text-align:center;

    margin:18px auto 22px;

    padding:9px 20px;

    border:1px solid #a96d25;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(118,25,16,.8) 15%,
            #761c16 50%,
            rgba(118,25,16,.8) 85%,
            transparent
        );

    color:#ffe29b;

    font-weight:800;
}

.wheel-panel{
    animation:wheelFade .25s ease;
}

@keyframes wheelFade{
    from{
        opacity:0;
        transform:translateY(8px);
    }
    to{
        opacity:1;
        transform:none;
    }
}

.wheel-info-card{
    border:1px solid rgba(201,139,49,.32);

    border-radius:13px;

    background:
        linear-gradient(
            145deg,
            rgba(65,26,16,.75),
            rgba(26,10,8,.82)
        );

    padding:8px 22px;

    margin-bottom:24px;
}

.wheel-info-row{
    padding:15px 0;

    border-bottom:
        1px solid rgba(255,255,255,.07);
}

.wheel-info-row:last-child{
    border-bottom:0;
}

.wheel-info-row strong{
    display:block;

    color:#f4c85f;

    font-size:14px;

    margin-bottom:4px;
}

.wheel-info-row span{
    color:#f0debf;
}

.wheel-main-btn{
    display:block;

    width:100%;

    border:2px solid #ffd06c;
    border-radius:9px;

    padding:14px 18px;

    background:
        linear-gradient(
            180deg,
            #ffdd69,
            #f4a91f 50%,
            #d86910
        );

    color:#521b06;

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

    box-shadow:
        0 5px 0 #84300b,
        inset 0 1px rgba(255,255,255,.7);

    cursor:pointer;

    transition:.2s;
}

.wheel-main-btn:hover{
    transform:translateY(-2px);
    filter:brightness(1.06);
}

.wheel-note{
    text-align:center;

    margin-top:15px;

    color:#e8cfaa;

    font-size:13px;
}

.wheel-panel-title{
    text-align:center;

    color:#ffd36b;

    font-size:24px;
    font-weight:900;

    margin-bottom:22px;
}

.wheel-form-group{
    margin-bottom:13px;
}

.wheel-form-group input{
    width:100%;

    box-sizing:border-box;

    padding:13px 14px;

    border:1px solid #77502c;
    border-radius:7px;

    background:#21110d;

    color:#fff;

    outline:none;
}

.wheel-form-group input:focus{
    border-color:#d29a38;

    box-shadow:
        0 0 0 2px rgba(210,154,56,.13);
}

.wheel-back-btn{
    display:block;

    margin:16px auto 0;

    border:0;

    background:transparent;

    color:#c9ad82;

    cursor:pointer;
}

.wheel-facebook-btn{
    display:block;

    width:100%;

    margin-bottom:15px;

    border:0;
    border-radius:8px;

    padding:13px;

    background:#1877f2;

    color:white;

    font-weight:800;

    cursor:pointer;
}

.wheel-message{
    min-height:22px;

    margin-top:13px;

    color:#ffd168;

    text-align:center;
}

.wheel-player-info{
    border:1px solid rgba(201,139,49,.28);

    border-radius:10px;

    padding:15px;

    margin-bottom:20px;

    color:#ead4af;

    line-height:1.8;
}

#wheelPreviousRewards{
    margin-top:15px;
}

.wheel-reward-mini,
.wheel-completed-reward{
    padding:8px 9px;

    border-bottom:
        1px solid rgba(255,255,255,.07);

    color:#ead6b5;
}

.wheel-code-box{
    text-align:center;

    margin-top:18px;

    padding:16px;

    border:1px solid #b9802d;
    border-radius:9px;

    background:rgba(0,0,0,.2);
}

.wheel-code-label{
    color:#d9bd91;
}

.wheel-code{
    margin:8px 0 12px;

    color:#ffe06d;

    font:
        800 24px Consolas,
        monospace;
}

.wheel-copy-btn{
    border:0;
    border-radius:7px;

    padding:9px 14px;

    background:#288e4c;

    color:white;

    font-weight:800;

    cursor:pointer;
}


/* MOBILE */

@media(max-width:900px){

    .wheel-popup{
        width:96vw;
        height:94vh;

        display:block;

        overflow-x:visible;
        overflow-y:auto;
    }

    .wheel-left{
        position:relative;

        height:500px;
        left: 36px;
        top: -49px;
        overflow:visible;
    }

    .wheel-frame-image{
        width:490px;
        height:auto;

        max-width:none;

        left:36%;
        bottom:-69px;

        transform:translateX(-50%);

        object-fit:contain;
    }

    .wheel-real-wrap{
        width:300px;
        height:300px;

        left:50%;
        top:120px;

        transform:translateX(-50%);
    }

    .wheel-circle{
        --wheel-reward-radius:98px;
    }

    .wheel-segment,
    .wheel-reward-slot{
        width:72px;
        min-height:66px;
    }

    .wheel-reward-icon{
        width:36px;
        height:36px;
        flex-basis:36px;
    }

    .wheel-reward-name{
        width:70px;
        max-height:22px;
        font-size:8px;
        line-height:10px;
    }

    .wheel-reward-qty{
        font-size:8px;
        line-height:9px;
    }

    .wheel-center{
        width:80px;
        height:80px;
        border-width:5px;
        font-size:17px;
    }

    .wheel-right{
        padding:25px 20px 40px;
    }

    .wheel-title{
        font-size:31px;
    }

    .wheel-title span{
        font-size:40px;
    }
}