/* =========================================
   STYLE.CSS - BẢN FINAL (FULL SCENE 1 & 2)
========================================= */

/* --- 1. CÀI ĐẶT CƠ BẢN --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    width: 100vw;
    height: 100vh;
    background-color: #000;
    overflow: hidden;
    font-family: 'Merriweather', serif;
}

.scene-container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #0a1a0a; 
    transition: all 0.2s;
}

/* Layer mặc định: không cho chọn trúng */
.layer { position: absolute; user-select: none; pointer-events: none; }

/* ================================================================= */
/* ======================== SCENE 1: RỪNG THIÊNG =================== */
/* ================================================================= */

.bg { 
    top: 0; left: 0; width: 100%; height: 100%; 
    object-fit: cover; z-index: 1; 
}

/* Cây Gỗ Lim */
.tree {
    position: absolute; z-index: 2;
    pointer-events: auto; cursor: pointer;
    top: 0%; right: -15%; height: 80vh; width: auto;
    transition: all 0.3s ease;
    filter: brightness(0.5) grayscale(0.7) contrast(0.95);
}
.tree:hover { 
    filter: brightness(0.8) grayscale(0.2) contrast(1) drop-shadow(0 0 20px rgba(180, 220, 255, 0.7)); 
    transform: scale(1.02);
}

.leaves {
    position: absolute; top: 0%; left: 0%; width: 100%; height: 100%;
    object-fit: cover; z-index: 4; opacity: 0.60;
}

/* Hiệu ứng sương mù */
.fog {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('assets/suongmu.png');
    background-size: cover; background-repeat: repeat-x;
    pointer-events: none; z-index: 4; 
}
.fog-1 { opacity: 0.4; animation: fog-move 60s linear infinite; }
.fog-2 { opacity: 0.3; top: 10%; transform: scale(1.5); animation: fog-move 40s linear infinite reverse; }
@keyframes fog-move { from { background-position: 0 0; } to { background-position: 100% 0; } }

/* Thợ rừng */
.wood-chopper {
    position: absolute; z-index: 2; width: 300px; height: 500px; 
    bottom: 15%; right: -8%;
    filter: brightness(0.65) grayscale(0.5) contrast(1.2);
    background: url('assets/chat1.png') no-repeat bottom center / contain;
    animation: chop 1s infinite steps(1);
    transition: opacity 1s ease;
}
.wood-chopper-2 {
    position: absolute; z-index: 3; width: 280px; height: 480px; 
    bottom: 20%; right: 15%;
    filter: brightness(0.65) grayscale(0.5) contrast(1.2);
    background: url('assets/chat3.png') no-repeat bottom center / contain;
    animation: chop-back 1s infinite steps(1);
    transition: opacity 1s ease;
}
.hiding { opacity: 0; pointer-events: none; }
@keyframes chop { 0% { background-image: url('assets/chat1.png'); } 50% { background-image: url('assets/chat2.png'); } }
@keyframes chop-back { 0% { background-image: url('assets/chat3.png'); } 50% { background-image: url('assets/chat4.png'); } }

/* Đoàn quân */
.people-wrapper {
    position: absolute; left: 50%; transform: translateX(-50%);
    z-index: 3; width: 800px; height: auto; opacity: 0;
}
.people { width: 100%; display: block; }
.people-wrapper.walking {
    opacity: 1;
    animation: walk-in 18s ease-out forwards, shake 2s infinite ease-in-out;
}
@keyframes walk-in {
    0% { bottom: 25%; left: 40%; transform: translateX(-50%) scale(0.2); opacity: 0; }
    10% { opacity: 1; }
    100% { bottom: 45%; left: 40%; transform: translateX(-50%) scale(0.8); opacity: 1; }
}
@keyframes shake { 
    0%,100% { transform: translateX(-50%) rotate(0deg); } 
    50% { transform: translateX(-50%) rotate(0.5deg); } 
}

/* Các thành phần UI (Modal, Quiz, Alert) */
.danger-alert {
    animation: danger-shake 0.5s cubic-bezier(.36,.07,.19,.97) both infinite;
    box-shadow: inset 0 0 100px rgba(255, 0, 0, 0.5);
}
@keyframes danger-shake {
    10%, 90% { transform: translate3d(-2px, 0, 0); }
    20%, 80% { transform: translate3d(4px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
    40%, 60% { transform: translate3d(6px, 0, 0); }
}

.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); z-index: 100;
    display: flex; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden; transition: 0.3s;
    backdrop-filter: blur(5px);
}
.modal-overlay.show { opacity: 1; visibility: visible; }
.modal-split-container { display: flex; width: 90%; max-width: 1400px; height: 80vh; gap: 40px; }
.area-3d { flex: 1.5; position: relative; } 
model-viewer { width: 100%; height: 100%; }
.caption-3d {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.6); font-style: italic; font-size: 14px;
    background: rgba(0,0,0,0.3); padding: 5px 15px; border-radius: 20px;
}
.area-text { 
    flex: 1; background: #f4f1ea; padding: 40px; 
    border: 3px solid #4a3b2a; position: relative; 
    display: flex; flex-direction: column; 
    box-shadow: 10px 10px 30px rgba(0,0,0,0.8);
}
.area-text h2 { color: #4a3b2a; border-bottom: 2px solid #8c7b6c; padding-bottom: 15px; margin-bottom: 20px; text-align: center; font-weight: bold; font-size: 22px; }
.area-text p { font-size: 16px; line-height: 1.6; margin-bottom: 15px; text-align: justify; color: #2c2c2c; }
.close-btn { position: absolute; top: 10px; right: 15px; font-size: 35px; cursor: pointer; color: #8c7b6c; }
.close-btn:hover { color: #c0392b; }
.scrollable-content { overflow-y: auto; padding-right: 10px; }

.game-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.95); z-index: 200;
    display: flex; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden; transition: 0.3s;
}
.game-modal.active { opacity: 1; visibility: visible; }
.game-content {
    background: #f4f1ea url('https://www.transparenttextures.com/patterns/aged-paper.png');
    padding: 40px; border: 4px solid #c0392b; width: 650px; text-align: center;
    box-shadow: 0 0 50px rgba(0,0,0,1); border-radius: 8px;
}
.options-container { display: flex; flex-direction: column; gap: 15px; margin-top: 10px; }
.game-btn { 
    padding: 15px; font-size: 18px; cursor: pointer; text-align: left; 
    border: 2px solid #aaa; background: #fff; font-family: 'Merriweather', serif; 
    border-radius: 5px; transition: 0.2s;
}
.game-btn:hover { transform: scale(1.02); background: #eee; }
.btn-a:hover { border-color: #c0392b; color: #c0392b; background: #fadbd8; }
.btn-b:hover { border-color: #27ae60; color: #27ae60; background: #d5f5e3; }

.vignette-overlay { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    z-index: 10; background: radial-gradient(circle, transparent 50%, rgba(0,0,0,0.6)); 
    pointer-events: none; 
}
.transition-overlay { 
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; 
    background: black; z-index: 999; opacity: 0; pointer-events: none; 
    transition: opacity 2s; 
}
.transition-overlay.active { opacity: 1; pointer-events: auto; }

/* ================================================================= */
/* ======================== SCENE 2 STYLES ========================= */
/* ================================================================= */

.scene-2 { position: relative; overflow: hidden; }

/* Background Scene 2 */
.scene-2 .bg {
    width: 100%; height: 100%; object-fit: cover;
    filter: brightness(0.8) contrast(1.1); 
}

.water-fog {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 50%;
    background: linear-gradient(to top, rgba(255,255,255,0.2), transparent);
    z-index: 2; pointer-events: none;
}

/* --- PART 1: ANIMATION ĐOÀN TRÂU --- */
.buffalo-perspective {
    position: absolute;
    z-index: 5;
    /* VỊ TRÍ XUẤT PHÁT: Đặt ở 40% (ngay đường chân trời) */
    top: 40%; 
    left: 10%; 
    
    width: 400px; 
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1);
    filter: brightness(0.9);
    pointer-events: auto; 
    cursor: pointer;
    transition: filter 0.3s ease;
}

.buffalo-perspective img { width: 100%; display: block; }

/* Highlight khi di chuột */
.buffalo-perspective:hover {
    z-index: 100 !important;
    filter: brightness(1.2) drop-shadow(0 0 15px #f1c40f) drop-shadow(0 0 30px #f39c12);
}

/* Chuyển động đi tới */
.buffalo-perspective.moving-closer {
    animation: march-forward 25s ease-out forwards;
}

/* Độ trễ */
.delay-1 { animation-delay: 6s !important; }
.delay-2 { animation-delay: 12s !important; }

/* --- QUAN TRỌNG: ĐƯỜNG ĐI CỦA TRÂU (ĐI TỪ PHẢI SANG TRÁI VÀO BỜ) --- */
@keyframes march-forward {
    /* --- ĐIỂM XUẤT PHÁT (Ở XA) --- */
    0% {
        opacity: 0;
        top: 40%;       
        left: 90%; /* Bắt đầu từ bờ bên phải */
        transform: translate(-50%, -50%) scale(0.1); 
    }
    10% { opacity: 1; }
    100% {
        opacity: 1;
        top: 90%;       
        left: 90%; /* Kết thúc vẫn ở bờ bên phải (chỉ đi xuống gần) */
        transform: translate(-50%, -50%) scale(1.5); 
    }
}

/* Rung lắc khi đi */
.buffalo-perspective.moving-closer img { animation: heavy-steps 2s infinite ease-in-out; }
@keyframes heavy-steps {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    50% { transform: rotate(1deg) translateY(10px); }
}

/* Hiệu ứng tan biến */
.buffalo-perspective.fading-out {
    opacity: 0 !important; pointer-events: none;
    transition: opacity 1.5s ease !important;
}

/* =========================================
   SCENE 2 PART 2: SỰ CỐ GỖ CHÌM & BÀI HỌC
========================================= */
/* --- PART 2: SỰ CỐ GỖ CHÌM & BÀI HỌC --- */
.sinking-sequence {
    position: absolute; width: 100%; height: 100%; top: 0; left: 0;
    z-index: 40; pointer-events: none;
}

/* A. NHÓM LÍNH & GỖ */
.soldiers-idle, .soldiers-panic {
    position: absolute; bottom: 10%; right: 5%;
    width: 280px; filter: brightness(0.9);
}

.falling-log {
    position: absolute; width: 180px;
    bottom: 12%; right: 15%; /* Sát bờ */
    transition: all 0.6s ease-in;
}
.falling-log.dropping { bottom: 5%; right: 60%; transform: rotate(-20deg); }
.falling-log.sinking { transition: all 3s ease-out; bottom: -20%; opacity: 0; filter: blur(5px); }

/* Hiệu ứng nước bắn */
.splash-effect {
    position: absolute; bottom: 10%; right: 60%; width: 150px; height: 100px;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.9) 0%, transparent 70%);
    border-radius: 50%; transform: scale(0); opacity: 0;
}
.splash-effect.active { animation: splash-anim 0.6s ease-out; }
@keyframes splash-anim {
    0% { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(2) translateY(10px); opacity: 0; }
}
.bubble { position: absolute; bottom: 0%; right: 60%; background: rgba(255,255,255,0.7); border-radius: 50%; opacity: 0; }
.b1 { width: 25px; height: 25px; margin-left: -10px; }
.b2 { width: 15px; height: 15px; margin-left: 20px; animation-delay: 0.3s; }
.b3 { width: 10px; height: 10px; margin-left: 5px; animation-delay: 0.6s; }
.bubble.rising { animation: bubble-rise 2s infinite ease-in; }
@keyframes bubble-rise {
    0% { bottom: 0%; opacity: 1; transform: translateX(0); }
    100% { bottom: 40%; opacity: 0; transform: translateX(10px); }
}

/* B. BÓNG THOẠI */
/* B. BÓNG THOẠI (Style Giấy Dó) */
.dialogue-box {
    position: absolute; top: 25%; right: 15%; /* Chỉnh lại vị trí xíu cho đỡ che ông Quyền */
    
    /* GIAO DIỆN CỔ KÍNH */
    background: #fdfbf7; /* Màu giấy cũ (ngà vàng) thay vì trắng bóc */
    color: #4a3b2a;      /* Màu chữ nâu đất thay vì đen sì */
    font-family: 'Merriweather', serif; /* Phông chữ có chân sang trọng */
    border: 3px double #8b5a2b; /* Viền đôi màu nâu gỗ */
    box-shadow: 6px 6px 0px rgba(74, 59, 42, 0.3); /* Bóng đổ nhẹ nhàng hơn */
    
    /* CẤU TRÚC HỘP */
    padding: 20px 25px; 
    border-radius: 8px; /* Bo góc ít thôi cho nó cứng cáp */
    width: max-content; 
    max-width: 450px;
    text-align: justify; /* Canh đều 2 bên cho giống văn sớ */
    line-height: 1.6;
    opacity: 0; transform: scale(0.9); transition: all 0.5s ease-out;
    z-index: 60; 
}

/* Khi hiện lên thì trồi lên nhẹ nhàng */
.dialogue-box.show { opacity: 1; transform: scale(1); }

/* Tô điểm cho chữ in đậm */
.dialogue-box b {
    color: #c0392b; /* Chữ in đậm (Trí, Nhu, Cương) sẽ có màu đỏ son */
    font-weight: 900;
}

/* C. TƯỚNG NGÔ QUYỀN (VỊ TRÍ CHUẨN TRÊN BỜ) */
.nq-wrapper {
    position: absolute; bottom: 2%; 
    left: 60%; /* Đứng trên bờ, bên trái lính */
    z-index: 55;
    opacity: 0; transform: translateY(20px);
    transition: all 1.5s ease-out;
    pointer-events: none;
}
.nq-wrapper.appear {
    opacity: 1; transform: translateY(0);
    pointer-events: auto;
}

.nq-img { width: 320px; filter: brightness(0.95); transition: 0.3s; }

/* Highlight */
.nq-wrapper.interactive:hover .nq-img {
    filter: brightness(1.1) drop-shadow(0 0 15px #f1c40f);
    transform: scale(1.02); cursor: pointer;
}

.nq-label {
    position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.8); color: #f1c40f; padding: 5px 15px;
    border-radius: 5px; font-weight: bold; font-size: 14px;
    opacity: 0; transition: 0.3s; pointer-events: none; white-space: nowrap;
}
.nq-wrapper.interactive:hover .nq-label { opacity: 1; top: -50px; }

/* =========================================
   D. HẠM ĐỘI BÈ TRE (ĐỘI HÌNH: TRÁI DƯỚI -> PHẢI TRÊN)
========================================= */

.bamboo-raft {
    position: absolute; 
    opacity: 0; 
    transition: opacity 2s ease-in;
    z-index: 35;
    /* Hiệu ứng dập dềnh nhẹ */
    animation: heavy-float 4s ease-in-out infinite; 
}
.bamboo-raft.appear { opacity: 1; }

/* --- BÈ 1: GẦN NHẤT (GÓC TRÁI DƯỚI - MŨI TÊN ĐỎ CỦA BÀ) --- */
.raft-close {
    width: 450px;       /* To đùng vì ở sát mắt mình */
    bottom: -5%;        /* Sát mép dưới */
    left: -5%;          /* Sát mép trái (thò ra một chút) */
    z-index: 60;        /* Đè lên mọi thứ */
    animation-delay: 0s;
}

/* --- BÈ 2: Ở GIỮA SÔNG --- */
.raft-mid {
    width: 320px;       /* Vừa vừa */
    bottom: 18%;        /* Cao hơn chút */
    left: 20%;          /* Dịch sang phải */
    z-index: 40;
    filter: brightness(0.95);
    animation-delay: 1.5s;
}

/* --- BÈ 3: XA NHẤT (GẦN NGÔ QUYỀN) --- */
.raft-far {
    width: 200px;       /* Nhỏ nhất */
    bottom: 35%;        /* Cao nhất */
    left: 40%;          /* Gần chỗ ông Ngô Quyền đứng */
    filter: brightness(0.8) blur(0.5px); /* Hơi mờ do xa */
    z-index: 30;        /* Nằm sau Ngô Quyền */
    animation-delay: 0.5s;
}

/* Animation tròng trành cho bè chở nặng */
@keyframes heavy-float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(8px) rotate(1.5deg); } 
}
/* =========================================
   SCENE 3: CHẠM TRÁN THÁM BÁO (BẢN UPDATE: TRÁI -> PHẢI)
========================================= */

/* Reset body để nền full viền */
body, html { margin: 0; padding: 0; overflow: hidden; }

.scene-3 {
    position: relative; width: 100%; height: 100%; overflow: hidden;
}

/* 1. Nền Full */
.bg-full {
    position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;
    object-fit: cover; z-index: 1;
    filter: brightness(0.6) contrast(1.2); /* Tối hơn cho nguy hiểm */
}

/* 2. Sương mù trôi */
.heavy-fog {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: url('assets/suongmu.png'); /* Dùng lại ảnh sương mù cũ cho nhẹ */
    opacity: 0.4; z-index: 20; pointer-events: none;
    animation: fog-drift 60s linear infinite;
}
@keyframes fog-drift { from { background-position: 0 0; } to { background-position: 100% 0; } }

/* 3. PHE TA: HẠM ĐỘI 5 BÈ TRÔI DẠT (PHẢI -> TRÁI) */

/* KHUNG CHỨA CẢ ĐỘI (Di chuyển cả nhóm) */
/* --- GIỮ NGUYÊN CLASS CỦA BÀ --- */
.raft-group-drift {
    position: absolute;
    bottom: -10%;
    right: -20%; /* Xuất phát từ bên Phải */
    width: 800px;
    height: 500px;
    z-index: 40;
    
    /* Animation trôi sang trái */
    animation: drift-left 200s linear infinite; 
}

/* --- THÊM ĐOẠN KEYFRAMES NÀY VÀO ĐỂ NÓ CHẠY --- */
@keyframes drift-left {
    0% {
        right: -20%; /* Bắt đầu ở mép phải (như bà set) */
    }
    100% {
        right: 110%; /* Trôi tuốt sang mép trái và biến mất hẳn */
    }
}

/* STYLE TỪNG THÀNH VIÊN (Xếp vị trí ngẫu nhiên) */
.raft-member {
    position: absolute;
    filter: none;
    animation: individual-float 3s ease-in-out infinite alternate;
}

/* Bè 1: To nhất, đi đầu */
.r1 { width: 600px; bottom: 0; right: 50%; z-index: 5; }

/* Bè 2: Vừa, đi sau */
.r2 { width: 600px; bottom: 10%; right: 10%; z-index: 4; animation-delay: 0.5s; }

/* Bè 3: Nhỏ hơn */
.r3 { width: 600px; bottom: 20%; right: 30%; z-index: 3; animation-delay: 1s; }

/* Bè 4: Nhỏ xíu */
.r4 { width: 600px; bottom: 25%; right: 0%; z-index: 2; animation-delay: 1.5s; filter: brightness(0.5) blur(1px); }

/* Bè 5: Lạc trôi */
.r5 { width: 600px; bottom: 10%; right: 80%; z-index: 4; animation-delay: 2s; }

/* Hiệu ứng dập dềnh riêng lẻ */
@keyframes individual-float {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(10px) rotate(-2deg); }
}
/* --- 4. PHE ĐỊCH & GAMESHOW (SIZE CŨ - LOGIC MỚI) --- */

.enemy-wrapper {
    position: absolute;
    
    /* --- KHU VỰC CẤM ĐỤNG (GIỮ NGUYÊN THEO Ý BÀ) --- */
    top: 30%; 
    left: -50%; 
    width: 600px; 
    z-index: 30; 
    /* ------------------------------------------------ */
    
    /* ANIMATION MỚI: Đi ra đúng chỗ cũ rồi ĐỨNG YÊN LUÔN để chơi game */
    animation: patrol-stop-game 25s linear forwards;
}

.enemy-boat {
    width: 100%;
    filter: brightness(0.9);
}

/* KỊCH BẢN DI CHUYỂN: Chỉ đi ra đến chỗ bà thích (30%) rồi phanh gấp */
@keyframes patrol-stop-game {
    0% { left: -50%; transform: scale(0.8); }
    
    /* Đi ra đến vị trí 30% (Chỗ cũ bà set lúc nó dừng soi) */
    40% { left: 30%; transform: scale(1); } 
    
    /* Giữ nguyên vị trí đó mãi mãi */
    100% { left: 32%; transform: scale(1); } 
}

/* --- BONG BÓNG CHAT "..." (ĐANG XÌ XẦM) --- */
.dialogue-container {
    position: absolute;
    top: -20px; /* Giữ nguyên khoảng cách cũ */
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    display: flex; flex-direction: column; gap: 5px;
    z-index: 100;
}

.chat-bubble {
    background: #fff; padding: 5px 15px; border-radius: 15px;
    font-size: 24px; /* To lên xíu cho dấu ... dễ thấy */
    font-weight: bold; opacity: 0;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5); width: fit-content;
    line-height: 20px;
}

/* Bong bóng hiện ra lúc thuyền dừng (Giây thứ 4) */
.bubble-1 { align-self: flex-start; background: #f1c40f; animation: pop-in 0.5s forwards 4s; } 
.bubble-2 { align-self: flex-end; background: #fff; animation: pop-in 0.5s forwards 6s; }    

/* Dấu 3 chấm nhấp nháy liên tục */
.talking-dots { animation: blink-dots 1s infinite; }
@keyframes blink-dots { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }

/* --- BẢNG TRẮC NGHIỆM (HIỆN RA SAU CÙNG) --- */
.scout-quiz-options {
    position: fixed; /* Cố định để không chạy theo thuyền */
    bottom: 5%; left: 50%; transform: translateX(-50%);
    width: 900px;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;
    z-index: 200;
    
    /* Ẩn đi, chờ lính xì xào xong (9s) mới hiện */
    opacity: 0; visibility: hidden;
    animation: fade-options-in 1s forwards 9s; 
}

.quiz-btn {
    background: #fdfbf7; /* Giấy dó */
    border: 3px solid #8b5a2b; /* Viền nâu dày */
    color: #5d4037;
    padding: 15px 20px;
    font-family: 'Merriweather', serif;
    font-size: 18px; font-weight: bold;
    border-radius: 12px; cursor: pointer;
    width: 45%; 
    transition: 0.2s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.6);
}

.quiz-btn:hover {
    background: #d35400; color: white; border-color: #fff;
    transform: scale(1.05) translateY(-5px);
}

@keyframes fade-options-in { to { opacity: 1; visibility: visible; } }

/* --- HIỆU ỨNG TRẢ LỜI SAI (RUNG LẮC) --- */
.shake-wrong {
    animation: shake-btn 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake-btn {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* --- HIỆU ỨNG TRẢ LỜI ĐÚNG (THUYỀN PHÓNG ĐI) --- */
/* Class này sẽ được JS thêm vào khi chọn đúng */
.boat-exit {
    /* Ghi đè animation cũ, thay bằng cái mới phóng đi luôn */
    animation: boat-leaves 10s ease-in forwards !important;
}

@keyframes boat-leaves {
    0% { left: 32%; transform: scale(1); } /* Từ vị trí đang đứng */
    
    /* Phóng vút sang phải màn hình */
    100% { left: 120%; transform: scale(0.8); } 
}
/* --- FIX LỖI: HIỆU ỨNG HIGHLIGHT & BẤM BÈ (SCENE 2) --- */
.bamboo-raft {
    cursor: pointer !important; /* Bắt buộc hiện bàn tay */
    z-index: 200; /* QUAN TRỌNG: Đưa bè nổi lên trên mặt nước/sương mù */
    transition: all 0.3s ease;
    pointer-events: auto; /* Đảm bảo chuột bấm được */
}

.bamboo-raft:hover {
    /* Viền sáng vàng rực rỡ */
    filter: drop-shadow(0 0 15px #ffd700) brightness(1.3); 
    transform: scale(1.1); /* Phóng to lên xíu */
}
/* =========================================
   SCENE 4: CÔNG XƯỞNG ĐÊM (FINAL - GIỮ BÈ & GIẤU UI)
========================================= */

/* 1. CẤU TRÚC CHUNG */
.scene-4 {
    position: relative;
    width: 100vw; height: 100vh;
    overflow: hidden;
}

.scene-4 .bg-full {
    width: 100%; height: 100%; 
    object-fit: cover;
    /* Giữ nguyên ý bà: Không filter để nền sáng đẹp */
}

/* ---------------------------------------------------- */
/* 2. HIỆU ỨNG BÈ TRÔI (GIỮ NGUYÊN 100% CODE CỦA BÀ) */
/* ---------------------------------------------------- */
#introRafts {
    position: absolute;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 10;
}

.raft-docking {
    position: absolute;
    opacity: 0; 
    filter: brightness(0.8); 
    animation: dock-in 8s ease-out forwards;
}

/* --- VỊ TRÍ TỪNG BÈ (GIỮ NGUYÊN) --- */
.r1 {
    width: 300px;
    animation-delay: 0.5s;
    --end-left: 5%;
    --end-bottom: 35%;
    z-index: 3;
}

.r2 {
    width: 180px;
    animation-delay: 2s;
    --end-left: 25%;
    --end-bottom: 45%;
    opacity: 0.9;
    z-index: 2;
}

.r3 {
    width: 150px;
    animation-delay: 3.5s;
    --end-left: 30%;
    --end-bottom: 50%;
    filter: brightness(0.7) blur(1px);
    z-index: 1;
}

/* KEYFRAMES TRÔI (GIỮ NGUYÊN) */
@keyframes dock-in {
    0% {
        top: 40%; left: -20%;
        transform: scale(0.3); opacity: 0;
    }
    100% {
        top: auto;
        bottom: var(--end-bottom); left: var(--end-left);
        transform: scale(1); opacity: 1;
    }
}

/* ---------------------------------------------------- */
/* 3. MÀN HÌNH ĐEN CHUYỂN CẢNH */
/* ---------------------------------------------------- */
.black-screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: black; z-index: 200; /* Che hết mọi thứ */
    display: flex; justify-content: center; align-items: center;
    opacity: 0; pointer-events: none; transition: opacity 1s ease;
}

.black-screen.active {
    opacity: 1; pointer-events: auto;
}

.black-screen p {
    color: #f1c40f; 
    font-family: 'Merriweather', serif; 
    font-size: 24px; text-align: center; line-height: 1.6;
    animation: text-fade 1s ease-in;
}
@keyframes text-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }


/* ---------------------------------------------------- */
/* 4. GAME ĐẼO GỖ (ĐÃ UPDATE: GIẤU BẢNG NHIỆM VỤ ĐI) */
/* ---------------------------------------------------- */

/* UI Game (TÀNG HÌNH - QUAN TRỌNG) */
#gameUI {
    position: absolute; 
    /* Đẩy ra khỏi màn hình để mắt không thấy */
    top: -9999px; left: -9999px; 
    opacity: 0; pointer-events: none;
    z-index: -1;
}
/* Vẫn giữ style này để JS tìm thấy class mà chạy, không bị lỗi */
.progress-bar { width: 100%; height: 15px; background: #333; }
.fill { width: 0%; height: 100%; background: orange; }


/* =========================================
   SCENE 4: ĐẠI CÔNG TRƯỜNG (MULTI-WORKERS)
========================================= */

/* Container chung */
/* Container chung */
#grand-workshop {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    
    /* SỬA DÒNG NÀY: Đổi từ none -> auto để nhận được chuột bấm */
    pointer-events: auto; 
    
    cursor: url('https://cdn-icons-png.flaticon.com/32/1973/1973686.png'), pointer;
}

/* --- 1. CẤU TRÚC MỘT ÔNG THỢ (WORKER UNIT) --- */
/* Tui dùng đúng kích thước bà đã set làm chuẩn */
.worker-unit {
    position: absolute;
    width: 600px;  /* Giữ nguyên của bà */
    height: 300px; /* Giữ nguyên của bà */
    cursor: url('https://cdn-icons-png.flaticon.com/32/1973/1973686.png'), pointer;
    transform-origin: bottom center; /* Để khi thu nhỏ (xa) nó vẫn bám đất */
    pointer-events: auto;
    transition: all 0.3s ease;
}

/* --- 2. CÁC THÀNH PHẦN BÊN TRONG (GIỮ NGUYÊN THÔNG SỐ CỦA BÀ) --- */

/* Gỗ */
/* --- SỬA LẠI PHẦN NÀY TRONG STYLE.CSS --- */

/* Gỗ */
/* --- 1. CÁI KHUNG CHỨA GỖ (Quan trọng nhất) --- */
.worker-unit .log-container { 
    position: absolute; 
    /* Đặt khung gỗ nằm sát đáy của ô nhân vật */
    bottom: 0;  
    left: 0;    
    
    /* Bà muốn GỖ TO hay NHỎ thì chỉnh 2 số này nè */
    width: 500px;   /* <--- Tăng lên 600px nếu muốn gỗ to hơn */
    height:250px;  /* <--- Tăng lên tương ứng để không bị bẹt */
    
    z-index: 10;    /* Đảm bảo gỗ nằm đè lên chân ông thợ một chút cho thật */
}

/* --- 2. ẢNH CÂY GỖ BÊN TRONG --- */
.worker-unit .log-img { 
    /* Bắt buộc ảnh phải giãn ĐÚNG bằng cái khung ở trên */
    width: 100% !important; 
    height: 100% !important; 
    object-fit: contain; /* Giữ tỉ lệ ảnh không bị méo */
    
    position: absolute; 
    bottom: 0; left: 0; 
    
    /* Fix lỗi lệch: Xóa hết margin/padding thừa */
    margin: 0; padding: 0;
    
    transition: opacity 0.5s ease; 
}

/* LỚP DƯỚI: Gỗ nhọn (Luôn hiện sẵn, nằm dưới chờ thời) */
.worker-unit .log-img.sharp { 
    z-index: 1; 
    opacity: 1 !important; /* QUAN TRỌNG: Phải luôn hiện! */
}

/* LỚP TRÊN: Gỗ tù (Nằm đè lên che gỗ nhọn) */
.worker-unit .log-img.blunt { 
    z-index: 2; 
    opacity: 1; /* Ban đầu hiện rõ */
}

/* Khi có class .finished (sẽ thêm bằng JS) thì gỗ tù ẩn đi */
.worker-unit .log-img.blunt.finished {
    opacity: 0; /* Biến mất -> Lộ gỗ nhọn bên dưới */
}

/* Ông Thợ (Carpenter) */
.worker-unit .carpenter-sprite {
    position: absolute;
    /* --- THÔNG SỐ CỦA BÀ GIỮ NGUYÊN --- */
    bottom: 120px; 
    left: 40px; 
    width: 400px; 
    height:450px;
    /* ---------------------------------- */
    background-image: url('assets/chat5.png');
    background-size: contain; background-repeat: no-repeat;
    z-index: 5; transition: transform 0.1s;
}

/* Hiệu ứng bổ xuống */
.worker-unit .carpenter-sprite.striking {
    background-image: url('assets/chat6.png');
    transform: scale(0.95);
}

/* Bụi gỗ (Chip Emitter) - Đổi ID thành Class để dùng cho nhiều ông */
.worker-unit .chip-emitter {
    position: absolute;
    /* --- THÔNG SỐ CỦA BÀ GIỮ NGUYÊN --- */
    bottom: 50px; 
    left: 180px; 
    /* ---------------------------------- */
    width: 1px; height: 1px;
    pointer-events: none; z-index: 20;
}

/* (Hiệu ứng hạt bụi vẫn giữ nguyên animation cũ) */
.wood-chip {
    position: absolute; width: 8px; height: 8px; background: #e6b87e; border-radius: 2px;
    animation: chip-fly 0.6s ease-out forwards;
}
@keyframes chip-fly {
    to { transform: translate(var(--x), var(--y)) rotate(360deg); opacity: 0; }
}


/* --- 3. PHỐI CẢNH XA GẦN (POSITIONING) --- */

/* Ông 1: GẦN NHẤT (Bên phải - Dùng kích thước chuẩn của bà) */
.near {
    bottom: 0%; 
    right: 10%; /* Sát mép phải */
    z-index: 30;
    transform: scale(1); /* Giữ nguyên size gốc */
}

/* Ông 2: Ở GIỮA (Bên trái - Nhỏ hơn xíu - Quay mặt sang trái) */
.mid {
    bottom: 15%; 
    left: 15%; 
    z-index: 20;
    filter: brightness(0.9);
    /* Scale 0.8 cho nhỏ lại + ScaleX(-1) để lật mặt */
    transform: scale(0.8) scaleX(-1); 
}

/* Ông 3: Ở XA (Giữa sân - Bé nhất) */
.far {
    bottom: 25%; 
    left: 40%; /* Nằm giữa */
    z-index: 10;
    filter: brightness(0.8) blur(0.5px);
    transform: scale(0.6); /* Bé bằng 60% ông gần */
}

/* =========================================
   SCENE 4: ĐUA TỐC ĐỘ (FINAL FIX)
========================================= */

/* 1. CẤU TRÚC CHUNG */
.scene-4 { position: relative; width: 100vw; height: 100vh; overflow: hidden; }
.scene-4 .bg-full { width: 100%; height: 100%; object-fit: cover; }

/* 2. UI GAME TÀNG HÌNH */
#gameUI {
    position: absolute; top: -9999px; left: -9999px; opacity: 0; pointer-events: none; z-index: -1;
}
.progress-bar { width: 100%; height: 15px; background: #333; }
.fill { width: 0%; height: 100%; background: orange; }

/* ---------------------------------------------------- */
/* 3. CẤU TRÚC ÔNG THỢ (WORKER UNIT) */
/* ---------------------------------------------------- */
#grand-workshop {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;
}

.worker-unit {
    position: absolute;
    width: 600px; height: 300px;
    transform-origin: bottom center;
    transition: all 0.3s ease;
}

/* --- CÁC THÀNH PHẦN BÊN TRONG --- */
.worker-unit .log-img.sharp { z-index: 1; opacity: 1 !important; }
.worker-unit .log-img.blunt { z-index: 2; opacity: 1; }
.worker-unit .log-img.blunt.finished { opacity: 0; }

/* === [QUAN TRỌNG] ÔNG THỢ & ANIMATION BỔ === */
.worker-unit .carpenter-sprite {
    position: absolute;
    bottom: 120px; left: 40px; 
    width: 600px; height: 350px;
    /* Mặc định: Dáng giơ lên */
    background-image: url('assets/chat5.png');
    background-size: contain; background-repeat: no-repeat;
    z-index: 5; 
    /* Chỉ lật ảnh nếu có class facing-left (để chữ không bị ngược) */
    transition: transform 0.1s;
}

/* FIX LỖI NGƯỢC: Nếu container mẹ bị lật, thì lật cái ảnh ông thợ */
.facing-left .carpenter-sprite {
    transform: scaleX(-1);
}

/* [MỚI] ANIMATION BỔ CỦI LÊN XUỐNG */
/* Khi có class .striking -> Chạy keyframe chop-motion */
.worker-unit .carpenter-sprite.striking {
    animation: chop-motion 0.15s ease-in-out forwards;
}

/* Định nghĩa chuyển động bổ */
@keyframes chop-motion {
    0% {
        background-image: url('assets/chat5.png'); /* Giơ lên */
        transform: translateY(0); /* Vị trí cũ */
    }
    50% {
        background-image: url('assets/chat6.png'); /* Bổ xuống */
        /* Thấp xuống 15px và nhún người xíu cho có lực */
        transform: translateY(15px) scale(0.98); 
    }
    100% {
        background-image: url('assets/chat5.png'); /* Giơ lại lên ngay */
        transform: translateY(0); /* Về vị trí cũ */
    }
}

/* Riêng ông quay trái thì phải vừa lật vừa bổ */
.facing-left .carpenter-sprite.striking {
    animation: chop-motion-left 0.15s ease-in-out forwards;
}
@keyframes chop-motion-left {
    0% { background-image: url('assets/chat5.png'); transform: scaleX(-1) translateY(0); }
    50% { background-image: url('assets/chat6.png'); transform: scaleX(-1) translateY(15px) scale(0.98); }
    100% { background-image: url('assets/chat5.png'); transform: scaleX(-1) translateY(0); }
}
/* ================================================ */


/* Bụi gỗ */
.worker-unit .chip-emitter {
    position: absolute; bottom: 50px; left: 180px; 
    width: 1px; height: 1px; pointer-events: none; z-index: 20;
}
.wood-chip {
    position: absolute; width: 8px; height: 8px; background: #e6b87e; border-radius: 2px;
    animation: chip-fly 0.6s ease-out forwards;
}
@keyframes chip-fly { to { transform: translate(var(--x), var(--y)) rotate(360deg); opacity: 0; } }


/* ---------------------------------------------------- */
/* 4. PHỐI CẢNH XA GẦN (POSITIONING) */
/* ---------------------------------------------------- */
/* FIX LỖI NGƯỢC: Không dùng scaleX(-1) ở container mẹ nữa */

.near { /* Ông bên phải (Gần) */
    bottom: 0%; right: 10%; z-index: 30;
    transform: scale(1);
}

.mid { /* Ông bên trái (Giữa) - Có class facing-left ở HTML */
    bottom: 10%; left: 5%; z-index: 20;
    filter: brightness(0.9);
    transform: scale(0.8); /* Chỉ thu nhỏ, không lật khung */
}

.far { /* Ông giữa sân (Xa) */
    bottom: 25%; left: 40%; z-index: 10;
    filter: brightness(0.8) blur(0.5px);
    transform: scale(0.6);
}


/* ---------------------------------------------------- */
/* 5. CÁC YẾU TỐ KHÁC (Bè, Màn đen, UI đua xe) */
/* ---------------------------------------------------- */
/* Bè trôi */
#introRafts { position: absolute; width: 100%; height: 100%; pointer-events: none; z-index: 10; }
.raft-docking { position: absolute; opacity: 0; filter: brightness(0.8); animation: dock-in 8s ease-out forwards; }
.r1 { width: 300px; animation-delay: 0.5s; --end-left: 5%; --end-bottom: 35%; z-index: 3; }
.r2 { width: 180px; animation-delay: 2s; --end-left: 25%; --end-bottom: 45%; opacity: 0.9; z-index: 2; }
.r3 { width: 150px; animation-delay: 3.5s; --end-left: 30%; --end-bottom: 50%; filter: brightness(0.7) blur(1px); z-index: 1; }
@keyframes dock-in { 0% { top: 40%; left: -20%; transform: scale(0.3); opacity: 0; } 100% { top: auto; bottom: var(--end-bottom); left: var(--end-left); transform: scale(1); opacity: 1; } }

/* Màn đen */
.black-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: black; z-index: 200; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 1s ease; }
.black-screen.active { opacity: 1; }
.black-screen p { color: #f1c40f; font-family: 'Merriweather', serif; font-size: 24px; text-align: center; line-height: 1.6; animation: text-fade 1s ease-in; }
@keyframes text-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* UI Đua xe (Phím & Hạng) */
.key-hint {
    position: absolute; top: -50px; left: 50%; transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8); color: #f1c40f; border: 2px solid #f1c40f;
    padding: 8px 15px; border-radius: 8px; font-weight: bold; font-family: sans-serif; font-size: 20px; z-index: 100;
    box-shadow: 0 0 10px rgba(241, 196, 15, 0.5); animation: bounce 1s infinite;
}
@keyframes bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-5px); } }

.rank-badge {
    position: absolute; top: -80px; left: 50%; transform: translateX(-50%) scale(0);
    font-size: 28px; font-weight: 900; padding: 10px 20px; border-radius: 50px;
    border: 3px solid #fff; opacity: 0; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 101; white-space: nowrap; text-shadow: 2px 2px 0 #000;
}
.rank-badge.show { transform: translateX(-50%) scale(1); opacity: 1; }
.rank-1 { background: #f1c40f; color: #d35400; box-shadow: 0 0 20px #f1c40f; }
.rank-2 { background: #bdc3c7; color: #2c3e50; box-shadow: 0 0 15px #bdc3c7; }
.rank-3 { background: #cd7f32; color: #5d4037; }
/* ================================================= */
/* ANIMATION ĐÓNG BÚA (PHASE 2) - BẢN FIX MƯỢT 100% */
/* ================================================= */

/* 1. TRẠNG THÁI NGHỈ (GIƠ BÚA) - ÁP DỤNG CHO TẤT CẢ */
.worker-unit .hammer-sprite {
    position: absolute;
    bottom: -40px; left: 40px; 
    width: 500px; height: 650px;
    background-image: url('assets/chat7.png'); 
    background-size: contain; background-repeat: no-repeat;
    z-index: 5;
    opacity: 1; display: block;
    
    /* QUAN TRỌNG: Phải khai báo transform mặc định là scaleX(1) để làm mốc */
    transform: scaleX(1); 
    
    /* Tăng tốc độ transition lên 0.05s cho cảm giác đập nhanh và dứt khoát hơn */
    transition: transform 0.05s ease-in, background-image 0s; 
}

/* 2. TRẠNG THÁI ĐẬP (CÓ LỬA) - ÁP DỤNG CHO ÔNG H VÀ L (KHÔNG LẬT) */
.worker-unit .hammer-sprite.striking {
    background-image: url('assets/chat8.png') !important; 
    /* Đập xuống: Giữ nguyên hướng (1), dịch xuống 20px, nén nhẹ 0.95 */
    transform: scaleX(1) translateY(20px) scale(0.95); 
}

/* 3. TRẠNG THÁI NGHỈ - RIÊNG ÔNG A (LẬT NGƯỢC) */
.facing-left .hammer-sprite { 
    /* Lật ngược ảnh lại */
    transform: scaleX(-1); 
}

/* 4. TRẠNG THÁI ĐẬP - RIÊNG ÔNG A (LẬT NGƯỢC) */
.facing-left .hammer-sprite.striking { 
    /* Vẫn lật ngược (-1), nhưng thêm hiệu ứng đập xuống y chang mấy ông kia */
    transform: scaleX(-1) translateY(20px) scale(0.95); 
}
/* --- HIỆU ỨNG TƯƠNG TÁC NGƯỜI THỢ (SAU KHI XONG) --- */
.interactive-worker {
    cursor: pointer;
    filter: drop-shadow(0 0 10px gold); /* Sáng lên mời gọi */
    transition: transform 0.3s;
    animation: bounce-invite 1s infinite alternate;
}
.interactive-worker:hover {
    transform: scale(1.05); /* Phóng to nhẹ khi rê chuột vào */
    filter: drop-shadow(0 0 20px #e74c3c);
}
@keyframes bounce-invite {
    from { transform: translateY(0); }
    to { transform: translateY(-10px); }
}
.pulse-text { animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0.5; } }


/* --- GIAO DIỆN SHOWCASE 3D (BẢNG THÔNG TIN) --- */
.showcase-overlay {
    display: none; /* Mặc định ẩn */
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9); /* Nền tối mờ */
    z-index: 999;
    justify-content: center; align-items: center;
    backdrop-filter: blur(5px);
}

.showcase-content {
    display: flex;
    width: 85%; height: 80%;
    background: url('assets/nenscence4.jpg') no-repeat center center;
    background-size: cover;
    border: 4px solid #d35400;
    box-shadow: 0 0 50px rgba(211, 84, 0, 0.5);
    border-radius: 15px;
    overflow: hidden;
}

/* Phần bên trái: Thông tin */
.info-panel {
    width: 40%;
    background: rgba(0, 0, 0, 0.85); /* Đen mờ để đọc chữ */
    padding: 40px;
    color: #fff;
    display: flex; flex-direction: column; justify-content: center;
    border-right: 2px solid #d35400;
}

.artifact-title {
    font-size: 36px; color: #f1c40f; 
    text-transform: uppercase; margin-bottom: 10px;
    font-family: 'Merriweather', serif;
}
.artifact-line { width: 100px; height: 3px; background: #e74c3c; margin-bottom: 20px; }

.artifact-stats {
    list-style: none; padding: 0; margin-bottom: 20px;
    font-size: 18px; line-height: 1.8;
}
.artifact-stats li strong { color: #f39c12; }

.artifact-desc {
    font-style: italic; opacity: 0.9; line-height: 1.6;
    border-left: 3px solid #fff; padding-left: 15px; margin-bottom: 30px;
}

/* Phần bên phải: 3D Model */
.model-panel {
    width: 60%;
    position: relative;
    background: radial-gradient(circle, rgba(60,60,60,1) 0%, rgba(0,0,0,1) 100%);
}

model-viewer {
    width: 100%; height: 100%;
    --poster-color: transparent;
}

.drag-hint {
    position: absolute; bottom: 20px; right: 20px;
    color: rgba(255,255,255,0.5); font-size: 14px;
    pointer-events: none;
}

/* Nút ra trận */
.battle-btn {
    padding: 15px 30px; font-size: 20px; font-weight: bold;
    background: #c0392b; color: white; border: none;
    cursor: pointer; transition: 0.3s;
    align-self: flex-start;
    border: 2px solid #f1c40f;
}
.battle-btn:hover { background: #e74c3c; transform: scale(1.05); }

/* --- NÚT CHUYỂN GIAI ĐOẠN (FIX LỖI KHÔNG HIỆN) --- */
.next-phase-btn {
    display: none; /* Mặc định ẩn, JS sẽ bật lên */
    position: fixed; /* Dùng fixed để ghim chặt lên màn hình */
    top: 50%; left: 50%;
    transform: translate(-50%, -50%); /* Căn giữa tuyệt đối */
    z-index: 9999 !important; /* QUYỀN LỰC TỐI CAO: Luôn nằm trên cùng */
    
    padding: 20px 50px;
    font-size: 26px; font-weight: 900; color: #fff;
    font-family: 'Merriweather', serif;
    background: linear-gradient(45deg, #c0392b, #e74c3c); 
    border: 4px solid #f1c40f;
    border-radius: 60px; 
    cursor: pointer;
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
    animation: pulse-urgent 1s infinite;
}

.next-phase-btn:hover {
    background: #f1c40f; color: #d35400; border-color: #fff;
    transform: translate(-50%, -50%) scale(1.1);
}

@keyframes pulse-urgent {
    0% { box-shadow: 0 0 0 0 rgba(241, 196, 15, 0.7); }
    70% { box-shadow: 0 0 0 20px rgba(241, 196, 15, 0); }
    100% { box-shadow: 0 0 0 0 rgba(241, 196, 15, 0); }
}

/* Reset cơ bản */
body {
    margin: 0;
    padding: 0;
    overflow: hidden; /* Không cho cuộn trang */
    font-family: 'Merriweather', serif;
    background-color: #2c3e50;
}

/* KHUNG CẢNH CHÍNH */
.scene-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    /* Ảnh nền bãi sông */
    background: url('assets/nenscene5.png') no-repeat center bottom;
    background-size: cover; 
}

/* NHÂN VẬT & MÁY MÓC (Actor) */
.actor {
    position: absolute;
    /* Căn chỉnh vị trí nhóm người trên nền */
    bottom: 5%; /* Cách đáy 5% */
    left: 50%;
    transform: translateX(-50%); /* Căn giữa */
    
    height: 90vh; /* Chiều cao chiếm 70% màn hình -> Bà chỉnh số này to nhỏ tùy ý */
    width: auto;
    
    z-index: 10;
    transition: transform 0.1s; /* Để lúc rung nhìn mượt */
    /* Tạo bóng đổ cho nhân vật hòa vào nền */
    filter: drop-shadow(0px 10px 20px rgba(0,0,0,0.6));
}

/* BẢNG ĐIỀU KHIỂN */
.control-panel {
    position: absolute;
    bottom: 30px;
    right: 30px;
    background: rgba(0, 0, 0, 0.85);
    padding: 20px;
    border-radius: 15px;
    border: 3px solid #d35400;
    text-align: center;
    color: #fff;
    z-index: 100;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.title {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: #f1c40f;
    text-transform: uppercase;
}

.status {
    font-size: 16px;
    margin-bottom: 15px;
    color: #ecf0f1;
}

/* NÚT BẤM */
.btn-main {
    background-color: #f39c12;
    color: #fff;
    border: none;
    padding: 15px 30px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 5px 0 #d35400; /* Hiệu ứng nút nổi 3D */
}

.btn-main:active {
    transform: translateY(4px); /* Hiệu ứng nhấn xuống */
    box-shadow: 0 1px 0 #d35400;
}

.btn-main:disabled {
    background-color: #7f8c8d;
    box-shadow: none;
    cursor: not-allowed;
}

/* CHỮ "RẦM" NỔI LÊN */
.floating-text {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    font-size: 80px;
    font-weight: 900;
    color: #e74c3c;
    text-shadow: 4px 4px 0 #fff;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 100;
}

/* HIỆU ỨNG RUNG MÀN HÌNH (Khi đóng cọc) */
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.shake-anim .scene-container {
    animation: shake 0.5s; /* Rung trong 0.5s */
}
/* ... (Giữ nguyên các code cũ) ... */

/* --- MÀN HÌNH CHUYỂN CẢNH (STORY TELLING) --- */
.black-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: black; z-index: 900;
    display: flex; justify-content: center; align-items: center;
    opacity: 0; pointer-events: none; transition: opacity 2s ease;
}
.black-overlay.active { opacity: 1; pointer-events: auto; }

.story-text {
    text-align: center; color: white; width: 80%;
}
.story-text p {
    font-size: 24px; margin-bottom: 30px;
    opacity: 0; transform: translateY(20px);
    animation: text-fade-up 2s forwards;
    font-family: 'Merriweather', serif;
}
@keyframes text-fade-up {
    to { opacity: 1; transform: translateY(0); }
}

/* --- BÃI CỌC (STAKE YARD) --- */
.stake-field {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 5; pointer-events: none;
    overflow: hidden;
}

.stake-item {
    position: absolute;
    transform-origin: bottom center;
    
    /* GÓC NGHIÊNG CHIẾN THUẬT: 45 ĐỘ */
    /* Tùy vào ảnh gốc cocsat.png của bà đứng hay nghiêng */
    /* Nếu ảnh gốc là cây cọc chéo, thì chỉnh số này ít lại */
    /* Giả sử ảnh gốc là chéo sẵn, ta xoay thêm để nó ghim xuống bùn */
    transform: rotate(20deg); 
    
    filter: brightness(0.8) drop-shadow(5px 5px 5px rgba(0,0,0,0.7));
    
    /* Animation mọc lên từ bùn */
    opacity: 0; bottom: -100px;
    animation: stake-rise 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes stake-rise {
    0% { opacity: 0; transform: translateY(50px) rotate(20deg); }
    100% { opacity: 1; transform: translateY(0) rotate(20deg); }
}

/* NÚT NEXT SCENE (Hiện lên sau cùng) */
.next-phase-btn {
    display: none; /* Mặc định ẩn */
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px 40px; font-size: 25px; font-weight: bold;
    background: #c0392b; color: white; border: 3px solid #f1c40f;
    border-radius: 50px; cursor: pointer; z-index: 1000;
    box-shadow: 0 0 30px rgba(192, 57, 43, 0.8);
    animation: pulse-btn 1.5s infinite;
}
@keyframes pulse-btn {
    0% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
    100% { transform: translate(-50%, -50%) scale(1); }
}


/* =========================================
   SCENE 7: STYLE MỚI (NGÔ QUYỀN NHỎ GỌN)
========================================= */

/* 1. NGÔ QUYỀN (Bé lại & Đứng góc trái) */
.scene-7 .char-bust-left {
    position: absolute;
    bottom: -50px; /* Giấu dưới mép */
    left: 50px;    /* Cách lề trái một chút */
    
    width: 350px;  /* <--- BÉ LẠI Ở ĐÂY (Cũ là 500-600px) */
    
    z-index: 100;  /* Nổi lên trên nền */
    transition: bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    pointer-events: none;
}

.scene-7 .char-bust-left.show {
    bottom: 0; /* Trồi lên */
    opacity: 1;
}

/* 2. DÙNG LẠI HỘP THOẠI CỦA SCENE 6 (Style Hoằng Tháo) */
/* (Nếu bà đã copy CSS Scene 6 rồi thì nó tự nhận, không cần sửa gì thêm) */
/* Chỉ cần đảm bảo class .dialogue-wrapper có width khoảng 800-900px là đẹp */


/* 3. HIỆU ỨNG RUNG MÀN HÌNH (Shake) */
.shake-screen { animation: shake-hard 0.5s; }
@keyframes shake-hard {
    0% { transform: translate(0,0); }
    25% { transform: translate(-5px, 5px); }
    50% { transform: translate(5px, -5px); }
    75% { transform: translate(-5px, -5px); }
    100% { transform: translate(0,0); }
}

/* 4. NỀN ZOOM NHẸ */
.zoom-slow { animation: zoom-bg 20s infinite alternate; }
@keyframes zoom-bg { from { transform: scale(1); } to { transform: scale(1.1); } }

/* =========================================
   SCENE 8: GÓC NHÌN TRỰC DIỆN (POV) - BẢN SLOW MOTION
========================================= */

.scene-8-pov {
    width: 100vw; height: 100vh;
    background: #000; overflow: hidden; position: relative;
}
.river-bg-static {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: url('assets/nenscene8.png') no-repeat center center;
    background-size: cover;
    filter: brightness(0.7); z-index: 1;
}
.fog-overlay-static {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: url('https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog1.png');
    background-size: cover; opacity: 0.3; z-index: 2; pointer-events: none;
}

/* ----------------------------------------------------------- */
/* A. HẠM ĐỘI ĐỊCH */
/* ----------------------------------------------------------- */
.grand-fleet-pov {
    position: absolute; left: 50%;
    bottom: 40%; opacity: 1; 
    transform: translateX(-50%) scale(0.25);
    display: flex; flex-direction: column; align-items: center;
    gap: 25px; z-index: 10;
    
    /* [CHỈNH Ở ĐÂY] Tốc độ đi ra giữa sông */
    /* Tui đã sửa thành 60s (1 phút) */
    transition: bottom 60s linear, transform 60s linear;
}

/* PHA 2: RA ĐẾN GIỮA SÔNG */
.grand-fleet-pov.middle {
    bottom: 25%; 
    transform: translateX(-50%) scale(0.5); 
}

/* PHA 3: TIẾP TỤC ÁP SÁT (Đi siêu chậm sau khi nói xong) */
.grand-fleet-pov.advancing {
    bottom: 5%; 
    transform: translateX(-50%) scale(0.9); 
    /* Giai đoạn sau đi chậm rì (3 phút) */
    transition: bottom 180s linear, transform 180s linear !important;
}

/* ----------------------------------------------------------- */
/* B. HẠM ĐỘI QUÂN TA */
/* ----------------------------------------------------------- */
.vn-fleet-pov {
    position: absolute; left: 50%;
    bottom: 55%; opacity: 1;
    transform: translateX(-50%) scale(0.4);
    display: flex; flex-direction: column; align-items: center;
    z-index: 30;

    /* [CHỈNH Ở ĐÂY] Cũng để 60s cho đồng bộ với địch */
    transition: bottom 60s linear, transform 60s linear;
}

/* PHA 2: GIỮA SÔNG */
.vn-fleet-pov.middle {
    bottom: 35%; 
    transform: translateX(-50%) scale(0.8);
}

/* PHA 3: CHẠY TRỐN TIẾP */
.vn-fleet-pov.advancing {
    bottom: -10%; 
    transform: translateX(-50%) scale(1.3);
    /* Giai đoạn chạy trốn (40s) */
    transition: bottom 40s linear, transform 40s linear !important;
}

/* --- CẤU TRÚC HÀNG & THUYỀN (GIỮ NGUYÊN) --- */
.ship-row { display: flex; justify-content: center; align-items: flex-end; width: 100%; }
.ship { display: block; filter: drop-shadow(0 15px 10px rgba(0,0,0,0.55)); }
.back-row { margin-bottom: -50px; gap: 15px; }
.e-boss { width: 500px; z-index: 10; }
.e-mid  { width: 320px; z-index: 9; transform: translateY(20px); }
.front-row { gap: 50px; z-index: 20; }
.e-small { width: 180px; }
.lead-ship { transform: translateY(30px) scale(1.1); z-index: 22; }
.side-offset { transform: translateY(0px); z-index: 21; }
.decoy-row { padding-top: 0; gap: 20px; }
.v-decoy { width: 150px; filter: drop-shadow(0 10px 10px rgba(0,0,0,0.5)) brightness(1.2); animation: bobbing-decoy 1s infinite alternate ease-in-out; }
.v-left { transform: translateY(-15px) rotate(-3deg); }
.v-right { transform: translateY(15px) rotate(3deg); }
@keyframes bobbing-decoy { from { margin-bottom: 0; } to { margin-bottom: 8px; } }

/* --- HOẰNG THÁO --- */
.scene-8-pov .char-bust-left {
    position: absolute; bottom: -50px; left: -10%;
    width: 600px; z-index: 100;
    transition: bottom 0.8s; opacity: 0; pointer-events: none;
}
.scene-8-pov .char-bust-left.show { bottom: 0; opacity: 1; }

/* =========================================
   THÊM MỚI: SCENE 8 - TỔNG PHẢN CÔNG
========================================= */

/* =========================================
   CẬP NHẬT LẠI: TƯỚNG & HIỆU ỨNG NHẤP NHÔ
========================================= */

/* 1. Chỉnh lại size Ngô Quyền (Bên trái) cho nhỏ bớt */
.char-bust-left {
    position: absolute; bottom: -150px; left: 20px;
    width: 100px; /* Đã giảm từ 500 xuống 400 cho vừa vặn */
    z-index: 100;
    transition: bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0; pointer-events: none;
}
.char-bust-left.show { bottom: 0; opacity: 1; }


/* 2. HIỆU ỨNG NHẤP NHÔ KHI ĐỨNG CHỜ (FIX THẤP XUỐNG) */
@keyframes bobbing-fleet {
    0%, 100% { margin-bottom: 0; }
    50% { margin-bottom: 8px; } /* Sửa từ 25px xuống 8px cho sóng lăn tăn thôi */
}

/* Class này sẽ được JS thêm vào khi tàu ra giữa sông */
.fleet-bobbing {
    animation: bobbing-fleet 4s ease-in-out infinite;
}

/* =========================================
   HIỆU ỨNG THUYỀN TA CHẠY SÁT BỜ & TÀNG HÌNH
========================================= */

/* Khi quân ta cắm đầu chạy vào bờ thì TẮT nhấp nhô đi và phóng to lên */
.vn-fleet-pov.creeping-forward {
    animation: none !important; /* Tắt nhấp nhô */
    margin-bottom: 0 !important;
    bottom: 10% !important; /* Chạy sát mép dưới */
    transform: translateX(-50%) scale(1.1) !important;
    transition: bottom 20s linear, transform 8s linear, opacity 1.5s ease !important;
}

/* Lệnh tàng hình khi chạm bờ */
.vn-fleet-pov.fade-away {
    opacity: 0 !important;
}
/* =========================================
   CHIẾN THUẬT MAI PHỤC: GỌNG KÌM NỐI ĐUÔI
========================================= */

.ambush-fleet {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 60; 
}

/* Cấu hình chung cho thuyền lao ra */
.ambush-ship {
    position: absolute; 
    /* TĂNG TỪ 260px LÊN 400px CHO THUYỀN BỰ CHẢNG */
    width: 260px; 
    filter: drop-shadow(0 15px 15px rgba(0,0,0,0.8));
    transition: all 25s cubic-bezier(0.25, 0.8, 0.25, 1); 
    opacity: 0;
}

/* 1. VỊ TRÍ XUẤT PHÁT (Giấu dưới lề màn hình) */
.a-left-1, .a-left-2, .a-left-3 { left: -10%; bottom: -20%; transform: scale(0.5); }
.a-center-1, .a-center-2 { left: 50%; bottom: -20%; transform: translateX(-50%) scale(0.5); }
.a-right-1, .a-right-2, .a-right-3 { right: -10%; bottom: -20%; transform: scale(0.5); }

/* 2. ANIMATION MAI PHỤC LAO VÀO (VỊ TRÍ BÀ ƯNG) */

/* --- 3 Cánh Trái --- */
.ambush-fleet.charge .a-left-1 { bottom: 40%; left: 22%; transform: scale(0.8); opacity: 1; transition-delay: 0s; }
.ambush-fleet.charge .a-left-2 { bottom: 30%; left: 12%; transform: scale(0.9); opacity: 1; transition-delay: 0.2s; }
.ambush-fleet.charge .a-left-3 { bottom: 20%; left: 2%; transform: scale(1); opacity: 1; transition-delay: 0.4s; }

/* --- 2 Trung Tâm --- */
.ambush-fleet.charge .a-center-1 { bottom: 25%; left: 40%; transform: translateX(-50%) scale(0.9); opacity: 1; transition-delay: 0.1s; }
.ambush-fleet.charge .a-center-2 { bottom: 23%; left: 58%; transform: translateX(-50%) scale(0.95); opacity: 1; transition-delay: 0.3s; }

/* --- 3 Cánh Phải --- */
.ambush-fleet.charge .a-right-1 { bottom: 40%; right: 22%; transform: scale(0.8); opacity: 1; transition-delay: 0s; }
.ambush-fleet.charge .a-right-2 { bottom: 30%; right: 12%; transform: scale(0.9); opacity: 1; transition-delay: 0.2s; }
.ambush-fleet.charge .a-right-3 { bottom: 20%; right: 2%; transform: scale(1); opacity: 1; transition-delay: 0.4s; }

/* ÉP SIZE RIÊNG CHO NGÔ QUYỀN (Không đụng Hoằng Tháo) */
.scene-8-pov #ngoQuyenChar {
    width: 400px !important; /* Đổi số này để to/nhỏ tùy ý (100px là bé bằng hột tiêu đó nha) */
    left: 40px !important;   /* Nhích vào trong lề xíu cho đẹp */
    bottom: -5%
}

/* =========================================
   HIỆU ỨNG TRẬN CHIẾN (MƯA TÊN & LỬA)
========================================= */
.battlefield-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 80; overflow: hidden;
}

/* Chớp Đỏ (Trúng tên địch) */
.damage-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    box-shadow: inset 0 0 150px rgba(255, 0, 0, 0.9);
    background-color: rgba(255, 0, 0, 0.3);
    opacity: 0; pointer-events: none; z-index: 999;
    transition: opacity 0.1s ease-out;
}

/* Chớp Cam (Trúng đuốc lửa) */
.fire-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    box-shadow: inset 0 0 200px rgba(255, 100, 0, 0.9);
    background-color: rgba(255, 100, 0, 0.3);
    opacity: 0; pointer-events: none; z-index: 999;
    transition: opacity 0.1s ease-out;
}

.flash-active { opacity: 1 !important; transition: opacity 0.1s ease-in !important; }

/* Cấu hình chung cho Đạn/Mũi tên */
.projectile {
    position: absolute;
    pointer-events: none;
    will-change: transform, opacity;
}

/* ========================================================
   QUỸ ĐẠO MŨI TÊN ĐỊCH (THAY THẾ CÁI CŨ)
======================================================== */

/* ========================================================
   QUỸ ĐẠO MŨI TÊN BAY (ANIMATIONS)
======================================================== */
/* ĐỊCH BẮN LOẠI 1: Bắn xuống thuyền quân ta (Nhỏ, rơi giữa chừng) */
@keyframes enemy-shoot-ships {
    0% { transform: rotate(var(--angle)) scale(0.1) translateY(0); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: rotate(var(--angle)) scale(1.5) translateY(400px); opacity: 0; }
}

/* ĐỊCH BẮN LOẠI 2: Đuốc/Tên to khổng lồ bay thẳng vào mặt người xem (POV) */
@keyframes enemy-shoot-pov {
    0% { transform: rotate(var(--angle)) scale(0.1) translateY(0); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: rotate(var(--angle)) scale(8) translateY(1000px); opacity: 0; }
}

/* QUÂN TA BẮN: Từ dưới bắn vút lên trên */
@keyframes vn-shoot {
    0% { transform: rotate(var(--angle)) scale(1) translateY(0); opacity: 1; }
    80% { opacity: 1; }
    100% { transform: rotate(var(--angle)) scale(0.1) translateY(-1000px); opacity: 0; }
}

/* ========================================================
   QUẢN LÝ KÍCH THƯỚC ĐẠN DƯỢC (CHỈNH Ở ĐÂY NÈ)
======================================================== */

/* ĐỊCH BẮN */
.bullet-enemy-small { width: 50px; top: 30%; } /* Mũi tên nhỏ rải rác */
.bullet-enemy-giant { width: 500px; top: 20%; } /* Mũi tên khổng lồ lao vào mặt */
.bullet-enemy-torch { width: 500px; top: 10%; }

/* QUÂN TA BẮN */
.bullet-vn-left   { width: 100px; bottom: 50%; } /* Mũi tên từ mép Trái (chéo phải) */
.bullet-vn-right  { width: 100px; bottom: 60%; } /* Mũi tên từ mép Phải (chéo trái) */
.bullet-vn-center { width: 100px; bottom: 40%; } /* Mũi tên giữa (bay thẳng) */
.bullet-vn-torch  { width: 100px; bottom: 60%; } /* Đuốc lửa */

/* =========================================
   SCENE 8: HIỆU ỨNG TƯỚNG ĐỊCH & RÚT LUI
========================================= */

/* Tướng Nam Hán đứng góc phải báo tin */
.char-bust-right {
    position: absolute; bottom: -150px; right: 20px;
    width: 350px; z-index: 100;
    transition: bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0; pointer-events: none;
}
.char-bust-right.show { bottom: 0; opacity: 1; }

/* Kịch bản tàu địch tháo chạy (Từ từ trôi ngược lên giữa sông) */
.grand-fleet-pov.fleeing {
    bottom: 30% !important; 
    transform: translateX(-50%) scale(0.4) !important; 
    transition: bottom 25s linear, transform 25s linear !important;
}

/* =========================================
   SCENE 8: HIỆU ỨNG CHIẾN TRANH NÂNG CAO
========================================= */

/* 1. HIỆU ỨNG NHẤP NHÔ LÚC ĐÁNH NHAU (Dùng margin để ko bị lỗi vị trí) */
.battle-bobbing {
    animation: battle-bob-margin 1.2s infinite alternate ease-in-out !important;
}
@keyframes battle-bob-margin {
    0% { margin-bottom: 0px; }
    100% { margin-bottom: 20px; }
}

/* 2. QUÂN TA BƠI ĐUỔI THEO ĐỊCH */
.ambush-fleet {
    /* Thêm transition cho khung mẹ để nó chạy mượt */
    transition: bottom 25s linear, transform 25s linear;
}
.ambush-fleet.pursuing {
    bottom: 30% !important; /* Trôi lùi lên trên giống địch */
    transform: scale(0.65) !important; /* Teo nhỏ lại để tạo chiều sâu xa dần */
}

/* 3. BÃI CỌC MỌC LÊN */
.stakes-container {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; 
    z-index: 15; /* Nằm dưới thuyền ta (60) và xen giữa thuyền địch (10) */
}

.stake-img {
    position: absolute; width: 150px; 
    bottom: -100px; /* Giấu sâu dưới bùn */
    opacity: 0;
    transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.8));
}

/* Khi có lệnh mọc lên */
.stakes-container.rise .stake-img { opacity: 1; }

/* --- TỌA ĐỘ CỌC (BẢN FIX: NGHIÊNG 1 BÊN & CANH CHUẨN 6 THUYỀN) --- */
/* Tất cả đều nghiêng 20 độ. Tọa độ được gom sát vào vùng 45% - 53% để khớp với tàu rút lui */
.stk-1 { left: 45%; transform: scale(0.4) rotate(20deg); } .stakes-container.rise .stk-1 { bottom: 50%; } /* Boss - Giữa */
.stk-2 { left: 33%; transform: scale(0.3) rotate(20deg); } .stakes-container.rise .stk-2 { bottom: 47%; } /* Mid - Trái */
.stk-3 { left: 57%; transform: scale(0.3) rotate(20deg); } .stakes-container.rise .stk-3 { bottom: 46%; } /* Mid - Phải */
.stk-4 { left: 37%; transform: scale(0.3) rotate(20deg); } .stakes-container.rise .stk-4 { bottom: 40%; } /* Nhỏ - Trái Ngoài */
.stk-5 { left: 43%; transform: scale(0.4) rotate(20deg); } .stakes-container.rise .stk-5 { bottom: 35%; } /* Nhỏ - Giữa */
.stk-6 { left: 50%; transform: scale(0.4) rotate(20deg); } .stakes-container.rise .stk-6 { bottom: 37%; } /* Nhỏ - Phải Ngoài */
.stk-7 { display: none; }

/* ========================================================
   HIỆU ỨNG ĐẶC BIỆT: VA CHẠM & CHÌM TÀU (MỚI)
======================================================== */

/* 1. HIỆU ỨNG RUNG LẮC DỮ DỘI KHI CỌC ĐÂM TRÚNG THUYỀN */
@keyframes ship-impact-shake {
    /* Giữ nguyên vị trí scale(0.4) đang có, chỉ thêm rung lắc xoay nhẹ */
    0%, 100% { transform: translateX(-50%) scale(0.4) rotate(0deg); }
    25% { transform: translateX(-51%) scale(0.4) rotate(-2deg); }
    75% { transform: translateX(-49%) scale(0.4) rotate(2deg); }
}

.ship-impact-shaking {
    /* Rung cực nhanh (0.2s) và liên tục */
    animation: ship-impact-shake 0.2s infinite linear !important;
    transition: none !important; /* Tắt các chuyển động mượt khác để rung cho mạnh */
}

/* 2. HIỆU ỨNG CHÌM DẦN XUỐNG ĐÁY (SINKING) */
.enemy-sinking {
    /* Chìm tuốt xuống dưới đáy màn hình và mờ dần đi */
    bottom: -80% !important; 
    opacity: 0 !important;
    /* Quá trình chìm diễn ra chậm rãi trong 8 giây */
    transition: bottom 8s ease-in, opacity 8s ease-in !important;
}

/* =========================================
   STORYTELLING INTRO (SCENE 1)
========================================= */
.intro-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #050505; z-index: 9999; /* Đè lên toàn bộ web */
    display: flex; justify-content: center; align-items: center;
    transition: opacity 2s ease-in-out;
}

.intro-text {
    text-align: center; width: 80%; max-width: 900px;
    font-family: 'Merriweather', serif; color: #ecf0f1;
}

.intro-text p {
    font-size: 26px; line-height: 1.8; margin-bottom: 30px;
    opacity: 0; transform: translateY(20px);
    text-shadow: 0 5px 15px rgba(0,0,0,1);
}

/* Kịch bản chữ hiện lên lần lượt (Timing) */
.intro-text .line-1 { animation: fadeUp 2s ease forwards 1s; color: #f1c40f; font-weight: 900; font-size: 32px;} /* Đợi 1s hiện dòng 1 */
.intro-text .line-2 { animation: fadeUp 2s ease forwards 4.5s; } /* Đợi 4.5s hiện dòng 2 */
.intro-text .line-3 { animation: fadeUp 2s ease forwards 9s; } /* Đợi 9s hiện dòng 3 */

/* Nút bấm bắt đầu (Hiện ra sau cùng) */
.start-btn {
    opacity: 0; margin-top: 40px;
    padding: 15px 40px; font-size: 20px; font-weight: bold; font-family: 'Merriweather', serif;
    background: transparent; border: 2px solid #d35400; color: #d35400;
    border-radius: 5px; cursor: pointer; transition: 0.3s;
    animation: fadeInBtn 2s ease forwards 13s; /* Đợi 13s mới cho bấm */
}
.start-btn:hover { background: #d35400; color: #fff; box-shadow: 0 0 30px rgba(211, 84, 0, 0.8); transform: scale(1.05); }

@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInBtn { to { opacity: 1; } }

/* Lớp dùng để tàng hình Intro khi bấm nút */
.fade-out-intro { opacity: 0; pointer-events: none; }

/* --- SCENE 6: SÔNG NƯỚC MÊNH MÔNG (UPDATE: 4 PHÚT) --- */

.scene-6 {
    background: #000 !important;
    overflow: hidden;
}

.scene-6 .bg-full {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;
    animation: zoom-slow 40s infinite alternate; /* Kéo giãn cho mượt */
}
@keyframes zoom-slow { from { transform: scale(1); } to { transform: scale(1.1); } }

.fog-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: url('https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog1.png');
    background-size: cover; opacity: 0.3; z-index: 5;
    pointer-events: none;
    animation: fog-drift 120s linear infinite; /* Mây trôi siêu chậm */
}
@keyframes fog-drift { from { background-position: 0 0; } to { background-position: 100% 0; } }

/* ================================================= */
/* --- 1. HẠM ĐỘI ĐỊCH (BẢN KÉO DÀI THỜI GIAN) --- */
/* ================================================= */
#enemyFleet {
    position: absolute; width: 100%; height: 100%; top: 0; left: 0;
    pointer-events: none; z-index: 10;
}

/* THUYỀN BÉ: Mất 150s (2.5 phút) để chạy hết dòng sông */
.small-ship {
    position: absolute;
    left: -15%;
    z-index: 50;
    animation-duration: 150s !important; 
}

/* THUYỀN TO: Mất 180s (3 phút) để chạy chậm rãi */
.mid-ship, .boss-ship {
    position: absolute;
    left: -55%;  
    animation-duration: 180s !important; 
}

.fleet-moving .small-ship { animation-name: sail-small; animation-timing-function: linear; animation-fill-mode: forwards; }
.fleet-moving .mid-ship, .fleet-moving .boss-ship { animation-name: sail-big; animation-timing-function: linear; animation-fill-mode: forwards; }

@keyframes sail-small {
    from { left: -15%; }
    to { left: 40%; }
}

@keyframes sail-big {
    from { left: -45%; } 
    to { left: 5%; }
}

/* KHI ĐỊCH TIẾN LÊN GIỮA SÔNG BẮN NHAU (Mất 10 giây để nhích lên) */
.fleet-moving.forward-attack .ship {
    animation: move-forward-attack 10s ease-out forwards !important;
}
@keyframes move-forward-attack {
    from { transform: translateX(0); }
    to { transform: translateX(350px); } 
}

/* ĐỊCH TRUY KÍCH: Chạy hết map trong 30s (Nhanh nhưng vẫn đủ ngắm) */
.fleet-moving.chasing .ship {
    animation-duration: 30s !important;
}
.fleet-moving.chasing .mid-ship,
.fleet-moving.chasing .boss-ship {
    animation: chase-big 30s ease-in forwards !important;
}
@keyframes chase-big {
    0% { transform: translateX(350px); }
    100% { transform: translateX(2000px); } 
}
.fleet-moving.chasing .small-ship {
    animation: chase-small 30s ease-in forwards !important;
}
@keyframes chase-small {
    0% { transform: translateX(350px); }
    100% { transform: translateX(2000px); }
}

/* --- VỊ TRÍ XẾP LỚP (GIỮ NGUYÊN) --- */
.s1 { bottom: 20%; width: 220px; z-index: 5; animation-delay: 0s; }
.s2 { bottom: 25%; width: 150px; z-index: 4; filter: brightness(0.8); animation-delay: 2s; } 
.s3 { bottom: 5%; width: 280px; z-index: 6; animation-delay: 4s; }

.m1 { bottom: 5%; width: 500px; z-index: 25; animation-delay: 1s; }
.m2 { bottom: 40%; width: 320px; z-index: 10; filter: brightness(0.9); animation-delay: 3s; }

.boss-ship { bottom: 12%; width: 700px; z-index: 20 ; animation-delay: 5s; }

/* ================================================= */
/* --- 2. QUÂN TA RA NHỬ & BỎ CHẠY (BẢN CHẬM LẠI) --- */
/* ================================================= */

.vn-fleet {
    opacity: 1 !important; 
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none;
    z-index: 999 !important; 
    overflow: hidden;
}

.vn-ship {
    position: absolute; width: 250px; display: block !important; opacity: 1;
    filter: drop-shadow(5px 10px 10px rgba(0,0,0,0.6));
    animation: bobbing-vn 2s infinite ease-in-out alternate; 
}
.ship-wrapper {
    position: absolute; right: -25%; display: block !important; opacity: 1;
    transition: right 15s ease-out;
}

@keyframes bobbing-vn {
    0% { transform: translateY(0) rotate(1deg); }
    100% { transform: translateY(-15px) rotate(-1deg); }
}

/* KHI KÍCH HOẠT: Lao ra cực chậm (Mất 60s để bơi ra giữa sông) */
.vn-fleet.active .ship-wrapper,
.vn-fleet.active .vn-rower {
    animation: rush-in 60s ease-out forwards;
}

@keyframes rush-in {
    0% { right: -25%; opacity: 0; }
    100% { right: 35%; opacity: 1; }
}

/* MŨI TÊN (Bắn nhanh vèo vèo) */
.vn-arrow { position: absolute; top: 80px; left: 50px; width: 70px; opacity: 0; }
.vn-fleet.active .vn-arrow { animation: shoot-left 1.2s infinite linear; }
.a1 { animation-delay: 0.5s !important; }
.a2 { animation-delay: 0.9s !important; }
.a3 { animation-delay: 1.3s !important; }

@keyframes shoot-left {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    10% { opacity: 1; }
    100% { transform: translate(-900px, 150px) rotate(-20deg); opacity: 0; }
}

/* KHI QUÂN TA BỎ CHẠY: Lật xuồng và bơi mất 30s */
.vn-fleet.retreat .ship-wrapper,
.vn-fleet.retreat .vn-rower {
    transform: scaleX(-1) !important;
    transition: transform 1s ease; /* Lật xuồng chậm lại */
    animation: run-away 30s ease-in forwards !important;
}

@keyframes run-away {
    0% { right: 35%; opacity: 1; }
    100% { right: -50%; opacity: 0; }
}
.vn-fleet.retreat .vn-arrow { display: none !important; }

/* Vị trí quân ta (GIỮ NGUYÊN) */
.vn-rower { right: -25%; }
.v1 { bottom: 10%; width: 280px; z-index: 70; animation-delay: 0s !important; }
.v2 { bottom: 25%; width: 240px; z-index: 65; animation-delay: 1s !important; }
.v3 { bottom: 5%; width: 300px; z-index: 75; animation-delay: 2s !important; }
.v4 { bottom: 15%; z-index: 68; animation-delay: 0.5s !important; }
.v5 { bottom: 35%; z-index: 60; animation-delay: 1.5s !important; transform: scale(0.9); }
.v6 { bottom: 0%; z-index: 72; animation-delay: 2.5s !important; transform: scale(1.1); }


/* ================================================= */
/* --- 3. HIỆU ỨNG CHIẾN ĐẤU CỦA ĐỊCH --- */
/* ================================================= */

.enemy-arrow {
    position: absolute; width: 60px; opacity: 0; top: 50%; left: 50%; transform: rotate(0deg);
}

.fleet-moving.firing .enemy-arrow { animation: enemy-shoot 1s infinite linear; }

.ea1 { top: 30%; animation-delay: 0s; }
.ea2 { top: 50%; animation-delay: 0.3s; }
.ea3 { top: 70%; animation-delay: 0.6s; }

@keyframes enemy-shoot {
    0% { transform: translate(0, 0); opacity: 1; }
    100% { transform: translate(800px, 50px) rotate(10deg); opacity: 0; }
}

/* ================================================= */
/* --- 4. GIAO DIỆN HOẰNG THÁO & HỘP THOẠI --- */
/* ================================================= */

.char-bust-left {
    position: absolute; bottom: -100px; left: 20px; z-index: 200;
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0; pointer-events: none;
}
.char-bust-left img {
    height: 75vh; /* TO VÀ UY NGHI */
    object-fit: contain; filter: drop-shadow(10px 0 20px rgba(0,0,0,0.5));
}
.char-bust-left.show { bottom: 0; opacity: 1; }

.dialogue-wrapper {
    position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
    width: 900px; display: none; z-index: 1000;
}
.rpg-box-container {
    width: 100%; background: rgba(20, 20, 20, 0.95);
    border: 4px solid #d35400; border-radius: 15px; padding: 25px 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8); position: relative; border-top: 6px solid #f1c40f;
}
.char-name-tag {
    position: absolute; top: -25px; left: 40px; background: linear-gradient(to right, #c0392b, #8e44ad); color: #fff;
    padding: 8px 25px; font-family: 'Cinzel Decorative', cursive; font-weight: bold; font-size: 20px;
    border: 2px solid #f1c40f; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.5); text-transform: uppercase;
}
.dialogue-content-box { display: flex; justify-content: space-between; align-items: flex-end; }
.dialogue-text {
    font-family: 'Merriweather', serif; font-size: 24px; color: #ecf0f1;
    line-height: 1.6; text-shadow: 1px 1px 2px black; width: 90%;
}
.next-btn-rpg {
    background: none; border: none; color: #f1c40f; font-size: 30px;
    cursor: pointer; animation: bounce-arrow 1s infinite; padding-bottom: 5px;
}
@keyframes bounce-arrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.fade-in { animation: fadeInBox 0.5s ease-out forwards; }
@keyframes fadeInBox { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } }
.fade-out { animation: fadeOutBox 0.5s ease-in forwards; }
@keyframes fadeOutBox { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, 20px); } }