/* Mutiversa — styles */
:root{
  --bg:#1a1030; --bg2:#25183f; --panel:#2f2150; --panel2:#3b2a63; --line:#5a4690;
  --txt:#f6efff; --mut:#b9a8dc; --pink:#ff5fa8; --pink2:#ff9cc9; --gold:#ffd166; --ok:#44d17a; --bad:#ff5a5a;
}
*{box-sizing:border-box}
html,body{margin:0;background:radial-gradient(1200px 700px at 20% -10%,#3a1d5c 0%,transparent 60%),radial-gradient(900px 600px at 110% 10%,#4a1640 0%,transparent 55%),var(--bg);color:var(--txt);font-family:Fredoka,system-ui,sans-serif;min-height:100vh}
button{font-family:inherit;cursor:pointer;border:0;color:inherit}
input,select{font-family:inherit;font-size:14px;background:#1d1336;color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:6px 8px}
input[type=number]{width:70px}
.hidden{display:none!important}
#app{max-width:1180px;margin:0 auto;padding:14px}
.btn{background:linear-gradient(180deg,#ff77b6,#e2438d);padding:10px 16px;border-radius:12px;font-weight:600;box-shadow:0 4px 0 #9b2660,0 8px 18px -6px rgba(255,95,168,.6);transition:transform .08s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #9b2660}
.btn.alt{background:linear-gradient(180deg,#6d58b8,#4d3a91);box-shadow:0 4px 0 #2d2160}
.btn.gold{background:linear-gradient(180deg,#ffd982,#f0a92a);color:#3a2300;box-shadow:0 4px 0 #a26a08}
.btn.ghost{background:transparent;border:1px solid var(--line);box-shadow:none}
.btn.small{padding:6px 10px;font-size:13px;border-radius:9px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.panel{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:18px;padding:16px}
h1,h2,h3{margin:.2em 0 .5em}
.mut{color:var(--mut)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grid{display:grid;gap:14px}

/* header */
.top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.logo{font-family:'Pixelify Sans',Fredoka;font-size:28px;font-weight:700;letter-spacing:1px;background:linear-gradient(90deg,#ff9cc9,#ffd166,#9fd0ff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #5b1f45)}
.who{margin-left:auto;display:flex;gap:10px;align-items:center}
.chip{background:#ffffff14;border:1px solid #ffffff22;padding:6px 12px;border-radius:999px;font-size:14px}
.nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.nav button{background:#ffffff10;border:1px solid #ffffff1c;padding:9px 14px;border-radius:12px;font-weight:600;font-size:14px}
.nav button.on{background:linear-gradient(180deg,#ff77b6,#e2438d);border-color:transparent}

/* type badge */
.tb{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#fff;text-shadow:0 1px 1px #0006;box-shadow:inset 0 -2px 0 #0003}

/* 2.5D card */
.card3d{--w:150px;width:var(--w);aspect-ratio:3/4;perspective:900px;flex:none}
.card-inner{position:relative;width:100%;height:100%;border-radius:calc(var(--w)*.1);transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out;background:linear-gradient(150deg,var(--c1),var(--c2));box-shadow:0 22px 30px -14px rgba(0,0,0,.7),inset 0 0 0 3px rgba(255,255,255,.35),inset 0 0 0 6px rgba(0,0,0,.15)}
.card-inner::before{content:"";position:absolute;inset:7%;border-radius:calc(var(--w)*.07);background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.35),rgba(255,255,255,.05) 60%),repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 6px,transparent 6px 12px);transform:translateZ(6px);border:1px solid rgba(255,255,255,.3)}
.card-art{position:absolute;left:10%;right:10%;top:9%;height:52%;display:grid;place-items:center;font-size:calc(var(--w)*.44);transform:translateZ(46px);filter:drop-shadow(0 12px 8px rgba(0,0,0,.45));line-height:1}
.card-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:calc(var(--w)*.06);box-shadow:0 0 0 2px #fff6}
.card-name{position:absolute;left:4%;right:4%;top:65%;text-align:center;font-weight:700;font-size:calc(var(--w)*.11);color:#fff;transform:translateZ(30px);text-shadow:0 2px 0 rgba(0,0,0,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-lvl{position:absolute;top:4%;right:6%;font-size:calc(var(--w)*.08);font-weight:700;background:#0005;padding:1px 6px;border-radius:6px;transform:translateZ(36px)}
.card-rar{position:absolute;top:4%;left:6%;font-size:calc(var(--w)*.08);transform:translateZ(36px)}
.card-types{position:absolute;left:0;right:0;bottom:7%;display:flex;gap:4px;justify-content:center;transform:translateZ(24px)}
.card-types .tb{font-size:calc(var(--w)*.058)}
.card-shine{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--mx,50%) var(--my,25%),rgba(255,255,255,.5),transparent 45%);mix-blend-mode:overlay;pointer-events:none;transform:translateZ(60px)}
.shiny .card-inner::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 20%,rgba(255,0,170,.35),rgba(0,255,255,.35),rgba(255,255,0,.35),transparent 80%);background-size:250% 250%;animation:holo 3s linear infinite;mix-blend-mode:color-dodge;transform:translateZ(62px);pointer-events:none}
@keyframes holo{to{background-position:250% 0}}
.tilt{cursor:pointer}
.sil .card-art{filter:brightness(0) drop-shadow(0 0 2px #fff6)}
.sil .card-name,.sil .card-types{opacity:.3}

/* hub */
.zone{border-radius:18px;padding:16px;min-height:150px;position:relative;overflow:hidden;border:1px solid #ffffff22;text-align:left;transition:transform .15s;box-shadow:0 12px 24px -12px #000}
.zone:hover{transform:translateY(-3px) rotateX(4deg)}
.zone .ze{font-size:44px;filter:drop-shadow(0 6px 6px #0006)}
.zone h3{margin:.3em 0 .1em}
.teamrow{display:flex;gap:16px;flex-wrap:wrap}
.tm{display:flex;flex-direction:column;align-items:center;gap:6px}
.hpbar{height:9px;background:#0007;border-radius:9px;overflow:hidden;border:1px solid #ffffff22;width:100%}
.hpfill{height:100%;background:var(--ok);transition:width .6s ease,background .3s;width:100%}
.hpfill.y{background:#f5c400}.hpfill.r{background:var(--bad)}
.xpbar{height:5px;background:#0007;border-radius:5px;overflow:hidden;width:100%}
.xpfill{height:100%;background:#5fc3ff;transition:width .6s}
.st{font-size:10px;font-weight:700;padding:1px 6px;border-radius:5px;color:#fff}
.st.brn{background:#e2572b}.st.par{background:#d6a800}.st.psn{background:#9b46c9}.st.slp{background:#6b7a99}.st.ko{background:#555}

/* shop */
.shop{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.item{display:flex;gap:12px;align-items:center;background:#ffffff0c;border:1px solid #ffffff1c;border-radius:14px;padding:12px}
.item .ie{font-size:34px;width:52px;height:52px;display:grid;place-items:center;background:#0003;border-radius:12px;transform:perspective(300px) rotateY(-12deg);box-shadow:4px 6px 0 #0004}
.item .info{flex:1}
.price{color:var(--gold);font-weight:700}

/* battle — plein écran, s'adapte à toutes les tailles */
body.inbattle{overflow:hidden}
.battle{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;background:#140c26}
.arena{position:relative;flex:1;min-height:0;perspective:1200px;overflow:hidden}
.arena .sky{position:absolute;inset:0}
.floor{position:absolute;left:-30%;right:-30%;bottom:-45%;height:95%;transform:rotateX(68deg);transform-origin:50% 0;background:repeating-linear-gradient(90deg,#ffffff12 0 2px,transparent 2px 90px),repeating-linear-gradient(0deg,#ffffff12 0 2px,transparent 2px 90px);opacity:.8}
.plat{display:none}
.bslot{position:absolute;z-index:1;transition:transform .3s,opacity .3s}
.bslot::after{content:"";position:absolute;left:50%;bottom:-14%;width:175%;height:30%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,#ffffff66,#ffffff14 55%,transparent 70%);z-index:-1}
.bslot-foe{right:clamp(4%,14vw - 40px,22%);top:5%}
.bslot-me{left:clamp(3%,12vw - 40px,20%);bottom:6%}
.bslot-foe .card3d{--w:clamp(96px,min(26vh,17vw),360px)!important}
.bslot-me .card3d{--w:clamp(112px,min(32vh,21vw),440px)!important}
.bslot-foe .card-inner{--rx:6deg;--ry:-16deg}
.bslot-me .card-inner{--rx:4deg;--ry:16deg}
.floaty{animation:floaty 3.2s ease-in-out infinite}
.bslot-foe .floaty{animation-delay:-1.6s}
@keyframes floaty{50%{transform:translateY(-10px)}}
.lunge-me{transform:translate(8vw,-6vh) scale(1.05)}
.lunge-foe{transform:translate(-8vw,6vh) scale(1.05)}
.hit .card-inner{animation:hit .5s}
@keyframes hit{0%,100%{filter:none}20%{transform:translateX(-10px) rotateY(var(--ry));filter:brightness(2.2)}40%{transform:translateX(10px) rotateY(var(--ry))}60%{transform:translateX(-6px) rotateY(var(--ry));filter:brightness(2.2)}80%{transform:translateX(4px) rotateY(var(--ry))}}
.faint{opacity:0;transform:translateY(60px) scale(.8)}
.swapout{opacity:0;transform:scale(.3)}
.hud{position:absolute;z-index:2;background:linear-gradient(180deg,#fffaf2,#efe4ff);color:#2a1c46;border-radius:16px;padding:clamp(7px,1.2vh,16px) clamp(10px,1.2vw,20px);width:clamp(200px,26vw,520px);font-size:clamp(12px,min(1.05vw,1.9vh),22px);box-shadow:0 8px 0 #0003,0 16px 24px -10px #000;border:3px solid #3b2a63;transform:perspective(600px) rotateY(var(--hr,0deg))}
.hud-foe{left:clamp(2%,6vw - 30px,12%);top:5%;--hr:8deg}
.hud-me{right:clamp(2%,6vw - 30px,12%);bottom:7%;--hr:-8deg}
.hud .nm{font-weight:700;font-size:1.2em;display:flex;justify-content:space-between;align-items:center;gap:6px}
.hud .tb{font-size:.7em}
.hud .hpbar{background:#3b2a6333;border-color:#3b2a6355;margin-top:6px;height:clamp(9px,1.1vh,14px)}
.hud .hpt{font-size:.95em;text-align:right;font-weight:600;margin-top:2px}
.hearts{font-size:.95em;letter-spacing:1px;margin-top:4px}
.bbox{flex:none;display:grid;grid-template-columns:1fr clamp(320px,34vw,620px);background:#140c26;border-top:3px solid #3b2a63}
.msg{padding:clamp(12px,2vh,26px) clamp(14px,2vw,34px);font-family:'Pixelify Sans',Fredoka;font-size:clamp(16px,1.6vw,28px);min-height:clamp(110px,18vh,210px);line-height:1.35;border-right:3px solid #3b2a63;cursor:pointer;position:relative}
.msg .nxt{position:absolute;right:14px;bottom:10px;animation:blink 1s infinite;font-size:14px}
@keyframes blink{50%{opacity:0}}
.bmenu{display:grid;grid-template-columns:1fr 1fr;gap:clamp(6px,.8vw,12px);padding:clamp(8px,1.2vw,16px);align-content:center}
.bmenu .mb{padding:clamp(10px,1.5vh,18px) 12px;border-radius:12px;font-weight:700;font-size:clamp(14px,1.15vw,20px);text-align:left;position:relative;box-shadow:0 4px 0 #0005;border:2px solid #ffffff30}
.bmenu .mb small{display:block;font-weight:500;font-size:.68em;opacity:.85}
.bmenu .full{grid-column:1/-1}
.bmenu .scroll{grid-column:1/-1;max-height:clamp(150px,24vh,300px);overflow:auto;display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.fx{position:absolute;inset:0;pointer-events:none;z-index:3}
.pt{position:absolute;font-size:clamp(22px,2.2vw,40px);animation:pt .8s ease-out forwards}
@keyframes pt{from{transform:translate(0,0) scale(.4);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(1.3);opacity:0}}
.dmg{position:absolute;font-weight:800;font-size:clamp(24px,2.4vw,44px);color:#fff;text-shadow:0 3px 0 #b3123f,0 0 10px #000;animation:dmg 1s ease-out forwards}
@keyframes dmg{from{transform:translateY(0);opacity:1}to{transform:translateY(-60px);opacity:0}}
.flyheart{position:absolute;font-size:clamp(40px,3.5vw,64px);transition:all .7s cubic-bezier(.3,.7,.4,1);z-index:5}
.pulse .card-inner{animation:pulse .5s}
@keyframes pulse{50%{transform:scale(1.1) rotateY(var(--ry));box-shadow:0 0 40px 10px var(--pink)}}
.flash{position:absolute;inset:0;animation:flash .45s}
@keyframes flash{from{opacity:.85}to{opacity:0}}
@media (max-width:760px){
  .bbox{grid-template-columns:1fr}.msg{border-right:0;border-bottom:3px solid #3b2a63;min-height:84px}
  .bslot-foe{right:3%;top:6%}.bslot-me{left:3%;bottom:5%}
  .bslot-foe .card3d{--w:clamp(90px,26vw,170px)!important}.bslot-me .card3d{--w:clamp(100px,30vw,200px)!important}
  .hud{width:clamp(170px,52vw,280px)}.hud-foe{left:3%}.hud-me{right:3%}
}
@media (max-height:520px){.msg{min-height:70px}.bmenu .mb{padding:7px 10px}}

/* animations des compétences */
.a-slash{position:absolute;width:clamp(160px,18vw,320px);height:9px;border-radius:9px;background:linear-gradient(90deg,transparent,#fff,var(--c),transparent);box-shadow:0 0 18px var(--c),0 0 4px #fff;transform:translate(-50%,-50%) rotate(var(--r)) scaleX(0);animation:slash .38s ease-out forwards;opacity:0}
@keyframes slash{10%{opacity:1}45%{transform:translate(-50%,-50%) rotate(var(--r)) scaleX(1);opacity:1}100%{transform:translate(-50%,-50%) rotate(var(--r)) scaleX(1.25);opacity:0}}
.a-proj{position:absolute;font-size:clamp(28px,2.6vw,48px);transform:translate(-50%,-50%);filter:drop-shadow(0 0 10px var(--c));z-index:4;pointer-events:none}
.a-orb{width:clamp(26px,2.2vw,42px);height:clamp(26px,2.2vw,42px);border-radius:50%;background:radial-gradient(circle,#fff 0,var(--c) 45%,transparent 72%)}
.a-pop{position:absolute;font-size:clamp(70px,7vw,140px);transform:translate(-50%,-50%) scale(.2);animation:pop .45s ease-out forwards}
@keyframes pop{60%{transform:translate(-50%,-50%) scale(1.25);opacity:1}100%{transform:translate(-50%,-50%) scale(1.6);opacity:0}}
.a-ring{position:absolute;border:4px solid var(--c);border-radius:50%;width:40px;height:40px;transform:translate(-50%,-50%);animation:ringx .75s ease-out forwards;box-shadow:0 0 16px var(--c)}
@keyframes ringx{to{width:clamp(240px,24vw,460px);height:clamp(240px,24vw,460px);opacity:0;border-width:1px}}
.a-pillar{position:absolute;top:0;width:clamp(90px,9vw,180px);height:100%;transform:translateX(-50%) scaleX(0);background:linear-gradient(180deg,#fff,var(--c) 55%,transparent);filter:blur(2px);animation:pillar .75s ease-out forwards;mix-blend-mode:screen}
@keyframes pillar{30%{transform:translateX(-50%) scaleX(1);opacity:1}100%{transform:translateX(-50%) scaleX(.15);opacity:0}}
.a-wave{position:absolute;top:0;bottom:0;width:45%;background:linear-gradient(90deg,transparent,var(--c),#ffffffaa,var(--c),transparent);opacity:.8;animation:wavex .7s ease-in-out forwards;mix-blend-mode:screen}
@keyframes wavex{from{left:var(--from)}to{left:var(--to);opacity:0}}
.a-veil{position:absolute;inset:0;background:radial-gradient(circle at var(--x) var(--y),transparent 8%,#000000d0 65%);animation:veil .95s ease forwards}
@keyframes veil{0%,100%{opacity:0}30%,70%{opacity:1}}
.a-thread{position:absolute;width:clamp(200px,20vw,380px);height:3px;background:var(--c);box-shadow:0 0 8px var(--c);transform:translate(-50%,-50%) rotate(var(--r)) scaleX(0);animation:thread .65s ease-out forwards}
@keyframes thread{50%{transform:translate(-50%,-50%) rotate(var(--r)) scaleX(1)}100%{transform:translate(-50%,-50%) rotate(calc(var(--r) + 45deg)) scaleX(.5);opacity:0}}
.a-jaw{position:absolute;font-size:clamp(34px,3.4vw,64px);letter-spacing:-.15em;color:#fff;text-shadow:0 0 10px var(--c),0 2px 0 #0008;white-space:nowrap}
.jt{animation:jt .33s ease-in forwards}.jb{animation:jb .33s ease-in forwards}
@keyframes jt{from{transform:translate(-50%,-170%)}to{transform:translate(-50%,-75%)}}
@keyframes jb{from{transform:translate(-50%,80%)}to{transform:translate(-50%,-20%)}}
.a-float{position:absolute;font-size:clamp(24px,2.2vw,42px);transform:translate(-50%,0);animation:fup 1s ease-out forwards;opacity:0}
.a-float.down{animation-name:fdown}
@keyframes fup{0%{opacity:0;transform:translate(-50%,0)}15%{opacity:1}100%{transform:translate(-50%,-90px);opacity:0}}
@keyframes fdown{0%{opacity:0;transform:translate(-50%,0)}15%{opacity:1}100%{transform:translate(-50%,70px);opacity:0}}
.a-clock{position:absolute;font-size:clamp(90px,9vw,180px);animation:clk 1s ease-in-out forwards}
@keyframes clk{0%{transform:translate(-50%,-50%) rotate(0) scale(.4);opacity:0}30%{opacity:1}100%{transform:translate(-50%,-50%) rotate(540deg) scale(1.3);opacity:0}}
.arena.timestop .sky,.arena.timestop .floor,.arena.timestop .bslot{filter:grayscale(1) contrast(1.15);transition:filter .2s}
.arena.shake{animation:shk .4s}
@keyframes shk{20%{transform:translate(-9px,4px)}40%{transform:translate(8px,-5px)}60%{transform:translate(-5px,3px)}80%{transform:translate(4px,-2px)}}

/* styles des œuvres */
.a-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:4}
.brush{fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw .5s ease-out forwards,fadeo .5s 1s forwards}
.a-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .55s ease-out forwards,fadeo .45s 1.05s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadeo{to{opacity:0}}
.a-dot{opacity:0;animation:dotp .9s ease-out forwards}
@keyframes dotp{30%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
.spin{transform-box:fill-box;transform-origin:center;animation:spin2 1.6s ease-out forwards,fadeo .5s 1.05s forwards}
@keyframes spin2{from{transform:rotate(-40deg) scale(.6)}to{transform:rotate(60deg) scale(1)}}
.a-kanji{position:absolute;font-family:'Yuji Syuku',serif;font-size:clamp(110px,13vw,260px);color:var(--c);transform:translate(-50%,-50%) scale(1.6);opacity:0;-webkit-text-stroke:3px #1a0f0a;text-shadow:0 0 30px var(--c);animation:kanji 1.4s ease-out forwards;z-index:5}
.a-kanji.goth{font-family:'Cinzel',serif;-webkit-text-stroke:2px #000}
@keyframes kanji{15%{opacity:.95;transform:translate(-50%,-50%) scale(1)}70%{opacity:.85}100%{opacity:0;transform:translate(-50%,-50%) scale(.95)}}
.a-bolt{position:absolute;top:0;width:6px;height:70%;background:linear-gradient(180deg,#fff,var(--c));box-shadow:0 0 18px var(--c);clip-path:polygon(40% 0,100% 0,60% 40%,100% 40%,20% 100%,40% 55%,0 55%);transform:scaleX(4);opacity:0;animation:bolt .4s steps(2) forwards}
@keyframes bolt{20%,80%{opacity:1}100%{opacity:0}}
.a-scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,#7fe9ff14 0 2px,transparent 2px 6px);animation:veil 1s ease forwards;mix-blend-mode:screen}
.a-fall{position:absolute;font-size:clamp(22px,2vw,38px);opacity:0;animation:fall 1.3s ease-in forwards;filter:drop-shadow(0 0 8px #bff)}
@keyframes fall{15%{opacity:1}100%{transform:translateY(260px) rotate(200deg);opacity:0}}
.a-veil.red{background:radial-gradient(circle at var(--x) var(--y),transparent 8%,#3a0008e0 65%)}
.a-blood{position:absolute;border-radius:50% 45% 55% 40%;background:radial-gradient(circle at 35% 35%,#ff2a48,#8a0012 70%);transform:translate(-50%,-50%) scale(0);animation:blood .9s ease-out forwards;box-shadow:0 0 12px #c4001f}
@keyframes blood{30%{transform:translate(-50%,-50%) scale(1.2)}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
.a-prism{position:absolute;width:clamp(240px,26vw,480px);height:clamp(240px,26vw,480px);border-radius:50%;transform:translate(-50%,-50%) scale(.2);background:conic-gradient(#ff7ab8,#ffd166,#7fffd4,#7fb2ff,#c49bff,#ff7ab8);mix-blend-mode:screen;filter:blur(6px);animation:prism .9s ease-out forwards}
@keyframes prism{40%{opacity:.8}100%{transform:translate(-50%,-50%) scale(1.2) rotate(120deg);opacity:0}}
.a-shard{position:absolute;width:22px;height:34px;clip-path:polygon(50% 0,100% 40%,50% 100%,0 40%);background:linear-gradient(135deg,#fff,#9ff 30%,#f9f 60%,#ff9);opacity:0;animation:shard 1s ease-out forwards;filter:drop-shadow(0 0 6px #fff)}
@keyframes shard{10%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}
/* bannières d'introduction (compétences uniques) */
.cutin{position:absolute;inset:0;z-index:8;display:grid;place-items:center;pointer-events:none;overflow:hidden;animation:ciFade 1.35s ease forwards;--c:#ff5fa8;--c2:#2a1450}
.cutin::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,#05020d55 0,#05020de0 80%)}
.ci-lines{position:absolute;inset:-30%;background:repeating-conic-gradient(from 0deg,#ffffff30 0 .6deg,transparent .6deg 5deg);-webkit-mask:radial-gradient(circle,transparent 26%,#000 62%);mask:radial-gradient(circle,transparent 26%,#000 62%);animation:ciSpin 1.35s linear}
@keyframes ciSpin{to{transform:rotate(8deg)}}
@keyframes ciFade{0%{opacity:0}8%,86%{opacity:1}100%{opacity:0}}
.ci-band{position:relative;width:112%;height:clamp(100px,20vh,200px);transform:skewY(-4deg);animation:ciIn 1.35s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes ciIn{0%{transform:translateX(-105%) skewY(-4deg)}16%{transform:translateX(0) skewY(-4deg)}84%{transform:translateX(0) skewY(-4deg)}100%{transform:translateX(105%) skewY(-4deg)}}
.ci-bg{position:absolute;inset:0;background:linear-gradient(90deg,var(--c2),color-mix(in srgb,var(--c) 70%,#000) 40%,var(--c2));box-shadow:0 0 0 2px #ffffff40 inset,0 10px 60px #000a}
.ci-bg::before,.ci-bg::after{content:"";position:absolute;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#fff,transparent)}
.ci-bg::before{top:8px}.ci-bg::after{bottom:8px}
.ci-content{position:relative;height:100%;display:flex;align-items:center;justify-content:center;padding:0 10%;transform:skewY(4deg)}
.ci-mv{text-align:center;letter-spacing:.04em;animation:ciTxt 1.35s ease forwards}
.ci-mv::after{content:"";display:block;height:2px;margin:10px auto 0;width:0;background:linear-gradient(90deg,transparent,#ffffffd0,transparent);animation:ciLine 1.35s ease forwards}
@keyframes ciLine{15%{width:0}40%,100%{width:70%}}
.ci-art{flex:none;width:clamp(100px,19vh,220px);height:clamp(100px,19vh,220px);display:grid;place-items:center;font-size:clamp(60px,11vh,130px);border-radius:18px;background:radial-gradient(circle,#ffffff30,transparent 70%);filter:drop-shadow(0 0 22px var(--c));animation:ciArt 1.35s ease forwards}
.ci-art img{width:100%;height:100%;object-fit:cover;border-radius:18px;border:3px solid #fff;box-shadow:0 0 30px var(--c)}
@keyframes ciArt{0%{transform:scale(.6) translateX(-40px)}20%{transform:scale(1.08)}30%,100%{transform:scale(1)}}
.ci-txt{animation:ciTxt 1.35s ease forwards}
@keyframes ciTxt{0%,10%{opacity:0;transform:translateX(60px)}26%,100%{opacity:1;transform:none}}
.ci-tag{font-size:clamp(11px,1.1vw,18px);letter-spacing:.35em;text-transform:uppercase;opacity:.85;margin-bottom:4px}
.ci-mv{font-family:'Pixelify Sans',Fredoka;font-size:clamp(30px,4vw,76px);font-weight:700;line-height:1.05;background:linear-gradient(180deg,#fff 30%,color-mix(in srgb,var(--c) 60%,#fff));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #0009) drop-shadow(0 0 18px var(--c))}
.ci-who{font-size:clamp(13px,1.3vw,22px);opacity:.9;margin-top:6px}
/* Demon Slayer : papier et encre */
.ci-ds{--c2:#efe2c4}
.ci-ds .ci-bg{background:linear-gradient(90deg,#e8d7b0,#f6ecd6 50%,#e8d7b0);filter:url(#inkf);box-shadow:none}
.ci-ds .ci-bg::before,.ci-ds .ci-bg::after{background:#b3121f;height:6px}
.ci-ds .ci-kanji{font-family:'Yuji Syuku',serif;font-size:clamp(80px,15vh,190px);color:#b3121f;line-height:1;filter:drop-shadow(2px 3px 0 #0003);animation:ciArt 1.35s ease forwards}
.ci-ds .ci-mv{font-family:'Yuji Syuku',serif;font-weight:400;background:none;color:#16100c;filter:none}
.ci-ds .ci-mv::after{background:linear-gradient(90deg,transparent,#b3121f,transparent)}
.ci-ds .ci-who,.ci-ds .ci-tag{color:#5a3a20}
.ci-ds .ci-seal{margin-left:auto;font-family:'Yuji Syuku',serif;font-size:clamp(26px,4.5vh,58px);color:#f6ecd6;background:#b3121f;padding:8px 12px;border-radius:6px;transform:rotate(7deg);box-shadow:0 0 0 3px #f6ecd6 inset}
/* Date A Live : hologramme */
.ci-dal .ci-bg{background:linear-gradient(90deg,#03101f,#0a2a4a 50%,#03101f);box-shadow:0 0 0 1px #7fe9ff inset,0 0 50px #2ad4ff66}
.ci-dal .ci-bg::before,.ci-dal .ci-bg::after{background:linear-gradient(90deg,transparent,#7fe9ff,transparent)}
.ci-dal .ci-bg{background-image:linear-gradient(90deg,#03101f,#0a2a4a 50%,#03101f),repeating-linear-gradient(0deg,#7fe9ff10 0 1px,transparent 1px 4px);background-blend-mode:screen}
.ci-dal .ci-tag{font-family:'Orbitron',sans-serif;color:#7fe9ff}
.ci-dal .ci-mv{font-family:'Orbitron',sans-serif;background:linear-gradient(180deg,#fff,#7fe9ff);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 14px #2ad4ff)}
/* Seraph of the End : gothique */
.ci-sote .ci-bg{background:linear-gradient(90deg,#0a0003,#3a0008 50%,#0a0003);box-shadow:0 0 0 2px #c4001f inset,0 0 60px #c4001f88}
.ci-sote .ci-bg::before,.ci-sote .ci-bg::after{background:linear-gradient(90deg,transparent,#ff2a48,transparent)}
.ci-sote .ci-tag{font-family:'Cinzel',serif;color:#ff4060}
.ci-sote .ci-mv{font-family:'Cinzel',serif;font-weight:900;background:linear-gradient(180deg,#fff,#ff6a80);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 16px #c4001f)}
/* Genshin : or et élément */
.ci-gi .ci-bg{background:linear-gradient(90deg,#1b1530,#2b2248 40%,color-mix(in srgb,var(--c) 45%,#2b2248) 75%,#1b1530);box-shadow:0 0 0 2px #e8c26a inset,0 0 50px #ffd77a55}
.ci-gi .ci-bg::before,.ci-gi .ci-bg::after{background:linear-gradient(90deg,transparent,#ffd77a,transparent)}
.ci-gi .ci-tag{color:#ffd77a;font-weight:700}
.ci-gi .ci-mv{background:linear-gradient(180deg,#fff8e0,#ffd77a);-webkit-background-clip:text;background-clip:text}
/* Crystalis : verre irisé */
.ci-cr .ci-bg{background:linear-gradient(100deg,#2a1a50,#3d2a70 30%,#5a3f8f 50%,#3d2a70 70%,#2a1a50);box-shadow:0 0 0 2px #ffffffaa inset,0 0 50px #c9b3ff88}
.ci-cr .ci-bg::before,.ci-cr .ci-bg::after{background:linear-gradient(90deg,#ff9ad5,#9fffe0,#a8c6ff,#ff9ad5)}
.ci-cr .ci-tag{background:linear-gradient(90deg,#ff9ad5,#9fffe0,#a8c6ff);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.ci-cr .ci-mv{background:linear-gradient(90deg,#ffd6f0,#d6fff6,#dbe6ff);-webkit-background-clip:text;background-clip:text}
.ci-jjk .ci-bg{background:linear-gradient(90deg,#020205,#0a0b1e 30%,#11143a 50%,#0a0b1e 70%,#020205);box-shadow:0 0 0 2px #2b5cff inset,0 0 60px #2b5cffaa,0 0 120px #7a2bff55}
.ci-jjk .ci-bg::before,.ci-jjk .ci-bg::after{background:linear-gradient(90deg,transparent,#5f8bff,#b06bff,transparent)}
.ci-jjk .ci-mv{font-family:Fredoka,sans-serif;font-weight:700;letter-spacing:.06em;background:none;color:#fff;-webkit-text-stroke:2px #05050c;filter:drop-shadow(0 0 10px #2b5cff) drop-shadow(0 0 26px #7a2bff)}
.a-veil.jj{background:radial-gradient(circle at var(--x) var(--y),#2b5cff22 8%,#020208e6 62%)}
.a-ce{position:absolute;border-radius:50% 50% 45% 45%/60% 60% 40% 40%;background:radial-gradient(ellipse at 50% 70%,#9fb8ff,#2b5cff 35%,#120c3a 70%,transparent 75%);transform:translate(-50%,-50%) scale(.3);opacity:0;mix-blend-mode:screen;filter:blur(1px);animation:ce 1.1s ease-out forwards}
@keyframes ce{20%{opacity:.95;transform:translate(-50%,-60%) scale(1)}100%{opacity:0;transform:translate(-50%,-160%) scale(.6)}}
.a-bolt.bf{background:linear-gradient(180deg,#000,#ff1f3d 40%,#000);box-shadow:0 0 22px #ff1f3d,0 0 4px #000}
.ci-cg .ci-bg{background:linear-gradient(90deg,#0a0004,#2a0010 35%,#4a0018 50%,#2a0010 65%,#0a0004);box-shadow:0 0 0 2px #e8c26a inset,0 0 60px #ff174477}
.ci-cg .ci-bg::before,.ci-cg .ci-bg::after{background:linear-gradient(90deg,transparent,#e8c26a,#ff1744,#e8c26a,transparent)}
.ci-cg .ci-mv{font-family:'Cinzel',serif;font-weight:900;letter-spacing:.08em;background:linear-gradient(180deg,#fff6dc,#e8c26a);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 14px #ff1744) drop-shadow(0 3px 0 #000)}
.a-veil.cgv{background:radial-gradient(circle at var(--x) var(--y),#ff174422 6%,#100004d8 62%)}
.ci-fate .ci-bg{background:linear-gradient(90deg,#040a1e,#0d1f4a 35%,#14306e 50%,#0d1f4a 65%,#040a1e);box-shadow:0 0 0 2px #ffd77a inset,0 0 60px #7fb2ff66}
.ci-fate .ci-bg::before,.ci-fate .ci-bg::after{background:linear-gradient(90deg,transparent,#ffd77a,#fff,#ffd77a,transparent)}
.ci-fate .ci-mv{font-family:'Cinzel',serif;font-weight:900;letter-spacing:.1em;background:linear-gradient(180deg,#fffbe8,#ffd77a);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 16px #ffd77a) drop-shadow(0 3px 0 #000)}
.a-np{position:absolute;height:clamp(40px,7vh,90px);transform-origin:0 50%;transform:translateY(-50%) rotate(var(--ang)) scaleX(0);background:linear-gradient(90deg,#ffffff00,#fffbe8 15%,#ffd77a 50%,#fff 85%,#ffffff00);border-radius:50px;box-shadow:0 0 40px #ffd77a,0 0 80px #ffd77a88;mix-blend-mode:screen;animation:np .8s ease-out forwards}
@keyframes np{30%{transform:translateY(-50%) rotate(var(--ang)) scaleX(1);opacity:1}100%{transform:translateY(-50%) rotate(var(--ang)) scaleX(1) scaleY(.1);opacity:0}}
.ci-twst .ci-bg{background:linear-gradient(90deg,#08060c,#1a1022 35%,#24152e 50%,#1a1022 65%,#08060c);box-shadow:0 0 0 2px #e8c26a inset,0 0 0 6px #08060c inset,0 0 0 7px #e8c26a88 inset,0 0 50px #8a5cff55}
.ci-twst .ci-bg::before,.ci-twst .ci-bg::after{background:linear-gradient(90deg,transparent,#e8c26a,#ff3355,#e8c26a,transparent)}
.ci-twst .ci-mv{font-family:'Cinzel',serif;font-weight:900;letter-spacing:.08em;background:linear-gradient(180deg,#fff,#e8c26a);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 12px #8a5cff) drop-shadow(0 3px 0 #000)}
.a-veil.tw{background:radial-gradient(circle at var(--x) var(--y),#8a5cff22 6%,#0a0610d8 62%)}
.a-blood.ink{background:radial-gradient(circle at 35% 35%,#3a2a5a,#08060c 70%);box-shadow:0 0 10px #8a5cff}
/* Tensura : fenêtre système */
.ci-ts .ci-bg{background:linear-gradient(90deg,#030a1e,#0c2350 50%,#030a1e);box-shadow:0 0 0 1px #8fd0ff inset,0 0 50px #3a9cff66}
.ci-ts .ci-bg::before,.ci-ts .ci-bg::after{background:linear-gradient(90deg,transparent,#8fd0ff,transparent)}
.ci-ts .ci-mv{background:linear-gradient(180deg,#fff,#9fd4ff);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 14px #3a9cff)}
.ci-ts .ci-lines{display:none}
.ci-win{position:relative;width:min(680px,84vw);padding:clamp(16px,2.4vh,30px) clamp(20px,2.6vw,40px);background:linear-gradient(180deg,#0c2350ee,#061533ee);border:1px solid #8fd0ff;border-radius:4px;box-shadow:0 0 0 4px #8fd0ff14,0 0 50px #3a9cff66,inset 0 0 30px #3a9cff22;color:#e8f4ff;animation:winIn 1.35s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes winIn{0%{opacity:0;transform:translateY(-20px) scale(.92)}14%,86%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px)}}
.ci-win::before,.ci-win::after{content:"";position:absolute;width:22px;height:22px;border:2px solid #cfeaff}
.ci-win::before{top:-6px;left:-6px;border-right:0;border-bottom:0}
.ci-win::after{bottom:-6px;right:-6px;border-left:0;border-top:0}
.ci-win .w-head{text-align:center;color:#9fd4ff;font-weight:700;letter-spacing:.3em;font-size:clamp(14px,1.4vw,22px)}
.ci-win .w-sep{height:1px;margin:10px 0 14px;background:linear-gradient(90deg,transparent,#8fd0ff,transparent)}
.ci-win .w-body{font-size:clamp(16px,1.7vw,28px);line-height:1.55;min-height:3em}
.ci-win .w-body b{color:#ffd166;font-weight:700}
.ci-win .w-cur{display:inline-block;width:.55em;height:1em;background:#9fd4ff;vertical-align:-.12em;margin-left:2px;animation:blink .6s infinite}

/* attaques emblématiques */
.a-flash{position:absolute;inset:0;background:var(--c);mix-blend-mode:screen;animation:flash .45s forwards;z-index:6}
.a-sphere{position:absolute;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#fff 0,var(--c) 38%,transparent 70%);box-shadow:0 0 40px var(--c),0 0 90px var(--c);z-index:5}
.a-void{position:absolute;inset:0;z-index:3;background:radial-gradient(circle at 20% 30%,#fff 1px,transparent 2px) 0 0/90px 90px,radial-gradient(circle at 70% 60%,#cde 1px,transparent 2px) 0 0/130px 130px,radial-gradient(ellipse at center,#1b1446,#000 72%);animation:veil 1.9s ease forwards}
.a-streak{position:absolute;width:130px;height:2px;background:linear-gradient(90deg,transparent,#fff,transparent);transform:rotate(var(--r)) scaleX(0);animation:streak .5s ease-out forwards;z-index:4}
@keyframes streak{50%{transform:rotate(var(--r)) scaleX(1);opacity:1}100%{transform:rotate(var(--r)) translateX(70px) scaleX(.2);opacity:0}}
.arena.invert .sky,.arena.invert .bslot,.arena.invert .floor{filter:invert(1) hue-rotate(180deg) contrast(1.3)}
.a-zig{position:absolute;height:12px;transform-origin:0 50%;transform:rotate(var(--r)) scaleX(0);background:var(--c);clip-path:polygon(0 40%,30% 0,45% 60%,65% 10%,80% 70%,100% 45%,82% 100%,62% 40%,46% 100%,30% 35%,0 70%);filter:drop-shadow(0 0 8px var(--c));animation:zig .45s ease-out forwards;z-index:5}
@keyframes zig{30%{transform:rotate(var(--r)) scaleX(1);opacity:1}100%{transform:rotate(var(--r)) scaleX(1.1);opacity:0}}
.a-bubble{position:absolute;transform:translate(-50%,-50%);background:#fff;color:#111;font-weight:800;font-size:clamp(20px,2.4vw,40px);padding:10px 20px;border-radius:24px;box-shadow:0 6px 0 #0005;animation:pop .9s ease-out forwards;white-space:nowrap;z-index:6}
.a-ratio{position:absolute;width:6px;height:clamp(160px,30vh,320px);transform:translate(-50%,-50%);background:linear-gradient(180deg,#fff 0 70%,#ffd166 70% 71%,#fff 71%);box-shadow:0 0 12px #fff;animation:veil 1.2s ease forwards;z-index:5}
.a-ratio::after{content:"7 : 3";position:absolute;left:14px;top:66%;font-weight:800;color:#ffd166;font-size:clamp(16px,1.6vw,28px);text-shadow:0 2px 0 #000;white-space:nowrap}
.a-np.big{height:clamp(70px,13vh,160px)}
.a-np.ea{background:linear-gradient(90deg,#ff2a3a00,#ff2a3a 20%,#2a0000 50%,#ff2a3a 80%,#ff2a3a00);box-shadow:0 0 40px #ff2a3a}
.a-np.fire{height:clamp(60px,11vh,130px);background:linear-gradient(90deg,#ff6a0000,#ffe08a 15%,#ff6a00 50%,#ff2a00 85%,#ff6a0000);box-shadow:0 0 50px #ff6a00}
.a-portal{position:absolute;width:clamp(50px,5vw,86px);height:clamp(50px,5vw,86px);border-radius:50%;transform:translate(-50%,-50%) scale(0);background:radial-gradient(circle,#fff6c8 0,#ffd77a 30%,#ffd77a55 55%,transparent 70%);box-shadow:0 0 30px #ffd77a;animation:portal 1.6s ease forwards;z-index:4}
@keyframes portal{15%,80%{transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-50%,-50%) scale(0)}}
.a-vortex{position:absolute;width:clamp(260px,30vw,520px);height:clamp(260px,30vw,520px);border-radius:50%;transform:translate(-50%,-50%) scale(.2);background:repeating-conic-gradient(#ff2a3a 0 12deg,#1a0000 12deg 30deg);-webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%);animation:vortex 1.4s ease-in-out forwards;z-index:4}
@keyframes vortex{30%{transform:translate(-50%,-50%) scale(1) rotate(180deg);opacity:1}100%{transform:translate(-50%,-50%) scale(1.2) rotate(720deg);opacity:0}}
.a-ubw{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 120%,#ffb347,#c2410c 40%,#3a0d00 85%);opacity:0;animation:veil 2.3s ease forwards;z-index:2}
.a-spear{position:absolute;width:clamp(140px,14vw,240px);height:10px;background:linear-gradient(90deg,transparent,#8a0012 20%,#ff1f3d 85%,#fff);clip-path:polygon(0 35%,85% 35%,85% 0,100% 50%,85% 100%,85% 65%,0 65%);filter:drop-shadow(0 0 10px #ff1f3d);z-index:5}
.brush.fire{animation:draw .7s ease-out forwards,fadeo .5s 1.1s forwards}
.a-draw.fast{animation:draw .16s linear forwards,fadeo .4s .6s forwards}
.a-clockg{transform-box:fill-box;transform-origin:center;animation:clockin 1.8s ease forwards}
@keyframes clockin{0%{opacity:0;transform:scale(.6)}15%,80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.05)}}
.a-hand{animation:handback 1.5s linear}.a-hand.fast{animation-duration:.5s;animation-iteration-count:3}
@keyframes handback{to{transform:rotate(-360deg)}}
.a-bigsword{position:absolute;width:clamp(60px,6vw,110px);height:clamp(260px,52vh,520px);transform:translate(-50%,-160%);background:linear-gradient(90deg,#8a6a2a,#ffe7a0 45%,#fff 50%,#c9a0ff 55%,#6a3fb8);clip-path:polygon(50% 100%,35% 82%,35% 20%,10% 20%,10% 14%,40% 14%,40% 0,60% 0,60% 14%,90% 14%,90% 20%,65% 20%,65% 82%);filter:drop-shadow(0 0 20px #c9a0ff);animation:bigsword .5s cubic-bezier(.6,0,.9,.4) forwards,fadeo .4s .8s forwards;z-index:5}
@keyframes bigsword{to{transform:translate(-50%,-62%)}}
.a-lens{position:absolute;width:clamp(180px,20vw,340px);height:4px;transform:translate(-50%,-50%);background:linear-gradient(90deg,transparent,#ff1744,#fff,#ff1744,transparent);filter:blur(1px);animation:veil .9s ease forwards;z-index:6}
.bslot.geassed .card-inner{filter:sepia(1) hue-rotate(-50deg) saturate(4) brightness(.8);transition:filter .2s}
.a-board{position:absolute;width:clamp(200px,20vw,340px);height:clamp(200px,20vw,340px);transform:translate(-50%,-50%) perspective(600px) rotateX(62deg);background:conic-gradient(#111 25%,#eee 0 50%,#111 0 75%,#eee 0) 0 0/25% 25%;border:4px solid #e8c26a;opacity:0;animation:veil 1.6s ease forwards;z-index:3}
.a-piece{position:absolute;font-size:clamp(70px,8vw,130px);color:#111;text-shadow:0 0 0 #fff,0 0 12px #ff1744,0 4px 0 #e8c26a;transform:translate(-50%,-50%);z-index:5}
.a-piece.topple{color:#fff;animation:topple .7s ease-in forwards}
@keyframes topple{to{transform:translate(-50%,-30%) rotate(90deg);opacity:.2}}
.a-meteor{position:absolute;width:clamp(120px,13vw,220px);height:clamp(120px,13vw,220px);border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 35%,#ffe7a0,#c8955a 45%,#5a3a1a 80%);box-shadow:0 0 0 6px #ffd77a55,0 0 60px #ffd77a,inset -20px -20px 40px #0006;z-index:5}
.a-meteor::after{content:"";position:absolute;inset:10%;border-radius:50%;border:3px dashed #ffd77a;animation:spin 2s linear infinite}
.a-veil.purple{background:radial-gradient(circle at var(--x) var(--y),#b36bff22 8%,#12002ae6 62%)}
.a-slime{position:absolute;width:clamp(200px,22vw,380px);height:clamp(200px,22vw,380px);border-radius:46% 54% 50% 50%/55% 45% 55% 45%;transform:translate(-50%,-50%) scale(0);background:radial-gradient(circle at 35% 30%,#9fd4ff,#2a6bff 40%,#0a1a4a 75%);opacity:.92;animation:slime 1.4s ease forwards;z-index:5}
@keyframes slime{35%{transform:translate(-50%,-50%) scale(1.1)}60%{transform:translate(-50%,-50%) scale(1) rotate(10deg)}100%{transform:translate(-50%,-50%) scale(0) rotate(30deg);opacity:0}}
.bslot.eaten{transform:scale(.6);opacity:.4}

.card3d.form1 .card-inner{box-shadow:0 22px 30px -14px rgba(0,0,0,.7),inset 0 0 0 3px #ffd166,inset 0 0 0 6px rgba(0,0,0,.15),0 0 22px #ffd16699}
.card3d.form2 .card-inner{box-shadow:0 22px 30px -14px rgba(0,0,0,.7),inset 0 0 0 3px #fff,inset 0 0 0 6px #ffd166,0 0 30px #ff9ad5aa,0 0 60px #ffd16666}
.card3d.form3 .card-inner{box-shadow:0 22px 30px -14px rgba(0,0,0,.7),inset 0 0 0 4px #fff,0 0 30px #9fe8ff,0 0 70px #c49bff}
.card3d.form3 .card-inner::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 25%,#ffffff55,transparent 75%);background-size:250% 250%;animation:holo 2.5s linear infinite;mix-blend-mode:overlay;pointer-events:none}

.evo-row{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;padding:12px;background:#ffffff08;border:1px solid #ffffff14;border-radius:14px}
.evo-col{display:grid;gap:6px;justify-items:center;width:150px}
.evo-arrow{align-self:center;margin-top:-60px;font-size:26px;color:var(--gold)}
.evo-card{cursor:pointer;position:relative;display:block;text-transform:none!important}
.evo-card::after{content:"📷 Choisir une image";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:12px;font-weight:700;color:#fff;background:#000b;padding:6px 10px;border-radius:10px;opacity:0;transition:opacity .2s;white-space:nowrap;pointer-events:none}
.evo-card:hover::after{opacity:1}
.evo-add{width:130px;height:173px;border:2px dashed #ffffff50;border-radius:13px;background:#ffffff08;font-size:16px;font-weight:700;color:var(--txt);transition:background .2s}
.evo-add:hover{background:#ff5fa822;border-color:var(--pink)}

.a-beam{position:absolute;transform-origin:0 50%;transform:translateY(-50%) rotate(var(--ang)) scaleX(0);background:linear-gradient(90deg,transparent,#fff 12%,var(--c) 45%,var(--c) 80%,transparent);border-radius:60px;box-shadow:0 0 30px var(--c);mix-blend-mode:screen;animation:np .75s ease-out forwards;z-index:4}
.a-geyser{position:absolute;width:clamp(80px,8vw,150px);height:clamp(200px,40vh,420px);transform:translate(-50%,-100%) scaleY(0);transform-origin:50% 100%;background:linear-gradient(0deg,var(--c),color-mix(in srgb,var(--c) 60%,#fff) 60%,transparent);border-radius:50% 50% 20% 20%;filter:blur(1px) drop-shadow(0 0 16px var(--c));animation:geyser .9s ease-out forwards;z-index:4}
@keyframes geyser{35%{transform:translate(-50%,-100%) scaleY(1);opacity:1}100%{transform:translate(-50%,-100%) scaleY(1.1);opacity:0}}
.a-tornado{position:absolute;width:clamp(140px,14vw,260px);height:clamp(200px,34vh,380px);transform:translate(-50%,-55%);background:repeating-radial-gradient(ellipse at 50% 100%,transparent 0 14px,var(--c) 15px 18px);-webkit-mask:linear-gradient(0deg,transparent,#000 30%,#000 80%,transparent);mask:linear-gradient(0deg,transparent,#000 30%,#000 80%,transparent);clip-path:polygon(40% 100%,60% 100%,100% 0,0 0);opacity:0;animation:tornado 1.1s ease forwards;z-index:4}
@keyframes tornado{20%{opacity:.9}80%{opacity:.9}100%{opacity:0;transform:translate(-50%,-55%) scaleX(1.3)}}
.a-orbit{position:absolute;width:0;height:0;animation:orbit 1.15s linear forwards;z-index:5}
.a-orbit span{position:absolute;left:0;top:0;font-size:clamp(22px,2vw,36px);margin:-.6em 0 0 -.5em}
@keyframes orbit{0%{transform:rotate(0) scale(.4);opacity:0}20%{opacity:1;transform:rotate(90deg) scale(1)}85%{opacity:1}100%{transform:rotate(360deg) scale(1.1);opacity:0}}
.a-shield{position:absolute;width:clamp(200px,20vw,340px);height:clamp(200px,20vw,340px);border-radius:50%;transform:translate(-50%,-50%) scale(.3);background:radial-gradient(circle,transparent 55%,color-mix(in srgb,var(--c) 50%,transparent) 70%,var(--c) 72%,transparent 74%);box-shadow:0 0 40px var(--c),inset 0 0 40px var(--c);animation:shieldx 1.05s ease forwards;z-index:4}
@keyframes shieldx{30%{transform:translate(-50%,-50%) scale(1);opacity:1}80%{opacity:.9}100%{transform:translate(-50%,-50%) scale(1.05);opacity:0}}

/* GTS */
.gts-head{display:flex;gap:18px;align-items:center;padding:16px;border-radius:16px;background:linear-gradient(120deg,#0b3a7a,#1a6fd0 60%,#5fb3ff);box-shadow:inset 0 0 0 2px #ffffff30}
.gts-globe{flex:none;width:74px;height:74px;border-radius:50%;background-color:#1a73e8;background-image:radial-gradient(circle at 35% 30%,#ffffffaa,transparent 30%),radial-gradient(ellipse 18% 24% at 22% 45%,#2fbf71 96%,transparent),radial-gradient(ellipse 13% 17% at 58% 68%,#3fcf7a 96%,transparent),radial-gradient(ellipse 9% 12% at 78% 28%,#2fbf71 96%,transparent),radial-gradient(ellipse 6% 8% at 40% 18%,#e8f4ff 96%,transparent);background-size:100% 100%,200% 100%,200% 100%,200% 100%,200% 100%;box-shadow:inset -12px -12px 22px #0007,inset 6px 6px 14px #ffffff33,0 0 30px #9fd4ff;animation:globe 7s linear infinite;border:3px solid #cfe8ff}
.gts-globe.big{width:clamp(160px,22vw,260px);height:clamp(160px,22vw,260px)}
@keyframes globe{to{background-position:0 0,-200% 0,-200% 0,-200% 0,-200% 0}}
.gts-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.gts-item{display:flex;gap:12px;align-items:center;background:#ffffff0a;border:1px solid #ffffff1a;border-radius:14px;padding:10px}
.gts-item.done{border-color:var(--gold);box-shadow:0 0 20px #ffd16633}
.gts-info{flex:1;min-width:0}
.gts-want{margin-top:6px;font-size:13px;background:#00000033;border-radius:8px;padding:5px 8px}
.gts-pick{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));max-height:300px;overflow:auto}
#trade{position:fixed;inset:0;z-index:70;background:radial-gradient(circle,#0b3a7a,#020814);display:grid;place-items:center;overflow:hidden}
#trade .tr-card{position:absolute;top:50%;left:50%}
#trade .tr-out{animation:trOut 2.6s ease-in-out forwards}
#trade .tr-in{opacity:0;animation:trIn 2.6s ease-in-out forwards}
@keyframes trOut{0%{transform:translate(-50%,-50%) translateX(-30vw)}35%{transform:translate(-50%,-50%) translateX(0) scale(.6)}50%{transform:translate(-50%,-50%) translateY(-60vh) scale(.3);opacity:0}100%{opacity:0}}
@keyframes trIn{0%,50%{opacity:0;transform:translate(-50%,-50%) translateY(-60vh) scale(.3)}70%{opacity:1;transform:translate(-50%,-50%) scale(.6)}100%{opacity:1;transform:translate(-50%,-50%) translateX(0) scale(1)}}
#trade .tr-txt{position:absolute;bottom:10%;left:0;right:0;text-align:center;font-family:'Pixelify Sans',Fredoka;font-size:26px}

.a-collar{position:absolute;width:clamp(180px,17vw,300px);height:clamp(60px,6vw,100px);border-radius:50%;border:clamp(8px,.9vw,14px) solid #e0002a;box-shadow:0 0 20px #ff1f4a,inset 0 0 12px #7a0016;transform:translate(-50%,-50%) perspective(400px) rotateX(55deg) scale(2.4);opacity:0;animation:collar 1.6s cubic-bezier(.3,.8,.3,1) forwards;z-index:5}
.a-collar::after{content:"♥";position:absolute;left:50%;bottom:-.55em;transform:translateX(-50%) rotateX(-55deg);font-size:clamp(34px,3.4vw,58px);color:#ff1f4a;text-shadow:0 0 12px #ff1f4a,0 2px 0 #7a0016}
@keyframes collar{0%{opacity:0}15%{opacity:1}35%{transform:translate(-50%,-50%) perspective(400px) rotateX(55deg) scale(1)}85%{opacity:1;transform:translate(-50%,-50%) perspective(400px) rotateX(55deg) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) perspective(400px) rotateX(55deg) scale(.95)}}
.bslot.sealed .card-inner{filter:grayscale(.85) brightness(.7);transition:filter .2s}

/* PC */
.pc{display:grid;grid-template-columns:200px 1fr 260px;gap:14px}
.pcteam{display:grid;gap:8px}
.slot{background:#ffffff0d;border:2px dashed #ffffff22;border-radius:12px;min-height:58px;display:flex;align-items:center;gap:8px;padding:6px;cursor:pointer;position:relative;transition:transform .1s}
.slot.f{border-style:solid;border-color:#ffffff30}
.slot:hover{transform:translateY(-2px)}
.slot.sel{border-color:var(--gold);box-shadow:0 0 0 3px #ffd16655}
.slot.mv{border-color:var(--pink);box-shadow:0 0 0 3px #ff5fa855}
.mini{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;font-size:26px;flex:none;box-shadow:inset 0 0 0 2px #fff4,0 3px 0 #0004;transform:perspective(200px) rotateY(-10deg);overflow:hidden}
.mini img{width:100%;height:100%;object-fit:cover}
.boxgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:14px;border-radius:16px;background:linear-gradient(160deg,#4b3a86,#2c1f55);box-shadow:inset 0 0 0 3px #ffffff22}
.boxgrid .slot{min-height:72px;flex-direction:column;justify-content:center;gap:2px;padding:4px;font-size:11px}
.boxhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.boxhead h3{margin:0}

/* modal */
#modal{position:fixed;inset:0;background:#08041acc;display:grid;place-items:center;z-index:50;padding:16px;backdrop-filter:blur(4px)}
#modal .mc{max-width:860px;width:100%;max-height:92vh;overflow:auto}
table{border-collapse:collapse;width:100%}
td,th{padding:5px 6px;text-align:left;font-size:14px;border-bottom:1px solid #ffffff14}
.plus{color:#ff8a8a}.minus{color:#8ab8ff}
.statbar{height:8px;border-radius:5px;background:#0006;overflow:hidden;min-width:80px}
.statbar i{display:block;height:100%}
#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#2b1d4c;border:1px solid var(--line);padding:10px 18px;border-radius:12px;z-index:80;opacity:0;transition:opacity .3s;pointer-events:none}
#toast.on{opacity:1}

/* type chart */
.tc td,.tc th{text-align:center;padding:3px;font-size:12px;border:1px solid #ffffff10}
.tc .x2{background:#2fa35a;font-weight:700}.tc .x05{background:#a33a3a}.tc .x0{background:#111;color:#888}

/* evolution */
#evo{position:fixed;inset:0;z-index:70;background:radial-gradient(circle,#2a1450,#05020d);display:grid;place-items:center;overflow:hidden}
#evo .rays{position:absolute;width:200vmax;height:200vmax;background:repeating-conic-gradient(from 0deg,#ffffff10 0 8deg,transparent 8deg 20deg);animation:spin 18s linear infinite;opacity:0;transition:opacity 1s}
#evo.go .rays{opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}
#evo .stage{position:relative;width:240px;height:320px}
#evA,#evB{position:absolute;inset:0;transition:opacity .08s}
#evo .stage .card3d{position:absolute;inset:0;--w:240px}
#evo .white .card-inner{filter:brightness(0) invert(1) drop-shadow(0 0 30px #fff)}
#evo .wflash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
#evo .wflash.on{animation:wf 1.2s ease-out}
@keyframes wf{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
#evo .txt{position:absolute;bottom:8%;left:0;right:0;text-align:center;font-family:'Pixelify Sans',Fredoka;font-size:24px;padding:0 20px}
#evo .glowring{position:absolute;inset:-60px;border-radius:50%;box-shadow:0 0 120px 40px #ffffff55;opacity:0;transition:opacity .5s}
#evo.go .glowring{opacity:1;animation:ring 1s ease-in-out infinite}
@keyframes ring{50%{box-shadow:0 0 160px 70px #ff9cc977}}
.spark{position:absolute;left:50%;top:50%;font-size:24px;animation:spark 1.4s ease-out forwards}
@keyframes spark{from{transform:translate(-50%,-50%) scale(.3);opacity:1}to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.2);opacity:0}}

/* admin */
.adm{display:grid;grid-template-columns:240px 1fr;gap:14px}
.admlist{max-height:70vh;overflow:auto;display:grid;gap:6px}
.admlist button{display:flex;gap:8px;align-items:center;text-align:left;background:#ffffff0c;border:1px solid #ffffff1a;padding:6px 8px;border-radius:10px}
.admlist button.on{border-color:var(--gold);background:#ffd16618}
.f{display:grid;gap:4px;margin-bottom:10px}
.f label{font-size:12px;color:var(--mut);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.stats6{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.stats6 input{width:100%}
.dexgrid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));justify-items:center}

@media (max-width:860px){
  .pc{grid-template-columns:1fr}.adm{grid-template-columns:1fr}
  .boxgrid{grid-template-columns:repeat(5,1fr)}
}

/* ---------- Connexion (pseudo / mot de passe) ---------- */
.panel.auth{max-width:440px!important;width:calc(100% - 32px);margin:9vh auto!important;text-align:center;box-sizing:border-box}
.auth .logo{display:block;text-align:center}
.auth-tabs{display:flex;gap:6px;background:#ffffff0d;border-radius:14px;padding:5px;margin:22px 0 16px}
.auth-tabs button{flex:1;border:0;border-radius:10px;padding:10px;background:transparent;color:inherit;font:inherit;font-weight:600;cursor:pointer;opacity:.7}
.auth-tabs button.on{background:linear-gradient(180deg,#ff7ab8,#d94b8f);opacity:1;box-shadow:0 3px 0 #8f2a5c}
.auth-form{display:grid;gap:12px;text-align:left;margin-bottom:10px}
.auth-form label{display:grid;gap:5px;font-size:14px;font-weight:600}
.auth-form input{width:100%;box-sizing:border-box;padding:11px 12px;border-radius:10px;border:1px solid #ffffff2a;background:#0000003a;color:inherit;font:inherit;font-size:16px}
.auth-form input:focus{outline:none;border-color:#ff7ab8;box-shadow:0 0 0 3px #ff7ab833}
.auth-err{min-height:18px;color:#ff8080;font-size:14px;text-align:center}

/* =====================================================================
   CARTES PLEINE IMAGE HOLOGRAPHIQUES + CHROMATIQUES
   ===================================================================== */
@property --hx{syntax:'<percentage>';inherits:true;initial-value:0%}
@property --ang{syntax:'<angle>';inherits:true;initial-value:0deg}
@keyframes hxmove{0%{--hx:0%}50%{--hx:60%}100%{--hx:0%}}
@keyframes angspin{to{--ang:360deg}}

/* --- image sur toute la carte --- */
.fullart .card-inner::before{display:none}
.fullart .card-art{inset:0;left:0;right:0;top:0;height:auto;border-radius:inherit;overflow:hidden;transform:translateZ(2px);filter:none}
.fullart .card-art img{inset:0;border-radius:inherit;box-shadow:none;object-fit:cover;object-position:50% 20%}
.fullart .card-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,transparent 16%,transparent 55%,rgba(10,4,25,.55) 72%,rgba(10,4,25,.92) 100%)}
.fullart .card-name{top:auto;bottom:16%;font-size:calc(var(--w)*.105);text-shadow:0 2px 3px #000,0 0 8px rgba(0,0,0,.8)}
.fullart .card-types{bottom:6%}
.fullart .card-lvl,.fullart .card-rar{background:rgba(0,0,0,.45);padding:1px 6px;border-radius:7px;backdrop-filter:blur(2px)}

/* --- reflet holographique (toutes les cartes) : bouge avec la souris + doucement tout seul --- */
.card-holo{position:absolute;inset:0;border-radius:inherit;pointer-events:none;transform:translateZ(3px);overflow:hidden;
  background:
    repeating-linear-gradient(115deg,#ff2d9500 0%,#ff2d9566 4%,#ffe60066 8%,#2dffb566 12%,#2db4ff66 16%,#b42dff66 20%,#ff2d9500 24%),
    radial-gradient(circle at var(--mx,50%) var(--my,35%),rgba(255,255,255,.55),transparent 42%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.10) 0 1px,transparent 1px 5px),repeating-linear-gradient(-45deg,rgba(255,255,255,.08) 0 1px,transparent 1px 5px);
  background-size:400% 400%,100% 100%,100% 100%,100% 100%;
  background-position:calc(var(--mx,30%) + var(--hx)) calc(var(--my,30%) + var(--hx)),0 0,0 0,0 0;
  mix-blend-mode:color-dodge;opacity:.22;animation:hxmove 9s ease-in-out infinite;transition:opacity .25s}
.tilt:hover .card-holo{opacity:.42}
.fullart .card-holo{opacity:.38}
.fullart.tilt:hover .card-holo{opacity:.55}
.sil .card-holo{display:none}

/* --- cadre --- */
.card-frame{position:absolute;inset:0;border-radius:inherit;pointer-events:none;transform:translateZ(5px);box-shadow:inset 0 0 0 2px rgba(255,255,255,.45),inset 0 0 0 5px rgba(0,0,0,.18)}
.fullart .card-frame{box-shadow:inset 0 0 0 2px rgba(255,255,255,.6),inset 0 0 0 calc(var(--w)*.03) var(--c1),inset 0 0 0 calc(var(--w)*.035) rgba(255,255,255,.35)}

/* --- couche d'effet chromatique --- */
.card-fx{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;transform:translateZ(4px)}
.card-fx i,.card-fx b{position:absolute;inset:0;border-radius:inherit}
.chroma .card-inner{box-shadow:0 22px 30px -14px rgba(0,0,0,.7),0 0 18px hsl(calc(var(--hue) + 0deg) 100% 65% / .55)}
.chroma .card-holo{opacity:.4}
.chroma.tilt:hover .card-holo{opacity:.7}
.ch-badge{display:inline-block;filter:drop-shadow(0 0 4px #fff);animation:chbadge 2.4s ease-in-out infinite}
@keyframes chbadge{50%{transform:scale(1.25) rotate(8deg)}}
.chroma-line{font-weight:700;margin:2px 0 6px;background:linear-gradient(90deg,#ff7ab8,#ffd166,#7affd4,#9fb4ff,#ff7ab8);background-size:200%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:chtxt 4s linear infinite}
.chroma-line .mut{-webkit-text-fill-color:var(--mut);font-weight:400}
@keyframes chtxt{to{background-position:200% 0}}
.mini.chroma-mini{box-shadow:0 0 0 2px hsl(var(--hue) 100% 70%),0 0 10px hsl(var(--hue) 100% 60%)}
.chroma-pop .card-inner{animation:chpop 1.5s ease-out}
@keyframes chpop{0%{filter:brightness(3) saturate(0)}30%{filter:brightness(1.8)}100%{filter:none}}

/* cadre animé commun (bordure qui tourne) */
.chroma .card-frame::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:calc(var(--w)*.025);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  background:conic-gradient(from var(--ang),var(--f1,#fff),var(--f2,#fff8),var(--f1,#fff),var(--f2,#fff8),var(--f1,#fff));animation:angspin 6s linear infinite}

/* 🌈 Prisme */
.ch-prisme .card-fx i{background:conic-gradient(from calc(var(--ang) + var(--hue)) at var(--sx) var(--sy),#ff004c,#ffb800,#4dff00,#00e5ff,#7a00ff,#ff00c8,#ff004c);mix-blend-mode:color;opacity:.35;animation:angspin 8s linear infinite}
.ch-prisme .card-fx b{background:repeating-linear-gradient(60deg,transparent 0 10%,rgba(255,255,255,.35) 12%,transparent 14%);background-size:300% 300%;animation:prismsweep 3.5s linear infinite var(--sd);mix-blend-mode:overlay}
@keyframes prismsweep{to{background-position:300% 0}}
.ch-prisme{--f1:hsl(var(--hue) 100% 65%);--f2:hsl(calc(var(--hue) + 180deg) 100% 65%)}
.ch-prisme .card-frame::before{background:conic-gradient(from var(--ang),#ff004c,#ffb800,#4dff00,#00e5ff,#7a00ff,#ff00c8,#ff004c);animation-duration:3s}

/* 🌌 Galaxie */
.ch-galaxie .card-fx i{background:
  radial-gradient(ellipse at var(--sx) var(--sy),hsl(var(--hue) 90% 55% / .55),transparent 55%),
  radial-gradient(ellipse at calc(100% - var(--sx)) calc(100% - var(--sy)),hsl(calc(var(--hue) + 70deg) 90% 50% / .5),transparent 55%),
  linear-gradient(180deg,#0a0420cc,#12073099);mix-blend-mode:screen;opacity:.9}
.ch-galaxie .card-fx b{background:
  radial-gradient(1.4px 1.4px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 72% 12%,#fff,transparent),radial-gradient(1.6px 1.6px at 40% 42%,#fff,transparent),
  radial-gradient(1px 1px at 86% 56%,#fff,transparent),radial-gradient(1.3px 1.3px at 22% 70%,#fff,transparent),radial-gradient(1px 1px at 60% 82%,#fff,transparent);
  background-size:60px 70px;background-position:var(--sx) var(--sy);animation:twinkle 2.6s ease-in-out infinite var(--sd)}
@keyframes twinkle{50%{opacity:.25}}
.ch-galaxie.fullart .card-art img{filter:saturate(1.15) contrast(1.05)}
.ch-galaxie{--f1:hsl(var(--hue) 90% 70%);--f2:#1a0a40}

/* 👑 Or */
.ch-or .card-fx i{background:linear-gradient(135deg,#7a5200,#ffd76a 30%,#fff3c4 45%,#c28a00 60%,#ffe08a 80%,#7a5200);mix-blend-mode:soft-light;opacity:.55;-webkit-mask:radial-gradient(ellipse at 50% 45%,#0006 40%,#000 90%);mask:radial-gradient(ellipse at 50% 45%,#0006 40%,#000 90%)}
.ch-or .card-fx b{background:linear-gradient(110deg,transparent 35%,rgba(255,240,180,.85) 48%,transparent 60%);background-size:300% 100%;animation:goldsweep 3s ease-in-out infinite var(--sd);mix-blend-mode:overlay}
@keyframes goldsweep{0%{background-position:150% 0}100%{background-position:-150% 0}}
.ch-or{--f1:#ffe08a;--f2:#a06c00}
.ch-or .card-inner{box-shadow:0 22px 30px -14px rgba(0,0,0,.7),0 0 20px #ffcf4d99}

/* ❄️ Givre */
.ch-givre .card-fx i{background:radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(190,240,255,.75) 100%);mix-blend-mode:screen}
.ch-givre .card-fx b{background:
  repeating-conic-gradient(from calc(var(--hue)) at var(--sx) 0%,rgba(255,255,255,.22) 0 2deg,transparent 2deg 12deg),
  repeating-conic-gradient(from 20deg at calc(100% - var(--sx)) 100%,rgba(200,245,255,.2) 0 2deg,transparent 2deg 14deg);
  -webkit-mask:radial-gradient(ellipse at 50% 50%,transparent 40%,#000 85%);mask:radial-gradient(ellipse at 50% 50%,transparent 40%,#000 85%);animation:twinkle 4s ease-in-out infinite var(--sd)}
.ch-givre{--f1:#e8fbff;--f2:#6fd3ff}
.ch-givre .card-inner{box-shadow:0 22px 30px -14px rgba(0,0,0,.7),0 0 20px #8fe3ff99}

/* 🔥 Braise */
.ch-braise .card-fx i{background:linear-gradient(0deg,rgba(255,90,0,.7),rgba(255,160,0,.25) 35%,transparent 60%);mix-blend-mode:screen;animation:emberglow 1.8s ease-in-out infinite alternate}
@keyframes emberglow{to{opacity:.55}}
.ch-braise .card-fx b{background:
  radial-gradient(2px 2px at 15% 90%,#ffd27a,transparent),radial-gradient(1.5px 1.5px at 55% 80%,#ff9a3c,transparent),radial-gradient(2.2px 2.2px at 80% 95%,#ffe2a0,transparent),
  radial-gradient(1.5px 1.5px at 35% 60%,#ff7a2c,transparent),radial-gradient(1.8px 1.8px at 70% 50%,#ffc56a,transparent);
  background-size:70px 90px;background-position:var(--sx) 0;animation:embers 3.5s linear infinite var(--sd)}
@keyframes embers{to{background-position:var(--sx) -180px}}
.ch-braise{--f1:#ffb347;--f2:#ff3b00}
.ch-braise .card-inner{box-shadow:0 22px 30px -14px rgba(0,0,0,.7),0 0 22px #ff6a0099}

/* 💡 Néon */
.ch-neon .card-fx i{box-shadow:inset 0 0 calc(var(--w)*.08) hsl(var(--hue) 100% 60%),inset 0 0 calc(var(--w)*.02) #fff}
.ch-neon .card-fx b{background:linear-gradient(180deg,transparent 0 49%,hsl(var(--hue) 100% 70% / .25) 50%,transparent 51%);background-size:100% 6px;opacity:.35}
.ch-neon{--f1:hsl(var(--hue) 100% 70%);--f2:transparent}
.ch-neon .card-frame::before{padding:calc(var(--w)*.018);filter:drop-shadow(0 0 4px hsl(var(--hue) 100% 60%));animation-duration:2.2s}
.ch-neon .card-inner{box-shadow:0 22px 30px -14px rgba(0,0,0,.7),0 0 24px hsl(var(--hue) 100% 60% / .8)}

/* 🌸 Sakura */
.ch-sakura .card-fx i{background:linear-gradient(180deg,rgba(255,170,210,.35),transparent 40%,rgba(255,190,220,.3));mix-blend-mode:screen}
.ch-sakura .card-fx b{background:
  radial-gradient(ellipse 4px 2.6px at 20% 10%,#ffc4dd,transparent),radial-gradient(ellipse 3px 2px at 70% 30%,#ffd6e8,transparent),
  radial-gradient(ellipse 4px 2.4px at 45% 55%,#ffb3d1,transparent),radial-gradient(ellipse 3.4px 2.2px at 85% 75%,#ffe0ee,transparent);
  background-size:80px 100px;background-position:var(--sx) var(--sy);animation:petals 6s linear infinite var(--sd)}
@keyframes petals{to{background-position:calc(var(--sx) + 80px) calc(var(--sy) + 200px)}}
.ch-sakura{--f1:#ffd1e6;--f2:#ff7ab8}

/* 🌑 Abysse */
.ch-abysse .card-fx i{background:radial-gradient(ellipse at 50% 40%,transparent 35%,rgba(10,0,25,.85) 100%)}
.ch-abysse .card-fx b{box-shadow:inset 0 0 calc(var(--w)*.12) hsl(calc(270deg + var(--hue) / 6) 100% 55%);animation:abyss 2.8s ease-in-out infinite alternate var(--sd)}
@keyframes abyss{to{opacity:.35}}
.ch-abysse.fullart .card-art img{filter:saturate(.75) contrast(1.15)}
.ch-abysse{--f1:#b06bff;--f2:#14002b}
.ch-abysse .card-inner{box-shadow:0 22px 30px -14px rgba(0,0,0,.7),0 0 26px #7a2bff99}

/* ⚡ Foudre */
.ch-foudre .card-fx i{background:
  linear-gradient(105deg,transparent 46%,#fff 47.5%,#9fd8ff 48.5%,transparent 50%),
  linear-gradient(75deg,transparent 30%,#fff 31%,#ffe96b 32%,transparent 33.5%);
  background-position:var(--sx) 0,calc(100% - var(--sx)) 0;mix-blend-mode:screen;opacity:0;animation:zap 3.2s steps(1) infinite var(--sd)}
@keyframes zap{0%,100%{opacity:0}8%{opacity:.9}10%{opacity:0}13%{opacity:.7}15%{opacity:0}}
.ch-foudre .card-fx b{box-shadow:inset 0 0 calc(var(--w)*.06) #8fd0ff;animation:zapglow 3.2s steps(1) infinite var(--sd)}
@keyframes zapglow{0%,100%{opacity:.4}8%,13%{opacity:1}}
.ch-foudre{--f1:#fff59a;--f2:#4fb6ff}

/* 🫧 Nacre */
.ch-nacre .card-fx i{background:linear-gradient(calc(var(--hue) + var(--ang)),#ffd6f0,#d6f5ff,#e6ffd9,#fff2c9,#ead6ff,#ffd6f0);mix-blend-mode:overlay;opacity:.45;animation:angspin 12s linear infinite}
.ch-nacre .card-fx b{background:radial-gradient(circle at var(--mx,var(--sx)) var(--my,var(--sy)),rgba(255,255,255,.55),transparent 50%);mix-blend-mode:overlay}
.ch-nacre{--f1:#fff;--f2:#ffd6f0}

@media (prefers-reduced-motion:reduce){.card-holo,.card-fx i,.card-fx b,.chroma .card-frame::before,.ch-badge{animation:none!important}}