/* v2.31 battle layout refinement: clearer hierarchy, tighter spacing, less duplicate information */
.battle-screen.battle-visual-upgraded .battle-stage {
  width: min(760px, 100%);
  min-height: calc(100dvh - 20px);
  padding: 14px 14px 88px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(24, 20, 16, .82), rgba(7, 7, 8, .94));
}

.battle-screen.battle-visual-upgraded .battle-stage > .row.between {
  align-items: flex-start;
  gap: 12px;
  padding: 0 2px 10px;
  border-bottom: 1px solid rgba(219, 180, 111, .16);
}

.battle-screen.battle-visual-upgraded .battle-stage > .row.between .title {
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -.02em;
}

/* Progress is already expressed by the round track, so the repeated x/3 subtitle is removed. */
.battle-screen.battle-visual-upgraded .battle-stage > .row.between .small {
  display: none;
}

.battle-screen.battle-visual-upgraded .battle-combo-line {
  margin-top: 5px;
  color: rgba(239, 211, 157, .7);
  font-size: 10px;
}

.battle-screen.battle-visual-upgraded .battle-playback-state {
  flex: 0 0 auto;
  margin-top: 1px;
  padding: 5px 9px;
  border-color: rgba(218, 180, 110, .28);
  color: #ead6ad;
  background: rgba(19, 17, 15, .76);
  font-size: 10px;
}

/* The cards are rendered inside each fighter. The old top card row is intentionally hidden. */
.battle-screen.battle-visual-upgraded .battle-card-reveal,
.battle-screen.battle-visual-upgraded .battle-card-ready,
.battle-screen.battle-visual-upgraded .momentum-meter,
.battle-screen.battle-visual-upgraded .round-summary {
  display: none !important;
}

.battle-screen.battle-visual-upgraded .battle-round-track {
  gap: 8px;
  margin: 9px 0 8px;
}

.battle-screen.battle-visual-upgraded .battle-round-track i {
  width: 26px;
  height: 26px;
  border-color: rgba(171, 138, 85, .42);
  background: rgba(0, 0, 0, .2);
  color: rgba(232, 218, 192, .52);
  font-size: 10px;
}

.battle-screen.battle-visual-upgraded .battle-round-track i.done {
  border-color: rgba(194, 148, 72, .72);
  background: rgba(103, 71, 34, .78);
  color: #f4d792;
}

.battle-screen.battle-visual-upgraded .battle-round-track i.current {
  border-color: rgba(235, 190, 105, .92);
  color: #ffe5aa;
  box-shadow: 0 0 0 3px rgba(217, 155, 69, .1), 0 0 14px rgba(217, 155, 69, .42);
}

/* Keep the global result once, without repeating the card-name comparison sentence. */
.battle-screen.battle-visual-upgraded .card-resolution-banner {
  width: max-content;
  max-width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 9px;
  padding: 6px 13px;
  border: 1px solid rgba(224, 175, 92, .35);
  border-radius: 999px;
  background: rgba(31, 24, 18, .88);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  text-align: center;
}

.battle-screen.battle-visual-upgraded .card-resolution-banner b {
  color: #f0cf8e;
  font-size: 13px;
  line-height: 1.2;
}

.battle-screen.battle-visual-upgraded .card-resolution-banner span {
  display: none;
}

.battle-screen.battle-visual-upgraded .duel {
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  margin: 0 0 9px;
}

.battle-screen.battle-visual-upgraded .duel .fighter {
  position: relative;
  isolation: isolate;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 10px;
  overflow: visible;
  border-color: rgba(164, 128, 73, .42);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(44, 34, 25, .72), rgba(14, 13, 12, .9));
  box-shadow: inset 0 1px rgba(255, 255, 255, .025), 0 8px 24px rgba(0, 0, 0, .22);
}

.battle-screen.battle-visual-upgraded .versus {
  align-self: stretch;
  display: grid;
  place-items: center;
}

.battle-screen.battle-visual-upgraded .versus span {
  color: rgba(238, 205, 141, .74);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
}

.battle-screen.battle-visual-upgraded .fighter-visual-slot {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 210px;
  margin-bottom: 8px;
  overflow: hidden;
  border: 1px solid rgba(230, 194, 128, .18);
  border-radius: 11px;
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 234, 190, .07), transparent 46%),
    linear-gradient(180deg, rgba(8, 8, 9, .24), rgba(0, 0, 0, .18));
  box-shadow: inset 0 0 24px rgba(0, 0, 0, .2);
}

.battle-screen.battle-visual-upgraded .fighter-visual-slot > .portrait-wrap {
  display: grid;
  place-items: center;
  width: 100%;
  margin: 0;
}

.battle-screen.battle-visual-upgraded .fighter-visual-slot > .portrait-wrap[hidden] {
  display: none !important;
}

.battle-screen.battle-visual-upgraded .fighter-visual-slot .portrait-lg {
  width: min(158px, 76%);
  height: 204px;
  object-fit: cover;
  object-position: center top;
  border-radius: 11px;
  box-shadow: 0 11px 28px rgba(0, 0, 0, .4);
}

.battle-screen.battle-visual-upgraded .fighter-card-visual {
  position: relative;
  width: min(232px, 94%);
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto;
  gap: 0;
  margin: 0 auto;
  padding: 6px;
  overflow: hidden;
  border-radius: 13px;
  box-shadow: 0 13px 30px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 231, 181, .2);
  animation: visual-card-swap .3s cubic-bezier(.2, .8, .2, 1) both;
  pointer-events: none;
}

.battle-screen.battle-visual-upgraded .fighter-card-visual .battle-card-art {
  width: 100%;
  height: 178px !important;
  min-height: 178px !important;
  margin: 0;
  border-radius: 8px;
}

.battle-screen.battle-visual-upgraded .fighter-card-visual .battle-card-artwork {
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover;
  object-position: center;
}

.battle-screen.battle-visual-upgraded .fighter-card-visual .revealed-card-copy {
  align-self: stretch;
  padding: 7px 7px 4px;
}

.battle-screen.battle-visual-upgraded .fighter-card-visual .revealed-card-copy small {
  font-size: 8px;
}

.battle-screen.battle-visual-upgraded .fighter-card-visual .revealed-card-copy b {
  margin: 2px 0 0;
  color: #fff2d4;
  font-size: 15px;
  line-height: 1.25;
}

.battle-screen.battle-visual-upgraded .fighter-card-visual .revealed-card-copy p {
  display: none !important;
}

.battle-screen.battle-visual-upgraded .fighter-card-visual .battle-card-stars {
  font-size: 8px;
}

.battle-screen.battle-visual-upgraded .fighter-card-effect {
  display: none;
}

.battle-screen.battle-visual-upgraded .fighter-card-effect.active {
  min-height: 88px;
  display: grid;
  align-content: center;
  gap: 6px;
  margin: 0 0 8px;
  padding: 9px 10px 10px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-left: 2px solid #c69a58;
  border-radius: 9px;
  background: rgba(12, 12, 13, .72);
  text-align: left;
}

.battle-screen.battle-visual-upgraded .fighter-card-effect-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.battle-screen.battle-visual-upgraded .fighter-card-effect-head span {
  color: #d5b97f;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .03em;
}

.battle-screen.battle-visual-upgraded .fighter-card-effect-head em {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 999px;
  color: #ffe5b4;
  background: rgba(166, 109, 50, .24);
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
}

.battle-screen.battle-visual-upgraded .fighter-card-effect-copy {
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: 11px;
  line-height: 1.48;
  word-break: keep-all;
}

.battle-screen.battle-visual-upgraded .fighter-card-effect.fire {
  border-left-color: #e76a2b;
  background:
    linear-gradient(90deg, rgba(147, 50, 17, .13), transparent 42%),
    rgba(12, 12, 13, .78);
}

.battle-screen.battle-visual-upgraded .fighter-card-effect.fire .fighter-card-effect-head em {
  background: rgba(210, 74, 23, .38);
}

.battle-screen.battle-visual-upgraded .fighter-card-effect.failed {
  border-left-color: #777;
  opacity: .72;
}

.battle-screen.battle-visual-upgraded .fighter-card-effect.failed .fighter-card-effect-head em {
  color: #ddd;
  background: rgba(118, 118, 118, .22);
}

.battle-screen.battle-visual-upgraded .visual-fire-active .fighter-visual-slot::after {
  content: '';
  position: absolute;
  z-index: 9;
  left: -5%;
  right: -5%;
  bottom: -14px;
  height: 96px;
  background: url('/assets/effects-v300/fire_semireal.webp') center bottom / 110% 100% no-repeat;
  opacity: .94;
  filter: saturate(1.12) contrast(1.04) drop-shadow(0 -5px 11px rgba(255, 82, 20, .48));
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 63%, rgba(0,0,0,.66) 79%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, #000 63%, rgba(0,0,0,.66) 79%, transparent 100%);
  mix-blend-mode: screen;
  transform-origin: 50% 100%;
  animation: visual-fire-flicker .42s ease-in-out infinite alternate;
  pointer-events: none;
}
.battle-screen.battle-visual-upgraded .visual-fire-active .fighter-visual-slot::before {
  content: '';
  position: absolute;
  z-index: 10;
  left: 8%;
  right: 8%;
  bottom: 8px;
  height: 62px;
  background:
    radial-gradient(circle at 18% 84%, rgba(255,205,91,.82) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 48%, rgba(255,118,36,.72) 0 1.2px, transparent 2.5px),
    radial-gradient(circle at 66% 74%, rgba(255,185,72,.82) 0 1px, transparent 2.2px),
    radial-gradient(circle at 84% 35%, rgba(233,74,24,.68) 0 1.1px, transparent 2.4px);
  background-size: 34px 42px, 41px 51px, 47px 38px, 39px 55px;
  opacity: .58;
  animation: visual-fire-embers .72s linear infinite;
  pointer-events: none;
}
.battle-screen.battle-visual-upgraded .visual-fire-active .fighter-card-visual {
  box-shadow: 0 12px 24px rgba(0,0,0,.46), 0 8px 20px rgba(215,72,18,.20), inset 0 -10px 18px rgba(163,45,12,.18);
}

.battle-screen.battle-visual-upgraded .fighter-name {
  margin: 1px 0 3px;
  color: #f5dfb4;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
}

.battle-screen.battle-visual-upgraded .fighter > .small {
  margin: 0 0 5px;
  color: rgba(255, 255, 255, .5);
  font-size: 9px;
  text-align: center;
}

.battle-screen.battle-visual-upgraded .battle-deputy {
  margin: 2px auto 5px;
  transform: scale(.92);
  transform-origin: center;
}

.battle-screen.battle-visual-upgraded .fighter .hpbar {
  height: 8px;
  margin-top: auto;
  border-color: rgba(255, 255, 255, .1);
}

.battle-screen.battle-visual-upgraded .troop-number {
  margin-top: 4px;
  color: rgba(255, 255, 255, .68);
  font-size: 10px;
  text-align: center;
}

.battle-screen.battle-visual-upgraded .damage-pop {
  z-index: 12;
  font-size: clamp(24px, 3.5vw, 42px);
  text-shadow: 0 3px 10px rgba(0, 0, 0, .9);
}

.battle-screen.battle-visual-upgraded .clash-flash {
  filter: drop-shadow(0 0 17px rgba(255, 155, 66, .76));
}

.battle-screen.battle-visual-upgraded .battle-twist,
.battle-screen.battle-visual-upgraded .skill-cutin {
  margin-top: 7px;
  margin-bottom: 7px;
}

.battle-screen.battle-visual-upgraded .battle-log-area {
  max-height: 54px;
  margin: 7px 0 0;
  padding: 7px 8px 0;
  overflow-y: auto;
  border-top: 1px solid rgba(255, 255, 255, .07);
  opacity: .58;
}

.battle-screen.battle-visual-upgraded .battle-logline {
  font-size: 9px;
  line-height: 1.45;
}

.battle-screen.battle-visual-upgraded .battle-result-card {
  margin: 10px 0 0;
  padding: 14px;
  border-color: rgba(205, 161, 87, .42);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(37, 29, 21, .9), rgba(13, 12, 11, .94));
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}

.battle-screen.battle-visual-upgraded .battle-result-card > b {
  display: block;
  margin-bottom: 5px;
  color: #f0cf8e;
  font-size: 19px;
  text-align: center;
}

.battle-screen.battle-visual-upgraded .battle-result-card > p {
  margin: 3px 0;
  text-align: center;
}

.battle-screen.battle-visual-upgraded .battle-analysis {
  margin-top: 10px;
  gap: 8px;
}

.battle-screen.battle-visual-upgraded .analysis-column {
  padding: 9px;
  border-radius: 8px;
}

.battle-screen.battle-visual-upgraded .battle-buttons {
  width: min(720px, calc(100vw - 20px));
  grid-template-columns: 1.2fr 1.2fr .8fr .9fr;
  gap: 6px;
  padding: 7px;
  border-radius: 11px;
  background: rgba(10, 10, 11, .9);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .32);
  backdrop-filter: blur(12px);
}

.battle-screen.battle-visual-upgraded .battle-buttons .btn {
  min-height: 40px;
  padding: 8px 9px;
  font-size: 11px;
}

/* End state: last-round result and old speech row are redundant with the final result/dialogue. */
.battle-screen.battle-visual-upgraded.visual-finished .card-resolution-banner,
.battle-screen.battle-visual-upgraded.visual-finished .battle-dialogue-row,
.battle-screen.battle-visual-upgraded .battle-dialogue-row.visual-dialogue-relocated {
  display: none !important;
}

.battle-screen.battle-visual-upgraded .fighter-card-effect.dialogue {
  min-height: 76px;
  place-items: center;
  padding: 11px 12px;
  border-left-color: rgba(225, 190, 123, .72);
  background:
    radial-gradient(circle at 50% 0%, rgba(225, 190, 123, .08), transparent 48%),
    rgba(11, 10, 10, .78);
  animation: visual-dialogue-in .3s ease both;
}

.battle-screen.battle-visual-upgraded .fighter-end-dialogue {
  margin: 0;
  color: #f4ecde;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.56;
  text-align: center;
  text-wrap: balance;
  word-break: keep-all;
}

.battle-screen.battle-visual-upgraded.visual-finished .fighter-visual-slot {
  border-color: rgba(230, 194, 128, .28);
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 234, 190, .1), transparent 47%),
    linear-gradient(180deg, rgba(13, 12, 12, .36), rgba(2, 2, 3, .2));
}

@keyframes visual-card-swap {
  from { opacity: 0; transform: rotateY(60deg) scale(.92); }
  to { opacity: 1; transform: rotateY(0) scale(1); }
}

@keyframes visual-fire-flicker {
  from { transform: translateY(4px) scaleX(.96) scaleY(.92); opacity: .68; }
  to { transform: translateY(-3px) scaleX(1.04) scaleY(1.08); opacity: .96; }
}

@keyframes visual-dialogue-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  .battle-screen.battle-visual-upgraded .battle-stage {
    min-height: 100dvh;
    padding: 9px 8px 120px;
    border-radius: 0;
  }

  .battle-screen.battle-visual-upgraded .battle-stage > .row.between {
    padding-bottom: 8px;
  }

  .battle-screen.battle-visual-upgraded .battle-stage > .row.between .title {
    font-size: 18px;
  }

  .battle-screen.battle-visual-upgraded .battle-combo-line,
  .battle-screen.battle-visual-upgraded .battle-playback-state {
    font-size: 8px;
  }

  .battle-screen.battle-visual-upgraded .battle-round-track {
    gap: 6px;
    margin: 7px 0;
  }

  .battle-screen.battle-visual-upgraded .battle-round-track i {
    width: 23px;
    height: 23px;
    font-size: 9px;
  }

  .battle-screen.battle-visual-upgraded .card-resolution-banner {
    margin-bottom: 7px;
    padding: 5px 10px;
  }

  .battle-screen.battle-visual-upgraded .card-resolution-banner b {
    font-size: 11px;
  }

  .battle-screen.battle-visual-upgraded .duel {
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
    gap: 4px;
    margin-bottom: 7px;
  }

  .battle-screen.battle-visual-upgraded .duel .fighter {
    padding: 6px;
    border-radius: 10px;
  }

  .battle-screen.battle-visual-upgraded .versus span {
    font-size: 10px;
  }

  .battle-screen.battle-visual-upgraded .fighter-visual-slot {
    min-height: 148px;
    margin-bottom: 6px;
    border-radius: 9px;
  }

  .battle-screen.battle-visual-upgraded .fighter-visual-slot .portrait-lg {
    width: min(108px, 86%);
    height: 140px;
    border-radius: 9px;
  }

  .battle-screen.battle-visual-upgraded .fighter-card-visual {
    width: min(146px, 98%);
    padding: 4px;
    border-radius: 10px;
  }

  .battle-screen.battle-visual-upgraded .fighter-card-visual .battle-card-art {
    height: 108px !important;
    min-height: 108px !important;
  }

  .battle-screen.battle-visual-upgraded .fighter-card-visual .revealed-card-copy {
    padding: 5px 5px 2px;
  }

  .battle-screen.battle-visual-upgraded .fighter-card-visual .revealed-card-copy small,
  .battle-screen.battle-visual-upgraded .fighter-card-visual .battle-card-stars {
    display: none;
  }

  .battle-screen.battle-visual-upgraded .fighter-card-visual .revealed-card-copy b {
    font-size: 11px;
  }

  .battle-screen.battle-visual-upgraded .fighter-card-effect.active {
    min-height: 72px;
    gap: 4px;
    margin-bottom: 6px;
    padding: 7px;
  }

  .battle-screen.battle-visual-upgraded .fighter-card-effect-head span,
  .battle-screen.battle-visual-upgraded .fighter-card-effect-head em {
    font-size: 7px;
  }

  .battle-screen.battle-visual-upgraded .fighter-card-effect-copy {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    font-size: 9px;
    line-height: 1.42;
  }

  .battle-screen.battle-visual-upgraded .fighter-name {
    font-size: 13px;
  }

  .battle-screen.battle-visual-upgraded .fighter > .small,
  .battle-screen.battle-visual-upgraded .troop-number {
    font-size: 8px;
  }

  .battle-screen.battle-visual-upgraded .battle-deputy {
    margin-top: 0;
    margin-bottom: 3px;
    transform: scale(.82);
  }

  .battle-screen.battle-visual-upgraded .fighter .hpbar {
    height: 7px;
  }

  .battle-screen.battle-visual-upgraded .damage-pop {
    font-size: clamp(22px, 8vw, 34px);
  }

  .battle-screen.battle-visual-upgraded .battle-log-area {
    max-height: 44px;
    margin-top: 5px;
    padding-top: 5px;
  }

  .battle-screen.battle-visual-upgraded .battle-logline {
    font-size: 8px;
  }

  .battle-screen.battle-visual-upgraded .fighter-card-effect.dialogue {
    min-height: 68px;
    padding: 8px 7px;
  }

  .battle-screen.battle-visual-upgraded .fighter-end-dialogue {
    font-size: 9px;
    line-height: 1.5;
  }

  .battle-screen.battle-visual-upgraded .battle-result-card {
    padding: 11px;
  }

  .battle-screen.battle-visual-upgraded .battle-result-card > b {
    font-size: 16px;
  }

  .battle-screen.battle-visual-upgraded .battle-buttons {
    width: calc(100vw - 12px);
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    padding: 6px;
  }

  .battle-screen.battle-visual-upgraded .battle-buttons .btn {
    min-height: 38px;
    padding: 7px 8px;
    font-size: 10px;
  }
}

@keyframes visual-fire-embers {
  from { transform: translateY(10px); opacity: .18; }
  45% { opacity: .62; }
  to { transform: translateY(-18px); opacity: 0; }
}