/* Horizontal campaign: warm dotted canvas, enamel milestones and collectible troop panels. */
#campaign-view.horizontal-campaign-page,
#level-transition .horizontal-campaign-result,
.horizontal-campaign {
  background-color: #f4edda;
  background-image: radial-gradient(circle, #c9b78d88 0.85px, transparent 1px);
  background-size: 15px 15px;
}
#campaign-view.horizontal-campaign-page:not([hidden]) {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  padding: 0;
  gap: 0;
}
#campaign-view.horizontal-campaign-page > .campaign-banner,
#campaign-view.horizontal-campaign-page > .lobby-actions {
  display: none;
}
.route-viewport.horizontal-campaign {
  --node-size: 66px;
  --offer-width: 236px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 42px minmax(270px, 1fr) 88px;
  width: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}
.horizontal-campaign::before {
  content: '';
  grid-row: 1;
  grid-column: 1;
}
#campaign-view .horizontal-campaign .route-heading,
.horizontal-campaign-result .horizontal-campaign .route-heading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: static;
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  padding: 0 22px;
  min-height: 0;
  border: 0;
  background: none;
  box-shadow: none;
  pointer-events: none;
}
.horizontal-campaign #route-region {
  color: #776343;
  font:
    900 11px/1 'Nunito',
    sans-serif;
  letter-spacing: 2px;
}
#campaign-view .horizontal-campaign .map-return,
.horizontal-campaign-result .horizontal-campaign .map-return {
  position: relative;
  inset: auto;
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  justify-self: end;
  height: 34px;
  min-height: 34px;
  margin: 0 18px 0 0;
  padding: 5px 14px;
  border: 1px solid #fff9e9;
  border-radius: 12px;
  background: linear-gradient(#fffaf0, #f2e5c4);
  color: #39616a;
  box-shadow:
    0 3px 0 #bfaa7b,
    0 5px 8px #80643018;
  font:
    16px/1 'Lilita One',
    sans-serif;
}
.horizontal-campaign #campaign-grid {
  grid-column: 1;
  grid-row: 3;
  height: 100%;
  min-height: 0;
  padding: 0;
  background: none;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: #b9a57b transparent;
  touch-action: pan-x pinch-zoom;
}
.horizontal-stops {
  display: flex;
  align-items: stretch;
  width: max-content;
  min-width: 100%;
  height: 100%;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 42px;
  box-sizing: border-box;
}
#campaign-grid .horizontal-stop {
  position: relative;
  inset: auto;
  transform: none;
  margin: 0;
  display: grid;
  grid-template-rows: minmax(132px, 1fr) minmax(138px, 1fr);
  align-items: stretch;
  gap: 0;
  width: max(246px, calc(var(--offer-columns) * (var(--offer-width) + 12px) - 12px));
  max-width: none;
  flex: 0 0 auto;
  padding: 0 16px;
  box-sizing: content-box;
}
.horizontal-milestone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 0 8px;
}
.horizontal-milestone::before {
  content: '';
  position: absolute;
  left: -16px;
  right: -16px;
  top: calc(50% - 10px);
  height: 10px;
  border-block: 1px solid #c8ba99;
  background: #ded3b7;
  box-shadow:
    inset 0 2px 3px #82704c20,
    0 2px 0 #fff9e7;
}
.secured .horizontal-milestone::before {
  background: linear-gradient(#75b4ab, #528c85);
  border-color: #528c85;
}
.recommended .horizontal-milestone::before {
  background: linear-gradient(90deg, #619c92, #eac263 55%, #ded3b7);
}
.horizontal-status {
  position: relative;
  color: #8d7d60;
  font:
    900 9px/1 'Nunito',
    sans-serif;
  letter-spacing: 1.4px;
}
.recommended .horizontal-status {
  padding: 4px 10px;
  margin: -4px 0;
  border-radius: 20px;
  color: #fff2c9;
  background: #224c59;
  box-shadow: 0 2px 0 #122f3b;
}
.secured .horizontal-status {
  color: #4f8077;
}
#campaign-grid .horizontal-stop .route-medallion {
  position: relative;
  inset: auto;
  transform: none;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: var(--node-size);
  height: var(--node-size);
  min-width: var(--node-size);
  min-height: var(--node-size);
  border-radius: 24px;
  padding: 0;
  border: 3px solid #fff1ba;
  background: linear-gradient(150deg, #ffed9e, #f7cb57 55%, #e9ae33);
  color: #79501d;
  box-shadow:
    inset 0 3px 0 #fff8d7,
    inset 0 -4px 0 #d5a139,
    0 5px 0 #aa7834,
    0 9px 10px #886b3826;
  font:
    40px/1 'Lilita One',
    sans-serif;
  text-shadow: 0 2px 0 #fff3b8;
  transition:
    filter 0.18s ease,
    translate 0.18s ease;
}
#campaign-grid .horizontal-stop.recommended .route-medallion::before {
  content: '';
  position: absolute;
  inset: -8px;
  border: 2px solid #e1b95688;
  border-radius: 30px;
  animation: route-ring 3s ease-in-out infinite;
  pointer-events: none;
}
#campaign-grid .horizontal-stop.secured .route-medallion {
  border-color: #e5f3dc;
  color: #fff7de;
  text-shadow: 0 2px 0 #386f67;
  background: linear-gradient(150deg, #95cec1, #568e85);
  box-shadow:
    inset 0 3px 0 #bde6d3,
    inset 0 -4px 0 #42776d,
    0 5px 0 #325f55,
    0 9px 10px #436a3626;
}
#campaign-grid .horizontal-stop.locked .route-medallion {
  background: linear-gradient(140deg, #ece6d5, #d2c5a8);
  color: #a0947c;
  border-color: #fff6e2;
  box-shadow:
    inset 0 3px 0 #faf2df,
    inset 0 -3px 0 #bdaf94,
    0 4px 0 #b3a487;
  text-shadow: 0 1px 0 #f7edda;
  opacity: 1;
}
.horizontal-level-number {
  position: relative;
}
.route-node-seal {
  position: absolute;
  bottom: -5px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid #fff4ce;
  border-radius: 50%;
  background: #3b807a;
  color: #fff4c6;
  font:
    900 12px/1 'Nunito',
    sans-serif;
  font-style: normal;
  text-shadow: none;
  box-shadow: 0 2px 0 #47665755;
}
.recommended .route-node-seal {
  background: #fff0ad;
  color: #81551c;
}
.locked .route-node-seal {
  background: #d0c3a6;
  border-color: #f7eed9;
}
.route-node-seal img {
  width: 16px;
  height: 16px;
}
#campaign-grid .horizontal-stop .horizontal-academy {
  width: 86px;
  background: radial-gradient(ellipse at center, #efd38e77, transparent 70%);
  border: 0;
  border-radius: 50%;
  box-shadow: none;
}
.horizontal-academy .academy-route-art {
  width: 86px;
  height: 80px;
  margin-top: -10px;
  object-fit: contain;
  filter: drop-shadow(0 5px 3px #86633240);
}
#campaign-grid .horizontal-stop .horizontal-academy::before {
  border: 0;
}
.horizontal-name {
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #294e59;
  min-height: 22px;
  padding: 0 6px;
  font:
    19px/1.05 'Lilita One',
    sans-serif;
  white-space: nowrap;
  text-shadow: 0 1px #fff8e8;
}
.horizontal-name:disabled {
  opacity: 1;
  color: #827459;
}
.horizontal-caption {
  color: #85714b;
  font:
    800 11px/1 'Nunito',
    sans-serif;
}
.route-star-awards {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 23px;
  gap: 2px;
}
.route-star-awards img {
  width: 22px;
  height: 23px;
  filter: drop-shadow(0 2px 1px #8a601d35);
}
.route-star-awards img:nth-child(2) {
  width: 26px;
  height: 27px;
}
.route-star-awards .unearned {
  filter: grayscale(1);
  opacity: 0.22;
}
.horizontal-offers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 5px 0 10px;
}
.horizontal-offer {
  position: relative;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 36px;
  column-gap: 10px;
  row-gap: 6px;
  width: var(--offer-width);
  min-width: var(--offer-width);
  height: 128px;
  box-sizing: border-box;
  padding: 9px;
  border: 1px solid #628b95;
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 0 0, #42728588, transparent 75%),
    linear-gradient(135deg, #204554, #142d3e);
  box-shadow:
    inset 0 1px 0 #b0d9d144,
    0 4px 0 #af9d72,
    0 8px 12px #5f4b2820;
  text-align: left;
}
.horizontal-offer.is-ready {
  border-color: #e9c46c;
  box-shadow:
    inset 0 1px 0 #f9e6a444,
    0 4px 0 #ad843a,
    0 8px 14px #775f2728;
}
.horizontal-card-art {
  position: relative;
  width: 66px;
  height: 76px;
  align-self: start;
  margin-top: -14px;
  transform: rotate(-4deg);
  filter: drop-shadow(0 4px 3px #07192355);
}
.horizontal-card-art > svg,
.horizontal-card-art > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 2px solid #e1c07a;
  border-radius: 9px;
  background: #142c40;
}
.offer-art-rank {
  position: absolute;
  bottom: -4px;
  left: 3px;
  right: 3px;
  text-align: center;
  padding: 3px 1px;
  border: 1px solid #85b4bd;
  border-radius: 5px;
  background: #224e61;
  color: #ffecab;
  font:
    12px/1 'Lilita One',
    sans-serif;
}
.offer-art-rank i {
  color: #aed1db;
  margin: 0 4px;
  font-style: normal;
}
.horizontal-card-copy {
  min-width: 0;
}
.offer-kicker {
  display: block;
  margin: 0 0 2px;
  font:
    900 8px/1 'Nunito',
    sans-serif;
  letter-spacing: 1.2px;
  color: #9ad9ec;
}
.offer-upgrade .offer-kicker {
  color: #b9dfa7;
}
.horizontal-card-copy > strong {
  display: block;
  color: #fff1c7;
  font:
    19px/1.04 'Lilita One',
    sans-serif;
  white-space: nowrap;
}
.offer-stat-preview {
  display: flex;
  gap: 9px;
  margin: 4px 0;
  font:
    900 12px/1 'Nunito',
    sans-serif;
  color: #d4e8e9;
}
.offer-stat-preview span {
  display: flex;
  align-items: center;
  gap: 3px;
}
.offer-stat-preview img {
  width: 17px;
  height: 17px;
  object-fit: contain;
}
.offer-upgrade .offer-stat-preview {
  color: #bfe9ad;
}
.offer-gate {
  display: block;
  font:
    800 9px/1.1 'Nunito',
    sans-serif;
  color: #b8cdd0;
  white-space: nowrap;
}
.horizontal-offer-action {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 36px;
  min-height: 36px;
  padding: 4px 8px;
  border: 1px solid #fff3b3;
  border-radius: 9px;
  color: #69451a;
  background: linear-gradient(#ffeca2 0%, #ffdf76 46%, #f1bc44 47%, #f2c55b);
  box-shadow:
    inset 0 2px 0 #fff9d4,
    0 3px 0 #b07a2e;
  font:
    17px/1 'Lilita One',
    sans-serif;
}
.horizontal-offer-action > span,
.horizontal-offer-action b {
  display: flex;
  align-items: center;
  gap: 5px;
}
.horizontal-offer-action > span > img {
  width: 23px;
  height: 23px;
}
.horizontal-offer-action b {
  padding-left: 9px;
  border-left: 1px solid #a7773133;
  font:
    20px/1 'Lilita One',
    sans-serif;
}
.horizontal-offer-action b img {
  width: 23px;
  height: 24px;
  filter: drop-shadow(0 1px 0 #183b4844);
}
.horizontal-offer-action:disabled {
  opacity: 1;
  background: linear-gradient(#4f707c, #385a69);
  border-color: #668591;
  color: #d4e1db;
  box-shadow:
    inset 0 1px 0 #9bb9b344,
    0 2px 0 #0e2838;
}
.horizontal-offer-action:disabled > span > img {
  width: 19px;
  height: 20px;
  opacity: 0.7;
}
.horizontal-offer-action:disabled b {
  color: #d9e8dd;
  border-color: #aac9c033;
}
.horizontal-dot {
  position: absolute;
  right: -5px;
  top: -5px;
  width: 12px;
  height: 12px;
  border: 2px solid #fff1c8;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 20%, #ffb193, #f14b42 55%, #be242c);
  box-shadow: 0 2px 2px #0005;
  animation: route-dot 3s ease-in-out infinite;
}
.horizontal-bounty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border: 1px solid #dac99f;
  border-radius: 14px;
  background: linear-gradient(140deg, #fffaebbb, #eee3c777);
  box-shadow:
    inset 0 1px 0 #fffaf1,
    0 3px 0 #c9b58c55;
  text-align: left;
}
.horizontal-bounty > img {
  width: 37px;
  height: 42px;
  filter: drop-shadow(0 3px 2px #4c7c6922);
}
.horizontal-bounty small {
  display: block;
  color: #8a754d;
  font:
    900 8px/1 'Nunito',
    sans-serif;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.horizontal-bounty strong {
  color: #3e6466;
  font:
    26px/1 'Lilita One',
    sans-serif;
}
.horizontal-bounty em {
  font-size: 16px;
  font-style: normal;
}
.horizontal-bounty strong i {
  font-style: normal;
  color: #649786;
}
.bounty-collected {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.bounty-collected > img {
  width: 29px;
  height: 32px;
  opacity: 0.7;
}
.bounty-collected strong {
  font-size: 19px;
  color: #8b8167;
}
.horizontal-campaign .route-pan {
  top: auto;
  bottom: calc(88px + 15px);
  height: 40px;
  width: 34px;
  min-height: 40px;
  min-width: 34px;
  padding: 6px;
  border-radius: 11px;
  border: 1px solid #fff8df;
  background: linear-gradient(#fff8df, #e8d3a0);
  color: #335b67;
  box-shadow:
    0 3px 0 #b69d6b,
    0 5px 8px #80683820;
}
.horizontal-campaign .route-pan-back {
  left: 4px;
}
.horizontal-campaign .route-pan-forward {
  right: 4px;
}
.horizontal-campaign .route-pan:disabled {
  opacity: 0.3;
}
.campaign-gem-offer {
  grid-column: 1;
  grid-row: 4;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(510px, calc(100% - 28px));
  height: 72px;
  margin: 0 auto;
  padding: 7px 10px;
  box-sizing: border-box;
  border: 1px solid #d3c194;
  border-radius: 18px;
  background: linear-gradient(120deg, #fff9e9, #f2e5c4);
  box-shadow:
    inset 0 1px 0 #fff,
    0 4px 0 #c5b18666,
    0 9px 15px #66522e0a;
}
.campaign-gem-cluster {
  position: relative;
  display: block;
  flex: 0 0 84px;
  height: 57px;
  background: radial-gradient(ellipse at 50% 70%, #3abacf33, transparent 70%);
}
.campaign-gem-cluster img {
  position: absolute;
  width: 35px;
  height: 40px;
  filter: drop-shadow(0 3px 1px #176b8160);
}
.campaign-gem-cluster img:nth-child(1) {
  left: 1px;
  top: 13px;
  transform: rotate(-20deg);
}
.campaign-gem-cluster img:nth-child(2) {
  left: 22px;
  top: 0;
  transform: rotate(8deg);
}
.campaign-gem-cluster img:nth-child(3) {
  right: 0;
  top: 12px;
  transform: rotate(25deg);
}
.campaign-gem-cluster img:nth-child(4) {
  left: 14px;
  top: 24px;
  width: 30px;
  height: 30px;
  transform: rotate(-10deg);
}
.campaign-gem-cluster img:nth-child(5) {
  left: 35px;
  top: 19px;
  width: 38px;
  height: 41px;
}
.campaign-gem-cluster i {
  position: absolute;
  top: 8px;
  right: 6px;
  width: 13px;
  height: 13px;
  background: #fff;
  clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 38%);
  filter: drop-shadow(0 0 4px #fff);
  animation: gem-pack-glint 4s ease-in-out infinite;
}
.campaign-pack-copy {
  min-width: 0;
}
.campaign-pack-copy > small {
  display: block;
  font:
    900 8px/1 'Nunito',
    sans-serif;
  color: #8c764d;
  letter-spacing: 1.6px;
}
.campaign-pack-copy > strong {
  display: block;
  font:
    32px/1 'Lilita One',
    sans-serif;
  color: #2a5364;
  white-space: nowrap;
}
.campaign-pack-copy > strong > span {
  font-size: 21px;
}
.campaign-pack-copy p {
  margin: 2px 0 0;
  font:
    800 9px/1.2 'Nunito',
    sans-serif;
  color: #88734e;
  white-space: nowrap;
}
#campaign-gem-pack {
  margin-left: auto;
  flex: 0 0 auto;
  min-height: 50px;
  padding: 6px 15px;
  border: 1px solid #a7d4cd;
  border-radius: 12px;
  background: linear-gradient(#3a7888, #215468);
  color: #fff2c7;
  box-shadow:
    inset 0 2px 0 #89b7bd88,
    0 4px 0 #133948;
  text-align: left;
}
#campaign-gem-pack small {
  display: block;
  font:
    800 9px/1 'Nunito',
    sans-serif;
  letter-spacing: 0.4px;
  color: #bfdee3;
}
#campaign-gem-pack strong {
  display: flex;
  align-items: center;
  gap: 10px;
  font:
    25px/1.15 'Lilita One',
    sans-serif;
  white-space: nowrap;
}
#campaign-gem-pack strong > span {
  color: #a5d8db;
  font-size: 28px;
}
.horizontal-campaign button:not(:disabled):hover {
  filter: brightness(1.07);
}
.horizontal-campaign button:not(:disabled):active {
  translate: 0 2px;
}
.horizontal-campaign button:focus {
  outline: none;
}
.horizontal-campaign button:focus-visible {
  outline: 3px solid #168dbe;
  outline-offset: 4px;
}
.campaign-choice select {
  max-width: 50%;
  padding: 10px;
  border: 1px solid #94ad9e;
  border-radius: 8px;
  font: inherit;
  color: #274a56;
  background: #fff8e6;
}
#level-transition .horizontal-campaign-result {
  display: block;
  position: relative;
}
.horizontal-campaign-result .victory-map-slot {
  margin: 0;
  height: 100%;
}
.horizontal-campaign-result .result-poster {
  position: absolute;
  inset: 0 0 auto;
  pointer-events: none;
  z-index: 2;
}
.horizontal-campaign-result .result-keyart,
.horizontal-campaign-result .result-poster::after {
  display: none;
}
.horizontal-campaign-result .result-title {
  color: #315764;
  text-shadow: none;
}
@keyframes route-ring {
  0%,
  100% {
    opacity: 0.7;
    scale: 1;
  }
  50% {
    opacity: 0.25;
    scale: 1.1;
  }
}
@keyframes route-dot {
  0%,
  65%,
  100% {
    box-shadow:
      0 2px 2px #0005,
      0 0 0 0 #ed5c4966;
  }
  80% {
    box-shadow:
      0 2px 2px #0005,
      0 0 0 5px #ed5c4900;
  }
}
@keyframes gem-pack-glint {
  0%,
  65%,
  100% {
    scale: 0.5;
    opacity: 0.35;
    rotate: 0deg;
  }
  78% {
    scale: 1.2;
    opacity: 1;
    rotate: 90deg;
  }
}
@media (max-width: 600px) {
  .route-viewport.horizontal-campaign {
    --offer-width: 224px;
    grid-template-rows: minmax(0, 1fr) 38px minmax(266px, 1fr) 84px;
  }
  #campaign-grid .horizontal-stop {
    width: max(228px, calc(var(--offer-columns) * (var(--offer-width) + 12px) - 12px));
    padding-inline: 13px;
  }
  .horizontal-milestone::before {
    left: -13px;
    right: -13px;
  }
  .horizontal-card-copy > strong {
    font-size: 18px;
  }
  .campaign-gem-offer {
    gap: 5px;
    padding-inline: 7px;
  }
  .campaign-gem-cluster {
    flex-basis: 64px;
    transform: scale(0.8);
    transform-origin: center;
    margin-inline: -4px;
  }
  .campaign-pack-copy > strong {
    font-size: 29px;
  }
  .campaign-pack-copy > strong > span {
    font-size: 18px;
  }
  .campaign-pack-copy p {
    font-size: 8px;
  }
  #campaign-gem-pack {
    padding-inline: 10px;
  }
  #campaign-gem-pack strong {
    font-size: 23px;
    gap: 5px;
  }
}
@media (max-height: 700px) {
  .route-viewport.horizontal-campaign {
    grid-template-rows: minmax(0, 1fr) 34px 270px 78px;
  }
  .horizontal-campaign .route-pan {
    bottom: 90px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  .route-viewport.horizontal-campaign {
    --node-size: 40px;
    --offer-width: 224px;
    grid-template-rows: 0 28px minmax(0, 1fr) 58px;
  }
  #campaign-grid .horizontal-stop {
    grid-template-rows: minmax(74px, 1fr) 86px;
  }
  .horizontal-milestone {
    gap: 2px;
    padding: 2px 0;
  }
  #campaign-grid .horizontal-stop .route-medallion {
    border-radius: 15px;
    font-size: 26px;
    border-width: 2px;
  }
  .horizontal-status {
    font-size: 7px;
  }
  .recommended .horizontal-status {
    padding: 2px 7px;
    margin: -2px 0;
  }
  .horizontal-name {
    font-size: 14px;
    min-height: 15px;
  }
  .route-star-awards {
    height: 14px;
  }
  .route-star-awards img {
    width: 14px;
    height: 15px;
  }
  .route-star-awards img:nth-child(2) {
    width: 16px;
    height: 17px;
  }
  .route-node-seal {
    width: 18px;
    height: 18px;
    font-size: 9px;
    right: -7px;
  }
  .route-node-seal img {
    width: 12px;
    height: 12px;
  }
  .horizontal-caption {
    font-size: 8px;
  }
  #campaign-grid .horizontal-stop .horizontal-academy {
    width: 58px;
  }
  .horizontal-academy .academy-route-art {
    width: 58px;
    height: 52px;
    margin-top: -7px;
  }
  .horizontal-offers {
    padding: 3px 0 5px;
  }
  .horizontal-offer {
    height: 78px;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: 1fr 28px;
    column-gap: 7px;
    row-gap: 3px;
    padding: 5px 7px;
    border-radius: 11px;
  }
  .horizontal-card-art {
    width: 48px;
    height: 52px;
    grid-row: 1/3;
    margin-top: 0;
  }
  .horizontal-card-copy > strong {
    font-size: 15px;
  }
  .offer-kicker {
    font-size: 7px;
  }
  .offer-stat-preview {
    position: absolute;
    left: 9px;
    bottom: 4px;
    font-size: 8px;
    gap: 2px;
    margin: 0;
  }
  .offer-stat-preview img {
    width: 10px;
    height: 10px;
  }
  .offer-gate {
    font-size: 8px;
    margin-top: 2px;
  }
  .offer-art-rank {
    font-size: 9px;
  }
  .horizontal-offer-action {
    grid-column: 2;
    height: 28px;
    min-height: 28px;
    font-size: 14px;
    padding: 2px 5px;
    border-radius: 6px;
  }
  .horizontal-offer-action > span > img {
    display: none;
  }
  .horizontal-offer-action b {
    font-size: 17px;
  }
  .horizontal-offer-action b img {
    width: 18px;
    height: 19px;
  }
  .horizontal-bounty {
    padding: 8px 12px;
  }
  .horizontal-bounty strong {
    font-size: 22px;
  }
  .horizontal-campaign .route-pan {
    bottom: 65px;
    height: 30px;
    min-height: 30px;
  }
  .campaign-gem-offer {
    height: 50px;
    padding: 3px 10px;
  }
  .campaign-gem-cluster {
    transform: scale(0.72);
    margin-inline: -12px;
  }
  .campaign-pack-copy > strong {
    font-size: 25px;
  }
  .campaign-pack-copy > small {
    display: none;
  }
  #campaign-gem-pack {
    min-height: 38px;
    padding: 3px 12px;
  }
  #campaign-gem-pack strong {
    font-size: 21px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .horizontal-campaign *,
  .horizontal-campaign *::before {
    animation: none !important;
    transition: none !important;
  }
}
/* Route navigation never covers a troop action. */
.horizontal-campaign .route-pan {
  position: relative;
  inset: auto;
  grid-row: 2;
  grid-column: 1;
  align-self: center;
  justify-self: end;
  height: 32px;
  min-height: 32px;
  width: 30px;
  min-width: 30px;
  padding: 5px;
  z-index: 5;
}
.horizontal-campaign .route-pan-back {
  margin-right: 172px;
}
.horizontal-campaign .route-pan-forward {
  margin-right: 136px;
}
@media (max-width: 400px) {
  .horizontal-campaign #route-region {
    font-size: 9px;
    letter-spacing: 1px;
  }
  #campaign-view .horizontal-campaign .route-heading {
    padding-left: 14px;
  }
}
#modal[data-variant='gems'] .modal-body {
  background: radial-gradient(ellipse at 50% 0, #396274, #142f42 75%);
  color: #d3e5e6;
}
.gem-store-heading {
  text-align: center;
}
.gem-store-heading .eyebrow {
  color: #a6dbe7;
}
.gem-store-heading h2 {
  color: #fff0bd;
  font-family: 'Lilita One', sans-serif;
}
.gem-store-heading p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.gem-store-heading p strong {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #9aeeff;
  font:
    26px/1 'Lilita One',
    sans-serif;
}
.gem-store-heading p img {
  width: 26px;
  height: 29px;
}
#modal[data-variant='gems'] .gem-packs article {
  position: relative;
  background: linear-gradient(145deg, #315b6e, #1b3d50);
  border: 1px solid #628c9c;
  border-radius: 18px;
  padding: 15px 8px;
  color: #fff0bd;
  box-shadow:
    inset 0 1px 0 #bddbd433,
    0 5px 0 #0e283b;
}
.gem-pack-art {
  position: relative;
  display: block;
  height: 80px;
  width: 112px;
  background: radial-gradient(ellipse at 50% 75%, #77e6f54d, transparent 65%);
}
.gem-pack-art img {
  position: absolute;
  width: 52px;
  height: 60px;
  top: 10px;
  left: 2px;
  transform: rotate(-20deg);
  filter: drop-shadow(0 4px 2px #06213466);
}
.gem-pack-art img:nth-child(2) {
  left: auto;
  right: 1px;
  transform: rotate(18deg);
}
.gem-pack-art img:nth-child(3) {
  left: 30px;
  top: 20px;
  transform: none;
}
#modal[data-variant='gems'] .gem-packs h3 {
  font-size: 32px;
}
.gem-packs h3 small {
  display: block;
  font:
    800 13px/1.2 'Nunito',
    sans-serif;
  color: #b4d4df;
}
#modal[data-variant='gems'] .gem-packs strong {
  font:
    24px/1 'Lilita One',
    sans-serif;
  color: #a3edfb;
}
#modal[data-variant='gems'] .gem-packs button:disabled {
  opacity: 1;
  background: #2a4858;
  border: 1px solid #5d7885;
  color: #b0c4ca;
  box-shadow: none;
  font:
    800 10px/1.3 'Nunito',
    sans-serif;
}
/* Larger reward art, with shine confined to earned stars and gem facets. */
.route-viewport.horizontal-campaign {
  grid-template-rows: minmax(0, 1fr) 42px minmax(296px, 1fr) 96px;
}
#campaign-grid .horizontal-stop {
  grid-template-rows: minmax(158px, 1fr) minmax(138px, 1fr);
}
.horizontal-milestone {
  gap: 3px;
  padding-block: 4px;
}
.route-star-awards {
  height: 43px;
  flex: 0 0 43px;
  gap: 4px;
}
.route-award-star {
  position: relative;
  display: block;
  width: 36px;
  height: 39px;
}
.route-award-star:nth-child(2) {
  width: 43px;
  height: 46px;
}
.route-star-awards .route-award-star > img {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 3px 1px #8e521f55) drop-shadow(0 0 5px #ffc44255);
}
.route-star-awards .route-award-star.unearned {
  opacity: 0.25;
  filter: grayscale(1);
}
.route-award-star.earned::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    #fff8ce88 43%,
    #fff 50%,
    #fff7c888 57%,
    transparent 70%
  );
  background-size: 300% 100%;
  background-position: 160% 0;
  mask: url('art/icons/victory-star.svg') center / contain no-repeat;
  -webkit-mask: url('art/icons/victory-star.svg') center / contain no-repeat;
  animation: campaign-star-sheen 4.6s ease-in-out infinite;
  animation-delay: calc(var(--star-order) * 0.18s);
  pointer-events: none;
}
.route-award-star.earned i {
  position: absolute;
  right: 1px;
  top: 7px;
  width: 12px;
  height: 12px;
  background: #fffdf1;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  filter: drop-shadow(0 0 4px #fff2a4);
  animation: campaign-reward-spark 4.6s ease-in-out infinite;
  animation-delay: calc(var(--star-order) * 0.18s);
}
.route-bounty-gem {
  position: relative;
  flex: 0 0 52px;
  width: 52px;
  height: 58px;
}
.route-bounty-gem > img {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 2px #39768d44) drop-shadow(0 0 9px #57d9ed55);
}
.route-bounty-gem::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, #fff 50%, transparent 65%);
  background-size: 300% 100%;
  background-position: 160% 0;
  mask: url('art/icons/gem.svg') center / contain no-repeat;
  -webkit-mask: url('art/icons/gem.svg') center / contain no-repeat;
  animation: campaign-star-sheen 5.2s ease-in-out infinite;
}
.route-bounty-gem i {
  position: absolute;
  top: 6px;
  right: 1px;
  width: 13px;
  height: 13px;
  background: #fff;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: campaign-reward-spark 5.2s ease-in-out infinite;
}
.bounty-collected .route-bounty-gem {
  flex-basis: 45px;
  width: 45px;
  height: 50px;
}
.horizontal-bounty {
  gap: 12px;
  padding-inline: 16px;
}
.horizontal-bounty strong {
  font-size: 30px;
}
.bounty-collected strong {
  font-size: 21px;
}
.horizontal-offer-action b {
  font-size: 23px;
  gap: 6px;
}
.horizontal-offer-action b img {
  width: 30px;
  height: 31px;
  filter: drop-shadow(0 2px 1px #246e8955) drop-shadow(0 0 4px #6beeff55);
}
.campaign-gem-offer {
  height: 82px;
  width: min(550px, calc(100% - 28px));
  gap: 18px;
}
.campaign-gem-cluster {
  flex-basis: 108px;
  height: 65px;
}
.campaign-gem-cluster img {
  width: 44px;
  height: 50px;
}
.campaign-gem-cluster img:nth-child(1) {
  left: 0;
  top: 14px;
}
.campaign-gem-cluster img:nth-child(2) {
  left: 29px;
  top: -1px;
}
.campaign-gem-cluster img:nth-child(3) {
  right: 0;
  top: 12px;
}
.campaign-gem-cluster img:nth-child(4) {
  left: 19px;
  top: 28px;
  width: 37px;
  height: 37px;
}
.campaign-gem-cluster img:nth-child(5) {
  left: 45px;
  top: 22px;
  width: 46px;
  height: 49px;
}
.campaign-gem-cluster i {
  top: 4px;
  right: 14px;
  width: 17px;
  height: 17px;
}
.campaign-pack-copy > strong {
  font-size: 37px;
}
.campaign-pack-copy > strong > span {
  font-size: 24px;
}
#campaign-gem-pack {
  min-height: 56px;
}
#campaign-gem-pack strong {
  font-size: 28px;
}
@keyframes campaign-star-sheen {
  0%,
  12% {
    opacity: 0;
    background-position: 160% 0;
  }
  18% {
    opacity: 0.95;
  }
  36% {
    opacity: 0.8;
    background-position: -60% 0;
  }
  42%,
  100% {
    opacity: 0;
    background-position: -60% 0;
  }
}
@keyframes campaign-reward-spark {
  0%,
  20%,
  44%,
  100% {
    opacity: 0;
    scale: 0.3;
    rotate: 0deg;
  }
  31% {
    opacity: 1;
    scale: 1.2;
    rotate: 80deg;
  }
}
@media (max-width: 600px) {
  .route-viewport.horizontal-campaign {
    grid-template-rows: minmax(0, 1fr) 38px 296px 90px;
  }
  .campaign-gem-offer {
    height: 78px;
    gap: 7px;
    padding-inline: 7px;
  }
  .campaign-gem-cluster {
    flex-basis: 84px;
    transform: scale(0.82);
    margin-inline: -8px;
  }
  .campaign-pack-copy > strong {
    font-size: 32px;
  }
  .campaign-pack-copy > strong > span {
    font-size: 18px;
  }
  #campaign-gem-pack {
    min-height: 50px;
    padding-inline: 9px;
  }
  #campaign-gem-pack strong {
    font-size: 23px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  .route-viewport.horizontal-campaign {
    --node-size: 36px;
    grid-template-rows: 0 28px minmax(0, 1fr) 58px;
  }
  #campaign-grid .horizontal-stop {
    grid-template-rows: minmax(78px, 1fr) 86px;
  }
  .horizontal-milestone {
    gap: 1px;
    padding-block: 0;
  }
  .route-star-awards {
    height: 21px;
    flex-basis: 21px;
    gap: 2px;
  }
  .route-award-star {
    width: 20px;
    height: 21px;
  }
  .route-award-star:nth-child(2) {
    width: 24px;
    height: 25px;
  }
  .route-award-star.earned i {
    width: 8px;
    height: 8px;
    top: 3px;
  }
  .horizontal-offer-action b {
    font-size: 18px;
    gap: 3px;
  }
  .horizontal-offer-action b img {
    width: 23px;
    height: 24px;
  }
  .route-bounty-gem,
  .bounty-collected .route-bounty-gem {
    width: 35px;
    height: 40px;
    flex-basis: 35px;
  }
  .horizontal-bounty strong {
    font-size: 23px;
  }
  .bounty-collected strong {
    font-size: 19px;
  }
  .campaign-gem-offer {
    height: 50px;
    gap: 10px;
  }
  .campaign-gem-cluster {
    flex-basis: 84px;
    height: 65px;
    transform: scale(0.7);
    margin-inline: -10px;
  }
  .campaign-pack-copy > strong {
    font-size: 26px;
  }
  #campaign-gem-pack {
    min-height: 38px;
  }
  #campaign-gem-pack strong {
    font-size: 21px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .horizontal-campaign *,
  .horizontal-campaign *::after,
  .horizontal-campaign *::before {
    animation: none !important;
  }
  .route-award-star.earned::after,
  .route-bounty-gem::after {
    opacity: 0;
  }
}

/* Each milestone owns its loot, play action and level-priced gem pack. */
.route-viewport.horizontal-campaign {
  --route-side: 16px;
  grid-template-rows: minmax(0, 1fr) 38px minmax(426px, 1fr);
}
#campaign-grid .horizontal-stop {
  grid-template-rows: 158px 58px minmax(138px, 1fr) 72px;
}
.horizontal-milestone {
  justify-content: flex-start;
  padding-top: 8px;
}
.horizontal-milestone::before {
  display: none;
}
.horizontal-status {
  min-height: 9px;
}
.horizontal-node-track {
  position: relative;
  width: 100%;
  height: var(--node-size);
  flex: 0 0 var(--node-size);
  display: flex;
  justify-content: center;
  align-items: center;
  --node-clearance: calc(var(--node-size) / 2 + 12px);
}
.horizontal-node-track::before,
.horizontal-node-track::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 9px;
  box-sizing: border-box;
  background: linear-gradient(#e1d7bc, #cfc2a3);
  border-block: 1px solid #bcae8e;
  box-shadow:
    inset 0 2px 0 #f8f0db99,
    0 2px 0 #fffaea;
}
.horizontal-node-track::before {
  left: calc(-1 * var(--route-side));
  right: calc(50% + var(--node-clearance));
  border-radius: 0 8px 8px 0;
}
.horizontal-node-track::after {
  right: calc(-1 * var(--route-side));
  left: calc(50% + var(--node-clearance));
  border-radius: 8px 0 0 8px;
}
.secured .horizontal-node-track::before,
.secured .horizontal-node-track::after,
.recommended .horizontal-node-track::before {
  background: linear-gradient(#8bc4b8, #568f84);
  border-color: #5c9286;
  box-shadow:
    inset 0 2px 0 #bde5d766,
    0 2px 0 #fffaea;
}
.horizontal-stop:first-child .horizontal-node-track::before,
.horizontal-stop:last-child .horizontal-node-track::after {
  display: none;
}
.horizontal-stop[data-academy-stop] .horizontal-node-track {
  --node-clearance: 55px;
}
.route-level-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 7px;
}
.route-level-loot {
  display: flex;
  align-items: center;
  gap: 7px;
  text-align: left;
}
.route-level-loot .route-bounty-gem {
  width: 36px;
  height: 44px;
  flex-basis: 36px;
}
.route-level-loot small {
  display: block;
  font:
    800 9px/1.3 'Nunito',
    sans-serif;
  color: #87724b;
}
.route-level-loot small:first-child {
  letter-spacing: 1px;
  font-size: 8px;
}
.route-level-loot strong {
  display: block;
  color: #27596a;
  font:
    24px/1 'Lilita One',
    sans-serif;
}
.route-level-loot em {
  font-style: normal;
  font-size: 14px;
}
.route-play-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 10px;
  min-height: 38px;
  border: 1px solid #fff4bf;
  border-radius: 12px;
  background: linear-gradient(#ffe899 48%, #f5c34c 49%, #edb744);
  color: #684515;
  box-shadow:
    inset 0 2px 0 #fff7ca,
    0 4px 0 #aa7b30;
  font:
    17px/1 'Lilita One',
    sans-serif;
  white-space: nowrap;
}
.route-play-button img {
  width: 24px;
  height: 24px;
}
.route-play-button.is-replay {
  background: linear-gradient(#fff9e7, #e9dfc2);
  border-color: #fffdf3;
  color: #416763;
  box-shadow: 0 3px 0 #b6a782;
}
.route-play-button:disabled {
  opacity: 1;
  background: #e5dcc5;
  color: #998a6f;
  border-color: #fdf6e2;
  box-shadow: 0 3px 0 #c4b697;
}
.route-play-button:disabled img {
  opacity: 0.5;
}
.route-play-button:not(:disabled):hover {
  filter: brightness(1.08);
}
.horizontal-stop[data-academy-stop] .route-level-summary {
  justify-content: center;
}
.route-level-pack {
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  min-width: 0;
  height: 60px;
  padding: 5px 6px;
  box-sizing: border-box;
  border: 1px solid #d6c296;
  border-radius: 15px;
  background: linear-gradient(120deg, #fffbed, #efe3c3);
  box-shadow:
    inset 0 2px 0 #fffef3,
    0 4px 0 #d4c39c;
  text-align: left;
}
.route-level-pack > div {
  flex: 1;
}
.route-level-pack small {
  display: block;
  font:
    900 8px/1.2 'Nunito',
    sans-serif;
  color: #8b7248;
  letter-spacing: 0.8px;
}
.route-level-pack strong {
  display: block;
  font:
    25px/1.1 'Lilita One',
    sans-serif;
  color: #295564;
  white-space: nowrap;
}
.route-level-pack em {
  font:
    14px/1 'Lilita One',
    sans-serif;
}
.route-level-pack button {
  min-height: 45px;
  padding: 5px 9px;
  border: 1px solid #8fbdc5;
  border-radius: 10px;
  background: linear-gradient(#367789, #205065);
  box-shadow:
    inset 0 2px 0 #9ac5cb55,
    0 3px 0 #153847;
}
.route-level-pack button small {
  color: #b7dbe2;
  letter-spacing: 0;
}
.route-level-pack button strong {
  color: #fff3c6;
  font-size: 21px;
}
.route-pack-crystals {
  position: relative;
  display: block;
  width: 48px;
  height: 46px;
  flex: 0 0 48px;
}
.route-pack-crystals img {
  position: absolute;
  width: 29px;
  height: 35px;
  top: 3px;
  left: 0;
  transform: rotate(-18deg);
  filter: drop-shadow(0 3px 2px #30808a44);
}
.route-pack-crystals img:nth-child(2) {
  left: 20px;
  transform: rotate(18deg);
}
.route-pack-crystals img:nth-child(3) {
  left: 11px;
  top: 12px;
  transform: none;
}
.route-pack-crystals::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  top: 1px;
  right: 0;
  background: white;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: gem-pack-glint 5s infinite;
}
@media (max-width: 600px) {
  .route-viewport.horizontal-campaign {
    --route-side: 13px;
    grid-template-rows: minmax(0, 1fr) 34px minmax(422px, 1fr);
  }
  #campaign-grid .horizontal-stop {
    grid-template-rows: 154px 58px minmax(138px, 1fr) 72px;
  }
  .route-play-button {
    font-size: 15px;
    padding-inline: 7px;
  }
  .route-level-pack button {
    padding-inline: 7px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  .route-viewport.horizontal-campaign {
    grid-template-rows: 0 28px minmax(0, 1fr);
  }
  .horizontal-campaign #campaign-grid {
    overflow-y: auto;
    touch-action: pan-x pan-y pinch-zoom;
  }
  .horizontal-stops {
    height: 280px;
  }
  #campaign-grid .horizontal-stop {
    grid-template-rows: 82px 50px 86px 62px;
  }
  .horizontal-milestone {
    padding-top: 4px;
  }
  .route-level-pack {
    height: 52px;
  }
  .route-level-loot .route-bounty-gem {
    width: 30px;
    height: 36px;
    flex-basis: 30px;
  }
  .route-play-button {
    min-height: 32px;
    padding-block: 4px;
  }
}

/* Keep all node centers on one baseline, including the highlighted status pill. */
.horizontal-milestone .horizontal-status {
  height: 18px;
  min-height: 18px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin: 0;
}
.route-level-loot small,
.route-level-loot strong {
  white-space: nowrap;
}
.route-level-loot {
  flex-shrink: 0;
}
@media (max-height: 500px) and (orientation: landscape) {
  .horizontal-milestone .horizontal-status {
    height: 12px;
    min-height: 12px;
  }
}
@media (min-height: 501px), (orientation: portrait) {
  #campaign-grid .horizontal-stop {
    grid-template-rows: 162px 54px minmax(138px, 1fr) 68px;
  }
  .horizontal-milestone {
    gap: 1px;
    padding: 4px 0;
  }
}

/* Give the rewards and actions more room; loot is one collected / total line. */
.route-viewport.horizontal-campaign {
  grid-template-rows: minmax(0, 1fr) 38px minmax(0, 480px);
}
.horizontal-campaign #campaign-grid {
  overflow-y: auto;
  touch-action: pan-x pan-y pinch-zoom;
}
.horizontal-stops {
  min-height: 480px;
}
#campaign-grid .horizontal-stop {
  grid-template-rows: 162px 88px minmax(158px, 1fr) 72px;
}
.route-level-summary {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  padding-bottom: 6px;
}
.route-level-loot {
  justify-content: center;
  gap: 8px;
  height: 38px;
}
.route-level-loot .route-bounty-gem {
  width: 32px;
  height: 38px;
  flex-basis: 32px;
}
.route-level-loot strong {
  font-size: 24px;
}
.route-level-loot .loot-divider {
  color: #93aca7;
  padding-inline: 2px;
}
.route-level-loot em {
  font-size: 18px;
}
.route-level-summary .route-play-button {
  min-width: 138px;
  flex-shrink: 0;
}
.horizontal-stop[data-academy-stop] .route-level-summary {
  justify-content: flex-start;
  padding-top: 12px;
}
@media (max-width: 600px) {
  .route-viewport.horizontal-campaign {
    grid-template-rows: minmax(0, 1fr) 34px minmax(0, 480px);
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  .route-viewport.horizontal-campaign {
    grid-template-rows: 0 28px minmax(0, 1fr);
  }
  .horizontal-stops {
    height: 320px;
    min-height: 320px;
  }
  #campaign-grid .horizontal-stop {
    grid-template-rows: 82px 82px 94px 62px;
  }
  .route-level-loot {
    height: 34px;
  }
  .route-level-loot strong {
    font-size: 21px;
  }
}

/* Roomier campaign stage with enamel level medallions and recessed rails. */
@media (min-height: 501px), (orientation: portrait) {
  .route-viewport.horizontal-campaign {
    --node-size: 82px;
    grid-template-rows: minmax(0, 1fr) 42px minmax(0, 580px);
  }
  .horizontal-stops {
    min-height: 580px;
  }
  #campaign-grid .horizontal-stop {
    width: max(262px, calc(var(--offer-columns) * (var(--offer-width) + 20px) - 20px));
    grid-template-rows: 210px 104px minmax(180px, 1fr) 86px;
    padding-inline: 20px;
  }
  .route-viewport.horizontal-campaign {
    --route-side: 20px;
  }
  .horizontal-milestone {
    padding: 12px 0 8px;
    gap: 8px;
  }
  .horizontal-milestone .horizontal-name {
    margin-top: 8px;
  }
  .horizontal-milestone .route-star-awards {
    margin-top: 2px;
  }
  .route-level-summary {
    gap: 13px;
    padding-top: 4px;
  }
  .route-level-summary .route-play-button {
    min-height: 42px;
    min-width: 152px;
  }
  .horizontal-offers {
    gap: 20px;
    padding-block: 14px;
  }
  .route-level-pack {
    height: 66px;
    margin-bottom: 5px;
    padding-inline: 9px;
  }
  .route-level-loot .route-bounty-gem {
    width: 36px;
    height: 42px;
    flex-basis: 36px;
  }
}
#campaign-grid .horizontal-stop .route-medallion:not(.horizontal-academy) {
  border-radius: 50%;
  border: 4px solid #fff5d2;
  background:
    radial-gradient(ellipse at 35% 16%, #fff6c8, transparent 55%),
    linear-gradient(150deg, #ffe28c 25%, #ecb43f 70%, #c88722);
  box-shadow:
    0 0 0 2px #d6b068,
    inset 0 3px 1px #fff9df,
    inset 0 -6px 1px #ba7b28,
    0 6px 0 #976a32,
    0 11px 10px #76572c28;
  color: #68431e;
  font-size: 46px;
  text-shadow: 0 2px 0 #fff5c1;
}
#campaign-grid .horizontal-stop .route-medallion:not(.horizontal-academy)::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1px solid #fff5d18c;
  border-bottom-color: #9b66295c;
  box-shadow: inset 0 1px 2px #583c1f24;
  pointer-events: none;
}
#campaign-grid .horizontal-stop.secured .route-medallion:not(.horizontal-academy) {
  background:
    radial-gradient(ellipse at 30% 10%, #9ddbc8, transparent 60%),
    linear-gradient(155deg, #509b93, #24676b 80%);
  border-color: #edf5dc;
  color: #fff7d8;
  text-shadow: 0 3px 0 #185251;
  box-shadow:
    0 0 0 2px #85b5a1,
    inset 0 3px 1px #c5ebd9,
    inset 0 -6px 1px #205455,
    0 6px 0 #234c4b,
    0 11px 10px #315c4b28;
}
#campaign-grid .horizontal-stop.locked .route-medallion:not(.horizontal-academy) {
  background:
    radial-gradient(ellipse at 35% 15%, #faf4e5, transparent 65%), linear-gradient(#e6dcc6, #c8b99a);
  border-color: #fff7e4;
  color: #9c8c6c;
  text-shadow: 0 2px 0 #fff6df;
  box-shadow:
    0 0 0 2px #d5c8aa,
    inset 0 3px 0 #fffaec,
    inset 0 -5px 0 #b8a685,
    0 5px 0 #a8997b,
    0 9px 9px #86734b1c;
}
#campaign-grid .horizontal-stop.recommended .route-medallion:not(.horizontal-academy)::before {
  inset: -12px;
  border-radius: 50%;
  border: 2px solid #d6a53788;
  box-shadow:
    0 0 0 5px #e9c15819,
    0 0 18px #f1cb6350;
}
#campaign-grid .horizontal-stop .route-medallion:focus-visible {
  outline: 3px solid #2689a4;
  outline-offset: 8px;
}
.horizontal-node-track {
  --node-clearance: calc(var(--node-size) / 2 + 18px);
}
.horizontal-node-track::before,
.horizontal-node-track::after {
  height: 12px;
  border-top: 1px solid #c6b899;
  border-bottom: 1px solid #fffae9;
  background: linear-gradient(#c8bb9c, #dfd3b9 40%, #e8ddc5 65%, #d0c1a0);
  box-shadow:
    inset 0 2px 2px #8f7b4d28,
    0 1px 0 #fff9e5;
}
.horizontal-node-track::before {
  border-radius: 0 12px 12px 0;
}
.horizontal-node-track::after {
  border-radius: 12px 0 0 12px;
}
.secured .horizontal-node-track::before,
.secured .horizontal-node-track::after,
.recommended .horizontal-node-track::before {
  background: linear-gradient(#b9d7bd 0 15%, #7ab7a2 16% 35%, #4c9387 50%, #3e7d77 80%, #86b7a0);
  border-top-color: #599681;
  border-bottom-color: #f6f3d6;
  box-shadow:
    inset 0 1px 0 #e2f3d9,
    0 2px 0 #8eaf9680,
    0 3px 5px #42695c18;
}
.route-node-seal {
  z-index: 1;
  box-shadow:
    0 2px 0 #234d4d55,
    0 3px 4px #183b3b22;
}
@media (max-height: 500px) and (orientation: landscape) {
  #campaign-grid .horizontal-stop .route-medallion:not(.horizontal-academy) {
    font-size: 25px;
    border-width: 2px;
  }
  .horizontal-node-track::before,
  .horizontal-node-track::after {
    height: 9px;
  }
}

/* Only the next unplayed level owns the active pack. Keep historical prices visible. */
.route-level-pack.pack-inactive {
  opacity: 0.4;
  box-shadow:
    inset 0 1px 0 #fffdf0,
    0 2px 0 #cfc2a8;
}
.route-level-pack.pack-inactive button:disabled {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  opacity: 1;
  cursor: default;
}
.route-level-pack.pack-inactive button strong {
  color: #53686a;
}
.route-level-pack.pack-inactive button small {
  color: #7e775f;
}
.route-level-pack.pack-inactive .route-pack-crystals::after {
  display: none;
}

/* New availability is celebrated in place; the actual purchase remains a user action. */
.campaign-card-reveal {
  z-index: 5;
  isolation: isolate;
  transform-origin: 50% 55%;
  animation: campaign-card-arrival 2600ms cubic-bezier(0.2, 0.75, 0.2, 1) var(--unlock-delay, 0ms)
    both;
}
.campaign-card-reveal .horizontal-card-art {
  z-index: 3;
  transform-origin: 50% 80%;
  animation: campaign-portrait-arrival 2300ms cubic-bezier(0.17, 0.78, 0.25, 1)
    var(--unlock-delay, 0ms) both;
}
.campaign-card-reveal .horizontal-card-copy {
  position: relative;
  z-index: 2;
  animation: campaign-unlock-copy 1800ms ease var(--unlock-delay, 0ms) both;
}
.campaign-card-reveal .offer-kicker {
  color: #ffe192;
  letter-spacing: 0.8px;
}
.campaign-card-reveal .horizontal-offer-action {
  position: relative;
  overflow: hidden;
  animation: campaign-unlock-button 3000ms ease var(--unlock-delay, 0ms) both;
}
.campaign-card-reveal .horizontal-offer-action::after {
  content: '';
  position: absolute;
  inset: -50% -80%;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 40%, #fffbe6cc 49%, transparent 58%);
  animation: campaign-unlock-sweep 3200ms ease var(--unlock-delay, 0ms) both;
}
.campaign-unlock-effects {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.unlock-halo {
  position: absolute;
  width: 290px;
  height: 240px;
  left: 50%;
  top: 45%;
  margin: -120px 0 0 -145px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #fff0adf0 0, #ffd56899 25%, #f4d17e33 50%, transparent 72%);
  animation: campaign-unlock-halo 3600ms ease var(--unlock-delay, 0ms) both;
}
.unlock-ring {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 120px;
  height: 120px;
  margin: -60px;
  border: 2px solid #fff3b3;
  border-radius: 50%;
  box-shadow:
    0 0 12px #f4bd4f88,
    inset 0 0 12px #ffeeb277;
  animation: campaign-unlock-ring 2400ms ease-out var(--unlock-delay, 0ms) both;
}
.unlock-mote {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 10px;
  height: 10px;
  background: #fff6cd;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: campaign-unlock-motes 2800ms ease-out var(--unlock-delay, 0ms) both;
}
@keyframes campaign-card-arrival {
  0%,
  12% {
    opacity: 0.35;
    transform: translateY(12px) scale(0.94);
    filter: saturate(0.2);
  }
  32% {
    opacity: 1;
    transform: translateY(-12px) scale(1.09);
    filter: saturate(1.2);
    box-shadow:
      0 0 30px #f5cb6baa,
      0 7px 0 #af843a;
  }
  55% {
    transform: translateY(-5px) scale(1.035);
  }
  100% {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
@keyframes campaign-portrait-arrival {
  0%,
  14% {
    opacity: 0;
    transform: perspective(500px) translateY(20px) rotateY(-100deg) rotate(-8deg) scale(0.75);
  }
  40% {
    opacity: 1;
    transform: perspective(500px) translateY(-36px) rotateY(12deg) rotate(5deg) scale(1.35);
  }
  65% {
    transform: perspective(500px) translateY(-12px) rotateY(0) rotate(-6deg) scale(1.12);
  }
  100% {
    opacity: 1;
    transform: rotate(-4deg);
  }
}
@keyframes campaign-unlock-copy {
  0%,
  32% {
    opacity: 0;
    transform: translateY(8px);
  }
  65%,
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes campaign-unlock-button {
  0%,
  35% {
    opacity: 0.4;
    filter: saturate(0);
  }
  58% {
    opacity: 1;
    filter: saturate(1.1) brightness(1.2);
  }
  100% {
    opacity: 1;
    filter: none;
  }
}
@keyframes campaign-unlock-sweep {
  0%,
  55% {
    transform: translateX(-65%);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  85%,
  100% {
    transform: translateX(65%);
    opacity: 0;
  }
}
@keyframes campaign-unlock-halo {
  0%,
  8% {
    opacity: 0;
    scale: 0.5;
  }
  32% {
    opacity: 1;
    scale: 1.1;
  }
  75% {
    opacity: 0.6;
    scale: 1;
  }
  100% {
    opacity: 0;
    scale: 0.9;
  }
}
@keyframes campaign-unlock-ring {
  0%,
  18% {
    opacity: 0;
    scale: 0.3;
  }
  25% {
    opacity: 1;
  }
  70%,
  100% {
    opacity: 0;
    scale: 2.6;
  }
}
@keyframes campaign-unlock-motes {
  0%,
  18% {
    opacity: 0;
    transform: rotate(var(--angle)) translateX(0) scale(0.3);
  }
  30% {
    opacity: 1;
  }
  80%,
  100% {
    opacity: 0;
    transform: rotate(var(--angle)) translateX(var(--distance)) scale(0.5);
  }
}
@media (prefers-reduced-motion: reduce) {
  .campaign-card-reveal,
  .campaign-card-reveal *,
  .campaign-card-reveal *::after {
    animation: none !important;
  }
  .campaign-unlock-effects,
  .campaign-card-reveal .horizontal-offer-action::after {
    display: none;
  }
  .campaign-card-reveal {
    outline: 2px solid #efc665;
    outline-offset: 4px;
  }
}

/* Bare full-body deck lineup, always six columns and two rows. */
.route-viewport.horizontal-campaign {
  grid-template-rows: clamp(218px, 29vh, 280px) 42px minmax(0, 580px);
}
.horizontal-campaign::before {
  display: none;
}
.campaign-deck {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 22px 6px;
  width: 100%;
  max-width: 1160px;
  box-sizing: border-box;
  justify-self: center;
}
.campaign-deck-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 9px;
}
.campaign-deck-heading > span {
  font:
    900 10px/1 'Nunito',
    sans-serif;
  letter-spacing: 1.5px;
  color: #7b6a4b;
}
.campaign-deck-heading button {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 4px 0 4px 10px;
  color: #36656d;
  font:
    800 11px/1 'Nunito',
    sans-serif;
  min-height: 24px;
}
.campaign-deck-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1;
  min-height: 0;
}
.campaign-deck-troop {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.campaign-deck-body {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-height: 0;
}
.campaign-deck-character {
  position: relative;
  height: 100%;
  width: 100%;
  min-height: 0;
}
.campaign-troop-figure {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  filter: drop-shadow(0 3px 2px #66552d20);
}
.campaign-deck-rank {
  position: absolute;
  top: -2px;
  left: 0;
  color: #78836d;
  font:
    800 8px/1 'Nunito',
    sans-serif;
  z-index: 1;
  text-shadow: 0 1px 2px #fff5dc;
}
.campaign-deck-rank b {
  font:
    15px/1 'Lilita One',
    sans-serif;
  color: #295c64;
}
.campaign-deck-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.campaign-deck-stats span {
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  color: #305a62;
  font:
    900 12px/1 'Nunito',
    sans-serif;
}
.campaign-deck-stats img {
  width: 16px;
  height: 17px;
  object-fit: contain;
}
.campaign-deck-range {
  display: block;
  font:
    800 10px/1.3 'Nunito',
    sans-serif;
  color: #817253;
  white-space: nowrap;
  margin-top: 3px;
}
.campaign-deck-name {
  font:
    12px/1.1 'Lilita One',
    sans-serif;
  color: #315862;
  text-align: center;
  margin-top: 2px;
}
.campaign-deck-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  color: #c0b393;
}
.campaign-deck-empty > span {
  font:
    24px/1 'Nunito',
    sans-serif;
}
.campaign-deck-empty small {
  font:
    800 9px/1 'Nunito',
    sans-serif;
}
@media (max-width: 700px) {
  .route-viewport.horizontal-campaign {
    grid-template-rows: 218px 38px minmax(0, 580px);
  }
  .campaign-deck {
    padding: 10px 10px 4px;
  }
  .campaign-deck-grid {
    gap: 10px 7px;
  }
  .campaign-deck-heading {
    margin-bottom: 8px;
  }
  .campaign-deck-heading > span {
    font-size: 9px;
  }
  .campaign-deck-body {
    gap: 1px;
  }
  .campaign-deck-stats {
    gap: 6px;
  }
  .campaign-deck-stats span {
    gap: 1px;
    font-size: 9px;
  }
  .campaign-deck-stats img {
    width: 11px;
    height: 12px;
  }
  .campaign-deck-rank {
    font-size: 6px;
    top: 0;
  }
  .campaign-deck-rank b {
    font-size: 11px;
  }
  .campaign-deck-range {
    font-size: 8px;
  }
  .campaign-deck-name {
    font-size: 9px;
  }
}
@media (max-width: 420px) {
  .campaign-deck {
    padding-inline: 7px;
  }
  .campaign-deck-grid {
    column-gap: 4px;
  }
  .campaign-deck-stats span {
    font-size: 8px;
  }
  .campaign-deck-stats img {
    width: 9px;
    height: 10px;
  }
  .campaign-deck-range {
    font-size: 7px;
  }
  .campaign-deck-name {
    font-size: 8px;
  }
}

/* Deck entries are open silhouettes with real keyboard/touch actions. */
.campaign-deck-inspect,
.campaign-deck-empty > button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  color: inherit;
  text-align: center;
  cursor: pointer;
}
.campaign-deck-inspect:hover,
.campaign-deck-empty > button:hover {
  background: radial-gradient(ellipse, #ffe6a345, transparent 72%);
  transform: none;
  filter: none;
}
.campaign-deck-inspect:focus-visible,
.campaign-deck-empty > button:focus-visible {
  outline: 2px solid #398491;
  outline-offset: 3px;
}
.campaign-deck-empty > button > span {
  font:
    28px/1 'Nunito',
    sans-serif;
  color: #8f855f;
}
.campaign-deck-empty > button > small {
  font:
    800 10px/1.3 'Nunito',
    sans-serif;
  color: #8f855f;
}
.deck-upgrade-badge {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: clamp(17px, 2.3vw, 25px);
  aspect-ratio: 1;
  border: 2px solid #fff1cc;
  border-radius: 50%;
  background: linear-gradient(#ff6759, #ce2331);
  box-shadow:
    0 2px 0 #8b2733,
    0 0 9px #e6444140;
  pointer-events: none;
}
.deck-upgrade-badge svg {
  width: 70%;
  height: 70%;
  fill: #fff;
  filter: drop-shadow(0 1px 0 #9e2539);
}
.campaign-deck-heading > span,
.horizontal-campaign #route-region {
  font:
    26px/1.1 'Lilita One',
    sans-serif;
  text-transform: none;
  letter-spacing: 0.1px;
  color: #265562;
  text-shadow:
    0 2px 0 #fff9e8,
    0 3px 0 #cbb786;
}
.campaign-deck-heading > span::after {
  content: '';
  display: block;
  width: 42px;
  height: 3px;
  margin-top: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, #d6a641, #f2d788);
}
.campaign-deck-heading button {
  min-height: 34px;
  padding: 5px 14px;
  border: 1px solid #fff9e9;
  border-radius: 12px;
  background: linear-gradient(#fffaf0, #f2e5c4);
  color: #39616a;
  box-shadow:
    0 3px 0 #bfaa7b,
    0 5px 8px #80643018;
  font:
    16px/1 'Lilita One',
    sans-serif;
}
.campaign-deck-heading button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #bfaa7b;
}
@media (max-width: 700px) {
  .campaign-deck-heading > span,
  .horizontal-campaign #route-region {
    font-size: 20px;
  }
  .campaign-deck-heading button {
    font-size: 14px;
    padding: 5px 10px;
  }
  .campaign-deck-empty > button > small {
    font-size: 8px;
  }
  .deck-upgrade-badge {
    border-width: 1px;
  }
}
@media (max-width: 400px) {
  .horizontal-campaign #route-region {
    font-size: 18px;
    max-width: 135px;
  }
  .campaign-deck-heading > span {
    font-size: 19px;
  }
}

/* One continuous canvas, including the space behind both navigation bars. */
.shell:has(#campaign-view.horizontal-campaign-page:not([hidden])),
.shell:has(#level-transition:not([hidden]) .horizontal-campaign-result) {
  background: #f4edda radial-gradient(circle, #c9b78d88 0.85px, transparent 1px) 0 0 / 15px 15px;
}
.shell:has(#campaign-view.horizontal-campaign-page:not([hidden])) > .topbar,
.shell:has(#campaign-view.horizontal-campaign-page:not([hidden])) > .game-nav,
.shell:has(#level-transition:not([hidden]) .horizontal-campaign-result) > .topbar,
.shell:has(#level-transition:not([hidden]) .horizontal-campaign-result) > .game-nav {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.campaign-deck-heading button {
  background: linear-gradient(#396b76, #234e5b);
  color: #fff3d2;
  border-color: #71929a;
  box-shadow:
    0 3px 0 #153a47,
    inset 0 1px 0 #bce2e533;
  text-shadow: 0 1px 1px #122d3a;
}
.campaign-deck-heading button:active {
  box-shadow: 0 1px 0 #153a47;
}
/* Keep the dot grid aligned across separate page and navigation surfaces. */
.shell:has(#campaign-view.horizontal-campaign-page:not([hidden])),
.shell:has(#level-transition:not([hidden]) .horizontal-campaign-result),
#campaign-view.horizontal-campaign-page,
#level-transition .horizontal-campaign-result,
.horizontal-campaign {
  background-attachment: fixed;
}
.horizontal-offer.return-offer-pending {
  opacity: 0;
  pointer-events: none;
}

/* Academy upgrades sit directly beneath their milestone, without a visit action. */
#campaign-grid .horizontal-stop[data-academy-stop] .horizontal-offers {
  grid-row: 2 / 4;
  align-self: start;
}

/* Compact route: the deck and the current milestone share one usable screen. */
.route-viewport.horizontal-campaign {
  --node-size: 58px;
  --offer-width: 218px;
  grid-template-rows: clamp(186px, 24vh, 230px) 42px minmax(290px, 1fr);
}
.horizontal-campaign .horizontal-stops {
  min-height: 0;
  height: 100%;
}
#campaign-grid .horizontal-stop {
  grid-template-rows: 126px 64px minmax(124px, 1fr) 80px;
  padding-inline: 16px;
}
.horizontal-milestone {
  padding: 4px 0;
  gap: 3px;
}
.horizontal-milestone .horizontal-name {
  margin-top: 2px;
  font-size: 18px;
}
.horizontal-milestone .route-star-awards {
  margin-top: 0;
}
.horizontal-node-track {
  --node-clearance: calc(var(--node-size) / 2 + 10px);
}
.horizontal-milestone .route-star-awards img {
  width: 25px;
  height: 25px;
}
.horizontal-level-number {
  font-size: 32px;
}
.route-level-summary {
  gap: 5px;
  padding: 0;
}
.route-level-loot {
  height: 27px;
}
.route-level-loot .route-bounty-gem {
  width: 27px;
  height: 30px;
  flex-basis: 27px;
}
.route-level-loot strong {
  font-size: 21px;
}
.route-level-loot em {
  font-size: 14px;
}
.route-level-summary .route-play-button {
  min-height: 34px;
  min-width: 130px;
}
.horizontal-offers {
  padding-block: 12px 5px;
  gap: 12px;
}
.route-level-pack {
  height: 52px;
  margin-bottom: 3px;
  padding: 5px 8px;
}
.route-level-pack button {
  min-height: 38px;
}
.campaign-deck {
  padding-block: 6px 3px;
}
.campaign-deck-grid {
  gap: 5px 12px;
}
@media (max-height: 700px) and (orientation: portrait) {
  .route-viewport.horizontal-campaign {
    grid-template-rows: 170px 28px minmax(0, 1fr);
    --node-size: 46px;
  }
  #campaign-grid .horizontal-stop {
    grid-template-rows: 94px 64px minmax(120px, 1fr) 55px;
  }
  .horizontal-milestone .horizontal-name {
    font-size: 16px;
  }
  .horizontal-level-number {
    font-size: 27px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  .route-viewport.horizontal-campaign {
    grid-template-rows: 100px 28px minmax(280px, 1fr);
    --node-size: 44px;
  }
  #campaign-grid .horizontal-stop {
    grid-template-rows: 94px 64px 124px 55px;
  }
}
@media (max-height: 700px) and (orientation: portrait) {
  #campaign-grid .horizontal-stop {
    grid-template-rows: 100px 54px minmax(116px, 1fr) 74px;
  }
  .horizontal-milestone .route-star-awards {
    height: 24px;
  }
  .route-level-pack {
    height: 46px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  .route-viewport.horizontal-campaign {
    display: grid;
    overflow: hidden;
    grid-template-columns: 280px minmax(0, 1fr);
    grid-template-rows: 28px minmax(0, 1fr);
  }
  .horizontal-campaign .campaign-deck {
    grid-column: 1;
    grid-row: 1 / 3;
    height: auto;
    min-height: 0;
    padding: 8px;
  }
  .horizontal-campaign .campaign-deck-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  #campaign-view .horizontal-campaign .route-heading,
  .horizontal-campaign-result .horizontal-campaign .route-heading,
  #campaign-view .horizontal-campaign .map-return,
  .horizontal-campaign-result .horizontal-campaign .map-return {
    grid-column: 2;
    grid-row: 1;
  }
  .horizontal-campaign #campaign-grid {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
    height: 100%;
    zoom: 0.62;
  }
  .horizontal-campaign .horizontal-stops {
    min-height: 0;
    height: 100%;
  }
  #campaign-grid .horizontal-stop {
    grid-template-rows: 100px 54px minmax(116px, 1fr) 74px;
  }
  .horizontal-campaign .campaign-deck-heading {
    margin-bottom: 4px;
    gap: 4px;
  }
  .horizontal-campaign .campaign-deck-heading > span {
    font-size: 15px;
  }
}

/* Keep the six-by-two deck readable while the route scales for short viewports. */
.campaign-deck-grid {
  column-gap: 4px;
}
@media (max-height: 700px) and (orientation: portrait) {
  .horizontal-campaign #campaign-grid {
    zoom: 0.71;
  }
  .campaign-deck-heading {
    margin-bottom: 5px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  .horizontal-campaign .campaign-deck {
    justify-content: flex-start;
    padding-top: 14px;
  }
  .horizontal-campaign .campaign-deck-grid {
    flex: none;
    height: 170px;
    margin-top: 12px;
  }
  .horizontal-campaign .campaign-deck-heading button {
    font-size: 12px;
    padding: 5px 8px;
  }
  .horizontal-campaign .campaign-deck-body {
    gap: 1px;
  }
  .horizontal-campaign .campaign-deck-stats {
    gap: 5px;
  }
  .horizontal-campaign .campaign-deck-stats span {
    font-size: 8px;
    gap: 1px;
  }
  .horizontal-campaign .campaign-deck-stats img {
    width: 9px;
    height: 10px;
  }
  .horizontal-campaign .campaign-deck-name {
    font-size: 8px;
  }
  .horizontal-campaign .campaign-deck-range {
    font-size: 6px;
  }
  .horizontal-campaign .campaign-deck-rank {
    font-size: 6px;
  }
  .horizontal-campaign .campaign-deck-rank b {
    font-size: 10px;
  }
  .horizontal-campaign .campaign-deck-empty > button > small {
    font-size: 7px;
  }
  .horizontal-campaign .route-pan {
    display: none;
  }
}

/* Milestones sit clear of the route toolbar; star cells share one baseline and pitch. */
.horizontal-campaign #campaign-grid {
  padding-top: 18px;
  box-sizing: border-box;
}
.horizontal-milestone .route-star-awards {
  display: grid;
  grid-template-columns: repeat(3, 30px);
  gap: 5px;
  height: 32px;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
}
.horizontal-milestone .route-award-star,
.horizontal-milestone .route-award-star:nth-child(2) {
  width: 30px;
  height: 30px;
}
.horizontal-milestone .route-star-awards .route-award-star > img {
  width: 100%;
  height: 100%;
}
/* A compact supply chest: crystal artwork, one clear amount, and a separate price/action. */
.horizontal-stop .route-level-pack {
  position: relative;
  isolation: isolate;
  height: 70px;
  margin: 0 0 6px;
  padding: 8px 8px 8px 58px;
  gap: 6px;
  border: 1px solid #79acb4;
  border-top-color: #b5e5e7;
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 0 0, #4d8f9d99, transparent 75%),
    linear-gradient(130deg, #244f60, #17384c);
  box-shadow:
    inset 0 1px 0 #e2feff44,
    0 4px 0 #102e3b,
    0 7px 10px #4e4c3320;
}
.horizontal-stop .route-level-pack .route-pack-crystals {
  position: absolute;
  left: 4px;
  top: 7px;
  width: 50px;
  height: 52px;
  filter: drop-shadow(0 0 9px #7ef1ff55);
}
.horizontal-stop .route-pack-crystals img {
  width: 31px;
  height: 39px;
}
.horizontal-stop .route-pack-crystals img:nth-child(2) {
  left: 21px;
  top: 0;
}
.horizontal-stop .route-pack-crystals img:nth-child(3) {
  left: 11px;
  top: 17px;
}
.horizontal-stop .route-pack-copy {
  min-width: 0;
}
.horizontal-stop .route-pack-copy small {
  color: #b6d8dc;
  font-size: 7px;
  letter-spacing: 1.1px;
  white-space: nowrap;
}
.horizontal-stop .route-pack-copy strong {
  color: #b7f7ff;
  font-size: 30px;
  line-height: 1.1;
  text-shadow: 0 2px 0 #0c3347;
}
.horizontal-stop .route-pack-copy em {
  display: block;
  color: #edf5e5;
  font:
    800 10px/1 'Nunito',
    sans-serif;
  letter-spacing: 0.3px;
}
.horizontal-stop .route-level-pack button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 88px;
  gap: 3px;
  min-height: 50px;
  padding: 5px 7px;
  border: 1px solid #e4fff7;
  border-radius: 11px;
  background: linear-gradient(#f3fff6, #c3e5df);
  box-shadow:
    inset 0 1px 0 #fff,
    0 3px 0 #8ab8b3;
  color: #214b59;
}
.route-pack-price {
  font:
    23px/1 'Lilita One',
    sans-serif;
  white-space: nowrap;
}
.route-pack-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font:
    900 9px/1 'Nunito',
    sans-serif;
  white-space: nowrap;
}
.route-pack-action i {
  font:
    normal 20px/0.5 'Nunito',
    sans-serif;
}
.horizontal-stop .route-level-pack.pack-inactive {
  opacity: 0.42;
  border-color: #c0b594;
  background: linear-gradient(#f9f1dc, #eee2c3);
  box-shadow:
    inset 0 1px 0 #fff9e8,
    0 2px 0 #cbbd9c;
}
.horizontal-stop .pack-inactive .route-pack-copy small,
.horizontal-stop .pack-inactive .route-pack-copy strong,
.horizontal-stop .pack-inactive .route-pack-copy em {
  color: #6c796d;
  text-shadow: none;
}
.horizontal-stop .pack-inactive .route-pack-crystals {
  filter: none;
}
.horizontal-stop .route-level-pack.pack-inactive button {
  background: none;
  border-color: transparent;
  box-shadow: none;
  color: #687867;
}
@media (max-height: 700px) and (orientation: portrait),
  (max-height: 500px) and (orientation: landscape) {
  .horizontal-campaign #campaign-grid {
    padding-top: 20px;
  }
  .horizontal-milestone .route-star-awards {
    grid-template-columns: repeat(3, 26px);
    height: 28px;
    flex-basis: 28px;
    gap: 5px;
  }
  .horizontal-milestone .route-award-star,
  .horizontal-milestone .route-award-star:nth-child(2) {
    width: 26px;
    height: 26px;
  }
  .horizontal-offer {
    height: 106px;
  }
}

/* Keep offer artwork clear of the Play action above and the price action below. */
.horizontal-offer .horizontal-card-art {
  height: 66px;
  margin-top: 0;
}
@media (max-height: 700px) and (orientation: portrait),
  (max-height: 500px) and (orientation: landscape) {
  .horizontal-offer {
    grid-template-columns: 52px minmax(0, 1fr);
  }
  .horizontal-offer .horizontal-card-art {
    width: 52px;
    height: 48px;
    margin-top: 0;
  }
}

/* One rhythm for the entire milestone stack; spare height stays below the stack. */
#campaign-grid .horizontal-stop {
  grid-template-rows: 114px 72px 128px 70px;
  row-gap: 12px;
  align-content: start;
}
.horizontal-milestone {
  padding: 0;
  gap: 2px;
}
.horizontal-milestone .horizontal-name {
  margin-top: 6px;
  flex-shrink: 0;
}
.horizontal-milestone .route-star-awards {
  height: 30px;
  flex-basis: 30px;
}
.route-level-summary {
  gap: 8px;
  padding: 0;
}
.horizontal-offers {
  height: 128px;
  min-height: 0;
  padding: 0;
  align-items: flex-start;
  align-self: start;
}
.horizontal-stop .route-level-pack {
  height: 70px;
  margin: 0;
  align-self: start;
}
#campaign-grid .horizontal-stop[data-academy-stop] .horizontal-offers {
  height: auto;
  padding: 0;
}
@media (min-height: 701px) {
  .route-viewport.horizontal-campaign {
    grid-template-rows: clamp(174px, 21vh, 204px) 42px minmax(290px, 1fr);
  }
}
@media (max-height: 700px) and (orientation: portrait) {
  .horizontal-campaign #campaign-grid {
    zoom: 0.64;
  }
  #campaign-grid .horizontal-stop {
    grid-template-rows: 98px 72px 106px 70px;
    row-gap: 12px;
  }
  .horizontal-offers {
    height: 106px;
  }
  .horizontal-milestone .route-star-awards {
    height: 28px;
    flex-basis: 28px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  .horizontal-campaign #campaign-grid {
    zoom: 0.62;
  }
  #campaign-grid .horizontal-stop {
    grid-template-rows: 96px 64px 88px 70px;
    row-gap: 8px;
  }
  .horizontal-offers,
  .horizontal-offer {
    height: 88px;
  }
  .horizontal-offer .horizontal-card-art {
    height: 40px;
  }
  .route-level-summary {
    gap: 4px;
  }
  .horizontal-milestone .route-star-awards {
    height: 28px;
    flex-basis: 28px;
  }
}

/* Keep rank above the face; its color reflects this troop's full training ceiling. */
.horizontal-campaign .campaign-deck-body {
  padding-top: 7px;
  box-sizing: border-box;
}
.horizontal-campaign .campaign-deck-rank {
  top: -8px;
  left: -4px;
  color: var(--rank-color, #2669a0);
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 1px #fff8e8;
}
.horizontal-campaign .campaign-deck-rank b {
  color: var(--rank-color, #2669a0);
  background: linear-gradient(110deg, var(--rank-color) 38%, #fffbe5 49%, var(--rank-color) 60%);
  background-size: 300% 100%;
  background-position: 100% 0;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 1px 0 #fff6d9);
  animation: deck-rank-glint 7s ease-in-out infinite;
  animation-delay: var(--rank-delay, 0s);
}
@keyframes deck-rank-glint {
  0%,
  77% {
    background-position: 100% 0;
    filter: drop-shadow(0 1px 0 #fff6d9);
  }
  85% {
    filter: drop-shadow(0 0 3px #ffeab5);
  }
  94%,
  100% {
    background-position: 0% 0;
    filter: drop-shadow(0 1px 0 #fff6d9);
  }
}
.horizontal-campaign .campaign-deck-range {
  font-size: 11px;
}
.horizontal-campaign .campaign-deck-name {
  font-size: 14px;
  max-width: 100%;
  overflow-wrap: anywhere;
}
@media (max-width: 700px) {
  .horizontal-campaign .campaign-deck-range {
    font-size: 9px;
  }
  .horizontal-campaign .campaign-deck-name {
    font-size: 11px;
  }
}
@media (max-width: 420px), (max-height: 500px) and (orientation: landscape) {
  .horizontal-campaign .campaign-deck-range {
    font-size: 8px;
  }
  .horizontal-campaign .campaign-deck-name {
    font-size: 10px;
  }
  .horizontal-campaign .campaign-deck-rank {
    left: -2px;
    top: -7px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .horizontal-campaign .campaign-deck-rank b {
    animation: none;
  }
}
/* Reserve room for healing as a third stat and larger two-line troop names. */
@media (min-height: 501px) {
  .route-viewport.horizontal-campaign {
    grid-template-rows: clamp(210px, 26vh, 254px) 42px minmax(290px, 1fr);
  }
}
@media (max-height: 700px) and (orientation: portrait) {
  .route-viewport.horizontal-campaign {
    grid-template-rows: 194px 28px minmax(0, 1fr);
  }
}
.horizontal-campaign .campaign-deck-body {
  grid-template-rows: minmax(0, 1fr);
}
.horizontal-campaign .campaign-deck-stats {
  gap: 2px;
}
@media (max-width: 700px) {
  .horizontal-campaign .campaign-deck-stats img {
    height: 10px;
  }
}
.horizontal-campaign .campaign-deck-range {
  max-width: 100%;
  white-space: normal;
  line-height: 1.15;
}
.horizontal-campaign .campaign-deck-stats img {
  height: 12px;
}
@media (max-width: 700px), (max-height: 500px) and (orientation: landscape) {
  .horizontal-campaign .campaign-deck-stats img {
    height: 10px;
  }
}