.critter-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 8px;
  width: min(400px, 90vw);
  aspect-ratio: 1 / 1;
  background: var(--color-border);
  padding: 8px;
  border-radius: var(--radius-md);
}
.critter-cell {
  background: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.critter-tile {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.3rem, 6vw, 2.1rem);
}
.critter-dpad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.critter-dpad__row { display: flex; gap: 6px; }
.critter-dpad button {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  border: 2px solid var(--color-border);
  background: #fff;
  font-size: 1.3rem;
  cursor: pointer;
}
.critter-dpad button:hover { border-color: var(--color-primary); }