:root {
  --bg: #04060c;
  --panel: rgba(10, 15, 26, 0.78);
  --panel-border: rgba(255, 255, 255, 0.09);
  --text: #e8ecf4;
  --text-dim: #97a0b3;
  --accent: #ffb347;
  --accent-dim: rgba(255, 179, 71, 0.25);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  overflow: hidden;
}

#webgl { position: fixed; inset: 0; }
#webgl canvas { display: block; }

/* Слой лейблов: поверх канваса, клики проходят сквозь, кроме самих лейблов */
#labels {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* ---------- Заголовок ---------- */
#title {
  position: fixed;
  top: 18px;
  left: 22px;
  z-index: 5;
  pointer-events: none;
}
#title h1 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}
#hint {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text-dim);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  transition: opacity 0.6s;
}
#hint.hidden { opacity: 0; }

/* ---------- Лейблы планет ---------- */
/* CSS2DRenderer управляет transform самого .label (центрирует его на объекте),
   поэтому сдвиг вверх и всё оформление пилюли — на внутреннем span'е */
.label {
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.label > span {
  display: block;
  transform: translateY(-26px); /* смещение по типу объекта переопределяется ниже */
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  background: rgba(6, 10, 18, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2px 9px 3px;
  border-radius: 999px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.label:hover > span,
.label.active > span {
  background: var(--accent-dim);
  border-color: rgba(255, 179, 71, 0.5);
  color: #fff;
}
.label.minor > span { font-size: 9.5px; padding: 1px 7px 2px; color: rgba(255, 255, 255, 0.62); }
.label.star > span { color: var(--accent); }
/* Величину сдвига подбираем под видимый размер объекта */
.label.minor > span { transform: translateY(-20px); }
.label.big > span { transform: translateY(-48px); }
.label.star > span { transform: translateY(-84px); }

/* ---------- Нижняя панель управления ---------- */
#controls {
  position: fixed;
  z-index: 5;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: calc(100vw - 24px);
  padding: 10px 16px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  backdrop-filter: blur(10px);
}

.btn {
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--panel-border);
  border-radius: 9px;
  padding: 7px 13px;
  cursor: pointer;
  transition: background 0.15s;
}
.btn:hover { background: rgba(255, 255, 255, 0.15); }
#btn-play { min-width: 42px; }

.ctrl-speed { display: flex; align-items: center; gap: 10px; }
#speed { width: 170px; accent-color: var(--accent); }
#speed-label {
  font-size: 12.5px;
  color: var(--text-dim);
  min-width: 120px;
  font-variant-numeric: tabular-nums;
}

.chk {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
}
.chk:hover { color: var(--text); }
.chk input { accent-color: var(--accent); }

#select-body {
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--panel-border);
  border-radius: 9px;
  padding: 7px 10px;
  cursor: pointer;
}
#select-body option { background: #0d1322; color: var(--text); }

/* ---------- Инфо-панель ---------- */
#info-panel {
  position: fixed;
  z-index: 6;
  top: 18px;
  right: 18px;
  width: 302px;
  padding: 18px 20px 16px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  transform: translateX(calc(100% + 32px));
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
#info-panel.visible { transform: translateX(0); }

#info-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  color: var(--text-dim);
  background: none;
  border: none;
  border-radius: 7px;
  cursor: pointer;
}
#info-close:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }

#info-name { font-size: 22px; font-weight: 600; letter-spacing: 0.02em; }
#info-kind {
  display: inline-block;
  margin: 8px 0 12px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  background: rgba(255, 179, 71, 0.08);
  padding: 3px 9px;
  border-radius: 999px;
}
#info-rows {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  font-size: 13px;
}
#info-rows dt { color: var(--text-dim); }
#info-rows dd { text-align: right; font-variant-numeric: tabular-nums; }
#info-fact {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--panel-border);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-dim);
}

/* ---------- Географическая карта тела (Земля, Луна) ----------
 * Подложка прозрачна для мыши (колесо продолжает зумить сцену — карта
 * сворачивается сама при отдалении), интерактивна только «бумага». */
#body-map {
  position: fixed;
  inset: 0;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  visibility: hidden;
}
#body-map.open { visibility: visible; }

#body-map::before {
  /* мягкое затемнение сцены позади карты */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(2, 4, 9, 0.25), rgba(2, 4, 9, 0.72));
  opacity: 0;
  transition: opacity 0.6s;
}
#body-map.open::before { opacity: 1; }

.map-paper {
  pointer-events: auto;
  touch-action: none; /* жесты отдаём канвасу, не браузеру */
  position: relative;
  width: min(78vw, 940px);
  padding: 12px 12px 0;
  background: linear-gradient(160deg, #f4efe3, #e9e2d2);
  border-radius: 6px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65);
  transform: translateY(24px) scale(0.94);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s;
}
#body-map.open .map-paper { transform: translateY(0) scale(1); opacity: 1; }

#body-map-close {
  position: absolute;
  top: -13px;
  right: -13px;
  width: 30px;
  height: 30px;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  color: #3c3527;
  background: #f4efe3;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}
#earth-map-close:hover { background: #fff; }

/* Три «створки» атласа: одна картинка на всех (background-size 300%,
   назначается из JS по телу), боковые створки раскрываются из центра */
.map-folds {
  display: flex;
  aspect-ratio: 2 / 1;
  perspective: 1400px;
  border: 1px solid #8a7f66;
  overflow: hidden;
}
.map-panel {
  position: relative;
  width: 33.333%;
  background-size: 300% 100%;
  backface-visibility: hidden;
  transition: transform 0.85s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.5s;
}
/* координатная сетка поверх карты: меридианы/параллели через 30°, экватор */
.map-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
      90deg,
      rgba(28, 42, 60, 0.35) 0 1px,
      transparent 1px 25%
    ),
    repeating-linear-gradient(0deg, rgba(28, 42, 60, 0.35) 0 1px, transparent 1px 16.6667%),
    linear-gradient(
      transparent calc(50% - 1px),
      rgba(214, 132, 44, 0.85) calc(50% - 1px) calc(50% + 1px),
      transparent calc(50% + 1px)
    );
}
.map-panel.mid { background-position: 50% 0; }
.map-panel.left { background-position: 0 0; transform-origin: 100% 50%; }
.map-panel.right { background-position: 100% 0; transform-origin: 0% 50%; }

/* сложенное состояние */
#body-map:not(.open) .map-panel.left { transform: rotateY(-89deg); opacity: 0; }
#body-map:not(.open) .map-panel.right { transform: rotateY(89deg); opacity: 0; }

/* Интерактивный слой карты (Leaflet + Esri World Imagery) для Земли:
   проявляется после разворота створок. Пока не загрузились тайлы
   (офлайн), просвечивает та же статичная текстура-подложка. */
#body-map-leaflet {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.45s 0.15s;
  background: url("../assets/earth/earth_atmos_2048.jpg") center / cover;
  cursor: grab;
}
#body-map-leaflet.leaflet-live { opacity: 1; }
#body-map-leaflet:active { cursor: grabbing; }
/* сетка-параллакс остаётся декорацией только под интерактивным слоем */
#body-map-leaflet .leaflet-control-attribution {
  font-size: 9px;
  background: rgba(255, 255, 255, 0.75);
}

/* тень на сгибах створок */
.map-panel.left::after,
.map-panel.right::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.map-panel.left::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 16%); }
.map-panel.right::after { background: linear-gradient(270deg, rgba(0, 0, 0, 0.2), transparent 16%); }

.map-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 2px 10px;
  color: #453d2c;
}
.map-caption strong { font-size: 14px; letter-spacing: 0.04em; }
.map-caption span { font-size: 11px; color: #6d6350; text-align: right; }

/* ---------- Загрузочный экран ---------- */
#loader {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--bg);
  transition: opacity 0.7s;
}
#loader.hidden { opacity: 0; pointer-events: none; }
.spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader-text {
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
}

/* ---------- Мобильная версия ---------- */
@media (max-width: 640px) {
  #title h1 { font-size: 16px; }
  #hint { font-size: 11px; max-width: 70vw; }
  #controls { gap: 8px; padding: 8px 10px; bottom: 10px; }
  #speed { width: 110px; }
  #speed-label { min-width: 0; }
  #info-panel {
    top: auto;
    bottom: 84px;
    right: 10px;
    left: 10px;
    width: auto;
    transform: translateY(calc(100% + 110px));
  }
  #info-panel.visible { transform: translateY(0); }
  .map-paper { width: 94vw; padding: 8px 8px 0; }
  .map-caption span { display: none; }
}