/* === RESPONSIVE.CSS === */
/* =========================================
   RESPONSIVE & MEDIA QUERIES
   ========================================= */

/* Mobile & Small Tablet Deck Stacking (<= 768px) */
@media (max-width: 768px) {
    #workspace-flex {
        flex-direction: column !important;
    }

    #workspace-flex #game-deck-panel,
    #workspace-flex #world-builder-panel {
        width: 100% !important;
        border-left: none !important;
        border-right: none !important;
    }

    #workspace-flex #panel-resizer,
    #workspace-flex #world-panel-resizer {
        width: 100% !important;
        height: 8px !important;
        cursor: row-resize !important;
    }

    #workspace-flex #world-builder-panel {
        order: -2 !important;
        height: 50vh !important;
        max-height: 50vh !important;
        border-bottom: 2px solid var(--main-color) !important;
        border-top: none !important;
    }

    #workspace-flex #world-panel-resizer {
        order: -1 !important;
    }

    /* Stack on Top for left/right/top on mobile */
    #workspace-flex.pos-top #game-deck-panel,
    #workspace-flex.pos-left #game-deck-panel,
    #workspace-flex.pos-right #game-deck-panel {
        order: -1 !important;
        height: 40vh !important;
        border-bottom: 2px solid var(--main-color) !important;
        border-top: none !important;
    }

    #workspace-flex.pos-top #panel-resizer,
    #workspace-flex.pos-left #panel-resizer,
    #workspace-flex.pos-right #panel-resizer {
        order: 0 !important;
    }

    /* Stack on Bottom if pos-bottom on mobile */
    #workspace-flex.pos-bottom #game-deck-panel {
        order: 3 !important;
        height: 40vh !important;
        border-top: 2px solid var(--main-color) !important;
        border-bottom: none !important;
    }

    #workspace-flex.pos-bottom #panel-resizer {
        order: 2 !important;
    }

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

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

/* Mobile & Tablet Header (<= 1000px) */
@media (max-width: 1000px) {
    .app-title {
        display: none !important;
    }

    #desktop-nav-items {
        display: none !important;
    }

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

    header {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 10px !important;
        height: 48px !important;
        min-height: 48px !important;
        gap: 8px !important;
    }

    .header-left {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        padding-left: 0 !important;
        gap: 8px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    .stats-bar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        font-size: 12px !important;
        align-items: center !important;
        white-space: nowrap !important;
    }

    .header-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 4px !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
    }

    .stats-bar .stat-input {
        padding: 1px 3px !important;
    }

    .exp-meter-box {
        width: 48px !important;
        height: 20px !important;
    }
}

/* =========================================
   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;
    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;
}

/* =========================================
   MOBILE (< 600px) SPECIFIC RULES
   ========================================= */
.underdeck-label-mob {
    display: none;
}

@media (max-width: 600px) {
    /* Hide Goal and Sprint meters on mobile but keep on tablet */
    .stats-bar .t-goal-label,
    .stats-bar .sprint-meter-container,
    #last-sprint-stats,
    #best-sprint-stats {
        display: none !important;
    }

    /* Scratchpad toggle label renamed to Pad on mobile */
    .underdeck-label-desk {
        display: none !important;
    }
    .underdeck-label-mob {
        display: inline !important;
    }

    /* Initial screen responsive polish */
    .init-content-wrapper {
        padding: 20px 12px !important;
        max-width: 95% !important;
    }

    #init-overlay {
        padding: 10px;
        box-sizing: border-box;
    }

    #editor {
        padding: 25px 15px 40vh 15px !important;
        mask-image: none !important;
        -webkit-mask-image: none !important;
    }
}