/* ============================================================
   FunisLearn — Shared mobile layout fixes for game pages
   ------------------------------------------------------------
   Loaded by games/play.php AFTER the engine's own <style> block,
   so equal-specificity rules here win without needing !important
   everywhere. Nothing in games/engines/ is modified.

   The three failures this fixes, measured at 360x640:
     1. page was 1438px tall (2.2x the viewport) — the 630px site
        footer and a 32px wrapper pad pushed the 640px playfield
        so its bottom third was off-screen while playing;
     2. the HUD pill row (round/lives/score/fullscreen) did not
        wrap and overflowed the viewport by up to 125px;
     3. decorative absolutes (clouds, trees, thorns, rails) hung
        past the right edge and scrolled the page sideways.
   ============================================================ */

/* ---------- 1. No sideways scrolling, ever ---------- */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Decorative absolutes (.cloud, .tree, .thorn, .butterfly, .track-ties)
   are positioned for a desktop-width stage. Clipping them at the play
   surface keeps the scenery intact without dragging the page sideways. */
#game-wrapper > div[class$="-container"] {
    overflow: hidden;
}

/* ---------- 2. Make the playfield fit the visible screen ---------- */

@media (max-width: 900px) {

    /* The wrapper's 2rem top pad plus the 70px header pushed the
       playfield down until its bottom was cut off. */
    #game-wrapper,
    .game-wrapper {
        padding: 0;
        margin: 0;
        min-height: 0;
        width: 100%;
        align-items: stretch;
    }

    /* dvh tracks the browser's collapsing address bar; the vh line
       above it is the fallback for engines older than dvh support. */
    #game-wrapper > div[class$="-container"] {
        width: 100%;
        max-width: 100%;
        min-height: calc(100vh - 70px);
        min-height: calc(100dvh - 70px);
        height: auto;
        border-radius: 0;
        margin: 0;
    }

    /* 630px of site footer under a game is most of the page height and
       nothing a player needs mid-game. The header stays for navigation. */
    body > footer,
    body > .footer {
        display: none;
    }
}

/* ---------- 3. HUD: wrap instead of overflowing ---------- */

@media (max-width: 900px) {

    .game-hud {
        top: 8px;
        gap: 6px;
        padding: 0 8px;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
    }

    .hud-item {
        padding: 6px 12px;
        font-size: 0.95rem;
        border-radius: 20px;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* The fullscreen control carried a 117px Arabic label that alone
       overflowed the row; the icon reads fine on its own. */
    #fs-label {
        display: none;
    }

    #fs-btn-container {
        padding: 6px 10px;
        gap: 0;
    }
}

@media (max-width: 400px) {

    .hud-item {
        padding: 5px 10px;
        font-size: 0.85rem;
    }
}

/* ---------- 4. Touch targets ---------- */

@media (max-width: 900px) {

    /* 44px is the minimum comfortable touch target. Padding is used
       rather than width/height so button shapes are left alone. */
    .game-hud a,
    .hud-item a,
    .home-btn,
    #fs-btn-container {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Answer/option buttons are the primary way children play. */
    .option,
    .option-btn,
    .answer-btn,
    .letter-option,
    .choice-btn {
        min-height: 48px;
    }
}

/* ---------- 5. Modals: reachable and scrollable on short screens ---------- */

@media (max-width: 900px) {

    .modal-card,
    .setup-card,
    .modal-content {
        max-height: 88vh;
        max-height: 88dvh;
        overflow-y: auto;
        width: min(94%, 460px);
        box-sizing: border-box;
    }

    /* Setup modals in teacher games hold a scrolling question list; it
       must not push the confirm button past the bottom of the screen. */
    .setup-modal-overlay {
        align-items: flex-start;
        padding: 12px 0;
        overflow-y: auto;
    }
}

/* ---------- 6. Landscape phones ---------- */

/* Short-but-wide screens have no room for a full-height stage; let the
   playfield use what height there is and keep the HUD compact. */
@media (max-height: 480px) and (orientation: landscape) {

    #game-wrapper > div[class$="-container"] {
        min-height: calc(100vh - 50px);
        min-height: calc(100dvh - 50px);
    }

    .game-hud {
        top: 4px;
    }

    .hud-item {
        padding: 4px 10px;
        font-size: 0.8rem;
    }

    body > footer,
    body > .footer {
        display: none;
    }
}