/* TinyTIME · sito pubblico. Palette di GREAT; display Baloo 2, testo Atkinson Hyperlegible (pensato per chi legge con fatica). */
@font-face{font-family:"Baloo 2";src:url(/fonts/baloo-2-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Baloo 2";src:url(/fonts/baloo-2-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
  --turchese:#1bb5b5;--turchese-scuro:#0e8a8f;--giallo:#f7c843;--corallo:#f2795c;--notte:#1d2550;
  --foglia:#e3f6f2;--carta:#fffefb;--testo:#1d2550;--tenue:#4b5478;
  --display:"Baloo 2",ui-rounded,system-ui,sans-serif;--body:"Atkinson Hyperlegible",system-ui,sans-serif;
  --r:28px;--gutter:clamp(16px,4vw,48px)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--carta);color:var(--testo);font:18px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}a{color:var(--turchese-scuro)}
:focus-visible{outline:4px solid var(--giallo);outline-offset:3px;border-radius:8px}
.wrap{max-width:1160px;margin:0 auto;padding:0 var(--gutter)}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.02;margin:0;letter-spacing:-.01em}
h2{font-size:clamp(34px,5vw,58px)}h3{font-size:28px;font-weight:600}
p{margin:0 0 14px}.lead{font-size:clamp(19px,2vw,22px);color:var(--tenue);max-width:34ch}

/* intestazione */
.top{position:sticky;top:0;z-index:10;background:rgba(255,254,251,.92);backdrop-filter:blur(8px);border-bottom:2px solid var(--foglia)}
.top .wrap{display:flex;align-items:center;gap:22px;min-height:72px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--notte);font:800 28px var(--display)}
.logo b{color:var(--corallo)}.logo svg{width:44px;height:36px}
.nav{display:flex;gap:4px;margin-left:auto}.nav a{color:var(--notte);text-decoration:none;font-weight:700;padding:8px 12px;border-radius:12px}
.nav a:hover{background:var(--foglia)}
.btn{display:inline-flex;align-items:center;gap:8px;font:700 18px var(--body);text-decoration:none;border-radius:999px;padding:12px 22px;border:3px solid var(--notte);color:var(--notte);background:#fff;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}.btn.pieno{background:var(--notte);color:#fff}.btn.giallo{background:var(--giallo)}
.btn i{font-size:22px}
@media (max-width:860px){.nav{display:none}.top .btn{margin-left:auto;padding:9px 16px;font-size:16px}}

/* prima schermata: la frase e la prova di conteggio */
.hero{padding:clamp(40px,7vw,90px) 0 40px;position:relative}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(48px,8vw,104px)}
.hero h1 em{font-style:normal;color:var(--turchese);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.08em;height:.16em;background:var(--giallo);z-index:-1;border-radius:99px}
.hero .lead{margin:22px 0 28px}
.azioni{display:flex;flex-wrap:wrap;gap:12px}
.prova{background:var(--foglia);border-radius:40px;padding:28px;position:relative;border:3px solid var(--notte);box-shadow:10px 10px 0 var(--notte)}
.prova .consegna{font:800 30px/1.1 var(--display);margin:0 0 6px}
.prova .aiuto{color:var(--tenue);font-size:16px;margin:0 0 14px}
.mele{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:16px}
.mela{appearance:none;border:0;background:none;padding:0;cursor:pointer;position:relative;aspect-ratio:1}
.mela svg{width:100%;height:100%;transition:transform .2s}
.mela:hover svg{transform:rotate(-6deg) scale(1.05)}
.mela.contata svg{transform:scale(.88);opacity:.55}
.mela span{position:absolute;top:-4px;right:-2px;background:var(--notte);color:#fff;font:800 20px var(--display);width:36px;height:36px;border-radius:50%;display:none;align-items:center;justify-content:center}
.mela.contata span{display:flex}
.esito{display:flex;align-items:center;gap:16px;min-height:96px}
.esito .numero{font:800 84px/1 var(--display);color:var(--corallo);min-width:70px}
.esito p{margin:0;font-weight:700}
.esito svg{width:110px;height:90px;margin-left:auto;flex:none}
.ricomincia{font:700 15px var(--body);background:none;border:0;color:var(--turchese-scuro);text-decoration:underline;cursor:pointer;padding:4px 0}

/* la scia di GREAT: una linea tratteggiata che attraversa la pagina */
.scia{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:-1}
.scia path{fill:none;stroke:var(--turchese);stroke-width:5;stroke-linecap:round;stroke-dasharray:2 16;opacity:.35}
main{position:relative}
.tappa{position:relative;padding:clamp(56px,8vw,110px) 0}
.etichetta{display:inline-flex;align-items:center;gap:8px;font:800 15px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--turchese-scuro);margin-bottom:14px}
.etichetta::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--giallo);border:3px solid var(--notte)}

/* come gioca */
.tre{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.carta{background:#fff;border:3px solid var(--notte);border-radius:var(--r);padding:26px}
.carta i{font-size:44px;color:var(--corallo)}.carta h3{margin:10px 0 8px}
.carta p{color:var(--tenue);margin:0}

/* schermate vere */
.schermi{display:grid;grid-template-columns:1.3fr 1fr;gap:26px;margin-top:40px;align-items:start}
.tablet{background:var(--notte);border-radius:34px;padding:14px;box-shadow:0 30px 60px -30px rgba(29,37,80,.55)}
.tablet img{border-radius:22px}
.schermi.due{grid-template-columns:1fr 1fr}
.schermi figure{margin:0}.schermi figcaption{font-size:16px;color:var(--tenue);margin-top:12px}
.schermi .colonna{display:grid;gap:26px}

/* per chi */
.per-chi{background:var(--notte);color:#fff;border-radius:48px;margin:0 var(--gutter);padding:clamp(48px,7vw,90px) 0}
.per-chi .etichetta{color:var(--giallo)}
.per-chi .lead{color:#c9cfe8}
.pubblici{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.pubblico{background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.18);border-radius:var(--r);padding:28px;scroll-margin-top:90px}
.pubblico h3{color:#fff;margin-bottom:10px}.pubblico i.grande{font-size:48px;color:var(--giallo)}
.pubblico ul{padding-left:20px;margin:12px 0 0;color:#dfe3f5}.pubblico li{margin-bottom:6px}

/* privacy: la frase grande */
.promessa{text-align:center}
.promessa h2{font-size:clamp(40px,7vw,86px);max-width:15ch;margin:0 auto}
.promessa h2 span{color:var(--corallo)}
.promessa .lead{margin:22px auto 0;max-width:46ch}
.punti{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.punti span{border:3px solid var(--notte);border-radius:999px;padding:8px 18px;font-weight:700;background:#fff}
.punti i{color:var(--turchese-scuro);margin-right:6px}

/* codice e contatti */
.chiusura{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.chiusura .carta{padding:34px}
.chiusura .carta.gialla{background:var(--giallo)}
.chiusura code{font:700 20px ui-monospace,Menlo,monospace;background:#fff;border:2px dashed var(--notte);border-radius:12px;padding:6px 10px;display:inline-block;margin:6px 0 12px}

footer.fondo{padding:40px 0 56px;color:var(--tenue);font-size:15px}
footer.fondo .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
footer.fondo a{color:var(--tenue)}

/* entrata dei blocchi (solo se il movimento è consentito) */
@media (prefers-reduced-motion:no-preference){
  .entra{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
  .entra.vista{opacity:1;transform:none}
  .great-cammina{animation:cammina 2.4s ease-in-out infinite}
  @keyframes cammina{50%{transform:translateX(6px)}}
}

@media (max-width:900px){
  .hero .wrap,.schermi,.schermi.due,.chiusura{grid-template-columns:1fr}
  .tre,.pubblici{grid-template-columns:1fr}
  .per-chi{border-radius:32px;margin:0 8px}
  .prova{box-shadow:6px 6px 0 var(--notte)}
}

/* accedi */
.accedi{min-height:calc(100vh - 74px);display:grid;grid-template-columns:1fr 1fr}
.accedi .lato{background:var(--foglia);display:flex;flex-direction:column;justify-content:center;padding:48px clamp(24px,5vw,72px)}
.accedi .lato h1{font-size:clamp(40px,5vw,64px)}
.accedi .lato svg{width:min(260px,60%);height:auto;margin-bottom:20px}
.accedi .modulo{display:flex;align-items:center;justify-content:center;padding:48px var(--gutter)}
.accedi form{width:100%;max-width:400px}
.accedi label{display:block;font-weight:700;margin:16px 0 6px}
.accedi input[type=email],.accedi input[type=password]{width:100%;font:18px var(--body);padding:14px 16px;border:3px solid var(--notte);border-radius:16px;background:#fff;color:var(--notte)}
.accedi .ricorda{display:flex;align-items:center;gap:8px;font-weight:400;margin-top:14px}
.accedi .errore{background:#fdece6;border:2px solid var(--corallo);border-radius:14px;padding:10px 14px;margin-top:14px}
.accedi .btn{width:100%;justify-content:center;margin-top:22px}
.accedi .nota{font-size:15px;color:var(--tenue);margin-top:18px}
@media (max-width:860px){.accedi{grid-template-columns:1fr}.accedi .lato{padding-top:32px;padding-bottom:32px}.accedi .lato svg{display:none}}

/* novità e versioni */
.changelog .carta{padding:clamp(20px,4vw,40px)}
.changelog h2{font-size:30px;margin:28px 0 10px;padding-top:20px;border-top:3px dashed var(--foglia)}
.changelog h2:first-child{margin-top:0;border-top:0;padding-top:0}
.changelog h3{font-size:22px;margin:18px 0 6px;color:var(--turchese-scuro)}
.changelog ul{padding-left:22px;margin:0 0 10px}.changelog li{margin-bottom:6px}
.changelog code{background:var(--foglia);border-radius:6px;padding:1px 6px;font-size:.92em}