.play-body { background: #f4f8fb; }
.play-main { max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.play-main h1 { font-family: "Archivo Black", sans-serif; font-size: 2rem; margin: 0 0 0.5rem; }
.play-lead { color: #5a6b7d; margin-bottom: 1.5rem; }
.play-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.play-pane { display: flex; flex-direction: column; gap: 0.5rem; }
.play-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: #0082c0; }
.play-label--out { color: #d97706; }
#mud-source {
  min-height: 280px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.8rem;
  padding: 1rem;
  border: 1px solid #c5d4e0;
  border-radius: 8px;
  resize: vertical;
}
.play-preview {
  min-height: 280px;
  padding: 1rem;
  background: #fff;
  border: 1px dashed rgb(0 130 192 / 0.45);
  border-radius: 8px;
  overflow: auto;
}
.play-cli {
  margin: 0;
  padding: 0.75rem;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 8px;
  font-size: 0.75rem;
}
.play-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.play-status { font-size: 0.85rem; color: #5a6b7d; margin: 0; }
.play-status.err { color: #b91c1c; }
.nav a.active { font-weight: 700; color: #0082c0; }
@media (max-width: 900px) { .play-panels { grid-template-columns: 1fr; } }