/* =========================================
   MOBILE.CSS - FINAL LAYOUT (4 BẢNG DƯỚI DỰ ĐOÁN)
   ========================================= */

@media screen and (max-width: 1024px) {

    /* 1. CẤU TRÚC FLEX DỌC (Cho phép sắp xếp lại thứ tự) */
    .hacker-layout {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 100vh;
        overflow-y: auto !important;
        padding: 5px !important;
        gap: 10px !important;
    }

    /* --- SẮP XẾP THỨ TỰ HIỂN THỊ (ORDER) --- */
    
    /* Vị trí 1: Header */
    .sys-header {
        order: 1;
        flex-wrap: wrap !important;
        height: auto !important;
        padding: 10px 5px !important;
        gap: 5px;
    }

    /* Vị trí 2: Game Center (Bài + Robot Dự đoán) */
    .game-center {
        order: 2;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        flex: none !important;
        padding-bottom: 20px !important;
    }

    /* Vị trí 3: FOOTER (4 BẢNG THỐNG KÊ) -> ĐƯA LÊN ĐÂY */
    .sys-footer {
        order: 3;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Chia 2 cột */
        grid-template-rows: 150px 150px !important; /* Chiều cao cố định cho đẹp */
        height: auto !important;
        gap: 8px !important;
        width: 100% !important;
        margin-top: 5px !important;
    }

    /* Vị trí 4: Matrix Code (Chữ chạy xanh) -> Đẩy xuống dưới */
    .panel-right {
        order: 4;
        width: 100% !important;
        height: auto !important;
        min-height: 120px;
        margin-top: 10px !important;
    }

    /* Vị trí 5: System Log (Log hệ thống) -> Xuống cuối cùng */
    .panel-left {
        order: 5;
        width: 100% !important;
        height: 200px !important; /* Tăng chiều cao để xem log dễ hơn */
        margin-bottom: 30px !important;
    }

    /* --- CÁC FIX GIAO DIỆN KHÁC (GIỮ NGUYÊN) --- */

    /* Header */
    .brand-box { width: 100%; text-align: center; }
    .sys-header h1 { font-size: 1.1rem !important; width: 100%; text-align: center; }
    .sys-status { width: 100%; justify-content: center; }

    /* Game (Bài & VS) */
    .battle-wrapper { width: 100% !important; padding: 0 !important; gap: 4px !important; }
    .side-container { width: 48% !important; padding: 5px 2px !important; }
    .cards-area { gap: 2px !important; margin-top: 5px !important; }
    .card-slot { width: 30px !important; height: 45px !important; }
    .card-front, .card-back { font-size: 0.7rem !important; }
    .score-box { font-size: 1.5rem !important; margin-top: 5px !important; }

    /* VS Badge */
    .vs-container { width: 50px !important; height: 50px !important; }
    .vs-text { font-size: 1.5rem !important; }
    .vs-ring { border-width: 1px !important; }

    /* Robot Dự đoán */
    .prediction-wrapper {
        width: 100% !important;
        height: auto !important;
        min-height: 80px;
        padding: 10px 5px !important;
        margin-top: 15px !important;
        border-radius: 15px !important;
    }
    .ai-box, .pred-gauge { width: 60px !important; height: 60px !important; }
    .ai-img { width: 80% !important; height: 80% !important; }
    .pred-result { font-size: 2rem !important; }
    .pred-label { font-size: 0.6rem !important; }
    .gauge-text { font-size: 0.9rem !important; }

     #matrixCode { height: 100px !important; flex: none !important; }
    .footer-panel { border: 1px solid #333; background: #050505; }
    
    .bead-grid {
        /* THAY ĐỔI: Chuyển từ repeat(5, 1fr) thành repeat(6, 1fr) */
        grid-template-rows: repeat(6, 1fr) !important;
        grid-template-columns: repeat(6, 1fr) !important;
        grid-auto-flow: column !important;
    }
    
    .bead-cell {
        direction: ltr !important;
    }

    /* =========================================
       BỔ SUNG: SẮP XẾP LẠI FOOTER & SỬA LỖI BIG ROAD
       ========================================= */

    /* --- 1. SẮP XẾP LẠI VỊ TRÍ 4 Ô --- */
    #beadPlatePanel { grid-column: 1; grid-row: 1; }
    #waveTrendPanel { grid-column: 1; grid-row: 2; }
    #bigRoadPanel { grid-column: 2; grid-row: 1; }
    #transLogPanel { grid-column: 2; grid-row: 2; }

    /* --- 2. SỬA LỖI HIỂN THỊ BIG ROAD BỊ HẸP --- */
    .tool-road-col {
        max-width: none !important; /* Bỏ giới hạn chiều rộng */
        flex: 1; /* Cho phép các cột tự chia đều không gian */
    }

    /* === MÃ MỚI: CSS CHO KHỐI STATS TRÊN MOBILE === */
    .stats-wrapper {
        width: 100% !important;
        padding: 0 5px !important;
        gap: 8px !important;
        margin-top: 15px !important;
    }

    .stat-box {
        height: 60px !important; /* Giảm chiều cao một chút */
    }

    .stat-value {
        font-size: 1.5rem !important; /* Giảm kích thước số */
    }

    .stat-label {
        font-size: 0.6rem !important; /* Giảm kích thước chữ */
        letter-spacing: 1px !important;
    }
}