/* Age 1 reward flow -------------------------------------------------------
   The post-battle loot and evolution states use the same bright camp,
   parchment and timber language as the refreshed home and daily-supply UI.
   Normal victory/defeat screens keep their existing presentation. */
.modal-overlay.is-evolution-presentation {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100cqh !important;
  padding: 0 !important;
  align-items: stretch !important;
  overflow: hidden !important;
  background: var(--bo-presentation-overlay-bg, #193617) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.modal-overlay.is-evolution-presentation .battle-outcome-card {
  --bo-camp-ink: #4f2b14;
  --bo-camp-ink-deep: #2c160a;
  --bo-camp-gold: #f4c655;
  --bo-camp-cream: #ffedb3;
  --bo-camp-green: #3d762d;
  --bo-camp-green-deep: #1f4c27;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: min(100%, 480px) !important;
  max-width: 480px !important;
  height: 100cqh !important;
  max-height: 100cqh !important;
  margin: 0 auto !important;
  padding: var(--bo-presentation-card-padding,
    max(14px, var(--okey-safe-top))
    14px
    max(12px, var(--okey-safe-bottom))) !important;
  gap: var(--bo-presentation-card-gap, 9px) !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: var(--bo-presentation-bg-color, #83c642) !important;
  background-image: var(--bo-presentation-bg-image,
    linear-gradient(180deg, rgba(255, 247, 188, 0.04) 0%, rgba(255, 247, 188, 0.02) 42%, rgba(48, 29, 11, 0.38) 100%),
    url(../assets/daily-checkin/camp-bg-mobile-v2.webp?v=2)) !important;
  background-position: var(--bo-presentation-bg-position, center top) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  box-shadow: 0 0 44px rgba(22, 15, 7, 0.76) !important;
  color: var(--bo-camp-ink);
  image-rendering: pixelated;
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

.modal-overlay.is-evolution-presentation .battle-outcome-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(49, 27, 9, 0.18), transparent 13%, transparent 87%, rgba(49, 27, 9, 0.18)),
    linear-gradient(180deg, transparent 0 54%, rgba(255, 224, 137, 0.06) 70%, rgba(43, 23, 8, 0.32) 100%);
}

.modal-overlay.is-evolution-presentation .battle-outcome-card > .battle-outcome-close {
  position: absolute !important;
  z-index: 20 !important;
  top: var(--bo-close-top, max(14px, var(--okey-safe-top))) !important;
  right: var(--bo-close-right, 14px) !important;
  inset-inline-end: var(--bo-close-right, 14px) !important;
  width: var(--bo-close-width, 46px) !important;
  height: var(--bo-close-height, 46px) !important;
  min-width: var(--bo-close-width, 46px) !important;
  min-height: var(--bo-close-height, 46px) !important;
  padding: var(--bo-close-padding, 0) !important;
  border: var(--bo-close-border, 3px solid #f5d171) !important;
  border-radius: var(--bo-close-border-radius, 5px) !important;
  background: var(--bo-close-background, linear-gradient(180deg, #76502d 0%, #4b2d19 52%, #2a170d 100%)) !important;
  box-shadow: var(--bo-close-box-shadow,
    inset 0 0 0 2px #1b100a,
    inset 0 3px rgba(255, 234, 158, 0.2),
    0 4px 0 #2c160a,
    0 7px 12px rgba(51, 25, 8, 0.42)) !important;
  color: var(--bo-close-color, #fff0ae) !important;
  font-size: var(--bo-close-font-size, 1.35rem) !important;
  line-height: 1 !important;
  text-shadow: var(--bo-close-text-shadow, 0 2px #2a1509) !important;
}

.modal-overlay.is-evolution-presentation .battle-outcome-card > .battle-outcome-close:focus-visible {
  outline: 3px solid #fff8cf;
  outline-offset: 3px;
}

.modal-overlay.is-evolution-presentation .battle-outcome-card > h2 {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  min-height: 92px;
  margin: 0 56px 0 0;
  padding: 11px 14px 11px 72px;
  align-items: center;
  justify-content: flex-start;
  border: 3px solid #673211;
  border-radius: 5px;
  background:
    repeating-linear-gradient(90deg, rgba(124, 69, 25, 0.08) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, #ffe9ad 0%, #f7ce7c 58%, #dda052 100%);
  box-shadow:
    inset 0 0 0 2px #fff0bd,
    inset 0 -7px rgba(132, 67, 20, 0.13),
    0 5px 0 #4c260f,
    0 9px 18px rgba(72, 39, 13, 0.32);
  color: var(--bo-presentation-title-color, #6a2f10) !important;
  font-size: clamp(1.15rem, 5.5cqw, 1.62rem);
  line-height: 1.08;
  text-align: left;
  text-shadow: var(--bo-presentation-title-shadow, 0 2px #fff0b4) !important;
}

.modal-overlay.is-evolution-presentation .battle-outcome-card > h2::before {
  position: absolute;
  left: 13px;
  width: 48px;
  height: 48px;
  margin: 0;
  background: var(--bo-art-trophy) center / contain no-repeat;
  filter: drop-shadow(0 3px 0 rgba(90, 42, 10, 0.34));
}

.modal-overlay.is-evolution-presentation .battle-outcome-body {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  margin: 0;
  padding: 3px 2px 5px;
  gap: 9px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(99, 53, 19, 0.72) transparent;
  scrollbar-width: thin;
  color: var(--bo-camp-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
  touch-action: pan-y;
}

.modal-overlay.is-evolution-presentation .battle-outcome-body::-webkit-scrollbar {
  display: block;
  width: 4px;
}

.modal-overlay.is-evolution-presentation .battle-outcome-body::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgba(99, 53, 19, 0.72);
}

.modal-overlay.is-evolution-presentation .battle-outcome-body::before,
.modal-overlay.is-evolution-presentation .battle-outcome-body::after {
  display: none !important;
  content: none !important;
}

.modal-overlay.is-evolution-presentation .battle-outcome-body > * {
  position: relative;
  z-index: 1;
}

.modal-overlay:is(.is-loot-presentation, .is-evolution-presentation) #battle-outcome-actions {
  position: var(--bo-actions-position, relative);
  z-index: var(--bo-actions-z-index, 5);
  flex: var(--bo-actions-flex, 0 0 auto);
  display: grid;
  grid-template-columns: var(--bo-actions-columns, minmax(0, 0.86fr) minmax(0, 1.14fr));
  gap: var(--bo-actions-gap, 8px);
  width: var(--bo-actions-width, 100%);
  margin: var(--bo-actions-margin, 0);
  padding: var(--bo-actions-padding, 0);
}

.modal-overlay.is-evolution-presentation #battle-outcome-actions .modal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100% !important;
  min-width: 0 !important;
  min-height: var(--bo-action-min-height, 56px) !important;
  margin: 0 !important;
  padding: var(--bo-action-padding, 9px 10px) !important;
  border: var(--bo-action-border, 3px solid #6a3512) !important;
  border-radius: var(--bo-action-border-radius, 6px) !important;
  color: var(--bo-action-color, #fff0b2) !important;
  font-size: var(--bo-action-font-size, clamp(0.68rem, 3cqw, 0.86rem)) !important;
  line-height: 1.05 !important;
  text-shadow: var(--bo-action-text-shadow, 0 2px #2c160a) !important;
  box-shadow: var(--bo-action-box-shadow,
    inset 0 0 0 2px rgba(255, 229, 139, 0.38),
    inset 0 4px rgba(255, 239, 177, 0.16),
    0 5px 0 #3c1d0b,
    0 9px 14px rgba(53, 28, 9, 0.3)) !important;
}

.modal-overlay.is-loot-presentation .bo-loot-claim-btn > span:last-child {
  white-space: nowrap;
}

.modal-overlay:is(.is-loot-presentation, .is-evolution-presentation) #battle-outcome-actions .battle-share-btn {
  background: var(--bo-share-button-background, linear-gradient(180deg, #76502d 0%, #4b2d19 58%, #2a170d 100%)) !important;
}

.modal-overlay.is-evolution-presentation #battle-outcome-actions :is(.bo-loot-claim-btn, .battle-next-btn) {
  overflow: hidden;
  border-color: var(--bo-primary-button-border-color, #7f4a13) !important;
  background: var(--bo-primary-button-background,
    linear-gradient(90deg, rgba(255, 255, 208, 0.25), transparent 14%, transparent 86%, rgba(255, 255, 208, 0.25)),
    linear-gradient(180deg, #fff58f 0%, #ffd33e 34%, #e99a15 72%, #9e4a09 100%)) !important;
  color: var(--bo-primary-button-color, #4d240b) !important;
  text-shadow: var(--bo-primary-button-text-shadow, 0 1px rgba(255, 246, 183, 0.72)) !important;
  animation: var(--bo-primary-button-animation, boCampRewardButtonPulse 1.35s ease-in-out infinite alternate);
}

.modal-overlay.is-evolution-presentation #battle-outcome-actions .battle-next-btn::before,
.modal-overlay.is-evolution-presentation #battle-outcome-actions .battle-next-btn::after {
  display: none !important;
  content: none !important;
}

.modal-overlay.is-evolution-presentation #battle-outcome-actions .battle-next-btn > * {
  position: relative;
  z-index: 1;
}

.modal-overlay.is-evolution-presentation .modal-actions .bo-map-icon {
  display: block;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  background: var(--bo-art-map) center / contain no-repeat;
  filter: drop-shadow(0 2px 0 rgba(83, 37, 8, 0.35));
}

/* Loot presentation */
.modal-overlay.is-loot-presentation .battle-outcome-body {
  flex-direction: column;
}

.modal-overlay.is-loot-presentation .bo-clear-line {
  align-self: center;
  margin: 0;
  padding: 6px 13px;
  border: 2px solid #e2b750;
  border-radius: 4px;
  background: linear-gradient(180deg, #4f8e2e, #356725);
  box-shadow: inset 0 0 0 1px rgba(255, 244, 173, 0.22), 0 3px 0 #274713;
  color: #fff4bd;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  line-height: 1;
  text-shadow: 0 1px #234418;
  text-transform: uppercase;
}

.modal-overlay.is-loot-presentation .bo-loot-choice {
  display: grid;
  grid-template-areas:
    "art kicker"
    "art title"
    "art description";
  grid-template-columns: 126px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  align-items: center;
  justify-items: start;
  gap: 4px 13px;
  min-width: 0;
  margin: 0;
  padding: 14px 14px 14px 10px;
  overflow: hidden;
  border: 3px solid #6b3410;
  border-radius: 5px;
  background:
    radial-gradient(circle at 16% 42%, rgba(255, 243, 151, 0.5), transparent 29%),
    repeating-linear-gradient(90deg, rgba(118, 58, 12, 0.05) 0 1px, transparent 1px 15px),
    linear-gradient(180deg, #ffe9aa 0%, #edc16d 64%, #d79843 100%);
  box-shadow:
    inset 0 0 0 2px #fff0bd,
    inset 0 -8px rgba(118, 58, 12, 0.12),
    0 5px 0 #4b240d,
    0 10px 16px rgba(60, 33, 11, 0.28);
  text-align: left;
}

.modal-overlay.is-loot-presentation .bo-loot-choice::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(107, 52, 16, 0.42);
  pointer-events: none;
}

.modal-overlay.is-loot-presentation .bo-loot-kicker {
  grid-area: kicker;
  display: inline-flex;
  width: fit-content;
  padding: 4px 8px;
  border: 2px solid #365b20;
  border-radius: 3px;
  background: linear-gradient(180deg, #7fc443, #4f8e2e);
  color: #fff7c8;
  font-size: 0.57rem;
  letter-spacing: 0.13em;
  line-height: 1;
  text-shadow: 0 1px #2d541d;
}

.modal-overlay.is-loot-presentation .bo-loot-item {
  grid-area: art;
  width: 120px;
  height: 120px;
  align-self: center;
  border: 3px solid #7b471a;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 42%, #fff6ae 0 9%, rgba(255, 221, 91, 0.78) 28%, rgba(89, 169, 194, 0.66) 62%, #327d83 100%);
  box-shadow: inset 0 0 0 2px #f9dd85, 0 4px 0 #4c260d;
}

.modal-overlay.is-loot-presentation .bo-loot-item::before {
  inset: 9%;
  background: radial-gradient(circle, rgba(255, 251, 193, 0.92) 0 12%, rgba(255, 198, 44, 0.34) 44%, transparent 72%);
}

.modal-overlay.is-loot-presentation .bo-loot-item::after {
  inset: 11%;
  border-width: 2px;
  border-color: rgba(255, 241, 142, 0.82);
}

.modal-overlay.is-loot-presentation .bo-loot-rays {
  inset: -10%;
}

.modal-overlay.is-loot-presentation .bo-loot-art,
.modal-overlay.is-loot-presentation .bo-loot-icon .sa-formal-item-icon {
  width: 92px;
  height: 92px;
  filter: drop-shadow(0 5px 0 rgba(77, 38, 10, 0.48)) drop-shadow(0 0 6px #fff4a5);
}

.modal-overlay.is-loot-presentation .bo-loot-choice h3 {
  grid-area: title;
  min-width: 0;
  margin: 0;
  color: #6a2f10;
  font-size: clamp(1.08rem, 5cqw, 1.45rem);
  line-height: 1.08;
  overflow-wrap: anywhere;
  text-shadow: 0 2px #fff0b4;
}

.modal-overlay.is-loot-presentation .bo-loot-choice p {
  grid-area: description;
  min-width: 0;
  max-width: none;
  margin: 2px 0 0;
  color: #5f3a1c;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.38;
  overflow-wrap: anywhere;
}

.modal-overlay.is-loot-presentation .bo-reward-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 8px;
  margin: 0;
  padding: 9px 12px 10px;
  border: 3px solid #62300f;
  border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(255, 235, 142, 0.08), transparent 18%, transparent 82%, rgba(255, 235, 142, 0.08)),
    linear-gradient(180deg, #3b6f31, #214b2a);
  box-shadow: inset 0 0 0 2px #d0a647, 0 4px 0 #3e1e0a;
}

.modal-overlay.is-loot-presentation .bo-reward-label {
  color: #ffe8a0;
  font-size: 0.59rem;
  text-shadow: 0 1px #183518;
}

.modal-overlay.is-loot-presentation .bo-reward-label::before,
.modal-overlay.is-loot-presentation .bo-reward-label::after {
  background: linear-gradient(90deg, transparent, rgba(255, 224, 128, 0.66));
}

.modal-overlay.is-loot-presentation .bo-reward-item {
  color: #fff0b0;
  font-size: 0.7rem;
  text-shadow: 0 1px #183518;
}

.modal-overlay.is-loot-presentation .bo-reward-icon {
  flex-basis: 28px;
  width: 28px;
  height: 28px;
}

.modal-overlay.is-loot-presentation .bo-progression-summary {
  gap: 7px;
  margin: 0;
  padding: 10px;
  border: 3px solid #6b3410;
  border-radius: 5px;
  background:
    repeating-linear-gradient(90deg, rgba(118, 58, 12, 0.045) 0 1px, transparent 1px 16px),
    linear-gradient(180deg, #ffe7a4, #e8b95f);
  box-shadow: inset 0 0 0 2px #fff0bd, 0 4px 0 #4b240d;
  color: var(--bo-camp-ink);
}

.modal-overlay.is-loot-presentation .bo-progression-heading {
  padding-bottom: 6px;
  border-color: rgba(99, 52, 14, 0.3);
}

.modal-overlay.is-loot-presentation .bo-progression-heading span {
  color: #6b3513;
  font-size: 0.61rem;
}

.modal-overlay.is-loot-presentation .bo-progression-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.modal-overlay.is-loot-presentation .bo-progression-list > * {
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid rgba(55, 104, 46, 0.76);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(79, 142, 46, 0.94), rgba(49, 105, 42, 0.96));
  color: #fff4c6;
  font-size: 0.63rem;
  line-height: 1.28;
  overflow-wrap: anywhere;
  text-shadow: 0 1px #264c20;
}

.modal-overlay.is-loot-presentation .bo-progression-list > strong,
.modal-overlay.is-loot-presentation .bo-progression-list > em {
  grid-column: 1 / -1;
}

/* Evolution presentation */
.modal-overlay.is-evolution-presentation {
  --bo-presentation-overlay-bg: #071b1d;
}

.modal-overlay.is-evolution-presentation .battle-outcome-card {
  --bo-evolution-gold: rgb(255, 214, 106);
  --bo-evolution-gold-deep: #9a4e16;
  --bo-evolution-teal: #42d7c2;
  --bo-evolution-ink: rgb(248, 237, 197);
  --bo-evolution-duration: 2.4s;
  --bo-evolution-copy-delay: 1.82s;
  --bo-presentation-bg-color: #102c26;
  --bo-presentation-bg-image:
    linear-gradient(180deg, rgba(4, 19, 22, 0.42), rgba(5, 17, 17, 0.2) 42%, rgba(22, 12, 7, 0.78)),
    url(../assets/daily-checkin/camp-bg-mobile-v2.webp?v=2);
  --bo-presentation-bg-position: center 34%;
  --bo-presentation-title-color: rgb(255, 231, 155);
  --bo-presentation-title-shadow: 0 2px #1c0d08, 0 0 12px rgba(255, 193, 72, 0.28);
}

.modal-overlay.is-evolution-presentation .battle-outcome-card::before {
  background:
    radial-gradient(circle at 50% 42%, rgba(67, 220, 195, 0.12), transparent 37%),
    linear-gradient(90deg, rgba(4, 20, 20, 0.72), transparent 18%, transparent 82%, rgba(4, 20, 20, 0.72)),
    linear-gradient(180deg, rgba(5, 19, 20, 0.1), rgba(15, 7, 4, 0.66));
}

.modal-overlay.is-evolution-presentation .battle-outcome-card > h2 {
  border-color: #3a2416;
  background:
    repeating-linear-gradient(90deg, rgba(255, 213, 105, 0.05) 0 2px, transparent 2px 17px),
    linear-gradient(180deg, #6f4325 0%, #422619 54%, #25150e 100%);
  box-shadow:
    inset 0 0 0 2px rgb(184, 114, 43),
    inset 0 4px rgba(255, 224, 143, 0.16),
    0 5px 0 #140c08,
    0 0 18px rgba(19, 226, 192, 0.12);
  color: var(--bo-presentation-title-color);
  text-shadow: var(--bo-presentation-title-shadow);
}

.modal-overlay.is-evolution-presentation .battle-outcome-card > h2::before {
  content: "✦";
  display: grid;
  place-items: center;
  border: 2px solid rgb(223, 167, 68);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(82, 228, 207, 0.86) 0 15%, transparent 17%),
    linear-gradient(145deg, #246c65, #123a3a 58%, #0a2226);
  box-shadow:
    inset 0 0 0 3px #16352f,
    0 3px 0 #1d100b,
    0 0 13px rgba(70, 218, 196, 0.45);
  color: rgb(255, 229, 127);
  font-size: 1.18rem;
  line-height: 1;
  filter: none;
}

.modal-overlay.is-evolution-presentation .battle-outcome-body {
  flex-direction: column;
  justify-content: center;
}

.modal-overlay.is-evolution-presentation .bo-evolution-complete {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto minmax(220px, 1fr) auto;
  justify-items: center;
  gap: 9px;
  width: 100%;
  min-height: min(100%, 520px);
  padding: 11px;
  overflow: hidden;
  border: 3px solid #2c1b12;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 38%, rgba(55, 196, 177, 0.13), transparent 36%),
    repeating-linear-gradient(90deg, rgba(255, 214, 111, 0.035) 0 2px, transparent 2px 19px),
    linear-gradient(180deg, rgba(52, 35, 23, 0.98), rgba(26, 42, 34, 0.98) 44%, rgba(22, 17, 12, 0.99));
  box-shadow:
    inset 0 0 0 2px rgb(163, 102, 46),
    inset 0 0 0 5px #17100c,
    0 5px 0 #100906,
    0 12px 24px rgba(3, 12, 11, 0.48);
  animation: boEvolutionPanelIn 0.48s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.modal-overlay.is-evolution-presentation .bo-evolution-complete::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 214, 101, 0.22), transparent 13%) top left / 48px 48px no-repeat,
    linear-gradient(225deg, rgba(255, 214, 101, 0.22), transparent 13%) top right / 48px 48px no-repeat,
    linear-gradient(45deg, rgba(255, 214, 101, 0.12), transparent 13%) bottom left / 48px 48px no-repeat,
    linear-gradient(-45deg, rgba(255, 214, 101, 0.12), transparent 13%) bottom right / 48px 48px no-repeat;
}

.modal-overlay.is-evolution-presentation .bo-evolution-complete::after {
  content: "";
  position: absolute;
  z-index: 8;
  inset: 6px;
  border: 1px solid rgba(225, 170, 72, 0.38);
  border-radius: 4px;
  pointer-events: none;
}

.modal-overlay.is-evolution-presentation .bo-evolution-ceremony-heading {
  position: relative;
  z-index: 9;
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-inline: 3px;
}

.modal-overlay.is-evolution-presentation .bo-evolution-unlock-kicker {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  padding: 5px 9px 5px 7px;
  border: 2px solid rgb(183, 115, 44);
  border-radius: 4px;
  background: linear-gradient(180deg, #375f3f, #1d3c31 58%, #112823);
  box-shadow: inset 0 0 0 1px rgba(105, 225, 199, 0.18), 0 3px 0 #130b07;
  color: rgb(255, 231, 160);
  font-size: 0.59rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px #10201c;
  text-transform: uppercase;
  white-space: nowrap;
}

.modal-overlay.is-evolution-presentation .bo-evolution-unlock-kicker i {
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
  border: 2px solid rgb(242, 196, 88);
  background: #3cc7b5;
  box-shadow: inset 0 0 0 2px #18584f, 0 0 7px rgba(60, 213, 190, 0.72);
  transform: rotate(45deg) scale(0.72);
  animation: boEvolutionSigilPulse 1.15s 1.12s ease-in-out infinite alternate;
}

.modal-overlay.is-evolution-presentation .bo-evolution-route-mark {
  display: inline-flex;
  flex: 0 1 auto;
  min-width: 0;
  width: fit-content;
  padding: 5px 9px;
  border: 1px solid rgba(255, 213, 102, 0.62);
  border-radius: 999px;
  background: rgba(8, 28, 27, 0.74);
  color: #7ce7d3;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.modal-overlay.is-evolution-presentation .bo-evolution-stage {
  position: relative;
  z-index: 3;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: 220px;
  max-height: 320px;
  border: 3px solid #24160f;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(5, 18, 22, 0.02), rgba(2, 9, 8, 0.24)),
    url(../assets/pixel-theme/battle/evolution/evolution-ritual-stage-v1.webp) center / cover no-repeat;
  box-shadow:
    inset 0 0 0 2px rgb(190, 121, 46),
    inset 0 0 26px rgba(0, 0, 0, 0.52),
    0 4px 0 #110b08,
    0 0 20px rgba(47, 209, 184, 0.13);
  animation: boEvolutionStageIn 0.62s 0.08s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.modal-overlay.is-evolution-presentation .bo-evolution-stage-vignette {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 43%, rgba(78, 255, 222, 0.11), transparent 31%),
    linear-gradient(90deg, rgba(2, 10, 10, 0.5), transparent 19%, transparent 81%, rgba(2, 10, 10, 0.5));
}

.modal-overlay.is-evolution-presentation .bo-evolution-beams {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 46%;
  width: min(82cqw, 330px);
  height: min(82cqw, 330px);
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 214, 96, 0) 0 10deg, rgba(255, 224, 117, 0.48) 11deg 14deg, rgba(64, 222, 197, 0) 15deg 29deg);
  filter: blur(0.6px);
  -webkit-mask-image: radial-gradient(circle, #000 0 11%, rgba(0, 0, 0, 0.86) 29%, transparent 68%);
  mask-image: radial-gradient(circle, #000 0 11%, rgba(0, 0, 0, 0.86) 29%, transparent 68%);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.34) rotate(-18deg);
  animation: boEvolutionBeams var(--bo-evolution-duration) ease-out both;
}

.modal-overlay.is-evolution-presentation .bo-evolution-energy-column {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 7%;
  width: min(40cqw, 158px);
  height: 82%;
  border-radius: 48% 48% 22% 22%;
  background:
    radial-gradient(ellipse at 50% 90%, rgba(255, 230, 128, 0.88), rgba(70, 232, 204, 0.42) 34%, transparent 68%),
    linear-gradient(90deg, transparent, rgba(81, 242, 216, 0.38) 36%, rgba(255, 237, 153, 0.78) 50%, rgba(81, 242, 216, 0.38) 64%, transparent);
  filter: blur(2px) drop-shadow(0 0 13px rgba(71, 237, 210, 0.86));
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scaleX(0.28) scaleY(0.08);
  transform-origin: 50% 92%;
  animation: boEvolutionEnergyColumn var(--bo-evolution-duration) cubic-bezier(0.16, 1, 0.3, 1) both;
}

.modal-overlay.is-evolution-presentation .bo-evolution-orbit-sigils {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 48%;
  width: min(52cqw, 204px);
  height: min(52cqw, 204px);
  border: 1px dashed rgba(90, 235, 212, 0.34);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1.35) rotate(-42deg);
  animation: boEvolutionOrbitSigils var(--bo-evolution-duration) cubic-bezier(0.22, 0.82, 0.28, 1) both;
}

.modal-overlay.is-evolution-presentation .bo-evolution-orbit-sigils i {
  --orbit-angle: 0deg;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  border: 1px solid rgb(255, 219, 111);
  background: rgb(55, 205, 184);
  box-shadow: inset 0 0 0 2px rgb(18, 87, 78), 0 0 8px rgba(76, 239, 214, 0.88);
  transform: translate(-50%, -50%) rotate(var(--orbit-angle)) translateY(-92px) rotate(45deg);
}

.modal-overlay.is-evolution-presentation .bo-evolution-orbit-sigils i:nth-child(1) { --orbit-angle: 0deg; }
.modal-overlay.is-evolution-presentation .bo-evolution-orbit-sigils i:nth-child(2) { --orbit-angle: 45deg; }
.modal-overlay.is-evolution-presentation .bo-evolution-orbit-sigils i:nth-child(3) { --orbit-angle: 90deg; }
.modal-overlay.is-evolution-presentation .bo-evolution-orbit-sigils i:nth-child(4) { --orbit-angle: 135deg; }
.modal-overlay.is-evolution-presentation .bo-evolution-orbit-sigils i:nth-child(5) { --orbit-angle: 180deg; }
.modal-overlay.is-evolution-presentation .bo-evolution-orbit-sigils i:nth-child(6) { --orbit-angle: 225deg; }
.modal-overlay.is-evolution-presentation .bo-evolution-orbit-sigils i:nth-child(7) { --orbit-angle: 270deg; }
.modal-overlay.is-evolution-presentation .bo-evolution-orbit-sigils i:nth-child(8) { --orbit-angle: 315deg; }

.modal-overlay.is-evolution-presentation .bo-evolution-portrait {
  z-index: 4;
  bottom: 9%;
  width: min(52cqw, 202px);
  height: min(52cqw, 202px);
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  transform-origin: 50% 83%;
}

.modal-overlay.is-evolution-presentation .bo-evolution-portrait.old {
  animation: boEvolutionOldAscend var(--bo-evolution-duration) cubic-bezier(0.4, 0, 0.2, 1) both;
}

.modal-overlay.is-evolution-presentation .bo-evolution-portrait.new {
  animation: boEvolutionNewReveal var(--bo-evolution-duration) cubic-bezier(0.16, 1, 0.3, 1) both;
}

.modal-overlay.is-evolution-presentation .bo-evolution-portrait .bb-unit-portrait-shell {
  inset: 0;
  overflow: visible;
  background: transparent;
}

.modal-overlay.is-evolution-presentation .bo-evolution-portrait .bb-unit-portrait {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(3px 5px 0 rgba(20, 10, 5, 0.72))
    drop-shadow(0 0 8px rgba(255, 223, 108, 0.78));
}

.modal-overlay.is-evolution-presentation .bo-evolution-ring {
  z-index: 3;
  left: 50%;
  top: 47%;
  width: min(53cqw, 205px);
  height: min(53cqw, 205px);
  border: 3px solid rgba(82, 237, 211, 0.92);
  box-shadow:
    0 0 0 5px rgba(14, 69, 64, 0.42),
    0 0 24px rgba(58, 230, 202, 0.76),
    inset 0 0 17px rgba(255, 223, 106, 0.64);
  transform: translate(-50%, -50%);
  animation: boEvolutionRing var(--bo-evolution-duration) cubic-bezier(0.16, 1, 0.3, 1) both;
}

.modal-overlay.is-evolution-presentation .bo-evolution-ring::before,
.modal-overlay.is-evolution-presentation .bo-evolution-ring::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.modal-overlay.is-evolution-presentation .bo-evolution-ring::before {
  inset: 9px;
  border: 2px dashed rgba(255, 223, 107, 0.88);
}

.modal-overlay.is-evolution-presentation .bo-evolution-ring::after {
  inset: 40%;
  background: rgb(255, 244, 189);
  box-shadow: 0 0 22px 10px rgba(255, 213, 69, 0.72), 0 0 50px 24px rgba(58, 226, 200, 0.35);
}

.modal-overlay.is-evolution-presentation .bo-evolution-burst {
  z-index: 6;
  left: 50%;
  top: 47%;
  width: 42px;
  height: 42px;
  background: radial-gradient(circle, rgb(255, 252, 227) 0 12%, rgb(255, 227, 126) 28%, rgba(83, 238, 211, 0.72) 54%, transparent 72%);
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
  animation: boEvolutionBurst var(--bo-evolution-duration) ease-out both;
}

.modal-overlay.is-evolution-presentation .bo-evolution-shockwaves {
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
}

.modal-overlay.is-evolution-presentation .bo-evolution-shockwaves i {
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(28cqw, 112px);
  height: min(28cqw, 112px);
  border: 3px solid rgba(87, 239, 213, 0.92);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(76, 235, 211, 0.72), inset 0 0 12px rgba(255, 225, 116, 0.58);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.18);
  animation-duration: var(--bo-evolution-duration);
  animation-timing-function: cubic-bezier(0.12, 0.72, 0.2, 1);
  animation-fill-mode: both;
}

.modal-overlay.is-evolution-presentation .bo-evolution-shockwaves i:nth-child(1) {
  animation-name: boEvolutionShockwaveOne;
}

.modal-overlay.is-evolution-presentation .bo-evolution-shockwaves i:nth-child(2) {
  border-color: rgba(255, 217, 103, 0.84);
  animation-name: boEvolutionShockwaveTwo;
}

.modal-overlay.is-evolution-presentation .bo-evolution-shockwaves i:nth-child(3) {
  border-width: 2px;
  animation-name: boEvolutionShockwaveThree;
}

.modal-overlay.is-evolution-presentation .bo-evolution-particles {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 47%;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.modal-overlay.is-evolution-presentation .bo-evolution-particles i {
  --particle-x: 0px;
  --particle-y: -110px;
  --particle-size: 5px;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--particle-size);
  height: var(--particle-size);
  background: rgb(83, 232, 207);
  box-shadow: 0 0 7px rgb(70, 220, 198);
  opacity: 0;
  transform: rotate(45deg);
  animation: boEvolutionParticle var(--bo-evolution-duration) cubic-bezier(0.16, 1, 0.3, 1) both;
}

.modal-overlay.is-evolution-presentation .bo-evolution-particles i:nth-child(n+13) {
  background: rgb(255, 225, 127);
  box-shadow: 0 0 8px rgb(255, 185, 66);
}

.modal-overlay.is-evolution-presentation .bo-evolution-particles i:nth-child(1) { --particle-x: -118px; --particle-y: -72px; --particle-size: 5px; }
.modal-overlay.is-evolution-presentation .bo-evolution-particles i:nth-child(2) { --particle-x: -84px; --particle-y: -118px; --particle-size: 7px; }
.modal-overlay.is-evolution-presentation .bo-evolution-particles i:nth-child(3) { --particle-x: -32px; --particle-y: -132px; --particle-size: 4px; }
.modal-overlay.is-evolution-presentation .bo-evolution-particles i:nth-child(4) { --particle-x: 28px; --particle-y: -128px; --particle-size: 6px; }
.modal-overlay.is-evolution-presentation .bo-evolution-particles i:nth-child(5) { --particle-x: 92px; --particle-y: -105px; --particle-size: 4px; }
.modal-overlay.is-evolution-presentation .bo-evolution-particles i:nth-child(6) { --particle-x: 122px; --particle-y: -52px; --particle-size: 7px; }
.modal-overlay.is-evolution-presentation .bo-evolution-particles i:nth-child(7) { --particle-x: 116px; --particle-y: 22px; --particle-size: 5px; }
.modal-overlay.is-evolution-presentation .bo-evolution-particles i:nth-child(8) { --particle-x: 76px; --particle-y: 64px; --particle-size: 4px; }
.modal-overlay.is-evolution-presentation .bo-evolution-particles i:nth-child(9) { --particle-x: 18px; --particle-y: 78px; --particle-size: 6px; }
.modal-overlay.is-evolution-presentation .bo-evolution-particles i:nth-child(10) { --particle-x: -42px; --particle-y: 70px; --particle-size: 4px; }
.modal-overlay.is-evolution-presentation .bo-evolution-particles i:nth-child(11) { --particle-x: -92px; --particle-y: 48px; --particle-size: 7px; }
.modal-overlay.is-evolution-presentation .bo-evolution-particles i:nth-child(12) { --particle-x: -126px; --particle-y: -8px; --particle-size: 4px; }
.modal-overlay.is-evolution-presentation .bo-evolution-particles i:nth-child(13) { --particle-x: -146px; --particle-y: -104px; --particle-size: 4px; }
.modal-overlay.is-evolution-presentation .bo-evolution-particles i:nth-child(14) { --particle-x: -108px; --particle-y: -150px; --particle-size: 6px; }
.modal-overlay.is-evolution-presentation .bo-evolution-particles i:nth-child(15) { --particle-x: -56px; --particle-y: -166px; --particle-size: 3px; }
.modal-overlay.is-evolution-presentation .bo-evolution-particles i:nth-child(16) { --particle-x: 4px; --particle-y: -174px; --particle-size: 5px; }
.modal-overlay.is-evolution-presentation .bo-evolution-particles i:nth-child(17) { --particle-x: 66px; --particle-y: -158px; --particle-size: 4px; }
.modal-overlay.is-evolution-presentation .bo-evolution-particles i:nth-child(18) { --particle-x: 124px; --particle-y: -126px; --particle-size: 6px; }
.modal-overlay.is-evolution-presentation .bo-evolution-particles i:nth-child(19) { --particle-x: 150px; --particle-y: -62px; --particle-size: 3px; }
.modal-overlay.is-evolution-presentation .bo-evolution-particles i:nth-child(20) { --particle-x: 146px; --particle-y: 14px; --particle-size: 5px; }
.modal-overlay.is-evolution-presentation .bo-evolution-particles i:nth-child(21) { --particle-x: 106px; --particle-y: 82px; --particle-size: 4px; }
.modal-overlay.is-evolution-presentation .bo-evolution-particles i:nth-child(22) { --particle-x: 48px; --particle-y: 106px; --particle-size: 6px; }
.modal-overlay.is-evolution-presentation .bo-evolution-particles i:nth-child(23) { --particle-x: -48px; --particle-y: 102px; --particle-size: 3px; }
.modal-overlay.is-evolution-presentation .bo-evolution-particles i:nth-child(24) { --particle-x: -118px; --particle-y: 66px; --particle-size: 5px; }

.modal-overlay.is-evolution-presentation .bo-evolution-pedestal-glow {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 10%;
  width: min(52cqw, 205px);
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 225, 122, 0.9), rgba(54, 218, 193, 0.4) 38%, transparent 72%);
  filter: blur(2px);
  opacity: 0;
  transform: translateX(-50%) scaleX(0.45);
  animation: boEvolutionPedestalGlow var(--bo-evolution-duration) ease-out both;
}

.modal-overlay.is-evolution-presentation .bo-evolution-screen-flash {
  position: absolute;
  z-index: 10;
  inset: -8%;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 226, 0.98) 0 8%, rgba(255, 221, 112, 0.82) 18%, rgba(63, 235, 207, 0.45) 36%, transparent 68%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  animation: boEvolutionScreenFlash var(--bo-evolution-duration) linear both;
}

.modal-overlay.is-evolution-presentation .bo-evolution-complete-copy {
  z-index: 9;
  width: 100%;
  padding: 9px 12px 10px;
  border: 2px solid rgb(181, 115, 43);
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(255, 226, 139, 0.07), transparent 18%, transparent 82%, rgba(255, 226, 139, 0.07)),
    linear-gradient(180deg, rgba(31, 78, 62, 0.98), rgba(13, 42, 38, 0.99));
  box-shadow: inset 0 0 0 2px #102921, 0 4px 0 #110906, 0 0 16px rgba(47, 208, 184, 0.14);
  text-align: center;
  animation: boEvolutionCopyIn 0.54s var(--bo-evolution-copy-delay) cubic-bezier(0.16, 1, 0.3, 1) both;
}

.modal-overlay.is-evolution-presentation .bo-evolution-copy-kicker {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(3, 24, 24, 0.64);
  color: #79e6d2;
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.modal-overlay.is-evolution-presentation .bo-evolution-complete-copy h3 {
  margin: 4px 0 5px;
  color: rgb(255, 231, 152);
  font-size: clamp(1.34rem, 6cqw, 1.86rem);
  line-height: 1;
  text-shadow: 0 2px #120a07, 0 0 13px rgba(255, 193, 69, 0.28);
}

.modal-overlay.is-evolution-presentation .bo-evolution-upgrade-path {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 5px;
  padding: 3px 8px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(130, 223, 201, 0.28);
  border-radius: 4px;
  background: rgba(4, 24, 23, 0.42);
  color: rgb(199, 213, 189);
  font-size: 0.57rem;
  line-height: 1;
}

.modal-overlay.is-evolution-presentation .bo-evolution-upgrade-path span,
.modal-overlay.is-evolution-presentation .bo-evolution-upgrade-path strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-overlay.is-evolution-presentation .bo-evolution-upgrade-path i {
  color: rgb(255, 210, 94);
  font-size: 1rem;
  font-style: normal;
  line-height: 0.6;
}

.modal-overlay.is-evolution-presentation .bo-evolution-upgrade-path strong {
  color: rgb(255, 228, 146);
}

.modal-overlay.is-evolution-presentation .bo-evolution-complete-copy p {
  max-width: 340px;
  margin: 0 auto;
  color: rgb(231, 228, 194);
  font-size: 0.66rem;
  line-height: 1.34;
  text-shadow: 0 1px #0e221c;
}

@keyframes boEvolutionPanelIn {
  from { opacity: 0; transform: translateY(12px) scale(0.965); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes boEvolutionStageIn {
  from { opacity: 0; transform: scale(0.94); filter: brightness(0.62); }
  to { opacity: 1; transform: scale(1); filter: brightness(1); }
}

@keyframes boEvolutionOldAscend {
  0% { opacity: 0.72; transform: translateX(-10%) translateY(5px) scale(0.91); filter: brightness(0.64) saturate(0.68); }
  14% { opacity: 1; transform: translateX(0) translateY(0) scale(1); filter: brightness(1) saturate(0.92); }
  37% { opacity: 1; transform: translateX(0) translateY(-7px) scale(1.03); filter: brightness(1.28) saturate(0.82); }
  46% { opacity: 1; transform: translateX(0) translateY(-12px) scale(0.94); filter: brightness(2.05) saturate(0.36); }
  52% { opacity: 0.88; transform: translateX(0) translateY(-15px) scale(0.72); filter: brightness(3.2) saturate(0) blur(0.7px); }
  57%, 100% { opacity: 0; transform: translateX(0) translateY(-19px) scale(1.24); filter: brightness(3.4) saturate(0) blur(2px); }
}

@keyframes boEvolutionNewReveal {
  0%, 55% { opacity: 0; transform: translateY(24px) scale(0.24); filter: brightness(3) saturate(0.22) blur(2px); }
  63% { opacity: 1; transform: translateY(-12px) scale(1.23); filter: brightness(1.95) saturate(1.28); }
  72% { opacity: 1; transform: translateY(3px) scale(0.94); filter: brightness(1.18) saturate(1.08); }
  82% { opacity: 1; transform: translateY(-2px) scale(1.03); filter: brightness(1.05) saturate(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1) saturate(1); }
}

@keyframes boEvolutionRing {
  0%, 13% { opacity: 0; transform: translate(-50%, -50%) scale(1.34) rotate(-90deg); }
  28% { opacity: 0.82; transform: translate(-50%, -50%) scale(1.03) rotate(10deg); }
  44% { opacity: 1; transform: translate(-50%, -50%) scale(0.62) rotate(164deg); }
  52% { opacity: 1; transform: translate(-50%, -50%) scale(0.42) rotate(238deg); }
  67% { opacity: 0.72; transform: translate(-50%, -50%) scale(1.46) rotate(332deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.66) rotate(420deg); }
}

@keyframes boEvolutionBurst {
  0%, 48% { opacity: 0; transform: translate(-50%, -50%) scale(0.12); }
  52% { opacity: 1; transform: translate(-50%, -50%) scale(1.16); }
  62% { opacity: 0.74; transform: translate(-50%, -50%) scale(6.2); }
  75%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(7.5); }
}

@keyframes boEvolutionBeams {
  0%, 14% { opacity: 0; transform: translate(-50%, -50%) scale(0.38) rotate(-24deg); }
  30% { opacity: 0.34; transform: translate(-50%, -50%) scale(0.68) rotate(3deg); }
  48% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.92) rotate(42deg); }
  62% { opacity: 0.26; transform: translate(-50%, -50%) scale(1.12) rotate(74deg); }
  76%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2) rotate(96deg); }
}

@keyframes boEvolutionParticle {
  0%, 51% { opacity: 0; transform: translate(0, 0) rotate(45deg) scale(0.28); }
  57% { opacity: 1; transform: translate(calc(var(--particle-x) * 0.12), calc(var(--particle-y) * 0.12)) rotate(92deg) scale(1.2); }
  82% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(var(--particle-x), var(--particle-y)) rotate(225deg) scale(0.1); }
}

@keyframes boEvolutionPedestalGlow {
  0%, 54% { opacity: 0; transform: translateX(-50%) scaleX(0.35); }
  64% { opacity: 1; transform: translateX(-50%) scaleX(1.28); }
  82% { opacity: 0.76; transform: translateX(-50%) scaleX(0.94); }
  100% { opacity: 0.68; transform: translateX(-50%) scaleX(1); }
}

@keyframes boEvolutionCopyIn {
  from { opacity: 0; transform: translateY(12px) scale(0.9); filter: brightness(1.6); }
  68% { opacity: 1; transform: translateY(-2px) scale(1.03); filter: brightness(1.12); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes boEvolutionEnergyColumn {
  0%, 16% { opacity: 0; transform: translateX(-50%) scaleX(0.18) scaleY(0.05); }
  30% { opacity: 0.34; transform: translateX(-50%) scaleX(0.5) scaleY(0.48); }
  44% { opacity: 0.72; transform: translateX(-50%) scaleX(0.34) scaleY(0.92); }
  52% { opacity: 1; transform: translateX(-50%) scaleX(0.72) scaleY(1.08); }
  61% { opacity: 0.48; transform: translateX(-50%) scaleX(1.18) scaleY(1); }
  74%, 100% { opacity: 0; transform: translateX(-50%) scaleX(1.34) scaleY(0.92); }
}

@keyframes boEvolutionOrbitSigils {
  0%, 14% { opacity: 0; transform: translate(-50%, -50%) scale(1.36) rotate(-42deg); }
  27% { opacity: 0.78; transform: translate(-50%, -50%) scale(1.06) rotate(30deg); }
  44% { opacity: 1; transform: translate(-50%, -50%) scale(0.76) rotate(162deg); }
  52% { opacity: 0.96; transform: translate(-50%, -50%) scale(0.38) rotate(252deg); }
  61% { opacity: 0.32; transform: translate(-50%, -50%) scale(1.2) rotate(338deg); }
  72%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4) rotate(388deg); }
}

@keyframes boEvolutionShockwaveOne {
  0%, 50% { opacity: 0; transform: translate(-50%, -50%) scale(0.16); }
  54% { opacity: 1; }
  70%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.15); }
}

@keyframes boEvolutionShockwaveTwo {
  0%, 54% { opacity: 0; transform: translate(-50%, -50%) scale(0.16); }
  58% { opacity: 0.9; }
  75%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.42); }
}

@keyframes boEvolutionShockwaveThree {
  0%, 58% { opacity: 0; transform: translate(-50%, -50%) scale(0.16); }
  62% { opacity: 0.72; }
  80%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.7); }
}

@keyframes boEvolutionScreenFlash {
  0%, 49% { opacity: 0; }
  52% { opacity: 0.82; }
  56% { opacity: 0; }
  61% { opacity: 0.2; }
  66%, 100% { opacity: 0; }
}

@keyframes boEvolutionStageRitual {
  0%, 45% { transform: translate(0, 0); }
  47% { transform: translate(-2px, 1px); }
  49% { transform: translate(3px, -1px); }
  51% { transform: translate(-3px, -1px); }
  53% { transform: translate(2px, 1px); }
  55% { transform: translate(-1px, 0); }
  58%, 100% { transform: translate(0, 0); }
}

@keyframes boEvolutionAmbientPulse {
  0% { opacity: 0.2; filter: brightness(0.72); }
  22% { opacity: 0.5; filter: brightness(1); }
  48% { opacity: 0.9; filter: brightness(1.34); }
  58% { opacity: 1; filter: brightness(1.58); }
  78% { opacity: 0.48; filter: brightness(1); }
  100% { opacity: 0.28; filter: brightness(0.9); }
}

@keyframes boEvolutionTitleDrop {
  from { opacity: 0; transform: translateY(-13px) scale(1.05); filter: brightness(1.6); }
  72% { opacity: 1; transform: translateY(2px) scale(0.98); filter: brightness(1.12); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes boEvolutionSigilPulse {
  to { box-shadow: inset 0 0 0 2px #18584f, 0 0 12px 2px rgba(60, 213, 190, 0.86); transform: rotate(45deg) scale(0.82); }
}

@keyframes boCampRewardButtonPulse {
  to {
    filter: brightness(1.06);
    box-shadow:
      inset 0 0 0 2px rgba(255, 238, 151, 0.72),
      inset 0 4px rgba(255, 255, 218, 0.42),
      0 5px 0 #5b2a08,
      0 0 18px rgba(255, 218, 55, 0.68);
  }
}

@container okey-stage (max-width: 350px) {
  .modal-overlay.is-evolution-presentation .battle-outcome-card {
    padding-inline: 9px !important;
  }

  .modal-overlay.is-evolution-presentation .battle-outcome-card > h2 {
    min-height: 78px;
    padding-left: 58px;
    font-size: 1.05rem;
  }

  .modal-overlay.is-evolution-presentation .battle-outcome-card > h2::before {
    left: 10px;
    width: 40px;
    height: 40px;
  }

  .modal-overlay.is-loot-presentation .bo-loot-choice {
    grid-template-columns: 100px minmax(0, 1fr);
    gap-inline: 9px;
    padding-inline: 8px 10px;
  }

  .modal-overlay.is-loot-presentation .bo-loot-item {
    width: 96px;
    height: 96px;
  }

  .modal-overlay.is-loot-presentation .bo-loot-art,
  .modal-overlay.is-loot-presentation .bo-loot-icon .sa-formal-item-icon {
    width: 74px;
    height: 74px;
  }

  .modal-overlay.is-loot-presentation .bo-progression-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .modal-overlay.is-loot-presentation .bo-progression-list > strong,
  .modal-overlay.is-loot-presentation .bo-progression-list > em {
    grid-column: 1;
  }
}

@container okey-stage (max-height: 640px) {
  .modal-overlay.is-evolution-presentation .battle-outcome-card {
    padding-top: max(8px, var(--okey-safe-top)) !important;
    padding-bottom: max(8px, var(--okey-safe-bottom)) !important;
    gap: var(--bo-presentation-card-gap, 6px) !important;
  }

  .modal-overlay.is-evolution-presentation .battle-outcome-card > h2 {
    min-height: 66px;
    padding-block: 7px;
    font-size: 1rem;
  }

  .modal-overlay.is-evolution-presentation .battle-outcome-card > h2::before {
    width: 38px;
    height: 38px;
  }

  .modal-overlay:is(.is-loot-presentation, .is-evolution-presentation) .battle-outcome-card > .battle-outcome-close {
    top: var(--bo-close-top, max(8px, var(--okey-safe-top))) !important;
  }

  .modal-overlay.is-evolution-presentation #battle-outcome-actions .modal-btn {
    min-height: 48px !important;
  }

  .modal-overlay.is-loot-presentation .bo-loot-choice {
    grid-template-columns: 94px minmax(0, 1fr);
    padding-block: 9px;
  }

  .modal-overlay.is-loot-presentation .bo-loot-item {
    width: 90px;
    height: 90px;
  }

  .modal-overlay.is-loot-presentation .bo-loot-art,
  .modal-overlay.is-loot-presentation .bo-loot-icon .sa-formal-item-icon {
    width: 68px;
    height: 68px;
  }

  .modal-overlay.is-evolution-presentation .bo-evolution-complete {
    grid-template-rows: auto minmax(160px, 1fr) auto;
    min-height: 0;
    padding: 10px;
    gap: 7px;
  }

  .modal-overlay.is-evolution-presentation .bo-evolution-stage {
    min-height: 160px;
  }

  .modal-overlay.is-evolution-presentation .bo-evolution-portrait,
  .modal-overlay.is-evolution-presentation .bo-evolution-ring {
    width: min(42cqw, 150px);
    height: min(42cqw, 150px);
  }

  .modal-overlay.is-evolution-presentation .bo-evolution-complete-copy {
    padding-block: 7px 8px;
  }

  .modal-overlay.is-evolution-presentation .bo-evolution-complete-copy h3 {
    margin-block: 3px 4px;
  }
}

@container okey-stage (max-width: 350px) {
  .modal-overlay.is-loot-presentation .modal-actions {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  }

  .modal-overlay.is-loot-presentation .modal-actions .modal-btn {
    --bo-action-padding: 9px 5px;
    --bo-action-font-size: 0.68rem;
    gap: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal-overlay.is-evolution-presentation #battle-outcome-actions :is(.bo-loot-claim-btn, .battle-next-btn) {
    animation: none;
  }

  .modal-overlay.is-evolution-presentation .battle-outcome-card.bo-evolution-shock,
  .modal-overlay.is-evolution-presentation .bo-evolution-complete,
  .modal-overlay.is-evolution-presentation .bo-evolution-stage,
  .modal-overlay.is-evolution-presentation .bo-evolution-complete-copy,
  .modal-overlay.is-evolution-presentation .bo-evolution-unlock-kicker i {
    animation: none;
  }

  .modal-overlay.is-evolution-presentation .bo-evolution-portrait.old,
  .modal-overlay.is-evolution-presentation .bo-evolution-ring,
  .modal-overlay.is-evolution-presentation .bo-evolution-burst,
  .modal-overlay.is-evolution-presentation .bo-evolution-beams,
  .modal-overlay.is-evolution-presentation .bo-evolution-particles,
  .modal-overlay.is-evolution-presentation .bo-evolution-energy-column,
  .modal-overlay.is-evolution-presentation .bo-evolution-orbit-sigils,
  .modal-overlay.is-evolution-presentation .bo-evolution-shockwaves,
  .modal-overlay.is-evolution-presentation .bo-evolution-screen-flash {
    display: none;
  }

  .modal-overlay.is-evolution-presentation .bo-evolution-portrait.new {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none;
  }

  .modal-overlay.is-evolution-presentation .bo-evolution-pedestal-glow {
    opacity: 0.68;
    transform: translateX(-50%) scaleX(1);
    animation: none;
  }
}

/* Approved Age 1 enemy-loot concept ---------------------------------------
   Keep the live battle visible behind a centered parchment-and-bamboo card.
   The frame and action skins are shared with the Age 1 level preview so the
   outcome reads as part of the same UI family instead of a separate theme. */
.modal-overlay.is-loot-presentation.is-loot-presentation {
  --bo-loot-ink: #32170b;
  --bo-loot-wood: #713713;
  --bo-loot-parchment: rgb(244 215 151);
  --bo-loot-parchment-light: rgb(255 232 175);
  --bo-loot-green: #316b25;
  --bo-loot-green-deep: #173f1d;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100cqh;
  padding:
    max(10px, var(--okey-safe-top))
    max(10px, var(--okey-safe-right))
    max(10px, var(--okey-safe-bottom))
    max(10px, var(--okey-safe-left));
  background: rgba(9, 12, 7, 0.72) !important;
  backdrop-filter: blur(1.5px) brightness(0.52) saturate(0.78) !important;
  -webkit-backdrop-filter: blur(1.5px) brightness(0.52) saturate(0.78) !important;
}

.modal-overlay.is-loot-presentation.is-loot-presentation .battle-outcome-card {
  position: relative;
  isolation: isolate;
  width: min(calc(100cqw - 34px), 430px) !important;
  max-width: 430px;
  height: min(calc(100cqh - var(--okey-safe-top) - var(--okey-safe-bottom) - 20px), 820px);
  max-height: calc(100cqh - var(--okey-safe-top) - var(--okey-safe-bottom) - 20px);
  margin: auto;
  padding:
    clamp(28px, 7cqw, 38px)
    clamp(27px, 7.2cqw, 40px)
    clamp(28px, 7cqw, 38px) !important;
  gap: clamp(5px, 0.8cqh, 8px);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    repeating-linear-gradient(90deg, rgba(100, 50, 13, 0.035) 0 1px, transparent 1px 17px),
    linear-gradient(180deg, var(--bo-loot-parchment-light), var(--bo-loot-parchment) 72%, rgb(223 173 94)) !important;
  box-shadow: 0 16px 38px rgba(21, 12, 5, 0.72) !important;
  color: var(--bo-loot-ink);
  image-rendering: pixelated;
  opacity: 0;
  transform: translateY(12px) scale(0.94);
  transition:
    opacity 180ms ease,
    transform 260ms cubic-bezier(0.18, 0.92, 0.2, 1.18);
}

.modal-overlay.is-loot-presentation.visible .battle-outcome-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.modal-overlay.is-loot-presentation.is-loot-presentation .battle-outcome-card::before {
  content: "";
  position: absolute;
  z-index: 20;
  inset: 0;
  pointer-events: none;
  background: url(../assets/battle-ui/age1-level-preview/modal-frame-v2.png?v=1) center / 100% 100% no-repeat;
  filter: drop-shadow(0 5px 3px rgba(43, 23, 15, 0.52));
}

.modal-overlay.is-loot-presentation.is-loot-presentation .battle-outcome-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 3.9% 5.6%;
  pointer-events: none;
  opacity: 0.42;
  background:
    radial-gradient(circle at 14% 20%, rgba(121, 67, 20, 0.12) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 46%, rgba(121, 67, 20, 0.1) 0 1px, transparent 2px),
    linear-gradient(90deg, rgba(255, 249, 205, 0.09) 50%, transparent 50%) 0 0 / 4px 4px;
}

.modal-overlay.is-loot-presentation.is-loot-presentation .battle-outcome-card > * {
  position: relative;
  z-index: 2;
}

.modal-overlay.is-loot-presentation.is-loot-presentation .battle-outcome-card > .battle-outcome-close {
  position: absolute;
  z-index: 30;
  top: clamp(26px, 6.8cqw, 38px) !important;
  right: clamp(24px, 6.5cqw, 36px) !important;
  left: auto !important;
  inset-inline-start: auto !important;
  inset-inline-end: clamp(24px, 6.5cqw, 36px) !important;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--pixel-bone);
  background: transparent url(../assets/battle-ui/age1-level-preview/close-button-v1.png?v=1) center / contain no-repeat;
  box-shadow: none;
  font-size: 28px;
  line-height: 1;
  text-shadow: 2px 2px var(--pixel-ink-deep);
  filter: drop-shadow(0 3px 0 rgba(54, 25, 10, 0.72));
}

.modal-overlay.is-loot-presentation.is-loot-presentation .battle-outcome-card > .battle-outcome-close:focus-visible {
  outline: 3px solid rgb(255 240 189);
  outline-offset: 2px;
}

.modal-overlay.is-loot-presentation.is-loot-presentation .battle-outcome-card > h2 {
  flex: 0 0 auto;
  display: flex;
  min-height: clamp(62px, 9cqh, 78px);
  margin: 0;
  padding: 10px 56px 10px 12px;
  align-items: center;
  justify-content: center;
  border: 3px solid #4f260d;
  border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(255, 232, 138, 0.08), transparent 14%, transparent 86%, rgba(255, 232, 138, 0.08)),
    repeating-linear-gradient(0deg, rgba(10, 39, 18, 0.16) 0 2px, transparent 2px 13px),
    linear-gradient(180deg, #397a2d 0%, #255d26 58%, #163d1f 100%);
  box-shadow:
    inset 0 0 0 2px #8ca83d,
    inset 0 -6px rgba(13, 41, 17, 0.24),
    0 4px 0 #3d1d0c;
  color: rgb(255 240 180) !important;
  font-family: "Okey Noto Serif SC", serif;
  font-size: clamp(1.08rem, 4.8cqw, 1.48rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.08;
  text-align: center;
  text-shadow: 0 2px 0 #173817, 1px 0 0 #173817, -1px 0 0 #173817 !important;
}

.modal-overlay.is-loot-presentation.is-loot-presentation .battle-outcome-card > h2::before {
  display: none;
  content: none;
}

.modal-overlay.is-loot-presentation.is-loot-presentation .battle-outcome-body {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  margin: 0;
  padding: 0 2px 3px;
  gap: clamp(6px, 0.8cqh, 8px);
  overflow: hidden auto;
  color: var(--bo-loot-ink);
  background: transparent !important;
  box-shadow: none !important;
  scrollbar-width: none;
}

.modal-overlay.is-loot-presentation.is-loot-presentation .battle-outcome-body::-webkit-scrollbar {
  display: none;
}

.modal-overlay.is-loot-presentation.is-loot-presentation .bo-clear-line {
  align-self: center;
  flex: 0 0 auto;
  margin: 0;
  padding: 5px 18px 6px;
  border: 2px solid #6c3512;
  border-radius: 999px;
  background: linear-gradient(180deg, #458c31, #255c27);
  box-shadow: inset 0 0 0 1px #8ebb4c, 0 3px 0 #3a1c0c;
  color: rgb(255 241 186);
  font-family: "Okey Noto Serif SC", serif;
  font-size: clamp(0.63rem, 2.6cqw, 0.8rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  text-shadow: 0 1px #173817;
}

.modal-overlay.is-loot-presentation.is-loot-presentation .bo-loot-choice {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  grid-template-areas:
    "art"
    "kicker"
    "title"
    "description";
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
  justify-items: center;
  gap: 1px;
  min-width: 0;
  margin: 0;
  padding: 7px 10px 10px;
  overflow: hidden;
  border: 3px solid var(--bo-loot-wood);
  border-radius: 5px;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 244, 167, 0.62), transparent 38%),
    repeating-linear-gradient(90deg, rgba(111, 55, 13, 0.045) 0 1px, transparent 1px 15px),
    linear-gradient(180deg, rgb(247 217 145) 0%, rgb(239 193 110) 58%, rgb(224 166 78) 100%);
  box-shadow:
    inset 0 0 0 2px rgb(255 234 176),
    inset 0 -7px rgba(112, 55, 14, 0.12),
    0 4px 0 #4e250d;
  text-align: center;
}

.modal-overlay.is-loot-presentation.is-loot-presentation .bo-loot-choice::after {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  border: 1px dashed rgba(107, 52, 16, 0.36);
}

.modal-overlay.is-loot-presentation.is-loot-presentation .bo-loot-item {
  grid-area: art;
  width: 100%;
  height: clamp(130px, 20cqh, 172px);
  align-self: center;
  overflow: hidden;
  border: 3px solid #704016;
  border-radius: 5px;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 249, 181, 0.98) 0 8%, rgba(255, 205, 55, 0.68) 28%, rgba(160, 94, 20, 0.2) 56%, transparent 72%),
    linear-gradient(180deg, rgb(172 115 31), #7a4b17);
  box-shadow: inset 0 0 0 2px rgb(225 171 69), inset 0 -8px rgba(65, 31, 8, 0.18);
}

.modal-overlay.is-loot-presentation.is-loot-presentation .bo-loot-item::before {
  inset: 3%;
  background: radial-gradient(circle, rgba(255, 251, 193, 0.92) 0 9%, rgba(255, 198, 44, 0.3) 38%, transparent 68%);
}

.modal-overlay.is-loot-presentation.is-loot-presentation .bo-loot-item::after {
  inset: 18%;
  border-width: 2px;
  border-color: rgba(255, 241, 142, 0.78);
}

.modal-overlay.is-loot-presentation.is-loot-presentation .bo-loot-rays {
  inset: -35% 3%;
  opacity: 0.9;
}

.modal-overlay.is-loot-presentation.is-loot-presentation .bo-loot-art,
.modal-overlay.is-loot-presentation.is-loot-presentation .bo-loot-icon .sa-formal-item-icon {
  width: clamp(104px, 16cqh, 138px);
  height: clamp(104px, 16cqh, 138px);
  object-fit: contain;
  filter: drop-shadow(0 6px 0 rgba(77, 38, 10, 0.5)) drop-shadow(0 0 7px rgb(255 244 165));
}

.modal-overlay.is-loot-presentation.is-loot-presentation .bo-loot-kicker {
  grid-area: kicker;
  z-index: 4;
  display: inline-flex;
  width: min(72%, 220px);
  min-height: 27px;
  margin: -10px 0 1px;
  padding: 4px 18px 5px;
  align-items: center;
  justify-content: center;
  border: 2px solid #4d280e;
  border-radius: 3px;
  background: linear-gradient(180deg, #448832, #255b27);
  box-shadow: inset 0 0 0 1px #79a843, 0 3px 0 #3b1d0c;
  color: rgb(255 241 185);
  font-family: "Okey Noto Serif SC", serif;
  font-size: clamp(0.62rem, 2.4cqw, 0.75rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  text-shadow: 0 1px #173817;
}

.modal-overlay.is-loot-presentation.is-loot-presentation .bo-loot-choice h3 {
  grid-area: title;
  min-width: 0;
  margin: 2px 0 1px;
  color: #3d1b0b;
  -webkit-text-fill-color: #3d1b0b !important;
  font-family: "Okey Noto Serif SC", serif;
  font-size: clamp(1.2rem, 5.6cqw, 1.62rem);
  line-height: 1;
  text-shadow: 0 2px rgb(255 233 173);
}

.modal-overlay.is-loot-presentation.is-loot-presentation .bo-loot-choice p {
  grid-area: description;
  min-width: 0;
  max-width: 310px;
  margin: 2px auto 0;
  color: #563018;
  -webkit-text-fill-color: #563018 !important;
  font-size: clamp(0.65rem, 2.65cqw, 0.78rem);
  font-weight: 800;
  line-height: 1.32;
  overflow-wrap: anywhere;
}

.modal-overlay.is-loot-presentation.is-loot-presentation .bo-reward-row {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 8px;
  margin: 5px 0 0;
  padding: 18px 8px 8px;
  border: 3px solid var(--bo-loot-wood);
  border-radius: 5px;
  background:
    repeating-linear-gradient(90deg, rgba(111, 55, 13, 0.035) 0 1px, transparent 1px 15px),
    linear-gradient(180deg, rgb(255 230 168), rgb(237 199 125));
  box-shadow: inset 0 0 0 2px rgb(219 166 91), 0 4px 0 #4e250d;
}

.modal-overlay.is-loot-presentation.is-loot-presentation .bo-reward-label {
  position: absolute;
  z-index: 2;
  top: -13px;
  left: 50%;
  display: flex;
  width: min(64%, 190px);
  min-height: 28px;
  padding: 4px 12px 5px;
  align-items: center;
  justify-content: center;
  border: 2px solid #4d280e;
  border-radius: 3px;
  background: linear-gradient(180deg, #4b7c2b, #2c5424);
  box-shadow: inset 0 0 0 1px #819a3e, 0 3px 0 #3b1d0c;
  color: rgb(255 233 164);
  font-family: "Okey Noto Serif SC", serif;
  font-size: clamp(0.6rem, 2.3cqw, 0.72rem);
  font-weight: 900;
  text-align: center;
  text-shadow: 0 1px #1c3518;
  transform: translateX(-50%);
}

.modal-overlay.is-loot-presentation.is-loot-presentation .bo-reward-label::before,
.modal-overlay.is-loot-presentation.is-loot-presentation .bo-reward-label::after {
  display: none;
  content: none;
}

.modal-overlay.is-loot-presentation.is-loot-presentation .bo-reward-item {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #4d290f;
  -webkit-text-fill-color: #4d290f !important;
  font-size: clamp(0.65rem, 2.7cqw, 0.8rem);
  white-space: nowrap;
  text-shadow: 0 1px rgb(255 234 177);
}

.modal-overlay.is-loot-presentation.is-loot-presentation .bo-reward-item + .bo-reward-item {
  border-left: 1px solid rgba(111, 55, 13, 0.28);
}

.modal-overlay.is-loot-presentation.is-loot-presentation .bo-reward-icon {
  flex-basis: clamp(27px, 7cqw, 34px);
  width: clamp(27px, 7cqw, 34px);
  height: clamp(27px, 7cqw, 34px);
}

.modal-overlay.is-loot-presentation.is-loot-presentation .bo-progression-summary {
  position: relative;
  flex: 0 0 auto;
  gap: 3px;
  margin: 4px 0 0;
  padding: 17px 9px 8px;
  border: 3px solid var(--bo-loot-wood);
  border-radius: 5px;
  background:
    repeating-linear-gradient(90deg, rgba(111, 55, 13, 0.035) 0 1px, transparent 1px 15px),
    linear-gradient(180deg, rgb(255 228 162), rgb(235 193 118));
  box-shadow: inset 0 0 0 2px rgb(219 166 91), 0 4px 0 #4e250d;
  color: var(--bo-loot-ink);
}

.modal-overlay.is-loot-presentation.is-loot-presentation .bo-progression-heading {
  position: absolute;
  z-index: 2;
  top: -13px;
  left: 50%;
  width: min(64%, 190px);
  min-height: 28px;
  padding: 4px 12px 5px;
  border: 2px solid #4d280e;
  border-radius: 3px;
  background: linear-gradient(180deg, #4b7c2b, #2c5424);
  box-shadow: inset 0 0 0 1px #819a3e, 0 3px 0 #3b1d0c;
  transform: translateX(-50%);
}

.modal-overlay.is-loot-presentation.is-loot-presentation .bo-progression-heading span {
  display: block;
  color: rgb(255 233 164);
  font-family: "Okey Noto Serif SC", serif;
  font-size: clamp(0.6rem, 2.3cqw, 0.72rem);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px #1c3518;
}

.modal-overlay.is-loot-presentation.is-loot-presentation .bo-progression-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.modal-overlay.is-loot-presentation.is-loot-presentation .bo-progression-list > * {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 27px;
  padding: 5px 5px 5px 25px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid rgba(104, 54, 16, 0.24);
  border-radius: 0;
  background: transparent;
  color: #4f2a13;
  font-size: clamp(0.58rem, 2.35cqw, 0.7rem);
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-shadow: 0 1px rgb(255 231 169);
}

.modal-overlay.is-loot-presentation.is-loot-presentation .bo-progression-list > *::before {
  content: "★";
  position: absolute;
  left: 5px;
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  color: rgb(217 143 33);
  font-size: 0.72rem;
  line-height: 1;
  text-shadow: 0 1px #6d360e;
}

.modal-overlay.is-loot-presentation.is-loot-presentation .bo-progression-list > *:last-child {
  border-bottom: 0;
}

.modal-overlay.is-loot-presentation.is-loot-presentation .bo-progression-list > strong,
.modal-overlay.is-loot-presentation.is-loot-presentation .bo-progression-list > em {
  grid-column: 1;
}

.modal-overlay.is-loot-presentation.is-loot-presentation #battle-outcome-actions.modal-actions {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(5px, 0.7cqh, 8px);
  width: 100%;
  margin: 0;
  padding: 0;
}

.modal-overlay.is-loot-presentation.is-loot-presentation #battle-outcome-actions.modal-actions .modal-btn {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: clamp(49px, 6.7cqh, 60px);
  margin: 0;
  padding: 0 22px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: "Okey Noto Serif SC", serif;
  font-size: clamp(0.78rem, 3.45cqw, 1rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  image-rendering: pixelated;
  transition: transform 120ms ease, filter 120ms ease;
}

.modal-overlay.is-loot-presentation.is-loot-presentation .modal-actions .bo-loot-claim-btn {
  order: 1;
  color: rgb(255 246 215) !important;
  text-shadow: 0 2px 0 #285f2c, 1px 0 0 #285f2c, -1px 0 0 #285f2c;
  background: transparent url(../assets/battle-ui/age1-level-preview/action-primary-v1.webp?v=1) center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 4px 0 rgba(62, 31, 15, 0.88)) drop-shadow(0 7px 5px rgba(43, 23, 15, 0.28));
  animation: boCampRewardButtonPulse 1.35s ease-in-out infinite alternate;
}

.modal-overlay.is-loot-presentation.is-loot-presentation .modal-actions .battle-share-btn {
  order: 2;
  color: rgb(255 245 214);
  text-shadow: 0 2px 0 #6d3218, 1px 0 0 #6d3218, -1px 0 0 #6d3218;
  background: transparent url(../assets/battle-ui/age1-level-preview/action-secondary-v1.webp?v=1) center / 100% 100% no-repeat;
  filter: drop-shadow(0 4px 0 rgba(62, 31, 15, 0.88)) drop-shadow(0 7px 5px rgba(43, 23, 15, 0.28));
}

.modal-overlay.is-loot-presentation.is-loot-presentation .modal-actions .modal-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.07) saturate(1.05) drop-shadow(0 5px 0 rgba(62, 31, 15, 0.88));
}

.modal-overlay.is-loot-presentation.is-loot-presentation .modal-actions .modal-btn:focus-visible {
  outline: 3px solid rgb(255 240 189);
  outline-offset: 2px;
}

.modal-overlay.is-loot-presentation.is-loot-presentation .modal-actions .modal-btn:active:not(:disabled) {
  transform: translateY(3px) scale(0.985);
  filter: brightness(0.96) saturate(1.03) drop-shadow(0 1px 0 rgba(62, 31, 15, 0.88));
}

.modal-overlay.is-loot-presentation.is-loot-presentation .modal-actions .bo-loot-claim-btn::after,
.modal-overlay.is-loot-presentation.is-loot-presentation .modal-actions .battle-share-btn::before,
.modal-overlay.is-loot-presentation.is-loot-presentation .modal-actions .battle-share-btn::after {
  display: none;
  content: none;
}

@container okey-stage (max-width: 350px) {
  .modal-overlay.is-loot-presentation.is-loot-presentation .battle-outcome-card {
    width: calc(100cqw - 18px);
    padding-inline: 25px;
  }

  .modal-overlay.is-loot-presentation.is-loot-presentation .battle-outcome-card > h2 {
    padding-right: 56px;
    font-size: 1rem;
  }
}

@container okey-stage (max-height: 720px) {
  .modal-overlay.is-loot-presentation.is-loot-presentation {
    padding-block: max(4px, var(--okey-safe-top)) max(4px, var(--okey-safe-bottom));
  }

  .modal-overlay.is-loot-presentation.is-loot-presentation .battle-outcome-card {
    width: min(calc(100cqw - 12px), 420px);
    height: calc(100cqh - var(--okey-safe-top) - var(--okey-safe-bottom) - 8px);
    max-height: calc(100cqh - var(--okey-safe-top) - var(--okey-safe-bottom) - 8px);
    padding: 23px 25px 22px;
    gap: 4px;
  }

  .modal-overlay.is-loot-presentation.is-loot-presentation .battle-outcome-card > .battle-outcome-close {
    top: 22px;
    right: 22px;
    inset-inline-end: 22px;
  }

  .modal-overlay.is-loot-presentation.is-loot-presentation .battle-outcome-card > h2 {
    min-height: 54px;
    padding-block: 7px;
    font-size: 1rem;
  }

  .modal-overlay.is-loot-presentation.is-loot-presentation .battle-outcome-body {
    gap: 5px;
  }

  .modal-overlay.is-loot-presentation.is-loot-presentation .bo-clear-line {
    padding-block: 4px;
  }

  .modal-overlay.is-loot-presentation.is-loot-presentation .bo-loot-choice {
    padding: 5px 8px 7px;
  }

  .modal-overlay.is-loot-presentation.is-loot-presentation .bo-loot-item {
    height: 112px;
  }

  .modal-overlay.is-loot-presentation.is-loot-presentation .bo-loot-art,
  .modal-overlay.is-loot-presentation.is-loot-presentation .bo-loot-icon .sa-formal-item-icon {
    width: 88px;
    height: 88px;
  }

  .modal-overlay.is-loot-presentation.is-loot-presentation .bo-loot-choice p {
    font-size: 0.62rem;
  }

  .modal-overlay.is-loot-presentation.is-loot-presentation .bo-reward-row {
    padding-block: 15px 5px;
  }

  .modal-overlay.is-loot-presentation.is-loot-presentation .bo-progression-summary {
    padding-block: 15px 5px;
  }

  .modal-overlay.is-loot-presentation.is-loot-presentation .bo-progression-list > * {
    min-height: 23px;
    padding-block: 3px;
  }

  .modal-overlay.is-loot-presentation.is-loot-presentation .modal-actions .modal-btn {
    min-height: 45px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal-overlay.is-loot-presentation.is-loot-presentation .battle-outcome-card,
  .modal-overlay.is-loot-presentation.is-loot-presentation .modal-actions .modal-btn {
    transition: none;
  }
}

/* Evolution settlement: one blank template and live content in every language.
   All anchors use the same canvas, including the safe-area offset. */
.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin {
  --bo-evolution-live-font: "Okey Fusion Pixel", "Okey Noto Serif SC", "Microsoft YaHei", sans-serif;
  --bo-evolution-display-font: var(--bo-evolution-live-font);
  --bo-evolution-canvas-height: calc(100cqh - var(--okey-safe-top));
  --okey-font-display: var(--bo-evolution-display-font);
  --okey-font-ui: var(--bo-evolution-live-font);
  --okey-font-data: var(--bo-evolution-live-font);
  --bo-presentation-card-padding: 0;
  --bo-presentation-card-gap: 0;
  --bo-actions-position: absolute;
  --bo-actions-z-index: 10;
  --bo-actions-flex: none;
  --bo-actions-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  --bo-actions-gap: 1.8%;
  --bo-actions-width: auto;
  --bo-actions-margin: 0;
  --bo-actions-padding: 0;
  --bo-action-min-height: 0;
  --bo-action-font-size: clamp(11px, 3.1cqw, 13px);
  --bo-action-padding: 0 7%;
  --bo-action-border: 0;
  --bo-action-border-radius: 0;
  --bo-action-color: rgb(255, 236, 181);
  --bo-action-text-shadow: 0 2px rgb(39, 17, 8);
  --bo-action-box-shadow: none;
  --bo-share-button-background: transparent;
  --bo-primary-button-border-color: transparent;
  --bo-primary-button-background: transparent;
  --bo-primary-button-color: rgb(255, 255, 219);
  --bo-primary-button-text-shadow: 0 2px rgb(103, 48, 9);
  --bo-primary-button-animation: none;
  --bo-close-top: 2.15%;
  --bo-close-right: 3.1%;
  --bo-close-width: max(48px, 11.8%);
  --bo-close-height: max(48px, 6.15%);
  --bo-close-padding: 0;
  --bo-close-border: 0;
  --bo-close-border-radius: 0;
  --bo-close-background: transparent;
  --bo-close-box-shadow: none;
  --bo-close-color: transparent;
  --bo-close-font-size: 0;
  --bo-close-text-shadow: none;
  /* The approved skin and every live slot use one percentage coordinate
     system. Move and resize that canvas as a unit so camera cutouts cannot
     separate the baked frame from the title or close hit target. */
  height: var(--bo-evolution-canvas-height) !important;
  max-height: var(--bo-evolution-canvas-height) !important;
  margin: var(--okey-safe-top) auto 0 !important;
  background: rgb(10, 17, 14);
  font-family: var(--bo-evolution-live-font);
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin::before {
  content: none;
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin > .bo-evolution-full-skin {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin > h2 {
  position: absolute;
  z-index: 6;
  top: 8.25%;
  left: 14.2%;
  right: 15.5%;
  display: flex;
  width: auto;
  height: 4.5%;
  min-height: 0;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgb(255, 225, 143);
  font-family: var(--bo-evolution-display-font);
  font-size: clamp(1.15rem, 5.35cqw, 1.42rem);
  letter-spacing: 0.06em;
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 2px rgb(58, 25, 11), 0 0 8px rgba(255, 191, 73, 0.24);
  animation: boEvolutionTitleDrop 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin > h2::before {
  content: none;
  display: none;
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin > .battle-outcome-close {
  opacity: 0;
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin > .battle-outcome-close:focus-visible {
  opacity: 0.22;
  outline-color: rgb(255, 238, 169);
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin > .battle-outcome-body {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-complete {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: none;
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-complete::before,
.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-complete::after {
  content: none;
  display: none;
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-ceremony-heading {
  position: absolute;
  z-index: 6;
  top: 17.3%;
  left: 6%;
  display: flex;
  width: 88%;
  height: 5%;
  padding: 0 12px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 2px solid var(--pixel-gold, #d69b35);
  border-radius: 0;
  background: var(--pixel-wood-dark, #342014);
  box-shadow: inset 0 0 0 2px var(--pixel-ink, #24150f), 0 2px 0 var(--pixel-ink-deep, #110b08);
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-unlock-kicker,
.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-route-mark {
  position: static;
  display: flex;
  flex: 0 1 auto;
  width: auto;
  height: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--bo-evolution-live-font);
  font-size: clamp(12px, 3.3cqw, 14px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
  text-overflow: clip;
  white-space: normal;
  overflow: visible;
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-unlock-kicker {
  color: var(--pixel-bone, #f1d79c);
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-unlock-kicker i {
  display: none;
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-route-mark {
  padding-left: 12px;
  border-left: 1px solid var(--pixel-gold, #d69b35);
  color: rgb(88, 229, 206);
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-stage {
  position: absolute;
  z-index: 6;
  top: 22.8%;
  left: 6.5%;
  width: 87%;
  height: 27.2%;
  min-height: 0;
  max-height: none;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: boEvolutionStageRitual var(--bo-evolution-duration) linear both;
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-stage-vignette {
  display: block;
  inset: -6%;
  background:
    radial-gradient(circle at 8% 82%, rgba(255, 139, 32, 0.55), transparent 16%),
    radial-gradient(circle at 92% 82%, rgba(255, 139, 32, 0.55), transparent 16%),
    radial-gradient(circle at 50% 50%, rgba(64, 235, 207, 0.15), transparent 42%);
  mix-blend-mode: screen;
  animation: boEvolutionAmbientPulse var(--bo-evolution-duration) ease-in-out both;
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-portrait {
  bottom: 0;
  width: min(34cqw, 134px);
  height: min(34cqw, 134px);
  transform-origin: 50% 100%;
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-portrait .bb-unit-portrait-shell {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-portrait .bb-unit-portrait {
  position: absolute;
  left: var(--evolution-portrait-left, 0%);
  top: var(--evolution-portrait-top, 0%);
  width: var(--evolution-portrait-width, 100%);
  height: var(--evolution-portrait-height, 100%);
  max-width: none;
  max-height: none;
  object-fit: fill;
  transform: none;
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-ring {
  top: 50%;
  width: min(43cqw, 176px);
  height: min(43cqw, 176px);
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-burst,
.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-particles {
  top: 50%;
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-energy-column {
  top: 4%;
  height: 91%;
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-orbit-sigils,
.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-ring {
  top: 50%;
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-shockwaves i {
  top: 50%;
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-pedestal-glow {
  bottom: 6%;
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-complete-copy {
  position: absolute;
  z-index: 6;
  top: 60%;
  left: 12%;
  display: grid;
  width: 76%;
  height: 20%;
  padding: 0;
  grid-template-rows: 17% 33% 19% 31%;
  align-items: center;
  justify-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
  animation: boEvolutionCopyIn 0.54s var(--bo-evolution-copy-delay) cubic-bezier(0.16, 1, 0.3, 1) both;
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-copy-kicker {
  max-width: 100%;
  padding: 0;
  background: transparent;
  color: rgb(92, 229, 207);
  font-size: clamp(10px, 2.8cqw, 12px);
  line-height: 1;
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-complete-copy h3 {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  color: rgb(255, 224, 131);
  font-family: var(--bo-evolution-display-font);
  font-size: clamp(16px, 5cqw, 24px);
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-upgrade-path {
  display: flex;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: rgb(207, 215, 192);
  font-size: clamp(10px, 2.9cqw, 13px);
  line-height: 1.1;
  white-space: normal;
  overflow-wrap: anywhere;
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-complete-copy p {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  color: rgb(232, 226, 190);
  font-size: clamp(11px, 3.1cqw, 14px);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin > .modal-actions {
  left: 5.9%;
  right: 5.9%;
  bottom: 5.6%;
  height: 9.9%;
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin > .modal-actions .modal-btn {
  height: 100%;
  font-family: var(--bo-evolution-live-font);
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 1;
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin > .modal-actions .battle-share-btn {
  --bo-action-padding: 0 6% 0 24%;
  --bo-action-color: rgb(255, 239, 188);
  --bo-action-text-shadow: 0 2px rgb(43, 22, 11), 1px 0 rgb(43, 22, 11), -1px 0 rgb(43, 22, 11);
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin > .modal-actions .battle-next-btn {
  --bo-action-padding: 0 6% 0 26%;
  --okey-font-ui: var(--bo-evolution-display-font);
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin > .modal-actions .battle-next-btn > span:last-child {
  color: rgb(76, 37, 8);
  text-shadow: 0 1px rgba(255, 244, 174, 0.72);
  white-space: nowrap;
  -webkit-text-fill-color: rgb(76, 37, 8);
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin > .modal-actions .bo-map-icon {
  display: none;
}

html[lang^="en"] .modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin {
  --bo-evolution-live-font: "Okey Atkinson Hyperlegible Next", "Outfit", system-ui, sans-serif;
  --bo-evolution-display-font: var(--okey-font-english-display);
}

html[lang^="en"] .modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin > .modal-actions .battle-share-btn {
  --bo-action-font-size: clamp(14px, 3.8cqw, 16px);
}

html[lang^="en"] .modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin > .modal-actions .battle-next-btn {
  --bo-action-font-size: clamp(15px, 4.1cqw, 17px);
  text-transform: none;
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.is-evolution-running > .modal-actions {
  filter: none;
  pointer-events: none;
}

.modal-overlay.is-evolution-presentation .battle-outcome-card.is-evolution-running > .modal-actions .modal-btn {
  cursor: default;
}

html[data-performance-mode="smooth"] .modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin {
  --bo-evolution-duration: 1.4s;
  --bo-evolution-copy-delay: 0.96s;
}

html[data-performance-mode="smooth"] .modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-stage {
  animation: none;
}

html[data-performance-mode="smooth"] .modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-energy-column {
  filter: none;
}

html[data-performance-mode="smooth"] .modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-orbit-sigils i:nth-child(n+5),
html[data-performance-mode="smooth"] .modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-particles i:nth-child(n+13),
html[data-performance-mode="smooth"] .modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-shockwaves i:nth-child(3) {
  display: none;
}

@media (prefers-reduced-motion: reduce) {

  .modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin > h2,
  .modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-stage,
  .modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-stage-vignette,
  .modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-complete-copy {
    animation: none;
  }

  .modal-overlay.is-evolution-presentation .battle-outcome-card.uses-evolution-skin .bo-evolution-complete-copy {
    opacity: 1;
    filter: none;
    transform: none;
  }
}