.relic{--w:230px;--edge:var(--bone);--tint:var(--bone);perspective:900px;width:var(--w);flex:none}.relic-lg{--w:min(300px, 78vw)}.relic-sm{--w:158px}.relic-card{--rx:0deg;--ry:0deg;background:var(--ink);border:1px solid var(--edge);outline:1px solid var(--bone-4);outline-offset:3px;transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;gap:8px;padding:10px 10px 9px;transition:transform .26s cubic-bezier(.2,.7,.2,1);display:grid;position:relative;overflow:hidden}.relic-top{border-bottom:1px solid var(--bone-4);justify-content:space-between;align-items:baseline;gap:8px;padding-bottom:4px;display:flex}.relic-numeral{font-size:calc(var(--w) * .12);color:var(--tint);line-height:1}.relic-suit{color:var(--tint);align-items:center;gap:5px;font-size:9.5px;display:inline-flex}.relic-art{border:1px solid var(--bone-4);position:relative}.relic-art canvas{aspect-ratio:132/156;width:100%;height:auto;image-rendering:pixelated;display:block}.relic-coords{color:var(--bone);background:var(--ink);padding:0 3px;font-size:8.5px;position:absolute;bottom:4px;left:5px}.relic-name{font-size:calc(var(--w) * .088);text-align:center;color:var(--tint);text-wrap:balance;place-items:center;min-height:2.1em;line-height:1.05;display:grid}.relic-sm .relic-name{font-size:15px}.relic-foot{border-top:1px solid var(--bone-4);justify-content:space-between;padding-top:5px;font-size:9px;display:flex}.relic-grade{color:var(--tint)}.relic-sheen{pointer-events:none;background:radial-gradient(circle at calc(var(--mx) * 100%) calc(var(--my) * 100%), #e9e4d48c, transparent 42%);-webkit-mask-image:var(--dots-25);-webkit-mask-image:var(--dots-25);mask-image:var(--dots-25);opacity:0;transition:opacity .2s;position:absolute;inset:0;-webkit-mask-size:4px 4px;mask-size:4px 4px}.relic-card:hover .relic-sheen{opacity:1}.relic[data-grade=LEGENDARY]{--edge:var(--signal);--tint:var(--signal)}.relic[data-grade=LEGENDARY] .relic-sheen{opacity:1;background:conic-gradient(from calc(var(--mx) * 360deg) at calc(var(--mx) * 100%) calc(var(--my) * 100%), #ff4a1c99, transparent 25%, #e9e4d480 50%, transparent 75%, #ff4a1c99)}.relic[data-grade=EPIC]{--edge:var(--bone);--tint:var(--bone)}.relic[data-grade=EPIC] .relic-card{outline:1px solid var(--bone-2);box-shadow:inset 0 0 0 3px var(--ink), inset 0 0 0 4px var(--bone-3)}.relic[data-grade=EPIC] .relic-sheen{opacity:.7;background:linear-gradient(calc(var(--mx) * 180deg + 20deg), transparent 25%, #e9e4d480 48%, transparent 70%)}.relic[data-grade=RARE]{--edge:var(--bone)}.relic[data-grade=COMMON]{--edge:var(--bone-3);--tint:var(--bone-2)}.relic[data-grade=FRAGMENT]{--edge:var(--bone-3);--tint:var(--bone-3)}.relic[data-grade=FRAGMENT] .relic-card{clip-path:polygon(0 0,100% 0,100% 62%,93% 66%,100% 71%,100% 100%,0 100%,0 38%,6% 35%,0 31%);border-style:dashed}.relic[data-foil]{--edge:var(--gold)}.relic[data-foil]:not([data-grade=LEGENDARY]){--tint:var(--gold)}.relic[data-foil] .relic-card{outline-color:var(--gold)}.relic[data-foil] .relic-sheen{opacity:1;background:linear-gradient(calc(var(--mx) * 120deg + 100deg), transparent 30%, #e7c46abf 46%, #fff4d699 50%, #e7c46abf 54%, transparent 70%), radial-gradient(circle at calc(var(--mx) * 100%) calc(var(--my) * 100%), #e7c46a59, transparent 50%);background-size:260% 260%,100% 100%;animation:3.6s ease-in-out infinite foil-sweep}@keyframes foil-sweep{0%{background-position:120% 0,0 0}55%,to{background-position:-20% 0,0 0}}.relic-stamp{letter-spacing:.22em;color:var(--ink);background:var(--gold);pointer-events:none;z-index:2;padding:2px 34px;font-size:8.5px;position:absolute;bottom:30%;right:-36px;rotate:-38deg}.relic-sm .relic-stamp{font-size:7px;right:-36px}.relic-flip .relic-card{animation:1.3s cubic-bezier(.2,.75,.15,1) both relic-flip}@keyframes relic-flip{0%{filter:brightness(3);opacity:0;transform:rotateY(-180deg)scale(.6)}40%{opacity:1}to{filter:brightness();transform:rotateY(0)scale(1)}}.relic[data-grade=ARCHIVE]{--edge:var(--bone-3);--tint:var(--bone-2)}