.menu-ember-layer {
    position: fixed;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.72;
}

.menu-ember-layer::before {
    content: "";
    position: absolute;
    right: -14vw;
    bottom: -24vh;
    width: 54vw;
    height: 54vh;
    background:
        radial-gradient(circle at 48% 72%, rgba(244, 166, 58, 0.16), transparent 42%),
        radial-gradient(circle at 62% 84%, rgba(196, 67, 28, 0.1), transparent 48%);
    filter: blur(4px);
}

.menu-ember {
    position: absolute;
    bottom: -18px;
    left: var(--ember-left);
    width: var(--ember-size);
    height: var(--ember-size);
    border-radius: 999px;
    background: rgba(244, 199, 106, var(--ember-alpha));
    box-shadow: 0 0 12px rgba(244, 134, 45, 0.32);
    animation: menu-ember-float var(--ember-duration) linear infinite;
    animation-delay: var(--ember-delay);
}

.menu-ember:nth-child(3n) {
    background: rgba(255, 238, 190, 0.42);
    box-shadow: 0 0 9px rgba(255, 224, 160, 0.22);
}

.menu-ember:nth-child(4n) {
    width: calc(var(--ember-size) * 0.55);
    height: 26px;
    border-radius: 999px;
    background: linear-gradient(to top, rgba(244, 137, 56, 0), rgba(244, 199, 106, 0.2));
    box-shadow: none;
}

body.duel-playing .menu-ember-layer {
    display: none;
}

body > header,
body > nav,
body > main {
    position: relative;
    z-index: 2;
}

@keyframes menu-ember-float {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0.72);
    }
    18% {
        opacity: 0.7;
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--ember-drift), -108vh, 0) scale(1.12);
    }
}

@media (prefers-reduced-motion: reduce) {
    .menu-ember-layer {
        opacity: 0.36;
    }

    .menu-ember {
        display: none;
    }

    .menu-ember-layer::before {
        filter: blur(10px);
    }
}