/* --- CSS cho các hiệu ứng sau khi quay (Animate winning entry) --- */

/*
Lớp chứa toàn bộ các animation, nằm trên bánh xe và dưới overlay winner chính,
nhưng trên pháo hoa (nếu pháo hoa có z-index thấp hơn).
*/
#animation-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Cho phép click xuyên qua lớp này */
    overflow: hidden; /* Ngăn các item tràn ra ngoài không mong muốn */
    z-index: 10001 !important; /* >>> CAO NHẤT <<< *//* Quan trọng: Điều chỉnh z-index này cho phù hợp
                    Nó cần cao hơn pháo hoa (ví dụ pháo hoa z-index: 30)
                    và thấp hơn winner-overlay (ví dụ winner-overlay z-index: 40 hoặc cao hơn)
                 */
}

/* Container cho các emoticons bay lên */
#emoticons-container {
    position: relative; /* Để định vị các emoticons con theo nó */
    width: 100%;
    height: 100%;
}

.animated-emoticon {
    position: absolute; /* Quan trọng cho việc định vị và animation */
    width: 30px; /* Kích thước mặc định */
    height: 30px; /* Kích thước mặc định */
    /* transition đã được đặt inline bằng JS để có giá trị ngẫu nhiên */
    will-change: transform, opacity; /* Gợi ý cho trình duyệt tối ưu hóa animation */
}

/* Container cho ảnh hiển thị ở giữa bánh xe */
#center-animation-image-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none; /* Ẩn ban đầu */
    /* Kích thước có thể điều chỉnh thêm nếu cần */
    max-width: 70%; /* Giới hạn kích thước so với #animation-layer */
    max-height: 70%;
    /* z-index: 1;  Nếu cần nó nổi trên emoticons (thường thì không cần vì là 2 div riêng) */
}

#center-animated-img {
    display: block; /* Loại bỏ khoảng trống thừa bên dưới ảnh */
    max-width: 100%; /* Đảm bảo ảnh không vượt quá container của nó */
    max-height: 100%;
    object-fit: contain; /* Giữ tỷ lệ ảnh, không bị cắt xén hoặc méo */
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Đổ bóng nhẹ cho đẹp (tùy chọn) */
    /* border-radius: 8px; /* Bo góc nhẹ (tùy chọn) */
}

/* Animation cho ảnh hiển thị ở giữa */
#center-animation-image-container.animate-center-image {
    animation-name: wonZoomInFadeOut;
    animation-duration: 3s; /* Tổng thời gian animation */
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards; /* Giữ trạng thái cuối của animation (opacity: 0) */
    will-change: transform, opacity;
}

@keyframes wonZoomInFadeOut {
    0% {
        transform: translate(-50%, -50%) scale(0.3);
        opacity: 0;
    }
    15% { /* Xuất hiện nhanh */
        transform: translate(-50%, -50%) scale(1.05); /* Hơi zoom to hơn 1 chút */
        opacity: 1;
    }
    30% { /* Giữ ổn định */
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    80% { /* Bắt đầu mờ dần và thu nhỏ lại */
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }
}

/* Responsive adjustments nếu cần */
@media (max-width: 600px) {
    .animated-emoticon {
        width: 20px;
        height: 20px;
    }
    /* Có thể điều chỉnh kích thước của #center-animation-image-container cho màn hình nhỏ hơn */
}


/* =========================================
   STYLE CHO NÚT SHARE & CLOSE (THEO YÊU CẦU MỚI)
   ========================================= */

/* 1. Container chứa nút: Căn phải, tách dòng */
.won-popup-footer {
    display: flex;
    justify-content: flex-end; /* Căn phải hết cỡ */
    align-items: center;
    gap: 15px; /* Khoảng cách giữa 2 nút */
    margin-top: 30px; /* Cách tên người thắng một đoạn xa */
    padding-right: 20px; /* Cách lề phải một chút cho đẹp */
    width: 100%;
}

/* 2. Style chung cho nút: Bỏ nền, Viền Nâu */
.won-popup-btn {
    background: transparent !important; /* Bỏ nền */
    border: 2px solid #8B4513 !important; /* Viền nâu đậm */
    color: #8B4513 !important; /* Icon/Chữ màu nâu */
    
    border-radius: 6px; /* Bo góc nhẹ */
    padding: 8px 15px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    text-transform: uppercase;
    transition: all 0.2s ease;
}

/* Chỉnh icon bên trong nút */
.won-popup-btn .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    margin-right: 5px;
}

/* Hiệu ứng khi di chuột vào (Đảo màu cho đẹp) */
.won-popup-btn:hover {
    background: #8B4513 !important; /* Nền nâu */
    color: #fff !important; /* Chữ trắng */
}

/* ==========================================================================
   SỬA FONT CHỮ POPUP CHIẾN THẮNG TRÊN MOBILE (GIẢM 1/2)
   ========================================================================== */

/* 1. Áp dụng cho màn hình điện thoại (thường là dưới 768px) */
@media screen and (max-width: 767px) {
    
    /* Hạ size chữ tên người thắng xuống 1/2 */
    #winner-text {
        font-size: 18px !important; /* Bạn có thể điều chỉnh con số này cho vừa mắt */
        line-height: 1.2 !important;
        display: block !important;
        word-wrap: break-word !important;
    }

    
}