/* Tirer une carte au hasard : styles propres à l'outil. La face des cartes est un objet volontairement clair. */
.o-tirer-carte { min-width: 0; }
.o-tirer-carte .o-tirer-carte-jeux { border-top: 0; padding-top: 0; justify-content: center; }
.atelier .o-tirer-carte-jeux .btn[aria-pressed="true"] { background: var(--marque); border-color: var(--marque); color: var(--sur-marque); }
.atelier .o-tirer-carte-jeux .o-tirer-carte-pays { font-weight: 700; box-shadow: inset 0 0 0 1px var(--marque); }

.o-tirer-carte-table { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 14px; width: 100%; min-height: 200px; }
.o-tirer-carte-carte { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; width: 132px; }
.o-tirer-carte-svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 2px 4px rgb(0 0 0 / 22%)); }
.o-tirer-carte-carte figcaption { font-weight: 700; font-size: .98rem; line-height: 1.25; color: var(--texte); overflow-wrap: anywhere; }
.o-tirer-carte-table.plusieurs { gap: 10px; }
.o-tirer-carte-table.plusieurs .o-tirer-carte-carte { width: 84px; }
.o-tirer-carte-table.plusieurs figcaption { font-size: .8rem; font-weight: 600; }
.o-tirer-carte-dos { width: 110px; opacity: .9; }
.o-tirer-carte-table:has(.o-tirer-carte-dos) { flex-direction: column; align-items: center; }
.o-tirer-carte-invite { max-width: 34em; color: var(--texte-2); font-size: .95rem; }
.o-tirer-carte-reste { margin: 0; font-weight: 600; color: var(--texte); font-variant-numeric: tabular-nums; }
.o-tirer-carte-boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.o-tirer-carte-boutons .btn:not(.tirage-bouton) { min-height: 54px; border-radius: 999px; padding-inline: 22px; }

.o-tirer-carte-carte.retourne { animation: o-tirer-carte-retourne .32s ease-out both; transform-origin: 50% 50%; }
@keyframes o-tirer-carte-retourne {
  from { transform: perspective(600px) rotateY(90deg); opacity: .4; }
  to { transform: perspective(600px) rotateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .o-tirer-carte-carte.retourne { animation: none; }
}

.o-tirer-carte-bloc { display: grid; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--bord); }
.o-tirer-carte-bloc h2 { margin: 0; font-size: 1.15rem; }
.o-tirer-carte .o-tirer-carte-aide { margin: 0; color: var(--texte-2); font-size: .92rem; line-height: 1.5; }
.o-tirer-carte-distribuer { align-self: end; min-height: 42px; }
.o-tirer-carte .tirage-message.erreur { color: var(--erreur-texte); font-size: .95rem; }
.o-tirer-carte-bloc .tirage-message { font-size: .95rem; color: var(--texte); }
.o-tirer-carte-mains { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.o-tirer-carte-mains:empty { display: none; }
.o-tirer-carte-main { padding: 10px 12px; border: 1px solid var(--bord); border-radius: var(--rayon-petit); background: var(--surface-2); }
.o-tirer-carte-main h3 { margin: 0 0 8px; font-size: .95rem; }
.o-tirer-carte-main ul { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }

.o-tirer-carte-mini { display: inline-flex; }
.o-tirer-carte-mini > span[aria-hidden] { display: inline-flex; align-items: center; gap: 2px; min-width: 34px; height: 30px; padding: 0 6px; box-sizing: border-box; justify-content: center; border: 1px solid #c9cedb; border-radius: 6px; background: #fffdf8; font: 700 .92rem/1 var(--police); }
.o-tirer-carte-mini svg { width: 16px; height: 16px; flex: none; }
.o-tirer-carte-cache { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.o-tirer-carte-historique strong { flex: 1; }
.o-tirer-carte-historique ul { flex-basis: 100%; order: 3; }
.o-tirer-carte .tirage-historique li { min-width: 0; height: auto; padding: 0; background: none; }
.o-tirer-carte .tirage-historique li.vide { color: var(--texte-2); font: .9rem var(--police); }
.o-tirer-carte .btn:focus-visible, .o-tirer-carte input:focus-visible { outline: 3px solid var(--marque); outline-offset: 2px; }

@media (max-width: 520px) {
  .o-tirer-carte-carte { width: 118px; }
  .o-tirer-carte-table.plusieurs .o-tirer-carte-carte { width: 72px; }
  .o-tirer-carte-mains { grid-template-columns: 1fr; }
}