.pi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:14px}.pi-tile{display:flex;flex-direction:column;gap:5px;text-decoration:none}.pi-tile:hover .pi-frame__sprite{transform:translateY(-3px) scale(1.03)}.pi-tile__name{font-size:13px;font-weight:600;line-height:1.25}.pi-tile__rarity{font-size:11.5px;font-weight:600}.pi-frame{--rarity:#9aa0aa;--rarity-deep:#5c616b;--rarity-glow:rgba(154,160,170,0.22);position:relative;isolation:isolate;display:block;aspect-ratio:1;border-radius:14px;overflow:hidden;background:radial-gradient(110% 80% at 50% 108%,var(--rarity-glow),transparent 64%),linear-gradient(180deg,#171a21,#0f1116);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 24px -18px rgba(0,0,0,.6)}.pi-frame--rare{--rarity:#4a90ff;--rarity-deep:#1f4fb8;--rarity-glow:rgba(74,144,255,0.3)}.pi-frame--epic{--rarity:#b06bff;--rarity-deep:#6a2fc2;--rarity-glow:rgba(176,107,255,0.34)}.pi-frame--legendary{--rarity:#ffc23d;--rarity-deep:#b8790e;--rarity-glow:rgba(255,194,61,0.36)}.pi-frame--mythic{--rarity:#ff4256;--rarity-deep:#a3101f;--rarity-glow:rgba(255,66,86,0.4)}.pi-frame:before{content:"";inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(150deg,var(--rarity),var(--rarity-deep) 38%,transparent 52%,var(--rarity-deep) 70%,var(--rarity));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}.pi-frame:before,.pi-frame__corners{position:absolute;z-index:2;pointer-events:none}.pi-frame__corners{inset:6px;--corner:10px;background:linear-gradient(var(--rarity),var(--rarity)) 0 0 /var(--corner) 2px no-repeat,linear-gradient(var(--rarity),var(--rarity)) 0 0 /2px var(--corner) no-repeat,linear-gradient(var(--rarity),var(--rarity)) 100% 0 /var(--corner) 2px no-repeat,linear-gradient(var(--rarity),var(--rarity)) 100% 0 /2px var(--corner) no-repeat,linear-gradient(var(--rarity),var(--rarity)) 0 100% /var(--corner) 2px no-repeat,linear-gradient(var(--rarity),var(--rarity)) 0 100% /2px var(--corner) no-repeat,linear-gradient(var(--rarity),var(--rarity)) 100% 100% /var(--corner) 2px no-repeat,linear-gradient(var(--rarity),var(--rarity)) 100% 100% /2px var(--corner) no-repeat;opacity:.85}.pi-frame__sprite{position:absolute;inset:6%;z-index:1;width:88%;height:88%;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.45)) drop-shadow(0 0 18px var(--rarity-glow));transition:transform .24s cubic-bezier(.2,.8,.2,1)}.pi-frame__badge{position:absolute;top:8px;right:8px;z-index:3;padding:1px 7px;border-radius:999px;font-size:11.5px;font-weight:600;color:#fff;background:rgba(10,12,16,.62)}.pi-frame--legendary:after,.pi-frame--mythic:after{content:"";position:absolute;inset:-40% -60%;z-index:1;pointer-events:none;background:linear-gradient(105deg,transparent 42%,rgba(255,236,170,.16) 50%,transparent 58%);transform:translateX(-60%);animation:pi-shine 5.5s cubic-bezier(.2,.8,.2,1) infinite}.pi-frame--mythic:after{background:linear-gradient(105deg,transparent 42%,rgba(255,150,160,.18) 50%,transparent 58%);animation-duration:4.2s}@property --pi-spin{syntax:"<angle>";inherits:false;initial-value:0deg}.pi-frame--mythic:before{padding:2px;background:conic-gradient(from var(--pi-spin),var(--rarity-deep),var(--rarity),#ffd0a0,var(--rarity),var(--rarity-deep),#3a0710,var(--rarity-deep));animation:pi-spin 6s linear infinite}@keyframes pi-shine{0%,55%{transform:translateX(-60%)}to{transform:translateX(60%)}}@keyframes pi-spin{to{--pi-spin:360deg}}@media (prefers-reduced-motion:reduce){.pi-frame--legendary:after,.pi-frame--mythic:after,.pi-frame--mythic:before{animation:none}}.pi-rarity--common{color:#8c929c}.pi-rarity--rare{color:#4a90ff}.pi-rarity--epic{color:#b06bff}.pi-rarity--legendary{color:#e3a520}.pi-rarity--mythic{color:#ff4256}