/* Winx – stile. Nessun font esterno: si usano i font di sistema. */
:root {
  --notte: #1a0b2e;
  --notte-2: #3b1366;
  --testo: #ffffff;
  --rosa: #ff8ad8;
  --oro: #ffd76a;
  --c: #1a0b2e;      /* colore scelto (impostato da app.js) */
  --c-testo: #fff;   /* testo leggibile sul colore scelto */
}

[hidden] { display: none !important; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--notte);
  color: var(--testo);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}

button { font: inherit; touch-action: manipulation; }

.schermata {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Sfondo "magico": notte viola con scintille, solo CSS */
.magia {
  /* sfondo ufficiale glitter, leggermente scurito per far leggere i testi bianchi */
  background:
    linear-gradient(rgba(26, 11, 46, .30), rgba(26, 11, 46, .55)),
    url("img/sfondo.jpg") center / cover no-repeat;
  background-color: var(--notte);
}

.contenuto {
  min-height: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 16px 24px;
  padding: max(20px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.centrato { justify-content: center; }

/* ---------- Logo ---------- */
.logo-box { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.logo-box img { display: block; max-width: 100%; max-height: 82%; min-height: 0; object-fit: contain; }
.logo-sotto {
  margin-top: .3em;
  font-size: 1.1em;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 10px #ff4fc8, 0 2px 4px rgba(0, 0, 0, .6);
}

.logo-testo { line-height: 1.05; text-align: center; }
.logo-testo .t1 {
  display: block;
  font-size: 2.4em;
  font-weight: 900;
  white-space: nowrap;
  letter-spacing: .02em;
  background: linear-gradient(90deg, #ff8ad8, #ffd76a 35%, #7fe3ff 65%, #c49bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.logo-testo .t2 { display: block; font-size: 1.05em; font-weight: 700; margin-top: .35em; }
.logo-testo .t3 { display: block; font-size: .95em; color: var(--oro); margin-top: .2em; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- Apertura: la fata compare, tocca lo schermo, esplode, si apre il mondo Winx, appare il logo ---------- */
#splash { background: #000; overflow: hidden; }
#splash .logo-box {
  position: absolute;
  top: 50%; left: 50%;
  width: 80vw; max-width: 460px; height: 50vh;
  margin: -25vh 0 0 -40vw;
  font-size: 22px; font-size: min(6vw, 30px);
  opacity: 0;
}
@media (min-width: 575px) { #splash .logo-box { margin-left: -230px; } }

/* il mondo Winx: compare dal punto toccato, assestandosi dolcemente (solo opacità e scala: fluido anche su telefoni vecchi) */
.intro-sfondo {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  opacity: 0;
  -webkit-transform: scale(1.12); transform: scale(1.12);
  -webkit-transition: opacity 1.2s ease-out, -webkit-transform 1.6s cubic-bezier(.22, .61, .36, 1);
  transition: opacity 1.2s ease-out, transform 1.6s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
.colora .intro-sfondo { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }

/* luce morbida che si allarga dal dito (un'unica onda lenta, nessun lampo) */
.intro-luce {
  position: absolute; top: 50%; left: 50%;
  width: 240px; height: 240px; margin: -120px 0 0 -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .8) 0%, rgba(255, 210, 245, .45) 28%, rgba(190, 150, 255, .18) 50%, rgba(255, 255, 255, 0) 70%);
  opacity: 0;
  -webkit-transform: scale(.1); transform: scale(.1);
  will-change: opacity, transform;
  pointer-events: none;
}
.colora .intro-luce { -webkit-animation: luce 1.5s cubic-bezier(.22, .61, .36, 1) forwards; animation: luce 1.5s cubic-bezier(.22, .61, .36, 1) forwards; }
@-webkit-keyframes luce { 0% { opacity: 0; -webkit-transform: scale(.1); } 18% { opacity: .85; } 100% { opacity: 0; -webkit-transform: scale(7); } }
@keyframes luce { 0% { opacity: 0; transform: scale(.1); } 18% { opacity: .85; } 100% { opacity: 0; transform: scale(7); } }

/* anello di luce nel punto del tocco */
.intro-onda {
  position: absolute; top: 50%; left: 50%;
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border: 3px solid #fff; border-radius: 50%;
  box-shadow: 0 0 18px #fff, inset 0 0 12px #fff;
  opacity: 0;
}
.colora .intro-onda { -webkit-animation: onda .9s ease-out forwards; animation: onda .9s ease-out forwards; }
@-webkit-keyframes onda { 0% { opacity: .95; -webkit-transform: scale(.2); } 100% { opacity: 0; -webkit-transform: scale(9); } }
@keyframes onda { 0% { opacity: .95; transform: scale(.2); } 100% { opacity: 0; transform: scale(9); } }

/* la fata: il contenitore (0x0) sta al centro dello schermo, che coincide con il suo dito */
.intro-volo { position: absolute; top: 50%; left: 50%; width: 0; height: 0; opacity: 0; will-change: transform, opacity; }
.intro-fata { position: absolute; top: 0; left: 0; height: 51vh; max-width: none; pointer-events: none; }
/* la scia di polvere magica (disegnata dal JavaScript) */
.intro-scia { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }

/* il logo: nitido da subito, solo dissolvenza e leggero ingrandimento (niente sfocature né ombre) */
.mostra-logo .logo-box { -webkit-animation: appare 1.2s cubic-bezier(.4, 0, .2, 1) forwards; animation: appare 1.2s cubic-bezier(.4, 0, .2, 1) forwards; }
@-webkit-keyframes appare { from { opacity: 0; -webkit-transform: scale(.92); } to { opacity: 1; -webkit-transform: scale(1); } }
@keyframes appare { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }

/* senza animazione (es. "Riduci movimento"): sfondo e logo subito visibili */
.statico .intro-sfondo { opacity: 1; -webkit-transform: none; transform: none; -webkit-transition: none; transition: none; }
.statico .logo-box { opacity: 1; -webkit-animation: none; animation: none; }
.statico .intro-volo, .statico .intro-onda, .statico .intro-luce, .statico .intro-scia { display: none; }

.dissolve { -webkit-animation: dissolve .5s ease forwards; animation: dissolve .5s ease forwards; }
@-webkit-keyframes dissolve { to { opacity: 0; } }
@keyframes dissolve { to { opacity: 0; } }

.entra { -webkit-animation: entra .5s ease both; animation: entra .5s ease both; }
@-webkit-keyframes entra { from { opacity: 0; -webkit-transform: translateY(12px); } }
@keyframes entra { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Scelta ---------- */
#scelta .logo-box.piccolo { height: 18vh; max-height: 170px; width: 100%; font-size: 14px; font-size: min(3.6vw, 17px); margin-bottom: 8px; }
h1 { font-size: 1.6rem; line-height: 1.2; margin: 8px 0 4px; text-shadow: 0 2px 8px rgba(26, 11, 46, .8); }
.domanda { font-size: 1.15rem; font-weight: 600; margin: 0 0 18px; color: #fff; text-shadow: 0 1px 6px rgba(26, 11, 46, .9); }

.griglia {
  display: -ms-grid;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 14px;
  gap: 14px;
  width: 100%;
}
.winx {
  min-height: 84px;
  padding: 12px 8px;
  border: 3px solid rgba(255, 255, 255, .85);
  border-radius: 22px;
  font-size: 1.4rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 18px var(--glow, #fff), inset 0 -4px 0 rgba(0, 0, 0, .15);
  -webkit-transition: -webkit-transform .12s; transition: transform .12s;
}
.winx:active { -webkit-transform: scale(.96); transform: scale(.96); }
.winx:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }
.winx-img { display: block; width: 100%; height: 64px; object-fit: contain; margin-bottom: 6px; pointer-events: none; }

/* ---------- Avviso ---------- */
#avviso {
  color: var(--c-testo);
  background:
    radial-gradient(2px 2px at 14% 12%, rgba(255, 255, 255, .9) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 82% 8%, rgba(255, 255, 255, .8) 50%, transparent 51%),
    radial-gradient(2px 2px at 90% 38%, rgba(255, 255, 255, .7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 8% 54%, rgba(255, 255, 255, .7) 50%, transparent 51%),
    radial-gradient(2px 2px at 20% 90%, rgba(255, 255, 255, .8) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 76% 94%, rgba(255, 255, 255, .8) 50%, transparent 51%),
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .38), transparent 62%),
    radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, .22), transparent 60%),
    var(--c);
}
.scheda {
  width: 100%;
  max-width: 420px;
  margin-bottom: 22px;
  padding: 18px 20px 20px;
  border-radius: 28px;
  background: #fff;
  color: #2a1240;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .25), 0 0 0 4px rgba(255, 255, 255, .35);
  -webkit-animation: entra .5s ease both; animation: entra .5s ease both;
}
.firma { display: block; width: 78%; max-width: 290px; height: auto; margin: 0 auto 10px; }
.nome-scelto { font-size: 2.2rem; font-weight: 900; margin: 0 0 12px; color: var(--c); }
.passi { list-style: none; margin: 0; padding: 0; text-align: left; }
.passi li { display: flex; align-items: center; padding: 9px 0; font-size: 1.08rem; line-height: 1.35; }
.passi li + li { border-top: 1px solid #f0e6f7; }
.passi b { font-weight: 800; }
.passi .ico {
  flex: 0 0 42px; width: 42px; height: 42px; margin-right: 12px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--c); color: var(--c-testo);
}
.passi .ico svg { width: 24px; height: 24px; display: block; }
.finale {
  margin: 14px 0 0;
  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1.15;
  color: #e5007e;
  background: linear-gradient(90deg, #ff2fa8, #a23cff 55%, #1e9bff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.btn-grande {
  width: 100%;
  max-width: 380px;
  min-height: 64px;
  padding: 14px 20px;
  border: 0;
  border-radius: 32px;
  font-size: 1.2rem;
  font-weight: 800;
  background: #2a1240;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3), 0 0 0 3px rgba(255, 255, 255, .55);
}
.btn-link {
  margin-top: 18px;
  min-height: 48px;
  padding: 10px 18px;
  border: 0;
  background: none;
  color: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

@media (max-height: 700px) {
  .scheda { padding: 14px 16px 16px; margin-bottom: 16px; }
  .firma { width: 64%; margin-bottom: 4px; }
  .passi li { padding: 6px 0; font-size: 1rem; }
  .finale { font-size: 1.45rem; margin-top: 8px; }
  .btn-grande { min-height: 56px; }
  .btn-link { margin-top: 8px; }
}

/* ---------- Colore ---------- */
#colore { background: var(--c); overflow: hidden; touch-action: none; cursor: none; }
.posa {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 57vh;
  max-width: 88vw;
  object-fit: contain;
  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
  /* l'alone chiaro è già dentro l'immagine (niente filtri CSS: su iPhone disegnano un rettangolo) */
  pointer-events: none;
}
.velo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #000; opacity: 0; pointer-events: none; }

/* Pulsazione: solo opacità di un velo nero, lenta e morbida (ciclo >= 2 s) */
.pulsa .velo {
  -webkit-animation: respiro 2s ease-in-out infinite alternate;
  animation: respiro 2s ease-in-out infinite alternate;
}
@-webkit-keyframes respiro { from { opacity: 0; } to { opacity: .3; } }
@keyframes respiro { from { opacity: 0; } to { opacity: .3; } }

.indietro {
  position: absolute;
  left: 14px;
  bottom: 14px;
  left: max(14px, env(safe-area-inset-left));
  bottom: max(14px, env(safe-area-inset-bottom));
  width: 48px; height: 48px;
  padding: 4px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .12);
  color: var(--c-testo);
  opacity: .35;
  cursor: pointer;
  touch-action: none;
}
.indietro svg { width: 100%; height: 100%; display: block; }
.anello {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-dasharray: 107;
  stroke-dashoffset: 107;
  -webkit-transform: rotate(-90deg); transform: rotate(-90deg);
  -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;
}
.indietro.premuto { opacity: .9; }
.indietro.premuto .anello { stroke-dashoffset: 0; -webkit-transition: stroke-dashoffset 1s linear; transition: stroke-dashoffset 1s linear; }

.suggerimento {
  position: absolute;
  left: 72px;
  bottom: 22px;
  bottom: max(22px, calc(env(safe-area-inset-bottom) + 8px));
  margin: 0;
  font-size: .95rem;
  color: var(--c-testo);
  opacity: 0;
  -webkit-transition: opacity .4s; transition: opacity .4s;
  pointer-events: none;
}
.suggerimento.visibile { opacity: .8; }

.noscript { position: fixed; top: 40%; left: 0; right: 0; text-align: center; padding: 16px; font-size: 1.2rem; }

/* Chi ha attivato "Riduci movimento": niente animazioni né pulsazione */
@media (prefers-reduced-motion: reduce) {
  .dissolve, .entra, .pulsa .velo { -webkit-animation: none !important; animation: none !important; }
}