/* Reusable projected HUD frame. Set --hud-rgb to three comma-separated RGB values. */
:root { --hud-rgb: 91, 198, 238; }
.hud-projection {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 4px;
  background:
    linear-gradient(90deg, transparent 6%, rgba(var(--hud-rgb), .24) 28%, rgba(var(--hud-rgb), .1) 72%, transparent 94%) center top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 6%, rgba(var(--hud-rgb), .13) 28%, rgba(var(--hud-rgb), .2) 72%, transparent 94%) center bottom / 100% 1px no-repeat,
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(var(--hud-rgb), .012) 7px 8px),
    radial-gradient(ellipse at 50% 0%, rgba(var(--hud-rgb), .1), transparent 75%),
    linear-gradient(90deg, rgba(3, 14, 29, .7), rgba(8, 31, 54, .48) 17%, rgba(8, 28, 51, .3) 50%, rgba(8, 31, 54, .48) 83%, rgba(3, 14, 29, .7));
  box-shadow: 0 16px 55px rgba(0, 0, 0, .25), inset 0 0 38px rgba(var(--hud-rgb), .045);
  backdrop-filter: blur(13px);
}
.hud-projection::before,
.hud-projection::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: -7px;
  bottom: -7px;
  width: 25px;
  pointer-events: none;
  clip-path: polygon(32% 0, 88% 0, 100% 7%, 100% 24%, 80% 28%, 80% 72%, 100% 76%, 100% 93%, 88% 100%, 32% 100%, 0 95%, 0 5%);
  background:
    linear-gradient(90deg, rgba(var(--hud-rgb), .07) 0 3px, rgba(var(--hud-rgb), .82) 3px 5px, rgba(var(--hud-rgb), .19) 5px 9px, rgba(3, 16, 34, .93) 9px 20px, rgba(var(--hud-rgb), .46) 20px 22px, transparent 22px),
    linear-gradient(180deg, rgba(var(--hud-rgb), .77), transparent 16%, rgba(var(--hud-rgb), .28) 47%, transparent 84%, rgba(var(--hud-rgb), .77));
  filter: drop-shadow(0 0 9px rgba(var(--hud-rgb), .52));
}
.hud-projection::before { left: -7px; }
.hud-projection::after { right: -7px; transform: scaleX(-1); }

.universe-topbar.hud-projection,
.journey.hud-projection { border: 0; border-radius: 4px; }
.journey.hud-projection { padding-inline: 15px; }
.content.hud-projection::before,
.content.hud-projection::after { top: 0;bottom: 0; }
.content.hud-projection::before { left: 0; }
.content.hud-projection::after { right: 0; }

@media (max-width: 650px) {
  .hud-projection::before,
  .hud-projection::after { width: 18px; }
}