/* =====================================================================
   Giao dien rieng cua tung tro choi
   ===================================================================== */

/* =====================  1. VONG QUAY MAY MAN  ===================== */
.wheel-stage {
    position: relative;
    width: min(88vw, 480px);
    margin: 10px auto 0;
    aspect-ratio: 1;
}

/* Vang sang toa ra sau vong quay */
.wheel-stage::before {
    content: '';
    position: absolute;
    inset: -18%;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--gold) 30%, transparent) 0%, transparent 62%);
    animation: breathe 5s ease-in-out infinite;
    pointer-events: none;
}

.wheel-ring {
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    background:
        conic-gradient(from 210deg, #fff2c4, #e8b73a 12%, #a1690b 26%, #ffe9a8 42%, #d79b1c 58%,
                       #8f5a06 72%, #ffe9a8 86%, #fff2c4 100%);
    box-shadow:
        0 20px 55px rgba(0, 0, 0, .6),
        inset 0 0 22px rgba(0, 0, 0, .38),
        inset 0 3px 0 rgba(255, 255, 255, .5);
}

.wheel-ring::after {
    content: '';
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, #5a0a12, #2c0407);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, .7);
}

.wheel-lights { position: absolute; inset: -16px; border-radius: 50%; z-index: 3; }

.wheel-lights i {
    position: absolute;
    width: 11px; height: 11px;
    margin: -5.5px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fffdf2, #ffe9a8 60%, #f0b52c);
    box-shadow: 0 0 10px 4px rgba(255, 235, 160, .95), inset 0 -1px 2px rgba(160, 90, 0, .5);
    animation: blink 1.2s ease-in-out infinite;
}

@keyframes blink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .25; transform: scale(.82); } }

#wheel {
    position: absolute;
    inset: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 240, 200, .5), 0 0 26px rgba(0, 0, 0, .5) inset;
    z-index: 2;
}

.wheel-hub {
    position: absolute;
    left: 50%; top: 50%;
    width: 25%; height: 25%;
    transform: translate(-50%, -50%);
    border: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #fff6d8, var(--gold) 46%, #dc9312 100%);
    color: #6b1408;
    font-weight: 900;
    font-size: clamp(13px, 3.3vw, 21px);
    letter-spacing: .05em;
    cursor: pointer;
    z-index: 6;
    box-shadow:
        0 0 0 5px rgba(255, 255, 255, .82),
        0 0 0 9px color-mix(in srgb, var(--gold-2) 85%, #000),
        0 10px 22px rgba(0, 0, 0, .55),
        inset 0 -5px 10px rgba(140, 70, 0, .35);
    transition: transform .14s, filter .2s;
}

.wheel-hub::after {
    content: '';
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    box-shadow: 0 0 22px 4px color-mix(in srgb, var(--gold) 60%, transparent);
    animation: breathe 2.4s ease-in-out infinite;
    pointer-events: none;
}

.wheel-hub:disabled { filter: grayscale(.4) brightness(.82); cursor: not-allowed; }
.wheel-hub:not(:disabled):hover { transform: translate(-50%, -50%) scale(1.07); }
.wheel-hub:not(:disabled):active { transform: translate(-50%, -50%) scale(.95); }

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

.wheel-pointer::after {
    content: '';
    position: absolute;
    left: -12px; top: -26px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #fff6d8, var(--gold) 55%, #d68f10);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .55), inset 0 -2px 4px rgba(150, 90, 0, .4);
}

/* =====================  2. QUAY SO NGAU NHIEN  ===================== */
.slot-machine {
    position: relative;
    max-width: 720px;
    margin: 6px auto 0;
    padding: 22px 18px 18px;
    border-radius: 26px;
    background: linear-gradient(180deg, #b3122a, #6d0813 55%, #400509);
    box-shadow: 0 22px 55px rgba(0, 0, 0, .55), inset 0 2px 0 rgba(255, 255, 255, .2);
    border: 2px solid color-mix(in srgb, var(--gold) 70%, transparent);
}

.slot-machine::before,
.slot-machine::after {
    content: '';
    position: absolute;
    top: 12px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #fffdf2, var(--gold));
    box-shadow: 0 0 12px 4px rgba(255, 220, 120, .8);
    animation: blink 1.4s ease-in-out infinite;
}

.slot-machine::before { left: 14px; }
.slot-machine::after { right: 14px; animation-delay: -.7s; }

.slot-board { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

.reel {
    width: clamp(48px, 12vw, 88px);
    height: clamp(76px, 18vw, 128px);
    border-radius: 16px;
    background: linear-gradient(180deg, #1b0206, #430509 45%, #1b0206);
    border: 2px solid var(--gold);
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 10px 16px rgba(0, 0, 0, .7), 0 10px 24px rgba(0, 0, 0, .5);
}

.reel .strip { position: absolute; left: 0; right: 0; top: 0; }

.reel .strip span {
    display: block;
    height: clamp(76px, 18vw, 128px);
    line-height: clamp(76px, 18vw, 128px);
    text-align: center;
    font-size: clamp(36px, 9vw, 66px);
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 18px rgba(255, 200, 80, .8), 0 3px 10px rgba(0, 0, 0, .7);
}

.reel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .62), transparent 26%, transparent 74%, rgba(0, 0, 0, .62));
    pointer-events: none;
}

.slot-prize-note {
    text-align: center;
    margin-top: 16px;
    font-size: 16px;
    font-weight: 700;
    min-height: 26px;
    color: var(--gold-soft);
}

.slot-host-note { text-align: center; font-size: 13px; opacity: .78; margin-top: 10px; }

/* =====================  3. BOC THAM TRUNG THUONG  ===================== */
.box-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 2.8vw, 22px);
    max-width: 580px;
    margin: 8px auto 0;
}

@media (min-width: 620px) { .box-grid.cols-4 { grid-template-columns: repeat(4, 1fr); max-width: 740px; } }

.gift {
    position: relative;
    aspect-ratio: 1;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    transition: transform .2s;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .5));
}

.gift:disabled { cursor: default; }
.gift:not(:disabled):hover { transform: translateY(-9px) scale(1.05); }
.gift:not(:disabled):hover .body { filter: brightness(1.12); }
.gift.picked { animation: shake .4s ease 3; }

@keyframes shake {
    0%, 100% { transform: rotate(0) translateY(-4px); }
    25% { transform: rotate(-7deg) translateY(-4px); }
    75% { transform: rotate(7deg) translateY(-4px); }
}

.gift .body {
    position: absolute;
    left: 5%; right: 5%; bottom: 0;
    height: 72%;
    border-radius: 12px;
    background: linear-gradient(165deg, #ff5064, #d21230 45%, #8c0a1c);
    box-shadow: inset 0 -12px 20px rgba(0, 0, 0, .4), inset 0 4px 0 rgba(255, 255, 255, .28);
    transition: filter .2s;
}

.gift .body::after {
    content: '';
    position: absolute;
    left: 41%; top: 0; bottom: 0;
    width: 18%;
    background: linear-gradient(180deg, #fff6d8, var(--gold) 55%, #dc9312);
    box-shadow: 0 0 12px rgba(255, 210, 90, .5);
}

.gift .lid {
    position: absolute;
    left: -1%; right: -1%; top: 10%;
    height: 24%;
    border-radius: 10px;
    background: linear-gradient(165deg, #ff6b7d, #c81230);
    box-shadow: 0 8px 14px rgba(0, 0, 0, .45), inset 0 3px 0 rgba(255, 255, 255, .35);
    transform-origin: left bottom;
    transition: transform .55s cubic-bezier(.3, 1.5, .5, 1), opacity .45s;
}

.gift .lid::after {
    content: '';
    position: absolute;
    left: 42%; top: 0; bottom: 0;
    width: 17%;
    background: linear-gradient(180deg, #fff6d8, var(--gold) 55%, #dc9312);
}

.gift .bow {
    position: absolute;
    left: 50%; top: 0;
    transform: translateX(-50%);
    width: 40%; height: 18%;
    border-radius: 50% 50% 40% 40%;
    border: 5px solid var(--gold);
    border-bottom-color: transparent;
    filter: drop-shadow(0 0 8px rgba(255, 210, 90, .6));
    transition: opacity .3s;
}

.gift.open .lid { transform: rotate(-122deg) translateY(-18px); opacity: 0; }
.gift.open .bow { opacity: 0; }
.gift.open .body { background: linear-gradient(165deg, #7a1622, #40060f); }

.gift .num {
    position: absolute;
    left: 0; right: 0; bottom: 24%;
    text-align: center;
    font-size: clamp(18px, 4.4vw, 28px);
    font-weight: 900;
    color: #fff;
    text-shadow: 0 3px 8px rgba(0, 0, 0, .6);
    z-index: 2;
}

.gift .reveal {
    position: absolute;
    left: 3%; right: 3%; bottom: 16%;
    font-size: clamp(10px, 2.5vw, 14px);
    font-weight: 800;
    color: var(--gold);
    opacity: 0;
    transition: opacity .4s .3s;
    z-index: 3;
    line-height: 1.25;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .8);
}

.gift.open .reveal { opacity: 1; }
.gift.open .num { opacity: 0; }

/* =====================  4. MINI GAME - CAY MAY MAN  ===================== */
.tree-stage { position: relative; width: min(94vw, 640px); margin: 0 auto; aspect-ratio: 1 / .94; }

.tree-stage .trunk {
    position: absolute;
    left: 50%; bottom: 0;
    width: 13%; height: 34%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #3d2210, #8a5424 42%, #5a3216 70%, #2e1809);
    border-radius: 10px 10px 4px 4px;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, .5);
}

.tree-stage .crown {
    position: absolute;
    left: 50%; top: 0;
    width: 94%; height: 76%;
    transform: translateX(-50%);
    border-radius: 50% 50% 44% 44%;
    background:
        radial-gradient(circle at 30% 22%, #4bbd6a, transparent 45%),
        radial-gradient(circle at 72% 34%, #2f9c52, transparent 48%),
        radial-gradient(circle at 50% 60%, #1f7d3f, #0d4a24 78%);
    box-shadow: inset 0 -26px 46px rgba(0, 0, 0, .45), 0 16px 40px rgba(0, 0, 0, .4);
}

.tree-stage .crown::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 30%, rgba(255, 240, 170, .18), transparent 60%);
}

.lucky {
    position: absolute;
    width: clamp(40px, 9.5vw, 62px);
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    transform-origin: top center;
    animation: sway 3.4s ease-in-out infinite;
    z-index: 2;
}

@keyframes sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }

.lucky::before {
    content: '';
    display: block;
    width: 2px;
    height: 18px;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(255, 240, 170, .2), var(--gold));
}

.lucky .env {
    height: clamp(48px, 11vw, 74px);
    border-radius: 10px;
    background: linear-gradient(165deg, #ff6b7d, #c8102e 55%, #8c0a1c);
    border: 1.5px solid var(--gold);
    box-shadow: 0 10px 18px rgba(0, 0, 0, .5), inset 0 3px 0 rgba(255, 255, 255, .28);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(16px, 4vw, 25px);
    color: var(--gold);
    font-weight: 900;
    transition: transform .5s, opacity .5s, filter .2s;
    position: relative;
}

.lucky .env::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 60%; height: 60%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1.5px dashed rgba(255, 212, 94, .45);
}

.lucky:not(:disabled):hover .env { transform: scale(1.15); filter: brightness(1.15); }
.lucky.taken { animation: none; pointer-events: none; }
.lucky.taken .env { transform: translateY(200px) rotate(28deg); opacity: 0; }
.lucky:disabled:not(.taken) .env { filter: grayscale(.6) brightness(.65); }

/* =====================  5. CHECK-IN SU KIEN  ===================== */
.checkin-card { max-width: 500px; margin: 0 auto; }
.checkin-done { text-align: center; display: none; }
.checkin-done.show { display: block; animation: pop .5s cubic-bezier(.2, 1.4, .5, 1); }

.checkin-done .tick {
    width: 108px; height: 108px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #c9f7d2, #22c55e 58%, #12813c);
    display: flex; align-items: center; justify-content: center;
    font-size: 58px; color: #06340f;
    box-shadow: 0 0 0 8px rgba(34, 197, 94, .18), 0 16px 34px rgba(0, 0, 0, .55);
    animation: bob 3s ease-in-out infinite;
}

.checkin-done h2 { color: var(--gold); margin: 8px 0; font-size: 26px; text-transform: uppercase; }
.checkin-done .who { font-size: 23px; font-weight: 800; margin: 4px 0; }

.checkin-num {
    display: inline-block;
    margin-top: 12px;
    padding: 9px 22px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(0, 0, 0, .35));
    border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
    font-weight: 800;
    color: var(--gold);
}

.checkin-live { margin-top: 20px; }