/* Shared, validated full-art template. No generated card bitmap. */
.card{container-type:inline-size;isolation:isolate;border:1px solid color-mix(in srgb,var(--accent),white 25%);border-radius:18px;background:linear-gradient(130deg,color-mix(in srgb,var(--accent),white 22%),color-mix(in srgb,var(--accent),#354354 35%) 15%,color-mix(in srgb,var(--accent),white 15%) 31%,color-mix(in srgb,var(--accent),#273746 48%) 48%,var(--accent) 70%,color-mix(in srgb,var(--accent),#334558 35%) 85%,color-mix(in srgb,var(--accent),white 25%));box-shadow:0 20px 45px #0008,inset 0 0 0 2px #d8e3ea33,0 0 22px color-mix(in srgb,var(--accent),transparent 91%);overflow:hidden}.card.r{--accent:#b8cbd9}.card.sr{--accent:#8ebfec}.card.ssr{--accent:#c79cf3}.card.ur{--accent:#e4c481;box-shadow:0 20px 45px #0008,inset 0 0 0 2px #fff1c433,0 0 30px #e2bd5526}.card:after{display:none}.art-well{position:absolute;inset:2.25cqw;border-radius:3.85cqw;overflow:hidden;background:#0c1928;border:1px solid color-mix(in srgb,var(--accent),transparent 35%)}.card .art,.card.cover .art{position:absolute;inset:0 0 auto;width:100%;height:77%;object-fit:cover;transform:translate(var(--px,0px),var(--py,0px)) scale(1.04);filter:saturate(.86) brightness(.89)}.card .shade{position:absolute;inset:0;background:linear-gradient(180deg,#0a18251a 0%,transparent 27%,#0c192814 38%,#0c19286b 52%,#0c1928d9 65%,#0c1928 77%)}.inner-frame{position:absolute;inset:1.5cqw;border:1px solid #eff6ff23;border-radius:2.8cqw;pointer-events:none}.card .card-top{position:absolute;inset:6.2cqw 6.5cqw auto;display:flex;justify-content:space-between;align-items:center;font-size:1.9cqw;letter-spacing:.42cqw;text-shadow:0 1px 6px #000;color:#f1f0dc;padding:0;background:none;line-height:1.4}.card .card-top span:last-child{color:#f1f0dc}.card-diamond{display:block;width:2.1cqw;height:2.1cqw;transform:rotate(45deg);background:var(--accent);box-shadow:0 0 9px #d1e3fb55}.card .card-info{position:absolute;inset:auto 6.5cqw 6cqw}.card-identity{text-align:center;margin-bottom:6cqw}.card-index{font-size:2.05cqw;letter-spacing:.77cqw;color:#d4d6ce;margin:0 0 2.3cqw}.card .card-name{font-family:Georgia,serif;font-weight:normal;font-size:7.2cqw;letter-spacing:-.1cqw;line-height:1.12;margin:0 0 3cqw;color:#f0eee9;text-shadow:0 2px 15px #020b14;text-transform:uppercase;display:block;overflow-wrap:anywhere}.card .card-name.long{font-size:5.9cqw}.card .card-name.very-long{font-size:4.6cqw;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.card-subtitle{font-size:1.6cqw;letter-spacing:.45cqw;color:#c7ced6;margin:0}.card .power-row{border-top:1px solid color-mix(in srgb,var(--accent),transparent 60%);border-bottom:1px solid color-mix(in srgb,var(--accent),transparent 77%);display:flex;justify-content:space-between;align-items:center;padding:4.9cqw 0 4.6cqw;text-align:left}.card .power-row small{font-size:2.25cqw;letter-spacing:.7cqw;display:flex;align-items:center;gap:2.4cqw;color:#bccbd8}.power-row small span{font-size:7.7cqw;line-height:1;color:var(--accent)}.card .power-row strong{font-family:Georgia,serif;font-size:10.4cqw;line-height:1;letter-spacing:-.4cqw;color:color-mix(in srgb,var(--accent),white 50%);font-weight:650}.card-signature{text-align:center;font-size:2.15cqw;line-height:1.8;color:#94a6b7;letter-spacing:.28cqw;margin:5.2cqw 0}.card .card-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #bdd0e52b;padding-top:3.1cqw;font-size:1.55cqw;letter-spacing:.28cqw;color:#b2c0c9;margin:0}.card .foil{inset:0;border-radius:inherit;opacity:.12;background:linear-gradient(120deg,transparent 15%,#85c9ff28 30%,#daabff22 45%,#fff4c635 53%,transparent 70%);background-size:230% 230%;background-position:var(--x,50%) var(--y,50%);mix-blend-mode:screen}.card.ur .foil{opacity:.3}.card:hover .foil{opacity:.4}.card-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.13;background:radial-gradient(circle at var(--x,50%) var(--y,20%),#eaf5ff8c,transparent 50%)}.ornament{position:absolute;color:color-mix(in srgb,var(--accent),white 35%);font-size:3.3cqw;line-height:1;pointer-events:none}.ornament.tl{top:.8cqw;left:1.8cqw}.ornament.tr{top:.8cqw;right:1.8cqw}.ornament.bl{bottom:.8cqw;left:1.8cqw}.ornament.br{bottom:.8cqw;right:1.8cqw}.flip-button,.collect-card>button,.detail-card{aspect-ratio:390/594}.card-front,.card-back{border-radius:15px}.detail-layout{grid-template-columns:minmax(220px,300px) 1fr}.detail-card{width:100%}dialog{max-width:800px}.collection-grid{grid-template-columns:repeat(auto-fill,minmax(205px,1fr))}.pagination{display:flex;gap:18px;align-items:center;justify-content:flex-end;margin:0 0 22px}.pagination span{font-size:11px;color:var(--muted)}.pagination button{padding:8px 15px}.pagination button:disabled{cursor:default;opacity:.3}.unowned{opacity:.72;filter:saturate(.8)}@media(max-width:850px){.detail-layout{grid-template-columns:230px 1fr}}@media(max-width:500px){.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-card{width:240px}.pagination{justify-content:center}.card{border-radius:15px}}


/* Subject-centered artwork with a smooth lower fade, approved in the single-card prototype. */
.card .art,.card.cover .art{top:0;height:62%;object-fit:cover;transform:none;filter:saturate(.92)}
.card .shade{background:linear-gradient(180deg,#0c19280a 0%,transparent 29%,#0c192820 37%,#0c192875 46%,#0c1928d9 55%,#0c1928 62%)}
.card .power-row small{font-size:2.85cqw;letter-spacing:.35cqw;gap:1.8cqw;white-space:nowrap}
.card .power-row strong{margin-right:2.2cqw}
.card.lr{--accent:#ffc2e9;box-shadow:0 20px 45px #0008,inset 0 0 0 2px #fff1c455,0 0 30px #ed98d535}
.card.lr .foil{opacity:.38;background-image:linear-gradient(120deg,transparent 15%,#85c9ff55 30%,#daabff55 45%,#fff4c655 53%,transparent 70%)}
.rarity-key i.r{background:#b8cbd9}.rarity-key i.sr{background:#8ebfec}.rarity-key i.ssr{background:#c79cf3}.rarity-key i.ur{background:#e4c481}.rarity-key i.lr{background:#ffc2e9}
.rarity-key{flex-wrap:wrap}

/* A torn foil seal and a sequential, persisted card stack. */
.pack{width:240px;height:328px;padding-top:53px;overflow:visible}
.pack:before{display:none}.pack-tear{position:absolute;top:-1px;left:-1px;right:-1px;height:40px;z-index:4;transform-origin:right bottom;border:1px solid #d3bd8c;background:repeating-linear-gradient(90deg,#dfd3a033 0 2px,#151c2933 2px 4px),linear-gradient(120deg,#a18c62,#383d48 45%,#c9b17d);clip-path:polygon(0 0,100% 0,100% 85%,96% 100%,91% 85%,86% 100%,81% 85%,76% 100%,71% 85%,66% 100%,61% 85%,56% 100%,51% 85%,46% 100%,41% 85%,36% 100%,31% 85%,26% 100%,21% 85%,16% 100%,11% 85%,6% 100%,0 85%)}
.pack-tear span{display:block;margin-top:12px;font-size:7px;letter-spacing:2px;color:#fff2ce}
.pack-rip{position:absolute;top:32px;left:0;right:0;height:9px;background:#fff0b6;box-shadow:0 0 22px #ffdf86;clip-path:inset(0 100% 0 0);z-index:3}
.opening .pack{animation:foil-open 2.1s forwards}.opening .pack-tear{animation:seal-tear 2.1s forwards}.opening .pack-rip{animation:rip-line 2.1s forwards}.opening .pack-aura,.opening .particles i{animation-duration:2.1s}
@keyframes foil-open{0%{transform:rotate(-6deg)}20%{transform:rotate(0) scale(1.08)}35%{transform:rotate(-2deg) scale(1.08)}46%{transform:rotate(2deg) scale(1.08)}65%{transform:rotate(0) scale(1.08);opacity:1;filter:brightness(1.2)}100%{transform:translateY(100px) scale(.92);opacity:0}}
@keyframes seal-tear{0%,23%{transform:none}40%{transform:translate(4px,-5px) rotate(3deg)}58%{transform:translate(30px,-65px) rotate(22deg);opacity:1}90%,100%{transform:translate(125px,-180px) rotate(50deg);opacity:0}}
@keyframes rip-line{0%,22%{clip-path:inset(0 100% 0 0);opacity:0}25%{opacity:1}52%{clip-path:inset(0);opacity:1}75%,100%{clip-path:inset(0);opacity:0}}
.card-stack{position:relative;width:min(300px,72vw);aspect-ratio:390/594;margin:12px auto 35px;perspective:1200px}
.stack-front{position:absolute;inset:0;z-index:8;background:none;padding:0;width:100%;height:100%;border-radius:18px;animation:stack-arrive .38s ease-out}
.stack-front:disabled{opacity:1}.stack-front.departing{animation:stack-leave .43s ease-in forwards;pointer-events:none}
.stack-back{transform:translate(calc(var(--depth)*5px),calc(var(--depth)*5px)) rotate(calc(var(--depth)*1.2deg));z-index:1}
.stack-label{text-align:center;font-size:10px;color:var(--muted);letter-spacing:1.5px}.stack-label.new{color:var(--gold)}
.pack-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;max-width:1100px;margin:auto}
.summary-card{padding:0;background:none;aspect-ratio:390/594;min-width:0}
@keyframes stack-leave{to{transform:translate(90px,-30px) rotate(16deg) scale(.93);opacity:0}}
@keyframes stack-arrive{from{transform:translate(6px,6px) scale(.98)}to{transform:none}}
@media(max-width:850px){.pack-summary{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:500px){.pack-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.card-stack{width:min(280px,72vw)}}
@media(prefers-reduced-motion:reduce){.stack-front,.opening .pack,.opening .pack-tear,.opening .pack-rip{animation:none}.stack-front.departing{opacity:0}}

.pack:disabled{opacity:1}
.card .card-top span:last-child{font-size:3cqw;letter-spacing:.35cqw;font-weight:700}