/*
 * Studio layout for every screen size. Linked last from studio.html.
 * Rules outside a media query only touch elements that are new (hidden or
 * transparent on a desktop) or add behaviour that draws nothing (touch-action).
 */

/* ── always: new pieces, drawn nowhere on a desktop with nothing saved ── */
#sg-view-switcher, #sg-tb-menu-btn, .sg-mobile-only { display: none; }
#sg-show-code, #sg-show-preview { display: none; }
body.sg-code-closed #sg-show-code, body.sg-preview-closed #sg-show-preview { display: inline-flex; }
.sg-panel.sg-closed { display: none !important; }
body.sg-sidebar-hidden #sidebar { display: none !important; }
body.sg-sidebar-hidden #sg-split-sidebar { display: none; }
#main { position: relative; }
.sg-split { position: absolute; z-index: 30; background: transparent; touch-action: none; }
.sg-split:hover, .sg-split:active { background: rgba(124, 58, 237, .45); }
#sg-split-sidebar { top: 0; bottom: 0; width: 8px; cursor: col-resize; }
#sg-split-panels { width: 8px; cursor: col-resize; }
#sg-split-panels.sg-off { display: none; }
.sg-panel-titlebar, .sg-rh { touch-action: none; }
#sg-preview-stage { display: contents; }
#sg-preview-stage-handle { display: none; }
#sg-tb-menu { display: none; }
.sg-panel.sg-fs { position: fixed !important; inset: 0 !important; left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important; max-width: none !important; z-index: 10000 !important; border-radius: 0 !important; display: flex !important; }
.sg-panel.sg-fs .sg-rh { display: none; }

/* a label around a box in a grid: no box of its own on a desktop, where column heads name the boxes */
.sg-lbl { display: contents; }
.sg-lbl-t { display: none; }

/* ── the Game Managers panel when it sits in an editor tab ── */
.gm-editor-view > #scene-mgr-body { width: 100%; max-width: 760px; }
#sg-gm-moved { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; font-size: 12px; color: var(--muted); }

/* ── Menu: the top bar folds below 1200 px ── */
@media (max-width: 1199px) {
    #sg-tb-menu-btn { display: inline-flex; }
    #toolbar { gap: 8px; padding: 0 10px; }
    #sg-tb-menu {
        position: fixed; top: 52px; right: 8px; z-index: 10050;
        flex-direction: column; align-items: stretch; gap: 8px;
        min-width: 220px; max-width: calc(100vw - 16px); max-height: calc(100vh - 64px); overflow-y: auto;
        background: var(--toolbar); border: 1px solid var(--border); border-radius: 8px; padding: 10px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, .6);
    }
    #sg-tb-menu.open { display: flex; }
    #sg-tb-menu > * { width: 100%; justify-content: center; margin: 0 !important; }
    #sg-tb-menu #game-name-input { max-width: none; }
    #sg-tb-menu #studio-color-pill, #sg-tb-menu #game-server-status-pill { justify-content: center; }
}

/* ── touch: 40 px targets wherever the pointer is a finger, or the screen is small ── */
@media (pointer: coarse), (max-width: 899px) {
    #toolbar .btn, #toolbar button, #toolbar a, #toolbar input, #sg-tb-menu .btn, #sg-tb-menu a, #sg-tb-menu button, #sg-tb-menu input { min-height: 40px; min-width: 40px; }
    #toolbar #studio-color-pill, #sg-tb-menu #studio-color-pill { min-height: 40px; }
    .sg-panel-titlebar { height: auto; min-height: 44px; flex-wrap: wrap; row-gap: 2px; padding: 2px 8px; }
    .sg-panel-btn, #clear-console, .sg-panel-titlebar select { min-height: 40px; min-width: 40px; }
    .sg-rh-n, .sg-rh-s { height: 20px; }
    .sg-rh-n { top: -10px; } .sg-rh-s { bottom: -10px; }
    .sg-rh-w, .sg-rh-e { width: 24px; }
    .sg-rh-w { left: -12px; } .sg-rh-e { right: -12px; }
    .sg-split { width: 24px !important; }
    #sg-split-sidebar { margin-left: -8px; }
    #sg-split-panels { margin-left: -8px; }
    #editor-tabs { height: auto; min-height: 44px; overflow-x: auto; overflow-y: hidden; align-items: stretch; }
    .editor-tab { display: inline-flex !important; align-items: center; min-height: 44px; padding: 0 12px; flex-shrink: 0; }
    .editor-tab .tab-close, .editor-tab > span[onclick] { min-height: 40px; min-width: 40px; display: inline-flex; align-items: center; justify-content: center; }
    .console-toolbar { min-height: 44px; }

    /* sidebar and Game Managers */
    #sidebar .section-header { min-height: 44px; }
    #sidebar button, #sidebar select, #sidebar textarea,
    .gm-editor-view button, .gm-editor-view select, .gm-editor-view textarea {
        min-height: 40px; min-width: 40px; font-size: 14px;
    }
    #sidebar input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
    .gm-editor-view input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]) {
        min-height: 40px; min-width: 64px; font-size: 14px;
    }
    #sidebar input[type=file], .gm-editor-view input[type=file] { min-height: 40px; }
    #sidebar input[type=range], .gm-editor-view input[type=range] { min-height: 40px; }
    #sidebar input[type=color], .gm-editor-view input[type=color] { min-height: 40px; min-width: 40px; }
    #sidebar [onclick]:not(input):not(button):not(select):not(tr):not(td):not(.sidebar-section),
    .gm-editor-view [onclick]:not(input):not(button):not(select):not(tr):not(td) { min-height: 40px; min-width: 40px; }
    #sidebar span[onclick], .gm-editor-view span[onclick] { display: inline-flex; align-items: center; justify-content: center; }
    #sidebar label:has(input[type=checkbox]), #sidebar label:has(input[type=radio]),
    .gm-editor-view label:has(input[type=checkbox]), .gm-editor-view label:has(input[type=radio]) { min-height: 40px; display: flex !important; align-items: center; gap: 8px; }
    #sidebar input[type=checkbox], #sidebar input[type=radio], .gm-editor-view input[type=checkbox], .gm-editor-view input[type=radio] { width: 22px; height: 22px; flex-shrink: 0; }
    #sidebar input[type=checkbox]:not(label input), #sidebar input[type=radio]:not(label input),
    .gm-editor-view input[type=checkbox]:not(label input), .gm-editor-view input[type=radio]:not(label input) { width: 40px; height: 40px; }
    .gm-sub-hdr, .gm-sub-hdr2 { min-height: 44px; display: flex !important; align-items: center; }
    .sg-lbl { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .sg-lbl-t { display: block; font-size: 10px; color: var(--muted); }
    #sg-placement-opts > label { display: flex; align-items: center; gap: 6px; width: 100%; }
    #sg-placement-opts > label > select { flex: 1; width: auto; }
}

/* ── one area at a time below 900 px ── */
@media (max-width: 899px) {
    :root { --sg-switch-h: 56px; }
    #toolbar { gap: 6px; padding: 0 8px; }
    #toolbar .logo, #toolbar .sep, #toolbar .toolbar-spacer { display: none; }
    #toolbar #sg-tb-menu-btn { margin-left: auto; }
    #sg-sidebar-toggle { display: none !important; }
    #main { height: calc(100vh - 52px - var(--sg-switch-h) - env(safe-area-inset-bottom, 0px)); height: calc(100dvh - 52px - var(--sg-switch-h) - env(safe-area-inset-bottom, 0px)); overflow: hidden; }
    #sg-view-switcher {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
        height: calc(var(--sg-switch-h) + env(safe-area-inset-bottom, 0px)); padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px));
        gap: 6px; background: var(--toolbar); border-top: 1px solid var(--border);
    }
    #sg-view-switcher button {
        flex: 1; min-height: 48px; border-radius: 8px; border: 1px solid var(--border);
        background: rgba(255, 255, 255, .04); color: var(--muted); font: 700 14px 'Inter', sans-serif;
    }
    #sg-view-switcher button.active { color: #fff; background: rgba(124, 58, 237, .35); border-color: rgba(124, 58, 237, .6); }
    body.sg-has-fs #sg-view-switcher { display: none; }

    body:not([data-sg-view]) #workspace, body[data-sg-view=panels] #workspace { display: none; }
    body[data-sg-view=code] #sidebar, body[data-sg-view=preview] #sidebar { display: none !important; }
    #sidebar { width: 100% !important; flex-shrink: 1; min-width: 0; overflow-x: hidden; }
    #workspace { flex: 1; min-width: 0; }
    .sg-split { display: none !important; }
    .sg-panel:not(.sg-fs) {
        position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        width: auto !important; height: auto !important; min-width: 0; border-radius: 0; border: none; box-shadow: none;
    }
    body[data-sg-view=code] #preview-panel:not(.sg-fs), body[data-sg-view=preview] #editor-panel { display: none !important; }
    .sg-rh { display: none; }
    .sg-panel-titlebar { cursor: default; }
    .sg-panel-maximize, .sg-panel-reset { display: none; }
    .sg-mobile-only { display: inline-flex; }
    #preview-url { display: none; }

    /* preview stage: Size choice and a width handle */
    #sg-preview-stage { display: flex; position: relative; flex: 1; min-height: 0; flex-direction: column; max-width: 100%; margin: 0 auto; width: 100%; }
    #sg-preview-stage > iframe { flex: 1; }
    #sg-preview-stage-handle {
        display: block; position: absolute; top: 0; bottom: 0; right: 0; width: 24px; z-index: 25; touch-action: none; cursor: ew-resize;
    }
    #sg-preview-stage-handle::after { content: ''; position: absolute; top: 50%; left: 9px; width: 6px; height: 48px; margin-top: -24px; border-radius: 3px; background: rgba(255, 255, 255, .25); }
    .sg-panel.sg-fs #sg-preview-stage { width: 100% !important; }
    .sg-panel.sg-fs #sg-preview-stage-handle { display: none; }

    /* panel contents wrap or scroll inside their panel */
    #sidebar *, .gm-editor-view * { max-width: 100%; }
    #sidebar select, #sidebar textarea { min-width: 0; }
    #sidebar [style*="display:flex"], #sidebar [style*="display: flex"] { flex-wrap: wrap; }
    #sidebar, #sidebar * { overflow-wrap: anywhere; }
    #sidebar [style*="white-space:nowrap"], #sidebar [style*="white-space: nowrap"] { white-space: normal !important; }
    #sidebar table { display: block; overflow-x: auto; }
    .sg-flow-grid { grid-template-columns: 1fr !important; }
    #sidebar [style*="display:flex"] > button, .gm-editor-view [style*="display:flex"] > button { flex: 1 1 auto; white-space: nowrap; }
}

@media (max-width: 899px) and (pointer: coarse) {
    #console-pane { min-height: 120px; }
}

.sg-preview-size-label { align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.sg-preview-size-label select { background: #12122a; color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 0 6px; }

/* ── polish on touch and small screens: readable words, no description lines, no squeezed rows ── */
@media (pointer: coarse), (max-width: 899px) {
    .sg-desc, #library-hint, #assets-hint { display: none !important; }
    :root { --muted: #94a3b8; --text-muted: #94a3b8; }
    #sg-undo-btn, #sg-redo-btn { color: #e2e8f0; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); }
    #toolbar .btn:disabled { opacity: 1; color: #8b95a7; background: transparent; border: 1px dashed rgba(255, 255, 255, .18); }
    #sg-add-scene-row { flex-wrap: nowrap !important; }
    #sidebar #sg-add-scene-row > button, .gm-editor-view #sg-add-scene-row > button { flex: 1 1 0 !important; min-width: max-content; white-space: nowrap; }
    #sidebar [style*="display:flex"] > button[style*="flex:1"], .gm-editor-view [style*="display:flex"] > button[style*="flex:1"] { flex: 1 1 auto !important; }
    .sg-scene-thumb-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 340px)); }
    #toast-area { bottom: calc(var(--sg-switch-h, 0px) + env(safe-area-inset-bottom, 0px) + 12px); left: 12px; right: 12px; align-items: center; pointer-events: none; }
    #toast-area .toast-pill { padding: 6px 12px; font-size: 12px; max-width: 100%; box-sizing: border-box; }
}