Add Week 3 polish and late-game features

VC funding system (seed through IPO with requirements gating), 15
achievements with engine checker, model tuning presets and unlockable
sliders, overload policy controls, open-source mechanic with reputation
boost, enhanced Recharts analytics (subscriber/reputation/revenue vs
expenses charts), M&A acquisition system, sidebar NEW badges on era
transitions, tutorial hints, and wired-up settings toggles.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/web/src/pages/FinancePage.tsx

@@ -1,7 +1,10 @@
 import { useGameStore } from '@/store';
-import { formatMoney, formatPercent } from '@ai-tycoon/shared';
-import { TrendingUp, TrendingDown, DollarSign, PiggyBank, BarChart3 } from 'lucide-react';
-import { AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer, BarChart, Bar, CartesianGrid } from 'recharts';
+import { formatMoney, formatPercent, formatNumber, FUNDING_ROUNDS } from '@ai-tycoon/shared';
+import type { FundingRoundType } from '@ai-tycoon/shared';
+import { TrendingUp, TrendingDown, DollarSign, PiggyBank, BarChart3, Rocket } from 'lucide-react';
+import { AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer, LineChart, Line } from 'recharts';
+import { canRaiseFunding } from '@ai-tycoon/game-engine';
+import type { GameState } from '@ai-tycoon/shared';
 
 export function FinancePage() {
   const money = useGameStore((s) => s.economy.money);
@@ -13,6 +16,16 @@ export function FinancePage() {
   const history = useGameStore((s) => s.economy.financialHistory);
   const infrastructure = useGameStore((s) => s.infrastructure);
   const talent = useGameStore((s) => s.talent);
+  const raiseFunding = useGameStore((s) => s.raiseFunding);
+
+  const gameStateForFunding: GameState = useGameStore((s) => ({
+    meta: s.meta, economy: s.economy, infrastructure: s.infrastructure,
+    compute: s.compute, research: s.research, models: s.models,
+    market: s.market, competitors: s.competitors, talent: s.talent,
+    data: s.data, reputation: s.reputation, events: s.events,
+    achievements: s.achievements,
+  }));
+  const fundingStatus = canRaiseFunding(gameStateForFunding);
 
   const netIncome = revenuePerTick - expensesPerTick;
   const burnRate = expensesPerTick > revenuePerTick ? expensesPerTick - revenuePerTick : 0;
@@ -73,38 +86,60 @@ export function FinancePage() {
         </div>
 
         <div className="bg-surface-900 border border-surface-700 rounded-xl p-4">
-          <h3 className="text-sm font-medium text-surface-400 mb-4">Income Statement (per second)</h3>
-          <div className="space-y-3">
-            <div className="flex justify-between text-sm">
-              <span className="text-surface-300">Revenue</span>
-              <span className="font-mono text-success">{formatMoney(revenuePerTick)}</span>
-            </div>
-            <div className="border-t border-surface-700" />
-            <div className="flex justify-between text-sm">
-              <span className="text-surface-400 pl-4">Infrastructure</span>
-              <span className="font-mono text-danger">-{formatMoney(infraCosts)}</span>
-            </div>
-            <div className="flex justify-between text-sm">
-              <span className="text-surface-400 pl-4">Talent</span>
-              <span className="font-mono text-danger">-{formatMoney(talentCosts)}</span>
-            </div>
-            <div className="flex justify-between text-sm">
-              <span className="text-surface-400 pl-4">Total Expenses</span>
-              <span className="font-mono text-danger">-{formatMoney(expensesPerTick)}</span>
-            </div>
-            <div className="border-t border-surface-700" />
-            <div className="flex justify-between text-sm font-semibold">
-              <span>Net Income</span>
-              <span className={`font-mono ${netIncome >= 0 ? 'text-success' : 'text-danger'}`}>
-                {formatMoney(netIncome)}
-              </span>
+          <h3 className="text-sm font-medium text-surface-400 mb-4">Revenue vs Expenses</h3>
+          {history.length > 1 ? (
+            <ResponsiveContainer width="100%" height={200}>
+              <LineChart data={history}>
+                <XAxis dataKey="tick" hide />
+                <YAxis hide />
+                <Tooltip
+                  contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: '8px' }}
+                  formatter={(v: number) => [formatMoney(v)]}
+                />
+                <Line type="monotone" dataKey="revenue" stroke="#22c55e" dot={false} strokeWidth={2} />
+                <Line type="monotone" dataKey="expenses" stroke="#ef4444" dot={false} strokeWidth={2} />
+              </LineChart>
+            </ResponsiveContainer>
+          ) : (
+            <div className="h-[200px] flex items-center justify-center text-surface-500 text-sm">
+              Data will appear as time passes
             </div>
+          )}
+        </div>
+      </div>
+
+      <div className="bg-surface-900 border border-surface-700 rounded-xl p-4">
+        <h3 className="text-sm font-medium text-surface-400 mb-4">Income Statement (per second)</h3>
+        <div className="space-y-3">
+          <div className="flex justify-between text-sm">
+            <span className="text-surface-300">Revenue</span>
+            <span className="font-mono text-success">{formatMoney(revenuePerTick)}</span>
+          </div>
+          <div className="border-t border-surface-700" />
+          <div className="flex justify-between text-sm">
+            <span className="text-surface-400 pl-4">Infrastructure</span>
+            <span className="font-mono text-danger">-{formatMoney(infraCosts)}</span>
+          </div>
+          <div className="flex justify-between text-sm">
+            <span className="text-surface-400 pl-4">Talent</span>
+            <span className="font-mono text-danger">-{formatMoney(talentCosts)}</span>
+          </div>
+          <div className="flex justify-between text-sm">
+            <span className="text-surface-400 pl-4">Total Expenses</span>
+            <span className="font-mono text-danger">-{formatMoney(expensesPerTick)}</span>
+          </div>
+          <div className="border-t border-surface-700" />
+          <div className="flex justify-between text-sm font-semibold">
+            <span>Net Income</span>
+            <span className={`font-mono ${netIncome >= 0 ? 'text-success' : 'text-danger'}`}>
+              {formatMoney(netIncome)}
+            </span>
           </div>
         </div>
       </div>
 
       <div className="bg-surface-900 border border-surface-700 rounded-xl p-4">
-        <h3 className="text-sm font-medium text-surface-400 mb-3">Funding History</h3>
+        <h3 className="text-sm font-medium text-surface-400 mb-3">Funding</h3>
         <div className="flex items-center gap-4 mb-3">
           <div className="text-sm">
             Founder Equity: <span className="font-mono font-semibold">{formatPercent(funding.founderEquity)}</span>
@@ -112,14 +147,41 @@ export function FinancePage() {
           <div className="text-sm">
             Total Raised: <span className="font-mono font-semibold">{formatMoney(funding.totalRaised)}</span>
           </div>
+          {funding.isPublic && (
+            <span className="text-xs px-2 py-1 rounded-full bg-accent/20 text-accent-light">Public</span>
+          )}
         </div>
+
+        {fundingStatus.nextRound && (
+          <div className="bg-surface-800 rounded-lg p-4 mb-4 border border-surface-600">
+            <div className="flex items-center justify-between mb-2">
+              <h4 className="font-semibold text-sm capitalize">
+                {fundingStatus.nextRound === 'ipo' ? 'IPO' : fundingStatus.nextRound.replace('series', 'Series ')}
+              </h4>
+              {fundingStatus.canRaise ? (
+                <button
+                  onClick={() => raiseFunding(fundingStatus.nextRound!)}
+                  className="flex items-center gap-1.5 bg-accent hover:bg-accent-dark text-white rounded-lg px-4 py-2 text-sm font-medium"
+                >
+                  <Rocket size={14} />
+                  Raise {formatMoney(FUNDING_ROUNDS[fundingStatus.nextRound! as FundingRoundType].amount)}
+                </button>
+              ) : (
+                <span className="text-xs text-warning">{fundingStatus.reason}</span>
+              )}
+            </div>
+          </div>
+        )}
+
         {funding.completedRounds.length === 0 ? (
           <p className="text-sm text-surface-500">No funding rounds completed yet.</p>
         ) : (
           <div className="space-y-2">
             {funding.completedRounds.map((round, i) => (
               <div key={i} className="bg-surface-800 rounded-lg p-3 flex items-center justify-between">
-                <span className="text-sm font-medium capitalize">{round.type}</span>
+                <span className="text-sm font-medium capitalize">
+                  {round.type === 'ipo' ? 'IPO' : round.type.replace('series', 'Series ')}
+                </span>
                 <div className="flex items-center gap-4 text-sm">
                   <span className="font-mono text-success">{formatMoney(round.amount)}</span>
                   <span className="text-surface-400">{formatPercent(round.dilution)} dilution</span>