/* =========================================
   RESPONSIVE & MEDIA QUERIES
   ========================================= */

@media (max-width: 1200px) {
    #workspace-flex {
        flex-direction: column !important;
    }

    #game-deck-panel.panel-open {
        width: 100% !important;
        height: 45vh !important;
        border-right: none !important;
        border-left: none !important;
        border-bottom: 2px solid var(--main-color) !important;
        border-top: none !important;
        order: -1 !important;
    }

    #editor-container {
        width: 100% !important;
        height: 100% !important;
        min-height: 50vh;
        /* Prevent collapse */
        flex: 1;
    }

    .iframe-container {
        height: 100%;
        min-height: 200px;
    }
}

/* Ensure App Title hides on smaller screens to prevent overlap */
@media (max-width: 1100px) {
    .app-title {
        display: none !important;
    }
}

@media (max-width: 1000px) {
    .app-title {
        display: none;
    }

    /* Hide Desktop Nav */
    #desktop-nav-items {
        display: none !important;
    }

    #btn-mobile-menu {
        display: block !important;
    }

    header {
        justify-content: space-between;
        padding: 0 10px;
    }

    /* Stats moved to dropdown, so hide original container if not moved yet (though JS handles it) */
    /* .stats-bar { display: none !important; } -> NO, JS moves it. */

    #workspace-flex {
        flex-direction: column !important;
    }
}

@media (max-width: 800px) {
    #btn-swap-side {
        display: none !important;
    }

    .deck-sep {
        display: none !important;
    }

    #workspace-flex {
        flex-direction: column !important;
    }

    /* Default Top */
    #game-deck-panel.panel-open {
        order: -1 !important;
        width: 100% !important;
        height: 50vh !important;
        border-right: none !important;
        border-left: none !important;
        border-bottom: 2px solid var(--main-color) !important;
        border-top: none !important;
    }

    /* Swapped Bottom */
    #workspace-flex.orient-vertical #game-deck-panel.panel-open {
        order: 2 !important;
        border-bottom: none !important;
        border-top: 2px solid var(--main-color) !important;
    }

    #editor-container {
        width: 100% !important;
        height: auto !important;
        flex: 1;
        min-height: 0;
    }

    .deck-footer {
        padding: 5px;
    }

    .deck-btn-group {
        flex-wrap: wrap;
    }
}

/* =========================================
   STEAMDECK / TOUCH MODE OVERRIDE
   ========================================= */
body.steamdeck-mode .sys-btn,
body.steamdeck-mode button,
body.steamdeck-mode select,
body.steamdeck-mode input {
    padding: 12px 16px !important;
    /* Larger touch targets */
    margin-bottom: 5px;
}

body.steamdeck-mode .panel-header-title {
    padding: 15px 0 !important;
}

body.steamdeck-mode .accordion-header {
    padding: 15px !important;
}

body.steamdeck-mode label {
    margin-bottom: 8px !important;
    margin-right: 10px !important;
    vertical-align: middle !important;
}

body.steamdeck-mode input[type="range"] {
    height: 20px !important;
}

body.steamdeck-mode input[type="checkbox"] {
    transform: scale(1.5);
    margin-right: 10px;
}

/* =========================================
   MOBILE ZOOM MODE
   ========================================= */
body.mobile-zoom-mode {
    --ui-font-size: 18px !important;
    --font-size: 24px !important;
}

body.mobile-zoom-mode #editor {
    padding: 40px !important;
    line-height: 1.8 !important;
}

body.mobile-zoom-mode .panel-header-title {
    font-size: 1.5em !important;
}

body.mobile-zoom-mode label {
    font-size: 1.1em !important;
}

body.mobile-zoom-mode .accordion-header {
    font-size: 1.2em !important;
}