/* Flickbuster - stile del sito: "Cinema Belle Époque" (brand/stitch/DESIGN.md).
   Regole: tutto il testo piccolo è avorio (mai oro); l'oro è per titoli, punteggi e pulsanti;
   il rosso solo per il timer urgente e gli errori. Font serviti dal sito stesso (licenza OFL). */

@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/Playfair-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --nero: #111014;
  --s1: #18171C;
  --s2: #211F26;
  --s3: #2B292E;
  --bianco: #F4F1EA;
  --oro: #F2B632;
  --oro-chiaro: #FFE9A8;
  --oro-scuro: #B57F1E;
  --rosso: #D64545;
  --testo-soft: rgba(244, 241, 234, 0.8);
  --titoli: "Playfair Display", Georgia, "Times New Roman", serif;
  --testi: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rivetto: radial-gradient(circle, var(--oro-scuro) 0 2px, transparent 2.6px);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--nero);
  color: var(--bianco);
  font-family: var(--testi);
  font-size: 1rem;
  line-height: 1.5;
}

.app {
  flex: 1;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 8px 16px;
}

[hidden] { display: none !important; }

h1, h2, h3, .biglietto .nome, .biglietto .num b, .timer-num, .punteggio, .frase, .account-titolo {
  font-variant-numeric: lining-nums; /* numeri alti, non "da libro antico" */
}

h1, h2, h3 {
  font-family: var(--titoli);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin: 0 0 0.4em;
}

a { color: var(--bianco); text-decoration-color: var(--oro); text-underline-offset: 3px; }
a:hover { color: var(--oro-chiaro); }

:focus-visible {
  outline: 3px solid var(--oro-chiaro);
  outline-offset: 3px;
  border-radius: 4px;
}
h1:focus, h2:focus { outline: none; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Logo ---- */
.logo { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto 4px; }

.testata { display: flex; justify-content: center; padding: 12px 0 4px; }
.testata a { display: block; border-radius: 4px; }
.marchio-c { display: block; width: 44px; height: auto; }

/* ---- Decorazioni ---- */
/* barra a pellicola 35 mm, con le perforazioni sopra e sotto */
.pellicola {
  height: 20px;
  margin: 24px 0;
  background-color: var(--s1);
  background-image:
    repeating-linear-gradient(90deg, var(--oro-scuro) 0 7px, transparent 7px 15px),
    repeating-linear-gradient(90deg, var(--oro-scuro) 0 7px, transparent 7px 15px);
  background-size: 100% 4px, 100% 4px;
  background-position: 0 3px, 0 calc(100% - 3px);
  background-repeat: no-repeat;
  border-top: 1px solid var(--oro-scuro);
  border-bottom: 1px solid var(--oro-scuro);
}

/* cornice con i rivetti agli angoli e un rombo al centro sopra e sotto */
.cornice {
  position: relative;
  padding: 28px 18px 24px;
  background-color: var(--s1);
  background-image: var(--rivetto), var(--rivetto), var(--rivetto), var(--rivetto);
  background-size: 12px 12px;
  background-position: 6px 6px, calc(100% - 6px) 6px, 6px calc(100% - 6px), calc(100% - 6px) calc(100% - 6px);
  background-repeat: no-repeat;
  border: 1px solid var(--oro-scuro);
  border-radius: 4px;
  text-align: center;
}
.cornice::before, .cornice::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 11px; height: 11px;
  background: var(--oro);
  transform: translateX(-50%) rotate(45deg);
}
.cornice::before { top: -6px; }
.cornice::after { bottom: -6px; }

/* ---- Pulsanti ---- */
.btn {
  position: relative;
  display: block;
  width: 100%;
  min-height: 54px;
  padding: 14px 22px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: var(--testi);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.2;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* "biglietto d'oro": angoli smussati in alto a destra e in basso a sinistra */
.btn-oro {
  background: var(--oro);
  color: var(--nero);
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--oro-chiaro);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.btn-oro:hover:not(:disabled) { background: var(--oro-chiaro); color: var(--nero); }
.btn-oro:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--nero), inset 0 0 0 5px var(--oro-chiaro);
}

/* "celluloide": superficie scura, bordo di ottone, rivetti agli angoli */
.btn-bordo, .btn-chiaro {
  color: var(--bianco);
  background-color: var(--s1);
  background-image:
    radial-gradient(circle at 8px 8px, var(--oro-scuro) 0 2px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 8px) 8px, var(--oro-scuro) 0 2px, transparent 2.6px),
    radial-gradient(circle at 8px calc(100% - 8px), var(--oro-scuro) 0 2px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), var(--oro-scuro) 0 2px, transparent 2.6px);
  border-color: var(--oro-scuro);
}
.btn-bordo:hover:not(:disabled), .btn-chiaro:hover:not(:disabled) { border-color: var(--oro); color: var(--bianco); }

.btn-link {
  display: inline-block;
  padding: 10px 6px;
  background: none;
  border: 0;
  color: var(--bianco);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--oro);
  text-underline-offset: 3px;
  cursor: pointer;
}
.btn-link:hover { color: var(--oro-chiaro); }

/* ---- Testi ---- */
.titolo-grande {
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--oro);
  margin-bottom: 0.15em;
}
.sottotitolo { font-size: 1.05rem; margin: 0 0 22px; }
.nota { font-size: 0.9rem; color: var(--testo-soft); margin: 14px 0 0; }

/* targhetta a biglietto: contatori e avvisi */
.chip, .contatore {
  display: inline-block;
  margin: 0;
  padding: 6px 12px;
  background: var(--s2);
  border: 1px dashed var(--oro-scuro);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
}

.avviso-sfida {
  margin: 8px 0 18px;
  padding: 14px 16px;
  background: var(--s2);
  border: 1px dashed var(--oro-scuro);
  border-radius: 4px;
  text-align: center;
  font-weight: 600;
}

/* ---- Elenco delle sfide: ogni sfida è un biglietto con il tagliando a sinistra ---- */
.elenco-sfide { display: grid; gap: 12px; margin: 0; text-align: left; }

.biglietto {
  position: relative;
  display: grid;
  grid-template-columns: 68px 1fr auto;
  align-items: center;
  width: 100%;
  min-height: 72px;
  padding: 0;
  background: var(--s2);
  color: var(--bianco);
  border: 1px solid var(--oro-scuro);
  border-radius: 4px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* le due mezzelune della perforazione, sopra e sotto il tagliando */
.biglietto::before, .biglietto::after {
  content: "";
  position: absolute;
  left: 62px;
  width: 12px; height: 12px;
  background: var(--s1);
  border: 1px solid var(--oro-scuro);
  border-radius: 50%;
}
.biglietto::before { top: -7px; clip-path: inset(50% 0 0 0); }
.biglietto::after { bottom: -7px; clip-path: inset(0 0 50% 0); }

.biglietto:hover:not(:disabled) { border-color: var(--oro); box-shadow: 0 0 12px rgba(242, 182, 50, 0.2); }
.biglietto:disabled { cursor: not-allowed; background: var(--s1); }

.biglietto .num {
  display: grid;
  place-items: center;
  align-self: stretch;
  border-right: 1px dashed var(--oro-scuro);
}
.biglietto .num b {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  font-family: var(--titoli);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--oro);
  isolation: isolate;
}
.biglietto .num b::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 27px; height: 27px;
  background: var(--s1);
  border: 1px solid var(--oro-scuro);
  transform: rotate(45deg);
}
.biglietto .info { display: grid; gap: 2px; padding: 12px 12px 12px 18px; }
.biglietto .nome { font-family: var(--titoli); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.02em; }
.biglietto .dettaglio { font-size: 0.85rem; }
.biglietto .stato-sfida {
  margin-right: 14px;
  padding: 7px 14px;
  background: var(--oro);
  color: var(--nero);
  border-radius: 2px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.biglietto:disabled .num b { color: var(--bianco); }
.biglietto:disabled .stato-sfida {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--bianco);
  border: 1px dashed var(--oro-scuro);
}
.biglietto:disabled .nome, .biglietto:disabled .dettaglio { opacity: 0.75; }
.icona-lucchetto { width: 14px; height: 14px; flex: none; }

/* ---- Social: tasti rotondi col nome scritto ---- */
.social { margin: 26px 0 8px; text-align: center; }
.social-titolo {
  margin: 0 0 10px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.social-tasti { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.social-tasti a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  background: var(--s1);
  border: 1px solid var(--oro-scuro);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}
.social-tasti a:hover { border-color: var(--oro); }

/* ---- Domanda ---- */
.barra-alta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }

/* cronometro: anello d'ottone, tacche e lancetta che gira */
.timer { position: relative; width: 64px; height: 64px; flex: none; border-radius: 50%; }
.timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer circle { fill: none; }
.timer-anello { stroke: var(--oro-scuro); stroke-width: 0.8; }
.timer-tacche { stroke: var(--oro-scuro); stroke-width: 2; stroke-dasharray: 0.7 6.8; }
.timer-fondo { stroke: var(--s3); stroke-width: 3.5; }
.timer-arco { stroke: var(--oro); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 119.38; } /* 2 x pi x 19 */
.timer-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--bianco);
}
.timer.urgente { animation: pulsa 1s ease-in-out infinite; box-shadow: 0 0 20px rgba(214, 69, 69, 0.3); }
.timer.urgente .timer-arco, .timer.urgente .timer-anello, .timer.urgente .timer-tacche { stroke: var(--rosso); }
@keyframes pulsa { 50% { transform: scale(1.07); } }

/* barra di avanzamento a pellicola */
.progresso {
  position: relative;
  height: 22px;
  margin: 14px 0 22px;
  background-color: var(--s1);
  background-image:
    repeating-linear-gradient(90deg, var(--s3) 0 6px, transparent 6px 14px),
    repeating-linear-gradient(90deg, var(--s3) 0 6px, transparent 6px 14px);
  background-size: 100% 4px, 100% 4px;
  background-position: 0 3px, 0 calc(100% - 3px);
  background-repeat: no-repeat;
  border: 1px solid var(--oro-scuro);
}
.progresso div {
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 0;
  background: var(--oro);
  transition: width 0.3s ease;
}

.domanda {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 20px;
  text-wrap: balance;
}

.opzioni { display: grid; gap: 10px; }

.opzione {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 8px 14px 8px 10px;
  background: var(--s1);
  color: var(--bianco);
  border: 1px solid var(--oro-scuro);
  border-radius: 4px;
  font: inherit;
  font-size: 1.05rem;
  text-align: left;
  cursor: pointer;
}
.opzione:hover:not(:disabled) { border-color: var(--oro); background: var(--s2); box-shadow: 0 0 12px rgba(242, 182, 50, 0.2); }
.opzione:active:not(:disabled) { background: var(--s2); border-color: var(--oro); }
.opzione:disabled { cursor: default; }

/* la lettera sta dentro un rombo */
.opzione .lettera {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  font-family: var(--titoli);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--oro-chiaro);
  isolation: isolate;
}
.opzione .lettera::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 28px; height: 28px;
  background: var(--s2);
  border: 1px solid var(--oro-scuro);
  transform: rotate(45deg);
}
.opzione .testo { flex: 1; }
.opzione .segno { flex: none; display: flex; }
.opzione .segno svg { width: 22px; height: 22px; }

.opzione.giusta {
  border-color: var(--oro);
  background: linear-gradient(135deg, var(--s1) 0%, #292419 100%);
  box-shadow: inset 0 0 0 3px var(--s1), inset 0 0 0 4px var(--oro), 0 0 12px rgba(242, 182, 50, 0.2);
}
.opzione.giusta .segno { color: var(--oro); }
.opzione.sbagliata {
  border-color: var(--rosso);
  background: linear-gradient(135deg, var(--s1) 0%, #261616 100%);
}
.opzione.sbagliata .segno { color: var(--rosso); }
.opzione.spenta { opacity: 0.5; }
/* risposta scelta: si accende, ma non si dice se è giusta (lo si scopre nel risultato) */
.opzione.scelta {
  border-color: var(--oro);
  background: linear-gradient(135deg, var(--s1) 0%, #292419 100%);
  box-shadow: inset 0 0 0 3px var(--s1), inset 0 0 0 4px var(--oro);
}
.opzione.scelta .segno { color: var(--oro); }
.opzione .segno svg { width: 22px; height: 22px; }

/* ---- Annunci: spazio con cornice e scritta "Pubblicità" ---- */
.annuncio { margin: 24px 0; text-align: center; }
.annuncio-etichetta { margin: 0 0 6px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--testo-soft); }
.annuncio-quadro {
  min-height: 250px; /* posto riservato: la pagina non salta quando arriva l'annuncio */
  padding: 8px;
  overflow: hidden;
  background-color: var(--s1);
  background-image: var(--rivetto), var(--rivetto), var(--rivetto), var(--rivetto);
  background-size: 12px 12px;
  background-position: 6px 6px, calc(100% - 6px) 6px, 6px calc(100% - 6px), calc(100% - 6px) calc(100% - 6px);
  background-repeat: no-repeat;
  border: 1px solid var(--oro-scuro);
  border-radius: 4px;
}

/* ---- Momento "pubblicità" prima del risultato: cornice d'oro e bobina che gira ---- */
.pubblicita-fine { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: var(--nero); }
.cornice-pubb { width: 100%; max-width: 420px; }
.bobina { width: 96px; height: 96px; margin: 14px auto 18px; color: var(--oro); animation: gira 3s linear infinite; }
.bobina svg { display: block; width: 100%; height: 100%; }
@keyframes gira { to { transform: rotate(360deg); } }
.pubb-testo { margin: 0; font-family: var(--titoli); font-size: 1.3rem; font-weight: 600; line-height: 1.35; text-wrap: balance; }

/* ---- Domande da rivedere (nel risultato) ---- */
.revisione { margin: 4px 0 22px; text-align: left; }
.revisione h2 { margin: 0 0 12px; font-size: 1.25rem; text-align: center; }
.rev-lista { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.rev-lista li { margin: 0; padding: 12px 14px; background: var(--s1); border: 1px dashed var(--oro-scuro); border-radius: 4px; }
.rev-lista p { margin: 0; }
.rev-num { margin-bottom: 4px !important; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.rev-domanda { margin-bottom: 8px !important; font-weight: 600; }
.rev-giusta { padding-left: 10px; border-left: 3px solid var(--oro); font-weight: 600; }
.rev-tua { margin-top: 4px !important; font-size: 0.9rem; color: var(--testo-soft); }

.esito { min-height: 1.6em; margin: 16px 0 8px; font-weight: 600; text-align: center; }
.esito.ok::before, .esito.no::before {
  content: "";
  display: inline-block;
  width: 0.5em; height: 0.5em;
  margin-right: 0.7em;
  vertical-align: 0.1em;
  transform: rotate(45deg);
}
.esito.ok::before { background: var(--oro); }
.esito.no::before { background: var(--rosso); }

#btn-avanti { margin-top: 10px; }

/* ---- Risultato ---- */
.risultato { text-align: center; }
.punteggio {
  font-family: var(--titoli);
  font-size: 5.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--oro);
  margin: 12px 0 0;
}
.tempo { font-size: 1.2rem; font-weight: 600; margin: 6px 0 0; }
.punti { font-size: 1rem; color: var(--testo-soft); margin: 2px 0 0; }
.frase {
  font-family: var(--titoli);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 18px 0 0;
  text-wrap: balance;
}
.confronto {
  margin: 16px 0 0;
  padding: 12px 14px;
  background: var(--s2);
  border: 1px dashed var(--oro-scuro);
  border-radius: 4px;
  font-weight: 600;
}

/* una casella per domanda: oro = giusta, grigio scuro = sbagliata o scaduta */
.quadratini {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin: 22px 0;
  padding: 0;
  list-style: none;
}
.quadratini li {
  width: 29px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 2px;
}
.quadratini li svg { width: 16px; height: 16px; }
.quadratini .giusta { background: var(--oro); color: var(--nero); border: 1px solid var(--oro-chiaro); }
.quadratini .sbagliata { background: var(--s3); color: var(--bianco); border: 1px solid var(--oro-scuro); }

.azioni { display: grid; gap: 12px; margin-top: 8px; }
.stato { min-height: 1.5em; margin: 10px 0 0; font-size: 0.95rem; font-weight: 600; }

/* ---- Sblocco a punti, "Avanti" e Intervallo (7/11/2026) ---- */
.risultato .annuncio { margin: 28px 0; } /* lontano dai tasti, per non far cliccare per sbaglio */
.prossima {
  margin: 20px 0;
  padding: 16px;
  background: var(--s2);
  border: 1px dashed var(--oro-scuro);
  border-radius: 4px;
}
.prossima[hidden] { display: none; }
.prossima-testo { margin: 0 0 14px; font-weight: 600; }
.prossima-testo:last-child { margin-bottom: 0; }
.sblocco-nota { text-align: center; }
.sblocco-nota a { white-space: nowrap; }

.intervallo {
  margin: 0 0 22px;
  padding: 14px 8px 16px;
  border-top: 1px solid var(--oro-scuro);
  border-bottom: 1px solid var(--oro-scuro);
}
.intervallo[hidden] { display: none; }
.intervallo-titolo {
  margin: 0 0 8px;
  font-family: var(--titoli);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--oro);
}
.intervallo-punti { margin: 0 0 8px; font-weight: 600; }
.intervallo-bar { margin: 0; font-family: var(--titoli); font-style: italic; color: var(--testo-soft); text-wrap: balance; }

/* ---- Accesso e soprannome ---- */
.box-account {
  margin: 20px 0;
  padding: 18px 16px;
  background-color: var(--s1);
  background-image: var(--rivetto), var(--rivetto), var(--rivetto), var(--rivetto);
  background-size: 12px 12px;
  background-position: 6px 6px, calc(100% - 6px) 6px, 6px calc(100% - 6px), calc(100% - 6px) calc(100% - 6px);
  background-repeat: no-repeat;
  border: 1px solid var(--oro-scuro);
  border-radius: 4px;
  text-align: center;
}
.box-account[hidden] { display: none; }
.account-titolo { margin: 0 0 6px; font-family: var(--titoli); font-size: 1.2rem; font-weight: 600; }
.account-nota, .account-riga { margin: 0 0 14px; font-size: 0.95rem; }
.account-errore { margin: 14px 0 0; padding: 10px 12px; border: 1px solid var(--rosso); border-radius: 4px; font-size: 0.95rem; }
.account-campo {
  display: block;
  width: 100%;
  margin: 0 0 14px;
  padding: 12px 14px;
  font: inherit;
  color: var(--bianco);
  background: var(--s1);
  border: 1px solid var(--oro-scuro);
  border-radius: 4px;
}
.account-campo::placeholder { color: var(--bianco); opacity: 0.5; }
.account-campo:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 2px var(--s1), 0 0 0 3px var(--oro-chiaro); }
.account-spunta { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; text-align: left; font-size: 0.9rem; }
.account-spunta input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--oro); }
.account-azioni { display: grid; gap: 10px; }
.account-secondarie { gap: 4px; margin-top: 4px; }
.account-form { display: grid; }
.profilo-anteprima { display: block; width: 96px; height: 96px; margin: 0 auto 14px; }
.avatar-griglia { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 0 0 16px; }
.avatar-scelta {
  padding: 2px; background: none; cursor: pointer;
  border: 2px solid transparent; border-radius: 50%;
}
.avatar-scelta img { display: block; width: 100%; height: auto; }
.avatar-scelta[aria-pressed="true"] { border-color: var(--oro-chiaro); box-shadow: 0 0 0 2px var(--oro); }
.avatar-scelta:focus-visible { outline: 2px solid var(--oro-chiaro); outline-offset: 2px; }
.account-profilo { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 14px; }
.account-profilo .account-riga { margin: 0; text-align: left; }
.mio-avatar { flex: none; width: 44px; height: 44px; }
.account-pwd { position: relative; }
.account-pwd .account-campo { padding-right: 96px; }
.account-mostra {
  position: absolute; top: 0; right: 0;
  height: calc(100% - 14px);
  padding: 0 14px;
  font: inherit; font-size: 0.85rem; font-weight: 600;
  color: var(--bianco);
  background: none; border: 0;
  text-decoration: underline; text-decoration-color: var(--oro); text-underline-offset: 3px;
  cursor: pointer;
}
.account-mostra:focus-visible { outline: 2px solid var(--oro-chiaro); outline-offset: -4px; }
.account-info { margin: 14px 0 0; padding: 10px 12px; border: 1px solid var(--oro-scuro); border-radius: 4px; font-size: 0.95rem; }

/* ---- Pagine di testo (privacy, segnala) ---- */
.pagina h1 { font-size: 2.2rem; font-weight: 700; letter-spacing: 0.03em; color: var(--oro); }
.pagina h2 { font-size: 1.35rem; margin-top: 1.8em; }
.pagina h2::before {
  content: "";
  display: inline-block;
  width: 0.45em; height: 0.45em;
  margin-right: 0.6em;
  vertical-align: 0.12em;
  background: var(--oro);
  transform: rotate(45deg);
}
.pagina ul { padding-left: 1.2em; }
.pagina ol { padding-left: 1.5em; }
.pagina li { margin-bottom: 0.4em; }
.pagina .data { font-size: 0.9rem; color: var(--testo-soft); }
.torna { display: inline-block; margin-bottom: 10px; padding: 8px 0; font-weight: 600; }
.pagina .btn { margin-top: 18px; }

/* ---- Piè di pagina ---- */
.piede {
  width: 100%;
  max-width: 600px;
  margin: 24px auto 0;
  padding: 18px 16px 28px;
  border-top: 1px solid var(--oro-scuro);
  font-size: 0.82rem;
  color: var(--testo-soft);
  text-align: center;
}
.piede p { margin: 0 0 10px; }
.piede a { display: inline-block; padding: 6px 8px; font-weight: 600; }

/* ---- "Vai al contenuto" (si vede solo con la tastiera) ---- */
.salta {
  position: absolute;
  left: 8px; top: -64px;
  z-index: 60;
  padding: 10px 14px;
  background: var(--oro);
  color: var(--nero);
  font-weight: 600;
  border-radius: 4px;
}
.salta:focus { top: 8px; }
.salta:hover { color: var(--nero); }

/* ---- Barra di navigazione: in basso su telefono, in alto su PC ---- */
html { scroll-padding-bottom: 80px; }
body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
.barra-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--s1);
  border-top: 1px solid var(--oro-scuro);
}
.barra-nav ul { display: flex; max-width: 600px; margin: 0 auto; padding: 0; list-style: none; }
.barra-nav li { flex: 1; }
.barra-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 56px;
  padding: 6px 4px;
  color: var(--testo-soft);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}
.barra-nav a:hover { color: var(--bianco); }
.barra-nav svg { width: 24px; height: 24px; }
.barra-nav a[aria-current="page"] { color: var(--bianco); box-shadow: inset 0 3px 0 var(--oro); }
.barra-nav a[aria-current="page"] svg { color: var(--oro); }
.barra-nav a:focus-visible { outline-offset: -4px; }
/* durante le domande la barra si nasconde per lasciare spazio */
body.in-gioco { padding-bottom: 0; }
body.in-gioco .barra-nav { display: none; }

@media (min-width: 640px) {
  html { scroll-padding-bottom: 0; scroll-padding-top: 72px; }
  body { padding-bottom: 0; }
  .barra-nav { position: sticky; top: 0; bottom: auto; padding-bottom: 0; border-top: 0; border-bottom: 1px solid var(--oro-scuro); }
  .barra-nav ul { justify-content: center; }
  .barra-nav li { flex: 0 1 160px; }
  .barra-nav a { flex-direction: row; gap: 8px; min-height: 52px; }
}

/* ---- Schede delle sfide come link / sfide chiuse ---- */
a.biglietto { text-decoration: none; }
.biglietto.chiusa { cursor: default; background: var(--s1); }
.biglietto.chiusa .num b { color: var(--bianco); }
.biglietto.chiusa .stato-sfida {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--bianco);
  border: 1px dashed var(--oro-scuro);
}
.biglietto.chiusa .nome, .biglietto.chiusa .dettaglio { opacity: 0.75; }

/* ---- Blocchi di testo nelle pagine di gioco (Home, Sfide, Sfida N) ---- */
.testo-pagina { margin: 26px 0; }
.testo-pagina h2 { font-size: 1.35rem; margin: 0 0 0.6em; }
.testo-pagina h2::before {
  content: "";
  display: inline-block;
  width: 0.45em; height: 0.45em;
  margin-right: 0.6em;
  vertical-align: 0.12em;
  background: var(--oro);
  transform: rotate(45deg);
}
.testo-pagina ol { padding-left: 1.5em; }
.testo-pagina li { margin-bottom: 0.4em; }
.in-arrivo { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.in-arrivo li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  margin: 0;
  padding: 12px 14px;
  background: var(--s1);
  border: 1px dashed var(--oro-scuro);
  border-radius: 4px;
}
.in-arrivo b { font-family: var(--titoli); font-size: 1.1rem; font-weight: 600; }
.in-arrivo span { grid-column: 1; font-size: 0.9rem; color: var(--testo-soft); }
.in-arrivo i {
  grid-column: 2; grid-row: 1 / span 2;
  align-self: center;
  padding: 6px 10px;
  border: 1px dashed var(--oro-scuro);
  border-radius: 2px;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nota-centro { text-align: center; }
.altre-sfide { margin: 18px 0; text-align: center; }
.altre-sfide a { display: inline-block; padding: 10px 6px; font-weight: 600; }

@media (max-width: 380px) {
  .titolo-grande { font-size: 2.2rem; }
  .punteggio { font-size: 4.6rem; }
  .domanda { font-size: 1.5rem; }
  .quadratini li { width: 26px; }
  .biglietto { grid-template-columns: 58px 1fr auto; }
  .biglietto::before, .biglietto::after { left: 52px; }
  .biglietto .info { padding-left: 14px; }
  .biglietto .stato-sfida { margin-right: 10px; padding: 6px 10px; }
}

@media (min-width: 640px) {
  .titolo-grande { font-size: 3.2rem; }
  .domanda { font-size: 2rem; }
  .app { padding-top: 16px; }
}

/* Telefoni bassi (740 px di altezza o meno): in partita si toglie il logo e si stringono gli spazi,
   così le cinque risposte entrano senza scorrere (con 10 secondi non c'è tempo per cercarle). */
@media (max-height: 740px) {
  main:has(#schermata-domanda:not([hidden])) #testata { display: none; }
  .barra-alta { margin-top: 2px; }
  .timer { width: 54px; height: 54px; }
  .timer-num { font-size: 1.2rem; }
  .progresso { margin: 8px 0 12px; }
  .domanda { margin-bottom: 12px; }
  .opzioni { gap: 8px; }
  .opzione { min-height: 52px; }
  .esito { margin: 8px 0 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .bobina { animation: none; }
  .timer.urgente { animation: none; }
  .progresso div { transition: none; }
}

/* ---- Pop-up "torna domani" (3 sfide nuove al giorno, 8/11) ---- */
.popup-velo { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, 0.72); display: flex; align-items: center; justify-content: center; padding: 16px; }
.popup { position: relative; width: 100%; max-width: 360px; background: var(--s1); border: 1px solid var(--oro-scuro); padding: 5px; }
.popup::before, .popup::after { content: ""; position: absolute; left: 50%; width: 10px; height: 10px; margin-left: -6px; transform: rotate(45deg); }
.popup::before { top: -6px; background: var(--s1); border: 1px solid var(--oro); }
.popup::after { bottom: -6px; background: var(--oro); }
.popup-dentro { border: 1px solid rgba(242, 182, 50, 0.45); padding: 26px 20px 22px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.popup-divisore { display: flex; align-items: center; gap: 8px; width: 110px; }
.popup-divisore span { flex: 1; height: 1px; background: var(--testo-soft); }
.popup-divisore i { width: 7px; height: 7px; background: var(--oro-chiaro); transform: rotate(45deg); }
.popup-testo { margin: 0; font-family: var(--titoli); font-weight: 600; font-size: 1.3rem; line-height: 1.35; color: var(--bianco); }
.popup-azioni { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.popup-chiudi { background: none; border: 0; color: var(--testo-soft); font: inherit; font-size: 0.85rem; text-decoration: underline; cursor: pointer; padding: 8px; }

/* =====================================================================================
   GRAFICA V2 (8/11/2026, approvata da Andrea dal prototipo cliccabile)
   Tutto più piccolo e più arioso. Barra di navigazione in alto, Home con logo a battuta e due riquadri,
   foto profilo del marchio al posto della C, frase del risultato in doppia cornice, profilo con avatar grande.
   Le regole qui sotto vincono su quelle sopra (vengono dopo). Copia di prima: content/vecchi/prima-grafica-v2/
   ===================================================================================== */
:root {
  --soft: rgba(244, 241, 234, 0.74);
  --tenue: rgba(244, 241, 234, 0.55);
  --filo: rgba(181, 127, 30, 0.42);
}
body { font-size: 15px; }
.app { padding: 8px 16px 24px; }

/* barra di navigazione: in alto, sottile, anche sul telefono */
html { scroll-padding-bottom: 0; scroll-padding-top: 60px; }
body { padding-bottom: 0; }
.barra-nav { position: sticky; top: 0; bottom: auto; padding-bottom: 0; border-top: 0; border-bottom: 1px solid var(--filo); background: var(--nero); }
.barra-nav ul { justify-content: space-around; }
.barra-nav li { flex: 0 1 140px; }
.barra-nav a { flex-direction: row; gap: 6px; min-height: 52px; font-size: 11px; letter-spacing: 0.08em; color: var(--soft); }
.barra-nav svg { width: 16px; height: 16px; }
.barra-nav a[aria-current="page"] { color: var(--oro); box-shadow: inset 0 -2px 0 var(--oro); }

/* testate */
.logo-battuta { width: calc(100% + 32px); max-width: none; margin: -8px -16px 0; }
.v2-testa { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 36px; }
#schermata-inizio .v2-testa { padding-top: 0; }
.foto-marchio { display: block; width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 24px; }
.testata { padding: 32px 0 0; }
.testata .foto-marchio { margin-bottom: 20px; }
main:has(#schermata-risultato:not([hidden])) .testata .foto-marchio { width: 64px; height: 64px; margin-bottom: 8px; }
body.in-gioco .testata { display: none; }
.occhiello { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--soft); }
.v2-titolo { margin: 8px 0 0; font-family: var(--titoli); font-size: 30px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.2; color: var(--oro); text-wrap: balance; }
.v2-titolo-home { font-size: 24px; margin-top: 0; }
.v2-sotto { margin: 10px auto 0; max-width: 300px; font-size: 14px; line-height: 1.55; color: var(--soft); }
.nota { font-size: 12px; line-height: 1.5; color: var(--tenue); }
.motto { margin: 28px 0 0; text-align: center; font-family: var(--titoli); font-style: italic; font-size: 14px; color: rgba(242, 182, 50, 0.8); }

/* Home: i due riquadri */
.riquadri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
.riquadro { display: flex; flex-direction: column; align-items: center; gap: 11px; padding: 22px 10px 18px; background: var(--s1); border: 1px solid var(--filo); color: var(--bianco); text-align: center; text-decoration: none; }
.riquadro.attivo { border-color: rgba(242, 182, 50, 0.6); }
.riquadro:hover { border-color: var(--oro); color: var(--bianco); }
.riquadro-icona { display: block; }
.riquadro-nome { font-family: var(--titoli); font-weight: 600; font-size: 17px; color: var(--oro); }
.riquadro-det { font-size: 12px; line-height: 1.4; color: var(--soft); }
.pill { margin-top: 3px; padding: 6px 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.pill.piena { background: var(--oro); color: var(--nero); }
.pill.vuota { padding: 5px 13px; border: 1px solid rgba(242, 182, 50, 0.6); color: var(--oro); }

/* elenco delle sfide: biglietti più sottili, numero nel rombo */
.elenco-sfide { gap: 10px; margin-top: 36px; }
.biglietto { grid-template-columns: 32px 1fr auto; gap: 16px; min-height: 0; padding: 14px 16px; background: var(--s1); border-color: rgba(242, 182, 50, 0.55); border-radius: 0; }
.biglietto::before, .biglietto::after { display: none; }
.biglietto .num { border-right: 0; }
.biglietto .num b { width: 32px; height: 32px; font-size: 15px; }
.biglietto .num b::before { width: 23px; height: 23px; background: transparent; }
.biglietto .info { padding: 0; }
.biglietto .nome { font-size: 16px; }
.biglietto .dettaglio { font-size: 12px; color: var(--soft); }
.biglietto .stato-sfida { margin-right: 0; padding: 6px 14px; font-size: 11px; border-radius: 0; }
.biglietto.chiusa .stato-sfida { padding: 5px 12px; }

/* pulsanti più bassi */
.btn { min-height: 44px; padding: 10px 18px; font-size: 12px; letter-spacing: 0.1em; }
.btn-piccolo { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-piccolo svg { width: 15px; height: 15px; flex: none; }
.link-piccoli { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px; margin: 14px 0 0; font-size: 12px; }
.link-piccoli .btn-link { padding: 8px 2px; color: var(--soft); font-weight: 500; }

/* partita */
.contatore { padding: 0; background: none; border: 0; font-size: 11px; letter-spacing: 0.18em; color: var(--soft); }
.barra-alta { margin-top: 20px; }
.timer { width: 56px; height: 56px; }
.timer-num { font-size: 20px; color: var(--oro); }
.fotogrammi { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; margin: 18px 0 0; padding: 4px 0; border-block: 2px dotted rgba(181, 127, 30, 0.55); }
.fotogrammi span { height: 10px; background: rgba(244, 241, 234, 0.12); }
.fotogrammi span.fatta { background: var(--oro-scuro); }
.fotogrammi span.ora { background: var(--oro); }
.domanda { margin: 32px 0 0; font-size: 22px; line-height: 1.35; }
.opzioni { margin-top: 24px; gap: 10px; }
.opzione { min-height: 52px; gap: 14px; padding: 10px 14px; border-color: var(--filo); border-radius: 0; font-size: 15px; }
.opzione .lettera { width: 26px; height: 26px; font-size: 12px; color: var(--oro); }
.opzione .lettera::before { width: 20px; height: 20px; background: transparent; }

/* risultato */
.punteggio { margin-top: 8px; font-size: 64px; }
.ris-riga { margin: 10px 0 0; font-size: 13px; color: var(--soft); }
.quadratini { gap: 5px; margin: 14px 0 0; }
.quadratini li { width: 22px; height: 22px; }
.quadratini li svg { width: 12px; height: 12px; }
.cornice-frase { position: relative; margin: 36px 0 0; padding: 5px; border: 1px solid var(--oro-scuro); }
.cornice-frase::before, .cornice-frase::after { content: ""; position: absolute; left: 50%; width: 10px; height: 10px; margin-left: -6px; transform: rotate(45deg); }
.cornice-frase::before { top: -6px; background: var(--nero); border: 1px solid var(--oro); }
.cornice-frase::after { bottom: -6px; background: var(--oro); }
.cornice-frase > div { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 20px 22px; border: 1px solid rgba(242, 182, 50, 0.45); }
.divisore { display: flex; align-items: center; gap: 8px; width: 120px; }
.divisore span { flex: 1; height: 1px; background: rgba(244, 241, 234, 0.7); }
.divisore i { width: 7px; height: 7px; background: var(--oro-chiaro); transform: rotate(45deg); }
.frase { margin: 0; font-size: 23px; }
.prossima { margin: 22px 0 0; padding: 0; background: none; border: 0; text-align: center; }
.prossima-testo { margin: 0; font-size: 13px; font-weight: 500; color: var(--soft); }
.due { display: flex; gap: 10px; margin-top: 18px; }
.due > .btn, #posto-avanti > .btn { flex: 1 1 0; min-width: 0; }
#posto-avanti { display: contents; }
.stato { font-size: 12px; }
.risultato .annuncio { margin: 32px 0; }
.revisione { margin: 30px 0 0; }
.revisione h2 { font-size: 16px; color: var(--oro); text-align: left; }
.rev-lista li { padding: 2px 0 2px 12px; background: none; border: 0; border-left: 2px solid var(--oro-scuro); border-radius: 0; }
.rev-num { display: none; }
.rev-domanda { margin-bottom: 4px !important; font-size: 13px; font-weight: 500; }
.rev-giusta { padding-left: 0; border-left: 0; font-size: 12px; font-weight: 600; color: var(--soft); }
.rev-tua { font-size: 12px; }

/* profilo: avatar grande, nome d'arte, punti */
.box-scheda:has(.scheda-profilo) { margin: 0; padding: 0; background: none; border: 0; }
.scheda-profilo { display: flex; flex-direction: column; align-items: center; padding-top: 40px; text-align: center; }
.scheda-anello { width: 164px; height: 164px; padding: 6px; border: 1px solid var(--oro-scuro); border-radius: 50%; }
.scheda-anello img { display: block; width: 150px; height: 150px; border-radius: 50%; }
.scheda-nome { margin: 24px 0 0; font-size: 30px; font-weight: 700; line-height: 1.15; color: var(--oro); }
.scheda-profilo .divisore { width: 110px; margin-top: 14px; }
.scheda-totale { margin: 14px 0 0; font-family: var(--titoli); font-size: 40px; font-weight: 700; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.scheda-profilo .occhiello { margin-top: 6px; }
.scheda-dati { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; margin-top: 38px; }
.scheda-dati div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px; border: 1px solid var(--filo); }
.scheda-dati b { font-family: var(--titoli); font-size: 20px; font-weight: 600; color: var(--oro); }
.scheda-dati span { font-size: 11px; color: var(--soft); }
.scheda-profilo .link-piccoli { margin-top: 28px; }

/* testi lunghi in fondo alle pagine (Come funziona e simili) */
.testo-pagina { margin: 32px 0; padding-top: 20px; border-top: 1px solid rgba(181, 127, 30, 0.3); }
.testo-pagina h2 { font-size: 17px; color: var(--oro); }
.testo-pagina p, .testo-pagina li { font-size: 14px; line-height: 1.6; color: var(--soft); }
.annuncio { margin: 32px 0; }
.social { margin-top: 32px; }
.social-tasti a { min-height: 38px; padding: 0 16px; font-size: 13px; }

@media (max-width: 380px) {
  .punteggio { font-size: 56px; }
  .domanda { font-size: 20px; }
  .biglietto { grid-template-columns: 32px 1fr auto; gap: 12px; padding: 12px; }
}
@media (min-width: 640px) {
  .domanda { font-size: 24px; }
  .app { padding-top: 8px; }
}
/* telefoni bassi: in partita si stringono gli spazi, così le cinque risposte entrano senza scorrere */
@media (max-height: 740px) {
  .barra-alta { margin-top: 8px; }
  .fotogrammi { margin-top: 10px; }
  .domanda { margin-top: 16px; }
  .opzioni { margin-top: 14px; gap: 8px; }
  .opzione { min-height: 48px; }
}
.scheda-dati b, .riquadro-nome, .v2-titolo, .scheda-nome, .occhiello { font-variant-numeric: lining-nums; }
/* Barra in alto con 4 voci (8/11): sui telefoni stretti icona sopra, testo sotto, così CineChallenge ci sta */
@media (max-width: 520px) {
  .barra-nav ul { justify-content: stretch; }
  .barra-nav li { flex: 1 1 0; min-width: 0; }
  .barra-nav a { flex-direction: column; gap: 2px; min-height: 54px; padding: 6px 2px; font-size: 10px; letter-spacing: 0.03em; }
  .barra-nav svg { width: 18px; height: 18px; }
  .barra-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--oro); }
}