/* Mute button + volume slider rendered by sfx.js into [data-sfx-control].
   Colours default to the warm brown used across the games; a page can retune
   them through the --sfx-* custom properties. */
.sfx-control { display: inline-flex; align-items: center; gap: 10px; }
.sfx-mute {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--sfx-border, #b18a4f);
  border-radius: 5px;
  background: var(--sfx-bg, #4a3825);
  color: var(--sfx-ink, #ffe9bf);
  box-shadow: inset 0 1px 0 #ffffff0a, 0 2px 0 #19140f;
  cursor: pointer;
}
.sfx-mute:hover { background: var(--sfx-bg-hover, #5a432a); border-color: var(--sfx-border-hover, #edbd68); color: #fff0cd; }
.sfx-mute:focus-visible { outline: 2px solid var(--sfx-focus, #e8bd70); outline-offset: 2px; }
.sfx-mute[aria-pressed="true"] { color: var(--sfx-ink-off, #c5ad8b); }
.sfx-mute svg { display: block; }
.sfx-slider { width: 92px; margin: 0; accent-color: var(--sfx-accent, #e8bd70); cursor: pointer; }
.sfx-slider:focus-visible { outline: 2px solid var(--sfx-focus, #e8bd70); outline-offset: 4px; }
/* Phones have hardware volume keys; the button alone is enough there. */
@media (max-width: 720px) {
  .sfx-slider { display: none; }
}