/* ============================================================
   STARG L I D E R
   Sky / Celestial screen styling (FIXED EVENT FLOW)
   ============================================================ */

/* ---- 親パネルはイベントを奪わない ---- */
.panel-box {
  position: relative;
  pointer-events: none;
  /* ⭐ 重要 */
}

/* ただし内部UIはクリック可能に戻す */
.panel-box>* {
  pointer-events: auto;
}

/* ---- Celestial container ---- */
#celestial-map {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  z-index: 10;

  min-height: 300px;
  aspect-ratio: 16 / 9;
  /* ★ これが最強 */
}

/* ---- Canvas は触らない ---- */
#celestial-map canvas,
#celestial-map svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ============================================================
   Overlay (イベントは透過)
   ============================================================ */

.sky-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* ⭐ ここも重要 */
  overflow: hidden;
}

/* Marker */
.sky-icon {
  position: absolute;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  color: rgba(111, 227, 163, 0.92);
  filter: drop-shadow(0 0 6px rgba(111, 227, 163, 0.35));
  opacity: 0.95;
  display: none;
}

.sky-icon-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.sky-label {
  position: absolute;
  transform: translate(18px, -18px);
  color: rgba(111, 227, 163, 0.9);
  font-size: 11px;
  font-family: system-ui, sans-serif;
  letter-spacing: 1px;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
  display: none;
}