.dp-board {
  display: grid;
  gap: 3px;
  margin: 14px auto;
  width: min(92vw, 360px);
  user-select: none;
}
.dp-cell {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(15px, 4.5vw, 22px);
  font-weight: 700;
  border-radius: 8px;
  background: #eef1f6;
  color: #2b2f38;
  cursor: pointer;
}
.dp-cell.black { background: #2b2f38; color: #2b2f38; }
.dp-cell.empty { background: #f6f8fb; cursor: default; }
.dp-clue {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(12px, 3.6vw, 17px);
  font-weight: 700;
  color: #4d96ff;
}
.dp-clue.side { color: #ff6b6b; }
.dp-cell.ok { outline: 2px solid #6bcb77; }