/* scenes/moonphases.css -- the orbit seen from above and the two portholes (scenes/moonphases.js) */
.gscene-moonphases .gscene-stage { height: clamp(460px, 70vh, 620px); cursor: pointer;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 31% 82%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 12%, #dfe8ff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 88% 54%, #fff 50%, transparent 51%),
    radial-gradient(ellipse 60% 70% at 0% 50%, rgba(255, 196, 80, 0.16), transparent 70%),
    linear-gradient(180deg, #050913, #0a1226 55%, #050913); }
.mp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mp-handle { position: absolute; left: 0; top: 0; z-index: 3; border-radius: 50%; cursor: grab; touch-action: none;
  border: 2px dashed rgba(255, 204, 77, 0.55); box-shadow: 0 0 0 6px rgba(255, 204, 77, 0.08); transition: border-color 0.2s; }
.mp-handle:hover, .mp-handle:active { border-color: var(--gold); cursor: grabbing; }
.mp-nav { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 4; display: flex; justify-content: center; align-items: center; gap: 14px; pointer-events: none; }
.mp-nav > * { pointer-events: auto; }
.mp-live { margin: 0; min-width: 11em; text-align: center; font: 800 1.05rem var(--display); color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }
.mp-btn { width: 44px; height: 44px; border-radius: 13px; border: 0; cursor: pointer; font: 800 1.6rem/1 var(--display); color: #2b1a00;
  background: linear-gradient(180deg, #ffe08a, var(--gold)); box-shadow: 0 5px 0 #8a5a00, 0 10px 20px rgba(0, 0, 0, 0.35); transition: transform 0.12s, box-shadow 0.12s; }
.mp-btn:hover { transform: translateY(-2px); }
.mp-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #8a5a00; }
@media (max-width: 640px) { .gscene-moonphases .gscene-stage { height: clamp(520px, 82vh, 640px); } .mp-live { min-width: 8em; font-size: 0.95rem; } }