/* ============================================
   Mobile Game Controls
   ============================================ */

.game-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-4);
  z-index: 5;
  pointer-events: none;
  display: none;
}

/* Show only on touch devices */
@media (pointer: coarse) {
  .game-controls {
    display: flex;
  }
}

.game-controls > * {
  pointer-events: auto;
}

/* ---- D-Pad ---- */
.dpad {
  position: relative;
  width: 120px;
  height: 120px;
}

.dpad__btn {
  position: absolute;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.dpad__btn:active {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.dpad__btn .icon {
  width: 20px;
  height: 20px;
}

.dpad__btn--up { top: 0; left: 50%; transform: translateX(-50%); }
.dpad__btn--down { bottom: 0; left: 50%; transform: translateX(-50%); }
.dpad__btn--left { left: 0; top: 50%; transform: translateY(-50%); }
.dpad__btn--right { right: 0; top: 50%; transform: translateY(-50%); }

/* ---- Action Button ---- */
.game-controls__action {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: rgba(var(--color-primary-rgb), 0.4);
  border: 2px solid rgba(var(--color-primary-rgb), 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.game-controls__action:active {
  background: rgba(var(--color-primary-rgb), 0.6);
  transform: scale(0.95);
}

/* ---- Control Layouts ---- */
.game-controls--dpad {
  justify-content: space-between;
  align-items: flex-end;
}

.game-controls--tap {
  display: none;
}

.game-controls--swipe {
  display: none;
}