#snakeCanvas {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(235, 239, 234, 0.32), rgba(192, 205, 197, 0.18)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
  border: 1px solid rgba(138, 180, 255, 0.16);
  box-shadow: inset 0 8px 20px rgba(0, 0, 0, 0.18);
  touch-action: none;
}

.snake-side-card {
  display: grid;
  gap: 16px;
  align-content: start;
}

.snake-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 320px;
  touch-action: manipulation;
}

.snake-side-card .snake-controls {
  margin-top: 4px;
}

.snake-controls .control-btn:not(.blank) {
  background: linear-gradient(180deg, #c8d4cf 0%, #a9bbb2 100%);
  color: #233340;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(35, 51, 64, 0.12);
}

.control-btn {
  min-height: var(--tap-size);
  border-radius: 24px;
  background: linear-gradient(180deg, #ffd84d 0%, #ffb62a 100%);
  color: #113761;
  font-size: 1.8rem;
  font-weight: 900;
  box-shadow: 0 10px 18px rgba(255, 182, 42, 0.35);
  user-select: none;
  touch-action: manipulation;
}

.control-btn.blank {
  background: transparent;
  box-shadow: none;
  cursor: default;
}

@media (max-width: 560px) {
  .control-btn {
    min-height: 72px;
    border-radius: 20px;
  }

  .snake-side-card .snake-controls {
    max-width: none;
  }
}