/* ndc.css — tema, gettoni e guscio del sito nuovo (dai prototipi approvati, 03/10/2026) */
/* i nove gradini dei corpi: _fonte/scala_corpi.py */
:root{ --c-etichetta:13px; --c-nota:15px; --c-testo:18px; --c-evidenza:20px; --c-titoletto:24px; --c-sottotitolo:30px; --c-titolo:40px; --c-dato:56px; --c-grande:88px; --c-minimo:13px; --c-minimo-campetto:12px; --c-tela-lettura:540px; }

/* Tabellone: carta e inchiostro su gabbia a 12 colonne; un solo gesto monumentale per pagina,
   un solo rosso-verdetto; i colori sociali solo dentro i grafici. */
:root{
  --carta:#ffffff; --inchiostro:#15171b; --grigio:#5d6370; --filetto:#d8dbe0; --velo:#f2f3f5;
  --verdetto:#c8102e;
  --casa:#8e1f2f; --casa-2:#f0bc42; --ospite:#1d2a44; --ospite-2:#2a5cba;
  --campo:#eef1ec; --campo-riga:#c9d1c6;
  --f-titolo:"Big Shoulders Display","Oswald","Arial Narrow",sans-serif;
  --f-testo:"Source Serif 4",Georgia,"Times New Roman",serif;
  --f-cifre:"JetBrains Mono","SFMono-Regular",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --carta:#111317; --inchiostro:#eceef2; --grigio:#a2a8b4; --filetto:#2c3038; --velo:#1a1d22;
  --verdetto:#ff4b5c; --casa:#c2475a; --ospite:#6f8fd4; --campo:#18201a; --campo-riga:#2f3d31; color-scheme:dark}}
:root[data-theme="dark"]{
  --carta:#111317; --inchiostro:#eceef2; --grigio:#a2a8b4; --filetto:#2c3038; --velo:#1a1d22;
  --verdetto:#ff4b5c; --casa:#c2475a; --ospite:#6f8fd4; --campo:#18201a; --campo-riga:#2f3d31; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--carta);color:var(--inchiostro);font:var(--c-testo)/1.55 var(--f-testo);margin:0}
.pagina{max-width:1180px;margin:0 auto;padding-inline:20px;padding-block:calc(20px + env(safe-area-inset-top,0px)) 60px}
a{color:inherit;text-decoration-color:var(--filetto);text-underline-offset:3px}
a:hover{text-decoration-color:var(--inchiostro)}
a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--verdetto);outline-offset:2px}
.cifre{font-family:var(--f-cifre);font-variant-numeric:tabular-nums}
.etichetta{font:600 var(--c-nota)/1.3 var(--f-cifre);letter-spacing:.08em;text-transform:uppercase;color:var(--grigio)}
h2{font:700 clamp(var(--c-sottotitolo), 4vw, var(--c-titolo))/1 var(--f-titolo);text-transform:uppercase;letter-spacing:.01em;margin:0;text-wrap:balance}
.sezione{border-top:2px solid var(--inchiostro);padding-top:14px;margin-top:56px;display:grid;gap:22px}
.sezione>header{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.invito{font:italic var(--c-evidenza)/1.5 var(--f-testo);color:var(--grigio);max-width:62ch;margin:0}
/* barra */
.barra{display:flex;gap:8px;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--filetto);padding-bottom:12px}
.barra a,.barra button{font:600 var(--c-testo) var(--f-cifre);letter-spacing:.04em;text-transform:uppercase;background:none;border:1px solid var(--filetto);color:var(--inchiostro);padding:8px 12px;cursor:pointer;text-decoration:none}
.barra .vuoto{flex:1}
/* apertura */
.apertura{display:grid;gap:18px;padding-top:26px}
.occhiello{display:flex;gap:18px;flex-wrap:wrap}
.tabellone{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(8px,2vw,28px)}
.squadra{display:grid;gap:10px;justify-items:center;text-align:center;min-width:0}
.squadra img{height:clamp(56px,9vw,104px);width:auto;max-width:100%;object-fit:contain}
.tabellone .squadra{align-self:start}
.squadra .nome{font:900 clamp(var(--c-sottotitolo), 5vw, var(--c-dato))/.9 var(--f-titolo);text-transform:uppercase}
.punteggio{font:900 clamp(110px, 22vw, 260px)/.8 var(--f-titolo);letter-spacing:-.02em;display:flex;align-items:center;gap:.08em}
.punteggio .trattino{font-weight:500;color:var(--grigio)}
.punteggio .verdetto{color:var(--verdetto)}
.pt{text-align:center}
.marcatori{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.marcatori ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.marcatori .ospite{text-align:right}
.marcatori li{font-size:var(--c-titoletto)}
.marcatori .min{font:600 var(--c-evidenza) var(--f-cifre)}
.marcatori .assist{color:var(--grigio);font-size:var(--c-testo);font-style:italic}
.lede{font:400 clamp(var(--c-titoletto), 2.2vw, var(--c-titoletto))/1.5 var(--f-testo);max-width:60ch;margin:4px 0 0}
.lede strong{font-weight:600}
.notizie{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));border-top:1px solid var(--filetto)}
.notizie div{padding:12px 14px 12px 0;display:grid;gap:4px;min-width:0;border-bottom:1px solid var(--filetto)}
.notizie .v{font-size:var(--c-testo)}
.spiega{font-size:var(--c-testo);color:var(--grigio);line-height:1.4}
/* tessuto minuto per minuto */
.tessuto{display:grid;gap:12px}
.tempo-riga{display:grid;grid-template-columns:repeat(auto-fill,minmax(19px,1fr));gap:3px}
.minuto{aspect-ratio:1/1.6;background:var(--filetto);position:relative;display:grid;place-items:center;font:600 var(--c-etichetta) var(--f-cifre);color:transparent}
.minuto.recupero{background:repeating-linear-gradient(135deg,var(--filetto) 0 3px,transparent 3px 6px);outline:1px solid var(--filetto)}
.minuto.gol-casa{background:var(--casa);color:#fff}
.minuto.gol-ospite{background:var(--verdetto);color:#fff}
.minuto.cambio{box-shadow:inset 0 -4px 0 var(--grigio)}
.minuto.decina{color:var(--grigio)}
.minuto.scelto{outline:2px solid var(--inchiostro);outline-offset:1px}
.minuto-info{margin:0;font:600 var(--c-testo) var(--f-cifre);min-height:1.6em}
.minuto{cursor:pointer}
.campo .maglia{cursor:pointer}
.legenda{display:flex;gap:18px;flex-wrap:wrap;font-size:var(--c-testo);color:var(--grigio)}
.legenda i{display:inline-block;width:14px;height:20px;vertical-align:-4px;margin-right:6px;background:var(--filetto)}
/* duelli */
.duelli{display:grid;gap:10px}
.duello{display:grid;grid-template-columns:4ch 1fr minmax(120px,22ch) 1fr 4ch;align-items:center;gap:12px}
.duello .lab{text-align:center;display:grid;gap:2px}
.duello .lab b{font:600 var(--c-testo) var(--f-testo)}
.duello .lab span{font-size:var(--c-nota);color:var(--grigio);line-height:1.3}
.duello .n{font:600 var(--c-evidenza) var(--f-cifre);text-align:center}
.barre-l,.barre-r{height:14px;background:var(--velo);display:flex}
.barre-l{justify-content:flex-end}
.barre-l i{background:var(--casa)} .barre-r i{background:var(--ospite-2)}
.duello.forte .n{font-size:var(--c-titoletto)}
/* formazioni */
.due{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.campo-box{display:grid;gap:10px;min-width:0}
.campo-testa{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.campo-testa h3{font:700 var(--c-sottotitolo)/1 var(--f-titolo);text-transform:uppercase;margin:0}
.campo-testa .modulo{font:600 var(--c-titoletto) var(--f-cifre)}
svg.campo{width:100%;max-width:520px;height:auto;display:block;margin-inline:auto}
.campo .erba{fill:var(--campo)} .campo .righe{fill:none;stroke:var(--campo-riga);stroke-width:.5}
.campo .nome-g{font:700 3.4px var(--f-testo);fill:var(--inchiostro);text-anchor:middle;paint-order:stroke;stroke:var(--campo);stroke-width:1.1px;stroke-linejoin:round}
.campo .segno{font:700 3.6px var(--f-cifre)}
.campo .num{font:700 4.2px var(--f-cifre);text-anchor:middle}
.nota-campo{font-size:var(--c-testo);color:var(--grigio)}
.strumenti-campo{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:var(--c-testo)}
.strumenti-campo select{font:var(--c-testo) var(--f-testo);padding:6px;background:var(--carta);color:var(--inchiostro);border:1px solid var(--filetto)}
/* elenco giocatori */
table{border-collapse:collapse;width:100%}
.elenco th{font:600 var(--c-nota) var(--f-cifre);letter-spacing:.08em;text-transform:uppercase;color:var(--grigio);text-align:left;border-bottom:1px solid var(--inchiostro);padding:6px 6px}
.elenco td{border-bottom:1px solid var(--filetto);padding:8px 6px;vertical-align:baseline}
.elenco td.n{font:600 var(--c-testo) var(--f-cifre);width:3.2ch;text-align:right;color:var(--grigio)}
.elenco td.r{font-size:var(--c-testo);color:var(--grigio)}
.elenco td.e{font:var(--c-testo) var(--f-cifre);white-space:nowrap}
.elenco td.ev{font:600 var(--c-testo) var(--f-cifre);white-space:nowrap;text-align:right}
.elenco .sotto{font:700 var(--c-evidenza) var(--f-titolo);text-transform:uppercase;padding-top:18px;border-bottom:1px solid var(--inchiostro)}
.panchina{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:var(--c-testo)}
.panchina span .cifre{color:var(--grigio);margin-right:4px}
.allenatore{font-size:var(--c-evidenza)}
.medie{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--filetto);border:1px solid var(--filetto)}
.medie>div{background:var(--carta);padding:14px;display:grid;gap:6px}
.medie .grande{font:700 clamp(var(--c-sottotitolo), 3.6vw, var(--c-titolo))/1 var(--f-titolo)}
.medie .grande small{font:400 var(--c-testo) var(--f-testo);color:var(--grigio)}
/* cambi */
.cambi{list-style:none;margin:0;padding:0;display:grid}
.cambi li{display:grid;grid-template-columns:5ch 9ch 1fr;gap:12px;border-bottom:1px solid var(--filetto);padding:8px 0;align-items:baseline}
.cambi .chi{font:700 var(--c-testo) var(--f-cifre);text-transform:uppercase;letter-spacing:.06em}
.cambi .out{color:var(--grigio)}
/* statistiche */
.possesso{display:grid;gap:8px}
.possesso .barra-p{display:flex;height:34px;font:700 var(--c-testo) var(--f-cifre);color:#fff}
.possesso .barra-p span{display:flex;align-items:center;padding:0 10px}
.note-stat{font-size:var(--c-testo);color:var(--grigio);display:grid;gap:2px}
/* migliori */
.migliori td,.migliori th{padding:8px 6px;border-bottom:1px solid var(--filetto);vertical-align:baseline}
.migliori th{font:600 var(--c-nota) var(--f-cifre);letter-spacing:.08em;text-transform:uppercase;color:var(--grigio);text-align:left;border-bottom:1px solid var(--inchiostro)}
.migliori td.v{font:600 var(--c-testo) var(--f-cifre);text-align:right;width:4ch}
.migliori td.voce{font-weight:600}
.migliori td.chi{font-size:var(--c-testo)}
.tabella-scorre{overflow-x:auto}
/* precedenti */
.bilancio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--filetto);border:1px solid var(--filetto)}
.bilancio div{background:var(--carta);padding:14px;text-align:center;display:grid;gap:4px}
.bilancio b{font:900 clamp(var(--c-titolo), 6vw, var(--c-grande))/1 var(--f-titolo)}
.prec{list-style:none;margin:0;padding:0;columns:2 320px;column-gap:28px}
.prec li{break-inside:avoid;display:grid;grid-template-columns:11ch 1fr auto;gap:10px;border-bottom:1px solid var(--filetto);padding:6px 0;font-size:var(--c-testo)}
.prec .data{font:var(--c-testo) var(--f-cifre);color:var(--grigio)}
.prec .ris{font:600 var(--c-testo) var(--f-cifre)}
pre.tabellino{white-space:pre-wrap;font:var(--c-testo)/1.6 var(--f-cifre);background:var(--velo);padding:16px;margin:0;overflow-x:auto}
.fonti{font-size:var(--c-testo);color:var(--grigio);border-top:1px solid var(--filetto);padding-top:12px;margin-top:40px}
details.ingredienti{border:1px solid var(--filetto);padding:12px 16px}
details.ingredienti summary{cursor:pointer;font:600 var(--c-testo) var(--f-cifre);text-transform:uppercase;letter-spacing:.06em}
details.ingredienti ul{columns:2 300px;font-size:var(--c-testo);padding-left:18px}
@media (max-width:760px){
  body{font-size:var(--c-testo)}
  .due,.marcatori{grid-template-columns:1fr}
  .marcatori .ospite{text-align:left}
  .duello{grid-template-columns:3.5ch 1fr 1fr 3.5ch;row-gap:4px;column-gap:6px}
  .duello .lab{grid-column:1/-1;grid-row:1}
  .medie{grid-template-columns:1fr}
  .cambi li{grid-template-columns:4ch 7ch 1fr}
  .tempo-riga{grid-template-columns:repeat(auto-fill,minmax(14px,1fr))}
}
@media (prefers-reduced-motion:no-preference){
  .minuto.gol-casa,.minuto.gol-ospite{animation:accendi .6s ease-out both}
  @keyframes accendi{from{filter:brightness(1.6)}to{filter:none}}
}

/* ═══ IL GUSCIO: testata · binario laterale · testa della pagina · tab · filtri · pannelli · barra in basso ═══ */
[hidden]{ display:none !important }
:root{ --scala:1; --binario:252px; --testata:64px; --accento-nav:var(--inchiostro) }
:root[data-theme="notte"]{ --carta:#000000; --inchiostro:#f2f3f5; --grigio:#a7adb8; --filetto:#24272d; --velo:#0d0f12;
  --verdetto:#ff4b5c; --casa:#c2475a; --ospite:#6f8fd4; --campo:#0b120d; --campo-riga:#26332a; color-scheme:dark }
body{ margin:0 }
.app{ display:grid; grid-template-columns:var(--binario) minmax(0,1fr); grid-template-rows:var(--testata) auto; min-height:100vh }
.app.stretto{ --binario:76px }
/* testata */
.testata{ grid-column:1/-1; position:sticky; top:env(safe-area-inset-top,0px); z-index:30; display:flex; align-items:center; gap:14px;
  padding-inline:16px; background:var(--carta); border-bottom:2px solid var(--inchiostro) }
.marchio{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--inchiostro); flex:none }   /* il marchio non si taglia mai: cede la ricerca */
.marchio svg{ width:30px; height:30px; flex:none }
.marchio b{ font:900 var(--c-titoletto)/1 var(--f-titolo); text-transform:uppercase; letter-spacing:.01em; white-space:nowrap }
.marchio b span{ color:var(--verdetto) }
.cerca{ flex:1; min-width:0; max-width:560px; margin-inline:auto; display:flex; align-items:center; gap:8px; border:1px solid var(--filetto); padding:0 12px; height:44px; background:var(--carta) }
.cerca svg{ width:20px; height:20px; color:var(--grigio); flex:none }
.cerca input{ flex:1; min-width:0; border:0; background:none; color:var(--inchiostro); font:var(--c-testo) var(--f-testo); outline:none }
@media (max-width:1000px){ .cerca kbd{ display:none } }
.cerca kbd{ font:var(--c-etichetta) var(--f-cifre); color:var(--grigio); border:1px solid var(--filetto); padding:1px 6px }
.azioni-testata{ display:flex; gap:6px; align-items:center }
.tasto{ display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 14px; border:1px solid var(--filetto); background:var(--carta);
  color:var(--inchiostro); font:600 var(--c-nota) var(--f-cifre); letter-spacing:.04em; text-transform:uppercase; cursor:pointer; text-decoration:none }
.tasto svg{ width:20px; height:20px }
.tasto.pieno{ background:var(--velo); color:var(--inchiostro); border:2px solid var(--inchiostro); font-weight:700 }
.tasto.icona{ width:44px; padding:0; justify-content:center }
.tasto:hover{ border-color:var(--inchiostro) }
/* binario laterale */
.binario{ position:sticky; top:calc(var(--testata) + env(safe-area-inset-top,0px)); height:calc(100vh - var(--testata)); overflow-y:auto;
  border-right:1px solid var(--filetto); padding:14px 10px 24px; display:flex; flex-direction:column; gap:18px }
.gruppo{ display:grid; gap:2px }
.gruppo h3{ margin:0 0 4px 10px; font:600 var(--c-etichetta) var(--f-cifre); letter-spacing:.1em; text-transform:uppercase; color:var(--grigio) }
.voce{ display:flex; align-items:center; gap:12px; padding:9px 10px; color:var(--inchiostro); text-decoration:none; font:600 var(--c-testo) var(--f-testo); border-left:4px solid transparent }
.voce svg{ width:24px; height:24px; flex:none }
.voce:hover{ background:var(--velo) }
.voce.attiva{ border-left-color:var(--inchiostro); background:var(--velo); font-weight:700 }
.app.stretto .voce span,.app.stretto .gruppo h3{ display:none }
.app.stretto .voce{ justify-content:center; padding:10px 0 }
.comprimi{ margin-top:auto; justify-content:flex-start }
/* corpo */
.corpo{ min-width:0; zoom:var(--scala) }
.testa-pagina{ max-width:1180px; margin:0 auto; padding:16px 20px 0; display:grid; gap:14px }
.percorso{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; font:var(--c-nota) var(--f-cifre); color:var(--grigio) }
.percorso a{ color:var(--grigio) } .percorso b{ color:var(--inchiostro); font-weight:600 }
.riga-azioni{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.riga-azioni .spazio{ flex:1 }
/* tab: UN solo componente per tutto il sito */
.tab{ display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--filetto); scroll-snap-type:x proximity;
  mask-image:linear-gradient(90deg,#000 92%,transparent) }
.tab::-webkit-scrollbar{ display:none }
.tab a{ flex:none; scroll-snap-align:start; padding:10px 14px 12px; font:700 var(--c-evidenza)/1 var(--f-titolo); text-transform:uppercase; letter-spacing:.02em;
  color:var(--grigio); text-decoration:none; border-bottom:4px solid transparent; margin-bottom:-1px }
.tab a:hover{ color:var(--inchiostro) }
.tab a[aria-current="page"]{ color:var(--inchiostro); border-bottom-color:var(--inchiostro) }
/* filtri: UN solo componente */
.filtri{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.filtro{ display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 12px; border:1px solid var(--filetto); background:var(--carta); color:var(--inchiostro); font:var(--c-testo) var(--f-testo); cursor:pointer }
.filtro small{ font:600 var(--c-etichetta) var(--f-cifre); letter-spacing:.08em; text-transform:uppercase; color:var(--grigio) }
.filtro select{ border:0; background:none; color:var(--inchiostro); font:600 var(--c-testo) var(--f-testo); padding-right:2px; cursor:pointer }
.filtro.attivo{ border-color:var(--inchiostro) }
.apri-filtri{ display:none }
/* pannelli */
.velo-scuro{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:40 }
.pannello{ position:fixed; z-index:41; background:var(--carta); color:var(--inchiostro); border:2px solid var(--inchiostro); box-shadow:0 18px 40px rgba(0,0,0,.25); display:grid; gap:16px; padding:20px; overflow-y:auto }
.pannello h2{ font-size:var(--c-sottotitolo) }
.pannello .chiudi{ position:absolute; top:12px; right:12px }
#p-aspetto{ top:calc(var(--testata) + 8px); right:16px; width:min(420px,calc(100vw - 32px)) }
#p-aiuto{ top:0; right:0; bottom:0; width:min(480px,100vw); border-width:0 0 0 2px }
#p-accedi{ top:50%; left:50%; transform:translate(-50%,-50%); width:min(440px,calc(100vw - 32px)) }
#p-menu{ inset:0; border:0; padding-top:calc(20px + env(safe-area-inset-top,0px)); padding-bottom:calc(90px + env(safe-area-inset-bottom,0px)) }
#p-filtri{ left:0; right:0; bottom:0; max-height:85vh; border-width:2px 0 0 }
.scelte{ display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:8px }
.scelta{ display:grid; gap:6px; justify-items:center; padding:12px 8px; border:1px solid var(--filetto); background:var(--carta); color:var(--inchiostro); cursor:pointer; font:var(--c-nota) var(--f-testo) }
.scelta[aria-pressed="true"]{ border:2px solid var(--inchiostro); font-weight:700 }
.campione{ width:46px; height:30px; border:1px solid var(--filetto) }
.scelta .aa{ font:700 var(--f-titolo); line-height:1 }
.campo-modulo{ display:grid; gap:6px } .campo-modulo label{ font:600 var(--c-etichetta) var(--f-cifre); letter-spacing:.08em; text-transform:uppercase; color:var(--grigio) }
.campo-modulo input{ height:46px; border:1px solid var(--filetto); background:var(--carta); color:var(--inchiostro); font:var(--c-testo) var(--f-testo); padding:0 12px }
.passi{ margin:0; padding-left:22px; display:grid; gap:10px; font-size:var(--c-testo) }
.livelli{ display:grid; gap:6px; font-size:var(--c-testo) } .livelli div{ display:flex; justify-content:space-between; border-bottom:1px solid var(--filetto); padding:6px 0 }
.mappa{ display:grid; gap:22px }
.mappa .gruppo{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px }
.mappa .gruppo h3{ grid-column:1/-1; display:block !important; margin:0 0 2px; padding-bottom:6px; border-bottom:2px solid var(--inchiostro); font:800 var(--c-testo) var(--f-cifre); letter-spacing:.1em; color:var(--inchiostro) }   /* ★ 02/10 (Fabio): nel Menu del telefono i gruppi si vedono (la regola sotto i 1100 px li nascondeva anche qui) */
.tessera{ display:grid; gap:8px; padding:14px; border:1px solid var(--filetto); text-decoration:none; color:var(--inchiostro); font:600 var(--c-testo) var(--f-testo) }
.tessera svg{ width:30px; height:30px }
.tessera[aria-current="page"]{ border:2px solid var(--inchiostro) }
/* barra in basso (telefono) */
.barra-basso{ display:none }
@media (max-width:1100px){ .app{ --binario:76px } .voce span,.gruppo h3{ display:none } .voce{ justify-content:center; padding:10px 0 } .comprimi{ display:none } }
@media (max-width:760px){
  .app{ grid-template-columns:minmax(0,1fr); grid-template-rows:56px auto }
  .testata{ height:56px; gap:8px; padding-inline:12px }
  .marchio b{ font-size:var(--c-titoletto) }
  .cerca{ display:none }
  .solo-largo{ display:none }
  .binario{ display:none }
  .corpo{ padding-bottom:calc(84px + env(safe-area-inset-bottom,0px)) }
  .testa-pagina{ padding:12px 16px 0 }
  .filtri .filtro{ display:none }
  .apri-filtri{ display:inline-flex }
  .riepilogo-filtri{ font-size:var(--c-testo); color:var(--grigio) }
  .barra-basso{ display:grid; grid-template-columns:repeat(5,1fr); position:fixed; left:0; right:0; bottom:0; z-index:35; background:var(--carta);
    border-top:2px solid var(--inchiostro); padding-bottom:env(safe-area-inset-bottom,0px) }
  .barra-basso a,.barra-basso button{ display:grid; justify-items:center; gap:3px; padding:8px 2px 9px; background:none; border:0; color:var(--grigio);
    font:600 var(--c-etichetta) var(--f-cifre); letter-spacing:.03em; text-transform:uppercase; text-decoration:none; cursor:pointer }
  .barra-basso svg{ width:26px; height:26px }
  .barra-basso [aria-current="page"]{ color:var(--inchiostro); box-shadow:inset 0 3px 0 var(--inchiostro) }
}
@media (min-width:761px){ #p-filtri{ display:none } .riepilogo-filtri{ display:none } }

/* tab delle competizioni: quattro celle, tre con menu */
.tab-comp{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:2px solid var(--inchiostro); margin-top:14px }
.tab-comp .tc{ display:grid; gap:2px; align-content:center; padding:8px 14px 10px; border:0; border-right:1px solid var(--filetto); background:var(--carta); color:var(--inchiostro); text-align:left; cursor:pointer; min-width:0; position:relative }
.tab-comp .tc:last-child{ border-right:0 }
.tab-comp .tc small{ font:600 var(--c-etichetta) var(--f-cifre); letter-spacing:.08em; text-transform:uppercase; color:var(--grigio) }
.tab-comp .tc b,.tab-comp .tc select{ font:700 var(--c-titoletto)/1.1 var(--f-titolo); text-transform:uppercase; letter-spacing:.02em; color:var(--inchiostro) }
.tab-comp .tc select{ border:0; background:none; padding:0 18px 0 0; width:100%; min-width:0; cursor:pointer; appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%); background-size:6px 6px; background-position:calc(100% - 9px) 55%,calc(100% - 3px) 55%; background-repeat:no-repeat; text-overflow:ellipsis }
.tab-comp .tc[aria-selected="true"]{ background:var(--velo); box-shadow:inset 0 -5px 0 var(--inchiostro) }
.tab-comp .tc[aria-selected="false"] select{ color:var(--grigio) }
@media (max-width:760px){
  .tab-comp{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .tab-comp .tc:nth-child(2){ border-right:0 }
  .tab-comp .tc:nth-child(-n+2){ border-bottom:1px solid var(--filetto) }
  .tab-comp .tc b,.tab-comp .tc select{ font-size:var(--c-evidenza) }
}

/* ★ il menu laterale si apre e si chiude dal tasto in testata (Fabio, 01/10: «non ho visto come si attiva la sidebar») */
.app.home .apri-binario{ display:none }
.voce[data-tit]{ position:relative }
@media (max-width:1100px){
  .app.aperto .binario{ position:fixed; left:0; top:calc(var(--testata) + env(safe-area-inset-top,0px)); bottom:0; width:280px; z-index:39; background:var(--carta);
    border-right:2px solid var(--inchiostro); box-shadow:12px 0 30px rgba(0,0,0,.18) }
  .app.aperto .voce span,.app.aperto .gruppo h3{ display:revert }
  .app.aperto .voce{ justify-content:flex-start; padding:9px 10px }
}
@media (max-width:760px){ .apri-binario{ display:none } }

@media (max-width:760px){ :root{ --testata:56px } }
/* la barra si attacca all'intestazione senza fessure: si legge come un blocco unico */
.barra-basso{ box-shadow:0 1px 0 var(--filetto) }

/* ★★ DECISIONE DI FABIO (01/10): «barra in alto assolutamente». Niente barra laterale: le 5 voci
   (Home · Partite · Campionati · Squadre · Menu) stanno in alto sotto l'intestazione su ogni schermo più largo
   di un telefono, e in basso sotto il pollice sul telefono. Il Menu apre tutte le altre sezioni. */
.binario,.apri-binario{ display:none !important }
.app{ grid-template-columns:minmax(0,1fr) !important }
@media (min-width:521px){
  .app{ grid-template-rows:var(--testata) auto auto }
  .app .barra-basso{ display:flex !important; position:sticky !important; top:calc(var(--testata) + env(safe-area-inset-top,0px)) !important; bottom:auto !important; left:auto; right:auto;
    z-index:29; background:var(--carta); border-top:0 !important; border-bottom:1px solid var(--filetto); padding:0 16px !important; gap:4px; grid-column:1/-1 }
  .app .barra-basso a,.app .barra-basso button{ display:flex; align-items:center; gap:10px; padding:12px 16px 13px; background:none; border:0; border-bottom:4px solid transparent; box-shadow:none;
    color:var(--grigio); font:700 var(--c-testo) var(--f-titolo); text-transform:uppercase; letter-spacing:.02em; text-decoration:none; cursor:pointer }
  .app .barra-basso svg{ width:24px; height:24px }
  .app .barra-basso [aria-current="page"]{ color:var(--inchiostro); border-bottom-color:var(--inchiostro); box-shadow:none }
  .app .barra-basso a:hover,.app .barra-basso button:hover{ color:var(--inchiostro) }
  .app .barra-basso button[data-apri]{ margin-left:auto }
  .app .corpo{ padding-bottom:0 !important }
}
/* fra il telefono e il tablet le cinque voci in riga non ci stanno: l'icona va sopra la scritta (si stringe il disegno, non il testo) */
@media (min-width:521px) and (max-width:760px){
  .app .barra-basso{ display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; padding:0 8px !important }
  .app .barra-basso a,.app .barra-basso button{ flex-direction:column; justify-content:center; gap:3px; padding:8px 2px 7px; white-space:nowrap }
  .app .barra-basso button[data-apri]{ margin-left:0 }
}
/* ★★ IL 1945-46 SI SCEGLIE, E VALE PER TUTTI GLI AMBIENTI (Fabio, 01/10/2026): calcolati tutti e due i
   conteggi; di serie quello senza il 1945-46. ⚠️ MAI «ufficiali»: il 1945-46 è ufficiale (Fabio, 01/10). Una sola impostazione, ricordata come il tema. */
.st .chi,.lato,.club .testa > span{ min-width:0 }
/* ★★ LA CARD INTRODUTTIVA (ingrediente del sito: ogni ambiente ne ha una all'ingresso, js/landing-data.js).
   Un componente solo per tutti: il numero dell'archivio, un record in grande, tre caselle, cosa si trova, «Cerca». */
#p-intro{ top:50%; left:50%; transform:translate(-50%,-50%); width:min(1000px,calc(100vw - 24px)); padding:0; max-height:92vh; overflow:auto }
/* ★★ «I TOP» È UN'INFOGRAFICA (Fabio, 02/10/2026: «una grafica tipica da infografica… così da spezzare un attimo ed avere un
     collegamento virtuale con il magazine»). Il QUADRANTE al centro porta il record dell'ambiente; intorno i numeri top,
     ciascuno legato al quadrante dal suo filo rosso col pallino; sotto la stagione in corso e la firma. Colori del tema. */
#p-intro .info-i{ padding:26px 30px 24px; display:grid; gap:18px; background:var(--carta); color:var(--inchiostro) }
#p-intro .info-testa{ text-align:center; padding:0 46px }
#p-intro .info-testa .occhiello{ display:inline-flex; gap:8px; align-items:center; font:700 var(--c-nota) var(--f-cifre); letter-spacing:.14em; text-transform:uppercase; color:var(--verdetto) }
#p-intro .info-testa .occhiello svg{ width:20px; height:20px }
#p-intro .info-testa h2{ margin:4px 0 0; font:900 clamp(var(--c-titolo), 6vw, var(--c-dato))/.92 var(--f-titolo); text-transform:uppercase; letter-spacing:-.01em }
#p-intro .info-testa p{ margin:8px auto 0; max-width:60ch; font:600 var(--c-testo)/1.3 var(--f-testo); color:var(--grigio) }
#p-intro .info-campo{ display:grid; grid-template-columns:minmax(0,1fr) 300px minmax(0,1fr); gap:0 36px; align-items:center }
#p-intro .info-col{ display:flex; flex-direction:column; gap:20px }
#p-intro .info-col.sx{ text-align:right }
#p-intro .call{ position:relative; display:grid; gap:2px }
#p-intro .call b{ font:900 var(--c-titolo)/.9 var(--f-titolo); font-variant-numeric:tabular-nums }
#p-intro .call span{ font:600 var(--c-etichetta)/1.25 var(--f-cifre); letter-spacing:.05em; text-transform:uppercase; color:var(--grigio) }
#p-intro .call em{ font-style:normal; font:700 var(--c-testo)/1.2 var(--f-testo) }
/* il filo rosso e il pallino, verso il quadrante */
#p-intro .call::after{ content:''; position:absolute; top:20px; width:26px; border-top:2px solid var(--verdetto) }
#p-intro .call::before{ content:''; position:absolute; top:16px; width:9px; height:9px; border-radius:50%; background:var(--verdetto) }
#p-intro .sx .call::after{ right:-34px } #p-intro .sx .call::before{ right:-38px }
#p-intro .dx .call::after{ left:-34px } #p-intro .dx .call::before{ left:-38px }
#p-intro .quadrante{ position:relative; width:300px; height:330px; justify-self:center }
#p-intro .quadrante svg.qd{ position:absolute; inset:0; width:100%; height:100% }
#p-intro .quadrante .cuore{ position:absolute; left:0; right:0; top:84px; display:grid; justify-items:center; text-align:center; gap:2px; padding:0 52px }
#p-intro .quadrante .cuore svg{ width:56px; height:56px; color:var(--verdetto) }   /* ★ Fabio, 02/10: «un po' più grande l'icona interna» */
#p-intro .quadrante .cuore b{ font:900 72px/.85 var(--f-titolo) }
#p-intro .quadrante .cuore span{ font:600 var(--c-etichetta)/1.2 var(--f-cifre); letter-spacing:.06em; text-transform:uppercase; color:var(--grigio) }
#p-intro .quadrante .cuore em{ font-style:normal; font:700 var(--c-testo)/1.15 var(--f-testo); overflow-wrap:normal; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
/* l'oggetto dell'ambiente (pallone, fischietto, lavagna, scudo, coppa) e sotto il record */
#p-intro .oggetto{ width:300px; justify-self:center; display:grid; justify-items:center; gap:8px; text-align:center }
#p-intro .oggetto .ogg-svg{ width:250px; height:250px } #p-intro .oggetto .ogg-svg svg{ width:100%; height:100% }
#p-intro .ogg-fatto{ display:grid; gap:2px } #p-intro .ogg-fatto b{ font:900 72px/.85 var(--f-titolo) }
#p-intro .ogg-fatto span{ font:600 var(--c-etichetta)/1.2 var(--f-cifre); letter-spacing:.06em; text-transform:uppercase; color:var(--verdetto) } #p-intro .ogg-fatto em{ font-style:normal; font:700 var(--c-testo)/1.2 var(--f-testo) }
/* ★ 02/10/2026 (Fabio: «i filtri devono avere il tasto di chiusura e apertura… sì anche su desktop»): in TUTTI gli
     ambienti e a TUTTE le larghezze i filtri stanno chiusi dietro il loro tasto; restano fuori solo quelli `.sempre`
     (ordinamento, e in Partite stagione e giornate, che servono a muoversi). */
.apri-filtri-p{ display:inline-flex !important }
.apri-filtri-p::after{ content:'▾'; margin-left:6px; font-size:var(--c-nota) }
.aperta > .apri-filtri-p::after{ content:'· chiudi ▴' }
.strumenti:not(.aperta) .filtro:not(.sempre),.barra-filtri:not(.aperta) .filtro:not(.sempre){ display:none !important }
/* la linguetta «I top» accanto al titolo grande */
.tasto-top{ display:inline-flex; align-items:center; gap:8px; border:2px solid var(--inchiostro); background:var(--carta); color:var(--inchiostro); padding:8px 16px; cursor:pointer; font:800 var(--c-testo) var(--f-cifre); letter-spacing:.1em; text-transform:uppercase }
.tasto-top svg{ width:22px; height:22px; color:var(--verdetto) } .tasto-top i{ font-style:normal; color:var(--verdetto); font-size:var(--c-evidenza) }
.tasto-top:hover,.tasto-top:focus-visible{ box-shadow:inset 0 -4px 0 var(--verdetto); outline:none }
/* ★ 02/10/2026 (Fabio: «allinealo sempre a destra e non attaccato all'etichetta»): la linguetta sta in fondo alla riga
     del titolo, a qualunque larghezza; e l'icona resta piccola (le pagine ingrandiscono ogni svg della testata) */
.titolo-sezione{ flex-wrap:wrap }
.titolo-sezione .conti{ margin-left:auto !important; width:auto !important; justify-content:flex-end; align-self:center }
.titolo-sezione .tasto-top svg{ width:22px !important; height:22px !important }
/* ★ 02/10/2026 (Fabio: «sullo smartphone fai un tab più piccolo e riduci il carattere dell'etichetta dell'ambiente,
     così da stare su una riga»): sul telefono titolo e linguetta su UNA riga; il titolo si stringe quanto serve (adattaTitolo) */
@media (max-width:760px){
  .titolo-sezione{ flex-wrap:nowrap !important; gap:10px !important }
  .titolo-sezione > svg{ width:30px !important; height:30px !important; flex:none }
  .titolo-sezione h1{ white-space:nowrap; flex:none }
  .titolo-sezione .conti{ flex:none }
  .tasto-top{ padding:5px 9px; gap:5px; font-size:var(--c-etichetta); letter-spacing:.06em }
  .titolo-sezione .tasto-top svg{ width:16px !important; height:16px !important } .tasto-top i{ font-size:var(--c-nota) }
}
#p-intro .info-corso{ border-top:2px solid var(--inchiostro); padding-top:12px; display:grid; gap:10px }
#p-intro .info-corso h3{ margin:0; font:700 var(--c-nota) var(--f-cifre); letter-spacing:.12em; text-transform:uppercase; color:var(--verdetto) }
#p-intro .info-corso .voci{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px }
#p-intro .info-corso .voci div{ display:grid; gap:2px } #p-intro .info-corso b{ font:900 var(--c-titolo)/.9 var(--f-titolo) }
#p-intro .info-corso span{ font:600 var(--c-etichetta) var(--f-cifre); letter-spacing:.05em; text-transform:uppercase; color:var(--grigio) } #p-intro .info-corso em{ font-style:normal; font:700 var(--c-testo) var(--f-testo) }
#p-intro .info-piede{ display:grid; gap:10px; justify-items:center; text-align:center }
#p-intro .info-piede .righe{ width:100%; height:6px; border-top:2px solid var(--verdetto); border-bottom:2px solid var(--verdetto) }
#p-intro .info-piede .firma{ font:700 var(--c-nota) var(--f-cifre); letter-spacing:.06em }
#p-intro .info-piede .spiega{ margin:0 }
#p-intro details{ font-size:var(--c-testo); color:var(--grigio) } #p-intro summary{ cursor:pointer; font-weight:600; color:var(--inchiostro) }
#p-intro .tasto.primo{ background:var(--velo); border:2px solid var(--inchiostro); font-weight:700 }
@media (max-width:760px){
  #p-intro{ left:10px !important; right:10px !important; top:10px !important; transform:none !important; width:auto !important; max-height:calc(100vh - 20px) }
  #p-intro .info-i{ padding:18px 14px } #p-intro .info-testa{ padding:0 40px }
  #p-intro .info-campo{ grid-template-columns:1fr 1fr; gap:16px 14px }
  #p-intro .quadrante{ grid-column:1/-1; grid-row:1; width:260px; height:286px }
  #p-intro .oggetto{ grid-column:1/-1; grid-row:1; width:auto } #p-intro .oggetto .ogg-svg{ width:190px; height:190px } #p-intro .ogg-fatto b{ font-size:58px }
  #p-intro .quadrante .cuore{ top:70px; padding:0 46px } #p-intro .quadrante .cuore svg{ width:44px; height:44px } #p-intro .quadrante .cuore b{ font-size:56px } #p-intro .quadrante .cuore em{ font-size:var(--c-nota) }
  #p-intro .info-col{ display:contents } #p-intro .info-col.sx .call{ text-align:left }
  #p-intro .call::after,#p-intro .call::before{ display:none } #p-intro .call{ border-left:3px solid var(--verdetto); padding-left:8px }
  #p-intro .call b{ font-size:var(--c-titolo) }
}
.apri-intro{ border:1px solid var(--filetto); background:var(--carta); color:var(--grigio); font:600 var(--c-etichetta) var(--f-cifre); letter-spacing:.06em; text-transform:uppercase; padding:5px 10px; cursor:pointer }
/* le pagine NON hanno l'interruttore (Fabio: «scelta di sistema, non nel merito dell'ambiente»): dicono solo quale conteggio usano */
.dice45{ font:600 var(--c-nota) var(--f-cifre); color:var(--grigio) }
.dice45 b{ color:var(--inchiostro) }
.dice45 button{ border:0; background:none; padding:0; font:inherit; color:var(--inchiostro); text-decoration:underline; text-underline-offset:3px; cursor:pointer }
.conteggio{ display:inline-flex; border:1px solid var(--inchiostro); align-items:stretch; background:var(--carta) }
.conteggio small{ align-self:center; padding:0 10px; font:600 var(--c-etichetta) var(--f-cifre); letter-spacing:.08em; text-transform:uppercase; color:var(--grigio) }
.conteggio button{ border:0; border-left:1px solid var(--filetto); background:var(--carta); color:var(--grigio); font:700 var(--c-testo) var(--f-titolo); text-transform:uppercase; letter-spacing:.03em; padding:10px 14px; cursor:pointer }
.conteggio button[aria-pressed="true"]{ background:var(--velo); color:var(--inchiostro); box-shadow:inset 0 -4px 0 var(--inchiostro) }

/* ═══ HOME · il timone ═══ */
.selettori{ display:flex; gap:0; flex-wrap:wrap; border:2px solid var(--inchiostro); width:fit-content; max-width:100% }
.selettori .sel{ display:inline-flex; align-items:center; gap:8px; height:52px; padding:0 20px; border:0; border-right:1px solid var(--filetto); background:var(--carta); color:var(--inchiostro);
  font:700 var(--c-evidenza) var(--f-titolo); text-transform:uppercase; letter-spacing:.02em; cursor:pointer }
.selettori .sel:last-child{ border-right:0 }
.selettori .sel[aria-selected="true"]{ background:var(--velo); box-shadow:inset 0 -5px 0 var(--inchiostro) }
.sel-coppe select{ font:600 var(--c-testo) var(--f-testo); border:1px solid var(--filetto); background:var(--carta); color:var(--inchiostro); height:36px; padding:0 6px; cursor:pointer }
.stemma-svg{ width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; color:var(--inchiostro); flex:none }
.stemma-svg svg{ height:32px; width:auto }
.lato .senza{ display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--filetto); font:700 var(--c-testo) var(--f-titolo); color:var(--grigio) }
@media (max-width:760px){ .selettori{ width:100% } .selettori .sel{ flex:1 1 40%; justify-content:center; padding:0 8px; font-size:var(--c-evidenza); white-space:nowrap } .selettori .sel.sel-coppe{ flex:1 1 100%; border-right:0; border-top:1px solid var(--filetto); justify-content:flex-start; padding:0 12px } .sel-coppe select{ flex:1; min-width:0; height:40px } }
.movimento{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,4vw,56px); padding-top:10px }
.turno{ display:grid; gap:14px; align-content:start }
.turno-testa{ display:flex; gap:16px; align-items:flex-end; border-bottom:2px solid var(--inchiostro); padding-bottom:10px }
.numero-turno{ font:900 clamp(var(--c-grande), 12vw, 150px)/.78 var(--f-titolo); letter-spacing:-.02em }
.numero-turno.verdetto{ color:var(--verdetto) }
.giorno-turno{ display:grid; gap:4px }
.risultati li .r.ora{ font-weight:600; color:var(--grigio) }
.risultati li a.r{ text-decoration:none; border:1px solid var(--filetto) }
@media (max-width:760px){ .movimento{ grid-template-columns:1fr } }
.interruttore{ display:none }
@media (max-width:760px){
  .interruttore{ display:grid; grid-template-columns:1fr 1fr; border:2px solid var(--inchiostro); margin-top:10px }
  .interruttore button{ height:50px; border:0; background:var(--carta); color:var(--inchiostro); font:700 var(--c-testo) var(--f-titolo); text-transform:uppercase; letter-spacing:.02em; cursor:pointer }
  .interruttore button[aria-selected="true"]{ background:var(--velo); box-shadow:inset 0 -5px 0 var(--inchiostro) }
  .movimento[data-vista="ult"] .turno[data-t="pro"], .movimento[data-vista="pro"] .turno[data-t="ult"]{ display:none }
  .lato b{ font-size:var(--c-evidenza) } .cifra{ font-size:var(--c-titolo) } .numero-turno{ font-size:110px }
}
.tessere-partite{ display:grid; gap:10px }
.tessera-partita{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; gap:6px 14px; align-items:center;
  padding:12px 16px 12px 14px; border:1px solid var(--filetto); border-left:3px solid var(--inchiostro); text-decoration:none; color:var(--inchiostro); background:var(--carta);
  transition:transform .15s ease, box-shadow .15s ease }
.tessera-partita:hover{ transform:translateY(-2px); box-shadow:0 8px 0 -4px var(--filetto); border-color:var(--inchiostro) }
.riga-tp{ display:contents }
.lato{ display:flex; align-items:center; gap:12px; min-width:0 }
.lato .fascia{ width:7px; height:30px; flex:none; outline:1px solid var(--filetto) }
.lato img,.lato .senza{ width:32px; height:32px; object-fit:contain; flex:none }
.lato b{ font:600 var(--c-titoletto)/1.1 var(--f-testo); white-space:nowrap; overflow:hidden }   /* niente puntini: autocompattamento (guscio) */
.lato.vince b{ font-weight:800 } .lato.perde b{ color:var(--grigio) }
.cifra{ font:900 var(--c-titolo)/1 var(--f-titolo); min-width:1ch; text-align:right; display:inline-block }
.tessera-partita.prossima{ grid-template-columns:minmax(0,1fr) auto }
.tessera-partita.prossima .riga-tp .lato{ grid-column:1 }
.ora-tp{ grid-column:2; grid-row:1/3; font:700 var(--c-sottotitolo)/1 var(--f-cifre); align-self:center; padding-left:14px; border-left:1px solid var(--filetto) }
@media (prefers-reduced-motion:no-preference){
  .cifra{ animation:compone .5s cubic-bezier(.2,.8,.2,1) both }
  @keyframes compone{ from{ transform:translateY(-60%); opacity:0; filter:blur(3px) } to{ transform:none; opacity:1; filter:none } }
}
.gesto-oggi{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(16px,3vw,40px); align-items:end; padding-top:18px }
.numero-oggi{ font:900 clamp(120px, 20vw, 240px)/.78 var(--f-titolo); letter-spacing:-.02em }
.numero-oggi + div{ display:grid; gap:10px; padding-bottom:10px }
.dida-oggi{ font:700 clamp(var(--c-titoletto), 3vw, var(--c-sottotitolo))/1.1 var(--f-titolo); text-transform:uppercase; margin:0; text-wrap:balance }
.scegli-data{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; font-size:var(--c-testo) }
.scegli-data select{ height:42px; font:600 var(--c-testo) var(--f-testo); border:1px solid var(--filetto); background:var(--carta); color:var(--inchiostro); padding:0 8px }
.stoffa{ display:grid; gap:10px }
.stoffa-riga{ display:grid; grid-template-columns:9ch minmax(0,1fr); gap:12px; align-items:center }
.stoffa-riga .anno{ font:600 var(--c-nota) var(--f-cifre); color:var(--grigio) }
.celle{ display:flex; flex-wrap:wrap; gap:4px }
.cella{ width:26px; height:34px; border:2px solid var(--inchiostro); cursor:pointer; background:var(--carta); padding:0 }
.cella.v1{ background:var(--inchiostro) }
.cella.x{ background:repeating-linear-gradient(90deg,var(--inchiostro) 0 2px,transparent 2px 6px) }
.cella.scelta{ outline:3px solid var(--verdetto); outline-offset:1px }
.legenda-stoffa{ display:flex; gap:20px; flex-wrap:wrap; font-size:var(--c-testo); color:var(--grigio) }
.legenda-stoffa i{ display:inline-block; width:16px; height:22px; border:2px solid var(--inchiostro); vertical-align:-5px; margin-right:6px }
.tre{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px }
.elenco-breve{ list-style:none; margin:0; padding:0; display:grid }
.elenco-breve li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; border-bottom:1px solid var(--filetto); padding:9px 0; font-size:var(--c-testo) }
.elenco-breve li small{ display:block; font-size:var(--c-nota); color:var(--grigio) }
.elenco-breve .cifre{ font-size:var(--c-testo); color:var(--grigio); white-space:nowrap }
.campionato-corso{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:32px }
.classifica td,.classifica th{ padding:7px 6px; border-bottom:1px solid var(--filetto); text-align:right; font:var(--c-testo) var(--f-cifre) }
.classifica th{ font:600 var(--c-etichetta) var(--f-cifre); letter-spacing:.08em; text-transform:uppercase; color:var(--grigio); border-bottom:1px solid var(--inchiostro) }
.classifica td.sq,.classifica th.sq{ text-align:left; font:600 var(--c-testo) var(--f-testo) }
.classifica td.pt{ font-weight:700; font-size:var(--c-evidenza) }
.classifica tr.testa td{ border-bottom:2px solid var(--inchiostro) }
.risultati{ list-style:none; margin:0; padding:0; display:grid }
.risultati li{ display:grid; grid-template-columns:minmax(0,1fr) 4.5ch minmax(0,1fr); gap:10px; border-bottom:1px solid var(--filetto); padding:9px 0; font-size:var(--c-testo); align-items:baseline }
.risultati li .r{ font:700 var(--c-evidenza) var(--f-cifre); text-align:center }
.risultati li .o{ text-align:right }
.risultati li small{ grid-column:1/-1; font:var(--c-nota) var(--f-cifre); color:var(--grigio); margin-top:-4px }
.vetrina{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:2px solid var(--inchiostro) }
.vetrina div{ padding:16px 14px 16px 0; border-bottom:1px solid var(--filetto); display:grid; gap:4px }
.vetrina b{ font:900 clamp(var(--c-titolo), 4.6vw, var(--c-dato))/1 var(--f-titolo) }
.vetrina span{ font-size:var(--c-testo); color:var(--grigio) }
.timone{ display:grid; gap:30px }
.timone .gruppo-home h3{ font:700 var(--c-titoletto)/1 var(--f-titolo); text-transform:uppercase; margin:0 0 10px }
.timone .tessere{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px }
.tessera-home{ display:grid; grid-template-columns:40px minmax(0,1fr); gap:6px 14px; padding:16px; border:1px solid var(--filetto); text-decoration:none; color:var(--inchiostro) }
.tessera-home:hover{ border-color:var(--inchiostro) }
.tessera-home svg{ width:36px; height:36px; grid-row:span 2 }
.tessera-home b{ font:700 var(--c-evidenza) var(--f-testo) }
.tessera-home span{ font-size:var(--c-testo); color:var(--grigio); line-height:1.4 }
.tessera-home em{ grid-column:2; font:600 var(--c-nota) var(--f-cifre); font-style:normal; letter-spacing:.06em; text-transform:uppercase; text-decoration:underline; text-underline-offset:3px }
@media (max-width:980px){ .tre,.campionato-corso{ grid-template-columns:1fr } .vetrina{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:760px){ .gesto-oggi{ grid-template-columns:1fr } .stoffa-riga{ grid-template-columns:1fr; gap:4px } .cella{ width:24px; height:32px } }
/* ★ la data è un DATO, non un'etichetta (Fabio, 01/10): grande e nera */
.giorno-data{ font:600 var(--c-testo) var(--f-cifre); text-transform:uppercase; letter-spacing:.04em; color:var(--grigio) }
.giorno-data b{ font:800 var(--c-titoletto) var(--f-titolo); color:var(--inchiostro); letter-spacing:.02em; margin-left:4px }

/* la ricerca generale della testata (js/ndc-cerca.js, 03/10) */
.ce-esiti{ background:var(--carta); color:var(--inchiostro); border:2px solid var(--inchiostro); box-shadow:0 18px 40px rgba(0,0,0,.22); padding:6px 0; display:grid; max-height:min(70vh,640px); overflow-y:auto }
.ce-esiti[hidden]{ display:none }
.ce-testata{ position:fixed; z-index:45 }
.ce-gruppo{ display:grid; padding:4px 0 6px; border-bottom:1px solid var(--filetto) }
.ce-gruppo:last-child{ border-bottom:0 }
.ce-gruppo h3{ margin:4px 14px; font:600 var(--c-etichetta) var(--f-cifre); letter-spacing:.08em; text-transform:uppercase; color:var(--grigio) }
.ce-voce{ display:grid; grid-template-columns:26px minmax(0,1fr); gap:10px; align-items:center; padding:7px 14px; text-decoration:none; color:var(--inchiostro) }
.ce-voce:hover,.ce-voce:focus-visible{ background:var(--velo) }
.ce-voce svg{ width:22px; height:22px; color:var(--grigio) }
.ce-voce b{ font:600 var(--c-testo)/1.25 var(--f-testo); display:block }
.ce-voce small{ display:block; font:var(--c-nota) var(--f-cifre); color:var(--grigio) }
.ce-voce mark{ background:none; color:inherit; font-weight:800; text-decoration:underline; text-underline-offset:3px }
.ce-tutti{ margin:2px 14px 4px; font:600 var(--c-nota) var(--f-cifre); letter-spacing:.04em; color:var(--inchiostro) }
.ce-vuoto{ margin:8px 14px; color:var(--grigio); font-size:var(--c-testo) }

/* un nome lungo non allarga la pagina sul telefono (03/10, Partite) */
.tabellone{ grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) }

/* il tasto primario anche fuori dalla carta «I top» (03/10, Scatola) */
.tasto.primo{ background:var(--velo); border:2px solid var(--inchiostro); color:var(--inchiostro); font-weight:700; font-family:var(--f-testo); font-size:var(--c-testo); cursor:pointer }

/* il messaggio mentre arrivano i dati (sito nuovo, 03/10/2026) */
.ndc-carica{ margin:40px 0; font:600 var(--c-testo) var(--f-testo); color:var(--grigio) }

/* il piede di ogni pagina (03/10/2026). La veste del banner dei cookie e delle finestre delle policy sta in
   js/cookie-privacy.js, coi gettoni del tema: qui non si copre più a pezzi (vedi il commento lì). */
.piede{ border-top:2px solid var(--inchiostro); margin-top:8px; background:var(--carta) }
.piede-dentro{ max-width:1180px; margin:0 auto; padding:18px 20px 28px; display:flex; flex-wrap:wrap; gap:10px 28px; align-items:center; justify-content:space-between }
.piede-firma{ margin:0; font:400 var(--c-nota)/1.5 var(--f-testo); color:var(--grigio) } .piede-firma b{ color:var(--inchiostro) }
.piede-gemellaggio{ margin:0; font:400 var(--c-nota)/1.5 var(--f-testo); color:var(--grigio) } .piede-gemellaggio a{ color:var(--inchiostro); font-weight:700; text-decoration:underline; text-underline-offset:3px } .piede-gemellaggio a:hover{ color:var(--verdetto) }   /* ★ 07/10/2026, Fabio: il gemellaggio con italiadeiderby.it */
.piede-link{ display:flex; flex-wrap:wrap; gap:6px 20px }
.piede-link a,.piede-link button{ font:600 var(--c-etichetta) var(--f-cifre); letter-spacing:.08em; text-transform:uppercase; color:var(--inchiostro); background:none; border:0; padding:6px 0; cursor:pointer; text-decoration:none; border-bottom:1px solid transparent }
.piede-link a:hover,.piede-link button:hover{ color:var(--verdetto); border-bottom-color:var(--verdetto) }
.piede-link a:focus-visible,.piede-link button:focus-visible{ outline:2px solid var(--verdetto); outline-offset:3px }
@media (max-width:760px){ .piede-dentro{ padding-bottom:28px } }

/* ★ LA LETTURA (Fabio, 03/10/2026: «i corpi mi sembrano piccoli: ingrandirli il giusto, senza strillarli come nel
     vecchio sito»). Un moltiplicatore solo sotto la scelta «Grandezza del testo» delle Impostazioni: Normale = 1,08
     sul computer e 1,04 sul telefono; Grande, Molto grande e Massimo restano relative a questa base. Il disegno non
     cambia proporzioni: 13 px → 14, 16 → 17,3, 17 → 18,4. */
:root{ --base-lettura:1.08 }
@media (max-width:760px){ :root{ --base-lettura:1.04 } }
.corpo{ zoom:calc(var(--scala) * var(--base-lettura)) }
/* ★ 03/10 (Fabio: «la finestra scorre sotto la barra dei menu»): dentro .corpo lo zoom moltiplica anche il «top» degli
     elementi agganciati: 115 px diventavano 124 e fra la barra e i tab restava una fessura da cui si vedevano le righe.
     Chi si aggancia sotto le barre usa --sotto-barre, già diviso per lo zoom. */
:root{ --zoom-corpo:calc(var(--scala) * var(--base-lettura)); --sotto-barre:calc((var(--testata) + var(--barra-h,54px) + env(safe-area-inset-top,0px)) / var(--zoom-corpo)) }

/* ★ I GRAFICI (03/10/2026, Fabio: «i grafici del Libro dei record sono illeggibili, si accavallano tutti […] come nel
     tabellone l'intestazione delle colonne spostata al centro»). Il modulo è js/ndc-grafici.js, le regole in DOCS/GRAFICI.md:
     un grafico SVG con data-ndc-grafico ha le etichette dell'asse (.ndc-asse) orizzontali se c'è posto, altrimenti in
     verticale e centrate sulla barra come i nomi in testa al tabellone; una ogni N solo se nemmeno così ci stanno (.ndc-via);
     i valori (.ndc-valore) e le etichette libere (.ndc-etichetta) che non trovano posto compaiono al passaggio (.ndc-al-tocco). */
svg[data-ndc-grafico] .ndc-via{ display:none }
svg[data-ndc-grafico] .ndc-al-tocco{ opacity:0; transition:opacity .15s }
svg[data-ndc-grafico] g:hover > .ndc-al-tocco,svg[data-ndc-grafico] g:focus-within > .ndc-al-tocco,svg[data-ndc-grafico] g.ndc-toccato > .ndc-al-tocco{ opacity:1 }
svg[data-ndc-grafico] g:has(> .ndc-al-tocco){ cursor:pointer }
svg[data-ndc-grafico] .ndc-al-tocco,svg[data-ndc-grafico] .ndc-etichetta{ paint-order:stroke; stroke:var(--carta); stroke-width:3px; stroke-linejoin:round }
/* un grafico largo (data-ndc-grafico="largo": molte squadre o molti minuti) sul telefono non si stringe sotto i 600 px:
   si scorre di lato dentro il suo riquadro (a 340 px le scritte si vedevano a 4-5 px) */
@media (max-width:760px){ svg[data-ndc-grafico="largo"]{ max-width:none !important; min-width:600px }
  *:has(> svg[data-ndc-grafico="largo"]){ max-width:calc(100vw - 40px); overflow-x:auto } }   /* la scatola che scorre non allarga la pagina */
[data-ndc-grafico="html"].ndc-verticale .ndc-asse{ writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; justify-self:center; align-self:start; margin-inline:auto }
[data-ndc-grafico="html"] .ndc-asse.ndc-via{ visibility:hidden }
[data-ndc-grafico="html"] .ndc-dentro.ndc-non-sta > *{ visibility:hidden }
/* il podio, uno per tutto il sito: tre colonne, i nomi vanno a capo nella loro e non si toccano mai */
.ndc-podio{ display:grid; gap:4px; margin:4px 0 }
.ndc-podio .titolo{ margin:0; text-align:center; font:700 var(--c-etichetta) var(--f-cifre); letter-spacing:.06em; text-transform:uppercase; color:var(--grigio) }
.ndc-podio .gradini{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:10px; align-items:end; border-bottom:3px solid var(--inchiostro) }
.ndc-podio .gr{ display:grid; gap:4px; align-content:end; text-align:center; min-width:0 }
.ndc-podio .nomi{ display:grid; grid-template-columns:minmax(0,1fr); gap:3px; font:700 var(--c-nota)/1.2 var(--f-testo); color:var(--inchiostro); overflow-wrap:normal; hyphens:manual } .ndc-podio .ndc-par{ display:inline-block; max-width:100%; vertical-align:bottom }
.ndc-podio .nomi a{ color:inherit; text-decoration-color:var(--filetto) }
.ndc-podio .nomi small{ font:600 var(--c-etichetta)/1.2 var(--f-cifre); color:var(--grigio) }
.ndc-podio .val{ font:900 var(--c-evidenza)/1 var(--f-titolo); color:var(--inchiostro); margin:2px 0 8px }
.ndc-podio .p1 .val{ font-size:var(--c-titoletto) }
.ndc-podio .blocco{ display:grid; justify-items:center; align-content:start; padding-top:8px; border:3px solid var(--inchiostro); border-bottom:0; background:var(--carta); color:var(--inchiostro); font:900 var(--c-titoletto)/1 var(--f-titolo) }
.ndc-podio .p1 .blocco{ height:96px; background:var(--verdetto-fondo); border-color:var(--verdetto-fondo); color:#fff } .ndc-podio .p2 .blocco{ height:70px } .ndc-podio .p3 .blocco{ height:50px }

/* ★ LE TENDINE (03/10/2026, Fabio: «i menu, ho notato in tutto il sito, sono quelli vecchi con font diversi e un fondo
     orribile»). Il campo resta il <select> della pagina; la LISTA che si apre è di js/ndc-tendina.js (caricato dal guscio):
     carta e filetto, il carattere del sito, la voce scelta in rosso, angoli vivi; sul telefono un pannello dal basso.
     Regole e prove: DOCS/TENDINE.md. Un select resta nativo con data-nativo. */
.ndc-tendina{ position:fixed; z-index:2147483000; display:flex; flex-direction:column; width:max-content; background:var(--carta); color:var(--inchiostro);
  border:1px solid var(--filetto); border-top:2px solid var(--inchiostro); border-radius:0; box-shadow:0 6px 16px rgba(0,0,0,.12); font-family:var(--f-testo); text-align:left }
.ndc-tendina.td-sopra{ border-top:1px solid var(--filetto); border-bottom:2px solid var(--inchiostro) }
.td-lista{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; outline:0; scrollbar-width:thin; scrollbar-color:var(--filetto) transparent }
.td-dentro{ padding:4px 0 }
.td-voce{ position:relative; padding:7px 40px 7px 14px; border-left:3px solid transparent; font:400 var(--c-testo)/1.3 var(--f-testo); color:var(--inchiostro); cursor:pointer; overflow-wrap:anywhere }
.td-voce.attiva{ background:var(--velo) }
.td-tastiera .td-voce.attiva{ outline:2px solid var(--inchiostro); outline-offset:-2px }
.td-misura .td-dentro{ width:max-content } .td-misura .td-voce{ overflow-wrap:normal; white-space:nowrap }
.td-voce[aria-selected="true"]{ color:var(--verdetto); font-weight:700; border-left-color:var(--verdetto) }
.td-voce[aria-selected="true"]::after{ content:""; position:absolute; right:17px; top:50%; width:6px; height:12px; margin-top:-8px; border:solid var(--verdetto); border-width:0 2px 2px 0; transform:rotate(45deg) }
.td-voce[aria-disabled="true"]{ color:var(--grigio); font-style:italic; cursor:default }
.td-gtit{ padding:10px 14px 4px 17px; font:600 var(--c-etichetta)/1.3 var(--f-cifre); letter-spacing:.08em; text-transform:uppercase; color:var(--grigio) }
.td-voce + .td-gruppo,.td-gruppo + .td-gruppo,.td-gruppo + .td-voce{ border-top:1px solid var(--filetto); margin-top:4px }
.td-gruppo .td-voce{ padding-left:26px }
.ndc-tendina-velo{ position:fixed; inset:0; z-index:2147482999; background:rgba(0,0,0,.4) }
.ndc-tendina.td-foglio{ left:0; right:0; top:auto; bottom:0; width:auto; max-height:min(78vh,640px); border:0; border-top:2px solid var(--inchiostro);
  box-shadow:0 -6px 16px rgba(0,0,0,.16); padding-bottom:env(safe-area-inset-bottom,0px); animation:td-su .16s ease-out }
.td-testa{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 8px 6px 20px; border-bottom:1px solid var(--filetto) }
.td-foglio .td-voce{ display:flex; align-items:center; min-height:52px; padding:10px 48px 10px 20px; font-size:var(--c-evidenza); border-bottom:1px solid var(--filetto) }
.td-foglio .td-gruppo .td-voce{ padding-left:30px }
.td-foglio .td-gtit{ padding:16px 20px 6px }
.td-foglio .td-voce + .td-gruppo,.td-foglio .td-gruppo + .td-gruppo,.td-foglio .td-gruppo + .td-voce{ border-top:0; margin-top:0 }
@keyframes td-su{ from{ transform:translateY(24px); opacity:.5 } }
@media (prefers-reduced-motion:reduce){ .ndc-tendina.td-foglio{ animation:none } }

/* ★ LE INTESTAZIONI FISSE (03/10/2026, Fabio: «quando ci sono tabelle che scorrono, le etichette delle colonne devono
     restare fisse e i dati scorrere sotto»). js/ndc-intestazioni.js (caricato dal guscio) mostra una copia del <thead>
     sotto l'ultima barra agganciata, anche per le tabelle nei contenitori che scorrono di lato. DOCS/INTESTAZIONI.md.
     Una tabella si esclude con data-intestazione="libera"; una barra agganciata nuova si dichiara con data-barra-agganciata. */
.ndc-ifissa{ position:fixed; z-index:15; overflow:hidden; margin:0; padding:0; box-sizing:content-box; background:var(--carta); border-bottom:1px solid var(--filetto) }
.ndc-ifissa[hidden]{ display:none }
.ndc-ifissa > table{ position:absolute; left:0; top:0; margin:0; background:var(--carta) }
@media print{ .ndc-ifissa{ display:none !important } }

/* ★ 06/10 collaudo di funzionamento: i pannelli non escono dallo schermo (scorrono dentro) */
#p-aspetto{ max-height:calc(100dvh - var(--testata) - 16px) }
#p-accedi{ max-height:calc(100dvh - 32px) }
/* ★ 06/10 collaudo (segnalazione di chi scrive l'Aiuto): sul telefono la data della partita da giocare («SAB 10/10/2026», 181 px) lasciava 38 px ai nomi («Genoa», «Fiorer…»): data e ora più strette, i nomi respirano */
@media (max-width:760px){ .tessera-partita.prossima .ora-tp{ font-size:var(--c-titoletto); padding-left:10px } .tessera-partita.prossima .ora-tp small{ font-size:var(--c-etichetta); letter-spacing:0; white-space:normal; max-width:11ch } }
/* ★ 06/10 collaudo di funzionamento: nel pannello Menu del telefono i risultati della ricerca erano schiacciati a 16 px (le righe della griglia si stringevano per far stare il pannello): le righe tengono la loro altezza e il pannello scorre */
#p-menu{ grid-auto-rows:max-content; align-content:start }
/* ★ 06/10 collaudo di funzionamento: nel tabellone il nome lungo («Associazione Calcio Sampierdarenese») si allargava oltre la sua colonna (pagina a 1.847 px) e compatta() non lo vedeva: il nome sta nella colonna */
.tabellone .squadra{ min-width:0 } .tabellone .squadra .nome{ min-width:0; max-width:100% }
/* ★ 06/10 collaudo di funzionamento: un filtro non supera la riga (le tendine dalle voci lunghe allargavano la pagina del telefono) */
.filtro{ max-width:100%; min-width:0 }
.filtro select{ min-width:0; max-width:100%; text-overflow:ellipsis }
/* ★ 07/10 la testata a 320 px: non allarga più la pagina (era 345 px su 320 in tutte le pagine) */
@media (max-width:360px){ .testata{ gap:6px; padding-inline:10px } .marchio{ gap:6px } .marchio b{ font-size:var(--c-evidenza) } .azioni-testata{ gap:4px } .azioni-testata .tasto{ width:40px; padding:0; justify-content:center } }
/* ★ 07/10 sera: a 320 px titolo e «I top» vanno su due righe solo se in una non entrano (adattaTitolo) */
@media (max-width:760px){ .titolo-sezione.a-capo{ flex-wrap:wrap !important; row-gap:8px !important } }
/* ★ 07/10 sera: le bandiere a strisce, ingrandite, restano nette */
img[src$="flags/it.png"],img[src$="flags/fr.png"],img[src$="flags/be.png"],img[src$="flags/ie.png"],img[src$="flags/ro.png"],img[src$="flags/de.png"],img[src$="flags/nl.png"],img[src$="flags/at.png"],img[src$="flags/ru.png"],img[src$="flags/hu.png"],img[src$="flags/bg.png"],img[src$="flags/ee.png"],img[src$="flags/lt.png"],img[src$="flags/lu.png"],img[src$="flags/ua.png"],img[src$="flags/pl.png"],img[src$="flags/ng.png"],img[src$="flags/ci.png"],img[src$="flags/ml.png"],img[src$="flags/td.png"],img[src$="flags/gn.png"],img[src$="flags/am.png"],img[src$="flags/ye.png"],img[src$="flags/co.png"],img[src$="flags/cz.png"]{ image-rendering:pixelated }
/* ★ 07/10 sera: il gol sulla decina resta leggibile */
.minuto.decina.gol-casa,.minuto.decina.gol-ospite{color:#fff}
/* ★ 09/10/2026 (C.1): la decina sul minuto grigio (4,34 nel tema chiaro) si scrive più scura del grigio, in tutti i temi */
.minuto.decina:not(.gol-casa):not(.gol-ospite){color:color-mix(in srgb, var(--grigio) 55%, var(--inchiostro))}
/* ★ 07/10 sera: niente si ferma sotto le barre fisse */
html{ scroll-padding-top:calc(var(--testata) + 8px) }
@media (max-width:520px){ html{ scroll-padding-bottom:calc(76px + env(safe-area-inset-bottom,0px)) } }
/* ★ 09/10/2026 test di leggibilità: <small>, <sub> e <sup> del browser rimpiccioliscono di un sesto (13 → 10,8 px negli orari di Scommettiamo): mai sotto il corpo minimo */
small,sub,sup{ font-size:max(.83em, var(--c-minimo)) }

/* ★ 09/10/2026 (Fabio, B.10 e C.1): IL NOSTRO ROSSO COME FONDO, quello che regge il testo bianco in TUTTI i temi
     (bianco su #c8102e = 5,9; sul fondo scuro del tema scuro il riquadro si stacca a 3,2). --verdetto resta il rosso del
     DATO scritto (nel tema scuro #ff4b5c, che col bianco sopra fa 2,8-3,3): chi mette testo bianco su un rosso usa questo. */
:root{ --verdetto-fondo:#c8102e }

/* ★ 13/10/2026 la zona sicura del telefono nei pannelli: il ✕ e il contenuto sotto la barra di sistema, il fondo sopra quella di casa */
#p-menu .chiudi,#p-aiuto .chiudi{ top:calc(12px + env(safe-area-inset-top,0px)) }
#p-aiuto{ padding-top:calc(20px + env(safe-area-inset-top,0px)); padding-bottom:calc(20px + env(safe-area-inset-bottom,0px)) }
#p-aspetto{ top:calc(var(--testata) + 8px + env(safe-area-inset-top,0px)); max-height:calc(100dvh - var(--testata) - 16px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) }
#p-accedi{ max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) }
@media (max-width:760px){ #p-intro{ top:calc(10px + env(safe-area-inset-top,0px)) !important; max-height:calc(100vh - 20px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) } }

/* ★ 14/10/2026 (sovrapposizioni, DOCS/RAPPORTO_NOTTE_sovrapposizioni.md): i filtri col menu sul telefono hanno l'etichetta SOPRA e
     il menu largo quanto il riquadro (con l'etichetta a fianco la voce scelta si leggeva tagliata) */
@media (max-width:480px){
  .filtro:has(> select){ display:inline-grid; grid-template-columns:minmax(0,1fr); align-content:center; gap:0; height:auto; min-height:42px; padding:4px 12px 5px }
  .filtro:has(> select) > select{ width:100%; padding-left:0 }
}
/* ★ 14/10/2026: il bilancio a tre riquadri sotto i 400 px, meno margine e niente spazio fra le lettere dell'etichetta */
@media (max-width:400px){ .bilancio div{ padding:12px 2px } .bilancio .etichetta{ letter-spacing:0 } }
/* ★ 14/10/2026: i duelli delle statistiche sul telefono, la colonna del numero tiene tre cifre («86%», «240») */
@media (max-width:760px){ .duello{ grid-template-columns:4.5ch 1fr 1fr 4.5ch } }
/* ★ 14/10/2026 (Fabio: il podio «è scenografico», il dato staccato dalla barra, «i nomi troncati non mi piacciono»): sotto i 400 px
     i nomi del podio nel carattere stretto dei titoli — «Donnarumma» in una colonna da 84 px non entrava nemmeno al corpo minimo */
/* ★ 14/10/2026: la voce scelta nei tab delle competizioni è una scritta che va a capo; il menu, trasparente, la copre tutta */
.tab-comp label.tc .tc-voce{ font:700 var(--c-titoletto)/1.1 var(--f-titolo); text-transform:uppercase; letter-spacing:.02em; color:var(--inchiostro); padding-right:18px; overflow-wrap:normal; hyphens:manual;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%); background-size:6px 6px; background-position:calc(100% - 9px) .45em,calc(100% - 3px) .45em; background-repeat:no-repeat }
.tab-comp label.tc[aria-selected="false"] .tc-voce{ color:var(--grigio) }
.tab-comp label.tc select{ position:absolute; inset:0; width:100%; height:100%; opacity:0; padding:0 }
.tab-comp label.tc:focus-within{ outline:2px solid var(--inchiostro); outline-offset:-4px }
@media (max-width:400px){ .ndc-podio .nomi{ font:700 var(--c-testo)/1.05 var(--f-titolo); text-transform:uppercase; letter-spacing:.02em } }