/* Karwa Chauth Container */
#karwa-container {
  position: relative;
  width: 100%;           /* fluid width like Diwali container */
  max-width: 1080px;     /* optional max width */
  margin: 20px auto;     /* center horizontally with top margin */
  height: 50vh;          /* responsive height for desktop */
  min-height: 300px;     /* minimum height */
  background: #000;      /* dark background similar to fireworks */
  overflow: hidden;      /* hide particles outside container */
  border-radius: 20px;   /* round corners */
  font-family: "Poppins", sans-serif;
}

/* Mobile adjustments like Diwali container */
@media (max-width: 768px) {
  #karwa-container {
    height: 35vh;        /* reduce height on mobile */
    min-height: 200px;   /* smaller minimum height */
  }
}

/* Canvas for stars, clouds, moon glow */
#stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  display: block;
  z-index: 1;
}

/* Moon image on top of canvas */
.moon {
  position: absolute;
  top: 8%;               /* visible top spacing */
  right: 10%;
  width: 100px;
  height: auto;
  z-index: 50;           /* above canvas */
  border-radius: 50%;
  filter: drop-shadow(0 0 20px rgba(255,255,255,0.8))
          drop-shadow(0 0 40px rgba(255,255,200,0.5));
  animation: moonGlow 6s ease-in-out infinite alternate;
  transform: translateY(0); /* prevent clipping during scale */
}

@keyframes moonGlow {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.05); opacity: 1; }
}

/* Mobile moon adjustments */
@media (max-width: 768px) {
  .moon {
    width: 80px;           /* smaller moon for mobile */
    top: 12%;              /* visible on small screen */
    right: 5%;
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.6));
    animation: none;       /* stop scale animation to prevent clipping */
  }
}

/* Birds */
#birds .bird {
  position: absolute;
  bottom: 15%;
  left: -10%;
  width: 30px;
  height: 18px;
  background: url('https://cdn.jsdelivr.net/gh/edent/SuperTinyIcons/images/svg/bird.svg') no-repeat center/contain;
  opacity: 0.9;
  animation: flyToMoon 12s linear infinite;
}

#birds .bird:nth-child(2) { bottom: 25%; animation-delay: 4s; transform: scale(0.9); }
#birds .bird:nth-child(3) { bottom: 35%; animation-delay: 8s; transform: scale(0.8); }

@keyframes flyToMoon {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(120vw,-50vh) scale(0.5); opacity: 0; }
}

/* Karwa Chauth Text */
.karwa-text {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  font-weight: bold;
  color: #FFD700;
  text-shadow: 0 0 8px gold, 0 0 20px orange;
  animation: textGlow 2s ease-in-out infinite alternate;
  z-index: 30;

  white-space: nowrap;  /* keep text in a single line */
  text-align: center;   /* optional, center align if long */
}

/* Diyas */
.diya {
  position: absolute;
  bottom: 5%;
  left: 50%;
  width: 16px;
  height: 24px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255,200,0,1) 0%, rgba(255,100,0,0.3) 100%);
  border-radius: 50% 50% 40% 40%;
  animation: flicker 0.3s infinite alternate;
  box-shadow: 0 0 20px rgba(255, 180, 0, 0.8);
}

@keyframes flicker {
  from { transform: translateX(-50%) scale(1); opacity: 0.8; }
  to { transform: translateX(-50%) scale(1.2); opacity: 1; }
}

/* Credits */
.karwa-credits {
  position: absolute;
  right: 4%;
  bottom: 3%;
  color: #aaa;
  font-size: 12px;
  opacity: 0.8;
  z-index: 30;
}

/* Ensure canvas fills container */
#karwa-container canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 20px;
}