/* A movable campaign world. Only the map pans; the game shell stays within the viewport. */
.topbar,
.battle-mode .topbar {
  height: 48px;
  flex-basis: 48px;
  gap: 8px;
  padding-inline: max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-right));
}
.topbar .brand,
.battle-mode .topbar .brand {
  flex: 0 1 150px;
  min-width: 72px;
}
.topbar .wallet {
  margin-left: auto;
  gap: 10px;
  flex: 0 0 auto;
}
.topbar .nav-utilities {
  display: flex;
  gap: 2px;
  flex: 0 0 auto;
}
.topbar .nav-tool,
.topbar .feedback-fab {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 44px;
  min-height: 44px;
  min-width: 44px;
  padding: 2px;
  gap: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  filter: none;
  color: #fff1ce;
}
.topbar .nav-tool img,
.topbar .nav-tool svg {
  width: 24px;
  height: 24px;
}
.topbar .nav-tool span {
  font:
    800 10px/1.2 'Nunito',
    sans-serif;
}
.game-nav {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  height: calc(82px + env(safe-area-inset-bottom));
  min-height: calc(82px + env(safe-area-inset-bottom));
  flex-basis: calc(82px + env(safe-area-inset-bottom));
  gap: 12px;
  padding: 6px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
}
.game-nav .nav,
.game-nav .nav.active {
  flex-direction: row;
  height: 56px;
  min-height: 44px;
  padding: 6px 8px;
  gap: 6px;
}
.game-nav .nav-battle,
.game-nav .nav-battle.active {
  height: 64px;
  min-height: 44px;
}
.game-nav .nav > span {
  font-size: clamp(18px, 3.5vw, 26px);
  white-space: nowrap;
  min-width: 0;
}
.game-nav .nav-battle > span {
  font-size: clamp(26px, 4.8vw, 34px);
}
.game-nav .nav > img {
  width: 32px;
  height: 32px;
}
.game-nav .nav-battle > img {
  width: 38px;
  height: 38px;
}
#campaign-view {
  padding: 4px 4px 0;
  gap: 3px;
}
.route-viewport {
  border-radius: 17px;
  box-shadow: inset 0 0 0 2px #a9bd8f;
}
#campaign-grid {
  height: 100%;
  max-width: none;
  overflow: auto;
  touch-action: pan-x pan-y pinch-zoom;
  overscroll-behavior: contain;
  cursor: grab;
  background: #9ebd8b;
  scrollbar-width: none;
}
#campaign-grid::-webkit-scrollbar {
  display: none;
}
#campaign-grid.is-dragging,
#campaign-grid.is-dragging * {
  cursor: grabbing;
}
#campaign-grid .route-world {
  min-width: 0;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}
.world-terrain {
  position: absolute;
  inset: 0;
  background: url('art/campaign-world-v1.webp') center/100% 100%;
  pointer-events: none;
}
.world-terrain::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #f5e9a722, transparent 40%, #16383522);
}
.world-region {
  position: absolute;
  font:
    38px 'Lilita One',
    sans-serif;
  color: #fff4c9;
  text-shadow:
    0 3px 0 #264534,
    0 0 14px #23412d;
  letter-spacing: 2px;
  pointer-events: none;
}
.world-road {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.world-road-edge {
  stroke: #506f48;
  stroke-width: 38;
  filter: drop-shadow(0 8px 3px #14382066);
}
.world-road-stone {
  stroke: #ecdbab;
  stroke-width: 29;
}
.world-road-dashes {
  stroke: #b69d63;
  stroke-width: 3;
  stroke-dasharray: 2 12;
}
#campaign-grid .route-stops {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
#campaign-grid .route-stop {
  position: absolute;
  left: var(--stop-x);
  top: var(--stop-y);
  width: 278px;
  max-width: 278px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  transform: translateX(-50%);
  opacity: 1;
  filter: none;
}
.world-stop-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-inline: 8px;
  margin-bottom: -2px;
  position: relative;
  z-index: 1;
}
#campaign-grid .route-medallion {
  width: 72px;
  height: 70px;
  min-height: 70px;
  flex: 0 0 72px;
  border-radius: 24px;
  background: linear-gradient(#fff2af, #efbc4b 60%, #c59032);
  border: 3px solid #fff2bb;
  box-shadow:
    0 6px #876234,
    0 9px 12px #223c3466;
}
#campaign-grid .locked .route-medallion {
  background: linear-gradient(#cfdfd4, #88a8a2);
  border-color: #e2ebe0;
  box-shadow:
    0 6px #4e7471,
    0 9px 12px #223c3466;
  opacity: 1;
}
#campaign-grid .secured .route-medallion {
  background: linear-gradient(#c8ef9c, #75b967);
}
#campaign-grid .route-level {
  font-size: 34px;
}
#campaign-grid .route-status {
  display: block;
  color: #fff7d5;
  font:
    14px/1.1 'Lilita One',
    sans-serif;
  letter-spacing: 0.3px;
  margin: 0 0 3px;
  text-shadow:
    0 2px 2px #193e37,
    0 0 6px #143323;
}
#campaign-grid .mastery-stars {
  font-size: 25px;
  line-height: 1.1;
  filter: drop-shadow(0 2px 1px #375443);
}
.world-level-notes {
  text-align: left;
  padding: 13px 13px 12px;
  background: linear-gradient(135deg, #fff7dcf5, #f4e8c7ed);
  border-radius: 8px 20px 18px 18px;
  box-shadow:
    0 4px 0 #b9a578,
    0 9px 20px #152f3740;
}
#campaign-grid .route-about {
  display: block;
  width: 100%;
  min-height: 44px;
  text-align: left;
  padding: 3px 0;
  margin: 0;
  background: none;
  border: 0;
  box-shadow: none;
  font:
    24px/1.05 'Lilita One',
    sans-serif;
  color: #234b50;
}
.world-summary {
  margin: 3px 0 7px;
  font-size: 14px;
  line-height: 1.35;
  color: #365457;
}
.world-rival {
  font-size: 13px;
  font-weight: 800;
  color: #94512f;
  margin: 5px 0 8px;
}
.world-unlock,
.world-train {
  display: flex;
  align-items: center;
  text-align: left;
  gap: 9px;
  padding: 7px 0 0;
  margin-top: 6px;
  border: 0;
  border-top: 1px solid #c8b986;
  border-radius: 0;
  background: none;
  box-shadow: none;
  width: 100%;
  min-height: 62px;
  color: #244b50;
}
.world-unlock > svg,
.world-train > svg {
  width: 48px;
  height: 52px;
  flex: 0 0 48px;
  border: 2px solid #d0a142;
  border-radius: 9px;
  background: #193c4e;
  box-shadow: 0 2px #ab883b;
}
.world-unlock > span,
.world-train > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.world-unlock small,
.world-train small {
  font-size: 11px;
  font-weight: 900;
  color: #85622e;
}
.world-unlock strong,
.world-train strong {
  font:
    18px/1.1 'Lilita One',
    sans-serif;
}
.world-unlock span span,
.world-train span span {
  font:
    700 13px/1.2 'Nunito',
    sans-serif;
}
.world-training-milestone {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid #c8b986;
  color: #3c5c3e;
}
.world-training-milestone img {
  width: 36px;
  height: 36px;
}
.world-training-milestone span {
  display: grid;
  gap: 2px;
  font-size: 13px;
  line-height: 1.25;
}
.world-training-milestone strong {
  font:
    17px 'Lilita One',
    sans-serif;
}
#campaign-grid .recommended .world-level-notes {
  text-align: left;
  box-shadow:
    0 0 0 3px #f8ce66,
    0 5px 0 #b28b46,
    0 10px 24px #213c3766;
}
.map-return {
  position: absolute;
  z-index: 4;
  right: 9px;
  top: 9px;
  min-height: 44px;
  padding: 6px 12px;
  font:
    16px 'Lilita One',
    sans-serif;
  color: #254e55;
  background: linear-gradient(#fff8dc, #efd593);
  border: 2px solid #fff4c7;
  border-radius: 14px;
  box-shadow: 0 3px #927943;
}
.route-pan {
  top: auto;
  bottom: 12px;
  transform: none;
  min-height: 44px;
  height: 44px;
  width: 44px;
  border-radius: 12px;
}
.route-pan-back {
  left: 9px;
}
.route-pan-forward {
  right: 9px;
}
.lobby-actions {
  padding: 4px 2px;
}
.lobby-actions #start {
  min-height: 48px;
  font-size: 23px;
}
@media (max-width: 380px) {
  .topbar,
  .battle-mode .topbar {
    gap: 4px;
    padding-inline: 6px;
  }
  .topbar .brand,
  .battle-mode .topbar .brand {
    min-width: 58px;
    flex-basis: 100px;
  }
  .topbar .wallet {
    gap: 6px;
  }
  .topbar .gem-balance svg {
    width: 22px;
  }
  .topbar .nav-tool,
  .topbar .feedback-fab {
    width: 44px;
  }
  .game-nav {
    gap: 9px;
    padding-inline: 9px;
  }
  .game-nav .nav > img {
    width: 28px;
    height: 28px;
  }
  .game-nav .nav > span {
    font-size: 18px;
  }
  .game-nav .nav-battle > span {
    font-size: 26px;
  }
}
@media (max-height: 450px) and (orientation: landscape) {
  .game-nav {
    height: calc(60px + env(safe-area-inset-bottom));
    min-height: calc(60px + env(safe-area-inset-bottom));
    flex-basis: calc(60px + env(safe-area-inset-bottom));
    padding: 3px 16px calc(7px + env(safe-area-inset-bottom));
  }
  .game-nav .nav,
  .game-nav .nav.active {
    height: 44px;
  }
  .game-nav .nav-battle,
  .game-nav .nav-battle.active {
    height: 48px;
  }
  .game-nav .nav > img,
  .game-nav .nav-battle > img {
    width: 30px;
    height: 30px;
  }
  .game-nav .nav > span {
    font-size: 22px;
  }
  .game-nav .nav-battle > span {
    font-size: 26px;
  }
  .lobby-actions {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 230px;
    z-index: 4;
    padding: 0;
  }
  .lobby-actions #start {
    min-height: 44px;
    font-size: 20px;
  }
  #campaign-view {
    position: relative;
  }
}
@media (prefers-reduced-motion: reduce) {
  #campaign-grid {
    scroll-behavior: auto;
  }
}
@media (max-width: 380px) {
  .game-nav .nav {
    padding-inline: 3px;
    gap: 4px;
  }
  .game-nav .nav > img {
    width: 24px;
    height: 24px;
  }
}

/* Campaign masthead: painted scenery, a heraldic badge and real saved progress. */
#campaign-view .campaign-banner {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 116px;
  margin-bottom: 5px;
  padding: 12px 22px;
  overflow: hidden;
  border-radius: 19px 19px 11px 11px;
  background: #214b52;
  border: 1px solid #c2af66;
  border-bottom: 4px solid #bd9850;
  box-shadow:
    inset 0 1px #ffedb866,
    0 3px 0 #244a4826;
}
#campaign-view .campaign-banner::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, #153e49 3%, #214f57dd 45%, #1b4b4744 85%),
    url('art/frontier-command.webp') right 42% / 540px auto no-repeat;
}
.campaign-banner-copy {
  width: min(76%, 460px);
}
#campaign-view .campaign-banner .eyebrow {
  display: block;
  color: #ebce85;
  font-size: 11px;
  letter-spacing: 2.2px;
  line-height: 1.2;
}
#campaign-view .campaign-banner h2 {
  margin: 1px 0 5px;
  color: #fff5cd;
  font-size: 32px;
  line-height: 1.1;
  text-shadow: 0 3px #173c47;
}
.campaign-tallies {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #f4e8c2;
  font-size: 13px;
  font-weight: 800;
}
#campaign-view .campaign-banner #mastery-total {
  display: block;
  color: #ffdb70;
  font-size: 14px;
  margin: 0;
  line-height: 1.3;
  white-space: nowrap;
}
#campaign-progress {
  font-size: 14px;
  color: #fff5d8;
}
.campaign-meter {
  height: 8px;
  margin-top: 7px;
  border-radius: 8px;
  background: #0e303c;
  box-shadow:
    inset 0 1px 3px #0006,
    0 1px #c7e1bd33;
  border: 1px solid #638074;
  overflow: hidden;
}
.campaign-meter > span {
  display: block;
  width: var(--campaign-complete, 0%);
  height: 100%;
  background: linear-gradient(#fff0a6, #e6b649);
  box-shadow: 0 0 8px #ffe292;
  border-radius: inherit;
  transition: width 0.3s ease;
}
.campaign-banner-emblem {
  width: 78px;
  height: 78px;
  margin: 0 16px 0 auto;
  filter: drop-shadow(0 5px 2px #16323b99);
  transform: rotate(7deg);
}
#campaign-view .route-heading {
  display: flex;
  position: absolute;
  z-index: 4;
  top: 10px;
  left: 10px;
  padding: 5px 9px;
  min-height: 28px;
  border-radius: 10px;
  background: #173e44cf;
  pointer-events: none;
  box-shadow: 0 2px 4px #14393833;
}
#route-region {
  font-size: 12px;
  color: #fff1bd;
  letter-spacing: 0;
}
@media (max-width: 450px) {
  #campaign-view .campaign-banner {
    min-height: 104px;
    padding: 10px 12px;
    border-radius: 15px 15px 9px 9px;
  }
  #campaign-view .campaign-banner h2 {
    font-size: 28px;
  }
  .campaign-banner-copy {
    width: 76%;
  }
  .campaign-banner-emblem {
    width: 52px;
    height: 62px;
    margin: 0 0 0 auto;
  }
  .campaign-tallies {
    gap: 10px;
    font-size: 12px;
  }
  #campaign-progress,
  #campaign-view .campaign-banner #mastery-total {
    font-size: 13px;
  }
  #campaign-view .campaign-banner::before {
    background-size:
      auto,
      350px auto;
  }
}
@media (max-height: 650px) and (orientation: portrait) {
  #campaign-view .campaign-banner {
    min-height: 88px;
    padding-block: 7px;
  }
  #campaign-view .campaign-banner h2 {
    font-size: 25px;
    margin-bottom: 3px;
  }
  #campaign-view .campaign-banner .eyebrow {
    font-size: 10px;
  }
  .campaign-meter {
    margin-top: 5px;
    height: 6px;
  }
}
@media (max-height: 450px) and (orientation: landscape) {
  #campaign-view .campaign-banner {
    min-height: 58px;
    height: 58px;
    padding: 4px 12px;
  }
  .campaign-banner-copy {
    display: grid;
    grid-template-columns: 190px 220px;
    align-items: center;
    width: auto;
    column-gap: 15px;
  }
  #campaign-view .campaign-banner h2 {
    font-size: 24px;
    margin: 0;
    grid-row: 1 / 3;
  }
  #campaign-view .campaign-banner .eyebrow {
    display: none;
  }
  .campaign-banner-emblem {
    width: 42px;
    height: 42px;
    margin: 0 14px 0 auto;
  }
  .campaign-tallies {
    grid-column: 2;
  }
  .campaign-meter {
    grid-column: 2;
    margin-top: 3px;
  }
  #campaign-view .route-heading {
    display: flex;
  }
}
@media (prefers-reduced-motion: reduce) {
  .campaign-meter > span {
    transition: none;
  }
}

.world-unlock .recruit-costs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.recruit-costs > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 31px;
  padding: 3px 7px 3px 4px;
  border-radius: 9px;
  box-shadow: 0 2px 0 #a6ac8c66;
}
.recruit-gem-price {
  background: linear-gradient(#ecffff, #b5e5e5);
  border: 1px solid #74bfc6;
  color: #1b6277;
}
.recruit-video-price {
  background: linear-gradient(#fff4cd, #f0d696);
  border: 1px solid #d5b56b;
  color: #6e5126;
}
.recruit-costs img {
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
}
.recruit-gem-price b {
  font:
    20px/1 'Lilita One',
    sans-serif;
}
.recruit-video-price b {
  font:
    800 12px/1 'Nunito',
    sans-serif;
}
.world-play {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  margin-top: 12px;
  padding: 6px 10px;
  border: 2px solid #fff0b3;
  border-radius: 12px;
  background: linear-gradient(#ffeda2, #edbe50 70%);
  box-shadow: 0 3px 0 #a27e39;
  color: #654416;
  font:
    22px/1.1 'Lilita One',
    sans-serif;
  text-shadow: 0 1px #fff0b2;
}
.world-play img {
  width: 27px;
  height: 27px;
}
.world-play:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #a27e39;
}

/* Separate the enemy threat, earned reward and newly available troops. */
.world-enemy-upgrade {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 10px 0;
  padding: 9px;
  border: 1px solid #d58b6b;
  border-left: 4px solid #a84936;
  border-radius: 12px;
  background: linear-gradient(120deg, #f6d5b9, #fff0d8);
  box-shadow:
    inset 0 1px #fff8e6,
    0 2px #bf886744;
}
.world-enemy-portrait {
  position: relative;
  flex: 0 0 52px;
}
.world-enemy-portrait > svg {
  display: block;
  width: 52px;
  height: 61px;
  border: 2px solid #a8543c;
  border-radius: 10px;
  background: #683f37;
}
.world-enemy-portrait > img {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 2px #6b3825);
}
.world-enemy-copy {
  flex: 1;
  min-width: 0;
}
.world-enemy-copy > small {
  display: block;
  font:
    900 9px/1.25 'Nunito',
    sans-serif;
  letter-spacing: 0.4px;
  color: #8e3525;
}
.world-enemy-copy > strong {
  display: block;
  font:
    20px/1.15 'Lilita One',
    sans-serif;
  color: #652d26;
  margin: 3px 0 6px;
}
.enemy-ranks {
  display: flex;
  gap: 6px;
}
.enemy-ranks > span {
  display: grid;
  gap: 2px;
  padding: 4px 7px;
  border-radius: 6px;
  background: #d7b69766;
  color: #805c43;
}
.enemy-ranks small {
  font:
    800 8px/1 'Nunito',
    sans-serif;
}
.enemy-ranks b {
  font:
    16px/1.1 'Lilita One',
    sans-serif;
}
.enemy-ranks .enemy-rank-new {
  background: linear-gradient(#bf6147, #923d30);
  color: #fff3c9;
  box-shadow:
    inset 0 1px #e99468,
    0 2px #6e352c;
}
.world-bounty {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 10px 0 3px;
  padding: 8px 0;
  border-block: 1px solid #b7cbae;
  color: #1c6465;
}
.world-bounty > img {
  width: 40px;
  height: 43px;
  flex-shrink: 0;
  filter: drop-shadow(0 3px #6eaeab66);
}
.world-bounty > span {
  display: grid;
  gap: 2px;
}
.world-bounty small {
  font:
    900 10px/1.2 'Nunito',
    sans-serif;
  letter-spacing: 0.5px;
}
.world-bounty strong {
  font:
    24px/1.1 'Lilita One',
    sans-serif;
}
.world-bounty span span {
  font:
    700 11px/1.25 'Nunito',
    sans-serif;
}
.world-bounty > b {
  margin-left: auto;
  font-size: 24px;
  color: #36885d;
}
.world-bounty.is-collected {
  color: #52705d;
}
.world-bounty.is-collected > img {
  width: 30px;
  height: 33px;
}
.world-bounty.is-collected strong {
  font-size: 20px;
}
.world-unlock {
  border-top: 0;
  padding-top: 6px;
}
.world-unlock small {
  font-size: 10px;
}
.world-training-milestone .world-school-troops {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
}
.world-school-troops > span {
  display: block;
}
.world-school-troops svg {
  display: block;
  width: 26px;
  height: 30px;
  border: 1px solid #be9542;
  border-radius: 5px;
}
.world-school-troops em {
  align-self: center;
  font:
    12px 'Lilita One',
    sans-serif;
}

/* Academies occupy their own position on the same continuous road. */
.academy-medallion {
  display: grid;
  place-items: center;
  background: linear-gradient(#92dbb7, #287b69);
}
.academy-medallion img {
  width: 64%;
  height: 64%;
}
.academy-route-notes {
  overflow: hidden;
}
.academy-route-art {
  width: calc(100% + 28px);
  max-width: none;
  height: 125px;
  object-fit: cover;
  margin: -14px -14px 12px;
}
.academy-route-notes h3 {
  font:
    28px/1.1 'Lilita One',
    sans-serif;
  margin: 6px 0;
  color: #214951;
}
.academy-route-notes p {
  font-size: 16px;
  margin: 8px 0;
}
.academy-route-notes .world-school-troops {
  margin: 12px 0;
}
.journey-academy .journey-medallion > img {
  width: 44px;
  height: 44px;
  position: static;
}
.journey-school-name {
  display: block;
  font:
    17px/1.1 'Lilita One',
    sans-serif;
  color: #245b53;
  margin: 6px 0;
}
.journey-academy .next-level-play {
  font-size: 14px;
}
.next-academy-preview {
  display: flex;
  align-items: center;
  gap: 12px;
}
.next-academy-preview > img {
  width: 100px;
  height: 92px;
  object-fit: cover;
  border-radius: 14px;
}
.next-academy-preview h3 {
  margin: 4px 0;
}
.next-academy-preview p {
  margin: 4px 0;
}
@media (max-height: 560px) and (min-width: 600px) {
  #brief-tactics .world-enemy-upgrade {
    margin: 0;
    padding: 4px 7px;
  }
  #brief-tactics .world-enemy-portrait {
    flex-basis: 36px;
  }
  #brief-tactics .world-enemy-portrait > svg {
    width: 36px;
    height: 42px;
  }
  #brief-tactics .world-enemy-copy {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 6px;
    align-items: center;
  }
  #brief-tactics .world-enemy-copy > small {
    grid-column: 1;
  }
  #brief-tactics .world-enemy-copy > strong {
    grid-column: 1;
    font-size: 17px;
  }
  #brief-tactics .enemy-ranks {
    grid-column: 2;
    grid-row: 1 / 3;
  }
  #brief-tactics .enemy-ranks span {
    padding: 3px 4px;
  }
  #brief-tactics .enemy-ranks b {
    font-size: 14px;
  }
}

.campaign-celebration .journey-academy .next-level-play {
  white-space: normal;
  width: 106px;
  min-height: 36px;
  padding: 3px 5px;
  font-size: 14px;
  line-height: 1.05;
}