/* RebellionModal — the interactive child-rebellion war result. Reuses the
   Duel's odds line (.duel-odds-*) and stepper (.duel-hire-*) from DuelModal.css;
   this file only adds the two committed-Knight stacks beneath each combatant and
   the forces row that holds them + the player's commit stepper. */

.rebellion-prompt {
  text-align: center;
}

/* War glyph (WarEventModal only) — the icon_War.png that sits under the "War!"
   title, above the prompt. The img centers itself (.battle-glyph-img is
   display:block + margin:0 auto); this just holds a little breathing room. */
.war-event-glyph {
  margin: 0 0 0.25rem;
  text-align: center;
}

/* First-name labels under the odds icons (WarEventModal only). space-between
   pushes the ruler name to the far left (under the left icon) and the enemy name
   to the far right (under the right icon); the negative top margin snugs them up
   under the portraits, past the shared .duel-odds-slider bottom margin. */
.war-odds-names {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.6rem;
  /* Extra breathing room below the dagger line (icons + names) before the beat
     string and the stage UI beneath it. */
  margin: -0.3rem 0 1.15rem;
}
.war-odds-name {
  font-size: 1rem;
  color: var(--font-color-1);
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.war-odds-name-ruler { text-align: left; }
.war-odds-name-enemy { text-align: right; }

/* Constant top line ("The enemy stands in the field.") — 1 line, no reservation. */
.war-prompt-top {
  margin: 0 0 0.75rem;
}
/* Beat-specific line — sits under the dagger line, above the stage (beat 1 =
   strength, beat 2 = commit). Reserve TWO lines so the stage below never jumps
   between an empty line, the strength prompt, and the commit prompt. */
.war-prompt-beat {
  min-height: 3em;
  margin: 0 0 0.4rem;
}

/* ===== WarEventModal sections ===== */
/* Full-screen sheet: fill as a flex column, pin the Begin row to the floor (same
   as .battle-modal / .battle-cta). Scoped to .war-event-modal so the still-
   half-screen RebellionModal is untouched. */
.war-event-modal {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}
.war-event-modal .rebellion-action-row {
  margin-top: auto;
  position: sticky;
  bottom: 0;
}

/* Muster block — "THE ENEMY MUSTERS" caption over the soldier icons. Bigger icons
   per the redesign. Reused in the muster step and in the commit step's right col. */
.war-muster-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}
.war-enemy-force {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  min-height: 2.6rem;
}
.war-enemy-force img {
  width: 2.5rem;
  height: 2.5rem;
}

/* Persistent two-column stage under the odds line: the RULER's left column
   (empty → CROWN/POP → commit steppers, swapped per beat) and the ENEMY muster on
   the right (visible in EVERY beat, under the enemy icon). */
.war-fight {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.war-fight-left {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.war-fight .war-muster-block {
  flex: 1 1 0;
  min-width: 0;
}
/* [hidden] must WIN over the display:flex rules on these (they toggle per beat) —
   a class `display` beats the UA sheet's bare `[hidden]{display:none}`. */
.war-strength-meters[hidden],
.war-commit-steppers[hidden],
.war-muster-block[hidden] {
  display: none;
}

/* Beat 2 — CROWN + POPULARITY meter replicas, side by side under the ruler.
   Sized to fit the half-width left column even with 4-digit values. */
.war-strength-meters {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0.6rem;
}
.war-meter-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}
.war-meter-cell .meter-value {
  font-size: 1.6rem;
  color: var(--font-color-1);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* Commit steppers — Knights + Coffers stacked on the LEFT of the fight row.
   A roomy gap so the two commit units read as distinct. */
.war-commit-steppers {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
/* "OF <have> <resource>" under each stepper — <have> ticks DOWN live as they
   commit (the COMMIT value above is what's pledged). Tucked up close to the
   stepper it annotates. */
.war-have-label {
  white-space: nowrap;
  margin-top: -0.3rem;
}
.war-have-num {
  font-size: 1.05rem;
  color: var(--font-color-1);
  font-variant-numeric: tabular-nums;
  margin: 0 0.05rem;
}

/* Two columns under the odds line — ruler forces (with the commit stepper) on
   the left, rebel forces on the right, aligned under their portraits. */
.rebellion-forces {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 0.5rem;
}
.rebellion-force {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

/* The committed-Knight stack — icons accrue left-to-right and wrap; a fixed
   min-height holds the row's vertical space so the dagger line above doesn't
   shift as Knights pop in. */
.rebellion-knight-stack {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem;
  min-height: 1.8rem;
}
.rebellion-knight-stack img {
  width: 1.6rem;
  height: 1.6rem;
  object-fit: contain;
  /* Each Knight fades+rises in as it's committed. */
  animation: rebellion-knight-in 260ms ease-out;
}
@keyframes rebellion-knight-in {
  from { opacity: 0; transform: translateY(6px) scale(0.8); }
  to   { opacity: 1; transform: none; }
}

.rebellion-force-label {
  text-align: center;
}
/* "The rebel musters…" caption — hidden (via JS visibility) once the child's
   commit completes, keeping its row height so nothing jumps. */
.rebellion-waiting {
  font-style: italic;
  color: var(--font-color-2);
}

.rebellion-action-row {
  margin-top: 0.75rem;
}