/* scenes/moonjump.js -- one jump on the Earth, one on the Moon */
.gscene-moonjump .gscene-stage { height: clamp(420px, 70vh, 640px); background: #0a0f1c; }
.mj-bg { position: absolute; inset: 0; pointer-events: none; }
.mj-bg i { position: absolute; top: 0; bottom: 0; }
.mj-earth-sky { left: 0; width: 50%; background: linear-gradient(180deg, #3d7fd6 0%, #79b1ec 55%, #cfe7fb 100%); }
.mj-moon-sky {
  right: 0; width: 50%; border-left: 2px solid rgba(255, 255, 255, 0.35);
  background:
    radial-gradient(1.5px 1.5px at 14% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 33% 62%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 52% 12%, #dfe8ff 50%, transparent 51%), radial-gradient(1px 1px at 71% 44%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 30%, #cfe0ff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 24% 86%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 62% 74%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 92% 82%, #fff 50%, transparent 51%),
    linear-gradient(180deg, #02040a, #070b18);
}
.mj-sun { left: 6%; top: 7% !important; bottom: auto !important; width: 70px; height: 70px; border-radius: 50%;
  background: radial-gradient(circle, #fff7d6 0 32%, rgba(255, 230, 150, 0.5) 45%, transparent 70%); }
.mj-side { position: absolute; top: 14px; z-index: 3; max-width: 46%; pointer-events: none; display: grid; gap: 2px; }
.mj-side.is-earth { left: 16px; }
.mj-side.is-moon { right: 16px; text-align: right; }
.mj-name { font: 800 clamp(1.1rem, 2.4vw, 1.6rem)/1.1 var(--display); color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); }
.mj-g { font: 800 0.8rem var(--display); letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }
.mj-read { margin-top: 6px; display: inline-flex; flex-direction: column; gap: 1px; justify-self: start; padding: 6px 12px; border-radius: 12px;
  background: rgba(8, 12, 24, 0.72); border: 1px solid rgba(255, 255, 255, 0.14); }
.is-moon .mj-read { justify-self: end; }
.mj-read b { font: 800 1.15rem/1.15 var(--display); color: var(--gold); font-variant-numeric: tabular-nums; }
.mj-read span { font: 700 0.82rem/1.3 var(--display); color: #d6def0; }
.gscene-moonjump .gscene-hint { top: auto; bottom: 14px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
@media (max-width: 560px) { .mj-sun { width: 44px; height: 44px; } .mj-read b { font-size: 1rem; } }