微观世界面板优化

world.html

@@ -353,6 +353,62 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa
   border-bottom: 2px solid var(--mv-accent, #4aafff);
   background-image: linear-gradient(0deg, rgba(12,18,32,0.97), rgba(8,12,22,0.97));
   box-shadow: 0 -6px 24px rgba(0,0,0,.45);
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  position: relative;
+}
+/* 微观世界底部角色 HUD：金币 / 等级 / 经验条 横向展开 */
+#charHud {
+  display: none;
+  align-items: center;
+  padding: 5px 14px;
+  background: rgba(10,16,28,.82);
+  border: 1px solid rgba(100,200,255,.32);
+  border-radius: 10px;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 14px rgba(0,0,0,.35);
+  backdrop-filter: blur(6px);
+  color: #e0e8f2;
+  pointer-events: auto;
+}
+#charHud .ch-row {
+  display: flex; align-items: center; gap: 18px;
+  white-space: nowrap;
+}
+#charHud .ch-gold {
+  display: inline-flex; align-items: center; gap: 5px;
+  font-size: 14px; color: #ffd54f; font-weight: 700;
+}
+#charHud .ch-gold b { font-size: 16px; }
+#charHud .ch-lv {
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: 14px; color: #ffd27f; font-weight: 700;
+}
+#charHud .ch-exp-wrap {
+  display: inline-flex; align-items: center; gap: 10px;
+  min-width: 220px;
+}
+#charHud .ch-exp-bar {
+  flex: 1; height: 10px; min-width: 120px;
+  background: rgba(255,255,255,.12); border-radius: 5px; overflow: hidden;
+}
+#charHud .ch-exp-bar > div {
+  height: 100%; width: 0%;
+  background: linear-gradient(90deg,#3a7afe,#46e0c8);
+  border-radius: 5px; transition: width .35s ease;
+}
+#charHud .ch-exp-txt { font-size: 12px; color: #9fb0c0; min-width: 92px; text-align: right; }
+@media (max-width: 900px) {
+  #charHud .ch-row { gap: 12px; }
+  #charHud .ch-exp-wrap { min-width: 160px; }
+  #charHud .ch-exp-bar { min-width: 80px; }
+}
+@media (max-width: 640px) {
+  #charHud { padding: 5px 10px; }
+  #charHud .ch-row { gap: 10px; }
+  #charHud .ch-gold, #charHud .ch-lv { font-size: 12px; }
+  #charHud .ch-gold b { font-size: 13px; }
+  #charHud .ch-exp-wrap { min-width: 130px; }
+  #charHud .ch-exp-bar { min-width: 60px; }
+  #charHud .ch-exp-txt { font-size: 11px; min-width: 78px; }
 }
 
 /* 顶部工具按钮 */
@@ -1119,7 +1175,6 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa
     <button class="backBtn" id="backBtn">← 返回世界</button>
     <span class="microTitle" id="microTitle">平原村落</span>
     <span class="microSubtitle" id="microSubtitle">微观世界视角</span>
-    <div id="charHud" style="display:none;margin-left:auto;min-width:200px;padding:6px 12px;background:rgba(0,0,0,.35);border:1px solid rgba(100,200,255,.3);border-radius:10px;font-size:13px;color:#e0e8f2;"></div>
   </div>
   <div id="microBody">
     <div id="microTopBar">
@@ -1167,6 +1222,7 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa
       <div class="mv-bottom-actions">
         <button class="mv-tool" id="microBuildBtn" title="建造模式：左键放置 / 右键删除 / 拖拽平移">🔨 建造</button>
       </div>
+      <div id="charHud"></div>
     </div>
   </div>
 </div>
@@ -2266,28 +2322,26 @@ async function microSaveCreatures() {
 }
 
 // 角色 HUD：金币 / 等级（微观视图右上角）
+// 角色 HUD：金币 / 等级 / 经验条（微观视图底部横向展开）
 function microRenderCharHud() {
   const el = document.getElementById('charHud');
   if (!el) return;
   if (!microChar) { el.style.display = 'none'; return; }
-  el.style.display = '';
   const gold = microChar.gold != null ? microChar.gold : 0;
   const lv = microChar.level || 1;
   const exp = microChar.exp != null ? microChar.exp : 0;
   const expMax = microChar.exp_max && microChar.exp_max > 0 ? microChar.exp_max : 100;
   const pct = Math.max(0, Math.min(100, Math.round(exp / expMax * 100)));
   const name = microChar.name ? microChar.name : '';
+  el.style.display = 'flex';
   el.innerHTML = `
-    <div style="display:flex;align-items:center;gap:8px;white-space:nowrap;">
-      <span>🪙 <b>${gold}</b></span>
-      <span style="color:#ffd27f;">⭐ Lv.${lv}</span>
-      ${name ? `<span style="color:#a9c7e0;">${name}</span>` : ''}
-    </div>
-    <div style="display:flex;align-items:center;gap:6px;margin-top:5px;">
-      <div style="position:relative;flex:1;height:7px;background:rgba(255,255,255,.12);border-radius:5px;overflow:hidden;">
-        <div style="position:absolute;left:0;top:0;bottom:0;width:${pct}%;background:linear-gradient(90deg,#3a7afe,#46e0c8);border-radius:5px;transition:width .35s ease;"></div>
+    <div class="ch-row">
+      <span class="ch-gold">🪙 <b>${gold}</b></span>
+      <span class="ch-lv">⭐ Lv.${lv}${name ? ' · ' + name : ''}</span>
+      <div class="ch-exp-wrap">
+        <div class="ch-exp-bar"><div style="width:${pct}%;"></div></div>
+        <span class="ch-exp-txt">${exp}/${expMax} (${pct}%)</span>
       </div>
-      <span style="font-size:11px;color:#9fb0c0;white-space:nowrap;">${exp}/${expMax} (${pct}%)</span>
     </div>`;
   updateGoldEditorDisplay();
 }