/* sound.css — the sound menu the corner music button opens (js/soundmenu.js,
   Ahmet 2026-10-24). The same small dark card as the bug panel beside it,
   one slider row per kind of sound. Ayarlar wears the same rows. */

#sound {
  position: fixed;
  bottom: calc(max(3vh, env(safe-area-inset-bottom, 0px) + 16px) + 58px);
  right: max(4vw, 18px);
  z-index: 45;
  width: min(280px, calc(100vw - 36px));
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
#sound.show { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  #sound, #sound.show { transform: none; }
}
/* On a phone the bug stands on the music button: the card clears both. */
@media (max-width: 640px) {
  #sound { bottom: calc(max(3vh, env(safe-area-inset-bottom, 0px) + 16px) + 108px); }
}

#music-btn.open {
  opacity: 1;
  background: rgba(232, 193, 106, 0.06);
  border-color: rgba(232, 193, 106, 0.35);
}

.snd-shell {
  background: rgba(20, 15, 40, 0.92);
  border: 1px solid rgba(140, 135, 220, 0.3);
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(5, 4, 16, 0.55), 0 0 24px rgba(140, 135, 220, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 14px 14px 10px;
}
.snd-title {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--cream);
  margin-bottom: 6px;
}

/* ---------- One row: speaker, label, slider, number ---------- */
.snd-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
}
.snd-mute {
  flex: none;
  width: 32px;
  height: 32px;
  margin-left: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: none;
  border: 1px solid transparent;
  padding: 0;
  cursor: pointer;
  color: var(--gold);
  transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.snd-mute:hover, .snd-mute:focus-visible {
  background: rgba(232, 193, 106, 0.06);
  border-color: rgba(232, 193, 106, 0.35);
  outline: none;
}
.snd-mute svg { width: 18px; height: 18px; display: block; }
.snd-mute path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.snd-mute .snd-x { display: none; }
.snd-row.muted .snd-mute { color: var(--lavender); }
.snd-row.muted .snd-wave { display: none; }
.snd-row.muted .snd-x { display: inline; }

.snd-label {
  flex: none;
  width: 58px;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--lavender);
}
.snd-val {
  flex: none;
  width: 26px;
  text-align: right;
  font-family: var(--sans);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--cream);
  opacity: 0.8;
}
.snd-row.muted .snd-val { color: var(--lavender); }

/* The slider: a thin lavender line, gold up to the thumb (--fill, set by
   js/soundmenu.js as it moves). The input is taller than the line it draws,
   so a fingertip finds it. */
.snd-slider {
  flex: 1;
  min-width: 0;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: pan-y;
}
.snd-slider:focus-visible { outline: none; }
.snd-slider::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--gold) var(--fill, 50%), rgba(154, 147, 184, 0.3) var(--fill, 50%));
}
.snd-slider::-moz-range-track {
  height: 3px;
  border-radius: 999px;
  background: rgba(154, 147, 184, 0.3);
}
.snd-slider::-moz-range-progress {
  height: 3px;
  border-radius: 999px;
  background: var(--gold);
}
.snd-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: var(--gold);
  border: none;
  box-shadow: 0 0 8px rgba(232, 193, 106, 0.55);
  transition: transform 0.15s ease;
}
.snd-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  border: none;
  box-shadow: 0 0 8px rgba(232, 193, 106, 0.55);
}
.snd-slider:hover::-webkit-slider-thumb,
.snd-slider:focus-visible::-webkit-slider-thumb { transform: scale(1.2); }
.snd-row.muted .snd-slider::-webkit-slider-thumb { background: var(--lavender); box-shadow: none; }
.snd-row.muted .snd-slider::-moz-range-thumb { background: var(--lavender); box-shadow: none; }

/* In Ayarlar the row sits under its own label and hint: no inline label. */
.pf-setting .snd-row { max-width: 320px; }