/* ===== FantaStorico — Design System "Matchday" (Light/Dark) ===== */
:root, [data-theme="light"] {
  --bg:#F5F7FB; --surface:#ffffff; --surface-2:#EEF1F7; --surface-offset:#E3E7F0;
  --border: rgba(20,30,50,0.10); --divider: rgba(20,30,50,0.08);
  --text:#151B2E; --text-muted:#5B6478; --text-faint:#8B93A8; --text-inverse:#ffffff;
  --primary:#0F9D53; --primary-hover:#0C8746; --primary-active:#096F39; --primary-highlight:#E3F9EC;
  --warn:#E08E00; --warn-hover:#C27B00; --warn-highlight:#FCEACB;
  --error:#E5342F; --error-hover:#C22A26; --error-highlight:#FBDBDA;
  --success:#0F9D53; --success-highlight:#E3F9EC;
  --gold:#D9A62A; --silver:#98A2B8; --bronze:#C17A3E;
  --shadow-sm: 0 1px 2px rgba(20,30,50,0.08);
  --shadow-md: 0 10px 28px rgba(20,30,50,0.14);
  --radius-sm:.5rem; --radius-md:.75rem; --radius-lg:1.25rem; --radius-full:9999px;
  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-body:"Manrope","Segoe UI",Arial,sans-serif;
}
[data-theme="dark"] {
  --bg:#141B2E; --surface:#1E2A48; --surface-2:#28365A; --surface-offset:#2E3C63;
  --border: rgba(255,255,255,0.12); --divider: rgba(255,255,255,0.08);
  --text:#F3F6FC; --text-muted:#A7B4D6; --text-faint:#7885A8; --text-inverse:#0B1220;
  --primary:#C6FF3D; --primary-hover:#D6FF6E; --primary-active:#A9E01A; --primary-highlight:rgba(198,255,61,0.18);
  --warn:#FFD166; --warn-hover:#FFDD8C; --warn-highlight:rgba(255,209,102,0.16);
  --error:#FF5C72; --error-hover:#FF7A8E; --error-highlight:rgba(255,92,114,0.16);
  --success:#33D17A; --success-highlight:rgba(51,209,122,0.18);
  --gold:#FFD166; --silver:#B8C2D6; --bronze:#D98A4C;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 10px 28px rgba(0,0,0,0.5);
}
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:none; scroll-behavior:smooth; }
body { font-family:var(--font-body); background:var(--bg); color:var(--text); min-height:100vh; transition:background .2s,color .2s; padding-bottom:96px; }
.topbar .brand, .ph h1, .card h2, .hero-title, .hero-badge, .stat-tile .num, .btn, .rank-badge, .role-badge, .chip-sm, .player-avatar-sm, .giornata-chip .gvoto {
  font-family: var(--font-display);
}
a { color:var(--primary); text-decoration:none; }
button, input, select, textarea { font:inherit; color:inherit; }

/* ===== Top bar ===== */
.topbar { position:sticky; top:0; z-index:40; background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; padding:10px 12px; }
.topbar .brand { font-weight:700; font-size:.95rem; color:var(--text); display:flex; align-items:center; gap:6px; }
.topbar .brand svg { width:20px; height:20px; color:var(--primary); }
.topbar .spacer { flex:1; }
.icon-btn { width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-md); background:transparent; border:none; cursor:pointer; color:var(--text-muted); }
.icon-btn:hover { background:var(--surface-2); color:var(--text); }
.icon-btn svg { width:18px; height:18px; }
.userchip { font-size:.72rem; color:var(--text-muted); padding:4px 8px; border-radius:var(--radius-full); background:var(--surface-2); white-space:nowrap; }

/* ===== Desktop nav (hidden on mobile) ===== */
.desknav { display:none; }
@media (min-width:768px) {
  .desknav { display:flex; gap:4px; align-items:center; }
  .desknav a { display:flex; align-items:center; gap:6px; font-size:.82rem; padding:6px 10px; border-radius:var(--radius-md); color:var(--text-muted); }
  .desknav a svg { width:16px; height:16px; }
  .desknav a:hover, .desknav a.active { background:var(--surface-2); color:var(--text); }
  .mobile-only { display:none !important; }
  .navdrop { position:relative; }
  .navdrop-btn { display:flex; align-items:center; gap:6px; font-size:.82rem; padding:6px 10px; border-radius:var(--radius-md); color:var(--text-muted); background:none; border:none; font-family:inherit; cursor:pointer; }
  .navdrop-btn svg { width:16px; height:16px; }
  .navdrop-btn .navdrop-chev { width:12px; height:12px; margin-left:-2px; transition:transform .15s ease; }
  .navdrop-btn:hover, .navdrop.open .navdrop-btn { background:var(--surface-2); color:var(--text); }
  .navdrop.open .navdrop-chev { transform:rotate(180deg); }
  .navdrop-menu { display:none; position:absolute; top:calc(100% + 4px); left:0; min-width:180px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-md); padding:6px; z-index:60; }
  .navdrop.open .navdrop-menu { display:block; }
  .navdrop-menu a { display:flex; align-items:center; gap:8px; font-size:.82rem; padding:8px 10px; border-radius:var(--radius-sm); color:var(--text-muted); }
  .navdrop-menu a svg { width:15px; height:15px; }
  .navdrop-menu a:hover, .navdrop-menu a.active { background:var(--surface-2); color:var(--text); }
}

/* ===== Bottom tab bar (mobile) — floating pill ===== */
.bottomnav { position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:40; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-full); display:flex; justify-content:space-around; padding:8px 4px; box-shadow:var(--shadow-md); }
@media (min-width:768px) { .bottomnav { display:none; } }
.bottomnav a { display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--text-faint); font-size:.62rem; font-weight:600; padding:4px 6px; border-radius:var(--radius-md); min-width:44px; }
.bottomnav a svg { width:20px; height:20px; }
.bottomnav a.active { color:var(--primary); font-weight:700; }

/* ===== More menu (mobile sheet for secondary items) ===== */
.sheet-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:50; display:none; }
.sheet-overlay.open { display:block; }
.sheet { position:fixed; left:0; right:0; bottom:0; z-index:51; background:var(--surface); border-radius:var(--radius-lg) var(--radius-lg) 0 0; padding:16px; transform:translateY(100%); transition:transform .25s ease; max-height:70vh; overflow-y:auto; }
.sheet.open { transform:translateY(0); }
.sheet h3 { font-size:.85rem; color:var(--text-muted); margin-bottom:10px; }
.sheet a { display:flex; align-items:center; gap:10px; padding:12px 8px; border-radius:var(--radius-md); color:var(--text); font-size:.9rem; }
.sheet a svg { width:18px; height:18px; color:var(--primary); }
.sheet a:active { background:var(--surface-2); }

/* ===== Layout ===== */
.main { padding:16px; max-width:1200px; margin:0 auto; }
@media (min-width:768px) { .main { padding:24px; } }
.ph { margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.ph h1 { font-size:1.15rem; color:var(--text); font-weight:700; }
.ph svg { width:20px; height:20px; color:var(--primary); }

/* ===== Cards ===== */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; margin-bottom:16px; box-shadow:var(--shadow-sm); }
.card h2 { font-size:.95rem; margin-bottom:10px; color:var(--text); font-weight:600; display:flex; align-items:center; gap:6px; }
.card h2 svg { width:16px; height:16px; color:var(--primary); }

/* ===== Table ===== */
.tbl { width:100%; border-collapse:collapse; font-size:.82rem; }
.tbl th { background:var(--surface-2); padding:8px; text-align:left; border-bottom:2px solid var(--primary); font-weight:600; }
.tbl td { padding:8px; border-bottom:1px solid var(--divider); }
.tbl tr:hover td { background:var(--surface-2); }
@media (max-width:480px) { .tbl { font-size:.75rem; } .tbl th, .tbl td { padding:6px; } }
/* Contiene lo scroll orizzontale DENTRO la tabella (mai la pagina intera):
   tabelle con molte colonne (es. classifica girone del Torneo, 9 colonne)
   su telefoni molto stretti (~360px) possono restare più larghe della
   card anche dopo aver troncato il nome squadra — con questo wrapper si
   scorrono lateralmente invece di tagliare l'ultima colonna sul bordo. */
.tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ===== Buttons ===== */
.btn { display:inline-flex; align-items:center; gap:7px; background:var(--primary); color:var(--text-inverse); border:none; padding:11px 18px; border-radius:var(--radius-md); cursor:pointer; font-weight:700; font-size:.84rem; letter-spacing:.01em; transition:background .15s,transform .15s,box-shadow .15s; min-height:42px; box-shadow:0 6px 16px -4px var(--primary-highlight), var(--shadow-sm); }
.btn.btn-sm { padding:7px 13px; min-height:auto; font-size:.76rem; flex-shrink:0; box-shadow:none; }
.btn svg { width:15px; height:15px; }
.btn:hover { background:var(--primary-hover); transform:translateY(-1px); box-shadow:0 10px 22px -4px var(--primary-highlight), var(--shadow-md); }
.btn:active { background:var(--primary-active); transform:translateY(0); box-shadow:var(--shadow-sm); }
.btn-warn { background:var(--warn); color:var(--text-inverse); box-shadow:0 6px 16px -4px var(--warn-highlight), var(--shadow-sm); }
.btn-warn:hover { background:var(--warn-hover); }
.btn-danger { background:var(--error); color:var(--text-inverse); box-shadow:0 6px 16px -4px var(--error-highlight), var(--shadow-sm); }
.btn-danger:hover { background:var(--error-hover); }
.btn-ghost { background:transparent; color:var(--text-muted); border:1px solid var(--border); box-shadow:none; }
.btn-ghost:hover { background:var(--surface-2); color:var(--text); transform:none; }

/* ===== Inputs ===== */
input, select, textarea { background:var(--surface); border:1px solid var(--border); color:var(--text); padding:9px 10px; border-radius:var(--radius-md); width:100%; font-size:.85rem; min-height:40px; }
textarea { min-height:auto; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--primary); outline-offset:1px; }
label { font-size:.78rem; color:var(--text-muted); display:block; margin-bottom:4px; margin-top:10px; font-weight:500; }

/* ===== Feedback ===== */
.error { color:var(--error); background:var(--error-highlight); padding:10px 12px; border-radius:var(--radius-md); margin:8px 0; font-size:.82rem; }
.ok { color:var(--success); background:var(--success-highlight); padding:8px 12px; border-radius:var(--radius-md); font-size:.82rem; display:inline-block; }
.tag { display:inline-block; padding:3px 10px; border-radius:var(--radius-full); font-size:.72rem; background:var(--surface-2); margin:2px; font-weight:600; }
.tag-p { background:#1565c0; color:#fff; } .tag-d { background:#2e7d32; color:#fff; } .tag-c { background:#6a1b9a; color:#fff; } .tag-a { background:#b71c1c; color:#fff; }

/* ===== Grids ===== */
/* auto-fit (non auto-fill): con poche card in un contenitore largo, auto-fill
   crea comunque le colonne "virtuali" in piu' e le lascia vuote, spingendo le
   card reali a sinistra e lasciando meta' schermo vuoto a destra — bug visto
   in dashboard con la sezione "La mia squadra". auto-fit invece collassa le
   colonne senza contenuto, cosi' le card presenti si allargano a riempire
   tutto lo spazio disponibile. */
.section-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.section-grid.two-col { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.section-grid.three-col { grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.actions { display:flex; gap:10px; flex-wrap:wrap; }
.wide { grid-column:1/-1; }

/* ===== Campo formazione (pitch) — vista dall'alto con segnaletica reale =====
   Striature del prato (taglio erba) + bordo campo, linea di metà campo,
   cerchio e dischetto centrale, aree di rigore e aree piccole, dischetti del
   rigore, porte: tutto disegnato in .pitch-markings (statico, mai
   sovrascritto dal JS) cosi' .pitch-rows puo' essere rigenerato liberamente
   ad ogni cambio formazione senza mai ridisegnare la segnaletica.
   .pitch ha un'altezza reale (aspect-ratio, non piu' min-height "campata in
   aria") e .pitch-rows e' posizionata assoluta a riempirla: cosi' le 4 righe
   di ruolo (attacco/centrocampo/difesa/portiere) si distribuiscono su tutta
   la profondita' del campo invece di restare ammassate al centro (bug
   precedente: height:100% su un genitore senza altezza esplicita non ha
   alcun effetto, quindi lo space-between non aveva spazio da distribuire). */
.pitch { position:relative; overflow:hidden; border-radius:var(--radius-lg); box-shadow:inset 0 0 0 2px rgba(255,255,255,.14), var(--shadow-md); aspect-ratio:3/4; width:100%; min-height:420px; max-height:560px; max-width:480px; margin:0 auto;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0 36px, rgba(0,0,0,.06) 36px 72px),
    linear-gradient(180deg,#1C8A46,#0E4F28); }
.pitch-markings { position:absolute; inset:14px 16px; pointer-events:none; z-index:0; }
.pitch-markings .pm-border { position:absolute; inset:0; border:2px solid rgba(255,255,255,.38); border-radius:8px; }
.pitch-markings .pm-halfway { position:absolute; left:0; right:0; top:50%; height:0; border-top:2px solid rgba(255,255,255,.38); }
.pitch-markings .pm-circle { position:absolute; left:50%; top:50%; width:74px; height:74px; margin:-37px 0 0 -37px; border:2px solid rgba(255,255,255,.38); border-radius:50%; }
.pitch-markings .pm-dot { position:absolute; width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%; background:rgba(255,255,255,.5); }
.pitch-markings .pm-dot.pm-center { left:50%; top:50%; }
.pitch-markings .pm-dot.pm-pen-top { left:50%; top:13%; }
.pitch-markings .pm-dot.pm-pen-bottom { left:50%; top:87%; }
.pitch-markings .pm-box { position:absolute; left:50%; border:2px solid rgba(255,255,255,.38); }
.pitch-markings .pm-box.pm-area { width:64%; height:15%; margin-left:-32%; }
.pitch-markings .pm-box.pm-goalarea { width:32%; height:6.5%; margin-left:-16%; }
.pitch-markings .pm-box.pm-top { top:-2px; border-top:none; }
.pitch-markings .pm-box.pm-bottom { bottom:-2px; border-bottom:none; }
.pitch-markings .pm-goal { position:absolute; left:50%; width:16%; height:5px; margin-left:-8%; background:rgba(255,255,255,.55); border-radius:0 0 3px 3px; }
.pitch-markings .pm-goal.pm-top { top:-3px; border-top:none; border-radius:0 0 3px 3px; }
.pitch-markings .pm-goal.pm-bottom { bottom:-3px; border-radius:3px 3px 0 0; }
.pitch-rows { position:absolute; inset:22px 10px 18px; z-index:1; display:flex; flex-direction:column; gap:10px; justify-content:space-between; }
/* Griglia, non flex: ogni riga divide la larghezza del campo in colonne
   UGUALI in base al numero di giocatori di quella riga (auto-fit/1fr), cosi'
   gli omini restano sempre alla stessa distanza tra loro, riga per riga —
   prima la spaziatura dipendeva dalla larghezza della card, che a sua volta
   dipendeva dalla lunghezza del cognome (nomi lunghi = card piu' larghe =
   omini spostati). Funziona anche con 5 giocatori in riga su schermi stretti,
   dove prima la riga andava a capo. */
.pitch-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(0,1fr)); align-items:start; justify-items:center; column-gap:2px; min-height:38px; }
.pitch-empty { color:rgba(255,255,255,.55); font-size:.75rem; }
.pitch-card { display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; width:100%; min-width:0; }
/* Il cognome si legge sempre per intero: se è lungo o composto ("Luis
   Henrique", "Nicolussi Caviglia") va a capo su due righe invece di essere
   tagliato con i puntini. */
.pitch-name { font-size:.62rem; font-weight:700; color:#fff; background:rgba(0,0,0,.45); padding:2px 5px; border-radius:8px; white-space:normal; overflow-wrap:normal; word-break:normal; text-align:center; line-height:1.15; position:relative; z-index:1; }
/* righe affollate (5 giocatori): carattere un filo più piccolo, così anche
   un cognome lungo di una sola parola ("Thorstvedt") resta intero */
.pitch-row.n5 .pitch-name { font-size:.56rem; padding:2px 3px; }
/* Slot vuoto sul campo (tap per scegliere il giocatore) — stesso ingombro
   del chip pieno cosi' la riga non "salta" quando si riempie/vuota uno
   slot. Il "+" e' un cerchio tratteggiato, mai un elemento pieno, cosi'
   pieno/vuoto si distinguono a colpo d'occhio anche in miniatura. */
.slot-plus { width:38px; height:38px; border-radius:50%; border:2px dashed rgba(255,255,255,.55); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.85); font-size:1.1rem; font-weight:700; }
.pitch-card.empty .pitch-name { background:rgba(0,0,0,.3); color:rgba(255,255,255,.75); }

/* ===== Striscia riserve sotto al campo (tap per assegnare, stesso
   linguaggio dei chip del campo) — sostituisce le 11 tendine come modo
   primario di scelta; le tendine restano disponibili nella vista a elenco
   qui sotto, invariate, per chi le preferisce o per lo screenshot di
   controllo finale. */
.reserve-strip { display:flex; gap:10px; overflow-x:auto; padding:6px 2px 10px; -webkit-overflow-scrolling:touch; }
.reserve-chip { flex:none; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:60px; max-width:84px; cursor:pointer; }
.reserve-chip .r-idx { font-size:.62rem; color:var(--text-muted); font-weight:700; }
.reserve-chip .r-name { font-size:.68rem; font-weight:600; text-align:center; max-width:100%; white-space:normal; overflow-wrap:break-word; line-height:1.15; color:var(--text); }
.reserve-chip.empty .r-name { color:var(--text-faint); }
.slot-plus-sm { width:30px; height:30px; border-radius:50%; border:2px dashed var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-faint); font-size:.9rem; font-weight:700; background:var(--surface-2); }

/* ===== Sheet "scegli giocatore" per uno slot del campo/riserve — lista
   filtrabile dentro il bottom sheet .detailSheet gia' usato altrove
   (es. correggi voto), cosi' non introduce un nuovo sistema di overlay. */
.picker-search { width:100%; margin-bottom:8px; }
.picker-list { max-height:50vh; overflow-y:auto; margin-top:2px; }
.picker-row { display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--divider); cursor:pointer; }
.picker-row:hover, .picker-row:active { background:var(--surface-2); }
.picker-row .pr-name { flex:1; font-weight:600; font-size:.86rem; }
.picker-empty { padding:14px 4px; color:var(--text-muted); font-size:.82rem; text-align:center; }
.picker-clear { width:100%; margin-bottom:10px; justify-content:center; }

/* ===== Avatar giocatore "omino" sul campo (sagoma piena colorata per ruolo,
   NESSUN pallino/cerchio di sfondo — il colore sta nella sagoma stessa, con
   un contorno bianco sottile per restare leggibile sull'erba). La lista
   titolari/riserve sotto al campo (.player-avatar-sm) resta invece un
   cerchio pieno: li' lo sfondo bianco della tabella richiede un pallino per
   restare leggibile. .pitch-card ha una larghezza fissa (60px) cosi' gli
   omini restano equidistanti riga per riga: prima la centratura dipendeva
   dalla larghezza della card, che variava con la lunghezza del cognome. */
/* ===== Sagoma "calciatore che calcia il pallone", colorata per ruolo, al
   posto del pallino con iniziali — NIENTE PIU' MASCHERA CSS: dopo due
   tentativi in cui la maschera arrivava integra (byte per byte, verificato)
   ma il browser continuava a non applicarla, ho abbandonato la tecnica
   della maschera del tutto. Ora sono 4 disegni gia' colorati in partenza
   (uno per ruolo, il colore e' dentro l'SVG stesso) mostrati come normale
   immagine di sfondo (background-image): e' la tecnica CSS piu' vecchia e
   universalmente supportata che esiste, non puo' fallire come una
   maschera. Il contenitore resta trasparente (nessun disco/pallino): la
   sagoma stessa e' la parte colorata, esattamente come richiesto.
   Seconda versione della sagoma: non piu' un omino a bastoncino (troppo
   scarno, non si leggeva come calciatore), ma un corpo pieno disegnato con
   poligoni "affusolati" (piu' larghi a un'estremita' del segmento, stretti
   all'altra, invece di semplici linee spesse arrotondate) per gambe,
   busto e braccio — cosi' gli arti hanno una forma naturale invece di
   sembrare tubi con le giunture a pallino. Aggiunto un pallone con una
   texture (pentagono scuro) per rendere subito chiara l'azione di calcio. */
.chip, .chip-sm, .player-avatar-sm { position:relative; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; font-size:0; background-color:transparent; background-repeat:no-repeat; background-position:center bottom; background-size:80%; }
.chip { width:38px; height:38px; filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.chip .chip-initials { display:none; }
/* ===== Avatar giocatore compatto (foto-style, usato in liste/tabelle) ===== */
.chip-sm { width:28px; height:28px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.player-avatar-sm { width:30px; height:30px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.player-avatar-sm svg { display:none; }
.chip.tag-p, .chip-sm.tag-p, .player-avatar-sm.tag-p { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20fill%3D%27%231565c0%27%3E%3Cpolygon%20points%3D%276.87%2C5.77%208.98%2C12.83%2012.22%2C11.77%209.73%2C4.83%27%2F%3E%3Cpolygon%20points%3D%279.12%2C11.69%206.51%2C19.98%208.09%2C20.62%2012.08%2C12.91%27%2F%3E%3Cpolygon%20points%3D%2710.26%2C13.86%2014.96%2C14.42%2015.44%2C12.18%2010.94%2C10.74%27%2F%3E%3Cpolygon%20points%3D%2714.41%2C14.07%2018.10%2C17.29%2019.10%2C16.31%2015.99%2C12.53%27%2F%3E%3Cpolygon%20points%3D%277.94%2C5.11%204.13%2C8.18%204.67%2C9.02%209.06%2C6.89%27%2F%3E%3Ccircle%20cx%3D%278.5%27%20cy%3D%273.2%27%20r%3D%272.1%27%2F%3E%3Cellipse%20cx%3D%276.1%27%20cy%3D%2720.6%27%20rx%3D%272.0%27%20ry%3D%271.15%27%20transform%3D%27rotate%28-15%206.1%2020.6%29%27%2F%3E%3Cellipse%20cx%3D%2719.6%27%20cy%3D%2717.2%27%20rx%3D%271.9%27%20ry%3D%271.1%27%20transform%3D%27rotate%2835%2019.6%2017.2%29%27%2F%3E%3Ccircle%20cx%3D%274.0%27%20cy%3D%279.3%27%20r%3D%271.15%27%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2721.3%27%20cy%3D%2719.3%27%20r%3D%272.3%27%20fill%3D%27%23f2f2f2%27%2F%3E%3Cpath%20d%3D%27M21.3%2017.4l1.1.8-.4%201.3h-1.4l-.4-1.3z%27%20fill%3D%27%23333%27%2F%3E%3C%2Fsvg%3E"); }
.chip.tag-d, .chip-sm.tag-d, .player-avatar-sm.tag-d { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20fill%3D%27%232e7d32%27%3E%3Cpolygon%20points%3D%276.87%2C5.77%208.98%2C12.83%2012.22%2C11.77%209.73%2C4.83%27%2F%3E%3Cpolygon%20points%3D%279.12%2C11.69%206.51%2C19.98%208.09%2C20.62%2012.08%2C12.91%27%2F%3E%3Cpolygon%20points%3D%2710.26%2C13.86%2014.96%2C14.42%2015.44%2C12.18%2010.94%2C10.74%27%2F%3E%3Cpolygon%20points%3D%2714.41%2C14.07%2018.10%2C17.29%2019.10%2C16.31%2015.99%2C12.53%27%2F%3E%3Cpolygon%20points%3D%277.94%2C5.11%204.13%2C8.18%204.67%2C9.02%209.06%2C6.89%27%2F%3E%3Ccircle%20cx%3D%278.5%27%20cy%3D%273.2%27%20r%3D%272.1%27%2F%3E%3Cellipse%20cx%3D%276.1%27%20cy%3D%2720.6%27%20rx%3D%272.0%27%20ry%3D%271.15%27%20transform%3D%27rotate%28-15%206.1%2020.6%29%27%2F%3E%3Cellipse%20cx%3D%2719.6%27%20cy%3D%2717.2%27%20rx%3D%271.9%27%20ry%3D%271.1%27%20transform%3D%27rotate%2835%2019.6%2017.2%29%27%2F%3E%3Ccircle%20cx%3D%274.0%27%20cy%3D%279.3%27%20r%3D%271.15%27%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2721.3%27%20cy%3D%2719.3%27%20r%3D%272.3%27%20fill%3D%27%23f2f2f2%27%2F%3E%3Cpath%20d%3D%27M21.3%2017.4l1.1.8-.4%201.3h-1.4l-.4-1.3z%27%20fill%3D%27%23333%27%2F%3E%3C%2Fsvg%3E"); }
.chip.tag-c, .chip-sm.tag-c, .player-avatar-sm.tag-c { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20fill%3D%27%236a1b9a%27%3E%3Cpolygon%20points%3D%276.87%2C5.77%208.98%2C12.83%2012.22%2C11.77%209.73%2C4.83%27%2F%3E%3Cpolygon%20points%3D%279.12%2C11.69%206.51%2C19.98%208.09%2C20.62%2012.08%2C12.91%27%2F%3E%3Cpolygon%20points%3D%2710.26%2C13.86%2014.96%2C14.42%2015.44%2C12.18%2010.94%2C10.74%27%2F%3E%3Cpolygon%20points%3D%2714.41%2C14.07%2018.10%2C17.29%2019.10%2C16.31%2015.99%2C12.53%27%2F%3E%3Cpolygon%20points%3D%277.94%2C5.11%204.13%2C8.18%204.67%2C9.02%209.06%2C6.89%27%2F%3E%3Ccircle%20cx%3D%278.5%27%20cy%3D%273.2%27%20r%3D%272.1%27%2F%3E%3Cellipse%20cx%3D%276.1%27%20cy%3D%2720.6%27%20rx%3D%272.0%27%20ry%3D%271.15%27%20transform%3D%27rotate%28-15%206.1%2020.6%29%27%2F%3E%3Cellipse%20cx%3D%2719.6%27%20cy%3D%2717.2%27%20rx%3D%271.9%27%20ry%3D%271.1%27%20transform%3D%27rotate%2835%2019.6%2017.2%29%27%2F%3E%3Ccircle%20cx%3D%274.0%27%20cy%3D%279.3%27%20r%3D%271.15%27%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2721.3%27%20cy%3D%2719.3%27%20r%3D%272.3%27%20fill%3D%27%23f2f2f2%27%2F%3E%3Cpath%20d%3D%27M21.3%2017.4l1.1.8-.4%201.3h-1.4l-.4-1.3z%27%20fill%3D%27%23333%27%2F%3E%3C%2Fsvg%3E"); }
.chip.tag-a, .chip-sm.tag-a, .player-avatar-sm.tag-a { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20fill%3D%27%23b71c1c%27%3E%3Cpolygon%20points%3D%276.87%2C5.77%208.98%2C12.83%2012.22%2C11.77%209.73%2C4.83%27%2F%3E%3Cpolygon%20points%3D%279.12%2C11.69%206.51%2C19.98%208.09%2C20.62%2012.08%2C12.91%27%2F%3E%3Cpolygon%20points%3D%2710.26%2C13.86%2014.96%2C14.42%2015.44%2C12.18%2010.94%2C10.74%27%2F%3E%3Cpolygon%20points%3D%2714.41%2C14.07%2018.10%2C17.29%2019.10%2C16.31%2015.99%2C12.53%27%2F%3E%3Cpolygon%20points%3D%277.94%2C5.11%204.13%2C8.18%204.67%2C9.02%209.06%2C6.89%27%2F%3E%3Ccircle%20cx%3D%278.5%27%20cy%3D%273.2%27%20r%3D%272.1%27%2F%3E%3Cellipse%20cx%3D%276.1%27%20cy%3D%2720.6%27%20rx%3D%272.0%27%20ry%3D%271.15%27%20transform%3D%27rotate%28-15%206.1%2020.6%29%27%2F%3E%3Cellipse%20cx%3D%2719.6%27%20cy%3D%2717.2%27%20rx%3D%271.9%27%20ry%3D%271.1%27%20transform%3D%27rotate%2835%2019.6%2017.2%29%27%2F%3E%3Ccircle%20cx%3D%274.0%27%20cy%3D%279.3%27%20r%3D%271.15%27%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2721.3%27%20cy%3D%2719.3%27%20r%3D%272.3%27%20fill%3D%27%23f2f2f2%27%2F%3E%3Cpath%20d%3D%27M21.3%2017.4l1.1.8-.4%201.3h-1.4l-.4-1.3z%27%20fill%3D%27%23333%27%2F%3E%3C%2Fsvg%3E"); }

/* ===== Distinta formazione (dashboard "La mia squadra") — riga
   avatar+nome invece delle sole pillole colorate, coerente con lo stile
   .chip-sm gia' usato nel dettaglio giornata. auto-fit: si allarga a
   riempire lo spazio disponibile invece di restare ammassata a sinistra. */
.lineup-role { display:flex; align-items:center; gap:8px; font-size:.78rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em; margin:12px 0 6px; }
.lineup-role:first-child { margin-top:0; }
.lineup-role .role-badge { width:22px; height:22px; font-size:.62rem; }
.lineup-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; margin-bottom:6px; }
.lineup-item { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:var(--radius-md); background:var(--surface-2); font-size:.82rem; font-weight:600; color:var(--text); min-width:0; }
.lineup-item:hover { background:var(--surface-offset); }
.lineup-name { white-space:normal; overflow-wrap:normal; line-height:1.2; }

/* ===== Stat tile (numeri grandi in evidenza) ===== */
.stat-tile { display:flex; flex-direction:column; align-items:flex-start; gap:2px; background:var(--surface-2); border-radius:var(--radius-lg); padding:12px 14px; }
.stat-tile .num { font-size:1.6rem; font-weight:800; color:var(--text); line-height:1; }
.stat-tile .lbl { font-size:.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em; }
.stat-tile svg { width:20px; height:20px; color:var(--primary); margin-bottom:4px; }

/* ===== Icon tile (azioni rapide) ===== */
.icon-tile-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; }
.icon-tile { display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 8px; border-radius:var(--radius-lg); background:var(--surface-2); color:var(--text); text-align:center; font-size:.75rem; font-weight:600; }
.icon-tile:hover { background:var(--surface-offset); }
.icon-tile svg { width:24px; height:24px; color:var(--primary); }

/* ===== App-style confirm sheet (sostituisce confirm()/alert() del browser) ===== */
.confirm-sheet { position:fixed; left:50%; bottom:0; z-index:61; width:min(420px,100%); background:var(--surface); border-radius:var(--radius-lg) var(--radius-lg) 0 0; padding:22px 20px calc(20px + env(safe-area-inset-bottom)); transform:translate(-50%,100%); transition:transform .25s ease; text-align:center; box-shadow:var(--shadow-md); }
.confirm-sheet.open { transform:translate(-50%,0); }
@media (min-width:600px) { .confirm-sheet { bottom:auto; top:50%; transform:translate(-50%,-40%); border-radius:var(--radius-lg); opacity:0; pointer-events:none; } .confirm-sheet.open { transform:translate(-50%,-50%); opacity:1; pointer-events:auto; } }
.confirm-icon { width:44px; height:44px; margin:0 auto 10px; border-radius:50%; background:var(--warn-highlight); color:var(--warn); display:flex; align-items:center; justify-content:center; }
.confirm-icon.danger { background:var(--error-highlight); color:var(--error); }
.confirm-icon svg { width:24px; height:24px; }
.confirm-title { font-weight:700; font-size:1rem; margin-bottom:6px; }
.confirm-msg { font-size:.85rem; color:var(--text-muted); margin-bottom:18px; line-height:1.4; }
.confirm-actions { display:flex; gap:10px; }
.confirm-actions .btn { flex:1; justify-content:center; }

/* ===== Toast (feedback non bloccante) ===== */
.toast-wrap { position:fixed; left:50%; bottom:calc(76px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:70; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; width:min(420px,92vw); }
@media (min-width:768px) { .toast-wrap { bottom:24px; } }
.toast { background:var(--text); color:var(--text-inverse); padding:10px 16px; border-radius:var(--radius-full); font-size:.8rem; font-weight:600; box-shadow:var(--shadow-md); opacity:0; transform:translateY(10px); transition:opacity .2s,transform .2s; max-width:100%; text-align:center; }
.toast.show { opacity:1; transform:translateY(0); }
.toast-ok { background:var(--success); color:var(--text-inverse); }
.toast-error { background:var(--error); color:var(--text-inverse); }

/* ===== Sezioni ruolo comprimibili (Rose) ===== */
.role-section { border:1px solid var(--border); border-radius:var(--radius-md); margin-bottom:10px; overflow:hidden; }
.role-section summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--surface-2); font-weight:600; font-size:.85rem; }
.role-section summary::-webkit-details-marker { display:none; }
.role-section summary .chev { width:16px; height:16px; color:var(--text-muted); transition:transform .15s; flex-shrink:0; }
.role-section[open] summary .chev { transform:rotate(90deg); }
.role-badge { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:800; color:#fff; flex-shrink:0; }
.role-badge.role-p { background:#1565c0; } .role-badge.role-d { background:#2e7d32; } .role-badge.role-c { background:#6a1b9a; } .role-badge.role-a { background:#b71c1c; }
.role-count { font-weight:400; color:var(--text-muted); font-size:.78rem; }
.role-sub { margin-left:auto; padding-right:8px; font-weight:700; font-size:.82rem; color:var(--text); min-width:72px; text-align:right; font-variant-numeric:tabular-nums; }
.player-list { display:flex; flex-direction:column; }
.player-row { display:flex; align-items:center; gap:10px; padding:10px 14px; border-top:1px solid var(--divider); font-size:.85rem; }
.player-row .pname { flex:1; }
.player-row .pcost { font-weight:600; color:var(--text-muted); font-size:.8rem; white-space:nowrap; }
.player-row .picon-btn { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-md); border:none; cursor:pointer; background:transparent; color:var(--text-muted); flex-shrink:0; }
.player-row .picon-btn:hover { background:var(--surface-2); }
.player-row .picon-btn.ok { color:var(--success); }
.player-row .picon-btn.danger { color:var(--error); }
.confirmed-dot { width:8px; height:8px; border-radius:50%; background:var(--success); flex-shrink:0; }
.pmedia { font-weight:700; font-size:.78rem; color:var(--primary); background:var(--primary-highlight); border-radius:6px; padding:2px 7px; white-space:nowrap; }
.pmedia.pmedia--empty { color:var(--text-faint); background:var(--surface-2); }
.prilancio-tag { display:inline-flex; align-items:center; gap:3px; font-weight:600; font-size:.72rem; color:var(--warn); background:var(--warn-highlight); border-radius:6px; padding:2px 7px; white-space:nowrap; cursor:help; }
.prilancio-tag svg { width:12px; height:12px; flex-shrink:0; }
.prilancio-tag--up { color:var(--success); background:var(--success-highlight); }
.prilancio-tag--down { color:var(--error); background:var(--error-highlight); }

/* Giornata "sotto osservazione": partita reale rinviata/sospesa, in attesa
   di recupero — promemoria puramente visivo (vedi giornata_in_osservazione
   in app.py), niente a che fare col calcolo. Stesso colore --warn ovunque
   compaia la giornata, così è riconoscibile a colpo d'occhio in ogni pagina. */
.osservazione-tag { display:inline-flex; align-items:center; gap:4px; font-weight:600; font-size:.72rem; color:var(--warn); background:var(--warn-highlight); border-radius:6px; padding:2px 8px; white-space:nowrap; }
.osservazione-tag svg { width:12px; height:12px; flex-shrink:0; }
.osservazione-row { background:var(--warn-highlight) !important; }
.osservazione-banner { display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--warn-highlight); color:var(--warn); border:1px solid var(--warn); border-radius:var(--radius-md); padding:10px 14px; font-size:.82rem; margin-bottom:14px; }
.osservazione-banner svg { width:18px; height:18px; flex-shrink:0; }
.osservazione-banner b { color:inherit; }

/* Selezione squadre partecipanti a un mercato (Avvio mercato / Mercato
   successivo, in mercato.html e simulazione.html): richiesto da Lorenzo il
   2026-09-22 al posto della vecchia griglia a colonne fisse (.section-grid +
   .check-row), dove un nome squadra lungo ("FC Como Calcio 1907") andava a
   capo dentro una colonna stretta e "spezzava" la riga. Qui le squadre sono
   pillole in un'unica riga che va a capo solo se non c'entra più, ciascuna
   sempre su una riga sola (white-space:nowrap). */
/* Casella di spunta con testo accanto (es. "Questo file è un recupero" in
   Log): la regola generale "input" più sopra (width:100%, min-height:40px)
   la renderebbe un quadratone stirato; qui torna una spunta normale. */
.check-inline { display:flex; align-items:flex-start; gap:10px; cursor:pointer; margin-top:14px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-2); color:var(--text); font-size:.85rem; font-weight:600; }
.check-inline input[type=checkbox] { width:18px; height:18px; min-height:0; padding:0; margin:1px 0 0; flex:0 0 auto; accent-color:var(--primary); cursor:pointer; }
.check-inline small { display:block; margin-top:2px; color:var(--text-muted); font-size:.75rem; font-weight:400; }
.check-inline:has(input:checked) { border-color:var(--primary); background:var(--primary-highlight); }
.team-toggle-row { display:flex; flex-wrap:wrap; gap:8px; }
.team-toggle { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border:1px solid var(--border); border-radius:999px; font-size:.82rem; white-space:nowrap; cursor:pointer; background:var(--surface-2); transition:background .15s, border-color .15s, color .15s; }
.team-toggle input { accent-color:var(--primary); margin:0; }
.team-toggle:hover { border-color:var(--primary); }
.team-toggle.is-checked { background:var(--primary-highlight); border-color:var(--primary); color:var(--primary); font-weight:600; }

/* ===== Rank badge (medaglie in classifica) ===== */
.rank-badge { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; font-size:.72rem; font-weight:800; color:var(--text); background:var(--surface-2); }
.rank-badge.gold { background:var(--gold); color:#231600; }
.rank-badge.silver { background:var(--silver); color:#1a2233; }
.rank-badge.bronze { background:var(--bronze); color:#2a1200; }

/* ===== Stat-tile posizione in classifica — stesso trattamento oro/
   argento/bronzo del .rank-badge (prima il tile della posizione in home
   restava sempre grigio anche essendo 1°/2°/3°, mentre lo stesso numero
   nelle tabelle classifica ha già l'accento colorato). */
.stat-tile.rank-1 { background:var(--gold); color:#231600; }
.stat-tile.rank-2 { background:var(--silver); color:#1a2233; }
.stat-tile.rank-3 { background:var(--bronze); color:#2a1200; }
.stat-tile.rank-1 svg, .stat-tile.rank-2 svg, .stat-tile.rank-3 svg { color:inherit; opacity:.85; }
.stat-tile.rank-1 .lbl, .stat-tile.rank-2 .lbl, .stat-tile.rank-3 .lbl { color:inherit; opacity:.75; }

/* ===== Hero card (intestazione homepage/dashboard) =====
   Il "bagliore" dietro la card e' un ::before radiale ancorato in alto a
   destra, tagliato dall'overflow:hidden della card — stesso trucco del mockup
   approvato, ma sobrio: un solo bagliore, non uno sfondo pattern ovunque. */
.hero-card { position:relative; overflow:hidden; display:flex; align-items:center; gap:16px; background:linear-gradient(135deg,var(--primary-highlight),var(--surface)); }
.hero-card::before { content:""; position:absolute; top:-40%; right:-15%; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle, var(--primary-highlight), transparent 70%); pointer-events:none; }
.hero-card > * { position:relative; z-index:1; }
/* Il badge squadra ha una sagoma a "scudetto" (clip-path) invece del solito
   pallino, per leggersi subito come stemma di club — coerente con le altre
   sagome/pallini colorati per ruolo usati altrove (chip, role-badge), che
   restano circolari perche' qui non rappresentano una squadra ma un ruolo. */
.hero-badge { width:58px; height:62px; display:flex; align-items:center; justify-content:center; font-size:1.05rem; font-weight:800; color:var(--text-inverse); background:linear-gradient(160deg, var(--primary-hover), var(--primary)); flex-shrink:0; box-shadow:0 8px 18px -4px var(--primary-highlight), var(--shadow-md); clip-path:polygon(50% 0%, 92% 14%, 92% 58%, 50% 100%, 8% 58%, 8% 14%); }
.hero-title { font-size:1.1rem; font-weight:700; color:var(--text); font-family:var(--font-display); }
.hero-sub { font-size:.8rem; color:var(--text-muted); margin-top:2px; }

/* ===== Stemma squadra generico (rose, classifica, torneo, scontri) =====
   Stessa sagoma "a scudetto" dell'hero-badge sopra, riproposta in due
   dimensioni piu' piccole per dare un tocco da app di calcio ovunque compaia
   il nome di una squadra — niente loghi reali, solo iniziali su scudo, come
   fanno molte app sportive quando non hanno lo stemma ufficiale. */
.team-badge { display:inline-flex; align-items:center; justify-content:center; font-weight:800; color:var(--text-inverse); background:linear-gradient(160deg, var(--primary-hover), var(--primary)); flex-shrink:0; box-shadow:var(--shadow-sm); clip-path:polygon(50% 0%, 92% 14%, 92% 58%, 50% 100%, 8% 58%, 8% 14%); }
.team-badge.sm { width:24px; height:26px; font-size:.58rem; }
.team-badge.md { width:38px; height:41px; font-size:.78rem; }

.giornate-grid { display:flex; flex-wrap:wrap; gap:6px; }
.giornata-chip { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:42px; padding:6px 5px; border-radius:8px; background:var(--surface-2); gap:1px; }
.giornata-chip .gnum { font-size:.62rem; color:var(--text-faint); }
.giornata-chip .gvoto { font-weight:800; font-size:.9rem; color:var(--success); }
.giornata-chip .gquot { font-size:.6rem; font-weight:600; color:var(--text-muted); }
.giornata-chip--assente { opacity:.5; }
.giornata-chip--assente .gvoto { color:var(--text-faint); font-weight:600; }

@media (prefers-reduced-motion: reduce) { * { transition-duration:.01ms !important; } }

/* ===== Home: mini campo con la formazione della giornata in corso (stesso
   disegno della pagina Giornata, in formato ridotto) + panchina in striscia */
.pitch.pitch-home { max-width:380px; min-height:360px; max-height:440px; margin:4px 0 10px; }
.pitch-home .pitch-card { cursor:pointer; }
.home-bench-title { font-size:.78rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em; margin:4px 0 2px; }
.pitch-home a.pitch-card { text-decoration:none; }
.pitch-home a.pitch-card:hover .slot-plus { border-color:#fff; color:#fff; background:rgba(255,255,255,.12); }
.pitch-empty-cta { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-decoration:none; }
.pitch-empty-cta span { font-size:.8rem; font-weight:600; color:#fff; background:rgba(0,0,0,.45); padding:4px 10px; border-radius:999px; }
.pitch-empty-cta b { font-size:.9rem; color:#0b1a10; background:#fff; padding:9px 16px; border-radius:var(--radius-md); box-shadow:var(--shadow-md); }
.pitch-empty-cta:hover b { background:#f1f5f2; }
.home-bench-title span { font-weight:500; text-transform:none; letter-spacing:0; color:var(--text-faint); margin-left:6px; }

/* ===== Trascina per scambiare (formazione) */
.draggable-slot { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.drag-ghost { position:fixed; z-index:9999; pointer-events:none; transform:translate(-50%,-60%) scale(1.08); opacity:.92; filter:drop-shadow(0 6px 12px rgba(0,0,0,.45)); }
.drag-origin { opacity:.35; }
.pitch-card.drop-ok, .reserve-chip.drop-ok { outline:2px solid var(--primary); outline-offset:3px; border-radius:12px; }
.pitch-card.drop-no, .reserve-chip.drop-no { outline:2px dashed var(--error); outline-offset:3px; border-radius:12px; }

/* ===== Giornata: campo + rosa da trascinare a fianco (sotto su telefono) */
.lineup-layout { display:grid; grid-template-columns:minmax(0,480px) minmax(240px,1fr); gap:18px; align-items:start; }
.lineup-layout .pitch { margin:0; }
.lineup-layout:not(:has(.rosa-panel)) { grid-template-columns:minmax(0,480px); justify-content:center; }
@media (max-width: 860px){ .lineup-layout { grid-template-columns:1fr; } .lineup-layout .pitch { margin:0 auto; } }
.rosa-panel { border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface-2); padding:10px; }
.rosa-panel.drop-ok { outline:2px dashed var(--primary); outline-offset:2px; }
.rosa-panel-title { font-size:.82rem; font-weight:700; margin:2px 4px 8px; }
.rosa-panel-title span { display:block; font-size:.7rem; font-weight:500; color:var(--text-muted); margin-top:2px; }
.rosa-group { margin-bottom:6px; }
.rosa-group > summary { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:.8rem; font-weight:700; padding:6px 4px; list-style:none; }
.rosa-group > summary::-webkit-details-marker { display:none; }
.rosa-group .role-badge { width:20px; height:20px; font-size:.6rem; }
.rosa-count { margin-left:auto; font-size:.7rem; font-weight:600; color:var(--text-muted); background:var(--surface); border-radius:999px; padding:1px 8px; }
.rosa-list { display:grid; gap:4px; padding:2px 0 4px; }
@media (min-width: 861px){ .rosa-panel { position:sticky; top:84px; max-height:calc(100vh - 100px); overflow-y:auto; overscroll-behavior:contain; } }
.rosa-group > summary .chev-r { width:14px; height:14px; color:var(--text-muted); transition:transform .15s; }
.rosa-group[open] > summary .chev-r { transform:rotate(90deg); }
.rosa-item { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:var(--radius-md); background:var(--surface); cursor:grab; font-size:.8rem; }
.rosa-item:hover { background:var(--surface-offset); }
.rosa-item .ri-name { flex:1; font-weight:600; min-width:0; }
.rosa-item .ri-meta { font-size:.7rem; color:var(--text-muted); white-space:nowrap; }
.rosa-empty { font-size:.74rem; color:var(--text-faint); padding:4px 8px; }
.drag-ghost.rosa-item { box-shadow:var(--shadow-md); }

/* Infortunati e squalificati: simbolo accanto al nome in tutte le liste
   (croce rossa = infortunato, cartellino rosso = squalificato) e sull'avatar
   nella pagina Giornata e in Home. Vedi indisp_icona() in app.py. */
.ind-ico { display:inline-block; vertical-align:-1px; margin-left:5px; flex-shrink:0; cursor:help; }
.ind-ico.ind-inf { width:12px; height:12px; background:
    linear-gradient(var(--error),var(--error)) center/4px 100% no-repeat,
    linear-gradient(var(--error),var(--error)) center/100% 4px no-repeat; }
.ind-ico.ind-sq { width:9px; height:12px; border-radius:2px; background:#e5342f; box-shadow:0 0 0 1px rgba(255,255,255,.55); transform:rotate(8deg); }
.chip, .chip-sm { position:relative; }
.ind-dot.ind-ico { position:absolute; top:-4px; right:-6px; margin:0; filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1px #fff); }
.chip-sm .ind-dot.ind-ico { top:-4px; right:-5px; }
.ind-mini { font-size:.7rem; font-weight:600; color:var(--error); margin-left:4px; white-space:nowrap; }
.role-indisp { display:inline-flex; align-items:center; gap:2px; }
.role-indisp .ind-ico { margin-left:2px; }