/* ===== Background layers, bottom to top =====
   -3  base colour
   -2  album artwork
   -1  MP4 video
    0+ interface */

#baseBg {
  position: fixed;
  inset: 0;
  z-index: -3;
  background: var(--bg);
  pointer-events: none;
}

#albumBg {
  position: fixed;
  inset: -40px;
  z-index: -2;
  background-size: cover;
  background-position: center;
  filter: blur(40px) saturate(1.3);
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

#albumBg.on {
  opacity: 0.3;
}

#bgVideo {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}

.hud-grid {
  z-index: -1;
}

/* ===== Video mode: clearer text and lines ===== */

body.video-on {
  --accent: rgba(255, 255, 255, 0.9);
  --accent-rgb: 255, 255, 255;
  --text: rgba(255, 255, 255, 0.95);
  --muted: rgba(255, 255, 255, 0.75);
  --panel: transparent;
  --panel-border: rgba(255, 255, 255, 0.65);
  --warn: rgba(255, 255, 255, 0.9);
  --danger: rgba(255, 255, 255, 0.9);
  accent-color: rgba(255, 255, 255, 0.9);
}

body.video-on .hud-grid {
  display: none;
}

body.video-on #albumBg {
  display: none;
}

body.video-on,
body.video-on * {
  color: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
}

body.video-on ::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

body.video-on .topbar,
body.video-on .sidebar,
body.video-on .player,
body.video-on .track,
body.video-on .playlist-card,
body.video-on .btn,
body.video-on .nav-btn,
body.video-on .count,
body.video-on .quota-badge,
body.video-on .banner,
body.video-on input,
body.video-on select,
body.video-on .picker-list button {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

body.video-on .track {
  transform: none;
}

body.video-on .track.playing {
  box-shadow: none !important;
}

body.video-on .btn:hover,
body.video-on .nav-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

body.video-on .track img,
body.video-on .np-thumb {
  opacity: 0.8;
}

body.video-on .visualizer span,
body.video-on .reactor {
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: none !important;
}

/* Dialogs keep a dark backing so settings stay readable */

body.video-on .modal {
  background: rgba(0, 0, 0, 0.55);
}

body.video-on .modal-card {
  background: rgba(0, 0, 0, 0.8) !important;
}