/* Shared presentation only. Each game keeps its own board and control layout. */
.game-page { width: 100%; max-width: none; margin: 0 auto; padding: max(24px, env(safe-area-inset-top)) max(clamp(8px, 1.7vw, 32px), env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(clamp(8px, 1.7vw, 32px), env(safe-area-inset-left)); box-sizing: border-box; }
.game-page-body { -webkit-text-size-adjust: 100%; }
.game-view { box-sizing: border-box; min-width: 0; }
.game-fullscreen { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; border: 1px solid currentColor; border-radius: 9px; font: inherit; font-size: 14px; line-height: 1.2; cursor: pointer; white-space: nowrap; }
.game-fullscreen:focus-visible { outline: 3px solid #f5bc48; outline-offset: 3px; }
.game-fullscreen:disabled { cursor: wait; }
.game-view-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.game-page-body.game-view-open { overflow: hidden; }
/* Visibility preserves page height/scroll position and removes outside tab stops. */
.game-page-body.game-view-open > :not(.game-page), .game-page-body.game-view-open .game-page > :not(.game-view) { visibility: hidden; }
/* Do not group this selector with :fullscreen: old WebViews must retain fallback. */
.game-page .game-view.is-expanded {
    position: fixed; inset: 0; z-index: 1000; visibility: visible;
    width: 100%; max-width: none; height: 100vh; height: 100dvh; min-height: 0;
    margin: 0; border-radius: 0; box-sizing: border-box;
    overflow: auto; overscroll-behavior: contain;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.game-view:fullscreen::backdrop { background: #102a35; }
.game-page .game-view.is-expanded .game-view-toolbar { position: sticky; top: 0; z-index: 20; background: var(--game-toolbar-bg, #f8fafc); border-radius: 9px; box-shadow: 0 4px 10px #0002; }
@media (max-width: 520px) {
    .game-page { padding-top: max(16px, env(safe-area-inset-top)); }
    .game-page .game-view.is-expanded { padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)); }
}

/* Keep the active game in one viewport; individual boards own their scrolling. */
html:has(.game-page-body) { height: 100%; }
body.game-page-body { height: 100vh; height: 100dvh; margin: 0; overflow: hidden; }
.game-page-body > #site-header, .game-page-body > #site-footer { display: none; }
.game-page-body > .game-page {
    display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: none;
    height: 100%; min-height: 0; margin: 0;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}
.game-page > h1 { display: none; }
.game-page > p { flex: none; margin: 0; font-size: 12px; line-height: 1.4; }
.game-page > p:first-child { display: flex; align-items: center; gap: 6px; min-height: 28px; }
.game-page > .game-view { flex: 1 1 0; min-height: 0; margin: 0; overflow: hidden; }
.game-page > .page-footer { display: none; }
.game-page .game-view.is-expanded { overflow: hidden; padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
@media (max-height: 500px) {
    .game-page-body > .game-page { gap: 3px; padding-block: max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-bottom)); }
    .game-page > p:not(:first-child) { display: none; }
    .game-page > p:first-child { min-height: 22px; font-size: 11px; }
}
@media (min-height: 501px) and (max-height: 650px) {
    .game-page > p:not(:first-child) { display: none; }
}