Show the side-pot breakdown before the showdown, not after

Dealing guides are consistent that the most common side-pot error isn't
miscounting the chips, it's failing to announce the breakdown clearly before
the showdown. The tool had the arithmetic right but only revealed it after the
hand, one layer at a time, as the wizard asked who won each.

The breakdown is now visible while the hand is still running: as soon as an
all-in splits the money, the action bar lists the main pot and each side pot
with the amount and who can win it, and the wizard repeats it under "Announce
before the showdown" before asking for a winner. A hand with a single
undivided pot shows nothing, so the line means something when it appears.

Chips nobody could call are called what they are. Money above the largest live
contribution was never contested — usually an overbet by someone who then
folded — so it's listed as "Uncalled, back to X" rather than padding a side
pot nobody can win. The wizard's leftover warning says the same thing instead
of telling the dealer to un-fold someone to win it, which was the wrong advice
for chips that should simply be pushed back.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_015bnp7xKUPFFSpwkYNFaPgb

JoshHeaps.Net/wwwroot/css/casino/holdem.css

@@ -1102,6 +1102,67 @@ body.hasActionBar #holdemSidebar {
     white-space: nowrap;
 }
 
+/* ---------- Side-pot breakdown ---------- */
+
+.potBreakdown {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+    margin-bottom: 0.55rem;
+    padding: 0.4rem 0.55rem;
+    background: rgba(216, 180, 106, 0.07);
+    border: 1px solid rgba(216, 180, 106, 0.25);
+    border-radius: 8px;
+}
+
+.potBreakdownHeading {
+    margin: 0 0 0.35rem;
+    color: #d8b46a;
+    font-size: 0.68rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+}
+
+.potLayer {
+    display: flex;
+    align-items: baseline;
+    gap: 0.5rem;
+    font-size: 0.76rem;
+}
+
+.potLayerLabel {
+    color: #d8b46a;
+    font-weight: 600;
+    flex: none;
+}
+
+.potLayerAmount {
+    color: #f2f2f2;
+    font-variant-numeric: tabular-nums;
+    font-weight: 600;
+    flex: none;
+}
+
+.potLayerWho {
+    color: #9a9a9a;
+    flex: 1;
+    min-width: 0;
+    text-align: right;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.potBreakdownWizard {
+    margin-bottom: 1rem;
+}
+
+.potLayerReturn .potLayerLabel,
+.potLayerReturn .potLayerAmount {
+    color: #9a9a9a;
+    font-weight: 500;
+}
+
 .actionButtons {
     display: flex;
     gap: 0.5rem;