/* Snake-specific styles */
.game--snake { max-width: 560px; }

.snake__bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin: 14px 0 12px;
}

.snake__stage { display: flex; justify-content: center; }
#board {
  display: block;
  width: min(86vw, 420px);
  height: auto;
  aspect-ratio: 1 / 1;
  background: #fbfcff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  touch-action: none; /* let our swipe handler own touch on the board */
}

.snake__mobile { display: none; margin-top: 14px; }
.snake__mobile .dpad { justify-self: center; }

.keyhelp {
  text-align: center;
  color: var(--text-faint);
  font-size: 0.78rem;
  margin-top: 12px;
}

/* On small screens: fit everything into the viewport with no scrolling.
   Column layout: chrome is fixed, board flexes to fill the rest. */
@media (max-width: 640px) {
  .game--snake {
    /* dvh = dynamic viewport height: accounts for iOS Safari's URL bar */
    min-height: calc(100dvh - 56px); /* minus sticky topbar */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
  .snake__bar { margin-top: 0; }
  .snake__mobile { display: flex; justify-content: center; margin-top: 10px; }
  /* shrink board so the whole screen fits; keep it square */
  #board { width: min(72vw, 56vh, 360px); }
  .dpad {
    grid-template-columns: repeat(3, 50px);
    grid-template-rows: repeat(3, 50px);
    gap: 5px;
  }
  .keyhelp { display: none; } /* reclaim space on phones */
}

/* Taller phones: give the board a little more room */
@media (max-width: 640px) and (min-height: 740px) {
  #board { width: min(74vw, 60vh, 400px); }
  .dpad {
    grid-template-columns: repeat(3, 56px);
    grid-template-rows: repeat(3, 56px);
  }
}