/* Fama — l'habit des cartes selon leur rarete. Chaque palier ajoute un effet au precedent :
   Ordinaire (cadre simple) < Inhabituel (cadre vert) < Rare (bleu, lueur, eclat a l'arrivee)
   < Epique (violet, pulsation, etincelles) < Legendaire (or en relief, eclat continu, rayons)
   < Hors du commun (cadre irise qui tourne, hologramme, relief qui suit le pointeur, particules). */

/* ---- la carte elle-meme (jeu, collection, vitrine) ; couleurs --parchemin, --or, --encre, --or-clair : definies par la page ---- */
  .carte{position:relative; width:min(76vw,42vh,340px); aspect-ratio:1; border-radius:18px; background:var(--parchemin);
    box-shadow:0 18px 34px -14px rgba(0,0,0,.7); touch-action:none; cursor:grab;
    transition:transform .3s ease}
  .carte.tenue{transition:none; cursor:grabbing}
  .dessin{position:relative; width:100%; height:100%; border-radius:18px; overflow:hidden}
  .dessin::after{content:''; position:absolute; inset:7px; border:2px solid rgba(44,34,64,.2); border-radius:12px; pointer-events:none}
  .carte svg{display:block; width:100%; height:100%}
  .carte .reponse{position:absolute; top:0; left:0; right:0; padding:26px 16px 26px; font-weight:700; font-size:18px;
    color:var(--or-clair); background:linear-gradient(rgba(35,28,51,.92),rgba(35,28,51,0)); opacity:0;
    transition:opacity .12s}
  /* la reponse s'ecrit du cote qui reste a l'ecran */
  .carte .reponse.gauche{text-align:right} .carte .reponse.droite{text-align:left}

  /* nom de qui parle, en bandeau a cheval sur le haut de la carte */
  .bandeau{position:absolute; top:-15px; left:50%; transform:translateX(-50%); white-space:nowrap; pointer-events:none;
    font-family:'Cinzel',serif; font-size:15px; font-weight:700; letter-spacing:2px; color:var(--or-clair);
    background:var(--encre); border:2px solid var(--or); border-radius:14px; padding:4px 16px; box-shadow:0 4px 10px -4px rgba(0,0,0,.6)}
  .gemme{position:absolute; top:12px; right:12px; width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.85);
    box-shadow:0 2px 4px rgba(0,0,0,.35); z-index:1}

@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.carte::before { content: ''; position: absolute; inset: -6px; border-radius: 23px; background: var(--cadre, #9a8f7c); z-index: -1; }
.carte .dessin { transform-style: preserve-3d; }
.carte .holo, .carte .reflet, .carte .eclat { position: absolute; inset: 0; pointer-events: none; opacity: 0; }

/* Les entrees gardent « backwards » et jamais « both » : une animation terminee qui garde
   sa transformation ecraserait celle du glisser. */

/* Ordinaire */
.carte.r-ordinaire { --cadre: #9a8f7c; }

/* Inhabituel : cadre vert, deux rivets */
.carte.r-inhabituel { --cadre: linear-gradient(160deg, #a8e6b2, #3f8e4e); }
.carte.r-inhabituel .dessin::before, .carte.r-rare .dessin::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at 12px 12px, var(--rivet) 3px, transparent 4px), radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), var(--rivet) 3px, transparent 4px); }
.carte.r-inhabituel { --rivet: #3f8e4e; box-shadow: 0 0 16px rgba(95, 174, 110, .5), 0 18px 34px -14px rgba(0, 0, 0, .7); }

/* Rare : bleu, lueur, un eclat de lumiere traverse la carte a son arrivee */
.carte.r-rare { --cadre: linear-gradient(160deg, #b4d8ff, #2f6fc0); --rivet: #2f6fc0;
  box-shadow: 0 0 24px rgba(74, 143, 216, .6), 0 18px 34px -14px rgba(0, 0, 0, .7); }
.carte .eclat { background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .6) 50%, transparent 62%); transform: translateX(-130%); }
.carte.r-rare.arrive .eclat { opacity: 1; animation: eclat 1.1s ease-out .15s both; }
@keyframes eclat { to { transform: translateX(130%); } }

/* Epique : violet, cadre epais, pulsation, entree qui rebondit */
.carte.r-epique::before { inset: -8px; border-radius: 25px; }
.carte.r-epique { --cadre: linear-gradient(160deg, #ecd0ff, #6a2fa8 55%, #d0a0ff); animation: pouls-epique 2.4s ease-in-out infinite; }
@keyframes pouls-epique {
  0%, 100% { box-shadow: 0 0 18px rgba(154, 95, 208, .5), 0 18px 34px -14px rgba(0, 0, 0, .7); }
  50% { box-shadow: 0 0 40px rgba(190, 120, 255, .95), 0 18px 34px -14px rgba(0, 0, 0, .7); } }
.carte.r-epique.arrive { animation: pop .55s cubic-bezier(.3, 1.6, .5, 1) backwards, pouls-epique 2.4s ease-in-out .55s infinite; }
.carte.r-epique.arrive .eclat { opacity: 1; animation: eclat 1s ease-out .3s both; }
@keyframes pop { from { transform: scale(.75); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Legendaire : or en relief, eclat qui repasse sans cesse, rayons derriere la carte, entree en retournement */
.carte.r-legendaire::before { inset: -10px; border-radius: 27px;
  box-shadow: inset 0 3px 0 rgba(255, 246, 210, .9), inset 0 -4px 0 rgba(110, 70, 10, .8), inset 0 0 0 2px #8a5a12; }
.carte.r-legendaire { --cadre: linear-gradient(145deg, #fff3c0, #e0b048 30%, #8a5a12 50%, #f6d77a 70%, #b8862a);
  box-shadow: 0 0 46px rgba(230, 180, 60, .8), 0 18px 34px -14px rgba(0, 0, 0, .7); }
.carte.r-legendaire .eclat { opacity: 1; animation: eclat 1.3s ease-in-out infinite; animation-delay: 1.2s; }
.carte.r-legendaire .eclat { animation-name: eclat-boucle; animation-duration: 3.4s; }
@keyframes eclat-boucle { 0%, 55% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
.carte.r-legendaire.arrive { animation: retourne .8s cubic-bezier(.2, .9, .3, 1.2) backwards; }
@keyframes retourne { from { transform: perspective(800px) rotateY(100deg) scale(.8); filter: brightness(2.2); } 60% { filter: brightness(1.6); } to { transform: none; filter: none; } }
.carte.r-legendaire .reflet, .carte.r-hors .reflet { opacity: 1;
  background: radial-gradient(circle at var(--mx, 30%) var(--my, 20%), rgba(255, 255, 255, .38), transparent 45%); mix-blend-mode: soft-light; }
.carte.r-legendaire .bandeau { border-color: #f6d77a; box-shadow: 0 0 14px rgba(246, 215, 122, .8); }

/* Hors du commun : cadre irise qui tourne, hologramme, relief qui suit le pointeur, entree en eclat de lumiere */
.carte.r-hors::before { inset: -11px; border-radius: 28px;
  background: conic-gradient(from var(--angle), #ff8aa8, #ffd36a, #7ae0c8, #7aa8ff, #c78aff, #ff8aa8);
  animation: tourne 3.5s linear infinite; filter: saturate(1.3); }
@keyframes tourne { to { --angle: 360deg; } }
.carte.r-hors { box-shadow: 0 0 50px rgba(199, 138, 255, .75), 0 0 90px rgba(122, 224, 200, .35), 0 18px 34px -14px rgba(0, 0, 0, .7); }
.carte.r-hors .dessin { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .12s ease-out; }
.carte.r-hors .holo { opacity: .55; mix-blend-mode: color-dodge;
  background: repeating-linear-gradient(115deg, transparent 0, rgba(255, 120, 200, .55) 7%, rgba(120, 230, 255, .55) 14%, rgba(255, 240, 140, .55) 21%, transparent 28%);
  background-size: 300% 300%; background-position: var(--hx, 50%) var(--hy, 50%); animation: holo 6s linear infinite; }
@keyframes holo { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
.carte.r-hors .bandeau { border-color: #ffd36a; box-shadow: 0 0 16px #c78aff, 0 0 30px rgba(122, 224, 200, .6); }
.carte.r-hors.arrive { animation: jaillit 1s cubic-bezier(.2, .9, .2, 1.1) backwards; }
@keyframes jaillit { from { transform: translateY(60px) scale(.5) rotate(-8deg); opacity: 0; filter: brightness(3) blur(4px); }
  60% { filter: brightness(1.8) blur(0); } to { transform: none; opacity: 1; filter: none; } }

/* Rayons derriere la carte (legendaire : or ; hors du commun : arc-en-ciel) */
.aura { position: absolute; left: 50%; top: 50%; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%;
  pointer-events: none; opacity: 0; transition: opacity .6s;
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 20%, transparent 68%); }
.aura.legendaire { opacity: .55; background: repeating-conic-gradient(from var(--angle), rgba(255, 215, 110, .7) 0 6deg, transparent 6deg 20deg); animation: tourne 18s linear infinite; }
.aura.hors { opacity: .75; background: repeating-conic-gradient(from var(--angle), rgba(255, 138, 168, .6) 0 5deg, transparent 5deg 12deg, rgba(122, 168, 255, .6) 12deg 17deg, transparent 17deg 24deg); animation: tourne 10s linear infinite; }

/* Etincelles (epique et plus) */
.etincelle { position: absolute; width: 10px; height: 10px; pointer-events: none; z-index: 3;
  background: radial-gradient(circle, #fff 0 20%, var(--c, #f3ddb0) 35%, transparent 70%); border-radius: 50%;
  animation: monte var(--d, 1.6s) ease-out forwards; }
@keyframes monte { from { transform: translate(0, 0) scale(.4); opacity: 0; } 20% { opacity: 1; } to { transform: translate(var(--x, 0), -140px) scale(1.2); opacity: 0; } }

/* Collection : les miniatures reprennent l'habit de leur rarete, en plus sobre */
.mini.r-rare { box-shadow: 0 0 10px rgba(74, 143, 216, .6); }
.mini.r-epique { animation: pouls-mini 2.4s ease-in-out infinite; }
@keyframes pouls-mini { 50% { box-shadow: 0 0 16px rgba(190, 120, 255, .9); } }
.mini.r-legendaire { box-shadow: 0 0 14px rgba(230, 180, 60, .8); border-color: #f6d77a !important; }
.mini.r-hors:not(.inconnue) { border: 0 !important; padding: 3px; box-shadow: 0 0 16px rgba(199, 138, 255, .8);
  background: conic-gradient(from var(--angle), #ff8aa8, #ffd36a, #7ae0c8, #7aa8ff, #c78aff, #ff8aa8); animation: tourne 3.5s linear infinite; }
.mini.r-hors:not(.inconnue) svg { border-radius: 7px; }

@media (prefers-reduced-motion: reduce) {
  .carte, .carte::before, .carte .eclat, .carte .holo, .aura, .mini, .etincelle { animation: none !important; }
}