/* Calciatori — dal prototipo approvato (calciatori_parti.html) */

/* ═══ CALCIATORI · primo livello: l'album delle figurine ═══ */
/* ★ 20/10/2026 (audit, R14): il titolo della sezione (icona, h1, sottotitolo) lo scrive il guscio, css/ndc.css */
.titolo-sezione h1{ font-size:clamp(var(--c-dato), 8vw, var(--c-grande)) }   /* in questa pagina il titolo cresce un po' prima */
.conti{ display:flex; gap:22px; align-items:baseline; margin-left:auto }
.conti span{ font:600 var(--c-nota) var(--f-cifre); letter-spacing:.06em; text-transform:uppercase; color:var(--grigio) }
.conti b{ display:block; font:900 var(--c-titolo)/1 var(--f-titolo); color:var(--inchiostro); letter-spacing:.01em }
/* le otto viste: primo livello, come in Campionati */
.viste8{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); margin-top:14px; border-bottom:2px solid var(--inchiostro) }
.viste8 button{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px 9px; border:0; background:none; color:var(--grigio);
  font:700 var(--c-testo)/1.05 var(--f-titolo); text-transform:uppercase; letter-spacing:.03em; cursor:pointer; box-shadow:inset 0 -5px 0 transparent; text-align:center }
.viste8 button svg{ width:26px; height:26px }
.viste8 button[aria-selected="true"]{ color:var(--inchiostro); box-shadow:inset 0 -5px 0 var(--verdetto) }
.viste8 button:hover{ color:var(--inchiostro) }
/* le cinque categorie */
.cat5{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border:2px solid var(--inchiostro); margin-top:12px }
.cat5 button{ display:grid; gap:2px; text-align:left; padding:8px 12px 10px; border:0; border-right:1px solid var(--filetto); background:var(--carta); color:var(--inchiostro); cursor:pointer; min-width:0 }
.cat5 button:last-child{ border-right:0 }
.cat5 b{ font:700 var(--c-testo)/1.05 var(--f-titolo); text-transform:uppercase; letter-spacing:.03em; color:var(--grigio) }
.cat5 .n{ font:900 var(--c-sottotitolo)/1 var(--f-titolo) } .cat5 .n small{ display:block; font:600 var(--c-etichetta) var(--f-cifre); color:var(--grigio); margin-top:2px }
.cat5 button[aria-selected="true"]{ background:var(--velo); box-shadow:inset 0 -5px 0 var(--verdetto) }
.cat5 button[aria-selected="true"] b{ color:var(--inchiostro) }
.strumenti{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:14px 0 4px }
.strumenti .filtro input{ border:0; background:none; color:var(--inchiostro); font:600 var(--c-testo) var(--f-testo); width:16ch; outline:none }
.strumenti .filtro.interr{ cursor:pointer } .strumenti .filtro.interr[aria-pressed="true"]{ border:2px solid var(--inchiostro); background:var(--velo); font-weight:700 }
.apri-filtri-p{ display:none }
.conta{ font:600 var(--c-nota) var(--f-cifre); color:var(--grigio) } .conta b{ font:900 var(--c-titoletto) var(--f-titolo); color:var(--inchiostro) }
.legenda-ruoli{ display:flex; flex-wrap:wrap; gap:6px 16px; font:600 var(--c-nota) var(--f-cifre); color:var(--grigio); margin-top:12px }
.legenda-ruoli i{ display:inline-block; width:14px; height:14px; margin-right:6px; vertical-align:-2px; background:var(--r) }
/* ★ 23/10/2026 (critica: «presenzegol», «vinta da luiparipersa da lui»): la legenda dei grafici e dei V·N·P (.legenda-vnp, la stessa di
     Allenatori e Arbitri) qui non aveva lo stile: voci attaccate e senza quadratini. Il calco di allenatori/allenatori.css */
.legenda-vnp{ display:flex; flex-wrap:wrap; gap:6px 16px; font:600 var(--c-nota) var(--f-cifre); color:var(--grigio); margin-top:12px }
.legenda-vnp i{ display:inline-block; width:14px; height:14px; margin-right:6px; vertical-align:-2px }
/* la figurina */
.album{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr)); gap:12px; margin-top:16px }
.fig{ display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:0 14px 12px; border:1px solid var(--filetto); background:var(--carta); color:var(--inchiostro); text-align:left; cursor:pointer; font:inherit; min-width:0; position:relative }
.fig::before{ content:''; grid-column:1/-1; height:6px; margin:0 -14px 8px; background:var(--r) }
.fig:hover,.fig:focus-visible{ border-color:var(--inchiostro); outline:none }
.fig .ruolo{ grid-column:1/-1; display:flex; align-items:center; gap:8px; font:600 var(--c-etichetta) var(--f-cifre); letter-spacing:.08em; text-transform:uppercase; color:var(--grigio) }
.fig .ruolo b{ display:inline-flex; width:24px; height:24px; align-items:center; justify-content:center; background:var(--r); color:#fff; font:900 var(--c-nota) var(--f-titolo) }
.fig .ruolo .azz{ margin-left:auto; color:var(--inchiostro); font-weight:600; white-space:nowrap }
.fig .ruolo .stella:only-of-type{ margin-left:auto }
.fig .nome{ grid-column:1; grid-row:3; display:block; min-width:0; font:900 var(--c-titoletto)/1.05 var(--f-titolo); text-transform:uppercase; letter-spacing:.01em }
.fig .chi{ grid-column:1; grid-row:4; font-size:var(--c-nota); color:var(--grigio); display:flex; flex-wrap:wrap; gap:0 8px; align-items:baseline }
.fig .chi b{ font:600 var(--c-testo) var(--f-cifre); color:var(--inchiostro); white-space:nowrap }
/* ★ 09/10/2026 (regola A): nome e stagioni della figurina sono veri link (nuova scheda, link condiviso): l'aspetto resta quello di prima */
.fig a.nome{ color:inherit; text-decoration:none }
.fig a.nome:hover,.fig .chi a.st:hover{ text-decoration:underline }
.fig .chi a.st{ color:inherit; text-decoration:none }
.fig .num{ grid-column:2; grid-row:3/5; align-self:center; text-align:right; font:900 var(--c-titolo)/.85 var(--f-titolo) }
.fig .num small{ display:block; max-width:9ch; margin-left:auto; font:600 var(--c-etichetta) var(--f-cifre); letter-spacing:.02em; text-transform:uppercase; color:var(--grigio); margin-top:4px }
.fig .stella{ border:0; margin-left:6px; background:none; font-size:var(--c-evidenza); line-height:1; cursor:pointer; color:var(--grigio); padding:4px }
.fig .stella[aria-pressed="true"]{ color:var(--verdetto) }
.piede-album{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center; margin-top:18px }
.vuoto{ border:1px dashed var(--filetto); padding:28px; font-size:var(--c-testo); color:var(--grigio); margin-top:24px }
.vuoto h2{ color:var(--inchiostro); margin:0 0 8px } .vuoto ul{ margin:10px 0 0; padding-left:22px; color:var(--inchiostro) }
/* la scheda */
#p-gioc{ top:50%; left:50%; transform:translate(-50%,-50%); width:min(720px,calc(100vw - 24px)); max-height:88vh; padding:0 }
#p-gioc .fascia{ height:10px; background:var(--r) }
#p-gioc .corpo-s{ padding:16px 22px 22px; display:grid; gap:12px }
#p-gioc .corpo-s > div:first-child{ padding-right:56px }   /* l'intestazione non finisce sotto la X */
#p-gioc h2{ font:900 var(--c-titolo)/.95 var(--f-titolo); text-transform:uppercase; margin:0 }
#p-gioc h4{ margin:6px 0 0; font:600 var(--c-nota) var(--f-cifre); letter-spacing:.1em; text-transform:uppercase; color:var(--grigio); border-bottom:2px solid var(--inchiostro); padding-bottom:4px }
#p-gioc .riq{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px }
#p-gioc .riq div{ border:1px solid var(--filetto); padding:10px 12px; display:grid; gap:2px }
#p-gioc .riq span{ font:600 var(--c-etichetta) var(--f-cifre); letter-spacing:.06em; text-transform:uppercase; color:var(--grigio) }
#p-gioc .riq b{ font:900 var(--c-titolo)/1 var(--f-titolo); color:var(--c, var(--inchiostro)) }
#p-gioc .riq small{ font-size:var(--c-nota); color:var(--grigio) }
#p-gioc .azioni{ display:flex; gap:10px; flex-wrap:wrap; margin-top:4px }
#p-gioc .azioni a.primo{ background:var(--velo); border:2px solid var(--inchiostro); font-weight:700 }
@media (max-width:900px){ .viste8{ grid-template-columns:repeat(2,minmax(0,1fr)) }   /* ★ 09/10 (C.7): 4, 2 o 1 colonne, mai 3 */ .conti{ margin-left:0; width:100% } }
@media (max-width:760px){
  .titolo-sezione h1{ font-size:var(--c-dato) } .titolo-sezione svg{ width:42px; height:42px }
  /* ★ 09/10 (C.7): due colonne, mai tre; la quinta categoria prende tutta l'ultima riga (niente riquadro orfano) */
  .cat5{ grid-template-columns:repeat(2,minmax(0,1fr)) } .cat5 button:nth-child(2n){ border-right:0 } .cat5 button:nth-child(-n+4){ border-bottom:1px solid var(--filetto) } .cat5 button:last-child:nth-child(odd){ grid-column:span 2 }
  .strumenti .filtro{ display:none } .strumenti.aperta .filtro{ display:inline-flex; width:100% } .strumenti.aperta .filtro select,.strumenti.aperta .filtro input{ flex:1 }
  .strumenti .filtro.sempre{ display:inline-flex } .apri-filtri-p{ display:inline-flex }
  .album{ grid-template-columns:1fr }
  #p-gioc h2{ font-size:var(--c-sottotitolo) } #p-gioc .riq b{ font-size:var(--c-sottotitolo) }
  #p-gioc .corpo-s{ padding:14px 14px 18px } #p-gioc .riq{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px }
}
/* ★ 20/10/2026 (audit R7): «Ordina per» ha l'etichetta SOPRA il menu su tutto il telefono, come nel resto del sito (l'inline-flex qui sopra
   la teneva a fianco e la spezzava su due righe: «ORDINA / PER»). La griglia e il resto li dà la regola `.filtro:has(> select)` del guscio. */
@media (max-width:480px){ .strumenti .filtro.sempre:has(> small + select){ display:inline-grid } }
/* ★ 06/10 collaudo (segnalazione di chi scrive l'Aiuto): «Centrocampista», «Attaccante» nel corpo dei numeri uscivano dal
     riquadro «Ruolo» della scheda breve e coprivano quello accanto: le parole (classe testo) hanno un corpo più piccolo e vanno a capo */
#p-gioc .riq > div{ min-width:0 }
#p-gioc .riq b.testo{ font-size:var(--c-titoletto); line-height:1.15; overflow-wrap:normal; word-break:normal; hyphens:none }
#p-gioc .riq > div.lungo{ grid-column:span 2 }   /* ★ 17/10/2026: un valore lungo prende due colonne, mai sovrapposto */
/* ★ 07/10/2026 sera (collaudo, contrasto 2,42): la «P» bianca sul giallo oro del portiere non si leggeva. Sul fondo chiaro del
     ruolo la lettera è scura (regola madre: fondo chiaro → carattere scuro), nei due temi */
.fig[style*="#c9a227"] .ruolo b,.tab-cv .rl[style*="#c9a227"]{ color:#15171b }
/* ★ 14/10/2026 (Fabio, 10/10: «i testi si sovrappongono»): a 320 px il luogo di nascita che non andava a capo («Casale Monferrato»,
     184 px) allargava la colonna del nome oltre la figurina, e il numero («2 presenze») usciva di 5 px dal riquadro. La colonna del
     nome sta nella figurina (minmax 0) e il luogo va a capo FRA le parole; la data, che non ha spazi, resta intera. */
.fig{ grid-template-columns:minmax(0,1fr) auto }
.fig .chi b{ white-space:normal }

/* ★ 20/10/2026 (audit della grafica, R4): sul telefono la stellina ☆ ha un'area di tocco di 44 × 44 px (--tocco-min) senza allargare la figurina */
@media (max-width:760px){ .fig .stella{ position:relative } .fig .stella::after{ content:""; position:absolute; left:50%; top:50%; width:max(100%, var(--tocco-min)); height:max(100%, var(--tocco-min)); transform:translate(-50%,-50%) } }
/* ★ 23/10/2026 (P2, decisione di Fabio «scheda subito»): il nome è il link alla scheda e la sua area copre tutta la figurina (un vero
     link: nuova scheda col tasto centrale, indirizzo da copiare); la stella, la stagione e gli altri link dentro stanno sopra e fanno il loro */
.fig a.nome::after{ content:""; position:absolute; inset:0 }
.fig a:not(.nome),.fig button{ position:relative; z-index:1 }
.fig:has(a.nome:focus-visible){ border-color:var(--inchiostro) }