* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; }
#canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
#controls { display: none; }
#mobile-controls {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 140px;
  pointer-events: none;
  z-index: 100;
}
.mobile-btn {
  position: absolute;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 2px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  pointer-events: all;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.mobile-btn:active { background: rgba(255,255,255,0.3); }
#mobile-left { left: 20px; bottom: 20px; }
#mobile-right { left: 100px; bottom: 20px; }
#mobile-jump { right: 100px; bottom: 60px; }
#mobile-attack { right: 20px; bottom: 20px; }
#mobile-dash { right: 60px; bottom: 100px; }
@media (max-width: 900px) {
  #mobile-controls { display: block; }
}
@media (hover: none) and (pointer: coarse) {
  #mobile-controls { display: block; }
}