/* Wspolna, statyczna tekstura tylko dla nowego UI. */
html.mm-ui-nowe {
  --tlo-baza: var(--mm-tlo-09090e);
  --tlo-fasety: linear-gradient(118deg, transparent 0 34%, var(--mm-tlo-rgba-150-150-172-06) 34% 41%, transparent 41%),
    linear-gradient(64deg, transparent 0 58%, var(--mm-tlo-rgba-150-150-172-045) 58% 66%, transparent 66%),
    linear-gradient(152deg, transparent 0 72%, var(--mm-tlo-rgba-150-150-172-035) 72% 81%, transparent 81%);
  --tlo-poswiaty: radial-gradient(60% 55% at 12% 8%, var(--mm-tlo-rgba-69-66-180-30), transparent 70%),
    radial-gradient(50% 45% at 92% 14%, var(--mm-tlo-rgba-26-89-182-20), transparent 70%),
    radial-gradient(55% 50% at 86% 96%, var(--mm-tlo-rgba-193-71-138-16), transparent 70%);
  --tlo-ziarno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath d='M0 0h160v160H0z' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  --bg: var(--mm-tlo-09090e);
  --bg2: var(--mm-tlo-0f0e17);
}

html.mm-ui-nowe body {
  background: var(--tlo-baza);
  /* Wlasny kontekst uklada ::before nad tlem body i pod jego zawartoscia. */
  isolation: isolate;
}

html.mm-ui-nowe body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--tlo-ziarno), var(--tlo-fasety), var(--tlo-poswiaty), var(--tlo-baza);
}

html.mm-ui-nowe .hero { background: var(--mm-tlo-rgba-12-11-20-55); }

html.mm-ui-nowe #mm-dock .dk-okno:not([data-app="rozmowy"]),
html.mm-ui-nowe #mm-dock .dk-mobil-okno {
  background: var(--tlo-poswiaty), var(--tlo-baza);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: var(--mm-ramka-rgba-255-255-255-12);
  border-radius: 26px;
  box-shadow: 0 40px 100px var(--mm-cien-rgba-0-0-0-55), inset 0 1px 0 var(--mm-cien-rgba-255-255-255-14);
  /* Okno jest korzeniem tla dla szkla kart: bez tego ich blur probkuje cala strone pod oknem,
     razem z animowana kula WebGL (pomiar 31.10: 1-3 klatki 33-83 ms przy wejsciu okna). */
  opacity: .999;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  html.mm-ui-nowe #mm-dock .dk-okno:not([data-app="rozmowy"]),
  html.mm-ui-nowe #mm-dock .dk-mobil-okno {
    background: var(--tlo-poswiaty), var(--tlo-baza);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

html.mm-ui-nowe body.dk-mobil-aktywny { background: var(--tlo-baza); }

@media (prefers-reduced-transparency: reduce) {
  html.mm-ui-nowe body,
  html.mm-ui-nowe body::before,
  html.mm-ui-nowe .hero,
  html.mm-ui-nowe #mm-dock .dk-okno:not([data-app="rozmowy"]),
  html.mm-ui-nowe #mm-dock .dk-mobil-okno,
  html.mm-ui-nowe body.dk-mobil-aktywny {
    background: var(--tlo-baza);
  }
}

/* Zdjecie wybiera tylko klasa i nazwa z bialej listy sesji. */
html.mm-ui-nowe body:is(html.mm-tlo-zdjecie[data-tlo="tkanina"] > body)::before {
  background: var(--tlo-ziarno), var(--tlo-poswiaty), url(/assets/tlo/tlo-tkanina-1280.webp) center/cover, var(--tlo-baza);
}
@media (min-width: 1400px) {
  html.mm-ui-nowe body:is(html.mm-tlo-zdjecie[data-tlo="tkanina"] > body)::before {
    background: var(--tlo-ziarno), var(--tlo-poswiaty), url(/assets/tlo/tlo-tkanina-1920.webp) center/cover, var(--tlo-baza);
  }
}
html.mm-ui-nowe body:is(html.mm-tlo-zdjecie[data-tlo="wrzosowisko"] > body)::before {
  background: var(--tlo-ziarno), var(--tlo-poswiaty), url(/assets/tlo/tlo-wrzosowisko-1280.webp) center/cover, var(--tlo-baza);
}
@media (min-width: 1400px) {
  html.mm-ui-nowe body:is(html.mm-tlo-zdjecie[data-tlo="wrzosowisko"] > body)::before {
    background: var(--tlo-ziarno), var(--tlo-poswiaty), url(/assets/tlo/tlo-wrzosowisko-1920.webp) center/cover, var(--tlo-baza);
  }
}
html.mm-ui-nowe body:is(html.mm-tlo-zdjecie[data-tlo="jesien"] > body)::before {
  background: var(--tlo-ziarno), var(--tlo-poswiaty), url(/assets/tlo/tlo-jesien-1280.webp) center/cover, var(--tlo-baza);
}
@media (min-width: 1400px) {
  html.mm-ui-nowe body:is(html.mm-tlo-zdjecie[data-tlo="jesien"] > body)::before {
    background: var(--tlo-ziarno), var(--tlo-poswiaty), url(/assets/tlo/tlo-jesien-1920.webp) center/cover, var(--tlo-baza);
  }
}
@media (prefers-reduced-transparency: reduce) {
  html.mm-ui-nowe body:is(html.mm-tlo-zdjecie > body)::before { background: var(--tlo-baza); }
}