/* ══════════════════════════════════════════════════════════════════════ 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: column; gap: 4px; align-items: flex-start; } .overlay-levels-btn { font-size: 10px !important; letter-spacing: 0.8px !important; opacity: 0.75; } .overlay-back { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--sym-fg-muted, #907860); cursor: pointer; background: transparent; border: 1px solid var(--sym-hairline, rgba(195,165,105,0.18)); padding: 6px 14px; font-family: var(--sym-font-sans, 'Inter', 'Montserrat', sans-serif); font-weight: 500; transition: color 0.25s, border-color 0.25s, background 0.25s; } .overlay-back:hover { color: var(--sym-fg, #F6F2EB); border-color: var(--sym-gold, rgba(195,165,105,0.5)); background: color-mix(in srgb, var(--sym-gold, #C8A23C) 12%, 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', 'Montserrat', 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: 9px 12px; min-height: 36px; } .overlay-nav-btns, .overlay-lang { flex: 0 0 auto; } }