:root{
  --bg1: #0f2027;
  --bg2: #203a43;
  --bg3: #2c5364;
  --glass-bg: rgba(255,255,255,0.08);
  --glass-border: rgba(255,255,255,0.15);
}

* { box-sizing: border-box; }
html,body { height:100%; margin:0; font-family: "Poppins", sans-serif; }

body{
  background: linear-gradient(135deg, var(--bg1), var(--bg2), var(--bg3));
  color: #fff;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding: 36px 16px;
}

.container{
  width: 100%;
  max-width: 1200px;
}

h1{
  text-align:center;
  font-weight:600;
  font-size:2.25rem;
  margin: 0 0 28px;
  background: linear-gradient(to right,#00c6ff,#0072ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.card-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: 24px;
  margin-bottom: 22px;
}

.card{
  border-radius: 16px;
  padding: 18px;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
}

.card:hover{ transform: translateY(-8px); box-shadow: 0 16px 40px rgba(0,0,0,0.6); }

.glass{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border: 1px solid var(--glass-border);
}

.map-card { padding-bottom: 12px; }
#map{ width:100%; height:420px; border-radius:12px; overflow:hidden; }

.people-list { list-style:none; padding: 8px 0; margin:0; display:flex; flex-direction:column; gap:8px; }
.people-list li {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:8px 10px;
  border-radius:10px;
  background: rgba(255,255,255,0.03);
}
.people-list .astro-name{
  font-weight:500;
  cursor:pointer;
  text-decoration: underline;
  text-underline-offset:6px;
}
.people-list .craft{ color: #cfe9ff; opacity:0.8; font-size:0.95rem; }

.astro-card{
  position: absolute;
  top: 0;
  left: 0;
  width: 380px;   
  max-width: calc(100vw - 20px);
  background: rgba(10,14,20,0.72);
  border-radius: 16px;
  padding: 16px;
  display:flex;
  gap:14px;
  align-items:flex-start;
  box-shadow: 0 14px 46px rgba(0,0,0,0.65);
  backdrop-filter: blur(10px);
  transform: translateZ(0);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 9999;
  pointer-events: none;
}

.astro-card.hidden { display: none; opacity:0; }

.astro-card img{
  width:90px;   
  height:90px;
  border-radius:50%;
  object-fit:cover;
  border: 2px solid rgba(255,255,255,0.15);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.15));
}

.astro-meta { flex:1; text-align:left; }
.astro-meta h3{ margin:0 0 8px; font-size:1.1rem; }
.astro-meta p{
  margin:0;
  font-size:0.92rem;
  line-height:1.25;
  color:#dbefff;
  opacity:0.95;
  max-height:7em;   
  overflow:hidden;
}

@media (max-width:640px){
  #map{ height:320px; }
  .astro-card{ width: 260px; padding:10px; }
}