学習結果シェア用「成績カード」画像生成機能の追加

1. 目的
セッション終了後に自分の成績を「画像カード」として保存・共有できるようにする。SNSや友人へのシェアを通じてモチベーションを高め、継続学習を促進する。外部APIは使用せず、Canvas APIのみで完結する。

2. 具体的な仕様

【表示タイミング】
- 4択モード・エンドレスモード・苦手集中モードの結果画面（既存の答え合わせ画面）の下部に「📸 成績カードを保存」ボタンを追加する。

【成績カードのデザイン（Canvas描画）】
- サイズ: 1200×630px（OGP推奨比率・スマホ縦でも見やすい比率）
- 背景: アプリのポップカラーに合わせたグラデーション（例：紫→青系）
- 表示内容（上から順）:
① アプリ名「CardMaster」ロゴ文字（左上）
② 学習言語の国旗絵文字＋言語名・カテゴリ名（中央上部）
③ 正答率を大きく表示（例：「85%」を特大フォント）
④ 正解数／総問題数（例：「17 / 20問正解」）
⑤ 学習モード名（4択／エンドレス／苦手集中）
⑥ 連続学習日数ストリーク（例：「🔥 5日連続」）
⑦ 学習日時（例：「2025年7月15日」）
⑧ 正答率に応じた一言メッセージ（90%以上:「完璧！」/ 70%以上:「すばらしい！」/ 50%以上:「もう少し！」/ 50%未満:「次は頑張ろう！」）
⑨ URL「aiapps.jp」（右下に小さく）

【操作フロー】
- 「📸 成績カードを保存」ボタン押下 → Canvas描画 → `canvas.toBlob()` でPNG生成
- PC: `<a download>` タグを動的生成してPNGを自動ダウンロード
- スマホ: Web Share API（`navigator.share`）が使える場合はシェアシートを呼び出し（`files`オプション）。非対応の場合は同様にダウンロードにフォールバック
- ボタンはスピナー表示（「生成中...」）→完了後に元のテキストへ戻す

【フォント】
- Canvas描画はシステムフォント（sans-serif）を使用し外部フォント読み込み不要
- 言語名・カテゴリ名は既存のdataオブジェクトから取得

3. 既存機能との整合
- 結果画面のHTML構造は変更せず、ボタンを1つ追加するのみ
- Canvas要素はdisplay:noneで非表示のまま描画し、DOMに影響しない
- localStorage・スコア計算・バッジ判定ロジックは一切変更しない
- ボタンはスマホ・PCどちらでも動作し、Web Share API非対応環境でも必ずダウンロードで代替される
- 既存のCSS・レイアウトへの影響は「📸 成績カードを保存」ボタンのスタイル追加のみ（既存クラスに倣ったデザイン）