/* symbiotika.elf.mobile.css - harmony app's own responsive overlay.
   Self-contained: no references outside the harmony/ folder.
   Desktop rendering untouched; rules apply only on small screens. */

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

    html, body { margin: 0; padding: 0; overflow-x: hidden; }

    /* page title: xxx-large cursive overflows 390px - scale to fit */
    h1 { font-size: x-large; }

    /* elf was fixed at 300px tall - far too big on phones (~30% fits)
       NOTE: the element is <img id=img_elf> (id, not class) - must target #img_elf;
       JS adds .img_elf_scrolling during scroll states, so cover both. */
    #img_elf,
    #img_elf:hover,
    .img_elf,
    .img_elf:hover,
    .img_elf_scrolling {
        height: 90px !important;
        min-height: 0 !important;
    }

    /* elf chat text */
    .elf_chat { font-size: large !important; }

    /* question buttons: 2-per-row on phones, no wrapping, easy taps */
    #table_symbiosis, #table_symbiosis tbody { display: block; width: 100%; }
    #table_symbiosis tr { display: flex; flex-wrap: wrap; }
    #table_symbiosis td {
        display: block;
        width: 50%;
        padding: 4px;
        box-sizing: border-box;
    }
    #table_symbiosis td:empty { display: none; }
    #table_symbiosis td[colspan] { width: 100%; }
    .sym-button {
        width: 100% !important;
        font-size: 13px;
        padding: 12px 4px;
        white-space: nowrap;
        line-height: 1.2;
    }
    .sym-question[colspan="4"] { font-size: large; }

    /* container: 100px padding + top-left quill crowd small screens;
       full width, slim padding, quill tucked small in the corner */
    #container {
        width: 100% !important;
        padding: 16px !important;
        background-size: 90px;
        background-position: top 8px right 8px;
    }

    .div_elf_fixed_start, .div_elf_fixed_top { top: 10px !important; }
    /* elf bubble: fixed 250px + xx-large font covers the title on phones;
       compact pill instead */
    #div_elf { max-width: 92vw; }
    #button_elf_bubble {
        width: 220px;
        max-width: 70vw;
        font-size: 13px;
        padding: 12px 14px;
        white-space: normal;
    }

    /* universal safety net: nothing wider than the screen */
    img { max-width: 100% !important; }
}

/* ===== question wizard - one question at a time (all screens) =====
   Gated on html.wiz-on (set by wizard JS): if JS fails, all questions
   show as before. Back/Next navigate; selection stays the original
   multi-select toggles. */
html.wiz-on #table_symbiosis tbody tr[data-qgroup]:not(.wiz-active) { display: none !important; }
#wizard_nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 16px auto;
    max-width: 100%;
    padding: 0 4px;
    box-sizing: border-box;
}
#wizard_nav button {
    padding: 10px 20px;
    border: none;
    border-radius: 12px;
    background-color: #4CAF50;
    color: white;
    font-size: 16px;
    cursor: pointer;
}
#wizard_nav button:disabled { opacity: 0.35; cursor: default; }
#wiz_progress { font-size: 16px; font-family: sans-serif; }