/* Red means unlocked, not affordable. Dot placement stays inside clipping shelves. */
.game-nav [data-view='troops'],
#troop-tabs button,
#troop-grid .training-action {
  position: relative;
}
[data-opportunity]:not([data-opportunity=''])::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 12px;
  height: 12px;
  border: 2px solid #fff0ca;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 25%, #ffb4a3, #f3454e 40%, #bc1835 90%);
  box-shadow: 0 2px 3px #55132b88;
  pointer-events: none;
  z-index: 2;
}
.game-nav [data-opportunity]:not([data-opportunity=''])::after {
  width: 15px;
  height: 15px;
  top: 9px;
  right: 12px;
}
#troops-view #troop-tabs button[data-opportunity]:not([data-opportunity='']) {
  padding-right: 26px;
}
#troop-tabs [data-opportunity]::after {
  width: 10px;
  height: 10px;
  top: 6px;
  right: 6px;
}
#troop-grid .training-action[data-opportunity]:not([data-opportunity='']) {
  padding-right: 25px;
}
@media (prefers-reduced-motion: no-preference) {
  #troop-grid .training-action[data-opportunity]:not([data-opportunity=''])::after {
    animation: troop-opportunity-pulse 1.8s ease-out infinite;
  }
  @keyframes troop-opportunity-pulse {
    0%,
    100% {
      box-shadow:
        0 0 0 0 #f44b5966,
        0 2px 3px #55132b88;
      transform: scale(1);
    }
    45% {
      box-shadow:
        0 0 0 5px #f44b5900,
        0 2px 3px #55132b88;
      transform: scale(1.08);
    }
  }
}
.opportunity-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A slow marquee halo draws attention without a rapid flash. */
.game-nav [data-view='troops'][data-opportunity='available']::before,
.opportunity-beacon::before {
  content: '';
  position: absolute;
  top: 0;
  right: 3px;
  width: 37px;
  height: 37px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  background: repeating-conic-gradient(#ff5667 0deg 45deg, #fff5df 45deg 90deg);
  -webkit-mask-image: radial-gradient(circle, transparent 38%, #000 42%, #000 56%, transparent 70%);
  mask-image: radial-gradient(circle, transparent 38%, #000 42%, #000 56%, transparent 70%);
  opacity: 0.5;
}
@media (prefers-reduced-motion: no-preference) {
  .game-nav [data-view='troops'][data-opportunity='available']::before,
  .opportunity-beacon::before {
    animation: troop-marquee-halo 5s ease-in-out infinite;
  }
  .game-nav [data-view='troops'][data-opportunity='available']::after,
  .opportunity-beacon {
    animation: troop-nav-beacon 5s ease-in-out infinite;
  }
}
@keyframes troop-marquee-halo {
  0%,
  55%,
  100% {
    opacity: 0;
    transform: scale(0.6) rotate(0deg);
  }
  65% {
    opacity: 0.95;
    transform: scale(1) rotate(45deg);
  }
  82% {
    opacity: 0.7;
    transform: scale(1.25) rotate(135deg);
  }
  96% {
    opacity: 0;
    transform: scale(1.5) rotate(180deg);
  }
}
@keyframes troop-nav-beacon {
  0%,
  55%,
  100% {
    transform: scale(1);
    box-shadow: 0 2px 3px #55132b88;
  }
  68% {
    transform: scale(1.15);
    box-shadow:
      0 0 10px 3px #ff697ab3,
      0 0 20px #fff6e580;
  }
  84% {
    transform: scale(1.05);
    box-shadow:
      0 0 9px 2px #fff6e5a0,
      0 0 18px #ff526880;
  }
}

/* Reuse the navigation beacon on upgrade arrows and map offer dots. */
.opportunity-beacon::before {
  inset: -70%;
  width: auto;
  height: auto;
}
@media (prefers-reduced-motion: no-preference) {
  .horizontal-dot.opportunity-beacon {
    animation: troop-nav-beacon 5s ease-in-out infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .opportunity-beacon,
  .opportunity-beacon::before {
    animation: none !important;
  }
}