/* ============================================================
   FUT CARD — FantaUML (v6)
   Footer posizionato in absolute per garantire che resti SEMPRE
   dentro la card, indipendentemente dal flex parent.
   ============================================================ */

:root {
    --vinaccia-base: #120028;
    --vinaccia-top:  #2a0a52;
    --rosa-neon:     #ff19ff;
    --bianco:        #ffffff;
}

/* Wrapper esterno */
.fut-card-wrapper {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 110px !important;
    font-family: 'HelveticaBold', Helvetica, Arial, sans-serif;
    box-sizing: border-box !important;
}

/* ---------- La card ---------- */
.fut-card {
    position: relative !important;
    width: 110px !important;
    height: 110px !important;
    min-height: 110px !important;
    max-height: 110px !important;
    box-sizing: border-box !important;
    padding: 6px 8px 0 8px !important;  /* niente padding-bottom: il footer è absolute */

    border-radius: 4px 22px 4px 22px;

    background: linear-gradient(
        180deg,
        var(--vinaccia-top)  0%,
        #1e0540             35%,
        var(--vinaccia-base) 75%,
        var(--vinaccia-base) 100%
    );

    border: 1px solid rgba(255, 25, 255, 0.4);
    box-shadow:
        0 0 0 1px rgba(255, 25, 255, 0.08),
        0 4px 14px rgba(0, 0, 0, 0.55),
        0 0 18px rgba(255, 25, 255, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    overflow: visible !important;
    /* NO flex sulla card: posizioniamo manualmente */
}

/* ============================================================
   EFFETTO SHINE: striscia di luce diagonale che attraversa la card
   ogni 6 secondi. Sta DIETRO il contenuto (pic/name/footer) ma
   SOPRA lo sfondo gradient, così illumina solo la card senza
   sbiancare foto e testi.
   La maschera verticale blocca lo shine sopra l'area del footer
   (footer è a bottom:6px + height:18px = ultimi 24px della card).
   ============================================================ */
.fut-card::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: 0 !important;

    background: linear-gradient(
        115deg,
        transparent 0%,
        transparent 35%,
        rgba(255, 255, 255, 0.0)  42%,
        rgba(255, 255, 255, 0.18) 50%,
        rgba(255, 25, 255, 0.12)  56%,
        rgba(255, 255, 255, 0.0)  64%,
        transparent 75%,
        transparent 100%
    );
    background-size: 250% 250%;
    background-position: 120% 120%;

    /* Maschera: shine visibile solo nella parte alta della card (fino a 74%),
       sfumando dolcemente a zero prima di arrivare al footer */
    -webkit-mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 68%,
        transparent 78%,
        transparent 100%
    );
            mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 68%,
        transparent 78%,
        transparent 100%
    );

    animation: fut-shine 6s ease-in-out infinite;
}

@keyframes fut-shine {
    0%, 60% {
        background-position: 120% 120%;
        opacity: 0;
    }
    65% {
        opacity: 1;
    }
    100% {
        background-position: -20% -20%;
        opacity: 0;
    }
}

/* Ritardo casuale tra card per non farle brillare tutte insieme */
.fut-card-wrapper:nth-child(2n)   .fut-card::after { animation-delay: 1.5s; }
.fut-card-wrapper:nth-child(3n)   .fut-card::after { animation-delay: 3s;   }
.fut-card-wrapper:nth-child(4n)   .fut-card::after { animation-delay: 4.5s; }
.fut-card-wrapper:nth-child(5n)   .fut-card::after { animation-delay: 2.2s; }

/* Wrapper della foto: fa da sfondo vinaccia (non filtrato) */
.fut-card .fut-card__pic-wrap {
    position: relative !important;
    z-index: 1 !important;
    width: 56px !important;
    height: 56px !important;
    margin: 0 auto !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background-color: var(--vinaccia-base) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
}

/* Foto giocatore: riempie il wrapper, solo su di essa si applica il filter */
.fut-card .fut-card__pic {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    margin: 0 !important;
    padding: 0 !important;

    filter:
        brightness(1.08)
        saturate(1.10)
        hue-rotate(-8deg)
        contrast(1.02);
}

/* Cognome: sotto la foto, centrato */
.fut-card .fut-card__name {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    height: 13px !important;
    max-height: 13px !important;
    line-height: 13px !important;
    margin: 4px 0 0 0 !important;
    padding: 0 !important;
    font-family: 'DrukWide', 'Helvetica Neue', sans-serif !important;
    font-style: italic;
    font-weight: 700;
    color: var(--rosa-neon) !important;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.4px;
    text-align: center !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    overflow: visible;
    white-space: nowrap !important;
    transition: font-size 0.15s ease, letter-spacing 0.15s ease;
}

.fut-card .fut-card__name.is-long  { font-size: 8.5px !important; letter-spacing: 0.25px !important; }
.fut-card .fut-card__name.is-xlong { font-size: 7px   !important; letter-spacing: 0.1px  !important; }

/* FOOTER in POSITION ABSOLUTE: ancorato al fondo interno della card */
.fut-card .fut-card__footer {
    position: absolute !important;
    z-index: 1 !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 6px !important;
    height: 18px !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Separatore verticale semi-trasparente tra stemma e bandiera */
.fut-card .fut-card__footer::before {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 0.5px !important;
    height: 12px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    pointer-events: none !important;
}

.fut-card .fut-card__crest {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    flex: 0 0 auto !important;
    border-radius: 50% !important;
    background: transparent;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.fut-card .fut-card__flag {
    width: 14px !important;
    height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    flex: 0 0 auto !important;
    border-radius: 2px !important;
    object-fit: cover !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

/* Badge Capitano */
.fut-card .fut-card__captain {
    position: absolute !important;
    top: -5px !important;
    left: -5px !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: var(--rosa-neon);
    color: var(--bianco);
    font-family: 'DrukWide', 'Helvetica Neue', sans-serif;
    font-weight: 900;
    font-size: 10px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1.5px solid var(--bianco);
    box-shadow: 0 0 8px rgba(255, 25, 255, 0.8);
    z-index: 5 !important;
}

/* ---------- Ruolo DENTRO la card (angolo alto-sinistra) ---------- */
.fut-card .fut-card__role {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    z-index: 2 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;

    width: 16px !important;
    padding: 0 !important;
    margin: 0 !important;

    font-family: 'HelveticaBold', Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: var(--bianco);
    text-transform: uppercase;
    line-height: 1;
    text-align: center;
    pointer-events: none;
}

.fut-card .fut-card__role-icon {
    color: var(--rosa-neon) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    filter: drop-shadow(0 0 3px rgba(255, 25, 255, 0.6));
}

.fut-card .fut-card__role-text {
    display: block !important;
    font-size: 7px !important;
    letter-spacing: 0.4px !important;
    line-height: 1 !important;
    color: var(--bianco) !important;
    opacity: 0.9;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* ---------- Valore (crediti) DENTRO la card, sotto il ruolo ---------- */
.fut-card .fut-card__value {
    position: absolute !important;
    top: 36px !important;
    left: 6px !important;
    z-index: 2 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;

    width: 16px !important;
    padding: 0 !important;
    margin: 0 !important;

    font-family: 'HelveticaBold', Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: var(--bianco);
    line-height: 1;
    text-align: center;
    pointer-events: none;
}

.fut-card .fut-card__value-icon {
    color: var(--rosa-neon) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    filter: drop-shadow(0 0 3px rgba(255, 25, 255, 0.6));
}

.fut-card .fut-card__value-text {
    display: block !important;
    font-size: 7px !important;
    line-height: 1 !important;
    color: var(--bianco) !important;
    opacity: 0.9;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Rispetta le preferenze di accessibilità: niente shine se ridotto */
@media (prefers-reduced-motion: reduce) {
    .fut-card::after {
        animation: none !important;
        opacity: 0 !important;
    }
}