* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%;
  background: #0a0a12;
  color: #e8e8f0;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#wrap {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #12122a 0%, #050508 70%);
}
#game {
  display: block;
  max-width: 100vw; max-height: 100vh;
  width: min(100vw, calc(100vh * 16 / 9));
  height: auto;
  background: #000;
  box-shadow: 0 0 40px rgba(40, 200, 80, 0.15);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
#touch {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 10;
  display: none;
}
#touch.show { display: block; }
.pad, .btns {
  position: absolute;
  bottom: 18px;
  pointer-events: auto;
}
.pad { left: 12px; width: 150px; height: 150px; }
.btns { right: 12px; width: 170px; height: 150px; }
.tbtn {
  position: absolute;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.45);
  background: rgba(20,40,30,0.55);
  color: #c8ffd0;
  font-size: 13px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-tap-highlight-color: transparent;
}
.tbtn:active, .tbtn.active {
  background: rgba(60,200,100,0.55);
  border-color: #7fff9a;
}
.pad .up { top: 0; left: 49px; }
.pad .down { bottom: 0; left: 49px; }
.pad .left { left: 0; top: 49px; }
.pad .right { right: 0; top: 49px; }
.btns .atk { right: 70px; bottom: 10px; width: 58px; height: 58px; background: rgba(180,40,40,0.5); }
.btns .jmp { right: 8px; bottom: 55px; width: 58px; height: 58px; background: rgba(40,80,180,0.5); }
.btns .spc { right: 70px; bottom: 75px; width: 50px; height: 50px; background: rgba(180,140,20,0.5); font-size: 11px; }
@media (pointer: coarse), (max-width: 900px) {
  #touch.show { display: block; }
}