/* === METEOR SHOWER EFFECTS === */

/* --- Warning Banner --- */
.meteor-warning {
  position: fixed;
  top: 8vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  font-family: 'Courier New', monospace;
  font-size: 16px;
  font-weight: bold;
  color: #ffb833;
  text-shadow: 0 0 8px rgba(255, 160, 50, 0.6), 0 0 20px rgba(255, 120, 30, 0.3);
  letter-spacing: 2px;
  pointer-events: none;
  opacity: 0;
  animation: meteorWarnFade 2s ease forwards;
  white-space: nowrap;
}

@keyframes meteorWarnFade {
  0%   { opacity: 0; transform: translateX(-50%) translateY(6px); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  75%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-4px); }
}

/* --- Falling Meteor --- */
.meteor {
  position: absolute;
  z-index: 22;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe8a0 0%, #ffaa33 40%, rgba(255, 120, 30, 0.6) 70%, transparent 100%);
  box-shadow: 0 0 6px 2px rgba(255, 160, 60, 0.7), 0 0 14px 4px rgba(255, 100, 20, 0.4);
  animation: meteorFall var(--fall-duration, 1s) linear forwards;
}

/* Trail pseudo-element */
.meteor::after {
  content: '';
  position: absolute;
  bottom: 60%;
  left: 50%;
  transform: translateX(-50%) rotate(var(--trail-angle, -8deg));
  width: 3px;
  height: 60px;
  background: linear-gradient(to top, transparent 0%, rgba(255, 180, 80, 0.5) 30%, rgba(255, 220, 140, 0.8) 100%);
  border-radius: 2px;
  filter: blur(1px);
}

@keyframes meteorFall {
  0% {
    opacity: 1;
    transform: translate(var(--start-offset-x, 0px), 0);
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
    transform: translate(var(--end-offset-x, 20px), var(--fall-distance, 90vh));
  }
}

/* --- Impact Flash --- */
.meteor-impact {
  position: absolute;
  z-index: 21;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 220, 140, 0.9) 0%, rgba(255, 140, 40, 0.5) 40%, transparent 70%);
  animation: impactFlash 0.35s ease-out forwards;
}

@keyframes impactFlash {
  0% {
    width: 10px;
    height: 10px;
    margin-left: -5px;
    margin-top: -5px;
    opacity: 1;
  }
  100% {
    width: 60px;
    height: 60px;
    margin-left: -30px;
    margin-top: -30px;
    opacity: 0;
  }
}