/* Misure ricavate dalle schermate LatoC (3841x2160).
   1vmin = 1% del lato corto dello schermo: in orizzontale è l'altezza, come nelle tavole LatoC. */
:root {
  --fondo: #151515;
  --riquadro: #161616;
  --arancio: #e8530e;
  --arancio-chiaro: #d3886f;
  --bianco: #ffffff;
  --grigio: #a7a3a0;
  --bagliore: 0 0 .35vmin rgba(232, 60, 14, .9), 0 0 2.4vmin rgba(205, 22, 10, .75);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--fondo);
  color: var(--bianco);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overscroll-behavior: none;
}

#sfondo {
  position: fixed;
  inset: 0;
  background-color: var(--fondo);
  background-size: cover;
  background-position: center;
  transition: background-image .35s ease;
}
#sfondo svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* --- Schermate --------------------------------------------------------------------------- */
.schermata {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(4vmin, env(safe-area-inset-top)) 5vmin max(4vmin, env(safe-area-inset-bottom));
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.schermata.attiva {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease;
}

.contenuto { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; }
[data-testo]:empty { display: none; }

/* --- Inizio ------------------------------------------------------------------------------- */
.logo { width: 42.8vmin; height: auto; }
.payoff { width: 49.8vmin; height: auto; margin-top: 2.6vmin; }
.sottotitolo { margin-top: 2.6vmin; font-size: 3.9vmin; line-height: 1.15; max-width: 50vmin; }

.pulsante-grande {
  margin-top: 8vmin;
  width: 36vmin;
  height: 9.7vmin;
  font: 4.26vmin Arial, Helvetica, sans-serif;
  color: var(--bianco);
  background: var(--riquadro);
  border: 1px solid var(--arancio);
  border-radius: 2.4vmin;
  box-shadow: var(--bagliore);
  cursor: pointer;
  animation: respiro 2.8s ease-in-out infinite;
}
.pulsante-grande:active { transform: scale(.97); background: #2a1810; }

@keyframes respiro {
  0%, 100% { box-shadow: var(--bagliore); }
  50% { box-shadow: 0 0 .5vmin rgba(232, 70, 14, 1), 0 0 3.6vmin rgba(215, 30, 10, .9); }
}

/* --- Domanda ------------------------------------------------------------------------------ */
#domanda-testo, .titolo-schermata {
  font-size: 5.55vmin;
  line-height: 1.02;
  font-weight: bold;
  white-space: pre-line;          /* "\n" nel testo manda a capo dove si vuole */
  margin-bottom: 5.7vmin;
}

.risposte { display: flex; flex-direction: column; gap: 4.44vmin; width: 87.8vmin; max-width: 100%; }

.risposta {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 8.06vmin;
  margin-left: 4.03vmin;          /* il riquadro parte dal centro del cerchio con la lettera */
  padding: 1.2vmin 3vmin 1.2vmin 6.48vmin;
  text-align: left;
  font: 4.16vmin/1.2 Arial, Helvetica, sans-serif;
  color: var(--bianco);
  background: var(--riquadro);
  border: 1px solid var(--arancio);
  border-radius: .7vmin;
  box-shadow: var(--bagliore);
  cursor: pointer;
  transition: background .15s, transform .15s, opacity .2s;
}
.risposta .lettera {
  position: absolute;
  left: -4.03vmin;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 8.06vmin;
  height: 8.06vmin;
  border-radius: 50%;
  border: 1px solid;
  border-color: var(--arancio) var(--arancio) var(--arancio-chiaro) var(--arancio-chiaro);
  background: var(--riquadro);
  box-shadow: var(--bagliore);
  font-size: 4.5vmin;
  color: var(--arancio);
  transition: background .15s, color .15s;
}
.risposta .testi { display: flex; flex-direction: column; }
/* Parola chiave inglese, sotto il testo italiano */
.risposta .parola-chiave { margin-top: .3vmin; font-size: 2.7vmin; line-height: 1.15; color: var(--arancio-chiaro); }
.risposta .parola-chiave:empty { display: none; }
.risposta:active, .risposta.scelta { background: #2a1810; transform: scale(.985); }
.risposta.scelta .lettera { background: var(--arancio); color: var(--fondo); }
.risposte.bloccate .risposta:not(.scelta) { opacity: .4; }

/* Avanzamento: tre puntini discreti in basso (non presenti nella tavola LatoC) */
#pallini { position: fixed; left: 0; right: 0; bottom: max(3.5vmin, env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: 1.4vmin; }
#pallini i { width: 1.1vmin; height: 1.1vmin; min-width: 7px; min-height: 7px; border-radius: 50%; border: 1px solid var(--arancio); opacity: .7; }
#pallini i.fatto { background: var(--arancio); opacity: 1; }

/* --- Scelta del look --------------------------------------------------------------------
   Cinque pulsanti grandi in una riga (iPad in orizzontale); in verticale vanno a capo. */
.titolo-schermata { margin-bottom: 1.6vmin; }
.sottotitolo-outfit { font-size: 3vmin; color: var(--arancio-chiaro); margin-bottom: 5.2vmin; }
.outfit-scelte { display: flex; flex-wrap: wrap; justify-content: center; gap: 3vmin; max-width: 100%; }
.outfit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.4vmin;
  width: 21vmin;
  height: 27vmin;
  padding: 2vmin 1vmin;
  font: 3.2vmin/1.15 Arial, Helvetica, sans-serif;
  color: var(--bianco);
  background: var(--riquadro);
  border: 1px solid var(--arancio);
  border-radius: 2.4vmin;
  box-shadow: var(--bagliore);
  cursor: pointer;
  transition: background .15s, transform .15s, opacity .2s;
}
.outfit img { width: 12.5vmin; height: 12.5vmin; object-fit: contain; filter: drop-shadow(0 0 1.2vmin rgba(232, 60, 14, .55)); }
.outfit:active, .outfit.scelta { background: #2a1810; transform: scale(.97); }
.outfit.scelta { border-color: var(--bianco); }
.outfit-scelte.bloccate .outfit:not(.scelta) { opacity: .4; }

/* --- Attesa ------------------------------------------------------------------------------- */
.caricamento { display: flex; gap: 2vmin; }
.caricamento span {
  width: 2.2vmin; height: 2.2vmin; border-radius: 50%;
  background: var(--arancio); box-shadow: 0 0 2vmin var(--arancio);
  animation: pulsa 1.2s ease-in-out infinite;
}
.caricamento span:nth-child(2) { animation-delay: .2s; }
.caricamento span:nth-child(3) { animation-delay: .4s; }
@keyframes pulsa { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }
.attesa-testo { margin-top: 4vmin; font-size: 3.2vmin; color: var(--grigio); }

/* --- Risultato (nessuna tavola LatoC: stesso stile delle altre schermate) ---------------- */
.risultato .etichetta { font-size: 2.4vmin; color: var(--grigio); letter-spacing: .08em; text-transform: uppercase; }
.icona-profilo { width: 16vmin; height: 16vmin; object-fit: contain; margin: 2.6vmin 0 1.6vmin; filter: drop-shadow(0 0 1.6vmin rgba(232, 60, 14, .6)); }
#profilo-nome { font-size: 6.6vmin; letter-spacing: .04em; color: var(--arancio); }
.descrizione { max-width: 90vmin; margin-top: 2.2vmin; font-size: 3.1vmin; line-height: 1.35; }

.ritiro {
  margin-top: 4vmin;
  padding: 2.2vmin 7vmin;
  border: 1px solid var(--arancio);
  border-radius: 2.4vmin;
  box-shadow: var(--bagliore);
  background: var(--riquadro);
}
.numero { font-size: 12vmin; font-weight: bold; line-height: 1.05; }
.istruzioni { max-width: 70vmin; margin-top: 1vmin; font-size: 2.3vmin; color: var(--grigio); line-height: 1.35; }
#ritiro-mancante { margin-top: 4vmin; font-size: 3.2vmin; color: var(--bianco); }

.conto { margin-top: 3.2vmin; font-size: 2vmin; color: var(--grigio); }
.pulsante-piccolo {
  margin-top: 1.4vmin;
  padding: 1.3vmin 5vmin;
  font: 2.3vmin Arial, Helvetica, sans-serif;
  color: var(--bianco);
  background: transparent;
  border: 1px solid rgba(232, 83, 14, .6);
  border-radius: 1.4vmin;
  cursor: pointer;
}