*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  min-height:100vh;
  overflow-x:hidden;
}

.floodlights{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(180deg, rgba(3,5,7,0.55) 0%, rgba(3,5,7,0.75) 55%, rgba(3,5,7,0.94) 100%),
    url('../assets/img/stadium-bg.jpg');
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
}

#app{
  position:relative; z-index:2;
  max-width:1180px; margin:0 auto;
  padding:36px 28px 60px;
}

header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:34px; flex-wrap:wrap; gap:20px;
}

.brand{
  font-family:var(--font-display); font-weight:700;
  font-size:28px; letter-spacing:1px;
  display:flex; align-items:baseline; gap:2px;
}
.brand .b1{color:var(--text);}
.brand .b2{
  background:linear-gradient(180deg,var(--gold-2),var(--gold-1));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand .b3{
  font-family:var(--font-mono); font-weight:400; font-size:12px;
  color:var(--text-muted); letter-spacing:2px; margin-left:8px; align-self:center;
}

nav.tabs{ display:flex; gap:2px; }
nav.tabs button{
  font-family:var(--font-display); font-weight:600; font-size:14px;
  letter-spacing:1.5px; text-transform:uppercase;
  background:none; border:none; cursor:pointer;
  color:var(--text-muted); padding:10px 26px; border-radius:0;
  clip-path:polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  transition:color .15s ease, background .15s ease;
}
nav.tabs button:hover{ color:var(--text); }
nav.tabs button.active{
  color:#141414;
  background:var(--gold-2);
}

#screen{ position:relative; }

footer.hotkeys{
  margin-top:26px; display:flex; gap:22px; align-items:center;
  font-family:var(--font-mono); font-size:11.5px; color:var(--text-muted);
}
kbd{
  background:var(--panel); border:1px solid var(--panel-border);
  border-radius:var(--radius-sm); padding:2px 7px; font-family:inherit; color:var(--text);
}

.music-panel{
  position:fixed; right:16px; bottom:16px; z-index:50;
  transition:opacity .15s ease, transform .15s ease;
  opacity:1; transform:translateY(0);
}
.music-panel.hidden{
  opacity:0; transform:translateY(12px);
  pointer-events:none;   /* clic-through quando nascosto */
  /* NIENTE display:none e niente visibility:hidden qui apposta:
     l'iframe resta "vivo" nel DOM e la musica continua a suonare
     anche a pannello nascosto, cambia solo cosa e visibile. */
}

@media (max-width:760px){
  header{flex-direction:column; align-items:flex-start;}
}