.sc{--paper: #ebe2cd;--brown: #221c14;--soul: #9ff0ff;--t-common: #c3c8d2;--t-rare: #4f9bff;--t-epic: #b072ff;--t-legendary: #ff9a32;--tc: var(--t-common);--noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");position:relative;width:25em;height:35em;border-radius:1.3em;flex:none;box-sizing:border-box;box-shadow:0 1.2em 2.6em #000d,0 0 0 .08em #000a;font-family:var(--text);transform-style:preserve-3d;transition:transform .25s ease-out;will-change:transform;text-align:left}@property --u{syntax: "<length>"; inherits: true; initial-value: 0px;}.sc{--u: 1em}.sc *,.sc *:before,.sc *:after{box-sizing:border-box;margin:0;padding:0}.sc.r-rare{--tc: var(--t-rare)}.sc.r-epic{--tc: var(--t-epic)}.sc.r-legendary{--tc: var(--t-legendary)}.sc .rim{position:absolute;inset:0;border-radius:1.3em;overflow:hidden;background:linear-gradient(160deg,#26221c,#14110d 50%,#221d17);box-shadow:inset 0 0 0 .1em #000,inset 0 0 0 .3em var(--tc),inset 0 0 0 .42em #0009}.sc.r-common .rim{box-shadow:inset 0 0 0 .1em #000,inset 0 0 0 .22em var(--tc),inset 0 0 0 .34em #0009}.sc.r-epic{box-shadow:0 1.2em 2.6em #000d,0 0 1.4em #b072ff44}.sc.r-legendary{box-shadow:0 1.2em 2.6em #000d,0 0 0 .1em #ff9a3288,0 0 2.2em #ff9a3288}.sc .face{position:absolute;inset:.95em;border-radius:.65em;overflow:hidden;background:var(--paper);color:var(--brown)}.sc .face:before{content:"";position:absolute;inset:0;background:var(--noise);opacity:.35;mix-blend-mode:multiply;pointer-events:none}.sc.ult .face{background:#17171a;color:var(--paper)}.sc.ult .face:before{mix-blend-mode:overlay;opacity:.5}.sc .corner{position:absolute;z-index:3;width:2.9em;height:2.9em;opacity:.95;pointer-events:none;color:var(--tc)}.sc .corner svg{width:100%;height:100%;display:block}.sc.r-common .corner{width:2.2em;height:2.2em}.sc.r-epic .corner,.sc.r-legendary .corner{width:3.3em;height:3.3em}.sc .name{position:absolute;left:calc(var(--u) * .75);right:calc(var(--u) * 4.4);top:calc(var(--u) * .5);font:400 2.6em/1.05 var(--display);text-transform:uppercase;letter-spacing:.005em;white-space:nowrap}.sc .name.long{font-size:2.15em;top:calc(var(--u) * .35);letter-spacing:-.01em}.sc.ult .name{right:calc(var(--u) * 7.2)}.sc.ult .name.long{font-size:1.6em;top:calc(var(--u) * .6);right:calc(var(--u) * 4.2)}.sc .cost{position:absolute;right:calc(var(--u) * .5);top:calc(var(--u) * .3);width:calc(var(--u) * 3.2);height:calc(var(--u) * 3.2);border-radius:50%;display:grid;place-items:center;z-index:2;background:radial-gradient(circle at 40% 35%,#fff,var(--soul) 45%,#1d8ea3 100%);box-shadow:0 0 .6em #2aa3b8,inset 0 -.2em .3em #0006,0 0 0 .12em #0b2a30;font:400 2em/1 var(--display);color:#062a31}.sc .cost>span{font-size:.9em}.sc .cost .res{position:absolute;left:50%;top:100%;width:calc(var(--u) * 1.7);height:calc(var(--u) * 1.7);margin:calc(var(--u) * -.45) 0 0 calc(var(--u) * -.85);border-radius:50%;background:#121318;box-shadow:0 0 0 .05em #9ff0ff99,0 .05em .15em #000a;display:grid;place-items:center}.sc .cost .res svg{width:72%;height:72%;display:block}.sc .cost.full{font-size:1em;width:auto;height:auto;border-radius:0;background:none;box-shadow:none;display:flex;align-items:center;gap:.35em;top:calc(var(--u) * .55)}.sc .cost.full .gauge{width:calc(var(--u) * 2.5);height:calc(var(--u) * 2.5);display:block;filter:drop-shadow(0 0 .25em #9ff0ff)}.sc .cost.full b{font:400 1.35em/1 var(--display);letter-spacing:.06em;color:#062a31;background:var(--soul);padding:.3em .4em .22em;border-radius:.2em;box-shadow:0 0 .7em #2aa3b8}.sc .art{position:absolute;left:.6em;right:.6em;top:3.95em;height:16.5em;border-radius:.3em;overflow:hidden;background:#0a0b0e;box-shadow:0 0 0 .14em var(--brown)}.sc.ult .art{box-shadow:0 0 0 .14em #9ff0ff88}.sc.r-rare .art,.sc.r-epic .art{box-shadow:0 0 0 .14em var(--tc)}.sc .art svg{position:absolute;inset:0;width:100%;height:100%;display:block}.sc .art:after{content:"";position:absolute;inset:0;background:var(--noise);opacity:.45;mix-blend-mode:overlay;pointer-events:none}.sc .art:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,#0000 60%,#0009)}.sc .typeline{position:absolute;left:calc(var(--u) * .8);right:calc(var(--u) * .8);top:calc(var(--u) * 21.15);display:flex;align-items:center;gap:.6em;font:700 .95em/1 var(--label);letter-spacing:.2em;white-space:nowrap;text-transform:uppercase}.sc .typeline .rl{flex:1;height:.1em;background:currentColor;opacity:.45}.sc.ult .typeline .kind{color:var(--soul)}.sc .rb{display:inline-flex;align-items:center;gap:.35em;padding:.25em .55em .2em .35em;border-radius:.3em;background:#15120e;color:var(--tc);border:.1em solid var(--tc);font:700 1em/1 var(--label);letter-spacing:.12em}.sc .rb svg{width:1.2em;height:1.2em;display:block;filter:drop-shadow(0 0 .2em var(--tc))}.sc .eff{position:absolute;left:calc(var(--u) * .8);right:calc(var(--u) * .8);top:calc(var(--u) * 23.1);font:700 1.12em/1.32 var(--text);letter-spacing:-.01em}.sc .flav{position:absolute;left:calc(var(--u) * 1.1);right:calc(var(--u) * 1.1);top:calc(var(--u) * 28.9);font:400 .95em/1.2 var(--type);opacity:.7}.sc .foot{position:absolute;left:calc(var(--u) * .8);right:calc(var(--u) * .8);bottom:calc(var(--u) * .55);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;font:700 .72em/1 var(--label);letter-spacing:.18em;text-transform:uppercase;opacity:.6}.sc .foot .no b{font:400 1.7em/1 var(--display);letter-spacing:.04em;margin-right:.3em}.sc .foot .set{width:1.6em;height:1.6em;display:block}.sc .foot .area{text-align:right}@property --hx{syntax: "<percentage>"; inherits: true; initial-value: 30%;}@property --gx{syntax: "<percentage>"; inherits: true; initial-value: 35%;}@property --gy{syntax: "<percentage>"; inherits: true; initial-value: 25%;}.sc .glare{position:absolute;inset:0;z-index:4;border-radius:1.3em;pointer-events:none;mix-blend-mode:soft-light;background:radial-gradient(circle at var(--gx) var(--gy),#ffffffb0,#fff0 48%),linear-gradient(115deg,#fff0 calc(var(--hx) - 18%),#ffffff55 var(--hx),#fff0 calc(var(--hx) + 18%))}.sc.idle{animation:sc-sway 4.8s ease-in-out infinite alternate}@keyframes sc-sway{0%{transform:perspective(60em) rotateY(-9deg) rotateX(4deg);--hx: 10%;--gx: 20%;--gy: 22%}to{transform:perspective(60em) rotateY(9deg) rotateX(-3deg);--hx: 90%;--gx: 80%;--gy: 40%}}@media(prefers-reduced-motion:reduce){.sc.idle{animation:none}}#cardshow{position:fixed;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:max(16px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom));box-sizing:border-box;background:radial-gradient(ellipse 70% 55% at 50% 42%,#2a2216cc,#050407f2 70%);color:var(--cream);font-family:var(--text);animation:cs-in .35s ease-out;cursor:default;user-select:none;-webkit-user-select:none;touch-action:none}#cardshow[hidden]{display:none}#cardshow.out{animation:cs-out .48s ease-in forwards}@keyframes cs-in{0%{opacity:0}}@keyframes cs-out{to{opacity:0}}#cardshow .cs-lamp{position:absolute;left:50%;top:0;width:min(520px,120vw);height:70%;transform:translate(-50%);pointer-events:none;background:radial-gradient(ellipse 45% 60% at 50% 0%,#ead7a455,#ead7a400 70%)}#cardshow .cs-kick{position:relative;font:700 13px / 1 var(--label);letter-spacing:.26em;text-transform:uppercase;color:var(--lamp);opacity:.85}#cardshow .cs-card{position:relative;filter:drop-shadow(0 0 28px #9ff0ff33)}#cardshow .cs-cap{position:relative;max-width:340px;text-align:center}#cardshow .cs-cap b{display:block;font:400 34px / 1 var(--display);letter-spacing:.03em;text-transform:uppercase;color:var(--cream);text-shadow:0 1px 0 #000}#cardshow .cs-cap span{display:block;margin-top:8px;font:700 17px / 1.3 var(--text);color:rgb(var(--cream-rgb) / .85)}#cardshow .cs-take{position:relative;width:min(340px,100%);height:64px;display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:4px;background:var(--ink);color:var(--lamp);box-shadow:inset 0 0 0 2px var(--lamp),0 0 18px #ead7a433;font:400 32px / 1 var(--display);letter-spacing:.05em;text-transform:uppercase;cursor:pointer}#cardshow .cs-take .k{font:400 15px / 1 var(--display);letter-spacing:.12em;padding:6px 7px 4px;border:1.5px solid var(--lamp);border-radius:3px}#cardshow .cs-take .k[hidden]{display:none}@media(max-height:700px){#cardshow{gap:12px}#cardshow .cs-cap b{font-size:28px}#cardshow .cs-take{height:56px;font-size:28px}}
