.cardart{--s:1;justify-content:center;align-items:center;width:100%;height:100%;display:flex;container-type:size}.cardart-card{box-sizing:border-box;height:calc(86cqh * var(--s));aspect-ratio:5/7;align-items:center;gap:calc(1cqh * var(--s));padding:calc(2.5cqh * var(--s)) calc(3.5cqh * var(--s)) calc(4cqh * var(--s));border:calc(3cqh * var(--s)) solid transparent;border-radius:calc(4.5cqh * var(--s));background:radial-gradient(circle at 50% 34%, hsl(var(--h) 55% 30%), hsl(var(--h) 50% 16%) 60%, hsl(var(--h) 45% 10%)) padding-box, linear-gradient(150deg, hsl(var(--h) 85% 66%), hsl(calc(var(--h) + 28) 75% 50%) 55%, hsl(calc(var(--h) + 56) 78% 38%)) border-box;text-align:left;flex-direction:column;display:flex;position:relative;overflow:hidden;box-shadow:0 6px 16px -6px #0009}:is(.tile,.fan,.holo):hover .cardart-card:after,.fan-card .cardart-card:after{content:"";border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,30%), #ffffff47, transparent 45%), linear-gradient(115deg, transparent 30%, hsl(calc(var(--h) + 120) 100% 70% / .35) 42%, hsl(calc(var(--h) + 200) 100% 75% / .4) 50%, hsl(calc(var(--h) + 280) 100% 70% / .35) 58%, transparent 70%);mix-blend-mode:color-dodge;background-position:0 0,-20% 0;background-size:100% 100%,250% 250%;position:absolute;inset:0}.fan-card .cardart-card:after{opacity:.55}.fan:hover .cardart-card:after{opacity:1}@media (prefers-reduced-motion:no-preference){:is(.tile,.fan,.holo):hover .cardart-card:after{animation:cardart-sheen 1.1s var(--ease-out-soft) both}}@keyframes cardart-sheen{0%{opacity:0;background-position:0 0,120% 0}to{background-position:0 0,-20% 0}}.cardart-icon{box-sizing:border-box;width:calc(28cqh * var(--s));height:calc(28cqh * var(--s));padding:calc(6.5cqh * var(--s));border:calc(.8cqh * var(--s)) solid hsl(var(--h) 80% 70% / .45);background:radial-gradient(circle, hsl(var(--h) 85% 65% / .4), hsl(var(--h) 85% 65% / .08) 70%);color:hsl(var(--h) 90% 84%);border-radius:999px;margin:auto 0}.cardart-name{-webkit-line-clamp:3;width:100%;font-family:var(--font-display);font-size:calc(5.2cqh * var(--s));color:var(--color-ink);-webkit-box-orient:vertical;font-weight:700;line-height:1.15;display:-webkit-box;overflow:hidden}.cardart-set{white-space:nowrap;text-overflow:ellipsis;width:100%;font-size:calc(4cqh * var(--s));color:var(--color-ink-2);overflow:hidden}.cardart-case{--s:.86;box-sizing:border-box;aspect-ratio:5/7.6;border:1px solid color-mix(in srgb, var(--color-ink-3) 55%, transparent);background:linear-gradient(160deg, color-mix(in srgb, var(--color-ink) 16%, transparent), color-mix(in srgb, var(--color-ink) 4%, transparent));border-radius:5cqh;flex-direction:column;align-items:center;gap:2cqh;min-width:0;height:94cqh;padding:2.5cqh;display:flex;box-shadow:0 6px 16px -6px #0009}.cardart-label{box-sizing:border-box;border:1px solid var(--color-line-strong);background:var(--color-panel);width:100%;color:var(--color-ink-2);border-radius:2cqh;justify-content:space-between;align-items:baseline;gap:2cqh;padding:1.5cqh 3cqh;font-size:4cqh;font-weight:600;display:flex}.cardart-label span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.cardart-label b{font-family:var(--font-display);color:var(--color-brand-yellow);flex-shrink:0;font-size:5.5cqh}.cardart-case .cardart-card{flex:1;min-width:0;max-width:100%;height:auto;min-height:0}
