/* Hamster Hustle — Scene 3c (Cubicle Burrows) per-scene overrides.
 * Composes hh-scene-base.css. All selectors scoped under .hh-root to
 * prevent dojo CSS bleed (Wave 1 risk #5).
 *
 * Logical 800×450 plane; positions inlined on each prop element via
 * `style="left/top/width/height"`. This file owns visual treatment only:
 * z-index layering, sprite scale, multi-beat dialog typography, mole
 * dispel state.
 */

/* ── Shared dialog beat helpers (mirrors corpus rendering contract) ─── */
.hh-root .hh-dialog-cue {
  font-style: italic;
  opacity: 0.65;
  display: block;
}

.hh-root .hh-dialog-line {
  display: block;
}

/* ── Cage + ally ────────────────────────────────────────────────────── */
.hh-root .hh-cb-cage {
  z-index: var(--hh-z-prop);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.hh-root .hh-cb-ally {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
  pointer-events: none;
}

/* ── Manager Mole ───────────────────────────────────────────────────── */
.hh-root .hh-cb-mole {
  z-index: var(--hh-z-prop);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.hh-root .hh-cb-mole img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}

/* Dispelled mole: scale + opacity drop to read as "slumped, scrolling
 * phone." Sprite swap to a phone-pose isn't available in MVP; the visual
 * downgrade carries the beat. */
.hh-root .hh-cb-mole-slumped img {
  transform: scale(0.7) translateY(8px);
  opacity: 0.55;
  filter: saturate(0.6);
}

/* ── HamSpam billboard ──────────────────────────────────────────────── */
.hh-root .hh-cb-billboard {
  z-index: var(--hh-z-decor-back);
  pointer-events: none;
}

.hh-root .hh-cb-billboard img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}

/* ── Pickups (tools, acorn, radio) ──────────────────────────────────── */
.hh-root .hh-cb-tool,
.hh-root .hh-cb-acorn,
.hh-root .hh-cb-radio {
  z-index: var(--hh-z-prop);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: hh-cb-pickup-bob 2400ms ease-in-out infinite;
}

.hh-root .hh-cb-tool img,
.hh-root .hh-cb-acorn img,
.hh-root .hh-cb-radio img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}

@keyframes hh-cb-pickup-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .hh-root .hh-cb-tool,
  .hh-root .hh-cb-acorn,
  .hh-root .hh-cb-radio {
    animation: none;
  }
}

/* ── Dialog panel (multi-beat) ──────────────────────────────────────── */
.hh-root .hh-cb-dialog {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: min(640px, 92%);
  padding: var(--hh-space-4) var(--hh-space-6);
  background: var(--hh-color-scrim);
  color: var(--hh-color-cream);
  border: 2px solid var(--hh-color-rust);
  border-radius: 6px;
  font-family: var(--hh-font-body);
  font-size: 15px;
  line-height: 1.45;
  z-index: var(--hh-z-cutscene);
  cursor: pointer;
  pointer-events: auto;
}

.hh-root .hh-cb-dialog-text {
  margin: 0 0 var(--hh-space-2);
}

.hh-root .hh-cb-dialog-hint {
  margin: 0;
  font-size: 11px;
  opacity: 0.55;
  text-align: right;
  font-family: var(--hh-font-display);
}