シャドウトレース - 影を見て図形を当てる空間認識パズルゲーム

## 1. アプリの目的・ターゲットユーザー
3Dオブジェクトが壁に投影する「影（シルエット）」を見て、元の立体図形が何かを当てるブラウザ完結型の空間認識パズルゲーム。
同じ影でも回転角度や光源方向によって見え方が変わる「騙し絵的おもしろさ」を活用し、小学生から大人まで幅広く楽しめる知育エンターテインメント。特に「空間把握が苦手な人を楽しみながら鍛えたい」というユーザーを主なターゲットとする。

## 2. 主要機能
- **シルエット当てクイズ**: SVGで描いた影（正面・側面・上面いずれか1〜3方向）を表示し、4択または6択の図形名から元の立体を選ぶ。内製の図形データ（立方体・球・円柱・三角柱・ピラミッド・L字ブロック・T字ブロック・ドーナツ型・星型柱など20種）を使用。
- **3モード**: ①エンドレス（正解するたびに難易度上昇）、②60秒タイムアタック（制限時間内に何問解けるか）、③デイリーチャレンジ（日付シードで全ユーザー共通の10問）
- **難易度段階**: EASY（正面1方向の影+ヒント文）、NORMAL（2方向の影）、HARD（3方向の影+光源を回転させてシルエットが変形するアニメ付き）
- **スコアランキング**: MySQLにニックネーム・スコア・モード・日付を保存し、モード別トップ20を表示。デイリーは当日分のみ表示。
- **正解アニメーション**: 回答後にCSSアニメーションで「影→立体の3D風ワイヤーフレーム」が出現して正解図形を視覚的に見せる。

## 3. 画面構成

### タイトル画面
- ゲームロゴ（影の中から浮き上がる立体文字風デザイン）
- モード選択ボタン（エンドレス・タイムアタック・デイリー）
- ランキングボタン

### ゲーム画面
- 上部: スコア表示・残り時間（タイムアタック時）・問題番号
- 中央メインエリア: 黒い壁に投影されたSVGシルエット（1〜3枚を横並び表示）
- HARDモード時: シルエットが±30度でゆっくり揺れるCSSアニメーション
- 下部: 4択または6択の図形名ボタン（アイコン付き）
- 正解/不正解フィードバック: オーバーレイでパーティクル演出 or 赤シェイクアニメーション

### 結果画面
- 最終スコア・正解率・最大連続正解数
- 「もう一度」「タイトルへ」「ランキング登録」ボタン
- ニックネーム入力 → PHP経由でMySQLに送信

### ランキング画面
- モードタブ切り替え
- 順位・ニックネーム・スコア・日時のテーブル表示

## 4. データ構造

### テーブル: `scores`
| カラム | 型 | 説明 |
|---|---|---|
| id | INT AUTO_INCREMENT PK | |
| nickname | VARCHAR(20) | プレイヤー名 |
| mode | ENUM('endless','timeattack','daily') | ゲームモード |
| score | INT | スコア |
| correct_count | INT | 正解数 |
| created_at | DATETIME | 投稿日時 |
| daily_date | DATE | デイリー用日付（NULL可） |

### 図形データ（JSONファイルまたはPHPの連想配列で管理）
- `shapes.json`: 図形ID・名称・正面SVGパス・側面SVGパス・上面SVGパス・難易度タグを定義（20種）
- 外部ライブラリ不要で純粋なSVGパスを手書き定義

## 5. デザインの方向性
- **カラーパレット**: 深みのある黒・チャコールグレー（背景）＋ホワイト〜ライトシアン（影シルエット）＋ゴールドイエロー（正解演出・スコア）
- **雰囲気**: ミニマルかつ神秘的なシアタースタイル。「暗闇に浮かぶ影」を演出するグローエフェクト（CSS box-shadow/filter: drop-shadow）
- **フォント**: 英数字はモノスペース系（Courier相当）、日本語はシステムフォント
- **レスポンシブ**: シルエットSVGエリアはmax-width 480pxで中央寄せ、ボタンはスマホでも大きめ（min-height: 52px）
- **アニメーション**: CSSのkeyframesのみで完結。影が揺れる・立体ワイヤーフレームが回転出現・正解パーティクルをすべてCSS+SVGで実装し、外部JSライブラリ不要。