========================================================================
HUD・UI仕様 (HUD & UI Specification)
========================================================================


1. ゲーム画面レイアウト (Game Screen Layout)
------------------------------------------------------------------------

1-1. レイヤー構成
    ゲーム画面は以下の3レイヤーで構成される（下から順）．

    1. PixiJS描画レイヤー: マップ・プレイヤー・ボム・ハリケーンの描画
    2. HUDレイヤー: タイマー・HP・塗り率・ミニマップの表示
    3. 入力レイヤー: ジョイスティック・ボムボタンのタッチ入力

1-2. 配置
    ・左上: タイマー
    ・左側: HPゲージ
    ・右上: ミニマップ + チーム塗り率パネル
    ・左側（入力）: ジョイスティック
    ・右側（入力）: ボムボタン
    ・中央: カウントダウン・通知テキスト


2. タイマー (Timer)
------------------------------------------------------------------------

2-1. 表示仕様
    ・位置: 画面左上
    ・形式: MM:SS（分:秒）
    ・通常時: 白色で表示する

2-2. 残り時間による表示変化
    ・残り30秒以下: 文字色が濃い赤（#8B0000）に変わる
    ・残り10秒以下: 1秒間隔で点滅する（opacity 1 ↔ 0.35）


3. HPゲージ (HP Gauge)
------------------------------------------------------------------------

3-1. 表示仕様
    ・位置: 画面左側
    ・形式: 「HP: 」に続いてハートアイコンで被弾状況を表示する
    ・ハート表示: リスポーンまでの残り被弾可能回数をハートで示す
        - 被弾していないハート: 塗りつぶしハート
        - 被弾済みハート: 空ハート
    ・最大表示数: 5個（PLAYER_RESPAWN_HIT_COUNT に対応）


4. チーム塗り率パネル (Team Paint Rate Panel)
------------------------------------------------------------------------

4-1. 表示仕様
    ・位置: 画面右上（ミニマップの右隣）
    ・表示内容: 4チーム分の塗り面積率（%）をチームカラーの四角アイコン付きで表示する
    ・形式: 「■ XX%」（■はチームカラー，XXは小数点以下切り捨ての整数）

4-2. 残り時間による表示変化
    ・残り30秒以下: 全チームの塗り率が「???%」に置き換わり，非表示になる


5. ミニマップ (Mini Map)
------------------------------------------------------------------------

5-1. 表示仕様
    ・位置: 画面右上
    ・表示方式: Canvas要素によるリアルタイム描画
    ・表示内容:
        - フィールド全体の塗り状況（チームカラーで色分け）
        - 自プレイヤーの現在位置（マーカー表示）
    ・トグル: タップで開閉を切り替えられる


6. ジョイスティック (Joystick)
------------------------------------------------------------------------

6-1. 表示仕様
    ・位置: 画面左側の入力領域
    ・表示: タッチ開始時にジョイスティックのベースとノブが表示される
    ・ベース: 半透明の円形背景
    ・ノブ: 指の位置に追従する小さな円

6-2. 操作仕様
    ・タッチ開始: 指を置いた位置にジョイスティックが出現する
    ・ドラッグ: 指の移動方向と距離に応じて移動入力ベクトルが決定される
    ・ベクトル正規化: 入力ベクトルの長さが1.0を超える場合は1.0に正規化する
    ・タッチ終了: ジョイスティックが非表示になり，移動入力がゼロになる


7. ボムボタン (Bomb Button)
------------------------------------------------------------------------

7-1. 表示仕様
    ・位置: 画面右側の入力領域
    ・表示: ボムアイコン付きの円形ボタン
    ・クールダウンリング: ボタン外周にクールダウンの残り時間をリング状に表示する
        - クールダウン中: リングが徐々に減っていく
        - クールダウン完了: リングが消え，ボタンが活性化する

7-2. 操作仕様
    ・タップ: ボムを現在地に設置する
    ・クールダウン中: ボタンは非活性状態でタップしても反応しない
    ・クールダウン時間:
        - 通常時: 4000ms
        - フィーバータイム時: 2000ms


8. 開始カウントダウン (Start Countdown)
------------------------------------------------------------------------

8-1. 表示仕様
    ・位置: 画面中央
    ・表示: ゲーム開始前のカウントダウン数字（3，2，1）を大きく表示する
    ・ゲーム開始後: 自動的に非表示になる


9. 通知テキスト (Notification Text)
------------------------------------------------------------------------

9-1. フィーバータイム通知
    ・表示条件: ゲーム残り時間がちょうど60秒の時点で表示する
    ・表示内容: 「！Fever Tieme！」
    ・位置: 画面中央
    ・演出: パルスアニメーション（拡大縮小）で表示する

9-2. ハリケーン警告
    ・表示条件: ハリケーン出現時（残り120秒の時点）に表示する
    ・表示内容: 「WARNING：ハリケーン出現」
    ・位置: 画面中央
    ・演出: 点滅アニメーションで表示する


10. PixiJS描画要素 (PixiJS Rendered Elements)
------------------------------------------------------------------------

10-1. マップ
    ・各セルをチームカラーで塗りつぶした矩形で描画する
    ・未塗装セルは既定の背景色で表示する
    ・ビューポートカリング: 画面外のセルは描画をスキップする

10-2. プレイヤー
    ・スプライト画像で描画する
    ・名前テキストをスプライト上部に表示する
    ・被弾時: 点滅エフェクトを表示する
    ・リスポーン時: 爆発エフェクトを表示する

10-3. ボム
    ・スプライト画像で描画する
    ・爆発時: 円形の爆発エフェクトをチームカラーで表示する

10-4. ハリケーン
    ・SVGベースのオーバーレイで描画する
    ・回転アニメーション付きで表示する