/* Late, scoped presentation layer. Cockpit and conversations retain their native owners. */
body[data-vu-journey] { --vux-scroll-thumb: #b9dce547; }
body[data-vu-journey] :is(.vj-scene, main, .vfo-inline) { scrollbar-width: thin; scrollbar-color: var(--vux-scroll-thumb) transparent; }
body[data-vu-journey] :is(.vj-scene, main, .vfo-inline)::-webkit-scrollbar { width: 5px; height: 5px; }
body[data-vu-journey] :is(.vj-scene, main, .vfo-inline)::-webkit-scrollbar-track { background: transparent; }
body[data-vu-journey] :is(.vj-scene, main, .vfo-inline)::-webkit-scrollbar-thumb { border-radius: 9px; background: var(--vux-scroll-thumb); }
.vux-panorama { display: block !important; position: relative; overflow: hidden; width: 100%; min-height: 0 !important; max-height: none !important; margin: 0 !important; cursor: grab; touch-action: pan-y pinch-zoom; mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.vux-panorama:active { cursor: grabbing; }
.vux-panorama > .vux-galaxy { display: flex; flex-direction: column; align-items: center; justify-content: flex-start !important; position: absolute; min-width: 0 !important; max-width: none !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; transform: translate(-50%, -42%) !important; background: transparent; border: 0; color: #e8f6ff; text-align: center; text-decoration: none; user-select: none; transition: opacity 160ms ease; }
.vux-galaxy-art { display: block; width: 100%; height: calc(100% - 53px); object-fit: contain; transform: rotate(var(--vux-roll, 0deg)); filter: none; opacity: .97; pointer-events: none; }
.vux-panorama .vux-name { position: relative; font: 400 clamp(14px, 1.5vw, 18px)/1.4 system-ui, sans-serif; text-shadow: 0 2px 6px #000, 0 0 16px #000; margin-top: -6px; }
.vux-panorama .vux-galaxy small { position: relative; margin-top: 3px; font: 9px/1.5 ui-monospace, monospace; letter-spacing: .12em; text-shadow: 0 2px 6px #000; color: #a9c5d6; }
.vux-panorama .vux-galaxy:hover .vux-galaxy-art { filter: brightness(1.14); }
.vux-galaxy:focus-visible { outline: 1px solid #b4f3ff; outline-offset: 8px; border-radius: 50%; }
.vux-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; margin: 0 auto 8px; color: #c6e3eb; }
.vux-control, .vux-destination-select { appearance: none; color: #cdebf4; background: #020b1459; border: 0; border-bottom: 1px solid #b7dde735; border-radius: 0; min-height: 36px; padding: 7px 12px; font: 10px/1.4 ui-monospace, monospace; }
.vux-control { cursor: pointer; min-width: 38px; }
.vux-control:disabled { opacity: .4; cursor: default; }
.vux-control:focus-visible, .vux-destination-select:focus-visible { outline: 2px solid #d8faff; outline-offset: 2px; }
.vux-destination-select { max-width: 220px; cursor: pointer; }
.vux-destination-select option { background: #08131e; color: #e4f4fc; }
.vux-depth { min-width: 40px; font: 10px/1 ui-monospace, monospace; color: #92afbe; }
.vux-hint { margin: 2px 0 10px; text-align: center; font: 9px/1.5 ui-monospace, monospace; letter-spacing: .06em; color: #9bb8c7; }
/* The actual final panorama is already behind the birth veil. Only the veil fades. */
body[data-vu-intro] #vx-sky { display: none !important; }
body[data-vu-intro] .vj-backdrop { visibility: visible !important; }
body[data-vu-intro] .vj-scene { visibility: visible !important; }
.vux-birth-veil { position: fixed; inset: 0; z-index: 70; pointer-events: none; background: #010208; opacity: var(--vux-veil, 1); }
.vux-birth-light { position: absolute; left: 50%; top: 43%; width: min(55vw, 55vh); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(var(--vux-burst-scale, .01)); opacity: var(--vux-burst-opacity, 0); background: radial-gradient(circle, #fffbe8 0, #e9f8ffb8 1%, #95c7ec52 9%, #977fde14 28%, transparent 64%); mix-blend-mode: screen; }
.vux-birth-title { position: fixed; z-index: 74; left: 50%; top: 58%; width: min(80vw, 440px); transform: translateX(-50%); color: #d7eefa; text-align: center; font: 11px/1.8 ui-monospace, monospace; letter-spacing: .27em; opacity: var(--vux-title-opacity, 0); pointer-events: none; }
body[data-vu-intro=running] :is(.vj-flight-nav, .vj-motion, .vj-context-actions, .vj-source-actions, .vux-controls, .vux-hint, .vj-instrument, .vj-projector-disc, .vj-hologram), body[data-vu-intro=loading] :is(.vj-flight-nav, .vj-motion, .vj-context-actions, .vj-source-actions, .vux-controls, .vux-hint, .vj-instrument, .vj-projector-disc, .vj-hologram) { visibility: hidden !important; pointer-events: none !important; }
body[data-vu-intro=running] .vux-galaxy, body[data-vu-intro=loading] .vux-galaxy { pointer-events: none !important; }
#vx-skip[hidden], .vj-skip-flight[hidden], .vux-birth-veil[hidden], .vux-birth-title[hidden], .vux-replay[hidden] { display: none !important; }
#vx-skip { z-index: 80; font: 11px/1.4 ui-monospace, monospace; background: #020a1270; border: 1px solid #badcea36; padding: 10px 14px; border-radius: 2px; }
body[data-vu-intro=complete] #vx-skip { display: none !important; }
.vux-replay { font: 10px/1.5 ui-monospace, monospace; background: transparent; color: #a9c6d4; border: 0; cursor: pointer; min-height: 36px; }
@media (max-width: 600px) {
  .vux-controls { gap: 3px 5px; margin-bottom: 3px; }
  .vux-control { padding: 6px 10px; min-height: 44px; }
  .vux-destination-select { min-height: 44px; max-width: 170px; }
  .vux-hint { font-size: 8px; }
  .vux-panorama .vux-name { font-size: 16px; }
  .vux-panorama .vux-galaxy small { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) { .vux-galaxy, .vux-galaxy-art, .vux-birth-veil { transition: none !important; animation: none !important; } }
.vux-replay { position: fixed; left: 5vw; bottom: 14px; z-index: 30; }
.vux-birth-light { opacity: var(--vux-burst-opacity, 0); }
body[data-vu-intro=complete] .vux-birth-veil, body[data-vu-intro=complete] .vux-birth-title { display: none !important; }
/* Product families are systems; only explicit parent relationships become satellites. */
.vux-systems { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 4vw, 64px); align-items: start; min-height: 260px; }
.vux-system-card { position: relative; min-width: 0; text-align: center; padding: 0 0 20px; }
.vux-system-kicker { font: 9px/1.3 ui-monospace, monospace; letter-spacing: .2em; color: #87a5b7; margin: 0 0 8px; }
.vux-system-sun { display: flex; flex-direction: column; align-items: center; color: #e1f4fd; text-decoration: none; }
.vux-system-sun .vu-planet-art { width: 100%; max-width: 330px; height: clamp(130px, 20vw, 245px); object-fit: contain; }
.vux-system-sun strong { font: 400 18px/1.4 system-ui, sans-serif; margin-top: 2px; }
.vux-system-sun small { font: 9px/1.5 ui-monospace, monospace; color: #a6becd; margin-top: 4px; max-width: 240px; }
.vux-system-preview { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 10px 0 0; }
.vux-system-preview .vu-planet-art { width: 32px; height: 32px; object-fit: contain; transform: translateY(calc(var(--vux-satellite-index, 0) * -3px)); }
.vux-system-count { font: 9px/1.4 ui-monospace, monospace; color: #8ba8b8; margin: 5px 0 0; }
.vux-record-group { margin: 24px 0; border-top: 1px solid #b6dae426; padding-top: 12px; }
.vux-record-group h4 { font: 11px/1.5 ui-monospace, monospace; color: #bed7e4; margin: 0 0 8px; font-weight: 400; }
.vux-record-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.vux-record-links a { display: inline-flex; flex-direction: column; min-height: 44px; padding: 6px 0; color: #d6e8f2; font-size: 13px; text-decoration: none; }
.vux-record-links small { font: 9px/1.5 ui-monospace, monospace; color: #95afbf; }
.vux-record-links a:hover { color: #fff; text-decoration: underline; }
.vux-system-detail { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.vux-system-current { width: 100%; }
.vux-system-current .vu-planet-art { width: 100%; max-width: 420px; height: 28vh; max-height: 330px; }
.vux-system-current strong, .vux-system-current small { display: none; }
.vux-system-orbit { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px 12px; width: 100%; }
.vux-system-satellite { display: flex; flex-direction: column; align-items: center; color: #d8ebf6; text-decoration: none; text-align: center; }
.vux-system-satellite .vu-planet-art { width: 65px; height: 65px; object-fit: contain; }
.vux-system-satellite strong { font: 400 11px/1.4 system-ui; }
.vux-system-satellite small { font: 8px/1.4 ui-monospace; color: #94afbf; }
.vux-product-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.vux-product-actions a, .vux-product-actions button { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 10px; color: #d0f1fa; background: #05132175; border: 1px solid #9ecee338; font: 11px/1.4 ui-monospace; text-decoration: none; cursor: pointer; }
@media(max-width: 760px) {
 .vux-systems { grid-template-columns: 1fr; gap: 22px; }
 .vux-system-sun .vu-planet-art { width: min(75vw, 285px); height: 235px; }
 .vux-system-current .vu-planet-art { height: 26vh; }
 .vux-system-orbit { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
body:is([data-vu-scene=universe], [data-vu-scene=galaxy], [data-vu-scene=cockpit]) .vj-backdrop { inset: 0; background-size: auto 100%; background-repeat: repeat-x; background-position: var(--vux-pan-x, 50%) center; transform: none; filter: none; transition: background-position 100ms linear; }
.vux-ambient { position: absolute; height: auto; max-height: 115px; object-fit: contain; transform: translate(-50%, -50%); pointer-events: none; opacity: .6; z-index: 0; }
.vux-ambient[hidden] { display: none !important; }
.vux-ship { max-width: 75px; opacity: .45; animation: vux-distant-flight 40s linear infinite alternate; }
@keyframes vux-distant-flight { from { transform: translate(-80%, -50%); } to { transform: translate(70%, -64%); } }
body[data-vu-motion=paused] .vux-ship { animation-play-state: paused; }
@media(prefers-reduced-motion:reduce) { .vux-ship { animation: none; }.vj-backdrop { transition: none !important; } }
.vux-systems:has(> .vux-system-card:only-child) { grid-template-columns: minmax(220px, 350px); justify-content: center; }
.vux-entry-status { font-size: 11px; line-height: 1.7; border-left: 1px solid #98b9c84d; padding-left: 10px; }
body[data-vu-aboard] .vfo-inline[data-level=universe] .vfo-public-map { min-height: 0; }
body[data-vu-aboard] .vfo-inline[data-level=universe] .vfo-body { min-height: 0; }
.vux-panorama:focus-visible { outline: 1px solid #b0d7e340; outline-offset: -2px; }

/* Height-aware map: labels stay readable independently of galaxy image scale. */
.vux-panorama .vux-galaxy-art { flex:none; }
.vux-panorama :is(.vux-name,small) { max-width:180px; overflow-wrap:anywhere; flex:none; }

body[data-vu-journey][data-vu-aboard] .vux-panorama > .vux-galaxy { max-height:none !important; }
body[data-vux-dragging] .vj-backdrop { transition:none !important; }