/* King Cards v2 — premium card component. Base size 300x420, scale with --z (zoom). */
.kcard{--c1:#8d93a3;--c2:#e4e7ee;--c3:#4b5160;--glow:rgba(200,205,220,.0);--ink:#0b0c12;
  position:relative;width:300px;height:420px;zoom:var(--z,1);border-radius:18px;flex:none;
  font-family:Rajdhani,Manrope,sans-serif;color:#fff;isolation:isolate;
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 18px 40px rgba(0,0,0,.55),0 0 34px var(--glow);}
.kcard *{box-sizing:border-box}
.kc-frame{position:absolute;inset:0;border-radius:18px;padding:7px;overflow:hidden;
  background:linear-gradient(135deg,var(--c3) 0%,var(--c1) 18%,var(--c2) 34%,var(--c1) 50%,var(--c3) 66%,var(--c2) 82%,var(--c1) 100%);}
.kc-frame:before{content:"";position:absolute;inset:3px;border-radius:15px;border:1px solid rgba(255,255,255,.45);pointer-events:none;z-index:6}
.kc-inner{position:relative;height:100%;border-radius:12px;overflow:hidden;
  background:radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,var(--c1) 28%,#0b0c14) 0%,#07080d 70%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.8),inset 0 0 0 2px color-mix(in srgb,var(--c2) 55%,transparent);}
/* art */
.kc-art{position:absolute;left:0;right:0;top:0;height:258px;background-size:cover;background-position:center 58%;overflow:hidden}
.kc-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,10,.55) 0%,rgba(5,6,10,0) 22%,rgba(5,6,10,0) 62%,rgba(7,8,13,.96) 100%)}
.kc-top{position:absolute;z-index:4;top:8px;left:8px;right:8px;display:flex;align-items:center;justify-content:space-between;gap:6px}
.kc-tier{display:flex;align-items:center;gap:5px;height:22px;padding:0 9px 0 4px;border-radius:12px;
  background:linear-gradient(90deg,var(--c3),var(--c1) 45%,var(--c2));color:var(--ink);font:900 10.5px Orbitron;letter-spacing:1.4px;
  box-shadow:0 2px 8px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.7)}
.kc-gem{width:16px;height:16px;flex:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}
.kc-cls{height:22px;padding:0 9px;border-radius:12px;display:flex;align-items:center;gap:5px;font:700 10px Orbitron;letter-spacing:1.3px;
  color:#fff;background:rgba(6,7,12,.62);backdrop-filter:blur(6px);border:1px solid color-mix(in srgb,var(--c2) 70%,transparent)}
.kc-cls svg{width:12px;height:12px}
.kc-val{position:absolute;z-index:4;right:8px;top:36px;height:22px;padding:0 9px;border-radius:7px;display:flex;align-items:center;
  font:800 13px Orbitron;color:var(--ink);background:linear-gradient(180deg,#fff8d6,#ffd257 55%,#d79b14);box-shadow:0 3px 10px rgba(0,0,0,.6),inset 0 1px 0 #fff}
/* name plate */
.kc-plate{position:absolute;z-index:4;left:0;right:0;bottom:138px;padding:0 12px}
.kc-name{font:400 31px/0.92 'Bebas Neue',Rajdhani,sans-serif;letter-spacing:1px;text-transform:uppercase;max-width:270px;
  background:linear-gradient(180deg,#fff 0%,#fff 45%,color-mix(in srgb,var(--c2) 70%,#fff) 60%,var(--c1) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.85))}
.kc-sub{margin-top:3px;display:flex;gap:7px;align-items:center;font:700 11px Rajdhani;letter-spacing:2px;color:color-mix(in srgb,var(--c2) 80%,#fff);text-transform:uppercase}
.kc-sub i{width:4px;height:4px;border-radius:50%;background:var(--c1);display:block}
.kc-pips{display:flex;gap:3px;margin-left:auto}
.kc-pips b{width:9px;height:9px;transform:rotate(45deg);background:linear-gradient(135deg,var(--c2),var(--c1));box-shadow:0 0 6px var(--c1);border-radius:2px}
.kc-pips b.off{background:rgba(255,255,255,.12);box-shadow:none}
/* stats */
.kc-stats{position:absolute;z-index:4;left:9px;right:9px;top:288px;display:grid;grid-template-columns:1fr 1fr;gap:5px}
.kc-stat{position:relative;height:39px;border-radius:8px;padding:5px 8px 0 30px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.09)}
.kc-stat svg{position:absolute;left:7px;top:9px;width:17px;height:17px;color:var(--c2)}
.kc-stat .l{font:700 8.5px Orbitron;letter-spacing:1.3px;color:rgba(255,255,255,.55)}
.kc-stat .v{font:700 15.5px/1 Rajdhani;margin-top:1px;color:#fff;letter-spacing:.3px}
.kc-stat .bar{position:absolute;left:30px;right:8px;bottom:4px;height:3px;border-radius:2px;background:rgba(255,255,255,.1)}
.kc-stat .bar i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,var(--c1),var(--c2));box-shadow:0 0 6px var(--c1)}
/* footer */
.kc-foot{position:absolute;z-index:4;left:9px;right:9px;bottom:7px;height:22px;display:flex;align-items:center;gap:6px;
  font:700 8.5px Orbitron;letter-spacing:1.1px;color:rgba(255,255,255,.62)}
.kc-foot img{width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 1px #c9a227,0 0 6px rgba(255,200,60,.5)}
.kc-foot .brand{line-height:1.15}.kc-foot .brand b{display:block;color:#f3d27a;font-weight:900;letter-spacing:1.5px}
.kc-foot .ser{margin-left:auto;text-align:right;line-height:1.15}.kc-foot .ser b{display:block;font:900 10px Orbitron;color:#fff;letter-spacing:1px}
/* foil / holo / shine */
.kc-foil,.kc-shine,.kc-holo,.kc-spark{position:absolute;inset:0;pointer-events:none;border-radius:inherit}
.kc-holo{z-index:2;opacity:0;mix-blend-mode:color-dodge}
.kc-foil{z-index:7;opacity:0;mix-blend-mode:overlay}
.kc-shine{z-index:8;overflow:hidden;border-radius:18px}
.kc-shine:before{content:"";position:absolute;top:-30%;bottom:-30%;width:42%;left:-60%;transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08) 30%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.08) 70%,transparent)}
.kcard.anim .kc-shine:before{animation:kcSweep 4.2s ease-in-out infinite}
.kcard.reveal .kc-shine:before{animation:kcSweep 1.1s ease-out 1}
@keyframes kcSweep{0%{left:-60%}55%,100%{left:130%}}
.kcard.still .kc-shine:before{left:74%;opacity:.45}
.kc-spark{z-index:5;overflow:hidden;border-radius:12px}
.kc-spark i{position:absolute;width:var(--sz,4px);height:var(--sz,4px);border-radius:50%;background:radial-gradient(circle,#fff 0,var(--pc,#ffe9a0) 40%,transparent 70%);
  left:var(--x);top:var(--y);opacity:var(--o,.9);animation:kcFloat var(--d,3s) linear var(--dl,0s) infinite}
.kc-spark i.st{border-radius:0;background:none;width:var(--sz);height:var(--sz)}
.kc-spark i.st:before,.kc-spark i.st:after{content:"";position:absolute;left:50%;top:50%;background:#fff;box-shadow:0 0 6px #fff,0 0 12px var(--pc)}
.kc-spark i.st:before{width:100%;height:2px;transform:translate(-50%,-50%)}.kc-spark i.st:after{height:100%;width:2px;transform:translate(-50%,-50%)}
@keyframes kcFloat{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:var(--o,.9)}100%{transform:translateY(-120px) scale(1.1);opacity:0}}
.kcard.still .kc-spark i{animation:none}
/* ---- tiers ---- */
.t-common{--c1:#9aa1b2;--c2:#eef0f5;--c3:#4a505e}
.t-uncommon{--c1:#16b981;--c2:#a7f3d0;--c3:#065f46;--glow:rgba(22,185,129,.25)}
.t-rare{--c1:#2f7bff;--c2:#bcd6ff;--c3:#123b8a;--glow:rgba(47,123,255,.38)}
.t-rare .kc-holo{opacity:.35;background:repeating-linear-gradient(115deg,transparent 0 9px,rgba(140,190,255,.35) 10px 11px,transparent 12px 22px)}
.t-epic{--c1:#9d4dff;--c2:#f0b8ff;--c3:#3b0f80;--glow:rgba(157,77,255,.5)}
.t-epic .kc-holo{opacity:.4;background:radial-gradient(1.5px 1.5px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 20%,#fff,transparent),radial-gradient(1.5px 1.5px at 40% 70%,#fff,transparent),radial-gradient(1px 1px at 85% 60%,#fff,transparent),radial-gradient(1px 1px at 10% 85%,#fff,transparent),linear-gradient(125deg,rgba(255,0,200,.18),rgba(0,180,255,.18) 40%,rgba(160,80,255,.2) 70%,rgba(255,120,240,.18))}
.t-epic .kc-foil{opacity:.35;background:linear-gradient(115deg,transparent 20%,rgba(255,120,255,.7) 35%,rgba(120,220,255,.7) 45%,transparent 60%);background-size:250% 100%;animation:kcHolo 5s linear infinite}
.t-legendary{--c1:#ff3b3b;--c2:#ffc37a;--c3:#6e0c0c;--glow:rgba(255,70,50,.6)}
.t-legendary .kc-frame{background:linear-gradient(135deg,#5a0808,#ff3b3b 18%,#ffd27a 32%,#ff6a2a 46%,#7a0b0b 60%,#ffb35a 78%,#e8261f)}
.t-legendary .kc-holo{opacity:.5;background:linear-gradient(0deg,rgba(255,90,20,.35),transparent 55%),repeating-linear-gradient(60deg,transparent 0 14px,rgba(255,200,120,.18) 15px 16px)}
.t-legendary .kc-foil{opacity:.4;background:linear-gradient(115deg,transparent 25%,rgba(255,220,140,.8) 40%,rgba(255,80,40,.6) 48%,transparent 62%);background-size:250% 100%;animation:kcHolo 4.5s linear infinite}
.t-grail{--c1:#e0a81e;--c2:#fff2b8;--c3:#7a4f00;--glow:rgba(255,196,40,.75);--ink:#2a1a00}
.t-grail .kc-frame{background:conic-gradient(from var(--ang,0deg),#ffd75e,#fff6cf,#ff9ad5,#9ee7ff,#c6ff9a,#ffe27a,#e0a81e,#fff6cf,#ffd75e);animation:kcSpin 6s linear infinite}
.t-grail .kc-inner{background:radial-gradient(120% 70% at 50% 0%,#3a2a05 0%,#0b0904 70%)}
.t-grail .kc-holo{opacity:.28;background:linear-gradient(125deg,rgba(255,0,150,.25),rgba(255,220,0,.25) 25%,rgba(0,255,170,.22) 50%,rgba(0,150,255,.25) 75%,rgba(255,0,200,.25));background-size:300% 300%;animation:kcHolo 6s linear infinite}
.t-grail .kc-foil{opacity:.55;background:linear-gradient(115deg,transparent 22%,rgba(255,255,255,.9) 38%,rgba(255,215,120,.9) 44%,rgba(160,240,255,.8) 50%,transparent 64%);background-size:250% 100%;animation:kcHolo 3.8s linear infinite}
.t-grail .kc-name{background:linear-gradient(180deg,#fffbe6 0%,#ffe48a 40%,#f2b21c 62%,#fff1b0 80%,#c88a00 100%);-webkit-background-clip:text;background-clip:text}
.t-grail .kc-stat,.t-legendary .kc-stat{border-color:color-mix(in srgb,var(--c1) 45%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--c1) 16%,transparent),rgba(255,255,255,.02))}
.t-grail .kc-tier{background:linear-gradient(90deg,#b07800,#ffe27a 40%,#fffbe0 60%,#f2b21c)}
.t-grail .kc-crownwm{position:absolute;z-index:3;right:-18px;bottom:14px;width:150px;opacity:.08}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes kcSpin{to{--ang:360deg}}
@keyframes kcHolo{0%{background-position:120% 0}100%{background-position:-120% 0}}
.kcard.still .kc-foil{animation:none;background-position:52% 0}
.kcard.still .kc-frame{animation:none}
/* card back */
.kback{position:relative;width:300px;height:420px;zoom:var(--z,1);border-radius:18px;padding:7px;flex:none;
  background:linear-gradient(135deg,#7a4f00,#ffd75e 25%,#fff3c2 40%,#c88a00 60%,#ffe27a 80%,#8a5a00);box-shadow:0 18px 40px rgba(0,0,0,.55)}
.kback .in{height:100%;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:radial-gradient(circle at 50% 42%,#3a1a6e 0,#160a33 45%,#07040f 100%);position:relative;overflow:hidden}
.kback .in:before{content:"";position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% 42%,rgba(255,215,94,.07) 0 6deg,transparent 6deg 12deg)}
.kback img{width:150px;height:150px;border-radius:50%;position:relative;box-shadow:0 0 0 3px #e0a81e,0 0 40px rgba(255,200,60,.55)}
.kback .t{position:relative;font:900 26px Cinzel;letter-spacing:4px;background:linear-gradient(180deg,#fff6cf,#f2b21c);-webkit-background-clip:text;color:transparent}
.kback .s{position:relative;text-align:center;padding:0 20px;line-height:1.6;font:700 10px Orbitron;letter-spacing:3px;color:#cdb7ff}

.kc-name.long{font-size:25px}.kc-name.xlong{font-size:22px}