/* scenes/moonradio.css -- the radio scene: a starry night, the labels, the status, the two buttons. */
.gscene-moonradio .gscene-stage { height: clamp(400px, 66vh, 620px);
  background: radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 32% 72%, #cfe0ff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 12%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 78% 42%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 82%, #cfe0ff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 44% 38%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 48%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 66% 88%, #fff 50%, transparent 51%),
    radial-gradient(ellipse 80% 70% at 30% 80%, #142a52, #070b18 70%); }
.mr-layer { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.mr-tag { position: absolute; left: 0; top: 0; padding: 4px 10px; border-radius: 99px; white-space: nowrap; font: 800 0.8rem/1.3 var(--display);
  color: var(--ink); background: rgba(10, 15, 28, 0.72); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); }
.mr-tag::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--water); }
.mr-moon::before { background: var(--muted); }
.is-lit .mr-earth::before { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.mr-status { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); margin: 0; padding: 6px 14px; border-radius: 99px; max-width: calc(100% - 32px);
  text-align: center; font: 800 0.86rem/1.35 var(--display); color: var(--ink); background: rgba(10, 15, 28, 0.78); border: 1px solid var(--line); }
.mr-status[data-state="lit"] { color: #0a0f1c; background: var(--gold); }
.mr-status[data-state="sent"] { color: #06202a; background: var(--water); }
.mr-status[data-state="deaf"], .mr-status[data-state="horizon"] { color: #fff; background: #7a3b52; }
.mr-bar { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0 16px; }
.mr-bar .btn { pointer-events: auto; }