/* Hamster Hustle — Wheelworks scene-specific styles (Wave 3d).
 *
 * 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)
 *   - foreground-gear walk-behind (Lesson 4)
 *   - cage / mole / pickup pulses
 *   - 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-ww-prop {
  image-rendering: pixelated;
  pointer-events: none; /* clicks resolve through .hh-click-layer */
  z-index: var(--hh-z-prop);
}

/* Bossy Betty's kiosk sprite — sits on the floor, behind Bob when Bob is
 * in front (foot-y depth sort handles it). */
.hh-root .hh-ww-cage {
  z-index: var(--hh-z-prop);
}

/* Manager Moles — same depth tier as cages; Bob can pass in front when
 * dispelled, blocked while solid. */
.hh-root .hh-ww-mole {
  z-index: var(--hh-z-prop);
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.35));
}

/* Floppy disk pickup pinned mid-wall on the taskboard — aerial. */
.hh-root .hh-ww-floppy,
.hh-root .hh-ww-acorn,
.hh-root .hh-ww-radio {
  z-index: var(--hh-z-decor-front);
}

/* Subtle pulse so pickups read as interactive without screaming for
 * attention (Koro-style restraint). Disabled under reduced-motion. */
@keyframes hh-ww-pulse {
  0%, 100% { transform: translateY(0); filter: brightness(1); }
  50%      { transform: translateY(-2px); filter: brightness(1.15); }
}
.hh-root .hh-ww-pulse {
  animation: hh-ww-pulse 1800ms ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hh-root .hh-ww-pulse {
    animation: none;
  }
}

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

.hh-root .hh-ww-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-ww-toast-wrong { border-color: var(--hh-color-hamspam); }
.hh-root .hh-ww-toast-missing { border-color: var(--hh-color-acorn); }
.hh-root .hh-ww-toast-info { border-color: var(--hh-color-radio); }

.hh-root .hh-ww-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-ww-toast-dismiss:hover {
  background: var(--hh-color-acorn);
}
.hh-root .hh-ww-toast-dismiss:focus-visible {
  outline: 2px solid var(--hh-color-meadow);
  outline-offset: 2px;
}

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

.hh-root .hh-ww-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-ww-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-ww-card-in 320ms ease-out;
}

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

.hh-root .hh-ww-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-ww-cutscene-body {
  display: flex;
  flex-direction: column;
  gap: var(--hh-space-2);
}

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