:root{
  --nero:#101010;      /* stesso nero dei contorni del logo */
  --nero-2:#1A1716;
  --rosso:#E52B26;
  --rosso-scuro:#9E1A16;
  --avorio:#F4E9D2;
  --oro:#F2B33D;
  --soft:#C9BFAE;
  --giallo:#FFC93C;
  --fucsia:#FF2E88;
  --ciano:#18C8E0;
  --viola:#7A3BFF;
  --verde:#2BD67B;
  --arancio:#FF7A1A;
  --notte:#170B2C;
  --r:22px;
  --nav:62px;
}
*{box-sizing:border-box}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--nav)}
html,body{overflow-x:hidden;overflow-x:clip}
body{margin:0;background:var(--nero);color:var(--avorio);font:400 17px/1.6 Figtree,system-ui,sans-serif}
a{color:var(--avorio)}
button,.btn,nav a{touch-action:manipulation;user-select:none;-webkit-user-select:none}
:focus-visible{outline:3px solid var(--oro);outline-offset:3px;border-radius:6px}
h1,h2,h3,.display{font-family:Bungee,Impact,sans-serif;font-weight:400;line-height:1.02;margin:0;letter-spacing:-.01em}
.wrap{max-width:1180px;margin:0 auto;padding:0 max(18px,env(safe-area-inset-left))}

/* ===== NAV ===== */
nav{position:fixed;inset:0 0 auto;z-index:30;padding-top:env(safe-area-inset-top);
  background:linear-gradient(var(--nero),rgba(16,16,16,.75));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--nav)}
.brand{font-family:Bungee,sans-serif;font-size:24px;text-decoration:none;display:flex;align-items:center;gap:10px}
.brand i{width:12px;height:12px;border-radius:50%;background:var(--rosso);box-shadow:0 0 12px var(--rosso)}
nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;align-items:center}
nav ul a{color:var(--soft);text-decoration:none;font-weight:600;font-size:15px}
nav .cta{background:var(--rosso);color:var(--avorio);padding:9px 18px;border-radius:999px;font-weight:800}
.progress{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--rosso);transform-origin:0 50%;transform:scaleX(0)}
@media (max-width:820px){nav ul li:not(:last-child){display:none}}

/* ===== HERO ===== */
.hero{--tenda:clamp(26px,7vw,110px);position:relative;min-height:100svh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:20px;
  padding:calc(var(--nav) + 70px) max(calc(var(--tenda) + 18px),calc((100vw - 1240px) / 2)) 40px;overflow:hidden;isolation:isolate}
/* foto di sfondo */
.bgfoto{position:absolute;inset:0;z-index:-3;background-color:#111;background-position:var(--bgpos,50% 30%);background-size:cover;background-repeat:no-repeat;
  animation:kenburns 26s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.08)}to{transform:scale(1.22) translate(-2%,1%)}}
.bgveli{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
   radial-gradient(circle,rgba(0,0,0,.35) 1px,transparent 1.6px) 0 0/4px 4px,
   linear-gradient(90deg,rgba(16,16,16,.88) 0%,rgba(16,16,16,.45) 42%,rgba(16,16,16,.08) 70%,rgba(16,16,16,.4) 100%),
   linear-gradient(to top,var(--nero) 0%,transparent 28%),
   linear-gradient(to bottom,rgba(16,16,16,.85) 0%,transparent 26%)}
/* sipario */
.mantovana{position:absolute;left:0;right:0;top:calc(var(--nav) + env(safe-area-inset-top));height:46px;z-index:5;pointer-events:none;
  background:repeating-linear-gradient(90deg,#8E1111 0 10px,#C81E1E 10px 26px,#8E1111 26px 36px);box-shadow:0 8px 18px rgba(0,0,0,.5)}
.mantovana::after{content:"";position:absolute;left:0;right:0;top:100%;height:20px;
  background:radial-gradient(circle at 15px 0,#C81E1E 14px,transparent 15px) 0 0/30px 20px repeat-x}
.mantovana::before{content:"";position:absolute;left:0;right:0;bottom:-2px;height:5px;background:var(--giallo);z-index:1}
.tenda{position:absolute;top:0;bottom:0;width:var(--tenda);z-index:4;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.35),transparent 30%,transparent 70%,rgba(0,0,0,.45)),
   repeating-linear-gradient(90deg,#5E0909 0,#A3161A 3.2%,#E0302A 5.5%,#A3161A 8%,#5E0909 10.5%);
  box-shadow:0 0 40px rgba(0,0,0,.7);transition:width 1.9s cubic-bezier(.7,0,.2,1)}
.tenda.sx{left:0;border-radius:0 0 60% 0/0 0 12% 0}.tenda.dx{right:0;border-radius:0 0 0 60%/0 0 0 12%}
.tenda::after{content:"";position:absolute;top:58%;width:16px;height:16px;border-radius:50%;background:var(--giallo);box-shadow:0 0 0 4px #B8860B}
.tenda.sx::after{right:-8px}.tenda.dx::after{left:-8px}
html.chiuso .tenda{width:50.5%;transition:none}
html.chiuso .tenda::after{opacity:0}
html.chiuso .hero-text{opacity:0}
.hero .lucine{top:calc(var(--nav) + env(safe-area-inset-top) + 26px);z-index:6}
.hero-text{position:relative}
.hero p{text-shadow:0 2px 12px #000}
.hero .btn-o{background:rgba(16,16,16,.55);backdrop-filter:blur(4px)}
.hero h1{font-size:clamp(40px,6.2vw,92px);line-height:1.08}
.hero h1 .w{display:block;white-space:nowrap}
.hero h1 .l{display:inline-block;color:var(--lc);
  text-shadow:1px 1px 0 #000,2px 2px 0 #000,3px 3px 0 #000,4px 4px 0 #000,5px 5px 0 #000,6px 6px 0 var(--ls);
  animation:dance 1.8s ease-in-out infinite;animation-delay:calc(var(--k) * -.13s)}
@keyframes dance{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-.08em) rotate(3deg)}}
.hero h1 .l.jump{animation:jump .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes jump{0%{transform:none}40%{transform:translateY(-.45em) rotate(-14deg) scale(1.2)}100%{transform:none}}
.hero p{max-width:36ch;color:var(--soft);font-size:19px;margin:18px 0 0}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:8px;font:800 16px Figtree,sans-serif;padding:15px 26px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;transition:transform .12s ease-out,background .15s}
.btn:active{transform:scale(.96)}
.btn-r{background:var(--rosso);color:var(--avorio);box-shadow:0 5px 0 #8E1411}
.btn-r:active{box-shadow:0 2px 0 #8E1411;transform:translateY(3px)}
.btn-o{background:transparent;color:var(--avorio);box-shadow:inset 0 0 0 2px #4A403A}

.stage{position:relative;height:min(84svh,760px);display:grid;place-items:center;perspective:1200px}
.rays{position:absolute;width:150%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,201,60,.16) 0 7.5deg,rgba(255,46,136,.0) 7.5deg 15deg);
  -webkit-mask:radial-gradient(circle,#000 18%,transparent 66%);mask:radial-gradient(circle,#000 18%,transparent 66%);
  animation:spin 70s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
html.intro .rays{visibility:hidden}
.halo{position:absolute;width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(229,43,38,.42),rgba(229,43,38,.12) 45%,transparent 70%);animation:pulse 4.5s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.08);opacity:.75}}
.tilt{position:relative;height:100%;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.float{height:100%;animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-12px) rotate(-.6deg)}}
#logo{height:100%;width:auto;max-width:100%;display:block;overflow:visible}
/* nuvole che fluttuano */
.cl{animation:drift 7s ease-in-out infinite alternate}
.cl.c1{animation-duration:6.5s}
.cl.c2{animation-duration:8s;animation-direction:alternate-reverse}
.cl.c3{animation-duration:5.5s}
.cl.c4{animation-duration:7.5s;animation-direction:alternate-reverse}
.cl.c5{animation-duration:6s}
@keyframes drift{from{transform:translate(-14px,4px)}to{transform:translate(14px,-6px)}}
/* riflesso di luce sulle lettere */
#sheen{animation:sheen 6s 2.2s ease-in-out infinite}
@keyframes sheen{0%{transform:translateX(-900px) skewX(-20deg)}35%,100%{transform:translateX(1300px) skewX(-20deg)}}
#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.tap{position:absolute;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom));text-align:center;font-size:13px;color:#7D7266;z-index:2}

@media (max-width:820px){
  .hero{grid-template-columns:1fr;text-align:center;align-content:start;gap:0;padding-top:calc(var(--nav) + 64px)}
  .bgveli{background:radial-gradient(circle,rgba(0,0,0,.35) 1px,transparent 1.6px) 0 0/4px 4px,
    linear-gradient(to bottom,rgba(16,16,16,.45) 0%,rgba(16,16,16,.05) 40%,rgba(16,16,16,.8) 64%,var(--nero) 85%)}
  .bgfoto{background-position:50% 0;background-size:auto 66%;background-color:var(--nero)}
  .stage{height:56svh;order:-1}
  .hero p{margin-inline:auto}
  .btns{justify-content:center}
}

/* ===== INTRO DI APERTURA ===== */
#intro{display:none}
html.intro body{overflow:hidden}
html.intro #intro{display:block;position:fixed;inset:0;z-index:50;background:var(--nero);transition:opacity .8s ease}
#intro canvas{position:absolute;inset:0;width:100%;height:100%}
.beat{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px;border-radius:50%;background:var(--rosso);
  box-shadow:0 0 30px 8px rgba(229,43,38,.7);animation:beat .55s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes beat{0%{transform:scale(.6)}25%{transform:scale(1.5)}100%{transform:scale(.6)}}
html.draw .beat{animation:beatOut .5s ease forwards}
@keyframes beatOut{to{transform:scale(14);opacity:0}}
.glow{position:absolute;left:50%;top:50%;width:min(110vw,900px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.4);border-radius:50%;
  background:radial-gradient(circle,rgba(229,43,38,.5),rgba(229,43,38,.15) 45%,transparent 70%);opacity:0;transition:opacity 1.2s ease,transform 1.6s cubic-bezier(.2,.8,.2,1)}
html.fill .glow{opacity:1;transform:translate(-50%,-50%) scale(1)}
.ring{position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-150px;border-radius:50%;border:4px solid var(--avorio);opacity:0}
.ring.r2{border-color:var(--rosso);border-width:8px}
html.impact .ring{animation:ring 1s cubic-bezier(.1,.7,.2,1) forwards}
html.impact .ring.r2{animation-delay:.08s}
@keyframes ring{0%{transform:scale(.3);opacity:1}100%{transform:scale(5);opacity:0;border-width:1px}}
#intro::after{content:"";position:absolute;inset:0;background:var(--avorio);opacity:0;pointer-events:none}
html.impact #intro::after{animation:flash .5s ease-out}
@keyframes flash{0%{opacity:.75}100%{opacity:0}}
.intro-tag{position:absolute;left:0;right:0;bottom:calc(9svh + env(safe-area-inset-bottom));text-align:center;
  font-family:Bungee,sans-serif;font-size:clamp(20px,3.6vw,40px);color:var(--avorio)}
.intro-tag span{display:inline-block;opacity:0;transform:translateY(30px) rotate(8deg)}
.intro-tag .sp{width:.3em}
html.impact .intro-tag span{animation:letter .6s cubic-bezier(.2,1.4,.4,1) forwards;animation-delay:calc(.25s + var(--n) * 28ms)}
@keyframes letter{to{opacity:1;transform:none}}
.intro-tag small{display:block;font:600 14px Figtree,sans-serif;color:var(--soft);margin-top:8px;opacity:0}
html.impact .intro-tag small{animation:letter .6s 1s ease forwards}
#skip{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));z-index:3;
  background:transparent;color:var(--soft);border:1.5px solid #3A322E;border-radius:999px;padding:9px 16px;font:600 14px Figtree,sans-serif;cursor:pointer}
html.out #intro{opacity:0;pointer-events:none}

/* il logo durante l'intro sta sopra al nero, al centro dello schermo */
html.intro .stage{z-index:60}
.stage{z-index:7}
.hero-text{z-index:7}
#fx{z-index:8}
html.intro:not(.armed) .stage{visibility:hidden}
html.intro .halo,html.intro .tap{visibility:hidden}
html.intro:not(.armed) #logo path{transition:none!important}
.halo,.tap{transition:opacity 1s}
.fly{height:100%;transform-origin:50% 50%}
html.flying .fly{transition:transform 1s cubic-bezier(.7,0,.2,1)}
html.intro #sheenLayer{opacity:0}
/* il drago viene disegnato a linee, poi si riempie di colore */
html.intro #logo path{fill-opacity:0;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.4s cubic-bezier(.65,0,.35,1) calc(var(--i) * 7ms),fill-opacity .6s ease calc(var(--i) * 5ms),stroke-opacity .5s ease .4s}
html.intro #logo .r{stroke:#E52B26}
html.intro #logo .i{stroke:#F4E9D2}
html.intro #logo .k{stroke:none}
html.draw #logo path{stroke-dashoffset:0}
html.fill #logo path{fill-opacity:1;stroke-opacity:0}
html.impact .tilt{animation:punch .6s cubic-bezier(.2,.8,.2,1)}
@keyframes punch{0%{transform:scale(1.22)}35%{transform:scale(.95)}65%{transform:scale(1.03)}100%{transform:none}}
html.impact .stage,html.impact #intro canvas{animation:shake .45s linear}
@keyframes shake{10%,50%,90%{translate:-7px 3px}30%,70%{translate:7px -4px}}
/* il testo della pagina arriva dopo il logo */
html.intro .hero-text{opacity:0;transform:translateX(-30px)}
.hero-text{transition:opacity .9s ease 1.1s,transform .9s cubic-bezier(.2,.8,.2,1) 1.1s}
@media (max-width:820px){html.intro .hero-text{transform:translateY(24px)}}

/* ===== LUCINE ===== */
.lucine{position:absolute;left:0;right:0;height:64px;pointer-events:none;z-index:2}
.lucine svg{display:block;width:100%;height:100%;overflow:visible}
.lucine .cord{fill:none;stroke:#2A2340;stroke-width:2}
.lucine .bulb{animation:blink 1.2s steps(1) infinite;animation-delay:calc(var(--b) * -.4s)}
.lucine .bulb circle:first-child{opacity:.45}
@keyframes blink{0%{opacity:1}33%{opacity:.25}66%{opacity:1}}


/* ===== SEZIONI ===== */
section{padding:110px 0;position:relative}
.frangia::before{content:"";position:absolute;left:0;right:0;top:-21px;height:22px;
  background:radial-gradient(circle at 18px 22px,var(--fb) 17px,transparent 18px) 0 0/36px 22px repeat-x}
.kick{color:var(--fucsia);font-weight:800;font-size:16px;margin-bottom:12px}
h2{font-size:clamp(30px,5.4vw,66px);line-height:1.08;position:relative;display:inline-block;padding-bottom:14px;margin-bottom:22px}
h2 svg{position:absolute;left:0;bottom:-4px;width:100%;height:22px;overflow:visible}
h2 svg path{fill:none;stroke:var(--fucsia);stroke-width:7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s cubic-bezier(.6,0,.2,1)}
h2.on svg path{stroke-dashoffset:0}
.lead{font-size:20px;max-width:58ch;color:var(--soft);margin:0}

.chi{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.stats div{border-left:4px solid var(--lc,var(--giallo));padding-left:14px}
.stats div:nth-child(1){--lc:var(--giallo)}.stats div:nth-child(2){--lc:var(--fucsia)}.stats div:nth-child(3){--lc:var(--ciano)}
.stats b{display:block;font-family:Bungee,sans-serif;font-weight:400;font-size:44px;line-height:1.1;color:var(--lc)}
.stats small{color:var(--soft);font-size:14px;line-height:1.35;display:block}
.photo{position:relative;margin:0;transform:rotate(2deg);aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;
  background:var(--nero-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='28'%3E%3Cpath d='M0 28a24 24 0 0 1 48 0' fill='none' stroke='%23E52B26' stroke-opacity='.25' stroke-width='2'/%3E%3Cpath d='M-24 14a24 24 0 0 1 48 0M24 14a24 24 0 0 1 48 0' fill='none' stroke='%23E52B26' stroke-opacity='.25' stroke-width='2'/%3E%3C/svg%3E");
  display:grid;place-items:center;color:#7D7266;font-weight:600;box-shadow:12px 12px 0 var(--fucsia),24px 24px 0 var(--giallo)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo figcaption{position:absolute;left:12px;bottom:12px;background:var(--giallo);color:var(--nero);font:800 13px Figtree,sans-serif;padding:6px 12px;border-radius:999px}
@media (max-width:820px){.chi{grid-template-columns:1fr}.photo{max-width:560px;margin:0 auto 24px}.stats b{font-size:34px}}

/* ===== LA SFILATA ===== */
.parade{padding:0;background:var(--notte);--fb:var(--notte)}
.pin{position:sticky;top:0;height:100svh;overflow:hidden;
  background:radial-gradient(ellipse at 50% 120%,#5B1A6B 0,transparent 60%),linear-gradient(#0D0620,var(--notte) 55%,#26103F)}
.beam{position:absolute;bottom:-10%;width:34vmax;height:150vh;transform-origin:50% 100%;pointer-events:none;
  background:linear-gradient(to top,rgba(255,240,200,.22),transparent 85%);clip-path:polygon(44% 100%,56% 100%,100% 0,0 0);
  animation:sweep 7s ease-in-out infinite alternate}
.beam.b1{left:-8vmax;--a:22deg;--b:-8deg}.beam.b2{right:-8vmax;--a:-22deg;--b:8deg;animation-duration:8.5s}
@keyframes sweep{from{transform:rotate(var(--a))}to{transform:rotate(var(--b))}}
.ptitle{position:absolute;top:calc(var(--nav) + 50px);left:0;right:0;text-align:center;z-index:3;padding:0 16px}
.ptitle h2{font-size:clamp(26px,4.4vw,52px);padding:0;margin:0;color:var(--avorio);text-shadow:4px 4px 0 var(--fucsia)}
.ptitle p{margin:6px 0 0;color:var(--soft);font-size:15px}
.pin .lucine{top:calc(var(--nav) + 4px)}
.track{position:absolute;left:0;bottom:21%;display:flex;align-items:flex-end;gap:clamp(30px,6vw,90px);will-change:transform}
.road{position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(#3A2650,#1E1230);border-top:4px solid #4F3870}
.road::after{content:"";position:absolute;left:0;right:0;top:46%;height:6px;
  background:repeating-linear-gradient(90deg,var(--giallo) 0 46px,transparent 46px 110px);opacity:.55;transform:translateX(var(--rx,0px))}
.crowd{position:absolute;left:0;bottom:-8px;height:110px;width:3000px;z-index:4;pointer-events:none;will-change:transform}
.crowd svg{width:3000px;height:110px;display:block}
@media (max-width:700px){.crowd{height:80px}.crowd svg{height:80px}}
.crowd .arm{transform-box:fill-box;transform-origin:50% 100%;animation:wave .9s ease-in-out infinite alternate}
@keyframes wave{from{transform:rotate(-24deg)}to{transform:rotate(18deg)}}

.carro{--w:clamp(250px,72vw,330px);position:relative;flex:0 0 var(--w);width:var(--w);display:flex;flex-direction:column;align-items:center;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .5s}
.carro:not(.on){transform:scale(.86);filter:saturate(.7) brightness(.75)}
.carro .spot{position:absolute;bottom:20%;left:50%;width:170%;height:260%;transform:translateX(-50%);pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(ellipse at 50% 100%,rgba(255,240,200,.28),transparent 60%)}
.carro.on .spot{opacity:1}
.medals{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;min-height:34px;margin-bottom:8px;position:relative;z-index:2}
.medals span{background:var(--giallo);color:var(--nero);font:800 13px Figtree,sans-serif;padding:6px 11px;border-radius:999px;box-shadow:0 3px 0 #B8860B;
  transform:scale(0) rotate(-10deg);transition:transform .45s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--m) * 90ms)}
.medals span.no{background:#3A2E52;color:#C9BFE0;box-shadow:none}
.carro.on .medals span{transform:none}
.fig{position:relative;font-size:clamp(100px,27vw,140px);line-height:1;margin-bottom:-14px;z-index:1;animation:bob 1.3s ease-in-out infinite alternate}
.fig::before{content:"";position:absolute;inset:-12% -20%;border-radius:50%;background:radial-gradient(circle,var(--c),transparent 68%);opacity:.6;z-index:-1}
@keyframes bob{from{transform:translateY(0) rotate(-5deg)}to{transform:translateY(-10px) rotate(5deg)}}
.deck{position:relative;width:100%;background:var(--c);color:var(--nero);border-radius:18px 18px 8px 8px;padding:14px 14px 12px;text-align:center;
  box-shadow:inset 0 -8px 0 rgba(0,0,0,.18),0 0 0 4px #000}
.deck .yr{font-family:"Bungee Shade",Bungee,sans-serif;font-size:clamp(40px,10vw,58px);line-height:1;color:#fff;text-shadow:3px 3px 0 #000}
.deck h3{font-size:clamp(17px,4.4vw,22px);line-height:1.1;margin:6px 0 0;color:#000}
.deck small{display:block;font-weight:700;font-size:13px;line-height:1.3;margin-top:4px;color:rgba(0,0,0,.72)}
.skirt{width:96%;height:16px;background:radial-gradient(circle at 10px 0,var(--c) 9px,transparent 10px) 0 0/20px 16px repeat-x;filter:brightness(.8)}
.wheels{display:flex;justify-content:space-between;width:80%;margin-top:-4px}
.wheels i{width:38px;height:38px;border-radius:50%;background:radial-gradient(circle,var(--giallo) 0 4px,#1B1B1B 5px);border:5px solid #000;
  box-shadow:inset 0 0 0 3px var(--giallo);position:relative;transform:rotate(var(--roll,0deg))}
.wheels i::before,.wheels i::after{content:"";position:absolute;left:50%;top:3px;bottom:3px;width:3px;margin-left:-1.5px;background:var(--giallo);opacity:.8}
.wheels i::after{transform:rotate(60deg)}
.wheels i b{display:none}
.fig.foto{font-size:0;margin-bottom:-6px;width:96%}
.fig.foto::before{display:none}
.fig.foto img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;border:6px solid var(--giallo);box-shadow:0 0 0 4px #000,0 14px 30px rgba(0,0,0,.5)}
.carro.pausa .deck{background:#2D2342;color:var(--avorio)}.carro.pausa .deck h3{color:var(--avorio)}.carro.pausa .deck small{color:#B9AED4}
.carro.pausa .fig::before{display:none}
.years{position:absolute;left:0;right:0;bottom:calc(10px + env(safe-area-inset-bottom));z-index:5;display:flex;justify-content:center;gap:4px;padding:0 10px;flex-wrap:wrap}
.years button{font:800 12px Figtree,sans-serif;color:#B9AED4;background:rgba(23,11,44,.8);border:0;border-radius:999px;padding:6px 9px;cursor:pointer}
.years button.on{background:var(--giallo);color:var(--nero)}
@media (max-width:700px){.years button{padding:5px 6px;font-size:11px}.years button:not(.on):not(.near){display:none}}

/* ===== BACHECA ===== */
.bacheca{background:var(--giallo);color:var(--nero);--fb:var(--giallo);overflow:hidden}
.bacheca .kick{color:var(--rosso)}
.bacheca .lead{color:#5A4300}
.bacheca h2 svg path{stroke:var(--rosso)}
.big{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:40px 0 50px}
.big div{background:var(--nero);color:var(--avorio);border-radius:22px;padding:22px 20px 18px;box-shadow:0 8px 0 var(--rosso)}
.big b{display:block;font-family:"Bungee Shade",Bungee,sans-serif;font-weight:400;font-size:clamp(56px,9vw,96px);line-height:1;color:var(--giallo)}
.big span{display:block;font-weight:700;margin-top:8px}
.shelf{display:flex;flex-wrap:wrap;gap:18px 10px;justify-content:center;padding:0 0 18px;border-bottom:14px solid #8B5A2B;position:relative}
.shelf::after{content:"";position:absolute;left:0;right:0;bottom:-26px;height:12px;background:#6B4421;border-radius:0 0 8px 8px}
.troph{width:96px;text-align:center;cursor:pointer;background:none;border:0;padding:0;font:inherit;color:inherit;
  transform:translateY(-120vh) rotate(-20deg);transition:transform .8s cubic-bezier(.3,1.35,.5,1);transition-delay:calc(var(--t) * 80ms)}
.bacheca.on .troph{transform:none}
.troph .ic{display:block;font-size:54px;line-height:1;filter:drop-shadow(0 4px 0 rgba(0,0,0,.25))}
.troph.hit .ic{animation:jig .6s ease}
@keyframes jig{25%{transform:rotate(-16deg) scale(1.15)}50%{transform:rotate(12deg)}75%{transform:rotate(-6deg)}}
.troph b{display:block;font:800 13px Figtree,sans-serif;margin-top:6px}
.troph small{display:block;font-size:12px;line-height:1.25;color:#5A4300}
@media (max-width:700px){.big{grid-template-columns:1fr;gap:14px}.troph{width:80px}.troph .ic{font-size:44px}}

/* gioco */
.gioco{background:radial-gradient(ellipse at 50% 0,#4A1250,var(--nero) 65%)}
.shell{position:relative;margin-top:30px;border-radius:var(--r);overflow:hidden;background:#160E0C;box-shadow:0 0 0 3px var(--giallo),0 0 0 9px var(--fucsia),0 24px 70px rgba(255,46,136,.3)}
#game{display:block;width:100%;height:min(72svh,580px);touch-action:none}
.hud{position:absolute;top:12px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:center;font:800 18px Figtree,sans-serif;pointer-events:none;text-shadow:0 2px 0 #000}
.hud .vite{color:var(--rosso);letter-spacing:3px;font-size:20px}
.combo{color:var(--oro)}
.ov{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;background:rgba(16,10,9,.88)}
.ov[hidden]{display:none}
.ov h3{font-size:clamp(32px,6vw,54px);margin-bottom:10px}
.ov p{max-width:42ch;margin:0 auto 6px;color:var(--soft)}
.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 20px;margin:16px 0 22px;font-size:15px}
.legend i{display:inline-block;width:14px;height:14px;border-radius:50%;margin-right:7px;vertical-align:-2px}
.rec{font-weight:800;color:var(--oro);margin-top:12px}

/* countdown */
.count{display:grid;grid-template-columns:repeat(4,minmax(0,120px));gap:12px;margin:34px 0 10px}
#programma{background:var(--ciano);color:var(--nero);--fb:var(--ciano)}
#programma .kick{color:var(--nero)}
#programma .lead{color:#0C3D45}
#programma h2 svg path{stroke:var(--nero)}
.count div{min-width:0;background:var(--nero);color:var(--avorio);border-radius:16px;padding:16px 12px 12px;text-align:center;box-shadow:0 6px 0 var(--fucsia)}
.count b{display:block;font-family:Bungee,sans-serif;font-weight:400;font-size:52px;line-height:1.05}
.count b.flip{animation:flip .45s cubic-bezier(.2,.8,.2,1)}
@keyframes flip{from{transform:translateY(-40%);opacity:0}}
.count small{color:var(--giallo)}
.days{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.days li{padding:18px 18px 18px 0;border-top:3px solid var(--nero);position:relative}
.days li::before{content:"";position:absolute;top:-9px;left:0;width:15px;height:15px;border-radius:50%;background:var(--fucsia);border:3px solid var(--nero)}
.days b{display:block;font-size:18px;margin-top:6px}
.days span{color:#0C3D45;font-size:15px}
@media (max-width:820px){.days{grid-template-columns:1fr 1fr;gap:0 18px}.count{gap:8px}.count b{font-size:34px}.count small{font-size:12px}}

/* unisciti */
.join{background:var(--rosso);color:var(--avorio);--fb:var(--rosso)}
.join .kick{color:var(--giallo)}
.join h2 svg path{stroke:var(--nero)}
.join .lead{color:#FFE3D9}
form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px;max-width:740px;position:relative}
label{display:grid;gap:6px;font-weight:800;font-size:15px}
input,select,textarea{font:16px Figtree,sans-serif;padding:14px;border-radius:12px;border:0;background:var(--avorio);color:var(--nero)}
.full{grid-column:1/-1}
form .btn{background:var(--nero);color:var(--avorio);justify-self:start}
@media (max-width:600px){form{grid-template-columns:1fr}}

footer{padding:50px 0 calc(50px + env(safe-area-inset-bottom));color:#8A7E70;font-size:15px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center}
footer a{color:var(--avorio)}

@media (hover:hover) and (pointer:fine){
  nav ul a:hover{color:var(--avorio)}
  .btn-r:hover{background:#FF3D37}
  .btn-o:hover{box-shadow:inset 0 0 0 2px var(--avorio)}
  form .btn:hover{background:#2A2320}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  h2 svg path{stroke-dashoffset:0}
}

/* modulo: esito invio e campo trappola anti-spam */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.esito{grid-column:1/-1;font-weight:800;min-height:1.4em;margin:0}
.esito.ok{color:var(--giallo)}
.esito.ko{color:#fff;background:rgba(0,0,0,.35);padding:10px 14px;border-radius:12px}
form .btn[disabled]{opacity:.6}

/* ===== AVVISAMI: biglietto d'ingresso ===== */
.avvisami{background:var(--fucsia);color:var(--nero);--fb:var(--fucsia)}
.avvisami .kick{color:var(--giallo);text-shadow:0 1px 0 rgba(0,0,0,.3)}
.avvisami .lead{color:#3D0620}
.avvisami h2 svg path{stroke:var(--giallo)}
.avv{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center}
.biglietto{position:relative;display:grid;grid-template-columns:1fr 200px;background:var(--avorio);color:var(--nero);border-radius:22px;
  box-shadow:0 14px 0 rgba(0,0,0,.25);transform:rotate(-1.5deg);
  -webkit-mask:radial-gradient(circle 16px at calc(100% - 200px) 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 16px at calc(100% - 200px) 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 16px at calc(100% - 200px) 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 16px at calc(100% - 200px) 100%,#0000 98%,#000) bottom/100% 51% no-repeat}
.b-corpo{padding:22px 22px 18px;display:grid;gap:12px}
.b-testa{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-bottom:3px solid var(--nero);padding-bottom:8px}
.b-testa span{font-weight:800;font-size:13px;color:var(--rosso)}
.b-testa b{font-family:Bungee,sans-serif;font-weight:400;font-size:24px}
.b-campi{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.b-campi .full{grid-column:1/-1}
.biglietto label{color:var(--nero)}
.biglietto input[type=text],.biglietto input:not([type]),.biglietto input[type=email]{background:#fff;border:2px solid #E2D6BD}
.spunta{display:flex!important;align-items:flex-start;gap:10px;font-weight:600!important;font-size:14px!important;line-height:1.4}
.spunta input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--rosso)}
.spunta a{color:var(--rosso)}
.b-stub{border-left:3px dashed #C9B996;padding:22px 18px;display:flex;flex-direction:column;justify-content:center;gap:12px;text-align:center;
  background:repeating-linear-gradient(-45deg,transparent 0 14px,rgba(255,201,60,.18) 14px 28px)}
.b-stub .btn{justify-content:center;font-size:18px}
.b-stub small{font-size:12.5px;color:#5B4E44;line-height:1.35}
.biglietto .esito{min-height:0}
.biglietto .esito.ok{color:#0E7A3E}
.biglietto .esito.ko{color:#fff;background:var(--rosso)}
.timbro{position:absolute;left:24%;top:46%;font-family:Bungee,sans-serif;font-size:22px;color:var(--rosso);border:4px solid var(--rosso);border-radius:10px;
  padding:6px 12px;transform:translateY(-50%) rotate(-14deg) scale(2.4);opacity:0;pointer-events:none;mix-blend-mode:multiply}
.biglietto.fatto .timbro{animation:timbro .5s cubic-bezier(.3,1.4,.5,1) forwards}
@keyframes timbro{to{opacity:.9;transform:translateY(-50%) rotate(-14deg) scale(1)}}
@media (max-width:860px){
  .avv{grid-template-columns:1fr;gap:26px}
  .biglietto{grid-template-columns:1fr;transform:none;
    -webkit-mask:radial-gradient(circle 16px at 0 calc(100% - 150px),#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 16px at 100% calc(100% - 150px),#0000 98%,#000) right/51% 100% no-repeat;
    mask:radial-gradient(circle 16px at 0 calc(100% - 150px),#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 16px at 100% calc(100% - 150px),#0000 98%,#000) right/51% 100% no-repeat}
  .b-stub{border-left:0;border-top:3px dashed #C9B996;min-height:150px}
  .timbro{left:auto;right:20px;top:auto;bottom:178px;transform:rotate(-10deg) scale(2.4)}
  @keyframes timbro{to{opacity:.9;transform:rotate(-10deg) scale(1)}}
}
@media (max-width:420px){.b-campi{grid-template-columns:1fr}}

/* ===== AVVISO IN EVIDENZA ===== */
.avviso{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:44;display:flex;align-items:center;gap:12px;
  width:min(640px,calc(100% - 24px));padding:12px 12px 12px 16px;border-radius:18px;background:var(--giallo);color:var(--nero);
  box-shadow:0 0 0 3px var(--nero),0 8px 0 var(--fucsia),0 16px 40px rgba(0,0,0,.5);
  transform:translate(-50%,160%);transition:transform .6s cubic-bezier(.3,1.4,.5,1)}
.avviso.su{transform:translate(-50%,0)}
.av-icona{font-size:26px;animation:megafono 1.4s ease-in-out infinite}
@keyframes megafono{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(10deg) scale(1.1)}}
.av-testo{flex:1;font-weight:800;line-height:1.25}
.av-link{flex:none;background:var(--rosso);color:var(--avorio);font-weight:800;text-decoration:none;padding:10px 16px;border-radius:999px;white-space:nowrap}
.av-chiudi{flex:none;width:36px;height:36px;border-radius:50%;border:0;background:rgba(0,0,0,.12);color:var(--nero);font-size:16px;cursor:pointer}
html.intro .avviso{display:none}
@media (max-width:520px){.avviso{flex-wrap:wrap}.av-testo{flex:1 1 calc(100% - 90px)}.av-link{order:3;flex:1;text-align:center}}

/* ===== CLASSIFICA ===== */
.gioco .wrap{display:block}
.classifica{margin-top:26px;background:#1A1226;border-radius:var(--r);padding:20px;box-shadow:0 0 0 3px var(--giallo)}
.classifica h3{font-size:24px;color:var(--giallo);margin:0 0 12px}
.classifica ol{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.classifica li{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:#24183A;font-weight:700}
.classifica li:nth-child(1){background:linear-gradient(90deg,#5C4300,#24183A)}
.classifica li:nth-child(2){background:linear-gradient(90deg,#4A4A55,#24183A)}
.classifica li:nth-child(3){background:linear-gradient(90deg,#5A3216,#24183A)}
.classifica li.mio{box-shadow:0 0 0 3px var(--fucsia)}
.classifica .pos{font-size:22px;text-align:center}
.classifica .nick{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.classifica b{font-family:Bungee,sans-serif;font-weight:400;color:var(--giallo)}
.classifica li.vuota{display:block;color:var(--soft);font-weight:600;background:none;padding:6px 0}
@media (min-width:900px){.gioco .wrap{display:grid;grid-template-columns:1fr 320px;gap:0 26px;align-items:start}
  .gioco .wrap>.kick,.gioco .wrap>h2,.gioco .wrap>.lead{grid-column:1/-1}.gioco .wrap>h2{justify-self:start}.classifica{margin-top:30px}}
.salva{display:block;margin:4px auto 16px;max-width:340px;text-align:left}
.salva[hidden]{display:none}
.salva label{font-weight:800;color:var(--giallo);display:block;margin-bottom:6px}
.salva-riga{display:flex;gap:8px}
.salva input{flex:1;min-width:0;font:16px Figtree,sans-serif;padding:12px;border-radius:12px;border:0;background:var(--avorio);color:var(--nero)}
.btn-g{background:var(--giallo);color:var(--nero);box-shadow:0 5px 0 #B8860B}
.salva-esito{margin:8px 0 0;font-weight:700;font-size:15px;min-height:1.2em}
.salva-esito.ok{color:var(--verde)}.salva-esito.ko{color:#FF8A84}
.ov-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ===== SPONSOR ===== */
.sponsor{background:var(--avorio);color:var(--nero);--fb:var(--avorio)}
.sponsor .lead{color:#5B4E44}
.sponsor h2 svg path{stroke:var(--rosso)}
.loghi{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
.loghi li{animation:galleggia 4s ease-in-out infinite;animation-delay:calc(var(--k) * -.7s)}
@keyframes galleggia{50%{transform:translateY(-6px)}}
.loghi a,.loghi span{display:grid;place-items:center;height:120px;padding:18px;background:#fff;border-radius:18px;box-shadow:0 4px 0 #E2D6BD;text-decoration:none;color:var(--nero)}
.loghi img{max-width:100%;max-height:84px;object-fit:contain}
.loghi b{font-family:Bungee,sans-serif;font-weight:400;font-size:18px;text-align:center}
@media (hover:hover) and (pointer:fine){.loghi a{transition:transform .2s,box-shadow .2s}.loghi a:hover{transform:translateY(-4px) rotate(-1deg);box-shadow:0 10px 0 var(--giallo)}}
.condividi{background:none;border:1.5px solid #4A403A;color:var(--avorio);border-radius:999px;padding:8px 16px;font:700 14px Figtree,sans-serif;cursor:pointer}