/* On-screen d-pad and fire button. Shown on touch devices and narrow screens. */

.touchpad {
  display: none;
  width: var(--console-w);
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: 0.5rem;
}

@media (pointer: coarse), (max-width: 760px) {
  .touchpad {
    display: grid;
  }
}

.pad-btn {
  display: grid;
  place-items: center;
  min-height: 58px;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color 90ms ease;
}

.pad-btn:hover {
  background: var(--surface-raised);
}

.pad-btn.is-pressed,
.pad-btn:active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.pad-btn--fire {
  font-size: 0.8125rem;
  background: var(--surface-raised);
  border-color: var(--ink-faint);
}

.pad-btn--fire.is-pressed,
.pad-btn--fire:active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

@media (prefers-reduced-motion: reduce) {
  .pad-btn {
    transition: none;
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  .touchpad {
    width: clamp(112px, 20vw, 168px);
    grid-template-columns: 1fr 1fr;
    align-self: stretch;
    align-content: center;
  }

  .pad-btn--fire {
    grid-column: 1 / -1;
    min-height: 72px;
  }
}