/* RadioZero90 - web app di Radio Zero NoVanta */
:root{
  --blu:#0A1124; --card:#111A30; --bordo:#22304F; --bordo2:#2A3550;
  --verde:#5CFF2E; --neon:#39FF14; --giallo:#EEFF3A; --rosso:#FF3B4E;
  --testo:#F2F4FA; --grigio:#8B95AD; --grigio2:#B8C2D6;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--blu);color:var(--testo);font-family:Sora,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body{overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}

#app{min-height:100%;min-height:100dvh;display:flex;flex-direction:column;align-items:center;
  padding:calc(env(safe-area-inset-top) + 14px) 22px calc(env(safe-area-inset-bottom) + 18px);position:relative;overflow-x:hidden;max-width:520px;margin:0 auto}
.alone{position:absolute;left:50%;top:110px;width:300px;height:300px;margin-left:-150px;border-radius:50%;background:#E5383B;opacity:.12;filter:blur(70px);pointer-events:none}

/* barra in alto */
.top{align-self:stretch;display:flex;align-items:center;justify-content:space-between;gap:8px;position:relative;z-index:2}
.tondo{width:44px;height:44px;border-radius:50%;border:1px solid var(--bordo2);background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.righe,.righe:before,.righe:after{display:block;width:16px;height:2px;background:var(--grigio2);border-radius:2px;position:relative}
.righe:before,.righe:after{content:"";position:absolute;left:0}.righe:before{top:-5px}.righe:after{top:5px}
.pillola{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--grigio2);background:rgba(255,255,255,.04);border:1px solid var(--bordo2);border-radius:22px;height:44px;padding:0 13px;white-space:nowrap}
.agg{color:var(--grigio)}
.agg.attivo{color:var(--blu);background:var(--giallo);border:2px solid #C9D400;font-weight:700;font-size:13.5px;box-shadow:0 0 22px rgba(238,255,58,.55);animation:pulsa 2s ease-in-out infinite}
@keyframes pulsa{50%{box-shadow:0 0 34px rgba(238,255,58,.85)}}
.dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;background:var(--grigio)}
.dot.v{background:#3DFF6E;box-shadow:0 0 10px #3DFF6E,0 0 3px #3DFF6E}
.dot.r{background:var(--rosso);box-shadow:0 0 10px var(--rosso)}
.dot.g{background:var(--grigio);animation:lampeggia 1.2s ease-in-out infinite}
@keyframes lampeggia{50%{opacity:.35}}

/* logo e brano */
.logo{width:min(290px,72vw);height:auto;aspect-ratio:290/262;object-fit:cover;border-radius:28px;margin-top:26px;position:relative}
.brano{margin-top:16px;text-align:center;max-width:100%;padding:0 6px}
.brano .titolo{font-size:17px;font-weight:700;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.brano .artista{font-size:14px;color:var(--grigio2);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spazio{flex:1 1 auto;min-height:18px}

/* barre VU */
.barre{display:flex;align-items:flex-end;gap:7px;height:70px;margin-bottom:22px}
.barre i{display:block;width:13px;height:6px;border-radius:4px;
  background:linear-gradient(to top,#00E5FF 0%,#39FF14 30%,#EEFF3A 60%,#FF9F1C 82%,#FF3B6B 100%);background-size:100% 70px;background-position:bottom;
  box-shadow:0 0 10px rgba(57,255,20,.35);transition:height .08s linear;opacity:.35}
.barre.vive i{opacity:1}

/* pulsante play */
.anello{width:141px;height:141px;border-radius:50%;padding:7px;flex-shrink:0;
  background:conic-gradient(from 20deg,#F4FFEC,#39FF14 12%,#0C5A00 25%,#39FF14 38%,#F4FFEC 50%,#39FF14 62%,#0C5A00 75%,#39FF14 88%,#F4FFEC);
  box-shadow:0 0 28px rgba(57,255,20,.65),0 0 80px rgba(57,255,20,.30);transition:box-shadow .4s}
.anello.on{box-shadow:0 0 36px rgba(57,255,20,.85),0 0 110px rgba(57,255,20,.45)}
.play{width:127px;height:127px;border-radius:50%;border:none;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 28%,#2A2F38 0%,#101318 45%,#000 100%);
  box-shadow:inset 0 -12px 22px rgba(0,0,0,.8),inset 0 8px 14px rgba(255,255,255,.12),inset 0 0 18px rgba(57,255,20,.25)}
.play:active{transform:scale(.97)}
.riflesso{position:absolute;top:10px;left:26px;width:74px;height:35px;border-radius:50%;background:rgba(255,255,255,.10);filter:blur(3px)}
.play svg{position:relative}
#icoPlay{margin-left:6px;filter:drop-shadow(0 0 6px rgba(57,255,20,.8))}
.play.attesa{animation:gira 1.1s linear infinite}
@keyframes gira{to{filter:brightness(1.4)}}
.etichetta{margin:20px 0 0;font-size:17px;font-weight:600;letter-spacing:.5px;text-align:center}
.etichetta.on{color:var(--verde);font-weight:700;letter-spacing:2px;font-size:16px}
.sotto{margin:6px 0 0;font-size:13px;color:var(--grigio);text-align:center;min-height:1.3em}

/* controlli Android */
.controlli{align-self:stretch;margin-top:16px;background:var(--card);border:1px solid var(--bordo);border-radius:18px;padding:10px 16px}
.controlli .riga{display:flex;align-items:center;gap:12px;height:42px}
.controlli label{font-size:13px;color:var(--grigio2);width:54px;flex-shrink:0}
.controlli input{flex:1;accent-color:var(--verde);min-width:0}
.controlli input.ciano{accent-color:#00E5FF}.controlli input.arancio{accent-color:#FF9F1C}
.tondo.piccolo{width:42px;height:42px;color:var(--verde);background:var(--blu);border-color:#2E3E62}
.vuoto{width:42px;flex-shrink:0}

.versione{margin:16px 0 0;font-size:13px;color:var(--grigio2);font-weight:600;background:rgba(255,255,255,.05);border:1px solid var(--bordo2);border-radius:14px;padding:5px 14px}

/* errore */
.errore{position:fixed;inset:0;background:var(--blu);z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;text-align:center;gap:22px}
.errore img{border-radius:22px;opacity:.85}
.errore p{font-size:17px;line-height:1.55;max-width:340px;margin:0}

/* menu */
.velo{position:fixed;inset:0;background:rgba(3,6,15,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:20}
.menu{position:fixed;z-index:21;left:12px;right:12px;top:calc(env(safe-area-inset-top) + 12px);bottom:calc(env(safe-area-inset-bottom) + 12px);max-width:500px;margin:0 auto;
  background:linear-gradient(180deg,#141F3B 0%,#0D152B 100%);border:1px solid #2B3A60;border-radius:28px;padding:20px 18px;overflow-y:auto;
  display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 80px rgba(0,0,0,.6);animation:entra .22s ease-out}
@keyframes entra{from{opacity:0;transform:translateY(-12px)}}
.menu .testa{display:flex;align-items:center;gap:12px}
.menu .testa img{width:52px;height:52px;border-radius:14px}
.menu .testa b{font-size:20px;display:block}
.menu .testa small{display:block;font-size:12px;color:var(--grigio);margin-top:3px}
.badge{display:inline-block;margin-top:5px;font-size:13px;font-weight:700;color:var(--blu);background:var(--verde);border-radius:12px;padding:3px 11px;box-shadow:0 0 12px rgba(92,255,46,.4)}
.chiudi{margin-left:auto;width:38px;height:38px;color:var(--grigio2);font-size:17px}
.intro{font-size:13.5px;line-height:1.55;color:#D6DBE8;margin:0}
.box{background:rgba(255,255,255,.03);border:1px solid var(--bordo);border-radius:18px;padding:14px}
.box h2{margin:0 0 10px;font-size:12px;letter-spacing:1.6px;color:var(--grigio);font-weight:700}
.box .riga{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;min-height:28px}
.nota{font-size:12px;color:var(--grigio);line-height:1.5;margin:8px 0 0}
.btn{margin-top:12px;width:100%;min-height:44px;border-radius:22px;border:1.5px solid var(--verde);background:#000;color:var(--verde);font-weight:700;font-size:14px;
  display:flex;align-items:center;justify-content:center;gap:6px;box-shadow:0 0 16px rgba(92,255,46,.25);text-decoration:none;padding:0 10px;text-align:center}
.btn:disabled{opacity:.5}
.btn.sec{border-color:#3A4A72;color:var(--testo);box-shadow:none;background:rgba(255,255,255,.04);font-weight:600}
.due{display:flex;gap:10px}.due .btn{flex:1}
.toggle{margin-left:auto;width:48px;height:28px;border-radius:14px;border:none;background:#3A4466;position:relative;flex-shrink:0;transition:background .2s}
.toggle:after{content:"";position:absolute;left:4px;top:4px;width:20px;height:20px;border-radius:50%;background:#C9CFDD;transition:left .2s,background .2s}
.toggle[aria-checked="true"]{background:var(--verde);box-shadow:0 0 12px rgba(92,255,46,.4)}
.toggle[aria-checked="true"]:after{left:24px;background:var(--blu)}
.toggle:disabled{opacity:.45}
.piede{margin-top:auto;padding-top:6px;font-size:11.5px;color:#6F7A96;text-align:center;line-height:1.7}
.piede b{color:#F68E13}.piede a{color:#9AA6C4}

/* installazione */
.installa{position:fixed;z-index:30;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom) + 12px);max-width:500px;margin:0 auto;
  background:#141F3B;border:1px solid #2B3A60;border-radius:22px;padding:16px;box-shadow:0 20px 60px rgba(0,0,0,.6);animation:sale .3s ease-out}
@keyframes sale{from{opacity:0;transform:translateY(20px)}}
.installa .testa{display:flex;gap:12px;align-items:center}
.installa .testa img{border-radius:11px}
.installa .testa b{display:block;font-size:15px}.installa small{color:var(--grigio);font-size:12.5px}
.installa ol{margin:12px 0 0;padding-left:22px;font-size:13.5px;line-height:1.9;color:#D6DBE8}
.ico{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;background:rgba(255,255,255,.08);vertical-align:middle;margin-left:3px}

.avviso{position:fixed;z-index:40;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top) + 66px);background:rgba(40,46,62,.97);border:1px solid #3A4A72;
  border-radius:16px;padding:11px 16px;font-size:13.5px;max-width:88vw;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.5)}

.con-controlli .logo{width:min(220px,58vw);margin-top:18px}
.con-controlli .barre{height:60px;margin-bottom:16px}
@media (max-height:700px){.logo{width:min(220px,60vw);margin-top:16px}.barre{height:56px;margin-bottom:14px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}