html, body { margin: 0; padding: 0; height: 100%; background: #140c1c; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
body { display: flex; align-items: center; justify-content: center; font-family: "Trebuchet MS", "Segoe UI", sans-serif; }
#wrap { position: relative; }
#game { display: block; background: #2a1a3a; border-radius: 6px; box-shadow: 0 10px 60px rgba(0,0,0,.6); }
#touch { display: none; position: absolute; inset: 0; pointer-events: none; }
body.touch #touch { display: block; }
#touch { --s: clamp(44px, 8.6vw, 70px); }
.tbtn { position: absolute; pointer-events: auto; width: var(--s); height: var(--s); border-radius: 50%;
  background: rgba(255,240,220,.13); border: 2px solid rgba(255,240,220,.42); color: #fff; font-size: calc(var(--s) * .38);
  display: flex; align-items: center; justify-content: center; touch-action: none; box-sizing: border-box; }
.tbtn.on { background: rgba(255,200,120,.45); }
.tbtn.sm { width: calc(var(--s) * .82); height: calc(var(--s) * .82); font-size: calc(var(--s) * .32); }
#bL { left: calc(var(--s) * .15); bottom: calc(var(--s) * .9); }
#bR { left: calc(var(--s) * 2.05); bottom: calc(var(--s) * .9); }
#bU { left: calc(var(--s) * 1.19); bottom: calc(var(--s) * 1.78); }
#bD { left: calc(var(--s) * 1.19); bottom: calc(var(--s) * .1); }
#bJ { right: calc(var(--s) * .2); bottom: calc(var(--s) * .45); width: calc(var(--s) * 1.3); height: calc(var(--s) * 1.3); }
#bS { right: calc(var(--s) * 1.75); bottom: calc(var(--s) * .15); }
#bP { right: calc(var(--s) * 1.75); bottom: calc(var(--s) * 1.15); }
#bG { right: calc(var(--s) * .45); bottom: calc(var(--s) * 2); }
#bPa { right: calc(var(--s) * .2); top: 34%; }