/* Decorative world in image coordinates: 1672 × 941. */
body{background-image:none;background-color:#050d18;isolation:isolate}
.atmosphere{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict}
.world{position:absolute;top:0;left:50%;width:max(100vw,177.683vh);height:max(100vh,56.28vw);transform:translateX(-50%);background:url('../../assets/bruxas-do-eclipse/cenario.png') center/100% 100% no-repeat}
.eclipse-halo{position:absolute;left:53.7%;top:7.4%;width:12%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,transparent 0 33%,#ffcd7c16 37%,#ffd59540 43%,#e6a35418 50%,transparent 70%);mix-blend-mode:screen;animation:eclipse-light 9s ease-in-out infinite alternate}
.world-lights{position:absolute;inset:0;background:radial-gradient(ellipse at 7% 66%,#67dce328,transparent 25%),radial-gradient(ellipse at 93% 67%,#f3a64b36,transparent 24%);mix-blend-mode:screen;animation:world-light 7s ease-in-out infinite alternate}
.fog{position:absolute;left:-15%;width:130%;height:34%;bottom:-3%;background:radial-gradient(ellipse at 22% 65%,#9abfc435,transparent 36%),radial-gradient(ellipse at 68% 70%,#a7bbcb24,transparent 40%);opacity:.65;animation:fog-drift 32s ease-in-out infinite alternate}
.fog.far{bottom:25%;height:22%;opacity:.3;background:radial-gradient(ellipse at 18% 65%,#8ad5de32,transparent 40%),radial-gradient(ellipse at 78% 60%,#b2c4d326,transparent 38%);animation-duration:43s;animation-direction:alternate-reverse}
.embers{position:absolute;inset:0}.embers i{position:absolute;left:var(--x);bottom:5%;width:3px;height:3px;border-radius:50%;background:#f6cb8b;box-shadow:0 0 6px #f0b776;opacity:0;animation:ember-rise var(--duration) linear infinite;animation-delay:var(--delay)}
.embers i:nth-child(3n){background:#95e4ed;box-shadow:0 0 6px #75d5e9}
.atmosphere:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#02091425,transparent 25%,transparent 75%,#02091425),linear-gradient(0deg,#01050c40,transparent 25%)}
.bonus-mode .world-lights{background:radial-gradient(ellipse at 10% 60%,#69e4f045,transparent 30%),radial-gradient(ellipse at 90% 65%,#69c9dd35,transparent 28%)}
.golden-mode .world-lights{background:radial-gradient(ellipse at 10% 60%,#edb65b40,transparent 30%),radial-gradient(ellipse at 90% 65%,#efb55245,transparent 28%)}
@keyframes eclipse-light{from{opacity:.45}to{opacity:.95}}
@keyframes world-light{from{opacity:.55}to{opacity:1}}
@keyframes fog-drift{from{transform:translate3d(-3%,0,0)}to{transform:translate3d(3%,-3%,0)}}
@keyframes ember-rise{0%{opacity:0;transform:translate3d(0,0,0)}15%{opacity:.65}75%{opacity:.3}100%{opacity:0;transform:translate3d(25px,-200px,0)}}
.ambient-paused .atmosphere *,.page-hidden .atmosphere *{animation-play-state:paused!important}
.ambient-paused .embers{visibility:hidden}
@media(max-width:700px){.fog{opacity:.35}.fog.far{opacity:.18}.embers i:nth-child(n+7){display:none}.world-lights{opacity:.5;animation-name:mobile-world-light}.utility-bar>div{flex-wrap:wrap}.utility-bar button{flex:1 0 auto}.utility-bar #ambience{flex-basis:100%;max-width:170px}.eclipse-halo{animation-duration:12s}}
@keyframes mobile-world-light{from{opacity:.25}to{opacity:.55}}
@media(prefers-reduced-motion:reduce){.atmosphere *{animation:none!important}.embers{display:none}.eclipse-halo{opacity:.5}.world-lights{opacity:.4}}