.scene {
  position: absolute;
  inset: 0;
  z-index: var(--layer-scenery);
}
.scene-sky-night,
.scene.night .scene-sky-day {
  display: none;
}
.scene.night .scene-sky-night {
  display: block;
}
.scene.games,
.scene.chat {
  background: var(--place-surface);
}
.scene.games > *,
.scene.chat > * {
  display: none;
}
.sun {
  position: absolute;
  right: 30px;
  top: 168px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff5a4a, #b10e24 60%, #6e0717);
  box-shadow:
    0 0 0 12px rgba(224, 36, 58, 0.14),
    0 0 60px rgba(224, 36, 58, 0.55);
  transition: 0.8s;
}
.scene.night .sun {
  background: #e9e2cf;
  box-shadow:
    inset -14px -6px 0 #8f8672,
    0 0 50px rgba(233, 226, 207, 0.35);
}
.cloud {
  position: absolute;
  left: 0;
  right: 0;
  top: 130px;
  height: 130px;
}
.isle {
  position: absolute;
  left: 50%;
  bottom: calc(150px + var(--sab));
  width: 340px;
  height: 96px;
  margin-left: -170px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, var(--grass) 0 55%, var(--grass2) 56% 100%);
}
.scene.night .isle {
  filter: brightness(0.6);
}
.stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.stars i {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: tw 3s ease-in-out infinite;
}