body{overflow-x:clip}
.chi-sei{will-change:transform}
.chi-sei{width:min(calc(100% - 32px),960px);margin:0 auto;padding:calc(env(safe-area-inset-top) + 12px) 0 calc(env(safe-area-inset-bottom) + 16px);text-align:center}
.chi-sei h1{font-size:clamp(44px,10vw,72px);line-height:.95;margin:12px 0 14px;animation:cs-titolo .48s cubic-bezier(.18,.8,.22,1) both}
.chi-sei form{padding:12px;text-align:left}
.avatar-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:360px){.avatar-choices{grid-template-columns:repeat(3,minmax(0,1fr))}}
.avatar-choice{position:relative;isolation:isolate;display:block;min-width:0;min-height:44px;padding:6px;border:1px solid rgba(245,245,240,.4);border-radius:16px;background:rgba(12,12,12,.7);box-shadow:0 0 15px rgba(109,193,255,.2);cursor:pointer;transform:rotate(-1.5deg);animation:cs-entra-sx .52s steps(5,end) backwards}
.avatar-choice:nth-child(even){transform:rotate(1.5deg);animation-name:cs-entra-dx}
.avatar-choice:nth-child(2){animation-delay:60ms}.avatar-choice:nth-child(3){animation-delay:120ms}.avatar-choice:nth-child(4){animation-delay:180ms}.avatar-choice:nth-child(5){animation-delay:240ms}.avatar-choice:nth-child(6){animation-delay:300ms}.avatar-choice:nth-child(7){animation-delay:360ms}
.avatar-choice img{position:relative;z-index:1;display:block;width:100%;height:clamp(86px,18vh,180px);object-fit:contain;border-radius:10px;background:#e9d7b4}
.avatar-choice::before{content:"";position:absolute;inset:-3px;border-radius:19px;padding:3px;background:conic-gradient(from var(--cs-a,0deg),#f1c24a,#66d6ff,#fff,#f1c24a);opacity:0;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.avatar-choice::after{content:"";position:absolute;z-index:2;top:50%;left:-12px;width:0;height:0;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:13px solid #f1c24a;opacity:0;transform:translateY(-50%);pointer-events:none}
.avatar-choice:hover,.avatar-choice:focus-visible{transform:rotate(0) scale(1.05);z-index:2;transition:transform .16s ease-out}
.avatar-choice:hover::before,.avatar-choice:focus-visible::before{opacity:1;animation:cs-cursore 2s linear infinite}
.avatar-choice:hover::after,.avatar-choice:focus-visible::after{opacity:1}
.avatar-choice[aria-pressed="true"]{border-color:#f1ead9;background:rgba(241,234,217,.18)}
.avatar-choice.is-bloccata{border-color:#f1c24a;box-shadow:0 0 0 2px #f1c24a,0 0 22px rgba(241,194,74,.5)}
.avatar-choice.is-bloccata::after{content:"★";top:4px;left:auto;right:9px;width:auto;height:auto;border:0;color:#f1c24a;font-size:22px;line-height:1;opacity:1;transform:none;text-shadow:0 1px 4px #000}
.avatar-choice.is-in-scena{opacity:.2}
.avatar-choice:active{transform:scale(.985)}
.field{display:grid;gap:6px;margin-top:14px}
.field label{font-size:14px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#f5f5f0}
.field input{width:100%;min-height:52px;padding:0 14px;border:1px solid #f1ead9;border-radius:14px;background:rgba(12,12,12,.7);color:#f1ead9;font:600 22px 'Barlow Condensed',sans-serif}
.errore{min-height:22px;margin:8px 0 5px;font-size:19px;font-weight:500;line-height:1.2;color:#f1ead9}
.chi-sei>a.torna{position:absolute;top:calc(env(safe-area-inset-top) + 24px);left:max(16px,env(safe-area-inset-left));z-index:3}
.cs-lampo{position:fixed;inset:0;z-index:20;background:#fff;opacity:0;pointer-events:none}
.cs-effetti{position:fixed;inset:0;z-index:21;overflow:clip;pointer-events:none;opacity:0}
.cs-velocita{position:absolute;left:50%;top:47%;width:64vmax;height:64vmax;margin:-32vmax 0 0 -32vmax;background:center/100% 100% no-repeat;will-change:transform}

.cs-stella{position:absolute;left:50%;top:47%;width:22px;height:22px;background:var(--stella) center/contain no-repeat;opacity:0;will-change:transform,opacity}

.cs-palco{position:fixed;z-index:22;box-sizing:border-box;padding:calc(6px*var(--s));border:calc(3px*var(--s)) solid #f1c24a;border-radius:calc(16px*var(--s));background:#11172b;transform-origin:center;pointer-events:auto;cursor:pointer;touch-action:manipulation;will-change:transform}
.cs-bagliore{position:absolute;inset:-22%;z-index:-1;background:radial-gradient(circle,rgba(241,194,74,.75) 0,rgba(241,194,74,.35) 38%,rgba(241,194,74,0) 68%);pointer-events:none}
.cs-ritratto{position:absolute;inset:calc(6px*var(--s));overflow:hidden;border-radius:calc(10px*var(--s));background:#e9d7b4}
.cs-ritratto img,.cs-ritratto video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.cs-ritratto video{opacity:0}.cs-ritratto video.is-playing{opacity:1}
.cs-nome{position:absolute;z-index:2;left:-14%;right:-14%;bottom:-.16em;color:#fff;font:400 calc(clamp(36px,8vw,82px)*var(--s))/.9 Anton,sans-serif;letter-spacing:.04em;text-align:center;text-shadow:calc(4px*var(--s)) calc(5px*var(--s)) 0 #111;white-space:nowrap;pointer-events:none;will-change:transform}
@keyframes cs-entra-sx{from{opacity:0;transform:translateX(-110px) rotate(-7deg)}to{opacity:1;transform:translateX(0) rotate(-1.5deg)}}
@keyframes cs-entra-dx{from{opacity:0;transform:translateX(110px) rotate(7deg)}to{opacity:1;transform:translateX(0) rotate(1.5deg)}}
@keyframes cs-titolo{0%{opacity:0;transform:scale(1.6) translateX(-8px)}65%{opacity:1;transform:scale(.94) translateX(4px)}85%{transform:scale(1.02) translateX(-2px)}100%{transform:scale(1) translateX(0)}}
@property --cs-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes cs-cursore{to{--cs-a:360deg}}
@media(min-width:900px){.avatar-choices{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.avatar-choice img{height:clamp(150px,22vh,190px)}}
@media(prefers-reduced-motion:reduce){.chi-sei h1,.avatar-choice{animation:none}.avatar-choice:hover,.avatar-choice:focus-visible,.avatar-choice:active{transform:none}.avatar-choice:hover::before,.avatar-choice:focus-visible::before{animation:none}}
.cs-premio{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:#0a0e20;touch-action:manipulation;overflow:clip}
/* Sotto la scena premio il resto della pagina non serve: si nasconde per non farlo ricomporre a ogni frame. */
body.cs-premio-aperto>:not(.cs-premio){visibility:hidden}
.cs-colonna{position:relative;display:grid;justify-items:center;gap:28px;width:min(86vw,420px)}
.cs-contatore{position:absolute;top:calc(env(safe-area-inset-top) + 92px);left:0;right:0;display:flex;width:max-content;margin:0 auto;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 10px;border:3px solid #111;border-radius:24px;background:#f1c24a;color:#111;box-shadow:3px 4px 0 #111}
.cs-chip-icona{width:30px;height:30px;background:center/contain no-repeat}.cs-contatore b{display:inline-block;min-width:4ch;font:700 28px 'Barlow Condensed',sans-serif;text-align:right}.cs-contatore{will-change:transform}
.cs-scrigno{position:relative;z-index:1;width:min(62vw,260px);aspect-ratio:100/122;will-change:transform,opacity}
.cs-bagliore-premio{position:absolute;left:50%;top:50%;width:150vmin;height:150vmin;margin:-75vmin 0 0 -75vmin;background:radial-gradient(circle,rgba(241,194,74,.55) 0,rgba(241,194,74,.22) 30%,rgba(241,194,74,0) 62%);opacity:0;pointer-events:none;will-change:opacity}
.cs-scrigno>svg{display:block;width:100%;overflow:visible}
.cs-xp{position:relative;z-index:2;margin-top:24px;width:100%;height:28px;border:3px solid #111;border-radius:14px;background:#f1ead9;overflow:hidden;box-shadow:3px 4px 0 #111}
.cs-xp i{position:absolute;inset:0;transform-origin:left;will-change:transform;background:linear-gradient(90deg,#66d6ff,#f1c24a)}
.cs-xp b{position:absolute;inset:0;display:grid;place-items:center;color:#111;font:700 19px 'Barlow Condensed',sans-serif}