/* The stage: the screen; the card after a run is play.css, the pad pad.css. */
/* ---- Stage ---- */
.stage-screen {
    position: relative;
    flex: 1;
    min-height: 280px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--screen);
}
#arcade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
}

/* The card after a run lives in play.css. */

/* The phone pad lives in pad.css; how the stage makes room for it sideways is here. */
@media (orientation: landscape) and (pointer: coarse) {
    /* Sideways the controls never cover the game (a pad over it hid the brawler, Kickabout's goal, the ships at the
       edges): the game takes the middle and each thumb gets a side, like a handheld console */
    .stage.is-takeover {
        --side: clamp(150px, 21vw, 196px);
        display: grid;
        grid-template-columns: var(--side) minmax(0, 1fr) var(--side);
        grid-template-rows: minmax(0, 1fr);
    }
    .stage.is-takeover .stage-screen {
        grid-column: 2;
        grid-row: 1;
    }
    .stage.is-takeover .pad {
        display: contents;
    }
    .stage.is-takeover .pad-left,
    .stage.is-takeover .pad-right {
        grid-row: 1;
        align-self: end;
        justify-self: center;
        /* thumbs rest low, but not on the edge where the phone's own gestures live */
        margin-bottom: max(24px, 11vh);
        touch-action: none;
    }
    .stage.is-takeover .pad-left {
        grid-column: 1;
    }
    .stage.is-takeover .pad-right {
        grid-column: 3;
    }
    /* two buttons slant down the side instead of across it, so the pair fits a 150 px side */
    .stage.is-takeover .pad[data-buttons='2'] .pad-right {
        flex-direction: column;
        align-items: flex-end;
        width: 136px;
        gap: 2px;
    }
    .stage.is-takeover .pad[data-buttons='2'] .pad-btn--a {
        margin-bottom: 0;
    }
    .stage.is-takeover .pad[data-buttons='2'] .pad-btn--b {
        align-self: flex-start;
    }
    /* the left/right bar fits the side; it was sized for under the game */
    .stage.is-takeover .dpad--lr {
        width: 140px;
        height: 64px;
    }
}