/* Sound settings panel: sliders, mute switch, HUD speaker state. */
.audio-sheet { width: min(100%, 440px); }
.audio-row {
  display: grid; grid-template-columns: 72px 1fr 52px; align-items: center; gap: 14px;
  min-height: 52px; border-bottom: 1px solid var(--line);
}
.audio-row label { font-weight: 650; }
.audio-row output { font: 700 13px/1 var(--mono); color: var(--cyan); text-align: right; font-variant-numeric: tabular-nums; }
.audio-row.is-off output { color: var(--dim); }

/* Range slider: neon fill up to the thumb (--fill set from JS). 44px tall hit area. */
.slider {
  --fill: 100%;
  -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer;
}
.slider::-webkit-slider-runnable-track {
  height: 6px; border-radius: 6px;
  background: linear-gradient(90deg, var(--cyan) var(--fill), #22323c var(--fill));
  box-shadow: 0 0 10px -2px #3ef0d866;
}
.slider::-moz-range-track { height: 6px; border-radius: 6px; background: #22323c; }
.slider::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--cyan); }
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%;
  background: #e9fffb; border: 3px solid var(--cyan); box-shadow: 0 0 12px #3ef0d8aa;
  transition: transform .12s;
}
.slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #e9fffb; border: 3px solid var(--cyan); }
.slider:hover::-webkit-slider-thumb { transform: scale(1.12); }
.slider:focus-visible { outline: none; }
.slider:focus-visible::-webkit-slider-thumb { outline: 2px solid #fff; outline-offset: 3px; }
.slider:focus-visible::-moz-range-thumb { outline: 2px solid #fff; outline-offset: 3px; }
.is-muted .slider { filter: saturate(0) brightness(.7); }

.switch-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px;
  font-weight: 650; cursor: pointer; border-bottom: 1px solid var(--line);
}
.switch-row kbd { margin-left: 6px; }
.switch {
  -webkit-appearance: none; appearance: none; position: relative; flex: none;
  width: 52px; height: 30px; margin: 0; border-radius: 30px; cursor: pointer;
  background: #22323c; border: 1px solid var(--line-2); transition: background .15s, border-color .15s;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--muted); transition: transform .18s var(--ease-out), background .15s;
}
.switch:checked { background: #4a1820; border-color: var(--red); }
.switch:checked::after { transform: translateX(22px); background: var(--red); }
.switch:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.audio-note { margin-top: 14px; color: var(--dim); font-size: 12px; line-height: 1.5; }

#soundBtn.muted { color: var(--red); }