:root {
  --bg: #f4f5f7;
  --card: #fff;
  --text: #1c2230;
  --muted: #667085;
  --line: #e3e6ec;
  --accent: #0b6e4f;
  --accent-soft: #e3f3ec;
  --arancione: #ea580c;
  --mid-soft: #f3f6e4;
  --neg: #b42318;
  --warn-bg: #fff6e0;
  --warn-line: #f0c36a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12151c;
    --card: #1b2029;
    --text: #e6e9ef;
    --muted: #98a2b3;
    --line: #2c3340;
    --accent: #3ccf94;
    --accent-soft: #173a2d;
    --arancione: #fb923c;
    --mid-soft: #2a3120;
    --neg: #f97066;
    --warn-bg: #3a2e12;
    --warn-line: #8a6a1f;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent); }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 16px; }
.pagina { padding-top: 24px; padding-bottom: 24px; }

.top { background: var(--card); border-bottom: 1px solid var(--line); padding: 18px 0; }
.top h1 { margin: 0; font-size: 1.7rem; }
.marchio { display: flex; align-items: center; gap: 10px; letter-spacing: -.01em; line-height: 1; }
.marchio__logo { flex: none; width: 36px; height: 36px; }
.marchio__fdc { color: var(--arancione); }

.colonna { display: grid; gap: 20px; min-width: 0; }

.pannello { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px; min-width: 0; }
.pannello h2 { margin: 0; font-size: 1.15rem; }
.pannello__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.conta { color: var(--muted); font-weight: 400; font-size: .9rem; }
.nota { color: var(--muted); font-size: .85rem; margin: 8px 0; }
.avviso { background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 8px; padding: 10px 14px; margin: 0; }
.avviso--errore { border-color: var(--neg); }

/* ---------- filtri ---------- */
.filtri__corpo { display: grid; gap: 14px; margin-top: 14px; }
.campo { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--muted); border: 0; padding: 0; margin: 0; min-width: 0; }
.campo legend, .campo__label { padding: 0; margin-bottom: 4px; font-size: .85rem; color: var(--muted); }
.campo small { font-size: .8rem; }
select, input[type="number"], input[type="search"] {
  font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; min-width: 0;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font: inherit; font-size: .85rem; padding: 5px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--text);
}
.chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip:focus-visible, .esito:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.condizioni { display: grid; gap: 8px; }
.condizione { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.condizione .c-m { flex: 1 1 180px; }
.condizione .c-v { width: 80px; }
.c-u { color: var(--muted); width: 1em; }
.c-x { border: 0; background: none; color: var(--muted); font-size: 1.3rem; cursor: pointer; line-height: 1; }
.c-x:hover { color: var(--neg); }
.condizioni__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 10px; }
.link { font: inherit; background: none; border: 0; padding: 0 4px; color: var(--accent); cursor: pointer; text-decoration: underline; }

.btn {
  font: inherit; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px;
  background: transparent; color: var(--text); cursor: pointer;
}
.btn:hover { border-color: var(--accent); }
.btn--piccolo { padding: 4px 10px; font-size: .85rem; }
.toggle { font-size: .85rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }

/* ---------- tabella squadre ---------- */
.tabella-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.tabella { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .88rem; line-height: 1.25; }
.tabella th, .tabella td { padding: 4px 7px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.tabella tr:last-child td { border-bottom: 0; }
.tabella thead th { font-size: .72rem; line-height: 1.15; color: var(--muted); font-weight: 600; cursor: pointer; user-select: none; background: var(--card); white-space: normal; min-width: 3.2em; max-width: 5.5em; vertical-align: bottom; }
.tabella thead th.sticky { max-width: none; }
.tabella thead th:hover { color: var(--text); }
.tabella .num { text-align: right; }
.tabella .sticky { position: sticky; left: 0; background: var(--card); z-index: 1; }
.tabella td.sticky small { display: block; color: var(--muted); font-size: .68rem; line-height: 1.1; }
.tabella .squadra { padding: 0; font-weight: 600; text-decoration: none; color: var(--text); }
.tabella .squadra:hover { color: var(--accent); text-decoration: underline; }
.tabella .vuoto { text-align: center; color: var(--muted); padding: 20px; }
td.alto { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
td.medio { background: var(--mid-soft); }

/* ---------- prossime partite ---------- */
#prossime { display: block; }
.match { border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.match--ok { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.match__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.match__head h3 { margin: 0; font-size: 1rem; }
.match__head h3 span { color: var(--muted); font-weight: 400; font-size: .85rem; }
.match__head time { color: var(--muted); font-size: .85rem; }
.confronto { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: .85rem; font-variant-numeric: tabular-nums; }
.confronto th, .confronto td { padding: 3px 6px; text-align: left; }
.confronto thead th { color: var(--muted); font-weight: 600; }
.confronto tbody th { font-weight: 400; color: var(--muted); }
.confronto .num { text-align: right; }
.confronto small { font-weight: 400; }
.esiti { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; margin-top: 8px; }
.esito {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 4px; border: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: inherit; font: inherit; cursor: pointer; font-variant-numeric: tabular-nums;
}
.esito:hover { border-color: var(--accent); }
.esito.is-sel { background: var(--accent); border-color: var(--accent); color: #fff; }
.esito.is-sel .esito__prob { color: #fff; }
.esito__label { font-size: .78rem; font-weight: 600; }
.esito__quota { font-size: 1.05rem; font-weight: 700; }
.esito__prob { font-size: .75rem; color: var(--muted); }

/* ---------- schedina ---------- */
.schedina h2 { margin-bottom: 10px; }
.schedina__lista { list-style: none; margin: 0; padding: 0; clear: both; }
.schedina__lista li { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sch__nome { font-weight: 600; font-size: .9rem; }
.sch__esito { grid-column: 1; color: var(--muted); font-size: .85rem; }
.sch__x { grid-column: 2; grid-row: 1 / span 2; border: 0; background: none; color: var(--muted); font-size: 1.3rem; cursor: pointer; }
.sch__x:hover { color: var(--neg); }
/* riga con il riquadro CAMBIA: nome e campionato a sinistra, riquadro, X */
.schedina__lista li.match { border-width: 0 0 1px; border-radius: 0; padding: 8px 0; }
.schedina__lista li.sch--quadrato { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; }
.sch--quadrato .sch__nome { grid-column: 1; grid-row: 1; align-self: end; }
.sch--quadrato .sch__esito { grid-column: 1; grid-row: 2; align-self: start; font-size: .78rem; }
.sch--quadrato .pr-giocata { grid-column: 2; grid-row: 1 / span 2; }
.sch--quadrato .sch__x { grid-column: 3; }
.sch__quota { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--muted); font-size: .8rem; }
.sch__quota-in { width: 5.5em; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: .9rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sch__quota-in:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.sch__mia { font-size: .85rem; }
.sch__val { font-weight: 700; font-variant-numeric: tabular-nums; }
.sch__val.is-pos, #sch-valore.is-pos { color: var(--accent); }
.sch__val.is-neg, #sch-valore.is-neg { color: var(--neg); }
.schedina__vuota { color: var(--muted); font-size: .9rem; margin: 0 0 8px; }
.schedina__tot { margin: 12px 0; }
.schedina__tot div { display: flex; justify-content: space-between; padding: 3px 0; }
.schedina__tot dt { color: var(--muted); }
.schedina__tot dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.schedina__importo { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--muted); }
.schedina__importo input { width: 90px; text-align: right; }
.schedina__nota { margin: -6px 0 12px; font-size: .8rem; color: var(--muted); }
.schedina__vincita { display: flex; justify-content: space-between; margin: 12px 0; }
.schedina__vincita strong { font-size: 1.2rem; }
.schedina .btn { width: 100%; }

/* ---------- dettaglio squadra ---------- */
.dettaglio {
  width: min(680px, calc(100vw - 32px)); max-height: 88vh; padding: 0;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text);
}
.dettaglio::backdrop { background: rgba(0, 0, 0, .45); }
.dettaglio h2 { margin: 0; }
.dettaglio form { float: right; }
.dettaglio__x { border: 0; background: none; color: var(--muted); font-size: 1.6rem; cursor: pointer; line-height: 1; }

.piede { color: var(--muted); font-size: .85rem; padding-bottom: 24px; }

/* ---------- telefono ---------- */
@media (max-width: 720px) {
  .wrap { padding: 0 12px; }
  .top { padding: 12px 0; }
  .top h1 { font-size: 1.35rem; }
  .marchio { gap: 8px; }
  .marchio__logo { width: 30px; height: 30px; }
  .colonna { gap: 12px; }
  .pannello { padding: 12px; border-radius: 8px; }

  /* 16px evita lo zoom automatico di iOS sui campi */
  select, input[type="number"], input[type="search"] { font-size: 16px; min-height: 40px; }
  .chip { min-height: 36px; padding: 6px 12px; }
  .condizione { display: grid; grid-template-columns: 1fr 72px 1em 36px; gap: 6px; }
  .condizione .c-m { grid-column: 1 / -1; }
  .condizione .c-op { grid-column: 1; }
  .c-x { width: 36px; height: 40px; }
  .condizioni__azioni { justify-content: space-between; }
  .condizioni__azioni .btn { min-height: 40px; }
  .toggle { width: 100%; min-height: 36px; }
  .toggle input { width: 20px; height: 20px; }

  .match { padding: 10px; }
  .match__head { flex-direction: column; gap: 2px; }
  .esiti { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .esito { padding: 6px 2px; min-height: 56px; justify-content: center; }
  .esito__label { font-size: .7rem; }
  .esito__quota { font-size: .95rem; }
  .confronto th, .confronto td { padding: 3px 4px; }
  .confronto thead th { font-size: .75rem; white-space: normal; }

  .tabella { font-size: .8rem; }
  .tabella th, .tabella td { padding: 3px 5px; }
  .tabella thead th { font-size: .66rem; min-width: 2.8em; }
  .tabella .sticky { max-width: 120px; box-shadow: 1px 0 0 var(--line); }
  .tabella td.sticky .squadra { display: block; max-width: 104px; overflow: hidden; text-overflow: ellipsis; text-align: left; }

  .dettaglio {
    width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; margin: 0;
    border-radius: 0; border: 0; padding: 16px 12px;
  }
  .dettaglio__x { width: 44px; height: 44px; }
  .schedina__importo input { min-height: 40px; }
  .schedina .btn { min-height: 44px; }
  .sch__x { width: 44px; }
}

@media (max-width: 380px) {
  .esito__label { font-size: .65rem; }
}

@media (hover: none) {
  .esito:hover, .btn:hover { border-color: var(--line); }
  .esito.is-sel:hover { border-color: var(--accent); }
}

/* ---------- modale risultati squadra ---------- */
.dettaglio__dentro { padding: 20px; }
.dettaglio h2 { margin: 0; padding-right: 44px; }
.dettaglio .nota { margin-top: 2px; }
.dt-controlli { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0; }
.dt-controlli label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .85rem; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg__btn {
  font: inherit; font-size: .85rem; padding: 6px 14px; min-height: 36px;
  border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer;
}
.seg__btn:last-child { border-right: 0; }
.seg__btn.is-on { background: var(--accent); color: #fff; }
.dt-riepilogo { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; padding: 0; margin: 0 0 12px; color: var(--muted); font-size: .9rem; }
.dt-riepilogo b { color: var(--text); font-variant-numeric: tabular-nums; }
.ris {
  display: inline-block; min-width: 2.6em; padding: 1px 6px; border-radius: 5px;
  text-align: center; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ris--V { background: var(--accent-soft); color: var(--accent); }
.ris--N { background: var(--line); color: var(--text); }
.ris--P { background: rgba(180, 35, 24, .12); color: var(--neg); }
.dt-riepilogo .ris { min-width: 1.8em; }
.dt-tabella td { vertical-align: middle; }
.dt-data { color: var(--muted); }
.dt-data small { display: block; font-size: .7rem; line-height: 1; }
.dt-avv { display: flex; align-items: center; gap: 8px; }
.dt-avv .squadra { font-weight: 600; color: var(--text); text-decoration: none; padding: 0; }
.dt-avv .squadra:hover { color: var(--accent); text-decoration: underline; }
.luogo {
  flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 4px;
  font-size: .7rem; font-weight: 700; border: 1px solid var(--line); color: var(--muted);
}
.luogo--c { background: var(--text); color: var(--card); border-color: var(--text); }
.dt-tabella td.pt00 { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.match__head .squadra { font: inherit; font-weight: 700; color: var(--text); text-decoration: none; padding: 0; }
.match__head .squadra:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 720px) {
  .dettaglio { padding: 0; }
  .dettaglio__dentro { padding: 16px 12px calc(16px + env(safe-area-inset-bottom)); }
  .dt-controlli { flex-direction: column; align-items: stretch; }
  .seg { display: grid; grid-template-columns: repeat(3, 1fr); }
  .seg__btn { min-height: 40px; }
  .dt-controlli select { flex: 1; }
  .dt-tabella th, .dt-tabella td { padding: 7px 6px; }
  .dt-avv .squadra { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 480px) {
  .dt-extra { display: none; }
}
/* risultati squadra su telefono: lista compatta al posto della tabella */
.dt-lista { display: none; }
@media (max-width: 560px) {
  .dt-controlli--ris { flex-direction: row; align-items: center; gap: 8px; }
  .dt-controlli--ris .seg { flex: 1; }
  .dt-controlli--ris .seg__btn { padding: 6px 4px; }
  .dt-controlli--ris label { flex: none; }
  .dt-controlli--ris select { min-height: 40px; }
  .dt-riepilogo { gap: 4px 12px; font-size: .85rem; margin-bottom: 8px; }
  .dt-tabella-wrap { display: none; }
  .dt-lista { display: block; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
  .dt-lista ol { list-style: none; margin: 0; padding: 0; }
  .dt-r {
    display: grid; grid-template-columns: 40px 20px minmax(0, 1fr) auto 48px; align-items: center; gap: 8px;
    padding: 7px 10px 7px 9px; border-left: 3px solid transparent; font-variant-numeric: tabular-nums;
  }
  .dt-lista li + li { border-top: 1px solid var(--line); }
  .dt-r--V { border-left-color: var(--accent); }
  .dt-r--N { border-left-color: var(--muted); }
  .dt-r--P { border-left-color: var(--neg); }
  .dt-r--testa { padding-top: 6px; padding-bottom: 6px; background: var(--bg); color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--line); }
  .dt-r__data { color: var(--muted); font-size: .78rem; }
  .dt-r__avv { font: inherit; font-size: .9rem; font-weight: 600; color: var(--text); text-align: left; text-decoration: none; padding: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dt-r__tempi { display: grid; grid-template-columns: 30px 30px; gap: 2px; text-align: center; color: var(--muted); font-size: .78rem; }
  .dt-r__tempi .pt00 { color: var(--accent); font-weight: 700; background: var(--accent-soft); border-radius: 4px; }
  .dt-r .ris { min-width: 0; width: 48px; font-size: .9rem; }
  .dt-r__fin { text-align: center; }
}

/* ---------- header con strumenti ---------- */
.top { position: sticky; top: 0; z-index: 20; padding: 12px 0 10px; }
/* pulsanti quadrati tutti su una riga: icona sopra ed etichetta corta sotto;
   sul telefono solo icona, su una riga propria sotto il titolo */
.top__inner { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.top__titolo { min-width: 0; flex: 0 1 auto; }
.top__azioni { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; }
.top__btn {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  flex: 0 1 60px; width: 60px; min-width: 0; height: 60px; padding: 4px 2px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--text); font: inherit; font-size: .62rem; font-weight: 600; line-height: 1.1; cursor: pointer;
}
.top__btn:hover { border-color: var(--accent); color: var(--accent); }
.top__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.top__btn svg { flex: none; width: 22px; height: 22px; }
.top__btn-testo { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top__btn .badge { position: absolute; top: -6px; right: -6px; }
@media (max-width: 720px) {
  /* telefono: pulsanti su una riga tutta loro sotto il titolo, larghi quanto lo schermo permette */
  .top__inner { flex-wrap: wrap; gap: 8px; }
  .top--menu .top__inner { gap: 0; }
  /* il titolo (con il pulsante della musica) dopo 2 secondi sale e sparisce: i pulsanti salgono al suo posto.
     musica.js mette .top--chiuso; la freccetta sotto l'header lo riapre e lo richiude */
  .top__titolo { flex: 1 1 100%; }
  .top--menu .top__titolo {
    max-height: 48px; margin-bottom: 8px; overflow: hidden;
    transition: max-height .45s ease, margin-bottom .45s ease, opacity .45s ease, transform .45s ease, visibility .45s;
  }
  .top--menu.top--chiuso .top__titolo { max-height: 0; margin-bottom: 0; opacity: 0; transform: translateY(-100%); visibility: hidden; }
  /* freccetta stretta come prima voce a sinistra della riga dei pulsanti */
  .top__freccia {
    display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 46px; padding: 0;
    border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--muted); cursor: pointer;
  }
  .top__freccia:hover { color: var(--accent); border-color: var(--accent); }
  .top__freccia svg { transition: transform .3s ease; }
  .top--menu:not(.top--chiuso) .top__freccia svg { transform: rotate(180deg); } /* aperto: punta in su per richiudere */
  .top__freccia:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .top__azioni { flex: 1 1 100%; gap: 6px; }
  .top__btn { flex: 1 1 0; width: auto; height: 46px; padding: 0; border-radius: 10px; }
  .top__btn svg { width: 22px; height: 22px; }
  .top__btn-testo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* solo per gli screen reader */
  .top__btn .badge { top: -5px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; font-size: .65rem; line-height: 16px; }
}
@media (max-width: 360px) {
  .top__azioni { gap: 4px; }
  .top__btn, .top__freccia { height: 42px; }
  .top__freccia { flex-basis: 20px; width: 20px; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .top--menu .top__titolo, .top__freccia svg { transition: none; }
}
.top__freccia { display: none; } /* solo su telefono (sopra) */
@media (max-width: 720px) { .top__freccia { display: grid; } }
/* titolo e pulsante della musica sulla stessa riga */
.top__titolo { display: flex; align-items: center; gap: 12px; }
.badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: .75rem; line-height: 20px; text-align: center;
}
.badge[hidden] { display: none; }

/* ---------- modali filtri e prossime partite ---------- */
.dettaglio { overflow-y: auto; overscroll-behavior: contain; }
.modale h2 { margin-bottom: 4px; }
.modale .toggle { margin: 4px 0 12px; }
.modale .filtri__corpo { margin-top: 12px; }
.modale__piede {
  position: sticky; bottom: -20px; margin: 16px -20px -20px; padding: 12px 20px 20px;
  background: var(--card); border-top: 1px solid var(--line);
}
.btn--primario { width: 100%; min-height: 44px; background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.btn--primario:hover { border-color: var(--accent); filter: brightness(1.08); }

@media (max-width: 720px) {
  .top { padding: 10px 0 8px; }
  .modale__piede { bottom: calc(-16px - env(safe-area-inset-bottom)); margin: 16px -12px calc(-16px - env(safe-area-inset-bottom)); padding: 12px 12px calc(16px + env(safe-area-inset-bottom)); }
}
@media (max-width: 560px) {
  /* titolo piu' piccolo: resta visibile accanto ai 4 pulsanti */
  .top h1 { font-size: 1.1rem; }
  .marchio { gap: 6px; white-space: nowrap; }
  .marchio__logo { width: 24px; height: 24px; }
}
@media (max-width: 420px) {
}
@media (max-width: 360px) {
  .top h1 { font-size: .95rem; }
  .marchio { gap: 4px; }
  .marchio__logo { width: 20px; height: 20px; }
}


/* avviso "sei offline" dell'app */
#offline {
  position: fixed; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 100;
  max-width: calc(100vw - 32px); padding: 8px 14px; border-radius: 999px;
  background: #1c2230; color: #fff; font-size: .85rem; font-weight: 600; box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
}
/* avviso breve dopo una selezione (popover sopra i modali): in fondo allo schermo, grande e facile da toccare, sparisce dopo 2 s */
.avviso-sch {
  position: fixed; inset: auto 12px calc(12px + env(safe-area-inset-bottom)) 12px; margin: 0 auto; width: auto; max-width: 520px;
  padding: 0; border: 0; background: transparent; overflow: visible; z-index: 200;
  opacity: 0; transform: translateY(24px); transition: opacity .2s ease-out, transform .2s ease-out;
}
.avviso-sch[hidden] { display: none; }
.avviso-sch.is-on { opacity: 1; transform: none; }
.avviso-sch.is-esce { opacity: 0; transform: translateY(12px); }
.avviso-sch__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 10px 18px;
  border: 0; border-radius: 14px; background: #1c2230; color: #fff; font: inherit; font-size: .95rem; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35); touch-action: manipulation;
}
.avviso-sch__btn b { font-variant-numeric: tabular-nums; }
.avviso-sch.is-tolta .avviso-sch__btn b { color: #fca5a5; }
.avviso-sch__btn span { flex: none; padding: 8px 12px; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 700; white-space: nowrap; }
.avviso-sch__btn:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) { .avviso-sch, .avviso-sch.is-esce { transform: none; } }
/* ---------- schedina nel modale ---------- */
.st-apri {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 10px;
  padding: 8px 12px; min-height: 40px; border: 1px dashed var(--line); border-radius: 8px;
  background: transparent; color: var(--text); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
}
.st-apri:hover { border-color: var(--accent); color: var(--accent); }
a.st-apri { text-decoration: none; }
/* schedine stampate (pagina schedine.php) */
.st-pagina { max-width: 760px; }
.st-titolo { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 1.6rem; }
.st-titolo svg { color: var(--accent); flex: none; }
.st-filtri { margin: 14px 0 6px; display: flex; flex-wrap: wrap; gap: 8px; }
.st__mia { display: inline-block; white-space: nowrap; margin-right: 4px; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .7rem; font-weight: 700; vertical-align: 1px; }
.st-filtri .seg__btn { text-decoration: none; display: inline-flex; align-items: center; }
.st-conta { color: var(--muted); font-size: .85rem; margin: 8px 0 0; }
.st-altre { display: block; margin: 8px auto 0; }
.marchio--link { color: inherit; text-decoration: none; font-size: 1.7rem; font-weight: 700; }
@media (max-width: 720px) { .marchio--link { font-size: 1.35rem; } }
@media (max-width: 560px) { .marchio--link { font-size: 1.1rem; } }
a.top__btn { text-decoration: none; }
.st .st__stampa {
  grid-row: 1; grid-column: 4; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--card); color: var(--accent); cursor: pointer;
}
.st .st__stampa:hover { border-color: var(--accent); background: var(--accent-soft); }
.st .st__stampa:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.st .st__condividi {
  grid-row: 1; grid-column: 5; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--card); color: var(--accent); cursor: pointer;
}
.st .st__condividi:hover { border-color: var(--accent); background: var(--accent-soft); }
.st .st__condividi:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.toast {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 200;
  max-width: calc(100vw - 32px); padding: 10px 14px; border-radius: 10px; background: #1c2230; color: #fff; font-size: .85rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
}
.st-lista { list-style: none; margin: 12px 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.st { min-width: 0; }
.st details { border: 1px solid var(--line); border-radius: 8px; }
.st details[open] { border-color: var(--muted); }
.st summary {
  display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 2px 10px; align-items: center;
  padding: 10px 12px; cursor: pointer; list-style: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.st summary::-webkit-details-marker { display: none; }
.st__tipo { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.st__tipo--kz { background: rgba(225, 29, 72, .12); color: #e11d48; }
.st__quando { white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.st__riepilogo { grid-column: 1 / -1; grid-row: 2; color: var(--muted); font-size: .82rem; }
.st__righe { list-style: none; margin: 0; padding: 0 12px; border-top: 1px solid var(--line); }
.st__righe li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.st__righe li > div { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.st__righe b { font-size: .88rem; }
.st__righe small { display: block; color: var(--muted); font-size: .75rem; }
.st__giocata { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-size: .78rem; color: var(--muted); flex: none; max-width: 45%; }
.st__giocata b { color: var(--accent); font-size: .95rem; font-variant-numeric: tabular-nums; }
.st__codice { margin: 8px 12px 0; font-size: .75rem; color: var(--muted); font-family: monospace; }
.st .st__codice { margin-bottom: 12px; }
.st__piede { display: flex; align-items: center; gap: 6px; padding: 0 12px 12px; }
.st .st__piede .st__codice { margin: 0 auto 0 0; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.st__icona {
  flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer;
}
.st__icona:hover, .st__icona[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.st__icona:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* il cestino compare solo dopo la password giusta */
.st__elimina { display: none; color: var(--neg); }
.is-admin .st__elimina { display: grid; }
.st__elimina:hover { border-color: var(--neg); color: var(--neg); background: transparent; }
/* modifica della giocata di ogni evento (con password) */
.st-mod { padding: 10px 12px 12px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.st-mod__riga { display: grid; gap: 4px; }
.st-mod__riga b { font-size: .85rem; overflow-wrap: anywhere; }
.st-mod__riga small { color: var(--muted); font-size: .72rem; }
.st-mod select, .st-mod input { font: inherit; font-size: .95rem; padding: 6px 10px; min-height: 40px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--text); width: 100%; box-sizing: border-box; }
.st-mod select:focus-visible, .st-mod input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.st-mod__scelta { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.st-mod input[type="time"] { width: auto; min-width: 7.5em; justify-self: end; }
.st-mod__scelta > select:only-child { grid-column: 1 / -1; }
.st-mod__scelta--quota { grid-template-columns: 1fr auto auto; }
.st-mod input.st-mod__quota { width: 6em; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.st-mod__val { font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; min-width: 5.5em; text-align: right; }
.st-mod__val.is-pos, .st__val.is-pos { color: var(--accent); }
.st-mod__val.is-neg, .st__val.is-neg { color: var(--neg); }
.st__val { font-weight: 700; }
.st-mod__nota { color: var(--muted); font-size: .75rem; }
.st-mod__azioni { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.st-mod__azioni .btn--primario { width: auto; }
.schedina__azioni { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.schedina__azioni .btn--primario { width: auto; }
.schedina__azioni .btn--icona { width: 44px; }
.schedina__azioni #sch-svuota { grid-column: 1 / -1; }
.schedina__azioni .btn:disabled { opacity: .45; cursor: default; filter: none; }
.modale.schedina { width: min(440px, calc(100vw - 32px)); }
.schedina__vuota .link { padding: 0; }
@keyframes pulsa { 0% { transform: scale(1); } 40% { transform: scale(1.15); } 100% { transform: scale(1); } }
.pulsa { animation: pulsa .35s ease-out; }
@media (max-width: 720px) {
  .modale.schedina { width: 100vw; }
}

/* ---------- tab del modale squadra ---------- */
.dt-tabs { display: flex; gap: 4px; margin: 12px 0 4px; border-bottom: 1px solid var(--line); }
.dt-tab {
  font: inherit; font-weight: 600; padding: 8px 14px; min-height: 40px; cursor: pointer;
  border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; background: none; color: var(--muted);
}
.dt-tab:hover { color: var(--text); }
.dt-tab.is-on { color: var(--accent); border-bottom-color: var(--accent); }
.dt-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---------- classifica ---------- */
.cl-tabella td { vertical-align: middle; }
.cl-tabella .squadra { font-weight: 600; color: var(--text); text-decoration: none; padding: 0; }
.cl-tabella .squadra:hover { color: var(--accent); text-decoration: underline; }
.cl-pos { color: var(--muted); width: 2em; }
.cl-pt { font-weight: 700; }
.cl-tabella tr.is-mia td { background: var(--accent-soft); }
.cl-tabella tr.is-mia .squadra, .cl-tabella tr.is-mia .cl-pt { color: var(--accent); }
.cl-forma { white-space: nowrap; }
.cl-forma .ris { min-width: 1.5em; padding: 0 3px; margin-right: 2px; font-size: .75rem; }
@media (max-width: 720px) {
  .cl-tabella th, .cl-tabella td { padding: 6px 5px; }
  .cl-tabella .squadra { display: inline-block; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
  .dt-tab { flex: 1; }
}
.cl-prossima { white-space: nowrap; }
.cl-prossima .luogo { margin-right: 6px; vertical-align: middle; }
.dt-controlli select { font: inherit; }

/* ---------- nuvoletta forma ---------- */
.cl-forma .ris { cursor: help; }
.cl-forma .ris:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tip {
  position: fixed; z-index: 100; max-width: min(280px, calc(100vw - 16px));
  padding: 8px 10px; border-radius: 8px; pointer-events: none;
  background: var(--text); color: var(--card); font-size: .8rem; line-height: 1.35;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.tip[hidden] { display: none; }
.tip b { display: block; font-size: .9rem; font-variant-numeric: tabular-nums; }
.tip span { opacity: .8; }
.tip::after {
  content: ""; position: absolute; left: var(--freccia, 50%); top: 100%;
  margin-left: -6px; border: 6px solid transparent; border-top-color: var(--text);
}
.tip--sotto::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--text); }

/* ---------- tag filtri rapidi ---------- */
.chip.tag { border-radius: 6px; border-style: dashed; }
.chip.tag.is-on { border-style: solid; background: var(--accent-soft); color: var(--accent); border-color: var(--accent); font-weight: 600; }

/* ---------- colonne visibili (discreto) ---------- */
.colonne { font-size: .8rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; }
.colonne summary { cursor: pointer; width: max-content; list-style: none; }
.colonne summary::-webkit-details-marker { display: none; }
.colonne summary::before { content: "▸ "; }
.colonne[open] summary::before { content: "▾ "; }
.colonne summary:hover { color: var(--text); }
.colonne .chips { margin-top: 8px; }
.chips--piccoli .chip { font-size: .75rem; padding: 2px 10px; min-height: 0; color: var(--muted); }
.chips--piccoli .chip.is-on { background: transparent; color: var(--text); border-color: var(--muted); }
@media (max-width: 720px) {
  .chips--piccoli .chip { min-height: 32px; }
}

/* ---------- selettori compatti Ultime / Campo ---------- */
.mini-filtri { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.mini { display: flex; align-items: center; gap: 8px; }
.mini__label { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.seg--mini { border-radius: 999px; background: var(--bg); border-color: var(--line); padding: 2px; gap: 2px; }
.seg--mini .seg__btn {
  min-height: 0; padding: 3px 10px; border: 0; border-radius: 999px;
  font-size: .8rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums;
  transition: background .15s, color .15s;
}
.seg--mini .seg__btn:hover { color: var(--text); }
.seg--mini .seg__btn.is-on { background: var(--card); color: var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.seg--mini .seg__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 720px) {
  .seg.seg--mini { display: inline-flex; }
  .seg--mini .seg__btn { padding: 6px 10px; }
}

/* ---------- campionati come tag compatti ---------- */
.chips--leghe { gap: 5px; }
.chips--leghe .chip {
  min-height: 0; padding: 3px 10px; border-radius: 6px;
  font-size: .78rem; font-weight: 600; color: var(--muted); background: transparent;
}
.chips--leghe .chip:hover { color: var(--text); border-color: var(--muted); }
.chips--leghe .chip.is-on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
@media (max-width: 720px) {
  .chips--leghe .chip { padding: 6px 10px; }
}

/* ---------- prossima partita (scheda squadra) ---------- */
.prox { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 8px; padding: 10px 12px; margin: 10px 0 4px; }
.prox p { margin: 0; }
.prox--vuoto { color: var(--muted); font-size: .85rem; border-left-color: var(--line); }
.prox__label { color: var(--muted); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.prox__match { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px !important; font-size: 1.05rem; }
.prox__vs { color: var(--muted); font-size: .9rem; }
.prox__match .squadra { font: inherit; font-weight: 700; color: var(--text); text-decoration: none; padding: 0; }
.prox .squadra:hover { color: var(--accent); text-decoration: underline; }
.prox__match b { font-weight: 700; }
.prox__riga { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.prox__tutte { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: .85rem; }
.prox__tutte summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.prox__tutte ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 16px; }
.prox__tutte li { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 4px; }
.prox__tutte li.is-mia { background: var(--accent-soft); }
.prox__tutte .squadra { font-weight: 600; color: var(--text); text-decoration: none; padding: 0; }
.prox__tutte li.is-mia .squadra { color: var(--accent); }

/* ---------- confronto (scheda squadra) ---------- */
.cf-titolo { font-weight: 600; margin: 8px 0 0; }
.cf-tabella { font-size: .9rem; }
.cf-tabella thead th { vertical-align: bottom; }
.cf-tabella thead small { display: block; color: var(--muted); }
.cf-tabella thead .squadra { font: inherit; font-weight: 600; color: var(--text); padding: 0; }
.cf-tabella tr.cf-gruppo th { padding-top: 12px; color: var(--text); font-weight: 700; border-bottom: 1px solid var(--line); }
/* colonna Media: in evidenza e cliccabile (mette la giocata nella schedina) */
.cf-tabella th.cf-media-testa { color: var(--accent); font-weight: 800; font-size: .85rem; }
.cf-tabella .cf-tocca { color: var(--accent) !important; font-weight: 600; font-size: .68rem; text-transform: uppercase; letter-spacing: .02em; }
.cf-tabella td.cf-media { font-weight: 700; padding: 3px 4px; background: rgba(11, 110, 79, .04); border-left: 2px solid var(--accent-soft); }
.cf-gioca {
  width: 100%; min-width: 58px; min-height: 30px; padding: 3px 8px; border: 1.5px solid var(--accent); border-radius: 999px;
  background: var(--card); color: var(--accent); font: inherit; font-weight: 800; font-variant-numeric: tabular-nums;
  text-align: center; cursor: pointer; white-space: nowrap; transition: transform .08s;
}
.cf-gioca.medio { background: var(--mid-soft); }
.cf-gioca.alto { background: var(--accent-soft); }
.cf-gioca:not(.alto):not(.medio) { border-color: var(--line); color: var(--text); font-weight: 600; }
.cf-gioca:hover { border-color: var(--accent); }
.cf-gioca:active { transform: scale(.95); }
.cf-gioca:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cf-gioca.is-sel, .cf-gioca.is-sel:not(.alto):not(.medio) { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 800; }
.cf-tabella tr.cf-sel th { color: var(--accent); font-weight: 700; }

/* ---------- KFDC (consigliati) ---------- */
.kf-titolo { margin: 14px 0 8px; font-size: 1.05rem; color: var(--accent); }
.kf-top { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.kf-card {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px;
  border: 1px solid var(--accent); border-radius: 8px; background: var(--accent-soft);
}
.kf-pos {
  position: absolute; top: 8px; right: 10px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: .75rem; font-weight: 700; background: var(--accent); color: var(--card);
}
.kf-perc { font-size: 1.6rem; font-weight: 800; color: var(--accent); line-height: 1.1; font-variant-numeric: tabular-nums; }
.kf-nome { font-weight: 700; }
.kf-det { font-size: .8rem; color: var(--muted); }
.kf-tabella tbody th { color: var(--text); }
/* KFDC selezionabile: card e righe mettono la giocata nella schedina */
.kf-tocca { margin: -4px 0 8px; color: var(--muted); font-size: .8rem; }
.kf-cliccabile { cursor: pointer; }
.kf-cliccabile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kf-card.kf-cliccabile { transition: transform .08s, box-shadow .15s; }
.kf-card.kf-cliccabile:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, .1); }
.kf-card.kf-cliccabile:active { transform: scale(.98); }
.kf-card.is-sel { background: var(--accent); border-color: var(--accent); color: #fff; }
.kf-card.is-sel .kf-perc, .kf-card.is-sel .kf-det { color: #fff; }
.kf-card.is-sel .kf-pos { background: #fff; color: var(--accent); }
.kf-tabella tr.kf-cliccabile:hover th, .kf-tabella tr.kf-cliccabile:hover td:not(.cf-media) { background: var(--bg); }
.kf-tabella .cf-gioca { display: inline-block; width: auto; min-width: 58px; }
.kf-tabella td.cf-media { text-align: right; }
.kf-tabella tr.cf-sel th, .cf-tabella tr.cf-sel th { color: var(--accent); }
.cf-tabella .cf-gioca { display: inline-block; width: auto; min-width: 58px; }
/* Confronto e KFDC su telefono: controlli su 2 righe, card e lista KFDC compatte */
@media (max-width: 560px) {
  .dt-controlli--cf { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
  .dt-controlli--cf > label:first-child { grid-column: 1 / -1; }
  .dt-controlli--cf .seg { grid-template-columns: repeat(2, 1fr); }
  .dt-controlli--cf .seg__btn { padding: 6px 8px; }
  .dt-controlli--cf select { min-height: 40px; }
  .cf-titolo { margin-top: 4px; font-size: .9rem; }
  .kf-titolo { margin: 10px 0 4px; font-size: .95rem; }
  .kf-tocca { margin: 0 0 6px; font-size: .75rem; }
  .kf-top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
  .kf-card { padding: 8px; gap: 1px; }
  .kf-pos { top: 6px; right: 6px; width: 18px; height: 18px; font-size: .65rem; }
  .kf-perc { font-size: 1.2rem; }
  .kf-nome { font-size: .78rem; line-height: 1.2; overflow-wrap: anywhere; }
  .kf-det { font-size: .66rem; line-height: 1.25; }
  .kf-tabella { font-size: .8rem; }
  .kf-tabella th, .kf-tabella td { padding: 3px 4px; }
  .kf-tabella thead th { font-size: .68rem; }
  .kf-tabella td.cl-pos { width: 1.6em; font-size: .72rem; }
  .kf-tabella tbody th { line-height: 1.2; }
  .kf-tabella .cf-gioca { min-width: 46px; min-height: 26px; padding: 2px 6px; font-size: .8rem; }
}
/* Confronto su telefono: tabella a larghezza fissa, mai scorrimento orizzontale */
@media (max-width: 560px) {
  .cf-tabella-wrap { overflow-x: hidden; }
  .cf-tabella { table-layout: fixed; width: 100%; font-size: .78rem; margin: 0; }
  .cf-tabella col.cf-c-nome { width: 34%; }
  .cf-tabella col.cf-c-num { width: 19%; }
  .cf-tabella col.cf-c-media { width: 28%; }
  .cf-tabella th, .cf-tabella td { padding: 3px 3px; overflow: hidden; }
  .cf-tabella tbody th, .cf-tabella thead th { white-space: normal; }
  .cf-tabella tbody th { line-height: 1.15; overflow-wrap: anywhere; }
  .cf-tabella td.num { white-space: nowrap; }
  .cf-tabella thead th { font-size: .66rem; line-height: 1.15; overflow-wrap: anywhere; }
  .cf-tabella thead small { font-size: .6rem; }
  .cf-tabella .cf-tocca { display: none; }
  .cf-tabella tr.cf-gruppo th { padding-top: 8px; font-size: .8rem; }
  .cf-tabella td.cf-media { padding: 3px 2px; }
  .cf-tabella .cf-gioca { min-width: 0; width: 100%; max-width: 64px; min-height: 26px; padding: 2px 4px; font-size: .78rem; }
  .cf-tabella .cf-sotto { font-size: .6rem; white-space: normal; }
  .cf-ct { width: 100%; max-width: 64px; }
  .cf-tabella .cf-gioca--ct { min-width: 0; padding: 2px 3px; font-size: .74rem; }
  .cf-gioca--ct b { width: 14px; height: 14px; font-size: .6rem; }
}
/* KFDC su telefono: come il Confronto, tabella a larghezza fissa senza scorrimento orizzontale */
@media (max-width: 560px) {
  .kf-tabella-wrap { overflow-x: hidden; }
  .kf-tabella { table-layout: fixed; width: 100%; margin: 0; font-size: .78rem; }
  .kf-tabella col.kf-c-pos { width: 8%; }
  .kf-tabella col.kf-c-nome { width: 38%; }
  .kf-tabella col.kf-c-num { width: 16%; }
  .kf-tabella col.kf-c-media { width: 22%; }
  .kf-tabella th, .kf-tabella td { padding: 3px 3px; overflow: hidden; }
  .kf-tabella tbody th, .kf-tabella thead th { white-space: normal; overflow-wrap: anywhere; line-height: 1.15; }
  .kf-tabella td.num { white-space: nowrap; }
  .kf-tabella td.cl-pos { width: auto; font-size: .68rem; }
  .kf-tabella td.cf-media { padding: 3px 2px; text-align: center; }
  .kf-tabella .cf-gioca { min-width: 0; width: 100%; max-width: 60px; min-height: 26px; padding: 2px 4px; font-size: .78rem; }
}
/* Segna / Non segna / Porta inviolata: due pillole C e T una sopra l'altra */
.cf-ct { display: inline-flex; flex-direction: column; gap: 4px; align-items: stretch; }
.cf-tabella .cf-gioca--ct { min-width: 64px; padding: 2px 8px; font-size: .82rem; }
.cf-gioca--ct b { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 3px; font-size: .68rem; background: var(--text); color: var(--card); }
.cf-gioca--ct.is-sel b { background: #fff; color: var(--accent); }
.cf-tabella .cf-sotto { display: block; margin-top: 2px; color: var(--muted); font-size: .68rem; font-weight: 400; white-space: nowrap; }
.kf-tabella tr.is-top td, .kf-tabella tr.is-top th { font-weight: 700; }
/* tab del modale squadra: tutti su una riga, KFDC in evidenza come pillola */
.dt-tabs--squadra { align-items: center; gap: 2px; }
.dt-tabs--squadra .dt-tab { flex: 0 1 auto; min-width: 0; padding: 6px 10px; font-size: .85rem; white-space: nowrap; }
.dt-tabs--squadra .dt-tab[data-tab="kfdc"] {
  flex: none; margin: 0 0 4px auto; padding: 5px 12px; min-height: 32px; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, #f97316, #e11d48); color: #fff; font-weight: 800; letter-spacing: .03em;
  box-shadow: 0 2px 8px rgba(225, 29, 72, .3);
}
.dt-tabs--squadra .dt-tab[data-tab="kfdc"]:hover { filter: brightness(1.08); color: #fff; }
.dt-tabs--squadra .dt-tab[data-tab="kfdc"].is-on { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px #e11d48; }
@media (max-width: 720px) {
  .dt-tabs--squadra .dt-tab { flex: 1 1 auto; padding: 6px 4px; font-size: .78rem; }
  .dt-tabs--squadra .dt-tab[data-tab="kfdc"] { flex: none; padding: 5px 10px; font-size: .8rem; }
}

/* ---------- KFZZZDC: pulsante CTA nell'header e popup ---------- */
.top__btn--kz {
  border: 0; color: #fff; font-weight: 800; letter-spacing: .04em;
  background: linear-gradient(135deg, #f97316, #e11d48);
  box-shadow: 0 2px 10px rgba(225, 29, 72, .35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.top__btn--kz:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(225, 29, 72, .45); }
.top__btn--kz:focus-visible { outline-color: #e11d48; }
.kz-emoji { font-size: 1.35rem; line-height: 1; }
@media (max-width: 560px) {
  .kz-emoji { font-size: 1.4rem; }
}

.kz-lista { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.kz { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.kz__pos {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--line); font-size: .8rem; font-weight: 700;
}
.kz:nth-child(-n+3) .kz__pos { background: linear-gradient(135deg, #f97316, #e11d48); color: #fff; }
.kz__partita { min-width: 0; }
.kz__partita h3 { margin: 0; font-size: .95rem; }
.kz__partita h3 span { color: var(--muted); font-weight: 400; }
.kz__partita .squadra { font: inherit; font-weight: 700; color: var(--text); text-decoration: none; padding: 0; }
.kz__partita .squadra:hover { color: var(--accent); text-decoration: underline; }
.kz__partita small { color: var(--muted); }
.kz__giocata { min-width: 120px; text-align: center; }
.kz { cursor: pointer; }
.kz:has(.esito.is-sel) { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.kz__giocata--perc { display: flex; flex-direction: column; align-items: center; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }
.kz__valore { font-size: 1.15rem; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.esito.is-sel .kz__valore { color: #fff; }
.kz__tipo { font-size: .9rem; font-weight: 800; line-height: 1.2; }
.kz__quota { font-size: .72rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.esito.is-sel .kz__quota { color: rgba(255, 255, 255, .85); }
/* il riquadro apre il modale Giocate: aspetto da pulsante + piccola icona di cambio */
.kz__giocata { box-shadow: 0 1px 0 var(--line), 0 2px 6px rgba(0, 0, 0, .06); transition: transform .08s, box-shadow .15s; }
.kz__giocata:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, .1); }
.kz__giocata:active { transform: scale(.96); box-shadow: none; }
.kz__cambia {
  margin-top: 2px; padding: 0 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent);
  font-size: .62rem; font-weight: 700; line-height: 1.4; white-space: nowrap;
}
.esito.is-sel .kz__cambia { background: rgba(255, 255, 255, .22); color: #fff; }
@media (max-width: 560px) {
  /* la giocata e la % restano a destra della riga, in una colonna stretta */
  .kz { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; padding: 10px; }
  .kz__pos { width: 22px; height: 22px; font-size: .72rem; }
  .kz__partita h3 { font-size: .88rem; line-height: 1.25; }
  .kz__partita small { display: block; font-size: .72rem; line-height: 1.3; margin-top: 2px; }
  .kz__giocata { min-width: 0; width: 96px; padding: 5px 6px; }
  .kz__giocata .esito__label { font-size: .68rem; line-height: 1.2; overflow-wrap: anywhere; }
  .kz__giocata .kz__tipo { font-size: .78rem; }
  .kz__quota { font-size: .64rem; }
  .kz__valore { font-size: 1.05rem; }
}
.kz-filtri { display: grid; gap: 8px; margin: 10px 0; clear: both; } /* clear: la X del modale e' in float e lo restringeva */
.kz-noclown {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 8px;
}
.kz-noclown.is-on { border-color: #e11d48; background: rgba(225, 29, 72, .08); }
.kz-noclown__icona { font-size: 1.1rem; flex: none; }
.kz-noclown__testo { flex: 1; min-width: 0; }
.kz-noclown select { font: inherit; font-weight: 700; width: 100%; }
.kz-noclown small { display: block; color: var(--muted); font-size: .8rem; margin-top: 2px; }
.kz-azzera { font-weight: 700; }
.kz-azzera:disabled { opacity: .45; cursor: default; }
.kz-ovvie .chip.is-on { border-color: #e11d48; color: #e11d48; text-decoration: line-through; }
.kz-leghe .chip:not(.is-on) { text-decoration: line-through; opacity: .6; }
.kz-uguali .chip.is-on { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.kz-tendina.is-attiva { color: var(--text); border-color: var(--accent); }
.kz-tendina:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
/* Ovvie e Campionati: due pulsanti affiancati; il pannello di quello aperto va sotto, a tutta larghezza */
.kz-tendine { display: flex; flex-wrap: wrap; gap: 6px; }
.kz-tendina {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 4px 10px; min-height: 32px; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--muted); font: inherit; font-size: .8rem; font-weight: 600; white-space: nowrap;
}
.kz-tendina::after { content: "\25BE"; font-size: .7rem; }
.kz-tendina.is-open::after { content: "\25B4"; }
.kz-tendina b { color: var(--text); font-variant-numeric: tabular-nums; }
.kz-tendina:hover, .kz-tendina.is-open { color: var(--text); border-color: var(--muted); }
.kz-tendina:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kz-pannello .chip { white-space: nowrap; flex: none; }
/* desktop: pannello sotto i pulsanti, le chip vanno a capo */
.kz-pannello { gap: 4px; padding: 2px 0; }
.kz-cassetto__testa { display: none; }
@media (max-width: 560px) {
  /* mobile: menu laterale a scomparsa sopra il modale; si chiude toccando fuori */
  /* Ovvie nel modale Partite: tutta la riga */
  .pr-ovvie .kz-tendina { flex: 1 1 100%; }
  /* Ovvie e Campionati: meta' larghezza ciascuno, insieme tutta la riga */
  .kz-tendina { flex: 1 1 0; min-width: 0; justify-content: center; min-height: 40px; }
  .kz-cassetto { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .4); }
  .kz-cassetto__box {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(300px, 82vw);
    display: flex; flex-direction: column; background: var(--card); color: var(--text);
    border-left: 1px solid var(--line); box-shadow: -8px 0 24px rgba(0, 0, 0, .25);
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* Ovvie si apre da sinistra, Campionati da destra */
  .kz-cassetto--sx .kz-cassetto__box { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--line); box-shadow: 8px 0 24px rgba(0, 0, 0, .25); }
  .kz-cassetto--entra { animation: kz-sfuma .2s ease-out; }
  .kz-cassetto--entra.kz-cassetto--sx .kz-cassetto__box { animation-name: kz-entra-sx; }
  .kz-cassetto--entra .kz-cassetto__box { animation: kz-entra .22s ease-out; }
  .kz-cassetto__testa {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 8px 10px 14px; border-bottom: 1px solid var(--line);
  }
  .kz-cassetto__x { width: 44px; height: 44px; border: 0; background: none; color: var(--muted); font-size: 1.6rem; line-height: 1; cursor: pointer; }
  .kz-pannello { flex: 1; flex-direction: column; flex-wrap: nowrap; overflow-y: auto; overscroll-behavior: contain; padding: 10px 14px; gap: 6px; }
  .kz-pannello .chip { min-height: 40px; justify-content: flex-start; text-align: left; white-space: normal; font-size: .85rem; }
}
@keyframes kz-entra { from { transform: translateX(100%); } to { transform: none; } }
@keyframes kz-entra-sx { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes kz-sfuma { from { background: transparent; } }
@media (prefers-reduced-motion: reduce) {
  .kz-cassetto--entra, .kz-cassetto--entra .kz-cassetto__box { animation: none; }
}

/* ---------- anteprime nella pagina "come funziona" ---------- */
html.anteprima { scrollbar-width: none; }
html.anteprima::-webkit-scrollbar { display: none; }
.kz-info { margin: 0 0 0 auto; }
.kz-info[open] { flex-basis: 100%; margin-left: 0; } /* aperta: la spiegazione va a capo sotto i filtri */
.kz-quante { display: flex; align-items: center; gap: 8px; }
.kz-quante .seg__btn { white-space: nowrap; }
.kz-quante .mini__label { min-width: 58px; }
#kz-testa:empty { display: none; }
.kz-info summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  color: var(--muted); font-size: .85rem; font-weight: 600; min-height: 32px;
}
.kz-info summary::-webkit-details-marker { display: none; }
.kz-info__icona {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none;
  border: 1.5px solid currentColor; font: italic 700 .8rem/1 Georgia, serif;
}
.kz-info summary:hover, .kz-info[open] summary { color: var(--text); }
.kz-info .avviso { margin-top: 6px; font-size: .88rem; }
/* modale Giocate: tutte le giocate di una partita, dalla piu' frequente */
.modale.gc { width: min(440px, calc(100vw - 32px)); }
.gc__sotto { color: var(--muted); font-size: .85rem; margin: 0 0 12px; }
.gc__lista { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; clear: both; }
.gc__giocata {
  position: relative; overflow: hidden; width: 100%; min-height: 44px; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
}
.gc__giocata > span:not(.gc__barra) { position: relative; z-index: 1; }
.gc__barra { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent-soft); }
.gc__label { flex: 1; min-width: 0; font-weight: 600; font-size: .9rem; }
.gc__label small { font-weight: 400; color: var(--muted); font-size: .75rem; }
.gc__quota { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.gc__perc { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }
.gc__giocata:hover { border-color: var(--accent); }
.gc__giocata:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gc__giocata.is-top { border-color: #e11d48; box-shadow: 0 0 0 1px #e11d48; }
.gc__giocata.is-top .gc__label small { color: #e11d48; font-weight: 700; }
.gc__clown { font-size: 1.1rem; }
.gc__giocata.is-sel { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); opacity: 1; }
.gc__giocata.is-sel .gc__barra { background: var(--accent); opacity: .25; }
.gc__togli { width: 100%; min-height: 40px; margin-bottom: 8px; }
.gc__togli[hidden] { display: none; }
@media (max-width: 720px) { .modale.gc { width: 100vw; } }
.kz-piede { display: flex; align-items: center; gap: 12px; }
.kz-piede[hidden] { display: none; }
.kz-piede__n { flex: none; font-weight: 700; }
.kz-piede .btn--primario { flex: 1; width: auto; }
.kz-azioni { display: flex; gap: 8px; align-items: stretch; margin: 4px 0 8px; }
.kz-azioni .kz-stampa { flex: 1; margin: 0; }
.kz-azioni .btn--icona:disabled { opacity: .45; cursor: default; }
.st-altre[hidden] { display: none; }

/* invito a scaricare l'app Android (solo su Android, fuori dall'app) */
.app-banner {
  display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 10px 8px 10px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
}
.app-banner[hidden] { display: none; }
.app-banner img { border-radius: 10px; flex: none; }
.app-banner span { flex: 1; min-width: 0; font-size: .9rem; }
.app-banner small { display: block; color: var(--muted); font-size: .78rem; }
.app-banner .btn--primario { width: auto; min-height: 36px; padding: 6px 14px; text-decoration: none; display: inline-flex; align-items: center; }
.app-banner__x { width: 36px; height: 36px; border: 0; background: none; color: var(--muted); font-size: 1.4rem; cursor: pointer; flex: none; }

/* pulsante del menu della pagina in cui ci si trova */
.top__btn.is-attivo { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* pulsante solo icona (es. dischetto "salva" accanto a Stampa) */
.btn--icona { width: 44px; min-height: 44px; padding: 0; display: inline-grid; place-items: center; flex: none; color: var(--accent); }
.btn--icona:hover:not(:disabled) { background: var(--accent-soft); }

/* select Campionato / Giornata in cima al modale Partite/Classifica */
.pr-scelta { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 10px 0 4px; }
.pr-scelta { clear: both; }
.pr-scelta__campo { display: flex; flex-direction: column; gap: 4px; flex: 1 1 130px; min-width: 0; }
.pr-scelta__campo[hidden] { display: none; }
.pr-scelta select {
  font: inherit; font-size: .95rem; min-height: 40px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--text); width: 100%;
}
.pr-scelta select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pr-noquote { margin: 0 0 10px; }

/* lista partite del modale Partite/Classifica: una riga per partita */
.pr-partita:has(.pr-giocata) { cursor: pointer; }
.pr-partita:has(.esito.is-sel) { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.pr-ovvie { margin-top: 12px; }
.pr-ovvie .kz-pannello { margin-top: 6px; }
.pr-lista { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
/* righe come quelle del KFZZZDC (.kz): numero, partita, riquadro della giocata */
.pr-partita { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; }
.pr-partita .kz__partita small { display: block; margin-top: 2px; }
.pr-giocata--pochi .esito__label { color: var(--muted); }
.pr-giocata--pochi .kz__valore { color: var(--muted); }
@media (max-width: 560px) {
  .pr-partita { gap: 4px 8px; padding: 10px; }
  .pr-partita .kz__pos { width: 22px; height: 22px; font-size: .72rem; }
  .pr-partita .kz__partita h3 { font-size: .88rem; line-height: 1.25; }
  .pr-partita .kz__partita small { font-size: .72rem; line-height: 1.3; }
}

/* Confronto: pulsanti della colonna Media rettangolari e un po' piu' grandi (in fondo: vincono sulle regole precedenti) */
.cf-tabella .cf-gioca { border-radius: 6px; min-width: 64px; min-height: 34px; padding: 5px 10px; font-size: .95rem; }
.cf-tabella .cf-gioca--ct { min-height: 30px; padding: 3px 8px; font-size: .88rem; }
@media (max-width: 560px) {
  .cf-tabella col.cf-c-nome { width: 32%; }
  .cf-tabella col.cf-c-num { width: 18%; }
  .cf-tabella col.cf-c-media { width: 32%; }
  .cf-tabella .cf-gioca { min-width: 0; width: 100%; max-width: 76px; min-height: 32px; padding: 4px; font-size: .88rem; }
  .cf-ct { max-width: 76px; }
  .cf-tabella .cf-gioca--ct { min-width: 0; min-height: 28px; padding: 2px 4px; font-size: .8rem; }
}

/* KFDC: pulsanti della colonna Media rettangolari e un po' piu' grandi, come nel Confronto */
.kf-tabella .cf-gioca { border-radius: 6px; min-width: 64px; min-height: 34px; padding: 5px 10px; font-size: .95rem; }
@media (max-width: 560px) {
  .kf-tabella col.kf-c-pos { width: 8.5%; }
  .kf-tabella col.kf-c-nome { width: 31.5%; }
  .kf-tabella col.kf-c-num { width: 16.5%; }
  .kf-tabella col.kf-c-media { width: 27%; }
  .kf-tabella .cf-gioca { min-width: 0; width: 100%; max-width: 76px; min-height: 32px; padding: 4px; font-size: .88rem; }
}

/* KFDC: nelle card la % e' un rettangolo come i pulsanti della colonna Media */
.kf-card .kf-perc {
  align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; min-width: 72px; min-height: 38px;
  padding: 3px 12px; margin-bottom: 4px; border: 1.5px solid var(--accent); border-radius: 6px; background: var(--card); color: var(--accent);
}
.kf-card.is-sel .kf-perc { background: rgba(255, 255, 255, .18); border-color: #fff; color: #fff; }
@media (max-width: 560px) {
  .kf-card .kf-perc { align-self: stretch; min-width: 0; min-height: 32px; padding: 2px 4px; font-size: 1.05rem; margin-right: 18px; }
}

/* % che mettono la giocata nella schedina: un "+" davanti fa capire che si possono toccare (diventa ✓ quando e' in schedina) */
.cf-gioca:not(.is-sel)::before, .kf-card.kf-cliccabile:not(.is-sel) .kf-perc::before, .gc__giocata:not(.is-sel) .gc__perc::before {
  content: '+'; margin-right: 3px; font-weight: 800; opacity: .75;
}
.kf-card.kf-cliccabile.is-sel .kf-perc::before, .gc__giocata.is-sel .gc__perc::before { content: '\2713'; margin-right: 3px; }
.cf-gioca:not(.alto):not(.medio):not(.is-sel) { border-color: var(--accent); border-style: dashed; }
/* modale Giocate: la % e' un pulsantino come nel Confronto */
.gc__perc {
  display: inline-flex; align-items: center; justify-content: center; min-width: 58px; min-height: 30px; padding: 2px 8px;
  border: 1.5px solid var(--accent); border-radius: 6px; background: var(--card); color: var(--accent); text-align: center;
}
.gc__giocata.is-sel .gc__perc { background: var(--accent); color: #fff; }

/* ---------- Dragon Clown: versione "infuocata" del modale KFZZZDC (quota x %) ---------- */
.kz-dragon-btn {
  margin: 8px 0 2px; padding: 6px 14px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 800; letter-spacing: .03em; color: #fff;
  background: linear-gradient(135deg, #7f1d1d, #dc2626 45%, #f97316 80%, #facc15);
  box-shadow: 0 2px 12px rgba(220, 38, 38, .45);
  transition: transform .15s ease, box-shadow .15s ease;
}
.kz-dragon-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 18px rgba(249, 115, 22, .6); }
.kz-dragon-btn:focus-visible { outline: 2px solid #f97316; outline-offset: 2px; }
#modale-kz.is-dragon {
  --card: #1a0a06; --text: #fff4e6; --muted: #fdba74; --line: #5c1d0e;
  --accent: #fb923c; --accent-soft: #3d1408;
  border-color: #dc2626; color: var(--text);
  background:
    radial-gradient(120% 60% at 50% 100%, rgba(234, 88, 12, .35), transparent 70%),
    radial-gradient(80% 40% at 50% 0%, rgba(220, 38, 38, .25), transparent 70%),
    #1a0a06;
  box-shadow: 0 0 0 1px #f97316, 0 0 28px rgba(249, 115, 22, .55), 0 0 60px rgba(220, 38, 38, .35);
  animation: kz-brace 2.4s ease-in-out infinite alternate;
}
#modale-kz.is-dragon .dettaglio__x { color: var(--text); }
/* il bagliore del titolo (filter) lo porta sopra la X, che sta in un float: la X torna in primo piano */
#modale-kz.is-dragon form { position: relative; z-index: 2; }
#modale-kz.is-dragon #titolo-kz {
  text-transform: uppercase; letter-spacing: .05em;
  background: linear-gradient(0deg, #dc2626, #f97316 40%, #facc15 80%, #fff7cc);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 6px rgba(249, 115, 22, .7));
}
#modale-kz.is-dragon #titolo-kz span { color: initial; -webkit-text-fill-color: initial; }
#modale-kz.is-dragon .kz-dragon-btn { background: #3d1408; color: #fdba74; box-shadow: inset 0 0 0 1px #9a3412; }
#modale-kz.is-dragon .match { background: rgba(0, 0, 0, .28); border-color: #5c1d0e; }
#modale-kz.is-dragon .kz__pos { background: #3d1408; color: #fdba74; }
#modale-kz.is-dragon .kz:nth-child(-n+3) .kz__pos { background: linear-gradient(135deg, #facc15, #f97316, #dc2626); color: #1a0a06; box-shadow: 0 0 10px rgba(249, 115, 22, .7); }
#modale-kz.is-dragon .esito.is-sel { background: linear-gradient(135deg, #dc2626, #f97316); border-color: #f97316; }
#modale-kz.is-dragon .seg__btn, #modale-kz.is-dragon .kz-tendina, #modale-kz.is-dragon .chip,
#modale-kz.is-dragon .btn:not(.btn--primario) { background: #2a0f07; color: var(--text); border-color: #5c1d0e; }
/* pulsanti selezionati (Quando, Partite, Campionati, Fissa...): infiammati */
#modale-kz.is-dragon .seg__btn.is-on, #modale-kz.is-dragon .chip.is-on,
#modale-kz.is-dragon .kz-tendina.is-open, #modale-kz.is-dragon .kz-tendina.is-attiva {
  color: #fff; font-weight: 800; border-color: #facc15; text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  background: linear-gradient(0deg, #b91c1c 0%, #ea580c 45%, #f97316 70%, #facc15 100%);
  background-size: 100% 200%;
  box-shadow: 0 0 10px rgba(249, 115, 22, .8), 0 -2px 12px rgba(250, 204, 21, .45), inset 0 -2px 6px rgba(127, 29, 29, .6);
  animation: kz-fiamma 1.1s ease-in-out infinite alternate;
}
@keyframes kz-fiamma {
  from { background-position: 0 100%; box-shadow: 0 0 8px rgba(249, 115, 22, .7), 0 -2px 10px rgba(250, 204, 21, .35), inset 0 -2px 6px rgba(127, 29, 29, .6); }
  to { background-position: 0 60%; box-shadow: 0 0 14px rgba(249, 115, 22, .95), 0 -4px 16px rgba(250, 204, 21, .6), inset 0 -2px 6px rgba(127, 29, 29, .6); }
}
@media (prefers-reduced-motion: reduce) {
  #modale-kz.is-dragon .seg__btn.is-on, #modale-kz.is-dragon .chip.is-on,
  #modale-kz.is-dragon .kz-tendina.is-open, #modale-kz.is-dragon .kz-tendina.is-attiva { animation: none; }
}
#modale-kz.is-dragon .btn--primario { background: linear-gradient(135deg, #dc2626, #f97316); border-color: #f97316; color: #fff; }
.kz__valore--dragon { color: #facc15; text-shadow: 0 0 8px rgba(249, 115, 22, .8); }
.kz__val { color: #ea580c; font-weight: 800; }
.esito.is-sel .kz__val { color: #fff; }
.kz__freq { font-size: .72rem; font-weight: 700; color: var(--muted); }
.esito.is-sel .kz__freq { color: #fff; }
.kz-dragon-info {
  margin: 0; padding: 8px 10px; border: 1px solid #9a3412; border-radius: 8px;
  background: rgba(234, 88, 12, .12); font-size: .88rem;
}
@keyframes kz-brace {
  from { box-shadow: 0 0 0 1px #f97316, 0 0 22px rgba(249, 115, 22, .45), 0 0 50px rgba(220, 38, 38, .3); }
  to { box-shadow: 0 0 0 1px #facc15, 0 0 34px rgba(249, 115, 22, .7), 0 0 80px rgba(220, 38, 38, .45); }
}
@media (prefers-reduced-motion: reduce) { #modale-kz.is-dragon { animation: none; } }

/* ---------- musica di sottofondo (assets/musica.js): pulsante quadrato nell'header accanto al nome ---------- */
.musica-btn {
  flex: none; width: 36px; height: 36px; padding: 0; border-radius: 8px; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 1.1rem; line-height: 1;
  cursor: pointer; transition: border-color .15s;
}
.musica-btn:hover { border-color: var(--accent); }
.musica-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.musica-btn.is-on { border-color: var(--accent); animation: musica-respiro 4s ease-in-out infinite; }
@keyframes musica-respiro { 50% { box-shadow: 0 0 0 4px var(--accent-soft); } }
@media (prefers-reduced-motion: reduce) { .musica-btn.is-on { animation: none; } }
@media print { .musica-btn { display: none; } }
/* risultati live nelle schedine stampate (pulsante Controlla) */
.st__live-azioni { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin: 12px 12px 0; }
.st__live-nota { color: var(--muted); font-size: .78rem; text-align: center; }
.st__live-nota:empty { display: none; }
/* pulsante "Vedi live": invito all'azione, col clown come il KFZZZDC */
.st__controlla {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px;
  padding: 10px 16px; border: 0; border-radius: 12px; cursor: pointer; font: inherit; font-size: 1.05rem; font-weight: 800;
  letter-spacing: .02em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, #e11d48, #ea580c);
  box-shadow: 0 4px 14px rgba(225, 29, 72, .35); transition: transform .1s, box-shadow .15s, filter .15s;
}
.st__controlla:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 6px 18px rgba(225, 29, 72, .45); }
.st__controlla:active:not(:disabled) { transform: scale(.98); }
.st__controlla:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
.st__controlla:disabled { cursor: default; filter: saturate(.55) brightness(.95); box-shadow: none; }
.st__controlla-clown { font-size: 1.6rem; line-height: 1; display: inline-block; animation: st-clown 2.4s ease-in-out infinite; }
.st__controlla.is-carica .st__controlla-clown { animation: st-gira .8s linear infinite; }
.st__controlla:disabled:not(.is-carica) .st__controlla-clown { animation: none; }
.st__controlla-punto { width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: st-punto 1.2s ease-in-out infinite; }
.st__controlla:disabled .st__controlla-punto { animation: none; opacity: .6; }
@keyframes st-clown { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(-14deg); } 90% { transform: rotate(14deg); } }
@keyframes st-gira { to { transform: rotate(360deg); } }
@keyframes st-punto { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .st__controlla-clown, .st__controlla-punto { animation: none !important; } }
.st__live { display: block; margin-top: 2px; font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
.st__live--in { color: var(--arancione); }
.st__esito { display: inline-block; white-space: nowrap; margin-right: 4px; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 800; vertical-align: 1px; color: #fff; background: var(--muted); }
.st__esito--ok { background: var(--accent); }
.st__esito--ko { background: var(--neg); }
.st__righe li.st-ok { background: var(--accent-soft); box-shadow: inset 4px 0 0 var(--accent); margin: 0 -12px; padding-left: 16px; padding-right: 12px; }
.st__righe li.st-ok .st__live { color: var(--accent); }
.st__righe li.st-ko { background: rgba(180, 35, 24, .08); box-shadow: inset 4px 0 0 var(--neg); margin: 0 -12px; padding-left: 16px; padding-right: 12px; }
/* piede: pulsante Condividi app e riga legale; spazio sotto per il pulsante della musica (fisso in basso a sinistra) */
.piede { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.piede__fondo { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); text-align: center; }
.piede__legale { margin: 6px 0 0; font-size: .8rem; }
.piede__link { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; font-size: .85rem; }
.piede__link a { display: inline-block; padding: 6px 2px; font-weight: 600; }
.piede__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px; border-radius: 999px; font-weight: 700; color: var(--accent); }
.piede__btn:hover { background: var(--accent-soft); }
/* pagine legali (privacy.php, cookie.php) */
.legale { max-width: 760px; line-height: 1.6; }
.legale h1 { margin: 0 0 6px; font-size: 1.7rem; }
.legale h2 { margin: 28px 0 8px; font-size: 1.15rem; scroll-margin-top: 16px; }
.legale h3 { margin: 18px 0 6px; font-size: 1rem; }
.legale p, .legale li { font-size: .95rem; }
.legale ul { padding-left: 20px; }
.legale code { font-size: .85em; padding: 1px 5px; border-radius: 4px; background: var(--accent-soft); overflow-wrap: anywhere; }
.legale__sotto { color: var(--muted); font-size: .85rem !important; }
.legale__box { margin: 16px 0; padding: 12px 16px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px; background: var(--card); }
.legale__box ul { margin: 6px 0 0; }
.legale__box p { margin: 6px 0 0; }
.legale__tabella { overflow-x: auto; margin: 12px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.legale table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .85rem; }
.legale th, .legale td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.legale th { background: var(--bg); font-weight: 700; }
.legale tr:last-child td { border-bottom: 0; }
.legale__torna { text-decoration: none; white-space: nowrap; }
/* su telefono la tabella dei cookie diventa una scheda per riga */
@media (max-width: 600px) {
  .legale__tabella { overflow: visible; border: 0; background: none; }
  .legale table, .legale tbody, .legale tr, .legale td { display: block; min-width: 0; }
  .legale thead { display: none; }
  .legale tr { margin-bottom: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
  .legale td { display: grid; grid-template-columns: 92px 1fr; gap: 8px; }
  .legale td > code { justify-self: start; }
  .legale td::before { content: attr(data-l); color: var(--muted); font-weight: 700; font-size: .78rem; }
  .legale tr:last-child td { border-bottom: 1px solid var(--line); }
  .legale td:last-child { border-bottom: 0 !important; }
}
/* schedine fissate in cima (pulsante o pressione lunga, solo su questo dispositivo) */
.st .st__pin {
  grid-row: 1; grid-column: 3; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--card); cursor: pointer; font-size: 1.05rem; line-height: 1;
  filter: grayscale(1); opacity: .45;
}
.st .st__pin:hover { opacity: .8; }
.st .st__pin:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.st.is-fissata .st__pin { filter: none; opacity: 1; border-color: #e11d48; background: rgba(225, 29, 72, .1); }
.st.is-fissata details { border-color: #e11d48; box-shadow: inset 4px 0 0 #e11d48; }
.st.is-premuta details { transform: scale(.98); transition: transform .45s; }
.st-sep { list-style: none; color: var(--muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 6px 0 -2px; }
/* schedine stampate su telefono: pulsanti in alto a destra, data sotto, righe impilate */
@media (max-width: 600px) {
  .st summary { grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 6px 6px; padding: 10px; }
  .st__tipo { grid-row: 1; grid-column: 1; justify-self: start; }
  .st .st__pin { grid-column: 2; }
  .st .st__stampa { grid-column: 3; }
  .st .st__condividi { grid-column: 4; }
  .st .st__pin, .st .st__stampa, .st .st__condividi { width: 38px; height: 38px; }
  .st__quando { grid-row: 2; grid-column: 1 / -1; font-size: .92rem; }
  .st__riepilogo { grid-row: 3; }
  .st__righe { padding: 0 10px; }
  .st__righe li { flex-direction: column; align-items: stretch; gap: 4px; }
  .st__giocata { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 10px; max-width: none; text-align: left; font-size: .82rem; }
  .st__giocata b { flex: none; }
  .st__righe li.st-ok, .st__righe li.st-ko { margin: 0 -10px; padding-left: 14px; padding-right: 10px; }
  .st__live-azioni { margin: 10px 10px 0; }
  .st__codice { margin-left: 10px; margin-right: 10px; }
  .st__controlla { font-size: .95rem; }
}

/* pagina principale: prossime partite divise per campionato e per data */
.home-lega { margin-top: 18px; }
.home-lega:first-child { margin-top: 4px; }
.home-lega__titolo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  margin: 0; padding-bottom: 6px; border-bottom: 2px solid var(--accent); font-size: 1.05rem;
}
.home-lega__titolo small { color: var(--muted); font-size: .8rem; font-weight: 400; }
.home-data { margin: 12px 0 0; font-size: .82rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.home-lega .pr-lista { margin-top: 6px; }
.home-classifica { font-size: .8rem; font-weight: 400; }
#vista-partite[hidden], #vista-statistiche[hidden] { display: none; }

/* pagina principale compatta: righe fitte senza riquadro, ora a sinistra, giocata su una riga */
:is(#home-partite, #prossime) .home-lega { margin-top: 10px; }
#home-partite .home-lega:first-child { margin-top: 0; }
:is(#home-partite, #prossime) .home-lega__titolo { cursor: pointer; list-style: none; padding: 6px 0 4px; font-weight: 700; }
:is(#home-partite, #prossime) .home-lega__titolo::-webkit-details-marker { display: none; }
:is(#home-partite, #prossime) .home-lega__titolo > span::before { content: '\25BE'; display: inline-block; width: 1em; color: var(--accent); transition: transform .15s; }
:is(#home-partite, #prossime) .home-lega:not([open]) .home-lega__titolo > span::before { transform: rotate(-90deg); }
:is(#home-partite, #prossime) .home-lega__n { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .72rem; font-weight: 700; text-align: center; }
:is(#home-partite, #prossime) .home-data { margin: 6px 0 0; font-size: .72rem; }
:is(#home-partite, #prossime) .pr-lista { margin: 2px 0 0; gap: 0; }
:is(#home-partite, #prossime) .pr-partita {
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 5px 2px; gap: 8px;
  grid-template-columns: 3.1em minmax(0, 1fr) auto;
}
:is(#home-partite, #prossime) .pr-lista .pr-partita:last-child { border-bottom: 0; }
:is(#home-partite, #prossime) .pr-partita:has(.esito.is-sel) { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
:is(#home-partite, #prossime) .kz__pos { width: auto; height: auto; background: none; border-radius: 0; font-size: .78rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
:is(#home-partite, #prossime) .kz__partita h3 { font-size: .9rem; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(#home-partite, #prossime) .kz__giocata {
  flex-direction: row; gap: 6px; min-width: 0; width: auto; min-height: 0; padding: 3px 8px; border-radius: 6px; box-shadow: none;
}
:is(#home-partite, #prossime) .kz__giocata .kz__tipo { font-size: .76rem; white-space: nowrap; }
:is(#home-partite, #prossime) .kz__quota { font-size: .68rem; white-space: nowrap; }
:is(#home-partite, #prossime) .kz__valore { font-size: .92rem; min-width: 2.4em; text-align: right; }
:is(#home-partite, #prossime) .kz__cambia { display: none; }
@media (max-width: 560px) {
  :is(#home-partite, #prossime) .pr-partita { padding: 5px 0; gap: 6px; grid-template-columns: 2.8em minmax(0, 1fr) auto; }
  :is(#home-partite, #prossime) .kz__partita h3 { font-size: .84rem; }
  :is(#home-partite, #prossime) .kz__giocata { padding: 3px 6px; gap: 4px; }
  :is(#home-partite, #prossime) .kz__quota { display: none; }
}

/* ordine Per campionato / Per data */
#home-ordine .seg__btn { white-space: nowrap; }
:is(#home-partite, #prossime) .home-perdata .home-data:first-child { margin-top: 0; }
:is(#home-partite, #prossime) .home-perdata .kz__partita small { display: block; margin-top: 0; font-size: .68rem; line-height: 1.15; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* nomi delle due squadre su una riga, interi: se non entrano il carattere si rimpicciolisce (adattaNomiHome in app.js) */
:is(#home-partite, #prossime) .kz__partita h3 { white-space: nowrap; overflow: hidden; text-overflow: clip; line-height: 1.25; }
:is(#home-partite, #prossime) .kz__partita h3 .squadra { font-weight: 600; }
:is(#home-partite, #prossime) .pr-partita { padding-top: 6px; padding-bottom: 6px; }
@media (max-width: 560px) {
  /* telefono: giocata in una colonna stretta (tipo sopra, % sotto) per lasciare spazio ai nomi */
  :is(#home-partite, #prossime) .pr-partita { grid-template-columns: 2.5em minmax(0, 1fr) auto; gap: 6px; }
  :is(#home-partite, #prossime) .kz__pos { font-size: .72rem; }
  :is(#home-partite, #prossime) .kz__partita h3 { font-size: .86rem; }
  :is(#home-partite, #prossime) .kz__giocata { flex-direction: column; gap: 0; padding: 2px 5px; min-width: 50px; }
  :is(#home-partite, #prossime) .kz__giocata .kz__tipo { font-size: .66rem; }
  :is(#home-partite, #prossime) .kz__valore { font-size: .85rem; min-width: 0; text-align: center; line-height: 1.1; }
}

/* orari piu' piccoli e colonna piu' stretta */
:is(#home-partite, #prossime) .pr-partita { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 6px; }
:is(#home-partite, #prossime) .kz__pos { font-size: .64rem; font-weight: 500; letter-spacing: -.02em; justify-self: start; }
@media (max-width: 560px) {
  :is(#home-partite, #prossime) .pr-partita { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 5px; }
  :is(#home-partite, #prossime) .kz__pos { font-size: .62rem; }
}

/* intestazioni dei gruppi (campionato e giorno) con uno sfondo leggermente trasparente del colore del sito */
:is(#home-partite, #prossime) .home-lega__titolo {
  padding: 6px 8px 5px; border-radius: 6px 6px 0 0;
  background: rgba(11, 110, 79, .12); background: color-mix(in srgb, var(--accent) 14%, transparent);
}
:is(#home-partite, #prossime) .home-data {
  margin: 6px 0 0; padding: 3px 8px; border-radius: 4px;
  background: rgba(11, 110, 79, .06); background: color-mix(in srgb, var(--accent) 7%, transparent);
}
:is(#home-partite, #prossime) .home-lega__titolo + .home-data { margin-top: 2px; }

/* titolo del campionato piu' piccolo; giornata come "6°" e classifica come icona podio */
:is(#home-partite, #prossime) .home-lega__titolo { font-size: .88rem; align-items: center; }
:is(#home-partite, #prossime) .home-lega__titolo > small { display: inline-flex; align-items: center; gap: 6px; }
:is(#home-partite, #prossime) .home-lega__g { font-weight: 700; color: var(--muted); font-size: .8rem; }
:is(#home-partite, #prossime) .home-classifica {
  display: inline-grid; place-items: center; width: 30px; height: 30px; margin: -4px -4px -4px 0; padding: 0;
  border: 0; border-radius: 6px; background: none; color: var(--accent); cursor: pointer;
}
:is(#home-partite, #prossime) .home-classifica:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); }
:is(#home-partite, #prossime) .home-classifica:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 560px) { :is(#home-partite, #prossime) .home-lega__titolo { font-size: .84rem; } }

/* icona podio al posto della parola "Classifica" */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico-cl { display: inline-block; vertical-align: -3px; flex: none; color: var(--accent); }
.dt-tab .ico-cl { vertical-align: -4px; }
.dt-tab.is-on .ico-cl { color: inherit; }
#titolo-prossime .ico-cl { vertical-align: -3px; }
.top__btn-testo .ico-cl { width: 16px; height: 16px; color: currentColor; }

/* modale Partite e classifica: filtri compattissimi su una riga */
.pr-barra { clear: both; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 8px 0 6px; }
.pr-barra select {
  font: inherit; font-size: .8rem; min-height: 30px; padding: 2px 4px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--card); color: var(--text); min-width: 0;
}
.pr-barra select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pr-barra select[hidden] { display: none; }
#pr-lega { flex: 1 1 110px; max-width: 200px; }
#pr-giornata { flex: 0 1 auto; }
.pr-tabs { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; gap: 2px; flex: none; }
.pr-tabs .dt-tab { min-height: 24px; padding: 2px 10px; margin: 0; border: 0; border-radius: 999px; font-size: .78rem; line-height: 1; display: inline-flex; align-items: center; }
.pr-tabs .dt-tab.is-on { background: var(--accent); color: #fff; }
.pr-tabs .dt-tab.is-on .ico-cl { color: #fff; }
.pr-tabs .ico-cl { width: 16px; height: 16px; vertical-align: 0; }
.pr-barra .pr-ovvie { display: contents; margin: 0; }
.pr-barra .pr-ovvie[hidden] { display: none; }
.pr-barra .kz-tendine { flex: none; }
.pr-barra .kz-tendina { min-height: 30px; padding: 2px 8px; font-size: .76rem; flex: none; }
.pr-barra .kz-cassetto { flex: 1 1 100%; }
#prossime .home-data:first-child { margin-top: 0; }
@media (max-width: 560px) {
  .pr-barra select { font-size: 16px; min-height: 32px; } /* 16px: iOS non zooma */
  #pr-lega { flex: 1 1 100px; }
  .pr-barra .pr-ovvie .kz-tendina, .pr-barra .kz-tendina { flex: none; min-height: 30px; }
  .pr-tabs .dt-tab { flex: none; }
}

/* icone pallone (Partite), casetta (Casa), aereo (Trasferta) */
.ico { display: inline-block; vertical-align: -3px; flex: none; }
.seg__btn .ico, .dt-tab .ico { vertical-align: -3px; }
.pr-tabs .ico { width: 16px; height: 16px; vertical-align: 0; }
#titolo-prossime .ico { vertical-align: -3px; color: var(--accent); }
.top__btn-testo .ico-pall { width: 16px; height: 16px; }
.luogo .ico { width: 12px; height: 12px; vertical-align: -1px; }
.nota .ico { width: 13px; height: 13px; vertical-align: -2px; }

/* pagliaccio delle Ovvie accanto ai filtri, senza testo: solo emoji e numero */
.pr-barra .kz-tendina { gap: 3px; padding: 2px 7px; }
.pr-barra .kz-tendina::after { display: none; }
@media (max-width: 560px) {
  .pr-barra { flex-wrap: nowrap; }
  #pr-lega { flex: 1 1 0; width: 0; max-width: none; }
  #pr-giornata { flex: 0 0 auto; }
  .pr-barra .kz-tendina { padding: 2px 6px; }
}

/* filtri della classifica tutti su una riga, compatti (anche su telefono) */
.dt-controlli--cl { flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 6px; margin: 8px 0; }
.dt-controlli--cl .seg { display: inline-flex; flex: none; border-radius: 999px; }
.dt-controlli--cl .seg__btn { min-height: 28px; padding: 2px 10px; font-size: .78rem; display: inline-flex; align-items: center; }
.dt-controlli--cl .seg__btn .ico { width: 15px; height: 15px; }
@media (max-width: 720px) {
  .dt-controlli--cl { flex-direction: row; align-items: center; }
  .dt-controlli--cl .seg { display: inline-flex; }
  .dt-controlli--cl .seg__btn { min-height: 30px; padding: 2px 8px; }
}

/* classifica compatta: righe basse, colonne strette, forma a quadratini piccoli */
.cl-tabella { font-size: .8rem; }
.cl-tabella th, .cl-tabella td { padding: 3px 4px; line-height: 1.25; }
.cl-tabella thead th { min-width: 0; font-size: .7rem; white-space: nowrap; vertical-align: bottom; }
.cl-tabella .cl-pos { width: auto; padding-right: 2px; }
.cl-tabella .squadra { font-size: .8rem; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
.cl-tabella .cl-forma { white-space: nowrap; }
.cl-tabella .cl-forma .ris { min-width: 0; width: 1.25em; padding: 0; margin-right: 1px; font-size: .62rem; line-height: 1.5; border-radius: 3px; }
.cl-tabella .cl-prossima { font-size: .74rem; color: var(--muted); max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.cl-tabella .cl-prossima .luogo { width: 16px; height: 16px; margin-right: 3px; }
.cl-tabella .cl-prossima .luogo .ico { width: 10px; height: 10px; }
.cl-nota { font-size: .72rem; margin-top: 4px; }
@media (max-width: 720px) {
  .cl-tabella th, .cl-tabella td { padding: 3px 3px; }
  .cl-tabella thead th { min-width: 0; }
  .cl-tabella .squadra { max-width: 96px; }
  .cl-tabella .cl-prossima { max-width: 84px; }
}

/* modale Partite: scelta del campionato accanto al titolo (la X resta in alto a destra) */
.pr-testa { display: flex; align-items: center; gap: 8px; padding-right: 44px; min-width: 0; }
.pr-testa h2 { margin: 0; padding-right: 0; flex: none; white-space: nowrap; }
.pr-testa #pr-lega {
  flex: 1 1 auto; width: auto; min-width: 0; max-width: 220px;
  font: inherit; font-size: .85rem; font-weight: 600; min-height: 32px; padding: 2px 6px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--text);
}
.pr-testa #pr-lega:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 560px) {
  .pr-testa #pr-lega { font-size: 16px; max-width: none; }
  .pr-barra #pr-giornata { flex: 1 1 auto; }
}

/* modale Partite, linguetta classifica: Totale/casa/trasferta e Finale/1°T nella barra, sulla stessa riga delle linguette */
.pr-cl-filtri { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; margin: 0; min-width: 0; }
.pr-cl-filtri[hidden] { display: none; }
.pr-cl-filtri .seg__btn { min-height: 26px; padding: 2px 7px; }
@media (max-width: 560px) {
  .pr-cl-filtri .seg__btn { min-height: 28px; padding: 2px 6px; font-size: .74rem; }
}

/* ---------- modale Filtri compatto ---------- */
#modale-filtri { width: min(600px, calc(100vw - 32px)); }
#modale-filtri .dettaglio__dentro { padding-top: 14px; }
#modale-filtri h2 { font-size: 1.15rem; line-height: 1.6; }
#modale-filtri .dettaglio__x { font-size: 1.4rem; }
#modale-filtri .filtri__corpo { gap: 10px; margin-top: 8px; }
#modale-filtri .mini-filtri { gap: 6px 14px; }
#modale-filtri .mini { gap: 6px; }
#modale-filtri .campo { gap: 2px; }
#modale-filtri .campo legend, #modale-filtri .campo__label {
  margin-bottom: 3px; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
#modale-filtri .campo__label small { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .72rem; }
#modale-filtri .chips { gap: 4px; }
#modale-filtri .chip { min-height: 0; padding: 3px 9px; font-size: .78rem; }
#modale-filtri .chips--leghe .chip { padding: 2px 8px; font-size: .74rem; }
#modale-filtri .chips--piccoli .chip { padding: 2px 8px; font-size: .72rem; }
#modale-filtri .condizioni { gap: 6px; }
#modale-filtri .condizioni__azioni { gap: 6px 12px; margin-bottom: 6px; }
#modale-filtri .condizioni .nota { margin: 0; font-size: .78rem; }
#modale-filtri select, #modale-filtri input[type="number"] { padding: 3px 6px; font-size: .85rem; }
#modale-filtri .colonne { padding-top: 8px; }
#modale-filtri .colonne .chips { margin-top: 6px; }
#modale-filtri .modale__piede { margin-top: 10px; padding-top: 10px; }
#modale-filtri .btn--primario { min-height: 40px; }
@media (max-width: 720px) {
  #modale-filtri { width: 100vw; }
  #modale-filtri .dettaglio__x { width: 40px; height: 40px; }
  #modale-filtri .chip { min-height: 32px; padding: 4px 10px; }
  #modale-filtri .chips--leghe .chip, #modale-filtri .chips--piccoli .chip { min-height: 30px; padding: 3px 8px; }
  #modale-filtri .seg--mini .seg__btn { padding: 5px 9px; }
  /* 16px evita lo zoom automatico di iOS sui campi */
  #modale-filtri select, #modale-filtri input[type="number"] { font-size: 16px; min-height: 36px; }
  #modale-filtri .c-x { height: 36px; }
  #modale-filtri .condizioni__azioni .btn { min-height: 34px; }
}

/* KFZZZDC: avviso "poche partite" in evidenza, col clown davanti */
.kz-poche {
  display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; padding: 10px 12px;
  border: 2px solid #f97316; border-radius: 10px; background: rgba(249, 115, 22, .12);
  color: var(--text); font-size: .9rem; line-height: 1.35;
}
.kz-poche b { color: #e11d48; }
.kz-poche__clown { flex: none; font-size: 1.8rem; line-height: 1; animation: kz-poche-clown 2.4s ease-in-out infinite; }
@keyframes kz-poche-clown { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .kz-poche__clown { animation: none; } }
#modale-kz.is-dragon .kz-poche { border-color: #dc2626; background: rgba(220, 38, 38, .15); }
#modale-kz.is-dragon .kz-poche b { color: #fb923c; }

/* scheda informativa della partita nel modale Giocate (formazioni, arbitro, meteo) */
.gc__info { margin: 0 0 12px; border: 1px solid var(--line, rgba(127, 127, 127, .3)); border-radius: 10px; padding: 8px 12px; font-size: .85rem; }
.gc__info summary { cursor: pointer; font-weight: 600; }
.gc__info h4 { margin: 10px 0 2px; font-size: .9rem; }
.gc__info h4 small { color: var(--muted); font-weight: 400; }
.gc-info__riga { margin: 4px 0; }
.gc-info__assente { color: #c0392b; }
.kz-quante { flex-wrap: wrap; }
.kz-solo { display: inline-flex; align-items: center; gap: 4px; font-size: .85rem; font-weight: 700; cursor: pointer; white-space: nowrap; }