/* God's Eye View KR — military HUD look */
html, body, #globe { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; background: #000; }
body { font-family: 'Consolas', 'Menlo', monospace; color: #7cf97c; }

.hidden { display: none !important; }
.dim { opacity: .55; }
.hud-glow { text-shadow: 0 0 8px #39ff39; letter-spacing: 2px; }

.panel { background: rgba(0, 10, 4, .72); border: 1px solid rgba(70, 255, 70, .45); box-shadow: 0 0 12px rgba(0, 255, 0, .12) inset; }
.panel-title { font-size: 10px; letter-spacing: 2px; opacity: .8; margin-bottom: 4px; }

#hud-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: space-between;
  padding: 6px 14px; font-size: 12px; letter-spacing: 2px;
  background: rgba(0, 10, 4, .72); border-bottom: 1px solid rgba(70, 255, 70, .45);
}
#hud-tl, #hud-tr { position: fixed; z-index: 10; font-size: 11px; line-height: 1.5; background: rgba(0, 10, 4, .72); padding: 6px 10px; border: 1px solid rgba(70, 255, 70, .35); }
#hud-tl { top: 40px; left: 10px; }
#hud-tr { top: 40px; right: 10px; }

#layer-panel, #sensor-panel, #fly-panel {
  position: fixed; z-index: 10; display: flex; flex-direction: column; gap: 4px;
  background: rgba(0, 10, 4, .72); border: 1px solid rgba(70, 255, 70, .45); padding: 8px 10px;
}
#layer-panel { top: 110px; right: 10px; }
#sensor-panel { bottom: 10px; right: 10px; }
#fly-panel { bottom: 10px; left: 10px; }

.hud-btn, .toggle, select {
  font-family: inherit; font-size: 11px; letter-spacing: 1px; cursor: pointer;
  color: #7cf97c; background: rgba(0, 30, 8, .8); border: 1px solid rgba(70, 255, 70, .5);
  padding: 5px 10px; outline: none;
}
.hud-btn:hover { background: rgba(0, 90, 20, .9); box-shadow: 0 0 8px rgba(120, 255, 120, .5); }
.toggle::before { content: '○ '; }
.toggle.on::before { content: '● '; }
.toggle.on { color: #b6ffb6; box-shadow: 0 0 8px rgba(120, 255, 120, .35); }

#contacts {
  position: fixed; z-index: 10; left: 10px; top: 40%; max-width: 260px;
  background: rgba(0, 10, 4, .72); border: 1px solid rgba(70, 255, 70, .45); padding: 8px 10px;
}
.contact { display: block; font-size: 11px; padding: 3px 4px; cursor: pointer; white-space: nowrap; }
.contact:hover { background: rgba(0, 120, 30, .8); color: #d4ffd4; }

#tcard {
  position: fixed; z-index: 10; bottom: 12px; left: 50%; transform: translateX(-50%);
  min-width: 270px; background: rgba(10, 0, 0, .78); border: 1px solid rgba(255, 60, 60, .65);
  box-shadow: 0 0 16px rgba(255, 60, 60, .2); padding: 8px 12px; color: #ffb8b8;
}
#tcard .panel-title { color: #ff9a9a; }
#tcard-body { font-size: 12px; line-height: 1.55; margin-bottom: 6px; white-space: pre-line; }

/* center reticle */
#globe::after {
  content: ''; position: fixed; z-index: 5; left: 50%; top: 50%; width: 22px; height: 22px;
  transform: translate(-50%, -50%); pointer-events: none;
  border: 1.5px solid rgba(120, 255, 120, .5); border-radius: 50%;
}

/* hide cesium credits bar excess but keep attribution */
.cesium-widget-credits { font-size: 9px !important; filter: sepia(1) hue-rotate(90deg) saturate(2); }