/* =========================================================
   La carte de chauve — style « Épuré »
   Illustration plein cadre, bord métallique à la couleur de la
   rareté, filet lumineux, nom en bas à gauche.
   L'Unique est en pleine illustration, liseré arc-en-ciel.
   Toutes les tailles sont en cqw : la carte se met à l'échelle
   de son conteneur, du mini (60 px) à l'overlay (300 px).
   ========================================================= */
@property --tc-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --tc-lueur{syntax:'<number>';inherits:true;initial-value:0}
.tc{--c:#c3c9d6;--c2:#5a6070;--tc-lueur:0;--rx:0deg;--ry:0deg;--mx:50%;--my:50%;--g:0;
  position:relative;display:block;width:100%;aspect-ratio:63/88;container-type:inline-size;perspective:900px;text-align:left;
  font-family:"Albert Sans","Segoe UI",system-ui,sans-serif;color:#f4eef8;
  filter:drop-shadow(0 0 calc(var(--tc-lueur)*1px) color-mix(in srgb,var(--c) 80%,transparent)) drop-shadow(0 6cqw 5cqw rgba(0,0,0,.55))}
.tc .f{position:absolute;inset:0;display:block;border-radius:5cqw;padding:2.6cqw;
  background:linear-gradient(145deg,#fff,var(--c) 18%,var(--c2) 45%,var(--c) 70%,#fff);
  box-shadow:inset 0 0 0 .4cqw rgba(0,0,0,.45),inset 0 0 0 .7cqw rgba(255,255,255,.3);
  transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .15s ease-out}
.tc .b{position:relative;display:block;height:100%;border-radius:2.8cqw;overflow:hidden;background:#0e0915;box-shadow:0 0 0 .4cqw rgba(0,0,0,.6)}
.tc .b::before{content:"";position:absolute;inset:2.2cqw;z-index:3;pointer-events:none;border:.45cqw solid var(--c);border-radius:1.6cqw;
  box-shadow:0 0 2.5cqw color-mix(in srgb,var(--c) 60%,transparent),inset 0 0 2.5cqw color-mix(in srgb,var(--c) 30%,transparent)}
.tc .art{position:absolute;inset:0;display:block}
.tc .art img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 28%}
.tc .art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,8,18,.35),transparent 14%,transparent 62%,rgba(12,8,18,.96) 94%)}
.tc .rar{position:absolute;z-index:3;top:5.6cqw;left:6cqw;padding:.3cqw 2.8cqw;border-radius:99px;font-size:3.3cqw;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#12091a;background:var(--c)}
.tc .chr{position:absolute;z-index:3;top:5.6cqw;right:6cqw;padding:.3cqw 2.4cqw;border-radius:99px;font-size:3.2cqw;font-weight:800;color:#06222e;background:linear-gradient(90deg,#e8fbff,#8fe3ff,#e8fbff)}
.tc .plq{position:absolute;z-index:2;left:6.5cqw;right:6.5cqw;bottom:13cqw;display:block}
.tc .nom{display:block;font-family:"Tilt Neon","Trebuchet MS",system-ui,sans-serif;font-size:10.4cqw;line-height:1.05;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 0 .5em color-mix(in srgb,var(--c) 85%,transparent),0 2px 3px #000}
.tc .plq::after{content:"";display:block;width:26%;height:.8cqw;margin-top:1.6cqw;background:var(--c)}
.tc .pied{position:absolute;z-index:2;left:6.5cqw;right:6.5cqw;bottom:4.6cqw;display:grid;grid-template-columns:1fr auto;align-items:center;gap:2cqw;font-size:3.5cqw;color:#cdbfdc}
.tc .col{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc .no{font:600 3.4cqw "Martian Mono",ui-monospace,Menlo,monospace;color:var(--c)}
.tc .gem{display:none;width:7.4cqw;height:7.4cqw;transform:rotate(45deg);box-shadow:0 0 0 1.5px #0e0915,0 0 12px #ff7ab5}
.tc .fx,.tc .glare{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen}
.tc .fx{z-index:3;opacity:0}
.tc .glare{z-index:4;opacity:var(--g);transition:opacity .2s;background:radial-gradient(60% 45% at var(--mx) var(--my),rgba(255,255,255,.5),transparent 70%)}

/* ---------- raretés ---------- */
.tc.rare{--c:#55c8ff;--c2:#0f4c8f;--tc-lueur:10}
.tc.epique{--c:#cd86ff;--c2:#4a1790;--tc-lueur:16}
.tc.epique .fx{opacity:.55;background:linear-gradient(115deg,transparent 36%,rgba(225,180,255,.55) 50%,transparent 64%) 0 0/260% 100%;animation:tc-balai 5s linear infinite}
.tc.legendaire{--c:#ffc85a;--c2:#a3520a;--tc-lueur:22;animation:tc-respire 2.8s ease-in-out infinite}
.tc.legendaire .f{background:linear-gradient(115deg,#fff3cc,#ffb02e 20%,#8f4206 40%,#ffd772 55%,#fff8e0 62%,#c66a0c 78%,#ffc85a) 0 0/300% 100%;animation:tc-or 4s linear infinite}
.tc.legendaire .fx{opacity:.8;animation:tc-etincelles 3.6s linear infinite;
  background:radial-gradient(circle,#fff 0 1px,transparent 2px) 0 0/34px 42px,radial-gradient(circle,#ffe2a0 0 1.2px,transparent 2.4px) 17px 21px/48px 56px,linear-gradient(115deg,transparent 38%,rgba(255,215,140,.5) 50%,transparent 62%) 0 0/260% 100%}
.tc.legendaire .nom{background:linear-gradient(180deg,#fff,#ffe9b0 45%,#ffb02e);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 6px rgba(255,176,46,.8)) drop-shadow(0 2px 2px #000)}

/* ---------- Unique : pleine illustration ---------- */
.tc.unique{--c:#ff9bd2;--c2:#7a2bd0;--tc-lueur:26}
.tc.unique .f{padding:1.6cqw;box-shadow:none;background:conic-gradient(from var(--tc-a),#ff4f8b,#ffb347,#fff38a,#6dffb0,#3fc1ff,#b64dff,#ff4f8b);animation:tc-tourne 4s linear infinite}
.tc.unique .b{border-radius:3.6cqw}
.tc.unique .b::before{display:none}
.tc.unique .art img{object-position:50% 30%}
.tc.unique .rar{left:auto;right:6cqw;padding:0;font-size:3.8cqw;background:linear-gradient(90deg,#ffb347,#ff4f8b,#b64dff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 2px #000)}
.tc.unique .chr{top:11.5cqw}
.tc.unique .plq{left:6cqw;right:6cqw;bottom:17cqw;text-align:center}
.tc.unique .plq::after{width:62%;height:2px;margin:1.6cqw auto 0;background:linear-gradient(90deg,transparent,#ff7ab5,transparent)}
.tc.unique .nom{font-size:12cqw;background:linear-gradient(90deg,#ffb347,#ff7ab5 50%,#c995ff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 8px rgba(255,79,139,.8)) drop-shadow(0 2px 2px #000)}
.tc.unique .pied{left:5cqw;right:5cqw;bottom:3.4cqw;height:10cqw;grid-template-columns:1fr auto 1fr;color:#fff}
.tc.unique .gem{display:block;background:conic-gradient(#ff4f8b,#ffb347,#fff38a,#6dffb0,#3fc1ff,#b64dff,#ff4f8b)}
.tc.unique .no{justify-self:end;color:#fff38a}
.tc.unique .fx{opacity:.45;animation:tc-holo 7s linear infinite;
  background:repeating-linear-gradient(115deg,rgba(255,79,139,.5) 0,rgba(255,227,120,.4) 8%,rgba(80,255,190,.4) 16%,rgba(63,193,255,.45) 24%,rgba(182,77,255,.5) 32%,rgba(255,79,139,.5) 40%) 0 0/300% 100%}

/* ---------- Chromé : feuille holographique, paillettes et liseré de chrome ----------
   S'ajoute par-dessus n'importe quelle rareté. Le reflet suit la souris (--mx, --my). */
.tc.chrome{--tc-lueur:26;filter:drop-shadow(0 0 calc(var(--tc-lueur)*.6px) #bff3ff) drop-shadow(0 0 calc(var(--tc-lueur)*1px) color-mix(in srgb,var(--c) 80%,transparent)) drop-shadow(0 6cqw 5cqw rgba(0,0,0,.55))}
/* liseré de chrome liquide qui tourne autour de la carte */
.tc.chrome .f::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.3cqw;pointer-events:none;
  background:conic-gradient(from var(--tc-a),#fff,#7fdcff,#f6f9ff,#ff9bd2,#fff,#b9a4ff,#e8fbff,#fff38a,#fff);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:tc-tourne 3s linear infinite}
/* feuille arc-en-ciel sur toute l'illustration */
.tc.chrome .art::before{content:"";position:absolute;inset:0;z-index:1;mix-blend-mode:overlay;opacity:.6;
  background:repeating-linear-gradient(112deg,#ff3d7f 0%,#ffb347 7%,#fff38a 14%,#5dffb0 21%,#3fc1ff 28%,#b64dff 35%,#ff3d7f 42%) calc(var(--mx)*1.6) calc(var(--my)*1.6)/320% 320%;
  animation:tc-prisme 5s linear infinite}
/* paillettes qui scintillent + grand reflet blanc qui balaie */
.tc.chrome .b::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:screen;
  background:
    linear-gradient(115deg,transparent 38%,rgba(255,255,255,.42) 48%,rgba(190,240,255,.28) 52%,transparent 61%) 0 0/260% 100%,
    radial-gradient(circle,#fff 0 .55cqw,transparent 1.1cqw) 0 0/17cqw 21cqw,
    radial-gradient(circle,#dff7ff 0 .4cqw,transparent .9cqw) 8cqw 11cqw/23cqw 19cqw,
    radial-gradient(circle,#fff 0 .3cqw,transparent .7cqw) 4cqw 5cqw/11cqw 13cqw;
  animation:tc-balai 2.6s linear infinite,tc-scintille 1.3s steps(3) infinite}
.tc.chrome .b::before{border-color:#f2fbff;box-shadow:0 0 3cqw #bff3ff,inset 0 0 3cqw rgba(190,240,255,.5)}
.tc.chrome .nom{background:linear-gradient(100deg,#fff 0%,#9fe6ff 22%,#fff 40%,#ffb6dd 58%,#fff 76%,#c6b6ff 100%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;
  filter:drop-shadow(0 0 5px rgba(160,230,255,.9)) drop-shadow(0 2px 2px #000);animation:tc-or 3s linear infinite}
.tc .chr{box-shadow:0 0 2.5cqw #8fe3ff;background:linear-gradient(90deg,#fff,#8fe3ff,#ffc1e3,#fff) 0 0/250% 100%;animation:tc-or 2.5s linear infinite}
@keyframes tc-prisme{to{background-position:calc(var(--mx)*1.6 + 320%) calc(var(--my)*1.6 + 160%)}}
@keyframes tc-scintille{0%{opacity:1}33%{opacity:.72}66%{opacity:.9}}
.tc.inconnu .art img{filter:brightness(.16) saturate(0)}
.tc.inconnu .nom{color:#76688a;text-shadow:none;background:none;filter:none}
.tc.inconnu .fx{display:none}

@keyframes tc-balai{from{background-position:130% 0}to{background-position:-130% 0}}
@keyframes tc-or{to{background-position:-300% 0}}
@keyframes tc-respire{50%{--tc-lueur:34}}
@keyframes tc-etincelles{from{background-position:0 0,17px 21px,130% 0}to{background-position:0 -84px,17px -91px,-130% 0}}
@keyframes tc-tourne{to{--tc-a:360deg}}
@keyframes tc-holo{to{background-position:300% 0}}
@media (prefers-reduced-motion:reduce){.tc,.tc *{animation:none!important}}