/* Fullscreen browser "TV channel" */
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; background: #000; color: #fff; overflow: hidden;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  cursor: default;
}
body.idle { cursor: none; }

#stage { position: fixed; inset: 0; background: #000; }
#player { width: 100%; height: 100%; object-fit: contain; background: #000; }

.hidden { opacity: 0 !important; pointer-events: none; }

/* Channel bug / now-playing */
#bug {
  position: absolute; left: 2.5vw; bottom: 8vh;
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.6rem 1.1rem 0.6rem 0.8rem;
  background: linear-gradient(90deg, rgba(226,35,26,0.92), rgba(120,10,8,0.85));
  border-left: 4px solid #ffcc00;
  border-radius: 4px;
  transition: opacity 0.6s ease;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  max-width: 60vw;
}
.bug-logo { font-weight: 800; letter-spacing: 0.12em; font-size: 1.1rem; color: #fff; }
.bug-artist { font-weight: 800; font-size: 1.5rem; color: #fff; line-height: 1.1; }
.bug-title { font-size: 1.1rem; color: #ffe9a8; }

/* "Next Up" popup (top-right corner) */
#nextup {
  position: absolute; top: 6vh; right: 2.5vw;
  min-width: 230px; max-width: 38vw;
  padding: 0.7rem 1rem;
  background: linear-gradient(135deg, rgba(20,20,26,0.92), rgba(40,8,8,0.92));
  border: 1px solid rgba(255,204,0,0.5);
  border-top: 3px solid #ffcc00;
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
  transition: opacity 0.5s ease, transform 0.5s ease;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
#nextup.hidden { transform: translateX(20px); }
.nextup-label {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.2em;
  color: #ffcc00; margin-bottom: 0.25rem;
}
.nextup-artist { font-weight: 800; font-size: 1.15rem; color: #fff; line-height: 1.15; }
.nextup-title { font-size: 0.95rem; color: #ddd; }

/* Control bar */
#bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.8rem 1.2rem;
  background: linear-gradient(0deg, rgba(0,0,0,0.85), rgba(0,0,0,0));
  transition: opacity 0.4s ease;
}
#bar button {
  background: rgba(255,255,255,0.1); color: #fff; border: none;
  border-radius: 6px; font-size: 1.2rem; padding: 0.4rem 0.7rem; cursor: pointer;
}
#bar button:hover { background: var(--accent, #e2231a); }
#bar button.right { margin-left: auto; }
#bar-label { color: #ccc; font-size: 0.95rem; margin-left: 0.5rem; }

/* Splash */
#splash {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, #1a0708, #000);
  transition: opacity 0.5s ease;
}
#splash.gone { opacity: 0; pointer-events: none; }
.splash-inner { text-align: center; }
.splash-logo {
  font-size: clamp(3rem, 12vw, 8rem); font-weight: 900; letter-spacing: 0.1em;
  color: #e2231a; text-shadow: 0 0 30px rgba(226,35,26,0.5);
}
.splash-sub { color: #aaa; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.9rem; }
#start-btn {
  margin-top: 1.5rem; background: #e2231a; color: #fff; border: none;
  font-size: 1.3rem; font-weight: 800; padding: 0.9rem 2rem; border-radius: 8px; cursor: pointer;
  letter-spacing: 0.05em;
}
#start-btn:hover { filter: brightness(1.15); }
.splash-status { color: #888; margin-top: 1rem; min-height: 1.2rem; }