/**
 * Fantacalcinaccio - aspetto della card
 *
 * Tutte le misure sono espresse in cqw, cioe' in percentuale della larghezza
 * della card. Il risultato e' che la card si comporta allo stesso modo a
 * qualsiasi dimensione: da 250 pixel in una griglia fino a schermo intero,
 * i numeri restano dentro le caselle senza nessuna regola aggiuntiva.
 *
 * Le posizioni sono ricavate per misura diretta dal file grafico:
 * cornice 1152 x 2048, riquadro rating, cerchio della giornata, fascia del
 * ruolo e sei celle dei valori.
 */

.fanta-card-wrap {
    --fanta-oro-chiaro: #f3d98b;
    --fanta-oro:        #d4af37;
    --fanta-oro-scuro:  #a67c1e;
    --fanta-ombra:      rgba(0, 0, 0, .55);

    /* Corpo dei caratteri, in percentuale della larghezza della card.
       Ricavati misurando i numeri disegnati a mano nel mockup originale.
       Si regolano da qui senza toccare il resto del foglio. */
    --fanta-corpo-rating:   20cqw;
    --fanta-corpo-valore:   8.5cqw;
    --fanta-corpo-ruolo:    5.5cqw;
    --fanta-corpo-giornata: 7cqw;

    /* Colore dei valori cresciuti al massimo nell'ultima giornata.
       Il bianco funziona perche' non aggiunge un colore alla card: il numero
       sembra accendersi invece di cambiare tinta.
       Alternative gia' provate a mente: #1f7a4d smeraldo scuro (sta nel
       tricolore dello sfondo), #d94fa0 fuxia (si vede benissimo ma non
       appartiene alla tavolozza). Si cambia solo questa riga. */
    --fanta-acceso: #fffdf5;

    /* Colore dei valori scesi rispetto alla giornata precedente.
       Predisposto: oggi nessun valore scende, quindi non si vede mai.
       Il rosa si distingue benissimo sulla card grande, meno nella rosa in
       miniatura dove bianco e rosa hanno la stessa luminosita'. Alternative
       piu' leggibili da piccole, perche' piu' spente dell'oro:
       #a8465f rosa scuro, #9c4436 mattone smorto. */
    --fanta-calo: #e88bb0;

    /* Colore del ruolo sotto il nome. Con l'oro si legge come parte del nome;
       staccarlo aiuta, visto che e' la sola cosa che cambia ogni settimana. */
    --fanta-ruolo-colore: #f0ece0;

    /* Colore dei valori toccati dall'allenamento nel simulatore di posizione.
       Un azzurro chiaro: non e' oro e non e' il bianco delle accensioni,
       quindi non si confonde con nessuno dei due significati gia' in uso. */
    --fanta-allenato: #7fd4f5;

    display: inline-block;
    max-width: 100%;
    width: 100%;
}

.fanta-card {
    container-type: inline-size;

    position: relative;
    width: 100%;
    aspect-ratio: 1152 / 2048;

    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;

    font-family: Impact, "Anton", "Haettenschweiler",
                 "Franklin Gothic Bold", "Arial Narrow Bold", sans-serif;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

/* Oro dei numeri. Il gradiente e' ritagliato dentro le lettere.
   Se un giorno arriva la texture a scaglie, basta sostituire il gradiente
   con l'immagine: il resto della regola non cambia. */
.fanta-card .fanta-oro {
    background-image: linear-gradient(
        170deg,
        var(--fanta-oro-chiaro) 0%,
        var(--fanta-oro) 38%,
        var(--fanta-oro-scuro) 62%,
        var(--fanta-oro-chiaro) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Elemento generico posizionato: il punto indicato e' il centro. */
.fanta-card .fanta-slot {
    position: absolute;
    transform: translate(-50%, -50%);
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
}

/* ---- Rating ---- */
.fanta-card .fanta-rating {
    left: 21.2%;
    top: 20.6%;
    font-size: var(--fanta-corpo-rating);
}

/* ---- Giornata, dentro il cerchio in alto a destra ---- */
.fanta-card .fanta-giornata {
    left: 83.5%;
    top: 12.9%;
    font-size: var(--fanta-corpo-giornata);
    letter-spacing: -0.02em;
}

/* Il cerchio della giornata e' stretto: con due cifre e l'asterisco delle
   giornate provvisorie il testo passa da due a quattro caratteri. */
.fanta-card .fanta-giornata.is-media { font-size: calc(var(--fanta-corpo-giornata) * 0.80); }
.fanta-card .fanta-giornata.is-lungo { font-size: calc(var(--fanta-corpo-giornata) * 0.65); }

/* ---- Ruolo, sotto il nome ---- */
.fanta-card .fanta-ruolo {
    left: 50%;
    top: 81.4%;
    width: 86%;
    font-size: var(--fanta-corpo-ruolo);
    letter-spacing: 0.01em;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* I ruoli lunghi rimpiccioliscono invece di uscire dalla fascia.
   Le soglie corrispondono ai nomi della matrice: Jolly e Ala da una parte,
   Centrale di costruzione e Terzino fluidificante dall'altra. */
/* Il ruolo non usa l'oro: per sostituire il gradiente con una tinta piena
   va annullato il ritaglio del fondo dentro le lettere.
   Per riportarlo all'oro, commentare queste tre righe. */
.fanta-card .fanta-ruolo {
    background-image: none;
    color: var(--fanta-ruolo-colore);
    -webkit-text-fill-color: var(--fanta-ruolo-colore);
}

.fanta-card .fanta-ruolo.is-media  { font-size: calc(var(--fanta-corpo-ruolo) * 0.85); }
.fanta-card .fanta-ruolo.is-lungo  { font-size: calc(var(--fanta-corpo-ruolo) * 0.68); }

/* ---- I sei valori ---- */
.fanta-card .fanta-valore {
    top: 90.8%;
    font-size: var(--fanta-corpo-valore);
}

.fanta-card .fanta-v1 { left: 14.5%; }
.fanta-card .fanta-v2 { left: 29.3%; }
.fanta-card .fanta-v3 { left: 43.1%; }
.fanta-card .fanta-v4 { left: 56.8%; }
.fanta-card .fanta-v5 { left: 70.7%; }
.fanta-card .fanta-v6 { left: 85.4%; }

/* ---- Valori cresciuti al massimo ----
   Il gradiente dorato viene sostituito da una tinta piena: per farlo serve
   annullare il ritaglio del fondo dentro le lettere, altrimenti il colore
   resterebbe trasparente. */
.fanta-card .fanta-valore.is-alto {
    background-image: none;
    color: var(--fanta-acceso);
    -webkit-text-fill-color: var(--fanta-acceso);
    text-shadow: 0 0 calc(var(--fanta-corpo-valore) * 0.12) rgba(255, 255, 255, .45);
}

/* ---- Valori scesi ----
   Attivo da subito, ma oggi nessun valore scende: la regola resta in attesa
   che i decrementi entrino nel metodo. */
.fanta-card .fanta-valore.is-calo {
    background-image: none;
    color: var(--fanta-calo);
    -webkit-text-fill-color: var(--fanta-calo);
}

/* Livello intermedio, per gli incrementi di 2. Disattivato: sui dati delle
   prime due giornate quasi tutti i valori sarebbero accesi.
   Per provarlo, togliere i segni di commento.

.fanta-card .fanta-valore.is-medio {
    background-image: none;
    color: var(--fanta-acceso);
    -webkit-text-fill-color: var(--fanta-acceso);
    opacity: .72;
}
*/

/* ---- Valori toccati dall'allenamento (simulatore) ---- */
.fanta-card .fanta-valore.is-allenato {
    background-image: none;
    color: var(--fanta-allenato);
    -webkit-text-fill-color: var(--fanta-allenato);
    text-shadow: 0 0 calc(var(--fanta-corpo-valore) * 0.12) rgba(127, 212, 245, .45);
}

/* ---- Barra del simulatore ---- */
.fanta-sim {
    /* Le variabili colore vivono su .fanta-card-wrap, che qui non e' un
       antenato: vanno ridichiarate, altrimenti il browser scarta le righe
       che le usano e i pulsanti restano nudi. */
    --fanta-oro-chiaro: #f3d98b;
    --fanta-oro:        #d4af37;
    --fanta-oro-scuro:  #a67c1e;
    --fanta-allenato:   #7fd4f5;

    margin-bottom: 22px;
}

.fanta-sim-testo {
    max-width: 760px;
    margin: 0 0 20px;
    padding: 16px 20px;
    border-left: 3px solid var(--fanta-oro, #d4af37);
    background: rgba(20, 32, 47, .06);
    border-radius: 0 6px 6px 0;
}

.fanta-sim-testo p {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.55;
}

.fanta-sim-testo p:last-child {
    margin-bottom: 0;
}

.fanta-sim-testo strong {
    font-weight: 600;
}

.fanta-sim-blu {
    color: #2a8fb5;
    font-weight: 600;
}

.fanta-sim-nota {
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, .12);
    font-style: italic;
    opacity: .75;
}

.fanta-sim-bottoni {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fanta-sim-btn {
    padding: 10px 20px;
    border: 2px solid var(--fanta-oro-scuro, #a67c1e);
    border-radius: 6px;
    background: #14202f;
    color: var(--fanta-oro-chiaro, #f3d98b);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.fanta-sim-btn:hover {
    border-color: var(--fanta-oro, #d4af37);
    background: #1d2c3f;
    color: #fff;
}

.fanta-sim-btn.is-attivo {
    border-color: var(--fanta-allenato, #7fd4f5);
    background: var(--fanta-allenato, #7fd4f5);
    color: #0d1a2b;
    box-shadow: 0 0 0 3px rgba(127, 212, 245, .25);
}

.fanta-sim-btn.is-attivo:hover {
    color: #0d1a2b;
}

/* ---- Giornata provvisoria ---- */
.fanta-card .fanta-provvisoria {
    font-size: 0.7em;
    vertical-align: super;
}

/* ---- Griglia della rosa ---- */
.fanta-rosa {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(var(--fanta-colonne, 4), minmax(0, 1fr));
}

.fanta-rosa .fanta-card-wrap {
    width: 100%;
}

/* Su schermi stretti la griglia si riduce da sola: sotto una certa
   larghezza il ruolo diventerebbe illeggibile in qualunque carattere. */
@media (max-width: 900px) {
    .fanta-rosa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
    .fanta-rosa { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

/* ---- Messaggi ---- */
.fanta-avviso {
    padding: 14px 18px;
    border-left: 4px solid var(--fanta-oro);
    background: rgba(0, 0, 0, .04);
}