.sound-control {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  z-index: 2000;
  color: #35a3bb;
  color-scheme: light;
  isolation: isolate;
  transition: opacity 180ms ease, visibility 180ms ease;
}
body.story-active .sound-control,
body.story-diving .sound-control {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
body.story-active.profile-layer-open .sound-control,
body.story-diving.profile-layer-open .sound-control {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.sound-control[data-scene="cover"],
.sound-control[data-scene="rain"] {
  top: auto;
  right: auto;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(12px, env(safe-area-inset-bottom));
}
.sound-control[data-scene="rain"] {
  animation: soundSeaFloat 13.2s ease-in-out -2.4s infinite;
  transform-origin: 50% 70%;
}
.sound-control[data-scene="rain"]:has(.sound-volume:not([hidden])) { animation-play-state: paused; }
.sound-control[data-scene="cover"] .sound-volume,
.sound-control[data-scene="rain"] .sound-volume { left: calc(100% + 2px); right: auto; }
.sound-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  color: inherit;
  background: url("./assets/paper-back-button.png") center / 36px 36px no-repeat;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 180ms ease;
}
.sound-toggle:hover { transform: rotate(-4deg); }
.sound-toggle svg { width: 22px; height: 22px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-5deg); }
.sound-toggle__speaker { fill: rgb(53 163 187 / 8%); }
.sound-toggle__waves { stroke-width: 2.1; }
.sound-toggle[data-volume="0"] .sound-toggle__waves,
.sound-toggle:not([data-volume="0"]) .sound-toggle__slash { display: none; }
.sound-toggle:focus { outline: none; }
.sound-toggle:focus-visible svg { stroke-width: 3; }
.sound-volume {
  position: absolute;
  top: 50%;
  right: calc(100% + 2px);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  width: min(130px, calc(100vw - 74px));
  height: 38px;
  padding: 0 12px;
  background: url("./assets/source-layers/worry-paper.png") center / 100% 100% no-repeat;
}
.sound-volume[hidden] { display: none; }
.sound-volume input {
  width: 100%;
  height: 36px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: url("./assets/worrybin-cursor-round-v5.png") 2 2, pointer !important;
  accent-color: #35a3bb;
}
.sound-volume input::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 60% 40% 45% 55%;
  background: linear-gradient(to right, #35a3bb var(--volume-fill), #b6d5d9 var(--volume-fill));
}
.sound-volume input::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 12px;
  height: 13px;
  margin-top: -4px;
  border: 2px solid #35a3bb;
  border-radius: 46% 54% 50% 44%;
  background: #35a3bb;
}
.sound-volume input::-moz-range-track { height: 4px; background: #b6d5d9; border-radius: 50%; }
.sound-volume input::-moz-range-progress { height: 4px; background: #35a3bb; }
.sound-volume input::-moz-range-thumb { width: 9px; height: 10px; border: 2px solid #35a3bb; border-radius: 46% 54% 50% 44%; background: #35a3bb; }
.sound-volume input:focus { outline: none; }
.sound-volume input:focus-visible::-webkit-slider-thumb { border-color: #167f9c; }
.sound-volume input:focus-visible::-moz-range-thumb { border-color: #167f9c; }
@keyframes soundSeaFloat {
  0%, 100% { transform: translate(0, 0) rotate(-2deg); }
  36% { transform: translate(3px, -5px) rotate(2deg); }
  72% { transform: translate(-2px, -2px) rotate(-.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sound-toggle { transition: none; }
  .sound-control[data-scene="rain"] { animation: none; }
}