/* ==========================================================================
   Le serpent — habillage.

   Un plateau carré, centré, et rien autour. Le score est au-dessus, pas
   dessus : un chiffre posé sur la grille se retrouve toujours sous le serpent
   au pire moment.
   ========================================================================== */
.sp {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 100%; height: 100%; justify-content: center; padding: 8px;
}

.sp-barre {
  display: flex; align-items: center; gap: 14px;
  font-weight: 600; font-size: 15px;
}
.sp-barre b { font-variant-numeric: tabular-nums; font-size: 22px; }
.sp-record { opacity: .6; font-size: 13px; }
.sp-son {
  border: 0; border-radius: 999px; cursor: pointer;
  width: 32px; height: 32px; font-size: 15px;
  background: var(--line, #e1e5ec); color: inherit;
}

/* LE PLATEAU EST CARRÉ, et sa taille vient de la PLUS PETITE dimension
   disponible. Sans le plafond par la hauteur, la grille déborde en paysage sur
   un portable et les rangées du bas sortent de la scène — invisibles, donc
   mortelles. */
.sp-plateau {
  position: relative;
  width: min(100%, 74vh, 520px);
  aspect-ratio: 1;
  border-radius: 18px;
  overflow: hidden;
  background: var(--board-bg, #e7eaf1);
  box-shadow: 0 8px 26px rgba(20, 30, 50, .16);
  touch-action: none;
}
.sp-plateau canvas { display: block; width: 100%; height: 100%; }

/* La croix directionnelle, pour ceux qui préfèrent appuyer que balayer — et
   pour les pouces qui ne veulent pas quitter le bas de l'écran. */
.sp-croix {
  display: grid;
  grid-template-columns: repeat(3, 52px);
  grid-template-rows: repeat(2, 46px);
  gap: 6px;
  justify-content: center;
}
.sp-croix button {
  border: 0; border-radius: 12px; cursor: pointer;
  background: var(--line, #e1e5ec); color: inherit;
  font-size: 18px; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.sp-croix button:active { transform: translateY(1px); }
.sp-croix .haut { grid-column: 2; grid-row: 1; }
.sp-croix .gauche { grid-column: 1; grid-row: 2; }
.sp-croix .bas { grid-column: 2; grid-row: 2; }
.sp-croix .droite { grid-column: 3; grid-row: 2; }

/* Au clavier, la croix ne sert à rien et mange de la place : on la cache dès
   qu'une touche est utilisée (Recre.input pose la classe sur le plateau). */
.sp.clavier .sp-croix { display: none; }