/* Stack the opponent, board and current player in near-square game areas.
   This includes landscape tablets with the sidebar open.
   Shared text-card, board and sidebar styles live in render.css. */
@container cj-game-area (max-aspect-ratio: 3/2) or ((max-width: 43.75em) and (height > 32em)) {
    #game {
        --cj-layout: portrait;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(8rem, 1fr) auto;
    }

    /* Preserve player order and event handlers while using the game grid. */
    #playerData {
        display: contents;
    }

    #game #playerData > .playerData {
        width: calc(100% - .8rem);
        margin-inline: .4rem;
    }

    #game #playerData > .playerData:last-child {
        order: 2;
    }
}