#bgm-control {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 850;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  background: rgba(8,6,10,0.85);
  border: 0.5px solid rgba(200,134,10,0.35);
  border-radius: 100px;
  padding: 6px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  transition: max-height .3s cubic-bezier(.4,0,.2,1) .15s,
              padding-top .3s cubic-bezier(.4,0,.2,1) .15s,
              border-color .25s, box-shadow .25s;
  cursor: none;
  overflow: hidden;
  max-height: 56px;
  width: 56px;
}
#bgm-control:hover {
  max-height: 240px;
  padding-top: 18px;
  border-color: rgba(200,134,10,0.6);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 24px rgba(200,134,10,0.15);
  transition: max-height .3s cubic-bezier(.4,0,.2,1) 0s,
              padding-top .3s cubic-bezier(.4,0,.2,1) 0s,
              border-color .25s, box-shadow .25s;
}
#bgm-toggle {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(26,18,8,0.6);
  border: 0.5px solid rgba(200,134,10,0.45);
  color: var(--gold-bright);
  cursor: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: background .25s, transform .15s, border-color .25s;
}
#bgm-toggle:hover { background: rgba(42,30,10,0.8); border-color: var(--gold-bright); }
#bgm-toggle:active { transform: scale(0.94); }
.bgm-icon {
  width: 22px; height: 22px;
  position: absolute;
  inset: 11px;
  transition: opacity .25s;
}
#bgm-control.bgm-muted   .icon-playing { opacity: 0; }
#bgm-control.bgm-muted   .icon-muted   { opacity: 1; }
#bgm-control:not(.bgm-muted) .icon-playing { opacity: 1; }
#bgm-control:not(.bgm-muted) .icon-muted   { opacity: 0; }
#bgm-control:not(.bgm-muted) #bgm-toggle {
  animation: bgm-pulse 2.2s ease-out infinite;
}
.wave { stroke-dasharray: 20; stroke-dashoffset: 0; animation: wave-flow 2s ease-in-out infinite; }
.wave.w1 { animation-delay: 0s; }
.wave.w2 { animation-delay: 0.2s; }
.wave.w3 { animation-delay: 0.4s; }

.bgm-slider-wrap {
  width: 44px; height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .12s ease 0s;
  pointer-events: none;
}
#bgm-control:hover .bgm-slider-wrap {
  opacity: 1;
  pointer-events: auto;
  transition: opacity .2s ease .25s;
}

#bgm-volume {
  -webkit-appearance: none;
  appearance: none;
  width: 140px; height: 4px;
  background: transparent;
  outline: none;
  cursor: none;
  transform: rotate(-90deg);
  transform-origin: center;
  padding: 0; margin: 0;
}
#bgm-volume::-webkit-slider-runnable-track {
  height: 3px;
  background: linear-gradient(to right, var(--gold-bright) 0%, var(--gold-bright) var(--vol,40%), rgba(200,134,10,0.22) var(--vol,40%));
  border-radius: 3px; border: none;
}
#bgm-volume::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px;
  background: var(--gold-bright);
  border-radius: 50%;
  border: 1.5px solid rgba(8,6,10,0.9);
  margin-top: -6px;
  box-shadow: 0 0 10px rgba(239,159,39,0.6);
  cursor: none;
}
#bgm-volume::-moz-range-track {
  height: 3px; background: rgba(200,134,10,0.22);
  border-radius: 3px; border: none;
}
#bgm-volume::-moz-range-progress { height: 3px; background: var(--gold-bright); border-radius: 3px; }
#bgm-volume::-moz-range-thumb {
  width: 14px; height: 14px;
  background: var(--gold-bright);
  border: 1.5px solid rgba(8,6,10,0.9);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(239,159,39,0.6); cursor: none;
}

@media (max-width: 640px) { #bgm-control { bottom: 16px; right: 16px; } }

/* Light theme */
body.light-theme #bgm-control {
  background: rgba(255,255,255,0.95);
  border-color: rgba(140,89,8,0.4);
  box-shadow: 0 8px 32px rgba(31,10,2,0.12);
}
body.light-theme #bgm-toggle { background: #F8EED7; border-color: rgba(184,92,0,0.5); color: #B85C00; }
body.light-theme #bgm-toggle:hover { background: #FFFFFF; border-color: #B85C00; }
body.light-theme #bgm-volume::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #B85C00 0%, #B85C00 var(--vol,40%), rgba(140,89,8,0.22) var(--vol,40%));
}
body.light-theme #bgm-volume::-webkit-slider-thumb {
  background: #B85C00; box-shadow: 0 0 10px rgba(184,92,0,0.6);
  border-color: rgba(248,238,215,0.95);
}