/* ══════════════════════════════════════════════════════════════════════ SHARED GAME-OVERLAY CHROME (synthesis shell) Ver1 games inject their own dark inner UI but rely on a SHARED set of `.game-overlay` / `.overlay-*` container rules that lived in Ver1's css/main.css and were NOT carried into the synthesis shell. Without them every launched game rendered transparent, in-flow and unpositioned (z-index:auto, background:transparent) — i.e. the game launched but was invisible, with the alabaster home bleeding through. This file restores ONLY the overlay container chrome, self-contained (concrete dark values, no dependency on --dark-* tokens that the shell does not define). A game's own game.css still styles its inner content. ══════════════════════════════════════════════════════════════════════ */ :root { /* fallbacks for any Ver1 game CSS that references these tokens */ --dark-base: #18100A; --dark-panel: #201408; --dark-border: rgba(195,165,105,0.14); } .game-overlay { display: none; position: fixed; inset: 0; /* Full-screen takeover: sit ABOVE the persistent cookie bar (7500) and guide tips (8000) so a launched game isn't partly covered by them. Stays below the first-run onboarding gate (9000) and the admin panel (9600). */ z-index: 8500; background: #18100A; /* var(--dark-base) */ flex-direction: column; padding-bottom: env(safe-area-inset-bottom); } .game-overlay.active { display: flex; animation: none; } /* Theme-adaptive chrome: the bar follows the active synthesis theme via the --sym-* tokens (mirrored onto in app.js render). The previous fixed dark values remain as fallbacks for any overlay shown before a theme is set. */ .overlay-topbar { display: flex; align-items: center; justify-content: space-between; padding: 4px 2rem; padding-top: max(4px, env(safe-area-inset-top)); padding-left: max(2rem, calc(1rem + env(safe-area-inset-left))); padding-right: max(2rem, calc(1rem + env(safe-area-inset-right))); min-height: 52px; background: var(--sym-bg-panel, #201408); border-bottom: 1px solid var(--sym-hairline, rgba(195,165,105,0.14)); flex-shrink: 0; } .overlay-nav-btns { display: flex; flex-direction: row; gap: 8px; align-items: center; flex-wrap: wrap; } /* ── The ONE back/nav button style, shared by every overlay ────────────── Same silhouette as the shell's primary action (.sc-cta): pill, sans, 700, terracotta accent. Individual games must NOT restyle this — it is the app's navigation chrome, not per-exercise decoration. */ .overlay-back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sym-font-sans, 'Alegreya Sans', system-ui, sans-serif); font-weight: 700; font-size: 12.5px; letter-spacing: 0.02em; text-transform: none; line-height: 1; white-space: nowrap; color: var(--sym-terra-dk, #9C3F1F); cursor: pointer; background: color-mix(in srgb, var(--sym-terra, #C5572F) 10%, transparent); border: 1.5px solid color-mix(in srgb, var(--sym-terra, #C5572F) 34%, transparent); border-radius: 999px; padding: 9px 17px; min-height: 36px; transition: color 0.18s, border-color 0.18s, background 0.18s, transform 0.14s; } .overlay-back:hover { color: #fff; border-color: transparent; background: var(--sym-terra-dk, #9C3F1F); transform: translateY(-1px); } .overlay-back:focus-visible { outline: 2px solid var(--sym-terra, #C5572F); outline-offset: 2px; } /* Secondary step ("back to level/text selection") — same pill, quieter fill. */ .overlay-levels-btn { color: var(--sym-fg-muted, #8C7F6B); background: transparent; border-color: color-mix(in srgb, var(--sym-fg, #1E1810) 16%, transparent); } .overlay-levels-btn:hover { color: #fff; background: var(--sym-terra-dk, #9C3F1F); border-color: transparent; } .overlay-title { font-family: var(--sym-font-serif, 'Cormorant Garamond', 'Alegreya', serif); font-size: 16px; font-weight: 400; color: var(--sym-gold, rgba(195,165,105,0.8)); } .overlay-lang { display: flex; border: 1px solid var(--sym-hairline, rgba(255,255,255,0.1)); overflow: hidden; } .overlay-lang button { font-size: 11px; padding: 4px 12px; cursor: pointer; color: var(--sym-fg-muted, #907A68); background: transparent; border: none; font-family: var(--sym-font-sans, 'Inter', 'Alegreya Sans', sans-serif); transition: all 0.15s; letter-spacing: 1px; text-transform: uppercase; } .overlay-lang button.active { background: color-mix(in srgb, var(--sym-fg, #fff) 8%, transparent); color: var(--sym-fg, #F6F2EB); } .overlay-frame { flex: 1; overflow-y: auto; overflow-x: hidden; } /* ── Mobile: keep the shared game-overlay top bar from cramping / overlapping. On a phone the back button(s) + title + lang/mode toggle were colliding because the title never shrank. Give the title the flexible middle slot with an ellipsis, and trim the horizontal padding so all three fit. ── */ @media (max-width: 560px) { .overlay-topbar { gap: 8px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); } .overlay-title { flex: 1 1 auto; min-width: 0; font-size: 13px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .overlay-back { padding: 8px 13px; min-height: 34px; font-size: 11.5px; } .overlay-nav-btns { flex: 0 0 auto; flex-direction: column; align-items: flex-start; gap: 5px; } .overlay-lang { flex: 0 0 auto; } }