/* Alien Planet occupies one shared 2x2 map footprint. */
@property --alien-one-energy-radius {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 48%;
}

#mapViewport #map .tile.map-alien-one-hit-tile {
  cursor: pointer;
}

#mapViewport #map .map-alien-one-tile {
  overflow: visible;
}

#mapViewport #map .map-alien-one-wrap {
  position: absolute;
  left: 100%;
  top: 100%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%);
  overflow: visible;
  pointer-events: none;
}

#mapViewport #map .map-alien-one-wrap::after {
  content: '';
  position: absolute;
  inset: -42.5%;
  z-index: 2;
  border-radius: 50%;
  background: url('/foto/planets/alien1-no-glare-energy-mask.webp?v=20260823alien1webp1') center / contain no-repeat;
  filter: brightness(1.45) saturate(1.35) drop-shadow(0 0 3px rgba(91, 255, 32, 0.68));
  opacity: 0;
  --alien-one-energy-radius: 48%;
  -webkit-mask-image: radial-gradient(circle at center, transparent 0 calc(var(--alien-one-energy-radius) - 6%), #000 calc(var(--alien-one-energy-radius) - 2%) calc(var(--alien-one-energy-radius) + 2%), transparent calc(var(--alien-one-energy-radius) + 7%));
  mask-image: radial-gradient(circle at center, transparent 0 calc(var(--alien-one-energy-radius) - 6%), #000 calc(var(--alien-one-energy-radius) - 2%) calc(var(--alien-one-energy-radius) + 2%), transparent calc(var(--alien-one-energy-radius) + 7%));
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  animation:
    alienOnePlanetSpin 80s linear infinite,
    alienOneFissureCharge 9s linear infinite;
  overflow: hidden;
  will-change: transform, opacity, filter;
  pointer-events: none;
}

#mapViewport #map .map-alien-one-wrap .map-alien-one-planet-img {
  width: 185%;
  height: 185%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
  animation: alienOnePlanetSpin 80s linear infinite;
  will-change: transform;
}

@keyframes alienOnePlanetSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes alienOneFissureCharge {
  0%, 44% {
    opacity: 0;
    --alien-one-energy-radius: 48%;
  }

  48% {
    opacity: 0.9;
    --alien-one-energy-radius: 48%;
  }

  88% {
    opacity: 0.9;
    --alien-one-energy-radius: 7%;
  }

  93%, 100% {
    opacity: 0;
    --alien-one-energy-radius: 7%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #mapViewport #map .map-alien-one-wrap .map-alien-one-planet-img {
    animation: none;
  }

  #mapViewport #map .map-alien-one-wrap::after {
    animation: none;
    opacity: 0;
  }
}