/* Hamster Hustle base scene layout.
 *
 * Every Wave 3 scene composes <Scene>, which renders this 4-layer cake:
 *
 *   .hh-root
 *     .hh-scene
 *       .hh-scene-bg            (painted background, cover-fit)
 *       .hh-stage               (logical 800x450 plane, scale-to-viewport)
 *         .hh-room              (engine roomEl — receives shake transform)
 *           .hh-bob             (engine bobEl — Bob sprite + squash wrap)
 *           [interactive children placed by Wave 3 scene]
 *       .hh-hud-slot            (HUD overlay; HHHud mounts here)
 *
 * Logical-coords + stage-scale = automatic mobile parity (Lesson 1, 12).
 * Every selector is scoped under .hh-root to prevent dojo CSS bleed
 * (Wave 1 risk #5).
 */

.hh-root {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: var(--hh-color-deep);
  color: var(--hh-color-cream);
  font-family: var(--hh-font-body);
}

.hh-root .hh-scene {
  position: absolute;
  inset: 0;
  isolation: isolate;
}

/* Painted background — cover-fit so art always fills the viewport. The
 * stage above it is contain-fit (min-scale) so gameplay stays inside the
 * viewport at any aspect ratio (Lesson 1 trade-off — see dojo-game.css
 * comment for full reasoning). */
.hh-root .hh-scene-bg {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  z-index: var(--hh-z-bg);
}

/* Logical 800x450 coordinate plane. ALL props, cages, Bob, and click
 * targets position themselves in 0..800 / 0..450 space inside this
 * element. The transform handles fit-to-viewport. */
.hh-root .hh-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--hh-logical-w);
  height: var(--hh-logical-h);
  transform: translate(-50%, -50%) scale(var(--hh-stage-scale));
  transform-origin: center center;
  image-rendering: pixelated;
  z-index: var(--hh-z-prop);
}

/* Room — engine.roomEl. Shake transform is applied to its parent
 * (.hh-stage) by the engine so the BG + props + Bob shake together. */
.hh-root .hh-room {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Bob — engine.bobEl. Position is owned by the engine (translate
 * longhand). Sprite size matches the engine's BOB_WIDTH/BOB_HEIGHT
 * hitbox; squash-wrap inside lets the engine apply land/jump CSS classes
 * without clobbering the position transform. */
.hh-root .hh-bob {
  position: absolute;
  left: 0;
  top: 0;
  width: 80px;
  height: 80px;
  pointer-events: none;
  z-index: var(--hh-z-character);
}

.hh-root .hh-bob .bob-squash-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: center bottom;
}

/* Bob sprite stack — engine swaps active state via .bob-active class.
 * 128x128 source art is shifted up 48px and left 24px so its visual
 * bottom aligns with the 80x80 hitbox bottom (Lesson 2). */
.hh-root .hh-bob .bob-sprite {
  position: absolute;
  width: 128px;
  height: 128px;
  margin-top: -48px;
  margin-left: -24px;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
  image-rendering: pixelated;
  pointer-events: none;
}

.hh-root .hh-bob .bob-sprite.bob-active {
  opacity: 1;
}

.hh-root .hh-bob.facing-left .bob-sprite {
  /* facing-left flip handled by engine writing transform: scaleX(-1) on
   * the .hh-bob element. Sprite itself is unflipped. */
}

/* Interactive overlay container — Wave 3 scenes mount cages, billboards,
 * moles, and pickups inside this. Logical 800x450 coords; click events
 * bubble up to Scene's resolveClickTarget handler. */
.hh-root .hh-interactives {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--hh-z-prop);
}

.hh-root .hh-interactives > * {
  pointer-events: auto;
}

/* HUD overlay slot. HHHud mounts here. Always above the stage; never
 * scaled (HUD is in viewport coords, not logical). */
.hh-root .hh-hud-slot {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--hh-z-hud);
  pointer-events: none;
}

.hh-root .hh-hud-slot > * {
  pointer-events: auto;
}

/* Click capture layer — sits over the stage, receives raw click events,
 * forwards (logicalX, logicalY) to resolveClickTarget. Wave 3 scenes
 * don't author this; Scene owns it. */
.hh-root .hh-click-layer {
  position: absolute;
  inset: 0;
  z-index: var(--hh-z-character);
  cursor: pointer;
  background: transparent;
}

/* Reduced-motion: engine already gates its own animations. This rule
 * disables the BG's pixel rendering smoothing if the browser opts to
 * for accessibility reasons. */
@media (prefers-reduced-motion: reduce) {
  .hh-root .hh-bob .bob-sprite {
    transition: none;
  }
}