:root{--bg:#010B1D;--fg:#EAF0FF;--dim:#8A97BD;--go:#FFD166;--gr:#06D6A0;--or:#EF8354;--sl:#3d4a6b;--panel:#0d1830;--line:#ffffff14}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font:16px/1.6 "Noto Sans",system-ui,-apple-system,"Segoe UI","Noto Sans CJK SC","Noto Sans CJK JP","PingFang SC","Hiragino Sans",sans-serif;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit}

/* nav */
nav{position:fixed;z-index:20;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:max(12px,env(safe-area-inset-top)) 4vw 12px;background:linear-gradient(#010b1df0,#010b1d00)}
.back{text-decoration:none;color:var(--dim);font-size:.85rem;white-space:nowrap}.back:hover{color:var(--fg)}
.links{display:flex;align-items:center;gap:20px}.links>a{text-decoration:none;color:var(--dim);font-size:.9rem}.links>a:hover{color:var(--go)}
select{background:#ffffff10;color:var(--fg);border:1px solid #ffffff2a;border-radius:99px;padding:6px 12px;font:inherit;font-size:.85rem;cursor:pointer}
select option{color:#010B1D}

/* hero: tutto scivola un poco verso la gravità */
.hero{--gx:0;--gy:1;position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:4vw;padding:100px 7vw 60px;overflow:hidden;cursor:pointer;background:radial-gradient(ellipse at 25% 35%,#0f2142 0,var(--bg) 62%)}
#fall{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-in{position:relative;z-index:1;cursor:auto}
.hero h1{transform:translate(calc(var(--gx)*10px),calc(var(--gy)*8px));transition:transform .9s cubic-bezier(.3,1.7,.4,1)}
.hero h1 img{width:min(620px,100%);filter:drop-shadow(0 0 26px #ffd16640)}
.tag{font-size:clamp(1.5rem,3.2vw,2.4rem);font-weight:700;letter-spacing:-.01em;line-height:1.25;margin:22px 0 12px;background:linear-gradient(90deg,var(--go),#ffe9a8 45%,var(--gr));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:#c2cbe6;font-size:1.08rem;max-width:560px}
.cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:28px}
.pill{border:1px solid #06d6a066;color:var(--gr);border-radius:99px;padding:6px 14px;font-size:.85rem}
.btn{background:var(--go);color:#2a1f05;text-decoration:none;font-weight:700;border-radius:14px;padding:12px 24px;box-shadow:0 8px 30px #ffd16640;transition:transform .2s}.btn:hover{transform:translateY(-2px)}
.hhint{margin-top:22px;color:#5f6d96;font-size:.82rem}
.phone{border-radius:30px;border:5px solid #1c2846;overflow:hidden;background:#000;box-shadow:0 30px 80px #000c,0 0 70px #ffd16618}
.hero-phone{position:relative;z-index:1;width:min(300px,100%);justify-self:center;transform:translate(calc(var(--gx)*22px),calc(var(--gy)*18px)) rotate(calc(var(--gx)*-4deg + 3deg));transition:transform 1.1s cubic-bezier(.3,1.6,.4,1)}

/* sezioni */
.sec{padding:13vh 7vw 6vh;max-width:1240px;margin:0 auto}
.sec h2{font-size:clamp(1.9rem,4.6vw,3.1rem);letter-spacing:-.02em;line-height:1.1}
.lead2{color:var(--dim);margin-top:10px;max-width:720px;font-size:1.05rem}

/* stanza */
.play{display:grid;grid-template-columns:1fr 280px;gap:22px;margin-top:30px;align-items:stretch}
.room{position:relative;height:min(70vh,600px);min-height:380px;border-radius:24px;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#0c1a36 0,#010815 75%);border:1px solid var(--line);box-shadow:inset 0 0 80px #000b}
.tilt{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.room canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab}
.win{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;text-align:center;padding:20px;background:#010b1dcc;backdrop-filter:blur(3px);opacity:0;transition:opacity .35s}
.win.on{opacity:1}
.win b{font-size:clamp(2rem,5vw,3rem);color:var(--gr);text-shadow:0 0 30px #06d6a088}
.stars{display:flex;gap:6px}.stars img{width:56px;height:56px;transform:scale(0);animation:star .5s cubic-bezier(.3,1.8,.5,1) forwards;animation-delay:var(--d)}
@keyframes star{to{transform:scale(1)}}
.win p{color:#c2cbe6;max-width:380px}
.wbtn{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap;justify-content:center}
.wbtn button,.small{background:var(--panel);border:1px solid #ffffff22;border-radius:12px;padding:9px 16px;cursor:pointer;transition:border-color .2s,transform .2s}
.wbtn button:hover,.small:hover{border-color:var(--go);transform:translateY(-1px)}
.wbtn .go{background:var(--go);color:#2a1f05;border-color:var(--go);font-weight:700}
.side{display:flex;flex-direction:column;gap:18px;align-items:center}
.hud{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.hud div{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:8px 6px;text-align:center}
.hud span{display:block;color:var(--dim);font-size:.75rem}.hud b{font-size:1.25rem}
#hpar{color:var(--go)}

/* quadrante come nel gioco */
.dial{position:relative;width:210px;height:210px;border-radius:50%;padding:0;background:#0a1328;box-shadow:0 0 0 2px #2b3a60,0 0 0 9px #0a1328,0 0 0 10px #2b3a60,0 16px 40px #000a}
.dial button{position:absolute;inset:0;border:0;background:#24325a;cursor:pointer;transition:background .15s;-webkit-mask:radial-gradient(circle,#000 70%,transparent 70.5%);mask:radial-gradient(circle,#000 70%,transparent 70.5%)}
.dial button:hover{background:#30416f}
.dial button.on{background:var(--go)}
.dial button:active{background:#ffe29a}
.dial [data-d=up]{clip-path:polygon(50% 47%,4% 0,96% 0)}
.dial [data-d=right]{clip-path:polygon(53% 50%,100% 4%,100% 96%)}
.dial [data-d=down]{clip-path:polygon(50% 53%,96% 100%,4% 100%)}
.dial [data-d=left]{clip-path:polygon(47% 50%,0 96%,0 4%)}
.dial i{position:absolute;width:14px;height:14px;border:solid #dfe6ff;border-width:3px 3px 0 0}
.dial button.on i{border-color:#2a1f05}
.dial [data-d=up] i{left:calc(50% - 7px);top:15%;transform:rotate(-45deg)}
.dial [data-d=right] i{right:15%;top:calc(50% - 7px);transform:rotate(45deg)}
.dial [data-d=down] i{left:calc(50% - 7px);bottom:15%;transform:rotate(135deg)}
.dial [data-d=left] i{left:15%;top:calc(50% - 7px);transform:rotate(-135deg)}
.core{position:absolute;left:30%;top:30%;width:40%;height:40%;border-radius:50%;background:#0a1328;box-shadow:0 0 0 3px #2b3a60;display:grid;place-items:center;pointer-events:none}
.orb{--b:#FFD166;--g:#FFD166;display:block;width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 35% 32%,#fff 0,var(--b) 38%,var(--g) 100%);box-shadow:0 0 22px var(--g)}
.orb.rainbow{background:conic-gradient(#ff7b7b,#ffd166,#7bffb0,#7bd7ff,#c29bff,#ff7bd5,#ff7b7b);box-shadow:0 0 22px #c29bff;animation:hue 3s linear infinite}
@keyframes hue{to{filter:hue-rotate(360deg)}}
.row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.small{font-size:.85rem;padding:7px 12px}
.levels{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;width:100%}
.levels button{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:5px 0 3px;cursor:pointer;font-weight:700;font-size:.9rem;line-height:1.2}
.levels i{display:block;font-style:normal;font-size:.55rem;color:#4d5a80;letter-spacing:-1px}
.levels .done i{color:var(--go)}
.levels .cur{border-color:var(--go);box-shadow:0 0 14px #ffd16640}
.help{color:#5f6d96;font-size:.82rem;margin-top:12px}

/* come si gioca */
.steps{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:34px}
.steps li{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px 18px;transition:transform .3s}
.steps li:hover{transform:translateY(-4px) rotate(-1deg)}
.steps li b{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#ffd16622;color:var(--go);font-weight:800;margin-bottom:12px}
.steps li:nth-child(2) b{background:#3d4a6b66;color:#b9c6ee}.steps li:nth-child(3) b{background:#ef835422;color:var(--or)}.steps li:nth-child(4) b{background:#06d6a022;color:var(--gr)}
.steps h3{font-size:1.02rem;margin-bottom:6px}.steps p{color:var(--dim);font-size:.92rem}
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}
.nums div{border-top:1px solid #ffffff1a;padding-top:14px}
.nums b{display:block;font-size:clamp(2rem,4.5vw,3.2rem);line-height:1;background:linear-gradient(90deg,var(--go),var(--gr));-webkit-background-clip:text;background-clip:text;color:transparent}
.nums span{color:var(--dim);font-size:.92rem}

/* sfere */
.skins{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin-top:30px}
.skin{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px 12px 16px;cursor:pointer;transition:transform .25s,border-color .25s}
.skin:hover{transform:translateY(-4px)}
.skin .orb{width:56px;height:56px;margin-bottom:8px;transition:transform .5s cubic-bezier(.3,1.8,.5,1)}
.skin:hover .orb{transform:scale(1.15)}
.skin b{font-size:1.05rem}.skin small{color:var(--go);font-size:.8rem}
.skin em{font-style:normal;font-size:.78rem;color:var(--dim);margin-top:4px}
.skin.cur{border-color:var(--go);box-shadow:0 0 24px #ffd16626}.skin.cur em{color:var(--gr)}

/* immagini */
.rail{scrollbar-color:#2b3a60 transparent;scrollbar-width:thin;display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:30px 4px 18px;margin-top:4px}
.rail figure{flex:0 0 min(230px,62vw);scroll-snap-align:start;border-radius:26px}
.rail figcaption{background:#020d22;color:var(--dim);font-size:.82rem;padding:10px 14px}
.sub{margin-top:44px;font-size:1.3rem}
.video{margin:24px auto 0;border-radius:30px;overflow:hidden;border:5px solid #1c2846;background:#000;width:min(300px,78vw);box-shadow:0 30px 80px #000a,0 0 70px #ffd16618}
.video video{width:100%;display:block}

footer{display:flex;justify-content:space-between;padding:26px 5vw max(26px,env(safe-area-inset-bottom));margin-top:10vh;color:var(--dim);font-size:.85rem;border-top:1px solid var(--line)}

@media(max-width:900px){
  .links>a{display:none}
  .hero{grid-template-columns:1fr;padding-top:90px}
  .hero-phone{width:min(220px,60vw)}
  .play{grid-template-columns:1fr}
  .room{height:auto;min-height:0;aspect-ratio:1/1.02;max-height:62vh}
  .side{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"dial hud" "dial row" "lv lv";gap:14px;align-items:center}
  .dial{grid-area:dial;width:170px;height:170px}.hud{grid-area:hud}.row{grid-area:row}.levels{grid-area:lv}
  .steps{grid-template-columns:1fr 1fr}
  .nums{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .steps{grid-template-columns:1fr}
  .side{gap:10px 12px}
  .dial{width:150px;height:150px}
  .hud{grid-template-columns:1fr 1fr 1fr;gap:6px}.hud div{padding:6px 2px}
  .row .small{padding:6px 9px;font-size:.8rem}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero h1,.hero-phone{transition:none}}