/* 3D Globe. Space behind the Earth in both themes; HTML labels over the
   canvas; toggle chips along the bottom. */

.gl { overflow: hidden; --gl-pad: clamp(8px, 2.4cqmin, 28px); }
.gl-host { background: radial-gradient(ellipse 80% 75% at 50% 46%, #11294f 0%, #081429 52%, #03070f 100%); }
.gl-stars { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.gl-host .t-canvas { cursor: grab; }
.gl-host .t-canvas:active { cursor: grabbing; }

/* ---- labels ---- */
.gl-labels { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.gl-label {
  position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform, opacity;
  font-family: var(--font-display); color: #fff; line-height: 1.1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 10px rgba(0, 0, 0, .7);
}
.gl-label[hidden] { display: none; }
.gl-land { font-weight: 700; font-size: clamp(10px, 2.3cqmin, 30px); letter-spacing: .08em; text-transform: uppercase; }
.gl-sea { font-weight: 500; font-style: italic; font-size: clamp(9px, 2cqmin, 26px); color: #c5e6ff; letter-spacing: .03em; }
.gl-line { font-family: var(--font); font-weight: 700; font-size: clamp(9px, 1.65cqmin, 20px); }
.gl-line-eq { color: #ff9b8f; }
.gl-line-tr { color: #ffe27a; }
.gl-line-po { color: #b3dcff; }
.gl-line-pm { color: #9ff0a8; }

.gl-loading {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4;
  color: #cfe0ff; font-size: clamp(12px, 2.6cqmin, 26px); pointer-events: none;
}
.gl-hint {
  position: absolute; left: 50%; top: var(--gl-pad); transform: translateX(-50%); z-index: 4; pointer-events: none;
  padding: .3em .9em; border-radius: 999px; white-space: nowrap;
  background: rgba(8, 16, 32, .65); color: #e5eefc; border: 1px solid rgba(255, 255, 255, .14);
  font-size: clamp(11px, 2cqmin, 20px); backdrop-filter: blur(6px);
}

/* ---- controls ---- */
.gl-controls .t-btn:not(.t-btn-primary) {
  background: rgba(10, 20, 40, .72); color: #e8f0ff; border-color: rgba(255, 255, 255, .18); backdrop-filter: blur(6px);
}
.gl-controls .t-btn:not(.t-btn-primary):hover { background: rgba(24, 40, 72, .85); }
.gl-controls .gl-chip[aria-pressed="true"] {
  background: color-mix(in srgb, var(--cat) 40%, rgba(10, 20, 40, .8)); border-color: color-mix(in srgb, var(--cat) 80%, white);
  color: #fff;
}
.gl-controls .gl-chip[aria-pressed="false"] .icon { opacity: .6; }
.gl-spin { min-width: clamp(90px, 18cqmin, 220px); }

/* ---- flat map (no WebGL) ---- */
.gl-flat {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 3cqmin 3cqmin calc(clamp(36px, 8.4cqmin, 84px) + 5cqmin);
}
.gl-map-frame { position: relative; flex: none; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.gl-map { display: block; width: 100%; height: 100%; user-select: none; }
.gl-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gl-map-labels { position: absolute; inset: 0; }
.gl-f-grid { fill: none; stroke: rgba(255, 255, 255, .38); stroke-width: 1; vector-effect: non-scaling-stroke; }
.gl-f-line { fill: none; stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.gl-f-eq { stroke: #ff5a4e; }
.gl-f-tr { stroke: #ffd43b; }
.gl-f-po { stroke: #8fd3ff; }
.gl-f-pm { stroke: #69db7c; }
.gl-flat-note { margin: 1.4cqmin 0 0; color: #b9c8de; font-size: clamp(10px, 1.8cqmin, 16px); }
.gl.is-flat .gl-label { font-size: clamp(8px, 1.7cqmin, 22px); }

/* ---- small stages ---- */
@container (max-width: 640px) {
  .gl-hint { display: none; }
}
@container (max-width: 560px) {
  .gl-controls .gl-chip span { display: none; }
  .gl-controls .gl-chip { width: clamp(36px, 8.4cqmin, 84px); padding: 0; }
  .gl-spin { min-width: 0; }
}
@container (max-height: 360px) {
  .gl-line { display: none; }
  .gl-flat-note { display: none; }
  .gl-sea { font-size: clamp(8px, 2cqmin, 26px); }
}