ピクセルスナイパー - ドット絵当てクイズゲーム

## 1. アプリの目的・ターゲットユーザー
モザイク状にぼかされたドット絵が徐々に鮮明になっていく「解像度上昇演出」の中で、できるだけ早くお題を当てるスピード推理ゲーム。素早い直感と語彙力が試される。小学生〜大人まで幅広く、ゲームの合間や休憩時間の5分遊びに最適。ランキングで友人と競える要素も持つ。

## 2. 主要機能
- **解像度アンベール方式**: 1×1ピクセル（完全モザイク）から始まり、2秒ごとに解像度が上がり最終的に元のドット絵が完全表示される。解答が早いほど高スコア。
- **5カテゴリ×各30問の内製問題バンク**: 動物・食べ物・乗り物・キャラクター（オリジナル）・建物/ランドマーク。PHPで管理し、ランダム出題。
- **3モード**: ①ソロ（1問ずつ制限時間内に答える標準モード）、②10問連続タイムアタック（合計タイムを競う）、③デイリーチャレンジ（全ユーザー共通の5問・日替わりシード）。
- **スコアランキング**: モード別・カテゴリ別のMySQLランキング。ニックネーム入力で登録。
- **ヒントシステム**: 1問につき最大3回ヒントボタンを押せる（押すたびにスコア係数が下がる）。ヒントは「文字数」「最初の1文字」「カテゴリヒント」。
- **連続正解ストリーク＆コンボボーナス**: 連続正解数に応じてスコア倍率がアップし、画面にコンボ演出が出る。

## 3. 画面構成
### タイトル画面
- ゲームロゴ（ピクセルアート風レタリング）
- モード選択ボタン（ソロ / タイムアタック / デイリー）
- カテゴリ選択ドロップダウン（ソロ時のみ）
- ランキングボタン
- ルール説明モーダル

### ゲームプレイ画面
- 中央に大きなドット絵表示エリア（Canvas 300×300px）。CSSの `image-rendering: pixelated` を使い、PHPから取得した小さいPNG画像を拡大表示しながら、JavaScriptで段階的に解像度を上げる（画像サイズを 8px→16px→32px→64px→128px→256px→元サイズ と段階補完）
- 上部: カテゴリ表示 / 現在スコア / コンボ表示
- 右側: タイマーバー（アニメーション付き）
- 下部: テキスト入力ボックス（スマホ対応・かな/カナ/漢字いずれも正解判定） + 送信ボタン
- ヒントボタン（残り回数をアイコンで表示）
- 正解/不正解判定モーダル（ピクセルアートの正解名と全体画像をフラッシュ表示）

### 結果画面
- 今回のスコア・正解数・平均解答秒数
- 問題ごとの正解/不正解一覧と解答タイム
- SNSシェア用テキスト（スコアとデイリー問題番号）
- ランキング登録フォーム（ニックネーム入力）
- もう一度 / タイトルへ ボタン

### ランキング画面
- タブ切替: ソロ / タイムアタック / デイリー
- カテゴリフィルター
- 上位20件の表（順位・ニックネーム・スコア・日時）

## 4. データ構造
```sql
-- 問題マスタ（PHPファイル内配列でも可だが、管理しやすいようDBに持つ）
CREATE TABLE quiz_items (
id INT AUTO_INCREMENT PRIMARY KEY,
category VARCHAR(30) NOT NULL, -- animal/food/vehicle/character/landmark
answer VARCHAR(50) NOT NULL, -- 正解文字列（日本語）
answer_aliases TEXT, -- 別解（JSON配列 e.g. ["ねこ","猫","ネコ"]）
image_path VARCHAR(200) NOT NULL, -- /img/quiz/xxx.png (32x32 or 64x64のドット絵PNG)
difficulty TINYINT DEFAULT 1, -- 1:易 2:中 3:難
char_count TINYINT, -- ヒント用文字数
hint_text VARCHAR(100) -- カテゴリ内ヒント文
);

-- ランキング
CREATE TABLE rankings (
id INT AUTO_INCREMENT PRIMARY KEY,
mode VARCHAR(20) NOT NULL, -- solo/timeattack/daily
category VARCHAR(30), -- soloのみ。NULLはall
nickname VARCHAR(30) NOT NULL,
score INT NOT NULL,
correct_count TINYINT,
avg_seconds DECIMAL(5,2),
daily_date DATE, -- dailyモード用
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);
```

## 5. デザインの方向性
- **レトロアーケード＋ネオンポップ** のミックステーマ。背景は深いネイビー (#0d0d2b)、UIフレームはドット絵ボーダー（CSS border-image）。
- フォントはGoogle Fonts「Press Start 2P」（英数）＋「DotGothic16」（日本語）を組み合わせ。
- 正解時は黄色＋緑のピクセルパーティクルアニメ（CSS keyframes）、不正解時は赤フラッシュ。
- タイマーバーはグラデーション（緑→黄→赤）でカウントダウンを視覚的に演出。
- スマホ：テキスト入力ボックスはフォントサイズ16px以上でズーム防止。Canvas表示は`max-width:90vw`で自動縮小。
- ドット絵素材は32×32px程度の小サイズPNGを150枚程度用意（自作またはCC0素材）。ファイルは`/img/quiz/`以下に格納し、DBのimage_pathで管理。