body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    repeating-linear-gradient(45deg, rgba(217,70,239,0.03) 0px, rgba(217,70,239,0.03) 2px, transparent 2px, transparent 20px),
    repeating-linear-gradient(-45deg, rgba(162,28,175,0.02) 0px, rgba(162,28,175,0.02) 2px, transparent 2px, transparent 20px);
  pointer-events: none;
  z-index: 0;
}

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


.deco-banner.carte-atout,
.deco-banner.carte-coeur,
.deco-banner.carte-pique {
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700;
}
.carte-atout {
  background: linear-gradient(135deg, #fde68a, #fbbf24);
  color: #7c3aed;
  box-shadow: inset 0 -2px 3px rgba(255,255,255,0.15);
}
.carte-coeur {
  background: linear-gradient(135deg, #fca5a5, #ef4444);
  color: #fff;
  box-shadow: inset 0 -2px 3px rgba(255,255,255,0.15);
}
.carte-pique {
  background: linear-gradient(135deg, #cbd5e1, #64748b);
  color: #1e293b;
  box-shadow: inset 0 -2px 3px rgba(255,255,255,0.15);
}

@media (max-width: 480px) {
  .deco-banner.carte-atout,
  .deco-banner.carte-coeur,
  .deco-banner.carte-pique {
    font-size: 0.85rem;
  }
}