/* File: card.css - Overlay aperçu carte
   Desc: Dans l'architecture, je suis le calque visuel de #modal-card.
   Version 1.1.13
   Date: August 23, 2026 14:05 UTC+1
   Logs:
   - 1.1.13: --card-rx/ry = :root 5.6%/4% (plus de +1px)
   - 1.1.12: overflow visible (cache.png hors clip)
   - 1.1.11: fond --card-ink (plus de calque)
   - 1.1.10: --card-rx/ry Alpha +1px (plus de tour)
   - 1.1.9: --card-ink 5px ; plus de ::after local
   - 1.1.8: clip 5.6%/4% + filet 5px (croissant, 1 ::after)
   - 1.1.7: cadre 4.75%/3.41% ; art 5.3%/3.8% (croissant noir)
   - 1.1.6: coins Alpha (8% / 5.7%) + fond noir
   - 1.1.5: coins M15 (plus de bords blancs JPEG en grand)
   - 1.1.4: DFC une grande image (clic = flip) ; plus de verso petit
   - 1.1.3: image modal ~plein écran (lecture du texte imprimé)
   - 1.1.2: #modal-card-legal
   - 1.1.1: verso petit ; nom blanc = face montrée
   - 1.1.0: .modal-card-arts recto+verso DFC
   - Initial: backdrop + fiche image/oracle */

#modal-card {
  position: fixed;
  inset: 0;
  background: rgba(8, 6, 4, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  overflow: auto;
}

#modal-card[hidden] {
  display: none;
}

#modal-card .modal-panel {
  display: flex;
  gap: 1.25rem;
  max-width: 98vw;
  max-height: 96vh;
  background: #241c14;
  border: 1px solid #c9a227;
  padding: 1rem;
}

.modal-card-arts {
  --card-rx: 5.6%;
  --card-ry: 4%;
  position: relative;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  line-height: 0;
  overflow: visible;
  background: var(--card-ink);
  border-radius: var(--card-rx) / var(--card-ry);
}

#modal-card img {
  width: auto;
  height: min(88vh, 56rem);
  max-width: min(42rem, 58vw);
  object-fit: contain;
  display: block;
  background: var(--card-ink);
  border-radius: inherit;
}

#modal-card[data-dfc="1"] #modal-card-img {
  cursor: pointer;
}

#modal-card-img-back[hidden] {
  display: none;
}

#modal-card-name {
  color: var(--cream);
}

#modal-card-name-other {
  display: block;
  margin: 0 0 0.6rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--mute);
  font: inherit;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
}

#modal-card-name-other[hidden] {
  display: none;
}

#modal-card-legal {
  color: var(--mute);
  font-size: 0.9rem;
}

#modal-card-oracle {
  white-space: pre-wrap;
  max-width: 26rem;
}