/* Neural Blobbins: stessi colori e stesso tratto del gioco (contorni scuri, ombre piene).
   Layout: a sinistra la storia che scorre, a destra un telefono fermo che cambia schermata;
   sul telefono il telefono resta in alto e le schede passano sotto. */
/* Caratteri ospitati qui (nessuna richiesta a server esterni). Fredoka e Nunito: SIL Open Font License 1.1. */
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/fredoka-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/fredoka-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/fredoka-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/nunito-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/nunito-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/nunito-latin-800-normal.woff2") format("woff2"); }

:root {
  --violet: #5B2EFF;
  --violet-dot: #6C45FF;
  --violet-deep: #2C0FA6;
  --ink: #1B1B2F;
  --paper: #FFFFFF;
  --cream: #FFF6DD;
  --yellow: #FFE600;
  --red: #FF1F3D;
  --pink: #FF3DCB;
  --blue: #00B8FF;
  --lime: #A8F000;
  --mint: #00E0A4;
  --display: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --body: "Nunito", "Segoe UI", system-ui, sans-serif;
  --gutter-l: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  --phone-w: min(clamp(250px, 25vw, 330px), calc((84vh - 24px) / 2.1641 + 24px));
  --phone-h: calc((var(--phone-w) - 24px) * 2.1641 + 24px);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: radial-gradient(var(--violet-dot) 2px, transparent 2.6px) 0 0 / 30px 30px, var(--violet);
  color: var(--paper);
  font: 500 17px/1.55 var(--body);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 8px; }

#neurons { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* ------------------------------------------------------------------ testata */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) var(--gutter-r) 10px var(--gutter-l);
  transition: background .25s, box-shadow .25s;
}
.top.solid { background: var(--violet); box-shadow: 0 3px 0 var(--violet-deep); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 19px/1 var(--display); min-width: 0; }
.brand img { width: 36px; height: 36px; border-radius: 10px; border: 3px solid var(--ink); flex: none; }
.brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.lang { display: inline-flex; padding: 3px; border-radius: 99px; border: 3px solid var(--ink); background: var(--paper); cursor: pointer; font: 700 13px/1 var(--display); }
.lang span { padding: 6px 9px; border-radius: 99px; color: var(--ink); }
.lang span.on { background: var(--yellow); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 17px/1 var(--display); color: var(--ink); text-decoration: none;
  background: var(--yellow); border: 3px solid var(--ink); border-radius: 14px;
  padding: 12px 18px; box-shadow: 0 4px 0 var(--ink);
  transition: transform .12s, box-shadow .12s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn-small { font-size: 15px; padding: 9px 14px; }

/* ------------------------------------------------------------------ palco */
.stage {
  position: relative; z-index: 1;
  max-width: 1180px; margin: 0 auto;
  padding-left: var(--gutter-l); padding-right: var(--gutter-r);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: repeat(8, auto);
  column-gap: clamp(32px, 6vw, 88px);
}
.hero, .chapter { grid-column: 1; min-width: 0; }
.hero { grid-row: 1; }
.chapter:nth-of-type(2) { grid-row: 2; }
.chapter:nth-of-type(3) { grid-row: 3; }
.chapter:nth-of-type(4) { grid-row: 4; }
.chapter:nth-of-type(5) { grid-row: 5; }
.chapter:nth-of-type(6) { grid-row: 6; }
.chapter:nth-of-type(7) { grid-row: 7; }
.chapter:nth-of-type(8) { grid-row: 8; }

.phone-wrap {
  grid-column: 2; grid-row: 1 / -1;
  position: sticky; top: calc(50vh - var(--phone-h) / 2 + 24px);
  align-self: start;
  width: calc(var(--phone-w) + 40px);
  display: grid; place-items: center;
  perspective: 1400px;
  transform: rotate(var(--tilt, 0deg));
  margin-top: calc(50vh - var(--phone-h) / 2);
}

.phone {
  --ry: -14deg; --rz: -5deg; --tx: 0px;
  position: relative;
  width: var(--phone-w);
  padding: 12px;
  border-radius: 52px;
  background: var(--ink);
  box-shadow: 16px 20px 0 var(--violet-deep), 0 40px 70px rgba(16, 4, 70, .45);
  transform: translateX(var(--tx)) rotateY(var(--ry)) rotateZ(var(--rz));
  transition: transform .9s cubic-bezier(.2, .9, .25, 1.2);
}
.phone[data-pose="right"] { --ry: 14deg; --rz: 5deg; --tx: 6px; }
.phone[data-pose="left"] { --ry: -12deg; --rz: -4deg; --tx: -6px; }
.phone[data-pose="straight"] { --ry: 0deg; --rz: 0deg; }
.phone[data-pose="glitch"] { --ry: -4deg; --rz: -2deg; }
.phone[data-pose="beat"] { --ry: 8deg; --rz: 3deg; }

.phone-screen {
  position: relative; overflow: hidden;
  aspect-ratio: 390 / 844;
  border-radius: 40px;
  background: var(--violet);
  isolation: isolate;
}
.screen {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: translateY(5%) scale(.96);
  transition: opacity .45s ease, transform .65s cubic-bezier(.2, .9, .25, 1);
}
.screen.is-on { opacity: 1; transform: none; }
.phone-notch { position: absolute; top: 24px; left: 50%; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px #2a2a44; }

/* Guasto tecnico: il telefono sfarfalla. */
.phone-glitch { position: absolute; inset: 0; opacity: 0; pointer-events: none; mix-blend-mode: screen;
  background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(0, 224, 164, .22) 5px 7px); }
.phone[data-pose="glitch"] .phone-glitch { animation: scan 2.6s steps(1) infinite; }
.phone[data-pose="glitch"] .phone-screen { animation: jitter 2.6s steps(1) infinite; }
@keyframes scan { 0%, 70%, 100% { opacity: 0; } 72%, 78% { opacity: 1; } 75% { opacity: .4; } }
@keyframes jitter {
  0%, 70%, 100% { transform: none; filter: none; }
  72% { transform: translate(4px, -2px) skewX(-2deg); filter: hue-rotate(60deg) saturate(1.8); }
  74% { transform: translate(-5px, 1px); filter: hue-rotate(-40deg); }
  76% { transform: translate(2px, 3px) skewX(3deg); filter: invert(.08); }
  78% { transform: translate(-1px, -1px); filter: none; }
}

/* Niente pause: il bordo pulsa come un cuore. */
.phone-pulse { position: absolute; inset: 0; border-radius: 40px; pointer-events: none; opacity: 0; box-shadow: inset 0 0 46px 14px rgba(255, 31, 61, .75); }
.phone[data-pose="beat"] .phone-pulse { animation: heart 1.05s ease-out infinite; }
.phone[data-pose="beat"] .phone-screen { animation: thump 1.05s ease-out infinite; }
@keyframes heart { 0% { opacity: .95; } 22% { opacity: .1; } 34% { opacity: .75; } 70%, 100% { opacity: 0; } }
@keyframes thump { 0% { transform: scale(1.018); } 22% { transform: none; } 34% { transform: scale(1.01); } 70%, 100% { transform: none; } }

/* Il bollino accanto al telefono. */
.sticker {
  position: absolute; top: 9%; right: -6px; z-index: 2;
  font: 700 17px/1 var(--display); color: var(--ink);
  background: var(--yellow); border: 3px solid var(--ink); border-radius: 16px;
  padding: 10px 14px; box-shadow: 0 4px 0 var(--ink);
  transform: rotate(8deg); white-space: nowrap;
}
.sticker.pop { animation: pop .55s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pop { 0% { transform: rotate(8deg) scale(.4); opacity: 0; } 100% { transform: rotate(8deg) scale(1); opacity: 1; } }
.sticker[data-c="white"] { background: var(--paper); }
.sticker[data-c="lime"] { background: var(--lime); }
.sticker[data-c="pink"] { background: var(--pink); color: var(--paper); }
.sticker[data-c="blue"] { background: var(--blue); }
.sticker[data-c="red"] { background: var(--red); color: var(--paper); }

/* ------------------------------------------------------------------ apertura */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 18px; padding-block: 110px 64px;
}
.eyebrow { margin: 0; font: 700 14px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--yellow); }
h1 { margin: 0; font-family: var(--display); font-weight: 700; line-height: .9; }
.h1-small { display: block; font-size: clamp(26px, 3.4vw, 40px); letter-spacing: .24em; text-transform: uppercase; margin-bottom: 6px; }
.h1-big { display: block; font-size: clamp(64px, 10.5vw, 136px); text-shadow: 0 7px 0 var(--violet-deep); }
.h1-big::after {
  content: ""; display: block; height: 11px; width: 74%; margin-top: 16px; border-radius: 6px;
  background: repeating-linear-gradient(90deg, var(--yellow) 0 26px, transparent 26px 40px);
}
.lead { margin: 6px 0 0; max-width: 32ch; font-size: clamp(18px, 1.7vw, 22px); font-weight: 700; line-height: 1.45; text-wrap: pretty; }

.stores { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.store {
  display: inline-flex; align-items: center; gap: 12px; min-width: 196px;
  padding: 10px 20px 10px 14px; text-decoration: none; color: var(--paper);
  background: var(--ink); border: 3px solid var(--ink); border-radius: 16px;
  box-shadow: 0 5px 0 var(--violet-deep);
  transition: transform .12s, box-shadow .12s;
}
.store:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--violet-deep); }
.store svg { width: 30px; height: 30px; flex: none; fill: none; stroke: var(--yellow); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.store span { display: grid; gap: 3px; }
.store small { font: 700 12px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.store b { font: 600 21px/1 var(--display); }
.store.nope { animation: nope .45s; }
@keyframes nope { 20% { transform: translateX(-6px) rotate(-2deg); } 40% { transform: translateX(6px) rotate(2deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }

.facts { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.facts li { font: 600 14px/1 var(--display); padding: 9px 13px; border-radius: 99px; border: 2px solid rgba(255, 255, 255, .45); background: rgba(27, 27, 47, .18); }
.hint { margin: 4px 0 0; font-size: 14px; font-weight: 700; opacity: .75; }

/* ------------------------------------------------------------------ capitoli */
.chapter { min-height: 100svh; display: flex; align-items: center; padding-block: 12vh; }
.card {
  position: relative; max-width: 31rem;
  background: var(--paper); color: var(--ink);
  border: 4px solid var(--ink); border-radius: 28px;
  padding: clamp(22px, 3vw, 36px);
  box-shadow: 0 9px 0 var(--ink);
  transition: transform .5s cubic-bezier(.2, 1.4, .4, 1);
}
.chapter:nth-of-type(odd) .card { transform: rotate(-1.2deg); }
.chapter:nth-of-type(even) .card { transform: rotate(1deg); }
.chapter.is-active .card { transform: rotate(0deg) scale(1.02); }
.kicker { margin: 0; font: 700 13px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--violet); }
.card h2 { margin: 12px 0 12px; font: 700 clamp(30px, 3.7vw, 46px)/1.04 var(--display); text-wrap: balance; }
.card p:last-child { margin: 0; font-size: 18px; line-height: 1.55; }
.card-alarm { border-color: var(--red); box-shadow: 0 9px 0 var(--red); }
.card-alarm .kicker, .card-alarm h2 { color: var(--red); }
.chapter.is-active .card-alarm { animation: alarm 2.6s steps(1) infinite; }
@keyframes alarm { 0%, 70%, 100% { translate: 0 0; } 72% { translate: 3px -1px; } 74% { translate: -3px 1px; } 76% { translate: 1px 2px; } }

/* ------------------------------------------------------------------ chiusura */
.finale {
  position: relative; z-index: 1;
  background: var(--yellow); color: var(--ink);
  border-top: 4px solid var(--ink);
  padding-block: clamp(70px, 12vh, 120px);
  padding-left: var(--gutter-l); padding-right: var(--gutter-r);
  display: grid; justify-items: center; text-align: center; gap: 14px;
}
.finale h2 { margin: 0; font: 700 clamp(40px, 7vw, 84px)/1 var(--display); text-wrap: balance; }
.finale p { margin: 0; max-width: 40ch; font-size: 19px; font-weight: 700; }
.finale .stores { justify-content: center; margin-top: 14px; }
.finale .store { box-shadow: 0 5px 0 rgba(27, 27, 47, .35); }

.foot {
  position: relative; z-index: 1;
  background: var(--ink); color: var(--paper);
  padding-block: 34px calc(34px + env(safe-area-inset-bottom, 0px));
  padding-left: var(--gutter-l); padding-right: var(--gutter-r);
  display: grid; justify-items: center; gap: 12px; text-align: center;
  font-size: 15px;
}
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.foot a { font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.foot a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.foot p { margin: 0; opacity: .7; }

/* ------------------------------------------------------------------ telefono (schermi stretti) */
@media (max-width: 899px) {
  :root { --phone-w: min(232px, 54vw, calc((52svh - 24px) / 2.1641 + 24px)); }
  .stage { grid-template-columns: minmax(0, 1fr); }
  .hero { min-height: auto; padding-block: 104px 40px; }
  .phone-wrap {
    grid-column: 1; grid-row: 2 / -1;
    top: calc(70px + env(safe-area-inset-top, 0px));
    margin-top: 0; justify-self: center;
    z-index: 0;
  }
  .phone { box-shadow: 10px 14px 0 var(--violet-deep), 0 26px 50px rgba(16, 4, 70, .45); border-radius: 40px; padding: 9px; }
  .phone-screen { border-radius: 31px; }
  .phone-pulse { border-radius: 31px; }
  .sticker { top: 6%; right: -2px; font-size: 15px; padding: 8px 11px; }
  .chapter { position: relative; z-index: 2; align-items: flex-end; padding-block: 0 5svh; }
  .card { max-width: none; width: 100%; padding: 20px 20px 22px; }
  .card h2 { font-size: clamp(26px, 7.4vw, 34px); margin: 8px 0 8px; }
  .card p:last-child { font-size: 16.5px; }
}
@media (max-width: 420px) {
  .brand span { font-size: 17px; }
  .store { min-width: 0; flex: 1 1 160px; }
}
/* Telefoni stretti (iPhone mini e SE, molti Android): in testata restano logo, nome e lingua;
   per scaricare ci sono i bottoni grandi nella pagina. */
@media (max-width: 389px) {
  .top .btn-small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .phone, .screen, .card { transition: none; }
  .phone[data-pose] .phone-screen, .phone[data-pose] .phone-glitch, .phone[data-pose] .phone-pulse,
  .chapter.is-active .card-alarm, .sticker.pop, .store.nope { animation: none; }
}

/* ------------------------------------------------------------------ pagine di testo (privacy, condizioni, assistenza) */
html[data-lang="it"] [data-lang="en"], html[data-lang="en"] [data-lang="it"] { display: none !important; }
.page { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; padding: calc(100px + env(safe-area-inset-top, 0px)) var(--gutter-r) 80px var(--gutter-l); }
.doc {
  position: relative; background: var(--paper); color: var(--ink);
  border: 4px solid var(--ink); border-radius: 28px; box-shadow: 0 9px 0 var(--ink);
  padding: clamp(22px, 5vw, 52px);
}
.doc-bit { position: absolute; top: -26px; right: clamp(14px, 4vw, 34px); width: 76px; height: 76px; border-radius: 20px; border: 4px solid var(--ink); box-shadow: 0 5px 0 var(--ink); transform: rotate(8deg); }
.doc h1 { margin: 10px 0 8px; padding-right: 72px; font: 700 clamp(34px, 6vw, 54px)/1.03 var(--display); text-wrap: balance; }
.doc .updated { margin: 0 0 24px; font-size: 15px; color: #5c5c75; }
.doc h2 { margin: 36px 0 10px; font: 700 clamp(22px, 3vw, 28px)/1.15 var(--display); text-wrap: balance; }
.doc h3 { margin: 22px 0 6px; font: 600 19px/1.25 var(--display); }
.doc p, .doc li { font-size: 17px; line-height: 1.62; text-wrap: pretty; }
.doc p { margin: 0 0 12px; }
.doc ul { margin: 0 0 14px; padding-left: 22px; }
.doc li + li { margin-top: 7px; }
.doc a { color: var(--violet); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 2px; overflow-wrap: anywhere; }
.doc .path { font-weight: 800; }
.doc .lead-box { background: var(--cream); border: 3px solid var(--ink); border-radius: 20px; padding: 18px 22px 8px; margin: 0 0 8px; }
.doc .lead-box h2 { margin-top: 0; font-size: 21px; }
.doc .contact { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; background: var(--yellow); border: 3px solid var(--ink); border-radius: 20px; padding: 18px 22px; margin: 6px 0 10px; }
.doc .contact p { margin: 0; flex: 1 1 260px; font-weight: 700; overflow-wrap: anywhere; }
.doc .contact .btn { color: var(--ink); background: var(--paper); text-decoration: none; }
.faq details { border: 3px solid var(--ink); border-radius: 18px; margin: 12px 0; background: var(--paper); }
.faq details[open] { box-shadow: 0 4px 0 var(--ink); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 15px 18px; font: 600 18px/1.3 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--yellow); border: 2px solid var(--ink); font: 700 20px/1 var(--display); }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 18px 6px; }
@media (max-width: 520px) {
  /* Bit sta sopra il bordo della scheda, così il titolo ha tutta la larghezza. */
  .doc-bit { width: 52px; height: 52px; top: -32px; border-radius: 14px; border-width: 3px; box-shadow: 0 4px 0 var(--ink); }
  .doc h1 { padding-right: 0; margin-top: 16px; font-size: clamp(30px, 9vw, 40px); }
  .doc p, .doc li { font-size: 16.5px; }
}