@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700&family=Space+Mono:wght@400;700&display=swap");

:root {
  --bg: #05060a;
  --panel: rgba(8, 10, 18, 0.78);
  --accent-red: #f97316;
  --accent-blue: #3b82f6;
  --text: #f5f7ff;
  --muted: #9aa3b2;
  --stroke: rgba(255, 255, 255, 0.06);
  --glow: rgba(59, 130, 246, 0.25);
  --galaxy-ink: #cde7ff;
  --galaxy-blue: #3bb3ff;
  --galaxy-gold: #ffce6b;
  --galaxy-rare: #ff8c4a;
  --galaxy-panel: rgba(5, 10, 18, 0.76);
  --ui-safe-bottom: 0px;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  overflow: auto;
}

body {
  margin: 0;
  font-family: "Segoe UI", "Trebuchet MS", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

body.galaxy-only {
  --galaxy-dock-height: 64px;
  --ui-safe-bottom: var(--galaxy-dock-height, 0px);
  min-height: 100%;
}

html.no-scroll,
body.no-scroll {
  overflow: hidden;
}

body.galaxy-only section#galaxy,
body.galaxy-only .galaxy-layout {
  position: static;
  height: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
}

body.galaxy-only .meta {
  display: none !important;
}

body:not(.galaxy-only) #chat_dock {
  display: none;
}


.hidden {
  display: none;
}

.login-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 4, 10, 0.85);
  z-index: 5;
  backdrop-filter: blur(4px);
}

.login-overlay.hidden {
  display: none;
}

.login-card {
  background: rgba(8, 10, 18, 0.95);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 24px;
  width: min(360px, 90vw);
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
  display: grid;
  gap: 12px;
}

.login-card input {
  width: 100%;
  padding: 10px;
}

.login-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.login-actions .ghost {
  background: transparent;
  border: 1px solid var(--accent-blue);
  color: var(--text);
}

.nebula,
.stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.nebula {
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    radial-gradient(circle at 15% 20%, rgba(0, 140, 255, 0.22), transparent 40%),
    radial-gradient(circle at 75% 25%, rgba(255, 120, 80, 0.18), transparent 40%),
    radial-gradient(circle at 78% 78%, rgba(80, 140, 255, 0.2), transparent 48%),
    radial-gradient(circle at 28% 72%, rgba(80, 160, 255, 0.2), transparent 45%),
    radial-gradient(circle at 52% 48%, rgba(255, 210, 120, 0.12), transparent 60%),
    radial-gradient(circle at 60% 35%, rgba(255, 255, 255, 0.05), transparent 55%),
    linear-gradient(160deg, rgba(2, 4, 10, 0.98), rgba(5, 7, 16, 0.98));
}

.stars {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='600' viewBox='0 0 800 600'><rect width='800' height='600' fill='black'/><g fill='white'><circle cx='40' cy='30' r='1'/><circle cx='120' cy='90' r='1'/><circle cx='220' cy='40' r='1'/><circle cx='310' cy='140' r='1'/><circle cx='460' cy='80' r='1'/><circle cx='520' cy='30' r='1'/><circle cx='610' cy='110' r='1'/><circle cx='740' cy='60' r='1'/><circle cx='80' cy='220' r='1'/><circle cx='160' cy='280' r='1'/><circle cx='260' cy='240' r='1'/><circle cx='340' cy='210' r='1'/><circle cx='430' cy='260' r='1'/><circle cx='510' cy='230' r='1'/><circle cx='620' cy='270' r='1'/><circle cx='700' cy='220' r='1'/><circle cx='60' cy='420' r='1'/><circle cx='140' cy='360' r='1'/><circle cx='210' cy='420' r='1'/><circle cx='320' cy='360' r='1'/><circle cx='400' cy='430' r='1'/><circle cx='520' cy='390' r='1'/><circle cx='610' cy='430' r='1'/><circle cx='760' cy='380' r='1'/><circle cx='90' cy='520' r='1'/><circle cx='180' cy='500' r='1'/><circle cx='260' cy='560' r='1'/><circle cx='350' cy='520' r='1'/><circle cx='440' cy='560' r='1'/><circle cx='560' cy='520' r='1'/><circle cx='650' cy='560' r='1'/><circle cx='730' cy='520' r='1'/><circle cx='100' cy='170' r='0.6'/><circle cx='200' cy='120' r='0.6'/><circle cx='280' cy='180' r='0.6'/><circle cx='380' cy='130' r='0.6'/><circle cx='480' cy='170' r='0.6'/><circle cx='580' cy='140' r='0.6'/><circle cx='680' cy='160' r='0.6'/><circle cx='760' cy='140' r='0.6'/><circle cx='120' cy='320' r='0.6'/><circle cx='220' cy='300' r='0.6'/><circle cx='300' cy='340' r='0.6'/><circle cx='420' cy='320' r='0.6'/><circle cx='520' cy='340' r='0.6'/><circle cx='600' cy='310' r='0.6'/><circle cx='720' cy='330' r='0.6'/></g></svg>");
  background-size: 800px 600px;
  background-repeat: repeat;
  opacity: 0.9;
  mix-blend-mode: screen;
}

.nebula::before,
.nebula::after,
.stars::before,
.stars::after {
  content: "";
  position: absolute;
  inset: 0;
}

.nebula::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='700' viewBox='0 0 900 700'><defs><radialGradient id='g1' cx='20%25' cy='30%25' r='40%25'><stop offset='0%25' stop-color='%2300a2ff' stop-opacity='0.3'/><stop offset='100%25' stop-color='%2300a2ff' stop-opacity='0'/></radialGradient><radialGradient id='g2' cx='75%25' cy='25%25' r='45%25'><stop offset='0%25' stop-color='%23ff7a4d' stop-opacity='0.22'/><stop offset='100%25' stop-color='%23ff7a4d' stop-opacity='0'/></radialGradient><radialGradient id='g3' cx='70%25' cy='80%25' r='50%25'><stop offset='0%25' stop-color='%233b82f6' stop-opacity='0.18'/><stop offset='100%25' stop-color='%233b82f6' stop-opacity='0'/></radialGradient><radialGradient id='g4' cx='28%25' cy='75%25' r='45%25'><stop offset='0%25' stop-color='%2350a0ff' stop-opacity='0.2'/><stop offset='100%25' stop-color='%2350a0ff' stop-opacity='0'/></radialGradient><radialGradient id='g5' cx='55%25' cy='48%25' r='55%25'><stop offset='0%25' stop-color='%23ffd488' stop-opacity='0.15'/><stop offset='100%25' stop-color='%23ffd488' stop-opacity='0'/></radialGradient></defs><rect width='900' height='700' fill='url(%23g1)'/><rect width='900' height='700' fill='url(%23g2)'/><rect width='900' height='700' fill='url(%23g3)'/><rect width='900' height='700' fill='url(%23g4)'/><rect width='900' height='700' fill='url(%23g5)'/></svg>");
  background-size: 900px 700px;
  background-repeat: repeat;
  opacity: 0.65;
  animation: nebula-drift 40s linear infinite;
  filter: blur(8px) saturate(1);
}

.nebula::after {
  background:
    radial-gradient(circle at 20% 30%, rgba(120, 255, 255, 0.08), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(120, 180, 255, 0.08), transparent 45%);
  opacity: 0.6;
  animation: nebula-drift 55s linear infinite reverse;
}

.stars::before {
  background-image:
    radial-gradient(2px 2px at 12% 22%, rgba(255, 255, 255, 0.9), transparent 45%),
    radial-gradient(1px 1px at 18% 58%, rgba(255, 255, 255, 0.8), transparent 45%),
    radial-gradient(2px 2px at 42% 14%, rgba(255, 255, 255, 0.9), transparent 45%),
    radial-gradient(1px 1px at 66% 34%, rgba(255, 255, 255, 0.75), transparent 45%),
    radial-gradient(2px 2px at 86% 64%, rgba(255, 255, 255, 0.9), transparent 45%);
  opacity: 0.6;
  animation: star-twinkle 6s ease-in-out infinite;
}

.stars::after {
  background-image:
    radial-gradient(1px 1px at 12% 70%, rgba(255, 255, 255, 0.55), transparent 45%),
    radial-gradient(1px 1px at 38% 28%, rgba(255, 255, 255, 0.5), transparent 45%),
    radial-gradient(2px 2px at 58% 74%, rgba(255, 255, 255, 0.6), transparent 45%),
    radial-gradient(1px 1px at 78% 18%, rgba(255, 255, 255, 0.5), transparent 45%),
    radial-gradient(2px 2px at 90% 48%, rgba(255, 255, 255, 0.6), transparent 45%);
  opacity: 0.6;
  animation: star-twinkle 9s ease-in-out infinite reverse;
}

@keyframes nebula-drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-2%, 1%, 0) scale(1.02);
  }
  100% {
    transform: translate3d(2%, -1%, 0) scale(1.01);
  }
}

@keyframes star-twinkle {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

.app {
  position: relative;
  z-index: 1;
  max-width: 1900px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 20px 50px;
}

body.galaxy-only .app {
  max-width: none;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0;
}

body.galaxy-only main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  padding-top: var(--galaxy-header-height, 0px);
  background: radial-gradient(1200px 600px at 50% 0%,
    rgba(40, 70, 120, 0.25),
    rgba(5, 8, 14, 0.95) 60%,
    rgba(0, 0, 0, 0.98)
  );
}

header.command-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--stroke);
  padding: 8px 12px;
  background: rgba(8, 12, 18, 0.55);
  border-radius: 14px;
  backdrop-filter: blur(10px);
}

body.galaxy-only header.command-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  gap: 12px;
  z-index: 8;
}

.brand h1 {
  margin: 0;
  font-size: 24px;
  letter-spacing: 1px;
  color: var(--text);
}

.meta {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  text-align: right;
}

.event-banner {
  margin: 14px 0 18px;
  padding: 10px 16px;
  border-radius: 12px;
  background: linear-gradient(120deg, rgba(59, 130, 246, 0.2), rgba(245, 158, 11, 0.2));
  border: 1px solid var(--stroke);
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 14px;
}

.chat-dock {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.header-chat {
  align-self: stretch;
}

.header-chat-slot {
  margin-top: 10px;
}

.header-chat-slot.is-empty {
  display: none;
}

.chat-dock-title {
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  flex: 1;
}

.tabs button {
  background: transparent;
  border: 1px solid var(--accent-blue);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 13px;
}

.tabs button.active {
  background: linear-gradient(120deg, var(--accent-blue), var(--accent-red));
  border-color: transparent;
  color: #05060a;
  box-shadow: 0 0 20px var(--glow);
}

.tabs button.active[data-tab="galaxy"] {
  background: linear-gradient(120deg, #4de4ff, #2bb5ff);
  border-color: transparent;
  color: #031016;
  box-shadow: 0 0 18px rgba(77, 228, 255, 0.4);
}

.tab {
  display: none;
}

.tab.active {
  display: block;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(6px);
}

.panel h3 {
  margin-top: 0;
  font-size: 15px;
  color: var(--text);
}

label {
  display: block;
  color: var(--muted);
  margin-bottom: 10px;
}

select {
  width: 100%;
  margin-top: 6px;
  background: #0b0f1d;
  color: var(--text);
  border: 1px solid var(--stroke);
  padding: 8px;
  border-radius: 8px;
}

input {
  background: #0b0f1d;
  color: var(--text);
  border: 1px solid var(--stroke);
  border-radius: 8px;
  padding: 6px 8px;
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: #0b0f18;
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

input[type="checkbox"]::before {
  content: "";
  width: 9px;
  height: 9px;
  transform: scale(0);
  transition: transform 0.12s ease;
  clip-path: polygon(
    14% 44%,
    0% 65%,
    50% 100%,
    100% 16%,
    80% 0%,
    43% 62%
  );
  background: white;
}

input[type="checkbox"]:checked {
  background: #000000;
  border-color: rgba(255, 255, 255, 0.65);
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

input[type="checkbox"]:hover {
  border-color: rgba(255, 255, 255, 0.75);
}

input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(120, 160, 255, 0.35);
}

input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

button {
  background: linear-gradient(120deg, var(--accent-blue), var(--accent-red));
  border: none;
  color: #05060a;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 10px;
  font-weight: 600;
}

button.ghost-button {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text);
}

button.ghost-button.active {
  border-color: var(--galaxy-gold);
  color: var(--galaxy-gold);
  box-shadow: 0 0 12px rgba(255, 206, 107, 0.3);
}

#galaxy_influence_toggle.active {
  border-color: rgba(129, 140, 248, 0.8);
  color: #c7d2fe;
  box-shadow: 0 0 10px rgba(129, 140, 248, 0.25);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

ul {
  padding-left: 18px;
  margin: 0;
}

#abilities li,
#activity_mastery li,
#skills li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  flex-wrap: wrap;
}

#inventory_list ul li {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
}

.stat-list {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.stat-row {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.stat-row button {
  margin-left: 8px;
}

#pvp_canvas,
#dungeon_canvas {
  width: 100%;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: rgba(5, 8, 16, 0.6);
}

.item-chip {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  flex-wrap: wrap;
}

.row:last-child {
  border-bottom: none;
}

.qty-input {
  width: 64px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.7);
  color: #e2e8f0;
  text-align: center;
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}

.hint {
  color: var(--muted);
}

.planet-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.planet-card {
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 14px;
  background: rgba(7, 10, 18, 0.85);
  display: grid;
  gap: 6px;
  position: relative;
  overflow: hidden;
}

.planet-visual {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  box-shadow: inset -8px -12px 20px rgba(0, 0, 0, 0.4), 0 0 18px rgba(59, 130, 246, 0.3);
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
}

.planet-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.2), transparent 45%);
  mix-blend-mode: screen;
}

.planet-visual.type-gas::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  top: 34px;
  left: -14px;
  transform: rotate(-12deg);
}

.planet-card.rare {
  border-color: rgba(245, 158, 11, 0.6);
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.4);
}

.planet-card.legendary {
  border-color: rgba(59, 130, 246, 0.8);
  box-shadow: 0 0 22px rgba(59, 130, 246, 0.6);
}

.planet-visual.type-rocky {
  background: radial-gradient(circle at 30% 30%, #a6a6a6, #3e3e3e);
}
.planet-visual.type-ice {
  background: radial-gradient(circle at 30% 30%, #c6e7ff, #4b6f8a);
}
.planet-visual.type-desert {
  background: radial-gradient(circle at 30% 30%, #e5b164, #7a4b1f);
}
.planet-visual.type-ocean {
  background: radial-gradient(circle at 30% 30%, #4dd0ff, #1d2f57);
}
.planet-visual.type-volcanic {
  background: radial-gradient(circle at 30% 30%, #ff7b3b, #471c15);
}
.planet-visual.type-gas {
  background: radial-gradient(circle at 30% 30%, #f6d365, #5f4b8b);
}
.planet-visual.type-crystal {
  background: radial-gradient(circle at 30% 30%, #b993ff, #3b1f5b);
}
.planet-visual.type-lush {
  background: radial-gradient(circle at 30% 30%, #7dff8c, #205b2c);
}
.planet-visual.type-void {
  background: radial-gradient(circle at 30% 30%, #7aa0ff, #060616);
}

.planet-badge {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.2);
  color: var(--text);
  display: inline-block;
}

.planet-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.planet-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.planet-filters input,
.planet-filters select {
  background: #0b0f1d;
  border: 1px solid var(--stroke);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 8px;
}

.radio-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.radio-column {
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 10px;
  background: rgba(5, 8, 16, 0.5);
}

.radio-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 8px;
}

.radio-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
}

.activity-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.activity-card {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(12, 16, 26, 0.85);
}

.activity-card h4 {
  margin: 0 0 6px;
}

.pill {
  display: inline-flex;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.chat-messages {
  max-height: 180px;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 13px;
  flex: 1 1 auto;
  min-height: 80px;
}

.chat-message {
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(5, 8, 16, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.chat-message strong {
  color: var(--accent-blue);
}

.chat-name-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.25);
  vertical-align: middle;
}

.chat-stamp {
  color: var(--muted);
  font-size: 12px;
  margin-left: 6px;
}

.patch-notes-title {
  margin-bottom: 8px;
}

.info-title {
  margin-top: 16px;
}

.chat-input {
  display: flex;
  gap: 8px;
}

.chat-input input {
  flex: 1;
}

.pvp-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}

.pvp-battle {
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  gap: 12px;
  align-items: stretch;
}

.pvp-log {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 8px;
  background: rgba(5, 8, 16, 0.6);
}

.pvp-canvas canvas {
  width: 100%;
}

.pvp-lobbies {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.dungeon-controls {
  display: grid;
  gap: 10px;
}

.galaxy-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

body.galaxy-only .galaxy-header {
  position: absolute;
  top: 12px;
  left: 16px;
  z-index: 5;
  pointer-events: none;
}


.galaxy-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

#galaxy.tab.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  position: relative;
}

body.galaxy-only section.tab.active:not(#galaxy) {
  padding-top: 10px;
  background: transparent;
}

body.galaxy-only:not(.galaxy-tab-active) {
  background: #05080e;
}

.galaxy-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
  flex: 1;
  min-height: 0;
  position: relative;
}

.galaxy-map-panel {
  background: var(--galaxy-panel);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  height: auto;
}

body.galaxy-only .galaxy-map-panel {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  position: fixed;
  top: var(--galaxy-header-height);
  left: 0;
  right: 0;
  bottom: 0;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.galaxy-map-panel .panel-header {
  margin-bottom: 0;
}

.galaxy-map-meta {
  display: grid;
  gap: 6px;
  width: 100%;
}

.galaxy-map-shop {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.galaxy-map-shop-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.panel-title {
  font-family: "Orbitron", "Segoe UI", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  color: var(--galaxy-ink);
}

.galaxy-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
}

.galaxy-map-actions {
  margin-left: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.galaxy-map-header {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: start;
  gap: 12px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 10px 16px;
  background: rgba(8, 12, 18, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  z-index: 4;
}

.galaxy-map-left {
  display: grid;
  gap: 6px;
}

.galaxy-map-right-top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.galaxy-map-right {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.galaxy-map-right-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.galaxy-map-stats {
  text-align: left;
}

#galaxy_age {
  color: var(--galaxy-ink);
  font-family: "Segoe UI", "Trebuchet MS", sans-serif;
  font-weight: 600;
}

.galaxy-summary {
  padding: 6px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(5, 10, 18, 0.65);
  font-size: 12px;
  color: var(--muted);
  display: grid;
  gap: 2px;
  max-width: 240px;
  margin-left: auto;
}

.galaxy-storage-summary {
  padding: 4px 0;
  border-radius: 0;
  border: none;
  background: transparent;
  display: grid;
  gap: 2px;
  max-width: 240px;
  align-self: flex-start;
  margin-right: auto;
}

.galaxy-storage-item,
.galaxy-summary-row {
  font-size: 11px;
  color: rgba(230, 240, 255, 0.86);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-shadow: 0 1px 3px rgba(5, 8, 16, 0.65);
}

.galaxy-storage-summary {
  min-height: 60px;
}

.galaxy-storage-item span:last-child,
.galaxy-summary-row span:last-child {
  color: rgba(230, 240, 255, 0.82);
  text-align: right;
}

.galaxy-economy-summary {
  display: grid;
  gap: 2px;
}

.ghost-button.alert {
  border-color: rgba(255, 206, 107, 0.8);
  box-shadow: 0 0 10px rgba(255, 206, 107, 0.35);
  color: #ffe7a3;
}

.galaxy-log-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.galaxy-log-tabs .ghost-button.active {
  border-color: rgba(59, 179, 255, 0.9);
  color: var(--galaxy-ink);
}

.galaxy-log-list {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 6px;
}

.galaxy-log-entry {
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 12, 22, 0.75);
  font-size: 12px;
  display: grid;
  gap: 4px;
}

.galaxy-log-entry .log-title {
  font-weight: 600;
}

.galaxy-log-entry .log-actions {
  display: flex;
  gap: 8px;
}

.galaxy-watch-bars {
  display: grid;
  gap: 12px;
}

.galaxy-watch-row {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.galaxy-watch-bar {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  height: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.galaxy-watch-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(59, 179, 255, 0.9), rgba(99, 191, 255, 0.6));
  transition: width 0.4s ease;
  animation: watchPulse 1.6s ease-in-out infinite;
}

.galaxy-watch-fill.enemy {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.9), rgba(248, 113, 113, 0.6));
}

@keyframes watchPulse {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.2); }
  100% { filter: brightness(1); }
}

.galaxy-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.galaxy-toolbar-left {
  display: flex;
  gap: 10px;
  align-items: center;
}

.galaxy-token {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(5, 8, 16, 0.6);
  font-size: 12px;
  color: var(--muted);
}

.galaxy-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 14, 0.65);
  z-index: 4;
  backdrop-filter: blur(2px);
}

body.galaxy-only .galaxy-modal {
  overflow: hidden;
  max-height: none;
}

body.galaxy-only #galaxy_empire_modal.galaxy-modal {
  top: calc(var(--galaxy-header-height, 0px) + 10px);
  bottom: calc(var(--galaxy-dock-height, 0px) + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: min(980px, calc(100vw - 24px));
  margin: 0;
  overflow: hidden;
}
.galaxy-modal.hidden {
  display: none;
}

.galaxy-modal-card {
  width: min(320px, 90%);
  background: rgba(8, 12, 22, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 16px;
  display: grid;
  gap: 10px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
}

.galaxy-modal-card.wide {
  width: min(520px, 94%);
}

.galaxy-modal-card.full {
  width: min(1100px, 96%);
  height: min(90vh, 880px);
  overflow: auto;
}

body.galaxy-only .galaxy-modal-card.full {
  overflow: auto;
  max-height: calc(100vh - var(--galaxy-header-height, 0px) - 18px);
  padding-bottom: calc(var(--ui-safe-bottom) + 16px);
}

body.galaxy-only #galaxy_empire_modal .galaxy-modal-card.full {
  position: relative;
  height: 100%;
  overflow: auto;
  padding-left: 14px;
  padding-right: 14px;
  padding-bottom: 72px;
  scroll-padding-bottom: 72px;
}

body.galaxy-only #galaxy_empire_modal .galaxy-modal-card.full .galaxy-modal-title,
body.galaxy-only #galaxy_empire_modal .galaxy-modal-card.full .hint,
body.galaxy-only #galaxy_empire_modal .galaxy-modal-card.full #workforce_allocations,
body.galaxy-only #galaxy_empire_modal .galaxy-modal-card.full .workforce-section {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.galaxy-modal-title {
  font-family: "Orbitron", "Segoe UI", sans-serif;
  letter-spacing: 1px;
}

.galaxy-modal-card label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.galaxy-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.galaxy-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

body.galaxy-only .galaxy-modal-actions {
  position: sticky;
  bottom: var(--ui-safe-bottom);
  padding: 10px 0;
  background: rgba(8, 12, 22, 0.92);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

#galaxy_shop_modal .detail-title {
  margin-top: 8px;
}

.galaxy-attack-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.galaxy-attack-target {
  font-size: 12px;
  color: var(--galaxy-ink);
}

.galaxy-shipyard-meta {
  font-size: 12px;
  color: var(--galaxy-ink);
}

.workforce-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

#galaxy_empire_modal .workforce-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.workforce-section {
  display: grid;
  gap: 8px;
}

.workforce-section + .workforce-section {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 12px;
}

#workforce_allocations {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(8, 12, 20, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

#galaxy_empire_modal .galaxy-modal-actions {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: auto;
  width: auto;
  display: flex;
  gap: 10px;
  background: transparent;
  border-top: none;
  backdrop-filter: none;
  padding: 0;
}

.holdings-resources {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.holdings-resource-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
}

.workforce-storage {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.workforce-research-list {
  display: grid;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
}

.workforce-research-row {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.6fr;
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(5, 8, 16, 0.55);
}

.workforce-research-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.holdings-research {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.holdings-research-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}

.galaxy-system-actions {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.galaxy-system-hold {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  justify-content: flex-end;
}

.galaxy-system-rename {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  min-width: 180px;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  background: var(--muted);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

.legend-dot.neutral {
  background: #8aa0c2;
}

.legend-dot.rare {
  background: var(--galaxy-rare);
}

.legend-dot.npc {
  background: #facc15;
}

.legend-dot.pirate {
  background: #ef4444;
}

.galaxy-canvas-wrap,
.system-canvas-wrap {
  position: relative;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: radial-gradient(circle at 20% 20%, rgba(59, 179, 255, 0.12), transparent 45%),
    radial-gradient(circle at 70% 80%, rgba(255, 206, 107, 0.12), transparent 50%),
    linear-gradient(160deg, rgba(2, 6, 14, 0.98), rgba(6, 8, 18, 0.98));
  overflow: hidden;
  pointer-events: auto;
}

.galaxy-canvas-wrap {
  min-height: 270px;
  flex: 1;
  margin-top: 6px;
}

body.galaxy-only .galaxy-canvas-wrap {
  border: none;
  border-radius: 0;
  margin-top: 0;
  min-height: 0;
}

body.galaxy-only .galaxy-canvas-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.32) 100%);
  pointer-events: none;
}

.system-canvas-wrap {
  min-height: 200px;
}

#galaxy_canvas,
#system_canvas {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: auto;
}

.galaxy-help {
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-size: 11px;
  color: var(--muted);
  background: rgba(5, 8, 16, 0.6);
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.galaxy-tooltip {
  position: absolute;
  pointer-events: none;
  padding: 8px 10px;
  background: rgba(5, 10, 18, 0.9);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text);
  font-size: 12px;
  max-width: 220px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
  z-index: 2;
}

.galaxy-context {
  position: absolute;
  min-width: 160px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(8, 12, 22, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: grid;
  gap: 6px;
  z-index: 3;
}

.galaxy-context button {
  width: 100%;
}

.galaxy-upgrades-panel {
  max-height: 100%;
  display: flex;
  flex-direction: column;
  height: auto;
}

#galaxy .chat-dock {
  display: flex;
  flex-direction: column;
  max-height: none;
  height: 100%;
  background: transparent;
  border: none;
  color: rgba(205, 231, 255, 0.7);
}

#galaxy .chat-messages {
  max-height: none;
  color: rgba(205, 231, 255, 0.7);
}

.galaxy-hud-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.galaxy-hud-layer.is-hidden {
  display: none;
}

body.galaxy-only .galaxy-hud-layer {
  padding-top: var(--galaxy-header-height, 0px);
  padding-bottom: var(--galaxy-dock-height);
  box-sizing: border-box;
}

.hud-widget {
  position: absolute;
  width: 0;
  height: 0;
  z-index: 1;
}

.hud-widget-visual {
  position: absolute;
  min-width: 200px;
  max-width: 320px;
  background: rgba(5, 10, 18, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 12px 12px;
  display: grid;
  gap: 8px;
  box-shadow: 0 12px 30px rgba(5, 12, 24, 0.35);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: auto;
}

.hud-widget.pinned .hud-widget-visual {
  pointer-events: none;
}

.hud-widget.pinned .hud-widget-header,
.hud-widget.pinned .hud-widget-body {
  pointer-events: none;
}

.hud-widget.pinned .hud-widget-pin {
  pointer-events: auto;
}

.hud-widget.pinned[data-hud-id="chat"] .hud-widget-visual,
.hud-widget.pinned[data-hud-id="chat"] .hud-widget-header,
.hud-widget.pinned[data-hud-id="chat"] .hud-widget-body {
  pointer-events: auto;
}

.hud-widget.pinned[data-allow-pinned-interact="true"] .hud-widget-visual,
.hud-widget.pinned[data-allow-pinned-interact="true"] .hud-widget-header,
.hud-widget.pinned[data-allow-pinned-interact="true"] .hud-widget-body {
  pointer-events: auto;
}

.hud-widget[data-hud-resize="true"] .hud-widget-visual {
  resize: none;
  overflow: hidden;
}

.hud-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  cursor: default;
  pointer-events: auto;
}

.hud-widget-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hud-widget-pin {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(12, 16, 28, 0.7);
  color: var(--text);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
}

body.hud-hide-pins .hud-pin-btn {
  display: none;
}

.hud-widget-pin.active {
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.3);
}

.hud-widget-body {
  display: grid;
  gap: 8px;
  pointer-events: auto;
}


.hud-row {
  font-size: 12px;
  color: rgba(205, 231, 255, 0.82);
}

.hud-widget-grab {
  font-size: 12px;
  letter-spacing: -1px;
  color: rgba(255, 255, 255, 0.6);
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(8, 12, 22, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: auto;
  cursor: grab;
}

.hud-widget.is-dragging .hud-widget-grab {
  opacity: 0.6;
}

.hud-widget.is-dragging .hud-widget-header {
  cursor: default;
}

.hud-widget.is-faded:not(.is-pinned) .hud-widget-visual {
  opacity: 0.18;
  transform: translateY(2px);
}

.hud-widget.is-faded:not(.is-pinned) .hud-widget-body {
  pointer-events: none;
}

.hud-widget.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

.hud-widget.is-hidden .hud-widget-visual {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

.hud-widget.is-pinned .hud-widget-grab,
.hud-widget.pinned .hud-widget-grab,
.hud-widget.pinned [data-hud-grab],
.hud-widget[data-hud-pinned="true"] .hud-widget-grab,
.hud-widget.is-pinned[data-hud-id="chat"] .hud-widget-grab,
.hud-widget-grab.is-hidden,
.hud-widget.pinned .drag-handle,
.hud-widget.pinned .move-handle,
.hud-widget.pinned .resize-handle,
.hud-widget.pinned .grip,
.hud-widget.pinned .corner-grip {
  display: none !important;
  pointer-events: none;
  cursor: default;
}

.hud-widget.pinned::before,
.hud-widget.pinned::after,
.hud-widget.is-pinned::before,
.hud-widget.is-pinned::after {
  display: none !important;
  content: none !important;
}

.hud-widget.is-pinned .hud-widget-header {
  cursor: default;
}

.hud-widget[data-hud-id="chat"] .hud-widget-visual {
  width: min(380px, 88vw);
  max-width: min(520px, 92vw);
  min-width: 300px;
  min-height: 240px;
  max-height: min(640px, 70vh);
  background: transparent;
  border: none;
  box-shadow: none;
  resize: none;
  overflow: hidden;
  grid-template-rows: auto 1fr;
}

.hud-widget[data-hud-id="system_view"] .hud-widget-visual {
  width: min(760px, 85vw);
  max-width: 85vw;
  min-width: 480px;
  max-height: 80vh;
  min-height: 360px;
}

.hud-widget[data-hud-id="system_view"] .hud-widget-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

.hud-widget[data-hud-id="system_view"] .system-canvas-wrap {
  flex: 1;
  min-height: 200px;
}

.hud-widget[data-hud-id="system_view"] .system-details {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.hud-widget-resize {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 12px;
  height: 12px;
  border-right: 2px solid rgba(210, 232, 255, 0.65);
  border-bottom: 2px solid rgba(210, 232, 255, 0.65);
  opacity: 0.7;
  cursor: nwse-resize;
  pointer-events: auto;
}

.hud-widget.pinned .hud-widget-resize {
  display: none !important;
  pointer-events: none;
}

.hud-widget.pinned.proximity-fade .hud-widget-body,
.hud-widget.pinned.proximity-fade .hud-widget-title span,
.hud-widget.pinned.proximity-fade .hud-row {
  opacity: 0.7;
}

.hud-widget[data-hud-id="chat"] .hud-widget-body {
  max-height: none;
  height: 100%;
  min-height: 160px;
}

.hud-widget[data-hud-id="chat"] .chat-messages {
  max-height: none;
  min-height: 160px;
}

.hud-widget[data-hud-id="galaxy_economy"] .hud-widget-visual {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 6px 8px;
  min-width: 0;
  max-width: none;
  width: auto;
}

.hud-widget[data-hud-id="galaxy_economy"] .hud-widget-header {
  padding-bottom: 2px;
}

.hud-widget[data-hud-id="galaxy_stats"] .hud-widget-visual,
.hud-widget[data-hud-id="galaxy_legend"] .hud-widget-visual,
.hud-widget[data-hud-id="galaxy_resources"] .hud-widget-visual {
  background: transparent;
  border: none;
  box-shadow: none;
}

.hud-widget[data-hud-id="galaxy_stats"] .hud-widget-header,
.hud-widget[data-hud-id="galaxy_legend"] .hud-widget-header,
.hud-widget[data-hud-id="galaxy_resources"] .hud-widget-header,
.hud-widget[data-hud-id="galaxy_economy"] .hud-widget-header,
.hud-widget[data-hud-id="chat"] .hud-widget-header {
  color: var(--galaxy-ink);
}


.hud-widget[data-hud-id="galaxy_stats"] .hud-row,
.hud-widget[data-hud-id="galaxy_legend"] .hud-widget-body,
.hud-widget[data-hud-id="galaxy_resources"] .galaxy-storage-item,
.hud-widget[data-hud-id="galaxy_economy"] .galaxy-summary-row,
.hud-widget[data-hud-id="chat"] .chat-message,
.hud-widget[data-hud-id="chat"] .chat-stamp {
  color: rgba(230, 240, 255, 0.86);
  text-shadow: 0 1px 3px rgba(5, 8, 16, 0.65);
}

.hud-widget[data-hud-id="galaxy_resources"] .hud-widget-body {
  min-height: 120px;
}

.hud-widget-actions {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  pointer-events: auto;
}

.hud-chat-body .chat-dock-title {
  display: none;
}

.galaxy-hud-layer.zoom-out .hud-widget:not(.is-pinned) .hud-widget-visual {
  opacity: 0.78;
}

.galaxy-hud-layer.zoom-mid .hud-widget:not(.is-pinned) .hud-widget-visual {
  opacity: 0.9;
}

.galaxy-hud-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 16px;
  background: rgba(8, 12, 18, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  box-sizing: border-box;
  pointer-events: none;
}

.hud-dock-button {
  border-radius: 999px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 12, 22, 0.85);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 12px 22px rgba(4, 10, 20, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  pointer-events: auto;
}

.hud-dock-button.is-open {
  border-color: rgba(59, 130, 246, 0.6);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35), 0 12px 22px rgba(4, 10, 20, 0.35);
}

.hud-dock-button.is-highlighted {
  border-color: rgba(148, 163, 184, 0.6);
}

.hud-dock-button.has-unread {
  animation: chat-pulse 1.4s ease-in-out infinite;
}

.hud-dock-button:hover {
  transform: translateY(-1px);
}

.chat-unread-badge {
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(249, 115, 22, 0.9);
  color: #111;
  font-size: 12px;
  display: grid;
  place-items: center;
  padding: 0 6px;
}

#galaxy_chat_slot {
  display: flex;
  flex: 1;
  min-height: 0;
}

@keyframes chat-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(249, 115, 22, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0);
  }
}

.options-panel {
  display: grid;
  gap: 12px;
  max-height: calc(100vh - var(--galaxy-header-height, 0px) - 80px);
  overflow-y: auto;
}

#options .options-panel {
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
}

@media (min-width: 1200px) {
  #options .options-panel {
    max-width: 760px;
  }
}

@media (max-width: 820px) {
  #options .options-panel {
    max-width: none;
    margin: 0 10px;
  }
}

.options-grid {
  display: grid;
  gap: 12px;
}

.options-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(8, 12, 20, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

#options .options-row {
  padding-top: 10px;
  padding-bottom: 10px;
}

.options-row.auto-hide-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.options-row.auto-hide-row .label {
  color: var(--muted);
}

.options-row.options-row-compact {
  display: flex;
  justify-content: flex-start;
  gap: 14px;
}

#options .options-row.options-row-compact {
  padding-top: 8px;
  padding-bottom: 8px;
}

.options-row.options-row-compact .label {
  flex: 0 0 240px;
  max-width: 240px;
}

.options-row.options-row-compact .auto-hide-controls,
.options-row.options-row-compact .auto-hide-presets {
  flex: 0 0 auto;
}

@media (max-width: 720px) {
  .options-row.options-row-compact .label {
    flex-basis: 100%;
    max-width: none;
  }
}

.auto-hide-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.auto-hide-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.auto-hide-presets button {
  min-width: unset;
}

.options-group {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 6px;
  background: rgba(6, 10, 18, 0.6);
}

.options-group > summary {
  cursor: pointer;
  list-style: none;
  font-family: "Orbitron", "Segoe UI", sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--galaxy-ink);
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(8, 12, 20, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

#options .options-group > summary {
  padding-top: 10px;
  padding-bottom: 10px;
}

.options-group > summary::-webkit-details-marker {
  display: none;
}

.options-group[open] > summary {
  margin-bottom: 10px;
}

.options-subtitle {
  margin: 4px 10px 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
}

.options-row select,
.options-row input[type="checkbox"] {
  accent-color: var(--accent-blue);
}

.options-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.options-inline input[type="number"] {
  width: 64px;
}

.options-chat-slot {
  margin-top: 12px;
}

.options-presets {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.options-preset-button {
  background: rgba(8, 12, 22, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  cursor: pointer;
}

.options-preset-button:hover {
  border-color: rgba(59, 179, 255, 0.7);
}

.galaxy-online-table {
  display: grid;
  gap: 8px;
}

.galaxy-online-header,
.galaxy-online-row {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr 0.6fr 0.6fr;
  gap: 10px;
  align-items: center;
}

.galaxy-online-header {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 6px 10px;
  background: rgba(5, 10, 18, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 11px;
  color: var(--muted);
}

.galaxy-online-list {
  display: grid;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 6px;
}

.galaxy-online-row {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(5, 8, 16, 0.55);
  font-size: 12.5px;
}

.galaxy-online-row .name {
  font-family: "Orbitron", "Segoe UI", sans-serif;
}

.galaxy-online-row.offline {
  color: rgba(200, 210, 225, 0.55);
}

.system-details {
  margin-top: 8px;
}

.system-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.detail-title {
  font-family: "Space Mono", "Segoe UI", sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 8px;
}

.planet-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.planet-chip {
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 12, 22, 0.8);
  font-size: 12px;
  cursor: pointer;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.planet-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--galaxy-blue);
}

.planet-chip.selected {
  border-color: var(--galaxy-blue);
  box-shadow: 0 0 12px rgba(59, 179, 255, 0.4);
}

.planet-chip.ultra {
  border-color: var(--galaxy-rare);
  box-shadow: 0 0 12px rgba(255, 140, 74, 0.4);
}

.planet-detail {
  padding: 10px;
  border-radius: 12px;
  background: rgba(5, 8, 16, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  min-height: 90px;
  font-size: 13px;
  line-height: 1.4;
}

#shipyard_detail {
  margin-top: 10px;
}

.planet-detail strong {
  font-family: "Orbitron", "Segoe UI", sans-serif;
}

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

.galaxy-upgrade-card {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 12, 22, 0.8);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

.galaxy-upgrade-card button {
  align-self: flex-start;
}

.system-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}

.system-tag {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 12, 22, 0.8);
  color: var(--galaxy-ink);
}

.system-tag.claimed {
  border-color: var(--galaxy-blue);
  color: var(--galaxy-blue);
}

.system-tag.ultra {
  border-color: var(--galaxy-rare);
  color: var(--galaxy-rare);
}

@media (min-width: 961px) {
  #galaxy.tab.active {
    min-height: 0;
  }

  .galaxy-layout {
    min-height: 0;
  }

  .galaxy-map-panel {
    min-height: 0;
  }

  .system-details {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
  }
}


@media (max-width: 960px) {
  .galaxy-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  header.command-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .meta {
    text-align: left;
  }
  .pvp-battle {
    grid-template-columns: 1fr;
  }
}