/**
 * 📱 MOBILE RESPONSIVE OVERRIDES v3.0
 * Volcanic Lords - Dynasty of the Isles
 * Target: Layar Ponsel (max-width: 768px)
 * PENTING: Semua fix berdasarkan kode JS yang sudah diteliti
 */

/* ===================================
   ANIMASI SLIDE-UP UNTUK MOBILE
=================================== */
@keyframes mobileSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes windowPop {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

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

    /* ===================================
       1. RESOURCE BAR (HUD ATAS)
    =================================== */
    .resource-bar {
        height: 56px !important;
        gap: 3px !important;
        padding: 0 5px !important;
        justify-content: space-between !important;
    }

    .hud-group.profile-hud {
        padding: 3px 5px !important;
        gap: 4px !important;
        border-radius: 8px !important;
        min-width: 0 !important;
        flex-shrink: 1 !important;
    }

    .profile-avatar {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
    }

    #player-power-hud {
        font-size: 0.6rem !important;
    }

    .resource-group {
        gap: 2px !important;
        flex-shrink: 1 !important;
    }

    .res-item {
        min-width: 44px !important;
        max-width: 58px !important;
        padding: 2px 3px !important;
        border-radius: 5px !important;
    }

    .res-item span {
        font-size: 0.6rem !important;
    }

    .res-item span img,
    .res-item span canvas,
    .res-item span svg {
        width: 13px !important;
        height: 13px !important;
    }

    .res-bar-bg {
        height: 3px !important;
        margin-top: 1px !important;
    }

    .gold-box,
    .diamond-box {
        min-width: 48px !important;
        padding: 3px 5px !important;
        font-size: 0.65rem !important;
        border-radius: 7px !important;
    }

    .gold-box img,
    .diamond-box img,
    .gold-box canvas,
    .diamond-box canvas,
    .gold-box svg,
    .diamond-box svg {
        width: 14px !important;
        height: 14px !important;
        margin-right: 2px !important;
    }

    .exp-bar-container {
        display: none !important;
    }

    /* ===================================
       2. CHRONICLE BAR (TICKER)
    =================================== */
    .chronicle-wrapper {
        width: 52% !important;
        height: 20px !important;
    }

    .chronicle-content {
        font-size: 0.58rem !important;
    }

    /* ===================================
       3. BOTTOM NAV BAR
    =================================== */
    .bottom-nav {
        height: 60px !important;
        padding: 0 5px !important;
    }

    .nav-item img,
    .nav-item svg,
    .nav-item canvas {
        width: 34px !important;
        height: 34px !important;
        display: block !important;
        margin: 0 auto !important;
        filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4)) !important;
    }

    .nav-item span {
        font-size: 7px !important;
        letter-spacing: 0.5px !important;
        margin-top: 1px !important;
    }

    #nav-btn-map {
        flex: 0 0 74px !important;
        height: 74px !important;
        transform: translateY(-22px) !important;
        background: radial-gradient(circle at center, #222, #000) !important;
        border-width: 2.5px !important;
        z-index: 100 !important; /* Ensure it is above other HUD elements */
    }

    #nav-btn-map img,
    #nav-btn-map canvas,
    #nav-btn-map svg {
        width: 48px !important;
        height: 48px !important;
        filter: drop-shadow(0 0 8px gold) !important; /* Simplified from double filter */
    }

    /* ===================================
       4. MODAL UTAMA - SLIDE DAR BAWAH
       #page-overlay -> .page-window
    =================================== */
    #page-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
        justify-content: center !important;
    }

    /* SEMUA mode modal: naik dari bawah, full width */
    .page-window {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        animation: mobileSlideUp 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) forwards !important;
        margin: 0 !important;
    }

    /* Mini mode (profil, inventory, dll) */
    .page-window.mini-mode {
        width: 94% !important;
        max-height: 85vh !important;
        height: auto !important;
        margin-top: 10vh !important; /* Beri ruang bernapas di atas */
    }

    /* Full content modes */
    .page-window.full-mode,
    .page-window.bursa-mode,
    .page-window.rank-mode,
    .page-window.event-mode,
    .page-window.train-mode,
    .page-window.chat-mode {
        height: 90vh !important;
        max-height: 90vh !important;
    }

    /* Mail - butuh lebih tinggi karena ada tabs */
    .page-window.mail-mode {
        height: 92vh !important;
        max-height: 92vh !important;
    }

    /* Alliance menu */
    .page-window.alliance-menu {
        height: 92vh !important;
        max-height: 92vh !important;
    }

    /* Castle / map modes */
    .page-window.castle,
    .page-window.pasar,
    .page-window.aliansi {
        height: 92vh !important;
        max-height: 92vh !important;
    }

    /* Judul modal */
    #page-title {
        font-size: 0.85rem !important;
        padding: 10px 44px !important;
        letter-spacing: 0.8px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Close button lebih mudah ditekan */
    .close-btn {
        width: 42px !important;
        height: 42px !important;
        font-size: 1.1rem !important;
        top: clamp(35px, 6vh, 50px) !important; /* TITAH BAGINDA: Naikkan drastis agar aman dari notch/poni HP modern */
        right: 15px !important;
        z-index: 9999999 !important;
    }

    /* ===================================
       5. ALIANSI - FIX LAYOUT
       Alliance menu menggunakan div dengan
       style inline. Kita override via class
       yang dipasang di .page-window.alliance-menu
       Juga fix tab bar agar bisa di-scroll
    =================================== */

    /* Tab bar aliansi - jadikan horizontal scroll */
    .page-window.alliance-menu #alliance-tab-bar,
    #alliance-tab-bar,
    #alliance-tab-list {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 6px !important;
    }

    #alliance-tab-bar::-webkit-scrollbar,
    #alliance-tab-list::-webkit-scrollbar { display: none !important; }

    #alliance-tab-bar > div,
    #alliance-tab-bar > button,
    #alliance-tab-list > button {
        flex-shrink: 0 !important;
        font-size: 0.6rem !important;
        padding: 6px 10px !important;
        white-space: nowrap !important;
    }

    /* Tab konten aliansi harus mengisi sisa space */
    #alliance-tab-content {
        flex: 1 !important;
        overflow-y: auto !important;
        min-height: 0 !important;
    }

    /* Menu header aliansi tidak tumpang tindih */
    #alliance-menu-header {
        flex-shrink: 0 !important;
    }

    /* ===================================
       6. MAIL - SIDEBAR -> TAB HORIZONTAL
       (Sudah dihandle di JS, tapi ini
       sebagai safety net untuk class lama)
    =================================== */
    .mail-sidebar-item {
        flex-shrink: 0 !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 8px 10px !important;
        min-width: 52px !important;
    }

    /* Mail list area harus scroll */
    .scroll-royal {
        overflow-y: auto !important;
        flex: 1 !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* ===================================
       7. MAIL READER OVERLAY
       (Dibuat via JS, position:fixed)
       Sudah ditangani di ui_social.js
       Ini hanya fallback CSS
    =================================== */
    #mail-reader-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    #mail-reader-overlay > div {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 92vh !important;
    }

    /* ===================================
       8. KONFIRMASI DIALOG
    =================================== */
    #confirm-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    #confirm-overlay .royal-modal {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        margin: 0 !important;
    }

    /* ===================================
       9. MAP CONTROLS
    =================================== */
    #map-controls {
        bottom: 100px !important;
        right: 15px !important;
        left: auto !important;
        gap: 8px !important;
        align-items: flex-end !important;
    }

    .map-ctrl-btn {
        width: auto !important;
        height: 40px !important;
        padding: 0 12px !important;
        border-radius: 20px !important;
        background: rgba(0, 0, 0, 0.9) !important;
        flex-direction: row-reverse !important; /* Icon on right */
        gap: 8px !important;
        justify-content: flex-end !important;
    }

    .map-ctrl-btn .ctrl-label {
        font-size: 0.65rem !important;
        display: block !important;
    }

    .map-ctrl-btn img,
    .map-ctrl-btn canvas,
    .map-ctrl-btn svg {
        width: 26px !important;
        height: 26px !important;
        filter: none !important; /* Performance: remove heavy filters inside small buttons */
    }

    /* ===================================
       10. HAMMER / WORKER HUD (KIRI)
    =================================== */
    #hammer-container {
        top: 125px !important;
        left: 6px !important;
        gap: 4px !important;
        padding: 5px !important;
        max-width: 185px !important;
    }

    /* ===================================
       11. MISSION HUD (QUEST TRACKER)
    =================================== */
    #mission-hud {
        top: 65px !important;
        left: 8px !important;
        min-width: 45px !important;
        max-width: 160px !important;
    }

    /* ===================================
       12. GAME CANVAS AREA
    =================================== */
    #game-canvas {
        top: 56px !important;
        bottom: 60px !important;
    }

    /* ===================================
       13. TOAST NOTIFIKASI
    =================================== */
    #toast-container {
        bottom: 75px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 90% !important;
        max-width: 360px !important;
    }

    .royal-toast {
        font-size: 0.8rem !important;
        padding: 10px 14px !important;
    }

    /* ===================================
       14. MARCH STATUS HUD
    =================================== */
    #march-status-container {
        top: 125px !important;
        left: 8px !important;
        max-width: 155px !important;
    }

    /* ===================================
       15. EVENT BADGE
    =================================== */
    .event-badge-pill {
        font-size: 0.52rem !important;
        padding: 3px 7px !important;
        max-width: 120px !important;
    }

    /* ===================================
       16. LOGIN PAGE
    =================================== */
    .login-overlay {
        align-items: flex-start !important;
        padding-top: 5vh !important;
    }

    .login-card {
        width: 93% !important;
        max-width: 380px !important;
        padding: 18px 16px 12px 16px !important;
        gap: 15px !important;
    }

    .login-header h1 {
        font-size: 1.4rem !important;
    }

    .login-btn {
        padding: 13px !important;
        font-size: 0.92rem !important;
    }

    .login-body input {
        padding: 13px !important;
        font-size: 0.9rem !important;
    }

    /* ===================================
       17. GRID-BASED CITY MENUS
       (Research, Build, Training)
    =================================== */
    .building-grid,
    .research-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        padding: 10px !important;
    }

    /* Btn-giant lebih nyaman disentuh */
    .btn-giant {
        min-height: 48px !important;
        font-size: 0.85rem !important;
    }

    /* ===================================
       18. HERO LIBRARY GRID
    =================================== */
    .page-window [style*="grid-template-columns: repeat(auto-fill, minmax(100px"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* ===================================
       19. PROFILE PAGE
    =================================== */
    .profile-container {
        padding: 10px !important;
    }

    .profile-stats-grid {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 6px !important;
    }

    .stat-card {
        padding: 8px !important;
    }

    .stat-value {
        font-size: 0.8rem !important;
    }

    /* ===================================
       20. INVENTORY GRID
    =================================== */
    #inventory-list [style*="grid-template-columns:repeat(3, 1fr)"],
    #inventory-list > div > div {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .inventory-item-card {
        padding: 8px 4px !important;
    }

    /* ===================================
       21. BROADCAST OVERLAY
    =================================== */
    .broadcast-overlay .announcer {
        font-size: 0.6rem !important;
        letter-spacing: 2px !important;
    }

    .broadcast-overlay .msg {
        font-size: 0.85rem !important;
    }

    /* ===================================
       22. TRAINING MENU (REKRUTMEN) MOBILE
    =================================== */
    .train-menu-premium {
        padding: 12px !important;
    }

    .train-header {
        margin-bottom: 15px !important;
        gap: 10px !important;
    }

    .train-header h1 {
        font-size: 1.3rem !important;
    }

    .train-main-layout {
        flex-direction: column !important;
        gap: 15px !important;
        overflow-y: visible !important;
    }

    .train-visual-container {
        min-height: 220px !important;
        height: 220px !important;
        flex: none !important;
    }

    .train-visual-container span img {
        height: 180px !important;
    }

    .train-controls-panel {
        flex: none !important;
        gap: 12px !important;
    }

    .train-stat-grid {
        gap: 10px !important;
    }

    .train-stat-box {
        padding: 10px !important;
    }

    .train-stat-box b {
        font-size: 1.1rem !important;
    }

    .train-amount-input-wrapper {
        padding: 8px !important;
    }

    .train-amount-input-wrapper input {
        font-size: 1.8rem !important;
    }

    .train-action-group {
        margin-top: 10px !important;
        padding-top: 0 !important;
    }

    .btn-giant {
        min-height: 44px !important;
    }
    /* ===================================
       23. ALLIANCE MENU GRID FIXES
    =================================== */
    /* Ubah grid kaku menjadi stacked vertikal */
    .alliance-menu-container [style*="350px 1fr"],
    .alliance-menu-container [style*="300px 1fr"],
    .alliance-menu-container [style*="2fr 1fr"],
    .alliance-menu-container [style*="1.5fr 1fr"],
    .alliance-menu-container [style*="1.2fr 1FR"],
    .dr-recruit-layout,
    .eco-grid-2 {
        grid-template-columns: 1fr !important;
    }

    /* Tab bar & content scroll fix */
    .alliance-menu-container [style*="minmax(350px"],
    .alliance-menu-container [style*="minmax(320px"] {
        grid-template-columns: 1fr !important;
    }

    /* Ubah grid 4 atau 5 kolom kaku menjadi grid responsif */
    .alliance-menu-container [style*="repeat(5"],
    .alliance-menu-container [style*="repeat(4"],
    .eco-grid-5 {
        grid-template-columns: repeat(auto-fit, minmax(65px, 1fr)) !important;
        gap: 6px !important;
    }

    /* Tab bar wrapper & icon adjustments */
    .alliance-menu-container > div:first-child {
        padding: 8px !important;
    }
    
    .alliance-menu-container > div:first-child button {
        padding: 8px 12px !important;
        font-size: 0.65rem !important;
    }

    /* Lampiran wrapper fix agar tidak overflow */
    .lampiran-wrapper {
        grid-template-columns: 1fr !important;
    }

    /* Pastikan SVG tidak jadi mikroskopis karena shrink */
    .alliance-menu-container svg {
        min-width: 20px !important;
        min-height: 20px !important;
    }
}

/* ===================================
   LAYAR SANGAT KECIL (< 380px)
=================================== */
@media screen and (max-width: 380px) {
    .res-item {
        min-width: 38px !important;
        max-width: 50px !important;
    }

    .gold-box, .diamond-box {
        min-width: 44px !important;
        padding: 2px 4px !important;
    }

    .profile-avatar {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
    }

    .nav-item img,
    .nav-item svg,
    .nav-item canvas {
        width: 28px !important;
        height: 28px !important;
    }

    .nav-item span {
        font-size: 5.5px !important;
    }

    .page-window.mini-mode,
    .page-window.mail-mode,
    .page-window.alliance-menu,
    .page-window.full-mode,
    .page-window.bursa-mode {
        height: 95vh !important;
        max-height: 95vh !important;
    }
}

/* ===================================
   LANDSCAPE MODE DI HP
=================================== */
@media screen and (max-height: 450px) and (orientation: landscape) {
    .resource-bar {
        height: 44px !important;
    }

    #game-canvas {
        top: 44px !important;
        bottom: 50px !important;
    }

    .bottom-nav {
        height: 50px !important;
    }

    #nav-btn-map {
        transform: translateY(-12px) !important;
        flex: 0 0 60px !important;
        height: 60px !important;
    }

    .page-window {
        max-height: 95vh !important;
        height: 95vh !important;
    }
}