.universe-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}

.universe-mode-switch {
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:3px;
  border:1px solid rgba(200,184,154,.12);
  border-radius:999px;
  background:rgba(10,10,12,.52);
  pointer-events:auto;
}

.universe-mode-switch button {
  width:34px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:999px;
  padding:0;
  background:transparent;
  color:rgba(238,231,218,.38);
  font:500 10px/1 'Space Mono',monospace;
  cursor:pointer;
  transition:background .18s,color .18s;
}

.universe-mode-switch button:hover { color:rgba(238,231,218,.72); }
.universe-mode-switch button.active {
  color:#f4c486;
  background:rgba(215,164,84,.12);
}

.universe-mode-switch .ui-icon { width:15px; height:15px; }

.atlas-view {
  position:relative;
  flex:1;
  min-height:0;
  display:none;
  overflow:hidden;
  color:#f6f5f3;
  background:
    radial-gradient(circle at 43% 47%,rgba(20,26,32,.5),transparent 58%),
    #0a0a0c;
}

.atlas-view::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.035;
  mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.universe-view.atlas-mode .atlas-view { display:flex; }
.universe-view.atlas-mode .universe-header-copy { display:none; }
.universe-view.atlas-mode .universe-header {
  justify-content:flex-end;
  padding:16px 28px;
  pointer-events:none;
}
.universe-view.atlas-mode .universe-mode-switch { pointer-events:auto; }
.universe-view.atlas-mode .universe-svg-wrap,
.universe-view.atlas-mode .universe-narration,
.universe-view.atlas-mode .universe-empty,
.universe-view.atlas-mode .universe-inspector,
.universe-view.atlas-mode .uchat,
.universe-view.atlas-mode #nodeTip,
.universe-view.atlas-mode .universe-guide { display:none !important; }

.atlas-canvas-wrap {
  position:relative;
  z-index:1;
  flex:1;
  min-width:0;
  min-height:0;
}

#atlasSvg {
  width:100%;
  height:100%;
  display:block;
}

.atlas-heading {
  position:absolute;
  left:32px;
  top:26px;
  z-index:4;
  max-width:620px;
  pointer-events:none;
}

.atlas-kicker {
  color:rgba(246,245,243,.24);
  font:500 9px/1 'Space Mono',monospace;
  letter-spacing:.32em;
}

.atlas-heading-title {
  margin-top:10px;
  color:#ede6da;
  font:italic 600 20px/1.4 'Noto Serif SC',serif;
}

.atlas-heading-meta {
  margin-top:7px;
  color:rgba(246,245,243,.34);
  font:400 9px/1.5 'Space Mono',monospace;
  letter-spacing:.08em;
}

.atlas-loading {
  position:absolute;
  left:50%;
  top:50%;
  z-index:8;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  transform:translate(-50%,-50%);
  color:rgba(246,245,243,.42);
  font:400 10px/1 'Space Mono',monospace;
  letter-spacing:.08em;
}

.atlas-loading span {
  width:24px;
  height:24px;
  border:1px solid rgba(255,148,64,.18);
  border-top-color:#ff9440;
  border-radius:50%;
  animation:atlasSpin .9s linear infinite;
}

.atlas-loading.hidden { display:none; }
@keyframes atlasSpin { to { transform:rotate(360deg); } }

.atlas-tooltip {
  position:absolute;
  z-index:20;
  width:250px;
  padding:12px 13px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  background:rgba(19,19,22,.94);
  box-shadow:0 16px 38px rgba(0,0,0,.46);
  opacity:0;
  visibility:hidden;
  transform:translateY(5px);
  pointer-events:none;
  transition:opacity .15s,transform .15s,visibility .15s;
}

.atlas-tooltip.show { opacity:1; visibility:visible; transform:translateY(0); }
.atlas-tooltip strong { display:block; color:#f1ece4; font:600 13px/1.45 'Noto Serif SC',serif; }
.atlas-tooltip p { margin:6px 0 0; color:rgba(246,245,243,.48); font:400 11px/1.55 'Noto Serif SC',serif; }
.atlas-tooltip small { display:block; margin-top:8px; color:rgba(246,245,243,.25); font:400 8px/1 'Space Mono',monospace; }

.atlas-expedition {
  position:absolute;
  top:50%;
  right:30px;
  z-index:12;
  width:330px;
  padding:21px 21px 19px;
  border:1px solid rgba(255,122,26,.25);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(23,23,27,.97),rgba(18,18,21,.97));
  box-shadow:0 22px 60px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.018);
  opacity:0;
  visibility:hidden;
  transform:translateY(-46%);
  transition:opacity .2s,transform .25s,visibility .2s;
}

.atlas-expedition.open {
  opacity:1;
  visibility:visible;
  transform:translateY(-50%);
}

.atlas-expedition-close {
  position:absolute;
  right:13px;
  top:11px;
  width:28px;
  height:28px;
  border:0;
  background:transparent;
  color:rgba(246,245,243,.25);
  cursor:pointer;
}

.atlas-expedition-kicker {
  color:#ff9440;
  font:500 9px/1 'Space Mono',monospace;
  letter-spacing:.16em;
}

.atlas-expedition-tag {
  display:inline-block;
  margin-top:15px;
  padding:4px 7px;
  border:1px solid rgba(246,245,243,.14);
  border-radius:5px;
  color:rgba(246,245,243,.32);
  font:400 8px/1 'Space Mono',monospace;
  letter-spacing:.18em;
}

.atlas-expedition-name {
  margin-top:11px;
  color:#f2ece2;
  font:italic 700 25px/1.2 Georgia,'Noto Serif SC',serif;
}

.atlas-expedition-description {
  margin-top:10px;
  color:rgba(246,245,243,.58);
  font:400 12px/1.58 'Noto Serif SC',serif;
}

.atlas-expedition-question {
  margin-top:15px;
  padding:11px 13px;
  border-left:2px solid #ff7a1a;
  border-radius:0 8px 8px 0;
  background:rgba(255,122,26,.065);
}

.atlas-expedition-question > div,
.atlas-expedition-alternatives > div {
  color:rgba(246,245,243,.28);
  font:500 8px/1 'Space Mono',monospace;
  letter-spacing:.18em;
}

.atlas-expedition-question p {
  margin:7px 0 0;
  color:#f6e4ce;
  font:500 14px/1.55 'Noto Serif SC',serif;
}

.atlas-expedition-alternatives {
  margin-top:13px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.055);
}

.atlas-expedition-alternatives p {
  margin:7px 0 0;
  color:rgba(246,245,243,.38);
  font:400 11px/1.5 'Noto Serif SC',serif;
}

@media (min-width:901px) {
  .universe-view.atlas-mode .universe-header {
    right:0;
    display:flex;
    width:100%;
  }
}

@media (max-width:900px) {
  .universe-header { align-items:center; }
  .universe-mode-switch button { padding:6px 9px; font-size:9px; }
  .atlas-heading { top:72px; left:22px; max-width:calc(100% - 44px); }
  .atlas-heading-title { font-size:17px; }
  .atlas-expedition {
    left:14px;
    right:14px;
    top:auto;
    bottom:14px;
    width:auto;
    max-height:52%;
    overflow:auto;
    transform:translateY(24px);
  }
  .atlas-expedition.open { transform:translateY(0); }
}

@media (max-width:560px) {
  .universe-header { gap:8px; padding:15px 13px 10px; }
  .universe-mode-switch { flex-shrink:0; }
  .universe-mode-switch button { padding:6px 7px; letter-spacing:0; }
  .atlas-heading { top:64px; left:16px; }
  .atlas-heading-title { display:none; }
  .atlas-heading-meta { max-width:240px; }
}