/**
 * Musik-Bedienleiste unten auf der Seite: Vor/Zurück, Play/Pause,
 * Lautstärke sowie der Hinweistext, falls die Wiedergabe nicht automatisch
 * starten konnte. Der Fortschrittsbalken (Scrubber) ist ein eigenes
 * Bauteil, siehe assets/css/progress-bar.css.
 *
 * Logik dazu: assets/js/audio-engine.js (Wiedergabe/Crossfade) und
 * assets/js/audio-controls-ui.js (Verdrahtung der Buttons).
 *
 * Siehe MANUAL.md, Abschnitt "Musik-Bedienelemente".
 */

/* Fester Container unten, hält Fortschrittsbalken + Bedienzeile zusammen */
.player-bar{
  position: fixed;
  left: 50%;
  bottom: clamp(1.4rem, 4vh, 2.8rem);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.sound{
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

/* Einstellung "Ambiente-Modus": Bedienleiste (Fortschritt + Buttons)
   ausblenden, ohne die Wiedergabe selbst zu beeinflussen. Siehe
   MANUAL.md, Abschnitt "Einstellungen (Burger-Menü)". */
body.emds-ambient .player-bar{
  display: none;
}

/* Gemeinsames Aussehen für Vor-/Zurück-/Play-Pause-Knopf (rundes Glas) */
.control-btn{
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(243,237,226,0.28);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.4s ease, background 0.4s ease, transform 0.4s ease;
  padding: 0;
}

.control-btn:hover{
  border-color: rgba(216,178,106,0.6);
  background: rgba(216,178,106,0.08);
}

.control-btn:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.control-btn svg{ display: block; }
.control-btn .bar{ fill: var(--ink); }

/* Vor-/Zurück-Knöpfe etwas kleiner als der zentrale Play/Pause-Knopf */
#prev-track,
#next-track{
  width: 38px;
  height: 38px;
}

.sound-label{
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  min-width: 6.5em;
  text-align: left;
}

#volume{
  -webkit-appearance: none;
  appearance: none;
  width: 90px;
  height: 2px;
  background: rgba(243,237,226,0.25);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

#volume::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
}

#volume::-moz-range-thumb{
  width: 11px;
  height: 11px;
  border: none;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
}

.audio-note{
  position: fixed;
  left: 50%;
  bottom: clamp(0.3rem, 1.5vh, 0.6rem);
  transform: translateX(-50%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.7rem;
  color: var(--ink-faint);
  z-index: 3;
  opacity: 0;
  transition: opacity 0.6s ease;
  max-width: 90vw;
  text-align: center;
}

.audio-note.show{ opacity: 1; }

@media (max-width: 480px){
  .sound{ gap: 0.5rem; }
  .sound-label{ display: none; }
  #prev-track, #next-track{ width: 34px; height: 34px; }
}