/*
========================================
ChatMapp Quest — pagina del gioco (quest.html)
Base: bozza "geogame" di Roman. Stile proprio del gioco (legno, carta,
Itim/Caveat), volutamente diverso dalla home: è lo stesso mondo che si
vede dentro l'app. Le aggiunte per l'integrazione nel sito sono in fondo,
nella sezione "INTEGRAZIONE SITO".
========================================
*/
:root{
  --card:#FEF8E7; --card-border:#EBA85B; --section:#FDF1D5; --ink:#3A2A16; --muted:#7A6642; --track:#EADFC6;
  --cord:#B98446; --hook:#C79052; --wood-d:#9A6B33; --wood-l:#CB9558; --nail-d:#7E5526; --nail-l:#DDB47C;
  --start:#EF9F27; --start-b:#C87F13; --start-ink:#4A2B02;
  --target:#E53935; --tap:#712000; --pin-stroke:#F3E8D1; --green:#2E9E4F;
  --slate:#16242E; --paper:#F3E4C4; --sheet:#F3E8D1; --pencil:#3E3424;
  --bonus-bg:#FFF3D0; --bonus-b:#D9821A; --ribbon:#B98446; --frame:#5C4527;
  --f-ui:'Itim','Trebuchet MS','Segoe UI',system-ui,sans-serif;
  --f-hand:'Caveat','Segoe Print','Bradley Hand',cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--f-ui);color:var(--ink);background:var(--paper);font-size:18px;line-height:1.5;overflow-x:hidden}
img{max-width:100%;display:block}
h1,h2,h3{font-weight:400;margin:0;line-height:1.12}
p{margin:0}
a{color:inherit}
button{font:inherit}
:focus-visible{outline:3px solid var(--start-b);outline-offset:3px;border-radius:6px}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
[hidden]{display:none!important}

/* ---------- scena di sfondo ---------- */
.scene{position:absolute;inset:0;z-index:-1;background:var(--paper);overflow:hidden}
.scene .fallback,.scene .scene-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scene .scene-img{opacity:0;transition:opacity .9s ease}
.scene .scene-img.ready{opacity:1}
.scene .veil{position:absolute;inset:0;background:rgba(243,228,196,.26)}
.clouds{position:absolute;inset:0;pointer-events:none}
.cloud{position:absolute;left:0;animation:drift linear infinite}
.cloud.c1{top:9%;width:190px;height:95px;animation-duration:110s;animation-delay:-40s}
.cloud.c2{top:24%;width:130px;height:65px;animation-duration:150s;animation-delay:-100s;opacity:.9}
@keyframes drift{from{transform:translateX(-35vw)}to{transform:translateX(125vw)}}

/* ---------- barra in alto ---------- */
.topbar{position:absolute;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:calc(12px + env(safe-area-inset-top)) 18px 10px}
.brand{display:flex;align-items:center;text-decoration:none;font-size:21px;color:var(--ink)}
.brand img{height:30px;width:auto}
.lang{display:flex;gap:6px}
.lang button{font-size:14px;line-height:1.2;border:2px solid var(--card-border);background:rgba(254,248,231,.9);color:var(--ink);border-radius:999px;padding:4px 10px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--start);border-color:var(--start-b);color:var(--start-ink)}

/* ---------- insegna appesa ---------- */
.hanger{position:relative;transform-origin:50% 0}
.hooks{position:relative;height:42px}
.hook{position:absolute;top:0;width:18px;height:42px;margin-left:-9px}
.hook:nth-child(1){left:22%}.hook:nth-child(2){left:78%}
.hook::before{content:"";position:absolute;left:7.5px;top:6px;width:3px;height:30px;background:var(--cord)}
.hook::after{content:"";position:absolute;left:3px;top:0;width:12px;height:12px;border-radius:50%;background:var(--hook)}
.hook i{position:absolute;left:3px;top:30px;width:12px;height:12px;border:3px solid var(--cord);border-radius:50%}
.sign{position:relative;z-index:2;color:var(--ink);background:var(--card);border:2.5px solid var(--card-border);border-radius:14px;box-shadow:0 3px 5px rgba(0,0,0,.2);padding:12px 18px 14px;text-align:center}
.ribbon{display:inline-block;background:var(--ribbon);color:#fff;font-size:13px;letter-spacing:.8px;border-radius:999px;padding:3px 12px;line-height:1.35}
.segs{display:flex;gap:3px;margin-top:14px}
.segs i{flex:1;height:4px;border-radius:2px;background:var(--track)}
.segs i.done{background:var(--card-border)}
.segs i.on{background:var(--ink)}
.timer{height:5px;border-radius:3px;background:var(--track);margin-top:10px;overflow:hidden}
.timer b{display:block;height:100%;background:var(--green);border-radius:inherit;transform-origin:left center}
.tag{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.tag-cords{position:relative;width:100%;height:14px}
.tag-cords::before,.tag-cords::after{content:"";position:absolute;top:0;width:3px;height:14px;margin-left:-1.5px;background:var(--cord)}
.tag-cords::before{left:43%}.tag-cords::after{left:57%}
.tag-pill{color:var(--ink);display:flex;align-items:center;gap:9px;height:42px;max-width:240px;padding:0 16px;background:var(--card);border:2px solid var(--card-border);border-radius:21px;box-shadow:0 3px 5px rgba(0,0,0,.2);font-size:15px;white-space:nowrap}
.tag-pill i{width:9px;height:9px;border-radius:50%;background:var(--c,#BDBDBD);flex:none}
.tag-pill .dv{width:1px;height:14px;background:var(--track);flex:none}

/* ---------- segnavia ---------- */
.post-col{position:relative;--cw:min(360px,calc(100vw - 40px));--pt:24px;width:var(--cw);margin:0 auto;padding-top:var(--pt);padding-bottom:44px}
.post{position:absolute;top:calc(var(--pt) + 34px);bottom:0;left:50%;width:26px;margin-left:-13px;transform-origin:50% 100%}
.post svg{display:block;width:100%;height:100%}
.arms{position:relative;z-index:2;display:flex;flex-direction:column}
.arms > * + *{margin-top:7px}
.arm{position:relative;isolation:isolate;width:calc(var(--cw) / 2 + 14px);color:var(--ink);text-decoration:none;--o:50% 50%}
.arm > svg.bg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;z-index:-1;pointer-events:none}
.arm.l{align-self:flex-start;padding:9px 16px 11px 34px;--o:calc(100% - 14px) 50%}
.arm.r{align-self:flex-end;padding:9px 34px 11px 16px;text-align:right;--o:14px 50%}
.arm.info{cursor:pointer;-webkit-tap-highlight-color:transparent}
.lab{display:block;font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);line-height:1.25;white-space:nowrap}
.val{display:block;font-size:27px;line-height:1;white-space:nowrap}
.val small{font-size:15px;margin-left:5px;color:var(--muted)}
.logo-arm{width:auto;align-self:center;display:flex;justify-content:center;align-items:center;padding:16px 22px 18px;margin-bottom:2px}
.logo-arm img{height:76px;width:auto}
.logo-fb{font-size:30px;line-height:1;text-align:center;padding:4px 18px}
.arm.row{display:flex;align-items:center;gap:8px;font-size:15px;letter-spacing:.4px;line-height:1.2}
.arm.row span{flex:1;text-align:left}
.arm.row svg.ic{flex:none;width:24px;height:24px}
.arm.row svg.chev{flex:none;width:22px;height:22px}
.arm.start{width:var(--cw);align-self:center;display:flex;justify-content:center;align-items:center;gap:8px;padding:12px 14px 15px;font-size:26px;line-height:1;letter-spacing:.6px;color:var(--start-ink);margin-top:11px!important}
.arm.start svg.play{width:26px;height:26px;flex:none}
.arm.start:hover{filter:brightness(1.05)}
.plates{display:flex;justify-content:space-between;margin-top:10px!important}
.plate{width:max(90px,calc((var(--cw) - 30px) / 2));display:flex;align-items:center;justify-content:center;min-height:56px}
.plate.pl{padding:9px 20px 11px 11px;--o:calc(100% - 9px) 50%}
.plate.pr{padding:9px 11px 11px 20px;--o:9px 50%}
.plate img{height:34px;width:auto}
.bfb{display:inline-block;background:#1b1b1b;color:#fff;font-size:14px;border-radius:7px;padding:6px 10px;white-space:nowrap}
.exit{align-self:flex-start;display:inline-block;margin-top:4px!important;padding:14px 22px 8px 4px;font-size:16px;letter-spacing:.5px;text-decoration:underline;text-decoration-color:var(--card-border);text-underline-offset:5px;text-shadow:0 .5px 7px rgba(255,255,255,.55)}
.hero-cta{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:24px}
.hero-badges{margin-top:0}
.hero-badges img{height:46px}
.hero-badges a{filter:drop-shadow(0 3px 5px rgba(0,0,0,.25))}
.how-btn{display:inline-flex;align-items:center;gap:10px;font-size:20px;line-height:1.2;text-decoration:none;color:var(--ink);background:var(--card);border:2.5px solid var(--card-border);border-radius:999px;padding:10px 20px 11px 24px;box-shadow:0 3px 5px rgba(0,0,0,.2);transition:translate .2s}
.how-btn svg{width:22px;height:22px;flex:none}
.how-btn:hover{translate:0 2px}
.bird{position:absolute;top:-21px;width:33px;height:26px;pointer-events:none}
.snail{position:absolute;left:calc(50% + 3px);bottom:120px;width:22px;height:29px;z-index:1}
.post-rib{position:absolute;left:calc(50% - 8.5px);bottom:170px;width:36px;height:46px;z-index:1;overflow:visible}
.post-rib .tl{transform-box:fill-box;transform-origin:0 0;animation:ribSway 3.4s ease-in-out infinite}
.post-rib .tl2{animation-delay:-.9s}
@keyframes ribSway{0%,100%{rotate:-7deg}50%{rotate:9deg}}

/* ---------- apertura ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;isolation:isolate}
.hero-inner{position:relative;max-width:1180px;margin:0 auto;padding:0 20px;display:grid;grid-template-rows:auto 1fr;min-height:100vh;min-height:100svh}
.sign-col{padding-top:calc(54px + env(safe-area-inset-top))}
.h-hero .sign h1{font-size:clamp(28px,7.6vw,56px);margin:10px 0 8px}
.h-hero .sign .sub{font-size:clamp(16px,4.3vw,21px);color:var(--muted);max-width:34ch;margin:0 auto;line-height:1.35}
.hero .post-col .bird{left:30px}
@media (min-width:900px){
  .hero-inner{grid-template-rows:1fr;grid-template-columns:minmax(0,1fr) 380px;column-gap:64px}
  .sign-col{padding-top:74px;max-width:640px}
  .hero .post-col{--cw:380px;--pt:96px;margin:0}
  .logo-arm img{height:88px}
}

/* animazione d'apertura (una volta sola) */
.intro .h-hero{animation:signDrop 1.9s .25s both}
.intro .h-hero .tag{animation:tagDrop .45s 2s cubic-bezier(.34,1.56,.64,1) both}
.intro .post{animation:postUp .36s ease-out both}
.intro .arms .arm{animation:armDrop .48s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(.31s + var(--i,0) * .132s);transform-origin:var(--o)}
.intro .hero-cta{animation:fadeIn .5s 2.1s both}
.intro .snail,.intro .post-rib,.intro .bird{animation:fadeIn .4s 1.6s both}
@keyframes signDrop{
  0%{translate:0 -135%;rotate:0deg;animation-timing-function:cubic-bezier(.2,.7,.3,1)}
  30%{translate:0 0;rotate:0deg}
  42%{rotate:3.6deg}54%{rotate:-2.6deg}66%{rotate:1.5deg}78%{rotate:-.7deg}90%{rotate:.25deg}
  100%{translate:0 0;rotate:0deg}}
@keyframes tagDrop{from{translate:0 -56px}to{translate:0 0}}
@keyframes postUp{from{scale:1 0}to{scale:1 1}}
@keyframes armDrop{0%{opacity:0;translate:0 -80px;rotate:11deg}25%{opacity:1}100%{opacity:1;translate:0 0;rotate:0deg}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.arm.swing{animation:armSwing 1.1s ease-out;transform-origin:var(--o)}
@keyframes armSwing{0%{rotate:0deg}14%{rotate:8deg}34%{rotate:-5.5deg}54%{rotate:3deg}74%{rotate:-1.3deg}100%{rotate:0deg}}

/* ---------- sezioni ---------- */
.sec{position:relative;padding:clamp(64px,10vw,120px) 0}
.sec h2{font-size:clamp(32px,6vw,52px)}
.lead{font-size:clamp(18px,2.2vw,21px);max-width:40ch;margin-top:16px}
.dark{background:var(--slate);color:var(--card);overflow:hidden;isolation:isolate}
.secbg{position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block}

/* come si gioca */
.how{display:grid;gap:44px}
.steps{list-style:none;padding:0;margin:26px 0 0;counter-reset:s}
.steps li{position:relative;padding-left:54px;margin-top:20px;max-width:36ch;font-size:19px}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:-3px;width:38px;height:38px;border-radius:50%;background:var(--card);color:var(--ink);border:2.5px solid var(--card-border);display:grid;place-items:center;font-size:18px}
.note{margin-top:30px;max-width:40ch;color:rgba(254,248,231,.72);font-size:16px}
.stage-wrap{position:relative;width:100%;max-width:400px;margin:0 auto}
.stage{position:relative;aspect-ratio:373/656;border-radius:18px;overflow:hidden;background:#EDE3C7;border:5px solid var(--frame);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.stage > svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.hud{position:absolute;left:0;right:0;top:0;padding:0 20px;z-index:3;pointer-events:none}
.hud .hooks{height:36px}
.hud .hook{height:36px}
.hud .hook::before{height:24px}
.hud .hook i{top:24px}
.h-demo{translate:0 -120%}
.h-demo .sign{padding:10px 16px 12px}
.h-demo .nm{font-size:clamp(20px,5.8vw,24px);line-height:1.15;min-height:1.15em}
.h-demo .tot{display:block;font-size:clamp(26px,7vw,32px);line-height:1.1;margin-top:2px}
.h-demo .segs{margin-top:10px}
.h-demo.final .timer{visibility:hidden}
.h-demo .tag{translate:0 -56px}
.hint{position:absolute;inset:0;z-index:4;display:grid;place-items:center;background:rgba(22,36,46,.2);opacity:0;transition:opacity .32s;pointer-events:none}
.hint p{font-size:clamp(24px,7vw,32px);line-height:1.15;color:var(--card);text-align:center;max-width:11em;padding:0 26px;text-shadow:0 2px 10px rgba(22,36,46,.7);scale:1.12;transition:scale .2s ease-out}
.hint.on{opacity:1;transition-duration:.2s}
.hint.on p{scale:1}
.gstrip{position:relative;z-index:5;display:flex;flex-direction:row-reverse;align-items:flex-end;gap:6px;margin-top:-48px;padding:0 6px;min-height:120px;pointer-events:none;opacity:0;transition:opacity .45s}
.gstrip.show{opacity:1;transition-duration:.1s}
.gface{height:124px;width:auto;flex:none}
.gstrip .gface{opacity:0}
.gstrip.show .gface{animation:ginoIn .68s cubic-bezier(.3,1.25,.6,1) both}
.gbub{position:relative;background:var(--card);color:var(--ink);border:2.5px solid var(--card-border);border-radius:16px;padding:9px 13px 10px;font-size:15px;line-height:1.3;box-shadow:0 3px 6px rgba(0,0,0,.2);max-width:62%;margin-bottom:34px}
.gbub::after{content:"";position:absolute;right:-9px;bottom:14px;width:14px;height:14px;background:var(--card);border-right:2.5px solid var(--card-border);border-bottom:2.5px solid var(--card-border);rotate:-45deg}
.gstrip .gbub{opacity:0;translate:0 8px;transition:opacity .26s,translate .26s}
.gstrip.show .gbub{opacity:1;translate:0 0;transition-delay:.4s}
.gname{display:block;font-size:12px;letter-spacing:.6px;color:var(--muted)}
@keyframes ginoIn{from{opacity:0;scale:.15;rotate:-360deg}40%{opacity:1}to{opacity:1;scale:1;rotate:0deg}}
.replay{display:inline-flex;align-items:center;gap:9px;margin:14px auto 0;font-size:17px;border:2.5px solid var(--card-border);background:var(--card);color:var(--ink);border-radius:999px;padding:8px 18px 9px 14px;cursor:pointer;box-shadow:0 3px 5px rgba(0,0,0,.25)}
.replay svg{width:20px;height:20px}
.replay-row{display:flex;justify-content:center}
@media (min-width:900px){
  .how{grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:80px;align-items:center}
}

/* bacheca dei round speciali */
.board-sec{position:relative;padding:clamp(44px,7vw,90px) 0}
.board{position:relative;max-width:1180px;margin:0 10px;padding:30px 18px 38px}
.board > canvas.bgc{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0}
.sheets{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px}
.sheet{position:relative;isolation:isolate;padding:22px 14px 16px;rotate:var(--r,0deg)}
.sheet > canvas{position:absolute;left:-8px;top:-8px;width:calc(100% + 16px);height:calc(100% + 16px);z-index:-1;pointer-events:none}
.sheet.head{grid-column:1 / -1;max-width:640px;padding:26px 22px 22px}
.sheet.head h2{font-size:clamp(30px,6vw,48px)}
.sheet.head p{margin-top:10px;max-width:38ch}
.rib{display:inline-block;background:var(--ribbon);color:#fff;font-size:12px;letter-spacing:.7px;border-radius:10px;padding:2px 10px;line-height:1.4}
.rib.fin{background:var(--bonus-b)}
.ill{height:74px;margin:12px 0 8px;display:grid;place-items:center}
.ill svg{height:74px;width:auto;max-width:100%}
.pen{font-family:var(--f-hand);font-size:22px;line-height:1.05;color:var(--pencil)}
.mini-sign{background:var(--bonus-bg);border:2.5px solid var(--bonus-b);border-radius:10px;padding:6px 10px;font-size:19px;letter-spacing:1px;white-space:nowrap}
.mini-sign .h{color:transparent;text-decoration:underline;text-decoration-color:var(--muted);text-underline-offset:3px}
.bets{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
.bets b{font-weight:400;font-size:12px;letter-spacing:.6px;border-radius:9px;padding:6px 8px;border:2px solid var(--card-border);background:var(--card)}
.bets b.dbl{background:var(--start);border-color:var(--start-b);color:var(--start-ink)}
@media (min-width:900px){
  .board{margin:0 auto;padding:40px 36px 48px}
  .sheets{grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 30px}
  .pen{font-size:24px}
}

/* gino */
.gino-grid{display:grid;gap:36px;align-items:center}
.gino-stage{display:flex;flex-direction:column;align-items:center;text-align:center}
.gino-stage .gbub{max-width:30ch;font-size:clamp(18px,2.4vw,21px);padding:14px 18px;margin:0 0 18px;min-height:3.4em;display:grid;place-items:center}
.gino-stage .gbub::after{right:auto;left:50%;bottom:-9px;margin-left:-7px;rotate:45deg}
.gino-stage .gface{height:170px}
.gino-stage.pop .gface{animation:ginoIn .68s cubic-bezier(.3,1.25,.6,1) both}
.gino-stage.pop .gbub{animation:fadeIn .3s .35s both}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:22px;max-width:560px}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:16px;background:var(--card);border:2px solid var(--card-border);border-radius:999px;padding:6px 14px 6px 11px;cursor:pointer;color:var(--ink);box-shadow:0 2px 3px rgba(0,0,0,.12)}
.chip i{width:10px;height:10px;border-radius:50%;background:var(--c);flex:none}
.chip small{color:var(--muted);font-size:13px}
.chip[aria-pressed="true"]{background:var(--start);border-color:var(--start-b);color:var(--start-ink)}
.chip[aria-pressed="true"] small{color:var(--start-ink)}
@media (min-width:900px){.gino-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}}

/* la tua zona */
.zone-sec{background:linear-gradient(#CBE2EC,#E6EDE0 38%,var(--paper) 70%);overflow:hidden;padding-bottom:0}
.hills{position:absolute;left:0;right:0;bottom:0;width:100%;height:170px;display:block}
.zone{position:relative;display:grid;gap:40px}
.zone-text{order:1}
.zone-post{order:2;--pt:10px;padding-bottom:120px}
.facts{display:grid;gap:24px;margin-top:28px}
.fact h3{font-size:23px}
.fact p{margin-top:5px;max-width:38ch}
.zone-post .bird{right:44px}
@media (min-width:900px){
  .zone{grid-template-columns:380px minmax(0,1fr);column-gap:80px;align-items:stretch}
  .zone-post{order:0;--cw:380px;--pt:6px;margin:0}
  .zone-text{padding-bottom:140px}
  .facts{grid-template-columns:1fr 1fr;gap:28px 36px}
}

/* il ponte verso chatmapp */
.bridge{display:grid;gap:40px}
.br-text p{margin-top:16px;max-width:40ch;font-size:clamp(18px,2.2vw,21px)}
.toggle{display:inline-flex;flex-wrap:nowrap;max-width:100%;background:rgba(254,248,231,.07);border:2px solid rgba(235,168,91,.6);border-radius:999px;padding:4px;margin-top:26px}
.toggle button{font-size:15px;white-space:nowrap;background:transparent;color:var(--card);border:0;border-radius:999px;padding:7px 13px;cursor:pointer}
.toggle button[aria-pressed="true"]{background:var(--start);color:var(--start-ink)}
.cta-link{display:inline-block;margin-top:28px;font-size:20px;color:var(--card);text-decoration:underline;text-decoration-color:var(--card-border);text-underline-offset:6px}
.bstage .lbl,.bstage .msgpins{opacity:0;transition:opacity .6s}
.bstage.app .lbl,.bstage.app .msgpins{opacity:1}
.lbl text{font-family:var(--f-ui);font-size:11px;fill:var(--ink);stroke:#FEF8E7;stroke-width:3px;paint-order:stroke;stroke-linejoin:round}
.chat{position:absolute;z-index:3;display:flex;gap:7px;align-items:flex-start;background:#fff;color:var(--ink);border-radius:13px;padding:7px 10px 8px 7px;box-shadow:0 5px 14px rgba(0,0,0,.28);font-size:13px;line-height:1.25;width:max-content;max-width:46%;opacity:0;translate:0 8px;transition:opacity .45s,translate .45s}
.bstage.app .chat{opacity:1;translate:0 0}
.bstage.app .chat:nth-child(2){transition-delay:.25s}
.bstage.app .chat:nth-child(3){transition-delay:.5s}
.chat .av{width:24px;height:24px;border-radius:50%;background:var(--start);color:var(--start-ink);display:grid;place-items:center;font-size:13px;flex:none}
.chat b{display:block;font-weight:400;font-size:11px;color:var(--muted)}
.chat::after{content:"";position:absolute;bottom:-6px;width:12px;height:12px;background:#fff;rotate:45deg}
.chat.to-r{transform:translate(-8px,calc(-100% - 10px))}
.chat.to-r::after{left:10px}
.chat.to-l{transform:translate(calc(-100% + 8px),calc(-100% - 10px))}
.chat.to-l::after{right:10px}
@media (min-width:900px){
  .bridge{grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:80px;align-items:center}
  .bridge .stage-wrap{order:-1}
}

/* scarica */
.dl{position:relative;isolation:isolate;overflow:hidden;padding:0 0 clamp(70px,10vw,120px)}
.h-dl{max-width:640px;margin:0 auto}
.h-dl .sign{padding:14px 20px 20px}
.h-dl h2{font-size:clamp(30px,6.5vw,50px);margin:4px 0 10px}
.h-dl .sub{color:var(--muted);font-size:clamp(17px,2.2vw,20px);max-width:36ch;margin:0 auto}
.badges{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:18px}
.badges a{display:inline-flex}
.badges img{height:50px;width:auto}
.badges .bfb{font-size:16px;padding:12px 16px;border-radius:10px}
.sheet.where{max-width:560px;margin:34px auto 0;padding:20px 20px 18px;--r:-1deg;text-align:center}
.sheet.where p{font-size:17px}

/* piè di pagina */
footer{background:var(--frame);color:var(--card);padding:34px 0 calc(34px + env(safe-area-inset-bottom));font-size:15px}
footer .wrap{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between}
footer nav{display:flex;flex-wrap:wrap;gap:12px 22px}
footer a{color:var(--card);text-decoration-color:rgba(235,168,91,.7);text-underline-offset:4px}
footer img{height:28px;width:auto}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cloud,.post-rib .tl{animation:none}
  .gstrip.show .gface,.gino-stage.pop .gface{animation:fadeIn .2s both}
  .arm.swing{animation:none}
}

/* =====================================================
   INTEGRAZIONE SITO
   ===================================================== */

/* --- barra in alto: logo ChatMapp leggibile + ritorno alla home --- */
.brand{gap:10px}
.brand img{height:44px;width:auto;filter:drop-shadow(0 2px 4px rgba(58,42,22,.18));transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.brand:hover img{transform:rotate(-4deg) scale(1.06)}
.brand-back{display:none;font-size:15px;line-height:1;color:var(--ink);background:rgba(254,248,231,.9);border:2px solid var(--card-border);border-radius:999px;padding:6px 12px 7px;box-shadow:0 2px 4px rgba(0,0,0,.12)}
@media (min-width:640px){
  .brand img{height:52px}
  .brand-back{display:inline-block}
}
.lang button{transition:background .2s,border-color .2s}
.lang button:hover{border-color:var(--start-b)}

/* --- logo del gioco sul segnavia --- */
.logo-arm picture{display:block}
.logo-arm img{height:84px;width:auto}
@media (min-width:900px){.logo-arm img{height:96px}}

/* --- paesaggio: respiro lentissimo, come lo sfondo della home --- */
.scene .scene-img.ready{animation:sceneBreathe 22s ease-in-out infinite alternate}
@keyframes sceneBreathe{from{transform:scale(1.07)}to{transform:scale(1)}}

/* --- insegna dell'apertura: il timer scorre davvero --- */
.hero-timer b{transform:scaleX(1);transition:background .3s}

/* --- badge store --- */
.badges a{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.badges a:hover{transform:translateY(-3px)}

/* --- comparsa morbida delle sezioni (solo se il JS è attivo) --- */
.js-rv .rv{opacity:0;translate:0 26px;transition:opacity .8s cubic-bezier(.16,1,.3,1),translate .8s cubic-bezier(.16,1,.3,1)}
.js-rv .rv.in{opacity:1;translate:0 0}
.js-rv .facts .rv:nth-child(2){transition-delay:.08s}
.js-rv .facts .rv:nth-child(3){transition-delay:.16s}
.js-rv .facts .rv:nth-child(4){transition-delay:.24s}
.js-rv .facts .rv:nth-child(5){transition-delay:.32s}

/* --- bacheca: i fogli vengono appesi uno alla volta --- */
.board.will-pin .sheet{opacity:0;translate:0 -34px;rotate:calc(var(--r,0deg) * 4)}
.board.will-pin .sheet.pinned{animation:sheetPin .7s cubic-bezier(.34,1.56,.64,1) both}
@keyframes sheetPin{
  0%{opacity:0;translate:0 -34px;rotate:calc(var(--r,0deg) * 4)}
  40%{opacity:1}
  100%{opacity:1;translate:0 0;rotate:var(--r,0deg)}
}
.sheet:not(.head){transition:scale .25s ease}
@media (hover:hover){.sheet:not(.head):hover{scale:1.035;z-index:2}}

/* =====================================================
   SCARICA — si torna nel mondo ChatMapp: stesso sfondo
   a onde arancioni della home, con lo smartphone dell'app
   ===================================================== */
.dl{background:#F5A21E;padding:0 0 clamp(70px,10vw,120px)}
.dl-bg{position:absolute;inset:0;z-index:-1;background:url("../assets/background-web.jpg") center/cover no-repeat;animation:dlBreathe 20s ease-in-out infinite alternate;transform-origin:50% 40%}
@keyframes dlBreathe{from{transform:scale(1.12)}to{transform:scale(1)}}
.dl-wave{position:relative;display:block;width:100%;height:clamp(40px,6vw,90px)}
.dl-grid{position:relative;display:grid;gap:30px;align-items:center;padding-top:clamp(30px,5vw,60px)}
.dl-phone{display:flex;justify-content:center}
.dl-phone-float{position:relative;width:min(260px,62vw);animation:phoneFloat 6s ease-in-out infinite}
.dl-phone-img{width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(90,40,0,.35))}
.dl-sticker{position:absolute;right:-12%;bottom:8%;width:54%;rotate:-9deg;filter:drop-shadow(0 8px 14px rgba(58,30,0,.35));animation:stickerWobble 6s ease-in-out infinite}
.dl-sticker img{width:100%;height:auto}
@keyframes phoneFloat{0%,100%{translate:0 0;rotate:-2deg}50%{translate:0 -14px;rotate:1deg}}
@keyframes stickerWobble{0%,100%{rotate:-9deg}50%{rotate:-4deg}}
.dl-main{position:relative}
.h-dl{max-width:600px;margin:0 auto}
.h-dl .sign{padding:14px 22px 24px}
.h-dl .ribbon{background:var(--green)}
.h-dl h2{margin:10px 0 10px}
.sheet.where{max-width:520px;margin:30px auto 0}
.dl .hooks .hook::before{background:#8A5A22}
.dl .hook i{border-color:#8A5A22}
@media (min-width:900px){
  .dl-grid{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:70px}
  .dl-phone-float{width:340px}
  .h-dl{margin:0}
  .sheet.where{margin:34px 0 0 30px}
}

/* --- piè di pagina --- */
footer img{height:40px}

@media (prefers-reduced-motion:reduce){
  .scene .scene-img.ready,.dl-bg,.dl-phone-float,.dl-sticker{animation:none}
  .js-rv .rv{opacity:1;translate:none;transition:none}
  .board.will-pin .sheet{opacity:1;translate:none;rotate:var(--r,0deg)}
}

/* =====================================================
   RITOCCHI 24/09/2026
   ===================================================== */

/* --- apertura su desktop: il paesaggio del gioco è disegnato per il
   telefono (852×1846) e su uno schermo largo si ingrandisce quasi del
   doppio. Invece di nascondere la sgranatura la trasformiamo in un
   effetto "stampa": immagine appena ammorbidita, retino a punti come
   un manifesto serigrafato, grana di carta e vignettatura calda. --- */
@media (min-width:900px){
  .hero .scene .scene-img{filter:blur(.7px) saturate(1.12) contrast(1.04)}
  .hero .scene::after{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
    background:
      radial-gradient(ellipse 75% 70% at 50% 45%,transparent 55%,rgba(74,43,2,.28) 100%),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .23  0 0 0 0 .16  0 0 0 0 .09  0 0 0 .55 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>"),
      radial-gradient(circle at 50% 50%,rgba(58,42,22,.30) 0 1px,transparent 1.5px);
    background-size:auto,240px 240px,5px 5px;
    mix-blend-mode:multiply;opacity:.6;
  }
  .hero .scene .veil{background:rgba(243,228,196,.18)}
}

/* --- decorazioni appena visibili sulle sezioni a tinta unita --- */
.deco{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;color:#9A6B33}
.deco-gino .deco-paws{fill:currentColor;opacity:.09}
.deco-gino .deco-lines{stroke:currentColor;color:#C87F13;opacity:.14}
.deco-gino .deco-stars{fill:#EF9F27;opacity:.18}
.deco-board{stroke:currentColor;color:#7E5526;opacity:.13}
.gino-sec,.board-sec{position:relative;isolation:isolate;overflow:hidden}
.gino-sec > .wrap,.board-sec > .board{position:relative;z-index:1}
.zone-clouds{z-index:0;opacity:.8}
.zone-sec > .wrap{position:relative;z-index:1}

/* le zampette compaiono piano piano, una dopo l'altra, quando arrivi alla sezione */
.js-rv .deco-gino .deco-paws g{opacity:0;transition:opacity .5s ease}
.js-rv .deco-gino.in .deco-paws g{opacity:1}

/* piè di pagina: venatura del legno, leggerissima */
footer{background:
  repeating-linear-gradient(178deg,rgba(255,255,255,.035) 0 2px,transparent 2px 11px),
  repeating-linear-gradient(181deg,rgba(0,0,0,.05) 0 1px,transparent 1px 17px),
  var(--frame)}

@media (prefers-reduced-motion:reduce){
  .js-rv .deco-gino .deco-paws g{opacity:1;transition:none}
}

/* =====================================================
   SEO + DOMANDE FREQUENTI (24/09/2026)
   ===================================================== */

/* la fascetta ora sta dentro l'H1 (per i motori di ricerca), l'aspetto resta identico */
.h-hero .sign h1{margin:0 0 8px}
.h-hero .sign h1 .ribbon{display:table;margin:0 auto}
.h-hero .sign h1 .h1-t{display:block;margin-top:10px}

/* domande frequenti: fogli di carta che si aprono */
.faq-sec{position:relative;isolation:isolate;overflow:hidden}
.faq-sec > .wrap{position:relative;z-index:1}
.deco-faq{color:#9A6B33;opacity:.1}
.faq-wrap{max-width:820px}
.faq-sec h2{text-align:center}
.faq-list{display:grid;gap:22px;margin-top:34px}
.sheet.faq{padding:0;rotate:var(--r,0deg)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:22px 22px 18px;font-size:clamp(19px,2.3vw,22px);line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{flex:1}
.faq summary i{flex:none;position:relative;width:30px;height:30px;border-radius:50%;background:var(--card);border:2px solid var(--card-border)}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2.5px;margin:-1.25px 0 0 -6px;background:var(--start-b);border-radius:2px;transition:rotate .25s ease}
.faq summary i::after{rotate:90deg}
.faq details[open] summary i::after{rotate:0deg}
.faq p{padding:0 22px 22px;font-size:17px;color:var(--ink);max-width:62ch}
.faq summary:focus-visible{outline-offset:-4px}

/* =====================================================
   FOOTER SULLO SFONDO GIALLO (24/09/2026)
   "Scarica" e footer condividono lo stesso sfondo a onde
   (.dl-bg sta nel contenitore comune .dl-footer-wrap),
   il footer diventa trasparente con testo quasi nero.
   ===================================================== */
.dl-footer-wrap{position:relative;isolation:isolate;overflow:hidden;background:#F5A21E}
.dl-footer-wrap > .dl-bg{position:absolute;inset:0;z-index:-1}
.dl{background:transparent}
footer{background:transparent;color:#2B2014;padding-top:0}
footer .wrap{border-top:1.5px solid rgba(43,32,20,.16);padding-top:30px}
footer a{color:#2B2014;text-decoration-color:rgba(43,32,20,.35);text-underline-offset:4px;transition:text-decoration-color .2s}
footer a:hover{text-decoration-color:#2B2014}
footer span{color:rgba(43,32,20,.75)}
.dl{padding-bottom:clamp(50px,6vw,80px)}

/* --- l'uccellino che vola nella sezione "La tua zona" --- */
.fly-bird{position:absolute;left:0;top:0;width:33px;height:25px;z-index:4;pointer-events:none;opacity:0;transform-origin:16px 12px}
.fly-bird.on{opacity:1}
.fly-bird .fb-wing{transform-box:fill-box;transform-origin:20% 90%;animation:wingFlap .16s ease-in-out infinite alternate}
@keyframes wingFlap{from{transform:rotate(-8deg) scaleY(1)}to{transform:rotate(18deg) scaleY(-.9)}}
.bird.perch.landed{animation:birdLand .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes birdLand{0%{transform:translateY(-6px) scaleY(.9)}60%{transform:translateY(1px) scaleY(1.05)}100%{transform:none}}

/* =====================================================================
   IL VIAGGIO (25/09/2026)
   Tutto ciò che si muove in modo continuo si ferma quando la sua sezione
   è fuori schermo (il JS mette .live solo a quelle vicine): il telefono
   lavora solo per quello che vedi. Senza JS non si ferma niente.
   ===================================================================== */
.js :is(.hero,.sec,.board-sec,.dl-footer-wrap):not(.live) :is(.cloud,.post-rib .tl,.scene-img,.dl-bg,.dl-phone-float,.dl-sticker,.tree,.zsun svg,.tw,.ff,.wv,.dl-wave .wv2,.deco-paws g,.deco-stars path,.qf,.march,.arm.start,.how-btn svg,.pp,.vg,.tpin,.shoot,.bets .x2){animation-play-state:paused}

/* ---------- apertura ---------- */
.hero .scene{will-change:transform}
.hero .clouds{will-change:transform}
.cloud.c3{top:40%;width:96px;height:48px;animation-duration:190s;animation-delay:-70s;opacity:.7}
.leaf{position:absolute;left:0;z-index:3;width:var(--w,18px);height:calc(var(--w,18px) / 2);pointer-events:none;opacity:0;animation:leafX var(--d) cubic-bezier(.4,.2,.6,.9) var(--dl) forwards}
.leaf .lf-y,.leaf .lf-r,.leaf svg{display:block;width:100%;height:100%}
.leaf .lf-y{animation:leafY var(--b) ease-in-out var(--dl) infinite alternate}
.leaf .lf-r{animation:leafR var(--f) ease-in-out var(--dl) infinite alternate}
@keyframes leafX{0%{transform:translate(-30px,0);opacity:0}8%{opacity:.95}88%{opacity:.95}100%{transform:translate(calc(100vw + 30px),var(--fall));opacity:0}}
@keyframes leafY{from{transform:translateY(calc(var(--a) * -1))}to{transform:translateY(var(--a))}}
@keyframes leafR{from{transform:rotate(-30deg) rotateX(0deg)}to{transform:rotate(22deg) rotateX(60deg)}}
.h-hero .tag-pill.flip{animation:tagFlip .5s ease}
@keyframes tagFlip{40%{transform:translateY(-7px) scale(.94);opacity:.3}100%{transform:none;opacity:1}}
.hero:not(.intro) .arm.start:not(.swing){animation:startPulse 3.2s ease-in-out 3s infinite}
@keyframes startPulse{0%,70%,100%{scale:1}80%{scale:1.05}90%{scale:.99}}
.how-btn svg{animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{0%,60%,100%{translate:0 0}75%{translate:0 4px}}
.tb-r{position:relative;display:flex;align-items:center;gap:8px}
.scene-btn{display:grid;place-items:center;width:36px;height:29px;padding:0;border:2px solid var(--card-border);background:rgba(254,248,231,.9);border-radius:999px;cursor:pointer;color:var(--ink);transition:border-color .2s,scale .15s}
.scene-btn svg{width:21px;height:17px}
.scene-btn:hover{border-color:var(--start-b)}
.scene-btn:active{scale:.9}
.scene-btn.busy svg{animation:busy .5s ease-in-out infinite alternate}
@keyframes busy{from{scale:.85}to{scale:1.08}}
.scene-cap{position:absolute;right:0;top:calc(100% + 10px);white-space:nowrap;background:var(--ribbon);color:#fff;font-size:14px;letter-spacing:.5px;line-height:1.3;border-radius:999px;padding:4px 12px;opacity:0;translate:0 -6px;transition:opacity .3s,translate .3s;pointer-events:none}
.scene-cap.show{opacity:1;translate:0 0}
.scene-cap:empty{display:none}

/* ---------- il sentiero in basso (punti e tappe) ---------- */
.trail{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));z-index:80;display:flex;align-items:center;gap:11px;height:44px;padding:0 16px;background:var(--card);color:var(--ink);border:2px solid var(--card-border);border-radius:22px;box-shadow:0 6px 16px rgba(58,42,22,.22);font-size:15px;line-height:1;white-space:nowrap;translate:-50% 150%;opacity:0;transition:translate .5s cubic-bezier(.34,1.3,.64,1),opacity .3s;pointer-events:none}
.trail.show{translate:-50% 0;opacity:1;pointer-events:auto}
.in-play .trail.show{translate:-50% 150%;opacity:0;pointer-events:none}
.tr-track{position:relative;display:flex;align-items:center;gap:13px;height:100%}
.tr-line{position:absolute;top:50%;height:0;margin-top:-1px;border-top:2px dashed var(--track)}
.tr-line b{position:absolute;left:0;top:-2px;height:2px;width:0;background:var(--card-border)}
.tr-n{position:relative;z-index:1;width:11px;height:11px;padding:0;border-radius:50%;border:2px solid var(--track);background:var(--card);cursor:pointer;transition:background .3s,border-color .3s,scale .3s}
.tr-n::before{content:"";position:absolute;inset:-10px -7px}
.tr-n.done{background:var(--card-border);border-color:var(--card-border)}
.tr-n.on{border-color:var(--start-b);scale:1.15}
.tr-n:hover{scale:1.3}
.tr-n:focus-visible{outline:3px solid var(--start);outline-offset:3px}
@media (hover:hover){.tr-n:hover::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 16px);translate:-50% 0;background:var(--ink);color:var(--card);font-size:13px;padding:4px 9px;border-radius:8px;white-space:nowrap;pointer-events:none}}
.tr-pin{position:absolute;left:0;top:50%;width:16px;height:22px;margin:-24px 0 0 -8px;z-index:2;pointer-events:none;will-change:transform;transition:transform .25s ease-out}
.tr-pin svg{display:block;width:100%;height:100%;overflow:visible}
.tr-sep{width:1px;height:18px;background:var(--track);flex:none}
@keyframes ptsBump{40%{scale:1.22}}
.tr-bag{display:flex;align-items:center;gap:9px}
.tr-bag .tb{display:flex;align-items:center;gap:3px}
.tr-bag svg{width:21px;height:16px}
.tr-bag .tb.bump{animation:ptsBump .5s cubic-bezier(.34,1.56,.64,1)}
.tr-stage{position:absolute;left:50%;bottom:calc(100% + 12px);translate:-50% 6px;opacity:0;background:var(--ribbon);color:#fff;font-size:14px;letter-spacing:.5px;border-radius:999px;padding:4px 12px;line-height:1.3;transition:opacity .25s,translate .25s;pointer-events:none}
.tr-stage.show{opacity:1;translate:-50% 0}
.tr-stage:empty{display:none}
@media (max-width:430px){.trail{gap:9px;padding:0 13px}.tr-track{gap:9px}}

/* ---------- effetti in primo piano ---------- */
.fx-layer{position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden}
.ptpop{position:absolute;display:flex;flex-direction:column;align-items:center;translate:-50% -50%;font-size:22px;line-height:1;color:var(--start-b);text-shadow:0 2px 0 #FEF8E7,0 0 12px rgba(254,248,231,.95);white-space:nowrap;animation:popUp 1.2s cubic-bezier(.2,.8,.3,1) forwards}
.ptpop b{font-weight:400}
.ptpop small{font-size:15px;color:var(--ink);margin-top:3px}
@keyframes popUp{0%{opacity:0;transform:translateY(8px) scale(.6)}16%{opacity:1;transform:translateY(-6px) scale(1.14)}30%{transform:translateY(-10px) scale(1)}78%{opacity:1}100%{opacity:0;transform:translateY(-58px)}}
.tapring{position:absolute;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:2.5px solid rgba(200,127,19,.7);box-shadow:0 0 0 1.5px rgba(254,248,231,.6);animation:tapRing .55s ease-out forwards}
@keyframes tapRing{from{transform:scale(.2);opacity:1}to{transform:scale(1.25);opacity:0}}
.bp{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;animation:bpFly var(--d,.9s) cubic-bezier(.2,.8,.3,1) var(--dl,0s) both}
.bp svg{display:block;width:100%;height:100%}
.bp-star{color:#EF9F27}
.bp-heart{color:#E53935;width:16px;height:15px}
.bp-zzz{width:auto;height:auto;margin:-14px 0 0 -6px;font-family:var(--f-hand);font-size:28px;line-height:1;color:var(--muted)}
.bp-dust{width:12px;height:12px;border-radius:50%;background:rgba(154,107,51,.35)}
@keyframes bpFly{0%{transform:translate(0,0) scale(.3) rotate(0deg);opacity:0}15%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(var(--s,1)) rotate(var(--r,0deg));opacity:0}}
.cf{position:absolute;width:7px;height:11px;border-radius:2px}

/* ---------- creature di passaggio ---------- */
.critters{position:fixed;inset:0;z-index:75;pointer-events:none;overflow:hidden}
.critter{position:absolute;left:0;top:0;margin:0;padding:10px;border:0;background:none;cursor:pointer;pointer-events:auto;will-change:transform;-webkit-tap-highlight-color:transparent}
.critter svg{display:block;overflow:visible}
.c-bird svg{width:48px;height:36px}
.critter .fb-wing{transform-box:fill-box;transform-origin:20% 90%;animation:wingFlap .16s ease-in-out infinite alternate}
.critter.caught svg{animation:caughtOut .45s ease-in forwards}
@keyframes caughtOut{30%{transform:scale(1.25) rotate(-8deg)}100%{transform:scale(0) rotate(30deg);opacity:0}}

/* ---------- come si gioca ---------- */
.secbg .ct{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s cubic-bezier(.4,0,.2,1);transition-delay:calc(var(--k) * 1s)}
.drawn .secbg .ct{stroke-dashoffset:0}
.secbg .tpin{animation:tpinBob 2.8s ease-in-out infinite}
@keyframes tpinBob{50%{translate:0 -5px}}
.steps li{transition:opacity .35s}
.steps li::before{transition:background .3s,border-color .3s,color .3s,scale .35s cubic-bezier(.34,1.56,.64,1)}
.steps.sync li{opacity:.55}
.steps.sync li.now{opacity:1}
.steps li.now::before{background:var(--start);border-color:var(--start-b);color:var(--start-ink);scale:1.14}
.map .wv{opacity:0;animation:wvShim 4.6s ease-in-out infinite;animation-delay:calc(var(--k) * -.53s)}
@keyframes wvShim{0%,100%{opacity:0;translate:-2px 0}50%{opacity:.85;translate:2px 0}}
.dstage.playing{cursor:crosshair}
.dstage .aim{opacity:0;transition:opacity .2s;pointer-events:none}
.dstage.playing.kbd .aim{opacity:1}
.dstage:focus-visible{outline:3px solid var(--card-border);outline-offset:4px}
.replay-row{gap:10px;flex-wrap:wrap}
.replay-row .replay{margin:14px 0 0}
.play-btn{display:inline-flex;align-items:center;gap:9px;margin:14px 0 0;font-size:17px;line-height:1.2;border:2.5px solid var(--start-b);background:var(--start);color:var(--start-ink);border-radius:999px;padding:9px 18px 9px 14px;cursor:pointer;box-shadow:0 3px 0 var(--start-b);transition:translate .12s,box-shadow .12s}
.play-btn svg{width:22px;height:22px}
.play-btn:hover{filter:brightness(1.05)}
.play-btn:active{translate:0 3px;box-shadow:0 0 0 var(--start-b)}
.play-cta{display:block;width:max-content;max-width:100%;margin:14px auto 0;color:var(--card);font-size:18px;text-decoration:underline;text-decoration-color:var(--card-border);text-underline-offset:5px;animation:fadeIn .5s both}
.un{color:transparent}

/* ---------- Gino ---------- */
.gino-stage{position:relative}
.gface-wrap{display:block;touch-action:pan-y;cursor:grab}
.gino-stage.pop[data-react="1"] .gface{animation:ginoIn .68s cubic-bezier(.3,1.25,.6,1) both,gJump .8s .62s ease-out}
.gino-stage.pop[data-react="2"] .gface{animation:ginoIn .68s cubic-bezier(.3,1.25,.6,1) both,gHop .5s .62s ease-out}
.gino-stage.pop[data-react="3"] .gface{animation:ginoIn .68s cubic-bezier(.3,1.25,.6,1) both,gTilt .9s .62s ease-in-out}
.gino-stage.pop[data-react="4"] .gface{animation:ginoIn .68s cubic-bezier(.3,1.25,.6,1) both,gShake .6s .62s ease-in-out}
.gino-stage.pop[data-react="5"] .gface{animation:ginoIn .68s cubic-bezier(.3,1.25,.6,1) both,gShakeBig .8s .62s ease-in-out}
.gino-stage.pop[data-react="0"] .gface{animation:ginoIn .68s cubic-bezier(.3,1.25,.6,1) both,gSleep 2.4s .62s ease-in-out}
.gino-stage.purr .gface{animation:gPurr .9s ease-in-out}
@keyframes gJump{30%{translate:0 -24px}55%{translate:0 0}70%{translate:0 -8px}85%{translate:0 0}}
@keyframes gHop{40%{translate:0 -11px}}
@keyframes gTilt{35%{rotate:-9deg}70%{rotate:5deg}}
@keyframes gShake{15%,45%,75%{translate:-7px 0}30%,60%,90%{translate:7px 0}}
@keyframes gShakeBig{15%,45%,75%{translate:-11px 0;rotate:-5deg}30%,60%,90%{translate:11px 0;rotate:5deg}}
@keyframes gSleep{25%,75%{translate:0 7px;rotate:-5deg}}
@keyframes gPurr{20%,60%{scale:1.05 .97}40%,80%{scale:.98 1.03}}

/* ---------- bacheca: i fogli dondolano e recitano la regola ---------- */
.board .sheet,.sheet.where,.sheet.faq{transform-origin:50% 1px}
.board .sheet:not(.head){cursor:pointer}
.mini-sign .h{display:inline-block}
.acting .mini-sign .h{animation:hLetter 3s both;animation-delay:calc(.15s + var(--k) * .42s)}
@keyframes hLetter{0%{color:transparent}8%{color:var(--ink);transform:translateY(-5px)}16%{transform:none}80%{color:var(--ink)}100%{color:transparent}}
.ill .frm{transform-box:fill-box;transform-origin:50% 0}
.ill .dev,.ill .flash{opacity:0}
.acting .ill .frm{animation:frmSwing 2.6s ease-out}
.acting .ill .dev{animation:devIn 2.6s ease both}
.acting .ill .flash{animation:flash 2.6s ease both}
@keyframes frmSwing{10%{rotate:6deg}25%{rotate:-4deg}40%{rotate:2deg}55%{rotate:0deg}}
@keyframes devIn{0%,12%{opacity:1}70%,100%{opacity:0}}
@keyframes flash{0%{opacity:0}4%{opacity:.9}14%{opacity:0}}
.ill .dp,.ill .ip,.ill .ip .lb,.ill .nt,.ill .xb,.ill .rg,.ill .tapr{transform-box:fill-box;transform-origin:50% 100%}
.ill .nt,.ill .rg,.ill .tapr{transform-origin:50% 50%}
.ill .xb{transform-origin:30% 100%}
.ill .tapr{opacity:0}
.acting .ill .tapr{animation:tapR .6s var(--td,1.15s) ease-out both}
@keyframes tapR{0%{opacity:.9;scale:.2}100%{opacity:0;scale:1.6}}
.acting .ill .dp{animation:dpDrop .5s cubic-bezier(.3,1.5,.6,1) both,dpDim .4s 1.35s forwards;animation-delay:calc(.1s + var(--k) * .13s),1.35s}
.acting .ill .dp.ok{animation:dpDrop .5s cubic-bezier(.3,1.5,.6,1) both,okHop .5s 1.2s ease-out;animation-delay:calc(.1s + var(--k) * .13s),1.2s}
.acting .ill .dp.ok .bd path{animation:okFill .35s 1.2s forwards}
@keyframes dpDrop{from{translate:0 -22px;opacity:0}to{translate:0 0;opacity:1}}
@keyframes dpDim{to{opacity:.35}}
@keyframes okFill{to{fill:#2E9E4F}}
@keyframes okHop{40%{translate:0 -5px}}
.acting .ill .ip .lb{animation:lbScan .5s ease-in-out both;animation-delay:calc(.2s + var(--k) * .22s)}
.acting .ill .ip.odd{animation:oddShake .6s 1.25s ease-in-out}
@keyframes lbScan{50%{scale:1.3}}
@keyframes oddShake{15%,45%,75%{rotate:-12deg}30%,60%,90%{rotate:12deg}}
.ill .ln,.ill .xk{stroke-dasharray:1;stroke-dashoffset:1}
.acting .ill .ln{animation:lnDraw .6s .9s ease-out forwards}
.acting .ill .np{animation:okHop .5s .1s ease-out}
.acting .ill .nt{animation:ntScan .4s ease-in-out both;animation-delay:calc(.15s + var(--k) * .16s)}
.acting .ill .nt.ok{animation:ntScan .4s ease-in-out both,ntOk .5s 1.45s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(.15s + var(--k) * .16s),1.45s}
@keyframes lnDraw{to{stroke-dashoffset:0}}
@keyframes ntScan{50%{scale:1.18}}
@keyframes ntOk{0%{fill:#FEF8E7;scale:1}50%{scale:1.35}100%{fill:#2E9E4F;scale:1}}
.acting .ill .xp{animation:okHop .5s .1s ease-out}
.acting .ill .xb{animation:xbPop .5s .45s cubic-bezier(.3,1.6,.5,1) both}
.acting .ill .xq{animation:xqOut .3s 1.2s forwards}
.acting .ill .xk{animation:lnDraw .35s 1.35s ease-out forwards}
@keyframes xbPop{0%{scale:.3}100%{scale:1}}
@keyframes xqOut{to{opacity:0}}
.acting .ill .rg0{animation:rgShrink 2.2s cubic-bezier(.5,0,.6,1) both}
.acting .ill .rg1{animation:rgSpin 2.2s linear both}
.acting .ill .rg2{animation:rgSpin 2.2s linear reverse both}
@keyframes rgShrink{0%{scale:1}72%{scale:.45}86%{scale:.52}100%{scale:1}}
@keyframes rgSpin{to{rotate:120deg}}
.bets b{position:relative}
.bets .x2{position:absolute;left:50%;top:-8px;translate:-50% 0;font-style:normal;font-size:16px;color:var(--start-b);opacity:0;pointer-events:none}
.acting .bets .sf{animation:betDim 2.4s ease both}
.acting .bets .dbl{animation:betPress 2.4s ease both}
.acting .bets .x2{animation:x2Up 2.4s ease both}
@keyframes betDim{20%,80%{opacity:.4}}
@keyframes betPress{0%,30%{scale:1}38%{scale:.88}50%{scale:1.12}60%,100%{scale:1}}
@keyframes x2Up{0%,45%{opacity:0;translate:-50% 0}60%{opacity:1;translate:-50% -14px}85%{opacity:1;translate:-50% -22px}100%{opacity:0;translate:-50% -26px}}

/* ---------- la tua zona ---------- */
.trees{position:absolute;left:0;right:0;bottom:0;height:170px;pointer-events:none}
.tree{position:absolute;display:block;transform-origin:50% 100%;animation:sway var(--d,4s) ease-in-out var(--dl,0s) infinite alternate}
.tree svg{display:block;width:100%;height:100%}
.zone-sec.gust .tree{animation:gustSway .8s ease-in-out 2 alternate}
@keyframes sway{from{rotate:-1.6deg}to{rotate:1.6deg}}
@keyframes gustSway{from{rotate:0deg}to{rotate:6deg}}
.zsun{position:absolute;right:7%;top:26px;width:92px;height:92px;pointer-events:none;opacity:.85}
.zsun svg{display:block;width:100%;height:100%;animation:sunSpin 60s linear infinite}
@keyframes sunSpin{to{rotate:360deg}}
.zone-post.zp-wait .arm,.zone-post.zp-wait .post{opacity:0}
.zone-post.zp-in .post{animation:postUp .45s ease-out both}
.zone-post.zp-in .arm{transform-origin:var(--o);animation:armDrop .5s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(.25s + var(--i,0) * .14s)}
@media (max-width:899px){.zsun{width:70px;height:70px;top:14px}}

/* ---------- la mappa sociale di sera ---------- */
.secbg .vl{opacity:0;transition:opacity .6s ease;transition-delay:calc(var(--k) * 70ms)}
.lit .secbg .vl{opacity:1}
.secbg .vg{transform-box:fill-box;transform-origin:50% 50%;transition:scale .8s ease}
.appmode .secbg .vg{scale:1.7}
.lit .secbg .vl.fl .vg{animation:flick 4s steps(1) infinite}
@keyframes flick{0%{opacity:.45}7%{opacity:.18}9%{opacity:.5}62%{opacity:.35}64%{opacity:.5}}
.secbg .moon{transition:translate 1.8s cubic-bezier(.2,.8,.2,1),opacity 1.8s}
.js .sec.dark:not(.lit) .secbg .moon{translate:0 26px;opacity:0}
.sky-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sky-fx.under{z-index:-1}
.sky-fx.over{z-index:0}
.sky-fx .tw{position:absolute;width:3px;height:3px;margin:-1.5px;border-radius:50%;background:#FEF8E7;box-shadow:0 0 6px 1px rgba(254,248,231,.55);opacity:.15;scale:var(--s,1);animation:twk var(--d) ease-in-out var(--dl) infinite alternate}
@keyframes twk{to{opacity:.95}}
.sky-fx .ff{position:absolute;width:4px;height:4px;margin:-2px;border-radius:50%;background:#FBE39A;box-shadow:0 0 8px 3px rgba(247,198,107,.45);opacity:0;animation:ffly var(--d) ease-in-out var(--dl) infinite alternate}
@keyframes ffly{0%{translate:0 0;opacity:.05}30%{opacity:.9}55%{translate:var(--x) var(--y);opacity:.2}80%{opacity:.8}100%{translate:calc(var(--x) * -.6) calc(var(--y) * .5);opacity:.1}}
.shoot{position:absolute;width:160px;height:26px;margin:0;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;transform-origin:0 50%;animation:shoot 1.1s cubic-bezier(.3,.2,.6,1) forwards;-webkit-tap-highlight-color:transparent}
.shoot i{position:absolute;left:0;right:0;top:12px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(254,248,231,0),rgba(254,248,231,.55) 70%,#fff);box-shadow:0 0 6px rgba(254,248,231,.6)}
@keyframes shoot{0%{transform:rotate(var(--a)) translateX(0) scaleX(.3);opacity:0}15%{opacity:1}100%{transform:rotate(var(--a)) translateX(var(--l)) scaleX(1);opacity:0}}
.toggle{position:relative}
.toggle.has-thumb button{position:relative;z-index:1;transition:color .3s}
.toggle.has-thumb button[aria-pressed="true"]{background:transparent}
.tg-thumb{position:absolute;left:4px;top:4px;bottom:4px;width:0;border-radius:999px;background:var(--start);transition:transform .45s cubic-bezier(.34,1.3,.64,1),width .45s cubic-bezier(.34,1.3,.64,1)}
.chat .dots{display:none;gap:4px;padding:5px 2px 3px}
.chat .dots i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:dot 1s ease-in-out infinite}
.chat .dots i:nth-child(2){animation-delay:.15s}
.chat .dots i:nth-child(3){animation-delay:.3s}
.chat.typing .dots{display:flex}
.chat.typing .msg{display:none}
@keyframes dot{0%,60%,100%{translate:0 0;opacity:.4}30%{translate:0 -4px;opacity:1}}
.bstage.app .chat.out{opacity:0;scale:.85;transition:opacity .35s,scale .35s}
.msgpins .mp{transition:opacity .3s}
.msgpins .mp.out{opacity:0}
.msgpins .mpi.drop{animation:mpDrop .55s cubic-bezier(.3,1.5,.6,1)}
@keyframes mpDrop{from{translate:0 -28px;opacity:0}to{translate:0 0;opacity:1}}
.pp{transform-box:fill-box;transform-origin:50% 50%;opacity:0}
.bstage.app .pp{animation:ppPulse 2.4s ease-out infinite}
@keyframes ppPulse{0%{scale:.6;opacity:.8}100%{scale:3.4;opacity:0}}
.boat{transition:none}

/* ---------- domande e arrivo ---------- */
.qf{animation:qFloat 7s ease-in-out infinite;animation-delay:calc(var(--k) * -1.7s)}
@keyframes qFloat{50%{translate:0 -14px}}
.march{animation:march 3s linear infinite}
@keyframes march{to{stroke-dashoffset:-30}}
.js-rv .deco-gino.in .deco-paws g{animation:pawStep 7s ease-in-out infinite;animation-delay:calc(2.5s + var(--pk,0) * .3s)}
@keyframes pawStep{0%,30%,100%{opacity:1}15%{opacity:.25}}
.h-dl.dl-wait{opacity:0}
.h-dl.dl-drop{animation:signDrop 1.9s both}
.dl-wave .wv2{animation:waveDrift 18s linear infinite}
@keyframes waveDrift{to{transform:translateX(-720px)}}
.badges a{position:relative;overflow:hidden;border-radius:10px}
.badges a::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);translate:-120% 0;transition:translate .7s ease}
.badges a:hover::after{translate:120% 0}

/* ---------- dettagli ---------- */
.lswap [data-t]{animation:lswap .5s ease both}
@keyframes lswap{from{opacity:.1}to{opacity:1}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
::selection{background:rgba(239,159,39,.35);color:var(--ink)}
html{scrollbar-color:var(--card-border) var(--paper)}
@supports not (scrollbar-color:auto){::-webkit-scrollbar{width:11px}::-webkit-scrollbar-track{background:var(--paper)}::-webkit-scrollbar-thumb{background:var(--card-border);border-radius:999px;border:3px solid var(--paper)}}

/* ---------- "riduci movimento": funziona tutto, senza animazioni d'ambiente ---------- */
@media (prefers-reduced-motion:reduce){
  .leaf,.zsun svg,.sky-fx,.critters,.tapring,.ptpop,.bp,.cf,.walker{display:none!important}
  .tree,.map .wv,.secbg .tpin,.arm.start,.how-btn svg,.deco-paws g,.qf,.march,.dl-wave .wv2,.pp,.cloud.c3,.scene-btn svg,.chat .dots i,.lit .secbg .vl.fl .vg,.tag-pill.flip,.tr-bag .tb.bump{animation:none!important}
  .secbg .ct{stroke-dasharray:none;transition:none}
  .secbg .vl,.secbg .moon,.secbg .vg,.tg-thumb,.trail,.tr-pin,.steps li,.steps li::before,.scene-cap,.tr-stage{transition:none!important}
  .ill *,.acting .ill *,.acting .bets *,.acting .mini-sign .h{animation:none!important}
  .gino-stage.pop .gface,.gino-stage.purr .gface{animation:fadeIn .2s both!important}
  .lswap [data-t]{animation:none}
}

/* =====================================================================
   PANORAMA ANIMATO (25/09/2026) — geo-scene.js
   L'apertura non usa più i PNG del gioco: un'Italia in miniatura in SVG,
   disegnata per la misura esatta dello schermo. I colori arrivano dalle
   variabili --p-* (una tavolozza per ogni momento del giorno, vedi
   geo-scene.js); qui ci sono solo i movimenti.
   ===================================================================== */
.scene.pano-on .fallback,.scene.pano-on .scene-img{display:none}
.scene.pano-on .veil{background:transparent}
.hero .scene.pano-on::after{content:none}
.pano{position:absolute;inset:0;overflow:hidden;pointer-events:none;contain:strict}
.pano .pl{position:absolute}
.pano .pl-svg{position:absolute;left:0;top:0;display:block}
.pano .ps{position:absolute}
.pano .ps svg{display:block;width:100%;height:100%;overflow:visible}
.pano .pw{width:100%;height:100%}
.pano .p-clip{overflow:hidden}
.pano svg *{transform-box:fill-box}
.pano .f-shd{fill:rgba(70,35,10,.13)}
.pano .f-lt{fill:#FFD98A}
.pano .f-lg{fill:#FFBE55;opacity:.32}

/* luci: si accendono a gruppi */
.pano .p-lit1{opacity:var(--p-lit1)}
.pano .p-lit2{opacity:var(--p-lit2)}
.pano .p-lit3{opacity:var(--p-lit3)}
.pano .p-lamp,.pano .p-headlamp{opacity:var(--p-lamp)}
.pano .p-stars{opacity:var(--p-stars)}

/* sole, luna, stelle */
.pano .p-sun{opacity:var(--p-sunO);transition:transform 2.8s cubic-bezier(.45,.05,.3,1)}
.pano .p-sun .sun-rays{transform-box:view-box;transform-origin:0 0;animation:pSpin 90s linear infinite}
.pano .p-moon{opacity:var(--p-moon);transition:transform 2.8s cubic-bezier(.45,.05,.3,1)}
@keyframes pSpin{to{transform:rotate(360deg)}}
.pano .tw{opacity:var(--p-stars)}
.pano .tw svg{animation:pTw 3s ease-in-out infinite;animation-duration:inherit;animation-delay:inherit}
@keyframes pTw{0%,100%{opacity:.15;transform:scale(.6)}50%{opacity:1;transform:scale(1.15)}}
.scene:not([data-mood="notte"]):not([data-mood="alba"]) .pano :is(.tw svg,.p-ff svg,.gm svg){animation-play-state:paused}
.pano .p-shoot{height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,0),#fff);transform-origin:100% 50%;animation:pShoot 1.2s ease-out both}
@keyframes pShoot{0%{transform:rotate(155deg) translateX(0) scaleX(.2);opacity:0}15%{opacity:1}100%{transform:rotate(155deg) translateX(200px) scaleX(1);opacity:0}}

/* acqua */
.pano .p-bob{transform-origin:50% 85%;animation:pBob 3.4s ease-in-out infinite}
@keyframes pBob{0%,100%{transform:rotate(-2.5deg) translateY(0)}50%{transform:rotate(2.5deg) translateY(1.5px)}}
.pano .p-gl{opacity:var(--p-gs)}
.pano .p-gl.gm{opacity:var(--p-gm)}
.pano .p-gl.gd{opacity:calc(var(--p-gs) * .9)}
.pano .p-gl.gs rect{fill:#FFE1A6}
.pano .p-gl.gm rect{fill:#E9EEFF}
.pano .p-gl svg{animation:pGlint 2.8s ease-in-out infinite;animation-delay:inherit}
@keyframes pGlint{0%,100%{opacity:0;transform:scaleX(.4)}50%{opacity:.95;transform:scaleX(1)}}
.pano .p-dolphin{animation:pJump 11s cubic-bezier(.45,.1,.55,.9) infinite;transform:rotate(-100deg)}
@keyframes pJump{0%{transform:rotate(-100deg)}14%,100%{transform:rotate(100deg)}}
.pano .p-splash{opacity:0;animation:pSplash 11s ease-out infinite}
@keyframes pSplash{0%{opacity:0}2%{opacity:.9;transform:scaleX(.6)}6%{opacity:0;transform:scaleX(1.2)}11%{opacity:0}13%{opacity:.9;transform:scaleX(.6)}17%,100%{opacity:0;transform:scaleX(1.2)}}
.pano .p-fall{opacity:.9}
.pano .p-mistfall svg{transform-origin:50% 70%;animation:pPuffy 2.4s ease-in-out infinite alternate}
@keyframes pPuffy{from{transform:scale(.85);opacity:.7}to{transform:scale(1.1);opacity:1}}

/* faro, treno, bandiera, gatto */
.pano .p-beam{opacity:var(--p-beam);transform-origin:50% 50%;animation:pBeam 3.6s ease-in-out infinite alternate}
@keyframes pBeam{from{transform:scaleX(1)}to{transform:scaleX(-1)}}
.pano .puff{transform-origin:50% 50%;animation:pPuff 1.4s ease-out infinite}
@keyframes pPuff{0%{transform:translate(0,0) scale(.35);opacity:.95}100%{transform:translate(16px,-12px) scale(2);opacity:0}}
.pano .p-flag{transform-origin:0 50%;animation:pFlag 1.5s ease-in-out infinite}
@keyframes pFlag{0%,100%{transform:skewY(0) scaleX(1)}50%{transform:skewY(-7deg) scaleX(.86)}}
.pano .p-tail{transform-origin:85% 95%;animation:pTail 4.2s ease-in-out infinite}
@keyframes pTail{0%,55%,100%{transform:rotate(0)}65%{transform:rotate(22deg)}75%{transform:rotate(-8deg)}85%{transform:rotate(16deg)}}

/* cielo e montagne */
.pano .p-wing{transform-origin:50% 100%;animation:pFlap .45s ease-in-out infinite alternate}
@keyframes pFlap{from{transform:scaleY(1)}to{transform:scaleY(-.35)}}
.pano .p-circle{animation:pSpin 18s linear infinite}
.pano .p-wisp{opacity:calc(.95 - var(--p-stars) * .55)}
.pano .p-mist{opacity:var(--p-mist)}
.pano .p-plane-bob{animation:pPlane 2.6s ease-in-out infinite alternate}
@keyframes pPlane{from{transform:translateY(-1.5px)}to{transform:translateY(1.5px)}}

/* primo piano: farfalle di giorno, lucciole di notte */
.pano .p-bfly{opacity:calc(1 - var(--p-ff))}
.pano .p-fly{transform-origin:50% 50%;animation:pFlutter .22s ease-in-out infinite alternate}
@keyframes pFlutter{from{transform:scaleX(1)}to{transform:scaleX(.25)}}
.pano .p-ff{opacity:var(--p-ff)}
.pano .p-ff svg{animation:pBlink var(--fd,2s) ease-in-out infinite alternate}
@keyframes pBlink{from{opacity:.1}to{opacity:1}}

/* i pin di ChatMapp */
.pano .p-pin{animation:pPinBob 2.6s ease-in-out infinite;animation-delay:calc(var(--pi) * -.45s)}
@keyframes pPinBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.pano .p-ping{transform-origin:50% 50%;animation:pPing 3.2s ease-out infinite;animation-delay:calc(var(--pi) * -.7s)}
@keyframes pPing{0%{transform:scale(.8);opacity:.9}70%,100%{transform:scale(2.3);opacity:0}}
.pano .p-bub{opacity:0;transform-origin:50% 100%}
.pano .p-pinw.talk .p-bub{animation:pBub 3.6s ease both}
@keyframes pBub{0%{opacity:0;transform:scale(.4) translateY(6px)}10%{opacity:1;transform:scale(1.06)}16%{transform:scale(1)}82%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.9) translateY(-4px)}}
.pano .p-pinw.talk .dt{animation:pDot .9s ease-in-out infinite}
.pano .p-pinw.talk .dt:nth-of-type(2){animation-delay:.15s}
.pano .p-pinw.talk .dt:nth-of-type(3){animation-delay:.3s}
@keyframes pDot{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-2.4px)}}

/* fuochi d'artificio */
.pano .p-fw .p-fw-trail{position:absolute;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;background:#FFE9A8;box-shadow:0 0 6px 2px rgba(255,211,107,.7);animation:pFwUp .7s cubic-bezier(.2,.6,.4,1) both}
@keyframes pFwUp{from{transform:translateY(var(--fy));opacity:1}90%{opacity:1}to{transform:none;opacity:0}}
.pano .p-fw .p-fw-burst{position:absolute;inset:0;width:100%;height:100%;opacity:0;animation:pFwB 1.8s .65s cubic-bezier(.1,.7,.3,1) both}
@keyframes pFwB{0%{transform:scale(.12);opacity:1}55%{opacity:1}100%{transform:scale(1.15) translateY(10px);opacity:0}}

/* nuvole del sito: di notte si spengono, al tramonto si tingono */
.scene.pano-on .clouds{transition:opacity 2.4s ease,filter 2.4s ease}
.scene[data-mood="notte"] .clouds{opacity:.22}
.scene[data-mood="tramonto"] .clouds{filter:sepia(.35) saturate(1.8) hue-rotate(-22deg) brightness(.97)}
.scene[data-mood="alba"] .clouds{filter:sepia(.2) saturate(1.4) hue-rotate(-40deg)}

/* apertura: il paesaggio si alza come un libro pop-up */
.scene.pano-intro .pl-far{animation:pRise 1.2s .05s cubic-bezier(.2,1.25,.4,1) both}
.scene.pano-intro .pl-mnt{animation:pRise 1.25s .2s cubic-bezier(.2,1.3,.4,1) both}
.scene.pano-intro .pl-mid{animation:pRise 1.3s .38s cubic-bezier(.2,1.3,.4,1) both}
.scene.pano-intro .pl-fore{animation:pRise 1.3s .56s cubic-bezier(.2,1.3,.4,1) both}
.scene.pano-intro .p-sun,.scene.pano-intro .p-moon{animation:pSunUp 2.2s .3s cubic-bezier(.2,.8,.3,1) both}
.scene.pano-intro .p-pinw{animation:pPinDrop .75s cubic-bezier(.3,1.6,.5,1) both}
@keyframes pRise{from{transform:translateY(70px);opacity:0}to{transform:none;opacity:1}}
@keyframes pSunUp{from{translate:0 90px;opacity:0}to{translate:0 0}}
@keyframes pPinDrop{0%{translate:0 -40px;opacity:0}60%{opacity:1}100%{translate:0 0;opacity:1}}

/* profondità col mouse: i piani diventano livelli della GPU solo su desktop */
.pano.px .pl:not(.pl-sky){will-change:translate}

/* fuori schermo si ferma tutto */
.js .hero:not(.live) .pano *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .pano *,.scene .clouds{animation:none!important}
  .scene.pano-tr{transition:none}
}
.pano .p-air{opacity:calc(1 - var(--p-moon))}