html, body {
  margin: 0; height: 100%; background: #0b0f22; overflow: hidden;
  touch-action: none; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
body { display: flex; align-items: center; justify-content: center; height: 100vh; height: 100dvh; }
canvas { display: block; image-rendering: pixelated; }

#touch { display: none; position: fixed; inset: 0; pointer-events: none; z-index: 2; }
body.touch #touch { display: block; }
.pad {
  position: absolute; display: flex; gap: 14px;
  left: calc(18px + env(safe-area-inset-left)); bottom: calc(18px + env(safe-area-inset-bottom));
}
.tbtn {
  width: 76px; height: 76px; border-radius: 50%; box-sizing: border-box;
  background: rgba(255,255,255,.18); border: 3px solid rgba(255,255,255,.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 900 15px system-ui, sans-serif; letter-spacing: 1px;
}
.tbtn svg { width: 38px; height: 38px; fill: #fff; }
.tbtn.on { background: rgba(255,210,63,.55); border-color: #ffd23f; }
.jump {
  position: absolute; width: 96px; height: 96px;
  right: calc(22px + env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom));
}

#ui {
  position: fixed; z-index: 5; display: flex; gap: 8px;
  top: calc(8px + env(safe-area-inset-top)); right: calc(8px + env(safe-area-inset-right));
}
.ui-btn {
  width: 40px; height: 40px; padding: 8px; border-radius: 10px; cursor: pointer;
  border: 2px solid rgba(255,255,255,.6); background: rgba(10,14,34,.45); color: #fff;
}
.ui-btn svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.ui-btn .cross { display: none; }
.ui-btn.off .cross { display: inline; }
.ui-btn.off .wave { display: none; }

#rotate {
  display: none; position: fixed; inset: 0; z-index: 10; background: #141a33; color: #fff;
  align-items: center; justify-content: center; text-align: center; font: 700 20px system-ui, sans-serif; padding: 16px;
}
#rotate svg { color: #ffd23f; animation: rot 2s ease-in-out infinite; }
#rotate small { opacity: .7; font-weight: 400; font-size: 14px; }
@keyframes rot { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (pointer: coarse) { #rotate { display: flex; } }