html, body {
  width: 100vw !important;
  height: 100vh !important;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#container, #cloudMap {
  width: 100vw !important;
  height: 100vh !important;
}

/* Ignoriši Windows DPI skaliranje */
@media (min-resolution: 1dppx) {
  body {
    zoom: 100% !important;
  }
}
/* Loading ekran */
#loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #88aaff;
  font-size: 48px;
  font-weight: bold;
  text-shadow: 0 0 10px #2244ff;
  z-index: 9999;
  pointer-events: none;
  white-space: nowrap;
}

/* Tooltip za firme na hover/dodir zvezdice */
.tooltip {
  position: absolute;
  background: rgba(10, 10, 30, 0.92);
  color: #e0f0ff;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 22px;
  font-weight: 500;
  pointer-events: none;
  z-index: 1000;
  max-width: 420px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.7);
  border: 1px solid #334466;
  display: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: blur(4px);
  transition: opacity 0.2s ease;
  opacity: 0;
}

.tooltip[style*="display: block"] {
  opacity: 1;
}

/* ==========================================================================
   SVG stilovi
   ========================================================================== */
svg {
  background: radial-gradient(circle at 50% 50%, #0a001f 0%, #000000 70%);
}

/* Pozadinske zvezde */
.star {
  fill: white;
  animation: twinkle 8s infinite alternate;
}

@keyframes twinkle {
  0%   { opacity: 0.25; }
  40%  { opacity: 0.85; }
  100% { opacity: 0.35; }
}

/* Oblaci - spojeni hover efekti */
.cloud-cluster {
  cursor: pointer;
  transition: transform 0.35s ease, filter 0.35s ease;
}

.cloud-cluster:hover {
  filter: brightness(1.35) drop-shadow(0 0 24px rgba(38,154,242,0.8));
}

/* Markeri korisnika (zvezdice) */
.user-marker {
  cursor: pointer;
  transition: all 0.25s ease;
  opacity: 0;
  animation: fadeInMarker 0.6s ease-out forwards;
}

.user-marker:hover {
  transform: scale(1.45);
  filter: drop-shadow(0 0 12px rgba(255,215,0,0.7));
}

@keyframes fadeInMarker {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* Spider linije */
.line-spider {
  stroke: #88aaff;
  stroke-width: 1.8;
  opacity: 0.55;
  stroke-dasharray: 5 4;
  transition: opacity 0.4s ease;
}

.user-marker:hover .line-spider {
  opacity: 0.9;
}

/* Tekstualni labeli */
.label {
  font-family: 'Manrope ExtraCondensed', 'Segoe UI', system-ui, sans-serif;
  font-weight: 700;           /* bold za bolju čitljivost */
  font-size: 28px;            /* možeš smanjiti na 24px ako treba još uže */
  letter-spacing: -0.5px;     /* dodatno kondenzuje */
  text-anchor: middle;
  pointer-events: none;
  text-shadow: 0 0 8px #000, 0 0 14px #2244ff;
  fill: #e0f0ff;
}

/* Dodatni hover efekat za aktivne oblake */
.cloud-cluster:not([data-cluster-id="2"]):not([data-cluster-id="4"]):not([data-cluster-id="17"]):hover {
  filter: brightness(1.35) drop-shadow(0 0 24px rgba(38,154,242,0.8));
}

/* Animacija za zvezde padalice (tačke koje preleću) */
@keyframes shootingStar {
  0%   { opacity: 0; transform: translate(0, 0); }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)); }
}

/* Animacija za kišu meteora (tanke pruge) */
@keyframes meteorShower {
  0%   { opacity: 0; transform: translate(0, 0); }
  5%   { opacity: 0.9; }
  95%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)); }
}