* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%; height: 100%;
  background: #111;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  font-family: monospace;
}
#game-wrap {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
#game {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #000;
}
#touch-ui { position: fixed; inset: 0; pointer-events: none; display: none; }
#touch-ui.active { display: block; }
#joy-zone {
  position: absolute; left: 0; bottom: 0; width: 45%; height: 40%;
  pointer-events: auto;
}
#joy-base {
  position: absolute; left: 30px; bottom: 40px;
  width: 110px; height: 110px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.2); display: none;
}
#joy-base.show { display: block; }
#joy-stick {
  position: absolute; left: 50%; top: 50%;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transform: translate(-50%,-50%);
}
#btn-zone {
  position: absolute; right: 12px; bottom: 40px;
  display: flex; flex-direction: column; gap: 18px;
  pointer-events: auto;
}
.tbtn {
  width: 84px; height: 84px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.4);
  background: rgba(0,0,0,0.25);
  color: rgba(255,255,255,0.85);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: bold; letter-spacing: 1px;
}
.tbtn:active, .tbtn.pressed { background: rgba(255,255,255,0.35); }