.globe-page {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(59,130,246,.10), transparent 28%),
    radial-gradient(circle at 15% 20%, rgba(201,162,39,.07), transparent 24%),
    var(--bg);
}
.globe-nav { position: relative; }
.globe-shell { max-width: none; padding: 0; }
.globe-stage {
  position: relative;
  min-height: calc(100vh - 92px);
  height: calc(100vh - 92px);
  overflow: hidden;
  isolation: isolate;
}
.globe-copy {
  position: absolute;
  z-index: 4;
  top: clamp(2rem, 7vh, 5rem);
  left: clamp(1.25rem, 6vw, 6rem);
  width: min(34rem, 42vw);
}
.globe-copy h1 {
  font-size: clamp(2.4rem, 5.2vw, 5.2rem);
  letter-spacing: -.045em;
  margin-bottom: .8rem;
}
.globe-copy p {
  color: var(--muted);
  max-width: 34rem;
  font-size: clamp(.9rem, 1.3vw, 1.05rem);
}
.globe-wrap {
  position: absolute;
  width: min(72vw, 820px);
  height: min(72vw, 820px);
  min-width: 430px;
  min-height: 430px;
  left: 50%;
  top: 51%;
  transform: translate(-42%, -50%);
  cursor: grab;
  touch-action: none;
  z-index: 2;
}
.globe-wrap.dragging { cursor: grabbing; }
.globe {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 27%, rgba(255,255,255,.18), transparent 8%),
    radial-gradient(circle at 35% 30%, rgba(46,75,112,.96), rgba(10,22,38,.98) 55%, #050a12 78%);
  box-shadow:
    inset -55px -30px 90px rgba(0,0,0,.78),
    inset 28px 20px 70px rgba(108,156,211,.13),
    0 0 70px rgba(59,130,246,.13);
  border: 1px solid rgba(148,163,184,.18);
}
.globe::before {
  content: "";
  position: absolute;
  inset: 3%;
  border-radius: 50%;
  background:
    repeating-linear-gradient(90deg, transparent 0 10%, rgba(148,163,184,.045) 10.1% 10.25%),
    repeating-linear-gradient(0deg, transparent 0 10%, rgba(148,163,184,.035) 10.1% 10.25%);
  mask-image: radial-gradient(circle, #000 55%, transparent 78%);
}
.globe::after {
  content: "";
  position: absolute;
  inset: -2%;
  border-radius: 50%;
  border: 1px solid rgba(201,162,39,.16);
  box-shadow: 0 0 35px rgba(201,162,39,.08);
}
#globeCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}
.globe-glow {
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, transparent 58%, rgba(59,130,246,.12) 70%, transparent 76%);
  z-index: 1;
}
.ambient {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
  z-index: 0;
}
.ambient-a {
  width: 35vw; height: 35vw; left: -10vw; top: 25%;
  background: radial-gradient(circle, rgba(59,130,246,.10), transparent 68%);
}
.ambient-b {
  width: 32vw; height: 32vw; right: -8vw; bottom: -8vw;
  background: radial-gradient(circle, rgba(201,162,39,.08), transparent 68%);
}
.globe-controls {
  position: absolute;
  z-index: 5;
  left: clamp(1.25rem, 6vw, 6rem);
  bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--muted);
  font-size: .78rem;
  letter-spacing: .05em;
}
.globe-controls button {
  border: 1px solid var(--border);
  background: rgba(17,24,39,.72);
  color: var(--text);
  border-radius: 999px;
  padding: .6rem 1rem;
  cursor: pointer;
  backdrop-filter: blur(10px);
}
.globe-controls button:hover { border-color: var(--gold-dim); color: var(--gold); }
.globe-controls i {
  display: inline-block;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--emerald);
  margin-right: .4rem;
  box-shadow: 0 0 12px rgba(16,185,129,.7);
}
.location-panel {
  position: absolute;
  z-index: 6;
  right: clamp(1rem, 4vw, 4rem);
  top: 50%;
  transform: translateY(-40%);
  width: min(290px, 25vw);
  min-width: 240px;
  padding: 1rem;
  background: rgba(10,14,23,.72);
  border: 1px solid rgba(148,163,184,.15);
  border-radius: 12px;
  backdrop-filter: blur(16px);
}
.panel-kicker, .focus-label {
  color: var(--muted);
  font-size: .65rem;
  letter-spacing: .14em;
}
.location-list { margin-top: .55rem; }
.location-item {
  width: 100%;
  display: grid;
  grid-template-columns: 9px 1fr;
  gap: .65rem;
  padding: .7rem .35rem;
  border: 0;
  border-bottom: 1px solid rgba(148,163,184,.09);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.location-item:last-child { border-bottom: 0; }
.location-item:hover .location-name, .location-item.active .location-name { color: var(--gold); }
.location-dot {
  width: 7px; height: 7px; margin-top: .48rem;
  border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 12px rgba(201,162,39,.65);
}
.location-name { font-size: .88rem; font-weight: 600; }
.location-meta { display: block; color: var(--muted); font-size: .7rem; margin-top: .1rem; }
.panel-note {
  margin-top: .7rem;
  padding-top: .7rem;
  border-top: 1px solid rgba(148,163,184,.09);
  color: #64748b;
  font-size: .68rem;
  line-height: 1.45;
}
.focus-card {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  display: grid;
  gap: .15rem;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 2px 18px #000;
}
.focus-card strong { font-size: .95rem; }
.focus-card span:last-child { color: var(--muted); font-size: .72rem; }
@media (max-width: 900px) {
  .globe-stage { height: calc(100vh - 128px); min-height: 650px; }
  .globe-copy { top: 1.5rem; left: 1rem; width: 55vw; }
  .globe-copy h1 { font-size: clamp(2rem, 7vw, 3.4rem); }
  .globe-wrap { width: 78vw; height: 78vw; min-width: 360px; min-height: 360px; transform: translate(-50%, -42%); top: 52%; }
  .location-panel { right: 1rem; top: auto; bottom: 4.5rem; transform: none; width: 220px; min-width: 0; }
}
@media (max-width: 640px) {
  .globe-page { overflow: auto; }
  .globe-stage { min-height: 760px; height: 760px; }
  .globe-copy { width: calc(100% - 2rem); }
  .globe-copy p { max-width: 31rem; }
  .globe-wrap { width: 92vw; height: 92vw; min-width: 300px; min-height: 300px; top: 46%; }
  .location-panel { left: 1rem; right: 1rem; bottom: 4.25rem; width: auto; }
  .location-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .75rem; }
  .panel-note { display: none; }
  .globe-controls { left: 1rem; bottom: 1rem; }
  .focus-card { bottom: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .globe-page * { scroll-behavior: auto !important; }
}