/* ============================================================
   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 {
  position: relative;
  overflow: hidden;
}

/* ============================================================
   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;
}


/* ============================================================
   RESPONSIVE: Mobile
   ============================================================ */

@media screen and (max-width: 768px) {
  .sky-icon {
    width: 22px;
    height: 22px;
  }

  .sky-label {
    font-size: 10px;
    transform: translate(14px, -14px);
  }
}

@media screen and (max-width: 480px) {
  .sky-icon {
    width: 18px;
    height: 18px;
  }

  .sky-label {
    font-size: 9px;
    transform: translate(12px, -12px);
  }
}