/* scene-canvas.css — Canvas background layer for Amorvia (FINAL) Enabled when is present. */ html, body { height: 100%; } /* ========================= Canvas layer (background) ========================= */ #sceneCanvas{ position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; } /* ========================= Hide legacy IMG background ========================= */ body[data-scene-canvas="on"] .stage .canvas{ display: none !important; } /* Hide legacy images only after canvas has successfully rendered at least once */ body[data-scene-canvas-ready="1"] #bgImg, body[data-scene-canvas-ready="1"] #leftImg, body[data-scene-canvas-ready="1"] #rightImg{ display: none !important; } /* ========================= UI layers above canvas ========================= */ #topBar, #titleAndList, main, .stage, .stage .toolbar, .stage .dialog, #dialog, #choices, #hud, .hud { position: relative; z-index: 10; } /* ========================= Bottom-centered dialog dock ========================= */ body[data-scene-canvas="on"] .stage{ position: relative; box-sizing: border-box; min-height: calc(100vh - 128px); /* room for top bar + title row */ display: grid; grid-template-rows: 1fr auto; align-items: end; padding-bottom: 0px; } body[data-scene-canvas="on"] .stage .dialog{ grid-row: 2; justify-self: center; align-self: end; width: min(980px, calc(100% - 32px)); margin: 0 !important; background: rgba(8, 10, 14, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 12px 40px rgba(0,0,0,0.45); } /* ========================= Readability (dialog text) ========================= */ body[data-scene-canvas="on"] .stage .dialog, body[data-scene-canvas="on"] .stage .dialog *{ color: rgba(255,255,255,0.92) !important; } body[data-scene-canvas="on"] #dialog{ text-shadow: 0 2px 10px rgba(0,0,0,0.65); } /* ========================= Choice buttons text fix ========================= */ body[data-scene-canvas="on"] #choices button, body[data-scene-canvas="on"] #choices .choice, body[data-scene-canvas="on"] .stage .dialog button{ color: rgba(12, 14, 18, 0.95) !important; } /* ========================= Auto-contrast modes ========================= */ body.bg-bright[data-scene-canvas="on"] .stage .dialog{ background: rgba(8, 10, 14, 0.82) !important; } body.bg-dark[data-scene-canvas="on"] .stage .dialog{ background: rgba(10, 12, 16, 0.62) !important; } /* ========================= Mobile tweaks ========================= */ @media (max-width: 768px){ body[data-scene-canvas="on"] .stage{ min-height: calc(100vh - 112px); padding-bottom: 18px; } body[data-scene-canvas="on"] .stage .dialog{ width: calc(100% - 20px); } } /* Prevent tiny page scroll in canvas mode */ body[data-scene-canvas="on"]{ overflow: hidden; } /* Canvas mode: prevent scroll without clipping dropdown */ body[data-scene-canvas="on"]{ overflow-x: hidden; } body[data-scene-canvas="on"] .stage{ overflow: hidden; } /* ========================================================= Choice buttons – LIGHT hover (canvas mode) ========================================================= */ body[data-scene-canvas="on"] #choices button, body[data-scene-canvas="on"] #choices .choice { background: rgba(255, 255, 255, 0.92) !important; color: rgba(12, 14, 18, 0.96) !important; border: 1px solid rgba(0, 0, 0, 0.12); } /* Hover / focus: stay light + readable */ body[data-scene-canvas="on"] #choices button:hover, body[data-scene-canvas="on"] #choices .choice:hover, body[data-scene-canvas="on"] #choices button:focus-visible, body[data-scene-canvas="on"] #choices .choice:focus-visible { background: rgba(255, 255, 255, 0.98) !important; color: rgba(12, 14, 18, 0.98) !important; filter: none !important; box-shadow: 0 6px 18px rgba(0,0,0,0.18); } /* Kill any global darken/brightness hover rules */ body[data-scene-canvas="on"] #choices button:hover *, body[data-scene-canvas="on"] #choices .choice:hover * { color: inherit !important; }