/* =====================================================================
   daPRETTE — quello che il prototipo non aveva

   Il prototipo era una vetrina: dati finti, sempre pieni, sempre pronti.
   Un'app vera passa la maggior parte del tempo in stati che lì non
   esistevano — sta caricando, non c'è ancora niente, la rete è caduta,
   il socio è nuovo e non ha comprato nulla. Questo file aggiunge solo
   quelli, senza toccare una riga di stile.css.
   ===================================================================== */

/* `hidden` deve vincere sempre.

   Sembra pedante e invece è un bug vero, trovato aprendo l'app in un
   browser: `.gate` dichiara `display:flex`, che ha la stessa specificità
   dell'attributo `hidden` ma viene dopo — quindi la schermata di accesso
   restava distesa sopra tutta l'app, invisibile perché vuota ma capace
   di intercettare ogni tocco. Da fuori sembrava un'app morta: si vedeva
   la home, nessun bottone rispondeva. */
[hidden]{ display:none !important }

/* ---------------------------------------------------------------- accesso */

.gate{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:calc(26px + var(--sat)) 22px calc(26px + var(--sab));
  background:
    radial-gradient(circle at 15% 0%, rgba(190,219,232,.12), transparent 30rem),
    radial-gradient(circle at 85% 100%, rgba(227,119,80,.14), transparent 28rem),
    var(--ink);
  overflow-y:auto;
}
.gateInner{ width:100%; max-width:420px; }
.gateLogo{ width:88px; display:block; margin:0 auto 26px; opacity:.96 }

.gateStep{ display:none; animation:gateIn .32s cubic-bezier(.2,.7,.3,1) both }
.gateStep.on{ display:block }
@keyframes gateIn{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }

.gateStep .display{ font-size:clamp(28px,8vw,36px); line-height:1.05; margin:0 0 12px }
.gateP{ color:var(--muted); font-size:14.5px; line-height:1.5; margin:0 0 22px }
.gateP b{ color:var(--text); white-space:nowrap }
.gateHint{ margin-top:14px; text-align:center }

.gateErr{
  margin:10px 0 0; padding:11px 13px; border-radius:var(--r-s);
  background:rgba(227,119,80,.14); border:1px solid rgba(227,119,80,.4);
  color:#ffd9c9; font-size:13.5px; line-height:1.45;
}

.btnMain.wide, .btnGhost.wide{ width:100%; margin-top:16px }
.btnGhost.wide{ margin-top:9px }
.btnMain[disabled]{ opacity:.5; pointer-events:none }

/* Il codice a sei cifre: cifre grandi e distanziate, perché si legge da
   una notifica e si ribatte a memoria. */
.codeInput{
  font-family:var(--tnum, inherit);
  font-size:30px !important; letter-spacing:.34em; text-align:center;
  padding-left:.34em !important;
}

/* Il riquadro del bentornato: i punti che una persona ha già sono la
   cosa più convincente che possiamo mostrarle, quindi si mostrano
   grandi e prima di qualunque richiesta. */
.bentornatoCard{
  text-align:center; padding:22px 18px 18px; margin:0 0 20px;
  border:1px solid rgba(232,193,90,.32); border-radius:var(--r-l);
  background:linear-gradient(150deg, rgba(232,193,90,.14), rgba(227,119,80,.08) 70%);
}
.bentornatoCard .pts{ display:block; font-size:46px; line-height:1 }
.bentornatoCard .ptsLbl{ display:block; margin-top:5px }
.bTess{ margin:14px 0 0; font-size:12.5px; color:var(--muted); letter-spacing:.04em }
.bTess b{ color:var(--cream); font-weight:700 }

/* ---------------------------------------------------------------- stati */

/* Lo scheletro grigio mentre arrivano i dati. Meglio di uno spinner:
   non fa saltare il contenuto quando compare, perché occupa già il posto
   giusto. */
.pending{
  display:block; border-radius:var(--r-s);
  background:linear-gradient(90deg,
    rgba(248,241,178,.05) 25%, rgba(248,241,178,.11) 37%, rgba(248,241,178,.05) 63%);
  background-size:400% 100%;
  animation:onda 1.3s ease-in-out infinite;
  color:transparent !important;
}
@keyframes onda{ from{background-position:100% 0} to{background-position:0 0} }
.pendingRow{ height:58px; margin-bottom:8px }

.vuoto{
  padding:22px 18px; text-align:center;
  color:var(--muted); font-size:14px; line-height:1.55;
}
.vuoto b{ display:block; color:var(--text); font-size:15px; margin-bottom:5px }

/* La riga che compare quando la connessione non c'è. Dice da quando
   sono vecchi i dati, invece di "errore": un saldo di due minuti fa è
   perfettamente utile, basta saperlo. */
.offline{
  position:fixed; left:0; right:0; z-index:40;
  top:0; padding:calc(6px + var(--sat)) 14px 6px;
  background:var(--surface-3); border-bottom:1px solid var(--line);
  color:var(--muted); font-size:12.5px; text-align:center;
  transform:translateY(-100%); transition:transform .25s ease;
}
.offline.on{ transform:none }

/* ---------------------------------------------------------------- buoni */

.buono{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:13px 14px; border:0; text-align:left; cursor:pointer;
  background:linear-gradient(135deg, rgba(232,193,90,.16), rgba(227,119,80,.10));
  border:1px solid rgba(232,193,90,.34); border-radius:var(--r-m);
  color:var(--text); font:inherit;
}
.buono .val{
  flex:none; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; font-weight:700; font-size:15px;
  background:rgba(232,193,90,.2); color:var(--gold);
}
.buono .bt{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.buono .bt b{ font-size:14.5px }
.buono .bt span{ font-size:12.5px; color:var(--muted) }
.buono.usato{ opacity:.55 }

/* I nomi in classifica sono soprannomi scelti dai clienti: uno lungo
   manda il suo gradino fuori asse rispetto agli altri due. Due righe
   fisse tengono i tre piedistalli allineati comunque. */
.pod .nm{ min-height:2.5em; display:flex; align-items:flex-end; justify-content:center }
.pod .vl{ min-height:1.2em }

/* ---------------------------------------------------------------- varie */

.rowList .row[role="button"]{ cursor:pointer }
.rowList .row[role="button"]:active{ background:rgba(248,241,178,.05) }

.movGiorno{
  padding:14px 2px 6px; font-size:12px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted);
}

/* Un movimento senza righe articolo — capita per gli scontrini più
   vecchi — non deve sembrare rotto. */
.row .txt span:empty::before{ content:"Acquisto"; }

@media (prefers-reduced-motion: reduce){
  .pending{ animation:none }
  .gateStep{ animation:none }
}

/* ------------------------------------------------- l'immagine del profilo */

/* Il cerchio scuro sotto l'ingrediente non è decorazione: i disegni
   hanno il fondo trasparente e dentro ci sono colori chiari (mozzarella,
   aglio, zolletta) che sulla scheda chiara sparirebbero. */
.av img, .avGrande img, .avScelta img{
  width:100%; height:100%; border-radius:50%; display:block;
}
.av img.ingr, .avGrande img.ingr, .avScelta img.ingr{
  object-fit:contain; transform:scale(1.06);
}
.av img.foto, .avGrande img.foto, .avScelta img.foto{ object-fit:cover }
.av.conImg{ background:#0d0910 !important }

.avCard{
  display:flex; align-items:center; gap:14px; padding:14px;
  border:1px solid var(--line); border-radius:var(--r-m); background:var(--surface);
}
.avGrande{
  flex:none; width:72px; height:72px; border-radius:50%; background:#0d0910;
  display:grid; place-items:center; overflow:hidden;
}
.avTesto{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.avTesto b{ font-size:14.5px }
.avTesto span{ font-size:12px; color:var(--muted) }
.avAzioni{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap }
.avBtn{
  border:1px solid var(--line); background:var(--surface-2); color:var(--cream);
  border-radius:999px; padding:8px 14px; font-size:12.5px; font-weight:700;
}
.avBtn:active{ background:rgba(248,241,178,.07) }
.avBtn.ghost{ background:transparent; color:var(--muted) }

/* Sei per riga: su uno schermo da 360 px sono cerchi da 46, che è la
   misura sotto la quale un dito comincia a sbagliare bersaglio. */
.avGriglia{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:9px; margin-top:12px;
}
.avScelta{
  aspect-ratio:1; border-radius:50%; background:#0d0910; border:2px solid transparent;
  padding:0; overflow:hidden; position:relative;
}
.avScelta[aria-pressed="true"]{ border-color:var(--gold) }
.avScelta:active{ transform:scale(.94) }
.avScelta.bloccato{ opacity:.32 }
.avScelta.bloccato::after{
  content:"🔒"; position:absolute; inset:0; display:grid; place-items:center;
  font-size:14px; background:rgba(13,9,16,.35);
}
.avRariNota{ margin-top:16px }
.avGriglia.rari{ grid-template-columns:repeat(6, 1fr) }
.avGriglia.rari .avScelta{ border-color:rgba(232,193,90,.35) }
.avGriglia.rari .avScelta[aria-pressed="true"]{ border-color:var(--gold) }

/* Il bottone del banco, in classifica. Piccolo e grigio: serve a chi
   lavora lì, non deve diventare la cosa più visibile della riga. */
.rankRow .banco{
  flex:none; border:1px solid var(--line); background:transparent; color:var(--muted);
  border-radius:999px; padding:4px 9px; font-size:10.5px; font-weight:700;
}

/* ------------------------------------------------- la strada veloce */

.regStep.veloce{ display:none }
.regStep.veloce.on{ display:block }
.veloceIntro{ font-size:14px; color:var(--muted); margin:0 0 16px; line-height:1.5 }
.btnGhost.larga{ width:100%; margin-top:10px }

/* La riga che ricorda di finire. Sta sopra tutto e non si chiude: non è
   una pubblicità, è la spiegazione del perché il saldo è fermo. Senza,
   quel saldo sembra un guasto — ed è la prima cosa che uno va a dire al
   banco. */
.daCompletare{
  /* Sta nel telaio come la barra dei pulsanti, subito sopra: non è
     sovrapposta a niente, non copre la scritta in cima, e resta sotto
     il pollice. */
  flex:none; display:flex; align-items:center; gap:12px;
  padding:10px 14px;
  background:linear-gradient(180deg, rgba(232,193,90,.16), rgba(232,193,90,.07));
  border-top:1px solid rgba(232,193,90,.28);
}
.daCompletare .dcT{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px }
.daCompletare .dcT b{ font-size:13px; color:var(--cream) }
.daCompletare .dcT span{ font-size:11.5px; color:var(--muted) }
.daCompletare button{
  flex:none; border:none; border-radius:999px; padding:9px 16px;
  background:var(--gold); color:#1a1206; font-size:12.5px; font-weight:700;
}
.daCompletare button:active{ transform:scale(.96) }

/* L'anteprima nella riga «Immagine profilo»: piccola, a destra, e con
   il fondo scuro sotto — gli ingredienti chiari (mozzarella, aglio,
   zolletta) su una scheda chiara sparirebbero. */
.avAnteprima{
  flex:none; width:38px; height:38px; border-radius:50%;
  background:#0d0910; display:grid; place-items:center; overflow:hidden;
}

/* ---------------------------------------------------- chiedere le notifiche */

.ntIntro{ margin:0 0 14px; font-size:13.5px; color:var(--muted); line-height:1.5 }
.ntPremio{
  margin-top:14px; padding:14px; border-radius:var(--r-m);
  display:flex; align-items:center; gap:12px;
  background:linear-gradient(135deg, rgba(232,193,90,.18), rgba(232,193,90,.06));
  border:1px solid rgba(232,193,90,.35);
}
.ntPremio b{
  font-family:"DaPRETTE","Moderat",sans-serif; font-size:30px; color:var(--gold);
  line-height:1;
}
.ntPremio span{ font-size:13px; color:var(--cream); line-height:1.35 }
.sheetFoot.ntFoot{ display:flex; flex-direction:column; gap:9px }
.sheetFoot.ntFoot button{ width:100% }

/* ---------------------------------------------------- la schermata di
   installazione. Sta prima dell'accesso: dal browser non si entra.

   Stessa aria del gate — stesso fondo, stessa larghezza, stesso logo —
   perché è la prima cosa che si vede dell'app, e deve sembrare l'app,
   non una pagina di servizio scritta di fretta. */
.installa{
  position:fixed; inset:0; z-index:70;
  display:flex; align-items:center; justify-content:center;
  padding:calc(26px + var(--sat)) 22px calc(26px + var(--sab));
  background:
    radial-gradient(circle at 15% 0%, rgba(190,219,232,.12), transparent 30rem),
    radial-gradient(circle at 85% 100%, rgba(227,119,80,.14), transparent 28rem),
    var(--ink);
  overflow-y:auto;
}
.installaInner{ width:100%; max-width:420px }
.installaInner .display{ font-size:clamp(28px,8vw,36px); line-height:1.05; margin:0 0 12px }

/* I passi numerati. Il numero è dentro un tondo e non davanti al testo:
   con la fila davanti al banco si guarda la forma, non si legge. */
.passiInstalla{ list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:2px }
.passiInstalla li{
  display:flex; gap:13px; align-items:flex-start;
  padding:13px 14px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-m); margin-bottom:8px;
}
.passiInstalla li .n{
  flex:none; width:24px; height:24px; border-radius:50%;
  background:var(--cream); color:#1a1206; font-weight:700; font-size:12px;
  display:grid; place-items:center; margin-top:1px;
}
.passiInstalla li .t{ font-size:14.5px; line-height:1.45; color:var(--text) }
.passiInstalla li .t b{ color:var(--cream) }
.passiInstalla li .t span{ display:block; font-size:12.5px; color:var(--muted); margin-top:2px }

.qrBlocco{ margin-top:22px; text-align:center }
.qrBlocco img{
  width:180px; height:180px; border-radius:14px; background:#fff; padding:10px;
  display:block; margin:0 auto 12px;
}

/* Una riga che si tocca ma non è un bottone grosso: sotto il campo del
   numero, per chi quel numero non ce l'ha più. */
.linkRiga{
  display:block; width:100%; margin-top:12px; padding:6px;
  background:none; border:0; color:var(--muted);
  font-size:13px; text-decoration:underline; text-underline-offset:3px;
}
.linkRiga:active{ color:var(--cream) }

/* Il saldo che c'è ma non si può ancora spendere. */
.sospeso{
  /* Una riga sola su un telefono stretto: in maiuscolo e spaziata
     andava a capo, e una frase che va a capo dentro una pillola
     sembra un errore, non un avviso. */
  display:block; margin:10px 0 0;
  font-size:12.5px; font-weight:700; line-height:1.35;
  color:#F2D68A; background:rgba(232,193,90,.14);
  border:1px solid rgba(232,193,90,.34); border-radius:var(--r-s);
  padding:8px 12px;
}


/* =====================================================================
   Le figure che uscivano enormi — 10 settembre 2026, sera

   Segnalato da Andrea aprendo l'app: nella pagina Classifica le icone
   delle gare e le medaglie del podio erano «rotte, enormi»; nei Premi
   la freccia sotto il saldo era gigante.

   Non erano immagini sbagliate: erano regole di stile mai scritte.
   Il markup e il codice sono arrivati con classi nuove (.seg img,
   .plinth svg, .scopri) e il foglio di stile non le ha mai conosciute.
   Un <svg> senza misura, per il browser, NON è piccolo: vale 300×150 px.
   Un <img> senza misura prende la dimensione vera del file — e i nostri
   PNG sono grandi. Nessun errore, nessun avviso in console: si vede solo
   aprendo l'app, che è esattamente il tipo di difetto che ci è già
   costato due giri.
   ===================================================================== */

/* La rete di sicurezza. Vale solo dove NON c'è una regola più precisa:
   una qualsiasi `.classe svg` pesa di più e vince comunque, in questo
   file come in stile.css. Serve a far sì che la prossima icona
   dimenticata esca piccola invece che alta mezza schermata. */
svg{ width:16px; height:16px }

/* ---------- Classifica: le linguette delle gare ---------- */
/* .seg è un bottone di solo testo nato prima delle icone: senza flex
   l'immagine e il nome non stavano nemmeno sulla stessa riga. */
.seg{ display:inline-flex; align-items:center; gap:7px }
.seg img{ width:19px; height:19px; object-fit:contain; flex:none }
.seg svg{ width:17px; height:17px; flex:none }

/* ---------- Classifica: le medaglie del podio ---------- */
/* Il gradino aveva `place-items:center` in griglia: medaglia e numero
   finivano incolonnati, e con la medaglia a 300px il podio esplodeva.
   Affiancati stanno anche nel gradino più basso (38px). */
.pod .plinth{ display:flex; align-items:center; justify-content:center; gap:7px }
.pod .plinth svg{ width:17px; height:17px; flex:none }
.pod.p1 .plinth svg{ width:20px; height:20px }

/* ---------- Premi: «Scopri i traguardi» ---------- */
/* Andrea: «chiara, al centro e più piccola, e comunque non invitante».
   Da freccia nuda a pillola: si legge come una cosa da toccare, non
   come un disegno finito lì per sbaglio. */
.scopri{
  display:flex; align-items:center; justify-content:center; gap:7px;
  width:auto; margin:16px auto 0; padding:8px 15px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16);
  border-radius:99px; color:var(--cream);
  font-size:11.5px; font-weight:700; letter-spacing:.06em;
  transition:background .16s ease, border-color .16s ease;
}
.scopri:active{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3) }
.scopri svg{
  width:13px; height:13px; flex:none;
  stroke:currentColor; fill:none; stroke-width:2.2;
  transition:transform .22s ease;
}
/* Aperta, la freccia si gira: dice da sola che quel tocco richiude. */
.scopri[aria-expanded="true"] svg{ transform:rotate(180deg) }

/* La scala dentro la scheda dei punti: .ladder nasce per stare a tutta
   pagina e porta il margine laterale suo, che qui si somma a quello
   della scheda e stringe le righe di 40px. */
.ladder.trg{ padding:18px 0 2px }
.ladder.trg .step{ padding-bottom:16px }
.ladder.trg .step:last-child{ padding-bottom:0 }

/* ---------- Premi: il saldo al centro ---------- */
/* Solo qui: in home la stessa riga sta a sinistra dentro la scheda del
   bentornato, e va bene com'è. */
#s-premi .ptsRow{ justify-content:center }
#s-premi .sospeso{ text-align:center }
#s-premi .barMeta{ font-size:11px }

/* ---------- Premi: il box che sbircia ---------- */
/* «Giusto per far capire che lì dentro c'è qualcosa da mostrare»
   (Andrea). La scheda si allunga di 24px e torna, due volte, e la
   freccia scende con lei. Si ferma da sola, e non riparte più per chi
   i traguardi li ha già aperti almeno una volta: un invito che si
   ripete a ogni apertura non è un invito, è un tic. */
@keyframes sbircia{
  0%,100%{ padding-bottom:18px }
  45%    { padding-bottom:42px }
}
@keyframes sbirciaFreccia{
  0%,100%{ transform:translateY(0) }
  45%    { transform:translateY(5px) }
}
#s-premi .loyalCard.invita{ animation:sbircia 1.7s ease-in-out .7s 2 both }
#s-premi .loyalCard.invita .scopri svg{ animation:sbirciaFreccia 1.7s ease-in-out .7s 2 both }

/* Chi ha chiesto al telefono di non animare niente, non lo animiamo. */
@media (prefers-reduced-motion: reduce){
  #s-premi .loyalCard.invita,
  #s-premi .loyalCard.invita .scopri svg{ animation:none }
}

/* ---------- La conferma del riscatto: «1.240 → 240» ---------- */
/* Stessa storia della freccia dei traguardi: markup nuovo, stile mai
   scritto. Qui la freccia enorme non l'ha ancora vista nessuno solo
   perché senza buoni caricati il riscatto non si apre. */
.rsConti{
  display:flex; align-items:center; justify-content:center; gap:16px;
  text-align:center;
}
.rsConti > div{ display:flex; flex-direction:column; gap:4px; min-width:74px }
.rsConti .eyebrow{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
.rsConti b{ font-size:23px; font-weight:700; color:var(--cream); line-height:1 }
.rsConti > div:last-child b{ color:var(--coral) }
.rsFreccia{
  width:20px; height:20px; flex:none;
  stroke:var(--muted); fill:none; stroke-width:2;
}


/* =====================================================================
   La porta: la freccia sul bordo — 10 settembre 2026, sera

   Andrea: «le schermate che spiegano come installare l'app non sono
   chiarissime […] magari con delle frecce che indicano le estremità
   del browser per far capire dove guardare».

   La pagina della porta è a tutto schermo: il suo bordo È il bordo del
   browser. Una freccia disegnata in basso a destra punta quindi il
   «•••» vero di Safari, non un disegno di Safari. Quattro posizioni,
   scelte da `disegnaInstalla()` in base a telefono, browser e versione.
   ===================================================================== */
.frecciaBordo{
  position:fixed; z-index:71; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  color:var(--cream);
  animation:frecciaBatte 1.4s ease-in-out infinite;
}
.frecciaBordo .qui{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cream); background:rgba(232,193,90,.18);
  border:1px solid rgba(232,193,90,.45); border-radius:99px; padding:3px 9px;
}
.frecciaBordo svg{
  width:30px; height:50px; stroke:currentColor; fill:none; stroke-width:2.6;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.6));
}

/* In basso: sopra la barra di casa dell'iPhone, mai sotto. */
.frecciaBordo.basso-destra,
.frecciaBordo.basso-centro,
.frecciaBordo.basso-sinistra{ bottom:calc(env(safe-area-inset-bottom, 0px) + 10px) }
.frecciaBordo.basso-destra  { right:18px }
.frecciaBordo.basso-sinistra{ left:18px }
.frecciaBordo.basso-centro  { left:50%; transform:translateX(-50%) }

/* In alto: la freccia si gira e la parola sta sotto di lei. */
.frecciaBordo.alto-destra{
  top:calc(env(safe-area-inset-top, 0px) + 8px); right:16px;
  flex-direction:column-reverse;
  animation-name:frecciaBatteSu;
}
.frecciaBordo.alto-destra svg{ transform:rotate(180deg) }

/* Un battito piccolo verso il bordo: attira l'occhio senza agitarsi. */
@keyframes frecciaBatte{
  0%,100%{ translate:0 0 } 50%{ translate:0 6px }
}
@keyframes frecciaBatteSu{
  0%,100%{ translate:0 0 } 50%{ translate:0 -6px }
}
@media (prefers-reduced-motion: reduce){ .frecciaBordo{ animation:none } }

/* Con la freccia in basso, la pagina non deve finirci sotto: un po'
   d'aria in fondo alla porta. */
.installa{ padding-bottom:calc(88px + var(--sab)) }

/* Il primo passo è quello con la freccia: si distingue dagli altri, così
   l'occhio va dal riquadro al bordo e dal bordo al riquadro. */
.passiInstalla li:first-child{ border-color:rgba(232,193,90,.45) }
.passiInstalla li:first-child .n{ box-shadow:0 0 0 3px rgba(232,193,90,.22) }


/* =====================================================================
   Le condizioni, sulla schermata del codice — 11 settembre 2026

   Andrea: «quando uno si registra per la prima volta o passa per la
   prima volta dalla vecchia app alla nuova è bene che gli si richieda
   di accettare la privacy policy, il regolamento, il trattamento dei
   dati […] io lo metterei nella schermata di conferma del codice
   ricevuto per whatsapp, non ti fa procedere oltre se non hai accettato
   tutte le condizioni».

   Un filetto sopra e il titolino: separano le condizioni dal campo del
   codice senza aggiungere un riquadro dentro un riquadro. Le tre righe
   sono attaccate fra loro — si leggono come un blocco solo, che è
   quello che sono.
   ===================================================================== */
.condizioni{
  margin-top:20px; padding-top:16px;
  border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:8px;
  text-align:left;
}
.condTitolo{
  margin:0 0 2px; font-size:10px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
/* Più compatte delle altre: qui ce ne sono tre di fila, e con la
   spaziatura piena la schermata diventa un modulo. */
.condizioni .consent{ padding:11px 12px; gap:11px }
.condizioni .consent .ct b{ font-size:12.5px; margin-bottom:2px }
.condizioni .consent .ct span{ font-size:11px; line-height:1.45 }
/* Il link alla pagina sta su una riga sua, in fondo al riquadro.

   Non è estetica: con il link in mezzo alla frase, il centro del
   riquadro — cioè dove il dito arriva per spuntare — cadeva PROPRIO
   sopra il link, e il tocco apriva la pagina invece di accettare.
   L'ha trovato il giro di prova, che tocca sempre al centro; un cliente
   alla cassa se lo sarebbe trovato addosso come «la casella non si
   spunta». Così il bersaglio grande è «accetto» e il link è un
   bersaglio piccolo, voluto, e a capo. */
.condizioni .condLink{
  display:inline-block; margin-top:7px; padding:3px 0;
  color:var(--cream); font-size:11px; font-weight:700;
  text-decoration:underline; text-underline-offset:3px;
}
.condizioni .req{ color:var(--coral) }

/* Il bottone spento non basta: chi tocca e non succede niente pensa che
   l'app sia rotta. Questa riga compare solo dopo il primo tocco a vuoto
   e dice cosa manca. */
.condMancano{
  margin:10px 0 0; font-size:11.5px; line-height:1.45;
  color:#F2D68A; text-align:center;
}
/* L'asterisco e «facoltativo» accanto al titolo, non sotto.

   `stile.css` dice `.consent .ct span{display:block}` — giusto per la
   riga di spiegazione, che è uno span — ma prende anche l'asterisco e
   l'etichetta, che stanno DENTRO il titolo: uscivano su una riga tutta
   loro, e un asterisco da solo a capo sembra un errore di stampa. Serve
   un selettore che pesi di più di quello, non uno che venga dopo. */
.condizioni .consent .ct b span{ display:inline; font-size:inherit }
.condizioni .consent .ct b .req{ color:var(--coral) }
.condizioni .consent .ct b .opt{
  color:var(--leaf); font-size:9px; letter-spacing:.12em; margin-left:6px;
}

/* L'icona dei punti dentro il messaggino: prende il posto che aveva la
   moneta, e quando non c'entra niente non occupa spazio. */
.toast .toastIco{ flex:none; display:grid; place-items:center; width:34px; height:34px }
.toast .toastIco svg{ width:34px; height:34px }

/* =====================================================================
   IL RISCATTO SENZA COUPON — DOMANDE-58, 13 settembre 2026

   Andrea non aspetta il tecnico TCPOS: si parte pubblicizzando l'app
   adesso, e il premio si usa davanti allo staff invece di passare da un
   codice a barre. Due pezzi nuovi: il trascinamento dentro il pop-up di
   conferma, e la schermata a tutto schermo che vale un minuto.
   ===================================================================== */

/* Il bottone solo dentro il pop-up: senza «Sì, riscatta» accanto,
   «Non adesso» resta da solo e deve prendersi tutta la riga. */
.couponFoot .later.larga{ flex:1 }

/* ---------- IL TRASCINAMENTO ----------
   touch-action:none è obbligatorio e non è una rifinitura: senza,
   iOS interpreta il movimento del dito come scorrimento della pagina
   e il pointermove non arriva mai. */
.swipe{
  position:relative; margin-top:16px; height:56px; border-radius:99px;
  background:rgba(255,255,255,.06); border:1px solid var(--line-strong);
  overflow:hidden; touch-action:none;
  user-select:none; -webkit-user-select:none;
}
.swipeFill{
  position:absolute; inset:0; width:56px;
  background:rgba(66,114,89,.55); transition:width .18s ease;
}
.swipe.dragging .swipeFill{ transition:none }
.swipeTxt{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); padding-left:44px; pointer-events:none;
}
.knob{
  position:absolute; top:4px; left:4px; width:48px; height:48px; border-radius:50%;
  background:var(--cream); display:grid; place-items:center; cursor:grab;
  box-shadow:0 6px 18px rgba(0,0,0,.45); transition:left .18s ease;
}
.swipe.dragging .knob{ transition:none; cursor:grabbing }
/* La misura esplicita, non la rete di sicurezza a 16px: qui l'icona è
   dentro una pastiglia da 48 e a 16 sparirebbe. */
.knob svg{
  width:22px; height:22px; stroke:#1a1206; fill:none;
  stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- LA SCHERMATA DEL PREMIO ----------
   Sta dentro .device come le altre tendine, non su `body`: l'app è
   larga al massimo 432px anche su un computer, e un overlay su body
   coprirebbe lo schermo intero lasciando il telefono finto sotto. */
.premio{
  position:absolute; inset:0; z-index:95;
  padding:24px 20px calc(20px + var(--sab));
  background:linear-gradient(168deg,#243a2e,#12101a 62%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s;
}
.premio.open{ opacity:1; visibility:visible }
.premio .eyebrow{ color:#8fd3af }

.pmValore{
  font-family:"DaPRETTE","Moderat",sans-serif; text-transform:uppercase;
  color:var(--cream); line-height:.9; margin-top:18px;
  font-size:84px; letter-spacing:-.02em;
}
.pmNome{ margin:16px 0 0; font-size:15px; font-weight:700; color:#fff }
.pmOra{ margin:5px 0 0; font-size:12px; color:rgba(255,255,255,.55) }

.pmTimer{ margin-top:26px; width:100%; max-width:220px }
.pmBarra{ height:5px; border-radius:99px; background:rgba(255,255,255,.14); overflow:hidden }
.pmBarra span{
  display:block; height:100%; width:100%; background:#8fd3af;
  transition:width 1s linear, background .4s ease;
}
.pmBarra.urgente span{ background:var(--coral) }
.pmSecondi{ margin:10px 0 0; font-size:13px; color:rgba(255,255,255,.7) }
.pmSecondi b{ color:#fff }
.pmBarra.urgente + .pmSecondi b{ color:var(--coral) }

.pmNota{
  margin:22px 0 0; font-size:11px; color:rgba(255,255,255,.42);
  line-height:1.5; max-width:26ch;
}

/* Scaduto: cambia il fondo, perché il verde vuol dire «valido» e
   lasciarlo sarebbe la cosa sbagliata da far vedere a un operatore
   che guarda il telefono da mezzo metro. */
.premio.scaduto{ background:linear-gradient(168deg,#3a2a24,#14101a 62%) }
.premio.scaduto .pmValore{ color:rgba(255,255,255,.28) }
.premio.scaduto .eyebrow{ color:var(--muted) }
.pmScaduto{ display:flex; flex-direction:column; align-items:center; gap:9px; margin-top:22px }
.pmScaduto h4{
  margin:0; font-family:"DaPRETTE","Moderat",sans-serif; text-transform:uppercase;
  font-size:19px; color:var(--coral);
}
.pmScaduto p{
  margin:0; font-size:12.5px; color:rgba(255,255,255,.6);
  line-height:1.55; max-width:28ch;
}

.pmChiudi{
  margin-top:26px; padding:12px 26px; border-radius:99px;
  border:1px solid rgba(255,255,255,.3); color:#fff;
  font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
}

/* Schermi bassi: il valore enorme e il conto alla rovescia non devono
   spingere il bottone fuori dallo schermo. */
@media (max-height:680px){
  .pmValore{ font-size:64px; margin-top:10px }
  .pmTimer{ margin-top:18px }
  .pmNota{ margin-top:14px }
  .pmChiudi{ margin-top:18px }
}

/* «Punti» o «Timbri» sopra i due numeri: senza, «Adesso 10 → Dopo 0»
   su una tessera piena non dice di cosa sta parlando. */
.rsChe{ display:block; text-align:center; margin-bottom:8px; color:var(--muted) }

/* «Se hai difficoltà, chiedi allo staff» sulla schermata di
   installazione (Andrea, 13 settembre 2026). Più visibile di una nota
   di servizio — chi è in difficoltà non legge il grigio piccolo — ma
   senza rubare la scena ai tre passi, che restano la cosa da fare. */
.aiutoStaff{
  margin:16px auto 0; max-width:30ch;
  padding:10px 14px; border-radius:var(--r-m);
  border:1px solid rgba(248,241,178,.22); background:rgba(248,241,178,.06);
  color:var(--cream); font-size:12.5px; line-height:1.45; text-align:center;
}