/* ── Navbar ── */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding: 1.2rem 2rem;
  transition: background .4s ease, box-shadow .4s ease;
}
#navbar.scrolled {
  background: rgba(10, 7, 4, .92);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: 0 1px 0 rgba(255, 200, 100, .10), 0 4px 24px rgba(0,0,0,.35);
}

/* ── Hero title ── */
.hero-title {
  font-family: 'Righteous', cursive;
  font-size: clamp(3.8rem, 11vw, 9rem);
  line-height: .92;
  letter-spacing: -.02em;
}

/* ── Fixed player bar ── */
.player-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 190;
  background: rgba(10, 7, 4, .97);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border-top: 1px solid rgba(255, 200, 100, .10);
}

/* Bottom padding so content isn't hidden by player */
.has-player { padding-bottom: 96px; }

/* ── Volume range slider ── */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 200, 100, .15);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #F59E0B;
  margin-top: -5px;
  transition: transform .15s;
}
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.25); }