/* Game viewport placement. Material Board geometry and game rules remain owned
   by milestone.css and the game modules. */

/* Portrait: distribute spare height above and below the complete match block. */
@media (orientation: portrait) and (max-width: 767px) {
    body.game-active #screen-game.active {
        grid-template-rows: none !important;
        align-content: safe center !important;
    }

    /* A fixed app bar leaves normal grid flow. Preserve its former row so the
       opponent, status, board, player and action strip do not jump upward. */
    body.game-active #screen-game.active::before {
        content: '';
        grid-column: 1;
        grid-row: 1;
        min-height: 56px;
    }

    /* Move the complete game app bar: Back, title and its background stay
       together. The original grid row remains reserved, so players, board,
       status and actions keep their established coordinates. */
    body.game-active .material-game-bar {
        position: fixed !important;
        z-index: 10010;
        top: max(8px, calc(env(safe-area-inset-top, 0px) + 4px));
        right: 4px;
        left: 4px;
        width: auto !important;
        margin: 0 !important;
        border: 1px solid var(--mb-panel-border);
        border-radius: 14px;
        box-shadow: 0 5px 16px rgba(0, 0, 0, 0.24);
    }
}