/**
 * L'app dell'atleta (layouts/app.php), fatta come l'app utente di MotionHub
 * (motionhub/apps/user/src/index.css): pensata per il telefono, una colonna,
 * lo stato prima del dettaglio, quattro voci in basso. Scura come MotionHub
 * e, dal 22/10/2026 (il cliente), anche chiara: segue il telefono o la scelta
 * fatta da «Tema» nel menu (partials/tema.php).
 *
 * Stesse misure e stesse forme di MotionHub (angoli grandi, superfici una
 * sopra l'altra, titoli in Archivo largo); i colori sono quelli del logo:
 * blu notte per i fondi, azzurro per l'accento, arancio del sole solo per
 * l'evidenza. I componenti del kit (card, moduli, badge, agenda) restano quelli
 * del tema scuro: qui si cambiano solo i loro fondi.
 */
.app-atleta {
  --ground: #040a1d;        /* fuori dalla colonna, sul computer */
  --bg: #08122e;            /* la colonna */
  --surface: #0f1c42;
  --surface-2: #172858;
  --card: var(--surface);
  --card-strong: var(--surface-2);
  --panel: var(--surface);
  --line: rgb(180 217 249 / 11%);
  --faint: #6b7ea6;
  --good: #4fd18b;
  --warn: #f4b744;
  --bad: #ff6b5e;
  --font-display: 'Archivo', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --r-l: 26px;
  --r-m: 18px;
  --r-s: 12px;
  background: var(--ground);
  color: var(--text);
  min-height: 100dvh;
}

/* La colonna: tutta larga sul telefono, in mezzo sul computer. */
/* Niente scorre di lato: una cosa piu' larga dello schermo fa allargare o zoomare la
   pagina, e la barra in basso non resta piu' ferma (02/11/2026). */
html:has(body.app-atleta), body.app-atleta { overflow-x: clip; }
.mh { max-width: 520px; margin: 0 auto; min-height: 100dvh; position: relative; background: var(--bg); }
.mh-schermo {
  padding: 8px 18px calc(110px + env(safe-area-inset-bottom, 0px));
  display: grid; gap: 22px; align-content: start;
  /* minmax(0, …): senza, una tabella larga (la classifica) allarga tutta la
     colonna e la pagina scappa di lato sul telefono. */
  grid-template-columns: minmax(0, 1fr);
}
.mh-schermo .table-wrap { overflow-x: auto; }
/* La classifica sta tutta nello schermo del telefono, senza scorrere di lato
   (21/10/2026: «il box classifica non è allineato allo schermo»):
   colonne strette, numeri su una riga, il nome della squadra va a capo. */
.app-atleta .classifica { width: 100%; font-size: 14px; }
.app-atleta .classifica th, .app-atleta .classifica td { padding: 10px 4px; }
.app-atleta .classifica th { letter-spacing: 0; font-size: 11px; }
.app-atleta .classifica th:first-child, .app-atleta .classifica td:first-child { padding-left: 10px; }
.app-atleta .classifica th:last-child, .app-atleta .classifica td:last-child { padding-right: 10px; }
.app-atleta .classifica .num { white-space: nowrap; }
.app-atleta .classifica td:nth-child(2) { overflow-wrap: anywhere; }
/* La classifica piu' ordinata e curata (01/11/2026): posizione in un tondo (oro, argento, bronzo
   per le prime tre), nomi piccoli, punti in una pillola, V verdi e P rosse; le squadre avversarie si aprono sui risultati. */
.app-atleta .classifica { border-collapse: separate; border-spacing: 0 4px; }
.app-atleta .classifica th { text-align: center; color: var(--muted); text-transform: uppercase; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; }
.app-atleta .classifica th:nth-child(2) { text-align: left; }
.app-atleta .classifica td { text-align: center; vertical-align: middle; border: 0; background: rgb(128 128 128 / 7%); }
.app-atleta .classifica td:first-child { border-radius: 12px 0 0 12px; }
.app-atleta .classifica td:last-child { border-radius: 0 12px 12px 0; }
.app-atleta .classifica td.sq { text-align: left; font-size: 12.5px; line-height: 1.25; }
.app-atleta .classifica td.sq b { font-size: 13px; }
.app-atleta .classifica .riga-evidenza td { background: var(--evidenza-soft, rgb(52 125 215 / 16%)); }
/* Il nostro riquadro in classifica e' sempre azzurro (02/11/2026). */
.classifica .riga-evidenza td, .app-atleta .classifica .riga-evidenza td { background: rgb(86 170 235 / 24%); }
.app-atleta .classifica .pos { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 800; background: rgb(128 128 128 / 18%); }
.app-atleta .classifica .pos-1 .pos { background: linear-gradient(135deg, #ffe14d, #ffb800); color: #3b2a00; }
.app-atleta .classifica .pos-2 .pos { background: linear-gradient(135deg, #e9eef5, #b4c0d0); color: #1f2a3a; }
.app-atleta .classifica .pos-3 .pos { background: linear-gradient(135deg, #f0b27a, #c9772f); color: #2d1700; }
.app-atleta .classifica .pt { display: inline-block; min-width: 2.2em; padding: 3px 8px; border-radius: 99px; background: linear-gradient(135deg, #2f5bea, #12b8e8); color: #fff; font-size: 13px; }
.app-atleta .classifica td.v { color: #1f9d55; font-weight: 700; }
.app-atleta .classifica td.p { color: #d64545; font-weight: 700; }
/* La tabella resta sempre della stessa misura: aprendo una squadra la cella si adatta, non si allarga la tabella (02/11/2026). */
.classifica { table-layout: fixed; width: 100%; }
.classifica th:nth-child(1) { width: 40px; }
.classifica th:nth-child(n+3) { width: 38px; }
.classifica td.sq { min-width: 0; overflow: hidden; }
/* A riposo una riga sola per squadra; toccandola si apre sotto una riga intera con le partite (02/11/2026). */
/* Il nome sempre intero: la colonna prende tutto lo spazio che avanza (le altre sono strette) e la scritta
   si rimpicciolisce con la larghezza dello schermo; va a capo solo se proprio non ci sta (02/11/2026). */
.classifica th:nth-child(1) { width: 32px; }
.classifica th:nth-child(n+3) { width: 32px; }
.classifica th, .classifica td, .app-atleta .classifica th, .app-atleta .classifica td { padding-left: 2px; padding-right: 2px; }
.app-atleta .classifica th:first-child, .app-atleta .classifica td:first-child { padding-left: 6px; }
.app-atleta .classifica th:last-child, .app-atleta .classifica td:last-child { padding-right: 6px; }
.app-atleta .classifica .sq-dett td { padding-left: 8px; padding-right: 8px; }
.app-atleta .classifica td.sq, .classifica td.sq { font-size: clamp(9px, 2.9vw, 13px); }
.app-atleta .classifica td.sq b, .classifica td.sq b { font-size: inherit; }
.classifica .sq-nome { display: block; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: normal; line-height: 1.2; }
.classifica td.sq { overflow: visible; }
.classifica .sq-btn { display: flex; align-items: center; gap: 6px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.classifica .sq-btn::after { content: "›"; margin-left: auto; flex: none; font-size: 15px; opacity: .6; transition: transform .2s; }
.classifica .is-aperta .sq-btn::after { transform: rotate(90deg); }
.classifica tr[hidden] { display: none; }
.classifica .sq-dett td { padding: 4px 10px 8px; text-align: left; }
.sq-ris-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sq-ris-lista li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 6px 9px; border-radius: 10px; font-size: 12.5px; border-left: 3px solid transparent; background: rgb(128 128 128 / 10%); }
.sq-ris-lista li.is-v { border-left-color: #1f9d55; }
.sq-ris-lista li.is-p { border-left-color: #d64545; }
.sq-ris-lista .av { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.sq-ris-lista .av small { display: block; font-weight: 400; font-size: 10.5px; opacity: .65; }
.sq-ris-lista .ris { flex: none; font-size: 14px; }
.sq-ris-lista .set { flex: 0 0 100%; font-size: 11px; opacity: .75; }
@media (max-width: 480px) { .app-atleta .mh-schermo .card:has(.classifica) { padding-left: 12px; padding-right: 12px; } }
.mh-schermo > .alert { margin: 0; }

/* In alto: il marchio (o la freccia per tornare) e la campanella. */
.mh-testa {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 18px 6px;
}
.mh-marchio, .mh-indietro { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-weight: 600; }
.mh-marchio img { height: 48px; width: auto; }
.mh-marchio span { font: 700 15px/1 var(--font-display); font-stretch: 112%; letter-spacing: .02em; }
/* Il saluto della Casa accanto al logo, prima di campanella e profilo (26/10/2026). */
.app-atleta .mh-saluto {
  flex: 1; min-width: 0; margin: 0; color: var(--text);
  font: 800 24px/1.1 var(--font-display); font-stretch: 105%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* Coi nomi lunghi la scritta si stringe un po' invece di tagliarsi (26/10/2026):
     --lettere e' quante lettere ha «Ciao Nome». Se ancora non basta va a capo. */
  font-size: clamp(16px, calc((100vw - 190px) * 1.65 / var(--lettere, 9)), 24px);
  white-space: normal; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.mh-indietro { min-height: var(--tap); color: var(--accent); font-size: 15px; }
.mh-indietro svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mh-campana {
  position: relative; display: grid; place-items: center; width: var(--tap); height: var(--tap);
  border-radius: 99px; background: var(--surface); color: var(--text);
}
.mh-campana svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.mh-campana b {
  position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
  display: grid; place-items: center; font-size: 11px; background: var(--evidenza); color: var(--evidenza-testo);
}

/* La barra in basso, quattro voci, vetro smerigliato come in MotionHub. */
.mh-barra {
  /* Centrata coi margini e non con transform: su alcuni telefoni una barra fissa con
     transform e sfocatura scorreva su con la pagina (02/11/2026). */
  position: fixed; left: 0; right: 0; margin: 0 auto; width: min(100%, 520px); bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
}
.mh-voce {
  display: grid; justify-items: center; gap: 4px; padding: 6px 0;
  color: var(--faint); font-size: 11px; font-weight: 600; letter-spacing: .02em; text-decoration: none;
}
.mh-voce svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mh-voce.is-active { color: var(--text); }
.mh-voce.is-active svg { color: var(--accent); }
/* Società: la balena del logo intera, senza la scritta, a linee (icona-balena.png usata come maschera;
   il cliente 23/10/2026: «intero e non tagliato», poi senza la scritta e senza il tondo intorno;
   ricavata dai colori del logo: si tengono solo i contorni che toccano la balena; quando cambia,
   si alza il ?v= qui sotto, se no i telefoni tengono la vecchia),
   cosi' prende il colore della voce, chiaro o scuro come il tema. */
.mh-balena {
  display: block; width: 36px; height: 24px; background: currentColor;
  -webkit-mask: url(../img/icona-balena.png?v=158) center / contain no-repeat; mask: url(../img/icona-balena.png?v=158) center / contain no-repeat;
}
.mh-voce.is-active .mh-balena { color: var(--accent); }
/* Nella barra il corpo della balena sta a sinistra e la coda, sottile, a destra: centrata come
   scatola sembrava spostata (23/10/2026). Un po' a destra, col corpo sopra la scritta. */
/* Poi un millimetro piu' a sinistra (23/10/2026: «se puoi spostarla un mm a sinistra»). */
@media (max-width: 999px) { .mh-voce .mh-balena { transform: translateX(1px); } }
/* Grande come le altre icone della barra (24/10/2026: era 35x21 contro 18x18): alta 18,
   come le altre; la scatola resta 36x24, cosi' la scritta sotto sta in riga con le altre. */
.mh-voce .mh-balena { -webkit-mask-size: auto 18px; mask-size: auto 18px; }

/* Titoli, come MotionHub: l'etichetta piccola maiuscola sopra, il titolo largo. */
.app-atleta .eyebrow { font: 600 11px/1.3 Roboto, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.app-atleta h1, .app-atleta h2, .app-atleta h3 { margin: 0; font-family: var(--font-display); text-wrap: balance; }
.app-atleta h1 { font-size: 30px; font-weight: 700; font-stretch: 112%; letter-spacing: -.01em; line-height: 1.05; }
.app-atleta h2 { font-size: 17px; font-weight: 650; font-stretch: 105%; }
.app-atleta .muted { color: var(--muted); margin: 0; }
/* Le pagine del kit (quote, bacheca, classifica) dentro l'app: la testa piu' sobria. */
.app-atleta .page-head { margin: 0; }
.app-atleta .page-head h1 { font-size: 26px; }

/* ---------------------------------------------------------------- Casa */
.mh-eroe { display: grid; gap: 6px; }
.mh-eroe.compatto { gap: 8px; }

/* La maglia: la divisa vera, davanti o dietro (partials/maglia.php): le due
   facce una sull'altra, e toccandola si volta di mezzo giro. */
/* La scritta delle maglie: Ocean Rush, quella del PDF delle divise. E' la DEMO (solo uso
   personale): la licenza la sistema AQS (22/10/2026). Le lettere accentate non ci sono. */
@font-face { font-family: "Ocean Rush"; src: url("../fonts/ocean-rush-demo.otf") format("opentype"); font-display: swap; }
.maglia { position: relative; width: 100%; max-width: 340px; margin: 6px auto -4px; perspective: 1400px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.maglia-giro { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(180deg); transition: transform .6s cubic-bezier(.4, .1, .2, 1); }
.maglia.is-fronte .maglia-giro { transform: rotateY(360deg); }
@media (prefers-reduced-motion: reduce) { .maglia-giro { transition: none; } }
.maglia-faccia {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  filter: drop-shadow(0 14px 26px rgb(0 0 0 / 35%));
}
.maglia-faccia.is-dietro { transform: rotateY(180deg); }
/* Il numero come nel PDF: bianco sulle blu, azzurro sulle bianche dei liberi. */
.maglia-numero { font-family: "Ocean Rush", var(--font-display); font-weight: 400; fill: #f8f8f8; }
.maglia-bianca .maglia-numero { fill: #0090d8; }
.maglia-comandi { margin: 4px 0 0; text-align: center; }
.maglia-volta {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer;
}
.maglia-volta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .6s; }
.maglia.is-fronte + script + .maglia-comandi svg { transform: rotate(180deg); }
.maglia-nota { margin: -4px 0 0; text-align: center; font-size: 13px; color: var(--muted); }

.mh-blocco { display: grid; gap: 12px; }
/* «La mia squadra» dell'allenatore (25/10/2026): piu' grande, nel blu della societa', con le personcine abbracciate. */
/* Blu navy, come gli altri titoli (27/10/2026). */
.app-atleta .mh-titolo-squadra { display: flex; align-items: center; gap: 7px; color: var(--text); }
.mh-titolo-squadra svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mh-blocco-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mh-blocco-testa a { color: var(--accent); font-size: 14px; font-weight: 600; text-decoration: none; }

/* Le righe: la lista di MotionHub, una superficie con le voci dentro. */
.mh-righe { display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.mh-riga {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  min-height: 64px; padding: 12px 16px; color: var(--text); text-decoration: none;
}
.mh-riga + .mh-riga { border-top: 1px solid var(--line); }
button.mh-riga { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
a.mh-riga:active { background: var(--surface-2); }
.mh-riga > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.mh-riga b { font-weight: 600; }
.mh-riga small { color: var(--muted); font-size: 13px; }
.mh-freccia { color: var(--faint); font-size: 22px; line-height: 1; }
.mh-riga.is-esci { color: var(--bad); }
.mh-riga.is-esci .mh-icona { color: var(--bad); }

.mh-pallino { width: 10px; height: 10px; border-radius: 99px; margin: 0 4px; background: var(--faint); }
.mh-pallino.is-ok { background: var(--good); box-shadow: 0 0 0 4px color-mix(in srgb, var(--good) 22%, transparent); }
.mh-pallino.is-info { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.mh-pallino.is-attesa { background: var(--warn); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 22%, transparent); }
.mh-pallino.is-male { background: var(--bad); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 22%, transparent); }
/* «Visita prenotata» (21/10/2026): il semaforino bianco. */
.mh-pallino.is-prenotata { background: #fff; box-shadow: 0 0 0 4px rgb(255 255 255 / .18); }

.mh-icona { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-s); background: var(--surface-2); color: var(--accent); }
.mh-fascia { font: 800 15px/1 var(--font-display); color: var(--accent); letter-spacing: -.02em; }
/* La C e la VC accanto al nome nel roster (25/10/2026). */
.mh-fascia-chip { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 5px; margin-left: 4px; border-radius: 99px;
  background: var(--accent); color: #fff; font: 800 11px/1 var(--font-display); vertical-align: 2px; }
.mh-icona-logo { background: none; }
/* I loghetti dello staff (felpa e persona al pc): senza sfondo e un po' più grandi (06/11/2026). */
.mh-icona.mh-icona-libera, .mh-azzurro .mh-icona.mh-icona-libera { background: none; }
.mh-icona.mh-icona-libera svg { width: 28px; height: 28px; }
.mh-icona-maglia { width: 40px; height: auto; justify-self: center; }   /* stessa larghezza per tutte, così i nomi stanno allineati */
.mh-icona-maglia svg.mh-retro { width: auto; height: 56px; stroke: none; }
/* Il riquadro «compagni di squadra» nella home: la maglietta senza sfondo e più piccola (06/11/2026). */
.mh-icona.mh-icona-maglia, .mh-azzurro .mh-icona.mh-icona-maglia, .mh-galleria .mh-icona.mh-icona-maglia { background: none; }
.mh-icona-maglia svg.mh-retro { height: 40px; }
/* Allenatori azzurra, scoutman gialla: cambia solo il colore della maglia, non il testo (06/11/2026). */
.mh-voce-staff { font: 400 22px/1 "Ocean Rush", var(--font-display); text-transform: uppercase; color: var(--accent); opacity: .6; white-space: nowrap; }
/* Nelle squadre femminili le scritte (TEAM, COACH, ruoli, soprannomi) sono più viola che azzurre (06/11/2026). */
.is-donne .mh-voce-staff:not(.is-scout) { color: #9156d6; }
.mh-roster .mh-riga small { color: #1d5fd0; }   /* il ruolo nel roster, scritto blu (06/11/2026) */
.mh-roster.is-donne .mh-riga[data-soprannome]::after { color: #9156d6; }
.mh-retro.tinta-viola > image:first-child { filter: hue-rotate(55deg) saturate(1.2) brightness(1.7); }
.mh-homeaway { font: 400 13px/1 "Ocean Rush", var(--font-display); text-transform: uppercase; white-space: nowrap; }
/* La magliettina dello staff: la sagoma della divisa, blu a tinta unita, col logo ufficiale al centro.
   Alta 40px come le altre magliette. */
.mh-tinta { position: relative; display: block; height: 40px; margin: 0 auto; }
.mh-tinta-forma { position: absolute; inset: 0; background: #1d3f8f;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
/* La felpetta dei coach e la giacchetta dello scoutman: disegni blu, alti 40px come le magliette. */
.mh-capo { position: relative; display: block; width: 40px; height: 40px; margin: 0 auto; }
.mh-icona .mh-capo.is-piccolo { width: 32px; height: 32px; }
.mh-capo svg, .mh-capo svg { display: block; width: 100%; height: 100%; fill: none; stroke: #14285a; stroke-width: 2; }
.mh-capo .mh-capo-logo { position: absolute; left: 57%; top: 41%; width: 23%; aspect-ratio: 495 / 225;
  background-size: 100% auto; background-position: top; background-repeat: no-repeat; }
/* I bordini bianchi: tagliati dalla sagoma della maglia, quindi restano dentro. */
.mh-tinta .orlo { position: absolute; background: #fff; }
.mh-tinta .orlo.fondo { left: 0; right: 0; bottom: 0; height: 3.5%; }
.mh-tinta .orlo.sx, .mh-tinta .orlo.dx { width: 30%; height: 4.5%; top: 37%; }
.mh-tinta .orlo.sx { left: -3%; transform: rotate(26deg); }
.mh-tinta .orlo.dx { right: -3%; transform: rotate(-26deg); }
/* STAFF sulla schiena, sotto il collo, in un carattere standard. */
.mh-tinta .mh-tinta-scritta { position: absolute; left: 0; right: 0; top: 17%; text-align: center; color: #fff;
  font: 400 6.5px/1 "Ocean Rush", var(--font-display); letter-spacing: .03em; }
.mh-tinta.is-smanicata .mh-tinta-scritta { top: 14%; }
.mh-homeaway { display: block; line-height: 0; margin-right: 18px; }
/* Il giorno e il mese della partita: in casa blu, in trasferta azzurro. */
.mh-riga.is-home .mh-data, .mh-riga.is-home .mh-data b, .mh-riga.is-home > span:nth-child(2) > b { color: #1e3a8a; }
.mh-riga.is-away .mh-data, .mh-riga.is-away .mh-data b, .mh-riga.is-away > span:nth-child(2) > b { color: #4db6f0; }
.mh-homeaway .mh-cartone { display: block; width: 36px; height: 36px; }
.mh-homeaway .ico-dove { width: 38px; height: 38px; margin: 0; vertical-align: 0; }
.mh-homeaway.is-home { color: #1d5fd0; }
.mh-homeaway.is-away { color: #4db6f0; }
/* La casetta blu e il pulmino azzurro, come la scritta (06/11/2026). */
.mh-riga.is-home .ico-dove { stroke: #14285a; opacity: .85; }
.mh-riga.is-away .ico-dove { stroke: #4db6f0; opacity: .85; }
.mh-voce-staff.is-scout { color: #f28c28; }
.mh-retro.tinta-azzurra > image:first-child { filter: hue-rotate(-18deg) saturate(1.2) brightness(1.8); }
.mh-retro.tinta-arancione > image:first-child { filter: hue-rotate(168deg) saturate(2.2) brightness(1.6); }
.mh-icona-logo img { width: 34px; height: auto; display: block; }
.mh-icona-logo .mh-balena { width: 34px; height: 22px; color: var(--accent); }
.mh-icona svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mh-logo-social { display: grid; place-items: center; width: 38px; height: 38px; }
.mh-logo-social svg { width: 30px; height: 30px; }
/* Le icone dei dati della societa' (23/10/2026): a linee, del colore della societa'. */
.mh-logo-social svg.mh-icona-dato { width: 26px; height: 26px; fill: none; color: var(--accent); stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* La balena grande come le altre icone, nella stessa colonna (23/10/2026). */
.mh-logo-social .mh-balena { width: 28px; height: 26px; color: var(--accent); }

.mh-data { display: grid; justify-items: center; width: 42px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.mh-data b { font: 700 20px/1.05 var(--font-display); color: var(--text); letter-spacing: 0; }
.mh-ora { font: 700 16px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--accent); width: 46px; }

.mh-vuoto { padding: 22px 18px; border-radius: var(--r-l); background: var(--surface); border: 1px dashed var(--line); color: var(--muted); text-align: center; }
.mh-vuoto small { font-size: 13px; color: var(--faint); }

/* La prossima partita: la card grande, con il filo dell'arancio del sole. */
.mh-prossima {
  display: grid; gap: 14px; padding: 18px;
  border-radius: var(--r-l); border: 1px solid var(--line);
  background: linear-gradient(160deg, color-mix(in srgb, var(--evidenza) 16%, transparent), transparent 55%), var(--surface);
  box-shadow: inset 3px 0 0 var(--evidenza);
}
.mh-prossima-quando { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; color: var(--muted); font-size: 14px; }
.mh-conto { font: 700 20px/1 var(--font-display); font-stretch: 112%; color: var(--evidenza); }
.mh-prossima-sfida { display: grid; gap: 4px; font: 650 18px/1.2 var(--font-display); }
.mh-prossima-sfida i { font: italic 400 13px/1 Roboto, sans-serif; color: var(--faint); }
.mh-prossima-sfida .noi { color: var(--accent); }
.mh-prossima-piede { display: flex; flex-wrap: wrap; gap: 8px; }
.mh-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 99px; background: var(--surface-2); font-size: 13px; font-weight: 600; }
/* «Portami qui», come «Dove l'ho lasciata» di MotionHub. */
.mh-portami {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: var(--r-m); background: var(--surface-2); color: var(--text); text-decoration: none;
}
.mh-portami svg { width: 24px; height: 24px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; }
.mh-portami span { display: grid; gap: 2px; min-width: 0; }
.mh-portami small { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* -------------------------------------------------------------- Eventi */
.mh-giorno { display: grid; gap: 8px; }
.mh-giorno + .mh-giorno { margin-top: 8px; }
.mh-giorno h3 { font-size: 15px; font-weight: 650; }
.mh-giorno h3 span { color: var(--muted); font-weight: 400; margin-left: 4px; }
.mh-agenda { padding: 10px; border-radius: var(--r-l); }

/* ------------------------------------------------------------- Profilo */
.mh-chi { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding-top: 6px; }
.mh-chi h1 { font-size: 26px; }
.mh-foto {
  width: 84px; height: 84px; border-radius: 99px; object-fit: cover;
  display: grid; place-items: center; background: var(--surface-2); color: var(--accent);
  font: 700 29px/1 var(--font-display); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--evidenza);
}
.mh-dati { margin: 0; display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.mh-dati > div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 16px; }
.mh-dati > div + div { border-top: 1px solid var(--line); }
.mh-dati dt { color: var(--muted); }
.mh-dati dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.mh-nota { margin: 0; font-size: 13px; color: var(--muted); }
.mh-nota a { color: var(--accent); }
/* «Gia' installata sul tuo telefono!» sotto il pulsante spento (25/10/2026). */
.mh-nota.mh-gia { color: var(--good); font-size: 14px; font-weight: 600; }
[data-installa-bottone]:disabled, [data-notifiche] [data-notifiche-bottone]:disabled { opacity: .5; cursor: default; }
.mh-scheda { display: grid; gap: 10px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); }
.mh-scheda p { margin: 0; }
.mh-apri summary {
  display: flex; align-items: center; min-height: var(--tap); cursor: pointer;
  color: var(--accent); font-weight: 600; list-style: none;
}
.mh-apri summary::-webkit-details-marker { display: none; }
.mh-apri summary::after { content: '›'; margin-left: 8px; font-size: 20px; transition: transform .2s; }
.mh-apri[open] summary::after { transform: rotate(90deg); }
.mh-apri form { padding-top: 6px; }
.mh-guida { display: grid; gap: 8px; }
.mh-piede { margin: 0; text-align: center; font-size: 12px; color: var(--faint); }
.mh-piede a { color: inherit; }

/* ------------------------------------------------- Atleti (allenatore) */
.mh-foto.piccola { width: 72px; height: 72px; font-size: 22px; box-shadow: none; }
.mh-atleta { align-items: start; }
/* Il soprannome sotto la foto, nel font del numero di maglia (06/11/2026). */
.mh-foto-col { display: grid; justify-items: center; gap: 4px; width: 84px; }
.mh-soprannome { margin-top: 14px; font: 400 21px/1.1 "Ocean Rush", var(--font-display); text-transform: uppercase; text-align: center; color: var(--accent); opacity: .65; overflow-wrap: anywhere; }
.is-donne .mh-soprannome { color: #9156d6; }
.mh-foto-col > .mh-soprannome { display: block; width: 100%; justify-self: stretch; text-align: center; }   /* soprannome e numero con lo stesso centro */
/* Il numero sotto il soprannome: più grande, il # nello stesso font del numero, centrato sullo stesso asse. */
.mh-foto-col > .mh-soprannome { font-size: 18px; min-width: 0; padding: 0; }
.mh-foto-col > .mh-sotto-numero { display: flex; align-items: center; justify-content: center; gap: 2px; font-size: 22px; margin-top: 2px; opacity: .85; padding: 0; min-width: 0; }
/* Il # disegnato, così si vede sempre davanti al numero. */
.mh-cancelletto { display: block; width: .62em; height: .72em; flex: none; }
.mh-soprannome + .mh-sotto-numero { margin-top: 2px; }
.mh-foto-col > .mh-sotto-numero:nth-child(2) { margin-top: 14px; }   /* senza soprannome, il numero sta alla stessa altezza */
/* Il roster: righe più piccole e, al posto del cerchio, il retro della maglia col numero (06/11/2026). */
.mh-roster .mh-riga { min-height: 0; padding: 6px 12px; gap: 10px; }
.mh-roster .mh-riga small { font-size: 12px; }
.mh-numriga { display: flex; align-items: center; gap: 8px; }
/* La fascetta da capitano: una banda con i bordi elastici ai lati, con la C o la VC. */
.mh-fascetta { display: inline-grid; place-items: center; min-width: 30px; height: 20px; padding: 0 9px; border-radius: 4px;
  background: var(--accent); color: #fff; font: 800 12px/1 var(--font-display); letter-spacing: .02em;
  box-shadow: inset 3px 0 0 rgb(255 255 255 / 40%), inset -3px 0 0 rgb(255 255 255 / 40%); }
.mh-roster .mh-riga small.mh-numero { font-size: 17px; font-weight: 600; }
/* Nel roster: ruolo e numero bianchi, la C e la VC arancioni (10/11/2026). Con il tema chiaro il bianco non si leggerebbe: lì restano blu. */
.mh-roster .mh-riga small, .mh-roster .mh-riga small.mh-numero { color: #fff; }
.app-atleta.theme-light .mh-roster .mh-riga small, .app-atleta.theme-light .mh-roster .mh-riga small.mh-numero { color: #1d5fd0; }
.mh-roster .mh-fascetta { background: #e58a00; color: #fff; }
/* PROVA: il soprannome come sfondo del box, grande e sbiadito, a destra, dietro ai nomi. */
.mh-roster .mh-riga[data-soprannome] { position: relative; overflow: hidden; isolation: isolate; container-type: inline-size; }
.mh-roster .mh-riga[data-soprannome]::after {
  content: attr(data-soprannome); position: absolute; z-index: -1; right: 10px; top: 50%; transform: translateY(-50%);
  white-space: nowrap;
  /* La scritta si adatta alla cella: più il soprannome è lungo, più si rimpicciolisce, così non si taglia. */
  font: 400 min(44px, calc(86cqw / (var(--n, 8) * .66))) / 1 "Ocean Rush", var(--font-display); text-transform: uppercase;
  color: var(--accent); opacity: .32; pointer-events: none;
}
.mh-retro { display: block; height: 84px; width: auto; align-self: center; }
.mh-numero { color: var(--muted); font-weight: 400; }
.mh-stati { display: grid; gap: 4px; margin-top: 4px; }
.mh-stato { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted-strong); }
.mh-stato .mh-pallino { width: 8px; height: 8px; margin: 0 6px 0 2px; box-shadow: none; flex: none; }
/* Il link alla classifica in Calendario. */
.link-classifica { display: flex; justify-content: space-between; align-items: center; text-decoration: none; color: var(--text); border-radius: var(--r-l); }
.link-classifica span { color: var(--faint); font-size: 22px; }

/* ======================================================= Sul computer */
/* Sul telefono le colonne sono una sotto l'altra, come prima. */
.mh-colonne, .mh-col { display: grid; gap: 22px; align-content: start; min-width: 0; }
/* Home dell'atleta sul telefono: le due colonne si sciolgono in una sola, e
   «Da sapere» (certificato, quota) passa fra il saluto e la maglia. */
@media (max-width: 999px) {
  .mh-home-atleta > .mh-col { display: contents; }
  .mh-home-atleta > .mh-col > * { order: 4; }
  .mh-home-atleta .mh-eroe { order: 1; }
  .mh-home-atleta .mh-compleanno, .mh-home-atleta .mh-breaking, .mh-home-atleta .mh-mvp { order: 2; }
  .mh-home-atleta .mh-da-sapere { order: 3; }
}
.mh-barra-logo { display: none; }

/* Da 1000 px in su l'app non resta una striscia in mezzo allo schermo
   (20/10/2026: «si vede brutta»): la barra in basso diventa il menu
   a sinistra col logo, e le schermate vanno su due colonne. Si accende da
   sola guardando la larghezza della finestra. */
@media (min-width: 1000px) {
  .mh {
    max-width: none; min-height: 100dvh;
    display: grid; grid-template-columns: 248px minmax(0, 1fr);
    grid-template-areas: "barra testa" "barra schermo"; grid-template-rows: auto 1fr;
    background: var(--bg);
  }
  /* Centrate nello spazio a destra del menu, non attaccate a sinistra (22/10/2026). */
  .mh-testa { grid-area: testa; padding: 22px 40px 6px; max-width: 1360px; width: 100%; justify-self: center; }
  /* Il logo e' gia' nel menu: in alto resta solo la freccia per tornare. */
  .mh-testa .mh-marchio { visibility: hidden; }
  .mh-testa .mh-marchio:has(+ .mh-saluto) { display: none; }
  .app-atleta .mh-saluto { font-size: 32px; }
  .mh-schermo { grid-area: schermo; padding: 10px 40px 48px; max-width: 1360px; width: 100%; gap: 26px; justify-self: center; }

  .mh-barra {
    grid-area: barra; position: sticky; top: 0; left: auto; right: auto; margin: 0; transform: none; width: auto; height: 100dvh;
    display: flex; flex-direction: column; gap: 4px; align-self: start;
    padding: 24px 16px; border-top: 0; border-right: 1px solid var(--line);
    background: var(--ground); backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .mh-barra-logo { display: flex; justify-content: center; padding: 0 0 22px; }
  .mh-barra-logo img { width: 150px; height: auto; }
  .mh-voce {
    display: flex; align-items: center; justify-items: start; gap: 14px;
    padding: 12px 14px; border-radius: var(--r-s); font-size: 15px; letter-spacing: 0;
  }
  .mh-voce:hover { background: var(--surface); color: var(--text); }
  .mh-voce.is-active { background: var(--surface-2); }
  /* Icone e scritte in colonna (27/10/2026): ogni icona sta in una casella
     larga 36 come la balena di Società, centrata, cosi' le scritte partono tutte dallo stesso punto. */
  .mh-voce svg, .mh-voce .mh-balena { flex: none; width: 36px; height: 24px; }

  .mh-colonne { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; align-items: start; }
  .app-atleta h1 { font-size: 40px; }
  .maglia { max-width: 440px; margin: 10px auto 0; }
  /* Il calendario di Eventi resta in vista mentre scorre l'elenco. */
  .mh-fisso { position: sticky; top: 20px; }
  .mh-riga { min-height: 68px; }
  a.mh-riga:hover { background: var(--surface-2); }
}

/* La firma di AQ Solutions: sul telefono solo in fondo al Profilo (.mh-piede), sul computer in fondo al menu. */
.link-classifica { padding: 16px 20px; margin: 0; }
.mh-barra-firma { display: none; }
@media (min-width: 1000px) {
  .mh-barra-firma { display: block; margin-top: auto; padding: 16px 8px 0; border-top: 1px solid var(--line); }
  .mh-barra-firma { text-align: center; }
  .mh-barra-firma .firma-aqs { flex-wrap: wrap; justify-content: center; }
}

/* In alto a destra: campanella e menu dell'utente (l'unico posto dove si cambia area). */
.mh-testa-destra { display: flex; align-items: center; gap: 8px; }
.app-atleta .btn-utente {
  width: var(--tap); height: var(--tap); border-radius: 99px; border: 0;
  background: var(--surface); color: var(--text);
}
.app-atleta .menu-tendina { background: var(--surface-2); border-color: var(--line); color: var(--text); }

/* I documenti per argomento, con «nuovo». */
.mh-argomento { font-size: 14px; font-weight: 600; color: var(--muted); margin: 6px 0 -4px; }
.mh-nuovo { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; background: var(--evidenza); color: var(--evidenza-testo); vertical-align: middle; }

/* «I nostri sponsor»: i loghi scontornati e piccoli (22/10/2026: «troppo
   grandi», «lo sfondo non mi piace»). Col tema chiaro stanno sul fondo della
   pagina; col tema scuro su una piccola base chiara, se no i loghi scuri spariscono. */
.mh-sponsor-loghi { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.mh-sponsor-loghi a { display: grid; place-items: center; height: 44px; padding: 5px 0; border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 13px; text-align: center; }
.mh-sponsor-loghi img { max-width: 104px; max-height: 32px; object-fit: contain; }
@media (min-width: 1000px) { .mh-sponsor { grid-column: 1 / -1; } }
/* La pagina Sponsor: una griglia fitta, logo piccolo scontornato e il nome sotto. */
.mh-sponsor-schede { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 18px 12px; }
.mh-sponsor-scheda { display: grid; grid-template-rows: auto 1fr; gap: 6px; color: var(--text); text-decoration: none; text-align: center; }
.mh-sponsor-logo { display: grid; place-items: center; height: 64px; padding: 6px 0; border-radius: 12px; color: var(--text); font-weight: 700; }
.mh-sponsor-logo img { max-width: 100%; max-height: 50px; object-fit: contain; }
.mh-sponsor-nome { display: grid; gap: 1px; min-width: 0; font-size: 13px; line-height: 1.25; }
.mh-sponsor-nome small { color: var(--accent); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.mh-sponsor-scheda:active { background: var(--surface-2); }
.mh-riga .btn { width: auto; min-height: 38px; padding: 0 14px; }

/* «Le partite nel mio calendario», nella pagina Calendario dell'app. */
.mio-calendario { display: grid; gap: 10px; border-radius: var(--r-l); }
/* Chiuso e' un bottone piccolo, del colore della societa', col calendario davanti (23/10/2026). */
.mio-calendario:not([open]) { justify-self: start; padding: 0; background: none; border: 0; box-shadow: none; }
.mio-calendario > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mio-calendario:not([open]) > summary { justify-content: flex-start; padding: 8px 14px; border-radius: 999px; background: var(--accent); color: var(--bg); font-size: 13px; }
.mio-calendario:not([open]) > summary span { color: inherit; font-size: 16px; }
.mio-calendario > summary svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mio-calendario[open] > summary b { margin-right: auto; }
.mio-calendario > summary::-webkit-details-marker { display: none; }
.mio-calendario > summary span { color: var(--faint); font-size: 22px; }
.mio-calendario[open] > summary span { transform: rotate(90deg); }
.mio-calendario p { margin: 0; }
.copia-link { display: flex; gap: 8px; }
.copia-link input { flex: 1; min-width: 0; font-size: 12px; }
.copia-link .btn { width: auto; }

/* «La mia squadra» in Casa: posto in classifica e ultimo risultato. */
.mh-squadra { display: grid; gap: 14px; padding: 16px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; }
.mh-posto { display: flex; align-items: baseline; gap: 10px; }
.mh-posto b { font: 800 34px/1 var(--font-display); font-stretch: 112%; color: var(--evidenza); }
.mh-posto small, .mh-ultima small { color: var(--muted); font-size: 13px; }
.mh-ultima { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.mh-ultima .vinta { color: var(--good); }
.mh-ultima .persa { color: var(--bad); }

/* ---------------------------------------------------------- Calendario */
.mh-comandi { display: grid; gap: 8px; }
.mh-comandi .interruttore-due { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; gap: 4px; border-radius: var(--r-m); background: var(--surface); }
.mh-comandi label { position: relative; cursor: pointer; margin: 0; }
.mh-comandi input { position: absolute; opacity: 0; pointer-events: none; }
.mh-comandi span { display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 12px; color: var(--muted); font-weight: 600; font-size: 14px; }
.mh-comandi input:checked + span { background: var(--surface-2); color: var(--text); }
.mh-comandi input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.mh-elenco { display: grid; gap: 10px; scroll-margin-top: 16px; }
.mh-mese { font-size: 14px; font-weight: 700; color: #ffd23f; margin: 8px 0 -2px; text-transform: capitalize; scroll-margin-top: 16px; }
.mh-gara + .mh-gara { border-top: 1px solid var(--line); }
.mh-gara > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; min-height: 64px; padding: 12px 16px; }
.mh-gara > summary::-webkit-details-marker { display: none; }
.mh-gara > summary > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.mh-gara > summary small { color: var(--muted); font-size: 13px; }
.mh-gara[open] > summary .mh-freccia { transform: rotate(90deg); }
.mh-gara.is-prossima { box-shadow: inset 3px 0 0 var(--evidenza); background: linear-gradient(90deg, color-mix(in srgb, var(--evidenza) 12%, transparent), transparent 60%); }
.mh-gara.is-giocata > summary b { color: var(--muted-strong); }
.mh-chip-prossima { display: inline-block; padding: 0 8px; border-radius: 99px; background: var(--evidenza); color: var(--evidenza-testo); font-weight: 700; font-size: 11px; }
/* Mesi e «Squadra» del Calendario (03/11/2026): un piccolo box bianco con la scritta blu, uguale nei due temi. */
.mh-mese, .app-atleta .filtro-squadre label {
  display: inline-block; justify-self: start; width: fit-content; padding: 1px 8px; border-radius: 6px;
  background: rgba(255, 255, 255, .5); color: #1f4fa8; line-height: 1.3;
}
.app-atleta .filtro-squadre label { font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.mh-esito { display: grid; justify-items: center; text-align: center; } /* «vinta»/«persa» centrata sotto il punteggio (03/11/2026) */
.mh-esito b { font: 700 18px/1 var(--font-display); }
.mh-esito small { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.mh-esito.vinta b, .mh-esito.vinta small { color: var(--good) !important; }
.mh-esito.persa b, .mh-esito.persa small { color: var(--bad) !important; }
.mh-gara-dettagli { display: grid; gap: 8px; padding: 0 16px 16px; }
.mh-gara-dettagli p { margin: 0; }
/* La mini classifica in fondo. */
.mh-mini-classifica { text-decoration: none; }
.mh-mini-classifica .mh-riga { min-height: 48px; padding: 8px 16px; }
.mh-mini-classifica .is-noi { background: color-mix(in srgb, var(--evidenza) 14%, transparent); }
.mh-mini-classifica .is-noi b { color: var(--evidenza); }
.mh-punti { display: grid; justify-items: end; }
.mh-punti small { font-size: 11px; color: var(--muted); }
.mh-salto { min-height: 24px !important; color: var(--faint); }
/* Quello che e' nascosto resta nascosto, anche se ha un display suo (elenco e
   mese del Calendario, i mesi vuoti col filtro casa/trasferta). */
.app-atleta [hidden] { display: none !important; }

/* -------------------------------------------------------------- Eventi */
/* L'etichetta della squadra, del suo colore (lo stesso della griglia). */
.mh-sq { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; vertical-align: 1px;
  background: color-mix(in srgb, var(--kc, var(--accent)) 24%, transparent); color: color-mix(in srgb, var(--kc, var(--accent)) 60%, #fff); }
.mh-sq.is-evento { --kc: var(--evidenza); }
/* Le Opes (27/10/2026): la scritta resta blu, e' il fondo a farsi celeste. */
.mh-sq.sq-9 { background: color-mix(in srgb, var(--sq9) 38%, transparent); color: color-mix(in srgb, var(--sq1) 60%, #fff); }
.app-atleta.theme-light .mh-sq.sq-9 { background: #c9ecfb; color: #1d4fa8; }
.mh-riga.is-opes { background: color-mix(in srgb, var(--sq9) 16%, transparent); }
.mh-blocco.is-opes .mh-righe { background: color-mix(in srgb, var(--sq9) 14%, var(--surface)); }
.app-atleta.theme-light .mh-riga.is-opes { background: #e3f5fd; }
.app-atleta.theme-light .mh-blocco.is-opes .mh-righe { background: #e3f5fd; }
/* Nel roster il bordo del colore della squadra, le righe dei nomi normali (27/10/2026). */
.mh-roster[class*="bordo-"] .mh-righe { border-width: 2px; }
.mh-roster.bordo-celeste .mh-righe { border-color: color-mix(in srgb, var(--sq9) 70%, transparent); }
.mh-roster.bordo-blu .mh-righe { border-color: #1d3f8f; }
.mh-roster.bordo-viola .mh-righe { border-color: #5b2a86; }
.mh-roster.bordo-viola-tenue .mh-righe { border-color: #b39ddb; }
.mh-gara.is-evento { box-shadow: inset 3px 0 0 var(--evidenza); }
.mh-evento-foto { width: 100%; border-radius: var(--r-m); }
.mh-settimana .mh-riga { grid-template-columns: auto 1fr; }

/* ------------------------------------------------------- Le mie quote */
.mh-quota { gap: 14px; }
.mh-quota-cifre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mh-quota-cifre span { display: grid; gap: 2px; }
.mh-quota-cifre small { color: var(--muted); font-size: 12px; }
.mh-quota-cifre b { font: 700 20px/1.1 var(--font-display); white-space: nowrap; }
.mh-quota-cifre b.pagato { color: var(--good); }
.mh-barra-quota { height: 12px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.mh-barra-quota i { display: block; height: 100%; background: var(--good); border-radius: 99px; }
.mh-riga.is-prossima { box-shadow: inset 3px 0 0 var(--evidenza); }
.mh-pagare p { margin: 0; }
.mh-copia { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--r-s); background: var(--surface-2); }
.mh-copia span { display: grid; gap: 2px; min-width: 0; }
.mh-copia small { color: var(--muted); font-size: 12px; }
.mh-copia b { overflow-wrap: anywhere; font-size: 15px; letter-spacing: .02em; }
.mh-copia .btn { width: auto; min-height: 38px; padding: 0 14px; }

/* ------------------------------------------------------------ Profilo */
.mh-foto-form { margin: 0; }
.mh-foto-tocca { position: relative; display: block; cursor: pointer; margin: 0; }
.mh-foto-tocca input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mh-foto-piu { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 99px; background: var(--accent); color: var(--accent-ink, #04121d); font-weight: 800; font-size: 18px; line-height: 1; box-shadow: 0 0 0 3px var(--bg); }
.mh-segnala { margin-top: 10px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); }
.mh-scegli { position: relative; overflow: hidden; cursor: pointer; }
.mh-scegli input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mh-certificato [data-dopo] { display: grid; gap: 8px; }
.mh-scheda .mh-apri p { margin: 6px 0; }
.mh-riga.is-evento { box-shadow: inset 3px 0 0 var(--evidenza); }

/* ------------------------------------------------- Gli sponsor in cima a Home (atleta) */
.mh-sponsor-cima { display: grid; gap: 10px; }
.mh-sponsor-scorri { display: flex; gap: 14px; align-items: center; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: none; }
.mh-sponsor-scorri::-webkit-scrollbar { display: none; }
.mh-sponsor-scorri a { flex: 0 0 auto; scroll-snap-align: start; display: grid; place-items: center; height: 40px; padding: 4px 0; border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 13px; text-align: center; }
.mh-sponsor-scorri img { max-width: 96px; max-height: 30px; object-fit: contain; }
/* Il nastro degli sponsor (28/10/2026): i loghi passano da destra a
   sinistra di continuo, senza fermarsi. La fila e' doppia: a meta' giro la
   seconda copia e' dove stava la prima, e si riparte senza scatto. */
.mh-sponsor-nastro { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.mh-sponsor-binario { display: flex; width: max-content; animation: mh-nastro var(--giro, 20s) linear infinite; }
.mh-sponsor-binario a { flex: 0 0 auto; display: grid; place-items: center; height: 44px; padding: 5px 0; margin-right: 22px; border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 13px; text-align: center; }
.mh-sponsor-binario img { max-width: 104px; max-height: 32px; object-fit: contain; }
@keyframes mh-nastro { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mh-sponsor-posto { flex: 0 0 auto; display: grid; place-items: center; width: 88px; height: 40px; border-radius: var(--r-m); border: 1px dashed var(--line); color: var(--faint); font-size: 12px; }

/* Il «!» dei certificati (21/10/2026): triangolo arancione accanto al titolo. */
.mh-attenzione { display: inline-grid; place-items: center; vertical-align: -3px; margin-left: 4px; color: var(--evidenza); }
.mh-attenzione svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* Il regolamento accettato (28/10/2026): l'interruttore resta acceso e bloccato,
   ma pieno e col bordo verde, non spento come un campo che non si puo' usare. */
.mh-regolamento.is-accettato .switch:has(input:disabled) { opacity: 1; cursor: default; border-color: var(--good); }
.mh-regolamento.is-accettato .switch input:disabled + .switch-track { opacity: 1; }
.mh-blocco-link { color: var(--accent); font-size: 14px; font-weight: 600; text-decoration: none; }
/* Società: chi fa cosa coi tasti Chiama e WhatsApp (21/10/2026). */
.mh-contatto-tasti { display: flex; gap: 8px; }
.mh-tasto { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 99px; background: var(--surface-2); color: var(--accent); }
.mh-tasto svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.mh-portami b .mh-chip-prossima { display: inline-block; width: auto; margin-left: 6px; vertical-align: 2px; }

/* ------------------------------------------- Tema chiaro (22/10/2026, il cliente) */
/* Gli stessi pezzi, coi fondi chiari: bianco-azzurro e superfici bianche. I
   colori dei testi e dell'accento li cambia gia' il kit (body.theme-light). */
.app-atleta.theme-light {
  --ground: #e6edf7;
  --bg: #f4f7fc;
  --surface: #ffffff;
  --surface-2: #e8eef8;
  --line: rgb(11 22 56 / 11%);
  --faint: #7686a6;
  --good: #14894a;
  --warn: #b26b00;
  --bad: #cf3a2e;
  --evidenza: #e58a00;
  --evidenza-testo: #241500;
}
.app-atleta.theme-light .mh-righe, .app-atleta.theme-light .mh-prossima,
.app-atleta.theme-light .mh-portami { box-shadow: 0 6px 18px rgb(11 22 56 / 6%); }
.app-atleta.theme-light .mh-pallino.is-prenotata { box-shadow: 0 0 0 1.5px var(--faint), 0 0 0 5px rgb(11 22 56 / 6%); }
.app-atleta.theme-light .mh-sq { color: color-mix(in srgb, var(--kc, var(--accent)) 70%, #000); }
/* I loghi: col tema scuro la versione schiarita (SponsorService::logoScuro), col chiaro l'originale. */
.app-atleta .logo-chiaro { display: none; }
.app-atleta.theme-light .logo-chiaro { display: block; }
.app-atleta.theme-light .logo-scuro { display: none; }

/* Casa o trasferta: la casetta o il pulmino accanto alle partite in elenco. */
.ico-dove {
  display: inline-block; width: 16px; height: 16px; margin-right: 5px; vertical-align: -3px;
  fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
/* La prossima: casa o trasferta scritto, nel riquadro arancione. */
.mh-chip.is-dove { background: var(--evidenza); color: var(--evidenza-testo); }
.mh-prossima-piede .mh-homeaway.mh-dove-grande { margin-right: 4px; align-self: center; }
.mh-prossima-piede .mh-homeaway.mh-dove-grande .mh-cartone { width: 44px; height: 44px; }
.mh-dove { display: inline-block; padding: 0 8px; border-radius: 6px; background: var(--evidenza); color: var(--evidenza-testo); font-weight: 700; font-size: 12px; }

/* La galleria delle squadre (25/10/2026, il cliente): in Società e nella pagina di una squadra. */
.nascosto { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.galleria-copertina { width: 38px; height: 38px; border-radius: var(--r-s); object-fit: cover; display: block; }
/* Il riquadro Galleria arancio-giallo tenue come la prossima partita, per distinguerlo da
   allenamenti, roster e staff azzurri (26/10/2026; prima era grigio). */
.mh-galleria .mh-righe { background: color-mix(in srgb, var(--evidenza) 7%, var(--surface)); border-color: color-mix(in srgb, var(--evidenza) 20%, var(--line)); }
.mh-galleria .mh-riga + .mh-riga { border-top-color: color-mix(in srgb, var(--evidenza) 14%, var(--line)); }
.mh-galleria .mh-icona { background: var(--surface); }
.mh-galleria a.mh-riga:active, .mh-galleria a.mh-riga:hover { background: color-mix(in srgb, var(--evidenza) 12%, var(--surface)); }
.mh-galleria .mh-icona { color: var(--evidenza); }
.mh-galleria .mh-icona .foto-davanti { fill: var(--surface); }
.galleria-griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 720px) { .galleria-griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.galleria-foto { position: relative; display: block; aspect-ratio: 1; border-radius: var(--r-s); overflow: hidden; background: var(--surface-2); }
.galleria-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galleria-foto.is-attesa img { opacity: .6; }
.galleria-foto form { position: absolute; top: 4px; right: 4px; margin: 0; }
.galleria-togli { width: 28px; height: 28px; border: 0; border-radius: 99px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 14px; cursor: pointer; }

/* Le notifiche sul telefono (26/10/2026): la domanda appena si entra (notifiche.js). */
[data-notifiche] .mh-scheda { display: grid; gap: 10px; }
[data-notifiche] [hidden] { display: none !important; }
.mh-domanda {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: end center;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); background: rgb(4 10 29 / 55%);
}
@media (min-width: 600px) { .mh-domanda { place-items: center; } }
.mh-domanda-scheda {
  width: 100%; max-width: 420px; display: grid; gap: 12px; justify-items: center; text-align: center;
  padding: 24px 20px 20px; border-radius: var(--r-l); background: var(--surface); color: var(--text);
  box-shadow: 0 18px 50px rgb(0 0 0 / 30%);
}
.mh-domanda-scheda h2 { margin: 0; font-size: 21px; }
.mh-domanda-scheda p { margin: 0; color: var(--muted); line-height: 1.45; }
.mh-domanda-icona { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 99px; background: var(--surface-2); color: var(--accent); }
.mh-domanda-icona svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mh-domanda-azioni { display: grid; gap: 8px; width: 100%; margin-top: 4px; }
.mh-domanda-azioni .btn { width: 100%; justify-content: center; }
/* Il logo nuovo sull'iPhone (partials/icona-iphone.php): le due icone a confronto e i passi. */
.mh-icone-confronto { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 22px; }
.mh-icone-confronto figure { margin: 0; display: grid; gap: 4px; justify-items: center; font-size: 13px; }
.mh-icone-confronto img { width: 72px; height: 72px; border-radius: 16px; box-shadow: 0 2px 8px rgb(0 0 0 / 25%); }
.mh-icona-testo { display: grid; gap: 10px; }
.mh-icona-passi { margin: 0; padding-left: 20px; text-align: left; display: grid; gap: 6px; line-height: 1.45; }
/* Il testo delle novita' formattato come su WhatsApp (testo_ricco, 26/10/2026): la linea e i link. */
.app-atleta .novita-testo hr { margin: 12px 0; border: 0; border-top: 1px solid var(--line); }
.app-atleta .novita-testo a { color: var(--accent); overflow-wrap: anywhere; }
/* Azzurro tenue per allenamenti, roster e staff nella Casa dell'atleta (26/10/2026). */
.mh-azzurro .mh-righe { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); }
.mh-azzurro .mh-riga + .mh-riga { border-top-color: color-mix(in srgb, var(--accent) 16%, var(--line)); }
.mh-azzurro .mh-icona { background: var(--surface); }
.mh-azzurro a.mh-riga:active, .mh-azzurro a.mh-riga:hover { background: color-mix(in srgb, var(--accent) 15%, var(--surface)); }
/* Il visore delle foto della galleria (26/10/2026). */
.visore { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; overflow: hidden; background: rgb(0 0 0 / 94%); touch-action: none; }
.visore[hidden] { display: none; }
img[data-ingrandisci] { cursor: zoom-in; }
.visore-foto { max-width: 100vw; max-height: 100dvh; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.visore-chiudi, .visore-freccia {
  position: absolute; display: grid; place-items: center; border: 0; border-radius: 99px;
  background: rgb(255 255 255 / 16%); color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.visore-chiudi { top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; width: 44px; height: 44px; font-size: 20px; }
/* Scarica, accanto alla X (27/10/2026); da ingrandita le frecce si tolgono di mezzo. */
.visore-scarica { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 64px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgb(255 255 255 / 14%); color: #fff; }
.visore-scarica svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.visore-foto { transform-origin: center center; will-change: transform; }
.visore.is-zoom .visore-freccia, .visore.is-zoom .visore-conta { display: none; }
.visore-freccia { top: 50%; width: 44px; height: 44px; margin-top: -22px; font-size: 30px; line-height: 1; }
.visore-freccia[hidden] { display: none; }
.visore-freccia.is-prima { left: 10px; }
.visore-freccia.is-dopo { right: 10px; }
.visore-conta { position: absolute; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; text-align: center; color: rgb(255 255 255 / 80%); font-size: 14px; }
/* I riquadri piccoli del Profilo: notifiche, app, segnalazioni (26/10/2026: «fallo piccolo»). */
.mh-piccolo h2 { font-size: 15px; }
.mh-piccolo .mh-scheda { padding: 12px 14px; gap: 8px; }
.mh-piccolo .btn { min-height: 38px; padding: 6px 14px; font-size: 14px; }
.mh-piccolo .mh-nota, .mh-piccolo .mh-guida { font-size: 13px; }
/* Il pulsante apre il modulo (27/10/2026: il riquadro come gli altri, col titolo sopra). */
/* Il riquadro rosso con la scritta bianca e l'altoparlante (27/10/2026). */
/* Piu' piccolo e di un rosso piu' tenue (27/10/2026). */
.mh-piccolo .mh-segnala-rosso { --rosso-tenue: #e2706a; background: var(--rosso-tenue); border-color: var(--rosso-tenue); color: #fff; padding: 8px 12px; gap: 4px; }
.mh-segnala-rosso .mh-nota { color: rgb(255 255 255 / 90%); font-size: 12px; margin: 0; }
.mh-segnala-rosso .mh-segnala-modulo summary { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 700; font-size: 14px; color: #fff; }
.mh-segnala-icona { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: rgb(255 255 255 / 20%); }
.mh-segnala-icona svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mh-segnala-rosso .mh-segnala-modulo summary > span:nth-child(2) { flex: 1; }
.mh-segnala-rosso .mh-freccia { color: #fff; opacity: .85; }
.mh-segnala-rosso .mh-scelte, .mh-segnala-rosso .mh-scelte label { color: #fff; }
.mh-segnala-rosso .mh-segnala-modulo textarea { background: #fff; color: #1a1a1a; border-color: transparent; }
.mh-segnala-rosso .mh-segnala-modulo .btn { background: #fff; color: #c2453e; border-color: #fff; }
.mh-segnala-modulo summary { list-style: none; width: 100%; }
.mh-segnala-modulo summary::-webkit-details-marker { display: none; }
.mh-segnala-modulo[open] summary { display: none; }
.mh-segnala-modulo form { display: grid; gap: 10px; }
.mh-segnala-modulo textarea { width: 100%; font: inherit; font-size: 15px; padding: 10px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--surface-2); color: var(--text); }
.mh-scelte { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }

/* L'IBAN nel Profilo, col pulsante Copia sotto (26/10/2026). */
/* Profilo (28/10/2026): quota e certificato piccoli in cima, i documenti in un riquadro grigio chiaro. */
.mh-compatto { gap: 8px; }
.mh-compatto h2 { font-size: 15px; }
.mh-compatto .mh-scheda { padding: 12px 14px; gap: 6px; }
.mh-compatto .mh-stato { font-size: 14px; color: var(--text); }
.mh-apri-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.mh-apri-cert > summary { cursor: pointer; list-style: none; color: var(--accent); font-weight: 600; }
.mh-apri-cert > summary::-webkit-details-marker { display: none; }
.mh-apri-cert[open] > summary { margin-bottom: 8px; }
.mh-apri-cert .mh-visita { margin-top: 10px; }
.mh-riga-grigia { border-radius: var(--r-l); border: 1px solid var(--line); background: color-mix(in srgb, var(--text) 6%, var(--bg)); }
.mh-riga-grigia.is-bianca { background: var(--surface); }   /* «Segnala un errore nei dati»: stessa forma, fondo normale */
.mh-grigio { padding: 14px; border-radius: var(--r-l); background: color-mix(in srgb, var(--text) 6%, var(--bg)); border: 1px solid var(--line); }
.mh-dati .mh-copia { display: block; margin: 6px 0 0 auto; padding: 4px 12px; min-height: 0; font-size: .85rem; }

/* L'amministrazione in cima alla Casa (26/10/2026): un riquadro nel colore degli avvisi. */
.mh-admin-da-fare { margin-bottom: 4px; }
.mh-admin-da-fare h2 { color: var(--warn); }
.mh-admin-da-fare .mh-righe { background: color-mix(in srgb, var(--warn) 9%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 32%, var(--line)); }
.mh-admin-da-fare .mh-riga + .mh-riga { border-top-color: color-mix(in srgb, var(--warn) 18%, var(--line)); }
.mh-admin-da-fare .mh-icona { background: var(--surface); color: var(--warn); }

/* Le breaking news (26/10/2026): la striscia che scorre come a Sky TG24, sotto
   «Stagione …» e prima di «Da sapere»; il titolo toccato apre il popup.
   Rifatta la sera stessa (AQS: «giallone come il logo, più dinamica, più
   stilosa»): fondo blu notte da telegiornale, etichetta gialla del sole del logo
   tagliata in diagonale con un riflesso che passa, il pallino «in diretta» che
   pulsa, un fulmine fra le notizie e sotto una linea gialla che corre. */
/* Sul computer la striscia sta in cima, larga quanto le due colonne (27/10/2026). */
@media (min-width: 1000px) { .mh-home-atleta > .mh-eroe, .mh-home-atleta > .mh-breaking, .mh-home-atleta > .mh-compleanno, .mh-home-atleta > .mh-mvp { grid-column: 1 / -1; } }
/* I compleanni (28/10/2026): un riquadro di festa tenue, giallo del sole e rosa, che va col tema chiaro e scuro. */
/* Piu' piccolo (28/10/2026: «troppo grande il box»; ancora un po' il 30/10). */
.mh-compleanno {
  padding: 5px 10px; border-radius: var(--r-s, 10px);
  background: linear-gradient(135deg, rgb(255 198 26 / 20%), rgb(255 110 170 / 16%));
  border: 1px solid rgb(255 170 60 / 40%);
  animation: mh-entra .5s cubic-bezier(.2, .9, .3, 1.2) both;
}
/* Centrato, e la seconda riga sempre centrata sotto la prima (30/10/2026): le due righe
   in colonna, ognuna centrata da sé, cosi' nessuna regola della Casa le sposta a sinistra. */
.mh-compleanno { text-align: center; }
.mh-compleanno p { margin: 0; line-height: 1.25; display: flex; flex-direction: column; align-items: center; text-align: center; }
.mh-compleanno b { display: block; width: 100%; text-align: center; font: 650 12.5px/1.25 var(--font-display); }
.mh-compleanno span { display: block; width: 100%; text-align: center; font-size: 11px; line-height: 1.25; color: var(--muted, inherit); }
/* Sempre su due righe (03/11/2026): il testo si rimpicciolisce con la larghezza del riquadro, quindi
   il nome sta su una riga e gli auguri su un'altra, anche con due festeggiati. */
.mh-compleanno { container-type: inline-size; }
.mh-compleanno b, .mh-compleanno span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-compleanno b { font-size: clamp(9px, 3.7cqi, 13px); }
.mh-compleanno span { font-size: clamp(8px, 3.2cqi, 11px); }
@media (prefers-reduced-motion: reduce) { .mh-compleanno { animation: none; } }
.mh-breaking, .mh-breaking-popup { --sole: linear-gradient(135deg, #ffe14d 0%, #ffc61a 45%, #f59e00 100%); }
.mh-breaking {
  position: relative; display: flex; align-items: stretch; overflow: hidden;
  /* Lo sfondo piu' chiaro, un blu mare (26/10/2026: «troppo scuro»). */
  border-radius: 8px; background: linear-gradient(90deg, #2c58b8, #3f73d6); color: #fff;
  box-shadow: 0 3px 10px -6px rgb(30 70 160 / 45%);
  animation: mh-entra .5s cubic-bezier(.2, .9, .3, 1.2) both;
}
/* La linea gialla che corre sotto. */
.mh-breaking::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: linear-gradient(90deg, transparent, #ffd21f 30%, #f59e00 50%, #ffd21f 70%, transparent) 0 0 / 50% 100% repeat-x;
  animation: mh-corre 2.4s linear infinite;
}
.mh-breaking-etichetta {
  position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 0 13px 0 7px; overflow: hidden;
  background: var(--sole); color: #12275e;
  font: 700 10px/1 var(--font-display); font-style: italic; letter-spacing: .05em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
/* Il riflesso che attraversa l'etichetta ogni tanto. */
.mh-breaking-etichetta::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 75%), transparent);
  transform: skewX(-20deg); animation: mh-riflesso 3.2s ease-in-out infinite;
}
.mh-breaking-live { flex: none; width: 5px; height: 5px; border-radius: 50%; background: #d7261e; box-shadow: 0 0 0 0 rgb(215 38 30 / 70%); animation: mh-diretta 1.4s ease-out infinite; }
.mh-breaking-finestra { flex: 1; min-width: 0; overflow: hidden; margin-left: -8px; padding-left: 8px; mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 18px), transparent); }
.mh-breaking-nastro { display: flex; width: max-content; animation: mh-scorri var(--durata, 20s) linear infinite; }
/* Si ferma solo col mouse sopra, sul computer: sul telefono, chiuso il popup, riparte (26/10/2026). */
@media (hover: hover) and (pointer: fine) { .mh-breaking:hover .mh-breaking-nastro { animation-play-state: paused; } }
.mh-breaking-giro { display: flex; align-items: center; flex: none; }
.mh-breaking-voce {
  padding: 7px 2px 8px; border: 0; background: none; color: #fff; cursor: pointer;
  font: 500 13px/1.2 var(--font-display); letter-spacing: .015em; white-space: nowrap;
}
.mh-breaking-voce:active { color: #ffd21f; }
.mh-breaking-punto { display: inline-flex; padding: 0 11px; }
.mh-breaking-punto svg { width: 10px; height: 10px; fill: #ffc61a; filter: drop-shadow(0 0 4px rgb(255 198 26 / 60%)); }
@keyframes mh-scorri { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mh-corre { to { background-position: 100% 0; } }
@keyframes mh-riflesso { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
@keyframes mh-diretta { 0% { box-shadow: 0 0 0 0 rgb(215 38 30 / 70%); } 100% { box-shadow: 0 0 0 9px rgb(215 38 30 / 0%); } }
@keyframes mh-entra { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@media (prefers-reduced-motion: reduce) {
  .mh-breaking, .mh-breaking::after, .mh-breaking-etichetta::after, .mh-breaking-live, .mh-breaking-nastro { animation: none; }
  .mh-breaking-finestra { overflow-x: auto; mask-image: none; }
}
/* Il popup: in cima la fascia gialla «in diretta», la scheda sale dal basso. */
.mh-breaking-popup {
  width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 64px); padding: 0; overflow: auto;
  border: 0; border-radius: 22px; background: var(--surface); color: var(--text);
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / 50%);
}
.mh-breaking-popup[open] { animation: mh-sale .35s cubic-bezier(.2, .9, .3, 1.15); }
.mh-breaking-popup::backdrop { background: rgb(4 10 29 / 60%); backdrop-filter: blur(3px); }
.mh-breaking-popup .mh-breaking-etichetta { display: flex; padding: 9px 20px; clip-path: none; font-size: 11px; }
.mh-breaking-popup h2, .mh-breaking-testo, .mh-breaking-quando, .mh-breaking-popup form { margin-left: 20px; margin-right: 20px; }
.mh-breaking-popup h2 { margin-top: 16px; margin-bottom: 10px; font: 650 19px/1.25 var(--font-display); }
.mh-breaking-testo { font-size: 15px; line-height: 1.55; }
.mh-breaking-quando { margin-top: 12px; margin-bottom: 12px; color: var(--faint); font-size: 13px; }
.mh-breaking-popup form { display: flex; justify-content: flex-end; margin-bottom: 18px; }
/* In fondo: «2 di 3», «Successiva ›» piccolo e Chiudi (30/10/2026). */
.mh-breaking-azioni { display: flex; align-items: center; gap: 10px; margin: 0 20px 18px; }
.mh-breaking-popup .mh-breaking-quando { margin-bottom: 22px; }
.mh-breaking-popup .mh-breaking-azioni, .mh-mvp-popup .mh-breaking-azioni { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.mh-breaking-popup .mh-breaking-azioni form { margin: 0 0 0 auto; }
.mh-breaking-conta { color: var(--faint); font-size: 12px; }
/* Stessi colori della fascia gialla della Flash news (blu su giallo); negli MVP, oro. */
.mh-breaking-dopo { padding: 6px 14px; border: 0; border-radius: 99px; background: var(--sole, linear-gradient(135deg, #ffe14d 0%, #ffc61a 45%, #f59e00 100%)); color: #12275e; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.mh-mvp-popup .mh-breaking-azioni { margin-left: 24px; margin-right: 24px; }
.mh-mvp-popup .mh-breaking-conta { color: #7a5200; }
.mh-mvp-popup .mh-breaking-dopo { background: linear-gradient(135deg, #ffe58a, #ffc93c 55%, #e0a800); color: #5a3d00; }
@keyframes mh-sale { from { opacity: 0; transform: translateY(28px) scale(.97); } }
/* «FLASH» sopra «NEWS», stretta (26/10/2026). */
.mh-breaking-scritta { display: block; font-size: 9px; line-height: 1.05; letter-spacing: .06em; }

/* Amministrazione → MVP (01/11/2026): il vincitore in evidenza nel conto dei voti. */
.mvp-vincitore td { background: rgb(252 158 1 / 12%); font-weight: 600; }
.mvp-a-mano { margin-top: 14px; }
/* Tabelle MVP dell'amministrazione (01/11/2026): contenuto delle celle al centro; classifica a menu per squadra. */
.mvp-centra th, .mvp-centra td { text-align: center; }.mvp-squadra-menu { margin-top: 8px; border: 1px solid var(--line, rgb(128 128 128 / 30%)); border-radius: 12px; padding: 0 12px; }
.mvp-squadra-menu > summary { cursor: pointer; padding: 12px 0; list-style: none; display: flex; align-items: center; gap: 8px; }
.mvp-squadra-menu > summary::-webkit-details-marker { display: none; }
.mvp-squadra-menu > summary::after { content: "›"; margin-left: auto; transition: transform .2s; font-size: 18px; }
.mvp-squadra-menu[open] > summary::after { transform: rotate(90deg); }
.mvp-squadra-menu[open] > summary { border-bottom: 1px solid var(--line, rgb(128 128 128 / 30%)); margin-bottom: 8px; }

/* ===================================================================
   L'MVP della settimana, «pompato» (01/11/2026: «effetti speciali,
   fai tu»). Un palco blu notte e oro, uguale nei due temi: bordo d'oro che
   gira, titolo che luccica, raggi dietro la coppa, coriandoli al voto e alla
   presentazione degli MVP del mercoledi'. Con «riduci movimento» sta fermo.
   =================================================================== */
.mh-mvp, .mh-mvp-popup {
  --oro: #ffc93c; --oro-2: #fc9e01; --oro-chiaro: #fff1b8; --palco: #0b1638; --palco-2: #13265e;
  --mvp-testo: #f4f7ff; --mvp-tenue: rgb(220 230 255 / 72%);
}
@property --mvp-giro { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes mvp-giro { to { --mvp-giro: 360deg; } }
@keyframes mvp-luccica { 0%, 55% { background-position: 200% 0; } 100% { background-position: -100% 0; } }
@keyframes mvp-raggi { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes mvp-coppa { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(4deg); } }
@keyframes mvp-alone { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes mvp-arriva { from { opacity: 0; transform: translateY(14px) scale(.94); } }
@keyframes mvp-gira-carta { from { opacity: 0; transform: perspective(600px) rotateX(-75deg) translateY(10px); } }
@keyframes mvp-pulsa { 0%, 100% { box-shadow: 0 0 0 0 rgb(255 201 60 / 55%), 0 8px 24px -10px rgb(255 201 60 / 70%); } 50% { box-shadow: 0 0 0 6px rgb(255 201 60 / 0%), 0 8px 30px -8px rgb(255 201 60 / 90%); } }
@keyframes mvp-spunta { 0% { transform: scale(0) rotate(-30deg); } 70% { transform: scale(1.25) rotate(8deg); } 100% { transform: scale(1); } }
@keyframes mvp-scintilla { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(90deg); } }
@keyframes mvp-fatto { 0% { transform: scale(.2); opacity: 0; } 60% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); } }

/* ---- il riquadro nella Casa ---- */
.mh-mvp { position: relative; isolation: isolate; padding: 16px 14px 14px; border-radius: 20px; color: var(--mvp-testo); overflow: hidden;
  background: radial-gradient(120% 90% at 50% -10%, rgb(255 201 60 / 22%), transparent 60%), linear-gradient(160deg, var(--palco-2), var(--palco) 70%);
  box-shadow: 0 18px 40px -22px rgb(255 170 0 / 70%); animation: mh-entra .5s cubic-bezier(.2, .9, .3, 1.2) both; }
/* Il bordo d'oro che gira. */
.mh-mvp::before { content: ''; position: absolute; inset: 0; z-index: -1; padding: 1.5px; border-radius: inherit;
  background: conic-gradient(from var(--mvp-giro), rgb(255 201 60 / 15%), var(--oro), var(--oro-chiaro), var(--oro-2), rgb(255 201 60 / 15%) 40%, rgb(255 201 60 / 15%));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: mvp-giro 6s linear infinite; }
/* Le scintille. */
.mh-mvp-scintille i { position: absolute; z-index: -1; width: 10px; height: 10px; pointer-events: none;
  background: radial-gradient(circle, #fff 0 18%, transparent 20%), conic-gradient(from 45deg, transparent 0 10%, var(--oro-chiaro) 12% 13%, transparent 15% 35%, var(--oro-chiaro) 37% 38%, transparent 40% 60%, var(--oro-chiaro) 62% 63%, transparent 65% 85%, var(--oro-chiaro) 87% 88%, transparent 90%);
  animation: mvp-scintilla 2.8s ease-in-out infinite; }
.mh-mvp-scintille i:nth-child(1) { top: 14px; right: 22px; }
.mh-mvp-scintille i:nth-child(2) { top: 46px; right: 64px; width: 7px; height: 7px; animation-delay: .9s; }
.mh-mvp-scintille i:nth-child(3) { bottom: 18px; left: 18px; width: 8px; height: 8px; animation-delay: 1.7s; }
.mh-mvp-scintille i:nth-child(4) { top: 20px; left: 46%; width: 6px; height: 6px; animation-delay: 2.3s; }
.mh-mvp-testa { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mh-mvp-coppa { position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; font-size: 28px; }
.mh-mvp-coppa::before { content: ''; position: absolute; inset: -6px; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgb(255 201 60 / 55%), transparent 68%); animation: mvp-alone 2.4s ease-in-out infinite; }
.mh-mvp-coppa span { display: block; animation: mvp-coppa 2.6s ease-in-out infinite; filter: drop-shadow(0 3px 6px rgb(0 0 0 / 40%)); }
.mh-mvp h2, .mh-mvp-popup h2 { margin: 0; font: 800 19px/1.15 var(--font-display); letter-spacing: -.01em;
  background: linear-gradient(100deg, var(--oro-2) 0%, var(--oro) 30%, #fff 45%, var(--oro) 60%, var(--oro-2) 100%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: mvp-luccica 4.5s ease-in-out infinite; }
.mh-mvp-testa small { display: block; margin-top: 2px; color: var(--mvp-tenue); font-size: 12px; }
.mh-mvp-elenco { display: grid; gap: 8px; }
@media (min-width: 700px) { .mh-mvp-elenco { grid-template-columns: 1fr 1fr; } }
.mh-mvp-uno { position: relative; display: flex; align-items: center; gap: 11px; min-width: 0; padding: 9px 12px 9px 9px; border-radius: 14px;
  background: linear-gradient(100deg, rgb(255 201 60 / 16%), rgb(255 255 255 / 4%) 55%); border: 1px solid rgb(255 201 60 / 28%);
  animation: mvp-gira-carta .7s cubic-bezier(.2, .9, .3, 1.15) both; animation-delay: calc(var(--i, 0) * 120ms + 150ms); }
.mh-mvp-uno > span:last-child { display: grid; min-width: 0; }
.mh-mvp-uno small { color: var(--oro); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.mh-mvp-uno b { font-size: 15.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* La medaglia col numero e la coroncina. */
.mh-mvp-medaglia { position: relative; display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6cf, var(--oro) 45%, #c47a00); color: #3b2400; font: 800 15px/1 var(--font-display);
  box-shadow: inset 0 -3px 6px rgb(120 60 0 / 45%), 0 4px 12px -4px rgb(255 190 40 / 80%); }
.mh-mvp-medaglia::after { content: '👑'; position: absolute; top: -12px; right: -7px; font-size: 15px; transform: rotate(18deg); filter: drop-shadow(0 2px 2px rgb(0 0 0 / 40%)); }
.mh-mvp-nota { margin: 11px 0 0; color: var(--mvp-tenue); font-size: 12px; line-height: 1.35; }
.mh-mvp-rivedi { padding: 0; border: 0; background: none; color: var(--oro); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.mh-mvp-vota { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 12px; padding: 13px 14px; border: 0; border-radius: 14px;
  overflow: hidden; background: linear-gradient(100deg, var(--oro-2), var(--oro) 55%, #ffe27a); color: #2a1800;
  font: inherit; font-size: 15px; font-weight: 800; text-align: left; cursor: pointer; animation: mvp-pulsa 2.2s ease-in-out infinite; }
.mh-mvp-vota::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 65%) 45%, transparent 60%);
  background-size: 250% 100%; animation: mvp-luccica 3s ease-in-out infinite; pointer-events: none; }
.mh-mvp-vota:first-child { margin-top: 0; }
.mh-mvp-vota span:last-child { margin-left: auto; font-size: 18px; }

/* ---- i pop-up (voto e presentazione) ---- */
.mh-mvp-popup { width: min(460px, calc(100vw - 24px)); max-height: calc(100dvh - 40px); padding: 0; overflow: auto; border: 0; border-radius: 26px;
  color: var(--mvp-testo); background: radial-gradient(130% 60% at 50% 0%, rgb(255 201 60 / 26%), transparent 55%), linear-gradient(170deg, var(--palco-2), var(--palco) 60%);
  box-shadow: 0 0 0 1.5px rgb(255 201 60 / 55%), 0 30px 80px -20px rgb(255 170 0 / 55%); }
.mh-mvp-popup[open] { animation: mh-sale .45s cubic-bezier(.2, .9, .3, 1.2); }
.mh-mvp-popup::backdrop { background: radial-gradient(circle at 50% 30%, rgb(40 30 0 / 55%), rgb(2 6 20 / 82%)); backdrop-filter: blur(5px); }
.mh-mvp-passo { padding: 0 18px 18px; }
.mh-mvp-palco { position: relative; display: grid; justify-items: center; gap: 8px; padding: 26px 0 14px; text-align: center; overflow: hidden; margin: 0 -18px 4px; }
/* I raggi di luce che girano dietro la coppa. */
.mh-mvp-palco::before { content: ''; position: absolute; left: 50%; top: 58px; z-index: 0; width: 520px; height: 520px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgb(255 201 60 / 20%) 0 7deg, transparent 7deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 0 15%, transparent 55%); mask: radial-gradient(circle, #000 0 15%, transparent 55%);
  transform: translate(-50%, -50%); animation: mvp-raggi 26s linear infinite; }
.mh-mvp-palco > * { position: relative; z-index: 1; }
.mh-mvp-palco .mh-mvp-coppa { width: 74px; height: 74px; font-size: 52px; }
.mh-mvp-palco .mh-mvp-coppa::before { inset: -14px; }
.mh-mvp-popup h2 { font-size: 25px; }
.mh-mvp-sotto { margin: 0; font-size: 14px; line-height: 1.45; color: var(--mvp-tenue); }
.mh-mvp-domanda { margin: 14px 0 10px; font: 700 16px/1.3 var(--font-display); color: #fff; text-align: center; }
/* La partita dal calendario: il tabellone. */
.mh-mvp-gara { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; align-items: center; margin: 12px 0 0; padding: 11px 13px;
  border-radius: 14px; background: rgb(0 0 0 / 28%); border: 1px solid rgb(255 255 255 / 12%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%); text-align: left; }
.mh-mvp-gara > span { display: grid; gap: 3px; min-width: 0; font-size: 13.5px; }
.mh-mvp-gara > span b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.mh-mvp-gara strong { grid-row: 1; grid-column: 2; padding: 4px 9px; border-radius: 9px; background: rgb(255 201 60 / 16%); color: var(--oro); font: 800 22px/1 var(--font-display); }
.mh-mvp-gara small { grid-column: 1 / -1; color: var(--mvp-tenue); font-size: 12px; }
.mh-mvp-lista { display: grid; gap: 7px; max-height: 42dvh; overflow: auto; padding: 6px 8px; margin: 0 -8px; }
.mh-mvp-voce { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 11px; border: 1.5px solid rgb(255 255 255 / 12%); border-radius: 14px;
  background: rgb(255 255 255 / 5%); color: #fff; font: inherit; text-align: left; cursor: pointer;
  transition: transform .18s, border-color .18s, background .18s; animation: mvp-arriva .4s ease-out both; animation-delay: calc(var(--i, 0) * 35ms + 120ms); }
.mh-mvp-voce:active { transform: scale(.98); }
.mh-mvp-voce b { flex: 1; font-size: 15px; }
.mh-mvp-voce .mh-mvp-medaglia { width: 36px; height: 36px; font-size: 13px; background: rgb(255 255 255 / 10%); color: #fff; box-shadow: none; transition: background .2s, color .2s; }
.mh-mvp-voce .mh-mvp-medaglia::after { content: none; }
.mh-mvp-spunta { display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid rgb(255 255 255 / 25%); border-radius: 99px; flex: none; font-size: 13px; color: #2a1800; }
.mh-mvp-voce[aria-checked="true"] { border-color: var(--oro); background: linear-gradient(100deg, rgb(255 201 60 / 26%), rgb(255 201 60 / 8%)); transform: scale(1.02);
  box-shadow: 0 0 0 3px rgb(255 201 60 / 18%), 0 10px 24px -12px rgb(255 190 40 / 90%); }
.mh-mvp-voce[aria-checked="true"] .mh-mvp-medaglia { background: radial-gradient(circle at 35% 30%, #fff6cf, var(--oro) 45%, #c47a00); color: #3b2400; }
.mh-mvp-voce[aria-checked="true"] .mh-mvp-spunta { border-color: var(--oro); background: var(--oro); animation: mvp-spunta .35s cubic-bezier(.2, .9, .3, 1.4); }
.mh-mvp-voce[aria-checked="true"] .mh-mvp-spunta::before { content: '✓'; font-weight: 900; }
.mh-mvp-piccolo { margin: 12px 0 0; color: var(--mvp-tenue); font-size: 12px; text-align: center; }
.mh-mvp-azioni { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.mh-mvp-azioni form { margin: 0; }
.mh-mvp-popup .btn { min-height: 46px; padding: 0 20px; border-radius: 14px; border: 0; font-weight: 800; }
.mh-mvp-popup .btn:not(.secondary) { background: linear-gradient(100deg, var(--oro-2), var(--oro) 55%, #ffe27a); color: #2a1800; box-shadow: 0 10px 24px -10px rgb(255 190 40 / 90%); }
.mh-mvp-popup .btn:not(.secondary):disabled { opacity: .4; box-shadow: none; }
.mh-mvp-popup .btn.secondary { background: rgb(255 255 255 / 10%); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 18%); }
.mh-mvp-scelto { display: grid; justify-items: center; gap: 8px; margin: 16px 0 4px; }
.mh-mvp-scelto .mh-mvp-medaglia { width: 64px; height: 64px; font-size: 22px; animation: mvp-fatto .5s cubic-bezier(.2, .9, .3, 1.3) both; }
.mh-mvp-scelto b { font: 800 21px/1.2 var(--font-display); color: #fff; }
.mh-mvp-ok { display: grid; place-items: center; width: 78px; height: 78px; margin: 0 auto; border-radius: 50%; font-size: 40px; color: #2a1800;
  background: radial-gradient(circle at 35% 30%, #fff6cf, var(--oro) 50%, #c47a00); box-shadow: 0 0 0 8px rgb(255 201 60 / 15%), 0 0 40px rgb(255 201 60 / 60%);
  animation: mvp-fatto .6s cubic-bezier(.2, .9, .3, 1.3) both; }
.mh-mvp-errore { color: #ffb4a8; }
/* La presentazione del mercoledi': le carte degli MVP una dopo l'altra. */
.mh-mvp-rivela .mh-mvp-elenco { grid-template-columns: 1fr; margin-top: 6px; }
.mh-mvp-rivela .mh-mvp-uno { padding: 12px 14px 12px 12px; animation-delay: calc(var(--i, 0) * 380ms + 500ms); animation-duration: .8s; }
.mh-mvp-rivela .mh-mvp-uno b { font-size: 17px; }
.mh-mvp-rivela .mh-mvp-medaglia { width: 48px; height: 48px; font-size: 17px; }
/* Il pop-up del voto piu' piccolo e piu' giocoso (01/11/2026: «colori piu' freschi e
   dinamici»): mare e cielo (azzurro, blu, un tocco di viola) con pallini colorati come coriandoli
   fermi, giallo sole per scelta e pulsante, corallo per la medaglia. Tutto un po' piu' stretto. */
.mh-mvp-popup {
  --oro: #ffe14d; --oro-2: #ffb800; --oro-chiaro: #fff8c4; --palco: #2f5bea; --palco-2: #12b8e8;
  --mvp-corallo: #ff6b8b; --mvp-lime: #b6f23c;
  width: min(380px, calc(100vw - 24px)); border-radius: 22px;
  background:
    radial-gradient(circle at 12% 18%, rgb(255 225 77 / 55%) 0 4px, transparent 5px),
    radial-gradient(circle at 86% 12%, rgb(255 107 139 / 60%) 0 5px, transparent 6px),
    radial-gradient(circle at 92% 46%, rgb(182 242 60 / 55%) 0 3px, transparent 4px),
    radial-gradient(circle at 6% 62%, rgb(255 255 255 / 45%) 0 3px, transparent 4px),
    radial-gradient(circle at 78% 88%, rgb(255 225 77 / 45%) 0 4px, transparent 5px),
    radial-gradient(120% 55% at 50% 0%, rgb(255 255 255 / 22%), transparent 60%),
    linear-gradient(165deg, var(--palco-2), var(--palco) 62%, #6b4de6);
  box-shadow: 0 0 0 2px rgb(255 255 255 / 35%), 0 26px 70px -20px rgb(18 120 232 / 70%);
}
/* Il logo Oltremare in filigrana su tutto il pop-up (01/11/2026): grande, trasparente, dietro a tutto. */
.mh-mvp-popup::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: url("../img/logo-360.png") center / 92% auto no-repeat; opacity: .07; }
.mh-mvp-popup::backdrop { background: radial-gradient(circle at 50% 30%, rgb(0 60 120 / 45%), rgb(2 6 20 / 78%)); }
.mh-mvp-popup .mh-mvp-passo { padding: 0 14px 14px; }
.mh-mvp-popup .mh-mvp-palco { gap: 5px; padding: 18px 0 8px; margin: 0 -14px 2px; }
.mh-mvp-popup .mh-mvp-palco::before { top: 44px; width: 380px; height: 380px; background: repeating-conic-gradient(from 0deg, rgb(255 255 255 / 16%) 0 7deg, transparent 7deg 20deg); }
.mh-mvp-popup .mh-mvp-palco .mh-mvp-coppa { width: 54px; height: 54px; font-size: 36px; }
.mh-mvp-popup .mh-mvp-palco .mh-mvp-coppa::before { inset: -10px; background: radial-gradient(circle, rgb(255 255 255 / 55%), transparent 68%); }
.mh-mvp-popup h2 { font-size: 20px; }
.mh-mvp-popup .mh-mvp-sotto { font-size: 12.5px; color: rgb(255 255 255 / 85%); }
.mh-mvp-popup .mh-mvp-domanda { margin: 10px 0 8px; font-size: 14px; }
.mh-mvp-popup .mh-mvp-gara { margin-top: 8px; padding: 8px 10px; border-radius: 12px; background: rgb(255 255 255 / 16%); }
.mh-mvp-popup .mh-mvp-gara > span { font-size: 12.5px; }
.mh-mvp-popup .mh-mvp-gara strong { font-size: 18px; background: rgb(255 255 255 / 22%); color: #fff; }
.mh-mvp-popup .mh-mvp-lista { gap: 5px; max-height: 38dvh; }
.mh-mvp-popup .mh-mvp-voce { gap: 9px; padding: 6px 9px; border-radius: 12px; border-color: rgb(255 255 255 / 22%); background: rgb(255 255 255 / 10%); }
.mh-mvp-popup .mh-mvp-voce:hover { transform: rotate(-.6deg) scale(1.01); }
.mh-mvp-popup .mh-mvp-voce b { font-size: 13.5px; }
.mh-mvp-popup .mh-mvp-voce .mh-mvp-medaglia { width: 30px; height: 30px; font-size: 11.5px; background: rgb(255 255 255 / 18%); }
.mh-mvp-popup .mh-mvp-voce:nth-child(4n+1) .mh-mvp-medaglia { background: rgb(255 225 77 / 35%); }
.mh-mvp-popup .mh-mvp-voce:nth-child(4n+2) .mh-mvp-medaglia { background: rgb(255 107 139 / 40%); }
.mh-mvp-popup .mh-mvp-voce:nth-child(4n+3) .mh-mvp-medaglia { background: rgb(182 242 60 / 35%); }
.mh-mvp-popup .mh-mvp-voce:nth-child(4n+4) .mh-mvp-medaglia { background: rgb(255 255 255 / 25%); }
.mh-mvp-popup .mh-mvp-voce[aria-checked="true"] { border-color: var(--oro); background: linear-gradient(100deg, rgb(255 225 77 / 38%), rgb(255 107 139 / 22%)); transform: scale(1.03) rotate(-.8deg); }
.mh-mvp-popup .mh-mvp-voce[aria-checked="true"] .mh-mvp-medaglia { background: radial-gradient(circle at 35% 30%, #fff, var(--mvp-corallo) 55%, #e0436a); color: #fff; }
.mh-mvp-popup .mh-mvp-spunta { width: 20px; height: 20px; font-size: 11px; border-color: rgb(255 255 255 / 40%); }
.mh-mvp-popup .mh-mvp-piccolo { margin-top: 8px; font-size: 11.5px; color: rgb(255 255 255 / 80%); }
.mh-mvp-popup .mh-mvp-azioni { margin-top: 12px; gap: 8px; }
.mh-mvp-popup .btn { min-height: 40px; padding: 0 16px; border-radius: 99px; font-size: 14px; }
.mh-mvp-popup .btn:not(.secondary) { background: linear-gradient(100deg, var(--oro), #ffd23a 50%, var(--mvp-lime)); color: #1d2a00; box-shadow: 0 8px 20px -8px rgb(255 225 77 / 90%); }
.mh-mvp-popup .btn.secondary { background: rgb(255 255 255 / 16%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 30%); }
.mh-mvp-popup .mh-mvp-scelto { margin: 10px 0 2px; gap: 6px; }
.mh-mvp-popup .mh-mvp-scelto .mh-mvp-medaglia { width: 50px; height: 50px; font-size: 18px; background: radial-gradient(circle at 35% 30%, #fff, var(--mvp-corallo) 55%, #e0436a); color: #fff; }
.mh-mvp-popup .mh-mvp-scelto b { font-size: 18px; }
.mh-mvp-popup .mh-mvp-ok { width: 60px; height: 60px; font-size: 30px; background: linear-gradient(135deg, var(--mvp-lime), var(--oro)); }
.mh-mvp-popup.mh-mvp-rivela .mh-mvp-uno { padding: 9px 11px 9px 9px; }
.mh-mvp-popup.mh-mvp-rivela .mh-mvp-uno b { font-size: 15px; }
.mh-mvp-popup.mh-mvp-rivela .mh-mvp-medaglia { width: 40px; height: 40px; font-size: 14px; }
/* Ancora nel pop-up (01/11/2026): i numeri dentro un pallone da pallavolo stilizzato
   (bianco, spicchi blu e gialli, il numero sopra); la parola MVP grande, a colori, che si muove;
   la partita e il palco tutti centrati. */
/* Poi (stesso giorno): il numero di maglia torna accanto al nome, in un riquadrino tutto uguale;
   il pallone diventa il pulsante di scelta a destra (prima il cerchio con la spunta). */
.mh-mvp-popup .mh-mvp-medaglia,
.mh-mvp-popup .mh-mvp-voce .mh-mvp-medaglia,
.mh-mvp-popup .mh-mvp-voce:nth-child(n) .mh-mvp-medaglia,
.mh-mvp-popup .mh-mvp-scelto .mh-mvp-medaglia,
.mh-mvp-popup .mh-mvp-voce[aria-checked="true"] .mh-mvp-medaglia {
  border-radius: 10px; background: rgb(255 255 255 / 22%); color: #fff; font-weight: 900;
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 45%); text-shadow: none;
}
.mh-mvp-popup .mh-mvp-voce[aria-checked="true"] .mh-mvp-medaglia { background: rgb(255 255 255 / 34%); }
.mh-mvp-popup .mh-mvp-medaglia::after { content: none; }
@keyframes mvp-rimbalzo { 0% { transform: rotate(-200deg) scale(.6); } 60% { transform: rotate(20deg) scale(1.25); } 100% { transform: rotate(0) scale(1.12); } }
.mh-mvp-popup .mh-mvp-spunta,
.mh-mvp-popup .mh-mvp-voce[aria-checked="true"] .mh-mvp-spunta {
  width: 42px; height: 42px; flex: none; border: 0; border-radius: 50%; font-size: 0;
  /* Pallone stile Mikasa: spicchi gialli e blu a fasce curve, con le cuciture sottili. */
  background: #ffc93c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Ccircle cx='20' cy='20' r='19'/%3E%3C/clipPath%3E%3CradialGradient id='l' cx='.35' cy='.3' r='.75'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.45'/%3E%3Cstop offset='.5' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='.25'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='19' fill='%23ffc93c'/%3E%3Cg clip-path='url(%23c)'%3E%3Cpath d='M-2 8C8 3 16 7 22 -2L30 -2C22 8 14 12 -2 17Z' fill='%232150c8'/%3E%3Cpath d='M-2 27C8 20 20 22 26 12C30 6 36 8 42 4L42 14C34 16 32 24 24 30C16 36 6 34 -2 38Z' fill='%232150c8'/%3E%3Cpath d='M14 42C20 34 30 34 34 26C37 21 40 22 42 21L42 42Z' fill='%232150c8'/%3E%3Cg fill='none' stroke='%231a2f78' stroke-width='.7' stroke-linecap='round'%3E%3Cpath d='M-2 17C14 12 22 8 30 -2'/%3E%3Cpath d='M-2 27C8 20 20 22 26 12C30 6 36 8 42 4'/%3E%3Cpath d='M-2 38C6 34 16 36 24 30C32 24 34 16 42 14'/%3E%3Cpath d='M14 42C20 34 30 34 34 26C37 21 40 22 42 21'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='19' fill='url(%23l)'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='18.6' fill='none' stroke='%231a2f78' stroke-width='1.2'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  opacity: .9; filter: none; box-shadow: 0 3px 8px -2px rgb(0 0 0 / 35%); transition: opacity .2s, filter .2s, transform .2s;
}
/* Pallone da pallavolo «vero» (01/11/2026): tre fasce blu curve a girandola su fondo giallo,
   cuciture sottili ai lati di ogni fascia, ombra e riflesso di luce come una palla tridimensionale. */
.mh-mvp-popup .mh-mvp-spunta,
.mh-mvp-popup .mh-mvp-voce[aria-checked="true"] .mh-mvp-spunta {
  width: 44px; height: 44px;
  background: #ffcf33 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Ccircle cx='20' cy='20' r='19'/%3E%3C/clipPath%3E%3CradialGradient id='l' cx='.35' cy='.3' r='.8'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.6'/%3E%3Cstop offset='.4' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='.38'/%3E%3C/radialGradient%3E%3Cg id='f' fill='none' stroke-linecap='butt'%3E%3Cpath id='p' d='M-4 8C10 4 18 14 20 22C22 30 28 36 44 38' stroke='%232453c9' stroke-width='6.6'/%3E%3Cpath d='M-4 8C10 4 18 14 20 22C22 30 28 36 44 38' stroke='%23142a73' stroke-width='.6' transform='translate(2.35 -2.35)'/%3E%3Cpath d='M-4 8C10 4 18 14 20 22C22 30 28 36 44 38' stroke='%23142a73' stroke-width='.6' transform='translate(-2.35 2.35)'/%3E%3Cpath d='M-4 8C10 4 18 14 20 22C22 30 28 36 44 38' stroke='%23c99a12' stroke-width='.5' transform='translate(7 -7)'/%3E%3Cpath d='M-4 8C10 4 18 14 20 22C22 30 28 36 44 38' stroke='%23c99a12' stroke-width='.5' transform='translate(-7 7)'/%3E%3C/g%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='19' fill='%23ffcf33'/%3E%3Cg clip-path='url(%23c)'%3E%3Cuse href='%23f'/%3E%3Cuse href='%23f' transform='rotate(120 20 20)'/%3E%3Cuse href='%23f' transform='rotate(240 20 20)'/%3E%3Ccircle cx='20' cy='20' r='19' fill='url(%23l)'/%3E%3Cellipse cx='13' cy='10' rx='5' ry='3' fill='%23fff' opacity='.35' transform='rotate(-35 13 10)'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='18.7' fill='none' stroke='%23142a73' stroke-width='1'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  opacity: 1; filter: none;
}
/* Prova (01/11/2026): niente piu' pallone a destra. Tutta la riga del giocatore e' il pulsante:
   quella scelta si accende di giallo, con un bordo luminoso che pulsa. */
@keyframes mvp-riga-scelta { 0% { transform: scale(.97); } 60% { transform: scale(1.05); } 100% { transform: scale(1.03); } }
@keyframes mvp-riga-luce { 0%, 100% { box-shadow: 0 0 0 2px var(--oro), 0 0 14px 1px rgb(255 225 77 / 60%); } 50% { box-shadow: 0 0 0 3px var(--oro), 0 0 24px 5px rgb(255 225 77 / 90%); } }
.mh-mvp-popup .mh-mvp-voce .mh-mvp-spunta,
.mh-mvp-popup .mh-mvp-voce[aria-checked="true"] .mh-mvp-spunta { display: none; }
.mh-mvp-popup .mh-mvp-voce { cursor: pointer; }
.mh-mvp-popup .mh-mvp-voce[aria-checked="true"] {
  border-color: var(--oro); transform: scale(1.03);
  background: linear-gradient(100deg, rgb(255 225 77 / 70%), rgb(255 184 0 / 45%));
  animation: mvp-riga-scelta .35s cubic-bezier(.2, .9, .3, 1.4) both, mvp-riga-luce 1.4s ease-in-out .35s infinite;
}
.mh-mvp-popup .mh-mvp-voce[aria-checked="true"] b { color: #0b1f5c; }
.mh-mvp-popup .mh-mvp-voce:hover .mh-mvp-spunta { opacity: .85; filter: none; transform: rotate(-20deg); }
.mh-mvp-popup .mh-mvp-voce[aria-checked="true"] .mh-mvp-spunta { opacity: 1; filter: none; transform: scale(1.12);
  box-shadow: 0 0 0 3px var(--mvp-corallo), 0 0 18px 2px rgb(255 225 77 / 80%); animation: mvp-rimbalzo .55s cubic-bezier(.2, .9, .3, 1.5); }
.mh-mvp-popup .mh-mvp-voce[aria-checked="true"] .mh-mvp-spunta::before { content: none; }
/* «MVP» da solo, di scena: entra da lontano girando, poi resta a pulsare con le luci che
   scorrono, un'ombra a strati come un'insegna, due stelline che brillano ai lati. */
@keyframes mvp-entra-scena { 0% { opacity: 0; transform: scale(3.2) rotate(-14deg); filter: blur(6px); } 55% { opacity: 1; transform: scale(.88) rotate(4deg); filter: blur(0); } 75% { transform: scale(1.08) rotate(-2deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes mvp-scena-pulsa { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.07) rotate(2deg); } }
@keyframes mvp-stella { 0%, 100% { opacity: .2; transform: scale(.5) rotate(0); } 50% { opacity: 1; transform: scale(1.2) rotate(180deg); } }
.mh-mvp-popup .mh-mvp-palco h2.mh-mvp-scena { position: relative; margin: 2px 0 4px; line-height: 1; }
.mh-mvp-popup .mh-mvp-parola.is-scena svg { display: block; width: 200px; max-width: 70vw; height: auto; overflow: visible; }
.mh-mvp-popup .mh-mvp-parola.is-scena { font-size: 78px; letter-spacing: .04em; padding: 0 .08em;
  font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Varela Round", Nunito, "Quicksand", "Segoe UI Rounded", system-ui, sans-serif; font-weight: 900;  background: linear-gradient(90deg, #ffe14d, #ff6b8b, #b6f23c, #7fe7ff, #ffffff, #ffe14d) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1.5px rgb(255 255 255 / 70%);
  filter: drop-shadow(0 2px 0 #1d3f8f) drop-shadow(0 4px 0 #6b4de6) drop-shadow(0 8px 14px rgb(0 0 0 / 45%)) drop-shadow(0 0 22px rgb(255 225 77 / 55%));
  animation: mvp-entra-scena 1s cubic-bezier(.2, .9, .3, 1.2) both, mvp-parola-colori 2.6s linear infinite, mvp-scena-pulsa 1.8s ease-in-out 1s infinite; }
.mh-mvp-popup h2.mh-mvp-scena::before, .mh-mvp-popup h2.mh-mvp-scena::after {
  content: '✦'; position: absolute; top: 6px; font-size: 22px; color: #ffe14d; text-shadow: 0 0 10px #fff; animation: mvp-stella 1.6s ease-in-out infinite; }
.mh-mvp-popup h2.mh-mvp-scena::before { left: -26px; }
.mh-mvp-popup h2.mh-mvp-scena::after { right: -26px; top: 40px; font-size: 16px; color: #ff6b8b; animation-delay: .8s; }
.mh-mvp-popup .mh-mvp-palco:has(.mh-mvp-scena) { padding-top: 22px; }
/* MVP: grande, arcobaleno di sole, corallo e lime che scorre, e salta un po'. */
@keyframes mvp-parola-colori { to { background-position: 200% 0; } }
@keyframes mvp-parola-salta { 0%, 100% { transform: translateY(0) rotate(-3deg) scale(1); } 25% { transform: translateY(-4px) rotate(2deg) scale(1.06); } 50% { transform: translateY(0) rotate(-1deg) scale(1); } 75% { transform: translateY(-2px) rotate(3deg) scale(1.03); } }
.mh-mvp-popup .mh-mvp-parola { display: inline-block; font-size: 1.9em; font-weight: 900; letter-spacing: .02em; line-height: 1;
  background: linear-gradient(90deg, #ffe14d, #ff6b8b, #b6f23c, #ffffff, #ffe14d) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgb(11 22 56 / 45%));
  animation: mvp-parola-colori 3s linear infinite, mvp-parola-salta 2.4s ease-in-out infinite; }
.mh-mvp-popup .mh-mvp-palco h2 { display: flex; align-items: baseline; justify-content: center; gap: .25em; flex-wrap: wrap; animation: none; background: none; color: #fff; -webkit-background-clip: border-box; background-clip: border-box; }
/* La partita centrata: le due squadre una sotto l'altra, il risultato sotto, poi quando e dove. */
.mh-mvp-popup .mh-mvp-gara { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.mh-mvp-popup .mh-mvp-gara > span { justify-items: center; }
.mh-mvp-popup .mh-mvp-gara > span b { white-space: normal; }
.mh-mvp-popup .mh-mvp-gara strong { order: 2; }
.mh-mvp-popup .mh-mvp-gara small { order: 3; }
.mh-mvp-popup .mh-mvp-domanda, .mh-mvp-popup .mh-mvp-sotto, .mh-mvp-popup .mh-mvp-piccolo { text-align: center; }
/* Il nome della squadra (es. «Prima divisione maschile») nello stesso stile della scritta MVP, ma piccolo
   (01/11/2026). Le due squadre della partita sempre in maiuscolo. */
.mh-mvp-popup .mh-mvp-sotto.mh-mvp-squadra { display: block; font-size: 15px; font-weight: 900; letter-spacing: .03em; line-height: 1.2; margin: 2px 0 0;
  font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Varela Round", Nunito, "Quicksand", "Segoe UI Rounded", system-ui, sans-serif;
  background: linear-gradient(90deg, #ffe14d, #ff6b8b, #b6f23c, #7fe7ff, #ffffff, #ffe14d) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: .4px rgb(255 255 255 / 70%);
  filter: drop-shadow(0 1px 0 #1d3f8f) drop-shadow(0 2px 5px rgb(0 0 0 / 35%));
  animation: mvp-parola-colori 2.6s linear infinite; }
.mh-mvp-popup .mh-mvp-gara > span b { text-transform: uppercase; }
/* Righe dei giocatori (01/11/2026): numero e nome al centro; quando la riga e' scelta
   compare il logo Oltremare accanto, sulla destra. */
@keyframes mvp-logo-compare { 0% { opacity: 0; transform: scale(.3) rotate(-30deg); } 70% { opacity: 1; transform: scale(1.2) rotate(6deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
.mh-mvp-popup .mh-mvp-voce { position: relative; justify-content: flex-start; text-align: left; }
.mh-mvp-popup .mh-mvp-voce b { flex: 0 1 auto; text-align: left; }
.mh-mvp-popup .mh-mvp-voce[aria-checked="true"] { padding-right: 56px; }
.mh-mvp-popup .mh-mvp-voce[aria-checked="true"] .mh-mvp-spunta {
  display: block; position: absolute; right: 10px; top: 50%; width: 38px; height: 28px; margin: -14px 0 0; padding: 0;
  border: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 1px 3px rgb(0 0 0 / 35%)); opacity: 1;
  background: url("../img/logo-360.png") center / contain no-repeat; transform: none;
  animation: mvp-logo-compare .45s cubic-bezier(.2, .9, .3, 1.3) both;
}
/* «Chi è stato il migliore in campo?» (01/11/2026): azzurro, in movimento, font morbido. */
@keyframes mvp-domanda-onda { 0%, 100% { transform: translateY(0) scale(1); background-position: 0 0; } 50% { transform: translateY(-2px) scale(1.04); background-position: 100% 0; } }
.mh-mvp-popup .mh-mvp-domanda { font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Varela Round", Nunito, "Quicksand", "Segoe UI Rounded", system-ui, sans-serif;
  font-weight: 800; letter-spacing: .02em; font-size: 16px;
  background: linear-gradient(90deg, #7fe7ff, #d8f6ff, #38c8f5, #d8f6ff, #7fe7ff) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 #1d3f8f) drop-shadow(0 2px 6px rgb(0 0 0 / 30%));
  animation: mvp-domanda-onda 2.4s ease-in-out infinite; }
/* Il box della partita piu' accattivante (01/11/2026): fondo sfumato blu-viola con bordo che brilla,
   squadre separate da un «VS» giallo, risultato in una pillola gialla, data in una pillola chiara. */
@keyframes mvp-gara-luce { 0%, 100% { box-shadow: 0 0 0 1.5px rgb(127 231 255 / 70%), 0 6px 18px -6px rgb(10 20 90 / 60%); } 50% { box-shadow: 0 0 0 2px rgb(255 225 77 / 85%), 0 6px 22px -4px rgb(255 225 77 / 45%); } }
.mh-mvp-popup .mh-mvp-gara { position: relative; gap: 6px; padding: 12px 12px 10px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(135deg, rgb(10 30 120 / 70%), rgb(107 77 230 / 65%) 55%, rgb(18 184 232 / 55%));
  animation: mvp-gara-luce 3s ease-in-out infinite; }
.mh-mvp-popup .mh-mvp-gara::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 90% 0%, rgb(255 255 255 / 25%), transparent 45%), repeating-linear-gradient(115deg, rgb(255 255 255 / 6%) 0 8px, transparent 8px 18px); }
.mh-mvp-popup .mh-mvp-gara > * { position: relative; }
.mh-mvp-popup .mh-mvp-gara > span b { font-size: 15px; font-weight: 900; letter-spacing: .06em; color: #fff; text-shadow: 0 2px 0 rgb(11 22 56 / 45%); }
.mh-mvp-popup .mh-mvp-gara > span b + b::before { content: "VS"; display: block; margin: 2px auto 3px; width: auto; line-height: 1; border-radius: 0;
  font-size: 10px; font-weight: 700; letter-spacing: .12em; color: rgb(255 255 255 / 60%); text-shadow: none; background: none; box-shadow: none; }
.mh-mvp-popup .mh-mvp-gara strong { padding: 2px 16px; border-radius: 99px; font-size: 20px; color: #1d2a00; background: linear-gradient(135deg, #ffe14d, #ffb800); box-shadow: 0 3px 10px -2px rgb(255 184 0 / 70%); }
.mh-mvp-popup .mh-mvp-gara small { padding: 3px 12px; border-radius: 99px; font-size: 12px; font-weight: 700; color: #fff; background: rgb(255 255 255 / 20%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 35%); }
/* I nomi dell'elenco, ognuno di un colore diverso (blu, azzurro, viola, tutti chiari per leggersi bene). */
/* Poi (01/11/2026): i nomi tornano tutti bianchi, anche quando la riga e' scelta
   (con una leggera ombra blu per leggersi bene sul giallo). */
.mh-mvp-popup .mh-mvp-voce b,
.mh-mvp-popup .mh-mvp-voce[aria-checked="true"]:nth-child(n) b { color: #fff !important; text-shadow: 0 1px 3px rgb(11 31 92 / 70%); }
.mh-mvp-popup .mh-mvp-voce[aria-checked="true"]:nth-child(n) .mh-mvp-medaglia { color: #fff; text-shadow: 0 1px 3px rgb(11 31 92 / 70%); }
/* Riga scelta (01/11/2026): il nome diventa blu e il riquadro del numero si accende
   (azzurro-viola con un alone), sopra il giallo della riga. */
.mh-mvp-popup .mh-mvp-voce[aria-checked="true"]:nth-child(n) b { color: #0f2fb0 !important; text-shadow: 0 1px 0 rgb(255 255 255 / 55%); }
.mh-mvp-popup .mh-mvp-voce[aria-checked="true"]:nth-child(n) .mh-mvp-medaglia {
  color: #fff; text-shadow: 0 1px 2px rgb(11 31 92 / 60%);
  background: linear-gradient(135deg, #12b8e8, #2f5bea 55%, #6b4de6); box-shadow: 0 0 0 2px #fff, 0 0 12px 2px rgb(47 91 234 / 60%); }
/* Il pop-up meno alto, per i telefoni piccoli: parti in alto piu' strette, elenco che scorre se serve. */
.mh-mvp-popup { max-height: calc(100dvh - 16px); overflow-y: auto; }
.mh-mvp-popup .mh-mvp-palco { padding: 12px 0 4px; }
.mh-mvp-popup .mh-mvp-palco:has(.mh-mvp-scena) { padding-top: 12px; }
.mh-mvp-popup .mh-mvp-palco .mh-mvp-coppa { width: 40px; height: 40px; font-size: 28px; }
.mh-mvp-popup .mh-mvp-palco::before { top: 34px; width: 300px; height: 300px; }
.mh-mvp-popup .mh-mvp-parola.is-scena svg { width: 150px; }
.mh-mvp-popup .mh-mvp-gara { margin-top: 5px; padding: 8px 10px 7px; gap: 3px; }
.mh-mvp-popup .mh-mvp-domanda { margin: 7px 0 5px; }
.mh-mvp-popup .mh-mvp-lista { max-height: 34dvh; gap: 4px; }
.mh-mvp-popup .mh-mvp-voce { padding-top: 4px; padding-bottom: 4px; }
.mh-mvp-popup .mh-mvp-piccolo { margin-top: 5px; }
.mh-mvp-popup .mh-mvp-azioni { margin-top: 8px; }
/* TEMA FEMMINILE (01/11/2026): stessa impostazione, colori rosa / viola / celeste. */
.mh-mvp-popup.mh-mvp-femminile {
  --oro: #e9dcff; --oro-2: #c9a8ff; --oro-chiaro: #f6f0ff; --palco: #9b4dff; --palco-2: #c9a8ff;
  --mvp-corallo: #b58cff; --mvp-lime: #8fe6ff;
  background:
    radial-gradient(circle at 12% 18%, rgb(143 230 255 / 60%) 0 4px, transparent 5px),
    radial-gradient(circle at 86% 12%, rgb(255 255 255 / 60%) 0 5px, transparent 6px),
    radial-gradient(circle at 92% 46%, rgb(233 220 255 / 65%) 0 3px, transparent 4px),
    radial-gradient(circle at 6% 62%, rgb(255 255 255 / 45%) 0 3px, transparent 4px),
    radial-gradient(circle at 78% 88%, rgb(143 230 255 / 55%) 0 4px, transparent 5px),
    radial-gradient(120% 55% at 50% 0%, rgb(255 255 255 / 25%), transparent 60%),
    linear-gradient(165deg, #c9a8ff, #b266ff 60%, #5fb8ff);
  box-shadow: 0 0 0 2px rgb(255 255 255 / 40%), 0 26px 70px -20px rgb(178 102 255 / 70%);
}
.mh-mvp-femminile::backdrop { background: radial-gradient(circle at 50% 30%, rgb(110 20 110 / 45%), rgb(20 4 30 / 78%)); }
.mh-mvp-femminile #mvpGrad stop:nth-child(1), .mh-mvp-femminile #mvpGrad stop:nth-child(5) { stop-color: #e9dcff; }
.mh-mvp-femminile #mvpGrad stop:nth-child(2) { stop-color: #b58cff; }
.mh-mvp-femminile #mvpGrad stop:nth-child(3) { stop-color: #c58bff; }
.mh-mvp-femminile #mvpGrad stop:nth-child(4) { stop-color: #8fe6ff; }
.mh-mvp-femminile .mh-mvp-palco::before { background: repeating-conic-gradient(from 0deg, rgb(255 255 255 / 18%) 0 7deg, transparent 7deg 20deg); }
.mh-mvp-femminile .mh-mvp-sotto.mh-mvp-squadra { background-image: linear-gradient(90deg, #e9dcff, #b58cff, #c58bff, #8fe6ff, #ffffff, #e9dcff); }
.mh-mvp-femminile .mh-mvp-domanda { background-image: linear-gradient(90deg, #e9dcff, #ffffff, #d3bcff, #ffffff, #e9dcff); }
.mh-mvp-femminile .mh-mvp-gara { background: linear-gradient(135deg, rgb(160 50 190 / 70%), rgb(181 140 255 / 60%) 55%, rgb(95 184 255 / 55%)); }
.mh-mvp-femminile .mh-mvp-gara strong { color: #5a0f55; background: linear-gradient(135deg, #e9dcff, #c9a8ff); box-shadow: 0 3px 10px -2px rgb(181 140 255 / 70%); }
.mh-mvp-femminile .mh-mvp-voce[aria-checked="true"]:nth-child(n) { background: linear-gradient(100deg, rgb(255 255 255 / 85%), rgb(233 220 255 / 75%)); border-color: #fff; }
.mh-mvp-femminile .mh-mvp-voce[aria-checked="true"]:nth-child(n) b { color: #7a1fd0 !important; text-shadow: none; }
.mh-mvp-femminile .mh-mvp-voce[aria-checked="true"]:nth-child(n) .mh-mvp-medaglia { background: linear-gradient(135deg, #c9a8ff, #b266ff 55%, #5fb8ff); box-shadow: 0 0 0 2px #fff, 0 0 12px 2px rgb(181 140 255 / 60%); }
.mh-mvp-femminile .btn:not(.secondary) { background: linear-gradient(100deg, #e9dcff, #d3bcff 50%, #8fe6ff); color: #4a0f4a; box-shadow: 0 8px 20px -8px rgb(181 140 255 / 80%); }
.mh-mvp-femminile .mh-mvp-ok { background: linear-gradient(135deg, #8fe6ff, #d3bcff); }
/* Bordi bianchi e blu, non bianchi e neri (01/11/2026): il contorno che appare sulle righe
   (la barra di scorrimento, poi, è stata tolta del tutto). */
.mh-mvp-popup .mh-mvp-voce:focus, .mh-mvp-popup .mh-mvp-voce:focus-visible { outline: 2px solid #fff; outline-offset: 1px; box-shadow: 0 0 0 4px #2f5bea; }
.mh-mvp-popup .mh-mvp-voce:focus:not(:focus-visible) { outline: none; box-shadow: none; }
/* Niente barre di scorrimento a destra (01/11/2026): elenco e pop-up scorrono col dito, senza barra. */
.mh-mvp-popup, .mh-mvp-popup .mh-mvp-lista { scrollbar-width: none; }
.mh-mvp-popup::-webkit-scrollbar, .mh-mvp-popup .mh-mvp-lista::-webkit-scrollbar { display: none; }
.mh-mvp-popup [data-passo="scegli"] .mh-mvp-azioni { margin-top: 20px; }
.mh-mvp-popup .mh-mvp-piccolo.mh-mvp-note { margin: 8px 0 0; font-size: 10.5px; line-height: 1.35; }
/* Il «VS» ancora piu' discreto (01/11/2026): piccolo, sottile e quasi trasparente. */
.mh-mvp-popup .mh-mvp-gara > span b + b::before { font-size: 8.5px; font-weight: 500; letter-spacing: .1em; color: rgb(255 255 255 / 38%); margin: 1px auto 2px; }
/* Il riquadro nella Casa come i pop-up (01/11/2026): stesso cielo azzurro e viola coi
   coriandoli fermi, stesso font morbido; al posto delle medaglie d'oro le magliette MVP
   (blu per le maschili, rosa per le femminili) col numero in un bollino. */
.mh-mvp, .mh-mvp-popup { --mvp-font: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Varela Round", Nunito, "Quicksand", "Segoe UI Rounded", system-ui, sans-serif; }
.mh-mvp {
  --oro: #ffe14d; --oro-2: #ffb800; --oro-chiaro: #fff8c4; --palco: #2f5bea; --palco-2: #12b8e8; --mvp-lime: #b6f23c;
  font-family: var(--mvp-font);
  background:
    radial-gradient(circle at 10% 20%, rgb(255 225 77 / 55%) 0 4px, transparent 5px),
    radial-gradient(circle at 90% 14%, rgb(255 107 139 / 60%) 0 5px, transparent 6px),
    radial-gradient(circle at 94% 70%, rgb(182 242 60 / 55%) 0 3px, transparent 4px),
    radial-gradient(circle at 4% 80%, rgb(255 255 255 / 45%) 0 3px, transparent 4px),
    radial-gradient(120% 70% at 50% 0%, rgb(255 255 255 / 22%), transparent 60%),
    linear-gradient(165deg, var(--palco-2), var(--palco) 62%, #6b4de6);
  box-shadow: 0 0 0 2px rgb(255 255 255 / 35%), 0 18px 40px -20px rgb(18 120 232 / 70%);
}
.mh-mvp::before { background: conic-gradient(from var(--mvp-giro), rgb(255 255 255 / 10%), #fff, var(--oro), rgb(255 255 255 / 10%) 40%, rgb(255 255 255 / 10%)); }
.mh-mvp-coppa::before { background: radial-gradient(circle, rgb(255 255 255 / 55%), transparent 68%); }
.mh-mvp h2 { font: 900 20px/1.15 var(--mvp-font); letter-spacing: .02em;
  background: linear-gradient(90deg, #ffe14d, #ff6b8b, #b6f23c, #7fe7ff, #ffffff, #ffe14d) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: .4px rgb(255 255 255 / 70%);
  filter: drop-shadow(0 1px 0 #1d3f8f) drop-shadow(0 2px 5px rgb(0 0 0 / 35%)); animation: mvp-parola-colori 2.6s linear infinite; }
.mh-mvp-testa small, .mh-mvp-rivedi { color: rgb(255 255 255 / 88%); font-family: var(--mvp-font); }
.mh-mvp-rivedi { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.mh-mvp-uno { background: rgb(255 255 255 / 12%); border: 1.5px solid rgb(255 255 255 / 25%); }
.mh-mvp-uno small { color: #fff8c4; font-family: var(--mvp-font); font-weight: 900; }
.mh-mvp-uno b { font-family: var(--mvp-font); font-weight: 800; }
.mh-mvp-vota { border-radius: 99px; font-family: var(--mvp-font); font-weight: 900;
  background: linear-gradient(100deg, var(--oro), #ffd23a 50%, var(--mvp-lime)); color: #1d2a00; box-shadow: 0 8px 20px -8px rgb(255 225 77 / 90%); animation: none; }
/* La maglietta col numero. */
.mh-mvp-maglia { position: relative; flex: none; width: 48px; height: 48px;
  background: url("../img/maglia-mvp-maschile.png?v=3") center / contain no-repeat; filter: drop-shadow(0 3px 5px rgb(0 0 0 / 35%)); }
.mh-mvp-maglia.is-rosa { background-image: url("../img/maglia-mvp-femminile.png?v=3"); }
/* Il numero nel riquadrino accanto al nome (01/11/2026), non sulla maglia. */
.mh-mvp-num { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .35em; margin-left: .3em; vertical-align: .08em;
  border-radius: .4em; background: #1d3f8f; color: #fff; font: 900 .72em/1 var(--mvp-font); }
.mh-mvp-num.is-rosa { background: #fa86a9; text-shadow: 0 1px 2px rgb(150 30 70 / 45%); }  /* il rosa della maglietta (01/11/2026) */
.mh-mvp-mio > b { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
/* In fondo, piccola, la frase sugli eletti; si chiude con la × in alto a destra. */
.mh-mvp-piede { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid rgb(224 168 0 / 30%); color: var(--mvp-tenue); font: 600 12px/1.4 var(--mvp-font); text-align: center; }
.mh-mvp-chiudi { position: absolute; top: 10px; right: 10px; z-index: 3; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: rgb(224 168 0 / 18%); color: #7a5200; line-height: 0; cursor: pointer; }
/* La × disegnata, non il carattere: col carattere restava fuori centro (01/11/2026). */
.mh-mvp-chiudi svg { display: block; }
.mh-mvp-chiudi:focus-visible { outline: 2px solid #e0a800; outline-offset: 2px; }
.mh-mvp-popup > form { margin: 0; }
.mh-mvp-rivela .mh-mvp-maglia { width: 56px; height: 56px; }

/* I pop-up dei risultati, bianco e oro per tutti (01/11/2026): quello del mercoledi' con la
   magliettona delle proprie squadre, quello delle flash news con gli MVP di tutte. */
.mh-mvp-popup.mh-mvp-oro {
  --oro: #e0a800; --oro-2: #b07800; --oro-chiaro: #fff3c4; --mvp-testo: #2b2410; --mvp-tenue: #7a6630;
  color: var(--mvp-testo);
  background:
    radial-gradient(circle at 12% 18%, rgb(255 201 60 / 75%) 0 4px, transparent 5px),
    radial-gradient(circle at 86% 12%, rgb(224 168 0 / 55%) 0 5px, transparent 6px),
    radial-gradient(circle at 92% 46%, rgb(255 216 77 / 70%) 0 3px, transparent 4px),
    radial-gradient(circle at 6% 62%, rgb(224 168 0 / 45%) 0 3px, transparent 4px),
    radial-gradient(circle at 78% 88%, rgb(255 201 60 / 60%) 0 4px, transparent 5px),
    radial-gradient(120% 55% at 50% 0%, rgb(255 225 120 / 50%), transparent 60%),
    linear-gradient(170deg, #ffffff, #fffaf0 55%, #fff1cc);
  box-shadow: 0 0 0 2px #ffc93c, 0 26px 70px -20px rgb(200 140 0 / 60%);
}
.mh-mvp-popup.mh-mvp-oro::backdrop { background: radial-gradient(circle at 50% 30%, rgb(90 64 0 / 45%), rgb(12 8 0 / 80%)); }
.mh-mvp-popup.mh-mvp-oro .mh-mvp-palco::before { background: repeating-conic-gradient(from 0deg, rgb(255 201 60 / 30%) 0 7deg, transparent 7deg 20deg); }
.mh-mvp-popup.mh-mvp-oro .mh-mvp-palco .mh-mvp-coppa::before { background: radial-gradient(circle, rgb(255 201 60 / 65%), transparent 68%); }
.mh-mvp-popup.mh-mvp-oro .mh-mvp-palco h2 { color: #7a5200; font-family: var(--mvp-font); font-weight: 900; }
.mh-mvp-popup.mh-mvp-oro .mh-mvp-parola { background-image: linear-gradient(90deg, #b07800, #e0a800, #ffd84d, #fff3c4, #e0a800, #b07800);
  filter: drop-shadow(0 2px 0 rgb(120 80 0 / 35%)); }
.mh-mvp-popup.mh-mvp-oro .mh-mvp-sotto { color: var(--mvp-tenue); font-family: var(--mvp-font); }
.mh-mvp-popup.mh-mvp-oro .mh-mvp-uno { background: linear-gradient(100deg, rgb(255 201 60 / 26%), rgb(255 255 255 / 70%)); border: 1.5px solid rgb(224 168 0 / 45%); }
.mh-mvp-popup.mh-mvp-oro .mh-mvp-uno small { color: #a06d00; font-family: var(--mvp-font); }
.mh-mvp-popup.mh-mvp-oro .mh-mvp-uno b { color: #1d2a5a; font-family: var(--mvp-font); font-weight: 800; }
.mh-mvp-popup.mh-mvp-oro .btn:not(.secondary) { background: linear-gradient(100deg, #b07800, #e0a800 45%, #ffd84d); color: #fff;
  text-shadow: 0 1px 2px rgb(120 70 0 / 50%); box-shadow: 0 8px 20px -8px rgb(224 168 0 / 90%); }
/* La magliettona del mercoledi'. */
.mh-mvp-mio { display: grid; justify-items: center; gap: 2px; margin: 0 0 12px; text-align: center;
  animation: mvp-gira-carta .8s cubic-bezier(.2, .9, .3, 1.15) both; animation-delay: calc(var(--i, 0) * 380ms + 450ms); }
.mh-mvp-mio .mh-mvp-maglia { width: min(210px, 58vw); height: min(210px, 58vw); margin-bottom: 4px; filter: drop-shadow(0 10px 16px rgb(120 80 0 / 35%)); }
.mh-mvp-mio small { color: #a06d00; font: 900 12px/1.2 var(--mvp-font); text-transform: uppercase; letter-spacing: .08em; }
.mh-mvp-mio > b { color: #1d2a5a; font: 900 26px/1.15 var(--mvp-font); }

/* Nei pop-up della premiazione la scritta MVP sta ferma e a lampeggiare e' la maglietta
   (01/11/2026): un bagliore d'oro che pulsa. */
.mh-mvp-popup.mh-mvp-oro .mh-mvp-parola { animation: none; background-position: 0 0; }
@keyframes mvp-maglia-brilla {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 10px 16px rgb(120 80 0 / 35%)) drop-shadow(0 0 0 rgb(255 201 60 / 0%)) brightness(1); }
  50% { transform: scale(1.05); filter: drop-shadow(0 10px 16px rgb(120 80 0 / 35%)) drop-shadow(0 0 18px rgb(255 201 60 / 95%)) brightness(1.12); }
}
/* Solo la magliettona del mercoledi'; le magliette piccole delle flash news stanno ferme (01/11/2026). */
.mh-mvp-popup.mh-mvp-oro .mh-mvp-mio .mh-mvp-maglia { animation: mvp-maglia-brilla 1.6s ease-in-out infinite; }
/* Il pop-up del mercoledi' senza scritta in alto: la maglietta al centro, piu' grande, coi raggi
   dietro e un battito piu' forte (01/11/2026). */
@keyframes mvp-maglia-pompa {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 12px 18px rgb(120 80 0 / 35%)) drop-shadow(0 0 0 rgb(255 201 60 / 0%)) brightness(1); }
  45% { transform: scale(1.14); filter: drop-shadow(0 14px 22px rgb(120 80 0 / 35%)) drop-shadow(0 0 30px rgb(255 201 60 / 100%)) brightness(1.18); }
  60% { transform: scale(1.06); }
}
.mh-mvp-solo-maglia .mh-mvp-passo { padding-top: 34px; }
.mh-mvp-solo-maglia .mh-mvp-mio { position: relative; isolation: isolate; margin-bottom: 8px; }
.mh-mvp-solo-maglia .mh-mvp-mio::before { content: ''; position: absolute; left: 50%; top: min(125px, 34vw); z-index: -1; width: 420px; height: 420px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgb(255 201 60 / 30%) 0 7deg, transparent 7deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 0 15%, transparent 60%); mask: radial-gradient(circle, #000 0 15%, transparent 60%);
  transform: translate(-50%, -50%); animation: mvp-raggi 26s linear infinite; pointer-events: none; }
/* La maglietta da girare (01/11/2026): pulsa finche' non la tocchi, poi si gira in 3D con un
   lampo d'oro; dietro la stessa maglia, liscia, col nome e il numero come su una divisa. */
.mh-mvp-carta { position: relative; display: block; width: min(220px, 60vw); height: min(220px, 60vw); margin: 0 auto 10px; padding: 0; border: 0;
  background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; animation: mvp-maglia-pompa 1.1s ease-in-out infinite; }
.mh-mvp-carta:focus-visible { outline: 3px solid #e0a800; outline-offset: 6px; border-radius: 24px; }
.mh-mvp-carta.is-girata { animation: mvp-carta-arriva .9s ease-out both; }
@keyframes mvp-carta-arriva { 0% { transform: scale(1.1); } 55% { transform: scale(1.2); } 100% { transform: scale(1); filter: drop-shadow(0 12px 18px rgb(120 80 0 / 35%)) drop-shadow(0 0 22px rgb(255 201 60 / 85%)); } }
.mh-mvp-carta-dentro { position: absolute; inset: 0; transform-style: preserve-3d; transform: perspective(900px) rotateY(0); transition: transform 1s cubic-bezier(.3, 1.4, .5, 1); }
.mh-mvp-carta.is-girata .mh-mvp-carta-dentro { transform: perspective(900px) rotateY(540deg); }
.mh-mvp-fronte, .mh-mvp-retro { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.mh-mvp-popup.mh-mvp-oro .mh-mvp-carta .mh-mvp-maglia { display: block; width: 100%; height: 100%; animation: none; filter: none; }
.mh-mvp-retro { display: grid; align-content: center; justify-items: center; gap: 2px; padding-top: 12%; transform: rotateY(180deg); color: #fff; isolation: isolate; }
/* Il retro (02/11/2026: «colori e immagine non uguali, vedi bordi»): la stessa maglia del
   davanti, ricavata dalla sua immagine togliendo la stampa e col collo da dietro; stessi bordi e colori. */
.mh-mvp-retro { align-content: start; padding-top: 21%; background: url("../img/maglia-mvp-maschile-retro.png?v=1") center / contain no-repeat; }
.mh-mvp-retro.is-rosa { background-image: url("../img/maglia-mvp-femminile-retro.png?v=1"); }
/* Rotazione lunga prima di svelare l'esito (01/11/2026), con meno ingrandimento cosi' non
   passa sopra la scritta della squadra. */
.mh-mvp-carta-dentro { transition-duration: 4.6s !important; transform: perspective(1800px) rotateY(0); }
.mh-mvp-carta.is-girata .mh-mvp-carta-dentro { transform: perspective(1800px) rotateY(540deg); }
.mh-mvp-carta.is-girata { animation: mvp-carta-arriva2 4.6s ease-out both !important; }
@keyframes mvp-carta-arriva2 { 0% { transform: scale(1); } 45% { transform: scale(1.04); } 100% { transform: scale(1); filter: drop-shadow(0 12px 18px rgb(120 80 0 / 35%)) drop-shadow(0 0 22px rgb(255 201 60 / 85%)); } }
.mh-mvp-carta.is-girata::after { animation: mvp-lampo .9s ease-out 3.4s both !important; }
.mh-mvp-carta { margin-bottom: 22px; }
.mh-mvp-mio > small { position: relative; z-index: 3; }
/* La corona sopra «MVP», dentro la scritta: si muove con lei. */
.mh-mvp-con-corona { position: relative; }
.mh-mvp-corona { position: absolute; left: 50%; bottom: 100%; width: 1.5em; height: auto; margin: 0 0 -.12em -.75em; overflow: visible; filter: drop-shadow(0 3px 4px rgb(0 0 0 / 35%)); }
/* .mh-mvp-popup davanti: se no vince «.mh-mvp-popup .mh-mvp-parola.is-scena svg» (la scritta, 150-200px)
   e la corona esce dal pop-up (02/11/2026). */
.mh-mvp-popup .mh-mvp-parola.is-scena .mh-mvp-corona, .mh-mvp-parola.is-scena .mh-mvp-corona { width: 72px; max-width: none; margin: 0 0 -4px -36px; }
.mh-mvp-popup .mh-mvp-palco:has(.mh-mvp-corona) { padding-top: 58px; }/* Nome e numero nello stesso carattere, piu' in alto sulla schiena. */
.mh-mvp-retro b { max-width: 54%; font: 400 clamp(14px, 4.4vw, 19px)/1.1 "Ocean Rush", var(--mvp-font); text-transform: uppercase; letter-spacing: .06em; text-align: center;
  overflow-wrap: anywhere; text-shadow: 0 2px 0 rgb(0 0 0 / 22%), 0 3px 6px rgb(0 0 0 / 30%); }
.mh-mvp-retro strong { font: 400 clamp(56px, 19vw, 84px)/.95 "Ocean Rush", var(--mvp-font); text-shadow: 0 3px 0 rgb(0 0 0 / 22%), 0 6px 14px rgb(0 0 0 / 30%); }
/* Il lampo quando si gira. */
.mh-mvp-carta::after { content: ''; position: absolute; left: 50%; top: 50%; z-index: 2; width: 30%; height: 30%; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #fff 0 20%, rgb(255 225 120 / 90%) 40%, rgb(255 201 60 / 0%) 70%); transform: translate(-50%, -50%) scale(0); }
.mh-mvp-carta.is-girata::after { animation: mvp-lampo .9s ease-out .25s both; }
@keyframes mvp-lampo { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(5); } }
/* Il radar da dietro la maglietta quando si ferma (02/11/2026): blu per i maschi, rosa per le femmine. */
.mh-mvp-carta { --radar: 58 160 255; }
.mh-mvp-carta.is-rosa { --radar: 255 95 162; }
.mh-mvp-carta-dentro { z-index: 1; }
.mh-mvp-carta::before { content: ''; position: absolute; left: 50%; top: 50%; z-index: 0; width: 70%; height: 70%; border-radius: 50%; pointer-events: none; opacity: 0;
  border: 5px solid rgb(var(--radar) / 90%);
  background: radial-gradient(circle, rgb(var(--radar) / 55%) 0, rgb(var(--radar) / 25%) 55%, rgb(var(--radar) / 0%) 72%);
  box-shadow: 0 0 0 16px rgb(var(--radar) / 35%), 0 0 30px 8px rgb(var(--radar) / 60%);
  transform: translate(-50%, -50%) scale(.3); }
.mh-mvp-carta.is-girata::before { animation: mvp-radar 1.5s cubic-bezier(.15, .7, .3, 1) 4.5s both; }
@keyframes mvp-radar { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.6); } }
.mh-mvp-solo-maglia .mh-mvp-mio > small { font-size: 14px; }
.mh-mvp-tocca { margin-top: 6px; color: var(--mvp-tenue); font: 700 12.5px/1 var(--mvp-font); animation: mvp-domanda-onda 2.4s ease-in-out infinite; }
.mh-mvp-mio.is-scoperto .mh-mvp-tocca { visibility: hidden; }

/* Dal vocale di il cliente (01/11/2026): dietro la maglietta niente filigrana del logo (sembrava la
   traccia del sole di Oltremare) e niente raggi, fondo pulito; la pulsazione al minimo, perche'
   quando si gira si ferma; nulla che salti o sbordi, cosi' il pop-up non si muove. */
.mh-mvp-popup.mh-mvp-oro::before { content: none; }
.mh-mvp-solo-maglia .mh-mvp-mio::before { content: none; }
.mh-mvp-popup.mh-mvp-solo-maglia { overflow-x: hidden; }
@keyframes mvp-maglia-respira {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 10px 16px rgb(120 80 0 / 30%)); }
  50% { transform: scale(1.03); filter: drop-shadow(0 10px 16px rgb(120 80 0 / 30%)) drop-shadow(0 0 12px rgb(255 201 60 / 70%)); }
}
.mh-mvp-popup .mh-mvp-carta:not(.is-girata) { animation: mvp-maglia-respira 1.8s ease-in-out infinite; }
.mh-mvp-tocca { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 7px 14px; border-radius: 99px;
  background: linear-gradient(100deg, #b07800, #e0a800 45%, #ffd84d); color: #fff; font: 900 13px/1 var(--mvp-font); letter-spacing: .02em;
  text-shadow: 0 1px 2px rgb(120 70 0 / 50%); box-shadow: 0 6px 16px -6px rgb(224 168 0 / 90%); animation: none; }

/* I coriandoli, sopra tutto. */
.mh-mvp-coriandoli { position: fixed; inset: 0; width: 100vw; height: 100dvh; pointer-events: none; z-index: 2147483647; }
/* Il risultato della gara nel voto MVP: verde se abbiamo vinto, box rosso se abbiamo perso (02/11/2026). */
.mh-mvp-popup .mh-mvp-gara strong.is-vinta { color: #fff; background: linear-gradient(135deg, #2fbf5b, #17913f); box-shadow: 0 3px 10px -2px rgb(23 145 63 / 70%); }
.mh-mvp-popup .mh-mvp-gara strong.is-persa { color: #fff; background: linear-gradient(135deg, #e5383b, #b3121a); box-shadow: 0 0 0 2px rgb(255 255 255 / 70%), 0 3px 10px -2px rgb(179 18 26 / 70%); border-radius: 8px; }
@media (prefers-reduced-motion: reduce) {
  .mh-mvp, .mh-mvp *,.mh-mvp::before, .mh-mvp-popup, .mh-mvp-popup *, .mh-mvp-popup *::before, .mh-mvp-popup[open] { animation: none !important; transition: none !important; }
  .mh-mvp-popup .mh-mvp-parola { background-position: 0 0; }
}

/* La scelta del tema per chi prova i temi nuovi (03/11/2026): i vecchi e i nuovi in un elenco. */
.scegli-tema { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgb(0 0 0 / 45%); }
.scegli-tema-box { width: min(340px, 100%); display: grid; gap: 8px; padding: 16px; border-radius: 18px; background: var(--card-strong, var(--card)); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow); }
.scegli-tema-titolo { font-size: 16px; margin: 0 0 4px; }
.scegli-tema-voce { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.scegli-tema-voce span { font-weight: 700; }
.scegli-tema-voce small { color: var(--muted); font-size: 12px; }
.scegli-tema-voce.is-scelto { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring, transparent); }
.scegli-tema-voce.is-scelto span::after { content: " ✓"; color: var(--accent); }

/* Gli auguri (06/11/2026): sotto il riquadro del compleanno una riga per scriverli; dal primo
   messaggio una linguetta sul bordo destro con la bacheca, che apre da destra il pannello con i messaggi
   di tutti. Linguetta, pannello, velo e testata sono quelli di Dossiero V5 (.v5-lato-*, stile-v5.css),
   coi colori di Oltremare: la linguetta e' nel giallo del sole, come il tasto V5 coi todo aperti. */
/* Il riquadro del compleanno si tocca per fare gli auguri (06/11/2026): un fumetto piccolo
   a destra lo dice senza ingrandirlo. */
.mh-compleanno.is-tocca { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mh-compleanno.is-tocca:active { transform: scale(.985); }
.mh-compleanno.is-tocca p { padding: 0 18px; }
.mh-compleanno-penna {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-style: normal; font-size: 13px; line-height: 1; animation: mh-auguri-penna 2.4s ease-in-out infinite;
}
@keyframes mh-auguri-penna { 0%, 70%, 100% { transform: translateY(-50%); } 80% { transform: translateY(-62%) rotate(-8deg); } 90% { transform: translateY(-50%) rotate(4deg); } }
/* Il pop-up per scriverli: stessa testata del pannello laterale (stile Dossiero V5). */
.mh-auguri-popup {
  width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 64px); box-sizing: border-box; overflow: auto;
  padding: 0 16px 16px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--bg); color: var(--text); box-shadow: 0 24px 60px -20px rgb(4 10 29 / 55%);
}
.mh-auguri-popup[open] { animation: mh-sale .3s cubic-bezier(.2, .9, .3, 1.15); }
.mh-auguri-popup::backdrop { background: rgb(4 10 29 / 45%); }
.mh-auguri-popup .mh-auguri-testa { margin: 0 -16px 14px; padding: 10px 16px; }
.mh-auguri-scrivi { display: grid; gap: 8px; margin: 0 0 16px; }
.mh-auguri-scrivi label { font: 600 13px/1.3 var(--font-display, inherit); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.mh-auguri-scrivi textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 12px; resize: vertical;
  border: 1px solid var(--line-strong, var(--line)); background: var(--panel); color: var(--text); font: inherit; font-size: 15px;
}
.mh-auguri-scrivi textarea:focus { outline: none; border-color: #eab308; box-shadow: 0 0 0 3px rgb(234 179 8 / 22%); }
.mh-auguri-scrivi button {
  justify-self: end; height: 38px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: #eab308; color: #fff; font: 600 14px/1 var(--font-display, inherit);
}
.mh-auguri-scrivi button:active { transform: scale(.97); }
.mh-auguri-nota { margin: -4px 0 0; color: var(--muted); font-size: 12px; text-align: center; }

.mh-auguri-linguetta {
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 90;
  padding: 10px 6px 10px 8px; border: 1px solid #f2c94c; border-right: 0;
  border-radius: 14px 0 0 14px; color: var(--text); cursor: pointer; font: inherit;
  background: color-mix(in srgb, #ffc61a 16%, var(--panel));
  box-shadow: -4px 4px 16px rgb(234 179 8 / 25%), inset 3px 0 0 #eab308;
}
.mh-auguri-linguetta[hidden] { display: none; }
.mh-auguri-linguetta svg { width: 22px; height: 22px; fill: none; stroke: #eab308; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mh-auguri-linguetta svg .pieno { fill: #eab308; stroke: none; }
.mh-auguri-voce { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mh-auguri-voce i { font-style: normal; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.mh-auguri-voce b { min-width: 24px; padding: 2px 6px; border-radius: 999px; text-align: center; background: #eab308; color: #fff; font-size: 13px; }
/* Appena scritto: la linguetta entra dal bordo e saltella. */
.mh-auguri-linguetta.is-nuova { animation: mh-auguri-entra .6s cubic-bezier(.2, .9, .3, 1.3) both, mh-auguri-salta .5s ease .7s 2; }
@keyframes mh-auguri-entra { from { transform: translate(110%, -50%); } to { transform: translate(0, -50%); } }
@keyframes mh-auguri-salta { 50% { transform: translate(-6px, -50%); } }

.mh-auguri-velo {
  position: fixed; inset: 0; z-index: 99; background: rgb(4 10 29 / 45%);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.mh-auguri-lato {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
  width: min(420px, 92vw); box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 12px calc(20px + env(safe-area-inset-bottom));
  background: var(--bg); color: var(--text); box-shadow: -14px 0 34px rgb(4 10 29 / 30%);
  transform: translateX(105%); visibility: hidden;
  transition: transform .22s ease, visibility 0s linear .22s;
}
body.mh-auguri-aperto .mh-auguri-lato { transform: none; visibility: visible; transition: transform .22s ease; }
body.mh-auguri-aperto .mh-auguri-velo { opacity: 1; pointer-events: auto; }
body.mh-auguri-aperto .mh-auguri-linguetta { visibility: hidden; }
html:has(body.mh-auguri-aperto) { overflow: hidden; }
.mh-auguri-testa {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  position: sticky; top: 0; z-index: 3; margin: 0 -12px 12px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
  background: var(--bg); border-bottom: 1px solid var(--line); font-size: 15px;
}
.mh-auguri-x {
  width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer;
}
.mh-auguri-gruppo { margin-bottom: 16px; }
.mh-auguri-gruppo[hidden] { display: none; }
.mh-auguri-gruppo h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 600 13px/1.3 var(--font-display, inherit); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.mh-auguri-gruppo h3 span { min-width: 20px; padding: 1px 6px; border-radius: 999px; text-align: center; background: color-mix(in srgb, #eab308 18%, transparent); color: #eab308; font-size: 12px; }
.mh-auguri-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mh-auguri-lista li { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.mh-auguri-lista li[data-mio] { box-shadow: inset 3px 0 0 #eab308; }
.mh-auguri-lista p { margin: 0 0 4px; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.mh-auguri-lista small { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.mh-auguri-lista small form { margin: 0 0 0 auto; }
.mh-auguri-togli { padding: 0; border: 0; background: none; color: var(--faint, var(--muted)); font: inherit; font-size: 11px; text-decoration: underline; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .mh-auguri-linguetta.is-nuova, .mh-compleanno-penna { animation: none; } .mh-auguri-lato { transition: none; } }