*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  background-color: #000000;
  color: #e8f8ff;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
  touch-action: none;
}

#world-canvas {
  display: block;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}

/* Ephemeral launch prompt — vanishes permanently on first touch or keypress */
#intro-overlay {
  position: fixed;
  left: 50%;
  bottom: calc(11% + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  transition: opacity 0.85s ease, transform 0.85s ease;
  z-index: 10;
  width: min(92vw, 480px);
}

#intro-overlay.dismissed {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

.intro-title {
  font-size: clamp(0.88rem, 2.6vw, 1.05rem);
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #7ef2ff;
  text-shadow: 0 0 14px rgba(64, 232, 255, 0.85), 0 0 32px rgba(178, 86, 255, 0.55);
  margin-bottom: 0.55rem;
}

.intro-sub {
  font-size: clamp(0.68rem, 2.0vw, 0.78rem);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: rgba(255, 214, 148, 0.82);
  text-shadow: 0 0 12px rgba(255, 146, 84, 0.55);
  line-height: 1.65;
}

/* Brief biome name whisper when crossing into a new planetary zone */
#zone-whisper {
  position: fixed;
  top: calc(10% + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  pointer-events: none;
  font-size: clamp(0.8rem, 2.3vw, 0.96rem);
  font-weight: 300;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 1.1s ease, transform 1.1s ease;
  z-index: 10;
  white-space: nowrap;
}

#zone-whisper.visible {
  opacity: 0.92;
  transform: translateX(-50%) translateY(0);
}

/* Ephemeral Landmark Awakening celebration whisper */
#landmark-whisper {
  position: fixed;
  top: calc(16.5% + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  pointer-events: none;
  text-align: center;
  opacity: 0;
  transition: opacity 0.85s ease, transform 0.85s ease;
  z-index: 10;
  width: min(92vw, 480px);
}

#landmark-whisper.visible {
  opacity: 0.96;
  transform: translateX(-50%) translateY(0);
}

.landmark-title {
  font-size: clamp(0.76rem, 2.2vw, 0.9rem);
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #ffe27a;
  text-shadow: 0 0 14px rgba(255, 210, 88, 0.9), 0 0 28px rgba(255, 92, 200, 0.55);
  margin-bottom: 0.3rem;
}

.landmark-sub {
  font-size: clamp(0.64rem, 1.8vw, 0.72rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #7ef7df;
  text-shadow: 0 0 12px rgba(64, 242, 208, 0.75);
}

/* Minimal translucent glowing vector ring shown only under active touch/drag */
#touch-indicator {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  opacity: 0;
  transition: opacity 0.18s ease;
}

#touch-indicator.active {
  opacity: 1;
}

.touch-ring-base {
  position: absolute;
  top: -46px;
  left: -46px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 1.25px solid rgba(90, 238, 255, 0.42);
  box-shadow: 0 0 14px rgba(90, 238, 255, 0.25), inset 0 0 10px rgba(255, 88, 198, 0.18);
  will-change: transform;
}

.touch-ring-knob {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid #ff72cf;
  background: rgba(0, 0, 0, 0.85);
  box-shadow: 0 0 12px rgba(255, 92, 200, 0.9);
  will-change: transform;
}

/* Tiny unobtrusive corner controls (audio & invert pitch) */
#corner-controls {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: calc(14px + env(safe-area-inset-right, 0px));
  display: flex;
  gap: 10px;
  z-index: 12;
}

.glyph-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(116, 232, 255, 0.28);
  color: rgba(145, 240, 255, 0.68);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: opacity 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  touch-action: manipulation;
}

.glyph-btn:hover,
.glyph-btn.active-toggle {
  border-color: rgba(255, 118, 212, 0.85);
  color: #ff94de;
  box-shadow: 0 0 12px rgba(255, 102, 204, 0.45);
}

.glyph-btn.off {
  opacity: 0.35;
  border-color: rgba(255, 255, 255, 0.16);
}

.glyph-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.glyph-btn.paused {
  border-color: rgba(255, 206, 92, 0.92);
  color: #ffd875;
  box-shadow: 0 0 14px rgba(255, 196, 68, 0.55);
}

.glyph-btn.active-map {
  border-color: rgba(94, 246, 255, 0.95);
  color: #8cf8ff;
  box-shadow: 0 0 16px rgba(72, 236, 255, 0.65), inset 0 0 8px rgba(255, 196, 76, 0.35);
}

/* Interactive 3D Planetary Globe HUD */
#globe-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 11;
}

.globe-header {
  position: absolute;
  top: calc(58px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: min(92vw, 480px);
}

.globe-title {
  font-size: clamp(0.84rem, 2.5vw, 1.0rem);
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #82f4ff;
  text-shadow: 0 0 14px rgba(74, 232, 255, 0.85), 0 0 28px rgba(176, 84, 255, 0.5);
  margin-bottom: 0.38rem;
}

.globe-stats {
  font-size: clamp(0.68rem, 2.0vw, 0.78rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #ffd978;
  text-shadow: 0 0 12px rgba(255, 196, 72, 0.75);
}

.globe-footer {
  position: absolute;
  bottom: calc(6.5% + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: min(94vw, 520px);
}

.globe-legend {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 20px;
  padding: 8px 18px;
  margin-bottom: 0.65rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(116, 232, 255, 0.24);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.85);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: clamp(0.64rem, 1.85vw, 0.73rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.legend-unvisited {
  color: #ffe07d;
  text-shadow: 0 0 10px rgba(255, 198, 68, 0.8);
}

.legend-visited {
  color: #5ef7cf;
  text-shadow: 0 0 10px rgba(52, 240, 196, 0.65);
}

.legend-ship {
  color: #d6fcff;
  text-shadow: 0 0 10px rgba(130, 246, 255, 0.85);
}

@keyframes pulseBeaconGlyph {
  0%, 100% { transform: rotate(45deg) scale(0.92); box-shadow: 0 0 8px #ffc845, 0 0 16px #ff4dc4; }
  50%      { transform: rotate(45deg) scale(1.18); box-shadow: 0 0 14px #ffe47a, 0 0 24px #ff66d4; }
}

.legend-diamond {
  width: 9px;
  height: 9px;
  background: #000;
  border: 1.6px solid #ffd866;
  transform: rotate(45deg);
  animation: pulseBeaconGlyph 1.5s ease-in-out infinite;
}

.legend-spire {
  width: 3px;
  height: 12px;
  border-radius: 1px;
  background: #3bf5c4;
  box-shadow: 0 0 8px #3bf5c4;
}

.legend-arrow {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid #a8fbff;
  filter: drop-shadow(0 0 6px #6ef4ff);
}

.globe-sub {
  font-size: clamp(0.62rem, 1.75vw, 0.72rem);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: rgba(145, 238, 255, 0.78);
  text-shadow: 0 0 10px rgba(72, 224, 255, 0.45);
}

#pause-banner {
  position: fixed;
  left: 50%;
  bottom: calc(10% + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  z-index: 11;
  width: min(92vw, 460px);
}

.pause-title {
  font-size: clamp(0.86rem, 2.4vw, 1.0rem);
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: #ffd875;
  text-shadow: 0 0 14px rgba(255, 198, 74, 0.85), 0 0 28px rgba(255, 92, 200, 0.45);
  margin-bottom: 0.45rem;
}

.pause-sub {
  font-size: clamp(0.66rem, 1.9vw, 0.75rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(140, 238, 255, 0.8);
  text-shadow: 0 0 10px rgba(72, 224, 255, 0.45);
}

#error-banner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 16px 24px;
  border: 1px solid #ff4d6d;
  background: #000;
  color: #ff8fa3;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  z-index: 50;
}