/* how loud: the whole, the music, the voices, the sounds — each with its mute (volume.js) */
#volume { position: fixed; z-index: 50; width: 240px; box-sizing: border-box; padding: 10px 12px; display: grid; gap: 8px;
  border-radius: 10px; background: rgba(14, 17, 22, 0.94); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); color: rgba(236, 232, 224, 0.92); font: 14px/1.3 Georgia, "Times New Roman", serif; }
#volume[hidden] { display: none; }
#volume .row { display: grid; grid-template-columns: 26px 56px 1fr; align-items: center; gap: 6px; }
#volume .row.all { padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
#volume input { width: 100%; accent-color: #e8c98a; }
#volume .mute { width: 26px; height: 26px; padding: 3px; border: 0; border-radius: 6px; background: none; color: inherit; cursor: pointer; display: flex; }
#volume .mute:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); }
#volume .mute svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#volume .row.off span, #volume .row.off input { opacity: 0.45; }
#volume .row .mute .off, #volume .row.off .mute .on { display: none; }
#volume .row.off .mute .off { display: block; }
#volume :disabled { cursor: default; }