/* M9: WebGL planet viewer (canvas + HTML overlay of base pins and ships). */

.globe { position: relative; width: 100%; overflow: hidden; background: #03040a; touch-action: none; user-select: none; }
.globe-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.globe-canvas:active { cursor: grabbing; }
.globe-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.globe-overlay { position: absolute; inset: 0; pointer-events: none; }
.g-anchor { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .25s; will-change: transform; }

/* base pin */
.g-pin-dot { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--sw-mustard);
  box-shadow: 0 0 0 3px rgba(232,178,58,.35), 0 0 16px 4px rgba(232,178,58,.7); animation: pinpulse 1.8s ease-in-out infinite; }
.g-pin-dot.static { position: relative; left: 0; top: 0; flex: none; animation: none; }
@keyframes pinpulse { 50% { box-shadow: 0 0 0 7px rgba(232,178,58,.12), 0 0 22px 6px rgba(232,178,58,.8); } }
.g-pin-label { position: absolute; left: 14px; top: -30px; white-space: nowrap; padding: 3px 8px; background: rgba(7,11,20,.82); border-left: 3px solid var(--sw-mustard);
  color: #F2E6CF; font: 700 9px var(--sw-font-body); letter-spacing: 1px; }
.g-pin-label b { display: block; font: 400 17px var(--sw-font-display); letter-spacing: 1px; color: var(--sw-mustard); }

/* orbiting ship: the art turns with its heading, the label stays level */
.g-ship-art { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) rotate(var(--ship-rot, 0deg)) scale(var(--ship-scale, 1));
  filter: drop-shadow(0 0 6px rgba(143,227,222,.45)); }
.g-ship-label { position: absolute; left: 0; top: 14px; transform: translateX(-50%); white-space: nowrap; font: 700 9px var(--sw-font-body);
  letter-spacing: 1px; color: var(--sw-teal-light); text-shadow: 0 1px 2px #000; }

.globe-zoom { position: absolute; right: 12px; bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.globe-zoom button { width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(242,230,207,.4); background: rgba(27,42,65,.8); color: #F2E6CF; font-size: 20px; cursor: pointer; }

/* full-screen world page */
.world-view { position: relative; min-height: 100vh; background: #03040a; color: #F2E6CF; }
.world-top { position: absolute; left: 0; right: 0; top: 0; display: flex; gap: 12px; align-items: center; padding: 26px 16px 30px;
  background: linear-gradient(rgba(3,4,10,.85), rgba(3,4,10,0)); pointer-events: none; }
.world-top > * { pointer-events: auto; }
.world-top .back-btn { background: rgba(7,11,20,.5); color: #F2E6CF; border-color: rgba(242,230,207,.6); flex: none; }
.world-top .eyebrow { color: var(--sw-mustard); }
.world-top h1 { font-size: 40px; line-height: .95; color: #F2E6CF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.world-card { margin-left: auto; flex: none; font: 400 20px var(--sw-font-display); letter-spacing: 1px; padding: 2px 8px; border: 2px solid var(--sw-mustard); color: var(--sw-mustard); }
.world-hint { position: absolute; left: 16px; top: calc(min(72vh, 640px) - 30px); font-size: 9px; font-weight: 700; letter-spacing: 2px; color: rgba(242,230,207,.45); pointer-events: none; }
.world-sheet { position: relative; margin-top: -18px; padding: 18px 16px 30px; background: var(--sw-paper); color: var(--sw-ink); border-top: 4px solid var(--sw-ink);
  display: flex; flex-direction: column; gap: 12px; }
.world-flavour { font-size: 13px; line-height: 1.5; font-style: italic; }
.world-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.world-facts > div { border: 2px solid var(--sw-ink); background: var(--sw-paper-light); padding: 5px 8px; min-width: 0; }
.world-facts small { display: block; font-size: 8px; font-weight: 700; letter-spacing: 1px; color: #4a5468; }
.world-facts b { display: block; font: 400 19px var(--sw-font-display); letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.world-row { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 3px solid var(--sw-ink); background: var(--sw-paper-light); color: var(--sw-ink);
  text-decoration: none; font: inherit; cursor: pointer; width: 100%; }
.world-row .dis { display: block; font-size: 20px; line-height: 1; }
.world-row small { display: block; font-size: 9px; font-weight: 700; letter-spacing: 1px; color: #4a5468; margin-top: 2px; }
.world-row .thumb { flex: none; width: 60px; display: flex; justify-content: center; }
.world-row .link-btn { min-height: 0; font-size: 10px; }
@media (min-width: 960px) {
  .world-top h1 { font-size: 52px; }
  .world-sheet { max-width: 720px; margin: -18px auto 0; border: 4px solid var(--sw-ink); }
}