:root {
  --sfondo: #f6f7f9;
  --carta: #ffffff;
  --testo: #1c2330;
  --tenue: #667085;
  --bordo: #e4e7ec;
  --accento: #0b7a4b;
  --accento-tenue: #e3f4ec;
  --vittoria: #1a9c5b;
  --pareggio: #9aa3b2;
  --sconfitta: #d9473f;
  --top: #dcf3e6;
  --giu: #fbe3e1;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sfondo: #11151c;
    --carta: #1a2029;
    --testo: #e6e9ef;
    --tenue: #98a2b3;
    --bordo: #2a323e;
    --accento: #3ccf8e;
    --accento-tenue: #173628;
    --top: #183a29;
    --giu: #432222;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accento); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.6rem; margin: 0; }
h2 { font-size: 1.15rem; margin: 1.6rem 0 .6rem; }
.contenitore { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.sotto { color: var(--tenue); margin: 0; font-size: .9em; }
.nota { color: var(--tenue); font-size: .9em; }

.testata { background: var(--carta); border-bottom: 1px solid var(--bordo); }
.testata .contenitore { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; padding-top: .7rem; padding-bottom: .7rem; }
.marchio { font-weight: 700; color: var(--testo); }
.comps { display: flex; flex-wrap: wrap; gap: .3rem; }
.comps a, .schede a {
  padding: .3rem .7rem; border-radius: 999px; color: var(--tenue); white-space: nowrap;
}
.comps a.attivo, .schede a.attivo { background: var(--accento-tenue); color: var(--accento); font-weight: 600; }

.intestazione { display: flex; gap: 1rem; align-items: center; margin-top: 1.4rem; }
.emblema { object-fit: contain; }
.schede { display: flex; gap: .3rem; overflow-x: auto; margin-top: 1rem; padding-bottom: .4rem; border-bottom: 1px solid var(--bordo); }

main { padding-bottom: 2rem; }
.piede { color: var(--tenue); font-size: .85em; padding-top: 1rem; padding-bottom: 2rem; border-top: 1px solid var(--bordo); }

.scorri { overflow-x: auto; background: var(--carta); border: 1px solid var(--bordo); border-radius: 10px; }
.tab { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tab th, .tab td { padding: .45rem .55rem; text-align: center; border-bottom: 1px solid var(--bordo); white-space: nowrap; }
.tab tr:last-child td { border-bottom: 0; }
.tab th { font-size: .8em; color: var(--tenue); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.tab .sx { text-align: left; }
.tab .num { color: var(--tenue); width: 2rem; }
.tab tbody tr:hover { background: var(--accento-tenue); }

.sq { display: inline-flex; align-items: center; gap: .45rem; }
.sq img { object-fit: contain; flex: none; }
.nome-corto { display: none; }

.forma { display: inline-flex; gap: 3px; }
.forma i {
  font-style: normal; font-size: .72em; font-weight: 700; color: #fff;
  width: 1.45em; height: 1.45em; line-height: 1.45em; border-radius: 4px; text-align: center;
}
.fV { background: var(--vittoria); }
.fN { background: var(--pareggio); }
.fP { background: var(--sconfitta); }

.partite { list-style: none; margin: 0; padding: 0; background: var(--carta); border: 1px solid var(--bordo); border-radius: 10px; }
.partite li {
  display: grid; grid-template-columns: 6.5rem 1fr auto 1fr; gap: .5rem; align-items: center;
  padding: .5rem .7rem; border-bottom: 1px solid var(--bordo);
}
.partite li:last-child { border-bottom: 0; }
.partite .quando { color: var(--tenue); font-size: .85em; }
.partite .casa { justify-self: end; text-align: right; }
.partite .casa .sq { flex-direction: row-reverse; }
.partite .ris { font-weight: 700; min-width: 3.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.partite .ris.vuoto { color: var(--tenue); font-weight: 400; }
.partite .pt { grid-column: 3; color: var(--tenue); font-size: .75em; text-align: center; margin-top: -.4rem; }

.riquadri { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }
.riquadri div { background: var(--carta); border: 1px solid var(--bordo); border-radius: 10px; padding: .7rem .9rem; }
.riquadri b { display: block; font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.riquadri span { color: var(--tenue); font-size: .85em; }

.due { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
.due > section { min-width: 0; }

.griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .8rem; margin-top: 1.2rem; }
.scheda { display: block; background: var(--carta); border: 1px solid var(--bordo); border-radius: 12px; padding: 1rem; color: var(--testo); }
a.scheda:hover { text-decoration: none; border-color: var(--accento); }
.scheda-testa { display: flex; gap: .8rem; align-items: center; cursor: pointer; }
.scheda-testa h2 { margin: 0; }
.scheda-testa img { object-fit: contain; }
details.scheda[open] .scheda-testa { margin-bottom: .6rem; }
.podio { margin: .8rem 0; padding-left: 1.3rem; }
.podio li { margin: .2rem 0; }
.podio b { float: right; }
.rosa td { padding: .3rem .4rem; }

.barra-col { width: 40%; }
.barra { display: block; height: .55rem; border-radius: 4px; background: var(--accento); min-width: 2px; }
.su { color: var(--vittoria); font-weight: 700; }

.salti { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: 1rem; }
.salti a { padding: .15rem .5rem; border: 1px solid var(--bordo); border-radius: 6px; background: var(--carta); font-size: .85em; }

.andamento td { padding: .35rem .4rem; font-size: .85em; }
.andamento .fissa { position: sticky; left: 0; background: var(--carta); z-index: 1; }
.ptop { background: var(--top); }
.pgiu { background: var(--giu); }

@media (max-width: 720px) {
  .due { grid-template-columns: 1fr; }
  .opz { display: none; }
  .nome-lungo { display: none; }
  .nome-corto { display: inline; }
  .partite li { grid-template-columns: 1fr auto 1fr; }
  .partite .quando { grid-column: 1 / -1; }
  .partite .pt { grid-column: 2; }
  h1 { font-size: 1.3rem; }
}

/* --- Home --- */
.benvenuto { padding: 2rem 0 .5rem; }
.benvenuto h1 { font-size: 2rem; }
.intro { font-size: 1.1rem; max-width: 46rem; color: var(--tenue); }
.comp-home { margin-top: 1.5rem; }
.comp-home > .scheda-testa { cursor: default; }
.comp-home h3 { font-size: 1.05rem; margin: 0 0 .6rem; }
.punto { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; margin-top: 1rem; }
.racconto, .mini { background: var(--carta); border: 1px solid var(--bordo); border-radius: 12px; padding: 1.1rem 1.3rem; }
.racconto p { margin: 0 0 .8rem; max-width: 42rem; line-height: 1.65; }
.racconto p:last-child { margin-bottom: 0; }
.mini ol { list-style: none; margin: 0 0 .8rem; padding: 0; }
.mini li { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; border-bottom: 1px solid var(--bordo); }
.mini li:last-child { border-bottom: 0; }
.mini .pos { color: var(--tenue); width: 1.2rem; text-align: right; font-variant-numeric: tabular-nums; }
.mini .sq { flex: 1; min-width: 0; }
.mini .pt-mini { font-weight: 700; font-variant-numeric: tabular-nums; }
.vai { font-weight: 600; }
.guida-titolo { margin-top: 2rem !important; }
.guida { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; }
.voce {
  display: flex; flex-direction: column; gap: .3rem; color: var(--testo);
  background: var(--carta); border: 1px solid var(--bordo); border-radius: 12px; padding: 1rem 1.1rem;
}
.voce:hover { text-decoration: none; border-color: var(--accento); }
.voce b { color: var(--accento); font-size: 1.02rem; }
.voce span:not(.ico) { color: var(--tenue); font-size: .92em; line-height: 1.55; }
.voce .ico { font-size: 1.4rem; }
.come { margin-top: 2.5rem; max-width: 46rem; }
.come p { color: var(--tenue); }
@media (max-width: 720px) {
  .punto { grid-template-columns: 1fr; }
  .benvenuto h1 { font-size: 1.6rem; }
  .mini .nome-lungo { display: inline; }
  .mini .nome-corto { display: none; }
}