html, body { margin: 0; height: 100%; background: #0c1020; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; }
body { display: flex; align-items: center; justify-content: center; }
#screen { display: block; image-rendering: pixelated; image-rendering: crisp-edges; background: #000; box-shadow: 0 0 0 3px #000, 0 12px 40px rgba(0, 0, 0, 0.6); }
[hidden] { display: none !important; }

/* touch controls, see-through and over the screen */
#touch { position: fixed; inset: auto 0 12px 0; display: flex; justify-content: space-between; padding: 0 14px; pointer-events: none; }
#touch button { pointer-events: auto; border: 2px solid rgba(255, 255, 255, 0.5); background: rgba(0, 0, 0, 0.3); color: rgba(255, 255, 255, 0.9);
  font: 700 16px "Noto Sans TC", sans-serif; touch-action: none; }
#touch button.on { background: rgba(255, 255, 255, 0.35); }
.dpad { position: relative; width: 150px; height: 150px; }
.dpad button { position: absolute; width: 50px; height: 50px; border-radius: 10px; }
.dpad .u { left: 50px; top: 0; } .dpad .d { left: 50px; top: 100px; } .dpad .l { left: 0; top: 50px; } .dpad .r { left: 100px; top: 50px; }
.abtns { display: flex; align-items: flex-end; gap: 10px; }
.abtns .a, .abtns .b { width: 60px; height: 60px; border-radius: 50%; }
.abtns .a { margin-bottom: 30px; }
.abtns .m { width: 54px; height: 34px; border-radius: 8px; font-size: 12px; }