:root {
  color-scheme: dark;
  font-family: Inter, Arial, sans-serif;
  background: #090d14;
  color: #f4f5f7;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
button, input { font: inherit; }

.simulator {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
}

.simulator__game {
  min-width: 0;
  padding: 16px;
  background: #0e1217;
}

.simulator__game iframe {
  width: 100%;
  height: calc(100vh - 32px);
  border: 1px solid #303746;
  border-radius: 14px;
  background: #0e1217;
}

.simulator__controls {
  padding: 22px;
  overflow: auto;
  border-left: 1px solid #303746;
  background: #121827;
}

.eyebrow { margin: 0 0 5px; color: #c08e0e; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
h1 { margin: 0; font-size: 24px; }
h2 { margin: 0 0 12px; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }
.connection { margin-top: 10px; color: #9199a8; font-size: 12px; }
.connection--online { color: #8bc34a; }

.controlGroup { margin-top: 22px; padding-top: 18px; border-top: 1px solid #303746; }
.controlGroup label { display: grid; grid-template-columns: 1fr 100px; align-items: center; gap: 10px; margin: 9px 0; color: #cbd0d8; font-size: 13px; }
.controlGroup label.toggle { grid-template-columns: auto 1fr; }
input { min-width: 0; padding: 7px 8px; border: 1px solid #3c4556; border-radius: 6px; background: #0d121b; color: #fff; }
input[type='checkbox'] { width: 17px; height: 17px; }

.buttonGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.buttonGrid--three { grid-template-columns: 1fr; margin-top: 12px; }
button { padding: 9px 10px; border: 1px solid #ff6a00; border-radius: 7px; background: rgba(255,106,0,.14); color: #fff; cursor: pointer; font-weight: 700; }
button:hover { background: rgba(255,106,0,.28); }
button.green { border-color: #8bc34a; background: rgba(139,195,74,.13); }
button.yellow { border-color: #d9b43b; background: rgba(217,180,59,.13); }
button.red { border-color: #ef1b16; background: rgba(239,27,22,.13); }
button.secondary { border-color: #4c566a; background: #202838; }

.statusGroup pre { max-height: 270px; overflow: auto; padding: 10px; border-radius: 7px; background: #090d14; color: #aab4c4; font-size: 11px; }
.message { min-height: 18px; color: #d9b43b; font-size: 12px; }

@media (max-width: 900px) {
  .simulator { grid-template-columns: 1fr; }
  .simulator__game iframe { height: 70vh; }
  .simulator__controls { border-top: 1px solid #303746; border-left: 0; }
}