*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 28px;
  min-height: 100vh;
  background: #f2edff;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
 
#wrap {
  position: relative;
  width: 220px;
  height: 220px;
  cursor: pointer;
  filter: drop-shadow(0 6px 28px rgba(119,48,236,0.38));
  transition: filter 1s cubic-bezier(0.4,0,0.2,1);
}
 
/* owns clip-path + breathing anim — JS never mutates this element */
#blobOuter {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: path('M 112 6 C 158 2 208 36 214 80 C 220 124 198 172 162 192 C 126 212 76 216 44 194 C 12 172 -4 128 6 88 C 16 48 52 14 88 8 C 96 6 104 6 112 6 Z');
  animation: breathe 4.5s ease-in-out infinite;
}
 
/* owns background — JS only mutates this */
#blobFill {
  position: absolute;
  inset: 0;
  background: #7730ec;
}
 
@keyframes breathe {
  0%, 100% {
    clip-path: path('M 112 6 C 158 2 208 36 214 80 C 220 124 198 172 162 192 C 126 212 76 216 44 194 C 12 172 -4 128 6 88 C 16 48 52 14 88 8 C 96 6 104 6 112 6 Z');
  }
  50% {
    clip-path: path('M 108 8 C 154 4 204 40 210 84 C 216 128 200 168 168 188 C 136 208 82 218 50 198 C 18 178 -2 132 8 92 C 18 52 54 16 90 10 C 98 8 108 8 108 8 Z');
  }
}
 
/* anchored at blob centre; JS applies transform for orbit position */
.cel {
  position: absolute;
  top: 110px;
  left: 110px;
  will-change: transform;
}
 
#sun {
  width: 26px;
  height: 26px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 10px 4px rgba(255,255,255,0.35);
}
 
/* wave is LAST in DOM = renders on top of sun and moon,
   acting as a natural horizon that hides them when they orbit below */
#wave {
  position: absolute;
  bottom: -4px;
  left: -22px;
  width: 264px;
  height: 132px;
  animation: waveFloat 3.6s ease-in-out infinite;
}
 
@keyframes waveFloat {
  0%   { transform: translateX(0px); }
  28%  { transform: translateX(-11px); }
  60%  { transform: translateX(9px); }
  100% { transform: translateX(0px); }
}
 
.label-wrap {
  position: relative;
  height: 16px;
  width: 80px;
  pointer-events: none;
}
.lbl {
  position: absolute;
  inset: 0;
  text-align: center;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  font-weight: 700;
}
.label-wrap .lbl a {
  pointer-events: auto !important;
  cursor: pointer;
  position: relative;
  z-index: 5;
  text-decoration: none;
  color: inherit;
  outline: none; /* uklanja fokus okvir ako ti smeta */
}
.label-wrap {
  position: relative;
  height: 16px;
  width: 80px;
  pointer-events: none;
}
.lbl {
  position: absolute;
  inset: 0;
  text-align: center;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  font-weight: 700;
}
.copy-toast {
  position: absolute;
  bottom: 500px;
  left: 800px;
  transform: translateX(50%) scale(1.60);
  
  background: rgba(255, 255, 255, 0);
  color: #111;
  padding: 8px 8px;
  border-radius: 5px;
  font-weight: 600;
  font-family:Tahoma, sans-serif; 
  font-size: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  border: 2px solid #111;
  text-align: center;
  z-index: 99999;
  
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  
  display: block !important;
  white-space: normal !important;        
  word-break: break-word !important;     
  overflow-wrap: break-word !important;  
  
  width: 85px !important;               
  box-sizing: border-box !important;     
}

/* Prikazano stanje na desktopu */
.copy-toast.show {
  opacity: 1;
  visibility: visible;
  bottom: 40px; 
  transform: translateX(-50%) scale(1); 
}

/* POSEBNA PRAVILA ZA MOBILNE TELEFONE */
@media (max-width: 768px) {
  .copy-toast.show {
    bottom: 120px !important; /* Podiže toast visoko iznad donje navigacije telefona */
    transform: translateX(-50%) scale(1) !important;
  }
}

/* Stanje kada se aktivira na klik */
.copy-toast.show {
  opacity: 1;
  visibility: visible;
  bottom: 140px; /* Doleti na 40px od dna ekrana */
  transform: translateX(-50%) scale(1); /* Vrati se u prirodnu veličinu */
}
/* STILOVNA KOREKCIJA ISKLJUČIVO ZA MOBILNE TELEFONE */
@media (max-width: 768px) {
  
  /* Početno (sakriveno) stanje na mobilnom */
  .copy-toast {
  position: fixed !important;
  bottom: 500px;
  left: 50% !important;
  transform: translateX(50%) scale(1.60);
    
  background: rgba(255, 255, 255, 0);
  color: #111;
  padding: 8px 8px;
  border-radius: 5px;
  font-weight: 600;
  font-family:Tahoma, sans-serif; 
  font-size: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  border: 2px solid #111;
  text-align: center;
	
    /* Rešenje za prelom teksta na telefonu */
    display: block !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    
    /* Širina prilagođena uskim ekranima */
    width: 85vw !important; /* Zauzima 85% širine ekrana telefona */
    max-width: 84px !important; /* Ne dozvoljava mu da postane preveliki */
    box-sizing: border-box !important;
    
    /* Bezbednost klikova */
    z-index: 99999 !important;
  }

  /* Stanje kada se toast aktivira na mobilnom */
  .copy-toast.show {
    opacity: 1 !important;
    visibility: visible !important;
    bottom: 140px !important; /* Podignut visoko da ga ne pokrije donja navigacija telefona */
    transform: translateX(-50%) scale(1) !important; /* Vraća se u punu veličinu */
  }
  
}