Numbo の通話機能（音声通話・ビデオ通話）を完全に作り直してください。 LINE の通話画面を参考にしたデザインにしてください。 既存のチャット・フィード・その他の機能は一切変更しないでください。

Numbo の通話機能（音声通話・ビデオ通話）を完全に作り直してください。
LINE の通話画面を参考にしたデザインにしてください。
既存のチャット・フィード・その他の機能は一切変更しないでください。

---

## 【最優先】現在の問題を修正する

1. 通話画面の背景が白（#ffffff）になっていてテキスト・ボタンが見えない → ダーク背景に修正する
2. ビデオ通話で相手・自分の映像が表示されない → WebRTC の映像ストリームを video タグに正しく接続する
3. 通話関連のすべての CSS で `background: white` `background: #fff` `background: #fafafa` をダーク背景に置き換える
4. ライトモードの CSS が通話画面の背景を白に上書きしないよう修正する（`.theme-light` クラスの影響を通話画面から除外する）

---

## 【着信音の変更】アップロードした MP3 ファイルを着信音として使用する

### ファイルについて
- ファイル名：電話呼び出し音4回.mp3
- 内容：実際の電話の呼び出し音（リアルな着信音）

### 実装方法
1. このMP3ファイルをサーバーの `assets/` フォルダに `ringtone.mp3` というファイル名で保存する
2. 現在の WebAudio API による電子音の着信音生成コードを完全に削除する
3. 代わりに HTML5 の `<audio>` タグを使って MP3 ファイルを再生する
4. 着信音の実装は以下の仕様にする：

```
着信音の仕様：
- ファイル：/assets/ringtone.mp3
- 着信があったとき自動再生する（autoplay）
- ループ再生する（loop: true）
- 応答・拒否・キャンセル・通話終了時に必ず再生を停止して最初に巻き戻す
- 音量は設定画面の着信音量設定（0〜100%）に連動する
- 着信音設定が OFF の場合は再生しない
- ブラウザのオートプレイ制限を回避するため：
- ユーザーが最初にページを操作した時点で Audio オブジェクトを事前に作成して unlock する
- 着信時に play() を呼び出す
- play() が失敗した場合（Promise rejected）はコンソールにエラーを出力してサイレントで続行する
- アプリをバックグラウンドにしても着信音が鳴り続けるよう Service Worker 経由のプッシュ通知と連携する
```

5. 着信音のテスト再生ボタン（設定画面の「📞 着信音・バイブレーション」セクション）でもこの MP3 ファイルを再生するようにする

---

## 通話画面のデザイン仕様（LINE風）

### 共通カラー・スタイル
- 通話画面の背景：`linear-gradient(180deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%)`
- すべてのテキスト：`color: #ffffff`
- コントロールボタン背景：`rgba(255,255,255,0.18)`（半透明白）
- コントロールボタンアイコン：`color: #ffffff`
- 終話ボタン背景：`#e53935`（赤）
- 応答ボタン背景：`#43a047`（緑）
- フォント：既存アプリと統一
- ライトモード時も通話画面はダーク固定

---

## 【着信画面】スマートフォン・PC共通

- 画面全体をダーク背景で覆う（position: fixed・top: 0・left: 0・width: 100%・height: 100%・z-index: 9999）
- 上部中央：相手のアイコン（80px円形・白いボーダー2px・パルスアニメーション）
- アイコン下：相手の表示名（白・22px・太字）
- 名前下：「音声通話」または「ビデオ通話」ラベル（白・14px・opacity: 0.8）
- 中央下部：応答ボタン（緑 #43a047・円形・64px・電話SVGアイコン白）と拒否ボタン（赤 #e53935・円形・64px・✕SVGアイコン白）を左右に配置する
- ボタン下にラベル（「応答」「拒否」・白・12px）を表示する
- 着信中は ringtone.mp3 をループ再生する
- 着信中はバイブレーション（200ms振動→100ms停止→200ms振動）を繰り返す

---

## 【発信中・呼び出し中画面】

### スマートフォン
- 画面全体をダーク背景で覆う（z-index: 9999）
- 上部中央：相手のアイコン（80px円形・白いボーダー2px・ゆっくりパルスアニメーション）
- アイコン下：相手の表示名（白・22px・太字）
- 名前下：「呼び出し中...」（白・14px・フェードイン・アウトアニメーション）
- 下部中央：赤い終話ボタン（64px円形・赤 #e53935・受話器SVGアイコン斜め・白）
- ボタン下：「キャンセル」ラベル（白・12px）

### PC
- 画面中央にカード（幅380px・ダーク背景 #1a1a2e・角丸20px・padding 40px）で表示
- 背景全体も半透明の暗いオーバーレイ（rgba(0,0,0,0.7)）で覆う
- 内容はスマートフォンと同じ

---

## 【音声通話中画面】

### スマートフォン
- 画面全体をダーク背景で覆う（z-index: 9999）
- 上部中央：相手のアイコン（100px円形・白いボーダー2px）
- アイコン下：相手の表示名（白・24px・太字）
- 名前下：「通話中」テキスト（白・14px・opacity: 0.8）
- その下：通話時間カウンター（白・20px・モノスペースフォント・00:00形式・リアルタイム更新）
- カウンター下：音声波形アニメーション（緑 #43a047・5本のバーが上下に動くアニメーション）
- 下部：コントロールボタン3つを横並びで表示する（ボタン間隔均等）
- 左：マイクON/OFFボタン（マイクSVGアイコン・ラベル「マイク」・OFFのとき赤い斜線）
- 中央：スピーカーON/OFFボタン（スピーカーSVGアイコン・ラベル「スピーカー」）
- 右：ビデオ通話に切替ボタン（カメラSVGアイコン・ラベル「ビデオ」）
- ボタン下：赤い終話ボタン（64px円形・赤 #e53935・受話器SVGアイコン斜め）中央配置
- 終話ボタン下：「終了」ラベル（白・12px）

### PC
- 画面中央にカード（幅420px・ダーク背景・角丸20px）で表示
- 背景全体も半透明の暗いオーバーレイで覆う
- 内容はスマートフォンと同じ

---

## 【ビデオ通話中画面】スマートフォン・PC共通

- 相手の映像（`<video id="remoteVideo" autoplay playsinline>`）を画面全体（position: fixed・100vw×100vh・object-fit: cover・z-index: 9999）に表示する
- 自分の映像（`<video id="localVideo" autoplay playsinline muted>`）を右下に小さく表示する（position: fixed・右下20px・幅120px・高さ160px・角丸12px・白いボーダー2px・z-index: 10000）
- 相手の映像が接続前（ストリーム未受信）は相手のアイコンをプレースホルダーとして中央に表示する
- 画面上部：半透明の暗いオーバーレイバー（rgba(0,0,0,0.5)・padding 16px）の上に相手の表示名（白・18px・太字）と通話時間カウンター（白・14px）を表示する
- 画面下部：半透明の暗いオーバーレイバー（rgba(0,0,0,0.6)・padding 20px）の上にコントロールボタンを横並びで表示する：
- マイクON/OFFボタン（マイクSVGアイコン・白・OFFのとき赤い斜線）
- カメラON/OFFボタン（カメラSVGアイコン・白）
- カメラ切替ボタン（インカメラ⇔アウトカメラ・回転SVGアイコン・白）
- 終話ボタン（赤 #e53935・大きめ64px円形・受話器SVGアイコン斜め・白）
- すべてのボタンは半透明白背景の円形（rgba(255,255,255,0.18)・48px円形）
- ボタンアイコンは白色

---

## WebRTC 映像接続の修正（重要）

ビデオ通話で映像が表示されない問題を以下の手順で修正する：

1. `getUserMedia({ video: true, audio: true })` の結果を `localVideo.srcObject` に代入する
2. `peerConnection.ontrack` イベントで受け取ったストリームを `remoteVideo.srcObject` に代入する
3. `localVideo` と `remoteVideo` の両方に `autoplay` `playsinline` `muted`（localVideoのみ）属性を設定する
4. iOS Safari でも映像が表示されるよう `playsinline` 属性を必ず付与する
5. 映像ストリームの接続状態をコンソールにログ出力して確認できるようにする

---

## 着信・バイブレーション設定

- 設定画面の「📞 着信音・バイブレーション」セクションに以下を表示する：
- 着信音 ON/OFF トグル
- 音量スライダー（0〜100%）
- テスト再生ボタン（ringtone.mp3 を1回再生する）
- バイブレーション ON/OFF トグル
- 設定は localStorage に保存してデバイスごとに維持する

---

## 実装上の注意事項

- 通話 UI はすべて `position: fixed; z-index: 9999;` で最前面に固定する
- どのページを開いていても通話画面が最前面に表示される
- `document.body` の直下または共通レイアウトの HTML に通話 UI を含める
- 既存の WebRTC・STUN サーバー設定（Google STUN）は変更しない
- 既存のシグナリング（call_signals テーブルのポーリング方式）は変更しない

---

既存のチャット・フィード・その他の機能は変更しないでください。