カラーチェーン・ダンジョン - 色の連鎖で謎を解く化学反応パズル

## 1. アプリの目的・ターゲットユーザー
色付きのフラスコ（薬瓶）をチェーン状につなぎ、混色反応を連鎖させながら出口の「目標色」に到達させるブラウザ完結型パズルゲーム。色の混合原理（赤+青=紫、青+黄=緑など）を直感で学びながら遊べる。

**ターゲット:** 10代〜40代のパズルゲーム好き・色覚に興味がある層。短時間でさくっと遊べる設計。

---

## 2. 主要機能

- **ステージモード:** 全60ステージ（初級20・中級20・上級20）。各ステージで「スタート色フラスコ」→「反応フラスコ群」→「ゴールフラスコ（目標色）」をつなぐルートを引く。ステージデータはJSONで内蔵。
- **混色ルール:** 赤・青・黄の3原色から二次色（橙・緑・紫）→三次色（茶・灰）へと12色の混合テーブルを内蔵。途中の「触媒フラスコ（黒/白）」は色を暗くまたは明るくする効果を持つ。
- **デイリーチャレンジ:** 日付シードで毎日同じ盤面が全プレイヤーに提供され、最短手数・クリアタイムでランキングに登録。
- **エンドレスモード:** ランダム生成盤面で何問連続クリアできるかを競うサバイバル形式。ミス（目標色不一致）3回でゲームオーバー。
- **ランキング:** デイリー/エンドレスのスコアをPHP+MySQLでサーバー保存。ニックネームのみで登録可能（メール不要）。

---

## 3. 画面構成

### タイトル画面
- ゲーム名ロゴ（グラデーション文字）
- 「ステージモード」「デイリーチャレンジ」「エンドレス」「ランキング」の4ボタン

### ステージ選択画面
- 難易度タブ（初級・中級・上級）
- ステージカード一覧（クリア済は星マーク付き）
- LocalStorageで進捗保存

### プレイ画面（メイン）
- **上部:** ステージ番号、目標色フラスコ（大きく表示）、手数カウンター、タイマー
- **中央ゲームボード:** 7×7グリッド（Canvas or CSS Grid）。フラスコアイコンが配置された升目。隣接する升をクリック/タップでチェーン線を引いていく。
- **フラスコパレット:** 現在の「連鎖色」が画面下部にリアルタイム表示される色インジケーター
- **操作ボタン:** リセット、1手戻す（Undo）、ヒント（使用回数制限あり）
- クリア時: パーティクルアニメーション＋結果モーダル（手数・タイム・星評価1〜3）

### ランキング画面
- デイリー/エンドレスタブ切り替え
- 上位20件をテーブル表示
- 自分のスコア送信フォーム（ニックネーム入力）

---

## 4. データ構造

### DBテーブル

**rankings**
| カラム | 型 | 説明 |
|---|---|---|
| id | INT AUTO_INCREMENT | PK |
| mode | VARCHAR(20) | 'daily' or 'endless' |
| date_key | DATE | デイリーは日付、エンドレスはNULL |
| nickname | VARCHAR(30) | プレイヤー名 |
| score | INT | エンドレスは連続クリア数、デイリーは手数×100+タイム変換値 |
| clear_time | INT | クリアタイムMsec |
| created_at | DATETIME | 登録日時 |

### LocalStorage（クライアント側）
- `colorchain_progress`: ステージクリア状況（JSON配列）
- `colorchain_daily_result`: 当日デイリー結果（再送信防止）

### ステージデータ（PHP内蔵JSONまたは配列）
```
[
{
"id": 1,
"grid_size": 5,
"flasks": [
{ "x":0, "y":0, "color":"red", "type":"start" },
{ "x":2, "y":1, "color":"yellow", "type":"mix" },
{ "x":4, "y":4, "color":"orange", "type":"goal" }
],
"obstacles": [{"x":1,"y":1}],
"par_moves": 4
}
]
```

---

## 5. デザインの方向性

- **世界観:** 中世錬金術師の薬品工房。羊皮紙・木材・ガラス瓶のテクスチャを連想させるウォームブラウン＋アンバーのUI。
- **カラーパレット:** 背景は深いセピア(#2E1B0E)、UI枠はゴールド(#C9A84C)、フラスコは鮮やかな混色で視認性重視。
- **フォント:** タイトルは筆記体風ウェブフォント(Google Fonts: Cinzel or MedievalSharp)、本文はNoto Sans JP。
- **アニメーション:** チェーン線を引くときに液体が流れるアニメ（CSSトランジション）、クリア時に色付きパーティクルが弾ける演出（Canvas）。
- **サイズ:** ゲームボードはスマホ(375px〜)でも快適にタップできるよう最小マス44px確保。PC(1024px〜)では余白を広めに取り没入感を演出。
- **難易度の視覚的差別化:** 初級はパステル調の柔らかい色、上級はネオン調の鮮烈な色でステージカードを色分けし、難度が一目でわかる設計。