/*
 * Poker Master — les cartes à jouer.
 *
 * Feuille à part parce qu'elle sert partout où une carte s'affiche : la table,
 * les guides, le calculateur de cotes et le problème du jour. Une carte est
 * dessinée par js/table.js (PokerTable.elementCarte) ou par
 * includes/cartes-html.php, avec le même balisage :
 *   <span class="carte [rouge] [grande|petite|dos]">
 *     <span class="carte-rang">R</span><span class="carte-sym">♦</span>
 *   </span>
 * Rapport largeur/hauteur 5/7, comme une vraie carte.
 */

.carte {
  --carte-l: 40px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: var(--carte-l);
  height: calc(var(--carte-l) * 1.4);
  border-radius: calc(var(--carte-l) * 0.13);
  background: #f6f7f9;
  border: 1px solid #c3cad5;
  color: #10151d;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  line-height: 1;
  user-select: none;
  flex: none;
}

.carte .carte-rang { font-size: calc(var(--carte-l) * 0.42); }
.carte .carte-sym { font-size: calc(var(--carte-l) * 0.4); }
.carte.rouge { color: #c62828; }

.carte.grande { --carte-l: 54px; }
.carte.petite { --carte-l: 26px; }

.carte.dos {
  background: repeating-linear-gradient(45deg, #7f1d1d 0 5px, #991b1b 5px 10px);
  border-color: #450a0a;
}

/* Emplacement vide du tableau : il réserve la place sans rien montrer. */
.carte.vide {
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.18);
}

/* Carte qui vient d'être posée. */
.carte.entrante { animation: pm-pose 0.26s ease-out; }

@keyframes pm-pose {
  from { opacity: 0; transform: translateY(-10px) rotate(-5deg); }
  to   { opacity: 1; transform: none; }
}

/* À l'abattage : les cinq cartes qui font la main gagnante ressortent, les
   autres s'effacent. */
.carte.retenue { outline: 3px solid #e3b341; outline-offset: -1px; }
.carte.ecartee { opacity: 0.42; }

/* Rangée de cartes dans un texte (guides, analyse d'une main). */
.cartes-ligne { display: inline-flex; gap: 4px; vertical-align: middle; flex-wrap: wrap; }

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