/* MarbleLens · Moon Race · direct solar scene layer (visual lane).
   Fixed behind the page: after the seeded .veil in source order, so the
   Moon is not dimmed by it, and below every content layer (z-index 1+).
   Decorative only: no pointer events, never focusable, hidden from
   assistive tech. The large-viewport height keeps mobile URL-bar changes
   from resizing the canvas. The fallback is the same static, formed
   solar model drawn by solar-system.js (Sun, dust disc, eight planets on
   their orbits, Saturn's ring in front of and behind it, the Moon beside
   Earth), never animated. --solar-sx/-sy place the Sun; --solar-k is the
   model's px per scene unit, so the fallback matches the WebGL framing. */
.solar-scene {
  position: fixed; left: 0; top: 0; z-index: 0;
  width: 100%; height: 100vh; height: 100lvh;
  overflow: hidden; pointer-events: none; user-select: none;
}
.solar-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* v13: the visited country's real border, drawn over the same Earth by
   solar-system.js; 0 × 0 and empty except during that visit. */
.solar-border { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.solar-scene.is-fallback .solar-border { visibility: hidden; }

.solar-fallback { display: none; position: absolute; inset: 0; }
.solar-scene.is-fallback .solar-fallback { display: block; }
.solar-scene.is-fallback .solar-canvas { visibility: hidden; }
.solar-fb-disc, .solar-fb-system { position: absolute; left: var(--solar-sx, 55%); top: var(--solar-sy, 50%); transform: translate(-50%, -50%); }
.solar-fb-disc {
  width: calc(var(--solar-k, 24px) * 38); height: calc(var(--solar-k, 24px) * 12); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(232, 197, 126, .16), rgba(232, 197, 126, .07) 45%, rgba(232, 197, 126, .02) 75%, rgba(232, 197, 126, 0));
}
.solar-fb-system { width: calc(var(--solar-k, 24px) * 34); height: calc(var(--solar-k, 24px) * 16); overflow: visible; }
.solar-fb-orbit { fill: none; stroke: rgba(232, 197, 126, .14); stroke-width: 1; }
.solar-fb-halo { fill: #e8c57e; opacity: .14; }
.solar-fb-claim { fill: #e8c57e; opacity: 0; }
.solar-scene.is-claimed .solar-fb-claim { opacity: 1; }
.solar-scene.is-claimed .solar-fb-halo { opacity: .32; }

/* The compressed-model note under the Sun, inside the hero's stage cell.
   Zero-specificity positioning so the page's own layout always wins. */
:where([data-solar-stage]) { position: relative; }
.solar-caption {
  position: absolute; left: 0; right: 0; bottom: 6px; margin: 0; padding: 0 8px;
  text-align: center; font-size: 11px; line-height: 1.4; letter-spacing: .02em;
  color: rgba(217, 212, 198, .5); pointer-events: none;
}

/* v12 leader visit: where, and how large, the scene shows the whole Earth
   (its centre and half its smaller side; country-scale framing, never a
   close-up), measured by solar-system.js. Never painted. Desktop: the
   upper stage cell, clear of the card below it; narrower: the left of
   the stage band, clear of the card on its right. */
.ls-globe { position: absolute; left: 50%; top: 33%; width: min(86%, 300px); aspect-ratio: 1; transform: translate(-50%, -50%); visibility: hidden; pointer-events: none; }
@media (max-width: 959px) { .ls-globe { left: 17%; top: 50%; width: auto; height: 70%; } }

@media print, (forced-colors: active) { .solar-scene { display: none; } }

/* V12 pixel review: keep the whole visiting Earth above its country card on short desktops. */
@media (min-width: 960px) and (max-height: 800px) { .ls-globe { top: 24%; width: min(80%, 270px); } }