/* === Blobs en Chaîne — identité du banner des pages internes ===
   Le layout (wrapper, retour à l'accueil, titre) et la taille des pastilles
   viennent de fichiers-partages-des-jeux/css/banner.css (.jeu-banner,
   .deco-banner). On ne fournit ici que le remplissage des pastilles et le fond
   du body. Pas d'animation : sur une page de jeu, un mouvement permanent en
   haut de l'écran distrait du plateau. */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle 5px, rgba(216, 180, 254, 0.05) 99%, transparent 100%);
  background-size: 34px 34px;
  pointer-events: none;
  z-index: 0;
}

#app {
  position: relative;
  z-index: 1;
}

/* Les trois couleurs de blobs les plus présentes en jeu, en relief interne
   seulement : aucune ombre portée colorée, comme partout ailleurs. */
.blob-vert {
  background: radial-gradient(circle at 35% 35%, #86efac, #15803d);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.25);
}

.blob-rouge {
  background: radial-gradient(circle at 35% 35%, #fca5a5, #b91c1c);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.25);
}

.blob-bleu {
  background: radial-gradient(circle at 35% 35%, #93c5fd, #1d4ed8);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.25);
}

.blob-jaune {
  background: radial-gradient(circle at 35% 35%, #fde68a, #b45309);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.25);
}