/* FlowRing — la home "a scene". Solo sulla home (IT e EN), dopo site.css: stessi colori e caratteri del gioco.
   Le classi sono tutte n-… per non toccare il resto del sito. Le scene (telefono fisso, frase, schede impilate) si
   accendono solo con html.fx, che mette home.js quando il movimento è consentito: senza, la pagina è statica e completa.
   Niente esce mai di lato: i titoli giganti prendono la misura dal loro contenitore (unità cqw) e non da 100vw, che su
   Windows comprende anche la barra di scorrimento; in più main taglia qualunque cosa sporga (overflow-x: clip). */
:root{--stage:#0B0C10;--stage-ink:#F2F2EE;--stage-muted:#9A9DA6;--stage-accent:#7D98FF;--stage-line:#262932;
  --on-accent:#FFFFFF;--n-shadow:0 30px 70px -30px rgba(21,23,28,.35);--hdr:65px;--gut:clamp(16px,4vw,40px);--n-display:"Unbounded","Manrope",system-ui,sans-serif}
@media (max-width:720px){:root{--hdr:59px}}
@media (prefers-color-scheme:dark){:root{--on-accent:#0B0C10;--n-shadow:0 30px 70px -30px rgba(0,0,0,.8)}}
html.prelaunch .n-live,html:not(.prelaunch) .n-pre{display:none!important}
.n-home{overflow-x:clip}
.n-wrap{width:min(1120px,100%);margin-inline:auto;padding-inline:var(--gut)}
.n-lbl{font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.n-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:14px 26px;border-radius:999px;background:var(--accent);color:var(--on-accent);font:800 15px/1.2 "Manrope",system-ui,sans-serif;letter-spacing:.02em;text-align:center;text-decoration:none;transition:transform .15s}
.n-btn:hover{transform:translateY(-1px)}
.n-btn[aria-disabled="true"]{cursor:default;transform:none}
.n-btn[aria-disabled="true"]:before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.75}

/* il conto alla rovescia (lo aggiorna site.js) */
.n-cd{display:flex;gap:10px;justify-content:center}
.n-cd div{min-width:clamp(62px,9vw,98px);padding:12px 6px 10px;border-radius:18px;background:var(--card);border:1.5px solid var(--line);display:grid;justify-items:center}
.n-cd b{font-family:var(--n-display);font-weight:900;font-size:clamp(24px,4.6vw,44px);line-height:1;font-variant-numeric:tabular-nums}
.n-cd span{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:8px}
@media (max-width:380px){.n-cd{gap:6px;width:100%}.n-cd div{min-width:0;flex:1}}
.n-local{font-size:13px;font-weight:700;color:var(--muted)}

/* 1 — l'apertura */
.n-hero{position:relative;overflow:clip;min-height:calc(92svh - var(--hdr));display:grid;place-items:center;text-align:center;padding-block:44px 128px}
.n-hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.n-hero .n-in{position:relative;display:grid;justify-items:center;gap:clamp(12px,2.4vh,22px)}
.n-giant{font-family:var(--n-display);font-weight:900;font-size:clamp(46px,min(12.4vw,16vh),188px);line-height:.94;letter-spacing:-.035em;text-wrap:balance}
.n-giant em{font-style:normal;color:var(--accent)}
.n-tag{font-size:clamp(17px,2.2vw,24px);font-weight:700;color:var(--ink-2);letter-spacing:-.005em}
.n-launch{display:grid;justify-items:center;gap:12px;margin-top:6px;width:100%}
.n-when{font-family:var(--n-display);font-weight:800;font-size:clamp(16px,2.1vw,22px);letter-spacing:-.01em;text-wrap:balance}
.n-when em{font-style:normal;color:var(--accent)}
.n-hero .stores{margin:0}
@media (orientation:landscape) and (max-height:520px){   /* telefono in orizzontale: l'apertura sta tutta in uno schermo */
  .n-hero{padding-block:12px 44px}
  .n-hero .n-in{gap:10px}
  .n-launch{gap:8px;margin-top:0}
  .n-cd div{padding:8px 6px 7px;border-radius:14px}
  .n-cd b{font-size:26px}
  .n-cd span{margin-top:5px}
  .n-btn{min-height:44px;padding:11px 22px}
}

/* 2 — il telefono, sul palco scuro */
.n-stage{background:var(--stage);color:var(--stage-ink);position:relative;padding:0}
.n-pin{--pw:min(860px,calc(100vw - 2 * var(--gut)));display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:28px;padding:72px var(--gut)}
.n-phone-area{display:grid;place-items:center;width:100%;min-height:0}
.n-phone{width:var(--pw);max-width:100%;aspect-ratio:2.16/1;position:relative;border-radius:calc(var(--pw) * .072);padding:calc(var(--pw) * .016);
  background:linear-gradient(150deg,#353946 0%,#15171D 42%,#0A0B0E 100%);box-shadow:0 60px 110px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.07) inset,0 0 0 calc(var(--pw) * .003) #07080A;
  transform:rotate(var(--rot,0deg)) scale(var(--sc,1));will-change:transform}
.n-key{position:absolute;top:calc(var(--pw) * -.004);height:calc(var(--pw) * .007);border-radius:4px 4px 0 0;background:#2B2E38}
.n-screen{position:relative;width:100%;height:100%;border-radius:calc(var(--pw) * .056);overflow:hidden;background:#F7F7F5;isolation:isolate}
.n-screen canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.n-cam{position:absolute;left:calc(var(--pw) * .026);top:50%;width:calc(var(--pw) * .015);aspect-ratio:1;border-radius:50%;background:#040506;box-shadow:0 0 0 calc(var(--pw) * .003) #1A1C22;translate:0 -50%;z-index:3}
.n-splash{position:absolute;inset:0;display:grid;place-items:center;background:#F7F7F5;color:#15171C;z-index:2;opacity:var(--so,1);pointer-events:none}
.n-splash .n-mark{display:grid;justify-items:center;gap:12px;transform:rotate(var(--sr,0deg))}
.n-splash svg{width:calc(var(--pw) * .085);height:calc(var(--pw) * .085)}
.n-splash b{font-family:var(--n-display);font-weight:800;letter-spacing:.06em;font-size:calc(var(--pw) * .026)}
.n-splash b span{color:#2F5BFF}
.n-scrub{width:min(var(--pw),560px);max-width:100%;height:3px;border-radius:3px;background:var(--stage-line);position:relative;display:none}
.n-scrub i{position:absolute;inset:0 auto 0 0;width:calc(var(--p,0) * 100%);border-radius:3px;background:var(--stage-accent)}
.n-caps{display:grid;gap:44px;width:min(100%,780px);text-align:center}
.n-cap{display:grid;gap:12px;justify-items:center}
.n-cap .n-lbl{color:var(--stage-accent)}
.n-cap h2{font-family:var(--n-display);font-weight:900;font-size:clamp(30px,5.4vw,66px);line-height:1;letter-spacing:-.025em}
.n-cap h2 em{font-style:normal;color:var(--stage-accent)}
.n-cap p{max-width:36ch;color:var(--stage-muted);font-size:clamp(15px,1.6vw,19px);line-height:1.5;font-weight:600}
.fx .n-stage{height:620vh}
.fx .n-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;grid-template-rows:auto auto auto;align-content:center;gap:clamp(14px,2.6vh,28px);padding:calc(var(--hdr) + 2vh) var(--gut) max(3vh,74px)}
.fx .n-pin{--pw:min(820px,calc(100vw - 2 * var(--gut)),calc((100svh - var(--hdr) - 380px) * 2.16))}
.fx .n-phone-area{height:min(calc(var(--pw) * .8),46vh);height:min(calc(var(--pw) * .8),46svh)}
@media (min-width:700px) and (min-height:521px) and (max-height:860px){.n-cap h2{font-size:clamp(28px,4.2vw,50px)}.n-cap p{font-size:16px}}
@media (min-width:700px) and (min-height:521px) and (max-height:700px){.fx .n-phone-area{height:min(calc(var(--pw) * .8),42vh);height:min(calc(var(--pw) * .8),42svh)}.n-cap h2{font-size:40px}.n-cap p{font-size:15px}}
.fx .n-scrub{display:block}
.fx .n-caps{display:grid;gap:0;min-height:9.5em}
.fx .n-cap{grid-area:1/1;opacity:0;transform:translateY(18px);will-change:opacity,transform}
.fx .n-cap:first-child{opacity:1;transform:none}
@media (orientation:landscape) and (max-height:520px){
  .fx .n-pin{--pw:min(54vw,calc((100svh - var(--hdr) - 44px) * 2.16));grid-template-columns:var(--pw) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-items:center;column-gap:28px;padding:calc(var(--hdr) + 10px) var(--gut) 12px}
  .fx .n-phone-area{grid-row:1/3;height:100%}
  .fx .n-caps{grid-column:2;grid-row:1;text-align:left;min-height:0}
  .fx .n-cap{justify-items:start}
  .fx .n-scrub{grid-column:2;grid-row:2}
  .n-cap h2{font-size:clamp(24px,4vw,40px)}
  .n-cap p{font-size:14px}
}

/* 3 — la frase gigante */
.n-say{padding-block:14vh}
.n-say .n-in{width:min(1180px,100%);margin-inline:auto;padding-inline:var(--gut)}
.n-say p{font-family:var(--n-display);font-weight:900;font-size:clamp(28px,7.2vw,110px);line-height:1.03;letter-spacing:-.035em;margin:0}
.n-say .n-hl{color:var(--accent)}
.fx .n-say{height:240vh;padding:0}
.fx .n-say .n-in{position:sticky;top:0;height:100vh;height:100svh;display:grid;align-content:center}
.fx .n-say p span{opacity:.14}

/* 4 — le schede che si impilano */
.n-modes{padding-block:10vh 12vh}
.n-modes .n-head{display:grid;gap:14px;justify-items:center;text-align:center;margin-bottom:7vh}
.n-modes .n-head h2{font-family:var(--n-display);font-weight:900;font-size:clamp(32px,5.6vw,76px);line-height:1;letter-spacing:-.03em}
.n-modes .n-head p{max-width:46ch;color:var(--ink-2);font-size:clamp(16px,1.7vw,19px);font-weight:600;margin:0}
.n-cards{display:grid;gap:22px;width:min(1120px,100%);margin-inline:auto;padding-inline:var(--gut)}
.n-card{--k:0;position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(20px,4vw,56px);align-items:center;min-height:min(70svh,600px);padding:clamp(24px,4.6vw,60px);border-radius:clamp(24px,3vw,36px);background:var(--card);color:var(--ink);box-shadow:var(--n-shadow);overflow:hidden;isolation:isolate}
.n-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#000;opacity:calc(var(--k) * .32);pointer-events:none}
.n-card .n-txt{display:grid;gap:14px;align-content:center;min-width:0}
.n-card h3{font-family:var(--n-display);font-weight:900;font-size:clamp(28px,4.2vw,50px);line-height:1;letter-spacing:-.03em;margin:0}
.n-card p{font-size:clamp(15px,1.5vw,18px);line-height:1.55;color:var(--ink-2);font-weight:600;max-width:42ch;margin:0}
.n-chips{display:flex;flex-wrap:wrap;gap:8px}
.n-chip{padding:8px 14px;border-radius:999px;border:1.5px solid currentColor;font-weight:800;font-size:14px;line-height:1.2}
.n-vis{display:grid;place-items:center;min-height:220px;min-width:0}
.n-card.n-duel{background:#2F5BFF;color:#fff}
.n-card.n-duel p{color:rgba(255,255,255,.86)} .n-card.n-duel .n-lbl{color:rgba(255,255,255,.82)}
.n-card.n-duel .n-chip:first-child{background:#fff;color:#2F5BFF;border-color:#fff}
.n-card.n-event{background:var(--stage);color:var(--stage-ink);box-shadow:var(--n-shadow),0 0 0 1px var(--stage-line)}
.n-card.n-event p{color:var(--stage-muted)} .n-card.n-event .n-lbl{color:var(--stage-accent)}
.n-card.n-free{background:var(--ground-2)}
.fx .n-cards{gap:0}
.fx .n-card{position:sticky;top:calc(var(--hdr) + 14px + var(--i) * 12px);margin-bottom:9vh;transform:scale(calc(1 - var(--k) * .05));transform-origin:50% 0;will-change:transform}
.fx .n-card:last-child{margin-bottom:0}
/* schermi bassi (telefono in orizzontale): se una scheda è più alta dello spazio sotto la barra, niente pila, così si legge tutta */
.fx .n-cards.n-flat{gap:22px}
.fx .n-cards.n-flat .n-card{position:relative;top:auto;margin-bottom:0;transform:none}
@media (max-width:760px){
  .n-card{grid-template-columns:minmax(0,1fr);min-height:0;align-content:start}
  .n-vis{min-height:0}
  .fx .n-card{min-height:min(76svh,640px)}
}
.n-duo{width:min(100%,380px);height:auto;aspect-ratio:1.5}
.n-streak{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;width:min(100%,360px)}
.n-streak div{aspect-ratio:1;border-radius:12px;border:1.5px solid var(--line);display:grid;place-items:center;font-weight:800;font-size:12px;color:var(--muted)}
.n-streak div.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.n-streak div.today{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.n-board{display:grid;gap:8px;width:min(100%,360px);margin-top:14px}
.n-board div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:var(--ground);font-weight:700;font-size:14px}
.n-board div.me{background:var(--ink);color:var(--ground)}
.n-board b{font-family:var(--n-display);font-weight:800;font-variant-numeric:tabular-nums}
.n-mystery{display:grid;gap:14px;justify-items:center;width:min(100%,360px)}
.n-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;width:100%}
.n-cal i{aspect-ratio:1;border-radius:10px;border:1.5px solid var(--stage-line);display:grid;place-items:center;font:900 16px/1 var(--n-display);font-style:normal;color:var(--stage-accent)}
.n-cal i.q{border-color:color-mix(in srgb,var(--stage-accent) 45%,transparent);background:color-mix(in srgb,var(--stage-accent) 10%,transparent)}
.n-prize{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--stage-muted)}
.n-prize i{width:34px;height:34px;flex:none;border-radius:10px;background:linear-gradient(135deg,#F2B735,#FF8C5A);box-shadow:0 0 0 3px rgba(242,183,53,.25)}
.n-worlds{display:grid;gap:10px;width:min(100%,360px)}
.n-worlds div{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:16px;background:var(--ground);font-weight:800}
.n-worlds i{width:34px;height:34px;border-radius:10px;flex:none}
.n-worlds span{margin-left:auto;font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--muted);white-space:nowrap}
.n-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:min(100%,380px)}
.n-facts div{display:grid;gap:4px;align-content:start;padding:18px;border-radius:18px;background:var(--card)}
.n-facts b{font-family:var(--n-display);font-weight:900;font-size:clamp(26px,3.4vw,38px);line-height:1;letter-spacing:-.02em}
.n-facts span{font-size:13px;font-weight:700;color:var(--muted)}
@media (max-width:360px){.n-facts div{padding:14px}.n-worlds div{padding:10px 12px;gap:10px}.n-board div{padding:10px 12px}}

/* 5 — il lancio */
.n-finale{text-align:center;padding-block:16vh 12vh;display:grid;justify-items:center;gap:20px}
.n-date{font-family:var(--n-display);font-weight:900;font-size:clamp(40px,14vw,170px);line-height:.9;letter-spacing:-.045em;color:var(--accent);margin:0;white-space:nowrap}
.n-sub{font-family:var(--n-display);font-weight:800;font-size:clamp(18px,2.4vw,28px);letter-spacing:-.01em;margin:0;text-wrap:balance}
.n-follow{font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:14px}
.n-social{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}

/* 6 — domande */
.n-faq{padding-block:4vh 12vh}
.n-faq h2{font-family:var(--n-display);font-weight:900;font-size:clamp(28px,4vw,48px);letter-spacing:-.02em;margin-bottom:22px}
.n-faq details{border-top:1px solid var(--line);padding:18px 0}
.n-faq details:last-of-type{border-bottom:1px solid var(--line)}
.n-faq summary{cursor:pointer;font-weight:800;font-size:17px;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.n-faq summary::-webkit-details-marker{display:none}
.n-faq summary::after{content:"+";flex:none;font-family:var(--n-display);color:var(--accent);transform:none}
.n-faq details[open] summary::after{content:"–";transform:none}
.n-faq details p{margin-top:10px;color:var(--ink-2);font-size:16px;max-width:66ch}

/* i titoli giganti non escono mai dal loro spazio: la parola più lunga (in em, carattere Unbounded Black, spaziatura
   compresa) sta sempre dentro la larghezza del contenitore. Per esempio "padroneggiarlo." è largo 9,93 em: su un
   telefono da 360 px la frase scende a 32 px invece di uscire di lato. --fit è la parola più lunga, con un po' di margine. */
.n-say p{--fit:10.2}
.n-cap h2{--fit:7.7}
.n-date{--fit:7.8}
.n-card h3{--fit:5.9}
html[lang="en"] .n-say p{--fit:5.6}
html[lang="en"] .n-cap h2{--fit:7.2}
html[lang="en"] .n-date{--fit:8}
html[lang="en"] .n-card h3{--fit:6.6}
@supports (width:1cqw){
  .n-stage,.n-say .n-in,.n-caps,.n-finale,.n-card .n-txt{container-type:inline-size}
  .n-pin{--pw:min(860px,calc(100cqw - 2 * var(--gut)))}
  .fx .n-pin{--pw:min(820px,calc(100cqw - 2 * var(--gut)),calc((100svh - var(--hdr) - 380px) * 2.16))}
  .n-say p{font-size:min(110px,max(34px,7.2vw),calc(100cqw / var(--fit)))}
  .n-cap h2{font-size:min(clamp(30px,5.4vw,66px),calc(100cqw / var(--fit)))}
  .n-date{font-size:min(170px,max(56px,14vw),calc(100cqw / var(--fit)))}
  .n-card h3{font-size:min(clamp(28px,4.2vw,50px),calc(100cqw / var(--fit)))}
  @media (min-width:700px) and (min-height:521px) and (max-height:860px){.n-cap h2{font-size:min(clamp(28px,4.2vw,50px),calc(100cqw / var(--fit)))}}
  @media (min-width:700px) and (min-height:521px) and (max-height:700px){.n-cap h2{font-size:min(40px,calc(100cqw / var(--fit)))}}
  @media (orientation:landscape) and (max-height:520px){
    .fx .n-pin{--pw:min(54cqw,calc((100svh - var(--hdr) - 44px) * 2.16))}
    .n-cap h2{font-size:min(clamp(24px,4vw,40px),calc(100cqw / var(--fit)))}
  }
}

/* l'invito a scorrere: fisso in basso, semitrasparente. Sparisce mentre si scorre e ricompare quando ci si ferma;
   una goccia di colore scende di continuo nella linea. Sui fondi scuri e blu cambia colore da solo; se in basso c'è
   l'avviso dei cookie o quello della lingua, home.js lo alza sopra l'avviso. */
.n-cue{--cue-ink:var(--muted);--cue-track:color-mix(in srgb,var(--muted) 30%,transparent);--cue-drop:var(--accent);
  position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:25;translate:-50% 0;display:grid;justify-items:center;gap:9px;padding:6px 10px;
  font-size:10px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--cue-ink);pointer-events:none;
  opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.n-cue.show{opacity:.7;transform:none}
.n-cue.on-dark{--cue-ink:rgba(242,242,238,.72);--cue-track:rgba(242,242,238,.22);--cue-drop:#7D98FF}
.n-cue.on-accent{--cue-ink:rgba(255,255,255,.85);--cue-track:rgba(255,255,255,.32);--cue-drop:#FFFFFF}
.n-cue .t{padding-left:.26em}
.n-rail{position:relative;display:block;width:3px;height:38px;border-radius:3px;background:var(--cue-track);overflow:hidden}
.n-rail i{position:absolute;left:0;top:0;width:100%;height:45%;border-radius:3px;background:var(--cue-drop);transform:translateY(60%)}
.fx .n-cue.show .n-rail i{animation:n-rail 2.2s cubic-bezier(.6,0,.3,1) infinite}
@keyframes n-rail{0%{transform:translateY(-110%)}65%,100%{transform:translateY(250%)}}
@media (orientation:landscape) and (max-height:520px){.n-cue{bottom:calc(4px + env(safe-area-inset-bottom,0px));gap:0}.n-cue .t{display:none}.n-rail{height:26px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}