/* =====================================================================
   Wiki Cards — EFFETS & CONFORT (folio-fx)
   Reflets sur les cartes rares, dos de carte + retournement, déchirure du
   paquet, récapitulatif, apparition en cascade, navigation dans la fenêtre
   d'une carte, notifications empilées…
   À charger en DERNIER. Pour tout retirer : enlever les lignes
   folio-fx.css et folio-fx.js de index.html.
   ===================================================================== */

/* une seule animation d'entrée pour la révélation (évite la superposition avec wcCardIn) */
#reveal-card-slot.wc-card-in{animation:none !important;}

/* ---------------------------------------------------------------- 1. REFLET « FEUILLE D'OR » (UR / LR) */
.fx-foil{position:absolute; inset:0; z-index:6; pointer-events:none; border-radius:inherit; overflow:hidden;}
.fx-foil::before{
  content:''; position:absolute; top:-25%; bottom:-25%; left:-60%; width:45%;
  background:linear-gradient(100deg, transparent 0%, rgba(255,236,170,0.10) 30%, rgba(255,246,214,0.55) 48%, rgba(255,255,255,0.75) 51%, rgba(255,224,140,0.35) 56%, transparent 75%);
  transform:translateX(0) skewX(-18deg);
  animation:fx-foil 7s ease-in-out infinite; animation-delay:var(--fx-d, 0s);
}
.mini-card[data-tier="UR"] > .fx-foil::before, .reveal-card.UR > .fx-foil::before{animation-duration:10s; opacity:0.75;}
@keyframes fx-foil{0%, 64%{transform:translateX(0) skewX(-18deg);} 100%{transform:translateX(430%) skewX(-18deg);}}

/* ---------------------------------------------------------------- 2. HALO QUI RESPIRE (LR) */
#collection-grid .mini-card[data-tier="LR"]:not(.fg-tilt):not(.fx-enter),
#allcards-grid .mini-card[data-tier="LR"]:not(.fg-tilt):not(.fx-enter),
.fp-shop-grid .mini-card[data-tier="LR"]:not(.fg-tilt),
.fx-recap-grid .mini-card[data-tier="LR"]:not(.fg-tilt){animation:fx-halo 3.6s ease-in-out infinite;}
@keyframes fx-halo{
  0%, 100%{filter:drop-shadow(0 0 0 rgba(245,214,124,0));}
  50%{filter:drop-shadow(0 0 12px rgba(245,214,124,0.6));}
}

/* ---------------------------------------------------------------- 3. APPARITION EN CASCADE */
.fx-enter{animation:fx-enter .5s cubic-bezier(.2,.8,.2,1) both; animation-delay:var(--fx-delay, 0ms);}
@keyframes fx-enter{from{opacity:0; transform:translateY(16px) scale(.96);} to{opacity:1; transform:none;}}

/* ---------------------------------------------------------------- 4. APPUI TACTILE */
@media (hover:none){
  .mini-card{-webkit-tap-highlight-color:transparent;}
  .mini-card:active{transform:scale(.95) !important; transition:transform .1s ease !important;}
}

/* ---------------------------------------------------------------- 5. BADGE « NOUVEAU » */
.fx-new-badge{
  position:absolute; z-index:9; left:50%; top:9px; transform:translateX(-50%);
  padding:3px 9px; border-radius:100px; white-space:nowrap; pointer-events:none;
  font:700 0.56rem 'Chakra Petch', 'Space Grotesk', sans-serif; letter-spacing:0.12em; text-transform:uppercase;
  color:#1a1408; background:linear-gradient(135deg, #fff3c4, #f5d67c 45%, #c9922e);
  box-shadow:0 0 0 2px rgba(255,255,255,0.85), 0 4px 12px -2px rgba(201,146,46,0.7);
  animation:fx-new 2.2s ease-in-out infinite;
  transition:opacity .3s, transform .3s;
}
.fx-new-badge.out{opacity:0; transform:translateX(-50%) scale(.6);}
@keyframes fx-new{
  0%, 100%{box-shadow:0 0 0 2px rgba(255,255,255,0.85), 0 4px 12px -2px rgba(201,146,46,0.7);}
  50%{box-shadow:0 0 0 2px rgba(255,255,255,0.95), 0 0 16px 2px rgba(245,214,124,0.9);}
}
@media (max-width:760px){ .fx-new-badge{font-size:0.44rem; padding:2px 6px; top:6px;} }

/* ---------------------------------------------------------------- 6. DOS DE CARTE */
#reveal-card-slot{perspective:1200px;}
.reveal-card.fx-facedown > :not(.fx-back){visibility:hidden;}
.reveal-card.fx-facedown::before{opacity:0;}
.fx-back{
  position:absolute; inset:0; z-index:30; border-radius:inherit; overflow:hidden; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(245,214,124,0.20), transparent 60%),
    radial-gradient(90% 60% at 50% 100%, rgba(138,79,201,0.18), transparent 65%),
    repeating-linear-gradient(45deg, rgba(245,214,124,0.07) 0 1.5px, transparent 1.5px 14px),
    repeating-linear-gradient(-45deg, rgba(245,214,124,0.07) 0 1.5px, transparent 1.5px 14px),
    linear-gradient(160deg, #1d2231, #0b0d14);
  box-shadow:inset 0 0 0 1px rgba(245,214,124,0.4);
  -webkit-user-select:none; user-select:none;
}
.fx-back::before{content:''; position:absolute; inset:12px; border:1px solid rgba(245,214,124,0.45); border-radius:10px; pointer-events:none;}
.fx-back::after{ /* losanges aux coins */
  content:''; position:absolute; inset:8px; pointer-events:none;
  --dm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M5 0L10 5L5 10L0 5Z' fill='%23f5d67c'/%3E%3C/svg%3E");
  background:var(--dm) left top / 10px no-repeat, var(--dm) right top / 10px no-repeat, var(--dm) left bottom / 10px no-repeat, var(--dm) right bottom / 10px no-repeat;
}
.fx-back-logo{
  position:relative; z-index:1; width:38%; aspect-ratio:1; border-radius:24%;
  display:flex; align-items:center; justify-content:center;
  font:700 clamp(2rem, 6vw, 3.4rem) Georgia, 'Times New Roman', serif; color:#1a1408;
  background:linear-gradient(135deg, #fff0bd, #f5d67c 40%, #c9922e);
  box-shadow:0 0 34px rgba(245,214,124,0.45), inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -3px 0 rgba(0,0,0,0.15);
  transform:rotate(-4deg);
}
.fx-back-brand{position:relative; z-index:1; font:600 0.72rem 'Chakra Petch', sans-serif; letter-spacing:0.4em; text-transform:uppercase; color:rgba(245,214,124,0.8);}
.fx-back-sheen{
  position:absolute; inset:-30%; z-index:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%);
  animation:fx-back-sheen 3s ease-in-out infinite;
}
@keyframes fx-back-sheen{0%{transform:translateX(-40%);} 60%, 100%{transform:translateX(40%);}}

/* ---------------------------------------------------------------- 7. SUSPENSE (SR et plus) */
.fx-back.fx-tease{box-shadow:inset 0 0 0 2px var(--t), inset 0 0 50px color-mix(in srgb, var(--t) 45%, transparent);}
.fx-back.fx-tease::before{border-color:color-mix(in srgb, var(--t) 70%, white);}
.fx-back.fx-tease .fx-back-logo{animation:fx-wobble 2.4s ease-in-out infinite; box-shadow:0 0 40px var(--t), inset 0 1px 0 rgba(255,255,255,0.7);}
.fx-back.fx-tease .fx-back-brand{color:color-mix(in srgb, var(--t) 60%, white);}
.fx-back.fx-tease-hot .fx-back-logo{animation-duration:1.4s;}
.fx-back.fx-tease-hot{animation:fx-hot-glow 1.4s ease-in-out infinite;}
@keyframes fx-wobble{
  0%, 70%, 100%{transform:rotate(-4deg) scale(1);}
  76%{transform:rotate(3deg) scale(1.06);} 82%{transform:rotate(-7deg) scale(1.04);} 88%{transform:rotate(2deg) scale(1.05);}
}
@keyframes fx-hot-glow{
  0%, 100%{box-shadow:inset 0 0 0 2px var(--t), inset 0 0 40px color-mix(in srgb, var(--t) 40%, transparent);}
  50%{box-shadow:inset 0 0 0 3px var(--t), inset 0 0 80px color-mix(in srgb, var(--t) 70%, transparent);}
}
#reveal-card-slot .reveal-card.fx-charging{animation:fx-charge .7s ease-in !important;}
@keyframes fx-charge{
  0%{transform:none;} 15%{transform:translate(-3px, 1px) rotate(-1deg);} 30%{transform:translate(4px, -2px) rotate(1.2deg);}
  45%{transform:translate(-5px, 2px) rotate(-1.5deg) scale(1.02);} 60%{transform:translate(6px, -2px) rotate(2deg) scale(1.03);}
  75%{transform:translate(-6px, 3px) rotate(-2deg) scale(1.04);} 90%{transform:translate(4px, -1px) rotate(1deg) scale(1.05);} 100%{transform:scale(1.05);}
}
.fx-charging .fx-back{filter:brightness(1.3);}

/* retournement */
#reveal-card-slot .reveal-card.fx-flip-out{animation:fx-flip-out .19s ease-in forwards !important;}
#reveal-card-slot .reveal-card.fx-flip-in{animation:fx-flip-in .42s cubic-bezier(.2,.9,.3,1.25) !important;}
#reveal-card-slot .reveal-card.fx-settled{animation:none !important;}
@keyframes fx-flip-out{from{transform:rotateY(0) scale(1.05);} to{transform:rotateY(90deg) scale(1.08);}}
@keyframes fx-flip-in{from{transform:rotateY(-90deg) scale(1.08);} to{transform:rotateY(0) scale(1);}}

/* explosion de lumière au retournement d'une carte rare */
.fx-burst{position:absolute; left:50%; top:50%; width:10px; height:10px; margin:-5px 0 0 -5px; z-index:40; pointer-events:none;}
.fx-burst i{position:absolute; inset:0; border-radius:50%;}
.fx-burst .fx-glow{background:radial-gradient(circle, #fff 0%, var(--t) 35%, transparent 70%); animation:fx-glow .8s ease-out forwards;}
.fx-burst .fx-ring{border:3px solid var(--t); animation:fx-ring .7s ease-out forwards;}
.fx-burst .fx-spark{inset:auto; width:8px; height:8px; left:1px; top:1px; background:#fff; box-shadow:0 0 10px var(--t), 0 0 4px #fff;
  animation:fx-spark .9s cubic-bezier(.2,.8,.3,1) forwards;}
@keyframes fx-glow{from{transform:scale(0); opacity:1;} to{transform:scale(55); opacity:0;}}
@keyframes fx-ring{from{transform:scale(1); opacity:1;} to{transform:scale(40); opacity:0;}}
@keyframes fx-spark{from{transform:rotate(var(--a)) translateY(0) scale(1); opacity:1;} to{transform:rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(.2); opacity:0;}}
main.fx-shake{animation:fg-shake .45s ease;}

/* le flash et les confettis « rareté » ne doivent pas trahir la carte tant qu'elle est cachée */
body.fx-hiding #rarity-flash, body.fx-hiding #confetti-burst{opacity:0 !important; visibility:hidden !important;}
body.fx-hiding main.fg-shake{animation:none !important;}

/* aide + bouton « Tout révéler » */
.fx-reveal-hint{
  text-align:center; margin:8px 0 0; min-height:1.2em;
  font:600 0.72rem 'Chakra Petch', sans-serif; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-a, #f5d67c);
  opacity:0; transition:opacity .25s;
}
.fx-reveal-hint.on{opacity:0.85; animation:fx-hint 1.8s ease-in-out infinite;}
@keyframes fx-hint{50%{opacity:0.4;}}
.fx-reveal-tools{display:flex; justify-content:center; margin-top:10px;}
.fx-reveal-tools[hidden]{display:none;}
.fx-skip{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; padding:8px 16px; border-radius:100px;
  font:600 0.74rem 'Chakra Petch', sans-serif; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-dim, #aab); background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12);
  transition:color .15s, border-color .15s, transform .1s;
}
.fx-skip:hover{color:var(--gold-a, #f5d67c); border-color:rgba(245,214,124,0.5);}
.fx-skip:active{transform:translateY(1px);}
.fx-skip svg{width:15px; height:15px;}

/* ---------------------------------------------------------------- 8. DÉCHIRURE DU PAQUET */
.fx-pack-top{position:fixed !important; margin:0 !important; z-index:500; pointer-events:none; animation:none !important;}
.fx-tear-line{
  position:fixed; z-index:501; height:4px; pointer-events:none; border-radius:4px;
  background:linear-gradient(90deg, transparent, #fff3c4 20%, #fff 50%, #fff3c4 80%, transparent);
  box-shadow:0 0 14px 3px rgba(245,214,124,0.9);
  animation:fx-tear-line .6s ease-out forwards;
}
@keyframes fx-tear-line{from{transform:scaleX(0); opacity:1;} 40%{transform:scaleX(1); opacity:1;} to{transform:scaleX(1.1); opacity:0;}}

/* ---------------------------------------------------------------- 9. RÉCAPITULATIF DU PAQUET */
.fx-recap-overlay{
  position:fixed; inset:0; z-index:420; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(5,6,10,0.8); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .25s;
}
.fx-recap-overlay.open{opacity:1;}
.fx-recap{
  position:relative; width:100%; max-width:880px; max-height:calc(100vh - 40px); overflow:auto; padding:28px 26px 24px;
  border-radius:22px; text-align:center;
  background:radial-gradient(90% 60% at 50% 0%, rgba(245,214,124,0.14), transparent 60%), var(--fg-panel, #151821);
  border:1px solid rgba(245,214,124,0.3); box-shadow:0 40px 90px -20px rgba(0,0,0,0.85);
  transform:translateY(14px) scale(.97); transition:transform .3s cubic-bezier(.2,.9,.3,1.2);
}
.fx-recap-overlay.open .fx-recap{transform:none;}
.fx-recap-x{position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.04); color:var(--text, #eee); font-size:1.2rem; line-height:1;}
.fx-recap-x:hover{border-color:rgba(245,214,124,0.5);}
.fx-recap h2{
  margin:0; font:700 clamp(1.4rem, 3vw, 1.9rem) 'Chakra Petch', sans-serif; text-transform:uppercase; letter-spacing:0.06em;
  background:linear-gradient(180deg, #fff6d8 10%, #f5d67c 55%, #c9922e); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.fx-recap-sub{margin:6px 0 0; color:var(--text-dim, #aab); font-size:0.88rem;}
.fx-recap-sub b{color:var(--gold-a, #f5d67c);}
.fx-recap-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin:30px 0 22px;}
.fx-recap-item{position:relative; width:calc(20% - 12px); max-width:160px; animation:fx-deal .55s cubic-bezier(.2,.9,.3,1.2) both; animation-delay:var(--fx-delay, 0ms);}
@keyframes fx-deal{from{opacity:0; transform:translateY(40px) rotate(-8deg) scale(.8);} to{opacity:1; transform:none;}}
.fx-recap-item .mini-card{width:100% !important; height:auto !important; aspect-ratio:5/7 !important; border-radius:12px !important; cursor:default;}
.fx-recap-item .mini-card .title{font-size:0.72rem !important;}
.fx-recap-item .mini-card .meta{font-size:0.62rem !important;}
.fx-recap-item .mini-card .meta svg{width:11px; height:11px;}
.fx-recap-item .mini-card .tier-chip{font-size:0.56rem !important;}
.fx-recap-item.fx-best{transform:translateY(-10px);}
.fx-recap-item.fx-best .mini-card{box-shadow:0 0 0 2px #f5d67c, 0 0 30px -4px rgba(245,214,124,0.8), 0 20px 30px -14px rgba(0,0,0,0.8) !important;}
.fx-best-label{
  position:absolute; left:50%; top:-24px; transform:translateX(-50%); white-space:nowrap; z-index:10;
  display:inline-flex; align-items:center; gap:4px;
  font:700 0.6rem 'Chakra Petch', sans-serif; letter-spacing:0.14em; text-transform:uppercase; color:#f5d67c;
}
.fx-best-label svg{width:12px; height:12px;}
.fx-recap-actions{display:flex; flex-wrap:wrap; justify-content:center; gap:10px;}
.fx-recap-actions .open-btn{padding:12px 24px;}
.fx-ghost{
  padding:12px 22px; border-radius:11px; cursor:pointer; font:600 0.86rem 'Chakra Petch', sans-serif; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--text, #eee); background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.14); box-shadow:0 3px 0 rgba(0,0,0,0.45);
}
.fx-ghost:hover{border-color:rgba(245,214,124,0.5); color:#f5d67c;}
@media (max-width:760px){
  .fx-recap{padding:22px 14px 18px;}
  .fx-recap-grid{gap:10px; margin-top:28px;}
  .fx-recap-item{width:calc(33.333% - 7px);}
  .fx-recap-item .mini-card .title{font-size:0.6rem !important;}
  .fx-recap-item .mini-card .meta{font-size:0.52rem !important;}
  .fx-recap-actions > *{flex:1 1 100%;}
}

/* ---------------------------------------------------------------- 11. SQUELETTES DE CHARGEMENT */
.fx-skel{
  aspect-ratio:5/7; border-radius:14px; border:1px solid rgba(255,255,255,0.05);
  background:linear-gradient(90deg, rgba(255,255,255,0.035) 25%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.035) 75%);
  background-size:200% 100%; animation:fx-shimmer 1.2s linear infinite;
}
@keyframes fx-shimmer{from{background-position:200% 0;} to{background-position:-200% 0;}}

/* ---------------------------------------------------------------- 12. FENÊTRE D'UNE CARTE : PRÉCÉDENTE / SUIVANTE */
.fx-cm-nav{
  position:absolute; top:50%; z-index:5; width:48px; height:48px; margin-top:-24px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:#f5d67c;
  background:rgba(14,16,22,0.88); border:1px solid rgba(245,214,124,0.4); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 10px 24px -10px rgba(0,0,0,0.9); transition:transform .15s, border-color .15s, background .15s;
}
.fx-cm-nav svg{width:22px; height:22px;}
.fx-cm-nav:hover{transform:scale(1.08); border-color:#f5d67c; background:rgba(40,34,18,0.92);}
.fx-cm-nav.prev{left:18px;} .fx-cm-nav.next{right:18px;}
.fx-cm-nav[hidden]{display:none;}
.fx-cm-count{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:5; pointer-events:none;
  font:600 0.72rem 'Chakra Petch', sans-serif; letter-spacing:0.1em; color:rgba(255,255,255,0.55);
}
.fx-cm-count[hidden]{display:none;}
#card-modal-visual.fx-slide-l{animation:fx-slide-l .3s ease;}
#card-modal-visual.fx-slide-r{animation:fx-slide-r .3s ease;}
@keyframes fx-slide-l{from{opacity:0; transform:translateX(30px);} to{opacity:1; transform:none;}}
@keyframes fx-slide-r{from{opacity:0; transform:translateX(-30px);} to{opacity:1; transform:none;}}
@media (max-width:760px){
  .fx-cm-nav{top:auto; bottom:12px; margin-top:0; width:44px; height:44px;}
  .fx-cm-nav.prev{left:14px;} .fx-cm-nav.next{right:14px;}
  .fx-cm-count{bottom:26px;}
}

/* ---------------------------------------------------------------- 13. NOTIFICATIONS EMPILÉES */
html.fx-toasts-on #toast{display:none !important;}
.fx-toasts{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:600;
  display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; width:min(460px, calc(100vw - 24px));
}
.fx-toast{
  pointer-events:auto; cursor:pointer; max-width:100%; padding:11px 18px; border-radius:12px; text-align:center;
  font:500 0.86rem 'Chakra Petch', 'Space Grotesk', sans-serif; color:var(--text, #eee); line-height:1.4;
  background:linear-gradient(90deg, rgba(245,214,124,0.14), transparent 40%), rgba(14,16,22,0.97);
  border:1px solid rgba(245,214,124,0.55); border-left:4px solid #f5d67c;
  box-shadow:0 14px 34px -12px rgba(0,0,0,0.9), 0 0 20px -8px rgba(245,214,124,0.5);
  opacity:0; transform:translateY(14px) scale(.96); transition:opacity .25s, transform .3s cubic-bezier(.2,.9,.3,1.2);
}
.fx-toast.in{opacity:1; transform:none;}
@media (max-width:760px){
  .fx-toasts{top:12px; bottom:auto;}
  .fx-toast{font-size:0.76rem; padding:9px 14px;}
}

/* ---------------------------------------------------------------- MOUVEMENTS RÉDUITS */
@media (prefers-reduced-motion: reduce){
  .fx-foil, .fx-back-sheen, .fx-burst{display:none !important;}
  .fx-enter, .fx-recap-item, .fx-new-badge, .fx-back .fx-back-logo, .fx-back.fx-tease-hot, .fx-reveal-hint.on, .mini-card[data-tier="LR"]{animation:none !important;}
  #reveal-card-slot .reveal-card.fx-flip-out, #reveal-card-slot .reveal-card.fx-flip-in, #reveal-card-slot .reveal-card.fx-charging{animation:none !important;}
}