@import "component.css";
@font-face {
  font-family: Rajdhani;
  src: url(fonts/Rajdhani-Medium.ttf) format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: Rajdhani;
  src: url(fonts/Rajdhani-SemiBold.ttf) format("truetype");
  font-weight: 600;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --bg:#080e19;
  --panel:#0b1726;
  --card:#102235;
  --line:#9cb7cd25;
  --text:#e1edf5;
  --muted:#95aabf;
  --dim:#6b839a;
  --mint:#a7d9c5;
  --blue:#96c7e8;
  --gold:#edcb89;
  --section:#a7d9c5;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.5 Arial, sans-serif;
  overflow: hidden;
}
body[data-view=yard] {
  --section:#edc480;
}
body[data-view=market] {
  --section:#b2a5e5;
}
body[data-view=ops] {
  --section:#94c9e9;
}
body[data-view=systems] {
  --section:#dfb7d6;
}
button,
a,
input,
select {
  font: inherit;
}
button {
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}
button:disabled {
  opacity: .35;
  cursor: default;
}
button:hover:not(:disabled) {
  color: #fff;
}
button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 2px solid var(--section);
  outline-offset: 3px;
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3,
p {
  margin: 0;
}
input,
select {
  background: #0a1625;
  color: var(--text);
  border: 1px solid #90aec12c;
  border-radius: 4px;
  padding: 9px;
  max-width: 100%;
}
svg {
  flex-shrink: 0;
  vertical-align: middle;
}
[hidden] {
  display: none !important;
}
.eyebrow {
  font: 500 11px Rajdhani, sans-serif;
  letter-spacing: .18em;
  color: var(--dim);
}
.observatory,
#viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
}
.observatory {
  background:
    radial-gradient(
      ellipse at 24% 43%,
      #40415a24,
      transparent 46%),
    radial-gradient(
      ellipse at 78% 32%,
      #163c5f39,
      transparent 50%),
    #070d17;
}
.observatory:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      1px 1px at 15% 21%,
      #b4c8df70,
      transparent),
    radial-gradient(
      1px 1px at 46% 17%,
      #b4c8df70,
      transparent),
    radial-gradient(
      1px 1px at 72% 65%,
      #b4c8df70,
      transparent),
    radial-gradient(
      1px 1px at 83% 23%,
      #b4c8df70,
      transparent),
    radial-gradient(
      1px 1px at 26% 74%,
      #b4c8df60,
      transparent);
  pointer-events: none;
}
#universe {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}
.scene-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at 50% 45%,
      transparent 30%,
      #03081450 100%);
}
.scene-heading {
  position: absolute;
  left: 112px;
  top: 120px;
  pointer-events: none;
}
.scene-heading .eyebrow {
  letter-spacing: .25em;
}
.scene-heading h1 {
  font: 500 34px/1.1 Rajdhani, sans-serif;
  letter-spacing: .025em;
  margin-top: 5px;
  color: #d7e4ef;
}
.world-status {
  display: none;
}
#growth-label {
  position: absolute;
  top: 29%;
  left: 50%;
  transform: translateX(-50%);
  font: 500 13px Rajdhani, sans-serif;
  letter-spacing: .2em;
  color: #adc5d6;
}
.topbar {
  position: fixed;
  inset: 22px 28px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 8;
  pointer-events: none;
}
.topbar > * {
  pointer-events: auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand > svg {
  width: 39px;
  height: 39px;
  stroke: #b5c8d9;
  fill: none;
  stroke-width: 1;
}
.brand svg circle {
  fill: #b5c8d9;
  stroke: none;
}
.brand > span {
  font: 600 28px/1 Rajdhani, sans-serif;
  letter-spacing: .23em;
}
.brand small {
  display: block;
  font: 500 9px/1.5 Rajdhani, sans-serif;
  letter-spacing: .18em;
  color: #708ba1;
  margin-top: 6px;
}
.wallet {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 9px 24px;
  background:
    linear-gradient(
      120deg,
      #17283c80,
      #101b2a60);
  border: 1px solid #91b3cc18;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.resource {
  display: flex;
  gap: 9px;
  align-items: center;
  min-width: 96px;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.resource > b {
  font-weight: 500;
}
.resource b {
  font: 600 26px/1 Rajdhani, sans-serif;
  display: block;
  white-space: nowrap;
}
.resource small {
  display: block;
  color: #8199ae;
  font: 500 10px/1.6 Rajdhani, sans-serif;
  letter-spacing: .1em;
  white-space: nowrap;
}
.resource small i {
  font-style: normal;
  color: #a3c9b8;
  font-size: 10px;
  margin-left: 9px;
  letter-spacing: 0;
}
.resource-symbol {
  width: 28px;
  color: var(--mint);
}
.resource-symbol .currency-icon {
  width: 28px;
  height: 28px;
}
.alloy-resource .resource-symbol {
  color: var(--blue);
}
.core-resource .resource-symbol {
  color: var(--gold);
}
.currency-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  flex-shrink: 0;
  margin-left: 2px;
}
.currency-credits {
  color: var(--mint);
}
.currency-alloy {
  color: var(--blue);
}
.currency-stellar {
  color: var(--gold);
}
.settings-button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: #88a7bf;
  border: 1px solid #99b5c51c;
  background: #0b192750;
  border-radius: 5px;
}
.settings-button:hover {
  border-color: #a2c4d754;
}
.sidebar {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9;
}
.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sidebar nav button {
  position: relative;
  width: 66px;
  height: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--tool-color);
  background:
    linear-gradient(
      130deg,
      #16273b80,
      #0a152438);
  border: 1px solid #8daac41a;
  transition:
    background .18s,
    border-color .18s,
    transform .18s;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}
.sidebar nav button > svg {
  width: 25px;
  height: 25px;
}
.sidebar nav button > span {
  font: 500 11px/1 Rajdhani, sans-serif;
  letter-spacing: .03em;
  color: #a2b7c9;
}
.sidebar nav button:hover,
.sidebar nav button[aria-pressed=true] {
  border-color: var(--tool-color);
  background:
    linear-gradient(
      120deg,
      #263e5688,
      #11243b44);
  transform: translateX(-3px);
}
.sidebar nav button[aria-pressed=true] > span {
  color: var(--tool-color);
}
.sidebar-foot {
  position: absolute;
  top: calc(100% + 26px);
  left: 0;
  right: 0;
  text-align: center;
  color: #708ba1;
  font: 500 9px Rajdhani, sans-serif;
}
.sidebar-foot > button {
  display: inline-block;
  margin-left: 3px;
  border: 1px solid #809bb033;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  padding: 0;
  font-size: 10px;
}
.online-dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #a7d9c5;
  margin-right: 4px;
}
.station-controls {
  position: fixed;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9;
  width: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.rail-label {
  font: 500 9px Rajdhani, sans-serif;
  color: #607d96;
  letter-spacing: .08em;
}
#station-rail {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.station-node {
  position: relative;
  width: 52px;
  height: 53px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #11213844;
  border: 1px solid #9ab9d31c;
  color: var(--station-color);
  transition: transform .2s, border-color .2s;
}
.station-node svg {
  width: 27px;
  height: 27px;
}
.station-node small {
  position: absolute;
  right: 3px;
  bottom: 0;
  font: 600 11px Rajdhani, sans-serif;
  color: #819bad;
}
.station-node.selected {
  border-color: var(--station-color);
  background: #1d314754;
}
.station-node:hover {
  transform: translateX(3px);
}
.station-node:after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 12px);
  font: 500 13px Rajdhani, sans-serif;
  color: var(--station-color);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-3px);
  transition: opacity .15s, transform .15s;
}
.station-node:hover:after,
.station-node:focus-visible:after {
  opacity: 1;
  transform: none;
}
.station-add {
  font: 500 26px Rajdhani, sans-serif;
  color: #8aa5be;
  border: 1px dashed #90afc12d;
  width: 44px;
  height: 35px;
}
.station-add:hover {
  border-color: #a7c6d9;
}
.control-panel {
  position: fixed;
  top: 112px;
  right: 110px;
  bottom: 146px;
  width: 342px;
  z-index: 7;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #91afc02d;
  border-top-color: var(--section);
  background: #0b1726f5;
  box-shadow: 0 20px 60px #0004;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
  animation: inspectorIn .22s ease-out;
}
.panel-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 15px 18px;
  background-image:
    linear-gradient(#90a9c705 1px, transparent 1px),
    linear-gradient(
      90deg,
      #90a9c705 1px,
      transparent 1px);
  background-size: 18px 18px;
  border-bottom: 1px solid var(--line);
}
.panel-heading .eyebrow {
  display: none;
}
.panel-heading h2 {
  font: 600 25px/1 Rajdhani, sans-serif;
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.panel-heading h2 svg {
  color: var(--section);
  width: 22px;
  height: 22px;
}
.panel-heading > span {
  font: 500 10px Rajdhani, sans-serif;
  color: #637f98;
  margin-left: auto;
  white-space: nowrap;
}
.panel-close {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  color: #87a4ba;
  border: 1px solid #91afc026;
}
.panel-close svg {
  width: 15px;
  height: 15px;
}
.panel-tab-row {
  display: flex;
  gap: 5px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}
.panel-tab-row button {
  font: 500 13px Rajdhani, sans-serif;
  padding: 5px 10px;
  border: 1px solid transparent;
  color: #859eb4;
  white-space: nowrap;
}
.panel-tab-row button[aria-pressed=true] {
  color: var(--section);
  background: #a3bfd008;
  border-color: #92b1c02a;
}
#panel-preview {
  height: 144px;
  min-height: 144px;
  margin: 12px 15px 0;
  position: relative;
  border: 1px solid #85a7bc1c;
  background:
    linear-gradient(
      180deg,
      #142a3d,
      #0b1829);
  overflow: hidden;
}
#ship-preview {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.preview-mark {
  position: absolute;
  bottom: 7px;
  left: 9px;
  right: 9px;
  display: flex;
  gap: 5px;
  align-items: center;
  font: 500 9px Rajdhani, sans-serif;
  letter-spacing: .1em;
  color: #688ba5;
}
.preview-mark i {
  width: 3px;
  height: 3px;
  background: var(--section);
  border-radius: 50%;
}
.preview-mark span:last-child {
  margin-left: auto;
}
#panel-body {
  min-height: 0;
  flex: 1;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 16px 18px 24px;
  scrollbar-width: thin;
  scrollbar-color: #2b4762 transparent;
}
.planet-progress {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 27px;
  width: 360px;
  z-index: 5;
  padding: 12px 16px;
  background:
    linear-gradient(
      110deg,
      #152237a8,
      #0b152370);
  border-top: 1px solid #acc7d333;
  transition: left .3s;
}
.panel-open .planet-progress {
  left: calc((100% - 350px)/2);
}
.mass-heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.mass-heading .eyebrow {
  font-size: 10px;
}
.mass-heading strong {
  font: 500 30px/1 Rajdhani, sans-serif;
  white-space: nowrap;
}
.mass-heading strong small {
  font: 500 13px Rajdhani, sans-serif;
  color: #718da5;
  margin-left: 4px;
}
#mass-rate {
  font: 500 12px Rajdhani, sans-serif;
  color: #a5c9c1;
}
#phase-step {
  font: 500 11px Rajdhani, sans-serif;
  color: #708ca5;
  margin-left: auto;
  white-space: nowrap;
}
.progress-track {
  height: 2px;
  background: #93b5cc1a;
  overflow: hidden;
}
.progress-track i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--section);
  transition: width .2s;
}
.evolution-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 24px;
  margin-top: 6px;
}
.evolution-row > b {
  font: 500 12px Rajdhani, sans-serif;
  color: #8fa9bf;
}
.evolution-row > button {
  font: 600 14px Rajdhani, sans-serif;
  color: #bee9d5;
  white-space: nowrap;
}
.evolution-row > button > span {
  display: inline-block;
  margin-left: 5px;
  animation: arrowLift 1.8s ease-in-out infinite;
}
.fleet-tray {
  position: fixed;
  left: 25px;
  bottom: 27px;
  width: 222px;
  z-index: 5;
}
.tray-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.tray-heading .eyebrow {
  font-size: 10px;
  padding: 0;
}
.tray-heading .eyebrow b {
  color: #b4cbdc;
  font-weight: 500;
  margin-left: 4px;
}
.tray-heading > div {
  display: flex;
  gap: 5px;
}
.tray-heading > div > button {
  border: 1px solid #91abc125;
  width: 23px;
  height: 19px;
  padding: 0;
  color: #8ca9c0;
  font-size: 15px;
  line-height: 1;
}
#fleet-roster {
  display: flex;
  gap: 8px;
  overflow: auto;
  padding-bottom: 5px;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
#fleet-roster::-webkit-scrollbar {
  display: none;
}
.fleet-chip {
  position: relative;
  min-width: 49px;
  width: 49px;
  height: 53px;
  display: grid;
  place-items: center;
  padding: 3px;
  border: 1px solid #88a7c021;
  background: #10213770;
  scroll-snap-align: start;
}
.fleet-chip > svg {
  width: 38px;
  height: 38px;
}
.fleet-chip.selected {
  border-color: var(--accent);
  background: #20384a88;
}
.fleet-chip > span > b,
.fleet-chip > span > small {
  display: none;
}
.chip-progress {
  display: block;
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 3px;
  background: #7e9bb11a;
  height: 2px;
  overflow: hidden;
}
.chip-progress em {
  display: block;
  height: 100%;
  background: var(--accent);
  width: 0;
}
.scene-marker {
  position: fixed;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  transform: translate(24px, -28px);
  pointer-events: none;
  white-space: nowrap;
}
.scene-marker:before {
  content: "";
  height: 1px;
  width: 20px;
  background: #8aadc350;
  transform: rotate(-35deg);
  transform-origin: right;
}
.scene-marker > i {
  display: block;
  width: 3px;
  height: 3px;
  background: currentColor;
  color: #9bc0c3;
  border-radius: 50%;
  box-shadow: 0 0 5px currentColor;
}
.scene-marker > span {
  font: 500 13px/1.1 Rajdhani, sans-serif;
  color: #b4c9db;
  text-shadow: 0 2px 5px #020913;
}
.scene-marker small {
  display: block;
  font: 500 10px/1.5 Rajdhani, sans-serif;
  color: #617f9a;
}
.ship-marker {
  transform: translate(10px, 28px);
  opacity: .75;
}
.ship-marker:before {
  width: 10px;
  transform: rotate(30deg);
}
.ship-marker > span {
  font-size: 11px;
}
.yard-status,
.raid-alert {
  position: fixed;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 13px Rajdhani, sans-serif;
  top: 88px;
}
.yard-status {
  right: 112px;
  color: var(--gold);
}
.yard-status b {
  font-weight: 500;
  color: #afc0cc;
}
.raid-alert {
  left: 112px;
  color: #e4a28e;
}
.entity-switcher {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 15px;
}
.entity-switcher > button {
  font: 500 24px/1 Rajdhani, sans-serif;
  color: var(--section);
  width: 25px;
  height: 32px;
  border: 1px solid var(--line);
}
.entity-switcher select {
  min-width: 0;
  flex: 1;
  font: 500 13px Rajdhani, sans-serif;
  padding: 7px 5px;
}
.primary {
  border-color: #aac7d32e;
  background:
    linear-gradient(
      110deg,
      #86aac11b,
      #172c3c55);
  color: var(--section);
  border-radius: 3px;
  font: 600 14px Rajdhani, sans-serif;
  min-height: 42px;
  padding: 10px 12px;
}
.primary b {
  font: 600 15px Rajdhani, sans-serif;
  color: #c6dae8;
  white-space: nowrap;
}
.primary:hover:not(:disabled) {
  border-color: var(--section);
  background: #7496b327;
}
.secondary {
  border-radius: 3px;
  font: 500 13px Rajdhani, sans-serif;
  border-color: var(--line);
  color: #a3bcd0;
}
.ship-title h3 {
  font: 600 22px Rajdhani, sans-serif;
  letter-spacing: .01em;
}
.ship-title > div > span {
  font: 500 12px Rajdhani, sans-serif;
  color: #8ea9bf;
}
.ship-title .rarity {
  font: 500 11px Rajdhani, sans-serif;
}
.stat-grid {
  margin: 15px 0;
  gap: 13px 9px;
}
.stat-grid small {
  font: 500 11px Rajdhani, sans-serif;
  color: #7896ad;
}
.stat-grid strong,
.stat-grid.three strong {
  font: 500 19px Rajdhani, sans-serif;
  color: #c7dbe9;
}
.stat-grid.three .currency-icon {
  width: 14px;
  height: 14px;
}
.section-title {
  margin: 18px 0 10px;
}
.section-title h3 {
  font: 600 13px Rajdhani, sans-serif;
  color: #aac4d7;
  letter-spacing: .03em;
}
.section-title > span {
  font: 500 10px Rajdhani, sans-serif;
}
.section-title button {
  font: 500 12px Rajdhani, sans-serif;
}
.hint {
  font: 500 12px/1.55 Rajdhani, sans-serif;
  color: #7894ac;
}
.upgrade-item {
  padding: 12px 0;
  gap: 10px;
}
.upgrade-item b {
  font: 600 15px Rajdhani, sans-serif;
}
.upgrade-item > div > span {
  font: 500 10px Rajdhani, sans-serif;
  color: #738ea6;
}
.upgrade-item p {
  font: 500 14px Rajdhani, sans-serif;
  color: #9db9cf;
}
.upgrade-item strong {
  color: var(--section);
  font-weight: 500;
}
.upgrade-item > button {
  border-color: #94b5cb27;
  width: 88px;
  min-width: 88px;
  font: 600 13px Rajdhani, sans-serif;
  border-radius: 3px;
  color: var(--section);
  min-height: 44px;
}
.upgrade-item > button > b {
  font: 600 14px Rajdhani, sans-serif;
  color: #b6ccdc;
}
.tiny-progress i {
  background: var(--section);
}
.action-grid {
  margin-top: 14px;
  gap: 7px;
}
.action-grid button {
  font: 500 13px Rajdhani, sans-serif;
  border-radius: 3px;
  min-height: 37px;
  border-color: #8facbf25;
}
.flight-progress {
  font: 500 12px Rajdhani, sans-serif;
}
.flight-progress > b {
  font-weight: 500;
}
.role-tabs {
  gap: 5px;
  margin-bottom: 13px;
}
.role-tabs button {
  font: 500 13px Rajdhani, sans-serif;
  padding: 7px 4px;
  border-radius: 3px;
}
.blueprint-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.blueprint-card {
  border-radius: 3px;
  padding: 7px 4px;
  background: #12223777;
  min-width: 0;
}
.blueprint-card > svg {
  height: 47px;
  width: 47px;
}
.blueprint-card > b {
  font: 600 15px Rajdhani, sans-serif;
}
.blueprint-card > span {
  font: 500 12px Rajdhani, sans-serif;
  white-space: nowrap;
}
.blueprint-card small,
.blueprint-card em {
  font: 500 11px Rajdhani, sans-serif;
}
.blueprint-card .currency-icon {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
}
.blueprint-title h3 {
  font: 600 26px Rajdhani, sans-serif;
}
.blueprint-title > b {
  font: 500 15px Rajdhani, sans-serif;
  color: var(--gold);
}
.field-label {
  font: 500 13px Rajdhani, sans-serif;
  margin: 15px 0 12px;
}
.field-label select {
  font: 500 14px Rajdhani, sans-serif;
  padding: 8px;
}
.rarity-odds {
  font: 500 10px Rajdhani, sans-serif;
  margin-top: 16px;
}
.rarity-odds b {
  font-size: 13px;
}
.rarity-odds small {
  display: none;
}
.note,
.construction-card,
.mission-card {
  background: #17304a30;
  border-radius: 3px;
  border-color: #94b4c521;
  padding: 12px;
  margin: 14px 0;
}
.note > b,
.construction-card b,
.mission-card > b {
  font: 600 15px Rajdhani, sans-serif;
}
.note p,
.construction-card p,
.mission-card p {
  font: 500 13px/1.5 Rajdhani, sans-serif;
}
.note > span,
.construction-card span,
.mission-card > span {
  font: 500 13px Rajdhani, sans-serif;
}
.carousel-control {
  font: 500 12px Rajdhani, sans-serif;
}
.offer-title h3 {
  font: 600 26px Rajdhani, sans-serif;
}
.offer-title span {
  font: 500 12px Rajdhani, sans-serif;
}
.reserve-meter b {
  font: 500 25px Rajdhani, sans-serif;
}
.reserve-meter span {
  font: 500 10px Rajdhani, sans-serif;
}
.quality-steps {
  font: 500 10px Rajdhani, sans-serif;
}
.refine-result {
  font: 500 15px Rajdhani, sans-serif;
}
.skin-card {
  padding: 10px 4px;
  border-radius: 3px;
}
.skin-card b {
  font: 500 13px Rajdhani, sans-serif;
}
.skin-card small {
  font: 500 11px Rajdhani, sans-serif;
}
.sector-card {
  border-radius: 3px;
  padding: 13px 8px;
  gap: 12px;
}
.sector-card small {
  font: 500 10px Rajdhani, sans-serif;
}
.sector-card b {
  font: 600 18px Rajdhani, sans-serif;
}
.sector-card p {
  font: 500 13px Rajdhani, sans-serif;
}
.sector-orbit {
  width: 36px;
  height: 36px;
  min-width: 36px;
}
.defense-emblem {
  padding: 14px 0;
}
.defense-emblem strong {
  font: 500 45px Rajdhani, sans-serif;
}
.defense-emblem > span {
  font: 500 11px Rajdhani, sans-serif;
}
.compact-ship {
  font: 500 13px Rajdhani, sans-serif;
}
.compact-ship small {
  font: 500 11px Rajdhani, sans-serif;
}
.station-picker {
  gap: 6px;
}
.station-picker button {
  border-radius: 3px;
  padding: 10px 4px;
}
.station-picker span {
  font: 500 12px Rajdhani, sans-serif;
}
.station-picker small {
  font: 500 10px Rajdhani, sans-serif;
}
.station-picker svg {
  width: 22px;
  height: 22px;
}
.large-name {
  font: 600 27px Rajdhani, sans-serif;
}
.dock-list button {
  border-radius: 3px;
}
.dock-list button > span:last-of-type {
  font: 500 14px Rajdhani, sans-serif;
}
.dock-list small {
  font: 500 11px Rajdhani, sans-serif;
}
.dock-index {
  font: 500 12px Rajdhani, sans-serif;
}
.universe-card {
  border-radius: 3px;
  gap: 9px;
  padding: 12px 8px;
}
.universe-card h3 {
  font: 600 24px Rajdhani, sans-serif;
}
.universe-card small {
  font: 500 9px Rajdhani, sans-serif;
}
.universe-card p {
  font: 500 11px Rajdhani, sans-serif;
}
.universe-card > button {
  font: 500 14px Rajdhani, sans-serif;
}
.flagship-status h3 {
  font: 600 24px Rajdhani, sans-serif;
}
.flagship-status span,
.journal p {
  font: 500 13px Rajdhani, sans-serif;
}
#toast {
  top: 91px;
  left: 50%;
  transform: translate(-50%, -8px);
  max-width: 480px;
  font: 500 14px Rajdhani, sans-serif;
  background: #14293af2;
  color: #c9deed;
  border: 1px solid #a8c9d533;
  border-radius: 3px;
  padding: 10px 16px;
  box-shadow: none;
}
#toast.show {
  transform: translate(-50%, 0);
}
.gain-number {
  font: 600 19px Rajdhani, sans-serif;
  animation: gainUp 1s ease-out forwards;
}
.gain-number.mass {
  font: 500 16px Rajdhani, sans-serif;
}
.gain-number .currency-icon {
  width: 16px;
  height: 16px;
  vertical-align: -2px;
}
dialog {
  background: #0d1b2c;
  border-color: #8daab93d;
  border-radius: 5px;
  max-width: 650px;
}
dialog h2 {
  font: 500 30px Rajdhani, sans-serif;
}
dialog h3 {
  font: 600 19px Rajdhani, sans-serif;
}
dialog p {
  font: 500 15px/1.55 Rajdhani, sans-serif;
}
dialog .toggle {
  font: 500 16px Rajdhani, sans-serif;
}
.modal-heading button {
  font-size: 27px;
}
.modal-ship-list button span,
.destination-grid b {
  font: 500 15px Rajdhani, sans-serif;
}
.modal-ship-list small,
.destination-grid small {
  font: 500 12px Rajdhani, sans-serif;
}
.guide-list b {
  color: var(--section);
}
#graphics-error h2,
#other-tab h2 {
  font: 500 30px Rajdhani, sans-serif;
}
#graphics-error p,
#other-tab p {
  font: 500 16px Rajdhani, sans-serif;
}
@keyframes inspectorIn {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes arrowLift {
  50% {
    transform: translate(2px, -2px);
  }
}
@media (min-width: 1700px) {
  .control-panel {
    width: 374px;
    right: 120px;
    top: 120px;
    bottom: 148px;
  }
  #panel-preview {
    height: 175px;
    min-height: 175px;
  }
  .planet-progress {
    width: 400px;
  }
  .scene-heading {
    left: 125px;
    top: 130px;
  }
}
@media (max-height: 780px) and (min-width: 761px) {
  .topbar {
    top: 15px;
  }
  .scene-heading {
    top: 95px;
  }
  .scene-heading h1 {
    font-size: 28px;
  }
  .control-panel {
    top: 89px;
    bottom: 115px;
  }
  #panel-preview {
    height: 105px;
    min-height: 105px;
  }
  .panel-heading {
    min-height: 51px;
    padding: 11px 16px;
  }
  .panel-heading h2 {
    font-size: 22px;
  }
  .sidebar nav {
    gap: 9px;
  }
  .sidebar nav button {
    height: 56px;
    width: 60px;
  }
  .sidebar nav button > svg {
    width: 22px;
    height: 22px;
  }
  .station-controls {
    gap: 9px;
  }
  #station-rail {
    gap: 8px;
  }
  .station-node {
    height: 44px;
    width: 47px;
  }
  .fleet-tray,
  .planet-progress {
    bottom: 20px;
  }
  .yard-status,
  .raid-alert {
    top: 73px;
  }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .brand > span {
    font-size: 23px;
  }
  .brand small {
    display: none;
  }
  .wallet {
    gap: 15px;
    padding: 8px 14px;
  }
  .resource {
    min-width: 80px;
  }
  .resource small i {
    display: none;
  }
  .resource b {
    font-size: 23px;
  }
  .resource-symbol,
  .resource-symbol .currency-icon {
    width: 23px;
    height: 23px;
  }
  .control-panel {
    width: 310px;
    right: 90px;
  }
  .sidebar {
    right: 12px;
  }
  .sidebar nav button {
    width: 60px;
  }
  .planet-progress {
    width: 310px;
  }
  .fleet-tray {
    width: 175px;
  }
  .panel-open .planet-progress {
    left: calc((100% - 330px)/2);
  }
}
@media (max-width: 760px) {
  .topbar {
    inset: 15px 12px auto;
    height: 46px;
  }
  .brand {
    gap: 5px;
  }
  .brand > svg {
    width: 28px;
    height: 28px;
  }
  .brand > span {
    display: none;
  }
  .wallet {
    left: 50%;
    transform: translateX(-50%);
    gap: 12px;
    padding: 8px 10px;
    min-width: 264px;
  }
  .resource {
    gap: 4px;
    min-width: 63px;
  }
  .resource b {
    font-size: 20px;
  }
  .resource small {
    font-size: 8px;
    letter-spacing: .03em;
  }
  .resource small i {
    display: none;
  }
  .resource-symbol,
  .resource-symbol .currency-icon {
    width: 21px;
    height: 21px;
  }
  .settings-button {
    width: 27px;
    height: 29px;
    border: 0;
    background: none;
  }
  .settings-button svg {
    width: 19px;
    height: 19px;
  }
  .scene-heading {
    top: 96px;
    left: 65px;
  }
  .scene-heading .eyebrow {
    font-size: 10px;
  }
  .scene-heading h1 {
    font-size: 26px;
    margin-top: 2px;
  }
  .station-controls {
    left: 9px;
    top: 109px;
    transform: none;
    gap: 10px;
    width: 39px;
    max-height: calc(100dvh - 285px);
  }
  .rail-label {
    display: none;
  }
  #station-rail {
    gap: 8px;
    overflow: auto;
    scrollbar-width: none;
    flex-shrink: 1;
  }
  .station-node {
    height: 40px;
    width: 37px;
    min-height: 40px;
  }
  .station-node svg {
    height: 22px;
    width: 22px;
  }
  .station-node small {
    font-size: 9px;
  }
  .station-node:after {
    display: none;
  }
  .station-add {
    width: 34px;
    height: 29px;
    min-height: 29px;
    font-size: 23px;
  }
  .sidebar {
    right: auto;
    left: 50%;
    top: auto;
    bottom: 12px;
    transform: translateX(-50%);
  }
  .sidebar nav {
    flex-direction: row;
    gap: 6px;
    padding: 5px;
    background: #091525e8;
    border: 1px solid #839db629;
  }
  .sidebar nav button {
    width: 54px;
    height: 47px;
    gap: 5px;
    border: 0;
    clip-path: none;
    background: none;
  }
  .sidebar nav button > svg {
    width: 21px;
    height: 21px;
  }
  .sidebar nav button > span {
    font-size: 10px;
  }
  .sidebar nav button:hover,
  .sidebar nav button[aria-pressed=true] {
    transform: none;
    background: #a2bfd010;
  }
  .sidebar-foot {
    display: none;
  }
  .control-panel {
    top: auto;
    bottom: 80px;
    left: 10px;
    right: 10px;
    width: auto;
    height: min(48dvh, 430px);
    clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
    animation: inspectorIn .18s;
  }
  .panel-heading {
    min-height: 46px;
    padding: 9px 13px;
  }
  .panel-heading h2 {
    font-size: 23px;
  }
  .panel-heading > span {
    font-size: 9px;
  }
  .panel-tab-row {
    padding: 7px 12px;
    gap: 5px;
  }
  .panel-tab-row button {
    padding: 3px 8px;
    font-size: 12px;
  }
  .panel-close {
    width: 25px;
    height: 25px;
  }
  #panel-preview {
    height: 90px;
    min-height: 90px;
    margin: 8px 12px 0;
  }
  .preview-mark {
    font-size: 8px;
  }
  #panel-body {
    padding: 12px 14px 22px;
  }
  .planet-progress {
    bottom: 88px;
    left: auto;
    right: 12px;
    transform: none;
    width: 54vw;
    padding: 8px 10px;
  }
  .panel-open .planet-progress {
    display: none;
  }
  .mass-heading {
    gap: 4px;
    margin-bottom: 6px;
  }
  .mass-heading .eyebrow {
    font-size: 9px;
  }
  .mass-heading strong {
    font-size: 23px;
  }
  .mass-heading strong small {
    font-size: 11px;
    margin-left: 2px;
  }
  #mass-rate {
    font-size: 10px;
  }
  #phase-step {
    font-size: 9px;
  }
  .evolution-row {
    min-height: 22px;
    margin-top: 5px;
    flex-wrap: wrap;
    gap: 1px;
  }
  .evolution-row > b {
    font-size: 11px;
  }
  .evolution-row > button {
    font-size: 13px;
  }
  .fleet-tray {
    left: 12px;
    bottom: 94px;
    width: calc(40vw - 10px);
  }
  .panel-open .fleet-tray {
    display: none;
  }
  .tray-heading {
    margin-bottom: 6px;
  }
  .tray-heading .eyebrow {
    font-size: 9px;
  }
  .tray-heading > div {
    gap: 3px;
  }
  .tray-heading > div > button {
    width: 18px;
    height: 17px;
  }
  .fleet-chip {
    min-width: 42px;
    width: 42px;
    height: 45px;
  }
  .fleet-chip > svg {
    height: 33px;
    width: 33px;
  }
  #fleet-roster {
    gap: 6px;
  }
  .scene-marker {
    transform: translate(12px, -25px);
    gap: 4px;
  }
  .scene-marker:before {
    width: 11px;
  }
  .scene-marker > span {
    font-size: 11px;
  }
  .scene-marker small {
    font-size: 9px;
  }
  .ship-marker {
    transform: translate(3px, 19px);
  }
  .ship-marker > span {
    font-size: 10px;
  }
  .yard-status {
    top: 74px;
    right: 13px;
    font-size: 11px;
    gap: 4px;
  }
  .yard-status svg {
    width: 14px;
    height: 14px;
  }
  .raid-alert {
    left: 64px;
    top: 74px;
    font-size: 11px;
  }
  .raid-alert svg {
    width: 14px;
    height: 14px;
  }
  #toast {
    top: 67px;
    max-width: calc(100vw - 24px);
    font-size: 13px;
    padding: 8px 11px;
    width: max-content;
  }
  .blueprint-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .entity-switcher {
    margin-bottom: 11px;
  }
  .entity-switcher select {
    font-size: 13px;
  }
  .ship-title h3 {
    font-size: 21px;
  }
  .upgrade-item {
    padding: 10px 0;
  }
  .stat-grid {
    margin-block: 12px;
  }
  .section-title {
    margin-top: 15px;
  }
  .gain-number {
    font-size: 16px;
  }
  #growth-label {
    font-size: 11px;
    top: 24%;
  }
  dialog {
    padding: 18px;
  }
  dialog h2 {
    font-size: 27px;
  }
  dialog p {
    font-size: 14px;
  }
}
@media (max-width: 350px) {
  .wallet {
    min-width: 234px;
    gap: 9px;
    padding: 7px 8px;
  }
  .resource {
    min-width: 57px;
  }
  .resource b {
    font-size: 18px;
  }
  .resource small {
    font-size: 7px;
  }
  .resource-symbol,
  .resource-symbol .currency-icon {
    width: 18px;
    height: 18px;
  }
  .topbar {
    inset: 13px 9px auto;
  }
  .brand > svg {
    width: 22px;
    height: 22px;
  }
  .settings-button {
    width: 22px;
  }
  .settings-button svg {
    width: 16px;
    height: 16px;
  }
  .sidebar nav {
    gap: 3px;
    padding: 4px;
  }
  .sidebar nav button {
    width: 49px;
  }
  .planet-progress {
    right: 9px;
    width: 55vw;
  }
  .mass-heading .eyebrow {
    display: none;
  }
  .mass-heading strong {
    font-size: 22px;
  }
  #mass-rate {
    font-size: 10px;
  }
  .fleet-tray {
    left: 9px;
    width: calc(39vw - 9px);
  }
  .scene-heading {
    left: 60px;
    top: 94px;
  }
  .scene-heading h1 {
    font-size: 24px;
  }
  .control-panel {
    left: 7px;
    right: 7px;
  }
  .panel-heading h2 {
    font-size: 22px;
  }
  #panel-preview {
    height: 76px;
    min-height: 76px;
  }
  .stat-grid.three strong {
    font-size: 17px;
  }
  .blueprint-card .currency-icon {
    height: 12px;
    width: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .gain-number {
    animation: gainUp .4s ease-out forwards !important;
  }
}
@media (max-width: 760px) {
  .panel-open .planet-progress {
    display: block;
    top: 74px;
    bottom: auto;
    left: 65px;
    right: 14px;
    transform: none;
    width: auto;
    padding: 0;
    background: none;
    border: 0;
  }
  .panel-open .mass-heading {
    margin-bottom: 4px;
  }
  .panel-open .mass-heading .eyebrow {
    display: none;
  }
  .panel-open .mass-heading strong {
    font-size: 22px;
  }
  .panel-open .evolution-row {
    min-height: 17px;
    margin-top: 2px;
  }
  .panel-open .evolution-row > b {
    font-size: 11px;
  }
  .panel-open .scene-heading {
    top: 139px;
  }
  .panel-open .scene-heading h1 {
    font-size: 23px;
  }
  .panel-open .scene-heading .eyebrow {
    display: none;
  }
  .panel-open .yard-status {
    display: none;
  }
  .panel-open .raid-alert {
    top: 129px;
  }
}
#hangar-toggle {
  font: 500 12px Rajdhani, sans-serif;
  border: 1px solid #a1c2d22b;
  color: var(--section);
  padding: 4px 7px;
  margin-left: auto;
}
#hangar-toggle[aria-expanded=true] {
  background: #9fbed51c;
}
@media (max-width: 760px) {
  .panel-open .scene-heading {
    display: none;
  }
  .panel-open #current-phase {
    display: inline !important;
    font: 500 14px Rajdhani, sans-serif;
    color: #bcd2e2;
    margin-right: 4px;
  }
  body[data-view=fleet] .panel-heading > span {
    display: none;
  }
  body[data-view=fleet] .flight-progress {
    display: none;
  }
  body[data-view=fleet] .upgrade-item {
    padding: 8px 0;
  }
  body[data-view=fleet] .section-title {
    margin-top: 12px;
  }
}
.control-panel .currency-icon,
dialog .currency-icon {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
}
body[data-motion=off] *,
body[data-motion=off] *:before,
body[data-motion=off] *:after {
  animation: none !important;
  transition: none !important;
}
#current-phase {
  display: none;
}
.gain-number:not(.mass) {
  animation-name: currencyRise;
  font-size: 16px;
}
.gain-number.mass {
  font-weight: 600;
  text-shadow: 0 2px 4px #02070e, 0 0 8px #02070e;
}
@keyframes currencyRise {
  0% {
    opacity: 0;
    transform: translate(-50%, 6px);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -14px);
  }
}
@media (max-width: 760px) {
  .panel-open .station-controls {
    max-height: calc(52dvh - 199px);
  }
  #station-rail {
    min-height: 0;
  }
  .resource small {
    font-size: 9px;
  }
}

/* Resource and reactor information stays in the scene, without another panel. */
.world-status{display:block;font:500 12px Rajdhani,sans-serif;color:#718896;letter-spacing:.05em;margin-top:7px}
.resource-marker{color:#b6a07c;opacity:.85}.resource-marker span{font-size:12px}.resource-marker small{font-size:8px;letter-spacing:.13em}
/* Brief signals keep the source of each reward visible without another panel. */
.reward-token{position:fixed;z-index:22;width:18px;height:18px;pointer-events:none;color:var(--mint);will-change:transform,opacity;filter:drop-shadow(0 0 5px #83d1bd70)}
.reward-token .currency-icon{width:100%;height:100%}.reward-token.core{color:var(--gold);filter:drop-shadow(0 0 7px #edcb8970)}.reward-token.alloy{color:var(--blue)}
.resource-earned{animation:resourceEarned .55s ease-out}.resource-earned .resource-symbol{animation:symbolEarned .55s ease-out}
#panel-preview{isolation:isolate}#panel-preview.is-upgrading::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(100deg,transparent 25%,#86d6e61c 46%,#a8e8f36b 49.5%,transparent 51%);background-size:230% 100%;animation:upgradeScan 1.1s ease-out both}
.upgrade-callout{position:absolute;left:50%;top:13px;transform:translateX(-50%);z-index:3;white-space:nowrap;padding:5px 10px;border:1px solid #8ed8e44d;background:#0b1b29d9;color:#bee7ee;font:600 10px Rajdhani,sans-serif;letter-spacing:.12em;pointer-events:none;animation:upgradeLabel 1.25s ease both}
@keyframes resourceEarned{0%{box-shadow:inset 0 0 22px #a7d9c533}100%{box-shadow:inset 0 0 0 #a7d9c500}}@keyframes symbolEarned{0%,100%{transform:scale(1)}30%{transform:scale(1.16)}}
@keyframes upgradeScan{from{background-position:110% 0;opacity:0}20%{opacity:1}to{background-position:-90% 0;opacity:0}}@keyframes upgradeLabel{0%{opacity:0;translate:0 5px}18%,78%{opacity:1;translate:0 0}100%{opacity:0;translate:0 -4px}}
@media(prefers-reduced-motion:reduce){.resource-earned,.resource-earned .resource-symbol,#panel-preview.is-upgrading::after,.upgrade-callout{animation:none}}