/* ============================================================
   HOROZO — Real tarot card images (Rider-Waite from burtai deck)
   Overrides the SVG line-art defaults in horozo.css
   ============================================================ */

/* Image-based card backs (replaces gradient pattern) */
.tarot__back {
    background: url('/assets/horozo/tarot/cards/back.png') center / cover no-repeat, var(--surface-sunk);
}
.tarot__back svg { display: none; }

/* Image-based card front (replaces SVG line art) */
.tarot__front {
    padding: 0;
    background: var(--surface);
    align-items: stretch;
    justify-content: stretch;
    overflow: hidden;
    position: relative;
}
.tarot__front .card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tarot__front .card-img.reversed {
    transform: rotate(180deg);
}
.tarot__front .art,
.tarot__front .name,
.tarot__pos {
    /* Hide old SVG/text on top of image — caption moved to overlay */
    display: none;
}
.tarot__front .caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.78));
    color: #fef3c7;
    padding: 1.2rem .8rem .7rem;
    text-align: center;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
}
.tarot__front .caption .pos {
    display: block;
    font-family: var(--font-body);
    font-size: .65rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(254, 243, 199, .75);
    font-weight: 600;
    margin-bottom: .15rem;
}
.tarot.locked .tarot__front .card-img {
    filter: blur(8px) brightness(.6);
}

/* Landing-page fanned cards — use back image */
.tcard {
    background: url('/assets/horozo/tarot/cards/back.png') center / cover no-repeat, var(--surface);
}
.tcard svg { display: none; }

/* Card art utility — when we want to render a single card outside the flip context */
.card-art {
    width: 100%;
    aspect-ratio: 5/8.5;
    border-radius: var(--r);
    border: 1px solid var(--gold-line);
    overflow: hidden;
    background: var(--surface-sunk);
    box-shadow: var(--shadow-1);
}
.card-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.card-art.reversed img {
    transform: rotate(180deg);
}