アンサンブル・デュエル - 音楽知識バトルカードゲーム

## 1. アプリの目的・ターゲットユーザー
音楽の知識（音名・音符・リズム・楽器・音楽史・楽語）をカードゲーム形式で楽しく競えるブラウザ完結型バトルゲーム。音楽好き・吹奏楽部・合唱部・ピアノ習いたての小中高生〜大人まで、「ゲームをしながら音楽理論が身につく」体験を提供する。外部APIなし・DBはランキングのみ。

---

## 2. 主要機能
- **デッキバトルシステム**: プレイヤーとCPUが5枚の「音楽カード」を手持ちに持ち、ターンごとに1枚を出し合って強さを比べる。カードには「音名・リズム・楽器・楽語・音楽家」の5属性があり、属性相性（例：リズム＞楽語＞音名＞楽器＞リズム の循環相性）で勝敗が決まる。
- **ミニクイズで強化**: カードを出す前に「このカードの説明として正しいものは？」という2択クイズが表示され、正解すると一時的に攻撃力＋20%のブースト。不正解でも解説テキストが表示されるので学習につながる。
- **カードコレクション**: 勝利するごとに新しいカードを1枚アンロック（全80枚）。獲得済みカードは「カード図鑑」で音楽解説付きで閲覧できる。
- **3つのゲームモード**: ①ノーマルバトル（CPU3段階難易度）、②スピードラウンド（5問連続クイズで素早く判断）、③デイリーチャレンジ（毎日同じシードで全プレイヤー共通の特殊ルール戦）
- **スコアランキング**: デイリーチャレンジの得点をMySQLに保存してグローバルランキング表示。ニックネームのみ登録、個人情報不要。

---

## 3. 画面構成

### タイトル画面
- ゲームロゴ（五線譜×カードモチーフのイラスト）
- 「バトル開始」「カード図鑑」「ランキング」ボタン
- 今日のデイリーチャレンジバナー（残り時間カウンター付き）

### デッキ選択画面
- 所持カード一覧（グリッド表示、属性・強さでソート）
- 5枚をドラッグ&タップで選択してデッキ確定
- ランダムデッキ自動生成ボタン（初心者向け）

### バトル画面（メイン）
- 上段：CPUの手持ちカード5枚（裏向き）＋CPUのHP/勝利数
- 中段：フィールド（出されたカード2枚の対決エリア）＋クイズポップアップ
- 下段：自分の手持ちカード5枚（表向き）＋自分のHP/勝利数
- カード選択→クイズ表示→ブースト演出→カード対決アニメ→勝敗表示の流れ
- 勝利時：カード獲得エフェクト＋解説テキスト表示

### カード図鑑画面
- 属性別タブ（音名/リズム/楽器/楽語/音楽家）
- カードサムネイル一覧（未獲得はシルエット）
- カードクリックで詳細：カード名・イラスト・強さ・音楽解説テキスト（50〜80字）

### ランキング画面
- デイリーチャレンジ上位20名
- 自分のスコアと順位（LocalStorageと照合）

---

## 4. データ構造

### cards（内製JSデータ、DBなし）
```
id, name, attribute(音名/リズム/楽器/楽語/音楽家),
power(1〜100), quiz_question, quiz_correct, quiz_wrong, description, icon_emoji
```
計80件をJSファイルにハードコード。

### daily_scores（MySQL）
```
id INT AUTO_INCREMENT PRIMARY KEY,
nickname VARCHAR(20),
score INT,
challengeDate DATE,
created_at TIMESTAMP
```

### プレイヤー状態（LocalStorage）
```json
{ "unlockedCards": [1,2,5,...], "totalWins": 12, "dailyPlayed": "2025-07-10" }
```

---

## 5. デザインの方向性
- **テーマ**: 魔法学校の音楽室風。深い紫〜紺のグラデーション背景に金色の五線譜装飾。カードはクリーム色の羊皮紙風で属性ごとに色帯（赤/青/緑/黄/紫）。
- **フォント**: 見出しは明朝系でエレガント、UIは丸ゴシック系で読みやすく。
- **アニメーション**: カード対決時に音符がフワっと飛ぶCSSアニメ。勝利カードがキラリと光るハイライトエフェクト。
- **効果音**: Web Audio APIで生成したポロン音（音名カード）、ドラムロール（リズムカード）などの短いSEのみ（0.5秒以内）。
- **レスポンシブ**: スマホ縦持ちでも5枚のカードが横スクロールなしで並ぶ120px幅カードデザイン。PC時は大きく表示して図鑑閲覧が快適。