Update client rendering for the real board and 5 stats

boardRender.js: TYPE_STYLE now covers the 9 real tile types instead of the
old 5 (start/finish/choice/money/event) — payday/cash_bonus/action_space/
dice_space/roll_table_ref/inline_table each get their own icon, color-coded
by mechanic (green=income, blue=rolls-against-a-real-table, dashed
light-blue=rolls-against-a-synthesized-placeholder, red=decision point).
The old per-space cash badge is gone (tiles no longer carry a static cash
amount — effects resolve dynamically via tables) and replaced with a die
badge ("D20") wherever a tile involves a roll. Also fixes a real bug the
headless verification run caught: computeLayout assumed every 'choice'-type
space has a populated `choices` array, which none do yet post-rebuild
(`for (const t of space.choices)` on undefined) — now falls back to `next`
like everything else, and the lane fan-out is keyed off "does this space
have more than one outgoing edge" generically rather than off `type`, so it
keeps working whenever choices/stop tiles do get real branches later.

index.html: player list shows all five stats (cash/love/education/wealth/
age) instead of just cash; the log feed shows each tile's actual resolution
description (already human-readable from tileEffects.js) with a small ⚠️
marker on placeholder/invented resolutions, instead of a bare cash delta.
computeLayout's colsPerRow bumped to 20 for the much larger (212-space)
board.

public/index.html

@@ -50,6 +50,8 @@
     border: 1.5px solid var(--line); border-radius: 10px; background: #fffaf0; margin-bottom: 6px; font-size: 14px;
   }
   ul.player-list li.active { border-color: var(--marigold); background: #fff3dc; }
+  .stat-line { display: block; color: var(--ink-soft); font-size: 12px; margin-top: 2px; }
+  .todo-mark { font-size: 11px; opacity: .8; }
   .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
   .hint { color: var(--ink-soft); font-size: 13px; }
   .turn-banner { font-family: "Baloo 2"; font-weight: 700; font-size: 18px; margin-bottom: 10px; }
@@ -101,21 +103,25 @@
     fill: #fffaf0; stroke: var(--line); stroke-width: 2.5;
     filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
   }
-  .space-start .space-shape { fill: var(--good); stroke: #2c6b44; }
   .space-finish .space-shape { fill: var(--marigold); stroke: #b97f18; }
   .space-choice .space-shape { fill: var(--bad); stroke: #8f3120; }
-  .space-event .space-shape { fill: #e9d9f7; stroke: #b79bd6; }
+  .space-stop .space-shape { fill: #d6553b; stroke: #8f3120; }
+  .space-payday .space-shape { fill: #d7ecd0; stroke: #3f8f5f; }
+  .space-cash_bonus .space-shape { fill: #fbe4b8; stroke: #b97f18; }
+  .space-action_space .space-shape,
+  .space-dice_space .space-shape,
+  .space-roll_table_ref .space-shape { fill: #cfe0f0; stroke: #3f6ea5; }
+  .space-inline_table .space-shape { fill: #dde8f2; stroke: #7a97b5; stroke-dasharray: 3 2; }
+  .space-event .space-shape { fill: #fdf6e3; stroke: #c9b98a; }
   .space-label {
     width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center;
     justify-content: center; text-align: center; font-family: "Baloo 2"; font-weight: 700;
     font-size: 10.5px; line-height: 1.15; color: var(--ink); pointer-events: none; gap: 1px;
   }
-  .space-start .space-label, .space-choice .space-label { color: #fff; }
+  .space-choice .space-label, .space-stop .space-label { color: #fff; }
   .space-icon { font-size: 15px; }
   .space-text { max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
-  .cash-badge { font-family: "Baloo 2"; font-weight: 800; font-size: 11px; }
-  .cash-badge.pos { fill: var(--good); }
-  .cash-badge.neg { fill: var(--bad); }
+  .die-badge { font-family: "Baloo 2"; font-weight: 800; font-size: 10px; fill: var(--ink-soft); }
   .space.highlight .space-shape {
     stroke: #fff2c4; stroke-width: 4; animation: pulseGlow 1.1s ease-in-out infinite;
   }
@@ -296,7 +302,8 @@
       const spaceLabel = board.spaces[p.position]?.label ?? p.position;
       li.innerHTML = `<span class="dot" style="background:${p.color}"></span>
         <strong>${escapeHtml(p.name)}${p.id === self.playerId ? ' (you)' : ''}</strong>
-        — ${escapeHtml(spaceLabel)} · $${p.cash}`;
+        — ${escapeHtml(spaceLabel)}
+        <span class="stat-line">💵$${p.cash} · ❤️${p.love} · 🎓${p.education} · 💎${p.wealth} · 🎂${p.age}</span>`;
       els.gamePlayerList.appendChild(li);
     }
 
@@ -325,9 +332,9 @@
 
     els.logFeed.innerHTML = state.log.slice().reverse().map((entry) => {
       const p = state.players[entry.playerId];
-      const sign = entry.cashDelta > 0 ? '+' : '';
-      const cashPart = entry.cashDelta ? ` (${sign}${entry.cashDelta})` : '';
-      return `<div>${escapeHtml(p?.name ?? '?')} → ${escapeHtml(entry.label)}${cashPart}</div>`;
+      const text = entry.description || entry.label;
+      const todoMark = entry.todo ? ' <span class="todo-mark" title="Placeholder content">⚠️</span>' : '';
+      return `<div>${escapeHtml(p?.name ?? '?')} → ${escapeHtml(text)}${todoMark}</div>`;
     }).join('');
 
     if (state.status === 'finished') {