/* Solo token, mai colori letterali: la palette vive in tokens.css (FF07 lo verifica). */

*, *::before, *::after { box-sizing: border-box; }
/* L'intestazione e' sticky: senza, un link a #inviti porta il titolo SOTTO la barra. */
html { scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font: var(--t-m)/1.55 var(--font-testo);
  -webkit-text-size-adjust: 100%;
}
main { max-width: 880px; margin: 0 auto; padding: var(--sp-6) var(--sp-4) var(--sp-12); }
h1, h2, h3, .marchio, .tessera__n, .vs, .vincitrice__nome { font-family: var(--font-titoli); }
h1 { font-size: var(--t-2xl); line-height: 1.12; margin: 0 0 var(--sp-3); text-wrap: balance; font-weight: 850; letter-spacing: -.01em; }
h2 { font-size: var(--t-l); margin: var(--sp-8) 0 var(--sp-3); font-weight: 800; }
h3 { font-size: var(--t-m); margin: 0 0 var(--sp-2); font-weight: 800; }
a { color: var(--accento); }
.intro { color: var(--inchiostro-tenue); max-width: 62ch; margin: 0 0 var(--sp-6); }
.occhiello { margin: 0 0 var(--sp-2); font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em;
             text-transform: uppercase; color: var(--accento); }
.occhiello a { color: inherit; }
code { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: .92em; }

/* --- skip link e testo solo per screen reader --------------------------- */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--sp-4); top: var(--sp-2); z-index: 10; background: var(--superficie);
              padding: var(--sp-2) var(--sp-3); border-radius: var(--raggio); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- honeypot (→S4): fuori schermo, NON display:none --------------------- */
.esca { position: absolute; left: -5000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* --- testata e navigazione --------------------------------------------- */
.intestazione { border-bottom: 1px solid var(--linea); background: var(--superficie);
                position: sticky; top: 0; z-index: 5; }
.nav { max-width: 880px; margin: 0 auto; padding: var(--sp-3) var(--sp-4);
       display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; }
.marchio { font-weight: 900; font-size: var(--t-l); text-decoration: none; color: var(--inchiostro); letter-spacing: -.02em; }
.marchio span { color: var(--accento); }
.marchio--pie { font-size: var(--t-m); }
.nav__voci { display: flex; gap: var(--sp-4); flex: 1; }
.nav__azioni { display: flex; gap: var(--sp-2); align-items: center; }
.nav__voci a { color: var(--inchiostro); text-decoration: none; padding: var(--sp-1) 0;
               border-bottom: 2px solid transparent; transition: var(--transizione); }

/* --- I SETTE STATI (→09 §E) -------------------------------------------- */
@media (hover: hover) {
  .nav__voci a:hover { border-bottom-color: var(--linea); }
  .btn:hover { background: var(--linea); }
  .btn--primario:hover { background: var(--accento-scuro); }
  .lato:not(:disabled):hover { transform: translateY(-2px); box-shadow: var(--ombra); }
  .scheda-confronto a:hover { border-color: var(--accento); }
}
:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; border-radius: 3px; }
.btn:active, .lato:active { transform: translateY(1px); }
.nav__voci a[aria-current="page"] { border-bottom-color: var(--accento); font-weight: 600; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.attesa { display: none; color: var(--inchiostro-tenue); font-size: var(--t-s); }
.htmx-request .attesa, .htmx-request.attesa { display: inline; }

/* --- bottoni ------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
       min-height: 40px; padding: var(--sp-2) var(--sp-4); border: 1px solid var(--linea);
       border-radius: var(--raggio-pillola); background: var(--superficie); color: var(--inchiostro);
       font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; transition: var(--transizione); }
.btn--primario { background: var(--accento); border-color: var(--accento); color: var(--su-accento); }
.btn--muto { color: var(--inchiostro-tenue); border-color: transparent; background: transparent; }
.btn--icona { padding: var(--sp-2); min-width: 40px; }
.btn--grande { min-height: 52px; padding: var(--sp-3) var(--sp-6); font-size: var(--t-m); }
.azione-link { font-weight: 600; text-decoration: none; }

/* --- flash ed esiti (→F1) ----------------------------------------------- */
.fascia-prova { margin: 0; padding: var(--sp-2) var(--sp-4); text-align: center; font-size: var(--t-s);
                border-bottom: 1px solid var(--attenzione); background: var(--superficie); color: var(--inchiostro); }
.flash { max-width: 848px; margin: var(--sp-4) auto 0; padding: var(--sp-3) var(--sp-4);
         border-radius: var(--raggio); border: 1px solid var(--linea); background: var(--superficie);
         display: flex; justify-content: space-between; gap: var(--sp-3); align-items: center; }
.flash--ok { background: var(--ok-tenue); border-color: var(--ok); }
.flash--errore { border-color: var(--critico); color: var(--critico); }
.flash--avviso { border-color: var(--attenzione); }
.flash__x { background: none; border: 0; font-size: var(--t-l); cursor: pointer; color: inherit; min-width: 40px; min-height: 40px; }

.esito { padding: var(--sp-2) var(--sp-3); border-radius: var(--raggio); margin: 0 0 var(--sp-3); }
.esito--ok { background: var(--ok-tenue); }
.esito--errore { color: var(--critico); border: 1px solid var(--critico); }
.esito--avviso { border: 1px solid var(--attenzione); background: var(--superficie); }

/* --- home ---------------------------------------------------------------- */
.eroe { padding: var(--sp-8) 0 var(--sp-6); }
.eroe h1 { font-size: var(--t-3xl); max-width: 18ch; }
.rassicura { color: var(--inchiostro-tenue); font-size: var(--t-s); margin: var(--sp-2) 0 0; }
.eroe__demo { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-8); flex-wrap: wrap; }
.gettone { font-family: var(--font-titoli); font-weight: 800; font-size: var(--t-xl);
           padding: var(--sp-3) var(--sp-6); border-radius: var(--raggio); border: 2px solid; }
.gettone--a { color: var(--lato-a); border-color: var(--lato-a); background: var(--lato-a-tenue); transform: rotate(-2deg); }
.gettone--b { color: var(--lato-b); border-color: var(--lato-b); background: var(--lato-b-tenue); transform: rotate(2deg); }
.vs { font-weight: 900; font-size: var(--t-m); color: var(--su-accento); background: var(--inchiostro);
      border-radius: var(--raggio-pillola); width: 44px; height: 44px; display: inline-grid; place-items: center;
      flex: none; letter-spacing: .02em; }
.passi__elenco { padding-left: var(--sp-6); display: grid; gap: var(--sp-3); max-width: 62ch; }
.schede-confronto { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3);
                    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.scheda-confronto a { display: flex; flex-direction: column; gap: var(--sp-2); height: 100%;
                      padding: var(--sp-4); background: var(--superficie); border: 1px solid var(--linea);
                      border-radius: var(--raggio); color: var(--inchiostro); text-decoration: none;
                      transition: var(--transizione); }
.scheda-confronto small { color: var(--inchiostro-tenue); }
.scheda-confronto .pillola { align-self: flex-start; }

/* --- form ------------------------------------------------------------------ */
.riga { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; margin: var(--sp-4) 0; }
.modulo { display: grid; gap: var(--sp-2); max-width: 400px; }
.modulo--largo { max-width: 620px; gap: var(--sp-6); }
.modulo > .btn { justify-self: start; }
.campo { display: grid; gap: var(--sp-2); }
.campo label, .scelte legend { font-weight: 700; }
.campo__aiuto { margin: 0; color: var(--inchiostro-tenue); font-size: var(--t-s); }
.campo__errore { margin: 0; color: var(--critico); font-size: var(--t-s); font-weight: 600; }
.facoltativo { font-weight: 400; color: var(--inchiostro-tenue); }
input, select, textarea { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--linea);
                          border-radius: var(--raggio); background: var(--superficie);
                          color: var(--inchiostro); font: inherit; min-height: 44px; width: 100%; }
textarea { resize: vertical; line-height: 1.5; }
[aria-invalid="true"] { border-color: var(--critico); }
.riga input { flex: 1; min-width: 180px; width: auto; }
.scelte { border: 0; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.scelte legend { margin-bottom: var(--sp-2); }
.scelta { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4);
          background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); cursor: pointer; }
.scelta:has(input:checked) { border-color: var(--accento); background: var(--accento-tenue); }
.scelta input { width: 20px; min-height: 20px; margin-top: 3px; flex: none; accent-color: var(--accento); }
.scelta span { display: grid; gap: 2px; }
.scelta small { color: var(--inchiostro-tenue); }

/* --- la sfida --------------------------------------------------------------- */
.testata-confronto h1 { font-size: var(--t-3xl); }
.scadenza { margin: 0 0 var(--sp-3); font-weight: 600; color: var(--attenzione); }
.nota-segreto { color: var(--inchiostro-tenue); font-size: var(--t-s); margin: 0 0 var(--sp-4); }
.sfida { margin: 0 0 var(--sp-6); }
/* Le due scelte a contatto e il cerchio VS sopra, a cavallo del centro (committente, 2026-10-05): il VS sta nella
   stessa cella della prima riga, su tutte e due le colonne, e un anello del colore della pagina lo stacca dalle carte. */
.sfida__lati { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sp-1); row-gap: var(--sp-3); align-items: stretch; }
.sfida__lati > .lato--a { grid-column: 1; grid-row: 1; }
.sfida__lati > .lato--b { grid-column: 2; grid-row: 1; }
.sfida__lati > .vs { grid-column: 1 / -1; grid-row: 1; justify-self: center; align-self: center; z-index: 1;
                     pointer-events: none; box-shadow: 0 0 0 4px var(--carta); }
.sfida__nota { margin: var(--sp-2) 0 0; color: var(--inchiostro-tenue); font-size: var(--t-s); text-align: center; }
.lato { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-2); min-height: 120px;
        padding: var(--sp-4); border-radius: var(--raggio); border: 2px solid var(--linea);
        background: var(--superficie); color: var(--inchiostro); font: inherit; cursor: pointer;
        text-align: center; transition: var(--transizione); }
.lato__nome { font-family: var(--font-titoli); font-weight: 800; font-size: var(--t-l); line-height: 1.2; overflow-wrap: anywhere; }
.lato--a { border-color: var(--lato-a); }
.lato--b { border-color: var(--lato-b); }
.lato--a.lato--scelto { background: var(--lato-a-tenue); box-shadow: inset 0 0 0 2px var(--lato-a); }
.lato--b.lato--scelto { background: var(--lato-b-tenue); box-shadow: inset 0 0 0 2px var(--lato-b); }
.lato:disabled { cursor: default; opacity: .75; }
.lato__numeri { font-size: var(--t-s); color: var(--inchiostro-tenue); font-variant-numeric: tabular-nums; }
.lato__barra { display: block; height: 8px; border-radius: var(--raggio-pillola); background: var(--linea); overflow: hidden; }
.lato__barra span { display: block; height: 100%; width: var(--quota); border-radius: inherit; transition: width 400ms ease; }
.lato--a .lato__barra span { background: var(--lato-a); }
.lato--b .lato__barra span { background: var(--lato-b); }

/* --- condividi ------------------------------------------------------------- */
/* La condivisione: una riga di icone rotonde da 40 px (bersaglio minimo sul telefono, M7), che va a capo. */
.condividi { margin: 0 0 var(--sp-4); }
.condividi__icone { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.condividi__etichetta { font-size: var(--t-s); font-weight: 700; color: var(--inchiostro-tenue); margin-right: var(--sp-1); }
.icona-social { width: 40px; height: 40px; min-height: 40px; border-radius: 50%; display: inline-flex; align-items: center;
                justify-content: center; border: 1px solid var(--linea); background: var(--superficie); color: var(--inchiostro);
                cursor: pointer; padding: 0; text-decoration: none; list-style: none; }
.icona-social[hidden] { display: none; }
.icona-social::-webkit-details-marker { display: none; }
.icona-social--nativa { background: var(--accento); border-color: var(--accento); color: var(--su-accento); }
.icona-social--whatsapp { background: var(--social-whatsapp); border-color: var(--social-whatsapp); color: var(--social-testo); }
.icona-social--telegram { background: var(--social-telegram); border-color: var(--social-telegram); color: var(--social-testo); }
.icona-social--facebook { background: var(--social-facebook); border-color: var(--social-facebook); color: var(--social-testo); }
.icona-social--x { background: var(--social-x); border-color: var(--social-x); color: var(--social-testo); }
/* Sul telefono una riga sola: via la scritta, e via l'email quando c'e' il pannello nativo (che la contiene). */
@media (max-width: 420px) {
  .condividi__etichetta { display: none; }
  .condividi--nativa .icona-social--email { display: none; }
  .condividi__icone { gap: 6px; }
}
.condividi__qr { display: inline-block; }
.condividi__qr[open] { flex-basis: 100%; }
.condividi__qr[open] img { margin: var(--sp-2) 0; }
.condividi__qr img { display: block; background: var(--superficie); border-radius: var(--raggio); max-width: 100%; height: auto; }
/* Il campo con un link da copiare (inviti, link d'ingresso di uno spazio): si seleziona tutto al focus (app.js). */
.condividi__link { flex: 1; min-width: 200px; width: auto; font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: var(--t-s); }
.condividi__esito { margin: var(--sp-1) 0 0; min-height: 1.2em; font-size: var(--t-s); color: var(--inchiostro-tenue); }

/* --- la vincitrice: verde perche' e' letteralmente «vinto» (→FE4) ---------- */
.vincitrice { text-align: center; padding: var(--sp-8) var(--sp-4); margin: 0 0 var(--sp-6);
              border-radius: var(--raggio); background: var(--ok-tenue); border: 2px solid var(--ok); }
.vincitrice .occhiello { color: var(--ok); }
.vincitrice__nome { font-size: var(--t-3xl); font-weight: 900; line-height: 1.1; margin: 0; overflow-wrap: anywhere;
                    animation: rivela 700ms cubic-bezier(.2, .9, .3, 1.3) both; }
.vincitrice__nota { color: var(--inchiostro-tenue); margin: var(--sp-3) 0 0; }
@keyframes rivela { from { opacity: 0; transform: scale(.85) translateY(8px); } to { opacity: 1; transform: none; } }

.avvisi { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center;
          padding: var(--sp-3) var(--sp-4); border: 1px dashed var(--linea); border-radius: var(--raggio); margin: var(--sp-4) 0; }
.avvisi[hidden], .avvisi [hidden] { display: none; }
.avvisi p { margin: 0; }
.avvisi__esito { flex-basis: 100%; font-size: var(--t-s); color: var(--inchiostro-tenue); }
/* --- scheda: preferenza, stelle, tier, budget ------------------------------- */
.scheda { margin: 0 0 var(--sp-6); }
.scheda__guida { color: var(--inchiostro-tenue); max-width: 62ch; }
.scheda__righe { list-style: none; padding: 0; margin: 0 0 var(--sp-4); display: grid; gap: var(--sp-2); }
.scheda__riga { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4);
                padding: var(--sp-3) var(--sp-4); background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); }
.scheda__nome { font-weight: 700; flex: 1 1 200px; overflow-wrap: anywhere; }
.scheda__riga select, .scheda__riga input[type=number] { width: auto; min-width: 140px; }
.scheda__totale { font-weight: 700; }
.scheda__totale[data-troppi] { color: var(--critico); }
.stelle, .tier-scelta { display: inline-flex; gap: var(--sp-1); }
.stella, .tier { position: relative; display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; cursor: pointer;
                 border-radius: var(--raggio); border: 1px solid var(--linea); font-weight: 800; }
.stella input, .tier input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.stella span[aria-hidden] { font-size: var(--t-l); color: var(--linea); }
.stelle:has(.stella:nth-child(1) input:checked) .stella:nth-child(-n+1) span[aria-hidden],
.stelle:has(.stella:nth-child(2) input:checked) .stella:nth-child(-n+2) span[aria-hidden],
.stelle:has(.stella:nth-child(3) input:checked) .stella:nth-child(-n+3) span[aria-hidden],
.stelle:has(.stella:nth-child(4) input:checked) .stella:nth-child(-n+4) span[aria-hidden],
.stelle:has(.stella:nth-child(5) input:checked) .stella:nth-child(-n+5) span[aria-hidden] { color: var(--attenzione); }
.tier:has(input:checked) { background: var(--accento); border-color: var(--accento); color: var(--su-accento); }
.stella:has(input:focus-visible), .tier:has(input:focus-visible) { outline: 2px solid var(--accento); outline-offset: 2px; }
.coppia__salta { grid-column: 1 / -1; text-align: center; margin: 0; }

/* --- immagini delle opzioni ---------------------------------------------------- */
/* La cornice segue la forma delle foto della sfida (--forma, Vista.forma): due ritratti restano ritratti. Il taglio
   tiene la parte alta, dove di solito ci sono i volti. */
.lato__img { width: 100%; max-width: 320px; height: auto; aspect-ratio: var(--forma, 1); max-height: 60vh; object-fit: cover;
             object-position: 50% 30%; border-radius: var(--raggio); align-self: center; }
.scheda__img, .immagini__img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--raggio); flex: none; }
.classifica__img { width: 32px; height: 32px; object-fit: cover; border-radius: 6px; vertical-align: middle; margin-right: var(--sp-2); }
.vincitrice__img { display: block; width: 160px; height: 160px; object-fit: cover; border-radius: var(--raggio); margin: var(--sp-2) auto var(--sp-3); }
.immagini__riga .riga { margin: 0; flex: 1 1 260px; min-width: 0; }
/* Il campo file di Chromium ha una larghezza intrinseca di ~300 px: a 320 px sbordava (QA overflow). */
.immagini__riga input[type=file] { min-width: 0; flex: 1 1 180px; width: 100%; max-width: 100%; }
.immagini__riga strong { overflow-wrap: anywhere; }

/* --- classifica ---------------------------------------------------------------- */
.classifica { list-style: none; padding: 0; margin: 0 0 var(--sp-3); display: grid; gap: var(--sp-2); }
.classifica__riga { display: grid; grid-template-columns: 2.2em 1fr; gap: var(--sp-1) var(--sp-3); align-items: center;
                    padding: var(--sp-2) var(--sp-4); background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); }
.classifica__riga--prima { border-color: var(--ok); background: var(--ok-tenue); }
.classifica__pos { font-family: var(--font-titoli); font-weight: 900; font-size: var(--t-l); color: var(--inchiostro-tenue); grid-row: span 3; }
.classifica__nome { font-weight: 700; overflow-wrap: anywhere; }
.classifica__barra { display: block; height: 8px; border-radius: var(--raggio-pillola); background: var(--linea); overflow: hidden; }
.classifica__barra span { display: block; height: 100%; width: var(--quota); background: var(--accento); border-radius: inherit; }
.classifica__riga--prima .classifica__barra span { background: var(--ok); }
.classifica__dato { font-size: var(--t-s); color: var(--inchiostro-tenue); font-variant-numeric: tabular-nums; }
.classifica__nota { font-size: var(--t-s); color: var(--inchiostro-tenue); }

/* --- piani ------------------------------------------------------------------- */
.piani { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: var(--sp-4); }
.piano { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); padding: var(--sp-4) var(--sp-6); }
.piano--pro { border: 2px solid var(--accento); }
.piano h2 { margin-top: 0; }
.piano__voci { padding-left: var(--sp-4); display: grid; gap: var(--sp-1); }
.piano__acquisti { display: grid; gap: var(--sp-3); }
.piano__prodotto { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
                   border-top: 1px solid var(--linea); padding-top: var(--sp-3); }
.piano__prodotto p { margin: 0; }
.piano__prodotto small, .piano-confronto p { color: var(--inchiostro-tenue); }
.piano-confronto { border: 1px dashed var(--linea); border-radius: var(--raggio); padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-6); }
.piano-confronto p { margin: 0 0 var(--sp-2); }
.segnala { margin: var(--sp-6) 0; font-size: var(--t-s); }
.segnala summary { cursor: pointer; color: var(--inchiostro-tenue); min-height: 40px; display: flex; align-items: center; }
.moderazione details { flex-basis: 100%; font-size: var(--t-s); }
.di-spazio { margin: 0 0 var(--sp-1); color: var(--inchiostro-tenue); font-size: var(--t-s); }
.marchio-promo { margin: var(--sp-8) 0 var(--sp-4); padding: var(--sp-4); border-radius: var(--raggio); text-align: center;
                 background: var(--accento-tenue); }
.marchio-promo p { margin: 0 0 var(--sp-3); }

.pronostico { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio);
              padding: var(--sp-4); margin: var(--sp-6) 0; }
.pronostico h2 { margin-top: 0; }
.pronostico select { width: auto; min-width: 200px; flex: 1; }

/* --- tabellone: scorre DENTRO il suo contenitore, mai la pagina (→M2) ------ */
/* position: relative perche' i testi .sr (absolute) restino DENTRO il contenitore a scorrimento:
   senza, sfuggono e allargano la pagina intera di tutta la larghezza del tabellone. */
.tabellone { display: flex; gap: var(--sp-4); overflow-x: auto; padding-bottom: var(--sp-2); position: relative; }
.tabellone__turno { flex: 0 0 220px; }
.tabellone__turno h3 { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.tabellone__sfide { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.incontro { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); overflow: hidden; }
.incontro__opz { display: flex; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); font-size: var(--t-s); }
.incontro__opz + .incontro__opz { border-top: 1px solid var(--linea); }
.incontro__opz--vinta { font-weight: 800; background: var(--ok-tenue); }
.incontro__opz--riposo { color: var(--inchiostro-tenue); font-style: italic; }
.incontro__n { font-variant-numeric: tabular-nums; }

/* --- area e regia ----------------------------------------------------------- */
.sintesi { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.tessera { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio);
           padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; min-width: 130px; }
.tessera__n { font-size: var(--t-l); font-weight: 800; font-variant-numeric: tabular-nums; }
.tessera span:last-child { color: var(--inchiostro-tenue); font-size: var(--t-s); }
.azione-turno { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); padding: var(--sp-4); }
.azione-turno h2 { margin-top: 0; }
.elenco { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.elenco__riga { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio);
                padding: var(--sp-3) var(--sp-4); display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.elenco__riga a { flex: 1 1 240px; }
.elenco__meta { color: var(--inchiostro-tenue); font-size: var(--t-s); }
.vuoto { background: var(--superficie); border: 1px dashed var(--linea);
         border-radius: var(--raggio); padding: var(--sp-6); text-align: center; }
.conteggio { color: var(--inchiostro-tenue); }

.pillola { font-size: var(--t-xs); font-weight: 700; padding: 2px var(--sp-2); border-radius: var(--raggio-pillola);
           border: 1px solid var(--linea); white-space: nowrap; font-family: var(--font-testo); }
.pillola--aperto { border-color: var(--accento); color: var(--accento); }
.pillola--chiuso { border-color: var(--ok); color: var(--ok); }

.pie { border-top: 1px solid var(--linea); padding: var(--sp-6) var(--sp-4);
       color: var(--inchiostro-tenue); text-align: center; }
.pie p { margin: 0 0 var(--sp-2); }
.pie__link { margin: var(--sp-3) 0 var(--sp-2); font-size: var(--t-s); }
.pie__link a { display: inline-block; padding: var(--sp-2) 0; }

/* Chi ha chiesto meno movimento non deve subirlo. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Su mobile i bersagli restano >= 40px e niente trabocca (→M2, M7). */
@media (max-width: 560px) {
  h1, .testata-confronto h1, .eroe h1 { font-size: var(--t-2xl); }
  .nav { gap: var(--sp-2); }
  .nav__voci { width: 100%; order: 3; }
  .nav__azioni { margin-left: auto; gap: var(--sp-1); }
  .solo-largo { display: none; }
  /* Le due scelte AFFIANCATE anche sul telefono (2026-10-05): impilate, la seconda finiva sotto la piega. */
  .sfida__lati > .vs { font-size: var(--t-s); width: 36px; height: 36px; }
  .lato { min-height: 140px; padding: var(--sp-3) var(--sp-2); }
  .lato__nome { font-size: var(--t-m); }
  .lato__img { max-width: 100%; }
  .vincitrice__nome { font-size: var(--t-2xl); }
}

/* --- consensi e testi legali ------------------------------------------------------------- */
.scelta-singola { display: flex; gap: var(--sp-3); align-items: flex-start; margin: var(--sp-2) 0; }
.scelta-singola input { width: 20px; min-height: 20px; margin-top: 3px; flex: none; accent-color: var(--accento); }
.legale { max-width: 72ch; }
.legale h2 { margin-top: var(--sp-8); }
.legale h3 { margin-top: var(--sp-6); }
.legale li { margin-bottom: var(--sp-2); }
.legale .indice { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio);
                  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-8); }
.tabella-scorre { overflow-x: auto; margin: var(--sp-4) 0; }
.tabella-legale { border-collapse: collapse; width: 100%; font-size: var(--t-s); }
.tabella-legale th, .tabella-legale td { border: 1px solid var(--linea); padding: var(--sp-2) var(--sp-3);
                                          text-align: left; vertical-align: top; }
.tabella-legale th { background: var(--superficie); }
.modulo-recesso { background: var(--superficie); border: 1px dashed var(--linea); border-radius: var(--raggio);
                  padding: var(--sp-3) var(--sp-4); white-space: pre-line; }

/* --- modifica, duplica, elimina ---------------------------------------------------------- */
.gestione { margin-top: var(--sp-8); }
.zona-pericolo { border: 1px solid var(--critico); border-radius: var(--raggio); padding: var(--sp-3) var(--sp-4);
                 margin-top: var(--sp-4); }
.zona-pericolo h3 { margin-top: 0; color: var(--critico); }
.btn--pericolo { border-color: var(--critico); color: var(--critico); background: transparent; }

/* --- schede delle opzioni ---------------------------------------------------------------- */
.opzioni-schede h2 { margin-bottom: var(--sp-2); }
[data-schede] { display: grid; gap: var(--sp-3); margin: var(--sp-3) 0; }
.opzione-scheda { border: 1px solid var(--linea); border-radius: var(--raggio); padding: var(--sp-3) var(--sp-4);
                  background: var(--superficie); display: grid; gap: var(--sp-2); min-width: 0; }
.opzione-scheda legend { font-weight: 700; padding: 0 var(--sp-1); }
.opzione-scheda__immagine { align-items: start; }
.opzione-scheda__anteprima { width: 96px; height: 96px; object-fit: cover; border-radius: var(--raggio); }
.opzione-scheda input[type=file] { max-width: 100%; }
.incolla-elenco { margin-top: var(--sp-2); }
.incolla-elenco textarea { width: 100%; }
.opzione__descrizione { display: block; font-size: var(--t-s); color: var(--inchiostro-tenue); font-weight: 400; }

/* --- il marchio del creatore -------------------------------------------------------------- */
.sponsor { margin: 0 0 var(--sp-6); border: 1px solid var(--linea); border-radius: var(--raggio);
           background: var(--superficie); padding: var(--sp-2) var(--sp-3); }
.sponsor__etichetta { margin: 0 0 var(--sp-1); font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em;
                      text-transform: uppercase; color: var(--inchiostro-tenue); }
.sponsor__link { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; text-decoration: none; color: inherit; }
.sponsor__img { max-width: 100%; height: auto; max-height: 160px; width: auto; border-radius: var(--raggio); }
.sponsor__testo { display: grid; gap: 2px; }
.sponsor__vai { color: var(--accento); font-size: var(--t-s); font-weight: 600; }
.sponsor-regia { margin-top: var(--sp-8); }

/* --- un torneo, una sfida alla volta -------------------------------------------------------------- */
.sfide-turno__passo { margin: 0 0 var(--sp-2); font-size: var(--t-s); font-weight: 700; color: var(--inchiostro-tenue); }
/* «chi vince resta»: l'etichetta sulla carta di chi e' rimasta in gara, larga quanto il testo */
.resta .lato > .pillola { align-self: center; }
.resta__in-gara { color: var(--inchiostro); }
.sfide-turno__fatto { background: var(--ok-tenue); border: 1px solid var(--ok); border-radius: var(--raggio);
                      padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-3); }
.sfide-turno__fatto p { margin: 0 0 var(--sp-1); }
.sfide-turno__rivedi > summary { cursor: pointer; font-weight: 600; color: var(--accento); min-height: 40px;
                                 display: flex; align-items: center; }
.sfide-turno__rivedi[open] > summary { margin-bottom: var(--sp-3); }

/* --- pagina focus: chi arriva da un link sceglie subito (2026-10-05) ------------------------------- */
.pagina--focus .testata-confronto { margin-bottom: var(--sp-3); }
.pagina--focus .testata-confronto .intro { margin: var(--sp-1) 0 0; font-size: var(--t-s); color: var(--inchiostro-tenue); }
.pagina--focus .resta__domanda, .pagina--focus .resta .scheda__guida { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pagina--focus .sponsor { margin: var(--sp-3) 0; }
.condividi--compatto { margin: var(--sp-3) 0 var(--sp-4); }
.condividi--compatto .condividi__icone { justify-content: center; }
.condividi__altro { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.condividi__altro > summary { list-style: none; cursor: pointer; }
.condividi__altro > summary::-webkit-details-marker { display: none; }
.condividi__altro > .condividi__icone { display: inline-flex; gap: 6px; }
.progresso { height: 6px; border-radius: var(--raggio-pillola); background: var(--linea); overflow: hidden; margin: 0 0 var(--sp-2); }
.progresso span { display: block; height: 100%; width: var(--quota); background: var(--accento); border-radius: inherit; transition: width 300ms ease; }
.resta__fine { text-align: center; margin: 0 0 var(--sp-4); }
.resta__fine .condividi { margin: var(--sp-4) 0 var(--sp-2); }
.resta__sfida { width: 100%; max-width: 320px; }
.resta__nota { font-size: var(--t-s); color: var(--inchiostro-tenue); margin: 0; }
.pagina--focus main { padding-top: var(--sp-4); }
/* Un nome lungo non finisce sotto il cerchio VS: spazio in piu' sul lato interno di ogni carta. */
.sfida__lati > .lato--a { padding-right: 26px; }
.sfida__lati > .lato--b { padding-left: 26px; }
.pie--compatto { padding: var(--sp-3) var(--sp-4); font-size: var(--t-xs); line-height: 1.6; color: var(--inchiostro-tenue); }
.pie--compatto a { color: inherit; }
.pie--compatto .marchio--pie { font-size: inherit; }
/* Le carte delle scelte vengono prima di tutto (committente, 2026-10-05): in focus usano quasi tutta la larghezza
   del telefono e sono alte; con la foto, la foto riempie la carta e il VS le sta sopra. */
.pagina--focus main { padding-left: var(--sp-2); padding-right: var(--sp-2); }
.pagina--focus .testata-confronto, .pagina--focus .sfide-turno__passo, .pagina--focus .progresso { margin-left: var(--sp-2); margin-right: var(--sp-2); }
.pagina--focus .lato { min-height: min(38vh, 300px); }
.sfida__lati > .lato--foto { padding: var(--sp-2) var(--sp-2) var(--sp-3); justify-content: flex-start; }
.pagina--focus .lato--foto .lato__img { max-width: 100%; }
.crea-il-tuo { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin: var(--sp-6) 0 0; }