body {
  background: #000;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.player {
  width: 100vw;
  height: 100dvh;
  color: #fff;
  text-align: center;
}

.loading-gif {
    width: clamp(50px, 10vw, 100px);
    height: auto;
}

/* Volume overlay container */
.volume-overlay {
  position: absolute;
  bottom: 80px; /* adjust above controls */
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  overflow: hidden;
  display: none;
  z-index: 9999;
}

/* The filled bar */
.volume-overlay .bar {
  height: 100%;
  width: 0%;
  background: #23ade5; /* match your theme */
  transition: width 0.1s ease;
}
.art-subtitle {
    font-size: clamp(14px, 2.5vw, 32px)  !important;
    color: #fff;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}