/* scenes/flightplan.js -- hop, orbit, Moon: the three routes to a landing point */
.gscene-flightplan .gscene-stage { height: auto; min-height: 320px; padding: clamp(14px, 3vw, 28px);
  background: radial-gradient(ellipse 70% 60% at 30% 55%, #17305c, #0c1630 60%, #070b18); }
.fp { display: grid; gap: 14px; }
.fp-svg { width: 100%; height: auto; display: block; overflow: visible; }
.fp-earth { fill: #2f86d0; stroke: #7ed957; stroke-width: 6; stroke-dasharray: 18 10; }
.fp-air { fill: rgba(143, 184, 255, 0.14); }
.fp-moon { fill: #c9c6bd; }
.fp-ring { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 1.5; stroke-dasharray: 3 7; }
.fp-big { fill: #fff; font: 800 20px var(--display); text-anchor: middle; letter-spacing: 0.06em; text-transform: uppercase; }
.fp-small { fill: #d6def0; font: 800 14px var(--display); }
.fp-end { text-anchor: end; }
.fp-pad { fill: var(--torch); }
.fp-route { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0.22; }
.fp-route.is-on { stroke-width: 4.5; opacity: 1; }
.fp-mark { fill: none; stroke-width: 2.5; opacity: 0.25; }
.fp-mark circle + circle { stroke: none; }
.fp-mark.is-on { opacity: 1; }
.fp-r0 { stroke: var(--gold); --c: var(--gold); }
.fp-r1 { stroke: var(--water); --c: var(--water); }
.fp-r2 { stroke: var(--violet); --c: var(--violet); }
.fp-mark circle + circle { fill: var(--c); }
.fp-point { fill: var(--gold); transition: opacity 0.2s; }
.fp-dot { fill: #fff; stroke: rgba(10, 15, 28, 0.9); stroke-width: 3; }
.fp-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fp-tab { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; cursor: pointer; text-align: left; color: #fff;
  background: rgba(255, 255, 255, 0.05); border: 2px solid rgba(255, 255, 255, 0.1); transition: border-color 0.15s, background 0.15s; }
.fp-tab b { font: 800 0.98rem/1.2 var(--display); }
.fp-tab span { font: 800 0.85rem/1.3 var(--display); color: var(--c); font-variant-numeric: tabular-nums; }
.fp-tab[aria-pressed="true"] { border-color: var(--c); background: rgba(255, 255, 255, 0.09); }
.fp-tab:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.fp-text { min-height: 3em; font: 700 1rem/1.5 var(--display); color: #d6def0; }
@media (max-width: 560px) { .fp-tabs { grid-template-columns: 1fr; } .fp-small { font-size: 18px; } .fp-big { font-size: 24px; } }