/* Dodgeball Agility — game-specific accent + directional pad. */
:root {
  --sm-accent: hsl(146 55% 38%);
  --sm-accent-dark: hsl(146 60% 26%);
}
.dg-pad {
  display: grid;
  grid-template-columns: repeat(3, 4.2rem);
  grid-template-rows: repeat(2, 4.2rem);
  gap: 0.4rem;
  justify-content: center;
  margin: 0 auto;
}
.dg-btn {
  min-width: 4.2rem; min-height: 4.2rem; border: none; border-radius: 1rem;
  background: hsl(146 55% 38%); color: #fff; font-size: 1.6rem; cursor: pointer;
  box-shadow: 0 6px 0 hsl(146 60% 26%); transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.dg-btn:active, .dg-btn.sm-pressed { transform: translateY(5px); box-shadow: 0 1px 0 hsl(146 60% 26%); }
.dg-btn:focus-visible { outline: 4px solid var(--sm-cyan); outline-offset: 2px; }
.dg-up { grid-column: 2; grid-row: 1; }
.dg-left { grid-column: 1; grid-row: 2; }
.dg-right { grid-column: 3; grid-row: 2; }
.dg-down { grid-column: 2; grid-row: 2; }