:root{
  /* palette dal logo (OKLCH) */
  --c-bg: oklch(0.968 0.014 84);
  --c-surface: oklch(0.992 0.006 84);
  --c-ink: oklch(0.28 0.035 255);
  --c-brand: oklch(0.46 0.10 47);
  --c-accent: oklch(0.74 0.115 82);
  --c-muted: oklch(0.55 0.02 255);
  --c-line: oklch(0.90 0.012 84);
  --c-row-alt: oklch(0.975 0.012 84);
  --c-row-hover: oklch(0.95 0.02 84);
  --c-good: oklch(0.55 0.10 150);
  --c-bad: oklch(0.52 0.13 33);
  --c-on-dark: oklch(0.97 0.012 84);   /* testo su navy/marrone */
  --f-display: 'Oswald', system-ui, sans-serif;
  --f-text: 'Inter', system-ui, sans-serif;
  --r: 12px;
  --maxw: 1080px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--f-text); color:var(--c-ink); background:var(--c-bg);
  line-height:1.45; -webkit-text-size-adjust:100%;
}

/* ---------- header ---------- */
.topbar{
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; background:var(--c-surface); border-bottom:2px solid var(--c-ink);
}
.brand{display:flex; align-items:center; gap:10px; min-width:0}
.brand-logo{width:40px; height:40px; border-radius:50%; flex:none}
.brand-name{
  font-family:var(--f-display); font-weight:700; font-size:22px; line-height:1;
  letter-spacing:.5px; text-transform:uppercase; color:var(--c-ink);
}
.topmeta{
  margin-left:auto; color:var(--c-muted); font-size:12px; text-align:right;
  font-family:var(--f-display); text-transform:uppercase; letter-spacing:.4px;
}

/* ---------- nav (chip, scrollabile su mobile) ---------- */
.nav{
  display:flex; gap:8px; padding:10px 16px; background:var(--c-surface);
  border-bottom:1px solid var(--c-line); position:sticky; top:0; z-index:10;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.nav::-webkit-scrollbar{display:none}
.nav button{
  flex:none; border:1px solid var(--c-line); cursor:pointer; color:var(--c-ink);
  background:var(--c-surface); padding:8px 14px; border-radius:999px;
  font-family:var(--f-display); font-size:13px; font-weight:600; letter-spacing:.5px;
  text-transform:uppercase; transition:background .15s, color .15s, border-color .15s;
}
.nav button:hover{border-color:var(--c-brand)}
.nav button.active{background:var(--c-ink); color:var(--c-on-dark); border-color:var(--c-ink)}

.content{max-width:var(--maxw); margin:0 auto; padding:20px 16px 56px}
.loading{color:var(--c-muted); padding:40px; text-align:center}

/* ---------- titoli sezione + filetto oro ---------- */
h2.section{
  font-family:var(--f-display); font-weight:600; text-transform:uppercase;
  color:var(--c-ink); text-align:center; font-size:20px; letter-spacing:.6px; margin:30px 0 6px;
}
hr.rule{border:0; height:3px; width:64px; margin:0 auto 16px; background:var(--c-accent); border-radius:2px}
h3.mini{
  font-family:var(--f-display); font-weight:600; text-transform:uppercase; color:var(--c-brand);
  text-align:center; margin:0 0 8px; font-size:14px; letter-spacing:.5px;
}

/* ---------- KPI ---------- */
.kpis{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:4px 0 8px}
.kpi{background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--r); padding:14px 12px; text-align:center}
.kpis .kpi:last-child:nth-child(odd){grid-column:1 / -1}   /* mobile: ultima card dispari a larghezza piena */
.kpi .lbl{font-family:var(--f-display); text-transform:uppercase; letter-spacing:.5px; color:var(--c-muted); font-size:12px}
.kpi .val{font-family:var(--f-display); font-weight:700; color:var(--c-brand); font-size:30px; line-height:1.05; margin-top:3px}
.kpi .who{display:inline-block; margin-top:7px; font-size:14px; color:var(--c-ink); border:1px solid var(--c-line); border-radius:999px; padding:2px 10px}

/* ---------- tabelle ---------- */
.tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--c-line); border-radius:var(--r); margin:4px 0}
table{border-collapse:collapse; width:100%; font-size:14px}
thead th{
  background:var(--c-row-alt); text-align:left; padding:10px 12px;
  font-family:var(--f-display); font-weight:600; text-transform:uppercase; letter-spacing:.3px;
  color:var(--c-ink); white-space:nowrap; cursor:pointer; user-select:none; border-bottom:2px solid var(--c-line);
}
thead th .arr{color:var(--c-accent); font-size:11px; margin-left:4px}
tbody td{padding:9px 12px; border-bottom:1px solid var(--c-line); white-space:nowrap; color:var(--c-ink)}
tbody tr:nth-child(even){background:var(--c-row-alt)}
tbody tr:hover{background:var(--c-row-hover)}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
.rank{color:var(--c-muted); width:34px}

/* colonna 1 (nome) congelata durante lo scroll orizzontale + posizione davanti al nome */
table.sticky th:first-child, table.sticky td:first-child{position:sticky; left:0; z-index:2; box-shadow:1px 0 0 var(--c-line)}
table.sticky thead th:first-child{z-index:3; background:var(--c-row-alt)}
table.sticky tbody td:first-child{background:var(--c-bg)}
table.sticky tbody tr:nth-child(even) td:first-child{background:var(--c-row-alt)}
table.sticky tbody tr:hover td:first-child{background:var(--c-row-hover)}
.rk{color:var(--c-muted); font-variant-numeric:tabular-nums; margin-right:2px}

.pager{display:flex; gap:10px; align-items:center; justify-content:flex-end; padding:8px 6px; color:var(--c-muted); font-size:13px}
.pager button{border:1px solid var(--c-line); background:var(--c-surface); border-radius:8px; cursor:pointer; padding:3px 10px; color:var(--c-ink)}
.pager button:disabled{opacity:.4; cursor:default}

/* ---------- hall of fame ---------- */
.grid4{display:grid; grid-template-columns:1fr; gap:16px}

/* ---------- esplora (menu pagine) ---------- */
.explore{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:4px 0 8px}
.exp-btn{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; min-height:96px; padding:14px 12px; text-decoration:none; border:1px solid var(--c-line); border-radius:var(--r); background:var(--c-surface); color:var(--c-ink); font-family:var(--f-display); text-transform:uppercase; letter-spacing:.5px; font-weight:600; font-size:14px; transition:background .15s, color .15s, border-color .15s}
.exp-btn:hover{background:var(--c-row-alt); color:var(--c-brand); border-color:var(--c-brand)}
.exp-ico{width:46px; height:46px; border-radius:10px; object-fit:contain; flex:none}

/* ---------- filtri ---------- */
.filters{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:6px 0 18px}
.filters label, .filters .filt{display:flex; flex-direction:row; align-items:center; gap:8px; font-family:var(--f-display); text-transform:uppercase; letter-spacing:.4px; font-size:12px; color:var(--c-muted)}
/* filtri prominenti (pagina Partite): select grandi, etichetta sopra */
.filters-lg{gap:14px; margin:10px 0 24px}
.filters-lg label{flex:1 1 220px; flex-direction:column; align-items:stretch; gap:6px; text-transform:none; letter-spacing:0; color:var(--c-ink)}
.filters-lg label span{font-family:var(--f-display); text-transform:uppercase; letter-spacing:.5px; font-size:13px; color:var(--c-ink)}
.filters-lg select{width:100%; padding:12px 14px; font-size:16px; font-family:var(--f-text); color:var(--c-ink); background:var(--c-surface); border:1.5px solid var(--c-brand); border-radius:10px; cursor:pointer}
.filters-lg select:disabled{opacity:.5; border-color:var(--c-line); cursor:not-allowed; background:var(--c-bg)}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{border:1px solid var(--c-line); background:var(--c-surface); border-radius:999px; padding:6px 14px; cursor:pointer; font-family:var(--f-text); font-size:13px; color:var(--c-ink)}
.chip.on{background:var(--c-brand); color:var(--c-on-dark); border-color:var(--c-brand)}
.chips-lg{gap:8px}
.chip-lg{padding:9px 20px; font-size:15px; font-weight:600}
.ms{position:relative}
.ms-btn{padding:8px 12px; border:1px solid var(--c-line); border-radius:999px; background:var(--c-surface); min-width:180px; text-align:left; cursor:pointer; font-family:var(--f-text); font-size:14px; color:var(--c-ink)}
.ms-btn::after{content:"▾"; float:right; color:var(--c-muted)}
.ms-panel{position:absolute; z-index:30; top:calc(100% + 4px); left:0; display:flex; flex-direction:column; background:var(--c-surface); border:1px solid var(--c-line); border-radius:12px; box-shadow:0 10px 28px oklch(0.28 0.035 255 / .16); max-height:300px; overflow:hidden; min-width:210px; padding:5px}
.ms-search{flex:none; width:100%; box-sizing:border-box; border:1px solid var(--c-line); border-radius:8px; padding:7px 10px; margin-bottom:6px; font-family:var(--f-text); font-size:14px; color:var(--c-ink); background:var(--c-bg)}
.ms-search::placeholder{color:var(--c-muted)}
.ms-list{overflow:auto; -webkit-overflow-scrolling:touch}
.ms-opt{display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:8px; cursor:pointer; font-size:14px; color:var(--c-ink)}
.ms-opt:hover{background:var(--c-row-alt)}

.note{margin:10px 0 2px; padding:10px 14px; border:1px solid var(--c-accent); background:oklch(0.95 0.05 84); color:var(--c-brand); border-radius:var(--r); font-family:var(--f-text); font-size:13px; font-weight:600}
.infobox{margin:26px 0 6px; padding:16px 18px; background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--r)}
.infobox .ttl{display:flex; align-items:center; gap:8px; font-family:var(--f-display); font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--c-brand); font-size:14px; margin-bottom:8px}
.infobox .badge{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--c-accent); color:var(--c-ink); font-family:var(--f-display); font-weight:700; font-style:italic; font-size:12px}
.infobox p{margin:0; color:var(--c-ink); font-size:14px; line-height:1.55}
.infobox p + p{margin-top:6px}
.stub{text-align:center; color:var(--c-muted); padding:48px 18px}
.stub .big{font-size:44px}
.foot{color:var(--c-muted); font-size:12px; text-align:center; padding:22px; font-family:var(--f-display); text-transform:uppercase; letter-spacing:.5px}
.footnote{color:var(--c-muted); font-size:12px; text-align:center; margin:12px 0 0; font-family:var(--f-text)}

/* ---------- enhance ≥640px ---------- */
@media(min-width:640px){
  .content{padding:26px 22px 60px}
  .kpis{grid-template-columns:repeat(auto-fit, minmax(150px, 1fr))}
  .kpis .kpi:last-child:nth-child(odd){grid-column:auto}   /* da tablet in su: niente full-width */
  .grid4{grid-template-columns:repeat(2, 1fr)}
  .explore{grid-template-columns:repeat(3, 1fr)}
  h2.section{font-size:24px}
  .brand-name{font-size:24px}
}
/* ---------- enhance ≥960px ---------- */
@media(min-width:960px){
  .grid4{grid-template-columns:repeat(4, 1fr)}
  .explore{grid-template-columns:repeat(4, 1fr)}
}
/* ---------- mobile: righe piu' compatte (tabelle meno alte) ---------- */
@media(max-width:639px){
  tbody td{padding:7px 10px}
  thead th{padding:8px 10px}
}
@media(prefers-reduced-motion:reduce){ *{transition:none !important} }