/* ═══════════════════════════════════════════════════════════════
   responsive.css — CodeScape mobile & tablet layout
   Include this AFTER all other CSS files in each page.
═══════════════════════════════════════════════════════════════ */

/* ── Touch-action: prevent accidental zoom on double-tap ──── */
button, .lib-fn-card, .ai-suggestion, .qopt, .ls-quiz-opt, .db-opt {
    touch-action: manipulation;
}

/* ════════════════════════════════════════════════════════════
   INDEX.HTML  (welcome page)
   Problem: body overflow:hidden cuts content; title too big
════════════════════════════════════════════════════════════ */

/* Allow the welcome page body to scroll on mobile */
body:has(.welcome-container) {
    overflow: auto !important;
    min-height: 100vh;
    height: auto !important;
}

@media (max-width: 600px) {
    .welcome-container {
        padding: 2rem 1.2rem 3rem;
        min-height: 100dvh;
        justify-content: center;
    }

    .welcome-logo {
        width: 130px;
        height: 130px;
        margin-bottom: 1.2rem;
    }

    .welcome-title {
        font-size: 3.2rem;
        letter-spacing: 3px;
        margin-bottom: 0.6rem;
    }

    .welcome-desc {
        font-size: 1rem;
        margin-bottom: 2rem;
        padding: 0 0.5rem;
    }

    .welcome-btn {
        font-size: 1.4rem;
        padding: 12px 28px;
    }

    .skip-link,
    .readme-link {
        font-size: 0.78rem;
    }
}

@media (min-width: 601px) and (max-width: 900px) {
    .welcome-title { font-size: 4.5rem; }
    .welcome-logo  { width: 170px; height: 170px; }
}


/* ════════════════════════════════════════════════════════════
   TUTORIAL.HTML
   Generally fine — just tweak card padding and font sizes
════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
    .slide-title  { font-size: 1.6rem; }
    .card         { padding: 1.2rem 1rem; }
    .flow-row     { flex-direction: column; }
    .flow-arrow   { transform: rotate(90deg); }
    .nav-row      { padding: 1rem 1rem 1.5rem; }
    .nav-btn      { font-size: 0.95rem; padding: 9px 18px; }
}


/* ════════════════════════════════════════════════════════════
   APP.HTML — the main editor + 3D map layout
   This is the complex one. We switch from side-by-side to
   a stacked layout with the map taking priority on mobile.
════════════════════════════════════════════════════════════ */

/* ── Tablet: 601–1024px ──────────────────────────────────── */
@media (max-width: 1024px) {
    /* Allow body to scroll so the stacked layout is reachable */
    html, body {
        overflow: auto !important;
        height: auto !important;
    }

    /* Header */
    .header {
        padding: 0.4rem 0.8rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .header h1 { font-size: 1.8rem; }

    .header-sub .subtitle {
        font-size: 0.6rem;
    }

    #mapClock {
        font-size: 1.1rem;
        padding: 2px 10px;
        margin-left: 0;
    }

    .header-controls {
        gap: 5px;
    }

    #btnGuide, #btnResetGame {
        font-size: 0.62rem;
        padding: 4px 8px;
    }

    /* Stack left + right vertically */
    .container {
        flex-direction: column;
        gap: 0.6rem;
        padding: 0.6rem;
        overflow: visible;
        height: auto;
    }

    /* Editor panel */
    .left-content {
        flex: none;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: auto;
    }

    /* CodeMirror: limit height so map is reachable without too much scroll */
    .CodeMirror {
        min-height: 180px !important;
        max-height: 260px !important;
    }

    .cm-wrap {
        height: auto;
        max-height: 260px;
    }

    /* Output panel */
    .output-panel.expanded {
        max-height: 110px;
    }

    /* Library panel: horizontal scroll instead of wrapping */
    .lib-body {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
        scrollbar-width: thin;
        scrollbar-color: rgba(0,255,136,0.3) transparent;
    }
    .lib-body::-webkit-scrollbar { height: 3px; }
    .lib-fn-card { flex-shrink: 0; }

    /* Map panel */
    .right-content {
        flex: none;
        width: 100%;
        min-height: 0;
        padding: 6px;
        /* Fixed height so it's usable */
        height: 55vw;
        min-height: 280px;
        max-height: 480px;
    }

    /* Map container fills its parent */
    #mapContainer {
        height: 100%;
        width: 100%;
    }

    /* UI Guide panel: fit the viewport */
    .guide-card {
        max-width: 95%;
        padding: 20px 16px;
    }

    /* Footer */
    .footer {
        padding: 0.3rem 0.8rem;
        font-size: 0.65rem;
    }
    .footer p { display: none; } /* hide copyright text to save space */
}

/* ── Mobile: ≤600px ─────────────────────────────────────── */
@media (max-width: 600px) {
    .header { padding: 0.35rem 0.7rem; gap: 0.4rem; }
    .header h1 { font-size: 1.4rem; letter-spacing: 2px; }
    .header-sub { display: none; } /* hide subtitle row */

    #mapClock { font-size: 1rem; padding: 2px 8px; }

    #btnGuide    { display: none; } /* moved to info modal */
    #btnResetGame { font-size: 0.6rem; padding: 3px 7px; }

    .container { padding: 0.4rem; gap: 0.4rem; }

    /* Tighter editor on mobile */
    .CodeMirror {
        font-size: 11.5px !important;
        min-height: 140px !important;
        max-height: 200px !important;
    }
    .cm-wrap { max-height: 200px; }

    /* Run bar: tighter */
    .run-bar { padding: 5px 7px; gap: 4px; flex-wrap: wrap; }
    .btn      { font-size: 10px; padding: 5px 10px; }
    .run-hint { display: none; }

    /* Confirm popups — keep them usable */
    .confirm-popup { font-size: 0.72rem; padding: 8px 10px; }

    /* Map */
    .right-content {
        height: 60vw;
        min-height: 240px;
        max-height: 360px;
    }

    #mapResetBtn  { font-size: 0.68rem; padding: 5px 10px; top: 8px; right: 8px; }
    #mapHints span { font-size: 0.6rem; }
    #mapHints     { gap: 10px; padding: 4px 10px; }

    /* Output */
    .output-panel.expanded { max-height: 90px; }
    .output-body { font-size: 10px; max-height: 60px; }

    /* Lib panel */
    .lib-body { max-height: none; padding: 4px; }
    .lib-fn-card { padding: 3px 7px; }
    .lib-fn-card .fn-name { font-size: 10px; }
    .lib-fn-card .fn-emoji { font-size: 12px; }

    /* Guide card */
    .guide-card { padding: 16px 12px; }
    .guide-title { font-size: 1.2rem; }
    .guide-item  { font-size: 0.75rem; }
}


/* ════════════════════════════════════════════════════════════
   AI ASSISTANT PANEL — fit smaller screens
════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
    #aiPanel {
        width: calc(100vw - 20px);
        right: 10px;
        bottom: 80px;
        max-height: 70vh;
        border-radius: 12px;
    }

    #aiBtn {
        width: 46px;
        height: 46px;
        font-size: 1.3rem;
        bottom: 16px;
        right: 16px;
    }

    .ai-msg-bubble { max-width: 88%; font-size: 0.79rem; }
    .ai-markdown .ai-code-block code { font-size: 0.72rem; }
    .ai-markdown .ai-inline-code     { font-size: 0.72rem; }
}

@media (min-width: 601px) and (max-width: 1024px) {
    #aiPanel {
        width: min(360px, calc(100vw - 30px));
        right: 15px;
        bottom: 84px;
    }
}


/* ════════════════════════════════════════════════════════════
   LESSON MODAL — fit smaller screens
════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
    #lessonModal {
        max-height: 96vh;
        border-radius: 12px;
    }

    .ls-header    { padding: 14px 14px 10px; }
    .ls-header-text h2 { font-size: 1.15rem; }
    .ls-body      { padding: 14px 14px 60px; }

    .ls-concept-box,
    .ls-step-content,
    .ls-quiz-q,
    .ls-quiz-opt  { font-size: 0.82rem; }

    #lessonCodeArea { font-size: 12px; min-height: 100px; }

    .ls-tabs .ls-tab { font-size: 0.65rem; padding: 7px 4px; }

    .ls-btn       { font-size: 0.75rem; padding: 7px 14px; }
}


/* ════════════════════════════════════════════════════════════
   DEBUG MODAL — fit smaller screens
════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
    #debugModal { border-radius: 12px; }
    .db-header  { padding: 14px 16px 10px; }
    #dbTitle    { font-size: 1.1rem; }
    .db-body    { padding: 14px 16px; }
    .db-code-block,
    .db-opt,
    .db-intro   { font-size: 0.82rem; }
    #dbCodeArea { font-size: 12px; min-height: 100px; }
}


/* ════════════════════════════════════════════════════════════
   TOOLTIP — hide on touch devices (no hover)
════════════════════════════════════════════════════════════ */

@media (hover: none) {
    .fn-tooltip { display: none !important; }
}


/* ════════════════════════════════════════════════════════════
   SAFE AREA INSETS (iPhone notch / home-bar)
════════════════════════════════════════════════════════════ */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .footer {
        padding-bottom: calc(0.3rem + env(safe-area-inset-bottom));
    }

    #aiBtn {
        bottom: calc(16px + env(safe-area-inset-bottom));
    }

    #aiPanel {
        bottom: calc(72px + env(safe-area-inset-bottom));
    }
}