/* GuessDaily — base layer: reset + the shared page shell + layout primitives. Deliberately has NO colour or font opinions: every surface paints itself. · the GAME → styles/engine.css (tokens on #game-shell, themed from games/.js) · the HUB → styles/hub.css (tokens on [data-surface="hub"], its own identity) app.js sets `data-surface="game"|"hub"` on so each surface's token set applies to the page canvas as well as its own subtree. Both surfaces honour html[data-theme]. */ :root { --maxw:640px; } /* shared layout primitive (a width, not a colour) */ * { box-sizing:border-box; margin:0; padding:0; } html, body { height:100%; } /* The page is a single full-height flex column with exactly one visible child (#game-shell OR #hub); that child paints its own background, so stays colourless here. */ body { font-family:var(--font-ui, "Inter", system-ui, sans-serif); -webkit-font-smoothing:antialiased; height:100dvh; display:flex; flex-direction:column; overflow:hidden; } .center { width:100%; max-width:var(--maxw, 640px); margin:0 auto; } /* #game-shell wraps everything engine.js drives (topbar/stage/dock/footer/modal/toast) so the hub can hide it wholesale. It carries the flex-column layout that used to live directly on body's children — body itself stays a simple flex column with one full-height child. */ #game-shell { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; height:100%; } #game-shell[hidden] { display:none; } /* #hub is a flex child of body (same 100dvh shell as #game-shell) but scrolls internally — the page itself never needs document-level scroll. */ #hub { flex:1 1 auto; min-height:0; overflow-y:auto; position:relative; } #hub[hidden] { display:none; } /* Shared primitive: both surfaces fade their first paint in. (Each surface's stylesheet opts its own animations out under prefers-reduced-motion.) */ @keyframes fade { from { opacity:0; } to { opacity:1; } } /* Non-production build indicator — unhidden by app.js on a deployed-but-not-production hostname (staging) or an actual local dev server (localhost/127.0.0.1), never on guessdaily.today. A flex:0 0 auto sibling ahead of #game-shell/#hub so it just takes its slice of the 100dvh column rather than overlaying content. Deliberately hardcoded colours, not design tokens — it's an operational flag, not part of either surface's theme, so it must look the same regardless of game/hub or light/dark. Amber = staging (real deploy, treat it seriously); blue = local dev (expected to be scrappy/broken while you work). */ .env-banner { flex:0 0 auto; padding:5px 10px; text-align:center; font-size:11px; font-weight:700; letter-spacing:.04em; } .env-banner[hidden] { display:none; } .env-banner.staging { background:#7a4a00; color:#ffd98a; border-bottom:1px solid #a86a00; } .env-banner.local { background:#123a5e; color:#a9d4ff; border-bottom:1px solid #1c5a8f; }