/**
 * Tema di prova «Pallavolo» (03/11/2026): non solo lo sfondo, ma tutta
 * l'app che si adatta ai suoi colori e cambia con l'ora del giorno. Si vede solo
 * a chi è nella lista dell'impostazione «sfondo_prova»; per gli altri il file non
 * si carica.
 *
 * Come funziona: ogni ora del giorno ha tre colori di base (--t1 cielo, --t2
 * fondo, --t3 accento). Da questi nascono sfondo, riquadri, righe, linee, testi,
 * bottoni e pallini, così tutto è sempre della stessa famiglia di colore.
 * Lo script del layout mette l'ora in data-ora sul body (alba, giorno, tramonto,
 * sera, notte) e la aggiorna da solo; i colori scivolano piano dall'uno all'altro.
 */
@property --t1 { syntax: '<color>'; inherits: true; initial-value: #2d8cf0; }
@property --t2 { syntax: '<color>'; inherits: true; initial-value: #0e4aa8; }
@property --t3 { syntax: '<color>'; inherits: true; initial-value: #ffe58a; }

.sfondo-prova {
  --t1: #2d8cf0; --t2: #0e4aa8; --t3: #ffe58a;
  --alone: rgb(255 236 150 / 40%); --alone-x: 80%; --alone-y: 4%;
}
/* «Oltremare dinamico» (03/11/2026): sempre sui toni dell'azzurro, niente rossi o rosa.
   La mattina quasi bianco, celestino fino a mezzogiorno, poi si scurisce verso il tramonto e col buio
   dalle 19 blu notte, con la luna al posto del sole. Chiaro (testi scuri) fino alle 16.
   Le fasce le mette lo script del layout in data-ora (la mattina segue l'alba vera di Roma). */
.sfondo-prova[data-ora="alba"]       { --t1: #d6ecff; --t2: #2f6fba; --t3: #fff6d6; --alone: transparent; --alone-x: 15%; --alone-y: 8%; }
.sfondo-prova[data-ora="mattina"]    { --t1: #9fd3fa; --t2: #2463ae; --t3: #fff1b8; --alone: transparent; --alone-x: 35%; --alone-y: 5%; }
.sfondo-prova[data-ora="pomeriggio"] { --t1: #66b4f0; --t2: #1a55a3; --t3: #ffeaa0; --alone: transparent; --alone-x: 70%; --alone-y: 5%; }
.sfondo-prova[data-ora="tardo"]      { --t1: #4a7aa8; --t2: #e28a38; --t3: #ffd490; --alone: transparent; --alone-x: 85%; --alone-y: 10%; }
.sfondo-prova[data-ora="sera"]       { --t1: #23559f; --t2: #0d2a68; --t3: #cfe0ff; --alone: rgb(200 220 255 / 25%); --alone-x: 85%; --alone-y: 12%; }
.sfondo-prova[data-ora="notte"]      { --t1: #142b66; --t2: #050c26; --t3: #e8f0ff; --alone: rgb(225 235 255 / 22%); --alone-x: 78%; --alone-y: 9%; }

/* ---------------------------------------------------------- scuro ---- */
.sfondo-prova {
  --ground: color-mix(in srgb, var(--t2) 55%, #000);
  --bg: color-mix(in srgb, var(--t2) 88%, #000);
  --bg-soft: color-mix(in srgb, var(--t2) 80%, var(--t1) 12%);
  --surface: color-mix(in srgb, var(--t2) 72%, var(--t1) 28%);
  --surface-2: color-mix(in srgb, var(--t2) 54%, var(--t1) 46%);
  --card: var(--surface); --card-strong: var(--surface-2); --panel: var(--surface); --panel-2: var(--surface-2);
  --card-muted: color-mix(in srgb, var(--t2) 62%, var(--t1) 38%);
  --line: rgb(255 255 255 / 15%); --line-strong: rgb(255 255 255 / 28%);
  /* Scritte più blu e meno bianche (03/11/2026): un azzurro chiaro al posto del bianco. */
  --text: #cfe3ff;
  --muted: #a3c3f2;
  --muted-strong: #bcd6fb;
  --faint: #86a9de;
  --accent: var(--t3);
  --accent-2: color-mix(in srgb, var(--t3) 70%, #fff);
  --accent-soft: color-mix(in srgb, var(--t3) 16%, transparent);
  --accent-ring: color-mix(in srgb, var(--t3) 30%, transparent);
  --btn-bg: linear-gradient(135deg, var(--t3), color-mix(in srgb, var(--t3) 65%, #fff));
  --btn-text: color-mix(in srgb, var(--t2) 80%, #000);
  --btn-glow: color-mix(in srgb, var(--t3) 40%, transparent);
  --btn-glow-hover: color-mix(in srgb, var(--t3) 55%, transparent);
  --switch-off: color-mix(in srgb, var(--t1) 50%, var(--t2));
  --evidenza: #ffb703; --evidenza-testo: #2b1a00; --evidenza-soft: rgb(255 183 3 / 20%);
  --shadow: 0 18px 48px color-mix(in srgb, var(--t2) 60%, #000 40%);
  --shadow-soft: 0 12px 28px color-mix(in srgb, var(--t2) 55%, transparent);
}

/* Al tramonto (06/11/2026): le scritte celestine chiare diventano tutte bianche
   (il tema chiaro non cambia). */
.sfondo-prova:not(.theme-light)[data-ora="tardo"] {
  --text: #ffffff;
  --muted: rgb(255 255 255 / 85%);
  --muted-strong: #ffffff;
  --faint: rgb(255 255 255 / 68%);
}

/* La colonna: cielo sfumato, alone di sole o luna, righe del campo e un pallone
   in basso. */
.sfondo-prova .mh {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 80% 108%, rgb(255 255 255 / 12%) 0 78px, transparent 79px),
    radial-gradient(circle at 80% 108%, transparent 0 77px, rgb(255 255 255 / 22%) 78px 80px, transparent 81px),
    radial-gradient(circle at 80% 108%, transparent 0 118px, rgb(255 255 255 / 10%) 119px 121px, transparent 122px),
    radial-gradient(circle at var(--alone-x) var(--alone-y), var(--alone), transparent 42%),
    linear-gradient(180deg, var(--t1) 0%, var(--t2) 60%, color-mix(in srgb, var(--t2) 70%, #000) 100%);
  isolation: isolate;
}
/* Le onde di mare (03/11/2026: «molto più visibili, presenti e dinamiche»):
   cinque file fitte, ben colorate, nella parte ALTA dello schermo (03/11/2026: «ancora di
   più, principalmente in alto»), che scorrono a velocità e versi diversi mentre tutto il
   mare sale e scende. Ferme sullo schermo, anche quando la pagina scorre. In fondo, dove
   stanno i loghi, c'è solo un'onda leggera e lenta (::after). */
/* 03/11/2026 (il cliente: «raddoppiale, fino alla metà della pagina abbondante, e un sole dall'alto che
   entra dentro le onde»): dieci file che scendono fino a oltre metà schermo, e sopra due strati di
   sole: un alone caldo dall'alto e dei raggi che si muovono piano e vanno a finire dentro le onde. */
.sfondo-prova .mh::before {
  --onde:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 140'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='.35' stop-color='%23fff' stop-opacity='.26'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 76Q87 18 175 76T350 76T525 76T700 76V140H0Z' fill='url(%23g)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 140'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='.35' stop-color='%23fff' stop-opacity='.32'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 82Q70 25 140 82T280 82T420 82T560 82V140H0Z' fill='url(%23g)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 140'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='.35' stop-color='%23fff' stop-opacity='.36'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 90Q52 37 105 90T210 90T315 90T420 90V140H0Z' fill='url(%23g)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 140'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='.35' stop-color='%23fff' stop-opacity='.30'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 94Q40 46 80 94T160 94T240 94T320 94V140H0Z' fill='url(%23g)'/%3E%3C/svg%3E");
  content: ''; position: fixed; z-index: -1; pointer-events: none;
  left: 50%; top: 260px; width: min(100%, 520px); height: calc(80dvh - 200px); min-height: 320px; max-height: 640px; transform: translateX(-50%);
  /* 05/11/2026 (il cliente: «riduci un po' la quantità di onde»): cinque file invece di dieci, più distanziate */
  background-image: var(--onde);
  background-repeat: repeat-x;
  /* 05/11/2026 (il cliente): tolta l'onda più alta, ne restano quattro */
  background-size: 700px 140px, 560px 140px, 420px 140px, 320px 140px;
  background-position: 0 0, 0 70px, 0 140px, 0 210px;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
          mask-image: linear-gradient(180deg, #000 55%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .sfondo-prova .mh::before { animation: sfondo-onde 8s linear infinite, sfondo-marea 5s ease-in-out infinite alternate; }
}
@keyframes sfondo-onde {
  from { background-position: 0 0, 0 70px, 0 140px, 0 210px; }
  to   { background-position: -700px 0, 560px 70px, -420px 140px, 320px 210px; }
}
@keyframes sfondo-marea {
  from { translate: 0 -12px; }
  to   { translate: 0 16px; }
}
/* Il sole (fermo, il cliente 03/11/2026) sta sopra le onde, a tutto schermo: la sua luce
   scende e illumina le onde, come se l'app fosse immersa nel mare con il sole sopra.
   In fondo, dove stanno i loghi, un'onda bassa e lenta che non li copre. */
.sfondo-prova .mh::after {
  content: ''; position: fixed; z-index: -1; pointer-events: none;
  left: 50%; top: 0; width: min(100%, 520px); height: 100dvh; transform: translateX(-50%);
  background-image:
    /* 05/11/2026 (il cliente): il sole ha sempre la sua forma, il disco da cui partono i raggi */
    radial-gradient(circle at 50% 44px, rgb(255 251 230 / 95%) 0, rgb(255 251 230 / 70%) 22px, color-mix(in srgb, var(--t3) 50%, transparent) 62px, color-mix(in srgb, var(--t3) 24%, transparent) 118px, color-mix(in srgb, var(--t3) 8%, transparent) 178px, transparent 230px),
    repeating-conic-gradient(from 90deg at 50% 44px, color-mix(in srgb, var(--t3) 16%, transparent) 0deg, transparent 7deg, color-mix(in srgb, var(--t3) 16%, transparent) 15deg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* i raggi sfumano a metà schermo e in fondo non arriva niente di giallo */
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 62%);
          mask-image: linear-gradient(180deg, #000 30%, transparent 62%);
}
.sfondo-prova .mh-testa, .sfondo-prova .mh-schermo { background: transparent; }

/* Gli elementi si vestono degli stessi colori: bordi e ombre della stessa tinta,
   barra in basso e testa con un filo di luce, riquadri appena luminosi in alto. */
.sfondo-prova .mh-righe, .sfondo-prova .mh-prossima, .sfondo-prova .mh-portami {
  border-color: var(--line);
  background-image: linear-gradient(180deg, rgb(255 255 255 / 7%), transparent 55%);
  box-shadow: var(--shadow-soft);
}
.sfondo-prova .mh-barra {
  background: color-mix(in srgb, var(--t2) 82%, #000);
  border-top: 1px solid color-mix(in srgb, var(--t3) 45%, transparent);
  box-shadow: 0 -8px 24px color-mix(in srgb, var(--t3) 14%, transparent);
}
.sfondo-prova .mh-barra-quota { background: color-mix(in srgb, var(--t2) 70%, #000); }
/* 05/11/2026 (il cliente): le icone in basso (Home, Società, Classifica, Calendario) bianche, dove la barra è scura (tramonto e notte) */
.sfondo-prova[data-ora="tardo"] .mh-barra .mh-voce,
.sfondo-prova[data-ora="tardo"] .mh-barra .mh-voce.is-active,
.sfondo-prova[data-ora="tardo"] .mh-barra .mh-voce.is-active svg,
.sfondo-prova[data-ora="tardo"] .mh-barra .mh-voce.is-active .mh-balena { color: #fff; }

/* Il riquadro dei compleanni (03/11/2026): nello scuro si perdeva sul fondo colorato.
   Ora ha un fondo pieno e caldo, un bordo giallo più vivo e un leggero bagliore. */
.sfondo-prova .mh-compleanno {
  padding: 8px 12px;
  background:
    linear-gradient(135deg, rgb(255 198 26 / 38%), rgb(255 110 170 / 32%)),
    color-mix(in srgb, var(--t2) 80%, #000);
  border: 1.5px solid rgb(255 205 80 / 85%);
  box-shadow: 0 0 0 3px rgb(255 205 80 / 14%), 0 8px 22px rgb(255 170 60 / 28%);
}
.sfondo-prova .mh-compleanno b { font-size: clamp(9px, 3.9cqi, 14px); color: #fff; }
.sfondo-prova .mh-compleanno span { font-size: clamp(8px, 3.4cqi, 12px); color: #ffe9b8; }

/* Il passaggio da giocatore ad allenatore nel menu (03/11/2026): nel tema blu la voce
   «allenatore» era blu su blu e si confondeva con lo sfondo. Ora è bianca. */
.sfondo-prova:not(.theme-light) .menu-voce.menu-area-staff,
.sfondo-prova:not(.theme-light) .menu-voce.menu-area-staff:hover,
.sfondo-prova:not(.theme-light) .menu-voce.menu-area-staff.is-active {
  background: rgb(255 255 255 / 24%); box-shadow: none; color: #ffffff; border-left-color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.sfondo-prova:not(.theme-light) .menu-voce.menu-area-staff small { color: rgb(255 255 255 / 80%); }

/* Anche nel tema azzurro (scuro) «Ciao Nome» e la presentazione della società sono blu scuro
   (03/11/2026), solo il colore delle scritte: niente riquadri né bordi. */
.sfondo-prova:not(.theme-light) .mh-saluto { color: #0e2a66; }
.sfondo-prova:not(.theme-light) .mh-eroe :is(.eyebrow, h1, h2, p, .muted, .hint, small) { color: #0e2a66; }

/* Niente bordi sui box (03/11/2026: «più integrati al tema»): restano solo il colore
   di fondo e l'ombra morbida. */
.sfondo-prova :is(.mh-righe, .mh-prossima, .mh-portami, .mh-dati, .mh-scheda, .mh-squadra, .mh-segnala, .mh-vuoto, .mh-riga-grigia) {
  border-color: transparent;
}

/* Al tramonto (06/11/2026): anche le scritte del Calendario (date, nomi delle partite
   in casa e in trasferta, etichette delle squadre) bianche, e un bordino fine blu navy a tutti i box. */
.sfondo-prova:not(.theme-light)[data-ora="tardo"] .mh-riga.is-home :is(.mh-data, .mh-data b),
.sfondo-prova:not(.theme-light)[data-ora="tardo"] .mh-riga.is-home > span:nth-child(2) > b,
.sfondo-prova:not(.theme-light)[data-ora="tardo"] .mh-sq { color: #ffffff; }
/* Di notte (e di sera, ugualmente scura) le scritte blu scure del Calendario diventano bianche (06/11/2026).
   Le gare in trasferta restano azzurrine, come prima (06/11/2026). */
.sfondo-prova:not(.theme-light):is([data-ora="sera"], [data-ora="notte"]) .mh-riga.is-home :is(.mh-data, .mh-data b),
.sfondo-prova:not(.theme-light):is([data-ora="sera"], [data-ora="notte"]) .mh-riga.is-home > span:nth-child(2) > b,
.sfondo-prova:not(.theme-light):is([data-ora="sera"], [data-ora="notte"]) .mh-sq { color: #ffffff; }
.sfondo-prova:not(.theme-light)[data-ora="tardo"] :is(.mh-righe, .mh-prossima, .mh-portami, .mh-dati, .mh-scheda, .mh-squadra, .mh-segnala, .mh-vuoto, .mh-riga-grigia, .mh-blocco > .mh-gara) {
  border: 1px solid rgb(255 255 255 / 22%);
}

/* Titoli delle macro aree nel tema chiaro (03/11/2026): blu scuro, non bianchi o azzurri. */
.sfondo-prova.theme-light .mh-schermo :is(h1, h2, .eyebrow) { color: #0e2a66; }
/* «Ciao Nome» in alto e la pagina Società con le sue info (03/11/2026): blu scuro anche loro. */
.sfondo-prova.theme-light .mh-saluto { color: #0e2a66; }
.sfondo-prova.theme-light .mh-eroe :is(.eyebrow, h1, h2, p, .muted, .hint, small) { color: #0e2a66; }

/* ---------------------------------------------------------- chiaro ---- */
.sfondo-prova.theme-light {
  --ground: color-mix(in srgb, var(--t1) 45%, #c9d6ee);
  --bg: color-mix(in srgb, var(--t1) 42%, #fff);
  --bg-soft: color-mix(in srgb, var(--t1) 50%, #fff);
  --surface: color-mix(in srgb, var(--t1) 12%, #fff);
  --surface-2: color-mix(in srgb, var(--t1) 34%, #fff);
  --card: var(--surface); --card-strong: var(--surface-2); --panel: var(--surface); --panel-2: var(--surface-2);
  --card-muted: color-mix(in srgb, var(--t1) 26%, #fff);
  --line: color-mix(in srgb, var(--t2) 26%, transparent); --line-strong: color-mix(in srgb, var(--t2) 48%, transparent);
  --text: color-mix(in srgb, var(--t2) 82%, #000);
  --muted: color-mix(in srgb, var(--t2) 70%, #fff 8%);
  --muted-strong: color-mix(in srgb, var(--t2) 90%, #000);
  --faint: color-mix(in srgb, var(--t2) 55%, #fff);
  --accent: color-mix(in srgb, var(--t2) 85%, #000);
  --accent-2: var(--t1);
  --accent-soft: color-mix(in srgb, var(--t1) 16%, transparent);
  --accent-ring: color-mix(in srgb, var(--t1) 30%, transparent);
  --btn-bg: linear-gradient(135deg, var(--t1), var(--t2));
  --btn-text: #ffffff;
  --btn-glow: color-mix(in srgb, var(--t1) 35%, transparent);
  --btn-glow-hover: color-mix(in srgb, var(--t1) 50%, transparent);
  --shadow: 0 18px 48px color-mix(in srgb, var(--t2) 22%, transparent);
  --shadow-soft: 0 10px 24px color-mix(in srgb, var(--t2) 14%, transparent);
  --evidenza: #e58a00; --evidenza-testo: #241500; --evidenza-soft: rgb(229 138 0 / 16%);
}
.sfondo-prova.theme-light .mh {
  background-image:
    radial-gradient(circle at 80% 108%, rgb(255 255 255 / 55%) 0 78px, transparent 79px),
    radial-gradient(circle at 80% 108%, transparent 0 77px, color-mix(in srgb, var(--t1) 35%, transparent) 78px 80px, transparent 81px),
    radial-gradient(circle at var(--alone-x) var(--alone-y), var(--alone), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--t1) 78%, #fff) 0%, color-mix(in srgb, var(--t1) 48%, #fff) 55%, color-mix(in srgb, var(--t2) 38%, #fff) 100%);
}
.sfondo-prova.theme-light .mh-righe, .sfondo-prova.theme-light .mh-prossima, .sfondo-prova.theme-light .mh-portami {
  background-image: none; box-shadow: var(--shadow-soft);
}
.sfondo-prova.theme-light .mh-barra {
  background: color-mix(in srgb, var(--t1) 30%, #fff);
  border-top-color: color-mix(in srgb, var(--t2) 25%, transparent);
  box-shadow: 0 -8px 24px color-mix(in srgb, var(--t2) 10%, transparent);
}
.sfondo-prova.theme-light .mh-barra-quota { background: var(--surface-2); }


/* La luna (03/11/2026): di notte il sole diventa una luna bianca con un alone radiale,
   niente raggi. Le onde restano. */
.sfondo-prova[data-ora="notte"] .mh::after {
  background-image:
    radial-gradient(circle at 78% 9%, #ffffff 0 24px, rgb(235 242 255 / 55%) 25px, rgb(220 232 255 / 18%) 46px, transparent 90px),
    radial-gradient(ellipse 85% 45% at 78% 0%, rgb(210 225 255 / 22%), transparent 70%),
    /* le stelle (05/11/2026): piccoli punti chiari sparsi nel cielo, che non coprono la luna */
    radial-gradient(circle at 12% 7%, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 28% 14%, rgb(255 255 255 / 85%) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 5%, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 55% 17%, rgb(255 255 255 / 80%) 0 1px, transparent 2px),
    radial-gradient(circle at 63% 9%, #fff 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 90% 20%, rgb(255 255 255 / 85%) 0 1px, transparent 2px),
    radial-gradient(circle at 6% 24%, rgb(255 255 255 / 80%) 0 1px, transparent 2px),
    radial-gradient(circle at 20% 31%, #fff 0 1.3px, transparent 2.3px),
    radial-gradient(circle at 36% 26%, rgb(255 255 255 / 75%) 0 1px, transparent 2px),
    radial-gradient(circle at 50% 33%, #fff 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 70% 28%, rgb(255 255 255 / 85%) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 36%, #fff 0 1.3px, transparent 2.3px),
    radial-gradient(circle at 95% 8%, rgb(255 255 255 / 80%) 0 1px, transparent 2px);
}
/* Sera e notte: il cielo in alto è scuro, quindi saluto e presentazione tornano chiari. */
.sfondo-prova:not(.theme-light):is([data-ora="sera"], [data-ora="notte"]) .mh-saluto,
.sfondo-prova:not(.theme-light):is([data-ora="sera"], [data-ora="notte"]) .mh-eroe :is(.eyebrow, h1, h2, p, .muted, .hint, small) { color: #e8f0ff; }

/* I colori scivolano solo coi cambi di fascia ad app aperta: all'apertura niente passaggio
   dall'azzurro al colore dell'ora (03/11/2026). La classe la mette il layout dopo 1,5 s. */
.sfondo-prova.sfondo-scorre { transition: --t1 2.5s ease, --t2 2.5s ease, --t3 2.5s ease; }

/* La Flash news coi colori del tema dinamico (03/11/2026): la striscia nel blu dell'ora,
   l'etichetta e la linea che corre nel colore del sole (o della luna). */
.sfondo-prova .mh-breaking, .sfondo-prova .mh-breaking-popup {
  --sole: linear-gradient(135deg, color-mix(in srgb, var(--t3) 65%, #fff) 0%, var(--t3) 55%, color-mix(in srgb, var(--t3) 80%, var(--t1)) 100%);
}
.sfondo-prova .mh-breaking {
  background: linear-gradient(90deg, var(--t2), color-mix(in srgb, var(--t2) 65%, var(--t1)));
  box-shadow: 0 3px 10px -6px color-mix(in srgb, var(--t2) 60%, transparent);
}
.sfondo-prova .mh-breaking::after {
  background: linear-gradient(90deg, transparent, var(--t3) 30%, color-mix(in srgb, var(--t3) 70%, #fff) 50%, var(--t3) 70%, transparent) 0 0 / 50% 100% repeat-x;
}
.sfondo-prova .mh-breaking-voce:active { color: var(--t3); }