/* Pagina "Video" (video.html): inserimento del codice e viewer di una partita condivisa.
   Vive in un file a sé e non in css/style.css perché serve solo qui: style.css è già 160 KB e
   viene scaricato da ogni pagina, mentre questo lo scarica solo chi apre un video condiviso.

   Dalla schermata del codice in giù i nomi delle classi non sono più quelli del sito (vw-*) ma
   quelli del MatchViewer dell'app — viewer-top, point-box, event-box, mstb-*, mstats-* — e le
   regole sono il port dei corrispondenti file .razor.css del repo Volleyball_AI_app
   (MatchViewer.razor.css, TabActions.razor.css, MatchStatsFullTable.razor.css,
   TabMatchStats.razor.css). Tenere gli stessi nomi rende ovvio dove guardare quando una delle
   due parti cambia; i valori sono copiati, non reinterpretati, perché il viewer deve risultare
   lo stesso a chi passa dall'app al sito. */

/* L'attributo hidden nasconde con "display: none" dallo stylesheet del browser, che ha priorita'
   piu' bassa di qualunque regola scritta qui: .vw-loading { display: flex } lo sovrascriveva, e
   la rotellina di caricamento restava visibile anche senza aver inserito nessun codice. I tre
   stati della pagina (gate / loading / viewer) si alternano proprio con hidden, quindi la regola
   vale per tutti e tre. */
[hidden] { display: none !important; }

/* Foto di sfondo della pagina (images/stock/video pc.jpg) con sopra il velo scuro in gradiente
   usato dagli hero del resto del sito: la foto e' una palestra piena, chiara e affollata, e senza
   velo il riquadro del codice non si leggerebbe. Da telefono la foto cambia (vedi il blocco
   @media qui sotto): quella da PC e' orizzontale e ritagliata in "cover" su uno schermo stretto
   mostrerebbe solo una striscia centrale.

   La pagina e' alta ESATTAMENTE quanto lo schermo e non scorre: c'e' solo il riquadro del codice,
   e non c'e' nulla sotto da raggiungere. "height" (non "min-height") con 100dvh: da telefono
   100vh vale quanto lo schermo SENZA la barra dell'indirizzo, quindi una pagina alta 100vh
   sborda sempre di quella fascia — con l'immagine di sfondo ferma al viewport, la fascia in
   piu' restava scoperta e mostrava il colore di fondo, cioe' la striscia blu che si vedeva in
   fondo alla pagina sul telefono. 100vh resta prima come ripiego per i browser senza dvh.
   overflow/overscroll: niente scorrimento e niente rimbalzo elastico ai bordi. */
/* Foto + velo su un livello fisso a parte (::before) invece che sul body: il colore di fondo
   del body/pagina resta bianco, che e' quello da cui il browser del telefono ricava il colore
   delle barre di sistema (come nelle altre pagine, dove il fondo e' bianco) — con la foto sul
   body le barre diventavano blu. */
body.video-page {
  background: #fff;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

body.video-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(11, 30, 61, 0.78) 0%, rgba(11, 30, 61, 0.7) 45%, rgba(11, 30, 61, 0.86) 100%),
    url('../images/stock/video%20pc.jpg') center / cover no-repeat;
  background-color: var(--navy);
}

@media (max-width: 720px) {
  body.video-page::before {
    background-image: linear-gradient(180deg, rgba(11, 30, 61, 0.78) 0%, rgba(11, 30, 61, 0.7) 45%, rgba(11, 30, 61, 0.86) 100%),
      url('../images/stock/video_cell.jpg');
  }
}

/* Come su body.download-page: nella colonna flex la toolbar non si schiaccia, lo spazio che
   avanza va tutto a .vw-main. */
body.video-page header { flex-shrink: 0; }

/* Mentre il viewer è aperto copre tutto: il sito sotto non deve scorrere. */
body.vw-viewing { overflow: hidden; }

/* Il riquadro del codice e' l'unica cosa nella pagina: sta al centro dello schermo, non appeso
   in alto. Si prende tutto lo spazio che avanza sotto la toolbar (flex:1 nella colonna alta
   quanto lo schermo, vedi body.video-page) e centra il suo contenuto in verticale; il centraggio
   orizzontale e' il margin:auto di .vw-gate. min-height:0 perche' un elemento flex non scenda
   sotto il proprio contenuto e faccia sbordare la pagina su schermi bassi (telefono in
   orizzontale). */
.vw-main {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ── Stato 1: richiesta del codice ───────────────────────────────── */

.vw-gate {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}

/* Chiari sul velo scuro della foto di sfondo (vedi body.video-page). */
.vw-gate-title {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  color: #fff;
  margin: 0 0 0.6rem;
}

.vw-gate-sub {
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 1.8rem;
  line-height: 1.5;
}

.vw-gate-form {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Monospace e spaziato: il codice va letto o dettato un carattere alla volta, e le lettere
   maiuscole sono l'unica forma in cui viene generato (vedi ShareService nell'app). */
.vw-code-input {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-align: center;
  text-transform: uppercase;
  width: 250px;
  max-width: 100%;
  padding: 0.7rem 0.9rem;
  border: 2px solid var(--grey-200);
  border-radius: var(--radius);
  background: #fff;
  color: var(--navy);
  outline: none;
  transition: border-color 0.15s;
}
.vw-code-input:focus { border-color: var(--navy); }
.vw-code-input::placeholder { color: #c3c8d4; letter-spacing: 0.22em; }

.vw-gate-btn { padding: 0.7rem 1.6rem; font-size: 1rem; }

.vw-gate-error {
  margin: 1.2rem auto 0;
  max-width: 420px;
  /* Sul velo scuro della foto (vedi body.video-page) il rosso scuro sparirebbe: testo chiaro
     su un fondo rosso trasparente. */
  color: #ffb4ab;
  background: rgba(120, 20, 15, 0.55);
  border: 1px solid rgba(255, 180, 171, 0.4);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  font-size: 0.92rem;
  line-height: 1.45;
}

/* ── Stato 2: caricamento ────────────────────────────────────────── */

.vw-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 5rem 1rem;
  color: rgba(255, 255, 255, 0.88);
}

.vw-spinner {
  width: 38px;
  height: 38px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: vw-spin 0.8s linear infinite;
}
@keyframes vw-spin { to { transform: rotate(360deg); } }

/* =================================================================
   Stato 3: il viewer — port di MatchViewer.razor.css
   ================================================================= */

.viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;          /* l'header del sito sta a 50 */
  /* Il viewer è un <section>, e in css/style.css "section" ha padding: 80px 0 (le fasce della
     home): senza azzerarlo qui la banda blu scende di 80px dal bordo e altrettanti ne restano
     vuoti sotto il player. */
  padding: 0;
  background: var(--navy-dark);
  display: flex;
  flex-direction: column;
}

.vw-hidden { display: none !important; }

/* ── Banda blu ── */

.viewer-top {
  height: 56px;
  flex-shrink: 0;
  background: var(--navy-mid);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1rem;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07);
}

.viewer-exit,
.viewer-edit-btn,
.viewer-full-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.83rem;
  font-weight: 600;
  font-family: inherit;
  padding: 0.28rem 0.65rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  flex-shrink: 0;
  white-space: nowrap;
}
.viewer-exit svg     { width: 16px; height: 16px; }
.viewer-edit-btn svg, .viewer-full-btn svg { width: 14px; height: 14px; }
.viewer-exit:hover,
.viewer-full-btn:hover,
.viewer-edit-btn:hover     { color: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.1); }
.viewer-edit-btn:disabled  { opacity: 0.4; cursor: default; }
.viewer-edit-btn:disabled:hover { color: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.18); background: transparent; }
.viewer-edit-btn.active    { background: #fff; color: var(--navy); border-color: #fff; opacity: 1; }

.viewer-top-spacer { flex: 1; }

.viewer-mode-toggle {
  display: flex;
  gap: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  padding: 3px;
  flex-shrink: 0;
}
.vmt-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.83rem;
  font-weight: 600;
  font-family: inherit;
  padding: 0.28rem 0.8rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.vmt-btn svg    { width: 24px; height: 15px; flex-shrink: 0; }
.vmt-btn:hover  { color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.1); }
.vmt-btn.active { background: #fff; color: var(--navy); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }

/* ── Corpo: video a sinistra, tab a destra ── */

.viewer-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  position: relative;
}

.viewer-main {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

/* Il player YouTube riempie tutto lo spazio disponibile (l'iframe gestisce da sé il
   letterbox), come il <video> con object-fit: contain nell'app. */
.viewer-player { position: absolute; inset: 0; }
.viewer-player iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* L'iframe non deve ricevere il puntatore: al primo movimento del mouse o al tocco YouTube
   tira su la propria cornice (titolo del video, nome del canale, barra di avanzamento), che qui
   non si vuole. Gli eventi li prende lo strato sopra, che li traduce in pausa/ripresa. */
.viewer-player iframe { pointer-events: none; }

/* Le traiettorie stanno sopra il video e sopra lo strato che raccoglie i click: quando il
   puntatore è su un percorso cliccabile il JS le accende i pointer-events, altrimenti restano
   trasparenti e il click arriva allo shield come sempre. */
.viewer-player-traj {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.viewer-player-shield {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background: transparent;
}

/* Pulsante di solo icona nella banda blu (schermo intero). Stessa forma degli altri, senza
   etichetta: la banda su telefono e' gia' piena. Le due icone stanno una sopra l'altra e si
   alternano con .vw-is-full, messo dal JS quando il browser entra o esce da schermo intero. */
/* Schermo intero: icona ed etichetta esistono in due versioni, "entra" e "esci", e si alternano
   con .vw-is-full, che il JS mette addosso al pulsante quando il browser entra o esce (anche da
   Esc o dal tasto indietro, non solo da qui). */
.viewer-full-btn .vw-full-exit { display: none; }
.viewer-full-btn.vw-is-full svg,
.viewer-full-btn.vw-is-full .vw-full-label { display: none; }
.viewer-full-btn.vw-is-full svg.vw-full-exit { display: block; }
.viewer-full-btn.vw-is-full .vw-full-label.vw-full-exit { display: inline; }

/* Velocità di riproduzione nella banda blu. I tre pulsanti stanno insieme come le tab di
   destra; l'etichetta sparisce sugli schermi stretti, dove i simboli bastano e lo spazio no. */
.viewer-speed {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  flex-shrink: 0;
  margin-left: 0.15rem;
}
.viewer-speed-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.55);
  margin-right: 0.1rem;
}
.vspeed-btn {
  min-width: 32px;
  padding: 0.24rem 0.4rem;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.vspeed-btn:hover  { color: #fff; border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.1); }
.vspeed-btn.active { background: #fff; color: var(--navy); border-color: #fff; }

/* ── Sidebar ── */

.viewer-sidebar {
  width: 280px;
  flex-shrink: 0;
  background: #f4f6fb;
  border-left: 1px solid #e0e5f0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Nascosta mentre sono aperte le statistiche, che prendono tutta la larghezza. */
.viewer-sidebar-hidden { display: none !important; }

.sidebar-placeholder {
  font-size: 0.85rem;
  color: #99a;
  text-align: center;
  margin: 3rem 1rem 0;
  font-style: italic;
}

.actions-tab-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.actions-view-toggle-bar {
  padding: 8px 8px 6px;
  flex-shrink: 0;
  border-bottom: 1px solid #e8ecf5;
  margin-bottom: 4px;
}

.rot-control-section { display: flex; flex-direction: column; gap: 0.2rem; }

.rot-section-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(0, 0, 0, 0.35);
}

.rot-team-toggle {
  display: flex;
  gap: 3px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  padding: 3px;
  flex-shrink: 0;
}
.rot-team-btn {
  flex: 1;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #777;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  padding: 0.28rem 0.5rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rot-team-btn:hover  { background: rgba(0, 0, 0, 0.07); color: #333; }
.rot-team-btn.active { background: #fff; color: var(--navy); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }

.actions-container {
  flex: 1;
  overflow: hidden;
  min-height: 0;
  position: relative;
}

.actions-scroll {
  height: 100%;
  overflow-y: scroll;
  scrollbar-width: none;
  padding: 0 8px;
  box-sizing: border-box;
  overscroll-behavior: contain;
}
.actions-scroll::-webkit-scrollbar { display: none; }

/* ── Card di un punto ── */

.point-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  width: 100%;
  height: 82px;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 1.5px solid #e0e5f0;
  border-radius: 10px;
  background: #fff;
  padding: 0.45rem 0.9rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.point-box:hover { border-color: var(--navy); background: #f0f4ff; }

@keyframes point-pulse {
  0%   { background: rgba(59, 130, 246, 0.18); }
  100% { background: rgba(59, 130, 246, 0.07); }
}
.point-box-active {
  border-color: var(--blue);
  background: rgba(59, 130, 246, 0.07);
  box-shadow: inset 3px 0 0 var(--blue), 0 1px 3px rgba(0, 0, 0, 0.04);
  animation: point-pulse 0.35s ease-out;
}

.point-num {
  font-size: 0.68rem;
  color: #aaa;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Due righe (squadra A / squadra B): nome, punteggio d'ingresso e "+1" su chi segna. */
.point-score-grid {
  display: grid;
  grid-template-columns: 1fr auto auto;
  column-gap: 0.45rem;
  row-gap: 0.06rem;
  align-items: center;
  width: 100%;
}
.point-team-name {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.point-team-score {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 1.6ch;
}
.point-plus1 {
  font-size: 0.65rem;
  font-weight: 700;
  color: transparent;
  min-width: 1.6rem;
  text-align: left;
}
.point-plus1.shown { color: #22a55e; }

/* ── Header di set ── */

.sidebar-set-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #e8edf7;
  border: 1.5px solid #b0bdd8;
  border-radius: 7px;
  color: #555;
  font-size: 0.62rem;
  font-weight: 700;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0.6rem 0 0.5rem;
  padding: 0.32rem 0.6rem;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  transition: background 0.1s, color 0.1s;
}
.sidebar-set-toggle:hover { background: #dde4f2; color: #333; }

.set-toggle-arrow {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  color: #a0afc8;
  transition: transform 0.18s ease;
  transform: rotate(-90deg);
}
.sidebar-set-toggle.open .set-toggle-arrow { transform: rotate(0deg); }

.set-count-badge {
  margin-left: 0.35em;
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.65;
  text-transform: none;
  letter-spacing: 0;
}

/* ── Header "incollati" in cima (creati da js/video.js) ── */

.js-ghost-stack {
  position: absolute;
  top: 0;
  left: 8px;
  right: 8px;
  z-index: 5;
  background: #f4f6fb;
}
.js-sticky-ghost { margin: 6px 0 0; }
.js-sticky-rally-ghost {
  margin: 0;
  box-shadow: none;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
  width: 100%;
}
/* Da telefono la tab Azioni non ha tendine di set (sono tab sopra la lista, non qui dentro):
   lo stack è quindi SOLO il punto corrente, incollato senza nulla sopra — attaccato al bordo
   superiore dello schermo/dei tab. Da PC lo stack di solito ha già l'header di un set sopra
   (che porta il suo margine), quindi lì il margine resterebbe doppio: si aggiunge solo quando
   il punto corrente è l'unica cosa nello stack. */
.js-ghost-stack:not(:has(.js-sticky-ghost)) .js-sticky-rally-ghost { margin-top: 6px; }

/* ── Azioni di un punto ── */

.rally-group { margin-bottom: 0.5rem; }

.event-list {
  border-left: 2px solid #e5e9f5;
  margin-left: 14px;
  padding-left: 6px;
  padding-bottom: 2px;
}

.event-box {
  display: flex;
  align-items: center;
  /* Poco spazio fra la scritta di un'azione e i suoi pulsanti (sono la stessa
     cosa), molto fra un'azione e la successiva: adesso che ogni riga e' alta
     due righe, e' il margine sotto a dire dove finisce una e comincia l'altra. */
  column-gap: 0.3rem;
  row-gap: 0.1rem;
  margin-bottom: 0.45rem;
  width: 100%;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 0.12s;
  box-sizing: border-box;
}
.event-box:hover { background: rgba(0, 0, 0, 0.05); }

@keyframes event-pulse {
  0%   { background: rgba(59, 130, 246, 0.22); }
  100% { background: rgba(59, 130, 246, 0.09); }
}
.event-box-active {
  background: rgba(59, 130, 246, 0.09);
  box-shadow: inset 2.5px 0 0 var(--blue);
  animation: event-pulse 0.35s ease-out;
}

.event-type-label {
  font-size: 0.77rem;
  font-weight: 500;
  color: #444;
  flex-shrink: 0;
}
.event-player {
  font-size: 0.72rem;
  color: #8b93a7;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-metric-value {
  font-size: 0.72rem;
  font-weight: 500;
  color: #8b93a7;
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
}
.event-quality {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-weight: 700;
}

/* =================================================================
   Statistiche — port di TabMatchStats.razor.css e
   MatchStatsFullTable.razor.css
   ================================================================= */

.mstats-overlay {
  position: absolute;
  inset: 0;
  background: var(--grey-50);
  display: flex;
  flex-direction: column;
  z-index: 10;
  overflow: hidden;
}

.mstats-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.5rem 0;
  flex-shrink: 0;
}

.mstats-team-tabs { display: flex; gap: 0.4rem; }

.mstats-team-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(0, 0, 0, 0.4);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-family: inherit;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.mstats-team-tab:hover  { color: rgba(0, 0, 0, 0.7); }
.mstats-team-tab.active { color: #1a1a2e; border-bottom-color: #3b6fd4; }

/* Tab delle viste (Complete / Per Set / ...), come nell'app: banda più scura senza bordi a tutta
   larghezza, tab non selezionate grigie e tab attiva del colore della pagina, così sembra
   continuare nel contenuto sotto. Sul telefono scorre di lato invece di tagliare le tab. */
.mstats-sub-tabs {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
  margin-top: 0.75rem;
  padding: 0.5rem 1.5rem 0;
  background: #e8ecf5;
  overflow-x: auto;
  scrollbar-width: none;
}
.mstats-sub-tabs::-webkit-scrollbar { display: none; }

.mstats-sub-tab {
  flex: 0 0 auto;
  padding: 0.5rem 1.2rem;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.03em;
  white-space: nowrap;
  color: #888;
  background: transparent;
  border: none;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.mstats-sub-tab:hover:not(.active) { background: #dde3f0; color: #555; }
.mstats-sub-tab.active {
  background: var(--grey-50);
  color: rgb(5, 39, 103);
  font-weight: 700;
}

.mstats-empty {
  margin: auto;
  padding: 2rem;
  color: rgba(0, 0, 0, 0.35);
  font-size: 0.95rem;
  text-align: center;
  font-style: italic;
}

.mstats-scroll {
  flex: 1;
  overflow: auto;
  padding: 1rem 1.5rem 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}

.mstats-team-block { margin-bottom: 2.5rem; }
.mstats-team-block:last-child { margin-bottom: 0; }

.mstats-team-heading {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1a1a2e;
  padding: 0 0 0.6rem;
}

.mstb-wrap {
  position: relative;
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
  background: #fff;
}

.mstb-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  min-width: 860px;
  font-size: 0.82rem;
  background: #fff;
}

.mstb-col-role   { width: 46px; }
.mstb-col-name   { width: 120px; }
.mstb-col-number { width: 42px; }
.mstb-col-stat   { width: 60px; }

.mstb-th-group,
.mstb-th-sub {
  background: #f0f4ff;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.4rem 0.5rem;
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.mstb-th-group { color: rgba(0, 0, 0, 0.45); font-size: 0.65rem; letter-spacing: 0.06em; }
.mstb-th-sub   { color: rgba(0, 0, 0, 0.4);  font-size: 0.68rem; letter-spacing: 0.04em; }
.mstb-th-tip   { cursor: help; }

.mstb-row:hover { background: rgba(59, 130, 246, 0.04); }

.mstb-td-player {
  font-weight: 600;
  color: #1a1a2e;
  padding: 0.4rem 0.6rem;
  text-align: left;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mstb-td-role   { text-align: center; color: rgba(0, 0, 0, 0.5); font-size: 0.74rem; }
.mstb-td-name   { text-align: center; font-size: 0.8rem; }
.mstb-td-number { text-align: center; color: rgba(0, 0, 0, 0.5); font-size: 0.76rem; }

.mstb-td {
  padding: 0.4rem 0.55rem;
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  color: #1a1a2e;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mstb-eff { font-weight: 700; }
/* Saldo +/− della sezione Punti. */
.mstb-pos { color: #15803d; }
.mstb-neg { color: #b91c1c; }

.mstb-total-row  { border-top: 1.5px solid rgba(0, 0, 0, 0.12); }
.mstb-total-label {
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(0, 0, 0, 0.45);
}
.mstb-total-cell { font-weight: 700; background: rgba(59, 130, 246, 0.03); }

/* Linea verticale fra i blocchi Giocatore / Battuta / Ricezione / Attacco. */
.mstb-vsep { border-left: 1px solid rgba(0, 0, 0, 0.1) !important; }

/* Colonna Nome ferma scorrendo la tabella di lato (.mstb-wrap ha overflow-x: auto), come nell'app:
   resta al bordo sinistro sopra le colonne che le scorrono sotto, quindi con sfondo pieno e una
   linea a destra. Senza nome la cella mostra ruolo + numero (nameCell in js/video.js). */
.mstb-sticky {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);
}
.mstb-th-group.mstb-sticky,
.mstb-th-sub.mstb-sticky { background: #f0f4ff; }
.mstb-row:hover .mstb-sticky { background: #f9fbff; }
.mstb-total-label.mstb-sticky { text-align: center; }
.mstb-name-fallback { color: rgba(0, 0, 0, 0.55); }

/* Tooltip delle intestazioni (port di wwwroot/css/stat-tooltip.css nell'app): pannello unico
   agganciato a body, quindi fuori dal riquadro con lo scroll orizzontale della tabella. */
.stat-tip-panel {
  display: none;
  position: fixed;
  z-index: 2000;
  max-width: 250px;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  background: #1a1a2e;
  color: #f1f5f9;
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
  line-height: 1.4;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  white-space: normal;
}


/* =================================================================
   Tab Rotazioni — port di TabRotations.razor.css (parte di sola lettura)
   ================================================================= */

/* Squadra e situazione sono due controlli affiancati sopra la lista, non uno solo come in
   tab Azioni: la barra li mette in colonna quando la tab è stretta. */
.actions-view-toggle-bar { display: flex; flex-direction: column; gap: 0.45rem; }
.rot-control-spaced { margin-top: 0.1rem; }

.rot-group-stats {
  display: flex;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  margin-left: auto;
  padding-right: 0.45rem;
}
.rot-won  { color: #2d8a4e; }
.rot-lost { color: #c0392b; }

/* Mentre il dito trascina, la selezione passa di box in box: il "pulse" di ogni nuova card
   selezionata diventerebbe un lampeggio continuo. L'animazione riparte al rilascio, sulla card
   scelta davvero (la classe sta sulla lista trascinata, la mette e la toglie js/video.js). */
.vw-swiping .point-box-active,
.vw-swiping .event-box-active,
.vw-swiping .filt-event-playing .filt-event-box { animation: none; }

/* ── Sidebar: set come tab, rotazioni in un menù a tendina ──────────
   Stessa forma su telefono e da PC (vedi "Forma della sidebar" in js/video.js): queste regole
   valgono ovunque. Il blocco "schermi piccoli" in fondo al file cambia solo le dimensioni. */

/* I set riusano la barra di "Filtri"/"Risultati" (.filt-tab-bar/.filt-tab), solo un filo più
   compatta: i tab qui sono uno per set, non due. */
.set-tab-bar { padding-top: 6px; }
.set-tab-bar .filt-tab { padding: 0.28rem 0; font-size: 0.72rem; }

/* In tab Punti la lista attacca direttamente sotto i tab (in Azioni c'è in mezzo la barra
   "Mostra"): un filo d'aria, altrimenti la prima card sembra incollata al tab del set. */
.set-tab-bar + .actions-container .actions-scroll > .point-box:first-child { margin-top: 6px; }

.rot-menu-bar {
  flex-shrink: 0;
  padding: 8px 8px 6px;
  border-bottom: 1px solid #e8ecf5;
  margin-bottom: 4px;
}

.rot-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  width: 100%;
  background: #e8edf7;
  border: 1.5px solid #b0bdd8;
  border-radius: 7px;
  color: #333;
  font-family: inherit;
  padding: 0.34rem 0.6rem;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
}
.rot-menu.open .rot-menu-head { border-radius: 7px 7px 0 0; }

/* Chiuso, il menù è l'unica cosa che dice cosa si sta guardando: la selezione per esteso
   ("Monza, Ricezione, Rot. 1"), troncata con i puntini se la tab è strettissima. */
.rot-menu-summary {
  font-size: 0.74rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rot-menu-arrow {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  color: #7d8ca8;
  transition: transform 0.18s ease;
  transform: rotate(-90deg);
}
.rot-menu.open .rot-menu-arrow { transform: rotate(0deg); }

.rot-menu-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: #fff;
  border: 1.5px solid #b0bdd8;
  border-top: none;
  border-radius: 0 0 7px 7px;
  padding: 0.45rem 0.5rem 0.55rem;
}
.rot-menu-label-spaced { margin-top: 0.4rem; }

/* Le colonne le imposta il JS (metà delle rotazioni disponibili): i pulsanti stanno sempre su
   due file, qualunque sia il numero di rotazioni con dei punti. */
.rot-menu-grid { display: grid; gap: 3px; }

/* Punti fatti/subiti/differenza della rotazione scelta: si legge come una tabella a tre
   colonne, senza esserlo (una <table> qui non aggiungerebbe niente). */
.rot-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 0.45rem;
  background: #fff;
  border: 1.5px solid #d0d7e8;
  border-radius: 7px;
  overflow: hidden;
}
.rot-summary-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  padding: 0.28rem 0.2rem;
  border-left: 1px solid #e8ecf5;
}
.rot-summary-cell:first-child { border-left: none; }
.rot-summary-head {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(0, 0, 0, 0.4);
}
.rot-summary-value { font-size: 0.95rem; font-weight: 700; color: #333; }
.rot-summary-pos { color: #2d8a4e; }
.rot-summary-neg { color: #c0392b; }

.filt-toggle { display: flex; gap: 3px; }
.filt-toggle-btn {
  flex: 1;
  border: 1.5px solid #d0d7e8;
  border-radius: 5px;
  background: #fff;
  color: #666;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: inherit;
  padding: 0.18rem 0.42rem;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.filt-toggle-btn:hover  { background: #f0f4ff; border-color: var(--navy); color: var(--navy); }
.filt-toggle-btn.active { background: var(--navy); border-color: var(--navy); color: #fff; }

/* =================================================================
   Tab Filtri — port di TabFilters.razor.css
   ================================================================= */

.filt-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.filt-tab-bar {
  display: flex;
  align-items: flex-end;
  border-bottom: 2px solid #e0e5f0;
  flex-shrink: 0;
  padding: 5px 8px 0;
  gap: 3px;
  background: #f0f3fb;
}
.filt-tab {
  flex: 1;
  padding: 0.3rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.03em;
  border: 1.5px solid transparent;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  color: #888;
  background: transparent;
  position: relative;
  bottom: -2px;
  white-space: nowrap;
}
.filt-tab:hover:not(.active) { background: #e4e9f4; color: #555; }
.filt-tab.active {
  background: #fff;
  color: var(--navy);
  border-color: #e0e5f0;
  border-bottom: 2px solid #fff;
  font-weight: 700;
}

.filt-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.filt-panel {
  flex: 1;
  min-height: 0;
  padding: 8px 8px 68px;   /* spazio per il pulsante "Applica filtri" appoggiato in fondo */
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}

.filt-section {
  display: flex;
  flex-direction: column;
  border: 1.5px solid #b0bdd8;
  border-radius: 7px;
  overflow: hidden;
  background: #fff;
  flex-shrink: 0;
}
.filt-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #e8edf7;
  border: none;
  font-family: inherit;
  cursor: pointer;
  padding: 0.32rem 0.6rem;
  transition: background 0.1s;
}
.filt-section-header:hover { background: #dde4f2; }
.filt-section-chevron { flex-shrink: 0; color: #a0afc8; transition: transform 0.18s ease; }
.filt-section-chevron.open { transform: rotate(180deg); }
.filt-section-body {
  padding: 0.45rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.filt-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #555;
}

.filt-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.filt-chip {
  border: 1.5px solid #d0d7e8;
  border-radius: 5px;
  background: #fff;
  color: #666;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: inherit;
  padding: 0.18rem 0.42rem;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.filt-chip:hover  { background: #f0f4ff; border-color: var(--navy); color: var(--navy); }
.filt-chip.active { background: var(--navy); border-color: var(--navy); color: #fff; }

.filt-warning {
  font-size: 0.65rem;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  line-height: 1.4;
}

.filt-player-team-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #777;
  margin-top: 0.15rem;
}

.filt-apply-btn {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 0.5rem 0.9rem 0.5rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28);
  z-index: 2;
  transition: background 0.15s;
}
.filt-apply-btn:hover { background: var(--navy-hover); }
.filt-apply-badge {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 0.15rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 700;
}

/* ── Risultati ── */

.filt-results-head {
  flex-shrink: 0;
  padding: 0.5rem 0.7rem 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #555;
}
.filt-res-badge {
  margin-left: 0.4em;
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.65;
  text-transform: none;
  letter-spacing: 0;
}

.filt-page-results {
  overflow-y: auto;
  padding: 2px 8px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}

.filt-event-box {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  width: 100%;
  background: #fff;
  border: 1.5px solid #e0e5f0;
  border-radius: 8px;
  padding: 0.42rem 0.7rem;
  margin-bottom: 0.35rem;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.12s, background 0.12s;
  box-sizing: border-box;
}
.filt-event-box:hover { border-color: var(--navy); background: #f0f4ff; }
.filt-event-box-active {
  border-color: var(--blue);
  background: rgba(59, 130, 246, 0.07);
  box-shadow: inset 3px 0 0 var(--blue);
}

.filt-event-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.filt-event-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.filt-event-type   { font-size: 0.82rem; font-weight: 700; color: var(--navy); }
.filt-event-score  { font-size: 0.82rem; font-weight: 700; color: #444; }
.filt-event-ctx    { font-size: 0.65rem; color: #999; font-weight: 500; }
.filt-event-player { font-size: 0.65rem; color: #8b93a7; font-weight: 600; }

.filt-empty {
  font-size: 0.82rem;
  color: #bbb;
  text-align: center;
  margin: 2rem 0;
  font-style: italic;
}

/* =================================================================
   Statistiche: sotto-tab per rotazione / fondamentale / giocatore
   ================================================================= */

.mstats-fund-stack,
.mstats-player-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mstats-rot-points {
  display: flex;
  margin: 0 0 1rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.mstats-rot-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.65rem 1rem;
}
.mstats-rot-stat + .mstats-rot-stat { border-left: 1px solid rgba(0, 0, 0, 0.08); }
.mstats-rot-stat-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.45);
}
.mstats-rot-stat-values { display: flex; gap: 0.85rem; }
.mstats-rot-won,
.mstats-rot-lost { font-size: 1rem; font-weight: 800; }
.mstats-rot-won  { color: #2d8a4e; }
.mstats-rot-lost { color: #c0392b; }

/* ── Tabella "Per Fondamentale" ── */

.mstb-block { display: flex; flex-direction: column; gap: 0.6rem; }
/* Stesso titolo di "Set 1"/"Rotazione 2" (.mstats-team-heading) e dei blocchi "per giocatore"
   (.mstb-pheading): grandezza e carattere uguali in tutte le tab, come nell'app. */
.mstb-heading {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1a1a2e;
}
/* Riga dei gruppi sopra le intestazioni ("Attacco dopo ricezione" / "Attacco dopo difesa"):
   classe diversa da .mstb-th-group, che è la riga Giocatore/Battuta/... della tabella completa e
   ha un altro colore anche nell'app (CSS scoped di MatchStatsFundTable). */
.mstb-th-fgroup {
  background: #e4ebfb;
  color: rgb(5, 39, 103);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.5rem;
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.mstb-th-group-empty { background: transparent; border: none; }
.mstb-th-group-empty.mstb-sticky { background: #fff; }
.mstb-table.mstb-table-fund { min-width: unset; }
.mstb-table-fund .mstb-col-stat { width: 74px; }

.mstb-charts-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  padding-top: 0.75rem;
}

/* ── Blocco "Per Giocatore" ── */

.mstb-pblock {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.9rem 1rem 1.1rem;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
  background: #fff;
}
.mstb-pheading {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1a1a2e;
}

.mstb-ptable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  table-layout: fixed;
}
.mstb-pcol-label { width: 120px; }

.mstb-pth-label,
.mstb-pth {
  background: #f0f4ff;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.mstb-pth-label {
  color: rgba(0, 0, 0, 0.45);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.mstb-pth {
  color: rgba(0, 0, 0, 0.4);
  font-size: 0.65rem;
  letter-spacing: 0.03em;
  padding: 0.3rem 0.4rem;
}
.mstb-pth-group {
  background: #e4ebfb;
  color: rgb(5, 39, 103);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.3rem 0.4rem;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.mstb-ptd {
  padding: 0.35rem 0.4rem;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: #1a1a2e;
  font-variant-numeric: tabular-nums;
}
.mstb-peff { font-weight: 700; }

/* ── Istogrammi (port di HistogramChart.razor.css) ── */

.hchart {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 0 1 calc(33.333% - 1rem);
  max-width: calc(33.333% - 1rem);
  min-width: 240px;
}
.hchart-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(0, 0, 0, 0.5);
  text-align: center;
  margin: 0.5rem 0;
}
.hchart-count {
  margin-left: 0.35em;
  font-size: 0.62rem;
  font-weight: 600;
  opacity: 0.65;
  text-transform: none;
  letter-spacing: 0;
}
.hchart-empty {
  font-size: 0.72rem;
  color: rgba(0, 0, 0, 0.35);
  font-style: italic;
  margin: 0;
}
.hchart-plot { display: flex; align-items: stretch; gap: 0.4rem; }
.hchart-yaxis { position: relative; width: 1.6rem; height: 180px; flex-shrink: 0; }
.hchart-ytick {
  position: absolute;
  left: 0;
  right: 0;
  transform: translateY(50%);
  text-align: right;
  font-size: 0.58rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.42);
  white-space: nowrap;
}
.hchart-ytick:first-child { transform: translateY(0); }
.hchart-bars-wrap { position: relative; flex: 1; height: 180px; min-width: 0; }
.hchart-gridline {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
}
.hchart-bars {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 100%;
  width: 100%;
  gap: 2px;
}
.hchart-bar-col { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 0; }
.hchart-bar {
  width: 100%;
  min-height: 2px;
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
  border-radius: 2px 2px 0 0;
}
/* Il bordo sottile distingue il segmento "in gioco" (bianco) dallo sfondo bianco della card. */
.hchart-bar-seg { width: 100%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
.hchart-axis { position: relative; height: 12px; margin-left: calc(1.6rem + 0.4rem); margin-top: 2px; }
.hchart-axis-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 0.52rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.42);
  white-space: nowrap;
}
.hchart-axis-unit {
  margin-left: calc(1.6rem + 0.4rem);
  margin-top: 0.2rem;
  text-align: center;
  font-size: 0.6rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.4);
}
.hchart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.15rem 0.7rem;
  margin-top: 0.5rem;
}
.hchart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.62rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}
.hchart-legend-swatch {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
}

/* ── Dialogo "vuoi visualizzare queste azioni?" ── */

.mstats-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}
.mstats-dialog {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 1.5rem 1.75rem 1.2rem;
  max-width: 360px;
  width: 90%;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.mstats-dialog-q {
  color: #1a1a2e;
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 1.2rem;
  text-align: center;
}
.mstats-dialog-q strong { color: #234a9e; }
.mstats-dialog-btns { display: flex; gap: 0.5rem; }
.mstats-dbtn {
  flex: 1;
  border: none;
  border-radius: 7px;
  padding: 0.45rem 0;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.mstats-cancel       { background: rgba(0, 0, 0, 0.06); color: rgba(0, 0, 0, 0.6); }
.mstats-cancel:hover { background: rgba(0, 0, 0, 0.1); color: #1a1a2e; }
.mstats-confirm       { background: #3b6fd4; color: #fff; }
.mstats-confirm:hover { background: #4d80e8; }


/* ── Celle cliccabili delle statistiche ──────────────────────────── */

/* Un numero che porta alle azioni si comporta come tale: mano e cella evidenziata al passaggio
   del mouse, come in MatchStatsFullTable nell'app. */
.mstb-link,
.mstb-ptd.mstb-link { cursor: pointer; transition: background 0.1s; }
.mstb-link:hover,
.mstb-ptd.mstb-link:hover { background: rgba(59, 130, 246, 0.12); }
.mstb-total-cell.mstb-link:hover { background: rgba(59, 130, 246, 0.16); }

/* ── Filtri: catena delle azioni aggiuntive ──────────────────────── */

.filt-chain {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
}
.filt-chain-btn {
  border: 1.5px solid #d0d7e8;
  border-radius: 5px;
  background: #fff;
  color: #666;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: inherit;
  padding: 0.22rem 0.45rem;
  cursor: pointer;
  text-align: center;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.filt-chain-btn:hover { background: #f0f4ff; border-color: var(--navy); color: var(--navy); }
.filt-chain-active { background: var(--navy); border-color: var(--navy); color: #fff; }
/* L'azione filtrata non è un pulsante: è il punto fisso della catena. */
.filt-chain-current {
  background: #e8edf7;
  border-style: dashed;
  color: #445;
  cursor: default;
}
.filt-chain-arrow {
  width: 10px;
  height: 12px;
  align-self: center;
  color: #a0afc8;
}

/* ── Filtri: istogramma con il cursore a due maniglie ────────────────────────── */

.filt-data-panel {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-bottom: 0.4rem;
}
/* Nella sidebar il grafico è solo, non in fila per tre come nelle statistiche. */
.filt-data-panel .hchart { flex: 1 1 auto; max-width: none; min-width: 0; }
.filt-data-panel .hchart-yaxis,
.filt-data-panel .hchart-bars-wrap { height: 110px; }

/* Le barre che il cursore esclude restano visibili ma smorzate. */
.hchart-bar-col-out { opacity: 0.28; }

/* Il cursore sta sotto le barre e deve allinearsi a loro: stesso rientro dell'asse X, che salta
   la colonna dei numeri a sinistra del grafico (.hchart-axis usa lo stesso calc). */
.filt-range {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: calc(1.6rem + 0.4rem);
}

/* Un solo cursore con due maniglie: due <input type="range"> sovrapposti e trasparenti, di cui
   e' cliccabile solo il pallino (pointer-events sul thumb) — stessa costruzione di
   .fsh-slider-wrap in FilterActionData.razor.css nell'app. */
.filt-range-slider { position: relative; height: 20px; }

.filt-range-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  background: #d0d7e8;
  border-radius: 2px;
  transform: translateY(-50%);
}

.filt-range-fill {
  position: absolute;
  top: 50%;
  height: 4px;
  background: var(--navy);
  border-radius: 2px;
  transform: translateY(-50%);
}

.filt-range-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  margin: 0;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.filt-range-input:focus { outline: none; }

.filt-range-input::-webkit-slider-runnable-track { background: transparent; }
.filt-range-input::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--navy);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.filt-range-input::-moz-range-track { background: transparent; }
.filt-range-input::-moz-range-thumb {
  pointer-events: auto;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--navy);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.filt-range-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.65rem;
  font-weight: 600;
  color: #777;
}
.filt-range-value { font-size: 0.72rem; font-weight: 700; color: var(--navy); }
.filt-range-count { font-size: 0.65rem; font-weight: 600; color: #888; }

.filt-range-reset {
  margin-left: auto;
  border: 1.5px solid #d0d7e8;
  border-radius: 5px;
  background: #fff;
  color: #666;
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.12rem 0.45rem;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.filt-range-reset:hover { background: #f0f4ff; border-color: var(--navy); color: var(--navy); }

.filt-seconds-note {
  font-size: 0.62rem;
  color: #888;
  line-height: 1.4;
  margin: 0 0 0.3rem;
}

/* ── Filtri: azioni che compongono la clip ───────────────────────── */

/* Elenco sotto la card del risultato, agganciato visivamente a essa da una barretta a sinistra:
   stesso pattern di FiltriClipActions nell'app (qui in sola lettura). */
.mact-list {
  margin: -0.15rem 0 0.5rem 10px;
  padding-left: 0.5rem;
  border-left: 2px solid #e0e5f0;
}
.mact-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.4rem;
  row-gap: 0.1rem;
  margin-bottom: 0.4rem;
  padding: 0.1rem 0.2rem;
}
.mact-row:last-child { margin-bottom: 0; }
/* Sotto questa soglia l'etichetta non si stringe oltre: il "Condividi" va a
   capo, allineato a destra, invece di ridurre "Ricezione · 7 Bianchi" a tre
   puntini. Senza un minimo l'etichetta si schiaccerebbe a zero e il pulsante
   resterebbe comunque in riga. */
/* Come nella tab Azioni: l'etichetta (con la misura) su una riga, il pulsante
   a capo su tutta la colonna. */
.mact-row-label { flex: 1 1 auto; }
.mact-row .event-share-btn { flex: 1 0 100%; }
/* L'etichetta si prende lo spazio libero, cosi' misura e "Condividi" restano
   in fondo a destra invece di sparpagliarsi con space-between. */
.mact-row-label {
  flex: 1 1 auto;
  font-size: 0.7rem;
  color: #555;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mact-metric-value {
  font-size: 0.67rem;
  color: #8b93a7;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Filtri: campo con le direzioni ──────────────────────────────── */

.filt-court-chart-wrap {
  padding: 6px 2px 10px;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.filt-chart-title {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #666;
  display: flex;
  justify-content: space-between;
  gap: 0.4rem;
}
.filt-chart-count { font-weight: 600; text-transform: none; letter-spacing: 0; color: #999; }

/* Stesso campo dell'app (.filt-court-svg in TabFilters.razor.css): fondo blu notte, non verde —
   le frecce sono colorate per esito e il bianco di "in gioco" deve restare leggibile. */
.filt-court-svg {
  display: block;
  width: 70%;
  height: auto;
  margin: 0 auto;
  background: #131d36;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.court-arrow-group { cursor: pointer; }
.court-arrow-group:hover line   { stroke-width: 0.21; opacity: 1; }
.court-arrow-group:hover polygon { opacity: 1; }

/* ── Risultati: riga della clip e clip in riproduzione ───────────── */

.filt-event-row { display: flex; flex-direction: column; }
.filt-event-row .filt-event-box { margin-bottom: 0.2rem; }

@keyframes filt-pulse {
  0%   { background: rgba(59, 130, 246, 0.22); }
  100% { background: rgba(59, 130, 246, 0.07); }
}
/* La clip che si sta guardando nel giro delle clip filtrate: stessa evidenziazione della card
   punto in riproduzione, così si riconosce a colpo d'occhio mentre la lista scorre da sola. */
.filt-event-playing .filt-event-box {
  border-color: var(--blue);
  background: rgba(59, 130, 246, 0.07);
  box-shadow: inset 3px 0 0 var(--blue), 0 1px 3px rgba(0, 0, 0, 0.04);
  animation: filt-pulse 0.35s ease-out;
}
.filt-event-playing .mact-list { border-left-color: var(--blue); }

/* ── Traiettorie palla (port di .filt-traj-* in TabFilters.razor.css) ── */

/* Etichetta di sezione, la stessa dell'app (.filt-chain-chart-label). */
.filt-chain-chart-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #666;
}

.filt-traj-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 8px 6px;
}

.filt-traj-opacity-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.26rem 0.5rem;
  background: #f0f3fb;
  border: 1.5px solid #e0e5f0;
  border-radius: 6px;
  margin-bottom: 4px;
}
.filt-traj-opacity-row .filt-chain-chart-label { flex-shrink: 0; }
.filt-traj-opacity-slider {
  flex: 1;
  min-width: 0;
  accent-color: rgb(5, 39, 103);
}

.filt-traj-type-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0.3rem 0.5rem;
  background: #f0f3fb;
  border: 1.5px solid #e0e5f0;
  border-radius: 6px;
  margin-bottom: 4px;
}

.filt-traj-mode-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.filt-traj-mode-btn {
  width: 100%;
  border: 1.5px solid #d0d7e8;
  border-radius: 5px;
  background: #fff;
  color: #555;
  font-size: 0.68rem;
  font-weight: 600;
  font-family: inherit;
  padding: 0.18rem 0.5rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.filt-traj-mode-btn:hover  { background: #f0f4ff; border-color: rgb(5, 39, 103); color: rgb(5, 39, 103); }
.filt-traj-mode-btn.active { background: rgb(5, 39, 103); border-color: rgb(5, 39, 103); color: #fff; }

/* La tendina "Clips" e quella "Grafici" stanno nel flusso della colonna, non nella lista che
   scorre: rientrano come le card. */
.filt-container > .sidebar-set-toggle {
  width: auto;
  margin: 0.45rem 8px 0.35rem;
  flex-shrink: 0;
}

/* ── Schermi piccoli ─────────────────────────────────────────────── */

/* Il viewer resta sempre affiancato (video a sinistra, punti/azioni a destra): impilarli
   renderebbe il video una striscia alta pochi centimetri e la lista illeggibile. Su schermo
   piccolo si stringe la tab e si asciuga la banda blu. */
@media (max-width: 900px), (max-height: 560px) {
  .viewer-top { gap: 0.4rem; padding: 0 0.6rem; height: 48px; }
  .viewer-exit, .viewer-edit-btn, .viewer-full-btn, .vmt-btn { font-size: 0.78rem; padding: 0.25rem 0.5rem; }
  .viewer-speed-label { display: none; }
  .vspeed-btn { min-width: 28px; font-size: 0.74rem; padding: 0.2rem 0.3rem; }
  .vmt-btn svg { display: none; }
  .viewer-sidebar { width: 210px; }
  .point-box { height: 72px; padding: 0.4rem 0.6rem; }
  .point-num { font-size: 0.62rem; }
  .point-team-name { font-size: 0.7rem; }
  .point-team-score { font-size: 0.85rem; }
  .mstats-header-row { padding: 0.6rem 0.9rem 0; }
  .mstats-scroll { padding: 0.6rem 0.9rem 1rem; }
  .mstats-sub-tabs { margin-top: 0.5rem; padding: 0.4rem 0.9rem 0; }
  .mstats-sub-tab { padding: 0.45rem 0.8rem; font-size: 0.76rem; }
  .mstats-team-heading,
  .mstb-heading,
  .mstb-pheading { font-size: 0.9rem; }
}

/* ── Telefono in verticale ───────────────────────────────────────── */

/* Il viewer in verticale non si apre: si chiede di girare il telefono. La strada precedente era
   ruotare l'interfaccia di 90° via CSS, ma su un telefono vero la trasformazione su un elemento
   fisso lasciava lo schermo bianco a ogni rotazione — e una pagina bianca è peggio di una riga
   che dice cosa fare. Senza trasformazioni non c'è niente che il browser possa sbagliare a
   ridisegnare. */
.vw-rotate-hint {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 600;
  background: var(--navy-dark);
  color: #fff;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem 1.5rem;
  text-align: center;
}
.viewer-overlay.vw-portrait .vw-rotate-hint { display: flex; }

.vw-rotate-hint svg {
  width: 56px;
  height: 56px;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 0.4rem;
}
.vw-rotate-title { margin: 0; font-size: 1.15rem; font-weight: 700; }
.vw-rotate-sub {
  margin: 0;
  max-width: 22rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.7);
}

@media (orientation: portrait) and (pointer: coarse) {
  /* Il tooltip delle statistiche è agganciato a body, fuori dall'overlay: ruotarlo con lui non
     si può, quindi sul telefono in verticale semplicemente non compare (le intestazioni restano
     leggibili, e su tocco un tooltip "al passaggio del mouse" non avrebbe senso comunque). */
  .stat-tip-panel { display: none !important; }
}


/* ── Montaggi: card delle clip, note dei pacchetti e grafici ─────── */

/* La card di una clip ha piu' righe di quella di un punto (etichetta + punteggio, numero e
   contesto, eventuale commento): l'altezza fissa di .point-box qui e' un minimo. */
.point-box.clip-box {
  height: auto;
  min-height: 82px;
  gap: 0.15rem;
}
.clip-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
  min-width: 0;
}
.clip-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clip-sub {
  font-size: 0.72rem;
  font-weight: 600;
  color: #7a8faa;
  flex-shrink: 0;
}
.clip-ctx {
  font-size: 0.68rem;
  color: #aaa;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clip-comment {
  font-size: 0.72rem;
  color: #556;
  font-style: italic;
  padding-left: 0.5rem;
  border-left: 2.5px solid rgba(59, 130, 246, 0.5);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.35;
}

/* Nome del pacchetto con la sua nota sotto (come il toggle dei pacchetti dell'app). */
.set-toggle-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; text-align: left; }
.set-toggle-note {
  font-size: 0.64rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: #7a8faa;
  font-style: italic;
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
}

/* Tab Grafici: un campo per pacchetto, stesso disegno del grafico direzioni dei filtri. */
.graph-block { padding: 2px 0 10px; }
.graph-court-svg {
  display: block;
  width: 76%;
  height: auto;
  margin: 4px auto 6px;
  background: #131d36;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.graph-empty { font-size: 0.72rem; color: #999; text-align: center; margin: 0.6rem 0; }
.graph-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem 0.7rem;
  font-size: 0.66rem;
  color: #667;
  padding: 0 4px;
}
.graph-legend-action { flex-basis: 100%; text-align: center; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #888; }
.graph-legend-item { display: inline-flex; align-items: center; gap: 0.3rem; }
.graph-legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.graph-comment {
  font-size: 0.72rem;
  color: #667;
  font-style: italic;
  margin: 0.5rem 4px 0;
  padding: 3px 8px;
  border-left: 2.5px solid rgba(59, 130, 246, 0.45);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.4;
}

/* [hidden] perde contro il display esplicito di queste classi: serve la regola. */
.vmt-btn[hidden],
.viewer-edit-btn[hidden] { display: none; }

/* ── Montaggi da telefono: elenco dei pacchetti e pulsante "Indietro" ── */

.phone-pkg-list {
  height: 100%;
  overflow-y: auto;
  padding: 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.phone-pkg-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 1.5px solid #e0e5f0;
  border-radius: 10px;
  background: #fff;
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.phone-pkg-btn:active { border-color: var(--navy); background: #f0f4ff; }
.phone-pkg-btn:disabled { opacity: 0.45; cursor: default; }
.phone-pkg-text { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 1px; }
.phone-pkg-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phone-pkg-note { font-size: 0.66rem; color: #7a8faa; font-style: italic; line-height: 1.3; }
.phone-pkg-count { font-size: 0.7rem; color: #888; font-weight: 600; flex-shrink: 0; }
.phone-pkg-chevron { width: 12px; height: 12px; flex-shrink: 0; color: #a0afc8; }

.phone-back-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 6px 8px;
  flex-shrink: 0;
}
.phone-back-btn {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border: 1.5px solid #b0bdd8;
  border-radius: 7px;
  background: #e8edf7;
  color: #555;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: inherit;
  padding: 0.28rem 0.6rem;
  cursor: pointer;
  flex-shrink: 0;
}
.phone-back-btn svg { width: 11px; height: 11px; }
.phone-back-btn:active { background: #dde4f2; }
.phone-back-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Il campo ha larghezza e altezza in pixel dal JS (fitGraphs): niente percentuali. */
.graph-court-svg { max-width: 100%; }

/* ── Montaggi: pannello delle traiettorie sopra il video ─────────── */

.vw-traj-panel {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 6;
  width: min(300px, calc(100% - 20px));
  max-height: calc(100% - 20px);
  overflow-y: auto;
  box-sizing: border-box;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
.vw-traj-panel[hidden] { display: none; }

/* ── "Dettagli" di una schiacciata o di una battuta ──────────────── */

/* Il pulsante accanto all'azione, nella lista azioni e sotto le clip di un montaggio. Resta
   discreto finché non lo si sfiora: la riga è già piena di etichetta, giocatore e misura. */
.event-det-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.4rem;
  border: 1px solid #d7dbe4;
  border-radius: 5px;
  background: #fff;
  color: #8b93a7;
  font-family: inherit;
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.event-det-btn:hover {
  color: var(--blue);
  border-color: var(--blue);
}
.event-det-btn.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

/* Montaggi: le azioni di una clip, in un blocco sotto la sua card e non dentro — è
   MontageActionsList nell'app. Non sono selezionabili: rotellina e dito navigano fra le clip. */
.clip-actions {
  margin: 0 0 0.35rem 0.9rem;
  padding-left: 0.5rem;
  border-left: 2px solid #e6e9f0;
}
.clip-action-row {
  display: flex;
  flex-wrap: wrap;            /* come .event-box: i pulsanti vanno a capo insieme */
  align-items: center;
  column-gap: 0.3rem;
  row-gap: 0.1rem;
  margin-bottom: 0.4rem;
  padding: 0.12rem 0.25rem;
}
.clip-action-row:last-child { margin-bottom: 0; }

/* Le misure dell'azione al posto della lista, mentre il video gira al rallentatore. Stesse
   classi di ActionDetailPanel.razor.css nell'app: è lo stesso pannello, portato qui. Prima
   stava sopra il video come riquadro semitrasparente — copriva il fotogramma proprio mentre lo
   si stava guardando, e aveva spazio per tre righe. */

.adp-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: #fff;
}

.adp-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid #e6e9f0;
  flex-shrink: 0;
}

.adp-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid #d7dbe4;
  border-radius: 6px;
  background: #fff;
  color: #6b7280;
  cursor: pointer;
}
.adp-back:hover { color: var(--blue); border-color: var(--blue); }
.adp-back svg { width: 14px; height: 14px; }

.adp-title-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.adp-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #2b3040;
}
.adp-subtitle {
  font-size: 0.7rem;
  color: #a4abbb;
}

.adp-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.5rem 0.7rem 0.7rem;
}

.adp-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.4rem 0.1rem;
  border-bottom: 1px solid #f1f3f7;
}
.adp-label {
  flex: 1;
  min-width: 0;
  font-size: 0.78rem;
  color: #6b7280;
}
.adp-value {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--blue);
  white-space: nowrap;
}

/* Una misura che non è stata calcolata resta in elenco, ma spenta: dice che c'è e che manca,
   che è l'informazione utile. */
.adp-row-missing .adp-value {
  color: #c3c8d4;
  font-weight: 600;
}

.adp-note {
  margin: 0.7rem 0 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #a4abbb;
}

.adp-footer {
  flex-shrink: 0;
  padding: 0.55rem 0.7rem;
  border-top: 1px solid #e6e9f0;
}

.adp-close-btn {
  width: 100%;
  padding: 0.4rem;
  border: 1px solid #d7dbe4;
  border-radius: 6px;
  background: #fff;
  color: #4b5563;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.adp-close-btn:hover { border-color: var(--blue); color: var(--blue); }

/* Su schermi piccoli la colonna è larga ~210px: stessa soglia del resto del blocco. */
@media (max-width: 900px), (max-height: 560px) {
  .adp-header  { padding: 0.45rem 0.5rem; }
  .adp-body    { padding: 0.4rem 0.5rem 0.5rem; }
  .adp-footer  { padding: 0.45rem 0.5rem; }
  .adp-title   { font-size: 0.82rem; }
  .adp-subtitle { font-size: 0.64rem; }
  .adp-label   { font-size: 0.7rem; }
  .adp-value   { font-size: 0.82rem; }
  .adp-note    { font-size: 0.66rem; }
}

/* ── Condividere una clip (pulsanti e dialogo, prefisso vsh-*) ───── */

/* I pulsanti in coda a una riga azione. Con "Dettagli" (le schiacciate e le
   battute) vanno A CAPO tutti e due, affiancati: tipo, giocatore e misura
   riempiono gia' la riga, e due pulsanti in fila la facevano troncare. Senza
   "Dettagli" resta il solo "Condividi", spinto a destra sulla riga stessa.
   `flex: 1 0 100%` e' quello che manda a capo: una riga intera di flex-basis
   non sta accanto a nient'altro. */
.event-box { flex-wrap: wrap; }
/* `flex: 1 0 100%` manda a capo: una riga intera di flex-basis non puo' stare
   accanto a nient'altro. I pulsanti dentro si dividono lo spazio in parti
   uguali, quindi "Dettagli" e "Condividi" fanno meta' colonna ciascuno e
   "Condividi" da solo se la prende tutta. */
.event-acts {
  flex: 1 0 100%;
  display: flex;
  align-items: stretch;
  gap: 0.3rem;
}
.event-acts > * { flex: 1 1 0; }

/* Il pulsante porta la scritta, non il solo glifo: un'icona di condivisione da
   sola, in una lista fitta, non la legge nessuno. Stessa forma di "Dettagli",
   che spesso gli sta accanto. */
.event-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid #d7dbe4;
  border-radius: 5px;
  background: #fff;
  color: #8b93a7;
  font-family: inherit;
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.event-share-btn svg { width: 11px; height: 11px; }
.event-share-btn:hover { color: var(--blue); border-color: var(--blue); }

.vsh-backdrop {
  position: absolute;
  inset: 0;
  z-index: 700;              /* sopra la banda blu, il player e la sidebar */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(5, 15, 35, 0.55);
}
.vsh-backdrop[hidden] { display: none; }

.vsh-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 100%;
  overflow-y: auto;
  padding: 1.25rem 1.4rem 1.1rem;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

.vsh-x {
  position: absolute;
  top: 6px;
  right: 10px;
  border: 0;
  background: none;
  color: #9aa3b4;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}
.vsh-x:hover { color: var(--text); }

.vsh-kicker {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9aa3b4;
}
.vsh-title {
  margin: 0.15rem 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  padding-right: 1.5rem;
}
.vsh-sub {
  margin: 0.1rem 0 0.9rem;
  font-size: 0.8rem;
  color: var(--grey-600);
}

.vsh-link { display: flex; gap: 0.4rem; }
.vsh-input {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  background: var(--grey-50);
  font-family: inherit;
  font-size: 0.78rem;
  color: var(--grey-600);
}
.vsh-copy {
  flex-shrink: 0;
  padding: 0.45rem 0.85rem;
  border: 0;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
.vsh-copy:hover { background: var(--navy-hover); }

/* Il video vero, ritagliato dal server di casa. Sta in cima al dialogo perché è quello che
   l'utente vuole quasi sempre: un file si mette in una storia, in un post, in una chat — un
   link no. Compare solo se la condivisione è collegata al server (vedi clipSource in
   video.js); altrimenti il dialogo resta quello di prima, col link e la modalità storia. */
.vsh-video {
  margin-top: 0.6rem;
  padding: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
}
.vsh-prev {
  display: block;
  width: 100%;
  border-radius: 7px;
  background: #000;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.vsh-video-act { display: flex; gap: 0.4rem; margin-top: 0.5rem; }
.vsh-video-act .vsh-native { margin-top: 0; flex: 1; }
.vsh-dl {
  display: flex;
  align-items: center;
  padding: 0.6rem 0.9rem;
  border-radius: 9px;
  background: var(--navy);
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
}
.vsh-dl:hover { background: var(--navy-hover); }

/* Attesa ed errore: la stessa altezza del riquadro col video, così il dialogo non salta
   quando la clip arriva. */
.vsh-video-wait,
.vsh-video-off {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 92px;
  text-align: center;
}
.vsh-video-wait p,
.vsh-video-off p { margin: 0; font-size: 0.82rem; color: #8b93a7; }
.vsh-spin {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: vsh-spin 0.8s linear infinite;
}
@keyframes vsh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .vsh-spin { animation-duration: 2.4s; }
}
.vsh-retry {
  padding: 0.4rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: transparent;
  color: #e7ebf3;
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
.vsh-retry:hover { background: rgba(255, 255, 255, 0.07); }

/* La clip come video in una storia: è quello che si vuole quasi sempre, quindi è il pulsante
   che si vede per primo. I colori sono quelli del gradiente di Instagram, che e' un richiamo
   d'uso e non il loro marchio (nessun logo, nessun nome scritto nel pulsante). */
.vsh-story {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.6rem;
  padding: 0.62rem;
  border-radius: 9px;
  background: linear-gradient(135deg, #d6249f 0%, #fd5949 55%, #fdc468 100%);
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
}
.vsh-story:hover { filter: brightness(1.08); }
.vsh-story svg { width: 16px; height: 16px; }
.vsh-story-note {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #8b93a7;
}

/* Lo share sheet di sistema: è la strada per Instagram e per tutto il resto, quindi è il
   pulsante grande. Compare solo dove navigator.share esiste, cioè in pratica sul telefono. */
.vsh-native {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  margin-top: 0.6rem;
  padding: 0.6rem;
  border: 0;
  border-radius: 9px;
  background: var(--blue);
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}
.vsh-native:hover { background: var(--blue-hover); }
.vsh-native svg { width: 15px; height: 15px; }

.vsh-apps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.7rem;
}
.vsh-app {
  flex: 1 1 auto;
  text-align: center;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.vsh-app:hover { border-color: var(--navy); background: var(--grey-50); }

.vsh-note {
  margin: 0.85rem 0 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #8b93a7;
}

/* Il viewer da telefono è in orizzontale, quindi basso: la scheda deve stare in 300px di
   altezza senza che i pulsanti finiscano fuori. */
@media (max-height: 460px) {
  .vsh-card { padding: 0.9rem 1rem 0.8rem; max-width: 460px; }
  .vsh-title { font-size: 0.95rem; }
  .vsh-sub { margin-bottom: 0.6rem; }
  .vsh-note { margin-top: 0.6rem; }
}

/* ── Editor della clip (vse-*) ────────────────────────────────────────────────
   La schermata a pagina intera che prepara il VIDEO da pubblicare: formato,
   ritaglio, zoom, rotazione, velocita', e il watermark impresso. Sostituisce il
   dialogo (.vsh-*) quando la condivisione porta `clip`, cioe' quando il file
   esiste davvero; senza `clip` resta il dialogo di prima, che puo' dare solo un
   link. Vedi docs/video-condivisi.md.

   Pagina **bianca**, come tutto il resto del sito: il viewer e' scuro perche'
   li' si guarda un video dentro una partita, ma questa e' una schermata di
   lavoro, e il nero attorno a un'anteprima nera non aiutava a distinguere
   niente. I comandi sono le solite schedine chiare con bordo `--grey-200` e
   testo `--navy`, la scelta attiva e' `--blue`, il pulsante principale e' blu
   come ogni altro CTA del sito.

   Due fasce: l'anteprima e la colonna dei comandi (che l'orientamento affianca
   o impila), con i due pulsanti in fondo alla colonna dei comandi — non in
   fondo allo schermo: sotto il video non e' la loro meta'. Niente scorre, da
   nessuna parte: ogni fetta ha una misura e il contenuto si adatta a quella. */
.vse {
  position: fixed;            /* non absolute: deve coprire la pagina, non il viewer */
  inset: 0;
  z-index: 900;               /* sopra il dialogo .vsh-backdrop (700) */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: contain;
  background: #fff;
  color: var(--text);

  /* Le misure dei comandi stanno qui, in un posto solo: col telefono coricato
     l'altezza e' poca e tutto si stringe, in piedi c'e' spazio e le scritte
     tornano leggibili da lontano. */
  --vse-icon: 22px;
  --vse-name: 0.8rem;
  --vse-val: 0.7rem;
  --vse-opt: 0.85rem;
  --vse-opticon: 34px;
  --vse-gap: 0.4rem;
}
@media (orientation: portrait) {
  .vse {
    --vse-icon: 26px;
    --vse-name: 1rem;
    --vse-val: 0.86rem;
    --vse-opt: 1.02rem;
    --vse-opticon: 56px;
    --vse-gap: 0.55rem;
  }
}
/* Schermo grande coricato (un PC, un tablet): non c'e' motivo di tenere le
   misure strette del telefono. */
@media (orientation: landscape) and (min-height: 640px) {
  .vse {
    --vse-icon: 28px;
    --vse-name: 0.94rem;
    --vse-val: 0.8rem;
    --vse-opt: 0.95rem;
    --vse-opticon: 46px;
    --vse-gap: 0.5rem;
  }
}
.vse[hidden] { display: none; }

/* Nessuna barra di scorrimento dentro l'editor: se qualcosa non ci sta e'
   un errore di misure, non qualcosa da far scorrere. */
.vse, .vse * { scrollbar-width: none; -ms-overflow-style: none; }
.vse::-webkit-scrollbar, .vse *::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Mentre l'editor e' aperto la pagina sotto non si muove: un trascinamento
   sul canvas che sfugge non deve scorrere il viewer. */
html.vse-lock, html.vse-lock body { overflow: hidden; }

/* Niente intestazione col titolo dell'azione: lo spazio serve al video, e chi
   ha premuto "Condividi" sa gia' che clip sta preparando. Resta la sola
   uscita, che galleggia sopra al palco, in alto a SINISTRA: e' il posto da cui
   si esce, e l'angolo in alto a destra su un telefono e' quello piu' lontano
   dal pollice. */
.vse-close {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--grey-200);
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(18, 29, 53, 0.12);
}
.vse-close:hover { background: var(--grey-50); }

/* Anteprima e comandi: l'asse lo decide l'orientamento. Schermo verticale ->
   video in alto e comandi sotto; schermo orizzontale -> video a sinistra e
   comandi a destra. Basta ribaltare `flex-direction`, perche' `flex-basis`
   vale sempre sull'asse principale: la stessa coppia diventa altezza in
   colonna e larghezza in riga, senza duplicare le misure in due media query. */
.vse-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.7rem 0.7rem 0;
  overflow: hidden;
}
@media (orientation: landscape) {
  .vse-body { flex-direction: row; padding: 0.7rem; }
}
.vse-stage {
  /* 0 1: la fetta non cresce oltre la sua quota, ma puo' restringersi, cosi'
     il `gap` fra le due fette viene assorbito in proporzione invece di far
     sforare il 100% e tagliare i comandi in fondo. */
  flex: 0 1 48%;
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (orientation: landscape) {
  .vse-stage { flex: 0 1 58%; }
}
/* Il canvas E' l'anteprima: quello che si vede qui e' esattamente quello che
   finisce nel file, watermark compreso, perche' il disegno e' lo stesso. */
.vse-canvas {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  background: #000;
  box-shadow: 0 8px 28px rgba(18, 29, 53, 0.28);
  cursor: grab;
  touch-action: none;         /* il trascinamento sposta l'inquadratura, non la pagina */
}
.vse-canvas.is-drag { cursor: grabbing; }
.vse-srcvid {                 /* il <video> sorgente: serve, ma non si guarda */
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Pausa/riproduci: serve a rivedere la clip quante volte si vuole mentre si
   regola l'inquadratura. Galleggia in basso sul palco, quindi sopra al video:
   li' il chiaro su chiaro non funziona e resta scuro. */
.vse-play {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(18, 29, 53, 0.78);
  color: #fff;
  font-family: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}
.vse-play:hover { background: var(--navy-mid); }
.vse-play svg { width: 13px; height: 13px; }

/* ── La colonna dei comandi ──────────────────────────────────────────────── */
/* Comandi e pulsanti stanno nella stessa fetta: appartengono ai comandi, non
   allo schermo, e sotto il video non hanno niente da fare. */
.vse-side {
  flex: 1 1 52%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media (orientation: landscape) {
  .vse-side { flex: 1 1 42%; }
}
.vse-panel {
  flex: 1 1 auto;
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

/* Sei celle: 3x2 col telefono in piedi, 2x3 quando e' coricato. Colonne e
   righe sono tutte `1fr`, quindi la griglia riempie la fetta qualunque sia la
   sua forma e le celle si ridimensionano con lo schermo invece di chiedere di
   scorrere. */
.vse-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--vse-gap);
  min-width: 0;
  min-height: 0;
}
@media (orientation: landscape) {
  .vse-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }
}
.vse-grid[hidden] { display: none; }

/* Le schedine dei comandi sono le card chiare del resto del sito: bordo
   `--grey-200`, testo `--navy`, e il valore corrente in blu sotto al nome. */
.vse-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-width: 0;
  min-height: 0;
  padding: 0.3rem;
  overflow: hidden;
  border: 1.5px solid var(--grey-200);
  border-radius: 10px;
  background: var(--grey-50);
  color: var(--navy);
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.vse-tile:hover { background: #fff; border-color: var(--navy); }
.vse-tile svg {
  width: var(--vse-icon);
  height: var(--vse-icon);
  color: var(--navy);
}
.vse-tile b {
  font-size: var(--vse-name);
  font-weight: 600;
  line-height: 1.15;
}
.vse-tile i {
  font-style: normal;
  font-size: var(--vse-val);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--blue-hover);
}

/* Il menu' aperto: la griglia sparisce e questo prende tutto il posto che
   avevano le sei schedine.

   Due righe di griglia, `auto` e `1fr`: il titolo sta SEMPRE in alto nel
   riquadro e il contenuto al centro di quello che resta. Prima erano due
   elementi in colonna con il contenuto centrato su tutta l'altezza: se il
   contenuto cresceva (telefono in piedi, dove le misure sono piu' grandi)
   sbordava da tutte e due le parti e la freccia dell'indietro finiva sopra il
   cursore dello zoom. Con una riga sua, il titolo non lo puo' raggiungere
   nessuno, e `overflow: hidden` sul corpo taglia invece di sovrapporre.

   `padding: 0` non e' per bellezza: il menu' e' un <section>, e in
   css/style.css "section" ha `padding: 80px 0` (le fasce della home). Quegli
   80 px in cima spingevano giu' il titolo e, dentro un pannello alto 185 px
   col telefono in piedi, si mangiavano tutto lo spazio: la riga `1fr` restava
   a zero e del menu' non si vedeva piu' niente. E' lo stesso inciampo che il
   viewer (anche lui un <section>) azzera in cima a questo file. */
.vse-pane {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--vse-gap);
}
.vse-pane[hidden] { display: none; }
.vse-pane-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
}
.vse-pane-title {
  margin: 0;
  font-size: calc(var(--vse-name) + 0.06rem);
  font-weight: 700;
  color: var(--navy);
}
.vse-back {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--grey-200);
  border-radius: 50%;
  background: var(--grey-50);
  color: var(--navy);
  cursor: pointer;
}
.vse-back:hover { background: #fff; border-color: var(--navy); }
.vse-back svg { width: 18px; height: 18px; }
.vse-pane-body {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--vse-gap);
  overflow: hidden;
}
.vse-tip {
  margin: 0;
  text-align: center;
  font-size: var(--vse-val);
  color: var(--grey-600);
}

/* Le opzioni di un menu' sono pulsanti TRASPARENTI con un'icona grande sopra
   l'etichetta: senza il riquadro pieno, a dire cosa fanno resta l'icona, e
   l'icona mostra la cosa invece di alludervi (il fotogramma nelle proporzioni
   vere col rapporto scritto dentro, il telefono che gira, la lancetta del
   tachimetro, il rettangolo dei pixel che si rimpicciolisce). Sei riquadri
   pieni uno accanto all'altro, tutti uguali, non dicevano niente di piu' del
   loro testo.

   Nei menu' di sola scelta la riga si allarga a riempire il pannello, cosi' le
   opzioni hanno la taglia delle celle da cui si e' arrivati. Il testo va a
   capo: prima veniva troncato con i puntini proprio dove la colonna e'
   stretta. */
.vse-row {
  flex: 0 1 auto;
  display: flex;
  gap: var(--vse-gap);
  min-height: 0;
}
.vse-row-fill { flex: 1 1 0; }
.vse-opt {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.5rem 0.4rem;
  border: 1.5px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--navy);
  font-size: var(--vse-opt);
  font-weight: 600;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  white-space: normal;        /* niente puntini: le scritte vanno a capo */
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.vse-opt svg {
  width: auto;
  height: var(--vse-opticon);
  max-width: 100%;
  flex: 0 0 auto;
}
.vse-opt:hover { background: var(--grey-50); }
/* Scelta attiva: bordo e testo blu su un velo dello stesso blu. Un riquadro
   pieno qui tornerebbe a pesare quanto i pulsanti di prima. */
.vse-opt.is-on {
  border-color: var(--blue);
  background: rgba(59, 130, 246, 0.09);
  color: var(--blue);
}
/* Gli azzeramenti non sono una scelta fra alternative ma un comando: li' il
   riquadro chiaro serve, se no sarebbero due parole in mezzo al vuoto. */
.vse-opt-plain {
  border-color: var(--grey-200);
  background: var(--grey-50);
}
.vse-opt-plain:hover { background: #fff; border-color: var(--navy); }

/* Zoom: la percentuale sta sopra al cursore, con la lente a sinistra. Di
   fianco si mangiava la larghezza proprio di quello che si deve trascinare. */
.vse-zoomval {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  color: var(--navy);
}
.vse-zoomval svg {
  width: calc(var(--vse-opt) + 0.3rem);
  height: calc(var(--vse-opt) + 0.3rem);
  color: var(--blue);
}
.vse-slide {
  display: flex;
  align-items: center;
  padding: 0.2rem 0.1rem;
}
.vse-slide input[type="range"] {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 1.9rem;
  padding: 0;
  accent-color: var(--blue);
}
.vse-val {
  font-size: calc(var(--vse-opt) + 0.22rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}

/* Ritaglio: una barra sola con due maniglie, invece di due cursori separati.
   Un intervallo si capisce guardandolo; due numeri slegati no. Dentro corre
   anche la testina di riproduzione, cosi' si vede a che punto e' la clip.

   .vse-trim prende il dito su tutta la sua altezza; .vse-trim-in e' la pista
   vera, rientrata di mezza maniglia per lato: a ritaglio tutto aperto le
   maniglie stanno su 0% e 100%, e senza quel margine meta' del loro corpo
   finirebbe oltre il bordo del pannello, tagliata. */
.vse-trim {
  position: relative;
  flex: 0 0 auto;
  height: 38px;
  padding: 0 10px;
  touch-action: none;
  cursor: pointer;
}
.vse-trim-in { position: relative; height: 100%; }
.vse-trim-track {
  position: absolute;
  top: 17px;
  left: 0;
  right: 0;
  height: 5px;
  border-radius: 999px;
  background: var(--grey-200);
}
.vse-trim-sel {
  position: absolute;
  top: 17px;
  height: 5px;
  border-radius: 999px;
  background: var(--blue);
}
.vse-trim-head {
  position: absolute;
  top: 10px;
  width: 2px;
  height: 19px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--navy);
  pointer-events: none;
}
.vse-trim-h {
  position: absolute;
  top: 7px;
  width: 18px;
  height: 24px;
  margin-left: -9px;
  border: 2px solid var(--navy);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(18, 29, 53, 0.18);
  cursor: ew-resize;
}
.vse-trim-h:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.vse-trim-lab {
  display: flex;
  justify-content: space-between;
  padding: 0 2px;
  font-size: var(--vse-val);
  font-variant-numeric: tabular-nums;
  color: var(--grey-600);
}

/* ── I due pulsanti in fondo ─────────────────────────────────────────────── */
/* "Scarica" e "Condividi", e nient'altro: dove mandarlo lo chiede gia' il
   foglio di sistema del telefono, con dentro le app davvero installate.
   Premuto uno dei due, la barra prende il loro posto e segue la preparazione
   (in tempo reale, quindi l'attesa e' quanto dura la clip); finita quella,
   l'azione riparte da sola. */
.vse-foot {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.5rem 0.2rem;
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--grey-200);
}
@media (orientation: landscape) {
  .vse-foot { padding-bottom: 0.5rem; }
}
.vse-meta {
  margin: 0;
  text-align: center;
  font-size: var(--vse-val);
  font-variant-numeric: tabular-nums;
  color: var(--grey-600);
}
.vse-meta:empty { display: none; }
.vse-meta.is-warn { color: var(--orange-hover); font-weight: 600; }
.vse-acts {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 0.5rem;
}
.vse-acts[hidden] { display: none; }
.vse-act {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 46px;
  padding: 0.55rem 0.5rem;
  border-radius: 10px;
  font-size: var(--vse-opt);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
  /* La pressione lunga su "Condividi" ha un uso (vedi edLongPressSetup):
     niente selezione del testo né menù di iOS a metà gesto. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.vse-act svg { width: 17px; height: 17px; }
.vse-act-1 {                 /* l'azione principale, come ogni CTA del sito */
  border: 0;
  background: var(--blue);
  color: #fff;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
}
.vse-act-1:hover { background: var(--blue-hover); box-shadow: 0 6px 18px rgba(59, 130, 246, 0.45); }
.vse-act-2 {
  border: 1.5px solid var(--grey-200);
  background: var(--grey-50);
  color: var(--navy);
}
.vse-act-2:hover { background: #fff; border-color: var(--navy); }
.vse-prog {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 46px;
  padding: 0 0.2rem;
}
.vse-prog[hidden] { display: none; }
.vse-prog-txt {
  margin: 0;
  flex: 0 0 auto;
  font-size: var(--vse-val);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}
.vse-bar {
  flex: 1 1 auto;
  height: 7px;
  border-radius: 999px;
  background: var(--grey-200);
  overflow: hidden;
}
.vse-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--blue);
  transition: width 0.15s linear;
}

/* Il tocco in piu' serve solo dove il browser pretende un gesto fresco (iOS,
   quando il video e' stato preparato dopo il click): compare in quel caso e
   in nessun altro, al posto dei due pulsanti. */
.vse-go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  min-height: 46px;
  padding: 0.55rem;
  border: 0;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  font-size: var(--vse-opt);
  font-weight: 700;
  font-family: inherit;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
  cursor: pointer;
}
.vse-go:hover { background: var(--blue-hover); }
.vse-go svg { width: 17px; height: 17px; }
.vse-go[hidden] { display: none; }

.vse-note {
  margin: 0;
  text-align: center;
  font-size: var(--vse-val);
  line-height: 1.4;
  color: var(--grey-600);
}
.vse-note:empty { display: none; }
.vse-note.is-warn { color: var(--orange-hover); font-weight: 600; }

.vse-wait {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem;
  text-align: center;
  color: var(--grey-600);
  font-size: 0.9rem;
}
.vse-wait .vsh-spin { border-top-color: var(--blue); }

/* "Segui la palla": una riga sopra Scarica/Condividi. */
.vse-follow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.2rem;
  font-size: var(--vse-opt);
  font-weight: 600;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.vse-follow[hidden] { display: none; }
.vse-follow input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--blue);
  cursor: pointer;
}
.vse-wait p { margin: 0; max-width: 32rem; }
.vse-err { font-weight: 600; }
.vse-err-hint { font-size: 0.82rem; line-height: 1.45; }
.vse-retry {
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.vse-retry:hover { background: var(--blue-hover); }

/* Su uno schermo grande si puo' respirare un po' di piu'. Le proporzioni non
   si toccano: sono quelle di sopra, in qualunque orientamento. */
@media (min-width: 1000px) and (min-height: 700px) {
  .vse-body { gap: 1rem; padding: 1rem; }
  .vse-close { width: 40px; height: 40px; top: 10px; left: 10px; }
  .vse-foot { padding: 0.6rem 0.4rem; }
}

/* ── Tab Confronto ──
   Copiato da TabMatchStats.razor.css dell'app (stesse classi mstats-cmp-*), più il pulsante
   "Vedi clip" che lì è .mstats-clips-btn.
   Un box per voce: categoria, titolo, breve descrizione e i valori. Nelle differenze le due
   squadre una sotto l'altra con una barra, verde la messa meglio e rossa l'altra (grigio-blu se
   nessuna delle due è "meglio", es. tempo dell'alzata); negli squilibri un numero grande. */
.mstats-cmp-intro {
    margin: 0.35rem 0 1rem;
    color: rgba(0, 0, 0, 0.55);
    font-size: 0.86rem;
    max-width: 60rem;
}
.mstats-cmp-none {
    margin: 0.5rem 0 0;
    color: rgba(0, 0, 0, 0.4);
    font-size: 0.9rem;
    font-style: italic;
}
.mstats-cmp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 0.9rem;
    margin-top: 0.8rem;
}
.mstats-cmp-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    padding: 0.85rem 1rem 0.9rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
.mstats-cmp-card.imbalance              { border-left: 4px solid #3b6fd4; }
.mstats-cmp-card.imbalance.team-b       { border-left-color: #e07b2a; }

.mstats-cmp-cat {
    align-self: flex-start;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgb(5, 39, 103);
    background: #e8ecf5;
    border-radius: 999px;
    padding: 0.12rem 0.55rem;
}
.mstats-cmp-title {
    font-size: 1rem;
    font-weight: 800;
    color: #1a1a2e;
}
.mstats-cmp-desc {
    font-size: 0.8rem;
    line-height: 1.35;
    color: rgba(0, 0, 0, 0.55);
}

.mstats-cmp-sides { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.2rem; }
.mstats-cmp-side-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}
.mstats-cmp-team {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.7);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mstats-cmp-val {
    font-size: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.mstats-cmp-bar {
    height: 6px;
    border-radius: 999px;
    background: #edf0f6;
    overflow: hidden;
    margin-top: 0.15rem;
}
.mstats-cmp-bar-fill { height: 100%; border-radius: 999px; }
.mstats-cmp-detail {
    font-size: 0.74rem;
    color: rgba(0, 0, 0, 0.45);
    margin-top: 0.15rem;
}
.mstats-cmp-side.better  .mstats-cmp-val      { color: #2d8a4e; }
.mstats-cmp-side.better  .mstats-cmp-bar-fill { background: #2d8a4e; }
.mstats-cmp-side.worse   .mstats-cmp-val      { color: #c0392b; }
.mstats-cmp-side.worse   .mstats-cmp-bar-fill { background: #e07a6f; }
.mstats-cmp-side.neutral .mstats-cmp-val      { color: #1a1a2e; }
.mstats-cmp-side.neutral .mstats-cmp-bar-fill { background: #3b6fd4; }

.mstats-cmp-big-row { display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; }
.mstats-cmp-big {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1a1a2e;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.mstats-cmp-big-row .mstats-cmp-detail { margin-top: 0; }

.mstats-cmp-actions { margin-top: auto; padding-top: 0.35rem; display: flex; justify-content: flex-end; }

.mstats-cmp-team-chip {
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
    background: #3b6fd4;
    border-radius: 999px;
    padding: 0.15rem 0.7rem;
}
.mstats-cmp-team-chip.team-b { background: #e07b2a; }

.mstats-cmp-clips {
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    background: none;
    border: 1px solid rgba(26, 26, 46, 0.25);
    border-radius: 999px;
    color: #234a9e;
    padding: 0.25rem 0.8rem;
    cursor: pointer;
}
.mstats-cmp-clips:hover { background: rgba(35, 74, 158, 0.08); }