/* Photographic scenery, with the planet and its rings moving as one system. */
.orbital-decor{background:#070d1a;isolation:isolate}
.orbital-decor:before,.orbital-decor:after{content:'';position:absolute;inset:-4%;background:linear-gradient(#060c1822,#060c1855),url(lunar-nebula.webp) center/cover;z-index:-2;animation:lunar-cloud-drift 65s ease-in-out infinite alternate}
.orbital-decor:after{z-index:-1;mask-image:radial-gradient(ellipse at 80% 18%,#000,transparent 64%);animation:lunar-cloud-flow 27s ease-in-out infinite alternate;opacity:.5}
.planet-system{animation:lunar-system-drift 28s ease-in-out infinite alternate;transform-origin:center}
.planet-system .planet{background:none;box-shadow:none;overflow:visible}
.planet-system .planet:before{content:'';position:absolute;inset:0;border-radius:50%;background:url(lunar-planet.webp) center/contain no-repeat;animation:lunar-globe-turn 90s ease-in-out infinite alternate}
.planet-system .planet:after{inset:2%;border-radius:50%;background:radial-gradient(circle at 82% 35%,#b7fff413,transparent 55%);opacity:1;transform:none;animation:none;mix-blend-mode:normal}
.planet-system .ring-a,.planet-system .ring-front{border:0;box-shadow:none;background:radial-gradient(ellipse closest-side,transparent 58%,#71838c44 59%,#b8c8c277 60%,#b9c3c3aa 63%,#61788855 64%,#d0d3c5b3 66%,#a1b5b38f 69%,#28354d44 70%,#c5c2b6aa 72%,#8994aa88 76%,#ded6bdc0 77%,#87999c99 80%,#17294066 81%,#baaed399 83%,#6b849177 88%,#b1c8bf66 92%,transparent 97%)}
/* The foreground must follow the image alpha, not a larger geometric circle.
   Counter-rotation keeps the rings fixed while the silhouette follows the globe. */
.planet-system .ring-a{clip-path:none}
.planet-ring-mask{position:absolute;inset:0;z-index:2;mask:url(lunar-planet.webp) center/contain no-repeat;animation:lunar-globe-turn 90s ease-in-out infinite alternate;pointer-events:none}
.planet-system .ring-front{z-index:2;clip-path:inset(50% 0 0 0);animation:lunar-ring-counterturn 90s ease-in-out infinite alternate}
@keyframes lunar-ring-counterturn{from{transform:translate(-50%,-50%) rotate(calc(var(--axis-tilt) + 2deg))}to{transform:translate(-50%,-50%) rotate(calc(var(--axis-tilt) - 6deg))}}
.planet-system .ring-b{border-color:#a5d3ce40;border-width:1px;box-shadow:none}.planet-system .ring-c{border:1px solid #b4bed326;box-shadow:none}
.planet-system .orbit-ring:after{display:none}
.space-traffic .path-one svg{width:190px;height:75px;filter:none}
.space-traffic .path-two svg{width:170px;height:85px;filter:brightness(.85)}
.space-traffic .path-three svg{width:110px;height:68px;filter:brightness(.75)}
.space-traffic .drifter svg{filter:brightness(.9)}.space-traffic .rock-two{width:105px;height:90px}.space-traffic .rock-three svg{filter:brightness(.65)}
@keyframes lunar-system-drift{from{transform:translate(-8px,-3px) rotate(-2deg)}to{transform:translate(10px,12px) rotate(3deg)}}
@keyframes lunar-globe-turn{from{transform:rotate(-2deg)}to{transform:rotate(6deg)}}
@keyframes lunar-cloud-drift{from{transform:translate(-8px,-5px) scale(1.02)}to{transform:translate(10px,7px) scale(1.06)}}
@keyframes lunar-cloud-flow{from{transform:translate(8px,-7px) scale(1.04);opacity:.25}to{transform:translate(-15px,9px) scale(1.1);opacity:.6}}
.calm .orbital-decor:before,.calm .orbital-decor:after,.calm .planet:before,.calm .planet-ring-mask,.calm .ring-front,.lunar-paused .orbital-decor *,.lunar-paused .orbital-decor:before,.lunar-paused .orbital-decor:after,.lunar-paused .planet:before{animation-play-state:paused!important}
@media(max-width:650px){.space-traffic .path-one svg{width:120px;height:48px}.space-traffic .path-two svg{width:110px;height:55px}.space-traffic .path-three svg{width:75px;height:46px}.space-traffic .rock-two{width:64px;height:52px}}
@media(prefers-reduced-motion:reduce){.orbital-decor:before,.orbital-decor:after,.planet-system,.planet:before,.planet-ring-mask,.planet-system .ring-front{animation:none!important}}
/* Keep the sound/tools readable as the bright rings pass behind them. */
.scene-top .game-tools{background:#080e22c9;border-radius:8px;box-shadow:0 0 0 5px #080e22c9}