/* detail.css (round 2, agent B): atlas-style water labels (CSS2D elements inside #labels) */
.gx-lbl {
  pointer-events: none; user-select: none; -webkit-user-select: none;
  white-space: nowrap; text-align: center;
  font-family: Georgia, "Times New Roman", "Noto Serif", serif; font-style: italic; font-weight: 400;
  color: rgba(196, 226, 232, 0.62);
  text-shadow: 0 1px 2px rgba(2, 8, 18, 0.75);
  opacity: 0;
  transition: opacity 0.5s ease, color 0.6s ease;
  will-change: opacity;
}
.gx-lbl.on { opacity: 1; animation: gx-in 0.6s ease-out both; }
@keyframes gx-in { from { opacity: 0; } to { opacity: 1; } }

/* oceans: widely tracked capitals, the calmest and largest */
.gx-ocean {
  font-size: 13px; letter-spacing: 0.42em; text-transform: uppercase;
  color: rgba(205, 218, 226, 0.42);
  padding-left: 0.42em; /* balance the trailing tracking so the text stays centred */
}
/* seas, gulfs, bays */
.gx-sea {
  font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(190, 206, 216, 0.45);
  padding-left: 0.24em;
}
/* rivers and lakes (close zoom) */
.gx-river, .gx-lake {
  font-size: 11px; letter-spacing: 0.06em;
  color: rgba(160, 186, 202, 0.7);
}
.gx-lake { color: rgba(165, 192, 208, 0.7); }

/* night side: dimmer, cooler */
.gx-lbl.gx-night { color: rgba(150, 165, 185, 0.32); }
.gx-river.gx-night, .gx-lake.gx-night { color: rgba(130, 150, 172, 0.5); }

@media (max-width: 600px) {
  .gx-ocean { font-size: 11.5px; letter-spacing: 0.34em; padding-left: 0.34em; }
  .gx-sea { font-size: 9.5px; letter-spacing: 0.18em; padding-left: 0.18em; }
  .gx-river, .gx-lake { font-size: 10px; }
}