ChargeBuddy - スマホバッテリー長持ちケア＆育成アプリ

目的: スマホ依存度の高い10〜40代ユーザー向けに、充電習慣を可視化し楽しく改善できる公開Webツール。学術的な充電ガイドラインを、無理なく続けられる形で提示する。

主要機能:
1. 充電シミュレーター: 現在%・目標%・充電器出力(W)・電池容量(mAh)を入力すると推定充電時間をリアルタイムカウントダウン表示。
2. バッテリーケア診断: 20問のYES/NO質問（0%まで使う、就寝中も充電し続ける等）から健康スコア(0-100)と改善アドバイスを生成。
3. でんちくん育成: 充電レベル・ケアスコアに応じてマスコットの表情・元気度が変化するキャラクター表示。
4. 充電ログ&実績: 開始/終了%、時刻を記録しカレンダーヒートマップとバッジ実績で継続を後押し。
5. 匿名ランキング: ニックネームで健康スコアを投稿し、全国ランキングで競える(PHP+MySQL)。
6. 充電中アンビエントBGM再生でリラックスタイムを演出。

画面構成: ①ホーム(でんちくん+今日のスコア+クイックシミュレーター) ②シミュレーターページ ③診断クイズページ(結果カード) ④ログ/カレンダーページ ⑤実績/図鑑ページ ⑥ランキングページ。

データ構造: MySQLに ranking テーブル(id, nickname, health_score, badge_count, created_at)。診断結果・充電ログ・BGM設定はLocalStorageに保存しサーバー送信不要。

デザイン: フラットベクターの丸みキャラクター、パステルブルー×グリーンの配色、やわらかい光の演出でテック感と癒しを両立。

BGM仕様: 充電中に流す「Charging Lo-fi Ambient」。BPM70、4/4拍子。Aメロ(1-8小節)は温かいメジャー7thパッド+ソフトキック(2,4拍アクセント)+ブラシスネア+メロウなシンセベース、Bメロ(9-16小節)でグロッケン風ベルメロディを追加し、16小節目に軽いフィルを挿入。Web Audio APIでAudioContext.currentTime基準の先読みスケジューリングを行い、BGM用/SE用GainNodeを分離、ミュートボタンと停止時の全ノードdisconnect処理を実装する。

## ビジュアル品質要件
- 生成済み素材を仕様内の用途・表示場所で実際に使用し、未使用素材を残さない
- 画風・配色・キャラクター比率を全画面で統一し、文字はHTML/CSSで重ねる
- PC・スマホで画像の欠け、引き伸ばし、文字との重なりがないことを開発完了前に確認する