:root {
  color-scheme: dark;
  background: #05080a;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #05080a;
}

body {
  position: relative;
  isolation: isolate;
  touch-action: manipulation;
}

.atmosphere,
#downpour,
#rain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

.atmosphere {
  z-index: -2;
  overflow: hidden;
  background:
    radial-gradient(circle at 68% 31%, rgba(145, 174, 180, 0.2), transparent 34%),
    radial-gradient(circle at 17% 68%, rgba(46, 91, 108, 0.3), transparent 39%),
    linear-gradient(161deg, #101a1f 0%, #21343d 42%, #071015 100%);
}

.haze {
  position: absolute;
  width: 62vmax;
  height: 62vmax;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.24;
  animation: drift 24s ease-in-out infinite alternate;
}

.haze-a {
  top: -30vmax;
  left: 28vw;
  background: #4d6c78;
}

.haze-b {
  right: 38vw;
  bottom: -38vmax;
  background: #183946;
  animation-delay: -11s;
  animation-duration: 31s;
}

.glass {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(205, 224, 228, 0.045) 0%, transparent 39%, rgba(1, 8, 12, 0.16) 74%),
    linear-gradient(104deg, transparent 0 48%, rgba(194, 225, 233, 0.035) 49%, transparent 52%),
    radial-gradient(ellipse at center, transparent 18%, rgba(0, 0, 0, 0.43) 100%);
  box-shadow: inset 0 0 15vmin rgba(0, 0, 0, 0.58);
}

#downpour {
  z-index: 0;
  display: block;
  opacity: 0.88;
  filter: blur(0.7px);
}

#rain {
  z-index: 1;
  display: block;
}

.sound-control {
  position: fixed;
  z-index: 2;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid rgba(216, 237, 241, 0.28);
  border-radius: 50%;
  outline: none;
  background: rgba(216, 237, 241, 0.04);
  box-shadow: 0 0 18px rgba(146, 201, 214, 0.06);
  opacity: 0.28;
  cursor: pointer;
  transition: opacity 500ms ease, background 500ms ease, box-shadow 500ms ease;
}

.sound-control:hover,
.sound-control:focus-visible,
.sound-on .sound-control {
  opacity: 0.72;
  background: rgba(192, 225, 233, 0.2);
  box-shadow: 0 0 22px rgba(146, 201, 214, 0.2);
}

@keyframes drift {
  from {
    transform: translate3d(-4vw, -2vh, 0) scale(0.96);
  }
  to {
    transform: translate3d(5vw, 4vh, 0) scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .haze {
    animation: none;
  }
}