/* ==========================================================================
   FCSM Deck — composant carte (partagé site public + admin)
   ========================================================================== */

.fcard, .pill, .admin-rar {
    --r-base: #9aa2b6;
    --r-commune: #5fcf95;
    --r-rare: #58a0ff;
    --r-epique: #b67dff;
    --r-legendaire: #ffbe3b;
    --r-unique: #ff5a7e;
}
.fcard {
    --c-text: #f3f1e8;
    --c-muted: #a7adc2;
    --c-faint: #7b8199;
    --c-line: rgba(232, 236, 255, 0.09);
    --c-yellow: #ffd21f;
    --c-on-yellow: #12141c;
    --f-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
    --f-body: "Barlow", system-ui, sans-serif;
    --f-mono: "JetBrains Mono", ui-monospace, monospace;
    --f-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --f-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.35);
}


.fcard {
    --rc: var(--r-base);
    --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --hover: 0;
    position: relative; display: block;
    width: var(--w, 260px);
    aspect-ratio: 63 / 88;
    container-type: inline-size;
    border-radius: 0.35cqw;
    color: var(--c-text); text-decoration: none;
    transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
    transform-style: preserve-3d;
    transition: transform 0.5s var(--f-ease), box-shadow 0.4s var(--f-ease);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--rc) 55%, transparent), var(--f-shadow);
    isolation: isolate;
    user-select: none;
}
a.fcard:hover { color: var(--c-text); }
.fcard.is-tilting { transition: transform 0.08s linear, box-shadow 0.4s var(--f-ease); }
.fcard--sm { --w: 100%; }
.fcard--md { --w: 240px; }
.fcard--lg { --w: 290px; }
.fcard--xl { --w: min(380px, 82vw); }

.r-base { --rc: var(--r-base); }
.r-commune { --rc: var(--r-commune); }
.r-rare { --rc: var(--r-rare); }
.r-epique { --rc: var(--r-epique); }
.r-legendaire { --rc: var(--r-legendaire); }
.r-unique { --rc: var(--r-unique); }

.fcard__body {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    padding: 5cqw 5.5cqw 4.5cqw;
    border-radius: inherit; overflow: hidden;
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--rc) 16%, transparent), transparent 42%),
        linear-gradient(180deg, #181d31 0%, #10131f 100%);
}
.fcard__body::before { /* liseré intérieur */
    content: ""; position: absolute; inset: 2.4cqw; border-radius: 0.1cqw;
    border: 1px solid color-mix(in srgb, var(--rc) 35%, transparent);
    pointer-events: none;
}

.fcard__top { display: flex; justify-content: space-between; align-items: center; gap: 2cqw; position: relative; }
.fcard__cat, .fcard__rar {
    font: 700 3.6cqw/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.08em;
    padding: 1.6cqw 2.6cqw; border-radius: 0.3cqw;
}
.fcard__cat { color: var(--c-muted); background: rgba(255, 255, 255, 0.05); }
.fcard__rar { color: var(--rc); background: color-mix(in srgb, var(--rc) 14%, transparent); display: inline-flex; gap: 1.6cqw; }
.fcard__rar i { font-style: normal; color: #fff; background: linear-gradient(90deg, #ff6ad5, #ffd21f, #5ef2ff); -webkit-background-clip: text; background-clip: text; color: transparent; }

.fcard__name {
    position: relative; margin: 3.4cqw 0 2.6cqw;
    font: 800 9.4cqw/0.95 var(--f-display); text-transform: uppercase; letter-spacing: 0.01em;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

.fcard__art {
    position: relative; flex: 1 1 auto; min-height: 0;
    border-radius: 0.1cqw; overflow: hidden;
    background: #0c0f1a;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.fcard__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }

/* Illustration de remplacement : rayures du maillot, numéro géant */
.fcard__placeholder {
    position: absolute; inset: 0; display: grid; place-items: center;
    background:
        radial-gradient(120% 80% at 50% 110%, rgba(11, 13, 20, 0.85), transparent 60%),
        repeating-linear-gradient(115deg, #1b3fc4 0 14cqw, #2f5bff 14cqw 15cqw, #1b3fc4 15cqw 28cqw, var(--c-yellow) 28cqw 33cqw);
}
.r-legendaire .fcard__placeholder, .r-unique .fcard__placeholder {
    background:
        radial-gradient(120% 80% at 50% 110%, rgba(11, 13, 20, 0.8), transparent 60%),
        repeating-linear-gradient(115deg, #e9b800 0 14cqw, var(--c-yellow) 14cqw 15cqw, #e9b800 15cqw 28cqw, #1b3fc4 28cqw 33cqw);
}
.fcard__num {
    font: 900 34cqw/0.8 var(--f-display);
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 2cqw 6cqw rgba(0, 0, 0, 0.45);
    letter-spacing: -0.02em;
}
.r-legendaire .fcard__num, .r-unique .fcard__num { color: var(--c-on-yellow); text-shadow: none; }

/* Crédit du photographe, en petit sous la photo */
.fcard__credit {
    margin: 1.1cqw 0 0; text-align: right;
    font: 500 max(2.7cqw, 7.5px)/1.15 var(--f-body); letter-spacing: 0.02em; color: var(--c-faint);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fcard__credit:empty { display: none; }
.fcard__credit:not(:empty) + .fcard__meta { margin-top: 1.6cqw; }
.fcard.is-gold .fcard__credit { color: #a8996f; }
.fcard.is-locked .fcard__credit { opacity: 0.45; }

.fcard__meta {
    display: flex; justify-content: space-between; gap: 2cqw; margin-top: 3cqw;
    font: 700 4.2cqw/1.1 var(--f-body); color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.06em;
}
.fcard__flavor {
    margin: 2cqw 0 0; font: italic 500 4.4cqw/1.3 var(--f-body); color: #d8d9e3;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.fcard__flavor:empty { display: none; }
.fcard__stats {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 2cqw;
    margin-top: 3.4cqw; padding-top: 3cqw; border-top: 1px solid var(--c-line);
}
.fcard__stats small { display: block; font: 700 3.2cqw/1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-faint); margin-bottom: 1cqw; }
.fcard__stats b { font: 800 8.6cqw/1 var(--f-display); }
.fcard__serial { font: 700 3.6cqw/1 var(--f-mono); color: var(--c-muted); padding-bottom: 0.6cqw; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Reflet et holo, pilotés par le pointeur (--mx, --my) */
.fcard__glare, .fcard__foil { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.fcard__glare {
    z-index: 3;
    background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.28), transparent 45%);
    opacity: calc(var(--hover) * 0.9); mix-blend-mode: overlay;
    transition: opacity 0.35s;
}
.fcard__foil { z-index: 2; opacity: 0; }
.fcard.is-holo .fcard__foil {
    opacity: 0.55;
    background:
        repeating-linear-gradient(115deg, rgba(255, 106, 213, 0.5) 0%, rgba(255, 210, 31, 0.45) 7%, rgba(94, 242, 255, 0.5) 14%, rgba(120, 255, 160, 0.4) 21%, rgba(255, 106, 213, 0.5) 28%),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 6px);
    background-size: 300% 300%, auto;
    background-position: var(--mx) var(--my), 0 0;
    mix-blend-mode: color-dodge;
    filter: brightness(0.75) contrast(1.4);
    transition: opacity 0.35s;
}
.fcard.is-holo:hover .fcard__foil, .fcard.is-holo.is-tilting .fcard__foil { opacity: 0.8; }
.fcard.is-holo { box-shadow: 0 0 0 1px color-mix(in srgb, var(--rc) 70%, transparent), 0 0 34px -6px color-mix(in srgb, var(--rc) 70%, transparent), var(--f-shadow); }

/* Rareté haute : halo coloré permanent */
.fcard.r-epique, .fcard.r-legendaire, .fcard.r-unique {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--rc) 70%, transparent), 0 10px 40px -10px color-mix(in srgb, var(--rc) 65%, transparent), var(--f-shadow);
}

/* Carte non obtenue */
.fcard.is-locked { box-shadow: 0 0 0 1px var(--c-line); }
.fcard.is-locked .fcard__body { background: #11141f; }
.fcard.is-locked .fcard__art img, .fcard.is-locked .fcard__placeholder { filter: grayscale(1) brightness(0.32) contrast(1.1); }
.fcard.is-locked .fcard__name, .fcard.is-locked .fcard__stats, .fcard.is-locked .fcard__meta, .fcard.is-locked .fcard__flavor { opacity: 0.45; }
.fcard.is-locked .fcard__rar { filter: saturate(0.4); opacity: 0.7; }
.fcard__lock { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, 0.55); }


/* ==========================================================================
   Série Gold édition : photo noir et blanc (sujet en couleur, traité côté
   serveur), cadre doré, reflets dorés permanents qui suivent le pointeur.
   ========================================================================== */

.fcard.is-gold {
    --gold-1: #8a6514;
    --gold-2: #f7e08a;
    --gold-3: #c99a2e;
    --gold-4: #fff4c2;
    --rc: #e8c25a;
    background: linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 22%, var(--gold-3) 45%, var(--gold-4) 62%, var(--gold-3) 78%, var(--gold-1) 100%);
    box-shadow: 0 0 0 1px rgba(255, 228, 140, 0.55), 0 14px 44px -12px rgba(232, 194, 90, 0.55), var(--f-shadow);
}
.fcard.is-gold .fcard__body {
    inset: 1.6cqw;
    border-radius: 0.15cqw;
    background:
        linear-gradient(160deg, rgba(232, 194, 90, 0.14), transparent 40%),
        linear-gradient(180deg, #16130c 0%, #0c0b08 100%);
}
.fcard.is-gold .fcard__body::before { inset: 1.2cqw; border-color: rgba(232, 194, 90, 0.45); }
.fcard.is-gold .fcard__art { box-shadow: inset 0 0 0 1px rgba(232, 194, 90, 0.5); }
.fcard.is-gold .fcard__name { color: #f3d27a; text-shadow: 0 0.3cqw 0 rgba(0, 0, 0, 0.6); }
.fcard.is-gold .fcard__stats b { color: #f3d27a; }
.fcard.is-gold .fcard__stats { border-top-color: rgba(232, 194, 90, 0.25); }
.fcard.is-gold .fcard__cat { color: #e8d5a0; background: rgba(232, 194, 90, 0.12); }
.fcard.is-gold .fcard__rar { color: #f3d27a; background: rgba(232, 194, 90, 0.16); }
.fcard.is-gold .fcard__meta, .fcard.is-gold .fcard__serial { color: #cbb98c; }
.fcard.is-gold .fcard__flavor { color: #e9dfc4; }
.gold-tag {
    font-style: normal; color: #1a1408 !important; padding: 0 1.2cqw; border-radius: 0.3cqw;
    background: linear-gradient(90deg, #c99a2e, #fff4c2, #c99a2e) !important;
    -webkit-background-clip: border-box !important; background-clip: border-box !important;
}

/* Reflet doré : balayage lent en continu + suivi du pointeur */
.fcard.is-gold .fcard__foil {
    opacity: 0.5;
    background:
        linear-gradient(115deg, transparent 20%, rgba(255, 236, 160, 0.55) 38%, rgba(255, 250, 220, 0.85) 45%, rgba(214, 160, 40, 0.5) 52%, transparent 70%),
        repeating-linear-gradient(115deg, rgba(255, 215, 110, 0.18) 0 1.2cqw, rgba(120, 80, 10, 0.1) 1.2cqw 2.4cqw);
    background-size: 260% 260%, auto;
    background-position: var(--gx, 120%) var(--gy, 50%), 0 0;
    mix-blend-mode: soft-light;
    animation: gold-sweep 5.5s ease-in-out infinite;
}
.fcard.is-gold.is-tilting .fcard__foil {
    animation: none; opacity: 0.85;
    background-position: var(--mx) var(--my), 0 0;
    mix-blend-mode: overlay;
}
.fcard.is-gold .fcard__glare { mix-blend-mode: soft-light; }
@keyframes gold-sweep {
    0%, 15%   { background-position: 130% 50%, 0 0; }
    55%, 100% { background-position: -30% 50%, 0 0; }
}
/* Une carte Gold reste dorée même verrouillée, en sourdine */
.fcard.is-gold.is-locked { filter: saturate(0.45) brightness(0.7); }
.fcard.is-gold.is-locked .fcard__foil { animation: none; opacity: 0.2; }

@media (prefers-reduced-motion: reduce) {
    .fcard.is-gold .fcard__foil { animation: none; }
}