/* ═══════════════════════════════════════
   SPACE: ROCKET LAUNCH — css/space.css  v13
   ═══════════════════════════════════════ */

#spaceScreen{display:none;position:fixed;inset:0;z-index:10;overflow:hidden;background:#000;}

/* ── Sky — dark at top (space above), bright blue at horizon ── */
#spcSkyBg{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,
    #000814 0%,
    #0a1e3c 20%,
    #1a5080 45%,
    #4a9cc8 75%,
    #87ceeb 100%);
}
/* Darken overlay — JS animates opacity 0→1 during launch to simulate climbing into space */
#spcDarkenOverlay{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:#000814;opacity:0;will-change:opacity;
}

/* ── Ground + platform (slides down on launch) ── */
#spcGroundPad{
  position:absolute;left:0;right:0;bottom:0;
  height:100%;z-index:4;
  background:url('../Images/GameAssets/Space/bg_launchpad.webp') center bottom/cover no-repeat;
  will-change:transform;
}

/* ── Scaffold tower — separate element so it extends above the ground pad ── */
#spcTower{
  position:absolute;right:4%;bottom:0;
  height:88%;width:auto;
  max-width:32vw;
  z-index:5;pointer-events:none;
  object-fit:contain;object-position:bottom right;
  will-change:transform;
}

/* ── Star parallax layers — CSS repeating dot patterns, offset by JS ── */
/* Far stars: many small dim dots */
#spcStarLayer1{
  position:absolute;inset:0;z-index:2;pointer-events:none;will-change:background-position;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.65) .6px,transparent 1.2px),
    radial-gradient(circle,rgba(255,255,255,.45) .6px,transparent 1.2px),
    radial-gradient(circle,rgba(200,215,255,.55) .6px,transparent 1.2px),
    radial-gradient(circle,rgba(255,255,255,.50) .6px,transparent 1.2px),
    radial-gradient(circle,rgba(255,255,255,.35) .6px,transparent 1.2px);
  background-size:157px 123px,203px 97px,131px 179px,89px 143px,167px 113px;
  background-position:23px 41px,67px 15px,12px 88px,54px 62px,38px 97px;
}
/* Mid stars */
#spcStarLayer2{
  position:absolute;inset:0;z-index:3;pointer-events:none;will-change:background-position;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.85) .9px,transparent 1.8px),
    radial-gradient(circle,rgba(210,225,255,.75) .9px,transparent 1.8px),
    radial-gradient(circle,rgba(255,255,255,.65) .9px,transparent 1.8px);
  background-size:247px 193px,313px 227px,183px 271px;
  background-position:83px 47px,127px 93px,41px 153px;
}
/* Near stars: few large bright */
#spcStarLayer3{
  position:absolute;inset:0;z-index:4;pointer-events:none;will-change:background-position;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.98) 1.2px,transparent 2.4px),
    radial-gradient(circle,rgba(225,235,255,.92) 1.2px,transparent 2.4px);
  background-size:431px 371px,517px 443px;
  background-position:173px 213px,287px 123px;
}
/* Stars hidden during launchpad phase; shown in space */
.spc-stars-hidden #spcStarLayer1,
.spc-stars-hidden #spcStarLayer2,
.spc-stars-hidden #spcStarLayer3{opacity:0;}
.spc-stars-visible #spcStarLayer1,
.spc-stars-visible #spcStarLayer2,
.spc-stars-visible #spcStarLayer3{opacity:1;transition:opacity 1s ease;}

/* ── Rocket ── */
#spcRocket{
  position:absolute;bottom:30%;left:50%;
  transform:translateX(-50%);
  display:block;overflow:visible;
  z-index:9;will-change:transform,left,top;
}
#spcRocket.spc-idle-bob{animation:spcRocketIdle 3.5s ease-in-out infinite;}
#spcRocketImg{
  width:clamp(80px,22vw,140px);height:auto;
  filter:drop-shadow(0 6px 20px rgba(255,180,0,.5));
}
#spcRocketImg img{width:100%;height:auto;display:block;}
#spcFlames{
  display:none;
  position:absolute;
  /* Sit just below the rocket nozzle — centred on the rocket body */
  top:calc(100% - 10px);left:50%;
  transform:translateX(-50%);
  width:clamp(32px,9vw,54px);height:clamp(44px,12vw,74px);
  background:linear-gradient(180deg,#ff4400 0%,#ff8800 35%,#ffcc00 65%,rgba(255,200,0,.08) 100%);
  border-radius:40% 40% 70% 70%;filter:blur(3px);
  animation:spcFlameFlicker .08s ease-in-out infinite alternate;
  transform-origin:top center;
}

/* ── Countdown overlay ── */
#spcCountdownNum{
  display:none;position:absolute;inset:0;
  align-items:center;justify-content:center;
  font-size:clamp(8rem,28vw,14rem);font-weight:900;color:white;
  text-shadow:0 0 60px rgba(255,220,80,.9),0 4px 0 rgba(0,0,0,.4);
  z-index:22;pointer-events:none;
}
#spcCountdownNum.spc-blastoff{font-size:clamp(2.2rem,8vw,3.8rem);letter-spacing:3px;color:#ffd740;}

/* ── Tap hint ── */
#spcTapHint{
  position:absolute;bottom:16%;left:0;right:0;
  text-align:center;font-size:clamp(1.1rem,4vw,1.5rem);
  font-weight:800;color:rgba(255,255,255,.9);
  text-shadow:0 2px 10px rgba(0,0,0,.5);
  pointer-events:none;transition:opacity .5s;z-index:15;
}

/* ── Land button — bottom-centre Earth emoji ── */
#spcLandBtn{
  display:none;position:absolute;
  bottom:max(28px,env(safe-area-inset-bottom) + 20px);
  left:50%;transform:translateX(-50%);
  z-index:35;
  background:rgba(0,0,0,.45);backdrop-filter:blur(10px);
  border:2px solid rgba(100,200,255,.35);border-radius:999px;
  padding:10px 28px;font-size:2.2rem;line-height:1;
  cursor:pointer;
  box-shadow:0 4px 18px rgba(0,0,0,.4);
  -webkit-tap-highlight-color:transparent;
}
#spcLandBtn:active{transform:translateX(-50%) scale(.90);}

/* ── Score (space phase only) ── */
#spcScore{
  display:none;position:absolute;top:16px;left:50%;transform:translateX(-50%);
  z-index:30;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);
  border:2px solid rgba(255,220,80,.55);border-radius:50px;
  padding:8px 24px;font-size:clamp(1.2rem,5vw,1.8rem);font-weight:900;
  color:#ffd740;text-shadow:0 2px 8px rgba(0,0,0,.5);
  white-space:nowrap;pointer-events:none;
  transition:transform .15s;
}
#spcScore.spc-score-pop{animation:spcScorePop .3s ease-out;}

/* ── Hit floating label ── */
.spc-hit-lbl{
  position:absolute;font-size:clamp(1.1rem,4vw,1.5rem);font-weight:900;
  color:#ffd740;text-shadow:0 2px 6px rgba(0,0,0,.7);
  pointer-events:none;z-index:28;white-space:nowrap;
  animation:spcHitFloat 1s ease-out forwards;
}

/* ── Space objects ── */
#spcObjectsLayer{position:absolute;inset:0;pointer-events:none;z-index:6;}
.spc-obj{
  position:absolute;line-height:1;cursor:pointer;pointer-events:auto;
  user-select:none;-webkit-tap-highlight-color:transparent;will-change:left,top;
}
.spc-obj.spc-wiggle{animation:spcWiggle .55s ease-in-out;}
.spc-obj-label{
  position:absolute;white-space:nowrap;
  font-size:clamp(.8rem,3vw,1rem);font-weight:800;
  color:white;text-shadow:0 1px 4px rgba(0,0,0,.6);
  pointer-events:none;z-index:25;
  animation:spcLabelFloat 1.3s ease-out forwards;
}

/* ── Exhaust particles ── */
.spc-particle{
  position:absolute;width:7px;height:7px;border-radius:50%;
  background:white;pointer-events:none;z-index:26;
  animation:spcParticleFly .65s ease-out forwards;
}

/* ── Keyframes ── */
@keyframes spcRocketIdle{
  0%,100%{transform:translateX(-50%) translateY(0);}
  50%     {transform:translateX(-50%) translateY(-8px);}
}
@keyframes spcFlameFlicker{
  0%  {transform:translateX(-50%) scaleX(1)   scaleY(1);  opacity:1;}
  100%{transform:translateX(-50%) scaleX(1.3) scaleY(1.5);opacity:.75;}
}
@keyframes spcCountPop{
  0%  {transform:scale(.3);opacity:0;}
  60% {transform:scale(1.18);}
  100%{transform:scale(1);opacity:1;}
}
@keyframes spcWiggle{
  0%  {transform:rotate(0) scale(1);}
  20% {transform:rotate(-16deg) scale(1.22);}
  40% {transform:rotate(12deg) scale(1.15);}
  60% {transform:rotate(-8deg) scale(1.08);}
  80% {transform:rotate(4deg) scale(1.03);}
  100%{transform:rotate(0) scale(1);}
}
@keyframes spcParticleFly{
  0%  {transform:translate(0,0) scale(1);opacity:1;}
  100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0;}
}
@keyframes spcLabelFloat{
  0%  {transform:translateY(0);opacity:1;}
  60% {transform:translateY(-22px);opacity:1;}
  100%{transform:translateY(-32px);opacity:0;}
}
@keyframes spcHitFloat{
  0%  {transform:translate(-50%,0) scale(.6);opacity:1;}
  35% {transform:translate(-50%,-28px) scale(1.25);opacity:1;}
  100%{transform:translate(-50%,-72px) scale(1);opacity:0;}
}
@keyframes spcScorePop{
  0%  {transform:translateX(-50%) scale(1);}
  40% {transform:translateX(-50%) scale(1.35);}
  100%{transform:translateX(-50%) scale(1);}
}