/* ========== TRADING CARD SHARED STYLES — "Stellar" v2 ========== */

/* Front and Back shared */
.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Outfit', 'Space Grotesk', system-ui, sans-serif;
    /* Force GPU compositing : la nébuleuse est très coûteuse à peindre (13+
       gradients + hue-rotate filter). On crée une couche compositor pour
       chaque carte → peinte une seule fois et conservée en texture, plutôt
       que repeinte à chaque scroll sur mobile. */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    contain: layout paint;
}
.card-back { transform: rotateY(180deg); }

/* === BACKGROUND : le fond cosmique vit sur ::before pour pouvoir être teinté
       par carte (hue-rotate piloté par --card-hue), sans affecter la photo ni
       la couleur de rareté. === */
.card-front {
    background-color: #050717;
}
.card-front::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: #050717;
    background-size: cover;
    background-position: center;
    /* Par défaut (fallback) : palette Rookie. Chaque rareté override ci-dessous. */
    background-image: url('../images/card-nebula-rookie.png');
}
.card-front.rarity-common::before    { background-image: url('../images/card-nebula-rookie.png'); }
.card-front.rarity-uncommon::before  { background-image: url('../images/card-nebula-espoir.png'); }
.card-front.rarity-rare::before      { background-image: url('../images/card-nebula-champion.png'); }
.card-front.rarity-epic::before      { background-image: url('../images/card-nebula-epique.png'); }
.card-front.rarity-legendary::before { background-image: url('../images/card-nebula-legendaire.png'); }
.card-front.rarity-mythic::before    { background-image: url('../images/card-nebula-mythique.png'); }

/* === Bordures et glow par rareté (le fond cosmique reste, on overlaye un teint) === */
.card-front.rarity-common      { border: 2px solid #5a6478; box-shadow: 0 6px 20px rgba(0,0,0,0.45); }
.card-front.rarity-uncommon    { border: 2px solid #4CAF50; box-shadow: 0 6px 24px rgba(76,175,80,0.28), inset 0 0 40px rgba(76,175,80,0.08); }
.card-front.rarity-rare        { border: 2px solid #2196F3; box-shadow: 0 6px 28px rgba(33,150,243,0.32), inset 0 0 50px rgba(33,150,243,0.10); }
.card-front.rarity-epic        { border: 2px solid #9C27B0; box-shadow: 0 6px 32px rgba(156,39,176,0.38), inset 0 0 50px rgba(156,39,176,0.10); }
.card-front.rarity-legendary {
    border: 2px solid #FFD700;
    box-shadow: 0 6px 36px rgba(255,215,0,0.4), inset 0 0 55px rgba(255,215,0,0.10);
    animation: legendaryPulse 3s ease-in-out infinite;
}
@keyframes legendaryPulse {
    0%, 100% { box-shadow: 0 6px 36px rgba(255,215,0,0.4), inset 0 0 55px rgba(255,215,0,0.10); }
    50%      { box-shadow: 0 6px 48px rgba(255,215,0,0.6), inset 0 0 65px rgba(255,215,0,0.18); }
}
.card-front.rarity-mythic {
    border: 2px solid #FF4444;
    box-shadow: 0 6px 40px rgba(255,68,68,0.45), inset 0 0 60px rgba(255,68,68,0.14);
    animation: mythicPulse 2.5s ease-in-out infinite;
}
@keyframes mythicPulse {
    0%, 100% { box-shadow: 0 6px 40px rgba(255,68,68,0.45), inset 0 0 60px rgba(255,68,68,0.14); border-color: #FF4444; }
    50%      { box-shadow: 0 8px 56px rgba(255,68,68,0.65), inset 0 0 70px rgba(255,68,68,0.22); border-color: #FF7070; }
}

/* === Initiale de la rareté en haut-gauche, colorée selon la rareté.
       Élément DOM <span class="card-z-logo">R</span> (le nom de classe est
       gardé pour compatibilité du markup existant). === */
.card-z-logo {
    position: absolute;
    top: 10px; left: 12px;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-style: italic;
    font-size: 1.35rem;
    line-height: 1;
    z-index: 6;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
    pointer-events: none;
}
.rarity-common    .card-z-logo { color: #c4cfde; }
.rarity-uncommon  .card-z-logo { color: #81C784; }
.rarity-rare      .card-z-logo { color: #64B5F6; }
.rarity-epic      .card-z-logo { color: #CE93D8; }
.rarity-legendary .card-z-logo { color: #FFD700; }
.rarity-mythic    .card-z-logo { color: #FF6B6B; }

/* Variante "trait" : on rend une icône FontAwesome au lieu d'une lettre.
   Le badge (pastille sombre semi-transparente avec un liseré clair) garantit
   un contraste correct sur les fonds nébuleuse colorés des rares cartes. */
.card-z-logo--trait {
    font-style: normal;
    font-size: 0.95rem;
    line-height: 1;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    border: 1.5px solid rgba(255,255,255,0.18);
    backdrop-filter: blur(4px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.45);
}
.card-z-logo--trait i {
    filter: drop-shadow(0 0 4px currentColor);
}
/* Petits formats (album mobile, picker compact) : badge à 22px. */
@media (max-width: 768px) {
    .card-z-logo--trait { width: 22px; height: 22px; font-size: 0.8rem; }
}

/* === Décor cosmique : éclair discret + rayons coniques.
       Les "light pillars" verticaux faisaient apparaître des bandes nettes
       sur les flancs — supprimés. Le sparkle conique suffit à éclairer
       l'arrière-plan de manière organique. === */
.card-front::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1; /* derrière le portrait (z-index:2), au-dessus du fond */
    background-image:
        /* éclair discret bas-droite (SVG inline) */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' fill-opacity='0.22' d='M13 2 L4.09 13.5 c-.6 .74 -.08 1.83 .87 1.83 H11 l-1 7 8.91-11.5 c.6 -.74 .08 -1.83 -.87 -1.83 H13 l1 -7z'/></svg>"),
        /* rayons coniques (sparkle) émanant derrière l'athlète */
        conic-gradient(from 195deg at 50% 30%, transparent 0deg, rgba(255,230,200,0.10) 4deg, transparent 12deg, transparent 130deg, rgba(255,200,230,0.08) 138deg, transparent 148deg, transparent 230deg, rgba(180,200,255,0.06) 238deg, transparent 246deg, transparent 360deg);
    background-repeat: no-repeat;
    background-position:
        92% 92%,
        center;
    background-size:
        24px 32px,
        100% 100%;
    mix-blend-mode: screen;
    opacity: 0.95;
}

/* === Bandeau du haut : tag rareté à droite, points en badge néon === */
.card-top-banner {
    padding: 10px 14px 6px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 5; /* doit rester au-dessus de la photo */
}
.card-rarity-tag {
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    padding: 3px 8px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
}
.rarity-common    .card-rarity-tag { background: rgba(139,155,180,0.25); color: #c4cfde; border: 1px solid rgba(139,155,180,0.4); }
.rarity-uncommon  .card-rarity-tag { background: rgba(76,175,80,0.22); color: #A5D6A7; border: 1px solid rgba(76,175,80,0.5); }
.rarity-rare      .card-rarity-tag { background: rgba(33,150,243,0.22); color: #90CAF9; border: 1px solid rgba(33,150,243,0.5); }
.rarity-epic      .card-rarity-tag { background: rgba(156,39,176,0.25); color: #E1BEE7; border: 1px solid rgba(156,39,176,0.55); }
.rarity-legendary .card-rarity-tag { background: rgba(255,215,0,0.22); color: #FFE57F; border: 1px solid rgba(255,215,0,0.55); }
.rarity-mythic    .card-rarity-tag { background: rgba(255,68,68,0.25); color: #FFCDD2; border: 1px solid rgba(255,68,68,0.6); }

.card-points-badge {
    font-size: 0.7rem;
    font-weight: 800;
    color: #0a0a0a;
    background: linear-gradient(135deg, #FFD86B, #FFC800);
    padding: 3px 9px;
    border-radius: 100px;
    box-shadow: 0 2px 8px rgba(255,200,0,0.35);
    letter-spacing: 0.3px;
}

/* === Zone avatar/photo : on laisse la photo dépasser en haut ; c'est .card-front
       qui clippe l'ensemble (overflow:hidden + border-radius). Sinon le clip ici
       trace une ligne horizontale visible sur les photos détourées. === */
.card-avatar-zone {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    min-height: 0;
    overflow: visible;
}
/* Halo nébuleuse de la rareté derrière le portrait */
.card-avatar-zone::before {
    content: '';
    position: absolute;
    width: 78%; padding-bottom: 78%;
    border-radius: 50%;
    opacity: 0.28;
    filter: blur(6px);
    z-index: 0;
}
.rarity-common    .card-avatar-zone::before { background: radial-gradient(circle, #8b9bb4 0%, transparent 65%); }
.rarity-uncommon  .card-avatar-zone::before { background: radial-gradient(circle, #4CAF50 0%, transparent 65%); }
.rarity-rare      .card-avatar-zone::before { background: radial-gradient(circle, #2196F3 0%, transparent 65%); }
.rarity-epic      .card-avatar-zone::before { background: radial-gradient(circle, #9C27B0 0%, transparent 65%); }
.rarity-legendary .card-avatar-zone::before { background: radial-gradient(circle, #FFD700 0%, transparent 65%); }
.rarity-mythic    .card-avatar-zone::before { background: radial-gradient(circle, #FF4444 0%, transparent 65%); }

/* Avatar = initiales géantes (placeholder en attendant les photos) */
.card-avatar {
    position: relative;
    z-index: 2;
    width: 56%;
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -1px;
    text-shadow: 0 4px 14px rgba(0,0,0,0.4);
    border: 2px solid rgba(255,255,255,0.15);
    box-shadow: inset 0 -10px 25px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
}
.card-avatar.male   { background: linear-gradient(155deg, #2563eb 0%, #1e3a8a 100%); }
.card-avatar.female { background: linear-gradient(155deg, #ec4899 0%, #831843 100%); }

/* === PHOTO de l'athlète : par défaut on applique un vignette dégradé
       (utile pour les photos rectangulaires sans transparence). Pour les
       photos détourées (PNG transparent → classe .is-alpha), on retire
       le masque pour ne pas re-couper le sujet. === */
.card-avatar-photo {
    position: relative; z-index: 2;
    height: 110%;
    max-width: 100%;
    width: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center top;
    -webkit-mask-image:
        linear-gradient(to bottom, transparent 0%, black 22%, black 55%, transparent 100%),
        linear-gradient(to right,  transparent 0%, black 20%, black 80%, transparent 100%);
            mask-image:
        linear-gradient(to bottom, transparent 0%, black 22%, black 55%, transparent 100%),
        linear-gradient(to right,  transparent 0%, black 20%, black 80%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.45));
}
/* Photo détourée (PNG avec alpha) : rendu brut, sans masque ni ombre.
   Juste le PNG transparent posé sur la nébuleuse. */
.card-avatar-photo.is-alpha {
    height: 104%;
    -webkit-mask-image: none;
            mask-image: none;
    filter: none;
}

/* Indicateur genre, petit chip dans le coin */
.card-gender-icon {
    position: absolute;
    bottom: 4%; right: 14%;
    width: 24px; height: 24px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.65rem; color: #fff;
    z-index: 3;
    border: 2px solid rgba(255,255,255,0.2);
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.card-gender-icon.male   { background: #2563eb; }
.card-gender-icon.female { background: #ec4899; }

/* === Plaque nom de l'athlète : grande typo majuscule, façon Sorare === */
.card-name-plate {
    padding: 6px 14px 4px;
    text-align: center;
    position: relative;
    z-index: 2;
}
.card-name-plate::before {
    content: '';
    position: absolute;
    top: 0; left: 12%; right: 12%;
    height: 1px;
}
.rarity-common    .card-name-plate::before { background: linear-gradient(90deg, transparent, rgba(139,155,180,0.6), transparent); }
.rarity-uncommon  .card-name-plate::before { background: linear-gradient(90deg, transparent, #4CAF50, transparent); }
.rarity-rare      .card-name-plate::before { background: linear-gradient(90deg, transparent, #2196F3, transparent); }
.rarity-epic      .card-name-plate::before { background: linear-gradient(90deg, transparent, #9C27B0, transparent); }
.rarity-legendary .card-name-plate::before { background: linear-gradient(90deg, transparent, #FFD700, transparent); }
.rarity-mythic    .card-name-plate::before { background: linear-gradient(90deg, transparent, #FF4444, transparent); }

.card-athlete-name {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0 0 2px 0;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 2px 6px rgba(0,0,0,0.45);
}
.card-specialty {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
}
.rarity-common    .card-specialty { color: #c4cfde; }
.rarity-uncommon  .card-specialty { color: #81C784; }
.rarity-rare      .card-specialty { color: #64B5F6; }
.rarity-epic      .card-specialty { color: #CE93D8; }
.rarity-legendary .card-specialty { color: #FFD700; }
.rarity-mythic    .card-specialty { color: #FF6B6B; }

/* === Barre de stats — 3 cases, glassmorphisme léger === */
.card-stats-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.06);
    margin-top: 4px;
    position: relative;
    z-index: 2;
}
.card-stat-item {
    padding: 7px 4px;
    text-align: center;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(2px);
}
.card-stat-val {
    display: block;
    font-size: 0.92rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
}
.card-stat-lbl {
    font-size: 0.55rem;
    color: #8aa4c8;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

/* === Bas : club + ville === */
.card-bottom-bar {
    padding: 6px 14px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.35));
}
.card-club {
    font-size: 0.6rem;
    color: #b0bccb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1; min-width: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}
.card-club i { color: #FFC800; margin-right: 4px; }