:root { --sc-sprite: url('/assets/img/cards/baraja-espanola.png'); }
.sc-card {
    --sc-col: 0;
    --sc-row: 1;
    width: var(--card-w, 90px);
    aspect-ratio: 208 / 319;
    display: inline-block;
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    border: 2px solid #efe5ce;
    border-radius: clamp(7px, 1.4vw, 12px);
    color: #271b12;
    background: #f8f3e6;
    box-shadow: 0 8px 17px rgba(0, 0, 0, .3);
    user-select: none;
    -webkit-user-select: none;
}
.sc-card::after { content: none; }
.sc-card-art {
    position: absolute;
    inset: 0;
    background-image: var(--sc-sprite);
    background-repeat: no-repeat;
    background-size: 1200% 500%;
    background-position: calc(var(--sc-col) * 9.090909%) calc(var(--sc-row) * 25%);
}
.sc-card-a11y {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.sc-card-back {
    display: grid;
    place-items: center;
    color: #f5d791;
    border-color: #efe3c5;
    background:
        repeating-linear-gradient(45deg, transparent 0 7px, rgba(255,255,255,.08) 7px 9px),
        radial-gradient(circle at center, #a5382e 0 9%, #35131c 10% 18%, #a5382e 19% 27%, #281019 28% 100%);
    box-shadow: 0 8px 17px rgba(0,0,0,.3), inset 0 0 0 6px #f0dfba, inset 0 0 0 8px #7d251f;
}
.sc-card-back > span { font: 800 clamp(18px, 5vw, 38px)/1 Georgia, serif; text-shadow: 0 2px 3px #000; }
.sc-card.played { animation: sc-card-play .3s cubic-bezier(.2,.8,.2,1) both; }
.sc-card.winner { outline: 3px solid #7cf0b0; outline-offset: 3px; transform: translateY(-3px); }
@keyframes sc-card-play {
    from { opacity: .2; transform: translateY(20px) rotate(6deg) scale(.88); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .sc-card.played { animation: none; } }