/* Фоны независимы от темы: тема задаёт палитру и типографику, а
   data-background — сцену. Фон, совпадающий с темой, оставляет исходные
   эффекты темы; другой — заменяет сцену. Новый фон добавляется в
   backgroundNames (app.js) и одним блоком ниже. */

html[data-background-override="true"] body::after {
  background-color: var(--hub-background-color) !important;
  background-image: var(--hub-background-image) !important;
  background-position: var(--hub-background-position, center) !important;
  background-repeat: var(--hub-background-repeat, no-repeat) !important;
  background-size: var(--hub-background-size, cover) !important;
  content: "" !important;
  inset: 0;
  mask-image: none !important;
  opacity: 1 !important;
}

/* Атмосферный блик относится к выбранной теме, но с чужой сценой конфликтует.
   Погода Rain/Storm выбирается app.js по data-background. */
html[data-background-override="true"] body::before { content: none !important; }

html[data-background-override="true"][data-background="orbit"] { --orbit-image: url("/orbit-earth.png"); --hub-background-color: #06090f; --hub-background-image: repeating-radial-gradient(circle at 50% -32%, transparent 0 15.4rem, rgba(126, 178, 240, .055) 15.4rem 15.55rem, transparent 15.55rem 16rem), radial-gradient(circle at 50% -32%, transparent 0 46rem, rgba(126, 178, 240, .05) 46rem 46.14rem, transparent 46.14rem), var(--orbit-image); --hub-background-position: center, center, 62% 42%; }
html[data-background-override="true"][data-background="nebula"] { --nebula-image: url("/nebula-veil.png"); --hub-background-color: #0b0616; --hub-background-image: radial-gradient(46% 34% at 78% 26%, rgba(120, 92, 255, .12), transparent 72%), var(--nebula-image); --hub-background-position: center, 60% 46%; }
html[data-background-override="true"][data-background="pulsar"] { --pulsar-image: url("/pulsar-beams.png"); --hub-background-color: #03151a; --hub-background-image: repeating-linear-gradient(0deg, rgba(60, 230, 212, .03) 0 1px, transparent 1px 4px), linear-gradient(180deg, rgba(2, 12, 16, 0) 44%, rgba(2, 10, 14, .4)), var(--pulsar-image); --hub-background-position: center, center, 50% 46%; --hub-background-repeat: repeat, no-repeat, no-repeat; --hub-background-size: auto, cover, cover; }
html[data-background-override="true"][data-background="gothic"] { --gothic-image: url("/gothic-concrete.png"); --hub-background-color: #070604; --hub-background-image: linear-gradient(90deg, rgba(4, 4, 3, .18), transparent 34% 70%, rgba(4, 2, 1, .06)), linear-gradient(180deg, rgba(3, 3, 2, .04) 48%, rgba(3, 2, 1, .5)), radial-gradient(120% 94% at 50% 44%, transparent 38%, rgba(0, 0, 0, .42) 100%), var(--gothic-image); --hub-background-position: center, center, center, 50% 50%; }
html[data-background-override="true"][data-background="blackhole"] { --bh-image: url("/blackhole-blue.png"); --hub-background-color: #000; --hub-background-image: var(--bh-image); --hub-background-position: 50% 42%; }
html[data-background-override="true"][data-background="taiga"] { --forest-image: url("/rainforest-night.png"); --hub-background-color: #060a0d; --hub-background-image: linear-gradient(90deg, rgba(4, 8, 10, .34), rgba(4, 8, 10, .04) 68%), linear-gradient(180deg, rgba(4, 8, 10, 0) 46%, rgba(3, 6, 8, .34)), var(--forest-image); --hub-background-position: center, center, 68% 36%; }
html[data-background-override="true"][data-background="metropolis"] { --metropolis-image: url("/metropolis-night.png"); --hub-background-color: #050b12; --hub-background-image: linear-gradient(90deg, rgba(2, 7, 12, .5), rgba(2, 7, 12, .08) 62%), linear-gradient(180deg, rgba(3, 8, 14, .04) 48%, rgba(2, 6, 10, .42)), var(--metropolis-image); --hub-background-position: center, center, 62% 50%; }
html[data-background-override="true"][data-background="stormglass"] { --stormglass-image: url("/storm-sea.png"); --hub-background-color: #05090f; --hub-background-image: linear-gradient(90deg, rgba(3, 7, 12, .45), rgba(3, 7, 12, .06) 52%), linear-gradient(180deg, rgba(3, 8, 14, .04) 46%, rgba(2, 6, 10, .3)), var(--stormglass-image); --hub-background-position: center, center, 62% 50%; }
html[data-background-override="true"][data-background="magma"] { --magma-image: url("/magma-crust.png"); --hub-background-color: #0a0605; --hub-background-image: linear-gradient(180deg, rgba(8, 4, 3, 0) 62%, rgba(8, 4, 3, .55)), linear-gradient(90deg, rgba(8, 4, 3, 0) 34%, rgba(8, 4, 3, .46)), var(--magma-image); --hub-background-position: center, center, 58% 50%; }
html[data-background-override="true"][data-background="meadow"] { --meadow-image: url("/meadow-sun.png"); --hub-background-color: #070d08; --hub-background-image: linear-gradient(90deg, rgba(4, 9, 5, .34), rgba(4, 9, 5, 0) 40%), var(--meadow-image); --hub-background-position: center, 62% 60%; }
html[data-background-override="true"][data-background="lake"] { --hub-background-color: #080d0b; --hub-background-image: linear-gradient(90deg, rgba(3, 8, 7, .82), rgba(3, 8, 7, .5) 26%, rgba(3, 8, 7, 0) 60%), linear-gradient(0deg, rgba(3, 8, 7, .42), rgba(3, 8, 7, 0) 32%), var(--lake-image, url("/lake-summer.jpg")); --hub-background-position: center, center, 56% 64%; }
/* Вторые сцены остальных тем. Плотность затемнения слева подобрана по замеру
   яркости левой трети каждого кадра: у «Магмы» она 23 из 255, у «Диска» — 0,5,
   поэтому одинаковый градиент для всех был бы либо лишним, либо слабым. */
html[data-background-override="true"][data-background="orbit-limb"] { --hub-background-color: #05070c; --hub-background-image: linear-gradient(90deg, rgba(3, 5, 9, .34), rgba(3, 5, 9, 0) 46%), var(--orbit-limb-image, url("/orbit-limb.jpg")); --hub-background-position: center, 58% 46%; }
html[data-background-override="true"][data-background="nebula-core"] { --hub-background-color: #0a0614; --hub-background-image: linear-gradient(90deg, rgba(6, 4, 12, .32), rgba(6, 4, 12, 0) 44%), var(--nebula-core-image, url("/nebula-core.jpg")); --hub-background-position: center, 58% 48%; }
html[data-background-override="true"][data-background="pulsar-beam"] { --hub-background-color: #02121a; --hub-background-image: repeating-linear-gradient(0deg, rgba(60, 230, 212, .03) 0 1px, transparent 1px 4px), linear-gradient(90deg, rgba(1, 8, 12, .3), rgba(1, 8, 12, 0) 42%), var(--pulsar-beam-image, url("/pulsar-beam.jpg")); --hub-background-position: center, center, 56% 48%; --hub-background-repeat: repeat, no-repeat, no-repeat; --hub-background-size: auto, cover, cover; }
html[data-background-override="true"][data-background="blackhole-disk"] { --hub-background-color: #000; --hub-background-image: var(--blackhole-disk-image, url("/blackhole-disk.jpg")); --hub-background-position: 56% 48%; }
html[data-background-override="true"][data-background="gothic-crypt"] { --hub-background-color: #070604; --hub-background-image: linear-gradient(90deg, rgba(4, 4, 3, .3), rgba(4, 4, 3, 0) 40%), var(--gothic-crypt-image, url("/gothic-crypt.jpg")); --hub-background-position: center, 58% 50%; }
html[data-background-override="true"][data-background="taiga-rainfall"] { --hub-background-color: #060a0d; --hub-background-image: linear-gradient(90deg, rgba(4, 8, 10, .48), rgba(4, 8, 10, .08) 42%, rgba(4, 8, 10, 0) 62%), var(--taiga-rainfall-image, url("/taiga-rainfall.jpg")); --hub-background-position: center, 60% 48%; }
html[data-background-override="true"][data-background="metropolis-towers"] { --hub-background-color: #050b12; --hub-background-image: linear-gradient(90deg, rgba(2, 7, 12, .5), rgba(2, 7, 12, .08) 44%, rgba(2, 7, 12, 0) 64%), var(--metropolis-towers-image, url("/metropolis-towers.jpg")); --hub-background-position: center, 60% 52%; }
html[data-background-override="true"][data-background="magma-flow"] { --hub-background-color: #0a0605; --hub-background-image: linear-gradient(90deg, rgba(8, 4, 3, .64), rgba(8, 4, 3, .2) 34%, rgba(8, 4, 3, 0) 58%), var(--magma-flow-image, url("/magma-flow.jpg")); --hub-background-position: center, 58% 52%; }
html[data-background-override="true"][data-background="meadow-goldenhour"] { --hub-background-color: #070d08; --hub-background-image: linear-gradient(90deg, rgba(4, 9, 5, .46), rgba(4, 9, 5, .06) 40%, rgba(4, 9, 5, 0) 60%), var(--meadow-goldenhour-image, url("/meadow-goldenhour.jpg")); --hub-background-position: center, 62% 54%; }

/* Свет сцены дышит на месте: медленнее у космоса, заметнее у огня. */
@keyframes scene-glow {
  0%, 100% { opacity: 0.24; transform: scale(1.01); }
  50% { opacity: 0.6; transform: scale(1.05); }
}

html[data-background-override="true"][data-background="orbit-limb"] body::before,
html[data-background-override="true"][data-background="nebula-core"] body::before,
html[data-background-override="true"][data-background="pulsar-beam"] body::before,
html[data-background-override="true"][data-background="blackhole-disk"] body::before,
html[data-background-override="true"][data-background="magma-flow"] body::before,
html[data-background-override="true"][data-background="meadow-goldenhour"] body::before {
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  content: "" !important;
  mask-image: none !important;
  mix-blend-mode: screen !important;
  opacity: 0.4 !important;
}

html[data-background-override="true"][data-background="orbit-limb"] body::before {
  animation: scene-glow 30s ease-in-out infinite !important;
  background-image: radial-gradient(52% 26% at 74% 26%, rgba(126, 178, 240, 0.24), transparent 76%) !important;
}

html[data-background-override="true"][data-background="nebula-core"] body::before {
  animation: scene-glow 26s ease-in-out infinite !important;
  background-image: radial-gradient(40% 34% at 58% 42%, rgba(196, 130, 255, 0.26), transparent 74%) !important;
}

html[data-background-override="true"][data-background="pulsar-beam"] body::before {
  animation: scene-glow 6s ease-in-out infinite !important;
  background-image: radial-gradient(24% 26% at 60% 46%, rgba(60, 230, 212, 0.3), transparent 72%) !important;
}

html[data-background-override="true"][data-background="blackhole-disk"] body::before {
  animation: scene-glow 34s ease-in-out infinite !important;
  background-image: radial-gradient(34% 22% at 62% 48%, rgba(158, 203, 255, 0.2), transparent 74%) !important;
}

html[data-background-override="true"][data-background="magma-flow"] body::before {
  animation: scene-glow 12s ease-in-out infinite !important;
  background-image: radial-gradient(56% 40% at 68% 68%, rgba(255, 138, 61, 0.26), transparent 76%) !important;
}

html[data-background-override="true"][data-background="meadow-goldenhour"] body::before {
  animation: scene-glow 20s ease-in-out infinite !important;
  background-image: radial-gradient(46% 38% at 74% 34%, rgba(244, 236, 158, 0.3), transparent 76%) !important;
}

/* Дополнительные ночные сцены «Gothic». Кадры уже сняты с тёмной левой третью, поэтому
   гасить её приходится заметно слабее, чем светлое «Озеро». */
html[data-background-override="true"][data-background="gothic-tower"] { --hub-background-color: #070a0e; --hub-background-image: linear-gradient(90deg, rgba(4, 6, 10, .5), rgba(4, 6, 10, .12) 38%, rgba(4, 6, 10, 0) 62%), var(--gothic-tower-image, url("/gothic-tower.jpg")); --hub-background-position: center, 58% 46%; }
html[data-background-override="true"][data-background="gothic-harbor"] { --hub-background-color: #06080d; --hub-background-image: linear-gradient(90deg, rgba(3, 5, 9, .48), rgba(3, 5, 9, .1) 40%, rgba(3, 5, 9, 0) 64%), var(--gothic-harbor-image, url("/gothic-harbor.jpg")); --hub-background-position: center, 62% 52%; }
html[data-background-override="true"][data-background="gothic-chapel"] { --hub-background-color: #080706; --hub-background-image: linear-gradient(90deg, rgba(5, 4, 3, .42), rgba(5, 4, 3, .08) 36%, rgba(5, 4, 3, 0) 60%), var(--gothic-chapel-image, url("/gothic-chapel.jpg")); --hub-background-position: center, 60% 50%; }
html[data-background-override="true"][data-background="gothic-keep"] { --hub-background-color: #070709; --hub-background-image: linear-gradient(90deg, rgba(5, 5, 7, .46), rgba(5, 5, 7, .1) 38%, rgba(5, 5, 7, 0) 62%), var(--gothic-keep-image, url("/gothic-keep.jpg")); --hub-background-position: center, 58% 54%; }
html[data-background-override="true"][data-background="gothic-minental-castle"] { --hub-background-color: #05090d; --hub-background-image: linear-gradient(90deg, rgba(3, 6, 10, .42), rgba(3, 6, 10, .08) 40%, rgba(3, 6, 10, 0) 64%), var(--gothic-minental-castle-image, url("/gothic-minental-castle.jpg")); --hub-background-position: center, 58% 50%; }
html[data-background-override="true"][data-background="gothic-minental-fortress"] { --hub-background-color: #05090d; --hub-background-image: linear-gradient(90deg, rgba(3, 6, 10, .38), rgba(3, 6, 10, .07) 40%, rgba(3, 6, 10, 0) 64%), var(--gothic-minental-fortress-image, url("/gothic-minental-fortress.jpg")); --hub-background-position: center, 50% 50%; }
html[data-background-override="true"][data-background="gothic-finkregh"] { --hub-background-color: #03080c; --hub-background-image: linear-gradient(90deg, rgba(2, 6, 10, .18), rgba(2, 6, 10, .04) 34%, rgba(2, 6, 10, 0) 60%), var(--gothic-finkregh-image, url("/gothic-finkregh.jpg")); --hub-background-position: center, 50% 50%; }

/* Эффект сцены. Общий слой над фоном для чужих сцен выключен, поэтому каждая
   готическая сцена включает его обратно и держит свой источник света:
   туман тянет вбок, огонь дышит на месте. */
@keyframes gothic-scene-fog {
  0%, 100% { opacity: 0.34; transform: translate3d(-2%, 0.5%, 0) scale(1.02); }
  50% { opacity: 0.62; transform: translate3d(3%, -0.5%, 0) scale(1.06); }
}

@keyframes gothic-scene-glow {
  0%, 100% { opacity: 0.3; }
  38% { opacity: 0.66; }
  52% { opacity: 0.44; }
  70% { opacity: 0.72; }
}

html[data-background-override="true"][data-background^="gothic-"] body::before {
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  content: "" !important;
  mask-image: none !important;
  mix-blend-mode: screen !important;
}

/* Башня: туман ползёт вдоль склона, в окнах дышит огонь. */
html[data-background-override="true"][data-background="gothic-tower"] body::before {
  animation: gothic-scene-fog 24s ease-in-out infinite !important;
  background-image:
    radial-gradient(60% 42% at 34% 62%, rgba(150, 176, 208, 0.2), transparent 74%),
    radial-gradient(16% 12% at 72% 22%, rgba(255, 176, 88, 0.34), transparent 72%) !important;
  opacity: 0.5 !important;
}

/* Гавань: луна над крепостью и дымка над водой. */
html[data-background-override="true"][data-background="gothic-harbor"] body::before {
  animation: gothic-scene-fog 30s ease-in-out infinite !important;
  background-image:
    radial-gradient(14% 20% at 65% 12%, rgba(198, 222, 255, 0.3), transparent 70%),
    radial-gradient(54% 30% at 30% 66%, rgba(140, 168, 204, 0.18), transparent 76%) !important;
  opacity: 0.46 !important;
}

/* Часовня: свечи у алтаря горят неровно, поэтому свет дышит рывками. */
html[data-background-override="true"][data-background="gothic-chapel"] body::before {
  animation: gothic-scene-glow 9s ease-in-out infinite !important;
  background-image:
    radial-gradient(30% 34% at 76% 52%, rgba(255, 186, 104, 0.34), rgba(190, 116, 44, 0.12) 52%, transparent 78%) !important;
  opacity: 0.44 !important;
}

/* Крепость: низовой туман идёт по долине, костры на стене едва теплятся. */
html[data-background-override="true"][data-background="gothic-keep"] body::before {
  animation: gothic-scene-fog 34s ease-in-out infinite !important;
  background-image:
    radial-gradient(70% 34% at 40% 74%, rgba(146, 164, 190, 0.22), transparent 78%),
    radial-gradient(20% 16% at 78% 34%, rgba(255, 166, 84, 0.16), transparent 74%) !important;
  opacity: 0.5 !important;
}

/* Монастырь: туман лежит в разрушенном внешнем кольце, огни держат ворота. */
html[data-background-override="true"][data-background="gothic-minental-castle"] body::before {
  animation: gothic-scene-fog 32s ease-in-out infinite !important;
  background-image:
    radial-gradient(68% 34% at 34% 72%, rgba(142, 168, 198, 0.2), transparent 78%),
    radial-gradient(18% 14% at 78% 46%, rgba(255, 168, 82, 0.18), transparent 74%) !important;
  opacity: 0.48 !important;
}

/* Замок Миненталя: лунный туман отделяет широкую крепость от тёмной долины. */
html[data-background-override="true"][data-background="gothic-minental-fortress"] body::before {
  animation: gothic-scene-fog 34s ease-in-out infinite !important;
  background-image:
    radial-gradient(62% 34% at 28% 68%, rgba(124, 151, 184, 0.18), transparent 80%),
    radial-gradient(22% 16% at 70% 43%, rgba(255, 164, 74, 0.14), transparent 76%) !important;
  opacity: 0.44 !important;
}

/* Финкрегх: холодная дымка ползёт по льду, глубина пещеры медленно светлеет. */
html[data-background-override="true"][data-background="gothic-finkregh"] body::before {
  animation: gothic-scene-fog 28s ease-in-out infinite !important;
  background-image:
    radial-gradient(58% 28% at 42% 76%, rgba(116, 178, 222, 0.18), transparent 78%),
    radial-gradient(34% 30% at 66% 34%, rgba(130, 196, 236, 0.2), transparent 76%) !important;
  opacity: 0.44 !important;
}

/* Три кадра «Озера» — одна сцена в трёх техниках. Рисованные светлее съёмки,
   особенно бумага акварели, поэтому левый край гасится плотнее. Путь берётся
   через var с запасным значением: панель VS Code подменяет саму переменную, а
   объявление внутри блока фона перебило бы подмену по специфичности. */
html[data-background-override="true"][data-background="lake-watercolor"] { --hub-background-color: #0a0f0c; --hub-background-image: linear-gradient(90deg, rgba(4, 10, 8, .88), rgba(4, 10, 8, .6) 26%, rgba(4, 10, 8, 0) 62%), linear-gradient(0deg, rgba(4, 10, 8, .4), rgba(4, 10, 8, 0) 30%), var(--lake-watercolor-image, url("/lake-watercolor.jpg")); --hub-background-position: center, center, 56% 52%; }
html[data-background-override="true"][data-background="lake-oil"] { --hub-background-color: #0a0e09; --hub-background-image: linear-gradient(90deg, rgba(5, 9, 6, .86), rgba(5, 9, 6, .56) 26%, rgba(5, 9, 6, 0) 60%), linear-gradient(0deg, rgba(5, 9, 6, .4), rgba(5, 9, 6, 0) 30%), var(--lake-oil-image, url("/lake-oil.jpg")); --hub-background-position: center, center, 56% 62%; }
html[data-background-override="true"][data-background="graphite"] { --hub-background-color: #17181a; --hub-background-image: linear-gradient(oklch(.19 .004 260 / .5) 1px, transparent 1px), linear-gradient(90deg, oklch(.19 .004 260 / .5) 1px, transparent 1px); --hub-background-size: 56px 56px; }

@media (max-width: 720px) {
  html[data-background-override="true"][data-background="pulsar"] { --hub-background-position: center, center, 24% 52%; }
  html[data-background-override="true"][data-background="taiga"] { --hub-background-position: center, center, 74% 28%; }
  html[data-background-override="true"][data-background="metropolis"] { --hub-background-position: center, center, 68% 50%; }
  html[data-background-override="true"][data-background="magma"] { --hub-background-position: center, center, 72% 56%; }
  html[data-background-override="true"][data-background="meadow"] { --hub-background-position: center, 68% 76%; }
  html[data-background-override="true"][data-background="orbit-limb"] { --hub-background-position: center, 70% 40%; }
  html[data-background-override="true"][data-background="nebula-core"] { --hub-background-position: center, 62% 46%; }
  html[data-background-override="true"][data-background="pulsar-beam"] { --hub-background-position: center, center, 62% 46%; }
  html[data-background-override="true"][data-background="blackhole-disk"] { --hub-background-position: 60% 46%; }
  html[data-background-override="true"][data-background="gothic-crypt"] { --hub-background-position: center, 72% 50%; }
  html[data-background-override="true"][data-background="taiga-rainfall"] { --hub-background-position: center, 72% 44%; }
  html[data-background-override="true"][data-background="metropolis-towers"] { --hub-background-position: center, 74% 50%; }
  html[data-background-override="true"][data-background="magma-flow"] { --hub-background-position: center, 70% 56%; }
  html[data-background-override="true"][data-background="meadow-goldenhour"] { --hub-background-position: center, 76% 56%; }
  html[data-background-override="true"][data-background="gothic-tower"] { --hub-background-position: center, 74% 42%; }
  html[data-background-override="true"][data-background="gothic-harbor"] { --hub-background-position: center, 78% 52%; }
  html[data-background-override="true"][data-background="gothic-chapel"] { --hub-background-position: center, 74% 50%; }
  html[data-background-override="true"][data-background="gothic-keep"] { --hub-background-position: center, 76% 46%; }
  html[data-background-override="true"][data-background="gothic-minental-castle"] { --hub-background-position: center, 76% 50%; }
  html[data-background-override="true"][data-background="gothic-minental-fortress"] { --hub-background-position: center, 76% 50%; }
  html[data-background-override="true"][data-background="gothic-finkregh"] { --hub-background-position: center, 78% 50%; }
  html[data-background-override="true"][data-background="lake"] { --hub-background-position: center, 72% 72%; }
  /* на телефоне от кадра остаётся вертикальная полоса, гасить край слева
     нечего: обе рисованные сцены притемняются сверху и снизу */
  html[data-background-override="true"][data-background="lake-watercolor"] { --hub-background-image: linear-gradient(180deg, rgba(4, 10, 8, .78), rgba(4, 10, 8, .5) 30%, rgba(4, 10, 8, .54) 68%, rgba(4, 10, 8, .72)), var(--lake-watercolor-image, url("/lake-watercolor.jpg")); --hub-background-position: center, 72% 70%; }
  html[data-background-override="true"][data-background="lake-oil"] { --hub-background-image: linear-gradient(180deg, rgba(5, 9, 6, .74), rgba(5, 9, 6, .46) 30%, rgba(5, 9, 6, .5) 68%, rgba(5, 9, 6, .7)), var(--lake-oil-image, url("/lake-oil.jpg")); --hub-background-position: center, 72% 68%; }
}