カラーロジック - 色の混合推理パズルゲーム

## 1. アプリの目的・ターゲットユーザー
色の混合ルール（赤＋青＝紫、青＋黄＝緑など）を手がかりに、隠された「元の色」を推理するブラウザ完結型のロジックパズルゲーム。数字や言語に依存しないため年齢・国籍を問わず楽しめる。主なターゲットは小学校高学年〜大人、色彩感覚を磨きたいデザイン系学生・社会人、論理パズル好きなカジュアルゲーマー。

---

## 2. 主要機能
- **混合推理パズル**: 3×3〜5×5のグリッドに「混合後の色」が配置されており、隣接セルに塗った「元色」同士が混ざって指定色になるよう、すべての元色を確定させる。Mastermind的なヒント＋消去法の楽しさ。
- **3モード**: ①エンドレス（ランダム生成・レベルが上がるごとにグリッド拡大＆混合ルール複雑化）②デイリーチャレンジ（全ユーザー共通シード・1日1問・DB掲載スコアランキング）③レッスン（混合ルールを一から学べる10ステップチュートリアル）
- **段階的ヒントシステム**: 1問につき最大3回ヒントを使用可能。1回目＝1セルの候補色を絞る、2回目＝確定セルを1つ開示、3回目＝隣接ペアの正解色を1組表示。ヒント使用数がスコアに影響。
- **スコア＆ランキング**: 正解までの手数・時間・ヒント使用数から算出。デイリー上位20位をDBに保存して公開表示。エンドレスの最高レベルはLocalStorageで保存。
- **カラーブラインドモード**: 色のみに依存しないよう、各色に記号（◎△□★など）を併記するアクセシビリティ切替スイッチを搭載。

---

## 3. 画面構成

### タイトル画面
- ゲームロゴ（絵の具が混ざるアニメ）
- 3モードボタン（エンドレス／デイリー／レッスン）
- ランキングボタン（デイリー上位20件表示モーダル）
- カラーブラインドモード切替トグル

### ゲーム画面（共通）
- 上部：現在レベル／残り時間（デイリー）／手数カウンター／ヒント残回数
- 中央：グリッドエリア
- 外周セル（固定）：混合後の「ターゲット色」がすでに塗られた状態で表示
- 内部セル（入力対象）：タップするとカラーパレットポップアップが出現し色を選択
- 隣接する2セルの色を混合した結果が外周ターゲット色と一致するかをリアルタイムでチェックマーク表示
- 下部：ヒントボタン／リセットボタン／答え合わせボタン
- 正解時：アニメーション演出（セルが弾けて花火）＋スコア表示＋次のレベルへボタン

### レッスン画面
- スライド式チュートリアル（10ステップ）
- 色の混合早見表（赤＋黄＝橙、など12組）を常時サイドに表示
- 各ステップに実際に解く練習問題が1問付属

### ランキングモーダル
- デイリーチャレンジのスコア上位20件（名前はニックネーム入力）
- 日付セレクタで過去7日分を切替可能

---

## 4. データ構造

### DBテーブル（MySQL）

**daily_scores**
```
id INT AUTO_INCREMENT PK
play_date DATE -- デイリー問題の日付
nickname VARCHAR(20)
score INT
moves INT -- 手数
time_sec INT -- 解答時間（秒）
hints_used TINYINT
created_at DATETIME
```

**daily_puzzles**（管理用。毎日cronまたはシードで自動生成可）
```
id INT AUTO_INCREMENT PK
puzzle_date DATE UNIQUE
seed VARCHAR(64) -- ランダムシード文字列
grid_size TINYINT -- 3〜5
created_at DATETIME
```

※エンドレスのスコアと進捗はLocalStorage（キー: color_logic_endless）に保存しDBは使わない。

### パズル生成ロジック（PHP側）
- シードをもとにPHPのmt_srand()で再現可能な乱数生成
- 内部セルの「解の色」をランダムに決定し、隣接ペアの混合色を外周ターゲットとして逆算配置
- 混合ルールは12色×色相環ベースの定義テーブルとして配列で保持（外部API不要）

---

## 5. デザインの方向性
- **全体トーン**: 白背景に鮮やかな水彩絵の具風の色彩。ふんわりした丸角カード＋淡いドロップシャドウ。
- **フォント**: 日本語はNoto Sans JP、数字はRoboto Mono（Google Fonts）。
- **グリッドセル**: 色が未入力のセルは半透明の白＋破線枠、入力済みは塗りつぶし＋チェック可否アイコン。
- **アニメーション**: CSS transitionで色が「じわっと」混ざるエフェクト。正解時はCanvas confettiで紙吹雪。
- **スマホ対応**: グリッドはvwベースで自動リサイズ。カラーパレットポップアップは画面下部から出現するボトムシート形式。
- **難易度が上がるにつれ** グリッドが拡大し背景が夜空・宇宙色に変化するなど雰囲気の変化で達成感を演出。