/* SPACE v4 — automatic arrival window, Earth, shuttle, and terrain/cloud composition. */
.skyspace .skyspace-content { min-height: calc(100svh - 3rem); }
.skyspace .skyspace-content-inner { width: 100%; padding: 0 80px; }
.space-scene { position: relative; display: grid; place-items: center; width: 100%; max-width: 1000px; height: min(680px, 82svh); min-height: 400px; margin: 0 auto; }
.space-earth { position: absolute; left: 3%; bottom: 9%; width: 160px; opacity: 1; image-rendering: pixelated; pointer-events: none; }
.space-window { height: fit-content; position: fixed; inset: 180px 0 24px; z-index: 100010; margin: auto; width: min(590px, calc(100vw - 36px)); max-height: calc(100svh - 204px); padding: 26px; border: 2px solid #c4d8df; color: #f1f4ee; background: url('../images/world/dither-2x2.png') 0 0 / 4px 4px repeat; image-rendering: pixelated; box-shadow: 0 0 0 3px #111c2b, 0 0 0 5px #758c9a; overflow-y: auto; }
.space-window .p-title { margin: 12px 0 20px; font: 20px 'numberf', 'dotf'; }
.space-window .p-title, .space-window .text { text-shadow: 0 0 3px #111c2b, 1px 1px 0 #111c2b, -1px -1px 0 #111c2b; }
.space-window .text { font-family: 'SawarabiGothic', sans-serif; font-size: 15px; line-height: 1.9; letter-spacing: .02em; }
.space-window .text p + p { margin-top: 16px; }
#return-btn:focus-visible, #rocket-btn:focus-visible { outline: 2px solid #f5ddb0 !important; outline-offset: 5px; }
#rocket-btn img { width: 64px; }
#return-btn { top: 130px; }
@media (max-width: 768px) {
  .skyspace .skyspace-content-inner { padding: 0 34px 0 20px; }
  .space-earth { left: 0; top: 16px; bottom: auto; width: 144px; }
  .space-window { padding: 18px; }
  .space-window .text { font-size: 14px; }
}

/* The horizon is behind both moving cloud layers. Ground silhouettes stay in front.
   Remove the footer stacking context, otherwise clouds cannot cross its horizon. */
body.dev footer { z-index: auto; isolation: auto; }
body.dev .content-wrapper { background-image: none; }
body.dev .content-wrapper::before {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background-image: url('../images/dev/bg2.png'), url('../images/dev/bg1.png');
  animation: cloudMove 20s linear infinite;
}
body.dev .content-wrapper::after { z-index: 5; }
.world-horizon { z-index: 1; }
.world-ground { z-index: 6; }

/* A shared dark soil seam with irregular pixel edge, not a straight border. */
.world-ground::after { content: ''; position: absolute; inset: auto 0 0; height: 32px; background: linear-gradient(transparent, #000000); }
body.dev .underground::after { display: block; top: 0; height: 42px; z-index: 20; pointer-events: none; background: linear-gradient(#000000, #00000090 40%, transparent); }
body.dev .underground .downbelow-inner::before { content: ''; position: absolute; inset: 0 0 auto; height: 16px; z-index: 19; pointer-events: none; background: #000000; clip-path: polygon(0 0,100% 0,100% 35%,95% 35%,95% 70%,89% 70%,89% 40%,83% 40%,83% 80%,76% 80%,76% 30%,69% 30%,69% 65%,63% 65%,63% 45%,58% 45%,58% 85%,50% 85%,50% 35%,43% 35%,43% 65%,37% 65%,37% 40%,30% 40%,30% 80%,24% 80%,24% 30%,17% 30%,17% 70%,10% 70%,10% 40%,4% 40%,4% 65%,0 65%); }

/* PC cave keeps its 3:1 composition. Its height is set from width by main.js. */
body.dev .underground .downbelow .downbelow-inner,
body.dev .underground .downbelow .downbelow-content { min-height: 0; }
body.dev .underground .downbelow .downbelow-inner {
  background-size: min(1440px, 100vw) auto;
  background-position: center top;
}
@media (max-width: 768px) {
  body.dev .underground .downbelow .downbelow-inner,
  body.dev .underground .downbelow .downbelow-content { min-height: 560px; }
  body.dev .underground .downbelow .downbelow-inner { background-size: cover; background-position: center; }
}