.control-pad {
  width: min(340px, 100%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
}

.control-btn {
  min-height: 92px;
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  background: #21262d;
  color: #fff;
  font-size: 1.8rem;
}

.control-btn:hover {
  background: #30363d;
}

.control-btn[data-direction="forward"] { grid-column: 2; }
.control-btn[data-direction="left"] { grid-column: 1; }
.stop-btn { grid-column: 2; background: #b62324; }
.control-btn[data-direction="right"] { grid-column: 3; }
.control-btn[data-direction="reverse"] { grid-column: 2; }