/*
  ─────────────────────────────────────────────────────────────
  SNAKE — solo lo propio del juego. Todo lo demás (tokens, reset,
  barra, capa, botones) vive en /comun/base.css.
  ─────────────────────────────────────────────────────────────
*/

/* ── Marcador ───────────────────────────────────────────────── */
.marcador {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  margin-top: 2.5rem;
  color: var(--muted);
}

.marcador b {
  font-weight: 400;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ── Tablero ────────────────────────────────────────────────── */
.tablero {
  position: relative;
  width: min(100%, 34rem);
  margin: 1rem auto 0;
  border: var(--hairline);
}

#lienzo {
  width: 100%;
  aspect-ratio: 1;
  /* el deslizamiento mueve la serpiente, no hace scroll de la página */
  touch-action: none;
}

/* ── Controles táctiles: solo donde no hay teclado cómodo ───── */
.dpad {
  display: none;
}

@media (pointer: coarse) {
  .dpad {
    display: grid;
    grid-template-columns: repeat(3, 3.5rem);
    grid-template-rows: repeat(2, 3.5rem);
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
  }

  .dpad button {
    background: none;
    border: var(--hairline);
    color: var(--ink);
    font-size: 1.125rem;
    cursor: pointer;
  }

  .dpad button[data-dir='arriba'] {
    grid-column: 2;
  }
}