/* Focused additions for the expanded catalogue, world pages and knowledge base. */
.app-footer a { color: #c8d5df; transition: color .18s ease; }
.app-footer a:hover { color: var(--accent); }

.catalog-intro {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  min-height: 208px;
  margin: 0 0 22px;
  padding: clamp(22px, 3vw, 34px);
  overflow: hidden;
  border: 1px solid rgba(141, 227, 221, .17);
  border-radius: 7px;
  background: linear-gradient(105deg, rgba(14, 22, 32, .98) 4%, rgba(20, 34, 46, .88) 60%, rgba(20, 34, 46, .6)), url('assets/multiverse-hero.png') 72% 52% / cover;
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 16px 44px rgba(0,0,0,.12);
}
.catalog-intro::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent 65%);
  opacity: .55;
}
.catalog-intro > div:first-child { position: relative; z-index: 1; max-width: 590px; }
.catalog-intro h2 { margin: 9px 0 8px; font: 700 clamp(25px,3vw,34px)/1.2 var(--display); letter-spacing: -.045em; }
.catalog-intro h2 em, .journal-feature h2 em, .help-hero h2 em { color: var(--accent); font-style: normal; }
.catalog-intro p { max-width: 520px; margin: 0; color: #aebbc7; font-size: 14px; line-height: 1.65; }
.catalog-metrics { position: relative; z-index: 1; display: flex; gap: 23px; padding: 12px 0 4px 22px; border-left: 1px solid rgba(235,244,250,.16); }
.catalog-metrics > div { display: flex; align-items: center; gap: 9px; }
.catalog-metrics strong { color: var(--accent); font: 700 27px/1 var(--display); letter-spacing: -.05em; }
.catalog-metrics span { color: #c1ccd4; font-size: 11px; line-height: 1.45; }
.server-version-group { margin-top: 23px; }
.server-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin-bottom: 11px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.server-group-head h2 { margin: 0; color: #eaf0f4; font: 650 17px var(--display); letter-spacing: -.02em; }
.server-group-head > span { color: #8999a7; font-size: 10px; font-weight: 700; letter-spacing: .12em; }

.world-journey { margin: 30px 0 28px; }
.world-journey .section-head { align-items: flex-end; }
.world-journey .section-head h2 { max-width: 600px; font-size: clamp(20px,2.4vw,25px); }
.journey-note { padding: 6px 9px; border: 1px solid rgba(255,196,118,.21); border-radius: 3px; color: #d9bf90; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.journey-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.journey-step { position: relative; min-height: 145px; padding: 17px 16px 15px; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: linear-gradient(150deg,rgba(20,31,43,.95),rgba(14,21,30,.94)); }
.journey-step::after { content: ''; position: absolute; right: -25px; bottom: -47px; width: 90px; height: 90px; border: 1px solid color-mix(in srgb,var(--accent) 18%,transparent); border-radius: 50%; box-shadow: 0 0 0 13px rgba(141,227,221,.018); }
.journey-index { display: inline-grid; width: 27px; height: 27px; place-items: center; border: 1px solid color-mix(in srgb,var(--accent) 35%,transparent); border-radius: 8px 8px 8px 2px; color: var(--accent); font-size: 11px; font-weight: 700; }
.journey-step > i { position: absolute; top: 30px; right: 16px; left: 55px; height: 1px; background: linear-gradient(90deg,color-mix(in srgb,var(--accent) 40%,transparent),transparent); }
.journey-step h3 { position: relative; z-index: 1; margin: 15px 0 5px; font: 650 14px var(--display); }
.journey-step p { position: relative; z-index: 1; max-width: 245px; margin: 0; color: #9eacb9; font-size: 12px; line-height: 1.6; }

.journal-feature, .help-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-height: 226px;
  margin-bottom: 25px;
  padding: clamp(25px,3.5vw,40px);
  overflow: hidden;
  border: 1px solid rgba(141,227,221,.16);
  border-radius: 7px;
  background: radial-gradient(ellipse at 85% 45%,rgba(63,163,158,.17),transparent 33%),linear-gradient(125deg,#142330,#101721 70%);
}
.journal-feature > div:last-child, .help-hero-copy { position: relative; z-index: 2; }
.journal-feature h2, .help-hero h2 { margin: 10px 0 8px; font: 700 clamp(28px,3.4vw,38px)/1.16 var(--display); letter-spacing: -.045em; }
.journal-feature p, .help-hero-copy > p { max-width: 520px; margin: 0; color: #adb9c4; font-size: 14px; line-height: 1.7; }
.journal-feature-art { position: absolute; top: 50%; right: 12%; width: 230px; height: 230px; display: grid; place-items: center; transform: translateY(-50%); }
.journal-feature-art > span { position: relative; z-index: 2; width: 78px; height: 78px; display: grid; place-items: center; border: 1px solid rgba(141,227,221,.38); border-radius: 21px 21px 21px 5px; background: rgba(11,18,26,.65); box-shadow: 0 0 48px rgba(67,187,179,.11); color: #eef8f6; font: 800 38px var(--display); transform: rotate(-8deg); }
.journal-feature-art > span span { color: var(--accent); }
.journal-feature-art i, .journal-feature-art b { position: absolute; width: 100%; height: 75px; border: 1px solid rgba(141,227,221,.24); border-radius: 50%; transform: rotate(-26deg); }
.journal-feature-art b { width: 160px; height: 160px; border-color: rgba(182,161,255,.19); transform: rotate(18deg); }
.journal-entry { grid-template-columns: 40px 1fr 25px; }
.journal-entry p { max-width: 820px; font-size: 14px; line-height: 1.7; }
.journal-entry h2 { font-size: 19px; }

.help-hero { min-height: 280px; margin-bottom: 16px; }
.help-hero-copy { max-width: 650px; }
.help-hero-copy .button { margin-top: 19px; }
.help-orbit-art { position: absolute; right: 7%; top: 50%; width: 230px; height: 230px; display: grid; place-items: center; transform: translateY(-50%); }
.help-ring { position: absolute; border: 1px solid rgba(141,227,221,.22); border-radius: 50%; }
.ring-one { width: 225px; height: 95px; transform: rotate(-27deg); }
.ring-two { width: 180px; height: 180px; border-color: rgba(182,161,255,.2); }
.help-book { position: relative; z-index: 2; width: 67px; height: 67px; display: grid; place-items: center; border: 1px solid rgba(141,227,221,.36); border-radius: 18px 18px 18px 4px; background: rgba(12,20,29,.75); color: var(--accent); box-shadow: 0 0 50px rgba(91,198,191,.13); transform: rotate(-7deg); }
.help-book .icon { width: 29px; height: 29px; }
.help-orbit-art small { position: absolute; bottom: 8px; right: -5px; color: #8c9ba7; font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.help-card { padding: 20px; border: 1px solid var(--line); border-radius: 5px; background: linear-gradient(145deg,#111b26,#101721); }
.help-card .panel-heading { margin-bottom: 13px; }
.panel-heading > span:last-child { font-size: 10px; }
.help-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.help-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 13px 0; border-top: 1px solid rgba(226,235,246,.07); }
.help-steps li > i { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid color-mix(in srgb,var(--accent) 25%,transparent); border-radius: 8px 8px 8px 2px; color: var(--accent); font-size: 10px; font-style: normal; font-weight: 700; }
.help-steps strong { display: block; margin: 1px 0 3px; font-size: 13px; }
.help-steps p { margin: 0; color: #9ba9b5; font-size: 12px; line-height: 1.55; }
.help-faq details { border-top: 1px solid rgba(226,235,246,.08); }
.help-faq summary { position: relative; padding: 15px 24px 15px 0; color: #e1e8ee; font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; }
.help-faq summary::-webkit-details-marker { display: none; }
.help-faq summary::after { content: '+'; position: absolute; right: 2px; top: 12px; color: var(--accent); font-size: 19px; font-weight: 400; }
.help-faq details[open] summary::after { content: '−'; }
.help-faq details p { margin: -5px 20px 14px 0; color: #9eacb8; font-size: 12px; line-height: 1.65; }
.help-bottom { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 16px 18px; border: 1px solid rgba(141,227,221,.13); border-radius: 5px; background: rgba(141,227,221,.035); }
.help-bottom-icon { width: 30px; height: 30px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid rgba(141,227,221,.3); border-radius: 50%; color: var(--accent); font-weight: 700; }
.help-bottom > div { flex: 1; }
.help-bottom strong { font-size: 13px; }
.help-bottom p { margin: 3px 0 0; color: #9ba9b5; font-size: 12px; line-height: 1.5; }
.help-bottom > a { display: flex; align-items: center; gap: 6px; color: var(--accent); font-size: 12px; font-weight: 600; }
.help-bottom > a .icon { width: 14px; height: 14px; }

@media (max-width: 900px) {
  .journey-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .catalog-metrics { gap: 14px; }
}
@media (max-width: 760px) {
  .catalog-intro { min-height: 190px; align-items: flex-start; flex-direction: column; gap: 15px; }
  .catalog-metrics { padding: 8px 0 0; border: 0; }
  .catalog-metrics strong { font-size: 22px; }
  .journal-feature, .help-hero { min-height: 230px; padding: 25px 21px; }
  .journal-feature-art { right: -47px; opacity: .38; }
  .help-orbit-art { right: -85px; opacity: .3; }
  .help-hero-copy { max-width: 100%; }
  .help-hero-copy > p { max-width: 440px; }
  .help-grid { grid-template-columns: 1fr; }
  .journey-grid { gap: 9px; }
  .journey-step { min-height: 139px; padding: 13px; }
  .journey-step h3 { font-size: 13px; }
  .journey-step p { font-size: 12px; }
  .help-bottom { align-items: flex-start; flex-wrap: wrap; }
  .help-bottom > a { margin-left: 44px; }
}
@media (max-width: 430px) {
  .journey-grid { grid-template-columns: 1fr; }
  .journey-step { min-height: 0; }
  .world-journey .section-head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .catalog-intro h2 { font-size: 25px; }
  .catalog-metrics { width: 100%; justify-content: flex-start; gap: 24px; }
  .help-bottom { gap: 10px; }
  .help-bottom > div { min-width: calc(100% - 48px); }
  .help-bottom > a { margin-left: 40px; }
  .journal-entry { grid-template-columns: 25px 1fr 15px; }
  .journal-entry p { font-size: 13px; }
}