@import url('../global.css');

:root {
  --title-color: var(--color-asteroids);
}

.asteroids-board {
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--border-radius-lg);
  background: var(--asteroids-space);
  touch-action: none;
}

.asteroids-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.asteroids-controls {
  position: absolute;
  z-index: 2;
  right: var(--spacing-sm);
  bottom: var(--spacing-sm);
  left: var(--spacing-sm);
  display: none;
  grid-template-columns: repeat(4, var(--sidebar-control-size));
  justify-content: center;
  gap: var(--spacing-sm);
  pointer-events: none;
}

.asteroids-control {
  width: var(--sidebar-control-size);
  height: var(--sidebar-control-size);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface-glass);
  color: var(--asteroids-ship);
  font: inherit;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bolder);
  line-height: 1;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(var(--spacing-xs));
  pointer-events: auto;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.asteroids-control--shoot {
  color: var(--asteroids-shot);
}

.asteroids-control.is-pressed {
  transform: scale(0.92);
  border-color: var(--asteroids-ship);
  background: color-mix(in srgb, var(--color-asteroids) 36%, var(--surface-1));
}

@media (hover: none), (max-width: 768px) {
  .asteroids-controls {
    display: grid;
  }
}