* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0A0A14;
  display: flex;
  justify-content: center;
  align-items: center;
}

#canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}

#touch-controls {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 160px;
  pointer-events: none;
  z-index: 10;
}

.touch-btn {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.6);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.touch-btn:active, .touch-btn.active {
  background: rgba(255,255,255,0.35);
  border-color: rgba(255,255,255,0.6);
}

#touch-left {
  left: 20px;
  bottom: 40px;
}

#touch-right {
  left: 110px;
  bottom: 40px;
}

#touch-accel {
  right: 20px;
  bottom: 100px;
}

#touch-brake {
  right: 20px;
  bottom: 20px;
}

#touch-gearup {
  right: 100px;
  bottom: 100px;
  width: 55px;
  height: 55px;
  font-size: 14px;
}

#touch-geardown {
  right: 100px;
  bottom: 35px;
  width: 55px;
  height: 55px;
  font-size: 14px;
}

@media (hover: none) and (pointer: coarse) {
  #touch-controls {
    display: block;
  }
}