/* Native immersive ownership pass
   Only fixes layout contracts that belong to the current components. It does
   not create replacement story layers or duplicate controls. */

/* RÉSONANCE: keep the chamber in the viewport while the explanation travels
   through it. No synthetic spacer, no black tunnel, no second carousel. */
.resonance-v2 {
  position: relative !important;
  min-height: 320svh !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.resonance-v2 .resonance-stage {
  position: sticky !important;
  top: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100svh !important;
  min-height: 100svh !important;
  max-height: none !important;
  overflow: hidden !important;
}

.resonance-v2 .eq-story-spacer,
.resonance-v2 .resonance-pass21-scroll-space,
.resonance-v2 .resonance-pass22-carousel {
  display: none !important;
}

.resonance-v2 .resonance-explain {
  position: relative !important;
  z-index: 6 !important;
  min-height: 220svh !important;
  margin-top: 0 !important;
  background: linear-gradient(180deg, transparent 0%, rgba(2,5,7,.10) 18%, rgba(2,5,7,.34) 100%) !important;
}

.resonance-v2 .resonance-hero,
.resonance-v2 .signal-readout,
.resonance-v2 .frequency-rail-wrap,
.resonance-v2 .resonance-explain {
  visibility: visible !important;
}

/* QUANTUM and GAMER LUCIDE already have native sticky journeys. Protect the
   scene ownership contract from old global min-height/fixed-height overrides. */
.quantum-world-page .quantum-world-sticky,
.page-shell-gamer-lucid-room .lucid-stage {
  position: sticky !important;
  top: 0 !important;
  height: 100svh !important;
  max-height: none !important;
  overflow: hidden !important;
}

.quantum-world-page .quantum-dock { display: flex !important; }
.quantum-world-page .quantum-state-panel { display: block !important; }
.quantum-world-page .quantum-explore-hint { display: grid !important; }
.page-shell-gamer-lucid-room .lucid-modes { display: flex !important; }

/* Premium scene/copy integration: keep the 3D world dominant while the copy
   remains readable. These are presentation-only overrides, not new runtimes. */
.quantum-world-page .quantum-hero-copy {
  width: min(34rem, 43vw) !important;
  padding: .72rem .9rem .82rem !important;
  border-left: 1px solid color-mix(in srgb, var(--accent) 45%, transparent) !important;
  background: linear-gradient(90deg, rgba(2,5,13,.55), rgba(2,5,13,.19) 72%, transparent) !important;
  backdrop-filter: blur(7px) saturate(1.04) !important;
}
.quantum-world-page .quantum-hero-copy h1 {
  font-size: clamp(3rem, 5.25vw, 5.55rem) !important;
  line-height: .86 !important;
  text-shadow: 0 .2rem 1.4rem rgba(0,0,8,.72), 0 0 2.1rem color-mix(in srgb, var(--accent) 14%, transparent) !important;
}
.quantum-world-page:not([data-state="0"]) .quantum-hero-copy {
  opacity: .28 !important;
  transform: translateY(-.4rem) scale(.985) !important;
}
.quantum-world-page .quantum-state-panel {
  background: linear-gradient(155deg, rgba(255,255,255,.035), transparent 38%), rgba(5,7,17,.62) !important;
  backdrop-filter: blur(15px) saturate(1.05) !important;
}

/* TRIPPY: the 3D world is the only sticky owner for the whole journey.
   A clipped/scrolling ancestor turns the remaining 470svh journey into a black
   runway, so keep every ancestor of the sticky stage overflow-compatible. */
body:has(.trippy-page) {
  overflow-x: clip !important;
}
body:has(.trippy-page) #main-content,
.trippy-page,
.trippy-page > main,
.trippy-page .trippy-journey {
  overflow: visible !important;
}
.trippy-page .trippy-journey {
  position: relative !important;
  height: 470svh !important;
  min-height: 190rem !important;
  isolation: isolate !important;
  background: transparent !important;
}
.trippy-page .trippy-sticky {
  position: sticky !important;
  top: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100svh !important;
  min-height: 100svh !important;
  max-height: none !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
.trippy-page .trippy-world,
.trippy-page .trippy-world .trippy-canon-runtime,
.trippy-page .trippy-world canvas {
  min-height: 100% !important;
}
.trippy-page .trippy-manifest {
  position: relative !important;
  z-index: 2 !important;
  margin-top: 0 !important;
  background: linear-gradient(180deg, rgba(5,5,16,.94), #070914 38%, #050510 100%) !important;
}

/* TRIPPY: exploration should not make the authored context disappear. Keep
   the title and current chapter as translucent HUD typography instead of ghost
   text, while preserving the scene as the visual focus. */
.trippy-page .trippy-hero {
  width: min(37rem, 46vw) !important;
  padding: .68rem .82rem .78rem !important;
  border-left: 1px solid rgba(255,121,193,.34) !important;
  background: linear-gradient(90deg, rgba(7,5,18,.48), rgba(7,5,18,.14) 76%, transparent) !important;
  backdrop-filter: blur(6px) saturate(1.05) !important;
}
.trippy-page .trippy-hero h1 {
  font-size: clamp(3rem, 6.6vw, 7.05rem) !important;
  line-height: .82 !important;
  text-shadow: 0 .25rem 1.7rem rgba(0,0,0,.8) !important;
}
html[data-trippy-explore="true"] .trippy-page .trippy-hero {
  opacity: .46 !important;
  transform: translateY(-.35rem) scale(.99) !important;
}
html[data-trippy-explore="true"] .trippy-page .trippy-chapters {
  opacity: .62 !important;
}
.trippy-page .trippy-chapters article {
  background: linear-gradient(270deg, rgba(4,8,19,.54), rgba(4,8,19,.06)) !important;
  backdrop-filter: blur(7px) saturate(1.04) !important;
}
.trippy-page .tm-hud__zone,
.trippy-page .tm-hud__telemetry {
  top: max(6.45rem, calc(env(safe-area-inset-top) + 5.7rem)) !important;
}

/* HUB: the title should crown the scene, not cover it. */
body:has(.tesseract-page.hub-luminous) .tn-header h1[data-multiverse-title="true"] {
  width: min(86vw, 54rem) !important;
  gap: .08rem !important;
  margin: .08rem auto .18rem !important;
  pointer-events: none !important;
}
body:has(.tesseract-page.hub-luminous) .hub-title-jp {
  font-size: clamp(1.8rem, 3.9vw, 3.85rem) !important;
  line-height: .96 !important;
  letter-spacing: .055em !important;
  opacity: .94 !important;
  text-shadow: 0 .05em 0 rgba(113,52,79,.82), 0 .1em .18em rgba(38,4,27,.72), 0 0 .34em rgba(255,220,152,.65), 0 0 .6em rgba(255,70,169,.46) !important;
}
body:has(.tesseract-page.hub-luminous) .hub-title-latin {
  margin-top: .12rem !important;
  font-size: clamp(.44rem, .72vw, .67rem) !important;
  letter-spacing: .31em !important;
  opacity: .8 !important;
}

/* Global navigation must always win the z-index contest against WebGL. */
body:has(.quantum-world-page) .nav-shell,
body:has(.page-shell-gamer-lucid-room) .nav-shell,
body:has(.resonance-v2) .nav-shell,
body:has(.trippy-page) .nav-shell { z-index: 12000 !important; }
body:has(.quantum-world-page) .nav-drawer,
body:has(.page-shell-gamer-lucid-room) .nav-drawer,
body:has(.resonance-v2) .nav-drawer,
body:has(.trippy-page) .nav-drawer { z-index: 12100 !important; }
body:has(.quantum-world-page) .nav-drawer-backdrop,
body:has(.page-shell-gamer-lucid-room) .nav-drawer-backdrop,
body:has(.resonance-v2) .nav-drawer-backdrop,
body:has(.trippy-page) .nav-drawer-backdrop { z-index: 12050 !important; }

@media (max-width: 820px) {
  .resonance-v2 { min-height: 340svh !important; }
  .resonance-v2 .resonance-stage,
  .quantum-world-page .quantum-world-sticky,
  .page-shell-gamer-lucid-room .lucid-stage {
    height: 100dvh !important;
    min-height: 100dvh !important;
  }
  .resonance-v2 .resonance-explain { min-height: 240svh !important; }

  .quantum-world-page .quantum-hero-copy {
    width: calc(100vw - 1.6rem) !important;
    padding: .62rem .7rem .68rem !important;
    background: linear-gradient(90deg, rgba(2,5,13,.56), rgba(2,5,13,.12) 80%, transparent) !important;
  }
  .quantum-world-page .quantum-hero-copy h1 {
    font-size: clamp(2.45rem, 11vw, 4rem) !important;
  }

  .trippy-page .trippy-journey {
    height: 540svh !important;
    min-height: 205rem !important;
  }
  .trippy-page .trippy-sticky {
    height: 100dvh !important;
    min-height: 100dvh !important;
  }
  .trippy-page .trippy-hero {
    width: calc(100vw - 1.6rem) !important;
    padding: .55rem .62rem .62rem !important;
  }
  .trippy-page .trippy-hero h1 {
    font-size: clamp(2.55rem, 12vw, 4.65rem) !important;
  }
  html[data-trippy-explore="true"] .trippy-page .trippy-hero {
    opacity: .38 !important;
  }
  html[data-trippy-explore="true"] .trippy-page .trippy-chapters {
    opacity: .7 !important;
  }
  .trippy-page .tm-hud__zone,
  .trippy-page .tm-hud__telemetry {
    top: max(5.35rem, calc(env(safe-area-inset-top) + 4.9rem)) !important;
  }

  body:has(.tesseract-page.hub-luminous) .hub-title-jp {
    font-size: clamp(1.45rem, 7.5vw, 2.7rem) !important;
    white-space: normal !important;
    text-align: center !important;
  }
  body:has(.tesseract-page.hub-luminous) .tn-header h1[data-multiverse-title="true"] {
    width: min(90vw, 36rem) !important;
  }
}