:root {
  --bg: #030711;
  --panel: rgba(8, 16, 31, 0.97);
  --panel-soft: rgba(15, 28, 49, 0.82);

  --text: #eaf6ff;
  --muted: #7691a8;

  --blue: #72c8ff;
  --blue-strong: #20a9ff;
  --reachable: #69d8ff;

  --quest: #ffd45b;

  --border: rgba(117, 197, 255, 0.16);

  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;

  overflow: hidden;

  background: var(--bg);
  color: var(--text);

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

body {
  background:
    radial-gradient(
      circle at 72% 18%,
      rgba(32, 102, 174, 0.13),
      transparent 34%
    ),
    radial-gradient(
      circle at 20% 80%,
      rgba(34, 65, 142, 0.10),
      transparent 38%
    ),
    #030711;
}

button {
  font: inherit;
}

.app {
  height: 100vh;

  display: flex;
  flex-direction: column;
}

.topbar {
  position: relative;
  z-index: 5;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding:
    calc(14px + env(safe-area-inset-top, 0px))
    18px
    12px;

  border-bottom: 1px solid var(--border);

  background:
    linear-gradient(
      180deg,
      rgba(4, 10, 21, 0.98),
      rgba(4, 10, 21, 0.80)
    );

  backdrop-filter: blur(12px);
}

.brand {
  font-size: 18px;
  font-weight: 800;

  letter-spacing: 0.19em;
}

.subtitle {
  margin-top: 2px;

  color: var(--muted);

  font-size: 12px;
  letter-spacing: 0.08em;

  text-transform: uppercase;
}

.icon-button,
.close-button {
  border: 1px solid var(--border);

  color: var(--text);

  background: rgba(22, 45, 71, 0.50);
}

.icon-button {
  width: 42px;
  height: 42px;

  border-radius: 50%;

  font-size: 24px;
}

.map-shell {
  position: relative;

  min-height: 0;
  flex: 1;

  overflow: hidden;
}

.sector-map {
  width: 100%;
  height: 100%;

  display: block;

  touch-action: none;
  user-select: none;

  cursor: grab;
}

.sector-map.dragging {
  cursor: grabbing;
}

.route {
  stroke: rgba(93, 204, 255, 0.90);

  stroke-width: 5;
  stroke-linecap: round;

  stroke-dasharray: 15 11;

  filter: url(#routeGlow);

  pointer-events: none;
}

.route-shadow {
  stroke: rgba(65, 176, 255, 0.18);

  stroke-width: 13;
  stroke-linecap: round;

  pointer-events: none;
}

.system-hitbox {
  fill: transparent;

  cursor: pointer;
}

.system-halo {
  fill: rgba(51, 156, 225, 0.10);

  stroke: rgba(87, 185, 244, 0.30);

  stroke-width: 2;
}

.system-core {
  fill: #c7edff;
}

.system-label {
  fill: #dff5ff;

  text-anchor: middle;

  font-size: 25px;
  font-weight: 650;

  letter-spacing: 0.04em;

  pointer-events: none;
}

.system-subtitle {
  fill: #68859c;

  text-anchor: middle;

  font-size: 16px;

  pointer-events: none;
}

.system.current .system-halo {
  stroke: #61d2ff;

  stroke-width: 4;

  fill: rgba(53, 192, 255, 0.16);
}

.system.current .system-core {
  fill: #ffffff;
}

.system.reachable .system-halo {
  stroke: rgba(94, 215, 255, 0.65);
}

.system.quest .system-halo {
  stroke: var(--quest);
}

.system-marker {
  text-anchor: middle;

  font-size: 23px;

  pointer-events: none;
}

.zoom-hint {
  position: absolute;

  top: 12px;
  left: 50%;

  transform: translateX(-50%);

  padding: 7px 10px;

  border: 1px solid rgba(111, 194, 255, 0.10);
  border-radius: 9px;

  color: rgba(150, 181, 204, 0.72);

  font-size: 10px;

  white-space: nowrap;

  background: rgba(2, 8, 16, 0.60);

  backdrop-filter: blur(8px);

  pointer-events: none;

  transition:
    opacity 300ms ease,
    transform 300ms ease;
}

.zoom-hint.hidden-hint {
  opacity: 0;

  transform:
    translateX(-50%)
    translateY(-6px);
}

.legend {
  position: absolute;

  left: 14px;
  right: 14px;

  bottom: calc(14px + var(--safe-bottom));

  display: flex;
  flex-wrap: wrap;

  gap: 8px 13px;

  width: fit-content;
  max-width: calc(100% - 28px);

  padding: 8px 11px;

  border: 1px solid var(--border);
  border-radius: 10px;

  color: #819aad;

  font-size: 11px;

  background: rgba(3, 9, 18, 0.82);

  backdrop-filter: blur(10px);
}

.legend span {
  display: flex;
  gap: 6px;

  align-items: center;
}

.dot {
  width: 7px;
  height: 7px;

  display: inline-block;

  border-radius: 50%;
}

.dot.current {
  background: #66d5ff;

  box-shadow:
    0 0 8px #66d5ff;
}

.dot.reachable {
  background: var(--reachable);

  box-shadow:
    0 0 8px rgba(105, 216, 255, 0.70);
}

.dot.quest {
  background: var(--quest);

  box-shadow:
    0 0 8px var(--quest);
}

.backdrop {
  position: fixed;

  inset: 0;

  z-index: 19;

  background: rgba(0, 3, 8, 0.52);

  backdrop-filter: blur(3px);
}

.system-panel {
  position: fixed;

  z-index: 20;

  left: 0;
  right: 0;
  bottom: 0;

  max-height: 72vh;

  overflow-y: auto;

  padding:
    8px
    18px
    calc(18px + var(--safe-bottom));

  border-top:
    1px solid rgba(111, 194, 255, 0.22);

  border-radius:
    22px 22px 0 0;

  background:
    linear-gradient(
      180deg,
      rgba(11, 22, 39, 0.99),
      rgba(4, 11, 22, 0.99)
    );

  box-shadow:
    0 -20px 60px rgba(0, 0, 0, 0.45);
}

.hidden {
  display: none;
}

.panel-handle {
  width: 44px;
  height: 4px;

  margin:
    1px auto 15px;

  border-radius: 999px;

  background:
    rgba(178, 220, 245, 0.25);
}

.panel-header {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;
}

.panel-header h2 {
  margin: 2px 0 0;

  font-size: 25px;
}

.panel-kicker,
.panel-section-title {
  color: #688ca8;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.15em;
}

.close-button {
  width: 36px;
  height: 36px;

  border-radius: 50%;

  font-size: 25px;
  line-height: 1;
}

.system-status {
  margin:
    12px 0 20px;

  color: #9cb4c6;

  font-size: 13px;

  line-height: 1.45;
}

.panel-section-title {
  margin-bottom: 8px;
}

.object-list {
  display: flex;
  flex-direction: column;

  gap: 8px;
}

.object-card {
  padding: 12px 13px;

  border:
    1px solid rgba(100, 176, 225, 0.13);

  border-radius: 12px;

  background:
    rgba(15, 31, 52, 0.72);
}

.object-top {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 10px;
}

.object-name {
  font-size: 14px;
  font-weight: 650;
}

.object-type {
  color: #627f95;

  font-size: 11px;

  white-space: nowrap;
}

.object-description {
  margin-top: 5px;

  color: #8ca5b7;

  font-size: 12px;
  line-height: 1.4;
}

.quest-badge {
  display: inline-block;

  margin-top: 8px;

  padding: 3px 7px;

  color: #ffe18c;

  font-size: 10px;

  border:
    1px solid rgba(255, 213, 84, 0.28);

  border-radius: 7px;

  background:
    rgba(255, 207, 64, 0.08);
}

@media (max-width: 520px) {
  .system-label {
    font-size: 28px;
  }

  .system-subtitle {
    font-size: 17px;
  }

  .route {
    stroke-width: 7;
  }

  .route-shadow {
    stroke-width: 17;
  }
}