/*
 * Poker Master — déco animée du banner des pages internes.
 *
 * UNIQUEMENT la déco : la structure (.banner-home, .banner-title, .jeu-banner)
 * appartient au composant partagé fichiers-partages-des-jeux/css/banner.css,
 * servi ici par le proxy proxies/css-banner.php. Ne rien redéfinir de ce qui
 * vient de là.
 *
 * Animations en transform/opacity seulement (pièges de perf Firefox).
 */

.carte-deco {
  position: absolute;
  top: 26%;
  font-size: 1.15rem;
  line-height: 1;
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.carte-pique  { left: 16%; color: #f8fafc; animation: carte-flotte 6.5s ease-in-out infinite; }
.carte-coeur  { left: 48%; color: #f87171; animation: carte-flotte 6.5s ease-in-out infinite 2.2s; }
.carte-trefle { left: 79%; color: #f8fafc; animation: carte-flotte 6.5s ease-in-out infinite 4.3s; }

/* Une carte qu'on retourne lentement au-dessus du tapis. */
@keyframes carte-flotte {
  0%   { opacity: 0;    transform: translateY(10px) rotate(-14deg) scale(0.85); }
  15%  { opacity: 0.85; }
  50%  { opacity: 0.85; transform: translateY(-8px) rotate(10deg) scale(1.05); }
  85%  { opacity: 0.6; }
  100% { opacity: 0;    transform: translateY(-20px) rotate(22deg) scale(0.9); }
}

@media (prefers-reduced-motion: reduce) {
  .carte-deco { animation: none; opacity: 0.55; }
}

@media (max-width: 640px) {
  /* Trois symboles sur un banner étroit, ça fait chargé : on n'en garde qu'un. */
  .carte-coeur, .carte-trefle { display: none; }
}