/* KINGQUOC Cosmic Atlas Command Center v1 */
.command-center-page {
  --command-page: min(1680px, calc(100vw - 48px));
  --command-gold: #e6c373;
  --command-cyan: #70d7ff;
  --command-violet: #a78bfa;
  --command-red: #ff6685;
  --command-green: #68dfb8;
  --command-orange: #efaa68;
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 14% 18%, rgba(75, 155, 210, .1), transparent 34rem),
    radial-gradient(circle at 83% 28%, rgba(130, 91, 186, .09), transparent 38rem),
    linear-gradient(180deg, #020710 0%, #050b15 48%, #030710 100%);
}

.command-background {
  position: fixed;
  z-index: -2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.command-grid {
  position: absolute;
  inset: 0;
  opacity: .52;
  background-image:
    linear-gradient(rgba(118, 190, 230, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(118, 190, 230, .03) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: linear-gradient(to bottom, black, transparent 92%);
}

.command-glow {
  position: absolute;
  width: 36rem;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(95px);
  opacity: .12;
}

.command-glow-a { top: 8%; left: -12rem; background: #2e9bd0; }
.command-glow-b { right: -13rem; top: 30%; background: #8648ae; }

.command-orbit {
  position: absolute;
  border: 1px solid rgba(197, 221, 238, .055);
  border-radius: 50%;
}

.command-orbit-a { width: 62vw; height: 62vw; right: -23vw; top: -19vw; }
.command-orbit-b { width: 50vw; height: 50vw; left: -28vw; bottom: -30vw; }

.command-star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #dff6ff;
  box-shadow: 0 0 14px currentColor;
}
.star-a { left: 11%; top: 26%; color: var(--command-cyan); }
.star-b { right: 18%; top: 13%; color: var(--command-gold); }
.star-c { right: 8%; bottom: 22%; color: var(--command-violet); }

.command-header {
  min-height: 72px;
  padding-block: 10px;
  background: rgba(2, 7, 15, .9);
  border-bottom-color: rgba(115, 171, 208, .18);
  backdrop-filter: blur(22px);
}

.command-header .primary-nav a[aria-current="page"] {
  color: #f4dfa8;
}

.command-header .primary-nav a[aria-current="page"]::after {
  width: 100%;
}

.command-hero {
  position: relative;
  width: var(--command-page);
  min-height: 650px;
  margin: 0 auto;
  padding: 108px 0 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, .55fr);
  align-items: center;
  gap: clamp(42px, 7vw, 110px);
}

.command-hero-copy { position: relative; z-index: 3; }
.command-hero .kicker { color: var(--command-gold); }

.command-hero h1 {
  margin: 18px 0 0;
  font-family: var(--serif);
  font-size: clamp(66px, 7.2vw, 124px);
  font-weight: 400;
  letter-spacing: -.058em;
  line-height: .84;
}

.command-hero h1 span {
  color: transparent;
  -webkit-text-stroke: 1px rgba(230, 195, 115, .88);
  text-shadow: 0 0 54px rgba(230, 195, 115, .12);
}

.command-deck {
  max-width: 760px;
  margin: 30px 0 0;
  color: #b8c7d6;
  font-family: var(--serif);
  font-size: clamp(18px, 1.2vw, 22px);
  line-height: 1.68;
}

.command-core {
  position: relative;
  width: min(35vw, 500px);
  aspect-ratio: 1;
  justify-self: end;
  display: grid;
  place-items: center;
  border: 1px solid rgba(230, 195, 115, .14);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(230, 195, 115, .15), transparent 8%),
    radial-gradient(circle, rgba(72, 142, 190, .08), transparent 56%);
  box-shadow: inset 0 0 90px rgba(79, 139, 181, .05), 0 0 80px rgba(30, 91, 128, .06);
}

.core-ring {
  position: absolute;
  border: 1px solid;
  border-radius: 50%;
  animation: commandSpin 22s linear infinite;
}
.ring-a { inset: 12%; border-color: rgba(230, 195, 115, .3); clip-path: inset(0 0 47% 0); }
.ring-b { inset: 23% 6%; border-color: rgba(112, 215, 255, .26); transform: rotate(42deg); animation-direction: reverse; animation-duration: 28s; }
.ring-c { inset: 7% 29%; border-color: rgba(167, 139, 250, .26); transform: rotate(-54deg); animation-duration: 17s; }

.command-core b {
  color: #f0d693;
  font-family: var(--serif);
  font-size: 54px;
  font-weight: 400;
  letter-spacing: -.04em;
  text-shadow: 0 0 26px rgba(230, 195, 115, .55);
}

.command-core small {
  position: absolute;
  bottom: 31%;
  color: #8fa4b8;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
  line-height: 1.55;
  text-align: center;
}

.command-stats {
  grid-column: 1 / -1;
  margin: 12px 0 0;
  padding: 18px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(128, 170, 202, .16);
  border-bottom: 1px solid rgba(128, 170, 202, .16);
}

.command-stats div { padding: 0 24px; border-right: 1px solid rgba(128, 170, 202, .14); }
.command-stats div:last-child { border-right: 0; }
.command-stats dt { color: #e8cf8f; font-family: var(--serif); font-size: 30px; line-height: 1; }
.command-stats dd { margin: 8px 0 0; color: #7f93a7; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

.command-coordinate {
  min-height: 52px;
  padding: 0 max(24px, calc((100vw - var(--command-page)) / 2));
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  border-top: 1px solid rgba(128, 170, 202, .14);
  border-bottom: 1px solid rgba(128, 170, 202, .14);
  background: rgba(3, 9, 17, .78);
  color: #899caf;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

.command-coordinate ol { margin: 0; padding: 0; display: flex; gap: 10px; list-style: none; }
.command-coordinate li + li::before { content: "/"; margin-right: 10px; color: #536678; }
.command-coordinate a { color: #afbdca; text-decoration: none; }
.command-coordinate b { color: #708497; font-size: inherit; }

.command-console {
  width: var(--command-page);
  margin: 0 auto;
  padding: 88px 0 112px;
}

.command-console-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .65fr);
  align-items: end;
  gap: 50px;
}

.command-console-head h2,
.command-protocol h2 {
  margin: 16px 0 0;
  font-family: var(--serif);
  font-size: clamp(48px, 5vw, 82px);
  font-weight: 400;
  letter-spacing: -.048em;
  line-height: .88;
}

.command-console-head > p {
  margin: 0;
  color: #9fafbe;
  font-size: 16px;
  line-height: 1.7;
}

.command-toolbar {
  margin-top: 34px;
  padding: 15px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px 20px;
  border: 1px solid rgba(128, 170, 202, .17);
  border-radius: 16px;
  background: rgba(5, 13, 23, .86);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .23);
}

.command-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.command-filter {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(132, 173, 204, .16);
  border-radius: 8px;
  background: rgba(10, 21, 35, .72);
  color: #91a2b3;
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.command-filter:hover,
.command-filter:focus-visible,
.command-filter.is-active { border-color: rgba(230, 195, 115, .66); color: #f4dfa8; background: rgba(230, 195, 115, .08); }

.command-help { color: #71869a; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.command-help span { margin: 0 5px 0 10px; color: #d7c08b; }
.command-help span:first-child { margin-left: 0; }
.command-toolbar [data-status] { grid-column: 1 / -1; margin: 0; padding: 12px 2px 0; border-top: 1px solid rgba(132, 173, 204, .11); color: #8196aa; font-size: 10px; font-weight: 800; letter-spacing: .13em; }

.command-workspace {
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(350px, 430px);
  align-items: stretch;
  gap: 16px;
}

.map-select-grid {
  min-height: 840px;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  border: 1px solid rgba(128, 170, 202, .17);
  border-radius: 20px;
  background: rgba(3, 9, 17, .78);
  outline: none;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .28);
}

.map-select-card {
  --tone: var(--command-cyan);
  position: relative;
  min-height: 255px;
  padding: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--tone) 21%, transparent);
  border-radius: 14px;
  background:
    linear-gradient(140deg, color-mix(in srgb, var(--tone) 7%, transparent), transparent 42%),
    rgba(7, 15, 26, .88);
  color: #eaf2f8;
  cursor: pointer;
  text-align: left;
  transition: transform .24s var(--ease), border-color .24s, background .24s, opacity .24s;
}

.map-select-card::before {
  content: "";
  position: absolute;
  width: 220px;
  aspect-ratio: 1;
  right: -76px;
  top: -80px;
  border: 1px solid color-mix(in srgb, var(--tone) 30%, transparent);
  border-radius: 50%;
  box-shadow: inset 0 0 42px color-mix(in srgb, var(--tone) 5%, transparent);
}

.map-select-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tone), transparent);
  opacity: 0;
  transform: scaleX(.3);
  transition: opacity .24s, transform .24s;
}

.map-select-card:hover,
.map-select-card:focus-visible,
.map-select-card.is-selected {
  z-index: 2;
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--tone) 72%, transparent);
  background:
    linear-gradient(140deg, color-mix(in srgb, var(--tone) 11%, transparent), transparent 48%),
    rgba(8, 17, 29, .96);
}
.map-select-card:hover::after,
.map-select-card:focus-visible::after,
.map-select-card.is-selected::after { opacity: .9; transform: scaleX(1); }
.map-select-card.is-filtered { display: none; }

.map-select-card[data-tone="gold"] { --tone: var(--command-gold); }
.map-select-card[data-tone="violet"] { --tone: var(--command-violet); }
.map-select-card[data-tone="cyan"] { --tone: var(--command-cyan); }
.map-select-card[data-tone="green"] { --tone: var(--command-green); }
.map-select-card[data-tone="red"] { --tone: var(--command-red); }
.map-select-card[data-tone="orange"] { --tone: var(--command-orange); }

.map-card-top { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 15px; }
.map-card-index { color: var(--tone); font-family: var(--serif); font-size: 34px; line-height: 1; }
.map-card-status { padding: 5px 7px; border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent); border-radius: 999px; color: color-mix(in srgb, var(--tone) 82%, white); font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.map-card-entry { position: relative; z-index: 1; margin-top: 26px; color: color-mix(in srgb, var(--tone) 75%, white); font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.map-select-card h3 { position: relative; z-index: 1; margin: 10px 0 0; max-width: 85%; font-family: var(--serif); font-size: clamp(25px, 2vw, 34px); font-weight: 400; line-height: .98; }
.map-select-card p { position: relative; z-index: 1; margin: 12px 0 18px; max-width: 92%; color: #99aabc; font-size: 13px; line-height: 1.55; }
.map-card-bottom { position: relative; z-index: 1; margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; gap: 15px; border-top: 1px solid rgba(139, 176, 205, .1); color: #798ea2; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.map-card-bottom b { color: color-mix(in srgb, var(--tone) 80%, white); }

.command-dossier {
  --dossier-tone: var(--command-gold);
  height: 840px;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--dossier-tone) 24%, rgba(128, 170, 202, .17));
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--dossier-tone) 8%, transparent), transparent 30%),
    linear-gradient(180deg, rgba(8, 17, 29, .98), rgba(4, 10, 18, .98));
  scrollbar-color: color-mix(in srgb, var(--dossier-tone) 55%, transparent) rgba(4, 9, 17, .55);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .28);
}

.command-dossier[data-tone="gold"] { --dossier-tone: var(--command-gold); }
.command-dossier[data-tone="violet"] { --dossier-tone: var(--command-violet); }
.command-dossier[data-tone="cyan"] { --dossier-tone: var(--command-cyan); }
.command-dossier[data-tone="green"] { --dossier-tone: var(--command-green); }
.command-dossier[data-tone="red"] { --dossier-tone: var(--command-red); }
.command-dossier[data-tone="orange"] { --dossier-tone: var(--command-orange); }

.command-dossier-head {
  position: sticky;
  z-index: 4;
  top: 0;
  min-height: 56px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  border-bottom: 1px solid rgba(133, 172, 202, .14);
  background: rgba(5, 12, 22, .96);
  backdrop-filter: blur(14px);
}
.command-dossier-head span { color: var(--dossier-tone); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.command-dossier-head b { color: #89a1b6; font-size: 9px; letter-spacing: .13em; }

.command-dossier > :not(.command-dossier-head) { margin-left: 24px; margin-right: 24px; }

.command-dossier-visual {
  position: relative;
  height: 190px;
  margin-top: 24px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--dossier-tone) 25%, transparent);
  border-radius: 13px;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--dossier-tone) 13%, transparent), transparent 36%),
    rgba(3, 9, 17, .7);
}
.command-dossier-visual span,
.command-dossier-visual i { position: absolute; border: 1px solid color-mix(in srgb, var(--dossier-tone) 33%, transparent); border-radius: 50%; }
.command-dossier-visual span { width: 155px; height: 155px; }
.command-dossier-visual i { width: 106px; height: 106px; transform: rotate(55deg) scaleY(.46); }
.command-dossier-visual b { color: color-mix(in srgb, var(--dossier-tone) 88%, white); font-family: var(--serif); font-size: 38px; font-weight: 400; text-shadow: 0 0 24px var(--dossier-tone); }

.command-dossier-volume { margin-top: 23px; color: var(--dossier-tone); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.command-dossier h2 { margin-top: 10px; margin-bottom: 0; font-family: var(--serif); font-size: clamp(38px, 3vw, 52px); font-weight: 400; letter-spacing: -.035em; line-height: .94; overflow-wrap: anywhere; }
.command-dossier-subtitle { margin-top: 13px; color: #a8b7c5; font-size: 11px; font-weight: 800; letter-spacing: .07em; line-height: 1.45; text-transform: uppercase; }
.command-dossier-description { margin-top: 18px; color: #bdc9d5; font-size: 14px; line-height: 1.68; }

.command-dossier-facts { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(133, 172, 202, .13); border-bottom: 1px solid rgba(133, 172, 202, .13); }
.command-dossier-facts div { padding: 15px 0; }
.command-dossier-facts div:nth-child(odd) { border-right: 1px solid rgba(133, 172, 202, .13); }
.command-dossier-facts div:nth-child(even) { padding-left: 15px; }
.command-dossier-facts dt { color: #778da1; font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.command-dossier-facts dd { margin: 6px 0 0; color: #e2ebf2; font-family: var(--serif); font-size: 20px; }

.command-dossier-features { margin-top: 22px; }
.command-dossier-features h3 { color: #8297aa; font-size: 9px; letter-spacing: .14em; }
.command-dossier-features ul { margin: 12px 0 0; padding: 0; display: grid; gap: 7px; list-style: none; }
.command-dossier-features li { padding: 11px 12px; border: 1px solid rgba(133, 172, 202, .13); border-radius: 8px; background: rgba(9, 18, 30, .65); color: #b5c4d1; font-size: 12px; line-height: 1.4; }
.command-dossier-features li::before { content: "◇"; margin-right: 9px; color: var(--dossier-tone); }

.command-launch {
  min-height: 54px;
  margin-top: 24px;
  margin-bottom: 26px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--dossier-tone);
  border-radius: 9px;
  background: color-mix(in srgb, var(--dossier-tone) 15%, rgba(8, 17, 29, .94));
  color: #f8fbfd;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-decoration: none;
}
.command-launch:hover,
.command-launch:focus-visible { background: color-mix(in srgb, var(--dossier-tone) 25%, rgba(8, 17, 29, .94)); }

.command-protocol {
  width: var(--command-page);
  margin: 0 auto 110px;
  padding-top: 94px;
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: 80px;
  border-top: 1px solid rgba(128, 170, 202, .14);
}
.command-protocol ol { margin: 0; padding: 0; display: grid; gap: 10px; list-style: none; }
.command-protocol li { min-height: 132px; padding: 22px; display: grid; grid-template-columns: auto 1fr; gap: 18px; border: 1px solid rgba(128, 170, 202, .16); border-radius: 13px; background: rgba(6, 14, 24, .72); }
.command-protocol li > span { color: var(--command-gold); font-family: var(--serif); font-size: 22px; }
.command-protocol b { font-family: var(--serif); font-size: 22px; font-weight: 400; }
.command-protocol p { margin: 8px 0 0; color: #91a3b4; font-size: 14px; line-height: 1.62; }

.command-footer { border-top-color: rgba(128, 170, 202, .15); background: rgba(3, 8, 15, .86); }

@keyframes commandSpin { to { transform: rotate(360deg); } }

@media (max-width: 1200px) {
  .command-center-page { --command-page: min(100% - 32px, 1120px); }
  .command-hero { grid-template-columns: 1fr .5fr; }
  .command-workspace { grid-template-columns: 1fr; }
  .command-dossier { height: auto; max-height: 760px; }
  .command-protocol { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 850px) {
  .command-header { grid-template-columns: 1fr auto; }
  .command-header .primary-nav { display: none; }
  .command-hero { min-height: 640px; grid-template-columns: 1fr; padding-top: 80px; }
  .command-core { position: absolute; z-index: 0; right: -130px; top: 60px; width: 450px; opacity: .35; }
  .command-hero-copy { max-width: 730px; }
  .command-stats { grid-template-columns: repeat(2, 1fr); }
  .command-stats div:nth-child(2) { border-right: 0; }
  .command-stats div:nth-child(-n+2) { padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid rgba(128, 170, 202, .12); }
  .command-coordinate { grid-template-columns: auto 1fr; padding-block: 12px; }
  .command-coordinate b { grid-column: 1 / -1; }
  .command-console-head { grid-template-columns: 1fr; gap: 22px; }
  .command-toolbar { grid-template-columns: 1fr; }
  .command-help { display: none; }
  .map-select-grid { min-height: 0; }
}

@media (max-width: 650px) {
  .command-center-page { --command-page: calc(100% - 24px); }
  .command-header { padding-inline: 12px; }
  .command-header .brand small,
  .command-sound span:last-child { display: none; }
  .command-hero { min-height: 610px; padding: 66px 0 40px; }
  .command-hero h1 { font-size: clamp(53px, 16.4vw, 74px); }
  .command-deck { font-size: 16px; }
  .command-core { right: -210px; }
  .command-stats div { padding-inline: 12px; }
  .command-coordinate { gap: 9px; font-size: 8px; }
  .command-console { padding: 68px 0 82px; }
  .command-console-head h2,
  .command-protocol h2 { font-size: 50px; }
  .command-toolbar { padding: 11px; }
  .command-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; }
  .command-filter { flex: 0 0 auto; }
  .map-select-grid { grid-template-columns: 1fr; padding: 10px; border-radius: 14px; }
  .map-select-card { min-height: 225px; padding: 18px; }
  .command-dossier { max-height: none; border-radius: 14px; }
  .command-dossier > :not(.command-dossier-head) { margin-left: 18px; margin-right: 18px; }
  .command-dossier-facts { grid-template-columns: 1fr; }
  .command-dossier-facts div:nth-child(odd) { border-right: 0; }
  .command-dossier-facts div:nth-child(even) { padding-left: 0; }
  .command-dossier-facts div + div { border-top: 1px solid rgba(133, 172, 202, .1); }
  .command-protocol { margin-bottom: 76px; padding-top: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .core-ring { animation: none; }
  .map-select-card { transition: none; }
}