/* ============================================================
   Juegos de catto.ar · el cielo de fondo (30/10/2026)
   Estrellas y Vía Láctea (assets/js/starfield.js) más cohetes, astronauta,
   lunas que chocan, planeta y estrella fugaz. Lo usan /juegos y los tres
   juegos: la página carga este CSS y assets/js/juegos-cielo.js, que dibuja
   el cielo y después carga starfield.js.
   ============================================================ */
body{background:#0a0f1c!important}
.top,main{position:relative;z-index:1}

/* ----- el cielo: estrellas y Vía Láctea (assets/js/starfield.js), fijo detrás de todo ----- */
.cielo{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(1200px 700px at 78% -8%,#1b2a48 0%,transparent 60%),radial-gradient(900px 600px at 0% 100%,#151a33 0%,transparent 65%)}
.cielo .starfield{position:absolute;inset:0}
.cielo .starfield i{position:absolute;display:block;border-radius:50%}
.cielo .mw{position:absolute;inset:0;filter:blur(12px);opacity:.85;
  background:
    radial-gradient(26% 60% at 80% 76%, rgba(216,183,140,.20), transparent 62%),
    radial-gradient(15% 34% at 84% 80%, rgba(236,150,168,.14), transparent 60%),
    radial-gradient(34% 66% at 66% 56%, rgba(150,120,95,.11), transparent 68%),
    radial-gradient(40% 80% at 52% 38%, rgba(120,140,196,.11), transparent 70%),
    radial-gradient(30% 66% at 36% 18%, rgba(112,132,188,.08), transparent 72%)}
.cielo .mw-core{position:absolute;left:80%;top:76%;width:220px;height:120px;transform:translate(-50%,-50%);filter:blur(8px);border-radius:50%;
  background:radial-gradient(circle at 50% 55%, rgba(240,214,170,.24), rgba(230,160,150,.10) 45%, transparent 70%)}

/* ----- los que andan por el cielo ----- */
.cielo .bicho{position:absolute;display:block}
.cielo svg{display:block;overflow:visible}
/* cohete grande: cruza de abajo a la izquierda hacia arriba a la derecha */
.cohete1{left:0;top:0;width:44px;animation:cruza1 19s linear infinite;animation-delay:-3s}
.cohete1 svg{transform:rotate(52deg)}
@keyframes cruza1{0%{transform:translate(-12vw,105vh)}38%{transform:translate(105vw,-18vh)}100%{transform:translate(105vw,-18vh)}}
/* cohete chico: va de derecha a izquierda, más lejos */
.cohete2{left:0;top:0;width:24px;opacity:.75;animation:cruza2 27s linear infinite;animation-delay:-14s}
.cohete2 svg{transform:rotate(-70deg)}
@keyframes cruza2{0%{transform:translate(106vw,62vh)}45%{transform:translate(-10vw,18vh)}100%{transform:translate(-10vw,18vh)}}
.llama{transform-origin:20px 57px;animation:llama .12s ease-in-out infinite alternate}
@keyframes llama{from{transform:scaleY(.8)}to{transform:scaleY(1.15)}}
/* astronauta: flota de lado a lado, girando despacio, y saluda */
.astro{left:0;top:54vh;width:62px;animation:flota 70s linear infinite;animation-delay:-20s}
.astro svg{animation:gira 22s linear infinite}
@keyframes flota{0%{transform:translate(-10vw,0)}25%{transform:translate(22vw,-12vh)}50%{transform:translate(55vw,6vh)}75%{transform:translate(85vw,-8vh)}100%{transform:translate(110vw,0)}}
@keyframes gira{to{transform:rotate(360deg)}}
.saludo{transform-origin:16px 34px;animation:saluda 1.6s ease-in-out infinite alternate}
@keyframes saluda{from{transform:rotate(-8deg)}to{transform:rotate(-46deg)}}
/* dos lunas que se acercan, chocan («¡bonk!») y rebotan */
.lunas{right:6vw;top:15vh;width:150px;height:60px}
.luna{position:absolute;top:12px;width:38px;height:38px}
.luna.a{left:14px;animation:lunaA 9s cubic-bezier(.5,0,.75,0) infinite}
.luna.b{right:14px;animation:lunaB 9s cubic-bezier(.5,0,.75,0) infinite}
@keyframes lunaA{0%,100%{transform:translateX(0) rotate(0)}46%{transform:translateX(23px) rotate(40deg)}50%{transform:translateX(21px) rotate(40deg) scaleX(.9)}
  62%{transform:translateX(-4px) rotate(-10deg)}}
@keyframes lunaB{0%,100%{transform:translateX(0) rotate(0)}46%{transform:translateX(-23px) rotate(-40deg)}50%{transform:translateX(-21px) rotate(-40deg) scaleX(.9)}
  62%{transform:translateX(4px) rotate(10deg)}}
.bonk{position:absolute;left:61px;top:17px;width:28px;opacity:0;animation:bonk 9s ease-out infinite}
@keyframes bonk{0%,45%{opacity:0;transform:scale(.2)}50%{opacity:1;transform:scale(1.2) rotate(15deg)}62%{opacity:0;transform:scale(1.5) rotate(30deg)}100%{opacity:0}}
/* planeta con anillo que se mece abajo a la izquierda */
.planeta{left:4vw;bottom:9vh;width:86px;opacity:.9;animation:mece 8s ease-in-out infinite alternate}
@keyframes mece{from{transform:translateY(0) rotate(-6deg)}to{transform:translateY(-14px) rotate(6deg)}}
/* estrella fugaz de vez en cuando */
.fugaz{left:0;top:0;width:120px;height:2px;border-radius:2px;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95));animation:fugaz 11s ease-in infinite;animation-delay:2s}
@keyframes fugaz{0%,86%{opacity:0;transform:translate(30vw,8vh) rotate(18deg)}88%{opacity:1}96%{opacity:0;transform:translate(62vw,22vh) rotate(18deg)}100%{opacity:0;transform:translate(62vw,22vh) rotate(18deg)}}
@media(max-width:640px){.cohete1{width:32px}.astro{width:46px}.lunas{transform:scale(.75);transform-origin:right top;right:2vw;top:9vh}.planeta{width:62px}}
/* con movimiento reducido el cielo queda quieto: los personajes, en una pose */
@media(prefers-reduced-motion:reduce){
  .cielo *{animation:none!important}
  .cohete1{transform:translate(78vw,62vh)}.cohete2{display:none}.astro{transform:translate(8vw,-30vh)}.fugaz{display:none}}