/* 
   ==========================================================================
   ARCHITECTURE CSS - Kiến trúc DOM 4 Tầng & Desktop Behavior
   ========================================================================== 
*/

/* 
   TẦNG 1: THE VIEWPORT 
   Khóa chặt khung nhìn, giống như một màn hình máy tính desktop.
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #050a0f;
    /* Đen sâu dập toàn bộ viền trắng */
}

#app-root {
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* TUYỆT ĐỐI NGHIÊM CẤM CUỘN Ở ĐÂY */
    background: url('../assets/images/bg-main.png') no-repeat center center;
    background-size: cover;
    position: relative;
    display: flex;
    /* Neo toàn bộ Box sát lên mép trên màn hình (thay vì lơ lửng giữa theo mặc định) */
    align-items: flex-start;
    justify-content: center;
}

/* Overlay mờ đen phủ toàn màn hình để tôn chiếc hộp lên */
#app-root::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 15, 20, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1;
}

/* 
   TẦNG 2: CHIẾC HỘP TRUNG TÂM (THE MAIN CONTAINER) 
   Cửa sổ ứng dụng Launcher lơ lửng ở giữa (Full height)
*/
#master-box {
    position: relative;
    z-index: 2;
    /* BỐ CỤC CHUẨN TỶ LỆ VÀNG 1600x900 - BẤT DI BẤT DỊCH BỀ NGANG NỘI DUNG */
    width: 1600px;
    min-width: 1600px; /* KHÓA CỨNG: Ngăn chặn Flexbox tự động bóp méo khi thu nhỏ cửa sổ trình duyệt */
    flex-shrink: 0; /* TRÁNH DOUBLE SHRINK: Chỉ dùng Javascript transform scale để thu nhỏ hình ảnh, không bóp méo cấu trúc */
    /* Khóa chặt chiều cao bằng màn hình để bắt buộc các Cột Bên Trong (viewport, sidebar) sinh Scrollbar ảo */
    height: calc(100vh / var(--app-scale, 1));
    max-height: calc(100vh / var(--app-scale, 1));
    /* Khi bị zoom nhỏ, Tâm Zoom sẽ lấy mạn trên (Top) làm mốc để bảo toàn vị trí, không zoom tụt về rốn (Center) */
    transform-origin: top center;
    /* Loại bỏ 'margin: 0 auto' để kích hoạt tính năng tự tràng viền của Flex justify-content: center ở thẻ cha */
    display: flex;

    /* Box nền hoàn toàn trong suốt nhường chỗ cho ảnh nền gốc */
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Cột Trái (Sidebar - Z-index: 10 để đè bóng lên Header kéo góc 3D) */
#control-station {
    flex: 0 0 320px;
    height: 100%;
    max-height: 100%;
    z-index: 10;
    position: relative;

    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;

    padding: 20px 15px;
    gap: 1px;

    /* Nền Lụa Xanh Rêu, Giảm độ tối gradient để nhìn rõ màu lá rêu tươi */
    background: linear-gradient(rgba(10, 35, 15, 0.4), rgba(5, 20, 10, 0.8)), url('../assets/images/green_silk.png') center/cover;
    background-color: #0b1c11;

    border-right: 2px solid rgba(0, 0, 0, 0.9);
    /* Giảm Vignette bên trong quá dày sập đen, giữ bóng đổ xuất sắc tạt mép ngoài */
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.9), 15px 0 25px rgba(0, 0, 0, 0.9);
}

#control-station::-webkit-scrollbar {
    display: none;
}

/* Đường rách viền giả lụa bên Sidebar (Jagged Silk Edge) */
#control-station::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 6px;
    background: url('data:image/svg+xml;utf8,<svg width="6" height="12" viewBox="0 0 6 12" xmlns="http://www.w3.org/2000/svg"><path d="M0 0 L6 6 L0 12 Z" fill="rgba(0,0,0,0.6)"/></svg>') repeat-y;
    pointer-events: none;
}

/* Cột Phải (App Wrapper) */
#app-wrapper {
    flex: 1;
    min-width: 0; /* KHÓA: Ngăn content bên trong bung vỡ container Flex */
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 0;
    z-index: 5;
    /* Loại bỏ background phủ nguyên khối để nhường không gian cho Full-width Header */
}

/* Sidebar Phải (Nhân vật Elf) - Cố định cùng tỷ lệ với Master Box */
#right-sidebar {
    width: 25%;
    max-width: 450px;
    height: 100%;
    z-index: 10;
    pointer-events: none; 
}

#right-sidebar .elf-slide {
    pointer-events: auto; /* Re-enable clicks on actual characters if needed */
}

/* Tầng 4a: Thanh Menu ngang (Header) */
#top-nav {
    flex: 0 0 90px;
    width: 100%;
    position: relative;
    padding: 0 30px;
    display: flex;
    align-items: center;
}

/* Dải nền chạy ngang toàn màn hình */
#top-nav::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    /* Dùng kích thước cực đại (gấp 3 lần) và kéo giãn ngược về bên trái để cover 100% lề màn hình */
    width: 300%;
    left: -100%;
    background: url('../assets/images/T-Menu.png') center/cover;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.8);
    z-index: -1;
}

/* Đường kẻ phân cách sáng ở giữa, mờ 2 mép biên */
#top-nav::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 300%;
    left: -100%;
    height: 2px;
    background: var(--metallic-gold);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
    z-index: -1;
}

#dynamic-viewport {
    flex: 1;
    min-width: 0; /* Bắt buộc nội dung không được phình to container */
    width: 100%;
    padding: 30px 40px 60px 40px;
    /* CẤP PHÉP CUỘN DỌC - Dùng thanh cuộn tùy chỉnh (không tốn width) */
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    /* Ẩn scrollbar trên Firefox/IE */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* Ẩn scrollbar trên Chrome/Safari/Edge */
#dynamic-viewport::-webkit-scrollbar {
    display: none;
}

/* Footer nhỏ */
#app-footer {
    position: absolute;
    bottom: 10px;
    left: 40px;
    right: 40px;
    text-align: center;
    pointer-events: none;
}

.footer-text {
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0.5;
}

#right-sidebar {
    position: relative;
    flex: 0 0 320px;
    min-height: 100%;
    z-index: 10;
    pointer-events: none;
    animation: floatCharacter 6s ease-in-out infinite;
    display: flex;
    align-items: center; /* Center character vertically */
    justify-content: center;
}

#floating-character,
.elf-slide {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(-10px 10px 20px rgba(0, 0, 0, 0.8));
}

@keyframes floatCharacter {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0);
    }
}

/* --- Action Buttons Bằng Ảnh --- */
.action-btn-img {
    display: block;
    width: 100%;
    /* Theo tỷ lệ ảnh gốc, Tăng kích thước nút lơn hơn so với 70px cũ */
    height: 90px;
    background-color: transparent;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.action-btn-img:hover {
    transform: scale(1.05);
    /* Poup nhẹ khi Hover */
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.5));
}

.action-btn-img:active {
    transform: scale(0.95);
}

/* Ẩn các menu item dành riêng cho mobile trên giao diện Desktop */
.mobile-only-nav {
    display: none !important;
}

.btn-tai-game {
    background-image: url('../assets/images/BT-TaiGame.png');
    /* Hiệu ứng nhịp thở thu hút sự chú ý chỉ dành riêng cho Nút Tải Game */
    animation: pulseDownloadBtn 2.5s infinite ease-in-out;
}

/* Keyframes chớp sáng và phồng lên cho riêng Tải Game - Phiên bản Rồng Lửa Sang Trọng */
@keyframes pulseDownloadBtn {
    0% {
        transform: scale(1);
        filter: brightness(1) contrast(1) drop-shadow(0 0 5px rgba(255, 140, 0, 0.2)) drop-shadow(0 0 15px rgba(200, 50, 0, 0.1)) drop-shadow(0 0 5px rgba(100, 10, 0, 0));
    }

    50% {
        transform: scale(1.05);
        /* Phóng to vừa đủ, không quá lố */
        /* Tăng sáng bản thân bức ảnh (brightness/contrast) KẾT HỢP với Hào Quang Ma Thuật (Magic Aura) */
        filter: brightness(1.25) contrast(1.1) drop-shadow(0 0 15px rgba(255, 180, 50, 0.7)) drop-shadow(0 0 25px rgba(255, 60, 0, 0.5)) drop-shadow(0 0 35px rgba(100, 10, 0, 0.6));
    }

    100% {
        transform: scale(1);
        filter: brightness(1) contrast(1) drop-shadow(0 0 5px rgba(255, 140, 0, 0.2)) drop-shadow(0 0 15px rgba(200, 50, 0, 0.1)) drop-shadow(0 0 5px rgba(100, 10, 0, 0));
    }
}

.btn-tai-game:hover {
    animation-play-state: paused;
    /* Tạm dừng nhịp thở khi rê chuột, giữ hiệu ứng hover nguyên bản của class mẹ */
}

.btn-cong-dong {
    background-image: url('../assets/images/BT-Congdong.png');
}

/* --- Sidebar Logo Thay Thế Countdown --- */
.sidebar-logo-block {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
}

.sidebar-logo {
    width: 220px;
    /* Thu nhỏ Logo lại cho vừa vặn Sidebar */
    max-width: 90%;
    height: auto;
    filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.3));
    /* Phát hào quang mờ */
    transition: transform 0.3s ease, filter 0.3s ease;
}

.sidebar-logo:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 25px rgba(212, 175, 55, 0.6));
}

/* Logo Thu nhỏ Nhúng Trong Khối Server - Chỉ Hiện Trên Mobile */
.fs-mobile-logo {
    display: none;
    width: 45px;
    height: auto;
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.4));
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤768px)
   Switch from fixed 1600px scaled layout to fluid mobile layout
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    html,
    body {
        overflow: auto;
        overflow-x: hidden;
        height: auto;
        min-height: 100vh;
    }

    #app-root {
        overflow: auto;
        overflow-x: hidden;
        height: auto;
        min-height: 100vh;
        display: block;
    }

    #app-root::before {
        position: fixed;
    }

    /* Master box — fluid width, vertical stack */
    #master-box {
        width: 100% !important;
        min-width: 0 !important; /* Gỡ bỏ KHÓA CỨNG 1600px trên Desktop để Mobile bung theo % chuẩn */
        min-height: 100vh;
        height: auto !important;
        transform: none !important;
        flex-direction: column;
    }

    /* Sidebar — Compact mobile layout */
    #control-station {
        flex: 0 0 auto;
        height: auto;
        width: 100%;
        padding: 5px;
        /* Compressed from 10px */
        gap: 0;
        /* Remove gap so exact % widths work perfectly */
        border-right: none;
        border-bottom: 2px solid rgba(0, 0, 0, 0.9);
        box-shadow: none;

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: space-between;
    }

    #control-station::after {
        display: none;
    }

    /* Row 1: Logo + Server Info + Timer */
    /* Ẩn cục Logo độc lập ngoài Sidebar (Khối 1) thay vì hiển thị 25% */
    #control-station .sidebar-logo-block {
        display: none !important;
    }

    #frontend-server-selector {
        width: 40%; /* Thu hẹp từ 58% xuống 40% để nhường chỗ cho khối Sự Kiện */
        margin: 0 !important;
        padding: 4px 4px !important;
        border-radius: 4px !important;
        box-shadow: none !important;
    }

    /* Hiển thị Logo Mini bên trong khối Chọn Máy Chủ (Chỉ Mobile) */
    .fs-mobile-logo {
        display: block !important;
        width: 32px; /* Nhỏ hơn chút cho vừa mảng 40% */
    }

    /* Label nhỏ gọn trên mobile */
    #frontend-server-selector>div:nth-child(4) {
        font-size: 7px !important;
        letter-spacing: 0.5px !important;
        margin-bottom: 3px !important;
    }

    #fs-current-server-name {
        font-size: 10px !important;
        margin-bottom: 1px !important;
    }

    #fs-fake-online {
        font-size: 11px !important;
    }

    #fs-online-icon {
        width: 10px !important;
        height: 10px !important;
    }

    #server-launch-timer {
        width: 33%; /* Thu hẹp từ 42% xuống 33% */
        margin: 0 !important;
        padding: 2px !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-radius: 4px !important;
    }

    #server-launch-title {
        font-size: 9px !important;
        margin-bottom: 0px !important;
        white-space: normal; /* Cho phép rớt dòng nếu màn hình quá nhỏ */
        text-align: center;
        letter-spacing: 0 !important;
        line-height: 1.1;
    }

    .server-countdown {
        font-size: clamp(10px, 3vw, 15px) !important;
        gap: 0 !important;
    }

    /* Countdown digit columns: reset fixed 45px width so they fit inside 33% timer block */
    .server-countdown > div {
        width: auto !important;
        min-width: 0 !important;
        padding: 0 1px !important;
    }

    .server-countdown > div > span:last-child {
        font-size: clamp(6px, 1.5vw, 8px) !important;
        margin-top: 0 !important;
    }

    .server-countdown > span {
        padding-bottom: 4px !important;
        margin: 0 -1px !important;
    }

    /* Remove bottom border/margin from micro-blocks on mobile */
    #control-station .micro-block:not(:last-child) {
        border-bottom: none !important;
        box-shadow: none !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /* --- Khối Sự Kiện In-Game Mobile Layout (Trắng form ngang) --- */
    #control-station #sidebar-event-widget {
        width: 26%; /* Chiếm phần cuối cùng trên dòng ngang */
        margin: 0 !important;
        padding: 2px 4px !important;
        border-radius: 4px !important;
        display: flex !important; /* Forces block to flex container if it was block */
        flex-direction: column;
        justify-content: center;
        background: transparent !important; /* Xóa nền đen xám */
        border: none !important;
    }

    /* Ép title sự kiện nhỏ gọn */
    #control-station #sidebar-event-widget > div:first-child {
        font-size: clamp(8px, 2.5vw, 11px) !important; /* Scale chữ linh hoạt theo bề ngang đt */
        letter-spacing: 0 !important;
        margin-bottom: 2px !important;
        text-align: center;
        line-height: 1.2;
        white-space: normal;
    }

    #control-station #sidebar-event-widget .desktop-event-title {
        display: none !important;
    }

    #control-station #sidebar-event-widget .mobile-event-title {
        display: inline !important;
    }
    
    /* Box chứa list item event */
    #sidebar-event-list {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    
    #sidebar-event-list .event-item {
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Ẩn các sự kiện số 2, số 3, chỉ giữ lại sự kiện top 1 */
    #sidebar-event-list .event-item:not(.event-item-0) {
        display: none !important;
    }

    /* Bố cục dọc cho sự kiện top 1 */
    #sidebar-event-list .event-item-0 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1px !important;
    }

    /* Ẩn cục Dot nhấp nháy trên sự kiện mobile cho gọn */
    #sidebar-event-list .event-item-0 .event-dot {
        display: none !important;
    }

    #sidebar-event-list .event-name {
        font-size: clamp(9px, 2.8vw, 12px) !important;
        text-align: center;
        white-space: normal !important;
        line-height: 1.2;
        color: #fff !important; /* Đẩy sáng chữ tên sự kiện */
        text-shadow: 0 0 5px rgba(0,0,0,0.8);
    }
    
    #sidebar-event-list .event-time {
        font-size: clamp(9px, 2.8vw, 13px) !important;
        font-weight: 900;
        margin-top: 1px;
        letter-spacing: 0.5px;
    }

    /* Ẩn hoàn toàn khối chứa 2 nút ảnh trên cột trái ở giao diện điện thoại */
    #control-station #action-buttons {
        display: none !important;
    }

    #top-nav {
        flex: 0 0 50px;
        padding: 0 12px;
    }

    #top-nav .nav-menu {
        overflow-x: auto;
        /* Cho phép cuộn ngang thẻ menu */
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        display: flex;
        /* Đảm bảo menu items dàn ngang */
        justify-content: space-between;
        /* Dàn đều các nút ra toàn màn hình */
        gap: 5px;
    }

    #top-nav .nav-tab,
    #top-nav .nav-link {
        font-size: 11px;
        padding: 4px 8px;
        flex: 1 1 auto !important;
        /* Đẩy các nút dàn đều nhau theo tỷ lệ và đè bẹp dynamics.css */
        text-align: center;
        /* Chữ căn giữa nút */
    }

    #top-nav .nav-title,
    #top-nav .nav-sub {
        font-family: var(--font-menu) !important;
    }

    .hide-on-mobile {
        display: none !important;
    }

    /* --- Giao Diện Chọn Máy Chủ Dạng Lưới Ngang Cho Mobile (Tối đa 3 card 1 hàng) --- */
    #frontend-server-list {
        gap: 8px !important; 
        padding: 5px !important;
    }

    #frontend-server-list .server-card {
        width: 31% !important; /* Đảm bảo 3 thẻ nhét vừa 1 hàng ngang (31% * 3 + gap) */
        min-width: 100px !important; /* Ngăn thẻ bị ép biến dạng quá mức */
        border-width: 1px !important;
    }
    
    #frontend-server-list .server-card .sc-banner {
        height: 55px !important; /* Cắt bớt chiều cao banner để làm thẻ nhỏ gọn lại */
    }

    #frontend-server-list .server-card .sc-badge {
        font-size: 6px !important;
        padding: 2px 4px !important;
        top: 4px !important;
        right: 4px !important;
    }

    /* Thiết kế Logo nằm ở trên, Chữ nằm ở dưới bên trong từng thẻ để tiết kiệm không gian ngang */
    #frontend-server-list .server-card .sc-info-wrapper {
        padding: 6px 4px !important;
        gap: 4px !important;
        flex-direction: column !important; /* Xếp dọc logo và chữ */
        text-align: center;
        align-items: center !important;
    }

    #frontend-server-list .server-card .sc-logo {
        width: 32px !important;
        height: 32px !important;
        margin: 0 auto;
        border-radius: 8px !important;
    }

    #frontend-server-list .server-card .sc-name {
        font-size: 10px !important;
        white-space: normal !important;
        line-height: 1.1;
    }

    #frontend-server-list .server-card .sc-sub {
        font-size: 8px !important;
        margin-top: 1px !important;
    }

    /* Gom nhóm text Online gọn gàng */
    #frontend-server-list .server-card .sc-status-bar {
        padding: 4px !important;
        flex-direction: column !important; /* Dồn 2 cục online thành trên/dưới */
        gap: 2px !important;
        justify-content: center !important;
    }
    
    #frontend-server-list .server-card .sc-online-text {
        font-size: 8px !important;
    }
    
    #frontend-server-list .server-card .sc-online-count {
        font-size: 10px !important;
    }
    
    #frontend-server-list .server-card .sc-online-icon {
        width: 10px !important;
        height: 10px !important;
    }
    /* --- Hết cấu hình lưới Máy Chủ --- */

    /* Hiển thị item menu dành riêng cho mobile trên điện thoại */
    #top-nav .nav-link.mobile-only-nav {
        display: inline-flex !important;
        justify-content: center;
    }

    /* Dynamic viewport — full width, readable */
    #dynamic-viewport {
        padding: 16px 12px 40px 12px;
        overflow-y: visible;
        overflow-x: hidden;
    }

    /* Hide Elf character / right sidebar on mobile */
    #right-sidebar {
        display: none !important;
    }

    /* Footer */
    #app-footer {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        padding: 20px 12px;
    }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — Small Mobile (≤480px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

    #control-station {
        padding: 8px;
        gap: 0;
    }

    .sidebar-logo {
        max-width: 55px !important;
        /* Compressed from 80px */
    }

    #frontend-server-selector,
    #server-launch-timer {
        padding: 4px !important;
    }

    .server-countdown {
        font-size: 11px !important;
    }

    #fs-current-server-name {
        font-size: 12px !important;
    }

    #top-nav {
        flex: 0 0 44px;
        padding: 0 8px;
    }

    #dynamic-viewport {
        padding: 10px 8px 30px 8px;
    }
}