/* Versionsnummer + globale Steuerung */
/* Versionsnummer unten rechts – kaum sichtbar */
#app-version {
  position: fixed;
  bottom: 12px;
  right: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .58rem;
  color: rgba(165,172,175,0.35);
  letter-spacing: .06em;
  pointer-events: none;
  user-select: none;
  z-index: 45;
  transition: opacity 0.6s ease;
}

/* Globale Steuerung oben rechts (Ton, Sternenhimmel) – klein und zurückhaltend.
   Außerhalb von HOME sitzt rechts der Zurück-Button, dann rückt sie nach links. */
#bg-controls {
  position: fixed;
  right: 24px;
  top: 36px;
  z-index: 70;
  display: flex;
  gap: 6px;
  transition: right 0.3s ease;
}

body:not(.state-home) #bg-controls { right: 84px; }

.bg-ctrl {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(165, 172, 175, 0.18);
  background: rgba(0, 20, 24, 0.35);
  color: rgba(205, 211, 214, 0.55);
  font-size: 11px;
  cursor: pointer;
  opacity: 0.55;
  backdrop-filter: blur(8px);
  transition: opacity 0.25s ease, color 0.25s ease, border-color 0.25s ease,
              box-shadow 0.25s ease, transform 0.25s ease;
}

.bg-ctrl:hover {
  opacity: 1;
  color: var(--silver-pure);
  border-color: rgba(92, 160, 171, 0.4);
  transform: scale(1.06);
}

/* Aktiv: leicht türkis */
.bg-ctrl[aria-pressed="true"] {
  color: var(--accent-light);
  border-color: rgba(92, 160, 171, 0.3);
  box-shadow: none;
}

@media (max-width: 640px) {
  #bg-controls { right: 14px; top: 20px; }
  body:not(.state-home) #bg-controls { right: 72px; }
}