/* Open holographic mission selector, selected 2026-07-30. */
.mission-control-selector {
  overflow: visible;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.mission-control-selector::before {
  inset: -8%;
  opacity: .72;
  background:
    radial-gradient(circle at 18% 26%, rgba(150, 193, 255, .56) 0 1px, transparent 1.5px),
    radial-gradient(circle at 83% 19%, rgba(150, 193, 255, .42) 0 1px, transparent 1.5px),
    radial-gradient(circle at 76% 73%, rgba(150, 193, 255, .4) 0 1px, transparent 1.5px),
    radial-gradient(circle at 29% 81%, rgba(150, 193, 255, .32) 0 1px, transparent 1.5px),
    radial-gradient(circle at 52% 50%, rgba(46, 104, 184, .16), transparent 55%);
  mask-image: none;
}

.mission-control-selector > p {
  margin: 0 0 .35rem 4%;
  color: rgba(231, 238, 248, .76);
  font-size: .72rem;
}

.mission-control-options {
  height: clamp(350px, 39vw, 430px);
  overflow: visible;
  background:
    radial-gradient(circle at 52% 51%, rgba(54, 118, 208, .12), transparent 28%),
    radial-gradient(circle at 52% 51%, rgba(6, 11, 18, .2), transparent 61%);
}

.mission-control-options::before,
.mission-control-options::after {
  position: absolute;
  z-index: 0;
  top: 52%;
  left: 52%;
  content: "";
  border: 1px solid rgba(113, 171, 248, .18);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-10deg);
  pointer-events: none;
}

.mission-control-options::before {
  width: 88%;
  height: 58%;
  box-shadow:
    0 0 0 36px rgba(87, 146, 226, .025),
    inset 0 0 30px rgba(69, 132, 218, .035);
}

.mission-control-options::after {
  width: 64%;
  height: 40%;
  border-style: dashed;
  opacity: .64;
  transform: translate(-50%, -50%) rotate(12deg);
}

.mission-control-core {
  z-index: 2;
  top: 52%;
  left: 52%;
  width: 174px;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.mission-control-core::before {
  inset: -16px;
  border: 1px solid rgba(130, 183, 255, .26);
  box-shadow:
    0 0 0 12px rgba(94, 154, 236, .035),
    0 0 42px rgba(69, 137, 231, .22);
  animation: mission-hologram-orbit 18s linear infinite;
}

.mission-control-core::after {
  inset: 0;
  width: auto;
  height: auto;
  translate: none;
  border: 1px solid rgba(164, 202, 255, .24);
  background: radial-gradient(circle at 35% 24%, rgba(255, 255, 255, .18), transparent 27%);
  box-shadow:
    inset -22px -24px 34px rgba(0, 2, 7, .48),
    inset 7px 5px 20px rgba(139, 186, 255, .08);
}

.mission-control-planet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 50%;
  object-fit: cover;
  object-position: 82% center;
  filter: saturate(.86) contrast(1.12) brightness(.8);
  animation: mission-planet-turn 18s ease-in-out infinite alternate;
}

.mission-control-moon {
  position: absolute;
  z-index: 4;
  top: -24px;
  right: -34px;
  width: 34px;
  aspect-ratio: 1;
  border: 1px solid rgba(191, 215, 248, .28);
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 30%, #c2b8a9 0 5%, transparent 6%),
    radial-gradient(circle at 58% 62%, #706b65 0 9%, transparent 10%),
    radial-gradient(circle at 35% 32%, #aaa49a, #494b50 54%, #151a22 78%);
  box-shadow:
    inset -7px -8px 11px rgba(0, 0, 0, .6),
    0 0 18px rgba(116, 167, 234, .18);
  animation: mission-moon-drift 7s ease-in-out infinite alternate;
}

.mission-control-core span {
  position: absolute;
  z-index: 5;
  bottom: -20px;
  left: 50%;
  width: max-content;
  max-width: none;
  padding: .42rem .62rem;
  translate: -50% 0;
  border: 1px solid rgba(131, 181, 247, .3);
  border-radius: 6px;
  background: rgba(3, 8, 15, .78);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  color: rgba(235, 243, 255, .88);
  font-size: .58rem;
  backdrop-filter: blur(8px);
}

.mission-control-route {
  top: 52%;
  left: 52%;
  z-index: 1;
  opacity: .18;
  background: linear-gradient(90deg, rgba(120, 176, 250, .5), rgba(120, 176, 250, .1));
}

.mission-control-route[data-mission-route="0"] {
  --route-angle: -140deg;
  --route-length: 49%;
}

.mission-control-route[data-mission-route="1"] {
  --route-angle: -45deg;
  --route-length: 47%;
}

.mission-control-route[data-mission-route="2"] {
  --route-angle: 132deg;
  --route-length: 45%;
}

.mission-control-route[data-mission-route="3"] {
  --route-angle: 35deg;
  --route-length: 41%;
}

.mission-control-options:has([data-mission-scene="0"].is-active) [data-mission-route="0"],
.mission-control-options:has([data-mission-scene="1"].is-active) [data-mission-route="1"],
.mission-control-options:has([data-mission-scene="2"].is-active) [data-mission-route="2"],
.mission-control-options:has([data-mission-scene="3"].is-active) [data-mission-route="3"] {
  opacity: 1;
  background: linear-gradient(90deg, rgba(128, 188, 255, .98), rgba(77, 147, 241, .28));
}

.mission-control-option {
  width: 168px;
  min-height: 42px;
  grid-template-columns: 1fr;
  padding: .7rem .8rem .7rem 2.55rem;
  border-color: rgba(136, 178, 235, .18);
  background: rgba(3, 8, 14, .72);
  color: rgba(237, 243, 251, .74);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, .2),
    inset 0 1px 0 rgba(255, 255, 255, .035);
  backdrop-filter: blur(10px) saturate(110%);
}

.mission-control-option::before {
  position: absolute;
  top: 50%;
  left: 1.08rem;
  width: 11px;
  aspect-ratio: 1;
  content: "";
  translate: -50% -50%;
  border: 1px solid rgba(151, 194, 250, .64);
  border-radius: 50%;
  background: #0c1725;
  box-shadow:
    0 0 0 5px rgba(104, 166, 248, .07),
    0 0 0 10px rgba(104, 166, 248, .035);
  transition: background 220ms ease, box-shadow 320ms ease, scale 320ms cubic-bezier(.16, 1, .3, 1);
}

.mission-control-option::after {
  top: -.72rem;
  right: auto;
  left: 2.55rem;
}

.mission-control-option img,
.mission-control-option small {
  display: none;
}

.mission-control-option b {
  overflow: hidden;
  font-size: .76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mission-control-option[data-mission-scene="0"] {
  top: 8%;
  left: 0;
}

.mission-control-option[data-mission-scene="1"] {
  top: 5%;
  right: -1%;
}

.mission-control-option[data-mission-scene="2"] {
  bottom: 5%;
  left: 7%;
}

.mission-control-option[data-mission-scene="3"] {
  right: 0;
  bottom: 14%;
}

.mission-control-option:hover,
.mission-control-option:focus-visible {
  border-color: rgba(139, 187, 252, .48);
  background: rgba(12, 24, 41, .86);
}

.mission-control-option.is-active {
  border-color: rgba(115, 177, 255, .68);
  background: rgba(9, 24, 44, .84);
  box-shadow:
    0 0 0 1px rgba(105, 169, 255, .08),
    0 15px 36px rgba(0, 0, 0, .25);
}

.mission-control-option.is-active::before {
  background: #a8ceff;
  box-shadow:
    0 0 0 5px rgba(105, 170, 255, .16),
    0 0 0 11px rgba(105, 170, 255, .08),
    0 0 24px rgba(90, 157, 247, .9);
  scale: 1.08;
}

@keyframes mission-planet-turn {
  from {
    transform: scale(1.22) translate3d(-4%, 0, 0);
  }
  to {
    transform: scale(1.12) translate3d(4%, -1%, 0);
  }
}

@keyframes mission-moon-drift {
  from {
    transform: translate3d(-3px, 2px, 0);
  }
  to {
    transform: translate3d(4px, -3px, 0);
  }
}

@keyframes mission-hologram-orbit {
  to {
    rotate: 360deg;
  }
}

@media (max-width: 1000px) {
  .mission-control-selector {
    width: min(100%, 720px);
  }

  .mission-control-options {
    height: 300px;
  }

  .mission-control-core {
    width: 128px;
  }

  .mission-control-option {
    width: 164px;
  }

  .mission-control-option[data-mission-scene="0"] {
    top: 6%;
  }

  .mission-control-option[data-mission-scene="1"] {
    top: 3%;
  }

  .mission-control-option[data-mission-scene="2"] {
    bottom: 2%;
  }

  .mission-control-option[data-mission-scene="3"] {
    bottom: 11%;
  }
}

@media (max-width: 700px) {
  .mission-control-selector {
    padding: 0;
  }

  .mission-control-options {
    height: 172px;
    background: radial-gradient(circle at 50% 50%, rgba(55, 118, 207, .13), transparent 34%);
  }

  .mission-control-options::before {
    top: 50%;
    left: 50%;
    width: 76%;
    height: 56%;
  }

  .mission-control-options::after {
    top: 50%;
    left: 50%;
    width: 56%;
    height: 39%;
  }

  .mission-control-core {
    top: 50%;
    left: 50%;
    width: 72px;
  }

  .mission-control-core::before {
    inset: -8px;
  }

  .mission-control-moon {
    top: -13px;
    right: -18px;
    width: 19px;
  }

  .mission-control-core span {
    bottom: -13px;
    padding: .28rem .38rem;
    font-size: .42rem;
  }

  .mission-control-route {
    top: 50%;
    left: 50%;
  }

  .mission-control-route[data-mission-route="0"] {
    --route-angle: -159deg;
    --route-length: 42%;
  }

  .mission-control-route[data-mission-route="1"] {
    --route-angle: -21deg;
    --route-length: 42%;
  }

  .mission-control-route[data-mission-route="2"] {
    --route-angle: 159deg;
    --route-length: 42%;
  }

  .mission-control-route[data-mission-route="3"] {
    --route-angle: 21deg;
    --route-length: 42%;
  }

  .mission-control-option {
    width: 124px;
    min-height: 36px;
    padding: .52rem .5rem .52rem 2rem;
  }

  .mission-control-option::before {
    left: .85rem;
    width: 9px;
  }

  .mission-control-option::after {
    display: none;
  }

  .mission-control-option b {
    font-size: .6rem;
    letter-spacing: -.01em;
  }

  .mission-control-option[data-mission-scene="0"] {
    top: 2%;
    left: 0;
  }

  .mission-control-option[data-mission-scene="1"] {
    top: 2%;
    right: 0;
  }

  .mission-control-option[data-mission-scene="2"] {
    bottom: 2%;
    left: 0;
  }

  .mission-control-option[data-mission-scene="3"] {
    right: 0;
    bottom: 2%;
  }
}

@media (max-width: 370px) {
  .mission-control-option {
    width: 106px;
    padding-left: 1.8rem;
  }

  .mission-control-option::before {
    left: .75rem;
  }

  .mission-control-option b {
    font-size: .58rem;
  }
}

@media (max-height: 760px) and (min-width: 1001px) {
  .mission-control-options {
    height: 330px;
  }

  .mission-control-core {
    width: 132px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mission-control-planet,
  .mission-control-moon,
  .mission-control-core::before {
    animation: none;
  }
}