/* ============================================================
   Orgship · Cosmos layer
   Звёздный фон + туманность для Ship Map.
   Без JS. Активируется через :has() когда view-ship актвинен.
   Все звёзды — box-shadow на одном пикселе (быстро, без SVG).
   ============================================================ */

.cosmos-layer {
  position: fixed;
  inset: 0;
  /* z-index — ниже, вместе с остальной раскладкой стекинга канваса и
     .app (R-230, мега-ревью G2-1.6): было продублировано здесь же
     значением 0, а .app — своим отдельным z-index:1, тихо перекрытым
     тем же классом ниже (z-index:2). Одна точка правды на файл. */
  pointer-events: none;
  overflow: hidden;
  /* Виден всегда — простой и надёжный фон для всех вкладок.
     Если в будущем надо ограничить — добавим класс через JS. */
}

/* ── Туманность: фоновая картинка (cosmos_bg.png) ─────────── */
.cosmos-nebula {
  position: absolute;
  inset: 0;
  background:
    url("../img/cosmos_bg.png?v=4") center bottom / cover no-repeat,
    #0a1128;
  /* Лёгкая виньетка-приглушение по краям, чтобы UI читался поверх */
  box-shadow: inset 0 0 200px rgba(10, 17, 40, 0.55);
}
/* Тонкий тёмный градиент сверху — чтобы шапка не «пропадала» на фоне */
.cosmos-nebula::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(10, 17, 40, 0.55) 0%,
    rgba(10, 17, 40, 0) 18%,
    rgba(10, 17, 40, 0) 78%,
    rgba(10, 17, 40, 0.45) 100%);
}

/* ── Дальние звёзды отключены: их роль теперь играет cosmos_bg.png ─ */
.cosmos-stars-far { display: none; }

/* ── Ближние звёзды (34 шт, мерцают) ─────────────────────── */
.cosmos-stars-near {
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 1367px 458px rgba(220,240,255,0.85), 1446px 883px rgba(170,210,255,0.9), 694px 862px rgba(220,240,255,0.85), 730px 652px rgba(255,255,255,0.95), 1478px 749px rgba(255,255,255,0.95), 692px 939px rgba(170,210,255,0.9), 1440px 37px rgba(170,210,255,0.9), 678px 1059px rgba(255,250,230,0.85), 1049px 131px rgba(255,255,255,0.95), 1881px 468px rgba(255,255,255,0.95), 172px 543px rgba(255,250,230,0.85), 81px 371px rgba(255,250,230,0.85), 1547px 265px rgba(170,210,255,0.9), 1739px 529px rgba(170,210,255,0.9), 305px 1054px rgba(170,210,255,0.9), 1434px 669px rgba(255,255,255,0.95), 571px 117px rgba(220,240,255,0.85), 871px 148px rgba(255,250,230,0.85), 34px 181px rgba(255,250,230,0.85), 171px 455px rgba(255,255,255,0.95), 541px 249px rgba(170,210,255,0.9), 23px 694px rgba(170,210,255,0.9), 1897px 548px rgba(220,240,255,0.85), 88px 1079px rgba(220,240,255,0.85), 224px 330px rgba(255,250,230,0.85), 103px 370px rgba(220,240,255,0.85), 1909px 638px rgba(255,250,230,0.85), 1087px 421px rgba(255,250,230,0.85), 912px 1024px rgba(220,240,255,0.85), 554px 710px rgba(255,255,255,0.95), 512px 75px rgba(255,255,255,0.95), 37px 1035px rgba(220,240,255,0.85), 1053px 972px rgba(220,240,255,0.85), 1914px 915px rgba(255,255,255,0.95);
  animation: cosmos-twinkle 6s ease-in-out infinite;
}

.cosmos-stars-near.layer-b {
  width: 1.5px; height: 1.5px;
  animation-duration: 4.5s;
  animation-delay: -2.2s;
}
.cosmos-stars-near.layer-c {
  width: 2.5px; height: 2.5px;
  animation-duration: 7.5s;
  animation-delay: -4.8s;
}

@keyframes cosmos-twinkle {
  0%, 100% { opacity: 1; filter: brightness(1); }
  50%      { opacity: 0.45; filter: brightness(0.6); }
}

/* ── Усиленный glow на корпусе корабля ─────────────────── */
.ship-hull {
  filter:
    drop-shadow(0 0 36px rgba(79, 123, 196, 0.22))
    drop-shadow(0 0 90px rgba(125, 211, 255, 0.16));
}

/* ============================================================
   Живой космос (cosmos.js) — анимированный canvas поверх туманности.
   Слои: nebula-арт (z0) → анимированный canvas (z1) → app (z2).
   CSS-звёзды отключаем, их заменяет canvas (мерцание/параллакс/метеоры).
   ============================================================ */
#cosmos-canvas { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.cosmos-layer { z-index: 0; }
.app { position: relative; z-index: 2; }
.cosmos-stars-near,
.cosmos-stars-near.layer-b,
.cosmos-stars-near.layer-c { display: none !important; }

/* ── На малых экранах звёзд достаточно ───────────────────── */
@media (max-width: 720px) {
  .cosmos-stars-near.layer-c { display: none; }
}

/* ── Уважаем prefers-reduced-motion ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cosmos-stars-near,
  .cosmos-stars-near.layer-b,
  .cosmos-stars-near.layer-c { animation: none; }
}