#world {
  position: fixed;
  left: 20vw;
  top: 12vh;
  border-radius: 30px;
  z-index: 201;
  overflow: auto;
  padding: 10px;
  inset: 10vh 10vw 20vh 10vw;
  background: linear-gradient(45deg, rgba(46, 234, 121, 0.677), rgba(1, 1, 1, 0));
  filter: blur(15px);
  color: white;
  font-family: monospace;
  border: calc(var(--gate) * 1px) solid hsl(var(--h) 90% 55%);
  border-radius: calc(8px + var(--depth) * 4px);
  box-shadow: 0 10px calc(10px + var(--depth) * 4px) hsl(var(--h) 70% 40% / 0.45);

  animation: sag-pulse calc(1.5s + (4s * (1 - var(--reveal)))) ease-in-out infinite alternate;
  transform-origin: 50% 55%;
  padding: 1rem 1.25rem;
  transition: filter .3s ease, transform .3s ease, background-position .6s ease;
  background-size: 200% 200%;
}

#world button, #world a,
#world [data-clickable] {
  pointer-events: auto;
}

#world h1 {
  position: fixed;
  font-size: 0.95rem;
  top: 10px;
  right: 0;
  background-color: rgb(255, 0, 123);
  color: #0ff;
  font-weight: 300;
  padding: 5px 10px;
  letter-spacing: 1px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

#world:empty {
  background: none;
  box-shadow: none;
  filter: none;
}

#world[data-sag-wind="1"] {
  animation-name: sag-pulse, sag-sway;
  animation-duration: calc(1.5s + (4s * (1 - var(--reveal)))), calc(6s - 2s * var(--spawn));
  animation-timing-function: ease-in-out, linear;
  animation-iteration-count: infinite;
  background-position: 0% 0%;
}

#world[data-sag-day="1"] {
  filter: brightness(1.1) saturate(1.15);
}
#world[data-sag-day="0"] {
  filter: brightness(0.85) saturate(1.0);
}

#world[data-sag-facet="0"] { backdrop-filter: none; }
#world[data-sag-facet="3"] { backdrop-filter: contrast(1.1) }
#world[data-sag-facet="6"] { backdrop-filter: contrast(1.2) blur(1px) }

#motifs {
  display: flex;
  flex-wrap: wrap;
  margin-top: 50px;
  justify-content: center;
  background: transparent;
}

#motifs span {
  text-transform: uppercase;
  width: 90px;
  margin-right: 5px;
  margin-bottom: 3px;
  font-size: 0.9rem;
  display: block;
  padding: 8px;
  border-radius: 3px;
  font-style: italic;
  color: #fff;
  text-shadow: rgba(1, 1, 1, 0.5) 1px 1px 5px;
  border-bottom-left-radius: 20px;
  border-top-left-radius: 20px;
  text-indent: 5px;
  box-shadow: rgba(29, 15, 238, 0.4) 2px 2px 2px;
  background: linear-gradient(90deg, rgba(11, 179, 226, 0.85) 60%, rgba(243, 85, 28, 0.4));
}

#knobs {
  list-style-type: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

#knobs li {
  filter: saturate(3.5);
  background: radial-gradient(circle at 80% 30%, rgba(32, 255, 188, 0.9) 0%, rgba(39, 32, 255, 0.3) 100%);
  box-shadow: rgba(32, 255, 188, 0.58) -13px -2px 2px;
  margin: 2px;
  padding: 30px 2px 20px 2px;
  border-radius: 100%;
  width: 90px;
  height: 40px;
  text-align: center;
  font-size: 0.98rem;
  line-height: 1.1rem;
  font-weight: bold;
  color: #2c342e;
  display: inline-block;
  transform-origin: 50% 50%;
  will-change: transform;
  --amp: 7deg;
  --dur: 4s;
  --delay: 0s;
  animation: wobble var(--dur) ease-in-out var(--delay) infinite alternate;
}

@keyframes wobble {
  0% { transform: rotate(calc(-1 * var(--amp))); }
  100% { transform: rotate(var(--amp)); }
}

#knobs li:nth-child(4n+1){ --amp: 30deg; --dur: 1.3s; --delay: -0.2s; }
#knobs li:nth-child(4n+2){ --amp: 50deg; --dur: 5.1s; --delay: -0.8s; }
#knobs li:nth-child(4n+3){ --amp: 70deg; --dur: 2.4s; --delay: -2.1s; }
#knobs li:nth-child(4n+4){ --amp: 11deg; --dur: 6.2s; --delay: -0.5s; }

@media (prefers-reduced-motion: reduce) {
  #knobs li { animation: none; }
}

@keyframes sag-pulse {
  from { transform: scale(1); }
  to   { transform: scale(calc(1 + var(--spawn) * 0.14)); }
}

@keyframes sag-sway {
  0%   { transform: translateX(-2px) rotate(-0.4deg) scale(calc(1 + var(--spawn) * 0.14)); background-position: 0% 0%; }
  50%  { transform: translateX( 2px) rotate( 0.4deg) scale(calc(1 + var(--spawn) * 0.14)); background-position: 100% 100%; }
  100% { transform: translateX(-2px) rotate(-0.4deg) scale(calc(1 + var(--spawn) * 0.14)); background-position: 0% 0%; }
}

#home {
  position: fixed;
  left: 10px;
  z-index: 1000;
  font-size: 1.2rem;
  color: #555;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px;
  border-radius: 5px;
  text-decoration: none;
  width: auto;
  top: 10px;
}

#home:hover {
  background-color: rgba(239, 8, 77, 0.8);
  color: #f0f;
}

#garden-lnk, #river-lnk, #mountain-lnk {
  position: fixed;
  z-index: 300;
  display: inline-block;
  width: 20px;
  height: 22px;
  padding: 5px 10px;
  border-radius: 3px;
  text-align: center;
  background-color: rgba(213, 39, 132, 0.5);
  top: 10px;
  left: 82px;
  text-decoration: none;
}

#garden-lnk:active, #river-lnk:active, #mountain-lnk:active,
#garden-lnk:hover, #river-lnk:hover, #mountain-lnk:hover {
  filter: saturate(3);
}

#garden-lnk:hover {
  background-color: rgba(255, 84, 255, 0.5);
}

#river-lnk {
  left: 125px;
  background-color: rgba(39, 178, 213, 0.5);
}

#river-lnk:hover {
  background-color: rgba(39, 213, 178, 0.5);
}

#mountain-lnk {
  left: 168px;
  background-color: rgba(213, 126, 39, 0.5);
}

#mountain-lnk:hover {
  background-color: rgba(213, 39, 39, 0.5);
}