/* 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: absolute;
  inset: 0;
  height: auto;
  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;
  }
}