/* Fond : damier incliné avec quelques X, O et cases hachurées, qui défile en diagonale à l'infini.
   Le décor est dans assets/img/board.svg (tuile de 12x12 cases de 72px).
   Le défilement et le clic pour poser une croix sont gérés par assets/js/board.js. */
:root {
  --grid-tilt: -12deg;
  --board-size: 864px;
  --cell-size: 72px;
}
.board {
  position: fixed; inset: -50%; z-index: -1; pointer-events: none; overflow: hidden;
  transform: rotate(var(--grid-tilt));
}
/* Dépasse d'une tuile en haut et à gauche : on peut le translater d'une tuile sans découvrir le bord. */
.board-sheet {
  position: absolute; right: 0; bottom: 0;
  top: calc(-1 * var(--board-size)); left: calc(-1 * var(--board-size));
  background: url("/assets/img/board.svg") 0 0 / var(--board-size) var(--board-size);
  will-change: transform;
}
.board-marks { position: absolute; inset: 0; will-change: transform; }
.mark, .apple, .snake { position: absolute; width: var(--cell-size); height: var(--cell-size); }
.snake { overflow: visible; }  /* la langue dépasse de la case */
.mark { opacity: .1; }
.apple { opacity: .35; }
.pop { animation: mark-pop .15s ease-out; }
.snake.dead { animation: snake-die .5s ease-in forwards; }
@keyframes snake-die {
  to { opacity: 0; transform: scale(.3); }
}
/* Rebond de tout le plateau au passage en mode snake */
.board.bounce { animation: board-bounce .4s ease-out; }
@keyframes board-bounce {
  35% { transform: rotate(var(--grid-tilt)) scale(1.04); }
}
.mark.bump { animation: mark-bump .35s ease-out; }
@keyframes mark-pop {
  from { transform: scale(.5); }
}
@keyframes mark-bump {
  35% { transform: scale(1.3); }
}
/* Trait qui barre trois croix alignées : se dessine de la première à la dernière */
.strike { position: absolute; overflow: visible; }
.strike line {
  stroke: var(--green-dark); stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: var(--len);
  animation: strike-draw .4s ease-out both;
}
@keyframes strike-draw {
  from { stroke-dashoffset: var(--len); }
  to   { stroke-dashoffset: 0; }
}

/* Main, sections, footer */
main { flex: 1; width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }

.hero { padding: 96px 0 64px; max-width: 760px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.section { padding: 56px 0; }
.section + .section { border-top: 1px solid var(--border); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }

.site-footer { border-top: 1px solid var(--border); padding: 28px 24px; text-align: center; color: var(--muted); font-size: .9rem; }

@media (max-width: 600px) {
  .hero { padding: 64px 0 40px; }
}