/* Кнопка звука: постоянная, маленькая, в правом верхнем углу — на сайте и в игре */
.sound-toggle { position: fixed; top: 10px; right: 10px; z-index: 70; width: 38px; height: 38px; display: grid; place-items: center; padding: 0;
  border-radius: 50%; border: 1px solid rgba(216,179,106,.45); background: rgba(14,10,7,.62); color: #ecc982; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .15s, border-color .15s, opacity .15s; opacity: .85; }
.sound-toggle:hover, .sound-toggle:focus-visible { opacity: 1; background: rgba(30,21,13,.85); border-color: #ecc982; outline: none; }
.sound-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sound-toggle .spk { fill: currentColor; stroke: none; }
.sound-toggle .cross { display: none; }
.sound-toggle.off { color: #a89a83; }
.sound-toggle.off .wave { display: none; }
.sound-toggle.off .cross { display: inline; }
/* место под кнопку в верхних панелях */
body:has(#sound-toggle) > .topbar { padding-right: 104px; }
@media (max-width: 820px) { .sound-toggle { width: 34px; height: 34px; top: 8px; right: 8px; } .sound-toggle svg { width: 18px; height: 18px; } }

/* Кнопка громкости рядом с кнопкой звука и выпадающая панель */
.sound-mix { position: fixed; top: 10px; right: 56px; z-index: 70; width: 38px; height: 38px; display: grid; place-items: center; padding: 0;
  border-radius: 50%; border: 1px solid rgba(216,179,106,.45); background: rgba(14,10,7,.62); color: #ecc982; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: .85; transition: background .15s, border-color .15s, opacity .15s; }
.sound-mix:hover, .sound-mix:focus-visible, .sound-mix[aria-expanded="true"] { opacity: 1; background: rgba(30,21,13,.85); border-color: #ecc982; outline: none; }
.sound-mix svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sound-mix circle { fill: #1a120b; }
.sound-panel { position: fixed; top: 56px; right: 10px; z-index: 71; width: 260px; padding: 14px 16px 12px; border-radius: 12px;
  border: 1px solid rgba(216,179,106,.45); background: rgba(16,11,7,.94); color: #efe4cf; box-shadow: 0 12px 34px rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 14px; }
.sound-panel[hidden] { display: none; }
.snd-title { font-weight: 600; letter-spacing: .04em; color: #ecc982; margin-bottom: 8px; }
.snd-row { display: grid; grid-template-columns: 1fr auto; row-gap: 4px; margin: 0 0 10px; cursor: pointer; }
.snd-row output { color: #c9b48d; font-variant-numeric: tabular-nums; }
.snd-row input { grid-column: 1 / -1; width: 100%; accent-color: #d8b36a; margin: 0; }
.snd-mute { width: 100%; margin-top: 2px; padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(216,179,106,.35); background: rgba(255,255,255,.04); color: #efe4cf; font: inherit; cursor: pointer; }
.snd-mute:hover { border-color: #ecc982; }
@media (max-width: 820px) { .sound-mix { width: 34px; height: 34px; top: 8px; right: 48px; } .sound-mix svg { width: 17px; height: 17px; } .sound-panel { top: 50px; right: 8px; } }