/* ---------------------------------------------------------------------------
   Interfaccia partecipante — telefono, sala buia, decisioni rapide.
   --------------------------------------------------------------------------- */

body {
  background:
    radial-gradient(120% 90% at 50% -10%, #14161d 0%, var(--nero) 62%);
  background-attachment: fixed;
}

.scena {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding:
    calc(env(safe-area-inset-top) + var(--sp-4))
    var(--sp-3)
    calc(env(safe-area-inset-bottom) + var(--sp-3));
  max-width: 34rem;
  margin-inline: auto;
}

.schermata {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--sp-3);
}

/* --- Attesa --------------------------------------------------------------- */

.titolo-attesa {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 12vw, 3.4rem);
  font-weight: 400;
  line-height: 1.02;
  margin-top: var(--sp-2);
}

.attesa-nota {
  color: var(--testo-tenue);
  font-size: 0.9375rem;
}

.schermata[data-schermata="attesa"],
.schermata[data-schermata="caricamento"] {
  justify-content: center;
  text-align: left;
}

.schermata[data-schermata="capitale"] {
  justify-content: center;
  gap: var(--sp-2);
}

.capitale-annuncio {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-3) 0;
}

.capitale-annuncio .cifra {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(4.5rem, 26vw, 7rem);
  color: var(--oro);
  line-height: 0.9;
  letter-spacing: -0.03em;
}

.capitale-annuncio .capitale-unita {
  font-family: var(--serif);
  font-size: 1.75rem;
  color: var(--testo-tenue);
}

/* --- Testata persistente -------------------------------------------------- */

.testata {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--bordo);
}

.testata .saldo {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.0625rem;
  color: var(--oro);
}

/* --- Domanda -------------------------------------------------------------- */

.domanda {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 6.5vw, 1.95rem);
  font-weight: 400;
  line-height: 1.2;
}

.istruzione {
  color: var(--testo-tenue);
  font-size: 0.9375rem;
}

.istruzione.piena {
  color: var(--oro);
}

/* --- Opzioni -------------------------------------------------------------- */

.opzioni {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: var(--sp-1) 0 var(--sp-2);
}

/* Le scelte non compaiono tutte insieme: entrano a cascata, con uno scarto
   minimo. Bastano trenta millisecondi di sfasamento perché una lista sembri
   posata invece che sbattuta sullo schermo. */
.opzioni .opzione,
.gettoni .gettone {
  animation: entra 420ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

.opzioni .opzione:nth-child(1), .gettoni .gettone:nth-child(1) { animation-delay: 20ms; }
.opzioni .opzione:nth-child(2), .gettoni .gettone:nth-child(2) { animation-delay: 50ms; }
.opzioni .opzione:nth-child(3), .gettoni .gettone:nth-child(3) { animation-delay: 80ms; }
.opzioni .opzione:nth-child(4), .gettoni .gettone:nth-child(4) { animation-delay: 110ms; }
.opzioni .opzione:nth-child(5), .gettoni .gettone:nth-child(5) { animation-delay: 140ms; }
.opzioni .opzione:nth-child(6), .gettoni .gettone:nth-child(6) { animation-delay: 170ms; }
.opzioni .opzione:nth-child(7), .gettoni .gettone:nth-child(7) { animation-delay: 200ms; }
.opzioni .opzione:nth-child(8), .gettoni .gettone:nth-child(8) { animation-delay: 230ms; }
.opzioni .opzione:nth-child(9), .gettoni .gettone:nth-child(9) { animation-delay: 260ms; }
.opzioni .opzione:nth-child(10), .gettoni .gettone:nth-child(10) { animation-delay: 290ms; }

.opzione {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 3.25rem;
  padding: 0.75rem var(--sp-3);
  text-align: left;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 70%), var(--superficie);
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  font-size: 1.0625rem;
  transition:
    background var(--moto-breve),
    border-color var(--moto-breve),
    transform 160ms cubic-bezier(0.32, 0.72, 0, 1),
    opacity var(--moto-breve);
}

.opzione:active {
  transform: scale(0.982);
}

.opzione .segno {
  flex: 0 0 auto;
  width: 1.375rem;
  height: 1.375rem;
  border: 1.5px solid var(--bordo-vivo);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: all var(--moto-breve);
}

.opzione .segno::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--nero);
  transform: scale(0);
  transition: transform var(--moto-breve);
}

.opzione[aria-pressed="true"] {
  background: var(--oro-fioco);
  border-color: var(--oro);
}

.opzione[aria-pressed="true"] .segno {
  background: var(--oro);
  border-color: var(--oro);
}

.opzione[aria-pressed="true"] .segno::after {
  transform: scale(1);
}

/* Quando il massimo è raggiunto, le opzioni non scelte si ritraggono
   invece di bloccarsi senza spiegazione. */
.opzioni.al-massimo .opzione[aria-pressed="false"] {
  opacity: 0.4;
}

/* --- Barra d'azione ------------------------------------------------------- */

/* Barra fissa, non appiccicata. Con `sticky` esiste sempre una posizione di
   scorrimento in cui il pulsante copre l'ultima opzione — su uno schermo da
   375 px è l'opzione che serve di più. Con `fixed` più il riempimento sotto il
   contenuto, l'ultimo elemento resta raggiungibile a qualsiasi altezza. */
.azione {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding:
    var(--sp-3) var(--sp-3)
    calc(env(safe-area-inset-bottom) + var(--sp-2));
  background: linear-gradient(180deg, transparent, var(--nero) 42%);
  pointer-events: none;
  z-index: 5;
}

.azione > * {
  pointer-events: auto;
  max-width: calc(34rem - var(--sp-3) * 2);
  margin-inline: auto;
}

/* Riempimento sotto il contenuto, pari alla barra più un margine di rispetto.
   La classe la mette il codice, non `:has()`: su iOS 15 e sugli Android non
   recentissimi `:has()` non esiste, e senza questo riempimento il pulsante
   tornerebbe a coprire l'ultima opzione — proprio su chi ha il telefono
   vecchio, che è già quello messo peggio. */
.schermata.con-azione {
  padding-bottom: 6.5rem;
}

.bottone {
  width: 100%;
  min-height: 3.5rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--oro-chiaro), var(--oro));
  color: #16120a;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 10px 30px rgba(201, 162, 39, 0.22);
  transition:
    opacity var(--moto-breve),
    transform var(--moto-breve),
    box-shadow var(--moto-breve);
}

.bottone:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Investimento già registrato: non è un pulsante spento, è una conferma */
.bottone.registrato,
.bottone.registrato:disabled {
  opacity: 1;
  background: var(--oro-fioco);
  border: 1px solid var(--oro-bordo);
  color: var(--oro-chiaro);
  font-weight: 500;
  box-shadow: none;
}

.bottone:not(:disabled):active {
  transform: scale(0.99);
}

/* --- Conferma ------------------------------------------------------------- */

.confermato {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-2);
  text-align: center;
}

.confermato .spunta {
  width: 3.5rem;
  height: 3.5rem;
  margin-inline: auto;
  border: 1.5px solid var(--oro);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--oro);
  font-size: 1.5rem;
}

.confermato h2 {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 400;
}

.confermato p {
  color: var(--testo-tenue);
}

.riepilogo-scelte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  justify-content: center;
  margin-top: var(--sp-2);
}

.riepilogo-scelte span {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  font-size: 0.875rem;
  color: var(--testo-tenue);
}

/* --- Lotto ---------------------------------------------------------------- */

.lotto-intestazione {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Il marchio del lotto: dà una faccia a ciascuna promessa. Senza, i cinque
   lotti sono cinque schermate identiche con parole diverse sopra. */
.marchio-lotto {
  width: 2.75rem;
  height: 2.75rem;
  color: var(--oro);
  margin-bottom: 0.35rem;
}

.scontrino .marchio {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--oro);
  flex: 0 0 auto;
}

.voce-alto {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.lotto-codice {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  color: var(--oro);
}

.lotto-titolo {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 7vw, 2.1rem);
  font-weight: 400;
  line-height: 1.1;
}

.promessa {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  color: var(--testo-tenue);
  font-size: 1rem;
  line-height: 1.5;
}

/* --- Gettoni --------------------------------------------------------------
   Dieci gettoni, uno per ogni scatto da 10. Si riempiono da sinistra come una
   barra a segmenti: toccare il settimo investe settanta coin, con un gesto
   solo. Un più-e-meno richiederebbe fino a dieci tocchi. */

.gettoni {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  margin-top: var(--sp-1);
}

.gettone {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 60%), var(--superficie);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.0625rem;
  color: var(--testo-tenue);
  transition:
    background var(--moto-breve),
    border-color var(--moto-breve),
    color var(--moto-breve),
    box-shadow var(--moto-breve),
    transform 160ms cubic-bezier(0.32, 0.72, 0, 1);
}

.gettone:not(:disabled):active {
  transform: scale(0.93);
}

.gettone.pieno {
  background: linear-gradient(180deg, var(--oro-chiaro), var(--oro));
  border-color: var(--oro-chiaro);
  color: #16120a;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* L'ultimo gettone acceso porta il valore scelto: è quello che l'occhio cerca */
.gettone.punta {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 0 2px rgba(227, 191, 71, 0.55),
    0 8px 26px rgba(201, 162, 39, 0.3);
}

.gettone:disabled {
  opacity: 0.2;
  box-shadow: none;
  cursor: default;
}

/* --- Il selettore a blocchi ------------------------------------------------
   Un più e un meno grandi, e in mezzo il conto. Con sedici blocchi possibili
   una fila di gettoni non ci starebbe, e «uno in più, uno in meno» è il gesto
   naturale quando si compra a unità. */

.selettore-blocchi {
  display: grid;
  grid-template-columns: 4rem 1fr 4rem;
  align-items: stretch;
  gap: 0.625rem;
  margin-top: var(--sp-2);
}

.passo-blocco {
  min-height: 4.75rem;
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 60%), var(--superficie);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  font-size: 2rem;
  font-weight: 300;
  color: var(--oro-chiaro);
  transition: transform 160ms cubic-bezier(0.32, 0.72, 0, 1), opacity var(--moto-breve);
}

.passo-blocco:not(:disabled):active {
  transform: scale(0.93);
}

.passo-blocco:disabled {
  opacity: 0.22;
  cursor: default;
}

.conteggio-blocchi {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  border-radius: 1rem;
  background: var(--oro-fioco);
  border: 1px solid var(--oro-bordo);
}

.numero-blocchi {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--testo);
}

.parola-blocchi {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oro);
}

.traduzione {
  text-align: center;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  color: var(--testo-tenue);
  margin-top: 0.625rem;
}

/* --- Il bilancio personale ------------------------------------------------- */

.bilancio-personale {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: var(--sp-2);
}

.riga-quota {
  padding: 0.875rem 1rem;
  border-radius: 1rem;
  background: var(--superficie);
  border: 1px solid rgba(255, 255, 255, 0.065);
  transition: opacity var(--moto), border-color var(--moto), box-shadow var(--moto), background var(--moto);
}

.riga-quota.vuota {
  opacity: 0.55;
}

/* Quando Alessandra parla di un lotto, si accende quello e gli altri si abbassano */
.bilancio-personale.con-acceso .riga-quota:not(.accesa) {
  opacity: 0.32;
}

.riga-quota.accesa {
  opacity: 1;
  background: linear-gradient(160deg, var(--oro-fioco), var(--superficie) 70%);
  border-color: var(--oro);
  box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.25), 0 8px 28px rgba(201, 162, 39, 0.22);
}

.riga-quota-testa {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.riga-quota .marchio {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--oro);
  flex: 0 0 auto;
}

.marchio-conservato {
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  color: var(--oro);
}

.riga-quota-nomi {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.quota-nome {
  font-family: var(--serif);
  font-size: 1.125rem;
  text-transform: capitalize;
}

.quota-codice {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--testo-fioco);
}

.riga-quota-numeri {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  font-variant-numeric: tabular-nums;
}

.quota-anni {
  font-family: var(--mono);
  font-size: 1.125rem;
}

.quota-perc {
  font-family: var(--serif);
  font-size: 0.9375rem;
  color: var(--oro);
}

.quota-binario {
  height: 0.375rem;
  margin-top: 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.quota-riempimento {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, #8d6f19, var(--oro-chiaro));
  transition: transform var(--moto-lungo);
}

/* --- Equivalenza ---------------------------------------------------------- */

/* Il riquadro di ciò che si sta comprando. Niente striscia colorata sul lato:
   è il tic più riconoscibile delle interfacce generate in serie. Qui la
   distinzione la fa il fondo tinto, che è anche più visibile al buio. */
.equivalenza {
  min-height: 5.25rem;
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--oro-bordo);
  border-radius: var(--raggio-p);
  background: var(--oro-fioco);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
}

.equivalenza .resa {
  font-family: var(--serif);
  font-size: 1.4rem;
  line-height: 1.15;
}

.equivalenza.spenta {
  border-color: var(--bordo);
  background: none;
}

.equivalenza.spenta .resa {
  color: var(--testo-fioco);
}

/* --- Non vendo ------------------------------------------------------------ */

/* Con i caratteri di sistema ingranditi la riga non ci sta più: invece di
   spezzarsi male, passa a due righe per intero. */
.non-vendo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem var(--sp-2);
  margin-top: var(--sp-2);
  padding: var(--sp-2);
  border: 1px dashed var(--bordo-vivo);
  border-radius: var(--raggio-p);
}

.non-vendo .frase {
  flex: 1 1 12rem;
}

/* In corsivo perché non è un'etichetta: è la voce di chi sceglie di trattenere */
.non-vendo .frase {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--testo-tenue);
}

.non-vendo .cifra {
  font-size: 1.375rem;
  color: var(--testo);
  white-space: nowrap;
}

/* --- Riepilogo e reveal --------------------------------------------------- */

.scontrino {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: var(--sp-2);
}

.voce {
  padding: var(--sp-2);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-p);
  background: var(--superficie);
}

.voce .codice {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--oro);
}

.voce .comprato {
  font-family: var(--serif);
  font-size: 1.2rem;
  margin-top: 0.3rem;
  line-height: 1.2;
}

.voce .costo {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--bordo);
  font-size: 0.9375rem;
  color: var(--testo-tenue);
  line-height: 1.45;
}

.voce .costo strong {
  color: var(--freddo);
  font-weight: 600;
}

/* Nel reveal ogni voce si raffredda, come sul ledwall: da qui in poi si parla
   di prezzo, non di promessa. */
.schermata[data-schermata="reveal"] .voce {
  border-color: var(--freddo-bordo);
  background: var(--freddo-fioco);
}

/* Tranne una. Il vuoto deve sembrare voluto, non un errore. */
.voce.senza-prezzo,
.schermata[data-schermata="reveal"] .voce.senza-prezzo {
  border-color: var(--oro-bordo);
  background: var(--oro-fioco);
}

.voce.senza-prezzo .costo {
  font-family: var(--serif);
  font-size: 1.0625rem;
  color: var(--oro-chiaro);
  font-style: italic;
}

/* --- Messaggi ------------------------------------------------------------- */

.avviso {
  padding: var(--sp-2);
  border-radius: var(--raggio-p);
  background: rgba(180, 84, 78, 0.14);
  border: 1px solid rgba(180, 84, 78, 0.4);
  font-size: 0.9375rem;
}

/* Il numero in alto a destra ha un'etichetta: «80» da solo non si capisce. */
.testata .saldo {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.05;
}

.testata .saldo small {
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--testo-fioco);
}

.testata .saldo .saldo-cifra {
  font-size: 1.25rem;
}