/* ============================================================
   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.
   ============================================================ */

/* ------------------------------------------------------------
   LOCAL FONTS — Kanit (SIL OFL)
   Bundled at public/fonts/kanit/. Loaded here so font is
   available before any JS module runs. Covers all weights
   used by card-panel.js typography system (300–700).
   Italic variants are on disk but not declared — add if needed.
   ------------------------------------------------------------ */
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/kanit/Kanit-Light.ttf') format('truetype'); }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/kanit/Kanit-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/kanit/Kanit-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/kanit/Kanit-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/kanit/Kanit-Bold.ttf') format('truetype'); }

/* ------------------------------------------------------------
   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;
}

/* ------------------------------------------------------------
   NIGHT OVERLAY — z-index: 5
   Full-bleed CSS gradient div. Above panorama, below alive-layer.
   Managed by night-layer.js. Subscribes to atmo:update.
   Background set inline by JS — starts transparent.
   T112: new — atmosphere consumer (Phase 4).
   ------------------------------------------------------------ */
#night-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  background: transparent;
}

/* ------------------------------------------------------------
   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; }

/* ------------------------------------------------------------
   CAUSTIC LAYER — z-index: 15
   Full-bleed container for animated CSS caustic light bands.
   Above alive-layer, below fx-layer canvas.
   Managed by fx-layer.js. Band children created at runtime.
   Clipped to caustic zone via clipPath set inline by JS.
   T112: new — atmosphere consumer (Phase 4).
   ------------------------------------------------------------ */
#caustic-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 15;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
}

#caustic-layer .caustic-band {
  position: absolute;
  left: -30%;
  width: 160%;
  pointer-events: none;
}

#fx-layer      { z-index: 20; }

/* ------------------------------------------------------------
   LIGHTNING FLASH — z-index: 25
   Full-bleed white flash overlay for lightning strikes.
   Above fx-layer canvas, below mist-layer.
   Managed by fx-layer.js. Opacity animated inline by JS.
   T112: new — atmosphere consumer (Phase 4).
   ------------------------------------------------------------ */
#lightning-flash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 25;
  pointer-events: none;
}

#mist-layer    { z-index: 30; }
#hotspot-layer {
  z-index: 40;
  pointer-events: auto; /* receives touch/click for POI interaction */
}
#hotspot-layer canvas { pointer-events: auto; /* override global canvas rule — T150 */ }

/* ------------------------------------------------------------
   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;
}

/* ------------------------------------------------------------
   MOBILE — HALF-SHEET CARD LAYOUT (Phase 3 — T98)
   Viewport-class CSS classes set by app.js _detectViewport().
   phone: diorama-phone   (<768px shortest dimension)
   tablet: diorama-tablet  (768–1023px shortest dimension)
   Both inherit half-sheet behavior. Tablet may be promoted to
   desktop behavior later if needed.
   ------------------------------------------------------------ */

/* Card panel: on mobile, needs to allow fixed children to escape */
html.diorama-phone #card-panel,
html.diorama-tablet #card-panel {
  position: static;
  z-index: 50;
}

/* Hide dial on phone and tablet — replaced by mobile footer filmstrip.
   T125: extended to tablet (was phone-only). Tablet was rendering both
   dial and footer simultaneously — wasted resources, overlapping UI.
   Future: manifest-driven toggle (installation.navigation.mobile_mode)
   will replace this CSS rule for per-deployment control. */
html.diorama-phone #dial-controller,
html.diorama-tablet #dial-controller {
  display: none;
}

/* Hide corner triangles on mobile — absorbed by mobile footer */
html.diorama-phone .gp-triangle,
html.diorama-tablet .gp-triangle {
  display: none !important;
}

/* Narrative ticker — reposition above footer on mobile */
html.diorama-phone #narrative-ticker,
html.diorama-tablet #narrative-ticker {
  bottom: 56px; /* above mobile footer bar */
}

/* Touch-friendly: increase hotspot hit area on mobile */
html.diorama-phone #hotspot-layer,
html.diorama-tablet #hotspot-layer {
  touch-action: manipulation;
}

/* Prevent body bounce / overscroll on iOS */
html.diorama-phone,
html.diorama-phone body,
html.diorama-tablet,
html.diorama-tablet body {
  overscroll-behavior: none;
  touch-action: manipulation;
}

/* ------------------------------------------------------------
   MOBILE — PHASE 6: RESPONSIVE CSS (T99)

   Typography scaling — reduce card and ticker font sizes on
   phone viewports. Tablet inherits phone rules for now; can
   be split later if needed.

   Touch targets — minimum 44px on interactive elements.

   Transport bar — hidden on phone (replaced by mobile footer
   prev/next and filmstrip). Retained on tablet.

   Narrative ticker — repositioned above footer, smaller font,
   reduced letter-spacing for narrower screens.
   ------------------------------------------------------------ */

/* ── Typography scaling ──────────────────────────────────── */

/* Card title: desktop uses manifest value (typically 28-36px).
   On phone, cap at a readable size that doesn't dominate the
   half-sheet / side-sheet card. */
html.diorama-phone .diorama-card .card-block-title {
  font-size: clamp(18px, 4.5vw, 24px) !important;
  letter-spacing: 0.06em;
}
html.diorama-phone .diorama-card .card-block-title p {
  font-size: inherit !important;
}

/* Card body text */
html.diorama-phone .diorama-card .card-block-body {
  font-size: clamp(14px, 3.5vw, 18px) !important;
  line-height: 1.45;
}
html.diorama-phone .diorama-card .card-block-body p {
  font-size: inherit !important;
}

/* Tablet — slightly larger than phone, smaller than desktop */
html.diorama-tablet .diorama-card .card-block-title {
  font-size: clamp(20px, 3.2vw, 28px) !important;
}
html.diorama-tablet .diorama-card .card-block-title p {
  font-size: inherit !important;
}
html.diorama-tablet .diorama-card .card-block-body {
  font-size: clamp(15px, 2.4vw, 20px) !important;
  line-height: 1.45;
}
html.diorama-tablet .diorama-card .card-block-body p {
  font-size: inherit !important;
}

/* ── Narrative ticker — mobile sizing ────────────────────── */

html.diorama-phone #narrative-ticker {
  padding-bottom: 2vh;
}
html.diorama-phone #narrative-ticker-label {
  font-size: clamp(10px, 2.5vw, 14px);
  letter-spacing: 0.12em;
}
html.diorama-tablet #narrative-ticker-label {
  font-size: clamp(11px, 1.6vw, 16px);
  letter-spacing: 0.14em;
}

/* ── Transport bar — hidden on phone ─────────────────────── */

html.diorama-phone #transport-bar {
  display: none !important;
}

/* ── Touch targets — minimum 44px on phone ───────────────── */

html.diorama-phone .mf-corner-btn,
html.diorama-phone .mf-arrow,
html.diorama-phone .mf-float-arrow {
  min-width: 44px;
  min-height: 44px;
}

/* @version T150 — 2026-05-24 */