:root{
  --bg:#070310; --bg2:#100a1e; --card:#170e2bcc; --card2:#1f1240cc;
  --red:#ff2e54; --red-dim:#ff2e5426; --violet:#8b5cf6; --cyan:#22d3ee; --gold:#ffc83d;
  --txt:#f3eefc; --muted:#9d8fbd; --line:#3a2a66; --ok:#2dd4a7;
  --radius:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--txt);min-height:100vh;padding-bottom:84px;overflow-x:hidden}
button{font-family:inherit;cursor:pointer;border:none}
input,textarea,select{font-family:inherit;background:#0d0719;border:1px solid var(--line);color:var(--txt);border-radius:10px;padding:10px 12px;font-size:.9rem;width:100%}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--violet);box-shadow:0 0 14px #8b5cf633}
label{font-size:.72rem;color:var(--muted);font-weight:700;letter-spacing:1px;display:block;margin:12px 0 5px;text-transform:uppercase}

/* ====== sfondo futuristico ====== */
#fx{position:fixed;inset:0;z-index:0;pointer-events:none}
.aurora{position:fixed;inset:-20%;z-index:0;pointer-events:none;filter:blur(90px);opacity:.55}
.aurora i{position:absolute;border-radius:50%;mix-blend-mode:screen}
.aurora i:nth-child(1){width:55vw;height:55vw;background:#5b21b6;top:-10%;left:55%;animation:drift1 26s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:45vw;height:45vw;background:#9f1239;top:45%;left:-15%;animation:drift2 32s ease-in-out infinite alternate}
.aurora i:nth-child(3){width:35vw;height:35vw;background:#155e75;top:65%;left:60%;animation:drift3 38s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(-18vw,22vh) scale(1.25)}}
@keyframes drift2{to{transform:translate(20vw,-14vh) scale(1.15)}}
@keyframes drift3{to{transform:translate(-12vw,-18vh) scale(1.3)}}
.gridfloor{position:fixed;left:0;right:0;bottom:0;height:34vh;z-index:0;pointer-events:none;opacity:.22;
  background:linear-gradient(transparent, #8b5cf61f 60%),
  repeating-linear-gradient(90deg,#8b5cf64d 0 1px,transparent 1px 64px),
  repeating-linear-gradient(0deg,#8b5cf64d 0 1px,transparent 1px 38px);
  transform:perspective(420px) rotateX(58deg) scale(1.6);transform-origin:bottom;
  mask-image:linear-gradient(transparent,black 45%);-webkit-mask-image:linear-gradient(transparent,black 45%)}
header,nav,main,footer{position:relative;z-index:2}

/* ====== header ====== */
header{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:#07031099;backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand-mark{width:36px;height:36px;border-radius:50%;margin-right:10px;border:1px solid var(--line);box-shadow:0 0 14px #8b5cf64d;flex-shrink:0}
.logo{font-weight:900;font-size:1.25rem;letter-spacing:2px;position:relative}
.logo span{color:var(--red)}
.logo small{display:block;font-size:.6rem;font-weight:600;color:var(--muted);letter-spacing:3px}
.logo .glitch{position:relative;display:inline-block;animation:logoglow 3s ease-in-out infinite}
@keyframes logoglow{0%,100%{text-shadow:0 0 12px #ff2e5400}50%{text-shadow:0 0 18px #ff2e54aa, 0 0 42px #8b5cf655}}
.logo .glitch::before,.logo .glitch::after{content:attr(data-t);position:absolute;left:0;top:0;width:100%;overflow:hidden;opacity:0}
.logo .glitch::before{color:var(--cyan);animation:gl1 5s steps(1) infinite}
.logo .glitch::after{color:var(--red);animation:gl2 5s steps(1) infinite}
@keyframes gl1{0%,93%,100%{opacity:0;transform:none}94%{opacity:.8;transform:translate(-2px,-1px);clip-path:inset(0 0 55% 0)}96%{opacity:.8;transform:translate(2px,1px);clip-path:inset(60% 0 0 0)}98%{opacity:0}}
@keyframes gl2{0%,93%,100%{opacity:0;transform:none}95%{opacity:.8;transform:translate(2px,1px);clip-path:inset(40% 0 30% 0)}97%{opacity:.8;transform:translate(-2px,0);clip-path:inset(0 0 70% 0)}99%{opacity:0}}
.live-dot{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;color:var(--red);background:var(--red-dim);padding:4px 10px;border-radius:99px;margin-left:10px;border:1px solid #ff2e5440}
.live-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);animation:pulse 1.2s infinite;box-shadow:0 0 10px var(--red)}
@keyframes pulse{50%{opacity:.3}}
.role-pill{font-size:.6rem;font-weight:800;letter-spacing:1px;padding:3px 9px;border-radius:99px;margin-left:8px;vertical-align:middle}
.role-user{background:#3a2a66;color:#cdbcf5}
.role-rz{background:linear-gradient(135deg,var(--red),var(--violet));color:#fff;box-shadow:0 0 12px #ff2e5455}
.role-admin{background:linear-gradient(135deg,var(--gold),#ff8a3c);color:#241500;box-shadow:0 0 12px #ffc83d55}
.role-vip{background:linear-gradient(135deg,var(--cyan),var(--violet));color:#fff;box-shadow:0 0 12px #22d3ee55}
.role-staff{background:linear-gradient(135deg,var(--ok),#0e9f6e);color:#04140e;box-shadow:0 0 12px #2dd4a755}
.role-campione{background:linear-gradient(135deg,#ffe27a,var(--gold),#ff8a3c);color:#241500;box-shadow:0 0 16px #ffc83d88;animation:logoglow 3s infinite}
.role-artista{background:linear-gradient(135deg,#f472b6,var(--red));color:#fff;box-shadow:0 0 12px #f472b655}
.role-giudice{background:linear-gradient(135deg,#60a5fa,#2563eb);color:#fff;box-shadow:0 0 12px #60a5fa55}
.role-mod{background:linear-gradient(135deg,#a3e635,#65a30d);color:#0f1c03;box-shadow:0 0 12px #a3e63555}
.mode-pill{font-size:.58rem;font-weight:800;letter-spacing:1px;padding:3px 8px;border-radius:99px;background:#22134a;color:var(--cyan);border:1px solid #22d3ee44}
.lang-switch{display:inline-flex;gap:2px;background:#ffffff0a;border:1px solid var(--line);border-radius:99px;padding:2px}
.lang-switch button{background:none;font-size:.95rem;padding:3px 7px;border-radius:99px;opacity:.45;transition:.2s}
.lang-switch button.on{opacity:1;background:#8b5cf633;box-shadow:0 0 10px #8b5cf640}
.lang-switch button:hover{opacity:1}

/* ====== bottoni ====== */
.btn{border-radius:14px;font-weight:700;transition:.18s;display:inline-flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(135deg,var(--red),#ff5c3c);color:#fff;padding:13px 24px;box-shadow:0 6px 28px #ff2e5450;animation:btnpulse 2.6s ease-in-out infinite}
@keyframes btnpulse{0%,100%{box-shadow:0 6px 24px #ff2e5440}50%{box-shadow:0 6px 38px #ff2e5480}}
.btn-primary::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,#ffffff55,transparent);transform:skewX(-20deg);animation:sheen 3.4s ease-in-out infinite}
@keyframes sheen{0%,55%{left:-80%}85%,100%{left:130%}}
.btn-primary:hover{filter:brightness(1.12)}
.btn-ghost{background:#ffffff08;color:var(--txt);border:1px solid var(--line);padding:11px 20px;backdrop-filter:blur(6px)}
.btn-ghost:hover{border-color:var(--cyan);box-shadow:0 0 18px #22d3ee33;color:#fff}
.btn-small{padding:8px 14px;font-size:.85rem}
.btn-gold{background:linear-gradient(135deg,var(--gold),#ff8a3c);color:#241500;padding:12px 22px}

/* ====== nav ====== */
nav{position:fixed;bottom:0;left:0;right:0;z-index:50;display:flex;background:#0d0719e6;backdrop-filter:blur(16px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
nav button{flex:1;background:none;color:var(--muted);font-size:.65rem;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;border-radius:12px;position:relative;transition:.2s}
nav button .ico{font-size:1.25rem;line-height:1;transition:.25s}
nav button.active{color:#fff}
nav button.active .ico{transform:translateY(-3px) scale(1.15);filter:drop-shadow(0 0 8px var(--red))}
nav button.active::after{content:"";position:absolute;bottom:2px;width:18px;height:3px;border-radius:99px;background:linear-gradient(90deg,var(--red),var(--violet));box-shadow:0 0 10px var(--red)}

/* ====== layout ====== */
main{max-width:980px;margin:0 auto;padding:24px 18px}
.page{display:none}
.page.visible{display:block;animation:warp .6s cubic-bezier(.3,1.25,.45,1)}
@keyframes warp{0%{opacity:0;transform:translateY(30px) scale(.98);filter:blur(7px)}55%{filter:none}100%{opacity:1;transform:none;filter:none}}
h1{font-size:clamp(1.8rem,5vw,2.9rem);font-weight:900;line-height:1.12}
h1 em{font-style:normal;background:linear-gradient(90deg,var(--red),var(--violet),var(--cyan),var(--red));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradslide 6s linear infinite}
@keyframes gradslide{to{background-position:300% 0}}
h2{font-size:1.3rem;margin-bottom:14px}
.sub{color:var(--muted);margin:12px 0 22px;max-width:34rem}
.card{background:linear-gradient(160deg,var(--card),var(--card2));border:1px solid var(--line);border-radius:var(--radius);padding:20px;position:relative;backdrop-filter:blur(10px);transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;transform-style:preserve-3d;will-change:transform}
.card::before{content:"";position:absolute;inset:0;border-radius:var(--radius);padding:1px;background:linear-gradient(130deg,#ff2e5466,#8b5cf61a 30%,transparent 50%,#22d3ee33 80%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.7}
.card:hover{border-color:#5b3f9e;box-shadow:0 14px 44px #00000066, 0 0 30px #8b5cf622}
.reveal{opacity:0;transform:translateY(26px)}
.reveal.in{opacity:1;transform:none;transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1)}
.grid{display:grid;gap:14px}
@media(min-width:680px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:repeat(3,1fr)}
  nav{position:sticky;top:61px;bottom:auto;max-width:980px;margin:0 auto;border-radius:0 0 18px 18px;border:1px solid var(--line);border-top:none}
  nav button{flex-direction:row;font-size:.85rem;gap:7px;padding:10px}
  nav button.active::after{bottom:4px}
  body{padding-bottom:30px}}

/* ====== home ====== */
.hero{padding:38px 0 10px;position:relative}
.countdown{display:flex;gap:10px;margin:22px 0}
.cd{background:#170e2bb0;border:1px solid var(--line);border-radius:14px;padding:12px 0;text-align:center;flex:1;max-width:92px;position:relative;overflow:hidden;backdrop-filter:blur(8px)}
.cd::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);animation:scanline 3s linear infinite;opacity:.8}
@keyframes scanline{0%{top:0;opacity:0}15%{opacity:.9}85%{opacity:.9}100%{top:100%;opacity:0}}
.cd b{font-size:1.55rem;display:block;font-variant-numeric:tabular-nums;text-shadow:0 0 14px #8b5cf680}
.cd b.tick{animation:flip .4s ease}
@keyframes flip{0%{transform:rotateX(70deg);opacity:0}100%{transform:none;opacity:1}}
.cd span{font-size:.62rem;color:var(--muted);letter-spacing:1px}
.stat{text-align:center}
.stat b{font-size:1.7rem;display:block;background:linear-gradient(90deg,var(--violet),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.stat span{font-size:.75rem;color:var(--muted)}

/* ====== artisti ====== */
.artist{display:flex;gap:14px;align-items:center}
.avatar{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;flex-shrink:0;background:linear-gradient(135deg,var(--violet),var(--red));position:relative;overflow:visible}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.avatar::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid transparent;border-top-color:var(--cyan);border-bottom-color:var(--red);animation:orbit 4s linear infinite;opacity:.85}
@keyframes orbit{to{transform:rotate(360deg)}}
.artist h3{font-size:1.05rem}
.artist p{font-size:.82rem;color:var(--muted)}
.tag{font-size:.65rem;font-weight:700;background:var(--red-dim);color:var(--red);padding:3px 9px;border-radius:99px;margin-left:auto;white-space:nowrap;border:1px solid #ff2e5435}

/* ====== voto / palco ====== */
.stage{text-align:center;padding:34px 20px 26px;overflow:hidden}
.stage::after{content:"";position:absolute;left:50%;top:-30%;width:140%;height:90%;transform:translateX(-50%);background:radial-gradient(ellipse at top,#ff2e5418,transparent 65%);pointer-events:none;animation:spot 5s ease-in-out infinite alternate}
@keyframes spot{to{opacity:.45;transform:translateX(-50%) scale(1.08)}}
.stage .avatar{width:92px;height:92px;font-size:2.5rem;margin:0 auto 12px}
.stage .avatar::before{content:"";position:absolute;inset:-14px;border-radius:50%;background:conic-gradient(from 0deg,var(--red),var(--violet),var(--cyan),var(--red));filter:blur(14px);opacity:.5;z-index:-1;animation:orbit 6s linear infinite}
.eq{display:flex;align-items:flex-end;justify-content:center;gap:4px;height:42px;margin:16px auto 4px;width:200px}
.eq i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--cyan),var(--violet) 60%,var(--red));animation:eqb 1s ease-in-out infinite alternate;box-shadow:0 0 8px #8b5cf655}
@keyframes eqb{from{height:12%}to{height:100%}}
.stars{display:flex;justify-content:center;gap:8px;margin:14px 0 18px}
.stars button{background:none;font-size:2.3rem;color:#3d2a63;transition:.15s;position:relative}
.stars button.on{color:var(--gold);text-shadow:0 0 22px #ffc83d99;transform:scale(1.15)}
.stars button:hover{transform:scale(1.2) rotate(8deg)}
.bar-row{display:flex;align-items:center;gap:10px;margin:10px 0;font-size:.85rem}
.bar-row .nm{width:92px;text-align:right;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar{flex:1;height:15px;background:#22134a;border-radius:99px;overflow:hidden;position:relative}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--violet),var(--red));transition:width 1s cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden}
.bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#ffffff40 50%,transparent 70%);transform:translateX(-100%);animation:barshine 2.8s ease-in-out infinite}
@keyframes barshine{60%,100%{transform:translateX(100%)}}
.bar-row b{width:42px;font-size:.8rem;font-variant-numeric:tabular-nums}
.split{display:flex;gap:8px;justify-content:center;font-size:.7rem;color:var(--muted);margin-top:6px;flex-wrap:wrap}
.split b{color:var(--txt)}
.x10{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#ff2e5422,#8b5cf622);border:1px solid #ff2e5466;color:var(--gold);font-weight:800;font-size:.78rem;padding:6px 14px;border-radius:99px;margin-top:10px;animation:btnpulse 2.2s infinite}

/* ====== red zone ====== */
.rz-hero{border:1px solid #ff2e5455;background:linear-gradient(160deg,#2a0d1dd9,#1c1230d9);position:relative;overflow:hidden}
.rz-hero::after{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at 80% 20%,#ff2e5426,transparent 60%);animation:spot 4s ease-in-out infinite alternate}
.price{font-size:2.7rem;font-weight:900;text-shadow:0 0 28px #ff2e5466}
.price small{font-size:1rem;color:var(--muted);font-weight:600;text-shadow:none}
.benefit{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px dashed var(--line)}
.benefit:last-child{border:none}
.benefit .ico{font-size:1.3rem;animation:float 3.4s ease-in-out infinite}
.benefit:nth-child(2) .ico{animation-delay:.4s}.benefit:nth-child(3) .ico{animation-delay:.8s}.benefit:nth-child(4) .ico{animation-delay:1.2s}
@keyframes float{50%{transform:translateY(-4px)}}
.benefit b{display:block;font-size:.95rem}
.benefit span{font-size:.8rem;color:var(--muted)}
.badge-rz{font-size:.6rem;background:linear-gradient(135deg,var(--red),var(--violet));padding:3px 10px;border-radius:99px;font-weight:800;letter-spacing:1px;box-shadow:0 0 16px #ff2e5455}

/* live player */
.player{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;background:#0a0514;border:1px solid #ff2e5455}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player .scene{position:absolute;inset:0;background:
  radial-gradient(ellipse 60% 50% at 50% 88%, #ff2e5430, transparent 60%),
  radial-gradient(ellipse 40% 35% at 30% 80%, #8b5cf628, transparent 65%),
  radial-gradient(ellipse 40% 35% at 70% 80%, #22d3ee22, transparent 65%),
  linear-gradient(#0a0514,#140a24)}
.player .beam{position:absolute;top:-10%;width:18%;height:85%;background:linear-gradient(180deg,#ff2e5440,transparent);clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);transform-origin:top center;mix-blend-mode:screen}
.player .beam.b1{left:18%;animation:sway 4.2s ease-in-out infinite alternate}
.player .beam.b2{left:62%;background:linear-gradient(180deg,#8b5cf640,transparent);animation:sway 5.1s ease-in-out infinite alternate-reverse}
@keyframes sway{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
.player .perf{position:absolute;bottom:8%;left:50%;transform:translateX(-50%);font-size:clamp(2.2rem,7vw,3.6rem);filter:drop-shadow(0 0 18px #ff2e5488);animation:float 2.6s ease-in-out infinite}
.player .pl-top{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;align-items:center;z-index:2}
.player .viewers{font-size:.7rem;background:#000a;padding:4px 10px;border-radius:99px;backdrop-filter:blur(4px)}
.player .scanfx{position:absolute;inset:0;background:repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 3px);pointer-events:none;mix-blend-mode:overlay}

/* chat backstage */
.chat{display:flex;flex-direction:column;height:280px}
.chat-feed{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:9px;padding-right:4px;scrollbar-width:thin}
.msg{display:flex;gap:9px;align-items:flex-start;animation:msgin .35s cubic-bezier(.2,.9,.3,1.1)}
@keyframes msgin{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
.msg .mavatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--red));display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;overflow:hidden}
.msg .bubble{background:#22134a;border:1px solid var(--line);border-radius:4px 14px 14px 14px;padding:7px 12px;font-size:.83rem;max-width:85%;word-break:break-word}
.msg .bubble b{display:block;font-size:.68rem;color:var(--cyan);margin-bottom:2px}
.msg.me .bubble{background:#3d1430;border-color:#ff2e5455}
.msg.me .bubble b{color:var(--red)}
.chat-input{display:flex;gap:8px;margin-top:10px}
.chat-input input{flex:1}

/* ====== admin ====== */
.admin-artist{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:14px;margin-bottom:10px;background:#170e2b80}
.admin-artist .info{flex:1;min-width:0}
.admin-artist h4{font-size:.95rem}
.admin-artist p{font-size:.75rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-btn{background:#ffffff0d;border:1px solid var(--line);color:var(--txt);width:36px;height:36px;border-radius:10px;font-size:1rem;flex-shrink:0;transition:.15s}
.icon-btn:hover{border-color:var(--cyan)}
.icon-btn.danger:hover{border-color:var(--red);color:var(--red)}
.range-row{display:flex;align-items:center;gap:12px}
.range-row input[type=range]{flex:1;accent-color:var(--red);padding:0}
.range-row b{width:60px;text-align:right;font-variant-numeric:tabular-nums}
.photo-pick{width:74px;height:74px;border-radius:50%;border:2px dashed var(--line);display:flex;align-items:center;justify-content:center;font-size:1.8rem;cursor:pointer;overflow:hidden;background:#0d0719;flex-shrink:0}
.photo-pick img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.photo-pick:hover{border-color:var(--violet)}

/* ====== modal & toast ====== */
.overlay{position:fixed;inset:0;background:#000c;backdrop-filter:blur(6px);z-index:90;display:none;align-items:flex-end;justify-content:center}
.overlay.open{display:flex}
.modal{background:#100a1ed9;backdrop-filter:blur(28px) saturate(1.5);-webkit-backdrop-filter:blur(28px) saturate(1.5);
  border:1px solid #ffffff1f;border-radius:24px 24px 0 0;padding:26px 22px 34px;width:100%;max-width:460px;
  animation:up .55s cubic-bezier(.34,1.45,.5,1);position:relative;overflow:hidden;max-height:88vh;overflow-y:auto;
  box-shadow:0 -10px 60px #00000088, inset 0 1px 0 #ffffff14}
.modal::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--red),var(--violet),var(--cyan));animation:gradslide 4s linear infinite;background-size:300% 100%}
@media(min-width:680px){.overlay{align-items:center}.modal{border-radius:24px}}
@keyframes up{0%{transform:translateY(90px) scale(.96);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
.modal h3{margin-bottom:6px}
.modal p{font-size:.85rem;color:var(--muted);margin-bottom:18px}
.login-btn{width:100%;padding:13px;border-radius:13px;font-weight:700;font-size:.95rem;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:10px;transition:.2s}
.login-btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.lg-google{background:#fff;color:#1a1a1a}
.lg-telegram{background:#2aabee;color:#fff;box-shadow:0 4px 20px #2aabee44}
.staff-link{display:block;text-align:center;margin-top:16px;font-size:.75rem;color:var(--muted);background:none;width:100%}
.staff-link:hover{color:var(--gold)}
.tg-widget{display:flex;justify-content:center;margin-top:10px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:100px;background:#1f1240f2;border:1px solid var(--violet);padding:12px 20px;border-radius:13px;font-size:.85rem;z-index:99;opacity:0;transition:.3s;pointer-events:none;max-width:90vw;text-align:center;box-shadow:0 0 30px #8b5cf640;backdrop-filter:blur(8px)}
.toast.show{opacity:1;bottom:110px}
footer{text-align:center;color:var(--muted);font-size:.7rem;padding:26px 16px 10px}
.confetto{position:fixed;top:-12px;z-index:95;pointer-events:none;border-radius:2px;animation:fall linear forwards}

/* dediche cometa — volano DIETRO ai contenuti (z-index 1, main è 2) */
#comets{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.comet{position:absolute;left:100%;display:flex;align-items:center;gap:9px;white-space:nowrap;
  will-change:transform;animation:cometfly linear forwards;opacity:.85}
@keyframes cometfly{
  0%{transform:translateX(0) translateY(0);opacity:0}
  6%{opacity:.85}
  90%{opacity:.85}
  100%{transform:translateX(calc(-100vw - 130%)) translateY(var(--drift,40px));opacity:0}
}
.comet .c-trail{position:absolute;left:96%;top:50%;width:38vw;height:2px;transform:translateY(-50%);
  background:linear-gradient(90deg,var(--violet),transparent);filter:blur(1px);opacity:.7}
.comet .c-trail::after{content:"";position:absolute;inset:-4px 0;background:linear-gradient(90deg,#8b5cf655,transparent);filter:blur(6px)}
.comet .c-head{display:flex;align-items:center;gap:8px;background:#1c1230b0;border:1px solid #8b5cf655;
  border-radius:99px;padding:7px 16px;backdrop-filter:blur(4px);
  box-shadow:0 0 22px #8b5cf640, 0 0 60px #8b5cf61f}
.comet .c-name{color:var(--cyan);font-weight:800;font-size:.8rem}
.comet .c-text{font-size:.92rem;font-weight:600;color:#efe8ffcc;max-width:52vw;overflow:hidden;text-overflow:ellipsis}
.comet .role-pill{margin-left:0}
@media(max-width:680px){.comet .c-text{max-width:60vw;font-size:.85rem}}

/* comete decorative: avatar VRChat che cantano sulla cometa */
.comet.deco{transform:scale(var(--scale,1));opacity:.95}
.deco-ball{position:relative;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 35%, #fff7d6, var(--gold) 45%, #ff8a3c 75%, #ff2e5400);
  box-shadow:0 0 18px #ffc83daa, 0 0 50px #ff8a3c66, 0 0 90px #ff2e5433;
  animation:cometspin 1.6s ease-in-out infinite alternate}
@keyframes cometspin{from{transform:rotate(-6deg)}to{transform:rotate(8deg)}}
.deco-rider{font-size:1.7rem;filter:drop-shadow(0 2px 4px #00000088)}
.deco-trail{width:46vw;height:3px;background:linear-gradient(90deg,var(--gold),#ff8a3c88,transparent);opacity:.85}
.deco-trail::after{background:linear-gradient(90deg,#ffc83d66,transparent);inset:-6px 0}
.deco-note{position:absolute;font-size:.95rem;color:var(--gold);text-shadow:0 0 8px #ffc83d;opacity:0;animation:notefloat 2.2s ease-out infinite}
.deco-note.n1{top:-12px;left:6px;animation-delay:0s}
.deco-note.n2{top:-8px;right:2px;animation-delay:.7s;font-size:1.15rem;color:var(--cyan);text-shadow:0 0 8px #22d3ee}
.deco-note.n3{bottom:-4px;right:-10px;animation-delay:1.4s}
@keyframes notefloat{0%{opacity:0;transform:translate(0,0) scale(.7)}25%{opacity:1}100%{opacity:0;transform:translate(14px,-26px) scale(1.25) rotate(14deg)}}

/* riga utente nel pannello admin */
.user-row{display:flex;gap:10px;align-items:center;padding:9px 10px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:#170e2b80}
.user-row .uavatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--red));display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;overflow:hidden}
.user-row .uavatar img{width:100%;height:100%;object-fit:cover}
.user-row .uname{flex:1;min-width:0;font-size:.88rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-row select{width:auto;padding:6px 10px;font-size:.8rem}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:.2}}
.winner{display:flex;align-items:center;gap:14px}
.medal{font-size:1.8rem;animation:float 3s ease-in-out infinite;filter:drop-shadow(0 0 10px #ffc83d66)}
/* ====== icone nav animate ====== */
nav button .ico{position:relative;width:30px;height:30px;display:flex;align-items:center;justify-content:center}
nav button .ico i{font-style:normal;position:absolute;transition:.35s cubic-bezier(.3,1.4,.5,1)}
/* HOME: la porta si apre sul salotto */
.ico-home .door{opacity:1;transform:none}
.ico-home .room,.ico-home .room2{opacity:0;transform:scale(.4)}
button.active .ico-home .door{opacity:0;transform:perspective(80px) rotateY(-85deg) translateX(-8px)}
button.active .ico-home .room{opacity:1;transform:scale(1) translateX(-5px)}
button.active .ico-home .room2{opacity:1;transform:scale(.78) translate(9px,-7px)}
/* ARTISTI: il microfono diventa un cantante */
.ico-artist .singer,.ico-artist .note{opacity:0;transform:scale(.3)}
button.active .ico-artist .mic{opacity:0;transform:scale(.3) rotate(-30deg)}
button.active .ico-artist .singer{opacity:1;transform:scale(1.1);animation:singbounce 1s ease-in-out infinite}
button.active .ico-artist .note{opacity:1;animation:singnote 1.4s ease-out infinite}
@keyframes singbounce{0%,100%{transform:scale(1.05) rotate(-4deg)}50%{transform:scale(1.15) rotate(5deg)}}
@keyframes singnote{0%{opacity:0;transform:translate(4px,2px) scale(.5)}30%{opacity:1}100%{opacity:0;transform:translate(15px,-15px) scale(1.2) rotate(20deg)}}
.ico-artist .note{color:var(--cyan);font-size:.8rem;right:-4px;top:0;text-shadow:0 0 6px #22d3ee}
/* VOTA: la stella pulsa e scintilla */
.ico-vote .spark{opacity:0;font-size:.7rem;top:-3px;right:-5px}
button.active .ico-vote .star{animation:starbeat .9s ease-in-out infinite;filter:drop-shadow(0 0 10px var(--gold))}
button.active .ico-vote .spark{opacity:1;animation:singnote 1.1s ease-out infinite}
@keyframes starbeat{0%,100%{transform:scale(1) rotate(-8deg)}50%{transform:scale(1.3) rotate(10deg)}}
/* RED ZONE: fiamma viva */
button.active .ico-fire .flame{animation:flamewob .5s ease-in-out infinite alternate;filter:drop-shadow(0 0 9px var(--red))}
@keyframes flamewob{from{transform:scale(1) rotate(-5deg)}to{transform:scale(1.22) rotate(6deg)}}
/* HALL OF FAME: trofeo che brilla */
.ico-fame .shine{opacity:0;font-size:.65rem;top:-2px;left:-4px}
button.active .ico-fame .cup{animation:cupshine 1.6s ease-in-out infinite}
button.active .ico-fame .shine{opacity:1;animation:singnote 1.6s ease-out infinite}
@keyframes cupshine{0%,100%{transform:scale(1);filter:drop-shadow(0 0 4px #ffc83d66)}50%{transform:scale(1.12);filter:drop-shadow(0 0 14px var(--gold))}}

/* ====== starburst: transizione galattica verso il voto ====== */
#starburst{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;pointer-events:none;
  background:radial-gradient(circle at 50% 50%, #ffc83d22, #07031000 60%)}
#starburst.go{display:flex;animation:burstbg .8s ease-out forwards}
#starburst span{font-size:3rem;animation:burststar .8s cubic-bezier(.5,0,.6,1) forwards;filter:drop-shadow(0 0 30px var(--gold))}
@keyframes burststar{0%{transform:scale(.4) rotate(0)}55%{transform:scale(16) rotate(160deg);opacity:1}100%{transform:scale(34) rotate(220deg);opacity:0}}
@keyframes burstbg{0%{opacity:0}30%{opacity:1}100%{opacity:0}}

/* la pagina voto respira come una galassia */
#page-vote .stage{background:linear-gradient(160deg,#170e2be6,#1a0f38e6)}
#page-vote .stage::before{content:"";position:absolute;inset:0;border-radius:var(--radius);
  background:radial-gradient(ellipse 60% 40% at 20% 20%, #22d3ee14, transparent 60%),
             radial-gradient(ellipse 50% 40% at 85% 70%, #ff2e5414, transparent 60%);pointer-events:none}
.votefly .deco-ball{width:40px;height:40px;background:radial-gradient(circle at 35% 35%, #fff, var(--gold) 50%, #ff8a3c00 80%);box-shadow:0 0 16px var(--gold)}
.votefly .deco-rider{font-size:1rem;font-weight:900;color:#241500}
.votefly .deco-trail{width:30vw;height:2px}

/* ====== suspense: classifica segreta ====== */
.suspense-row .nm{filter:blur(4px);user-select:none}
.suspense-row .bar i{background:linear-gradient(90deg,#3a2a66,#5b3f9e);animation:suspbar 3.2s ease-in-out infinite alternate}
.suspense-row .bar i::after{animation-duration:1.6s}
.suspense-row b{color:var(--muted)}
@keyframes suspbar{from{width:var(--w1)}to{width:var(--w2)}}
.suspense-note{display:flex;align-items:center;gap:10px;background:#22134a80;border:1px dashed var(--violet);
  border-radius:14px;padding:12px 16px;margin-top:12px;font-size:.85rem}
.suspense-note .lock{font-size:1.4rem;animation:float 2.6s ease-in-out infinite}

/* ====== profilo artista ====== */
.artist{cursor:pointer}
.artist-profile .ap-hero{text-align:center;padding-top:6px}
.ap-avatar{width:96px;height:96px;font-size:2.6rem;margin:0 auto}
.ap-avatar::before{content:"";position:absolute;inset:-14px;border-radius:50%;
  background:conic-gradient(from 0deg,var(--red),var(--violet),var(--cyan),var(--red));filter:blur(14px);opacity:.5;z-index:-1;animation:orbit 6s linear infinite}
.ap-section{border-top:1px dashed var(--line);padding:4px 0 10px;margin-top:10px}
.ap-section p{font-size:.9rem;line-height:1.5;color:#e8e0f8}
.ap-song{font-size:1.05rem !important;font-weight:700;
  background:linear-gradient(90deg,var(--gold),#ff8a3c);-webkit-background-clip:text;background-clip:text;color:transparent !important}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}
}