/* Cartes à jouer de « Mes cartes » (3 paquets de 54, 4 raretés) : dessin HTML+CSS qui s'adapte à la largeur.
   Partagé entre le jeu de collection et les autres jeux de cartes du hub. */
/* ── cartes à jouer : 3 paquets de 54, 4 raretés : Commune · Légendaire (doré) · Chromatique · Arc-en-ciel ── */
.cx{position:relative;display:block;width:100%;aspect-ratio:5/7;container-type:inline-size;line-height:1;font-family:var(--disp);-webkit-user-select:none;user-select:none}
.cx.dk0{--paper:#f6f0e1;--edge:#cdbf9c;--frame:rgba(21,17,15,.3);--tint:rgba(21,17,15,.05);--red:#b3261e;--blk:#15110f;--glow:none;--disp:'Playfair Display',Georgia,serif;--sv1:#f1f3f7;--sv2:#c3cbd8;--sv3:#98a4b6;--c1:#15123a;--c2:#5a2bd9;--c3:#0fb5c9}
.cx.dk1{--paper:#0c1024;--edge:#2a3573;--frame:rgba(53,233,255,.5);--tint:rgba(255,255,255,.05);--red:#ff4fa0;--blk:#35e9ff;--glow:0 0 7px currentColor;--disp:'Orbitron',system-ui,sans-serif;--sv1:#e9f1ff;--sv2:#b3c3df;--sv3:#8196ba;--c1:#080d2a;--c2:#00d9ff;--c3:#ff2e97}
.cx.dk2{--paper:#17123f;--edge:#3f3584;--frame:rgba(246,205,120,.5);--tint:rgba(255,255,255,.05);--red:#ffb454;--blk:#bcd3ff;--glow:none;--disp:'Cinzel',Georgia,serif;--sv1:#efeeff;--sv2:#bfb9e8;--sv3:#948bc6;--c1:#0b1f3a;--c2:#2ef2a8;--c3:#7a5cff}
.cx .cf{position:absolute;inset:0;border-radius:7.4cqw;overflow:hidden;box-sizing:border-box;border:1px solid var(--edge);background:var(--paper);text-shadow:var(--glow)}
.cx .cf>*{position:absolute}
.cx .bg,.cx .fx{inset:0}
.cx .bg::after,.cx .fx::before,.cx .fx::after{content:"";position:absolute;inset:0}
.cx.ink-r{color:var(--red)}
.cx.ink-b{color:var(--blk)}
.cx .fr{inset:4.4cqw;border:1px solid var(--frame);border-radius:4.4cqw}
.cx .cn{display:flex;flex-direction:column;align-items:center;width:17.8cqw;gap:.7cqw}
.cx .cn .rk{font-size:14cqw;font-weight:700;white-space:nowrap}
.cx .cn .su{font-size:11cqw}
.cx .cn.jkc .rk{font-size:10.5cqw}
.cx .cn.tl{top:6.7cqw;left:5.9cqw}
.cx .cn.br{bottom:6.7cqw;right:5.9cqw;transform:rotate(180deg)}
.cx.dk1 .cn .rk{font-size:11.8cqw}
.cx.dk1 .cn.jkc .rk{font-size:9cqw}
.cx .fc{inset:19.3cqw 20cqw}
.cx .pp{position:absolute;transform:translate(-50%,-50%);font-size:16.3cqw}
.cx .pp.inv{transform:translate(-50%,-50%) rotate(180deg)}
.cx .pp.xl{font-size:47cqw}
.cx .lL{left:22%}.cx .lM{left:50%}.cx .lR{left:78%}
.cx .t8{top:8%}.cx .t22{top:22%}.cx .t29{top:29%}.cx .t36{top:36%}.cx .t50{top:50%}.cx .t64{top:64%}.cx .t71{top:71%}.cx .t78{top:78%}.cx .t92{top:92%}
.cx .pn{position:absolute;inset:0;border:1px solid var(--frame);border-radius:3cqw;background:var(--tint);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5.5cqw}
.cx .pn svg{width:38.5cqw;height:38.5cqw}
.cx .pn .su{font-size:17.8cqw}
.cx .pn .jk{font-size:8cqw;letter-spacing:.3em;font-weight:700;padding-left:.3em}
/* image de profil ronde */
.cx.emb{aspect-ratio:1}
.cx.emb .cf{border-radius:50%}
.cx .em{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2cqw}
.cx .em .rk{font-size:38cqw;font-weight:700}
.cx .em .su{font-size:30cqw}
/* carte pas encore possédée : fond du paquet, rang + couleur en filigrane, liseré à la couleur de la rareté */
.cx.bk .cf{border:1.5px dashed var(--c,var(--line));box-shadow:none!important}
.cx.bk.dk0 .cf{background:repeating-linear-gradient(45deg,#7a1018 0 4cqw,#5c0b12 4cqw 8cqw)}
.cx.bk.dk1 .cf{background:linear-gradient(rgba(53,233,255,.2) 1px,transparent 1px) 0 0/100% 9cqw,linear-gradient(90deg,rgba(255,79,160,.2) 1px,transparent 1px) 0 0/9cqw 100%,#0c1024}
.cx.bk.dk2 .cf{background:radial-gradient(circle at 50% 50%,transparent 0 16cqw,rgba(246,205,120,.5) 16cqw 16.8cqw,transparent 16.8cqw 28cqw,rgba(246,205,120,.35) 28cqw 28.8cqw,transparent 28.8cqw),linear-gradient(170deg,#1d1650,#120e30)}
.cx .bd{inset:5cqw;border:1px solid rgba(255,255,255,.4);border-radius:4.4cqw}
.cx .gh{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2cqw;color:#fff;opacity:.82;text-shadow:0 1px 4cqw rgba(0,0,0,.5)}
.cx .gh .rk{font-size:36cqw;font-weight:700}
.cx .gh .su{font-size:26cqw}
.cx .gh .jk{font-size:9cqw;letter-spacing:.3em;font-weight:700;padding-left:.3em}

/* Commune : matière de base du paquet */
.cx.dk0.r-C .bg{background:radial-gradient(ellipse at 30% 15%,#fffaf0,var(--paper) 70%)}
.cx.dk1.r-C .bg{background:linear-gradient(rgba(53,233,255,.09) 1px,transparent 1px) 0 0/100% 9cqw,linear-gradient(160deg,#10163a,#0a0d20)}
.cx.dk2.r-C .bg{background:radial-gradient(circle at 18% 22%,rgba(255,255,255,.8) 0 1px,transparent 1.6px),radial-gradient(circle at 82% 12%,rgba(255,255,255,.6) 0 1px,transparent 1.6px),radial-gradient(circle at 70% 78%,rgba(255,255,255,.7) 0 1px,transparent 1.6px),radial-gradient(circle at 24% 86%,rgba(255,255,255,.5) 0 1px,transparent 1.6px),linear-gradient(170deg,#1d1650,#120e30)}
/* Chromatique (classe r-L) : reflets métalliques qui dérivent */
.cx.r-L{--red:#ffb3cf;--blk:#f2f7ff;--tint:rgba(255,255,255,.1);--frame:rgba(255,255,255,.5);--edge:#7f7cf0;--glow:0 0 6px currentColor}
.cx.r-L .cf{box-shadow:0 0 0 1px #7f7cf0,0 6px 16px -6px rgba(110,70,240,.75)}
.cx.r-L .bg{background:linear-gradient(135deg,var(--c1) 0%,var(--c2) 38%,var(--c3) 66%,var(--c2) 84%,var(--c1) 100%);background-size:260% 260%;animation:cxdrift 8s ease-in-out infinite}
.cx.r-L .bg::after{background:repeating-linear-gradient(115deg,rgba(255,255,255,0) 0 5cqw,rgba(255,255,255,.14) 5cqw 6cqw)}
.cx.r-L .fx::after{background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.45) 50%,transparent 62%);transform:translateX(-130%);animation:cxglint 5s ease-in-out infinite}
/* Légendaire (classe r-E) : feuille d'or */
.cx.r-E{--red:#8c0f26;--blk:#1a1204;--tint:rgba(90,52,0,.14);--frame:rgba(80,48,0,.65);--edge:#9a6a0c;--glow:none}
.cx.r-E .cf{box-shadow:0 0 0 1px #c9941b,0 6px 16px -6px rgba(240,190,50,.75)}
.cx.r-E .bg{background:linear-gradient(135deg,#fff1a8 0%,#f0c231 24%,#b57d0f 50%,#ffe27a 72%,#c8921a 100%)}
.cx.dk0.r-E .bg::after{background:repeating-linear-gradient(45deg,rgba(120,80,0,.12) 0 1px,transparent 1px 5px)}
.cx.dk1.r-E .bg::after{background:repeating-linear-gradient(0deg,rgba(90,52,0,.14) 0 1px,transparent 1px 3px)}
.cx.dk2.r-E .bg::after{background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.65) 0 1px,transparent 1.8px),radial-gradient(circle at 76% 18%,rgba(255,255,255,.55) 0 1px,transparent 1.8px),radial-gradient(circle at 64% 72%,rgba(255,255,255,.6) 0 1px,transparent 1.8px),radial-gradient(circle at 22% 84%,rgba(255,255,255,.5) 0 1px,transparent 1.8px),radial-gradient(circle at 88% 56%,rgba(255,255,255,.55) 0 1px,transparent 1.8px)}
.cx.r-E .fx::after{background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.8) 50%,transparent 68%);transform:translateX(-130%);animation:cxglint 3.8s ease-in-out infinite}
/* Édition spéciale : arc-en-ciel holographique */
.cx.r-S{--red:#7a0c20;--blk:#160f2a;--tint:rgba(255,255,255,.3);--frame:rgba(255,255,255,.95);--edge:#fff;--glow:none}
.cx.r-S .cf{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 14px rgba(255,120,220,.6)}
.cx.r-S .bg{background:linear-gradient(115deg,#ff5f6d,#ffc371,#fff56d,#7bff8a,#58e0ff,#8a7bff,#ff6df0,#ff5f6d);background-size:300cqw 100%;animation:cxslide 5s linear infinite}
.cx.r-S .bg::after{background:radial-gradient(circle at 28% 18%,rgba(255,255,255,.65),transparent 58%)}
.cx.r-S .fx::before{background:radial-gradient(circle at 18% 24%,#fff 0 1.5px,transparent 2.6px),radial-gradient(circle at 78% 14%,#fff 0 1.2px,transparent 2.4px),radial-gradient(circle at 62% 68%,#fff 0 1.6px,transparent 3px),radial-gradient(circle at 14% 82%,#fff 0 1.2px,transparent 2.4px),radial-gradient(circle at 86% 58%,#fff 0 1.5px,transparent 2.8px),radial-gradient(circle at 44% 40%,#fff 0 1.2px,transparent 2.4px);animation:cxtwinkle 1.8s ease-in-out infinite alternate}
.cx.r-S .fx::after{background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.7) 50%,transparent 68%);transform:translateX(-130%);animation:cxglint 3.2s ease-in-out infinite}
@keyframes cxglint{0%{transform:translateX(-130%)}55%,100%{transform:translateX(130%)}}
@keyframes cxdrift{0%,100%{background-position:0% 0%}50%{background-position:100% 100%}}
@keyframes cxslide{to{background-position:300cqw 0}}
@keyframes cxtwinkle{from{opacity:.25}to{opacity:1}}

/* ── Joker exclusif : exemplaire unique, hors packs (noir prismatique, cadre arc-en-ciel animé, or) ── */
.cx.ex{--paper:#07040f;--edge:#f2cf6b;--frame:rgba(242,207,107,.8);--tint:rgba(255,255,255,.05);--red:#ff4fa0;--blk:#ffe08a;--glow:0 0 7px rgba(255,224,138,.8);--disp:'Cinzel',Georgia,serif}
.cx.ex .cf{border:0;box-shadow:0 0 0 1px #f2cf6b,0 0 16px rgba(179,107,255,.65),0 0 30px -6px rgba(53,233,255,.5)}
.cx.ex .cf::before{content:"";position:absolute;z-index:0;left:50%;top:50%;width:260%;aspect-ratio:1;margin:-130% 0 0 -130%;background:conic-gradient(#ff5f6d,#ffc371,#fff56d,#7bff8a,#58e0ff,#8a7bff,#ff6df0,#ff5f6d);animation:cxspin 7s linear infinite}
.cx.ex .cf::after{content:"";position:absolute;z-index:0;inset:1.7cqw;border-radius:5.8cqw;background:#07040f}
.cx.ex.emb .cf::after{border-radius:50%}
.cx.ex .cf>*{z-index:1}
.cx.ex .bg,.cx.ex .fx{inset:1.7cqw;border-radius:5.8cqw;overflow:hidden}
.cx.ex.emb .bg,.cx.ex.emb .fx{border-radius:50%}
.cx.ex .bg{background:radial-gradient(ellipse at 50% 36%,rgba(138,92,255,.62),transparent 62%),radial-gradient(circle at 12% 94%,rgba(53,233,255,.42),transparent 46%),radial-gradient(circle at 92% 88%,rgba(255,61,154,.42),transparent 46%),#07040f}
.cx.ex .bg::after{background:repeating-linear-gradient(45deg,rgba(242,207,107,.14) 0 1px,transparent 1px 7cqw),repeating-linear-gradient(-45deg,rgba(242,207,107,.14) 0 1px,transparent 1px 7cqw)}
.cx.ex .fx::before{inset:-60%;background:conic-gradient(rgba(255,95,109,.4),rgba(255,224,138,.34),rgba(123,255,138,.32),rgba(88,224,255,.4),rgba(138,123,255,.4),rgba(255,109,240,.4),rgba(255,95,109,.4));mix-blend-mode:screen;animation:cxspin 12s linear infinite reverse}
.cx.ex .fx::after{background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.5) 50%,transparent 68%);transform:translateX(-130%);animation:cxglint 4.2s ease-in-out infinite}
.cx.ex .fr{inset:4.2cqw;border:1px solid var(--frame);border-radius:4.4cqw;box-shadow:inset 0 0 0 1.1cqw rgba(242,207,107,.12)}
.cx.ex .fr::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 16% 40%,#fff 0 1.3px,transparent 2.4px),radial-gradient(circle at 84% 32%,#fff 0 1.3px,transparent 2.4px),radial-gradient(circle at 76% 66%,#fff 0 1.5px,transparent 2.8px),radial-gradient(circle at 24% 72%,#fff 0 1.2px,transparent 2.4px),radial-gradient(circle at 52% 14%,#fff 0 1.2px,transparent 2.4px);animation:cxtwinkle 1.7s ease-in-out infinite alternate}
.cx.ex .cn.jkc .rk{font-size:10cqw}
.cx.ex .fc{inset:20cqw 12cqw 20cqw}
.cx.ex .fc svg{display:block;width:100%;height:100%;filter:drop-shadow(0 0 3cqw rgba(179,107,255,.75))}
.cx .ser{left:50%;bottom:7.4cqw;transform:translateX(-50%);padding:1.5cqw 4cqw;border-radius:99px;font-size:5cqw;font-weight:700;letter-spacing:.16em;white-space:nowrap;color:#1a1204;text-shadow:none;background:linear-gradient(90deg,#fff1a8,#f0c231,#fff1a8)}
.cx.ex .em .rk{font-size:44cqw;color:#ffe08a}
@keyframes cxspin{to{transform:rotate(360deg)}}

/* ── identité de paquet : badge rond + cadre propre à chaque paquet, visibles sur toutes les raretés ── */
.cx.dk0{--dc:#e0463c;--dg:#fff}
.cx.dk1{--dc:#35e9ff;--dg:#04222b}
.cx.dk2{--dc:#f6cd78;--dg:#1d1650}
.cx .dkb{top:6cqw;right:5.6cqw;width:13.4cqw;height:13.4cqw;border-radius:50%;background:var(--dc);color:var(--dg);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px rgba(255,255,255,.6),0 1px 3cqw rgba(0,0,0,.4);text-shadow:none}
.cx .dkb svg{width:62%;height:62%;display:block}
.cx.dk1 .dkb{box-shadow:0 0 0 1px rgba(255,255,255,.75),0 0 4cqw #35e9ff}
/* Royal : double filet */
.cx.dk0 .fr::after{content:"";position:absolute;inset:1.5cqw;border:1px solid var(--frame);border-radius:3cqw}
/* Néon Arcade : cadre néon cyan + lueur rose + lignes de balayage */
.cx.dk1 .fr{border:1.5px solid #35e9ff;box-shadow:0 0 4cqw rgba(53,233,255,.6),inset 0 0 4cqw rgba(255,79,160,.4)}
.cx.dk1 .fr::before{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(0deg,rgba(0,0,0,.17) 0 1px,transparent 1px 2.6cqw)}
/* Cosmos : filet doré, orbite et étoiles */
.cx.dk2 .fr{overflow:hidden;border-color:rgba(246,205,120,.95)}
.cx.dk2 .fr::before{content:"";position:absolute;left:-30%;right:-30%;top:40%;height:26%;border:1px solid rgba(246,205,120,.8);border-radius:50%;transform:rotate(-16deg);box-shadow:0 0 0 1px rgba(20,12,60,.22)}
.cx.dk2 .fr::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 14% 28%,#fff 0 1px,transparent 1.8px),radial-gradient(circle at 82% 74%,#fff 0 1px,transparent 1.8px),radial-gradient(circle at 36% 88%,#fff 0 1px,transparent 1.8px),radial-gradient(circle at 70% 20%,#fff 0 .8px,transparent 1.6px)}