.sound-control{position:relative;display:inline-flex;align-items:center;flex-shrink:0}
#sound-button{display:grid;place-items:center;width:44px;height:44px;min-width:44px;padding:0;border:1px solid #81998b;border-radius:50%;background:#294b40;color:#f8f7ef;cursor:pointer}
#sound-button[aria-pressed="true"]{background:#d6f39c;color:#183d35;border-color:#d6f39c}
#sound-button svg{display:block;color:inherit;stroke:currentColor;opacity:1}
#sound-button:hover{filter:brightness(.96)}#sound-button:focus-visible{outline:3px solid #ed947c;outline-offset:4px}
.sound-volume{position:absolute;z-index:30;right:0;top:calc(100% + 10px);width:180px;padding:12px 16px;display:flex;align-items:center;gap:10px;border:1px solid #b3c3aa;border-radius:12px;background:#fffdf5;color:#183d35;box-shadow:0 6px 20px #102e2620;font:600 12px sans-serif}
.sound-volume[hidden]{display:none}.sound-volume input{width:100px;min-width:0;accent-color:#365b45;cursor:pointer;height:28px;margin:0}
@media(max-width:600px){.nav{gap:12px}.nav #progress-button{margin-left:auto}.nav .brand{font-size:24px}}

.sound-settings{display:grid;place-items:center;flex-shrink:0;width:28px;min-width:28px;height:44px;padding:0;border:0;border-radius:8px;background:transparent;color:#f8f7ef;cursor:pointer}
.sound-settings:hover,.sound-settings[aria-expanded="true"]{background:#ffffff18}.sound-settings:focus-visible{outline:3px solid #ed947c;outline-offset:2px}
@media(max-width:400px){.nav{gap:6px;padding-inline:10px}.nav .mark{margin-right:7px}.nav #progress-button{padding-inline:9px}.nav .brand{font-size:22px}}
@media(max-width:400px){.topbar{gap:4px;padding-inline:10px}.topbar .wordmark{font-size:22px}.topbar .brand{gap:6px}.topbar .arcade-mark{width:22px;height:22px}}
/* The home wordmark remains the collection link on narrow phones. */
@media(max-width:400px){.topbar .header-center{display:none}.topbar nav{margin-left:auto}}