/* ── Mobile scaling — handled by JS resize, no overrides needed ── */

/* ── Touch buttons overlay ── */
#touch-controls {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 130px;
  pointer-events: none;
  z-index: 100;
  user-select: none;
}

@media (pointer: coarse) {
  #touch-controls { display: block; }
}

.touch-btn {
  position: absolute;
  pointer-events: all;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 3px solid rgba(255,255,255,0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.1s;
}

.touch-btn.active {
  background: rgba(255,165,0,0.45);
  border-color: #FFA500;
  color: #fff;
}

.touch-btn[data-action="ArrowLeft"]  { bottom: 20px; left: 16px; }
.touch-btn[data-action="ArrowRight"] { bottom: 20px; left: 104px; }
.touch-btn[data-action="KeyZ"]       { bottom: 28px; right: 124px; width: 68px; height: 68px; font-size: 24px; border-color: rgba(255,165,0,0.5); }
.touch-btn[data-action="Space"]      { bottom: 20px; right: 24px;  width: 88px; height: 88px; font-size: 22px; }
.touch-btn[data-action="KeyZ"].active  { background: rgba(255,100,0,0.5); border-color: #FF4500; }