/* ============================================================================ PlayPuzzle Games — shared in-game header menu kit ---------------------------------------------------------------------------- A self-contained, collision-proof header bar for the standalone games under apps/games/public//. Matches the look of the hand-rolled `.site-game-header` already used by maze-game / table-quest / handwriting-hero, but every selector is namespaced `.ppgh*` and every value is hard-coded, so it can be dropped into any game without depending on that game's CSS variables or colliding with its existing class names. HOW TO ADD TO A GAME 1. In : 2. Add `ppgh-body` to the class list (enables the flex layout that keeps a full-screen game from being clipped under the header). 3. Paste this markup as the FIRST child of (before the game root): The game's own root element (e.g. #app, main, .layout) then fills the space below the header via the `.ppgh-body > :not(.ppgh)` flex rule. ========================================================================== */ .ppgh { position: sticky; /* stays pinned even if a game insists on 100vh content */ top: 0; z-index: 100; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px max(16px, calc((100% - 1120px) / 2)); background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(46, 42, 58, 0.08); box-sizing: border-box; } .ppgh-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #2E2A3A; min-width: 0; } /* The brand is the PlayPuzzle wordmark image. It is applied to the existing `.ppgh-mark` span (which the markup already carries as an aria-hidden "P") via background-image, so every game picks up the logo from this stylesheet alone — no edits to nine separate game HTML files, and no chance of one drifting out of step. Image is 420x74, ratio 5.676:1; width below is height x ratio. It lives under /shared/ deliberately: each game's service worker only handles requests to its own folder or /shared/, so anywhere else the logo would fail to load offline. */ .ppgh-mark { width: 193px; height: 34px; flex: 0 0 auto; border-radius: 0; background: url('/shared/logo-wordmark.png') left center / contain no-repeat; /* Collapses the literal "P" the markup still contains. The link keeps its accessible name from aria-label, so nothing is lost to screen readers. */ font-size: 0; color: transparent; line-height: 0; } .ppgh-brand-text { min-width: 0; } /* The wordmark already says "PlayPuzzle", so the text beside it would be a duplicate; the per-game name below it stays. */ .ppgh-brand strong { display: none; } .ppgh-brand small { color: #7a7488; font-size: 13px; font-weight: 700; display: block; white-space: nowrap; font-family: 'Nunito', system-ui, sans-serif; } .ppgh-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .ppgh-btn { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 8px 14px; border: none; border-radius: 12px; background: #fff; box-shadow: 0 10px 30px rgba(46, 42, 58, 0.12); cursor: pointer; text-decoration: none; font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; font-size: 14px; color: #2E2A3A; } .ppgh-btn:active { transform: scale(0.95); } .ppgh-btn:focus-visible { outline: 3px solid #facc15; outline-offset: 2px; } .ppgh-label { white-space: nowrap; } /* Layout host: turn into a column so the header sits above the game. The header is `position: sticky`, so games whose own root is hard-wired to 100vh (common in compiled SPAs) simply scroll the last header-height under a pinned bar rather than being clipped. Games with a flexible root (the kids family, whose screens are position:absolute) get their root flexed to fill the remaining space exactly, so they never scroll at all. */ body.ppgh-body { display: flex; flex-direction: column; min-height: 100dvh; /* Allow the page to scroll when a game's content is taller than the viewport (tall menu pages, or SPAs hard-wired to 100vh). The sticky header stays pinned, so nothing is ever clipped. Overrides a game's own `body { overflow: hidden }`; fixed-viewport games simply never scroll. */ overflow-y: auto; -webkit-overflow-scrolling: touch; } /* The game root fills the space under the header. `height: auto` drops a game root's own `height: 100dvh` (which would otherwise add a header's worth of overflow), then `flex: 1` grows it to fill the remaining viewport for fixed-layout games, or to its content for tall scrolling games. */ body.ppgh-body > #app, body.ppgh-body > #root, body.ppgh-body > main, body.ppgh-body > .app, body.ppgh-body > .layout, body.ppgh-body > .game-root { flex: 1 1 auto; min-height: 0; height: auto; } /* ── Phones: brand on its own line, actions right-aligned ────────────────── */ @media (max-width: 560px) { .ppgh { flex-wrap: wrap; row-gap: 6px; padding: 7px 12px; gap: 8px; } .ppgh-brand { gap: 8px; flex: 0 1 auto; min-width: 0; } /* 148x26 keeps the logo narrower than the old mark-plus-text brand (~170px), so it cannot make the header wrap where it did not before. */ .ppgh-mark { width: 148px; height: 26px; } .ppgh-brand small { display: none; } .ppgh-actions { gap: 6px; } .ppgh-btn { min-height: 36px; padding: 6px 11px; font-size: 13px; } } /* Very narrow phones: shrink rather than wrap the action buttons off-screen. */ @media (max-width: 360px) { .ppgh-mark { width: 125px; height: 22px; } }