/* Battle briefings use the same geometry on the campaign and post-victory map. */
#campaign-grid .battle-plan {
  position: relative;
  padding: 17px 14px 14px;
  border: 2px solid #d6b976;
  border-radius: 10px 24px 22px 22px;
  background:
    radial-gradient(ellipse at 10% 0, #326979, transparent 65%),
    linear-gradient(150deg, #173e53, #102c43);
  box-shadow:
    inset 0 2px #fff1b855,
    0 5px #725b36,
    0 12px 24px #06192b77;
  color: #e5f2ef;
}
#campaign-grid .recommended .battle-plan {
  box-shadow:
    inset 0 2px #fff1b888,
    0 0 0 2px #ffe1a1,
    0 6px #99763b,
    0 12px 26px #06192b88;
}
.battle-plan-kicker {
  display: block;
  color: #b6d8df;
  font:
    900 10px/1.2 Nunito,
    sans-serif;
  letter-spacing: 1.2px;
  margin-bottom: 4px;
}
#campaign-grid .battle-plan .route-about {
  color: #fff0ba;
  font-size: 27px;
  text-shadow: 0 2px #776034;
  margin-bottom: 8px;
}
#campaign-grid .battle-plan .world-summary {
  color: #d5e7e7;
  font:
    700 13px/1.4 Nunito,
    sans-serif;
  margin: 10px 0;
}
#campaign-grid .battle-plan .world-enemy-upgrade {
  position: relative;
  isolation: isolate;
  gap: 10px;
  margin: 8px -14px 0;
  padding: 13px 12px;
  border: 0;
  border-block: 1px solid #e3a46e66;
  border-radius: 0;
  background:
    radial-gradient(ellipse at 12% 50%, #b75b44aa, transparent 70%),
    linear-gradient(110deg, #603b36, #442f36);
  box-shadow: inset 0 1px #ffce9e22;
}
#campaign-grid .world-enemy-portrait {
  flex-basis: 66px;
  perspective: 450px;
}
#campaign-grid .world-enemy-portrait > svg {
  width: 66px;
  height: 88px;
  border: 2px solid #f0bb6a;
  border-radius: 13px;
  box-shadow:
    0 4px #51242d,
    0 0 18px #ffb27044;
}
#campaign-grid .world-enemy-portrait > img {
  width: 28px;
  height: 28px;
}
#campaign-grid .world-enemy-copy > small {
  color: #ffd1a5;
  font-size: 9px;
  letter-spacing: 0.4px;
}
#campaign-grid .world-enemy-copy > strong {
  color: #fff4d3;
  font-size: 22px;
  margin: 4px 0 9px;
  text-shadow: 0 2px #391f29;
}
.enemy-rank-arrow {
  align-self: center;
  font:
    26px 'Lilita One',
    sans-serif;
  font-style: normal;
  color: #f8cf7c;
}
#campaign-grid .enemy-ranks {
  gap: 5px;
  align-items: center;
}
#campaign-grid .enemy-ranks > span {
  padding: 5px 7px;
  border-radius: 8px;
  background: #281f2d55;
  color: #d4beb0;
}
#campaign-grid .enemy-ranks b {
  font-size: 17px;
  white-space: nowrap;
}
#campaign-grid .enemy-ranks small {
  font-size: 8px;
  letter-spacing: 0.5px;
}
#campaign-grid .enemy-ranks .enemy-rank-new {
  position: relative;
  overflow: hidden;
  color: #602e20;
  background: linear-gradient(#fff2b6, #f2bd5c);
  border: 1px solid #ffe5a0;
  box-shadow:
    0 3px #a45b34,
    0 0 16px #ffae3f44;
}
#campaign-grid .battle-plan .world-bounty {
  gap: 10px;
  margin: 0;
  padding: 10px 0;
  border-block: 1px solid #91c9c333;
  color: #b4f8ff;
}
#campaign-grid .battle-plan .world-bounty strong {
  color: #b4f8ff;
  font-size: 25px;
  text-shadow: 0 2px #0f627a;
}
#campaign-grid .battle-plan .world-bounty small {
  color: #83dce5;
  font-size: 10px;
  letter-spacing: 0.7px;
}
#campaign-grid .battle-plan .world-bounty span span {
  color: #c2dddd;
  font-size: 11px;
}
#campaign-grid .battle-plan .world-bounty.is-collected {
  opacity: 0.8;
}
#campaign-grid .battle-plan .world-unlock {
  border: 0;
  padding: 12px 0 6px;
  margin: 0;
  color: #edf4e5;
  text-shadow: none;
}
#campaign-grid .battle-plan .world-unlock small {
  color: #e9c987;
  font-size: 9px;
  letter-spacing: 0.5px;
}
#campaign-grid .battle-plan .world-unlock strong {
  color: #fff0ba;
  font-size: 21px;
}
#campaign-grid .battle-plan .world-unlock span span {
  color: #bcd9dd;
  font-size: 12px;
}
#campaign-grid .battle-plan .world-unlock > svg {
  width: 54px;
  height: 70px;
  border: 2px solid #c4a4fb;
  border-radius: 10px;
  background: #0c263e;
  box-shadow: 0 3px #574773;
}
#campaign-grid .battle-plan .world-play {
  width: 100%;
  margin-top: 12px;
  min-height: 48px;
  font-size: 23px;
}

/* Reserve the final layout while the enemy delivers its story. Never shift map nodes. */
.battle-plan[data-story='waiting'] .world-enemy-upgrade,
.battle-plan[data-story='waiting'] .level-story-details {
  opacity: 0;
}
.battle-plan[data-story='playing'] .world-enemy-upgrade {
  animation: enemy-report-enter 0.6s both;
}
.battle-plan[data-story='playing'] .world-enemy-portrait {
  animation: enemy-card-arrive 0.85s 0.15s both;
}
.battle-plan[data-story='playing'] .enemy-ranks > span:first-child {
  animation: report-detail-enter 0.4s 0.55s both;
}
.battle-plan[data-story='playing'] .enemy-rank-arrow {
  animation: report-detail-enter 0.3s 0.9s both;
}
.battle-plan[data-story='playing'] .enemy-rank-new {
  animation: enemy-rank-up 0.75s 1.1s both;
}
.battle-plan[data-story='playing'] .enemy-rank-new::after {
  content: '';
  position: absolute;
  inset: -40% -100%;
  background: linear-gradient(110deg, transparent 40%, #fffbeebb 50%, transparent 60%);
  animation: enemy-rank-shine 0.7s 1.6s both;
}
.battle-plan[data-story='playing'] .level-story-details {
  animation: report-detail-enter 0.4s 2.15s both;
}
.battle-plan[data-story='playing'] .world-bounty {
  animation: report-detail-enter 0.45s 2.35s both;
}
.battle-plan[data-story='playing'] .world-unlock {
  animation: report-detail-enter 0.45s 2.6s both;
}
.battle-plan[data-story='playing'] .world-play {
  animation: report-detail-enter 0.4s 2.9s both;
}
@keyframes enemy-report-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes enemy-card-arrive {
  0% {
    opacity: 0;
    transform: perspective(450px) rotateY(-65deg) rotate(-9deg) scale(0.65);
  }
  70% {
    opacity: 1;
    transform: perspective(450px) rotateY(8deg) rotate(2deg) scale(1.06);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes enemy-rank-up {
  0% {
    opacity: 0;
    transform: scale(0.35) rotate(-10deg);
  }
  65% {
    opacity: 1;
    transform: scale(1.16) rotate(3deg);
  }
  82% {
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes report-detail-enter {
  from {
    opacity: 0;
    transform: translateY(9px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes enemy-rank-shine {
  from {
    transform: translateX(-60%);
  }
  to {
    transform: translateX(60%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .battle-plan[data-story] *,
  .battle-plan[data-story] *::after {
    animation: none !important;
    opacity: 1 !important;
  }
}