.card { position: relative; width: 10em; height: 14em; border-radius: .75em; padding: .42em; flex: none; background: linear-gradient(160deg, var(--c2), var(--c1) 55%, var(--dk)); box-shadow: 0 .3em .6em rgba(0,0,0,.35), inset 0 0 0 .1em rgba(255,255,255,.55); color: #2b1d2e; overflow: hidden; font-size: 10px; transform-style: preserve-3d; }
.card.hand, .card.bench { height: 12.6em; }
.card.full { font-size: min(27px, 6.8vw, 4.4vh); height: auto; min-height: 14em; }
.card.full .c-nm { font-size: .8em; }
.card.full .c-in { gap: .32em; }
.c-in { position: relative; height: 100%; display: flex; flex-direction: column; gap: .28em; padding: .35em; border-radius: .45em; background: linear-gradient(#fffdf6, #f1e7d0); border: .1em solid var(--dk); }
.c-top { display: flex; align-items: center; gap: .25em; font-weight: 900; line-height: 1; }
.c-cost { flex: none; width: 1.55em; height: 1.55em; border-radius: 50%; display: grid; place-items: center; font-size: .95em; background: radial-gradient(circle at 35% 30%, #fffbd0, #ffd23f 45%, #e08a00); border: .1em solid #6a3a00; color: #4a2a00; }
.c-nm { flex: 1; min-width: 0; font-size: .92em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.02em; }
.c-hp { font-size: .95em; color: #c0322a; white-space: nowrap; }
.c-hp small { font-size: .55em; margin-right: .1em; }
.c-art { position: relative; border-radius: .35em; overflow: hidden; border: .14em solid var(--dk); aspect-ratio: 4 / 3; flex: none; box-shadow: inset 0 0 0 .1em rgba(255,255,255,.4); background: #fff; }
.c-art img { width: 100%; height: 100%; display: block; }
.c-band { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(90deg, var(--c1), var(--c2)); border-radius: .3em; padding: .2em .35em; margin-top: auto; border: .08em solid var(--dk); }
.c-band img { width: 1.1em; height: 1.1em; }
.c-rs { color: #fff; font-size: .9em; text-shadow: 0 .08em 0 #0007; }
.c-type { display: flex; align-items: center; gap: .25em; font-size: .62em; font-weight: 900; padding: .25em .4em; border-radius: .35em; background: linear-gradient(90deg, var(--c1), var(--c2)); color: #fff; text-shadow: 0 .08em 0 #0007; }
.c-type img { width: 1.4em; height: 1.4em; }
.c-type { white-space: nowrap; }
.c-weak { margin-left: auto; display: flex; align-items: center; gap: .2em; font-weight: 800; }
.c-abs { display: flex; flex-direction: column; gap: .2em; }
.c-ab { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .3em; font-size: .62em; font-weight: 900; border-bottom: .08em dashed #c8b890; padding-bottom: .2em; }
.c-abn { font-size: 1.1em; }
.c-abd { font-size: 1.35em; color: #2b1d2e; }
.c-abt { grid-column: 1 / -1; font-size: .85em; font-weight: 700; color: #6a5a4a; }
.c-fl { font-size: .5em; font-style: italic; color: #7a6a5a; font-weight: 700; line-height: 1.3; }
.c-ft { margin-top: auto; display: flex; justify-content: space-between; font-size: .5em; font-weight: 900; color: #7a6a5a; }
.pip { display: inline-block; width: .9em; height: .9em; border-radius: 50%; margin-right: .08em; vertical-align: middle; background: radial-gradient(circle at 35% 30%, #fffbd0, #ffd23f 45%, #e08a00); border: .1em solid #6a3a00; }
.pip.off { background: #463a6a; border-color: #2b1d2e; }
.c-bar { height: .7em; border-radius: .4em; background: #3a2a3a; overflow: hidden; border: .08em solid #2b1d2e; margin-top: auto; }
.c-bar i { display: block; height: 100%; background: linear-gradient(#a8ff8a, #43c047); transition: width .4s; }
.c-st { position: absolute; left: .4em; right: .4em; top: 2.2em; display: flex; flex-wrap: wrap; gap: .2em; }
.st { font-size: .62em; padding: .15em .4em; border-radius: .4em; color: #fff; border: .1em solid #2b1d2e; animation: stpulse 1s ease-in-out infinite alternate; }
.st.burn { background: #ff6b3d; } .st.stun { background: #c9a400; } .st.shld { background: #2f80ed; }
@keyframes stpulse { to { transform: scale(1.08); } }
.c-foil { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.r-uncommon .c-foil { background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%); background-size: 300% 100%; animation: foil 5s linear infinite; }
.r-rare .c-foil { background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.75) 46%, rgba(255,240,170,.5) 50%, transparent 64%); background-size: 300% 100%; mix-blend-mode: overlay; animation: foil 3s linear infinite; }
.r-rare { box-shadow: 0 .3em .6em rgba(0,0,0,.35), inset 0 0 0 .14em #fff3b0, 0 0 .6em rgba(255,220,120,.5); }
.r-legendary { background: linear-gradient(135deg, #fff3b0, #ffcf40 25%, #ff9ad5 50%, #9ad8ff 75%, #fff3b0) !important; background-size: 200% 200% !important; animation: holoBg 6s linear infinite; }
.r-legendary .c-foil { background: linear-gradient(115deg, rgba(255,0,128,.3), rgba(255,200,0,.3), rgba(0,255,160,.3), rgba(0,160,255,.3), rgba(180,0,255,.3), rgba(255,0,128,.3)); background-size: 300% 300%; mix-blend-mode: color-dodge; animation: holo 4s linear infinite; }
.r-legendary .c-foil::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.8) 48%, transparent 60%); background-size: 300% 100%; animation: foil 2.6s linear infinite; mix-blend-mode: overlay; }
@keyframes foil { from { background-position: 150% 0; } to { background-position: -150% 0; } }
@keyframes holo { from { background-position: 0% 50%; } to { background-position: 300% 50%; } }
@keyframes holoBg { from { background-position: 0% 0%; } to { background-position: 200% 200%; } }