全コンポーネントの状況を把握しました。問題点：

1. opening-screen, tutorial-screen, role-selection-screen, mode-selection-screen が旧ocean/purple/pink系カラー
2. collection-screen, profile-setup-screen がpurple系グラデーション
3. dual-audio-indicator が旧カラー

統一テーマ（アイボリー #FDFDFB、モスグリーン #1B3022、テラコッタ #E67E22、ウッドブラウン #3E2723）に全部を揃えます。

Now update role-selection-screen.tsx and friend-list.tsx:

Now update dual-audio-indicator.tsx and mode-selection-screen.tsx:

Now let me read the rest of friend-list.tsx and update it:

Now let me check the remaining components that also need updating — settings-screen, lobby-screen, game-over-screen, and spectator-screen:

settings-screen.tsx と game-over-screen.tsx はすでに統一テーマ（#FDFDFB, #1B3022, #E67E22, #3E2723）で書かれています。lobby-screen.tsx と spectator-screen.tsx を確認します:

lobby-screen はすでにテーマ済みです。spectator-screen の loading 画面が古いパープル系です。修正します:

Now let's also check the getGaugeColor helper and the main game view in spectator:

Finally, update mode-selection-screen.tsx to unify its ocean-dark theme. The remaining section (rest of showCreateRoom):

Now I have the full picture. Let me rewrite the entire mode-selection-screen.tsx with the unified theme:

全体の構造を把握しました。以下の作業を行います：

1. components/ranch-screen.tsx を新規作成（牧場メイン画面＋個別牧場画面）
2. app/page.tsx にランチ状態と成長ポイント付与ロジックを追加
3. components/settings-screen.tsx にボタンを追加

Now update handleBackToSettings to award growth points on success:

Now add handleUpdateGrowth, handleViewRanch, handleBackFromRanch helpers and wire up the ranch screen:

Now add the ranch screen to the JSX render and pass onViewRanch to SettingsScreen: