/* Free-roam universe: deep-space backdrop, sector bodies, wormholes, radar and warp flashes. */
.ps-flight.is-roam { background: #02030a; }
.ps-flight.is-roam .ps-flight-stars { display: none; }

.ps-uni-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; will-change: transform; }
.ps-uni-neb { position: absolute; border-radius: 50%; pointer-events: none; }
.ps-uni-galaxy { position: absolute; pointer-events: none; opacity: 0.8; }
.ps-uni-galaxy svg { display: block; width: 100%; height: 100%; }
.ps-uni-stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.ps-uni-sector { position: absolute; left: 0; top: 0; pointer-events: none; }
.ps-uni-body { position: absolute; pointer-events: none; }
.ps-uni-art { position: relative; }
.ps-uni-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ps-uni-art svg + svg { position: absolute; left: 0; top: 0; }
.ps-uni-spin { animation: ps-uni-spin var(--d, 20s) linear infinite; }
.ps-uni-body.is-js .ps-uni-art { animation: none; }
.ps-uni-star .ps-uni-art { animation: ps-uni-pulse 4.5s ease-in-out infinite; }
.ps-uni-hole .ps-uni-art { animation: ps-uni-pulse 6s ease-in-out infinite; }
@keyframes ps-uni-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }

/* mining */
.ps-uni-rock { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; }
.ps-uni-rock svg { display: block; width: 100%; height: 100%; }
.ps-uni-rock.is-mined svg { filter: drop-shadow(0 0 8px #9fe8ff) brightness(1.3); }
.ps-uni-beam {
  position: absolute; height: 5px; margin-top: -2.5px; transform-origin: 0 50%; border-radius: 3px; pointer-events: none;
  background: repeating-linear-gradient(90deg, #fff 0 10px, #7fdcff 10px 22px); box-shadow: 0 0 12px 2px #6fd8ff;
  background-size: 22px 100%; animation: ps-uni-beam 0.35s linear infinite;
}
.ps-uni-beam[hidden] { display: none; }
@keyframes ps-uni-beam { to { background-position: 22px 0; } }
.ps-uni-stream {
  position: absolute; height: 16px; margin-top: -8px; transform-origin: 0 50%; pointer-events: none; opacity: 0.85;
  background: linear-gradient(90deg, #8fd0ff, #ffb347 70%, #fff6d8); border-radius: 8px; filter: blur(2.5px);
  clip-path: polygon(0 0, 100% 38%, 100% 62%, 0 100%);
}

/* merger, supernova and eruption effects */
.ps-uni-fx { position: absolute; width: 200px; height: 200px; translate: -50% -50%; border-radius: 50%; pointer-events: none; }
.ps-uni-bang { background: radial-gradient(circle, #fff 0 18%, var(--c) 38%, transparent 70%); animation: ps-uni-bang 1.8s ease-out forwards; }
.ps-uni-wave { border: 4px solid var(--c); box-shadow: 0 0 18px var(--c); opacity: 0; scale: 0.1; animation: ps-uni-wave 4.5s ease-out var(--d, 0s) forwards; }
.ps-uni-shock { border: 8px solid var(--c); box-shadow: 0 0 40px 6px var(--c), inset 0 0 40px 4px var(--c); width: 0; height: 0; }
.ps-uni-cloud { background: radial-gradient(circle, #fff6d8 0 14%, var(--c) 34%, #ff7a1a66 56%, transparent 72%); width: 360px; height: 360px; animation: ps-uni-cloud 7s ease-out forwards; }
@keyframes ps-uni-bang { from { scale: 0.1; opacity: 1; } to { scale: var(--s, 6); opacity: 0; } }
@keyframes ps-uni-wave { 0% { scale: 0.1; opacity: 0.8; } 100% { scale: 22; opacity: 0; } }
@keyframes ps-uni-cloud { 0% { scale: 0.2; opacity: 1; } 30% { opacity: 1; } 100% { scale: 1.8; opacity: 0; } }
.ps-uni-ping { border: 4px solid var(--c); box-shadow: 0 0 16px var(--c), inset 0 0 12px var(--c); opacity: 0; animation: ps-uni-ping 0.9s ease-out forwards; }
@keyframes ps-uni-ping { 0% { scale: 0.5; opacity: 0.95; } 100% { scale: 1.25; opacity: 0; } }
.ps-flight.is-reduced .ps-uni-ping { animation-duration: 0.01s; }
.ps-flight.is-reduced .ps-uni-spin, .ps-flight.is-reduced .ps-uni-beam { animation: none; }
.ps-flight.is-reduced .ps-uni-wave, .ps-flight.is-reduced .ps-uni-bang, .ps-flight.is-reduced .ps-uni-cloud { animation-duration: 0.01s; }

.ps-uni-label {
  position: absolute; left: 0; width: 220px; margin-left: -110px; font-style: normal; text-align: center; font-size: 18px; line-height: 1.1;
  color: rgba(255, 253, 248, 0.82); text-shadow: 0 1px 3px #000, 0 0 8px #000; white-space: normal;
}

.ps-uni-worm { width: 0; height: 0; }
.ps-uni-worm i:not(.ps-uni-label), .ps-uni-worm-core { position: absolute; left: -54px; top: -54px; width: 108px; height: 108px; border-radius: 50%; }
.ps-uni-worm-core { background: radial-gradient(circle, #000 0 38%, var(--c) 62%, transparent 72%); box-shadow: 0 0 46px 6px var(--c); opacity: 0.9; }
.ps-uni-worm i:not(.ps-uni-label) {
  background: conic-gradient(from 0deg, transparent 0, var(--c) 18%, transparent 36%, #fff 52%, transparent 68%, var(--c) 84%, transparent);
  -webkit-mask: radial-gradient(circle, transparent 26%, #000 34%, #000 68%, transparent 74%);
  mask: radial-gradient(circle, transparent 26%, #000 34%, #000 68%, transparent 74%);
  animation: ps-uni-spin 2.6s linear infinite;
}
.ps-uni-worm i:not(.ps-uni-label) + i:not(.ps-uni-label) { transform: scale(0.72); animation-duration: 1.8s; animation-direction: reverse; opacity: 0.85; }
@keyframes ps-uni-spin { to { rotate: 360deg; } }
.ps-flight.is-reduced .ps-uni-worm i:not(.ps-uni-label), .ps-flight.is-reduced .ps-uni-star .ps-uni-art, .ps-flight.is-reduced .ps-uni-hole .ps-uni-art { animation: none; }

/* roam ship: the nose follows the heading, so only the main flame is used */
.ps-flight.is-roam .ps-thruster { display: none; }

.ps-uni-info {
  position: absolute; left: max(10px, env(safe-area-inset-left)); top: max(10px, env(safe-area-inset-top)); z-index: 7; display: grid; gap: 3px; width: 96px; pointer-events: none;
}
.ps-uni-info canvas { display: block; width: 96px; height: 96px; border-radius: 14px; }
.ps-uni-info b { display: block; font-weight: normal; font-size: 14px; line-height: 1.1; color: #fffdf8; text-shadow: 0 1px 3px #000; }

.ps-flight::after {
  content: ''; position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #fff 0%, #d9b8ff 35%, #6a3dff 80%);
}
.ps-flight.is-warping::after { animation: ps-uni-warp 1s ease-in-out; }
.ps-flight.is-flung::after { background: radial-gradient(circle, transparent 20%, #fff 100%); animation: ps-uni-warp 0.7s ease-out; }
@keyframes ps-uni-warp { 0% { opacity: 0; } 45% { opacity: 1; } 55% { opacity: 1; } 100% { opacity: 0; } }
.ps-flight.is-reduced.is-warping::after, .ps-flight.is-reduced.is-flung::after { animation-duration: 0.3s; }

@media (max-width: 520px) {
  .ps-uni-info { width: 78px; }
  .ps-uni-info canvas { width: 78px; height: 78px; }
  .ps-roam-quota > span { font-size: 15px; }
  .ps-roam-hud { left: calc(98px + (100% - 98px) / 2); max-width: calc(100% - 108px); }
  .ps-roam-quota { flex-wrap: wrap; justify-content: center; }
  .ps-roam-quota-art { width: 20px; height: 20px; }
  .ps-flight.is-roam .ps-flight-hint { top: 150px; bottom: auto; max-width: calc(100% - 24px); font-size: 16px; }
}