/* === Snake Arena — décoration animée du banner (pages internes) ===
   Le layout du banner (wrapper, home, title) vient de banner.css partagé.
*/

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, rgba(74,222,128,0.05) 30%, transparent 31%);
  background-size: 56px 56px;
  pointer-events: none;
  z-index: 0;
}
#app { position: relative; z-index: 1; }

/* Petits serpents flottants dans le banner */
.serpent-deco {
  width: 26px; height: 26px;
  border-radius: 50% 50% 50% 8px;
  display: inline-block;
  animation: serpent-banner-float 3s ease-in-out infinite;
  will-change: transform;
}
.serpent-deco:nth-child(2) { animation-delay: -1s; }
.serpent-deco:nth-child(3) { animation-delay: -2s; }
.serpent-vert  { background: radial-gradient(circle at 35% 35%, #86efac, #22c55e); box-shadow: 0 3px 8px rgba(34,197,94,0.5); }
.serpent-cyan  { background: radial-gradient(circle at 35% 35%, #a5f3fc, #22d3ee); box-shadow: 0 3px 8px rgba(34,211,238,0.5); }
.serpent-jaune { background: radial-gradient(circle at 35% 35%, #fde68a, #facc15); box-shadow: 0 3px 8px rgba(250,204,21,0.4); }
@keyframes serpent-banner-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@media (max-width: 480px) {
  .serpent-deco { width: 20px; height: 20px; }
}