/*
 * Apparence des cartes (gabarit : templates/cards/_card.html.twig).
 *
 * Deux couches indépendantes, donc réutilisables sans multiplier les images :
 *   - la RARETÉ donne les couleurs : .rarity-*  (cadre métallique --f1/--f2, dégradé du fond --c1/--c2, lueur --glow) ;
 *   - le TYPE donne le motif de fond : .art-*   (un SVG de assets/images/cards/, semi-transparent, posé sur le dégradé).
 * Toutes les dimensions sont en `em` : la taille de la carte se règle avec --w seule (190px par défaut, .lg = fiche).
 * Ajouter un type de carte = un SVG, une règle `.art-xxx` qui renseigne --art, et le nom du motif dans le gabarit.
 */

.card {
    --w: 190px;
    --c1: #888; --c2: #ccc;          /* fond de la face */
    --f1: #f4f4f4; --f2: #8c8c8c;    /* cadre métallique */
    --glow: rgba(255, 255, 255, .35);
    --art: none;
    position: relative; display: block; width: var(--w); aspect-ratio: 19 / 28; font-size: calc(var(--w) / 19);
    padding: .5em; border-radius: 1.7em; overflow: hidden; isolation: isolate; color: #fff;
    background: linear-gradient(140deg, var(--f1) 0%, var(--f2) 45%, var(--f1) 70%, var(--f2) 100%);
    box-shadow: 0 .7em 1.8em rgba(0, 0, 0, .5), inset 0 0 0 .1em rgba(255, 255, 255, .45), inset 0 -.25em .5em rgba(0, 0, 0, .3);
    transition: transform .18s ease, box-shadow .18s ease;
}
a.card:hover { transform: translateY(-.5em) scale(1.025); box-shadow: 0 1.3em 2.4em rgba(0, 0, 0, .55), inset 0 0 0 .1em rgba(255, 255, 255, .55); }
.card.lg { --w: 285px; }

/* ---- Face : motif du type + dégradé de la rareté + vignette ---- */
.card .face {
    position: relative; height: 100%; border-radius: 1.25em; overflow: hidden;
    background:
        var(--art) center / cover no-repeat,
        radial-gradient(120% 75% at 50% 32%, var(--glow), transparent 62%),
        linear-gradient(165deg, var(--c1), var(--c2));
    box-shadow: inset 0 0 2.6em rgba(0, 0, 0, .5), inset 0 0 0 .08em rgba(0, 0, 0, .4);
}

/* Filet intérieur : donne de la profondeur au cadre */
.card .face::after { content: ""; position: absolute; inset: .45em; z-index: 2; pointer-events: none; border-radius: .85em; box-shadow: inset 0 0 0 .07em rgba(255, 255, 255, .3); }

/* ---- Raretés ---- */
.rarity-none      { --c1: #1f3347; --c2: #7f9bb5; --f1: #e6edf4; --f2: #6e8196; --glow: rgba(190, 215, 240, .4); } /* coachs : aucune rareté */
.rarity-bronze    { --c1: #5c3314; --c2: #c98b52; --f1: #f0b57d; --f2: #7a4a22; --glow: rgba(255, 190, 130, .4); }
.rarity-silver    { --c1: #5e6978; --c2: #dfe5ec; --f1: #ffffff; --f2: #8792a2; --glow: rgba(255, 255, 255, .5); }
.rarity-gold      { --c1: #8a5a00; --c2: #ffd75e; --f1: #fff2a8; --f2: #b07d10; --glow: rgba(255, 230, 130, .55); }
.rarity-platinum  { --c1: #0b5f73; --c2: #9ff1f7; --f1: #eafdff; --f2: #2a9fb3; --glow: rgba(160, 250, 255, .55); }
.rarity-legendary { --c1: #2c0a63; --c2: #ff5fd2; --f1: #ffe7a3; --f2: #a8730a; --glow: rgba(255, 140, 230, .55); }

/* ---- Motifs de fond par type ---- */
.art-player  { --art: url("../images/cards/art-player-qE5Heh2.svg"); }
.art-rookie  { --art: url("../images/cards/art-rookie-tdlipT5.svg"); }
.art-rink    { --art: url("../images/cards/art-rink-Qq_4U0R.svg"); }
.art-special { --art: url("../images/cards/art-special-mca2a9o.svg"); }
.art-legend  { --art: url("../images/cards/art-legend-CnWYth2.svg"); }
.art-star    { --art: url("../images/cards/art-star-K7xtRgF.svg"); }
.art-cup     { --art: url("../images/cards/art-cup--0An1Dm.svg"); }

/* ---- Entête : note et poste à gauche, médaillon d'équipe à droite ---- */
.card .head { position: absolute; z-index: 3; top: .7em; left: .85em; right: .85em; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.card .head .stack { display: flex; flex-direction: column; align-items: center; } /* le poste est centré sous la note / l'écusson */
.card .rating {
    font-size: 3.1em; font-weight: 900; line-height: .86; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
    text-shadow: 0 .05em 0 rgba(0, 0, 0, .5), 0 0 .45em rgba(0, 0, 0, .6); -webkit-text-stroke: .018em rgba(0, 0, 0, .4);
}
/* Rookie : écusson de repêchage (SVG de _card.html.twig) à la place de la note. Bloc, pour que le poste reste sur sa propre ligne en dessous. */
.card .rating.is-pick { display: block; width: 5.2em; font-size: 1em; line-height: 0; letter-spacing: 0; -webkit-text-stroke: 0; text-shadow: none; }
.card .rating.is-pick svg { display: block; width: 100%; height: auto; font-family: inherit; filter: drop-shadow(0 .2em .25em rgba(0, 0, 0, .55)); }
.card .pos {
    display: inline-block; margin-top: .4em; padding: .18em .6em; border-radius: .55em; font-size: 1.35em; font-weight: 800; letter-spacing: .08em;
    background: rgba(0, 0, 0, .5); box-shadow: inset 0 0 0 .08em rgba(255, 255, 255, .25);
}
.card .badge {
    width: 4.7em; height: 4.7em; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 35% 30%, #fff, #d9e0e9); border: .16em solid var(--f1);
    box-shadow: 0 .25em .7em rgba(0, 0, 0, .5), inset 0 0 .4em rgba(0, 0, 0, .25);
}
.card .badge img { width: 112%; height: 112%; max-width: none; object-fit: contain; flex: none; }

/* ---- Photo (ou emblème) : déborde sur le bandeau de nom ---- */
.card .photo { position: absolute; z-index: 1; left: 0; right: 0; top: 3.2em; bottom: 4.6em; display: flex; align-items: flex-end; justify-content: center; }
.card .photo img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 .3em .45em rgba(0, 0, 0, .5)); }
.card.is-logo .photo { top: 3.4em; bottom: 7.4em; align-items: center; }
.card.is-logo .photo::before {
    content: ""; position: absolute; width: 14em; height: 14em; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .55) 55%, rgba(255, 255, 255, 0) 72%);
    box-shadow: 0 0 0 .14em var(--f1), 0 0 0 .9em rgba(255, 255, 255, .1); border-radius: 50%; opacity: .92;
}
.card.is-logo .photo img { position: relative; width: 11.6em; height: 11.6em; object-position: 50% 50%; filter: drop-shadow(0 .2em .3em rgba(0, 0, 0, .35)); }

/* ---- Bandeau : étiquette de type, nom, ligne de détail ---- */
.card .plate {
    position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 2.6em .9em .75em; text-align: center;
    background: linear-gradient(to top, rgba(7, 9, 16, .96) 0%, rgba(7, 9, 16, .86) 58%, rgba(7, 9, 16, 0) 100%);
}
.card .tag {
    display: inline-block; margin-bottom: .5em; padding: .2em .9em; border-radius: 999px; font-size: .82em; font-weight: 900; letter-spacing: .16em;
    color: #1a1204; background: linear-gradient(180deg, var(--f1), var(--f2)); box-shadow: 0 .15em .4em rgba(0, 0, 0, .5), inset 0 0 0 .08em rgba(255, 255, 255, .5);
}
.card .name {
    font-size: 1.38em; font-weight: 900; line-height: 1.04; letter-spacing: .035em; text-transform: uppercase; text-wrap: balance;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-shadow: 0 .08em .25em rgba(0, 0, 0, .8);
}
.card .sub {
    display: flex; justify-content: space-between; align-items: center; gap: .6em; margin-top: .5em; padding-top: .45em; font-size: .95em; font-weight: 700; letter-spacing: .06em;
    border-top: .1em solid transparent; border-image: linear-gradient(90deg, transparent, var(--f1), transparent) 1; color: rgba(255, 255, 255, .88);
}
.card .sub .rar { color: var(--f1); text-transform: uppercase; font-weight: 900; }
.card .reason { font-size: .96em; width: 100%; text-align: center; letter-spacing: .02em; line-height: 1.2; text-wrap: balance;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.card .stats { display: flex; justify-content: center; gap: .5em; margin-top: .55em; }
.card .stats span { flex: 1; padding: .22em 0 .18em; border-radius: .55em; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 .08em rgba(255, 255, 255, .22); font-size: .85em; font-weight: 800; letter-spacing: .08em; line-height: 1.1; }
.card .stats b { display: block; font-size: 1.55em; font-weight: 900; letter-spacing: 0; color: var(--f1); }

/* ---- Pastilles : quantité possédée, nouvelle carte ---- */
.card .owned, .card .new { position: absolute; z-index: 4; font-size: .85em; font-weight: 900; padding: .15em .7em; border-radius: 999px; color: #fff; box-shadow: 0 .15em .4em rgba(0, 0, 0, .5); }
.card .owned { top: 5.9em; right: .85em; background: rgba(0, 0, 0, .72); box-shadow: inset 0 0 0 .1em rgba(255, 255, 255, .35); }
.card .new { top: .8em; left: 50%; transform: translateX(-50%); background: #e63b3b; letter-spacing: .1em; box-shadow: 0 0 .9em rgba(230, 59, 59, .8); }

/* ---- Effets de lumière : balayage (Platine, Légendaire) et foil holographique (prestige) ---- */
.rarity-legendary::after, .rarity-platinum::after {
    content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .38) 50%, transparent 65%);
    transform: translateX(-100%); animation: shine 4s ease-in-out infinite;
}
@keyframes shine { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.card.foil::before {
    content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit;
    background:
        linear-gradient(115deg, transparent 12%, rgba(255, 70, 150, .5) 26%, rgba(255, 210, 70, .5) 37%, rgba(70, 255, 180, .5) 48%,
            rgba(70, 170, 255, .5) 59%, rgba(170, 90, 255, .5) 70%, transparent 84%),
        radial-gradient(circle at 20% 22%, rgba(255, 255, 255, .55) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 68% 58%, rgba(255, 255, 255, .45) 0 1.2px, transparent 2.2px);
    background-size: 320% 320%, 26px 26px, 33px 33px;
    mix-blend-mode: color-dodge; opacity: .55; animation: foil-sweep 5.5s ease-in-out infinite alternate;
}
@keyframes foil-sweep { from { background-position: 0% 0%, 0 0, 0 0; } to { background-position: 100% 100%, 13px 13px, 16px 16px; } }
@media (prefers-reduced-motion: reduce) { .card.foil::before, .rarity-legendary::after, .rarity-platinum::after { animation: none; } a.card:hover { transform: none; } }

/* ---- Album : carte non possédée ---- */
.card.locked { filter: grayscale(1) brightness(.45); opacity: .8; }
.card.locked:hover { filter: grayscale(.6) brightness(.7); }

/* ---- Dos de carte (booster pas encore révélé) : même cadre que les cartes, fond de patinoire sombre ---- */
.card-back {
    --art: url("../images/cards/art-rink-Qq_4U0R.svg");
    position: relative; display: flex; align-items: center; justify-content: center; font-size: 10px; border-radius: 1.7em; padding: .5em; color: #cfe0ff;
    background: linear-gradient(140deg, #d3dae8 0%, #56627d 45%, #d3dae8 70%, #56627d 100%);
    box-shadow: 0 .7em 1.8em rgba(0, 0, 0, .5), inset 0 0 0 .1em rgba(255, 255, 255, .4);
}
.card-back::before {
    content: ""; position: absolute; inset: .5em; border-radius: 1.25em;
    background: var(--art) center / cover no-repeat, radial-gradient(120% 75% at 50% 38%, rgba(110, 150, 255, .4), transparent 62%), linear-gradient(165deg, #17233f, #070b17);
    box-shadow: inset 0 0 2.6em rgba(0, 0, 0, .65), inset 0 0 0 .08em rgba(0, 0, 0, .5);
}
.card-back .disc {
    position: relative; display: grid; place-items: center; width: 9em; height: 9em; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .28), rgba(255, 255, 255, .04));
    box-shadow: 0 0 0 .14em rgba(190, 210, 255, .75), 0 0 0 .8em rgba(190, 210, 255, .1), 0 0 2.2em rgba(80, 130, 255, .55);
}
.card-back .disc b { font-size: 5em; font-weight: 900; line-height: 1; text-shadow: 0 0 .4em rgba(120, 160, 255, .9); }