:root{
  --bg:#070810;
  --bg2:#0b0e17;
  --panel:#121726;
  --panel2:#181d30;
  --border:rgba(255,255,255,.10);
  --text:#f7f8fb;
  --muted:#a9b0c3;
  --pink:#ff2faf;
  --cyan:#32d9ff;
  --lime:#c7ff2f;
  --amber:#ffb347;
  --yellow:#ffd85b;
  --red:#ff5f6d;
  --green:#60ef95;
  --shadow:0 30px 80px rgba(0,0,0,.45);
  --card-radius:28px;
  --reel-gap:10px;
  --reel-card-h:64px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 18% 14%, rgba(255,47,175,.26), transparent 26%),
    radial-gradient(circle at 84% 12%, rgba(50,217,255,.22), transparent 24%),
    radial-gradient(circle at 50% 82%, rgba(199,255,47,.10), transparent 30%),
    linear-gradient(180deg, #03040a, #090b13 42%, #05070d 100%);
}

.live-stage{
  min-height:100vh;
  display:flex;
  justify-content:center;
  padding:22px;
}

.live-screen{
  width:min(100%, 920px);
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:8px 0 24px;
}

.live-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-align:center;
}

.live-brand-logo{
  width:112px;
  height:112px;
  object-fit:cover;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 45px rgba(0,0,0,.38), 0 0 45px rgba(255,47,175,.16);
}

.live-branding{display:flex;flex-direction:column;align-items:center;gap:10px}
.live-title{
  font-family:Poppins,Inter,sans-serif;
  font-weight:900;
  font-size:clamp(30px,5vw,56px);
  line-height:.95;
  letter-spacing:-.03em;
}
.live-pill{
  padding:8px 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  color:var(--lime);
  font-weight:900;
  font-size:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.status-panel,
.hero-card,
.now-card,
.live-footer{
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(20,25,40,.92), rgba(14,18,31,.92));
  border-radius:var(--card-radius);
  box-shadow:var(--shadow);
}

.status-panel{
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.status-chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:max-content;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  font-weight:800;
  letter-spacing:.02em;
}
.status-dot{
  width:12px;
  height:12px;
  border-radius:999px;
  box-shadow:0 0 0 6px rgba(255,255,255,.04), 0 0 16px currentColor;
  color:var(--red);
  background:currentColor;
}
.status-dot.is-red{color:var(--red)}
.status-dot.is-green{color:var(--green)}
.status-dot.is-amber{color:var(--amber)}
.status-dot.is-cyan{color:var(--cyan)}
.status-dot.is-yellow{color:var(--yellow)}
.status-dot.is-slate{color:#9da5ba}
.status-caption{
  margin:0;
  color:var(--muted);
  line-height:1.5;
  font-size:15px;
}
.status-offline .status-chip{background:rgba(255,95,109,.10)}

.hero-card{
  padding:18px;
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:20px;
  align-items:center;
}

.hero-copy{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.hero-kicker,
.now-kicker{
  color:var(--lime);
  font-size:13px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.hero-title{
  margin:0;
  font-family:Poppins,Inter,sans-serif;
  font-weight:900;
  font-size:clamp(36px,5vw,64px);
  line-height:.92;
  letter-spacing:-.04em;
}

.hero-subtitle{
  margin:0;
  font-size:17px;
  line-height:1.6;
  color:var(--muted);
  max-width:54ch;
}

.slot-machine{
  position:relative;
  border-radius:30px;
  padding:18px;
  background:
    linear-gradient(180deg, rgba(255,174,87,.30), rgba(255,47,175,.15) 25%, rgba(27,32,50,.95) 55%, rgba(12,15,24,.98) 100%),
    linear-gradient(135deg, #4f1d0f, #8b2e25 20%, #5f1e54 58%, #20182f 100%);
  border:1px solid rgba(255,225,180,.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -10px 30px rgba(0,0,0,.35),
    0 22px 40px rgba(0,0,0,.34),
    0 0 45px rgba(255,47,175,.18);
  overflow:hidden;
}

.slot-machine::before,
.slot-machine::after{
  content:"";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:22px;
  height:88px;
  border-radius:14px;
  background:linear-gradient(180deg, #f6b565, #b14b21 42%, #672319);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.25), 0 8px 14px rgba(0,0,0,.25);
}
.slot-machine::before{left:-10px}
.slot-machine::after{right:-10px}

.machine-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.machine-brand{
  padding:10px 14px;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(255,229,180,.20), rgba(255,255,255,.08));
  border:1px solid rgba(255,230,185,.24);
  font-size:12px;
  font-weight:900;
  letter-spacing:.16em;
  color:#fff1dc;
}
.machine-lights{
  display:flex;
  align-items:center;
  gap:8px;
}
.machine-lights span{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#ffe29e;
  box-shadow:0 0 8px #ffd487, 0 0 18px rgba(255,212,135,.75);
  animation:blinkLights 1.2s ease-in-out infinite;
}
.machine-lights span:nth-child(2){animation-delay:.15s}
.machine-lights span:nth-child(3){animation-delay:.3s}
.machine-lights span:nth-child(4){animation-delay:.45s}
.machine-lights span:nth-child(5){animation-delay:.6s}

.machine-body{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  padding:18px 14px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(7,9,16,.95), rgba(18,22,34,.98));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 6px 20px rgba(0,0,0,.32);
}

.payline{
  position:absolute;
  left:12px;
  right:12px;
  top:50%;
  height:76px;
  transform:translateY(-50%);
  border-radius:18px;
  border:2px solid rgba(50,217,255,.38);
  background:linear-gradient(90deg, rgba(255,47,175,.12), rgba(50,217,255,.12));
  box-shadow:0 0 22px rgba(50,217,255,.16), inset 0 0 0 1px rgba(255,255,255,.08);
  pointer-events:none;
}

.reel-window{
  position:relative;
  min-height:228px;
  padding:10px 8px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
}

.reel-window::before,
.reel-window::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:28px;
  z-index:3;
  pointer-events:none;
}
.reel-window::before{
  top:0;
  background:linear-gradient(180deg, rgba(10,12,18,.95), rgba(10,12,18,0));
}
.reel-window::after{
  bottom:0;
  background:linear-gradient(0deg, rgba(10,12,18,.95), rgba(10,12,18,0));
}

.reel-strip{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--reel-gap);
  z-index:2;
}

.reel-strip.is-spinning{
  animation:spinReel 1s linear infinite;
}
.reel-window:nth-child(2) .reel-strip.is-spinning{animation-duration:.88s}
.reel-window:nth-child(3) .reel-strip.is-spinning{animation-duration:.76s}

.reel-card{
  min-height:var(--reel-card-h);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:4px;
  text-align:center;
  padding:10px 8px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.reel-card.is-center{
  background:linear-gradient(135deg, rgba(255,47,175,.22), rgba(50,217,255,.20));
  border-color:rgba(255,255,255,.22);
  box-shadow:0 0 24px rgba(50,217,255,.10);
}
.reel-main{
  display:block;
  font-weight:900;
  font-size:clamp(14px,1.6vw,18px);
  line-height:1.1;
  word-break:break-word;
}
.reel-sub{
  display:block;
  color:var(--muted);
  font-size:12px;
  line-height:1.2;
}

.machine-bottom{
  margin-top:14px;
  padding:10px 14px;
  border-radius:16px;
  background:rgba(8,10,18,.34);
  border:1px solid rgba(255,255,255,.08);
  color:#ffe9c7;
  font-size:13px;
  text-align:center;
  line-height:1.4;
}

.slot-machine.is-running .machine-brand{
  background:linear-gradient(135deg, rgba(255,179,71,.32), rgba(255,47,175,.22));
}
.slot-machine.is-running .payline{
  border-color:rgba(255,179,71,.52);
  background:linear-gradient(90deg, rgba(255,179,71,.16), rgba(255,47,175,.18));
  box-shadow:0 0 24px rgba(255,179,71,.20);
}
.slot-machine.is-playing .payline{
  border-color:rgba(50,217,255,.46);
}
.slot-machine.is-paused .payline{
  border-color:rgba(255,216,91,.46);
}

.now-card{
  padding:20px 22px 22px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.now-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.now-state{
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
}
.track{
  margin:2px 0 0;
  font-family:Poppins,Inter,sans-serif;
  font-size:clamp(30px,4.2vw,54px);
  line-height:.94;
  letter-spacing:-.04em;
}
.artist{
  font-size:clamp(20px,2vw,28px);
  font-weight:800;
  color:var(--cyan);
}
.owner{
  font-size:15px;
  color:var(--muted);
  line-height:1.5;
}
.progress-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
  font-weight:800;
  font-size:22px;
}
.progress-wrap{
  position:relative;
  overflow:hidden;
  height:14px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
}
.progress-bar{
  height:100%;
  width:0%;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--pink), var(--cyan), var(--lime));
  box-shadow:0 0 18px rgba(50,217,255,.20);
  transition:width .25s linear;
}

.live-footer{
  padding:16px 18px;
  text-align:center;
}
.credits{font-size:13px;line-height:1.5;color:var(--muted)}
.credits a{color:var(--cyan);font-weight:900;text-decoration:none}
.legal-links{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:8px;
}
.legal-links a{
  font-size:12px;
  color:var(--muted);
  text-decoration:none;
}

@keyframes blinkLights{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.45;transform:scale(.86)}
}
@keyframes spinReel{
  0%{transform:translateY(0)}
  100%{transform:translateY(calc(-1 * (var(--reel-card-h) + var(--reel-gap)) * 3))}
}

@media (max-width: 860px){
  .hero-card{
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px){
  .live-stage{padding:12px}
  .live-screen{gap:14px}
  .live-brand-logo{width:96px;height:96px;border-radius:24px}
  .hero-card,.now-card,.status-panel,.live-footer{border-radius:24px}
  .hero-card{padding:16px}
  .machine-body{gap:8px;padding:14px 10px}
  .reel-window{min-height:210px;padding:8px 6px}
  .payline{left:8px;right:8px;height:72px}
  .track{font-size:clamp(26px,10vw,42px)}
  .artist{font-size:20px}
  .progress-meta{font-size:18px}
  .now-head{align-items:flex-start}
}

@media (max-width: 430px){
  .live-title{font-size:28px}
  .status-chip{width:100%;justify-content:center}
  .hero-title{font-size:34px}
  .hero-subtitle{font-size:15px}
  .machine-top{flex-direction:column;align-items:flex-start}
  .machine-lights{width:100%;justify-content:space-between}
  .reel-main{font-size:14px}
  .reel-sub{font-size:11px}
  .reel-window{min-height:192px}
  .track{font-size:22px}
  .artist{font-size:17px}
  .owner{font-size:13px}
  .progress-meta{font-size:16px}
}

@media (max-height: 760px){
  .live-stage{align-items:flex-start}
}


/* v44 - centratura pagina live pubblica */
.status-panel{
  align-items:center;
  text-align:center;
}
.status-chip{
  align-self:center;
}
.hero-copy{
  align-items:center;
  text-align:center;
}
.hero-subtitle{
  max-width:62ch;
  margin:0 auto;
}
.machine-top{
  justify-content:center;
}
.now-card{
  text-align:center;
}
.now-head{
  justify-content:center;
}
.progress-meta{
  justify-content:space-between;
}
.artist,
.owner{
  margin-left:auto;
  margin-right:auto;
}
.live-footer{
  text-align:center;
}
@media (max-width: 860px){
  .machine-top{
    justify-content:center;
  }
}
@media (max-width: 430px){
  .machine-top{
    align-items:center;
  }
}


/* v45 - rulli slot chiusi in cornice e arresto visivo corretto */
.reel-window{
  height:calc((var(--reel-card-h) * 3) + (var(--reel-gap) * 2) + 20px) !important;
  min-height:0 !important;
  max-height:calc((var(--reel-card-h) * 3) + (var(--reel-gap) * 2) + 20px) !important;
  overflow:hidden !important;
}
.reel-card{
  height:var(--reel-card-h) !important;
  min-height:var(--reel-card-h) !important;
  max-height:var(--reel-card-h) !important;
  flex:0 0 var(--reel-card-h) !important;
}
.reel-strip{
  will-change:transform;
}
.reel-strip.is-spinning{
  animation:spinReelFast .34s linear infinite !important;
}
.reel-window:nth-of-type(2) .reel-strip.is-spinning{
  animation-duration:.29s !important;
}
.reel-window:nth-of-type(3) .reel-strip.is-spinning{
  animation-duration:.24s !important;
}
.slot-machine.is-running .reel-window{
  box-shadow:inset 0 0 18px rgba(255,179,71,.12), 0 0 18px rgba(255,47,175,.08);
}
@keyframes spinReelFast{
  0%{transform:translateY(0)}
  100%{transform:translateY(calc(-1 * (var(--reel-card-h) + var(--reel-gap)) * 3))}
}
@media(max-width:640px){
  :root{--reel-card-h:58px}
}
@media(max-width:430px){
  :root{--reel-card-h:54px}
}


/* v46 - pulsante esplicito attivazione audio live */
.audio-unlock{
  width:100%;
  border:1px solid rgba(50,217,255,.28);
  background:linear-gradient(135deg, rgba(50,217,255,.16), rgba(255,47,175,.12));
  color:var(--text);
  border-radius:22px;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  cursor:pointer;
  box-shadow:0 18px 38px rgba(0,0,0,.24), 0 0 28px rgba(50,217,255,.08);
  font-family:Inter,system-ui,sans-serif;
  text-align:left;
}
.audio-unlock strong{
  font-size:16px;
  font-weight:900;
}
.audio-unlock small{
  display:block;
  color:var(--muted);
  font-size:12px;
  line-height:1.25;
}
.audio-unlock-icon{
  font-size:22px;
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  flex:0 0 auto;
}
.audio-unlock.is-hidden{
  display:none;
}
body.audio-ready .audio-unlock{
  display:none;
}
@media(max-width:520px){
  .audio-unlock{
    align-items:center;
    text-align:center;
    flex-direction:column;
    gap:8px;
  }
}


/* v48 - bottone audio non visibile ma DOM mantenuto per compatibilità */
.audio-unlock{
  display:none !important;
}