/* ============================================================================ * zen/components/canvas/canvas.css * ---------------------------------------------------------------------------- * — module root. The scene scaffold (.z-scene / .z-world / * canvas.z-canvas) is injected by canvas.js and already styled by core.css * (including the 1920×1080 letterbox frame). HUD / footer / curtain overlays * are `position: fixed`. The custom element itself is `display: contents`, * so it never constrains its children's layout. * * This file defines: * - zen-canvas root rules (display:contents) * - .zen-footer 3-slot bar (brand | hints | chapter) * - responsive hide rules when .no-hud is set on * * Intentionally minimal — visuals of the chrome live here and nowhere else so * a module can override them by redefining .zen-footer without touching * core.css. HUD banner styles stay in core.css (load-bearing). * ============================================================================ */ /* zen-canvas is a positioning-neutral shell: the HUD/footer/curtain it injects * use their own `position: fixed`, and the `.z-scene` inside is self-positioned * by core.css (fixed 1920×1080, centered, letterbox-scaled via --z-fit). * * `display: contents` removes the custom element from the visual box tree so * it can never constrain the letterbox or create an accidental stacking / * transform-containing-block ancestor. All children render as if siblings of * , which is what both the scene and the HUD overlays want. */ zen-canvas { display: contents; } /* ─── Footer bar ──────────────────────────────────────────────────────────── * 3-slot grid: brand (left) / hints (center) / chapter (right). Fixed at the * bottom, above the scene but below any modal overlay (z-index 30, curtain is * 50). Opacity fades in via .show when the canvas is ready (canvas.js adds it * automatically after first paint). */ .zen-footer { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 10px 28px 14px; background: linear-gradient(0deg, rgba(13, 17, 23, 0.85) 0%, rgba(13, 17, 23, 0.0) 100%); color: var(--gray); font-size: 0.85rem; letter-spacing: 0.2px; z-index: 30; pointer-events: none; opacity: 0; transition: opacity 0.5s var(--ease-natural); } .zen-footer.show { opacity: 1; } .zen-footer__brand { justify-self: start; font-weight: 700; color: var(--white); letter-spacing: 1px; opacity: 0.85; } .zen-footer__hints { justify-self: center; font-family: 'Courier New', monospace; font-size: 0.78rem; color: var(--gray); opacity: 0.7; white-space: nowrap; } .zen-footer__chapter { justify-self: end; color: var(--cyan); font-weight: 600; text-align: right; max-width: 42vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Iframe / embed mode — hide the footer with the rest of the chrome. */ body.no-hud .zen-footer { display: none !important; } /* Fade footer in on first paint. canvas.js flips .show after layout.apply. * We keep the transition so re-showing (e.g. after goTo + reset) stays smooth.*/ zen-canvas.a-ready .zen-footer { opacity: 1; }