/* =========================================================================
   Cartes & effets foil — rendus 100% CSS/JS sur l'image normale de la carte.
   Le même template sert toutes les cartes ; les effets sont activés par les
   classes finish-* / rarity-*. Les variables --mx/--my (position du reflet)
   et --rx/--ry (inclinaison) sont pilotées par cards.js.
   ========================================================================= */

.card-shell {
    --mx: 50%;
    --my: 50%;
    --rx: 0deg;
    --ry: 0deg;
    --pop: 0;

    /* Fenêtre d'illustration sur le template (ajustable globalement). */
    --art-x: 8%;
    --art-y: 11%;
    --art-w: 84%;
    --art-h: 46%;

    position: relative;
    width: 100%;
    aspect-ratio: 816 / 1110;
    border-radius: 5.5% / 4%;
    transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) scale(calc(1 + var(--pop) * 0.04));
    transform-style: preserve-3d;
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
    will-change: transform;
    cursor: pointer;
    isolation: isolate;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
}

.card-shell.static { cursor: default; }

.card-inner {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
}

.card-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
    border-radius: inherit;
}

.foil-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    z-index: 2;
    border-radius: inherit;
}

/* Reflet directionnel commun (glare) — léger, sur toute la carte. */
.glare-layer {
    background: radial-gradient(circle at var(--mx) var(--my),
        rgba(255, 255, 255, .35), rgba(255, 255, 255, .05) 22%, transparent 45%);
    mix-blend-mode: soft-light;
    opacity: .35;
    z-index: 4;
}
.card-shell.static .glare-layer { opacity: 0; }

/* ----------------------------- Foil Art ---------------------------------- */
/* Effet uniquement sur la zone illustration. */
.finish-foil_art .foil-art-layer {
    opacity: .8;
    left: var(--art-x);
    top: var(--art-y);
    width: var(--art-w);
    height: var(--art-h);
    right: auto;
    bottom: auto;
    border-radius: 8px;
    overflow: hidden;
    background:
        radial-gradient(circle at var(--mx) var(--my),
            rgba(255, 255, 255, .9), rgba(255, 255, 255, .08) 18%, transparent 36%),
        linear-gradient(115deg,
            rgba(255, 0, 120, .28), rgba(0, 220, 255, .28),
            rgba(255, 240, 0, .24), rgba(160, 0, 255, .26));
    background-size: 200% 200%, 220% 220%;
    mix-blend-mode: screen;
    animation: holoShift 4s linear infinite;
}

/* ------------------------------ Reverse ---------------------------------- */
/* Toute la carte foil SAUF l'illustration : 4 morceaux autour de la fenêtre. */
.finish-reverse .reverse-layer { opacity: 1; }
.reverse-piece {
    position: absolute;
    background:
        radial-gradient(circle at var(--mx) var(--my),
            rgba(255, 255, 255, .8), transparent 38%),
        repeating-linear-gradient(115deg,
            rgba(255, 255, 255, .18) 0px, rgba(255, 255, 255, .02) 8px,
            rgba(0, 200, 255, .16) 14px, rgba(255, 0, 200, .14) 22px);
    background-size: 200% 200%, 180% 180%;
    mix-blend-mode: color-dodge;
    opacity: 0;
    animation: holoShift 5s linear infinite;
}
.finish-reverse .reverse-piece { opacity: .6; }
.reverse-top    { left: 0; right: 0; top: 0; height: var(--art-y); }
.reverse-bottom { left: 0; right: 0; top: calc(var(--art-y) + var(--art-h)); bottom: 0; }
.reverse-left   { left: 0; width: var(--art-x); top: var(--art-y); height: var(--art-h); }
.reverse-right  { right: 0; left: calc(var(--art-x) + var(--art-w)); top: var(--art-y); height: var(--art-h); }

/* ----------------------------- Full Foil --------------------------------- */
.finish-full_foil .full-foil-layer {
    opacity: .7;
    background:
        radial-gradient(circle at var(--mx) var(--my),
            rgba(255, 255, 255, .95), rgba(255, 255, 255, .12) 20%, transparent 42%),
        linear-gradient(125deg,
            rgba(255, 0, 80, .22), rgba(0, 200, 255, .22),
            rgba(255, 255, 0, .2), rgba(180, 0, 255, .22)),
        repeating-linear-gradient(45deg,
            rgba(255, 255, 255, .12) 0, rgba(255, 255, 255, .02) 6px, transparent 12px);
    background-size: 200% 200%, 200% 200%, 60px 60px;
    mix-blend-mode: screen;
    animation: holoShift 4s linear infinite;
}

/* ------------------------------ Rainbow ---------------------------------- */
.finish-rainbow .full-foil-layer {
    opacity: .82;
    background:
        radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 1), transparent 32%),
        conic-gradient(from 180deg at var(--mx) var(--my),
            red, orange, yellow, lime, cyan, blue, violet, red);
    mix-blend-mode: screen;
    animation: rainbowSpin 6s linear infinite;
}
.finish-rainbow { filter: saturate(1.25) contrast(1.05); }

/* ------------------------------- Gold ------------------------------------ */
.finish-gold .full-foil-layer {
    opacity: .8;
    background:
        radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .95), transparent 34%),
        linear-gradient(120deg,
            rgba(255, 255, 210, .25), rgba(255, 210, 70, .5),
            rgba(180, 120, 20, .32), rgba(255, 240, 160, .5));
    background-size: 220% 220%;
    mix-blend-mode: screen;
    animation: goldSweep 4s ease-in-out infinite;
}
.finish-gold { filter: saturate(1.15) contrast(1.08); }

/* ----------------------------- Sparkles ---------------------------------- */
.sparkle-layer {
    opacity: 0;
    z-index: 3;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, .95) 0 1px, transparent 2px),
        radial-gradient(circle, rgba(255, 255, 255, .75) 0 1px, transparent 2px);
    background-size: 38px 38px, 61px 61px;
    background-position: 0 0, 15px 20px;
    mix-blend-mode: screen;
    animation: sparkleMove 3s linear infinite;
}
.rarity-rare .sparkle-layer,
.rarity-rare-mythique .sparkle-layer,
.finish-rainbow .sparkle-layer,
.finish-gold .sparkle-layer { opacity: .55; }

/* Halo de rareté */
.rarity-rare { box-shadow: 0 8px 22px rgba(0,0,0,.45), 0 0 0 1px rgba(120,200,255,.35); }
.rarity-rare-mythique { box-shadow: 0 8px 28px rgba(0,0,0,.5), 0 0 22px rgba(255,120,255,.45), 0 0 0 1px rgba(255,180,255,.5); }
.finish-rainbow.card-shell { box-shadow: 0 8px 28px rgba(0,0,0,.5), 0 0 26px rgba(120,255,220,.4); }
.finish-gold.card-shell { box-shadow: 0 8px 28px rgba(0,0,0,.5), 0 0 26px rgba(255,210,90,.45); }

/* Carte manquante : silhouette album */
.card-shell.is-missing { cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,.4); }
.card-shell.is-missing .card-silhouette { position: absolute; inset: 0; }
.card-shell.is-missing .card-image {
    filter: grayscale(1) brightness(.12) contrast(.9);
}
.card-shell.is-missing::after {
    content: "?";
    position: absolute; inset: 0; z-index: 5;
    display: grid; place-items: center;
    font-family: "Sora", sans-serif; font-weight: 800; font-size: 2.4rem;
    color: rgba(255,255,255,.16);
}
.card-shell.is-mystery::after {
    content: "???";
    font-size: 2rem;
    letter-spacing: .08em;
    color: rgba(255,255,255,.18);
}
.card-shell.is-mystery .card-label {
    letter-spacing: .12em;
}

/* Badges sur la carte */
.card-badge {
    position: absolute; top: 6px; left: 6px; z-index: 6;
    font-size: .62rem; font-weight: 800; letter-spacing: .03em;
    padding: 3px 7px; border-radius: 999px;
    background: rgba(20, 20, 40, .8); color: #fff;
    backdrop-filter: blur(4px); text-transform: uppercase;
}
.card-badge.is-new { background: linear-gradient(135deg, #2bd47a, #14a0c9); }
.card-badge.is-dup { background: rgba(60, 60, 90, .85); }
.card-qty {
    position: absolute; bottom: 6px; right: 6px; z-index: 6;
    font-size: .68rem; font-weight: 800;
    padding: 2px 7px; border-radius: 999px;
    background: rgba(10, 10, 25, .82); color: #fff; backdrop-filter: blur(4px);
}
.card-label {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
    font-size: .72rem; font-weight: 600; color: #fff;
    padding: 18px 8px 6px; line-height: 1.1;
    background: linear-gradient(to top, rgba(5,5,15,.82), transparent);
    border-radius: 0 0 16px 16px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-label .card-num { opacity: .65; font-weight: 700; }

/* Tailles */
.card-shell.size-sm { border-radius: 12px; }
.card-shell.size-lg { box-shadow: 0 18px 50px rgba(0,0,0,.6); }

/* ----------------------------- Animations -------------------------------- */
@keyframes holoShift {
    0%   { background-position: 0% 0%, 0% 0%, 0 0; }
    50%  { background-position: 100% 100%, 80% 50%, 30px 30px; }
    100% { background-position: 0% 0%, 0% 0%, 0 0; }
}
@keyframes rainbowSpin {
    from { filter: hue-rotate(0deg); }
    to   { filter: hue-rotate(360deg); }
}
@keyframes goldSweep {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
@keyframes sparkleMove {
    from { background-position: 0 0, 15px 20px; }
    to   { background-position: 38px 38px, 76px 81px; }
}

@media (prefers-reduced-motion: reduce) {
    .card-shell, .foil-layer, .sparkle-layer, .reverse-piece {
        animation: none !important;
        transition: none !important;
    }
}