.screen:has(> .lottie-clouds) { isolation: isolate; }
.lottie-clouds { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
/* Reference artwork occupies about 60% of its square canvas. */
.lottie-cloud { position: absolute; left: var(--cloud-x); top: var(--cloud-y); width: var(--cloud-width); aspect-ratio: 1; opacity: .65; transform: translate(-50%, -50%); animation: cloud-drift 24s linear infinite alternate; }
.lottie-cloud:nth-child(even) { animation-direction: alternate-reverse; }
.lottie-cloud:nth-child(3n + 2) { animation-duration: 31s; animation-delay: -8s; }
.lottie-cloud:nth-child(3n) { animation-duration: 37s; animation-delay: -15s; }
.cloud-1 { --cloud-x: 15%; --cloud-y: 22%; --cloud-width: 38%; }
.cloud-2 { --cloud-x: 52%; --cloud-y: 26%; --cloud-width: 29%; }
.cloud-3 { --cloud-x: 84%; --cloud-y: 17%; --cloud-width: 32%; }
.cloud-4 { --cloud-x: 32%; --cloud-y: 39%; --cloud-width: 19%; }
.cloud-5 { --cloud-x: 94%; --cloud-y: 40%; --cloud-width: 13%; }
.cloud-6 { --cloud-x: 9%; --cloud-y: 51%; --cloud-width: 20%; }
.cloud-7 { --cloud-x: 72%; --cloud-y: 50%; --cloud-width: 40%; }
.cloud-8 { --cloud-x: 44%; --cloud-y: 58%; --cloud-width: 24%; }
.cloud-9 { --cloud-x: 21%; --cloud-y: 67%; --cloud-width: 26%; }
.cloud-10 { --cloud-x: 88%; --cloud-y: 68%; --cloud-width: 23%; }
.cloud-11 { --cloud-x: 61%; --cloud-y: 74%; --cloud-width: 18%; }
.cloud-12 { --cloud-x: 11%; --cloud-y: 88%; --cloud-width: 27%; }
.cloud-13 { --cloud-x: 76%; --cloud-y: 89%; --cloud-width: 29%; }
@keyframes cloud-drift {
    from { transform: translate(-50%, -50%) translateX(-12vw); }
    to { transform: translate(-50%, -50%) translateX(12vw); }
}
@media (orientation: portrait) {
    .cloud-1 { --cloud-x: 25%; --cloud-y: 11%; --cloud-width: 70%; }
    .cloud-2 { --cloud-x: 79%; --cloud-y: 14%; --cloud-width: 64%; }
    .cloud-3 { --cloud-x: 51%; --cloud-y: 23%; --cloud-width: 29%; }
    .cloud-4 { --cloud-x: 27%; --cloud-y: 32%; --cloud-width: 65%; }
    .cloud-5 { --cloud-x: 71%; --cloud-y: 35%; --cloud-width: 69%; }
    .cloud-6 { --cloud-x: 10%; --cloud-y: 42%; --cloud-width: 31%; }
    .cloud-7 { --cloud-x: 47%; --cloud-y: 47%; --cloud-width: 51%; }
    .cloud-8 { --cloud-x: 85%; --cloud-y: 50%; --cloud-width: 34%; }
    .cloud-9 { --cloud-x: 19%; --cloud-y: 63%; --cloud-width: 41%; }
    .cloud-10 { --cloud-x: 67%; --cloud-y: 60%; --cloud-width: 58%; }
    .cloud-11 { --cloud-x: 49%; --cloud-y: 74%; --cloud-width: 30%; }
    .cloud-12 { --cloud-x: 27%; --cloud-y: 85%; --cloud-width: 65%; }
    .cloud-13 { --cloud-x: 73%; --cloud-y: 90%; --cloud-width: 59%; }
}
#roulette-wheel { position: relative !important; overflow: visible !important; }
#box-lottie { position: absolute; inset: 0; pointer-events: none; opacity: 0; container-type: size; }
#box-lottie.is-playing { opacity: 1; }
#roulette-wheel.has-lottie-box > img { visibility: hidden; }
#effect-stars .star { position: relative; overflow: visible; }
.lottie-burst,
#reward-modal .modal-icon-container > .lottie-burst {
    display: block; position: absolute; z-index: 3; left: 50%; top: 50%;
    width: 170% !important; height: auto !important; aspect-ratio: 1;
    transform: translate(-50%, -50%); pointer-events: none; opacity: 0;
}
.lottie-burst.is-playing,
#reward-modal .modal-icon-container > .lottie-burst.is-playing { opacity: 1; }
#effect-stars > .lottie-burst { width: 75% !important; }
.effect-art {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
}
/* Match the reference canvas's centered, undistorted square in a wide box. */
#box-lottie > .effect-art {
    inset: auto;
    left: 50%;
    top: 50%;
    width: min(100cqw, 100cqh);
    height: min(100cqw, 100cqh);
    transform: translate(-50%, -50%);
}
.effect-layer {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transform-origin: 0 0;
    animation-duration: var(--effect-duration);
    animation-iteration-count: var(--effect-iterations);
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-play-state: paused;
}
.is-playing > .effect-art > .effect-layer { animation-play-state: running; }
.effects-paused > .effect-art > .effect-layer { animation-play-state: paused; }
.lottie-cloud,
.lottie-cloud .effect-layer { will-change: transform; }
.lottie-cloud.effects-paused { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .lottie-clouds, .lottie-burst, #box-lottie { display: none !important; }
    #roulette-wheel.has-lottie-box > img { visibility: visible; }
}