/* ==========================================================================
   STATS + ADVANCED
   ========================================================================== */
.st-titolo {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 900;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stats-tabs {
  flex-shrink: 0;
  display: flex;
  gap: 6px;
  padding: 8px var(--space-4);
  background: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-border);
}

/* ---------- Stats: solo il corpo scorre, header/tab/controlli fissi ---------- */
#view-stats { overflow: hidden; }
#view-stats > #stats-body { flex: 1; min-height: 0; overflow-y: auto; }
#view-stats .st-scroll { max-height: none; }

/* header compatto (punteggio nella topbar) — non spettatore */
#view-stats .cal-topbar:has(.st-titolo.sh-mode) {
  background: linear-gradient(150deg, var(--color-score-bg-a), var(--color-score-bg-b));
  border-bottom-color: transparent;
}
#view-stats .cal-topbar:has(.st-titolo.sh-mode) #stats-refresh { color: var(--color-on-color); opacity: .85; }
.st-titolo.sh-mode { display: flex; align-items: baseline; gap: 7px; overflow: visible; white-space: nowrap; }
.sh-sc { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.sh-n { font-size: 18px; font-weight: 900; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.sh-n.noi { color: var(--color-brand-ink); }
.sh-d { color: var(--color-text-muted); font-weight: 700; }
.sh-t { font-size: 9px; font-weight: 800; letter-spacing: .04em; color: var(--color-text-muted); text-transform: uppercase; }
.sh-clk { font-size: 9px; font-weight: 800; background: var(--color-surface); color: var(--color-text-secondary);
  padding: 1px 6px; border-radius: 5px; }
.sh-tot { font-size: 9px; font-weight: 700; color: var(--color-text-muted); }
/* su fondo navy (quando :has funziona) */
#view-stats .cal-topbar:has(.st-titolo.sh-mode) .sh-n { color: var(--color-on-color); }
#view-stats .cal-topbar:has(.st-titolo.sh-mode) .sh-n.noi { color: var(--color-score-mine); }
#view-stats .cal-topbar:has(.st-titolo.sh-mode) .sh-d { color: rgba(255,255,255,.6); }
#view-stats .cal-topbar:has(.st-titolo.sh-mode) .sh-t,
#view-stats .cal-topbar:has(.st-titolo.sh-mode) .sh-tot { color: rgba(255,255,255,.72); }
#view-stats .cal-topbar:has(.st-titolo.sh-mode) .sh-clk { background: rgba(255,255,255,.16); color: var(--color-on-color); }

/* barra controlli: selettore periodo + toggle N/% */
#stats-controlli {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 6px var(--space-4);
  background: var(--color-surface-sunken);
  border-bottom: 1px solid var(--color-border);
}
#stats-controlli:empty { display: none; }
.sp-seg { flex: 1; min-width: 0; display: flex; gap: 3px; overflow-x: auto; scrollbar-width: none; }
.sp-seg::-webkit-scrollbar { display: none; }
.sp-chip {
  flex: 0 0 auto; min-height: 28px; padding: 3px 9px;
  border-radius: 6px; border: 1px solid var(--color-border-strong);
  background: var(--color-surface); color: var(--color-text-secondary);
  font-weight: 800; font-size: 11px; touch-action: manipulation;
}
.sp-chip.on { background: var(--color-brand-strong); color: var(--color-on-color); border-color: var(--color-brand-strong); }
.sp-div { flex: 0 0 auto; width: 1px; align-self: stretch; background: var(--color-border-strong); margin: 3px 2px; }
#stats-controlli .st-fmt { flex: 0 0 auto; }

.sp-nota { font-size: 11px; color: var(--color-text-muted); margin: 2px 0 6px; }

@media (max-width: 360px) {
  .st-titolo.sh-mode .sh-tot { display: none; }
  .sp-chip { padding: 3px 7px; font-size: 10px; }
}

/* totali squadra = prime righe della tabella */
table.st-box tbody tr.st-tot td {
  background: var(--color-brand-soft);
  color: var(--color-brand-ink);
  font-weight: 800;
  border-bottom: 1px solid var(--color-border-strong);
}
table.st-box tbody tr.st-tot.avv td { background: var(--color-surface); color: var(--color-text-primary); }
table.st-box tbody tr.st-tot td.st-n { color: var(--color-text-muted); }
.stats-tabs button {
  flex: 1;
  min-height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  touch-action: manipulation;
}
.stats-tabs button.attivo {
  background: var(--color-brand-soft);
  color: var(--color-brand-ink);
  border-color: var(--color-brand-ink);
}
/* 4 tab (Tabellino/Andamento/Tiri/PBP): stringi un filo per stare su 430px */
.stats-tabs button { padding-left: 2px; padding-right: 2px; }
@media (max-width: 430px) {
  .stats-tabs button { font-size: 11px; letter-spacing: 0.1px; }
}

#stats-body, #adv-body { gap: 10px; }

.st-score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 10px;
  background: linear-gradient(150deg, var(--color-score-bg-a), var(--color-score-bg-b));
  color: var(--color-on-color);
  border-radius: var(--radius-sm);
}
.st-score-team { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; opacity: 0.82; }
.st-score-n { font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; }
.st-score-n.noi { color: var(--color-score-mine); }
.st-score-vs { font-size: 16px; opacity: 0.5; }
.st-score-q {
  width: 100%;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--color-on-color);
  opacity: 0.72;
}

.segui-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-state-negative-soft);
  color: var(--color-state-negative);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.segui-bar.fin {
  background: var(--color-surface);
  color: var(--color-text-secondary);
}
.segui-bar.fin button { border-color: var(--color-border-strong); color: var(--color-text-secondary); }
.segui-bar button {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-state-negative);
  background: var(--color-surface-raised);
  color: var(--color-state-negative);
  font-weight: 800;
  font-size: 11px;
}

/* ---------- Riepilogo squadra ---------- */
.st-team {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-secondary);
}
.st-team.noi { background: var(--color-brand-soft); }
.st-team.avv { background: var(--color-surface); }
.st-team-nome { font-size: 13px; font-weight: 900; color: var(--color-text-primary); min-width: 44px; }
.st-team-pt { font-size: 20px; font-weight: 900; color: var(--color-brand-ink); }
.st-team.avv .st-team-pt { color: var(--color-text-primary); }

.st-hint { font-size: 11px; color: var(--color-text-muted); text-align: center; }

.st-fmt { display: flex; gap: 6px; }
.st-fmt button {
  flex: 1;
  min-height: 30px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface-raised);
  color: var(--color-text-secondary);
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
}
.st-fmt button.attivo { background: var(--color-brand-strong); color: var(--color-on-color); border-color: var(--color-brand-strong); }

/* ---------- Tabella box score ---------- */
.st-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-height: 62vh; overflow-y: auto; }
table.st-box {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
table.st-box th, table.st-box td {
  padding: 6px 7px;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}
table.st-box thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-brand-strong);
  color: var(--color-on-color);
  font-size: 10px;
  font-weight: 800;
}
table.st-box td.st-n, table.st-box th:first-child { text-align: left; font-weight: 800; color: var(--color-brand-ink); }
table.st-box th:first-child { color: var(--color-on-color); }
table.st-box td.st-g, table.st-box th:nth-child(2) { text-align: left; font-weight: 700; color: var(--color-text-primary); }
table.st-box th:nth-child(2) { color: var(--color-on-color); }
table.st-box td.st-pt { font-weight: 900; color: var(--color-text-primary); }
table.st-box td.st-val { font-weight: 800; }
table.st-box tbody tr:nth-child(even) { background: var(--color-surface); }
table.st-box td.pos { color: var(--color-state-positive); font-weight: 800; }
table.st-box td.neg { color: var(--color-state-negative); font-weight: 800; }

/* Telefono verticale: nascondi le colonne estese. Orizzontale + desktop: mostrale tutte. */
@media (orientation: portrait) and (pointer: coarse) {
  .sm-hide { display: none; }
}
/* Finestra desktop stretta: torna a nascondere le colonne estese */
@media (pointer: fine) and (max-width: 720px) {
  .sm-hide { display: none; }
}

/* ---------- Tiri ---------- */
.st-tiro { display: flex; flex-direction: column; gap: 4px; }
.st-tiro-top { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 700; color: var(--color-text-secondary); }
.st-tiro-top span:first-child { font-weight: 900; color: var(--color-text-primary); }
.st-bar { height: 10px; background: var(--color-surface); border-radius: 999px; overflow: hidden; }
.st-bar span { display: block; height: 100%; border-radius: 999px; }
.st-bar span.noi { background: var(--color-brand-bright); }
.st-bar span.avv { background: var(--color-text-secondary); }

/* ---------- Andamento ---------- */
.st-and-tit { font-size: 12px; font-weight: 800; color: var(--color-text-primary); }
.st-chart { width: 100%; min-width: 300px; height: auto; aspect-ratio: 680 / 240; display: block; }
.st-zero { stroke: var(--color-border-strong); stroke-width: 1.5; }
.st-grid { stroke: var(--color-border); stroke-width: 1; }
.st-q { stroke: var(--color-text-muted); stroke-width: 1; stroke-dasharray: 2 3; }
.st-qt { font-size: 10px; fill: var(--color-text-secondary); font-weight: 800; }
.st-axis { font-size: 10px; fill: var(--color-text-muted); font-weight: 700; }
.st-area { fill: var(--color-brand-bright); opacity: 0.14; }
.st-linea { fill: none; stroke: var(--color-brand-ink); stroke-width: 2.5; stroke-linejoin: round; }

@media (orientation: landscape) {
  .st-scroll { max-height: 78vh; }
}

/* ---------- Advanced ---------- */
.adv-legenda { font-size: 12px; font-weight: 700; color: var(--color-text-secondary); display: flex; gap: 10px; }
.adv-legenda .noi::before, .adv-legenda .avv::before {
  content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px;
}
.adv-legenda .noi::before { background: var(--color-brand-ink); }
.adv-legenda .avv::before { background: var(--color-text-secondary); }

.adv-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.adv-card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px;
}
.adv-tit { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; color: var(--color-text-secondary); }
.adv-vals { display: flex; align-items: baseline; gap: 10px; margin-top: 2px; }
.adv-vals .noi { font-size: 20px; font-weight: 900; color: var(--color-brand-ink); }
.adv-vals .avv { font-size: 14px; font-weight: 800; color: var(--color-text-secondary); }
.adv-nota { font-size: 10px; color: var(--color-text-muted); margin-top: 4px; }

@media (orientation: landscape) {
  .adv-griglia { grid-template-columns: repeat(4, 1fr); }
}

/* Migliori quintetti */
.mq-lista { display: flex; flex-direction: column; gap: 5px; margin: 4px 0 8px; }
.mq-riga {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 9px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.mq-pm { font-weight: 900; min-width: 34px; }
.mq-pm.pos { color: var(--color-state-positive); }
.mq-pm.neg { color: var(--color-state-negative); }
.mq-min { color: var(--color-text-muted); font-weight: 700; min-width: 30px; }
.mq-nomi { flex: 1; min-width: 0; color: var(--color-text-primary); font-weight: 600; }
.mq-teo {
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text-secondary);
  background: var(--color-brand-soft);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.mq-teo b { color: var(--color-text-primary); }
.mq-teo .mq-r { font-size: 10px; font-weight: 800; color: var(--color-brand-ink); }
.mq-vincolo { font-size: 10px; color: var(--color-text-muted); margin-top: 3px; }

/* ---------- PBP (play-by-play) ---------- */
.pbp {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}
.pbp-riga {
  display: grid;
  grid-template-columns: 66px 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  font-size: 12px;
}
.pbp-riga.noi { border-left: 3px solid var(--color-brand-ink); }
.pbp-riga.avv { border-left: 3px solid var(--color-text-muted); }
.pbp-t { color: var(--color-text-muted); font-weight: 700; font-size: 11px; white-space: nowrap; }
.pbp-d { color: var(--color-text-primary); min-width: 0; }
.pbp-s { color: var(--color-text-secondary); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Analisi stagione ---------- */
#analisi-filtri {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 8px var(--space-4);
  background: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-border);
}
.an-chip-grp { display: flex; gap: 4px; }
.an-chip {
  min-height: 30px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: 800;
  touch-action: manipulation;
}
.an-chip.attivo {
  background: var(--color-brand-soft);
  color: var(--color-brand-ink);
  border-color: var(--color-brand-ink);
}
.an-record {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 900;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}
.an-strisc { display: inline-flex; gap: 3px; }
.an-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 900;
  color: var(--color-on-color);
}
.an-pill.w { background: var(--color-state-positive); }
.an-pill.l { background: var(--color-state-negative); }
.an-barw { fill: var(--color-state-positive); }
.an-barl { fill: var(--color-state-negative); }
table.an-tab th[data-sort] { cursor: pointer; white-space: nowrap; }
table.an-tab th.an-sorted { background: var(--color-brand-ink); }

/* ---------- Desktop: tabelle e grafici respirano ---------- */
@media (min-width: 900px) and (pointer: fine) {
  table.st-box { font-size: 13px; }
  table.st-box th, table.st-box td { padding: 8px 11px; }
  table.st-box thead th { font-size: 11px; }
  .st-scroll { max-height: none; }
  .st-chart { max-width: 900px; margin-inline: auto; }
  .st-team { font-size: 13px; }
  .adv-griglia { grid-template-columns: repeat(4, 1fr); }
  .pbp-riga { font-size: 13px; grid-template-columns: 92px 1fr auto; }
  .mq-riga, .mq-teo { font-size: 13px; }
  .st-hint { font-size: 12px; }
}