/* ============================================================
   Quantum Theorist stage art (core/theorist-bg.js)

   #thBg sits UNDER the game canvas inside .sceneWrap. Stacking without a
   new stacking context: #thBg and #sceneCanvas are both positioned with
   z-index auto, so they paint in document order (#thBg first, the canvas
   over it), while the overlays, the hub (z 5) and the sheet layer (z 20)
   keep their explicit z-index above both - exactly as before. Making the
   canvas position:relative moves nothing (no offsets); .sceneWrap's only
   other children are positioned or hidden.
   ============================================================ */
#sceneCanvas {
  position: relative;
}

.thBg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  /* The dark the painting fades into, above it on wide screens. */
  background: #05080f;
}

/* Only during the Quantum Theorist, and only while the script shows it. */
.thBg[hidden],
body:not([data-mode="collector"]) .thBg {
  display: none !important;
}

.thBg .thArt {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}

.thBg .thImg,
.thBg .thFx {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  -webkit-user-select: none;
  user-select: none;
}

.thBg .thImg[hidden],
.thBg .thFx[hidden] {
  display: none;
}

/* The top of the painting melts into the dark band under the HUD. */
.thBg .thFade {
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 120px;
  background: linear-gradient(180deg, #05080f 0%, rgba(5, 8, 15, 0.82) 30%, rgba(5, 8, 15, 0) 100%);
}