/* scenes/flatround.js: a flat map beside a round planet, under a night sky. */
.gscene-flatround .gscene-stage {
  height: clamp(400px, 66vh, 620px); cursor: pointer;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff8, transparent),
    radial-gradient(1px 1px at 27% 64%, #fff7, transparent),
    radial-gradient(1.5px 1.5px at 44% 12%, #fff9, transparent),
    radial-gradient(1px 1px at 58% 82%, #fff6, transparent),
    radial-gradient(1.5px 1.5px at 71% 26%, #fff8, transparent),
    radial-gradient(1px 1px at 86% 70%, #fff7, transparent),
    radial-gradient(1px 1px at 93% 9%, #fff8, transparent),
    radial-gradient(ellipse 60% 70% at 75% 50%, #24457a, transparent 70%),
    radial-gradient(ellipse 55% 60% at 22% 60%, #2c4a3a, transparent 70%),
    linear-gradient(180deg, #0b1430, #101d3f 55%, #0a1226);
}
@media (max-aspect-ratio: 1/1) { .gscene-flatround .gscene-stage { height: clamp(520px, 82vh, 760px); } }
.fr-label {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 2px; opacity: 0; transition: opacity 0.4s;
  max-width: 46%;
}
.fr-label.on { opacity: 1; }
.fr-label b {
  font: 900 clamp(0.95rem, 2.2vw, 1.25rem)/1.1 var(--display); color: #fff; letter-spacing: 0.01em;
  padding: 5px 12px; border-radius: 10px; background: rgba(8, 12, 24, 0.72); border: 1px solid rgba(255, 255, 255, 0.14);
}
.fr-label span { font: 700 0.82rem/1.3 var(--display); color: rgba(255, 255, 255, 0.82); text-shadow: 0 1px 6px #000c; }
.fr-label .fr-laps { font: 800 0.8rem var(--display); color: var(--gold); text-shadow: 0 1px 6px #000c; }