/* ---------- Font (ospitati sul sito, licenza OFL) ---------- */

@font-face {
    font-family: 'League Spartan';
    src: url('fonts/league-spartan.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: 'Anton';
    src: url('fonts/anton.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/open-sans.woff2') format('woff2');
    font-weight: 300 800;
    font-display: swap;
}

@font-face {
    font-family: 'Archivo';
    src: url('fonts/archivo.woff2') format('woff2');
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
}

/* ---------- Tavolozza e font ---------- */

:root {
    --primario: #020a53;   /* blu della società */
    --secondario: #101876; /* blu medio, per alternare */
    --accento: #ffcc00;    /* giallo di numeri e ruoli */
    --chiaro: #ffffff;
    --grigio: #f3f4f8;     /* sfondo dei blocchi alternati */
    --testo: #1f2937;
    --raggio: 12px;
    --margine: clamp(1rem, 3vw, 2rem); /* stesso margine laterale per testata, blocchi e piè di pagina */

    --font-titoli: 'League Spartan', sans-serif;
    --font-numeri: 'Anton', sans-serif;
    --font-testo: 'Open Sans', sans-serif;
    --font-marchio: 'Archivo', sans-serif;
}

/* ---------- Base ---------- */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-testo);
    line-height: 1.5;
    color: var(--testo);
    background: var(--chiaro);
}

main {
    flex: 1;
    overflow-x: clip;
}

/* la testata è fissa in alto: questo spazio vuoto (alto quanto la testata grande) le fa posto.
   Quando la testata si rimpicciolisce, la pagina sotto non si sposta e il browser non la deve ricalcolare */
body {
    padding-top: var(--altezza-testata, 0px);
}


/* le strisce a tutta larghezza (partite, sponsor) escono dal margine fino ai bordi dello schermo */
.partite .calendario,
.sponsor .nastro {
    margin-inline: calc(-1 * var(--margine));
}

.blocco {
    padding: 3rem var(--margine);
    scroll-margin-top: 6rem;
}

.blocco:nth-child(even) {
    background: var(--grigio);
}

.blocco h2 {
    margin-bottom: 1.5rem;
    color: var(--primario);
    font-family: var(--font-titoli);
    font-size: clamp(2rem, 4.5vw, 3.6rem);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

/* ---------- Intestazione ---------- */

/* due colonne: marchio a sinistra | menù a destra */
.testata {
    --spazio: 1.75rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: var(--spazio) var(--margine);
    background: var(--primario);
    transition: padding 0.25s, background 0.3s;
}

/* sopra un blocco blu (Sponsor, Galleria, piè di pagina...) la testata diventa gialla, così si stacca */
.testata.su-blu {
    background: var(--accento);
}

.testata.su-blu .marchio,
.testata.su-blu .menu a,
.testata.su-blu .menu-apri {
    color: var(--primario);
}

.testata.su-blu .marchio span {
    border-left-color: var(--primario);
}

/* il logo è bianco: sul giallo lo coloro dello stesso blu delle scritte (#020a53).
   Prima lo rendo nero (brightness 0), poi la catena di filtri lo porta a quel blu (calcolata e verificata: esce rgb(0, 12, 86)) */
.testata.su-blu .marchio img {
    filter: brightness(0) saturate(100%) invert(12%) sepia(16%) saturate(7485%) hue-rotate(219deg) brightness(101%) contrast(125%);
}

.testata.su-blu .menu a:hover {
    color: var(--secondario);
    text-decoration: underline;
}

.marchio,
.menu a,
.menu-apri {
    transition: color 0.3s;
}

.marchio span {
    transition: font-size 0.25s, border-color 0.3s;
}

.testata.ridotta {
    --spazio: 0.5rem;
}

.marchio {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1.5vw, 1rem);
    color: var(--chiaro);
    text-decoration: none;
}

.marchio img {
    height: clamp(48px, 7vw, 96px);
    width: auto;
    transition: height 0.25s;
}

.marchio span {
    display: flex;
    flex-direction: column;
    padding-left: clamp(0.5rem, 1.5vw, 1rem);
    border-left: 3px solid var(--chiaro);
    font-family: var(--font-marchio);
    font-size: clamp(1.1rem, 2.8vw, 2.6rem);
    font-stretch: 125%;
    font-weight: 900;
    line-height: 0.95;
    text-transform: uppercase;
    transition: font-size 0.25s;
}

.marchio small {
    font-size: 1em;
}

/* scorrendo giù si rimpiccioliscono insieme logo e titolo */
.testata.ridotta .marchio img {
    height: clamp(36px, 3.5vw, 48px);
}

.testata.ridotta .marchio span {
    font-size: clamp(0.85rem, 1.4vw, 1.3rem);
}

/* ---------- Menù ---------- */

.menu {
    justify-self: end;
    align-self: end;
}

.menu ul {
    display: flex;
    gap: 1.5rem;
    padding: 0;
    list-style: none;
}

.menu a {
    color: var(--chiaro);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.menu a:hover {
    color: var(--accento);
}

.menu-apri {
    display: none;
    border: 0;
    background: none;
    color: var(--chiaro);
    font-size: 1.75rem;
    cursor: pointer;
}

@media (max-width: 768px) {
    .menu {
        align-self: center;
    }

    .menu-apri {
        display: block;
    }

    .menu ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: var(--primario);
    }

    .menu.aperto ul {
        display: flex;
    }

    .testata.su-blu .menu ul {
        background: var(--accento);
    }

    .menu a {
        display: block;
        padding: 0.75rem 1rem;
        border-top: 1px solid rgb(255 255 255 / 0.1);
    }
}

/* ---------- Carosello (componente comune) ---------- */

.carosello-binario {
    position: relative;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.carosello-binario > * {
    flex: 0 0 100%;
    scroll-snap-align: start;
}

.carosello-pallini {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.carosello-pallini button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #c6c6c6;
    cursor: pointer;
}

.carosello-pallini .attivo {
    background: var(--primario);
}

.carosello-card .carosello-binario {
    gap: 1rem;
}

.carosello-card .carosello-binario > * {
    flex-basis: clamp(150px, 22%, 220px);
}

.carosello-frecce {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

.carosello-frecce button {
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 50%;
    background: var(--primario);
    color: var(--chiaro);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

/* ---------- Bottoni delle categorie ---------- */

.categorie {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.categorie button {
    flex: none;
    padding: 0.35rem 0.9rem;
    border: 1.5px solid var(--primario);
    border-radius: 999px;
    background: var(--chiaro);
    color: var(--primario);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.categorie [aria-selected="true"] {
    background: var(--primario);
    color: var(--chiaro);
}

/* ---------- Storia: la prima sezione, su sfondo blu ----------
   Lo sfondo è un blu notte un filo diverso da quello della testata (così la testata non diventa gialla qui sopra),
   con due aloni di luce sfumati e una trama di puntini che sfuma verso il centro. */

#storia {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(ellipse 45% 55% at 85% 20%, rgb(40 60 200 / 0.35), transparent 70%),
        radial-gradient(ellipse 50% 45% at 30% 95%, rgb(90 40 160 / 0.3), transparent 70%),
        #050b4f;
    color: var(--chiaro);
}

#storia::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(rgb(255 255 255 / 0.13) 1px, transparent 1.6px) 0 0 / 7px 7px;
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 0% 0%, #000, transparent 75%);
    mask-image: radial-gradient(ellipse 60% 70% at 0% 0%, #000, transparent 75%);
    pointer-events: none;
}

.storia {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(1.5rem, 5vw, 4.5rem);
    align-items: start;
}

/* la foto "galleggia" a sinistra: titolo e testo le stanno accanto e poi continuano sotto, a tutta larghezza */
.storia .carosello {
    float: left;
    width: clamp(110px, 24vw, 260px);
    margin: 0 clamp(1rem, 3vw, 2.5rem) 0.5rem 0;
}

.storia .carosello-binario {
    border-radius: 22px;
    box-shadow: 0 10px 28px rgb(0 0 0 / 0.35);
}

.storia img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}

.storia h2 {
    color: var(--chiaro);
}

/* Il testo lungo si ferma a 12 righe. Si usa "max-height + overflow: clip" (e non line-clamp)
   perché così il testo continua a girare intorno alla foto; l'ultima riga sfuma se c'è altro da leggere. */
.riassunto {
    max-height: calc(1.7em * 12);
    overflow: clip;
    line-height: 1.7;
    text-align: justify; /* giustificato, come in un libro */
    hyphens: auto;       /* va a capo spezzando le parole lunghe in sillabe (in italiano, grazie a lang="it"): niente buchi tra le parole */
}

.riassunto h3 {
    text-align: left; /* i sottotitoli restano allineati a sinistra */
}

/* Il testo scritto con l'editor dello Studio: paragrafi, sottotitoli, citazioni, elenchi.
   Citazioni ed elenchi hanno "flow-root": così, se capitano accanto alla foto, si stringono invece di finirle sotto. */
.riassunto > * {
    margin: 0 0 0.8em;
}

.riassunto h3 {
    margin-top: 1.2em;
    font-family: var(--font-titoli);
    font-size: 1.3em;
    line-height: 1.2;
    color: var(--accento);
    text-transform: uppercase;
}

.riassunto blockquote {
    display: flow-root;
    margin-block: 1em;
    padding: 0.1em 0.2em 0.1em 1em; /* un filo a destra: l'ultima lettera in corsivo non viene tagliata */
    border-left: 4px solid var(--accento);
    font-size: 1.15em;
    font-style: italic;
}

.riassunto ul,
.riassunto ol {
    display: flow-root;
    padding-left: 1.3em;
}

.riassunto a {
    color: var(--accento);
}

.riassunto:not(.aperto):has(+ .leggi-di-piu:not([hidden])) {
    -webkit-mask-image: linear-gradient(#000 calc(100% - 1.7em), transparent);
    mask-image: linear-gradient(#000 calc(100% - 1.7em), transparent);
}

.riassunto.aperto {
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
}

.leggi-di-piu {
    margin-top: 0.5rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accento);
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

/* i contatori, uno sotto l'altro: numero grande giallo e scritta bianca */
.contatori {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2.25rem);
    padding-top: 0.5rem;
}

.contatore {
    display: grid;
    justify-items: center;
    font-family: var(--font-titoli);
    line-height: 1;
    text-align: center;
}

.contatore strong {
    font-size: clamp(2.6rem, 6vw, 5rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--accento);
}

.contatore span {
    margin-top: 0.3rem;
    font-size: clamp(0.85rem, 1.8vw, 1.6rem);
    font-weight: 800;
    color: var(--chiaro);
    text-transform: uppercase;
}

/* ---------- Squadre: 5 card visibili, quella centrale ingrandita; frecce accanto al titolo ---------- */

.squadre {
    position: relative;
}

/* le frecce salgono sulla riga del titolo, a destra, centrate sulla sua altezza */
.squadre .carosello-frecce {
    position: absolute;
    top: calc((clamp(2rem, 4.5vw, 3.6rem) - 2.5rem) / 2);
    right: 0;
    margin: 0;
}

.carosello-centro {
    container-type: inline-size;
    --card: min(16.5cqi, 32vh); /* larghezza di una card: cinque riempiono la riga, ma la centrale sta sempre nello schermo */
    --zoom: 1.44;               /* quanto si ingrandisce quella centrale */
    --spazio: 0.08;             /* aria tra le card */
    --spinta: calc(var(--card) * (var(--zoom) - 1) / 2); /* di quanto la centrale ingrandita "allarga" ogni lato */
}

/* spazi calcolati dalla card: la card ingrandita non viene tagliata */
.carosello-centro .carosello-binario {
    gap: calc(var(--card) * var(--spazio));
    padding: calc(var(--card) * (var(--zoom) - 1) * 0.75 + 0.5rem) calc(50cqi - var(--card) / 2);
}

.carosello-centro .carosello-binario > * {
    flex: 0 0 var(--card);
    scroll-snap-align: center;
    opacity: 0;
    transition: transform 0.3s, translate 0.3s, opacity 0.3s;
}

/* le card ai lati si spostano in fuori quanto si allarga la centrale: così l'aria tra le card è sempre uguale */
.carosello-centro .centro ~ * {
    translate: var(--spinta);
}

.carosello-centro :has(~ .centro) {
    translate: calc(-1 * var(--spinta));
}

/* si vedono solo la centrale e due card per lato */
.carosello-centro :is(.centro, .centro + *, .centro + * + *, :has(+ .centro), :has(+ * + .centro)) {
    opacity: 1;
}

.carosello-centro .centro {
    z-index: 1;
    transform: scale(var(--zoom));
}

.card-giocatore {
    container-type: inline-size;
    position: relative;
    padding: 0 7% 5%;
    border-radius: calc(var(--card) * 0.1);
    background:
        linear-gradient(transparent 35%, var(--primario) 80%),
        radial-gradient(rgb(255 255 255 / 0.14) 18%, transparent 24%) 0 0 / max(4px, var(--card) * 0.04) max(4px, var(--card) * 0.04), /* puntini in proporzione alla card */
        linear-gradient(var(--secondario), var(--primario));
    box-shadow: 0 10px 20px rgb(2 10 83 / 0.35);
    color: var(--chiaro);
    text-align: center;
}

/* la foto parte dal bordo alto e ha gli angoli arrotondati solo in basso */
.card-giocatore img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 8 / 9;
    object-fit: cover;
    object-position: top;
    border-radius: 0 0 calc(var(--card) * 0.08) calc(var(--card) * 0.08);
}

.card-giocatore .numero {
    position: absolute;
    top: 6cqi;
    left: 9cqi;
    font-family: var(--font-marchio);
    font-size: 21cqi;
    font-weight: 900;
    font-stretch: 125%; /* cifre larghe e piene, come nel disegno */
    line-height: 1;
    color: var(--accento);
    text-shadow: 0 2px 6px rgb(0 0 0 / 0.4);
}

.card-giocatore h3 {
    padding-top: 4cqi;
    font-family: var(--font-titoli);
    font-size: 10cqi;
    font-weight: 800;
    line-height: 1.05;
    text-transform: uppercase;
}

.card-giocatore p {
    font-family: var(--font-titoli);
    font-size: 7.5cqi;
    font-weight: 800;
    color: var(--accento);
    text-transform: uppercase;
    text-shadow: 0 2px 0 rgb(0 0 0 / 0.45);
}

/* la card del giocatore si apre in grande al clic, come le foto della Galleria (vedi sito.js) */
.card-giocatore {
    cursor: zoom-in;
}

.zoom-giocatore {
    display: grid;
    place-items: center;
}

.zoom-giocatore .cornice {
    position: relative; /* sopra al velo */
}

.zoom-giocatore .card-giocatore {
    box-shadow: 0 30px 80px rgb(0 0 0 / 0.6);
    cursor: zoom-out;
}

/* ---------- Partite ---------- */

.partite .calendario {
    gap: 0;
    box-shadow: 0 18px 24px -12px rgb(2 10 83 / 0.45);
}

.partite .calendario > * {
    flex-basis: clamp(260px, 26vw, 380px);
    scroll-snap-align: center;
}

/* card alta e stretta; tutte le misure interne sono in "cqi" (% della larghezza della card),
   così su PC e su telefono la card è identica, solo più grande o più piccola */
.card-partita {
    container-type: inline-size;
    display: grid;
    grid-template-rows: auto 1fr auto;
    aspect-ratio: 13 / 20;
    padding: 0;
    background: var(--primario);
    color: var(--chiaro);
}

.card-partita:nth-child(even) {
    background: var(--secondario);
}

/* il "margine interno" lo danno i contenuti: un cqi dentro la card vale l'1% della sua larghezza */
.card-partita > * {
    margin-inline: 8cqi;
}

.card-partita > :first-child {
    margin-top: 9cqi;
}

.card-partita > :last-child {
    margin-bottom: 9cqi;
}

.card-partita .testa {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4cqi;
}

.card-partita .lega img {
    display: block;
    height: 15cqi;
    width: auto;
}

.card-partita .lega span {
    white-space: nowrap;
    font-family: var(--font-titoli);
    font-size: max(9px, 5cqi);
    font-weight: 700;
    text-transform: uppercase;
}

.card-partita .info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: max(8px, 4cqi);
    line-height: 1.3;
    text-align: right;
    text-transform: uppercase;
}

.card-partita .info strong {
    font-size: max(10px, 5cqi);
    font-weight: 800;
}

.card-partita .info a {
    color: inherit;
}

.card-partita .grande {
    align-self: end;
    font-family: var(--font-numeri);
    font-size: 20cqi;
    line-height: 1;
    text-transform: uppercase;
}

.card-partita .grande b {
    font-weight: inherit;
}

.card-partita .sfidanti {
    display: grid;
    grid-template-rows: auto auto minmax(6cqi, auto); /* la 3ª riga (parziali o avviso) c'è sempre: così data e risultato restano alla stessa altezza */
    gap: 2cqi;
    margin-top: 4cqi;
}

.card-partita .lato {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3cqi;
    font-size: max(8px, 4.8cqi);
    text-transform: uppercase;
}

.card-partita .lato[data-noi] {
    font-weight: 800;
}

.card-partita .lato img,
.card-partita .senza-logo {
    flex: none;
    width: 8cqi;
    height: 8cqi;
    object-fit: contain;
}

.card-partita .senza-logo {
    border: 1.5px solid rgb(255 255 255 / 0.4);
    border-radius: 50%;
}

.card-partita .parziali {
    font-size: max(7px, 3.6cqi);
    color: rgb(255 255 255 / 0.7);
}

/* tra un set e l'altro un puntino; il punteggio di chi ha vinto il set è in grassetto e bianco pieno */
.parziali span + span::before {
    content: ' · ';
}

.parziali b {
    font-weight: inherit;
}

.parziali b.vinto {
    font-weight: 800;
}

.card-partita .parziali b.vinto {
    color: var(--chiaro);
}

.card-partita .avviso {
    font-size: max(8px, 4.5cqi);
    font-weight: 800;
    color: var(--accento);
}

.card-partita:is([data-fase="rinviata"], [data-fase="annullata"]) .grande {
    text-decoration: line-through;
    opacity: 0.5;
}

.card-partita.prossima {
    box-shadow: inset 0 5px var(--accento);
}

/* icona posizione: il link si allarga a tutta la card, così si clicca ovunque */
.card-partita {
    position: relative;
}

.card-partita .info .posizione {
    display: flex;
    align-items: center;
    gap: 1.2cqi;
    margin-top: 1.5cqi;
    color: var(--chiaro);
    font-size: max(9px, 4.6cqi);
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
}

.card-partita .posizione svg {
    display: block;
    width: 1.1em;
    height: 1.1em;
}

.card-partita .posizione::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* le frecce salgono sulla riga del titolo PARTITE, a destra: sopra il bottone "Salva nel calendario" */
.partite {
    position: relative;
}

.partite .carosello-frecce {
    position: absolute;
    top: calc((clamp(2rem, 4.5vw, 3.6rem) - 2.5rem) / 2);
    right: 0;
    margin: 0;
}

/* riga dei bottoni dei campionati + "Salva nel calendario" */
.barra-schede {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.barra-schede .categorie {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

.salva-calendario {
    position: relative;
    flex: none;
}

.salva-calendario summary {
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: var(--accento);
    color: var(--primario);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
}

.salva-calendario summary::-webkit-details-marker {
    display: none;
}

.salva-calendario .scelte {
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    z-index: 5;
    display: flex;
    flex-direction: column;
    min-width: 14rem;
    padding: 0.4rem;
    border-radius: var(--raggio);
    background: var(--primario);
    box-shadow: 0 10px 24px rgb(2 10 83 / 0.35);
}

.salva-calendario .scelte a {
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    color: var(--chiaro);
    font-size: 0.85rem;
    text-decoration: none;
}

.salva-calendario .scelte a:hover {
    background: rgb(255 255 255 / 0.12);
}

/* solo su Android: due parole su cosa fare col file scaricato */
.salva-calendario .nota {
    max-width: 14rem;
    margin: 0.25rem 0.75rem 0.4rem;
    color: rgb(255 255 255 / 0.75);
    font-size: 0.75rem;
    line-height: 1.4;
}

/* sotto il video: si avvisa che il video arriva da YouTube */
.nota-video {
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: #6b7280;
}

.nota-video a {
    color: inherit;
}

/* ---------- Classifica ---------- */

.tabella {
    overflow-x: auto;
    border: 1px solid #d9dce8;
    border-radius: var(--raggio);
}

.classifica table {
    width: 100%;
    border-collapse: collapse;
    background: var(--chiaro);
    font-size: 0.9rem;
    white-space: nowrap;
}

.classifica :is(th, td) {
    padding: 0.5rem 0.75rem;
    text-align: center;
}

.classifica th {
    background: var(--primario);
    color: var(--chiaro);
}

.classifica td {
    border-top: 1px solid #eef0f7;
}

.classifica :is(th, td):nth-child(2) {
    width: 100%;
    text-align: left;
}

.classifica abbr {
    text-decoration: none;
}

.classifica tr[data-nostra] td {
    background: var(--primario);
    color: var(--chiaro);
    font-weight: 700;
}

.sale::before,
.scende::before {
    margin-right: 0.25rem;
    font-size: 0.7em;
}

.sale::before {
    content: "▲";
    color: #16a34a;
}

.scende::before {
    content: "▼";
    color: #dc2626;
}

.aggiornata {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    text-align: right;
    color: #6b7280;
}

/* "1 da recuperare": partite rinviate o annullate ancora da giocare */
.classifica .recuperi {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: var(--accento);
    color: var(--primario);
    font-size: 0.7em;
    font-weight: 700;
    white-space: nowrap;
}

/* ---------- Magliette ---------- */

.intestazione-blocco {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.blocco .intestazione-blocco h2,
.intestazione-blocco .carosello-frecce {
    margin: 0;
}

.magliette .carosello-binario > * {
    flex-basis: clamp(180px, 23%, 260px);
}

.card-maglia {
    perspective: 1000px;
    color: var(--primario);
    text-align: center;
}

.giro {
    position: relative;
    aspect-ratio: 1;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.giro img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0.5rem;
    object-fit: contain;
    backface-visibility: hidden;
}

.giro .retro {
    transform: rotateY(180deg);
}

@media (hover: hover) {
    .card-maglia[data-girevole]:hover .giro {
        transform: rotateY(180deg);
    }
}

.card-maglia.girata .giro {
    transform: rotateY(180deg);
}

.card-maglia h3 {
    margin-top: 0.75rem;
    font-family: var(--font-titoli);
    font-size: clamp(1.1rem, 2vw, 1.6rem);
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}

.card-maglia .campionato {
    font-size: 1rem;
    text-transform: uppercase;
}

.card-maglia .stagione {
    font-size: 0.85rem;
}

/* "tocca una maglia per vedere il retro": serve solo dove non c'è il mouse (telefoni e tablet) */
.suggerimento-retro {
    display: none;
    margin-top: 1rem;
    color: var(--testo);
    text-align: right; /* in basso a destra della sezione */
    font-size: 0.85rem;
    opacity: 0.75;
}

@media (hover: none) {
    .suggerimento-retro {
        display: block;
    }
}

/* ---------- Sponsor ---------- */

/* sfondo blu e titolo giallo (anche per la Galleria) */
.blocco:has(> .sponsor),
.blocco:has(> .galleria) {
    background: var(--primario);
}

.blocco .sponsor h2,
.blocco .galleria h2 {
    color: var(--accento);
}

.sponsor .nastro {
    overflow: hidden;
}

.sponsor .nastro + .nastro {
    margin-top: 1.5rem;
}

/* il nastro sopra va da sinistra verso destra: stessa animazione, al contrario */
.nastro[data-verso="destra"] .nastro-binario {
    animation-direction: reverse;
}

.nastro-binario {
    display: flex;
    width: max-content;
    animation: nastro var(--durata) linear infinite;
    will-change: transform; /* scorre su un livello tutto suo, senza ridisegnare la pagina */
}

.nastro:hover .nastro-binario {
    animation-play-state: paused;
}

.nastro ul {
    display: flex;
    align-items: center;
    padding: 0;
    list-style: none;
}

.nastro li {
    padding-inline: 2.5rem;
}

.nastro img {
    display: block;
    height: clamp(56px, 8vw, 96px);
    width: auto;
}

@keyframes nastro {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .nastro {
        overflow-x: auto;
    }

    .nastro-binario {
        animation: none;
    }
}

/* i blocchi lontani dallo schermo stanno fermi (la classe la mette sito.js);
   solo gli elementi che si animano da soli, così il browser non deve ricontrollare tutto il blocco */
.fuori-vista .nastro-binario,
.fuori-vista .bollino::before,
.fuori-vista .motto::after {
    animation-play-state: paused;
}

/* ---------- Guardaci: diretta e video del canale YouTube ---------- */

.guardaci .intestazione-blocco {
    flex-wrap: wrap;
}

.guardaci .canale {
    padding: 0.45rem 1rem;
    border-radius: 999px;
    background: var(--primario);
    color: var(--chiaro);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
}

/* il video grande a sinistra, gli altri video in colonna a destra */
.guardaci-corpo {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.schermo-video {
    display: grid;
    gap: 0.6rem;
}

.copertina,
.schermo-video iframe {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--raggio);
    background: var(--primario);
}

.copertina {
    cursor: pointer;
}

.copertina img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(.2, .8, .2, 1);
}

@media (hover: hover) {
    .copertina:hover img {
        transform: scale(1.04);
    }
}

.copertina.vuota {
    display: grid;
    place-items: center;
    color: var(--chiaro);
    cursor: default;
    text-align: center;
}

/* il grande ▶ giallo al centro */
.copertina .play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--accento);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
    translate: -50% -50%;
    transition: scale 0.25s;
}

.copertina .play::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--primario);
    clip-path: polygon(40% 30%, 40% 70%, 72% 50%);
}

.copertina:hover .play {
    scale: 1.1;
}

.copertina:focus-visible,
.miniatura:focus-visible {
    outline: 3px solid var(--accento);
    outline-offset: 3px;
}

.copertina .bollino {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: var(--accento); /* giallo; rosso quando è in diretta */
    color: var(--primario);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.copertina[data-stato="live"] .bollino {
    background: #e11d2e;
    color: #fff;
}

/* il pallino che pulsa accanto a "In diretta" */
.copertina[data-stato="live"] .bollino::before,
.menu .live::before {
    content: "";
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    margin-right: 0.4em;
    border-radius: 50%;
    background: currentColor;
    vertical-align: 0.08em;
    animation: pulsa 1.2s ease-in-out infinite;
}

@keyframes pulsa {
    50% { opacity: 0.25; }
}

.titolo-video b {
    display: block;
    color: var(--primario);
    font-family: var(--font-titoli);
    font-size: clamp(1.1rem, 2.2vw, 1.5rem);
    font-weight: 800;
    line-height: 1.15;
}

.titolo-video span,
.prossima-diretta {
    color: var(--testo);
    font-size: 0.85rem;
    opacity: 0.8;
}

.prossima-diretta {
    margin: 0;
}

.avviso-diretta {
    justify-self: start;
    padding: 0.45rem 1rem;
    border: 0;
    border-radius: 999px;
    background: #e11d2e;
    color: var(--chiaro);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
}

.altri-video {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.miniatura {
    display: grid;
    grid-template-columns: 42% minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: var(--primario);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.miniatura img {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    object-fit: cover;
    background: var(--primario);
    transition: opacity 0.2s;
}

.miniatura:hover img {
    opacity: 0.8;
}

.miniatura b {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.9rem;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.miniatura small {
    display: block;
    margin-top: 0.2rem;
    color: var(--testo);
    opacity: 0.7;
}

.miniatura[aria-current="true"] img {
    outline: 3px solid var(--accento);
}

/* "LIVE" rosso nel menù e pallino rosso sul bottone ☰ mentre c'è la diretta */
.menu .live {
    margin-left: 0.4rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: #e11d2e;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
}

.in-diretta .menu-apri {
    position: relative;
}

.in-diretta .menu-apri::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e11d2e;
    animation: pulsa 1.2s ease-in-out infinite;
}

@media (max-width: 768px) {
    .guardaci-corpo {
        grid-template-columns: minmax(0, 1fr);
    }

    /* sul telefono gli altri video in fila, da scorrere col dito */
    .altri-video {
        display: flex;
        gap: 0.75rem;
        margin-inline: calc(-1 * var(--margine));
        padding-inline: var(--margine);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--margine);
        scrollbar-width: none;
    }

    .altri-video li {
        flex: 0 0 62vw;
        scroll-snap-align: start;
    }

    .miniatura {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }

    .copertina .play {
        width: 60px;
        height: 60px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .copertina[data-stato="live"] .bollino::before,
    .menu .live::before,
    .in-diretta .menu-apri::after {
        animation: none;
    }
}

/* ---------- Galleria: mosaico elastico 3 × 4 ---------- */

.galleria .scorri {
    position: relative;
}

.galleria .finestra {
    contain: layout paint; /* quando le foto si allargano, il ricalcolo resta dentro la galleria */
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: var(--raggio);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.galleria .finestra::-webkit-scrollbar {
    display: none;
}

/* tre righe; le colonne le decide sito.js: quella della foto scelta è più larga */
.mosaico-elastico {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, 1fr);
    height: clamp(420px, min(52vw, 100vh - 220px), 640px); /* sta tutto nello schermo sotto il titolo */
    gap: 8px;
    transition: grid-template-columns 0.7s cubic-bezier(.2, .8, .2, 1), grid-template-rows 0.7s cubic-bezier(.2, .8, .2, 1);
}

.mosaico-elastico .casella {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: var(--raggio);
    background: var(--primario);
    cursor: zoom-in;
}

.mosaico-elastico .foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* le foto piccole un po' scure: un velo sopra (più leggero da muovere di un filtro sulla foto) */
.mosaico-elastico .casella::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgb(2 6 40 / 0.35);
    transition: opacity 0.5s;
    pointer-events: none;
}

.mosaico-elastico .attiva::before {
    opacity: 0;
}

.mosaico-elastico .casella::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(transparent 50%, rgb(2 10 83 / 0.8));
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
}

.mosaico-elastico .attiva::after {
    opacity: 1;
}

.mosaico-elastico .casella:focus-visible {
    outline: 3px solid var(--accento);
    outline-offset: 2px;
}

.mosaico-elastico .dida {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    z-index: 2;
    color: var(--chiaro);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s, transform 0.5s cubic-bezier(.2, .8, .2, 1);
}

.mosaico-elastico .attiva .dida {
    opacity: 1;
    transform: none;
    transition-delay: 0.25s;
}

.mosaico-elastico .dida::before {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin-bottom: 8px;
    background: var(--accento);
}

.mosaico-elastico .dida b {
    display: block;
    font-family: var(--font-numeri);
    font-size: clamp(1.2rem, 3vw, 2.1rem);
    font-weight: 400;
    line-height: 1.05;
    text-transform: uppercase;
    text-wrap: balance;
}

.mosaico-elastico .dida span {
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.8;
}

/* le frecce ai bordi: si vedono quando il mouse è sopra e la griglia può scorrere da quella parte */
.galleria .bordo {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 13%;
    padding: 0 14px;
    border-radius: var(--raggio);
    color: var(--primario);
    font-size: 1.6rem;
    font-weight: 800;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.galleria .bordo span {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--accento);
}

.galleria .bordo.sx {
    left: 0;
    background: linear-gradient(90deg, rgb(2 10 83 / 0.7), transparent);
}

.galleria .bordo.dx {
    right: 0;
    justify-content: flex-end;
    background: linear-gradient(270deg, rgb(2 10 83 / 0.7), transparent);
}

@media (hover: hover) {
    .scorri.sopra.puo-sx .bordo.sx,
    .scorri.sopra.puo-dx .bordo.dx {
        opacity: 0.55;
    }

    .scorri.va-sx .bordo.sx,
    .scorri.va-dx .bordo.dx {
        opacity: 1;
    }
}

.galleria .indice {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}

.galleria .indice i {
    width: 26px;
    height: 4px;
    border-radius: 2px;
    background: rgb(255 255 255 / 0.2); /* sul blu della sezione */
    transition: background 0.3s;
}

.galleria .indice i.qui {
    background: var(--accento);
}

/* la foto aperta: viene avanti, la pagina dietro si allontana e si scurisce ("profondità") */
.zoom-foto,
.zoom-giocatore {
    position: fixed;
    inset: 0;
    z-index: 100;
}

.zoom-foto .velo,
.zoom-giocatore .velo {
    position: absolute;
    inset: 0;
    background: rgb(2 6 40 / 0.62);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.zoom-foto img {
    position: fixed;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgb(0 0 0 / 0.6);
    object-fit: cover;
    cursor: zoom-out;
}

.zoom-foto .dida {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 18px;
    color: var(--chiaro);
    text-align: center;
}

.zoom-foto .dida b {
    display: block;
    font-family: var(--font-numeri);
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 400;
    line-height: 1.05;
    text-transform: uppercase;
}

.zoom-foto .dida span {
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.8;
}

.zoom-foto .chiudi,
.zoom-giocatore .chiudi {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--accento);
    color: var(--primario);
    font-size: 1.2rem;
    font-weight: 800;
    cursor: pointer;
}

/* sul telefono la galleria prende tutto lo schermo: da bordo a bordo e alta quasi quanto lo schermo */
@media (max-width: 768px) {
    .galleria .scorri {
        margin-inline: calc(-1 * var(--margine));
    }

    .galleria .finestra,
    .galleria .bordo {
        border-radius: 0;
    }

    .mosaico-elastico {
        height: max(480px, calc(100svh - 150px)); /* lo schermo meno la testata e il titolo */
        gap: 4px;
    }

    .mosaico-elastico .casella {
        border-radius: 6px;
    }
}

/* ---------- Alberto, l'assistente: bottone con l'omino e chat ---------- */

.alberto {
    position: fixed;
    right: max(20px, env(safe-area-inset-right, 0px));
    bottom: max(20px, env(safe-area-inset-bottom, 0px));
    z-index: 60;
    font-family: var(--font-testo);
}

.alberto-apri {
    position: relative;
    display: block;
    width: 72px;
    height: 72px;
    padding: 0;
    border: 3px solid var(--accento);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #2a3bd6, var(--primario) 70%);
    box-shadow: 0 10px 24px rgb(2 10 83 / 0.35);
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(.2, .8, .2, 1);
}

.alberto-apri:hover {
    transform: translateY(-3px) scale(1.04);
}

.alberto-apri:focus-visible,
.alberto-chat button:focus-visible,
.alberto-chat input:focus-visible {
    outline: 3px solid var(--accento);
    outline-offset: 2px;
}

/* Alberto: la figura è più alta del cerchio, così i capelli escono sopra il bordo giallo.
   La maschera taglia tutto quello che esce dal cerchio, tranne la parte sopra (i capelli). */
.alberto-figura {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    aspect-ratio: 180 / 216;
    pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) top / 100% 58.4% no-repeat,
                  radial-gradient(closest-side, #000 97%, transparent 100%) bottom / 100% 83.4% no-repeat;
    mask: linear-gradient(#000 0 0) top / 100% 58.4% no-repeat,
          radial-gradient(closest-side, #000 97%, transparent 100%) bottom / 100% 83.4% no-repeat;
    transform-origin: 50% 100%;
    animation: respiro 3.8s ease-in-out infinite;
}

/* il respiro: il petto si alza di un niente (solo transform, lo fa la scheda video) */
@keyframes respiro {
    50% { transform: scale(1.012, 1.018); }
}

.alberto-testa,
.alberto-testa i,
.alberto-corpo {
    position: absolute;
    inset: 0;
}

/* la testa ruota attorno al collo; sito.js cambia solo transform (niente ridisegni della pagina) */
.alberto-testa {
    transform-origin: 50% 80%;
    will-change: transform;
}

/* le 9 pose: si vede quella attiva, che compare con una dissolvenza veloce SOPRA la precedente;
   la precedente sparisce solo dopo, così a metà dissolvenza Alberto non diventa trasparente */
.alberto-testa i {
    background: url('img/alberto-pose.webp') 0 0 / 300% 300% no-repeat;
    opacity: 0;
    transition: opacity 0s 0.14s;
}

.alberto-testa i.attiva {
    z-index: 1;
    opacity: 1;
    transition: opacity 0.14s ease-out;
}

.alberto-testa [data-posa="n"] { background-position: 50% 0; }
.alberto-testa [data-posa="ne"] { background-position: 100% 0; }
.alberto-testa [data-posa="o"] { background-position: 0 50%; }
.alberto-testa [data-posa="c"] { background-position: 50% 50%; }
.alberto-testa [data-posa="e"] { background-position: 100% 50%; }
.alberto-testa [data-posa="so"] { background-position: 0 100%; }
.alberto-testa [data-posa="s"] { background-position: 50% 100%; }
.alberto-testa [data-posa="se"] { background-position: 100% 100%; }

.alberto-corpo {
    background: url('img/alberto-corpo.webp') 0 0 / 100% 100% no-repeat;
}

/* il pollice alzato: il braccio parte giù, ruotato fuori dal cerchio (la maschera lo nasconde);
   quando passi sopra col mouse, o tocchi/clicchi (classe "pollice", messa da sito.js), si alza ruotando
   attorno al gomito con un piccolo rimbalzo, poi oscilla come a dire "ok!" */
.alberto-pollice {
    position: absolute;
    top: 59%;
    left: 71%;
    width: 28%;
    aspect-ratio: 84 / 153;
    background: url('img/alberto-pollice.webp') 0 0 / 100% 100% no-repeat;
    transform: rotate(80deg);
    transform-origin: 70% 100%;
    transition: transform 0.22s cubic-bezier(.4, 0, 1, 1);
}

.alberto-apri.pollice .alberto-pollice {
    transform: none;
    transition: transform 0.38s cubic-bezier(.34, 1.56, .64, 1);
    animation: pollice 0.5s 0.34s ease-in-out;
}

@media (hover: hover) {
    .alberto-apri:hover .alberto-pollice {
        transform: none;
        transition: transform 0.38s cubic-bezier(.34, 1.56, .64, 1);
        animation: pollice 0.5s 0.34s ease-in-out;
    }
}

@keyframes pollice {
    30% { transform: rotate(-12deg); }
    65% { transform: rotate(7deg); }
}

@media (prefers-reduced-motion: reduce) {
    .alberto-figura { animation: none; }
    .alberto-testa i, .alberto-testa i.attiva { transition: none; }
    .alberto-pollice, .alberto-apri .alberto-pollice { transition: none; animation: none !important; }
}

/* il fumetto di benvenuto */
.alberto-fumetto {
    position: absolute;
    right: 0;
    bottom: 96px;
    width: max-content;
    max-width: min(260px, 70vw);
    margin: 0;
    padding: 0.7rem 0.9rem;
    border-radius: 14px 14px 4px 14px;
    background: var(--chiaro);
    box-shadow: 0 10px 24px rgb(2 10 83 / 0.25);
    color: var(--primario);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    animation: compare 0.4s cubic-bezier(.2, .8, .2, 1);
}

@keyframes compare {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
}

/* la chat */
.alberto-chat {
    position: absolute;
    right: 0;
    bottom: 88px;
    display: flex;
    flex-direction: column;
    width: min(380px, calc(100vw - 40px));
    height: min(600px, 75vh);
    overflow: hidden;
    border-radius: 18px;
    background: var(--chiaro);
    box-shadow: 0 24px 60px rgb(2 10 83 / 0.35);
    animation: compare 0.3s cubic-bezier(.2, .8, .2, 1);
}

.alberto-chat[hidden] {
    display: none;
}

.alberto-chat header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    background: var(--primario);
    color: var(--chiaro);
}

.alberto-mini {
    flex: none;
    width: 48px;
    height: auto;
}

.alberto-chat header > span:nth-child(2) {
    flex: 1;
    display: grid;
    line-height: 1.2;
}

.alberto-chat header small {
    opacity: 0.75;
    font-size: 0.75rem;
}

.alberto-chiudi {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.12);
    color: var(--chiaro);
    font-size: 1rem;
    cursor: pointer;
}

.alberto-messaggi {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.alberto-messaggi > p {
    max-width: 85%;
    margin: 0;
    padding: 0.6rem 0.85rem;
    border-radius: 14px;
    font-size: 0.92rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.alberto-messaggi .da-alberto {
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    background: var(--grigio);
    color: var(--primario);
}

.alberto-messaggi .da-te {
    align-self: flex-end;
    border-bottom-right-radius: 4px;
    background: var(--primario);
    color: var(--chiaro);
}

/* i tre puntini mentre Alberto pensa */
.alberto-messaggi .pensa::after {
    content: "• • •";
    letter-spacing: 0.15em;
    animation: pensa 1s ease-in-out infinite;
}

@keyframes pensa {
    50% { opacity: 0.3; }
}

/* le schede dentro la chat: partita, nostra posizione, classifica, documento (le disegna sito.js).
   I colori sono variabili: blu di base, bianche se nello Studio scegli "Bianco" (data-schede sulla chat) */
.scheda {
    --sfondo: var(--primario);
    --scritte: var(--chiaro);
    --evidenzia: var(--accento);
    --tenue: rgb(255 255 255 / 0.12);
    --riga-cercata: rgb(255 255 255 / 0.18);

    display: grid;
    gap: 0.45rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--tenue);
    border-radius: var(--raggio);
    background: var(--sfondo);
    box-shadow: 0 6px 16px rgb(2 10 83 / 0.18);
    color: var(--scritte);
    font-size: 0.85rem;
    animation: compare 0.3s cubic-bezier(.2, .8, .2, 1);
}

.alberto-chat[data-schede="bianco"] .scheda:not(.scheda-posizione) {
    --sfondo: var(--chiaro);
    --scritte: var(--primario);
    --tenue: rgb(2 10 83 / 0.1);
    --riga-cercata: #e3e6ff;
    box-shadow: 0 4px 12px rgb(2 10 83 / 0.06);
}

.scheda .campionato {
    color: var(--evidenzia);
    font-family: var(--font-titoli);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.alberto-chat[data-schede="bianco"] .scheda:not(.scheda-posizione) .campionato {
    color: var(--primario);
}

.scheda small {
    font-size: 0.7rem;
    opacity: 0.7;
}

.scheda a {
    color: inherit;
    font-weight: 600;
}

.scheda-partita .testa {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--tenue);
}

.scheda-partita .quando {
    font-weight: 700;
    text-align: right;
}

.scheda-partita .lato {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 0.55rem;
}

.scheda-partita.senza-loghi .lato {
    grid-template-columns: 1fr auto;
}

.scheda-partita .lato img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.scheda-partita .senza-logo {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--tenue);
}

.scheda-partita .lato[data-noi="true"] .nome {
    font-weight: 800;
}

.scheda-partita .set {
    min-width: 1.6em;
    padding: 0.05rem 0.4rem;
    border-radius: 6px;
    background: var(--tenue);
    font-family: var(--font-numeri);
    font-size: 1rem;
    font-weight: 400;
    text-align: center;
}

.scheda-partita .lato[data-vince="true"] .set {
    background: var(--accento);
    color: var(--primario);
}

.scheda-partita .fondo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.6rem;
    font-size: 0.78rem;
}

.scheda-partita .dove,
.scheda-partita .avviso {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--accento);
    color: var(--primario);
    font-weight: 700;
}

.scheda-partita .avviso {
    background: #fde2e2;
    color: #9b1c1c;
    text-transform: uppercase;
}

.scheda-posizione {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.9rem;
}

.scheda-posizione .numero {
    display: grid;
    justify-items: center;
    line-height: 1;
}

.scheda-posizione .numero b {
    color: var(--accento);
    font-family: var(--font-numeri);
    font-size: 2.6rem;
    font-weight: 400;
}

.scheda-posizione div {
    display: grid;
    gap: 0.1rem;
}

.scheda-posizione strong {
    font-size: 1.05rem;
}

.scheda-classifica table {
    width: 100%;
    border-collapse: collapse;
}

.scheda-classifica td {
    padding: 0.3rem 0.4rem;
    border-bottom: 1px solid var(--tenue);
}

.scheda-classifica td:first-child {
    width: 2.6em;
    font-weight: 700;
}

.scheda-classifica td:last-child {
    font-weight: 800;
    text-align: right;
}

.scheda-classifica tr[data-noi="true"] td {
    background: var(--accento);
    color: var(--primario);
}

.scheda-classifica tr.cercata td {
    background: var(--riga-cercata);
}

.scheda-classifica .salto td {
    padding: 0.05rem;
    opacity: 0.5;
    text-align: center;
}

.scheda-classifica .distanza {
    font-weight: 700;
}

/* i blocchi delle risposte scritte nello Studio: scheda di testo, elenco, contatti, luogo, immagine, bottone */
.scheda-info p {
    white-space: pre-wrap;
}

.scheda-info ul {
    display: grid;
    gap: 0.2rem;
    margin: 0;
    padding-left: 1.1rem;
}

.scheda-immagine {
    padding: 0.4rem;
}

.scheda-immagine img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: calc(var(--raggio) - 4px);
}

.scheda-immagine small {
    padding: 0 0.4rem 0.2rem;
}

.scheda-bottone {
    display: block;
    padding: 0.65rem 1rem;
    border-radius: 999px;
    background: var(--accento);
    color: var(--primario);
    font-size: 0.9rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    animation: compare 0.3s cubic-bezier(.2, .8, .2, 1);
}

/* il documento da stampare: icona, titolo, due bottoni */
.scheda-documento {
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 0.75rem;
}

.scheda-documento .icona {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 42px;
    height: 50px;
    border-radius: 6px;
    background: var(--accento);
    color: var(--primario);
    font-family: var(--font-titoli);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.scheda-documento strong {
    font-size: 0.95rem;
}

.scheda-documento .bottoni {
    grid-column: 1 / -1;
    display: flex;
    gap: 0.4rem;
    margin-top: 0.2rem;
}

.scheda-documento .bottoni a {
    flex: 1;
    padding: 0.45rem 0.6rem;
    border: 1.5px solid var(--accento);
    border-radius: 999px;
    color: var(--scritte);
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.scheda-documento .bottoni a:first-child {
    background: var(--accento);
    color: var(--primario);
}

.alberto-azioni {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.alberto-azioni a,
.alberto-azioni button,
.alberto-suggerimenti button {
    padding: 0.4rem 0.8rem;
    border: 1.5px solid var(--primario);
    border-radius: 999px;
    background: var(--chiaro);
    color: var(--primario);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.alberto-azioni .giallo {
    border-color: var(--accento);
    background: var(--accento);
}

.alberto-suggerimenti {
    display: flex;
    gap: 0.4rem;
    padding: 0 1rem 0.6rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.alberto-suggerimenti button {
    flex: none;
}

.alberto-scrivi {
    display: flex;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    border-top: 1px solid rgb(2 10 83 / 0.1);
}

.alberto-scrivi input {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.9rem;
    border: 1.5px solid rgb(2 10 83 / 0.2);
    border-radius: 999px;
    font: inherit;
    font-size: 16px; /* sotto i 16px l'iPhone fa lo zoom quando scrivi */
}

.alberto-scrivi button {
    flex: none;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: var(--accento);
    color: var(--primario);
    font-size: 1.1rem;
    cursor: pointer;
}

.alberto-nota {
    margin: 0;
    padding: 0 1rem 0.7rem;
    color: var(--testo);
    font-size: 0.7rem;
    opacity: 0.7;
}

@media (max-width: 768px) {
    .alberto-apri {
        width: 60px;
        height: 60px;
    }

    .alberto-fumetto {
        bottom: 82px;
    }

    /* sul telefono la chat sale dal basso e prende quasi tutto lo schermo */
    .alberto-chat {
        position: fixed;
        inset: auto 0 0 0;
        width: 100%;
        height: 82svh;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border-radius: 18px 18px 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .alberto-fumetto,
    .alberto-chat,
    .alberto-messaggi .pensa::after {
        animation: none;
    }
}

/* ---------- Footer ---------- */

.piede {
    padding: 2.5rem var(--margine) 1.25rem;
    background: var(--primario);
    color: var(--chiaro);
    font-size: 0.95rem;
}

.piede a {
    color: inherit;
}

.piede-alto {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: clamp(6px, 1.2vw, 14px) solid var(--chiaro);
}

.motto {
    font-family: var(--font-numeri);
    font-size: clamp(3.5rem, 12vw, 10rem);
    line-height: 0.9;
    text-transform: uppercase;
}

/* il cursore della macchina da scrivere: compare solo quando parte l'animazione */
.motto.scrive::after {
    content: '';
    display: inline-block;
    width: 0.08em;
    height: 0.85em;
    margin-left: 0.06em;
    background: var(--accento);
    animation: lampeggia 1s steps(1) infinite;
}

@keyframes lampeggia {
    50% { opacity: 0; }
}

.social {
    display: flex;
    gap: clamp(0.5rem, 1.5vw, 1.25rem);
    padding: 0;
    list-style: none;
}

.social img {
    display: block;
    width: clamp(36px, 6vw, 80px);
    height: auto;
}

.piede-mezzo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
}

.contatti {
    display: flex;
    flex-direction: column;
    font-style: normal;
}

.contatti a {
    text-decoration: none;
}

.contatti .indirizzo {
    text-decoration: underline;
}

.piede-fondo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    margin-top: 2.5rem;
    font-size: 0.8rem;
}

.piede-fondo .legale,
.piede-fondo a:not(.torna-su) {
    opacity: 0.8;
}

.piede .torna-su {
    margin-left: auto;
    font-size: 0.95rem;
    text-decoration: none;
}

/* ---------- Smartphone (grafica Canva da telefono) ---------- */

@media (max-width: 768px) {
    .testata {
        --spazio: 0.6rem;
    }

    .testata.ridotta {
        --spazio: 0.35rem;
    }

    .blocco {
        padding-block: 1.5rem;
    }

    .blocco h2 {
        margin-bottom: 0.75rem;
        font-size: 1.75rem;
    }

    .categorie {
        gap: 0.25rem;
        margin-bottom: 0.75rem;
    }

    .salva-calendario summary {
        padding: 0.3rem 0.7rem;
        font-size: 0.7rem;
    }

    /* su telefono il bottone del calendario sale sulla riga del titolo PARTITE, a destra */
    .partite {
        position: relative;
    }

    .partite .salva-calendario {
        position: absolute;
        top: 0.2rem;
        right: 0;
    }

    .barra-schede {
        margin-bottom: 0.75rem;
    }

    .categorie button {
        padding: 0.25rem 0.65rem;
        border-width: 1px;
        font-size: 0.7rem;
    }

    .carosello-frecce button {
        width: 2rem;
        height: 2rem;
        font-size: 1.25rem;
    }

    /* Storia: foto e testo sopra, i tre contatori in riga sotto */
    .storia {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .storia .carosello {
        width: 36%;
    }

    .riassunto,
    .leggi-di-piu {
        font-size: 0.85rem;
    }

    .riassunto {
        max-height: calc(1.7em * 8); /* sul telefono 8 righe, poi "Leggi di più" */
    }

    .contatori {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .contatore strong {
        font-size: 2rem;
    }

    .contatore span {
        font-size: 0.7rem;
    }

    /* Squadre e Maglie: su telefono si scorrono col dito, senza frecce */
    .squadre .carosello-frecce,
    .magliette .carosello-frecce {
        display: none;
    }

    /* Squadre: card centrale quasi a tutto schermo, ai lati un pezzo delle vicine */

    .carosello-centro {
        --card: 45cqi;
        --zoom: 1.47;
        --spazio: 0.11;
    }

    .squadre .carosello-centro {
        margin-inline: calc(-1 * var(--margine)); /* fino ai bordi dello schermo, come le partite */
    }

    .carosello-centro :is(.centro + * + *, :has(+ * + .centro)) {
        opacity: 0;
    }

    /* Partite: card uguali al PC, quasi a tutto schermo; ai lati si vede un pezzo della precedente e della successiva */
    .partite .calendario > * {
        flex-basis: 66vw;
    }

    .partite .carosello-frecce {
        display: none;
    }

    .card-partita.prossima {
        box-shadow: inset 0 3px var(--accento);
    }

    /* Classifica: tutte le colonne in una schermata */
    .classifica table {
        font-size: 0.65rem;
    }

    .classifica :is(th, td) {
        padding: 0.4rem;
    }

    .aggiornata {
        font-size: 0.6rem;
    }

    /* Maglie: due per schermata, grandi; la striscia arriva fino ai bordi dello schermo */
    .magliette .carosello-binario {
        gap: 1rem;
        margin-inline: calc(-1 * var(--margine));
        padding-inline: var(--margine);
        scroll-padding-inline: var(--margine);
    }

    .magliette .carosello-binario > * {
        flex-basis: 62vw;
    }

    .giro img {
        padding: 0.15rem;
    }

    .card-maglia h3 {
        margin-top: 0.75rem;
        font-size: 1.35rem;
    }

    .card-maglia .campionato {
        font-size: 0.95rem;
    }

    .card-maglia .stagione {
        font-size: 0.8rem;
    }

    .suggerimento-retro {
        margin-top: 0.75rem;
        font-size: 0.65rem;
    }

    /* Sponsor: loghi un po' più piccoli che su PC */
    .nastro li {
        padding-inline: 1.25rem;
    }

    .nastro img {
        height: 48px;
    }

    .sponsor .nastro + .nastro {
        margin-top: 1rem;
    }

    /* Footer: contatti a sinistra e firma a destra, sulla stessa riga */
    .piede {
        padding-top: 1.5rem;
    }

    .piede-alto {
        border-bottom-width: 5px;
    }

    .piede-mezzo {
        flex-wrap: nowrap;
        align-items: flex-start;
        font-size: 0.6rem;
    }

    .piede-fondo {
        margin-top: 1.5rem;
        font-size: 0.55rem;
    }

    .piede .torna-su {
        font-size: 0.7rem;
    }
}


/* ---------- Testo nascosto: lo leggono Google e i lettori di schermo, ma non si vede ---------- */

.solo-lettori {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- Pagine Privacy e Cookie: testo semplice al centro, comodo da leggere ---------- */

.pagina-legale {
    padding: 2.5rem var(--margine) 3.5rem;
}

.testo-legale {
    max-width: 46rem;
    margin-inline: auto;
    line-height: 1.7;
}

.testo-legale h1 {
    margin-bottom: 0.5rem;
    color: var(--primario);
    font-family: var(--font-titoli);
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.05;
    text-transform: uppercase;
}

.testo-legale h2 {
    margin: 2rem 0 0.5rem;
    color: var(--primario);
    font-family: var(--font-titoli);
    font-size: 1.4rem;
}

.testo-legale h3 {
    margin: 1.25rem 0 0.25rem;
    color: var(--secondario);
    font-size: 1.05rem;
}

.testo-legale p,
.testo-legale ul {
    margin-bottom: 0.75rem;
}

.testo-legale li {
    margin-bottom: 0.35rem;
}

.testo-legale a {
    color: var(--secondario);
}

.testo-legale .aggiornata {
    color: #6b7280;
    font-size: 0.85rem;
    text-align: left; /* la classe "aggiornata" della Classifica la manda a destra: qui no */
}

.testo-legale table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.testo-legale th,
.testo-legale td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #d9dce8;
    text-align: left;
    vertical-align: top;
}

.testo-legale th {
    background: var(--primario);
    color: var(--chiaro);
}