/* Nạp CSS của Tòa A và Tòa E vào đây */
@import url('./buildings/toaA.css');
@import url('./buildings/toaE.css');
@import url('./buildings/toaC.css');
@import url('./buildings/toaD.css');
@import url('./buildings/mainscreen.css');

/* ===================================================
   LÀM ĐẸP NÚT NGOÀI MÀN HÌNH CHÍNH
   =================================================== */
.main-menu-actions {
    display: flex;
    flex-direction: column; /* Xếp dọc 2 nút */
    align-items: center;
    gap: 15px; /* Khoảng cách giữa 2 nút */
    z-index: 100;
    
    /* --- PHẦN MỚI THÊM ĐỂ ĐẨY NÚT XUỐNG DƯỚI NÀY --- */
    position: absolute; 
    bottom: 15%; /* Cách đáy màn hình 15%. Muốn tụt xuống nữa thì đổi thành 10% hoặc 5% */
    left: 50%; /* Đẩy ra giữa màn hình */
    transform: translateX(-50%); /* Bí quyết để nó nằm chình ình chính giữa 100% */
    width: 100%; /* Đảm bảo không bị lệch khối */

}

.main-ui-btn {
    width: 280px;
    padding: 12px 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 50px; /* Bo tròn 2 đầu dạng viên thuốc */
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    letter-spacing: 1px;
}

/* Nút Tiếp Tục: Màu Xanh nổi bật, thu hút ánh nhìn */
.btn-continue {
    background: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 210, 255, 0.4);
}

.btn-continue:hover {
    transform: translateY(-3px); /* Hiệu ứng nảy lên khi rê chuột */
    box-shadow: 0 6px 20px rgba(0, 210, 255, 0.6);
}

/* Nút Bắt Đầu Mới: Màu tối giản, chìm hơn một chút để tránh bấm nhầm */
.btn-start {
    background: transparent;
    color: #333333; /* Màu xám đậm */
    border: 2px solid #555555; /* Chỉ có viền */
}

.btn-start:hover {
    background: #333333;
    color: #ffffff;
    transform: translateY(-3px);
}

/* Ẩn nút đi mượt mà khi chưa có dữ liệu save */
.hidden {
    display: none !important;
}
/* THÊM DÒNG NÀY ĐỂ SỬA LỖI HIỆN TẤT CẢ CÙNG LÚC */
.hidden {
    display: none !important;
}

/* ============================================================
   CONFIG CHUNG: KHÓA CHẶT TỈ LỆ 16:9 - KHÔNG TRÀN MÀN
   ============================================================ */
* { box-sizing: border-box; }

body { margin: 0; padding: 0; overflow: hidden; }

.screen {
    width: 100vw; height: 100vh;
    background-size: cover; background-position: center;
    position: fixed; top: 0; left: 0;
    display: flex; flex-direction: column; justify-content: center; align-items: center; 
    overflow: hidden;
    transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out; 
    z-index: 10;
}

.hidden { display: none !important; }

/* MÀN HÌNH CHÍNH & NHẬP TÊN */
#main-menu { background-image: url('../assets/images/menu.webp'); }
.game-title-img { width: 30%; margin-bottom: 20px; animation: floating 3s ease-in-out infinite; }
#main-start-btn { background: none; border: none; cursor: pointer; padding: 0; }
#main-start-btn img { width: 280px; transition: transform 0.3s ease; }
#main-start-btn:hover img { transform: scale(1.1); }

#name-screen { background-image: url('../assets/images/toaB.png'); }
.name-content { display: flex; flex-direction: column; align-items: center; text-align: center; color: #000; }
.name-content h2 { font-size: 2rem; margin-bottom: 15px; }
.name-content input { width: 300px; padding: 12px; font-size: 18px; border: 2px solid #000; border-radius: 5px; background: rgba(255, 255, 255, 0.9); outline: none; margin-bottom: 20px;}
#enter-btn { padding: 10px 30px; font-size: 16px; cursor: pointer; background-color: #000; color: #fff; border: none; border-radius: 4px; }

/* HIỆU ỨNG CHUYỂN CẢNH */
.fade-out-left { transform: translateX(-150px) !important; opacity: 0 !important; pointer-events: none; }
@keyframes floating { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }

#fade-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: black; opacity: 0; pointer-events: none; z-index: 9999;
    transition: opacity 0.8s ease-in-out;
}
#fade-overlay.active { opacity: 1; pointer-events: all; }

#game-title-logo {
    position: absolute; 
    top: 15%; /* Cách mép trên màn hình 15% (bạn giữ nguyên) */
    
    /* --- PHẦN MỚI THÊM ĐỂ ĐỨNG YÊN VÀ NẰM GIỮA --- */
    left: 50%; /* Đẩy lề trái ra giữa màn hình */
    transform: translateX(-50%); /* Bí quyết để tâm của bức ảnh nằm chính giữa chính xác 100% */
    
    /* Xóa bỏ hoặc set none cho animation cũ để nó không bồng bềnh nữa */
    animation: none !important; 

    /* Giữ nguyên các thuộc tính về kích thước */
    width: 950px; /* Nhớ chỉnh số này cho to ra như bạn muốn nhé (ví dụ 650px hoặc 700px) */
    height: auto;
    z-index: 20; 
}

/* ============================================================
   ÉP KÍCH THƯỚC CÁC TÒA NHÀ LUÔN FULL MÀN HÌNH
   ============================================================ */
.building-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}



/* Đảm bảo khung chứa game bên trong tòa A cũng bung hết cỡ */
.screen-container {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Ghi đè thuộc tính overflow riêng cho Tòa B để có thể cuộn lướt xem thẻ */
#toa-b {
    overflow-y: auto !important; /* Cho phép cuộn dọc */
    overflow-x: hidden; /* Vẫn khóa cuộn ngang cho an toàn */
}

/* ============================================================
   GIAO DIỆN HƯỚNG DẪN (DÙNG CHUNG CẢ GAME)
   ============================================================ */

/* 1. Màn hình nền bao trùm */
.overlay-screen {
    position: absolute;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    background-color: rgba(244, 247, 246, 0.98);
    padding: 20px; box-sizing: border-box;
    z-index: 105;
}

/* 2. Hộp nội dung (Form chung) */
.instruction-box {
    background: #ffffff;
    width: 90%; 
    max-width: 600px;
    max-height: 60vh; /* Vừa đủ để hiện nút bấm ở dưới */
    overflow-y: auto;
    padding: 30px 40px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    text-align: left;
}

/* Màu viền riêng cho từng Tòa */
#toa-a .instruction-box { border: 2px solid #ff9800; } /* Cam */
#toa-b .instruction-box { border: 2px solid #128287; } /* Xanh */

/* Chữ bên trong hộp */
.instruction-box p { font-size: 1.2rem; line-height: 1.6; margin-bottom: 15px; color: #2d3748; }
.instruction-box hr { border: none; border-top: 1px dashed #cbd5e0; margin: 20px 0; }
.text-danger { color: #e53e3e !important; font-weight: bold; }

/* Màu chữ in đậm riêng cho từng Tòa */
#toa-a .instruction-box b { color: #ff9800; }
#toa-b .instruction-box b { color: #2b6cb0; }

/* Thanh cuộn gọn gàng */
.instruction-box::-webkit-scrollbar { width: 8px; }
.instruction-box::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 4px; }


/* ============================================================
   NÚT BẤM TIÊU CHUẨN (ĐỒNG BỘ FORM DÁNG)
   ============================================================ */

.orange-btn, .blue-btn {
    font-family: Arial, sans-serif;
    font-size: 1.1rem;
    font-weight: bold;
    padding: 12px 30px;
    border: none;
    border-radius: 6px; /* Bo góc vuông vức giống Tòa A */
    cursor: pointer;
    text-transform: uppercase;
    color: #fff;
    transition: all 0.2s;
}
/* Chỉnh lại nút bấm của tòa a và tòa b */
/* Tòa A: Nút Cam */
.orange-btn { background-color: #ff9800; box-shadow: 0 4px 0 #e65100; }
.orange-btn:hover { background-color: #ffa726; transform: translateY(-2px); box-shadow: 0 6px 0 #e65100; }
.orange-btn:active { transform: translateY(4px); box-shadow: 0 0 0 #e65100; }

/* Tòa B: Nút Xanh */
.blue-btn { background-color: #2b6cb0; box-shadow: 0 4px 0 #1a365d; }
.blue-btn:hover { background-color: #3182ce; transform: translateY(-2px); box-shadow: 0 6px 0 #1a365d; }
.blue-btn:active { transform: translateY(4px); box-shadow: 0 0 0 #1a365d; }

/* ============================================================
   THIẾT LẬP FONT CHỮ TOÀN GAME
   ============================================================ */
/* 1. Mặc định toàn bộ chữ trong game sẽ dùng font Nunito cho dễ đọc */
* {
    font-family: 'Nunito', sans-serif;
}

/* 2. Ép riêng Tiêu đề, Bold, Strong, và Nút bấm dùng font Poppins cho bự và ngầu */
h1, h2, h3, h4, h5, h6, 
.orange-btn, .blue-btn, .green-btn,
b, strong, .game-title-yellow, .game-title-blue, .game-title-green {
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.5px; /* Giãn chữ ra một chút xíu cho sang */
    font-weight: 600; /* Default bold weight for Poppins */
}

#summaryScreen{
    background: rgba(0,0,0,0.92);
    display:flex;
    justify-content:center;
    align-items:center;
}

.summary-box{
    width:700px;
    padding:40px;
    border-radius:20px;
    background:rgba(255,255,255,0.08);
    color:white;
    text-align:center;
    animation:fadeUp 1s ease;
}

.title{
    font-size:34px;
    margin-bottom:25px;
    color:#00ffcc;
}

#scoreLines div{
    font-size:22px;
    margin:10px 0;
}

.total-box h1{
    font-size:64px;
    color:#00ffcc;
    text-shadow:0 0 15px #00ffcc;
}

#rankText{
    margin-top:20px;
    font-size:24px;
    color:gold;
}

#quoteText{
    margin-top:15px;
    opacity:0.8;
    font-style:italic;
}

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

/* =========================================
   BẢNG TỔNG KẾT DÙNG CHUNG
========================================= */
#global-summary-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Nền đen mờ */
    backdrop-filter: blur(10px); /* LÀM MỜ BACKGROUND GAME */
    -webkit-backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999; /* Đảm bảo luôn nằm trên cùng */
    font-family: 'Segoe UI', Arial, sans-serif;
}

#global-summary-overlay.hidden { display: none; }

.summary-glass-box {
    background: rgba(60, 60, 60, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 30px 40px;
    width: 450px;
    max-width: 90%;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    color: white;
}

#summary-title {
    text-align: center; color: #1de9b6;
    margin-bottom: 25px; font-size: 1.5rem;
    text-shadow: 0 0 10px rgba(29, 233, 182, 0.5);
}

.summary-row {
    background: rgba(255, 255, 255, 0.1);
    margin-bottom: 15px; padding: 15px 20px;
    border-radius: 10px;
    display: flex; justify-content: space-between;
    font-size: 1.1rem;
}

.summary-row.total-row {
    background: #1de9b6; color: #1a1a1a;
    font-weight: bold; font-size: 1.2rem;
    box-shadow: 0 0 15px rgba(29, 233, 182, 0.4);
}

.summary-footer {
    display: flex; justify-content: space-between;
    font-size: 0.85rem; color: #ccc;
    margin: 20px 0; padding: 0 10px;
}

#summary-action-btn {
    width: 100%; padding: 15px;
    background: linear-gradient(90deg, #00b4db, #0083b0);
    border: none; border-radius: 10px;
    color: white; font-weight: bold; font-size: 1.1rem;
    cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 5px 15px rgba(0, 180, 219, 0.4);
}
#summary-action-btn:hover { transform: translateY(-3px); }
#summary-action-btn:active { transform: translateY(0); }

/* =========================================
   MÀN HÌNH BAD ENDING (ERROR SCREEN)
========================================= */
#bad-ending-screen {
    position: fixed;
    inset: 0;
    background-color: #050505; /* Đen nhám */
    color: white;
    z-index: 9999; /* Nằm ngay dưới Leaderboard (10000) */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-family: 'Courier New', Courier, monospace; /* Font code */
}

/* Nền code mờ ảo phía sau */
.error-bg-code {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    color: #4a6da7; /* Màu xanh biển xám giống trong ảnh của bạn */
    opacity: 0.3;
    font-size: 14px;
    line-height: 1.2;
    word-wrap: break-word;
    pointer-events: none;
}

/* Khung căn giữa */
.error-content {
    position: relative;
    text-align: center;
    z-index: 10;
}

/* Icon tam giác đỏ */
.error-icon {
    font-size: 100px;
    color: transparent;
    text-shadow: 0 0 0 #ff2a2a, 3px 0 10px rgba(255,0,0,0.6);
    margin-bottom: -20px;
    animation: glitch-blink 0.3s infinite alternate;
}

/* HIỆU ỨNG CHỮ GLITCH */
.error-text {
    font-size: 120px;
    font-weight: bold;
    margin: 0;
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 10px;
}

/* Tạo ra 2 bản sao của chữ ERROR để làm bóng ma */
.error-text::before, .error-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #050505;
}

/* Bóng ma màu Đỏ (Giật sang trái) */
.error-text::before {
    left: 4px;
    text-shadow: -3px 0 red;
    animation: glitch-anim-1 2s infinite linear alternate-reverse;
}

/* Bóng ma màu Xanh (Giật sang phải) */
.error-text::after {
    left: -4px;
    text-shadow: -3px 0 cyan;
    animation: glitch-anim-2 2.5s infinite linear alternate-reverse;
}

/* Dòng chữ nhỏ nhấp nháy */
.error-subtext {
    font-size: 24px;
    color: #ff2a2a;
    margin-top: 10px;
    animation: blink 1s infinite step-end;
}

/* Các Animation Keyframes */
@keyframes glitch-anim-1 {
    0% { clip: rect(20px, 9999px, 44px, 0); }
    20% { clip: rect(80px, 9999px, 90px, 0); }
    40% { clip: rect(30px, 9999px, 55px, 0); }
    60% { clip: rect(95px, 9999px, 120px, 0); }
    80% { clip: rect(20px, 9999px, 70px, 0); }
    100% { clip: rect(60px, 9999px, 85px, 0); }
}
@keyframes glitch-anim-2 {
    0% { clip: rect(10px, 9999px, 30px, 0); }
    20% { clip: rect(60px, 9999px, 70px, 0); }
    40% { clip: rect(10px, 9999px, 40px, 0); }
    60% { clip: rect(110px, 9999px, 130px, 0); }
    80% { clip: rect(40px, 9999px, 60px, 0); }
    100% { clip: rect(80px, 9999px, 100px, 0); }
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
@keyframes glitch-blink {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); opacity: 0.8;}
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); opacity: 0.9;}
    100% { transform: translate(0); }
}

/* =========================================
   HIỆU ỨNG BAD ENDING (LỜI NGUYỀN 3.0 - ĐÃ FIX TARGET)
========================================= */

/* 1. Nhòe màu ở màn hình Hội thoại */
.light-glitch-effect {
    animation: chromatic-shift 0.15s infinite;
}
@keyframes chromatic-shift {
    0% { filter: drop-shadow(3px 0 0 rgba(255,0,0,0.8)) drop-shadow(-3px 0 0 rgba(0,255,255,0.5)); }
    50% { filter: drop-shadow(-3px 0 0 rgba(255,0,0,0.8)) drop-shadow(3px 0 0 rgba(0,255,255,0.5)); }
    100% { filter: drop-shadow(1px 0 0 rgba(255,0,0,0.8)) drop-shadow(-1px 0 0 rgba(0,255,255,0.5)); }
}

/* ==============================================
   2. HÓA QUỶ BẢNG TỔNG KẾT HOA LÁ (#summaryScreen)
============================================== */

/* Diệt tận gốc background hoa lá, thay bằng nền đen thui */
body.cursed-mode #summaryScreen {
    background: #000000 !important; 
    background-image: none !important; /* Xóa ảnh hoa */
}

/* Lớp sọc nhiễu TV phủ lên toàn màn hình đen */
body.cursed-mode #summaryScreen::after {
    content: ""; position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,0.3), rgba(0,0,0,0.3) 2px, transparent 2px, transparent 4px);
    pointer-events: none; z-index: 10001;
}

/* Biến cái khung Bảng thành màu đen, viền đỏ, nhấp nháy */
body.cursed-mode #summaryScreen .board-container {
    background: #050000 !important;
    border: 2px solid #ff0000 !important;
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.8) !important;
    animation: tv-flicker 0.1s infinite alternate;
}

/* LỘT SẠCH màu xanh lá/xanh dương của các dòng điểm bên trong */
body.cursed-mode #summaryScreen .board-container * {
    background-color: transparent !important; 
    background-image: none !important; 
    color: #ff0000 !important; /* Ép chữ đỏ */
    text-shadow: 2px 0px 1px rgba(255,0,0,0.9), -2px 0px 1px rgba(0,255,255,0.5) !important;
    font-family: 'Courier New', Courier, monospace !important;
    border-color: #ff0000 !important; 
}

/* Biến cái nút bấm màu xanh dương thành màu đen viền đỏ */
body.cursed-mode #btnShowLeaderboard {
    background-color: #1a0000 !important;
    border: 1px solid #ff0000 !important;
    box-shadow: none !important;
    z-index: 10002; /* Đảm bảo bấm được */
}

@keyframes tv-flicker {
    0% { transform: translateX(2px) translateY(1px); opacity: 0.9; filter: contrast(1.2); }
    100% { transform: translateX(-2px) translateY(-1px); opacity: 1; filter: contrast(1); }
}

/* ==============================================
   3. BINARY CODE & ERROR SCREEN (Fix Z-index)
============================================== */
#error-bg-code {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    overflow: hidden; pointer-events: none; display: block;
    z-index: 0 !important;
}
.binary-row {
    white-space: nowrap; font-size: 22px; line-height: 1.2;
    color: #ff2a2a; opacity: 0.6; font-family: 'Courier New', monospace;
    font-weight: bold;
}
@keyframes scrollBinary {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Bật Glitch cảnh 1 xuyên thấu mọi thứ */
#cyber-glitch-overlay.active-max {
    display: block !important;
    z-index: 10005 !important; 
    opacity: 1 !important;
}

/* =========================================
   HIỆU ỨNG DUNG HỢP KÝ ỨC (CINEMATIC)
========================================= */
#memory-merge-screen {
    position: fixed; inset: 0;
    background: transparent; /* SỬA Ở ĐÂY: Xóa nền đen để nhìn xuyên thấu thấy CTV ở dưới */
    z-index: 10000;
    display: flex; justify-content: center; align-items: center;
    overflow: hidden;
    pointer-events: none; /* Bắt buộc có để click xuyên qua được hộp thoại */
    transition: background 1.5s ease; /* Chuyển màu nền mượt mà */
}

/* Thêm class này để lúc 5 mảnh đâm vào nhau thì không gian mới tối sầm lại */
#memory-merge-screen.is-merging-bg {
    background: radial-gradient(circle, #020813 0%, #000000 100%);
}

.merge-container {
    position: relative;
    width: 300px; height: 300px;
}

/* Base của mảnh ký ức (Sau này bạn có thể thay bằng thẻ <img> nếu Artist vẽ xong) */
.memory-fragment {
    position: absolute;
    width: 40px; height: 40px;
    background: #fff;
    border-radius: 10px;
    display: flex; justify-content: center; align-items: center;
    font-weight: bold; font-family: 'Poppins', sans-serif; color: #000;
    box-shadow: 0 0 20px #00d2ff, 0 0 40px #00d2ff;
    opacity: 0;
}

/* Vị trí ban đầu của 5 mảnh (bay từ ngoài vào) */
.frag-e { top: -100px; left: 130px; animation-delay: 0s !important; }
.frag-a { top: 60px; right: -100px; animation-delay: 0.2s !important; }
.frag-b { bottom: -100px; right: 20px; animation-delay: 0.4s !important; }
.frag-d { bottom: -100px; left: 20px; animation-delay: 0.6s !important; }
.frag-c { top: 60px; left: -100px; animation-delay: 0.8s !important; }

/* Animation: Xuất hiện và bay vòng vòng thu hẹp dần vào tâm */
.is-merging .memory-fragment {
    animation: fly-to-center 5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fly-to-center {
    0% { opacity: 0; transform: scale(0.5) rotate(0deg); }
    20% { opacity: 1; transform: scale(1) rotate(90deg); filter: brightness(1); }
    80% { opacity: 1; top: 130px; left: 130px; transform: scale(0.8) rotate(720deg); filter: brightness(2); }
    100% { opacity: 0; top: 130px; left: 130px; transform: scale(0) rotate(1080deg); }
}

/* Lõi sáng trung tâm (phình to ra nuốt chửng mọi thứ) */
.merge-core {
    position: absolute;
    top: 130px; left: 130px;
    width: 40px; height: 40px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 50px #fff, 0 0 100px #00d2ff, 0 0 200px #00d2ff;
    opacity: 0;
    transform: scale(0);
}

.is-merging .merge-core {
    animation: core-explode 4s forwards;
    animation-delay: 4.5s; /* Chờ các mảnh bay vào tâm xong mới nổ */
}

@keyframes core-explode {
    0% { opacity: 0; transform: scale(0); }
    20% { opacity: 1; transform: scale(1); }
    80% { opacity: 1; transform: scale(1.5); }
    100% { opacity: 1; transform: scale(100); } /* Bùng nổ phủ kín màn hình */
}

/* Flashbang trắng xóa để mượt mà chuyển sang màn hình Văn phòng đời thực */
#merge-flashbang {
    position: absolute; inset: 0; background: white;
    opacity: 0; pointer-events: none; transition: opacity 0.5s;
    z-index: 99;
}
.trigger-flash { opacity: 1 !important; }

/* =========================================
   HIỆU ỨNG TRẠNG THÁI LƠ LỬNG VÀ PHÂN RÃ
========================================= */

/* Xuyên thấu để người chơi vẫn bấm được chuột lúc hội thoại */
#memory-merge-screen {
    pointer-events: none; 
}

/* 1. Trạng thái bay lơ lửng chờ đợi */
.is-floating .memory-fragment {
    opacity: 1; /* Hiện rõ 5 mảnh */
    animation: float-gently 2.5s ease-in-out infinite alternate;
}
.is-floating .frag-e { animation-delay: 0s; }
.is-floating .frag-a { animation-delay: 0.3s; }
.is-floating .frag-b { animation-delay: 0.6s; }
.is-floating .frag-d { animation-delay: 0.9s; }
.is-floating .frag-c { animation-delay: 1.2s; }

@keyframes float-gently {
    0% { transform: translateY(0px) scale(1); filter: brightness(1); }
    100% { transform: translateY(-15px) scale(1.1); filter: brightness(1.5); box-shadow: 0 0 30px #00d2ff, 0 0 50px #00d2ff;}
}

/* 2. Hiệu ứng CTV phân rã thành các dòng code xanh */
/* 1. Hình ảnh nhân vật chuyển xanh và bị xóa dần từ dưới lên */
.sprite-disintegrate {
    animation: digital-fade 3s forwards linear;
}

@keyframes digital-fade {
    0% { opacity: 1; filter: brightness(1) sepia(0); clip-path: inset(0 0 0 0); }
    20% { filter: brightness(1.5) sepia(1) hue-rotate(90deg) contrast(2); clip-path: inset(0 0 0 0); } /* Chuyển màu code xanh lá */
    100% { opacity: 0; filter: brightness(2) sepia(1) hue-rotate(90deg) contrast(2); clip-path: inset(100% 0 0 0); } /* Xóa dần từ dưới lên */
}

/* 2. Style cho các hạt nhị phân (0 và 1) bay ra từ cơ thể */
.binary-particle {
    position: absolute;
    color: #00ff00; /* Màu xanh hacker */
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: 16px;
    pointer-events: none; /* Không cản trở click chuột */
    z-index: 9999;
    text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00; /* Phát sáng nhẹ */
    animation: particle-float forwards linear;
}

/* Hiệu ứng bay lơ lửng và mờ dần */
@keyframes particle-float {
    0% { opacity: 1; transform: translateY(0) translateX(0) scale(1.2); }
    100% { opacity: 0; transform: translateY(-80px) translateX(var(--drift)) scale(0.5); }
}

@keyframes digital-dust {
    0% { filter: brightness(1) sepia(0); opacity: 1; transform: scale(1); clip-path: inset(0 0 0 0); }
    20% { filter: brightness(2) sepia(1) hue-rotate(90deg); opacity: 0.9; transform: skewX(5deg); }
    40% { filter: blur(2px) contrast(3); opacity: 0.6; transform: skewX(-5deg) translateY(-10px); clip-path: inset(10% 0 0 0); }
    60% { filter: blur(4px) drop-shadow(0 -20px 0 #0f0); opacity: 0.3; transform: translateY(-20px); clip-path: inset(40% 0 0 0); }
    100% { filter: blur(10px) drop-shadow(0 -50px 0 #0f0); opacity: 0; transform: translateY(-50px); clip-path: inset(100% 0 0 0); }
}

/* --- GIAO DIỆN CREDIT (TRẮNG ĐEN BASIC) --- */
#credit-screen {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #000;
    color: #fff;
    z-index: 99999;
    overflow: hidden;
    display: flex;
    justify-content: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Đảm bảo hidden là biến mất hoàn toàn */
.hidden { display: none !important; }

.credit-content {
    width: 80%;
    max-width: 600px;
    text-align: center;
    position: absolute;
    top: 100%; /* Bắt đầu từ dưới mép màn hình */
    /* Chạy đúng 28 giây */
    animation: scrollUp 28s linear forwards; 
    will-change: transform;
}

@keyframes scrollUp {
    0% { transform: translateY(0); }
    100% { transform: translateY(calc(-100% - 100vh)); } /* Chạy hết chiều cao chính nó + chiều cao màn hình */
}

/* --- PHÁO HOA & CẢM ƠN --- */
#thank-you-screen {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: #000;
    display: flex; /* Sử dụng flex để căn giữa chữ */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    z-index: 100000;
    pointer-events: none;
}

#thank-you-screen.show { 
    opacity: 1; 
    pointer-events: auto;
}

.thank-you-text { 
    font-size: 3.5rem; 
    color: #fff; 
    text-align: center;
    text-shadow: 0 0 20px rgba(255,255,255,0.5);
    z-index: 10;
}

/* Hiệu ứng pháo hoa basic */
.firework {
    position: absolute;
    width: 4px; height: 4px;
    background: transparent;
    box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
    animation: fireworkExplode 2s infinite;
}

@keyframes fireworkExplode {
    0% { transform: translateY(100vh); width: 4px; opacity: 1; }
    50% { transform: translateY(20vh); opacity: 1; }
    100% { 
        transform: translateY(20vh);
        box-shadow: -100px -100px #fff, 100px -100px #fff, -100px 100px #fff, 100px 100px #fff,
                    0 -150px #fff, 0 150px #fff, -150px 0 #fff, 150px 0 #fff;
        opacity: 0; 
    }
}

/* 1. Giãn cách dưới tiêu đề chính (h1) */
.credit-title {
    margin-bottom: 20px; 
}

/* 2. Giãn cách dưới lời cảm ơn (h2) đẩy các nhóm xuống xa hơn */
.credit-subtitle {
    margin-bottom: 50px; 
    line-height: 1.5; /* Giúp bản thân nhiều dòng chữ trong h2 không bị dính vào nhau */
}

/* 3. Giãn cách giữa các khối lớn (Đội ngũ PT, Lồng tiếng...) */
.credit-section {
    margin-bottom: 40px; 
}

/* 4. Giãn cách giữa chữ "ĐỘI NGŨ..." (h3) và danh sách tên ở dưới */
.credit-section h3 {
    margin-bottom: 15px; 
}

/* 5. Giãn cách giữa các dòng tên của Đội ngũ phát triển */
.credit-section p {
    margin-bottom: 10px;
}

/* 6. Giãn cách riêng cho xịn xò phần Lồng tiếng (vì có 2 dòng/người) */
.voice-cast p {
    margin-bottom: 20px; 
}

/* ===================================================
   CHỐNG LỖI KÉO NHẦM GIAO DIỆN VÀ BÔI ĐEN CHỮ (TÒA A)
   =================================================== */

/* 1. Cấm bôi đen chữ trên toàn bộ Tòa A */
#toa-a {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

/* 2. Biến thanh thông số (Thời gian, Điểm, Mạng) thành "tàng hình" với chuột. 
   Chuột sẽ xuyên qua nó, không bao giờ túm nhầm được nữa */
#toa-a .game-header {
    pointer-events: none !important;
}

/* 3. Ngăn túm nhầm cái chữ "Sách Dày" bên trong cuốn sách tạ */
.conveyor-book * {
    pointer-events: none !important;
}