/* ================================================================
   THE D-PAD'S LOOK

   The pad is a 3x3 grid. Four corners are left empty, so what's left
   is a plus shape: up, down, left, right, and a round button in the
   middle.
   ================================================================ */

.dpad {
  display: grid;
  grid-template-columns: repeat(3, 64px);
  grid-template-rows: repeat(3, 64px);
  gap: 6px;
  width: max-content;

  /* Stops a long press popping up "copy / share" menus on a phone. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

.dpad-gap {
  /* An empty corner. Nothing to see here — it just holds the space open. */
}

.dpad-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 24px;
  color: #cfe4ff;
  background: #223049;
  border: 2px solid #3d5a86;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);

  cursor: pointer;
  position: relative;
  transition: background 0.06s, transform 0.06s;
}

/* The middle one is a circle, not a square, so it's obvious it's different. */
.dpad-action {
  border-radius: 50%;
  background: #4a2f5e;
  border-color: #8b5fb0;
}

/* The little key name on each button: W, A, S, D, SPACE. */
.dpad-btn::after {
  content: attr(data-label);
  position: absolute;
  bottom: 5px;
  font-size: 10px;
  font-family: system-ui, sans-serif;
  letter-spacing: 1px;
  color: #7f9bc4;
}

.dpad-action::after {
  bottom: auto;                 /* the circle has no arrow, so centre the word */
  font-size: 11px;
  color: #d7b7f0;
}

/* Lit up: the button is being held down right now. */
.dpad-btn.on {
  background: #57e0a0;
  border-color: #9dffd0;
  color: #0d2018;
  transform: translateY(2px);
}

.dpad-action.on {
  background: #ffd166;
  border-color: #fff0c0;
}

.dpad-btn.on::after {
  color: #0d2018;
}