/* Squadre — il KIT comune (kit.js): schede al tocco, elenchi ordinabili, riquadri, tabellino, testata delle schede.
   Dalla master (squadre_parti.html: #p-club) e dalle schede già fatte nel sito nuovo (arbitri/scheda.css), stessi gettoni del tema. */

/* ── stemmi leggibili nei due temi: il contorno solo dove sparirebbero (regola madre: niente fondi) ── */
:root[data-theme="dark"] img.st-scuro,:root[data-theme="notte"] img.st-scuro{filter:drop-shadow(0 0 1px var(--inchiostro)) drop-shadow(0 0 1px var(--inchiostro))}
@media (prefers-color-scheme:dark){:root:not([data-theme]) img.st-scuro{filter:drop-shadow(0 0 1px var(--inchiostro)) drop-shadow(0 0 1px var(--inchiostro))}}
:root[data-theme="light"] img.st-chiaro{filter:drop-shadow(0 0 1px var(--inchiostro))}
@media (prefers-color-scheme:light){:root:not([data-theme]) img.st-chiaro{filter:drop-shadow(0 0 1px var(--inchiostro))}}
img.stemma{ width:26px; height:26px; object-fit:contain; vertical-align:-6px; flex:none }

/* ── la scheda al tocco (#p-sq), lo stesso disegno di #p-club della master ── */
#p-sq{ top:50%; left:50%; transform:translate(-50%,-50%); width:min(700px,calc(100vw - 24px)); max-height:88vh; padding:0 }
#p-sq.largo{ width:min(980px,calc(100vw - 24px)) }
#p-sq .fascia{ height:10px; background:linear-gradient(90deg,var(--c1) 0 60%,var(--c2) 60%) }
#p-sq .corpo-s{ padding:16px 22px 22px; display:grid; gap:14px }
#p-sq .intesta{ display:flex; gap:16px; align-items:center; padding-right:48px }
#p-sq .intesta .st{ width:72px; height:72px; display:flex; align-items:center; justify-content:center; flex:none }
#p-sq .intesta .st img{ max-width:72px; max-height:72px; width:auto; height:auto; object-fit:contain }
#p-sq .intesta .st .stemma-svg svg{ height:68px; width:auto }
#p-sq h2{ font:900 var(--c-titolo)/.95 var(--f-titolo); text-transform:uppercase; margin:0; overflow-wrap:anywhere }
#p-sq h4{ margin:8px 0 0; font:700 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-sq dl{ display:grid; grid-template-columns:minmax(150px,auto) 1fr; gap:8px 16px; margin:0; align-items:baseline }
#p-sq dt{ color:var(--grigio); font-size:var(--c-nota) } #p-sq dd{ margin:0; font-weight:600; font-size:var(--c-titoletto); min-width:0 }
#p-sq dd small{ display:block; font-weight:400; font-size:var(--c-testo); color:var(--grigio); line-height:1.4 }
#p-sq dd a{ color:var(--inchiostro) }
#p-sq .azioni{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px }
#p-sq .azioni .primo{ background:var(--velo); border:2px solid var(--inchiostro); font-weight:700 }
#p-sq .partite-l li{ padding-left:10px }
@media (max-width:760px){ #p-sq dl{ grid-template-columns:1fr; gap:0 } #p-sq dd{ margin-bottom:8px } #p-sq h2{ font-size:var(--c-sottotitolo) } #p-sq .corpo-s{ padding:14px } }

/* ── la testata delle schede ── */
.sc-testa{ display:grid; gap:14px; padding-top:18px }
.sc-nome{ display:grid; grid-template-columns:96px minmax(0,1fr); column-gap:18px; align-items:center; min-width:0 }
.sc-nome .st{ width:96px; height:96px; display:flex; align-items:center; justify-content:center }
.sc-nome .st img{ max-width:96px; max-height:96px; width:auto; height:auto; object-fit:contain } .sc-nome .st .stemma-svg svg{ height:92px; width:auto }
.sc-nome h1{ margin:2px 0 0; min-width:0; font:900 clamp(var(--c-titolo), 7vw, var(--c-grande))/.9 var(--f-titolo); text-transform:uppercase; letter-spacing:-.01em; overflow-wrap:anywhere }
.sc-nome .sotto{ font:600 var(--c-testo) var(--f-cifre); color:var(--grigio); margin-top:6px }
.sc-nota{ margin:0; font:italic var(--c-testo)/1.45 var(--f-testo); color:var(--grigio); max-width:70ch; border-left:3px solid var(--verdetto); padding-left:12px }
.sc-fatti{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); border-top:1px solid var(--filetto) }
.sc-fatti > div,.sc-fatti > a{ padding:10px 14px 10px 0; display:grid; gap:2px; min-width:0; border-bottom:1px solid var(--filetto); color:var(--inchiostro); text-decoration:none }
.sc-fatti b{ font:900 var(--c-sottotitolo)/1.05 var(--f-titolo); text-transform:uppercase } .sc-fatti b.testo{ font-size:var(--c-titoletto) }
.sc-fatti small{ font-size:var(--c-testo); color:var(--grigio) }
.sc-fissa{ position:fixed; left:0; right:0; top:calc(var(--testata) + env(safe-area-inset-top,0px)); z-index:29; display:flex; gap:12px; align-items:baseline;
  padding:8px 20px; background:var(--carta); border-bottom:2px solid var(--inchiostro); box-shadow:0 1px 0 var(--filetto) }
.sc-fissa b{ font:900 var(--c-titoletto)/1 var(--f-titolo); text-transform:uppercase; white-space:nowrap; overflow:hidden; min-width:0 }
.sc-fissa span{ font:600 var(--c-nota) var(--f-cifre); color:var(--grigio); white-space:nowrap }

/* ── riquadri, blocchi, linee ── */
.riq{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px }
.riq > div,.riq > button,.riq > a{ border:1px solid var(--filetto); padding:10px 12px; display:grid; gap:2px; align-content:start; background:var(--carta); color:var(--inchiostro); text-align:left; font:inherit; min-width:0; text-decoration:none }
.riq > button,.riq > a{ cursor:pointer } .riq > button:hover,.riq > button:focus-visible,.riq > a:hover{ border-color:var(--inchiostro); box-shadow:inset 0 -4px 0 var(--inchiostro); outline:none }
.riq span{ font:600 var(--c-etichetta) var(--f-cifre); letter-spacing:.06em; text-transform:uppercase; color:var(--grigio) }
.riq b{ font:900 var(--c-titolo)/1 var(--f-titolo) } .riq b.testo{ font-size:var(--c-titoletto); line-height:1.1 }
.riq small{ font-size:var(--c-nota); color:var(--grigio); line-height:1.3 }
.blocco{ display:grid; gap:10px; margin-top:8px }
.blocco > h3{ margin:0; display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline; font:800 var(--c-titoletto)/1 var(--f-titolo); text-transform:uppercase }
.blocco > h3 small{ font:600 var(--c-nota) var(--f-cifre); text-transform:none; color:var(--grigio); letter-spacing:0 }
.sc-h4{ margin:0; font:700 var(--c-nota) var(--f-cifre); letter-spacing:.1em; text-transform:uppercase; color:var(--grigio); border-bottom:2px solid var(--inchiostro); padding-bottom:4px }
.vuoto-p{ border:1px dashed var(--filetto); padding:18px; font-size:var(--c-testo); color:var(--grigio); margin:8px 0 0 }
.barra2{ display:flex; height:16px; border:1px solid var(--filetto) } .barra2 i{ display:block; flex:none }
.barra2 .a{ background:var(--inchiostro) } .barra2 .b{ background:var(--verdetto) }
.vnp .vnp-bar{ height:16px } .vnp .cifre{ flex-wrap:wrap; font-size:var(--c-nota) } .vnp .cifre b{ font-size:var(--c-titoletto) }

/* ── i selettori della guscio ── */
.schede-tab{ display:grid; gap:14px }
.selettori .sel{ font:700 var(--c-evidenza) var(--f-titolo); text-transform:uppercase; letter-spacing:.03em }
.selettori .sel small{ font:600 var(--c-etichetta) var(--f-cifre); color:var(--grigio); margin-left:2px }
.selettori.piccoli .sel{ height:42px; padding:0 16px; font-size:var(--c-testo) }
.riga-strumenti{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:4px 0 2px }
.riga-strumenti .filtro input{ border:0; background:none; color:var(--inchiostro); font:600 var(--c-testo) var(--f-testo); width:14ch; outline:none }
.riga-strumenti .conta{ font:600 var(--c-nota) var(--f-cifre); color:var(--grigio) } .riga-strumenti .conta b{ font:800 var(--c-evidenza) var(--f-titolo); color:var(--inchiostro) }

/* ── le tabelle: sul telefono ogni riga diventa una tessera, niente scorrimento orizzontale ── */
.tab-scheda{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums }
.tab-scheda th{ font:600 var(--c-etichetta) var(--f-cifre); letter-spacing:.06em; text-transform:uppercase; color:var(--grigio); text-align:right; border-bottom:1px solid var(--inchiostro); padding:6px 8px; white-space:nowrap }
.tab-scheda th:first-child,.tab-scheda td:first-child,.tab-scheda th.sx,.tab-scheda td.sx{ text-align:left }
.tab-scheda td{ border-bottom:1px solid var(--filetto); padding:8px; text-align:right; font:600 var(--c-testo) var(--f-cifre) }
.tab-scheda td.nome,.tab-scheda:not(.kit) td:first-child{ font:700 var(--c-evidenza)/1.15 var(--f-titolo); text-transform:uppercase; text-align:left }
.tab-scheda td.n,.tab-scheda th.n{ width:3ch; color:var(--grigio); text-align:right; font-size:var(--c-nota) }
.tab-scheda td a{ text-decoration-color:var(--filetto) }
.tab-scheda td .stemma{ margin-right:8px }
.tab-scheda td small{ display:block; font:400 var(--c-nota) var(--f-testo); color:var(--grigio); text-transform:none }
.tab-scheda tr.tot td{ border-top:2px solid var(--inchiostro); font-weight:800 }
.tab-scheda.apribile tbody tr{ cursor:pointer } .tab-scheda.apribile tbody tr:hover td,.tab-scheda.apribile tbody tr:focus-visible td{ background:var(--velo) }
.tab-scheda.apribile tbody tr:focus-visible{ outline:2px solid var(--inchiostro) }
.tab-scheda .v{ color:var(--inchiostro) } .tab-scheda .p{ color:var(--verdetto) }
@media (max-width:760px){
  .tab-scheda:not(.compatta) thead{ display:none }
  .tab-scheda:not(.compatta) tr{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px 8px; padding:10px 0; border-bottom:1px solid var(--filetto) }
  .tab-scheda:not(.compatta) td{ border:0; padding:0; text-align:left; display:grid; gap:1px; font-size:var(--c-evidenza); min-width:0; overflow-wrap:anywhere }
  .tab-scheda:not(.compatta) td::before{ content:attr(data-et); font:600 var(--c-etichetta) var(--f-cifre); letter-spacing:.04em; text-transform:uppercase; color:var(--grigio); white-space:normal }
  .tab-scheda:not(.compatta) td.nome,.tab-scheda:not(.compatta):not(.kit) td:first-child{ grid-column:1/-1; font-size:var(--c-titoletto); display:block } 
  .tab-scheda:not(.compatta) td.nome::before,.tab-scheda:not(.compatta):not(.kit) td:first-child::before{ content:none }
  .tab-scheda.kit:not(.compatta) td.n{ display:none }
  .tab-scheda.apribile tbody tr:hover td{ background:none }
}
.tab-scheda.compatta td:first-child{ white-space:normal }

/* ── le partite: una riga, il bordo dice com'è finita ── */
.partite-l{ list-style:none; margin:0; padding:0; display:grid }
.partite-l li{ display:grid; grid-template-columns:11ch minmax(0,1fr) auto; gap:2px 14px; align-items:baseline; border-bottom:1px solid var(--filetto); padding:9px 0 9px 12px; border-left:5px solid var(--filetto) }
.partite-l li.e-V{ border-left-color:var(--inchiostro) } .partite-l li.e-N{ border-left-color:var(--grigio) } .partite-l li.e-P{ border-left-color:var(--verdetto) }
.partite-l li.fuori .gara{ font-style:italic }
.partite-l .data{ font:var(--c-testo) var(--f-cifre); color:var(--grigio) }
.partite-l .gara{ font:700 var(--c-evidenza)/1.2 var(--f-testo); min-width:0 }
.partite-l .gara a{ color:inherit; text-decoration:underline; text-decoration-color:var(--filetto); text-underline-offset:3px }
.partite-l .ris{ font:800 var(--c-titoletto) var(--f-cifre); white-space:nowrap; text-align:right }
.partite-l .dove{ grid-column:2 / -1; font-size:var(--c-testo); color:var(--grigio) }
.partite-l .banda{ border-left:0; padding:14px 0 4px; font:700 var(--c-nota) var(--f-cifre); letter-spacing:.1em; text-transform:uppercase; color:var(--grigio); display:block; border-bottom:2px solid var(--inchiostro) }
.legenda-e{ display:flex; flex-wrap:wrap; gap:6px 16px; font:600 var(--c-nota) var(--f-cifre); color:var(--grigio) }
.legenda-e i{ display:inline-block; width:5px; height:14px; vertical-align:-2px; margin-right:6px; background:var(--inchiostro) }
@media (max-width:760px){ .partite-l li{ grid-template-columns:minmax(0,1fr) auto } .partite-l .data{ grid-column:1 / -1 } .partite-l .dove{ grid-column:1 / -1 } .partite-l .gara{ font-size:var(--c-testo) } }
.piede-l{ display:flex; justify-content:center; margin-top:12px }
.piede-l .tasto small{ color:var(--grigio); margin-left:6px }

/* ── il tabellino ── */
#p-tab{ top:50%; left:50%; transform:translate(-50%,-50%); width:min(820px,calc(100vw - 24px)); max-height:min(90vh,calc(100vh - 2 * env(safe-area-inset-top,0px))); padding:0 }
#p-tab .corpo-t{ padding:18px 22px 24px; display:grid; gap:12px }
#p-tab .corpo-t > header{ padding-right:56px; display:grid; gap:2px }
#p-tab h2{ font:900 var(--c-sottotitolo)/1 var(--f-titolo); text-transform:uppercase }
.tb-gamba{ display:grid; gap:10px; padding-top:12px; border-top:2px solid var(--inchiostro) }
.tb-gamba:first-of-type{ border-top:0; padding-top:0 }
.tb-ris{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:12px; align-items:center }
.tb-ris .sq{ display:flex; gap:8px; align-items:center; font:800 var(--c-titoletto)/1.1 var(--f-titolo); text-transform:uppercase; min-width:0 }
.tb-ris .sq.sx{ justify-content:flex-end; text-align:right } .tb-ris img{ width:32px; height:32px; object-fit:contain; flex:none }
.tb-ris .n{ font:900 var(--c-dato)/1 var(--f-titolo); white-space:nowrap }
.tb-info{ text-align:center; font:var(--c-nota) var(--f-cifre); color:var(--grigio) }
.tb-due{ display:grid; grid-template-columns:1fr 1fr; gap:4px 24px } .tb-due > div{ min-width:0; display:grid; gap:2px; align-content:start } .tb-due > div:first-child{ text-align:right }
.tb-due .r{ font-size:var(--c-testo) } .tb-due .m{ font:var(--c-nota) var(--f-cifre); color:var(--grigio) }
.tb-h{ margin:8px 0 0; text-align:center; font:700 var(--c-nota) var(--f-cifre); letter-spacing:.1em; text-transform:uppercase; color:var(--grigio) }
.tb-coda{ display:grid; grid-template-columns:1fr auto 1fr; gap:4px 12px; align-items:baseline; font-size:var(--c-testo) } .tb-coda > :first-child{ text-align:right }
.tb-coda .et{ font:600 var(--c-etichetta) var(--f-cifre); letter-spacing:.08em; text-transform:uppercase; color:var(--grigio) }
@media (max-width:560px){ #p-tab .corpo-t{ padding:14px } .tb-ris .sq{ font-size:var(--c-testo) } .tb-ris img{ width:24px; height:24px } .tb-ris .n{ font-size:var(--c-titolo) } .tb-due{ gap:4px 12px } .tb-due .r{ font-size:var(--c-testo) } }

/* ── il modo incorporato (?embed=1) e i tasti corti sul telefono ── */
body.embed .testata,body.embed .binario,body.embed .barra-basso{ display:none !important }
body.embed .app{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto }
body.embed .sc-fissa{ top:0 }
.tasto .corto{ display:none }
@media (max-width:760px){
  .sc-testa .riga-azioni{ flex-wrap:nowrap } .sc-testa .riga-azioni .tasto{ padding:0 12px }
  .tasto .lungo{ display:none } .tasto .corto{ display:inline }
  .sc-nome{ grid-template-columns:64px minmax(0,1fr); column-gap:12px } .sc-nome .st{ width:64px; height:64px } .sc-nome .st img{ max-width:64px; max-height:64px } .sc-nome .st .stemma-svg svg{ height:60px }
  .sc-nome h1{ font-size:var(--c-titolo) }
  .sc-fatti{ grid-template-columns:repeat(2,minmax(0,1fr)) } .sc-fatti b{ font-size:var(--c-titoletto) }
  .sc-fissa{ padding:8px 16px } .sc-fissa b{ font-size:var(--c-evidenza) } .sc-fissa span{ display:none }
  .riq{ grid-template-columns:repeat(2,minmax(0,1fr)) } .riq b{ font-size:var(--c-sottotitolo) }
}
.vnp .cifre{ display:flex; gap:4px 16px }
.vnp{ display:grid; gap:6px } .vnp .vnp-bar{ display:flex; height:16px; border:1px solid var(--filetto) } .vnp .vnp-bar i{ display:block; flex:none }
.vnp .vnp-bar .v{ background:var(--inchiostro) } .vnp .vnp-bar .n{ background:var(--grigio) } .vnp .vnp-bar .p{ background:var(--verdetto) }
.vnp .cifre span{ font:var(--c-nota) var(--f-cifre); color:var(--grigio) } .vnp .cifre b{ font:800 var(--c-titoletto) var(--f-titolo); color:var(--inchiostro); margin-right:4px }
/* lo stemma vettoriale (Juventus) alla misura dell'immagine che sostituisce */
.stemma-svg{ display:inline-flex; align-items:center; justify-content:center; color:var(--inchiostro); vertical-align:-6px }
.stemma-svg svg{ height:100%; width:auto; max-width:100% }
.stemma-svg.stemma{ width:26px; height:26px; margin-right:8px } .stemma-svg.stemma-grande{ width:96px; height:96px }
@media (max-width:760px){ .stemma-svg.stemma-grande{ width:64px; height:64px } }
/* 06/10 · sul telefono la testata della scheda (Pre Unico: Alessandrina) allargava la pagina a 520 px: la colonna «auto» della griglia
   cresceva col contenuto più largo; ora si stringe e i testi vanno a capo */
.sc-testa{ grid-template-columns:minmax(0,1fr) } .sc-testa > *{ min-width:0 } .sc-testa .percorso{ min-width:0 } .sc-testa h1,.sc-testa .sotto,.sc-testa .sc-nota{ overflow-wrap:anywhere }
.sc-fissa .st-fissa{ width:28px; height:28px; object-fit:contain; align-self:center; flex:none } .sc-fissa .stemma-svg.st-fissa svg{ width:auto; height:26px }   /* ★ 07/10 sera: lo stemma nella striscia */
/* ★ 07/10/2026 sera (collaudo a 320 px): i tasti della testata vanno a capo se in una riga non entrano */
@media (max-width:360px){ .sc-testa .riga-azioni{ flex-wrap:wrap; row-gap:8px } }