#scaler {
    position: relative;
    width: 100%;
    height: 100%;
}

#touch-controls {
    display: none;
}

/* On-screen controls only appear on touch-capable / narrow screens.
   Desktop and tablets in landscape above this width are untouched. */
@media (max-width: 900px) {
    html, body {
        overflow: hidden;
        height: 100%;
    }

    /* The game engine centers the canvas/UI based on the REAL window
       size every time it resizes. Since we're scaling everything down
       to fit inside a fixed 840x400 box, we pin them back to the
       top-left corner of that box - this has to win over the inline
       styles the engine sets, hence !important. */
    #canvas {
        left: 0 !important;
        top: 0 !important;
    }

    #ui {
        padding-top: 0 !important;
    }

    /* main.css puts these 20px from the top of the (scaled, vertically
       centered) game box, so when the game sits centered on a tall phone
       screen the icons end up floating in the middle of the screen too.
       `position: fixed` detaches them from the scaled box entirely and
       pins them to the real screen's top edge instead - the game stays
       centered, only the icons move to the true top. */
    #icons-top > div div {
        position: fixed;
        top: 2px;
    }

    /* main.css sizes the morphs panel at 890px (6 items x 140px + gaps),
       which is wider than the game's native 840px width. On desktop the
       game window is usually wider than 890px so it's never noticed, but
       here 840px is the actual clipping boundary, so the last item gets
       cut off. A plain `transform: scale()` shrinks it to fit without
       touching padding/figure sizes - that matters because the morph
       icons are cropped from a fixed sprite sheet via background-position,
       and resizing those boxes directly would misalign the crop. Scaling
       the whole rendered panel keeps every icon's crop proportionally
       correct. */
    /* On mobile the game's playable height is compressed into the fixed
       400px native box, so the footer's default 20px-from-bottom position
       (fine on the wider desktop window) sits right on top of visible
       platform tiles. Nudge it further down, only in mobile view, so it
       clears the tiles above it. */
    #footer {
        bottom: -14px;
    }

    #footer #morphs {
        transform: scale(0.88);
        transform-origin: top center;
    }

    /* Buttons are positioned with `top`, not `bottom`. `--touch-controls-top`
       is calculated in mobile-scale.js from the ACTUAL bottom edge of the
       scaled game box (or a safe fallback), so this row never lands on top
       of the morphs panel or the top icons regardless of screen size. */
    #touch-controls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        left: 0;
        right: 0;
        top: var(--touch-controls-top, auto);
        bottom: var(--touch-controls-bottom, 20px);
        z-index: 9999;
        padding: 0 20px;
        box-sizing: border-box;
        pointer-events: none;
    }

    .touch-group {
        display: flex;
        align-items: center;
        gap: 15px;
        pointer-events: none;
    }

    .touch-btn {
        pointer-events: auto;
        position: relative;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: rgba(24, 86, 102, 0.85);
        border: 3px solid #fff;
        color: #fff;
        font-family: visitor, sans-serif;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }

    .touch-btn.active {
        background-color: #B30FA3;
    }

    .touch-btn-morph {
        font-size: 18px;
    }
}