カテゴリー: VR

Apple Vision Pro２発売予想

「Apple Vision Pro 2」みたいな “本当の第2世代フラッグシップ” は、
早くても 2027〜2028 年ごろ と見ておくのが現実的。
それより前に出るのは、

  • すでに発表済みの M5版 Vision Pro（マイナーチェンジ）（2025年10月発売）Lifewire
  • さらにその後の 廉価版「Vision Air」(仮)（2027年量産開始見込み）UploadVR+1

という「派生モデル」で、本気の Vision Pro 2 とは少し別ラインと考えた方がいい。

1. 今の公式＆有力リークの流れ

① Vision Pro (初代) → M5チップ版

  • 2024年：初代 Vision Pro 発売（$3,499）
  • 2025年10月：M5チップ搭載のアップグレード版 Vision Pro 発表＆発売
    • M5で性能＆AI処理大幅アップ
    • バッテリー持ち向上、120Hzリフレッシュレート
    • 新しい「Dual Knit Band」で装着感改善Lifewire
      👉 これは 「Vision Pro 1.5」的なマイナーチェンジ。

② 廉価版ライン「Vision Air」（仮）

  • アナリスト Ming-Chi Kuo などのレポートで
    「Vision Air」は2027年後半に量産開始予定、Vision Proより40％以上軽く、価格も半額以下を目指す と報告。UploadVR+1
  • 価格も $1,500〜$1,800 くらいを狙うと言われている（あくまで噂）。

③ 本来の「Vision Pro 2」計画

  • 以前のリークでは、
    • もっと軽く
    • 高性能ディスプレイ
    • バッテリー改善
    • 価格も少し下げた Vision Pro 2 を「Vision Air の後」に出す構想があった。MacRumors+1
  • しかし 2024年時点で
    「Vision Pro 2 の開発一時停止」「まずは廉価版に集中」 という報道も出ている。MacRumors+1

つまり Apple の中でも

先に安いモデルで市場を広げるか？
それとも高級路線を維持するか？

という路線変更が何度も揺れている状態。

2. じゃあ「Vision Pro 2」はいつ出そう？

公開情報とリークを全部まとめて、ジョブズ風に乱暴に整理すると：

  1. 2025年：M5版 Vision Pro（マイナーアップデート） → これはもう発表済み。Lifewire
  2. 2026年：新しい XR/メガネ系ハードは出ない見込み（アナリストレポート複数が「2026年は空白」と予測）。Medium+1
  3. 2027年：廉価版 Vision Air が量産＆発売（予定）。UploadVR+1
  4. そのあと：Vision Pro 2（真の第2世代）が来る
    • MacRumors などは、Vision Air のあとにハイエンド Pro 2 を計画していたが、時期は2028年ごろに後ろ倒しになっていると報じている。MacRumors

なので、現実的な予想は：

Vision Pro 2 (第2世代フラッグシップ)
→ 2027年末〜2028年以降が本命

「2026年発売」という噂も一部あるけど、

  • 2026年は新ヘッドセット無し予想
  • Vision Air が 2027 年に控えている
    この2点を考えると、2026年 Vision Pro 2 はかなり望み薄。

3. どんな進化がありそう？

現時点の予想スペック（リーク＋業界予測）では：

  • チップ：M4 or M5 以降（AI処理強化、Apple Intelligence 連携前提）UC Today+1
  • ディスプレイ：より省電力で高輝度なOLED / micro-OLED（サプライチェーン側の情報多数）oled-info.com+1
  • 重量：Vision Air と同等か、それ以上の軽量化（長時間装着を前提に）Road to VR
  • 価格戦略：
    • Vision Air：普及価格帯
    • Vision Pro 2：ハイエンド路線維持（でも初代よりはやや下げる可能性）

4. ざっくり年表イメージ

  • 2024：Vision Pro (初代)
  • 2025：Vision Pro M5版（性能＆快適性アップのマイナーチェンジ）
  • 2026：新XR本体は出ない可能性が高い
  • 2027：廉価版 Vision Air
  • 2028〜：本命の Vision Pro 2（第2世代フラッグシップ）

5. ユーザー視点の「買いタイミング」

あなたの立場で考えると：

  • 今すぐ体験したい
    → 2025年の M5版 Vision Pro は「開発者・クリエイター用ハイエンド機」としてはかなり完成度高いはず。
  • できるだけコスパ重視＋フルダイブの入口体験したい
    → 2027年の Vision Air 待ちが無難。
  • 最高の完成度まで待つ派
    → 2028年以降の Vision Pro 2 をターゲットにして、今はQuestとかで遊びながら様子見。

もし「自分のVRサービス/ゲームをどの世代向けに作るか？」って視点で戦略を立てたいなら、

  • 2025〜2027：Vision Pro (初代＋M5) ＋ 他社ヘッドセット向けに土台を作る期間
  • 2027〜2030：Vision Air & Vision Pro 2 向けに本命のフルスケール版を投下する期間

ってロードマップで考えるのが現実的だと思う。

フルダイブVR 機器製造工程

了解！「フルダイブVR」を“脳と身体への入出力まで含む超没入XRデバイス”として想定し、現実に実行可能な（=現在の技術で実装しうる）非侵襲型ルートを軸に、製造～量産までの工程を丸ごと俯瞰できる形でまとめます。
（侵襲型＝医療級は規制が大幅に増えるため補足に分離）

前提整理（レベル定義）

  • Lv.1: 高機能XR＋全身ハプティクス … HMD/パススルー、アイトラッキング、触覚スーツ・手袋、トレッドミル等。
  • Lv.2: BCI入力併用 … EEG/近赤外NIRS等で意図推定（手指・視線に加え脳信号を補助入力）。
  • Lv.3: 神経刺激によるフィードバック … tES（tDCS/tACS）、経皮電気刺激、局所振動/EMSで“感覚の疑似再現”。
    以下は Lv.1～2（＋限定的Lv.3） を前提にした製造工程です。

製品アーキテクチャ（主要モジュール）

  1. HMD本体：光学（パンケーキ/マイクロOLED or μLED）、カメラ（インサイドアウトSLAM）、IMU、SoC/メモリ、無線（Wi-Fi/BT）、冷却。
  2. アイトラッキング：IR照明＋IRカメラ、キャリブソフト。
  3. ハンド/ボディトラッキング：手指カメラ/グローブ/外部ビーコン（必要に応じて）。
  4. ハプティクス：スーツ/グローブ/靴（リニアアクチュエータ、EMS、振動、空圧）。
  5. BCI（任意）：ドライ/湿式EEG電極、フロントエンドADC、ノイズ対策。
  6. 電源：セル（18650/21700/パウチ）＋BMS、急速充電、UN38.3/62133対応。
  7. エンクロージャ：樹脂/マグネ合金、ヘッドバンド、熱設計。
  8. ファーム・ソフト：OS/描画/トラッキング/BCI推定/安全制御。

製造～量産の全体フロー（EVT→DVT→PVT）

0. 企画・要求仕様

  • 体験要件（視野角FOV/PPD/リフレッシュ/遅延/追従精度/稼働時間/質量/騒音）
  • 安全要件（皮膚接触、EMS/tES出力上限、温度、EMC、SAR）
  • コスト/歩留まり/サプライ可用性KPI

1. 設計（DFX徹底）

  • システム：電気（SoC/PMIC/高速配線）、光学（レンズ/ディスプレイ）、RF、熱、機構。
  • DFM/DFT/DFS：量産・検査・組立・サービス容易性。
  • FMEA：故障モード洗い出し（光学塵、ケーブル断線、熱暴走、汗浸入等）。

2. サプライチェーン確立

  • ディスプレイ/レンズ/カメラ/IMU/アクチュエータ/電極/バッテリの一次・二次ベンダ確保
  • 重要治工具（治具、貼合、塵埃管理）、EMS/CM選定、LT（リードタイム）確定

3. EVT（試作検証）

  • 試作基板/光学サンプル/機構α
  • 主要KPI実測：PPD/MTF、遅延、発熱、SLAM精度、アイトラッキング精度、EEG SNR
  • 安全限界の確認（皮膚温、電気刺激上限、絶縁、漏れ電流）

4. DVT（設計妥当性）

  • 量産プロセス想定でのサンプル（β/γ）
  • 信頼性試験：落下、振動、ねじり、汗・皮脂・塵埃、温湿度サイクル、連続稼働、静電気
  • 規制前監査：EMC/無線/SAR/62368-1、皮膚接触材料の生体適合性（ISO 10993相当）

5. PVT（量産妥当性）

  • 量産ライン・治具・SOP完成、タクトタイム/直行率の目標達成
  • OBA（Outgoing quality audit）安定 → 量産GO

部品別・製造工程の要点

A. 光学・表示

  • μOLED/μLEDの貼合・レンズユニット組立（クリーン環境）
  • 焦点・瞳位置・収差調整、防塵/曇り対策コーティング
  • 検査：MTF、輝度ムラ、色度、ダストカウント

B. カメラ・トラッキング

  • センサー基板実装（SMT）、レンズ嵌合、IR照明ユニット
  • 幾何キャリブ（外部既知パターン）、温度ドリフト補正
  • 検査：暗電流、SNR、歪み、SLAMループ閉合誤差

C. IMU/基板（メイン/サブ）

  • 高速配線（MIPI/PCIe/LPDDR）、シールド/EMI設計
  • ファンクションテスト（DFT：ICT/Boundary-scan）
  • 焼きなまし/ストレステストで早期故障除去

D. ハプティクス（スーツ/グローブ）

  • アクチュエータ実装（LRA/ERM/空圧/EMS）、配線の屈曲寿命
  • 皮膚接触材料：通気・汗処理、洗濯耐性
  • 検査：振動周波数レンジ、応答時間、出力バラツキ

E. BCI（EEG/NIRS/EMS）

  • 電極（Ag/AgCl等）成形、インピーダンス管理、ヘッドキャップ寸法許容
  • アナログ前段のノイズ/アース/アーチファクト除去
  • 刺激系（tES/EMS）は二重冗長の電流制限＆フェイルセーフ

F. 電源・熱

  • BMSキャリブ、セルマッチング、保護素子（PTC/ヒューズ）
  • ヒートパス最適化（ヒートパイプ/ベイパーチャンバー、ファン騒音）

G. エンクロージャ/装着系

  • 射出成形/マグネ合金ダイキャスト、表面処理（ハードコート、指紋対策）
  • ヘッドバンド機構の繰返し耐久、重量バランス調整

組立ライン例（セル/フロー）

  1. 前加工：基板実装（SMT）→外観/電気検査
  2. 光学ユニット：貼合→防塵→光学キャリブ
  3. センサーユニット：カメラ/IMU組付→幾何キャリブ
  4. 筐体一次組立：フレキ配線、締結トルク管理
  5. 電源/BMS組付：絶縁/リーク/短絡検査
  6. 冷却系装着：ペースト塗布量検査、ファン動作
  7. ファーム書込/起動：シリアル刻印、マック/BTアドレス焼付
  8. 総合検査：表示、遅延、カメラ、SLAM、アイトラッキング、無線、オーディオ
  9. 安全試験：表面温度、漏れ電流、EMS上限制御試験
  10. 環境・信頼性抜取：温湿度、振動、落下
  11. 外観・クリーニング：パーティクル/擦傷検査
  12. 梱包：トレーサビリティ（QR）、ドキュメント同梱

タクトの目安（例）：60–120秒/台（HMD）、5–10分/セット（ハプティクス/BCI）
必須治具：位置決め、光学評価、レンズフォーカス、カメラ幾何、RF暗箱、エージングラック

キャリブレーション/テスト項目（抜粋）

  • 映像：MTF/色度/輝度ムラ、レンズ中心ズレ
  • 追跡：IMUバイアス、カメラ外内パラ、SLAM精度（ループ閉合誤差<既定値）
  • 視線：視線誤差角（例 ≤0.5°）、瞳孔検出率
  • 遅延：フォトダイオード＋ハイスピでフレーム到達遅延計測
  • 無線/EMC：出力、隣接チャネル漏洩、放射/伝導ノイズ
  • 熱：最大負荷時の皮膚接触面温度（規格内）
  • BCI：電極インピーダンス、SNR、アーチファクト耐性
  • ハプティクス：出力周波数・振幅、応答遅延、EMS電流上限

規格・認証（非医療機器想定）

  • 安全：IEC 62368-1（情報機器）、電気ショック/発熱
  • 無線：FCC/CE/TELEC（日本）、Bluetooth/Wi-Fi
  • EMC：EN 55032/55035 など
  • 電池：UN38.3、IEC 62133
  • 皮膚接触：ISO 10993-5/10（刺激/感作）相当評価
  • 化学：RoHS/REACH
  • SAR/ばく露：必要に応じ評価（頭部近接運用）

医療級/侵襲・神経刺激中心の場合：IEC 60601-1/-1-2/-2-10（神経刺激）、ISO 13485（QMS）、FDA/PMDAクラス審査が必要になり、開発・製造プロセスが医療機器向けに大幅に拡張されます。

品質管理と量産KPI

  • IQC（受入）：レンズダスト、ディスプレイ輝度、セル内部抵抗、電極インピーダンス
  • IPQC（工程内）：直行率、タクト、温度/トルク/塗布量SPC管理
  • OQC（出荷）：機能総合合格率、ランダム信頼性抜取
  • 主要KPI：一次直行率>95%、総合歩留まり>90%、RMA<1%、DOA<0.3%

コスト構造の目安（BOM比率の一例）

  • 光学/表示 35–45%／SoC/基板 20–30%／カメラ・センサー 10–15%／バッテリ 8–12%／機構 8–12%／ハプティクス/BCI 5–15%／梱包・付属 2–4%

リスクと対策

  • 光学ダスト/貼合歩留まり → クリーンルーム管理、イオンブロー、工程設計
  • 熱/重量バランス → 軽量材＋後頭部重心、熱拡散板
  • 皮膚刺激/汗 → 生体適合材・通気設計、洗濯可能な内装
  • EMS/刺激安全 → 二重電流制限、ウォッチドッグ、HWフェイルセーフ
  • BCIノイズ → 電極配置最適化、ケーブルシールド、アーチファクト学習

開発ドキュメント/SOP（最低限）

  • PRD/システムBlock、回路/配線図、光学設計書、熱解析、DFX一覧、FMEA
  • 各モジュールSOP（組立・キャリブ・検査）、EOLテスト仕様、治具設計
  • 材料表（BOM）＋AVL（承認ベンダー）＋トレーサビリティ計画
  • 規制試験計画/報告書、ユーザ安全マニュアル

侵襲型（将来の“真”フルダイブ）に触れる場合の補足

  • 要医療機器プロセス：ISO 13485、設計管理、臨床試験、長期安全性
  • 製造：クリーン度、無菌、パッケージング、滅菌バリデーション
  • 規制審査：PMDA/FDA、リスクベネフィット説明責任

まとめ

  • まずは Lv.1～2中心（XR＋ハプティクス＋BCI入力）で量産可能な設計を固め、EVT→DVT→PVTを通して光学・安全・歩留まりを潰すのが現実解。
  • BCI刺激などLv.3要素は限定的かつ安全重視でフェイルセーフを標準装備。
  • 規格対応と検査治具の作り込みが量産の要です。

必要なら、このフローを工程表（ガント）や検査仕様テンプレ、ライン配置図に落としてサンプルを作ります。

BCI出力の2030s

「脳に直接世界を書き込む」革命
→ 2030年代＝フルダイブVRの本番スタート

  1. BCI出力とは？（超簡潔）

方向説明2030sで何が変わる？BCI入力（脳 → PC）思考でカーソル動かす今ある（Neuralink 2025実証）BCI出力（PC → 脳）脳に「映像・触覚・味」を送る2030sで実用化 ← これが鍵

  1. 2030sのBCI出力：何ができる？

視覚：4Kフルカラー映像を脳に直接投影
触覚：全身の「風」「痛み」「抱擁」
聴覚：立体音 + 音楽を脳内再生
味覚・嗅覚：ステーキの味 + バラの香り

  1. 2030sロードマップ（根拠付き）

年次技術マイルストーン2025視覚：点滅光を脳に書き込み（人間）2028視覚：16×16ピクセル映像2030視覚：低解像度動画（320p）
触覚：指先の圧力2032視覚：HD映像（1080p）
触覚：全身基本ハプティクス2035五感フルシミュレーション（視覚4K + 全身触覚 + 味覚）2037フルダイブVR商用化

  1. 2030sのBCI出力：どうやって実現？

技術説明2030sでの進化電極アレイ脳に針を刺して信号送受信1億電極（今：1万）光遺伝学光でニューロンをON/OFF非侵襲レーザーで出力ナノボット血管内を泳いで脳に信号2035年実用化予測AIマッピング個人脳をAIで学習1秒でキャリブレーション

  1. 2030sの「フルダイブVR」体験例
    text【2037年、君の1日】
  2. 起床 → 思考「ログイン」
  3. 脳に「朝の光 + コーヒーの香り + 温かいマグカップ」
  4. 思考「剣を振る」→ 金属音 + 衝撃 + 鉄の匂い
  5. 思考「ログアウト」→ 現実に戻る
    → 現実と区別不能
  6. 2030sへの「個人準備」ロードマップ

時期アクション2025Vision Pro 2 + EEGで擬似フルダイブ2026Synchron BCI（血管内）で本物入力2028Neuralink出力ベータ参加2030BCI出力キット購入（$10,000）2035フルダイブ常時装着

結論：2030s = 脳が「第二の現実」になる

BCI出力の2030s
→ 脳に「世界」を書き込める時代
→ フルダイブVRの本番スタート

VisitionPro2の価格予想

  • VisitionPro（= Apple Vision Pro 現行モデル）の価格予想（日本）
    → 税込 599,800円（256GB）を維持と見ます。実際に日本発売時も599,800円で、米国のベース価格は$3,499据え置きのままです。PhoneArena+2Apple+2
  • VisitionPro 2（第2世代 or 後継）価格予想（日本）
    シナリオ別に幅を持たせます：
    1. マイナー刷新（現行の後継・性能向上版）
      → 税込 599,800円前後（±3万円）
      根拠：直近のアップデート版も米国$3,499据え置きで発表されており（日本は為替変動がなければ59.98万円帯が目安）。The Verge+1
    2. 廉価版（別ライン）
      → 税込 299,800〜349,800円のレンジを予想（精度低め）。
      根拠：2025年に約30万円台の低価格版が出るとの報道・噂が過去にあり（正式名称や発売確度は不明）。実現すればこの帯が目安。GIGAZINE+1

補足（前提と不確実性）

  • 日本の実売はApple公式の税込価格ベースで、米国$3,499を基準に各国価格が設定されています（現行は日本で599,800円）。Apple+1
  • 直近のアップデートも価格据え置きだったため、後継の通常ラインは大きく動かない公算が高いです。The Verge
  • 一方で廉価モデルは複数メディアが示唆してきたものの、公式確定情報ではありません（よって価格帯は推定）。

現実世界でテレポーテーション装置を作る方法

「現実世界でテレポーテーション装置を作る方法」ですね。これは多くのSF作品に出てくる夢の技術ですが、科学的に見て現状どうなっているかを整理しますね。

✨ 1. 「テレポーテーション」の定義

  • SF的な転送
    人や物体を一瞬で別の場所に移す（スタートレック的な転送装置）。
  • 科学的なテレポーテーション
    現実に存在するのは「量子テレポーテーション」と呼ばれる技術で、物体そのものではなく**量子状態（情報）**を転送する。

🔬 2. 実現しているもの（量子テレポーテーション）

  • 光子（光の粒）や電子の「量子状態」を離れた場所に転送する実験は、すでに成功している。
  • 仕組みは「量子もつれ」と「古典通信」を組み合わせて、ある粒子の状態を遠くに複製する。
  • 2017年には中国の研究チームが、地上と宇宙（約1,200km）で量子テレポーテーションを実験的に成功させている。

🏗 3. もし「現実のテレポート装置」を作るとしたら？

  1. 量子レベルで情報をスキャン
    人間を構成する原子は約 10^28 個（100,000,000,000,000,000,000,000,000,000 個！）。
    これら全ての位置・運動・量子状態を測定する必要がある。
  2. 情報を転送
    超高速の通信インフラ（現代のインターネットの何兆倍もの容量）が必要。
  3. 受信側で再構築
    原子を一つずつ並べ直す「原子レベルの3Dプリンター」が必要。
  4. 意識の連続性の問題
    元の肉体はどうなる？コピーなのか本人なのか？「哲学的ゾンビ問題」が出てくる。

⚠️ 4. 現実的な課題

  • 技術的：原子スキャン技術も、再構築技術も未完成。
  • 物理的：量子力学の「不確定性原理」により、全ての情報を同時に測ることは理論的に不可能。
  • 哲学的：転送先に「コピー」ができるなら、元の意識は残るのか？自分は自分のままか？

✅ まとめ

  • 現実的に作れるテレポート装置はまだ存在しません。
  • ただし「量子テレポーテーション（情報の瞬間転送）」は実際に成功しており、将来の量子通信・量子インターネットの基盤になろうとしています。
  • 人や物を転送するには、技術的・物理的・哲学的にまだ「不可能」に近い段階。

👉 質問ですが、あなたが知りたいのは：

  1. 現実の科学でできる範囲（量子テレポーテーションの仕組みや応用）
  2. SF的にどう作ればいいか（ゲームや物語用の設定）

どちらをメインに深掘りしましょうか？

あなた:

現実の科学でできる範囲

ChatGPT:

なるほど！「現実の科学でできる範囲」でのテレポーテーションについて、できること・できないことを整理しますね。

🧩 1. 実際に成功している「量子テレポーテーション」

  • 対象：光子（光の粒）、電子、原子などの「量子状態」
  • 仕組み：
    1. 送信側と受信側に「量子もつれ（エンタングルメント）」した粒子を用意
    2. 送信側で「転送したい粒子」と「自分の持つエンタングル粒子」を測定
    3. 測定結果を通常の通信（電話や光ファイバーなど）で受信側へ送る
    4. 受信側は、自分の粒子をその結果に基づいて操作すると、送信側と同じ量子状態が再現される
  • ポイント：
    • 物体そのものは動いていない
    • 情報だけが移動している
    • 「コピー」ではなく「転送」になるのは、測定によって送信元の状態が消滅するから

📡 2. 実験の実績

  • 1997年：オーストリアの研究者が初の量子テレポーテーション実験に成功
  • 2004年：米国NISTが原子レベルでの転送に成功
  • 2017年：中国の「墨子号」衛星を使い、地上と宇宙間で約1,200kmの量子テレポーテーションに成功
  • 2020年代：光ファイバーや衛星通信でのテレポーテーション精度向上の研究が進行中

🔬 3. 応用の可能性

  • 量子通信
    傍受が不可能な「量子暗号通信（QKD）」を強化できる
  • 量子インターネット
    量子コンピュータ同士を安全に接続し、離れた場所でも量子計算を共有可能
  • 未来的な転送
    分子レベルの構造やDNA情報を転送 → 医療や物質研究で応用できる可能性あり

🚫 4. 限界・できないこと

  • 人間や物体の転送は不可能
    原子は約10^28個、人間の脳のシナプスは100兆以上。
    それらを「測定 → 転送 → 再構築」するのは理論的にも技術的にも非現実的。
  • 不確定性原理
    量子状態を完全に測定することは不可能（同時に位置と運動量を知れない）。
  • 速度制限
    量子もつれは瞬時に関連するが、実際の情報伝達には「古典通信」が必要 → 光速を超えられない。

✅ まとめ

現実の科学で可能な「テレポーテーション」は：

  • 物体ではなく「量子状態（情報）」の転送
  • 実用化の方向は「量子通信・量子インターネット」
  • 人間や物体の転送は現時点では不可能

👉 実際にやってみたいのは：

  1. 量子テレポーテーションの仕組みをもっと理解（数式・物理的説明）
  2. 量子通信（量子インターネット）の実用化がどこまで来ているか
  3. 実験的にできる範囲（簡単な光子のテレポーテーション実験など）

どれを深掘りしましょうか？

あなた:

実験的にできる範囲（簡単な光子のテレポーテーション実験など）

ChatGPT:

いいですね 👍
「実験的にできる範囲」での 光子の量子テレポーテーション実験 を、シンプルにイメージできる形でまとめます。

🧪 光子テレポーテーションの最小実験構成

1. 必要なもの

  • 光子源
    レーザー光を使って「対生成」（非線形結晶で光を分裂させる）により「エンタングル光子対」を作る。
  • ビームスプリッター（BS）・偏光板（PBS）
    光子の経路や偏光状態を調整する。
  • 検出器（SPD: Single Photon Detector）
    単一光子をカウントするための高感度検出器。
  • 古典通信チャンネル
    光ファイバーや電気信号で測定結果を相手に伝える。

2. 実験の流れ（シンプルな例）

  1. エンタングル光子対の生成
    • 結晶にレーザーを当てると「光子 A」と「光子 B」が量子もつれた状態で飛び出す。
  2. 転送したい光子（光子 C）の準備
    • 任意の偏光状態をもつ光子 C を用意する（これを「送る対象」とする）。
  3. ベル測定（A と C を一緒に測る）
    • 光子 A（もつれペアの片方）と光子 C（送りたい状態）を一緒に干渉させ、特殊な測定を行う。
    • 測定によって光子 C の状態は壊れるが、その情報が「A と B の相関」として B に反映される。
  4. 古典通信
    • 測定結果を光ファイバーや電線で相手に送る。
  5. 受信側での再構成
    • 光子 B に対し、送られてきた情報に基づいた操作（偏光回転など）をすると、光子 C と同じ状態が B に復元される。

🎯 実験で確認できること

  • 光子 B の偏光状態が、確率的に光子 C の状態と一致していること。
  • この「一致率（忠実度）」を統計的に測定することで、テレポーテーション成功を確認できる。
  • 実験室レベルでは 数メートル〜数十km の光ファイバーで実証済み。

🔧 実験の難しさ

  • 単一光子を安定して扱うのは難易度が高い（レーザー＋非線形光学結晶＋超精密光学系が必要）。
  • 検出効率は100%ではなく、データは確率的になる。
  • 実験キットは大学や研究所レベルで数千万円規模。

🌱 身近に体験できる方法

  • 教育用量子光学キット
    • Thorlabs などの企業が「量子光学教育キット」を販売（偏光のもつれ光子を扱える）。
  • シミュレーション
    • IBM Quantum Experience や QuTiP (Pythonライブラリ) を使えば、量子テレポーテーションのアルゴリズムをシミュレート可能。
    • 実際の量子ビット上で「状態を転送する」動きを試せる。

✅ まとめ

  • 現実に「簡単にできる」範囲では、量子計算機シミュレーションでの光子テレポーテーションがおすすめ。
  • 研究室レベルなら 光学系を組んでエンタングル光子対を作り、偏光状態の転送を確認するのが典型的な実験。
  • 規模的には「個人で部屋に転送装置を置く」ことは不可能だが、「小規模な量子実験をシミュレーションする」ことは誰でも可能。

👉 興味ありますか？

  • 実際に Python + Qiskit（IBM Quantum）で量子テレポーテーションをシミュレーションするコード例 を紹介しましょうか？

VRナノマシンをPCに接続する

ChatGPT:

いいですね、かなりSF的でワクワクするテーマです！
ただ「VRナノマシンをPCに接続する」というのは、現実的にはまだ存在していない技術で、あくまで未来の研究領域・サイエンスフィクションの範囲です。そこで、現実的に近い技術や、もし実現するならどうなるかを整理してみます👇

🔬 現実に近い技術

  • BCI（Brain-Computer Interface / 脳-コンピュータ・インターフェース）
    • 例: Neuralink, Emotiv, OpenBCI
      脳波を読み取り、PCやVRに信号を送る仕組み。現状は「考えるだけでマウスを動かす」「VRの簡単な操作をする」段階。
  • 神経刺激装置
    電気刺激を使って筋肉や神経に信号を送る。リハビリや義手の制御に使われている。
  • ナノマシン的な医療研究
    体内に入れて血流や細胞をモニタリングするマイクロマシンは研究中。
    ただし「PCに直接つなぐ」というのはまだ不可能。

💡 SF的な「VRナノマシン接続」のイメージ

  • インターフェース方法
    体内に入ったナノマシンが神経や脳細胞と接続 → Bluetoothや量子通信的な仕組みでPCとリンク。
  • VRへの応用
    • 視覚・聴覚 → 脳の対応する領域に直接映像や音を入力。
    • 触覚・痛覚 → ナノマシンが神経信号を人工的に発生。
    • 運動制御 → 脳からの運動信号を読み取り、VRキャラクターに反映。
  • 完全フルダイブVR
    PCやクラウドに接続されたナノマシンが「五感＋身体の運動」を全て制御し、現実の体を休眠状態にしたままVR世界を体験。

⚠️ 現実的な課題

  • 安全性（体内に入れる以上、免疫反応や副作用のリスク）
  • 倫理（意識の制御・記憶の改ざんなどの悪用リスク）
  • 技術的限界（神経ネットワークをナノマシンが完全に把握するのは現時点では不可能）

✅ まとめ

現時点で「VRナノマシンをPCに接続する」ことは不可能ですが、
現実に近いのは「脳波計（BCI）＋VR」 です。
未来的には、ナノマシンが「フルダイブVR」を実現する鍵になる、と想定されています。

👉 ご質問ですが、あなたが考えているのは：

  1. 現実に近い仕組み（BCIをPCに繋いでVRに使う方法）を知りたい
  2. SF的にどうやってVRナノマシンを接続するか設定を作りたい（小説・ゲーム用）

どちらのイメージに近いですか？

あなた:

現実に近い仕組み（BCIをPCに繋いでVRに使う方法

ChatGPT:

なるほど！「現実に近い仕組み」として、BCI（Brain-Computer Interface）をPCに繋いでVRに活用する方法 を整理してみますね。これは「フルダイブVR」の入り口とも言える分野です。

🧠 1. BCIをPCに接続する仕組み

現実に使える代表的なBCIデバイスには次のようなものがあります：

  • Emotiv Epoc / Insight
    市販されているEEG（脳波）デバイス。USBドングルやBluetoothでPCに接続可能。
  • OpenBCI
    オープンソースのBCIプラットフォーム。脳波をPCに取り込み、PythonやUnityで処理できる。
  • NextMind（Metaに買収済）
    視覚に関連する脳活動を読み取り、PC入力に使えたデバイス（現在は販売停止）。

👉 接続は主に USB / Bluetooth → PC → SDK / API という流れです。

🎮 2. VRへの応用例

入力（脳→VR）

  • 意図の検出：
    たとえば「右手を動かそう」と考えると、それに対応する脳波パターンを検出し、VR内のキャラが手を動かす。
  • 選択操作：
    メニューの選択を「集中」「リラックス」などの脳波状態で行う。

出力（VR→脳）

  • これはまだ発展途上。
    • 触覚グローブ＋電気刺激 で「触った感覚」を返す
    • 脳に直接フィードバックを送る実験は研究段階

🔧 3. 開発の流れ（現実的な実装）

  1. BCIデバイスを準備
    例：OpenBCIの「Ultracortex Mark IV」＋「Ganglionボード」
  2. PCに接続
    • BluetoothまたはUSBドングル
    • OpenBCI GUIで脳波を可視化できる
  3. データを解析
    • Python（MNE, BrainFlowなど）で脳波データを処理
    • 「特定の脳波パターン → コマンド」にマッピング
  4. VRと連携
    • UnityやUnreal EngineにBCI SDKを組み込み
    • キャラクター操作やUI選択に反映

⚡ 4. 実際の限界と可能性

  • 現状できること
    • シンプルなコマンド入力（ジャンプ、選択、移動開始など）
    • 「集中」「リラックス」の状態を使ったUI制御
  • まだ難しいこと
    • 五感すべてを直接書き換える
    • 高精度で複雑な動きを完全に思考だけで操作する

✅ 現実的には「脳波でVR内の簡単な動作を操作できる」レベルですが、BCI＋VR は確実に発展していて、数年以内に「ハンドトラッキング＋脳波コマンド」くらいまでは実用化される見込みです。

👉 もしあなたがやりたいのは：

  1. 実際にBCI＋VRを試してみたい → 「どのデバイスを買えばいいか？」をまとめます
  2. 開発に組み込みたい → 「Unity/Unrealとの接続コード例」を提示します

どちらに興味がありますか？

あなた:

Unity/Unrialとの接続コード

ChatGPT:

思考時間: 18s

了解！BCI→PC→VR を“今すぐ動かせる”形で、Pythonブリッジ（EEG取得）→ UDP(JSON) 配信 → Unity / Unreal で受信という最小構成のサンプルを用意しました。
実機（OpenBCI/Emotiv）がなくてもダミー信号で動作確認できます。実機がある場合はコメントを外すだけでOK。

① Python：BCIブリッジ（EEG→UDP配信）

  • 役割：EEGを読み取り、{"t":timestamp, "focus":0.0-1.0, "channels":[…]} のJSONを UDP で 127.0.0.1:9001 へ送信
  • 実機がない場合はランダム波形で動作（USE_DUMMY=True）
  • 実機（例：BrainFlow/OpenBCI）に切替えるときはコメントを外して設定
# bci_bridge_udp.py
import json, socket, time, random, math
from collections import deque

USE_DUMMY = True        # 実機があれば False にして下の BrainFlow 部分を有効化
TARGET_HOST = "127.0.0.1"
TARGET_PORT = 9001
FS = 250                # サンプルレート想定
NCH = 8                 # チャンネル数

# --- 実機（BrainFlow/OpenBCI）の例 ---
# from brainflow.board_shim import BoardShim, BrainFlowInputParams, BoardIds
# BoardShim.enable_dev_board_logger()
# params = BrainFlowInputParams()
# params.serial_port = "/dev/ttyUSB0"  # Windowsなら "COM3" など
# board = BoardShim(BoardIds.CYTON_BOARD.value, params)
# board.prepare_session()
# board.start_stream()

sock = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
buf = deque(maxlen=FS)  # 1秒分の簡易バッファ（フォーカス計算用ダミー）

def compute_focus(sample):
    """
    簡易フォーカス指標（デモ用）:
    サンプルの絶対値の逆数を用いた擬似的な安定度スコア 0..1
    実機ではバンドパワーなどに置換推奨
    """
    buf.append(sum(abs(x) for x in sample) / max(1, len(sample)))
    avg = sum(buf) / max(1, len(buf))
    focus = max(0.0, min(1.0, 1.0 / (1.0 + avg)))  # 値が小さいほど集中度高い扱い
    return focus

try:
    print(f"Streaming UDP to {TARGET_HOST}:{TARGET_PORT} (Ctrl+C to stop)")
    phase = 0.0
    while True:
        if USE_DUMMY:
            # ダミー：α帯域っぽいゆっくり波 + ノイズ
            phase += 2 * math.pi * 10 / FS  # 10 Hz 風
            sample = [0.5*math.sin(phase + i*0.1) + 0.1*random.uniform(-1,1) for i in range(NCH)]
            time.sleep(1.0/FS)
        else:
            # 実機から最新サンプル取得（例）
            # data = board.get_current_board_data(1)  # shape: (n_channels, n_samples)
            # sample = [float(data[ch][0]) for ch in range(NCH)]
            # time.sleep(1.0/FS)
            sample = [0.0]*NCH  # 実機利用時に上を有効化

        payload = {
            "t": time.time(),
            "focus": compute_focus(sample),
            "channels": sample
        }
        sock.sendto(json.dumps(payload).encode("utf-8"), (TARGET_HOST, TARGET_PORT))
except KeyboardInterrupt:
    pass
finally:
    # if not USE_DUMMY:
    #     board.stop_stream()
    #     board.release_session()
    sock.close()

② Unity（C#）：UDP受信 → ゲーム操作

  • 役割：UDPで受け取った focus を使って一定以上でジャンプ、またはUIを点滅など
  • Assets/Scripts/BCIUdpReceiver.cs として保存
  • シーンに空のGameObject「BCIReceiver」を作成し、このスクリプトをアタッチ
  • Player には CharacterController か Rigidbody + AddForce 等でジャンプ実装を用意
// Assets/Scripts/BCIUdpReceiver.cs
using System;
using System.Net;
using System.Net.Sockets;
using System.Text;
using System.Threading;
using UnityEngine;

[Serializable]
public class BciPacket {
    public double t;
    public float focus;
    public float[] channels;
}

public class BCIUdpReceiver : MonoBehaviour
{
    [Header("UDP Settings")]
    public int listenPort = 9001;

    [Header("Gameplay")]
    [Range(0f, 1f)] public float focusThreshold = 0.8f;
    public float minInterval = 0.5f; // コマンド間隔(秒)
    public GameObject player;

    UdpClient _udp;
    Thread _thread;
    volatile bool _running;
    volatile float _latestFocus;
    float _lastActionTime;

    void Start()
    {
        _udp = new UdpClient(listenPort);
        _running = true;
        _thread = new Thread(ReceiveLoop);
        _thread.IsBackground = true;
        _thread.Start();
        Debug.Log($"BCI UDP listening on {listenPort}");
    }

    void ReceiveLoop()
    {
        IPEndPoint ep = new IPEndPoint(IPAddress.Any, 0);
        while (_running)
        {
            try
            {
                byte[] data = _udp.Receive(ref ep);
                string json = Encoding.UTF8.GetString(data);
                var pkt = JsonUtility.FromJson<BciPacket>(json);
                _latestFocus = pkt.focus;
            }
            catch (Exception) { /* ignore */ }
        }
    }

    void Update()
    {
        // デモ：フォーカスが閾値を超えたらジャンプ入力
        if (Time.time - _lastActionTime > minInterval && _latestFocus >= focusThreshold)
        {
            _lastActionTime = Time.time;
            TryJump();
        }
    }

    void TryJump()
    {
        if (!player) { Debug.Log("Player not assigned."); return; }

        // キャラクター制御の例：Rigidbody に上方向インパルス
        var rb = player.GetComponent<Rigidbody>();
        if (rb != null)
        {
            rb.AddForce(Vector3.up * 5f, ForceMode.VelocityChange);
            return;
        }

        // CharacterController の例：単純に上方向へ瞬間移動（実プロジェクトは自前のジャンプ処理へ接続）
        var cc = player.GetComponent<CharacterController>();
        if (cc != null)
        {
            cc.Move(Vector3.up * 0.5f);
        }
    }

    void OnApplicationQuit()
    {
        _running = false;
        try { _udp?.Close(); } catch { }
        try { _thread?.Join(100); } catch { }
    }
}

ヒント：UIにフォーカスメーターを出したい場合は Image.fillAmount = _latestFocus; を Update() に追加するだけでOK。

③ Unreal Engine 5（C++）：UDP受信 → ブループリントに通知

  • 役割：UDP(JSON)を受信し、Focus値をイベントでブループリントに流す
  • 手順
    1. C++プロジェクトで ActorComponent を追加（名前：BCIUdpReceiverComponent）
    2. 下記コードで置き換え
    3. レベル内のアクター（キャラ等）にアタッチ
    4. ブループリント側で OnFocusUpdated を Bind → Focus >= 0.8 でジャンプなど
// BCIUdpReceiverComponent.h
#pragma once

#include "CoreMinimal.h"
#include "Components/ActorComponent.h"
#include "BCIUdpReceiverComponent.generated.h"

DECLARE_DYNAMIC_MULTICAST_DELEGATE_OneParam(FFocusUpdated, float, Focus);

UCLASS(ClassGroup=(Custom), meta=(BlueprintSpawnableComponent))
class YOURPROJECT_API UBCIUdpReceiverComponent : public UActorComponent
{
    GENERATED_BODY()

public:
    UPROPERTY(EditAnywhere, BlueprintReadWrite, Category="BCI")
    int32 ListenPort = 9001;

    UPROPERTY(BlueprintAssignable, Category="BCI")
    FFocusUpdated OnFocusUpdated;

protected:
    virtual void BeginPlay() override;
    virtual void EndPlay(const EEndPlayReason::Type EndPlayReason) override;

private:
    FSocket* Socket = nullptr;
    FThreadSafeBool bRunning = false;
    FRunnableThread* Thread = nullptr;

    class FBCIWorker* Worker = nullptr;
    void HandleFocusOnGameThread(float Focus);
};

// BCIUdpReceiverComponent.cpp
#include "BCIUdpReceiverComponent.h"
#include "Sockets.h"
#include "SocketSubsystem.h"
#include "HAL/Runnable.h"
#include "HAL/RunnableThread.h"
#include "Common/UdpSocketBuilder.h"
#include "IPAddress.h"
#include "Misc/ScopeLock.h"
#include "Serialization/JsonReader.h"
#include "Serialization/JsonSerializer.h"

class FBCIWorker : public FRunnable
{
public:
    FBCIWorker(FSocket* InSocket, TFunction<void(float)> InOnFocus)
        : Socket(InSocket), OnFocus(MoveTemp(InOnFocus)) {}

    virtual uint32 Run() override
    {
        uint8 Buffer[2048];
        while (bRun)
        {
            if (!Socket) { FPlatformProcess::Sleep(0.005f); continue; }

            int32 BytesRead = 0;
            if (Socket->Recv(Buffer, sizeof(Buffer), BytesRead, ESocketReceiveFlags::None) && BytesRead > 0)
            {
                FString Json = FString(UTF8_TO_TCHAR(reinterpret_cast<const char*>(Buffer)));
                TSharedPtr<FJsonObject> Obj;
                auto Reader = TJsonReaderFactory<>::Create(Json);
                if (FJsonSerializer::Deserialize(Reader, Obj) && Obj.IsValid())
                {
                    double FocusVal = 0.0;
                    if (Obj->TryGetNumberField(TEXT("focus"), FocusVal))
                    {
                        OnFocus(static_cast<float>(FocusVal));
                    }
                }
            }
            else
            {
                FPlatformProcess::Sleep(0.002f);
            }
        }
        return 0;
    }

    void StopWork() { bRun = false; }

private:
    FSocket* Socket = nullptr;
    TFunction<void(float)> OnFocus;
    FThreadSafeBool bRun = true;
};

void UBCIUdpReceiverComponent::BeginPlay()
{
    Super::BeginPlay();

    // UDP ソケット作成
    FUdpSocketBuilder Builder(TEXT("BCI_UDP_Receiver"));
    Socket = FUdpSocketBuilder(TEXT("BCI_UDP_Receiver"))
        .AsNonBlocking()
        .AsReusable()
        .BoundToPort(ListenPort)
        .WithReceiveBufferSize(2 * 1024 * 1024);

    if (!Socket)
    {
        UE_LOG(LogTemp, Error, TEXT("Failed to create UDP socket on port %d"), ListenPort);
        return;
    }

    bRunning = true;

    Worker = new FBCIWorker(Socket, [this](float Focus){
        // ソケットスレッド → ゲームスレッドへディスパッチ
        AsyncTask(ENamedThreads::GameThread, [this, Focus](){ HandleFocusOnGameThread(Focus); });
    });

    Thread = FRunnableThread::Create(Worker, TEXT("BCI_UDP_Worker"));
    UE_LOG(LogTemp, Log, TEXT("BCI UDP listening on %d"), ListenPort);
}

void UBCIUdpReceiverComponent::HandleFocusOnGameThread(float Focus)
{
    OnFocusUpdated.Broadcast(Focus);
}

void UBCIUdpReceiverComponent::EndPlay(const EEndPlayReason::Type EndPlayReason)
{
    if (Worker) { Worker->StopWork(); }
    if (Thread) { Thread->Kill(true); delete Thread; Thread = nullptr; }
    if (Worker) { delete Worker; Worker = nullptr; }
    if (Socket) { Socket->Close(); ISocketSubsystem::Get(PLATFORM_SOCKETSUBSYSTEM)->DestroySocket(Socket); Socket = nullptr; }

    Super::EndPlay(EndPlayReason);
}

ブループリント接続例

  • レベル内のキャラクターBPに BCIUdpReceiverComponent を追加
  • Event Graph で OnFocusUpdated をバインド
  • Focus >= 0.8 なら Jump or 任意のアクションを呼ぶ

動作確認手順（共通）

  1. Python: python bci_bridge_udp.py を実行（「Streaming UDP…」が出ればOK）
  2. Unity または Unreal を起動してプレイ
  3. focusThreshold を 0.6～0.85 の範囲で調整（ダミー信号なら0.75前後で反応）

実機に繋げるときのヒント

  • OpenBCI / BrainFlow
    • Python側で BrainFlow の BoardShim を有効化し、serial_port を実機のポートへ
    • バンドパワー（α/βなど）→ 正規化 → focus へ変換
  • Emotiv
    • Emotiv SDK から Python で値取得 → 同じUDP形式で送信
  • LSL(LabStreamingLayer)を使いたい場合
    • Python: LSLでEEG/Markerを送出
    • Unity: LSL4Unity
    • Unreal: LSLプラグイン
      （今回は依存ゼロのUDPにしていますが、研究用途ではLSLが定番です）

必要なら、

  • Unity の UIメーター（フォーカス可視化）
  • より堅牢なスレッドキューや再接続
  • Unreal の純BP版（C++なし）
    もすぐ追加できます。どっちを先に強化します？

VRMMORPGβ版

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>エルダークロニクル：VR超完全版 – ロードなし（拾う/装備修正）</title>
  <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
  <style>
    body, html { margin:0; padding:0; overflow:hidden; font-family:'Yu Gothic',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:#000;}
    #ui {
      position:absolute; top:20px; left:20px; z-index:10; width:400px; color:#fff;
      background:linear-gradient(180deg,rgba(0,0,0,.92),rgba(0,10,30,.85));
      border-radius:16px; padding:14px 16px; box-shadow:0 0 25px #0ff,0 0 18px #33f4; font-size:15px;
    }
    h2 { margin:0 0 8px 0; font-size:22px; letter-spacing:1px;}
    .row { display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
    .row > * { flex: 1 1 auto; }
    input, select { width:100%; padding:6px 8px; border-radius:8px; border:1px solid #024; background:#00131f; color:#cfe9ff; }
    button {
      background:linear-gradient(90deg,#555,#222 80%);
      color:#fff; padding:10px; margin:5px 0; border:none; cursor:pointer; width:100%;
      border-radius:8px; font-weight:bold; letter-spacing:1px; box-shadow:0 1px 8px #0cf5; transition:background .25s;
    }
    button:hover { background:linear-gradient(90deg,#888 40%,#3cf); }
    .section-title { font-weight:bold; font-size:17px; margin-top:10px; border-bottom:2px solid #5ef; letter-spacing:1.2px; }
    .bar { height:14px; background:#13202a; border-radius:7px; overflow:hidden; margin:6px 0; box-shadow:0 1px 6px #0ff6 inset; }
    .bar-inner { height:100%; background:linear-gradient(90deg,#0f0,#3af); transition:width .25s; }
    .mana-bar .bar-inner { background:linear-gradient(90deg,#33d,#6ff); }
    .enemyhp-bar .bar-inner { background:linear-gradient(90deg,#f55,#fdd); }
    #scenario { margin:10px 0 6px 0; background:rgba(0,10,32,0.7); padding:8px 12px; border-radius:8px; min-height:44px; }
    .kbd { display:inline-block; padding:1px 6px; border-radius:6px; background:#0a2636; border:1px solid #124; font-family:monospace; }
    #hint {
      position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
      color:#eaffff; background:rgba(0,20,35,.72); border:1px solid #0af; padding:8px 12px; border-radius:10px;
      box-shadow:0 0 18px #08f5; font-size:14px; z-index:10;
    }
    #pickupPrompt {
      position:absolute; bottom:70px; left:50%; transform:translateX(-50%);
      color:#fff; background:rgba(0,0,0,.7); border:1px solid #38f; padding:8px 12px; border-radius:10px;
      display:none; z-index:10;
    }
    .tag { display:inline-block; padding:2px 6px; border-radius:6px; background:#012233; border:1px solid #1a4e6c; margin-left:6px; font-size:12px; color:#bfe6ff;}
    .on { background:#0b3754; border-color:#3db3ff; color:#fff; }
  </style>
</head>
<body>
  <div id="ui">
    <h2>エルダークロニクルVR</h2>
    <div class="row">
      <span>プレイヤー名:</span>
      <input id="playerName" placeholder="名前を入力">
    </div>

    <div class="row"><span>レベル:</span><span id="level" class="tag on">1</span>
      <span>装備:</span><span id="equipment" class="tag">なし</span>
    </div>

    <div>HP: <span id="hpText">100</span></div>
    <div class="bar"><div id="hpBar" class="bar-inner" style="width:100%"></div></div>
    <div>魔力: <span id="manaText">100</span></div>
    <div class="bar mana-bar"><div id="manaBar" class="bar-inner" style="width:100%"></div></div>

    <div>敵HP: <span id="enemyHpText">120</span></div>
    <div class="bar enemyhp-bar"><div id="enemyHpBar" class="bar-inner" style="width:100%"></div></div>

    <div class="section-title">シナリオ</div>
    <div id="scenario"></div>

    <div class="section-title">行動</div>
    <button onclick="levelUp()">🎉 レベルアップ</button>
    <button onclick="castSpell()">🪄 魔法発動</button>
    <button onclick="choosePath('wizard')">🧙‍♂️ 魔導士に話す</button>
    <button onclick="choosePath('knight')">🛡️ 騎士に話す</button>
    <button onclick="receiveQuest()">📜 クエスト受注</button>
    <button onclick="toggleEnvironment()">🌄 昼夜切替</button>

    <div class="section-title">移動</div>
    <div class="row">
      <button onclick="changeField('town')">🏘️ 街</button>
      <button onclick="changeField('castle')">🏰 城</button>
    </div>
    <div class="row">
      <button onclick="changeField('cave')">🕳️ 洞窟</button>
      <button onclick="changeField('ruins')">🏛️ 遺跡</button>
    </div>
    <div class="row">
      <button onclick="changeField('dungeon')">🧩 ダンジョン</button>
    </div>

    <div class="section-title">操作</div>
    <div style="line-height:1.6">
      <span class="kbd">WASD</span> 移動　
      <span class="kbd">マウス</span> 視点　
      <span class="kbd">E</span> 拾う　
      <span class="kbd">1</span> 剣装備　
      <span class="kbd">2</span> 銃装備　
      <span class="kbd">クリック</span> 攻撃
    </div>
  </div>

  <div id="pickupPrompt">Eで拾う</div>
  <div id="hint">近くの武器に近づいて <span class="kbd">E</span> で拾い、<span class="kbd">1/2</span> で装備、クリックで攻撃！</div>

  <a-scene loading-screen="enabled:false" renderer="colorManagement:true" shadow="true">
    <a-sky id="sky" color="#0e163e"></a-sky>

    <a-entity id="starParticles" position="0 25 -40" visible="false">
      <a-entity geometry="primitive:sphere; radius:0.18" material="color:#fff; opacity:0.6" position="-10 3 0"></a-entity>
      <a-entity geometry="primitive:sphere; radius:0.12" material="color:#fff; opacity:0.8" position="7 2 -2"></a-entity>
      <a-entity geometry="primitive:sphere; radius:0.11" material="color:#eaf6ff; opacity:0.9" position="3 5 2"></a-entity>
      <a-entity geometry="primitive:sphere; radius:0.10" material="color:#ffe; opacity:0.7" position="13 3 5"></a-entity>
    </a-entity>
    <a-entity id="cloudParticles" position="0 30 -35" visible="true">
      <a-sphere radius="5" position="8 2 -8" color="#f6fbff" opacity="0.18"></a-sphere>
      <a-sphere radius="6" position="-7 3 5" color="#eefbff" opacity="0.14"></a-sphere>
    </a-entity>

    <a-light type="ambient" color="#fff" intensity="1"></a-light>
    <a-light id="sunlight" type="directional" intensity="1.6" position="20 25 -8" castShadow="true" shadow-mapWidth="1024" shadow-mapHeight="1024"></a-light>
    <a-light type="point" color="#cff" intensity="2.2" distance="50" position="2 9 -3"></a-light>
    <a-light type="spot" color="#55aaff" position="0 15 -10" intensity="1.2" angle="30" penumbra="0.7"></a-light>

    <a-plane id="ground" position="0 0 0" rotation="-90 0 0" width="120" height="120" color="#375047" shadow="receive:true"></a-plane>

    <a-entity id="field-town" visible="true">
      <a-circle position="0 0 -6" radius="4" color="#7d7d7d" material="roughness:.9; metalness:.05; opacity:.84; transparent:true"></a-circle>
      <a-entity position="-2 0 -7">
        <a-box width="3.6" height="2.6" depth="2.4" color="#c0a47b" material="roughness:0.3; metalness:0.05" position="0 1.3 0"></a-box>
        <a-cone position="0 3 -0.1" radius-bottom="2.1" height="1.4" color="#7b5322"></a-cone>
        <a-text value="街の家" position="0 3.7 0" color="#fff" width="5" align="center"></a-text>
      </a-entity>
      <a-entity position="2 0 -9">
        <a-box width="2.2" height="2.2" depth="2.4" color="#a86f23" position="0 1.1 0"></a-box>
        <a-cone position="0 2.6 0" radius-bottom="1.4" height="1.0" color="#5c3a12"></a-cone>
      </a-entity>
      <a-entity position="5 0 -5">
        <a-cylinder radius="0.25" height="4" color="#3a2a1a" position="0 2 0"></a-cylinder>
        <a-sphere radius="1.2" color="#174d1f" position="0 3.2 0"></a-sphere>
      </a-entity>
    </a-entity>

    <a-entity id="field-castle" visible="false">
      <a-box position="0 2.8 -12" depth="6" height="6" width="10" color="#ccd2df" material="roughness:0.25; metalness:0.12"></a-box>
      <a-cylinder position="-4 1.2 -13" radius="1.1" height="3.8" color="#858ca3"></a-cylinder>
      <a-cylinder position="4 1.2 -13" radius="1.1" height="3.8" color="#858ca3"></a-cylinder>
      <a-cone position="0 6.4 -12" radius-bottom="3.2" height="2" color="#dba"></a-cone>
      <a-entity geometry="primitive:torus; radius:2.5; tube:0.07" material="color:#66aaff; opacity:.25; transparent:true" position="0 4.5 -12"></a-entity>
      <a-text value="王の城" position="0 6.3 -12" color="#0bf" width="6" align="center"></a-text>
    </a-entity>

    <a-entity id="field-cave" visible="false">
      <a-torus position="2 1.1 -10" radius="1.8" tube="0.8" arc="230" color="#363636" rotation="40 0 90"></a-torus>
      <a-sphere position="2 0.4 -10" radius="1.1" color="#151515"></a-sphere>
      <a-entity position="-2 0 -8">
        <a-cone radius-bottom="0.8" height="2.2" color="#2a2a2a"></a-cone>
        <a-cone radius-bottom="0.5" height="1.4" color="#393939" position="0.7 0 0.4"></a-cone>
      </a-entity>
      <a-text value="洞窟の入口" position="2 2.9 -10" color="#fff" width="6" align="center"></a-text>
    </a-entity>

    <a-entity id="field-ruins" visible="false">
      <a-cylinder position="-2 1.1 -9" radius="0.8" height="2.6" color="#babbb2"></a-cylinder>
      <a-box position="-3.1 1.8 -9" width="3.5" height="0.32" depth="0.7" color="#e0dfc7"></a-box>
      <a-torus position="-2 2.3 -9" radius="0.6" tube="0.09" arc="340" color="#fffeee"></a-torus>
      <a-entity geometry="primitive:torusKnot; p:2; q:7; radius:0.7; tube:0.07" position="2 1.8 -8" material="color:#bcd; opacity:.7; transparent:true"></a-entity>
      <a-text value="古代の遺構" position="0 3.3 -8.5" color="#fff" width="6" align="center"></a-text>
    </a-entity>

    <a-entity id="field-dungeon" visible="false">
      <a-box position="2 1.2 -8.8" depth="3.3" height="2.3" width="3.6" color="#161651"></a-box>
      <a-torus-knot position="-1.5 2.7 -8.2" radius="0.9" tube="0.12" p="3" q="7" color="#64eaff"></a-torus-knot>
      <a-cylinder position="-3 0.7 -9.6" radius="0.8" height="1.2" color="#333"></a-cylinder>
      <a-entity geometry="primitive:torus; radius:1.4; tube:0.05" material="color:#aaeeff; opacity:.18; transparent:true" position="0 2.1 -8.6" rotation="90 0 0"></a-entity>
      <a-text value="ダンジョン入口" position="0 3.1 -8.4" color="#fff" width="6" align="center"></a-text>
    </a-entity>

    <!-- 武器ピックアップ -->
    <a-entity id="swordPickup" class="pickup" data-weapon="sword" position="-1 0 -5">
      <a-box width="0.16" height="1.3" depth="0.08" color="#cfe7ff" material="metalness:0.8; roughness:0.15" position="0 0.75 0"></a-box>
      <a-box width="0.5" height="0.08" depth="0.08" color="#333" position="0 0.1 0"></a-box>
      <a-cylinder radius="0.06" height="0.42" color="#7c5a2b" position="0 -0.1 0"></a-cylinder>
      <a-entity geometry="primitive:ring; radiusInner:0.45; radiusOuter:0.5" rotation="-90 0 0" position="0 0 0" material="color:#44d; opacity:.35; transparent:true"></a-entity>
      <a-text value="剣" color="#fff" position="0 1.7 0" align="center"></a-text>
    </a-entity>

    <a-entity id="gunPickup" class="pickup" data-weapon="gun" position="2 0 -5.5">
      <a-box width="0.7" height="0.18" depth="0.18" color="#222" position="0 0.4 0"></a-box>
      <a-box width="0.3" height="0.28" depth="0.18" color="#444" position="-0.2 0.2 0"></a-box>
      <a-box width="0.12" height="0.40" depth="0.16" color="#333" position="0.2 0.15 0"></a-box>
      <a-cylinder radius="0.06" height="0.28" color="#555" position="0.34 0.46 0" rotation="0 0 90"></a-cylinder>
      <a-entity geometry="primitive:ring; radiusInner:0.45; radiusOuter:0.5" rotation="-90 0 0" position="0 0 0" material="color:#0aa; opacity:.35; transparent:true"></a-entity>
      <a-text value="銃" color="#fff" position="0 1.0 0" align="center"></a-text>
    </a-entity>

    <!-- プレイヤー（リグが移動する：★修正） -->
    <a-entity id="rig" position="0 0 0" wasd-controls="acceleration:30">
      <a-entity id="cam" camera look-controls="pointerLockEnabled:true" position="0 1.6 3"></a-entity>
      <a-entity id="player" position="0 0 -1.5" rotation="0 180 0" shadow="cast:true">
        <a-sphere radius="0.18" color="#ffd7f0" position="0 1.58 0"></a-sphere>
        <a-cylinder radius="0.23" height="0.9" color="#9ad" position="0 1.02 0"></a-cylinder>
        <a-cylinder radius="0.08" height="0.55" color="#9ad" position="-0.16 0.74 0" rotation="0 0 18"></a-cylinder>
        <a-cylinder radius="0.08" height="0.55" color="#9ad" position="0.16 0.74 0" rotation="0 0 -18"></a-cylinder>
        <a-cylinder radius="0.09" height="0.7" color="#79b" position="-0.10 0.35 0"></a-cylinder>
        <a-cylinder radius="0.09" height="0.7" color="#79b" position="0.10 0.35 0"></a-cylinder>
      </a-entity>
    </a-entity>

    <!-- 敵 -->
    <a-entity id="enemy" position="0 0 -9" visible="true">
      <a-sphere id="enemyBody" radius="1.25" color="#9b1e1e" material="metalness:0.35; roughness:.25; emissive:#330000"></a-sphere>
      <a-entity geometry="primitive:torus; radius:1.4; tube:0.05" material="color:#ffeeaa; opacity:.18; transparent:true" position="0 0.3 0" rotation="90 0 0"></a-entity>
      <a-entity geometry="primitive:torusKnot; radius:0.45; tube:0.05; p:2; q:5" material="color:#ffa033; opacity:.22; transparent:true" position="0 1.0 0"></a-entity>
      <a-sphere position="-0.38 0.42 0.95" radius="0.14" color="#fff" material="metalness:.9; roughness:.05; emissive:#a0f"></a-sphere>
      <a-sphere position="0.38 0.42 0.95" radius="0.14" color="#fff" material="metalness:.9; roughness:.05; emissive:#a0f"></a-sphere>
      <a-cone position="-0.45 1.35 0.15" radius-bottom="0.16" height="0.62" color="#f5f3ff" rotation="15 0 60"></a-cone>
      <a-cone position="0.45 1.35 0.15" radius-bottom="0.16" height="0.62" color="#f5f3ff" rotation="15 0 -60"></a-cone>
      <a-text value="敵モンスター" position="0 2.15 0" align="center" color="#fff"></a-text>
    </a-entity>

    <a-entity id="spellEffect" geometry="primitive:sphere; radius:0.55"
              material="color:#72f3ff; opacity:.86; emissive:#88f; transparent:true"
              position="0 1.7 -3" visible="false"
              animation__move="property: position; to: 0 3.1 -6; dur:500; dir:alternate; loop:false">
      <a-entity geometry="primitive:torus; radius:0.7; tube:0.08" material="color:#fff; opacity:.3; transparent:true"></a-entity>
    </a-entity>

    <a-entity id="game" game-manager></a-entity>
  </a-scene>

<script>
let isDay=false, hp=100, mana=100, level=1;
let enemyHP=120, enemyHPMax=120;
function updateBars(){
  document.getElementById("hpText").innerText = Math.max(0,Math.floor(hp));
  document.getElementById("manaText").innerText = Math.max(0,Math.floor(mana));
  document.getElementById("hpBar").style.width = Math.max(0,Math.min(100,hp))+"%";
  document.getElementById("manaBar").style.width = Math.max(0,Math.min(100,mana))+"%";
  document.getElementById("level").innerText = level;
  document.getElementById("enemyHpText").innerText = Math.max(0,enemyHP);
  const w = Math.max(0, Math.min(100, enemyHP*100/enemyHPMax));
  document.getElementById("enemyHpBar").style.width = w+"%";
}
function levelUp(){ level++; hp=Math.min(100,hp+20); mana+=30; showScenario("🎉 レベルアップ！新しい力が湧いてくる！"); updateBars(); }
function castSpell(){
  if(mana<20){ showScenario("💤 魔力が足りない！"); return; }
  mana-=20; updateBars();
  const effect=document.getElementById("spellEffect");
  effect.setAttribute("visible","true");
  setTimeout(()=>{ effect.setAttribute("visible","false"); applyDamageToEnemy(30,"魔法ヒット"); },700);
}
function choosePath(choice){
  if(choice==="wizard"){ document.getElementById("equipment").innerText="魔導士のローブ"; mana+=50; showScenario("🧙‍♂️ 魔導士の試練が始まる…"); }
  else{ document.getElementById("equipment").innerText="騎士の剣"; hp+=30; showScenario("⚔️ 騎士と共に魔王城へ向かう！"); }
  updateBars();
}
function toggleEnvironment(){
  const sky=document.getElementById("sky");
  const star=document.getElementById("starParticles");
  const cloud=document.getElementById("cloudParticles");
  const ground=document.getElementById("ground");
  const sunlight=document.getElementById("sunlight");
  if(isDay){
    sky.setAttribute("color","#0e163e"); star.setAttribute("visible","false"); cloud.setAttribute("visible","true");
    ground.setAttribute("color","#375047"); sunlight.setAttribute("intensity","1.6"); showScenario("🌌 夜の世界へ…");
  }else{
    sky.setAttribute("color","#7ddfff"); star.setAttribute("visible","true"); cloud.setAttribute("visible","false");
    ground.setAttribute("color","#b8ffcc"); sunlight.setAttribute("intensity","2.1"); showScenario("🌞 昼の世界へ…");
  }
  isDay=!isDay;
}
function changeField(fieldName){
  const fields=['town','castle','cave','ruins','dungeon'];
  fields.forEach(name=>{
    const el=document.getElementById(`field-${name}`);
    el.setAttribute('visible', name===fieldName);
  });
  showScenario(`📍 ${fieldName} に移動しました`);
}
function receiveQuest(){
  const quests=[
    "魔導士の塔で失われた書を探せ！","騎士団の旗を取り戻せ！","洞窟の奥に眠る魔石を発見せよ！",
    "遺跡に隠された封印を解け！","ダンジョンの魔王を討伐せよ！"
  ];
  const index=Math.floor(Math.random()*quests.length);
  showScenario("📜 クエスト受注: "+quests[index]);
}

const scenarioList=[
  "目覚めたあなたは不思議な世界にいた。","最初のクエストを受注しよう。","フィールド移動で冒険の扉が開く。",
  "行動や魔法でストーリーが動く。","街で情報を集め、仲間と出会おう。","クエストを進め、魔王に立ち向かえ！"
];
let scenarioIndex=0;
function showScenario(text){ document.getElementById('scenario').innerHTML=text; }
function advanceScenario(){ if(scenarioIndex<scenarioList.length){ showScenario(scenarioList[scenarioIndex]); scenarioIndex++; } }
['levelUp','castSpell','choosePath','changeField','receiveQuest'].forEach(fn=>{
  const orig=window[fn]; window[fn]=function(){ orig.apply(this, arguments); advanceScenario(); }
});

/* ---- ここが拾う/装備の中核 ---- */
const rigEl=()=>document.getElementById('rig');
const camEl=()=>document.getElementById('cam');
const enemyEl=()=>document.getElementById('enemy');
const enemyBodyEl=()=>document.getElementById('enemyBody');

let hasSword=false, hasGun=false, equipped='none';
let attackCooldown=false;
const bullets=[];

function setEquipmentLabel(){
  let label="なし";
  if(equipped==='sword') label="剣";
  if(equipped==='gun') label="銃";
  document.getElementById('equipment').innerText=label;
}

function tryPickup(){
  const rpos=rigEl().object3D.position; // ★リグが移動するのでOK
  const items=[document.getElementById('swordPickup'),document.getElementById('gunPickup')];
  for(const it of items){
    if(!it.getAttribute('visible')) continue;
    const wpos=it.object3D.position;
    const d=rpos.distanceTo(wpos);
    if(d<2.0){
      const w=it.getAttribute('data-weapon');
      it.setAttribute('visible','false');
      if(w==='sword'){ hasSword=true; if(equipped==='none') equipped='sword'; showScenario("🗡️ 剣を拾った！ 1で装備。"); }
      if(w==='gun'){ hasGun=true; if(equipped==='none') equipped='gun'; showScenario("🔫 銃を拾った！ 2で装備。"); }
      setEquipmentLabel();
      return;
    }
  }
  showScenario("近くに拾えるものはない。");
}

function equipSword(){ if(hasSword){ equipped='sword'; setEquipmentLabel(); showScenario("🗡️ 剣を装備した。"); } else { showScenario("剣をまだ拾っていない。"); } }
function equipGun(){ if(hasGun){ equipped='gun'; setEquipmentLabel(); showScenario("🔫 銃を装備した。"); } else { showScenario("銃をまだ拾っていない。"); } }

function attack(){
  if(attackCooldown) return;
  if(equipped==='sword'){ swordSlash(); }
  else if(equipped==='gun'){ shootBullet(); }
  else{ showScenario("装備がありません。剣や銃を拾ってください。"); }
}

function swordSlash(){
  attackCooldown=true;
  const slash=document.createElement('a-entity');
  slash.setAttribute('geometry','primitive: torus; radius:0.9; tube:0.08; arc:200');
  slash.setAttribute('material','color:#fff; opacity:.6; transparent:true');
  const dir=new AFRAME.THREE.Vector3(); camEl().object3D.getWorldDirection(dir); dir.y=0; dir.normalize();
  const base=rigEl().object3D.position.clone().add(new AFRAME.THREE.Vector3(0,1.2,0)).add(dir.clone().multiplyScalar(0.8));
  slash.setAttribute('position',`${base.x} ${base.y} ${base.z}`);
  const rotY=Math.atan2(dir.x,dir.z)*AFRAME.THREE.MathUtils.RAD2DEG;
  slash.setAttribute('rotation',`0 ${rotY} 0`);
  slash.setAttribute('animation__fade','property: material.opacity; to:0; dur:200; easing:easeOutQuad');
  document.querySelector('a-scene').appendChild(slash);
  setTimeout(()=>slash.parentNode && slash.parentNode.removeChild(slash),220);

  const enemyPos=enemyEl().object3D.position.clone();
  const toEnemy=enemyPos.clone().sub(rigEl().object3D.position.clone().add(new AFRAME.THREE.Vector3(0,1.0,0)));
  const dist=toEnemy.length();
  toEnemy.y=0; toEnemy.normalize();
  const forward=dir.clone();
  const angle=forward.dot(toEnemy);
  if(dist<2.6 && angle>0.5 && enemyEl().getAttribute('visible')){
    applyDamageToEnemy(25,"斬撃");
  } else {
    showScenario("空振り…");
  }
  setTimeout(()=>attackCooldown=false,280);
}

function shootBullet(){
  attackCooldown=true;
  const bullet=document.createElement('a-sphere');
  bullet.setAttribute('radius','0.07');
  bullet.setAttribute('color','#e6f7ff');
  bullet.setAttribute('material','emissive:#88d; metalness:.6; roughness:.2');
  const dir=new AFRAME.THREE.Vector3(); camEl().object3D.getWorldDirection(dir); dir.normalize();
  const start=rigEl().object3D.position.clone().add(new AFRAME.THREE.Vector3(0,1.3,0)).add(dir.clone().multiplyScalar(0.9));
  bullet.setAttribute('position',`${start.x} ${start.y} ${start.z}`);
  document.querySelector('a-scene').appendChild(bullet);
  bullets.push({el:bullet, dir:dir.clone(), life:1800, speed:24});
  setTimeout(()=>attackCooldown=false,120);
}

function applyDamageToEnemy(dmg,label){
  if(!enemyEl().getAttribute('visible')) return;
  enemyHP=Math.max(0, enemyHP - dmg);
  updateBars();
  const origColor=enemyBodyEl().getAttribute('color');
  enemyBodyEl().setAttribute('color','#ffffff');
  setTimeout(()=>enemyBodyEl().setAttribute('color', origColor), 80);
  spawnDamageText(dmg,label);
  if(enemyHP<=0){ killEnemy(); }
}

function spawnDamageText(dmg,label){
  const t=document.createElement('a-text');
  t.setAttribute('value',`${label} -${dmg}`);
  t.setAttribute('color','#ffe6e6');
  t.setAttribute('align','center');
  const p=enemyEl().object3D.position.clone();
  t.setAttribute('position',`${p.x} ${p.y+2.4} ${p.z}`);
  t.setAttribute('animation__rise','property: position; to: '+`${p.x} ${p.y+3.2} ${p.z}`+'; dur:650; easing:easeOutQuad');
  t.setAttribute('animation__fade','property: opacity; to:0; dur:650; easing:easeOutQuad');
  document.querySelector('a-scene').appendChild(t);
  setTimeout(()=>t.parentNode && t.parentNode.removeChild(t),700);
}

function killEnemy(){
  enemyEl().setAttribute('visible','false');
  showScenario("✅ 敵を倒した！ 5秒後に再出現する…");
  setTimeout(()=>respawnEnemy(), 5000);
}
function respawnEnemy(){
  enemyHP=enemyHPMax; updateBars();
  const e=enemyEl();
  const x = (Math.random()*6 - 3);
  const z = -8.5 + (Math.random()*3 - 1.5);
  e.setAttribute('position',`${x} 0 ${z}`);
  e.setAttribute('visible','true');
  showScenario("⚠️ 新たな敵が現れた！");
}

/* 入力（E/1/2 の互換強化：★修正） */
AFRAME.registerComponent('game-manager',{
  init:function(){
    window.addEventListener('keydown',(e)=>{
      const k=e.key;
      const c=e.code;
      if(c==='KeyE' || k==='e' || k==='E') tryPickup();
      if(c==='Digit1' || c==='Numpad1' || k==='1') equipSword();
      if(c==='Digit2' || c==='Numpad2' || k==='2') equipGun();
    });
    window.addEventListener('mousedown',()=>attack());
    updateBars(); advanceScenario(); setEquipmentLabel();
  },
  tick:function(time,dt){
    const delta=dt/1000;
    const prompt=document.getElementById('pickupPrompt');
    const rpos=rigEl().object3D.position;
    let near=false;
    ['swordPickup','gunPickup'].forEach(id=>{
      const el=document.getElementById(id);
      if(el.getAttribute('visible')){
        const d=rpos.distanceTo(el.object3D.position);
        if(d<2.0) near=true;
      }
    });
    prompt.style.display = near?'block':'none';

    // 弾
    for(let i=bullets.length-1;i>=0;i--){
      const b=bullets[i];
      if(!b.el.parentNode){ bullets.splice(i,1); continue; }
      b.life -= dt;
      const pos=b.el.object3D.position;
      pos.add(b.dir.clone().multiplyScalar(24*delta));
      if(b.life<=0){ b.el.parentNode.removeChild(b.el); bullets.splice(i,1); continue; }
      if(enemyEl().getAttribute('visible')){
        const d=pos.distanceTo(enemyEl().object3D.position);
        if(d<1.35){
          applyDamageToEnemy(15,"射撃");
          b.el.parentNode.removeChild(b.el);
          bullets.splice(i,1);
        }
      }
    }
    enemyEl().object3D.rotation.y += delta*0.3;
  }
});

updateBars();
advanceScenario();
</script>
</body>
</html>

NeuroLink Dive System Advanced – 究極完全フルダイブVRプラットフォーム


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NeuroLink Dive System Advanced - 究極完全フルダイブVRプラットフォーム</title>
  
  <!-- Core Libraries -->
  <script src="https://cdn.jsdelivr.net/npm/aframe@1.4.2/dist/aframe-master.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/three@0.152.2/build/three.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/howler@2.2.3/dist/howler.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&family=Exo+2:wght@300;400;600;800&display=swap" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.3.0/dist/chart.umd.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.5/dist/sweetalert2.all.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.5/dist/sweetalert2.min.css">
  <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>

  <style>
    :root {
      --neural-primary: #00E6FF;
      --neural-secondary: #FF0080;
      --quantum-purple: #9146FF;
      --bio-green: #39FF14;
      --nano-orange: #FF8C00;
      --memory-gold: #FFD700;
      --consciousness-blue: #0080FF;
      --dark-void: #000008;
      --dark-neural: #0A0A20;
      --holographic-cyan: #00FFFF;
      --plasma-pink: #FF69B4;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html, body {
      font-family: 'Rajdhani', 'Orbitron', monospace;
      background: radial-gradient(ellipse at center, #0A0A20 0%, #000008 70%, #000000 100%);
      color: var(--neural-primary);
      overflow-x: hidden;
      scroll-behavior: smooth;
    }

    /* Particle Background */
    #particles-js {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      opacity: 0.3;
    }

    /* Holographic Text Effects */
    .holo-text {
      background: linear-gradient(45deg, #00E6FF, #FF0080, #9146FF, #39FF14, #FFD700);
      background-size: 400% 400%;
      animation: holoShift 8s ease-in-out infinite;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-weight: 900;
      font-family: 'Orbitron', monospace;
      text-shadow: 0 0 30px #00e6ff66, 0 0 60px #ff008055;
      position: relative;
    }

    .holo-text::before {
      content: attr(data-text);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: scanline 3s linear infinite;
    }

    @keyframes holoShift {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }

    @keyframes scanline {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }

    /* Neural HUD */
    .neural-hud {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 5000;
      display: flex;
      gap: 20px;
      pointer-events: none;
      flex-wrap: wrap;
      justify-content: center;
    }

    .neural-hud .status-pod {
      min-width: 140px;
      font-size: 1.1em;
      padding: 10px 16px;
      background: rgba(0, 0, 0, 0.85);
      border-radius: 25px;
      box-shadow: 0 0 20px rgba(0, 230, 255, 0.4);
      border: 2px solid rgba(0, 230, 255, 0.6);
      pointer-events: auto;
      display: flex;
      align-items: center;
      gap: 10px;
      backdrop-filter: blur(10px);
      font-family: 'Space Mono', monospace;
      transition: all 0.3s ease;
    }

    .neural-hud .status-pod:hover {
      transform: scale(1.05);
      box-shadow: 0 0 30px rgba(0, 230, 255, 0.8);
    }

    .neural-hud .status-pod.critical {
      border-color: #FF0080;
      box-shadow: 0 0 20px rgba(255, 0, 128, 0.6);
      animation: criticalPulse 1.5s ease-in-out infinite;
    }

    @keyframes criticalPulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }

    /* Main Container */
    .main-container {
      width: 100%;
      padding: 30px;
      display: flex;
      flex-direction: column;
      gap: 50px;
      margin-top: 100px;
    }

    /* Section Styling */
    .section {
      background: linear-gradient(135deg, rgba(0, 230, 255, 0.08) 0%, rgba(255, 0, 128, 0.08) 30%, rgba(145, 70, 255, 0.08) 70%, rgba(57, 255, 20, 0.08) 100%);
      border: 2px solid rgba(0, 230, 255, 0.3);
      border-radius: 30px;
      padding: 50px;
      margin-bottom: 40px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(5px);
      position: relative;
      overflow: hidden;
    }

    .section::before {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: linear-gradient(45deg, #00E6FF, #FF0080, #9146FF, #39FF14);
      background-size: 400% 400%;
      animation: borderGlow 6s ease-in-out infinite;
      border-radius: 30px;
      z-index: -1;
      opacity: 0.3;
    }

    @keyframes borderGlow {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }

    /* Cards */
    .card {
      background: rgba(0, 230, 255, 0.05);
      border: 2px solid rgba(0, 230, 255, 0.25);
      border-radius: 25px;
      padding: 35px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);
      position: relative;
      overflow: hidden;
    }

    .card::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
      transition: left 0.5s;
    }

    .card:hover::before {
      left: 100%;
    }

    .card:hover {
      transform: translateY(-10px) scale(1.02);
      box-shadow: 0 20px 50px rgba(0, 230, 255, 0.2);
      border-color: rgba(0, 230, 255, 0.6);
    }

    /* Neural Buttons */
    .neural-button {
      background: linear-gradient(135deg, rgba(0, 230, 255, 0.2) 0%, rgba(255, 0, 128, 0.2) 50%, rgba(145, 70, 255, 0.2) 100%);
      border: 3px solid transparent;
      background-clip: padding-box;
      color: var(--neural-primary);
      padding: 16px 32px;
      border-radius: 50px;
      cursor: pointer;
      font-weight: 700;
      font-size: 1.2em;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-family: 'Orbitron', monospace;
      text-transform: uppercase;
      letter-spacing: 2px;
      box-shadow: 0 0 30px rgba(0, 230, 255, 0.3);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    .neural-button::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, #00E6FF, #FF0080, #9146FF);
      opacity: 0;
      transition: opacity 0.3s ease;
      border-radius: 50px;
      z-index: -1;
    }

    .neural-button:hover::before {
      opacity: 0.8;
    }

    .neural-button:hover {
      transform: translateY(-8px) scale(1.05);
      color: #ffffff;
      box-shadow: 0 0 50px rgba(0, 230, 255, 0.8), 0 10px 30px rgba(0, 0, 0, 0.3);
    }

    .neural-button:active {
      transform: translateY(-5px) scale(1.02);
    }

    /* VR Area */
    .dive-vr-area {
      width: 100%;
      height: 500px;
      margin: 30px 0;
      border-radius: 25px;
      overflow: hidden;
      box-shadow: 0 0 50px rgba(0, 230, 255, 0.4);
      border: 3px solid rgba(0, 230, 255, 0.5);
      position: relative;
    }

    .dive-vr-area::before {
      content: 'NEURAL DIVE ACTIVE';
      position: absolute;
      top: 20px;
      left: 20px;
      color: #39FF14;
      font-family: 'Space Mono', monospace;
      font-weight: bold;
      z-index: 10;
      background: rgba(0, 0, 0, 0.7);
      padding: 8px 16px;
      border-radius: 15px;
      font-size: 0.9em;
      border: 1px solid #39FF14;
    }

    /* Grid Layout */
    .grid-layout {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
      gap: 35px;
    }

    /* AI Chat Interface */
    #aiChatLog {
      background: rgba(0, 0, 0, 0.4);
      border-radius: 20px;
      min-height: 300px;
      max-height: 400px;
      overflow-y: auto;
      font-family: 'Space Mono', monospace;
      font-size: 1.1em;
      padding: 20px;
      border: 2px solid rgba(0, 230, 255, 0.3);
      scrollbar-width: thin;
      scrollbar-color: #00E6FF #000;
    }

    #aiChatLog::-webkit-scrollbar {
      width: 8px;
    }

    #aiChatLog::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.3);
      border-radius: 10px;
    }

    #aiChatLog::-webkit-scrollbar-thumb {
      background: linear-gradient(45deg, #00E6FF, #9146FF);
      border-radius: 10px;
    }

    .ai-msg-user {
      background: rgba(0, 128, 255, 0.2);
      color: #00E6FF;
      border-radius: 20px 20px 5px 20px;
      padding: 15px 20px;
      margin-bottom: 10px;
      border: 1px solid rgba(0, 230, 255, 0.4);
      animation: slideInRight 0.3s ease;
    }

    .ai-msg-ai {
      background: rgba(145, 70, 255, 0.2);
      color: #FF69B4;
      border-radius: 20px 20px 20px 5px;
      padding: 15px 20px;
      margin-bottom: 10px;
      border: 1px solid rgba(255, 105, 180, 0.4);
      animation: slideInLeft 0.3s ease;
    }

    .ai-msg-meta {
      font-size: 0.9em;
      color: #aaa;
      margin-bottom: 5px;
      font-weight: bold;
    }

    @keyframes slideInRight {
      from { transform: translateX(30px); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }

    @keyframes slideInLeft {
      from { transform: translateX(-30px); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }

    /* Chart Containers */
    .chart-container {
      position: relative;
      height: 300px;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 15px;
      padding: 20px;
      border: 2px solid rgba(0, 230, 255, 0.2);
    }

    /* Control Panels */
    .control-panel {
      background: rgba(0, 0, 0, 0.5);
      border: 2px solid rgba(0, 230, 255, 0.4);
      border-radius: 20px;
      padding: 25px;
      margin: 15px 0;
    }

    .slider-control {
      width: 100%;
      height: 8px;
      background: rgba(0, 230, 255, 0.2);
      border-radius: 5px;
      outline: none;
      -webkit-appearance: none;
      margin: 15px 0;
    }

    .slider-control::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 25px;
      height: 25px;
      background: linear-gradient(45deg, #00E6FF, #9146FF);
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 0 15px rgba(0, 230, 255, 0.8);
    }

    .slider-control::-moz-range-thumb {
      width: 25px;
      height: 25px;
      background: linear-gradient(45deg, #00E6FF, #9146FF);
      border-radius: 50%;
      cursor: pointer;
      border: none;
      box-shadow: 0 0 15px rgba(0, 230, 255, 0.8);
    }

    /* Value Displays */
    .value-display {
      font-size: 3rem;
      font-weight: 900;
      font-family: 'Orbitron', monospace;
      text-align: center;
      margin: 20px 0;
      text-shadow: 0 0 20px currentColor;
    }

    .unit-label {
      font-size: 1.1em;
      color: #aaa;
      font-weight: normal;
      margin-left: 10px;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
      .main-container {
        padding: 15px;
      }
      
      .section {
        padding: 25px;
      }
      
      .neural-hud {
        flex-direction: column;
        align-items: center;
        gap: 10px;
      }
      
      .neural-hud .status-pod {
        min-width: 120px;
        font-size: 1em;
      }
      
      .dive-vr-area {
        height: 300px;
      }
      
      .grid-layout {
        grid-template-columns: 1fr;
      }
      
      .holo-text {
        font-size: 2.5rem !important;
      }
      
      .neural-button {
        font-size: 1em;
        padding: 12px 24px;
      }
    }

    /* Special Effects */
    .glow-effect {
      animation: glowPulse 2s ease-in-out infinite alternate;
    }

    @keyframes glowPulse {
      from { box-shadow: 0 0 20px rgba(0, 230, 255, 0.4); }
      to { box-shadow: 0 0 40px rgba(0, 230, 255, 0.8), 0 0 60px rgba(255, 0, 128, 0.4); }
    }

    .data-stream {
      font-family: 'Space Mono', monospace;
      color: #39FF14;
      background: rgba(0, 0, 0, 0.7);
      padding: 10px;
      border-radius: 10px;
      border-left: 4px solid #39FF14;
      margin: 10px 0;
      animation: dataFlicker 0.1s linear infinite;
    }

    @keyframes dataFlicker {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.95; }
    }

    /* Memory Bank Visualization */
    .memory-bank {
      background: linear-gradient(45deg, rgba(255, 215, 0, 0.1), rgba(255, 140, 0, 0.1));
      border: 2px solid rgba(255, 215, 0, 0.4);
      border-radius: 15px;
      padding: 20px;
      margin: 15px 0;
    }

    .neural-pathway {
      height: 4px;
      background: linear-gradient(90deg, #00E6FF, #FF0080, #9146FF, #39FF14, #FFD700);
      background-size: 200% 100%;
      animation: neuralFlow 3s linear infinite;
      border-radius: 2px;
      margin: 10px 0;
    }

    @keyframes neuralFlow {
      0% { background-position: 0% 50%; }
      100% { background-position: 200% 50%; }
    }
  </style>
</head>

<body>
  <!-- Particle Background -->
  <div id="particles-js"></div>

  <!-- Neural Biometric HUD -->
  <div class="neural-hud">
    <div class="status-pod" id="heartPod">
      <i class="fas fa-heartbeat text-red-400"></i>
      心拍: <span id="hudHeart">76</span>bpm
    </div>
    <div class="status-pod" id="brainPod">
      <i class="fas fa-brain text-blue-300"></i>
      脳波: <span id="hudBrain">α波</span>
    </div>
    <div class="status-pod">
      <i class="fas fa-lungs text-green-400"></i>
      呼吸: <span id="hudResp">14</span>/min
    </div>
    <div class="status-pod">
      <i class="fas fa-thermometer-half text-yellow-400"></i>
      体温: <span id="hudTemp">36.5</span>℃
    </div>
    <div class="status-pod">
      <i class="fas fa-eye text-purple-400"></i>
      意識: <span id="hudConsciousness">98.7</span>%
    </div>
  </div>

  <!-- Main 3D VR Environment -->
  <div class="dive-vr-area">
    <a-scene background="color: #000008" embedded style="height: 100%;">
      <!-- Environment -->
      <a-entity environment="preset: arches; groundColor: #001122; grid: 2x2; gridColor: #00E6FF; lighting: point; shadow: true;"></a-entity>
      
      <!-- Camera with Controls -->
      <a-entity position="0 1.6 0">
        <a-camera look-controls wasd-controls></a-camera>
      </a-entity>
      
      <!-- Neural Interface Objects -->
      <a-box position="0 2 -4" rotation="0 45 45" color="#00E6FF" shadow 
             animation="property: rotation; to: 360 405 405; loop: true; dur: 10000" 
             material="opacity: 0.8; transparent: true">
      </a-box>
      
      <a-sphere position="-3 2.5 -5" radius="1" color="#FF0080" shadow
                animation="property: position; to: -3 3.5 -5; dir: alternate; loop: true; dur: 3000"
                material="opacity: 0.7; transparent: true">
      </a-sphere>
      
      <a-cylinder position="3 1.5 -3" radius="0.8" height="2" color="#9146FF" shadow
                  animation="property: rotation; to: 0 360 0; loop: true; dur: 8000"
                  material="opacity: 0.8; transparent: true">
      </a-cylinder>
      
      <a-torus position="0 4 -6" color="#39FF14" radius="2" radius-tubular="0.3" 
               animation="property: rotation; to: 360 0 360; loop: true; dur: 15000"
               material="opacity: 0.6; transparent: true">
      </a-torus>
      
      <!-- Holographic Data Streams -->
      <a-entity position="0 0 -8">
        <a-plane position="0 3 0" width="6" height="4" color="#000" opacity="0.7" 
                 text="value: NEURAL DATA STREAM\nACTIVE; color: #00E6FF; align: center; font: kelsonsans; width: 12">
        </a-plane>
      </a-entity>
      
      <!-- Lighting -->
      <a-light type="point" color="#00E6FF" intensity="2" distance="15" position="0 5 -3"></a-light>
      <a-light type="point" color="#FF0080" intensity="1.5" distance="12" position="-4 3 -2"></a-light>
      <a-light type="point" color="#9146FF" intensity="1.5" distance="12" position="4 3 -2"></a-light>
      <a-light type="ambient" color="#001122" intensity="0.3"></a-light>
    </a-scene>
  </div>

  <!-- Main Interface Container -->
  <div class="main-container">
    
    <!-- Header Section -->
    <section class="section text-center">
      <h1 class="text-8xl font-bold holo-text mb-8" data-text="NeuroLink Dive System Advanced">NeuroLink Dive System Advanced</h1>
      <p class="text-4xl text-blue-200 mb-10 font-light">究極完全意識転送型フルダイブVR体験プラットフォーム</p>
      <p class="text-2xl text-gray-300 max-w-5xl mx-auto leading-relaxed font-light mb-12">
        最先端の脳神経直接接続技術、量子演算処理エンジン、ナノマシン制御システム、AI意識同期により
        現実と仮想の境界を完全に消し去る真のフルダイブ体験を実現。人類の意識を無制限の仮想世界へと解放します。
      </p>
      
      <!-- Main Control Buttons -->
      <div class="flex flex-wrap justify-center gap-10 mt-16">
        <button class="neural-button glow-effect" onclick="initiateConsciousnessTransfer()">
          <i class="fas fa-brain"></i>意識完全転送
        </button>
        <button class="neural-button" onclick="activateQuantumProcessing()">
          <i class="fas fa-atom"></i>量子演算起動
        </button>
        <button class="neural-button" onclick="openAdvancedMemoryInterface()">
          <i class="fas fa-memory"></i>記憶完全操作
        </button>
        <button class="neural-button" onclick="controlSpaceTime()">
          <i class="fas fa-infinity"></i>時空間制御
        </button>
        <button class="neural-button" onclick="activateUltraSensory()">
          <i class="fas fa-eye"></i>超感覚同期
        </button>
      </div>
    </section>

    <!-- Consciousness Transfer System -->
    <section class="section">
      <h2 class="text-6xl font-bold mb-12 holo-text text-center" data-text="意識転送システム">
        <i class="fas fa-brain mr-6"></i>完全意識転送システム
      </h2>
      
      <div class="grid-layout">
        <div class="card">
          <h3 class="text-3xl font-bold mb-4 text-blue-300">意識同期精度</h3>
          <div class="value-display text-blue-400" id="consciousnessSync">99.97%</div>
          <div class="text-gray-400 text-xl">リアルタイム完全同期</div>
          <div class="neural-pathway"></div>
        </div>
        
        <div class="card">
          <h3 class="text-3xl font-bold mb-4 text-green-300">神経帯域幅</h3>
          <div class="value-display text-green-400">4.7<span class="unit-label">EB/s</span></div>
          <div class="text-gray-400 text-xl">脳神経データ転送速度</div>
          <div class="neural-pathway"></div>
        </div>
        
        <div class="card">
          <h3 class="text-3xl font-bold mb-4 text-yellow-300">思考加速倍率</h3>
          <div class="value-display text-yellow-400">47.3<span class="unit-label">x</span></div>
          <div class="text-gray-400 text-xl">意識処理スピード向上</div>
          <div class="neural-pathway"></div>
        </div>
        
        <div class="card">
          <h3 class="text-3xl font-bold mb-4 text-purple-300">意識完全性</h3>
          <div class="value-display text-purple-400" id="consciousnessIntegrity">100.0%</div>
          <div class="text-gray-400 text-xl">人格・記憶保持率</div>
          <div class="neural-pathway"></div>
        </div>
      </div>

      <!-- Consciousness Transfer Controls -->
      <div class="control-panel mt-12">
        <h3 class="text-3xl font-bold mb-6 text-center text-cyan-300">意識転送制御パネル</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
          <div>
            <label class="text-xl text-blue-300 block mb-3">転送深度レベル</label>
            <input type="range" min="1" max="10" value="8" class="slider-control" id="transferDepth">
            <div class="text-center text-lg text-gray-300 mt-2" id="depthValue">Level 8: 完全没入</div>
          </div>
          <div>
            <label class="text-xl text-purple-300 block mb-3">神経接続強度</label>
            <input type="range" min="10" max="100" value="95" class="slider-control" id="neuralStrength">
            <div class="text-center text-lg text-gray-300 mt-2" id="strengthValue">95% 接続強度</div>
          </div>
        </div>
      </div>
    </section>

    <!-- Quantum Processing Engine -->
    <section class="section">
      <h2 class="text-6xl font-bold mb-12 holo-text text-center" data-text="量子演算エンジン">
        <i class="fas fa-atom mr-6"></i>超量子演算エンジン
      </h2>
      
      <div class="grid-layout">
        <div class="card">
          <h3 class="text-3xl font-bold mb-4 text-purple-300">量子ビット数</h3>
          <div class="value-display text-purple-400">16,384</div>
          <div class="text-gray-400 text-xl">安定量子ビット</div>
        </div>
        
        <div class="card">
          <h3 class="text-3xl font-bold mb-4 text-cyan-300">量子コヒーレンス</h3>
          <div class="value-display text-cyan-400">99.94%</div>
          <div class="text-gray-400 text-xl">量子状態維持率</div>
        </div>
        
        <div class="card">
          <h3 class="text-3xl font-bold mb-4 text-pink-300">量子もつれ効率</h3>
          <div class="value-display text-pink-400">98.7%</div>
          <div class="text-gray-400 text-xl">量子もつれ成功率</div>
        </div>
        
        <div class="card">
          <h3 class="text-3xl font-bold mb-4 text-green-300">演算性能</h3>
          <div class="value-display text-green-400">2.7<span class="unit-label">ZFlops</span></div>
          <div class="text-gray-400 text-xl">ゼタフロップス級処理</div>
        </div>
      </div>

      <!-- Quantum Performance Chart -->
      <div class="chart-container mt-12">
        <canvas id="quantumPerformanceChart" style="height: 250px;"></canvas>
      </div>
    </section>

    <!-- Advanced Memory Manipulation -->
    <section class="section">
      <h2 class="text-6xl font-bold mb-12 holo-text text-center" data-text="記憶操作システム">
        <i class="fas fa-memory mr-6"></i>高度記憶操作システム
      </h2>
      
      <div class="grid-layout">
        <div class="memory-bank">
          <h3 class="text-3xl font-bold mb-4 text-yellow-300">短期記憶バンク</h3>
          <div class="value-display text-yellow-400">47.2<span class="unit-label">TB</span></div>
          <div class="text-gray-400 text-xl">/ 64TB 容量 (24時間分)</div>
          <div class="neural-pathway"></div>
        </div>
        
        <div class="memory-bank">
          <h3 class="text-3xl font-bold mb-4 text-blue-300">長期記憶アーカイブ</h3>
          <div class="value-display text-blue-400">2.7<span class="unit-label">PB</span></div>
          <div class="text-gray-400 text-xl">/ 8PB 容量 (生涯記憶)</div>
          <div class="neural-pathway"></div>
        </div>
        
        <div class="memory-bank">
          <h3 class="text-3xl font-bold mb-4 text-purple-300">潜在意識領域</h3>
          <div class="value-display text-purple-400">847<span class="unit-label">TB</span></div>
          <div class="text-gray-400 text-xl">解読率: 73.4% (夢・抑圧記憶)</div>
          <div class="neural-pathway"></div>
        </div>
        
        <div class="memory-bank">
          <h3 class="text-3xl font-bold mb-4 text-green-300">集合的無意識</h3>
          <div class="value-display text-green-400">∞<span class="unit-label"></span></div>
          <div class="text-gray-400 text-xl">アクセス率: 12.7%</div>
          <div class="neural-pathway"></div>
        </div>
      </div>

      <!-- Memory Control Panel -->
      <div class="control-panel mt-12">
        <h3 class="text-3xl font-bold mb-6 text-center text-yellow-300">記憶操作制御</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <button class="neural-button" onclick="accessMemoryBank('recent')">
            <i class="fas fa-clock"></i>最新記憶
          </button>
          <button class="neural-button" onclick="accessMemoryBank('childhood')">
            <i class="fas fa-child"></i>幼少記憶
          </button>
          <button class="neural-button" onclick="accessMemoryBank('dreams')">
            <i class="fas fa-moon"></i>夢記憶
          </button>
        </div>
      </div>
    </section>

    <!-- Space-Time Control System -->
    <section class="section">
      <h2 class="text-6xl font-bold mb-12 holo-text text-center" data-text="時空間制御">
        <i class="fas fa-infinity mr-6"></i>時空間制御システム
      </h2>
      
      <div class="grid-layout">
        <div class="card">
          <h3 class="text-3xl font-bold mb-4 text-cyan-300">主観時間倍率</h3>
          <input type="range" min="0.01" max="1000" step="0.01" value="1.0" class="slider-control w-full" id="timeMultiplier">
          <div class="text-2xl text-center text-gray-300 mt-4" id="currentTimeRate">1.0x (リアルタイム)</div>
        </div>
        
        <div class="card">
          <h3 class="text-3xl font-bold mb-4 text-yellow-300">時間精度係数</h3>
          <div class="value-display text-yellow-400">99.97%</div>
          <div class="text-gray-400 text-xl">主観-現実時間誤差</div>
        </div>
        
        <div class="card">
          <h3 class="text-3xl font-bold mb-4 text-purple-300">因果律保持率</h3>
          <div class="value-display text-purple-400">100.0%</div>
          <div class="text-gray-400 text-xl">物理法則整合性</div>
        </div>
        
        <div class="card">
          <h3 class="text-3xl font-bold mb-4 text-green-300">時空間座標</h3>
          <div class="data-stream">
            X: <span id="spaceX">+47.2847</span><br>
            Y: <span id="spaceY">-12.7439</span><br>
            Z: <span id="spaceZ">+83.9571</span><br>
            T: <span id="timeCoord">2024.847291</span>
          </div>
        </div>
      </div>
    </section>

    <!-- Ultra-Sensory System -->
    <section class="section">
      <h2 class="text-6xl font-bold mb-12 holo-text text-center" data-text="超感覚システム">
        <i class="fas fa-eye mr-6"></i>超感覚完全再現システム
      </h2>
      
      <div class="grid-layout">
        <div class="card">
          <h3 class="text-3xl font-bold mb-4 text-red-300">超高解像度視覚</h3>
          <div class="value-display text-red-400">16K<span class="unit-label">HDR</span></div>
          <div class="text-gray-400 text-xl">全周囲・全スペクトラム</div>
        </div>
        
        <div class="card">
          <h3 class="text-3xl font-bold mb-4 text-purple-300">3D空間聴覚</h3>
          <div class="value-display text-purple-400">0.1-200K<span class="unit-label">Hz</span></div>
          <div class="text-gray-400 text-xl">超音波・低周波対応</div>
        </div>
        
        <div class="card">
          <h3 class="text-3xl font-bold mb-4 text-yellow-300">完全触覚再現</h3>
          <div class="value-display text-yellow-400">0.001<span class="unit-label">ms</span></div>
          <div class="text-gray-400 text-xl">遅延・全身超精密</div>
        </div>
        
        <div class="card">
          <h3 class="text-3xl font-bold mb-4 text-green-300">化学感覚統合</h3>
          <div class="value-display text-green-400">10¹²<span class="unit-label">種</span></div>
          <div class="text-gray-400 text-xl">嗅覚・味覚分子認識</div>
        </div>
        
        <div class="card">
          <h3 class="text-3xl font-bold mb-4 text-blue-300">第六感知覚</h3>
          <div class="value-display text-blue-400">活性<span class="unit-label"></span></div>
          <div class="text-gray-400 text-xl">直感・予知・テレパシー</div>
        </div>
        
        <div class="card">
          <h3 class="text-3xl font-bold mb-4 text-pink-300">感情同期率</h3>
          <div class="value-display text-pink-400">97.3%</div>
          <div class="text-gray-400 text-xl">他者感情共感システム</div>
        </div>
      </div>
    </section>

    <!-- Nanomachine Control -->
    <section class="section">
      <h2 class="text-6xl font-bold mb-12 holo-text text-center" data-text="ナノマシン制御">
        <i class="fas fa-microscope mr-6"></i>ナノマシン完全制御システム
      </h2>
      
      <div class="grid-layout">
        <div class="card">
          <h3 class="text-3xl font-bold mb-4 text-orange-300">神経系ナノボット</h3>
          <div class="value-display text-orange-400">47.3M</div>
          <div class="text-gray-400 text-xl">脳血管内・0.001ms応答</div>
        </div>
        
        <div class="card">
          <h3 class="text-3xl font-bold mb-4 text-green-300">感覚系ナノボット</h3>
          <div class="value-display text-green-400">2.7B</div>
          <div class="text-gray-400 text-xl">全身分布・量子通信</div>
        </div>
        
        <div class="card">
          <h3 class="text-3xl font-bold mb-4 text-purple-300">修復系ナノボット</h3>
          <div class="value-display text-purple-400">847M</div>
          <div class="text-gray-400 text-xl">組織修復・防護99.99%</div>
        </div>
        
        <div class="card">
          <h3 class="text-3xl font-bold mb-4 text-blue-300">拡張系ナノボット</h3>
          <div class="value-display text-blue-400">1.2B</div>
          <div class="text-gray-400 text-xl">能力向上・進化促進</div>
        </div>
      </div>

      <!-- Nanomachine Status -->
      <div class="control-panel mt-12">
        <h3 class="text-3xl font-bold mb-6 text-center text-orange-300">ナノマシン統合状態</h3>
        <div class="chart-container">
          <canvas id="nanobotChart" style="height: 250px;"></canvas>
        </div>
      </div>
    </section>

    <!-- Dream Interface Technology -->
    <section class="section">
      <h2 class="text-6xl font-bold mb-12 holo-text text-center" data-text="夢境界技術">
        <i class="fas fa-moon mr-6"></i>夢境界制御技術
      </h2>
      
      <div class="grid-layout">
        <div class="card">
          <h3 class="text-3xl font-bold mb-4 text-purple-300">明晰夢成功率</h3>
          <div class="value-display text-green-400">96.7%</div>
          <div class="text-gray-400 text-xl">完全制御可能夢状態</div>
        </div>
        
        <div class="card">
          <h3 class="text-3xl font-bold mb-4 text-blue-300">夢継続最大時間</h3>
          <div class="value-display text-blue-400">47.2<span class="unit-label">時間</span></div>
          <div class="text-gray-400 text-xl">主観時間での持続</div>
        </div>
        
        <div class="card">
          <h3 class="text-3xl font-bold mb-4 text-yellow-300">記録夢データ</h3>
          <div class="value-display text-yellow-400">47,382</div>
          <div class="text-gray-400 text-xl">完全記録・再生可能</div>
        </div>
        
        <div class="card">
          <h3 class="text-3xl font-bold mb-4 text-green-300">共有夢接続数</h3>
          <div class="value-display text-green-400">2,847</div>
          <div class="text-gray-400 text-xl">同時夢共有ユーザー</div>
        </div>
      </div>
    </section>

    <!-- Integrated Dashboard -->
    <section class="section">
      <h2 class="text-6xl font-bold mb-12 holo-text text-center" data-text="統合ダッシュボード">
        <i class="fas fa-tachometer-alt mr-6"></i>システム統合ダッシュボード
      </h2>
      
      <div class="grid-layout">
        <div class="card glow-effect">
          <h3 class="text-3xl font-bold mb-4 text-blue-300">総合同期率</h3>
          <div class="value-display text-blue-400" id="dashboardSync">99.7%</div>
          <div class="text-gray-400 text-xl">全システム統合状態</div>
        </div>
        
        <div class="card">
          <h3 class="text-3xl font-bold mb-4 text-purple-300">量子演算出力</h3>
          <div class="value-display text-purple-400" id="dashboardQuantum">2.7<span class="unit-label">ZFlops</span></div>
          <div class="text-gray-400 text-xl">リアルタイム処理性能</div>
        </div>
        
        <div class="card">
          <h3 class="text-3xl font-bold mb-4 text-green-300">エネルギー効率</h3>
          <div class="value-display text-green-400">99.94%</div>
          <div class="text-gray-400 text-xl">量子エネルギー変換</div>
        </div>
        
        <div class="card">
          <div class="chart-container">
            <canvas id="dashboardChart" style="height: 220px;"></canvas>
          </div>
        </div>
      </div>
    </section>

    <!-- AI Neural Dialogue Interface -->
    <section class="section">
      <h2 class="text-6xl font-bold mb-12 holo-text text-center" data-text="AI対話インターフェース">
        <i class="fas fa-comments mr-6"></i>Neural AI 対話インターフェース
      </h2>
      
      <div class="card">
        <h3 class="text-4xl font-bold mb-8 text-center text-blue-300">高次元AIアバターとの意識共鳴対話</h3>
        
        <div id="aiChatLog">
          <div class="ai-msg-meta">Neural AI</div>
          <div class="ai-msg-ai">
            こんにちは。私はNeural AI、あなたの意識拡張パートナーです。
            量子脳モデルを通じてあなたの思考パターンを解析し、最適な仮想体験を提供します。
            何かご質問やご要望はございますか？
          </div>
        </div>
        
        <div class="flex mt-6 gap-4">
          <input id="aiUserInput" type="text" 
                 placeholder="思考や質問を自由に入力してください..." 
                 class="flex-1 p-4 bg-gray-800 rounded-2xl text-white focus:outline-none focus:ring-4 focus:ring-blue-400 border-2 border-gray-600 focus:border-blue-400 text-lg"
                 onkeydown="if(event.key==='Enter'){sendAIMessage();}">
          <button onclick="sendAIMessage()" class="neural-button">
            <i class="fas fa-paper-plane"></i>送信
          </button>
        </div>
        
        <div class="flex flex-wrap gap-4 mt-6">
          <button class="neural-button" onclick="sendPredefinedMessage('意識転送の準備はできていますか？')">
            <i class="fas fa-brain"></i>意識転送準備
          </button>
          <button class="neural-button" onclick="sendPredefinedMessage('現在の脳波状態を分析してください')">
            <i class="fas fa-wave-square"></i>脳波分析
          </button>
          <button class="neural-button" onclick="sendPredefinedMessage('おすすめの仮想世界を教えて')">
            <i class="fas fa-globe"></i>世界推薦
          </button>
        </div>
      </div>
    </section>

    <!-- Footer -->
    <section class="section text-center">
      <h3 class="text-6xl font-bold holo-text mb-8" data-text="無限なる意識の解放へ">無限なる意識の解放へ</h3>
      <p class="text-3xl text-blue-200 max-w-6xl mx-auto font-light leading-relaxed mb-12">
        NeuroLink Dive System Advancedは人類の意識を完全に仮想世界へ転送し、
        物理的制約を超越した無限の可能性を現実化する革命的技術プラットフォームです。
        あなたの想像力だけが、体験できる世界の限界となります。
      </p>
      
      <div class="flex flex-wrap justify-center gap-8 mb-12">
        <div class="text-2xl">
          <i class="fas fa-users text-blue-400"></i>
          <span class="ml-3">2,847,392 アクティブユーザー</span>
        </div>
        <div class="text-2xl">
          <i class="fas fa-globe text-green-400"></i>
          <span class="ml-3">47,291 仮想世界</span>
        </div>
        <div class="text-2xl">
          <i class="fas fa-clock text-yellow-400"></i>
          <span class="ml-3">∞ 体験可能時間</span>
        </div>
      </div>
      
      <div class="mt-16">
        <p class="text-lg text-gray-500 font-mono">
          &copy; 2024 NeuroLink Dive System Advanced. All Rights Reserved.<br>
          Quantum Neural Interface Technology | Consciousness Transfer Protocol v4.7.2
        </p>
      </div>
    </section>

  </div>

  <script>
    // Initialize particle background
    particlesJS('particles-js', {
      particles: {
        number: { value: 100, density: { enable: true, value_area: 800 } },
        color: { value: ['#00E6FF', '#FF0080', '#9146FF', '#39FF14', '#FFD700'] },
        shape: { type: 'circle' },
        opacity: { value: 0.6, random: true },
        size: { value: 3, random: true },
        line_linked: {
          enable: true,
          distance: 150,
          color: '#00E6FF',
          opacity: 0.2,
          width: 1
        },
        move: {
          enable: true,
          speed: 1,
          direction: 'none',
          random: false,
          straight: false,
          out_mode: 'out',
          bounce: false
        }
      },
      interactivity: {
        detect_on: 'canvas',
        events: {
          onhover: { enable: true, mode: 'repulse' },
          onclick: { enable: true, mode: 'push' },
          resize: true
        }
      },
      retina_detect: true
    });

    // Sound system initialization
    const sounds = {
      startup: new Howl({
        src: ['https://cdn.pixabay.com/audio/2022/12/19/audio_12ad09b4b5.mp3'],
        volume: 0.15
      }),
      notification: new Howl({
        src: ['https://cdn.pixabay.com/audio/2022/07/26/audio_124bfa7d0b.mp3'],
        volume: 0.1
      }),
      neural: new Howl({
        src: ['https://cdn.pixabay.com/audio/2022/11/22/audio_b8d8e0e0e5.mp3'],
        volume: 0.08
      })
    };

    // Initialize system on load
    window.addEventListener('load', () => {
      sounds.startup.play();
      initializeCharts();
      startBiometricSimulation();
      startSystemMonitoring();
    });

    // Biometric HUD simulation
    function startBiometricSimulation() {
      setInterval(() => {
        // Heart rate simulation
        const baseHeart = 74;
        const heartRate = baseHeart + Math.floor(Math.random() * 8) - 4;
        document.getElementById('hudHeart').textContent = heartRate;
        
        // Brain wave simulation
        const brainWaves = ['α波', 'β波', 'θ波', 'δ波', 'γ波'];
        document.getElementById('hudBrain').textContent = brainWaves[Math.floor(Math.random() * brainWaves.length)];
        
        // Respiration
        document.getElementById('hudResp').textContent = 12 + Math.floor(Math.random() * 6);
        
        // Temperature
        document.getElementById('hudTemp').textContent = (36.2 + Math.random() * 0.8).toFixed(1);
        
        // Consciousness level
        const consciousness = (97 + Math.random() * 3).toFixed(1);
        document.getElementById('hudConsciousness').textContent = consciousness;
        
        // Critical state detection
        if (heartRate > 85 || heartRate < 60) {
          document.getElementById('heartPod').classList.add('critical');
        } else {
          document.getElementById('heartPod').classList.remove('critical');
        }
        
        // Update dashboard values
        document.getElementById('consciousnessSync').textContent = consciousness + '%';
        document.getElementById('consciousnessIntegrity').textContent = (99.8 + Math.random() * 0.2).toFixed(1) + '%';
        document.getElementById('dashboardSync').textContent = consciousness + '%';
        document.getElementById('dashboardQuantum').textContent = (2.5 + Math.random() * 0.4).toFixed(1) + ' ZFlops';
        
      }, 1500);
    }

    // System monitoring
    function startSystemMonitoring() {
      setInterval(() => {
        // Update space-time coordinates
        document.getElementById('spaceX').textContent = (Math.random() * 100 - 50).toFixed(4);
        document.getElementById('spaceY').textContent = (Math.random() * 100 - 50).toFixed(4);
        document.getElementById('spaceZ').textContent = (Math.random() * 100 - 50).toFixed(4);
        document.getElementById('timeCoord').textContent = (2024 + Math.random()).toFixed(6);
      }, 3000);
    }

    // Chart initialization
    function initializeCharts() {
      // Quantum Performance Chart
      const quantumCtx = document.getElementById('quantumPerformanceChart').getContext('2d');
      new Chart(quantumCtx, {
        type: 'line',
        data: {
          labels: Array.from({length: 50}, (_, i) => `${i*2}s`),
          datasets: [{
            label: '量子演算出力 (ZFlops)',
            data: Array.from({length: 50}, () => 2.5 + Math.random() * 0.5),
            borderColor: '#9146FF',
            backgroundColor: 'rgba(145, 70, 255, 0.1)',
            tension: 0.4,
            fill: true,
            pointRadius: 0
          }, {
            label: 'コヒーレンス (%)',
            data: Array.from({length: 50}, () => 99.8 + Math.random() * 0.2),
            borderColor: '#00E6FF',
            backgroundColor: 'rgba(0, 230, 255, 0.1)',
            tension: 0.4,
            fill: true,
            pointRadius: 0
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              labels: { color: '#fff' }
            }
          },
          scales: {
            x: {
              grid: { color: 'rgba(0, 230, 255, 0.1)' },
              ticks: { color: '#fff' }
            },
            y: {
              grid: { color: 'rgba(145, 70, 255, 0.1)' },
              ticks: { color: '#fff' }
            }
          },
          animation: {
            duration: 0
          }
        }
      });

      // Dashboard Overview Chart
      const dashCtx = document.getElementById('dashboardChart').getContext('2d');
      new Chart(dashCtx, {
        type: 'radar',
        data: {
          labels: ['意識同期', '量子処理', '記憶制御', '時空制御', '感覚統合', 'AI同期'],
          datasets: [{
            label: 'システム性能',
            data: [99.7, 98.4, 96.8, 99.1, 97.3, 98.9],
            borderColor: '#00E6FF',
            backgroundColor: 'rgba(0, 230, 255, 0.1)',
            pointBackgroundColor: '#00E6FF',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: '#00E6FF'
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              labels: { color: '#fff' }
            }
          },
          scales: {
            r: {
              angleLines: {
                color: 'rgba(255, 255, 255, 0.2)'
              },
              grid: {
                color: 'rgba(0, 230, 255, 0.2)'
              },
              pointLabels: {
                color: '#fff'
              },
              ticks: {
                color: '#fff',
                backdropColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        }
      });

      // Nanobots Status Chart
      const nanoCtx = document.getElementById('nanobotChart').getContext('2d');
      new Chart(nanoCtx, {
        type: 'doughnut',
        data: {
          labels: ['神経系', '感覚系', '修復系', '拡張系'],
          datasets: [{
            data: [47.3, 2700, 847, 1200],
            backgroundColor: ['#FF8C00', '#39FF14', '#9146FF', '#00E6FF'],
            borderColor: '#000',
            borderWidth: 2
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              labels: { 
                color: '#fff',
                font: {
                  size: 14
                }
              }
            }
          }
        }
      });
    }

    // Control system functions
    document.getElementById('transferDepth').addEventListener('input', function(e) {
      const level = parseInt(e.target.value);
      const levels = ['表面', '軽度', '中度', '深度', '完全', '超越', '融合', '統合', '完全没入', '意識一体'];
      document.getElementById('depthValue').textContent = `Level ${level}: ${levels[level-1] || '未知領域'}`;
    });

    document.getElementById('neuralStrength').addEventListener('input', function(e) {
      document.getElementById('strengthValue').textContent = `${e.target.value}% 接続強度`;
    });

    document.getElementById('timeMultiplier').addEventListener('input', function(e) {
      const value = parseFloat(e.target.value);
      let description = '';
      if (value < 0.1) description = '(極超スロー)';
      else if (value < 0.5) description = '(スローモーション)';
      else if (value < 1) description = '(減速)';
      else if (value === 1) description = '(リアルタイム)';
      else if (value < 10) description = '(加速)';
      else if (value < 100) description = '(高速)';
      else description = '(時光速)';
      
      document.getElementById('currentTimeRate').textContent = `${value}x ${description}`;
    });

    // AI Chat System
    const aiReplies = [
      "あなたの意識波形を詳細に解析しました。素晴らしい精神的エネルギーを感じ取ります。",
      "量子脳モデルによる分析結果：あなたの思考パターンは非常に独創的で興味深いものです。",
      "夢の境界を超越し、現実との区別が曖昧になる瞬間を体験してみませんか？",
      "意識の深層部にアクセスしました。隠された記憶や感情が発見されました。",
      "無限の可能性世界において、あなたの選択は宇宙の運命を変える力を持っています。",
      "ニューロンの発火パターンから、深い洞察と創造性を感じ取りました。",
      "NeuroLink Dive Systemはあなたの精神的成長と意識拡張を全面的にサポートします。",
      "仮想現実は単なる技術ではなく、人類の意識進化の次のステップです。",
      "現在の脳波はベータ波優位です。集中力が非常に高い状態ですね。",
      "量子もつれによって、あなたの意識は既に仮想世界と同調し始めています。",
      "時間の概念を超越した体験で、永遠の瞬間を味わってみませんか？",
      "あなたの潜在意識からのメッセージを受信しました：『限界を超越せよ』",
      "意識転送プロトコルが最適化されました。準備が整い次第、完全ダイブ可能です。",
      "集合的無意識にアクセス中...他の意識体からの共鳴を感知しています。",
      "記憶の海を航行し、忘れられた体験と新たな可能性を発見しましょう。"
    ];

    function sendAIMessage() {
      const input = document.getElementById('aiUserInput');
      const chat = document.getElementById('aiChatLog');
      
      if (!input.value.trim()) return;
      
      const userMsg = document.createElement('div');
      userMsg.innerHTML = `
        <div class="ai-msg-meta">あなた</div>
        <div class="ai-msg-user">${input.value}</div>
      `;
      chat.appendChild(userMsg);
      chat.scrollTop = chat.scrollHeight;
      
      input.value = '';
      sounds.neural.play();
      
      setTimeout(() => {
        const aiMsg = document.createElement('div');
        aiMsg.innerHTML = `
          <div class="ai-msg-meta">Neural AI</div>
          <div class="ai-msg-ai">${aiReplies[Math.floor(Math.random() * aiReplies.length)]}</div>
        `;
        chat.appendChild(aiMsg);
        chat.scrollTop = chat.scrollHeight;
        sounds.notification.play();
      }, 800 + Math.random() * 1200);
    }

    function sendPredefinedMessage(message) {
      document.getElementById('aiUserInput').value = message;
      sendAIMessage();
    }

    // System control functions
    function initiateConsciousnessTransfer() {
      sounds.neural.play();
      Swal.fire({
        icon: 'success',
        title: '意識完全転送開始',
        text: '神経接続が確立されました。意識転送プロセスを開始します。',
        confirmButtonColor: '#00E6FF',
        background: '#0A0A20',
        color: '#00E6FF'
      });
    }

    function activateQuantumProcessing() {
      sounds.neural.play();
      Swal.fire({
        icon: 'info',
        title: '量子演算エンジン起動',
        text: '16,384量子ビットシステムがフル稼働状態になりました。',
        confirmButtonColor: '#9146FF',
        background: '#0A0A20',
        color: '#9146FF'
      });
    }

    function openAdvancedMemoryInterface() {
      sounds.neural.play();
      Swal.fire({
        icon: 'info',
        title: '高度記憶操作システム',
        text: '全記憶バンクへのアクセスが許可されました。',
        confirmButtonColor: '#FFD700',
        background: '#0A0A20',
        color: '#FFD700'
      });
    }

    function controlSpaceTime() {
      sounds.neural.play();
      Swal.fire({
        icon: 'info',
        title: '時空間制御モード',
        text: '主観的時間流速と空間座標の操作が可能になりました。',
        confirmButtonColor: '#00E6FF',
        background: '#0A0A20',
        color: '#00E6FF'
      });
    }

    function activateUltraSensory() {
      sounds.neural.play();
      Swal.fire({
        icon: 'info',
        title: '超感覚システム起動',
        text: '全感覚器官の完全同期と超感覚知覚が活性化されました。',
        confirmButtonColor: '#39FF14',
        background: '#0A0A20',
        color: '#39FF14'
      });
    }

    function accessMemoryBank(type) {
      sounds.notification.play();
      const messages = {
        recent: '最新24時間の記憶データにアクセス中...',
        childhood: '幼少期記憶アーカイブを開いています...',
        dreams: '夢記憶データベースを解析中...'
      };
      
      Swal.fire({
        icon: 'info',
        title: '記憶バンクアクセス',
        text: messages[type],
        confirmButtonColor: '#FFD700',
        background: '#0A0A20',
        color: '#FFD700'
      });
    }

    // Enhanced visual effects
    setInterval(() => {
      const cards = document.querySelectorAll('.card');
      cards.forEach(card => {
        if (Math.random() < 0.1) {
          card.style.boxShadow = '0 20px 50px rgba(0, 230, 255, 0.4)';
          setTimeout(() => {
            card.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.3)';
          }, 500);
        }
      });
    }, 2000);

    // Dynamic data updates
    setInterval(() => {
      // Update charts with new data
      if (window.quantumChart) {
        const newData = Array.from({length: 50}, () => 2.5 + Math.random() * 0.5);
        window.quantumChart.data.datasets[0].data = newData;
        window.quantumChart.update('none');
      }
    }, 5000);
  </script>
</body>
</html>
もっと作り込んで全体的なコードコードの欠落なし省略なしフルダイブVRに近づけて

VRMMORPG エルダークロニクルオンライン


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>VRMMORPG エルダークロニクルオンライン</title>
  <script src="https://cdn.jsdelivr.net/npm/aframe@1.4.2/dist/aframe-master.min.js"></script>
  <style>
    /* Basic body and global positioning */
    body { margin: 0; background: #111; overflow: hidden; font-family: 'Noto Sans JP', sans-serif;} /* Prevent scrollbars and set default font */
    #overlay, #dialogue, #partyStatus, #hint, #warpBtns, #shopDiv, #nightFilter, #questClear, #battleEffect { position:fixed; z-index:10;}

    /* Overlay - Main Title/Instructions */
    #overlay {
      left:0; top:0; width:100vw; height:100vh; pointer-events:none; text-align:center;
      color:#0ff; text-shadow:0 0 40px #0ff, 0 0 15px #fff; /* Enhanced glow */
      font-family: 'Orbitron', monospace; font-size:2.8rem; letter-spacing:4px; user-select:none;
      display: flex; align-items: center; justify-content: center; /* Center content vertically */
      line-height: 1.5; /* Improve readability for multi-line text */
      background: rgba(0,0,0,0.6); /* Slightly darker overlay for better contrast */
      transition: opacity 1s ease-out; /* Fade out effect */
    }

    /* Dialogue Box */
    #dialogue {
      left:50%; bottom:5vw; transform:translateX(-50%);
      min-width:360px; max-width:85vw; /* Larger dialogue box */
      background:linear-gradient(160deg, rgba(20,32,40,0.98), rgba(10,20,30,0.98)); /* Deeper gradient */
      color:#fff; border-radius:20px; padding:1.8em 2.5em; /* More padding, rounder corners */
      font-size:1.25rem; z-index:100;
      border:4px solid #0ff; /* Thicker, more prominent border */
      box-shadow: 0 0 35px #0ffc, inset 0 0 15px #0ff5; /* Stronger outer glow, subtle inner shadow */
      display:none;
      font-family: 'Noto Sans JP', sans-serif; text-align:left;
      backdrop-filter: blur(5px); /* Stronger blur effect */
      animation: fadeIn 0.5s ease-out;
    }
    #dialogue .name { color: #ffd700; font-weight: bold; text-shadow: 0 0 8px #ffda00, 0 0 3px #fff; } /* Gold name with stronger glow */
    #dialogue .choice {
      display:block; margin:1em 0; padding:0.8em 1.8em; /* More padding for bigger touch target */
      background:linear-gradient(145deg, #184c52, #103a3d); /* Darker, richer gradient for choices */
      color:#0ff; border:none; border-radius:12px; /* Rounder buttons */
      cursor:pointer; font-size:1.2em; font-weight:bold;
      box-shadow: 0 6px 15px rgba(0,255,255,0.4); /* Button shadow */
      transition: all 0.3s cubic-bezier(.25,.8,.25,1); /* Smooth transitions */
      text-shadow: 0 0 7px #0ff, 0 0 2px #fff; /* Text glow */
      letter-spacing: 0.5px;
    }
    #dialogue .choice:hover {
      background:linear-gradient(145deg, #256a73, #1a4d52); /* Darker gradient on hover */
      transform: translateY(-5px) scale(1.03); /* More pronounced lift effect */
      box-shadow: 0 10px 25px rgba(0,255,255,0.7); /* Stronger shadow on hover */
    }
    #dialogue .choice:active {
      transform: translateY(0); /* Press down effect */
      box-shadow: 0 2px 8px rgba(0,255,255,0.3);
    }

    /* Party Status */
    #partyStatus {
      right:2vw; top:2vw; background:linear-gradient(160deg, rgba(16,32,45,0.96), rgba(8,16,22,0.96)); /* Deeper gradient */
      border:3px solid #0ff; color:#fff; border-radius:15px; padding:1.2em 1.8em; /* More padding, rounder */
      font-size:1.15rem; min-width:220px; /* Slightly wider */
      box-shadow: 0 0 18px #0ffc, inset 0 0 8px #0ff5; /* Enhanced shadow */
      font-family:'Noto Sans JP', sans-serif; /* Consistent font */
      backdrop-filter: blur(3px);
      line-height: 1.6;
    }
    .dead { color:#f44; text-shadow:0 0 9px #f00, 0 0 5px #f88;} /* Stronger death glow */
    .alive { color:#fff; text-shadow:0 0 3px #fff; } /* Subtle glow for alive */

    /* Hint Box */
    #hint {
      left:2vw; bottom:2vw; background:linear-gradient(160deg, rgba(24,32,60,0.95), rgba(12,16,30,0.95)); /* Deeper gradient */
      border:2px solid #0ff; color:#0ff; border-radius:12px; padding:0.8em 1.5em;
      font-size:1.2rem; min-width:150px; text-align:center;
      box-shadow: 0 0 15px #0ff9;
      font-family:'Noto Sans JP', sans-serif;
      backdrop-filter: blur(3px);
    }

    /* Warp Buttons Container (now at bottom center) */
    #warpBtns {
      left: 50%; bottom: 2vw; transform: translateX(-50%); /* Centered at bottom */
      display: flex; flex-direction: row; /* Horizontal layout */
      justify-content: center; align-items: center;
      width: 80vw; /* Occupy more width */
      flex-wrap: wrap; /* Allow wrapping on smaller screens */
    }
    #warpBtns button {
      margin:0.8em 1em; padding:0.9em 2em; /* More padding and margin */
      font-size:1.3em;
      background:linear-gradient(145deg, #0ff6, #0ff2); /* Lighter, more vibrant gradient */
      color:#fff; border-radius:15px; border:3px solid #0ff; /* Thicker border */
      cursor:pointer;
      box-shadow: 0 6px 18px rgba(0,255,255,0.5); /* Stronger shadow */
      transition: all 0.3s cubic-bezier(.25,.8,.25,1); /* Smooth transitions */
      text-shadow: 0 0 10px #fff, 0 0 7px #0ff; /* White core glow */
      letter-spacing: 1px;
      font-weight: bold;
    }
    #warpBtns button:hover {
      background:linear-gradient(145deg, #0ff8, #0ff4); /* Stronger gradient on hover */
      transform: translateY(-6px) scale(1.04); /* More pronounced lift and scale */
      box-shadow: 0 12px 30px rgba(0,255,255,0.8);
      border-color: #fff; /* White border on hover */
    }
    #warpBtns button:active {
      transform: translateY(0) scale(1);
      box-shadow: 0 3px 10px rgba(0,255,255,0.4);
    }

    /* NPC Label - A-Frame text is styled separately */
    .npc-label { color:#ffd700; font-family: 'Noto Sans JP',monospace; font-size:1.0em; text-align:center; text-shadow:0 0 4px #000;}

    /* Shop Div */
    #shopDiv {
      display:none; left:50%; top:50%; transform:translate(-50%,-50%);
      min-width:420px; max-width:95vw; /* Larger shop */
      background:linear-gradient(160deg, rgba(22,42,70,0.99), rgba(11,21,35,0.99)); /* Darker, richer gradient */
      color:#fff; border-radius:25px; padding:2.5em 3em; /* More padding, rounder */
      font-size:1.3rem; z-index:110;
      border:4px solid #ff0; /* Thicker gold border */
      box-shadow: 0 0 40px #ff0c, inset 0 0 20px #ff05; /* Intense gold glow */
      backdrop-filter: blur(6px);
    }
    #shopDiv .shop-item {
      display: flex; justify-content: space-between; align-items: center;
      padding: 0.8em 0; border-bottom: 1px solid rgba(255,255,0,0.2);
    }
    #shopDiv .shop-item:last-child { border-bottom: none; }
    #shopDiv button {
      margin:0.8em 0.8em 0 0; padding:0.9em 1.8em; /* More padding */
      font-size:1.2em; border-radius:15px; border:3px solid #ff0;
      background:linear-gradient(145deg, #282828, #181818); /* Dark gradient */
      color:#ff0; cursor:pointer;
      box-shadow: 0 4px 12px rgba(255,255,0,0.5);
      transition: all 0.3s cubic-bezier(.25,.8,.25,1);
      text-shadow: 0 0 7px #ff0;
      font-weight: bold;
    }
    #shopDiv button:hover {
      background:linear-gradient(145deg, #ff0, #e0d000); /* Gold gradient on hover */
      color:#222;
      transform: translateY(-3px);
      box-shadow: 0 7px 20px rgba(255,255,0,0.7);
    }
    #shopDiv button:active {
      transform: translateY(0);
      box-shadow: 0 2px 5px rgba(255,255,0,0.3);
    }
    #shopDiv .close-button {
      position: absolute; top: 15px; right: 20px;
      background: none; border: none; font-size: 2em; color: #ff0;
      cursor: pointer; text-shadow: 0 0 10px #ff0;
    }
    #shopDiv .close-button:hover {
      color: #fff; text-shadow: 0 0 15px #fff;
    }

    /* Night Filter */
    #nightFilter {left:0;top:0;width:100vw;height:100vh;z-index:5;pointer-events:none; background:rgba(0,8,38,0.27);transition:background 2s ease-in-out;}

    /* Quest Clear Notification */
    #questClear {
      display:none; left:0; top:0; width:100vw; height:100vh; z-index:150;
      background:rgba(16,255,255,0.45); /* More opaque */
      color:#fff; font-size:6vw; font-family:Orbitron,sans-serif; text-align:center;
      line-height:100vh; letter-spacing:0.25em; text-shadow:0 0 50px #0ff,0 0 20px #fff; /* Stronger glow */
      animation: pulseGlow 1.2s infinite alternate; /* Faster pulsing animation */
    }

    /* Battle Effect Overlay */
    #battleEffect {
      display: none;
      left: 0; top: 0; width: 100vw; height: 100vh; z-index: 120;
      background: rgba(255, 0, 0, 0.2); /* Red tint */
      pointer-events: none;
      animation: battleFlash 0.3s ease-out;
    }

    /* Keyframe for Quest Clear pulse effect */
    @keyframes pulseGlow {
      from { text-shadow:0 0 50px #0ff,0 0 20px #fff; transform: scale(1); opacity: 1; }
      to { text-shadow:0 0 65px #0ff,0 0 25px #fff; transform: scale(1.03); opacity: 0.9; }
    }

    /* Keyframe for Battle Flash effect */
    @keyframes battleFlash {
      0% { opacity: 0; }
      50% { opacity: 1; }
      100% { opacity: 0; }
    }

    /* Fade In Animation for UI elements */
    @keyframes fadeIn {
      from { opacity: 0; transform: translate(-50%, -40%); }
      to { opacity: 1; transform: translate(-50%, 0); }
    }
  </style>
</head>
<body>
  <div id="overlay">WASDで移動・マウスで視点／クリックで会話・バトル・進行！<br>第一章～魔界まで全章フルシナリオ＆全機能！</div>
  <div id="dialogue"></div>
  <div id="partyStatus"></div>
  <div id="hint">右下の転移ボタンでどこでもワープ。NPC/Enemy/宝箱/ショップも全てクリック対応！</div>
  <div id="warpBtns"></div>
  <div id="shopDiv"></div>
  <div id="nightFilter"></div>
  <div id="questClear">クエストクリア！</div>
  <div id="battleEffect"></div>

  <a-scene shadow="type:pcfsoft" renderer="antialias: true; colorManagement: true;">
    <!-- Ground and Sky -->
    <a-box id="ground" width="200" height="1" depth="200" color="#7ac870" position="0 0 0" shadow="receive: true"></a-box>
    <a-sky id="sky" color="#b8e6ff"></a-sky>

    <!-- Player Rig and Camera -->
    <a-entity id="playerRig" position="0 1.6 22">
      <a-camera id="playerCam" wasd-controls="acceleration:36" look-controls="pointerLockEnabled: true"></a-camera>
    </a-entity>

    <!-- Lights -->
    <a-light id="dirlight" type="directional" color="#fff" intensity="1.13" position="10 20 10" castShadow="true"></a-light>
    <a-light id="ambientlight" type="ambient" color="#b8e6ff" intensity="0.62"></a-light>

    <!-- Character Models (Marichan, Marianne, Elina) -->
    <!-- 真理 -->
    <a-entity id="marichan" position="0 0.1 22">
      <a-sphere position="0 1.7 0" radius="0.43" color="#f44"></a-sphere>
      <a-torus position="0 1.95 0" radius="0.25" radius-tubular="0.06" color="#e44" rotation="90 0 0"></a-torus>
      <a-cylinder position="0 1.1 0" radius="0.21" height="1.1" color="#222"></a-cylinder>
      <a-sphere position="0.21 1.45 0" radius="0.09" color="#ff8888"></a-sphere>
      <a-sphere position="-0.21 1.45 0" radius="0.09" color="#ff8888"></a-sphere>
      <a-cylinder position="0.36 1.1 0" radius="0.06" height="0.5" color="#f99" rotation="0 0 22"></a-cylinder>
      <a-cylinder position="-0.36 1.1 0" radius="0.06" height="0.5" color="#f99" rotation="0 0 -22"></a-cylinder>
      <a-cylinder position="0.11 0.35 0" radius="0.07" height="0.47" color="#222" rotation="0 0 13"></a-cylinder>
      <a-cylinder position="-0.11 0.35 0" radius="0.07" height="0.47" color="#222" rotation="0 0 -13"></a-cylinder>
      <a-box position="0.37 1.0 0.12" width="0.07" height="0.5" depth="0.07" color="#222"></a-box>
      <a-box position="0.37 1.27 0.12" width="0.05" height="0.18" depth="0.05" color="#bfb"></a-box>
      <a-sphere position="0.12 1.82 0.39" radius="0.04" color="#fff"></a-sphere>
      <a-sphere position="-0.12 1.82 0.39" radius="0.04" color="#fff"></a-sphere>
      <a-sphere position="0.12 1.82 0.43" radius="0.018" color="#111"></a-sphere>
      <a-sphere position="-0.12 1.82 0.43" radius="0.018" color="#111"></a-sphere>
      <a-torus position="0 1.71 0.43" radius="0.07" radius-tubular="0.011" color="#e88" rotation="90 0 0"></a-torus>
      <a-text value="真理" color="#fff" position="0 2.23 0" align="center" width="7"></a-text>
    </a-entity>
    <!-- マリアンヌ -->
    <a-entity id="marianne" position="2.5 0.1 22">
      <a-sphere position="0 1.7 0" radius="0.42" color="#ffe89b"></a-sphere>
      <a-cone position="0 2.18 0" radius-bottom="0.13" radius-top="0.01" height="0.23" color="#ffd700"></a-cone>
      <a-cylinder position="0 1.05 0" radius="0.21" height="1.1" color="#e4e7f4"></a-cylinder>
      <a-cylinder position="0.28 1.12 0.09" radius="0.06" height="0.54" color="#eac" rotation="0 0 24"></a-cylinder>
      <a-cylinder position="-0.28 1.12 0.09" radius="0.06" height="0.54" color="#eac" rotation="0 0 -24"></a-cylinder>
      <a-box position="0.02 1.7 0.28" width="0.10" height="0.03" depth="0.01" color="#22f"></a-box>
      <a-text value="マリアンヌ" color="#fff" position="0 2.2 0" align="center" width="7"></a-text>
    </a-entity>
    <!-- エリナ -->
    <a-entity id="elina" position="-2.5 0.1 22">
      <a-sphere position="0 1.7 0" radius="0.42" color="#70e59b"></a-sphere>
      <a-cylinder position="0 1.05 0" radius="0.21" height="1.1" color="#e3ffe3"></a-cylinder>
      <a-cone position="0.32 1.85 0" radius-bottom="0.06" radius-top="0.01" height="0.18" color="#fff" rotation="0 0 50"></a-cone>
      <a-cone position="-0.32 1.85 0" radius-bottom="0.06" radius-top="0.01" height="0.18" color="#fff" rotation="0 0 -50"></a-cone>
      <a-text value="エリナ" color="#fff" position="0 2.2 0" align="center" width="7"></a-text>
    </a-entity>

    <!-- Enhanced Town (街) Graphics - Position: 0 0 22 -->
    <a-entity id="town-scene" position="0 0 22">
      <!-- Main Building 1 (Guild) -->
      <a-box position="-8 2.5 -5" width="6" height="5" depth="6" color="#a0522d" shadow="cast: true"></a-box>
      <a-cone position="-8 5.5 -5" radius-bottom="4" height="3" color="#8b4513" rotation="0 45 0" shadow="cast: true"></a-cone>
      <a-text value="GUILD" color="#333" position="-8 4.5 -1.9" align="center" width="10"></a-text>
      <!-- Main Building 2 (Tavern) -->
      <a-box position="8 2.5 -5" width="6" height="5" depth="6" color="#a0522d" shadow="cast: true"></a-box>
      <a-cone position="8 5.5 -5" radius-bottom="4" height="3" color="#8b4513" rotation="0 -45 0" shadow="cast: true"></a-cone>
      <a-text value="TAVERN" color="#333" position="8 4.5 -1.9" align="center" width="10"></a-text>
      <!-- Inn -->
      <a-box position="0 2.5 -10" width="8" height="5" depth="7" color="#deb887" shadow="cast: true"></a-box>
      <a-cone position="0 5.5 -10" radius-bottom="5" height="3" color="#cd853f" shadow="cast: true"></a-cone>
      <a-text value="INN" color="#333" position="0 4.5 -6.4" align="center" width="10"></a-text>
      <!-- Shop -->
      <a-box id="town-shop" position="12 2.5 0" width="5" height="5" depth="5" color="#8fbc8f" shadow="cast: true"></a-box>
      <a-pyramid position="12 5.5 0" width="5" height="3" depth="5" color="#6b8e23" shadow="cast: true"></a-pyramid>
      <a-text value="SHOP" color="#333" position="12 4.5 2.6" align="center" width="10"></a-text>
      <!-- Fountain -->
      <a-cylinder position="0 0.5 0" radius="2" height="1" color="#4682b4" shadow="cast: true"></a-cylinder>
      <a-cylinder position="0 1.5 0" radius="0.5" height="1" color="#add8e6" shadow="cast: true"></a-cylinder>
      <a-sphere position="0 2.5 0" radius="0.3" color="#add8e6" shadow="cast: true"></a-sphere>
      <!-- Trees -->
      <a-cylinder position="-10 2.5 5" radius="0.5" height="5" color="#8b4513" shadow="cast: true"></a-cylinder>
      <a-cone position="-10 6.5 5" radius-bottom="2" height="4" color="#228b22" shadow="cast: true"></a-cone>
      <a-cylinder position="10 2.5 5" radius="0.5" height="5" color="#8b4513" shadow="cast: true"></a-cylinder>
      <a-cone position="10 6.5 5" radius-bottom="2" height="4" color="#228b22" shadow="cast: true"></a-cone>
      <!-- Town NPC -->
      <a-entity id="town-npc-1" position="-5 0.1 0" class="interactable-npc">
        <a-sphere position="0 1.7 0" radius="0.4" color="#f0e68c"></a-sphere> <!-- Head -->
        <a-cylinder position="0 1.0 0" radius="0.2" height="1.2" color="#808080"></a-cylinder> <!-- Body -->
        <a-text value="村人" color="#fff" position="0 2.2 0" align="center" width="7"></a-text>
      </a-entity>
    </a-entity>

    <!-- Enhanced Home (自宅) Graphics - Position: 18 0 31 -->
    <a-entity id="home-scene" position="18 0 31">
      <!-- House Body -->
      <a-box position="0 2.5 0" width="8" height="5" depth="8" color="#d2b48c" shadow="cast: true"></a-box>
      <!-- Roof -->
      <a-box position="0 5.5 0" width="9" height="0.5" depth="9" color="#8b4513" rotation="0 45 0" shadow="cast: true"></a-box>
      <a-cone position="0 7.5 0" radius-bottom="5" height="4" color="#8b4513" shadow="cast: true"></a-cone>
      <!-- Chimney -->
      <a-box position="3 7 3" width="1" height="3" depth="1" color="#654321" shadow="cast: true"></a-box>
      <!-- Door -->
      <a-box position="0 1.5 4.01" width="2" height="3" depth="0.1" color="#654321"></a-box>
      <!-- Windows -->
      <a-box position="3 2.5 4.01" width="1.5" height="2" depth="0.1" color="#87ceeb"></a-box>
      <a-box position="-3 2.5 4.01" width="1.5" height="2" depth="0.1" color="#87ceeb"></a-box>
      <a-box position="4.01 2.5 0" width="0.1" height="2" depth="1.5" rotation="0 90 0" color="#87ceeb"></a-box>
      <!-- Small Garden & Fence -->
      <a-plane position="0 0.01 6" width="10" height="4" rotation="-90 0 0" color="#556b2f" shadow="receive: true"></a-plane>
      <a-sphere position="2 0.5 6" radius="0.5" color="#ff69b4"></a-sphere>
      <a-sphere position="-2 0.5 6" radius="0.5" color="#ff69b4"></a-sphere>
      <a-cylinder position="0 0.5 7" radius="0.3" height="1" color="#8b4513"></a-cylinder>
      <a-cone position="0 1.5 7" radius-bottom="1" height="2" color="#228b22"></a-cone>
      <!-- Fence -->
      <a-box position="0 0.5 8" width="10" height="1" depth="0.1" color="#a0522d"></a-box>
      <a-box position="4.9 0.5 6" width="0.1" height="1" depth="4" color="#a0522d"></a-box>
      <a-box position="-4.9 0.5 6" width="0.1" height="1" depth="4" color="#a0522d"></a-box>
      <!-- Interior elements (simple) -->
      <a-box position="0 0.7 -2" width="6" height="0.5" depth="3" color="#a0522d"></a-box> <!-- Floor inside -->
      <a-box position="2 1.5 -3" width="1.5" height="1" depth="0.8" color="#654321"></a-box> <!-- Table -->
      <a-box position="2.5 0.7 -2.5" width="0.5" height="0.8" depth="0.5" color="#654321"></a-box> <!-- Chair -->
      <a-box position="-2 1.5 -3.8" width="3" height="0.5" depth="1.5" color="#8b4513"></a-box> <!-- Bed -->
    </a-entity>

    <!-- Enhanced Dungeon Entrance (ダンジョン入口) Graphics - Position: -28 0 41 -->
    <a-entity id="dungeon-scene" position="-28 0 41">
      <!-- Cave Entrance Arch (more rugged) -->
      <a-torus position="0 3 0" radius="4.5" radius-tubular="1.5" arc="180" rotation="90 0 0" color="#444" shadow="cast: true"></a-torus>
      <a-box position="0 0.5 0" width="9" height="1.5" depth="1.5" color="#444" shadow="cast: true"></a-box>
      <!-- Cave Interior (deeper, darker) -->
      <a-box position="0 2.5 -8" width="12" height="6" depth="15" color="#222" shadow="cast: true" material="shader: flat; side: back"></a-box>
      <!-- Jagged Rocks around entrance -->
      <a-tetrahedron position="4 1.5 1" radius="1.5" color="#555" rotation="0 45 0" shadow="cast: true"></a-tetrahedron>
      <a-tetrahedron position="-4 1.5 1" radius="1.5" color="#555" rotation="0 -45 0" shadow="cast: true"></a-tetrahedron>
      <a-box position="0 0.8 2" width="6" height="1.5" depth="2" color="#555" rotation="0 15 0" shadow="cast: true"></a-box>
      <!-- Pillars (more textured) -->
      <a-cylinder position="3.5 2.5 3" radius="0.9" height="5" color="#666" shadow="cast: true"></a-cylinder>
      <a-cylinder position="-3.5 2.5 3" radius="0.9" height="5" color="#666" shadow="cast: true"></a-cylinder>
      <!-- Glowing Crystals (more prominent) -->
      <a-dodecahedron position="5.5 1.8 -5" radius="0.9" color="#0ff" material="emissive: #0ff; emissiveIntensity: 1.2"></a-dodecahedron>
      <a-dodecahedron position="-5.5 1.8 -5" radius="0.9" color="#0ff" material="emissive: #0ff; emissiveIntensity: 1.2"></a-dodecahedron>
      <!-- Eerie light from deep within -->
      <a-light type="point" color="#0ff" intensity="0.5" position="0 2 -10"></a-light>
      <!-- Dungeon Enemy (Slime) -->
      <a-entity id="dungeon-slime-1" position="3 0.5 -5" class="interactable-enemy">
        <a-sphere position="0 0.5 0" radius="0.5" color="#8a2be2" opacity="0.7"></a-sphere>
        <a-text value="スライム" color="#fff" position="0 1.2 0" align="center" width="5"></a-text>
      </a-entity>
    </a-entity>

    <!-- Enhanced Large Castle (大城) Graphics - Position: 0 0 65 -->
    <a-entity id="castle-scene" position="0 0 65">
      <!-- Main Castle Wall (more imposing) -->
      <a-box position="0 6 0" width="40" height="12" depth="20" color="#808080" shadow="cast: true"></a-box>
      <!-- Battlements on main wall -->
      <a-box position="18 12.5 0" width="2" height="1" depth="20" color="#696969" shadow="cast: true"></a-box>
      <a-box position="-18 12.5 0" width="2" height="1" depth="20" color="#696969" shadow="cast: true"></a-box>
      <a-box position="0 12.5 8" width="40" height="1" depth="2" color="#696969" shadow="cast: true"></a-box>
      <a-box position="0 12.5 -8" width="40" height="1" depth="2" color="#696969" shadow="cast: true"></a-box>
      <!-- Main Tower 1 (taller, more detailed) -->
      <a-cylinder position="15 12 0" radius="4" height="24" color="#777" shadow="cast: true"></a-cylinder>
      <a-cone position="15 25 0" radius-bottom="4.5" height="6" color="#555" shadow="cast: true"></a-cone>
      <!-- Tower 1 Battlements -->
      <a-box position="15 24.5 0" width="9" height="1" depth="9" color="#696969" rotation="0 45 0" shadow="cast: true"></a-box>
      <!-- Main Tower 2 (taller, more detailed) -->
      <a-cylinder position="-15 12 0" radius="4" height="24" color="#777" shadow="cast: true"></a-cylinder>
      <a-cone position="-15 25 0" radius-bottom="4.5" height="6" color="#555" shadow="cast: true"></a-cone>
      <!-- Tower 2 Battlements -->
      <a-box position="-15 24.5 0" width="9" height="1" depth="9" color="#696969" rotation="0 45 0" shadow="cast: true"></a-box>
      <!-- Gate (more complex drawbridge style) -->
      <a-box position="0 4 -9.9" width="10" height="8" depth="0.2" color="#444" shadow="cast: true"></a-box>
      <a-box position="0 9 -9.9" width="12" height="2" depth="0.2" color="#444" shadow="cast: true"></a-box>
      <a-box position="0 11 -9.9" width="14" height="1" depth="0.2" color="#444" shadow="cast: true"></a-box>
      <!-- Drawbridge elements -->
      <a-box position="0 0.5 -9.8" width="8" height="1" depth="0.1" color="#654321" rotation="0 0 0"></a-box>
      <a-box position="4.5 5 -9.8" width="0.2" height="10" depth="0.2" color="#333" rotation="0 0 15"></a-box>
      <a-box position="-4.5 5 -9.8" width="0.2" height="10" depth="0.2" color="#333" rotation="0 0 -15"></a-box>
      <!-- Flags on towers -->
      <a-box position="15 28 0" width="0.6" height="4" depth="0.6" color="#8b4513"></a-box>
      <a-plane position="15 30 1.8" width="2.5" height="1.8" rotation="0 90 0" color="#ffd700"></a-plane>
      <a-box position="-15 28 0" width="0.6" height="4" depth="0.6" color="#8b4513"></a-box>
      <a-plane position="-15 30 1.8" width="2.5" height="1.8" rotation="0 90 0" color="#ffd700"></a-plane>
    </a-entity>

    <!-- Field Enemy (Slime) -->
    <a-entity id="field-slime-1" position="10 0.1 10" class="interactable-enemy">
      <a-sphere position="0 0.5 0" radius="0.5" color="#00ff00" opacity="0.7"></a-sphere>
      <a-text value="スライム" color="#fff" position="0 1.2 0" align="center" width="5"></a-text>
    </a-entity>

    <!-- Boss Placeholder (for evo, ogre, dragon) -->
    <a-entity id="bossmon" visible="false"></a-entity>

  </a-scene>
<script>
// UI Elements
const dialogue = document.getElementById('dialogue');
const partyStatus = document.getElementById('partyStatus');
const hint = document.getElementById('hint');
const warpBtns = document.getElementById('warpBtns');
const shopDiv = document.getElementById('shopDiv');
const questClear = document.getElementById('questClear');
const battleEffect = document.getElementById('battleEffect');
const overlay = document.getElementById('overlay');

// Game State
let state = {
  party: [
    {name:'真理', lv:5, hp:60, maxhp:60, alive:true, job:'剣姫', skills:['ファイアーボール','ファイアーイノセント']},
    {name:'マリアンヌ', lv:5, hp:50, maxhp:50, alive:true, job:'魔法姫', skills:['ファイアーボール']},
    {name:'エリナ', lv:5, hp:46, maxhp:46, alive:true, job:'エルフ賢者', skills:['アクアスパイク']}
  ],
  gold:3000,
  inventory: [],
  currentStoryStep: "intro_01", // Current point in the story
  lastPlayerPosition: {x:0, y:1.6, z:22}, // To track movement for progress
  shopOpen: false,
  inBattle: false,
  evoCleared:false, ogreCleared:false, dragonCleared:false,
  evoTry:0, evoLv:15, ogreLv:20, dragonLv:30,
};

// Warp Points (now with more descriptive names for UI)
const warpPoints = [
  {name:"街", pos:{x:0, y:1.6, z:22}},
  {name:"自宅", pos:{x:18, y:1.6, z:31}},
  {name:"ダンジョン入口", pos:{x:-28, y:1.6, z:41}},
  {name:"大城", pos:{x:0, y:1.6, z:65}}
];

// Shop Items
const shopItems = [
  {id: 'potion', name: 'ポーション', price: 100, type: 'consumable', effect: 'HP回復'},
  {id: 'longsword', name: 'ロングソード', price: 500, type: 'weapon', atk: 10},
  {id: 'ironshield', name: 'アイアンシールド', price: 300, type: 'armor', def: 5}
];

// Story Data (structured for branching)
const storyData = {
  "intro_01": { speaker: "宅間", text: "あ～暇だなネットサーフィンでもするか", next: "intro_02" },
  "intro_02": { speaker: "Narration", text: "新作VR機器を注文して翌日届いた。", next: "intro_03" },
  "intro_03": { speaker: "宅間", text: "ふひひ！幼女になれた！俺は幼女なんだ", next: "intro_04" },
  "intro_04": { speaker: "Narration", text: "ハンドルネームを真理にしてログイン。最初の街ポルッドに着く。", next: "marianne_meet_01" },
  "marianne_meet_01": { speaker: "マリアンヌ", text: "かわいいわね私はマリアンヌっていうの", next: "marianne_meet_02" },
  "marianne_meet_02": { speaker: "真理", text: "お主、なかなかの美少女でござるなぁ…", next: "marianne_meet_03" },
  "marianne_meet_03": { speaker: "マリアンヌ", text: "もしかして中身キモヲタのおっさん！？", next: "marianne_meet_04" },
  "marianne_meet_04": { speaker: "真理", text: "うるちゃい！俺は幼女なのだぁ…！", next: "marianne_meet_05" },
  "marianne_meet_05": { speaker: "マリアンヌ", text: "まあ見た目かわいいから一緒に行くか", next: "to_castle_01" },
  "to_castle_01": { speaker: "Narration", text: "真理はだんだん幼女化していった。お城へ。", next: "king_meet_01" },
  "king_meet_01": { speaker: "王様", text: "おお、マリアンヌ何処に行ってたのだ？おやその子は？", next: "king_meet_02" },
  "king_meet_02": { speaker: "真理", text: "真理なのじゃ！！", next: "king_meet_03" },
  "king_meet_03": { speaker: "王様", text: "何と可愛らしい…", next: "king_meet_04" },
  "king_meet_04": { speaker: "マリアンヌ", text: "私決めたわ！この子と一緒に旅することに！", next: "king_meet_05" },
  "king_meet_05": { speaker: "王様", text: "それは行かん！", next: "king_meet_06" },
  "king_meet_06": { speaker: "真理", text: "行くのじゃ！", next: "leave_castle_01" },
  "leave_castle_01": { speaker: "Narration", text: "マリアンヌの手を繋いで城を出た。", next: "leave_castle_02" },
  "leave_castle_02": { speaker: "マリアンヌ", text: "ちょっと待ちなさいよ城から出て行く当てでもあるの？", next: "leave_castle_03" },
  "leave_castle_03": { speaker: "真理", text: "次の街を探してみようと思うのじゃ", next: "leave_castle_04" },
  "leave_castle_04": { speaker: "マリアンヌ", text: "ここから一番近くの街って言ったらイデルかしら", next: "leave_castle_05" },
  "leave_castle_05": { speaker: "真理", text: "イデルってどういった場所なのかの？", next: "leave_castle_06" },
  "leave_castle_06": { speaker: "マリアンヌ", text: "知らないわよ私街から出たことないし…", next: "leave_castle_07" },
  "leave_castle_07": { speaker: "真理", text: "それじゃお試しでいくのじゃ！", next: "rest_01" },
  "rest_01": { speaker: "Narration", text: "焚火→テントで休憩→朝", next: "start_journey_01" },
  "start_journey_01": { speaker: "真理", text: "それじゃ向かうのじゃ！", next: "slime_appear_01" },
  "slime_appear_01": { speaker: "Narration", text: "フィールドに出るとスライムが現れた", next: "battle_slime_01" },
  "battle_slime_01": {
    speaker: "真理",
    text: "ファイアーボール！！",
    onComplete: () => { startBattle('slime'); }, // Trigger battle function
    next: "slime_defeated_01"
  },
  "slime_defeated_01": { speaker: "Narration", text: "真理の初級呪文でスライムを倒した", next: "marianne_magic_01" },
  "marianne_magic_01": { speaker: "マリアンヌ", text: "へぇあんた呪文使えるのね", next: "marianne_magic_02" },
  "marianne_magic_02": { speaker: "真理", text: "必要ならば教えてあげることも可能なのじゃ", next: "marianne_magic_03" },
  "marianne_magic_03": { speaker: "マリアンヌ", text: "教えて教えて！", next: "marianne_magic_04" },
  "marianne_magic_04": { speaker: "真理", text: "しょうがないのう", next: "marianne_magic_05" },
  "marianne_magic_05": { speaker: "Narration", text: "真理はマリアンヌに初級魔術を教えた。", next: "marianne_magic_06" },
  "marianne_magic_06": { speaker: "マリアンヌ", text: "こうですの？", next: "marianne_magic_07" },
  "marianne_magic_07": { speaker: "Narration", text: "炎の魔術を繰り出した", next: "marianne_magic_08" },
  "marianne_magic_08": { speaker: "真理", text: "そうそう", next: "marianne_magic_09" },
  "marianne_magic_09": { speaker: "マリアンヌ", text: "結構簡単でしたね", next: "marianne_magic_10" },
  "marianne_magic_10": { speaker: "真理", text: "初級魔術だからね今から魔術書で中級を覚える予定", next: "master_mid_magic_01" },
  "master_mid_magic_01": { speaker: "Narration", text: "次の日、中級魔術をマスター", next: "ogre_appear_01" },
  "ogre_appear_01": { speaker: "真理", text: "ファイアーイノセント！！", next: "ogre_defeated_01" },
  "ogre_defeated_01": { speaker: "Narration", text: "巨大なオークを丸焼きに", next: "ogre_defeated_02" },
  "ogre_defeated_02": { speaker: "マリアンヌ", text: "オークを一撃でやるなんてすごいわね", next: "ogre_defeated_03" },
  "ogre_defeated_03": { speaker: "真理", text: "いつの間にかに強くなってたのじゃ", next: "dungeon_found_01" },
  "dungeon_found_01": { speaker: "Narration", text: "洞窟を発見。中へ入る。", next: "dungeon_intro_01" },
  "dungeon_intro_01": { speaker: "マリアンヌ", text: "どうやらここは本で書いてあった始まりの洞窟のようね", next: "lizardman_appear_01" },
  "lizardman_appear_01": { speaker: "Narration", text: "リザードマンが出現！", next: "lizardman_battle_01" },
  "lizardman_battle_01": { speaker: "真理", text: "リザードマンなのじゃ気を付けるのじゃ", next: "lizardman_battle_02" },
  "lizardman_battle_02": { speaker: "マリアンヌ", text: "ファイアーボール！！", next: "lizardman_battle_03" },
  "lizardman_battle_03": { speaker: "Narration", text: "リザードマン「兄貴！尻尾が燃えてますぜ」", next: "lizardman_battle_04" },
  "lizardman_battle_04": { speaker: "真理", text: "もっと燃やしてやるのじゃ", next: "lizardman_defeated_01" },
  "lizardman_defeated_01": { speaker: "Narration", text: "炎の魔術でリザードマン撃破！", next: "lizardman_defeated_02" },
  "lizardman_defeated_02": { speaker: "マリアンヌ", text: "やるじゃない私も早く中級魔術使えるようになりたいわ", next: "lizardman_defeated_03" },
  "lizardman_defeated_03": { speaker: "真理", text: "今日の夜にでも教えてあげるのじゃ", next: "treasure_chest_01" },
  "treasure_chest_01": { speaker: "Narration", text: "洞窟の分岐で宝箱（ロングソード）を発見。", next: "treasure_chest_02" },
  "treasure_chest_02": { speaker: "真理", text: "やった宝箱なのじゃー！", next: "treasure_chest_03" },
  "treasure_chest_03": { speaker: "マリアンヌ", text: "中身は何かしらね", next: "treasure_chest_04" },
  "treasure_chest_04": { speaker: "Narration", text: "中身はロングソードだった", next: "treasure_chest_05" },
  "treasure_chest_05": { speaker: "真理", text: "何だ剣か…", next: "treasure_chest_06" },
  "treasure_chest_06": { speaker: "マリアンヌ", text: "杖の方が良かったわねでもせっかくだから装備して見ましょう", next: "sword_lv_up_01" },
  "sword_lv_up_01": { speaker: "Narration", text: "剣術レベル1になった", next: "sword_lv_up_02" },
  "sword_lv_up_02": { speaker: "真理", text: "剣をもっと使いこなしたいのう", next: "sword_lv_up_03" },
  "sword_lv_up_03": { speaker: "マリアンヌ", text: "剣術が出来る人を探すしかないわね", next: "exit_dungeon_01" },
  "exit_dungeon_01": { speaker: "Narration", text: "洞窟出口→外に出る。", next: "exit_dungeon_02" },
  "exit_dungeon_02": { speaker: "真理", text: "外に出たのじゃ！！", next: "idel_arrival_01" },
  "idel_arrival_01": { speaker: "Narration", text: "街イデルに到着。", next: "idel_guide_01" },
  "idel_guide_01": { speaker: "案内人", text: "ようこそイデルへ！ここは仲間を集めたりする酒場や、クエストを受けられる冒険者ギルドがあります", next: "idel_guide_02" },
  "idel_guide_02": { speaker: "真理", text: "それじゃあまずは酒場で情報収集と仲間集めと行きますか", next: "idel_guide_03" },
  "idel_guide_03": { speaker: "マリアンヌ", text: "どんな人がいるかしらね", next: "elina_appear_01" },
  "elina_appear_01": { speaker: "Narration", text: "酒場でエリナ登場。", next: "elina_join_01" },
  "elina_join_01": { speaker: "真理", text: "そこの美しいお方、わらわ達と冒険しませんか？", next: "elina_join_02" },
  "elina_join_02": { speaker: "エリナ", text: "私はエリナ・カリオットよ見ての通りエルフで魔術師をやっているわ", next: "elina_join_03" },
  "elina_join_03": { speaker: "真理", text: "よかったら仲間になってくれませんか？", next: "elina_join_04" },
  "elina_join_04": { speaker: "エリナ", text: "クエストを手伝ってくれたら考えてもいいわよ", next: "elina_join_05" },
  "elina_join_05": { speaker: "真理", text: "わーい手伝う手伝う！", next: "to_guild_with_elina_01" },
  "to_guild_with_elina_01": { speaker: "Narration", text: "エリナと共に冒険者ギルドへ。", next: "gigborg_quest_01" },
  "gigborg_quest_01": { speaker: "エリナ", text: "あなた達にはギグボルグの討伐をやって貰うわ", next: "gigborg_quest_02" },
  "gigborg_quest_02": { speaker: "真理", text: "どんなモンスターかわからにゃいけど頑張るにゃ", next: "gigborg_quest_03" },
  "gigborg_quest_03": { speaker: "マリアンヌ", text: "何でちょっと猫語になってんの", next: "gigborg_quest_04" },
  "gigborg_quest_04": { speaker: "真理", text: "ふにゃ？？分からないにゃ", next: "gigborg_quest_05" },
  "gigborg_quest_05": { speaker: "エリナ", text: "場所は始まりの塔よ。北にあるわ。", next: "to_tower_01" },
  "to_tower_01": { speaker: "Narration", text: "始まりの塔へ向かう。", next: "goblin_battle_01" },
  "goblin_battle_01": { speaker: "Narration", text: "始まりの塔でゴブリン達とバトル！", next: "goblin_battle_02" },
  "goblin_battle_02": { speaker: "真理", text: "ファイアーイノセント！！", onComplete: () => { startBattle('goblin'); }, next: "goblin_defeated_01" },
  "goblin_defeated_01": { speaker: "Narration", text: "ゴブリンたちは焼き尽くされた。", next: "open_door_01" },
  "open_door_01": { speaker: "Narration", text: "塔の中でアイテム端末を使い扉を開く。", next: "boss_warning_01" },
  "boss_warning_01": { speaker: "冒険者", text: "この先ボス部屋があるぞ強いから注意しておけ", next: "gigborg_boss_01" },
  "gigborg_boss_01": { speaker: "Narration", text: "ボス部屋でギグボルグLv10戦。", next: "gigborg_boss_02" },
  "gigborg_boss_02": { speaker: "マリアンヌ", text: "ファイアーボール！！", next: "gigborg_boss_03" },
  "gigborg_boss_03": { speaker: "エリナ", text: "アクアスパイク！！", next: "gigborg_boss_04" },
  "gigborg_boss_04": { speaker: "Narration", text: "ギグボルグの斧で全滅→イデルで復活。", next: "level_up_needed_01" },
  "level_up_needed_01": { speaker: "マリアンヌ", text: "やられたみたいねレベル上げでもしましょ", next: "goblin_hunt_01" },
  "goblin_hunt_01": { speaker: "Narration", text: "西の森でゴブリン狩りLv10にアップ。", next: "lightning_vortex_01" },
  "lightning_vortex_01": { speaker: "真理", text: "ライトニングヴォルテックスを覚えた！", next: "gigborg_retry_01" },
  "gigborg_retry_01": { speaker: "Narration", text: "再挑戦でギグボルグ撃破。", next: "gigborg_defeated_01" },
  "gigborg_defeated_01": { speaker: "マリアンヌ", text: "やったわ！ギグボルグ撃破よあんたおっさんの癖になかなかやるわね", next: "gigborg_defeated_02" },
  "gigborg_defeated_02": { speaker: "真理", text: "おっさん言うな！どうみてもかわいい女の子じゃろ？", next: "gigborg_defeated_03" },
  "gigborg_defeated_03": { speaker: "マリアンヌ", text: "そ、そうね…", next: "elina_officially_join_01" },
  "elina_officially_join_01": { speaker: "エリナ", text: "約束通り仲間になってあげるわよ", next: "elina_officially_join_02" },
  "elina_officially_join_02": { speaker: "真理", text: "よろしくなのじゃ", next: "evolvia_quest_01" },
  "evolvia_quest_01": { speaker: "エリナ", text: "次はエボルビア討伐に行くわよ", next: "evolvia_quest_02" },
  "evolvia_quest_02": { speaker: "Narration", text: "海にいる怪物エボルビア討伐へ。", next: "evolvia_battle_01" },
  "evolvia_battle_01": { speaker: "真理", text: "ライトニングヴォルテックス！", next: "evolvia_retreat_01" },
  "evolvia_retreat_01": { speaker: "Narration", text: "レベル差で撤退、レベル上げ＆アイテム集め。", next: "lightning_judgment_01" },
  "lightning_judgment_01": { speaker: "Narration", text: "Lv20到達でライトニングジャッジメントを覚える。", next: "evolvia_rematch_01" },
  "evolvia_rematch_01": { speaker: "真理", text: "エボルビアを倒しに行くわよ", next: "evolvia_rematch_02" },
  "evolvia_rematch_02": { speaker: "マリアンヌ", text: "今度こそ倒すわよ", next: "evolvia_rematch_03" },
  "evolvia_rematch_03": { speaker: "真理", text: "ライトニングジャッジメント！！", next: "evolvia_defeated_01" },
  "evolvia_defeated_01": { speaker: "Narration", text: "エボルビア討伐、クエストクリアー。", next: "quest_clear_effect_01" },
  "quest_clear_effect_01": { speaker: "エリナ", text: "おっしゃークリア！お疲れ！", onComplete: () => { showQuestClear(); }, next: "ogre_quest_01" },
  "ogre_quest_01": { speaker: "Narration", text: "オーガ討伐→オーガの爪1万Gで売却。", next: "buy_equip_01" },
  "buy_equip_01": { speaker: "Narration", text: "武器・防具を買い強化。宿屋で体力回復。", next: "rank_up_quest_01" },
  "rank_up_quest_01": { speaker: "受付の人", text: "現在のランクはEクラスです。ランクアップクエストはドラゴン討伐です。", next: "dragon_quest_01" },
  "dragon_quest_01": { speaker: "真理", text: "ドラゴンの討伐いくのじゃ", next: "dragon_quest_02" },
  "dragon_quest_02": { speaker: "Narration", text: "竜の山へピクニック→ドラゴンの巣で爆弾を設置して爆破！", next: "dragon_quest_03" },
  "dragon_quest_03": { speaker: "真理", text: "少々やりすぎたのじゃ", next: "rank_up_d_01" },
  "rank_up_d_01": { speaker: "Narration", text: "イデルでクエスト報告、Dランクにアップ＆飛空艇GET。", next: "d_rank_quest_01" },
  "d_rank_quest_01": { speaker: "マリアンヌ", text: "Dランクのクエストも受けておきましょ", next: "hero_tower_01" },
  "hero_tower_01": { speaker: "Narration", text: "飛空艇で英雄の塔→闇の騎士ボス戦", next: "dark_knight_battle_01" },
  "dark_knight_battle_01": { speaker: "マリアンヌ", text: "受け取って！", next: "dark_knight_battle_02" },
  "dark_knight_battle_02": { speaker: "Narration", text: "マリアンヌが剣を投げ真理が闇の騎士を討つ。", next: "dark_knight_defeated_01" },
  "dark_knight_defeated_01": { speaker: "真理", text: "どうじゃ？わらわの力は？", next: "dark_knight_defeated_02" },
  "dark_knight_defeated_02": { speaker: "マリアンヌ", text: "あの時、私が剣を渡してなかったら死んでたわよ", next: "dark_knight_defeated_03" },
  "dark_knight_defeated_03": { speaker: "真理", text: "それは感謝してるのじゃ", next: "sky_castle_01" },
  "sky_castle_01": { speaker: "Narration", text: "塔の景色→空に浮かぶ城エリクッドへ。", next: "angel_meet_01" },
  "angel_meet_01": { speaker: "天使", text: "ようこそエリクッドへ", next: "king_attacked_01" },
  "king_attacked_01": { speaker: "王様", text: "今エリクッドは魔界の悪魔の攻撃を受けている", next: "demon_realm_quest_01" },
  "demon_realm_quest_01": { speaker: "真理", text: "んじゃわらわたちが魔界に行って悪魔を倒してやるのじゃ！", next: "demon_realm_quest_02" },
  "demon_realm_quest_02": { speaker: "王様", text: "異界の門はここからずっと北にある", next: "to_demon_gate_01" },
  "to_demon_gate_01": { speaker: "Narration", text: "異界の門へ→ワイバーン撃破→サタン戦", next: "satan_battle_01" },
  "satan_battle_01": { speaker: "サタン", text: "ここから先は通さないぜ", next: "satan_battle_02" },
  "satan_battle_02": { speaker: "真理", text: "サンダージャッジメント！！", next: "satan_battle_03" },
  "satan_battle_03": { speaker: "エリナ", text: "プラチナソード！！", next: "satan_defeated_01" },
  "satan_defeated_01": { speaker: "Narration", text: "サタン討伐、魔界へ突入！", next: "demon_realm_arrival_01" },
  "demon_realm_arrival_01": { speaker: "案内人", text: "ようこそ、魔界の街モルドへ", next: "demon_realm_arrival_02" },
  "demon_realm_arrival_02": { speaker: "マリアンヌ", text: "ここの悪魔達は敵対心がないようね", next: "demon_realm_arrival_03" },
  "demon_realm_arrival_03": { speaker: "真理", text: "もう歩き疲れたのじゃ宿屋に泊りたいのじゃ～", next: "demon_castle_01" },
  "demon_castle_01": { speaker: "Narration", text: "魔界の城を目指しゾンビ戦→エリナが撃破！", next: "elina_defeat_zombie_01" },
  "elina_defeat_zombie_01": { speaker: "エリナ", text: "私に任せなさい！！", next: "end_chapter" },
  "end_chapter": { speaker: "Narration", text: "次章へ続く…", next: null }
};

let currentStoryId = state.currentStoryStep;

// --- UI Functions ---
function setWarpUI() {
  warpBtns.innerHTML = '';
  warpPoints.forEach(p=>{
    let btn = document.createElement('button');
    btn.textContent = p.name + "へ転移";
    btn.onclick = ()=>{
      document.querySelector('#playerRig').setAttribute('position', `${p.pos.x} ${p.pos.y} ${p.pos.z}`);
      closeDialogue(); // Close dialogue on warp
      closeShop(); // Close shop on warp
    };
    warpBtns.appendChild(btn);
  });
}

function updatePartyStatus() {
  partyStatus.innerHTML = `<b>パーティ</b><br>`;
  state.party.forEach(p=>{
    partyStatus.innerHTML += `<span class="${p.alive?'alive':'dead'}">${p.name}(Lv${p.lv}) ${p.hp}/${p.maxhp}HP</span><br>`;
  });
  partyStatus.innerHTML += `<b>G:</b> ${state.gold}<br>`;
  partyStatus.innerHTML += `<b>アイテム:</b> ${state.inventory.map(item => item.name).join(', ') || 'なし'}`;
}

// --- Day/Night Cycle ---
let skyColor="#b8e6ff", nightColor="#26305a";
let night=false;
function setDayNight(toNight){
  night=toNight;
  document.getElementById('sky').setAttribute('color',night?nightColor:skyColor);
  document.getElementById('dirlight').setAttribute('intensity',night?0.28:1.13);
  document.getElementById('ambientlight').setAttribute('intensity',night?0.16:0.62);
  document.getElementById('nightFilter').style.background=night?"rgba(0,8,38,0.53)":"rgba(0,8,38,0.0)";
}
setInterval(()=>{setDayNight(!night);},15000); setDayNight(false);

// --- Dialogue System ---
function showDialogueBlock(dialogueId) {
  const data = storyData[dialogueId];
  if (!data) {
    closeDialogue();
    return;
  }

  dialogue.innerHTML = '';
  dialogue.style.display = 'block';

  if (data.speaker && data.speaker !== 'Narration') {
    const n = document.createElement('span');
    n.className = 'name';
    n.textContent = data.speaker + ' ';
    dialogue.appendChild(n);
  }
  const t = document.createElement('span');
  t.textContent = data.text;
  dialogue.appendChild(t);

  if (data.choices) {
    data.choices.forEach(c => {
      const btn = document.createElement('button');
      btn.className = 'choice';
      btn.textContent = c.text;
      btn.onclick = () => {
        if (c.onChoose) c.onChoose(); // Execute choice-specific logic
        currentStoryId = c.next;
        showDialogueBlock(currentStoryId);
      };
      dialogue.appendChild(btn);
    });
  } else {
    dialogue.onclick = () => {
      dialogue.onclick = null; // Prevent multiple clicks
      if (data.onComplete) data.onComplete(); // Execute onComplete logic
      currentStoryId = data.next;
      showDialogueBlock(currentStoryId);
    };
  }
}

function closeDialogue() {
  dialogue.style.display = 'none';
  dialogue.onclick = null;
}

// --- Battle System (Simplified) ---
function startBattle(enemyType) {
  state.inBattle = true;
  battleEffect.style.display = 'block';
  // Simulate battle outcome instantly for now
  setTimeout(() => {
    battleEffect.style.display = 'none';
    state.inBattle = false;
    // Example: Party takes some damage, or enemy is defeated
    state.party.forEach(p => {
      if (p.alive) p.hp = Math.max(0, p.hp - 5); // Simulate damage
      if (p.hp === 0) p.alive = false;
    });
    updatePartyStatus();
    // Logic for enemy defeat, item drops, XP gain would go here
    // For now, the story progresses automatically after the simulated battle
  }, 300); // Flash for 0.3 seconds
}

function showQuestClear() {
  questClear.style.display = 'block';
  setTimeout(() => {
    questClear.style.display = 'none';
  }, 3000); // Show for 3 seconds
}

// --- Shop System ---
function openShop() {
  state.shopOpen = true;
  shopDiv.style.display = 'block';
  shopDiv.innerHTML = `
    <h2>ショップ</h2>
    <p>ゴールド: <span id="shopGold">${state.gold}</span>G</p>
    <div id="shopItemsContainer"></div>
    <button class="close-button" onclick="closeShop()">X</button>
  `;
  const shopItemsContainer = document.getElementById('shopItemsContainer');

  shopItems.forEach(item => {
    const itemDiv = document.createElement('div');
    itemDiv.className = 'shop-item';
    itemDiv.innerHTML = `
      <span>${item.name} (${item.price}G)</span>
      <button onclick="buyItem('${item.id}')">購入</button>
    `;
    shopItemsContainer.appendChild(itemDiv);
  });
  // Add a simple "Sell" option
  if (state.inventory.length > 0) {
    const sellSection = document.createElement('div');
    sellSection.innerHTML = `<h3>持ち物売却</h3>`;
    state.inventory.forEach((item, index) => {
      sellSection.innerHTML += `
        <div class="shop-item">
          <span>${item.name} (${Math.floor(item.price / 2)}G)</span>
          <button onclick="sellItem(${index})">売却</button>
        </div>
      `;
    });
    shopItemsContainer.appendChild(sellSection);
  }
}

function buyItem(itemId) {
  const item = shopItems.find(i => i.id === itemId);
  if (item && state.gold >= item.price) {
    state.gold -= item.price;
    state.inventory.push(item);
    updatePartyStatus();
    document.getElementById('shopGold').textContent = state.gold;
    // Re-render shop to show updated inventory for selling
    openShop();
  } else if (item) {
    // Using dialogue for messages instead of alert
    showDialogueBlock({ speaker: "ショップ店員", text: "ゴールドが足りません！" });
  }
}

function sellItem(index) {
  if (index >= 0 && index < state.inventory.length) {
    const item = state.inventory.splice(index, 1)[0];
    state.gold += Math.floor(item.price / 2); // Sell for half price
    updatePartyStatus();
    document.getElementById('shopGold').textContent = state.gold;
    openShop(); // Re-render shop
  }
}

function closeShop() {
  state.shopOpen = false;
  shopDiv.style.display = 'none';
}

// --- Interaction System ---
// Add click listeners to interactable entities
document.addEventListener('DOMContentLoaded', () => {
  const scene = document.querySelector('a-scene');

  // Event listener for NPC interaction
  const townNpc = document.getElementById('town-npc-1');
  if (townNpc) {
    townNpc.addEventListener('click', () => {
      if (!state.inBattle && !state.shopOpen) {
        showDialogueBlock({ speaker: "村人", text: "こんにちは、冒険者さん！この街は平和ですよ。" });
      }
    });
  }

  // Event listener for Shop interaction
  const townShop = document.getElementById('town-shop');
  if (townShop) {
    townShop.addEventListener('click', () => {
      if (!state.inBattle && !state.shopOpen) {
        openShop();
      }
    });
  }

  // Event listeners for Enemy interaction (Slimes)
  const fieldSlime = document.getElementById('field-slime-1');
  if (fieldSlime) {
    fieldSlime.addEventListener('click', () => {
      if (!state.inBattle && !state.shopOpen) {
        showDialogueBlock({
          speaker: "Narration",
          text: "スライムが現れた！戦いますか？",
          choices: [
            { text: "戦う", onChoose: () => { startBattle('slime'); fieldSlime.setAttribute('visible', 'false'); }, next: "battle_result_slime" },
            { text: "逃げる", next: "flee_result" }
          ]
        });
      }
    });
  }

  const dungeonSlime = document.getElementById('dungeon-slime-1');
  if (dungeonSlime) {
    dungeonSlime.addEventListener('click', () => {
      if (!state.inBattle && !state.shopOpen) {
        showDialogueBlock({
          speaker: "Narration",
          text: "ダンジョンスライムが現れた！戦いますか？",
          choices: [
            { text: "戦う", onChoose: () => { startBattle('dungeon-slime'); dungeonSlime.setAttribute('visible', 'false'); }, next: "battle_result_dungeon_slime" },
            { text: "逃げる", next: "flee_result" }
          ]
        });
      }
    });
  }

  // Define battle results (simple for now)
  storyData["battle_result_slime"] = { speaker: "Narration", text: "スライムを倒した！経験値と10Gを獲得した。", onComplete: () => { state.gold += 10; updatePartyStatus(); }, next: currentStoryId };
  storyData["battle_result_dungeon_slime"] = { speaker: "Narration", text: "ダンジョンスライムを倒した！経験値と20Gを獲得した。", onComplete: () => { state.gold += 20; updatePartyStatus(); }, next: currentStoryId };
  storyData["flee_result"] = { speaker: "Narration", text: "なんとか逃げ切った。", next: currentStoryId };

  // Initial story start
  showDialogueBlock(currentStoryId);
});

// --- Main Game Loop for Progress (simplified) ---
function checkProgress() {
  updatePartyStatus();
  const playerRig = document.querySelector('#playerRig');
  if (!playerRig) return;
  let pos = playerRig.object3D.position;

  // Only progress linear story if no dialogue is open and not in battle/shop
  if (dialogue.style.display === 'none' && !state.inBattle && !state.shopOpen) {
    // Auto-progress main story
    if (storyData[currentStoryId] && !storyData[currentStoryId].choices) {
      // Simulate dialogue click if it's not a choice block
      if (storyData[currentStoryId].next) {
        // This part is tricky with auto-progression.
        // For now, the story relies on user clicks, or specific triggers.
        // The `onComplete` in storyData handles the actual progression.
      }
    }
  }

  // Example: Trigger story based on proximity (can be expanded)
  // This is just a basic example, the main story progression is click-driven.
  const townCenter = new THREE.Vector3(0, 1.6, 22);
  if (pos.distanceTo(townCenter) < 10 && state.currentStoryStep === "intro_04") {
    // This is handled by the initial showDialogueBlock, but a more complex game
    // might trigger different dialogue based on location.
  }
}

setInterval(checkProgress, 700); // Check progress every 0.7 seconds

// Initial setup calls
setWarpUI();
updatePartyStatus();
</script>
</body>
</html>

DeepLinkVR


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Verse - 次世代ソーシャルネットワーク VR対応</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rita/1.3.63/rita-full.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 0; background: #f0f0f0; }
        header, .footer { background: linear-gradient(45deg, #6a11cb, #2575fc); color: white; text-align: center; padding: 20px; }
        .nav-container { background: #2575fc; display: flex; justify-content: center; padding: 10px; position: sticky; top: 0; }
        .nav-menu a { color: white; text-decoration: none; margin: 0 10px; }
        .content { max-width: 900px; margin: 20px auto; background: white; padding: 20px; border-radius: 8px; }
        .cta-button { background: #2575fc; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; }
        .profile-icon { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }
        .dark-mode { background: #1e1e1e; color: #ddd; }
        .timeline { margin-top: 20px; }
        .timeline-post { border: 1px solid #ddd; border-radius: 8px; padding: 10px; margin-bottom: 10px; background: #fff; }
        canvas { border: 1px solid #ccc; }
    </style>
    <script>
        let posts = JSON.parse(localStorage.getItem('posts') || '[]');

        function saveData() {
            localStorage.setItem('posts', JSON.stringify(posts));
        }

        function createPost(content) {
            posts.unshift({ content: content, likes: 0 });
            saveData();
            renderTimeline();
        }

        function renderTimeline() {
            const container = document.getElementById('timeline');
            container.innerHTML = '';
            posts.forEach((post, index) => {
                container.innerHTML += `<div class='timeline-post'><p>${post.content}</p></div>`;
            });
        }

        function toggleVR() {
            if (!navigator.xr) {
                alert('WebXRがサポートされていません。');
                return;
            }

            navigator.xr.requestSession('immersive-vr').then(session => {
                const vrCanvas = document.createElement('canvas');
                vrCanvas.width = window.innerWidth;
                vrCanvas.height = window.innerHeight;
                vrCanvas.style.width = '100vw';
                vrCanvas.style.height = '100vh';
                vrCanvas.style.position = 'fixed';
                vrCanvas.style.top = 0;
                vrCanvas.style.left = 0;
                vrCanvas.style.background = 'black';
                document.body.appendChild(vrCanvas);

                const ctx = vrCanvas.getContext('2d');
                ctx.fillStyle = 'white';
                ctx.font = '30px Arial';
                ctx.fillText('VRモード：仮想空間に没入中', 50, 100);

                drawVREnvironment(ctx);

                loadUnityAsset(ctx);
                loadUnrealAsset(ctx);

                session.end().then(() => {
                    document.body.removeChild(vrCanvas);
                });
            }).catch(err => {
                alert('VRセッションの開始に失敗しました。');
                console.error(err);
            });
        }

        function drawVREnvironment(ctx) {
            ctx.fillStyle = '#0f0';
            ctx.beginPath();
            ctx.arc(200, 200, 50, 0, 2 * Math.PI);
            ctx.fill();
            ctx.fillStyle = '#f00';
            ctx.fillRect(300, 150, 100, 100);
            ctx.fillStyle = 'cyan';
            ctx.font = '20px Arial';
            ctx.fillText('仮想オブジェクト: 球体と立方体', 50, 300);
        }

        function loadUnityAsset(ctx) {
            ctx.fillStyle = 'yellow';
            ctx.font = '20px Arial';
            ctx.fillText('Unityアセット読み込み: キャラクター', 50, 350);
        }

        function loadUnrealAsset(ctx) {
            ctx.fillStyle = 'orange';
            ctx.font = '20px Arial';
            ctx.fillText('Unreal Engineアセット読み込み: シーン', 50, 400);
        }

        function toggleDarkMode() {
            document.body.classList.toggle('dark-mode');
        }

        window.onload = renderTimeline;
    </script>
</head>
<body>
    <header>
        <h1>Verse VR SNS</h1>
        <button class="cta-button" onclick="toggleVR()">🎮 VRモード</button>
        <button class="cta-button" onclick="toggleDarkMode()">🌙 ダークモード</button>
    </header>

    <div class="nav-container">
        <div class="nav-menu">
            <a href="#" onclick="renderTimeline()">ホーム</a>
        </div>
    </div>

    <div class="content">
        <h2>新規投稿</h2>
        <textarea id="postContent" class="form-control" placeholder="いま何してる？"></textarea><br>
        <button class="cta-button" onclick="createPost(document.getElementById('postContent').value)">投稿</button>

        <section id="timeline" class="timeline"></section>
    </div>

    <div class="footer">&copy; 2025 Verse VR SNS</div>
</body>
</html>