body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden; /* Chặn thanh cuộn để không bị lòi scrollbar */
}

.game-container {
    position: relative;
    width: 100%;
    height: 100%;
    /* Bỏ hết mấy cái bo góc, đổ bóng, giới hạn khung */
}

/* Ảnh nền tràn màn hình, tự cắt nếu tỷ lệ không khớp để lấp đầy */
.bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 110%;
    height: 100%;
    object-fit: cover; /* Quan trọng: Giữ ảnh không bị méo */
    object-position: center bottom; /* Ưu tiên lấy phần dưới của ảnh nền (chỗ núi non) */
    z-index: 1;
}

.banner {
    position: absolute;
    top: -5vh; /* Cách đỉnh 5% chiều cao màn hình */
    left: 50%;
    transform: translateX(-50%);
    width: 40vw; /* Kích thước banner tính theo chiều rộng màn hình */
    min-width: 300px; /* Không bé quá trên đt */
    z-index: 2;
}

/* 1. KHUNG CHỨA TOÀN BỘ (Dùng để chỉnh vị trí cả cụm ống + tay) */
.shaker-area {
    position: absolute;
    /* Muốn cả cụm này cao hay thấp thì chỉnh số này */
    bottom: 5%; 
    
    /* Muốn cả cụm qua trái phải thì chỉnh số này */
    left: 50%;
    transform: translateX(-50%);
    
    /* Khung ảo bao quanh (để canh chỉnh), không ảnh hưởng hiển thị */
    width: 300px; 
    height: 400px;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Canh đáy cho các hình khớp nhau */
    pointer-events: none;
}

/* =========================================
   CÔNG THỨC CHỈNH SIZE VÀ VỊ TRÍ
   - width: Chỉnh độ TO / BÉ (số càng lớn càng to)
   - bottom: Chỉnh lên / xuống (so với đáy khung)
   - left/right: Chỉnh qua trái / phải
   - z-index: Thứ tự xếp lớp (số càng to càng nằm trên)
   ========================================= */

/* Tìm đoạn .hand cũ và đổi tên thành .hand-back */
/* 2. CÁI TAY SAU (Lớp dưới cùng) */
.hand-back { /* <--- ĐÃ ĐỔI TÊN Ở ĐÂY */
    position: absolute;
    z-index: 5; /* Vẫn thấp nhất */
    
    /* CÁC THÔNG SỐ NÀY TUI GIỮ NGUYÊN CỦA BÀ */
    width: 450px; 
    bottom: 0px;
    right: -227px;
    transform: rotate(-20deg);
}

/* 3. MẶT SAU ỐNG (Lớp giữa) */
.tube-back {
    position: absolute;
    z-index: 2; /* Cao hơn tay */
    
    /* Chỉnh TO/BÉ ống sau (Lưu ý: Phải bằng ống trước) */
    width: 640px; 
    
    bottom: -26px; /* Đẩy lên cao hơn tay một chút */
    left: 39.5%;    /* Canh giữa khung */
    transform: translateX(-50%);
}

/* 4. QUE XĂM (Nằm trong ống) */
.stick {
    position: absolute;
    z-index: 3; /* Nằm giữa 2 mặt ống */
    
    /* Chỉnh TO/BÉ que */
    width: 40px; 
    
    bottom: 80px; /* Thụt sâu trong ống */
    transition: transform 0.5s ease;
}
/* ... sau đoạn .stick { ... } thì dán cái này vào */

/* 4. NGÓN CÁI TRƯỚC (Layer mới nằm giữa) */
.hand-front {
    position: absolute;
    /* Z-index = 4: Nằm trên que (3) nhưng dưới mặt trước ống (5) */
    z-index: 5; 
    
    /* --- KHU VỰC BÀ CẦN TỰ ĐIỀN SỐ LẠI CHO KHỚP --- */
    /* Tui để tạm số này, bà chỉnh lại cho nó to nhỏ và nằm đúng chỗ cái ngón tay cái cũ nha */
    width: 500px;  /* <- CHỈNH LẠI CÁI NÀY */
    bottom: 40px; /* <- CHỈNH LẠI CÁI NÀY */
    right: 55px;   /* <- CHỈNH LẠI CÁI NÀY */
    /* ---------------------------------------------- */
    pointer-events: none; /* Để không che mất nút bấm nếu bị đè lên */
    transform: rotate(-20deg);
}
/* 5. MẶT TRƯỚC ỐNG (Lớp trên cùng) */
.tube-front {
    position: absolute;
    z-index: 4; /* Cao nhất => Che hết mấy cái kia */
    
    /* Chỉnh TO/BÉ ống trước (Phải bằng width của tube-back) */
    width: 400px; 
    
    bottom: 50px; /* Phải bằng bottom của tube-back để khớp 100% */
    left: 50%;
    transform: translateX(-50%);
}

/* HIỆU ỨNG LẮC */
@keyframes shake {
    0% { transform: translateX(-50%) rotate(0deg); }
    25% { transform: translateX(-50%) rotate(-5deg); }
    50% { transform: translateX(-50%) rotate(5deg); }
    75% { transform: translateX(-50%) rotate(-5deg); }
    100% { transform: translateX(-50%) rotate(0deg); }
}

.shaking {
    animation: shake 0.5s infinite;
}

/* NÚT BẤM - Đặt góc phải dưới */
#shake-btn {
    position: absolute;
    bottom: 15vh; /* Cách đáy cao hơn chút cho thoáng */
    right: 10vw;  /* Cách lề phải 10% */
    
    padding: 15px 40px;
    background-color: #b71540;
    color: #f1c40f;
    border: 3px solid #f1c40f;
    border-radius: 50px;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transition: transform 0.2s;
    pointer-events: auto; /* Bật lại click cho nút */
}

#shake-btn:hover {
    transform: scale(1.05);
    background-color: #d63031;
}

#shake-btn:disabled {
    background-color: #555;
    border-color: #888;
    color: #aaa;
    cursor: not-allowed;
    transform: none;
}

/* Ẩn hiện */
.hidden { display: none; }

/* MODAL KẾT QUẢ - Full màn hình mờ */
.modal {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.85); /* Nền đen mờ đậm hơn chút */
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Hiệu ứng hiện dần */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

/* Class để hiện modal bằng JS */
.modal.show {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

.close-btn {
    position: absolute;
    top: -40px;
    right: -40px;
    color: white;
    font-size: 50px;
    cursor: pointer;
    font-weight: bold;
    line-height: 1;
}

.close-btn:hover {
    color: #f1c40f;
}

#modal-img {
    height: 80vh; /* Ảnh thẻ xăm cao 80% màn hình */
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.6)); /* Hào quang tỏa sáng */
}
/* CLASS CHO QUẺ MỒI (Chỉ thêm mới) */
.filler-stick {
    position: absolute;
    z-index: 3;   /* Nằm cùng lớp với que kết quả (giữa 2 lớp ống) */
    width: 700px;  /* Bằng kích thước que kết quả */
    bottom: 55px; /* Thấp hơn que kết quả xíu để nằm gọn trong ống */
}
/* Hiệu ứng xóc quẻ (dùng margin để không mất góc xoay rotate cũ) */
@keyframes shake-sticks {
    0% { margin-bottom: 0; margin-left: 0; }
    25% { margin-bottom: 20px; margin-left: -5px; } /* Nhảy mạnh lên */
    50% { margin-bottom: 5px; margin-left: 5px; }   /* Rớt xuống va qua phải */
    75% { margin-bottom: 10px; margin-left: -2px; } /* Nảy nhẹ lại */
    100% { margin-bottom: 0; margin-left: 0; }
}

.shaking-stick {
    animation: shake-sticks 0.3s infinite ease-in-out; /* Tốc độ nhanh hơn lắc ống xíu */
}

/* Làm cho mấy cây quẻ nhảy không đều nhau nhìn cho tự nhiên */
.filler-stick:nth-child(odd) { 
    animation-duration: 0.25s; /* Cây lẻ nhảy nhanh hơn */
}
.filler-stick:nth-child(even) { 
    animation-duration: 0.35s; /* Cây chẵn nhảy chậm hơn */
    animation-delay: 0.05s;    /* Nhảy trễ xíu */
}
/* --- GIAO DIỆN CHIẾU CHỈ VUA BAN --- */

.royal-scroll {
    background: #fdfbf0; /* Màu giấy điệp */
    width: 80vw;
    max-width: 400px; /* Giới hạn chiều rộng cho giống cái chiếu dọc */
    padding: 20px;
    border: 5px solid #b71540; /* Viền đỏ mận */
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.8); /* Hào quang tỏa ra */
    position: relative;
    background-image: url('https://www.transparenttextures.com/patterns/cream-paper.png'); /* Vân giấy (nếu có mạng) */
    text-align: center;
    color: #5a0000; /* Chữ màu nâu đỏ cổ trang */
    font-family: 'Times New Roman', serif; /* Font có chân cho cổ kính */
}

/* Họa tiết rồng phượng trang trí (dùng CSS vẽ đơn giản) */
.scroll-decorative-top, .scroll-decorative-bottom {
    height: 20px;
    background-color: #b71540;
    margin-bottom: 20px;
    border-radius: 5px;
    position: relative;
}
.scroll-decorative-bottom {
    margin-bottom: 0;
    margin-top: 20px;
}

/* Chữ "THÁNH CHỈ ĐẾN" */
.royal-header {
    font-size: 24px;
    font-weight: bold;
    color: #d63031;
    border-bottom: 2px solid #b71540;
    display: inline-block;
    padding-bottom: 5px;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.royal-text p {
    font-size: 18px;
    margin: 10px 0;
    font-style: italic;
}

/* Phần thưởng to bự */
.reward-highlight {
    font-size: 32px;
    color: #c0392b; /* Đỏ tươi */
    text-transform: uppercase;
    margin: 20px 0;
    font-weight: 900;
    text-shadow: 1px 1px 0px #f1c40f;
    border: 2px dashed #b71540;
    padding: 10px;
    background: rgba(255, 215, 0, 0.1);
}

/* Con dấu đỏ chót */
.seal {
    width: 60px;
    height: 60px;
    border: 3px solid #c0392b;
    color: #c0392b;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    margin: 10px auto 0;
    border-radius: 5px;
    transform: rotate(-15deg); /* Nghiêng nghiêng cho giống đóng dấu tay */
    opacity: 0.8;
}

/* Ẩn cái nền trắng cũ của modal-content đi để hiện chiếu chỉ thôi */
.modal-content {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Chỉnh lại nút đóng cho dễ bấm */
.close-btn {
    top: -30px;
    right: 0;
}
/* Thêm vào cuối file style.css */
.royal-text p {
    font-style: normal !important; /* Bỏ in nghiêng */
    font-size: 20px; /* Chữ to rõ hơn xíu */
    color: #5a0000;
}

.royal-header {
    font-family: 'Arial', sans-serif; /* Đổi font tiêu đề cho hiện đại */
    border-bottom: 2px solid #b71540;
}