/* Defensive sizing for narrow browsers and long translated labels. */
html, body { max-width: 100%; overflow-x: hidden; }
.intro, .simulator, .boundary, .scenario-panel, .stage { min-width: 0; }
.intro p, .stage p, .scenario-button { overflow-wrap: anywhere; }
@media (max-width: 850px) {
  .intro { grid-template-columns: minmax(0, 1fr); }
  .simulator-grid { grid-template-columns: minmax(0, 1fr); }
  .boundary { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .scenario-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage-top { display: block; }
  .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}