/* Agent B · pixel sprites, «Tres preguntas» */

/* ---------- sprites ---------- */
.sprite { display: inline-block; line-height: 0; width: var(--sprite-w, auto); max-width: 100%; }
.sprite svg { width: 100%; height: auto; image-rendering: pixelated; overflow: visible; }
.sprite__eyes { transform-box: fill-box; transform-origin: 50% 50%; transition: transform 70ms steps(2); }
.sprite.is-blink .sprite__eyes { transform: scaleY(0.2); }

/* ---------- «Tres preguntas» ---------- */
.preguntas { padding-block: var(--space-9); }
.preguntas__lead { color: var(--tone-3); font-size: 18px; }
.preguntas__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6); margin-top: var(--space-7);
}
.pregunta__n { margin-top: var(--space-5); font-family: var(--font-code); font-size: 12px; color: var(--ok-bright); }
.pregunta h3 { margin-top: var(--space-1); }
.pregunta h3 + p { margin-top: var(--space-3); color: var(--tone-3); }

.scene {
  position: relative; height: 360px; background: var(--tone-8); border: 1px solid var(--tone-7);
  display: flex; flex-direction: column; padding: var(--space-4);
}
.scene__label, .scene__status {
  font-family: var(--font-code); font-size: 12px; line-height: 16px; color: var(--tone-4);
  white-space: pre; overflow: hidden; text-overflow: ellipsis;
}
.scene__status { color: var(--tone-3); min-height: 16px; }
.scene__status--ok { color: var(--ok-bright); }
.scene__status--pair { display: flex; gap: 0; }
.scene__status--pair span { flex: 1; text-align: center; }
.scene__status.is-typing::after { content: "▍"; color: var(--ok-bright); }
.scene__cast { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.scene__cast--pair { gap: 0; }
.scene__cast--pair .sprite { width: min(var(--sprite-w), 48%); }

/* ---------- señales ---------- */
.senales { margin-top: var(--space-8); }
.senales__head {
  display: flex; align-items: center; gap: var(--space-4);
  font-family: var(--font-code); font-size: 12px; color: var(--tone-4);
}
.senales__head span:first-child { color: var(--bg); }
.senales__rule { flex: 1; height: 1px; background: var(--tone-7); }
.senales__grid {
  margin: var(--space-4) 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--tone-7);
}
.senales__grid div { padding: var(--space-5) var(--space-5) var(--space-5); }
.senales__grid div + div { border-left: 1px solid var(--tone-7); }
.senales__grid dt { font-family: var(--font-code); font-size: 12px; color: var(--bg); }
.senales__grid dt::before { content: "› "; color: var(--ok-bright); }
.senales__grid dd { margin: var(--space-2) 0 0; font-size: 15px; line-height: 1.5; color: var(--tone-3); }
.senales__grid .mono { color: var(--tone-1); font-size: 0.86em; }
.senales__out { margin-top: var(--space-4); font-family: var(--font-code); font-size: 13px; color: var(--tone-4); }
.senales__out span { color: var(--ok-bright); }
.senales__out strong { font-weight: 500; color: var(--tone-1); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .senales__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .senales__grid div + div { border-left: 0; }
  .senales__grid div { border-right: 1px solid var(--tone-7); border-bottom: 1px solid var(--tone-7); }
  .senales__grid { border-right: 0; border-bottom: 0; }
}
@media (max-width: 720px) {
  .senales__grid { grid-template-columns: minmax(0, 1fr); }
  .senales__grid div { padding: var(--space-4); }
  .senales__head span:last-child { display: none; }
}
@media (max-width: 900px) {
  .preguntas__grid { grid-template-columns: 1fr; gap: var(--space-7); }
}
@media (max-width: 560px) {
  .scene__status--pair span { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
}