.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--grid-min),1fr));gap:var(--gap)}@media(max-width:520px){.grid{grid-template-columns:repeat(2,1fr);gap:.75rem}}.card{--mx:50%;--my:50%;--rx:0deg;--ry:0deg;--o:0;perspective:900px;aspect-ratio:var(--card-ratio);position:relative}.card-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.7,.2,1);transform:rotateX(var(--rx)) rotateY(var(--ry))}.card.flipped .card-inner{transform:rotateY(180deg)}.face{position:absolute;inset:0;border-radius:var(--radius-card);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:var(--shadow-card)}.front{cursor:pointer;border:3px solid var(--c-sr);background:#000;padding:0;display:block;width:100%;height:100%}.card[data-rarity=SSR] .front{border-color:var(--c-ssr)}.front img{width:100%;height:100%;object-fit:cover;display:block}.front .label{position:absolute;left:0;right:0;bottom:0;padding:.6rem .7rem;background:linear-gradient(transparent,#000000bf);color:#fff;text-align:left;font-weight:700;font-size:.9rem}.badge{position:absolute;top:.5rem;left:.5rem;padding:.1rem .5rem;border-radius:6px;font-weight:900;font-size:.8rem;background:var(--c-sr);color:#112;z-index:3}.card[data-rarity=SSR] .badge{background:var(--foil-ssr);background-size:300% 100%}.foil,.glare{position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:2}.foil{background:var(--foil-sr);background-size:250% 250%;background-position:var(--mx) var(--my);mix-blend-mode:color-dodge;opacity:calc(var(--foil-sr-opacity) * (.4 + var(--o)))}.card[data-rarity=SSR] .foil{background:var(--foil-ssr),radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.4),transparent 50%);background-size:400% 400%,100% 100%;background-position:var(--mx) var(--my),0 0;mix-blend-mode:color-dodge;opacity:calc(var(--foil-ssr-opacity) * (.5 + var(--o)))}.glare{background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.55),transparent 45%);mix-blend-mode:overlay;opacity:var(--o);transition:opacity .3s}.card.locked .front img{filter:blur(18px) brightness(.55) saturate(.4);transform:scale(1.15)}.lock{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:.4rem;z-index:3;color:#fff;font-weight:700;text-shadow:0 2px 6px #000}.lock .icon{font-size:2.2rem}.back{transform:rotateY(180deg);background:linear-gradient(160deg,var(--c-surface),var(--c-bg-2));border:3px solid var(--c-sr);padding:1rem;display:flex;flex-direction:column;gap:.6rem;justify-content:space-between}.card[data-rarity=SSR] .back{border-color:var(--c-ssr)}.back h3{margin:0;font-size:1rem}.back p{margin:0;font-size:.85rem;color:var(--c-muted);overflow:auto}.back .actions{display:flex;flex-direction:column;gap:.4rem}.back .btn{font-size:.85rem;text-align:center;padding:.5rem}@media(prefers-reduced-motion:reduce){.card-inner{transform:none!important}.card.flipped .card-inner{transform:rotateY(180deg)!important}.glare{display:none}}dialog{border:0;border-radius:var(--radius-ui);background:var(--c-surface);color:var(--c-text);max-width:min(92vw,440px);padding:1.5rem}dialog::backdrop{background:#0a0514cc;backdrop-filter:blur(4px)}dialog .row{display:flex;gap:.6rem;justify-content:flex-end;flex-wrap:wrap;margin-top:1rem}.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}.gal button{padding:0;border:0;border-radius:var(--radius-ui);overflow:hidden;cursor:zoom-in;background:none}.gal img{width:100%;height:auto;display:block}dialog.lightbox{max-width:96vw;max-height:96vh;padding:.5rem;background:#000}dialog.lightbox img{max-width:92vw;max-height:80vh;display:block;margin:auto}dialog.lightbox .row{justify-content:center}.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}.chip{font:inherit;min-height:40px;padding:.3rem .9rem;border-radius:999px;border:1px solid var(--c-muted);background:transparent;color:var(--c-text);cursor:pointer}.chip[aria-pressed=true]{background:var(--c-accent);color:#200;border-color:var(--c-accent)}.card[hidden]{display:none}.card[data-rarity=UR] .front,.card[data-rarity=UR] .back{border:3px solid transparent;background:var(--border-ur) border-box}.card[data-rarity=UR] .front img{border-radius:calc(var(--radius-card) - 3px)}.card[data-rarity=UR] .badge{background:var(--foil-ur-gold);color:#3a2500;box-shadow:0 0 10px var(--c-ur)}.card[data-rarity=UR] .foil{background:var(--foil-ur),var(--foil-ur-gold),radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.6),transparent 45%);background-size:300% 300%,300% 300%,100% 100%;background-position:var(--mx) var(--my),calc(100% - var(--mx)) calc(100% - var(--my)),0 0;background-blend-mode:hue,overlay,normal;mix-blend-mode:color-dodge;opacity:calc(var(--foil-ur-opacity) * (.35 + var(--o) * .8))}.card[data-rarity=UR]{filter:drop-shadow(0 0 14px rgba(255,233,168,.45))}.sparkle{position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:var(--radius-card);background-image:radial-gradient(circle,var(--sparkle-ur) 0 1.5px,transparent 2.5px),radial-gradient(circle,var(--sparkle-ur) 0 1px,transparent 2px);background-size:47px 53px,31px 37px;background-position:var(--mx) var(--my),calc(100% - var(--mx)) var(--my);mix-blend-mode:screen;opacity:calc(.25 + var(--o) * .6);animation:twinkle 2.4s ease-in-out infinite alternate}.card.flipped .sparkle{opacity:.15}@keyframes twinkle{0%{filter:brightness(.6)}to{filter:brightness(1.6)}}.front .label{z-index:4}.card[data-rarity=UR] .foil{mix-blend-mode:overlay}.gal img{aspect-ratio:4/5;object-fit:cover}.card[data-rarity=R] .front,.card[data-rarity=R] .back{border-color:var(--c-r)}.card[data-rarity=R] .badge{background:var(--c-r)}.card[data-rarity=R] .foil{opacity:calc(var(--foil-sr-opacity) * .4 * (.4 + var(--o)))}.card{--o:0;--mx:50%;--my:50%}.card .card-inner{transition:transform .25s ease-out}.card[data-rarity=UR] .glare{background:linear-gradient(115deg,transparent 20%,rgba(255,80,160,.55) calc(var(--mx) - 22%),rgba(255,220,90,.55) calc(var(--mx) - 8%),rgba(110,255,190,.55) var(--mx),rgba(90,170,255,.55) calc(var(--mx) + 10%),rgba(200,120,255,.55) calc(var(--mx) + 22%),transparent 80%),radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.6),transparent 40%);mix-blend-mode:color-dodge;opacity:calc(var(--o) * .75)}.card[data-rarity=SSR] .glare{background:radial-gradient(circle at var(--mx) var(--my),rgba(255,236,170,.85),rgba(232,180,80,.45) 22%,transparent 50%),linear-gradient(115deg,transparent calc(var(--mx) - 18%),rgba(255,215,120,.35) var(--mx),transparent calc(var(--mx) + 18%));mix-blend-mode:overlay;opacity:calc(var(--o) * .9)}.card[data-rarity=SR] .glare,.card[data-rarity=R] .glare{background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.35),transparent 42%);opacity:calc(var(--o) * .45)}.card[data-rarity=R] .glare{opacity:calc(var(--o) * .3)}.card.tilt-drag{touch-action:pan-y}@media(prefers-reduced-motion:reduce){.card .glare{display:none}.card .card-inner{transition:none}}
