ピクロスペインター - お絵かきロジックパズルゲーム

## 1. アプリの目的・ターゲットユーザー
ノノグラム（ピクロス）形式の数字ヒントを読み解き、マス目を塗りつぶして隠れた絵を完成させるブラウザ完結型ロジックパズルゲーム。「数独は難しいが絵を完成させる達成感が欲しい」小学生〜中高年まで幅広いユーザーを対象とする。完成するとドット絵アニメーションが流れる演出で、解き終わりの喜びを最大化する。

## 2. 主要機能
- **パズルモード 3種**:
- 「デイリーパズル」: 毎日1問（5×5 / 10×10 / 15×15 の3サイズからローテーション）全プレイヤー共通の同一問題。クリアタイムをランキングに登録可能。
- 「ランダムプレイ」: カテゴリ（動物・食べ物・乗り物・スポーツ・記号）とサイズ（5×5 / 10×10 / 15×15）を選んでランダム出題。
- 「チャレンジモード」: 20×20の大型パズル固定問題を10問収録。全クリアでトロフィーバッジ獲得。
- **操作補助機能**: 右クリック（長押し）で「✕バツ印」を打てる。誤りチェックボタン（1ゲーム3回まで）で間違ったマスを赤フラッシュ。オートセーブで途中離脱可能。
- **ヒントシステム**: 1問につき3回まで使用可能。正解マスを1つハイライト表示するが、使用回数に応じてスコアにペナルティ。
- **完成演出**: 正解するとドット絵がカラーで点灯し、パネルがフリップするアニメーション＋ファンファーレ音（Web Audio API生成）が流れる。
- **スコア＆ランキング**: クリアタイム・ヒント使用回数・誤りチェック回数を総合した「完成度スコア」をサイズ別・カテゴリ別にDBへ保存。ランキング上位10件表示。

## 3. 画面構成
- **トップページ**: 3つのモードカード（デイリー・ランダム・チャレンジ）を縦並びに配置。デイリーパズルには残り時間カウントダウン表示。直近のランキングトップ3をサムネイル付きで表示。
- **パズル選択画面（ランダムモード時）**: カテゴリボタン5種＋サイズ選択トグルをグリッド表示。
- **ゲーム画面**:
- 上部: パズル名・カテゴリアイコン・経過タイム・ヒント残数・誤りチェック残数
- 中央: ノノグラムグリッド（列ヒント上部・行ヒント左部をcanvasまたはHTMLテーブルで描画）
- 下部: 「塗る/バツ切替」トグルボタン、「誤りチェック」ボタン、「ヒント」ボタン、「やり直し」ボタン
- モバイル用にグリッドをピンチズームできるようCSS touch-actionで対応
- **完成画面**: 完成したドット絵カラー版＋スコア内訳＋「ランキング登録（ニックネーム入力）」フォーム＋「次のパズルへ」「トップへ」ボタン
- **ランキング画面**: サイズ・カテゴリでタブ切替。1位〜10位の顔写真代わりにピクセルアートサムネイル（SVG）表示。

## 4. データ構造
```
[puzzles テーブル]
- id INT PK
- title VARCHAR(50) # パズル名（例: ネコ）
- category ENUM('animal','food','vehicle','sports','symbol')
- size TINYINT # 5 / 10 / 15 / 20
- row_hints TEXT # JSON: [[2,1],[3],…]
- col_hints TEXT # JSON: [[1,2],[4],…]
- solution TEXT # JSON: 二次元0/1配列
- is_daily TINYINT(1) # 1=デイリー候補
- is_challenge TINYINT(1) # 1=チャレンジモード
- created_at DATETIME

[rankings テーブル]
- id INT PK
- puzzle_id INT FK
- nickname VARCHAR(20)
- score INT # 高いほど良い（タイム・ペナルティ考慮）
- clear_time_sec INT
- hint_used TINYINT
- check_used TINYINT
- created_at DATETIME

[daily_schedule テーブル]
- date DATE PK
- puzzle_id INT FK
```
プリセットパズルはPHPのシードスクリプトでDBに50問（5×5×10問・10×10×20問・15×15×10問・20×20×10問）を初期投入する。

## 5. デザインの方向性
- **カラーパレット**: 背景はクリーム白（#FAF8F2）、塗りつぶしマスは深い藍色（#2C4A7C）、バツ印はグレー（#AAAAAA）、ヒント数字は炭色（#333333）。全体的に紙のノートっぽい温かみのある落ち着いたトーン。
- **フォント**: ヒント数字は等幅で視認性重視（monospace系）、UIテキストはNoto Sans JP。
- **グリッド線**: 5マスごとに太い区切り線を入れてブロックを視覚的に分かりやすくする。
- **モバイル最適化**: グリッドはスクロール可能なスクロールコンテナ内に配置し、ヒント数字はマスと同サイズで揃える。最小マスサイズ28px以上を確保。
- **アニメーション**: 完成時のマス点灯はrequestAnimationFrameで左上から右下へウェーブ状に色が流れる演出（CSS transition + JS順次クラス付与）。派手すぎず気持ちよいテンポ感を重視。