/* The atmosphere canvas is placed exactly over the scene image it animates (atmosphere.js sets its box). */

.age-atmosphere-canvas {
  position: absolute;
  z-index: 0;
  image-rendering: pixelated;
  pointer-events: none;
}

/*
 * The depth layer sits just above the room and its effects. Walk-behind layers (the room's own foreground
 * pixels) and depth-sorted sprites inside it are stacked by their baselines (atmosphere.js sets each z-index).
 * Overlays that don't join the depth sort keep their own z and stay above it (from z 2).
 */
.age-depth-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Movers: placed and stacked by movers.js; the whole-pixel look comes from the sprite's own pixels. */
.age-mover {
  position: absolute;
  height: auto;
  image-rendering: pixelated;
  pointer-events: none;
  transform-origin: 50% 100%;
}

.age-walk-behind {
  position: absolute;
  image-rendering: pixelated;
  pointer-events: none;
}

/* Effect regions (dev only): hidden until the scene editor's "Edit layout" mode shows them. */
.age-effect-region {
  position: absolute;
  z-index: 85;
  display: none;
  box-sizing: border-box;
  border: 2px dashed rgba(255, 179, 71, 0.95);
  background: rgba(255, 179, 71, 0.08);
  transform: translate(-50%, -50%);
}

/* An idle loop's box sits over its sprite (atmosphere.js places it, in pixels) and can't be dragged. */
.age-effect-region--idle {
  border-color: rgba(150, 200, 255, 0.95);
  background: rgba(150, 200, 255, 0.08);
  transform: none;
}

/* A sprite's depth box sits over the sprite, like an idle loop's. */
.age-effect-region--sprite {
  border-color: rgba(255, 143, 163, 0.9);
  background: rgba(255, 143, 163, 0.06);
  transform: none;
}

/* An outlined item's box is its outline's extent (left/top corner); the scene editor draws the outline itself. */
.age-effect-region--shape {
  border: 1px dotted rgba(140, 255, 200, 0.6);
  background: transparent;
  transform: none;
}

.age-effect-region-label {
  position: absolute;
  left: 0;
  bottom: 100%;
  padding: 0 0.3rem;
  background: rgba(40, 22, 0, 0.85);
  color: #ffd9a8;
  font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}