.card-frame{--grade:#9aa4b2;position:relative;width:180px;aspect-ratio:2/2.82;padding:4px;border-radius:18px;background:linear-gradient(145deg,var(--grade),#061327 38%,var(--grade));box-shadow:0 18px 46px rgba(0,0,0,.48),0 0 26px color-mix(in srgb,var(--grade) 42%,transparent);cursor:pointer;overflow:hidden;isolation:isolate;transition:.28s transform,.28s filter}.card-frame:hover{transform:translateY(-8px) scale(1.035);filter:brightness(1.08)}.card-frame.small{width:100%}.card-inner{position:relative;z-index:2;height:100%;padding:8px;border-radius:14px;background:linear-gradient(180deg,#0b1f43 0%,#061327 72%,#020817);border:1px solid rgba(255,255,255,.22);display:flex;flex-direction:column}.card-header{height:30px;display:flex;align-items:center;justify-content:space-between;padding:0 4px;color:white}.card-header span{font-size:16px;font-weight:1000;text-shadow:0 0 10px var(--grade)}.card-header b{font-size:9px;letter-spacing:2px;opacity:.65}.card-art{position:relative;flex:1;min-height:0;border-radius:10px;overflow:hidden;border:1px solid color-mix(in srgb,var(--grade) 70%,white);background:radial-gradient(circle,#123f72,#020817);box-shadow:inset 0 0 20px rgba(0,0,0,.35)}.card-art img{width:100%;height:100%;display:block;object-fit:cover;transition:.35s transform}.card-frame:hover .card-art img{transform:scale(1.035)}.card-footer{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 3px 0}.card-footer small{display:block;color:var(--grade);font-size:9px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:115px}.card-title{font-size:14px;font-weight:1000;line-height:1.15;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card-mini-logo{width:31px;height:22px;object-fit:contain;opacity:.72}.card-holo{position:absolute;z-index:4;inset:-60%;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.36) 48%,transparent 58%);transform:translateX(-45%) rotate(8deg);transition:.7s;pointer-events:none;mix-blend-mode:screen}.card-frame:hover .card-holo{transform:translateX(45%) rotate(8deg)}.card-frame:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 15px var(--grade);opacity:.45;pointer-events:none}.locked{--grade:#173454;filter:grayscale(.72);background:#020817}.locked .card-art{display:grid;place-items:center;background:linear-gradient(145deg,#061126,#0b1830)}.missing{font-size:64px;font-weight:1000;color:#315578;text-shadow:0 0 20px #0b4c7b}.grade-C{--grade:#aab4c2}.grade-U{--grade:#47e47e}.grade-R{--grade:#31adff}.grade-SR{--grade:#a868ff}.grade-HR{--grade:#ff5578}.grade-UR{--grade:#ffd65e}.grade-SSR{--grade:#74f4ff}.grade-SSR{background:conic-gradient(from 0deg,#74f4ff,#b46cff,#ffd65e,#74f4ff);animation:ssrBorder 3s linear infinite}.result-card{width:180px}.detail-card{width:330px;cursor:default}.detail-card:hover{transform:none}.detail-layout{display:grid;grid-template-columns:330px 1fr;gap:36px;align-items:center}.detail-info h2{font-size:36px;margin:12px 0 8px}.detail-info>p{color:#92c5df;line-height:1.7}.detail-grade{display:inline-grid;place-items:center;min-width:62px;height:42px;padding:0 14px;border-radius:12px;border:1px solid #69e9ff;background:#062652;color:#8ff5ff;font-size:20px;font-weight:1000}.obtained-date{padding:13px;border:1px solid rgba(98,232,255,.16);border-radius:12px;background:rgba(0,184,255,.06)}
@keyframes ssrBorder{to{filter:hue-rotate(360deg)}}
@media(max-width:767px){.card-inner{padding:5px}.card-header{height:24px}.card-header span{font-size:12px}.card-footer{min-height:46px}.card-title{font-size:11px}.card-footer small{font-size:8px;max-width:75px}.card-mini-logo{width:24px}.result-card{width:145px}.detail-card{width:230px}.detail-layout{grid-template-columns:1fr;gap:18px}.detail-info{text-align:center}.detail-info h2{font-size:27px}}