html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  background: #1a0a07; overflow: hidden;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; touch-action: none;
  font-family: "Courier New", monospace;
}
#stage {
  position: fixed; left: 50%; top: 50%;
  transform-origin: center center;
}
#game {
  display: block; width: 100%; height: 100%;
  image-rendering: pixelated; image-rendering: crisp-edges;
  background: #000;
}
.hidden { display: none !important; }

#touch { position: absolute; inset: 0; pointer-events: none; }
#touch .pad {
  position: absolute; bottom: 8px; display: flex; gap: 10px; pointer-events: none;
}
#touch .pad.left { left: 3%; }
#touch .pad.right { right: 3%; }
#touch button {
  pointer-events: auto; width: 56px; height: 56px; border-radius: 12px;
  border: 2px solid rgba(255,255,255,.5); background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.8); font-size: 22px; font-weight: bold; padding: 0;
  touch-action: none; -webkit-tap-highlight-color: transparent; outline: none;
}
#touch button.down { background: rgba(255,255,255,.35); }

#rotate {
  position: fixed; inset: 0; z-index: 10; background: #1a0a07; color: #f3b563;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; text-align: center;
}