body {
  margin: 0;
  overflow: hidden;
  background: #0a0a1a;
  font-family: 'Courier New', monospace;
  
  touch-action: none;
  overscroll-behavior: none;
}

canvas {
  display: block;
}

#hud {
  position: absolute;
  top: 10px;
  left: 10px;
  color: #4682b4;
  z-index: 10;
  text-shadow: 0 0 10px #4682b4;
}

#mobile {
  position: absolute;
  bottom: 20px;
  left: 20px;

  display: flex;
  flex-direction: column;

  gap: 10px;

  z-index: 20;
}

#mobile button {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 2px solid #4682b4;
  background: rgba(10, 10, 30, 0.8);
  color: #4682b4;
  font-size: 24px;
  font-weight: bold;
  
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

#mobile button:active {
  background: rgba(70, 130, 180, 0.3);
  border-color: #cc3333;
  color: #cc3333;
}

@media (min-width: 769px) {
  #mobile {
    display: none;
  }
}