/* css/bicanh.css */

/* --- KHUNG CHÍNH TOÀN MÀN HÌNH --- */
.bc-fullscreen-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #121212;
    background-image: url('/assets/chua.jpg'); /* Giữ nền game */
    background-size: cover;
    background-position: center;
    z-index: 150; /* Đặt z-index cao để nổi lên trên */
    color: #e0e0e0;
    display: flex; /* Sử dụng flex để dễ dàng căn chỉnh */
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.bc-fullscreen-panel.show {
    opacity: 1;
    visibility: visible;
}

/* --- HEADER --- */
.bc-header {
    position: relative; /* Dùng để định vị nút back */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    flex-shrink: 0;
    text-align: center;
}

/* Nút back sẽ được định vị tuyệt đối ở góc trái */
.bc-header .back-btn {
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 1.8em;
    background: none;
    border: none;
    color: #ccc;
    cursor: pointer;
    z-index: 2;
}
.bc-header .back-btn:hover {
    color: white;
}

/* Tiêu đề chính "Vạn Cảnh" */
.bc-header h2 {
    font-family: 'Cinzel', serif; /* Font nghệ thuật */
    font-size: 2em;
    color: #E48F45;
    margin: 0;
    letter-spacing: 2px;
}

/* Tiêu đề phụ */
.bc-header .subtitle {
    margin-top: 8px;
    font-size: 0.9em;
    color: #E48F45;
    font-style: italic;
}

/* --- KHUNG NỘI DUNG CHÍNH --- */
.bc-content-wrapper {
    flex-grow: 1;
    overflow-y: auto; /* Cho phép cuộn nếu nội dung dài */
    padding: 20px;
}

/* Lưới chứa các bí cảnh */
.bc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive */
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

/* --- ITEM BÍ CẢNH --- */
.bc-item {
    background: rgba(10, 10, 10, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 25px;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
    backdrop-filter: blur(5px);
}

.bc-item:hover {
    background: rgba(25, 25, 25, 0.7);
    border-color: #a89a6f;
    transform: translateY(-5px);
}

.bc-item-icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 15px;
}

.bc-item-name {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 10px;
}

.bc-item-desc {
    font-size: 0.9em;
    color: #bbb;
    line-height: 1.6;
}





/* Dán vào cuối file css/bicanh.css */

/* ========================================================== */
/* ============= CSS CHO DANH SÁCH BOSS ===================== */
/* ========================================================== */

.bl-fullscreen-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0c0a09; /* Nền tối hơn */
    background-image: url('/assets/chua.jpg');
    background-size: cover;
    background-position: center;
    z-index: 160; /* Cao hơn panel bí cảnh */
    color: #e0e0e0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.bl-fullscreen-panel.show {
    opacity: 1;
    visibility: visible;
}

/* Sử dụng lại style header chung */
.bl-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    flex-shrink: 0;
    text-align: center;
    border-bottom: 1px solid #a43a19;
}

.bl-header .back-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 15px;
    font-size: 1.8em;
    color: #ccc;
    cursor: pointer;
    z-index: 2;
}

.bl-header h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.5em;
    color: #E48F45;
    margin: 0;
}

/* Nội dung chính */
.bl-content-wrapper {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px 10px;
}

/* Thẻ thông tin của một Boss */
.boss-card {
    background: linear-gradient(180deg, rgba(28, 28, 32, 0.8) 0%, rgba(18, 18, 22, 0.8) 100%);
    border: 1px solid #444;
    border-radius: 8px;
    padding: 20px;
    margin: 0 auto 20px auto;
    max-width: 600px;
    backdrop-filter: blur(3px);
}

.boss-info-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.boss-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid #a43a19;
    flex-shrink: 0;
}

.boss-name {
    color: #ff9d72;
    font-size: 1.3em;
    margin: 0 0 5px 0;
}

.boss-description {
    font-size: 0.85em;
    color: #aaa;
    margin: 0;
}

/* Thanh máu */
.boss-health-bar {
    width: 100%;
    height: 24px;
    background-color: #4b0909;
    border-radius: 4px;
    position: relative;
    margin-bottom: 15px;
    border: 1px solid #a43a19;
    overflow: hidden;
}

.health-fill {
    height: 100%;
    background: linear-gradient(90deg, #e1361c 0%, #ff6b55 100%);
    border-radius: 3px;
}

.health-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8em;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px black;
}

/* Vật phẩm rơi ra */
.boss-drops {
    margin-bottom: 15px;
    color: #ccc;
    font-size: 0.9em;
}

.drop-item {
    display: inline-block;
    background-color: rgba(255,255,255,0.1);
    padding: 3px 8px;
    border-radius: 12px;
    margin: 0 5px;
    font-weight: bold;
    color: #63d4ff;
}

/* Lưới chỉ số */
.boss-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 20px;
    background-color: rgba(0,0,0,0.2);
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-size: 0.9em;
}
.boss-stats-grid span {
    color: #ccc;
}
.boss-stats-grid b {
    color: #4caf50;
    float: right;
}
.boss-stats-grid .stat-percent {
    color: #ffc107;
}

/* Nút Săn Boss */
.boss-action {
    text-align: center;
}
.boss-action-button {
    background: linear-gradient(180deg, #a43a19 0%, #7d260c 100%);
    border: 1px solid #ff9d72;
    color: white;
    padding: 12px 30px;
    font-size: 1.1em;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.boss-action-button:hover {
    box-shadow: 0 0 15px #ff9d72;
    background: linear-gradient(180deg, #bc4a26 0%, #a43a19 100%);
}

/* ========================================================== */
/* ============= CSS CHO PANEL CHIẾN ĐẤU ==================== */
/* ========================================================== */
/* ========================================================== */
/* ======== CSS CHO PANEL CHIẾN ĐẤU (BẢN NÂNG CẤP) ========== */
/* ========================================================== */

.br-fullscreen-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(12, 10, 9, 0.85); /* Tăng độ tối và mờ */
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(8px); /* Tăng độ mờ nền */
}

.br-fullscreen-panel.show {
    opacity: 1;
    visibility: visible;
}

.br-content {
    width: 95%;
    max-width: 550px;
    height: 90%;
    max-height: 750px;
    /* Nền gradient tạo chiều sâu */
    background: radial-gradient(circle, #3a312c 0%, #1e1a18 70%);
    border: 2px solid;
    /* Hiệu ứng viền vàng kim loại cho khung */
    border-image-source: linear-gradient(to bottom, #d4af37, #a47d2b);
    border-image-slice: 1;
    border-radius: 8px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    /* Đổ bóng màu vàng mờ xung quanh */
    box-shadow: 0 0 35px rgba(228, 176, 79, 0.2);
}

.br-header-title {
    text-align: center;
    color: #E4B83A; /* Màu vàng đậm hơn */
    font-family: 'Cinzel', serif;
    font-size: 1.8em;
    margin: 0 0 20px 0;
    /* Hiệu ứng chữ phát sáng */
    text-shadow: 0 0 5px rgba(228, 176, 79, 0.5), 0 0 10px rgba(228, 176, 79, 0.3);
}

.br-vs-section {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 20px;
    border-top: 1px solid rgba(255, 215, 0, 0.2);
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
    padding: 15px 10px;
}

.br-char-display {
    text-align: center;
}

.br-char-display img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid #777;
    margin-bottom: 8px;
    background: #111;
    transition: border-color 0.3s;
}
.br-char-display:hover img {
    border-color: #ffd700;
}

.br-char-display span {
    color: #e0e0e0;
    font-weight: bold;
    font-size: 1.1em;
}
.br-vs-section .br-vs-text {
    font-size: 2em;
    color: #E48F45;
    font-weight: bold;
    font-family: 'Cinzel', serif;
}

.br-log {
    flex-grow: 1;
    background-color: rgba(0,0,0,0.4);
    border-radius: 4px;
    padding: 15px;
    overflow-y: auto;
    font-size: 0.9em;
    border: 1px solid #444;
    margin-bottom: 15px;
}

/* Thêm icon cho dòng log chiến đấu */
.br-log p::before {
    font-family: "Font Awesome 5 Free"; /* Sử dụng Font Awesome */
    font-weight: 900;
    margin-right: 10px;
}
.br-log p.player-turn { color: #81c784; }
.br-log p.player-turn::before {
    content: "\f061"; /* Icon mũi tên sang phải */
}

.br-log p.boss-turn { color: #e57373; }
.br-log p.boss-turn::before {
    content: "\f060"; /* Icon mũi tên sang trái */
}

/* Tùy chỉnh thanh cuộn cho đẹp hơn */
.br-log::-webkit-scrollbar { width: 8px; }
.br-log::-webkit-scrollbar-track { background: #222; }
.br-log::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }
.br-log::-webkit-scrollbar-thumb:hover { background: #777; }


.br-result-text {
    text-align: center;
    font-size: 1.3em;
    font-weight: bold;
    color: #ffd700;
    margin: 0 0 10px 0;
    padding: 10px;
    background: rgba(255, 215, 0, 0.05);
    border-radius: 4px;
}
.br-rewards {
    text-align: center;
    color: #bbb;
    font-size: 0.9em;
    margin-bottom: 20px;
    line-height: 1.6;
}

.br-close-button {
    background: linear-gradient(180deg, #5a4a3a 0%, #3e3228 100%);
    border: 1px solid #c8a86c;
    color: #f0e0c8;
    padding: 12px;
    width: 100%;
    font-size: 1.2em;
    font-weight: bold;
    font-family: 'Cinzel', serif;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-shadow: 1px 1px 2px #111;
}

.br-close-button:hover {
    background: linear-gradient(180deg, #6c5844 0%, #5a4a3a 100%);
    color: #fff;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.boss-attempts {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(0,0,0,0.7);
    color: #ffd700;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: bold;
}

.boss-card {
    position: relative; /* Thêm để định vị cho .boss-attempts */
}




/* Style cho nút Săn BOSS khi bị vô hiệu hóa */
.boss-action-button:disabled {
    background: #333;
    border-color: #555;
    color: #888;
    cursor: not-allowed;
    box-shadow: none;
}

/* Style cho phần chữ đếm ngược */
.boss-countdown-timer {
    color: #ffde7a; /* Màu vàng cho thời gian */
    font-weight: bold;
    margin-left: 5px;
}



/* ========================================================== */
/* ============= CSS CHO BỘ ĐẾM NGƯỢC 10 giây ===================== */
/* ========================================================== */

#br-countdown-container {
    text-align: center;
    color: #ccc; /* Màu xám sáng, không quá nổi bật */
    font-size: 0.9em;
    font-style: italic;
    margin: 0 0 15px 0; /* Tạo khoảng cách với nút bên dưới */
    height: 20px; /* Đặt chiều cao cố định để không làm layout bị giật */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Khi không còn class hidden, nó sẽ mờ ảo hiện ra */
#br-countdown-container:not(.hidden) {
    opacity: 1;
}


/* Level trên avt */
.br-char-level {
    display: block;
    font-size: 0.9em;
    font-weight: bold;
    color: #ffde7a; /* Màu vàng cho cấp độ */
    margin-bottom: 8px; /* Khoảng cách giữa cấp độ và avatar */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

/* Đổi tên id cho rõ ràng hơn khi dùng cho cả boss và pvp */
#br-opponent-level {
    /* Không cần style riêng, dùng chung .br-char-level */
}


/* --- NÂNG CẤP KHUNG HIỂN THỊ NHÂN VẬT TRONG TRẬN ĐẤU --- */
.br-char-display {
    width: 45%; /* Chia đều không gian cho 2 bên */
}

/* --- THANH MÁU --- */
.br-health-bar-container {
    width: 100%;
    height: 22px;
    background-color: #333;
    border: 1px solid #555;
    border-radius: 4px;
    margin-top: 10px;
    position: relative;
    overflow: hidden;
}

.br-health-bar-fill {
    height: 100%;
    width: 100%; /* Bắt đầu với 100% máu */
    border-radius: 3px;
    /* Hiệu ứng chuyển động mượt mà khi thay đổi chiều rộng */
    transition: width 0.5s ease-out; 
}

/* Màu thanh máu cho người chơi (xanh) */
.br-char-display.player .br-health-bar-fill {
    background: linear-gradient(90deg, #28a745, #90ee90);
}

/* Màu thanh máu cho đối thủ (đỏ) */
.br-char-display.opponent .br-health-bar-fill {
    background: linear-gradient(90deg, #e1361c, #ff6b55);
}


.br-health-bar-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.85em;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px black;
    white-space: nowrap;
    z-index: 2; /* <-- THÊM DÒNG NÀY ĐỂ ĐƯA SỐ MÁU LÊN TRÊN */
}

/* --- ICON HÓA DÒNG LOG --- */
.br-log p {
    display: flex; /* Dùng flexbox để căn icon và text */
    align-items: center;
    gap: 10px; /* Khoảng cách giữa icon và text */
}

/* Tạo icon bằng pseudo-element ::before */
.br-log p::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    display: inline-block;
    width: 20px; /* Chiều rộng cố định để các dòng text thẳng hàng */
    text-align: center;
}

/* Icon cho các hành động khác nhau */
.br-log .log-hit::before { content: "\f061"; } /* Mũi tên (đòn đánh) */
.br-log .log-crit::before { content: "\f005"; color: #ffd700; } /* Ngôi sao (chí mạng) */
.br-log .log-dodge::before { content: "\f70c"; color: #81D4FA; } /* Lông vũ (né đòn) */
.br-log .log-counter::before { content: "\f021"; color: #F5A623; } /* Mũi tên xoay (phản đòn) */
.br-log .log-lifesteal::before { content: "\f004"; color: #ff8a80; } /* Trái tim (hút máu/hồi phục) */


/* --- NÂNG CẤP HIỂN THỊ LOG CHIẾN ĐẤU --- */

/* Bỏ các style cũ cho thẻ <p> trong log */
.br-log p {
    padding: 0;
    margin: 0 0 10px 0;
    border: none;
    display: block; /* Reset về block */
    color: #ccc; /* Màu chữ mặc định */
}
.br-log p::before {
    display: none; /* Bỏ icon cũ đi, chúng ta sẽ dùng cách mới */
}

/* Style cho mỗi dòng log mới (sẽ là thẻ <div>) */
.log-line {
    display: flex; /* Kích hoạt Flexbox */
    flex-wrap: wrap; /* Cho phép các thành phần tự động xuống dòng khi cần */
    align-items: center; /* Căn giữa các thành phần theo chiều dọc */
    gap: 4px 8px; /* Khoảng cách dọc và ngang giữa các thành phần */
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 8px;
    line-height: 1.5;
}

/* Nền cho mỗi phe */
.log-line.player-turn {
    background-color: rgba(40, 167, 69, 0.1); /* Nền xanh lá mờ */
}
.log-line.boss-turn {
    background-color: rgba(220, 53, 69, 0.1); /* Nền đỏ mờ */
}

/* Icon hành động */
.log-icon {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    flex-shrink: 0; /* Không cho icon bị co lại */
}
.player-turn .log-icon { color: #81c784; }
.boss-turn .log-icon { color: #e57373; }

/* Các thành phần trong dòng log */
.log-actor {
    font-weight: bold;
}
.player-turn .log-actor { color: #a5d6a7; }
.boss-turn .log-actor { color: #ef9a9a; }

.log-damage {
    font-weight: bold;
    color: #ffc107; /* Màu vàng cho sát thương */
    background-color: rgba(0,0,0,0.3);
    padding: 2px 6px;
    border-radius: 4px;
}
.log-damage.crit {
    color: #ff4d4d; /* Màu đỏ rực cho chí mạng */
    animation: pulse-crit 0.5s ease;
}

.log-heal {
    font-weight: bold;
    color: #28a745; /* Màu xanh lá cho hồi máu */
}

.log-special {
    font-style: italic;
    color: #85e0ff; /* Màu xanh băng cho các hiệu ứng đặc biệt */
}

@keyframes pulse-crit {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Dán vào cuối file css/bicanh.css */

/* ========================================================== */
/* ============= CSS CHO THÁP VẠN KIẾP ====================== */
/* ========================================================== */

.tvk-fullscreen-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/assets/chua.jpg');
    background-size: cover;
    background-position: center;
    z-index: 170;
    color: #e0e0e0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.tvk-fullscreen-panel.show {
    opacity: 1;
    visibility: visible;
}

.tvk-header {
    position: relative;
    text-align: center;
    padding: 20px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(158, 124, 244, 0.3);
}

.tvk-header .back-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 15px;
    font-size: 1.8em;
    color: #ccc;
    cursor: pointer;
}

.tvk-header h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.8em;
    color: #9E7CF4; /* Màu tím đặc trưng */
    margin: 0;
    text-shadow: 0 0 10px #9E7CF4;
}

.tvk-header .subtitle {
    font-style: italic;
    color: #c5b3e7;
    font-size: 0.9em;
    margin-top: 5px;
}

.tvk-content-wrapper {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
}

.tvk-main-content {
    max-width: 500px;
    margin: 0 auto;
    background: rgba(10, 5, 20, 0.7);
    border: 1px solid #9E7CF4;
    border-radius: 8px;
    padding: 25px;
    text-align: center;
    backdrop-filter: blur(5px);
}

.tvk-floor-title h3 {
    font-size: 1.5em;
    color: #E4B83A;
    margin: 0 0 20px 0;
}

.tvk-enemy-display {
    margin-bottom: 20px;
}

.tvk-enemy-display img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    margin-bottom: 10px;
    -webkit-filter: drop-shadow(0 0 10px #c5b3e7);
    filter: drop-shadow(0 0 10px #c5b3e7);
}

.tvk-enemy-display h4 {
    font-size: 1.3em;
    margin: 0;
    color: #ff9d72;
}

.tvk-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    background-color: rgba(0,0,0,0.3);
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-size: 0.9em;
}

.tvk-stats-grid span {
    text-align: left;
}

.tvk-stats-grid b {
    float: right;
    color: #81c784;
}

.tvk-rewards {
    margin-bottom: 25px;
    display: flex;
    gap: 20px;
    justify-content: center;
}

.reward-section {
    background-color: rgba(0,0,0,0.2);
    padding: 15px;
    border-radius: 4px;
    width: 45%;
    border: 1px solid #444;
}

.reward-section h5 {
    margin: 0 0 10px 0;
    color: #9E7CF4;
    font-size: 1em;
}
.reward-section p {
    margin: 0;
    font-size: 0.9em;
    color: #ffd700;
}

.tvk-challenge-button {
    background: linear-gradient(180deg, #8e44ad 0%, #612e7a 100%);
    border: 1px solid #c5b3e7;
    color: white;
    padding: 15px 40px;
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}

.tvk-challenge-button:hover {
    box-shadow: 0 0 20px #9E7CF4;
    background: linear-gradient(180deg, #a052c3 0%, #8e44ad 100%);
}