/* === Bloks Mania — 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 cases et le fond du
   body. Pas d'animation : sur une page de jeu, un mouvement permanent en haut
   de l'écran distrait du puits. */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(168, 85, 247, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.045) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}

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

.deco-banner.bloc-cyan,
.deco-banner.bloc-violet,
.deco-banner.bloc-jaune {
  border-radius: 3px;
}

.bloc-cyan {
  background: #22d3ee;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.28), inset -2px -2px 0 rgba(0, 0, 0, 0.3);
}

.bloc-violet {
  background: #a855f7;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.28), inset -2px -2px 0 rgba(0, 0, 0, 0.3);
}

.bloc-jaune {
  background: #fde047;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.28), inset -2px -2px 0 rgba(0, 0, 0, 0.3);
}