/* Bunker Mode, DEEP RUN, THE SOUND KEY AND ITS PANEL (runner/audio.js): the kit's clean speaker (assets/bunker-ui.css --vg-snd,
   crossed out with --vg-snd-off while the sound is off) on a soft dark square, as the full screen key top right (the owner, Wed 21
   Oct, of those keys: "don't put fullscreen icon on those stupid panels", "same design as we just did on basement"): the icon in
   quiet grey on a 40 px square, amber under a mouse or a key, 44 px to press. Bottom left, 16 px from the corner (the owner:
   "maybe bottom left"), all the time on the game screen */
#sndKey{position:fixed;z-index:109;left:calc(16px + env(safe-area-inset-left));bottom:calc(16px + env(safe-area-inset-bottom));width:44px;height:44px;margin:0;padding:2px;
  display:flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:rgba(10,10,10,.72) content-box;color:#8b8b8b;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#sndKey:hover,#sndKey:focus-visible,#sndKey[aria-expanded="true"]{color:#ffb000;background-color:rgba(10,10,10,.86);outline:none}
#sndKey[hidden]{display:none}
#sndKey .snd,#sndMute .snd{display:block;width:24px;height:20px;background:currentColor;-webkit-mask:var(--vg-snd) center / 100% 100% no-repeat;mask:var(--vg-snd) center / 100% 100% no-repeat}
#sndKey.off .snd,#sndMute[aria-pressed="true"] .snd{-webkit-mask-image:var(--vg-snd-off);mask-image:var(--vg-snd-off)}
/* THE SOUND PANEL is the game's one panel (runner/runner.css .modal, the owner, Wed 21 Oct: "and we use that same modal size
   throughout game"): its box, frame, heading and keys in its own place; while it shows the panel it opened over steps aside (kept
   where it is, unseen, so it comes back exactly), so one panel shows at a time; it comes in with no pop of its own, its content
   fading in where it is, as the end panel's does. A press anywhere on it is its own. Inside: MUSIC and EFFECTS in quiet grey, the
   levels near white in the mono; each slider a 44 px tall hit area round a thin track (amber up to the level, yours) and a round
   thumb; DONE and the mute its keys */
#sndPop{z-index:111;pointer-events:auto;animation:none}
#sndPop > :not(.hd){animation:cin .22s ease-out 1}
@media (prefers-reduced-motion:reduce){#sndPop > :not(.hd){animation:none}}
html.snd-open .modal:not(#sndPop){visibility:hidden;opacity:0}   /* (opacity too: the stage picker's name is visible of its own) */
#sndPop .bd{gap:6px}
#sndPop .row{display:flex;align-items:center;gap:14px;width:min(100%,440px);height:44px}
#sndPop b{flex:none;width:66px;font:600 11px/1 var(--plain);color:#8b8b8b;letter-spacing:.16em;text-align:left}   /* (left, as ever: the panel centres its own words) */
#sndPop .n{flex:none;width:3ch;text-align:right;font:400 14px/1 var(--mono);font-variant-numeric:tabular-nums;color:#ececec}
#sndPop.muted .row{opacity:.4}
#sndPop input[type=range]{flex:1;min-width:0;height:44px;margin:0;padding:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;touch-action:none}
#sndPop input[type=range]:focus{outline:none}
#sndPop input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(#ffb000,#ffb000) 0 0 / var(--v,80%) 100% no-repeat,rgba(255,255,255,.14)}
#sndPop input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-7px;border:0;border-radius:50%;background:#ececec;box-shadow:0 1px 4px rgba(0,0,0,.5)}
#sndPop input[type=range]:hover::-webkit-slider-thumb{background:#fff}
#sndPop input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(255,176,0,.35)}
#sndPop input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:rgba(255,255,255,.14)}
#sndPop input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:#ffb000}
#sndPop input[type=range]::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:#ececec;box-shadow:0 1px 4px rgba(0,0,0,.5)}
#sndMute{gap:10px}
#sndMute[aria-pressed="true"]{color:#ffb000}
#sndMute .snd{width:20px;height:17px}
/* while the panel is open (the run paused) the thumbs' keys step aside, so it never sits over them */
html.snd-open #keys{visibility:hidden}