/**
 * Snake Grid Animation - Refactored
 * 
 * Animazione della griglia snake utilizzando variabili unificate
 * Richiede: _variables.css caricato prima
 */

#grid-snake {
  display: grid;
  grid-gap: 30px;
  position: relative;
  right: -40%;
  z-index: -10;
}

@media (min-width: 992px) {
  #grid-snake {
    right: -60%;
  }
}

@media (max-width: 767px) {
  #grid-snake {
    margin-bottom: -80%;
    right: 0;
    top: 15px;
  }
}

.cell {
  width: 10px;
  height: 10px;
  border: 1px solid rgba(var(--st-primary-rgb), 0.2);
  background-color: transparent;
  transition: all var(--st-transition-normal);
  border-radius: var(--st-radius-xs);
}

.snake {
  background-color: var(--st-primary);
  box-shadow: var(--st-shadow-primary);
}

.snake-head {
  background-color: color-mix(in srgb, var(--st-primary) 70%, white);
  box-shadow: 0 0 10px 2px var(--st-primary);
  z-index: 1;
}

@keyframes explode-particle {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--tx), var(--ty)) scale(0);
    opacity: 0;
  }
}

.explosion-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: var(--st-primary);
  border-radius: var(--st-radius-full);
  pointer-events: none;
}

/* Effetti aggiuntivi per il cibo */
.food {
  background: var(--st-gradient-primary);
  border-radius: var(--st-radius-full);
  animation: food-sparkle 2s ease-in-out infinite;
}

@keyframes food-sparkle {
  0%, 100% {
    box-shadow: 0 0 5px var(--st-green-neon);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 15px var(--st-green-neon), 0 0 25px var(--st-primary);
    transform: scale(1.2);
  }
}