/* ===== LUỒNG MỚI =====
   Ảnh nền của trang chơi, do vòng quay đang mở cấu hình. lucky_spin.js gắn
   class này và đặt biến --ls-page-bg-image; không có ảnh thì trang giữ nguyên
   màu nền chung của sự kiện (--cl-event-bgGameColor).

   Ảnh vẽ bằng lớp ::before dán cố định theo màn hình thay vì đặt thẳng
   background-image lên .game-page: trang chơi dài hơn màn hình, để ảnh chạy
   theo chiều cao trang thì ảnh bị kéo giãn rất xấu, còn background-attachment:
   fixed lại lỗi trên Safari iOS. */
.game-page.has-bg-image {
    position: relative;
    z-index: 0;
}

.game-page.has-bg-image::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: var(--ls-page-bg-image);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* Màn hình rộng đổi sang ảnh ngang. Cùng mốc 768px mà responsive.css đang dùng
   để chia điện thoại với máy tính. Vòng quay chỉ cấu hình một ảnh thì hai biến
   mang cùng giá trị, nên khối này không làm gì khác. */
@media all and (min-width: 769px) {
    .game-page.has-bg-image::before {
        background-image: var(--ls-page-bg-image-pc, var(--ls-page-bg-image));
    }
}

.list-item {
    padding-left: 0;
    display: flex;
    align-items: center;
    gap: 0.875rem;
}
.modal-subtitle {
    size: 15px;
    font-weight: 400;
    line-height: 22.5px;
    text-align: center;
    color: #FFFD06;
}

.modal-smalltext {
    font-weight: 700;
    size: 16px;
    line-height: 22.32px;
    text-align: center;
}

.modal-rowwrapper {
    display: flex;
    gap: 10px;
    padding: 12px 20px;
}

/* .modal-rowwrapper div {
        width: 50%;
    } */

.modal-rowwrapper-text {
    text-align: left;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
}

.modal-subcontent {
    align-items: center;
    gap: 20px;
    display: flex;
    flex-direction: column;
}

.modal-subwrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 295px;
    background: #74387E;
    border-radius: 24px;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* style for wheel */
.wheel-wrapper {
    position: relative;
    overflow: hidden;
    height: 100vw;
    width: 100%;
}

#wheelOfFortune {
    display: block;
    max-width: 500px;
    aspect-ratio: 1;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    /* Ẩn sẵn đến khi lucky_spin.js vẽ xong vòng quay VỚI ĐÚNG ảnh khung/ảnh nút
       quay đã cấu hình. Không ẩn thì spin-wheel dựng canvas rỗng/mặc định
       ngay khi new Wheel() chạy, rồi mới thay bằng ảnh thật lúc images tải
       xong — gây nháy hình giữa hai lần vẽ. JS luôn trả lại visibility ở
       finally nên lỗi tải ảnh cũng không làm vòng quay biến mất vĩnh viễn. */
    visibility: hidden;
}

.wheel-1 {
    height: 100%;
    width: 100%;
}

.wheel-2 {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
}

.arrow {
    position: absolute;
    top: -5vw;
    /* Vị trí của mũi tên */
    width: 0;
    height: 0;
    border-left: 1.5vw solid transparent;
    border-right: 1.5vw solid transparent;
    border-bottom: 5vw solid #287ebd;
    /* Màu mũi tên */
}

#btnSpin {
    font-family: sans-serif;
    font-size: clamp(1em,2vw,1.5em);
    text-wrap: pretty;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20%;
    height: 20%;
    margin: -10%;
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 0px;
    -webkit-transition: 0.1s;
    transition: 0.1s;
    padding: 3px;
    border: 0;
}

#btnSpin:disabled {
    pointer-events: none;
    filter: grayscale(100%);
    cursor: not-allowed;
}

.profile-table th {
    text-align: left;
    color: #FFFD06;
}

.prizelog-form {
    width: 100%;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: none;
    outline: none;
}

.prize-img {
    /* width="175px" height="184px" */
    cursor: pointer;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
    overflow: hidden;
    position: relative;
    width: 50%;
    transition: all 0.3s ease;
    border-radius: 10px;
}

.prize-img:hover {
    transform: scale(1.05);
}

.prize-img-clicked {
    transform: scale(0.95);
    filter: brightness(1.2);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
}

/* Animation cho QR modal */
#modal-qr-code .modal-dialog {
    animation: zoomIn 0.5s ease;
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.3);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.qr-code-container {
    animation: fadeInUp 0.6s ease 0.2s both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.qr-glow {
    animation: qrGlow 2s ease-in-out infinite alternate;
}

@keyframes qrGlow {
    from {
        box-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
    }
    to {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 30px rgba(255, 215, 0, 0.6);
    }
}

.prize-img-shake {
    animation: shake 0.5s ease-in-out infinite;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-3px) rotate(-1deg); }
    20%, 40%, 60%, 80% { transform: translateX(3px) rotate(1deg); }
}

/* Hiệu ứng sáng bừng */
.prize-img-glow-burst {
    animation: glowBurst 0.6s ease-out;
    filter: brightness(1.5) saturate(1.3);
}

@keyframes glowBurst {
    0% {
        box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
        transform: scale(1);
    }
    50% {
        box-shadow: 
            0 0 20px rgba(255, 215, 0, 0.8),
            0 0 40px rgba(255, 215, 0, 0.6),
            0 0 60px rgba(255, 215, 0, 0.4);
        transform: scale(1.1);
    }
    100% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.7);
        transform: scale(1.05);
    }
}

/* Hiệu ứng nổ tung */
.prize-img-explode {
    animation: explode 0.4s ease-out;
}

@keyframes explode {
    0% {
        transform: scale(1.05);
        opacity: 1;
    }
    70% {
        transform: scale(1.3);
        opacity: 0.8;
        filter: brightness(2) blur(2px);
    }
    100% {
        transform: scale(1.5);
        opacity: 0.3;
        filter: brightness(3) blur(4px);
    }
}

/* Modal zoom out */
.modal-zoom-out {
    animation: modalZoomOut 0.3s ease-in;
}

@keyframes modalZoomOut {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.8);
        opacity: 0;
    }
}

/* QR Modal entrance với magic effect */
#modal-qr-code .modal-dialog {
    animation: magicAppear 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes magicAppear {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-10deg) translateY(100px);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1) rotate(5deg) translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg) translateY(0);
    }
}

/* Sparkle particles */
.sparkle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #FFD700, #FFA500);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    animation: sparkleFloat 1.5s ease-out forwards;
}

@keyframes sparkleFloat {
    0% {
        opacity: 1;
        transform: scale(0) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: scale(0.5) rotate(360deg);
    }
}

/* Confetti particles */
.confetti {
    position: absolute;
    width: 6px;
    height: 12px;
    pointer-events: none;
    z-index: 9999;
    animation: confettiFall 2s ease-out forwards;
}

@keyframes confettiFall {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateY(200px) rotate(720deg);
    }
}
/* =====================================================================
   LUỒNG MỚI - Mã voucher riêng cho từng người trúng
   ===================================================================== */
.voucher-code-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 2px dashed rgba(0, 0, 0, .18);
    border-radius: 8px;
    background: rgba(255, 255, 255, .55);
    max-width: 100%;
}

.voucher-code {
    font-size: 20px;
    letter-spacing: 1.5px;
    word-break: break-all;
    line-height: 1.3;
}

/* Mô tả quà nhập từ textarea nên xuống dòng là ký tự \n, mà HTML thì bỏ qua.
   pre-line giữ nguyên các lần xuống dòng nhưng vẫn gộp khoảng trắng thừa —
   làm được bằng CSS nên không phải đổi sang .html() và mở đường cho thẻ lạ. */
.voucher-description {
    white-space: pre-line;
    line-height: 1.65;
}

.btn-copy-voucher {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 6px;
    background: rgba(0, 0, 0, .08);
    cursor: pointer;
    transition: background .15s;
}

.btn-copy-voucher:hover { background: rgba(0, 0, 0, .16); }

@media (max-width: 480px) {
    .voucher-code { font-size: 17px; letter-spacing: 1px; }
}