.space { display:flex; gap:12px; max-width:720px; margin:0 auto; padding:12px; border-radius:28px; border:5px solid #3b3f8f; color:#fff;
  background:radial-gradient(circle at 20% 10%,#3a2f7a,#14123a 60%,#0a0920); position:relative; overflow:hidden; }
.space::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.8;
  background-image:radial-gradient(2px 2px at 12% 18%,#fff,transparent),radial-gradient(1.5px 1.5px at 38% 62%,#fff,transparent),
    radial-gradient(2px 2px at 70% 30%,#ffe9a6,transparent),radial-gradient(1.5px 1.5px at 86% 74%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 55% 90%,#fff,transparent),radial-gradient(2px 2px at 25% 85%,#cfe9ff,transparent);
  animation:twinkle 3s ease-in-out infinite alternate; }
@keyframes twinkle { to { opacity:.35; } }

.meter { position:relative; flex:none; width:84px; height:380px; border-radius:20px; background:rgba(255,255,255,.08); border:3px solid rgba(255,255,255,.25); }
.moon, .earth { position:absolute; left:50%; transform:translateX(-50%); font-size:2.2rem; line-height:1; z-index:1; }
.moon { top:2px; } .earth { bottom:2px; }
.ticks { position:absolute; left:0; right:0; top:0; bottom:0; }
.tick { position:absolute; left:6px; width:22px; border-top:2px solid rgba(255,255,255,.5); font-size:.7rem; line-height:1; text-align:left; opacity:.85; }
.tick span { position:absolute; left:26px; top:-6px; }
.rocket { position:absolute; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; z-index:2;
  transition:bottom 1.1s cubic-bezier(.4,0,.2,1); }
.rocket .ship { font-size:2.2rem; line-height:1; }
.rocket .pilot { font-size:1rem; line-height:1; margin-bottom:-6px; }
.rocket b { font-size:.95rem; background:#ffd166; color:#222; border-radius:10px; padding:0 7px; margin-top:-2px; }
.rocket.shake { animation:shakeh .5s; }
.rocket.fly .ship { animation:wobble .5s 2; }
@keyframes wobble { 50% { transform:translateY(-6px) rotate(6deg); } }

.console { flex:1; min-width:0; text-align:center; position:relative; z-index:1; }
.status { font-size:1.3rem; font-weight:bold; }
.move { font-size:clamp(1.8rem,8vw,2.8rem); font-weight:bold; margin:6px 0; border-radius:16px; padding:4px 10px; display:inline-block; }
.move.up { background:rgba(60,200,120,.25); color:#8dffb4; }
.move.down { background:rgba(255,90,90,.25); color:#ffa9a9; }
.ask { font-size:1.05rem; opacity:.9; margin-bottom:8px; }
.planets { display:flex; flex-direction:column; gap:10px; align-items:center; }
.planet { font:inherit; font-size:2rem; font-weight:bold; width:112px; height:112px; border-radius:50%; border:0; color:#fff; cursor:pointer; touch-action:manipulation;
  text-shadow:0 2px 4px rgba(0,0,0,.5); box-shadow:inset -12px -12px 24px rgba(0,0,0,.35),0 0 18px rgba(255,255,255,.2); position:relative; animation:float 3s ease-in-out infinite; }
.planet:nth-child(2) { animation-delay:-1s; } .planet:nth-child(3) { animation-delay:-2s; }
.planet:active { transform:scale(.94); }
.planet.p0 { background:radial-gradient(circle at 30% 30%,#ffb26b,#e0662b 70%); }
.planet.p1 { background:radial-gradient(circle at 30% 30%,#8ee3ff,#2b86d9 70%); }
.planet.p2 { background:radial-gradient(circle at 30% 30%,#d6a6ff,#7a3fd1 70%); }
.planet.p0::after { content:""; position:absolute; left:-14px; right:-14px; top:48%; height:14px; border:3px solid rgba(255,255,255,.6); border-radius:50%; transform:rotate(-12deg); }
.planet.boom { animation:boom .5s forwards; }
@keyframes float { 50% { transform:translateY(-7px); } }
@keyframes boom { to { transform:scale(1.5); opacity:0; } }
.quest-btns { display:flex; gap:10px; justify-content:center; margin-top:10px; }
.space .mini { background:rgba(255,255,255,.9); }
#mission { font-weight:bold; }
@media (min-width:560px) { .planets { flex-direction:row; justify-content:center; } }