エコーメモリー - 音と色で競う記憶力バトルゲーム

## 1. アプリの目的・ターゲットユーザー
音と色のパターンを記憶・再現するシモン系メモリーゲームに「スピード」「複雑化」「ランキング競争」の要素を加えたブラウザゲーム。子ども(7歳〜)から記憶力を鍛えたい大人まで幅広く遊べる。登録不要で即プレイでき、スマホでも快適に操作できることを最優先とする。

---

## 2. 主要機能
- **クラシックモード**: 色付きパネル(4〜8枚)が光る順番を記憶して再現。ラウンドごとにパネル追加＆点灯速度アップ。最高ラウンド数をスコアとしてDBに保存しランキング表示。
- **スピードモード**: 60秒の制限時間内に何ラウンドクリアできるかを競う。タイム切れで即終了、スコア＝クリアラウンド数×係数。
- **ダークモード(上級)**: パネルが光った後、盤面がシャッフルされてパネル位置が入れ替わる。色だけでなく「どの位置にあったか」も問われる。
- **効果音＆ビジュアルフィードバック**: Web Audio APIで各パネルに固有の音程(ド〜ド#〜レ…)を割り当て。正解/ミスでエフェクトアニメーション(緑フラッシュ/赤シェイク)。
- **グローバルランキング**: ニックネームとスコアをMySQLに保存。モードごとにトップ20を表示。同点は登録時刻が早い順。

---

## 3. 画面構成
### タイトル画面
- ロゴ(「ECHO MEMORY」 + 波形アイコン)
- モード選択ボタン3つ(クラシック / スピード / ダーク)
- ランキングボタン
- 簡単なルール説明アコーディオン

### ゲーム画面
- 上部: 現在ラウンド数 / スコア / 残り時間(スピードモードのみ)
- 中央: パネルグリッド(クラシック=2×2〜2×4、スピード=2×3固定、ダーク=3×3)
- 各パネルは大きめの角丸ボタン、光るとき明度2倍＋グロー効果
- 下部: 「START / NEXT」ボタン、ミュートボタン
- ミスでゲームオーバーオーバーレイ表示(スコア＋ランキング登録フォーム)

### ランキング画面
- タブ切り替え: クラシック / スピード / ダーク
- 上位20位を表で表示(順位 / ニックネーム / スコア / 日時)
- 自分の直近スコアをハイライト表示

---

## 4. データ構造
### テーブル: `echo_scores`
| カラム | 型 | 説明 |
|---|---|---|
| id | INT PK AUTO_INCREMENT | |
| nickname | VARCHAR(20) | プレイヤー名(最大20文字) |
| mode | ENUM('classic','speed','dark') | プレイモード |
| score | INT | スコア(ラウンド数 or ラウンド×係数) |
| created_at | DATETIME | 登録日時 |

### API(PHP)
- `POST /api/score.php` → スコア保存(ニックネーム・モード・スコアをINSERT、簡易バリデーション付き)
- `GET /api/ranking.php?mode=classic` → 上位20件をJSON返却

---

## 5. デザインの方向性
- **世界観**: 深宇宙 × 電子音楽。黒〜濃紺のグラデーション背景に、ネオンカラー(シアン・マゼンタ・イエロー・ライム・オレンジ・パープル・ホワイト・レッド)のパネル。
- **フォント**: Orbitron(Google Fonts)でSFテイストのスコア表示、本文は游ゴシック/sans-serif。
- **アニメーション**: パネル点灯はCSS transition + box-shadowでグロー表現。ゲームオーバー時は画面全体が赤くフラッシュした後、スコアカードがスライドイン。
- **レスポンシブ**: パネルサイズはvmin単位で指定し、スマホ縦持ちでも画面内に収まるよう設計。タップ遅延対策としてtouchstartイベントを使用。
- **実装規模**: HTML/CSS/JS各1ファイル + PHP2ファイル(score.php / ranking.php) + MySQL1テーブル で完結する小規模構成。