/* GCR Lander — brand palette + globe layer styles. */
:root {
  --mh-navy: #0a2a47;
  --mh-navy-dark: #061a2d;
  --mh-navy-deepest: #03111f;
  --mh-brass: #c9a259;
  --mh-brass-bright: #eac479;
  --mh-parchment: #f1e0b8;
  --mh-coast: #edd4a0;
  --mh-rising: #7cff9a;
  --mh-stable: #eac479;
  --mh-falling: #ff6b6b;
  --mh-steel-blue: #7ab9ff;
  --mh-text-muted: #9cb2c9;
  --font-serif: 'Georgia', serif;
  --font-mono: ui-monospace, Menlo, monospace;
}

#gcr-map-app {
  background: radial-gradient(ellipse at 50% 40%, var(--mh-navy) 0%, var(--mh-navy-deepest) 100%);
  color: var(--mh-parchment);
  min-height: 70vh;
}

.gcr-fallback-notice {
  padding: 40px;
  text-align: center;
  color: var(--mh-brass);
  font-family: var(--font-serif);
  font-style: italic;
}

/* Callouts attached to globe via CSS2DRenderer — absolute-positioned DOM. */
.gcr-callout {
  position: absolute;
  font-family: var(--font-serif);
  font-size: 11px;
  line-height: 1.45;
  color: #c9d4e3;
  background: rgba(6, 26, 45, 0.88);
  border: 1px solid rgba(201, 162, 89, 0.55);
  border-radius: 4px;
  padding: 6px 10px;
  max-width: 220px;
  pointer-events: none;
  white-space: nowrap;
}
.gcr-callout__title {
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.gcr-callout__detail {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--mh-brass);
}
.gcr-callout--demotion {
  border-color: rgba(255, 107, 107, 0.6);
}