/* Mahjong : ce qui distingue son bandeau et son fond de page.
   La mise en page du bandeau (cadre, lien d'accueil, titre) vient de banner.css partagé,
   chargé par le composant banner.php via le proxy css-banner.php. */

/* Trame discrète de tuiles en fond de page */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(16, 185, 129, 0.03) 0, rgba(16, 185, 129, 0.03) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(90deg, rgba(16, 185, 129, 0.03) 0, rgba(16, 185, 129, 0.03) 1px, transparent 1px, transparent 60px);
  pointer-events: none;
  z-index: 0;
}

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

/* Les trois petites tuiles du bandeau */
.tile-deco {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--color-light) 40%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--color-mid) 22%, var(--surface-1));
  color: var(--color-light);
  font-size: 0.85rem;
  font-weight: 900;
}

@media (max-width: 480px) {
  .tile-deco {
    width: 18px;
    height: 24px;
    font-size: 0.7rem;
  }
}