html, body {
  margin: 0; height: 100%; background: #0b0710; overflow: hidden;
  touch-action: none; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
body { display: flex; align-items: center; justify-content: center; height: 100dvh; }
canvas { display: block; background: #000; box-shadow: 0 0 40px rgba(0,0,0,.6); }

#touch { display: none; position: fixed; inset: 0; pointer-events: none; z-index: 5;
         font-family: "Press Start 2P", monospace; }
body.touch #touch { display: block; }
body.touch.menu #touch { display: none; }
#stickZone { position: absolute; left: 0; top: 0; width: 50%; height: 100%; pointer-events: auto; }
#stickBase {
  position: fixed; left: 16vw; top: 70vh; width: 112px; height: 112px; margin: -56px 0 0 -56px;
  border-radius: 50%; border: 2px solid rgba(255,255,255,.28); background: rgba(255,255,255,.07);
  pointer-events: none; transition: opacity .15s; opacity: .55;
}
#stickBase.active { opacity: 1; transition: none; }
#stickKnob {
  position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px;
  border-radius: 50%; background: rgba(255,255,255,.35); border: 2px solid rgba(255,255,255,.5);
}
#btns { position: absolute; right: max(3vw, env(safe-area-inset-right)); bottom: 5vh;
        width: 230px; height: 170px; pointer-events: none; }
.btn {
  position: absolute; width: 74px; height: 74px; border-radius: 50%; pointer-events: auto;
  border: 3px solid rgba(255,255,255,.55); color: #fff; font: 16px "Press Start 2P", monospace;
  text-shadow: 0 2px 0 #000; opacity: .78; touch-action: none; padding: 0;
}
.btn.on { transform: scale(.9); filter: brightness(1.5); opacity: 1; }
.btn.at { right: 0; bottom: 18px; background: rgba(220,50,50,.55); width: 86px; height: 86px; }
.btn.jp { right: 100px; bottom: 0; background: rgba(50,110,230,.55); }
.btn.sp { right: 52px; bottom: 104px; background: rgba(230,180,40,.55); width: 62px; height: 62px; font-size: 12px; }
#sysBtns { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
.sys { pointer-events: auto; width: 44px; height: 32px; border-radius: 8px; border: 2px solid rgba(255,255,255,.4);
       background: rgba(0,0,0,.35); color: #fff; font: 10px "Press Start 2P", monospace; padding: 0; }

#rotate { display: none; position: fixed; inset: 0; z-index: 10; background: #120a18; color: #ffd27a;
          flex-direction: column; align-items: center; justify-content: center; text-align: center;
          font: 12px/1.8 "Press Start 2P", monospace; padding: 24px; box-sizing: border-box; }
#rotate div { font-size: 54px; animation: spin 2s ease-in-out infinite; }
@keyframes spin { 0%,30% { transform: rotate(0) } 70%,100% { transform: rotate(90deg) } }
@media (orientation: portrait) { body.touch #rotate { display: flex; } }