/* Per cambiare i colori basta toccare queste righe. */
:root {
  --fondo: #0e0c13;
  --testo: #f6f3f8;
  --testo-tenue: rgba(246, 243, 248, .62);
  --accento-1: #ff5c8a;
  --accento-2: #ff9d6c;
  --sfumatura: linear-gradient(135deg, var(--accento-1), var(--accento-2));
  --tasto: rgba(255, 255, 255, .075);
  --bordo: rgba(255, 255, 255, .11);
  --errore: #ff8f8f;
  /* Il tasto si stringe sui telefoni bassi: tutto resta in una schermata sola. */
  --lato: min(74px, 10dvh, 21vw);
  color-scheme: dark;
}

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

html { height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  min-height: 100dvh;
  display: flex;
  background:
    radial-gradient(60vmax 46vmax at 12% -8%, rgba(255, 92, 138, .20), transparent 62%),
    radial-gradient(54vmax 44vmax at 104% 106%, rgba(255, 157, 108, .14), transparent 60%),
    var(--fondo);
  color: var(--testo);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

main {
  margin: auto;
  width: 100%;
  max-width: 372px;
  padding: max(16px, env(safe-area-inset-top)) 24px max(14px, env(safe-area-inset-bottom));
  text-align: center;
}

section { display: flex; flex-direction: column; align-items: center; animation: entra .3s ease-out both; }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } }

/* ── La barra dei passaggi ── */
.passi {
  display: flex; gap: 8px;
  margin: 0 0 clamp(14px, 3.4dvh, 34px); padding: 0;
  list-style: none; counter-reset: passo;
}
.passi li {
  flex: 1; counter-increment: passo;
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  text-align: left; white-space: nowrap;
  color: rgba(246, 243, 248, .38);
  transition: color .3s ease;
}
.passi li::before {
  content: ""; display: block; height: 3px; border-radius: 3px; margin-bottom: 8px;
  background: rgba(255, 255, 255, .13);
  background-size: 200% 100%;
  transition: background-color .3s ease;
}
.passi li span::before { content: counter(passo) " · "; }
.passi li.fatto { color: var(--testo-tenue); }
.passi li.attivo { color: var(--testo); }
.passi li.fatto::before { background: var(--sfumatura); }
.passi li.attivo::before {
  background: linear-gradient(90deg, var(--accento-1), var(--accento-2), var(--accento-1));
  background-size: 200% 100%;
  animation: scorri 2.4s linear infinite;
}
@keyframes scorri { to { background-position: -200% 0; } }
/* Nel browser normale i passaggi sono due: quello del browser sparisce e i numeri si adattano. */
.due-passi .passi li[data-passo="browser"] { display: none; }

/* ── Il cerchio con il lucchetto o la spunta ── */
.sigillo {
  position: relative;
  width: clamp(40px, 7dvh, 54px);
  height: clamp(40px, 7dvh, 54px);
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tasto);
  color: var(--testo);
}
.sigillo::before {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; padding: 1.5px;
  background: conic-gradient(from 0deg, var(--accento-1), var(--accento-2), rgba(255, 255, 255, .08) 55%, var(--accento-1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: gira 7s linear infinite;
}
.sigillo svg { width: 52%; height: 52%; }
.sigillo.fatto { background: var(--sfumatura); color: #1a0c12; }
.sigillo.fatto::before {
  inset: 0; padding: 0; background: none; -webkit-mask: none; mask: none;
  box-shadow: 0 0 0 0 rgba(255, 110, 130, .55);
  animation: onda 1.8s ease-out infinite;
}
@keyframes onda { to { box-shadow: 0 0 0 16px rgba(255, 110, 130, 0); } }
@keyframes gira { to { transform: rotate(360deg); } }
.spunta { stroke-dasharray: 20; stroke-dashoffset: 20; animation: disegna .45s .15s ease-out forwards; }
@keyframes disegna { to { stroke-dashoffset: 0; } }

.sopra {
  margin: clamp(10px, 2dvh, 18px) 0 0;
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accento-2);
}
h1 {
  margin: 4px 0 0;
  font-size: clamp(22px, 3.7dvh, 28px);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
}

/* ── I quattro pallini ── */
.cifre { display: flex; gap: 18px; margin-top: clamp(12px, 2.6dvh, 22px); }
.cifre span {
  width: 15px; height: 15px; border-radius: 50%;
  border: 1.6px solid rgba(255, 255, 255, .42);
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}
.cifre span.piena { border-color: transparent; background: var(--sfumatura); transform: scale(1.12); }
.cifre.scuoti { animation: scuoti .36s; }
@keyframes scuoti { 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }
.cifre.giusto span { animation: salta .42s ease both; }
.cifre.giusto span:nth-child(2) { animation-delay: .06s; }
.cifre.giusto span:nth-child(3) { animation-delay: .12s; }
.cifre.giusto span:nth-child(4) { animation-delay: .18s; }
@keyframes salta { 40% { transform: translateY(-7px) scale(1.25); } }

#stato {
  margin: clamp(8px, 1.5dvh, 13px) 0 clamp(10px, 2.2dvh, 20px);
  min-height: 1.45em;
  font-size: 15px;
  color: var(--testo-tenue);
}
#stato.errore { color: var(--errore); font-weight: 600; }
#stato.bene { color: var(--accento-2); font-weight: 600; }

/* ── Il tastierino ── */
.tasti {
  display: grid;
  grid-template-columns: repeat(3, var(--lato));
  gap: clamp(9px, 1.7dvh, 15px) clamp(16px, 6vw, 26px);
  justify-content: center;
}
.tasti button {
  width: var(--lato); height: var(--lato);
  border-radius: 50%;
  border: 1px solid var(--bordo);
  background: var(--tasto);
  color: var(--testo);
  font: inherit;
  font-size: calc(var(--lato) * .4);
  font-weight: 500;
  display: grid; place-items: center;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
  transition: background-color .12s ease, transform .08s ease, border-color .12s ease;
}
.tasti button:active { background: rgba(255, 255, 255, .22); border-color: rgba(255, 157, 108, .7); transform: scale(.93); }
.tasti button:focus-visible, .grande:focus-visible, .discreto:focus-visible { outline: 2px solid var(--accento-2); outline-offset: 3px; }
.tasti button:disabled { opacity: .45; cursor: default; }
.tasti .leggero { background: transparent; border-color: transparent; color: var(--testo-tenue); font-size: calc(var(--lato) * .3); }
.tasti .leggero svg { width: 38%; }

/* ── Schermata "apri nel browser" ── */
.spiega { margin: 10px 0 0; max-width: 30ch; color: var(--testo-tenue); font-size: 16px; }

.come {
  width: 100%; margin: 20px 0 0; padding: 4px 16px;
  list-style: none; counter-reset: riga;
  border-radius: 16px; border: 1px solid var(--bordo); background: rgba(255, 255, 255, .045);
  text-align: left; font-size: 15px;
}
.come li {
  counter-increment: riga;
  position: relative;
  padding: 11px 0 11px 36px;
  color: var(--testo-tenue);
}
.come li + li { border-top: 1px solid rgba(255, 255, 255, .07); }
.come li::before {
  content: counter(riga);
  position: absolute; left: 0; top: 50%; margin-top: -12px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12.5px; font-weight: 700;
  color: var(--accento-2); border: 1px solid rgba(255, 157, 108, .5);
}
.come li:first-child { color: var(--testo); }
.come li:first-child::before { background: var(--sfumatura); border-color: transparent; color: #1a0c12; }
.come b { color: var(--testo); font-weight: 600; }

.grande {
  margin-top: 20px;
  width: 100%; min-height: 58px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: 18px;
  background: var(--sfumatura);
  color: #1a0c12;
  font: inherit; font-size: 18px; font-weight: 700;
  cursor: pointer; touch-action: manipulation;
  box-shadow: 0 10px 30px rgba(255, 92, 138, .28);
  animation: respira 2.2s ease-in-out infinite;
  transition: transform .08s ease, opacity .12s ease;
}
.grande svg { width: 20px; height: 20px; animation: freccia 1.4s ease-in-out infinite; }
.grande:active { transform: scale(.98); }
.grande:disabled { opacity: .6; animation: none; }
@keyframes respira { 50% { box-shadow: 0 10px 38px rgba(255, 92, 138, .5), 0 0 0 5px rgba(255, 120, 130, .12); } }
@keyframes freccia { 50% { transform: translateX(4px); } }

.aiuto {
  width: 100%; margin: 18px 0 0; padding: 13px 15px;
  border-radius: 14px; border: 1px solid rgba(255, 157, 108, .35); background: rgba(255, 157, 108, .08);
  font-size: 15px; color: var(--testo); text-align: left;
}
.discreto {
  margin-top: 12px; padding: 10px 14px;
  border: 0; background: none;
  color: var(--testo-tenue); font: inherit; font-size: 15px;
  cursor: pointer; touch-action: manipulation;
}

/* ── Attesa ── */
.scorre { width: 150px; height: 3px; margin-top: 22px; border-radius: 3px; background: rgba(255, 255, 255, .13); overflow: hidden; }
.scorre span { display: block; width: 45%; height: 100%; border-radius: 3px; background: var(--sfumatura); animation: avanti 1.1s ease-in-out infinite; }
@keyframes avanti { from { transform: translateX(-110%); } to { transform: translateX(240%); } }

/* ── La riga in fondo ── */
.nota {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: clamp(12px, 2.8dvh, 28px) 0 0;
  font-size: 12.5px; color: rgba(246, 243, 248, .42);
}
.nota svg { width: 14px; height: 14px; flex: none; }

/* Telefoni bassi (il browser di Instagram toglie spazio): si alleggerisce per stare in una schermata. */
@media (max-height: 600px) {
  .nota, .sopra { display: none; }
  h1 { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  section, .cifre.scuoti, .cifre.giusto span, .grande, .grande svg, .sigillo::before, .passi li.attivo::before { animation: none; }
  .spunta { animation: none; stroke-dashoffset: 0; }
  .scorre span { animation-duration: 3s; }
}