/* Vuorokausi- ja vuodenaikarytmi – yhteinen tekniikka, jokainen maailma säätää omat sävynsä muuttujilla.
   Yö = syvä sininen + tähdet (lepo). Hämärä on eri asia: harmaa usva, piirretään vain X-Universumin kartalle. */
#rytmi-taivas{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
#rytmi-taivas>div{position:absolute;inset:0;transition:opacity 2s,background 2s}
.rytmi-savy{background:transparent}
.rytmi-aamu .rytmi-savy{background:var(--rytmi-aamu,linear-gradient(180deg,rgba(255,170,110,.20),rgba(255,214,150,.06) 45%,transparent 75%))}
.rytmi-paiva .rytmi-savy{background:var(--rytmi-paiva,linear-gradient(180deg,rgba(255,255,255,.07),transparent 60%))}
.rytmi-ilta .rytmi-savy{background:var(--rytmi-ilta,linear-gradient(180deg,rgba(120,60,140,.22),rgba(255,120,60,.10) 60%,rgba(40,20,60,.18)))}
.rytmi-yo .rytmi-savy{background:var(--rytmi-yo,radial-gradient(ellipse at 50% 30%,rgba(12,30,80,.30),rgba(4,10,35,.55)))}
.kausi-kesa.rytmi-yo .rytmi-savy{background:var(--rytmi-yo-kesa,linear-gradient(180deg,rgba(60,90,170,.28),rgba(255,190,140,.08)))}

.rytmi-tahdet{opacity:0;background-image:
  radial-gradient(1.4px 1.4px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 27% 42%,#dfe9ff,transparent),
  radial-gradient(1.6px 1.6px at 41% 12%,#fff,transparent),radial-gradient(1px 1px at 58% 33%,#cfe0ff,transparent),
  radial-gradient(1.3px 1.3px at 73% 9%,#fff,transparent),radial-gradient(1px 1px at 86% 27%,#e8f0ff,transparent),
  radial-gradient(1.2px 1.2px at 9% 66%,#fff,transparent),radial-gradient(1px 1px at 33% 81%,#dfe9ff,transparent),
  radial-gradient(1.5px 1.5px at 64% 71%,#fff,transparent),radial-gradient(1px 1px at 91% 58%,#cfe0ff,transparent);
  animation:rytmi-tuike 5s ease-in-out infinite alternate}
.rytmi-yo .rytmi-tahdet{opacity:.9}
.kausi-kesa.rytmi-yo .rytmi-tahdet{opacity:.35}
@keyframes rytmi-tuike{from{filter:brightness(.7)}to{filter:brightness(1.3)}}

.rytmi-lumi{opacity:0;background-image:
  radial-gradient(2px 2px at 10% 10%,#fff,transparent),radial-gradient(2.5px 2.5px at 30% 40%,#fff,transparent),
  radial-gradient(1.8px 1.8px at 50% 20%,#fff,transparent),radial-gradient(2.2px 2.2px at 70% 60%,#fff,transparent),
  radial-gradient(2px 2px at 90% 30%,#fff,transparent),radial-gradient(1.6px 1.6px at 20% 80%,#fff,transparent),
  radial-gradient(2.4px 2.4px at 60% 90%,#fff,transparent),radial-gradient(1.8px 1.8px at 80% 85%,#fff,transparent);
  background-size:320px 320px;animation:rytmi-sataa 14s linear infinite}
.rytmi-lumi.kerros2{background-size:220px 220px;animation-duration:9s;filter:blur(.6px)}
.kausi-talvi .rytmi-lumi{opacity:.55}
@keyframes rytmi-sataa{from{background-position:0 0}to{background-position:40px 320px}}
@media (prefers-reduced-motion:reduce){.rytmi-lumi,.rytmi-tahdet{animation:none}}

.rytmi-siru{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:12px;white-space:nowrap;
  border:1px solid rgba(255,255,255,.18);background:rgba(10,16,40,.7);color:#e8ecf7;cursor:help}
.rytmi-siru[data-vaihe="yo"]{background:rgba(10,24,70,.85);border-color:rgba(140,170,255,.35)}
@media (max-width:720px){.rytmi-siru{display:none}}