ネオン暗算バトル - 計算式を瞬時に組み立てて敵を倒すアクション算数ゲーム

## 1. アプリの目的・ターゲットユーザー
画面に浮かぶ数字パネルをタップして四則演算式を即興で組み立て、敵キャラのHPをぴったり削り切ることを目指すアクションパズルゲーム。算数や計算が得意な人が脳と反射神経を同時に鍛えられる爽快感を重視する。小学校高学年〜大人（計算力を楽しく磨きたい層）をターゲットとし、算数苦手な子どもが「ゲームとして」計算に触れる入口にもなる。

---

## 2. 主要機能
- **ステージバトルモード**：全30ステージ。各ステージに敵が1〜3体出現し、それぞれのHPに合致する計算式を画面上の数字パネル（5〜7個）から選んで組み立てる。式が正解かつHP残量と一致したら攻撃成功、失敗するとプレイヤーがダメージを受ける。
- **エンドレスサバイバルモード**：時間制限60秒の中で次々と湧く敵を倒し続け、スコアを競う。数字パネルは毎回ランダム生成。
- **デイリーチャレンジ**：当日のシード値で生成された固定の問題セット（10問）に挑戦し、スコアをDBランキングに登録。全ユーザー共通の問題で世界記録を競う。
- **演算子セレクト**：パネルの数字を選んだあと＋−×÷ボタンで演算子を挟み式を完成させる直感的UI。最大3段階の計算式（例: (3+4)×5）まで対応。
- **グローバルランキング**：エンドレスとデイリーチャレンジの上位10件をDBに保存・表示。ニックネーム入力のみで登録可能。

---

## 3. 画面構成

### タイトル画面
- ネオン電光掲示板風ロゴ「NEON CALC BATTLE」
- ボタン：ステージモード／エンドレス／デイリーチャレンジ／ランキング
- 操作チュートリアルをポップアップで表示

### バトル画面（メイン）
- **上部**：敵キャラ表示エリア（ドット絵風SVGキャラ、HP数値をデジタル表示）
- **中央**：式ビルダーエリア（選択済み数字と演算子が横並びに表示され、リアルタイムで計算結果プレビュー）
- **下部**：数字パネルグリッド（5〜7個のランダム数字パネル。ネオンカラーのボタン）、演算子ボタン行（＋−×÷と括弧）、クリアボタン、攻撃ボタン
- **左上**：プレイヤーHP、ステージ番号
- **右上**：残り時間（エンドレスモード時のみ）、現在スコア

### 攻撃エフェクト画面
- 正解時：ネオンビーム演出＋「CRITICAL!」「PERFECT!」テキスト、敵がダメージアニメ
- 失敗時：画面赤フラッシュ＋プレイヤーHPバー減少アニメ

### リザルト画面
- スコア・クリアタイム・コンボ数を表示
- ニックネーム入力フォーム→ランキング登録ボタン
- 次のステージへ／タイトルへ戻るボタン

### ランキング画面
- タブ切り替え：エンドレス／デイリー
- 上位10件をネオン表形式で表示（順位・ニックネーム・スコア・日時）

---

## 4. データ構造

### DBテーブル（MySQL）

**rankings**
| カラム | 型 | 説明 |
|---|---|---|
| id | INT AUTO_INCREMENT PK | |
| mode | ENUM('endless','daily') | モード区分 |
| nickname | VARCHAR(20) | プレイヤー名 |
| score | INT | スコア |
| daily_date | DATE NULL | デイリーの場合の日付 |
| created_at | DATETIME | 登録日時 |

**stages**（PHP静的配列でも可。DBで管理する場合）
| カラム | 型 | 説明 |
|---|---|---|
| id | INT PK | ステージ番号 |
| enemy_count | INT | 敵の数（1〜3） |
| enemy_hp_json | JSON | 各敵のHP配列（例: [12,7,20]） |
| panel_count | INT | 数字パネル数（5〜7） |
| time_limit | INT NULL | 制限秒数（NULLなら無制限） |

※ステージデータはPHPの配列定数として実装しDBなしでも動作可能にする。ランキングのみMySQLを使用。

---

## 5. デザインの方向性
- **テーマ**：ネオンサイバーパンク。黒背景に蛍光ピンク・シアン・黄緑のネオングロー配色。
- **フォント**：数字部分はデジタル7セグメント風（CSS font-face or Google Fonts「Share Tech Mono」）、UIテキストはゴシック系。
- **敵キャラ**：30種のドット絵風SVGキャラ（スライム・ロボット・宇宙人など各10種）。HP残量で表情が変化（ダメージ→点滅）。
- **パネルUI**：ガラス質のネオンボタン（box-shadow + text-shadow でグロー効果）。スマホは親指で押しやすい最小48px。
- **エフェクト**：正解時はCSS keyframesでビームラインアニメ、失敗時はshakeアニメ。SFX はWeb Audio APIで生成（ビープ音・爆発音など外部ファイル不要）。
- **レスポンシブ**：スマホ縦向き優先レイアウト（max-width 480px）とPC横向き（max-width 900px）の2ブレイクポイント。
- **実装スタック**：index.php（ルーティング）、game.js（ゲームロジック）、style.css、api.php（ランキングCRUD）、config.php（DB接続）のシンプル5ファイル構成。