/* Fanta-stic — foglio di stile unico.
   Prima stava dentro index.html insieme al markup e a milleduecento righe di
   JavaScript: qualunque modifica al listone obbligava a scorrere l'intero
   file per trovarla. */

:root {
  /* La base viene dal logo: #113347, blu petrolio. Il fondo e' la sua versione
     spenta, i pannelli una sua sfumatura piu' chiara, l'accento l'acciaio che
     nel marchio fa da contrasto al blu. I quattro colori semantici (buono,
     attenzione, brutto) e i quattro dei ruoli restano quelli: sono funzionali,
     non decorativi, e cambiarli renderebbe illeggibile una tabella. */
  --bg:#081620; --panel:#0e2735; --line:#1d3e50; --ink:#e8eef3; --dim:#93aab7;
  /* Tre gradini sopra il pannello, usati per lo stato "un po' piu' chiaro
     del fondo" che ricorre ovunque — avatar e pastiglie (panel-2), hover di
     bottoni e righe (hover), hover su una voce gia' attiva (hover-2). Sono
     variabili apposta: la modalita' chiara (piu' sotto) le ridefinisce senza
     dover toccare le centinaia di punti che le usano. */
  --panel-2:#12303f; --hover:#16394b; --hover-2:#24506a;
  /* Le caselle di input sono piu' scure del pannello che le ospita, per
     distinguersi come "qui si scrive" — un gradino sotto, non sopra, a
     differenza di panel-2/hover qui sopra. --campo-bad e' la stessa casella
     quando il valore non va bene (vedi input.bad). */
  --campo-bg:#05121a; --campo-bad:#2a1516;
  /* Azzurro e verde vengono dalla tavolozza del marchio. Ambra e rosso no:
     nell'identita' non ci sono, e servono a dire "attenzione" e "male" in una
     tabella che si legge di sfuggita. */
  --acc:#7ab8f5; --good:#7ee787; --warn:#f0a13a; --bad:#e5615e;
  --marchio:#113347; --verde:#7ee787;
  /* --good/--warn/--bad restano il colore di sfondo di badge e pallini in
     entrambi i temi (sono chiari apposta, per il testo scuro che ci sta
     sopra — vedi .role, .act.azzera.caldo...). Come TESTO puro su un
     pannello, pero', un verde o un ambra chiaro sparisce su un fondo chiaro:
     --good-text/--warn-text/--bad-text sono la stessa idea per quell'uso —
     identici a --good/--warn/--bad in scuro, piu' scuri in chiaro (vedi
     sotto). Tutte le regole che coloravano un TESTO con --good/--warn/--bad
     ora usano queste tre. */
  --good-text:#7ee787; --warn-text:#f0a13a; --bad-text:#e5615e;
  /* Il testo sopra un riempimento color accento (bottoni pieni, schede attive):
     in scuro l'accento e' un azzurro chiaro, e un blu petrolio ci sta sopra
     leggibilissimo. Variabile apposta perche' in chiaro l'accento diventa un
     blu pieno — vedi piu' sotto — e la stessa coppia li' si legge appena. */
  --on-acc:#0a1c2a;
  --p:#f0a13a; --d:#3fbf7f; --c:#57a8cc; --a:#e5615e;
  /* Gli stessi quattro colori in componenti, per velarci le righe del
     tabellone con un'opacita' che cambia riga per riga. */
  --rgb-p:240 161 58; --rgb-d:63 191 127; --rgb-c:77 163 255; --rgb-a:229 97 94;
  /* Valore di partenza soltanto: misuraBarre() lo riscrive con l'altezza vera
     appena la pagina esiste. Scritto a mano, il pannello del tabellone si
     agganciava qualche pixel fuori posto e sforava in basso della stessa
     misura, mangiandosi l'ultima squadra. */
  --headh:53px;
}
/* ---- modalita' chiara ----
   Stessa struttura, palette invertita: il fondo diventa quasi bianco, i
   pannelli bianchi veri, il testo blu petrolio — la stessa coppia di colori
   del marchio, letta al contrario. I quattro colori di ruolo (--p/--d/--c/--a)
   e i semantici come SFONDO (--good/--warn/--bad) restano identici apposta:
   sono badge con un testo scuro sopra, e risaltano allo stesso modo su un
   pannello chiaro o scuro. Come TESTO puro pero' sono troppo chiari per
   stare su un fondo chiaro — --good-text/--warn-text/--bad-text diventano
   qui sotto versioni piu' scure, misurate per restare sopra le 4,5:1 di
   contrasto su un pannello bianco. L'attributo sta sul <body> e non su
   <html> perche' e' li' che gia' vive "body.in-lega" — un solo posto dove
   cercare lo stato della pagina. */
body[data-tema="chiaro"] {
  --bg:#f3f6f8; --panel:#ffffff; --line:#d9e2e8; --ink:#122430; --dim:#4b6270;
  --panel-2:#eaf0f4; --hover:#dfe9f0; --hover-2:#cfe0ec;
  --acc:#1f6fd6;
  --good-text:#1e7d3c; --warn-text:#a15c07; --bad-text:#c62828;
  /* Qui il gradino si inverte: la casella e' piu' chiara del fondo, non piu'
     scura — il nero di --campo-bg col testo scuro sopra sarebbe illeggibile. */
  --campo-bg:#eaf0f4; --campo-bad:#fbe0de;
  /* In scuro l'accento e' un azzurro chiaro: un blu petrolio sopra ci si legge
     benissimo (vedi --on-acc in :root). In chiaro l'accento diventa un blu
     pieno, e lo stesso testo scuro sopra scende sotto 4:1 di contrasto — un
     bottone "Crea lega" che sembra spento. Il bianco sopra risolve senza
     toccare --acc, che serve anche com'e' per bordi e link. */
  --on-acc:#ffffff;
}
/* ---- il passaggio fra chiaro e scuro ----
   Cambiare "data-tema" ridefinisce tutte le variabili qui sopra in un colpo
   solo — necessario, e' cosi' che deve funzionare — ma senza altro le
   centinaia di elementi che le usano cambiano colore di scatto, tutti nello
   stesso istante: uno sfarfallio, non una transizione. Una regola sola,
   universale, mette invece in dissolvenza le quattro proprieta' che
   dipendono dal tema ovunque non sia gia' definita un'altra transizione piu'
   specifica (un bottone con gia' il suo `transition:border-color .12s...`
   tiene la propria — piu' veloce, pensata per l'hover — e va bene cosi': e'
   solo il cambio tema, quello lento e vistoso, che deve toccare tutto). */
*, *::before, *::after {
  transition:background-color .5s ease, color .5s ease,
             border-color .5s ease, box-shadow .5s ease, fill .5s ease;
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { transition:none; }
}
/* I bottoni pieni piu' in vista (le call-to-action, le schede attive della
   navigazione, il preset scelto) prendono in chiaro la stessa coppia ad alto
   contrasto del piede di pagina — blu petrolio e verde — invece del blu
   accento: e' piu' leggibile del bianco-su-blu qui sopra, ed e' la stessa
   lingua visiva del marchio che gia' chiude ogni pagina. Riposano verdi (lo
   stato che si guarda di piu', dev'essere il piu' quieto) e si capovolgono
   al passaggio del mouse — la stessa idea del piede qui sotto, letta al
   contrario quando ci si passa sopra. */
body[data-tema="chiaro"] button.act:not(.ghost),
body[data-tema="chiaro"] nav.viste button.on,
body[data-tema="chiaro"] .regolamento-voce.on,
body[data-tema="chiaro"] button.act.ghost[data-preset].on {
  background:var(--verde); color:var(--marchio); border-color:var(--verde);
}
body[data-tema="chiaro"] button.act:not(.ghost):not(:disabled):hover,
body[data-tema="chiaro"] nav.viste button.on:hover,
body[data-tema="chiaro"] .regolamento-voce.on:hover,
body[data-tema="chiaro"] button.act.ghost[data-preset].on:hover {
  background:var(--marchio); color:var(--verde); border-color:var(--marchio);
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
       font:14px/1.5 "DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
       /* Il piede resta in fondo alla finestra anche quando la pagina e' corta,
          invece di risalire a meta' schermo sotto la home. */
       min-height:100vh; display:flex; flex-direction:column; }
/* min-width:0 e' obbligatorio, non cosmetico. `body` e' un contenitore flex e
   un elemento flex non scende mai sotto la larghezza minima del suo contenuto:
   senza questa riga il tabellone dell'asta, largo piu' della finestra, allargava
   <main> e faceva scorrere in orizzontale *la pagina intera* invece di se
   stesso. L'ultima squadra finiva tagliata fuori dallo schermo, e su telefono
   ogni pagina nasceva storta.

   La centratura (max-width, margin:auto) sta apposta su `.wrap`, non qui: un
   margine auto su UN FLEX ITEM disattiva lo stretch sull'asse trasverso, che
   e' la stessa identica rottura descritta sopra un gradino piu' su — main si
   sarebbe dimensionato sul proprio contenuto invece che sulla finestra, e il
   min-width:0 da solo non l'avrebbe impedito. Il piede risolve la stessa cosa
   allo stesso modo: `.piede` (il flex item) non ha margini, `.piede .riga`
   (dentro, un blocco normale) porta max-width e margin:auto. */
main { flex:1 0 auto; min-width:0; }

/* Il riempimento verticale e' 11 e non 14: il cerchio del ritratto e' l'oggetto
   piu' alto della riga, e con 14 la barra cresceva di sei pixel — che nel
   tabellone dell'asta sono l'ultima squadra dentro o fuori dallo schermo. */
header { display:flex; align-items:center; gap:18px; padding:11px 20px;
         border-bottom:1px solid var(--line); background:var(--panel);
         position:sticky; top:0; z-index:40; }
h1 { font-size:16px; margin:0; letter-spacing:.3px;
     display:flex; align-items:center; gap:9px; }
.marchio { width:26px; height:26px; display:block; }

/* ---- la pastiglia della lega ----
   Dice dove sei e apre gli attrezzi di quel posto. Sta accanto al marchio e
   non nella riga sotto perche' e' l'unica cosa che non cambia mai mentre si
   passa da una vista all'altra. */
.chip-lega { display:none; align-items:center; gap:7px; max-width:320px;
             background:var(--panel-2); border:1px solid transparent; color:var(--ink);
             font-size:14px; font-weight:600; padding:6px 11px; border-radius:9px;
             cursor:pointer; transition:background .12s, border-color .12s; }
body.in-lega .chip-lega { display:inline-flex; }
.chip-lega:hover { background:var(--hover); border-color:var(--acc); }
.chip-lega[aria-expanded="true"] { background:var(--hover); border-color:var(--acc); }
.chip-lega:focus-visible { outline:2px solid var(--acc); outline-offset:1px; }
.chip-lega .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chip-lega .stemma.riga { width:18px; height:18px; vertical-align:-4px; }
.chip-lega .caret { display:block; width:12px; height:12px; flex:none; margin:0;
                    fill:none; stroke:currentColor; stroke-width:1.8;
                    stroke-linecap:round; stroke-linejoin:round; opacity:.7; }

/* ---- il ritratto ----
   Trentaquattro pixel di cerchio al posto di quattro voci di menu: le cose
   proprie si cercano li', in alto a destra, prima ancora di leggere. */
.avatar { display:inline-flex; align-items:center; justify-content:center;
          position:relative; flex:none; width:34px; height:34px; padding:0;
          border-radius:50%; border:1px solid transparent; background:var(--panel-2);
          color:var(--ink); font-size:12.5px; font-weight:700; letter-spacing:.4px;
          cursor:pointer; overflow:visible;
          transition:border-color .12s, background .12s; }
.avatar:hover, .avatar[aria-expanded="true"] { border-color:var(--acc); background:var(--hover); }
.avatar:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
.avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.avatar.confoto { background:none; }
/* La coda degli accessi si vedeva accanto a una voce di menu: ora quella voce
   sta dentro la tendina, che si vede solo aperta. Il pallino sul cerchio e'
   quello che resta visibile senza aprire niente. */
.avatar.inattesa::after { content:""; position:absolute; top:-1px; right:-1px;
                          width:9px; height:9px; border-radius:50%;
                          background:var(--bad); border:2px solid var(--panel); }

/* ---- il tema chiaro/scuro ----
   Stesso cerchio dell'avatar, un'icona invece di una foto: e' un'impostazione
   grafica quanto il profilo, non una voce sua, e per questo vive accanto
   invece che dentro la tendina. Le due icone (luna, sole) restano entrambe
   nel DOM e si alternano con display: cosi' l'inversione e' istantanea,
   senza ridisegnare nulla via JavaScript. */
.tema-switch { display:inline-flex; align-items:center; justify-content:center;
               flex:none; width:34px; height:34px; padding:0; margin-right:8px;
               border-radius:50%; border:1px solid var(--line); background:none;
               color:var(--dim); cursor:pointer;
               transition:border-color .12s, background .12s, color .12s; }
.tema-switch:hover { border-color:var(--acc); background:var(--hover); color:var(--ink); }
.tema-switch:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
.tema-switch .ico { width:16px; height:16px; }
.tema-switch .ico-sole { display:none; }
body[data-tema="chiaro"] .tema-switch .ico-luna { display:none; }
body[data-tema="chiaro"] .tema-switch .ico-sole { display:block; }
/* Il marchio e' la via di ritorno al listone: si comporta da pulsante, e deve
   dirlo prima del click. */
#vai_casa { cursor:pointer; border-radius:8px; padding:3px 8px; margin:-3px -8px;
            transition:background .12s; user-select:none; }
#vai_casa:hover { background:var(--hover); }
#vai_casa:focus-visible { outline:2px solid var(--acc); outline-offset:1px; }

nav { display:flex; gap:2px; }
nav button { background:none; border:none; color:var(--dim); font-size:14px;
             padding:6px 12px; cursor:pointer; border-radius:6px;
             transition:color .12s, background .12s, border-color .12s; }
nav button:hover:not(:disabled) { color:var(--ink); background:var(--hover); }
nav button.on { color:var(--ink); background:var(--line); }
/* La voce attiva reagisce comunque: senza, passandoci sopra sembra spenta. */
nav button.on:hover { background:var(--hover-2); }
nav button:focus-visible { outline:2px solid var(--acc); outline-offset:-2px; }
nav button:disabled { opacity:.35; cursor:not-allowed; }
/* Icone: contorno sottile, nessun riempimento, colore ereditato — cosi'
   seguono da sole lo stato della voce (spenta, hover, attiva). */
.ico { width:14px; height:14px; flex:none; fill:none; stroke:currentColor;
       stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
nav button { display:inline-flex; align-items:center; gap:7px; }
nav button .ico { opacity:.75; }
nav button.on .ico, nav button:hover .ico { opacity:1; }

/* I collegamenti dentro il testo: senza una regola esplicita restavano il blu
   del browser, che su questo fondo e' praticamente nero. */
/* :visited esplicito perche' altrimenti vince il viola di default del
   browser sui link gia' cliccati — su questo fondo scuro e' quasi invisibile,
   ed e' probabilmente la causa vera della "Guida ai dati" che non si vedeva:
   con un solo click diventava un link visitato. */
a, a:visited { color:var(--acc); text-decoration:none;
               border-bottom:1px solid rgba(122,184,245,.35); }
a:hover { color:#a9d2fa; border-bottom-color:var(--acc); }
a:focus-visible { outline:2px solid var(--acc); outline-offset:2px; border-radius:3px; }

.wrap { padding:18px 20px 60px; max-width:1900px; margin:0 auto; }

/* ---- le tre viste della lega, in cima a destra ----
   Listone, Le Fantasquadre e Probabili formazioni sono le tre viste vere e
   proprie di un'asta — regolamento, azzera e chiudi sono attrezzi, non luoghi,
   e stanno sotto il nome della lega. Prima i due gruppi si vedevano uguali, e
   il risultato era che gli attrezzi sembravano piu' importanti dei posti dove
   si sta davvero. La scheda attiva e' piena d'accento, non solo un grigio piu'
   chiaro — e le inattive hanno comunque un bordo, cosi' il gruppo si legge come
   un gruppo anche prima di cliccare. */
nav.viste { display:none; margin-left:auto; gap:4px; }
body.in-lega nav.viste { display:flex; }
nav.viste button { font-weight:600; padding:6px 13px; border-radius:7px;
                   border:1px solid var(--line); color:var(--ink); }
nav.viste button:hover:not(.on) { border-color:var(--acc); background:var(--hover); }
nav.viste button.on { background:var(--acc); color:var(--on-acc); border-color:var(--acc); }
nav.viste button.on:hover { background:var(--acc); }
/* Fuori da una lega le viste non ci sono, e il vuoto che spingeva il gruppo
   ritratto/tema a destra se ne andava con loro. Il margine sta sul primo dei
   due (tema-switch, che in DOM precede l'avatar): un margine automatico per
   ciascuno si dividerebbe lo spazio vuoto fra i due invece di accorparli. */
.tema-switch { margin-left:auto; }
body.in-lega .tema-switch { margin-left:0; }

/* ---- home ---- */
.hero-home { max-width:640px; margin:12vh auto 0; text-align:center; }
.hero-home h2 { font-size:26px; margin:0 0 12px; letter-spacing:.2px; }
.hero-home p { color:var(--dim); font-size:14px; line-height:1.6; margin:0 0 22px; }
button.act.big { font-size:15px; padding:12px 26px; border-radius:8px; }

/* ---- titolo di pagina ---- */
.titolo-pagina { display:flex; align-items:center; gap:16px; margin:4px 0 18px; }
.titolo-pagina h2 { font-size:19px; margin:0; }
.titolo-pagina .act { margin-left:auto; }

/* ---- elenco delle leghe ---- */
.lega-card { background:var(--panel); border:1px solid transparent; border-radius:10px;
             padding:14px 16px; margin-bottom:12px; cursor:pointer; }
.lega-card:hover { border-color:var(--acc); }
.lega-card .testa { display:flex; align-items:baseline; gap:12px; }
.lega-card .nm { font-size:16px; font-weight:600; }
.lega-card .stato { font-size:12.5px; margin-top:4px; }
.lega-card .azioni { display:flex; gap:8px; margin-top:12px; }
.lega-card .azioni button { padding:6px 14px; font-size:13px; }
/* Piu' specifica della regola generale su button.act/.danger qui sopra, e
   quindi vince anche sullo stretto: senza questa riga Apri/Regolamento/
   Elimina restavano a 31px nonostante il resto dei bottoni "normali"
   dell'app fosse gia' cresciuto. flex-wrap sopra: coi bottoni piu' alti tre
   affiancati su una lega dal nome lungo potevano restare stretti — vanno a
   capo invece di schiacciarsi. */
@media (max-width:640px) {
  .lega-card .azioni button { padding:11px 14px; }
}

/* ---- guida ai dati ---- */
.card.guida { max-width:860px; line-height:1.65; }
.card.guida h3 { font-size:14px; margin:26px 0 8px; letter-spacing:.3px; }
.card.guida h3:first-of-type { margin-top:8px; }
.card.guida p, .card.guida li { font-size:13.5px; color:#c2d3dd; }
/* #c2d3dd e' pensato per un fondo scuro: su un pannello bianco il testo
   dell'intera Guida ai dati sparirebbe quasi. */
body[data-tema="chiaro"] .card.guida p,
body[data-tema="chiaro"] .card.guida li { color:var(--ink); }
.card.guida ul { padding-left:20px; margin:8px 0; }
.card.guida li { margin-bottom:6px; }
.card.guida .occhiello { color:var(--dim); font-size:13px; border-left:2px solid var(--acc);
                         padding-left:12px; margin:0 0 4px; }
/* Il paragrafo discorsivo in testa alla scheda: stessa idea dell'occhiello
   (un filo di colore a sinistra, non una cornice tutta intorno) ma piu'
   leggibile — e' testo da leggere per intero, non da scorrere. */
.narrativa { color:var(--ink); font-size:14px; line-height:1.65;
            border-left:2px solid var(--acc); padding-left:12px; margin:0; flex:1; min-width:0; }
/* Il ritratto grande sta di fianco al paragrafo, non incollato al nome: e'
   la stessa idea del filo di colore a sinistra, spinta fino a mostrare la
   faccia di chi si sta leggendo. Sotto i 640px il testo non ha piu' spazio
   per stare a fianco: il ritratto sale sopra. */
.narrativa-riga { display:flex; gap:14px; align-items:flex-start; margin:0 0 14px; }
@media (max-width:640px) { .narrativa-riga { flex-direction:column; align-items:center; } }
.card.guida .formula { background:var(--campo-bg); border:1px solid var(--line); border-radius:6px;
                       padding:10px 14px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
                       font-size:13px; color:var(--ink); }
.view { display:none; } .view.on { display:block; }

/* Il pannello e il fondo sono due toni della stessa famiglia (bianco e
   grigio quasi-bianco in chiaro, due blu vicinissimi in scuro): un bordo fra
   i due non aggiunge separazione, la ripete — il salto di tono la fa gia'
   da solo. */
.card { background:var(--panel); border:1px solid transparent; border-radius:10px;
        padding:16px 18px; margin-bottom:16px; max-width:100%; }
.card h2 { font-size:13px; text-transform:uppercase; letter-spacing:.8px;
           color:var(--dim); margin:0 0 14px; font-weight:600; }
.grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }

/* ---- il regolamento su una riga sola ----
   `auto-fit` fa quello che puo' con la larghezza che trova, e su un portatile
   trova poco: gli otto punteggi diventavano sette piu' uno, con "Porta
   inviolata" da sola su una riga sua come se fosse un'altra cosa. Ma sono un
   gruppo — o si leggono insieme o non si leggono — e una riga sola e' quello
   che li tiene tali. Le colonne si stringono invece di andare a capo: sono
   caselle da due cifre, lo spazio che serve e' quello dell'etichetta.
   Su telefono torna la griglia che va a capo, che li' e' l'unica possibile. */
@media (min-width:900px) {
  .grid.unica { grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
                grid-template-columns:none; gap:12px; }
  /* Dentro una colonna del due-colonne la card e' larga meta' pagina, non
     tutta: la stessa regola qui sopra ci stringerebbe quattro etichette
     (Portieri/Difensori/Centrocampisti/Attaccanti, per esempio) in uno
     spazio da due, ed e' esattamente quello che succedeva a "Configurazione
     rosa" appena "Rosa e formazioni" e' passata a due colonne. Dentro una
     ".colonna" torna la griglia elastica normale, che va a capo quando
     serve invece di accavallare il testo. */
  .due-colonne .colonna .grid.unica { grid-auto-flow:row; grid-auto-columns:auto;
                                       grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); }
}
/* Un campo solo in una griglia elastica si prende tutta la riga: una casella
   da un numero larga milleduecento pixel. */
.grid.stretta { grid-template-columns:none; max-width:300px; }

/* ---- le voci del regolamento, con la loro icona ----
   L'icona sta nell'etichetta e non accanto alla casella: e' il nome della voce
   ad avere bisogno di essere riconosciuto di sfuggita, non il numero. */
label[data-ico] { display:flex; align-items:center; gap:6px; }
label[data-ico] .ico { opacity:.75; }
label[data-ico] .mut { font-size:11px; }

/* I due modificatori: la spunta, l'etichetta e il punto interrogativo su una
   riga. Qui il "?" si vede anche sul largo — una casella di spunta non ha un
   riquadro su cui passare sopra, e senza appiglio la spiegazione non
   esisterebbe per chi non prova a passarci il cursore per caso. */
.modificatori { margin-top:14px; display:flex; flex-wrap:wrap; gap:10px 26px; }

/* ---- Tabella BONUS/MALUS: quindici righe, una o quattro caselle ----
   Stessa etichetta con icona di sempre a sinistra; a destra una casella sola
   di norma, quattro (una per ruolo) quando "Differenza per ruolo" e' acceso.
   Le caselle sono strette apposta: sono numeri di una o due cifre, non testo.

   Le caselle vivono in ".bm-campi", un blocco a parte dall'etichetta: con
   "Differenza per ruolo" acceso sono quattro, quasi 400px con le frecce,
   e in una card stretta (colonna destra del due-colonne, o un telefono)
   non ci stanno accanto a un'etichetta come "Player of the match" senza
   accavallarsi. "flex-wrap" le manda sotto come UN blocco solo quando non
   c'e' posto, invece di spezzarle una per una o lasciarle sovrapposte. */
.bm-row { display:flex; align-items:center; gap:10px 14px; padding:7px 0;
          border-bottom:1px solid var(--line); flex-wrap:wrap; }
.bm-row:last-child { border-bottom:none; }
.bm-row label { flex:1 1 150px; min-width:0; margin:0; }
.bm-campi { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.bm-row input { width:64px; flex:none; text-align:center; }
.bm-row.bm-head { padding-bottom:10px; }
.bm-row.bm-head label { visibility:hidden; }
/* Le quattro colonne per ruolo prendono gli stessi colori e la stessa
   icona (porta/scudo/regia/tiro) usati in Rosa e formazioni: e' li' che
   questa lega li impara, e ritrovarli qui — invece di una lettera grigia
   uguale per tutti — dice a colpo d'occhio quale colonna e' quale, anche
   scorrendo veloce le quindici righe. */
.bm-ruolo-badge { width:64px; flex:none; display:flex; justify-content:center; }
.role-ico { width:22px; height:22px; border-radius:7px; display:inline-flex;
            align-items:center; justify-content:center; color:#05121a; }
.role-ico .ico { width:13px; height:13px; }
.role-ico.ruolo-p{background:var(--p)} .role-ico.ruolo-d{background:var(--d)}
.role-ico.ruolo-c{background:var(--c)} .role-ico.ruolo-a{background:var(--a)}

/* ---- Le card di Calcolo affiancate, come sul sito ----
   Sotto i 900px (la stessa soglia di .grid.unica qui sopra) tornano una
   sotto l'altra, nell'ordine di lettura originale: due colonne strette non
   lasciano spazio alle etichette piu' lunghe ("Player of the match",
   "Formazione non schierata...") e un binario di trascinamento verticale
   ci sta scomodo in meta' larghezza.
   Le due colonne vere (.colonna-sx/.colonna-dx) le crea bilanciaColonne()
   in app.js, non questo CSS: un grid a righe fisse metterebbe sempre la
   prima e la seconda card affiancate, la terza e la quarta sotto, e se una
   e' un accordion alto e l'altra un interruttore basso la riga si ferma
   all'altezza della piu' alta lasciando un buco vuoto sotto l'altra — cosa
   che qui non deve succedere quando si apre o chiude qualcosa. */
.due-colonne { display:flex; flex-direction:column; gap:16px; margin-bottom:16px; }
.due-colonne > .card { margin-bottom:0; }
.due-colonne .colonna { display:flex; flex-direction:column; gap:16px; flex:1 1 0; min-width:0; }
.due-colonne .colonna > .card { margin-bottom:0; }
@media (min-width:900px) {
  .due-colonne { flex-direction:row; align-items:flex-start; }
}

/* ---- Le freccine di incremento/decremento sulle caselle numeriche ----
   Le caselle del punteggio sono type="text" (vedi la nota su renderConfig:
   type="number" nativo scarta una virgola in silenzio), quindi non hanno le
   frecce native del browser — queste le rifanno a mano, stesso posto e
   stesso gesto del sito: un clic per volta, non un trascinamento. Il
   disegno segue lo stepper nativo di "Generali → Squadre" — un binario
   unico, integrato nel bordo della casella, non due segni che galleggiano
   sopra — cosi' un valore col binario a mano e uno col binario del browser
   si leggono come la stessa cosa. */
.numstep { position:relative; display:flex; width:100%; }
.numstep input { width:100%; padding-right:26px; }
.numstep .stp { position:absolute; right:1px; width:22px;
                display:flex; align-items:center; justify-content:center;
                cursor:pointer; color:var(--dim); font-size:8px; line-height:1;
                user-select:none; border-left:1px solid var(--line);
                transition:background .12s, color .12s; }
.numstep .stp:hover { color:var(--ink); background:var(--hover); }
.numstep .stp:active { background:var(--hover-2); }
.numstep .stp.su { top:1px; height:calc(50% - 1px); border-top-right-radius:5px; }
.numstep .stp.giu { bottom:1px; height:calc(50% - 1px); border-top:1px solid var(--line);
                     border-bottom-right-radius:5px; }
/* Dentro la tabella BONUS/MALUS e i Punteggi F1 la casella resta stretta e
   allineata alle altre della riga (".bm-row input" le fissa gia' a 64px):
   qui il binario torna a misurarsi sul contenuto invece che riempire una
   riga che non ha un "100%" sensato a cui aggrapparsi. */
.bm-campi .numstep { display:inline-flex; width:auto; flex:none; }
/* ".numstep input" (qui sopra) vince per ordine a parita' di specificita' su
   ".bm-row input", e una casella al 100% dentro un binario "auto" e' un
   riferimento circolare che i motori risolvono allargando tutto alla
   larghezza disponibile: il binario tornava largo quanto la card intera
   invece che 64px. Il binario stesso segue a ruota, perche' la sua misura
   "auto" si calcola sul contenuto. */
.bm-campi .numstep input { width:64px; }
#v-lega .chiedi { display:inline-flex; }
/* Le freccette dello stepper erano 22x16px — la meta' dell'altezza della
   casella, che gia' non era generosa. Nel regolamento ce ne sono decine
   (portieri, difensori, sostituzioni, soglie...): un bersaglio ripetuto cosi'
   spesso vale la pena ingrandirlo apposta sullo stretto, anche a costo di
   una casella piu' alta del solito. Il font sale a 16px per lo stesso motivo
   della casella email del gate: sotto, Safari iOS entra in zoom al tocco. */
@media (max-width:900px) {
  .numstep input { font-size:16px; padding:11px 30px 11px 9px; }
  .numstep .stp { width:30px; font-size:9px; }
  /* Dentro Bonus/Malus e i Punteggi F1 la casella e' fissa a 64px (sopra),
     perche' col confronto "per ruolo" acceso ce ne stanno fino a quattro
     affiancate sulla stessa riga: la crescita generale qui sopra ci stava
     dentro comoda a "3" o "10", ma tagliava un valore negativo e decimale
     come "-0,5" (Ammonizione) proprio a meta'. Qui torna la misura di
     prima — e' l'unico punto dell'app dove un numstep deve restare stretto
     anche sul telefono. */
  .bm-campi .numstep input { font-size:14px; padding:7px 22px 7px 8px; }
  .bm-campi .numstep .stp { width:22px; font-size:8px; }
}

/* ---- Soglie gol: la leva verticale del sito ----
   Due pallini trascinabili (1° e 2° gol) su un binario tratteggiato; la
   distanza fra loro e' l'incremento, che si ripete identico sopra per ogni
   gol successivo (i pallini grigi, calcolati, non trascinabili). Stesso
   linguaggio del cursore doppio del listone (.dual piu' sotto in questo
   file): il gesto lo prende il pallino, non un <input type=range> nativo,
   perche' verticale e coi due estremi indipendenti non lo farebbe bene. */
.sg-wrap { display:flex; flex-direction:column; align-items:center; gap:6px;
           padding:10px 0; }
.sg-piu { background:none; border:1px dashed var(--line); color:var(--dim);
          width:28px; height:28px; border-radius:50%; cursor:pointer;
          font-size:16px; line-height:1; }
.sg-piu:hover { color:var(--acc); border-color:var(--acc); }
.sg-track { position:relative; width:100%; max-width:340px; }
.sg-linea-fissa { position:absolute; left:50%; top:0; bottom:0; width:2px;
                   transform:translateX(-50%);
                   background:repeating-linear-gradient(var(--line),var(--line) 3px,transparent 3px,transparent 7px); }
.sg-linea-piena { position:absolute; left:50%; width:3px; transform:translateX(-50%);
                   background:var(--acc); border-radius:2px; }
.sg-punto { position:absolute; left:50%; transform:translate(-50%,-50%);
            display:flex; align-items:center; gap:10px; white-space:nowrap; }
.sg-punto.sg-attivo { cursor:grab; touch-action:none; }
.sg-punto.sg-attivo:active { cursor:grabbing; }
.sg-badge { font-size:10px; font-weight:700; padding:3px 7px; border-radius:20px;
            background:var(--campo-bg); border:1px solid var(--line); color:var(--dim); }
.sg-punto.sg-attivo .sg-badge { background:var(--acc); color:var(--on-acc); }
/* Il pallino che si trascina e' un elemento vero, non disegnato sopra al
   testo: prima era uno pseudo-elemento posizionato sull'intera riga, e gli
   elementi posizionati si dipingono DOPO i figli in flusso dello stesso
   contenitore — copriva l'ordinale del badge ("1°"/"2°") invece di stargli
   accanto. */
.sg-dot { width:14px; height:14px; border-radius:50%; flex:none;
          background:var(--panel); border:3px solid var(--acc); }
/* Le proiezioni oltre ai gradini davvero impostati: stessa forma dei
   gradini calcolati, ma piu' tenui — un'anteprima di dove cadono i gol
   successivi, non ancora parte del regolamento salvato (vedi renderSoglieGol). */
.sg-extra.sg-anteprima { opacity:.5; }
.sg-val { font-size:12px; font-weight:700; color:var(--dim); }
.sg-punto.sg-attivo .sg-val { color:var(--ink); }

/* ---- la gabbia del regolamento ----
   Stessa logica di fantacalcio.it: sezioni numerate a sinistra, una sola
   aperta alla volta a destra — non piu' sei card impilate in una pagina
   lunga. La colonna stretta (`regolamento-pagina`) e' voluta anche su uno
   schermo 16:9: e' un modulo da leggere seduti, non un tabellone da
   riempire da un bordo all'altro come il listone. */
.regolamento-pagina { max-width:980px; margin:0 auto; }
/* Niente riquadro proprio per la nav: un elenco piatto sulla sinistra, non
   un secondo pannello accanto al primo. Cosi' i bottoni delle macro-sezioni
   e le card di ogni sezione condividono lo stesso margine sinistro dello
   schermo — la nav non sporge ne' rientra rispetto al contenuto. */
.regolamento { display:flex; align-items:flex-start; gap:18px; margin-bottom:16px; }
.regolamento-nav { flex:0 0 200px; display:flex; flex-direction:column; gap:2px;
                    background:none; border:none; padding:0 0 0 2px;
                    position:sticky; top:16px; }
.regolamento-voce { display:flex; align-items:center; gap:10px; padding:9px 10px;
                     border-radius:7px; background:none; border:none;
                     color:var(--dim); font-size:13.5px; font-weight:600;
                     font-family:inherit; text-align:left; cursor:pointer; }
.regolamento-voce:hover { background:var(--hover); color:var(--ink); }
.regolamento-voce.on { background:var(--acc); color:var(--on-acc); }
.regolamento-num { display:flex; align-items:center; justify-content:center;
                   flex:none; width:21px; height:21px; border-radius:50%;
                   background:var(--campo-bg); color:var(--dim); font-size:11.5px;
                   font-weight:700; }
.regolamento-voce.on .regolamento-num { background:#0a1c2a; color:var(--acc); }
/* In chiaro il pallino segue la stessa inversione della pastiglia che lo
   ospita (verde fuori, blu petrolio dentro — vedi piu' sopra): qui dentro,
   pero', i due colori restano quelli del marchio anche invertiti, azzurro
   sul cerchio e verde sul numero, cosi' il pallino non sparisce dentro un
   riempimento ormai verde anche lui. */
body[data-tema="chiaro"] .regolamento-voce.on .regolamento-num { background:var(--acc); color:var(--verde); }
/* "Crea lega" sotto l'ultima voce della nav, staccato da essa — non piu' in
   fondo a tutta la pagina: su uno step lungo restava un metro sotto
   l'ultima card, allineato a niente. Sta dentro alla nav apposta, che e'
   "position:sticky" qui sopra: resta a vista mentre si scorre lo step
   aperto, invece di sparire in cima alla pagina non appena si scende. */
.regolamento-azioni { margin-top:18px; padding-top:14px; border-top:1px solid var(--line);
                       display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.regolamento-corpo { flex:1; min-width:0; }
.regolamento-corpo .card:last-child { margin-bottom:0; }
.regolamento-step { display:none; }
.regolamento-step.on { display:block; }

@media (max-width:900px) {
  .regolamento { flex-direction:column; }
  .regolamento-nav { flex-direction:row; overflow-x:auto; position:static;
                     width:100%; box-sizing:border-box; flex-wrap:wrap; }
  .regolamento-voce { flex:none; white-space:nowrap; }
  /* Sulla riga orizzontale delle cinque voci "Crea lega" andrebbe in coda
     alla fila invece che sotto: qui prende tutta la riga per conto suo. */
  .regolamento-azioni { flex:0 0 100%; border-top:none; margin-top:8px; padding-top:0; }
}

/* ---- le scelte grandi del regolamento (Singola/Multipla, e chi verra' dopo) ----
   Stesso linguaggio di fantacalcio.it per le decisioni binarie che contano
   di piu' — due riquadri larghi invece di una tendina — nei nostri colori:
   il bordo si accende in accento quando e' la scelta attiva, e una spunta
   tonda sporge dal bordo inferiore invece del badge decorato che usano loro. */
.blocco-scelta { margin-top:18px; }
.blocco-titolo { font-size:13px; font-weight:600; margin-bottom:8px;
                 display:flex; align-items:center; gap:6px; }
.scelta-grid { display:grid; gap:12px; }
.scelta-grid.due { grid-template-columns:1fr 1fr; }
.scelta-card { position:relative; display:flex; flex-direction:column;
               align-items:center; gap:8px; padding:20px 14px 16px;
               border:1.5px solid transparent; border-radius:12px;
               background:var(--campo-bg); color:var(--dim); cursor:pointer;
               font-size:14px; font-weight:600; font-family:inherit; }
.scelta-card .ico-slot .ico { width:26px; height:26px; opacity:.65; }
.scelta-card:hover { border-color:var(--acc); }
.scelta-card.on { border-color:transparent; background:var(--hover-2); color:var(--ink); }
.scelta-card.on:hover { border-color:var(--acc); }
.scelta-card.on .ico-slot .ico { opacity:1; stroke:var(--acc); }
.scelta-spunta { position:absolute; bottom:-9px; left:50%; transform:translateX(-50%);
                 width:18px; height:18px; border-radius:50%; background:var(--acc);
                 color:#04121a; align-items:center; justify-content:center;
                 font-size:11px; font-weight:700; display:none; }
.scelta-card.on .scelta-spunta { display:flex; }

/* La riga di "Definizione ruoli": una spiegazione a sinistra, il bottone che
   apre il pannello a destra — non serve altro spazio finche' non lo si apre. */
.riga-ruoli { margin-top:18px; display:flex; align-items:center; gap:16px;
              justify-content:space-between; flex-wrap:wrap; }
.riga-ruoli .hint { max-width:440px; }

/* Le correzioni attive nel pannello "Definizione ruoli": una riga per
   giocatore, il ruolo di listino sbarrato verso quello forzato, "azzera"
   sempre alla stessa distanza a destra. */
.riga-ruolo-attiva { display:flex; align-items:center; gap:10px;
                     padding:7px 2px; border-bottom:1px solid var(--line);
                     font-size:13px; }
.riga-ruolo-attiva:last-child { border-bottom:none; }
.riga-ruolo-attiva .mut { margin-left:auto; font-size:12px; }

/* Le eccezioni per ruolo (il gol che vale di più a un difensore, per dire):
   un caso raro, chiuso di default cosi' non occupa spazio a chi non lo usa,
   ma sempre a un clic per chi ne ha bisogno — non un secondo modulo da capire. */
.dettagli-ruolo { margin-top:14px; }
.dettagli-ruolo summary { cursor:pointer; font-size:12.5px; color:var(--acc);
                          list-style:none; }
.dettagli-ruolo summary::-webkit-details-marker { display:none; }
.dettagli-ruolo summary::before { content:"▸ "; }
.dettagli-ruolo[open] summary::before { content:"▾ "; }
.dettagli-ruolo .hint { margin:8px 0; }

/* ---- qual e' la tua squadra ----
   Nel regolamento la riga della propria squadra si segna con un radio, che e'
   la forma giusta: e' una sola, e sceglierne un'altra libera quella di prima
   senza bisogno di spegnerla a mano. */
.squadra-riga .segna { display:flex; align-items:center; gap:6px; margin:5px 0 0;
                       font-size:11px; color:var(--dim); cursor:pointer; }
.squadra-riga .segna input { width:auto; margin:0; accent-color:var(--acc); }
.squadra-riga .segna.on { color:var(--acc); }
.squadra-riga .tua { background:var(--acc); color:var(--on-acc); font-size:9.5px;
                     text-transform:uppercase; letter-spacing:.4px;
                     border-radius:4px; padding:1px 5px; font-weight:700; }

/* Nel tabellone lo stesso fatto sta in due lettere. Il colore e' l'accento,
   perche' deve trovarsi con la coda dell'occhio fra dieci colonne uguali. */
.tua-pill { display:inline-block; background:var(--acc); color:var(--on-acc);
            font-size:8.5px; line-height:1.35; text-transform:uppercase;
            letter-spacing:.3px; border-radius:3px; padding:0 3px;
            margin-right:4px; font-weight:700; vertical-align:1px; }
label { display:block; font-size:12px; color:var(--dim); margin-bottom:4px; }
input, select, textarea { width:100%; background:var(--campo-bg); border:1px solid transparent;
                color:var(--ink); padding:7px 9px; border-radius:6px; font-size:14px;
                font-family:inherit; }
/* Sullo stretto, i campi "normali" — non quelli delle griglie dense, che
   hanno gia' ognuno la propria regola piu' specifica e quindi vincono lo
   stesso su questa (vedi .frow .num, .numstep input, input.rn) — salgono a
   16px e un tocco piu' alti. Sotto i 16px Safari iOS entra in zoom
   automatico alla messa a fuoco: il profilo, "le mie leghe", i nomi delle
   squadre nel regolamento ne soffrivano tutti allo stesso modo del gate
   (vedi la nota li' sopra), semplicemente perche' nessuno l'aveva ancora
   notato fuori dal gate stesso. */
@media (max-width:640px) {
  input, select, textarea { font-size:16px; padding:10px 11px; }
}
/* "select" qui sopra veste il controllo chiuso; l'elenco che si apre e' fatto
   di <option>, un elemento a parte che alcuni browser disegnano con il
   carattere di sistema se non gli si dice esplicitamente di ereditare. */
option { font-family:inherit; }

/* ---------------------------------------------------------------------------
   IL MENU A TENDINA CHE SI APRE VESTITO DA NOI, NON DAL SISTEMA
   Il popup di un <select> nativo lo disegna il sistema operativo: nessun CSS
   lo tocca, in nessun browser, da sempre — bianco piatto, senza transizione,
   qualunque sia il tema della pagina. Chrome (e i browser che condividono il
   suo motore) ha aperto una breccia vera: "appearance:base-select" chiede al
   motore di ridisegnare il popup come un elemento DOM normale, che allora
   CSS puo' vestire e animare come qualunque altro. Dove il browser non lo
   sa fare, la riga qui sotto non ha effetto e il <select> resta quello
   nativo di sempre — non si rompe niente, si guadagna soltanto dove si puo'.
   L'entrata e' un salto tecnico piccolo: si abbassa e si schiarisce da uno
   stato di partenza (@starting-style) invece di comparire di scatto. */
@supports (appearance: base-select) {
  select { appearance:base-select; }
  select::picker-icon { color:var(--dim); transition:transform .15s ease; }
  select:open::picker-icon { transform:rotate(180deg); }
  select::picker(select) {
    appearance:base-select;
    border:1px solid var(--line);
    border-radius:9px;
    background:var(--panel);
    color:var(--ink);
    padding:5px;
    box-shadow:0 14px 34px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.16);
    transition:opacity .16s ease, transform .16s cubic-bezier(.22,.61,.36,1),
               display .16s allow-discrete, overlay .16s allow-discrete;
    opacity:1; transform:translateY(0) scale(1);
  }
  select:open::picker(select) { opacity:1; transform:translateY(0) scale(1); }
  /* Lo stato di partenza dell'animazione: senza @starting-style il popup
     apparirebbe gia' alla posizione finale, un salto secco invece di un
     movimento. */
  @starting-style {
    select:open::picker(select) { opacity:0; transform:translateY(-6px) scale(.97); }
  }
  select option {
    padding:8px 10px;
    border-radius:6px;
    color:var(--ink);
  }
  select option:hover,
  select option:focus-visible { background:var(--hover); }
  select option:checked { background:var(--acc); color:var(--on-acc); }
}
@media (prefers-reduced-motion:reduce) {
  @supports (appearance: base-select) {
    select::picker(select) { transition:none; }
    select::picker-icon { transition:none; }
  }
}
textarea { resize:vertical; line-height:1.5; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--acc); }
input.bad { border-color:var(--bad); background:var(--campo-bad); }
/* Il numero di richieste che aspettano. Sta accanto alla voce "admin" e nel
   titolo della scheda: se non lo si vede senza cercarlo, una coda di
   approvazione diventa un posto dove la gente resta ferma. */
.pallino-conta { display:inline-flex; align-items:center; justify-content:center;
                 min-width:19px; height:19px; padding:0 5px; border-radius:10px;
                 background:var(--warn); color:#05121a; font-size:11px;
                 font-weight:700; vertical-align:2px; margin-left:7px; }
nav button .pallino-conta { margin-left:5px; vertical-align:0; }

.hint { color:var(--dim); font-size:12px; margin:-6px 0 10px; }
/* Un pulsante che vive dentro un paragrafo di spiegazione: deve staccarsi dal
   testo senza diventare il protagonista della pagina.
   Selettore doppio (.toggle.azione-inline) e non solo .azione-inline: a parita'
   di specificita' vince chi sta dopo nel foglio, e .toggle sta dopo. Senza il
   doppio selettore il colore e il bordo restavano quelli spenti di .toggle —
   il pulsante c'era, ma tornava a essere quasi invisibile, esattamente il
   problema che doveva risolvere. */
.toggle.azione-inline { display:inline-flex; align-items:center; gap:6px;
                 vertical-align:middle; margin-left:4px; padding:4px 10px;
                 color:var(--acc); border-color:rgba(122,184,245,.45); }
.toggle.azione-inline:hover:not(:disabled) { background:var(--acc); color:var(--on-acc);
                                      border-color:var(--acc); }
.azione-inline .ico { width:13px; height:13px; }
.check { display:flex; align-items:center; gap:8px; margin:6px 0; }
.check input { width:auto; }
/* La casella nativa e' ~13px, la stessa in ogni schermata del regolamento e
   dei filtri del listone (decine di volte in tutto): sullo stretto cresce e
   prende il colore d'accento, che senza questa riga resta quello di sistema
   invece che il blu/verde del resto dell'app. Riga e non la sola larghezza,
   perche' l'altezza della riga la segue: un tocco piu' alto per tutta la
   fila, non solo per il quadratino. */
@media (max-width:900px) {
  .check { margin:9px 0; }
  .check input[type=checkbox] { width:21px; height:21px; accent-color:var(--acc); flex:none; }
}

button.act { background:var(--acc); border:none; color:var(--on-acc); font-weight:600;
             padding:9px 16px; border-radius:6px; cursor:pointer; font-size:14px; }
button.act.ghost { background:none; border:1px solid var(--line); color:var(--dim); font-weight:400;
                    transition:color .12s, background .12s, border-color .12s; }
button.act.ghost:hover:not(:disabled) { color:var(--ink); border-color:var(--acc); background:var(--hover); }
button.act:disabled { opacity:.45; cursor:not-allowed; }
/* Gli stessi 34px del gate, sugli stessi bottoni "normali" di azione fuori
   da un pannello modale — Apri/Regolamento/Elimina di ogni lega, Salva il
   nome, Cambia password. Le pastiglie dense (.pastiglia, .toggle, i preset
   del regolamento) sono un'altra classe e non le tocca questa regola. */
@media (max-width:640px) {
  button.act, button.danger { padding-top:12px; padding-bottom:12px; }
}
/* Il preset scelto resta segnato finche' il regolamento e' ancora il suo. Non
   e' un accento qualunque: e' un riempimento pieno, blu petrolio del marchio
   con il verde del piede come testo — la stessa coppia, ad alto contrasto,
   in entrambi i temi (sono colori di brand fissi, non le variabili che il
   tema chiaro ridefinisce). Il primo tocco altrove nello step lo spegne —
   vedi il listener su .regolamento-corpo in app.js. */
button.act.ghost[data-preset].on { color:var(--verde); border-color:var(--marchio);
                                    background:var(--marchio); }
button.danger { background:none; border:1px solid #5a2a2a; color:#f0a3a1;
                padding:9px 14px; border-radius:6px; cursor:pointer; font-size:14px; }
button.danger:hover { background:#3a1c1c; }
.toggle { background:none; border:1px solid var(--line); color:var(--dim);
          border-radius:6px; padding:6px 12px; cursor:pointer; font-size:12.5px;
          transition:color .12s, background .12s, border-color .12s; }
.toggle:hover:not(:disabled) { color:var(--ink); border-color:var(--acc); background:var(--hover); }
.toggle:focus-visible { outline:2px solid var(--acc); outline-offset:1px; }
.toggle.on { border-color:var(--acc); color:var(--ink); }
/* "azzera l'asta" cancella una serata di lavoro: il passaggio del mouse lo
   dichiara, invece di farlo sembrare un bottone come gli altri. */
#reset_asta:hover { color:var(--bad-text); border-color:var(--bad); background:#2b1618; }

table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
th, td { padding:5px 6px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap; }
td.l, th.l { text-align:left; }
tbody tr:hover { background:var(--hover); }

/* ---- intestazione della tabella ----
   Sticky sulla pagina (offset var(--headh), sotto la barra dell'app): vale per
   le tabelle senza un contenitore che scorre per conto suo, come quella del
   Mix. Il listone e' un caso diverso, vedi `.tablescroll` qui sotto. */
thead th { position:sticky; top:var(--headh); z-index:3; background:var(--panel);
           box-shadow:inset 0 -1px 0 var(--line); }

/* Il listone ha diciassette colonne di serie: sul listino intero, con tutte le
   descrittive, e' piu' largo di un notebook normale, non solo di un telefono.
   Senza un contenitore che clippi, l'eccesso risale fino a fare scorrere *la
   pagina* in orizzontale — lo stesso identico meccanismo del tabellone
   dell'asta (vedi `.board` piu' sotto), qui sul listone.

   Il prezzo da pagare e' lo stesso: l'intestazione appiccicata si aggancia a
   questo contenitore invece che alla pagina (top:0, non var(--headh) — la
   nota su .board vale identica), quindi su una sessione lunga scorre via
   insieme alle righe invece di restare visibile. Si accetta: la sicurezza di
   non rompere la pagina vale piu' di quel vantaggio. */
.tablescroll { overflow-x:auto; max-width:100%; }
.tablescroll thead th { top:0; }

/* ---- la copia dell'intestazione che resta a video ----
   Il perche' di una copia invece di `position:sticky` sta nel commento qui
   sopra e in `costruisciTestaFlottante`: la testa dentro un contenitore che
   scorre si aggancia al contenitore, non alla pagina.

   `overflow:hidden` e non `auto`: lo scorrimento orizzontale lo comanda la
   tabella vera, questa lo riceve — una seconda barra di scorrimento qui
   sarebbe un secondo modo di muovere la stessa cosa. La riga d'ombra sotto
   stacca la testa dalle righe che le passano dietro. */
#th_flot { position:fixed; z-index:6; overflow:hidden;
           background:var(--panel); box-shadow:0 6px 14px rgba(5,7,11,.45); }
#th_flot[hidden] { display:none; }
#th_flot table { border-collapse:collapse; }
#th_flot th { cursor:pointer; }
th { font-size:10.5px; letter-spacing:.3px; color:var(--dim);
     cursor:pointer; user-select:none; vertical-align:bottom; padding-bottom:7px;
     white-space:normal; }
th .hd { display:block; text-transform:uppercase; font-weight:700; color:#c2d3dd;
         line-height:1.2; }
body[data-tema="chiaro"] th .hd { color:var(--ink); }
th .sub { display:block; text-transform:none; letter-spacing:0; font-weight:400;
          font-size:10px; color:var(--dim); margin-top:1px; }
th:hover .hd { color:var(--acc); }

/* ---- trascinamento di una colonna ----
   La riga verticale marca il lato su cui la colonna verrebbe rilasciata: senza
   di essa, con sedici colonne strette, non si capisce se si sta lasciando
   prima o dopo quella sotto il cursore. */
thead th.colDrag { opacity:.4; cursor:grabbing; }
thead th.dropL { box-shadow:inset 2px 0 0 var(--acc), inset 0 -1px 0 var(--line); }
thead th.dropR { box-shadow:inset -2px 0 0 var(--acc), inset 0 -1px 0 var(--line); }
th .ar { color:var(--acc); }

/* ---------------------------------------------------------------------------
   PREFERITI: la stella. Contorno quando non e' preferito, piena e ambra
   quando lo e' — lo stesso linguaggio pieno/vuoto gia' visto altrove in
   pagina (i tre gradini del rigorista), qui su due soli stati invece di tre.
--------------------------------------------------------------------------- */
.stella { background:none; border:none; padding:0; margin-right:6px; cursor:pointer;
          color:var(--dim); vertical-align:-2px; flex:none; }
.stella .ico { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.3; }
.stella:hover { color:var(--acc); }
.stella.on { color:var(--warn-text); }
.stella.on .ico { fill:currentColor; }
.stella.on:hover { color:var(--warn-text); }

/* La stessa stella, ma come bottone con etichetta nella scheda giocatore —
   li' c'e' spazio per dire cosa fa, non solo per farlo. */

/* Azzera i filtri: acceso solo quando c'e' davvero qualcosa da azzerare. */
.act.azzera { border-color:var(--warn); color:var(--warn-text); font-weight:600; }
.act.azzera.caldo { background:var(--warn); border-color:var(--warn); color:#1a1204;
                    box-shadow:0 0 0 3px rgba(240,161,58,.16); }
.act.azzera.caldo:hover { filter:brightness(1.08); }
.act.azzera:disabled { border-color:var(--line); color:var(--dim); background:none;
                       box-shadow:none; cursor:default; font-weight:400; }

.act.stella-pref { display:inline-flex; align-items:center; gap:6px; }
.act.stella-pref .ico { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.3; }
.act.stella-pref.on { border-color:var(--warn); color:var(--warn-text); }
.act.stella-pref.on .ico { fill:currentColor; }

.role { display:inline-block; width:19px; height:19px; line-height:19px; text-align:center;
        border-radius:5px; font-size:11px; font-weight:700; color:#05121a; }
.role.p{background:var(--p)} .role.d{background:var(--d)}
.role.c{background:var(--c)} .role.a{background:var(--a)}
.up { color:var(--good-text) } .down { color:var(--bad-text) } .mut { color:var(--dim) }
.bar { height:5px; background:var(--line); border-radius:3px; overflow:hidden; min-width:44px; }
.bar i { display:block; height:100%; background:var(--acc); }
.msg { padding:9px 13px; border-radius:7px; margin-bottom:10px; font-size:13px; }
.msg.w { background:#3a2c12; color:#f4c579; border:1px solid #5a441c; }
.msg.e { background:#3a1c1c; color:#f0a3a1; border:1px solid #5a2a2a; }
.msg.i { background:#12293a; color:#9ccdf0; border:1px solid #1d4260; }
.msg.ok { background:#14301f; color:#8fdcb0; border:1px solid #1f5236; }
/* In chiaro un avviso scuro sembra un errore di stile, non un avviso: le
   stesse quattro tinte lette al contrario, pastello con testo scuro. */
body[data-tema="chiaro"] .msg.w { background:#fdf1dc; color:#7a4a05; border-color:#f0d9a8; }
body[data-tema="chiaro"] .msg.e { background:#fdecea; color:#8a2622; border-color:#f3c6c2; }
body[data-tema="chiaro"] .msg.i { background:#e8f1fc; color:#1c4a7a; border-color:#c7dff5; }
body[data-tema="chiaro"] .msg.ok { background:#e9f7ee; color:#1c6b34; border-color:#bfe6cc; }
.filters { display:flex; gap:10px; align-items:end; flex-wrap:wrap; margin-bottom:12px; }
.filters > div { min-width:120px; }
.kpi { font-size:22px; font-weight:600; }
.foot { color:var(--dim); font-size:12px; margin-top:20px; line-height:1.7; }
.from { display:block; font-size:10.5px; color:var(--dim); line-height:1.3; margin-top:1px; }

/* Infortunio in corso, accanto al nome. Rosso quando le giornate perse sono
   gia' scontate dal prezzo, ambra quando il rientro non e' noto e quindi il
   prezzo NON e' stato corretto: sono due informazioni diverse per chi rilancia
   e devono distinguersi senza doverci passare sopra col mouse. */
.ko { display:block; font-size:10.5px; line-height:1.3; margin-top:1px;
      color:#f0a3a1; font-weight:600; }
.ko::before { content:"■ "; font-size:8px; vertical-align:middle; }
.ko.nd { color:#e0b050; font-weight:500; }
/* #f0a3a1/#e0b050 sono pensati per un fondo scuro: su un pannello chiaro
   sono quasi invisibili, non solo "poco leggibili" — la stessa idea di
   --bad-text/--warn-text qui applicata a mano, perche' queste due righe non
   passano da quelle variabili. */
body[data-tema="chiaro"] .ko { color:var(--bad-text); }
body[data-tema="chiaro"] .ko.nd { color:var(--warn-text); }
tbody tr.clickable { cursor:pointer; }

/* ---- didascalie al passaggio del cursore ----
   Sono la spiegazione di una colonna, non un trattato: una riga di definizione,
   una di come si calcola, una di come si legge. La versione lunga vive nel
   README, dove la si va a cercare quando serve invece di riceverla addosso
   mentre si sta scegliendo se rilanciare. */
.tip { position:fixed; z-index:100; max-width:300px; background:#06121a;
       border:1px solid #31596e; border-radius:8px; padding:9px 12px;
       font-size:12.5px; line-height:1.5; color:#dce8ef; pointer-events:none;
       opacity:0; transform:translateY(4px); transition:opacity .1s, transform .1s;
       box-shadow:0 10px 34px rgba(0,0,0,.6); }
.tip.on { opacity:1; transform:translateY(0); }
.tip b { color:#fff; display:block; margin-bottom:3px; font-size:12.5px; }
.tip em { color:var(--acc); font-style:normal; }
.tip .calcolo { display:block; margin-top:4px; color:#9fb8c7; font-size:11.5px; }
[data-tip] { cursor:help; }

/* ---- bandiere dei club ----
   Colore sociale, niente stemmi: il marchio di un club e' suo, il colore no.
   Sono strisce verticali e non un pallino perche' meta' della Serie A si
   distingue solo per l'accostamento — granata e rossoblu' sono lo stesso
   rosso finche' non c'e' la seconda banda accanto. Il bordo chiaro serve ai
   club che hanno il bianco fra i colori: senza, la Juve e l'Udinese
   sparirebbero nel fondo scuro della pagina. */
.bandiera { display:inline-block; width:11px; height:11px; border-radius:2px;
            vertical-align:-1px; flex:none;
            box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); }
.club { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.pastiglia .bandiera { width:10px; height:10px; margin-right:5px; }
th[data-tip] { cursor:pointer; }

/* ---- riquadri modali ---- */
.backdrop { position:fixed; inset:0; background:rgba(5,7,11,.72); z-index:50;
            display:none; align-items:flex-start; justify-content:center; padding:34px 16px;
            overflow:auto; }
.backdrop.on { display:flex; }

/* ---- scheda e Comprato affiancati ----
   Due modali a schermo intero, uno sopra l'altro, che devono comportarsi come
   un pannello solo diviso in due. Tre cose e nessuna di piu':

   1. **Un velo solo.** Quello della scheda resta, quello del Comprato sparisce:
      due sovrapposti scuriscono il doppio, e si vede.
   2. **Il Comprato passa sopra** (z-index) perche' e' quello con cui si
      lavora — e il suo riquadro vuoto lascia passare i clic
      (`pointer-events`), o coprirebbe mezzo schermo con un bersaglio invisibile
      che intercetta il clic destinato alla scheda.
   3. **Ognuno da una parte**, con un tetto alla larghezza della scheda: senza,
      i suoi 920px partono dal centro e finiscono sotto il Comprato.

   La soglia e' 1180 e non 1024: sotto, la scheda scenderebbe a meno di
   settecento pixel e i suoi undici riquadri di proiezione andrebbero a tre per
   riga, che e' proprio la densita' per cui esistono. */
@media (min-width:1180px) {
  body.affiancati #sheet { justify-content:flex-start; padding-left:26px; }
  body.affiancati #sheet .sheet { max-width:min(920px, calc(100vw - 560px)); }
  body.affiancati #buybox, body.confronto-affiancato #buybox {
                            background:none; pointer-events:none;
                            justify-content:flex-end; padding-right:26px; }
  body.affiancati #buybox .panel,
  body.confronto-affiancato #buybox .panel { pointer-events:auto; }
  /* Il confronto si stringe a sinistra esattamente come la scheda quando il
     Comprato gli si mette di fianco: senza, i suoi 920px partono dal centro e
     la colonna dell'ultimo giocatore finisce sotto il pannello. */
  body.confronto-affiancato #comparebox { justify-content:flex-start; padding-left:26px; }
  body.confronto-affiancato #comparebox .sheet { max-width:min(920px, calc(100vw - 560px)); }
}

/* ---- i tre strati ----
   La scheda sta sotto (50, il valore di ogni `.backdrop`), il confronto sopra
   di lei, il Comprato sopra a tutti. L'ordine non e' estetico: e' quello in cui
   si apre uno strato dall'altro — dalla scheda si apre il confronto, e da tutti
   e due si apre il Comprato — e chiudendo quello in cima si ritrova intatto
   quello sotto. Il Comprato resta l'ultimo perche' e' l'unico dove si scrive,
   e sparire sotto a un velo mentre si digita una cifra sarebbe il modo
   peggiore di perdere un rilancio. */
#comparebox { z-index:52; }
#buybox     { z-index:53; }
/* "Aggiungi giocatore" si apre da dentro il confronto e deve stargli sopra.
   Finche' i `.backdrop` avevano tutti lo stesso z-index se la cavava l'ordine
   nel documento; da quando il confronto e' salito, no. */
#addplayerbox { z-index:54; }
.sheet { background:var(--panel); border:1px solid var(--line); border-radius:12px;
         width:100%; max-width:920px; box-shadow:0 24px 70px rgba(0,0,0,.6); }
.sheet header { position:static; border-radius:12px 12px 0 0; align-items:flex-start; }
.sheet .body { padding:18px 20px 22px; }
.sheet h3 { font-size:12px; text-transform:uppercase; letter-spacing:.8px; color:var(--dim);
            margin:22px 0 10px; font-weight:600; }
.sheet h3:first-child { margin-top:0; }

/* ---- le sezioni della scheda si piegano ----
   Il titolo diventa il comando, e deve sembrarlo senza diventare un bottone:
   riga intera cliccabile, freccia a destra, un filo di sfondo al passaggio.
   Una riga divisoria sopra ogni sezione chiusa da' all'insieme la forma di un
   indice, che e' quello che la scheda diventa quando e' tutta ripiegata.

   `margin:0` sul titolo e il riempimento sulla sezione: con il margine sul
   titolo lo spazio resterebbe anche a sezione chiusa, e sei titoli chiusi
   avrebbero ventidue pixel d'aria a testa senza niente in mezzo. */
.pieg { border-top:1px solid var(--line); }
.pieg:first-child { border-top:none; }
.pieg > h3 { display:flex; align-items:center; gap:8px; cursor:pointer;
             margin:0; padding:13px 4px 13px 0; user-select:none; }
.pieg:first-child > h3 { padding-top:2px; }
.pieg > h3:hover { color:var(--ink); }
.pieg > h3:focus-visible { outline:2px solid var(--acc); outline-offset:2px;
                           border-radius:4px; }
/* La freccia sta a destra e ci arriva da sola: e' l'unico elemento con margine
   automatico, quindi si prende tutto lo spazio che avanza dal titolo. */
.pieg-freccia { width:15px; height:15px; margin-left:auto; flex:none;
                fill:none; stroke:currentColor; stroke-width:1.6;
                stroke-linecap:round; stroke-linejoin:round;
                transform:rotate(-90deg); transition:transform .15s ease; }
.pieg.aperta .pieg-freccia { transform:none; }
.pieg > .dentro { display:none; padding-bottom:16px; }
.pieg.aperta > .dentro { display:block; }
/* Il "?" del titolo non deve prendersi lo spazio che serve alla freccia. */
.pieg > h3 .chiedi { flex:none; }
.sheet table th { position:static; cursor:default; }
/* I due bottoni dell'intestazione della scheda: Comprato e la verifica su
   Google. Il selettore e' sulla classe e non sul tag `a`, perche' uno dei due
   e' un `<button>` — quando la regola valeva solo per il link, il fratello
   nasceva senza guscio: niente flex, niente riempimento, altezza diversa, e
   due bottoni accostati che non si somigliavano. */
.verifica { display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
            align-self:center; text-decoration:none; border:1px solid var(--acc);
            color:var(--acc); background:rgba(122,184,245,.10);
            border-radius:6px; padding:6px 12px; font-size:12.5px;
            font-family:inherit; line-height:1.2; height:30px; cursor:pointer;
            transition:background .12s, color .12s; }
.verifica:hover { background:var(--acc); color:var(--on-acc); border-color:var(--acc); }
.verifica:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }

.x { background:none; border:1px solid var(--line); color:var(--dim); border-radius:6px;
     width:30px; height:30px; cursor:pointer; font-size:16px; line-height:1; }
.x:hover { color:var(--ink); border-color:var(--acc); }
/* ---- scarsita' per ruolo, in cima al listone ----
   Sta sopra la tabella e non dentro, perche' non e' una proprieta' dei
   giocatori: e' lo stato del tavolo, e cambia a ogni martellata. */
.scarsita { display:grid; gap:9px; margin:10px 0 0;
            grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
/* Sul largo e' una riga flessibile e non piu' una griglia, per una ragione
   sola: un reparto ridotto a icona deve restringersi a pastiglia e restituire
   la sua larghezza agli altri, e una cella di griglia non lo fa.

   I quattro riquadri aperti restano **uguali fra loro**. Avevo provato a dare
   a ognuno una larghezza proporzionale alle sue fasce — otto ai difensori, tre
   ai portieri — e misurato: a 260 pixel il verdetto dei portieri va a capo
   quattro volte invece di due, e siccome la riga si alza sul piu' alto quel
   riquadro alzava anche gli altri tre. A 345 pixel, cioe' un quarto tondo, ci
   stanno comodi anche gli ottanta trattini dei difensori: la larghezza non era
   il problema che sembrava. */
@media (min-width:901px) {
  .scarsita:not(.compatta) { display:flex; align-items:stretch; }
  .scarsita:not(.compatta) > .sc { flex:1 1 0; min-width:0; }
  .scarsita:not(.compatta) > .sc.chiusa { flex:0 0 auto; }

  /* ---- e resta a video mentre si scorre ----
     E' lo stato del tavolo, e lo stato del tavolo serve *mentre* si guarda
     l'elenco: scorrendo trenta difensori per decidere se rilanciare, "quanti
     ne restano nella fascia in gioco" e' il primo numero che si perde di
     vista, ed e' quello che dice se conviene insistere o aspettare il
     prossimo. Si appiccica sotto la barra dell'app.

     Lo sfondo pieno e i margini negativi non sono decorazione: senza sfondo le
     righe della tabella passano nei nove pixel fra un riquadro e l'altro, e
     senza i -18px la striscia si ferma dentro il riempimento della scheda
     lasciando due strisce di righe visibili ai lati.

     L'intestazione della tabella non entra in conflitto perche' non e'
     appiccicata alla pagina: sta dentro `.tablescroll`, che clippa le
     diciassette colonne, e scorre via con le righe (vedi la nota li' sopra).

     La valvola per l'altezza c'e' gia': ogni riquadro si chiude a icona col
     bottone in alto a destra, e a meta' asta la striscia sta su due riquadri
     aperti e due pastiglie. */
  .split .scarsita:not(.compatta) {
    position:sticky; top:var(--headh); z-index:5;
    background:var(--panel); margin:10px -18px 0; padding:10px 18px 11px;
    border-bottom:1px solid var(--line);
  }
}
.sc { background:var(--campo-bg); border:1px solid transparent; border-left:3px solid var(--line);
      border-radius:8px; padding:8px 11px 8px 22px; cursor:help; }
.sc b { font-size:21px; font-weight:600; margin-left:7px; vertical-align:-2px; }
/* La fascia attaccata al numero: senza, "3" non vuol dire niente -- tre di
   prima fascia e tre di terza sono due situazioni opposte. Sta come esponente
   e non su una riga sua perche' e' un attributo del numero, non un dato in
   piu' da leggere. */
.sc i.fascia { font-style:normal; font-size:10.5px; color:var(--dim); margin-left:8px;
               vertical-align:3px; border:1px solid var(--line); border-radius:999px;
               padding:1px 6px; white-space:nowrap; }
.sc small { display:block; color:var(--dim); font-size:11px; margin-top:2px; }
/* L'andamento del reparto vive nella riga dei fatti e non su una riga sua: la
   striscia sta appiccicata in cima allo schermo e ogni riga in piu' e' altezza
   che toglie ai giocatori. Colorato perche' e' un giudizio e non un conteggio —
   e con gli stessi due colori del verdetto d'acquisto, che dice la stessa cosa
   su un giocatore solo. */
/* `.sc b` e' il numerone del riquadro (21px): qui va disfatto a mano, o
   "mercato -23%" esce grande quanto il conteggio dei liberi e si prende una
   riga tutta sua. */
.sc small b.trend { font-size:11px; font-weight:600; margin-left:0;
                    vertical-align:baseline; }
.sc small b.trend.buono { color:var(--good-text); }
.sc small b.trend.caro  { color:var(--bad-text); }
.sc em { display:block; font-style:normal; font-size:11.5px; margin-top:3px; }
.sc.ok   { border-left-color:var(--good); } .sc.ok em   { color:var(--good-text); }
.sc.warn { border-left-color:var(--warn); }  .sc.warn em { color:var(--warn-text); }
.sc.bad  { border-left-color:var(--bad); }  .sc.bad em  { color:var(--bad-text); }
/* ---- legenda e azzeramento sulla stessa riga ----
   L'azzeramento sta in alto a destra perche' e' l'unica azione che riguarda
   *tutti* i filtri insieme: quelli del pannello, le pastiglie dei contrassegni
   e la fascia scelta cliccando una barretta. Chiuso dentro il pannello dei
   filtri statistici era in uno solo dei posti che azzera, e per raggiungerlo
   bisognava aprire proprio quello. */
.legendriga { display:flex; align-items:flex-start; gap:14px; margin:10px 0 0; }
.legendriga .legend { flex:1; min-width:0; margin:0; }
.legendriga .azzera { flex:none; }

/* ---- la scalinata del reparto ----
   Otto barrette alte quanto rende la fascia. Non ha assi ne' etichette
   apposta: quello che deve passare e' la sagoma — a gradoni gli attaccanti,
   piatta i difensori — e una sagoma si legge senza fermarsi. */
/* Il denominatore della fascia: piccolo e spento, perche' e' il contesto e non
   il numero — "2ª" e' il dato, "/8" dice solo di quante. */
.suquante { font-style:normal; font-size:10px; color:var(--dim); }
.scala { display:flex; align-items:flex-end; gap:6px; height:26px; margin:7px 0 2px; }
/* Un gruppo per fascia, e dentro un trattino per giocatore. Il gruppo e' un
   bottone: cliccandolo il listone si stringe su quel ruolo e quella fascia. */
.scala .gr { display:flex; align-items:flex-end; gap:1px; height:100%;
             min-width:0; padding:0; border:none; background:none; cursor:pointer;
             border-radius:2px; }
.scala .gr:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
/* Tre livelli, e devono restare distinguibili a due pixel di larghezza: spento
   e' gia' comprato, medio e' ancora libero, accento e' la fascia in gioco. */
.scala .gr i { flex:1; min-width:2px; height:var(--h); background:#4d768f;
               border-radius:1px 1px 0 0; transition:background .15s ease; }
.scala .gr i.preso { background:#12262f; }
.scala .gr.ora i { background:var(--acc); }
.scala .gr.ora i.preso { background:#12262f; }
.scala .gr:hover i { background:var(--ink); }
.scala .gr:hover i.preso { background:#26505f; }
.scala .gr.sel i, .scala .gr.sel.ora i { background:var(--warn); }
.scala .gr.sel i.preso { background:#3d2e14; }

/* ---- il riquadro che si riduce a icona ----
   A meta' asta il portiere e' spesso una pratica chiusa mentre in difesa
   restano quaranta nomi. Chiudere il reparto finito ridistribuisce la
   larghezza agli altri, ed e' l'unica cosa di cui questa striscia ha bisogno
   quando l'asta e' avanti. */
/* ---- la manopola che piega un reparto ----
   Era un quadratino di venti pixel in alto a destra, e centrarlo mentre
   qualcuno rilancia e' un gesto che si sbaglia. Adesso e' tutta la fascia
   verticale a sinistra del riquadro: la stessa colonna dove gia' corre il
   bordo colorato del reparto, cioe' il posto che l'occhio associa gia' a
   "questo blocco". Bersaglio alto quanto il riquadro invece che venti pixel,
   e la freccia ci sta in mezzo a fare da segno.

   Il bordo colorato resta il bordo del riquadro e non entra nel bottone: e'
   uno stato (verde, ambra, rosso), non un comando, e accenderlo al passaggio
   del cursore avrebbe detto una cosa falsa. */
.sc { position:relative; }
.sc .chiudi { position:absolute; left:0; top:0; bottom:0; width:18px;
              display:flex; align-items:center; justify-content:center; padding:0;
              border:0; border-radius:7px 0 0 7px; background:none;
              color:var(--dim); opacity:.45; cursor:pointer;
              transition:opacity .12s, background .12s; }
.sc .chiudi:hover { opacity:1; background:var(--hover); color:var(--ink); }
.sc .chiudi:focus-visible { opacity:1; outline:2px solid var(--acc); outline-offset:-2px; }
.sc .chiudi .ico { width:13px; height:13px; transform:rotate(180deg); }
.sc.chiusa { padding:0; border-left-color:var(--acc); }
.sc.chiusa .apri { display:flex; align-items:center; gap:7px; width:100%;
                   padding:8px 10px; border:none; background:none; cursor:pointer;
                   color:var(--ink); }
.sc.chiusa .apri:hover { background:var(--hover); }
.sc.chiusa .apri b { font-size:16px; margin:0; }
.sc.chiusa .apri .ico { width:13px; height:13px; color:var(--dim); }
.sc.done { border-left-color:var(--line); opacity:.55; }
.sc.done b { font-size:15px; }

.tiles { display:grid; gap:9px; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); }
.tile { background:var(--campo-bg); border:1px solid var(--line); border-radius:8px; padding:9px 11px;
        position:relative; }

/* ---- il punto interrogativo che apre la didascalia al tocco ----
   Esiste solo dove il passaggio del cursore non c'e'. Sul largo la stessa
   spiegazione arriva passando sopra il riquadro, e qui resta spento. */
.chiedi { display:none; width:17px; height:17px; padding:0; border-radius:50%;
          border:1px solid var(--line); background:var(--panel-2); color:var(--dim);
          font-size:11px; font-weight:700; line-height:1; cursor:pointer;
          align-items:center; justify-content:center; flex:none; position:relative; }
.chiedi:active { border-color:var(--acc); color:var(--acc); }
/* Esiste solo dove non c'e' il passaggio del mouse (vedi sopra) — cioe' e' un
   bersaglio pensato per il dito, ma il cerchietto visibile resta 17px perche'
   ingrandirlo sfigurerebbe il riquadro. Un ::before invisibile allarga solo
   l'area che risponde al tocco, senza cambiare quello che si vede: lo stesso
   trucco della stella nella scheda-riga del listone. */
.chiedi::before { content:""; position:absolute; inset:-9px; }
.tile > .chiedi { position:absolute; top:6px; right:6px; }
/* Etichetta e iconcina su una riga sola, con l'icona che resta in cima quando
   l'etichetta va a capo: allineata al centro di due righe finirebbe a meta'
   fra le due, dove non appartiene a nessuna. */
.tile span { display:flex; align-items:flex-start; gap:5px;
             font-size:10.5px; text-transform:uppercase; letter-spacing:.4px;
             color:var(--dim); margin-bottom:3px; }
.tile span .ico { margin-top:1px; opacity:.8; }
.tile span em { font-style:normal; min-width:0; }
.tile b { font-size:19px; font-weight:600; }
.tile small { color:var(--dim); font-size:11px; display:block; }
/* Il mix e' quattro conti distinti, uno per ruolo: vanno separati a vista,
   o si leggono come un elenco unico e il numero perde significato. */
.mixrole + .mixrole { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.mixrole h4 { margin:0 0 6px; font-size:13px; font-weight:600; }
.mixrole h4 .role { margin-right:6px; }

.legend { display:flex; gap:14px; flex-wrap:wrap; color:var(--dim); font-size:11.5px; margin-top:9px; }
.legend i { display:inline-block; width:10px; height:10px; border-radius:2px;
            margin-right:5px; vertical-align:-1px; }
.calc { background:var(--campo-bg); border:1px solid var(--line); border-radius:8px;
        padding:11px 13px; font-size:12.5px; color:var(--dim); line-height:1.9; }
.calc code { color:var(--ink); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; }

/* ---- pulsante Comprato ---- */
.buy { border:1px solid var(--line); background:var(--campo-bg); color:var(--dim);
       border-radius:5px; padding:3px 8px; font-size:11px; cursor:pointer;
       white-space:nowrap; }
.buy:hover { border-color:var(--acc); color:var(--ink); }
.buy.owned { background:#12293a; border-color:#1d4260; color:#9ccdf0; }
body[data-tema="chiaro"] .buy.owned { background:#e8f1fc; border-color:#c7dff5; color:#1c4a7a; }
tr.taken { opacity:.62; }
tr.taken td { background:#0b1f2b55; }

/* ---- pannello di assegnazione ---- */
.panel { background:var(--panel); border:1px solid var(--line); border-radius:12px;
         width:100%; max-width:460px; box-shadow:0 24px 70px rgba(0,0,0,.6);
         padding:18px 20px 20px; }
.panel h2 { font-size:13px; text-transform:uppercase; letter-spacing:.8px;
            color:var(--dim); margin:0 0 4px; font-weight:600; }
/* Il titolo e l'interruttore dei consigli sulla stessa riga: l'interruttore e'
   una preferenza sul pannello intero, non un comando dentro il modulo, e messo
   in mezzo alle caselle si leggerebbe come un campo da compilare. */
.titolo-riga { display:flex; align-items:baseline; justify-content:space-between;
               gap:10px; margin-bottom:4px; }
.titolo-riga h2 { margin:0; }
.occhio { display:inline-flex; align-items:center; gap:5px; flex:none;
          background:none; border:1px solid var(--line); border-radius:6px;
          color:var(--dim); font-family:inherit; font-size:10.5px;
          text-transform:uppercase; letter-spacing:.6px; padding:3px 8px;
          cursor:pointer; transition:color .12s, border-color .12s; }
.occhio:hover { color:var(--ink); border-color:var(--acc); }
.occhio .ico { width:14px; height:14px; }
/* Spento si vede da lontano: e' lo stato in cui il pannello *non* consiglia
   piu' niente, e non accorgersene sarebbe peggio che non avere il pulsante. */
.occhio.spento { color:var(--warn-text); border-color:var(--warn); }

/* ---- i pannelli si spostano dalla testata ----
   `cursor:grab` sulla testata e non sul pannello: dice dove si afferra, ed e'
   l'unica istruzione che questa funzione ha bisogno di dare. I comandi dentro
   la testata riprendono il cursore normale, o sembrerebbero anche loro roba da
   trascinare.

   `touch-action:none` perche' altrimenti sul trackpad e sui touch il gesto
   viene interpretato come uno scorrimento della pagina e il pannello resta
   fermo mentre sotto scorre tutto.

   Durante il viaggio l'ombra si alza e la transizione sparisce: senza, il
   pannello insegue il cursore con un fotogramma di ritardo e sembra elastico. */
.maniglia { cursor:grab; touch-action:none; user-select:none; }
.maniglia:active { cursor:grabbing; }
.maniglia button, .maniglia a, .maniglia input, .maniglia select { cursor:default; }
.maniglia button, .maniglia a { cursor:pointer; }
.panel.in-viaggio, .sheet.in-viaggio { transition:none;
                                       box-shadow:0 30px 90px rgba(0,0,0,.75); }
/* Il ritratto del pannello di assegnazione: fisso in alto a destra, il testo
   sotto gli lascia posto invece di finirci sotto. */
#buybox .panel { position:relative; }
#buybox .titolo-riga, #buybox .who, #buybox #bb_msg { padding-right:96px; }
.bb-foto { position:absolute; top:16px; right:18px; }
.bb-foto .santino { width:84px; height:84px; border-radius:14px;
                    box-shadow:0 4px 16px rgba(0,0,0,.4); }
@media (max-width:480px) {
  .bb-foto .santino { width:60px; height:60px; border-radius:12px; }
  #buybox .titolo-riga, #buybox .who, #buybox #bb_msg { padding-right:70px; }
}
/* ---- tocco nei pannelli modali (accesso, iscrizione, assegnazione, conferme) ----
   Il resto dell'app tiene i campi bassi (34-35px) apposta, per la densita' del
   tabellone e delle righe di editing rapido. Dentro un pannello modale pero'
   non c'e' nessuna griglia da tenere stretta: e' un modulo isolato, spesso il
   primo tocco della sessione (il gate di accesso), e sotto i 44px diventa
   difficile da centrare col pollice. In piu' un font sotto i 16px fa entrare
   Safari iOS in zoom automatico appena si tocca un campo — sul gate, con la
   tastiera che si apre, il salto di zoom sposta tutto ed e' disorientante. */
@media (max-width:640px) {
  .panel input, .panel select, .panel textarea {
    font-size:16px; padding:11px 12px; min-height:44px;
  }
  .panel .check input { min-height:0; }
  .panel button.act, .panel button.danger, .panel .acts button {
    min-height:44px; font-size:15px;
  }
  .panel .foot a, #g_switch { display:inline-block; padding:4px 2px; }
}
.panel .who { font-size:17px; font-weight:600; margin-bottom:14px; }
.panel .row { display:flex; gap:10px; margin-bottom:12px; }
.panel .row > div { flex:1; }
.panel .acts { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.panel .acts .grow { flex:1; }
.quick { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.quick button { background:var(--campo-bg); border:1px solid transparent; color:var(--dim);
                border-radius:5px; padding:3px 9px; font-size:11.5px; cursor:pointer; }
.quick button:hover { border-color:var(--acc); color:var(--ink); }

/* La squadra a cui assegnare, a bottoni invece che a tendina: si sceglie con
   un tocco, su una o due righe, invece di aprire un menu e scorrerlo fra
   dieci o venti nomi. */
.team-pills { display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.team-pills .pill { background:var(--campo-bg); border:1px solid transparent; color:var(--ink);
                     border-radius:999px; padding:4px 11px; font-size:12px;
                     cursor:pointer; white-space:nowrap; }
.team-pills .pill:hover { border-color:var(--acc); }
.team-pills .pill.sel { background:var(--acc); border-color:transparent; color:var(--on-acc);
                         font-weight:600; }
.team-pills .pill.sel:hover { border-color:var(--marchio); }

/* ---------------------------------------------------------------------------
   LISTONE: tabella a sinistra, tabellone dell'asta a destra.
   Erano due schermate, e passare dall'una all'altra a ogni chiamata era il
   gesto piu' ripetuto dell'intera serata. Ora il tabellone e' un pannello
   agganciato che si aggiorna da solo: si guarda il prezzo e si vede, nello
   stesso colpo d'occhio, chi ha ancora crediti per portarlo via.
--------------------------------------------------------------------------- */
.split { display:grid; grid-template-columns:minmax(0,1fr) 296px; gap:14px;
         align-items:start; }
.split > .card { margin-bottom:0; }
/* L'altezza misurata della barra, non un numero scritto a mano: e' l'aggancio
   corretto sia in alto (il pannello non finisce sotto la barra) sia in basso
   (non sfora la finestra della stessa quantita', tagliando l'ultima squadra).
   overflow:auto resta come rete di sicurezza per le leghe molto numerose: la
   capienza vera la garantisce adattaMini(), che stringe le schede finche' non
   ci stanno tutte. */
.side { position:sticky; top:calc(var(--headh) + 14px);
        max-height:calc(100vh - var(--headh) - 28px);
        overflow:auto; padding:12px 13px; }
.side h2 { margin-bottom:10px; }
.side .foot { margin-top:12px; font-size:11px; }
/* La testata del riepilogo: il titolo che porta alle Fantasquadre e, accanto,
   l'interruttore dell'avviso audio. L'interruttore sta qui perche' questo e'
   il pannello che si guarda mentre si assegna. */
.mini-testata { display:flex; align-items:center; justify-content:space-between;
               gap:8px; margin-bottom:10px; }
.mini-testata h2 { margin-bottom:0; }
/* L'altoparlante: un'icona sola, senza testo, perche' sta accanto a una parola
   ("Fantasquadre") che dice gia' tutto il resto. Spento si riconosce dalla
   barra diagonale, che e' il simbolo che su ogni dispositivo vuol dire "no". */
.suono { background:none; border:1px solid var(--line); color:var(--dim);
         border-radius:5px; width:26px; height:26px; cursor:pointer;
         display:inline-flex; align-items:center; justify-content:center; padding:0; }
.suono:hover { border-color:var(--acc); color:var(--ink); }
.suono svg { width:14px; height:14px; }
.suono .tacca { display:none; }
.suono.off { color:#5c7d8f; }
.suono.off .tacca { display:block; }
/* Il tabellone compatto: una riga per squadra, gli slot come pastiglie. */
.mini { display:flex; flex-direction:column; gap:7px; }
.mini .t { background:var(--campo-bg); border:1px solid transparent; border-radius:8px;
           padding:7px 9px; cursor:pointer; }
.mini .t:hover { border-color:var(--acc); }
.mini .t.sel { border-color:var(--acc); background:#12354a; }
/* Niente card scura in mezzo a un mucchio di card chiare: la selezione qui
   si vede dal bordo (gia' acceso sopra), lo sfondo resta quello di sempre —
   nessuna variante blu scuro per questo riquadro, in chiaro. */
body[data-tema="chiaro"] .mini .t.sel { background:var(--hover); }
.mini .top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
/* Il nome e' l'unica parte elastica della riga: tutto il resto — stemma,
   punteggio, crediti — ha una misura fissa, e quello che avanza e' suo. Piu'
   marcato di prima: e' la parola con cui si chiamano le squadre al tavolo. */
.mini .nm { font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis;
            white-space:nowrap; flex:1; min-width:0; }
/* La propria squadra nella colonna compatta: il bordo, non una pastiglia.
   Qui i pixel orizzontali sono contati, e un bordo non ne costa nessuno. */
.mini .t.mia { border-color:#3f6b8c; box-shadow:inset 3px 0 0 var(--acc); }
.mini .t.mia .nm { color:var(--good-text); }
/* I crediti sono la cifra che si cerca per prima, e stavano li' muti come un
   dato qualsiasi. Ora sono il numero piu' grosso della riga, in bianco
   pieno: "quanto gli resta?" decide se un rilancio e' una minaccia o
   teatro, e il bianco e' il colore che non si confonde con nessun avviso
   (l'oro di prima si leggeva come uno stato, non come un dato). */
.mini .cr { font-size:15px; font-weight:800; font-variant-numeric:tabular-nums;
            color:var(--ink); flex:none; }
.mini .cr b { font-weight:800; }
.mini .cr small { color:var(--dim); font-size:10px; font-weight:400; }
/* Il lampo del conto alla rovescia: la cifra che scende deve sembrare viva,
   non un numero sostituito da un altro. */
.mini .cr b.scalino { animation:scalino .55s ease-out; }
@keyframes scalino { 30% { color:var(--ink); transform:scale(1.25); } }
/* L'ultimo acquisto, in piccolo accanto al nome: sta nella riga del nome e
   non in una sua perche' la riga sua spariva appena il pannello si stringeva
   (adattaMini), mentre "chi ha preso per ultimo?" all'asta si chiede a ogni
   chiamata. */
.mini .ult { font-size:10.5px; color:var(--dim); white-space:nowrap; overflow:hidden;
             text-overflow:ellipsis; flex:none; max-width:92px; }
.mini .slots { display:flex; gap:2px; margin-top:5px; flex-wrap:wrap; }
/* Il gruppo di un reparto, a larghezza fissa (calcolata in JS sui suoi
   slot): senza, una barra senza pallini dentro non ha una larghezza propria
   da cui crescere, e finiva grande quanto un pallino solo dentro la riga
   condivisa da tutti i reparti. `flex:none` lo tiene fermo a quella
   larghezza anche se la riga si accorcia o si allarga. */
.ruolo-slot { display:flex; gap:2px; flex:none; }
.pip { width:9px; height:9px; border-radius:2px; background:var(--line); }
.pip.p{background:var(--p)} .pip.d{background:var(--d)}
.pip.c{background:var(--c)} .pip.a{background:var(--a)}
/* Non piu' un contorno vuoto — si perdeva nella card anche col bordo piu'
   chiaro di prima: una casella riempita, come tutte le altre del reparto,
   solo in un tono suo che dice "libera" a colpo d'occhio invece di doverla
   distinguere da un'assenza. */
.pip.free { background:var(--panel-2); border:1px solid var(--dim); }
/* L'ultimo slot libero del reparto: e' il rilancio che lo chiude, e deve
   distinguersi dagli altri pallini vuoti prima che qualcuno lo compri senza
   accorgersene. Bordo ambra e un respiro lento, non il lampeggio secco
   dell'assegnazione appena fatta — qui non e' successo niente ancora, e'
   un avviso che dura finche' dura la condizione. */
.pip.free.ultimo { border-color:var(--warn); animation:respiraUltimo 1.7s ease-in-out infinite; }
@keyframes respiraUltimo {
  0%, 100% { box-shadow:0 0 0 0 rgba(240,161,58,.55); }
  50% { box-shadow:0 0 0 3px rgba(240,161,58,0); }
}
/* Il reparto chiuso non e' "quasi pieno": e' pieno, e si disegna come una
   linea continua che occupa tutto lo spazio del reparto — non le pastiglie
   una di fianco all'altra. Chi rilancia deve distinguere "ancora comprabile"
   da "fuori dai giochi" con la coda dell'occhio, e le pastiglie accese
   dicevano la prima cosa. */
.pipbar { flex:1 1 auto; width:100%; height:9px; border-radius:4px; background:var(--line);
          transform-origin:left center; }
.pipbar.p{background:var(--p)} .pipbar.d{background:var(--d)}
.pipbar.c{background:var(--c)} .pipbar.a{background:var(--a)}
/* Solo la prima volta, quella della chiusura: la barra si riempie davanti a
   chi l'ha deciso. Alle ricariche successive e' una barra e basta. */
.pipbar.riempi { animation:riempi .6s ease-out; }
@keyframes riempi { from { transform:scaleX(.06); } }
/* Il pallino del ruolo appena occupato: sboccia e poi lampeggia due volte —
   un pallino di nove pixel che cresce una volta sola si perde con la coda
   dell'occhio, mentre chi assegna sta gia' guardando altrove (il toast, i
   crediti che scalano). Il lampeggio due volte e' quello che si nota anche
   senza guardare fisso il riepilogo. */
.pip.nuovo { animation:sboccia .8s ease-out, lampeggia-pip .55s ease-in-out .8s 2; }
@keyframes sboccia {
  0% { transform:scale(.2); box-shadow:0 0 0 0 rgba(255,255,255,.9); }
  45% { transform:scale(1.5); box-shadow:0 0 6px 2px rgba(255,255,255,.55); }
  100% { transform:scale(1); }
}
@keyframes lampeggia-pip {
  0%, 100% { filter:brightness(1); box-shadow:none; }
  50% { filter:brightness(2.1); box-shadow:0 0 5px 2px rgba(255,255,255,.65); }
}
.pipbar.nuovo { animation:riempi .6s ease-out, lampeggia-pip .55s ease-in-out .6s 2; }
/* La scheda della squadra che ha appena comprato: un lampo del bordo, non un
   cambio di colore — il colore e' gia' parlato (selezionata, mia). */
.mini .t.festa { animation:lampoFesta 1.2s ease-out; }
@keyframes lampoFesta {
  0%, 100% { box-shadow:none; }
  20% { box-shadow:0 0 0 2px var(--good); }
  60% { box-shadow:0 0 10px 1px rgba(126,231,135,.35); }
}
/* Bersaglio del trascinamento dal listone. */
.mini .t.drop { border-color:var(--good); background:#12211a; }
body[data-tema="chiaro"] .mini .t.drop { background:#e9f7ee; }
/* ---- riordinare il tavolo trascinando ----
   Due segni diversi per due trascinamenti diversi che atterrano sullo stesso
   bersaglio: verde e pieno quando arriva un **giocatore** da assegnare (sopra),
   una riga d'accento sul bordo quando arriva una **squadra** da riordinare. Se
   fossero uguali, a meta' asta non si saprebbe cosa sta per succedere.

   Sopra o sotto e non solo "qui": senza il lato, portare una squadra in fondo
   all'elenco sarebbe impossibile — non c'e' niente sotto l'ultima. */
.mini .t { cursor:grab; }
.mini .t.colDrag { opacity:.4; cursor:grabbing; }
.mini .t.dropSu  { box-shadow:inset 0 3px 0 var(--acc); }
.mini .t.dropGiu { box-shadow:inset 0 -3px 0 var(--acc); }
/* Il bordo della propria squadra e il segno del rilascio userebbero lo stesso
   `box-shadow`, e vince l'ultimo dichiarato: qui si dichiarano insieme, cosi'
   trascinando sulla propria non sparisce ne' l'uno ne' l'altro. */
.mini .t.mia.dropSu  { box-shadow:inset 3px 0 0 var(--acc), inset 0 3px 0 var(--acc); }
.mini .t.mia.dropGiu { box-shadow:inset 3px 0 0 var(--acc), inset 0 -3px 0 var(--acc); }
tbody tr.drag { opacity:.45; }

/* I tre gradini di adattaMini(), in ordine di quanto poco costa perderli.
   d1: cade l'istruzione in fondo — si legge una volta nella vita.
   d2: cade l'ultimo acquisto, la riga piu' alta e la meno urgente: mentre si
       rilancia conta chi ha slot e crediti, non chi ha preso cosa tre chiamate fa.
   d3: nome, crediti e pastiglie su una riga sola.
   Sotto d3 non si scende: pastiglie piu' piccole non si contano piu' a occhio,
   ed e' il colpo d'occhio l'unica ragione per cui il pannello esiste. */
.side.d1 .foot, .side.d2 .foot, .side.d3 .foot { display:none; }
.side.d2 .mini .t, .side.d3 .mini .t { padding:5px 8px; }
/* All'ultimo gradino, su una riga sola, l'ultimo acquisto cede il posto al
   resto: li' si conta chi ha slot e crediti, non chi ha preso cosa. */
.side.d3 .mini .ult { display:none; }
.side.d3 h2 .mut { display:none; }
.side.d3 .mini .t { padding:4px 8px; display:flex; align-items:center; gap:8px; }
.side.d3 .mini .top { flex:1; min-width:0; gap:6px; }
.side.d3 .mini .slots { display:none; }
.side.d3 .mini .conte { display:flex; }

/* Il conto degli slot liberi per reparto: la stessa informazione delle
   pastiglie in un quarto dello spazio. Compare solo all'ultimo gradino,
   dove le pastiglie non ci starebbero piu' su una riga. */
.mini .conte { display:none; gap:3px; flex:none; }
.mini .conte .c { width:17px; height:17px; line-height:17px; text-align:center;
                  border-radius:4px; font-size:10.5px; font-weight:700;
                  color:#05121a; font-variant-numeric:tabular-nums; }
.mini .conte .c.p{background:var(--p)} .mini .conte .c.d{background:var(--d)}
.mini .conte .c.c{background:var(--c)} .mini .conte .c.a{background:var(--a)}
.mini .conte .c.pieno { background:var(--line); color:#5c7d8f; }
/* Un reparto chiuso e' l'unico, in questo riepilogo, che si puo' toccare da
   qui: chiuderlo era un clic, riaprirlo doveva esserlo altrettanto invece di
   mandare a cercare la cella giusta in Le Fantasquadre. Il bordo tratteggiato
   e' il richiamo — pieno e chiuso hanno lo stesso colore di sfondo, e senza
   un segno in piu' sembrerebbero la stessa cosa anche al tocco. */
.mini .conte .c.riapri { cursor:pointer; border:1px dashed var(--warn); }
.mini .conte .c.riapri:hover { background:var(--warn); color:#05121a; }

/* Sotto i 1500px la tabella e il pannello non ci stanno affiancati, e la
   tabella verrebbe tagliata sul bordo destro — cioe' si perderebbe la colonna
   Scarto senza nessun segnale che sia successo. Il pannello passa allora
   *sopra* il listone come striscia orizzontale: si perde l'affiancamento, non
   il colpo d'occhio, che era il punto. */
@media (max-width:1500px) {
  .split { grid-template-columns:minmax(0,1fr); }
  /* Resta appiccicata sotto le due barre invece di scorrere via con la pagina:
     "sempre in vista" e' l'unico requisito di questo pannello, e da striscia
     orizzontale costa due righe di altezza, non mezzo schermo. */
  .split > .side { order:-1; top:var(--headh);
                   max-height:40vh; z-index:20; padding:9px 11px;
                   border-radius:0 0 10px 10px; }
  .side h2 { display:none; }
  .side .foot { display:none; }
  .mini { flex-direction:row; flex-wrap:wrap; }
  .mini .t { flex:1 1 155px; min-width:0; }
  /* Da striscia orizzontale la scheda e' larga centocinquanta pixel, e la sua
     testata e' gia' occupata da punteggio e crediti: il nome ci sta per due
     lettere e lo stemma se le prenderebbe tutte. Sotto i 1500 pixel lo stemma
     non si vede, e la propria squadra resta segnata dal bordo. Nel pannello
     stretto — dove la scheda occupa la riga intera — c'e' posto e si vede. */
  .mini .stemma { display:none; }
  .side.d2 .mini .t, .side.d3 .mini .t { flex:1 1 132px; }
  .side.d3 .mini .nm { max-width:none; }
}

/* ---------------------------------------------------------------------------
   ASTA LIVE: il tabellone grande, una colonna per squadra.
--------------------------------------------------------------------------- */
/* overflow-x:auto e non visible: DEVE clippare, altrimenti il tabellone (che
   con tante squadre e' piu' largo della finestra) non si ferma al proprio
   bordo. Sfora .card, sfora main, e siccome nessun antenato fra lui e <html>
   e' a sua volta un contenitore di scorrimento, l'eccesso risale fino alla
   pagina: e' lei che finisce con la barra orizzontale, con "Squadra 10"
   tagliata a meta' e nessuno scrollbar visibile a farlo capire.

   Serve pero' anche max-width:100%, non solo overflow-x:auto: senza,
   .board eredita comunque una larghezza "auto" che una tabella piu' larga di
   lui puo' tirare verso l'alto (la stessa risalita di sopra, un gradino piu'
   in la'). L'overflow-x:auto da solo clippa un .board che e' GIA' della
   dimensione giusta; max-width:100% e' cio' che lo obbliga a esserlo. */
.board { overflow-x:auto; max-width:100%; }
/* Layout automatico e non `fixed`: a larghezza fissa il browser ignora il
   min-width delle colonne e le schiaccia tutte in parti uguali, cosi' venti
   squadre diventerebbero venti strisce da cinquanta pixel invece di far
   comparire lo scorrimento. Col layout automatico il min-width e' un pavimento
   vero, e la tabella si allarga oltre il contenitore solo quando serve. */
table.grid2 { border-collapse:separate; border-spacing:0; min-width:100%; }
table.grid2 th, table.grid2 td { border:1px solid var(--line); padding:4px 7px;
                                 text-align:left; vertical-align:middle; }
/* L'impilamento conta piu' di quanto sembri. Senza z-index l'intestazione
   appiccicata veniva coperta dalle righe che le scorrevano sotto: si vedeva la
   riga dei crediti sopra i nomi delle squadre e il primo giocatore di ogni
   reparto spariva dietro la testa. Da qui in giu' l'ordine e' esplicito:
   angolo 6 > crediti-banda 5 > testa 4 > crediti 3 > bande 2 > celle. */
/* top:0 e non var(--headh), ed e' il punto che rompeva tutto. `.board` ha
   overflow-x:auto, e per le regole CSS un asse non-visible costringe l'altro ad
   auto: quindi .board e' un contenitore di scorrimento anche in verticale, e lo
   sticky della testa si misura da li', non dalla pagina. Con top:53px la testa
   veniva spinta GIU' di 53px dentro il contenitore e si sedeva esattamente sopra
   la prima riga di ogni reparto, che spariva. La pagina scorre, il contenitore
   no: l'unico offset corretto e' zero. */
table.grid2 thead th { position:sticky; top:0; z-index:4;
                       background:var(--panel);
                       font-size:11px; text-align:center; white-space:nowrap;
                       min-width:104px; }
table.grid2 th.corner { left:0; z-index:6; min-width:74px; }
table.grid2 td.band, table.grid2 th.band { position:sticky; left:0; z-index:2;
       text-align:center; font-weight:700; font-size:11px; letter-spacing:1px;
       color:#05121a; width:74px; min-width:74px; }
.band.p{background:var(--p)} .band.d{background:var(--d)}
.band.c{background:var(--c)} .band.a{background:var(--a)}
/* I colori di reparto, piu' marcati: la banda e' l'unica mappa che dice
   "questa riga e' un centrocampista", e com'era prima venti colonne di nomi
   si leggevano come una colonna sola. Un'ombra interna sotto e un filo di
   luce a sinistra danno profondita' senza spendere un pixel di larghezza —
   la banda e' appiccicata a sinistra e i pixel di larghezza valgono doppio. */
table.grid2 td.band { font-size:11.5px;
                      box-shadow: inset 0 -4px 0 rgba(0,0,0,.28),
                                  inset 2px 0 0 rgba(255,255,255,.18);
                      border-color:#05121a; }

/* La riga dei crediti NON e' appiccicata. Tenerla incollata sotto la testa
   sarebbe comodo, ma richiede l'altezza esatta dell'intestazione, che dipende
   dai nomi delle squadre e che al primo render non si puo' misurare perche' la
   vista Asta e' ancora nascosta: veniva zero, i due strati finivano alla stessa
   altezza e coprivano per sempre il primo giocatore di ogni reparto. */
/* I crediti che restano sono il numero che decide se si puo' ancora
   rilanciare: piu' grande e in bianco pieno, non nel grigio del resto della
   riga, cosi' si legge senza dover puntare lo sguardo. */
tr.credits td { background:var(--campo-bg); text-align:center; font-variant-numeric:tabular-nums;
                font-size:16px; font-weight:700; color:var(--ink); }
tr.credits td.band { z-index:3; background:var(--campo-bg); color:var(--dim); letter-spacing:.4px; }

/* Il punteggio della squadra: punti a giornata a rosa finita. Sta sulla riga
   sotto i crediti e nella testata delle schede compatte, cioe' sempre dentro a
   qualcosa che c'era gia' — l'altezza del tabellone e' un vincolo, non uno
   stile, e una riga nuova per squadra costerebbe una squadra fuori schermo. */
tr.punti td { background:var(--campo-bg); text-align:center; font-size:13px;
              font-variant-numeric:tabular-nums; }
tr.punti td.band { z-index:3; background:var(--campo-bg); color:var(--dim); letter-spacing:.4px; }
/* I quattro scaglioni. Il colore non decora: e' l'unica cosa che rende
   leggibile un numero su una scala che nessuno ha in testa — 69,5 non dice
   niente finche' non si vede che e' verde chiaro e non giallo. */
:root { --s1:#e5615e; --s2:#f2d13c; --s3:#6fca7f; --s4:#35d17a; }
.qz.s1{color:var(--s1)} .qz.s2{color:var(--s2)}
.qz.s3{color:var(--s3)} .qz.s4{color:var(--s4)}
.qbar i.s1{background:var(--s1)} .qbar i.s2{background:var(--s2)}
.qbar i.s3{background:var(--s3)} .qbar i.s4{background:var(--s4)}
.lg_pal.s1{background:var(--s1)} .lg_pal.s2{background:var(--s2)}
.lg_pal.s3{background:var(--s3)} .lg_pal.s4{background:var(--s4)}

.qv { display:inline-flex; align-items:center; gap:6px; cursor:pointer; flex:none; }
.qz { font-variant-numeric:tabular-nums; font-weight:700; font-size:13px; }
/* La banda: fondo scala tre punti sotto la media di lega, fine sulla soglia che
   vince. Stretta e lunga, perche' quello che conta e' *dove* finisce, non
   quanta ne e' piena. */
.qbar { width:52px; height:6px; border-radius:3px; background:#0a1a24;
        border:1px solid var(--line); overflow:hidden; flex:none; }
.qbar i { display:block; height:100%; border-radius:3px; transition:width .25s; }
tr.punti .qbar { width:64px; }
/* Nel riquadro compatto la scheda intera e' un bersaglio — porta al listone con
   quella squadra selezionata — e la mano ci sta bene. Nella riga PUNTI del
   tabellone non si clicca niente: li' il cursore deve promettere solo la
   spiegazione che si apre al passaggio. */
tr.punti .qv { cursor:help; }
/* Nel pannello stretto la banda cede spazio al nome: un nome tagliato a meta'
   costa piu' di dodici pixel di barra. */
.mini .qbar { width:34px; }
.mini .qv { gap:5px; }
/* All'ultimo gradino di densita' il tabellone deve starci tutto: la banda e' la
   prima cosa che cede, perche' il numero da solo dice gia' quasi tutto. */
.side.d3 .qbar { display:none; }

/* Quanto ti costa questo rilancio, dentro il pannello Comprato. Riga sua e non
   una parola dentro al riepilogo dei crediti: e' l'unica cosa in quel pannello
   che cambia mentre digiti, e deve vedersi che sta rispondendo. */
.bbd { min-height:26px; margin-top:9px; display:flex; align-items:center; gap:7px;
       font-size:12.5px; flex-wrap:wrap; }
.bbd b { font-size:14px; }
.bbd > span { color:var(--dim); }
.bbd .ico { width:16px; height:16px; stroke-width:1.8; }
.bbd.su b, .bbd.su .ico { color:var(--good-text); }
.bbd.giu b, .bbd.giu .ico { color:var(--bad-text); }
.bbd.pari b, .bbd.pari .ico { color:var(--dim); }
/* Il "?" qui serve anche su schermo largo: e' un numero nuovo, e il pannello
   non ha un titolo di colonna su cui passare il cursore. */
.bbd .chiedi { display:inline-flex; }

/* ---- la scala dei prezzi ----
   Tre zone in una barra sola e non tre numeri in fila: la domanda di chi
   rilancia e' "quanto manca al limite", ed e' una distanza, non un elenco. Il
   pallino della cifra digitata ci si muove sopra senza chiamare il server.

   I colori sono gli stessi del verdetto qui sopra — verde puoi spingere, grigio
   sei nel punto giusto, rosso stai offrendo troppo — perche' sono la stessa
   cosa detta in due modi, e due tavolozze per un giudizio solo si leggono come
   due giudizi. */
.bbscala:not(:empty) { margin-top:10px; }
.bbscala .titolo { font-size:10.5px; text-transform:uppercase; letter-spacing:.7px;
                   color:var(--dim); margin-bottom:6px;
                   display:flex; align-items:center; gap:5px; }
.bbscala .titolo .chiedi { display:inline-flex; }
.bbscala .barra { position:relative; display:flex; height:8px; border-radius:999px;
                  overflow:visible; background:var(--line); }
.bbscala .zona { height:8px; }
.bbscala .zona:first-child { border-radius:999px 0 0 999px; }
.bbscala .zona:last-of-type { border-radius:0 999px 999px 0; }
.bbscala .zona.buona  { background:var(--good); }
.bbscala .zona.giusta { background:#2f5f78; }
.bbscala .zona.cara   { background:var(--bad); }
/* Il pallino deve restare leggibile sopra tutte e tre le zone, quindi ha un
   anello del colore del pannello invece di un colore suo: e' una posizione,
   non una quarta categoria. */
.bbscala .qui { position:absolute; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px;
                border-radius:50%; background:var(--ink); border:2px solid var(--panel);
                box-shadow:0 0 0 1px var(--ink); transition:left .12s ease; }
.bbscala .tacche { display:flex; justify-content:space-between; gap:8px;
                   margin-top:6px; font-size:11px; color:var(--dim); }
.bbscala .tacche b { font-weight:600; font-variant-numeric:tabular-nums; }
.bbscala .tacche .buona b  { color:var(--good-text); }
.bbscala .tacche .giusta b { color:var(--ink); }
.bbscala .tacche .cara     { color:var(--bad-text); }

/* ---- e se lo lascio andare? ----
   Le alternative attaccate sotto al verdetto, con una riga di stacco e non un
   riquadro: sono la seconda meta' della stessa frase, e incorniciarle le
   farebbe leggere come un secondo argomento.

   Ogni voce e' un bottone e non un link, perche' il gesto e' "aprimi la sua
   scheda" e non "portami altrove": la riga si allarga a tutta la larghezza
   cosi' i tre nomi si scorrono in colonna, che a un metro dal tavolo si legge
   piu' in fretta di tre pastiglie in fila da inseguire con gli occhi. */
.bbalt:not(:empty) { margin-top:11px; padding-top:10px;
                     border-top:1px solid var(--line); font-size:12.5px; }
.bbalt .titolo { font-size:10.5px; text-transform:uppercase; letter-spacing:.7px;
                 color:var(--dim); margin-bottom:7px;
                 display:flex; align-items:center; gap:5px; }
.bbalt .titolo .chiedi { display:inline-flex; }
.bbalt .alts { display:flex; flex-direction:column; gap:4px; }
.bbalt .alt { display:flex; align-items:baseline; gap:8px; width:100%;
              padding:5px 8px; border:1px solid var(--line); border-radius:7px;
              background:var(--campo-bg); color:var(--ink); cursor:pointer;
              font-size:12.5px; text-align:left; font-variant-numeric:tabular-nums; }
.bbalt .alt:hover { background:var(--hover); border-color:var(--acc); }
.bbalt .alt b { font-weight:600; }
/* Il nome puo' essere lungo e il club corto: e' il nome che deve cedere. */
.bbalt .alt > .mut { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
                     white-space:nowrap; font-size:11.5px; }
.bbalt .alt i { font-style:normal; font-weight:600; }
.bbalt .alt small { color:var(--dim); font-size:11px; flex:none; }
.bbalt .alt small.up { color:var(--good-text); }
/* .down non serve alle alternative (li' il peggio resta muto, vedi la nota
   su mostraAlternative) ma serve al confronto di reparto: li' "qualcuno gli
   sta davanti" e' una notizia scomoda quanto ne "gli sta dietro" e' buona,
   e le due meritano lo stesso peso — non solo la buona. */
.bbalt .alt small.down { color:var(--bad-text); }
.bbalt .linkish { display:inline-block; margin-top:7px; padding:0; border:none;
                  background:none; color:var(--acc); cursor:pointer;
                  font-size:11.5px; text-decoration:underline; }
.bbalt .linkish:hover { color:var(--ink); }

/* Quali colonne tenere accese. */
.cl_gruppo { margin-bottom:14px; }
.cl_gruppo h4 { font-size:11px; letter-spacing:.5px; text-transform:uppercase;
                color:var(--dim); margin:0 0 6px; }
/* `input{width:100%}` e `label{display:block}` sono le regole generali del
   modulo di regolamento: qui vanno disfatte a mano, o la casella si allarga a
   tutta riga e spinge il testo a destra. */
.cl_voce { display:flex; align-items:center; gap:9px; padding:6px 8px;
           border-radius:6px; cursor:pointer; margin:0; color:var(--ink);
           font-size:13px; text-align:left; }
.cl_voce input[type=checkbox] { width:auto; flex:none; margin:0; accent-color:var(--acc); }
.cl_voce > span { flex:1; min-width:0; }
.cl_voce:hover { background:#12354a; }
.cl_voce.fisso { opacity:.5; cursor:default; }
.cl_voce b { font-weight:600; font-size:13px; }
.cl_voce i { color:var(--dim); font-style:normal; font-size:11.5px; }
.cl_tutte { display:flex; align-items:center; gap:10px; padding-top:12px;
            border-top:1px solid var(--line); }

/* La legenda del punteggio, sotto il tabellone delle Fantasquadre. E' scritta
   nella pagina e non in un pannello che si apre: le squadre si confrontano
   guardando quella tabella, e la scala va letta senza staccare gli occhi. */
.lgp { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.lgp h3 { font-size:13px; margin:0 0 6px; }
.lgp_dove { font-size:14px !important; color:var(--ink) !important; margin:0 0 12px !important; }
.lgp_dove b { color:var(--acc); }
.lgp_dove .mut { display:block; font-size:12.5px; margin-top:2px; }
.lgp p { margin:0 0 10px; font-size:12.5px; color:var(--dim); max-width:70ch; }
.lgp_scala { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.lgp_voce { display:flex; align-items:center; gap:7px; padding:5px 10px 5px 6px;
            border:1px solid transparent; border-radius:7px; background:#0a1a24; }
.lgp_voce.qui { border-color:var(--acc); background:#12354a; }
/* #0a1a24/#12354a sono pensati per un fondo scuro: il testo (che eredita il
   colore della pagina) diventava scuro su scuro in chiaro — quasi invisibile,
   non solo poco leggibile. */
body[data-tema="chiaro"] .lgp_voce { background:var(--campo-bg); }
body[data-tema="chiaro"] .lgp_voce.qui { background:var(--hover-2); }
.lgp_pal { width:5px; height:16px; border-radius:3px; flex:none; }
.lgp_voce b { font-size:12.5px; font-weight:600; }
.lgp_da { color:var(--dim); font-size:11.5px; font-variant-numeric:tabular-nums; }
.lgp_note { margin:0; }
.lgp_note a { color:var(--acc); }

/* Giocatori oltre gli slot del regolamento: non dovrebbero piu' entrare, ma le
   aste fatte prima del controllo ne contengono, e vanno viste per correggerle. */
td.filled.oltre { background:#2a1516; box-shadow:inset 2px 0 0 var(--bad); }
td.filled.oltre:hover { background:#3a1c1c; }
/* Velatura del reparto: --f la calcola renderGriglia() riga per riga, forte in
   cima e sfumata in fondo. Specificita' bassa apposta, cosi' hover, casella
   fuori regolamento, reparto chiuso e colonna bersaglio continuano a vincere. */
tr.r-p td { background-color:rgb(var(--rgb-p) / var(--f, .04)); }
tr.r-d td { background-color:rgb(var(--rgb-d) / var(--f, .04)); }
tr.r-c td { background-color:rgb(var(--rgb-c) / var(--f, .04)); }
tr.r-a td { background-color:rgb(var(--rgb-a) / var(--f, .04)); }

/* Intestazione di colonna: si trascina per spostare la squadra, si clicca sul
   nome per rinominarla. La presa a puntini e' l'unico invito visibile che il
   trascinamento esiste — senza, nessuno lo scopre. */
.hteam { display:flex; align-items:center; gap:5px; justify-content:center; }
/* Il nome della fantasquadra e' quello che si cerca prima di ogni rilancio,
   con la coda dell'occhio, fra venti colonne: 11px come il resto della
   testata lo faceva sparire nel grigio. Piu' grande e piu' pieno, non solo
   piu' chiaro — e' l'unica cella della tabella che risponde a "di chi è
   questa colonna". */
.hteam .nm { cursor:text; padding:2px 5px; border-radius:4px;
             font-size:13.5px; font-weight:700; color:var(--ink);
             min-width:0; overflow:hidden; text-overflow:ellipsis; }
.hteam .nm:hover { background:var(--line); }
.hteam .presa { display:flex; align-items:center; flex:none; color:#3d6c85; }
.hteam .presa svg { width:11px; height:13px; fill:currentColor; }
table.grid2 th[data-col-team] { cursor:grab; }
table.grid2 th[data-col-team]:hover .presa { color:var(--acc); }
table.grid2 th.colDrag { opacity:.4; cursor:grabbing; }
/* Il lato su cui la colonna verrebbe rilasciata. Sul tabellone la testa e'
   appiccicata e ha uno sfondo pieno: serve un segno netto, non una sfumatura. */
table.grid2 th.dropL { box-shadow:inset 3px 0 0 var(--acc); }
table.grid2 th.dropR { box-shadow:inset -3px 0 0 var(--acc); }
/* Squadra appena aperta dal tabellone compatto: un lampo, non uno stato.
   Serve a ritrovarla fra venti colonne nell'istante in cui si arriva. */
table.grid2 th.colSel { box-shadow:inset 0 0 0 2px var(--acc); animation:lampo 2.2s ease-out; }
@keyframes lampo { 0%,55% { background:var(--hover-2); } 100% { background:var(--panel); } }
/* La stessa evidenziazione sulle celle del corpo: arrivando dal riepilogo
   compatto la domanda e' "dov'e' la sua colonna", non "come si chiama" — il
   solo nome in testa si perde scorrendo. */
table.grid2 td.colSel { animation:lampoCella 2.2s ease-out; }
@keyframes lampoCella {
  0%, 100% { box-shadow:none; }
  40% { box-shadow:inset 0 0 0 999px rgba(122,184,245,.22); }
}

input.rn { width:100%; min-width:90px; font-size:11px; padding:2px 4px; text-align:center; }

.slot { display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:12px; }
/* La sigla e la bandierina del club vero, non della fantasquadra (quella e'
   gia' la colonna): a colpo d'occhio dice se questo slot lo si puo' ancora
   toccare senza sballare il calendario di un altro giocatore della stessa
   squadra vera. Piccola e a larghezza fissa, cosi' non ruba spazio al nome
   quando serve troncarlo. */
.slot-club { flex:none; font-size:10px; color:var(--dim); }
.slot-club .bandiera { width:9px; height:9px; }
.slot .n { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.slot .pz { flex:none; color:var(--dim); font-variant-numeric:tabular-nums; }
.slot.vuoto { color:#31596e; }
body[data-tema="chiaro"] .slot.vuoto { color:var(--dim); }
td.filled { cursor:grab; }
td.filled:hover { background:var(--hover); }
td.filled.drag { opacity:.4; cursor:grabbing; }

/* La colonna sotto il puntatore mentre si trascina: il bersaglio e' la squadra,
   non la casella, perche' il reparto lo decide il ruolo del giocatore. */
#t_griglia td.target { background:#153b50; box-shadow:inset 0 0 0 1px var(--acc); }
body[data-tema="chiaro"] #t_griglia td.target { background:#dbe9f7; }

/* Caselle vuote: cliccabili per chiudere il reparto. */
td.vuota { cursor:pointer; }
td.vuota:hover { background:#123044; }
td.vuota.chiusa { background:#0a1d28; }
body[data-tema="chiaro"] td.vuota:hover { background:var(--hover); }
body[data-tema="chiaro"] td.vuota.chiusa { background:var(--panel-2); }
td.vuota.chiusa .slot.vuoto { color:var(--dim); font-size:11px; letter-spacing:.5px;
                              text-transform:uppercase; }

/* Crediti dichiarati a mano: la rettifica resta scritta accanto al totale. */
tr.credits td.cr { cursor:pointer; }
tr.credits td.cr:hover { background:#123044; }
body[data-tema="chiaro"] tr.credits td.cr:hover { background:var(--hover); }
.rett { color:var(--warn-text); font-size:11px; margin-left:5px;
        font-variant-numeric:tabular-nums; }

/* ---------------------------------------------------------------------------
   FILTRI: cursori invece di caselle da riempire.
   Scrivere quindici coppie di numeri a mano era il modo piu' lento di dire
   "voglio i difensori sopra il 70% di titolarita'". Il cursore parte gia' sui
   valori reali della colonna, quindi non si puo' nemmeno sbagliare intervallo.
--------------------------------------------------------------------------- */
.fbar { border-top:1px solid var(--line); margin-top:12px; padding-top:14px; }
.fgrid { display:grid; gap:16px 22px; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); }
.segni-tit { font-size:11.5px; color:var(--dim); margin:16px 0 9px; }
.frow .cap { display:flex; justify-content:space-between; align-items:center;
             font-size:11.5px; color:var(--dim); margin-bottom:9px; }
.frow .cap b { color:#c2d3dd; font-weight:600; text-transform:uppercase;
               letter-spacing:.3px; font-size:10.5px; }
body[data-tema="chiaro"] .frow .cap b { color:var(--ink); }
/* I due estremi si digitano. Le caselle stanno dove prima c'era il riepilogo
   in sola lettura: stesso posto, stessa dimensione, ma ci si puo' scrivere —
   e quando si sa gia' che si vuole "titolarita' da 60 in su", scriverlo e' un
   gesto solo invece di una mira col pollice. */
.frow .cap .box { display:inline-flex; align-items:center; gap:3px;
                  color:var(--acc); font-variant-numeric:tabular-nums; }
.frow .cap .box.off { color:var(--dim); }
.frow .cap .box i { font-style:normal; opacity:.6; }
.frow .cap .box u { text-decoration:none; opacity:.7; margin-left:1px; }
.frow .num { width:52px; padding:3px 5px; text-align:right; font:inherit;
             font-size:11.5px; color:inherit; background:var(--campo-bg);
             border:1px solid var(--line); border-radius:5px;
             font-variant-numeric:tabular-nums; }
.frow .num:focus { outline:none; border-color:var(--acc); color:var(--acc); }
@media (max-width: 820px) { .frow .num { width:58px; font-size:13px; padding:5px 6px; } }

/* La barra intera e' il bersaglio, non il pallino: il gesto lo governa questo
   contenitore (vedi il pointerdown in app.js), quindi gli serve altezza vera da
   colpire e touch-action:none perche' il dito non scrolli invece di trascinare. */
.dual { position:relative; height:26px; cursor:pointer; touch-action:none; }
.dual .track { position:absolute; top:10px; left:0; right:0; height:6px;
               background:var(--line); border-radius:3px; }
.dual .fill { position:absolute; top:10px; height:6px; background:var(--acc);
              border-radius:3px; }
.dual:hover .track { background:#2a5468; }
.dual.preso .fill { background:#a9d4ff; }
/* touch-action:none e' quello che conta davvero su telefono: senza, il primo
   centimetro di trascinamento verso destra da un pallino vicino al minimo lo
   legge anche il gesto di sistema "torna indietro" di Safari, che parte dal
   bordo sinistro dello schermo — e vince lui, perche' e' piu' vecchio del
   tocco sulla pagina. Va sull'elemento che il tocco colpisce davvero: qui e'
   l'input, non lo pseudo-elemento del pallino, che per il touch-action conta
   come parte dello stesso elemento. */
.dual input[type=range] { position:absolute; top:0; left:0; width:100%; height:20px;
                          margin:0; padding:0; background:none; border:none;
                          -webkit-appearance:none; appearance:none;
                          pointer-events:none; touch-action:none; }
.dual input[type=range]:focus { outline:none; }
/* I pallini non ricevono piu' eventi: sono disegno. Se ne prendessero, un clic
   sul pallino verrebbe gestito due volte — dal range nativo e dal contenitore —
   e il cursore scatterebbe di due passi invece di uno. */
.dual input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none;
    width:16px; height:16px; border-radius:50%; background:#e7ebf2;
    border:2px solid #081620; box-shadow:0 1px 4px rgba(0,0,0,.6);
    pointer-events:none; }
.dual.preso input[type=range]::-webkit-slider-thumb { background:var(--acc); }
.dual input[type=range]::-moz-range-thumb { width:16px; height:16px; border-radius:50%;
    background:#e7ebf2; border:2px solid #081620; pointer-events:none; }
.dual input[type=range]::-moz-range-track { background:none; border:none; }

@media (max-width:900px) {
  /* Il bersaglio vero non e' il pallino disegnato (14px, giusto per un mouse):
     e' l'area che il dito deve colpire. Sotto i 900px cresce a 30px — sopra
     il minimo dei 44pt delle linee guida Apple non si va senza sforare la
     riga sopra o sotto, ma e' un salto vero rispetto a prima. */
  .dual { height:34px; }
  .dual .track, .dual .fill { top:14px; }
  .dual input[type=range] { height:34px; }
  .dual input[type=range]::-webkit-slider-thumb { width:26px; height:26px; }
  .dual input[type=range]::-moz-range-thumb { width:26px; height:26px; }
}

/* Suggeritore sotto il campo di ricerca. */
.sugg { position:absolute; z-index:30; left:0; right:0; top:100%; margin-top:4px;
        background:var(--panel); border:1px solid var(--line); border-radius:8px;
        overflow:hidden; box-shadow:0 12px 28px rgba(0,0,0,.5); }
.sugg:empty { display:none; }
.sugg .riga { display:flex; align-items:center; gap:8px; padding:6px 9px;
              cursor:pointer; font-size:13px; border-bottom:1px solid var(--line); }
.sugg .riga:last-child { border-bottom:none; }
.sugg .riga:hover { background:var(--hover); }
.sugg .nm { font-weight:600; }
.sugg .mut { font-size:11.5px; margin-left:auto; }
.sugg .riga button { background:none; border:1px solid var(--line); color:var(--dim);
                     border-radius:5px; padding:2px 8px; font-size:11px; cursor:pointer; }
.sugg .riga button:hover { border-color:var(--acc); color:var(--ink); }

.chip.simili { background:#1c2a1d; border-color:#2f5a36; color:#9ee0a8; }
.chip.simili button { color:#9ee0a8; }
body[data-tema="chiaro"] .chip.simili,
body[data-tema="chiaro"] .chip.simili button { background:#e9f7ee; border-color:#bfe6cc; color:#1c6b34; }

.chips { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.chip { background:#12293a; border:1px solid #1d4260; color:#9ccdf0; border-radius:20px;
        padding:2px 9px; font-size:11.5px; display:inline-flex; align-items:center; gap:6px; }
.chip button { background:none; border:none; color:#9ccdf0; cursor:pointer;
               font-size:14px; line-height:1; padding:0; }
body[data-tema="chiaro"] .chip,
body[data-tema="chiaro"] .chip button { color:#1c4a7a; }
body[data-tema="chiaro"] .chip { background:#e8f1fc; border-color:#c7dff5; }

/* ---------------------------------------------------------------------------
   CONFRONTA GIOCATORI
   `--colc` e' il colore assegnato alla posizione del giocatore in
   COMPARE_IDS: lo stesso valore inline colora la chip, il pallino sulla
   barra e l'intestazione di colonna in tabella, cosi' si segue un giocatore
   con l'occhio senza leggere un'etichetta ogni volta.
--------------------------------------------------------------------------- */
/* I ritratti sopra le chip: stesso bordo colorato della chip qui sotto, ma
   grande abbastanza da riconoscere la faccia, non solo l'iniziale del
   ruolo. */
.cf-foto-riga { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.cf-foto-cella { display:block; border-radius:16px; padding:3px;
                 border:2px solid var(--colc); flex:none; }
.cf-foto-cella .santino { width:84px; height:84px; border-radius:13px; display:block; }
@media (max-width:640px) { .cf-foto-cella .santino { width:64px; height:64px; } }
.chip.confronto { border-color:var(--colc); color:var(--ink); padding-left:4px; }
.cf-avatar { display:inline-flex; align-items:center; justify-content:center;
             width:18px; height:18px; border-radius:50%; background:var(--colc);
             color:#05121a; font-size:9.5px; font-weight:700; flex:none; }
.chip.cf-add { background:none; border:1px dashed var(--line); color:var(--dim);
               cursor:pointer; font-weight:600; }
.chip.cf-add:hover { border-color:var(--acc); color:var(--ink); }

.cf-categoria { margin-bottom:12px; }
.cf-cat-tit { font-size:11px; text-transform:uppercase; letter-spacing:.5px;
              color:var(--dim); margin-bottom:6px; }

/* La barra del confronto: una riga per criterio, un pallino per giocatore, e
   agli estremi i due numeri che tarano la riga — il minimo e il massimo dei
   giocatori a confronto. Stanno in due colonne di larghezza fissa, cosi' le
   barre restano incolonnate fra loro anche se un criterio ha numeri lunghi e
   un altro corti. Le tacche a 25/50/75 sono solo un riferimento visivo e non
   hanno un tip: a quel dettaglio la spiegazione e' gia' nel titolo del
   pallino. */
.cf-estremo { width:50px; flex:none; font-size:10.5px; color:var(--dim);
              font-variant-numeric:tabular-nums; }
.cf-estremo.min { text-align:right; }
.cf-estremo.max { text-align:left; }
.cf-vuoto { flex:1; font-size:11px; color:var(--dim); font-style:italic; }

.cf-row { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.cf-row-lab { width:120px; flex:none; font-size:12px; color:var(--ink); text-align:right; }
.cf-row-lab small { display:block; color:var(--dim); font-size:10px; font-weight:400; }
.cf-track { position:relative; flex:1; height:6px; background:var(--line);
            border-radius:3px; }
.cf-tick { position:absolute; top:-2px; width:1px; height:10px; background:var(--line); }
.cf-dot { position:absolute; top:50%; width:12px; height:12px; border-radius:50%;
          background:var(--colc); border:2px solid var(--panel);
          transform:translate(-50%,-50%); cursor:help; box-shadow:0 1px 3px rgba(0,0,0,.5); }

/* Il migliore e il peggiore del confronto su ogni riga dei valori grezzi. Il
   colore prende solo il numero: il rango accanto resta smorzato, perche' il
   verde dice "il migliore di questi", non "primo del ruolo", e le due cose non
   vanno confuse. La velatura di fondo serve a farli trovare scorrendo la
   tabella con la coda dell'occhio, senza doverla leggere riga per riga. */
td.cf-meglio { color:var(--good-text); background:rgba(126,231,135,.09); }
td.cf-peggio { color:var(--bad-text);  background:rgba(229,97,94,.09); }

/* La tendina dei valori grezzi. Ha la riga di titolo delle altre sezioni del
   foglio, ma e' un bottone: la tabella e' un cassetto che si apre quando si
   vuole il numero preciso, non una parte fissa della lettura. */
.cf-tendina { display:flex; align-items:center; gap:7px; margin:22px 0 10px;
              background:none; border:0; padding:0; cursor:pointer;
              font:inherit; font-size:12px; font-weight:600; text-transform:uppercase;
              letter-spacing:.8px; color:var(--dim); }
.cf-tendina:hover { color:var(--ink); }
.cf-frec { width:12px; height:12px; transition:transform .15s; }
.cf-tendina.on .cf-frec { transform:rotate(90deg); }

@media (max-width:900px) {
  .cf-row { gap:8px; }
  .cf-row-lab { width:84px; font-size:11px; }
  .cf-estremo { width:40px; font-size:10px; }
}

/* ---------------------------------------------------------------------------
   LEGA: la creazione guidata e l'area personale.
--------------------------------------------------------------------------- */
.steps { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.step { flex:1; min-width:150px; background:var(--campo-bg); border:1px solid var(--line);
        border-radius:8px; padding:9px 12px; font-size:12px; color:var(--dim); }
.step b { display:block; color:var(--ink); font-size:12.5px; margin-bottom:2px; }
.step.on { border-color:var(--acc); }
.hero { text-align:left; }
.hero .big { font-size:19px; font-weight:600; margin-bottom:6px; }
.bigbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap;
          background:var(--panel); border:1px solid var(--line); border-radius:10px;
          padding:14px 18px; margin-bottom:16px; }
.bigbar .spacer { flex:1; }
button.go { background:var(--good); border:none; color:#04180e; font-weight:700;
            padding:11px 22px; border-radius:7px; cursor:pointer; font-size:15px; }
button.go:disabled { opacity:.4; cursor:not-allowed; }
.narrow { max-width:560px; }
.danger-zone { border-color:#4a2626; }
.danger-zone h2 { color:#f0a3a1; }


/* ---------------------------------------------------------------------------
   PIEDE DI PAGINA
   Sta fuori dal <main> perche' non appartiene a nessuna vista: e' l'unica
   cosa della pagina che parla di chi l'ha fatta e non di fantacalcio.
--------------------------------------------------------------------------- */
/* Fondo verde fluo e tutto il resto nel blu del marchio: e' l'unico punto della
   pagina che esce dal tema scuro, ed e' giusto che sia questo — non e' parte
   dello strumento, e' la firma di chi l'ha fatto. */
.piede { background:var(--verde); color:var(--marchio);
         padding:24px 20px 26px; margin-top:40px; }
/* Era un <img>: un SVG blu petrolio fisso, invisibile appena il piede si e'
   invertito in chiaro (blu su blu). Un <div> con il logo come maschera e il
   colore vero come background-color risolve la stessa cosa in scuro e in
   chiaro senza un secondo file: la forma resta quella del file originale
   (fill:#113347 al suo interno, irrilevante ora — la maschera guarda solo
   la sagoma), il colore lo decide questa regola. */
.piede .lockup { height:34px; width:auto; aspect-ratio:313.4/117.35; display:block;
                 background-color:var(--marchio);
                 -webkit-mask:url('/loghi-insieme.svg') no-repeat center / contain;
                 mask:url('/loghi-insieme.svg') no-repeat center / contain; }
body[data-tema="chiaro"] .piede .lockup { background-color:var(--verde); }
.piede .riga { max-width:1900px; margin:0 auto; display:flex; flex-wrap:wrap;
               align-items:flex-start; gap:26px; }
.piede .marchio.grande { width:38px; height:38px; opacity:.9; }
.piede .chi { display:flex; flex-direction:column; gap:2px; }
.piede .chi b { font-size:13.5px; color:var(--marchio); }
.piede .chi span { font-size:11.5px; color:#2c5468; }
.piede .dati { display:flex; flex-direction:column; gap:2px; font-size:11.5px;
               color:#2c5468; }
.piede .dati a { color:var(--marchio); text-decoration:none; }
.piede .dati a:hover { text-decoration:underline; }
.piede .copy { max-width:1900px; margin:18px auto 0; font-size:11px;
               color:#2c5468; letter-spacing:.3px;
               border-top:1px solid rgba(17,51,71,.22); padding-top:12px; }

/* Il piede si legge al contrario in chiaro: blu petrolio pieno, verde sopra
   — la stessa coppia dei bottoni qui sopra, non un colore in piu' da
   spiegare. Il grigio-blu spento per la sottotitolazione (#2c5468, pensato
   per stare su un fondo verde) diventa un verde smorzato, pensato per stare
   sul blu. */
body[data-tema="chiaro"] .piede { background:var(--marchio); color:var(--verde); }
body[data-tema="chiaro"] .piede .chi b { color:var(--verde); }
body[data-tema="chiaro"] .piede .chi span,
body[data-tema="chiaro"] .piede .dati,
body[data-tema="chiaro"] .piede .copy { color:#9fd9ac; }
body[data-tema="chiaro"] .piede .dati a { color:var(--verde); }
body[data-tema="chiaro"] .piede .copy { border-top-color:rgba(126,231,135,.28); }
body[data-tema="chiaro"] .piede .copy a { color:var(--verde); border-bottom-color:rgba(126,231,135,.4); }
body[data-tema="chiaro"] .piede .copy a:hover { border-bottom-color:var(--verde); }

@media (max-width:800px) {
  .piede .riga { gap:16px; }
}

/* ---------------------------------------------------------------------------
   TELEFONO
   Non e' il listone stretto: e' un'altra interfaccia sugli stessi dati.
   Diciassette colonne su 390 pixel non diventano leggibili abbassando il corpo
   del carattere — diventano una riga che si legge di sbieco e si tocca male.

   Qui sotto stanno prima i pezzi che esistono solo sul telefono (nascosti sul
   largo, cosi' non c'e' un secondo blocco da tenere d'accordo col primo) e poi
   il salto vero e proprio.
--------------------------------------------------------------------------- */
.solomob { display:none; }
.burger { display:none; background:none; border:1px solid var(--line); color:var(--ink);
          border-radius:8px; width:38px; height:34px; align-items:center;
          justify-content:center; cursor:pointer; flex:none; }
.burger svg { width:19px; height:14px; fill:none; stroke:currentColor;
              stroke-width:1.8; stroke-linecap:round; }
h1 .nome-lega, h1 .caret { display:none; }
h1 .caret { width:13px; height:13px; fill:none; stroke:currentColor;
            stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
            opacity:.7; margin-left:-4px; }
.sottotitolo-mob { display:none; }
.indietro { display:none; background:none; border:1px solid var(--line); color:var(--dim);
            border-radius:7px; width:32px; height:32px; align-items:center;
            justify-content:center; flex:none; cursor:pointer; }
.indietro:hover { color:var(--ink); border-color:var(--acc); }

/* ---- tendine dell'intestazione ----
   Un velo a tutto schermo sotto la barra, cosi' il tocco fuori chiude. Le voci
   sono allineate a destra: il pollice arriva li', e la tendina del panino apre
   proprio da quel lato. */
.tenda { position:fixed; inset:var(--headh) 0 0 0; z-index:44; display:none; }
.tenda.on { display:block; }
.tenda .voci { position:absolute; top:6px; left:14px; min-width:186px;
               background:var(--panel); border:1px solid var(--line); border-radius:10px;
               box-shadow:0 18px 46px rgba(0,0,0,.6); padding:5px;
               display:flex; flex-direction:column; }
.tenda.destra .voci { left:auto; right:14px; }
.tenda .voci button { background:none; border:none; color:var(--ink); text-align:right;
                      font-size:15px; padding:11px 14px; border-radius:8px; cursor:pointer; }
.tenda .voci button:active { background:var(--hover); }
.tenda .voci button.uscita { color:var(--dim); border-top:1px solid var(--line);
                             border-radius:0 0 8px 8px; margin-top:4px; }
/* La testa della tendina dice di chi e' il menu: il nome della lega su una,
   il tuo sull'altra. Non e' un titolo decorativo — e' l'unico posto dove il
   nome per esteso compare quando la pastiglia in alto lo taglia. */
.tenda .voci .capo { padding:9px 14px 10px; border-bottom:1px solid var(--line);
                     margin:-5px -5px 5px; display:flex; flex-direction:column;
                     gap:1px; line-height:1.3; }
.tenda .voci .capo b { font-size:13.5px; color:var(--dim); font-weight:600;
                       overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tenda .voci .capo span { font-size:12px; color:var(--dim); opacity:.75; }
/* Sotto il nome della lega le voci si leggono da sinistra, come il nome:
   quella e' una tendina che scende da un'etichetta, non dal bordo. */
.tenda:not(.destra) .voci button, .tenda:not(.destra) .voci .capo { text-align:left; }
.tenda.destra .voci .capo { text-align:right; align-items:flex-end; }

/* Sul largo le stesse due tendine servono il mouse: voci piu' compatte, e la
   tendina della lega si apre sotto la sua pastiglia invece che sotto il
   marchio. Le voci sono le stesse — cambiarne una qui sarebbe il modo di far
   divergere i due formati, che e' esattamente quello che non deve succedere. */
@media (min-width:901px) {
  .tenda .voci { min-width:200px; padding:5px; }
  .tenda:not(.destra) .voci { left:52px; }
  .tenda .voci button { font-size:14px; padding:9px 14px; }
  .tenda .voci button:hover { background:var(--hover); }
}

/* ---- fogli: "Filtra" a schermo pieno, "Ordina" dal basso ----
   Due gesti diversi perche' sono due cose diverse: i filtri si compongono e si
   guardano insieme, l'ordinamento e' una scelta sola e poi si torna alla lista. */
.foglio { position:fixed; inset:0; z-index:60; background:rgba(5,7,11,.72);
          display:none; align-items:flex-end; justify-content:center; }
.foglio.on { display:flex; }
.foglio .telaio { background:var(--panel); width:100%; max-width:560px;
                  border-radius:14px 14px 0 0; max-height:86vh;
                  display:flex; flex-direction:column; min-height:0; }
.foglio.pieno { align-items:stretch; }
.foglio.pieno .telaio { border-radius:0; max-height:none; max-width:none; }
/* "Moduli extra" non e' un foglio che risale dal basso come i filtri del
   telefono — e' un popup vero, e vive al centro dello schermo come ci si
   aspetta da un dialogo, non ancorato in basso. */
#modulibox { align-items:center; padding:20px; }
#modulibox .telaio { border-radius:14px; max-height:80vh; }
.foglio header { position:static; background:none; border-bottom:1px solid var(--line);
                 display:flex; align-items:center; justify-content:space-between;
                 gap:12px; padding:12px 14px; flex-wrap:nowrap; }
.foglio header b { font-size:15px; }
.foglio .corpo { overflow:auto; -webkit-overflow-scrolling:touch; padding:14px 16px 22px;
                 flex:1; min-height:0; }
.foglio .corpo.elenco { padding:0; }
.foglio footer { display:flex; align-items:center; gap:12px; padding:11px 14px 16px;
                 border-top:1px solid var(--line); }
.foglio footer .grow { flex:1; padding:12px 16px; font-size:15px; border-radius:9px; }
.foglio h3 { font-size:11.5px; text-transform:uppercase; letter-spacing:.8px;
             color:var(--dim); margin:22px 0 10px; font-weight:600; }
.foglio h3:first-child { margin-top:0; }
.foglio .hint { margin:-4px 0 10px; }
button.testo { background:none; border:none; color:var(--acc); font-size:15px;
               padding:4px 2px; cursor:pointer; }
button.testo.rosso { color:var(--bad-text); }

.elenco .voce { display:flex; width:100%; align-items:center; justify-content:space-between;
                gap:10px; background:none; border:none; text-align:left; cursor:pointer;
                border-bottom:1px solid var(--line); color:var(--ink);
                font-size:15px; padding:15px 16px; }
.elenco .voce:active { background:var(--hover); }
.elenco .voce.on { color:var(--acc); }
.elenco .voce em { color:var(--dim); font-style:normal; font-size:11.5px; }
.elenco .voce .spunta { width:16px; height:16px; opacity:0; color:var(--acc); }
.elenco .voce.on .spunta { opacity:1; }

.pastiglie { display:flex; flex-wrap:wrap; gap:8px; }
.pastiglia { background:var(--campo-bg); border:1px solid transparent; color:var(--dim);
             border-radius:20px; padding:8px 15px; font-size:13.5px; cursor:pointer; }
.pastiglia:hover { border-color:var(--acc); }
.pastiglia.on { border-color:transparent; color:var(--ink); background:var(--hover); }
.pastiglia.on:hover { border-color:var(--acc); }
.pastiglia.ruolo { width:42px; height:42px; border-radius:50%; padding:0;
                   font-weight:700; font-size:14px; }
.pastiglia.ruolo.on { color:#05121a; border-color:transparent; }
.pastiglia.ruolo.p.on{background:var(--p)} .pastiglia.ruolo.d.on{background:var(--d)}
.pastiglia.ruolo.c.on{background:var(--c)} .pastiglia.ruolo.a.on{background:var(--a)}

/* ---- grafici di giornata ----
   Colori funzionali e non decorativi, come tutto il resto: il verde e' il
   voto secco, l'azzurro dell'accento e' il fantavoto (cioe' quello che conta
   per il fantacalcio), il rosso e' il malus. Sono gli stessi accostamenti
   della tabella, cosi' chi ha letto una riga sa gia' leggere una barra. */
.periodi { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:-2px 0 10px; }
.periodi .pastiglia { padding:4px 12px; font-size:12px; }
.periodi .mut { font-size:11.5px; margin-left:auto; }
.grafico { background:var(--campo-bg); border:1px solid var(--line); border-radius:8px;
           padding:9px 10px 7px; margin-bottom:9px; }
.grafico .gtit { font-size:11px; text-transform:uppercase; letter-spacing:.5px;
                 color:var(--dim); font-weight:700; margin-bottom:4px; }
.grafico svg { display:block; overflow:visible; }
.grafico .griglia { stroke:var(--line); stroke-width:1; }
.grafico .griglia.zero { stroke:#33607a; }
.grafico .stacco { stroke:#33607a; stroke-width:1; stroke-dasharray:2 3; }
.grafico .asse { fill:var(--dim); font-size:9.5px; }
.grafico .anno { fill:var(--dim); font-size:9.5px; opacity:.75; }
.grafico .b-voto { fill:var(--d); opacity:.72; }
.grafico .b-fv   { fill:var(--acc); }
.grafico .b-bonus{ fill:var(--acc); }
.grafico .b-malus{ fill:var(--bad); }
.grafico .sv { fill:var(--dim); opacity:.6; }
.grafico .sv.vuota { fill:none; stroke:var(--dim); stroke-width:1; opacity:.55; }
.grafico .linea-mm { fill:none; stroke:#f0d67a; stroke-width:1.6;
                     stroke-linejoin:round; stroke-linecap:round; }
.grafico .linea-saldo { fill:none; stroke:#f0d67a; stroke-width:1.6;
                        stroke-linejoin:round; stroke-linecap:round; }
.grafico .area-saldo { fill:#f0d67a; opacity:.09; stroke:none; }
.grafico .saldo-fine { font-size:11px; font-weight:700; }
.grafico .saldo-fine.su { fill:var(--good); }
.grafico .saldo-fine.giu { fill:var(--bad); }
/* Le zone sensibili: invisibili, larghe una colonna intera, servono solo a
   dare alla didascalia un bersaglio che si possa colpire davvero. Una barra
   da un pixel e mezzo non lo e'. */
.grafico .presa { fill:transparent; cursor:help; }
.grafico .presa:hover { fill:#7ab8f5; fill-opacity:.09; }
.glegenda { display:flex; flex-wrap:wrap; gap:4px 13px; margin-top:6px;
            font-size:10.5px; color:var(--dim); }
.glegenda span { display:inline-flex; align-items:center; gap:5px; }
.glegenda i { width:9px; height:9px; border-radius:2px; flex:none; }
.glegenda .q-voto { background:var(--d); opacity:.72; }
.glegenda .q-fv, .glegenda .q-bonus { background:var(--acc); }
.glegenda .q-malus { background:var(--bad); }
.glegenda .q-mm, .glegenda .q-saldo { background:#f0d67a; height:2px; border-radius:1px; }
.glegenda .q-sv { background:var(--dim); border-radius:50%; opacity:.6; }
.glegenda .q-sv.vuota { background:none; box-shadow:inset 0 0 0 1px var(--dim); opacity:.55; }

/* La fascia delle presenze sotto le barre: e' la dot-stripe, che ora vive li'
   allineata ai voti invece che in un riquadro staccato a fondo scheda. I colori
   sono una scala di intensita' e non una tavolozza — chiaro dove ha giocato,
   scuro dove no — perche' verde e azzurro pieni sono gia' il voto e il
   fantavoto, e riusarli qui farebbe leggere la fascia come una terza serie.
   Il fondo e' un solco appena piu' chiaro del riquadro, perche' le giornate in
   cui non era nemmeno in lista non hanno una cella e senza il solco sarebbero
   indistinguibili dal bordo del grafico.
   `crispEdges` non e' un vezzo: a quattro stagioni di campionato una cella
   sta sotto i due pixel, e l'antialiasing la sbiadirebbe fino a farla
   sparire proprio dove le assenze sono piu' fitte. */
.grafico .fascia-fondo { fill:#0f2836; }
.grafico .fascia { shape-rendering:crispEdges; }
.grafico .fascia.f-tit  { fill:#a9c9da; } .grafico .fascia.f-sub { fill:#5b8296; }
.grafico .fascia.f-panca{ fill:#22475b; }
.grafico .fascia.f-squa { fill:var(--warn); } .grafico .fascia.f-inf { fill:var(--bad); }
.glegenda.fasciale { margin-top:3px; }
.glegenda .et { color:var(--dim); opacity:.62; }
.glegenda .f-tit { background:#a9c9da; } .glegenda .f-sub { background:#5b8296; }
.glegenda .f-panca { background:#22475b; }
.glegenda .f-squa { background:var(--warn); } .glegenda .f-inf { background:var(--bad); }
.glegenda .f-fuori { background:#0f2836; box-shadow:inset 0 0 0 1px var(--line); }

/* Interruttore vero e non casella: un quadratino da 13 pixel su un vetro e' il
   bersaglio piu' difficile di tutta l'interfaccia. */
.interruttore { display:flex; align-items:center; justify-content:space-between;
                gap:14px; padding:12px 0; border-bottom:1px solid var(--line); }
.interruttore label { margin:0; font-size:14.5px; color:var(--ink); }
.interruttore label small { display:block; font-size:11.5px; color:var(--dim); }
.interruttore input { -webkit-appearance:none; appearance:none; flex:none;
                      width:46px; height:27px; border-radius:14px; background:var(--campo-bg);
                      border:1px solid var(--line); position:relative; cursor:pointer;
                      transition:background .15s, border-color .15s; }
.interruttore input::after { content:""; position:absolute; top:3px; left:3px;
                             width:19px; height:19px; border-radius:50%;
                             background:#7d97a6; transition:transform .15s, background .15s; }
.interruttore input:checked { background:#1c4f74; border-color:var(--acc); }
.interruttore input:checked::after { transform:translateX(19px); background:var(--acc); }

/* ---- il piede, ridotto all'osso ----
   Sul telefono il biglietto da visita completo era mezzo schermo di scorrimento
   dopo l'ultimo giocatore. Restano il marchio, la riga di copyright e la firma
   che porta al sito: il resto sta sul sito. */
.piede .copy { display:flex; flex-wrap:wrap; gap:5px 20px; justify-content:space-between; }
.piede .copy a { color:var(--marchio); border-bottom:1px solid rgba(17,51,71,.35); }
.piede .copy a:hover { border-bottom-color:var(--marchio); }

/* =========================================================================
   IL SALTO. Sotto i 900px vale la soglia STRETTO di app.js: le due devono
   coincidere, o si finisce col disegno di una vista e i dati dell'altra.
   ========================================================================= */
@media (max-width:900px) {
  .wrap { padding:12px 12px 26px; }
  main { padding-bottom:0; }
  .solomob { display:block; }
  /* Il tabellone riassuntivo, il listone a tabella e il tabellone largo: sul
     telefono non sono versioni strette di se stessi, sono un'altra cosa —
     e quell'altra cosa e' .solomob qui sopra. */
  .nomob, #v-listone .split { display:none; }
  /* ---- intestazione: una riga sola ----
     Il ritratto, la pastiglia della lega e le tre viste sono roba da schermo
     largo: qui il nome della lega e' gia' il titolo e apre la stessa tendina,
     le viste sono la striscia .mobbar dove arriva il pollice, e le voci del
     ritratto stanno sotto il panino. Attenzione: #whoami e #logout vivono
     dentro le tendine, non nell'intestazione — nasconderli qui vorrebbe dire
     un menu senza nome e senza uscita. */
  header { flex-wrap:nowrap; gap:10px; padding:9px 12px; }
  .avatar, .tema-switch, body.in-lega .chip-lega, body.in-lega nav.viste { display:none; }
  .burger { display:flex; margin-left:auto; }
  h1 { font-size:17px; flex:1; min-width:0; gap:8px; }
  h1 .nome-lega { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  body.in-lega h1 .nome-lega, body.in-lega h1 .caret { display:block; }
  .marchio { width:24px; height:24px; }

  /* ---- barra delle azioni, appiccicata sotto l'intestazione ----
     Fantasquadre, Ordina, Filtra: le tre cose che durante un'asta si toccano
     ogni due minuti non devono richiedere di risalire in cima alla lista. */
  .mobbar { position:sticky; top:var(--headh); z-index:30; display:flex; gap:2px;
            margin:-12px -12px 0; padding:5px 6px; background:var(--panel);
            border-bottom:1px solid var(--line); }
  .mobbar button { flex:1; position:relative; display:inline-flex; align-items:center;
                   justify-content:center; gap:6px; background:none; border:none;
                   color:var(--ink); font-size:13.5px; font-weight:600;
                   padding:10px 4px; border-radius:8px; cursor:pointer; }
  .mobbar button:active { background:var(--hover); }
  .mobbar .ico { width:15px; height:15px; opacity:.85; }
  .mobbar .pallino { display:none; position:absolute; top:7px; left:50%; margin-left:-30px;
                     width:7px; height:7px; border-radius:50%; background:var(--bad); }
  .mobbar button.attivo .pallino { display:block; }
  .mobbar button.attivo { color:var(--acc); }

  .mobcerca { display:flex; align-items:center; gap:8px; margin:10px 0 4px;
              background:var(--campo-bg); border:1px solid var(--line); border-radius:10px;
              padding:0 10px; }
  .mobcerca .ico { width:15px; height:15px; color:var(--dim); }
  /* 15px, un solo pixel sotto i 16 che tengono Safari iOS dallo zoom
     automatico: e' probabilmente la causa della pagina che appare "zoomata"
     e tagliata a destra dopo aver cercato un giocatore da telefono — lo zoom
     scatta sulla ricerca e resta anche dopo, sulla scheda che si apre
     subito dopo un risultato toccato. */
  .mobcerca input { border:none; background:none; padding:11px 0; font-size:16px; }
  .mobcerca input:focus { outline:none; }
  .mobcerca .x { border:none; width:26px; height:26px; }

  /* La scarsita' resta — e' lo stato del tavolo, non un ornamento: dice se
     dietro al giocatore chiamato c'e' la fila o il deserto. Ma ridotta a una
     striscia di quattro numeri: per esteso occupava mezzo schermo prima ancora
     del primo giocatore, ed e' un'informazione che si guarda di sfuggita. */
  .scarsita-tit { font-size:10.5px; text-transform:uppercase; letter-spacing:.7px;
                  color:var(--dim); margin:12px 0 5px; }
  .scarsita.compatta { grid-template-columns:repeat(4,1fr); gap:5px; margin:0 0 4px; }
  .scarsita.compatta .sc { padding:6px 4px; text-align:center; cursor:default;
                           border-left-width:1px; border-top-width:3px; }
  .scarsita.compatta .sc b { font-size:18px; margin-left:6px; }
  .scarsita.compatta .sc small, .scarsita.compatta .sc em { display:none; }
  /* La scalinata resta anche nella striscia compatta: e' l'unica cosa qui
     dentro che non si legge ma si guarda, quindi e' anche l'unica che
     sopravvive bene a novanta pixel di larghezza. */
  /* Niente scalinata e niente chevron nei quattro riquadrini: un trattino per
     giocatore vuol dire ottanta trattini per i difensori, e in ottantacinque
     pixel non ci stanno — ci provava, e la striscia sforava di lato. Qui resta
     il numero con la fascia in esponente, che e' la parte che si guarda di
     sfuggita. La forma del reparto e' una cosa da schermo largo.
     La striscia compatta e' gia' la versione richiusa di se stessa, quindi il
     bottone per richiuderla non ha senso. */
  .scarsita.compatta .scala,
  .scarsita.compatta .sc .chiudi { display:none; }
  /* L'esponente della fascia resta anche qui: e' l'unica cosa che rende
     leggibile il numero da solo, e costa nove pixel. */
  /* Nei quattro riquadrini ci sta l'ordinale e non la parola: "1ª" da solo
     accanto al numero basta a dire che quel dieci e' di prima fascia. */
  .scarsita.compatta .sc i.fascia { font-size:9.5px; margin-left:4px; padding:0 4px; }
  .scarsita.compatta .sc i.fascia span { display:none; }
  .scarsita.compatta .sc.ok   { border-top-color:var(--good); }
  .scarsita.compatta .sc.warn { border-top-color:var(--warn); }
  .scarsita.compatta .sc.bad  { border-top-color:var(--bad); }
  .scarsita.compatta .sc.done { border-top-color:var(--line); }
  .scarsita.compatta .sc.done b { font-size:12px; }

  /* ---- il listone come schede ----
     Ruolo, club, titolarita', nome, prezzo: le cinque cose che servono per
     decidere se rilanciare. Tutto il resto e' a un tocco, nella scheda. */
  .listamob { margin-top:6px; }
  .pg { display:flex; gap:10px; align-items:flex-start; padding:11px 2px;
        border-bottom:1px solid var(--line); cursor:pointer; }
  .pg.presa { opacity:.5; }
  .role.tondo { width:27px; height:27px; line-height:27px; border-radius:50%;
                font-size:12px; margin-top:2px; flex:none; }
  .pg .mid { flex:1; min-width:0; }
  .pg .riga1 { display:flex; align-items:center; gap:7px; margin-bottom:4px; }
  .pg .club { border:1px solid var(--line); border-radius:4px; padding:1px 6px 1px 5px;
              font-size:10px; font-weight:700; letter-spacing:.6px; color:var(--dim);
              gap:4px; }
  .pg .club .bandiera { width:9px; height:9px; }
  .pg .tit { position:relative; flex:1; min-width:80px; max-width:132px; height:15px;
             background:var(--line); border-radius:3px; overflow:hidden; }
  .pg .tit i { position:absolute; top:0; bottom:0; left:0; background:var(--acc); }
  .pg .tit b { position:relative; display:block; font-size:9px; font-weight:800;
               letter-spacing:.5px; line-height:15px; text-align:center; color:#fff;
               text-shadow:0 1px 2px rgba(0,0,0,.55); }
  .pg h3 { margin:0; font-size:16.5px; font-weight:700; line-height:1.25;
           overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* La stella qui e' un'azione a se' (preferito), distinta dal tocco sulla
     scheda intera che apre la statistica: 15x19 di icona e' troppo poco per
     un pollice. L'area di tocco cresce col trucco del padding negativo — non
     sposta ne' il testo del nome ne' il santino a fianco, solo il bersaglio. */
  .pg h3 .stella { padding:9px; margin:-9px -2px -9px -9px; }
  .pg .numeretti { font-size:11px; color:var(--dim); margin-top:2px;
                   font-variant-numeric:tabular-nums; }
  .pg .buy { margin-top:7px; padding:11px 14px; font-size:12.5px; border-radius:7px; }
  .pg .dx { display:flex; flex-direction:column; align-items:flex-end; gap:7px; flex:none; }
  .pg .prezzo { background:var(--acc); color:#06202f; border-radius:8px;
                padding:6px 10px; min-width:64px; text-align:center; }
  .pg .prezzo b { display:block; font-size:21px; line-height:1.05; font-weight:700;
                  font-variant-numeric:tabular-nums; }
  .pg .prezzo small { display:block; font-size:9px; letter-spacing:.6px;
                      text-transform:uppercase; opacity:.75; }
  .pg .prezzo.solo-listino { background:#20465c; color:#a8c2d1; }
  .pg .micro { display:flex; gap:6px; }
  /* 31x29 stava sotto la soglia di tocco: "giocatori simili" non ha, a
     differenza della scheda, nessun bersaglio piu' grande altrove sulla
     scheda-riga che faccia la stessa cosa. */
  .pg .micro button { width:38px; height:38px; background:var(--campo-bg); color:var(--dim);
                      border:1px solid var(--line); border-radius:7px; cursor:pointer;
                      display:inline-flex; align-items:center; justify-content:center; }
  .pg .micro .ico { width:15px; height:15px; }
  .niente { padding:34px 8px; color:var(--dim); text-align:center; font-size:13.5px; }

  /* ---- Le Fantasquadre ---- */
  .squadremob { margin-top:12px; }
  .squadremob .sq { background:var(--campo-bg); border:1px solid transparent; border-radius:10px;
                    padding:11px 13px; margin-bottom:9px; cursor:pointer; }
  .squadremob .sq:active { border-color:var(--acc); }
  .squadremob .sq.mia { border-color:var(--acc); box-shadow:inset 3px 0 0 var(--acc); }
  .squadremob .top { display:flex; justify-content:space-between; align-items:baseline;
                     gap:10px; }
  .squadremob .nm { font-size:16px; font-weight:700; overflow:hidden;
                    text-overflow:ellipsis; white-space:nowrap; }
  /* La propria squadra si legge anche dal nome, non solo dal bollino "tu":
     lo stesso verde che la segna ovunque nel regolamento (vedi --good-text),
     scuro abbastanza da restare leggibile anche in chiaro. */
  .squadremob .sq.mia .nm { color:var(--good-text); }
  .squadremob .cr { font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; }
  .squadremob .cr small { color:var(--dim); font-size:10.5px; font-weight:400; }
  .squadremob .slots { display:flex; gap:2px; flex-wrap:wrap; margin-top:8px; }
  .squadremob .stacco { width:7px; }
  .squadremob .last { font-size:11px; color:var(--dim); margin-top:7px;
                      overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  .sqdett .testa { display:flex; align-items:center; gap:10px; margin:12px 0 10px; }
  .sqdett .testa b { font-size:18px; flex:1; min-width:0; overflow:hidden;
                     text-overflow:ellipsis; white-space:nowrap; }
  .sqdett .testa .cr { font-size:16px; font-weight:600; cursor:pointer;
                       font-variant-numeric:tabular-nums; }
  .sqdett .testa .cr small { color:var(--dim); font-size:11px; font-weight:400; }
  .sqdett .indietro { display:flex; }
  table.colonna { width:100%; }
  table.colonna td.band { width:40px; min-width:40px; }
  table.colonna td { padding:9px 10px; }
  table.colonna .slot { font-size:14px; }

  /* ---- schede della lega e riquadri modali ---- */
  .titolo-pagina { flex-wrap:wrap; gap:8px 12px; }
  .grid { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
  .fgrid { grid-template-columns:1fr; }
  .steps { gap:6px; }
  .step { min-width:120px; }
  .backdrop { padding:10px; align-items:flex-start; }
  .panel { max-width:100%; }

  /* ---- scheda giocatore: a schermo pieno, col cognome sempre in alto ----
     Scorrendo i grafici l'unica cosa che dice di chi stai leggendo i numeri e'
     l'intestazione: qui e' appiccicata e alta una riga, e il sottotitolo
     scende nel corpo invece di raddoppiarla. */
  /* flex-start e non stretch: allungata a forza sull'altezza della finestra, la
     scheda restava un riquadro da 812 pixel con dentro tremila pixel di
     contenuto, e da meta' pagina in giu' si vedeva il listone attraverso il
     fondo. Con min-height resta comunque piena a schermo quando il giocatore
     ha poco da raccontare. */
  #sheet { padding:0; align-items:flex-start; }
  #sheet .sheet { max-width:none; border:none; border-radius:0; min-height:100%; }
  .sheet header { position:sticky; top:0; z-index:5; background:var(--panel);
                  border-radius:0; border-bottom:1px solid var(--line);
                  align-items:center; flex-wrap:nowrap; gap:10px; padding:10px 12px; }
  .sheet header #sh_sub { display:none; }
  .sheet h1 { font-size:16.5px; }
  #sh_back { display:flex; }
  /* La freccia e la crocetta farebbero la stessa cosa: sul telefono resta la
     freccia, che e' il gesto che si cerca. */
  #sh_close { display:none; }
  a.verifica span.txt { display:none; }
  .sheet .body { padding:14px 14px 26px; }
  .sottotitolo-mob { display:block; color:var(--dim); font-size:12.5px;
                     margin:-2px 0 12px; }
  .tiles { grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); }
  /* Lo spiegone in testa alla proiezione qui non si legge: sono sei righe
     prima del primo numero, e chi apre una scheda durante un'asta le salta.
     La stessa cosa e' detta dal "?" accanto al titolo, quando serve. */
  .solo-largo { display:none; }
  .chiedi { display:inline-flex; }
  .sheet h3 { display:flex; align-items:center; gap:7px; }
  .tile span { padding-right:19px; }
  /* Aperta al tocco la didascalia resta ferma finche' non si tocca altrove:
     larga quanto lo schermo concede, perche' qui non c'e' un riquadro accanto
     su cui appoggiarsi. */
  .tip { max-width:min(320px, calc(100vw - 26px)); }

  .hero-home { margin-top:8vh; }
  .hero-home h2 { font-size:21px; }

  /* Il corpo non scorre mentre un foglio e' aperto: due scorrimenti
     sovrapposti su un telefono sono indistinguibili al dito. */
  body.bloccato { overflow:hidden; }

  /* ---- piede ---- */
  .piede { padding:16px 14px 18px; margin-top:26px; }
  .piede .chi, .piede .dati { display:none; }
  .piede .lockup { height:27px; }
  .piede .copy { margin-top:12px; padding-top:11px; font-size:10.5px;
                 flex-direction:column; gap:4px; justify-content:flex-start; }
}

@media (max-width:400px) {
  /* Schermi piccoli davvero: la seconda colonna della scarsita' e la barra
     della titolarita' diventano strisce, e una striscia non si legge. */
  .scarsita.compatta .sc b { font-size:16px; }
  .pg .tit { max-width:96px; }
  .pg h3 { font-size:15.5px; }
  .grid { grid-template-columns:1fr; }
  /* I riquadri restano due per riga anche qui: uno per riga vorrebbe dire
     dodici schermate di scorrimento per leggere una proiezione. */
  .tiles { grid-template-columns:1fr 1fr; }
  .panel .row { flex-wrap:wrap; }
}

/* Freschezza dei dati, sotto il testo d'aiuto del listone. Volutamente
   sottotono: e' un'informazione da consultare, non un avviso da subire. */
.freschezza { margin-top:7px; padding-top:7px; border-top:1px solid var(--line);
              font-size:11.5px; color:var(--dim); }
.freschezza b { color:var(--ink); font-weight:600; }
/* Le fonti a cadenza lenta su una riga loro. Sulla stessa riga delle altre
   "12 giorni fa" accanto a "oggi" si legge come un guasto, e non lo e': lo
   storico infortuni si rifa' ogni tre mesi perche' guarda indietro tre anni. */
.freschezza .ritmo { margin-top:3px; }

/* Il tasso osservato sotto la titolarita' prevista. Sta nella riga piccola del
   riquadro e non in un riquadro suo: e' il dato grezzo da cui nasce il numero
   grande, non un secondo dato da confrontare — ma deve staccarsi abbastanza da
   non leggersi come parte dell'etichetta. */
.tile small b.visto { color:var(--ink); font-weight:600; }

/* Correzioni manuali: il valore toccato a mano deve distinguersi a colpo
   d'occhio da quello scaricato, o fra un mese non si sa piu' cosa e' cosa. */
.corretto { border-color:var(--acc) !important; color:var(--acc) !important; }
tr.riga-esclusa { opacity:.45; }

/* Codice invito: monospaziato e cliccabile, perche' si copia e si incolla in
   un messaggio invece di essere riletto a video. */
.codice { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px;
          letter-spacing:.5px; background:var(--campo-bg); border:1px solid var(--line);
          border-radius:5px; padding:2px 7px; cursor:pointer; color:var(--ink); }
.codice:hover { border-color:var(--acc); color:var(--acc); }
.ok-txt { color:#7fd18c; font-weight:600; }

/* ===========================================================================
   PANNELLO ADMIN
   Quattro mestieri diversi — lanciare gli aggiornamenti, decidere chi entra,
   generare inviti, correggere il listone — che prima stavano in sei riquadri
   impilati nella stessa colonna. Non si fanno mai insieme: qui diventano
   quattro schede, e sotto ognuna si vede solo la sua roba.
=========================================================================== */
.admin-tabs { display:flex; gap:4px; margin-bottom:16px; padding:4px;
              background:var(--panel); border:1px solid var(--line);
              border-radius:10px; overflow-x:auto; scrollbar-width:none; }
.admin-tabs::-webkit-scrollbar { display:none; }
.admin-tabs button { display:inline-flex; align-items:center; gap:7px; flex:1 0 auto;
                     justify-content:center; white-space:nowrap; background:none;
                     border:none; color:var(--dim); font-size:13.5px; font-weight:600;
                     font-family:inherit; padding:9px 14px; border-radius:7px;
                     cursor:pointer; transition:color .12s, background .12s; }
.admin-tabs button:hover:not(.on) { color:var(--ink); background:var(--hover); }
.admin-tabs button.on { background:var(--acc); color:var(--on-acc); }
.admin-tabs button.on .pallino-conta { background:#0a1c2a; color:var(--acc); }
.admin-tabs .ico { width:15px; height:15px; fill:none; stroke:currentColor;
                   stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
                   flex:none; }
.admin-tabs button:focus-visible { outline:2px solid var(--acc); outline-offset:1px; }
.admin-pan { display:none; } .admin-pan.on { display:block; }

/* Lo stato del lancio e' la prima cosa da leggere entrando: o c'e' qualcosa in
   corso, e allora niente altro conta, o non c'e'. */
.stato-lancio { display:flex; align-items:center; gap:9px; font-size:13px;
                color:var(--dim); background:var(--campo-bg); border:1px solid var(--line);
                border-radius:8px; padding:10px 13px; margin-bottom:12px; }
.stato-lancio b { color:var(--ink); font-weight:600; }
.stato-lancio.gira { border-color:#5a441c; background:#3a2c12; color:#f4c579; }
.stato-lancio.gira b { color:#f4c579; }
.stato-lancio .spia { flex:none; width:9px; height:9px; border-radius:50%;
                      background:var(--dim); }
.stato-lancio.gira .spia { background:var(--warn); animation:pulsa 1.4s ease-in-out infinite; }
@keyframes pulsa { 0%,100% { opacity:1; } 50% { opacity:.25; } }

/* ---- i comandi ----
   Erano sei pillole identiche in fila: "solo listone" (due minuti) e "aggiorna"
   (fino a due ore) si toccavano allo stesso modo e si distinguevano solo
   leggendo. Adesso ognuno dice cosa fa e quanto dura, e quello che si lancia
   quasi sempre e' l'unico pieno. */
.azioni { display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.azioni button { display:block; width:100%; text-align:left; background:var(--campo-bg);
                 border:1px solid var(--line); border-radius:8px; color:var(--ink);
                 padding:11px 14px; cursor:pointer; font-family:inherit;
                 transition:border-color .12s, background .12s; }
.azioni button:hover:not(:disabled) { border-color:var(--acc); background:var(--hover); }
.azioni button:focus-visible { outline:2px solid var(--acc); outline-offset:1px; }
.azioni button:disabled { opacity:.4; cursor:not-allowed; }
.azioni button .t { display:block; font-size:14px; font-weight:600; }
.azioni button .d { display:block; font-size:11.5px; color:var(--dim); margin-top:3px;
                    line-height:1.4; white-space:normal; }
.azioni button.primario { border-color:var(--acc); background:var(--hover); }
.azioni button.primario .t { color:var(--acc); }

.logbox { max-height:320px; overflow:auto; font-size:12px; line-height:1.5;
          white-space:pre-wrap; word-break:break-word; margin:0; color:var(--dim);
          background:var(--campo-bg); border:1px solid var(--line); border-radius:8px;
          padding:11px 13px; }

/* Le tabelle dell'admin hanno celle che non si spezzano (email, date, bottoni):
   senza un contenitore che clippi, l'eccesso fa scorrere *la pagina* in
   orizzontale. Stesso meccanismo, stessa cura del listone. */
.admin-pan .tabmob { overflow-x:auto; max-width:100%; margin:0 -2px; padding:0 2px; }
.admin-pan .tabmob thead th { top:0; }
.admin-pan td .act, .admin-pan td button { font-size:12.5px; padding:5px 11px; }
.admin-pan td button:not(.act) { background:none; border:1px solid var(--line);
                                 color:var(--dim); border-radius:6px; cursor:pointer;
                                 font-family:inherit; }
.admin-pan td button:not(.act):hover { color:var(--ink); border-color:var(--acc);
                                       background:var(--hover); }

/* I campi in riga: su schermo largo stanno accanto, sotto i 700 pixel no.
   `flex:1 1 100%` e non un min-width piu' basso, perche' un campo largo mezzo
   telefono non e' un campo piu' compatto, e' un campo che non si legge. */
.filters-fine > .cresce { flex:1 1 260px; }
.filters-fine > .stretto { flex:0 1 180px; }
.filters-fine > .strettino { flex:0 1 130px; }
.filters-fine > .azione { flex:0 0 auto; }
.filters-fine > .azione button { height:35px; }

@media (max-width:700px) {
  .filters-fine { gap:9px; }
  .filters-fine > div { flex:1 1 100% !important; max-width:none !important; }
  .filters-fine > .azione button { width:100%; height:auto; padding:11px 16px; }
}

@media (max-width:900px) {
  /* La barra delle schede resta sotto l'intestazione mentre si scorre: e' il
     solo modo di tornare indietro senza risalire in cima a una tabella lunga. */
  .admin-tabs { position:sticky; top:var(--headh); z-index:20; margin:-4px -4px 14px; }
  .admin-tabs button { flex:1 0 auto; padding:9px 11px; font-size:13px; }
  .admin-tabs .ico { display:none; }

  /* ---- le tabelle diventano schede ----
     Cinque colonne su 390 pixel si leggono di sbieco. Ogni riga diventa un
     blocco con le etichette a sinistra: la stessa informazione, letta per
     verticale invece che per orizzontale. */
  .admin-pan table.stack, .admin-pan table.stack tbody,
  .admin-pan table.stack tr, .admin-pan table.stack td { display:block; width:auto; }
  .admin-pan table.stack thead { display:none; }
  .admin-pan table.stack tr { border:1px solid var(--line); border-radius:9px;
                              padding:10px 12px; margin-bottom:9px; background:var(--campo-bg); }
  .admin-pan table.stack tr:hover { background:var(--campo-bg); }
  .admin-pan table.stack td { border:none; padding:3px 0; text-align:left;
                              white-space:normal; display:flex; gap:10px;
                              align-items:baseline; justify-content:space-between; }
  /* La prima cella non ha etichetta: e' il nome, e l'indirizzo che gli sta
     sotto deve restarci sotto invece di finire in fondo alla riga. */
  .admin-pan table.stack td:not([data-label]) { display:block; }
  .admin-pan table.stack td:not([data-label]):first-child { font-size:14.5px;
                              margin-bottom:2px; }
  .admin-pan table.stack td[data-label]::before { content:attr(data-label);
                              flex:none; font-size:10.5px; text-transform:uppercase;
                              letter-spacing:.4px; color:var(--dim); }
  .admin-pan table.stack td:empty { display:none; }
  .admin-pan table.stack td.azioni-cella { display:flex; gap:7px; margin-top:8px;
                              padding-top:9px; border-top:1px solid var(--line); }
  .admin-pan table.stack td.azioni-cella::before { display:none; }
  .admin-pan table.stack td.azioni-cella button { flex:1; padding:9px 10px;
                              font-size:13px; }
  /* Il secondo rigo di una cella (la data di scadenza sotto lo stato) va a
     capo invece di stringersi accanto al valore. */
  .admin-pan table.stack td { flex-wrap:wrap; }
  .admin-pan table.stack td[data-label] .from { flex:1 0 100%; display:block; text-align:right; }
  .azioni { grid-template-columns:1fr; }
}

/* ---- scostamento di ruolo e badge rigorista sul campo disegnato ----
   Restano gli unici due segni-glifo: lo scostamento (▲▼) e' una freccia, non
   un giudizio, e sta bene come tale; il rigorista sul campo disegnato
   (vedi `disegnaCampo`) vive in un chip larghissimo quanto un cognome, dove
   una pillola di testo intera non ci starebbe. Tutto il resto — i sette
   contrassegni veri e propri — e' sotto, come pillole. */
.seg { display:inline-block; margin-left:5px; font-size:11px; font-weight:700;
       letter-spacing:.3px; vertical-align:1px; cursor:help; }
.seg.rig { color:#f0c05a; }
/* Tre gradini pieni-mezzi-quasi niente. Il terzo rigorista tira quasi mai, e
   una P ben visibile lo direbbe piu' importante di quanto sia. */
.seg.rig.g1 { opacity:1; }
.seg.rig.g2 { opacity:.5; }
.seg.rig.g3 { opacity:.25; }
.seg.scarto { font-size:10px; vertical-align:1px; }
.seg.scarto.su { color:var(--good-text); }
.seg.scarto.giu { color:var(--bad-text); }

/* ---- pillole dei contrassegni, sotto il nome nel listone ----
   Erano icone attaccate al nome: un tap su un simbolo minuscolo in mezzo
   alla riga finiva troppo spesso per aprire la scheda del giocatore invece
   della spiegazione. Il testo si legge da solo, senza bisogno di aprire
   nulla, e va su una riga sua — `.pillrow` e' un blocco, non uno span, cosi'
   va a capo da solo dopo il nome senza bisogno di un <br>.

   Due sole famiglie di colore, non piu' una a contrassegno: verde per i
   pregi (`.pregio`), caldo per le due cautele — la stessa tavolozza
   ambra/rosso di `.msg.w`/`.msg.e` gia' in uso nel resto della pagina per
   avviso ed errore. Chi gia' legge quella distinzione la ritrova identica
   qui. */
.pillrow { display:flex; flex-wrap:nowrap; gap:4px; margin-top:3px; overflow:hidden; }
.pillo { display:inline-block; padding:1px 7px; border-radius:8px; font-size:10px;
         font-weight:600; line-height:1.5; white-space:nowrap; flex:none; }
.pillo.pregio     { background:#14301f; color:#8fdcb0; border:1px solid #1f5236; }
.pillo.cartellini { background:#3a2c12; color:#f4c579; border:1px solid #5a441c; }
.pillo.infortuni  { background:#3a1c1c; color:#f0a3a1; border:1px solid #5a2a2a; }
.pillo.piu        { background:transparent; color:var(--dim); border:1px dashed var(--line);
                     cursor:help; }

/* Il pallino colorato nella pastiglia del filtro: la stessa `cls` della
   pillola, ma un semplice punto invece della pillola intera — dentro un
   bottone che e' gia' lui stesso a forma di pastiglia, una pillola per
   intero sarebbe un badge dentro un badge. */
.segno-pallino { display:inline-block; width:8px; height:8px; border-radius:50%;
                 margin-right:6px; vertical-align:1px; }
.segno-pallino.pregio     { background:#8fdcb0; }
.segno-pallino.cartellini { background:#f4c579; }
.segno-pallino.infortuni  { background:#f0a3a1; }

/* La legenda sta sotto la tabella e resta sempre visibile: un simbolo che
   costringe a ricordarselo e' un simbolo che non si usa. */
/* Sopra la tabella, non sotto: una legenda in fondo alla pagina e' una legenda
   che non si vede mentre si guardano i simboli. */
.legend.segni { margin:2px 0 10px; padding-bottom:9px;
                border-bottom:1px solid var(--line); align-items:center; }
.legend.segni > span { display:inline-flex; align-items:center; gap:3px; }
.legend.segni span { white-space:nowrap; }
.legend.segni .seg { margin-left:0; margin-right:4px; }
.legend.segni .pillo { margin-right:2px; }

/* Uno scarto grande dallo zero, senza dire se e' un bene o un male: vale per
   Gol - xG, dove i due segni sono due storie diverse ma nessuna delle due e'
   una buona notizia in se'. */
.diverge { color:var(--acc); font-weight:600; }

/* ===========================================================================
   PROBABILI FORMAZIONI
   La formazione tipo di stagione, una scheda per squadra: un campo disegnato
   (sfondo SVG, giocatori come chip HTML sopra — vedi disegnaCampo in app.js),
   i ballottaggi in coppie e chi resta fuori dagli undici.

   **Una squadra alla volta, su ogni schermo.** Prima il largo mostrava venti
   schede in griglia e solo il telefono ne isolava una. Ma la domanda e' sempre
   su una squadra sola — "come gioca il Napoli" — e venti campi affiancati
   erano venti miniature che costringevano a cercare la propria fra le altre.
   La striscia di loghi, che era il ripiego per lo schermo piccolo, e' in
   realta' il modo giusto di navigarle ovunque.

   Lo spazio che si libera sul largo non resta vuoto: campo a sinistra,
   ballottaggi e riserve incolonnati a destra. E' la stessa scheda, letta in
   una schermata invece che scorrendo.
=========================================================================== */
.formazioni-griglia { display:block; }
/* Le altre squadre restano nel DOM — gia' disegnate, niente da ricalcolare al
   clic — ma fuori vista. */
.fz-card { display:none; }
.fz-card.sel { display:block; animation:vista-entra .65s cubic-bezier(.16,.68,.28,1); }
@media (prefers-reduced-motion:reduce) { .fz-card.sel { animation:none; } }

.fz-corpo { display:grid; gap:18px; align-items:start; }
@media (min-width:900px) {
  .fz-corpo { grid-template-columns:minmax(300px,360px) 1fr; gap:28px; }
  /* Senza questo la colonna di destra si allunga a vuoto quando i ballottaggi
     sono pochi, e il blocco delle riserve galleggia a meta' altezza. */
  .fz-col-lato { align-self:stretch; }
  .fz-col-lato .fz-ballottaggi { margin-top:0; padding-top:0; border-top:none; }
}
.fz-card h3 { display:flex; align-items:center; gap:7px; font-size:15px;
              font-weight:600; margin:0 0 10px; text-transform:none;
              letter-spacing:normal; color:var(--ink); }
/* Modulo e allenatore chiudono la scheda, non la aprono piu': un margine
   sopra la separa dai ballottaggi che ora la precedono, non uno sotto. */
.fz-sotto { font-size:12px; color:var(--dim); margin:12px 0 0; }

/* ---- la striscia di loghi: il selettore di squadra ---- */
.fz-striscia { display:flex; gap:2px; overflow-x:auto; padding:8px 2px 10px;
               scrollbar-width:none; margin:0 0 10px;
               border-bottom:1px solid var(--line); }
.fz-striscia::-webkit-scrollbar { display:none; }
.fz-logo { flex:none; display:flex; flex-direction:column; align-items:center; gap:3px;
           background:none; border:none; padding:4px 2px; color:var(--dim);
           font-size:10px; font-weight:700; letter-spacing:.3px; cursor:pointer; }
.fz-logo .bandiera { width:30px; height:30px; border-radius:50%; overflow:hidden;
                     border:2px solid var(--line); box-sizing:border-box;
                     transition:transform .15s ease, border-color .15s ease; }
.fz-logo:hover .bandiera { transform:scale(1.14); }
.fz-logo.on { color:var(--acc); }
.fz-logo.on .bandiera { border-color:var(--acc); }
@media (prefers-reduced-motion:reduce) { .fz-logo:hover .bandiera { transform:none; } }

/* ---- il campo ---- */
.fz-pitch { position:relative; width:100%; aspect-ratio:300/420; max-width:440px;
            margin:0 auto; border-radius:8px; overflow:hidden;
            background:repeating-linear-gradient(0deg, #163a2a, #163a2a 12%, #12321f 12%, #12321f 24%); }
@media (min-width:900px) { .fz-pitch { max-width:520px; } }
.fz-pitch-linee { position:absolute; inset:0; width:100%; height:100%; }
.fz-riga { position:absolute; left:0; right:0; transform:translateY(-50%);
           display:flex; justify-content:space-evenly; }
.fz-dot { position:absolute; transform:translate(-50%,-50%); display:flex;
          flex-direction:column; align-items:center; gap:2px; background:none;
          border:none; padding:0; cursor:pointer;
          animation:fz-dot-in .7s cubic-bezier(.16,.68,.28,1) both; }
/* Undici comparse, non undici scatti insieme: ogni riga (dal portiere in
   basso all'attacco in cima, vedi disegnaCampo) parte con un filo di
   ritardo sulla precedente — la formazione si "schiera" invece di apparire
   tutta a bocca aperta nello stesso istante. Piu' lenta e piu' spaziata di
   prima, per un ingresso che si segue con l'occhio invece di intuirlo. */
.fz-riga:nth-of-type(1) .fz-dot { animation-delay:.05s; }
.fz-riga:nth-of-type(2) .fz-dot { animation-delay:.18s; }
.fz-riga:nth-of-type(3) .fz-dot { animation-delay:.31s; }
.fz-riga:nth-of-type(4) .fz-dot { animation-delay:.44s; }
.fz-riga:nth-of-type(5) .fz-dot { animation-delay:.57s; }
@keyframes fz-dot-in {
  from { opacity:0; transform:translate(-50%,-50%) scale(.6); }
  to   { opacity:1; transform:translate(-50%,-50%) scale(1); }
}
@media (prefers-reduced-motion:reduce) { .fz-dot { animation:none; } }
/* Il pallino e' diventato una figurina: angoli arrotondati come il santino
   in ogni altro punto del sito, non piu' un cerchio — e molto piu' grande,
   perche' qui la domanda e' "chi gioca dove" e la faccia e' la risposta. */
.fz-pallino { position:relative; width:56px; height:56px; border-radius:26%; display:flex;
              align-items:center; justify-content:center; font-size:10px;
              font-weight:700; color:#05121a; border:2.5px solid rgba(5,18,26,.5); }
@media (min-width:900px) { .fz-pallino { width:72px; height:72px; } }
.fz-pallino.p { background:var(--p); } .fz-pallino.d { background:var(--d); }
.fz-pallino.c { background:var(--c); } .fz-pallino.a { background:var(--a); }
/* Il "viso" del pallino: la testa stilizzata resta come sfondo/fallback per
   chi non ha ancora un santino (o non e' nel listone, vedi .gap) — il
   santino vero, quando c'e', ci si sovrappone e lo copre del tutto. Il
   colore del cerchio resta il segnale del ruolo, visibile nel bordo anche
   quando la foto lo riempie; la lettera di ruolo trasloca nel bollino qui
   sotto. */
.fz-pallino .fz-viso { width:30px; height:30px; opacity:.85; }
.fz-pallino .fz-foto { position:absolute; inset:0; width:100%; height:100%;
                       margin:0; border-radius:24%; }
/* Bandiere delle nazioni (SVG in web/bandiere/, 4:3). Alte quanto una
   minuscola, cosi' stanno in riga col testo senza allargarla; il filetto
   separa dal fondo le bandiere bianche (Giappone, Inghilterra). Con due
   cittadinanze stanno affiancate con un respiro minimo.

   Sul campo delle formazioni vanno sull'angolo opposto al ruolo, in alto a
   sinistra, cosi' i due badge non si toccano e il volto del santino resta
   libero; l'ombra le stacca dal verde. */
.naz { display:inline-flex; gap:3px; align-items:center; vertical-align:-0.12em; white-space:nowrap; }
.naz .flag { width:1.2em; height:0.9em; border-radius:2px; object-fit:cover; display:block;
             box-shadow:0 0 0 1px rgba(0,0,0,.18); }
.naz.fz-naz { position:absolute; left:-7px; top:-7px; z-index:1; gap:2px; pointer-events:none; }
.naz.fz-naz .flag { width:20px; height:15px; box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.5); }
@media (min-width:900px) { .naz.fz-naz .flag { width:24px; height:18px; } }
#fm_naz_paese { width:100%; margin-top:8px; }
.fz-ruolo-badge { position:absolute; right:-5px; bottom:-5px; width:22px; height:22px;
                  border-radius:50%; background:var(--panel); border:2px solid rgba(5,18,26,.55);
                  color:var(--ink); font-size:11px; font-weight:700; line-height:1;
                  display:flex; align-items:center; justify-content:center; z-index:1; }
/* La casella di chi la redazione scrive ma il listone non ha ancora: stessa
   posizione, stesso pallino di ruolo, ma tratteggiato e un po' spento — si
   vede a colpo d'occhio che e' un titolare "sulla parola", non uno che si
   puo' ancora aprire e comprare. Non e' cliccabile (niente scheda, niente
   player_id) e quindi resta uno <span>, non un <button>. */
.fz-dot.gap { cursor:help; }
.fz-dot.gap .fz-pallino { background:none; border-style:dashed; border-color:rgba(255,255,255,.55);
                          color:rgba(255,255,255,.75); }
.fz-dot.gap .fz-cognome { opacity:.75; font-style:italic; }
/* Il tetto e' il piu' stretto fra 84px fissi e la corsia vera del giocatore
   (--slot, l'inline style di app.js): senza il secondo limite, un
   centrocampo a cinque aveva corsie da meno di 60px ma cognomi liberi di
   arrivare a 84 — due nomi lunghi affiancati si scavalcavano invece di
   troncare, illeggibili proprio dove il campo e' piu' affollato. */
.fz-cognome { font-size:11px; font-weight:600; color:#fff; text-shadow:0 1px 3px #000;
             white-space:nowrap; max-width:min(84px, calc(100% - 6px));
             overflow:hidden; text-overflow:ellipsis; }
.fz-cognome .seg { margin-left:2px; }
/* Il dubbio non e' un asterisco in piu': e' un simbolo diverso, perche' un
   ballottaggio non e' un rigorista e confonderli costerebbe una lettura
   sbagliata proprio dove conta di piu' — chi partira' titolare davvero. */
.fz-dubbio { display:inline-flex; align-items:center; justify-content:center;
             width:13px; height:13px; border-radius:50%; border:1px solid var(--warn);
             color:var(--warn-text); background:#0a1c2a; font-size:8.5px; font-style:normal;
             font-weight:700; vertical-align:1px; cursor:help; }

/* ---- ballottaggi in coppia ---- */
.fz-ballottaggi { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.fz-ballottaggi b { display:block; font-size:10.5px; text-transform:uppercase;
                    letter-spacing:.4px; color:var(--dim); margin-bottom:9px; font-weight:600; }
.fz-vs { display:flex; align-items:center; gap:8px; margin-bottom:7px; flex-wrap:wrap;
         animation:fz-ris-in .55s cubic-bezier(.16,.68,.28,1) both; }
.fz-vs:nth-of-type(1) { animation-delay:.06s; } .fz-vs:nth-of-type(2) { animation-delay:.15s; }
.fz-vs:nth-of-type(3) { animation-delay:.24s; } .fz-vs:nth-of-type(n+4) { animation-delay:.33s; }
.fz-vs-freccia { color:var(--dim); font-size:13px; flex:none; }
.fz-vs-sfidanti { display:flex; flex-wrap:wrap; gap:6px; }
/* E' un <button>: apre la scheda del giocatore. Resta disegnato come una
   pastiglia — il colore e la forma dicono gia' favorito/sfidante, e un
   pulsante che sembra un pulsante qui farebbe sembrare il ballottaggio una
   cosa da decidere invece che da leggere. */
.fz-vs-chip { display:inline-flex; align-items:center; gap:5px; font-size:12.5px;
              background:var(--campo-bg); border:1px solid var(--line); border-radius:6px;
              padding:3px 9px 3px 7px; color:var(--ink); font-family:inherit;
              cursor:pointer; text-align:left; }
.fz-vs-chip:hover { border-color:var(--acc); }
.fz-vs-chip i { width:7px; height:7px; border-radius:50%; flex:none; }
.fz-vs-chip.sicuro i { background:var(--good); }
.fz-vs-chip.dubbio i { background:var(--bad); }
.fz-vs-chip .role { width:14px; height:14px; line-height:14px; font-size:9px; border-radius:4px; }

/* ---- fuori dagli undici ----
   Righe e non chip: qui i nomi si scorrono cercandone uno, e una colonna
   allineata si legge molto piu' in fretta di un blocco che va a capo. Il FVM
   in fondo, incolonnato: e' il numero su cui cade l'occhio per decidere se
   quella riserva vale un credito o dodici. */
.fz-riserve { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.fz-riserve > b { display:block; font-size:10.5px; text-transform:uppercase;
                  letter-spacing:.4px; color:var(--dim); margin-bottom:9px; font-weight:600; }
.fz-riserve > b .mut { text-transform:none; letter-spacing:normal; font-weight:400; }
/* Colonne CSS e non una griglia a due colonne: la griglia riempie per riga,
   quindi con l'elenco ordinato per reparto il secondo portiere finiva
   affiancato a un difensore e il raggruppamento non si vedeva piu'. Le
   colonne scorrono in verticale, cioe' nell'ordine in cui l'elenco e' stato
   ordinato, e reggono da sole un numero di riserve che cambia da squadra a
   squadra (da 8 a 17). */
.fz-ris-lista { display:block; }
@media (min-width:900px) { .fz-ris-lista { columns:2; column-gap:16px; } }
.fz-ris { break-inside:avoid; }
.fz-ris { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px;
          width:100%; background:none; border:none; border-radius:5px;
          padding:4px 7px; text-align:left; cursor:pointer; color:var(--ink);
          font-size:12.5px; font-family:inherit;
          animation:fz-ris-in .55s cubic-bezier(.16,.68,.28,1) both; }
/* Stesso principio dei giocatori in campo, un ritardo a scalare — qui per
   nome invece che per riga, visto che la panchina e' un elenco e non uno
   schieramento. Oltre l'ottavo nome il ritardo si ferma: e' gia' abbastanza
   perche' l'occhio percepisca "stanno arrivando uno dopo l'altro" senza
   dover aspettare davvero fino all'ultima riserva. */
.fz-ris:nth-child(1) { animation-delay:.04s; } .fz-ris:nth-child(2) { animation-delay:.11s; }
.fz-ris:nth-child(3) { animation-delay:.18s; } .fz-ris:nth-child(4) { animation-delay:.25s; }
.fz-ris:nth-child(5) { animation-delay:.32s; } .fz-ris:nth-child(6) { animation-delay:.39s; }
.fz-ris:nth-child(7) { animation-delay:.46s; } .fz-ris:nth-child(n+8) { animation-delay:.53s; }
@keyframes fz-ris-in {
  from { opacity:0; transform:translateX(-6px); }
  to   { opacity:1; transform:translateX(0); }
}
@media (prefers-reduced-motion:reduce) { .fz-ris { animation:none; } }
.fz-ris:hover { background:var(--campo-bg); }
.fz-ris .role { width:15px; height:15px; line-height:15px; font-size:9px;
                border-radius:4px; flex:none; }
.fz-ris-nome { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fz-ris-fvm { color:var(--dim); font-variant-numeric:tabular-nums; font-size:12px; }

@media (max-width:900px) {
  /* A tutta larghezza, cosi' il primo e l'ultimo logo non restano incastrati
     nel margine della pagina. */
  .fz-striscia { margin:0 -12px 6px; padding-left:12px; }
}


/* ---------------------------------------------------------------------------
   IL VELO DI CARICAMENTO
   Copre tutto perche' quello che sta cambiando e' tutto: aprire una lega
   rifa' il listone, il tabellone e i punteggi insieme. Un indicatore piccolo
   in un angolo si sarebbe visto solo da chi gia' sapeva dove guardare.

   L'attesa vera dura qualche decimo di secondo: il velo si accende con un
   ritardo (vedi `caricando` in app.js) perche' un lampo bianco su un'apertura
   istantanea si nota piu' dell'attesa che dovrebbe coprire.

   Il nero e' piu' scuro del fondo della pagina, non lo stesso: velato all'80%
   con il proprio colore, il fondo restava identico a se stesso e sotto al velo
   si continuava a leggere tutto — sembrava una rotellina appoggiata sopra una
   pagina viva, che e' l'opposto di quello che deve dire.
--------------------------------------------------------------------------- */
.velo { position:fixed; inset:0; z-index:300; display:none;
        flex-direction:column; align-items:center; justify-content:center;
        gap:18px; background:rgba(3,10,15,.8); backdrop-filter:blur(3px); }
.velo.on { display:flex; animation:velo-entra .18s ease-out; }
@keyframes velo-entra { from { opacity:0 } to { opacity:1 } }

.velo-marchio { position:relative; width:96px; height:96px;
                display:grid; place-items:center; }
/* Il marchio respira: e' un disco bianco, e una rotazione su se stesso non si
   vedrebbe. La scala si', ed e' un movimento che non sembra un errore di
   caricamento come farebbe un lampeggio. */
.velo-marchio img { width:60px; height:60px; display:block;
                    animation:velo-respira 1.6s ease-in-out infinite; }
@keyframes velo-respira {
  0%, 100% { transform:scale(.9); opacity:.85; }
  50%      { transform:scale(1);  opacity:1; }
}
/* L'anello che gira: un cerchio a cui e' acceso un arco solo. E' il pezzo che
   dice "sto lavorando", ed e' anche l'unico che si muove a velocita' costante
   — il respiro da solo poteva sembrare un'immagine che pulsa per decorazione. */
.velo-anello { position:absolute; inset:0; border-radius:50%;
               border:2px solid rgba(122,184,245,.18);
               border-top-color:var(--acc);
               animation:velo-gira 1s linear infinite; }
@keyframes velo-gira { to { transform:rotate(360deg) } }

.velo p { margin:0; color:var(--dim); font-size:12.5px; letter-spacing:.3px; }

/* Chi ha chiesto di non vedere animazioni non le vede: restano il velo e la
   scritta, che sono la parte che informa. */
@media (prefers-reduced-motion:reduce) {
  .velo-marchio img, .velo-anello, .velo.on { animation:none; }
  .velo-anello { border-top-color:rgba(122,184,245,.5); }
}

/* ---------------------------------------------------------------------------
   ENTRATA DELLE VISTE E DELLE SCHEDE
   Il cambio scheda (Listone/Fantasquadre/Formazioni, le cinque sezioni del
   regolamento) resta un'entrata sola e morbida — una curva che parte piano,
   accelera, e frena in arrivo invece del semplice rallentare di ease-out. */
.view.on { animation:vista-entra .5s cubic-bezier(.16,.68,.28,1); }
.regolamento-step.on { animation:vista-entra .5s cubic-bezier(.16,.68,.28,1); }
@keyframes vista-entra {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce) {
  .view.on, .regolamento-step.on { animation:none; }
}

/* ---------------------------------------------------------------------------
   RIVELAZIONE A SCORRIMENTO
   Sotto il cambio scheda, dentro la pagina: le card del regolamento (e delle
   altre pagine lunghe, vedi ".rivelabile" in app.js) partono leggermente
   sfumate e si scoprono quando entrano nello schermo scorrendo verso il
   basso — e sfumano di nuovo quando escono scorrendo verso l'alto, perche'
   e' una transizione (reversibile) e non un'animazione a comparsa sola.
   app.js accende ".in-vista" con un IntersectionObserver: qui sta solo il
   prima/dopo. Scoperto solo dentro #v-lega e sulle pagine lunghe elencate,
   non sul Listone/l'Asta — li' il tabellone si ridisegna in continuazione
   durante un'asta vera, ed e' l'ultimo posto dove serve un'altra cosa che si
   muove. */
.rivelabile { opacity:0; transform:translateY(24px);
              transition:opacity .8s cubic-bezier(.16,.68,.28,1),
                         transform .8s cubic-bezier(.16,.68,.28,1); }
.rivelabile.in-vista { opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce) {
  .rivelabile { opacity:1; transform:none; transition:none; }
}

/* ---------------------------------------------------------------------------
   IL BOTTONE ACCESO, NEL REGOLAMENTO
   Una spunta scelta (Singola/Multipla, Sequenza libera/fissa, un modulo, un
   preset...) deve dirsi ancora attiva anche a occhio distratto — ma con un
   bagliore sfumato, morbido, non un anello netto: piu' sfocatura (il terzo
   valore del box-shadow) e meno opacita' di picco, spalmata su un respiro
   piu' lungo. Scoperto solo dentro #v-lega: le stesse classi (.pastiglia.on,
   per esempio) vivono anche nel Listone, dove un filtro che pulsa in
   continuazione sarebbe solo rumore. */
@keyframes pulsa-selezione {
  0%   { box-shadow:0 0 0 0 rgba(122,184,245,.32); }
  50%  { box-shadow:0 0 10px 2px rgba(122,184,245,.22); }
  100% { box-shadow:0 0 17px 4px rgba(122,184,245,0); }
}
/* Il preset e' il bottone pieno blu-petrolio/verde qui sopra: un bagliore
   dello stesso azzurro sparirebbe contro il proprio riempimento scuro. Usa
   invece il verde del piede — lo stesso testo del bottone — che risalta
   sia sul pannello chiaro che su quello scuro. In scuro lo stesso verde
   diventa il linguaggio di OGNI bottone cliccato del sito, non solo del
   regolamento — la stessa pulsazione, non un'altra per ogni angolo
   dell'app. */
@keyframes pulsa-marchio {
  0%   { box-shadow:0 0 0 0 rgba(126,231,135,.38); }
  50%  { box-shadow:0 0 11px 2px rgba(126,231,135,.26); }
  100% { box-shadow:0 0 18px 5px rgba(126,231,135,0); }
}
/* Le due regole sotto — chiaro e scuro — hanno apposta la stessa forma
   "body[data-tema=X] #v-lega ..." anche dove l'una potrebbe fare a meno di
   #v-lega: un ID scritto da una parte sola vince sempre sulle classi,
   qualunque cosa scriva l'altra regola, ed e' esattamente il modo in cui
   la prima versione di questa regola si era rotta (il verde restava scritto
   ma l'azzurro, con l'ID dalla sua, continuava a vincere). Stessa forma,
   stessa specificita': a decidere e' l'ultima regola scritta, come deve. */
body[data-tema="chiaro"] #v-lega .regolamento-voce.on,
body[data-tema="chiaro"] #v-lega .scelta-card.on,
body[data-tema="chiaro"] #v-lega .pastiglia.on {
  animation:pulsa-selezione 3.2s ease-in-out infinite;
}
body[data-tema="chiaro"] #v-lega button.act.ghost[data-preset].on {
  animation:pulsa-marchio 2.8s ease-in-out infinite;
}
/* Non solo il bagliore: in scuro la cella cliccata prende lo stesso
   riempimento del preset — blu petrolio pieno, testo verde — al posto
   dell'azzurro chiaro dell'accento. .pastiglia.ruolo.on resta fuori
   apposta: li' il colore e' il ruolo (portiere/difesa/...), un dato, non
   un semplice "questo e' scelto". */
body[data-tema="scuro"] #v-lega .regolamento-voce.on,
body[data-tema="scuro"] #v-lega .scelta-card.on,
body[data-tema="scuro"] #v-lega .pastiglia.on,
body[data-tema="scuro"] nav.viste button.on,
body[data-tema="scuro"] .team-pills .pill.sel,
body[data-tema="scuro"] .admin-tabs button.on {
  background:var(--marchio); color:var(--verde); border-color:var(--marchio);
}
body[data-tema="scuro"] nav.viste button.on:hover,
body[data-tema="scuro"] .team-pills .pill.sel:hover,
body[data-tema="scuro"] #v-lega .scelta-card.on:hover {
  background:var(--marchio); border-color:var(--marchio);
}
body[data-tema="scuro"] #v-lega .regolamento-voce.on,
body[data-tema="scuro"] #v-lega .scelta-card.on,
body[data-tema="scuro"] #v-lega .pastiglia.on,
body[data-tema="scuro"] .pastiglia.ruolo.on,
body[data-tema="scuro"] nav.viste button.on,
body[data-tema="scuro"] .team-pills .pill.sel,
body[data-tema="scuro"] .admin-tabs button.on,
body[data-tema="scuro"] #v-lega button.act.ghost[data-preset].on {
  animation:pulsa-marchio 2.8s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce) {
  body[data-tema="chiaro"] #v-lega .regolamento-voce.on,
  body[data-tema="chiaro"] #v-lega .scelta-card.on,
  body[data-tema="chiaro"] #v-lega .pastiglia.on,
  body[data-tema="chiaro"] #v-lega button.act.ghost[data-preset].on,
  body[data-tema="scuro"] #v-lega .regolamento-voce.on,
  body[data-tema="scuro"] #v-lega .scelta-card.on,
  body[data-tema="scuro"] #v-lega .pastiglia.on,
  body[data-tema="scuro"] .pastiglia.ruolo.on,
  body[data-tema="scuro"] nav.viste button.on,
  body[data-tema="scuro"] .team-pills .pill.sel,
  body[data-tema="scuro"] .admin-tabs button.on,
  body[data-tema="scuro"] #v-lega button.act.ghost[data-preset].on { animation:none; }
}


/* ---------------------------------------------------------------------------
   GLI STEMMI
   Piccoli per obbligo, non per timidezza: nel tabellone l'altezza e' il
   vincolo che decide se tutte le squadre ci stanno in una schermata, e uno
   stemma che allargasse l'intestazione costerebbe una colonna fuori campo.
   Sedici pixel bastano a distinguere dieci immagini scelte da dieci persone
   diverse — che e' tutto quello che devono fare.
--------------------------------------------------------------------------- */
/* Un titolo che e' una porta: la freccia lo dice prima del click, e si sposta
   quando ci passi sopra — l'unico modo di far vedere che porta da qualche
   parte senza aggiungere la parola "vai" accanto a un titolo di due parole. */
h2.verso { display:inline-flex; align-items:center; gap:6px; cursor:pointer;
           border-radius:6px; padding:2px 7px; margin-left:-7px;
           transition:color .12s, background .12s; }
h2.verso:hover { color:var(--acc); background:var(--hover); }
h2.verso:focus-visible { outline:2px solid var(--acc); outline-offset:1px; }
h2.verso .freccia { width:13px; height:13px; flex:none; fill:none; stroke:currentColor;
                    stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
                    opacity:.6; transition:transform .12s, opacity .12s; }
h2.verso:hover .freccia { opacity:1; transform:translateX(2px); }

/* Sfondo del ritaglio mentre l'immagine carica (o se manca): var(--campo-bg)
   e non un esadecimale fisso, o in tema chiaro resta un riquadro scuro sopra
   un pannello bianco per tutta la durata del caricamento — vedi la stessa
   correzione su .lgp_voce qui sopra, stesso difetto. */
.stemma { border-radius:4px; object-fit:cover; flex:none; background:var(--campo-bg); }
.stemma.riga { width:16px; height:16px; margin-right:5px; vertical-align:-3px; }
.stemma.carta { width:34px; height:34px; border-radius:7px; }
.mini .stemma.riga { width:14px; height:14px; margin-right:4px; }

/* Il santino: un ritratto, non uno stemma - angoli arrotondati come una
   figurina, non un cerchio. object-fit:cover ritaglia da solo il rettangolo
   originale (piu' alto che largo) centrato sul volto. */
.santino { border-radius:22%; object-fit:cover; flex:none; background:var(--campo-bg); }
.santino.riga { width:44px; height:44px; margin-right:9px; vertical-align:-14px; border-radius:20%; }
.santino.carta { width:56px; height:56px; margin-right:10px; vertical-align:-15px; }
.mini .santino.riga { width:22px; height:22px; margin-right:5px; vertical-align:-6px; border-radius:18%; }

/* Sul telefono la riga del listone diventa una scheda con piu' aria: il
   santino puo' crescere ancora senza stringere il nome. */
@media (max-width:640px) {
  .pg h3 .santino.riga { width:58px; height:58px; margin-right:10px; vertical-align:-18px; }
}

/* La riga del listone puo' andare a capo sotto il santino grande: le
   pastiglie dei contrassegni (rigorista, goleador...) non devono spingere la
   colonna a scorrere in orizzontale solo perche' il ritratto adesso occupa
   piu' spazio. */
#t_listone td:has(> img.santino.riga) { white-space:normal; line-height:1.6; }

/* Il ritratto grande accanto alla descrizione, nel corpo della scheda: qui
   non e' un'icona incollata al nome ma una vera illustrazione, alla pari del
   testo che le sta a fianco. */
.santino.desc { width:120px; height:120px; border-radius:16px; flex:none; }
@media (max-width:640px) { .santino.desc { width:88px; height:88px; border-radius:14px; } }

.lega-card .testa { display:flex; align-items:center; gap:10px; }

/* ---- il riquadro da cui si carica ----
   Il bersaglio e' l'anteprima stessa: un pulsante "Sfoglia" accanto a un
   quadrato vuoto sarebbero due cose dove ne basta una, e il quadrato vuoto
   sarebbe comunque la prima su cui si prova a cliccare. */
.stemma-riga { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.stemma-box { position:relative; flex:none; }
.stemma-pesca { display:grid; place-items:center; width:44px; height:44px;
                margin:0; border:1px dashed var(--line); border-radius:9px;
                background:var(--campo-bg); cursor:pointer; overflow:hidden; }
.stemma-pesca:hover { border-color:var(--acc); }
.stemma-pesca.pieno { border-style:solid; }
.stemma-pesca img { width:100%; height:100%; object-fit:cover; display:block; }
.stemma-pesca .vuoto { color:var(--dim); display:grid; place-items:center; }
.stemma-pesca .vuoto .ico { width:18px; height:18px; }
/* La croce per togliere sta sull'angolo dell'anteprima: e' un gesto raro, e
   una riga di testo sotto ogni squadra per un gesto raro e' venti righe di
   testo in piu' in una pagina che si scorre. */
.stemma-via { position:absolute; top:-6px; right:-6px; width:18px; height:18px;
              border-radius:50%; border:1px solid var(--line); background:var(--panel);
              color:var(--dim); font-size:13px; line-height:1; cursor:pointer;
              padding:0; display:grid; place-items:center; }
.stemma-via:hover { color:var(--bad-text); border-color:var(--bad); }

/* Il ritratto nella pagina del profilo. Il riquadro e' lo stesso degli stemmi
   — l'anteprima e' il bersaglio — ma tondo e piu' grande: e' quello che si
   vedra' in alto a destra, e mostrarlo quadrato qui sarebbe una promessa
   sbagliata. Il contenitore non ha classe .stemma-box apposta: le deleghe
   degli stemmi cercano quella per sapere quale slot stanno cambiando, e qui
   di slot non ce n'e' nessuno. */
.foto-riga { display:flex; align-items:center; gap:14px; margin-top:16px; }
.foto-box { position:relative; flex:none; }
.stemma-pesca.ritratto { width:56px; height:56px; border-radius:50%; }
.stemma-pesca.ritratto img { border-radius:50%; }
.stemma-pesca .vuoto.iniziali { color:var(--dim); font-size:15px; font-weight:700;
                                letter-spacing:.5px; }

/* La riga di una squadra nel regolamento: stemma e nome affiancati, perche'
   sono la stessa cosa detta in due modi. */
.squadra-riga .riga-corpo { display:flex; align-items:center; gap:9px; }
.squadra-riga .riga-corpo input { flex:1; min-width:0; }
.squadra-riga .stemma-pesca { width:36px; height:36px; border-radius:8px; }

/* ---------------------------------------------------------------------------
   L'AVVISO RAPIDO DI ASSEGNAZIONE
   Sta al centro, in alto, e vive poco: e' la voce del banditore, non un
   pannello da leggere. Il cognome e' acceso, la squadra in verde, e sparisce
   da solo prima che qualcuno pensi di doverlo chiudere.
--------------------------------------------------------------------------- */
/* Al centro dello schermo, non piu' appiccicato in alto: e' l'annuncio del
   banditore, e per un istante deve prendersi tutta l'attenzione. */
#toast_assegnazione { position:fixed; top:50%; left:50%; z-index:300; pointer-events:none;
                      transform:translate(-50%,-50%) scale(.85);
                      opacity:0; transition:opacity .3s, transform .3s; }
#toast_assegnazione.on { opacity:1; transform:translate(-50%,-50%) scale(1); }
.toast-card { display:flex; flex-direction:column; align-items:center; gap:12px; }
/* Il bagliore e' un cerchio sfocato dietro la faccia, che pulsa piano: dice
   "questo qui" senza bisogno di una freccia o di una scritta in più. */
.toast-foto-wrap { position:relative; display:flex; align-items:center; justify-content:center; }
.toast-foto-wrap::before {
  content:""; position:absolute; inset:-46px; border-radius:50%;
  background:radial-gradient(circle, rgba(120,205,255,.6), rgba(120,205,255,0) 70%);
  animation:toast-bagliore 1.3s ease-in-out infinite alternate;
}
.toast-foto-wrap .santino.toast-foto { position:relative; width:150px; height:150px;
  border-radius:22px; box-shadow:0 12px 40px rgba(0,0,0,.6), 0 0 0 3px rgba(255,255,255,.18); }
@keyframes toast-bagliore { from { opacity:.55; transform:scale(.94); } to { opacity:1; transform:scale(1.04); } }
@media (prefers-reduced-motion:reduce) { .toast-foto-wrap::before { animation:none; } }
@media (max-width:480px) {
  .toast-foto-wrap .santino.toast-foto { width:104px; height:104px; border-radius:16px; }
  .toast-foto-wrap::before { inset:-30px; }
}
.toast-testo { background:#0e2735; border:1px solid var(--good);
              border-radius:10px; padding:10px 16px; font-size:14.5px;
              box-shadow:0 6px 24px rgba(0,0,0,.45);
              white-space:nowrap; display:flex; align-items:center; gap:6px; }
.toast-nome { font-weight:800; color:var(--ink); }
.toast-squadra { font-weight:800; color:var(--good-text); }
.toast-prezzo { color:var(--dim); font-size:12.5px; font-variant-numeric:tabular-nums; }
.toast-prezzo::before { content:"· "; }

/* ---------------------------------------------------------------------------
   ASSEGNARE DAL PANNELLO DELLA SQUADRA
   La sezione sta sotto i reparti chiusi e sopra i pulsanti: e' l'ultimo
   gesto che quel pannello offre, e lo separa un filo dal resto.
--------------------------------------------------------------------------- */
.tb-assegna { margin-top:16px; padding-top:12px; border-top:1px solid var(--line); }
.tb-assegna h3 { margin:0 0 8px; font-size:12px; color:var(--dim);
                text-transform:uppercase; letter-spacing:.6px; font-weight:600; }
.tb-assegna .filters > div { min-width:0; }
.tb-assegna #tb_sugg { margin-top:6px; }

/* ---------------------------------------------------------------------------
   LE NOTIZIE DI INFORTUNIO, NEL COMPRATO E IN FONDO ALLA SCHEDA
   Il pannello e' un posto di lavoro: la notizia sta in una msg ambra come
   tutte le cautele del gestionale, e ogni voce porta il collegamento alla
   fonte, perche' una notizia senza fonte e' una diceria.
--------------------------------------------------------------------------- */
.bbnews { margin-top:6px; }
.voce-news { display:block; margin-top:5px; line-height:1.35; }
.voce-news a { font-weight:600; }
#sh_news { margin-top:12px; }

/* ---- rassegna stampa generale (news_feed.py, Google News) ----
   Il trafiletto sotto "Che cosa farà": due righe al massimo, tagliate dal
   CSS e non dal testo, cosi' un titolo corto non lascia una riga vuota e uno
   lungo non trabocca. Il tab "Notizie" e' un elenco piu' disteso: li' lo
   spazio non e' un problema, si legge tutto il titolo. */
.news-teaser { margin:2px 0 14px; font-size:12.5px; line-height:1.4;
               display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
               overflow:hidden; }
.news-teaser a { color:var(--ink); font-weight:600; }
.news-lista { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.news-lista li { line-height:1.4; padding-left:8px; }
.news-lista a { display:block; font-weight:600; font-size:13px; }
.news-lista .mut { font-size:11.5px; }
/* Una notizia che parla di salute non e' una notizia come le altre durante
   un'asta: un bordo arancione a sinistra la separa dalle altre tre con la
   coda dell'occhio, e il bollino dice perche' senza dover leggere il
   titolo intero. Stesso arancione di `--warn`, coerente col resto del
   gestionale (indisponibilita', reparti che si stanno per chiudere...). */
.news-lista li.sospetta { border-left:2px solid var(--warn); padding-left:8px; margin-left:-8px; }
.news-teaser.sospetta { border-left:2px solid var(--warn); padding-left:8px; margin-left:-8px; }
.news-bollino { display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase;
                letter-spacing:.3px; color:var(--warn-text); border:1px solid var(--warn);
                border-radius:3px; padding:1px 5px; margin:0 6px 3px 0; vertical-align:middle; }
.news-bollino.tab { text-transform:none; font-size:10.5px; font-weight:600; margin-left:6px; }