/* Original illustrated assets, shared by the battlefield and campaign journey. */
#arena {
  box-shadow:
    inset 0 0 0 2px #f9e0a653,
    0 6px 16px #061e3180;
}
#enemy-intel {
  display: flex;
  align-items: center;
  gap: 7px;
  top: 24%;
  left: 50%;
  padding: 5px 10px 5px 5px;
  max-width: 205px;
  white-space: normal;
  text-align: left;
  border: 1px solid #ffcf8799;
  border-radius: 12px;
  background: linear-gradient(115deg, #341e23f2, #7a342ce8);
  box-shadow:
    0 4px 0 #2a192455,
    0 8px 18px #182d2833;
}
#enemy-intel[hidden] {
  display: none;
}
#enemy-intel > svg {
  width: 36px;
  height: 43px;
  flex: 0 0 36px;
  border-radius: 7px;
}
#enemy-intel span {
  display: grid;
  gap: 1px;
}
#enemy-intel small {
  color: #f4b599;
  font:
    800 8px/1.2 Nunito,
    sans-serif;
  letter-spacing: 0.5px;
}
#enemy-intel b {
  color: #fff4da;
  font:
    16px/1 'Lilita One',
    sans-serif;
}
#enemy-intel em {
  color: #ffe3b8;
  font:
    800 11px/1.2 Nunito,
    sans-serif;
  font-style: normal;
}
#battle-toast {
  top: auto;
  bottom: 12px;
  left: 12px;
  transform: none;
  max-width: 42%;
  padding: 7px 10px;
  font-size: 12px;
  background: #173b45ed;
  border-color: #e8cc82;
}
/* The building itself is the map landmark, rather than a tiny badge in a card. */
#campaign-grid .academy-route-stop {
  width: 310px;
  max-width: 310px;
}
#campaign-grid .academy-route-stop .world-stop-top {
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin-top: -38px;
  margin-bottom: -5px;
}
#campaign-grid .academy-route-stop .academy-medallion {
  width: 250px;
  height: 224px;
  min-height: 224px;
  flex-basis: auto;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  position: relative;
}
#campaign-grid .academy-medallion img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 11px 6px #173f365e);
}
#campaign-grid .academy-route-stop.locked .academy-medallion img {
  filter: saturate(0.55) drop-shadow(0 11px 6px #173f365e);
}
#campaign-grid .academy-route-stop .route-status {
  background: linear-gradient(#215e59, #143c3b);
  border: 1px solid #d6ba6b;
  padding: 7px 15px;
  border-radius: 6px;
  margin-top: -4px;
  box-shadow: 0 3px #17372b66;
}
#campaign-grid .academy-route-notes {
  border-color: #d4b767;
  background: linear-gradient(130deg, #fff5cc, #dbe9cd);
  padding-top: 20px;
}
#campaign-grid .academy-route-notes .eyebrow {
  color: #48766a;
}
#campaign-grid .academy-route-stop.recommended .academy-medallion::before {
  content: '';
  position: absolute;
  inset: 30% -8% -8%;
  z-index: -1;
  background: radial-gradient(ellipse, #ffec948c, transparent 68%);
}
.campaign-celebration .journey-academy .journey-medallion {
  background: none;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.campaign-celebration .journey-academy .journey-medallion > img {
  width: 108px;
  height: 108px;
  max-width: none;
  object-fit: contain;
  transform: translateY(-20px);
  filter: drop-shadow(0 5px 3px #36544460);
}
.campaign-celebration .journey-academy.ready-next .journey-medallion > img {
  width: 128px;
  height: 128px;
  transform: translateY(-27px);
}
.next-academy-preview > img {
  width: 132px;
  height: 120px;
  object-fit: contain;
  border-radius: 0;
  filter: drop-shadow(0 5px 4px #173d3933);
}
#academy-view .academy-banner {
  min-height: 142px;
  height: 142px;
  padding: 14px 20px;
  overflow: hidden;
  background: radial-gradient(ellipse at 12% 80%, #548373, #183e4e 65%);
}
#academy-view .academy-camp-art {
  background: radial-gradient(ellipse at 18% 70%, #e8cf6835, transparent 65%);
}
#academy-view .academy-building {
  width: 156px;
  height: 145px;
  object-fit: contain;
  position: relative;
  flex: 0 0 156px;
  align-self: flex-end;
  margin: 0 4px -13px -10px;
  filter: drop-shadow(0 8px 4px #142f4266);
}
#academy-view .academy-banner-copy {
  align-self: center;
}
#academy-view .academy-banner h2 {
  font-size: clamp(24px, 3vw, 36px);
}
#academy-view .academy-banner .eyebrow {
  font-size: 10px;
  letter-spacing: 0.7px;
}
#academy-view .academy-banner p {
  font-size: 14px;
}
#academy-view .academy-rank {
  display: none;
}
@media (max-width: 600px) {
  #academy-view .academy-banner {
    min-height: 126px;
    height: 126px;
    padding: 10px;
    gap: 8px;
  }
  #academy-view .academy-building {
    width: 110px;
    height: 122px;
    flex-basis: 110px;
    margin: 0 -2px -10px -8px;
  }
  #academy-view .academy-banner h2 {
    font-size: 25px;
  }
  #academy-view .academy-banner p {
    display: block;
    font-size: 12px;
    line-height: 1.25;
  }
  #academy-view .academy-banner .eyebrow {
    font-size: 8px;
  }
}
@media (max-height: 700px) and (max-width: 600px) {
  #academy-view .academy-banner {
    min-height: 90px;
    height: 90px;
  }
  #academy-view .academy-building {
    width: 85px;
    height: 91px;
    flex-basis: 85px;
  }
  #academy-view .academy-banner h2 {
    font-size: 22px;
  }
  #academy-view .academy-banner p {
    display: none;
  }
}
@media (max-height: 500px) and (min-width: 600px) {
  #academy-view .academy-banner {
    min-height: 64px;
    height: 64px;
    padding: 4px 12px;
  }
  #academy-view .academy-building {
    width: 80px;
    height: 78px;
    flex-basis: 80px;
    margin-bottom: -8px;
  }
  #academy-view .academy-banner h2 {
    font-size: 24px;
    margin: 0;
  }
  #academy-view .academy-banner p {
    display: none;
  }
  #enemy-intel {
    top: 15%;
    left: 50%;
  }
}

#campaign-grid .academy-route-notes .world-school-troops {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
#campaign-grid .academy-route-notes .world-school-troops svg {
  width: 32px;
  height: 38px;
  border-width: 2px;
}