/* Cultural Games — fullscreen.css Fullscreen mode: native API + CSS fallback (iOS Safari) Z-INDEX STACK: Game UI base: 1–99 Game overlays: 100–499 Tutorial tooltips: 1100 Achievement toasts: 1200 Fullscreen layer: 1250 Game-over overlay: 1280 Fullscreen button: 1300 */ /* ── Feature detection class on ── */ html.fs-supported .fs-toggle { display: flex; } html.fs-css-only .fs-toggle { display: flex; } /* ── Toggle button ── */ .fs-toggle { position: absolute; bottom: 0.75rem; right: 0.75rem; width: 36px; height: 36px; background: rgba(0,0,0,0.55); border: none; border-radius: 6px; cursor: pointer; z-index: 1300; transition: background 150ms ease, opacity 150ms ease; display: none; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; } .fs-toggle:hover { background: rgba(0,0,0,0.8); } .fs-toggle:focus-visible { outline: 3px solid var(--color-accent-gold, #C89B3C); outline-offset: 2px; } .fs-toggle__icon { width: 18px; height: 18px; display: block; } .fs-toggle__icon--exit { display: none; } /* icon swap */ .fs-game-wrap.fs-active .fs-toggle__icon--enter, .fs-game-wrap:fullscreen .fs-toggle__icon--enter, .fs-game-wrap:-webkit-full-screen .fs-toggle__icon--enter { display: none; } .fs-game-wrap.fs-active .fs-toggle__icon--exit, .fs-game-wrap:fullscreen .fs-toggle__icon--exit, .fs-game-wrap:-webkit-full-screen .fs-toggle__icon--exit { display: block; } /* button fixed inside native fullscreen */ .fs-game-wrap:fullscreen .fs-toggle { position: fixed; bottom: 0.75rem; right: 0.75rem; top: auto; } .fs-game-wrap:-webkit-full-screen .fs-toggle { position: fixed; bottom: 0.75rem; right: 0.75rem; top: auto; } /* ── Wrapper — always relative so button positions correctly ── */ .fs-game-wrap { position: relative; } /* ── CSS fullscreen fallback ── */ .fs-game-wrap.fs-active { position: fixed !important; inset: 0 !important; z-index: 1250 !important; width: 100vw !important; height: 100vh; height: 100dvh !important; overflow: hidden; background: #111; display: block !important; animation: fs-expand 180ms ease forwards; } @media (prefers-reduced-motion: reduce) { .fs-game-wrap.fs-active { animation: none; } } @keyframes fs-expand { from { opacity: 0.7; } to { opacity: 1; } } /* body scroll lock */ .fs-body-lock { overflow: hidden; position: fixed; width: 100%; } /* ── Native fullscreen — position: relative makes #fs-game-wrap the containing block for the absolutely-positioned canvas ── */ .fs-game-wrap:fullscreen { background: #111; display: block !important; width: 100vw; height: 100dvh; position: relative !important; } .fs-game-wrap:-webkit-full-screen { background: #111; display: block !important; width: 100vw; height: 100dvh; position: relative !important; } .fs-game-wrap::backdrop { background: #111; } /* ── In fullscreen, game-container fills wrapper ── */ .fs-game-wrap.fs-active .game-container, .fs-game-wrap:fullscreen .game-container, .fs-game-wrap:-webkit-full-screen .game-container { border-radius: 0 !important; border: none !important; box-shadow: none !important; position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; padding: 0 !important; /* background intentionally NOT overridden — games like Bau Cua rely on it */ } /* ── Canvas: JS moves it to be a direct child of #fs-game-wrap and applies inline styles. This rule is a safety fallback only. ── */ .fs-game-wrap.fs-active canvas, .fs-game-wrap:fullscreen canvas, .fs-game-wrap:-webkit-full-screen canvas { display: block; } /* ── DOM games: root element must fill the fullscreen game-container ── Canvas games are handled by JS (canvas moved + transform:scale). DOM games have no canvas; their root div must fill height:100% so the game background covers the whole container (no brown gap at bottom). ── */ .fs-game-wrap.fs-active .tl-game, .fs-game-wrap.fs-active .oaq-game, .fs-game-wrap.fs-active .ow-game, .fs-game-wrap.fs-active .pg-game, .fs-game-wrap.fs-active .pt-game-wrap, .fs-game-wrap.fs-active .pu-game-wrap, .fs-game-wrap.fs-active .mj-wrap, .fs-game-wrap.fs-active .bc-game, .fs-game-wrap:fullscreen .tl-game, .fs-game-wrap:fullscreen .oaq-game, .fs-game-wrap:fullscreen .ow-game, .fs-game-wrap:fullscreen .pg-game, .fs-game-wrap:fullscreen .pt-game-wrap, .fs-game-wrap:fullscreen .pu-game-wrap, .fs-game-wrap:fullscreen .mj-wrap, .fs-game-wrap:fullscreen .bc-game, .fs-game-wrap:-webkit-full-screen .tl-game, .fs-game-wrap:-webkit-full-screen .oaq-game, .fs-game-wrap:-webkit-full-screen .ow-game, .fs-game-wrap:-webkit-full-screen .pg-game, .fs-game-wrap:-webkit-full-screen .pt-game-wrap, .fs-game-wrap:-webkit-full-screen .pu-game-wrap, .fs-game-wrap:-webkit-full-screen .mj-wrap, .fs-game-wrap:-webkit-full-screen .bc-game { height: 100% !important; min-height: 0 !important; border-radius: 0 !important; box-sizing: border-box; overflow: auto; } /* ── Screen reader only ── */ .fs-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }