/* Sciattisi Grid 3D – livello visivo sopra lo stile base. */

/* Hero: scritta in rilievo, avatar in primo piano, griglia neon */
.hero-3d{background:radial-gradient(ellipse at 50% 30%,#ff32964d,transparent 62%),#100c15;perspective:900px}
.hero-floor{position:absolute;left:-50%;right:-50%;bottom:-30%;height:85%;transform:rotateX(72deg);transform-origin:50% 0;background-image:linear-gradient(var(--pink) 2px,transparent 2px),linear-gradient(90deg,var(--pink) 2px,transparent 2px);background-size:70px 70px;animation:sg-run 2.2s linear infinite;-webkit-mask-image:linear-gradient(transparent,#000 30%);mask-image:linear-gradient(transparent,#000 30%);opacity:.5}
@keyframes sg-run{to{background-position:0 70px}}
.hero-horizon{position:absolute;left:0;right:0;top:58%;height:2px;background:var(--pink);box-shadow:0 0 40px 8px var(--pink)}
.hero-stage{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .2s ease-out}
.hero-3d .hero-word{transform:translateZ(-180px) scale(1.2);color:var(--pink);text-shadow:0 1px 0 #d61f7a,0 2px 0 #c01a6d,0 3px 0 #a91560,0 4px 0 #921153,0 5px 0 #7c0d46,0 6px 0 #660a3a,0 16px 30px #000,0 0 90px #ff329688}
.hero-3d .hero-art{transform:translateZ(40px);filter:drop-shadow(0 0 40px #ff329655)}
.hero-3d .hero-copy{z-index:3}
.hero-3d:after{z-index:2}

/* Statistiche: avatar online che camminano sulla griglia */
.intro{align-items:center}
.stats-3d{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel);min-height:400px;perspective:700px}
.stats-floor{position:absolute;inset:-20% -40% 0;transform:rotateX(60deg) translateY(8%);background-image:linear-gradient(#ff329655 1px,transparent 1px),linear-gradient(90deg,#ff329655 1px,transparent 1px);background-size:40px 40px}
.stats-walkers{position:absolute;inset:0;width:100%;height:100%}
.stats-live{position:absolute;top:16px;left:16px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;display:flex;align-items:center;gap:8px}
.stats-live i{width:8px;height:8px;border-radius:50%;background:#95d884;box-shadow:0 0 10px #95d884;animation:sg-pulse 1.4s infinite}
@keyframes sg-pulse{50%{opacity:.3}}
.stats-3d .stats{position:absolute;left:0;right:0;bottom:0;margin:0;border:0;border-radius:0;background:linear-gradient(transparent,#100c15 45%);padding-top:50px}
.stats-3d .stat{border:0;padding:18px 12px;text-align:center}
.stats-3d .stat strong{color:var(--pink);font-size:34px}
.stats-3d .stat span{font-size:10px}

/* Regioni: mappa 3D con le coordinate reali della grid */
.view-toggle{display:flex;border:1px solid #ffffff2e;border-radius:6px;overflow:hidden}
.view-toggle button{background:none;border:0;border-radius:0;color:var(--text);padding:9px 15px;font-size:13px}
.view-toggle button.is-on{background:var(--pink);color:#190914}
.region-world{position:relative;height:640px;perspective:1500px;overflow:hidden;border-radius:14px;cursor:grab;touch-action:pan-y;background:radial-gradient(circle at 50% 55%,#ff329626,transparent 60%)}
.region-world:active{cursor:grabbing}
.region-plane{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.region-tile{position:absolute;transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.8,.2,1);cursor:pointer;border:0;padding:0;background:none;border-radius:0}
.region-tile .top{position:absolute;inset:0;background:#2a1d33 center/cover;border:1px solid #ff329699;box-shadow:inset 0 0 18px #ff329644}
.region-tile .s1{position:absolute;left:0;right:0;bottom:0;height:16px;transform-origin:bottom;transform:rotateX(-90deg);background:linear-gradient(#ff3296,#5a0a33)}
.region-tile .s2{position:absolute;top:0;bottom:0;right:0;width:16px;transform-origin:right;transform:rotateY(90deg);background:linear-gradient(90deg,#c01a6d,#3a0621)}
.region-tile .lbl{position:absolute;left:50%;top:50%;white-space:nowrap;background:var(--pink);color:#190914;font-weight:700;font-size:13px;padding:5px 10px;border-radius:4px;opacity:0;transition:opacity .25s;pointer-events:none}
.region-tile:hover,.region-tile:focus-visible,.region-tile.is-sel{transform:var(--base) translateZ(36px)!important}
.region-tile:hover .lbl,.region-tile:focus-visible .lbl,.region-tile.is-sel .lbl{opacity:1}
.region-hint{position:absolute;left:18px;bottom:12px;font-size:12px;color:var(--muted);margin:0}
.region-info{position:absolute;right:18px;bottom:18px;width:300px;background:#100c15f0;border:1px solid #ff329666;border-radius:12px;overflow:hidden;opacity:0;transform:translateY(20px);transition:.3s;pointer-events:none}
.region-info.is-open{opacity:1;transform:none;pointer-events:auto}
.region-info img{width:100%;height:150px;object-fit:cover}
.region-info>div{padding:16px}
.region-info h3{font-size:22px;margin:6px 0 2px}
.region-info p{color:var(--muted);font-size:13px;margin:0 0 12px}
#main .region-info .button{width:100%}
.region-more{text-align:right;margin:18px 0 0}.region-more a{color:var(--pink);font-size:14px}
.region-list[hidden]{display:none}

/* Teaser mappa e articoli: inclinazione con il mouse */
.map-teaser,.post-card,.region-card{transform-style:preserve-3d;transition:transform .15s ease-out,box-shadow .3s,border-color .2s;will-change:transform;position:relative}
.post-card:hover,.region-card:hover{border-color:var(--pink);box-shadow:0 30px 60px #000a,0 0 45px #ff329677,inset 0 0 25px #ff329633;transform:none}
.post-card:after,.region-card:after,.map-teaser:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),#ff329659,#b51cff26 30%,transparent 60%);mix-blend-mode:screen;opacity:0;transition:opacity .3s}
.post-card:hover:after,.region-card:hover:after,.map-teaser:hover:after{opacity:1}

/* Grid owner su un palco che ruota con lo scroll */
.owner-stage{position:relative}
.owner-stage.is-3d{height:470px;perspective:2000px}
.owner-stage.is-3d .owner-grid{position:absolute;left:50%;top:20px;width:0;height:0;display:block;transform-style:preserve-3d}
.owner-stage.is-3d .owner-grid>article{position:absolute;width:var(--owner-w,240px);left:calc(var(--owner-w,240px) / -2)}
.owner-stage.is-3d .owner-grid img{aspect-ratio:3/4;height:auto;object-fit:cover;box-shadow:0 20px 40px #000a,0 0 30px #ff329633}
.owner-podium{display:none}
.owner-stage.is-3d .owner-podium{display:block;position:absolute;left:50%;top:330px;width:640px;height:640px;margin-left:-320px;border-radius:50%;transform:rotateX(80deg);background:radial-gradient(circle,#ff329644,transparent 65%);border:2px solid #ff329688;box-shadow:0 0 60px #ff329655}

@media(max-width:760px){
  .stats-3d{min-height:340px}.stats-3d .stats{grid-template-columns:repeat(2,1fr)}.stats-3d .stat strong{font-size:26px}
  .region-world{height:460px}.region-info{left:12px;right:12px;width:auto}

}
@media(prefers-reduced-motion:reduce){.hero-floor{animation:none}}

/* Registrazione: targhetta, fumetto e coriandoli dell'avatar */
.sg-avatar-preview{position:relative}
.sg-avatar-tag{position:absolute;top:18px;left:50%;transform:translateX(-50%);background:var(--pink);color:#190914;font-weight:800;font-size:15px;padding:6px 14px;border-radius:999px;box-shadow:0 0 25px #ff329699;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.sg-avatar-preview .sg-avatar-bubble{position:absolute;top:64px;right:16px;left:auto;max-width:60%;background:#100c15ee;border:1px solid #ff329688;color:var(--text);font-size:14px;padding:10px 14px;border-radius:14px 14px 4px 14px;box-shadow:0 0 20px #ff329644;pointer-events:none}
.sg-avatar-bubble.is-pop{animation:sg-pop .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes sg-pop{from{transform:scale(.6);opacity:0}}
.sg-confetti{position:absolute;top:-10px;width:8px;height:12px;border-radius:2px;pointer-events:none;animation:sg-fall 2.2s ease-in forwards}
@keyframes sg-fall{to{transform:translate(var(--dx),640px) rotate(720deg);opacity:0}}

/* Area residenti: stessa identità neon della homepage, senza toccare markup e funzioni */
.portal-layout .portal-nav{background:linear-gradient(180deg,#1f1526,#140f19);border-color:#ff329633;box-shadow:0 0 0 1px #ff329610,0 20px 50px #0007}
.portal-layout .portal-nav a{position:relative;transition:background .2s,color .2s,padding-left .2s}
.portal-layout .portal-nav a:hover{background:#ff329612;color:#ff80bd;padding-left:18px}
.portal-layout .portal-nav a.is-current{background:linear-gradient(90deg,#ff329633,#ff329608);color:#fff;box-shadow:inset 3px 0 0 var(--pink),0 0 20px #ff329622}
.portal-layout .portal-nav a.is-current:before{content:"";position:absolute;right:12px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--pink);box-shadow:0 0 10px var(--pink)}
.portal-nav-title{color:var(--pink)!important}
.portal-welcome{position:relative;overflow:hidden;border-color:#ff329655!important;background:radial-gradient(ellipse at 80% 0,#ff32963d,transparent 60%),linear-gradient(120deg,#36172e,#1a1420)!important;box-shadow:0 0 40px #ff329622;perspective:600px}
.portal-welcome:before{content:"";position:absolute;left:-30%;right:-30%;bottom:-60%;height:120%;transform:rotateX(70deg);transform-origin:50% 0;background-image:linear-gradient(#ff329655 1px,transparent 1px),linear-gradient(90deg,#ff329655 1px,transparent 1px);background-size:36px 36px;animation:sg-run 3s linear infinite;-webkit-mask-image:linear-gradient(transparent,#000 60%);mask-image:linear-gradient(transparent,#000 60%);opacity:.5;pointer-events:none}
.portal-welcome>*{position:relative}
.portal-welcome h2{font-size:clamp(30px,4vw,44px)!important;text-shadow:0 0 30px #ff329666}
.account-stats>div{position:relative;overflow:hidden;transform-style:preserve-3d;transition:transform .15s ease-out,box-shadow .3s,border-color .3s;border-top:2px solid var(--pink)!important;background:radial-gradient(ellipse at 50% 0,#ff32961c,transparent 70%),var(--panel)!important}
.account-stats>div:hover{border-color:var(--pink)!important;box-shadow:0 20px 40px #0008,0 0 30px #ff329644}
.account-stats strong{color:var(--pink);font-size:38px!important;text-shadow:0 0 22px #ff329666}
.sg-online-friends{border-color:#ff329633!important;background:radial-gradient(ellipse at 0 0,#ff329614,transparent 50%),var(--panel)!important}
.sg-friends-list li{transition:transform .2s,border-color .2s,box-shadow .2s}
.sg-friends-list li:hover{transform:translateY(-3px);border-color:#ff329688;box-shadow:0 10px 30px #0008,0 0 20px #ff329633}
.sg-friend-avatar{position:relative;background:#ff329626!important;color:#ff85c0!important;box-shadow:0 0 0 2px #100c15,0 0 0 3px #ff329699,0 0 16px #ff329655}
.sg-friend-avatar:after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid transparent;border-top-color:var(--pink);border-right-color:#b51cff;animation:sg-spin 2.4s linear infinite}
@keyframes sg-spin{to{transform:rotate(360deg)}}
.sg-friend-online:before{animation:sg-pulse 1.4s infinite;box-shadow:0 0 8px #95d884}
.portal-shortcuts>a{position:relative;overflow:hidden;transform-style:preserve-3d;transition:transform .15s ease-out,box-shadow .3s,border-color .2s}
.portal-shortcuts>a:hover{border-color:var(--pink)!important;box-shadow:0 30px 60px #000a,0 0 45px #ff329677,inset 0 0 25px #ff329633}
.portal-shortcuts>a:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),#ff329659,#b51cff26 30%,transparent 60%);mix-blend-mode:screen;opacity:0;transition:opacity .3s}
.portal-shortcuts>a:hover:after{opacity:1}
.portal-shortcuts h3{transition:color .2s}.portal-shortcuts>a:hover h3{color:#fff;text-shadow:0 0 18px #ff329699}
@media(prefers-reduced-motion:reduce){.portal-welcome:before,.sg-friend-avatar:after{animation:none}}

/* Selettore lingua GTranslate nell'header */
.sg-gtranslate{flex:none;position:relative;z-index:20;font-size:13px}
.sg-gtranslate .gt_selector,.sg-gtranslate select{background:#100c15;color:#f9f5fa;border:1px solid #ff329655;border-radius:6px;padding:6px 8px}
@media(max-width:760px){.sg-gtranslate{order:-1;margin-left:auto}}
/* La tendina di GTranslate si apre verso l'alto e finisce fuori schermo: la apro verso il basso */
.sg-gtranslate .gt_switcher{position:relative!important;display:block!important;overflow:visible!important}
.sg-gtranslate .gt_switcher .gt_option{position:absolute!important;top:100%!important;bottom:auto!important;left:0;right:0;z-index:100;margin-top:4px;border:1px solid #ff329655;border-radius:6px;box-shadow:0 14px 34px #000a,0 0 18px #ff329633;height:auto!important;max-height:none!important}
/* Safari mette gli elementi 3D dell'hero davanti a quelli con z-index più alto: porto l'header (e la tendina lingue) davanti anche in profondità */
.site-header{position:relative;z-index:1000;transform:translate3d(0,0,2000px)}
.sg-gtranslate .gt_switcher .gt_option{transform:translate3d(0,0,2000px)}