/* ============================================================
   Lega — classifica e calendario
   ============================================================
   Costruita sulle primitive: .fw-band per la fascia, .fw-panel per i due
   riquadri, .fw-table per la classifica, .fw-chip per le giornate.
   ============================================================ */

.lg-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

/* ---- Fascia ------------------------------------------------------------ */
.lg-band { border-radius: var(--r-md); }

.lg-band-inner {
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-4);
    justify-content: space-between;
}

.lg-band-id { align-items: center; display: flex; gap: var(--sp-3); min-width: 0; }
.lg-band-kpis { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

.lg-band-kpi {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 84px;
}

.lg-band-kpi + .lg-band-kpi {
    border-left: 1px solid rgba(255, 255, 255, .2);
    padding-left: var(--sp-4);
}

.lg-band-kpi .fw-micro { color: inherit; opacity: .7; }
.lg-band-val { font-size: var(--fs-xl); font-weight: 700; line-height: var(--lh-tight); }
.lg-band-sub { font-size: var(--fs-micro); opacity: .7; }

/* ---- Le due colonne ---------------------------------------------------- */
.lg-grid {
    align-items: start;
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
}

@media (max-width: 1099px) {
    .lg-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Classifica -------------------------------------------------------- */
.lg-tabella-wrap { overflow-x: auto; }
.lg-tabella { width: 100%; }
.lg-tabella :is(th, td) { padding-left: var(--sp-2); padding-right: var(--sp-2); }
.lg-c-nome { max-width: 0; text-align: left; width: 100%; }
.lg-tabella :is(.lg-c-pos, .fw-num) { white-space: nowrap; width: 1%; }

.lg-pos {
    align-items: center;
    background: var(--bg-raised);
    border-radius: var(--r-full);
    color: var(--ink-2);
    display: inline-flex;
    font-size: var(--fs-micro);
    font-weight: 700;
    height: 22px;
    justify-content: center;
    width: 22px;
}

.lg-squadra { align-items: center; display: flex; gap: var(--sp-2); min-width: 0; }
.lg-squadra .avatar { border-radius: 50%; flex-shrink: 0; }

.lg-nome {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lg-avatar-vuoto {
    background: var(--bg-sunken);
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    height: 24px;
    width: 24px;
}

.lg-pt { color: var(--ink-1); font-weight: 700; }

/* La propria squadra si trova a colpo d'occhio, senza cercarla nel nome. */
.lg-mia td {
    background: var(--navy-tint);
    font-weight: 600;
}

.lg-mia .lg-pos { background: var(--navy); color: #fff; }

/* ---- Calendario -------------------------------------------------------- */
.lg-giornate {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    margin-bottom: var(--sp-3);
}

.lg-giornate .fw-chip {
    justify-content: center;
    min-width: 34px;
    padding: 3px 8px;
}

.lg-sfide { display: flex; flex-direction: column; gap: var(--sp-2); }

.lg-sfida {
    align-items: center;
    background: var(--bg-sunken);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    display: grid;
    gap: var(--sp-2);
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    padding: var(--sp-2) var(--sp-3);
}

.lg-da-giocare { background: var(--bg-surface); }

.lg-lato {
    align-items: center;
    display: flex;
    gap: var(--sp-2);
    min-width: 0;
}

/* Il lato di destra si specchia: le due squadre si guardano in faccia. */
.lg-sfida .lg-lato:last-of-type { flex-direction: row-reverse; text-align: right; }

.lg-lato .avatar { border-radius: 50%; flex-shrink: 0; }

.lg-lato-nome {
    color: var(--ink-1);
    font-size: var(--fs-sm);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lg-vince .lg-lato-nome { color: var(--positive-ink); }
.lg-fp { color: var(--ink-3); font-size: var(--fs-micro); flex-shrink: 0; }

.lg-esito {
    color: var(--ink-1);
    flex-shrink: 0;
    font-size: var(--fs-md);
    font-variant-numeric: tabular-nums;
    min-width: 58px;
    text-align: center;
}

.lg-esito .fw-micro { color: var(--ink-3); }
.lg-esito-vivo { align-items: center; display: flex; flex-direction: column; line-height: 1; }
.lg-card-gol { color: var(--navy); font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.04em; }
.lg-card-punti { color: var(--ink-3); font-size: .66rem; font-weight: 600; margin-top: 3px; }
.lg-card-live { color: var(--live-ink, #c62828); font-size: .55rem; font-weight: 800; letter-spacing: .08em; margin-top: 4px; }
.lg-vuoto { color: var(--ink-3); margin: 0; text-align: center; }

@media (max-width: 599px) {
    .lg-band-kpi + .lg-band-kpi { border-left: 0; padding-left: 0; }
    .lg-band-kpis { gap: var(--sp-3); width: 100%; }
    .lg-c-vnp { display: none; }
    .lg-sfida { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
    .lg-fp { display: none; }
}

/* ---- Sotto-schede della lega ------------------------------------------
   La scheda Lega tiene dentro Classifica, Calendario, Regole e Verifica:
   la barra in alto ha gia' nove voci e su telefono scorre. */
.lg-wrap #lg-sez { margin-bottom: var(--sp-4); }

/* Con quattro voci il segmentato non ci sta in 390px e spingeva fuori tutta
   la pagina. Scorre, come gia' fa la barra principale in alto: meglio uno
   scorrimento dichiarato che una pagina che balla di lato. */
@media (max-width: 767px) {
    .lg-wrap #lg-sez {
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .lg-wrap #lg-sez::-webkit-scrollbar { display: none; }
    .lg-wrap #lg-sez .fw-seg-item { flex: 0 0 auto; }
}

/* Colonne che si possono ricostruire a mente: su telefono sparisce
   la meno utile, non si stringe tutto fino a diventare illeggibile. */
@media (max-width: 767px) {
    .lg-tabella .lg-c-opz { display: none; }
}

.lg-avviso {
    align-items: flex-start;
    background: var(--caution-tint);
    border-radius: var(--r-sm);
    color: var(--caution-ink);
    display: flex;
    font-size: var(--fs-sm);
    gap: var(--sp-2);
    margin: 0 0 var(--sp-3);
    padding: var(--sp-3);
}

.lg-nota { color: var(--ink-3); margin: var(--sp-3) 0 0; }

/* ---- Testata della giornata ---- */
.lg-testata {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-3);
}

.lg-testata .fw-micro { color: var(--ink-3); }
.lg-comandi { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-left: auto; }

/* ---- Sfida apribile ---- */
.lg-apribile { cursor: pointer; transition: background var(--t-fast) var(--ease); }
.lg-apribile:hover, .lg-apribile:focus-visible { background: var(--bg-raised); }

/* ---- Il referto ------------------------------------------------------- */
.lg-referto-meta { color: var(--ink-3); margin: 0 0 var(--sp-4); }

.lg-scoreboard { background: linear-gradient(135deg, var(--navy-tint), var(--bg-surface)); border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4); }
.lg-scoreboard-meta { align-items: center; color: var(--ink-3); display: flex; font-size: var(--fs-micro); gap: var(--sp-2); justify-content: center; }
.lg-scoreboard-stato { align-items: center; background: var(--positive); border-radius: 999px; color: #fff; display: inline-flex; font-weight: 800; gap: 5px; letter-spacing: .06em; padding: 3px 9px; }
.lg-scoreboard-finale .lg-scoreboard-stato { background: var(--navy); }
.lg-scoreboard-principale { align-items: center; display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); margin-top: var(--sp-2); }
.lg-scoreboard-team { color: var(--navy-ink); font-size: var(--fs-lg); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lg-scoreboard-team-dx { text-align: right; }
.lg-scoreboard-risultato { align-items: center; color: var(--navy); display: grid; gap: 0 var(--sp-3); grid-template-columns: 1fr auto 1fr; text-align: center; }
.lg-scoreboard-risultato .fw-num { font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 800; line-height: .95; min-width: 1ch; }
.lg-scoreboard-risultato b { color: var(--ink-3); font-size: var(--fs-xl); }
.lg-scoreboard-risultato small { color: var(--ink-3); font-size: .62rem; grid-column: 1 / -1; letter-spacing: var(--tracking-micro); margin-top: 4px; text-transform: uppercase; }
.lg-scoreboard-punti { display: grid; font-size: var(--fs-sm); gap: 2px var(--sp-3); grid-template-columns: 1fr minmax(9rem, auto) 1fr; margin: var(--sp-2) auto 0; max-width: 31rem; text-align: center; }
.lg-scoreboard-punti .fw-num { color: var(--navy); font-weight: 700; }
.lg-scoreboard-punti .fw-num:first-child { text-align: right; }
.lg-scoreboard-punti .fw-num:nth-child(3n) { text-align: left; }
.lg-scoreboard-punti > span:nth-child(3n + 2) { color: var(--ink-3); font-size: var(--fs-micro); text-transform: uppercase; }
.lg-scoreboard-nota { margin: var(--sp-2) 0 0; text-align: center; }
/* Il totale nella testata c'era gia' ma era spento, perche' il tabellone
   qui sopra lo ripeteva. Adesso serve: accanto al nome dice a colpo d'occhio
   quanto sta facendo quella squadra, e a giornata in corso sotto ci va il
   parziale vero accanto alla proiezione. */
.lg-referto .lg-lato-tot { display: inline; }

.lg-referto-lati {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Le due formazioni restano affiancate anche sul telefono: e' un confronto,
   e un confronto si legge accanto. Impilate obbligavano a scorrere undici
   righe per vedere chi era in campo dall'altra parte, e a tenere a mente il
   primo tempo di lettura. In mezza larghezza la riga perde quello che non
   serve al confronto (la faccia, il voto secco, i margini) e tiene il nome
   e il fantavoto, che e' il numero che fa il risultato. */
@media (max-width: 767px) {
    .lg-referto-lati { gap: var(--sp-2); }
    .lg-referto-lati .lg-lato-blocco { padding: var(--sp-2); }
    .lg-referto-lati .lg-lato-testa { gap: var(--sp-1); margin-bottom: var(--sp-2); }
    .lg-referto-lati .lg-lato-testa h3 { font-size: var(--fs-sm); }
    .lg-referto-lati .lg-lato-testa .avatar,
    .lg-referto-lati .lg-lato-logo-vuoto { height: 24px; width: 24px; }
    .lg-referto-lati .lg-faccia { display: none; }
    .lg-referto-lati .lg-perche { display: none; }

    /* In mezza larghezza ruolo, nome, eventi e voto non ci stanno in fila.
       La riga si apre su due piani, ma solo in mezzo: ruolo e voto tengono le
       loro colonne su tutta l'altezza, il nome sta sopra e quello che gli e'
       successo sotto.

       E' una griglia e non un flex che va a capo: col flex bastavano due gol
       e una freccia perche' il voto scivolasse su un terzo piano e la riga si
       sfasciasse. Le caselle ci sono sempre, anche vuote, cosi' le righe delle
       due squadre restano alte uguali e si leggono a coppie. */
    .lg-referto-lati .lg-riga {
        align-items: center;
        column-gap: 4px;
        display: grid;
        grid-template-areas: "ruolo nome   nome  voto"
                             "ruolo eventi stato voto";
        grid-template-columns: auto 1fr auto auto;
        min-height: 42px;
        padding: 3px 5px;
        row-gap: 1px;
    }
    /* Il ruolo sta prima del nome, come in ogni formazione scritta: e' la
       prima cosa che si cerca scorrendo una colonna di ventidue persone.
       Tiene la sua colonna su tutte e due le righe, e a destra il voto fa lo
       stesso: in mezzo restano il nome sopra e, se c'e' qualcosa da dire,
       eventi e freccia sotto. Le caselle ci sono sempre, anche vuote. */
    .lg-referto-lati .lg-ruolo { align-self: center; grid-area: ruolo; }
    .lg-referto-lati .lg-riga-nome { font-size: var(--fs-sm); grid-area: nome; }
    .lg-referto-lati .lg-eventi { grid-area: eventi; min-width: 0; overflow: hidden; }
    .lg-referto-lati .lg-stato { grid-area: stato; justify-self: end; }
    .lg-referto-lati .lg-voti,
    .lg-referto-lati .lg-prob { align-self: center; grid-area: voto; justify-self: end; }
    /* Voto sopra, fantavoto sotto: sono due numeri diversi e il secondo si
       capisce solo vedendo da dove parte. */
    .lg-referto-lati .lg-v { display: block; font-size: .6rem; }
    .lg-referto-lati .lg-voti { gap: 0; line-height: 1.1; }
    /* Sul secondo piano il ruolo e' un promemoria, non un titolo. */
    .lg-referto-lati .lg-ruolo .role-badge { border-radius: 6px; font-size: .6rem; padding: 0 5px; }
    .lg-referto-lati .lg-ev-n { font-size: .52rem; }

    /* Il riquadro a destra: stretto e leggero. A mezza larghezza un riquadro
       da 2,6rem con un bordo intorno mandava la riga su tre piani, e una
       colonna di venti riquadri bordati non si guarda piu' come una lista. */
    .lg-referto-lati .lg-voti,
    .lg-referto-lati .lg-prob { min-width: 2.1rem; }
    .lg-referto-lati .lg-prob { font-size: var(--fs-micro); padding: 1px 3px; }
    .lg-referto-lati .lg-fv { padding: 0 3px; }
    /* Chi non e' sceso in campo lo dice gia' il nome sbarrato: la crocetta
       basta com'e', senza la scatola grande quanto un voto. */
    .lg-referto-lati .lg-niente {
        background: none;
        border: 0;
        font-size: var(--fs-sm);
        min-height: 0;
        min-width: 1.2rem;
    }
    .lg-referto-lati .lg-lato-testa h3 { font-size: var(--fs-sm); }
    .lg-referto-lati .lg-lato-chi { gap: 5px; }

    /* Lo specchio serviva quando la colonna ospite aveva mezzo schermo tutto
       per se'. In mezza larghezza il testo a destra fa due colonne che si
       guardano invece di leggersi: si allineano tutte e due a sinistra. */
    .lg-referto-lati .lg-riga-specchio { flex-direction: row; text-align: left; }
    .lg-referto-lati .lg-riga-specchio .lg-riga-nome { flex-direction: row; }

    .lg-referto-lati .lg-lato-blocco { padding: var(--sp-2) 5px; }
    .lg-referto-lati .lg-lato-tot { font-size: 1.1rem; }
    .lg-referto-lati .lg-lato-conti { font-size: .58rem; }
    .lg-referto-lati .lg-sezione-riga { padding: var(--sp-1) 3px; }
    .lg-referto-lati .lg-formazione-viva { gap: 3px; }
    .lg-referto-lati .lg-conto { padding: var(--sp-2); }
}

@media (max-width: 599px) {
    .lg-scoreboard { padding: var(--sp-3); }
    .lg-scoreboard-principale { gap: var(--sp-1); }
    .lg-scoreboard-team { font-size: var(--fs-sm); }
    .lg-scoreboard-risultato { gap: 0 var(--sp-1); }
    .lg-scoreboard-risultato .fw-num { font-size: 2.35rem; }
    .lg-scoreboard-punti { grid-template-columns: 1fr 8rem 1fr; }
}

.lg-lato-blocco {
    background: var(--bg-sunken);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: var(--sp-3);
}

/* Due tabellini si leggono a coppie: la riga di qua accanto alla riga di la'.
   Perche' restino paralleli le due testate devono avere la stessa altezza
   sempre, qualunque cosa sia successo nella partita. Percio' e' una griglia
   di due righe fisse - chi e' (con logo e modulo) e quanto fa - e non un
   flex che va a capo appena il nome della squadra e' lungo. */
.lg-lato-testa {
    align-items: start;
    display: grid;
    gap: 2px;
    grid-template-rows: auto auto;
    margin-bottom: var(--sp-3);
    min-width: 0;
}

/* Prima riga: chi e'. Il nome della squadra e' l'unica cosa che non si puo'
   abbreviare - "Mai..." non e' nessuno - quindi la riga e' tutta sua e il
   resto (modulo, casa/trasferta) scende accanto al numero. */
.lg-lato-chi { align-items: center; display: flex; gap: var(--sp-2); min-width: 0; }
.lg-lato-testa h3 {
    font-size: var(--fs-md);
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lg-lato-modulo { flex-shrink: 0; }
/* Dove gioca resta, ma come un glifo: una parola in piu' nella testata era
   quello che mandava a capo i nomi lunghi e sfalsava i due tabellini. */
.lg-lato-dove { color: var(--ink-3); flex-shrink: 0; font-size: .8rem; }
.lg-lato-numeri { align-items: center; column-gap: var(--sp-2); display: flex; flex-wrap: wrap; row-gap: 1px; }
/* Il parziale sta su una riga sua: cosi' le due testate restano alte uguali
   anche quando un nome di squadra e' lungo il doppio dell'altro. */
.lg-lato-conti {
    color: var(--ink-3);
    cursor: help;
    flex: 1 1 100%;
    font-size: var(--fs-micro);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.lg-lato-barra { color: var(--line-strong); font-weight: 400; }
.lg-lato-testa .avatar { border: 2px solid var(--bg-surface); border-radius: 50%; box-shadow: 0 0 0 1px var(--line); flex-shrink: 0; }
.lg-lato-logo-vuoto { height: 36px; width: 36px; }

/* ---- Il conto, riga per riga ----
   E' la parte che spiega il risultato: sta in cima e non si nasconde. */
.lg-conto {
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    padding: var(--sp-2) var(--sp-3);
}

.lg-conto-riga {
    align-items: baseline;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: var(--sp-3);
    justify-content: space-between;
    padding: var(--sp-2) 0;
}

.lg-conto-riga .fw-micro { color: var(--ink-3); display: block; }
.lg-conto-totale { border-bottom: 0; font-weight: 700; }
.lg-conto-totale .fw-num { color: var(--ink-1); font-size: var(--fs-md); }

.lg-conto-gol {
    align-items: baseline;
    border-top: 2px solid var(--line-strong);
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
    padding-top: var(--sp-2);
}

.lg-conto-gol strong { color: var(--navy); font-size: var(--fs-xl); line-height: var(--lh-tight); }
.lg-conto-gol .fw-micro { color: var(--ink-3); margin-left: auto; text-align: right; }

/* ---- Sostituzioni ---- */
.lg-sostituzioni { margin-top: var(--sp-3); }
.lg-sostituzioni h4 { color: var(--ink-3); margin: var(--sp-2) 0 var(--sp-1); }
.lg-sost-lista { list-style: none; margin: 0; padding: 0; }

.lg-sost-lista li {
    align-items: baseline;
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: var(--sp-1) 0;
}

.lg-sost-lista .fw-num { margin-left: auto; }
.lg-sost-entra { font-weight: 600; }
.lg-scoperti li { color: var(--negative-ink); }
.lg-nessuna-sost { color: var(--ink-3); margin: var(--sp-3) 0 0; }

/* ---- Le formazioni, voto per voto ---- */
.lg-formazione { margin-top: var(--sp-3); }
.lg-formazione summary { color: var(--navy); cursor: pointer; font-size: var(--fs-sm); }
.lg-g-tab { margin-top: var(--sp-2); width: 100%; }
.lg-g-tab :is(th, td) { padding: var(--sp-1) var(--sp-2); }
.lg-g-nome { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }

/* Chi non ha fatto punti resta in elenco ma non compete con chi li ha fatti. */
.lg-fuori { color: var(--ink-3); }
.lg-mini { font-size: var(--fs-micro); margin-left: var(--sp-1); padding: 0 var(--sp-1); }
.lg-panchina-testa td { color: var(--ink-3); font-size: var(--fs-micro); padding-top: var(--sp-2); text-transform: uppercase; }

/* ---- Confronto fra le due letture ---- */
.lg-confronto {
    background: var(--navy-tint);
    border-radius: var(--r-sm);
    margin-bottom: var(--sp-4);
    padding: var(--sp-3);
}

.lg-confronto h3 { color: var(--navy-ink); margin: 0 0 var(--sp-2); }
.lg-confronto-tab { width: 100%; }
.lg-delta { color: var(--caution-ink); font-weight: 700; }

/* Le frasi che spiegano non sono etichette: .fw-micro va in maiuscoletto, e
   una spiegazione di due righe in maiuscoletto si legge peggio e urla. */
.lg-spiega {
    color: var(--ink-3);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
}

.lg-conto-riga .lg-spiega { display: block; }

/* Dieci colonne larghe millequattrocento pixel fanno perdere la riga fra il
   nome e i numeri: la classifica si tiene su una larghezza percorribile. */
.lg-classifica .lg-tabella-wrap { max-width: 1040px; }

/* Il referto porta due formazioni affiancate: nel modale stretto stavano una
   sopra l'altra anche su schermo grande. */
.modal-dialog.lg-referto-modal { max-width: min(1080px, 94vw); }

/* ---- Le righe dei giocatori -------------------------------------------
   Aprendo una sfida si vogliono vedere le persone, non l'aritmetica: la
   formazione sta in cima e il conto sotto. La riga e' la stessa a giornata
   in corso e a giornata chiusa, perche' la domanda e' la stessa. */
.lg-formazione-viva { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--sp-3); }

.lg-riga {
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    display: flex;
    gap: var(--sp-2);
    min-width: 0;
    padding: var(--sp-1) var(--sp-2);
}

.lg-riga[data-act] { cursor: pointer; }
.lg-riga[data-act]:hover, .lg-riga[data-act]:focus-visible { background: var(--bg-raised); }

/* La colonna ospite si legge da destra, come su Fantacalcio.it. */
.lg-riga-specchio { flex-direction: row-reverse; text-align: right; }

.lg-faccia {
    border-radius: 50%;
    flex-shrink: 0;
    height: 30px;
    object-fit: cover;
    object-position: top center;
    width: 30px;
}

.lg-faccia-vuota { background: var(--bg-raised); display: inline-block; }
.lg-ruolo { flex-shrink: 0; }

.lg-riga-nome {
    align-items: center;
    display: flex;
    flex: 1;
    gap: var(--sp-1);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lg-riga-specchio .lg-riga-nome { flex-direction: row-reverse; }
.lg-eventi { align-items: center; display: inline-flex; flex-shrink: 0; gap: 3px; }
.lg-ev { align-items: center; display: inline-flex; gap: 1px; }
.lg-ev-n { color: var(--ink-3); font-size: .58rem; font-weight: 700; }
.lg-cambio-reale { flex-shrink: 0; font-size: .72rem; opacity: .55; }
.lg-cambio-reale-su { color: var(--positive-ink); }
.lg-cambio-reale-giu { color: var(--caution-ink); }
.lg-cambio { flex-shrink: 0; font-size: .85em; }
.lg-cambio-su { color: var(--positive); }
.lg-cambio-giu { color: var(--negative); }

/* Chi e' rimasto in panchina si spegne: cosi' chi e' entrato si vede senza
   dover leggere niente. E' tutto il senso della riga grigia. */
.lg-riga-spenta { background: var(--bg-sunken); color: var(--ink-3); opacity: .6; }
.lg-riga-spenta .lg-faccia { filter: grayscale(1); }
.lg-riga-entrato { border-color: var(--positive); }

/* Chi non e' sceso in campo ha il nome sbarrato. E' il modo piu' rapido di
   dirlo: la freccia rossa da sola si confonde con quella di chi e' entrato,
   e "s.v." vorrebbe dire un'altra cosa ancora (in campo c'e' andato, il voto
   non gliel'hanno dato). */
.lg-riga-assente .lg-nome-t { color: var(--ink-3); text-decoration: line-through; }
.lg-riga-assente .lg-faccia { filter: grayscale(1); opacity: .7; }
.lg-riga-con-voto .lg-nome-t { font-weight: 700; }
.lg-riga:not(.lg-riga-con-voto) .lg-nome-t { font-weight: 400; }

/* Prima della partita un indisponibile resta un'informazione, non un errore:
   il corsivo e la causa bastano, senza bordo o voto rosso. */
.lg-riga-fuori .lg-nome-t { color: var(--ink-3); font-style: italic; }
.lg-perche {
    color: var(--negative-ink);
    flex-shrink: 0;
    font-size: var(--fs-micro);
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lg-stato {
    align-items: center;
    border-radius: 999px;
    color: var(--ink-2);
    display: inline-flex;
    flex-shrink: 0;
    font-size: .66rem;
    font-weight: 700;
    gap: 4px;
    justify-content: center;
    line-height: 1.15;
    min-height: 1.45rem;
    padding: 2px 7px;
    text-transform: uppercase;
    width: 8.8rem;
}
/* Il cambio e' una freccia e basta. Ne' la parola ENTRA (che ripeteva la
   freccia) ne' il nome dell'altro: colorato e in grassetto in mezzo a una
   colonna di nomi normali sembrava il nome del giocatore della riga. */
.lg-stato small { font-weight: 500; letter-spacing: 0; text-transform: none; }
.lg-stato-fanta-entra i, .lg-stato-fanta-esce i { font-size: .95rem; }
.lg-stato-si, .lg-stato-sub { background: var(--positive-tint); color: var(--positive-ink); }
.lg-stato-live { background: color-mix(in srgb, var(--live-ink, #c62828) 10%, transparent); color: var(--live-ink, #c62828); }
.lg-stato-sost { background: var(--caution-tint); color: var(--caution-ink); }
.lg-stato-fanta-esce { background: transparent; color: var(--negative-ink); }
.lg-stato-fanta-entra { background: transparent; color: var(--positive-ink); }
.lg-stato-fanta-entra, .lg-stato-fanta-esce { min-height: 0; padding: 0; width: auto; }
.lg-stato-panca, .lg-stato-attesa { background: var(--bg-raised); color: var(--ink-3); }
.lg-riga-specchio .lg-stato { order: initial; }

.lg-sezione-riga { align-items: baseline; color: var(--ink-2); display: flex; font-size: var(--fs-micro); font-weight: 700; justify-content: space-between; letter-spacing: var(--tracking-micro); padding: var(--sp-1) var(--sp-2); text-transform: uppercase; }
.lg-sezione-riga small { color: var(--ink-3); font-weight: 500; letter-spacing: 0; text-transform: none; }

.lg-panchina-riga {
    color: var(--ink-3);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-micro);
    margin-top: var(--sp-2);
    padding: var(--sp-1) var(--sp-2);
    text-align: center;
    text-transform: uppercase;
}

/* ---- Il riquadro a destra: voto, oppure quanto e' probabile che giochi ---- */
.lg-voti {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    min-width: 2.6rem;
    text-align: center;
}

.lg-v { color: var(--ink-2); font-size: var(--fs-sm); }
.lg-fv { background: var(--bg-sunken); border-radius: var(--r-xs); font-weight: 700; }
.lg-fv-su { background: var(--positive-tint); color: var(--positive-ink); }
.lg-fv-giu { background: var(--negative-tint); color: var(--negative-ink); }

/* Il voto live: provvisorio, cambia a ogni aggiornamento. Bordo tratteggiato
   nel colore delle dirette e un pallino che pulsa, cosi' si distingue dai voti
   veri senza dover leggere la sigla. */
.lg-voti-live {
    border: 1px dashed var(--live-ink, #c62828);
    border-radius: var(--r-xs);
    padding: 1px 3px;
}
.lg-voti-live .lg-v { color: var(--live-ink, #c62828); font-weight: 700; }
.lg-live {
    align-items: center;
    color: var(--live-ink, #c62828);
    display: inline-flex;
    font-size: .6rem;
    font-weight: 800;
    gap: 3px;
    justify-content: center;
    letter-spacing: .08em;
    line-height: 1;
    margin-bottom: 1px;
}
.lg-live::before {
    animation: lg-live-pulse 1.4s ease-in-out infinite;
    background: currentColor;
    border-radius: 50%;
    content: "";
    height: 5px;
    width: 5px;
}
@keyframes lg-live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
}
@media (prefers-reduced-motion: reduce) {
    .lg-live::before { animation: none; }
}
.lg-niente { align-items: center; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: var(--r-xs); color: var(--ink-3); font-size: var(--fs-md); justify-content: center; min-height: 2.15rem; }

.lg-prob {
    border: 1px solid currentColor;
    border-radius: var(--r-xs);
    flex-shrink: 0;
    font-size: var(--fs-sm);
    font-weight: 700;
    min-width: 2.6rem;
    padding: var(--sp-1) 0;
    text-align: center;
}

.lg-prob-alta { color: var(--positive-ink); }
.lg-prob-media { color: var(--caution-ink); }
.lg-prob-bassa { color: var(--ink-3); }
.lg-prob-ignota { color: var(--ink-3); font-weight: 400; }
.lg-prob-indisponibile { background: var(--bg-sunken); border-color: var(--line); color: var(--ink-3); font-weight: 400; }
.lg-prob-fuori {
    background: var(--negative-tint);
    color: var(--negative-ink);
    font-size: var(--fs-micro);
    white-space: nowrap;
}

.lg-lato-tot {
    color: var(--ink-1);
    font-size: 1.35rem;
    font-weight: 700;
}

/* ---- Il parziale di una sfida in corso ---- */
.lg-parziale {
    background: var(--navy-tint);
    border-radius: var(--r-sm);
    margin-bottom: var(--sp-4);
    padding: var(--sp-3);
}

/* In grande il risultato proiettato: e' la domanda vera. Sotto, i numeri che
   lo spiegano - i fantapunti proiettati e quelli gia' fatti. */
.lg-parziale-gol {
    align-items: baseline;
    color: var(--navy-ink);
    display: flex;
    gap: var(--sp-4);
    justify-content: center;
}

.lg-parziale-gol .fw-num { font-size: var(--fs-display); font-weight: 700; line-height: var(--lh-tight); }
.lg-parziale-eti { font-size: var(--fs-micro); letter-spacing: var(--tracking-micro); text-transform: uppercase; }

.lg-parziale-righe { margin: var(--sp-2) auto 0; max-width: 24rem; }

.lg-parziale-riga {
    color: var(--navy-ink);
    display: flex;
    font-size: var(--fs-sm);
    gap: var(--sp-2);
    justify-content: space-between;
}

.lg-parziale-riga .fw-num { font-weight: 700; min-width: 3rem; }
.lg-parziale-riga .fw-num:last-child { text-align: right; }
.lg-parziale-riga > span:nth-child(2) { color: var(--ink-3); }
.lg-parziale-nota { margin: var(--sp-3) 0 0; text-align: center; }

.lg-esito-vivo { align-items: center; display: flex; flex-direction: column; line-height: 1.1; }
.lg-esito-vivo .fw-num { font-weight: 700; }
.lg-sfida-viva { border-left: 3px solid var(--brand); }

/* ---- Rosicate e formazione migliore ---- */
.lg-approfondimenti { border-top: 1px solid var(--line); margin-top: var(--sp-4); padding-top: var(--sp-3); }
.lg-appro-tasti { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.lg-appro-pannello {
    background: var(--bg-sunken);
    border-radius: var(--r-sm);
    margin-top: var(--sp-3);
    padding: var(--sp-3);
}

.lg-appro-pannello h3 { color: var(--ink-3); margin: 0 0 var(--sp-2); }
.lg-appro-titolo { color: var(--ink-3); margin: var(--sp-3) 0 var(--sp-1); }
.lg-rosicate { list-style: none; margin: 0; padding: 0; }

.lg-rosicata {
    align-items: baseline;
    background: var(--bg-surface);
    border-left: 3px solid var(--line-strong);
    border-radius: var(--r-xs);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    justify-content: space-between;
    margin-bottom: var(--sp-1);
    padding: var(--sp-2);
}

.lg-rosicata-male { border-left-color: var(--negative); }
.lg-rosicata-bene { border-left-color: var(--positive); }
.lg-rosicata-esito { font-variant-numeric: tabular-nums; white-space: nowrap; }

.lg-migliore-testa { align-items: baseline; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.lg-migliore-tot { font-size: var(--fs-lg); font-weight: 700; }
.lg-migliore-undici { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); list-style: none; margin: 0; padding: 0; }
.lg-migliore-undici li { align-items: center; display: flex; gap: var(--sp-1); }
.lg-migliore-undici .fw-num { color: var(--ink-3); }

.lg-stima {
    background: var(--bg-surface);
    border-radius: var(--r-xs);
    margin: var(--sp-3) 0 0;
    padding: var(--sp-2) var(--sp-3);
}

@media (max-width: 767px) {
    .lg-faccia { height: 24px; width: 24px; }
    .lg-riga { gap: var(--sp-1); padding: 2px var(--sp-1); }
    /* La larghezza fissa serve alle pillole con la parola dentro, non ai due
       segni del cambio, che sono una freccia sola: a 6 rem uscivano dalla
       colonna e si portavano fuori anche il voto. */
    .lg-stato:not(.lg-stato-fanta-entra):not(.lg-stato-fanta-esce) {
        font-size: .58rem; padding-inline: 5px; width: 6.7rem;
    }
    .lg-stato-fanta-entra, .lg-stato-fanta-esce { padding: 0; width: auto; }
    /* Le altre pillole perdono l'icona per stare strette; quelle del cambio
       no: li' la freccia e' tutto il messaggio. */
    .lg-stato:not(.lg-stato-fanta-entra):not(.lg-stato-fanta-esce) i { display: none; }
}

@media (max-width: 430px) {
    .lg-faccia { display: none; }
    .lg-stato:not(.lg-stato-fanta-entra):not(.lg-stato-fanta-esce) { width: 6rem; }
    .lg-riga-nome { font-size: var(--fs-sm); }
}

/* ---- Resa e classifica degli allenatori ----
   La resa sta accanto ai punti perche' e' li' che si capisce se una posizione
   e' merito di chi allena o della rosa che si ritrova. */
/* La resa ha una scheda sua accanto ai punti: prima era una colonna stretta
   piu' un pannello chiuso in fondo, e chiuso restava. Qui la tabella si
   prende tutta la larghezza che le serve. */
.lg-classifica .fw-tabs { margin-bottom: var(--sp-3); }
.lg-allenatori > p { margin: 0 0 var(--sp-3); max-width: 62ch; }
.lg-allenatori table { max-width: 820px; }
.lg-voti-definitivo {
    background: var(--navy-tint);
    border: 1px solid color-mix(in srgb, var(--navy) 18%, var(--line));
    border-radius: var(--r-xs);
    padding: 2px 4px;
}
.lg-voti-definitivo .lg-v { color: var(--navy-ink); font-weight: 700; }