# HANDOFF REPORT: PC Desktop Full-Screen Client UI & HUD Architecture Survey

**Target Component**: `client/web_pc/` (Dedicated Full-Screen PC Web Client)  
**Author**: `survey_explorer_2` (UI, Layout & Visual Systems Explorer)  
**Date**: 2026-10-02  
**Status**: Completed Survey & Architectural Specification  

---

## Executive Summary
This investigation establishes the complete technical specification for the dedicated PC Desktop Full-Screen Client (`client/web_pc/`) based on Requirements R1 and R3. It eliminates all mobile simulation artifacts (`.iphone-frame`, `#simulator-bar`, touch joystick) in favor of a true hardware-accelerated 100vw × 100vh responsive layout with an authentic Path of Exile / Diablo-style Grimdark Action HUD: twin fluid globes (Health & Mana), a centered multi-tier Action Bar (Flasks 1–5, Martial Skills QWER, Mouse LMB/RMB, Spacebar Dodge, and EXP bar), an expanded top-right Minimap with compass telemetry, a collapsible bottom-left multi-channel Chat dock, dynamic hover tooltips, and side-by-side dual-docking modals (Character 'C' on the left, Inventory 'I' on the right), all synchronized through a zero-reload 9-language reactive i18n event bus.

---

## 1. Observation

Direct observations and evidence extracted from codebase inspection:

### 1.1 Mobile Simulation Artifacts & Layout Sizing
* In `client/webapp/index.html` (lines 17–57), `#simulator-bar` is an absolute docked control bar containing buttons `#mode-iphone`, `#mode-fullscreen`, `#btn-toggle-fs`, and `#debug-biome-selector`.
* In `client/webapp/index.html` (line 60), the main viewport container is declared as:
  ```html
  <div id="app-viewport" class="iphone-frame relative overflow-hidden flex flex-col bg-slate-950">
  ```
* In `client/webapp/css/main.css` (lines 56–66), `.iphone-frame` hardcodes mobile chassis constraints:
  ```css
  .iphone-frame {
    width: 880px !important;
    height: 420px !important;
    max-width: 96vw;
    max-height: 88vh;
    border-radius: 44px;
    box-shadow: 0 0 0 10px #18181b, 0 0 0 12px #27272a, 0 25px 60px -15px rgba(0,0,0,0.9);
    border: 3px solid #09090b;
    flex-shrink: 0;
  }
  ```
* In `client/webapp/js/engine/iso_math.js` (lines 5–10, 141–167), canvas dimensions and isometric camera centering strictly rely on `viewport.clientWidth` and `viewport.clientHeight`:
  ```javascript
  function resizeCanvas() {
    const dpr = window.devicePixelRatio || 1;
    canvas.width = Math.round(viewport.clientWidth * dpr);
    canvas.height = Math.round(viewport.clientHeight * dpr);
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  }
  function worldToIso(wx, wy, wz = 0) {
    const cx = viewport.clientWidth / 2;
    const cy = viewport.clientHeight / 2;
    ...
  }
  ```
  *Consequence*: Setting `#app-viewport` to 100vw × 100vh (`position: fixed; inset: 0; width: 100vw; height: 100vh;`) natively drives both `resizeCanvas()` and `worldToIso()` to center the player character and render seamless isometric coordinates across 16:9, 16:10, and 21:9 Ultrawide displays without any engine modification.

### 1.2 Existing HUD Component Layout & Positioning
* **Fluid Orbs** (`client/webapp/js/ui/hud_orbs.js`, lines 7–100, 33–39):
  * `HudOrbs` renders dual fluid canvases (`#life-orb-canvas` and `#mana-orb-canvas`) via a sinusoidal wave calculation (`Math.sin(x * 0.05 + time * 3.0)`).
  * High-DPI buffer is standard `CANVAS_SIZE = 180`, `ORB_RADIUS = 78`, `CENTER_X = 90`, `CENTER_Y = 90`.
  * In `client/webapp/css/hud_skills.css` (lines 7–10), the container `#hud-orbs-container` spans the bottom with `display: flex; justify-content: space-between; align-items: flex-end; padding: 0 12px 10px 12px;`.
* **Action Bar & Cooldown Engine** (`client/webapp/css/hud_skills.css`, lines 73–150; `skill_bar_controller.js`, lines 40–54):
  * In mobile WebApp, `.hud-skill-bar` is anchored at `right: 14px; bottom: 12px;` for thumb accessibility, containing only 7 asymmetric slots: potion (`4`), fire (`Q`), slot-w (`2`), thunder (`E`), frost (`R`), primary (`LMB`), and dodge (`Space`).
  * `skill_bar_controller.js` has full 360° conic radial sweep support (`--cooldown-sweep: 0deg` to `360deg`), cooldown counters, charges badge, and 0.25s ready flash pulse.
  * In `skill_bar_controller.js` line 307: `(slotKey && slotKey !== 'W' && slotKey === pressedKey)` explicitly suppressed `W` because `W` was hijacked by the virtual joystick. In PC ARPG controls, `W` is freed up for martial skill slot 2!
* **Minimap HUD** (`client/webapp/js/ui/minimap_hud.js`, lines 57–88, 218–259):
  * Binds to `<canvas id="minimap-canvas">` with an offscreen backing buffer (`baseCanvas`), rendering explored fog, waypoints, boss gates, and POIs.
  * Dynamically populates `#minimap-zone-label` and `#minimap-coords` (`${ptx},${pty}`).
  * Features a player blip with a rotating heading pointer (`hx = p.x + Math.cos(facingAngle) * 5.0`).
* **Chat Dock** (`client/webapp/js/ui/chat_ui.js`, lines 15–20, 184–197):
  * 8 channels supported: 1 (World), 2 (Zone), 3 (Guild), 4 (Party), 5 (Whisper), 6 (System), 7 (Recruit), 8 (Feedback).
  * Has two states: `#chat-minimized-bar` (ticker) and `#chat-expanded-panel` (tabs, log, input, send button, cooldown badge).
  * Supports rich HMAC-authenticated item hyperlinks `[item:uuid:sig:name:rarity]` which pop up `#modal-item-link-tooltip`.
* **Tooltips** (`client/webapp/js/ui/tooltips.js`, lines 18–80):
  * Single floating tooltip `#game-tooltip` with title, description, hotkey badge, and icon.
  * Viewport clamping (`minLeft`, `maxLeft`, bottom flip).
* **Modals & Templates** (`client/webapp/js/ui/template_manager.js`, lines 68–115; `templates/character_modal.html`; `templates/bag_modal.html`):
  * `UITemplateManager` injects HTML templates into container `#modal-container` and fires `freeexile:templateMounted`.
  * `modal-character` is positioned `absolute left-2 sm:left-3 top-11 bottom-2.5 w-[310px] sm:w-[350px]` (left-docked).
  * `modal-bag` is positioned `absolute right-2 sm:right-3 top-12 bottom-3 w-[340px] sm:w-[440px]` (right-docked).
* **Reactive i18n Engine** (`client/webapp/js/data/i18n.js`, lines 127–277):
  * `FreeExileI18n.updateDOM(root)` automatically queries and replaces:
    - `[data-i18n]`, `[data-chat-i18n]`
    - `[data-i18n-html]`
    - `[data-i18n-placeholder]`
    - `[data-tooltip-title-key]`, `[data-tooltip-desc-key]`
    - `[data-i18n-tooltip-title]`, `[data-i18n-tooltip-desc]`
  * Dispatches CustomEvent `freeexile:localeChanged` upon calling `setLocale(locale)` and re-translates dynamically mounted templates via `freeexile:templateMounted`.

---

## 2. Logic Chain

1. **Elimination of Mobile Simulation Overhead**:
   * *Observation 1.1*: `.iphone-frame` enforces a fixed `880px x 420px` border-box with thick borders, corner radii (`border-radius: 44px`), and drop-shadows, while `#simulator-bar` takes up bottom screen space.
   * *Deduction*: By omitting `.iphone-frame`, `#simulator-bar`, and the virtual joystick markup in `client/web_pc/index.html` and setting `#app-viewport` to `position: fixed; inset: 0; width: 100vw; height: 100vh; overflow: hidden; border: none; border-radius: 0;`, the client immediately occupies 100% of the monitor canvas with 0 horizontal or vertical scrollbars.
   * *Deduction*: `iso_math.js` automatically adapts to `viewport.clientWidth` and `viewport.clientHeight`, meaning 16:9 (1920x1080), 16:10 (1920x1200), and 21:9 Ultrawide (2560x1080, 3440x1440) are natively supported out-of-the-box.

2. **Grimdark Action HUD Re-centering & Symmetry (PoE / Diablo Paradigm)**:
   * *Observation 1.2*: In mobile, HUD is thumb-clustered to the bottom right, leaving the bottom left for the virtual joystick.
   * *Deduction*: In a desktop ARPG, the player uses mouse aiming and keyboard keystrokes. The HUD must transition to a centered, gothic symmetrical bar anchored at `bottom: 12px; left: 50%; transform: translateX(-50%);`.
   * *Deduction*: The Health Globe belongs at the bottom-left corner of the HUD (or flanking the action bar on the left), and the Mana/Qi Globe belongs at the bottom-right corner.
   * *Deduction*: The central bar requires 4 distinct sub-groups:
     1. Five Flask slots (1, 2, 3, 4, 5) with glass vial silhouettes and vertical liquid fill / recharge badges.
     2. Four Martial Skill slots (Q, W, E, R) with 360° radial cooldown sweeps and yellow timer typography.
     3. Two Mouse Action slots (LMB for Primary Attack/Move, RMB for Core Skill) featuring distinctive mouse icon badges.
     4. One Spacebar slot for Dodge (Huyễn Ảnh Bộ) with a 3-pip charge counter.
     5. An experience progress bar (EXP bar) spanning underneath the central skills.

3. **Desktop Minimap & Telemetry Enhancement**:
   * *Observation 1.2*: The existing minimap canvas is `120px x 80px`, styled for small mobile screens.
   * *Deduction*: On high-resolution PC displays, the minimap should be expanded to `180px x 130px` (or circular 160px diameter) with a wrought-iron/etched brass frame, displaying:
     - Zone title (`#minimap-zone-label`)
     - World coordinates (`#minimap-coords`)
     - Cardinal direction notches (N, E, S, W)
     - Telemetry counters (`#hud-fps`, `#hud-ping`) mounted cleanly in an adjacent brass header.

4. **Desktop Chat Ergonomics**:
   * *Observation 1.2*: The chat dock in mobile sits at `bottom-16 left-3` with a small max-width.
   * *Deduction*: On PC, the chat dock should be anchored above the Health Globe (`left: 20px; bottom: 130px;`), with an expanded width of `420px` and height of `280px`. Pressing `Enter` should automatically expand and focus `#chat-input`, while pressing `Escape` unfocuses and collapses it. Rich item tooltips and all 8 channel tabs remain 100% functional.

5. **Simultaneous Side-by-Side Dual Docking for Modals**:
   * *Observation 1.2*: `templates/character_modal.html` is left-docked (`left-2 sm:left-3`) and `templates/bag_modal.html` is right-docked (`right-2 sm:right-3`).
   * *Deduction*: On desktop screens (>= 1280px width), opening both Character ('C') and Inventory ('I') simultaneously will render the Character paperdoll on the left (`width: 400px`) and the Inventory bag on the right (`width: 440px`), leaving the central 2.5D battlefield unobstructed. This achieves the classic ARPG inventory management workflow.

6. **Reactive i18n & Zero-Hardcoded Text**:
   * *Observation 1.2*: `FreeExileI18n` monitors `data-i18n`, `data-chat-i18n`, `data-tooltip-title-key`, and `data-tooltip-desc-key`.
   * *Deduction*: Every single DOM element in `client/web_pc/index.html` and its styles must use localization attributes. Language switching via the top bar select `#lang-select` triggers `FreeExileI18n.setLocale()`, updating all DOM nodes in-place without page reload.

---

## 3. Caveats

1. **Resolution Scaling & HiDPI (Retina / 4K)**:
   * Displays with `devicePixelRatio >= 2.0` require `canvas.width = Math.round(viewport.clientWidth * dpr); ctx.setTransform(dpr, 0, 0, dpr, 0, 0);` (already in `iso_math.js`). However, CSS pixel sizing must remain strictly rooted in rem / px to prevent UI elements from becoming microscopically small on 4K monitors. We recommend a media query scaling factor `@media (min-width: 2560px)` for HUD element proportions.
2. **Right-Click Context Menu Suppression**:
   * Desktop browsers default to opening a context menu on right click. In an ARPG where Right Mouse Button (RMB) triggers martial skills, the entire game canvas and viewport MUST suppress `contextmenu` via `e.preventDefault()`.
3. **Modal Z-Index Stacking**:
   * The central action bar and orbs have `z-index: 25-30`. Modals have `z-index: 40`, and floating tooltips have `z-index: 50`. This stacking order ensures modals and tooltips render on top of HUD action bars when opened.
4. **Scope Boundary**:
   * Implementation of mouse raycasting kinematics and keyboard action listeners is scoped to `survey_explorer_3`. This survey focuses on the DOM layout, visual styling, HUD structure, CSS rules, and reactive UI contracts.

---

## 4. Conclusion & Proposed Specification

### 4.1 File & Directory Structure for `client/web_pc/`

```
client/web_pc/
├── index.html                 # Dedicated PC Desktop Full-Screen Entry Point
├── css/
│   ├── pc_main.css            # 100vw/100vh Layout, Typography, Reset & Zero-Chassis Rules
│   ├── pc_hud.css             # Grimdark Bottom HUD, Orbs, Action Bar, Minimap & Chat
│   └── pc_modals.css          # Left-Docked Character & Right-Docked Bag Modals
└── js/
    ├── pc_main.js             # PC Application Orchestration, Hotkeys & Tooltips
    └── pc_hud_controller.js   # PC HUD Action Bar & Flask State Controller
```

### 4.2 Complete HTML Layout Architecture (`client/web_pc/index.html`)

```html
<!DOCTYPE html>
<html lang="vi" class="h-full w-full overflow-hidden select-none bg-stone-950">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="theme-color" content="#020617">
  <title>FreeExile - Grimdark Savage Primal ARPG (PC Client)</title>
  
  <!-- Tailwind CSS & Wuxia Typography Fonts -->
  <script src="https://www.gstatic.com/antigravity/web/dev/tailwindcss.min.js"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: {
            wuxia: ['"Be Vietnam Pro"', 'Inter', 'system-ui', 'sans-serif'],
            sans: ['"Be Vietnam Pro"', 'Inter', 'system-ui', 'sans-serif'],
            mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'monospace']
          }
        }
      }
    };
  </script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  
  <!-- Dedicated PC Stylesheets -->
  <link rel="stylesheet" href="css/pc_main.css">
  <link rel="stylesheet" href="css/pc_hud.css">
  <link rel="stylesheet" href="css/pc_modals.css">
</head>
<body class="bg-stone-950 text-stone-100 h-screen w-screen relative overflow-hidden select-none m-0 p-0" oncontextmenu="return false;">

  <!-- APP VIEWPORT CONTAINER (100vw x 100vh Full Screen) -->
  <div id="app-viewport" class="fixed inset-0 w-screen h-screen overflow-hidden flex flex-col bg-stone-950 border-0 rounded-none shadow-none">
    
    <!-- 2.5D HARDWARE ACCELERATED GAME CANVAS -->
    <canvas id="game-canvas" class="absolute inset-0 w-full h-full block cursor-crosshair z-0"></canvas>

    <!-- TOP BAR: Character Summary, Telemetry, Fast Navigation & i18n -->
    <header class="absolute top-0 inset-x-0 z-30 px-4 py-2.5 flex items-center justify-between pointer-events-none">
      
      <!-- Top Left: Character Status Badge -->
      <div id="hud-char-status-card" class="pointer-events-auto flex items-center gap-2.5 bg-stone-950/85 backdrop-blur-md border border-amber-900/40 px-3 py-1.5 rounded-lg shadow-xl cursor-pointer hover:border-amber-600/70 transition" data-tooltip-title-key="char_status_tooltip_title" data-tooltip-desc-key="char_status_tooltip_desc" data-tooltip-hotkey="C">
        <div class="w-8 h-8 rounded-md bg-stone-900 border border-amber-700/60 flex items-center justify-center font-bold text-amber-400 text-xs font-mono shadow-inner">FE</div>
        <div class="flex flex-col">
          <div class="flex items-center gap-1.5">
            <span id="txt-char-name" class="font-sans text-xs font-semibold text-stone-200 tracking-normal" data-i18n="char_name">Lưu Đày</span>
            <span id="txt-char-level" class="text-[10px] font-mono text-amber-400/90 font-bold">Lv.1</span>
          </div>
          <div class="flex items-center gap-1.5 mt-0.5">
            <div class="w-20 h-1.5 bg-stone-950 rounded-full overflow-hidden border border-stone-800">
              <div id="player-hp-bar" class="bg-gradient-to-r from-red-700 to-red-600 h-full w-full transition-all duration-100"></div>
            </div>
            <span id="player-hp-text" class="text-[8px] font-mono text-red-400 font-medium">100 / 100</span>
          </div>
        </div>
      </div>

      <!-- Top Center: Agent Orb / Offline Instinct Status Banner (when active) -->
      <div id="hud-agent-banner" class="hidden pointer-events-auto flex items-center gap-2 bg-stone-950/90 border border-amber-700/60 px-3 py-1 rounded-full shadow-lg backdrop-blur">
        <span class="w-2 h-2 rounded-full bg-amber-500 animate-pulse"></span>
        <span class="font-sans text-[10px] font-medium text-stone-200" data-i18n="telemetry_agent_orb">Chiến Hồn Tế Cốt</span>
        <span id="agent-provider-tag" class="text-[9px] font-mono px-1.5 rounded bg-black/60 text-stone-400 border border-stone-800">DeepSeek-V3</span>
        <span id="agent-stance-tag" class="text-[9px] font-mono px-1.5 rounded bg-black/60 text-amber-300 border border-amber-950" data-i18n="agent_stance_combat">Huyết Chiến</span>
        <span class="text-stone-700">|</span>
        <span id="agent-timer-text" class="font-mono text-stone-300 font-medium text-[10px]">02:00:00</span>
        <button id="btn-quick-stop-agent" class="px-1.5 py-0.5 rounded bg-stone-800 hover:bg-stone-700 text-stone-300 font-medium text-[9px] border border-stone-700 transition" data-i18n="agent_btn_revoke">Thu Hồi</button>
      </div>

      <!-- Top Right: Desktop Navigation Bar & Telemetry -->
      <div class="pointer-events-auto flex items-center gap-1.5 bg-stone-950/85 backdrop-blur-md border border-stone-800 px-2 py-1 rounded-lg shadow-xl">
        <!-- Telemetry -->
        <span class="flex items-center gap-1 font-mono text-[10px] text-stone-300 px-1">
          <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
          <span id="hud-fps">120</span> FPS
        </span>
        <span class="text-stone-700">|</span>
        <span class="font-mono text-[10px] text-stone-400 px-1">
          <span id="hud-ping">12</span>ms
        </span>
        <span class="w-px h-3.5 bg-stone-800 my-auto"></span>

        <!-- System & Game Windows Hotkey Buttons -->
        <button id="btn-open-character" class="pc-nav-btn" data-tooltip-title-key="tooltip_character_title" data-tooltip-desc-key="tooltip_character_desc" data-tooltip-hotkey="C">
          <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8z"/><path d="M6 21v-2a6 6 0 0 1 12 0v2"/><path d="M12 11v4"/><path d="M9 17h6"/></svg>
        </button>
        <button id="btn-open-bag" class="pc-nav-btn" data-tooltip-title-key="tooltip_bag_title" data-tooltip-desc-key="tooltip_bag_desc" data-tooltip-hotkey="I">
          <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
        </button>
        <button id="btn-open-meridian" class="pc-nav-btn" data-tooltip-title-key="tooltip_meridian_title" data-tooltip-desc-key="tooltip_meridian_desc" data-tooltip-hotkey="K">
          <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="4" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="20" r="2"/><circle cx="5" cy="12" r="2"/><circle cx="19" cy="12" r="2"/><line x1="12" y1="6" x2="12" y2="10"/><line x1="12" y1="14" x2="12" y2="18"/><line x1="7" y1="12" x2="10" y2="12"/><line x1="14" y1="12" x2="17" y2="12"/></svg>
        </button>
        <button id="btn-open-worldmap" class="pc-nav-btn" data-tooltip-title-key="tooltip_worldmap_title" data-tooltip-desc-key="tooltip_worldmap_desc" data-tooltip-hotkey="M">
          <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><polygon points="3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21"/><line x1="9" y1="3" x2="9" y2="18"/><line x1="15" y1="6" x2="15" y2="21"/></svg>
        </button>
        <button id="btn-open-atlas" class="pc-nav-btn" data-tooltip-title-key="tooltip_atlas_title" data-tooltip-desc-key="tooltip_atlas_desc" data-tooltip-hotkey="G">
          <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>
        </button>
        <button id="btn-open-hideout" class="pc-nav-btn" data-tooltip-title-key="tooltip_hideout_title" data-tooltip-desc-key="tooltip_hideout_desc" data-tooltip-hotkey="H">
          <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M4 21V9l8-6 8 6v12M9 21v-7h6v7"/></svg>
        </button>
        <button id="btn-open-quests" class="pc-nav-btn" data-tooltip-title-key="tooltip_quests_title" data-tooltip-desc-key="tooltip_quests_desc" data-tooltip-hotkey="J">
          <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
        </button>
        <button id="btn-open-settings" class="pc-nav-btn" data-tooltip-title-key="tooltip_settings_title" data-tooltip-desc-key="tooltip_settings_desc" data-tooltip-hotkey="Esc">
          <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
        </button>

        <span class="w-px h-3.5 bg-stone-800 my-auto"></span>

        <!-- 9-Language Reactive Selector -->
        <select id="lang-select" class="bg-stone-900 border border-stone-800 text-stone-300 text-[10px] font-mono px-2 py-0.5 rounded focus:outline-none focus:border-amber-600 cursor-pointer hover:border-stone-700 transition" data-tooltip-title-key="tooltip_lang_title" data-tooltip-desc-key="tooltip_lang_desc">
          <option value="vi" selected>VI</option>
          <option value="en">EN</option>
          <option value="zh">ZH</option>
          <option value="ja">JA</option>
          <option value="ko">KO</option>
          <option value="th">TH</option>
          <option value="de">DE</option>
          <option value="ru">RU</option>
          <option value="es">ES</option>
        </select>
      </div>
    </header>

    <!-- TOP-RIGHT HUD MINIMAP (180x130 PC Specification) -->
    <div id="minimap-container" class="pointer-events-auto absolute top-14 right-4 z-30 flex flex-col items-center bg-stone-950/90 backdrop-blur-md border border-stone-800/90 rounded-xl p-1.5 shadow-2xl select-none" data-tooltip-title="Bản Đồ Thu Nhỏ" data-tooltip-desc="Bản đồ địa hình hoang vực, nhấp để mở Toàn Cảnh." data-tooltip-hotkey="M">
      <div class="flex items-center justify-between w-full px-1.5 mb-1 text-[9px] font-mono text-stone-400">
        <span id="minimap-zone-label" class="text-amber-400/90 font-bold truncate max-w-[110px]">Táng Kiếm Nhai</span>
        <span id="minimap-coords" class="text-stone-400 font-mono font-medium">0,0</span>
      </div>
      <div class="relative rounded-lg overflow-hidden border border-stone-800/80 bg-black/80">
        <canvas id="minimap-canvas" width="180" height="130" class="block"></canvas>
        <!-- Compass Cardinal Points -->
        <span class="absolute top-0.5 left-1/2 -translate-x-1/2 text-[8px] font-mono font-bold text-amber-500/80 pointer-events-none">N</span>
        <span class="absolute bottom-0.5 left-1/2 -translate-x-1/2 text-[8px] font-mono font-bold text-stone-500/80 pointer-events-none">S</span>
        <span class="absolute left-1 top-1/2 -translate-y-1/2 text-[8px] font-mono font-bold text-stone-500/80 pointer-events-none">W</span>
        <span class="absolute right-1 top-1/2 -translate-y-1/2 text-[8px] font-mono font-bold text-stone-500/80 pointer-events-none">E</span>
      </div>
    </div>

    <!-- COLLAPSIBLE CHAT DOCK (Bottom-Left above Globe) -->
    <div id="chat-dock" class="absolute bottom-32 left-5 z-30 pointer-events-auto w-[420px] select-none">
      <!-- Minimized Ticker Bar -->
      <div id="chat-minimized-bar" class="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-stone-950/85 backdrop-blur-md border border-stone-800 shadow-xl cursor-pointer hover:border-amber-700/60 transition group">
        <span class="text-xs">💬</span>
        <span id="chat-ticker-channel" class="font-bold text-[11px] text-amber-400">[Thế Giới]</span>
        <span id="chat-ticker-text" class="text-[11px] text-stone-400 truncate flex-1 group-hover:text-stone-200" data-chat-i18n="chat_ticker_default">Nhấn Enter để mở kênh đàm đạo...</span>
      </div>
      <!-- Expanded Panel -->
      <div id="chat-expanded-panel" class="hidden flex flex-col bg-stone-950/95 backdrop-blur-md border border-stone-800/90 rounded-xl shadow-2xl overflow-hidden h-72">
        <div class="flex items-center justify-between px-2.5 py-1 bg-stone-900/90 border-b border-stone-800 text-[10px]">
          <div class="flex items-center gap-1 overflow-x-auto no-scrollbar py-0.5">
            <button class="chat-channel-tab active" data-channel-id="1" data-chat-i18n="channel_world">Thế Giới</button>
            <button class="chat-channel-tab" data-channel-id="2" data-chat-i18n="channel_zone">Khu Vực</button>
            <button class="chat-channel-tab" data-channel-id="3" data-chat-i18n="channel_guild">Bang Hội</button>
            <button class="chat-channel-tab" data-channel-id="4" data-chat-i18n="channel_party">Đội Ngũ</button>
            <button class="chat-channel-tab" data-channel-id="5" data-chat-i18n="channel_whisper">Mật Thư</button>
            <button class="chat-channel-tab" data-channel-id="6" data-chat-i18n="channel_system">Hệ Thống</button>
          </div>
          <button id="chat-btn-collapse" class="w-5 h-5 flex items-center justify-center rounded hover:bg-stone-800 text-stone-400 hover:text-stone-200 text-xs font-bold transition ml-1">✕</button>
        </div>
        <div id="chat-messages-container" class="flex-1 p-2.5 overflow-y-auto space-y-1.5 font-sans text-xs"></div>
        <div class="p-2 bg-stone-900/90 border-t border-stone-800 flex items-center gap-2">
          <input id="chat-input" type="text" placeholder="Nhập tin nhắn..." data-i18n-placeholder="chat_input_placeholder_default" maxlength="200" class="flex-1 bg-stone-950 border border-stone-800 rounded px-2.5 py-1 text-xs text-stone-200 focus:outline-none focus:border-amber-600/70" />
          <span id="chat-cooldown-badge" class="hidden text-[9px] font-mono px-1.5 py-0.5 rounded bg-rose-950 text-rose-300 border border-rose-800/60 whitespace-nowrap" data-chat-i18n="chat_badge_wait_initial">Chờ 15s</span>
          <button id="chat-send-btn" class="px-3 py-1 rounded bg-amber-600 hover:bg-amber-500 active:scale-95 text-stone-950 font-bold text-xs transition" data-chat-i18n="chat_btn_send">Gửi</button>
        </div>
      </div>
    </div>

    <!-- GRIMDARK ACTION HUD: DUAL ORBS & CENTRAL ACTION BAR CLUSTER -->
    <div id="hud-low-hp-vignette" class="hidden"></div>
    <div id="pc-action-hud" class="absolute bottom-0 inset-x-0 z-24 pointer-events-none flex items-end justify-between px-6 pb-3">
      
      <!-- Bottom-Left: Vitality / Blood Fluid Globe -->
      <div id="hud-life-orb-wrapper" class="orb-wrapper pointer-events-auto" data-tooltip-title="Khí Huyết" data-tooltip-desc="Sinh mệnh bản nguyên, nhấn 1 hoặc click để phục dược." data-tooltip-hotkey="1 / Potion">
        <div id="hud-life-orb" class="orb-globe orb-life">
          <canvas id="life-orb-canvas" width="180" height="180" class="orb-canvas"></canvas>
          <div class="orb-bezel"></div><div class="orb-sheen"></div>
          <div id="life-orb-warning" class="orb-pulse-warning hidden"></div>
          <div class="orb-label-overlay">
            <span id="txt-life-cur" class="orb-cur-val">100</span>
            <span class="orb-divider">/</span>
            <span id="txt-life-max" class="orb-max-val">100</span>
          </div>
          <span class="orb-type-tag">HP</span>
        </div>
      </div>

      <!-- Center: Central PoE2-Style Action Bar -->
      <div id="hud-skill-bar" class="hud-skill-bar-pc pointer-events-auto flex flex-col items-center">
        <div class="flex items-end gap-3 px-4 py-2 rounded-2xl bg-stone-950/85 backdrop-blur-md border border-stone-800/80 shadow-[0_10px_35px_rgba(0,0,0,0.9)]">
          
          <!-- Flask Group: Slots 1, 2, 3, 4, 5 -->
          <div class="flex items-center gap-1.5 pr-2 border-r border-stone-800/80">
            <button id="skill-flask-1" class="flask-slot" data-slot-id="flask-1" data-key="1" data-tooltip-title="Bình Huyết Thạch" data-tooltip-desc="Hồi phục Khí Huyết tức thời." data-tooltip-hotkey="1">
              <div class="flask-fill bg-red-700/80"></div>
              <span class="flask-badge">1</span>
            </button>
            <button id="skill-flask-2" class="flask-slot" data-slot-id="flask-2" data-key="2" data-tooltip-title="Chân Khí Dược" data-tooltip-desc="Hồi phục Chân Khí thi triển chiêu thức." data-tooltip-hotkey="2">
              <div class="flask-fill bg-blue-700/80"></div>
              <span class="flask-badge">2</span>
            </button>
            <button id="skill-flask-3" class="flask-slot" data-slot-id="flask-3" data-key="3" data-tooltip-title="Thiết Giáp Thang" data-tooltip-desc="Gia tăng 40% Giáp Vật Lý trong 5 giây." data-tooltip-hotkey="3">
              <div class="flask-fill bg-amber-700/80"></div>
              <span class="flask-badge">3</span>
            </button>
            <button id="skill-flask-4" class="flask-slot" data-slot-id="flask-4" data-key="4" data-tooltip-title="Thần Hành Thủy" data-tooltip-desc="Gia tăng 30% Tốc Độ Di Chuyển trong 4 giây." data-tooltip-hotkey="4">
              <div class="flask-fill bg-emerald-700/80"></div>
              <span class="flask-badge">4</span>
            </button>
            <button id="skill-flask-5" class="flask-slot" data-slot-id="flask-5" data-key="5" data-tooltip-title="Cuồng Nộ Tế Huyết" data-tooltip-desc="Gia tăng 25% Tỷ Lệ Chí Mạng trong 4 giây." data-tooltip-hotkey="5">
              <div class="flask-fill bg-purple-700/80"></div>
              <span class="flask-badge">5</span>
            </button>
          </div>

          <!-- Martial Skills Group: Q, W, E, R -->
          <div class="flex items-center gap-2">
            <button id="skill-q" class="skill-slot" data-slot-id="q" data-key="Q" data-tooltip-title-key="tooltip_skill_q_title" data-tooltip-desc-key="tooltip_skill_q_desc" data-tooltip-hotkey="Q">
              <div class="skill-icon-wrap"><div class="skill-icon icon-atlas" style="--atlas-col: 2; --atlas-row: 1;"></div><div class="cooldown-overlay"><span class="cooldown-counter"></span></div><div class="ready-flash-emitter"></div></div>
              <span class="skill-keybind-badge">Q</span>
            </button>
            <button id="skill-w" class="skill-slot" data-slot-id="w" data-key="W" data-tooltip-title-key="tooltip_skill_w_title" data-tooltip-desc-key="tooltip_skill_w_desc" data-tooltip-hotkey="W">
              <div class="skill-icon-wrap"><div class="skill-icon icon-atlas" style="--atlas-col: 1; --atlas-row: 2;"></div><div class="cooldown-overlay"><span class="cooldown-counter"></span></div><div class="ready-flash-emitter"></div></div>
              <span class="skill-keybind-badge">W</span>
            </button>
            <button id="skill-e" class="skill-slot" data-slot-id="e" data-key="E" data-tooltip-title-key="tooltip_skill_e_title" data-tooltip-desc-key="tooltip_skill_e_desc" data-tooltip-hotkey="E">
              <div class="skill-icon-wrap"><div class="skill-icon icon-atlas" style="--atlas-col: 0; --atlas-row: 0;"></div><div class="cooldown-overlay"><span class="cooldown-counter"></span></div><div class="ready-flash-emitter"></div></div>
              <span class="skill-keybind-badge">E</span>
            </button>
            <button id="skill-r" class="skill-slot" data-slot-id="r" data-key="R" data-tooltip-title="Hàn Băng Quyết" data-tooltip-desc="Băng phong vạn trượng làm chậm và đóng băng mục tiêu." data-tooltip-hotkey="R">
              <div class="skill-icon-wrap"><div class="skill-icon icon-atlas" style="--atlas-col: 1; --atlas-row: 1;"></div><div class="cooldown-overlay"><span class="cooldown-counter"></span></div><div class="ready-flash-emitter"></div></div>
              <span class="skill-keybind-badge">R</span>
            </button>
          </div>

          <span class="w-px h-8 bg-stone-800 my-auto"></span>

          <!-- Mouse Interaction Slots: LMB (Primary/Move) & RMB (Core Skill) -->
          <div class="flex items-center gap-2">
            <button id="skill-lmb" class="skill-slot skill-slot-primary" data-slot-id="lmb" data-key="LMB" data-tooltip-title="Trảm Kích / Di Chuyển" data-tooltip-desc="Nhấp chuột trái để di chuyển hoặc chém đòn cơ bản." data-tooltip-hotkey="LMB">
              <div class="skill-icon-wrap"><div class="skill-icon icon-atlas" style="--atlas-col: 1; --atlas-row: 0;"></div><div class="cooldown-overlay"><span class="cooldown-counter"></span></div><div class="ready-flash-emitter"></div></div>
              <span class="skill-keybind-badge font-bold">LMB</span>
            </button>
            <button id="skill-rmb" class="skill-slot skill-slot-primary" data-slot-id="rmb" data-key="RMB" data-tooltip-title="Cửu Tiêu Lôi Kiếm" data-tooltip-desc="Nhấp chuột phải để thi triển chiêu thức võ học trấn phái." data-tooltip-hotkey="RMB">
              <div class="skill-icon-wrap"><div class="skill-icon icon-atlas" style="--atlas-col: 0; --atlas-row: 0;"></div><div class="cooldown-overlay"><span class="cooldown-counter"></span></div><div class="ready-flash-emitter"></div></div>
              <span class="skill-keybind-badge font-bold">RMB</span>
            </button>
          </div>

          <!-- Spacebar Dodge Slot -->
          <button id="skill-dodge" class="skill-slot skill-slot-dodge" data-slot-id="dodge" data-key="SPACE" data-tooltip-title-key="tooltip_skill_dodge_title" data-tooltip-desc-key="tooltip_skill_dodge_desc" data-tooltip-hotkey="Space">
            <div class="skill-icon-wrap"><div class="skill-icon icon-dodge"><svg class="w-5 h-5 text-stone-200" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg></div><div class="cooldown-overlay"><span class="cooldown-counter"></span></div><div class="ready-flash-emitter"></div></div>
            <span class="skill-keybind-badge">Space</span>
            <span class="skill-charges-badge" id="dodge-charges-badge">3</span>
          </button>
        </div>

        <!-- Experience Bar Spanning Under Action Bar -->
        <div class="w-full max-w-xl h-1.5 bg-stone-950 rounded-full overflow-hidden border border-stone-800 mt-1 relative" data-tooltip-title="Tu Vi / Kinh Nghiệm" data-tooltip-desc="Tiến độ tích lũy để thăng cấp cảnh giới.">
          <div id="player-exp-bar" class="bg-gradient-to-r from-amber-600 to-amber-400 h-full w-0 transition-all duration-100"></div>
          <div class="absolute inset-0 flex justify-between pointer-events-none px-2">
            <span class="w-px h-full bg-black/50"></span><span class="w-px h-full bg-black/50"></span>
            <span class="w-px h-full bg-black/50"></span><span class="w-px h-full bg-black/50"></span>
          </div>
        </div>
      </div>

      <!-- Bottom-Right: Qi / Mana Fluid Globe -->
      <div id="hud-mana-orb-wrapper" class="orb-wrapper pointer-events-auto" data-tooltip-title="Chân Khí" data-tooltip-desc="Năng lượng bản nguyên để thi triển võ công." data-tooltip-hotkey="Skills">
        <div id="hud-mana-orb" class="orb-globe orb-mana">
          <canvas id="mana-orb-canvas" width="180" height="180" class="orb-canvas"></canvas>
          <div class="orb-bezel"></div><div class="orb-sheen"></div>
          <div class="orb-label-overlay">
            <span id="txt-mana-cur" class="orb-cur-val">50</span>
            <span class="orb-divider">/</span>
            <span id="txt-mana-max" class="orb-max-val">50</span>
          </div>
          <span class="orb-type-tag">QI</span>
        </div>
      </div>
    </div>

    <!-- PROXIMITY INTERACTION PROMPT (Portal, NPC, Loot) -->
    <button id="hud-interaction-prompt" class="hidden pointer-events-auto absolute bottom-28 left-1/2 -translate-x-1/2 z-30 flex items-center gap-2 bg-stone-950/90 hover:bg-stone-900 border border-stone-700/80 hover:border-stone-500 backdrop-blur-md px-3.5 py-1.5 rounded-full shadow-lg transition-all duration-150 transform hover:scale-[1.02] cursor-pointer" data-key="F">
      <div class="w-5 h-5 rounded-full bg-stone-800 border border-stone-700 flex items-center justify-center text-stone-300 text-xs"><span id="interaction-icon">🌀</span></div>
      <div class="flex items-center gap-1.5"><span id="interaction-title" class="font-sans text-xs font-medium text-stone-200 tracking-wider" data-i18n="interaction_step_through_portal">Qua Cổng [F]</span></div>
    </button>

    <!-- DYNAMIC MODALS MOUNT CONTAINER (Mounted by UITemplateManager) -->
    <div id="modal-container" class="contents"></div>

    <!-- PAUSE GAME STATE OVERLAY (ESC Hotkey) -->
    <div id="overlay-pause" class="hidden absolute inset-0 z-[35] bg-black/70 backdrop-blur-[3px] flex flex-col items-center justify-center select-none pointer-events-auto transition-opacity duration-150">
      <div class="px-8 py-6 rounded-2xl bg-stone-950/95 border border-amber-600/60 shadow-2xl flex flex-col items-center gap-3 text-center max-w-sm animate-in fade-in zoom-in-95">
        <div class="w-12 h-12 rounded-full bg-amber-500/10 border border-amber-500/30 flex items-center justify-center text-amber-400 text-2xl mb-1">⏸️</div>
        <h2 class="text-xl font-bold text-amber-400 tracking-widest uppercase">TẠM DỪNG / PAUSED</h2>
        <p class="text-xs text-stone-400 leading-normal">Nhấn <kbd class="px-2 py-0.5 rounded bg-stone-800 border border-stone-700 text-amber-300 font-mono text-xs">ESC</kbd> hoặc nhấp chuột để tiếp tục</p>
      </div>
    </div>
  </div>

  <!-- MODERN WUXIA FLOATING TOOLTIP -->
  <div id="game-tooltip" class="pointer-events-none fixed z-50 hidden opacity-0 transition-all duration-150 bg-stone-950/95 border border-stone-800 backdrop-blur-md rounded-xl px-3.5 py-2.5 shadow-2xl text-stone-200 max-w-sm">
    <div class="flex items-center justify-between gap-3 mb-1">
      <div class="flex items-center gap-1.5"><span id="tooltip-icon" class="text-sm"></span><span id="tooltip-title" class="font-sans text-xs font-bold text-amber-300/90"></span></div>
      <span id="tooltip-hotkey" class="font-mono text-[9px] bg-stone-900 px-1.5 py-0.5 rounded text-stone-400 border border-stone-800"></span>
    </div>
    <p id="tooltip-desc" class="text-xs text-stone-400 leading-snug"></p>
  </div>

  <!-- ITEM LINK HMAC TOOLTIP MODAL -->
  <div id="modal-item-link-tooltip" class="hidden fixed inset-0 z-50 bg-black/70 backdrop-blur-xs flex items-center justify-center p-4">
    <div class="bg-gradient-to-b from-stone-900 via-stone-900 to-stone-950 border border-amber-600/80 rounded-2xl max-w-sm w-full p-4 shadow-2xl flex flex-col gap-2 relative">
      <div class="flex items-start justify-between border-b border-stone-800/80 pb-2">
        <div class="flex items-center gap-2">
          <span id="item-tooltip-icon" class="text-2xl">🗡️</span>
          <div class="flex flex-col">
            <span id="item-tooltip-name" class="font-sans text-sm font-bold text-amber-400" data-chat-i18n="chat_item_fallback_name">Vật Phẩm</span>
            <span id="item-tooltip-sub" class="text-[10px] text-stone-400 font-mono">Thần Phẩm • Kim Hệ</span>
          </div>
        </div>
        <button id="btn-close-item-tooltip" class="w-6 h-6 rounded-md bg-stone-800 hover:bg-stone-700 text-stone-400 hover:text-stone-100 flex items-center justify-center text-xs font-bold transition">✕</button>
      </div>
      <div id="item-tooltip-affixes" class="bg-black/40 border border-stone-800/80 rounded-xl p-2.5 space-y-1 font-mono text-xs"></div>
      <div class="flex items-center justify-between pt-1 border-t border-stone-800/80 text-[10px] text-stone-400">
        <span><span data-chat-i18n="chat_item_crafter_label">Chế tác:</span> <span id="item-tooltip-crafter" class="text-stone-200">Thiên Công</span></span>
        <span id="item-tooltip-hmac-badge" class="px-1.5 py-0.5 rounded text-[9px] font-mono font-bold bg-emerald-950 text-emerald-400 border border-emerald-700/60" data-chat-i18n="chat_item_badge_verified">✓ HMAC Xác Thực</span>
      </div>
    </div>
  </div>

  <!-- Shared Engine & Core Modules from ../webapp/ -->
  <script src="../webapp/js/data/i18n_catalog.js"></script>
  <script type="module" src="../webapp/js/data/chat_i18n_catalog.js"></script>
  <script type="module" src="../webapp/js/data/map_style_catalog.js"></script>
  <script type="module" src="../webapp/js/engine/biome_texture_manager.js"></script>
  <script src="../webapp/js/data/i18n.js"></script>
  <script src="../webapp/js/data/monster_catalog.js"></script>
  <script type="module" src="../webapp/js/data/meridian_catalog.js"></script>
  <script src="../webapp/js/engine/iso_math.js"></script>
  <script src="../webapp/js/engine/tile_grid_loader.js"></script>
  <script src="../webapp/js/engine/tile_map_renderer.js"></script>
  <script type="module" src="../webapp/js/engine/boss_gate_controller.js"></script>
  <script src="../webapp/js/engine/collision_engine.js"></script>
  <script type="module" src="../webapp/js/audio/sfx_engine.js"></script>
  <script src="../webapp/js/engine/audio_haptics.js"></script>
  <script src="../webapp/js/engine/loot_filter.js"></script>
  <script src="../webapp/js/engine/monster_loot_dropper.js"></script>
  <script type="module" src="../webapp/js/engine/progression_system.js"></script>
  <script src="../webapp/js/engine/combat_skills.js"></script>
  <script type="module" src="../webapp/js/engine/grid_pathfinder.js"></script>
  <script src="../webapp/js/engine/monster_system.js"></script>
  <script type="module" src="../webapp/js/data/wilderness_zone_packs.js"></script>
  <script type="module" src="../webapp/js/engine/monster_pack_system.js"></script>
  <script type="module" src="../webapp/js/engine/ambush_trigger_system.js"></script>
  <script src="../webapp/js/engine/world_renderer.js"></script>
  <script src="../webapp/js/engine/vfx_renderer.js"></script>
  <script src="../webapp/js/engine/animation_engine.js"></script>
  <script type="module" src="../webapp/js/engine/telegraph_renderer.js"></script>
  <script src="../webapp/js/engine/entity_renderer.js"></script>
  <script src="../webapp/js/engine/canvas_renderer.js"></script>
  <script type="module" src="../webapp/js/engine/combat_feel_engine.js"></script>
  <script type="module" src="../webapp/js/engine/vfx_pool.js"></script>
  <script type="module" src="../webapp/js/engine/weapon_swing_renderer.js"></script>

  <!-- Templates & UI Systems -->
  <script src="../webapp/js/ui/templates/template_catalog_system.js"></script>
  <script src="../webapp/js/ui/templates/template_catalog_auth.js"></script>
  <script src="../webapp/js/ui/templates/template_catalog_inventory.js"></script>
  <script src="../webapp/js/ui/templates/template_catalog_world.js"></script>
  <script src="../webapp/js/ui/templates/template_catalog_activities.js"></script>
  <script src="../webapp/js/ui/templates/template_catalog_endgame.js"></script>
  <script src="../webapp/js/ui/template_manager.js"></script>
  <script type="module" src="../webapp/js/ui/hud_orbs.js"></script>
  <script type="module" src="../webapp/js/ui/skill_bar_controller.js"></script>
  <script type="module" src="../webapp/js/ui/meridian_pan_zoom.js"></script>
  <script type="module" src="../webapp/js/ui/meridian_vault.js"></script>
  <script type="module" src="../webapp/js/ui/shop_megashop.js"></script>
  <script type="module" src="../webapp/js/ui/character_equipment.js"></script>
  <script type="module" src="../webapp/js/ui/inventory_stash.js"></script>
  <script type="module" src="../webapp/js/ui/seasonal_reset.js"></script>
  <script type="module" src="../webapp/js/ui/agent_orb.js"></script>
  <script type="module" src="../webapp/js/ui/worldmap_dungeons.js"></script>
  <script type="module" src="../webapp/js/ui/hideout_gates.js"></script>
  <script type="module" src="../webapp/js/ui/endgame_atlas.js"></script>
  <script type="module" src="../webapp/js/ui/war_fog.js"></script>
  <script type="module" src="../webapp/js/ui/minimap_hud.js"></script>
  <script type="module" src="../webapp/js/ui/feedback.js"></script>
  <script type="module" src="../webapp/js/ui/auth.js"></script>
  <script type="module" src="../webapp/js/ui/char_creation.js"></script>
  <script type="module" src="../webapp/js/ui/tooltips.js"></script>
  <script type="module" src="../webapp/js/ui/story_quest_board.js"></script>
  <script type="module" src="../webapp/js/ui/dialogue_npc.js"></script>
  <script type="module" src="../webapp/js/ui/divine_vault_modal.js"></script>
  <script type="module" src="../webapp/js/ui/chat_ui.js"></script>

  <!-- Dedicated PC Application Script -->
  <script type="module" src="js/pc_main.js"></script>
</body>
</html>
```

### 4.3 Dedicated PC CSS Specifications

#### `client/web_pc/css/pc_main.css`
* Resets `html`, `body` to `margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;`.
* Enforces `touch-action: none; overscroll-behavior: none; user-select: none;`.
* Declares standard font variables `--font-wuxia`, `--font-body`, `--font-mono`.
* Enforces zero chassis: `#app-viewport` is `position: fixed; inset: 0; width: 100vw; height: 100vh; border-radius: 0; border: none; box-shadow: none;`.
* Widescreen & Ultrawide optimization media queries (`min-width: 1920px`, `min-width: 2560px`).

#### `client/web_pc/css/pc_hud.css`
* **Dual Fluid Orbs**:
  * `.orb-globe`: 108px diameter, gothic dark iron ring with inner/outer drop shadows (`box-shadow: 0 10px 30px rgba(0,0,0,0.95), inset 0 0 20px rgba(0,0,0,0.95)`).
  * Smooth fluid dynamics through `HudOrbs.update(hp, maxHp, mana, maxMana)`.
  * Numerical overlay centered in high-contrast monospace tabular numerals.
* **Centered Action Bar**:
  * `.hud-skill-bar-pc`: `position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 25; pointer-events: auto;`.
  * Flask slots (`.flask-slot`): 38px width × 54px height, arched vial top, transparent glass reflection, vertical liquid fill animation, key badge `1` to `5`.
  * Skill slots (`.skill-slot`): 48px × 48px square/round with 1.5px brass/steel borders, 360° clockwise conic sweep cooldown, yellow countdown font.
  * Primary / Mouse slots (`.skill-slot-primary`): 54px × 54px with distinctive `LMB` and `RMB` badges.
  * Dodge slot (`.skill-slot-dodge`): Distinct dash icon with 3-pip charge counter.
* **Top-Right Minimap**:
  * Metallic border, compass cardinal markers `N`, `S`, `E`, `W`.
  * Active player blip with rotating heading notch.
* **Chat Dock**:
  * Minimized bar and expanded multi-channel panel, positioned above the Health Globe (`bottom: 130px; left: 20px;`).
  * Styled with rich item tooltip integration.

#### `client/web_pc/css/pc_modals.css`
* **Character Sheet Modal (`#modal-character`)**:
  * `position: absolute; left: 24px; top: 68px; bottom: 125px; width: 400px; max-width: 45vw; z-index: 40; border-radius: 16px;`.
* **Inventory / Bag Modal (`#modal-bag`)**:
  * `position: absolute; right: 24px; top: 68px; bottom: 125px; width: 440px; max-width: 45vw; z-index: 40; border-radius: 16px;`.
* **Side-by-Side Dual-Docking**:
  * When both `#modal-character` and `#modal-bag` are open, they flank the screen seamlessly, leaving the central 2.5D game view and character completely unobstructed.
* **Settings Modal (`#modal-settings`)**:
  * `position: absolute; inset: 0; margin: auto; max-width: 680px; max-height: 540px; height: fit-content; z-index: 42; border-radius: 20px;`.

---

## 5. Verification Method

To independently verify this specification and its subsequent implementation:

1. **Static Inspection & Code Hygiene**:
   * Inspect `client/web_pc/index.html` to confirm:
     - No occurrences of `.iphone-frame`, `#simulator-bar`, or `#joystick-zone`.
     - 100% of visible UI text contains either `data-i18n="..."` or `data-chat-i18n="..."`.
   * Run the hygiene linter:
     ```bash
     python tools/lint/check_code_and_doc_hygiene.py --strict
     python tools/lint/check_i18n_hygiene.py --strict
     ```
2. **Browser Visual & DOM Audit (via Chrome DevTools MCP or Headless Browser)**:
   * Load `http://localhost:8080/client/web_pc/index.html` (or test server port).
   * Evaluate DOM viewport bounding box:
     ```javascript
     const vp = document.getElementById('app-viewport');
     console.assert(vp.clientWidth === window.innerWidth, "Viewport width must equal 100vw");
     console.assert(vp.clientHeight === window.innerHeight, "Viewport height must equal 100vh");
     console.assert(document.body.scrollHeight === window.innerHeight, "No vertical scrollbars");
     console.assert(document.body.scrollWidth === window.innerWidth, "No horizontal scrollbars");
     ```
   * Confirm Absence of Mobile Simulator:
     ```javascript
     console.assert(!document.querySelector('.iphone-frame'), "Zero mobile frame");
     console.assert(!document.getElementById('simulator-bar'), "Zero simulator bar");
     console.assert(!document.getElementById('joystick-zone'), "Zero touch joystick");
     ```
   * Confirm Symmetrical HUD & Action Bar:
     ```javascript
     const lifeOrb = document.getElementById('hud-life-orb');
     const manaOrb = document.getElementById('hud-mana-orb');
     const skillBar = document.getElementById('hud-skill-bar');
     console.assert(lifeOrb && manaOrb && skillBar, "Dual orbs and skill bar exist");
     ```
   * Confirm Reactive i18n Switching:
     ```javascript
     window.FreeExileI18n.setLocale('en');
     console.assert(document.getElementById('txt-char-name').textContent === 'Exile', "i18n EN switch success");
     window.FreeExileI18n.setLocale('vi');
     console.assert(document.getElementById('txt-char-name').textContent === 'Lưu Đày', "i18n VI switch success");
     ```
3. **Invalidation Conditions**:
   * Any presence of `.iphone-frame`, `#simulator-bar`, or mobile joystick elements in `client/web_pc/`.
   * Any hardcoded Vietnamese string in `client/web_pc/` that fails to re-render when calling `FreeExileI18n.setLocale('en')`.
   * Action bar or orbs failing to align properly across 16:9, 16:10, and 21:9 window resizes.