@font-face { font-family: "VT323"; src: url("fonts/vt323.woff2") format("woff2"); font-display: block; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; font-family: "VT323", monospace; }
body { display: flex; flex-direction: column; }
#wrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
#screen { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
#pad { display: none; flex: 0 0 auto; height: 190px; padding: 6px 14px 14px; box-sizing: border-box;
  justify-content: space-between; align-items: center; background: linear-gradient(#0c0c1c, #000); }
@media (pointer: coarse) { #pad { display: flex; } }
.touch #pad { display: flex; }
#pad button { font-family: system-ui, sans-serif; color: #e8eaf4; background: #1e2a6a; border: 2px solid #8890b8; border-radius: 10px;
  touch-action: none; font-size: 22px; padding: 0; }
#pad button.on { background: #4a64d8; }
.dpad { position: relative; width: 156px; height: 156px; }
.dpad button { position: absolute; width: 52px; height: 52px; }
.dpad .up { left: 52px; top: 0; } .dpad .down { left: 52px; bottom: 0; }
.dpad .left { left: 0; top: 52px; } .dpad .right { right: 0; top: 52px; }
.mid { display: flex; flex-direction: column; gap: 14px; }
.mid .small { font-size: 18px; padding: 6px 10px; border-radius: 14px; }
.ab { position: relative; width: 150px; height: 130px; }
.ab button { position: absolute; width: 66px; height: 66px; border-radius: 50%; font-size: 28px; }
.ab .a { right: 0; top: 4px; background: #8a2030; } .ab .b { left: 0; bottom: 4px; background: #2a3a8a; }
#pad button.a.on { background: #d04050; }