/* Illustrated space background (dark theme): moon, satellite with tethered astronaut, distant planets. */
.sky{display:none}
html[data-theme="dark"] .sky{display:block;position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.7}
html[data-theme="dark"] #app{position:relative;z-index:1}
.sky svg{position:absolute;overflow:visible}

/* Let the scene show through surfaces */
html[data-theme="dark"]{--white:#171834c2;--surface-raised:#1c1f42c2}
html[data-theme="dark"] :is(.sidebar,.topbar){background:#121329d9;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
html[data-theme="dark"] :is(.deck-card,.rail-card,.stat-card,.chart-card,.mastery-card,.empty-state){backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
html[data-theme="dark"] .hero{background:#1b1d3ee0}
html[data-theme="dark"] :is(.modal,.modal-footer){background:#171834}

.sky .moon{right:-200px;bottom:-260px;width:min(720px,80vw)}
.sky .moon-g{animation:sky-spin 400s linear infinite;transform-origin:50% 50%;transform-box:fill-box}
.sky .crew{top:64px;right:max(240px,18vw);width:min(320px,24vw);animation:sky-drift 40s ease-in-out infinite}
.sky .astro{animation:sky-float 14s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
.sky .sat{animation:sky-tilt 24s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
.sky .ringed{left:calc(240px + 2%);bottom:5%;width:140px;animation:sky-bob 18s ease-in-out infinite}
.sky .far{left:52%;top:11%;width:34px;opacity:.7}
.sky .blink{animation:sky-blink 2.4s steps(2) infinite}
.sky .twinkle{animation:sky-tw 5s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
.sky .twinkle:nth-child(2n){animation-delay:-1.7s}.sky .twinkle:nth-child(3n){animation-delay:-3.1s}
@keyframes sky-spin{to{transform:rotate(360deg)}}
@keyframes sky-bob{50%{transform:translateY(-10px)}}
@keyframes sky-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(-50px,20px)}}
@keyframes sky-float{0%,100%{transform:translate(0,0) rotate(-4deg)}50%{transform:translate(6px,-10px) rotate(5deg)}}
@keyframes sky-tilt{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(4deg)}}
@keyframes sky-blink{50%{opacity:.1}}
@keyframes sky-tw{0%,100%{opacity:.25}50%{opacity:.9}}
@media(prefers-reduced-motion:reduce){.sky *{animation:none!important}}
@media(max-width:760px){html[data-theme="dark"] .sky{opacity:.5}.sky .moon{width:420px;right:-200px;bottom:-160px}.sky .crew{width:180px;right:-20px;top:230px}.sky .ringed,.sky .far{display:none}}