/* ============================================================ Fullscreen game shell. Opt in by putting class="game-fit" on . The page then fills the viewport exactly and never scrolls: the site header/footer are hidden, the body becomes a fixed-height flex column, and the element you mark with class="game-fit-main" flexes to fill whatever space is left. A small floating button returns the player home (since the header - the usual way out - is gone). Games keep their own internal layout; this only owns the outer shell. ============================================================ */ html, body { height: 100%; } body.game-fit { margin: 0; height: 100vh; /* fallback */ height: 100dvh; /* tracks the *dynamic* viewport (mobile URL bar) */ overflow: hidden; display: flex; flex-direction: column; min-height: 0; } /* Keep a SLIM site header at the top (branding + a way home + a little breathing room) as a static flex item - the play area below flexes to absorb its height, so the page still never scrolls. The footer is dropped to save that space. */ body.game-fit .site-header { position: static; flex: 0 0 auto; padding: .5rem 1.15rem; } body.game-fit .site-footer { display: none !important; } /* With the header back, its logo is the way home, so the floating exit button is redundant. Kept in the DOM (hidden) so a game can opt back into a bare, header-less layout by adding class="game-fit-bare" to . */ body.game-fit .game-exit { display: none; } body.game-fit-bare .site-header { display: none !important; } body.game-fit-bare .game-exit { display: flex; } /* The primary container fills the leftover height and can itself flex. */ body.game-fit .game-fit-main { flex: 1 1 auto; min-height: 0; min-width: 0; } /* Floating "return home" control - replaces the header's logo/back link. Sits above the game but below full-screen modals (which use z-index >= 1000). */ .game-exit { position: fixed; top: .55rem; left: .55rem; z-index: 200; width: 2.15rem; height: 2.15rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; /* light-on-dark: it floats over the graphite page backdrop */ background: rgba(255, 255, 255, .10); color: #fff; font-size: 1.15rem; line-height: 1; text-decoration: none; border: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .15s; } .game-exit:hover { background: rgba(255, 255, 255, .22); text-decoration: none; } .game-exit:active { transform: translateY(1px); }