/*
 * Terra Life -- illustrated scene template.
 *
 * `.scene` is the reusable frame every business/building interior and
 * every NPC portrait renders into. It's driven by a background image
 * (`--scene-bg`) chosen per *template* (e.g. "blacksmith"), not per
 * individual NPC/building -- many businesses of the same type reuse one
 * template until a specific one gets unique artwork
 * (see NPC.portrait_path / Building.interior_scene in the models).
 *
 * No art exists yet, so `.scene` renders a labeled placeholder box
 * instead of a broken image when no background is set. Swap in real
 * pixel art later by pointing `--scene-bg` at a file -- no template
 * markup changes needed.
 */

.scene {
  --scene-bg: none;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 360px;
  border: 3px solid var(--parchment-edge, #8a6a3d);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 20px;
  image-rendering: pixelated;
  background-color: #4a3d2c;
  background-image: var(--scene-bg);
  background-size: cover;
  background-position: center;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
}

.scene.scene-placeholder {
  background-image:
    repeating-linear-gradient(
      45deg,
      #4a3d2c,
      #4a3d2c 10px,
      #443826 10px,
      #443826 20px
    );
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.scene-placeholder .scene-placeholder-label {
  font-family: "Cinzel", Georgia, serif;
  color: #e8dcc0;
  background: rgba(0, 0, 0, 0.45);
  padding: 6px 14px;
  border-radius: 3px;
  font-size: 14px;
  letter-spacing: 0.03em;
}

.scene-npc-badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(20, 14, 8, 0.75);
  color: #f1e6c8;
  padding: 6px 12px;
  border-radius: 3px;
  font-family: "Cinzel", Georgia, serif;
  font-size: 14px;
}