ワールドクイズトリップ - 世界地図で学ぶ地理クイズゲーム

## 1. アプリの目的・ターゲットユーザー
世界地図をインタラクティブに操作しながら、国名・首都・国旗・地理的特徴などをクイズ形式で楽しく学べるゲームアプリ。小学生〜大人まで幅広く対応し、旅行好き・地理マニア・受験生・世界を学びたい人を主なターゲットとする。外部APIを一切使わず内製の地理データベースで完結させる。

## 2. 主要機能
- **地図クリッククイズ**: SVGベースのインタラクティブ世界地図を表示し「この国はどこ？」と問われた国を地図上でクリックして答えるモード。正解した国は色が塗られ制覇率を視覚化
- **4択クイズモード**: 首都・人口・国旗・通貨・言語・面積・大陸などのカテゴリから出題する4択クイズ。レベル(初級/中級/上級)で問題難易度を調整
- **国旗あてゲーム**: 国旗の画像(CSS+HTMLで再現したシンプルな旗デザイン)を見て国名を4択から選ぶスピードモード。制限時間20秒/問でスコアを競う
- **地域別チャレンジ**: アジア・ヨーロッパ・アフリカ・南北アメリカ・オセアニアの5大陸に絞って出題できる地域フォーカスモード
- **スコア&ランキング**: 各モードのハイスコアをMySQLに保存しグローバルランキングを表示。ニックネームのみで参加可能(ログイン不要)
- **学習カード**: クイズ後に正答した/間違えた国の情報(首都・人口・面積・公用語・国旗・隣接国)をカード形式で確認できる復習機能

## 3. 画面構成
- **トップ/モード選択画面**: 地球儀風の丸いロゴとモード選択ボタン(地図クリック / 4択クイズ / 国旗あて / 地域別)。難易度セレクタ・ランキングへのリンク
- **地図クリッククイズ画面**: 上部に「〇〇はどこ？」の問題文とヒントボタン。メインにSVG世界地図(ホバーで国名ツールチップ表示)。右サイドに正解数・残り問題数・制覇率プログレスバー
- **4択クイズ画面**: 問題文(国旗画像または国の輪郭シルエット)と4択ボタン。正誤フィードバックアニメーション。下部にスコアと残り時間
- **国旗あてゲーム画面**: 中央に大きく国旗を表示、4択ボタン、カウントダウンタイマーゲージ
- **結果画面**: スコア・正解率・苦手だった国リスト・ランキング登録フォーム(ニックネーム入力)
- **ランキング画面**: モード別タブ切り替えでTop20を表示
- **国カード詳細モーダル**: クイズ後に表示される国情報カード

## 4. データ構造
```
-- 国データ(内製、約195カ国)
countries テーブル
id INT PK
code CHAR(2) -- ISO 3166-1 alpha-2
name_ja VARCHAR(60) -- 日本語国名
name_en VARCHAR(60)
capital_ja VARCHAR(60)
capital_en VARCHAR(60)
continent ENUM('asia','europe','africa','north_america','south_america','oceania')
population BIGINT
area_km2 INT
currency VARCHAR(60)
language VARCHAR(120)
difficulty TINYINT -- 1=初級 2=中級 3=上級
svg_path TEXT -- 世界地図SVG内のpathデータ(id属性で紐付け)

-- スコア
scores テーブル
id INT PK AUTO_INCREMENT
nickname VARCHAR(30)
mode ENUM('map_click','quiz','flag','region')
region VARCHAR(20) NULL
score INT
correct INT
total INT
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
```

## 5. デザインの方向性
- **テーマ**: 地図帳・旅行・冒険をイメージしたビンテージカートグラフィー風。ベージュ〜クリーム色の背景に深みのある紺・緑・金色をアクセントとして使用
- **フォント**: 見出しはセリフ系(Georgia)、本文はNoto Sans JP
- **地図**: SVG世界地図(パブリックドメイン素材をベース)をインライン埋め込み。各国pathにid付与しJSで制御。ホバー時にゴールド、正解時にグリーン、不正解時にレッドに色変化
- **アニメーション**: 正解時に紙吹雪エフェクト(CSSキーフレーム)、不正解時に画面揺れシェイク
- **スマホ対応**: 地図はピンチズームなしでも使えるよう大陸ごとに拡大表示切り替えボタンを設置。4択・国旗モードはスマホ最適化レイアウト
- **全体サイズ感**: 1ファイルで完結するindex.phpと country_data.php(内製DB)の2ファイル構成を基本とし、CSS/JSはインライン記述でシンプルに実装