/* ---------- variantes : la rareté garde le cadre ; la variante traite la matière de la carte. */
.bigcard .face { position:relative }
/* calque d'effet posé sur l'image (cartes, grandes cartes) */
.card[class*=" v-"] .art::before, .bigcard[class*=" v-"] .art::before { content:""; position:absolute; inset:0; z-index:2;
  pointer-events:none }
.bigcard .art { position:relative }
@keyframes holo { from { background-position:0% 50% } to { background-position:100% 50% } }
/* holographique : reflet arc-en-ciel mobile sur toute la carte */
.card.v-holo::after, .bigcard.v-holo .face::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:inherit; mix-blend-mode:color-dodge; opacity:.5; background-size:300% 300%; background-image:linear-gradient(115deg, transparent 12%, #ff3d9a 26%, #ffd23d 37%, #3dffb0 48%, #3db6ff 59%, #b43dff 70%, transparent 86%) }
.card.v-holo::after { animation:holo 5s ease-in-out infinite alternate }
.bigcard.v-holo .face::after { background-position:calc(var(--mx, .5) * 100%) calc(var(--my, .5) * 100%) }
/* reverse holo : l'arc-en-ciel sur la zone de texte, l'image reste intacte */
.card.v-reverse .body { position:relative }
.card.v-reverse .body::after, .bigcard.v-reverse .face::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  mix-blend-mode:color-dodge; opacity:.55; background-size:250% 100%; animation:holo 5s ease-in-out infinite alternate;
  background-image:linear-gradient(115deg, #ff3d9a, #ffd23d, #3dffb0, #3db6ff, #b43dff, #ff3d9a) }
.bigcard.v-reverse .art { z-index:3 }
/* dorée : un liseré de feuille d'or à l'intérieur de l'image, le cadre reste celui de la rareté */
.v-gold .art::before { border:3px solid transparent; border-image:linear-gradient(135deg, #8a5d12, #f6d77e, #fff1c2, #c8901a, #8a5d12) 1;
  box-shadow:inset 0 0 18px rgba(255,205,100,.55) }
.bigcard.v-gold .art::before { border-width:5px }
.v-gold .art img { filter:saturate(1.08) sepia(.12) }
/* noir & blanc */
.v-bw .art img { filter:grayscale(1) contrast(1.12) }
/* vintage : image sépia, vignettage de vieux papier, titre à empattements */
.v-vintage .art img { filter:sepia(.8) contrast(.92) saturate(.85) }
.v-vintage .art::before { background:radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(70,45,15,.55) 100%),
  repeating-linear-gradient(0deg, rgba(120,90,40,.06) 0 2px, transparent 2px 4px) }
.card.v-vintage .name, .bigcard.v-vintage .ttl { font-family:Georgia, "Times New Roman", serif }
/* néon : l'image baigne dans une lumière rose et cyan venue des bords, qui tourne lentement ; pas de cadre */
@keyframes neonflow {
  0%, 100% { background-position:0% 0%;
    box-shadow:inset 10px 10px 22px -8px rgba(255,43,214,.95), inset -10px -10px 22px -8px rgba(41,240,255,.95), inset 0 0 0 1px rgba(255,255,255,.18) }
  50% { background-position:100% 100%;
    box-shadow:inset 10px 10px 22px -8px rgba(41,240,255,.95), inset -10px -10px 22px -8px rgba(255,43,214,.95), inset 0 0 0 1px rgba(255,255,255,.18) } }
.v-neon .art::before { background-size:220% 220%;
  background-image:radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(25,5,50,.55) 100%),
    linear-gradient(135deg, rgba(255,43,214,.22), transparent 40%, transparent 60%, rgba(41,240,255,.22));
  animation:neonflow 4.5s ease-in-out infinite;
  box-shadow:inset 10px 10px 22px -8px rgba(255,43,214,.95), inset -10px -10px 22px -8px rgba(41,240,255,.95), inset 0 0 0 1px rgba(255,255,255,.18) }
.bigcard.v-neon .art::before { animation-name:neonflowbig;
  box-shadow:inset 18px 18px 36px -12px rgba(255,43,214,.95), inset -18px -18px 36px -12px rgba(41,240,255,.95), inset 0 0 0 1px rgba(255,255,255,.18) }
@keyframes neonflowbig {
  0%, 100% { background-position:0% 0%;
    box-shadow:inset 18px 18px 36px -12px rgba(255,43,214,.95), inset -18px -18px 36px -12px rgba(41,240,255,.95), inset 0 0 0 1px rgba(255,255,255,.18) }
  50% { background-position:100% 100%;
    box-shadow:inset 18px 18px 36px -12px rgba(41,240,255,.95), inset -18px -18px 36px -12px rgba(255,43,214,.95), inset 0 0 0 1px rgba(255,255,255,.18) } }
.v-neon .art img { filter:saturate(1.4) contrast(1.2) brightness(.72) hue-rotate(-10deg) }
/* galaxie : un ciel étoilé scintille par-dessus l'image */
@keyframes twinkle { 50% { opacity:.55 } }
.v-galaxy .art::before { mix-blend-mode:screen; animation:twinkle 3.2s ease-in-out infinite;
  background:radial-gradient(1px 1px at 12% 22%, #fff 99%, transparent), radial-gradient(1px 1px at 72% 18%, #fff 99%, transparent), radial-gradient(1.6px 1.6px at 38% 64%, #d6e6ff 99%, transparent), radial-gradient(1px 1px at 86% 76%, #fff 99%, transparent), radial-gradient(1.2px 1.2px at 55% 40%, #ffe3f7 99%, transparent), radial-gradient(1.3px 1.3px at 22% 84%, #fff 99%, transparent), radial-gradient(1px 1px at 64% 88%, #fff 99%, transparent), radial-gradient(1.4px 1.4px at 92% 34%, #e3f0ff 99%, transparent), radial-gradient(1px 1px at 30% 45%, #fff 99%, transparent), radial-gradient(1px 1px at 80% 55%, #fff 99%, transparent), radial-gradient(ellipse at 25% 20%, rgba(150,90,255,.45), transparent 55%),
             radial-gradient(ellipse at 85% 85%, rgba(60,140,255,.4), transparent 50%) }
.bigcard.v-galaxy .art::before { background-size:50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 100% 100%, 100% 100% }
/* obsidienne : image assombrie, reflet violet en biais */
.v-obsidian .art img { filter:contrast(1.15) saturate(.7) brightness(.82) }
.v-obsidian .art::before { background:linear-gradient(135deg, rgba(0,0,0,.5), transparent 38%, rgba(140,100,255,.3) 62%, transparent 72%, rgba(0,0,0,.55));
  box-shadow:inset 0 0 0 2px rgba(170,130,255,.55) }
.vsw { display:flex; gap:6px; flex-wrap:wrap; justify-content:center }
.vsw-label { width:100%; color:var(--muted); font-size:12px; text-align:center }
/* viewer 3D : la carte en plein écran, on la fait tourner au doigt ou à la souris */
.cardcol .bigcard { cursor:zoom-in }
.viewer { position:fixed; inset:0; z-index:90; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; background:radial-gradient(circle at 50% 45%, #282050, #06050c 70%); touch-action:none;
  animation:fade .2s; user-select:none; -webkit-user-select:none }
.viewer .stage { perspective:1100px; width:min(360px, 82vw) }
.viewer .card3d { position:relative; transform-style:preserve-3d; will-change:transform }
.viewer .card3d > .bigcard { max-width:none; margin:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transition:none; transform:none !important }

/* reflet mobile qui balaie la carte selon l'angle (toutes les cartes, renforcé sur les variantes) */
.viewer .card3d .shine { position:absolute; inset:0; border-radius:20px; pointer-events:none; z-index:5; mix-blend-mode:soft-light;
  background:radial-gradient(circle at calc(var(--mx, .5) * 100%) calc(var(--my, .5) * 100%), rgba(255,255,255,.55), transparent 55%);
  backface-visibility:hidden; -webkit-backface-visibility:hidden }
.viewer .hint { color:rgba(255,255,255,.7); font-size:13.5px; text-align:center }
.viewer .vclose { position:absolute; top:calc(14px + var(--safe-t)); right:16px; width:44px; height:44px; border-radius:50%; border:0;
  background:rgba(255,255,255,.12); color:#fff; font-size:22px; cursor:pointer }
.viewer .vclose:hover { background:rgba(255,255,255,.22) }

.bigcard { transition:transform .15s ease-out; will-change:transform }
@media (prefers-reduced-motion: reduce) { .card.v-holo::after, .card.v-reverse .body::after, .bigcard.v-reverse .face::after,
  .v-neon .art::before, .v-galaxy .art::before { animation:none } }
.backbtn { display:inline-flex; align-items:center; gap:6px; border:0; background:none; padding:6px 10px 6px 4px;
  margin:0 0 6px -4px; border-radius:10px; color:var(--muted); font-weight:600; cursor:pointer; font-size:14px }
.backbtn:hover { color:var(--ink); background:var(--surface2) }
.backbtn svg { width:18px; height:18px }

/* rendu léger des grilles (et secours sans WebGL) : la zone de texte prend déjà la teinte du matériau, pour que le
   passage au rendu WebGL (survol, fiche) reste cohérent */
.card.v-bw .body, .card.v-vintage .body, .card.v-neon .body, .card.v-gold .body, .card.v-galaxy .body,
.card.v-obsidian .body { animation:none }
.card.v-bw .body { background:linear-gradient(#1b1b1e, #111113); border-top-color:#a7a9b0 }
.card.v-bw .name { color:#eee8da } .card.v-bw .kind { color:#a29d92 }
.card.v-vintage .body { background:#efe4c9; border-top-color:#7a5a3a }
.card.v-vintage .name { color:#3a2816 } .card.v-vintage .kind { color:#7a6446 }
.card.v-neon .body { background:linear-gradient(#070a1e, #0c0626); border-top-color:#29f0ff; box-shadow:0 -1px 8px rgba(41,240,255,.45) }
.card.v-neon .name { color:#e8fbff } .card.v-neon .kind { color:#7fb8d8 }
.card.v-gold .body { background:linear-gradient(115deg, #7a5210, #d9b154 35%, #f7e3a4 50%, #d2a23c 64%, #7a5210); border-top-color:#f3d27c }
.card.v-gold .name { color:#33230a; text-shadow:0 1px 0 rgba(255,238,195,.5) } .card.v-gold .kind { color:#4d3808 }
.card.v-galaxy .body { background:radial-gradient(ellipse at 20% 0%, rgba(150,70,220,.55), transparent 60%),
  radial-gradient(ellipse at 90% 100%, rgba(40,120,200,.4), transparent 55%), #0b0826; border-top-color:#a58bff }
.card.v-galaxy .name { color:#f3f0ff } .card.v-galaxy .kind { color:#b3aee0 }
.card.v-obsidian .body { background:linear-gradient(135deg, #050507, #16111d 55%, #050507); border-top-color:#3a2f4d }
.card.v-obsidian .name { color:#e2dcee } .card.v-obsidian .kind { color:#8c849c }

/* ---------- effets WebGL (fx.js) : le matériau est dessiné dans un canvas sous le contenu HTML de la carte,
   qui devient transparent ; textes et étiquettes restent en HTML, aux couleurs du matériau */
.fxc { position:absolute; left:-12px; top:-12px; z-index:1; pointer-events:none; opacity:0; transition:opacity .3s }
.fxc.in { opacity:1 }
.fx-on { transition:none !important }
.fx-on > :not(.fxc) { position:relative; z-index:2 }
.card.fx-on, .bigcard.fx-on { overflow:visible; background:transparent }
.card.fx-on { box-shadow:var(--glow, 0 0 0 transparent), var(--shadow) }
.bigcard.fx-on { box-shadow:0 16px 40px rgba(0,0,0,.4) }
.fx-on .art, .fx-on .body, .fx-on .face, .fx-on .face > * { background:transparent !important; border-color:transparent !important }
.fx-on .art img, .fx-on .art .noimg { opacity:0 }
.fx-on .art::before, .fx-on .art::after, .fx-on::after, .fx-on .body::after, .fx-on .face::after { display:none !important }
.fx-on { --fx-ink:#f3f0fa; --fx-muted:#b4aec6 }
.fx-on .name, .fx-on .ttl, .fx-on .text, .fx-on .band { color:var(--fx-ink) }
.fx-on .kind, .fx-on .num, .fx-on .foot { color:var(--fx-muted) }
.fx-on .band .tr { color:color-mix(in srgb, var(--t) 45%, var(--fx-ink)); filter:none }
.fx-on.v-bw { --fx-ink:#eee8da; --fx-muted:#a29d92 }
.fx-on.v-vintage { --fx-ink:#3a2816; --fx-muted:#7a6446 }
.fx-on.v-neon { --fx-ink:#e8fbff; --fx-muted:#7fb8d8 }
.fx-on.v-gold { --fx-ink:#33230a; --fx-muted:#5c4412 }
.fx-on.v-gold .name, .fx-on.v-gold .ttl, .fx-on.v-gold .band { text-shadow:0 1px 0 rgba(255,238,195,.55), 0 -1px 0 rgba(70,40,0,.35) }
.fx-on.v-galaxy { --fx-ink:#f3f0ff; --fx-muted:#b3aee0 }
.fx-on.v-obsidian { --fx-ink:#e2dcee; --fx-muted:#8c849c }
.fx-on.v-neon .name, .fx-on.v-neon .ttl { text-shadow:0 0 8px rgba(41,240,255,.55) }