/* 墨契 · 设置面板「音量」区（配合 js/audio.js 的四路音量）
 * 主要尺寸/滑块外观在 css/style.css 的 #modal-settings 段；这里只补它没覆盖的部分：
 * 标签排版、键盘/触屏焦点态、窄屏单列、禁用态。 */

#modal-settings .vol-name {
  font-size: 18px; letter-spacing: 2px; color: #2a1d13;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 触屏拖动时给滑杆更大的命中区，并让当前值更醒目 */
#modal-settings .vol-row:active .vol-val,
#modal-settings .vol-row:focus-within .vol-val { color: #9c3126; }
#modal-settings .vol:focus { outline: none; }
#modal-settings .vol:focus-visible { outline: 2px solid rgba(201, 162, 74, 0.75); outline-offset: 4px; border-radius: 6px; }

/* 键盘与读屏：值随时可读，不加自定义控件语义（原生 range 已够） */
#modal-settings .vol-val { min-width: 52px; }

/* 窄屏（手机竖屏）：设置面板改单列，避免滑杆被挤成几像素 */
@media (max-width: 760px) {
  #modal-settings .modal-card { width: 94%; height: 92%; max-height: 92%; padding: 18px 20px 16px; }
  #modal-settings .set-body { grid-template-columns: 1fr; gap: 0 0; }
  #modal-settings .vol-row { grid-template-columns: 96px minmax(0, 1fr) 52px; gap: 10px; font-size: 17px; }
  #modal-settings .vol-name { font-size: 16px; letter-spacing: 1px; }
}

/* 静音时滑杆仍可调（改的是音量值，不是开关），只做视觉降级 */
#modal-settings .vol:disabled { opacity: 0.45; }