.game-root { min-height: 28rem; }

.snake-stage {
  display: flex;
  justify-content: center;
}

.snake-board {
  width: min(100%, 46rem);
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 32%),
    #163028;
  border: 1px solid rgba(232, 217, 168, 0.35);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 14px 28px rgba(0, 0, 0, 0.28);
  touch-action: none;
  user-select: none;
  outline: none;
}

.snake-board:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

.snake-cell {
  position: relative;
  background: rgba(255, 253, 247, 0.06);
  border-radius: 3px;
}

.snake-cell.body,
.snake-cell.head {
  border-radius: 32%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.snake-cell.body {
  background: linear-gradient(160deg, #e4c56e, #b8923a);
}

.snake-cell.head {
  background: linear-gradient(160deg, #f6e7b8, #c9a24a);
}

.snake-cell.head::before,
.snake-cell.head::after {
  content: "";
  position: absolute;
  width: 16%;
  height: 16%;
  min-width: 3px;
  min-height: 3px;
  border-radius: 50%;
  background: #1d2433;
}

.snake-cell.head[data-dir="e"]::before { top: 26%; right: 18%; }
.snake-cell.head[data-dir="e"]::after { bottom: 26%; right: 18%; }
.snake-cell.head[data-dir="w"]::before { top: 26%; left: 18%; }
.snake-cell.head[data-dir="w"]::after { bottom: 26%; left: 18%; }
.snake-cell.head[data-dir="n"]::before { top: 18%; left: 26%; }
.snake-cell.head[data-dir="n"]::after { top: 18%; right: 26%; }
.snake-cell.head[data-dir="s"]::before { bottom: 18%; left: 26%; }
.snake-cell.head[data-dir="s"]::after { bottom: 18%; right: 26%; }

.snake-cell.crash {
  background: var(--danger);
  box-shadow: none;
}

.snake-cell.food::after {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e7a090, #8f2f2c 72%);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.28);
}

.snake-status.win { color: var(--success); }
.snake-status.lose { color: var(--danger); }

.snake-main { min-width: 7.25rem; }

.snake-pad {
  display: grid;
  grid-template-columns: repeat(3, 4.5rem);
  grid-template-areas:
    ". up ."
    "left . right"
    ". down .";
  gap: 0.4rem;
  justify-content: center;
  margin: 0.9rem auto 0.15rem;
}

.snake-pad .btn {
  padding-inline: 0.25rem;
  min-width: var(--tap-min);
}

.snake-pad-up { grid-area: up; }
.snake-pad-left { grid-area: left; }
.snake-pad-right { grid-area: right; }
.snake-pad-down { grid-area: down; }

@media (max-width: 640px) {
  .snake-pad {
    grid-template-columns: repeat(3, min(28vw, 5.5rem));
    gap: 0.5rem;
  }
}