/* A responsive spatial composition. Grid tracks place objects; offsets soften the rows. */
#stars-view.visible { display: grid; }
#stars-view {
  --scene-row: clamp(52px, 5.7vw, 80px);
  position: relative;
  isolation: isolate;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(11, var(--scene-row)) auto;
  gap: 0;
  align-items: center;
}
#stars-view > .gallery-item {
  min-width: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 10px;
}
#stars-view .img-wrap {
  width: min(100%, var(--object-width, 230px));
  height: auto;
  flex: 0 1 auto;
}
#stars-view .img-wrap > img { width: 100%; height: auto; }
.scene-star { grid-area: 1 / 1 / 3 / 3; --object-width: 145px; }
.scene-constellation { grid-area: 1 / 3 / 3 / 5; --object-width: 155px; translate: 0 12px; }
.scene-galaxy { grid-area: 1 / 6 / 3 / 9; --object-width: 260px; }
.scene-nebula { grid-area: 1 / 10 / 4 / 13; --object-width: 255px; }
.scene-black-hole { grid-area: 3 / 1 / 5 / 4; --object-width: 240px; translate: 0 15px; }
.scene-planet { grid-area: 4 / 9 / 6 / 11; --object-width: 140px; }
.scene-comet { grid-area: 5 / 3 / 7 / 6; --object-width: 245px; }
.scene-rocket { grid-area: 3 / 5 / 10 / 9; }
#stars-view .scene-rocket .img-wrap { width: auto; height: 100%; }
#stars-view .scene-rocket img { height: 100%; width: auto; }
.scene-spaceship { grid-area: 5 / 11 / 7 / 13; --object-width: 210px; }
.scene-space-station { grid-area: 7 / 1 / 10 / 5; --object-width: 350px; }
.scene-astronaut { grid-area: 7 / 8 / 10 / 10; --object-width: 150px; translate: 0 18px; }
.scene-spacesuit { grid-area: 7 / 10 / 10 / 12; --object-width: 135px; }

.scene-satellite { grid-area: 10 / 5 / 12 / 8; --object-width: 250px; translate: 0 20px; }
.scene-meteor { grid-area: 10 / 9 / 12 / 12; --object-width: 230px; translate: 0 20px; }
/* New station silhouette; the previous station's generated hit area does not apply. */
#stars-view .sp-space-station { clip-path: polygon(1% 11%, 12% 6%, 28% 21%, 46% 18%, 50% 2%, 58% 9%, 57% 22%, 73% 25%, 85% 44%, 87% 65%, 99% 83%, 88% 96%, 73% 82%, 41% 87%, 17% 77%, 10% 57%, 15% 31%); }
#img-wrap-space-station { transform-origin: 50% 50%; }
.earth-ground {
  grid-area: 12 / 1 / 13 / -1;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, .85fr);
  align-items: end;
  gap: clamp(8px, 2vw, 28px);
  padding: 35px 3% 28px;
  margin-top: 15px;
}
/* The atmospheric limb and shaded ground scale smoothly at every screen width. */
.earth-ground::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 12% -12px -15px;
  border-radius: 50% 50% 0 0 / 65px 65px 0 0;
  border-top: 1px solid #b7e9ff80;
  background: radial-gradient(ellipse at 50% 0, #426d83 0, #203e53 30%, #172e39 62%, #15242e 100%);
  box-shadow: 0 -6px 14px #62cfff30, 0 -18px 36px #218bd41c, inset 0 10px 24px #82d6e81f;
  pointer-events: none;
}
.earth-ground .gallery-item { min-width: 0; display: flex; justify-content: center; align-items: end; }
.earth-ground .scene-telescope { --object-width: 200px; }
.earth-ground .scene-observatory { --object-width: 280px; }
.earth-ground .scene-satellite-dish { --object-width: 200px; }
.earth-ground .scene-human { --object-width: 140px; }
.earth-ground .scene-alien { --object-width: 82px; }
.earth-ground .scene-meteorite { --object-width: 160px; }
.scene-visitors { display: flex; align-items: end; justify-content: center; gap: 6px; min-width: 0; }
.scene-visitors > .gallery-item { flex: 0 1 var(--object-width); }
@media (max-width: 600px) {
  #header .mdc-top-app-bar__section--align-start { min-width: 0; }
  #header #site-title { font-size: 12px; line-height: 16px; white-space: normal; padding-left: 8px; min-width: 0; }
  #header #right-header { flex: 0 0 40px; padding: 0; }
  .pill-navigation { gap: 8px; max-width: calc(100% - 24px); }
  .pill-btn { font-size: 13px; padding: 10px 12px; }
  .content-container { max-width: calc(100% - 24px); margin-top: 18px; }
  #stars-view {
    --scene-row: clamp(52px, 13vw, 76px);
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(15, var(--scene-row)) auto;
  }
  #stars-view > .gallery-item { padding: 7px; translate: none; }
  .scene-star { grid-area: 1 / 1 / 3 / 3; }
  .scene-constellation { grid-area: 1 / 3 / 3 / 5; }
  .scene-galaxy { grid-area: 1 / 5 / 3 / 7; }
  .scene-nebula { grid-area: 3 / 1 / 5 / 4; --object-width: 190px; }
  .scene-black-hole { grid-area: 3 / 4 / 5 / 7; }
  .scene-planet { grid-area: 5 / 1 / 7 / 3; --object-width: 95px; }
  .scene-rocket { grid-area: 5 / 3 / 11 / 5; }
  .scene-comet { grid-area: 5 / 5 / 8 / 7; }
  .scene-space-station { grid-area: 8 / 1 / 11 / 3; }
  .scene-spaceship { grid-area: 8 / 5 / 10 / 7; }
  .scene-astronaut { grid-area: 11 / 1 / 14 / 3; --object-width: 92px; }
  .scene-spacesuit { grid-area: 11 / 3 / 14 / 5; --object-width: 86px; }

  .scene-satellite { grid-area: 14 / 1 / 16 / 4; --object-width: 180px; }
  .scene-meteor { grid-area: 14 / 4 / 16 / 7; --object-width: 165px; }
  #stars-view > .scene-meteor { translate: 0 22px; }
  .earth-ground {
    grid-area: 16 / 1 / 17 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 12px;
    padding: 28px 10px 20px;
  }
  .earth-ground::before { inset: 8% 0 -12px; border-radius: 50% 50% 0 0 / 30px 30px 0 0; }
  .earth-ground .scene-visitors { grid-column: span 2; }
  .earth-ground .scene-human { --object-width: 112px; }
  .earth-ground .scene-alien { --object-width: 72px; }
  .earth-ground .scene-meteorite { --object-width: 100px; }
}

/* Worn suit: follow torso, gloves and boots, leaving the helmet outside the outline. */
.sp-astronaut-spacesuit-target {
  clip-path: polygon(35% 20%, 43% 23%, 52% 25%, 64% 26%, 70% 25%,
    77% 29%, 81% 36%, 88% 41%, 92% 46%, 94% 50%, 91% 55%,
    85% 55%, 86% 51%, 80% 48%, 72% 44%, 66% 39%, 64% 46%,
    69% 54%, 71% 65%, 68% 72%, 59% 81%, 55% 86%, 55% 92%,
    52% 95%, 46% 95%, 41% 92%, 37% 84%, 39% 80%, 47% 71%,
    51% 66%, 47% 57%, 43% 64%, 36% 70%, 27% 76%, 24% 82%,
    20% 85%, 15% 85%, 11% 81%, 13% 74%, 18% 67%, 23% 57%,
    24% 49%, 29% 42%, 29% 36%, 25% 36%, 23% 40%, 18% 44%,
    12% 45%, 8% 43%, 8% 37%, 10% 32%, 16% 27%, 25% 23%);
}

/* A small downward offset at every screen size. */
#stars-view > .scene-space-station { translate: 0 18px; }