From d4741556b66ee0f773a4bc6a96f6485fd9e254ce Mon Sep 17 00:00:00 2001
From: Prayuj Tuli <prayujtuli@hotmail.com>
Date: Mon, 24 Aug 2026 00:05:16 -0400
Subject: [PATCH 1/3] fix(game): contain inbox round logs

---
 src/app.css                  | 34 +++++++++++++++++++++++++++++++++-
 src/routes/game/+page.svelte | 33 ++++++++++++++++++++++++++-------
 2 files changed, 59 insertions(+), 8 deletions(-)

diff --git a/src/app.css b/src/app.css
index 73fb3b6..ed29dd7 100644
--- a/src/app.css
+++ b/src/app.css
@@ -244,17 +244,45 @@
       inset 0 1px rgba(255, 242, 181, 0.12);
   }
 
+  .mail-dialog-report {
+    height: min(680px, calc(100vh - 4rem));
+  }
+
   .mail-dialog-header {
     @apply flex items-center gap-3 border-b border-[#777354] bg-[#3a4e4c] px-4 py-3;
     box-shadow: inset 0 1px rgba(222, 240, 238, 0.12);
   }
 
   .mail-dialog-body {
+    display: flex;
     min-height: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+    overflow: hidden;
+    background: #172326;
+  }
+
+  .mail-round-log {
+    display: flex;
+    min-height: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .mail-round-log-list {
+    min-height: 0;
+  }
+
+  .mail-round-log-list-expanded {
+    flex: 1 1 auto;
     overflow-y: auto;
     scrollbar-color: #5e7378 #1c292c;
     scrollbar-width: thin;
-    background: #172326;
+  }
+
+  .mail-round-log-toggle {
+    @apply w-full shrink-0 border-t border-white/[0.07] bg-white/[0.025] px-3 py-2 text-[9px] font-semibold text-[#b8c3bc] transition-colors hover:bg-white/[0.06] hover:text-white;
   }
 
   .mail-dialog-footer {
@@ -608,6 +636,10 @@
       max-height: calc(100vh - 1rem);
     }
 
+    .mail-dialog-report {
+      height: calc(100vh - 1rem);
+    }
+
     .mail-dialog-footer {
       @apply block;
     }
diff --git a/src/routes/game/+page.svelte b/src/routes/game/+page.svelte
index 5074dd6..a12ca6d 100644
--- a/src/routes/game/+page.svelte
+++ b/src/routes/game/+page.svelte
@@ -141,6 +141,7 @@
   let policySaving = false;
   let activeGameTooltip: { title: string; detail: string; x: number; y: number; below: boolean } | null = null;
   let selectedMailboxMessageId: string | null = null;
+  let mailRoundLogExpanded = false;
 
   const showGameTooltip = (event: MouseEvent | FocusEvent, title: string, detail: string) => {
     const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
@@ -751,6 +752,7 @@
     const id = message.mailboxMessageId?.value;
     if (!id) return;
     selectedMailboxMessageId = id;
+    mailRoundLogExpanded = false;
     if (message.readAt) return;
     try {
       const response = await mailboxClient.markMailboxMessageRead({ mailboxMessageId: message.mailboxMessageId });
@@ -3118,12 +3120,19 @@
 
   {#if selectedMailboxMessage}
     {@const report = selectedMailboxMessage.content.case === 'battleReport' ? selectedMailboxMessage.content.value : undefined}
+    {@const visibleReportRounds = report ? (mailRoundLogExpanded ? report.rounds : report.rounds.slice(0, 3)) : []}
+    {@const hiddenReportRoundCount = report ? Math.max(0, report.rounds.length - visibleReportRounds.length) : 0}
     <div
       class="pointer-events-auto absolute inset-0 z-30 flex items-center justify-center bg-black/60 p-3 sm:p-8"
       on:pointerdown|self={() => (selectedMailboxMessageId = null)}
       transition:fade={{ duration: 140 }}
     >
-      <div class="mail-dialog inspector-panel" role="dialog" aria-modal="true" aria-label={report ? `${reportOutcomeLabel(report.outcome)} battle report` : 'Mailbox message'}>
+      <div
+        class="mail-dialog inspector-panel {report ? 'mail-dialog-report' : ''}"
+        role="dialog"
+        aria-modal="true"
+        aria-label={report ? `${reportOutcomeLabel(report.outcome)} battle report` : 'Mailbox message'}
+      >
         <header class="mail-dialog-header">
           <span class="selection-crest h-10 w-10 text-amber-100" aria-hidden="true">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round">
@@ -3155,7 +3164,7 @@
 
         <div class="mail-dialog-body">
           {#if report}
-            <div class="grid grid-cols-2 gap-px bg-white/[0.06] text-[9px] sm:grid-cols-4">
+            <div class="grid shrink-0 grid-cols-2 gap-px bg-white/[0.06] text-[9px] sm:grid-cols-4">
               <div class="bg-[#1c282a] p-3">
                 <span class="block uppercase tracking-wide text-[#68756e]">Resolution</span><strong class="mt-1 block text-[11px] text-[#dfe4dc]">{reportResolutionLabel(report.resolution)}</strong>
               </div>
@@ -3169,7 +3178,7 @@
                 <span class="block uppercase tracking-wide text-[#68756e]">Ended</span><strong class="mt-1 block text-[10px] text-[#bdc6be]">{reportDate(report.endedAt)}</strong>
               </div>
             </div>
-            <div class="grid gap-3 p-3 md:grid-cols-2">
+            <div class="grid shrink-0 gap-3 p-3 md:grid-cols-2">
               {@render reportSideRecord(
                 'Attackers',
                 report.attackers,
@@ -3183,10 +3192,13 @@
                 report.rounds.reduce((total, round) => total + reportLossTotal(round.defenderLosses), 0)
               )}
             </div>
-            <section class="mx-3 mb-3 border border-white/[0.09] bg-black/[0.1]">
-              <div class="border-b border-white/[0.07] px-3 py-2 text-[9px] font-bold uppercase tracking-[0.1em] text-[#aab5ad]">Round log</div>
-              <div class="divide-y divide-white/[0.06]">
-                {#each report.rounds as round}
+            <section class="mail-round-log mx-3 mb-3 border border-white/[0.09] bg-black/[0.1]">
+              <div class="flex shrink-0 items-center justify-between gap-3 border-b border-white/[0.07] px-3 py-2 text-[9px] font-bold uppercase tracking-[0.1em] text-[#aab5ad]">
+                <span>Round log</span>
+                <span class="font-normal tabular-nums text-[#68756e]">{report.rounds.length} {report.rounds.length === 1 ? 'round' : 'rounds'}</span>
+              </div>
+              <div class="mail-round-log-list divide-y divide-white/[0.06] {mailRoundLogExpanded ? 'mail-round-log-list-expanded' : ''}">
+                {#each visibleReportRounds as round}
                   <div class="px-3 py-2.5">
                     <div class="flex items-center justify-between gap-2 text-[9px]">
                       <strong class="text-[#d6ded7]">Round {round.number}</strong>
@@ -3213,6 +3225,13 @@
                   <div class="px-3 py-4 text-center text-[9px] text-[#68736d]">Resolved before the first combat exchange.</div>
                 {/each}
               </div>
+              {#if hiddenReportRoundCount > 0}
+                <button class="mail-round-log-toggle" on:click={() => (mailRoundLogExpanded = true)}>
+                  Show {hiddenReportRoundCount} more {hiddenReportRoundCount === 1 ? 'round' : 'rounds'}
+                </button>
+              {:else if mailRoundLogExpanded && report.rounds.length > 3}
+                <button class="mail-round-log-toggle" on:click={() => (mailRoundLogExpanded = false)}>Show first 3 rounds</button>
+              {/if}
             </section>
           {:else}
             <div class="px-5 py-10 text-center text-sm text-[#858f88]">This dispatch has no additional details.</div>

From a0952cddc52a80e0ef1840b4cac2ac2d7e96cde9 Mon Sep 17 00:00:00 2001
From: Prayuj Tuli <prayujtuli@hotmail.com>
Date: Mon, 24 Aug 2026 00:15:05 -0400
Subject: [PATCH 2/3] refactor(game): show battle casualties as compositions

---
 src/app.css                  |  35 +++++++++
 src/routes/game/+page.svelte | 136 ++++++++++++++++++++++++-----------
 2 files changed, 130 insertions(+), 41 deletions(-)

diff --git a/src/app.css b/src/app.css
index ed29dd7..fdcea66 100644
--- a/src/app.css
+++ b/src/app.css
@@ -551,6 +551,41 @@
     box-shadow: inset 0 0 0 1px rgba(191, 219, 254, 0.08);
   }
 
+  .battle-casualty-composition {
+    @apply flex flex-wrap gap-1.5;
+  }
+
+  .battle-casualty-chip {
+    @apply flex min-w-[6.25rem] items-center gap-1.5 border border-red-200/15 bg-black/[0.14] p-1 pr-1.5 text-red-100/90;
+  }
+
+  .battle-casualty-chip .unit-token,
+  .battle-casualty-kind-token {
+    @apply flex h-7 w-7 shrink-0 items-center justify-center text-red-100/80;
+    border: 1px solid rgba(254, 202, 202, 0.16);
+    background: rgba(72, 32, 32, 0.22);
+    box-shadow: inset 0 1px rgba(254, 226, 226, 0.06);
+  }
+
+  .battle-casualty-chip .unit-token > svg,
+  .battle-casualty-kind-token > svg {
+    @apply h-5 w-5;
+  }
+
+  .battle-casualty-chip .unit-tier {
+    @apply min-w-3 text-[6px] leading-[10px];
+    background: #281b1c;
+    border-color: rgba(254, 202, 202, 0.18);
+  }
+
+  .battle-casualty-chip strong {
+    @apply block text-[10px] tabular-nums leading-none text-red-100;
+  }
+
+  .battle-casualty-chip > span:last-child > span {
+    @apply mt-0.5 block truncate text-[7px] leading-none text-[#9b8d8b];
+  }
+
   .structure-token {
     @apply relative flex h-11 w-11 shrink-0 items-center justify-center text-[#d8e5e2];
     border: 1px solid #62767b;
diff --git a/src/routes/game/+page.svelte b/src/routes/game/+page.svelte
index a12ca6d..2f3a90c 100644
--- a/src/routes/game/+page.svelte
+++ b/src/routes/game/+page.svelte
@@ -320,17 +320,10 @@
   const troopStackTotal = (stacks: { count?: number }[]) => stacks.reduce((total, stack) => total + (stack.count ?? 0), 0);
   const troopStackCount = (stacks: { type: TroopType; count?: number }[], type: TroopType) => stacks.find((stack) => stack.type === type)?.count ?? 0;
   const battleMilitaryLosses = (losses?: BattleLossSummary) => troopStackTotal(losses?.troops ?? []) + Number(losses?.militia ?? 0n);
-  const battleLossParts = (losses?: BattleLossSummary) => [
-    ...(losses?.troops ?? []).filter((stack) => (stack.count ?? 0) > 0).map((stack) => `${stack.count} ${troopName(stack.type, stack.count)}`),
-    ...(losses?.militia && losses.militia > 0n ? [`${losses.militia.toString()} militia`] : []),
-    ...(losses?.civilians && losses.civilians > 0n ? [`${losses.civilians.toString()} civilians`] : [])
-  ];
   const reportArmyLosses = (army: BattleReportArmy) => troopStackTotal(army.startingTroops) - troopStackTotal(army.survivingTroops);
   const reportSideStart = (side?: ReportSide) => (side?.armies ?? []).reduce((total, army) => total + troopStackTotal(army.startingTroops), Number(side?.startingMilitia ?? 0n));
   const reportSideSurvivors = (side?: ReportSide) => (side?.armies ?? []).reduce((total, army) => total + troopStackTotal(army.survivingTroops), Number(side?.survivingMilitia ?? 0n));
   const reportLossTotal = (losses: BattleReportLoss[]) => losses.reduce((total, loss) => total + troopStackTotal(loss.troops) + Number(loss.militia), 0);
-  const reportLossDescription = (loss: BattleReportLoss) =>
-    [...loss.troops.map((stack) => `${stack.count ?? 0} ${troopName(stack.type, stack.count)}`), ...(loss.militia > 0n ? [`${loss.militia.toString()} militia`] : [])].join(' · ');
   const reportLossSource = (report: BattleReport, loss: BattleReportLoss) => {
     if (loss.militiaCityId) {
       const settlement = [report.attackers?.settlement, report.defenders?.settlement].find((candidate) => candidate?.cityId?.value === loss.militiaCityId?.value);
@@ -2488,15 +2481,6 @@
   </section>
 {/snippet}
 
-{#snippet reportRoundLosses(losses: BattleReportLoss[], report: BattleReport)}
-  {#each losses as loss}
-    <div class="mt-0.5 flex items-start justify-between gap-2 text-[8px] text-[#77827b]">
-      <span>{reportLossSource(report, loss)}</span>
-      <span class="text-right tabular-nums text-red-200/80">{reportLossDescription(loss)}</span>
-    </div>
-  {/each}
-{/snippet}
-
 {#snippet populationSegment(label: string, count: number, detail: string, color: string, width: number)}
   <span
     class="relative block h-full"
@@ -2721,6 +2705,85 @@
   </span>
 {/snippet}
 
+{#snippet casualtyKindGlyph(kind: 'militia' | 'civilian')}
+  <span class="battle-casualty-kind-token" aria-hidden="true">
+    {#if kind === 'militia'}
+      <svg viewBox="0 0 36 36" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M18 4 29 8v8c0 7-4.4 12.6-11 16-6.6-3.4-11-9-11-16V8l11-4Z" fill="currentColor" opacity=".14" />
+        <path d="M18 4 29 8v8c0 7-4.4 12.6-11 16-6.6-3.4-11-9-11-16V8l11-4Z" stroke-width="1.8" />
+        <path d="M12 19h12M18 10v18" stroke-width="1.8" />
+      </svg>
+    {:else}
+      <svg viewBox="0 0 36 36" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="18" cy="11" r="5" fill="currentColor" opacity=".18" stroke-width="1.8" />
+        <path d="M8 31v-4c0-5.5 4.5-9 10-9s10 3.5 10 9v4H8Z" fill="currentColor" opacity=".12" stroke-width="1.8" />
+      </svg>
+    {/if}
+  </span>
+{/snippet}
+
+{#snippet casualtyComposition(troops: { type: TroopType; count?: number }[], militia: bigint = 0n, civilians: bigint = 0n, emptyLabel = 'No casualties')}
+  {@const troopLosses = troops.filter((stack) => (stack.count ?? 0) > 0)}
+  <div class="battle-casualty-composition">
+    {#each troopLosses as stack}
+      <span class="battle-casualty-chip" title={`${stack.count ?? 0} ${troopName(stack.type, stack.count)}`}>
+        {@render troopGlyph(stack.type)}
+        <span class="min-w-0">
+          <strong>{(stack.count ?? 0).toLocaleString()}</strong>
+          <span>{troopName(stack.type, stack.count)}</span>
+        </span>
+      </span>
+    {/each}
+    {#if militia > 0n}
+      <span class="battle-casualty-chip" title={`${militia.toString()} militia`}>
+        {@render casualtyKindGlyph('militia')}
+        <span class="min-w-0">
+          <strong>{militia.toLocaleString()}</strong>
+          <span>Militia</span>
+        </span>
+      </span>
+    {/if}
+    {#if civilians > 0n}
+      <span class="battle-casualty-chip" title={`${civilians.toString()} civilian casualties`}>
+        {@render casualtyKindGlyph('civilian')}
+        <span class="min-w-0">
+          <strong>{civilians.toLocaleString()}</strong>
+          <span>Civilians</span>
+        </span>
+      </span>
+    {/if}
+    {#if troopLosses.length === 0 && militia === 0n && civilians === 0n}
+      <span class="text-[8px] text-[#707c75]">{emptyLabel}</span>
+    {/if}
+  </div>
+{/snippet}
+
+{#snippet reportRoundCasualties(label: string, losses: BattleReportLoss[], civilians: bigint, report: BattleReport, attacking: boolean, power: number | null)}
+  <section class="border border-white/[0.07] bg-black/[0.09] px-2 py-1.5">
+    <div class="flex items-center justify-between gap-2 text-[8px] font-bold uppercase tracking-[0.08em]">
+      <span class={attacking ? 'text-red-200/90' : 'text-blue-200/90'}>{label}</span>
+      {#if power !== null}<span class="font-normal tabular-nums text-[#77837c]">Power {Math.round(power).toLocaleString()}</span>{/if}
+    </div>
+    <div class="mt-1 space-y-1.5 border-t border-white/[0.05] pt-1.5">
+      {#each losses.filter((loss) => troopStackTotal(loss.troops) > 0 || loss.militia > 0n) as loss}
+        <div>
+          <span class="mb-1 block truncate text-[8px] text-[#7c8881]">{reportLossSource(report, loss)}</span>
+          {@render casualtyComposition(loss.troops, loss.militia)}
+        </div>
+      {/each}
+      {#if civilians > 0n}
+        <div>
+          <span class="mb-1 block text-[8px] text-[#7c8881]">Civilian population</span>
+          {@render casualtyComposition([], 0n, civilians)}
+        </div>
+      {/if}
+      {#if reportLossTotal(losses) === 0 && civilians === 0n}
+        <span class="block py-0.5 text-[8px] text-[#707c75]">No casualties</span>
+      {/if}
+    </div>
+  </section>
+{/snippet}
+
 {#snippet structureGlyph(type: BuildingType, level: number)}
   <span class="structure-token">
     <svg viewBox="0 0 42 42" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round">
@@ -2753,8 +2816,6 @@
   {@const deployed = troopStackTotal(side?.startingTroops ?? []) + Number(side?.startingMilitiaCount ?? 0n)}
   {@const remaining = troopStackTotal(side?.survivingTroops ?? []) + Number(side?.militiaCount ?? 0n)}
   {@const totalLosses = battleMilitaryLosses(side?.cumulativeLosses)}
-  {@const cumulativeParts = battleLossParts(side?.cumulativeLosses)}
-  {@const lastRoundParts = battleLossParts(side?.lastRoundLosses)}
   <section class="battle-side {attackers ? 'battle-side-attackers' : 'battle-side-defenders'}">
     <div class="flex items-start justify-between gap-3 border-b border-white/[0.08] px-3 py-2.5">
       <div>
@@ -2783,15 +2844,13 @@
       </div>
     </div>
 
-    <div class="border-b border-white/[0.08] bg-red-300/[0.035] px-3 py-2">
-      <div class="flex items-center justify-between gap-3 text-[8px] font-bold uppercase tracking-[0.09em]">
-        <span class="text-[#8b9690]">Casualty detail</span>
-        <span class="text-red-200/80">{cumulativeParts.length ? cumulativeParts.join(' · ') : 'None'}</span>
-      </div>
+    <div class="border-b border-white/[0.08] bg-red-300/[0.035] px-3 py-2.5">
+      <div class="mb-1.5 text-[8px] font-bold uppercase tracking-[0.09em] text-[#8b9690]">Total casualties</div>
+      {@render casualtyComposition(side?.cumulativeLosses?.troops ?? [], side?.cumulativeLosses?.militia ?? 0n, side?.cumulativeLosses?.civilians ?? 0n, 'None')}
       {#if completedRounds > 0}
-        <div class="mt-1.5 flex items-center justify-between gap-3 border-t border-red-200/10 pt-1.5 text-[9px]">
-          <span class="text-[#7f8a84]">Round {completedRounds}</span>
-          <span class="text-right tabular-nums text-red-100">{lastRoundParts.length ? lastRoundParts.join(' · ') : 'No casualties'}</span>
+        <div class="mt-2 border-t border-red-200/10 pt-2">
+          <div class="mb-1.5 text-[8px] font-bold uppercase tracking-[0.08em] text-[#7f8a84]">Round {completedRounds}</div>
+          {@render casualtyComposition(side?.lastRoundLosses?.troops ?? [], side?.lastRoundLosses?.militia ?? 0n, side?.lastRoundLosses?.civilians ?? 0n)}
         </div>
       {/if}
     </div>
@@ -3204,22 +3263,17 @@
                       <strong class="text-[#d6ded7]">Round {round.number}</strong>
                       <span class="text-[#69756e]">{reportDate(round.occurredAt)}</span>
                     </div>
-                    <div class="mt-1 grid grid-cols-2 gap-3 text-[9px] tabular-nums">
-                      <span class="text-red-200/80">
-                        {report.attackers?.strengthVisible ? `Attack power ${Math.round(round.attackerPower).toLocaleString()} · ` : ''}{reportLossTotal(round.attackerLosses)} military lost{round.attackerCivilianCasualties >
-                        0n
-                          ? ` · ${round.attackerCivilianCasualties} civilians`
-                          : ''}
-                      </span>
-                      <span class="text-right text-blue-200/80">
-                        {report.defenders?.strengthVisible ? `Defense power ${Math.round(round.defenderPower).toLocaleString()} · ` : ''}{reportLossTotal(round.defenderLosses)} military lost{round.defenderCivilianCasualties >
-                        0n
-                          ? ` · ${round.defenderCivilianCasualties} civilians`
-                          : ''}
-                      </span>
+                    <div class="mt-2 grid gap-2 sm:grid-cols-2">
+                      {@render reportRoundCasualties('Attackers', round.attackerLosses, round.attackerCivilianCasualties, report, true, report.attackers?.strengthVisible ? round.attackerPower : null)}
+                      {@render reportRoundCasualties(
+                        'Defenders',
+                        round.defenderLosses,
+                        round.defenderCivilianCasualties,
+                        report,
+                        false,
+                        report.defenders?.strengthVisible ? round.defenderPower : null
+                      )}
                     </div>
-                    {@render reportRoundLosses(round.attackerLosses, report)}
-                    {@render reportRoundLosses(round.defenderLosses, report)}
                   </div>
                 {:else}
                   <div class="px-3 py-4 text-center text-[9px] text-[#68736d]">Resolved before the first combat exchange.</div>

From 83fdb6c236e944873e53f51a9286f0079d58aa22 Mon Sep 17 00:00:00 2001
From: Prayuj Tuli <prayujtuli@hotmail.com>
Date: Mon, 24 Aug 2026 00:18:23 -0400
Subject: [PATCH 3/3] fix(game): present settlement militia as formation

---
 src/routes/game/+page.svelte | 40 ++++++++++++++++++++++++++----------
 1 file changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/routes/game/+page.svelte b/src/routes/game/+page.svelte
index 2f3a90c..7820963 100644
--- a/src/routes/game/+page.svelte
+++ b/src/routes/game/+page.svelte
@@ -2813,6 +2813,7 @@
 {#snippet battleSidePanel(label: string, side: BattleSide | undefined, attackers: boolean, completedRounds: number)}
   {@const sideArmies = battleSideArmies(side)}
   {@const yourSide = side?.userIds.some((id) => id.value === $userId)}
+  {@const formationCount = (side?.armyIds.length ?? 0) + (side?.militiaCityId ? 1 : 0)}
   {@const deployed = troopStackTotal(side?.startingTroops ?? []) + Number(side?.startingMilitiaCount ?? 0n)}
   {@const remaining = troopStackTotal(side?.survivingTroops ?? []) + Number(side?.militiaCount ?? 0n)}
   {@const totalLosses = battleMilitaryLosses(side?.cumulativeLosses)}
@@ -2821,8 +2822,8 @@
       <div>
         <div class="text-[10px] font-bold uppercase tracking-[0.12em] {attackers ? 'text-red-200' : 'text-blue-200'}">{label}</div>
         <div class="mt-0.5 text-[9px] text-[#87918b]">
-          {side?.armyIds.length ?? 0}
-          {(side?.armyIds.length ?? 0) === 1 ? 'formation' : 'formations'} · {side?.userIds.length ?? 0}
+          {formationCount}
+          {formationCount === 1 ? 'formation' : 'formations'} · {side?.userIds.length ?? 0}
           {(side?.userIds.length ?? 0) === 1 ? 'commander' : 'commanders'}
         </div>
       </div>
@@ -2855,14 +2856,30 @@
       {/if}
     </div>
 
-    {#if side?.militiaCityId}
-      <div class="border-b border-white/[0.08] bg-amber-200/[0.04] px-3 py-2 text-[10px]">
-        <span class="text-[#8e9891]">Settlement militia</span>
-        <strong class="float-right tabular-nums text-amber-100">{side.strengthVisible ? side.militiaCount.toLocaleString() : 'Unknown'}</strong>
-      </div>
-    {/if}
-
     <div class="space-y-1.5 p-2.5">
+      {#if side?.militiaCityId}
+        <div class="border border-amber-100/15 bg-amber-100/[0.04] px-2.5 py-2">
+          <div class="flex items-center justify-between gap-3">
+            <div class="flex min-w-0 items-center gap-2">
+              <span class="flex h-8 w-8 shrink-0 items-center justify-center border border-amber-100/20 bg-amber-100/[0.06] text-amber-100/80" aria-hidden="true">
+                <svg class="h-6 w-6" viewBox="0 0 36 36" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M18 4 29 8v8c0 7-4.4 12.6-11 16-6.6-3.4-11-9-11-16V8l11-4Z" fill="currentColor" opacity=".12" />
+                  <path d="M18 4 29 8v8c0 7-4.4 12.6-11 16-6.6-3.4-11-9-11-16V8l11-4Z" stroke-width="1.8" />
+                  <path d="M12 19h12M18 10v18" stroke-width="1.8" />
+                </svg>
+              </span>
+              <div class="min-w-0">
+                <strong class="block truncate text-[11px] text-[#e8ece5]">Settlement militia</strong>
+                <span class="mt-0.5 block text-[8px] text-[#717d76]">Local defense formation</span>
+              </div>
+            </div>
+            <div class="shrink-0 text-right">
+              <strong class="block text-sm tabular-nums text-[#f2eee0]">{side.strengthVisible ? side.militiaCount.toLocaleString() : '?'}</strong>
+              <span class="text-[8px] uppercase tracking-wide text-[#68736d]">{side.strengthVisible ? 'units' : 'unknown size'}</span>
+            </div>
+          </div>
+        </div>
+      {/if}
       {#each side?.armyIds ?? [] as armyId}
         {@const army = sideArmies.find((candidate) => candidate.armyId?.value === armyId.value)}
         {#if army}
@@ -2893,9 +2910,10 @@
         {:else}
           <div class="border border-dashed border-white/[0.1] px-2.5 py-3 text-center text-[9px] text-[#69746e]">Formation details concealed</div>
         {/if}
-      {:else}
-        <div class="px-2.5 py-5 text-center text-[9px] text-[#69746e]">No field armies disclosed</div>
       {/each}
+      {#if formationCount === 0}
+        <div class="px-2.5 py-5 text-center text-[9px] text-[#69746e]">No field armies disclosed</div>
+      {/if}
     </div>
   </section>
 {/snippet}