/* scene.css — Mythos Pixel: stage overlays (the canvas paints the world itself). */

/* stage HTML overlays */
#lower-third {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; line-height: normal;
  background: var(--edge); border-top: 3px solid var(--hot);
  font-size: 18px; color: var(--paper);
  transform: translateY(100%); transition: transform .3s steps(4);
}
#lower-third.show { transform: none; }
.lt-tag { font-family: var(--f-px); font-size: 8px; color: var(--hot); white-space: nowrap; }

#stamp {
  position: absolute; top: 16%; left: 50%; padding: 8px 16px; line-height: normal;
  font-family: var(--f-px); font-size: clamp(12px, 2.4vw, 18px); white-space: nowrap;
  border: 4px solid var(--brick); color: var(--hot); background: var(--edge);
  transform: translateX(-50%) rotate(-6deg) scale(2.2); opacity: 0;
  box-shadow: var(--shadow-sm);
}
#stamp.slam { animation: stamp-slam .35s steps(4) forwards; }
@keyframes stamp-slam { to { transform: translateX(-50%) rotate(-6deg) scale(1); opacity: 1; } }
#stamp.gold { border-color: var(--lemon); color: var(--lemon); }
#stamp.bot { border-color: var(--cyan); color: var(--cyan); }

#target-hint {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%); line-height: normal;
  padding: 6px 12px; background: var(--edge); border: 2px solid var(--lemon);
  color: var(--lemon-hi); font-family: var(--f-px); font-size: 8px; pointer-events: none;
  animation: hint-bob 1s steps(2) infinite;
}
@keyframes hint-bob { 50% { transform: translateX(-50%) translateY(2px); } }

/* day-resolution caption */
#stage .vignette-cap {
  position: absolute; top: 10px; left: 10px; max-width: 62%; line-height: 1.25;
  font-size: 18px; color: var(--paper); background: var(--edge);
  border: 2px solid var(--leaf); padding: 6px 10px; z-index: 6;
  animation: cap-in .25s steps(3);
}
#stage .vignette-cap.fail { border-color: var(--hot); }
@keyframes cap-in { from { opacity: 0; transform: translateY(-5px); } }

/* win/lose street states (the canvas tints itself; chrome reacts subtly) */
body.street-party #stage { border-color: var(--lemon); }
body.street-dark #stage { border-color: #000; }
body.street-dark #pixel-stage { filter: brightness(.75) saturate(.6); }