.card{--mx: 50;--my: 50;--rx: 0deg;--ry: 0deg;--active: 0;--rarity: var(--color-common);--mat: 4.5cqw;position:relative;aspect-ratio:5 / 7;width:100%;max-width:17rem;perspective:1000px;user-select:none;-webkit-user-select:none;isolation:isolate;container-type:inline-size}.card__inner{position:relative;height:100%;width:100%;overflow:hidden;border-radius:var(--radius-card);border:1.2cqw solid var(--rarity);background:var(--color-surface-raised);transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;box-shadow:0 0 0 4px var(--color-ground),0 0 0 5px color-mix(in srgb,var(--rarity) 28%,transparent),0 24px 50px #0009,0 0 calc(var(--active) * 3rem) color-mix(in srgb,var(--rarity) 40%,transparent);transition:transform .12s ease-out,box-shadow .2s ease-out}.card__mat{position:absolute;inset:0;display:flex;flex-direction:column;gap:var(--mat);padding:var(--mat)}.card__window{position:relative;flex:1;min-height:0;overflow:hidden;border-radius:calc(var(--radius-card) * .6);background:var(--color-surface-sunken);box-shadow:inset 0 0 0 .4cqw #0000008c}.card__art{position:absolute;inset:0;height:100%;width:100%;object-fit:cover}.card__initials{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--color-surface-raised);color:var(--color-border-strong);font-family:var(--font-display);font-size:30cqw;letter-spacing:.04em}.card__plate{position:relative;z-index:3;flex:none;min-height:0}.card__title{font-family:var(--font-display);font-size:9cqw;line-height:.95;text-transform:uppercase;color:var(--color-ink);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.card__subtitle{margin-top:1.5cqw;font-family:var(--font-mono);font-size:3.6cqw;letter-spacing:.12em;text-transform:uppercase;color:var(--color-ink-muted)}.card__kind{position:absolute;top:calc(var(--mat) + 2.2cqw);left:calc(var(--mat) + 2.2cqw);z-index:4;padding:1.2cqw 2.4cqw;border-radius:999px;background:#06050bb8;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);font-family:var(--font-mono);font-size:3.2cqw;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--color-ink)}.card__badge{position:absolute;top:calc(var(--mat) + 2.2cqw);right:calc(var(--mat) + 2.2cqw);z-index:4;display:flex;min-width:8cqw;height:8cqw;align-items:center;justify-content:center;padding:0 1.4cqw;border-radius:999px;border:.6cqw solid var(--rarity);background:#06050bd1;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);font-family:var(--font-mono);font-size:3.4cqw;font-weight:500;letter-spacing:.04em;color:var(--rarity);box-shadow:0 0 2cqw color-mix(in srgb,var(--rarity) 45%,transparent)}.card--full-art,.card--full-holo{--mat: 0cqw}.card--full-art .card__window,.card--full-holo .card__window{border-radius:0;box-shadow:none}.card--full-art .card__title,.card--full-holo .card__title{font-size:9cqw;-webkit-line-clamp:3}.card--full-art .card__plate,.card--full-holo .card__plate{position:absolute;inset:auto 0 0;z-index:2;padding:26cqw 4.6cqw 4.6cqw;background:linear-gradient(#06050b00,#06050beb 60%)}.card--full-art .card__title,.card--full-holo .card__title{color:#fff}.card--full-art .card__subtitle,.card--full-holo .card__subtitle{color:#cfc9e4}.card__wordmark{display:none}.card--full-art .card__wordmark,.card--full-holo .card__wordmark{position:absolute;inset:38% 0 auto;z-index:1;display:block;text-align:center;font-family:var(--font-display);font-size:16cqw;letter-spacing:.08em;text-transform:uppercase;color:#ffffff12;mix-blend-mode:overlay;pointer-events:none}.card__glare{position:absolute;inset:0;z-index:1;background:radial-gradient(circle at calc(var(--mx) * 1%) calc(var(--my) * 1%),rgb(255 255 255 / .45),rgb(255 255 255 / .1) 25%,transparent 55%);mix-blend-mode:overlay;opacity:var(--active);transition:opacity .2s ease-out;pointer-events:none}.card__holo{position:absolute;display:none;background-image:repeating-linear-gradient(0deg,#ff008480 5%,#fff60080,#00ff8480,#0099ff80,#cc00ff80,#ff008480 30%),repeating-linear-gradient(125deg,#0e152e,#8fa3a3 4%,#8fc1c1,#8fa3a3 6%,#0e152e 10% 12%);background-blend-mode:color-dodge;background-size:100% 200%,200% 200%;background-position:0 calc(var(--my) * 1%),calc(var(--mx) * 1%) calc(var(--my) * 1%);mix-blend-mode:color-dodge;opacity:calc(.3 + var(--active) * .4);transition:opacity .2s ease-out;pointer-events:none}.card--holo .card__holo--art,.card--full-holo .card__holo--art{display:block;inset:0;z-index:2}.card--reverse .card__holo--frame{display:block;inset:0;z-index:2;padding:var(--mat);box-sizing:border-box;-webkit-mask-image:linear-gradient(#000,#000),linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000),linear-gradient(#000,#000);mask-clip:border-box,content-box;-webkit-mask-composite:xor;mask-composite:exclude}.card__slick{position:absolute;display:none;inset:0;z-index:2;background:conic-gradient(from calc(var(--mx) * 3.6deg) at calc(var(--mx) * 1%) calc(var(--my) * 1%),#e8579c,#f0c04a,#3fd0e0,#c77dff,#e8579c);mix-blend-mode:color-dodge;opacity:calc(.1 + var(--active) * .22);transition:opacity .2s ease-out;pointer-events:none}.card--holo .card__slick,.card--full-holo .card__slick{display:block}.card__gild{display:none}.card--full-holo .card__inner{border-color:transparent}.card--full-holo .card__gild{position:absolute;display:block;inset:0;z-index:4;border-radius:inherit;padding:1.4cqw;background:conic-gradient(from calc(var(--mx) * 3.6deg),#f0c04a,#fff6d0,#e8579c,#f0c04a,#fff6d0,#f0c04a);-webkit-mask-image:linear-gradient(#000,#000),linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000),linear-gradient(#000,#000);mask-clip:border-box,content-box;-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.card--full-holo .card__holo{opacity:calc(.4 + var(--active) * .45)}@media(prefers-reduced-motion:reduce){.card__inner{transform:none;transition:none}.card__glare,.card__holo,.card__slick{transition:none}}.card-back{position:relative;aspect-ratio:5 / 7;width:100%;max-width:17rem;container-type:inline-size}.card-back__inner{display:flex;height:100%;width:100%;align-items:center;justify-content:center;border-radius:var(--radius-card);border:1.5px solid var(--color-border-strong);background:repeating-linear-gradient(45deg,transparent 0 8px,rgb(255 255 255 / .02) 8px 16px),radial-gradient(circle at 50% 35%,#2a2740,#13121f 70%);box-shadow:0 0 0 4px var(--color-ground),0 24px 50px #0009}.card-back__mark{width:52cqw;height:52cqw;color:color-mix(in srgb,var(--color-accent) 35%,transparent);filter:drop-shadow(0 2px 20px rgb(0 0 0 / .6))}.flip{display:grid;transform-style:preserve-3d}.flip>*{grid-area:1 / 1;backface-visibility:hidden}.flip__back{transform:rotateY(180deg)}.card__window{background-size:cover;background-position:center}