/* Web game table: size the square inside the remaining viewport, not before
   reserving room for the page heading, player bars and coordinates. */
.play-room .move-table__row {
    background: var(--theme-surface);
}

.play-room .move-table__row:nth-child(even) {
    background: color-mix(in srgb, var(--theme-accent) 9%, var(--theme-surface));
}
.play-room .move-table__number { color: var(--theme-muted); }
.play-room .move-table__cell { color: var(--theme-text); }
.play-room .move-table__cell.is-current {
    color: var(--theme-on-accent);
    background: var(--theme-accent);
}
.play-room .move-list {
    overscroll-behavior: contain;
    scrollbar-color: var(--theme-accent) transparent;
    scrollbar-width: thin;
}
.play-room .game-status-card { padding: 0; }
/* Entry translations otherwise create a temporary document scrollbar when
   switching between mobile and desktop; piece animations are untouched. */
.play-room .play-room-intro,
.play-room .play-board-stage,
.play-room .play-control-deck { animation: none; }

@media (min-width: 901px) {
    body:has(.play-room) main {
        height: 100dvh;
        padding-block: .65rem;
    }
    body .play-room {
        display: flex;
        flex-direction: column;
        height: 100%;
        max-width: 78rem;
        min-height: 0;
    }
    .play-room .play-room-intro {
        flex: 0 0 auto;
        min-height: 0;
        margin-bottom: .6rem;
    }
    .play-room .play-room-intro h1 { font-size: clamp(1.7rem, 2.4vw, 2.2rem); }
    .play-room .play-room-intro .card-note { margin-top: .3rem; }
    .play-room:has([data-play-ingame]:not([hidden])) .play-room-intro {
        display: flex;
        justify-content: center;
    }
    .play-room:has([data-play-ingame]:not([hidden])) .play-room-intro > div {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: baseline;
        gap: .35rem 1rem;
    }
    .play-room:has([data-play-ingame]:not([hidden])) .play-room-kicker { display: none; }
    .play-room:has([data-play-ingame]:not([hidden])) .play-room-intro .card-note { margin: 0; }
    .play-room > .simul-game-switcher,
    .play-room > .fair-play-test-banner { flex: 0 0 auto; }
    .play-room .play-room-layout {
        /* Center the actual two panels, not a wide grid track with an empty
           strip before the board. Flex shrink still protects laptop widths. */
        display: flex;
        justify-content: center;
        flex: 1 1 0;
        min-height: 0;
        width: 100%;
        max-width: none;
        gap: clamp(.75rem, 1.6vw, 1.6rem);
        container-type: size;
    }
    .play-room .play-room-layout .play-board-stage {
        flex: 0 1 auto;
        min-width: 0;
        width: min(50rem, calc(100cqh - 1.5rem));
        max-width: 50rem;
        padding: .5rem;
    }
    .play-room .play-room-layout:has([data-play-ingame]:not([hidden])) .play-board-stage {
        width: min(50rem, calc(100cqh - 6.75rem));
        max-width: 50rem;
    }
    .play-room:has([data-play-ingame]:not([hidden])) .play-board-label { display: none; }
    .play-room .play-board-label { line-height: 1rem; margin-bottom: .35rem; }
    .play-room .player-bar {
        height: 48px;
        min-height: 48px;
        padding: .3rem .5rem;
    }
    .play-room .player-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .play-room .play-control-deck {
        flex: 0 0 clamp(250px, 25vw, 22.5rem);
        position: static;
        width: 100%;
        max-width: none;
        min-height: 0;
        max-height: 100%;
        align-self: stretch;
    }
    .play-room .play-panel { min-height: 0; max-height: 100%; }
    .play-room .game-status-card:not([hidden]) { display: flex; flex-direction: column; height: 100%; }
    .play-room .play-panel-head { flex: 0 0 auto; padding: 1rem 1.2rem; }
    .play-room .play-game-body {
        display: flex;
        flex: 1 1 0;
        min-height: 0;
        padding: .85rem 1.2rem 1rem;
    }
    .play-room [data-play-live-controls] {
        display: flex;
        flex-direction: column;
        flex: 1 1 0;
        min-width: 0;
        min-height: 0;
    }
    .play-room .move-list { flex: 1 1 0; min-height: 0; max-height: none; }
    .play-room .game-toolbar { flex: 0 0 auto; padding-top: .65rem; }
    .play-room .game-toolbar .icon-btn { min-width: 0; min-height: 48px; }
    .play-room .play-result { width: 100%; align-content: start; overflow-y: auto; overscroll-behavior: contain; }
}

/* On a phone the board stays above a compact history/toolbar. Only the history
   scrolls; both clocks and all actions remain above the navigation dock. */
@media (max-width: 900px) {
    body:has(.play-room [data-play-ingame]:not([hidden])) .shell { padding-bottom: 0; }
    body:has(.play-room [data-play-ingame]:not([hidden])) main {
        height: calc(100dvh - var(--mobile-dock-space));
        padding: max(3.4rem, env(safe-area-inset-top)) .4rem .35rem;
    }
    body .play-room:has([data-play-ingame]:not([hidden])) {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
    }
    .play-room:has([data-play-ingame]:not([hidden])) .play-room-intro { display: none; }
    .play-room .play-room-layout:has([data-play-ingame]:not([hidden])) {
        flex: 1 1 0;
        min-height: 0;
        width: 100%;
        max-width: none;
        margin: 0;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        gap: .4rem;
        container-type: size;
    }
    .play-room .play-room-layout:has([data-play-ingame]:not([hidden])) .play-board-stage {
        width: min(100%, calc(100cqh - 18rem));
        max-width: none;
        padding: .28rem;
        justify-self: center;
    }
    .play-room:has([data-play-ingame]:not([hidden])) .play-board-label { display: none; }
    .play-room:has([data-play-ingame]:not([hidden])) .player-bar { height: 48px; min-height: 48px; padding: .25rem .4rem; }
    .play-room:has([data-play-ingame]:not([hidden])) .play-control-deck {
        position: static;
        width: 100%;
        max-width: 46rem;
        min-height: 0;
        height: 100%;
        align-self: stretch;
    }
    .play-room .game-status-card:not([hidden]) { display: flex; flex-direction: column; height: 100%; min-height: 0; }
    .play-room:has([data-play-ingame]:not([hidden])) .play-panel-head-live { padding: .4rem .7rem; }
    .play-room:has([data-play-ingame]:not([hidden])) .play-panel-index,
    .play-room:has([data-play-ingame]:not([hidden])) .game-status-header { display: none; }
    .play-room:has([data-play-ingame]:not([hidden])) .play-status { margin: 0; font-size: .8rem; }
    .play-room:has([data-play-ingame]:not([hidden])) .play-game-body {
        display: flex;
        flex: 1 1 0;
        min-height: 0;
        padding: .25rem .5rem .4rem;
    }
    .play-room:has([data-play-ingame]:not([hidden])) [data-play-live-controls] {
        display: flex;
        flex-direction: column;
        flex: 1 1 0;
        min-width: 0;
        min-height: 0;
    }
    .play-room:has([data-play-ingame]:not([hidden])) .play-moves-heading { display: none; }
    .play-room:has([data-play-ingame]:not([hidden])) .move-list { flex: 1 1 0; min-height: 0; max-height: none; }
    .play-room:has([data-play-ingame]:not([hidden])) .game-toolbar { flex: 0 0 auto; margin-top: .2rem; padding-top: .25rem; }
    .play-room:has([data-play-ingame]:not([hidden])) .game-toolbar .icon-btn { min-height: 48px; }
    .play-room:has([data-play-ingame]:not([hidden])) .play-result { width: 100%; overflow-y: auto; }
    .play-room:has([data-play-ingame]:not([hidden])) .player-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (min-width: 600px) and (max-width: 900px) and (max-height: 520px) {
    body:has(.play-room [data-play-ingame]:not([hidden])) { padding-bottom: 0; }
    body:has(.play-room [data-play-ingame]:not([hidden])) main { padding-top: .35rem; }
    .play-room .play-room-layout:has([data-play-ingame]:not([hidden])) {
        grid-template-columns: minmax(0, 1fr) minmax(220px, 42%);
        grid-template-rows: minmax(0, 1fr);
    }
    .play-room .play-room-layout:has([data-play-ingame]:not([hidden])) .play-board-stage {
        width: min(100%, calc(100cqh - 6.5rem));
    }
    .play-room:has([data-play-ingame]:not([hidden])) .play-control-deck { padding-top: 3rem; }
}