.snake-stage {
  aspect-ratio: 1;
}

#snakeCanvas {
  height: 100%;
}

.dpad {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  width: min(240px, 80%);
  gap: 7px;
  margin: 18px auto 8px;
}

.dpad-button {
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  color: var(--paper);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 800;
  touch-action: manipulation;
}

.dpad-button:active {
  color: var(--ink);
  background: var(--lime);
}

.dpad-center {
  color: var(--lime);
  font-size: 13px;
}

@media (max-width: 760px), (pointer: coarse) {
  .dpad {
    display: grid;
  }
}