/* The sound control (src/sound.js), shared by Draconia, the hatchery and the
   Poola creator; each page puts #sound at its bottom left. PerzKit's flat kit:
   one floating control box (the surface fill and the control border), 40 px
   tall like every control, with the toggle and the volume caret inside it. */
.sound { position: relative; display: inline-flex; align-items: center; height: var(--perz-control-height); border-radius: var(--perz-radius-control); background: var(--perz-surface); border: 1px solid var(--perz-control-border); }
.sound button { all: unset; position: relative; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; height: 100%; color: var(--perz-text); border-radius: calc(var(--perz-radius-control) - 1px); }
.sound button:focus-visible { outline: var(--perz-control-focus-width) solid var(--perz-focus); outline-offset: var(--perz-control-focus-offset); }
/* 38 px inside the 1 px border, with the 44 px touch target */
.sound .sound-toggle { width: 38px; }
.sound .sound-toggle::after { content: ''; position: absolute; inset: -3px; }
.sound .sound-toggle.muted { color: var(--perz-text-secondary); }
.sound .sound-more { width: 24px; color: var(--perz-text-secondary); border-left: 1px solid var(--perz-border-strong); border-radius: 0 calc(var(--perz-radius-control) - 1px) calc(var(--perz-radius-control) - 1px) 0; }
.sound .sound-more::after { content: ''; position: absolute; inset: -3px -6px -3px 0; }
@media (hover: hover) and (pointer: fine) { .sound button:hover { background: var(--perz-hover-overlay); } }
.sound svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sound .sound-more svg { width: 14px; height: 14px; }
.sound-pop { position: absolute; left: 0; bottom: calc(100% + 10px); padding: 12px 16px; width: 200px; }
.sound-pop[hidden] { display: none; }
.sound-pop label { display: grid; gap: 6px; font-size: var(--perz-type-metadata); }
.sound-pop input { width: 100%; accent-color: var(--perz-blue-face); }