/* Landscape touch play reserves a reachable Home row above the board.
   Settings and move buttons return in portrait; rotation never confirms a move. */
@media (orientation: landscape) and (pointer: coarse) {
    html:has(body:not(.is-start-screen-open)) {
        padding: 0 !important;
        overflow: hidden;
        scrollbar-gutter: auto;
    }

    body:not(.is-start-screen-open) {
        padding: 0 !important;
        overflow: hidden;
        overscroll-behavior: none;
    }

    body:not(.is-start-screen-open) #game-container {
        --landscape-safe-top: env(safe-area-inset-top, 0px);
        --landscape-safe-right: env(safe-area-inset-right, 0px);
        --landscape-safe-bottom: env(safe-area-inset-bottom, 0px);
        --landscape-safe-left: env(safe-area-inset-left, 0px);
        --landscape-board-height: calc(100dvh - var(--landscape-safe-top) - var(--landscape-safe-bottom) - 52px);
        position: fixed;
        inset: 0;
        width: 100%;
        max-width: none;
        height: 100dvh;
        min-height: 0;
        max-height: none;
        margin: 0;
        padding:
            calc(var(--landscape-safe-top) + 4px)
            calc(var(--landscape-safe-right) + 4px)
            calc(var(--landscape-safe-bottom) + 4px)
            calc(var(--landscape-safe-left) + 4px);
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 44px minmax(0, 1fr);
        grid-template-areas: 'navigation' 'board';
        place-items: center;
        gap: 0;
        border: 0;
        border-radius: 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    body:not(.is-start-screen-open) #game-container #landscape-navigation {
        grid-area: navigation;
        display: flex;
        width: 100%;
        justify-content: end;
    }

    body:not(.is-start-screen-open) #game-container #info-panel,
    body:not(.is-start-screen-open) #board-wrapper #action-buttons {
        display: none;
    }

    body:not(.is-start-screen-open) #game-container #board-wrapper {
        grid-area: board;
        width: min(100%, calc(var(--landscape-board-height) * var(--board-width-ratio, 1.333333)));
        height: auto;
        min-width: 0;
        min-height: 0;
        max-width: 100%;
        max-height: none;
        aspect-ratio: var(--board-aspect, 4 / 3);
        place-self: center;
        margin: 0;
        padding: 0;
        border: 0;
        transform: none;
    }

    body:not(.is-start-screen-open) #game-container #game-canvas {
        display: block;
        width: 100%;
        height: auto;
        min-height: 0;
        max-width: 100%;
        max-height: none;
        margin: 0;
        border: 0;
        transform: none;
    }
}