ミラーロジック - 反射パズルゲーム

## 1. アプリの目的・ターゲットユーザー
光線をミラー（鏡）やプリズムで反射・屈折させてゴールに届けるブラウザ完結型の論理パズルゲーム。小学生上位〜大人まで幅広く楽しめる、空間認識力と論理思考を組み合わせた中毒性のあるパズルゲームを提供する。外部ライブラリ不要で Canvas + 純粋な JS のみで実装する。

## 2. 主要機能
- **ステージモード**: 6×6〜10×10 グリッドの 60 ステージ（初級20・中級20・上級20）を用意。ミラー（45°反射）・両面ミラー・プリズム（光を3分岐）・着色フィルター（赤/青/黄）・ブロックなどをグリッド上に配置済みのステージに、プレイヤーが追加ミラーを置いてゴール（受光パネル）に光を導く
- **デイリーチャレンジ**: 日付をシードにした固定ステージを毎日1問配信。クリアスコアをランキングに登録できる
- **タイムアタック**: 1分以内に解ける簡易ステージを連続出題し、連続クリア数を競う
- **スコア・ランキング**: PHP + MySQL でデイリー／タイムアタックのスコアをサーバ保存。ニックネームと共に上位10件を表示
- **ステージエディタ**: プレイヤーが自分でステージを組み、URLパラメータ（Base64エンコード）で共有できる簡易エディタ

## 3. 画面構成
### タイトル画面
- ゲームロゴ（暗い背景にネオン光線のアニメーション）
- モード選択ボタン：ステージモード／デイリーチャレンジ／タイムアタック／エディタ／ランキング

### ステージ選択画面（ステージモード）
- 初級・中級・上級のタブ切り替え
- 各ステージをカードで表示（クリア済みはチェックマーク＋スター評価）

### ゲームプレイ画面（メイン）
- Canvas エリア（グリッド描画）：グリッドセルをクリックでミラー設置・回転・削除
- 右パネル：使用可能ピース一覧（ミラー残り枚数）、クリア条件（点灯必要ゴール数）
- 上部：経過時間、手数カウンター、リセット・ヒントボタン
- 光線はリアルタイムに Canvas に描画（設置のたびに全ビーム再計算）
- クリア時：モーダルでクリアタイム・手数・スター評価（3段階）・次のステージボタン

### デイリーチャレンジ画面
- ゲームプレイ画面と同レイアウト
- クリア後にニックネームを入力してスコア登録

### ランキング画面
- デイリー／タイムアタック タブ切り替え
- 上位10件テーブル（順位・ニックネーム・スコア・日時）

### エディタ画面
- グリッドサイズ選択（6×6 〜 10×10）
- ピース選択パレットから配置、光源・ゴール設置
- 「テストプレイ」ボタンでその場で動作確認
- 「URLをコピー」でステージデータをBase64エンコードしたクエリパラメータとして共有

## 4. データ構造
### テーブル: `mirror_scores`
| カラム | 型 | 説明 |
|---|---|---|
| id | INT AUTO_INCREMENT PK | |
| mode | ENUM('daily','timeattack') | ゲームモード |
| stage_key | VARCHAR(20) | デイリーは日付文字列(YYYY-MM-DD)、タイムアタックは'ta' |
| nickname | VARCHAR(30) | 表示名 |
| score | INT | スコア（タイムアタック: 連続数、デイリー: 時間換算点） |
| elapsed_sec | INT | クリアにかかった秒数 |
| moves | INT | 手数 |
| created_at | DATETIME | 登録日時 |

### ステージデータ（JSONファイル埋め込み or JS定数）
- `stages.js` に 60 ステージ分のオブジェクト配列を定義
- 各ステージ: `{ id, level, gridSize, fixedPieces:[{x,y,type,angle}], lightSources:[{x,y,dir,color}], goals:[{x,y,colorRequired}], playerPieceCount:{mirror:N, doubleMirror:M} }`

## 5. デザインの方向性
- **テーマ**: ダーク宇宙・光学実験室の融合。背景は濃い紺〜黒、グリッドは半透明の薄いグレーライン
- **カラー**: ネオンライム（光線）・シアン（ゴールパネル）・オレンジ（光源）・マゼンタ（プリズム分岐）の鮮やかな発光色
- **光線描画**: Canvas の `shadowBlur` + `globalCompositeOperation: 'lighter'` でグロー表現。光が当たっているゴールパネルは点滅アニメーション
- **ミラー**: 半透明シルバーの斜め線で表現、回転は右クリック or 長押し
- **フォント**: Orbitron（英数）+ Noto Sans JP（日本語）でSF風に統一
- **レスポンシブ**: Canvas サイズを `min(window.innerWidth×0.95, 480px)` でモバイル対応。ピース選択パネルはゲームエリア下部に移動