.mission-text {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(103, 240, 255, 0.2);
  background: rgba(103, 240, 255, 0.08);
  color: var(--muted);
  font-weight: 600;
}

.mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.mode-button {
  border: 1px solid rgba(103, 240, 255, 0.24);
  border-radius: 999px;
  background: rgba(103, 240, 255, 0.08);
  color: var(--text);
  padding: 7px 12px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.mode-button.is-active {
  background: linear-gradient(135deg, var(--accent), #ddfcff);
  color: #041520;
}

.canvas-frame canvas {
  aspect-ratio: 16 / 9;
}

.overlay p {
  max-width: 460px;
}

.touch-controls {
  grid-template-columns: 1fr 1fr;
}

.touch-controls button.is-on {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35) inset;
}

body.scope-wide-mode .page-shell {
  width: min(1380px, calc(100% - 28px));
}

body.scope-wide-mode .layout {
  grid-template-columns: 1fr;
}

body.scope-wide-mode .info-panel {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 720px) {
  .mission-text {
    font-size: 0.88rem;
  }

  .mode-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  body.scope-wide-mode .info-panel {
    grid-template-columns: 1fr;
  }
}