/* ============================================================
   Panchina — foglio di stile
   Riferimento visivo: il modulo cartaceo. Penna blu, frecce
   rossa/verde per i cambi, riquadri squadrati, niente decorazione.
   ============================================================ */

:root{
  --paper:#EDEFF2; --card:#FFFFFF; --ink:#14181F; --ink-soft:#5B6472;
  --biro:#1B3FBF; --out:#C82F2A; --in:#17843F; --yel:#E8C11C;
  --line:#C9CDD4; --line-soft:#E2E5EA;
  --shadow:0 1px 0 rgba(20,24,31,.06), 0 2px 8px rgba(20,24,31,.08);
  --r:10px; --tap:64px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.35;overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--biro);outline-offset:2px}
input,select,textarea{-webkit-user-select:text;user-select:text}
.num{font-family:'Barlow Condensed','Public Sans',sans-serif;font-variant-numeric:tabular-nums}
.eyebrow{font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;font-size:14px;color:var(--ink-soft)}
.hidden{display:none!important}

#app{display:flex;flex-direction:column;height:100vh;height:100dvh}
.view{flex:1;min-height:0;display:flex;flex-direction:column}

/* ---------- intestazione generica ---------- */
.hdr{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:12px 16px;
  background:var(--card);border-bottom:1px solid var(--line)}
.hdr h1{margin:0;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:26px;flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr .back{font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:var(--biro);font-size:15px;padding:8px 4px}
.body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 16px 24px}
.foot{flex:0 0 auto;display:flex;gap:10px;align-items:center;padding:12px 16px;
  background:var(--card);border-top:1px solid var(--line)}
.foot .info{flex:1;color:var(--ink-soft);font-size:14px}

.btn{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  font-size:17px;padding:13px 20px;border-radius:9px;background:var(--biro);color:#fff;min-height:50px}
.btn.ghost{background:transparent;color:var(--biro);border:1px solid var(--line)}
.btn.danger{background:transparent;color:var(--out);border:1px solid var(--line)}
.btn[disabled]{opacity:.4}
.btn.sm{font-size:15px;padding:9px 14px;min-height:42px}

.f{display:flex;flex-direction:column;gap:3px}
.f label{font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft)}
.f input,.f select{font:inherit;padding:9px 10px;border:1px solid var(--line);border-radius:8px;
  background:#fff;min-height:44px;width:100%;max-width:100%}
/* su iOS il campo data si allarga da solo e invade quello accanto */
.f input[type=date]{min-width:0;-webkit-appearance:none;appearance:none}
.fields > .f{min-width:0}
.f.grow{flex:1;min-width:170px}
.fields{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- home ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-bottom:20px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;
  text-align:left;box-shadow:var(--shadow);min-height:92px;display:flex;flex-direction:column;justify-content:center}
.tile b{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:22px;display:block}
.tile span{color:var(--ink-soft);font-size:14px}
.tile.primary{background:var(--biro);border-color:var(--biro);color:#fff}
.tile.primary span{color:rgba(255,255,255,.75)}

.mlist{display:flex;flex-direction:column;gap:8px}
.mrow-wrap{display:flex;gap:8px;align-items:stretch;position:relative}
.mdel{display:none;flex:0 0 auto;padding:0 16px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);color:var(--out);font-family:'Barlow Condensed',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:14px}
body.archedit .mdel{display:block}
/* Il pulsante si sovrappone alla riga invece di allargarla: su telefono
   allargarla voleva dire doverla trascinare di lato per vederlo. */
body.archedit .mdel{position:absolute;right:8px;top:8px;bottom:8px;z-index:2;
  background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.18)}
body.archedit .mrow{padding-right:104px}
.mrow{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:12px 14px;text-align:left;width:100%;box-shadow:var(--shadow)}
.mrow .d{font-family:'Barlow Condensed',sans-serif;font-weight:600;color:var(--ink-soft);
  font-size:14px;min-width:74px}
.mrow .o{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow .o em{font-style:normal;color:var(--ink-soft);font-weight:400;font-size:13px;display:block}
.mrow .res{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:26px;font-variant-numeric:tabular-nums}
.mrow .res.live{color:var(--out)}
.mrow .res.draft{color:var(--ink-soft);font-size:15px;text-transform:uppercase;letter-spacing:.08em}

/* ---------- rosa ---------- */
.reparto{margin-bottom:16px}
.reparto h4{font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;font-size:13px;color:var(--ink-soft);margin:0 0 8px;
  display:flex;align-items:center;gap:8px}
.reparto h4::after{content:'';flex:1;height:1px;background:var(--line)}
.reparto h4 span{font-weight:700;color:var(--ink)}
.plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:8px}
/* la lista di convocazione ha due pulsanti in piu' per riga:
   serve piu' larghezza, altrimenti il cognome viene troncato */
.plist.conv{grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}
.prow{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:8px 10px;min-height:62px;text-align:left;width:100%}
.prow.off{opacity:.45}
.prow .n{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:22px;color:var(--biro);
  min-width:30px;text-align:center;flex:0 0 auto}
.prow.gk .n{background:#FDF3D0;color:#8A6A00;border-radius:7px}
.prow .nm{flex:1 1 auto;min-width:0;font-weight:600;line-height:1.15;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* nella convocazione il nome puo' andare a capo: meglio due righe che troncato */
.conv .prow .nm{white-space:normal;overflow:visible;font-size:15px}
.conv .prow{min-height:66px}
.conv .prow .pill{flex:0 0 auto}
.prow .nm em{font-style:normal;display:block;font-weight:400;font-size:12px;color:var(--ink-soft)}
.ph{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--line-soft);flex:0 0 auto}
.ph.ph-lg{width:96px;height:96px}
.ph.empty{display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;
  font-weight:700;color:var(--ink-soft);font-size:16px}

/* ---------- modale ---------- */
.modal{position:fixed;inset:0;z-index:90;background:rgba(20,24,31,.5);display:flex;
  align-items:center;justify-content:center;padding:20px}
.modal-inner{background:var(--paper);border-radius:14px;width:min(520px,100%);max-height:90vh;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal .hdr{border-radius:14px 14px 0 0}

/* ---------- convocazione ---------- */
.pill{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;padding:9px 10px;border-radius:7px;border:1px solid var(--line);
  color:var(--ink-soft);min-width:46px;text-align:center}
.pill.on{background:var(--biro);border-color:var(--biro);color:#fff}
.pill.pan.on{background:var(--ink-soft);border-color:var(--ink-soft)}
.pill.grad{min-width:38px;color:var(--line)}
.pill.grad.on.cap{background:var(--biro);border-color:var(--biro);color:#fff}
.pill.grad.on.vic{background:var(--ink-soft);border-color:var(--ink-soft);color:#fff}

/* ============================================================
   SCHERMATA PARTITA
   ============================================================ */
.top{display:flex;align-items:stretch;gap:1px;background:var(--line);
  border-bottom:1px solid var(--line);flex:0 0 auto}
.top>*{background:var(--card)}
.top-meta{flex:1;min-width:0;padding:8px 14px;display:flex;flex-direction:column;justify-content:center}
.top-meta .gara{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-meta .sub{font-size:12px;color:var(--ink-soft);display:flex;gap:10px;flex-wrap:wrap}
.warn{color:var(--out);font-weight:700}
.warn.opp{color:#B8860B}
.clock{padding:6px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:150px;position:relative}
.clock .t{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:44px;line-height:.95;
  font-variant-numeric:tabular-nums}
.clock .lab{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft)}
.clock.paused .t{color:var(--ink-soft)}
.clock .lab{display:flex;align-items:center;gap:5px;justify-content:center}
.clock.paused .lab{color:var(--biro)}
.score{padding:6px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:118px}
.score .v{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:44px;line-height:.95;
  font-variant-numeric:tabular-nums}
.score .lab{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft)}
/* contatore cambi: stessa dignita' visiva del risultato */
.score.subs{min-width:118px}
.score.subs .v{font-size:34px;color:var(--biro)}
.score.subs.quasi .v{color:#B8860B}
.score.subs.quasi .lab{color:#B8860B}
.score.subs.esauriti .v,.score.subs.esauriti .lab{color:var(--out)}
.top-home{padding:0 14px;display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--biro);min-width:46px}
.top-home:active{background:var(--paper)}
.top-btn{padding:0 16px;display:flex;align-items:center;font-family:'Barlow Condensed',sans-serif;
  font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:15px;color:var(--biro)}

.cols{flex:1;min-height:0;display:flex;gap:1px;background:var(--line)}
.col{background:var(--paper);display:flex;flex-direction:column;min-height:0}
.col-field{flex:1.65;position:relative}
.col-bench{flex:1}
.col-head{display:flex;align-items:baseline;gap:10px;padding:10px 14px 6px;flex:0 0 auto}
.col-head .count{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px}
.col-head .count.low{color:var(--out)}
.grid{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:grid;gap:8px;
  padding:0 12px 12px;align-content:start}
.col-field .grid{grid-template-columns:repeat(3,1fr);position:relative;z-index:1}
.col-bench .grid{grid-template-columns:repeat(2,1fr)}
.pitch{position:absolute;left:12px;right:12px;top:44px;height:min(58%,420px);pointer-events:none;
  opacity:.45;z-index:0}
.sect{grid-column:1/-1;padding:14px 2px 2px;font-family:'Barlow Condensed',sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--ink-soft);
  border-top:1px dashed var(--line);margin-top:6px}

.p{background:var(--card);border:1px solid var(--line);border-radius:var(--r);min-height:var(--tap);
  padding:8px 10px;display:flex;align-items:center;gap:9px;box-shadow:var(--shadow);text-align:left;
  transition:transform .08s ease}
.p:active{transform:scale(.97)}
.p .n{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:26px;line-height:1;
  min-width:32px;text-align:center;color:var(--biro);font-variant-numeric:tabular-nums}
.p .nm{font-weight:600;font-size:15px;line-height:1.15;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;flex:1;min-width:0}
/* portiere: il numero su fondo ambra, si distingue senza leggere */
.p.gk .n{background:#FDF3D0;color:#8A6A00;border-radius:7px}
.p.gk{border-color:#E7D7A0}
/* fascia: capitano e vice */
.grado{display:inline-block;margin-left:6px;font-family:'Barlow Condensed',sans-serif;
  font-weight:700;font-size:11px;line-height:1;padding:3px 5px;border-radius:4px;
  vertical-align:1px;letter-spacing:.06em}
.grado.cap{background:var(--biro);color:#fff}
.grado.vic{background:var(--line-soft);color:var(--ink-soft)}

/* chi e' entrato al posto del sostituito, in piccolo sotto al nome */
.p .nm .sost{display:block;font-style:normal;font-weight:600;font-size:12px;color:var(--in);
  letter-spacing:.01em;margin-top:1px;overflow:hidden;text-overflow:ellipsis}
.p .tag{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12px;color:var(--ink-soft)}
.p .marks{display:flex;gap:3px;align-items:center}
.p .ph{width:34px;height:34px}
.mark{width:11px;height:15px;border-radius:2px;display:inline-block}
.mark.y{background:var(--yel)} .mark.r{background:var(--out)}
.mark.i{background:var(--ink-soft);border-radius:50%;height:11px}
.mark.c{background:var(--biro);width:14px;height:6px;border-radius:3px}
.p.gone{background:transparent;border-style:dashed;box-shadow:none;opacity:.6;cursor:default}
.p.gone .n{color:var(--ink-soft)}
.p.gone:active{transform:none}
.p.sentoff{border-color:var(--out)}
.p.sentoff .n{color:var(--out)}

/* firma visiva: la coppia freccia rossa giu' / verde su del foglio */
.p.picked{border-color:var(--out);background:#FFF2F1;box-shadow:0 0 0 3px rgba(200,47,42,.18)}
.p.picked .n{color:var(--out)}
.p.picked::after{content:"↓";font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:30px;
  color:var(--out);line-height:1}
body.subbing .col-bench .p:not(.gone){border-color:var(--in);background:#F1FAF3}
body.subbing .col-bench .p:not(.gone) .n{color:var(--in)}
body.subbing .col-bench .p:not(.gone)::after{content:"↑";font-family:'Barlow Condensed',sans-serif;
  font-weight:700;font-size:30px;color:var(--in);line-height:1}
body.subbing .col-field .p:not(.picked){opacity:.35}
body.picking .col-field .p{border-color:var(--biro);box-shadow:0 0 0 3px rgba(27,63,191,.15)}
body.picking .col-bench .p{opacity:.3;pointer-events:none}

.strip{flex:0 0 auto;display:none;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;background:var(--ink);color:#fff}
.strip.on{display:flex}
.strip .txt{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:20px;
  letter-spacing:.04em;text-transform:uppercase}
.strip .alt{display:flex;gap:8px}
.strip button.att{background:var(--in);color:#fff}
.strip button{background:rgba(255,255,255,.16);padding:10px 16px;border-radius:8px;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;font-size:15px}

/* barra ultima azione: sempre presente, non copre nulla, non scompare */
.last{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:0 8px 0 16px;min-height:52px;
  background:#fff;border-top:1px solid var(--line)}
.last .k{font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;font-size:11px;color:var(--ink-soft);flex:0 0 auto}
.last .m{flex:1;min-width:0;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.last .m .min{font-family:'Barlow Condensed',sans-serif;font-weight:700;color:var(--biro);margin-right:6px}
.last .m.empty{font-weight:400;color:var(--ink-soft)}
.last .undo{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:10px 16px;
  min-height:42px;font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:15px;color:var(--out)}
.last .undo[disabled]{opacity:.3;color:var(--ink-soft)}
.last .undo.redo{color:var(--in)}
.last .undo.altro{color:var(--biro);border-color:var(--line)}
/* a partita chiusa i comandi restano attivi ma cambiano significato */
body.chiusa .act::after{content:'a mano';position:absolute;bottom:3px;font-size:9px;
  color:var(--ink-soft);letter-spacing:.06em}
body.chiusa .act{position:relative;padding-bottom:14px}
body.chiusa .act.end::after,body.chiusa .act.prova::after{content:''}
.last.flash{animation:fl .5s ease}
@keyframes fl{0%{background:#FFF6CC}100%{background:#fff}}

.actions{flex:0 0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:1px;background:var(--line);
  border-top:1px solid var(--line)}
.act{background:var(--card);min-height:74px;padding:8px 6px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;font-family:'Barlow Condensed',sans-serif;
  font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:15px}
.act:active{background:var(--paper)}
.act .ico{font-size:22px;line-height:1}
.act.gf{color:var(--in)} .act.gs{color:var(--out)} .act.end{color:var(--biro)}
.act.prova{color:#8A6A00;background:#FDF9EC}
.act[disabled]{opacity:.35}

/* ---------- tabellino ---------- */
.sheet{position:fixed;inset:0;z-index:80;background:rgba(20,24,31,.45);display:none;
  align-items:stretch;justify-content:flex-end}
.sheet.on{display:flex}
.sheet-inner{background:var(--paper);width:min(580px,100%);display:flex;flex-direction:column;
  box-shadow:-8px 0 30px rgba(0,0,0,.2)}
.ev{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line-soft);
  border-radius:8px;padding:10px 12px;margin-bottom:6px}
.ev .min{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:20px;min-width:60px;
  color:var(--biro);font-variant-numeric:tabular-nums}
.ev .d{flex:1;font-size:15px}
.ev .k{font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft)}
.ev .del{color:var(--out);font-family:'Barlow Condensed',sans-serif;font-weight:600;
  text-transform:uppercase;font-size:13px;padding:8px}
.ev .edit{color:var(--biro);font-family:'Barlow Condensed',sans-serif;font-weight:600;
  text-transform:uppercase;font-size:13px;padding:8px}
.ev.sys{background:transparent;border-style:dashed}
.mins{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line-soft);
  border-radius:8px;overflow:hidden}
.mins td,.mins th{padding:7px 10px;border-bottom:1px solid var(--line-soft);font-size:14px;text-align:left}
.mins th{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.1em;
  font-size:12px;color:var(--ink-soft)}
.mins td.n{font-family:'Barlow Condensed',sans-serif;font-weight:700;color:var(--biro);width:38px}
.mins td.m{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
/* Tabella statistiche.
   La colonna del nome si prende tutto lo spazio avanzato, cosi' le colonne
   numeriche restano strette e vicine alla propria intestazione. */
.mins.stats{table-layout:auto}
.mins.stats td,.mins.stats th{padding:7px 10px;font-size:13px;white-space:nowrap}
.mins.stats th.m,.mins.stats td.m{text-align:center;width:1%}
.mins.stats th.nh,.mins.stats td.n{width:1%;text-align:center;padding-right:4px}
.mins.stats th.nome,.mins.stats td.nome{width:100%;white-space:normal}
.mins.stats td.nome em{font-style:normal;color:var(--ink-soft);font-size:12px}
/* righe alternate: con venti giocatori l'occhio perde la riga */
.mins.stats tr:nth-child(even) td{background:#F6F7F9}
.mins.stats tr:first-child th{background:var(--card);position:sticky;top:0;z-index:2;
  box-shadow:0 1px 0 var(--line)}
/* separatore prima del blocco disciplina */
.mins.stats td:nth-child(8),.mins.stats th:nth-child(8){border-left:1px solid var(--line-soft)}
/* intestazioni cliccabili */
.mins.stats th[data-sort]{cursor:pointer;user-select:none;position:relative}
.mins.stats th[data-sort]:hover{color:var(--biro)}
.mins.stats th.sorted{color:var(--biro)}
.mins.stats th.sorted::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--biro)}
.mins.stats th[data-sort]:active{opacity:.6}
.mins.stats .zero{color:var(--line)}
.mins.stats .mark{vertical-align:-2px;margin-right:4px}
.bar{height:6px;background:var(--line-soft);border-radius:3px;overflow:hidden;margin-top:3px}
.bar i{display:block;height:100%;background:var(--biro)}
h3.sh{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.1em;
  font-size:14px;color:var(--ink-soft);margin:22px 0 8px}

/* ============================================================
   FOGLIO PARTITA — ricalcato sul modulo cartaceo
   Stesse caselle squadrate, stessa suddivisione 1°T / 2°T, stesse
   frecce rossa e verde per i cambi. Su A4 entra in una pagina.
   ============================================================ */
.scheda{background:#fff;border:1px solid var(--ink);padding:0;max-width:900px;margin:0 auto;
  font-size:12.5px;color:var(--ink)}
.testata{width:100%;border-collapse:collapse}
.testata td{border:1px solid var(--ink);padding:4px 7px;vertical-align:middle}
.testata .k{font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:10.5px;background:#F2F3F5;width:78px;white-space:nowrap}
.testata .v{font-size:13px}
.testata .fin{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:20px;
  vertical-align:-2px}

.scheda-corpo{display:flex;border-top:0}
.col-elenco{width:33%;border-right:1px solid var(--ink);padding:6px 8px 8px}
.col-blocchi{flex:1;display:flex;flex-direction:column}
.col-tit{font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:10.5px;color:var(--ink-soft);margin-bottom:4px}
.col-tit span{text-transform:none;letter-spacing:0}
.lista{list-style:none;margin:0;padding:0;counter-reset:r}
.lista li{counter-increment:r;display:flex;align-items:baseline;gap:6px;
  border-bottom:1px solid var(--line);min-height:19px;padding:1px 0}
.lista li::before{content:counter(r);font-family:'Barlow Condensed',sans-serif;
  color:var(--ink-soft);font-size:10px;min-width:14px;text-align:right}
.lista .ln{font-family:'Barlow Condensed',sans-serif;font-weight:700;color:var(--biro);
  min-width:20px;text-align:center;font-size:13px}
.lista .lv{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lista li.tit .lv{font-weight:700}

.blocco{border-bottom:1px solid var(--ink);padding:5px 8px 7px;flex:1}
.blocco:last-child{border-bottom:0}
.blocco-tit{display:inline-block;background:var(--ink);color:#fff;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.1em;
  font-size:11px;padding:2px 8px;margin-bottom:5px}
.riga{display:flex;gap:8px;align-items:baseline;border-bottom:1px solid var(--line);
  min-height:20px;padding:1px 0}
.riga .et{font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:.08em;
  font-size:10.5px;color:var(--ink-soft);min-width:34px}
.riga .va{flex:1}
.cambi-tit{display:flex;gap:8px;margin:6px 0 2px}
.frec{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;padding:1px 7px;border-radius:3px}
.frec.giu{background:#FBE4E2;color:var(--out);margin-left:52px}
.frec.su{background:#E4F3E9;color:var(--in)}
.tab-cambi{width:100%;border-collapse:collapse;margin-bottom:5px}
.tab-cambi td{border:1px solid var(--line);padding:2px 5px;height:19px;font-size:12px}
.tab-cambi .c-min{width:46px;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  color:var(--biro);text-align:center}
.tab-cambi .c-out{width:38%;color:var(--out)}
.tab-cambi .c-in{color:var(--in)}
.chiusura{display:flex;justify-content:flex-end;align-items:baseline;gap:10px;margin-top:5px}
.chiusura span{font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:.1em;
  font-size:10.5px;color:var(--ink-soft)}
.chiusura b{font-family:'Barlow Condensed',sans-serif;font-size:19px}
.pie{border-top:1px solid var(--ink);padding:6px 8px;font-size:11.5px;color:var(--ink)}
.pie b{font-family:'Barlow Condensed',sans-serif;letter-spacing:.06em;text-transform:uppercase;
  font-size:10.5px;color:var(--ink-soft)}

/* seconda pagina del foglio: dettaglio statistico */
.pagina2{margin-top:18px}
.tab2{width:100%;border-collapse:collapse;font-size:11.5px}
.tab2 th{font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;font-size:10px;color:var(--ink-soft);text-align:left;
  border-bottom:1px solid var(--ink);padding:3px 5px}
.tab2 td{border-bottom:1px solid var(--line);padding:3px 5px}
.tab2 .n2{font-family:'Barlow Condensed',sans-serif;font-weight:700;color:var(--biro);
  width:26px;text-align:center}
.tab2 .m2{text-align:right;font-weight:700;width:42px;font-variant-numeric:tabular-nums}
.tab2 .zona{color:var(--ink-soft)}
.tab2 .nota{color:var(--ink-soft);width:28%}

@media print{
  body{background:#fff}
  #app{display:block;height:auto}
  .hdr,.foot,.noprint,.top,.actions,.last,.strip,.cols{display:none!important}
  .pagina2{page-break-before:always;margin-top:0}
  .body{overflow:visible;padding:0}
  .scheda{border:1.2px solid #000;max-width:none;font-size:11px}
  .lista li{min-height:16px}
  .tab-cambi td{height:16px}
  @page{margin:10mm;size:A4}
}

@media (max-width:820px){
  .plist,.plist.conv{grid-template-columns:1fr}
  .cols{flex-direction:column}
  .col-field .grid,.col-bench .grid{grid-template-columns:repeat(2,1fr)}
  .col-bench{flex:0 0 auto;max-height:36vh}
  .pitch{display:none}
  .actions{grid-template-columns:repeat(4,1fr)}
  .clock{min-width:104px}.clock .t,.score .v{font-size:32px}
  .top-meta{display:none}
  .last .k{display:none}
  .top-home{min-width:40px;padding:0 10px}
  .report .cols2{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ============================================================
   CANCELLO: accesso, PIN, sblocco
   ============================================================ */
.view.gate{align-items:center;justify-content:center;padding:24px;overflow-y:auto}
.gate-box{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:28px 26px 22px;width:min(420px,100%);text-align:center;box-shadow:var(--shadow);margin:auto}
.gate-logo{margin-bottom:10px}
.gate-box h1{margin:0 0 4px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:32px}
.gate-sub{margin:0 0 18px;color:var(--ink-soft);font-size:14px}
.gate-warn{color:var(--out);font-size:13px;font-weight:600;margin:12px 0 0}
.gate-note{color:var(--ink-soft);font-size:12px;margin:18px 0 0;line-height:1.4}
.gate-box .f{text-align:left}
.gate-box .fields{gap:12px}

/* pallini del PIN */
.pindots{display:flex;gap:10px;justify-content:center;margin:8px 0 18px;min-height:16px}
.pindots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);display:block}
.pindots i.on{background:var(--biro);border-color:var(--biro)}

/* tastierino: tasti grandi, si usano senza guardare */
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.keypad .tk{background:var(--paper);border:1px solid var(--line);border-radius:12px;min-height:62px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:28px;color:var(--ink)}
.keypad .tk:active{background:var(--line-soft);transform:scale(.96)}
.keypad .tk.canc{font-size:22px;color:var(--ink-soft)}
@media (max-height:640px){ .keypad .tk{min-height:50px;font-size:24px} }


/* ============================================================
   MODULO — campo, panchina e segnalini
   Panchina a destra del campo: i cambi si fanno trascinando da li',
   quindi deve stare a portata di pollice accanto al terreno di gioco.
   La lista dello schieramento sta sotto: e' una verifica, non lo
   strumento di lavoro, perche' i giocatori si vedono gia' sul campo.
   ============================================================ */
.modtop{display:flex;gap:16px;align-items:flex-start}
.campo-wrap{flex:0 0 auto}
.campo{position:relative;width:min(470px,48vw);aspect-ratio:100/140;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.045) 0 7.14%, rgba(0,0,0,.03) 7.14% 14.28%),
    linear-gradient(180deg,#2F8A4C,#256E3D);
  border-radius:14px;overflow:visible;touch-action:none;
  box-shadow:0 2px 10px rgba(20,24,31,.25), inset 0 0 60px rgba(0,0,0,.18)}
.campo-linee{position:absolute;inset:0;width:100%;height:100%;border-radius:14px;overflow:hidden}
.campo-hint{margin:8px 2px 0;color:var(--ink-soft);font-size:13px;text-align:center}

.panca{flex:1;min-width:230px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:12px 14px;align-self:stretch}
.panca-tit{font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;font-size:12px;color:var(--ink-soft)}
.panca-tit b{color:var(--ink);font-size:14px}
.panca-list{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 4px;min-height:60px}
.panca-vuota{color:var(--ink-soft);font-size:13px}

.tok{position:absolute;transform:translate(-50%,-50%);width:64px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  cursor:grab;touch-action:none;user-select:none}
.tok.drag{cursor:grabbing;z-index:30;filter:drop-shadow(0 6px 12px rgba(0,0,0,.5));opacity:.92}
.tok .maglia{position:relative;width:40px;height:40px;border-radius:50%;
  background:var(--card);border:2px solid rgba(0,0,0,.18);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 5px rgba(0,0,0,.35)}
.tok .maglia b{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:21px;
  line-height:1;color:var(--biro)}
.tok.gk .maglia{background:#F7D774;border-color:#C9A63A}
.tok.gk .maglia b{color:#6B5200}
.tok.sel .maglia{border-color:var(--biro);box-shadow:0 0 0 3px rgba(255,255,255,.9),0 2px 6px rgba(0,0,0,.4)}
.tok .fascia{position:absolute;top:-4px;right:-4px;font-style:normal;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10px;line-height:1;
  background:var(--biro);color:#fff;border-radius:4px;padding:2px 4px;border:1.5px solid #fff}
.tok .tnm{margin-top:3px;font-size:11px;font-weight:700;line-height:1.1;text-align:center;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.7);max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.tok .tq{font-size:9px;line-height:1.1;text-align:center;color:rgba(255,255,255,.82);
  text-shadow:0 1px 2px rgba(0,0,0,.6);max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

.tok.mini{position:static;transform:none;width:58px}
.tok.mini .maglia{width:34px;height:34px}
.tok.mini .maglia b{font-size:18px}
.tok .tnm.scuro{color:var(--ink);text-shadow:none}

.selbox{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:12px;margin-top:12px}
.selhead{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.selhead b{display:block;font-size:15px}
.selhead em{font-style:normal;color:var(--ink-soft);font-size:13px}
.selhead .close{margin-left:auto}
.usciti{margin-top:14px;border-top:1px dashed var(--line);padding-top:10px}
.urow{display:flex;align-items:center;gap:8px;font-size:13px;padding:5px 0;
  border-bottom:1px solid var(--line-soft)}
.urow:last-child{border-bottom:0}
.umin{font-family:'Barlow Condensed',sans-serif;font-weight:700;color:var(--biro);
  min-width:52px;font-variant-numeric:tabular-nums}
.uout{color:var(--out);flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uin{color:var(--in);flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panca .vuoto{color:var(--ink-soft);font-size:13px;margin:14px 0 0;
  border-top:1px dashed var(--line);padding-top:12px}
.mins tr.ev-sel td{background:#EEF2FF}

@media (max-width:900px){
  .modtop{flex-direction:column;align-items:center}
  .campo{width:min(430px,90vw)}
  .panca{width:100%}
}

/* ---------- calendario ---------- */
.sez{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
  margin:18px 0 8px;font-weight:700}
.frow-wrap{display:flex;align-items:stretch;gap:1px;margin-bottom:6px}
.frow{flex:1;display:flex;align-items:center;gap:14px;padding:12px 14px;background:#fff;
  border:1px solid var(--line);border-radius:10px;text-align:left}
.frow:active{background:var(--paper)}
.frow.oggi{border-color:var(--biro);box-shadow:0 0 0 2px rgba(26,54,126,.12)}
.frow.passata,.frow.fatta{opacity:.62}
.frow .fd{width:120px;font-weight:700;color:var(--biro);display:flex;flex-direction:column}
.frow .fd em{font-style:normal;font-weight:500;font-size:12px;color:var(--ink-soft)}
.frow .fo{flex:1;font-weight:700;display:flex;flex-direction:column}
.frow .fo em{font-style:normal;font-weight:500;font-size:12px;color:var(--ink-soft)}
.frow .fs{font-size:12px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em}
.vuoto{color:var(--ink-soft);padding:24px 0;line-height:1.6}
.cal-avviso{background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:10px 14px;margin-bottom:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cal-avviso.ok{border-color:var(--in);background:rgba(20,120,60,.06)}
.modal-inner.grande{max-width:760px}
table.girone{width:100%;border-collapse:collapse;margin-bottom:6px}
table.girone td{padding:3px 8px;font-size:13px;border-bottom:1px solid var(--line)}
table.girone td.vs{width:20px;text-align:center;color:var(--ink-soft)}
table.girone tr.noi td{background:rgba(26,54,126,.07);font-weight:700}
.nota-sq{color:var(--ink-soft);font-size:13px;margin:4px 0 10px}
.lnk{color:var(--biro);text-decoration:underline;font-size:13px}

/* ---------- cartellino del cambio ----------
   Compare al centro dello schermo con i due numeri grandi: e' quello
   che serve mostrare all'arbitro. Si chiude con un tocco. */
.cartellone{position:fixed;inset:0;z-index:60;display:flex;align-items:center;
  justify-content:center;background:rgba(0,0,0,.55)}
.cartellone .cbox{background:#fff;border-radius:18px;padding:26px 34px;text-align:center;
  box-shadow:0 18px 60px rgba(0,0,0,.45)}
.cnums{display:flex;gap:34px;justify-content:center}
.cnum{display:flex;align-items:center;gap:8px;font-size:96px;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums}
.cnum .fr{font-size:44px}
.cnum.esce{color:var(--out)}
.cnum.entra{color:var(--in)}
.cartellone .cnomi{display:flex;flex-direction:column;gap:2px;margin-top:14px;font-size:15px}
.cartellone .cnomi .o{color:var(--out)}
.cartellone .cnomi .i{color:var(--in)}
.cartellone .cnomi em{font-style:normal;color:var(--ink-soft);font-size:13px;margin-top:4px}
/* il "tocca per chiudere" e' una riga di testo, non un pulsante: centrata
   e con la sua altezza di riga, altrimenti resta appiccicata in alto */
.cartellone .cok{display:block;margin-top:18px;padding:14px 18px;border-radius:10px;
  background:var(--in);color:#fff;font-weight:700;font-size:15px;line-height:1.2;
  text-align:center;letter-spacing:.04em;text-transform:uppercase}
.cok{display:block;margin-top:16px;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft)}
.big-out{font-size:26px;font-weight:800;color:var(--out);margin-right:8px;
  font-variant-numeric:tabular-nums}
/* numeri con freccia nell'elenco dei sostituiti */
.p.gone .n.out-n{color:var(--out);font-weight:800}
.p.gone .sost .fr{color:var(--in);font-weight:800;margin-right:2px}
.p.gone .sost b{color:var(--in);font-weight:800}
.p.gone{cursor:pointer}
.p.gone:active{background:var(--paper)}

.modal-inner.grande{max-width:760px}
table.girone{width:100%;border-collapse:collapse;margin-bottom:6px}
table.girone td{padding:3px 8px;font-size:13px;border-bottom:1px solid var(--line)}
table.girone td.vs{width:20px;text-align:center;color:var(--ink-soft)}
table.girone tr.noi td{background:rgba(26,54,126,.07);font-weight:700}
.nota-sq{color:var(--ink-soft);font-size:13px;margin:4px 0 10px}
.lnk{color:var(--biro);text-decoration:underline;font-size:13px}

/* ---------- cartellino del cambio ---------- */
.cartellini{display:none}
.cartellini.on{display:flex;gap:10px;padding:10px 14px;background:#111;overflow-x:auto}
.cart{display:flex;align-items:center;gap:14px;background:#fff;border-radius:12px;
  padding:10px 16px;min-width:330px;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.cart:active{transform:scale(.99)}
.cnum{display:flex;align-items:center;gap:6px;font-size:44px;font-weight:800;
  line-height:1;font-variant-numeric:tabular-nums}
.cnum .fr{font-size:24px}
.cnum.esce{color:var(--out)}
.cnum.entra{color:var(--in)}
.cnomi{display:flex;flex-direction:column;gap:1px;font-size:12px;line-height:1.35;flex:1}
.cnomi .o{color:var(--out)}
.cnomi .i{color:var(--in)}
.cnomi em{font-style:normal;color:var(--ink-soft)}
.cok{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.big-out{font-size:26px;font-weight:800;color:var(--out);margin-right:8px;
  font-variant-numeric:tabular-nums}
.scelta{display:block;width:100%;text-align:left;padding:12px 14px;background:#fff;
  border:1px solid var(--line);border-radius:10px;margin-bottom:8px}
.scelta:active{background:var(--paper)}
.scelta b{display:block;font-size:15px}
.scelta em{font-style:normal;font-size:12px;color:var(--ink-soft)}
.scelta.fuori{border-style:dashed}
.btn.danger{color:var(--out);border-color:rgba(190,40,40,.35)}
/* i sostituiti stanno uno per riga: i nomi non vanno troncati, sono
   la conferma che il numero mostrato all'arbitro è quello giusto */
.colonna{grid-column:1/-1;display:flex;flex-direction:column;gap:6px}
.colonna .p{width:100%}
.colonna .p .nm{white-space:normal}
.modal .sez{margin-top:16px}
.modal-inner .body{max-height:70vh;overflow-y:auto}
.rapidi{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
/* cronometro oltre il tempo regolamentare */
.clock.oltre .t{color:var(--amber,#b8860b)}
.clock.scaduto .t{color:var(--out)}
.clock.scaduto{background:rgba(190,40,40,.07)}
.score.rec .v{font-size:20px}
.score.rec.att .v{color:var(--amber,#b8860b)}
.score.rec.scaduto .v{color:var(--out)}
.nota{width:100%;border:1px solid var(--line);border-radius:8px;padding:10px 12px;
  font:inherit;font-size:14px;resize:vertical;background:#fff}
.nota-stato{font-size:11px;color:var(--ink-soft);min-height:14px;margin-top:4px}
.note-gara{border:1px solid #000;border-top:none;padding:6px 10px;font-size:11px;line-height:1.5}
.note-gara b{font-size:9px;letter-spacing:.1em;display:block;margin-bottom:2px}
/* lettura del foglio di convocazione */
.girella{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--biro);
  border-radius:50%;margin:0 auto;animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.girella{animation-duration:2.4s}}
.letti{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:5px}
.letto{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:9px 12px}
.letto input{width:20px;height:20px}
.letto .ln{font-weight:800;color:var(--biro);width:24px;text-align:center;
  font-variant-numeric:tabular-nums}
.letto .lnome{font-size:14px;font-weight:600;display:flex;flex-direction:column}
.letto .lnome em{font-style:normal;font-weight:400;font-size:11px;color:var(--ink-soft)}
.letto.incerto{border-color:#e8d4a0;background:#fffbe9}
.letto .dub{color:var(--amber,#b8860b)}

/* ============================================================
   Home ripensata: la gara di oggi è la cosa che conta
   ============================================================ */
.gara-hero{background:#fff;border:1px solid var(--line);border-left:4px solid var(--biro);
  border-radius:12px;padding:18px 20px;display:flex;align-items:center;gap:20px;margin-bottom:14px}
.gara-hero .quando{text-align:center;padding-right:18px;border-right:1px solid var(--line);
  min-width:64px}
.gara-hero .quando b{display:block;font-size:30px;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums}
.gara-hero .quando span{font-size:12px;color:var(--ink-soft)}
.gara-hero .chi{flex:1;min-width:0}
.gara-hero .chi b{display:block;font-size:21px;letter-spacing:-.01em;line-height:1.2}
.gara-hero .chi span{color:var(--ink-soft);font-size:13px}
.gara-hero.viva{border-left-color:var(--in);background:#f5fbf7}
.gara-hero.vuoto{border-left-color:var(--line)}
.gara-hero .pallino{width:8px;height:8px;border-radius:50%;background:var(--in);flex:none}
.scorciatoie{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.scorciatoia{background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px 16px;
  text-align:left;display:flex;align-items:baseline;gap:10px}
.scorciatoia:active{background:var(--paper)}
.scorciatoia b{font-size:15px}
.scorciatoia span{color:var(--ink-soft);font-size:13px}
.suggerimento{color:var(--ink-soft);font-size:12px;margin:10px 0 0}

/* ============================================================
   Convocazione: si legge il riepilogo, si tocca il giocatore
   ============================================================ */
.riepilogo-gara{display:flex;align-items:center;gap:14px;background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin-bottom:10px}
.rg-testo{flex:1;min-width:0}
.rg-opp{font-size:19px;font-weight:700;border:none;padding:0;width:100%;background:none}
.rg-opp:focus{outline:none;border-bottom:2px solid var(--biro)}
.rg-meta{color:var(--ink-soft);font-size:13px;margin-top:2px}
.dettagli-gara{background:#fbfbfc;border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;margin-bottom:10px}
.regola-cambi{color:var(--ink-soft);font-size:12px;margin:10px 0 0}
.strumenti-conv{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}

/* riga giocatore: stato dal colore, un solo bersaglio */
.prow[data-ciclo]{cursor:pointer}
.prow[data-ciclo] .stato{font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;
  border:1px solid var(--line);color:var(--ink-soft);white-space:nowrap}
.prow.xi{border-color:var(--biro);background:#eef2fb}
.prow.xi .stato{background:var(--biro);color:#fff;border-color:var(--biro)}
.prow.pan .stato{background:#fff3d6;color:#8a6400;border-color:#e8d4a0}
.prow.off{opacity:.5}
.prow[data-ciclo]:active{transform:scale(.995)}

/* ============================================================
   Telefono: una schermata, un compito
   ============================================================ */
.tabs-campo{display:none}
@media (max-width:760px){
  .scorciatoie{grid-template-columns:1fr;gap:6px}
  .gara-hero{flex-wrap:wrap;padding:15px 16px;gap:12px}
  .gara-hero .chi{flex-basis:100%;order:2}
  .gara-hero .btn{flex:1;order:3}
  .gara-hero .quando{order:1;border:none;padding-right:0;display:flex;align-items:baseline;gap:6px}
  .gara-hero .quando b{font-size:22px}

  .riepilogo-gara{flex-wrap:wrap}
  .dettagli-gara .f{width:100% !important}

  /* partita: le tre colonne diventano tre linguette */
  .tabs-campo{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;
    border-bottom:1px solid var(--line)}
  .tabs-campo button{padding:10px 4px;font-size:13px;font-weight:700;color:var(--ink-soft);
    border-right:1px solid var(--line);background:none}
  .tabs-campo button:last-child{border-right:none}
  .tabs-campo button.att{background:var(--biro);color:#fff}
  .cols{display:block}
  .cols .col{display:none;width:100%;border:none}
  body.tab-campo .cols .col.campo,
  body.tab-panca .cols .col.panca{display:block}
  .grid{grid-template-columns:1fr}

  /* comandi in fondo, dove arriva il pollice */
  .actions{grid-template-columns:repeat(3,1fr)}
  .act{min-height:60px;padding:10px 2px;font-size:12px}
  .act .ico{font-size:17px}
  .last{flex-wrap:wrap;gap:6px;padding:8px 10px}
  .top{flex-wrap:wrap}
  .top-meta{display:block;flex-basis:100%;padding:6px 12px}
  .top-meta .gara{font-size:14px}
  .clock .t{font-size:22px}
  .cnum{font-size:64px}
}
.spiega-tocco{background:#eef2fb;border:1px solid #cfd9ee;border-radius:9px;
  padding:10px 14px;margin-bottom:12px;font-size:13px;color:var(--ink)}
.spiega-tocco b{display:block;margin-bottom:2px}
.prow[data-ciclo] .stato{border:1px solid var(--line);background:#fff}
.prow.off .stato{color:var(--ink-soft)}
@media (max-width:760px){
  /* in convocazione il bersaglio deve essere grande: si tocca in piedi,
     con il telefono in una mano */
  .prow[data-ciclo]{padding:12px 12px;gap:10px}
  .prow[data-ciclo] .stato{font-size:12px;padding:7px 12px;min-width:96px;text-align:center}
  .prow[data-ciclo] .nm em{display:none}
  /* La foto serve proprio qui: si riconosce un ragazzo prima ancora di
     leggere il nome. Si rimpicciolisce, non si toglie. */
  .prow .ph{width:30px;height:30px}
  .prow[data-ciclo] .ph{width:34px;height:34px}
  .strumenti-conv .btn{flex:1 1 45%}
  .foot{flex-wrap:wrap;gap:8px}
  .foot .info{flex-basis:100%}
  .foot .btn{flex:1}
}

/* ============================================================
   Telefono: bersagli e testi di dimensione adeguata
   ============================================================ */
@media (max-width:760px){
  body{font-size:16px}
  .btn{padding:12px 16px;font-size:15px;min-height:46px}
  .btn.sm{padding:10px 14px;font-size:14px;min-height:42px}
  .hdr{padding:10px 14px}
  .hdr h1{font-size:20px}
  .back{font-size:14px;padding:8px 10px}
  .body{padding:12px}

  .gara-hero .chi b{font-size:19px;overflow-wrap:anywhere}
  .gara-hero .chi span{font-size:13px}
  .scorciatoia{padding:15px 16px;min-height:52px}

  .mrow{padding:12px 14px;gap:10px;min-height:60px}
  .mrow .d{font-size:11px;width:56px;flex:none;line-height:1.25}
  .mrow .o{font-size:15px;min-width:0;overflow:hidden}
  .mrow .o em{font-size:12px}
  .mrow .res{font-size:19px}
  .mdel{font-size:13px;padding:0 14px}
  body.archedit .mrow{padding-right:96px}

  .sh{font-size:12px}
  .foot{padding:10px 12px}
  .foot .btn{min-height:48px;font-size:15px}
  .modal-inner{max-width:100%;margin:0;border-radius:12px 12px 0 0}
  .modal-inner .body{max-height:64vh}
  .scelta{padding:14px}
  .scelta b{font-size:15px}
  .fields .f{width:100% !important}
  .fields input,.fields select{min-height:46px;font-size:16px}
  .rg-opp{font-size:18px}
  .spiega-tocco{font-size:14px;padding:12px 14px}
  .prow[data-ciclo]{min-height:58px}
  .prow[data-ciclo] .nm{font-size:15px}
  .prow[data-ciclo] .n{font-size:17px;min-width:34px}
}

/* ============================================================
   Convocazione: lo stato dev'essere leggibile di sfuggita
   ============================================================ */
.prow .segno{flex:none;width:34px;height:34px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-weight:800;font-size:16px;
  border:2px solid var(--line);color:var(--ink-soft);background:#fff}
.prow.xi .segno{background:var(--biro);border-color:var(--biro);color:#fff}
.prow.pan .segno{background:#f0b429;border-color:#d99e10;color:#3a2c00}
.prow.off .segno{border-style:dashed}
.prow.xi{border-left:4px solid var(--biro)}
.prow.pan{border-left:4px solid #f0b429}
.prow.off{border-left:4px solid transparent;opacity:.62}
.prow[data-ciclo] .stato{font-weight:700}
.prow.xi .stato{color:var(--biro);border-color:#c3cfe8;background:#eef2fb}
.prow.pan .stato{color:#8a6400;background:#fff3d6;border-color:#e8d4a0}

@media (max-width:760px){
  .prow .segno{width:40px;height:40px;font-size:19px}
  .prow[data-ciclo] .stato{min-width:112px;font-size:13px;padding:9px 10px}
  .prow[data-ciclo]{min-height:64px;padding:11px 10px}
  .prow[data-ciclo] .n{min-width:30px;font-size:16px;color:var(--ink-soft)}
}

/* ============================================================
   Telefono, schermata di gara
   I comandi non appartengono a una linguetta: restano ancorati in
   fondo, sopra qualunque elenco si stia guardando. La lista scorre
   sotto di loro.
   ============================================================ */
@media (max-width:760px){
  .view.match{padding-bottom:0}
  .cols{overflow-y:auto;-webkit-overflow-scrolling:touch}
  /* una colonna sola: due tagliavano le schede a metà */
  .cols .grid{grid-template-columns:1fr !important;padding:8px}
  .col-field .pitch{display:none}
  .col-field{background:none}
  .col-head{padding:8px 12px 0}

  .strip{position:sticky;bottom:0;z-index:5}
  .actions{position:sticky;bottom:0;z-index:6;box-shadow:0 -6px 18px rgba(0,0,0,.12)}
  .last{position:sticky;bottom:0;z-index:6}

  /* le linguette restano in alto mentre si scorre */
  .tabs-campo{position:sticky;top:0;z-index:7}
  .tabs-campo button{padding:12px 4px;font-size:14px}

  /* la barra superiore sta su due righe fisse, senza scorrimento laterale */
  .top{display:flex;flex-wrap:wrap;position:relative;padding-top:2px}
  .top-meta{flex-basis:100%;padding:6px 12px 4px 40px}
  .top-home{position:absolute;left:0;top:2px;min-width:38px;height:38px}
  .top .clock,.top .score,.top .top-btn{flex:1;min-width:0;padding:6px 4px;text-align:center}
  .top .clock .t{font-size:20px}
  .top .score .v{font-size:20px}
  .top .lab{font-size:10px}
  .top .top-btn{display:flex;align-items:center;justify-content:center;font-size:13px}
}

/* ---------- elenco eventi nella schermata di gara ---------- */
.col-eventi{padding:0}
.ev-row{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:9px;padding:10px 12px;margin:0 8px 6px}
.ev-row.sys{background:var(--paper);border-style:dashed;opacity:.8}
.ev-row.manca{border-color:var(--amber,#b8860b);background:#fffbe9}
.ev-min{font-weight:800;color:var(--biro);min-width:52px;display:flex;flex-direction:column;
  line-height:1.1;font-variant-numeric:tabular-nums}
.ev-min em{font-style:normal;font-weight:500;font-size:10px;color:var(--ink-soft)}
.ev-t{flex:1;font-size:14px}
.ev-b{border:1px solid var(--line);background:#fff;border-radius:7px;padding:7px 10px;
  font-size:12px;font-weight:700;color:var(--biro)}
.ev-b.via{color:var(--out)}

/* niente scorrimento laterale: su telefono è sempre un difetto */
html,body{overflow-x:hidden;max-width:100%}
.view,.body,.cols,.col,.top,.actions,.last,.strip{max-width:100%}
.top{overflow:hidden}

@media (max-width:760px){
  /* Una linguetta alla volta: le regole devono vincere su qualsiasi
     altra, altrimenti due elenchi finiscono uno sopra l'altro. */
  .cols{display:block !important;position:relative}
  .cols .col{display:none !important;width:100% !important;border:none !important;
    position:static !important;height:auto !important}
  body.tab-campo  .cols .col.campo,
  body.tab-panca  .cols .col.panca,
  body.tab-cambi  .cols .col.cambi,
  body.tab-eventi .cols .col.eventi{display:block !important}
  .last{display:none !important}
  .col-eventi{padding-top:8px}
  .ev-row{padding:12px;flex-wrap:wrap}
  .ev-t{flex-basis:calc(100% - 62px)}
  .ev-b{min-height:38px;flex:1}
  .tabs-campo{grid-template-columns:repeat(4,1fr)}
  .tabs-campo button{font-size:12px;padding:11px 2px}
}
@media (min-width:761px){
  /* su schermo grande gli eventi restano nel tabellino, che c'è già */
  .col-eventi{display:none}
  .tabs-campo{display:none}
}
.ev-comandi{display:flex;gap:6px;flex-wrap:wrap;padding:8px}
.ev-comandi .ev-b{flex:1;min-height:42px}
.ev-comandi .ev-b[disabled]{opacity:.4}
@media (max-width:760px){
  .col-head{position:sticky;top:44px;background:var(--paper);z-index:2}
  .strip{position:fixed;left:0;right:0;bottom:var(--h-azioni,86px);z-index:8}
  .grid{padding-bottom:6px}
}
/* accesso e registrazione */
.gate{align-items:flex-start;overflow-y:auto;padding:max(20px,env(safe-area-inset-top)) 16px 32px}
.gate-box{margin:0 auto}
.scelta-tipo{display:flex;gap:6px;margin-bottom:14px}
.scelta-tipo .tipo{flex:1;padding:11px 8px;border:1px solid var(--line);border-radius:9px;
  background:#fff;font-size:13px;font-weight:700;color:var(--ink-soft);line-height:1.25}
.scelta-tipo .tipo.att{background:var(--biro);color:#fff;border-color:var(--biro)}
.f .aiuto{display:block;font-size:12px;color:var(--ink-soft);margin-top:4px;line-height:1.4}
.inv-row{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:9px;padding:9px 12px;margin-bottom:6px;flex-wrap:wrap}
.inv-row code{font-size:14px;font-weight:700;letter-spacing:.08em;background:var(--paper);
  padding:5px 9px;border-radius:6px}
.inv-m{flex:1;font-size:13px;display:flex;flex-direction:column;min-width:150px}
.inv-m em{font-style:normal;font-size:11px;color:var(--ink-soft);text-transform:uppercase;
  letter-spacing:.06em}
.inv-row.usato,.inv-row.scaduto,.inv-row.revocato{opacity:.55}
.inv-row.valido code{color:var(--in)}

/* la fascia dell'ultima azione è stata sostituita dai comandi
   dentro gli eventi e dal pulsante Evento nella barra comandi */
.last.hidden{display:none !important}

/* niente scorrimento laterale nell'elenco dei giocatori */
.grid{min-width:0}
.p{min-width:0;max-width:100%}
.p .nm{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){
  .cols .grid{padding:8px 10px}
  .p{padding:10px 10px;gap:8px}
  .p .n{min-width:26px;font-size:17px}
  .p .nm{font-size:14px;white-space:normal;overflow-wrap:anywhere}
  .p .ph{width:30px;height:30px;flex:none}
  .p .min{font-size:11px;flex:none}
  .actions{grid-template-columns:repeat(4,1fr)}
  .act{min-height:56px;font-size:11px;padding:8px 2px}
  .act .ico{font-size:16px}
}
/* elenco degli utenti abilitati */
.ut-row{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:9px;padding:10px 12px;margin-bottom:6px;flex-wrap:wrap}
.ut-row.spento{opacity:.55}
.ut-n{flex:1;min-width:150px;display:flex;flex-direction:column;font-size:14px;font-weight:600}
.ut-n em{font-style:normal;font-weight:400;font-size:12px;color:var(--ink-soft)}
.ut-tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:3px 9px;border-radius:20px;border:1px solid var(--line);color:var(--ink-soft)}
.ut-tag.admin{background:var(--biro);color:#fff;border-color:var(--biro)}

/* ---------- rifiniture 1.27 ---------- */
.prow .segno{cursor:pointer}
.prow .segno:active{transform:scale(.92)}

@media (max-width:760px){
  /* l'intestazione di colonna ripeteva quello che dicono già le linguette */
  .col-head{display:none !important}
  /* nessuna eccezione: niente può superare la larghezza dello schermo */
  .cols,.col,.grid{overflow-x:hidden !important;max-width:100vw}
  .cols .grid{grid-template-columns:minmax(0,1fr) !important;gap:6px}
  .grid > *{min-width:0;max-width:100%}
  .p .nm{white-space:normal}
  .actions{grid-template-columns:repeat(3,1fr)}
}

/* Su telefono nessuna griglia può imporre una larghezza minima maggiore
   dello schermo: era questa la causa dello scorrimento laterale. */
@media (max-width:760px){
  .plist,.plist.conv,.tiles,.letti{grid-template-columns:minmax(0,1fr) !important}
  .plist > *,.letti > *{min-width:0;max-width:100%}
  .view,.body{overflow-x:hidden}
  .prow{max-width:100%}

  .modal-inner .foot{position:sticky;bottom:0;background:var(--card);z-index:2}
}

/* ---------- dettatura ---------- */
.act.voce .ico{font-size:19px}
.voce-stato{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--biro);margin-bottom:10px}
.voce-stato.ko{color:var(--out)}
.voce-stato.fine{color:var(--ink-soft)}
.onda{width:11px;height:11px;border-radius:50%;background:var(--out);animation:pulsa 1s infinite}
@keyframes pulsa{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.voce-testo{font-size:17px;color:var(--ink);min-height:24px;margin:0 0 10px}
.voce-si{border:2px solid var(--in);border-radius:var(--r);padding:12px;font-size:19px;line-height:1.45}
.voce-si.incerto{border-color:var(--yel)}
.voce-si em{display:block;font-size:13px;color:var(--ink-soft);margin-top:6px;font-style:normal}
.voce-no{border:2px solid var(--line);border-radius:var(--r);padding:12px;color:var(--ink-soft)}
.voce-aiuto{font-size:13px;color:var(--ink-soft);margin-top:12px}

/* ---------- elenco di chi entra ---------- */
.entranti{display:grid;grid-template-columns:1fr;gap:8px}
.entrante{display:flex;align-items:center;gap:14px;padding:14px 16px;min-height:60px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);text-align:left;width:100%}
.entrante b{font-size:26px;color:var(--biro);min-width:44px}
.entrante span{font-size:17px}
.entrante:active{background:var(--biro);color:#fff}
.entrante:active b{color:#fff}
.tok.mini.sel{outline:3px solid var(--biro);outline-offset:2px}

/* Sul telefono il segnalino deve stare in cinque per riga senza toccarsi */
@media (max-width:760px){
  .tok .maglia{width:44px;height:44px;font-size:17px}
  .tok .tnm{font-size:10px;max-width:70px}
  .tok .tq{font-size:9px;max-width:70px}
  .actions{grid-template-columns:repeat(3,1fr)}
}

/* ---------- segnalino con foto ---------- */
.tok .maglia.confoto{background-size:cover;background-position:center 22%;
  border-color:rgba(255,255,255,.95);box-shadow:0 2px 6px rgba(0,0,0,.45)}
/* il numero non sta più dentro il disco ma su una pastiglia leggibile
   sopra qualunque foto, chiara o scura che sia */
.tok .maglia.confoto b{position:absolute;right:-5px;bottom:0;
  min-width:21px;height:21px;padding:0 3px;border-radius:11px;
  background:#fff;color:var(--biro);font-size:14px;line-height:21px;
  border:1.5px solid rgba(0,0,0,.18);box-shadow:0 1px 3px rgba(0,0,0,.35)}
.tok.gk .maglia.confoto b{background:#F7D774;color:#6B5200}
.tok.mini .maglia.confoto b{right:-4px;bottom:0;min-width:19px;height:19px;
  line-height:19px;font-size:13px}

@media (max-width:760px){
  /* Sul campo restano due sole informazioni: la faccia (o il numero) e il
     cognome. La sigla della posizione la si legge nell'elenco qui sotto,
     dove c'è spazio: sul campo era solo rumore. */
  .tok .tq{display:none}
  .tok .maglia.confoto b{min-width:22px;height:22px;line-height:22px;font-size:14px}
}

/* ---------- convocazione su telefono: il nome prima di tutto ----------
   La riga ha sei elementi e su 360 punti di larghezza non ci stanno tutti
   in fila: il nome, che è l'unica cosa davvero necessaria per riconoscere
   il ragazzo, veniva schiacciato a una lettera per riga. Qui la riga
   diventa una griglia esplicita, dove il nome si prende tutto lo spazio
   che avanza e nessuno glielo può togliere. */
@media (max-width:760px){
  .conv .prow[data-ciclo]{
    display:grid;
    grid-template-columns:auto auto auto minmax(0,1fr) auto;
    grid-template-areas:"segno foto num nome stato";
    align-items:center;gap:6px;padding:10px 8px}
  .conv .prow[data-ciclo] .segno{grid-area:segno;width:34px;height:34px;font-size:15px}
  .conv .prow[data-ciclo] .ph{grid-area:foto;width:30px;height:30px}
  .conv .prow[data-ciclo] .n{grid-area:num;min-width:22px;font-size:18px}
  /* break-word spezza SOLO le parole che non ci stanno per intero, e non
     riduce la larghezza minima della colonna: è la differenza con
     "anywhere", che invece permetteva una lettera per riga. */
  .conv .prow[data-ciclo] .nm{grid-area:nome;font-size:15px;line-height:1.2;
    white-space:normal;overflow-wrap:break-word;word-break:normal;overflow:hidden;
    font-size:14px}
  .conv .prow[data-ciclo] .stato{grid-area:stato;min-width:74px;text-align:center;
    padding:7px 6px;font-size:11px}
  /* Il gradino esce dalla riga: capitano e vice si scelgono una volta
     sola, in fondo all'elenco, dove sono due decisioni leggibili invece
     di ventuno bersagli da mezzo centimetro. */
  .conv .prow[data-ciclo] .pill.grad{display:none}
}

.gradi{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line)}
.gradi .f{flex:1 1 220px}

/* ---------- i due passi della convocazione ---------- */
.passi{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0 10px}
.passo{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);text-align:left;line-height:1.25}
.passo b{display:block;font-size:14px;color:var(--ink-soft)}
.passo span{font-size:12px;color:var(--ink-soft)}
.passo.on{border-color:var(--biro);background:#eef2fb;box-shadow:inset 0 0 0 1px var(--biro)}
.passo.on b{color:var(--biro)}
.prow[data-conv] .segno{background:var(--line-soft);color:var(--ink-soft);border-color:var(--line)}
.prow[data-conv].xi .segno{background:var(--biro);color:#fff;border-color:var(--biro)}
@media (max-width:760px){
  .conv .prow[data-conv]{display:grid;
    grid-template-columns:auto auto auto minmax(0,1fr) auto;
    grid-template-areas:"segno foto num nome stato";
    align-items:center;gap:6px;padding:10px 8px}
  .conv .prow[data-conv] .segno{grid-area:segno;width:34px;height:34px;font-size:15px}
  .conv .prow[data-conv] .ph{grid-area:foto;width:30px;height:30px}
  .conv .prow[data-conv] .n{grid-area:num;min-width:22px;font-size:18px}
  .conv .prow[data-conv] .nm{grid-area:nome;font-size:14px;line-height:1.2;
    white-space:normal;overflow-wrap:break-word;overflow:hidden}
  .conv .prow[data-conv] .nm em{display:none}
  .conv .prow[data-conv] .stato{grid-area:stato;min-width:74px;text-align:center;
    padding:7px 6px;font-size:11px}
}

/* ---------- tabelle larghe su schermo stretto ----------
   La tabella delle statistiche ha dodici colonne: su un telefono non ci
   staranno mai. Invece di nasconderne metà, si fa scorrere lei da sola
   dentro la pagina, con la colonna del nome ferma a sinistra come
   riferimento — altrimenti scorrendo non si sa più di chi sia la riga. */
.scorri{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -12px;padding:0 12px;
  max-width:100vw}
/* La tabella dentro un contenitore che scorre non può essere larga il
   100%: la percentuale si calcola su una larghezza senza limiti e il
   risultato è una tabella di migliaia di pixel. Qui vale il contenuto. */
.scorri table{width:auto;min-width:100%}
@media (max-width:760px){
  /* Il numero di maglia resta: è il modo più rapido di trovare uno nella
     riga, e occupa venti punti. */
  .scorri table.stats td.n,.scorri table.stats th.nh{min-width:20px;text-align:right;
    color:var(--biro);font-weight:700}
  .scorri table.stats td,.scorri table.stats th{white-space:nowrap;font-size:13px;padding:8px 7px}
  .scorri table.stats td.nome em{display:none}
}
.msg-risu{width:100%;font-size:16px;line-height:1.5;padding:12px;border:1px solid var(--line);
  border-radius:var(--r);font-family:inherit;margin-top:10px}

/* ---------- lettura della distinta ---------- */
.letto.dist{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:10px;
  align-items:center;padding:8px 10px}
.letto.dist .lnum{width:52px;font-size:19px;font-weight:700;text-align:center;
  padding:8px 4px;border:1px solid var(--line);border-radius:8px;color:var(--biro);
  font-family:'Barlow Condensed',sans-serif}
.letto.dist .lnum:focus{border-color:var(--biro);outline:none}
.letto.dist .stato{min-width:86px;padding:8px 10px;font-size:12px;text-align:center;
  border-radius:999px;border:1px solid var(--line)}
.letto.dist .stato.xi{background:#eef2fb;border-color:var(--biro);color:var(--biro);font-weight:700}
.letto.dist .stato.pan{background:var(--card);color:var(--ink-soft)}
@media (max-width:760px){
  .letti{grid-template-columns:minmax(0,1fr) !important}
  .letto.dist{grid-template-columns:52px minmax(0,1fr) auto;gap:8px}
  .letto.dist .lnome{font-size:14px;overflow-wrap:break-word}
  .letto.dist .lnome em{display:block;font-size:11px}
}
.lnk{background:none;border:none;padding:0;font:inherit;color:var(--biro);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---------- coda dei cambi ----------
   Tutto qui dentro è tarato su una mano sola, in piedi, con poca luce e
   poco tempo: numeri grandi, bersagli larghi, due colori soli. */
.col-cambi{padding:0}
.col-cambi .grid{padding:10px;gap:10px}
.col-cambi .vuoto{color:var(--ink-soft);font-size:14px;line-height:1.5;padding:14px 4px}

.coda{display:grid;gap:8px;margin-bottom:16px}
.cambio-riga{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:8px;
  align-items:center;background:var(--card);border:2px solid var(--biro);
  border-radius:var(--r);padding:8px}
.cambio-chi{display:grid;gap:4px;min-width:0}
.cambio-lato{display:flex;align-items:center;gap:8px;min-width:0}
.cambio-lato .qn{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.qnum{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:'Barlow Condensed',sans-serif;font-size:22px;
  font-weight:700;flex:0 0 auto;color:#fff}
.qnum.esce{background:var(--out)}
.qnum.entra{background:var(--in)}
/* solo il NOME prende il colore: il numero sta dentro un disco già
   colorato e deve restare bianco, altrimenti sparisce */
.cambio-lato.esce .qn{color:var(--out)}
.cambio-lato.entra .qn{color:var(--in)}
.cx{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);color:var(--ink-soft);font-size:15px}
.qok{min-height:52px;padding:0 14px;border-radius:var(--r);border:none;
  background:var(--in);color:#fff;font-weight:700;font-size:15px;letter-spacing:.02em}
.qok:active{filter:brightness(.9)}
.btn.grande.tutti{min-height:64px;font-size:19px;background:var(--in);border-color:var(--in)}

.scegli{border-top:1px solid var(--line);padding-top:12px}
.sc-tit{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);
  margin:10px 0 6px;font-weight:700}
.sc-tit em{font-style:normal;color:var(--ink);text-transform:none;letter-spacing:0;
  font-size:14px;margin-left:6px}
.sc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px}
.pnum{display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 4px;
  min-height:60px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.pnum b{font-family:'Barlow Condensed',sans-serif;font-size:24px;line-height:1;color:var(--ink)}
.pnum span{font-size:10px;color:var(--ink-soft);max-width:70px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pnum.out.sel{background:var(--out);border-color:var(--out)}
.pnum.in.sel{background:var(--in);border-color:var(--in)}
.pnum.sel b,.pnum.sel span{color:#fff}
.avvisino{font-size:12px;color:var(--out);margin-top:10px}
.tabs-campo button.pieno{color:var(--in);font-weight:800}
@media (min-width:761px){
  .col-cambi{flex:1.1;display:flex}
}

/* ---------- avviso di versione nuova ---------- */
.agg-avviso{position:fixed;left:12px;right:12px;bottom:12px;z-index:9000;
  background:var(--biro);color:#fff;border:none;border-radius:var(--r);
  padding:14px 16px;font-size:14px;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.28)}
.agg-avviso:active{filter:brightness(.9)}
.qconta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:4px 0 14px;
  padding:10px 12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.qconta > div{display:flex;align-items:baseline;gap:6px}
.qconta b{font-family:'Barlow Condensed',sans-serif;font-size:26px;line-height:1;color:var(--biro)}
.qconta span{font-size:12px;color:var(--ink-soft)}
.qconta .finito b{color:var(--out)}
.qconta .nota{flex:1 1 100%;display:block;font-size:12px;color:var(--ink-soft);line-height:1.4}
@media (max-width:760px){
  /* Niente colonne appiccicate: con due sticky agli estremi il resto
     finiva fuori vista. Si stringe tutto e le prime quattro colonne —
     numero, cognome, minuti, convocazioni — entrano nello schermo. */
  /* width:100% sul nome serve a schermo largo per spingere le colonne
     numeriche a destra, ma dentro un contenitore che scorre diventa una
     percentuale di una larghezza infinita: la tabella cresceva a un
     milione di pixel e tutto il resto finiva fuori dallo schermo. */
  .scorri table.mins.stats td.nome,
  .scorri table.mins.stats th.nome{width:auto;max-width:none;white-space:nowrap}
  .scorri table.stats td,.scorri table.stats th{padding:8px 6px;font-size:13px}
  .scorri table.stats td.n,.scorri table.stats th.nh{display:table-cell;
    min-width:22px;text-align:right}
}

/* ---------- marchio ----------
   Sta nella testata della home, accanto al nome: è l'unico posto dove
   serve — nelle altre schermate il titolo dice già dove sei, e su
   telefono ogni riga vale. Non entra nei PDF, che sono documenti della
   società e non dell'app. */
.hdr-logo{display:flex;align-items:center;gap:10px}
.logo-app,.logo-gate{
  /* Il marchio è dentro il foglio di stile, non in un file a parte: un
     file in più è un file in più che può non arrivare sul server, e per
     un'immagine da 6 kB non vale la pena correre il rischio. */
  background-image:url(data:image/png;base64,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);
  background-size:cover;background-position:center}
.logo-app{width:34px;height:34px;border-radius:8px;flex:0 0 auto;
  box-shadow:0 1px 3px rgba(20,24,31,.22)}
.logo-gate{width:76px;height:76px;border-radius:16px;margin:0 auto 14px;display:block;
  box-shadow:0 3px 10px rgba(20,24,31,.22)}
@media (min-width:761px){
  .logo-app{width:44px;height:44px;border-radius:10px}
}
.pnum.gia{border-style:dashed;opacity:.85}
.pnum.gia b{color:var(--ink-soft)}
.pnum .bollino{display:block;font-size:8.5px;font-style:normal;color:var(--out);
  text-transform:uppercase;letter-spacing:.04em;margin-top:1px}
.sc-tit.gia{color:var(--out)}
/* chi è uscito definitivamente resta visibile ma non è un pulsante:
   serve sapere che c'è stato, non poterlo rimettere in campo */
.pnum.spento{opacity:.5;border-style:dashed;cursor:default;
  display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 4px;
  min-height:60px;border:1px dashed var(--line);border-radius:var(--r);background:transparent}
.pnum.spento b{font-family:'Barlow Condensed',sans-serif;font-size:24px;line-height:1;
  color:var(--ink-soft)}
.pnum.spento span{font-size:10px;color:var(--ink-soft)}
/* Un giocatore già impegnato in un cambio in attesa: si vede subito,
   così non lo si sceglie due volte da schermate diverse. */
.p.in-coda{border-color:var(--biro);background:#f3f6fd}
.p .incoda{display:block;font-style:normal;font-size:10px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--biro);margin-top:2px}
/* il cestino su schermo stretto: l'avversario è l'informazione utile */
.modal .prow{display:flex;align-items:center;gap:10px;padding:10px}
.modal .prow .nm{flex:1;min-width:0;overflow-wrap:break-word}
.modal .prow .nm b{display:block;font-size:15px}
.modal .prow .nm em{display:block;font-style:normal;font-size:12px;color:var(--ink-soft)}
.prow-apri{display:flex;align-items:center;gap:10px;flex:1;min-width:0;
  background:none;border:none;padding:0;text-align:left}

/* ---------- scheda giocatore ---------- */
.g-testa{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.g-testa h2{margin:0;font-family:'Barlow Condensed',sans-serif;font-size:26px;line-height:1.1}
.g-testa p{margin:3px 0 0;color:var(--ink-soft);font-size:13px}

.dati{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;
  margin-bottom:22px}
.dato{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
.dato b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:26px;line-height:1;
  color:var(--ink)}
.dato span{display:block;font-size:11px;color:var(--ink-soft);margin-top:3px;line-height:1.25}
.dato.grande{grid-column:span 2}
.dato.grande b{font-size:38px;color:var(--biro)}
.dato.verde b{color:var(--in)}
.dato.ambra b{color:#9a7a06}
.dato.rosso b{color:var(--out)}

.sh{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--biro);
  margin:24px 0 4px}
.sub-sh{font-size:12px;color:var(--ink-soft);margin:0 0 10px;line-height:1.4}
.graf{width:100%;height:130px;display:block;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:6px 4px}
.graf-assi{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-soft);
  margin-top:4px}

.torta-blocco{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.torta{width:132px;height:132px;flex:0 0 auto}
.legenda{list-style:none;margin:0;padding:0;flex:1;min-width:170px}
.legenda li{display:flex;align-items:center;gap:8px;font-size:13px;padding:3px 0}
.legenda i{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.legenda b{margin-left:auto;font-family:'Barlow Condensed',sans-serif;font-size:17px}
.legenda span{color:var(--ink-soft);font-size:11px;min-width:34px;text-align:right}
/* elenco delle posizioni: parole, non numeri, quindi pastiglie più larghe */
.pos-list{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.pos-list .pnum{min-height:50px;padding:10px 8px}
.pos-list .pnum span{font-size:13px;color:var(--ink);max-width:none;white-space:normal;
  line-height:1.2;text-align:center}
.pos-list .pnum.sel span{color:#fff}

/* ---------- barra dei comandi del modulo ----------
   Su telefono la testata non può ospitare tendine: si accavallano e non
   si legge più né l'etichetta né il valore. Qui vanno a capo da sole. */
.modbar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;
  padding:10px 14px;background:var(--card);border-bottom:1px solid var(--line)}
.modbar .f{flex:1 1 130px;min-width:110px;margin:0}
.modbar .f.stretto{flex:0 0 96px}
.modbar-fine{display:flex;gap:8px;flex:1 1 100%;justify-content:flex-end}
@media (min-width:761px){
  .modbar-fine{flex:0 0 auto}
}

/* ---------- periodi di indisponibilità ---------- */
.assenze{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.ass-riga{display:flex;align-items:center;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--line-soft)}
.ass-riga:last-of-type{border-bottom:none}
.ass-t{flex:1;min-width:0;line-height:1.3}
.ass-t b{display:block;font-size:14px}
.ass-t em{display:block;font-style:normal;font-size:12px;color:var(--ink-soft);
  overflow-wrap:break-word}
.assenze .vuoto{color:var(--ink-soft);font-size:13px;margin:0}

/* ---------- doppioni in rosa ---------- */
.dopp{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;padding-top:10px;
  border-top:1px solid #e8d4a0}
.dopp-v{flex:1 1 200px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:9px 11px;display:flex;flex-direction:column;gap:3px}
.dopp-v.tiene{border-color:var(--in)}
.dopp-v b{font-size:14px;overflow-wrap:break-word}
.dopp-v em{font-style:normal;font-size:12px;color:var(--ink-soft)}
.dopp-v i{font-style:normal;font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--in);font-weight:700}
.dopp-v i.att{color:var(--ink-soft)}
.dopp-v .btn{margin-top:4px}
/* chi resta fuori per infortunio: ambra, non il grigio dello scarto */
.prow.inf{opacity:1;border-color:#e0c98a;background:#fffdf4}
.prow.inf .segno{background:#f3e3b0;color:#8a6a00;border-color:#e0c98a}
.stato.amb{background:#fff3d6;color:#8a6400;border-color:#e8d4a0;font-weight:700}
.ass-riga{width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--line-soft);
  cursor:pointer}
.ass-riga.segnata{background:#fffbe9}
.ass-st{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);
  font-weight:700;white-space:nowrap}
.ass-riga.segnata .ass-st{color:#8a6400}
/* conferma discreta del salvataggio automatico degli spostamenti */
.salvato{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:9000;
  background:var(--in);color:#fff;padding:11px 18px;border-radius:999px;
  font-size:14px;font-weight:600;box-shadow:0 4px 16px rgba(0,0,0,.28);
  animation:sal .25s ease}
@keyframes sal{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- esito della partita, a colpo d'occhio ----------
   Lettera e colore insieme: chi non distingue bene i colori legge
   comunque V, N o P, e il risultato resta leggibile in pieno sole. */
.esito{flex:0 0 auto;width:22px;height:22px;border-radius:6px;display:flex;
  align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;
  font-weight:700;font-size:14px;color:#fff;margin-right:2px}
.esito.vinta{background:var(--in)}
.esito.persa{background:var(--out)}
.esito.pari{background:#8a8f98}
.mrow-wrap.vinta .mrow{border-left:4px solid var(--in)}
.mrow-wrap.persa .mrow{border-left:4px solid var(--out)}
.mrow-wrap.pari  .mrow{border-left:4px solid #8a8f98}
.res.vinta{color:var(--in)}
.res.persa{color:var(--out)}
.res.pari{color:var(--ink)}
/* elenco dei convocati nella finestra di correzione */
/* Su telefono i due pulsanti non stanno in riga col nome: invece di
   stringerli fino a renderli illeggibili, vanno a capo. */
.conv-riga{display:flex;align-items:center;gap:10px;padding:9px 0;
  flex-wrap:wrap;border-bottom:1px solid var(--line-soft)}
.conv-riga .n{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:20px;
  color:var(--biro);min-width:28px;text-align:center}
/* Il numero di maglia si scrive qui: è della partita, non del giocatore —
   lo stesso ragazzo può avere la 7 oggi e la 14 domenica prossima. */
.conv-riga input.n{font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:20px;color:var(--biro);width:46px;min-width:46px;text-align:center;
  padding:3px 2px;border:1px solid var(--line);border-radius:7px;background:#fff}
.conv-riga input.n:focus{outline:2px solid var(--biro);outline-offset:-1px}
.conv-riga .nm{flex:1;min-width:0;font-weight:600;font-size:14px;overflow-wrap:break-word}
.conv-riga .nm em{display:block;font-style:normal;font-weight:400;font-size:12px;
  color:var(--ink-soft)}