/* ============================================================
   DIORAMA ENGINE — base.css
   Structural layout only. No colors, no fonts, no visual design.
   All visual design lives in individual module CSS or inline via JS.
   ============================================================ */

/* ------------------------------------------------------------
   RESET
   ------------------------------------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ------------------------------------------------------------
   ROOT
   ------------------------------------------------------------ */
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------
   APP CONTAINER
   All layers are positioned absolutely within this.
   ------------------------------------------------------------ */
#app {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ------------------------------------------------------------
   VIDEO LAYER — z-index: 0
   Full-bleed. object-fit: cover preserves aspect ratio.
   src set at runtime by video-controller.js.
   ------------------------------------------------------------ */
#main-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  display: block;
}

/* ------------------------------------------------------------
   CANVAS LAYERS
   All transparent. All full-bleed over video.
   pointer-events: none by default — hotspot-layer overrides.
   JS is responsible for setting canvas width/height in pixels
   to match actual rendered dimensions (devicePixelRatio aware).
   ------------------------------------------------------------ */
canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
  background: transparent;
}

#alive-layer   { z-index: 10; }
#fx-layer      { z-index: 20; }
#mist-layer    { z-index: 30; }
#hotspot-layer {
  z-index: 40;
  pointer-events: auto; /* receives touch/click for POI interaction */
}

/* ------------------------------------------------------------
   STAGE BLUR OVERLAY — z-index: 42
   Full-bleed backdrop-filter layer. Inactive by default.
   blur-stage-active class applied by card-panel.js per-POI.
   pointer-events: none always — interaction handled by layers above.
   ------------------------------------------------------------ */
#stage-blur-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 42;
  pointer-events: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: transparent;
}

#stage-blur-overlay.blur-stage-active {
  backdrop-filter: blur(var(--stage-blur-radius, 8px));
  -webkit-backdrop-filter: blur(var(--stage-blur-radius, 8px));
}

/* ------------------------------------------------------------
   DOM OVERLAY BASE CLASS
   All DOM overlay panels share this base.
   Individual panels set their own z-index.
   ------------------------------------------------------------ */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* children opt in via pointer-events: auto */
}

#narrative-ticker { z-index: 45; }
#card-panel       { z-index: 50; }
#dial-controller  {
  z-index: 60;
  /* Required for CSS rotateX perspective tilt applied by dial-controller.js.
     preserve-3d ensures the canvas child renders correctly in 3D space
     rather than being flattened back to the stacking context. */
  transform-style: preserve-3d;
}
#admin-panel      { z-index: 70; }
#authoring-mode   { z-index: 80; }

/* ------------------------------------------------------------
   UTILITY — HIDDEN STATE
   Applied by JS to suppress panels until ready.
   ------------------------------------------------------------ */
.hidden {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}

/* ------------------------------------------------------------
   KIOSK HARDENING (Phase 9 — active now as a defensive baseline)
   Prevents text selection and context menus on touch/kiosk displays.
   ------------------------------------------------------------ */
#app {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}