/* Hamster Hustle — Meadow Haven scene (Wave 5a finale).
 *
 * Logical 800x450 coords. All selectors scoped under .hh-root to prevent
 * cross-scene CSS bleed (Wave 1 risk #5).
 */

.hh-root .hh-scene-meadow-haven .hh-mh-dancer,
.hh-root .hh-scene-meadow-haven .hh-mh-door,
.hh-root .hh-scene-meadow-haven .hh-mh-portal-mount {
  position: absolute;
  user-select: none;
}

.hh-root .hh-scene-meadow-haven .hh-mh-dancer > img {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  pointer-events: none;
}

/* Gentle bob loop — 2-frame dance read in pixel art is sold by the
 * vertical hop; sprites already have 2-frame poses baked in. We just
 * add the rhythm. delayMs (inline style) staggers each dancer so the
 * group looks like a chorus, not a metronome. */
.hh-root .hh-scene-meadow-haven .hh-mh-dancer {
  z-index: var(--hh-z-prop);
  animation: hh-mh-bob 720ms ease-in-out infinite;
  transform-origin: 50% 100%;
}

@keyframes hh-mh-bob {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50%      { transform: translateY(-6px) scaleY(0.97); }
}

/* Door back to hub — minimal hover affordance; door art is painted in
 * the BG. */
.hh-root .hh-scene-meadow-haven .hh-mh-door {
  cursor: pointer;
  z-index: var(--hh-z-interactive);
  border: 2px solid transparent;
  border-radius: 4px;
  transition: border-color 120ms ease-out, background-color 120ms ease-out;
}

.hh-root .hh-scene-meadow-haven .hh-mh-door:hover {
  border-color: var(--hh-color-meadow);
  background-color: rgba(45, 122, 77, 0.18);
}

/* Portal mount — Wave 4 Portal component owns its own visuals; this is
 * just a positioned container in the right edge of the meadow. */
.hh-root .hh-scene-meadow-haven .hh-mh-portal-mount {
  right: 30px;
  bottom: 70px;
  width: 100px;
  height: 140px;
  z-index: var(--hh-z-interactive);
  pointer-events: auto;
}

/* "Thanks for playing" overlay — fades in after THANKS_REVEAL_MS. */
.hh-root .hh-scene-meadow-haven .hh-mh-thanks {
  position: absolute;
  left: 50%;
  top: 28px;
  transform: translateX(-50%);
  padding: 12px 20px;
  background: rgba(20, 12, 8, 0.78);
  border: 2px solid var(--hh-color-meadow);
  border-radius: 6px;
  text-align: center;
  font-family: "Press Start 2P", monospace;
  color: #f6efe1;
  z-index: var(--hh-z-dialog);
  animation: hh-mh-fade-in 600ms ease-out both;
  pointer-events: none;
  max-width: 80%;
}

.hh-root .hh-scene-meadow-haven .hh-mh-thanks-line {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.04em;
}

.hh-root .hh-scene-meadow-haven .hh-mh-thanks-cue {
  margin: 6px 0 0;
  font-family: "Nunito", sans-serif;
  font-size: 12px;
  font-style: italic;
  color: #c8bfa6;
}

@keyframes hh-mh-fade-in {
  from { opacity: 0; transform: translate(-50%, -6px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}