/* Khám phá không gian — ISS card visuals */

.kg-iss-body { display: flex; flex-direction: column; gap: 22px; padding-top: 4px; }

/* ── Radar ───────────────────────────────────────────────── */
.kg-radar {
  width: 130px; height: 130px;
  margin: 0 auto;
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 50%;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.3s ease;
}
.kg-iss:hover .kg-radar { border-color: rgba(56, 189, 248, 0.5); }
.kg-radar-icon { font-size: 2rem; line-height: 1; position: relative; z-index: 2; }
.kg-radar-pulse {
  position: absolute; inset: 0; border-radius: 50%;
  background: rgba(56, 189, 248, 0.1);
  animation: kg-ping 3s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes kg-ping {
  0% { transform: scale(0.85); opacity: 0.7; }
  75%, 100% { transform: scale(1.6); opacity: 0; }
}
.kg-radar-sweep {
  position: absolute; top: 0; left: calc(50% - 0.5px);
  width: 1px; height: 50%;
  background: linear-gradient(to bottom, transparent, var(--kg-sky));
  transform-origin: bottom;
  animation: kg-sweep 5s linear infinite;
}
@keyframes kg-sweep { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ── Coordinate panels ───────────────────────────────────── */
.kg-coord {
  padding: 12px 14px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--border);
  transition: border-color 0.3s ease;
}
.kg-iss:hover .kg-coord { border-color: rgba(56, 189, 248, 0.3); }
.kg-coord-label {
  font-family: 'JetBrains Mono', monospace; font-size: 0.7rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted);
  margin: 0 0 4px;
}
.kg-coord-value {
  display: flex; justify-content: space-between; align-items: baseline;
  color: var(--kg-sky);
  font-family: 'JetBrains Mono', monospace; font-size: 1.05rem; letter-spacing: 0.04em;
}
.kg-coord-value .dir { color: var(--text-muted); font-size: 0.85rem; letter-spacing: 0.16em; }

.kg-iss-extra {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.78rem;
  color: var(--text-muted);
}
.kg-iss-extra .row { padding: 8px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; }
.kg-iss-extra .row b { color: var(--text); font-weight: 500; }
.kg-iss-extra .row small { display: block; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; margin-bottom: 2px; }

/* ── Live indicator ──────────────────────────────────────── */
.kg-live {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted);
  margin-top: 2px;
}
.kg-live-dot {
  position: relative; width: 8px; height: 8px;
}
.kg-live-dot::before, .kg-live-dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--kg-sky);
}
.kg-live-dot::before { animation: kg-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite; opacity: 0.75; }

/* ── Issue badge (vol/year) ──────────────────────────────── */
.kg-issue-badge {
  display: inline-block; transform: rotate(2deg); padding: 5px 12px;
  background: var(--kg-coral); color: #0F1923; border-radius: 4px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.74rem;
  letter-spacing: 0.18em; font-weight: 700;
  box-shadow: 0 6px 14px rgba(255, 107, 74, 0.18);
  margin-bottom: 16px;
}

@media (max-width: 480px) {
  .kg-radar { width: 110px; height: 110px; }
  .kg-iss-extra { grid-template-columns: 1fr; }
}