/* =====================================================================
   MineWeb — HUD / 物品栏 / 聊天 界面样式
   ===================================================================== */

#hud{ position:fixed; inset:0; z-index:30; pointer-events:none; }

/* ---------------- 准星 ---------------- */
#crosshair{
  position:absolute; left:50%; top:50%;
  width:20px; height:20px; margin:-10px 0 0 -10px;
  mix-blend-mode: difference;
}
#crosshair::before, #crosshair::after{
  content:""; position:absolute; background:#fff;
}
#crosshair::before{ left:9px; top:1px; width:2px; height:18px; }
#crosshair::after{ top:9px; left:1px; height:2px; width:18px; }
body.attacking #crosshair{ transform: scale(.82); }

/* ---------------- 底部 HUD ---------------- */
#hud-bottom{
  position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
  width:392px;
}
#stat-bars{ position:relative; height:20px; margin-bottom:2px; }
.stat-row{ position:absolute; display:flex; gap:1px; bottom:0; left:0; }
.stat-row.right{ left:auto; right:0; flex-direction:row-reverse; }
#armor-bar{ bottom:11px; }
#air-bar{ bottom:11px; }

.icon{ width:9px; height:9px; position:relative; image-rendering:pixelated; }
.icon.heart{ background:#000; }
.icon.heart i{ position:absolute; inset:0; }
/* 心形使用 box-shadow 像素画 */
.heart-shape{
  width:9px; height:9px;
  background:
    radial-gradient(circle at 30% 32%, currentColor 26%, transparent 27%),
    radial-gradient(circle at 70% 32%, currentColor 26%, transparent 27%),
    linear-gradient(currentColor, currentColor);
  background-size: 100% 100%, 100% 100%, 60% 44%;
  background-position: 0 0, 0 0, 20% 40%;
  background-repeat:no-repeat;
  clip-path: polygon(50% 100%, 8% 46%, 4% 28%, 14% 14%, 30% 14%, 50% 30%, 70% 14%, 86% 14%, 96% 28%, 92% 46%);
}
.heart-full{ color:#e02323; }
.heart-half{ color:#e02323; opacity:1; clip-path: polygon(50% 100%, 8% 46%, 4% 28%, 14% 14%, 30% 14%, 50% 30%, 50% 100%); }
.heart-bg{ color:#3a0000; }
.hunger{
  width:9px;height:9px;
  background: radial-gradient(circle at 50% 62%, #b8791f 44%, transparent 45%),
              radial-gradient(circle at 26% 30%, #b8791f 26%, transparent 27%),
              radial-gradient(circle at 74% 30%, #b8791f 26%, transparent 27%);
}
.hunger.empty{ filter: brightness(.28) saturate(.4); }
.armor{
  width:9px;height:9px;
  background: linear-gradient(#d8d8d8,#8a8a8a);
  clip-path: polygon(50% 0%, 100% 22%, 100% 62%, 50% 100%, 0% 62%, 0% 22%);
}
.armor.empty{ filter: brightness(.3); }
.bubble{
  width:9px;height:9px;border-radius:50%;
  background: radial-gradient(circle at 36% 32%, #fff 24%, #7fd3ff 60%, #2a7fd0 100%);
}
.bubble.pop{ transform:scale(.6); opacity:.6; }

#xp-bar{
  position:relative; height:6px; background:#000; border:1px solid #1a1a1a; margin-bottom:3px;
}
#xp-fill{ height:100%; width:0%; background:#80ff20; }
#xp-level{
  position:absolute; left:50%; top:-13px; transform:translateX(-50%);
  font-size:12px; color:#80ff20; text-shadow:1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}

/* ---------------- 快捷栏 ---------------- */
#hotbar{
  display:flex; gap:0; justify-content:center;
  background: rgba(0,0,0,.55);
  border:2px solid #1c1c1c;
  padding:2px;
}
.slot{
  width:40px; height:40px; position:relative;
  background: rgba(139,139,139,.45);
  box-shadow: inset 2px 2px 0 rgba(55,55,55,.7), inset -2px -2px 0 rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center;
}
#hotbar .slot{ margin:0 1px; }
#hotbar .slot.selected{
  outline: 3px solid #fff; outline-offset:-1px; z-index:2;
  background: rgba(190,190,190,.5);
}
.slot .item-icon{
  width:32px; height:32px; image-rendering:pixelated; pointer-events:none;
}
.slot .item-count{
  position:absolute; right:1px; bottom:0px;
  font-size:12px; color:#fff;
  text-shadow: 2px 2px 0 #000;
  pointer-events:none;
}
.slot .item-dura{
  position:absolute; left:3px; right:3px; bottom:2px; height:3px; background:#000;
}
.slot .item-dura i{ display:block; height:100%; background:#3cdd3c; }

#hotbar-tooltip{
  position:absolute; left:50%; bottom:78px; transform:translateX(-50%);
  font-size:13px; color:#fff; text-shadow:2px 2px 0 #000;
  opacity:0; transition:opacity .35s; white-space:nowrap;
}

/* ---------------- F3 调试 ---------------- */
#debug-overlay{
  position:absolute; left:4px; top:4px; right:4px;
  font-size:12px; line-height:1.45;
  display:flex; justify-content:space-between; gap:20px;
  pointer-events:none;
}
#debug-overlay .col{
  background: rgba(0,0,0,.42);
  padding:2px 5px;
  white-space:pre;
  text-shadow: 1px 1px 0 #000;
  max-width:52vw;
}
#debug-overlay .col.right{ text-align:right; }

/* ---------------- 提示气泡 ---------------- */
#toast-area{
  position:absolute; left:50%; top:56px; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:4px; align-items:center;
}
.toast{
  background:rgba(0,0,0,.6); padding:5px 12px; font-size:12px;
  text-shadow:1px 1px 0 #000; animation: toastIn .18s ease-out;
}
@keyframes toastIn{ from{ transform: translateY(-8px); opacity:0 } to{ transform:none; opacity:1 } }

/* ---------------- 聊天 ---------------- */
#chat-log{
  position:absolute; left:6px; bottom:78px;
  width:min(620px,60vw);
  display:flex; flex-direction:column; justify-content:flex-end; gap:1px;
  max-height:200px; overflow:hidden;
}
.chat-line{
  background: rgba(0,0,0,.42); padding:1px 4px; font-size:12px;
  text-shadow:1px 1px 0 #000; word-break:break-all;
  animation: chatIn .15s ease-out;
}
.chat-line.fade{ opacity:0; transition:opacity .8s; }
.chat-line.err{ color:#ff7070; }
.chat-line.ok{ color:#8ef08e; }
.chat-line.sys{ color:#ffd479; }
@keyframes chatIn{ from{ opacity:0; transform:translateX(-6px) } to{ opacity:1; transform:none } }

#chat-input-wrap{
  position:absolute; left:0; right:0; bottom:56px;
  pointer-events:auto; padding:0 4px;
}
#chat-input-wrap{ display:flex; align-items:center; gap:6px; background:rgba(0,0,0,.6); }
#chat-prefix{ font-size:13px; color:#aaa; padding-left:4px; }
#chat-input{
  flex:1; background:transparent; border:none; outline:none;
  font-family:var(--mc-font); font-size:13px; color:#fff; padding:7px 4px;
  text-shadow:1px 1px 0 #000;
}
#chat-suggest{
  position:absolute; bottom:100%; left:20px;
  background:rgba(0,0,0,.85); font-size:12px; color:#bdbdbd;
  padding:2px 6px; display:none; white-space:pre;
}

/* ---------------- 物品栏窗口 ---------------- */
.inv-screen{ background:rgba(0,0,0,.62); }
.inv-window{
  background: var(--panel);
  border:2px solid #000;
  box-shadow: inset -3px -3px 0 var(--panel-dark), inset 3px 3px 0 var(--panel-light), 0 12px 40px rgba(0,0,0,.6);
  padding:10px 12px 12px;
  width:min(1000px,96vw); max-height:94vh;
  display:flex; flex-direction:column; gap:8px;
  color:#3f3f3f; text-shadow:none;
}
.inv-tabs{ display:flex; gap:3px; flex-wrap:wrap; }
.inv-tab{
  font-family:var(--mc-font); font-size:11px; cursor:pointer;
  padding:5px 9px; background:#8b8b8b; color:#f0f0f0; border:2px solid #000;
  text-shadow:1px 1px 0 #000;
}
.inv-tab.active{ background:#c6c6c6; color:#3f3f3f; text-shadow:none; border-bottom-color:#c6c6c6; }
.inv-body{ display:flex; gap:12px; align-items:flex-start; }
.inv-left{ flex:1 1 auto; min-width:0; }
.inv-right{ width:290px; flex:0 0 auto; display:flex; flex-direction:column; gap:10px; }
.inv-title{ font-size:12px; margin-bottom:5px; color:#3f3f3f; }
.inv-grid{
  display:grid; grid-template-columns: repeat(9, 40px); gap:2px;
  background:#8b8b8b; padding:3px; border:2px solid #373737;
}
.inv-grid#inv-catalog{ grid-template-columns: repeat(auto-fill, 40px); max-height:44vh; overflow-y:auto; }
.inv-grid .slot{ cursor:pointer; }
.inv-grid .slot:hover{ background: rgba(255,255,255,.5); }
.inv-player{ border-top:2px solid #8b8b8b; padding-top:8px; }
.inv-player .inv-grid{ width:max-content; }
.inv-grid.hot{ margin-top:6px; }

.craft-area, .recipe-area{ background:#b4b4b4; border:2px solid #373737; padding:7px; }
.craft-rows{ display:flex; align-items:center; gap:10px; }
.craft-grid{ display:grid; grid-template-columns:repeat(3,40px); gap:2px; }
.craft-arrow{ font-size:20px; color:#5f5f5f; }
.craft-out .slot{ width:48px; height:48px; }
.craft-hint{ font-size:10px; color:#5f5f5f; margin-top:6px; line-height:1.5; }
.recipe-list{ display:flex; flex-wrap:wrap; gap:3px; max-height:22vh; overflow-y:auto; }
.recipe-btn{
  width:38px; height:38px; background:#8b8b8b; border:2px solid #373737; cursor:pointer;
  display:flex; align-items:center; justify-content:center; position:relative;
}
.recipe-btn.can{ background:#5f9f4f; }
.recipe-btn img{ width:30px; height:30px; image-rendering:pixelated; }

#drag-ghost{
  position:fixed; width:32px; height:32px; pointer-events:none; z-index:120;
  display:none; image-rendering:pixelated;
}
#drag-ghost .item-count{ position:absolute; right:-2px; bottom:-4px; font-size:12px; color:#fff; text-shadow:2px 2px 0 #000; }

#item-tooltip{
  position:fixed; z-index:130; display:none; pointer-events:none;
  background:rgba(16,0,16,.86); border:2px solid #2b0a4d;
  padding:5px 8px; font-size:12px; color:#fff; text-shadow:1px 1px 0 #000;
  max-width:260px; line-height:1.5;
}
#item-tooltip .tt-name{ color:#fff; }
#item-tooltip .tt-sub{ color:#9a9a9a; font-size:11px; }
#item-tooltip .tt-tag{ color:#7f7fff; font-size:11px; }

/* 手机端触摸控制 */
#touch-controls{ position:fixed; inset:0; z-index:35; pointer-events:none; display:none; }
body.touch #touch-controls{ display:block; }
.tc-pad{
  position:absolute; left:18px; bottom:96px; width:150px; height:150px;
  border-radius:50%; background:rgba(255,255,255,.10); pointer-events:auto;
  border:2px solid rgba(255,255,255,.22);
}
.tc-pad i{
  position:absolute; left:50%; top:50%; width:56px; height:56px; margin:-28px 0 0 -28px;
  border-radius:50%; background:rgba(255,255,255,.35);
}
.tc-btn{
  position:absolute; right:18px; width:66px; height:66px; border-radius:50%;
  background:rgba(255,255,255,.14); border:2px solid rgba(255,255,255,.25);
  color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center;
  pointer-events:auto;
}
#tc-jump{ bottom:180px; }
#tc-place{ bottom:100px; right:96px; }
#tc-break{ bottom:100px; }
#tc-inv{ bottom:262px; }