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

#spaceScreen{
  display:none;position:fixed;inset:0;z-index:10;overflow:hidden;background:#000;
  /* Critical for touch: without these, upward drags trigger scroll/overscroll
     gestures → pointercancel kills the drag mid-swipe on iPad */
  touch-action:none;
  overscroll-behavior:none;
}

/* ── 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:0;bottom:4.5%;
  height:96%;width:auto;
  max-width:52vw;
  z-index:5;pointer-events:none;
  object-fit:contain;object-position:bottom right;
  /* Flipped so the boarding arm reaches toward the rocket (screen centre) */
  transform:scaleX(-1);
  will-change:transform;
}

/* ── Zone backdrops — crossfaded by JS as the journey advances.
   Oversized (±14%) so the flight tick can parallax-pan them. ── */
.spc-zone-bg{
  position:absolute;left:-14%;right:-14%;top:-14%;bottom:-14%;
  z-index:1;pointer-events:none;
  background-size:cover;background-position:center;
  opacity:0;
  transition:opacity 1.4s ease;   /* opacity only — transform is per-frame */
  will-change:transform,opacity;
}

/* ── Zone banner — pops when entering a new area ── */
#spcZoneBanner{
  position:absolute;top:20%;left:50%;
  transform:translateX(-50%) scale(0);
  z-index:32;pointer-events:none;
  background:rgba(0,0,0,.55);backdrop-filter:blur(8px);
  border:2px solid rgba(255,220,80,.55);border-radius:50px;
  padding:10px 28px;
  font-size:clamp(1.3rem,5.5vw,2rem);font-weight:900;
  color:#ffd740;text-shadow:0 2px 8px rgba(0,0,0,.5);
  white-space:nowrap;
}
#spcZoneBanner.show{
  animation:spcBannerPop 2.6s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes spcBannerPop{
  0%  {transform:translateX(-50%) scale(0);opacity:0;}
  12% {transform:translateX(-50%) scale(1.15);opacity:1;}
  20% {transform:translateX(-50%) scale(1);}
  80% {transform:translateX(-50%) scale(1);opacity:1;}
  100%{transform:translateX(-50%) scale(.85);opacity:0;}
}

/* ── Zone progress icons — bottom centre, clear of the score pill ── */
#spcZoneDots{
  position:absolute;bottom:max(18px,env(safe-area-inset-bottom) + 10px);
  left:50%;transform:translateX(-50%);
  z-index:30;display:flex;gap:12px;pointer-events:none;
  background:rgba(0,0,0,.35);border-radius:50px;padding:5px 14px;
  backdrop-filter:blur(6px);
}
#spcZoneDots span{
  font-size:1.15rem;line-height:1;
  filter:grayscale(1) brightness(.6);
  opacity:.55;
  transition:filter .4s,transform .4s,opacity .4s;
}
#spcZoneDots span.on{
  filter:none;
  opacity:1;
  transform:scale(1.35);
  text-shadow:0 0 10px rgba(255,215,64,.9);
}

/* ── Warp zoom — rocket surges forward during the zone jump ── */
.spc-warp-zoom{
  animation:spcWarpZoom 1.2s ease-in-out;
}
@keyframes spcWarpZoom{
  0%  {transform:translateY(0) scale(1);}
  30% {transform:translateY(-34px) scale(1.18);}
  70% {transform:translateY(-34px) scale(1.18);}
  100%{transform:translateY(0) scale(1);}
}

/* ── Rocket upgrade flash ── */
.spc-upgrade-flash{
  animation:spcUpgradeFlash .9s ease-in-out;
}
@keyframes spcUpgradeFlash{
  0%  {filter:brightness(1) drop-shadow(0 6px 20px rgba(255,180,0,.5));transform:scale(1);}
  30% {filter:brightness(6) drop-shadow(0 0 30px rgba(255,255,255,1));transform:scale(1.25);}
  55% {filter:brightness(4) drop-shadow(0 0 26px rgba(255,255,255,.9));transform:scale(1.3);}
  100%{filter:brightness(1) drop-shadow(0 6px 20px rgba(255,180,0,.5));transform:scale(1);}
}

/* ── Warp shake — brief rumble when jumping zones ── */
.spc-warp-shake{
  animation:spcWarpShake .55s ease-in-out;
}
@keyframes spcWarpShake{
  0%,100%{margin-left:0;}
  20%{margin-left:-6px;}
  40%{margin-left:6px;}
  60%{margin-left:-4px;}
  80%{margin-left:4px;}
}

/* ── "Got it!" collect animations — one is picked at random per collect ── */
.spc-got-burst{animation:spcGotBurst .45s ease-out forwards!important;}
@keyframes spcGotBurst{
  0%  {transform:scale(1);opacity:1;filter:brightness(1);}
  35% {transform:scale(1.55);opacity:1;filter:brightness(2.2);}
  100%{transform:scale(2.1);opacity:0;filter:brightness(3);}
}
.spc-got-pulse{animation:spcGotPulse .55s ease-in-out forwards!important;}
@keyframes spcGotPulse{
  0%  {transform:scale(1);opacity:1;}
  25% {transform:scale(1.3);}
  45% {transform:scale(.9);}
  65% {transform:scale(1.2);}
  100%{transform:scale(0);opacity:0;}
}
.spc-got-spin{animation:spcGotSpin .5s ease-in forwards!important;}
@keyframes spcGotSpin{
  0%  {transform:scale(1) rotate(0);opacity:1;}
  100%{transform:scale(0) rotate(340deg);opacity:0;}
}

/* ── Nebula sparkle trail ── */
@keyframes spcSparkleFall{
  0%  {transform:translateY(0) scale(1);opacity:1;}
  100%{transform:translateY(120px) scale(.3);opacity:0;}
}

/* ── 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:21%;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{
  position:relative;   /* anchors #spcFlames to the exact image box */
  width:clamp(80px,22vw,140px);height:auto;
  transform-origin:50% 92%;   /* scale about the nozzle — stays seated on the pad */
  filter:drop-shadow(0 6px 20px rgba(255,180,0,.5));
}
#spcRocketImg img{width:100%;height:auto;display:block;}
#spcFlames{
  display:none;
  position:absolute;
  /* Centred over the baked-in exhaust flame (~88% down the square image) */
  top:88%;left:50%;
  transform:translate(-50%,-50%);
  width:clamp(38px,11vw,56px);height:clamp(46px,13vw,70px);
  background:radial-gradient(ellipse at 50% 25%,rgba(255,180,30,.85) 0%,rgba(255,80,0,.45) 45%,transparent 72%);
  border-radius:50%;
  filter:blur(5px);
  pointer-events:none;
  animation:spcFlameGlow .1s ease-in-out infinite alternate;
}

/* ── 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 — top row, right of the score pill ── */
#spcLandBtn{
  display:none;position:absolute;
  top:12px;left:calc(50% + clamp(64px,19vw,100px));
  z-index:35;
  background:rgba(0,0,0,.45);backdrop-filter:blur(10px);
  border:2px solid rgba(100,200,255,.35);border-radius:50%;
  width:48px;height:48px;
  font-size:1.6rem;line-height:1;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.4);
  -webkit-tap-highlight-color:transparent;
  align-items:center;justify-content:center;padding:0;
}
#spcLandBtn:active{transform: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 spcFlameGlow{
  0%  {transform:translate(-50%,-50%) scale(.85);opacity:.55;}
  100%{transform:translate(-50%,-50%) scale(1.15);opacity:.90;}
}
@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);}
}