html, body { margin: 0; height: 100%; background: #05030f; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; }
body { display: grid; place-items: center; }
canvas { display: block; background: #05030f; }
#touch { display: none; }
#touch.on { display: block; position: fixed; inset: 0; pointer-events: none; }
#touch button {
  pointer-events: auto; width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35);
  background: rgba(20,10,40,.45); color: #fff; font: 24px system-ui, sans-serif; backdrop-filter: blur(4px); touch-action: none;
}
#touch button.down { background: rgba(176,124,255,.6); }
#touch .pad { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 12px; }
#touch .acts { position: absolute; right: 16px; bottom: 16px; display: grid; grid-template-columns: repeat(2, 64px); gap: 10px; }
#touch .acts .big { background: rgba(124,246,200,.35); }
#touch .pause { position: absolute; right: 16px; top: 12px; width: 44px; height: 44px; font-size: 14px; }
#rotate { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  #rotate { display: grid; place-content: center; text-align: center; position: fixed; inset: 0; background: #05030f; color: #fff; font: 800 18px Nunito, system-ui, sans-serif; z-index: 10; }
  #rotate div { font-size: 64px; animation: spin 2s ease-in-out infinite; }
  @keyframes spin { 50% { transform: rotate(90deg); } }
}