.asteroids-surface {
  display: flex;
  justify-content: center;
}

.asteroids-stage {
  width: min(100%, 34rem);
  padding: clamp(0.85rem, 2vw, 1.1rem);
  background:
    radial-gradient(circle at top, rgba(135, 238, 255, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(10, 17, 33, 0.98), rgba(6, 10, 22, 0.98));
}

.asteroids-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 22px;
  border: 1px solid rgba(157, 214, 255, 0.18);
  background:
    radial-gradient(circle at 20% 10%, rgba(117, 210, 255, 0.12), transparent 20%),
    radial-gradient(circle at 82% 22%, rgba(255, 184, 107, 0.08), transparent 16%),
    linear-gradient(180deg, #09111f 0%, #050913 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  touch-action: none;
}

.asteroids-touch-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.asteroids-touch-controls .touch-button:last-child {
  grid-column: 1 / -1;
}

.touch-button-accent {
  background: linear-gradient(180deg, rgba(255, 173, 92, 0.28), rgba(255, 122, 78, 0.2));
  border-color: rgba(255, 183, 107, 0.34);
}

.asteroids-status-panel {
  background: linear-gradient(180deg, rgba(19, 28, 49, 0.94), rgba(9, 14, 25, 0.92));
}

@media (min-width: 560px) {
  .asteroids-touch-controls {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .asteroids-touch-controls .touch-button:last-child {
    grid-column: auto;
  }
}