/* Provisional scenes drawn in code (replaced by src/art illustrations when present). Everything moves slowly. */
.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--night);
}
.scene > * {
  position: absolute;
  inset: 0;
}
.sceneImg {
  background: center / cover no-repeat;
  animation: drift 40s ease-in-out infinite alternate;
}
@keyframes drift {
  to {
    transform: scale(1.04) translate(-1%, -0.5%);
  }
}
.sky {
  background: radial-gradient(
    120% 70% at 70% 10%,
    #1d4a52 0%,
    #143a33 40%,
    #0c2a30 75%,
    #081c20 100%
  );
}
.stars {
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 40%, #e4f7d6 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 34% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 45% 28%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 58% 8%, #ffe9b0 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 36%, #fff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 79% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 44%, #e4f7d6 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 6% 52%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 9%, #fff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 50% 50%, #e4f7d6 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 60%, #fff 50%, transparent 51%);
  animation: twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle {
  from {
    opacity: 0.55;
  }
  to {
    opacity: 1;
  }
}
.moon {
  left: auto;
  right: 10%;
  top: 7%;
  width: min(26vw, 150px);
  height: min(26vw, 150px);
  inset: 7% 10% auto auto;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fffbe8 0%, #ffe9b0 45%, #f2c36a 100%);
  box-shadow:
    0 0 60px 18px #ffe9b04d,
    0 0 160px 60px #a8e6a022;
}
.scene-home .castle {
  top: auto;
  bottom: 0;
  height: 58%;
  width: 100%;
  overflow: visible;
}
.castle .far {
  fill: #0e2e2a;
}
.castle .near {
  fill: #0a221f;
}
.castle .water {
  fill: #0f3a3c;
}
.castle .willow {
  fill: none;
  stroke: #0c2622;
  stroke-width: 6;
  stroke-linecap: round;
}
.castle .willowLeaves {
  fill: #12382f;
}
.castle .shine {
  stroke: #5fd0e033;
  stroke-width: 2;
  stroke-linecap: round;
  animation: fog 9s ease-in-out infinite alternate;
}
.castle .pad {
  fill: #1f5a3a;
  stroke: #0c2a1c;
  stroke-width: 1.5;
}
.castle .reed {
  fill: none;
  stroke: #0f3326;
  stroke-width: 3;
  stroke-linecap: round;
}
.castle .cat {
  fill: #3a2a1c;
}
.castle .win {
  fill: #1a3a30;
  opacity: 0.5;
}
.castle .win.lit {
  fill: #fff3a6;
  opacity: 1;
  filter: drop-shadow(0 0 5px #ffe27a);
  animation: flicker 3.2s ease-in-out infinite;
  animation-delay: var(--d);
}
@keyframes flicker {
  0%,
  100% {
    opacity: 1;
  }
  47% {
    opacity: 0.55;
  }
  50% {
    opacity: 0.95;
  }
  72% {
    opacity: 0.7;
  }
}
.fog {
  top: auto;
  height: 40%;
  background:
    radial-gradient(60% 60% at 30% 100%, #a8e6a02e, transparent 70%),
    radial-gradient(50% 50% at 75% 100%, #3fe0d01f, transparent 70%);
  animation: fog 14s ease-in-out infinite alternate;
}
.fog.f2 {
  height: 28%;
  opacity: 0.7;
  animation-duration: 19s;
  animation-direction: alternate-reverse;
}
@keyframes fog {
  to {
    transform: translateX(6%);
  }
}
.flies i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff3a6;
  box-shadow: 0 0 8px 3px #ffe27a88;
  opacity: 0;
  animation: fly var(--s) ease-in-out infinite;
  animation-delay: var(--d);
}
@keyframes fly {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  20% {
    opacity: 0.9;
  }
  50% {
    transform: translate(24px, -30px);
    opacity: 0.5;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate(-10px, -60px);
  }
}
.vignette {
  background: radial-gradient(130% 90% at 50% 45%, transparent 55%, #020c0b99 100%);
}

/* ---------------------------------------------------------------- a wing's floor, seen from above */
.scene-world .floor {
  --base: #12423f;
  --ripple: #5fd0e014;
  background:
    radial-gradient(60% 50% at 50% 45%, #ffffff10, transparent 70%),
    repeating-radial-gradient(
      circle at 30% 40%,
      transparent 0 22px,
      var(--ripple) 22px 24px,
      transparent 24px 60px
    ),
    repeating-radial-gradient(
      circle at 75% 70%,
      transparent 0 30px,
      var(--ripple) 30px 32px,
      transparent 32px 80px
    ),
    radial-gradient(30% 25% at 20% 30%, #ffffff0a, transparent),
    radial-gradient(25% 30% at 80% 70%, #0000001f, transparent), var(--base);
}
.scene-world.w2 .floor {
  --base: #26403a;
  --mortar: #172a26;
  --tile: 58px;
  background:
    radial-gradient(60% 50% at 50% 45%, #cfe6ff12, transparent 70%),
    repeating-radial-gradient(
      circle at 60% 30%,
      transparent 0 14px,
      #cfe6ff12 14px 15px,
      transparent 15px 40px
    ),
    repeating-linear-gradient(0deg, var(--mortar) 0 3px, transparent 3px var(--tile)),
    repeating-linear-gradient(90deg, var(--mortar) 0 3px, transparent 3px calc(var(--tile) * 1.3)),
    var(--base);
}
.scene-world.w3 .floor {
  --base: #123e4a;
  --ripple: #ffc27a14;
}
.scene-world.w4 .floor {
  --base: #2a3a26;
  --ripple: #b6e86a0d;
}
.scene-world.w5 .floor {
  --base: #1a2a3e;
  --ripple: #7fc8e012;
}
.scene-world.w6 .floor {
  --base: #1f5450;
  --ripple: #ffd2a018;
  background:
    radial-gradient(
      circle at 50% 48%,
      transparent 30%,
      #ffc65a22 30.4%,
      transparent 31%,
      transparent 42%,
      #ffc65a1a 42.3%,
      transparent 43%
    ),
    radial-gradient(60% 50% at 50% 45%, #ff9cc01a, transparent 70%), var(--base);
}
.scene-world .glow {
  background: radial-gradient(40% 30% at 50% 50%, #a8e6a01c, transparent 70%);
  animation: twinkle 4s ease-in-out infinite alternate;
}
.scene-world.w3 .glow {
  background: radial-gradient(40% 30% at 50% 50%, #ffc27a1a, transparent 70%);
}
.scene-world.w4 .glow {
  background: radial-gradient(40% 30% at 50% 50%, #7dff9a1a, transparent 70%);
}
.scene .prop {
  width: clamp(46px, 9vmin, 84px);
  height: auto;
  inset: auto;
  filter: drop-shadow(0 6px 6px #00000066);
}
.prop.tl {
  left: 3%;
  top: calc(var(--sat) + 8%);
}
.prop.tr {
  right: 3%;
  top: calc(var(--sat) + 8%);
}
.prop.bl {
  left: 3%;
  bottom: 4%;
}
.prop.br {
  right: 3%;
  bottom: 4%;
}
.prop .flame {
  animation: flame 1.3s ease-in-out infinite alternate;
  transform-origin: 50% 100%;
  transform-box: fill-box;
}
@keyframes flame {
  0% {
    transform: scale(1, 1);
    opacity: 0.9;
  }
  50% {
    transform: scale(0.88, 1.12) skewX(4deg);
  }
  100% {
    transform: scale(1.06, 0.94) skewX(-4deg);
    opacity: 1;
  }
}
.prop .hand {
  animation: tick 12s steps(12) infinite;
  transform-origin: 20px 22px;
}
@keyframes tick {
  to {
    transform: rotate(360deg);
  }
}
.scene-world .vignette {
  background: radial-gradient(90% 75% at 50% 50%, transparent 45%, #020c0b99 100%);
}
.scene-map .sky {
  background: linear-gradient(#081c20, #143a33 60%, #164238);
}
.scene-shop .sky {
  background: radial-gradient(70% 50% at 50% 35%, #2f8a5a 0%, #164238 55%, #0b2224 100%);
}
.scene-shop .moon {
  display: none;
}

.scene-map .sceneImg {
  filter: blur(9px) brightness(0.45);
  transform: scale(1.06);
  animation: none;
}
.scene-shop .vignette {
  background: radial-gradient(100% 90% at 38% 45%, transparent 30%, #05140d88);
}
.scene-world .sceneImg {
  animation: none;
}
/* End of src/styles/scene.css */

/* End of dist-static/assets/scene-txaa6mA4.css */