/* Лёгкие CSS-силуэты для сцен, у которых раньше был только цветной фон. */

.test_hub-theme {
    background:
        radial-gradient(circle at 79% 24%, #d0634938, transparent 20%),
        linear-gradient(125deg, #12151b 27%, #34282a 70%, #171419);
}

.test_hub-theme::before {
    background:
        repeating-linear-gradient(90deg, transparent 0 45px, #ffd9bd08 46px 48px),
        #171116a8;
    clip-path: polygon(57% 45%, 62% 45%, 62% 29%, 67% 20%, 72% 29%, 72% 45%, 79% 45%, 79% 25%, 84% 15%, 89% 25%, 89% 45%, 98% 45%, 98% 100%, 57% 100%);
}

.far-journeys-theme::before,
.timed-expedition-theme::before {
    background:
        linear-gradient(145deg, transparent 0 58%, #101b20b0 59% 100%),
        repeating-linear-gradient(125deg, transparent 0 42px, #bfefff08 43px 45px);
    clip-path: polygon(48% 68%, 59% 43%, 67% 55%, 76% 24%, 84% 43%, 92% 17%, 100% 39%, 100% 100%, 48% 100%);
}

.tower-theme {
    background:
        radial-gradient(circle at 80% 20%, #8c91ff3d, transparent 20%),
        linear-gradient(125deg, #0e111c 28%, #29294c 70%, #11111f);
}

.tower-theme::before {
    background:
        repeating-linear-gradient(90deg, transparent 0 38px, #d9dcff08 39px 41px),
        #111126b0;
    clip-path: polygon(61% 100%, 61% 46%, 68% 46%, 68% 31%, 73% 31%, 78% 8%, 83% 31%, 88% 31%, 88% 46%, 95% 46%, 95% 100%);
}

.troll-theme {
    background:
        radial-gradient(circle at 78% 27%, #79b66c3b, transparent 23%),
        linear-gradient(125deg, #0d1510 27%, #293a28 70%, #111811);
}

.troll-theme::before {
    background:
        radial-gradient(ellipse at 78% 75%, transparent 0 19%, #0a100bc2 20% 100%),
        repeating-linear-gradient(105deg, transparent 0 48px, #bce5a108 49px 51px);
    clip-path: polygon(54% 100%, 54% 55%, 61% 36%, 67% 53%, 73% 25%, 79% 49%, 86% 18%, 92% 48%, 100% 33%, 100% 100%);
}

.survival-theme {
    background:
        radial-gradient(circle at 78% 27%, #b7444f38, transparent 22%),
        linear-gradient(125deg, #160d10 27%, #3a2025 70%, #190e11);
}

.survival-theme::before {
    background:
        repeating-linear-gradient(112deg, transparent 0 39px, #ffb8bd08 40px 42px),
        #210d13ad;
    clip-path: polygon(55% 100%, 55% 55%, 61% 47%, 64% 24%, 68% 47%, 75% 39%, 80% 14%, 84% 42%, 91% 31%, 95% 9%, 98% 46%, 100% 46%, 100% 100%);
}

.power-cube-theme::before {
    background:
        repeating-linear-gradient(90deg, transparent 0 46px, #a9ffff09 47px 49px),
        #0b1722ad;
    clip-path: polygon(57% 100%, 57% 48%, 64% 48%, 64% 31%, 70% 31%, 70% 43%, 77% 43%, 82% 20%, 88% 43%, 96% 43%, 96% 100%);
}

.alchemy-theme::before {
    background:
        radial-gradient(circle at 82% 30%, #8f66c734 0 8%, transparent 9%),
        repeating-linear-gradient(0deg, transparent 0 38px, #a8ffce08 39px 41px),
        #0c1714ad;
    clip-path: polygon(56% 100%, 56% 49%, 63% 49%, 63% 32%, 69% 24%, 75% 32%, 75% 49%, 83% 49%, 83% 28%, 91% 28%, 91% 49%, 98% 49%, 98% 100%);
}

.constellation-theme::before {
    background:
        radial-gradient(circle at 73% 22%, #ffffff55 0 1px, transparent 2px),
        radial-gradient(circle at 87% 34%, #ffffff45 0 1px, transparent 2px),
        repeating-linear-gradient(90deg, transparent 0 50px, #d8d0ff07 51px 53px),
        #111126a6;
    clip-path: polygon(56% 100%, 56% 52%, 63% 52%, 68% 36%, 75% 27%, 82% 36%, 87% 52%, 91% 52%, 91% 24%, 96% 24%, 96% 100%);
}

.timed-library-theme::before {
    background:
        repeating-linear-gradient(0deg, transparent 0 31px, #e7c78c09 32px 34px),
        repeating-linear-gradient(90deg, transparent 0 54px, #e7c78c07 55px 57px),
        #18130da8;
    clip-path: polygon(57% 100%, 57% 44%, 63% 44%, 63% 28%, 91% 28%, 91% 44%, 98% 44%, 98% 100%);
}

.reflection-shop-theme::before {
    background:
        repeating-linear-gradient(90deg, transparent 0 43px, #ffe1a808 44px 46px),
        #21170fac;
    clip-path: polygon(57% 100%, 57% 49%, 63% 49%, 68% 31%, 75% 23%, 82% 31%, 87% 49%, 94% 49%, 94% 32%, 98% 32%, 98% 100%);
}

/* Декор остаётся фоном и не спорит с текстом верхней сцены. */
.test_hub-theme::before,
.far-journeys-theme::before,
.timed-expedition-theme::before,
.timed-library-theme::before,
.tower-theme::before,
.troll-theme::before,
.survival-theme::before,
.power-cube-theme::before,
.alchemy-theme::before,
.constellation-theme::before,
.reflection-shop-theme::before {
    opacity: 0.78;
}

@media (max-width: 560px) {
    .test_hub-theme::before,
    .far-journeys-theme::before,
    .timed-expedition-theme::before,
    .timed-library-theme::before,
    .tower-theme::before,
    .troll-theme::before,
    .survival-theme::before,
    .power-cube-theme::before,
    .alchemy-theme::before,
    .constellation-theme::before,
    .reflection-shop-theme::before {
        transform: translateX(5%);
        opacity: 0.62;
    }
}