/* v2.48 selective battle rollback, readable defense briefing, and stable card layout */

/* Remove the fog/gloss added to troop bars and all card-local collision stamps. */
.battle-screen .fighter .hpbar::after {
  content: none !important;
  display: none !important;
}

.battle-screen .fighter .hpbar > span {
  box-shadow: none !important;
  filter: none !important;
}

.battle-screen .v238-card-impact,
.battle-screen .v247-fx,
.battle-screen .v247-clash,
.battle-screen .v247-deputy {
  display: none !important;
}

.battle-screen .fighter.v238-feedback-critical .fighter-card-visual,
.battle-screen .fighter.v238-feedback-scheme .fighter-card-visual,
.battle-screen .fighter.v238-feedback-fire .fighter-card-visual,
.battle-screen .fighter.v247-hit {
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

/* The defense screen remains, but the briefing must be readable without zooming. */
body:has(.v247-defense-overlay),
body:has(.battle-card-draft.defense-draft) {
  overflow: hidden;
  overscroll-behavior: none;
}

.v247-defense-header-copy small {
  font-size: 11px !important;
  line-height: 1.35 !important;
  letter-spacing: .09em !important;
}

.v247-defense-header-copy h2 {
  margin: 5px 0 6px !important;
  font-size: clamp(27px, 3.3vw, 36px) !important;
  line-height: 1.15 !important;
}

.v247-defense-header-copy p {
  max-width: 760px;
  color: rgba(255,255,255,.76) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.v247-force-copy small,
.v247-force-troops small {
  font-size: 9px !important;
  line-height: 1.35 !important;
}

.v247-force-copy b {
  font-size: 17px !important;
}

.v247-force-copy span {
  font-size: 11px !important;
}

.v247-force-troops em {
  font-size: 9px !important;
}

.v247-threat-balance small {
  font-size: 8px !important;
}

.v247-threat-balance b {
  font-size: 17px !important;
}

.v247-threat-balance span {
  font-size: 10px !important;
  line-height: 1.35 !important;
}

/* Card draft: one explicit image holder followed by metadata, title and description. */
.battle-card-draft {
  width: min(1120px, calc(100vw - 28px));
}

.battle-card-hand {
  align-items: stretch;
}

.battle-card {
  box-sizing: border-box !important;
  min-height: 352px !important;
  aspect-ratio: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 164px auto auto auto minmax(58px, 1fr) !important;
  align-content: stretch !important;
  align-items: start !important;
  gap: 5px !important;
  padding: 18px 16px 22px !important;
  overflow: hidden !important;
}

.battle-card > .battle-card-art {
  position: relative !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 164px !important;
  min-height: 164px !important;
  margin: 0 !important;
  padding: 6px !important;
  overflow: hidden !important;
  border-radius: 9px 9px 14px 14px !important;
  box-sizing: border-box !important;
}

.battle-card .battle-card-artwork,
.revealed-card .battle-card-artwork,
.battle-screen .fighter-card-visual .battle-card-artwork {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: block !important;
  object-fit: cover !important;
  object-position: 50% 44% !important;
  border-radius: 6px 6px 10px 10px !important;
  transform: none !important;
}

.battle-card > .battle-card-stars,
.battle-card > small,
.battle-card > b,
.battle-card > p {
  position: relative !important;
  z-index: 4 !important;
  width: 100% !important;
  margin: 0 !important;
  padding-inline: 2px !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

.battle-card > .battle-card-stars {
  grid-row: 2 !important;
  align-self: end !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

.battle-card > small {
  grid-row: 3 !important;
  min-height: 0 !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
  white-space: normal !important;
}

.battle-card > b {
  grid-row: 4 !important;
  min-height: 0 !important;
  font-size: 17px !important;
  line-height: 1.28 !important;
  word-break: keep-all !important;
}

.battle-card > p {
  grid-row: 5 !important;
  min-height: calc(1.45em * 3) !important;
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  word-break: keep-all !important;
}

/* Revealed cards and the cards placed inside each fighter use the same holder rules. */
.battle-card-reveal > .revealed-card {
  display: grid !important;
  grid-template-columns: minmax(120px, 42%) minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 10px !important;
  min-height: 154px !important;
  padding: 9px !important;
}

.battle-card-reveal > .revealed-card .battle-card-art {
  width: 100% !important;
  height: 136px !important;
  min-height: 136px !important;
  margin: 0 !important;
  padding: 5px !important;
  overflow: hidden !important;
  border-radius: 8px !important;
}

.battle-card-reveal > .revealed-card .revealed-card-copy {
  min-width: 0 !important;
  align-self: center !important;
  padding: 5px 7px !important;
}

.battle-card-reveal > .revealed-card .revealed-card-copy p {
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  margin-top: 6px !important;
  line-height: 1.45 !important;
}

.battle-screen .fighter-card-visual {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 178px auto !important;
  align-content: stretch !important;
  gap: 0 !important;
  padding: 6px !important;
  overflow: hidden !important;
}

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

.battle-screen .fighter-card-visual .revealed-card-copy {
  width: 100% !important;
  min-width: 0 !important;
  align-self: stretch !important;
  padding: 8px 8px 6px !important;
  box-sizing: border-box !important;
}

/* Keep the useful final troop summary, but return it to a restrained presentation. */
.v247-battle-outcome-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  margin: 10px 0 12px;
}

.v247-outcome-side {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px;
  background: rgba(0,0,0,.18);
}

.v247-outcome-side small {
  color: rgba(255,255,255,.55);
  font-size: 9px;
}

.v247-outcome-side b {
  color: #f1dfb9;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.v247-outcome-side span {
  color: rgba(255,255,255,.64);
  font-size: 10px;
}

.v247-outcome-side.defender {
  text-align: right;
}

.v247-outcome-center {
  display: grid;
  place-items: center;
  color: rgba(230,203,151,.56);
  font-size: 9px;
  font-weight: 900;
}

@media (max-width: 760px) {
  .v247-defense-header-copy small {
    font-size: 8px !important;
  }

  .v247-defense-header-copy h2 {
    margin: 3px 0 4px !important;
    font-size: 22px !important;
  }

  .v247-defense-header-copy p {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
  }

  .v247-force-copy small,
  .v247-force-troops small {
    font-size: 7px !important;
  }

  .v247-force-copy b {
    font-size: 13px !important;
  }

  .v247-force-copy span,
  .v247-force-troops em {
    font-size: 8px !important;
  }

  .v247-threat-balance small {
    font-size: 6px !important;
  }

  .v247-threat-balance b {
    font-size: 12px !important;
  }

  .v247-threat-balance span {
    font-size: 7px !important;
  }

  .battle-card-hand {
    grid-template-columns: repeat(5, 180px) !important;
    gap: 10px !important;
  }

  .battle-card {
    width: 180px !important;
    min-height: 326px !important;
    grid-template-rows: 142px auto auto auto minmax(58px, 1fr) !important;
    padding: 17px 14px 20px !important;
  }

  .battle-card > .battle-card-art {
    height: 142px !important;
    min-height: 142px !important;
  }

  .battle-card > b {
    font-size: 15px !important;
  }

  .battle-card > p {
    font-size: 10px !important;
    line-height: 1.42 !important;
    -webkit-line-clamp: 4 !important;
  }

  .battle-card-reveal > .revealed-card {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 92px auto !important;
    gap: 4px !important;
    min-height: 0 !important;
  }

  .battle-card-reveal > .revealed-card .battle-card-art {
    height: 92px !important;
    min-height: 92px !important;
  }

  .battle-card-reveal > .revealed-card .revealed-card-copy p {
    -webkit-line-clamp: 2 !important;
    font-size: 9px !important;
  }

  .battle-screen .fighter-card-visual {
    grid-template-rows: 110px auto !important;
    padding: 4px !important;
  }

  .battle-screen .fighter-card-visual .battle-card-art {
    height: 110px !important;
    min-height: 110px !important;
    padding: 4px !important;
  }

  .battle-screen .fighter-card-visual .revealed-card-copy {
    padding: 6px 5px 4px !important;
  }

  .v247-battle-outcome-summary {
    grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
    gap: 5px;
  }

  .v247-outcome-side {
    padding: 8px;
  }

  .v247-outcome-side small {
    font-size: 7px;
  }

  .v247-outcome-side b {
    font-size: 16px;
  }

  .v247-outcome-side span {
    font-size: 8px;
  }
}