/* CoriDaStadio — sito pubblico su FRAPOFW.
   Palette derivata dal wordmark ufficiale (verde erba + nero/bianco), non
   dal sito legacy (sfondi fotografici sgranati, giudicati troppo datati).
   Tre stati di tema: chiaro di default, scuro via prefers-color-scheme,
   scelta esplicita dell'utente (persistita) che vince su entrambi.
   Nessun font/CDN esterno: stessa scelta gia' fatta per FTA. */

:root {
  --cds-verde: #0e8a3e;
  --cds-verde-scuro: #0b6e32;
  --cds-verde-chiaro: #e4f5ea;
  --cds-fondo: #f4f6f5;
  --cds-superficie: #ffffff;
  --cds-barra-fondo: #ffffff;
  --cds-barra-testo: #14201a;
  --cds-barra-bordo: rgba(20, 32, 26, .1);
  --cds-testo: #14201a;
  --cds-attenuato: #55655c;
  --cds-bordo: #dfe6e1;
  --cds-ombra: rgba(20, 32, 26, .08);
  --cds-raggio: 16px;
  --cds-coro-c1-fallback: #9fb0a8;
  --cds-coro-c2-fallback: #9fb0a8;
  --cds-stella: #cbd3ce;
  --cds-stella-piena: #f4b400;
  /* Sfumatura di sfondo della home (CDS-P0-011: diventera' scelta
     nella sezione Impostazioni insieme agli altri temi CSS futuri —
     per ora e' fissa, un valore per tema come gli altri token qui
     sopra). */
  --cds-home-sfumatura-inizio: rgba(255, 255, 255, .8);
  --cds-home-sfumatura-fine: rgba(139, 156, 139, .5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cds-verde: #22c55e;
    --cds-verde-scuro: #16a34a;
    --cds-verde-chiaro: #103821;
    --cds-fondo: #0b0f0d;
    --cds-superficie: #131a16;
    --cds-barra-fondo: #0b0f0d;
    --cds-barra-testo: #eef2ef;
    --cds-barra-bordo: rgba(255, 255, 255, .08);
    --cds-testo: #eef2ef;
    --cds-attenuato: #9aa79f;
    --cds-bordo: #223129;
    --cds-ombra: rgba(0, 0, 0, .35);
    --cds-coro-c1-fallback: #3a4a42;
    --cds-coro-c2-fallback: #3a4a42;
    --cds-stella: #3a463d;
    --cds-home-sfumatura-inizio: #000000;
    --cds-home-sfumatura-fine: rgba(20, 70, 45, .3);
  }
}

:root[data-theme="dark"] {
  --cds-verde: #22c55e;
  --cds-verde-scuro: #16a34a;
  --cds-verde-chiaro: #103821;
  --cds-fondo: #0b0f0d;
  --cds-superficie: #131a16;
  --cds-barra-fondo: #0b0f0d;
  --cds-barra-testo: #eef2ef;
  --cds-barra-bordo: rgba(255, 255, 255, .08);
  --cds-testo: #eef2ef;
  --cds-attenuato: #9aa79f;
  --cds-bordo: #223129;
  --cds-ombra: rgba(0, 0, 0, .35);
  --cds-coro-c1-fallback: #3a4a42;
  --cds-coro-c2-fallback: #3a4a42;
  --cds-stella: #3a463d;
  --cds-home-sfumatura-inizio: #000000;
  --cds-home-sfumatura-fine: rgba(20, 70, 45, .3);
}

* { box-sizing: border-box; }

/* Font per il testo dei cori (non per l'interfaccia): forniti dal
   committente, incorporati nel progetto (nessun CDN esterno, stessa
   scelta gia' fatta per il resto del sito). "Finger Paint" e' il
   default (vedi .cds-coro-testo sotto); "Ultras Liberi" e il font di
   sistema restano scelte alternative in /impostazioni (CDS-P0-011). */
@font-face {
  font-family: "Finger Paint";
  src: url("/project/assets/fonts/finger-paint.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ultras Liberi";
  src: url("/project/assets/fonts/ultrasliberi.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body.cds-public {
  margin: 0;
  min-height: 100svh;
  background: var(--cds-fondo);
  color: var(--cds-testo);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* Rete di sicurezza: la pagina deve scorrere solo in verticale (bug
     reale trovato dal committente su iPhone, causato da un elemento
     dimensionato con 100vw — vedi .cds-hero-marchio). Se in futuro un
     altro elemento sfuggisse largo quanto il viewport, questa riga lo
     tronca invece di lasciar scorrere l'intera pagina lateralmente. */
  overflow-x: hidden;
}

/* Sfondo a sfumatura, solo in home (project/routers/public/home.php
   passa bodyClass=cds-home-campo): niente piu' un pattern grafico (il
   campo da calcio in SVG e' stato provato e scartato, non piaceva) —
   un semplice gradiente verticale ("a 90 gradi" nel senso di
   orientamento verticale voluto dal committente, non l'angolo CSS:
   qui e' scritto 180deg, dall'alto verso il basso), fisso rispetto
   alla viewport (background-attachment: fixed, non scorre con la
   pagina) cosi' resta "fermo" mentre si scrolla. I due colori
   (--cds-home-sfumatura-inizio/-fine, uno per tema, vedi i blocchi
   :root sopra) sono gia' isolati in variabili proprio perche' questa
   sfumatura e' candidata a diventare scelta dell'utente nella sezione
   Impostazioni (CDS-P0-011, "temi CSS futuri"): quando succedera',
   basta far scrivere quelle due variabili da li' invece di aggiungere
   un meccanismo nuovo. */
body.cds-home-campo {
  background-image: linear-gradient(180deg, var(--cds-home-sfumatura-inizio), var(--cds-home-sfumatura-fine));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
}

a { color: inherit; }
img { max-width: 100%; }

/* ---- intestazione ----
   Il marchio sta centrato quando c'e' il burger (mobile, niente da
   mettergli accanto) e a sinistra con le voci di menu a destra quando
   non c'e' (desktop, richiesta esplicita 2026-09-13) — due blocchi soli
   (`.cds-marchio` e `.cds-barra-destra`, quest'ultimo con nav+switch
   tema insieme, vedi header.php), mai tre elementi separati: con
   `justify-content` su due blocchi il centraggio (mobile) e lo
   space-between (desktop) vengono naturali; su tre elementi il centrale
   non finirebbe mai davvero ai lati. Su mobile `.cds-barra-destra' e'
   vuoto a schermo (nav e switch nascosti, si spostano nel drawer) e
   pesa zero nel calcolo del centraggio, visto che non ha
   padding/bordo/contenuto visibile. */
.cds-barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  gap: .75rem; padding: .125rem 1.25rem;
  background: var(--cds-barra-fondo);
  border-bottom: 1px solid var(--cds-barra-bordo);
}
.cds-barra-destra { display: flex; align-items: center; gap: 1.375rem; }
@media (min-width: 721px) {
  .cds-barra { justify-content: space-between; }
}
.cds-marchio { display: flex; align-items: center; text-decoration: none; }
/* Piu' grande possibile (era 26px, poi 36px) a parita' di altezza
   della barra (richiesta esplicita, 2026-09-13): il margine verticale
   qui sopra e' stato ridotto in proporzione (da .3125rem a .125rem)
   cosi' il totale barra (padding + logo + bordo) resta lo stesso di
   prima, il logo cresce a spese del margine, non della barra. */
.cds-marchio img { height: 42px; width: auto; }
.cds-marchio-light { display: block; }
.cds-marchio-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cds-marchio-light { display: none; }
  :root:not([data-theme="light"]) .cds-marchio-dark { display: block; }
}
:root[data-theme="dark"] .cds-marchio-light { display: none; }
:root[data-theme="dark"] .cds-marchio-dark { display: block; }

.cds-tema-switch {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cds-barra-testo) 25%, transparent); background: transparent;
  color: var(--cds-barra-testo); cursor: pointer; padding: 0;
}
.cds-tema-switch:hover { border-color: color-mix(in srgb, var(--cds-barra-testo) 55%, transparent); }
.cds-tema-switch svg { width: 1.125rem; height: 1.125rem; }
.cds-icona-auto { font-size: .8125rem; font-weight: 800; line-height: 1; }
/* Tre stati selezionabili a ciclo (richiesta esplicita, 2026-09-13):
   chiaro/scuro/automatico — l'icona mostrata riflette la scelta
   ESPLICITA dell'utente (data-stato sul bottone stesso, gestito da
   tema.js), non il tema effettivamente reso a schermo: in "auto" resta
   sempre la "A" anche se in quel momento il dispositivo mostra scuro.
   Prima si leggeva lo stato dal tema RESO (:root[data-theme]), qui non
   basta piu' perche' "auto" non forza nessun data-theme. */
.cds-tema-switch .cds-icona-luna,
.cds-tema-switch .cds-icona-auto { display: none; }
.cds-tema-switch[data-stato="dark"] .cds-icona-sole,
.cds-tema-switch[data-stato="auto"] .cds-icona-sole { display: none; }
.cds-tema-switch[data-stato="dark"] .cds-icona-luna { display: block; }
.cds-tema-switch[data-stato="auto"] .cds-icona-auto { display: block; }
/* La barra in alto perde nav e switch tema su mobile (si spostano nel
   drawer, vedi .cds-menu-piede sotto): l'intero contenitore va a
   display:none, non solo i suoi due figli, altrimenti un `<div>` vuoto
   ma ancora "in flow" continuerebbe a contare per il `gap` del flex
   padre (.cds-barra) e sbilancerebbe il centraggio del marchio di uno
   `gap` intero — bug reale trovato subito dopo aver introdotto questo
   contenitore. */
@media (max-width: 720px) {
  .cds-barra-destra { display: none; }
}

/* ---- menu di navigazione (CDS-P0-009): nav orizzontale su desktop,
   burger + drawer a scomparsa su mobile. Stesse voci in entrambe (vedi
   project/services/MenuVoci.php e project/views/comp/header.php), cosi'
   una voce futura appare automaticamente ovunque. ---- */
.cds-nav-desktop { display: flex; align-items: center; gap: 1.375rem; }
.cds-nav-desktop a {
  color: var(--cds-barra-testo); text-decoration: none; font-weight: 600; font-size: .875rem;
  position: relative; padding: .25rem 0;
}
.cds-nav-desktop a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--cds-verde); transition: right .2s ease;
}
.cds-nav-desktop a:hover::after { right: 0; }

/* Su mobile il burger non e' piu' in barra (richiesta esplicita,
   2026-09-13): e' un pulsante tondo flottante in basso a destra, stesso
   trattamento "vetro" del pulsante "Scrivi il tuo Coro" li' accanto
   (CDS-P0-015, .cds-flottante-invia piu' sotto) — stesso bottom via
   env(safe-area-inset-bottom), destra invece di centrato cosi' i due
   pulsanti non si sovrappongono mai (uno resta sempre centrato,
   l'altro sempre a destra, indipendentemente dalla larghezza schermo).
   z-index sopra al drawer stesso (30): il drawer copre esattamente
   l'angolo in basso a destra dove sta il burger (right:0; bottom:0),
   altrimenti aperto lo coprirebbe rendendolo impossibile da richiudere. */
.cds-burger {
  display: none; position: fixed;
  right: calc(1.25rem + env(safe-area-inset-right, 0px));
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  z-index: 31;
  width: 3.25rem; height: 3.25rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cds-testo) 12%, transparent);
  background: color-mix(in srgb, var(--cds-superficie) 55%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.cds-burger:hover { border-color: color-mix(in srgb, var(--cds-testo) 30%, transparent); }
.cds-burger-icona { position: relative; width: 18px; height: 14px; display: inline-block; }
.cds-burger-linea {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: var(--cds-barra-testo);
  transition: transform .3s cubic-bezier(.65, 0, .35, 1), top .3s cubic-bezier(.65, 0, .35, 1), opacity .2s ease;
}
.cds-burger-linea:nth-child(1) { top: 0; }
.cds-burger-linea:nth-child(2) { top: 6px; }
.cds-burger-linea:nth-child(3) { top: 12px; }
.cds-burger--aperto .cds-burger-linea:nth-child(1) { top: 6px; transform: rotate(45deg); }
.cds-burger--aperto .cds-burger-linea:nth-child(2) { opacity: 0; }
.cds-burger--aperto .cds-burger-linea:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.cds-menu-overlay {
  position: fixed; inset: 0; z-index: 29;
  background: rgba(0, 0, 0, .45);
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
}
.cds-menu-overlay--visibile { opacity: 1; pointer-events: auto; }

/* Voci allineate in basso (richiesta esplicita, 2026-09-13: il burger
   che le apre sta ora in basso a destra, non piu' in alto) invece che
   in alto: padding-top generoso non serve piu' (non c'e' una barra da
   scavalcare li'), padding-bottom tiene conto del pulsante burger
   stesso oltre alla safe area, cosi' l'ultima voce/il piede non ci
   finiscono sotto. */
.cds-menu-mobile {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 30;
  width: min(78vw, 320px);
  background: var(--cds-superficie);
  display: flex; flex-direction: column; justify-content: flex-end; gap: .125rem;
  padding: 2rem 1.5rem calc(2rem + 3.25rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(100%);
  transition: transform .34s cubic-bezier(.16, 1, .3, 1), box-shadow .34s ease;
}
/* Il box-shadow (offset -12px, blur 32px) si estende ben oltre il
   bordo sinistro del drawer: chiuso, il drawer e' spostato appena
   fuori dal bordo destro (translateX(100%)), ma l'ombra sfumata
   restava comunque visibile come una striscia sul lato destro della
   pagina — bug reale segnalato dal committente. Applicata SOLO da
   aperto, non sulla regola base. */
.cds-menu-mobile--visibile { transform: translateX(0); box-shadow: -12px 0 32px rgba(0, 0, 0, .22); }
.cds-menu-mobile a {
  color: var(--cds-testo); text-decoration: none; font-weight: 800; font-size: 1.1875rem;
  padding: .8125rem 0; border-bottom: 1px solid var(--cds-bordo);
  opacity: 0; transform: translateX(14px);
  transition: opacity .32s ease, transform .32s ease;
}
.cds-menu-mobile--visibile a { opacity: 1; transform: translateX(0); }
.cds-menu-mobile--visibile a:nth-child(1) { transition-delay: .08s; }
.cds-menu-mobile--visibile a:nth-child(2) { transition-delay: .14s; }
.cds-menu-mobile--visibile a:nth-child(3) { transition-delay: .2s; }
.cds-menu-mobile--visibile a:nth-child(4) { transition-delay: .26s; }
.cds-menu-mobile--visibile a:nth-child(5) { transition-delay: .32s; }
/* Switch tema, seconda istanza (la prima e' in barra, nascosta su
   mobile piu' sotto): a destra in fondo al drawer, sotto l'ultima
   voce, con un filo di separazione dal resto del menu. */
.cds-menu-piede {
  display: flex; justify-content: flex-end;
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--cds-bordo);
}
body.cds-menu-aperto { overflow: hidden; }

@media (max-width: 720px) {
  .cds-burger { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  .cds-menu-mobile, .cds-menu-mobile a, .cds-menu-overlay, .cds-burger-linea, .cds-nav-desktop a::after {
    transition: none !important;
  }
}

/* ---- hero ----/* ---- hero ----
   Foto dello stadio gremito (bandiere, tifo, luci di notte): stesso ruolo
   dello sfondo fotografico che il legacy metteva in testa alla home
   (tifoseria/includes/testata.asp, images/new/testata.jpg), qui in qualita'
   piu' alta. Resta scuro con testo chiaro a prescindere dal tema del sito:
   e' una fotografia, non una superficie di lettura che deve adattarsi. */
.cds-hero {
  background:
    linear-gradient(180deg, rgba(8, 12, 10, .55) 0%, rgba(8, 12, 10, .82) 72%, rgba(8, 12, 10, .95) 100%),
    url('/project/assets/images/hero-tifo.webp') center 38% / cover no-repeat,
    #0b0f0d;
  color: #f4f6f5;
  padding: 3.5rem 1.25rem 3.75rem;
  text-align: center;
}
.cds-hero-marchio { margin: 0 0 1rem; display: flex; justify-content: center; }
.cds-hero-marchio img { height: clamp(3.5rem, 11vw, 6rem); width: auto; }

/* Titlebar assente finche' il wordmark dell'hero e' in vista (richiesta
   esplicita, 2026-09-13): solo in home (project/routers/public/home.php
   passa sempre bodyClass=cds-home-campo, MAI su altre pagine, vedi
   sopra) — "fixed" invece di "sticky" apposta, cosi' da fuori flusso non
   riserva mai spazio in pagina: nascosta lascia il wordmark dell'hero
   libero di occupare il pieno spazio in alto, invece di uno spazio
   sempre riservato ma vuoto. project/assets/js/titlebar.js aggiunge
   .cds-barra--visibile via IntersectionObserver quando il wordmark
   dell'hero (.cds-hero-marchio) e' a ~4px dallo scomparire in alto, e
   la toglie di nuovo scrollando su.
   NESSUNA transizione (bug reale, 2026-09-14, screenshot da iPhone/
   Safari): la pillola "I migliori/Recenti" si aggancia ISTANTANEA-
   mente (vedi .cds-ordine-pill-riga--agganciata piu' sotto), ma questa
   barra impiegava .28s a comparire — nella finestra in mezzo la
   pillola, gia' del tutto opaca, restava sovrapposta a una barra
   ancora semi-trasparente, lasciando intravedere l'hero sotto.
   Riprodotto e verificato frame per frame (Playwright, scroll di 1px
   alla volta): a meta' della dissolvenza la pillola risultava gia'
   agganciata. Tolta la transizione, la comparsa e' istantanea come la
   pillola stessa — stessa filosofia gia' scelta per lei lo stesso
   giorno. */
body.cds-home-campo .cds-barra {
  position: fixed; left: 0; right: 0;
  opacity: 0; pointer-events: none;
}
body.cds-home-campo .cds-barra--visibile { opacity: 1; pointer-events: auto; }
/* Senza burger il menu orizzontale e' gia' la titlebar: resta visibile dal
   primo paint e sticky nel flusso. Solo il layout mobile usa la comparsa
   overlay pilotata dallo scroll. La stessa soglia 721px governa nav e burger. */
@media (min-width: 721px) {
  body.cds-home-campo .cds-barra {
    position: sticky; left: auto; right: auto;
    opacity: 1; pointer-events: auto;
  }
}
.cds-hero-intro {
  margin: 0 auto; max-width: 32rem; color: rgba(244, 246, 245, .85);
  font-size: 1.1875rem; font-weight: 600;
}
.cds-bottone {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.9rem; padding: 0 1.375rem; border-radius: 999px;
  font-weight: 700; font-size: .9375rem; text-decoration: none;
  border: 1.5px solid transparent; cursor: pointer;
}
.cds-bottone--secondario { background: transparent; color: inherit; border-color: rgba(244, 246, 245, .3); }
.cds-bottone--secondario:hover { border-color: rgba(244, 246, 245, .6); }

/* ---- contenuto ---- */
.cds-sezione { width: min(880px, calc(100% - 2.5rem)); margin: 2.5rem auto; }
.cds-bottone--primario { background: var(--cds-verde); color: #fff; }
.cds-bottone--primario:hover { background: var(--cds-verde-scuro); }
.cds-bottone--chiaro { background: var(--cds-superficie); color: var(--cds-testo); border-color: var(--cds-bordo); }
.cds-bottone--chiaro:hover { border-color: var(--cds-verde); color: var(--cds-verde-scuro); }
.cds-errore { min-height: 58vh; display: flex; align-items: center; justify-content: center; }
.cds-errore-card {
  width: min(100%, 42rem); padding: clamp(1.5rem, 6vw, 2.5rem);
  text-align: center; background: var(--cds-superficie);
  border: 1px solid var(--cds-bordo); border-radius: 24px;
  box-shadow: 0 16px 42px color-mix(in srgb, var(--cds-ombra) 70%, transparent);
}
.cds-errore-codice {
  margin: .25rem 0 0; font-size: clamp(4.5rem, 20vw, 8rem);
  line-height: .95; font-weight: 950; letter-spacing: -.08em; color: var(--cds-verde);
}
.cds-errore-titolo { margin: .625rem 0 0; font-size: clamp(2rem, 7vw, 3.25rem); line-height: 1; font-weight: 900; }
.cds-errore-lead { margin: 1rem auto 0; max-width: 32rem; color: var(--cds-testo); font-size: 1.125rem; line-height: 1.5; }
.cds-errore-messaggio { margin: 1rem auto 0; max-width: 34rem; color: var(--cds-attenuato); line-height: 1.55; }
.cds-errore-messaggio--html p { margin: .5rem 0; }
.cds-errore-url {
  display: grid; gap: .25rem; margin: 1rem auto 0; max-width: 100%;
  color: var(--cds-attenuato); font-size: .8125rem;
}
.cds-errore-url code {
  display: block; max-width: 100%; padding: .5rem .75rem;
  overflow-wrap: anywhere; color: var(--cds-testo);
  background: color-mix(in srgb, var(--cds-bordo) 35%, transparent);
  border-radius: 12px;
}
.cds-errore-dettagli {
  display: grid; gap: .5rem; margin: 1.25rem auto 0; max-width: 34rem;
  text-align: left; color: var(--cds-attenuato); font-size: .875rem;
}
.cds-errore-dettagli div {
  display: grid; grid-template-columns: minmax(6rem, .35fr) minmax(0, 1fr);
  gap: .75rem; padding: .625rem .75rem;
  background: color-mix(in srgb, var(--cds-bordo) 30%, transparent);
  border-radius: 12px;
}
.cds-errore-dettagli dt { font-weight: 800; color: var(--cds-testo); }
.cds-errore-dettagli dd { margin: 0; overflow-wrap: anywhere; }
.cds-errore-azioni {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem;
  margin-top: 1.5rem;
}
/* #feed segue sempre un hero (home o squadra): niente margine sopra,
   la riga delle pill e' gia' pensata per stare a meta' della baseline
   dell'hero (vedi .cds-ordine-pill-riga). */
#feed { margin-top: 0; }

/* La pill "in sovraimpressione" sull'hero: margine negativo (non
   transform) cosi' il contenuto sotto si riavvicina di conseguenza,
   senza lasciare uno spazio vuoto dove la pill "sarebbe dovuta stare".
   Il margine negativo resta sul SEGNAPOSTO esterno (CDS-P0-025), la cui
   altezza e' fissata via JS (sottotitlebar.js) alla dimensione naturale,
   cosi' resta invariata anche quando .cds-ordine-pill-riga esce dal flusso
   per agganciarsi (position:fixed). Lo z-index iniziale sta invece sulla
   riga: metterlo sul supporto creava uno stacking context a livello 2 che
   imprigionava anche lo z-index 21 della riga fixed sotto titlebar e
   sottotitlebar, coprendone esattamente la meta' superiore. */
.cds-ordine-pill-supporto {
  margin-top: -1.2rem; position: relative;
}
.cds-ordine-pill-riga {
  position: relative; z-index: 2;
  display: flex; justify-content: center;
}
.cds-ordine-pill {
  display: inline-flex; gap: .25rem; padding: .25rem;
  background: var(--cds-superficie); border: 1px solid var(--cds-bordo); border-radius: 999px;
  box-shadow: 0 2px 8px var(--cds-ombra);
}
.cds-ordine-pill a {
  padding: .4375rem 1.125rem; border-radius: 999px; font-weight: 700; font-size: .875rem;
  text-decoration: none; color: var(--cds-attenuato);
}
.cds-ordine-pill a.attiva { background: var(--cds-verde); color: #fff; }
/* Aggancio alla sottotitlebar/titlebar (richiesta esplicita,
   2026-09-13, poi semplificata lo stesso giorno: la prima versione
   animava il transform con una transizione, ma il risultato era
   scattoso/poco fluido — tolta di proposito, ora e' uno scatto
   istantaneo). --cds-pill-y (impostata da
   project/assets/js/sottotitlebar.js) e' la Y del bordo a cui
   agganciarsi (sottotitlebar quando c'e', altrimenti la titlebar
   stessa in home): "left:50%" + "translate(-50%,-50%)" centra la riga
   su quel punto A PRESCINDERE dalla sua larghezza (niente da misurare
   in JS), poi "scale(.75)" la rimpicciolisce mantenendo il centro
   fermo li' — meta' sopra e meta' sotto il bordo, lo stesso trucco
   gia' usato in feed.php per il bordo dell'hero. */
.cds-ordine-pill-riga--agganciata {
  position: fixed; left: 50%; top: var(--cds-pill-y, 50%);
  /* width:max-content, non lasciata a shrink-to-fit (il default per un
     elemento fixed senza width esplicita): shrink-to-fit su un
     contenitore flex qui sottostimava la larghezza necessaria e "I
     migliori"/"Recenti" andavano a capo dentro la pillola — bug reale
     visto nello screenshot di verifica. */
  width: max-content;
  /* height:auto esplicito, non lasciato implicito (bug reale su Safari
     iOS, verificato dal committente su iPhone): un vecchio
     `height:100%` sulla riga di base — pensato per riempire
     .cds-ordine-pill-supporto in flusso normale — veniva risolto da
     Safari rispetto alla viewport intera una volta che la riga diventa
     position:fixed (il containing block per un elemento fixed E' la
     viewport), deformando la pillola in una barra alta quanto lo
     schermo. Chromium desktop non mostrava il problema (da qui non
     era emerso prima nei test), da cellulare reale su Safari si'.
     Rimosso `height:100%` dalla riga di base ed esplicitato qui
     `auto` come rete di sicurezza, cosi' l'intrinseco del contenuto
     (il pulsante .cds-ordine-pill) e' sempre l'unica fonte
     dell'altezza, mai la viewport. */
  height: auto;
  transform: translate(-50%, -50%) scale(.75);
  margin: 0; z-index: 21;
}

.cds-conteggio { text-align: center; color: var(--cds-attenuato); margin: .5rem 0 0; font-size: .9375rem; }

/* ---- selettore "vai ad un'altra squadra" ---- */
.cds-selettore-squadre { margin-top: .625rem; display: flex; flex-direction: column; align-items: center; }
.cds-selettore-squadre-campo { position: relative; width: min(320px, 100%); }
.cds-selettore-squadre-campo::after {
  content: ""; position: absolute; right: 1.125rem; top: 50%; width: .5rem; height: .5rem;
  border-right: 2px solid var(--cds-verde-scuro); border-bottom: 2px solid var(--cds-verde-scuro);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
:root[data-theme="dark"] .cds-selettore-squadre-campo::after { border-color: var(--cds-verde); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cds-selettore-squadre-campo::after { border-color: var(--cds-verde); }
}
.cds-selettore-squadre select {
  width: 100%; appearance: none; -webkit-appearance: none;
  padding: .75rem 2.5rem .75rem 1.25rem; border-radius: 999px;
  border: 1.5px solid var(--cds-bordo); background: var(--cds-superficie); color: var(--cds-testo);
  font-size: .9375rem; font-weight: 600; font-family: inherit; cursor: pointer;
  box-shadow: 0 1px 2px var(--cds-ombra);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.cds-selettore-squadre select:hover { border-color: var(--cds-verde); }
.cds-selettore-squadre select:focus-visible {
  outline: none; border-color: var(--cds-verde);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cds-verde) 30%, transparent);
}

.cds-avviso {
  width: min(880px, calc(100% - 2.5rem)); margin: 1.5rem auto 0;
  padding: .875rem 1.125rem; border-radius: 12px;
  background: #fff6ea; border: 1px solid #f4dcb0; color: #7a5a12; font-size: .9375rem;
}

/* ---- feed dei cori ---- */
.cds-feed { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.25rem; }
.cds-coro {
  display: flex; gap: 1rem; padding: 1.125rem;
  /* Colori sociali reali della squadra (--cds-coro-c1/-c2, impostati inline
     da coro-card.php a partire dai pattern del sito legacy — vedi
     scripts/backfill_squadre_colori.php), sfumati con color-mix verso la
     superficie normale: un richiamo moderno alla stessa idea del legacy
     (che tappezzava la card con lo stesso pattern a piastrella ripetuta),
     ma leggero invece di invasivo. Il testo resta sempre sul token
     --cds-testo, mai sulla tinta: la leggibilita' non dipende dal colore
     sociale, per quanto acceso (es. il rosso Milan o il nerazzurro Inter). */
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--cds-coro-c1, var(--cds-coro-c1-fallback)) 26%, var(--cds-superficie)) 0%,
    color-mix(in srgb, var(--cds-coro-c2, var(--cds-coro-c2-fallback)) 18%, var(--cds-superficie)) 42%,
    var(--cds-superficie) 78%);
  border: 1px solid var(--cds-bordo);
  border-radius: var(--cds-raggio); box-shadow: 0 1px 2px var(--cds-ombra);
}
.cds-coro-loghi {
  flex: 0 0 auto; display: flex; align-items: center; gap: .375rem;
  width: 4.25rem; flex-direction: column; text-align: center;
}
/* Disco bianco traslucido dietro il logo: stemmi con tratti scuri su
   sfondo trasparente (es. Juventus) restano leggibili a prescindere dai
   loro colori e dal tema, senza diventare un cerchio bianco pieno che
   stona sulle sfumature colorate della card (vedi anche
   .cds-vs-hero-logo-sfondo e .cds-coro-vs-card-logo-sfondo). */
.cds-coro-logo {
  display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: rgba(255, 255, 255, .6);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.cds-coro-logo img { width: 80%; height: 80%; object-fit: contain; }
/* Sbarra rossa a mano libera sul SECONDO stemma (avversaria, "contro cui
   si canta"): l'hero delle pagine /migliori|recenti/contro/{Squadra}
   mantiene invece la X (CDS-P0-024, vedi .cds-squadra-hero-segno).
   La sbarra e' dimensionata per coprire ESATTAMENTE la chip rotonda bianca
   opaca dietro il logo (inset: 0, stesso cerchio di 2.75rem di
   .cds-coro-logo).
   "isolation: isolate" confina il mix-blend-mode alla sola chip invece di
   mischiarsi con la sfumatura colorata di tutta la card dietro. Lo spessore
   33.75 dell'asset e' il 75% del tratto 45 della precedente X. */
.cds-coro-logo--avversaria { position: relative; isolation: isolate; }
.cds-coro-logo-segno {
  position: absolute; inset: 0;
  background-image: url("/project/assets/images/segno-contro-sbarra.svg");
  background-repeat: no-repeat; background-position: center; background-size: contain;
  mix-blend-mode: multiply; pointer-events: none;
}
:root[data-theme="dark"] .cds-coro-logo-segno { mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cds-coro-logo-segno { mix-blend-mode: screen; }
}
.cds-coro-logo--assente {
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--cds-verde-chiaro); color: var(--cds-verde-scuro);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1rem;
}
/* Badge "VS" elettrico/combattivo (stile schermata di sfida picchiaduro):
   condiviso tra la card (piccolo, cliccabile verso la vista testa a
   testa) e l'hero di /squadra/{slug1}/vs/{slug2} (grande, CDS-P0-010). */
.cds-badge-vs {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900; font-style: italic; text-transform: uppercase;
  color: #fff; text-decoration: none; white-space: nowrap; line-height: 1;
  background: linear-gradient(135deg, #4ade80 0%, var(--cds-verde) 45%, #0b6e32 100%);
  border-radius: .25rem; transform: skewX(-10deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  transition: filter .12s ease, transform .12s ease;
}
a.cds-badge-vs:hover { filter: brightness(1.12); transform: skewX(-10deg) scale(1.06); }
.cds-badge-vs--piccolo { font-size: .5625rem; padding: .0625rem .3125rem; letter-spacing: .01em; }
.cds-badge-vs--menu { font-size: 1rem; padding: .35rem .8rem; border-radius: .4rem; letter-spacing: .02em; }
.cds-nav-desktop a.cds-nav-versus-link::after { display: none; }
.cds-menu-mobile a.cds-nav-versus-link { padding-block: .65rem; }

.cds-badge-vs--grande {
  font-size: clamp(1.75rem, 8vw, 3.25rem); padding: .25rem 1.25rem; border-radius: .5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .45);
}
/* Eyebrow "CORI CONTRO" nell'hero di /migliori|recenti/contro/{Squadra}
   (CDS-P0-007): deve risaltare come il resto del linguaggio visivo
   "contro" del sito, non restare una didascalia piatta — via di mezzo
   tra --piccolo (card) e --grande (hero VS a due squadre). */
.cds-badge-vs--eyebrow {
  font-size: clamp(1rem, 4.5vw, 1.75rem); padding: .1875rem .875rem; border-radius: .375rem;
}
.cds-coro-corpo { flex: 1 1 auto; min-width: 0; }
.cds-coro-intestazione {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  margin-bottom: .375rem; flex-wrap: wrap;
}
.cds-coro-squadra {
  font-weight: 800; text-decoration: none; color: var(--cds-verde-scuro);
  text-transform: uppercase; letter-spacing: .02em; font-size: 1.0625rem;
}
:root[data-theme="dark"] .cds-coro-squadra { color: var(--cds-verde); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cds-coro-squadra { color: var(--cds-verde); }
}
.cds-coro-squadra--nessuna { color: var(--cds-attenuato); font-weight: 700; text-transform: none; font-size: 1rem; }
.cds-coro-data-blocco { display: flex; flex-direction: column; align-items: flex-end; gap: .0625rem; text-align: right; }
.cds-coro-data, .cds-coro-numero { font-size: .75rem; color: var(--cds-attenuato); white-space: nowrap; }
.cds-coro-numero { text-decoration: none; }
.cds-coro-numero:hover { text-decoration: underline; }
.cds-coro-testo {
  white-space: pre-line; overflow-wrap: anywhere;
  font-family: "Finger Paint", "Comic Sans MS", cursive, sans-serif;
  font-size: 1.0625rem; letter-spacing: .01em;
}
/* Preferenza utente (sezione /impostazioni, CDS-P0-011): il font dei
   cori e' "Finger Paint" di default, ma un utente puo' scegliere
   "Ultras Liberi" o il font di sistema — vedi
   project/assets/js/impostazioni.js e l'attributo data-font-cori
   applicato su <html> (stesso meccanismo gia' usato per data-theme). */
:root[data-font-cori="ultras"] .cds-coro-testo,
:root[data-font-cori="ultras"] .cds-coro-vs-card-testo {
  font-family: "Ultras Liberi", "Arial Black", sans-serif;
}
:root[data-font-cori="normale"] .cds-coro-testo,
:root[data-font-cori="normale"] .cds-coro-vs-card-testo {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: normal;
}
.cds-coro-risposta {
  margin-top: .625rem; padding-top: .625rem; border-top: 1px dashed var(--cds-bordo);
  font-style: italic; color: var(--cds-attenuato); font-size: .9375rem;
}
.cds-coro-metriche {
  display: flex; gap: .875rem; margin-top: .75rem; flex-wrap: wrap;
  font-size: .8125rem; color: var(--cds-attenuato);
}
.cds-coro-voto { color: var(--cds-verde-scuro); font-weight: 700; }
:root[data-theme="dark"] .cds-coro-voto { color: var(--cds-verde); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cds-coro-voto { color: var(--cds-verde); }
}

.cds-coro-stelle {
  display: flex; justify-content: center; gap: .25rem; margin-top: 1rem;
}
.cds-stella {
  background: none; border: none; padding: .125rem; cursor: pointer;
  font-size: 1.75rem; line-height: 1; color: var(--cds-stella);
  transition: color .1s ease, transform .1s ease;
}
.cds-stella:hover { transform: scale(1.12); }
.cds-stella--attiva { color: var(--cds-stella-piena); }
.cds-stella:disabled { cursor: default; }
.cds-stella:disabled:hover { transform: none; }
/* Voto medio del coro (richiesta esplicita, 2026-09-13): mostrato nelle
   stelle finche' l'utente non vota davvero, a 3/4 dell'intensita' del
   colore pieno (color-mix verso il nero, non semplice opacita': resta
   ben visibile anche sopra lo sfondo colorato della card) cosi' resta
   chiaramente distinguibile da "hai votato cosi'". Precisione di mezza
   stella: la meta' si ottiene con un testo trasparente e un gradiente
   a meta' netta ritagliato sul glifo (background-clip: text) — gli
   stati pieno/vuoto restano sul semplice color, piu' robusto. */
.cds-stella--media-piena { color: color-mix(in srgb, var(--cds-stella-piena) 75%, black); }
.cds-stella--media-mezza {
  color: transparent;
  background-image: linear-gradient(90deg,
    color-mix(in srgb, var(--cds-stella-piena) 75%, black) 50%,
    var(--cds-stella) 50%);
  -webkit-background-clip: text; background-clip: text;
}
.cds-coro-stelle-voti { margin: .125rem 0 0; text-align: center; font-size: .625rem; color: var(--cds-attenuato); }

.cds-feed-sentinella { height: 1px; }
.cds-feed-fine { text-align: center; color: var(--cds-attenuato); margin: 1.5rem 0; font-size: .9375rem; }
.cds-feed-vuoto { text-align: center; color: var(--cds-attenuato); margin: 1.5rem 0; }

/* ---- pagina squadra ----
   Sfondo generale colorato coi colori sociali della squadra: stessa
   sfumatura delle card dei cori (vedi .cds-coro sopra), qui verso
   --cds-fondo invece di --cds-superficie perche' e' lo sfondo di
   pagina, non quello di una card. --cds-coro-c1/-c2 arrivano inline dal
   router (project/routers/public/squadra.php) sul <body>. */
body.cds-squadra-sfondo {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--cds-coro-c1, var(--cds-coro-c1-fallback)) 26%, var(--cds-fondo)) 0%,
    color-mix(in srgb, var(--cds-coro-c2, var(--cds-coro-c2-fallback)) 18%, var(--cds-fondo)) 42%,
    var(--cds-fondo) 78%);
  background-attachment: fixed;
}

/* ---- sottotitlebar (richiesta esplicita, 2026-09-13) ----
   Solo nelle pagine con hero DIVERSE dalla home (squadra, squadra-contro,
   squadra-vs, vedi comp/sottotitlebar.php): la' la titlebar resta
   SEMPRE visibile (a differenza della home, che la fa apparire/sparire
   insieme al proprio wordmark, vedi .cds-home-campo .cds-barra piu'
   sopra), questa barra aggiuntiva compare invece SOTTO di essa quando
   la pillola "I migliori/Recenti" (vedi .cds-ordine-pill-riga sopra) la
   sta per toccare scrollando, per non perdere il titolo di pagina
   quando l'hero (che lo mostra normalmente) e' scrollato via.
   Overlay fisso come la titlebar della home: niente spazio riservato,
   comparsa/scomparsa gestita da project/assets/js/sottotitlebar.js
   (che imposta anche `top` in linea, pari all'altezza reale di
   .cds-barra). NESSUNA transizione (stesso bug/fix del 2026-09-14
   spiegato sopra per .cds-home-campo .cds-barra): qui la comparsa
   scatta nella STESSA chiamata che aggancia la pillola
   (sottotitlebar.js, funzione aggancia()) — una dissolvenza di .28s su
   questa barra avrebbe lasciato per una frazione di secondo la
   pillola (gia' del tutto opaca, scatto istantaneo) sovrapposta a una
   sottotitlebar ancora semi-trasparente. */
.cds-sottotitlebar {
  position: fixed; left: 0; right: 0; z-index: 19;
  opacity: 0; pointer-events: none;
  background: var(--cds-barra-fondo);
  border-bottom: 1px solid var(--cds-barra-bordo);
}
.cds-sottotitlebar--visibile { opacity: 1; pointer-events: auto; }
.cds-sottotitlebar-titolo {
  display: flex; align-items: center; justify-content: center; gap: .625rem;
  padding: .5rem 1.25rem; text-align: center;
}
.cds-sottotitlebar-nome {
  font-weight: 800; font-size: .9375rem; text-transform: uppercase; letter-spacing: .01em;
  color: var(--cds-testo);
}
/* .cds-coro-logo/.cds-coro-logo--avversaria/.cds-badge-vs--piccolo sono
   gia' definiti piu' sopra (card dei cori) — qui solo rimpiccioliti,
   niente stile nuovo da mantenere doppio. */
.cds-sottotitlebar .cds-coro-logo { width: 1.75rem; height: 1.75rem; flex-shrink: 0; }

/* Tipo 'vs' (richiesta esplicita, 2026-09-13): tre colonne, non il
   semplice elenco centrato degli altri due tipi — c'e' spazio per i
   nomi di entrambe le squadre. Colonne laterali a minmax(0, 1fr) (non
   1fr semplice, stesso motivo gia' visto in .cds-barra): senza quello
   zero esplicito i nomi lunghi spingerebbero la colonna oltre lo
   spazio disponibile invece di troncarsi, perche' il minimo automatico
   di una traccia 1fr e' il suo contenuto, non zero. */
.cds-sottotitlebar-titolo--vs {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  text-align: initial;
}
.cds-sottotitlebar-squadra {
  display: flex; align-items: center; gap: .375rem; min-width: 0;
}
.cds-sottotitlebar-squadra--sinistra { justify-content: flex-start; }
.cds-sottotitlebar-squadra--destra { justify-content: flex-end; }
/* min-width:0 sul figlio flex, non solo sul contenitore: e' lui che
   deve potersi restringere sotto la propria larghezza "naturale" per
   far scattare text-overflow — puro CSS, niente JS a misurare nulla:
   il motore di layout ricalcola gia' da solo ad ogni resize, e' gia'
   "dinamico e responsive" per costruzione. */
.cds-sottotitlebar-nome-squadra {
  font-weight: 800; font-size: .9375rem; text-transform: uppercase; letter-spacing: .01em;
  color: var(--cds-testo);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}

/* ---- hero squadra: logo di sfondo + velo bianco/nero secondo il tema ---- */
.cds-squadra-hero {
  position: relative; overflow: hidden;
  min-height: 14rem; display: flex; align-items: center; justify-content: center;
  padding: 3rem 1.25rem; text-align: center;
  background: var(--cds-barra-fondo);
}
/* Chip radiale bianco dietro il logo (non un cerchio netto: sfuma verso
   i bordi cosi' resta "sfondo", come chiesto) — solo in tema scuro,
   dove uno stemma dai tratti scuri (es. Juventus) altrimenti si
   perderebbe anche col solo alone/schiarimento sul logo stesso. */
.cds-squadra-hero-chip { position: absolute; inset: 0; pointer-events: none; }
:root[data-theme="dark"] .cds-squadra-hero-chip {
  background: radial-gradient(circle at center, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .5) 30%, rgba(255, 255, 255, 0) 62%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cds-squadra-hero-chip {
    background: radial-gradient(circle at center, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .5) 30%, rgba(255, 255, 255, 0) 62%);
  }
}
.cds-squadra-hero-logo {
  position: absolute; inset: -12%;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  filter: blur(1px); opacity: .6;
}
/* In tema scuro uno stemma dai tratti scuri (es. Juventus) si perderebbe
   nel velo nero sottostante: schiarito del 40% (brightness) e con un
   alone chiaro attorno alla sua sagoma (drop-shadow, non un
   riquadro/cerchio: segue i contorni del logo) per farlo emergere
   senza snaturare l'effetto sfondo sfocato. Solo in tema scuro: in
   chiaro il velo e' gia' chiaro e il problema non c'e'. */
:root[data-theme="dark"] .cds-squadra-hero-logo {
  filter: blur(1px) brightness(1.4) drop-shadow(0 0 .5rem rgba(255, 255, 255, .5)) drop-shadow(0 0 1.75rem rgba(255, 255, 255, .3));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cds-squadra-hero-logo {
    filter: blur(1px) brightness(1.4) drop-shadow(0 0 .5rem rgba(255, 255, 255, .5)) drop-shadow(0 0 1.75rem rgba(255, 255, 255, .3));
  }
}
/* "X" rossa a mano libera sopra il logo, pagine "cori contro"
   (CDS-P0-007): centrata e piu' piccola del logo stesso (altrimenti
   coprirebbe tutto lo stemma invece di "depennarlo" visibilmente),
   dietro al velo cosi' si scurisce/schiarisce insieme al resto dello
   sfondo secondo il tema invece di restare un rosso acceso stonato. */
.cds-squadra-hero-segno {
  position: absolute; inset: 15% 30%;
  background-image: url("/project/assets/images/segno-contro.svg");
  background-repeat: no-repeat; background-position: center; background-size: contain;
  mix-blend-mode: multiply;
}
:root[data-theme="dark"] .cds-squadra-hero-segno { mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cds-squadra-hero-segno { mix-blend-mode: screen; }
}
.cds-squadra-hero-velo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .9));
}
:root[data-theme="dark"] .cds-squadra-hero-velo { background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .92)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cds-squadra-hero-velo { background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .92)); }
}
.cds-squadra-hero-testo { position: relative; z-index: 1; }
.cds-squadra-hero-eyebrow {
  margin: 0 0 .125rem; font-size: .8125rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--cds-verde-scuro);
}
:root[data-theme="dark"] .cds-squadra-hero-eyebrow { color: var(--cds-verde); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cds-squadra-hero-eyebrow { color: var(--cds-verde); }
}
.cds-squadra-hero-eyebrow--badge { margin: 0 0 .75rem; }
.cds-squadra-hero-nome {
  margin: 0; font-size: clamp(2rem, 8vw, 3.5rem); font-weight: 900;
  text-transform: uppercase; letter-spacing: .01em; color: var(--cds-testo); text-wrap: balance;
}
/* Badge "Cori contro" DENTRO l'h1 (SEO: "Cori contro {Squadra}" come
   frase unica di titolo, non spezzata tra un <p> e l'<h1>) — un blocco a
   se' cosi' il badge resta sulla propria riga sopra al nome, stesso
   risultato visivo di quando stava nel <p> eyebrow separato. */
.cds-squadra-hero-eyebrow-riga { display: block; margin: 0 0 .75rem; }

/* ---- vista testa a testa "{squadra1} VS {squadra2}" (CDS-P0-010) ---- */
body.cds-vs-page {
  padding-bottom: calc(9.5rem + env(safe-area-inset-bottom, 0px));
}
.cds-vs-hero {
  position: sticky; top: var(--cds-vs-hero-top, 0); z-index: 18; overflow: hidden;
  min-height: var(--cds-vs-hero-min-height, 14rem);
  box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  padding: var(--cds-vs-hero-pad-top, 3.5rem) 1.25rem var(--cds-vs-hero-pad-bottom, 3.75rem);
  text-align: center;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--cds-vs-c1, var(--cds-coro-c1-fallback)) 30%, var(--cds-barra-fondo)) 0%,
    var(--cds-barra-fondo) 50%,
    color-mix(in srgb, var(--cds-vs-c2, var(--cds-coro-c2-fallback)) 30%, var(--cds-barra-fondo)) 100%);
}
.cds-vs-hero-velo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55));
}
:root[data-theme="dark"] .cds-vs-hero-velo { background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .6)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cds-vs-hero-velo { background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .6)); }
}
.cds-vs-hero-corpo {
  position: relative; z-index: 1; width: 100%;
  display: flex; align-items: center; justify-content: center;
  gap: var(--cds-vs-hero-gap, clamp(.75rem, 4vw, 2.5rem));
  flex-wrap: nowrap;
}
.cds-vs-hero-squadra {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  min-width: 0; flex: 1 1 0;
}
/* Disco chiaro dietro il logo: alcuni stemmi (es. Juventus) sono tratti
   scuri/neri su sfondo trasparente e sparirebbero nel velo scuro
   dell'hero in tema scuro. Il disco garantisce contrasto a prescindere
   dai colori dello stemma, in entrambi i temi. */
.cds-vs-hero-logo-sfondo {
  display: flex; align-items: center; justify-content: center;
  width: clamp(4.25rem, 18vw, 8rem);
  height: clamp(4.25rem, 18vw, 8rem);
  border-radius: 50%; background: rgba(255, 255, 255, .6);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(0, 0, 0, .06);
  padding: .5rem;
}
.cds-vs-hero-logo {
  width: 100%; height: 100%;
  object-fit: contain;
}
.cds-vs-hero-nome {
  margin: 0; font-size: var(--cds-vs-name-size, clamp(.8125rem, 3.4vw, 1.375rem)); font-weight: 800;
  text-transform: uppercase; color: var(--cds-testo);
  max-width: 100%; overflow-wrap: break-word; text-wrap: balance; line-height: 1.15;
}

.cds-vs-chat-conteggio {
  margin: 0 0 .75rem; text-align: center; font-size: .8125rem; color: var(--cds-attenuato);
}

/* Feed unico "a chat" (non due colonne): CoriRepository::feedAlternato()
   intreccia gia' le due direzioni in ordine di turno, qui basta allineare
   ogni card a sinistra o a destra come i fumetti di una conversazione. Lo
   sfondo colore-squadra vive SEMPRE sulla singola card (vedi
   home/coro-card-compatta.php), mai su questo contenitore: cosi' la
   sfumatura resta completa ad ogni turno, per quanto lungo sia lo scroll. */
.cds-vs-chat {
  max-width: 42rem; margin-inline: auto;
  display: flex; flex-direction: column; gap: .875rem;
}
.cds-vs-chat .cds-feed { display: flex; flex-direction: column; gap: .875rem; margin-top: 0; }
.cds-vs-page .cds-badge-vs--grande { transform-origin: center; }
.cds-vs-rispondi-bottone { z-index: 35; }
.cds-vs-rispondi-bottone--nascosto { opacity: 0; pointer-events: none; transform: translateX(-50%) scale(.85); }
.cds-vs-composer {
  position: fixed; left: 50%; bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); transform-origin: 50% 100%; z-index: 36;
  width: min(42rem, calc(100% - 1rem));
  display: grid; gap: .5rem; padding: .625rem;
  background: color-mix(in srgb, var(--cds-barra-fondo) 92%, transparent);
  border: 1px solid var(--cds-bordo); border-radius: 20px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .26);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: opacity .24s ease, transform .32s cubic-bezier(.16, 1, .3, 1), border-radius .32s cubic-bezier(.16, 1, .3, 1);
}
.cds-vs-composer--chiuso {
  opacity: 0; pointer-events: none;
  transform: translateX(-50%) translateY(.75rem) scale(.46, .36);
  border-radius: 999px;
}
.cds-vs-composer-squadre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .375rem; }
.cds-vs-composer-squadra {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: inherit; font-size: .75rem; font-weight: 800;
  padding: .45rem .625rem; border: 1px solid var(--cds-bordo); border-radius: 999px;
  cursor: pointer; background: var(--cds-superficie); color: var(--cds-testo);
}
.cds-vs-composer-squadra--attiva { background: var(--cds-verde); border-color: var(--cds-verde); color: #fff; }
.cds-vs-composer-riga { display: flex; align-items: flex-end; gap: .5rem; }
.cds-vs-composer textarea {
  flex: 1 1 auto; min-width: 0; max-height: 6.875rem; resize: none;
  font: inherit; font-size: .9375rem; line-height: 1.35;
  padding: .7rem .875rem; border: 1px solid var(--cds-bordo); border-radius: 16px;
  background: var(--cds-superficie); color: var(--cds-testo);
}
.cds-vs-composer textarea:focus { outline: 2px solid color-mix(in srgb, var(--cds-verde) 55%, transparent); outline-offset: 2px; }
.cds-vs-composer-invia {
  flex: 0 0 auto; min-height: 2.75rem; padding: 0 .875rem; border: none; border-radius: 14px;
  font: inherit; font-weight: 900; cursor: pointer; background: var(--cds-verde-scuro); color: #fff;
}
.cds-vs-composer-invia:disabled { opacity: .58; cursor: wait; }
:root[data-theme="dark"] .cds-vs-composer-invia { background: var(--cds-verde-chiaro); color: var(--cds-verde-scuro); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cds-vs-composer-invia { background: var(--cds-verde-chiaro); color: var(--cds-verde-scuro); }
}
.cds-vs-composer-esito { margin: 0; font-size: .8125rem; font-weight: 700; text-align: center; }
.cds-vs-composer-esito--ok { color: var(--cds-verde-scuro); }
.cds-vs-composer-esito--errore { color: #dc2626; }
.cds-vs-composer-honeypot { position: absolute; left: -100vw; width: 1px; height: 1px; opacity: 0; }
.cds-vs-inviato-titolo { margin: 0; font-size: 1.35rem; font-weight: 900; line-height: 1.1; color: var(--cds-testo); }
@media (max-width: 640px) {
  .cds-vs-hero { padding: var(--cds-vs-hero-pad-top, 2.25rem) 1rem var(--cds-vs-hero-pad-bottom, 2.5rem); }
}

@media (max-width: 420px) {
  .cds-vs-composer { width: calc(100% - .75rem); border-radius: 18px; }
  .cds-vs-composer--chiuso { border-radius: 999px; }
  .cds-vs-composer-invia { padding-inline: .7rem; }
}

.cds-coro-vs-card {
  width: min(78%, 26rem);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--cds-coro-c1, var(--cds-coro-c1-fallback)) 30%, var(--cds-superficie)) 0%,
    color-mix(in srgb, var(--cds-coro-c2, var(--cds-coro-c2-fallback)) 20%, var(--cds-superficie)) 55%,
    var(--cds-superficie) 100%);
  border: 1px solid var(--cds-bordo); border-radius: 14px;
  box-shadow: 0 1px 2px var(--cds-ombra);
  padding: .625rem .75rem;
}
.cds-coro-vs-card--sinistra { align-self: flex-start; border-bottom-left-radius: 3px; }
.cds-coro-vs-card--destra { align-self: flex-end; border-bottom-right-radius: 3px; }
.cds-coro-vs-card--destra .cds-coro-vs-card-testa { flex-direction: row-reverse; }
.cds-coro-vs-card-testa { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .375rem; }
.cds-coro-vs-card-logo-sfondo {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: rgba(255, 255, 255, .6);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.cds-coro-vs-card-logo { width: 80%; height: 80%; object-fit: contain; }
.cds-coro-vs-card-data-blocco { display: flex; flex-direction: column; align-items: flex-end; gap: .0625rem; text-align: right; }
.cds-coro-vs-card--destra .cds-coro-vs-card-data-blocco { align-items: flex-start; text-align: left; }
.cds-coro-vs-card-data, .cds-coro-vs-card-numero { font-size: .6875rem; color: var(--cds-attenuato); white-space: nowrap; }
.cds-coro-vs-card-numero { text-decoration: none; }
.cds-coro-vs-card-numero:hover { text-decoration: underline; }
.cds-coro-vs-card-testo {
  font-size: .875rem; line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
  font-family: "Finger Paint", "Comic Sans MS", cursive, sans-serif; letter-spacing: .01em;
}
.cds-coro-vs-card-metriche {
  display: flex; gap: .625rem; margin-top: .5rem; font-size: .6875rem; color: var(--cds-attenuato);
}
.cds-coro-vs-card--destra .cds-coro-vs-card-metriche { justify-content: flex-end; }
.cds-coro-vs-card .cds-coro-stelle { margin-top: .5rem; gap: .0625rem; }
.cds-coro-vs-card .cds-stella { font-size: 1.125rem; }
.cds-coro-vs-card .cds-coro-commenti { margin-top: .625rem; padding-top: .5rem; }
.cds-coro-vs-card--destra .cds-coro-commenti { text-align: right; }
.cds-coro-vs-card--destra .cds-coro-commenti-toggle { margin-left: auto; }
.cds-coro-vs-card--destra .cds-coro-commenti-pannello { text-align: left; }

@media (max-width: 480px) {
  .cds-coro-vs-card { width: min(86%, 26rem); }
}

/* ---- pagina /impostazioni (CDS-P0-011) ---- */
.cds-impostazioni-titolo { margin: 0 0 1.5rem; font-size: 1.75rem; font-weight: 900; }
.cds-impostazioni-gruppo {
  background: var(--cds-superficie); border: 1px solid var(--cds-bordo); border-radius: var(--cds-raggio);
  padding: 1.25rem 1.375rem; box-shadow: 0 1px 2px var(--cds-ombra);
}
.cds-impostazioni-etichetta { margin: 0 0 .375rem; font-size: 1.0625rem; font-weight: 800; }
.cds-impostazioni-descrizione { margin: 0 0 1.125rem; color: var(--cds-attenuato); font-size: .875rem; }
.cds-impostazioni-opzione {
  display: flex; align-items: center; gap: .875rem;
  padding: .875rem; border: 1px solid var(--cds-bordo); border-radius: 12px;
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.cds-impostazioni-opzione + .cds-impostazioni-opzione { margin-top: .625rem; }
.cds-impostazioni-opzione:hover { border-color: var(--cds-verde); }
.cds-impostazioni-opzione:has(input:checked) {
  border-color: var(--cds-verde);
  background: color-mix(in srgb, var(--cds-verde) 8%, transparent);
}
.cds-impostazioni-opzione input { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; accent-color: var(--cds-verde); }
.cds-impostazioni-opzione-corpo { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.cds-impostazioni-opzione-nome { font-weight: 700; font-size: .9375rem; }
.cds-impostazioni-opzione-anteprima { color: var(--cds-testo); font-size: 1.0625rem; letter-spacing: .01em; }

/* ---- pagina /invia (CDS-P0-007 step 5) ---- */
.cds-invia-titolo { margin: 0 0 .5rem; font-size: 1.75rem; font-weight: 900; }
.cds-invia-descrizione { margin: 0 0 1.5rem; color: var(--cds-attenuato); }
.cds-invia-esito {
  margin: 0 0 1.25rem; padding: .875rem 1rem; border-radius: 12px; font-size: .9375rem; font-weight: 600;
}
.cds-invia-esito--ok { background: var(--cds-verde-chiaro); color: var(--cds-verde-scuro); }
.cds-invia-esito--errore { background: color-mix(in srgb, #dc2626 12%, transparent); color: #dc2626; }
.cds-invia-form {
  display: flex; flex-direction: column; gap: 1.125rem;
  background: var(--cds-superficie); border: 1px solid var(--cds-bordo); border-radius: var(--cds-raggio);
  padding: 1.375rem; box-shadow: 0 1px 2px var(--cds-ombra);
}
.cds-invia-campo { display: flex; flex-direction: column; gap: .5rem; }
.cds-invia-campo[hidden] { display: none; }
.cds-invia-campo label { font-weight: 700; font-size: .875rem; }
.cds-invia-campo select,
.cds-invia-campo textarea {
  font: inherit; font-size: .9375rem; color: var(--cds-testo);
  background: var(--cds-fondo); border: 1px solid var(--cds-bordo); border-radius: 10px;
  padding: .625rem .75rem; resize: vertical;
}
.cds-invia-campo select:focus,
.cds-invia-campo textarea:focus { outline: 2px solid var(--cds-verde); outline-offset: 1px; }
.cds-invia-contatore { margin: 0; text-align: right; font-size: .8125rem; color: var(--cds-attenuato); }
.cds-invia-honeypot {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.cds-invia-invia {
  align-self: flex-start; font: inherit; font-weight: 800; font-size: .9375rem;
  color: #fff; background: var(--cds-verde); border: none; border-radius: 999px;
  padding: .75rem 1.75rem; cursor: pointer; transition: background .15s ease;
}
.cds-invia-invia:hover { background: var(--cds-verde-scuro); }

/* ---- footer ---- */
.cds-footer {
  margin-top: 3rem; padding: 1.75rem 1.25rem; text-align: center;
  color: color-mix(in srgb, var(--cds-barra-testo) 70%, transparent);
  background: var(--cds-barra-fondo); font-size: .8125rem;
}
.cds-footer a { color: var(--cds-barra-testo); }

@media (max-width: 640px) {
  .cds-hero { padding: 2.25rem 1rem 2.5rem; }
  /* Wordmark quasi a tutta larghezza su mobile verticale (richiesta
     esplicita): margine negativo per annullare il padding orizzontale
     dell'hero (1rem) e lasciare che l'immagine occupi tutta la
     larghezza del viewport, con solo ~5px di margine per lato —
     dimensionata sulla LARGHEZZA, non piu' sull'altezza come su
     desktop, altrimenti a schermi stretti resta piccola.
     100% (non 100vw): su Safari iOS "100vw" puo' risultare piu' largo
     del viewport visivo reale, causando scroll orizzontale spurio su
     tutta la pagina — bug reale trovato dal committente su iPhone,
     100% del contenitore (gia' esteso a piena larghezza dal margine
     negativo qui sopra) da' lo stesso risultato senza il rischio. */
  .cds-hero-marchio { margin-left: -1rem; margin-right: -1rem; }
  .cds-hero-marchio img { width: calc(100% - 10px); height: auto; max-width: none; }
  .cds-coro { flex-direction: column; }
  .cds-coro-loghi { flex-direction: row; width: auto; justify-content: flex-start; }
}

/* ---- modal "coro inviato" (/invia) ----
   Stesso schema a velo fisso gia' usato per il menu mobile
   (.cds-menu-overlay), riproposto qui per l'esito dell'invio: badge
   "VS"-style riusato (.cds-badge-vs--eyebrow) invece di un messaggio
   di conferma generico, coerente col resto del linguaggio "contro"
   del sito. */
.cds-modal-velo {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0, 0, 0, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
}
/* Un display esplicito qui sopra vince sempre su [hidden] (regola UA,
   origine piu' debole): questo velo e' ora anche toggled via JS
   (modal.js, per il modal del pulsante floating) — stesso bug gia'
   trovato e corretto altrove in questa sessione, prevenuto qui a
   monte visto che prima non serviva (il modal "Coro inviato" non
   usava mai l'attributo hidden). */
.cds-modal-velo[hidden] { display: none; }
.cds-modal-velo--visibile { opacity: 1; pointer-events: auto; }
.cds-modal {
  background: var(--cds-superficie); color: var(--cds-testo);
  border-radius: .75rem; padding: 2rem 1.75rem 1.75rem;
  max-width: 22rem; width: 100%; text-align: center;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .35);
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  transform: translateY(10px) scale(.97); opacity: 0;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;
}
.cds-modal-velo--visibile .cds-modal { transform: translateY(0) scale(1); opacity: 1; }
.cds-modal-testo { margin: 0; font-size: .9375rem; color: var(--cds-attenuato); }
.cds-modal-barra {
  width: 100%; height: .375rem; border-radius: 999px; overflow: hidden;
  background: var(--cds-bordo);
}
.cds-modal-barra-riempimento {
  width: 0%; height: 100%; border-radius: 999px;
  background: linear-gradient(135deg, #4ade80 0%, var(--cds-verde) 45%, #0b6e32 100%);
  transition: width 2s linear;
}

@media (prefers-reduced-motion: reduce) {
  .cds-modal-velo, .cds-modal, .cds-modal-barra-riempimento {
    transition: none !important;
  }
}

/* ---- pagina indice Squadre (/classifica, CDS-P0-012) ---- */
.cds-classifica-titolo { margin: 0 0 1rem; }
.cds-classifica-switch {
  display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.cds-classifica-switch a {
  padding: .5rem 1rem; border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: .875rem; color: var(--cds-testo);
  background: var(--cds-superficie); border: 1px solid var(--cds-bordo);
}
.cds-classifica-switch a.attiva {
  background: var(--cds-verde); color: #fff; border-color: var(--cds-verde);
}

.cds-classifica-gruppo {
  margin-bottom: 1rem; border: 1px solid var(--cds-bordo); border-radius: var(--cds-raggio);
  background: var(--cds-superficie); overflow: hidden;
}
.cds-classifica-gruppo-titolo {
  cursor: pointer; padding: .875rem 1.125rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .02em; font-size: .9375rem;
  list-style: none; display: flex; align-items: center; gap: .5rem;
}
.cds-classifica-gruppo-titolo::-webkit-details-marker { display: none; }
.cds-classifica-gruppo-titolo::before {
  content: '▸'; display: inline-block; transition: transform .2s ease;
}
.cds-classifica-gruppo[open] > .cds-classifica-gruppo-titolo::before { transform: rotate(90deg); }
.cds-classifica-gruppo-conteggio { color: var(--cds-attenuato); font-weight: 600; text-transform: none; letter-spacing: normal; }

.cds-classifica-griglia {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: .75rem; padding: 0 1.125rem 1.125rem;
}

/* Mini card: stesso concetto/sfumatura di .cds-coro (colori sociali via
   color-mix su --cds-coro-c1/-c2), qui centrata su logo+nome+statistiche
   invece che sul testo di un coro. Non piu' rigidamente quadrata (era
   il progetto iniziale): mostrare anche voti e punti (dati della
   classifica del legacy, richiesta esplicita) richiede piu' righe di
   quante ne stia un quadrato compatto senza affollarsi. */
.cds-mini-card {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  padding: .875rem .5rem 1rem; text-decoration: none; color: var(--cds-testo);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--cds-coro-c1, var(--cds-coro-c1-fallback)) 26%, var(--cds-superficie)) 0%,
    color-mix(in srgb, var(--cds-coro-c2, var(--cds-coro-c2-fallback)) 18%, var(--cds-superficie)) 42%,
    var(--cds-superficie) 78%);
  border: 1px solid var(--cds-bordo); border-radius: var(--cds-raggio);
  box-shadow: 0 1px 2px var(--cds-ombra);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cds-mini-card:hover { transform: translateY(-2px); box-shadow: 0 4px 10px var(--cds-ombra); }
.cds-mini-card-logo {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 50%; flex: 0 0 auto; margin-bottom: .125rem;
  background: rgba(255, 255, 255, .6);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.cds-mini-card-logo img { width: 80%; height: 80%; object-fit: contain; }
.cds-mini-card-nome {
  font-weight: 800; text-transform: uppercase; letter-spacing: .01em;
  font-size: .6875rem; text-align: center; line-height: 1.15;
}
.cds-mini-card-conteggio { font-size: .5625rem; color: var(--cds-attenuato); text-align: center; }
.cds-mini-card-punti { font-size: .6875rem; font-weight: 800; color: var(--cds-verde-scuro); }
:root[data-theme="dark"] .cds-mini-card-punti { color: var(--cds-verde); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cds-mini-card-punti { color: var(--cds-verde); }
}
/* "punti contro" (CDS-P0-016, /coricontro): rosso invece del verde
   normale, stessa tinta della X disegnata a mano usata ovunque nel sito
   per il linguaggio visivo "contro" (segno-contro.svg, #e0301e) — non un
   rosso a caso, e non il colore standard "punti" della classifica. */
.cds-mini-card-punti--contro { color: #e0301e; }
:root[data-theme="dark"] .cds-mini-card-punti--contro { color: #ff6b56; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cds-mini-card-punti--contro { color: #ff6b56; }
}
/* Maiuscoletto per le etichette "punti"/"punti contro"/"cori contro"
   delle mini card (/classifica, /coricontro): minuscolo nel markup,
   il browser lo disegna come piccole maiuscole (font-variant-caps),
   grassetto e compattato con una spaziatura negativa — non le
   maiuscole normali (troppo larghe per il poco spazio della card). */
.cds-maiuscoletto {
  font-variant-caps: small-caps; text-transform: lowercase;
  font-weight: 800; letter-spacing: -.01em;
}
/* Etichetta "Cori contro" (CDS-P0-016, /cori-contro): stesso badge
   verde skewato di .cds-badge-vs (linguaggio visivo gia' stabilito per
   tutto cio' che e' "contro" nel sito), qui ridimensionato per un
   testo piu' lungo di "VS" senza sembrare fuori scala nella mini card. */
.cds-mini-card-etichetta { font-size: .5rem; padding: .0625rem .375rem; margin-bottom: .125rem; }

@media (prefers-reduced-motion: reduce) {
  .cds-mini-card, .cds-classifica-gruppo-titolo::before { transition: none !important; }
}

/* ---- commenti ai cori (CDS-P0-013), stile Facebook ---- */
.cds-coro-commenti { margin-top: .875rem; border-top: 1px solid var(--cds-bordo); padding-top: .625rem; }
.cds-coro-commenti-toggle {
  display: inline-flex; align-items: center; gap: .375rem;
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: .875rem; font-weight: 700; color: var(--cds-attenuato);
}
.cds-coro-commenti-toggle:hover { color: var(--cds-verde-scuro); }
:root[data-theme="dark"] .cds-coro-commenti-toggle:hover { color: var(--cds-verde); }
.cds-coro-commenti-icona { display: inline-flex; }
.cds-coro-commenti-conteggio { font-variant-numeric: tabular-nums; }

.cds-coro-commenti-pannello { margin-top: .75rem; display: flex; flex-direction: column; gap: .75rem; }
.cds-coro-commenti-pannello[hidden] { display: none; }
.cds-commenti-elenco { display: flex; flex-direction: column; gap: .75rem; }
.cds-commenti-vuoto, .cds-commenti-errore { margin: 0; font-size: .8125rem; color: var(--cds-attenuato); }
.cds-commenti-errore { color: #dc2626; }
.cds-commenti-altri {
  align-self: center; background: none; border: 1px solid var(--cds-bordo); border-radius: 999px;
  padding: .375rem 1rem; font: inherit; font-size: .8125rem; font-weight: 700;
  color: var(--cds-verde-scuro); cursor: pointer;
}
:root[data-theme="dark"] .cds-commenti-altri { color: var(--cds-verde); }

.cds-commento { display: flex; gap: .625rem; }
.cds-commento-logo {
  flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%; overflow: hidden;
  background: var(--cds-fondo); display: flex; align-items: center; justify-content: center;
}
.cds-commento-logo img { width: 100%; height: 100%; object-fit: contain; }
.cds-commento-corpo {
  flex: 1 1 auto; min-width: 0; background: var(--cds-fondo); border-radius: 14px;
  padding: .5rem .75rem;
}
.cds-commento-intestazione { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.cds-commento-squadra { font-weight: 700; font-size: .8125rem; }
.cds-commento-data { font-size: .75rem; color: var(--cds-attenuato); }
.cds-commento-testo { font-size: .875rem; white-space: pre-wrap; word-break: break-word; }

.cds-commenti-form { display: flex; flex-direction: column; gap: .5rem; }
.cds-commenti-form textarea {
  font: inherit; font-size: .875rem; color: var(--cds-testo);
  background: var(--cds-fondo); border: 1px solid var(--cds-bordo); border-radius: 10px;
  padding: .5rem .625rem; resize: vertical;
}
.cds-commenti-form textarea:focus { outline: 2px solid var(--cds-verde); outline-offset: 1px; }
.cds-commenti-invia {
  align-self: flex-end; font: inherit; font-weight: 800; font-size: .8125rem;
  color: #fff; background: var(--cds-verde); border: none; border-radius: 999px;
  padding: .5rem 1.25rem; cursor: pointer; transition: background .15s ease;
}
.cds-commenti-invia:hover { background: var(--cds-verde-scuro); }
.cds-commenti-invia:disabled { opacity: .6; cursor: default; }

/* Mini selettore a stemma per la squadra del commento (richiesta
   esplicita: "non necessariamente una tendina testuale classica"):
   bottone con anteprima stemma+nome che apre un popover a griglia di
   loghi cliccabili, filtrabile per nome — stesso trattamento visivo
   (chip circolare) gia' usato ovunque nel sito per i loghi squadra. */
.cds-commenti-squadra { position: relative; align-self: flex-start; }
.cds-commenti-squadra-bottone {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--cds-fondo); border: 1px solid var(--cds-bordo); border-radius: 999px;
  padding: .25rem .75rem .25rem .25rem; font: inherit; font-size: .8125rem; font-weight: 700;
  color: var(--cds-testo); cursor: pointer;
}
.cds-commenti-squadra-logo { width: 1.5rem; height: 1.5rem; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: rgba(255, 255, 255, .6); }
.cds-commenti-squadra-logo img { width: 100%; height: 100%; object-fit: contain; }
.cds-commenti-squadra-popover {
  position: absolute; z-index: 5; top: calc(100% + .375rem); left: 0;
  width: min(20rem, 80vw); max-height: 16rem; overflow: hidden; display: flex; flex-direction: column;
  background: var(--cds-superficie); border: 1px solid var(--cds-bordo); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18); padding: .5rem;
}
/* Un display esplicito nella regola sopra vince sempre su [hidden]
   (regola dello UA stylesheet, di origine piu' debole): senza questa
   riga il popover restava visibile a prescindere dall'attributo
   hidden — bug reale trovato con Playwright durante il test. */
.cds-commenti-squadra-popover[hidden] { display: none; }
.cds-commenti-squadra-filtro {
  font: inherit; font-size: .8125rem; color: var(--cds-testo);
  background: var(--cds-fondo); border: 1px solid var(--cds-bordo); border-radius: 8px;
  padding: .375rem .625rem; margin-bottom: .5rem; flex: 0 0 auto;
}
.cds-commenti-squadra-griglia {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr));
  gap: .375rem; overflow-y: auto;
}
.cds-commenti-squadra-opzione {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  background: none; border: none; border-radius: 8px; padding: .375rem .25rem; cursor: pointer;
  font: inherit; font-size: .625rem; color: var(--cds-testo); text-align: center;
}
.cds-commenti-squadra-opzione:hover { background: var(--cds-fondo); }
.cds-commenti-squadra-opzione-logo {
  width: 2rem; height: 2rem; border-radius: 50%; overflow: hidden;
  background: rgba(255, 255, 255, .6); display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.cds-commenti-squadra-opzione-logo img { width: 100%; height: 100%; object-fit: contain; }

@media (prefers-reduced-motion: reduce) {
  .cds-coro-commenti-toggle, .cds-commenti-invia { transition: none !important; }
}

.cds-invia-invia--compatto { padding: .5rem 1.125rem; font-size: .8125rem; align-self: flex-end; }

/* Scelta squadra in vista VS/contro (CDS-P0-015): le due squadre della
   pagina sono le UNICHE opzioni, niente tendina libera — un tifoso
   sceglie tra le due, l'altra si autoseleziona come avversaria. */
.cds-invia-scelta-vs { display: flex; flex-direction: column; gap: .5rem; }
/* Un display esplicito qui sopra vince sempre su [hidden] (regola UA,
   origine piu' debole): senza questa riga il blocco restava visibile
   a prescindere dall'attributo — stesso bug gia' trovato e corretto
   per .cds-coro-commenti-pannello/.cds-commenti-squadra-popover. */
.cds-invia-scelta-vs[hidden] { display: none; }
.cds-invia-scelta-vs-domanda { margin: 0; font-weight: 700; font-size: .875rem; }
.cds-invia-scelta-vs-opzioni { display: flex; gap: .5rem; }
.cds-invia-scelta-vs-opzione {
  flex: 1 1 0; font: inherit; font-size: .875rem; font-weight: 700;
  padding: .625rem .75rem; border-radius: 10px; cursor: pointer;
  background: var(--cds-fondo); border: 1.5px solid var(--cds-bordo); color: var(--cds-testo);
}
.cds-invia-scelta-vs-opzione--attiva { background: var(--cds-verde); border-color: var(--cds-verde); color: #fff; }

/* ---- pulsante floating "Scrivi il tuo Coro" + modal (CDS-P0-015) ----
   Colori DELIBERATAMENTE invertiti rispetto alla palette normale del
   sito (richiesta esplicita): tema chiaro = verde SCURO pieno, tema
   scuro = verde CHIARO pieno — cosi' risalta come un elemento
   d'azione sempre visibile, non un componente qualunque della pagina.
   env(safe-area-inset-bottom) invece di un margine fisso: calcola per
   davvero l'ingombro delle GUI di sistema (home indicator iOS, barra
   Android), non una stima a occhio — richiede
   <meta name="viewport" content="viewport-fit=cover"> nel layout,
   altrimenti l'inset resta sempre zero. */
.cds-flottante-invia {
  position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 35; font: inherit; font-weight: 800; font-size: .875rem; white-space: nowrap;
  padding: .875rem 1.5rem; border: none; border-radius: 999px; cursor: pointer;
  background: var(--cds-verde-scuro); color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  transition: opacity .2s ease, transform .2s ease;
}
:root[data-theme="dark"] .cds-flottante-invia { background: var(--cds-verde-chiaro); color: var(--cds-verde-scuro); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cds-flottante-invia { background: var(--cds-verde-chiaro); color: var(--cds-verde-scuro); }
}
.cds-flottante-invia--nascosto { opacity: 0; pointer-events: none; transform: translateX(-50%) scale(.85); }

/* Variante "foglio dal basso" del sistema di modal condiviso
   (CDS-P0-018, vedi .cds-modal-velo/.cds-modal piu' sopra): usata dal
   pulsante floating "Scrivi il tuo Coro" (CDS-P0-015). Prima di questa
   unificazione era una copia quasi identica con nomi propri
   (.cds-flottante-velo/.cds-flottante-modal) — stesso ciclo di vita
   (apri/chiudi/Esc/backdrop, ora in project/assets/js/modal.js), solo
   la forma del pannello cambia. */
.cds-modal-velo--basso { align-items: flex-end; padding: 0; }
@media (min-width: 640px) {
  .cds-modal-velo--basso { align-items: center; padding: 1.25rem; }
}

.cds-modal--sheet {
  width: 100%; max-width: 32rem; max-height: min(85vh, 42rem); overflow-y: auto;
  border-radius: 20px 20px 0 0; padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  text-align: left; align-items: stretch; gap: 0;
  transform: translateY(100%); opacity: 0;
}
.cds-modal-velo--visibile .cds-modal--sheet { transform: translateY(0); opacity: 1; }
@media (min-width: 640px) {
  .cds-modal--sheet { border-radius: 20px; transform: translateY(1rem) scale(.96); }
  .cds-modal-velo--visibile .cds-modal--sheet { transform: translateY(0) scale(1); }
}
/* Durante il morph (FLIP, JS imposta position/left/top/width/height
   inline partendo dal rettangolo del pulsante): le stesse proprieta'
   animate in transition, sopra a opacity/transform gia' previste. */
.cds-modal--sheet.cds-modal--in-morph {
  transition: left .32s cubic-bezier(.16, 1, .3, 1), top .32s cubic-bezier(.16, 1, .3, 1),
    width .32s cubic-bezier(.16, 1, .3, 1), height .32s cubic-bezier(.16, 1, .3, 1),
    border-radius .32s cubic-bezier(.16, 1, .3, 1), opacity .3s ease, transform 0s;
}

.cds-flottante-modal-chiudi {
  position: absolute; top: .875rem; right: .875rem;
  width: 2.25rem; height: 2.25rem; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--cds-fondo); color: var(--cds-testo);
}
.cds-flottante-modal-titolo { margin: 0 2.5rem .875rem 0; font-size: 1.25rem; }
.cds-flottante-modal-caricamento { color: var(--cds-attenuato); margin: 1rem 0; }
.cds-flottante-conferma { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 1.5rem 0; text-align: center; }
.cds-flottante-conferma p { margin: 0; color: var(--cds-attenuato); font-size: .9375rem; }

@media (prefers-reduced-motion: reduce) {
  .cds-flottante-invia, .cds-modal--sheet, .cds-modal--in-morph {
    transition: none !important;
  }
}

/* Paginazione HTML crawlable degli URL storici; l'infinite scroll resta attivo. */
.cds-paginazione {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin: 1.5rem auto 0;
  font-size: 0.9rem;
}

.cds-paginazione a {
  color: var(--cds-accent, #078f3d);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.cds-consenso-analytics {
  position: fixed;
  z-index: 1200;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: max(1rem, env(safe-area-inset-left));
  max-width: 34rem;
  margin-left: auto;
  padding: 1rem;
  border: 1px solid var(--cds-bordo, #d5d5d5);
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 1rem;
  background: var(--cds-superficie, #fff);
  box-shadow: 0 0.8rem 2rem rgb(0 0 0 / 20%);
}

.cds-consenso-analytics p { margin: 0 0 0.75rem; }
.cds-consenso-analytics div { display: flex; justify-content: flex-end; gap: 0.65rem; }
.cds-consenso-analytics button {
  min-height: 2.75rem;
  padding: 0.55rem 1rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
}
.cds-consenso-analytics button[data-consenso="granted"] {
  border-color: #078f3d;
  background: #078f3d;
  color: #fff;
}

.cds-footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1rem;margin-bottom:.5rem}.cds-footer a{color:inherit}.cds-pagina-informativa{max-width:52rem;margin:0 auto;padding:clamp(1rem,4vw,3rem)}.cds-pagina-informativa article{background:var(--cds-superficie,#fff);border-radius:1.25rem;padding:clamp(1.25rem,4vw,2.5rem);box-shadow:0 8px 30px rgb(0 0 0/.08)}.cds-pagina-informativa h1{margin-top:0}.cds-pagina-informativa p{font-size:1.08rem;line-height:1.65}.cds-breadcrumb{display:flex;gap:.5rem;align-items:center;margin-bottom:1rem;font-size:.9rem}.cds-breadcrumb a{color:inherit}

.cds-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.cds-contenuto-correlato{max-width:48rem;margin:1.5rem auto;padding:1rem 1.25rem;border-radius:1rem;background:var(--cds-superficie,#fff)}.cds-contenuto-correlato h2{font-size:1.2rem}.cds-contenuto-correlato article+article{border-top:1px solid rgb(128 128 128/.22)}.cds-contenuto-correlato li{margin:.6rem 0;line-height:1.4}


/* ---- Versus: compositore full-screen di una sfida tra squadre ---- */
body.cds-versus-page { background: #07100b; }
.cds-versus {
  --cds-versus-colore-1-a: #164d2c;
  --cds-versus-colore-1-b: #0e8a3e;
  --cds-versus-colore-2-a: #14201a;
  --cds-versus-colore-2-b: #22c55e;
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100svh - 47px); padding: clamp(2rem, 7vh, 5rem) 1rem max(2rem, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; text-align: center;
  background: radial-gradient(circle at 50% 48%, rgba(34, 197, 94, .13), transparent 36%), #07100b;
}
.cds-versus-sfondo {
  position: absolute; z-index: -1; inset: -20%;
  background:
    radial-gradient(circle at 15% 52%, color-mix(in srgb, var(--cds-versus-colore-1-a) 52%, transparent), transparent 32%),
    radial-gradient(circle at 85% 52%, color-mix(in srgb, var(--cds-versus-colore-2-a) 52%, transparent), transparent 32%);
  filter: saturate(1.25); transition: background .7s ease;
}
.cds-versus-sfondo::after {
  content: ""; position: absolute; inset: 0; opacity: .18;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 42px 42px; transform: perspective(500px) rotateX(60deg) scale(1.4);
  -webkit-mask-image: linear-gradient(to bottom, transparent 8%, #000 60%, transparent 94%);
  mask-image: linear-gradient(to bottom, transparent 8%, #000 60%, transparent 94%);
}
.cds-versus-intro { margin-bottom: clamp(1.75rem, 6vh, 4rem); }
.cds-versus-eyebrow, .cds-versus-picker-eyebrow {
  margin: 0 0 .35rem; color: #66ee98; font-size: .75rem; font-weight: 900;
  letter-spacing: .16em; text-transform: uppercase;
}
.cds-versus-scelta {
  width: min(64rem, 100%); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: clamp(.55rem, 3.5vw, 3rem);
}
.cds-versus-slot {
  appearance: none; min-width: 0; padding: .25rem; border: 0; background: transparent; color: #fff;
  display: flex; flex-direction: column; align-items: center; gap: .6rem; cursor: pointer;
}
.cds-versus-slot-anello {
  position: relative; width: clamp(6.5rem, 25vw, 13rem); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; padding: 12%;
  background: linear-gradient(145deg, rgba(255,255,255,.24), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 1.25rem 3rem rgba(0,0,0,.4), inset 0 0 0 .45rem rgba(255,255,255,.055);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s ease, box-shadow .3s ease;
}
.cds-versus-slot:hover .cds-versus-slot-anello,
.cds-versus-slot:focus-visible .cds-versus-slot-anello {
  transform: translateY(-.3rem) scale(1.035); border-color: #66ee98;
  box-shadow: 0 1.5rem 3.4rem rgba(0,0,0,.48), 0 0 0 .25rem rgba(34,197,94,.15), inset 0 0 0 .45rem rgba(255,255,255,.07);
}
.cds-versus-slot:focus-visible { outline: none; }
.cds-versus-slot-placeholder {
  font-size: clamp(.78rem, 2.4vw, 1.15rem); font-weight: 950; font-style: italic;
  line-height: 1.08; text-transform: uppercase; text-shadow: 0 2px 10px #000;
}
.cds-versus-slot-logo { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 .55rem .75rem rgba(0,0,0,.38)); }
.cds-versus-slot-nome {
  width: 100%; min-height: 1.5em; font-size: clamp(.82rem, 2.6vw, 1.35rem); font-weight: 900;
  line-height: 1.15; text-transform: uppercase; overflow-wrap: anywhere; text-wrap: balance;
}
.cds-versus-slot-azione { color: rgba(255,255,255,.58); font-size: clamp(.58rem, 1.6vw, .75rem); letter-spacing: .06em; text-transform: uppercase; }
.cds-versus-slot--scelta .cds-versus-slot-logo { animation: cds-versus-caduta .5s cubic-bezier(.16,1,.3,1); }
@keyframes cds-versus-caduta { from { opacity: 0; transform: translateY(-35%) rotate(-7deg) scale(.72); } to { opacity: 1; transform: none; } }
.cds-versus-badge { position: relative; z-index: 2; font-size: clamp(1.5rem, 6vw, 3.4rem); padding: .32rem clamp(.75rem, 3vw, 1.6rem); }
.cds-versus-vai {
  margin-top: clamp(2rem, 6vh, 4rem); min-width: 8.5rem; padding: .78rem 2.25rem;
  border-radius: 999px; color: #fff; background: linear-gradient(135deg,#3ee77a,#078538);
  box-shadow: 0 .8rem 2.2rem rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.35);
  font-size: 1.2rem; font-weight: 950; font-style: italic; text-decoration: none; text-transform: uppercase;
  opacity: 0; visibility: hidden; transform: translateY(1rem) scale(.8);
  transition: opacity .3s ease, visibility .3s ease, transform .45s cubic-bezier(.16,1,.3,1), filter .15s ease;
}
.cds-versus-vai--visibile { opacity: 1; visibility: visible; transform: none; }
.cds-versus-vai:hover { filter: brightness(1.12); }
.cds-versus-picker[hidden] { display: none; }
.cds-versus-picker { position: fixed; z-index: 100; inset: 0; display: grid; place-items: end center; text-align: left; color: var(--cds-testo); }
.cds-versus-picker-sfondo { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(0,0,0,.72); opacity: 0; transition: opacity .24s ease; }
.cds-versus-picker-pannello {
  position: relative; width: min(35rem, 100%); max-height: min(44rem, calc(100svh - 1rem));
  padding: 1rem 1rem max(1rem, env(safe-area-inset-bottom)); border: 1px solid rgba(255,255,255,.12);
  border-radius: 1.5rem 1.5rem 0 0; background: color-mix(in srgb, var(--cds-superficie) 95%, transparent);
  box-shadow: 0 -1rem 3rem rgba(0,0,0,.35); transform: translateY(105%);
  transition: transform .42s cubic-bezier(.16,1,.3,1); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
.cds-versus-picker--aperto .cds-versus-picker-sfondo { opacity: 1; }
.cds-versus-picker--aperto .cds-versus-picker-pannello { transform: none; }
body.cds-versus-picker-aperto { overflow: hidden; }
body.cds-versus-picker-aperto .cds-burger { opacity: 0; pointer-events: none; }
.cds-versus-picker-testa { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .25rem .25rem .75rem; }
.cds-versus-picker-testa h2 { margin: 0; font-size: 1.25rem; }
.cds-versus-picker-chiudi {
  width: 2.5rem; height: 2.5rem; border: 1px solid var(--cds-bordo); border-radius: 50%;
  background: var(--cds-fondo); color: var(--cds-testo); font: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.cds-versus-reel-wrap { position: relative; overflow: hidden; border: 1px solid var(--cds-bordo); border-radius: 1.15rem; background: var(--cds-fondo); }
.cds-versus-reel-wrap::before, .cds-versus-reel-wrap::after {
  content: ""; position: absolute; z-index: 3; left: 0; right: 0; height: 34%; pointer-events: none;
}
.cds-versus-reel-wrap::before { top: 0; background: linear-gradient(var(--cds-fondo), transparent); }
.cds-versus-reel-wrap::after { bottom: 0; background: linear-gradient(transparent, var(--cds-fondo)); }
.cds-versus-reel-finestra {
  position: absolute; z-index: 2; top: 50%; left: .5rem; right: .5rem; height: 5rem; transform: translateY(-50%);
  border: 1px solid color-mix(in srgb, var(--cds-verde) 65%, transparent); border-radius: 1rem;
  background: color-mix(in srgb, var(--cds-verde) 9%, transparent); box-shadow: 0 0 1.5rem rgba(34,197,94,.12); pointer-events: none;
}
.cds-versus-reel {
  position: relative; z-index: 1; height: min(21rem, 52svh); overflow-y: auto; overscroll-behavior: contain;
  padding: calc((min(21rem, 52svh) - 5rem) / 2) .65rem; scroll-snap-type: y mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.cds-versus-reel::-webkit-scrollbar { display: none; }
.cds-versus-reel:focus { outline: none; }
.cds-versus-reel-item {
  width: 100%; height: 5rem; scroll-snap-align: center; border: 0; border-radius: .9rem; padding: .5rem .8rem;
  display: flex; align-items: center; gap: .9rem; background: transparent; color: var(--cds-testo); text-align: left; cursor: pointer;
  opacity: .72; transform: scale(.94); transition: opacity .16s ease, transform .16s ease, background .16s ease;
}
.cds-versus-reel-item:hover, .cds-versus-reel-item:focus-visible, .cds-versus-reel-item[aria-selected="true"] { opacity: 1; transform: scale(1); background: color-mix(in srgb, var(--cds-verde) 10%, transparent); outline: none; }
.cds-versus-reel-item:disabled { opacity: .2; cursor: not-allowed; filter: grayscale(1); }
.cds-versus-reel-logo {
  flex: 0 0 auto; width: 3.5rem; height: 3.5rem; padding: .32rem; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255,255,255,.78); box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.cds-versus-reel-logo img { width: 100%; height: 100%; object-fit: contain; }
.cds-versus-reel-item strong, .cds-versus-reel-item small { display: block; }
.cds-versus-reel-item strong { font-size: 1rem; line-height: 1.15; }
.cds-versus-reel-item small { margin-top: .2rem; color: var(--cds-attenuato); font-size: .7rem; }
.cds-versus-picker-aiuto { margin: .7rem 0 0; color: var(--cds-attenuato); font-size: .72rem; text-align: center; }

@media (min-width: 721px) {
  .cds-versus-picker { place-items: center; }
  .cds-versus-picker-pannello { border-radius: 1.5rem; transform: translateY(1.5rem) scale(.94); opacity: 0; transition: transform .32s cubic-bezier(.16,1,.3,1), opacity .24s ease; }
  .cds-versus-picker--aperto .cds-versus-picker-pannello { opacity: 1; transform: none; }
}
@media (max-width: 480px) {
  .cds-versus { padding-inline: .55rem; }
  .cds-versus-scelta { gap: .35rem; }
  .cds-versus-slot-anello { width: clamp(5.9rem, 29vw, 8rem); }
  .cds-versus-badge { padding-inline: .62rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cds-versus *, .cds-versus *::before, .cds-versus *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
}