.cards-section{text-align:center}
.cards-section .eyebrow{margin:0 0 16px;color:var(--gold);font-size:15px;letter-spacing:.12em;text-transform:uppercase}
.card-showcase{display:flex;justify-content:center;gap:26px;padding:24px 12px 28px;max-width:100%;margin:0 auto}
.battle-card{position:relative;flex:0 0 240px;aspect-ratio:2/3;background:url('assets/optimized/combat_card-cards.webp') center/100% 100% no-repeat;filter:drop-shadow(0 12px 18px #0008);transition:transform .2s}
.battle-card:first-child{transform:rotate(-5deg) translateY(8px)}
.battle-card:last-child{transform:rotate(5deg) translateY(8px)}
.battle-card:hover{transform:translateY(-8px)}
.battle-card h3{position:absolute;inset:7% 10% auto;margin:0;font:17px 'Metamorphous',serif;color:#eee6d6;line-height:1.3}
.battle-card img{position:absolute;left:22%;top:21%;width:56%;height:29%;object-fit:contain}
.card-cost{position:absolute;left:10%;top:20%;font-size:22px;color:var(--cyan);text-shadow:0 2px 4px #000}
.battle-card p{position:absolute;margin:0;left:11%;right:11%;line-height:1.2}
.card-role{top:52%;font-size:15px;color:var(--gold)}
.card-effect{top:64%;height:22%;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff}
.card-rarity{top:87%;font-size:13px;color:var(--muted)}
.rare .card-rarity{color:#70bded}
.card-combo{margin:8px 0 0;font-size:24px;color:var(--gold)}
.cards-section .help{max-width:640px;margin:12px auto 0}
@media(max-width:850px){.card-showcase{gap:10px}.battle-card{flex-basis:210px}.battle-card h3{font-size:15px}.card-effect{font-size:14px}}
@media(max-width:700px){.card-showcase{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:16px 8px 22px;scrollbar-color:#af57ff #15101e}.battle-card{scroll-snap-align:center;flex-basis:220px}.battle-card:first-child,.battle-card:last-child{transform:none}.card-combo{font-size:20px}.card-effect{font-size:15px}}
@media(prefers-reduced-motion:reduce){.battle-card{transition:none}}