:root {
  --bg: #05060f;
  --ink: #eaf2ff;
  --muted: #9fb0d0;
  --glass: rgba(14, 18, 38, 0.72);
  --glass-brd: rgba(140, 170, 255, 0.18);
  --live: #4fc3f7;
  --soon: #6b7599;
  --accent: #4fc3f7;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: radial-gradient(circle at 50% 40%, #0a0f24 0%, #05060f 60%, #020308 100%);
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

#globe {
  position: fixed;
  inset: 0;
  z-index: 0;
}
#globe canvas { display: block; }

/* ---------- Header ---------- */
#header {
  position: fixed;
  top: 18px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 10;
  pointer-events: none;
  padding: 0 16px;
}
#header h1 {
  margin: 0;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: clamp(22px, 4vw, 40px);
  letter-spacing: 0.5px;
  background: linear-gradient(92deg, #7fd4ff, #b69bff 55%, #ff9ecb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 32px rgba(120, 170, 255, 0.35);
}
#header .sub {
  margin: 2px 0 0;
  font-size: clamp(11px, 1.6vw, 14px);
  color: var(--muted);
  letter-spacing: 0.3px;
}

/* ---------- Glass panels ---------- */
#cities, #legend {
  position: fixed;
  z-index: 10;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: 16px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.panel-title {
  font-family: "Fredoka", sans-serif;
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

/* ---------- City picker ---------- */
#cities {
  top: 92px;
  left: 16px;
  width: 210px;
  max-height: calc(100vh - 140px);
  display: flex;
  flex-direction: column;
}
#city-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#city-list button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
#city-list button .cdot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: 0 0 8px currentColor;
}
#city-list button .cname { flex: 1; font-weight: 500; }
#city-list button .cbadge {
  font-size: 9px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--live);
  border: 1px solid rgba(79, 195, 247, 0.5);
  border-radius: 6px;
  padding: 1px 5px;
}
#city-list button.soon { opacity: 0.62; }
#city-list button.soon .cbadge { display: none; }
#city-list button:hover,
#city-list button:focus-visible,
#city-list button.hot {
  background: rgba(120, 170, 255, 0.14);
  border-color: var(--glass-brd);
  outline: none;
  transform: translateX(2px);
}

#surprise {
  margin-top: 12px;
  padding: 9px;
  border: 1px solid var(--glass-brd);
  border-radius: 11px;
  background: linear-gradient(92deg, rgba(127, 212, 255, 0.16), rgba(182, 155, 255, 0.16));
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
}
#surprise:hover { filter: brightness(1.25); }
#surprise:active { transform: scale(0.98); }

/* ---------- Legend ---------- */
#legend {
  bottom: 44px;
  left: 16px;
  width: 210px;
  font-size: 12.5px;
}
#legend .row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 0;
  color: var(--muted);
}
#legend .dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
#legend .dot.live { background: var(--live); box-shadow: 0 0 10px var(--live); }
#legend .dot.soon { background: var(--soon); }
#legend .toggle { cursor: pointer; margin-top: 6px; user-select: none; }
#legend .toggle input { accent-color: var(--live); }
#legend .toggle b { color: var(--ink); font-weight: 600; }

/* ---------- Hover info card ---------- */
#info {
  position: fixed;
  z-index: 30;
  pointer-events: none;
  min-width: 160px;
  max-width: 240px;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 11px 13px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  transform: translate(14px, 14px);
}
#info .info-name {
  font-family: "Fredoka", sans-serif;
  font-size: 17px;
  font-weight: 600;
}
#info .info-country { font-size: 12px; color: var(--muted); margin-top: 1px; }
#info .info-tag { font-size: 12.5px; margin-top: 7px; color: var(--ink); }
#info .info-status {
  font-size: 11px;
  margin-top: 8px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- ISS label ---------- */
#iss-label {
  position: fixed;
  z-index: 20;
  transform: translate(8px, -50%);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #cfe8ff;
  text-shadow: 0 0 8px rgba(120, 200, 255, 0.9);
  pointer-events: none;
  white-space: nowrap;
}

/* ---------- Toast ---------- */
#toast {
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 40;
  padding: 10px 18px;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Dive overlay ---------- */
#dive-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, var(--accent) 0%, #ffffff 120%);
  transition: opacity 0.15s linear;
}
#dive-overlay.show { pointer-events: all; }
.dive-inner { text-align: center; color: #0b1020; mix-blend-mode: overlay; }
.dive-label {
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: 0.8;
}
#dive-city {
  font-family: "Fredoka", sans-serif;
  font-size: clamp(34px, 9vw, 84px);
  font-weight: 700;
}

/* ---------- Attribution ---------- */
#attrib {
  position: fixed;
  bottom: 8px;
  right: 12px;
  left: 12px;
  z-index: 10;
  text-align: right;
  font-size: 10.5px;
  color: rgba(159, 176, 208, 0.65);
  pointer-events: none;
}
#attrib a { color: rgba(127, 212, 255, 0.85); pointer-events: all; text-decoration: none; }
#attrib a:hover { text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  #cities {
    top: auto;
    bottom: 44px;
    left: 10px;
    right: 10px;
    width: auto;
    max-height: 34vh;
  }
  #city-list { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; }
  #city-list button { width: auto; white-space: nowrap; }
  #surprise { display: none; }
  #legend { bottom: auto; top: 92px; right: 10px; left: auto; width: auto; }
  #legend .toggle { display: none; }
  #attrib { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #toast, #city-list button, #dive-overlay { transition: none; }
}