/* A readable, skippable result sequence between the persistent game controls. */
#battle-ending.won {
  position: fixed;
  top: var(--celebration-top, 48px);
  bottom: auto;
  left: 0;
  right: 0;
  height: var(--celebration-height, calc(100dvh - 130px));
  width: auto;
  transform: none;
  z-index: 44;
  display: grid;
  place-items: center;
  padding: 14px;
  border: 0;
  border-radius: 0;
  background: #0b243ed9;
  box-shadow: none;
  overflow: hidden;
}
#battle-ending.won span {
  display: block;
}
#battle-ending.won .celebration-scene {
  width: min(520px, 100%);
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 18px;
}
#battle-ending.won .celebration-card {
  width: 100%;
  position: relative;
  border: 3px solid #f3d587;
  border-radius: 26px;
  padding: 20px;
  color: #ffeec2;
  background: linear-gradient(145deg, #346475, #143650 60%, #102840);
  box-shadow:
    inset 0 3px #a0c9c333,
    0 7px #061c32,
    0 20px 70px #040f2577;
  animation: celebration-card-enter 0.65s cubic-bezier(0.16, 0.9, 0.3, 1.2) both;
}
#battle-ending.won h2 {
  font:
    38px/1.05 'Lilita One',
    sans-serif;
  margin: 4px 0 12px;
  color: #fff2bd;
  text-shadow:
    0 3px #a37335,
    0 5px #102840;
}
#battle-ending.won .celebration-kicker {
  font:
    900 13px/1.2 'Nunito',
    sans-serif;
  letter-spacing: 0.12em;
  color: #f4cc7f;
  margin: 0 0 8px;
}
#battle-ending.won .celebration-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: min(340px, 100%);
}
#battle-ending.won .celebration-actions .primary {
  width: 100%;
  min-height: 52px;
  padding: 8px 10px;
  border: 3px solid #ffedaf;
  border-radius: 16px;
  box-shadow:
    inset 0 3px #fff5ce,
    0 5px #97642c;
  background: linear-gradient(#ffe99f, #efb33c);
  font:
    24px/1.1 'Lilita One',
    sans-serif;
  color: #684318;
  text-shadow: 0 1px #fff2be;
}
#battle-ending.won[data-stage='destruction'] {
  position: fixed;
  top: var(--celebration-top, 48px);
  bottom: auto;
  left: 0;
  right: 0;
  height: var(--celebration-height, calc(100dvh - 130px));
  z-index: 24;
  padding: 15px;
  background: radial-gradient(ellipse at center, #06293a22, #07243977);
  pointer-events: none;
}
#battle-ending.won[data-stage='destruction'] button {
  pointer-events: auto;
}
#battle-ending.won .hq-triumph {
  position: relative;
  width: 100%;
  padding: 14px 0;
  isolation: isolate;
  animation: hq-title-strike 0.8s both;
}
.hq-triumph::before {
  content: '';
  position: absolute;
  inset: -70px -30px;
  z-index: -1;
  background: repeating-conic-gradient(
    from 0deg,
    #ffe18a00 0deg 16deg,
    #ffdf7438 17deg 21deg,
    #ffe18a00 22deg 40deg
  );
  mask-image: radial-gradient(ellipse, #000, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse, #000, transparent 65%);
  animation: triumph-rays 10s linear both;
}
#battle-ending.won .triumph-crest {
  width: 90px;
  height: 90px;
  filter: drop-shadow(0 5px #183342) drop-shadow(0 0 22px #ffc96d99);
}
#battle-ending.won .hq-triumph h2 {
  font-size: clamp(30px, 7vw, 58px);
  margin: 0;
  -webkit-text-stroke: 1px #946024;
  text-shadow:
    0 4px #a16124,
    0 7px #572f23,
    0 11px 24px #07182d;
}
#battle-ending.won .hq-triumph h2 span {
  font-size: 1.08em;
  line-height: 1;
  color: #ffdf71;
}
.triumph-line {
  height: 4px;
  margin: 16px 0 0;
  background: linear-gradient(90deg, transparent, #ffeab0, transparent);
  box-shadow: 0 0 18px #ffcd50;
  animation: triumph-line 0.6s 0.35s both;
}
.reward-medals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.reward-medal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 10px 4px;
  min-height: 130px;
  background: radial-gradient(ellipse at top, #70abc466, #173b5277);
  border: 1px solid #65969a;
  border-radius: 18px;
  animation: reward-medal-enter 0.6s cubic-bezier(0.18, 0.8, 0.3, 1.25) both;
  animation-delay: var(--reveal-delay);
}
.reward-medal img {
  width: 52px;
  height: 52px;
  filter: drop-shadow(0 4px 2px #0b223b77);
}
#battle-ending.won .reward-medal strong {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  font:
    40px/1.1 'Lilita One',
    sans-serif;
  color: #fff0b4;
  font-variant-numeric: tabular-nums;
}
.reward-medal strong small {
  font-size: 22px;
}
#battle-ending.won .reward-medal span {
  font:
    800 14px/1.2 'Nunito',
    sans-serif;
  color: #d7edf0;
}
#battle-ending.won .hero-reveal {
  display: grid;
  grid-template-columns: 40% 1fr;
  align-items: center;
  gap: 18px;
  padding: 22px 18px;
  overflow: hidden;
}
.hero-spotlight {
  position: relative;
  isolation: isolate;
  padding: 8px 0 16px;
}
.hero-rays {
  position: absolute;
  z-index: -1;
  inset: -65px -55px;
  background: repeating-conic-gradient(#eabf5944 0deg 9deg, transparent 10deg 28deg);
  mask-image: radial-gradient(ellipse, #000, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse, #000, transparent 65%);
  animation: triumph-rays 18s linear infinite;
}
.hero-spotlight > svg {
  display: block;
  width: 100%;
  height: 240px;
  border: 4px solid #f6d782;
  border-radius: 24px;
  box-shadow:
    inset 0 2px #fff6c7,
    0 7px #9a692e,
    0 12px 35px #081b32;
  background: #15374e;
  transform: rotate(-5deg);
  animation: hero-card-arrive 0.85s cubic-bezier(0.2, 0.8, 0.3, 1.15) both;
}
.hero-spotlight .hero-medal {
  position: absolute;
  bottom: -7px;
  left: 50%;
  width: 66px;
  height: 72px;
  transform: translateX(-50%);
  filter: drop-shadow(0 3px #815728);
}
#battle-ending.won .hero-honors {
  text-align: left;
}
#battle-ending.won .hero-honors h2 {
  font-size: 34px;
}
#battle-ending.won .hero-tactic {
  font:
    600 14px/1.35 'Nunito',
    sans-serif;
  color: #d4e6e7;
  margin: 0 0 12px;
}
.hero-damage {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  column-gap: 5px;
}
.hero-damage img {
  width: 34px;
  height: 38px;
}
#battle-ending.won .hero-damage strong {
  font:
    46px/1 'Lilita One',
    sans-serif;
  color: #ffe095;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 3px #704c26;
}
#battle-ending.won .hero-damage span {
  grid-column: 2;
  font:
    800 14px 'Nunito',
    sans-serif;
}
.hero-share {
  height: 9px;
  margin: 16px 0 5px;
  border: 1px solid #608384;
  border-radius: 8px;
  background: #0c283e;
  overflow: hidden;
}
.hero-share i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #e1a32c, #ffe9a0);
  border-radius: 6px;
}
#battle-ending.won .hero-share-label {
  margin: 0;
  font:
    800 13px/1.25 'Nunito',
    sans-serif;
  color: #b9d8d9;
}
@keyframes celebration-card-enter {
  from {
    opacity: 0;
    transform: translateY(25px) scale(0.87);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes hq-title-strike {
  0% {
    opacity: 0;
    transform: scale(1.6);
  }
  35% {
    opacity: 1;
    transform: scale(0.93);
  }
  56% {
    transform: translateX(-3px) scale(1.04);
  }
  75% {
    transform: translateX(2px) scale(0.99);
  }
  100% {
    transform: none;
  }
}
@keyframes triumph-rays {
  to {
    transform: rotate(90deg);
  }
}
@keyframes triumph-line {
  from {
    transform: scaleX(0);
    opacity: 0;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}
@keyframes reward-medal-enter {
  from {
    opacity: 0;
    transform: translateY(20px) rotate(-4deg) scale(0.75);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes hero-card-arrive {
  from {
    opacity: 0;
    transform: translateX(-60px) rotate(-18deg) scale(0.7);
  }
  to {
    opacity: 1;
    transform: rotate(-5deg);
  }
}
#battle-ending.suspended *,
#battle-ending.suspended *::before,
#battle-ending.suspended *::after {
  animation-play-state: paused !important;
}
@media (max-width: 600px) and (max-height: 740px) {
  #battle-ending.won {
    padding: 10px;
  }
  #battle-ending.won .celebration-scene {
    gap: 12px;
  }
  #battle-ending.won .celebration-card {
    padding: 14px;
    border-radius: 22px;
  }
  #battle-ending.won h2 {
    font-size: 29px;
  }
  .reward-medals {
    gap: 8px;
  }
  .reward-medal {
    min-height: 100px;
    padding: 7px 3px;
  }
  .reward-medal img {
    width: 42px;
    height: 42px;
  }
  #battle-ending.won .reward-medal strong {
    font-size: 34px;
  }
  #battle-ending.won .hero-reveal {
    grid-template-columns: 36% 1fr;
    gap: 12px;
  }
  .hero-spotlight > svg {
    height: 188px;
    border-radius: 18px;
  }
  #battle-ending.won .hero-honors h2 {
    font-size: 28px;
  }
  #battle-ending.won .hero-damage strong {
    font-size: 36px;
  }
  #battle-ending.won .hero-tactic {
    font-size: 13px;
  }
  #battle-ending.won .celebration-actions .primary {
    min-height: 48px;
    font-size: 21px;
  }
  #battle-ending.won .triumph-crest {
    width: 64px;
    height: 64px;
  }
}
@media (orientation: landscape) and (max-height: 600px) {
  #battle-ending.won .celebration-scene {
    width: min(840px, 100%);
    flex-direction: row;
    gap: 16px;
  }
  #battle-ending.won .celebration-card {
    flex: 1;
    min-width: 0;
    padding: 12px;
  }
  #battle-ending.won .celebration-actions {
    width: 180px;
    flex: 0 0 180px;
  }
  #battle-ending.won h2 {
    font-size: 27px;
    margin-bottom: 10px;
  }
  .reward-medals {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
  .reward-medal {
    min-height: 105px;
    padding: 7px 2px;
  }
  .reward-medal img {
    width: 40px;
    height: 40px;
  }
  #battle-ending.won .reward-medal strong {
    font-size: 30px;
  }
  #battle-ending.won .reward-medal span {
    font-size: 13px;
  }
  #battle-ending.won .hero-reveal {
    grid-template-columns: 130px 1fr;
    gap: 18px;
  }
  .hero-spotlight > svg {
    height: 165px;
  }
  .hero-spotlight .hero-medal {
    width: 50px;
    height: 54px;
  }
  #battle-ending.won .hero-honors h2 {
    font-size: 30px;
  }
  #battle-ending.won .hero-tactic {
    margin: 0 0 6px;
    font-size: 13px;
  }
  #battle-ending.won .hero-damage strong {
    font-size: 35px;
  }
  .hero-share {
    margin-top: 8px;
  }
  #battle-ending.won .celebration-actions .primary {
    font-size: 21px;
  }
  #battle-ending.won .triumph-crest {
    width: 70px;
    height: 70px;
  }
  #battle-ending.won .hq-triumph h2 {
    font-size: 36px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #battle-ending.won *,
  #battle-ending.won *::before,
  #battle-ending.won *::after {
    animation: none !important;
  }
}
@media (max-height: 590px) and (max-width: 600px) {
  #battle-ending.won .hq-triumph {
    padding: 4px 0;
  }
  #battle-ending.won .hq-triumph h2 {
    font-size: 27px;
  }
  #battle-ending.won .triumph-crest {
    width: 46px;
    height: 46px;
  }
  #battle-ending.won .celebration-actions .primary {
    min-height: 44px;
    font-size: 20px;
  }
}
.map-container:has(#battle-ending:not([hidden])) .battle-hud,
.map-container:has(#battle-ending:not([hidden])) #rally,
.map-container:has(#battle-ending:not([hidden])) .field-commands {
  visibility: hidden;
}
@media (max-height: 590px) and (max-width: 600px) {
  #battle-ending.won .celebration-card {
    padding: 12px;
  }
  #battle-ending.won .celebration-scene {
    gap: 10px;
  }
}

/* Rewards float in the celebration light, without nested panels. */
#battle-ending.won .reward-reveal {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
}
#battle-ending.won[data-stage='rewards'] {
  background: radial-gradient(ellipse at 50% 42%, #285568f5, #071d33f5 75%);
}
.reward-reveal .reward-medal {
  border: 0;
  border-radius: 0;
  background: none;
}
.reward-reveal .reward-medal::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse, #f6d67b28, transparent 68%);
}
.reward-reveal .reward-medal img {
  width: 66px;
  height: 66px;
}
#battle-ending.won .hq-triumph::after {
  content: '';
  position: absolute;
  inset: -20%;
  border: 5px solid #ffe392;
  border-radius: 50%;
  pointer-events: none;
  animation: headquarters-shockwave 1.2s ease-out both;
}
@keyframes headquarters-shockwave {
  from {
    opacity: 1;
    transform: scale(0.15);
  }
  to {
    opacity: 0;
    transform: scale(1.8);
  }
}
#battle-announcement {
  position: absolute;
  top: 26%;
  left: 0;
  right: 0;
  z-index: 25;
  pointer-events: none;
  display: grid;
  place-items: center;
}
#battle-announcement[hidden] {
  display: none;
}
.outpost-impact {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff1c0;
  text-align: left;
  padding: 14px 24px;
  background: linear-gradient(90deg, transparent, #17394bea 15%, #17394bea 85%, transparent);
  animation: outpost-announcement 3s both;
}
.outpost-impact img {
  width: 58px;
  height: 58px;
  filter: drop-shadow(0 3px #663b1b);
}
.outpost-impact span,
.outpost-impact small {
  display: block;
  font:
    900 12px/1.4 Nunito,
    sans-serif;
}
.outpost-impact strong {
  display: block;
  font:
    38px/1 'Lilita One',
    sans-serif;
  color: #ffda70;
  text-shadow:
    0 3px #8a4e27,
    0 5px #1a2534;
}
.outpost-impact.is-loss strong {
  color: #ff9f88;
}
.outpost-impact i {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 3px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ffe8a0, transparent);
}
@keyframes outpost-announcement {
  0% {
    opacity: 0;
    transform: scale(1.45) rotate(-4deg);
  }
  12% {
    opacity: 1;
    transform: scale(0.95) rotate(1deg);
  }
  20%,
  78% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translateY(-18px);
  }
}
@media (max-height: 700px) {
  .reward-reveal .reward-medal img {
    width: 46px;
    height: 46px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .outpost-impact {
    animation: none;
  }
}

/* The reward reveal is an open gem pile, followed by its purpose and battle stats. */
#battle-ending.won .loot-reveal {
  padding: 0 12px;
  text-align: center;
  border: 0;
  background: none;
  box-shadow: none;
}
#battle-ending.won .loot-reveal h2 {
  margin: 0;
}
.loot-stage {
  height: 126px;
  width: 100%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.loot-glow {
  position: absolute;
  inset: 5px 3% -10px;
  background: radial-gradient(ellipse at 50% 75%, #bcffff88, #2ed6f644 35%, transparent 70%);
}
.loot-glow::after {
  content: '';
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 6px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #a0ffffaa, #249bd744 45%, transparent 70%);
}
.loot-heap {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
}
.loot-gem {
  position: absolute;
  left: calc(50% - 19px);
  bottom: 8px;
  width: 38px;
  height: 38px;
  filter: drop-shadow(1px 4px 2px #03142599);
  animation: loot-gather 1.15s linear both paused;
  animation-delay: calc((var(--launch) - var(--loot-time, 0)) * 1s);
}
.loot-gem > img {
  width: 100%;
  height: 100%;
  display: block;
}
.loot-facet {
  position: absolute;
  inset: 0;
  -webkit-mask: url('art/icons/loot-crystal.svg') center / contain no-repeat;
  mask: url('art/icons/loot-crystal.svg') center / contain no-repeat;
  background: linear-gradient(
      115deg,
      transparent 35%,
      #ffffff44 43%,
      white 49%,
      #ffffff55 54%,
      transparent 62%
    ) -100px
    0 / 200% 100% no-repeat;
  animation: loot-facet-glint 3.1s linear infinite both paused;
  animation-delay: calc((var(--glint) - var(--loot-time, 0)) * 1s);
}
.loot-spark {
  position: absolute;
  width: 23px;
  height: 23px;
  left: 2px;
  top: -4px;
  background: #efffff;
  clip-path: polygon(50% 0, 59% 39%, 100% 50%, 59% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 4px #fff);
  animation: loot-sparkle 2.3s ease-in-out infinite both paused;
  animation-delay: calc((var(--glint) - 0.3 - var(--loot-time, 0)) * 1s);
}
@keyframes loot-gather {
  0% {
    opacity: 0;
    transform: translate(var(--from-x), var(--from-y)) rotate(var(--spin)) scale(0.3);
  }
  15% {
    opacity: 1;
    transform: translate(calc(var(--from-x) * 0.7), calc(var(--from-y) * 0.82))
      rotate(calc(var(--spin) * 0.7)) scale(calc(var(--gem-size) * 0.85));
  }
  42% {
    opacity: 1;
    transform: translate(var(--arc-x), calc(var(--pile-y) - 62px)) rotate(calc(var(--spin) * 0.3))
      scale(calc(var(--gem-size) * 1.12));
  }
  68% {
    opacity: 1;
    transform: translate(var(--pile-x), calc(var(--pile-y) + 4px)) rotate(calc(var(--turn) - 12deg))
      scale(calc(var(--gem-size) * 1.07), calc(var(--gem-size) * 0.88));
  }
  81% {
    opacity: 1;
    transform: translate(calc(var(--pile-x) + 3px), calc(var(--pile-y) - 12px))
      rotate(calc(var(--turn) + 8deg)) scale(var(--gem-size));
  }
  93% {
    opacity: 1;
    transform: translate(var(--pile-x), calc(var(--pile-y) + 1px)) rotate(calc(var(--turn) - 3deg))
      scale(var(--gem-size));
  }
  100% {
    opacity: 1;
    transform: translate(var(--pile-x), var(--pile-y)) rotate(var(--turn)) scale(var(--gem-size));
  }
}
@keyframes loot-facet-glint {
  0%,
  12% {
    opacity: 0;
    background-position: -100px 0;
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    background-position: 100px 0;
  }
  41%,
  100% {
    opacity: 0;
    background-position: 100px 0;
  }
}
@keyframes loot-sparkle {
  0%,
  100% {
    opacity: 0;
    transform: rotate(-25deg) scale(0.15);
  }
  15% {
    opacity: 1;
    transform: rotate(0deg) scale(1.2);
  }
  30% {
    opacity: 0.7;
    transform: rotate(35deg) scale(0.5);
  }
  42% {
    opacity: 0;
    transform: rotate(50deg) scale(0.1);
  }
}

/* One aligned card row per purpose; costs never resemble a reward or a purchase button. */
.loot-prize {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90px;
}
.loot-prize .loot-stage {
  width: 235px;
  height: 100%;
  flex: 0 1 235px;
}
.loot-prize .loot-heap {
  transform: scale(0.88);
}
#battle-ending.won .loot-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #b3f9ff;
  margin: 0;
  min-width: 78px;
}
#battle-ending.won .loot-total strong {
  font:
    58px/1 'Lilita One',
    sans-serif;
  font-variant-numeric: tabular-nums;
  text-shadow:
    0 4px #12647f,
    0 0 25px #52e1ed55;
}
#battle-ending.won .loot-total span {
  font:
    19px/1 'Lilita One',
    sans-serif;
}
#battle-ending.won .loot-reveal {
  padding: 0;
}
.loot-reveal .celebration-kicker {
  display: none;
}
.loot-training {
  display: grid;
  grid-template-columns: 106px 1fr;
  align-items: center;
  gap: 5px 10px;
  margin: 2px auto 0;
  animation: loot-detail-enter 0.6s 2.1s both;
}
.loot-training-art {
  height: 70px;
}
.loot-training-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 5px 7px #0007);
}
.loot-training-copy > strong,
.loot-recruit-heading > strong {
  display: block;
  color: #fff0bd;
  font:
    22px/1.1 'Lilita One',
    sans-serif;
}
.loot-training-copy {
  text-align: left;
  min-width: 0;
}
#battle-ending.won .loot-school-gate {
  display: inline;
  white-space: nowrap;
}
.loot-upgrades,
.loot-recruits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}
.loot-upgrades {
  grid-column: 1 / -1;
}
.loot-upgrade-card,
.loot-recruit-card {
  min-width: 0;
  text-align: center;
}
.loot-mini-portrait {
  position: relative;
  width: min(100%, 94px);
  margin: 0 auto;
  border: 3px solid #f1cc72;
  border-radius: 12px;
  background: #15354b;
  box-shadow:
    inset 0 2px #fff1b8,
    0 3px #96632a,
    0 6px 12px #04132488;
}
.loot-mini-portrait > svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 9px;
}
.loot-card-name {
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;
  padding: 9px 1px 4px;
  border-radius: 0 0 9px 9px;
  background: linear-gradient(transparent, #071c35ee 45%);
  color: #fff6d4;
  font:
    800 12px/1.1 Nunito,
    sans-serif;
  text-shadow: 0 2px #061727;
}
.loot-ranks {
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  background: linear-gradient(#416574, #153349);
  border: 1px solid #ffdf95;
  border-radius: 7px;
  box-shadow: 0 2px 3px #061727aa;
  color: #c1d7df;
  font:
    17px/1 'Lilita One',
    sans-serif;
}
.loot-ranks strong {
  color: #fff4b6;
  font: inherit;
}
.loot-ranks i {
  font: inherit;
  color: #fbd77b;
}
.loot-card-benefit {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
  height: 20px;
  color: #b9f2d5;
}
.loot-card-benefit img {
  width: 15px;
  height: 15px;
}
.loot-card-benefit em {
  font:
    900 11px/1 Nunito,
    sans-serif;
  font-style: normal;
}
.loot-price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 23px;
  color: #b4f7ff;
}
.loot-price small {
  font:
    800 11px Nunito,
    sans-serif;
  color: #d7e5e7;
}
.loot-price img {
  width: 21px;
  height: 21px;
  filter: drop-shadow(0 2px 1px #073047);
}
.loot-price b {
  font:
    21px/1 'Lilita One',
    sans-serif;
}
.loot-recruit {
  margin-top: 10px;
  animation: loot-detail-enter 0.6s 2.3s both;
}
.loot-recruit-heading {
  margin-bottom: 7px;
}
.loot-recruit-heading > strong {
  font-size: 20px;
}
.loot-recruit-heading small {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font:
    700 10px/1.2 Nunito,
    sans-serif;
  color: #bdced8;
  margin-top: 2px;
}
.loot-recruit-heading small img {
  width: 13px;
  height: 13px;
}
.loot-recruit-card .loot-mini-portrait {
  border-color: #c2b0ff;
  box-shadow:
    0 3px #6861a0,
    0 0 16px #8a76ec44;
}
.loot-recruit-card .loot-price {
  margin-top: 3px;
}
.loot-battle-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 8px;
  animation: loot-detail-enter 0.6s 2.4s both;
}
.loot-battle-stats > div {
  display: grid;
  grid-template-columns: 24px auto;
  align-items: center;
  gap: 0 5px;
}
.loot-battle-stats img {
  width: 24px;
  height: 24px;
}
.loot-battle-stats strong {
  color: #fff0bd;
  font:
    25px/1 'Lilita One',
    sans-serif;
  text-align: left;
}
.loot-battle-stats small {
  font-size: 15px;
}
#battle-ending.won .loot-battle-stats span {
  grid-column: 1 / -1;
  font:
    800 11px/1.1 Nunito,
    sans-serif;
  color: #c6dcdf;
}
#battle-ending.won[data-stage='rewards'] .celebration-scene {
  gap: 10px;
}
.loot-aura {
  z-index: 100;
  left: calc(50% + var(--spark-x) - 11px);
  top: auto;
  bottom: calc(8px - var(--spark-y));
  width: 26px;
  height: 26px;
}
@keyframes loot-detail-enter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (min-height: 900px) and (orientation: portrait) {
  .loot-reveal .celebration-kicker {
    display: block;
  }
  .loot-prize {
    height: 130px;
  }
  .loot-prize .loot-stage {
    flex-basis: 300px;
    width: 300px;
  }
  .loot-prize .loot-heap {
    transform: scale(1.1);
  }
  .loot-training {
    grid-template-columns: 140px 1fr;
    margin-top: 12px;
    gap: 10px;
  }
  .loot-training-art {
    height: 105px;
  }
  .loot-mini-portrait {
    width: 122px;
  }
  .loot-card-name {
    font-size: 15px;
  }
  .loot-recruit-card .loot-mini-portrait {
  }
  .loot-recruit {
    margin-top: 16px;
  }
  .loot-price small,
  .loot-card-benefit em {
    font-size: 13px;
  }
  .loot-price {
    min-height: 29px;
  }
  .loot-price b {
    font-size: 25px;
  }
  .loot-battle-stats {
    margin-top: 16px;
  }
}
@media (max-height: 700px) and (orientation: portrait) {
  #battle-ending.won[data-stage='rewards'] {
    padding: 8px 12px;
  }
  #battle-ending.won[data-stage='rewards'] .celebration-scene {
    gap: 5px;
  }
  #battle-ending.won .loot-reveal h2 {
    font-size: 27px;
  }
  .loot-prize {
    height: 65px;
  }
  .loot-prize .loot-stage {
    flex-basis: 175px;
    width: 175px;
  }
  .loot-prize .loot-heap {
    transform: scale(0.65);
  }
  #battle-ending.won .loot-total strong {
    font-size: 40px;
  }
  #battle-ending.won .loot-total span {
    font-size: 15px;
  }
  .loot-training {
    grid-template-columns: 75px 1fr;
    gap: 5px;
    margin-top: 0;
  }
  .loot-training-art {
    height: 47px;
  }
  .loot-training-copy > strong {
    font-size: 16px;
  }
  .loot-upgrades,
  .loot-recruits {
    gap: 8px;
  }
  .loot-mini-portrait {
    width: 68px;
    border-width: 2px;
  }
  .loot-card-name {
    font-size: 10px;
    padding-top: 6px;
  }
  .loot-ranks {
    font-size: 13px;
    padding: 2px 6px;
    gap: 4px;
    top: -4px;
  }
  .loot-card-benefit {
    height: 15px;
    gap: 2px;
  }
  .loot-card-benefit img {
    width: 12px;
    height: 12px;
  }
  .loot-card-benefit em {
    font-size: 10px;
  }
  .loot-price {
    min-height: 19px;
    gap: 3px;
  }
  .loot-price small {
    font-size: 10px;
  }
  .loot-price img {
    width: 17px;
    height: 17px;
  }
  .loot-price b {
    font-size: 17px;
  }
  .loot-recruit {
    margin-top: 6px;
  }
  .loot-recruit-heading {
    margin-bottom: 4px;
  }
  .loot-recruit-heading > strong {
    font-size: 17px;
  }
  .loot-recruit-heading small {
    font-size: 9px;
    margin: 0;
  }
  .loot-recruit-heading small img {
    width: 11px;
    height: 11px;
  }
  .loot-recruit-card .loot-mini-portrait {
  }
  .loot-battle-stats {
    margin-top: 6px;
  }
  .loot-battle-stats strong {
    font-size: 21px;
  }
  .loot-battle-stats img {
    width: 21px;
    height: 21px;
  }
  #battle-ending.won .loot-battle-stats span {
    font-size: 10px;
  }
}
@media (min-width: 900px), (max-height: 850px) and (orientation: landscape) {
  #battle-ending.won[data-stage='rewards'] .celebration-scene {
    width: min(1120px, 100%);
    flex-direction: column;
    gap: 18px;
  }
  #battle-ending.won .loot-reveal {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr 1fr;
    align-items: center;
    column-gap: 28px;
  }
  .loot-reveal .celebration-heading {
    grid-column: 1;
    grid-row: 1;
  }
  .loot-prize {
    grid-column: 1;
    grid-row: 2;
    height: auto;
    flex-direction: column;
  }
  .loot-prize .loot-stage {
    width: 100%;
    height: 135px;
    flex: none;
  }
  .loot-prize .loot-heap {
    transform: scale(1);
  }
  .loot-training {
    grid-column: 2;
    grid-row: 1 / 4;
    grid-template-columns: 100px 1fr;
    gap: 12px 8px;
    margin: 0;
  }
  .loot-training-art {
    height: 105px;
  }
  .loot-training-copy > strong {
    font-size: 23px;
  }
  .loot-recruit {
    grid-column: 3;
    grid-row: 1 / 4;
    margin: 0;
  }
  .loot-recruit-heading {
    margin-bottom: 13px;
  }
  .loot-recruit-heading > strong {
    font-size: 23px;
  }
  .loot-recruit-heading small {
    font-size: 12px;
  }
  .loot-battle-stats {
    grid-column: 1;
    grid-row: 3;
  }
  .loot-mini-portrait {
  }
  .loot-recruit-card .loot-mini-portrait {
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  #battle-ending.won[data-stage='rewards'] {
    padding: 8px 12px;
  }
  #battle-ending.won[data-stage='rewards'] .celebration-scene {
    gap: 8px;
  }
  #battle-ending.won .loot-reveal {
    column-gap: 16px;
    grid-template-columns: 0.75fr 1.15fr 1fr;
  }
  #battle-ending.won .loot-reveal h2 {
    font-size: 25px;
  }
  .loot-prize .loot-stage {
    height: 85px;
  }
  .loot-prize .loot-heap {
    transform: scale(0.78);
  }
  #battle-ending.won .loot-total {
    flex-direction: row;
    gap: 5px;
  }
  #battle-ending.won .loot-total strong {
    font-size: 36px;
  }
  .loot-training {
    grid-template-columns: 74px 1fr;
    gap: 6px;
  }
  .loot-training-art {
    height: 65px;
  }
  .loot-training-copy > strong {
    font-size: 17px;
  }
  .loot-mini-portrait,
  .loot-recruit-card .loot-mini-portrait {
    width: 72px;
  }
  .loot-card-name {
    font-size: 10px;
  }
  .loot-card-benefit em {
    font-size: 10px;
  }
  .loot-price small {
    font-size: 10px;
  }
  .loot-price img {
    width: 18px;
    height: 18px;
  }
  .loot-price b {
    font-size: 18px;
  }
  .loot-recruit-heading > strong {
    font-size: 18px;
  }
  .loot-recruit-heading small {
    font-size: 10px;
  }
  .loot-battle-stats {
    margin-top: 4px;
  }
  .loot-battle-stats strong {
    font-size: 21px;
  }
  #battle-ending.won .loot-battle-stats span {
    font-size: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .loot-gem {
    animation: none;
    transform: translate(var(--pile-x), var(--pile-y)) rotate(var(--turn)) scale(var(--gem-size));
  }
  .loot-facet,
  .loot-spark,
  .loot-training,
  .loot-recruit,
  .loot-battle-stats {
    animation: none;
  }
  .loot-facet {
    opacity: 0;
  }
  .loot-spark {
    opacity: 0.7;
    transform: scale(0.55);
  }
}

#battle-ending.won[data-stage='rewards'] .celebration-actions {
  flex: none;
  width: min(340px, 100%);
}
@media (min-height: 701px) and (max-height: 899px) and (orientation: portrait) {
  .loot-training-art {
    height: 84px;
  }
}
@media (max-height: 600px) and (orientation: portrait) {
  .loot-prize {
    height: 55px;
  }
  .loot-prize .loot-heap {
    transform: scale(0.57);
  }
  .loot-training {
    gap: 3px 5px;
  }
  .loot-battle-stats > div {
    display: flex;
    gap: 4px;
  }
  #battle-ending.won .loot-battle-stats span {
    max-width: 45px;
    font-size: 9px;
    text-align: left;
  }
}

/* Loot and hero are focused reveals. Normal navigation returns with the victory screen. */
.shell:has(#battle-ending:not([hidden])[data-stage='rewards']) .game-nav,
.shell:has(#battle-ending:not([hidden])[data-stage='hero']) .game-nav {
  display: none;
}
#battle-ending.won[data-stage='rewards'] {
  overflow: visible;
}
.loot-prize {
  position: relative;
  z-index: 3;
  height: 75px;
  pointer-events: none;
}
.loot-stage {
  overflow: visible;
}
.loot-glow {
  inset: 0 3%;
}
.loot-mini-portrait {
  width: min(100%, 84px);
  aspect-ratio: 63 / 88;
  height: auto;
}
.loot-card-benefit {
  height: auto;
  min-height: 34px;
  flex-direction: column;
  gap: 1px;
  margin-top: 3px;
}
#battle-ending.won .loot-card-benefit span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.loot-unlock-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #f6d482;
  border-radius: 999px;
  padding: 3px 8px;
  color: #57401e;
  background: linear-gradient(#fff0b2, #e6ba5e);
  box-shadow: 0 2px #8c6b34;
  font:
    900 11px/1.1 Nunito,
    sans-serif;
  white-space: nowrap;
  margin: 0 0 6px;
}
.loot-training-copy .academy-unlock {
  margin: 8px 0 2px;
  padding: 5px 12px;
  font:
    20px/1.1 'Lilita One',
    sans-serif;
}
.loot-buy-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin: 5px 0 2px;
}
#battle-ending.won .loot-buy-stats span {
  display: flex;
  align-items: center;
  gap: 3px;
  font:
    800 11px/1.15 Nunito,
    sans-serif;
  color: #d9f1f1;
}
.loot-buy-stats img {
  width: 14px;
  height: 14px;
}
.loot-buy-stats b {
  color: #fff1b9;
}
@media (min-height: 900px) and (orientation: portrait) {
  .loot-prize {
    height: 105px;
  }
  .loot-mini-portrait {
    width: 112px;
  }
  .loot-unlock-pill {
    font-size: 13px;
  }
  #battle-ending.won .loot-buy-stats span {
    font-size: 13px;
  }
  .loot-buy-stats img {
    width: 17px;
    height: 17px;
  }
}
@media (min-width: 900px) {
  .loot-prize {
    height: auto;
  }
  .loot-mini-portrait {
    width: min(100%, 94px);
  }
  .loot-unlock-pill {
    padding-inline: 5px;
    font-size: 10px;
  }
}
@media (max-height: 700px) and (orientation: portrait) {
  .loot-prize {
    height: 55px;
  }
  .loot-training-copy .academy-unlock {
    font-size: 16px;
    margin-top: 4px;
    padding: 4px 9px;
  }
  .loot-training-art {
    height: 62px;
  }
  .loot-training {
    grid-template-columns: 80px 1fr;
  }
  .loot-mini-portrait {
    width: 74px;
  }
  .loot-unlock-pill {
    font-size: 9px;
    padding: 3px 5px;
  }
}
@media (max-height: 600px) and (orientation: portrait) {
  .loot-prize {
    height: 48px;
  }
  .loot-training-art {
    height: 52px;
  }
  .loot-training-copy > strong {
    font-size: 15px;
  }
  .loot-training-copy .academy-unlock {
    font-size: 15px;
    margin-top: 3px;
    padding: 3px 9px;
  }
  .loot-upgrade-card,
  .loot-recruit-card {
    position: relative;
  }
  .loot-mini-portrait {
    width: 82px;
  }
  .loot-card-name {
    top: 40px;
    bottom: auto;
    padding: 10px 0 3px;
    border-radius: 0;
    background: linear-gradient(transparent, #0a233de8 40%);
  }
  .loot-card-benefit,
  .loot-buy-stats {
    position: absolute;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    width: 78px;
    margin: 0;
    padding: 4px 0;
    background: #0a233dec;
    border-radius: 0 0 8px 8px;
  }
  .loot-card-benefit {
    min-height: 45px;
    justify-content: center;
  }
  .loot-card-benefit em {
    font-size: 10px;
  }
  #battle-ending.won .loot-buy-stats span {
    font-size: 9px;
    line-height: 12px;
  }
  .loot-buy-stats img {
    width: 11px;
    height: 11px;
  }
  .loot-recruit-card > .loot-unlock-pill {
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    font-size: 9px;
    padding: 3px 5px;
  }
  .loot-price,
  .loot-recruit-card .loot-price {
    margin-top: 3px;
  }
  .loot-recruit-heading {
    margin-bottom: 8px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  .loot-prize {
    height: auto;
  }
  .loot-mini-portrait,
  .loot-recruit-card .loot-mini-portrait {
    width: 67px;
    height: auto;
  }
  .loot-training-copy .academy-unlock {
    font-size: 16px;
    padding: 3px 8px;
    margin-top: 5px;
  }
  .loot-unlock-pill {
    font-size: 9px;
    padding: 3px 4px;
  }
  .loot-card-benefit {
    min-height: 28px;
  }
  .loot-buy-stats {
    margin-top: 3px;
  }
  #battle-ending.won .loot-buy-stats span {
    font-size: 10px;
  }
  .loot-buy-stats img {
    width: 11px;
    height: 11px;
  }
}
.loot-mini-portrait > svg {
  position: absolute;
  inset: 0;
}
@media (max-height: 600px) and (orientation: portrait) {
  .loot-prize {
    height: 43px;
  }
  .loot-mini-portrait {
    width: 68px;
  }
  .loot-card-name {
    top: 34px;
  }
  .loot-card-benefit,
  .loot-buy-stats {
    top: 56px;
    width: 72px;
  }
  .loot-card-benefit {
    min-height: 44px;
  }
}

/* Confine flying gems at the viewport edge, not inside their small pile container. */
#battle-ending.won[data-stage='rewards'] {
  overflow: hidden;
  align-items: start;
  padding-top: 8px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}
#battle-ending.won[data-stage='rewards'] .celebration-scene {
  min-height: 0;
}
@media (min-width: 900px), (max-height: 850px) and (orientation: landscape) {
  .loot-prize {
    grid-row: 1 / 3;
  }
}
@media (min-height: 701px) and (max-height: 780px) and (orientation: portrait) {
  .loot-mini-portrait {
    width: 68px;
  }
  .loot-training-art {
    height: 70px;
  }
}

/* A full-stage hero spotlight, with no enclosing panel or stat boxes. */
#battle-ending.won[data-stage='hero'] {
  background: radial-gradient(ellipse at 50% 38%, #396879f5, #102e46fa 60%, #081d32fc);
}
#battle-ending.won[data-stage='hero'] .celebration-scene {
  width: min(760px, 100%);
  flex-direction: column;
  gap: 22px;
}
#battle-ending.won .hero-reveal {
  grid-template-columns: 1fr;
  gap: 12px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
#battle-ending.won .hero-banner {
  position: relative;
  z-index: 1;
  margin: 0;
  text-align: center;
  font:
    38px/1 'Lilita One',
    sans-serif;
  letter-spacing: 0.06em;
  color: #ffe6a1;
  text-shadow:
    0 3px #a66b25,
    0 6px 20px #061725;
  animation: hero-title-arrive 0.8s cubic-bezier(0.17, 0.85, 0.28, 1.25) both;
}
#battle-ending.won .hero-spotlight {
  width: 260px;
  justify-self: center;
  padding: 0 0 16px;
}
#battle-ending.won .hero-spotlight > svg {
  height: 260px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
  -webkit-mask-image: radial-gradient(ellipse at 50% 42%, #000 42%, transparent 73%);
  mask-image: radial-gradient(ellipse at 50% 42%, #000 42%, transparent 73%);
  animation: hero-portrait-arrive 1.1s cubic-bezier(0.17, 0.8, 0.25, 1.15) both;
}
#battle-ending.won .hero-rays {
  inset: -45%;
  background: repeating-conic-gradient(#ffd97770 0deg 6deg, transparent 7deg 23deg);
}
#battle-ending.won .hero-medal {
  width: 70px;
  height: 76px;
  bottom: -4px;
  animation: hero-medal-arrive 0.7s 0.45s cubic-bezier(0.2, 0.8, 0.3, 1.4) both;
}
#battle-ending.won .hero-honors {
  text-align: center;
}
#battle-ending.won .hero-honors h2 {
  font-size: 44px;
  margin: 0 0 14px;
}
#battle-ending.won .hero-damage {
  grid-template-columns: 46px auto;
  justify-content: center;
  column-gap: 10px;
  animation: hero-portrait-arrive 0.6s 0.3s both;
}
#battle-ending.won .hero-damage img {
  width: 46px;
  height: 52px;
}
#battle-ending.won .hero-damage strong {
  font-size: 64px;
}
#battle-ending.won .hero-damage span {
  font-size: 17px;
  text-align: left;
}
#battle-ending.won .hero-share-label {
  margin: 14px 0 0;
  font-size: 16px;
  color: #d4ebeb;
}
#battle-ending.won .hero-share-label b {
  color: #ffe398;
  font-size: 21px;
}
#battle-ending.won[data-stage='hero'] .celebration-actions {
  flex: none;
  width: min(340px, 100%);
}
@keyframes hero-title-arrive {
  0% {
    opacity: 0;
    transform: scale(1.5) translateY(-12px);
  }
  65% {
    opacity: 1;
    transform: scale(0.96);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes hero-portrait-arrive {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes hero-medal-arrive {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(2) rotate(-20deg);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}
@media (max-height: 740px) and (orientation: portrait) {
  #battle-ending.won .hero-spotlight {
    width: 190px;
  }
  #battle-ending.won .hero-spotlight > svg {
    height: 190px;
  }
  #battle-ending.won .hero-banner {
    font-size: 30px;
  }
  #battle-ending.won .hero-honors h2 {
    font-size: 32px;
    margin-bottom: 8px;
  }
  #battle-ending.won .hero-damage strong {
    font-size: 48px;
  }
  #battle-ending.won .hero-reveal {
    gap: 8px;
  }
  #battle-ending.won .hero-share-label {
    margin-top: 8px;
    font-size: 14px;
  }
  #battle-ending.won[data-stage='hero'] .celebration-scene {
    gap: 16px;
  }
}
@media (orientation: landscape) {
  #battle-ending.won .hero-reveal {
    grid-template-columns: 42% 1fr;
    gap: 12px 28px;
  }
  #battle-ending.won .hero-banner {
    grid-column: 1 / -1;
  }
  #battle-ending.won .hero-spotlight {
    width: 230px;
  }
  #battle-ending.won .hero-spotlight > svg {
    height: 230px;
  }
  #battle-ending.won .hero-honors h2 {
    font-size: 38px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  #battle-ending.won .hero-banner {
    font-size: 26px;
  }
  #battle-ending.won .hero-spotlight {
    width: 145px;
    padding-bottom: 4px;
  }
  #battle-ending.won .hero-spotlight > svg {
    height: 145px;
  }
  #battle-ending.won .hero-medal {
    width: 44px;
    height: 48px;
  }
  #battle-ending.won .hero-honors h2 {
    font-size: 28px;
    margin-bottom: 6px;
  }
  #battle-ending.won .hero-damage strong {
    font-size: 40px;
  }
  #battle-ending.won .hero-damage span {
    font-size: 14px;
  }
  #battle-ending.won .hero-share-label {
    margin-top: 6px;
    font-size: 13px;
  }
  #battle-ending.won .hero-reveal {
    gap: 6px 18px;
  }
  #battle-ending.won[data-stage='hero'] .celebration-scene {
    gap: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #battle-ending.won .hero-reveal,
  #battle-ending.won .hero-reveal * {
    animation: none !important;
  }
}