.sn-board {
  display: grid;
  grid-template-columns: repeat(17, 1fr);
  width: min(92vw, 360px);
  aspect-ratio: 1 / 1;
  background: #0f1b2d;
  border: 3px solid #2b3f5c;
  border-radius: 10px;
  padding: 3px;
  gap: 1px;
  touch-action: none;
}
.sn-cell { background: #16263c; border-radius: 2px; }
.sn-cell.food { background: #ff6b6b; box-shadow: 0 0 6px #ff6b6b; }
.sn-cell.head { background: #6bcb77; border-radius: 3px; }
.sn-cell.body { background: #4d96ff; }
.dpad {
  display: grid;
  grid-template-columns: repeat(3, 56px);
  grid-template-rows: repeat(2, 56px);
  gap: 8px;
  justify-content: center;
}
.dpad .dp {
  font-size: 22px; border: none; border-radius: 12px;
  background: #2b3f5c; color: #e8eefc; cursor: pointer;
}
.dpad .up { grid-column: 2; grid-row: 1; }
.dpad .left { grid-column: 1; grid-row: 2; }
.dpad .right { grid-column: 3; grid-row: 2; }
.dpad .down { grid-column: 2; grid-row: 2; }
.dpad .dp:active { background: #4d96ff; }