/* Hamster Hustle — Hidden Burrows scene-specific styles (Wave 3e).
 *
 * Scoped under .hh-root per Wave 1 risk #5. Base scene layout (BG, stage,
 * Bob, click layer) lives in hh-scene-base.css; this file owns:
 *   - prop sprite rendering (pixelated, depth-of-field z-index)
 *   - lunch-table walk-behind overlay (Lesson 4)
 *   - cage / pickup / poster pulses
 *   - STORAGE-door post-rescue glow (telegraphs new interactability)
 *   - dialog toast for wrong/missing item lines
 *   - ally-freed cutscene overlay (multi-beat, parenthetical cue styling)
 *
 * Multi-beat dialog rendering contract (per agent prompt):
 *   .hh-dialog-line  — spoken beat (block)
 *   .hh-dialog-cue   — parenthetical stage direction (italic + dim)
 */

.hh-root .hh-dialog-cue {
  font-style: italic;
  opacity: 0.65;
  display: block;
}
.hh-root .hh-dialog-line {
  display: block;
}

/* ── Prop sprites ──────────────────────────────────────────────────────── */

.hh-root .hh-hb-prop {
  image-rendering: pixelated;
  pointer-events: none; /* clicks resolve through .hh-click-layer */
  z-index: var(--hh-z-prop);
}

.hh-root .hh-hb-cage {
  z-index: var(--hh-z-prop);
}

/* The trance poster lives in front of Molly so it visually "covers" the
 * hidden switch on the wall. Kept transparent — the painted BG already shows
 * the poster art; this overlay just registers the click footprint and adds a
 * subtle highlight pulse so the player knows it's interactable. */
.hh-root .hh-hb-poster {
  z-index: var(--hh-z-decor-back);
  border: 2px dashed rgba(255, 209, 102, 0.0);
  border-radius: 4px;
  animation: hh-hb-poster-hint 4500ms ease-in-out infinite;
}
@keyframes hh-hb-poster-hint {
  0%, 100% { border-color: rgba(255, 209, 102, 0.0); }
  50%      { border-color: rgba(255, 209, 102, 0.18); }
}

.hh-root .hh-hb-paperclip,
.hh-root .hh-hb-acorn,
.hh-root .hh-hb-radio {
  z-index: var(--hh-z-decor-front);
}

/* Subtle pulse on pickups (matches Wheelworks' hh-ww-pulse cadence). */
@keyframes hh-hb-pulse {
  0%, 100% { transform: translateY(0); filter: brightness(1); }
  50%      { transform: translateY(-2px); filter: brightness(1.15); }
}
.hh-root .hh-hb-pulse {
  animation: hh-hb-pulse 1800ms ease-in-out infinite;
}

/* Lunch-table walk-behind: place a transparent overlay at the table's
 * footprint with a high z-index so Bob renders BEHIND it when his foot-y
 * sits within the table strip (Lesson 4). Painted-BG provides the visuals. */
.hh-root .hh-hb-lunch-table-front {
  z-index: var(--hh-z-decor-front);
  background: transparent;
  pointer-events: none;
}

/* STORAGE-door post-rescue glow — only mounted once Molly is freed, so the
 * presence of this element IS the "newly interactable" telegraph (Lesson 9).
 * Animated halo over the painted door; transparent fill so the BG art shows
 * through. */
.hh-root .hh-hb-storage-glow {
  z-index: var(--hh-z-decor-front);
  pointer-events: none;
  border: 2px solid var(--hh-color-meadow);
  border-radius: 6px;
  box-shadow:
    0 0 12px 2px rgba(101, 213, 145, 0.55),
    inset 0 0 12px rgba(101, 213, 145, 0.35);
  animation: hh-hb-storage-glow 1800ms ease-in-out infinite;
}
@keyframes hh-hb-storage-glow {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1;    }
}

@media (prefers-reduced-motion: reduce) {
  .hh-root .hh-hb-pulse,
  .hh-root .hh-hb-poster,
  .hh-root .hh-hb-storage-glow {
    animation: none;
  }
}

/* ── Dialog toast (wrong-item / missing-item / info) ───────────────────── */

.hh-root .hh-hb-toast {
  position: absolute;
  left: 50%;
  bottom: 64px;
  transform: translateX(-50%);
  max-width: 560px;
  width: calc(100% - 48px);
  padding: var(--hh-space-4) var(--hh-space-6);
  background: var(--hh-color-scrim);
  border: 2px solid var(--hh-color-rust);
  border-radius: 6px;
  color: var(--hh-color-cream);
  font-family: var(--hh-font-body);
  font-size: 15px;
  line-height: 1.5;
  z-index: var(--hh-z-cutscene);
  pointer-events: auto;
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.4);
}

.hh-root .hh-hb-toast-wrong   { border-color: var(--hh-color-hamspam); }
.hh-root .hh-hb-toast-missing { border-color: var(--hh-color-acorn); }
.hh-root .hh-hb-toast-info    { border-color: var(--hh-color-radio); }

.hh-root .hh-hb-toast-dismiss {
  margin-top: var(--hh-space-3);
  padding: 4px 14px;
  background: var(--hh-color-cream);
  color: var(--hh-color-deep);
  border: 0;
  border-radius: 4px;
  font-family: var(--hh-font-display);
  font-size: 11px;
  cursor: pointer;
}
.hh-root .hh-hb-toast-dismiss:hover {
  background: var(--hh-color-acorn);
}
.hh-root .hh-hb-toast-dismiss:focus-visible {
  outline: 2px solid var(--hh-color-meadow);
  outline-offset: 2px;
}

/* ── Ally-freed cutscene overlay ───────────────────────────────────────── */

.hh-root .hh-hb-cutscene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 24px 48px;
  background: linear-gradient(
    180deg,
    rgba(15, 14, 23, 0) 0%,
    rgba(15, 14, 23, 0) 55%,
    rgba(15, 14, 23, 0.55) 100%
  );
  z-index: var(--hh-z-cutscene);
  pointer-events: auto;
}

.hh-root .hh-hb-cutscene-card {
  max-width: 620px;
  width: 100%;
  padding: var(--hh-space-6);
  background: var(--hh-color-scrim);
  border: 3px solid var(--hh-color-ally);
  border-radius: 8px;
  color: var(--hh-color-cream);
  font-family: var(--hh-font-body);
  font-size: 16px;
  line-height: 1.55;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.45);
  animation: hh-hb-card-in 320ms ease-out;
}

@keyframes hh-hb-card-in {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.hh-root .hh-hb-cutscene-name {
  margin: 0 0 var(--hh-space-3);
  font-family: var(--hh-font-display);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--hh-color-ally);
  text-transform: uppercase;
}

.hh-root .hh-hb-cutscene-body {
  display: flex;
  flex-direction: column;
  gap: var(--hh-space-2);
}

@media (max-width: 600px) {
  .hh-root .hh-hb-toast,
  .hh-root .hh-hb-cutscene-card {
    font-size: 14px;
  }
  .hh-root .hh-hb-toast {
    bottom: 24px;
    padding: var(--hh-space-3) var(--hh-space-4);
  }
}