:root {
  color-scheme: dark;
  --space: #070b10;
  --panel: rgba(8, 14, 20, 0.72);
  --panel-strong: rgba(5, 8, 12, 0.88);
  --line: rgba(125, 246, 255, 0.34);
  --line-soft: rgba(255, 255, 255, 0.16);
  --text: #f3fbff;
  --muted: rgba(226, 242, 250, 0.68);
  --cyan: #7df6ff;
  --cyan-deep: #14b8d6;
  --violet: #a64cff;
  --gold: #ffcc6b;
  --danger: #ff6d8b;
  --radius: 8px;
  --font-display: "Microsoft YaHei UI", "PingFang SC", "Noto Sans SC", sans-serif;
  --font-body: "Inter", "Segoe UI", "Microsoft YaHei UI", sans-serif;
}

.server-bridge-badge {
  position: absolute;
  z-index: 70;
  top: 10px;
  right: 12px;
  display: none !important;
  align-items: center;
  gap: 6px;
  min-width: 86px;
  max-width: 132px;
  padding: 5px 8px;
  border: 1px solid rgba(125, 246, 255, 0.24);
  border-radius: 7px;
  background: rgba(4, 11, 18, 0.76);
  color: #e9fbff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.server-bridge-badge span:last-child {
  display: grid;
  gap: 1px;
  min-width: 0;
  text-align: left;
}

.server-bridge-badge strong,
.server-bridge-badge em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  line-height: 1.05;
}

.server-bridge-badge strong {
  font-size: 10px;
  letter-spacing: 0;
}

.server-bridge-badge em {
  color: rgba(233, 251, 255, 0.68);
  font-size: 9px;
}

.server-bridge-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #f0c85a;
  box-shadow: 0 0 10px rgba(240, 200, 90, 0.7);
}

.server-bridge-badge[data-state="online"] .server-bridge-dot {
  background: #65f2a7;
  box-shadow: 0 0 10px rgba(101, 242, 167, 0.78);
}

.server-bridge-badge[data-state="offline"] .server-bridge-dot {
  background: #ff6b78;
  box-shadow: 0 0 10px rgba(255, 107, 120, 0.72);
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 72% 22%, rgba(125, 246, 255, 0.18), transparent 24rem),
    radial-gradient(circle at 16% 82%, rgba(166, 76, 255, 0.14), transparent 20rem),
    linear-gradient(135deg, #020307 0%, #101822 48%, #050609 100%);
  color: var(--text);
  font-family: var(--font-body);
}

body[data-active-screen="fleet-mission"] {
  overflow: hidden;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.studio-shell {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  min-height: 100vh;
  padding: 16px;
}

.design-notes {
  display: none;
}

.kicker {
  margin: 0 0 8px;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.design-notes h1 {
  margin: 0 0 18px;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 52px;
  line-height: 1.02;
  text-shadow: 0 0 18px rgba(125, 246, 255, 0.72), 0 0 48px rgba(20, 184, 214, 0.38);
}

.design-notes p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}

.swatches {
  display: grid;
  gap: 10px;
  margin: 28px 0;
}

.swatches span {
  display: flex;
  gap: 10px;
  align-items: center;
  color: rgba(243, 251, 255, 0.86);
  font-size: 13px;
}

.swatches span::before {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: 0 0 16px var(--swatch);
  content: "";
}

.screen-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.picker-button {
  min-width: 72px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.picker-button.active {
  border-color: var(--cyan);
  background: rgba(125, 246, 255, 0.13);
  box-shadow: inset 0 0 18px rgba(125, 246, 255, 0.16);
}

.ambient-grid {
  position: absolute;
  inset: 0;
  opacity: 0.24;
  background-image:
    linear-gradient(rgba(125, 246, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 246, 255, 0.12) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, transparent, black 28%, transparent 86%);
  pointer-events: none;
}

.app-screen {
  position: absolute;
  inset: 0;
  display: none;
  min-height: 100%;
  padding: 40px 24px 92px;
}

.app-screen.active {
  display: flex;
  flex-direction: column;
  animation: screenIn 360ms ease both;
}

.brand-lockup {
  margin-top: 18px;
  text-align: center;
}

.app-mark {
  position: relative;
  display: grid;
  width: 94px;
  height: 94px;
  margin: 0 auto 14px;
  place-items: center;
  border: 1px solid rgba(125, 246, 255, 0.32);
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(125, 246, 255, 0.16), rgba(255, 255, 255, 0.03)),
    rgba(8, 22, 32, 0.22);
  box-shadow: 0 0 24px rgba(125, 246, 255, 0.36), inset 0 1px rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px);
  overflow: hidden;
}

.app-mark::before {
  position: absolute;
  inset: -42%;
  background:
    conic-gradient(from 0deg, transparent 0 68%, rgba(125, 246, 255, 0.08) 76%, rgba(235, 255, 255, 0.72) 82%, rgba(125, 246, 255, 0.08) 88%, transparent 96%),
    radial-gradient(circle at 76% 30%, rgba(125, 246, 255, 0.42), transparent 12%);
  filter: blur(2px);
  animation: logoSweep 4.8s linear infinite;
  content: "";
}

.app-mark::after {
  position: absolute;
  inset: 8px;
  border-radius: 24px;
  border: 1px solid rgba(235, 255, 255, 0.16);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), transparent 48%);
  pointer-events: none;
  content: "";
}

.app-mark.small {
  width: 58px;
  height: 58px;
  margin: 0;
  border-radius: 18px;
}

.app-mark img {
  position: relative;
  z-index: 1;
  width: 82%;
  height: 82%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(125, 246, 255, 0.58));
}

.mini-orbit::before {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 46px;
  height: 15px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: #e8fbff;
  transform: translate(-50%, -50%) rotate(-35deg);
  content: "";
}

.login-symbol {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(125, 246, 255, 0.56));
}

.brand-lockup h2,
.compact-brand h2,
.dashboard-head h2 {
  margin: 0;
  color: #ffffff;
  font-family: var(--font-display);
}

.brand-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 58px;
  font-size: 38px;
  line-height: 1.05;
  font-family: "STXingkai", "YouYuan", "Microsoft YaHei UI", var(--font-display);
  font-style: normal;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(235, 255, 255, 0.86);
  background: linear-gradient(180deg, #ffffff 10%, #92fbff 58%, rgba(79, 178, 255, 0.78) 110%);
  background-clip: text;
  -webkit-background-clip: text;
  text-align: center;
  text-shadow: 0 0 12px rgba(125, 246, 255, 0.82), 0 0 30px rgba(20, 184, 214, 0.58);
  transform: none;
}

.title-char {
  display: inline-block;
  min-width: 34px;
  text-align: center;
}

.title-planet {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-left: -2px;
  border: 1px solid rgba(235, 255, 255, 0.72);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.92), rgba(125, 246, 255, 0.46) 18%, transparent 19%),
    radial-gradient(circle at 58% 62%, rgba(125, 246, 255, 0.34), rgba(9, 32, 48, 0.86) 68%);
  box-shadow: 0 0 16px rgba(125, 246, 255, 0.62);
  vertical-align: middle;
}

.title-planet::before {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 15px;
  border: 2px solid rgba(235, 255, 255, 0.78);
  border-top-color: rgba(125, 246, 255, 0.18);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-25deg);
  box-shadow: 0 0 12px rgba(125, 246, 255, 0.42);
  content: "";
}

.title-planet::after {
  position: absolute;
  right: -34px;
  top: 15px;
  width: 44px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(235, 255, 255, 0.82), rgba(125, 246, 255, 0.28), transparent);
  filter: blur(0.4px);
  transform: rotate(-17deg);
  animation: titleTrail 2.8s ease-in-out infinite;
  content: "";
}

.brand-lockup p,
.compact-brand p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.login-panel,
.recover-panel {
  width: 100%;
  margin-top: auto;
  border: 1px solid rgba(125, 246, 255, 0.42);
  border-radius: 26px;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(5, 12, 18, 0.58);
  box-shadow: 0 0 34px rgba(20, 184, 214, 0.18), inset 0 1px rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px);
}

.panel-title,
.tab-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-bottom: 16px;
  border: 1px solid rgba(125, 246, 255, 0.14);
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.42);
  color: #ffffff;
  font-size: 14px;
  justify-content: center;
  text-align: center;
}

.mini-orbit {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, #f7d8ff 0 8%, #b83fff 9% 60%, #420f74 61%);
  color: #ffffff;
  box-shadow: 0 0 18px rgba(166, 76, 255, 0.8);
}

.field {
  display: grid;
  gap: 7px;
  margin-bottom: 12px;
}

.field span {
  color: rgba(226, 242, 250, 0.76);
  font-size: 12px;
  font-weight: 700;
}

.field input {
  width: 100%;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  color: #07121a;
  font-size: 16px;
  font-weight: 800;
  text-align: center;
}

.field.glow input {
  border-color: rgba(125, 246, 255, 0.9);
  box-shadow: 0 0 14px rgba(125, 246, 255, 0.54);
}

.primary-action,
.outline-action,
.ghost-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 52px;
  border-radius: 20px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
}

.primary-action {
  border: 1px solid rgba(125, 246, 255, 0.72);
  background:
    linear-gradient(90deg, rgba(20, 184, 214, 0.34), rgba(125, 246, 255, 0.2), rgba(166, 76, 255, 0.36)),
    rgba(255, 255, 255, 0.08);
  color: #f7feff;
  box-shadow: 0 0 24px rgba(125, 246, 255, 0.28), inset 0 1px rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(14px);
}

.primary-action svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.inline-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
}

.inline-actions button {
  border: 0;
  background: transparent;
  color: rgba(226, 242, 250, 0.8);
  font-weight: 700;
}

.compact-brand {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 42px;
}

.compact-brand h2 {
  font-size: 30px;
  text-shadow: 0 0 18px rgba(125, 246, 255, 0.72);
}

.compact-brand p {
  grid-column: 2;
  margin-top: -14px;
}

.recover-panel {
  margin-top: 62px;
}

.helper-text {
  margin: 16px 0;
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.6;
  text-align: center;
}

.outline-action,
.ghost-action {
  margin-top: 12px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.05);
}

.ghost-action {
  min-height: 46px;
  color: rgba(255, 255, 255, 0.86);
}

.server-screen {
  overflow: hidden;
}

.server-screen::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 16% 56%, rgba(230, 255, 255, 0.18), transparent 7rem),
    radial-gradient(circle at -14% 56%, rgba(255, 255, 255, 0.34), rgba(125, 246, 255, 0.1) 14%, transparent 34%),
    linear-gradient(180deg, rgba(2, 6, 12, 0.16), rgba(2, 6, 12, 0.74));
  content: "";
}

.server-head {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
}

.back-link {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(125, 246, 255, 0.26);
  border-radius: 16px;
  background: rgba(5, 14, 20, 0.38);
  color: #eafcff;
  backdrop-filter: blur(12px);
}

.back-link svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.server-head h2 {
  margin: 0;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 30px;
  text-shadow: 0 0 18px rgba(125, 246, 255, 0.64);
}

.server-orbit {
  position: relative;
  min-height: 212px;
  margin: 18px 0 10px;
  border: 1px solid rgba(125, 246, 255, 0.16);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
    rgba(2, 8, 14, 0.38);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 0 24px rgba(125, 246, 255, 0.1);
  overflow: hidden;
}

.server-planet {
  position: absolute;
  left: -42px;
  bottom: -54px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 66% 25%, rgba(255, 255, 255, 0.86), rgba(125, 246, 255, 0.38) 10%, transparent 11%),
    radial-gradient(circle at 72% 34%, rgba(125, 246, 255, 0.34), rgba(28, 52, 62, 0.74) 42%, rgba(0, 0, 0, 0.92) 74%);
  box-shadow: 0 0 38px rgba(230, 255, 255, 0.35);
}

.server-ring {
  position: absolute;
  left: 62px;
  bottom: 48px;
  width: 242px;
  height: 58px;
  border: 2px solid rgba(235, 255, 255, 0.42);
  border-top-color: rgba(125, 246, 255, 0.08);
  border-radius: 50%;
  transform: rotate(-18deg);
  box-shadow: 0 0 22px rgba(125, 246, 255, 0.2);
}

.server-dust {
  position: absolute;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(235, 255, 255, 0.86), rgba(125, 246, 255, 0.1), transparent);
  filter: blur(0.4px);
}

.server-dust.d1 {
  right: 18px;
  top: 48px;
  width: 138px;
  transform: rotate(-10deg);
}

.server-dust.d2 {
  right: 42px;
  top: 82px;
  width: 86px;
  opacity: 0.58;
  transform: rotate(-10deg);
}

.server-list {
  display: grid;
  gap: 10px;
}

.server-card {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 72px;
  border: 1px solid rgba(125, 246, 255, 0.22);
  border-radius: 22px;
  padding: 12px 14px;
  background: rgba(5, 13, 20, 0.56);
  color: #f7feff;
  text-align: left;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
}

.server-card.active {
  border-color: rgba(125, 246, 255, 0.62);
  background: linear-gradient(90deg, rgba(125, 246, 255, 0.16), rgba(5, 13, 20, 0.52));
  box-shadow: 0 0 20px rgba(125, 246, 255, 0.2), inset 0 1px rgba(255, 255, 255, 0.14);
}

.server-status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 12px currentColor;
}

.server-status.online,
.server-status.new {
  background: #7df6ff;
  color: #7df6ff;
}

.server-status.busy {
  background: #ffcc6b;
  color: #ffcc6b;
}

.server-card strong,
.server-card em {
  display: block;
}

.server-card strong {
  font-size: 16px;
}

.server-card em {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.server-card b {
  border: 1px solid rgba(125, 246, 255, 0.34);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--cyan);
  font-size: 12px;
}

.server-note {
  margin: 14px 0 0;
  color: rgba(226, 242, 250, 0.58);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.dashboard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
}

.dashboard-head h2 {
  font-size: 28px;
}

.icon-button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(3, 8, 12, 0.58);
  color: var(--cyan);
}

.icon-button svg,
.nav-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.orbit-map {
  position: relative;
  min-height: 292px;
  margin: 24px 0 14px;
  border: 1px solid rgba(125, 246, 255, 0.2);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at center, rgba(125, 246, 255, 0.15), transparent 45%),
    linear-gradient(180deg, rgba(3, 8, 12, 0.52), rgba(3, 8, 12, 0.28));
  overflow: hidden;
}

.planet-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92px;
  height: 92px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.9), rgba(125, 246, 255, 0.34) 16%, transparent 17%),
    radial-gradient(circle at 64% 64%, #243744, #061018 70%);
  box-shadow: 0 0 38px rgba(125, 246, 255, 0.42);
  transform: translate(-50%, -50%);
}

.ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(125, 246, 255, 0.32);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-18deg);
}

.r1 {
  width: 182px;
  height: 86px;
}

.r2 {
  width: 248px;
  height: 126px;
  border-color: rgba(166, 76, 255, 0.3);
}

.route {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0.72;
}

.route-a {
  left: 24px;
  right: 34px;
  top: 82px;
  transform: rotate(12deg);
}

.route-b {
  left: 46px;
  right: 42px;
  bottom: 70px;
  transform: rotate(-16deg);
}

.node {
  position: absolute;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(5, 12, 18, 0.86);
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 0 18px rgba(125, 246, 255, 0.35);
}

.n1 {
  left: 34px;
  top: 58px;
}

.n2 {
  right: 32px;
  top: 106px;
}

.n3 {
  left: 76px;
  bottom: 44px;
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.resource-grid article,
.mission-card,
.ship-card {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: rgba(6, 12, 18, 0.72);
  backdrop-filter: blur(12px);
}

.resource-grid article {
  padding: 12px 10px;
}

.resource-grid span,
.ship-card p {
  color: var(--muted);
  font-size: 12px;
}

.resource-grid strong {
  display: block;
  margin-top: 4px;
  color: #ffffff;
  font-size: 18px;
}

.mission-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding: 14px;
}

.mission-card h3 {
  margin: 0;
  font-size: 16px;
}

.progress-ring {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--cyan) 68%, rgba(255, 255, 255, 0.14) 0);
  color: #061018;
  font-weight: 900;
}

.ship-list {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.ship-card {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 12px;
  min-height: 132px;
  padding: 12px;
  overflow: hidden;
}

.ship-card.featured {
  border-color: rgba(125, 246, 255, 0.46);
  background: linear-gradient(135deg, rgba(20, 184, 214, 0.18), rgba(6, 12, 18, 0.76));
}

.ship-card img {
  width: 112px;
  height: 108px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(125, 246, 255, 0.24));
  transform: scale(1.08);
}

.ship-card h3 {
  margin: 7px 0 4px;
  color: #ffffff;
  font-size: 20px;
}

.ship-card p {
  margin: 0;
  line-height: 1.55;
}

.tag {
  display: inline-flex;
  border: 1px solid rgba(255, 204, 107, 0.5);
  border-radius: 999px;
  padding: 3px 8px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 900;
}

.music-strip {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100% - 36px);
  min-height: 28px;
  border: 1px solid rgba(125, 246, 255, 0.42);
  border-radius: var(--radius);
  padding: 4px 10px;
  background: rgba(2, 7, 12, 0.62);
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  text-align: left;
  backdrop-filter: blur(10px);
  transition: border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.music-strip:hover,
.music-strip.is-playing {
  border-color: rgba(125, 246, 255, 0.88);
  color: #ffffff;
  box-shadow: 0 0 18px rgba(125, 246, 255, 0.22);
}

.music-strip.needs-gesture {
  border-color: rgba(255, 204, 107, 0.64);
  box-shadow: 0 0 18px rgba(255, 204, 107, .16);
  animation: audio-unlock-pulse 1.8s ease-in-out infinite;
}

.music-strip.needs-gesture::after {
  content: "点击开启音乐";
  margin-left: 4px;
  color: #ffcf76;
  font: 800 9px/1 var(--font-body);
  white-space: nowrap;
}

.music-icon {
  display: grid;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  place-items: center;
  border: 1px solid rgba(125, 246, 255, 0.42);
  border-radius: 50%;
  color: var(--cyan);
  font-size: 9px;
  font-weight: 900;
}

.music-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-screen {
  gap: 6px;
  padding: 64px 6px 92px;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    linear-gradient(180deg, rgba(2, 4, 7, 0.2), rgba(1, 5, 7, 0.78)),
    radial-gradient(circle at 50% 24%, rgba(23, 108, 120, 0.28), transparent 38%),
    rgba(2, 7, 9, 0.82);
}

.command-screen::-webkit-scrollbar {
  width: 0;
}

.command-screen::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(0, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(0, 255, 255, 0.04) 1px, transparent 1px),
    radial-gradient(circle at 12% 76%, rgba(0, 220, 255, 0.12), transparent 22%);
  background-size: 42px 42px, 42px 42px, auto;
  opacity: 0.4;
  content: "";
}

.hud-resources {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) 24px;
  gap: 2px;
  align-items: end;
  min-height: 56px;
  border-bottom: 1px solid rgba(157, 248, 255, 0.22);
  padding: 8px 4px 5px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
    rgba(8, 14, 16, 0.42);
  cursor: pointer;
}

.global-hud-resources {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
  display: none;
  background:
    linear-gradient(180deg, rgba(14, 23, 27, 0.96), rgba(7, 12, 14, 0.82)),
    rgba(8, 14, 16, 0.86);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.38), inset 0 -1px rgba(157, 248, 255, 0.18);
  backdrop-filter: blur(10px);
}

body[data-active-screen="command"] .global-hud-resources,
body[data-active-screen="hangar"] .global-hud-resources,
body[data-active-screen="galaxy"] .global-hud-resources,
body[data-active-screen="mail"] .global-hud-resources,
body[data-active-screen="shop"] .global-hud-resources,
body[data-active-screen="moon"] .global-hud-resources,
body[data-active-screen="build-resource"] .global-hud-resources,
body[data-active-screen="build-normal"] .global-hud-resources,
body[data-active-screen="build-moon"] .global-hud-resources,
body[data-active-screen="research"] .global-hud-resources,
body[data-active-screen="ship-build"] .global-hud-resources,
body[data-active-screen="defense"] .global-hud-resources,
body[data-active-screen="dispatch"] .global-hud-resources,
body[data-active-screen="design-center"] .global-hud-resources,
body[data-active-screen="zion-lab"] .global-hud-resources {
  display: grid;
}

.resource-item {
  display: grid;
  grid-template-rows: 24px 14px;
  gap: 1px;
  align-items: end;
  color: #f1f9fb;
  min-width: 0;
  padding: 0 1px;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.resource-name-row,
.resource-item strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resource-name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.resource-item small {
  color: rgba(240, 252, 255, 0.78);
  font-size: 8px;
  font-weight: 800;
}

.resource-item strong {
  color: #ffffff;
  font-size: 10px;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.32);
}

.resource-item.short-resource strong,
.resource-item.short-resource small {
  color: var(--danger);
  text-shadow: 0 0 8px rgba(255, 109, 139, 0.58);
}

.resource-item.short-resource .res-icon {
  border-color: rgba(255, 109, 139, 0.64);
  box-shadow: 0 0 10px rgba(255, 109, 139, 0.34);
}

.res-icon {
  width: 24px;
  height: 20px;
  border: 1px solid rgba(125, 246, 255, 0.34);
  border-radius: 2px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 0 8px currentColor);
}

.res-icon.metal {
  background-image: url("./assets/resource-metal.png");
  color: #9df8ff;
}

.res-icon.crystal {
  background-image: url("./assets/resource-crystal.png");
  color: #49c9ff;
}

.res-icon.energy {
  background-image: url("./assets/resource-energy.png");
  color: #1fd2b8;
}

.res-icon.solar {
  background-image: url("./assets/resource-solar.png");
  color: #ff9aba;
}

.res-icon.gem {
  background-image: url("./assets/resource-gem.png");
  color: #ff5c6e;
}

.resource-detail-panel {
  grid-column: 1 / -1;
  display: none;
  grid-template-columns: 1fr;
  gap: 5px;
  margin-top: 6px;
  border-top: 1px solid rgba(125, 246, 255, 0.24);
  padding: 7px 4px 5px;
  background:
    linear-gradient(180deg, rgba(7, 20, 24, 0.88), rgba(2, 8, 10, 0.94)),
    rgba(0, 0, 0, 0.72);
}

.global-hud-resources.is-expanded .resource-detail-panel {
  display: grid;
}

.resource-detail-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 4px 6px;
  border: 1px solid rgba(18, 195, 205, 0.28);
  border-radius: 5px;
  padding: 5px;
  background: rgba(0, 18, 22, 0.72);
  box-shadow: inset 0 0 12px rgba(0, 255, 255, 0.04);
}

.resource-detail-title {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.resource-detail-title .res-icon {
  flex: 0 0 24px;
}

.resource-detail-title strong {
  color: #f4ffff;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.gem-detail-row .resource-detail-title {
  grid-column: 1;
}

.gem-detail-row .resource-detail-title button {
  margin-left: auto;
  min-width: 42px;
  height: 25px;
  border: 1px solid rgba(255, 197, 75, 0.72);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  background: linear-gradient(180deg, #9b6820, #4c2705);
  color: #fff4c2;
  font-size: 9px;
  font-weight: 900;
}

.resource-detail-row dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
}

.resource-detail-row dl div {
  min-width: 0;
  border-left: 1px solid rgba(125, 246, 255, 0.16);
  padding-left: 5px;
}

.resource-detail-row dt,
.resource-detail-row dd {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resource-detail-row dt {
  color: rgba(235, 255, 255, 0.58);
  font-size: 8px;
  font-weight: 900;
}

.resource-detail-row dd {
  margin-top: 2px;
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
}

.resource-detail-row p {
  grid-column: 1 / -1;
  margin: 0;
  color: rgba(235, 255, 255, 0.62);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.25;
}

.add-resource {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 163, 38, 0.12);
  color: #ffb13d;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 8px rgba(255, 177, 61, 0.82);
}

.add-resource svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(255, 177, 61, 0.72));
}

.add-resource[aria-expanded="true"] {
  background: rgba(255, 177, 61, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 177, 61, 0.32), 0 0 11px rgba(255, 177, 61, 0.2);
}

.fleet-tabs {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(157, 248, 255, 0.22);
  background: linear-gradient(180deg, rgba(35, 39, 43, 0.86), rgba(9, 13, 14, 0.88));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
}

.tab-row,
.action-row {
  display: grid;
  align-items: center;
  color: rgba(245, 252, 255, 0.9);
  font-weight: 600;
  cursor: pointer;
}

.tab-row {
  grid-template-columns: 1.1fr 1.15fr 1.15fr 1.15fr;
  min-height: 35px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 12px;
  text-align: center;
}

.tab-row b,
.action-row b,
.energy-label b,
.planet-showcase p b {
  font-weight: 600;
}

.tab-row .active {
  color: #ff873c;
  text-shadow: 0 0 8px rgba(255, 135, 60, 0.42);
}

.tab-row .ally {
  color: #ff8c43;
}

.tab-row .enemy {
  color: #ff4067;
}

.action-row {
  grid-template-columns: 1fr 1fr 1fr 44px;
  min-height: 34px;
  gap: 5px;
  padding: 4px 6px;
  font-size: 11px;
}

.action-row .action-label {
  display: grid;
  place-items: center;
  min-height: 24px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));
  color: rgba(245, 252, 255, 0.86);
  font-weight: 600;
}

.action-row strong {
  text-align: right;
  color: rgba(245, 252, 255, 0.86);
}

.command-detail-panel {
  display: none;
  border-top: 1px solid rgba(125, 246, 255, 0.18);
  padding: 6px;
  background:
    linear-gradient(180deg, rgba(0, 28, 34, 0.72), rgba(0, 10, 13, 0.92)),
    rgba(0, 0, 0, 0.72);
}

.command-detail-panel.show {
  display: grid;
  gap: 6px;
}

.fleet-summary-group {
  border: 1px solid rgba(18, 195, 205, 0.22);
  border-radius: 5px;
  padding: 5px;
  background: rgba(0, 12, 16, 0.56);
}

.fleet-summary-group h4 {
  display: flex;
  justify-content: space-between;
  margin: 0 0 4px;
  color: rgba(235, 255, 255, 0.82);
  font-size: 10px;
  font-weight: 700;
}

.fleet-summary-group.mine h4 {
  color: #ff9d4d;
}

.fleet-summary-group.ally h4 {
  color: #ffb166;
}

.fleet-summary-group.enemy h4 {
  color: #ff5374;
}

.fleet-summary-group ul,
.task-ship-list {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fleet-summary-group li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 6px;
  color: rgba(235, 255, 255, 0.72);
  font-size: 9px;
  font-weight: 600;
}

.fleet-summary-group li strong {
  color: #f5ffff;
  font-weight: 700;
}

.fleet-summary-group li em {
  grid-column: 1 / -1;
  color: rgba(235, 255, 255, 0.54);
  font-style: normal;
}

.fleet-summary-group li small {
  grid-column: 1 / -1;
  color: rgba(255, 217, 79, 0.78);
  font-size: 8px;
  font-weight: 800;
}

.fleet-summary-group li.empty {
  grid-template-columns: 1fr;
}

.task-empty {
  color: rgba(235, 255, 255, 0.7);
  font-size: 10px;
  font-weight: 600;
  text-align: center;
}

.task-fleet {
  border: 1px solid rgba(18, 195, 205, 0.26);
  border-radius: 5px;
  overflow: hidden;
  background: rgba(0, 15, 18, 0.62);
}

.task-fleet.active {
  border-color: rgba(125, 246, 255, 0.62);
}

.task-fleet > button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px 48px;
  gap: 6px;
  align-items: center;
  width: 100%;
  min-height: 36px;
  border: 0;
  padding: 5px 6px;
  background: transparent;
  color: rgba(235, 255, 255, 0.86);
  text-align: left;
}

.task-fleet strong,
.task-fleet em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-fleet strong {
  color: #f5ffff;
  font-size: 10px;
  font-weight: 700;
}

.task-fleet em {
  margin-top: 2px;
  color: rgba(235, 255, 255, 0.56);
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
}

.task-fleet b,
.task-fleet small {
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  text-align: right;
}

.task-ship-list {
  border-top: 1px solid rgba(125, 246, 255, 0.16);
  padding: 5px 7px 6px;
}

.task-ship-list li {
  display: flex;
  justify-content: space-between;
  color: rgba(235, 255, 255, 0.74);
  font-size: 9px;
  font-weight: 600;
}

.energy-detail-panel {
  margin-top: 6px;
  border-top: 1px solid rgba(125, 246, 255, 0.16);
}

.energy-detail-grid {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 4px 8px;
  color: rgba(235, 255, 255, 0.66);
  font-size: 10px;
  font-weight: 600;
}

.energy-detail-grid strong {
  color: #f7ffff;
  font-weight: 700;
}

.energy-detail-panel p {
  margin: 5px 0 0;
  color: rgba(235, 255, 255, 0.56);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.35;
}

.energy-bar {
  display: grid;
  flex-shrink: 0;
  min-height: 36px;
  border: 1px solid rgba(157, 248, 255, 0.2);
  border-radius: 6px;
  padding: 4px 7px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.58), rgba(26, 30, 30, 0.78));
}

.energy-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.34);
}

.energy-label strong {
  color: #fff8ce;
  font-weight: 600;
}

.energy-label span {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.88);
}

.energy-track {
  height: 9px;
  margin-top: 5px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.58);
  overflow: hidden;
}

.energy-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffd93a, #ff9b16 72%, #fff3a5);
  box-shadow: 0 0 12px rgba(255, 198, 35, 0.66);
}

.planet-showcase {
  position: relative;
  min-height: 212px;
  border: 1px solid rgba(18, 195, 205, 0.54);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(3, 17, 21, 0.04), rgba(0, 8, 12, 0.32) 78%, rgba(0, 8, 12, 0.84)),
    var(--planet-showcase-art, url("./assets/planet-pages/planet-page-1.png")) center / cover no-repeat;
  box-shadow: inset 0 0 18px rgba(0, 255, 255, 0.12), 0 0 10px rgba(0, 255, 255, 0.16);
  overflow: hidden;
  cursor: pointer;
}

.planet-showcase::before {
  position: absolute;
  left: 16%;
  right: 10%;
  top: 16px;
  height: 118px;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(172, 255, 255, 0.46), rgba(72, 207, 255, 0.22) 34%, transparent 68%);
  mix-blend-mode: screen;
  filter: blur(12px);
  opacity: 0.62;
  pointer-events: none;
  animation: planetAura 4.8s ease-in-out infinite;
  content: "";
}

.planet-showcase-open {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  border: 0;
  background: transparent;
}

.planet-showcase h2 {
  position: absolute;
  left: 12px;
  top: 10px;
  z-index: 2;
  margin: 0;
  color: #ffc24b;
  font-size: 17px;
  text-shadow: 0 0 8px rgba(255, 180, 50, 0.4);
}

.planet-thumb {
  position: absolute;
  right: 14px;
  top: 36px;
  z-index: 4;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(157, 248, 255, 0.58);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 7, 9, 0.34)),
    url("./assets/moon.png") center / cover;
  box-shadow: inset 0 0 14px rgba(0, 255, 255, 0.18), 0 0 12px rgba(0, 255, 255, 0.2);
}

.planet-thumb.no-moon {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 7, 9, 0.34)),
    rgba(0, 18, 22, 0.5);
  box-shadow: inset 0 0 12px rgba(0, 255, 255, 0.08);
}

.planet-thumb[hidden] { display: none !important; }

.planet-thumb.moon-thumb {
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: url("./assets/moon.png") center / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 0 8px rgba(102, 232, 240, .34));
}

.planet-arrow {
  position: absolute;
  top: 44%;
  z-index: 6;
  display: grid;
  width: 44px;
  height: 58px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(205, 253, 255, 0.92);
  font: 700 38px/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  text-shadow: 0 0 5px #7df6ff, 0 0 13px rgba(70, 229, 240, .9);
  box-shadow: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .72));
}

.planet-arrow:hover,
.planet-arrow:focus-visible {
  background: transparent;
  color: #fff;
  text-shadow: 0 0 6px #fff, 0 0 17px #44f2ff;
  outline: none;
}
.planet-arrow[hidden] { display: none; }

.planet-arrow.left {
  left: 8px;
}

.planet-arrow.right {
  right: 8px;
}

.planet-dots {
  position: absolute;
  left: 50%;
  bottom: 38px;
  z-index: 3;
  display: flex;
  gap: 7px;
  transform: translateX(-50%);
}

.planet-dots span {
  width: 8px;
  height: 8px;
  border: 1px solid rgba(235, 255, 255, 0.52);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
}

.planet-dots .active {
  background: rgba(194, 255, 255, 0.9);
  box-shadow: 0 0 9px rgba(125, 246, 255, 0.9);
}

.planet-switch-index {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 49px;
  transform: translateX(-50%);
  color: rgba(220, 251, 253, .72);
  font: 800 8px/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .12em;
}

.planet-showcase p {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  margin: 0;
  border-top: 1px solid rgba(18, 195, 205, 0.36);
  padding: 7px 12px;
  background: rgba(0, 48, 54, 0.72);
  color: #e6fbff;
  font-size: 13px;
  font-weight: 600;
}

.planet-detail-panel {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 38px;
  z-index: 5;
  display: none;
  border: 1px solid rgba(125, 246, 255, 0.34);
  border-radius: 5px;
  padding: 7px;
  background:
    linear-gradient(180deg, rgba(0, 30, 36, 0.86), rgba(0, 9, 12, 0.94)),
    rgba(0, 0, 0, 0.72);
  box-shadow: 0 0 16px rgba(0, 255, 255, 0.18), inset 0 0 18px rgba(0, 255, 255, 0.08);
  backdrop-filter: blur(6px);
}

.planet-detail-panel.show {
  display: block;
}

.planet-rename-btn {
  width: 100%;
  min-height: 28px;
  margin-top: 7px;
  border: 1px solid rgba(125, 246, 255, 0.42);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(11, 64, 73, 0.9), rgba(3, 25, 30, 0.94));
  color: #eaffff;
  font-family: inherit;
  font-size: 10px;
  font-weight: 900;
}

.planet-detail-grid {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 64px minmax(0, 1fr);
  gap: 5px 8px;
  align-items: center;
  color: rgba(230, 250, 255, 0.72);
  font-size: 10px;
  font-weight: 700;
}

.planet-detail-grid strong {
  min-width: 0;
  color: #f5feff;
  font-size: 10px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.moon-screen {
  gap: 8px;
}

[data-moon-surface] {
  position: absolute;
  isolation: isolate;
  overflow-x: hidden;
  background: #01070b;
}

[data-moon-surface]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--moon-page-background, url("./assets/moon.png.webp")), var(--moon-page-fallback, url("./assets/optimized/space-bg.webp"));
  background-position: center, center;
  background-size: cover, cover;
  background-repeat: no-repeat;
  opacity: var(--moon-page-opacity, .62);
  pointer-events: none;
}

[data-moon-surface]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 72% 16%, rgb(112 202 255 / .16), transparent 42%),
    linear-gradient(180deg, rgba(2, 8, 12, .18), rgba(1, 5, 8, .58) 58%, rgba(0, 3, 5, .82));
  pointer-events: none;
}

[data-moon-surface] > * {
  position: relative;
  z-index: 1;
}

.moon-ticket-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.moon-ticket-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(rgba(1, 7, 10, .74), rgba(1, 5, 8, .9)), var(--moon-page-background, url("./assets/moon.png")) center / cover no-repeat;
  opacity: .72;
  pointer-events: none;
}

.moon-showcase {
  min-height: 240px;
  background:
    linear-gradient(180deg, rgba(3, 17, 21, 0.06), rgba(0, 8, 12, 0.34) 72%, rgba(0, 8, 12, 0.86)),
    url("./assets/moon.png") center / cover;
}

.moon-showcase::before {
  left: 30%;
  right: 8%;
  top: 22px;
  height: 138px;
  background: radial-gradient(ellipse at center, rgba(204, 239, 255, 0.34), rgba(88, 198, 255, 0.18) 36%, transparent 70%);
}

.planet-rename-button {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 7;
  border: 1px solid rgb(116 213 230 / .32);
  border-radius: 6px;
  padding: 5px 9px;
  color: #bdeff5;
  background: rgb(3 18 23 / .62);
  font: 700 9px var(--ui-font, "Rajdhani", sans-serif);
  letter-spacing: .08em;
  cursor: pointer;
}
.planet-rename-button:hover { border-color: #78e7f4; color: #effeff; background: rgb(8 41 49 / .9); }
.moon-showcase .planet-rename-button { top: 50px; right: 12px; }
.planet-rename-form { display: grid; gap: 10px; }
.planet-rename-form input { width: 100%; border: 1px solid rgb(102 224 237 / .3); border-radius: 7px; padding: 10px 12px; color: #effeff; background: rgb(2 12 16 / .9); font: 700 14px var(--ui-font, sans-serif); }
.planet-rename-form p { margin: 0; color: #8fb3ba; font-size: 10px; }
.moon-back {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 6;
}

.moon-showcase h2 {
  left: 56px;
}

.moon-build-card {
  min-height: 150px;
  background: rgba(2, 10, 13, 0.88);
}

.moon-build-card::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.7)),
    linear-gradient(90deg, rgba(3, 22, 26, 0.82), rgba(3, 22, 26, 0.22)),
    url("./assets/buildings/建筑_月球基地_灰色底图.png") center / cover;
  filter: grayscale(1) saturate(0.15) contrast(1.08) brightness(0.64);
  pointer-events: none;
  content: "";
}

.build-card,
.research-card,
.production-card,
.dispatch-card,
.defense-card {
  position: relative;
  border: 1px solid rgba(18, 195, 205, 0.66);
  border-radius: 7px;
  background: rgba(4, 14, 16, 0.72);
  box-shadow: inset 0 0 18px rgba(0, 255, 255, 0.08), 0 0 8px rgba(0, 255, 255, 0.14);
  overflow: hidden;
}

.module-card-button {
  display: block;
  width: 100%;
  padding: 0;
  color: inherit;
  text-align: left;
}

.split-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 146px;
}

.build-half {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 112px;
  border: 0;
  color: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.64)),
    linear-gradient(90deg, rgba(2, 10, 12, 0.74), rgba(2, 10, 12, 0.22)),
    var(--build-bg) center / cover;
}

.build-half.module-card-active {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.58)),
    linear-gradient(90deg, rgba(2, 10, 12, 0.58), rgba(2, 10, 12, 0.08)),
    var(--module-active-bg) center / cover;
}

.build-half + .build-half,
.normal-build {
  border-left: 1px dashed rgba(255, 255, 255, 0.22);
}

.build-half:hover,
.build-half:focus-visible,
.hex-action:hover,
.hex-action:focus-visible,
.production-message:hover,
.production-message:focus-visible {
  box-shadow: inset 0 0 22px rgba(125, 246, 255, 0.18), 0 0 18px rgba(125, 246, 255, 0.18);
}

.resource-build {
  --build-bg: url("./assets/ui-build-resource-gray.jpg");
  background-color: rgba(70, 78, 74, 0.5);
}

.normal-build {
  --build-bg: url("./assets/ui-build-normal-gray.jpg");
  background-color: rgba(58, 67, 65, 0.48);
}

.build-title {
  color: rgba(245, 255, 255, 0.84);
  font-size: 12px;
  font-weight: 900;
  text-shadow: 0 0 8px rgba(235, 255, 255, 0.45);
}

.hex-action {
  position: absolute;
  left: 8px;
  bottom: 6px;
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  align-items: center;
  border: 0;
  background: transparent;
  color: inherit;
}

.hex-icon {
  display: grid;
  width: 28px;
  height: 25px;
  place-items: center;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  border: 1px solid rgba(157, 248, 255, 0.74);
  background: rgba(0, 180, 190, 0.16);
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.36);
}

.hex-icon::before {
  color: #eaffff;
  font-size: 15px;
  font-weight: 900;
}

.hex-icon.building::before,
.hex-icon.shipyard::before {
  content: "\25A5";
}

.hex-icon.research::before {
  content: "\25CE";
}

.hex-icon.dispatch::before {
  content: "\2316";
}

.hex-icon.defense::before {
  content: "\25C8";
}

.hex-action strong {
  min-width: 40px;
  border-radius: 4px;
  padding: 2px 5px;
  background: rgba(0, 160, 150, 0.82);
  color: #eaffff;
  font-size: 10px;
  line-height: 1.1;
  text-align: center;
}

.static-hex {
  pointer-events: none;
}

.research-card {
  min-height: 154px;
  isolation: isolate;
  background: rgba(4, 12, 14, 0.82);
}

.research-card::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.62)),
    linear-gradient(90deg, rgba(4, 12, 14, 0.8), rgba(4, 12, 14, 0.12)),
    var(
      --research-command-background,
      url("./assets/建筑_设计研究中心.png?v=20260718-research-command-gray3")
    ) center / cover no-repeat;
  filter: grayscale(1) saturate(0.08) contrast(1.08) brightness(0.64);
  pointer-events: none;
  content: "";
}

.research-card.module-card-active {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.64)),
    linear-gradient(90deg, rgba(4, 12, 14, 0.64), rgba(4, 12, 14, 0.08)),
    var(--module-active-bg) center / cover;
}

.research-card.module-card-active::before {
  content: none;
}

.research-card .module-card-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  color: rgba(245, 255, 255, 0.88);
  font-size: 14px;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.44);
}

.research-card::after {
  content: none;
}

.research-card::after {
  right: -20px;
  top: 18px;
  transform: rotate(8deg);
}

.research-card h3 {
  position: relative;
  z-index: 2;
  margin: 9px 0 0 12px;
  color: #f7feff;
  font-size: 16px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.44);
}

.research-progress {
  position: absolute;
  left: 86px;
  right: 10px;
  bottom: 11px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.research-progress span {
  height: 13px;
  background: repeating-linear-gradient(90deg, rgba(245, 255, 255, 0.52) 0 2px, transparent 2px 5px);
}

.research-progress em {
  color: #ffffff;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.production-card {
  min-height: 146px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.68)),
    linear-gradient(90deg, rgba(4, 12, 14, 0.74), rgba(4, 12, 14, 0.16)),
    url("./assets/ui-shipyard-gray.jpg") center / cover;
}

.production-card.module-card-active {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.66)),
    linear-gradient(90deg, rgba(4, 12, 14, 0.64), rgba(4, 12, 14, 0.08)),
    var(--module-active-bg) center / cover;
}

.dispatch-card {
  min-height: 146px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.68)),
    linear-gradient(90deg, rgba(4, 12, 14, 0.74), rgba(4, 12, 14, 0.16)),
    url("./assets/ui-dispatch-gray.jpg") center / cover;
}

.dispatch-card.module-card-active {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.66)),
    linear-gradient(90deg, rgba(4, 12, 14, 0.64), rgba(4, 12, 14, 0.08)),
    var(--module-active-bg) center / cover;
}

.defense-card {
  min-height: 146px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.68)),
    linear-gradient(90deg, rgba(4, 12, 14, 0.74), rgba(4, 12, 14, 0.16));
}

.defense-card::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.42)),
    url("./assets/defense/防御_等离子炮塔.png") center / cover;
  filter: grayscale(1) saturate(0.12) contrast(1.06) brightness(0.62);
  pointer-events: none;
  content: "";
}

.defense-card.module-card-active::before {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.5)),
    linear-gradient(90deg, rgba(4, 12, 14, 0.62), rgba(4, 12, 14, 0.08)),
    var(--module-active-bg) center / cover;
  filter: saturate(0.98) contrast(1.08) brightness(0.88);
}

.moon-build-card.module-card-active::before {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.54)),
    linear-gradient(90deg, rgba(3, 22, 26, 0.62), rgba(3, 22, 26, 0.08)),
    var(--module-active-bg) center / cover;
  filter: saturate(0.98) contrast(1.08) brightness(0.88);
}

.defense-card .production-message {
  z-index: 1;
}

.production-card::before {
  content: none;
}

.production-message {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0 42px;
  background: transparent;
  color: rgba(235, 255, 255, 0.86);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
}

.production-message .hex-icon {
  position: absolute;
  left: 14px;
  bottom: 25px;
  width: 28px;
  height: 25px;
  opacity: 0.9;
}

.module-card-active .module-card-title,
.module-card-active .production-message > strong,
.module-card-active .build-title {
  opacity: 0;
}

.module-task-badge {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 4;
  display: grid;
  gap: 1px;
  max-width: calc(100% - 16px);
  border: 1px solid rgba(125, 246, 255, 0.36);
  border-radius: 4px;
  padding: 3px 5px;
  background: rgba(0, 15, 19, 0.56);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.14);
  pointer-events: none;
}

.module-task-badge strong,
.module-task-badge span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 0 8px #000;
}

.module-task-badge strong {
  color: #f7ffff;
  font-size: 10px;
  font-weight: 900;
}

.module-task-badge span {
  color: #ffd36f;
  font-size: 8px;
  font-weight: 900;
}

.module-progress-card {
  position: absolute;
  left: 64px;
  right: 8px;
  bottom: 8px;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(64px, 1fr) max-content max-content;
  gap: 4px;
  align-items: center;
  width: auto;
  min-height: 15px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  backdrop-filter: none;
}

.build-half .module-progress-card {
  left: 58px;
  right: 6px;
  bottom: 7px;
  grid-template-columns: minmax(38px, 1fr) max-content max-content;
  width: auto;
  min-height: 15px;
  padding: 0;
}

.module-progress-card span {
  color: rgba(235, 255, 255, 0.68);
  font-size: 9px;
  font-weight: 900;
  line-height: 1.1;
}

.module-progress-card strong {
  min-width: 0;
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 0 8px #000;
}

.module-progress-card > span,
.module-progress-card > strong {
  display: none;
}

.module-progress-card .build-progress {
  width: 100%;
  min-width: 38px;
  height: 15px;
  border-color: rgba(125, 246, 255, 0.46);
  border-radius: 4px;
  background:
    repeating-linear-gradient(90deg, rgba(180, 251, 255, 0.22) 0 1px, transparent 1px 5px),
    rgba(0, 12, 15, 0.58);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.16), inset 0 0 8px rgba(0, 255, 255, 0.08);
}

.module-progress-card .build-progress span {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.34) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, rgba(41, 216, 230, 0.9), rgba(255, 194, 75, 0.95));
}

.module-queue-count {
  color: #eaffff;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 0 8px #000;
}

.module-queue-count.empty {
  display: none;
}

.module-progress-card .construction-meta {
  display: block;
  margin-top: 0;
}

.module-progress-card .construction-meta span {
  display: none;
}

.module-progress-card .construction-meta strong {
  display: block;
  margin: 0;
  color: #ffd36f;
  font-size: 9px;
  text-align: right;
  white-space: nowrap;
}

/* Command-center live construction readout. This is driven by the real queues in gameState. */
.command-screen .module-card-active {
  isolation: isolate;
}

.command-screen .command-queue-visual {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 8px;
  background:
    linear-gradient(180deg, rgba(0, 8, 11, 0.28), rgba(0, 8, 11, 0.82)),
    linear-gradient(90deg, rgba(0, 13, 17, 0.76), rgba(0, 13, 17, 0.22) 72%);
  pointer-events: none;
}

.command-screen .command-queue-head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-width: 0;
}

.command-screen .command-queue-speedup,
.construction-speedup {
  display: grid;
  place-items: center;
  min-width: 43px;
  height: 25px;
  border: 1px solid rgba(255, 194, 75, 0.76);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  background: linear-gradient(180deg, rgba(153, 98, 20, 0.96), rgba(65, 33, 3, 0.98));
  color: #fff2b7;
  font-size: 9px;
  font-weight: 900;
  pointer-events: auto;
  cursor: pointer;
}

.command-screen .command-queue-thumb {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(132, 246, 255, 0.72);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(0, 12, 16, 0.84);
  box-shadow: 0 0 12px rgba(39, 217, 232, 0.24);
}

.command-screen .command-queue-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.command-screen .command-queue-title {
  display: grid;
  gap: 1px;
  min-width: 0;
  text-align: left;
  text-shadow: 0 1px 5px #000;
}

.command-screen .command-queue-title em,
.command-screen .command-queue-title strong,
.command-screen .command-queue-title small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-screen .command-queue-title em {
  color: #72eff7;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.command-screen .command-queue-title strong {
  color: #f6ffff;
  font-size: 11px;
  line-height: 1.18;
}

.command-screen .command-queue-title small {
  color: rgba(239, 255, 255, 0.78);
  font-size: 8px;
  font-weight: 800;
  line-height: 1.15;
}

.command-screen .command-queue-progress {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.command-screen .command-queue-meter {
  display: block;
  width: 100%;
  height: 13px;
  border: 1px solid rgba(132, 246, 255, 0.56);
  border-radius: 3px;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(190, 252, 255, 0.2) 0 1px, transparent 1px 6px),
    rgba(0, 12, 16, 0.8);
  box-shadow: inset 0 0 8px rgba(0, 238, 255, 0.1), 0 0 8px rgba(0, 238, 255, 0.14);
}

.command-screen .command-queue-meter-fill {
  display: block;
  width: var(--queue-progress, 0%);
  height: 100%;
  min-width: 0;
  border-radius: 1px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.46) 0 1px, transparent 1px 6px),
    linear-gradient(90deg, #19c6d7, #74eff7 68%, #ffc24b);
  box-shadow: 0 0 9px rgba(74, 233, 247, 0.54);
  transition: width 0.35s linear;
}

.command-screen .command-queue-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1px 6px;
  align-items: baseline;
  min-width: 0;
  color: rgba(235, 255, 255, 0.8);
  font-size: 8px;
  line-height: 1.12;
  text-shadow: 0 1px 4px #000;
}

.command-screen .command-queue-meta b {
  color: #fff2b5;
  font-size: 9px;
  font-weight: 900;
}

.command-screen .command-queue-meta strong {
  min-width: 0;
  overflow: hidden;
  color: #ffd36f;
  font-size: 8px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-screen .command-queue-meta small {
  grid-column: 1 / -1;
  color: rgba(235, 255, 255, 0.7);
  font-size: 7px;
  text-align: right;
  white-space: nowrap;
}

.command-screen .module-card-active .module-action-label,
.command-screen .module-card-active .production-message .hex-icon,
.command-screen .research-card.module-card-active > .hex-action {
  opacity: 0;
}

.command-screen .build-half .command-queue-head {
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 5px;
}

.command-screen .build-half .command-queue-thumb {
  width: 32px;
  height: 32px;
}

.command-screen .build-half .command-queue-title strong {
  font-size: 10px;
}

.command-screen .split-card > .hex-action {
  z-index: 7;
}

.command-screen .resource-build .command-queue-progress {
  margin-left: 47px;
}

@media (prefers-reduced-motion: reduce) {
  .command-screen .command-queue-meter-fill {
    transition: none;
  }
}

/* Unified planet energy state: signed shortage feedback and production-line control. */
.global-hud-resources .resource-item strong.resource-negative,
.global-hud-resources .resource-item.energy-shortage small {
  color: #ff7278;
  text-shadow: 0 0 7px rgba(255, 65, 75, .7);
}

.global-hud-resources .resource-item.energy-shortage {
  border-color: rgba(255, 85, 92, .62);
  background: linear-gradient(180deg, rgba(101, 17, 25, .52), rgba(24, 7, 12, .2));
}

.energy-shortage-message {
  color: #ff8a8f !important;
  font-weight: 800;
  text-shadow: 0 0 7px rgba(255, 67, 76, .24);
}

.solar-detail-row.energy-shortage {
  border-color: rgba(255, 91, 98, .62);
  box-shadow: inset 0 0 18px rgba(116, 17, 25, .24);
}

.resource-line-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  padding: 8px;
  border: 1px solid rgba(89, 220, 225, .36);
  border-radius: 8px;
  background: rgba(6, 28, 34, .64);
}

.resource-line-control span,
.resource-line-control small {
  display: block;
  min-width: 0;
}

.resource-line-control b { color: #8df8f1; font-size: 10px; }
.resource-line-control small { margin-top: 2px; color: rgba(222, 242, 242, .72); font-size: 8px; }
.resource-line-control.stopped { border-color: rgba(255, 116, 120, .46); background: rgba(69, 15, 20, .5); }
.resource-line-control.stopped b { color: #ff8e92; }

.resource-line-control button {
  min-height: 34px;
  max-width: 104px;
  padding: 6px 9px;
  border: 1px solid rgba(93, 225, 231, .58);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(20, 132, 150, .72), rgba(7, 57, 70, .84));
  color: #efffff;
  font: 800 9px/1.2 var(--font-body);
}

.resource-line-control.running button {
  border-color: rgba(255, 132, 136, .5);
  background: linear-gradient(180deg, rgba(130, 43, 48, .7), rgba(61, 15, 21, .88));
}

.resource-line-control button:disabled { opacity: .4; cursor: not-allowed; }

.moon-build-card .production-message {
  z-index: 1;
}

.production-message .hex-icon::before {
  font-size: 15px;
}

.module-action-label {
  position: absolute;
  left: 8px;
  bottom: 7px;
  z-index: 2;
  min-width: 40px;
  border-radius: 4px;
  padding: 2px 5px;
  background: rgba(0, 160, 150, 0.84);
  color: #eaffff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}

.production-message strong {
  position: relative;
  z-index: 2;
}

.build-screen {
  gap: 8px;
  padding: 64px 8px 92px;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    linear-gradient(180deg, rgba(2, 4, 7, 0.08), rgba(1, 6, 8, 0.82)),
    radial-gradient(circle at 50% 16%, rgba(18, 195, 205, 0.16), transparent 34%),
    rgba(2, 7, 9, 0.9);
}

body[data-active-screen="hangar"] [data-screen="hangar"],
body[data-active-screen="mail"] [data-screen="mail"],
body[data-active-screen="shop"] [data-screen="shop"] {
  padding-top: 74px;
}

.build-screen::-webkit-scrollbar {
  width: 0;
}

.build-screen-head {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 56px;
  border: 1px solid rgba(18, 195, 205, 0.38);
  border-radius: 7px;
  padding: 7px 9px;
  background: linear-gradient(180deg, rgba(10, 23, 26, 0.72), rgba(3, 9, 10, 0.9));
  box-shadow: inset 0 0 16px rgba(0, 255, 255, 0.08);
}

.build-screen-head .kicker {
  margin: 0 0 2px;
  color: #ffc24b;
  font-size: 10px;
  letter-spacing: 0;
}

.build-screen-head h2 {
  margin: 0;
  color: #f5feff;
  font-size: 18px;
  line-height: 1.1;
  text-shadow: 0 0 10px rgba(125, 246, 255, 0.34);
}

.building-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.building-item {
  position: relative;
  border: 1px solid rgba(18, 195, 205, 0.44);
  border-radius: 7px;
  overflow: hidden;
  background: rgba(4, 14, 16, 0.72);
  color: #eefcff;
  box-shadow: inset 0 0 14px rgba(0, 255, 255, 0.06);
}

.building-item.active,
.building-item:hover,
.building-item:focus-visible {
  border-color: rgba(125, 246, 255, 0.95);
  box-shadow: inset 0 0 18px rgba(0, 255, 255, 0.1), 0 0 12px rgba(0, 255, 255, 0.24);
}

.building-cover {
  position: relative;
  display: block;
  width: 100%;
  min-height: 126px;
  border: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
  color: inherit;
  text-align: left;
}

.building-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.08);
}

.moon-base-building .building-cover img {
  filter: saturate(0.96) contrast(1.1) brightness(0.9);
}

.building-cover::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.72)),
    linear-gradient(90deg, rgba(0, 34, 40, 0.62), transparent);
  content: "";
}

.building-cover strong,
.level-badge {
  position: absolute;
  z-index: 2;
}

.building-cover strong {
  left: 8px;
  right: 8px;
  bottom: 7px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.82);
}

.level-badge {
  right: 7px;
  top: 7px;
  border: 1px solid rgba(255, 194, 75, 0.58);
  border-radius: 4px;
  padding: 2px 6px;
  background: rgba(28, 18, 4, 0.68);
  color: #ffd36f;
  font-size: 10px;
  font-weight: 900;
}

.building-expand {
  display: none;
  border-top: 1px solid rgba(125, 246, 255, 0.22);
  padding: 8px 9px 10px;
  background: rgba(0, 10, 12, 0.62);
}

.building-item.active .building-expand {
  display: block;
}

.building-expand p {
  margin: 0 0 7px;
  color: rgba(235, 255, 255, 0.86);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}

.upgrade-action {
  min-width: 72px;
  min-height: 28px;
  border: 1px solid rgba(125, 246, 255, 0.54);
  border-radius: 4px;
  background: rgba(0, 160, 150, 0.82);
  color: #eaffff;
  font-size: 12px;
  font-weight: 900;
}

.upgrade-panel {
  border-top: 1px solid rgba(125, 246, 255, 0.22);
  margin-top: 8px;
  padding-top: 6px;
}

.upgrade-panel strong {
  display: block;
  margin-bottom: 3px;
  color: #ffc24b;
  font-size: 11px;
}

.upgrade-panel ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.resource-costs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 5px !important;
}

.resource-costs li {
  display: flex;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 3px 5px;
  background: rgba(0, 0, 0, 0.22);
}

.resource-costs li.enough strong {
  color: #4eff9b;
}

.resource-costs li.short strong {
  color: #ff5c6e;
}

.energy-requirement {
  display: flex;
  justify-content: space-between;
  margin: 4px 0 6px;
  border: 1px solid rgba(255, 194, 75, 0.22);
  border-radius: 4px;
  padding: 4px 6px;
  background: rgba(255, 194, 75, 0.08);
  color: rgba(245, 255, 255, 0.82);
  font-size: 10px;
  font-weight: 900;
}

.energy-requirement.enough strong {
  color: #4eff9b;
}

.energy-requirement.short strong {
  color: #ff5c6e;
}

.quantity-control {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  margin-top: 7px;
  border: 1px solid rgba(125, 246, 255, 0.24);
  border-radius: 5px;
  padding: 5px 6px;
  background: rgba(0, 20, 24, 0.56);
}

.quantity-control > span {
  color: rgba(235, 255, 255, 0.76);
  font-size: 10px;
  font-weight: 900;
}

.quantity-control > div {
  display: grid;
  grid-template-columns: 26px 56px 26px;
  gap: 4px;
  align-items: center;
}

.quantity-control button,
.quantity-control input {
  min-height: 26px;
  border: 1px solid rgba(125, 246, 255, 0.36);
  border-radius: 4px;
  background: rgba(0, 12, 15, 0.72);
  color: #f5ffff;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.quantity-control button {
  color: #7df6ff;
}

.quantity-control input {
  width: 56px;
}

.quantity-slider {
  grid-column: 1 / -1;
  width: 100%;
  accent-color: #29d8e6;
}

.quantity-control > .quantity-slider {
  width: 100%;
  max-width: none;
}

.quantity-slider:disabled {
  opacity: 0.38;
}

.production-limit-state {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 6px;
  margin-top: 7px;
  border: 1px solid rgba(125, 246, 255, 0.18);
  border-radius: 5px;
  padding: 5px 6px;
  background: rgba(3, 18, 22, 0.74);
  color: rgba(232, 252, 255, 0.82);
  font-size: 9px;
  font-weight: 800;
}

.production-limit-state p {
  grid-column: 1 / -1;
  margin: 0;
  line-height: 1.3;
}

.build-ok-reasons {
  color: rgba(112, 255, 190, 0.86);
}

.build-block-reasons {
  color: rgba(255, 109, 139, 0.92);
}

.upgrade-panel li {
  color: rgba(235, 255, 255, 0.78);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
}

.construction-stage {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 8px;
  margin-top: 8px;
  border: 1px solid rgba(125, 246, 255, 0.28);
  border-radius: 5px;
  padding: 7px;
  background:
    linear-gradient(180deg, rgba(0, 26, 31, 0.84), rgba(0, 8, 11, 0.94)),
    rgba(0, 0, 0, 0.72);
  box-shadow: inset 0 0 14px rgba(0, 255, 255, 0.05);
}

.construction-stage-body { padding-right: 72px; }
.construction-queue-actions {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 2;
  display: flex;
  gap: 5px;
}
.construction-queue-actions .construction-speedup { position: static; }
.construction-queue-actions .construction-speedup.is-secondary {
  color: rgba(232, 249, 255, 0.78);
  border-color: rgba(148, 183, 199, 0.28);
  background: rgba(10, 29, 39, 0.78);
}

.construction-stage.is-building {
  border-color: rgba(255, 194, 75, 0.52);
}

.construction-stage.is-queued {
  border-color: rgba(125, 246, 255, 0.34);
  opacity: 0.9;
}

.construction-stage.is-complete {
  border-color: rgba(78, 255, 155, 0.58);
}

.construction-stage img {
  width: 96px;
  height: 78px;
  border: 1px solid rgba(125, 246, 255, 0.22);
  border-radius: 4px;
  object-fit: cover;
  filter: saturate(0.98) contrast(1.08) brightness(0.88);
}

.construction-stage-body {
  min-width: 0;
}

.construction-stage-body span,
.construction-meta {
  color: rgba(235, 255, 255, 0.62);
  font-size: 10px;
  font-weight: 900;
}

.construction-stage-body strong {
  display: block;
  margin-top: 2px;
  color: #f8ffff;
  font-size: 12px;
}

.construction-stage-body p {
  margin: 3px 0 6px;
  color: rgba(235, 255, 255, 0.74);
  font-size: 10px;
  line-height: 1.35;
}

.build-progress {
  height: 8px;
  border: 1px solid rgba(125, 246, 255, 0.32);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.38);
}

.build-progress span {
  display: block;
  min-width: 8px;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(41, 216, 230, 0.86), rgba(255, 194, 75, 0.95));
  box-shadow: 0 0 10px rgba(41, 216, 230, 0.52);
}

.construction-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 5px;
}

.construction-meta strong {
  margin: 0;
  color: #ffd36f;
  white-space: nowrap;
}

.system-list {
  display: grid;
  gap: 8px;
}

.system-control-page {
  display: grid;
  gap: 8px;
}

.system-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(18, 195, 205, 0.34);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(2, 9, 12, 0.88);
}

.system-tab {
  min-height: 31px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(42, 50, 54, 0.92), rgba(8, 13, 16, 0.92));
  color: rgba(230, 242, 246, 0.78);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.1;
}

.system-tab.active {
  background: linear-gradient(180deg, rgba(13, 82, 92, 0.94), rgba(5, 35, 40, 0.96));
  color: #e9ffff;
  box-shadow: inset 0 -2px 0 rgba(31, 230, 230, 0.78), inset 0 0 14px rgba(31, 230, 230, 0.22);
}

.system-cards {
  display: grid;
  gap: 7px;
}

.system-unit {
  border: 1px solid rgba(18, 195, 205, 0.5);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(2, 10, 12, 0.82);
  box-shadow: inset 0 0 14px rgba(0, 255, 255, 0.06);
}

.system-unit.active {
  border-color: rgba(24, 215, 235, 0.96);
  box-shadow: 0 0 12px rgba(0, 210, 230, 0.26), inset 0 0 16px rgba(0, 255, 255, 0.08);
}

.system-unit.locked {
  border-color: rgba(130, 142, 148, 0.34);
  filter: saturate(0.45);
}

.system-unit.locked .system-cover img {
  filter: grayscale(0.78) brightness(0.62);
}

.system-cover {
  position: relative;
  display: block;
  width: 100%;
  min-height: 116px;
  border: 0;
  padding: 0;
  overflow: hidden;
  background: #061014;
  color: #f6feff;
  text-align: left;
}

.system-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.96) contrast(1.08);
}

.system-cover::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.68)),
    linear-gradient(90deg, rgba(0, 38, 44, 0.76), rgba(0, 0, 0, 0.08) 62%);
  content: "";
}

.research .system-cover {
  min-height: 124px;
}

.research .system-cover img {
  object-fit: cover;
  padding: 0;
  background: #061014;
}

.research .system-cover::after {
  background:
    linear-gradient(90deg, rgba(0, 28, 34, 0.62), rgba(0, 0, 0, 0.1) 52%, rgba(0, 0, 0, 0.72)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.66));
}

.system-level,
.system-owned-count,
.system-cover strong {
  position: absolute;
  z-index: 2;
}

.system-level {
  left: 6px;
  bottom: 28px;
  border: 1px solid rgba(125, 246, 255, 0.5);
  border-radius: 3px;
  padding: 2px 5px;
  background: rgba(0, 44, 52, 0.76);
  color: #88faff;
  font-size: 10px;
  font-weight: 900;
}

.system-owned-count {
  top: 7px;
  right: 7px;
  max-width: 118px;
  border: 1px solid rgba(126, 255, 218, 0.58);
  border-radius: 999px;
  padding: 3px 7px;
  background: rgba(0, 36, 34, 0.78);
  color: #9effdd;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 10px rgba(42, 255, 184, 0.2);
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.9);
}

.system-cover strong {
  left: 6px;
  right: 8px;
  bottom: 7px;
  color: #eaffff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  text-shadow: 0 0 8px #000;
}

.system-detail {
  border-top: 1px solid rgba(125, 246, 255, 0.26);
  padding: 8px;
  background:
    linear-gradient(180deg, rgba(0, 24, 29, 0.84), rgba(0, 10, 13, 0.96)),
    rgba(0, 0, 0, 0.74);
}

.system-detail p {
  margin: 0 0 7px;
  color: rgba(235, 255, 255, 0.82);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.42;
}

.detail-grid {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 4px 8px;
  border-top: 1px solid rgba(125, 246, 255, 0.16);
  border-bottom: 1px solid rgba(125, 246, 255, 0.16);
  padding: 6px 0;
  color: rgba(230, 248, 252, 0.72);
  font-size: 10px;
  font-weight: 900;
}

.detail-grid strong {
  color: #f7ffff;
  min-width: 0;
}

.detail-grid em {
  color: #4eff9b;
  font-style: normal;
}

.upgrade-panel.compact {
  margin-top: 7px;
  padding-top: 0;
  border-top: 0;
}

.system-upgrade {
  display: block;
  min-width: 92px;
  margin: 8px auto 0;
  background: linear-gradient(180deg, rgba(40, 220, 138, 0.96), rgba(0, 128, 84, 0.94));
  border-color: rgba(141, 255, 199, 0.64);
}

.system-item {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 8px;
  min-height: 122px;
  border: 1px solid rgba(18, 195, 205, 0.5);
  border-radius: 7px;
  padding: 7px;
  background: rgba(4, 14, 16, 0.76);
  box-shadow: inset 0 0 14px rgba(0, 255, 255, 0.06);
}

.system-item img {
  width: 116px;
  height: 108px;
  border: 1px solid rgba(125, 246, 255, 0.22);
  border-radius: 5px;
  object-fit: cover;
}

.system-item span {
  display: inline-block;
  border: 1px solid rgba(255, 194, 75, 0.54);
  border-radius: 4px;
  padding: 2px 6px;
  color: #ffd36f;
  font-size: 10px;
  font-weight: 900;
}

.system-item h3 {
  margin: 5px 0 4px;
  color: #ffffff;
  font-size: 15px;
}

.system-item p {
  margin: 0 0 7px;
  color: rgba(235, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.system-item button {
  min-height: 28px;
  border: 1px solid rgba(125, 246, 255, 0.54);
  border-radius: 4px;
  background: rgba(0, 160, 150, 0.78);
  color: #eaffff;
  font-size: 12px;
  font-weight: 900;
}

.galaxy-screen {
  gap: 0;
  padding: 62px 6px 86px;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    linear-gradient(180deg, rgba(2, 8, 12, 0.28), rgba(2, 8, 12, 0.88)),
    radial-gradient(circle at 62% 38%, rgba(56, 176, 194, 0.22), transparent 38%),
    linear-gradient(135deg, #03070b, #081d23 48%, #030608);
}

.galaxy-screen::-webkit-scrollbar {
  width: 0;
}

.galaxy-header {
  position: relative;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(125, 246, 255, 0.22);
  border-bottom: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.54)),
    rgba(4, 12, 15, 0.9);
  overflow: hidden;
}

.galaxy-header h2 {
  position: relative;
  z-index: 1;
  width: 156px;
  margin: 0;
  padding: 7px 0;
  transform: skewX(-18deg);
  background: linear-gradient(180deg, rgba(12, 48, 58, 0.96), rgba(5, 18, 24, 0.96));
  color: #f5feff;
  font-size: 16px;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 0 10px rgba(125, 246, 255, 0.5);
}

.galaxy-header h2::after {
  position: absolute;
  inset: auto 18px -4px;
  height: 2px;
  background: #29d8e6;
  box-shadow: 0 0 10px rgba(41, 216, 230, 0.82);
  content: "";
}

.galaxy-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(125, 246, 255, 0.2);
  background: rgba(0, 0, 0, 0.34);
}

.galaxy-tabs button {
  min-height: 34px;
  border: 0;
  border-right: 1px solid rgba(125, 246, 255, 0.16);
  background: linear-gradient(180deg, rgba(19, 45, 51, 0.76), rgba(4, 15, 19, 0.86));
  color: rgba(230, 250, 255, 0.78);
  font-size: 12px;
  font-weight: 900;
}

.galaxy-tabs button:last-child {
  border-right: 0;
}

.galaxy-tabs .active {
  background: linear-gradient(180deg, rgba(20, 78, 88, 0.92), rgba(7, 31, 38, 0.96));
  color: #eaffff;
  box-shadow: inset 0 -2px 0 rgba(41, 216, 230, 0.82), inset 0 0 16px rgba(41, 216, 230, 0.18);
}

.galaxy-coordinate-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px 40px;
  gap: 6px;
  border: 1px solid rgba(125, 246, 255, 0.24);
  border-top: 0;
  padding: 5px 6px;
  background:
    radial-gradient(circle at 68% 20%, rgba(41, 216, 230, 0.16), transparent 36%),
    rgba(1, 17, 22, 0.86);
}

.galaxy-coordinate-card,
.galaxy-coordinate-picker {
  min-width: 0;
  border: 1px solid rgba(125, 246, 255, 0.28);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(13, 38, 46, 0.82), rgba(3, 12, 17, 0.92));
  color: #eaffff;
  text-align: left;
  box-shadow: inset 0 0 12px rgba(0, 255, 255, 0.06);
}

.galaxy-coordinate-card {
  display: grid;
  gap: 2px;
  padding: 5px 7px;
}

.galaxy-coordinate-card span {
  color: #ffd36f;
  font-size: 12px;
  font-weight: 900;
}

.galaxy-coordinate-card em {
  min-width: 0;
  color: rgba(235, 255, 255, 0.72);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.galaxy-coordinate-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  align-items: center;
  padding: 4px;
  text-align: center;
}

.galaxy-coordinate-picker span {
  color: rgba(235, 255, 255, 0.64);
  font-size: 8px;
  font-weight: 900;
}

.galaxy-coordinate-picker strong {
  grid-column: 1 / -1;
  color: #f7ffff;
  font-size: 13px;
  font-weight: 900;
}

.galaxy-system-stepper {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.galaxy-system-stepper button {
  border: 1px solid rgba(125, 246, 255, 0.34);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(15, 55, 66, 0.94), rgba(4, 22, 28, 0.95));
  color: #eafcff;
  font-family: inherit;
  font-size: 9px;
  font-weight: 900;
}

.galaxy-table-head,
.galaxy-row {
  display: grid;
  grid-template-columns: 50px 34px minmax(0, 1fr) 52px 45px 62px;
  align-items: center;
}

.galaxy-table-head {
  min-height: 28px;
  border: 1px solid rgba(125, 246, 255, 0.24);
  border-top: 0;
  padding: 0 4px;
  background: rgba(0, 34, 40, 0.78);
  color: #c6f8ff;
  font-size: 10px;
  font-weight: 900;
}

.galaxy-table-head span {
  min-width: 0;
  text-align: center;
}

.galaxy-map {
  display: grid;
  gap: 3px;
  padding: 6px 0 4px;
}

.galaxy-list-panel[hidden],
.star-map-tab[hidden] {
  display: none;
}

.galaxy-empty-state {
  border: 1px solid rgba(125, 246, 255, 0.2);
  border-radius: 7px;
  padding: 18px 10px;
  background: rgba(3, 18, 24, 0.76);
  color: rgba(235, 255, 255, 0.68);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.galaxy-row-wrap {
  display: grid;
  gap: 2px;
}

.galaxy-row {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(125, 246, 255, 0.24);
  border-radius: 7px;
  padding: 2px 4px;
  background:
    linear-gradient(90deg, rgba(5, 16, 22, 0.96), rgba(13, 40, 50, 0.82), rgba(5, 14, 19, 0.96)),
    rgba(0, 0, 0, 0.62);
  color: #f1feff;
  font-family: inherit;
  box-shadow: inset 0 0 12px rgba(125, 246, 255, 0.05);
}

.galaxy-row:hover,
.galaxy-row:focus-visible,
.galaxy-row.active {
  border-color: rgba(125, 246, 255, 0.72);
  box-shadow: 0 0 12px rgba(41, 216, 230, 0.22), inset 0 0 14px rgba(41, 216, 230, 0.1);
}

.galaxy-row.active {
  background:
    linear-gradient(90deg, rgba(12, 45, 42, 0.98), rgba(11, 70, 73, 0.86), rgba(5, 18, 22, 0.96)),
    rgba(0, 0, 0, 0.7);
  border-color: rgba(93, 255, 188, 0.8);
  box-shadow: 0 0 14px rgba(93, 255, 188, 0.28), inset 0 0 16px rgba(93, 255, 188, 0.1);
}

.galaxy-coord,
.galaxy-debris,
.galaxy-player {
  min-width: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.galaxy-coord {
  color: rgba(230, 250, 255, 0.86);
  font-size: 10px;
  font-weight: 900;
}

.planet-avatar {
  position: relative;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  justify-self: center;
  filter: drop-shadow(0 0 7px var(--planet-glow, rgba(125, 246, 255, 0.65)));
}

.planet-avatar img {
  width: var(--planet-size, 28px);
  height: var(--planet-size, 28px);
  border: 1px solid color-mix(in srgb, var(--planet-glow, #7df6ff), transparent 35%);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: inset -5px -5px 8px rgba(0, 0, 0, 0.45), 0 0 10px color-mix(in srgb, var(--planet-glow, #7df6ff), transparent 58%);
}

.planet-avatar.has-ring::after {
  content: "";
  position: absolute;
  width: 36px;
  height: 12px;
  border: 1px solid color-mix(in srgb, var(--planet-glow, #7df6ff), transparent 20%);
  border-radius: 50%;
  transform: rotate(-18deg);
  opacity: 0.64;
}

.galaxy-planet-name {
  display: grid;
  min-width: 0;
  gap: 1px;
  padding-left: 1px;
}

.galaxy-planet-name strong {
  min-width: 0;
  color: #f8ffff;
  font-size: 10px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.galaxy-planet-name em {
  min-width: 0;
  color: rgba(185, 236, 240, 0.68);
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.galaxy-moon {
  display: grid;
  gap: 2px;
  min-height: 34px;
  place-items: center;
  text-align: center;
}

.galaxy-moon.is-target {
  cursor: pointer;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  transition: transform 160ms ease, filter 160ms ease;
}

.galaxy-moon.is-target:hover,
.galaxy-moon.is-target:focus-visible {
  transform: translateY(-1px);
  outline: 0;
  background: transparent;
  filter: drop-shadow(0 0 6px rgba(125, 246, 255, .58));
}

.alien-scout-gate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 7px 9px 4px;
  padding: 8px 10px;
  border: 1px solid rgba(125, 246, 255, 0.24);
  border-radius: 9px;
  background: linear-gradient(90deg, rgba(5, 20, 27, 0.94), rgba(10, 41, 48, 0.7));
}

.alien-scout-gate span {
  color: rgba(203, 224, 228, 0.72);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.alien-scout-gate strong {
  color: #7df6ff;
  font-size: 10px;
  text-align: right;
}

.alien-scout-gate.is-locked {
  border-color: rgba(255, 180, 77, 0.28);
  background: linear-gradient(90deg, rgba(30, 19, 12, 0.86), rgba(14, 27, 32, 0.78));
}

.alien-scout-gate.is-locked strong,
.intel-unknown { color: #e8b76b !important; }

.galaxy-intel-grid .intel-wide { grid-column: 1 / -1; }

.galaxy-intel-grid .intel-wide strong {
  overflow-wrap: anywhere;
  text-align: right;
}

.alien-direct-reward {
  display: grid;
  gap: 3px;
  margin: 5px 9px 8px;
  padding: 8px 10px;
  border-left: 2px solid #ffb94f;
  border-radius: 4px 9px 9px 4px;
  background: rgba(255, 169, 54, 0.07);
}

.alien-direct-reward span { color: #f0bd73; font-size: 9px; }
.alien-direct-reward strong { color: #fff1cc; font-size: 10px; line-height: 1.45; }

.galaxy-moon strong {
  max-width: 46px;
  color: rgba(235, 255, 255, 0.84);
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.galaxy-moon img {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.08) drop-shadow(0 0 5px rgba(125, 246, 255, .32));
}

.galaxy-scout-mail-hint {
  margin: 8px 9px 10px !important;
  border-left: 2px solid rgba(91, 226, 236, .72);
  padding: 8px 9px !important;
  background: rgba(4, 16, 21, .54);
  color: rgba(218, 238, 241, .78) !important;
  font-size: 9px !important;
  line-height: 1.5 !important;
}

.alien-public-status {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 10px;
  margin: 7px 9px;
  padding: 8px 10px;
  border: 1px solid rgba(118, 201, 208, .2);
  background: rgba(4, 14, 18, .5);
}
.alien-public-status span { color: rgba(186, 209, 213, .68); font-size: 8px; }
.alien-public-status strong { color: #eef9fa; font-size: 10px; text-align: right; }
.alien-public-status em { grid-column: 1 / -1; color: #d8b268; font-size: 8px; font-style: normal; }
.alien-public-status.occupied { border-color: color-mix(in srgb, var(--occupation-color, #65f0c5) 55%, transparent); background: linear-gradient(100deg, color-mix(in srgb, var(--occupation-color, #65f0c5) 18%, transparent), rgba(4, 14, 18, .72)); box-shadow: inset 3px 0 0 var(--occupation-color, #65f0c5); }
.alien-public-status.occupied span { color: var(--occupation-color, #65f0c5); font-weight: 800; letter-spacing: .08em; }
.alien-public-status.occupied.completed { opacity: .82; }

.galaxy-moon.empty {
  min-height: 30px;
  opacity: 0.28;
}

.galaxy-debris {
  color: #d7f7ff;
  font-size: 10px;
  font-weight: 900;
}

.galaxy-player {
  color: rgba(235, 255, 255, 0.8);
  font-size: 9px;
  font-weight: 800;
}

.galaxy-player strong,
.galaxy-player em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.galaxy-player em {
  color: rgba(125, 246, 255, 0.62);
  font-size: 7px;
  font-style: normal;
}

.planet-action-bar {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 3px;
  border: 1px solid rgba(93, 255, 188, 0.28);
  border-radius: 6px;
  padding: 4px;
  background: linear-gradient(90deg, rgba(3, 18, 22, 0.94), rgba(8, 44, 45, 0.78), rgba(3, 18, 22, 0.94));
  box-shadow: inset 0 0 12px rgba(93, 255, 188, 0.08);
}

.planet-action-btn {
  display: grid;
  min-width: 0;
  min-height: 36px;
  place-items: center;
  gap: 1px;
  border: 1px solid rgba(125, 246, 255, 0.46);
  border-radius: 5px;
  padding: 3px 2px;
  background: linear-gradient(180deg, rgba(12, 58, 66, 0.96), rgba(4, 24, 30, 0.96));
  color: #ecfeff;
  font-family: inherit;
  box-shadow: inset 0 0 10px rgba(125, 246, 255, 0.08);
}

.planet-action-btn span {
  color: #8effd1;
  font-size: 13px;
  line-height: 1;
}

.planet-action-btn strong {
  max-width: 100%;
  overflow: hidden;
  color: #f7ffff;
  font-size: 8px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planet-action-btn.is-active {
  border-color: rgba(255, 225, 118, 0.86);
  background: linear-gradient(180deg, rgba(103, 76, 18, 0.96), rgba(43, 31, 8, 0.96));
  box-shadow: 0 0 10px rgba(255, 216, 91, 0.26), inset 0 0 12px rgba(255, 216, 91, 0.12);
}

.planet-action-btn.is-active span,
.planet-action-btn.is-active strong {
  color: #ffe176;
}

.planet-action-btn:hover:not(:disabled),
.planet-action-btn:focus-visible:not(:disabled) {
  border-color: rgba(93, 255, 188, 0.86);
  box-shadow: 0 0 10px rgba(93, 255, 188, 0.26), inset 0 0 12px rgba(93, 255, 188, 0.12);
}

.planet-action-btn:disabled,
.planet-action-btn.is-disabled {
  cursor: not-allowed;
  border-color: rgba(160, 170, 174, 0.28);
  background: linear-gradient(180deg, rgba(38, 46, 50, 0.8), rgba(16, 20, 23, 0.82));
  color: rgba(220, 230, 232, 0.42);
  opacity: 0.52;
}

.planet-action-btn:disabled span,
.planet-action-btn:disabled strong {
  color: rgba(220, 230, 232, 0.46);
}

.planet-action-modal {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(3px);
}

.planet-action-dialog {
  width: min(318px, 100%);
  border: 1px solid rgba(125, 246, 255, 0.48);
  border-radius: 7px;
  padding: 14px;
  background:
    radial-gradient(circle at 50% 0%, rgba(93, 255, 188, 0.16), transparent 36%),
    linear-gradient(180deg, rgba(2, 15, 20, 0.98), rgba(0, 0, 0, 0.96));
  box-shadow: 0 0 28px rgba(0, 255, 230, 0.18), inset 0 0 16px rgba(125, 246, 255, 0.08);
}

.planet-action-dialog h3 {
  margin: 0 0 6px;
  color: #ffd94f;
  font-size: 15px;
  font-weight: 900;
}

.planet-action-dialog p {
  margin: 0 0 10px;
  color: rgba(235, 255, 255, 0.82);
  font-size: 11px;
  font-weight: 800;
}

.planet-action-dialog dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin: 0 0 12px;
}

.planet-action-dialog div {
  border: 1px solid rgba(125, 246, 255, 0.18);
  border-radius: 5px;
  padding: 5px;
  background: rgba(8, 31, 38, 0.68);
}

.planet-action-dialog dt,
.planet-action-dialog dd {
  margin: 0;
}

.planet-action-dialog dt {
  color: rgba(125, 246, 255, 0.68);
  font-size: 8px;
  font-weight: 900;
}

.planet-action-dialog dd {
  color: #f7ffff;
  font-size: 10px;
  font-weight: 900;
}

.planet-action-dialog button {
  width: 100%;
  border: 1px solid rgba(93, 255, 188, 0.66);
  border-radius: 5px;
  padding: 8px;
  background: linear-gradient(180deg, rgba(21, 95, 83, 0.96), rgba(8, 39, 42, 0.96));
  color: #f7ffff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
}

.star-map-tab {
  display: grid;
  gap: 6px;
  padding-top: 6px;
}

.star-map-shell {
  display: grid;
  gap: 6px;
  min-height: 446px;
  border: 1px solid rgba(125, 246, 255, 0.24);
  border-radius: 8px;
  padding: 7px;
  background:
    radial-gradient(circle at 50% 35%, rgba(67, 137, 173, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(2, 12, 18, 0.96), rgba(0, 0, 0, 0.9));
  overflow: hidden;
}

.star-map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid rgba(125, 246, 255, 0.14);
  padding-bottom: 5px;
}

.star-map-head div {
  display: grid;
  gap: 1px;
}

.star-map-head span,
.star-map-head em {
  color: rgba(197, 245, 255, 0.66);
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
}

.star-map-head strong {
  color: #ffe176;
  font-size: 13px;
  font-weight: 900;
}

.solar-orbit-map {
  display: grid;
  gap: 5px;
}

.star-map-command-dock {
  display: grid;
  gap: 5px;
  width: 100%;
  min-width: 0;
  border-radius: 10px;
  padding-top: 1px;
}

.galaxy-constellation-shell {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.solar-system-map-viewport {
  position: relative;
  height: 640px;
  border: 1px solid rgba(125, 246, 255, 0.18);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 218, 96, 0.12), transparent 9%),
    radial-gradient(circle at 24% 18%, rgba(125, 246, 255, 0.12), transparent 24%),
    radial-gradient(circle at 82% 76%, rgba(177, 92, 255, 0.1), transparent 26%),
    rgba(1, 8, 14, 0.8);
  overflow: auto;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  cursor: grab;
  scrollbar-width: none;
  touch-action: pan-y;
}

.solar-system-map-viewport::-webkit-scrollbar { display: none; }
.solar-system-map-viewport.is-dragging { cursor: grabbing; }

.solar-orbit-stage {
  position: relative;
  left: 0;
  top: 0;
  width: 2100px;
  height: 2100px;
  transform: scale(var(--star-map-scale, 1));
  transform-origin: top left;
  transition: transform 0.25s ease;
  will-change: transform;
}

.solar-core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  transform: translate(-50%, -50%);
}

.solar-core span {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6b6, #ffc74a 44%, rgba(255, 111, 45, 0.36) 74%, transparent 76%);
  box-shadow: 0 0 20px rgba(255, 195, 72, 0.72);
}

.solar-core strong {
  position: absolute;
  top: 31px;
  color: rgba(255, 232, 142, 0.9);
  font-size: 8px;
  font-weight: 900;
}

.orbit-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--orbit-size);
  aspect-ratio: 1;
  border: 1px solid rgba(112, 156, 178, 0.18);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.orbit-planet-node {
  position: absolute;
  left: var(--orbit-x);
  top: var(--orbit-y);
  z-index: 5;
  width: 34px;
  min-height: 42px;
  border: 0;
  padding: 0;
  background: transparent;
  color: #f7ffff;
  font-family: inherit;
  transform: translate(-50%, -50%);
}

.orbit-planet-node img {
  width: 24px;
  height: 24px;
  border: 1px solid color-mix(in srgb, var(--planet-color, #7df6ff), transparent 22%);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 9px color-mix(in srgb, var(--planet-color, #7df6ff), transparent 35%);
  animation: planet-self-rotate var(--planet-spin-duration, 24s) linear infinite;
  will-change: transform;
}

@keyframes planet-self-rotate {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-planet-node img { animation: none; }
}

.orbit-planet-node.active img {
  border-color: #7df6ff;
  box-shadow: 0 0 14px rgba(125, 246, 255, 0.72), 0 0 22px color-mix(in srgb, var(--planet-color, #7df6ff), transparent 35%);
}

.orbit-planet-node.is-own img {
  box-shadow: 0 0 12px rgba(85, 227, 154, 0.7);
}

.orbit-planet-node.is-alien img {
  border-color: rgba(177, 92, 255, 0.82);
  box-shadow: 0 0 13px rgba(177, 92, 255, 0.68);
}

.orbit-planet-node.is-resource img {
  border-color: rgba(255, 225, 118, 0.86);
  box-shadow: 0 0 14px rgba(255, 207, 75, 0.68);
}

.orbit-planet-node.is-stronghold img {
  border-color: rgba(255, 159, 74, 0.88);
  border-radius: 30% 50% 38% 50%;
  box-shadow: 0 0 14px rgba(255, 145, 67, 0.7);
}

.orbit-slot {
  position: absolute;
  left: -2px;
  top: -3px;
  z-index: 2;
  display: grid;
  width: 13px;
  height: 13px;
  place-items: center;
  border: 1px solid rgba(125, 246, 255, 0.32);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  color: #dffcff;
  font-size: 7px;
  font-weight: 900;
}

.orbit-mini-moon {
  position: absolute;
  right: calc(3px - var(--moon-index, 0) * 7px);
  top: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c8d4da;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.55);
}

.orbit-mini-moon.is-alien-moon {
  background: #c893ff;
  box-shadow: 0 0 7px rgba(177, 92, 255, 0.85);
}

.orbit-resource-stars {
  position: absolute;
  left: 50%;
  top: 23px;
  color: #ffe176;
  font-size: 6px;
  letter-spacing: -1px;
  text-shadow: 0 0 5px rgba(255, 209, 85, 0.7);
  transform: translateX(-50%);
  white-space: nowrap;
}

.orbit-node-label {
  position: absolute;
  left: 50%;
  top: 31px;
  display: grid;
  min-width: 58px;
  pointer-events: none;
  transform: translateX(-50%);
}

.orbit-node-label strong,
.orbit-node-label em {
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px #000;
  white-space: nowrap;
}

.orbit-node-label strong {
  color: rgba(245, 255, 255, 0.88);
  font-size: 7px;
  font-weight: 900;
}

.orbit-node-label em {
  color: rgba(164, 231, 241, 0.72);
  font-size: 6px;
  font-style: normal;
  font-weight: 800;
}

.star-map-selection {
  display: grid;
  place-items: center;
  gap: 1px;
  width: calc(100% - 14px);
  margin-inline: auto;
  border: 1px solid rgba(138, 225, 235, .2);
  border-radius: 9px;
  padding: 5px 9px;
  background: linear-gradient(180deg, rgba(11, 29, 37, .4), rgba(2, 12, 18, .28));
  box-shadow: inset 0 1px rgba(217, 252, 255, .035);
  backdrop-filter: blur(9px) saturate(1.08);
  text-align: center;
}

.star-map-selection span {
  color: #f7ffff;
  font-size: 10px;
  font-weight: 900;
}

.star-map-selection em {
  color: rgba(197, 245, 255, 0.68);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.star-map-shell .planet-action-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(48px, 68px));
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: calc(100% - 14px);
  margin-inline: auto;
  border: 1px solid rgba(135, 225, 236, .3);
  border-radius: 12px;
  padding: 7px 9px;
  background:
    linear-gradient(180deg, rgba(15, 35, 43, .48), rgba(2, 12, 18, .34)),
    radial-gradient(circle at 50% 0, rgba(94, 222, 235, .09), transparent 58%);
  box-shadow:
    inset 0 1px rgba(226, 253, 255, .075),
    inset 0 -1px rgba(0, 0, 0, .2),
    0 8px 20px rgba(0, 0, 0, .24);
  backdrop-filter: blur(12px) saturate(1.14);
}

.star-map-shell .planet-action-btn {
  width: 100%;
  min-height: 42px;
  border-color: rgba(135, 226, 236, .38);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(19, 63, 72, .62), rgba(3, 24, 31, .52));
  box-shadow: inset 0 1px rgba(222, 253, 255, .08), inset 0 0 12px rgba(74, 221, 234, .07);
  backdrop-filter: blur(6px);
}

.star-map-shell .planet-action-btn span {
  color: #8ef7e6;
  font-size: 15px;
  text-shadow: 0 0 8px rgba(96, 239, 220, .28);
}

.star-map-shell .planet-action-btn strong {
  font-size: 8.5px;
  letter-spacing: .02em;
}

/* 星图选中目标后进入中央聚焦态：星球在可视区中央放大，任务菜单保持在其下方。 */
.solar-map-visual {
  position: relative;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
}

.solar-map-visual > .solar-system-map-viewport { height: 100%; }

.solar-map-visual:has(.star-map-selected-focus) .solar-orbit-stage {
  opacity: .16;
  filter: saturate(.72) brightness(.58) blur(1px);
  transition: opacity 180ms ease, filter 180ms ease;
}

.star-map-selected-focus {
  --focus-color: #7df6ff;
  position: absolute;
  z-index: 18;
  inset: 0;
  display: block;
  overflow: hidden;
  padding: 12px 14px 6px;
  background:
    radial-gradient(circle at 50% 43%, color-mix(in srgb, var(--focus-color) 19%, transparent) 0 13%, transparent 37%),
    linear-gradient(180deg, rgba(1, 8, 14, .38), rgba(1, 9, 16, .84));
  color: #f5feff;
  isolation: isolate;
  backdrop-filter: blur(2px);
}

.star-map-focus-close {
  position: absolute;
  z-index: 6;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(154, 238, 246, .42);
  border-radius: 50%;
  padding: 0;
  background: rgba(3, 17, 25, .72);
  color: #dffcff;
  font: 500 20px/1 var(--font-display);
  box-shadow: inset 0 0 10px rgba(88, 226, 240, .12), 0 0 12px rgba(0, 0, 0, .28);
}

.star-map-focus-orbits {
  position: absolute;
  z-index: 0;
  left: var(--galaxy-focus-x, 50%);
  top: var(--galaxy-focus-y, 42%);
  width: min(76%, 270px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.star-map-focus-orbits i {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--focus-color) 32%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 14px color-mix(in srgb, var(--focus-color) 8%, transparent);
}

.star-map-focus-orbits i:nth-child(1) { inset: 0; opacity: .34; }
.star-map-focus-orbits i:nth-child(2) { inset: 12%; opacity: .5; }
.star-map-focus-orbits i:nth-child(3) { inset: 24%; opacity: .72; }

.star-map-focus-planet {
  position: absolute;
  z-index: 2;
  left: var(--galaxy-focus-x, 50%);
  top: var(--galaxy-focus-y, 42%);
  display: grid;
  place-items: center;
  width: min(var(--galaxy-focus-size, 184px), 54vw);
  aspect-ratio: 1;
  margin: 0;
  border-radius: 50%;
  filter: drop-shadow(0 0 19px color-mix(in srgb, var(--focus-color) 48%, transparent));
  transform: translate(-50%, -50%);
}

.star-map-focus-planet::before,
.star-map-focus-planet::after {
  content: "";
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--focus-color) 50%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.star-map-focus-planet::before { inset: -10px; box-shadow: inset 0 0 17px color-mix(in srgb, var(--focus-color) 12%, transparent); }
.star-map-focus-planet::after { inset: -21px; border-style: dashed; opacity: .46; animation: focus-orbit-spin 16s linear infinite; }

.star-map-focus-planet > img {
  width: 100%;
  height: 100%;
  border: 1px solid color-mix(in srgb, var(--focus-color) 78%, white 12%);
  border-radius: 50%;
  object-fit: cover;
  filter: hue-rotate(var(--focus-hue, 0deg)) saturate(1.08) contrast(1.04);
  animation: planet-self-rotate 34s linear infinite;
  box-shadow: inset -18px -8px 25px rgba(0, 0, 0, .45), 0 0 23px color-mix(in srgb, var(--focus-color) 36%, transparent);
}

.star-map-selected-focus.is-resource .star-map-focus-planet {
  width: min(var(--galaxy-focus-size, 214px), 58vw);
  aspect-ratio: 4 / 3;
  border-radius: 24%;
}
.star-map-selected-focus.is-resource .star-map-focus-planet::before { inset: -7px -12px; border-radius: 28%; }
.star-map-selected-focus.is-resource .star-map-focus-planet::after { inset: -15px -22px; border-radius: 30%; }
.star-map-selected-focus.is-resource .star-map-focus-planet > img { object-fit: cover; border-radius: 20%; filter: saturate(1.18) contrast(1.08) brightness(1.12); animation: none; }
.star-map-selected-focus.is-stronghold .star-map-focus-planet > img { border-radius: 32% 48% 38% 52%; }

.star-map-focus-copy {
  position: absolute;
  z-index: 3;
  left: var(--galaxy-focus-x, 50%);
  top: calc(var(--galaxy-focus-y, 42%) + var(--galaxy-focus-radius, 92px) + 22px);
  display: grid;
  justify-items: center;
  min-width: min(88%, 300px);
  gap: 3px;
  padding: 6px 15px;
  border-top: 1px solid color-mix(in srgb, var(--focus-color) 62%, transparent);
  background: linear-gradient(90deg, transparent, rgba(3, 23, 32, .86) 18% 82%, transparent);
  text-align: center;
  transform: translateX(-50%);
}

.star-map-focus-copy span { color: color-mix(in srgb, var(--focus-color) 82%, white 18%); font: 850 7px/1 var(--font-data); letter-spacing: .16em; }
.star-map-focus-copy strong { color: #fff; font: 950 clamp(15px, 4.4vw, 19px)/1.15 var(--font-display); text-shadow: 0 0 10px rgba(130, 238, 248, .18); }
.star-map-focus-copy em { color: #bcecf2; font: normal 900 9px/1 var(--font-data); }
.star-map-focus-copy p { margin: 2px 0 0; color: rgba(215, 241, 245, .66); font: 750 7px/1.35 var(--font-body); }

@keyframes focus-orbit-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .star-map-focus-planet::after,
  .star-map-focus-planet > img { animation: none; }
}

.galaxy-constellation-map {
  position: relative;
  isolation: isolate;
  height: 372px;
  border: 1px solid rgba(145, 230, 255, 0.34);
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 16% 13%, rgba(101, 67, 148, .18), transparent 34%),
    radial-gradient(ellipse at 82% 72%, rgba(42, 133, 164, .12), transparent 38%),
    radial-gradient(ellipse at 47% 48%, rgba(38, 70, 128, .11), transparent 44%),
    linear-gradient(156deg, #020711 0%, #07101d 47%, #01040b 100%);
  box-shadow: inset 0 0 38px rgba(0, 2, 8, .74), 0 0 18px rgba(69, 177, 218, .08);
  overflow: hidden;
}

.galaxy-constellation-map::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .56;
  background-image:
    radial-gradient(circle at 4% 9%, rgba(255, 255, 255, .92) 0 .7px, transparent 1.35px),
    radial-gradient(circle at 11% 37%, rgba(157, 218, 255, .78) 0 .8px, transparent 1.45px),
    radial-gradient(circle at 18% 73%, rgba(255, 223, 181, .72) 0 .65px, transparent 1.25px),
    radial-gradient(circle at 24% 18%, rgba(229, 236, 255, .88) 0 .9px, transparent 1.5px),
    radial-gradient(circle at 29% 91%, rgba(137, 213, 255, .72) 0 .7px, transparent 1.35px),
    radial-gradient(circle at 34% 52%, rgba(255, 255, 255, .82) 0 .65px, transparent 1.2px),
    radial-gradient(circle at 39% 8%, rgba(205, 180, 255, .73) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 45% 81%, rgba(255, 240, 207, .75) 0 .75px, transparent 1.35px),
    radial-gradient(circle at 51% 29%, rgba(188, 228, 255, .88) 0 .9px, transparent 1.5px),
    radial-gradient(circle at 57% 63%, rgba(255, 255, 255, .86) 0 .7px, transparent 1.3px),
    radial-gradient(circle at 62% 14%, rgba(151, 207, 255, .72) 0 .65px, transparent 1.25px),
    radial-gradient(circle at 67% 88%, rgba(240, 218, 255, .8) 0 .8px, transparent 1.45px),
    radial-gradient(circle at 73% 41%, rgba(255, 241, 203, .78) 0 .7px, transparent 1.3px),
    radial-gradient(circle at 79% 7%, rgba(255, 255, 255, .9) 0 .8px, transparent 1.45px),
    radial-gradient(circle at 83% 69%, rgba(151, 220, 255, .76) 0 .75px, transparent 1.35px),
    radial-gradient(circle at 89% 31%, rgba(225, 205, 255, .76) 0 .65px, transparent 1.3px),
    radial-gradient(circle at 94% 84%, rgba(255, 255, 255, .86) 0 .85px, transparent 1.5px),
    radial-gradient(circle at 97% 52%, rgba(255, 223, 178, .72) 0 .65px, transparent 1.2px);
  mix-blend-mode: screen;
  animation: galaxy-stars-twinkle-a 5.8s ease-in-out infinite alternate;
}

.galaxy-constellation-map::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .34;
  background-image:
    radial-gradient(circle at 7% 58%, rgba(184, 225, 255, .82) 0 .55px, transparent 1.05px),
    radial-gradient(circle at 15% 24%, rgba(255, 255, 255, .88) 0 .65px, transparent 1.15px),
    radial-gradient(circle at 22% 86%, rgba(198, 177, 255, .8) 0 .6px, transparent 1.1px),
    radial-gradient(circle at 31% 33%, rgba(255, 226, 184, .78) 0 .55px, transparent 1.05px),
    radial-gradient(circle at 42% 67%, rgba(171, 224, 255, .84) 0 .65px, transparent 1.2px),
    radial-gradient(circle at 48% 4%, rgba(255, 255, 255, .86) 0 .55px, transparent 1.1px),
    radial-gradient(circle at 55% 93%, rgba(211, 190, 255, .78) 0 .6px, transparent 1.15px),
    radial-gradient(circle at 64% 48%, rgba(255, 240, 202, .82) 0 .65px, transparent 1.2px),
    radial-gradient(circle at 71% 21%, rgba(169, 218, 255, .8) 0 .55px, transparent 1.05px),
    radial-gradient(circle at 77% 81%, rgba(255, 255, 255, .9) 0 .6px, transparent 1.15px),
    radial-gradient(circle at 86% 55%, rgba(214, 191, 255, .8) 0 .65px, transparent 1.2px),
    radial-gradient(circle at 92% 13%, rgba(255, 228, 186, .76) 0 .55px, transparent 1.05px);
  mix-blend-mode: screen;
  animation: galaxy-stars-twinkle-b 7.4s ease-in-out -2.6s infinite alternate;
}

@keyframes galaxy-stars-twinkle-a {
  from { opacity: .42; filter: brightness(.92); }
  to { opacity: .64; filter: brightness(1.12); }
}

@keyframes galaxy-stars-twinkle-b {
  from { opacity: .24; filter: brightness(.88); }
  to { opacity: .46; filter: brightness(1.18); }
}

.constellation-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.constellation-lines line {
  stroke: rgba(151, 234, 255, 0.48);
  stroke-width: 0.42;
  filter: drop-shadow(0 0 1.4px rgba(94, 220, 255, .52));
}

.solar-system-node {
  position: absolute;
  left: var(--node-x);
  top: var(--node-y);
  z-index: 2;
  display: grid;
  min-width: 38px;
  border: 0;
  padding: 0;
  background: transparent;
  color: #eefcff;
  font-family: inherit;
  transform: translate(-50%, -50%);
}

.node-dot {
  justify-self: center;
  width: 12px;
  height: 12px;
  border: 1px solid color-mix(in srgb, var(--node-color, #6e92a8), white 14%);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--node-color, #6e92a8), white 24%), var(--node-color, #6e92a8));
  box-shadow: 0 0 10px color-mix(in srgb, var(--node-color, #6e92a8), transparent 35%);
}

.solar-system-node strong {
  margin-top: 2px;
  color: rgba(235, 255, 255, 0.86);
  font-size: 9px;
  font-weight: 900;
  text-shadow: 0 1px 3px #000;
}

.solar-system-node em {
  position: absolute;
  left: 24px;
  top: -4px;
  color: #ffe176;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  text-shadow: 0 0 6px rgba(255, 219, 93, 0.78);
}

.solar-system-node.active .node-dot {
  border-color: #7df6ff;
  box-shadow: 0 0 15px rgba(125, 246, 255, 0.82), 0 0 25px color-mix(in srgb, var(--node-color, #7df6ff), transparent 42%);
}

.solar-system-node.has-alien::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(177, 92, 255, 0.55);
  transform: translate(-50%, -50%);
}

.solar-system-node.is-npc-system {
  z-index: 3;
  width: 60px;
  min-width: 60px;
  justify-items: center;
  color: #fff;
}

.node-system-art {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--node-color), white 28%);
  border-radius: 50%;
  background: rgba(2, 8, 16, .78);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--node-color), transparent 82%),
    0 0 13px color-mix(in srgb, var(--node-color), transparent 42%);
}

.node-system-art::before {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: 0;
  border-radius: inherit;
  background: conic-gradient(from 20deg, transparent 0 16%, color-mix(in srgb, var(--node-color), transparent 34%) 27%, transparent 42% 68%, color-mix(in srgb, var(--node-color), white 14%) 82%, transparent 94%);
  filter: blur(4px);
  opacity: .72;
  animation: npc-system-aura-turn 7s linear infinite;
}

.node-system-art::after {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: 2;
  border: 1px solid color-mix(in srgb, var(--node-color), transparent 44%);
  border-radius: inherit;
  box-shadow: 0 0 8px color-mix(in srgb, var(--node-color), transparent 32%);
  pointer-events: none;
  animation: npc-system-aura-pulse 3.8s ease-in-out infinite alternate;
}

.node-system-art img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  clip-path: circle(49% at 50% 50%);
  animation: npc-system-image-turn 16s linear infinite;
}

.solar-system-node.is-npc-system strong {
  max-width: 60px;
  margin-top: 5px;
  color: #f7feff;
  font-size: 7px;
  line-height: 1.12;
  letter-spacing: .02em;
  white-space: normal;
}

.solar-system-node.is-npc-system.active .node-system-art {
  border-color: #fff;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--node-color), transparent 62%),
    0 0 20px color-mix(in srgb, var(--node-color), transparent 18%);
}

.solar-system-node.is-dark-alien-system .node-system-art img {
  filter: saturate(1.12) contrast(1.08) brightness(.92);
  animation-direction: reverse;
  animation-duration: 19s;
}

@keyframes npc-system-image-turn {
  from { transform: rotate(0deg) scale(1.12); }
  to { transform: rotate(360deg) scale(1.12); }
}

@keyframes npc-system-aura-turn {
  to { transform: rotate(360deg); }
}

@keyframes npc-system-aura-pulse {
  from { opacity: .38; transform: scale(.94); }
  to { opacity: .86; transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .galaxy-constellation-map::before,
  .galaxy-constellation-map::after,
  .node-system-art::before,
  .node-system-art::after,
  .node-system-art img { animation: none; }
}

.star-map-zoom-control {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  gap: 6px;
  align-items: center;
  width: 100%;
  border: 1px solid rgba(125, 246, 255, .2);
  border-radius: 9px;
  padding: 4px;
  background: linear-gradient(180deg, rgba(7, 25, 33, .86), rgba(2, 11, 16, .92));
  box-shadow: inset 0 1px rgba(218, 253, 255, .04), 0 5px 14px rgba(0, 0, 0, .2);
}

.star-map-zoom-control > button:not(.star-map-zoom-readout) {
  min-height: 32px;
  border: 1px solid rgba(125, 246, 255, 0.4);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(15, 58, 70, 0.96), rgba(5, 22, 28, 0.96));
  color: #f7ffff;
  font-family: inherit;
  font-size: 18px;
  font-weight: 900;
  box-shadow: inset 0 0 12px rgba(125, 246, 255, 0.08);
}

.star-map-zoom-control > button:not(.star-map-zoom-readout):disabled {
  opacity: .36;
  filter: grayscale(.8);
}

.star-map-zoom-readout {
  display: grid;
  place-items: center;
  gap: 1px;
  min-height: 32px;
  border: 1px solid rgba(125, 246, 255, 0.18);
  border-radius: 6px;
  padding: 3px 8px;
  background: rgba(5, 20, 28, 0.7);
  color: #eaffff;
  font-family: inherit;
  text-align: center;
}

.star-map-zoom-readout strong {
  color: rgba(235, 255, 255, 0.82);
  font-size: 10px;
  font-weight: 900;
}

.star-map-zoom-readout span {
  color: rgba(133, 227, 236, .58);
  font-size: 6px;
  font-weight: 800;
}

.coordinate-modal {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(3px);
}

.coordinate-modal.show {
  display: grid;
}

.coordinate-dialog {
  width: min(320px, 100%);
  border: 1px solid rgba(125, 246, 255, 0.46);
  border-radius: 7px;
  padding: 16px 14px;
  background:
    radial-gradient(circle at 50% 12%, rgba(41, 216, 230, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(2, 12, 18, 0.96), rgba(0, 0, 0, 0.94));
  box-shadow: 0 0 28px rgba(0, 255, 255, 0.2), inset 0 0 18px rgba(0, 255, 255, 0.08);
  text-align: center;
}

.coordinate-dialog h3 {
  margin: 0 0 6px;
  color: #ffd94f;
  font-size: 16px;
  font-weight: 900;
}

.coordinate-dialog p {
  margin: 0 0 16px;
  color: rgba(245, 255, 255, 0.82);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
}

.coordinate-wheels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.coordinate-wheels label {
  display: grid;
  gap: 5px;
  color: #7df6ff;
  font-size: 11px;
  font-weight: 900;
}

.coordinate-wheels button,
.coordinate-wheels input,
.coordinate-move,
.coordinate-cancel {
  border: 1px solid rgba(125, 246, 255, 0.5);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(28, 55, 62, 0.86), rgba(6, 18, 24, 0.94));
  color: #f7ffff;
  font-weight: 900;
}

.coordinate-wheels button {
  min-height: 30px;
  color: #eaffff;
}

.coordinate-wheels input {
  width: 100%;
  height: 58px;
  font-size: 30px;
  text-align: center;
}

.coordinate-move,
.coordinate-cancel {
  display: block;
  width: 150px;
  min-height: 38px;
  margin: 8px auto 0;
  font-size: 13px;
}

.coordinate-move {
  border-color: rgba(255, 255, 255, 0.72);
}

.coordinate-cancel {
  color: rgba(245, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.08);
}

.fleet-mission-screen {
  gap: 0;
  padding: 58px 7px 10px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 12%, rgba(35, 190, 211, 0.2), transparent 36%),
    linear-gradient(180deg, rgba(1, 9, 12, 0.76), rgba(1, 6, 9, 0.96)),
    rgba(2, 7, 12, 0.98);
}

.fleet-mission-mount {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

.fleet-mission-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-height: 48px;
  border: 1px solid rgba(18, 195, 205, 0.42);
  border-bottom: 0;
  padding: 6px 7px;
  background:
    linear-gradient(180deg, rgba(16, 48, 55, 0.9), rgba(3, 15, 20, 0.96)),
    rgba(0, 0, 0, 0.56);
  box-shadow: inset 0 0 18px rgba(0, 255, 255, 0.07);
}

.fleet-mission-head h2 {
  margin: 1px 0 0;
  color: #f8ffff;
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 0 12px rgba(125, 246, 255, 0.42);
}

.fleet-back-home {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid rgba(125, 246, 255, 0.4);
  border-radius: 4px;
  background: rgba(7, 28, 35, 0.86);
  color: #eaffff;
}

.fleet-back-home svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
}

.fleet-mission-type {
  align-self: stretch;
  display: grid;
  min-width: 48px;
  place-items: center;
  border: 1px solid rgba(255, 217, 79, 0.42);
  border-radius: 4px;
  background: rgba(69, 50, 10, 0.74);
  color: #ffe171;
  font-size: 12px;
  font-weight: 950;
}

.fleet-mission-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid rgba(18, 195, 205, 0.36);
  background: rgba(0, 0, 0, 0.36);
}

.fleet-mission-tabs button {
  min-height: 32px;
  border: 0;
  border-right: 1px solid rgba(125, 246, 255, 0.18);
  background: linear-gradient(180deg, rgba(15, 43, 49, 0.86), rgba(3, 13, 18, 0.94));
  color: rgba(226, 250, 255, 0.76);
  font-size: 11px;
  font-weight: 950;
}

.fleet-mission-tabs button:last-child {
  border-right: 0;
}

.fleet-mission-tabs button.active {
  color: #ffffff;
  background: linear-gradient(180deg, rgba(20, 92, 99, 0.96), rgba(7, 33, 40, 0.98));
  box-shadow: inset 0 -2px 0 #ffd94f, inset 0 0 15px rgba(41, 216, 230, 0.14);
}

.fleet-step-panel {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  gap: 7px;
  border: 1px solid rgba(18, 195, 205, 0.34);
  border-top: 0;
  padding: 7px;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    linear-gradient(180deg, rgba(2, 13, 17, 0.9), rgba(0, 5, 8, 0.96)),
    radial-gradient(circle at 70% 20%, rgba(255, 217, 79, 0.09), transparent 38%);
}

.mission-and-cargo-step {
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(39, 225, 237, 0.55) rgba(0, 0, 0, 0.2);
}

.mission-and-cargo-step .fleet-cargo-list {
  flex: none;
}

.mission-and-cargo-step .fleet-step-actions {
  position: sticky;
  z-index: 5;
  bottom: -10px;
  margin-top: 4px;
  padding: 8px 0 calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(1, 9, 12, 0), rgba(1, 9, 12, 0.96) 28%);
}

.mission-and-cargo-step::-webkit-scrollbar {
  width: 4px;
}

.mission-and-cargo-step::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(39, 225, 237, 0.55);
}

.fleet-step-panel:not(.mission-and-cargo-step)::-webkit-scrollbar {
  width: 0;
}

.fleet-step-title,
.fleet-target-card,
.fleet-coordinate-bar,
.fleet-speed-control,
.fleet-confirm-target,
.fleet-confirm-list {
  border: 1px solid rgba(125, 246, 255, 0.24);
  border-radius: 5px;
  background: rgba(4, 20, 27, 0.82);
  box-shadow: inset 0 0 12px rgba(0, 255, 255, 0.05);
}

.fleet-step-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
}

.fleet-step-title span,
.fleet-target-card span,
.fleet-coordinate-bar span,
.fleet-speed-control label {
  color: rgba(191, 235, 239, 0.72);
  font-size: 10px;
  font-weight: 900;
}

.fleet-step-title strong,
.fleet-target-card strong {
  display: block;
  color: #f7ffff;
  font-size: 14px;
  font-weight: 950;
}

.fleet-step-title em,
.fleet-target-card em {
  color: rgba(255, 225, 118, 0.82);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.fleet-ship-list,
.fleet-cargo-list {
  display: grid;
  gap: 6px;
}

.fleet-ship-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 70px;
  gap: 6px;
  align-items: center;
  min-height: 78px;
  border: 1px solid rgba(18, 195, 205, 0.34);
  border-radius: 5px;
  padding: 5px;
  background:
    linear-gradient(180deg, rgba(9, 31, 38, 0.82), rgba(2, 10, 15, 0.96)),
    rgba(0, 0, 0, 0.3);
}

.fleet-ship-row img {
  width: 58px;
  height: 68px;
  border: 1px solid rgba(125, 246, 255, 0.24);
  border-radius: 4px;
  object-fit: cover;
  background: rgba(0, 0, 0, 0.28);
}

.fleet-ship-main {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.fleet-ship-name strong {
  display: block;
  min-width: 0;
  color: #f8ffff;
  font-size: 12px;
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fleet-ship-name em {
  color: #ffd94f;
  font-style: normal;
}

.fleet-ship-name span {
  display: block;
  min-width: 0;
  color: rgba(218, 246, 250, 0.68);
  font-size: 9px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fleet-ship-tools {
  display: grid;
  gap: 3px;
}

.fleet-ship-tools strong,
.fleet-cargo-actions strong {
  display: block;
  color: #ffe171;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  text-align: right;
}

.fleet-ship-tools input,
.fleet-cargo-row > input[type="number"] {
  width: 100%;
  min-height: 24px;
  border: 1px solid rgba(255, 217, 79, 0.38);
  border-radius: 3px;
  padding: 2px 4px;
  background: rgba(0, 0, 0, 0.42);
  color: #f8ffff;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}

.fleet-ship-tools button,
.fleet-cargo-actions button,
.fleet-step-actions button {
  min-height: 25px;
  border: 1px solid rgba(125, 246, 255, 0.42);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(13, 58, 66, 0.92), rgba(5, 22, 28, 0.96));
  color: #ecfeff;
  font-size: 10px;
  font-weight: 950;
}

.fleet-ship-tools button:hover,
.fleet-cargo-actions button:hover,
.fleet-step-actions button:hover {
  border-color: rgba(255, 217, 79, 0.8);
}

.fleet-yellow-slider {
  width: 100%;
  accent-color: #ffd94f;
}

.fleet-yellow-slider::-webkit-slider-runnable-track {
  height: 5px;
  border: 1px solid rgba(255, 217, 79, 0.32);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 217, 79, 0.74), rgba(255, 143, 42, 0.68));
}

.fleet-yellow-slider::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 50%;
  background: #ffe171;
  box-shadow: 0 0 10px rgba(255, 217, 79, 0.55);
  appearance: none;
}

.fleet-step-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: auto;
  padding-top: 2px;
}

.fleet-step-actions.single {
  grid-template-columns: 1fr;
}

.fleet-step-actions button {
  min-height: 38px;
  font-size: 13px;
}

.fleet-step-actions .primary {
  border-color: rgba(255, 217, 79, 0.7);
  background: linear-gradient(180deg, rgba(155, 105, 24, 0.96), rgba(70, 42, 8, 0.98));
  color: #fff7c8;
  box-shadow: inset 0 0 14px rgba(255, 217, 79, 0.1);
}

.fleet-empty-state {
  min-height: 140px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(125, 246, 255, 0.3);
  border-radius: 5px;
  color: rgba(232, 250, 255, 0.74);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.fleet-target-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: center;
  padding: 8px;
}

.fleet-target-card button {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 217, 79, 0.46);
  border-radius: 50%;
  background: rgba(65, 44, 6, 0.76);
  color: #ffe171;
  font-weight: 950;
}

.fleet-hex-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 6px 0;
}

.fleet-hex-row button {
  display: grid;
  min-height: 64px;
  place-items: center;
  border: 0;
  background: transparent;
  color: rgba(226, 250, 255, 0.72);
}

.fleet-hex-row span {
  display: grid;
  width: 48px;
  height: 42px;
  place-items: center;
  clip-path: polygon(22% 0, 78% 0, 100% 50%, 78% 100%, 22% 100%, 0 50%);
  border: 1px solid rgba(125, 246, 255, 0.4);
  background: linear-gradient(180deg, rgba(15, 52, 60, 0.95), rgba(3, 16, 22, 0.98));
  color: #9ffbff;
  font-size: 18px;
  box-shadow: 0 0 12px rgba(41, 216, 230, 0.18);
}

.fleet-hex-row strong {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 950;
}

.fleet-hex-row button.active span {
  border-color: rgba(255, 217, 79, 0.82);
  background: linear-gradient(180deg, rgba(122, 77, 14, 0.96), rgba(42, 24, 5, 0.98));
  color: #ffe171;
  box-shadow: 0 0 14px rgba(255, 217, 79, 0.24);
}

.fleet-coordinate-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
  padding: 0 9px;
  background:
    linear-gradient(90deg, rgba(7, 62, 77, 0.84), rgba(6, 29, 38, 0.94)),
    rgba(0, 0, 0, 0.38);
}

.fleet-coordinate-bar strong {
  color: #ffffff;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: 1px;
}

.fleet-metric-grid,
.fleet-confirm-target {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin: 0;
  padding: 6px;
}

.fleet-metric-grid div,
.fleet-confirm-target div {
  min-width: 0;
  border: 1px solid rgba(125, 246, 255, 0.14);
  border-radius: 4px;
  padding: 5px;
  background: rgba(0, 0, 0, 0.2);
}

.fleet-metric-grid dt,
.fleet-confirm-target dt {
  color: rgba(188, 233, 238, 0.72);
  font-size: 9px;
  font-weight: 850;
}

.fleet-metric-grid dd,
.fleet-confirm-target dd {
  margin: 2px 0 0;
  color: #f8ffff;
  font-size: 12px;
  font-weight: 950;
}

.fleet-speed-control {
  display: grid;
  grid-template-columns: minmax(0, 92px) minmax(0, 1fr) 44px;
  gap: 7px;
  align-items: center;
  padding: 7px 8px;
}

.fleet-speed-control strong {
  color: #ffe171;
  font-size: 13px;
  font-weight: 950;
  text-align: right;
}

.fleet-cargo-row {
  display: grid;
  grid-template-columns: minmax(0, 76px) 60px minmax(0, 1fr) 54px;
  gap: 6px;
  align-items: center;
  border: 1px solid rgba(18, 195, 205, 0.34);
  border-radius: 5px;
  padding: 7px 6px;
  background: linear-gradient(180deg, rgba(9, 31, 38, 0.82), rgba(2, 10, 15, 0.96));
}

.fleet-cargo-row span {
  display: block;
  color: #f8ffff;
  font-size: 12px;
  font-weight: 950;
}

.fleet-cargo-row strong {
  display: block;
  color: rgba(218, 246, 250, 0.68);
  font-size: 9px;
  font-weight: 850;
}

.fleet-cargo-actions {
  display: grid;
  gap: 3px;
}

.fleet-success-mark {
  display: grid;
  width: 58px;
  height: 58px;
  margin: 4px auto 0;
  place-items: center;
  border: 1px solid rgba(93, 255, 188, 0.72);
  border-radius: 50%;
  background: rgba(14, 88, 65, 0.44);
  color: #8effd1;
  font-size: 28px;
  font-weight: 950;
  box-shadow: 0 0 22px rgba(93, 255, 188, 0.22);
}

.confirm-step h3 {
  margin: 2px 0 0;
  color: #f7ffff;
  font-size: 18px;
  font-weight: 950;
  text-align: center;
}

.confirm-step p {
  margin: 0;
  color: rgba(220, 245, 248, 0.68);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.fleet-confirm-list {
  padding: 7px;
}

.fleet-confirm-list > strong {
  display: block;
  margin-bottom: 5px;
  color: #ffe171;
  font-size: 12px;
  font-weight: 950;
}

.fleet-confirm-list ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fleet-confirm-list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: rgba(238, 255, 255, 0.86);
  font-size: 11px;
  font-weight: 850;
}

.fleet-confirm-list li strong {
  color: #f8ffff;
}

.utility-screen {
  gap: 10px;
  padding: 64px 8px 92px;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    linear-gradient(180deg, rgba(1, 6, 9, 0.72), rgba(1, 6, 9, 0.94)),
    radial-gradient(circle at 58% 18%, rgba(41, 216, 230, 0.14), transparent 34%),
    rgba(3, 8, 11, 0.96);
}

.utility-screen::-webkit-scrollbar {
  width: 0;
}

.utility-screen .dashboard-head {
  margin-top: 0;
  border: 1px solid rgba(18, 195, 205, 0.38);
  border-radius: 7px;
  padding: 8px 9px;
  background: linear-gradient(180deg, rgba(10, 23, 26, 0.74), rgba(3, 9, 10, 0.9));
  box-shadow: inset 0 0 16px rgba(0, 255, 255, 0.08);
}

.utility-screen .dashboard-head h2 {
  font-size: 20px;
}

.fleet-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.fleet-summary-strip article,
.shop-balance,
.mail-tabs {
  border: 1px solid rgba(18, 195, 205, 0.34);
  border-radius: 6px;
  background: rgba(0, 18, 22, 0.72);
  box-shadow: inset 0 0 12px rgba(0, 255, 255, 0.05);
}

.fleet-summary-strip article {
  display: grid;
  gap: 3px;
  min-height: 54px;
  place-items: center;
}

.fleet-summary-strip span,
.shop-balance span,
.shop-card span,
.mail-card span {
  color: rgba(235, 255, 255, 0.62);
  font-size: 10px;
  font-weight: 900;
}

.fleet-summary-strip strong {
  color: #f7ffff;
  font-size: 18px;
}

.fleet-task-list,
.mail-list,
.shop-grid {
  display: grid;
  gap: 8px;
}

.fleet-task-card,
.shop-card {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 8px;
  border: 1px solid rgba(18, 195, 205, 0.42);
  border-radius: 7px;
  padding: 7px;
  background: rgba(4, 14, 16, 0.9);
  box-shadow: inset 0 0 14px rgba(0, 255, 255, 0.06);
}

.fleet-task-card.active {
  border-color: rgba(125, 246, 255, 0.82);
  box-shadow: 0 0 12px rgba(41, 216, 230, 0.22), inset 0 0 14px rgba(0, 255, 255, 0.08);
}

.fleet-task-card.expanded {
  border-color: rgba(255, 217, 79, 0.72);
  box-shadow: 0 0 12px rgba(255, 217, 79, 0.18), inset 0 0 14px rgba(255, 217, 79, 0.06);
}

.fleet-task-card img,
.shop-card img {
  width: 86px;
  height: 96px;
  border: 1px solid rgba(125, 246, 255, 0.24);
  border-radius: 5px;
  object-fit: cover;
  background: rgba(0, 0, 0, 0.24);
}

.shop-card img {
  padding: 10px;
  object-fit: contain;
}

.fleet-task-card h3,
.shop-card strong {
  margin: 4px 0 3px;
  color: #ffffff;
  font-size: 14px;
}

.fleet-task-card p,
.shop-card p {
  margin: 0 0 6px;
  color: rgba(235, 255, 255, 0.84);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
}

.fleet-task-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 7px;
}

.fleet-task-card dl div {
  border: 1px solid rgba(125, 246, 255, 0.14);
  border-radius: 4px;
  padding: 3px 5px;
  background: rgba(0, 0, 0, 0.22);
}

.fleet-task-card dt,
.fleet-task-card dd {
  margin: 0;
  font-size: 9px;
  font-weight: 900;
}

.fleet-task-card dt {
  color: rgba(235, 255, 255, 0.54);
}

.fleet-task-card dd {
  margin-top: 1px;
  color: #eaffff;
}

.fleet-task-card button,
.shop-balance button,
.shop-card button {
  min-height: 28px;
  border: 1px solid rgba(125, 246, 255, 0.54);
  border-radius: 4px;
  background: rgba(0, 160, 150, 0.82);
  color: #eaffff;
  font-size: 11px;
  font-weight: 900;
}

.fleet-task-extra {
  border: 1px solid rgba(125, 246, 255, 0.18);
  border-radius: 5px;
  margin: 5px 0;
  padding: 5px;
  background: rgba(0, 0, 0, 0.22);
}

.fleet-task-extra ul {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fleet-task-extra li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: rgba(235, 255, 255, 0.74);
  font-size: 9px;
  font-weight: 800;
}

.fleet-task-extra li strong {
  color: #ffffff;
}

.fleet-task-empty {
  min-height: 72px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(125, 246, 255, 0.24);
  border-radius: 6px;
  color: rgba(235, 255, 255, 0.68);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.mail-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
}

.mail-screen > .dashboard-head,
.mail-screen > .mail-tabs,
.mail-screen > .mail-list {
  flex-shrink: 0;
}

.mail-screen > .mail-tabs {
  min-height: 44px;
}

.mail-tabs button {
  min-height: 32px;
  border: 0;
  border-right: 1px solid rgba(125, 246, 255, 0.16);
  background: linear-gradient(180deg, rgba(19, 45, 51, 0.76), rgba(4, 15, 19, 0.86));
  color: rgba(230, 250, 255, 0.78);
  font-size: 11px;
  font-weight: 900;
}

.mail-tabs button:last-child {
  border-right: 0;
}

.mail-tabs .active {
  background: linear-gradient(180deg, rgba(20, 78, 88, 0.92), rgba(7, 31, 38, 0.96));
  color: #eaffff;
  box-shadow: inset 0 -2px 0 rgba(41, 216, 230, 0.82), inset 0 0 16px rgba(41, 216, 230, 0.18);
}

.mail-card {
  border: 1px solid rgba(18, 195, 205, 0.34);
  border-radius: 7px;
  overflow: hidden;
  background: rgba(4, 14, 16, 0.78);
}

.mail-card.unread {
  border-color: rgba(255, 194, 75, 0.52);
}

.mail-card button {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 4px 8px;
  width: 100%;
  min-height: 74px;
  border: 0;
  padding: 9px 10px;
  background: transparent;
  color: #f4ffff;
  text-align: left;
}

.mail-card button span,
.mail-card button em {
  min-width: 0;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.mail-card button em {
  text-align: right;
}

.mail-card strong {
  grid-column: 1 / -1;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.35;
}

.mail-card em {
  color: rgba(235, 255, 255, 0.58);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.shop-balance {
  display: grid;
  grid-template-columns: 34px 1fr 72px;
  gap: 8px;
  align-items: center;
  min-height: 64px;
  padding: 8px 10px;
}

.shop-balance .res-icon {
  width: 32px;
  height: 28px;
}

.shop-balance strong {
  display: block;
  color: #ffffff;
  font-size: 20px;
  line-height: 1;
}

.shop-card strong {
  display: block;
}

.shop-card button {
  width: 100%;
}

.command-screen ~ .bottom-nav,
.bottom-nav {
  grid-template-columns: repeat(5, 1fr);
}

.bottom-nav {
  left: 6px;
  right: 6px;
  bottom: 5px;
  gap: 2px;
  border: 1px solid rgba(18, 195, 205, 0.38);
  border-radius: 4px;
  padding: 5px 4px 4px;
  background:
    linear-gradient(180deg, rgba(10, 23, 26, 0.72), rgba(3, 9, 10, 0.9)),
    rgba(0, 0, 0, 0.72);
  box-shadow: 0 -5px 18px rgba(0, 0, 0, 0.44), inset 0 1px rgba(157, 248, 255, 0.1);
}

.nav-button {
  min-height: 60px;
  border-radius: 0;
  color: rgba(230, 255, 255, 0.9);
  font-size: 12px;
  text-shadow: 0 0 8px rgba(125, 246, 255, 0.44);
}

.nav-button svg {
  width: 36px;
  height: 32px;
  margin-bottom: 3px;
  padding: 6px;
  clip-path: polygon(24% 0, 76% 0, 100% 50%, 76% 100%, 24% 100%, 0 50%);
  background: rgba(0, 205, 210, 0.12);
  color: #dffeff;
  filter: drop-shadow(0 0 8px rgba(125, 246, 255, 0.58));
}

.nav-button.active,
.nav-button:hover {
  background: transparent;
  color: #ffffff;
}

.bottom-nav {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  padding: 8px;
  background: rgba(3, 8, 12, 0.82);
  backdrop-filter: blur(16px);
}

body[data-active-screen="login"] .bottom-nav,
body[data-active-screen="recover"] .bottom-nav,
body[data-active-screen="server"] .bottom-nav,
body[data-active-screen="fleet-mission"] .bottom-nav {
  display: none;
}

.nav-button {
  display: grid;
  min-height: 44px;
  border: 0;
  border-radius: 6px;
  place-items: center;
  background: transparent;
  color: rgba(226, 242, 250, 0.68);
  font-size: 11px;
  font-weight: 800;
}

.nav-button.active {
  background: rgba(125, 246, 255, 0.13);
  color: var(--cyan);
}

.toast {
  position: absolute;
  left: 50%;
  bottom: 92px;
  z-index: 20;
  width: max-content;
  max-width: min(220px, calc(100% - 32px));
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(3, 8, 12, 0.9);
  color: #ffffff;
  font: 800 10px/1.25 var(--font-data);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity 180ms ease, transform 180ms ease;
  text-align: center;
  white-space: nowrap;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.game-exit-dialog {
  position: absolute;
  z-index: 240;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 4, 7, .7);
  backdrop-filter: blur(8px);
}

.game-exit-dialog[hidden] { display: none; }

.game-exit-card {
  position: relative;
  width: min(330px, 92%);
  overflow: hidden;
  border: 1px solid rgba(91, 229, 239, .42);
  border-radius: 12px;
  padding: 22px 18px 16px;
  background:
    linear-gradient(135deg, rgba(38, 64, 69, .24), transparent 42%),
    rgba(5, 13, 17, .97);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .58), inset 0 1px rgba(255, 255, 255, .06), 0 0 22px rgba(54, 220, 232, .1);
  text-align: center;
}

.game-exit-card::before {
  content: "";
  position: absolute;
  inset: 0 14px auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, #48edf5 28% 72%, transparent);
  box-shadow: 0 0 12px rgba(72, 237, 245, .66);
}

.game-exit-signal { display: inline-flex; gap: 4px; height: 16px; align-items: end; }
.game-exit-signal i { display: block; width: 3px; border-radius: 2px; background: #4cebf3; box-shadow: 0 0 7px rgba(76, 235, 243, .7); }
.game-exit-signal i:nth-child(1) { height: 6px; }
.game-exit-signal i:nth-child(2) { height: 11px; }
.game-exit-signal i:nth-child(3) { height: 16px; }
.game-exit-card > p { margin: 8px 0 3px; color: #5eeaf2; font: 700 9px/1 var(--font-data); letter-spacing: .18em; }
.game-exit-card > h2 { margin: 0; color: #f4fdff; font-size: 19px; line-height: 1.35; }
.game-exit-card > span:not(.game-exit-signal) { display: block; margin: 8px auto 15px; color: rgba(215, 234, 237, .68); font-size: 10px; line-height: 1.55; }
.game-exit-card > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.game-exit-card button { min-height: 40px; border: 1px solid rgba(181, 204, 208, .32); border-radius: 7px; background: linear-gradient(180deg, rgba(66, 78, 83, .82), rgba(22, 28, 31, .96)); color: #eaf2f3; font-weight: 800; }
.game-exit-card button.confirm { border-color: rgba(255, 115, 83, .76); background: linear-gradient(180deg, #ee664a, #9b2c25 62%, #5d1718); color: #fff9f5; box-shadow: 0 0 14px rgba(231, 80, 55, .2); }
.game-exit-card button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

body[data-active-screen="login"] .toast,
body[data-active-screen="recover"] .toast,
body[data-active-screen="server"] .toast,
body[data-active-screen="fleet-mission"] .toast {
  bottom: 18px;
}

@keyframes screenIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes logoSweep {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes titleTrail {
  0%,
  100% {
    opacity: 0.36;
    transform: translateX(-4px) rotate(-17deg);
  }
  50% {
    opacity: 1;
    transform: translateX(4px) rotate(-17deg);
  }
}

@keyframes planetAura {
  0%,
  100% {
    opacity: 0.36;
    transform: scale(0.92);
  }
  50% {
    opacity: 0.88;
    transform: scale(1.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

@media (max-width: 820px) {
  .studio-shell {
    grid-template-columns: 1fr;
    padding: 0;
  }
}

@media (max-width: 520px) {
  .app-screen {
    padding-inline: 20px;
  }

  .brand-lockup h2 {
    font-size: 32px;
    white-space: nowrap;
  }

  .ship-card {
    grid-template-columns: 100px 1fr;
  }

  .ship-card img {
    width: 100px;
  }
}

/* Design research, Zion synthesis, and compact global back control. */
.hud-resources {
  grid-template-columns: 30px repeat(5, minmax(0, 1fr)) 24px;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}

.hud-back-button {
  display: grid;
  width: 28px;
  height: 42px;
  align-self: center;
  border: 0;
  border-right: 1px solid rgba(73, 223, 208, 0.22);
  padding: 3px 3px 1px;
  place-items: center;
  background: linear-gradient(90deg, rgba(73, 223, 208, 0.09), transparent);
  color: var(--cyan);
}

.hud-back-button[hidden] { display: none; }
.hud-back-button svg { width: 23px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.hud-back-button span { margin-top: -3px; font-size: 7px; font-weight: 800; letter-spacing: 0.08em; }
.hud-back-button:hover,
.hud-back-button:focus-visible { background: rgba(73, 223, 208, 0.16); box-shadow: inset 2px 0 var(--cyan); }

.global-hud-resources .resource-item {
  grid-template-rows: 23px 13px;
  align-content: center;
  align-items: center;
  height: 42px;
  padding: 0;
}

.global-hud-resources .resource-name-row {
  width: 100%;
  height: 23px;
  gap: 1px;
}

.global-hud-resources .res-icon {
  flex: 0 0 22px;
  width: 22px;
  height: 18px;
}

.global-hud-resources .resource-item small {
  max-width: 28px;
  font-size: 7px;
  line-height: 1;
}

.global-hud-resources .resource-item strong {
  width: 100%;
  font-size: 9px;
  line-height: 13px;
}

.global-hud-resources .add-resource {
  width: 22px;
  height: 32px;
  align-self: center;
  padding: 0;
}

.quantity-slider {
  touch-action: pan-y;
  cursor: ew-resize;
}

.special-building-action {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 7px;
  align-items: center;
  width: 100%;
  min-height: 42px;
  margin-top: 7px;
  border: 1px solid rgba(73, 223, 208, 0.46);
  border-radius: 3px;
  padding: 6px 8px;
  background: linear-gradient(90deg, rgba(20, 125, 118, 0.3), rgba(3, 18, 20, 0.82));
  color: #e9fffc;
  text-align: left;
}

.special-building-action.zion { border-color: rgba(211, 78, 84, 0.56); background: linear-gradient(90deg, rgba(145, 35, 45, 0.26), rgba(3, 18, 20, 0.82)); }
.special-building-action > span { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid currentColor; color: var(--cyan); }
.special-building-action.zion > span { color: #ff747a; }
.special-building-action strong { font-size: 12px; }
.special-building-action em { color: rgba(216, 241, 238, 0.62); font-size: 8px; font-style: normal; }

.special-center-screen { overflow-x: hidden; overflow-y: auto; padding-inline: 7px; }
.special-center-screen::-webkit-scrollbar { width: 0; }
.special-center-head { margin-inline: 2px; }
.special-center-mount { display: grid; gap: 7px; padding-bottom: 18px; }

.special-center-summary {
  display: grid;
  grid-template-columns: 86px 1fr auto;
  gap: 9px;
  align-items: center;
  min-height: 90px;
  border: 1px solid rgba(73, 223, 208, 0.42);
  border-radius: 4px;
  padding: 7px;
  background: linear-gradient(90deg, rgba(10, 57, 58, 0.65), rgba(2, 13, 15, 0.91));
}

.special-center-summary > img { width: 86px; height: 72px; object-fit: cover; border: 1px solid rgba(73, 223, 208, 0.28); }
.special-center-summary div { display: grid; gap: 2px; }
.special-center-summary span { color: rgba(215, 240, 237, 0.67); font-size: 9px; }
.special-center-summary strong { color: var(--cyan); font-family: var(--font-data); font-size: 18px; }
.special-center-summary p { margin: 2px 0 0; color: rgba(226, 247, 244, 0.74); font-size: 9px; line-height: 1.45; }
.special-center-summary > b { align-self: start; color: var(--gold); font-family: var(--font-data); font-size: 12px; }
.zion-summary { grid-template-columns: 86px 1fr; border-color: rgba(211, 78, 84, 0.48); }

.special-filter-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(73, 223, 208, 0.24);
  background: rgba(2, 12, 14, 0.84);
}

.special-filter-tabs button { min-height: 34px; border: 0; border-right: 1px solid rgba(73, 223, 208, 0.16); background: transparent; color: rgba(220, 242, 239, 0.66); font-size: 9px; }
.special-filter-tabs button.active { background: rgba(28, 132, 124, 0.34); color: #fff; box-shadow: inset 0 -2px var(--cyan); }

.blueprint-list { display: grid; gap: 6px; }
.blueprint-card { border: 1px solid rgba(73, 223, 208, 0.34); border-radius: 4px; background: rgba(2, 12, 14, 0.88); overflow: hidden; }
.blueprint-card.active { border-color: var(--cyan); box-shadow: 0 0 13px rgba(73, 223, 208, 0.18); }
.blueprint-card.designed { border-color: rgba(99, 224, 150, 0.52); }
.blueprint-card.locked { border-color: rgba(148, 163, 165, 0.24); }
.blueprint-cover { position: relative; display: block; width: 100%; min-height: 118px; border: 0; padding: 0; overflow: hidden; background: #061012; color: #fff; text-align: left; }
.blueprint-cover img { display: block; width: 100%; height: 118px; object-fit: cover; transition: filter 180ms ease, opacity 180ms ease; }
.blueprint-card.locked .blueprint-cover img { filter: grayscale(1) brightness(0.48) contrast(1.08); opacity: 0.72; }
.blueprint-cover::after { position: absolute; inset: 48% 0 0; background: linear-gradient(transparent, rgba(1, 8, 10, 0.96)); content: ""; }
.blueprint-cover > span { position: absolute; right: 6px; top: 6px; z-index: 2; border: 1px solid rgba(73, 223, 208, 0.42); padding: 3px 6px; background: rgba(1, 12, 14, 0.82); color: var(--cyan); font-size: 8px; }
.blueprint-card.locked .blueprint-cover > span { border-color: rgba(255, 255, 255, 0.2); color: #aeb8b9; }
.blueprint-card.designed .blueprint-cover > span { border-color: rgba(99, 224, 150, 0.5); color: #75e7a4; }
.blueprint-cover > strong { position: absolute; left: 8px; right: 8px; bottom: 7px; z-index: 2; font-family: var(--font-display); font-size: 14px; letter-spacing: 0.05em; }
.blueprint-detail { display: grid; gap: 7px; border-top: 1px solid rgba(73, 223, 208, 0.2); padding: 9px; }
.blueprint-detail > p { margin: 0; color: rgba(222, 244, 241, 0.72); font-size: 9px; line-height: 1.55; }
.tech-tree-panel { display: grid; gap: 4px; padding: 7px; background: rgba(5, 13, 15, 0.92); }
.tech-tree-panel header { display: flex; gap: 6px; align-items: center; color: var(--cyan); font-size: 10px; }
.tech-tree-node { display: grid; grid-template-columns: 34px 1fr auto; gap: 6px; align-items: center; min-height: 30px; border-left: 2px solid #8f3d45; padding: 4px 6px; background: rgba(103, 29, 37, 0.18); }
.tech-tree-node.met { border-left-color: #58c991; background: rgba(44, 112, 79, 0.16); }
.tech-tree-node span { color: rgba(226, 244, 242, 0.52); font-size: 8px; }
.tech-tree-node strong { font-size: 9px; }
.tech-tree-node em { color: #ff777d; font-family: var(--font-data); font-size: 8px; font-style: normal; }
.tech-tree-node.met em { color: #70dba0; }
.blueprint-tree-action { min-height: 34px; border: 1px solid rgba(73, 223, 208, 0.5); background: rgba(20, 112, 108, 0.28); color: #eafffc; font-size: 10px; }
.blueprint-permanent { display: grid; grid-template-columns: 32px 1fr; gap: 2px 7px; align-items: center; border: 1px solid rgba(99, 224, 150, 0.4); padding: 7px; background: rgba(35, 108, 70, 0.18); }
.blueprint-permanent > span { grid-row: span 2; color: #76e8a4; font-size: 24px; }
.blueprint-permanent strong { color: #8af0b2; font-size: 11px; }
.blueprint-permanent p { margin: 0; color: rgba(217, 242, 229, 0.66); font-size: 8px; }

.zion-powder-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.zion-powder-card { display: grid; gap: 2px; min-height: 112px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 3px; padding: 5px; background: rgba(3, 13, 16, 0.86); color: #fff; place-items: center; }
.zion-powder-card.active { border-color: var(--cyan); box-shadow: inset 0 -2px var(--cyan), 0 0 12px rgba(73, 223, 208, 0.17); }
.zion-powder-card.red.active { border-color: #ee5962; box-shadow: inset 0 -2px #ee5962, 0 0 12px rgba(238, 89, 98, 0.17); }
.zion-powder-card.gray.active { border-color: #b7c0c1; box-shadow: inset 0 -2px #b7c0c1; }
.zion-powder-card img { width: 62px; height: 70px; object-fit: contain; }
.zion-powder-card span { font-size: 8px; }
.zion-powder-card strong { font-family: var(--font-data); font-size: 11px; }
.zion-crystal-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.zion-crystal-card { display: grid; gap: 1px; min-width: 0; border: 1px solid rgba(73, 223, 208, 0.24); padding: 3px; background: rgba(2, 10, 12, 0.9); color: #eafffc; place-items: center; }
.zion-crystal-card.active { border-color: var(--gold); box-shadow: inset 0 -2px var(--gold); }
.zion-crystal-card.locked { filter: grayscale(1); opacity: 0.42; }
.zion-crystal-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.zion-crystal-card span { color: var(--gold); font-family: var(--font-data); font-size: 8px; }
.zion-crystal-card strong { font-size: 8px; }
.zion-crystal-card em { color: rgba(219, 242, 239, 0.6); font-size: 7px; font-style: normal; }
.zion-recipe-panel { display: grid; gap: 8px; border: 1px solid rgba(73, 223, 208, 0.36); border-radius: 4px; padding: 9px; background: rgba(3, 13, 15, 0.9); }
.zion-recipe-panel > header { display: flex; align-items: center; justify-content: space-between; }
.zion-recipe-panel > header div { display: grid; gap: 2px; }
.zion-recipe-panel > header span { color: rgba(218, 240, 237, 0.6); font-size: 8px; }
.zion-recipe-panel > header strong { font-size: 12px; }
.zion-recipe-panel > header b { color: var(--gold); font-family: var(--font-data); font-size: 18px; }
.zion-recipe-flow { display: grid; grid-template-columns: 62px auto 22px 62px; gap: 7px; align-items: center; justify-content: center; }
.zion-recipe-flow img { width: 62px; height: 62px; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.15); }
.zion-recipe-flow span { font-family: var(--font-data); font-size: 10px; }
.zion-recipe-flow b { color: var(--cyan); font-size: 17px; }
.zion-recipe-meta { display: flex; justify-content: space-between; gap: 8px; color: rgba(218, 240, 237, 0.7); font-size: 8px; }
.zion-recipe-meta .enough { color: #78dfa4; }
.zion-recipe-meta .short { color: #ff747a; }
.zion-synthesize-action:disabled { opacity: 0.46; cursor: not-allowed; filter: grayscale(0.8); }

@media (max-width: 380px) {
  .hud-resources { grid-template-columns: 27px repeat(5, minmax(0, 1fr)) 22px; }
  .hud-back-button { width: 25px; }
  .resource-item small { font-size: 7px; }
  .special-filter-tabs button { font-size: 8px; }
}

/* Video-tutorial fidelity pass: dense tactical teal UI with amber mission status. */
:root {
  --space: #03090b;
  --panel: rgba(5, 18, 20, 0.86);
  --panel-strong: rgba(2, 10, 12, 0.95);
  --line: rgba(54, 218, 204, 0.48);
  --text: #e8faf8;
  --muted: rgba(202, 232, 229, 0.7);
  --cyan: #49dfd0;
  --cyan-deep: #0ca99f;
  --violet: #4b7478;
  --gold: #e5aa32;
  --danger: #dc5549;
  --font-display: "Bahnschrift Condensed", "Microsoft YaHei UI", "PingFang SC", sans-serif;
  --font-body: "Microsoft YaHei UI", "Segoe UI", sans-serif;
  --font-data: "Bahnschrift", "Cascadia Mono", "Consolas", monospace;
}

.resource-item strong,
.energy-label,
.campaign-heading em,
.fleet-summary-strip strong,
.galaxy-coordinate strong {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
}

body[data-active-screen="login"] .app-screen[data-screen="login"] {
  overflow-y: auto;
  padding-top: 24px;
  padding-bottom: 64px;
}

body[data-active-screen="login"] .brand-lockup {
  margin-top: 4px;
}

body[data-active-screen="login"] .app-mark {
  width: 108px;
  height: 108px;
  margin-bottom: 10px;
  border: 1px solid rgba(73, 223, 208, 0.3);
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(73, 223, 208, 0.13), rgba(255, 255, 255, 0.02)),
    rgba(4, 16, 19, 0.32);
  box-shadow: 0 0 28px rgba(73, 223, 208, 0.22), inset 0 1px rgba(255, 255, 255, 0.12);
}

body[data-active-screen="login"] .app-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(73, 223, 208, 0.55));
}

body[data-active-screen="login"] .brand-title {
  margin-top: 0;
  font-size: 30px;
  letter-spacing: 0.2em;
}

body[data-active-screen="login"] .brand-lockup p {
  margin-top: 5px;
  font-size: 12px;
}

body[data-active-screen="login"] .login-panel {
  margin-top: auto;
  border-radius: 5px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(7, 23, 25, 0.88), rgba(2, 9, 11, 0.94));
  box-shadow: inset 0 0 24px rgba(48, 210, 198, 0.07), 0 10px 30px rgba(0, 0, 0, 0.38);
}

.quick-login-options {
  display: grid;
  gap: 6px;
}

.quick-login {
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  min-height: 34px;
  border: 0;
  border-radius: 3px;
  padding: 0;
  overflow: hidden;
  color: #fff;
  text-align: left;
}

.quick-login span {
  display: grid;
  height: 100%;
  place-items: center;
  border-right: 1px solid rgba(255, 255, 255, 0.22);
  font-family: var(--font-data);
  font-weight: 900;
}

.quick-login strong {
  padding-left: 14px;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.quick-login.line { background: linear-gradient(90deg, #13a95f, #22c76f); }
.quick-login.google { background: #f2f4f5; color: #263236; }
.quick-login.facebook { background: linear-gradient(90deg, #315a9c, #4776bd); }

.login-divider {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 9px 0 7px;
  color: rgba(209, 235, 232, 0.58);
  font-size: 9px;
}

.login-divider::before,
.login-divider::after {
  height: 1px;
  flex: 1;
  background: rgba(73, 223, 208, 0.22);
  content: "";
}

body[data-active-screen="login"] .panel-title {
  min-height: 30px;
  margin-bottom: 8px;
  border-radius: 3px;
  font-size: 11px;
}

body[data-active-screen="login"] .field {
  gap: 3px;
  margin-bottom: 7px;
}

body[data-active-screen="login"] .field span {
  font-size: 10px;
}

body[data-active-screen="login"] .field input {
  height: 36px;
  border-radius: 3px;
  font-size: 13px;
}

body[data-active-screen="login"] .primary-action {
  min-height: 38px;
  border-radius: 3px;
  background: linear-gradient(180deg, #26cbbd, #087f7b);
  font-size: 13px;
}

body[data-active-screen="login"] .inline-actions {
  margin-top: 8px;
  font-size: 10px;
}

body[data-active-screen="login"] .music-strip {
  margin-top: 10px;
}

.campaign-brief {
  position: relative;
  flex: 0 0 auto;
  border: 1px solid rgba(45, 206, 194, 0.48);
  border-left: 3px solid var(--cyan);
  border-radius: 2px;
  padding: 7px 9px 7px;
  background:
    linear-gradient(100deg, rgba(73, 223, 208, 0.12), transparent 38%),
    repeating-linear-gradient(90deg, transparent 0 17px, rgba(73, 223, 208, 0.018) 17px 18px),
    rgba(3, 15, 17, 0.94);
  box-shadow: inset 0 0 22px rgba(73, 223, 208, 0.07), 0 5px 18px rgba(0, 0, 0, 0.24);
  cursor: pointer;
}

.campaign-brief.normal-cycle { border-left-color: var(--cyan); }
.campaign-brief.normal-cycle .campaign-progress span { background: linear-gradient(90deg, #158c99, var(--cyan)); box-shadow: 0 0 8px rgba(73, 223, 208, 0.7); }

.campaign-brief-toggle {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.campaign-signal {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-bottom: 4px;
  color: rgba(137, 232, 224, 0.62);
  font: 800 7px/1 var(--font-data);
  letter-spacing: 0.18em;
}

.campaign-signal i { width: 6px; height: 6px; border: 1px solid var(--cyan); border-radius: 50%; box-shadow: 0 0 8px rgba(73, 223, 208, 0.78); }
.campaign-signal i::after { content: ""; display: block; width: 2px; height: 2px; margin: 1px; border-radius: 50%; background: var(--cyan); }

.campaign-heading {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
}

.campaign-heading span {
  color: var(--cyan);
  font-size: 10px;
  font-weight: 900;
}

.campaign-heading strong {
  overflow: hidden;
  color: #fff;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-heading em {
  color: var(--cyan);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.campaign-progress {
  height: 4px;
  margin-top: 5px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}

.campaign-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #158c99, var(--cyan));
  box-shadow: 0 0 8px rgba(229, 170, 50, 0.65);
  transition: width 280ms ease;
}

.campaign-description {
  display: block;
  margin: 5px 0 0;
  color: rgba(218, 240, 237, 0.7);
  font-size: 8px;
  line-height: 1.45;
}

.campaign-steps {
  display: grid;
  gap: 4px;
  margin-top: 7px;
  border-top: 1px solid rgba(73, 223, 208, 0.16);
  padding-top: 6px;
}

.campaign-steps[hidden] { display: none; }

.campaign-steps button {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  min-height: 34px;
  border: 1px solid rgba(73, 223, 208, 0.2);
  border-radius: 2px;
  padding: 0 7px;
  background: rgba(0, 0, 0, 0.22);
  color: #dff6f3;
  text-align: left;
}

.campaign-steps b {
  color: var(--cyan);
  font-family: var(--font-data);
  font-size: 9px;
}

.campaign-steps span { display: grid; min-width: 0; gap: 1px; font-size: 10px; }
.campaign-steps span strong { overflow: hidden; color: #eafcf9; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.campaign-steps span small { color: rgba(176, 211, 208, 0.62); font: 800 8px/1 var(--font-data); }
.campaign-steps em { color: var(--cyan); font-size: 9px; font-style: normal; }
.campaign-steps button.complete { opacity: 0.62; }
.campaign-steps button.complete b,
.campaign-steps button.complete em { color: #78d99a; }
.campaign-steps button.claimable { border-color: rgba(229, 170, 50, 0.64); background: linear-gradient(90deg, rgba(116, 72, 5, 0.42), rgba(4, 22, 25, 0.5)); box-shadow: inset 2px 0 var(--gold); }
.campaign-steps button.claimable em { color: #ffd36e; text-shadow: 0 0 8px rgba(229, 170, 50, 0.7); }
.campaign-empty { padding: 9px; color: rgba(218, 240, 237, 0.68); font-size: 9px; text-align: center; }

.quick-menu-trigger {
  position: absolute;
  right: 5px;
  top: 66px;
  z-index: 55;
  display: none;
  width: 34px;
  height: 30px;
  border: 1px solid rgba(73, 223, 208, 0.58);
  border-radius: 3px 0 0 3px;
  padding: 7px 8px;
  background: rgba(2, 14, 16, 0.92);
  box-shadow: -5px 5px 16px rgba(0, 0, 0, 0.34);
}

.game-active .quick-menu-trigger { display: grid; gap: 3px; }

.quick-menu-trigger span {
  display: block;
  height: 1px;
  background: var(--cyan);
  box-shadow: 0 0 5px rgba(73, 223, 208, 0.7);
}

.quick-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 56;
  background: rgba(0, 5, 6, 0.68);
  backdrop-filter: blur(2px);
}

.quick-menu-sheet {
  position: fixed;
  top: calc(var(--game-header-height, 58px) + env(safe-area-inset-top, 0px));
  right: 0;
  bottom: 0;
  z-index: 60;
  width: min(82%, 310px);
  border-left: 1px solid rgba(73, 223, 208, 0.62);
  padding: 12px 10px 16px;
  background:
    linear-gradient(90deg, rgba(2, 12, 14, 0.98), rgba(5, 24, 25, 0.97)),
    rgba(2, 10, 12, 0.98);
  box-shadow: -22px 0 44px rgba(0, 0, 0, 0.56), inset 1px 0 rgba(73, 223, 208, 0.1);
  opacity: 0;
  pointer-events: none;
  transform: translateX(102%);
  transition: opacity 180ms ease, transform 220ms ease;
}

.game-modal-root {
  position: fixed;
  inset: 0;
  z-index: calc(200 + var(--modal-stack-index, 0) * 10);
  display: grid;
  place-items: center;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px));
  isolation: isolate;
}
.game-modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; background: rgba(0, 6, 10, .72); backdrop-filter: blur(3px); }
.game-modal-panel { position: relative; z-index: 1; width: min(100%, 430px); max-height: min(86dvh, 760px); overflow: auto; overscroll-behavior: contain; border: 1px solid rgba(73, 223, 208, .45); border-radius: 18px; background: rgba(3, 17, 23, .985); box-shadow: 0 22px 70px rgba(0, 0, 0, .58); color: #eefeff; }
.modal-stack-open { overflow: hidden; }
.modal-stack-open #root { isolation: isolate; }
.settings-modal .game-modal-panel { padding: 0; }
.settings-modal .quick-inline-settings { position: relative; inset: auto; z-index: auto; width: 100%; max-height: none; margin: 0; border: 0; border-radius: inherit; box-shadow: none; filter: none; backdrop-filter: none; }
.shop-purchase-modal .game-modal-panel { padding: 0; border: 0; background: transparent; box-shadow: none; overflow: visible; }
.shop-purchase-modal .shop-purchase-dialog { position: relative; inset: auto; z-index: auto; width: 100%; height: auto; padding: 0; background: transparent; }
.shop-offer-card.shop-unavailable { opacity: 1; }
.shop-offer-card.shop-sold-out { filter: none; opacity: 1; }
.shop-offer-card.shop-sold-out .item-card-art > img { filter: grayscale(.85) saturate(.35) brightness(.68); opacity: 1; }
.shop-offer-card.shop-unavailable [data-shop-buy] { display: inline-flex; cursor: not-allowed; }
.shop-offer-card[data-shop-state="SOLD_OUT"]::after,
.shop-offer-card[data-shop-state="LIMIT_REACHED"]::after { content: attr(data-shop-state-label); position: absolute; top: 10px; right: 10px; padding: 5px 8px; border-radius: 999px; background: rgba(72, 82, 88, .92); color: #e6ecef; font-size: 9px; letter-spacing: .08em; }
.acceleration-modal .game-modal-panel { overflow: visible; border: 0; background: transparent; box-shadow: none; }

.quick-menu-sheet.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.quick-menu-sheet header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  border-bottom: 1px solid rgba(73, 223, 208, 0.24);
  padding: 0 2px 9px;
}

.quick-menu-sheet header div {
  display: grid;
  gap: 2px;
}

.quick-menu-sheet header span {
  color: var(--cyan);
  font-family: var(--font-data);
  font-size: 8px;
  letter-spacing: 0.18em;
}

.quick-menu-sheet header strong {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.08em;
}

.quick-menu-sheet header button {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(73, 223, 208, 0.35);
  background: rgba(0, 0, 0, 0.24);
  color: var(--cyan);
  font-size: 20px;
}

.quick-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-top: 10px;
}

.quick-menu-grid button {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 7px;
  align-items: center;
  min-height: 42px;
  border: 1px solid rgba(73, 223, 208, 0.18);
  border-radius: 2px;
  padding: 5px 7px;
  background: rgba(5, 23, 24, 0.62);
  color: #dff8f5;
  text-align: left;
}

.quick-menu-grid button:hover,
.quick-menu-grid button:focus-visible {
  border-color: rgba(73, 223, 208, 0.72);
  background: rgba(15, 79, 76, 0.52);
}

.quick-menu-grid b {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(73, 223, 208, 0.44);
  color: var(--cyan);
  font-size: 15px;
  font-weight: 500;
}

.quick-menu-grid span {
  font-size: 10px;
  font-weight: 800;
}

.quick-menu-sheet footer {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 14px;
  border-top: 1px solid rgba(73, 223, 208, 0.16);
  padding-top: 9px;
  color: rgba(208, 237, 233, 0.62);
  font-family: var(--font-data);
  font-size: 8px;
}

.online-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 4px;
  border-radius: 50%;
  background: #68e69b;
  box-shadow: 0 0 8px rgba(104, 230, 155, 0.8);
}

.game-active .server-bridge-badge {
  left: 5px;
  right: auto;
  top: 67px;
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 9px;
  border-radius: 0 3px 3px 0;
}

.game-active .server-bridge-badge span:last-child { display: none; }
.quick-menu-open .server-bridge-badge { opacity: 0; pointer-events: none; }

.bottom-nav {
  left: 5px;
  right: 5px;
  bottom: 5px;
  gap: 1px;
  border-color: rgba(73, 223, 208, 0.32);
  border-radius: 2px;
  padding: 4px 3px 3px;
  background: rgba(2, 12, 14, 0.94);
}

.nav-button {
  min-height: 54px;
  border-radius: 1px;
  font-size: 10px;
}

.nav-button svg {
  width: 32px;
  height: 27px;
  margin-bottom: 1px;
}

.nav-button.active {
  background: linear-gradient(180deg, rgba(73, 223, 208, 0.2), rgba(73, 223, 208, 0.04));
  box-shadow: inset 0 2px var(--cyan);
}

@media (max-width: 520px) {
  body[data-active-screen="login"] .app-screen[data-screen="login"] {
    padding-inline: 18px;
  }

  .quick-menu-sheet {
    width: 84%;
  }
}
/* ============================================================
   Unified Game Card / Panel / Overlay Styles
   Dark sci-fi palette: bg #020A0E, cyan border rgba(24,215,235,0.6), gold progress #ffcc00
   ============================================================ */

/* --- 1. Game Item Card (unified card container) --- */
.game-item-card {
  border: 1px solid rgba(24, 215, 235, 0.6);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(2, 10, 12, 0.88);
  position: relative;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* --- 2. Locked state --- */
.game-item-card.locked img {
  filter: grayscale(1) brightness(0.55);
}

/* --- 3. Active / expanded highlight --- */
.game-item-card.active {
  border-color: rgba(24, 215, 235, 0.95);
  box-shadow: 0 0 12px rgba(24, 215, 235, 0.25);
}

/* --- 4. Card cover (image + badges container) --- */
.game-item-card-cover {
  position: relative;
  width: 100%;
}

/* --- 5. Cover image --- */
.game-item-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- 6. "Owned X" badge (top-right) --- */
.game-item-badge-owned {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(2, 10, 14, 0.85);
  border: 1px solid rgba(24, 215, 235, 0.5);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  color: rgba(24, 215, 235, 0.9);
  white-space: nowrap;
  pointer-events: none;
}

/* --- 7. Level badge (bottom-left) --- */
.game-item-badge-level {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: rgba(2, 10, 14, 0.85);
  border: 1px solid rgba(24, 215, 235, 0.5);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  color: #ffcc00;
  white-space: nowrap;
  pointer-events: none;
}

/* --- 8. Name badge (bottom) --- */
.game-item-badge-name {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(2, 10, 14, 0.85);
  border: 1px solid rgba(24, 215, 235, 0.5);
  border-radius: 4px;
  padding: 2px 10px;
  font-size: 12px;
  color: #e0e8ec;
  white-space: nowrap;
  pointer-events: none;
}

/* --- 9. Main status panel (production / upgrade area) --- */
.game-item-status-panel {
  border-top: 1px solid rgba(24, 215, 235, 0.4);
  padding: 10px;
  background: rgba(2, 10, 14, 0.92);
}

/* --- 10. Overlay buttons container (top-right) --- */
.game-item-overlay-buttons {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 5;
  display: flex;
  gap: 4px;
}

/* --- 11. Overlay button (hexagonal / circular sci-fi) --- */
.game-item-overlay-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(24, 215, 235, 0.6);
  background: rgba(2, 10, 14, 0.85);
  color: rgba(24, 215, 235, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  user-select: none;
}

.game-item-overlay-btn:hover {
  background: rgba(24, 215, 235, 0.15);
  border-color: rgba(24, 215, 235, 0.85);
}

/* --- 12. Overlay button active --- */
.game-item-overlay-btn.active {
  background: rgba(24, 215, 235, 0.25);
  border-color: rgba(24, 215, 235, 0.95);
  box-shadow: 0 0 8px rgba(24, 215, 235, 0.3);
}

/* --- 13. Info overlay panel --- */
.game-item-info-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(2, 10, 14, 0.94);
  border: 1px solid rgba(24, 215, 235, 0.5);
  border-radius: 6px;
  padding: 12px;
  overflow-y: auto;
  z-index: 10;
  color: #c8d6dc;
  font-size: 12px;
  line-height: 1.5;
}

/* --- 14. Tech tree overlay panel --- */
.game-item-tech-tree-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(2, 10, 14, 0.94);
  border: 1px solid rgba(24, 215, 235, 0.5);
  border-radius: 6px;
  padding: 12px;
  overflow-y: auto;
  z-index: 10;
  color: #c8d6dc;
  font-size: 12px;
  line-height: 1.5;
}

/* --- 15. Usage progress bar container --- */
.usage-progress-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

/* --- 16. Usage progress bar fill --- */
.usage-progress-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #ffcc00, #ff8800);
  transition: width 0.3s ease;
}

/* --- 17. Danger state (90%+) --- */
.usage-progress-bar-fill.danger {
  background: linear-gradient(90deg, #ff4444, #cc0000);
}

/* --- 18. Quantity production control area --- */
.quantity-production-control {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 0;
}

/* --- 19. Quantity row (- / input / + / max) --- */
.qty-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.qty-row button {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid rgba(24, 215, 235, 0.5);
  background: rgba(2, 10, 14, 0.8);
  color: rgba(24, 215, 235, 0.9);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.qty-row button:hover {
  background: rgba(24, 215, 235, 0.2);
}

.qty-row input[type="number"] {
  width: 56px;
  height: 28px;
  text-align: center;
  background: rgba(2, 10, 14, 0.6);
  border: 1px solid rgba(24, 215, 235, 0.4);
  border-radius: 4px;
  color: #e0e8ec;
  font-size: 13px;
}

/* --- 20. Quantity slider --- */
.qty-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.qty-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(24, 215, 235, 0.9);
  border: 2px solid rgba(2, 10, 14, 0.8);
  cursor: pointer;
}

/* --- 21. Production / upgrade / research action button --- */
.production-action-btn {
  width: 100%;
  padding: 8px 16px;
  border: 1px solid rgba(24, 215, 235, 0.6);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(24, 215, 235, 0.2), rgba(24, 215, 235, 0.05));
  color: rgba(24, 215, 235, 0.95);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.production-action-btn:hover {
  background: linear-gradient(180deg, rgba(24, 215, 235, 0.35), rgba(24, 215, 235, 0.1));
  border-color: rgba(24, 215, 235, 0.85);
}

/* --- 22. Disabled state --- */
.production-action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.05);
}

/* --- 23. Tech tree requirement node row --- */
.item-requirement-node {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 12px;
  color: #a0b0b8;
}

/* --- 24. Met state (green) --- */
.item-requirement-node.met {
  border-color: rgba(0, 200, 100, 0.5);
  background: rgba(0, 200, 100, 0.08);
  color: #4cffa0;
}

/* --- 25. Missing state (red) --- */
.item-requirement-node.missing {
  border-color: rgba(255, 80, 80, 0.5);
  background: rgba(255, 80, 80, 0.08);
  color: #ff6b6b;
}

/* --- 26. Resource cost row --- */
.item-resource-cost-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 12px;
  color: #c8d6dc;
}

/* --- 27. Resource shortfall (red) --- */
.item-resource-cost-row.short {
  color: #ff6b6b;
}

/* --- 28. Detail grid (2-column attributes) --- */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  font-size: 12px;
  color: #b0c0c8;
}

.detail-grid dt {
  color: rgba(24, 215, 235, 0.7);
  font-weight: 500;
}

.detail-grid dd {
  margin: 0;
  color: #e0e8ec;
}

/* ============================================================
   Rebuilt shared item flow — reference: ship list + expanded ship panel
   ============================================================ */
.building-list,
.system-list,
.game-item-card-list {
  min-width: 0;
}

.game-item-card-list {
  display: grid;
  gap: 8px;
}

.game-item-card {
  width: 100%;
  min-width: 0;
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(7, 21, 25, 0.96), rgba(1, 8, 11, 0.98));
  box-shadow: inset 0 0 22px rgba(24, 215, 235, 0.055);
}

.game-item-card.focused {
  border-color: #fff17b;
  box-shadow: 0 0 0 2px rgba(255, 225, 79, 0.18), 0 0 18px rgba(24, 215, 235, 0.36);
  animation: focused-item-pulse 0.75s ease-in-out 2;
}

@keyframes focused-item-pulse {
  50% { filter: brightness(1.26); }
}

.game-item-card-cover {
  display: block;
  min-height: 148px;
  border: 0;
  padding: 0;
  overflow: hidden;
  background: #02080b;
  color: #efffff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.game-item-card-cover img {
  position: absolute;
  inset: 0;
  height: 100%;
  filter: saturate(0.88) contrast(1.1) brightness(0.88);
  transition: filter 0.2s ease, transform 0.25s ease;
}

.game-item-card.active .game-item-card-cover img {
  filter: saturate(1.04) contrast(1.08) brightness(1.02);
  transform: scale(1.015);
}

.game-item-cover-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 27%, rgba(0, 5, 8, 0.2) 55%, rgba(0, 6, 9, 0.96) 100%),
    linear-gradient(90deg, rgba(0, 20, 25, 0.48), transparent 48%);
  pointer-events: none;
}

.game-item-badge-name {
  left: 9px;
  right: 92px;
  bottom: 26px;
  transform: none;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: #72f5ff;
  font-size: 14px;
  line-height: 18px;
  text-overflow: ellipsis;
  text-shadow: 0 0 9px rgba(30, 222, 238, 0.58), 0 2px 3px #000;
}

.game-item-card-summary {
  position: absolute;
  left: 9px;
  right: 94px;
  bottom: 8px;
  z-index: 2;
  overflow: hidden;
  color: rgba(235, 250, 252, 0.78);
  font-size: 9px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-item-lock-state {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 3;
  min-width: 57px;
  border: 1px solid rgba(49, 224, 235, 0.54);
  padding: 4px 6px;
  background: rgba(2, 16, 20, 0.86);
  color: #88f7ff;
  font-size: 9px;
  font-weight: 900;
  text-align: center;
}

.game-item-lock-state.locked {
  border-color: rgba(169, 177, 180, 0.38);
  background: rgba(22, 24, 25, 0.84);
  color: #c1c7c9;
}

.game-item-card.locked .game-item-card-cover img {
  filter: grayscale(1) brightness(0.42) contrast(1.05);
  opacity: 0.78;
}

.game-item-expanded {
  position: relative;
  min-width: 0;
}

.game-item-status-panel {
  display: grid;
  gap: 8px;
  border-top-color: rgba(24, 215, 235, 0.64);
  padding: 11px 10px 12px;
  background:
    linear-gradient(180deg, rgba(3, 15, 20, 0.98), rgba(1, 7, 10, 0.98)),
    repeating-linear-gradient(90deg, transparent 0 20px, rgba(24, 215, 235, 0.02) 20px 21px);
}

.game-item-status-panel > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid rgba(24, 215, 235, 0.2);
  padding-bottom: 6px;
}

.game-item-status-panel > header span {
  color: #ffb832;
  font-size: 9px;
  font-weight: 900;
}

.game-item-status-panel > header strong {
  overflow: hidden;
  color: #f5ffff;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-item-overlay-buttons {
  top: -55px;
  right: 7px;
  z-index: 20;
  gap: 5px;
}

.game-item-overlay-btn {
  width: 62px;
  height: 39px;
  border-radius: 0;
  padding: 0 5px;
  background: linear-gradient(180deg, rgba(11, 62, 76, 0.96), rgba(0, 20, 27, 0.98));
  clip-path: polygon(15% 0, 85% 0, 100% 25%, 100% 78%, 85% 100%, 15% 100%, 0 78%, 0 25%);
  color: #eaffff;
  font-size: 11px;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(59, 231, 244, 0.5), 0 0 10px rgba(22, 220, 238, 0.16);
}

.game-item-overlay-btn.active {
  background: linear-gradient(180deg, rgba(18, 154, 174, 0.98), rgba(0, 63, 78, 0.98));
  box-shadow: inset 0 0 0 1px #6cfcff, 0 0 13px rgba(35, 225, 241, 0.44);
}

.item-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.item-stat-grid > div {
  display: grid;
  gap: 2px;
  border-left: 2px solid rgba(24, 215, 235, 0.62);
  padding: 5px 7px;
  background: rgba(23, 60, 67, 0.22);
}

.item-stat-grid span,
.item-capacity-meta span {
  color: rgba(215, 239, 243, 0.66);
  font-size: 8px;
  font-weight: 800;
}

.item-stat-grid strong {
  color: #fff;
  font-family: var(--font-data);
  font-size: 14px;
}

.ship-production-capacity {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  min-width: 0;
}

.ship-production-capacity > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  border: 1px solid rgba(64, 216, 229, .18);
  border-radius: 5px;
  padding: 6px 7px;
  background: rgba(8, 35, 42, .56);
}

.ship-production-capacity > div.primary {
  border-color: rgba(255, 190, 48, .38);
  background: linear-gradient(145deg, rgba(110, 68, 8, .28), rgba(10, 35, 40, .6));
}

.ship-production-capacity span {
  overflow: hidden;
  color: rgba(213, 239, 242, .64);
  font-size: 8px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ship-production-capacity strong {
  overflow: hidden;
  color: #f2ffff;
  font-family: var(--font-data);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ship-production-capacity > div.primary strong { color: #ffd15a; }

.ship-production-capacity p {
  grid-column: 1 / -1;
  margin: 1px 0 0;
  border-left: 2px solid rgba(45, 220, 233, .6);
  padding: 5px 7px;
  background: rgba(15, 91, 99, .14);
  color: rgba(218, 245, 247, .78);
  font-size: 9px;
  line-height: 1.45;
}

.ship-production-capacity p.is-blocked {
  border-left-color: #ff9a39;
  background: rgba(130, 62, 9, .2);
  color: #ffc282;
}

.item-effect,
.item-action-reason {
  margin: 0;
  color: rgba(226, 244, 247, 0.78);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.45;
}

.item-effect b {
  margin-right: 7px;
  color: #72eef6;
}

.item-action-reason {
  border-left: 2px solid #ff6876;
  padding: 5px 7px;
  background: rgba(134, 29, 39, 0.18);
  color: #ff9ca6;
}

.usage-progress {
  display: grid;
  gap: 4px;
}

.usage-progress-label,
.item-capacity-meta,
.item-time-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}

.usage-progress-label span {
  color: rgba(226, 244, 247, 0.7);
  font-size: 9px;
  font-weight: 900;
}

.usage-progress-label strong { color: #ffcf38; font-size: 10px; }
.usage-progress-track { height: 8px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); overflow: hidden; }
.usage-progress-track span { display: block; height: 100%; background: linear-gradient(90deg, #ffcc20, #ff8b17); }
.usage-progress-track span.warning { background: linear-gradient(90deg, #ffac22, #ff671d); }
.usage-progress-track span.danger { background: linear-gradient(90deg, #ff6572, #c90f2d); }

.item-capacity-meta {
  flex-wrap: wrap;
  border-bottom: 1px dotted rgba(255,255,255,.16);
  padding-bottom: 6px;
}

.item-cost-panel {
  display: grid;
  gap: 5px;
}

.item-cost-panel header {
  display: flex;
  justify-content: space-between;
  color: #f3ffff;
  font-size: 9px;
}

.item-cost-panel header span { color: rgba(219, 240, 244, 0.52); }
.item-cost-panel ul { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.item-cost-panel li { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 5px; border: 1px solid rgba(255,255,255,.1); padding: 5px 6px; background: rgba(255,255,255,.025); font-size: 8px; }
.item-cost-panel li span { overflow: hidden; color: rgba(228, 246, 248, 0.7); text-overflow: ellipsis; white-space: nowrap; }
.item-cost-panel li strong { color: #73f6af; }
.item-cost-panel li em { grid-column: 1 / -1; color: rgba(218, 237, 239, 0.5); font-size: 7px; font-style: normal; text-align: right; }
.item-cost-panel li.short strong,
.item-cost-panel li.short em { color: #ff7280; }

.quantity-production-control {
  border: 1px solid rgba(24, 215, 235, 0.22);
  padding: 7px;
  background: rgba(0, 25, 31, 0.48);
}

.quantity-production-control > header {
  display: flex;
  justify-content: space-between;
  color: rgba(224, 245, 248, 0.72);
  font-size: 9px;
}

.quantity-production-control > header strong { color: #ffc432; font-size: 13px; }
.qty-row { display: grid; grid-template-columns: 30px minmax(52px, 1fr) 30px minmax(78px, 1.2fr); }
.qty-row button { width: 100%; border-radius: 2px; font-family: inherit; font-size: 13px; font-weight: 900; }
.qty-row button.qty-max { font-size: 9px; }
.qty-row input[type="number"] { width: 100%; border-radius: 2px; box-sizing: border-box; }
.qty-row button:disabled,
.qty-row input:disabled { opacity: .38; cursor: not-allowed; }
.qty-slider { height: 11px; border-radius: 0; background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.045)); accent-color: #28d9e8; touch-action: none; }
.qty-slider::-webkit-slider-thumb { width: 22px; height: 22px; border-radius: 3px; background: linear-gradient(180deg, #7ffaff, #159fb3); border: 2px solid #061217; }

.item-time-row > span {
  display: grid;
  gap: 2px;
  color: rgba(226, 244, 247, 0.58);
  font-size: 8px;
}

.item-time-row strong { color: #ffbd35; font-size: 9px; }
.production-action-btn,
.special-building-entry { min-height: 42px; border-radius: 2px; font-family: inherit; font-weight: 900; text-transform: none; }
.special-building-entry { width: 100%; border: 1px solid rgba(255, 197, 60, 0.58); background: linear-gradient(180deg, rgba(166, 103, 12, 0.3), rgba(39, 26, 5, 0.72)); color: #ffe397; }

.game-item-detail-panel {
  display: grid;
  gap: 8px;
  position: relative;
  z-index: 12;
  border-top: 1px solid rgba(91, 239, 250, 0.72);
  padding: 10px;
  background: linear-gradient(180deg, rgba(4, 23, 29, 0.99), rgba(1, 8, 12, 0.99));
}

.game-item-detail-panel > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.game-item-detail-panel h4 { margin: 0; color: #8ff8ff; font-size: 12px; }
.game-item-detail-panel [data-overlay-close] { width: 28px; height: 28px; border: 1px solid rgba(104, 240, 250, .46); background: rgba(3, 21, 27, .9); color: #fff; font-size: 17px; }
.game-item-detail-panel > p { margin: 0; color: rgba(224, 243, 246, .73); font-size: 9px; line-height: 1.5; }
.game-item-detail-panel dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; margin: 0; }
.game-item-detail-panel dl div { border: 1px solid rgba(255,255,255,.09); padding: 5px; background: rgba(255,255,255,.025); }
.game-item-detail-panel dt { color: rgba(125,246,255,.65); font-size: 8px; }
.game-item-detail-panel dd { margin: 2px 0 0; color: #f1ffff; font-size: 9px; }

.game-item-detail-panel.tech-tree { align-content: start; }
.item-requirement-node { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; border-radius: 1px; padding: 7px; font-family: inherit; text-align: left; }
.item-requirement-node span { grid-row: 1 / span 2; align-self: center; color: inherit; font-size: 8px; }
.item-requirement-node strong { color: #f7ffff; font-size: 10px; }
.item-requirement-node em { color: rgba(229,243,245,.64); font-size: 8px; font-style: normal; }
.item-requirement-node b { grid-column: 3; grid-row: 1 / span 2; align-self: center; font-size: 8px; }

.game-item-category-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid rgba(24, 215, 235, .28);
  background: rgba(2, 9, 12, .92);
}

.game-item-category-tabs button {
  min-width: 0;
  min-height: 36px;
  border: 0;
  border-right: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(42,50,54,.88), rgba(8,13,16,.92));
  color: rgba(231,243,246,.72);
  font-family: inherit;
  font-size: 9px;
  font-weight: 900;
}

.game-item-category-tabs button.active {
  background: linear-gradient(180deg, rgba(15,85,97,.96), rgba(4,34,40,.98));
  color: #efffff;
  box-shadow: inset 0 -2px #27dce9, inset 0 0 12px rgba(28,220,235,.18);
}

/* New blueprint and Zion markup. */
.special-center-summary {
  display: flex;
  justify-content: space-between;
  min-height: 54px;
  border-radius: 2px;
  padding: 10px;
}

.special-center-summary strong { font-size: 14px; }
.special-center-summary span { align-self: center; text-align: right; }
.blueprint-list { gap: 8px; }
.blueprint-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-radius: 2px;
}
.blueprint-card > img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(24, 215, 235, .28);
  padding: 2px 6px;
  background:
    radial-gradient(ellipse at 50% 54%, rgba(21, 99, 113, .2), transparent 62%),
    linear-gradient(180deg, #031015, #01080b);
  object-fit: contain;
  object-position: center;
}
.blueprint-card.locked > img { filter: grayscale(1) brightness(.4); }
.blueprint-card > div { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 8px; }
.blueprint-card > div > strong { color: #76f5ff; font-size: 12px; }
.blueprint-card > div > span,
.blueprint-card > div > p { margin: 0; color: rgba(224,243,246,.66); font-size: 8px; line-height: 1.4; }
.blueprint-probability { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 8px; border: 1px solid rgba(255,190,72,.32); padding: 7px; background: linear-gradient(100deg, rgba(95,56,5,.34), rgba(4,18,22,.76)); }
.blueprint-probability > span { color: rgba(235,248,250,.62); font-size: 8px; }
.blueprint-probability > strong { color: #ffd36f; font: 900 16px var(--font-data); }
.blueprint-probability > em,
.blueprint-probability > b { grid-column: 1 / -1; color: rgba(223,244,247,.58); font-size: 7px; font-style: normal; line-height: 1.35; }
.blueprint-probability > b { color: #7df6ff; }
.blueprint-card > div > button { min-height: 34px; border: 1px solid rgba(24,215,235,.55); background: rgba(11,90,101,.48); color: #eaffff; font-family: inherit; font-weight: 900; }
.blueprint-card > div > button:disabled { opacity: .46; }
.blueprint-card .item-cost-panel ul { grid-template-columns: 1fr; }
.blueprint-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; }
.blueprint-actions button { min-height: 34px; border: 1px solid rgba(24,215,235,.48); background: rgba(10,69,80,.56); color: #ecffff; font-family: inherit; font-size: 8px; font-weight: 900; }
.blueprint-actions button:disabled { filter: grayscale(.8); opacity: .42; }
.blueprint-tech-panel { grid-column: 1 / -1; display: grid; gap: 5px; border-top: 1px solid rgba(24,215,235,.32); padding: 8px; background: rgba(0,12,16,.94); }
.blueprint-tech-panel > strong { color: #8bf7ff; font-size: 10px; }

.zion-simple-grid { display: grid; gap: 9px; }
.zion-simple-grid > section { border: 1px solid rgba(24,215,235,.34); padding: 7px; background: rgba(2,11,14,.92); }
.zion-simple-grid > section > header { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; gap: 7px; align-items: center; border-bottom: 1px solid rgba(24,215,235,.18); padding-bottom: 7px; }
.zion-simple-grid > section > header img { width: 52px; height: 52px; object-fit: contain; }
.zion-simple-grid > section > header strong { color: #8cf8ff; font-size: 12px; }
.zion-simple-grid > section > header span { color: #ffce55; font-size: 9px; }
.zion-simple-grid > section > div { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 4px; padding-top: 7px; }
.zion-simple-grid > section > div button { display: grid; gap: 2px; min-width: 0; border: 1px solid rgba(24,215,235,.24); padding: 3px; background: rgba(255,255,255,.025); color: #efffff; font-family: inherit; }
.zion-simple-grid > section > div button.active { border-color: #ffd26c; background: linear-gradient(180deg, rgba(74, 53, 8, .34), rgba(5, 29, 34, .78)); box-shadow: inset 0 -2px #ffd26c, 0 0 10px rgba(255, 205, 87, .12); }
.zion-simple-grid > section > div button.powder-short:not(.active) { opacity: .58; }
.zion-simple-grid > section > div button.center-locked:not(.active) { filter: grayscale(.62); }
.zion-simple-grid > section > div button img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.zion-simple-grid > section > div button strong { color: #fff; font-size: 9px; }
.zion-simple-grid > section > div button span,
.zion-simple-grid > section > div button em { overflow: hidden; color: rgba(220,241,244,.58); font-size: 6px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.zion-simple-grid > section > div button:disabled { filter: grayscale(.85); opacity: .42; }
.zion-batch-console { display: grid; gap: 8px; margin-top: 9px; border: 1px solid rgba(92, 235, 242, .42); border-radius: 7px; padding: 9px; background: linear-gradient(145deg, rgba(6, 37, 44, .92), rgba(2, 11, 15, .96)); box-shadow: inset 0 1px rgba(215, 255, 255, .05), 0 7px 20px rgba(0, 0, 0, .24); }
.zion-batch-console > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.zion-batch-target { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 7px; min-width: 0; }
.zion-batch-target > img { width: 46px; height: 46px; object-fit: contain; }
.zion-batch-target > span { display: grid; gap: 2px; min-width: 0; }
.zion-batch-target em { color: #62e9ef; font: 900 6px/1 var(--font-data); letter-spacing: .14em; }
.zion-batch-target strong { color: #fff; font-size: 12px; }
.zion-batch-target small { overflow: hidden; color: rgba(221, 244, 246, .56); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.zion-batch-console > header > b { flex: 0 0 auto; border: 1px solid rgba(255, 206, 86, .3); border-radius: 4px; padding: 4px 5px; background: rgba(74, 49, 4, .34); color: #ffd26c; font: 900 7px/1 var(--font-data); }
.zion-batch-slider { display: grid; grid-template-columns: 76px minmax(0, 1fr) 42px; align-items: center; gap: 6px; }
.zion-batch-slider > label { display: grid; gap: 3px; min-width: 0; color: rgba(220, 244, 246, .58); font-size: 7px; }
.zion-batch-slider > label input { box-sizing: border-box; min-width: 0; height: 28px; border: 1px solid rgba(83, 233, 240, .34); border-radius: 4px; padding: 0 5px; background: rgba(0, 9, 12, .7); color: #fff; font: 900 11px/1 var(--font-data); }
.zion-batch-slider > div { display: grid; grid-template-columns: 14px minmax(0, 1fr) 22px; align-items: center; gap: 4px; }
.zion-batch-slider span { color: rgba(220, 244, 246, .52); font: 800 7px/1 var(--font-data); text-align: center; }
.zion-batch-slider input { width: 100%; height: 18px; margin: 0; accent-color: #52e8ef; }
.zion-batch-slider output { display: grid; place-items: center; min-height: 34px; border: 1px solid rgba(83, 233, 240, .38); border-radius: 5px; background: rgba(0, 9, 12, .65); color: #fff; font: 900 14px/1 var(--font-data); }
.zion-batch-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.zion-batch-metrics > span { display: grid; gap: 2px; min-width: 0; border: 1px solid rgba(100, 210, 218, .12); padding: 5px 4px; background: rgba(255, 255, 255, .022); color: rgba(221, 244, 246, .54); font-size: 6px; text-align: center; }
.zion-batch-metrics strong { overflow: hidden; color: #ffcf61; font: 900 8px/1 var(--font-data); text-overflow: ellipsis; white-space: nowrap; }
.zion-batch-actions { display: grid; grid-template-columns: .72fr 1.28fr; gap: 5px; }
.zion-batch-actions button { min-height: 36px; border: 1px solid rgba(84, 229, 236, .34); border-radius: 5px; background: rgba(14, 66, 75, .54); color: rgba(236, 255, 255, .88); font-size: 9px; font-weight: 900; }
.zion-batch-actions button.primary { border-color: rgba(92, 239, 244, .64); background: linear-gradient(180deg, rgba(20, 135, 146, .86), rgba(6, 64, 74, .94)); color: #fff; }
.zion-batch-actions button:disabled { filter: grayscale(.8); opacity: .4; }
.zion-batch-console > p { margin: 0; color: rgba(222, 244, 246, .48); font-size: 7px; line-height: 1.45; }
.zion-batch-console.locked { border-color: rgba(255, 179, 72, .34); }
.zion-unlock-gate { display: grid; gap: 6px; margin: 8px 0; border: 1px solid rgba(255, 182, 71, .42); border-radius: 7px; padding: 9px; background: linear-gradient(135deg, rgba(64, 37, 4, .72), rgba(5, 18, 22, .9)); box-shadow: inset 3px 0 rgba(255, 184, 75, .68); }
.zion-unlock-gate > span { color: #ffbd5d; font: 900 7px/1 var(--font-data); letter-spacing: .14em; }
.zion-unlock-gate > strong { color: #fff4dc; font-size: 10px; line-height: 1.45; }
.zion-unlock-gate > p { margin: 0; color: rgba(239, 231, 210, .64); font-size: 8px; line-height: 1.5; }
.zion-unlock-gate > button { justify-self: start; min-height: 34px; border: 1px solid rgba(255, 196, 97, .48); border-radius: 5px; padding: 0 12px; background: rgba(91, 53, 6, .76); color: #fff1cf; font-size: 9px; font-weight: 900; }

/* Equal-size resource slots and a compact persistent game back button. */
.global-hud-resources {
  grid-template-columns: 31px repeat(5, minmax(0, 1fr)) 26px;
  gap: 1px;
  min-height: 68px;
  padding: 8px 3px 6px;
  box-sizing: border-box;
}

.global-hud-resources .resource-item {
  width: 100%;
  height: 52px;
  min-width: 0;
  grid-template-rows: 27px 18px;
  padding: 0 1px;
  box-sizing: border-box;
}

.global-hud-resources .resource-name-row,
.global-hud-resources .resource-item strong { width: 100%; }
.global-hud-resources .res-icon { width: 23px; height: 21px; flex-basis: 23px; }
.global-hud-resources .resource-item small { max-width: 27px; font-size: 8px; line-height: 1.05; }
.global-hud-resources .resource-item strong { font-family: var(--font-data); font-size: 10px; line-height: 18px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hud-back-button { width: 30px; height: 52px; padding: 0; }
.global-hud-resources .add-resource { width: 25px; height: 38px; }

/* The outer pan boundary is the 15th orbit; it is visually distinct. */
.orbit-ring[data-orbit-slot="15"] {
  border-color: rgba(125, 246, 255, 0.38);
  box-shadow: 0 0 18px rgba(41, 216, 230, 0.06);
}

.star-map-zoom-readout span::after {
  content: " · 15星轨";
  color: rgba(125, 246, 255, 0.55);
}

@media (max-width: 390px) {
  .build-screen { padding-inline: 6px; }
  .game-item-card-cover { min-height: 136px; }
  .game-item-overlay-btn { width: 56px; }
  .item-cost-panel ul { grid-template-columns: 1fr; }
  .blueprint-card { grid-template-columns: minmax(0, 1fr); }
  .blueprint-card > img { width: 100%; }
  .global-hud-resources .resource-item small { display: inline; font-size: 7px; }
}

@media (max-height: 900px) {
  .studio-shell {
    place-items: start center;
    padding-top: 8px;
  }
}

/* Final mobile legibility pass: keep the fixed HUD and action labels out of content. */
:root {
  --game-hud-offset: calc(74px + env(safe-area-inset-top));
}

.command-screen,
.build-screen,
.utility-screen {
  padding-top: var(--game-hud-offset);
}

body[data-active-screen="hangar"] [data-screen="hangar"],
body[data-active-screen="mail"] [data-screen="mail"],
body[data-active-screen="shop"] [data-screen="shop"] {
  padding-top: calc(78px + env(safe-area-inset-top));
}

.planet-showcase h2 {
  right: 78px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-item-overlay-buttons {
  position: static;
  top: auto;
  right: auto;
  z-index: auto;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  border-top: 1px solid rgba(24, 215, 235, 0.32);
  padding: 7px 8px 6px;
  background: rgba(2, 12, 16, 0.96);
}

.game-item-overlay-btn {
  width: auto;
  min-width: 66px;
  height: 34px;
  padding-inline: 9px;
  font-size: 10px;
}

.resource-detail-panel .resource-panel-heading {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 0;
  padding: 5px 2px 7px;
  border-bottom: 1px solid rgba(125, 246, 255, 0.2);
}

.resource-detail-panel .resource-panel-heading strong {
  color: #f4ffff;
  font-size: 11px;
}

.resource-detail-panel .resource-panel-heading span,
.resource-detail-title em {
  overflow: hidden;
  color: #61eaa1;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resource-detail-title em.danger {
  color: #ff6f72;
}

.resource-capacity-track {
  grid-column: 1 / -1;
  height: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.resource-capacity-track span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #0f7180, #40f2ff);
}

.quick-menu-sheet {
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

.quick-menu-sheet footer {
  position: static;
  margin: 10px 12px 0;
}

.quick-inline-settings {
  position: relative;
  bottom: auto;
  margin-bottom: 8px;
}

.server-bridge-badge {
  top: auto;
  right: 9px;
  bottom: 82px;
  z-index: 18;
}

body.game-active .server-bridge-badge {
  top: auto;
  right: auto;
  bottom: 82px;
  left: 7px;
}

body.game-active .build-screen-head {
  grid-template-columns: minmax(0, 1fr);
}

body.game-active .build-screen-head > .back-link {
  display: none;
}

body[data-active-screen="fleet-mission"] .global-hud-resources {
  display: grid;
}

body[data-active-screen="fleet-mission"] .fleet-mission-head {
  grid-template-columns: minmax(0, 1fr) auto;
}

body[data-active-screen="fleet-mission"] .fleet-back-home {
  display: none;
}

/* Queue acceleration terminal */
.acceleration-modal {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: grid;
  align-items: end;
}

.acceleration-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 4, 7, 0.76);
  backdrop-filter: blur(3px);
}

.acceleration-sheet {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  max-height: min(78dvh, 650px);
  overflow-y: auto;
  border: 1px solid rgba(255, 194, 75, 0.56);
  border-bottom: 0;
  padding: 10px 10px calc(13px + env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg, rgba(34, 39, 38, 0.99), rgba(4, 11, 14, 0.995)),
    repeating-linear-gradient(90deg, transparent 0 26px, rgba(255,255,255,.018) 26px 27px);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.72), inset 0 1px rgba(255, 222, 135, 0.18);
}

.acceleration-sheet > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 194, 75, 0.2);
  padding-bottom: 8px;
}
.acceleration-sheet > header span { color: #ffbd52; font-size: 7px; font-weight: 900; letter-spacing: .16em; }
.acceleration-sheet > header h3 { margin: 1px 0 0; color: #fff; font-size: 16px; }
.acceleration-sheet > header button { width: 32px; height: 32px; border: 1px solid rgba(255, 194, 75, .42); background: rgba(55, 34, 7, .8); color: #ffd26e; font-size: 20px; }

.acceleration-target,
.acceleration-item-list,
.acceleration-gem { border: 1px solid rgba(125, 246, 255, 0.22); background: rgba(3, 14, 18, 0.84); }
.acceleration-target { display: grid; gap: 3px; padding: 9px; }
.acceleration-target > span { color: rgba(226, 249, 251, .56); font-size: 8px; }
.acceleration-target > strong { color: #fff; font-size: 13px; }
.acceleration-target > div { display: flex; justify-content: space-between; margin-top: 5px; border-top: 1px solid rgba(125, 246, 255, .12); padding-top: 6px; }
.acceleration-target em { color: rgba(226, 249, 251, .56); font-size: 8px; font-style: normal; }
.acceleration-target b { color: #ffd36f; font: 900 12px "Bahnschrift Condensed", sans-serif; }

.acceleration-item-list > header { display: flex; justify-content: space-between; padding: 7px 8px; border-bottom: 1px solid rgba(125, 246, 255, .14); }
.acceleration-item-list > header strong { color: #fff; font-size: 10px; }
.acceleration-item-list > header span { color: #55eff8; font-size: 8px; }
.acceleration-item-list > button { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 8px; align-items: center; width: 100%; min-height: 52px; border: 0; border-bottom: 1px solid rgba(255,255,255,.05); padding: 5px 8px; background: rgba(255,255,255,.018); color: #fff; text-align: left; }
.acceleration-item-list .accelerator-item-art { width: 38px; height: 38px; }
.acceleration-item-list > button span:nth-child(2) { display: grid; gap: 2px; }
.acceleration-item-list > button strong { font-size: 10px; }
.acceleration-item-list > button em { color: rgba(226,249,251,.55); font-size: 8px; font-style: normal; }
.acceleration-item-list > button b { color: #ffd36f; font: 900 11px "Bahnschrift Condensed", sans-serif; }
.acceleration-item-list > p { margin: 0; padding: 13px 9px; color: rgba(226,249,251,.56); font-size: 8px; text-align: center; }

.acceleration-gem { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 8px; }
.acceleration-gem > div { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 7px; align-items: center; }
.acceleration-gem > div > span:last-child { display: grid; gap: 2px; }
.acceleration-gem strong { color: #fff; font-size: 10px; }
.acceleration-gem em { color: rgba(226,249,251,.55); font-size: 8px; font-style: normal; }
.acceleration-gem button { min-width: 88px; min-height: 36px; border: 1px solid #e9b849; background: linear-gradient(#a76e18,#543006); color: #fff4c2; font-size: 9px; font-weight: 900; }
.acceleration-gem button:disabled { filter: grayscale(1); opacity: .42; }
.acceleration-rule { margin: 0; color: rgba(226,249,251,.5); font-size: 7px; line-height: 1.45; }

/* ============================================================
   Fleet missions + mailbox — rebuilt from the tutorial flow
   ============================================================ */
.fleet-mission-head,
.fleet-mission-tabs,
.fleet-step-panel,
.fleet-step-title,
.fleet-target-card,
.fleet-coordinate-bar,
.fleet-speed-control,
.fleet-confirm-target,
.fleet-confirm-list,
.fleet-ship-row,
.fleet-cargo-row,
.fleet-summary-strip article,
.fleet-task-card,
.mail-tabs,
.mail-card {
  border-radius: 2px;
}

.fleet-mission-head {
  min-height: 54px;
  background:
    linear-gradient(180deg, rgba(33, 48, 52, 0.98), rgba(5, 14, 18, 0.99)),
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(255,255,255,.02) 24px 25px);
}

.fleet-back-home {
  width: 31px;
  height: 38px;
  border-radius: 1px;
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 22% 100%, 0 50%);
}

.fleet-mission-tabs button {
  min-height: 44px;
  font-size: 10px;
}

.fleet-mission-tabs button.active {
  box-shadow: inset 0 -3px 0 #27e1ed, inset 0 0 17px rgba(41,216,230,.2);
}

.fleet-step-panel {
  padding: 8px 7px 10px;
  background:
    linear-gradient(180deg, rgba(1, 10, 14, 0.96), rgba(0, 4, 7, 0.99)),
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(125,246,255,.018) 34px 35px);
}

.fleet-ship-row {
  grid-template-columns: 72px minmax(0, 1fr) 74px;
  min-height: 104px;
  border-color: rgba(31, 218, 231, .55);
  padding: 6px;
}

.fleet-ship-row img {
  width: 72px;
  height: 88px;
  border-radius: 1px;
  filter: saturate(.94) contrast(1.08);
}

.fleet-ship-name strong { color: #70f3ff; font-size: 12px; }
.fleet-ship-name em { color: #fff; }
.fleet-ship-tools button { border-radius: 1px; }
.fleet-ship-tools [data-fleet-ship-max] { border-color: rgba(45,224,236,.68); background: linear-gradient(180deg, rgba(20,117,133,.94), rgba(4,43,52,.98)); }
.fleet-ship-tools [data-fleet-ship-zero] { color: rgba(235,249,251,.66); }

.fleet-yellow-slider {
  height: 12px;
  touch-action: pan-y;
  cursor: ew-resize;
}

.fleet-step-actions button {
  min-height: 44px;
  border-radius: 2px;
}

.fleet-step-actions .primary {
  border-color: rgba(54, 232, 244, .78);
  background: linear-gradient(180deg, rgba(22, 161, 185, .98), rgba(3, 71, 91, .99));
  color: #efffff;
  box-shadow: inset 0 0 16px rgba(70,236,249,.13), 0 0 10px rgba(24,215,235,.16);
}

.fleet-step-actions .danger {
  border-color: rgba(255, 100, 104, .7);
  background: linear-gradient(180deg, rgba(155, 49, 45, .96), rgba(66, 15, 17, .98));
  color: #ffe8e8;
}

.fleet-hex-row span {
  width: 58px;
  height: 50px;
  border-radius: 0;
}

.fleet-task-card {
  grid-template-columns: 104px minmax(0,1fr);
  border-color: rgba(24,215,235,.5);
  padding: 6px;
}

.fleet-task-card img {
  width: 104px;
  height: 118px;
  border-radius: 1px;
}

.fleet-task-card .tag {
  display: inline-block;
  border-left: 2px solid #27dce9;
  padding-left: 5px;
  color: #78f6ff;
  font-size: 8px;
  font-weight: 900;
}

.fleet-task-card button {
  border-radius: 1px;
  background: linear-gradient(180deg, rgba(17,117,130,.94), rgba(4,52,61,.98));
}
.fleet-task-actions-inline { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
.fleet-task-actions-inline button:only-child { grid-column: 1 / -1; }
.fleet-task-actions-inline .recall { border-color: rgba(255,110,112,.58); background: linear-gradient(180deg, rgba(133,42,42,.9), rgba(57,14,18,.96)); color: #ffe7e7; }

.command-detail-panel {
  max-height: 270px;
  overflow-x: hidden;
  overflow-y: auto;
}

.fleet-summary-group li,
.task-fleet > button {
  border-radius: 1px;
}

.mail-tabs button {
  min-height: 44px;
  font-family: inherit;
}

.mail-tabs .active {
  box-shadow: inset 0 -3px 0 #27dce9, inset 0 0 17px rgba(41,216,230,.2);
}

.mail-list > .fleet-summary-strip {
  margin-bottom: 2px;
}

.mail-card {
  position: relative;
  border-color: rgba(24,215,235,.38);
  background:
    linear-gradient(180deg, rgba(7, 20, 24, .96), rgba(1, 8, 11, .98));
}

.mail-card.unread::before {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #ffbd38;
  box-shadow: 0 0 9px rgba(255,189,56,.58);
  content: "";
}

.mail-card button {
  min-height: 82px;
  padding: 10px 11px 10px 13px;
}

.mail-card button strong { color: #eefeff; }
.mail-card.unread button strong { color: #ffe58f; }
.mail-card > .fleet-task-extra { margin: 8px; padding: 9px; }
.mail-card .fleet-task-extra h3 { margin: 6px 0; color: #8ff7ff; font-size: 15px; line-height: 1.35; }
.mail-card .fleet-task-extra p { margin: 3px 0; color: rgba(226,244,247,.7); font-size: 9px; }
.mail-card > .fleet-task-extra:nth-child(2) { color: rgba(238,252,254,.86); font-size: 11px; line-height: 1.75; }
.mail-battle-report { display: grid; gap: 8px; margin: 8px; border: 1px solid rgba(255,92,105,.4); padding: 8px; background: linear-gradient(180deg, rgba(49,11,17,.52), rgba(3,10,13,.96)); }
.mail-battle-report > header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 6px; }
.mail-battle-report > header span { color: rgba(236,247,249,.62); font-size: 8px; font-weight: 900; }
.mail-battle-report > header strong { color: #ffe27d; font-size: 13px; }
.mail-battle-compare { display: grid; grid-template-columns: 1fr 28px 1fr; gap: 5px; align-items: center; }
.mail-battle-compare article { display: grid; gap: 3px; border: 1px solid rgba(255,255,255,.1); padding: 7px; text-align: center; }
.mail-battle-compare article.friendly { border-color: rgba(44,223,235,.42); color: #84f8ff; }
.mail-battle-compare article.enemy { border-color: rgba(255,87,102,.5); color: #ff8994; }
.mail-battle-compare span { font-size: 8px; font-weight: 900; }
.mail-battle-compare strong { font-family: var(--font-data); font-size: 16px; }
.mail-battle-compare > b { color: rgba(255,255,255,.55); font-size: 9px; text-align: center; }
.mail-battle-report dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; margin: 0; }
.mail-battle-report dl div { border: 1px solid rgba(255,255,255,.08); padding: 5px; background: rgba(0,0,0,.22); }
.mail-battle-report dt { color: rgba(227,244,247,.55); font-size: 7px; }
.mail-battle-report dd { margin: 2px 0 0; color: #f5ffff; font-size: 9px; font-weight: 900; }
.mail-scout-report { border-color: rgba(72,224,238,.5); background: linear-gradient(180deg, rgba(5,44,51,.62), rgba(3,10,13,.96)); }
.mail-mining-report { border-color: rgba(255,196,74,.52); background: linear-gradient(180deg, rgba(53,35,7,.58), rgba(3,10,13,.96)); }
.mail-buff-award { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 2px 8px; border: 1px solid rgba(255,196,75,.34); padding: 7px; background: linear-gradient(90deg, rgba(104,59,8,.32), rgba(49,22,72,.28)); }
.mail-buff-award span { grid-row: 1 / span 2; align-self: center; color: #ffc85c; font-size: 8px; font-weight: 900; }
.mail-buff-award strong { color: #fff1bd; font-size: 10px; }
.mail-buff-award em { color: #8fefff; font-size: 8px; font-style: normal; font-weight: 900; }
.mail-card .mail-battle-detail-toggle { display: flex; min-height: 36px; justify-content: space-between; align-items: center; border: 1px solid rgba(67,225,238,.45); padding: 7px 9px; background: linear-gradient(90deg, rgba(7,69,79,.78), rgba(11,24,31,.96)); color: #dffeff; }
.mail-battle-detail-toggle span { font-size: 9px; font-weight: 900; }
.mail-battle-detail-toggle em { color: #ffc862; font: normal 900 8px var(--font-data); }
.mail-battle-detail { display: grid; gap: 7px; border: 1px solid rgba(70,221,234,.3); padding: 7px; background: rgba(1,8,12,.74); }
.mail-battle-detail > header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 6px; }
.mail-battle-detail > header div { display: grid; gap: 2px; }
.mail-battle-detail > header span { color: #59dce7; font: 700 6px var(--font-data); letter-spacing: .12em; }
.mail-battle-detail > header strong { color: #f3ffff; font-size: 11px; }
.mail-battle-detail > header em { color: #ffcf69; font: normal 900 9px var(--font-data); }
.mail-battle-detail.legacy p { margin: 0; color: rgba(232,248,250,.65); font-size: 8px; line-height: 1.6; }
.mail-battle-roster { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
.mail-battle-roster span { border-left: 2px solid #45dce8; padding: 5px 6px; background: rgba(44,207,220,.06); color: #c9faff; font: 800 8px var(--font-data); }
.mail-battle-roster span:last-child { border-left-color: #ff6877; background: rgba(255,82,99,.06); color: #ffc3c9; }
.mail-round-list { display: grid; gap: 6px; }
.mail-round-list > article { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; border: 1px solid rgba(255,255,255,.08); padding: 6px; background: linear-gradient(135deg, rgba(14,35,42,.72), rgba(17,9,15,.76)); }
.mail-round-list > article > header { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,.07); padding-bottom: 4px; }
.mail-round-list > article > header b { color: #fff1b4; font: 900 9px var(--font-data); }
.mail-round-list > article > header span { color: rgba(225,244,247,.58); font-size: 7px; }
.mail-round-loss { display: grid; align-content: start; gap: 4px; min-width: 0; border-left: 2px solid #43dce8; padding: 5px; background: rgba(38,206,220,.045); }
.mail-round-loss.enemy { border-left-color: #ff6574; background: rgba(255,84,100,.045); }
.mail-round-loss > strong { color: #7bf3fc; font-size: 7px; }
.mail-round-loss.enemy > strong { color: #ff9aa4; }
.mail-round-loss > div { display: grid; gap: 2px; }
.mail-round-loss > div > span { display: flex; justify-content: space-between; gap: 5px; color: #dceff1; font-size: 7px; line-height: 1.35; }
.mail-round-loss > div b { min-width: 0; overflow-wrap: anywhere; }
.mail-round-loss > div em { flex: 0 0 auto; color: #ffcf67; font-style: normal; font-weight: 900; }
.mail-round-loss small { color: rgba(228,246,248,.48); font-size: 6px; }
.mail-no-loss { color: rgba(224,244,246,.42) !important; }
.mail-scout-status { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
.mail-scout-status > div { display: grid; gap: 3px; border: 1px solid rgba(72,224,238,.25); padding: 6px; background: rgba(20,107,116,.09); }
.mail-scout-status span { color: rgba(223,246,249,.58); font-size: 7px; }
.mail-scout-status strong { color: #8ff8ff; font-size: 9px; }
.mail-scout-status .detected { border-color: rgba(255,86,101,.45); background: rgba(122,22,32,.18); }
.mail-scout-status .detected strong { color: #ff9da7; }
.mail-scout-status .safe strong { color: #74edaa; }
.mail-scout-next { margin: 0; border-left: 2px solid #ffc45d; padding: 6px 7px; background: rgba(106,64,8,.16); color: #ffe1a1; font-size: 8px; line-height: 1.45; }
.mail-scout-next.complete { border-left-color: #63e8a6; color: #9dffcb; }

@media (max-width: 390px) {
  .fleet-ship-row { grid-template-columns: 64px minmax(0,1fr) 68px; }
  .fleet-ship-row img { width: 64px; }
  .fleet-task-card { grid-template-columns: 92px minmax(0,1fr); }
  .fleet-task-card img { width: 92px; }
}

/* Star-map mode is a self-contained viewport: tabs, coordinates, map and zoom stay in one screen. */
body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .galaxy-screen {
  display: block;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: auto;
  touch-action: pan-y;
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .galaxy-header {
  display: none;
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .galaxy-tabs,
body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .galaxy-coordinate-strip {
  min-height: 0;
  flex: none;
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .star-map-tab {
  display: block;
  min-width: 0;
  min-height: 0;
  height: auto;
  overflow: visible;
  padding-top: 4px;
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .star-map-shell {
  grid-template-rows: auto auto auto;
  min-height: 0;
  height: auto;
  gap: 4px;
  padding: 5px;
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .solar-orbit-map {
  grid-template-rows: auto auto auto;
  min-height: 0;
  height: auto;
  gap: 3px;
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .solar-system-map-viewport {
  min-height: 360px;
  height: min(48vh, 430px);
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .galaxy-constellation-map {
  min-height: 330px;
  height: min(46vh, 410px);
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .star-map-head {
  min-height: 34px;
  padding-bottom: 3px;
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .star-map-zoom-control > button {
  min-height: 30px;
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .solar-orbit-map:has(.star-map-selected-focus) .solar-system-map-viewport {
  min-height: 292px;
  height: min(36vh, 320px);
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .solar-orbit-map:has(.star-map-selected-focus) .star-map-selection {
  display: none;
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .star-map-command-dock.has-target {
  gap: 4px;
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .star-map-command-dock.has-target .planet-action-bar {
  padding: 5px 7px;
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .star-map-command-dock.has-target .planet-action-btn {
  min-height: 38px;
}

/* Account gateway + deployable server directory.
   One launch image establishes the world; authentication and node selection stay quiet and operational. */
body[data-active-screen="login"] .app-screen[data-screen="login"] {
  position: absolute;
  padding: 0;
  overflow: hidden;
  background: #020711;
}

.launch-splash {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  place-content: center;
  justify-items: center;
  gap: 9px;
  padding: 34px;
  background:
    linear-gradient(180deg, rgba(0, 3, 11, .12), rgba(0, 5, 13, .35) 48%, rgba(0, 3, 10, .88)),
    radial-gradient(circle at 50% 43%, rgba(67, 218, 226, .14), transparent 34%),
    url("./assets/optimized/space-bg.webp") 42% center / cover no-repeat;
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease, visibility 0s linear .35s;
}

.launch-splash::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(117, 237, 240, .15);
  box-shadow: inset 0 0 56px rgba(0, 4, 13, .58);
  pointer-events: none;
}

.launch-scan {
  position: absolute;
  left: 9%;
  right: 9%;
  top: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(123, 246, 249, .64), transparent);
  box-shadow: 0 0 12px rgba(95, 234, 240, .42);
  animation: launch-scan-pass 1.2s ease-in-out both;
}

.launch-emblem {
  position: relative;
  display: grid;
  width: 100px;
  height: 100px;
  place-items: center;
  border: 1px solid rgba(114, 239, 242, .34);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(15, 75, 91, .34), rgba(1, 9, 18, .7) 68%);
  box-shadow: 0 0 30px rgba(67, 219, 226, .26), inset 0 0 24px rgba(89, 233, 239, .12);
}

.launch-emblem::before {
  content: "";
  position: absolute;
  inset: -9px;
  border: 1px dashed rgba(137, 245, 247, .32);
  border-radius: 50%;
  animation: server-beacon-spin 14s linear infinite;
}

.launch-emblem img { width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(0 0 14px rgba(92, 239, 244, .44)); }
.launch-splash h2 { margin: 7px 0 0; color: #f8ffff; font: 900 29px/1 var(--font-display); letter-spacing: .22em; text-indent: .22em; text-shadow: 0 0 18px rgba(102, 238, 243, .34); }
.launch-splash p { margin: 0; color: rgba(176, 231, 235, .68); font: 800 8px/1 var(--font-data); letter-spacing: .2em; }
.launch-splash small { color: rgba(218, 245, 247, .68); font: 700 8px/1 var(--font-body); letter-spacing: .08em; }

.launch-progress {
  width: 174px;
  height: 3px;
  margin: 12px 0 1px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(136, 224, 229, .12);
  box-shadow: 0 0 0 1px rgba(131, 231, 235, .1);
}

.launch-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
  background: linear-gradient(90deg, #188f9c, #72f1f2 70%, #e7ffff);
  box-shadow: 0 0 10px rgba(103, 241, 244, .7);
  animation: launch-progress-fill 1.2s cubic-bezier(.22, .7, .2, 1) both;
}

body[data-login-phase="ready"] .launch-splash { opacity: 0; visibility: hidden; pointer-events: none; }

.login-stage {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: center;
  gap: 18px;
  padding: 38px 24px 68px;
  background:
    linear-gradient(180deg, rgba(0, 5, 12, .42), rgba(0, 6, 14, .78)),
    radial-gradient(circle at 50% 38%, rgba(34, 151, 169, .12), transparent 34%),
    url("./assets/optimized/space-bg.webp") 42% center / cover no-repeat;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.012);
  transition: opacity .32s ease, transform .32s ease, visibility 0s linear .32s;
}

body[data-login-phase="ready"] .login-stage { opacity: 1; visibility: visible; transform: none; }

body[data-active-screen="login"] .login-stage .brand-lockup { width: 100%; margin: 0; }
body[data-active-screen="login"] .login-stage .app-mark { width: 74px; height: 74px; margin-bottom: 7px; border-radius: 20px; }
body[data-active-screen="login"] .login-stage .brand-title { min-height: 34px; margin: 0; gap: 5px; font-size: 23px; letter-spacing: .12em; }
body[data-active-screen="login"] .login-stage .title-char { min-width: 24px; }
body[data-active-screen="login"] .login-stage .title-planet { width: 20px; height: 20px; }
body[data-active-screen="login"] .login-stage .title-planet::before { width: 36px; height: 11px; border-width: 1px; }
body[data-active-screen="login"] .login-stage .title-planet::after { display: none; }
body[data-active-screen="login"] .login-stage .brand-lockup p { margin-top: 3px; font-size: 9px; letter-spacing: .12em; }

body[data-active-screen="login"] .login-stage .login-panel {
  width: min(100%, 302px);
  margin: 0;
  border: 1px solid rgba(92, 219, 222, .34);
  border-radius: 9px;
  padding: 15px;
  background: linear-gradient(180deg, rgba(5, 22, 29, .78), rgba(2, 10, 17, .9));
  box-shadow: 0 14px 34px rgba(0, 0, 0, .42), inset 0 1px rgba(218, 253, 255, .04);
  backdrop-filter: blur(10px);
}

body[data-active-screen="login"] .login-stage .panel-title { min-height: 32px; margin-bottom: 11px; border-radius: 5px; background: rgba(4, 18, 24, .74); }
body[data-active-screen="login"] .login-stage .login-symbol { width: 24px; height: 24px; }
body[data-active-screen="login"] .login-stage .field { gap: 4px; margin-bottom: 9px; }
body[data-active-screen="login"] .login-stage .field span { font-size: 9px; letter-spacing: .04em; }
body[data-active-screen="login"] .login-stage .field input { height: 40px; border-radius: 5px; background: rgba(232, 244, 245, .94); font-size: 13px; }
body[data-active-screen="login"] .login-stage .primary-action { min-height: 40px; border-radius: 5px; font-size: 12px; }
body[data-active-screen="login"] .login-stage .inline-actions { margin-top: 10px; font-size: 9px; }

.login-form-status,
.account-request-status {
  min-height: 15px;
  margin: 0 0 7px;
  color: rgba(182, 218, 221, .66);
  font: 700 8px/1.3 var(--font-body);
  text-align: center;
}

.login-form-status[data-state="loading"], .account-request-status[data-state="loading"] { color: #75e8eb; }
.login-form-status[data-state="success"], .account-request-status[data-state="success"] { color: #74e6b2; }
.login-form-status[data-state="error"], .account-request-status[data-state="error"] { color: #ff8b80; }

body[data-active-screen="login"] .login-stage .music-strip { left: 50%; bottom: 18px; margin: 0; transform: translateX(-50%); }
body[data-active-screen="login"] .server-bridge-badge,
body[data-active-screen="recover"] .server-bridge-badge { display: none; }

@keyframes launch-progress-fill { to { transform: translateX(0); } }
@keyframes launch-scan-pass { 0% { top: 17%; opacity: 0; } 18% { opacity: .64; } 82% { opacity: .34; } 100% { top: 78%; opacity: 0; } }
@keyframes audio-unlock-pulse { 50% { border-color: rgba(255, 221, 145, .96); box-shadow: 0 0 24px rgba(255, 204, 107, .28); } }

.account-request-overlay {
  position: absolute;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 4, 11, .78);
  backdrop-filter: blur(8px);
}

.account-request-overlay[hidden] { display: none; }
.account-request-card { width: min(100%, 318px); border: 1px solid rgba(87, 222, 225, .4); border-radius: 9px; padding: 15px; background: linear-gradient(180deg, rgba(6, 25, 32, .97), rgba(2, 10, 17, .98)); box-shadow: 0 20px 42px rgba(0, 0, 0, .58); }
.account-request-card header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; border-bottom: 1px solid rgba(88, 211, 216, .17); padding-bottom: 10px; }
.account-request-card header div { display: grid; gap: 4px; }
.account-request-card header span { color: rgba(113, 224, 227, .54); font: 800 7px/1 var(--font-data); letter-spacing: .16em; }
.account-request-card header strong { color: #f1ffff; font: 850 16px/1 var(--font-display); }
.account-request-card header button { width: 30px; height: 30px; border: 1px solid rgba(103, 227, 230, .22); border-radius: 6px; background: rgba(8, 31, 38, .68); color: #e9ffff; font-size: 18px; }
.account-request-card .field { gap: 4px; margin-bottom: 9px; }
.account-request-card .field input { height: 39px; border-radius: 5px; font-size: 12px; }
.account-request-card .primary-action { min-height: 41px; border-radius: 5px; font-size: 12px; }

.server-screen {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 0 92px;
  touch-action: pan-y;
}

.server-screen::-webkit-scrollbar { width: 0; }
.server-catalog-intro { display: grid; gap: 5px; margin: 24px 18px 0; border-left: 2px solid rgba(75, 225, 230, .62); padding: 4px 0 4px 12px; }
.server-catalog-intro span { color: rgba(92, 219, 224, .58); font: 800 7px/1 var(--font-data); letter-spacing: .18em; }
.server-catalog-intro strong { color: #f2feff; font: 850 18px/1.1 var(--font-display); }
.server-catalog-intro p { margin: 0; color: rgba(198, 231, 234, .62); font: 700 8px/1.45 var(--font-body); }

.server-catalog-state { min-height: 17px; margin: 13px 18px 0; color: rgba(170, 211, 214, .68); font: 750 8px/1.2 var(--font-body); text-align: right; }
.server-catalog-state[data-state="online"] { color: #79e7ba; }
.server-catalog-state[data-state="loading"] { color: #78e5e9; }
.server-catalog-state[data-state="error"] { color: #ff8a80; }

.server-screen .server-list { display: grid; gap: 9px; margin: 4px 14px 0; padding: 0; }
.server-screen .server-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 42px;
  gap: 10px;
  align-items: center;
  min-height: 104px;
  border: 1px solid rgba(83, 206, 214, .22);
  border-radius: 8px;
  padding: 10px;
  overflow: hidden;
  background: linear-gradient(110deg, rgba(7, 29, 38, .82), rgba(2, 11, 20, .88));
  box-shadow: inset 0 1px rgba(222, 253, 255, .035), 0 7px 18px rgba(0, 0, 0, .24);
  backdrop-filter: blur(7px);
}

.server-screen .server-card::after { display: none; }
.server-screen .server-card.active { border-color: rgba(82, 225, 230, .48); background: linear-gradient(110deg, rgba(12, 65, 75, .72), rgba(3, 15, 26, .9)); }
.server-screen .server-card.status-busy { border-color: rgba(227, 169, 60, .3); }
.server-screen .server-card.status-new { border-color: rgba(117, 223, 165, .34); }
.server-screen .server-card.is-connecting { filter: brightness(1.24); }
.server-screen .server-card:disabled { opacity: .46; }

.server-screen .server-beacon { width: 48px; height: 48px; border-width: 1px; }
.server-screen .server-beacon::before { inset: 5px; border-width: 1px; }
.server-screen .server-beacon::after { width: 23px; height: 23px; font-size: 13px; }
.server-screen .server-beacon i { width: 6px; height: 6px; }
.server-screen .server-node-copy { min-height: 78px; align-content: center; }
.server-node-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.server-screen .server-node-title strong { min-width: 0; font-size: 15px; }
.server-node-title b { flex: none; border: 1px solid rgba(110, 235, 223, .32); border-radius: 999px; padding: 2px 4px; color: #75e8c0; font: 800 6px/1 var(--font-body); }
.server-screen .server-node-copy em { margin-top: 5px; color: rgba(220, 235, 236, .65); font-size: 8px; letter-spacing: .03em; }
.server-services { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 7px; }
.server-services span { border: 1px solid rgba(94, 201, 208, .16); border-radius: 3px; padding: 2px 4px; background: rgba(9, 35, 43, .46); color: rgba(177, 223, 226, .7); font: 700 6px/1 var(--font-body); }
.server-enter { display: grid; justify-items: center; gap: 2px; color: rgba(114, 224, 229, .72); font: 800 7px/1 var(--font-body); }
.server-enter b { color: #e8ffff; font: 300 22px/1 var(--font-body); }
.server-list-loading, .server-list-empty { display: grid; min-height: 120px; place-items: center; align-content: center; gap: 9px; border: 1px dashed rgba(91, 210, 216, .18); color: rgba(183, 221, 223, .62); font-size: 9px; }
.server-list-loading i { width: 20px; height: 20px; border: 2px solid rgba(97, 225, 230, .18); border-top-color: #64dfe4; border-radius: 50%; animation: server-beacon-spin 1s linear infinite; }
.server-screen .server-note { margin: 12px 18px 0; color: rgba(170, 208, 211, .5); font-size: 7px; line-height: 1.5; }
.server-screen .server-note b { color: rgba(109, 221, 225, .7); font-family: var(--font-data); }

@media (prefers-reduced-motion: reduce) {
  .launch-scan,
  .launch-emblem::before,
  .launch-progress span,
  .server-list-loading i { animation: none; }
}

/* 调度中心：每个舰船/防御设施是一条独立的单星调度通道。 */
.dispatch-overview {
  display: block;
  margin: 8px;
  border: 1px solid rgba(255, 178, 48, 0.38);
  padding: 0;
  box-shadow: inset 0 0 24px rgba(255, 151, 28, 0.04);
}

.dispatch-overview > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 37px;
  padding: 6px 9px;
  color: #f8ffff;
  cursor: pointer;
  list-style: none;
}

.dispatch-overview > summary::-webkit-details-marker {
  display: none;
}

.dispatch-overview > summary > span {
  display: flex;
  align-items: baseline;
  min-width: 0;
  gap: 7px;
}

.dispatch-overview > summary b {
  color: #ffc24b;
  font-size: 10px;
}

.dispatch-overview > summary small {
  overflow: hidden;
  color: rgba(235, 249, 250, 0.7);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatch-overview > summary > em {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 6px;
  color: rgba(255, 220, 147, 0.78);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.dispatch-overview > summary > em::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1px solid #ffc24b;
  border-bottom: 1px solid #ffc24b;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 160ms ease;
}

.dispatch-overview[open] > summary {
  border-bottom: 1px solid rgba(255, 184, 58, 0.18);
}

.dispatch-overview[open] > summary > em::after {
  transform: rotate(225deg) translate(-1px, -1px);
}

.dispatch-overview-body {
  display: grid;
  gap: 5px;
  padding: 6px 8px 8px;
}

.dispatch-overview-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.dispatch-overview-metrics > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 1px 6px;
  border-left: 2px solid rgba(255, 184, 58, 0.64);
  border-radius: var(--ui-radius-xs, 4px);
  padding: 5px 7px;
  background: rgba(99, 63, 8, 0.16);
}

.dispatch-overview-metrics span {
  color: rgba(235, 239, 222, 0.7);
  font-size: 8px;
  font-weight: 800;
}

.dispatch-overview-metrics strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: #fff4d1;
  font-family: var(--font-data);
  font-size: 15px;
}

.dispatch-overview-metrics em {
  color: rgba(255, 213, 124, 0.72);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.dispatch-overview > header span,
.dispatch-channel-panel > header span {
  color: #ffc24b;
}

.dispatch-rule-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  border-left: 2px solid #ffb230;
  padding: 4px 7px;
  background: linear-gradient(90deg, rgba(135, 76, 8, 0.26), rgba(19, 44, 49, 0.08));
  color: #ffe1a5;
  font-size: 8px;
  font-weight: 800;
  line-height: 1.3;
}

.dispatch-rule-note b {
  flex: 0 0 auto;
  color: #ffc24b;
  font-size: 8px;
}

.dispatch-rule-note span {
  min-width: 0;
  color: rgba(255, 239, 201, 0.74);
}

@media (prefers-reduced-motion: reduce) {
  .dispatch-overview > summary > em::after { transition: none; }
}

.dispatch-channel-panel {
  border-top-color: rgba(255, 178, 48, 0.72);
  background:
    linear-gradient(180deg, rgba(21, 18, 9, 0.96), rgba(2, 10, 13, 0.99)),
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(255, 178, 48, 0.025) 24px 25px);
}

/* A running unit-dispatch upgrade must read as live work, even before the card is expanded. */
.game-item-card.is-dispatch-upgrading {
  border-color: rgba(255, 190, 76, .82);
  box-shadow: inset 0 0 24px rgba(255, 173, 49, .07), 0 0 16px rgba(255, 173, 49, .16);
}

.game-item-card.is-dispatch-upgrading .game-item-card-cover img {
  filter: saturate(1.08) contrast(1.09) brightness(.98);
}

.game-item-card.is-dispatch-upgrading .game-item-cover-shade {
  background:
    linear-gradient(180deg, rgba(3, 13, 17, .08) 20%, rgba(17, 12, 3, .26) 58%, rgba(8, 8, 4, .96) 100%),
    linear-gradient(90deg, rgba(0, 28, 34, .55), transparent 52%);
}

.game-item-card.is-dispatch-upgrading .game-item-card-cover::after {
  content: "调度链路同步中";
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 3;
  padding: 4px 8px;
  color: #fff0b7;
  background: linear-gradient(90deg, rgba(111, 66, 8, .92), rgba(27, 29, 18, .82));
  border: 1px solid rgba(255, 194, 75, .68);
  border-radius: 5px;
  box-shadow: 0 0 12px rgba(255, 173, 49, .18);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
}

.game-item-card.is-dispatch-upgrading .game-item-lock-state.ready {
  color: #fff1b8;
  border-color: rgba(255, 194, 75, .76);
  background: rgba(75, 44, 5, .9);
}

.dispatch-level-rail {
  display: grid;
  grid-template-columns: auto minmax(32px, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 184, 58, 0.24);
  padding: 6px 8px;
  background: rgba(69, 44, 8, 0.22);
  font-family: var(--font-data);
}

.dispatch-level-rail span,
.dispatch-level-rail strong {
  color: #f4ffff;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.dispatch-level-rail strong {
  color: #ffcd5d;
}

.dispatch-level-rail i {
  position: relative;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 184, 58, 0.28), #ffc24b);
}

.dispatch-level-rail i::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -1px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #ffc24b;
  border-right: 2px solid #ffc24b;
  transform: translateY(-50%) rotate(45deg);
}

.dispatch-stat-grid > div {
  border-left-color: rgba(255, 184, 58, 0.66);
  background: rgba(99, 63, 8, 0.16);
}

.dispatch-stat-grid strong {
  font-size: 12px;
}

.dispatch-upgrade-btn {
  border-color: rgba(255, 199, 82, 0.76);
  background: linear-gradient(180deg, #c87810, #683407);
  color: #fff6d5;
  box-shadow: inset 0 0 0 1px rgba(255, 226, 151, 0.22), 0 0 13px rgba(255, 151, 28, 0.18);
}

.dispatch-upgrade-btn:disabled {
  border-color: rgba(154, 164, 166, 0.28);
  background: linear-gradient(180deg, #3a4142, #1d2223);
  color: rgba(225, 230, 231, 0.54);
  box-shadow: none;
}

/* Alien-system gates are navigation nodes, never planets or fleet targets. */
.galaxy-portal-return {
  grid-column: 1 / -1;
  min-height: 27px;
  border: 1px solid rgba(123, 204, 255, 0.48);
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(31, 61, 108, 0.92), rgba(79, 28, 92, 0.86), rgba(31, 61, 108, 0.92));
  color: #eaf8ff;
  font-family: inherit;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.galaxy-portal-return[hidden] { display: none; }

.galaxy-row.is-system-portal {
  border-color: color-mix(in srgb, var(--portal-color, #8fc8ff), transparent 40%);
  background:
    linear-gradient(90deg, rgba(25, 16, 56, 0.88), rgba(8, 30, 50, 0.84), rgba(25, 16, 56, 0.88)),
    rgba(0, 0, 0, 0.72);
  box-shadow: inset 0 0 18px rgba(137, 106, 255, 0.1);
}

.galaxy-row.is-system-portal:hover,
.galaxy-row.is-system-portal:focus-visible {
  border-color: #d28dff;
  box-shadow: 0 0 15px rgba(168, 93, 255, 0.32), inset 0 0 18px rgba(82, 179, 255, 0.12);
}

.galaxy-row.is-system-portal .galaxy-planet-name strong { color: #f2d8ff; }
.galaxy-row.is-system-portal .galaxy-planet-name em { color: #92dfff; }

.planet-avatar.is-special-alien img,
.orbit-planet-node.is-alien:not(.is-system-portal) img {
  filter: hue-rotate(var(--planet-hue, 0deg)) saturate(1.2) contrast(1.06);
}

.planet-avatar.is-system-portal img,
.orbit-planet-node.is-system-portal img {
  border-color: color-mix(in srgb, var(--planet-glow, var(--planet-color, #9bcfff)), white 18%);
  box-shadow: 0 0 12px color-mix(in srgb, var(--planet-glow, var(--planet-color, #9bcfff)), transparent 28%);
  animation: alien-gate-spin 9s linear infinite;
}

.orbit-planet-node.is-system-portal { z-index: 7; }
.orbit-planet-node.is-alien-portal img { --planet-color: #ff4f96; }
.orbit-planet-node.is-dark-alien-portal img { --planet-color: #6fbaff; }
.orbit-planet-node.is-system-portal .orbit-node-label strong { color: #dff5ff; }
.orbit-planet-node.is-system-portal .orbit-node-label em { color: #d69cff; }

.orbit-planet-node.is-alien img {
  border-color: color-mix(in srgb, var(--planet-color, #b15cff), white 14%);
  box-shadow: 0 0 13px color-mix(in srgb, var(--planet-color, #b15cff), transparent 28%);
}

.orbit-planet-node.is-dark-alien img {
  box-shadow: 0 0 14px color-mix(in srgb, var(--planet-color, #6fbaff), transparent 20%), 0 0 23px rgba(91, 76, 255, 0.22);
}

.alien-sparks {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 2px;
  height: 2px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.alien-sparks::before,
.alien-sparks::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff6d1;
  box-shadow:
    8px -8px 0 -0.3px var(--planet-glow, var(--planet-color, #ffae62)),
    -9px -3px 0 -0.6px #fff3a6,
    6px 9px 0 -0.5px var(--planet-glow, var(--planet-color, #ff7b51)),
    -6px 8px 0 -0.7px #ffcf6a;
  animation: alien-spark-burst 2.15s ease-out infinite;
  animation-delay: var(--spark-delay, 0s);
}

.alien-sparks::after {
  box-shadow:
    11px 1px 0 -0.5px #fff6c8,
    -4px -11px 0 -0.4px var(--planet-glow, var(--planet-color, #ff8c58)),
    -11px 5px 0 -0.7px #ffcb65;
  animation-delay: calc(var(--spark-delay, 0s) - 1.07s);
}

.alien-buff-preview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 7px;
  border: 1px solid rgba(255, 193, 83, 0.32);
  padding: 6px 7px;
  background: linear-gradient(90deg, rgba(85, 49, 7, 0.28), rgba(55, 20, 76, 0.26));
}

.alien-buff-preview > span {
  grid-row: 1 / span 2;
  align-self: center;
  color: #ffc55b;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.alien-buff-preview > strong { color: #fff1c4; font-size: 9px; }
.alien-buff-preview > em { color: #99eaff; font-size: 7px; font-style: normal; font-weight: 900; }
.alien-buff-preview > p { grid-column: 1 / -1; margin: 2px 0 0; color: rgba(238, 250, 252, 0.62); font-size: 7px; line-height: 1.45; }

@keyframes alien-gate-spin {
  to { transform: rotate(360deg); }
}

@keyframes alien-spark-burst {
  0% { opacity: 0; transform: scale(0.45) rotate(0deg); }
  18% { opacity: 1; }
  76% { opacity: 0.86; }
  100% { opacity: 0; transform: scale(1.48) rotate(42deg); }
}

@media (prefers-reduced-motion: reduce) {
  .planet-avatar.is-system-portal img,
  .orbit-planet-node.is-system-portal img,
  .alien-sparks::before,
  .alien-sparks::after { animation: none; }
}

/* Global cohesion pass: shared radius, border weight and readable metadata.
   These overrides are visual only; layout hooks and interaction selectors stay unchanged. */
:root {
  --ui-radius-xs: 4px;
  --ui-radius-sm: 7px;
  --ui-radius-md: 10px;
  --ui-line-soft: rgba(86, 218, 229, .24);
  --ui-line-strong: rgba(86, 224, 235, .48);
  --ui-text-main: #effcfd;
  --ui-text-muted: rgba(218, 239, 242, .7);
}

.build-screen-head,
.game-item-card,
.game-item-card-cover,
.game-item-status-panel,
.game-item-detail-panel,
.game-item-category-tabs,
.quantity-production-control,
.special-center-summary,
.blueprint-card,
.dispatch-channel-panel,
.acceleration-sheet,
.mail-battle-report,
.mail-battle-detail,
.galaxy-selected-intel,
.alien-buff-preview {
  border-radius: var(--ui-radius-sm);
}

.game-item-card,
.blueprint-card { overflow: hidden; border: 1px solid var(--ui-line-soft); }
.game-item-card.active { border-color: var(--ui-line-strong); }
.game-item-status-panel,
.game-item-detail-panel { border: 1px solid rgba(79, 219, 230, .22); }
.game-item-status-panel { margin: 7px; }
.game-item-detail-panel { margin: 0 7px 7px; }
.game-item-card-cover { border-radius: var(--ui-radius-sm) var(--ui-radius-sm) 0 0; }
.game-item-overlay-buttons { margin-inline: 7px; border-radius: var(--ui-radius-xs); }
.game-item-overlay-btn,
.production-action-btn,
.special-building-entry,
.building-downgrade-btn,
.blueprint-actions button,
.item-requirement-node,
.game-item-detail-panel [data-overlay-close],
.game-item-category-tabs button,
.qty-row button,
.qty-row input[type="number"],
.acceleration-sheet button,
.mail-battle-detail-toggle,
.galaxy-portal-return {
  border-radius: var(--ui-radius-xs);
}

.item-stat-grid > div,
.item-cost-panel li,
.game-item-detail-panel dl div,
.dispatch-level-rail,
.item-action-reason,
.item-capacity-meta,
.alien-buff-preview { border-radius: var(--ui-radius-xs); }
.item-stat-grid > div { border-left-width: 2px; padding: 7px 8px; }
.item-cost-panel li { padding: 7px 8px; }
.quantity-production-control { padding: 9px; }
.usage-progress-track,
.resource-capacity-track,
.qty-slider { overflow: hidden; border-radius: 999px; }
.qty-slider::-webkit-slider-thumb { border-radius: 50%; }

.game-item-badge-name { right: 84px; font-size: 13px; line-height: 1.3; text-wrap: balance; }
.game-item-card-summary { right: 86px; color: rgba(235, 250, 252, .74); font-size: 10px; }
.game-item-status-panel > header strong { min-width: 0; font-size: 13px; overflow-wrap: anywhere; white-space: normal; text-align: right; }
.item-stat-grid span,
.item-capacity-meta span,
.item-cost-panel li,
.item-time-row > span,
.game-item-detail-panel dt,
.item-requirement-node span,
.item-requirement-node em,
.item-requirement-node b,
.blueprint-card > div > p,
.blueprint-probability > span { font-size: 9px; }
.item-cost-panel li em,
.blueprint-probability > b { font-size: 9px; line-height: 1.45; }
.item-effect,
.item-action-reason,
.game-item-detail-panel > p { color: var(--ui-text-muted); font-size: 10px; line-height: 1.55; overflow-wrap: anywhere; }
.game-item-detail-panel dd { font-size: 10px; overflow-wrap: anywhere; }
.item-requirement-node { min-height: 44px; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 4px 7px; padding: 8px; }
.item-requirement-node strong { font-size: 11px; overflow-wrap: anywhere; }
.technology-requirements-complete {
  margin: 2px 0 8px;
  border: 1px solid rgba(83, 211, 224, .24);
  border-radius: var(--ui-radius-sm);
  background: linear-gradient(145deg, rgba(7, 25, 31, .9), rgba(2, 12, 17, .96));
  overflow: hidden;
}
.technology-requirements-complete > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  color: #eaffff;
  cursor: pointer;
  list-style: none;
  touch-action: manipulation;
}
.technology-requirements-complete > summary::-webkit-details-marker { display: none; }
.technology-requirements-complete > summary::after {
  content: "＋";
  flex: 0 0 auto;
  color: #74e8ef;
  font-size: 14px;
  transition: transform .18s ease;
}
.technology-requirements-complete[open] > summary::after { transform: rotate(45deg); }
.technology-requirements-complete > summary span { min-width: 0; font-size: 11px; font-weight: 700; }
.technology-requirements-complete > summary strong { flex: 0 0 auto; color: #55e4a0; font-size: 9px; }
.technology-requirements-complete.has-missing > summary strong { color: #ffb655; }
.technology-requirements-complete > div {
  display: grid;
  gap: 6px;
  padding: 0 8px 8px;
}
.technology-requirements-complete .item-requirement-node {
  width: 100%;
  color: inherit;
  cursor: default;
  opacity: 1;
}
.unlock-missing-panel {
  display: grid;
  gap: 7px;
  margin: 7px;
  padding: 10px;
  border: 1px solid rgba(255, 174, 76, .34);
  border-radius: var(--ui-radius-sm);
  background: linear-gradient(145deg, rgba(38, 24, 10, .78), rgba(8, 17, 22, .94));
}
.unlock-missing-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #fff3da;
  font-size: 11px;
  font-weight: 700;
}
.unlock-missing-panel > header strong { color: #ffbd62; font-size: 9px; }
.unlock-missing-panel > p {
  margin: 0;
  color: rgba(238, 244, 245, .66);
  font-size: 9px;
  line-height: 1.5;
}
.unlock-missing-panel .item-requirement-node { width: 100%; }
.production-restriction-notice { border-color: rgba(255, 114, 128, .3); }
.item-operation-intro {
  margin: -1px 0 0;
  color: rgba(218, 235, 238, .68);
  font-size: 9px;
  line-height: 1.5;
  text-wrap: pretty;
}
.game-item-expanded[data-detail-view="INFO"] .game-item-detail-panel,
.game-item-expanded[data-detail-view="TECH_TREE"] .game-item-detail-panel {
  min-height: 0;
  border-top-color: rgba(99, 231, 239, .42);
}
.game-item-expanded[data-detail-view="TECH_TREE"] .game-item-detail-panel {
  background: linear-gradient(180deg, rgba(5, 22, 27, .98), rgba(2, 10, 14, .99));
}
.game-item-expanded[data-detail-view="TECH_TREE"] .item-requirement-node,
.unlock-missing-panel .item-requirement-node {
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.game-item-expanded[data-detail-view="TECH_TREE"] .item-requirement-node:not(:disabled):active,
.unlock-missing-panel .item-requirement-node:not(:disabled):active { transform: translateY(1px) scale(.995); }
.item-stat-grid.item-stat-grid-compact { grid-template-columns: minmax(0, 1fr); }
.game-item-category-tabs { gap: 1px; padding: 3px; }
.game-item-category-tabs button { min-height: 42px; border: 0; font-size: 10px; }
.production-action-btn,
.special-building-entry,
.building-downgrade-btn { min-height: 44px; }

.acceleration-sheet > header span,
.acceleration-target > span,
.acceleration-target em,
.acceleration-item-list > header span,
.acceleration-item-list > button em,
.acceleration-item-list > p,
.acceleration-gem em,
.acceleration-rule,
.mail-battle-report > header span,
.mail-battle-compare span,
.mail-battle-report dt,
.mail-buff-award span,
.mail-buff-award em,
.mail-battle-detail-toggle em,
.mail-battle-detail > header span,
.mail-battle-detail.legacy p,
.mail-battle-roster span,
.mail-round-list > article > header span,
.mail-round-loss > strong,
.mail-round-loss > div > span,
.mail-round-loss small,
.mail-scout-status span,
.mail-scout-next,
.alien-buff-preview > span,
.alien-buff-preview > em,
.alien-buff-preview > p { font-size: 9px; }
.mail-battle-detail.legacy p,
.mail-round-loss > div > span,
.mail-scout-next,
.alien-buff-preview > p { line-height: 1.55; }

.build-screen button:focus-visible,
.utility-screen button:focus-visible,
.game-item-card-cover:focus-visible {
  outline: 2px solid #7df6ff;
  outline-offset: 2px;
}

@media (max-width: 390px) {
  .build-screen { padding-inline: 6px; }
  .building-list, .system-list, .game-item-card-list { gap: 9px; }
  .game-item-card { border-radius: 8px; }
  .game-item-status-panel { margin: 6px; padding-inline: 8px; }
  .game-item-detail-panel { margin: 0 6px 6px; padding: 9px 8px; }
  .game-item-badge-name { right: 78px; font-size: 12px; }
}

/* Precision material pass: quieter metal edges and a fuller resource readout.
   Existing artwork, ambient effects and state colors remain unchanged. */
:root {
  --ui-line-soft: rgba(121, 184, 191, .22);
  --ui-line-strong: rgba(104, 222, 230, .46);
  --ui-text-main: #f1fbfc;
  --ui-text-muted: rgba(211, 231, 234, .7);
}

.global-hud-resources {
  min-height: 75px;
  border-bottom-color: rgba(124, 190, 196, .26);
  padding: 5px 3px 1px;
  background:
    radial-gradient(circle at 50% -55%, rgba(99, 178, 186, .13), transparent 68%),
    linear-gradient(180deg, rgba(17, 30, 35, .99), rgba(4, 11, 14, .985)),
    rgba(5, 12, 15, .94);
  box-shadow: 0 7px 20px rgba(0, 0, 0, .34), inset 0 1px rgba(229, 250, 252, .05), inset 0 -1px rgba(112, 206, 213, .13);
}
.global-hud-resources .resource-item {
  position: relative;
  align-content: end;
  align-items: end;
  height: 66px;
  grid-template-rows: 37px 28px;
  gap: 0;
  border-right: 1px solid rgba(132, 188, 193, .1);
  padding: 0 1px;
  background: linear-gradient(180deg, rgba(148, 220, 225, .045), transparent 62%);
}
.global-hud-resources .resource-name-row {
  align-self: end;
  height: 36px;
  gap: 2px;
}
.global-hud-resources .res-icon {
  flex: 0 0 31px;
  width: 31px;
  height: 29px;
  border-color: rgba(137, 215, 221, .3);
  background-size: 94% 94%;
  box-shadow: inset 0 0 10px rgba(135, 225, 232, .055), 0 1px 0 rgba(233, 252, 253, .05);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .58)) drop-shadow(0 0 6px currentColor);
}
.global-hud-resources .resource-item small {
  color: rgba(220, 237, 240, .7);
  font-size: 8px;
  font-weight: 750;
}
.global-hud-resources .resource-item strong {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  align-self: end;
  width: 100%;
  height: 28px;
  padding: 0;
  background: linear-gradient(180deg, #ffffff 0%, #e5fbfc 30%, #91bec3 69%, #e4fbfc 100%);
  background-clip: text;
  color: transparent;
  font-family: "Bahnschrift SemiCondensed", "Bahnschrift Condensed", var(--font-data);
  font-size: clamp(15px, 3.6vw, 17px);
  font-weight: 900;
  font-stretch: condensed;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.015em;
  line-height: 1;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: .18px rgba(227, 253, 255, .34);
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .82)) drop-shadow(0 0 5px rgba(116, 213, 220, .24));
  text-shadow: none;
}
.global-hud-resources .resource-item.short-resource strong {
  background-image: linear-gradient(180deg, #fff4f1 5%, #ffb4ae 52%, #cc625c 100%);
}
.global-hud-resources .hud-back-button { height: 62px; border-right-color: rgba(121, 184, 191, .18); }
.global-hud-resources .add-resource { height: 48px; border-color: rgba(184, 144, 72, .26); box-shadow: inset 0 1px rgba(255, 235, 194, .05); }

.game-item-card,
.game-item-status-panel,
.game-item-detail-panel,
.game-item-category-tabs,
.quantity-production-control,
.special-center-summary,
.blueprint-card,
.dispatch-channel-panel,
.acceleration-sheet,
.mail-battle-report,
.mail-battle-detail,
.galaxy-selected-intel,
.alien-buff-preview {
  border-color: var(--ui-line-soft);
  box-shadow: inset 0 1px rgba(232, 250, 252, .035), 0 7px 19px rgba(0, 0, 0, .2);
}
.game-item-card.active,
.game-item-overlay-btn.active,
.game-item-category-tabs button.active { border-color: var(--ui-line-strong); }

@media (max-width: 390px) {
  .global-hud-resources { grid-template-columns: 28px repeat(5, minmax(0, 1fr)) 24px; padding-inline: 2px; }
  .global-hud-resources .resource-item { padding-inline: 0; }
  .global-hud-resources .resource-item small { font-size: 7.5px; }
  .global-hud-resources .res-icon { flex-basis: 30px; width: 30px; height: 28px; }
  .global-hud-resources .resource-item strong { font-size: 15px; }
}

/* Server atlas + module atmosphere pass.
   The orbital beacon is the only animated signature; the rest of the chrome stays quiet. */
.server-screen {
  gap: 0;
  padding: 0 0 92px;
  background:
    linear-gradient(180deg, rgba(0, 4, 13, .5), rgba(1, 6, 18, .74) 42%, rgba(0, 3, 12, .92)),
    radial-gradient(circle at 48% 28%, rgba(51, 169, 192, .12), transparent 32%),
    url("./assets/optimized/space-bg.webp") 48% center / cover no-repeat;
}

.server-screen::before { display: none; }

.server-screen > * {
  position: relative;
  z-index: 1;
}

.server-screen .server-head {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  align-items: center;
  width: 100%;
  min-height: calc(66px + env(safe-area-inset-top));
  margin: 0;
  padding: env(safe-area-inset-top) 14px 0;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(126, 225, 232, .18);
  background: linear-gradient(180deg, rgba(1, 8, 18, .9), rgba(5, 14, 25, .64));
  box-shadow: 0 8px 22px rgba(0, 0, 0, .24), inset 0 -1px rgba(211, 250, 253, .035);
  backdrop-filter: blur(6px);
}

.server-screen .server-head .back-link {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: rgba(95, 238, 241, .82);
  backdrop-filter: none;
}

.server-screen .server-head .back-link svg {
  width: 27px;
  height: 23px;
  stroke-width: 1.8;
  filter: drop-shadow(0 0 5px rgba(67, 238, 243, .35));
}

.server-screen .server-head h2 {
  margin: 0;
  color: #f5fbfc;
  font: 800 20px/1.1 "Bahnschrift SemiCondensed", var(--font-display);
  letter-spacing: .03em;
  text-align: center;
  text-shadow: 0 1px 0 #000, 0 0 9px rgba(118, 226, 233, .18);
}

.server-screen .server-list {
  display: grid;
  gap: 0;
  margin: 78px 0 0;
  padding: 0 48px;
}

.server-screen .server-card {
  position: relative;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  width: 100%;
  min-height: 92px;
  border: 0;
  border-radius: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  color: #f6ffff;
  text-align: left;
  box-shadow: none;
  backdrop-filter: none;
}

.server-screen .server-card::after {
  position: absolute;
  left: 71px;
  right: 1px;
  top: 47px;
  height: 1px;
  background: linear-gradient(90deg, rgba(83, 241, 246, .82), rgba(67, 209, 222, .2) 74%, transparent);
  box-shadow: 0 0 7px rgba(58, 231, 239, .42);
  content: "";
  pointer-events: none;
}

.server-screen .server-card:hover,
.server-screen .server-card:focus-visible {
  outline: 1px solid rgba(93, 241, 245, .34);
  outline-offset: 9px;
  filter: brightness(1.12);
}

.server-beacon {
  position: relative;
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  box-sizing: border-box;
  border: 2px solid rgba(130, 251, 252, .76);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(76, 229, 235, .18), rgba(2, 13, 25, .8) 58%, rgba(1, 6, 14, .9));
  box-shadow: 0 0 8px rgba(74, 238, 242, .72), 0 0 23px rgba(55, 220, 230, .3), inset 0 0 12px rgba(119, 250, 252, .26);
}

.server-beacon::before {
  position: absolute;
  inset: 7px;
  border: 2px dashed rgba(154, 252, 253, .8);
  border-radius: 50%;
  content: "";
  animation: server-beacon-spin 12s linear infinite;
}

.server-beacon::after {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid rgba(152, 252, 253, .86);
  border-radius: 50%;
  background: rgba(9, 52, 66, .68);
  color: #efffff;
  content: "✦";
  font-size: 18px;
  line-height: 1;
  text-shadow: 0 0 8px #8effff;
  box-shadow: inset 0 0 8px rgba(116, 250, 252, .22);
}

.server-beacon i {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c9ffff;
  box-shadow: 0 0 7px #71f8fc;
}

.server-node-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 68px;
}

.server-screen .server-node-copy strong {
  overflow: hidden;
  color: #f8ffff;
  font: 850 19px/1.15 "Bahnschrift SemiCondensed", var(--font-display);
  letter-spacing: .01em;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 #000, 0 0 7px rgba(184, 252, 255, .17);
  white-space: nowrap;
}

.server-screen .server-node-copy em {
  margin-top: 7px;
  color: #edae35;
  font: normal 800 12px/1 var(--font-body);
  letter-spacing: .05em;
  text-shadow: 0 0 7px rgba(237, 174, 53, .24);
}

@keyframes server-beacon-spin { to { transform: rotate(360deg); } }

/* Keep the phone status-bar area clear and restore the resource values to the
   same information scale used by the modules below. */
:root { --game-hud-offset: calc(84px + env(safe-area-inset-top)); }

body .global-hud-resources {
  min-height: calc(80px + env(safe-area-inset-top));
  padding: calc(14px + env(safe-area-inset-top)) 3px 2px;
}

.global-hud-resources .resource-item {
  height: 60px;
  grid-template-rows: 38px 22px;
  overflow: visible;
}

.global-hud-resources .resource-name-row {
  height: 37px;
  align-items: center;
  overflow: visible;
}

.global-hud-resources .res-icon {
  flex-basis: 30px;
  width: 30px;
  height: 29px;
  transform: none;
  background-size: contain;
  background-position: center;
}

.global-hud-resources .resource-item strong {
  height: 22px;
  font-size: 11px;
  letter-spacing: 0;
  -webkit-text-stroke: 0;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .78)) drop-shadow(0 0 3px rgba(116, 213, 220, .18));
}

.global-hud-resources .hud-back-button { height: 56px; }
.global-hud-resources .add-resource { height: 43px; align-self: end; margin-bottom: 5px; }

/* Galaxy directory begins below the status-safe resource HUD. */
body[data-active-screen="galaxy"] .galaxy-screen {
  padding-top: var(--game-hud-offset, calc(84px + env(safe-area-inset-top)));
}

/* Directory rows keep their natural height; the phone-contained screen owns vertical touch scrolling. */
body[data-active-screen="galaxy"] .galaxy-screen.active {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
body[data-active-screen="galaxy"] .galaxy-screen.active > .galaxy-header,
body[data-active-screen="galaxy"] .galaxy-screen.active > .galaxy-tabs,
body[data-active-screen="galaxy"] .galaxy-screen.active > .galaxy-coordinate-strip,
body[data-active-screen="galaxy"] .galaxy-screen.active > .galaxy-list-panel,
body[data-active-screen="galaxy"] .galaxy-screen.active > .star-map-tab { flex: 0 0 auto; }
body[data-active-screen="galaxy"] .galaxy-list-panel,
body[data-active-screen="galaxy"] .galaxy-map { min-height: 0; overflow: visible; }

/* Each production surface receives an identity-specific, low-opacity backdrop. */
body[data-active-screen="build-resource"] [data-screen="build-resource"] {
  background: linear-gradient(180deg, rgba(2, 9, 12, .7), rgba(2, 8, 11, .89)), url("./assets/ui-build-resource-color.jpg") center / cover no-repeat;
}

body[data-active-screen="build-normal"] [data-screen="build-normal"] {
  background: linear-gradient(180deg, rgba(2, 9, 12, .72), rgba(2, 8, 11, .9)), url("./assets/ui-build-normal-color.jpg") center / cover no-repeat;
}

body[data-active-screen="build-moon"] [data-screen="build-moon"] {
  background-color: #02070a;
}

body[data-active-screen="ship-build"] [data-screen="ship-build"] {
  background: linear-gradient(180deg, rgba(2, 9, 12, .7), rgba(2, 8, 11, .91)), url("./assets/ui-shipyard-color.jpg") center / cover no-repeat;
}

body[data-active-screen="dispatch"] [data-screen="dispatch"] {
  background: linear-gradient(180deg, rgba(2, 9, 12, .7), rgba(2, 8, 11, .91)), url("./assets/ui-dispatch-color.jpg") center / cover no-repeat;
}

body[data-active-screen="defense"] [data-screen="defense"] {
  background: linear-gradient(180deg, rgba(2, 9, 12, .73), rgba(2, 8, 11, .92)), url("./assets/ui-reference/tactical-command-bg.webp") center / cover no-repeat;
}

body[data-active-screen="design-center"] [data-screen="design-center"],
body[data-active-screen="zion-lab"] [data-screen="zion-lab"] {
  background: linear-gradient(180deg, rgba(2, 9, 12, .74), rgba(2, 8, 11, .92)), url("./assets/ui-reference/research-command-bg.png") center / cover no-repeat;
}

body[data-active-screen="build-resource"] .building-list,
body[data-active-screen="build-normal"] .building-list,
body[data-active-screen="build-moon"] .building-list,
body[data-active-screen="ship-build"] .system-list,
body[data-active-screen="dispatch"] .system-list,
body[data-active-screen="defense"] .system-list {
  border: 1px solid rgba(115, 204, 211, .18);
  border-radius: 8px;
  padding: 6px;
  background: linear-gradient(180deg, rgba(4, 15, 19, .66), rgba(1, 7, 10, .78));
  box-shadow: inset 0 1px rgba(228, 251, 253, .035), 0 8px 20px rgba(0, 0, 0, .18);
  backdrop-filter: blur(3px);
}

.build-screen .build-screen-head {
  background: linear-gradient(180deg, rgba(15, 31, 36, .8), rgba(3, 12, 16, .72));
  backdrop-filter: blur(5px);
}

body[data-active-screen="ship-build"] .game-item-category-tabs,
body[data-active-screen="dispatch"] .game-item-category-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  padding: 2px;
  background: rgba(2, 9, 12, .76);
  backdrop-filter: blur(4px);
}

body[data-active-screen="ship-build"] .game-item-category-tabs button,
body[data-active-screen="dispatch"] .game-item-category-tabs button {
  min-height: 30px;
  padding: 2px 3px;
  font-size: 8.5px;
  line-height: 1.05;
  letter-spacing: -.025em;
}

@media (max-width: 390px) {
  .global-hud-resources .resource-item small { font-size: 7px; }
  .global-hud-resources .res-icon { flex-basis: 29px; width: 29px; height: 28px; }
  .global-hud-resources .resource-item strong { font-size: 11px; }
  .server-screen .server-list { padding-inline: 42px; }
  .server-screen .server-node-copy strong { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .server-beacon::before { animation: none; }
}

/* Mail uses the same fleet operations scene with a darker veil so message and
   battle-report typography stays legible. */
body[data-active-screen="mail"] [data-screen="mail"] {
  background:
    linear-gradient(180deg, rgba(2, 10, 15, .76), rgba(1, 7, 11, .91)),
    radial-gradient(circle at 78% 16%, rgba(77, 220, 232, .1), transparent 30%),
    url("./assets/fleet/fleet-mission-bg.png") center 28% / cover fixed;
  box-shadow: inset 0 0 48px rgba(0, 0, 0, .44);
}

.mail-screen > .mail-list {
  border: 1px solid rgba(95, 210, 219, .18);
  border-radius: 8px;
  padding: 6px;
  background: rgba(2, 11, 15, .5);
  backdrop-filter: blur(3px);
}

.mail-screen .dashboard-head,
.mail-screen .mail-tabs {
  background-color: rgba(3, 14, 19, .76);
  backdrop-filter: blur(5px);
}

.mail-screen .mail-card {
  background: linear-gradient(180deg, rgba(7, 20, 24, .88), rgba(1, 8, 11, .93));
  backdrop-filter: blur(3px);
}

/* Reference-led battle mail: cyan command glass, red defender, blue attacker,
   and a warm gold result accent. The banner uses the closest battle scene in
   the local watermark-free ship art instead of the monochrome menu palette. */
.mail-report-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  margin: 2px 1px 6px;
  padding: 0 8px;
  border: 1px solid rgba(53, 219, 239, .38);
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(7, 49, 69, .9), rgba(8, 25, 45, .86));
  box-shadow: inset 0 1px rgba(205, 251, 255, .1), 0 4px 14px rgba(0, 0, 0, .3);
}

.mail-report-toolbar button {
  min-height: 32px;
  padding: 0 7px;
  border: 0;
  color: #6ff5ff;
  background: transparent;
  font: 850 10px/1 var(--font-body);
}

.mail-report-toolbar span {
  color: rgba(212, 242, 251, .68);
  font: 750 8px/1 var(--font-body);
}

.mail-screen .mail-card.mail-card-battle-open {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.mail-battle-sheet {
  --battle-cyan: #22d9ee;
  --battle-cyan-soft: #83f5ff;
  --battle-red: #f04e58;
  --battle-blue: #49a9ff;
  --battle-gold: #ffc94f;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(34, 217, 238, .74);
  border-radius: 8px;
  background:
    radial-gradient(circle at 74% 28%, rgba(37, 143, 211, .18), transparent 31%),
    linear-gradient(180deg, rgba(5, 26, 43, .97), rgba(2, 12, 24, .99));
  box-shadow: inset 0 0 0 1px rgba(174, 247, 255, .06), 0 0 15px rgba(27, 202, 226, .16);
}

.mail-battle-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(236, 57, 67, .04), transparent 43%, rgba(44, 156, 255, .05));
}

.mail-battle-hero {
  position: relative;
  display: grid;
  align-content: end;
  justify-items: center;
  min-height: 122px;
  padding: 12px 12px 10px;
  isolation: isolate;
  border-bottom: 1px solid rgba(69, 227, 242, .74);
  background:
    linear-gradient(180deg, rgba(1, 9, 18, .14) 0%, rgba(3, 18, 31, .18) 34%, rgba(3, 18, 32, .91) 100%),
    linear-gradient(90deg, rgba(175, 26, 38, .26), transparent 45%, rgba(18, 88, 161, .28)),
    url("./assets/ships/飞船_末日审判.png") center 45% / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(115, 241, 255, .1), inset 0 -16px 26px rgba(3, 13, 24, .56);
}

.mail-battle-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 56, 69, .06), transparent 36%, rgba(49, 172, 255, .08));
  mix-blend-mode: screen;
}

.mail-battle-hero-copy {
  display: grid;
  justify-items: center;
  gap: 4px;
  width: min(90%, 330px);
  padding: 6px 12px;
  border-top: 1px solid rgba(100, 236, 249, .3);
  border-bottom: 1px solid rgba(100, 236, 249, .3);
  background: linear-gradient(90deg, transparent, rgba(2, 15, 29, .79) 17%, rgba(2, 15, 29, .79) 83%, transparent);
}

.mail-battle-hero-copy > span {
  color: #f5feff;
  font: 900 17px/1 var(--font-display);
  letter-spacing: .08em;
  text-shadow: 0 1px #001017, 0 0 9px rgba(77, 222, 240, .48);
}

.mail-battle-hero-copy > strong {
  max-width: 100%;
  overflow: hidden;
  color: #eafcff;
  font: 850 10px/1.1 var(--font-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-battle-hero-copy small { color: #8cecf7; font-size: 8px; }

.mail-battle-outcome {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 9px;
  min-width: 54px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 213, 100, .76);
  border-radius: 3px;
  color: #fff4be;
  background: linear-gradient(180deg, rgba(142, 85, 5, .94), rgba(77, 39, 3, .92));
  box-shadow: inset 0 1px rgba(255, 245, 198, .2), 0 0 12px rgba(255, 173, 39, .32);
  font: 950 10px/1 var(--font-body);
  text-align: center;
  text-shadow: 0 1px #5c2600;
}

.mail-battle-sheet.defeat .mail-battle-outcome {
  border-color: rgba(255, 103, 113, .75);
  color: #ffe4e6;
  background: linear-gradient(180deg, rgba(153, 36, 47, .94), rgba(73, 15, 25, .95));
  box-shadow: inset 0 1px rgba(255, 230, 232, .16), 0 0 12px rgba(255, 53, 73, .28);
}

.mail-battle-parties {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  align-items: stretch;
  padding: 0;
  border-bottom: 1px solid rgba(45, 187, 213, .38);
}

.mail-battle-parties article {
  display: grid;
  align-content: start;
  min-width: 0;
  min-height: 128px;
  padding: 10px 11px 9px;
}

.mail-battle-parties article.defender {
  justify-items: start;
  background: radial-gradient(circle at 8% 50%, rgba(226, 50, 61, .25), transparent 60%), linear-gradient(90deg, rgba(92, 15, 26, .53), rgba(11, 23, 38, .82));
}

.mail-battle-parties article.attacker {
  justify-items: end;
  text-align: right;
  background: radial-gradient(circle at 92% 50%, rgba(38, 143, 251, .27), transparent 61%), linear-gradient(270deg, rgba(14, 65, 123, .56), rgba(11, 23, 38, .82));
}

.mail-battle-parties article > span {
  color: rgba(229, 247, 251, .72);
  font: 850 8px/1 var(--font-body);
  letter-spacing: .1em;
}

.mail-battle-parties article > strong {
  max-width: 100%;
  margin-top: 5px;
  overflow: hidden;
  color: #fff;
  font: 900 12px/1.1 var(--font-display);
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 #001018;
  white-space: nowrap;
}

.mail-battle-parties article > em {
  max-width: 100%;
  min-height: 14px;
  margin-top: 3px;
  overflow: hidden;
  color: rgba(215, 240, 247, .62);
  font: normal 750 7px/1 var(--font-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-loss-title {
  width: 100%;
  margin-top: 9px;
  padding: 4px 6px;
  color: rgba(250, 253, 255, .88);
  background: rgba(210, 235, 244, .1);
  font: 850 8px/1 var(--font-body);
}

.mail-battle-parties article > b {
  margin-top: 5px;
  color: #fff;
  font: 950 18px/1 var(--font-display);
  letter-spacing: -.02em;
}

.mail-battle-parties .defender > b { color: #ff9ba2; }
.mail-battle-parties .attacker > b { color: #8fd1ff; }

.mail-battle-parties article > small {
  margin-top: 3px;
  color: rgba(233, 249, 252, .76);
  font: 750 7px/1.2 var(--font-body);
}

.mail-battle-parties article > i {
  position: relative;
  display: block;
  width: 100%;
  height: 5px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(216, 239, 247, .13);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .74);
}

.mail-battle-parties article > i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--mail-loss, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, #b91e31, #ff707a);
  box-shadow: 0 0 7px rgba(255, 64, 82, .6);
}

.mail-battle-parties .attacker > i::after {
  inset: 0 0 0 auto;
  background: linear-gradient(90deg, #54bbff, #166cc4);
  box-shadow: 0 0 7px rgba(61, 164, 255, .64);
}

/* 侦察邮件使用独立的深海军蓝情报终端；布局按真实目标快照分区，
   锁定区只显示所需间谍等级，不泄露未侦察到的数值。 */
.mail-card.mail-card-battle-open:has(.mail-scout-sheet) {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.mail-scout-sheet {
  --scout-cyan: #22dbea;
  --scout-cyan-soft: #9af8ff;
  position: relative;
  display: grid;
  gap: 7px;
  overflow: hidden;
  padding: 0 7px 9px;
  border: 1px solid rgba(38, 220, 236, .68);
  border-radius: 8px;
  color: #ebfbff;
  background:
    radial-gradient(circle at 17% 9%, rgba(59, 213, 231, .14), transparent 24%),
    linear-gradient(180deg, rgba(4, 22, 35, .98), rgba(2, 11, 22, .99));
  box-shadow: inset 0 0 0 1px rgba(167, 247, 255, .05), 0 0 16px rgba(20, 190, 218, .13);
}

.mail-scout-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background-image: linear-gradient(rgba(68, 222, 239, .06) 1px, transparent 1px);
  background-size: 100% 16px;
}

.mail-scout-title {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  margin: 0 -7px;
  padding: 8px 8px 7px;
  border-bottom: 1px solid rgba(49, 226, 240, .5);
  background: linear-gradient(90deg, transparent, rgba(23, 126, 145, .44) 50%, transparent);
}

.mail-scout-title > span {
  color: #f7ffff;
  font: 950 17px/1 var(--font-display);
  letter-spacing: .12em;
  text-shadow: 0 0 10px rgba(60, 234, 248, .67);
}

.mail-scout-title > strong {
  color: rgba(185, 244, 250, .68);
  font: 750 7px/1 var(--font-body);
  letter-spacing: .18em;
}

.mail-scout-target {
  position: relative;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
  min-height: 95px;
  padding: 5px 8px;
  border-bottom: 1px dashed rgba(144, 233, 241, .3);
  background: linear-gradient(90deg, rgba(16, 77, 94, .14), transparent);
}

.mail-scout-target > img {
  width: 78px;
  height: 78px;
  object-fit: contain;
  filter: drop-shadow(0 0 11px rgba(56, 214, 237, .29));
}

.mail-scout-target > div {
  display: grid;
  min-width: 0;
  gap: 5px;
  padding-left: 5px;
}

.mail-scout-target span {
  overflow: hidden;
  color: #effdff;
  font: 900 11px/1.2 var(--font-display);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-scout-target strong {
  color: rgba(227, 245, 249, .78);
  font: 800 9px/1 var(--font-body);
}

.mail-scout-target em {
  width: fit-content;
  padding: 3px 7px;
  border-radius: 8px;
  color: #66f0fa;
  background: rgba(36, 205, 220, .1);
  font: normal 900 8px/1 var(--font-body);
  box-shadow: inset 0 0 0 1px rgba(45, 224, 237, .26);
}

.mail-scout-statusbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
  padding: 0 8px;
  border-radius: 4px;
  background: rgba(15, 62, 75, .37);
  box-shadow: inset 0 0 0 1px rgba(62, 214, 228, .15);
  font: 800 8px/1 var(--font-body);
}

.mail-scout-statusbar b { color: var(--scout-cyan-soft); }
.mail-scout-statusbar .safe { color: #65edb2; }
.mail-scout-statusbar .detected { color: #ff8d98; }

.mail-scout-section {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(31, 211, 230, .47);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(13, 43, 59, .72), rgba(4, 19, 32, .88));
  box-shadow: inset 0 1px rgba(161, 245, 252, .06), 0 4px 12px rgba(0, 0, 0, .18);
}

.mail-scout-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 29px;
  padding: 0 9px;
  border-bottom: 1px solid rgba(93, 230, 240, .15);
  background: linear-gradient(180deg, rgba(78, 112, 129, .2), rgba(9, 30, 43, .18));
}

.mail-scout-section > header span {
  color: #24e5f0;
  font: 950 11px/1 var(--font-display);
  text-shadow: 0 0 8px rgba(37, 218, 234, .34);
}

.mail-scout-section > header em {
  color: rgba(190, 240, 246, .53);
  font: normal 750 7px/1 var(--font-body);
}

.mail-scout-resource-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  padding: 8px 5px 6px;
}

.mail-scout-resource-grid article {
  display: grid;
  justify-items: center;
  align-content: start;
  min-width: 0;
  gap: 3px;
  padding: 3px 2px 5px;
  border-radius: 4px;
  background: rgba(2, 13, 23, .46);
}

.mail-scout-resource-grid article.locked { opacity: .38; filter: grayscale(1); }

.mail-scout-resource-grid img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(53, 215, 233, .32));
}

.mail-scout-resource-grid span {
  color: rgba(225, 248, 251, .73);
  font: 750 7px/1 var(--font-body);
  white-space: nowrap;
}

.mail-scout-resource-grid strong {
  max-width: 100%;
  overflow: hidden;
  color: #fff;
  font: 900 9px/1 var(--font-display);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-scout-resource-grid article.locked strong { font-size: 6px; }

.mail-scout-section-note {
  margin: 0 6px 7px;
  padding-top: 5px;
  border-top: 1px dotted rgba(158, 230, 238, .18);
  color: rgba(209, 241, 246, .58);
  font: 750 7px/1.3 var(--font-body);
  text-align: center;
}

.mail-scout-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 7px 7px 2px;
}

.mail-scout-metrics span {
  flex: 1 1 42%;
  padding: 5px 6px;
  border-radius: 3px;
  color: rgba(218, 244, 248, .66);
  background: rgba(54, 160, 177, .09);
  font: 750 7px/1 var(--font-body);
}

.mail-scout-metrics b { float: right; color: #f4ffff; font-size: 9px; }

.mail-scout-composition {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px 8px;
  margin: 0;
  padding: 6px 9px 8px;
  list-style: none;
}

.mail-scout-composition li {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  min-width: 0;
  padding: 5px 2px;
  border-bottom: 1px dotted rgba(167, 230, 237, .15);
  color: rgba(231, 248, 251, .76);
  font: 750 8px/1 var(--font-body);
}

.mail-scout-composition li span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-scout-composition li strong { color: #fff; white-space: nowrap; }
.mail-scout-composition li.empty { grid-column: 1 / -1; justify-content: center; color: rgba(204, 235, 240, .45); }

.mail-scout-locked {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 12px 8px 13px;
  color: rgba(192, 225, 231, .42);
  background: repeating-linear-gradient(135deg, rgba(103, 146, 158, .025) 0 6px, transparent 6px 12px);
}

.mail-scout-locked i { color: #5c7d85; font: normal 900 17px/1 var(--font-display); }
.mail-scout-locked span { font: 900 8px/1 var(--font-display); letter-spacing: .12em; }
.mail-scout-locked strong { color: rgba(206, 236, 241, .55); font: 750 7px/1 var(--font-body); }

.mail-scout-sheet > footer {
  position: relative;
  margin-top: 1px;
  padding: 7px 9px;
  border-left: 2px solid #efb547;
  color: #ffe0a1;
  background: rgba(121, 78, 13, .15);
  font: 750 7px/1.35 var(--font-body);
}

.mail-battle-versus {
  z-index: 2;
  display: grid;
  place-items: center;
  align-self: center;
  width: 32px;
  height: 32px;
  margin-left: -4px;
  border: 1px solid rgba(130, 234, 246, .56);
  border-radius: 50%;
  color: #e9feff;
  background: radial-gradient(circle, #17405b, #071728 70%);
  box-shadow: 0 0 11px rgba(52, 209, 230, .25);
  font: 950 9px/1 var(--font-display);
}

.mail-battle-loot {
  margin: 9px 8px 8px;
  overflow: hidden;
  border: 1px solid rgba(44, 213, 234, .56);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(7, 39, 57, .76), rgba(3, 19, 34, .91));
  box-shadow: inset 0 1px rgba(164, 244, 251, .07), 0 0 10px rgba(11, 185, 214, .1);
}

.mail-battle-loot > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
  padding: 0 10px;
  border-bottom: 1px solid rgba(62, 197, 218, .27);
  background: linear-gradient(90deg, rgba(12, 85, 111, .62), rgba(7, 39, 59, .36));
}

.mail-battle-loot > header span {
  color: #48edff;
  font: 900 11px/1 var(--font-display);
  letter-spacing: .05em;
  text-shadow: 0 0 8px rgba(53, 222, 241, .35);
}

.mail-battle-loot > header small { color: rgba(202, 239, 244, .58); font: 700 7px/1 var(--font-body); }

.mail-battle-loot > div:not(.mail-powder-rewards) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 7px 4px 8px;
}

.mail-battle-debris > div:not(.mail-powder-rewards) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mail-battle-debris > header {
  background: linear-gradient(90deg, rgba(43, 87, 105, .72), rgba(8, 35, 53, .42));
}

.mail-loot-card {
  display: grid;
  justify-items: center;
  min-width: 0;
  padding: 2px 4px;
  border-right: 1px solid rgba(76, 186, 205, .2);
}

.mail-loot-card:last-child { border-right: 0; }
.mail-loot-card img { width: 36px; height: 32px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(72, 212, 237, .34)); }
.mail-loot-card span { margin-top: 3px; color: rgba(221, 245, 250, .72); font: 750 8px/1 var(--font-body); }
.mail-loot-card strong { margin-top: 4px; color: #fff; font: 900 12px/1 var(--font-display); }
.mail-loot-card.metal strong { color: #c8ecf7; }
.mail-loot-card.crystal strong { color: #75c9ff; }
.mail-loot-card.gas strong { color: #61f4df; }

.mail-powder-rewards {
  display: flex;
  gap: 4px;
  padding: 0 7px 7px;
  overflow-x: auto;
  scrollbar-width: none;
}

.mail-powder-rewards::-webkit-scrollbar { display: none; }
.mail-powder-rewards span {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid currentColor;
  border-radius: 10px;
  color: #edfaff;
  background: rgba(5, 26, 42, .82);
  font: 750 7px/1 var(--font-body);
}

.mail-powder-rewards span.red { color: #ff8691; }
.mail-powder-rewards span.blue { color: #78c7ff; }
.mail-powder-rewards span.gray { color: #c9d5db; }
.mail-powder-rewards b { margin-left: 4px; color: inherit; }

.mail-buff-award {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 7px;
  margin: 0 8px 8px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 193, 62, .46);
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(108, 60, 6, .6), rgba(29, 35, 36, .45));
}

.mail-buff-award span { color: #ffd268; font: 800 7px/1 var(--font-body); }
.mail-buff-award strong { color: #fff1bd; font: 900 9px/1 var(--font-display); }
.mail-buff-award em { color: #ffd268; font: normal 750 7px/1 var(--font-body); }

.mail-battle-actions {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.22fr .78fr;
  gap: 7px;
  padding: 2px 8px 9px;
}

.mail-card .mail-battle-actions > button {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  min-width: 0;
  min-height: 42px;
  padding: 5px 8px;
  border-radius: 5px;
  font-family: var(--font-body);
  box-shadow: inset 0 1px rgba(255, 255, 255, .17), 0 5px 11px rgba(0, 0, 0, .27);
}

.mail-card .mail-battle-actions > button span { color: #fff; font: 900 11px/1 var(--font-display); }
.mail-card .mail-battle-actions > button em { margin-top: 3px; color: rgba(255, 255, 255, .7); font: normal 700 7px/1 var(--font-body); }

.mail-battle-detail-toggle {
  border: 1px solid rgba(71, 231, 246, .87);
  background: linear-gradient(180deg, #1595bd, #07547d);
  text-shadow: 0 1px #003347;
}

.mail-battle-delete {
  border: 1px solid rgba(255, 114, 88, .78);
  background: linear-gradient(180deg, #bf493a, #6f1e27);
  text-shadow: 0 1px #401018;
}

.mail-battle-detail {
  position: relative;
  z-index: 1;
  margin: 0 8px 9px;
  padding: 7px;
  border: 1px solid rgba(49, 205, 229, .5);
  border-radius: 6px;
  background: rgba(2, 16, 30, .93);
}

.mail-battle-detail > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 2px 7px;
  border-bottom: 1px solid rgba(51, 193, 216, .26);
}

.mail-battle-detail > header div { display: grid; gap: 3px; }
.mail-battle-detail > header span { color: #63e9f7; font: 800 7px/1 var(--font-body); letter-spacing: .08em; }
.mail-battle-detail > header strong { color: #f5ffff; font: 900 11px/1 var(--font-display); }
.mail-battle-detail > header em { color: #ffd065; font: normal 850 8px/1 var(--font-body); }

.mail-battle-roster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin: 6px 0;
}

.mail-battle-roster span {
  padding: 5px 6px;
  border: 1px solid rgba(93, 211, 228, .18);
  color: #dceff5;
  background: rgba(10, 47, 70, .51);
  font: 750 7px/1.2 var(--font-body);
}

.mail-round-list { display: grid; gap: 6px; }
.mail-round-list > article {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(71, 191, 214, .26);
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(83, 18, 29, .42), rgba(8, 31, 51, .75) 48%, rgba(11, 64, 113, .43));
}

.mail-round-list > article > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-column: 1 / -1;
  gap: 6px;
  min-height: 27px;
  padding: 0 7px;
  border-bottom: 1px solid rgba(57, 184, 208, .24);
  background: rgba(7, 37, 58, .7);
}

.mail-round-list > article > header b { color: #eaffff; font: 850 8px/1 var(--font-body); }
.mail-round-list > article > header span { color: #92dce7; font: 700 6.5px/1 var(--font-body); }
.mail-round-loss { min-width: 0; padding: 6px; }
.mail-round-loss.defender { border-right: 1px solid rgba(74, 190, 211, .2); }
.mail-round-loss > strong { display: block; margin-bottom: 5px; font: 850 7px/1 var(--font-body); }
.mail-round-loss.defender > strong { color: #ff9ca5; }
.mail-round-loss.attacker > strong { color: #8bd1ff; }
.mail-round-loss > div { display: grid; gap: 3px; min-height: 18px; }
.mail-round-loss > div > span { display: flex; justify-content: space-between; gap: 4px; color: #eaf9fc; font: 700 7px/1.15 var(--font-body); }
.mail-round-loss > div b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-round-loss > div em { flex: 0 0 auto; color: #ffca6e; font-style: normal; }
.mail-round-loss small { display: block; margin-top: 5px; color: rgba(213, 237, 242, .55); font: 700 6.5px/1 var(--font-body); }
.mail-no-loss { color: rgba(204, 233, 239, .46); font: 700 6.5px/1.2 var(--font-body); }

.mail-card.mail-card-battle {
  overflow: hidden;
  border-color: rgba(42, 199, 222, .47);
  border-radius: 7px;
  background:
    linear-gradient(90deg, rgba(119, 21, 32, .28), rgba(4, 28, 44, .92) 48%, rgba(15, 78, 137, .29)),
    url("./assets/ships/飞船_末日审判.png") center / cover no-repeat;
  box-shadow: inset 0 0 24px rgba(1, 10, 19, .72), 0 5px 13px rgba(0, 0, 0, .23);
}

.mail-card.mail-card-battle.unread { border-left: 3px solid #55efff; }

.mail-card.mail-card-battle > button {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  width: 100%;
  min-height: 104px;
  padding: 9px 10px;
  color: #fff;
  background: linear-gradient(180deg, rgba(2, 15, 27, .54), rgba(2, 15, 28, .93));
  text-align: left;
}

.mail-card.mail-card-battle > button > strong {
  overflow: hidden;
  color: #f4ffff;
  font: 900 12px/1.1 var(--font-display);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-card.mail-card-battle > button > small { color: #92d8e6; font: 700 7px/1.35 var(--font-body); }

.mail-list-battle-kicker,
.mail-list-battle-vs { display: flex; align-items: center; justify-content: space-between; min-width: 0; }
.mail-list-battle-kicker span { color: #4cecff; font: 850 8px/1 var(--font-body); letter-spacing: .08em; }
.mail-list-battle-kicker em { color: rgba(214, 240, 245, .58); font: normal 700 7px/1 var(--font-body); }
.mail-list-battle-vs { gap: 5px; padding: 5px 7px; border-top: 1px solid rgba(50, 201, 223, .22); border-bottom: 1px solid rgba(50, 201, 223, .22); background: rgba(3, 20, 35, .63); }
.mail-list-battle-vs span { min-width: 0; overflow: hidden; color: #e8f8fb; font: 750 8px/1 var(--font-body); text-overflow: ellipsis; white-space: nowrap; }
.mail-list-battle-vs span:first-child b { color: #ff8d97; }
.mail-list-battle-vs span:last-child b { color: #7bc6ff; }
.mail-list-battle-vs i { color: #ffd269; font: 900 7px/1 var(--font-display); font-style: normal; }

.mail-card .mail-battle-actions > button:focus-visible,
.mail-report-toolbar button:focus-visible,
.mail-card.mail-card-battle > button:focus-visible {
  outline: 2px solid #fff2a4;
  outline-offset: -3px;
}

@media (max-width: 390px) {
  .mail-battle-hero { min-height: 112px; }
  .mail-battle-parties article { min-height: 123px; padding-inline: 8px; }
  .mail-battle-parties article > strong { font-size: 11px; }
  .mail-battle-parties article > b { font-size: 17px; }
  .mail-battle-loot > header small { display: none; }
  .mail-loot-card img { width: 32px; height: 29px; }
  .mail-battle-actions { grid-template-columns: 1.16fr .84fr; }
}

/* Final server-directory sizing wins over the older single-node atlas skin. */
body[data-active-screen="server"] .server-screen { overflow-x: hidden; overflow-y: auto; padding: 0 0 92px; touch-action: pan-y; }
body[data-active-screen="server"] .server-screen .server-list { display: grid; gap: 9px; margin: 4px 14px 0; padding: 0; }
body[data-active-screen="server"] .server-screen .server-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 42px;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 104px;
  border: 1px solid rgba(83, 206, 214, .22);
  border-radius: 8px;
  padding: 10px;
  overflow: hidden;
  background: linear-gradient(110deg, rgba(7, 29, 38, .82), rgba(2, 11, 20, .88));
  box-shadow: inset 0 1px rgba(222, 253, 255, .035), 0 7px 18px rgba(0, 0, 0, .24);
  backdrop-filter: blur(7px);
}
body[data-active-screen="server"] .server-screen .server-card::after { display: none; }
body[data-active-screen="server"] .server-screen .server-card.active { border-color: rgba(82, 225, 230, .48); background: linear-gradient(110deg, rgba(12, 65, 75, .72), rgba(3, 15, 26, .9)); }
body[data-active-screen="server"] .server-screen .server-beacon { width: 48px; height: 48px; border-width: 1px; }
body[data-active-screen="server"] .server-screen .server-beacon::before { inset: 5px; border-width: 1px; }
body[data-active-screen="server"] .server-screen .server-beacon::after { width: 23px; height: 23px; font-size: 13px; }
body[data-active-screen="server"] .server-screen .server-node-copy { min-height: 78px; }
body[data-active-screen="server"] .server-screen .server-node-title strong { font-size: 15px; }
body[data-active-screen="server"] .server-screen .server-node-copy em { margin-top: 5px; color: rgba(220, 235, 236, .65); font-size: 8px; }

/* 2026-07-17: single Zeus test realm, restored to the original star-atlas entrance. */
body[data-active-screen="server"] .server-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  min-height: 0;
  padding-bottom: 72px;
  background:
    radial-gradient(ellipse at 56% 32%, rgba(18, 44, 82, .34), transparent 38%),
    radial-gradient(ellipse at 18% 78%, rgba(14, 58, 78, .18), transparent 31%),
    linear-gradient(180deg, #030817, #03091b 48%, #010512);
  isolation: isolate;
}

body[data-active-screen="server"] .server-screen::before {
  content: "";
  position: absolute;
  inset: 61px 0 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(112, 239, 246, .78) 0 1px, transparent 1.7px),
    radial-gradient(circle at 77% 27%, rgba(174, 213, 255, .68) 0 1px, transparent 1.8px),
    radial-gradient(circle at 43% 54%, rgba(104, 225, 236, .5) 0 1px, transparent 1.8px),
    radial-gradient(circle at 88% 72%, rgba(187, 211, 255, .56) 0 1px, transparent 1.8px),
    linear-gradient(180deg, rgba(1, 5, 18, .24), rgba(0, 3, 14, .72));
  background-size: 91px 117px, 133px 149px, 157px 113px, 119px 171px, auto;
  opacity: .72;
}

body[data-active-screen="server"] .server-head {
  position: relative;
  z-index: 2;
  min-height: 61px;
  border-top: 1px solid rgba(88, 137, 172, .2);
  border-bottom: 1px solid rgba(103, 177, 207, .25);
  background: linear-gradient(180deg, rgba(2, 7, 15, .92), rgba(3, 10, 21, .78));
  box-shadow: 0 6px 24px rgba(0, 0, 0, .42);
  backdrop-filter: blur(8px);
}

body[data-active-screen="server"] .server-head h2 {
  color: #f7ffff;
  font-size: 19px;
  text-shadow: 0 0 9px rgba(91, 228, 237, .32);
}

body[data-active-screen="server"] .server-head .back-link { color: #45e2e5; }
body[data-active-screen="server"] .server-bridge-badge { display: none; }
body[data-active-screen="server"] .server-catalog-intro,
body[data-active-screen="server"] .server-note { display: none; }

body[data-active-screen="server"] .server-catalog-state {
  margin: 54px 0 0;
  color: rgba(130, 217, 225, .58);
  font: 750 7px/1 var(--font-data);
  letter-spacing: .06em;
  text-align: center;
}

body[data-active-screen="server"] .server-screen .server-list {
  display: grid;
  justify-items: center;
  gap: 0;
  margin: 7px auto 0;
  padding: 0 16px;
}

body[data-active-screen="server"] .server-screen .server-card {
  position: relative;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  width: min(100%, 304px);
  min-height: 124px;
  border: 0;
  border-radius: 0;
  padding: 8px 2px;
  overflow: visible;
  color: #fff;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  text-align: left;
}

body[data-active-screen="server"] .server-screen .server-card::before {
  content: "";
  position: absolute;
  left: 83px;
  right: 14px;
  top: 63px;
  height: 1px;
  background: linear-gradient(90deg, rgba(93, 242, 247, .92), rgba(93, 242, 247, 0));
  box-shadow: 0 0 8px rgba(81, 230, 237, .6);
}

body[data-active-screen="server"] .server-screen .server-card::after {
  content: "进入";
  position: absolute;
  right: 18px;
  bottom: 20px;
  display: block;
  color: rgba(126, 225, 231, .66);
  font: 750 7px/1 var(--font-body);
  letter-spacing: .12em;
}

body[data-active-screen="server"] .server-screen .server-card:focus-visible {
  outline: 1px solid rgba(122, 246, 248, .86);
  outline-offset: 5px;
}

body[data-active-screen="server"] .server-screen .server-card.active { border: 0; background: transparent; }
body[data-active-screen="server"] .server-screen .server-card.is-connecting { filter: brightness(1.2); }
body[data-active-screen="server"] .server-screen .server-beacon {
  width: 76px;
  height: 76px;
  border: 2px dashed rgba(157, 249, 250, .9);
  box-shadow: 0 0 11px rgba(73, 231, 238, .9), inset 0 0 12px rgba(67, 220, 230, .24);
}

body[data-active-screen="server"] .server-screen .server-beacon::before { inset: 9px; border: 2px solid rgba(150, 247, 249, .88); }
body[data-active-screen="server"] .server-screen .server-beacon::after { width: 36px; height: 36px; font-size: 20px; text-shadow: 0 0 9px #fff; }
body[data-active-screen="server"] .server-screen .server-beacon i { width: 9px; height: 9px; background: #eaffff; box-shadow: 0 0 10px #66f4f4; }
body[data-active-screen="server"] .server-screen .server-node-copy { min-height: 72px; align-content: center; padding-top: 2px; }
body[data-active-screen="server"] .server-screen .server-node-title strong { color: #fff; font: 900 20px/1.1 var(--font-display); text-shadow: 0 0 8px rgba(109, 224, 234, .26); }
body[data-active-screen="server"] .server-screen .server-node-title b,
body[data-active-screen="server"] .server-screen .server-services,
body[data-active-screen="server"] .server-screen .server-enter { display: none; }
body[data-active-screen="server"] .server-screen .server-node-copy em { margin-top: 13px; color: #ffc64f; font: normal 850 12px/1 var(--font-display); letter-spacing: .06em; }

/* Focus motion only: resource surface turns inside a fixed ring; dark alien art uses its original clock-like spin. */
.star-map-selected-focus.is-resource .star-map-focus-planet > img { animation: none; }

.star-map-selected-focus.is-dark-alien .star-map-focus-planet > img {
  animation: planet-self-rotate 34s linear infinite;
}

.star-map-focus-sphere-surface {
  position: absolute;
  z-index: 3;
  display: none;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--focus-color) 52%, white 12%);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: inset -15px -3px 19px rgba(0, 0, 0, .68), inset 9px 0 13px rgba(204, 244, 255, .08), 0 0 11px color-mix(in srgb, var(--focus-color) 34%, transparent);
}

.star-map-focus-sphere-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .18), transparent 25%), linear-gradient(90deg, rgba(0, 0, 0, .24), transparent 34% 62%, rgba(0, 0, 0, .56));
  pointer-events: none;
}

.star-map-focus-sphere-surface::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: -100%;
  width: 200%;
  background-repeat: repeat-x;
  background-size: 50% 100%;
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: transform;
}

.star-map-focus-sphere-surface > img {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  border: 0;
  border-radius: 0;
  object-fit: fill;
  filter: saturate(1.08) contrast(1.05);
  box-shadow: none;
  will-change: transform;
}

.star-map-selected-focus.is-resource .star-map-focus-sphere-surface {
  left: 50%;
  top: 45%;
  display: block;
  width: 45%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.star-map-selected-focus.is-resource .star-map-focus-sphere-surface > img {
  width: 220%;
  height: 160%;
  transform: translate(-50%, -50%);
}

.star-map-selected-focus.is-resource .star-map-focus-sphere-surface::before {
  opacity: .64;
  background-image:
    radial-gradient(ellipse at 12% 28%, rgba(208, 142, 255, .78) 0 7%, transparent 18%),
    radial-gradient(ellipse at 36% 68%, rgba(59, 189, 255, .58) 0 8%, transparent 20%),
    radial-gradient(ellipse at 71% 37%, rgba(255, 118, 229, .68) 0 6%, transparent 17%),
    radial-gradient(ellipse at 91% 74%, rgba(93, 111, 255, .52) 0 7%, transparent 18%),
    repeating-linear-gradient(102deg, transparent 0 10%, rgba(188, 118, 255, .2) 12% 14%, transparent 16% 25%);
  animation: resource-sphere-surface-turn 7.5s linear infinite;
}

@keyframes resource-sphere-surface-turn {
  from { transform: translateX(0); }
  to { transform: translateX(50%); }
}

.star-map-zoom-progress {
  position: relative;
  display: block;
  width: min(100%, 132px);
  height: 2px;
  margin-top: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(116, 216, 225, .14);
}

.star-map-zoom-progress b {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--zoom-progress, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, #54d9df, #b2ffff);
  box-shadow: 0 0 6px rgba(89, 231, 236, .62);
  transition: width .18s ease;
}

@media (prefers-reduced-motion: reduce) {
  .star-map-focus-sphere-surface::before { animation: none !important; }
}

/* Server selection only: restore the dense, irregular star atlas from the reference. */
body[data-active-screen="server"] .server-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 52% 28%, rgba(18, 45, 85, .3), transparent 42%),
    radial-gradient(ellipse at 14% 76%, rgba(8, 60, 80, .15), transparent 34%),
    linear-gradient(180deg, #020612 0%, #050a1c 48%, #01040e 100%);
}

body[data-active-screen="server"] .server-screen::before,
body[data-active-screen="server"] .server-screen::after {
  content: "";
  position: absolute;
  inset: 62px 0 0;
  z-index: 0;
  display: block;
  pointer-events: none;
}

body[data-active-screen="server"] .server-screen::before {
  background-image:
    radial-gradient(circle at 4% 8%, rgba(225, 251, 255, .92) 0 1px, transparent 1.8px),
    radial-gradient(circle at 11% 24%, rgba(104, 199, 255, .72) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 17% 63%, rgba(211, 236, 255, .7) 0 .8px, transparent 1.8px),
    radial-gradient(circle at 23% 15%, rgba(143, 226, 255, .8) 0 .9px, transparent 1.9px),
    radial-gradient(circle at 28% 84%, rgba(221, 245, 255, .78) 0 1px, transparent 2px),
    radial-gradient(circle at 34% 43%, rgba(96, 193, 255, .68) 0 .8px, transparent 1.8px),
    radial-gradient(circle at 39% 7%, rgba(234, 250, 255, .88) 0 1.1px, transparent 2px),
    radial-gradient(circle at 45% 71%, rgba(147, 217, 255, .68) 0 .9px, transparent 1.9px),
    radial-gradient(circle at 51% 31%, rgba(224, 246, 255, .8) 0 .8px, transparent 1.8px),
    radial-gradient(circle at 56% 91%, rgba(98, 197, 255, .7) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 18%, rgba(213, 243, 255, .78) 0 .9px, transparent 1.9px),
    radial-gradient(circle at 68% 54%, rgba(111, 205, 255, .76) 0 1.1px, transparent 2.2px),
    radial-gradient(circle at 73% 82%, rgba(229, 249, 255, .86) 0 .8px, transparent 1.8px),
    radial-gradient(circle at 79% 11%, rgba(142, 219, 255, .72) 0 .9px, transparent 1.9px),
    radial-gradient(circle at 84% 67%, rgba(218, 245, 255, .82) 0 1px, transparent 2px),
    radial-gradient(circle at 91% 36%, rgba(102, 197, 255, .72) 0 .8px, transparent 1.8px),
    radial-gradient(circle at 96% 88%, rgba(225, 248, 255, .84) 0 1.1px, transparent 2.1px),
    radial-gradient(circle at 7% 92%, rgba(127, 211, 255, .68) 0 .8px, transparent 1.8px),
    radial-gradient(circle at 31% 58%, rgba(230, 249, 255, .8) 0 .7px, transparent 1.7px),
    radial-gradient(circle at 59% 66%, rgba(128, 209, 255, .66) 0 .8px, transparent 1.8px),
    radial-gradient(circle at 88% 4%, rgba(229, 250, 255, .85) 0 .9px, transparent 1.9px);
  opacity: .78;
  animation: server-starfield-primary 6.8s ease-in-out infinite;
}

body[data-active-screen="server"] .server-screen::after {
  background-image:
    radial-gradient(circle at 8% 38%, rgba(121, 188, 244, .52) 0 .65px, transparent 1.5px),
    radial-gradient(circle at 14% 77%, rgba(229, 247, 255, .58) 0 .7px, transparent 1.6px),
    radial-gradient(circle at 20% 49%, rgba(112, 196, 255, .48) 0 .6px, transparent 1.5px),
    radial-gradient(circle at 26% 27%, rgba(225, 248, 255, .6) 0 .7px, transparent 1.6px),
    radial-gradient(circle at 37% 93%, rgba(103, 188, 245, .5) 0 .6px, transparent 1.5px),
    radial-gradient(circle at 42% 19%, rgba(228, 249, 255, .58) 0 .7px, transparent 1.6px),
    radial-gradient(circle at 48% 52%, rgba(107, 193, 249, .48) 0 .6px, transparent 1.5px),
    radial-gradient(circle at 54% 79%, rgba(224, 246, 255, .62) 0 .75px, transparent 1.7px),
    radial-gradient(circle at 64% 39%, rgba(111, 197, 255, .5) 0 .65px, transparent 1.5px),
    radial-gradient(circle at 71% 7%, rgba(231, 250, 255, .62) 0 .7px, transparent 1.6px),
    radial-gradient(circle at 77% 48%, rgba(106, 194, 249, .48) 0 .6px, transparent 1.5px),
    radial-gradient(circle at 82% 91%, rgba(226, 248, 255, .6) 0 .7px, transparent 1.6px),
    radial-gradient(circle at 89% 23%, rgba(105, 190, 246, .52) 0 .65px, transparent 1.5px),
    radial-gradient(circle at 94% 59%, rgba(228, 249, 255, .62) 0 .75px, transparent 1.7px),
    radial-gradient(circle at 3% 69%, rgba(113, 200, 255, .46) 0 .6px, transparent 1.5px),
    radial-gradient(circle at 33% 33%, rgba(226, 248, 255, .58) 0 .7px, transparent 1.6px),
    radial-gradient(circle at 57% 12%, rgba(104, 192, 249, .5) 0 .6px, transparent 1.5px),
    radial-gradient(circle at 86% 73%, rgba(230, 249, 255, .6) 0 .7px, transparent 1.6px);
  opacity: .52;
  animation: server-starfield-secondary 9.2s ease-in-out infinite;
}

body[data-active-screen="server"] .server-head {
  position: relative;
  z-index: 3;
  min-height: 62px;
  border-top: 1px solid rgba(84, 133, 172, .18);
  border-bottom: 1px solid rgba(91, 174, 204, .24);
  background: linear-gradient(180deg, rgba(1, 5, 13, .96), rgba(3, 9, 19, .82));
  box-shadow: 0 7px 22px rgba(0, 0, 0, .48), inset 0 -1px rgba(151, 229, 237, .035);
}

body[data-active-screen="server"] .server-head h2 {
  color: #f8ffff;
  font-size: 20px;
  letter-spacing: .035em;
  text-shadow: 0 1px 0 #000, 0 0 8px rgba(102, 226, 234, .24);
}

body[data-active-screen="server"] .server-head .back-link {
  color: #58e5e8;
  filter: drop-shadow(0 0 5px rgba(58, 227, 233, .32));
}

body[data-active-screen="server"] .server-catalog-intro,
body[data-active-screen="server"] .server-note { display: none; }

body[data-active-screen="server"] .server-catalog-state {
  position: absolute;
  z-index: 2;
  top: 216px;
  left: 20px;
  right: 20px;
  margin: 0;
  color: rgba(137, 207, 220, .56);
  font: 700 7px/1 var(--font-data);
  letter-spacing: .06em;
  text-align: center;
}

body[data-active-screen="server"] .server-catalog-state[data-state="online"],
body[data-active-screen="server"] .server-catalog-state[data-state="fallback"] { opacity: 0; }

body[data-active-screen="server"] .server-screen .server-list {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 0;
  order: initial;
  margin: 16px auto 0;
  padding: 0 18px;
}

body[data-active-screen="server"] .server-screen .server-card {
  position: relative;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  width: min(100%, 302px);
  min-height: 120px;
  border: 0;
  border-radius: 0;
  padding: 6px 0;
  overflow: visible;
  color: #fff;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  text-align: left;
}

body[data-active-screen="server"] .server-screen .server-card::before {
  left: 76px;
  right: 2px;
  top: 61px;
  height: 1px;
  background: linear-gradient(90deg, rgba(87, 242, 247, .92), rgba(68, 218, 230, .16) 78%, transparent);
  box-shadow: 0 0 8px rgba(64, 231, 238, .58);
}

body[data-active-screen="server"] .server-screen .server-card::after { display: none; }
body[data-active-screen="server"] .server-screen .server-card.active { border: 0; background: transparent; }
body[data-active-screen="server"] .server-screen .server-card.is-connecting { filter: brightness(1.18); }

body[data-active-screen="server"] .server-screen .server-beacon {
  width: 74px;
  height: 74px;
  border: 2px solid rgba(147, 250, 251, .88);
  box-shadow: 0 0 10px rgba(69, 236, 241, .86), 0 0 24px rgba(48, 218, 228, .28), inset 0 0 13px rgba(105, 247, 249, .24);
}

body[data-active-screen="server"] .server-screen .server-beacon::before {
  inset: 8px;
  border: 2px dashed rgba(164, 253, 253, .9);
}

body[data-active-screen="server"] .server-screen .server-beacon::after {
  width: 34px;
  height: 34px;
  font-size: 19px;
  text-shadow: 0 0 9px #a7ffff;
}

body[data-active-screen="server"] .server-screen .server-beacon i {
  left: 2px;
  top: 4px;
  width: 9px;
  height: 9px;
  background: #efffff;
  box-shadow: 0 0 9px #7af9fc;
}

body[data-active-screen="server"] .server-screen .server-node-copy {
  min-height: 72px;
  align-content: center;
  padding-top: 0;
}

body[data-active-screen="server"] .server-screen .server-node-title strong {
  color: #fff;
  font: 900 20px/1.1 var(--font-display);
  text-shadow: 0 0 8px rgba(109, 224, 234, .28);
}

body[data-active-screen="server"] .server-screen .server-node-title b,
body[data-active-screen="server"] .server-screen .server-services,
body[data-active-screen="server"] .server-screen .server-enter { display: none; }

body[data-active-screen="server"] .server-screen .server-node-copy em {
  margin-top: 13px;
  color: #ffc64f;
  font: normal 850 12px/1 var(--font-display);
  letter-spacing: .06em;
  text-shadow: 0 0 7px rgba(255, 190, 65, .22);
}

@keyframes server-starfield-primary {
  0%, 100% { opacity: .58; }
  48% { opacity: .9; }
}

@keyframes server-starfield-secondary {
  0%, 100% { opacity: .34; }
  55% { opacity: .64; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-active-screen="server"] .server-screen::before,
  body[data-active-screen="server"] .server-screen::after { animation: none; }
}

/* Galaxy star-map stage: the first navigation row and final zoom row share one phone viewport. */
body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .galaxy-screen.active {
  display: grid !important;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  min-height: 0;
  overflow-x: hidden;
  overflow-y: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .galaxy-tabs,
body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .galaxy-terra-entry,
body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .galaxy-coordinate-strip {
  min-height: 0;
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .galaxy-terra-entry {
  padding: 4px 6px 0;
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .galaxy-terra-special {
  grid-template-columns: 36px minmax(0, 1fr) auto 8px;
  gap: 6px;
  min-height: 48px;
  border-radius: 13px;
  padding: 4px 7px;
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .galaxy-terra-special-mark {
  width: 34px;
  height: 34px;
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .galaxy-terra-special-icon {
  width: 27px;
  height: 27px;
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .galaxy-coordinate-strip {
  gap: 4px;
  padding: 3px 5px;
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .galaxy-coordinate-card {
  gap: 0;
  padding: 3px 6px;
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .star-map-tab {
  display: grid;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding-top: 3px;
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .star-map-shell {
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 3px;
  padding: 4px;
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .star-map-head {
  min-height: 27px;
  padding-bottom: 2px;
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .solar-orbit-map {
  height: 100%;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 3px;
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .solar-map-visual {
  height: 100%;
  min-height: 0;
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .solar-system-map-viewport,
body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .solar-orbit-map:has(.star-map-selected-focus) .solar-system-map-viewport {
  height: 100% !important;
  min-height: 0 !important;
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .galaxy-constellation-shell {
  height: 100%;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 3px;
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .galaxy-constellation-map {
  height: 100% !important;
  min-height: 0 !important;
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .star-map-command-dock {
  gap: 3px;
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .star-map-selection {
  min-height: 28px;
  padding: 3px 7px;
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .star-map-zoom-control {
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  gap: 4px;
  padding: 3px;
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .star-map-zoom-control > button,
body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .star-map-zoom-readout {
  min-height: 28px;
}

/* 2026-07-31 Universe map system: responsive solar stage + pannable galaxy canvas. */
.solar-system-map-viewport,
.galaxy-map-viewport {
  isolation: isolate;
  border-color: rgba(119, 217, 235, .2);
  box-shadow: inset 0 0 48px rgba(0, 0, 0, .72);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* The solar viewport is scroll-centered on a larger orbit stage. An absolutely
   positioned background child used to scroll away with that stage, exposing a
   black half of the viewport. Paint the bundled sky on the viewport itself so
   it always covers the real visible area. */
.solar-system-map-viewport {
  background:
    linear-gradient(145deg, rgba(1, 5, 13, .18), rgba(5, 10, 22, .08) 48%, rgba(15, 4, 13, .18)),
    radial-gradient(ellipse at 18% 16%, rgba(19, 80, 116, .1), transparent 42%),
    radial-gradient(ellipse at 82% 74%, rgba(105, 23, 43, .08), transparent 46%),
    url("./assets/universe/starfield-background.jpg") 44% 48% / cover no-repeat,
    #02050c;
}

.solar-system-map-viewport > .space-background { display: none; }
.galaxy-map-viewport { background: #02050c; }

.space-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    linear-gradient(145deg, rgba(1, 5, 13, .2), rgba(5, 10, 22, .12) 48%, rgba(15, 4, 13, .22)),
    radial-gradient(ellipse at 18% 16%, rgba(19, 80, 116, .12), transparent 42%),
    radial-gradient(ellipse at 82% 74%, rgba(105, 23, 43, .1), transparent 46%),
    url("./assets/universe/starfield-background.jpg") 44% 48% / cover no-repeat,
    #02050c;
}

.space-nebula,
.space-dust-band,
.space-starfield {
  position: absolute;
  inset: 0;
}

.space-nebula {
  opacity: .22;
  filter: blur(28px);
  transform: scale(1.14);
}

.space-nebula.is-cyan { background: radial-gradient(ellipse at 24% 32%, rgba(32, 145, 174, .34), transparent 34%); }
.space-nebula.is-ember { background: radial-gradient(ellipse at 77% 70%, rgba(147, 37, 48, .28), transparent 38%); }
.space-nebula.is-violet { background: radial-gradient(ellipse at 58% 16%, rgba(83, 55, 144, .25), transparent 31%); }

.space-dust-band {
  inset: -28% -20%;
  opacity: .18;
  background:
    repeating-radial-gradient(ellipse at center, rgba(173, 219, 235, .08) 0 1px, transparent 1px 12px),
    linear-gradient(13deg, transparent 37%, rgba(104, 151, 174, .1) 46%, rgba(137, 67, 85, .1) 54%, transparent 64%);
  filter: blur(1.2px);
  transform: rotate(-7deg);
}

.space-twinkle-star {
  position: absolute;
  left: var(--star-x);
  top: var(--star-y);
  width: var(--star-size);
  height: var(--star-size);
  border-radius: 50%;
  background: rgba(238, 250, 255, .92);
  box-shadow: 0 0 calc(var(--star-size) * 3) rgba(164, 226, 255, .55);
  animation: space-star-twinkle var(--star-duration) ease-in-out var(--star-delay) infinite alternate;
}

.space-twinkle-star.is-warm { background: #ffe1b0; box-shadow: 0 0 6px rgba(255, 146, 91, .5); }
.space-twinkle-star.is-blue { background: #a9e7ff; box-shadow: 0 0 7px rgba(79, 183, 255, .65); }

@keyframes space-star-twinkle {
  0%, 34% { opacity: .28; transform: scale(.76); }
  68%, 100% { opacity: .94; transform: scale(1.22); }
}

.solar-orbit-surface {
  position: relative;
  width: max(100%, calc(var(--star-map-stage-size, 1320px) * var(--star-map-scale, .5)));
  height: max(100%, calc(var(--star-map-stage-size, 1320px) * var(--star-map-scale, .5)));
  overflow: clip;
}

.solar-orbit-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: var(--star-map-stage-size, 1320px);
  height: var(--star-map-stage-size, 1320px);
  transform: translate(-50%, -50%) scale(var(--star-map-scale, .5));
  transform-origin: center;
}

.orbit-ring {
  width: calc(var(--orbit-radius) * 2);
  height: calc(var(--orbit-radius) * 2);
  aspect-ratio: auto;
  border-color: rgba(143, 201, 218, .26);
  box-shadow: inset 0 0 18px rgba(42, 116, 143, .025);
}

.orbit-ring:nth-of-type(3n) { border-color: rgba(119, 217, 235, .26); }

.orbit-planet-node {
  width: var(--standard-planet-width, 36px);
  min-height: 48px;
}

.orbit-planet-node img {
  width: 30px;
  height: 30px;
}

.solar-core {
  z-index: 4;
  width: var(--sun-diameter, 104px);
  height: var(--sun-diameter, 104px);
  pointer-events: none;
}

/* High-energy stellar body. Every visual layer is inert so its wide glow never
   expands the hit area of the solar-system map. */
.solar-core.stellar-star {
  isolation: isolate;
  width: var(--sun-diameter, 82px);
  height: var(--sun-diameter, 82px);
  aspect-ratio: 1;
  contain: layout style;
  pointer-events: auto;
  cursor: pointer;
}

.solar-core.stellar-star > .stellar-outer-halo,
.solar-core.stellar-star > .stellar-corona,
.solar-core.stellar-star > .stellar-body-visual,
.solar-core.stellar-star > .stellar-particles {
  position: absolute;
  display: block;
  width: auto;
  height: auto;
  border: 0;
  background: none;
  box-shadow: none;
  pointer-events: none;
}

.solar-core.stellar-star > .stellar-outer-halo {
  inset: -52%;
  z-index: -5;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 252, 218, .2) 0 19%, rgba(255, 211, 100, .18) 31%, rgba(255, 133, 48, .11) 48%, rgba(222, 66, 30, .045) 62%, transparent 75%),
    radial-gradient(ellipse at 62% 42%, rgba(255, 179, 66, .1), transparent 58%),
    radial-gradient(ellipse at 34% 69%, rgba(214, 66, 28, .07), transparent 53%);
  filter: blur(12px);
  opacity: .82;
  animation: stellar-outer-halo-breathe 11.8s ease-in-out -3.1s infinite alternate;
}

.solar-core.stellar-star > .stellar-corona {
  inset: -29%;
  z-index: -4;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 58% 8%, rgba(255, 239, 166, .31), transparent 23%),
    radial-gradient(ellipse at 91% 59%, rgba(255, 157, 55, .24), transparent 28%),
    radial-gradient(ellipse at 24% 82%, rgba(235, 78, 27, .18), transparent 31%),
    radial-gradient(ellipse at 9% 37%, rgba(255, 195, 72, .17), transparent 24%),
    radial-gradient(circle, transparent 0 48%, rgba(255, 219, 116, .24) 57%, rgba(255, 127, 41, .12) 68%, transparent 79%);
  filter: blur(3.5px) saturate(1.08);
  opacity: .88;
  animation: stellar-corona-drift 15.6s ease-in-out -6.4s infinite alternate;
}

.stellar-corona > i {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 223, 129, .24), rgba(255, 116, 37, .09) 48%, transparent 73%);
  filter: blur(6px);
}
.stellar-corona-near { inset: 4% 31% 55% -4%; transform: rotate(-17deg); animation: stellar-corona-lobe-a 13.7s ease-in-out -2.6s infinite alternate; }
.stellar-corona-far { inset: 52% -2% 2% 47%; transform: rotate(24deg); animation: stellar-corona-lobe-b 18.2s ease-in-out -8.3s infinite alternate; }

.solar-core.stellar-star > .stellar-prominences {
  inset: -20%;
  z-index: 0;
  overflow: visible;
}

.stellar-eruption {
  transform-box: fill-box;
  transform-origin: center;
  will-change: opacity, transform;
}
.stellar-eruption-arc { animation: stellar-eruption-arc-live 16.8s ease-in-out -6.7s infinite alternate; }
.stellar-eruption-surge { animation: stellar-eruption-surge-live 12.9s ease-in-out -3.2s infinite alternate; }
.stellar-eruption-low { animation: stellar-eruption-low-live 19.4s ease-in-out -10.1s infinite alternate; }

.solar-core.stellar-star > .stellar-edge-flames {
  inset: -12%;
  z-index: 1;
  overflow: visible;
  filter: drop-shadow(0 0 5px rgba(255, 121, 38, .5));
}

.stellar-limb-flow {
  transform-box: fill-box;
  transform-origin: center;
  opacity: .48;
  will-change: opacity, transform;
}
.stellar-limb-flow-a { animation: stellar-limb-flow-a 11.6s ease-in-out -4.2s infinite alternate; }
.stellar-limb-flow-b { animation: stellar-limb-flow-b 14.9s ease-in-out -9.1s infinite alternate; }
.stellar-limb-flow-c { animation: stellar-limb-flow-c 9.8s ease-in-out -1.7s infinite alternate; }

.solar-core.stellar-star > .stellar-photosphere {
  inset: 4%;
  z-index: 2;
  overflow: hidden;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 37% 31%, rgba(255, 255, 251, .98) 0 6%, rgba(255, 247, 190, .8) 12%, transparent 27%),
    radial-gradient(ellipse at 66% 25%, rgba(255, 239, 146, .68) 0 9%, rgba(255, 201, 72, .18) 19%, transparent 31%),
    radial-gradient(ellipse at 73% 67%, rgba(178, 47, 18, .62) 0 9%, rgba(224, 72, 22, .3) 19%, transparent 36%),
    radial-gradient(ellipse at 29% 72%, rgba(190, 51, 18, .52) 0 9%, rgba(239, 99, 27, .22) 20%, transparent 34%),
    radial-gradient(ellipse at 51% 52%, rgba(255, 232, 126, .18) 0 27%, rgba(191, 54, 18, .13) 49%, transparent 69%),
    radial-gradient(circle at 49% 47%, #fffbdc 0 8%, #ffe79b 18%, #ffd25d 39%, #ffa437 65%, #f16c24 84%, #d94d20 100%);
  box-shadow:
    0 0 5px rgba(255, 255, 228, .98),
    0 0 18px rgba(255, 208, 93, .9),
    0 0 39px rgba(255, 113, 31, .52);
  animation: stellar-photosphere-breathe 9.8s ease-in-out -3.6s infinite alternate;
}

.stellar-plasma-texture,
.stellar-convection,
.stellar-hotspots,
.stellar-core-light {
  position: absolute;
  display: block;
  pointer-events: none;
}

.stellar-plasma-texture {
  inset: -3%;
  width: 106%;
  height: 106%;
  opacity: .72;
  mix-blend-mode: normal;
  animation: stellar-plasma-flow 23.4s ease-in-out -8s infinite alternate;
}

.stellar-noise-field { fill: #d84c1f; opacity: .66; mix-blend-mode: soft-light; }
.stellar-plasma-stream {
  fill: none;
  stroke: rgba(255, 249, 203, .58);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 20 11 38 17;
  mix-blend-mode: screen;
  animation: stellar-plasma-stream 18s linear infinite;
}
.stellar-plasma-stream-b { stroke: rgba(154, 40, 17, .68); stroke-width: 4.2; animation-duration: 24s; animation-direction: reverse; mix-blend-mode: multiply; }
.stellar-plasma-stream-c { stroke: rgba(255, 225, 116, .48); stroke-width: 2; animation-duration: 29s; }

.stellar-convection {
  inset: 0;
  opacity: .72;
  background:
    radial-gradient(ellipse at 19% 30%, rgba(255, 254, 218, .58) 0 4%, transparent 17%),
    radial-gradient(ellipse at 39% 55%, rgba(153, 36, 15, .47) 0 6%, transparent 21%),
    radial-gradient(ellipse at 62% 20%, rgba(255, 244, 176, .5) 0 4%, transparent 16%),
    radial-gradient(ellipse at 79% 47%, rgba(163, 39, 16, .44) 0 6%, transparent 19%),
    radial-gradient(ellipse at 61% 79%, rgba(255, 218, 100, .48) 0 5%, transparent 18%),
    radial-gradient(ellipse at 25% 81%, rgba(155, 35, 15, .4) 0 5%, transparent 17%);
  filter: blur(.8px);
  mix-blend-mode: overlay;
  animation: stellar-convection-shift 16.8s ease-in-out -5.8s infinite alternate;
}

.stellar-hotspots { inset: 0; }
.stellar-hotspots > b { position: absolute; display: block; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 255, 242, .83), rgba(255, 223, 116, .42) 36%, transparent 73%); filter: blur(.7px); animation: stellar-hotspot-live var(--hot-duration, 9s) ease-in-out var(--hot-delay, 0s) infinite alternate; }
.stellar-hotspots > b:nth-child(1) { left: 18%; top: 20%; width: 18%; height: 11%; --hot-duration: 9.4s; --hot-delay: -2.8s; }
.stellar-hotspots > b:nth-child(2) { right: 15%; top: 37%; width: 11%; height: 16%; --hot-duration: 12.7s; --hot-delay: -7.2s; }
.stellar-hotspots > b:nth-child(3) { left: 42%; bottom: 14%; width: 21%; height: 9%; --hot-duration: 15.1s; --hot-delay: -5.3s; }
.stellar-hotspots > b:nth-child(4) { left: 12%; bottom: 36%; width: 9%; height: 13%; --hot-duration: 10.6s; --hot-delay: -8.4s; }

.stellar-core-light {
  inset: 13%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 43% 39%, rgba(255, 255, 252, .78), rgba(255, 250, 205, .29) 45%, transparent 74%);
  filter: blur(1.2px);
  mix-blend-mode: screen;
  animation: stellar-core-light-live 13.2s ease-in-out -5.1s infinite alternate;
}

.solar-core.stellar-star > .stellar-particles { inset: -28%; z-index: 3; }
.stellar-particles > i {
  position: absolute;
  display: block;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff2ad;
  box-shadow: 0 0 5px rgba(255, 116, 37, .7);
  opacity: 0;
  animation: stellar-particle-eject var(--particle-duration, 10s) ease-out var(--particle-delay, 0s) infinite;
}
.stellar-particles > i:nth-child(1) { left: 67%; top: 8%; --particle-x: 8px; --particle-y: -19px; --particle-duration: 11.1s; --particle-delay: -2.3s; }
.stellar-particles > i:nth-child(2) { right: 5%; top: 43%; --particle-x: 21px; --particle-y: -4px; --particle-duration: 14.7s; --particle-delay: -9.2s; }
.stellar-particles > i:nth-child(3) { left: 23%; bottom: 8%; --particle-x: -12px; --particle-y: 17px; --particle-duration: 12.3s; --particle-delay: -6.7s; }
.stellar-particles > i:nth-child(4) { left: 7%; top: 39%; --particle-x: -18px; --particle-y: -7px; --particle-duration: 16.1s; --particle-delay: -12.8s; }
.stellar-particles > i:nth-child(5) { right: 24%; bottom: 7%; --particle-x: 9px; --particle-y: 18px; --particle-duration: 13.9s; --particle-delay: -4.9s; }

.solar-core.stellar-star strong {
  top: calc(100% + 12px);
  z-index: 4;
  width: max-content;
  padding: 3px 8px;
  border: 1px solid rgba(255, 194, 80, .18);
  border-radius: 999px;
  background: rgba(22, 9, 5, .62);
  color: #fff0ba;
  font-size: 10px;
  letter-spacing: .15em;
  text-shadow: 0 0 8px rgba(255, 177, 64, .72);
}

@keyframes stellar-outer-halo-breathe { from { opacity: .72; transform: scale(.97); } to { opacity: .9; transform: scale(1.035); } }
@keyframes stellar-corona-drift { from { transform: translate(-1.1%, .7%) scale(.985); opacity: .72; } to { transform: translate(1%, -.8%) scale(1.025); opacity: .92; } }
@keyframes stellar-corona-lobe-a { from { transform: rotate(-17deg) scale(.9); opacity: .35; } to { transform: rotate(-13deg) scale(1.08); opacity: .68; } }
@keyframes stellar-corona-lobe-b { from { transform: rotate(24deg) scale(.94); opacity: .3; } to { transform: rotate(20deg) scale(1.07); opacity: .62; } }
@keyframes stellar-eruption-arc-live { from { opacity: .28; transform: translate(1px, 2px) scale(.96); } to { opacity: .56; transform: translate(-1px, -1px) scale(1.025); } }
@keyframes stellar-eruption-surge-live { from { opacity: .2; transform: translate(-1px, 1px) scale(.94); } to { opacity: .46; transform: translate(1px, -2px) scale(1.035); } }
@keyframes stellar-eruption-low-live { from { opacity: .15; transform: translate(1px, -1px) scale(.97); } to { opacity: .35; transform: translate(-1px, 1px) scale(1.02); } }
@keyframes stellar-limb-flow-a { from { opacity: .24; transform: translate(1px, 1px) scale(.96); } to { opacity: .5; transform: translate(-1px, -1px) scale(1.025); } }
@keyframes stellar-limb-flow-b { from { opacity: .2; transform: translate(-1px, 0) scale(.95); } to { opacity: .46; transform: translate(1px, -1px) scale(1.03); } }
@keyframes stellar-limb-flow-c { from { opacity: .21; transform: translate(1px, -1px) scale(.97); } to { opacity: .42; transform: translate(-1px, 1px) scale(1.02); } }
@keyframes stellar-photosphere-breathe { from { filter: brightness(.99) saturate(1.02) contrast(1.035); } to { filter: brightness(1.045) saturate(1.07) contrast(1.075); } }
@keyframes stellar-plasma-flow { from { transform: translate(-1.1%, .8%) scale(1.01); opacity: .39; } to { transform: translate(1.2%, -.9%) scale(1.035); opacity: .52; } }
@keyframes stellar-plasma-stream { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -76; } }
@keyframes stellar-convection-shift { from { transform: translate(-1px, 1px) scale(1.005); opacity: .46; } to { transform: translate(2px, -1px) scale(1.025); opacity: .61; } }
@keyframes stellar-hotspot-live { from { opacity: .38; transform: scale(.88); } to { opacity: .84; transform: scale(1.1); } }
@keyframes stellar-core-light-live { from { opacity: .52; transform: translate(-1%, .7%) scale(.97); } to { opacity: .78; transform: translate(1%, -.7%) scale(1.035); } }
@keyframes stellar-particle-eject { 0%, 31% { opacity: 0; transform: translate(0, 0) scale(.5); } 47% { opacity: .68; } 100% { opacity: 0; transform: translate(var(--particle-x), var(--particle-y)) scale(.08); } }

/* Realistic stellar sprite + low-cost procedural atmosphere. The sprite owns
   the photosphere, convection texture and asymmetric prominences; CSS only
   animates the surrounding corona so the body never becomes a glassy orb. */
.solar-core.stellar-star > .stellar-outer-halo {
  width: var(--sun-corona-diameter, 126px);
  height: var(--sun-corona-diameter, 126px);
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  background: radial-gradient(circle, rgba(255, 248, 211, .24) 0 23%, rgba(255, 196, 78, .16) 35%, rgba(255, 108, 33, .07) 53%, transparent 73%);
  filter: blur(10px);
  opacity: .84;
}

.solar-core.stellar-star > .stellar-corona {
  inset: -28%;
  background:
    radial-gradient(ellipse at 76% 17%, rgba(255, 224, 135, .24), transparent 27%),
    radial-gradient(ellipse at 94% 61%, rgba(255, 132, 43, .15), transparent 31%),
    radial-gradient(ellipse at 17% 78%, rgba(225, 76, 27, .13), transparent 33%),
    radial-gradient(circle, transparent 0 45%, rgba(255, 213, 106, .15) 56%, rgba(255, 112, 35, .07) 69%, transparent 79%);
  filter: blur(4px);
  opacity: .78;
}

.solar-core.stellar-star > .stellar-body-visual {
  inset: -28%;
  z-index: 2;
  overflow: visible;
  contain: layout paint style;
}

.stellar-body-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 1;
  filter: saturate(1.03) contrast(1.045) brightness(1.04) drop-shadow(0 0 7px rgba(255, 184, 64, .44));
  transform: translateZ(0);
  user-select: none;
  -webkit-user-drag: none;
  animation: stellar-body-live 18s ease-in-out -7s infinite alternate;
}

.stellar-plasma-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  opacity: .54;
  mix-blend-mode: screen;
  pointer-events: none;
}

.stellar-local-flare {
  position: absolute;
  z-index: 3;
  display: block;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(4px);
}

.stellar-local-flare-a {
  top: 24%;
  right: 19%;
  width: 18%;
  height: 10%;
  background: radial-gradient(ellipse, rgba(255, 249, 207, .36), rgba(255, 173, 57, .08) 58%, transparent 76%);
  transform: rotate(-27deg);
  animation: stellar-local-flare-a-live 12.8s ease-in-out -4.3s infinite alternate;
}

.stellar-local-flare-b {
  left: 18%;
  bottom: 25%;
  width: 13%;
  height: 8%;
  background: radial-gradient(ellipse, rgba(255, 232, 155, .25), rgba(255, 111, 30, .06) 60%, transparent 78%);
  transform: rotate(21deg);
  animation: stellar-local-flare-b-live 16.3s ease-in-out -9.1s infinite alternate;
}

@keyframes stellar-body-live {
  from { transform: translate3d(-.35%, .2%, 0) scale(.996); filter: saturate(1.01) contrast(1.04) brightness(1.02) drop-shadow(0 0 6px rgba(255, 178, 58, .39)); }
  to { transform: translate3d(.3%, -.25%, 0) scale(1.006); filter: saturate(1.045) contrast(1.055) brightness(1.055) drop-shadow(0 0 8px rgba(255, 190, 72, .48)); }
}

@keyframes stellar-local-flare-a-live { from { opacity: .22; transform: rotate(-27deg) scale(.92); } to { opacity: .48; transform: rotate(-24deg) scale(1.08); } }
@keyframes stellar-local-flare-b-live { from { opacity: .16; transform: rotate(21deg) scale(.9); } to { opacity: .36; transform: rotate(18deg) scale(1.06); } }

.app-screen:not(.active) .stellar-star *,
body:not([data-active-screen="galaxy"]) .stellar-star *,
.star-map-tab[hidden] .stellar-star *,
.stellar-motion-paused .stellar-star * { animation-play-state: paused !important; }

@media (max-width: 359px) {
  .ship-production-capacity { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .technology-requirements-complete > summary { align-items: flex-start; }
  .technology-requirements-complete > summary strong { max-width: 44%; text-align: right; white-space: normal; }
  .technology-requirements-complete .item-requirement-node { grid-template-columns: 42px minmax(0, 1fr); }
  .technology-requirements-complete .item-requirement-node b {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
  }
  .unlock-missing-panel { margin: 6px; padding: 8px; }
  .unlock-missing-panel > header { align-items: flex-start; }
  .unlock-missing-panel .item-requirement-node { grid-template-columns: 42px minmax(0, 1fr); }
  .unlock-missing-panel .item-requirement-node b { grid-column: 2; grid-row: 3; justify-self: start; }
  .stellar-outer-halo { filter: blur(8px) !important; }
  .stellar-particles > i:nth-child(n + 4) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .stellar-outer-halo,
  .stellar-corona,
  .stellar-corona > i,
  .stellar-eruption,
  .stellar-limb-flow,
  .stellar-photosphere,
  .stellar-plasma-texture,
  .stellar-plasma-stream,
  .stellar-convection,
  .stellar-hotspots > b,
  .stellar-core-light,
  .stellar-body-image,
  .stellar-plasma-canvas,
  .stellar-local-flare,
  .stellar-particles > i { animation: none !important; }
  .stellar-particles > i { display: none; }
}

.galaxy-constellation-map::before,
.galaxy-constellation-map::after { display: none; }

.galaxy-map-viewport {
  position: relative;
  overflow: hidden;
  cursor: grab;
  outline: none;
}

.galaxy-map-viewport.is-panning { cursor: grabbing; }
.galaxy-map-viewport:focus-visible { box-shadow: inset 0 0 0 2px rgba(125, 246, 255, .5), inset 0 0 48px rgba(0, 0, 0, .72); }

.galaxy-map-canvas {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: var(--galaxy-canvas-width);
  height: var(--galaxy-canvas-height);
  transform-origin: 0 0;
  will-change: transform;
}

.galaxy-distant-band {
  position: absolute;
  inset: 10% 4%;
  z-index: 0;
  border-radius: 50%;
  background: linear-gradient(11deg, transparent 35%, rgba(70, 151, 172, .08) 47%, rgba(148, 53, 76, .07) 53%, transparent 65%);
  filter: blur(18px);
  transform: rotate(-8deg);
  pointer-events: none;
}

.galaxy-connection-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.galaxy-route path { fill: none; vector-effect: non-scaling-stroke; }
.galaxy-route-glow { stroke: rgba(70, 197, 229, .18); stroke-width: 8; filter: blur(4px); }
.galaxy-route-core { stroke: url(#galaxy-route-gradient); stroke: rgba(130, 223, 239, .42); stroke-width: 1.5; }
.galaxy-route-pulse {
  stroke: rgba(217, 252, 255, .68);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 4 22;
  animation: galaxy-route-flow 8s linear infinite;
}

@keyframes galaxy-route-flow { to { stroke-dashoffset: -104; } }

.solar-system-node {
  left: var(--node-x);
  top: var(--node-y);
  width: 52px;
  min-width: 52px;
  min-height: 52px;
  place-items: center;
  cursor: pointer;
  touch-action: manipulation;
}

.node-aura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--node-color), transparent 58%);
  border-radius: 50%;
  box-shadow: 0 0 13px color-mix(in srgb, var(--node-color), transparent 58%);
  transform: translate(-50%, -62%);
  animation: galaxy-node-breathe 4.6s ease-in-out infinite alternate;
}

.node-dot {
  position: relative;
  z-index: 2;
  width: 17px;
  height: 17px;
  border-width: 1px;
  box-shadow: inset -3px -3px 5px rgba(0, 0, 0, .38), 0 0 12px color-mix(in srgb, var(--node-color), transparent 30%);
}

.solar-system-node strong { position: relative; z-index: 3; margin-top: -5px; font: 900 10px/1 var(--font-data); }
.solar-system-node.active .node-aura { border-color: rgba(188, 247, 255, .8); box-shadow: 0 0 20px rgba(96, 224, 246, .64); }
.solar-system-node.active .node-dot { transform: scale(1.14); }
.solar-system-node.is-selected { filter: brightness(1.16); }
.solar-system-node.is-selected::after { content: "已选定"; position: absolute; top: calc(100% - 4px); left: 50%; z-index: 5; padding: 2px 5px; border: 1px solid color-mix(in srgb, var(--node-color) 56%, transparent); border-radius: 999px; background: rgba(2, 11, 18, .84); color: #efffff; font-size: 7px; white-space: nowrap; transform: translateX(-50%); }
.solar-system-node.is-npc-system { width: 76px; min-width: 76px; min-height: 76px; }

@keyframes galaxy-node-breathe { from { opacity: .42; transform: translate(-50%, -62%) scale(.9); } to { opacity: .92; transform: translate(-50%, -62%) scale(1.12); } }

.galaxy-camera-controls {
  position: absolute;
  right: max(8px, env(safe-area-inset-right));
  bottom: max(9px, env(safe-area-inset-bottom));
  z-index: 4;
  display: grid;
  grid-template-columns: 38px 58px 38px;
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(132, 224, 238, .22);
  border-radius: 999px;
  background: rgba(3, 12, 20, .72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 7px 22px rgba(0, 0, 0, .32);
}

.galaxy-camera-controls button {
  min-width: 0;
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  background: rgba(24, 72, 84, .54);
  color: #e9fdff;
  font: 900 16px/1 var(--font-data);
}

.galaxy-camera-controls button:nth-child(2) { background: rgba(5, 23, 32, .84); font-size: 9px; }
.galaxy-camera-controls button:active { transform: scale(.94); background: rgba(45, 113, 126, .72); }
.galaxy-camera-controls button:focus-visible { outline: 2px solid #7df6ff; outline-offset: 1px; }

.galaxy-camera-hint {
  position: absolute;
  left: max(8px, env(safe-area-inset-left));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 5px;
  color: rgba(199, 235, 240, .55);
  font: 800 7px/1 var(--font-data);
  letter-spacing: .08em;
  pointer-events: none;
}

.galaxy-camera-hint i { width: 14px; height: 1px; background: linear-gradient(90deg, transparent, rgba(125, 246, 255, .58), transparent); }

@media (max-width: 359px) {
  .galaxy-camera-hint span:last-child,
  .galaxy-camera-hint i { display: none; }
  .galaxy-camera-controls { grid-template-columns: 36px 52px 36px; }
  .galaxy-camera-controls button { min-height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .space-twinkle-star,
  .galaxy-route-pulse,
  .node-aura { animation: none !important; }
}

/* 2026-10-19 alien / dark-alien complete reward disclosure. */
.galaxy-selected-intel .alien-reward-panel {
  display: grid;
  gap: 7px;
  margin-top: 8px;
  border: 1px solid color-mix(in srgb, var(--alien-accent, #6fe6f2) 28%, transparent);
  border-radius: 11px;
  padding: 9px;
  background: linear-gradient(150deg, rgb(255 255 255 / .05), transparent 40%), rgb(3 12 17 / .72);
  box-shadow: inset 0 1px rgb(255 255 255 / .08);
}
.galaxy-selected-intel .alien-reward-panel > header { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 8px; align-items: end; }
.galaxy-selected-intel .alien-reward-panel > header span { grid-column: 1; color: #ffca70; font: 800 7px var(--ref-font-data); letter-spacing: .12em; }
.galaxy-selected-intel .alien-reward-panel > header strong { grid-column: 1; color: #f1ffff; font-size: 12px; }
.galaxy-selected-intel .alien-reward-panel > header em { grid-column: 2; grid-row: 1 / 3; align-self: center; border: 1px solid rgb(255 202 112 / .25); border-radius: 6px; padding: 3px 5px; color: #ffca70; font-size: 8px; font-style: normal; }
.galaxy-selected-intel .alien-reward-panel > p { margin: 0; color: #8faeb6; font-size: 8px; line-height: 1.5; }
.galaxy-selected-intel .alien-reward-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.galaxy-selected-intel .alien-reward-grid > div { border: 1px solid rgb(112 208 223 / .13); border-radius: 7px; padding: 5px 6px; background: rgb(2 10 14 / .5); }
.galaxy-selected-intel .alien-reward-grid span { display: block; color: #7f9ba3; font-size: 7px; }
.galaxy-selected-intel .alien-reward-grid b { display: block; margin-top: 2px; color: #e8ffff; font: 800 10px var(--ref-font-data); }
.galaxy-selected-intel .alien-reward-stages { display: grid; gap: 4px; }
.galaxy-selected-intel .alien-reward-stages article { display: grid; grid-template-columns: 54px minmax(0,1fr) auto; align-items: center; gap: 6px; border: 1px solid rgb(255 198 110 / .16); border-radius: 8px; padding: 6px 7px; background: linear-gradient(90deg, rgb(255 190 90 / .07), rgb(2 10 14 / .5)); }
.galaxy-selected-intel .alien-reward-stages article header { display: flex; flex-direction: column; gap: 1px; }
.galaxy-selected-intel .alien-reward-stages article header span { color: #ffd78e; font: 800 8px var(--ref-font-data); white-space: nowrap; }
.galaxy-selected-intel .alien-reward-stages article header b { color: #fff3d8; font: 800 11px var(--ref-font-data); }
.galaxy-selected-intel .alien-reward-stages article p { margin: 0; color: #b8d6dc; font-size: 8px; line-height: 1.4; }
.galaxy-selected-intel .alien-reward-stages article small { color: #75e5ee; font-size: 8px; white-space: nowrap; }
.galaxy-selected-intel .alien-reward-panel.colony { --alien-accent: #78e8b0; border-color: rgb(120 232 176 / .26); }
.galaxy-selected-intel .alien-reward-panel.colony > header span { color: #78e8b0; }
.galaxy-selected-intel .alien-reward-panel.colony > header em { border-color: rgb(120 232 176 / .24); color: #78e8b0; }
.galaxy-selected-intel .alien-buff-preview { border-color: rgb(110 230 242 / .24); background: linear-gradient(130deg, rgb(71 206 225 / .1), rgb(2 10 15 / .62)); }
.galaxy-selected-intel .alien-direct-reward { border-color: rgb(255 201 111 / .28); background: linear-gradient(90deg, rgb(255 190 80 / .09), rgb(2 10 14 / .55)); }
@media (max-width: 360px) {
  .galaxy-selected-intel .alien-reward-stages article { grid-template-columns: 48px minmax(0,1fr); }
  .galaxy-selected-intel .alien-reward-stages article small { grid-column: 2; }
}

/* 2026-10-20 stability pass: module plates and controls stay static. */
button, [role="button"],
.game-item-card, .production-card, .defense-card, .dispatch-card, .build-card, .module-card,
.campaign-brief, .resource-hud, .resource-panel, .resource-detail-row,
.command-queue-visual, .command-queue-meter-fill, .construction-stage,
.blueprint-card, .special-center-summary,
.mail-screen .mail-card, .mail-screen .mail-detail-card, .mail-screen .mail-report-terminal,
.mail-screen .mail-colonize-sheet, .mail-screen .mail-scout-sheet,
.fleet-mission-card, .fleet-step-panel, .step-three-mission-button, .fleet-target-type-card,
.mission-task-icon, .fleet-route-pulse, .planet-showcase, .moon-showcase,
.galaxy-row, .galaxy-selected-intel, .terra-map-node, .terra-map-npc, .terra-core-halo,
.terra-map-lane, .terra-system-tabs button, .terra-map-legend,
.game-item-card::before, .game-item-card::after,
.production-card::before, .production-card::after,
.defense-card::before, .defense-card::after,
.dispatch-card::before, .dispatch-card::after,
.build-card::before, .build-card::after,
.command-queue-visual::before, .command-queue-visual::after,
.construction-stage::before, .construction-stage::after,
.blueprint-card::before, .blueprint-card::after,
.mail-screen .mail-card::before, .mail-screen .mail-card::after,
.mail-screen .mail-detail-card::before, .mail-screen .mail-detail-card::after,
.mail-screen .mail-report-terminal::before, .mail-screen .mail-report-terminal::after,
.fleet-mission-card::before, .fleet-mission-card::after,
.step-three-mission-button::before, .step-three-mission-button::after,
.fleet-target-type-card::before, .fleet-target-type-card::after,
.mission-task-icon::before, .mission-task-icon::after,
.fleet-route-pulse::before, .fleet-route-pulse::after,
.planet-showcase::before, .planet-showcase::after,
.moon-showcase::before, .moon-showcase::after,
.terra-map-node::before, .terra-map-node::after,
.terra-map-npc::before, .terra-map-npc::after,
.terra-core-halo::before, .terra-core-halo::after,
.terra-system-tabs button::before, .terra-system-tabs button::after {
  animation: none !important;
  animation-name: none !important;
}
.terra-map-node, .terra-map-npc { transition: box-shadow .15s ease, border-color .15s ease, color .15s ease; }
.terra-map-node.selected, .terra-map-npc.selected { transform: translate(-50%, -50%) !important; }
.terra-system-tabs button:active { transform: none !important; }
button::before, button::after, [role="button"]::before, [role="button"]::after { animation: none !important; animation-name: none !important; }
.app-screen.active { animation: none !important; }
.terra-system-page, .terra-screen, [data-terra-system-page] { scroll-behavior: auto !important; }

.planet-facts-panel > header .planet-rename-inline {
  justify-self: end;
  min-height: 26px;
  border: 1px solid rgba(105, 226, 238, .32);
  border-radius: 7px;
  padding: 0 9px;
  color: #bff6fb;
  background: rgba(4, 24, 30, .72);
  font: 800 9px var(--ref-font-data, sans-serif);
  letter-spacing: .08em;
}
.planet-facts-panel > header .planet-rename-inline:active { border-color: #79ebf5; color: #fff; }

/* Design center: no photo plate. Dark technical glass only, fixed between renders. */
.special-center-screen,
.special-center-screen.uc-surface-art,
.special-center-screen[data-surface-art="true"] {
  background:
    radial-gradient(70% 35% at 85% 0%, rgba(36, 152, 151, .16), transparent 70%),
    radial-gradient(45% 30% at 0% 60%, rgba(32, 86, 112, .13), transparent 75%),
    linear-gradient(180deg, #031015 0%, #020a0e 58%, #010608 100%) !important;
  background-image:
    radial-gradient(70% 35% at 85% 0%, rgba(36, 152, 151, .16), transparent 70%),
    radial-gradient(45% 30% at 0% 60%, rgba(32, 86, 112, .13), transparent 75%),
    linear-gradient(180deg, #031015 0%, #020a0e 58%, #010608 100%) !important;
}
.special-center-screen::before,
.special-center-screen::after,
.special-center-screen .special-center-head::before,
.special-center-screen .special-center-head::after { background-image: none !important; animation: none !important; }
.special-center-screen .special-center-summary {
  border-color: rgba(79, 213, 205, .30);
  background: linear-gradient(100deg, rgba(8, 37, 41, .86), rgba(2, 12, 16, .96)) !important;
  box-shadow: inset 0 1px rgba(160, 255, 245, .06), 0 8px 22px rgba(0, 0, 0, .35);
}
.special-center-screen .blueprint-card {
  background: linear-gradient(160deg, rgba(7, 24, 29, .96), rgba(1, 8, 11, .98)) !important;
  box-shadow: inset 0 1px rgba(164, 255, 247, .05);
}
.special-center-screen .blueprint-card > img { filter: saturate(.72) brightness(.72); }

.planet-cycle-bar {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  pointer-events: none;
}
.planet-cycle-bar[hidden] { display: none !important; }
.planet-cycle-bar button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .98);
  border-radius: 50%;
  color: #1b5d68;
  background: linear-gradient(145deg, #ffffff 0%, #f5feff 48%, #dcf8fc 100%);
  font: 900 27px/1 var(--ref-font-data, sans-serif);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18), 0 0 20px rgba(190, 249, 255, .42), inset 0 1px 1px #ffffff, inset 0 -2px 5px rgba(155, 226, 235, .22);
  pointer-events: auto;
}
.planet-cycle-bar button:active { background: linear-gradient(145deg, #ffffff, #e8fcff); transform: scale(.95); }
.planet-arrow { display: none !important; }


/* 2026-10-23 texture-fit audit: source art is rectangular; never crop item/detail art. */
.game-item-card-cover img,
.building-cover img,
.construction-stage img,
.system-cover img,
.system-item img,
.command-queue-thumb img,
.fleet-ship-row img,
.fleet-task-card img,
.shop-card img,
.special-center-summary > img,
.blueprint-cover img,
.zion-crystal-card img,
.zion-recipe-flow img,
.game-item-card-cover img {
  object-fit: cover !important;
  object-position: center center !important;
  max-width: 100% !important;
  max-height: 100% !important;
  transform: none !important;
}
.game-item-card-cover {
  aspect-ratio: 2368 / 1664 !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden;
}
.building-cover,
.construction-stage,
.system-cover,
.system-item {
  overflow: hidden;
}
.game-item-card.active .game-item-card-cover img { transform: none !important; }
/* Reference/fleet cards */
.research-category-card > .research-category-art,
.research-category-toolbar > .research-category-art,
.fleet-ship-row > img,
.fleet-mission-icon img,
.special-center-summary > img,
.blueprint-cover img,
.shop-purchase-card > img,
.strategic-type-selector img {
  object-fit: cover !important;
  object-position: center center !important;
  max-width: 100% !important;
  max-height: 100% !important;
  transform: none !important;
}


/* 2026-10-23 planet buff/debuff and stronghold ownership markers */
.planet-effects-panel .planet-effect-group {
  display: grid;
  gap: 4px;
  margin: 0 8px 7px;
  padding: 6px;
  border: 1px solid rgba(106, 224, 238, .16);
  border-radius: 7px;
  background: rgba(3, 18, 24, .46);
}
.planet-effects-panel .planet-effect-group.debuff {
  border-color: rgba(255, 111, 126, .30);
  background: linear-gradient(135deg, rgba(55, 12, 20, .48), rgba(20, 8, 14, .58));
}
.planet-effects-panel .planet-effect-group > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #8feaf4;
  font: 800 8px var(--ref-font-data);
  letter-spacing: .08em;
}
.planet-effects-panel .planet-effect-group.debuff > header { color: #ff9eaa; }
.planet-effects-panel .planet-effect-group > header em { color: rgba(211, 245, 250, .55); font-style: normal; }
.planet-effect-chip.buff { border-color: rgba(89, 220, 180, .42); }
.planet-effects-panel .planet-effect-chip.debuff { border-color: rgba(255, 102, 122, .48); background: rgba(44, 8, 16, .55); color: #ffd9de; }
.planet-effects-panel .planet-effect-chip.debuff span { color: #ff9eaa; border-color: rgba(255, 109, 128, .45); background: radial-gradient(circle, rgba(120, 24, 40, .65), rgba(24, 5, 11, .96)); }
.planet-effects-panel .planet-effect-chip em { color: #8be7c1; font: 800 7px var(--ref-font-data); font-style: normal; }
.planet-effects-panel .planet-effect-chip.debuff em { color: #ff9eaa; }
.planet-effect-detail.debuff { border-color: rgba(255, 99, 119, .45); }
.planet-effects-panel .planet-effect-detail.debuff h3,
.planet-effects-panel .planet-effect-detail.debuff strong { color: #ff9eaa; }
.stronghold-owner-badge,
.star-map-owner-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  margin: 4px 0;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--owner-color, #f2c66d), transparent 42%);
  border-radius: 5px;
  color: var(--owner-color, #f2c66d);
  background: color-mix(in srgb, var(--owner-color, #f2c66d), transparent 88%);
  font: 800 8px var(--ref-font-data);
  letter-spacing: .04em;
}
.stronghold-owner-badge span { color: rgba(232, 250, 252, .58); font-weight: 700; }
.star-map-owner-badge { margin: 3px 0 0; font-size: 8px; }


/* 2026-10-23 mobile hardening: full-bleed shell, compact mission icons, star-map fills viewport. */
@media (max-width: 1024px), (pointer: coarse) {
  body.game-active .studio-shell {
    display: block;
    place-items: stretch;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0;
  }
  body.game-active .game-root {
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }
}

@media (max-width: 520px) {
  .fleet-mission-grid {
    gap: 4px;
    padding: 6px 4px 8px;
  }
  .fleet-mission-grid button {
    min-height: 76px !important;
    gap: 2px;
    padding: 3px 1px !important;
    border-radius: 5px;
  }
  .fleet-mission-icon {
    width: 42px !important;
    height: 42px !important;
  }
  .fleet-mission-grid button strong {
    max-width: 100%;
    font-size: 8px !important;
  }
  .fleet-mission-grid button em {
    display: none !important;
  }
  .fleet-mission-grid .mission-type-hex-art {
    width: 42px !important;
    height: 42px !important;
  }
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .solar-orbit-map {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 8px;
  min-height: 0;
  height: 100%;
}
body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .solar-orbit-map .star-map-zoom-control {
  position: relative;
  width: 100%;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  border: 1px solid rgba(125, 246, 255, .2);
  border-radius: 10px;
  padding: 4px 7px;
  background: linear-gradient(180deg, rgba(3, 18, 24, .86), rgba(2, 10, 15, .92));
  box-shadow: 0 8px 22px rgba(0, 0, 0, .34);
  backdrop-filter: blur(10px);
}
body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .solar-orbit-map .solar-map-visual,
body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .solar-orbit-map .solar-system-map-viewport {
  min-height: 0 !important;
  height: 100% !important;
}
body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .solar-system-map-viewport.is-pinching .solar-orbit-stage {
  transition: none !important;
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .solar-orbit-map > .star-map-command-dock {
  position: relative;
  z-index: 30;
  width: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  border: 1px solid rgba(125, 246, 255, .20);
  border-radius: 10px;
  padding: 4px 7px;
  background: linear-gradient(180deg, rgba(3, 18, 24, .88), rgba(2, 10, 15, .94));
  box-shadow: 0 8px 22px rgba(0, 0, 0, .34);
  backdrop-filter: blur(10px);
}

body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .solar-orbit-map .star-map-zoom-control > button {
  min-height: 44px;
}

@media (max-width: 640px) {
  .fleet-mission-grid { gap: 4px; padding: 6px 4px 8px; }
  .fleet-mission-grid button { min-height: 76px !important; gap: 2px; padding: 3px 1px !important; border-radius: 5px; }
  .fleet-mission-icon, .fleet-mission-grid .mission-type-hex-art { width: 42px !important; height: 42px !important; }
  .fleet-mission-grid button strong { font-size: 8px !important; }
  .fleet-mission-grid button em { display: none !important; }
}
body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .galaxy-constellation-shell {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) !important;
  min-height: 0;
  height: 100%;
}
body[data-active-screen="galaxy"][data-galaxy-tab="STARMAP"] .galaxy-constellation-shell > .star-map-command-dock {
  position: absolute;
  z-index: 30;
  right: 9px;
  bottom: 9px;
  left: 9px;
  width: auto;
  max-height: calc(100% - 18px);
  overflow: auto;
  border: 1px solid rgba(125, 246, 255, .20);
  border-radius: 10px;
  padding: 4px 7px;
  background: linear-gradient(180deg, rgba(3, 18, 24, .88), rgba(2, 10, 15, .94));
  box-shadow: 0 8px 22px rgba(0, 0, 0, .34);
  backdrop-filter: blur(10px);
}
.galaxy-map-viewport {
  background:
    linear-gradient(145deg, rgba(1, 5, 13, .12), rgba(5, 10, 22, .06) 48%, rgba(15, 4, 13, .12)),
    url("./assets/universe/starfield-background.jpg") 44% 48% / cover no-repeat,
    #02050c !important;
}

.quick-exit-game {
  width: 100%;
  min-height: 36px;
  margin: 8px 0 2px;
  border: 1px solid rgba(255, 118, 132, .5);
  border-radius: 8px;
  color: #ffe3e6;
  background: linear-gradient(180deg, rgba(104, 22, 34, .78), rgba(38, 8, 17, .9));
  font: 900 11px var(--font-body);
  letter-spacing: .08em;
}
.quick-exit-game:active { transform: scale(.98); }

.acceleration-batch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  border: 1px solid rgba(125, 246, 255, .2);
  border-radius: 8px;
  padding: 7px 9px;
  background: rgba(3, 18, 23, .72);
  color: #b9e8e5;
  font-size: 11px;
}
.acceleration-batch span { flex: 1; }
.acceleration-batch input {
  width: 68px;
  min-height: 30px;
  border: 1px solid rgba(125, 246, 255, .35);
  border-radius: 6px;
  padding: 3px 6px;
  background: rgba(1, 9, 13, .9);
  color: #efffff;
  text-align: center;
}
.acceleration-batch em { color: #7ea9ac; font-style: normal; font-size: 9px; }