/* =========================================================
   04 · Stage 1: Casa Autómata (#p-casa)
   ========================================================= */

.stage--house { background: #0a1030; }
/* Capa animada sobre la casa del escenario.
   Estado final (sin JS): luces apagadas, persiana bajada, alarma armada y cámara vigilando.
   Con .is-lit la casa vuelve a como estaba antes de la orden. */
.house-fx .house__win { fill: #2a2f55; transition: fill 160ms steps(2); }
.house-fx .house__win--2 { transition-delay: 220ms; }
.house-fx .house__win--3 { transition-delay: 440ms; }
.house-fx .house__win--4 { transition-delay: 660ms; }
.stage--house.is-lit .house__win { fill: #ffd23f; transition-delay: 0ms; }

.house-fx .house__blind {
  transform-box: fill-box;
  transform-origin: 50% 0;
  transition: transform 900ms steps(8) 200ms;
}
.stage--house.is-lit .house__blind { transform: scaleY(0); transition-delay: 0ms; }

.house-fx .house__led { fill: var(--red-bright); animation: blink 1s steps(1) infinite; }
.stage--house.is-lit .house__led { fill: #3a3a5c; animation: none; }

.house-fx .house__cam { fill: #c9c3e6; }
.house-fx .house__cone {
  fill: var(--cyan);
  opacity: .22;
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: cam-scan 3s steps(10) infinite alternate;
  transition: opacity 300ms steps(3) 900ms;
}
.stage--house.is-lit .house__cone { opacity: 0; transition-delay: 0ms; }
@keyframes cam-scan { from { transform: skewX(-18deg); } to { transform: skewX(18deg); } }
.talk {
  display: grid;
  gap: 12px;
  align-self: start;
  max-width: 520px;
  margin-top: 4vh;
}
.talk__line {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0;
  padding: 12px 14px;
  border: 3px solid var(--cream);
  outline: 3px solid var(--ink);
  background: rgb(7 5 15 / .88);
  font-size: 1rem;
}
.talk__line--me { justify-self: end; background: var(--navy); }
.talk__who {
  flex: none;
  padding: 5px 6px;
  background: var(--red);
  color: var(--cream);
  font: 700 var(--px-2xs)/1 var(--f-pixel);
}
.talk__who--ai { background: var(--magenta); color: var(--ink); }
.talk__status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.talk__status li {
  padding: 7px 9px;
  border: 2px solid var(--ink);
  background: var(--lime);
  color: var(--ink);
  font: 700 var(--px-2xs)/1 var(--f-pixel);
}
.talk__status b { font-weight: 400; }
.talk[data-step="0"] .talk__line--me,
.talk[data-step="0"] .talk__line--ai,
.talk[data-step="1"] .talk__line--ai { visibility: hidden; }
.talk__status li { transition: background-color 120ms steps(2), color 120ms steps(2); }
.talk__status li:nth-child(2) { transition-delay: 220ms; }
.talk__status li:nth-child(3) { transition-delay: 440ms; }
.talk__status li:nth-child(4) { transition-delay: 900ms; }
.talk.is-before .talk__status li { background: #3a3a5c; color: var(--text-dim); transition-delay: 0ms; }

@media (max-width: 900px) {
  .talk { margin-top: 0; }
}

/* Casa en pequeño: solo en móvil, donde la casa del fondo queda tapada por la ficha */
.house-mini { display: none; }

@media (max-width: 900px) {
  .talk { max-width: none; }
  .house-mini {
    display: block;
    width: 100%;
    height: auto;
    border: 4px solid var(--cream);
    outline: 4px solid var(--ink);
    image-rendering: pixelated;
  }
  /* El fondo de la escena no aporta en móvil y compite con el texto */
  .stage--house .stage__far { opacity: .35; }
}