/* ============================================================
   方块世界 BlockWorld — UI 设计系统 v3「墨岩·鎏金」
   ------------------------------------------------------------
   材质语言: 墨岩漆面板 + 鎏金勾线 + 钻石青功能色
   所有颜色取自游戏世界: 金锭/钻石/红心/黑曜
   零网络依赖 · 系统字体 · file:// 直开
   ============================================================ */

/* ---------------- 设计令牌 ---------------- */
:root {
  /* 墨岩阶 */
  --ink-0: #07090d;      /* 最深: 压暗层/内槽 */
  --ink-1: #10131a;      /* 面板基底 */
  --ink-2: #171c26;      /* 面板浮起 */
  --ink-3: #212836;      /* 交互面 */
  --line:  #2c3444;      /* 中性发丝线 */
  /* 鎏金阶 */
  --gilt-dim:    #7a5f2c;
  --gilt:        #d9a441;
  --gilt-bright: #f4d27a;
  --gilt-glow:   rgba(217, 164, 65, .30);
  /* 功能色 */
  --mint:      #45e6d2;  /* 钻石青: 可用/确认 */
  --mint-dim:  #1f6e64;
  --red:       #e2453a;  /* 血量/危险 */
  --red-deep:  #7a1010;
  /* 文字阶 */
  --tx-0: #f2f4f8;
  --tx-1: #aeb6c4;
  --tx-2: #67707f;
  /* 字体 */
  --f-ui:  'Segoe UI Variable Text', 'Segoe UI', 'Microsoft YaHei UI', 'Microsoft YaHei', 'PingFang SC', sans-serif;
  --f-num: 'Cascadia Mono', 'Consolas', 'SF Mono', 'Menlo', monospace;
  /* 尺寸 */
  --cell: 52px;          /* 物品格 */
  --hud-w: 508px;        /* 快捷栏总宽(9格+缝+边) */
  --r-panel: 4px;
  --r-cell: 3px;
  /* 层叠阴影(漆面) */
  --sh-panel: 0 24px 64px -16px rgba(0,0,0,.85), 0 4px 14px rgba(0,0,0,.55),
              inset 0 1px 0 rgba(255,255,255,.05);
  --sh-cell: inset 0 2px 6px rgba(0,0,0,.65), inset 0 -1px 0 rgba(255,255,255,.03);
}

/* ---------------- 基础 ---------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: var(--ink-1);
  font-family: var(--f-ui);
  color: var(--tx-0);
  user-select: none;
  -webkit-font-smoothing: antialiased;
}
canvas { display: block; }
.px, .slot canvas, #cursorStack canvas, #logoCanvas, #statHearts, #statHunger, #statAir, #armorRow,
.craft-row canvas, .creative-grid canvas, .trade-item canvas, #enchItemIcon {
  image-rendering: pixelated; image-rendering: crisp-edges;
}
#app, #app canvas { position: fixed; inset: 0; }
.hidden { display: none !important; }
::selection { background: var(--gilt); color: var(--ink-0); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-3); border: 3px solid var(--ink-1); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--gilt-dim); }

kbd {
  font-family: var(--f-num); font-size: 11px; color: var(--tx-0);
  background: var(--ink-3); border: 1px solid var(--line); border-bottom: 2px solid var(--gilt-dim);
  border-radius: 3px; padding: 1px 6px 0; margin: 0 1px;
  display: inline-block; line-height: 16px; vertical-align: 1px;
}

button { font-family: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, .tab:focus-visible {
  outline: 2px solid var(--mint); outline-offset: 2px;
}

/* ---------------- 通用面板: 漆面双框 ---------------- */
.panel {
  position: relative;
  background: linear-gradient(178deg, var(--ink-2), var(--ink-1) 72%);
  border: 1px solid var(--gilt-dim);
  border-radius: var(--r-panel);
  box-shadow: var(--sh-panel);
  color: var(--tx-0);
}
.panel::before {              /* 内衬装裱线 */
  content: ''; position: absolute; inset: 4px;
  border: 1px solid rgba(255,255,255,.045);
  border-radius: 2px; pointer-events: none;
}

/* 錾刻铭牌式标题 */
.plate {
  font-size: 12px; font-weight: 700; letter-spacing: .3em; text-indent: .3em;
  color: var(--gilt); text-align: center; text-transform: uppercase;
}
.plate::before, .plate::after { content: '◆'; font-size: 7px; vertical-align: 2px; color: var(--gilt-dim); }
.plate::before { margin-right: 10px; }
.plate::after  { margin-left: 10px; }

/* ---------------- 按钮体系 ---------------- */
.btn {
  position: relative; display: block; width: 100%;
  padding: 12px 16px; margin: 0;
  font-size: 15px; font-weight: 600; letter-spacing: .12em; text-indent: .12em;
  color: var(--tx-0); text-align: center;
  background: linear-gradient(180deg, var(--ink-3), #1b212d);
  border: 1px solid var(--line); border-radius: 3px;
  transition: border-color .15s, background-color .15s, transform .06s, box-shadow .15s;
}
.btn::before {                /* 左侧选中刻痕 */
  content: ''; position: absolute; left: 0; top: 50%; translate: 0 -50%;
  width: 3px; height: 0; background: var(--gilt);
  transition: height .18s ease; border-radius: 0 2px 2px 0;
}
.btn:hover:not(:disabled) {
  border-color: var(--gilt-dim); background: linear-gradient(180deg, #2a3345, #202836);
  box-shadow: 0 0 0 1px rgba(217,164,65,.12), 0 6px 18px -6px rgba(0,0,0,.8);
}
.btn:hover:not(:disabled)::before { height: 60%; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .38; cursor: default; }

.btn-primary {
  background: linear-gradient(172deg, var(--gilt-bright), var(--gilt) 55%, #b9862f);
  border-color: #e6bb56; color: #1c1405;
  text-shadow: 0 1px 0 rgba(255,255,255,.28);
  font-weight: 800;
  box-shadow: 0 6px 22px -6px var(--gilt-glow), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.18);
}
.btn-primary::before { background: #fff; }
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(172deg, #ffe49a, #e7b654 55%, #c6923a);
  border-color: #f4d27a;
  box-shadow: 0 8px 30px -6px rgba(217,164,65,.5), inset 0 1px 0 rgba(255,255,255,.55);
}

/* 幽灵小按钮(骰子/次级操作) */
.btn-ghost {
  background: transparent; border: 1px solid var(--line); border-radius: 3px;
  color: var(--tx-1); font-size: 14px; padding: 0 10px;
  transition: border-color .15s, color .15s, background-color .15s;
}
.btn-ghost:hover { border-color: var(--gilt-dim); color: var(--gilt-bright); background: rgba(217,164,65,.06); }

/* ---------------- 输入 / 分段控件 ---------------- */
.field label {
  display: block; font-size: 11px; letter-spacing: .22em; text-indent: .22em;
  color: var(--tx-2); margin-bottom: 5px; font-weight: 600;
}
input[type=text], input:not([type]) {
  width: 100%; padding: 9px 10px;
  font-family: var(--f-num); font-size: 14px; color: var(--tx-0);
  background: var(--ink-0); border: 1px solid var(--line); border-radius: 3px;
  box-shadow: var(--sh-cell);
  transition: border-color .15s;
}
input:hover { border-color: #3a4456; }
input:focus { border-color: var(--gilt-dim); outline: none; }
input::placeholder { color: var(--tx-2); }

.seg {
  display: flex; background: var(--ink-0); border: 1px solid var(--line);
  border-radius: 3px; padding: 2px; gap: 2px; box-shadow: var(--sh-cell);
}
.seg button {
  flex: 1; padding: 7px 2px; font-size: 13px; font-weight: 600; letter-spacing: .08em;
  color: var(--tx-2); background: transparent; border: 0; border-radius: 2px;
  transition: color .15s, background-color .15s, box-shadow .15s;
}
.seg button:hover { color: var(--tx-1); }
.seg button.on {
  color: var(--ink-0); background: linear-gradient(180deg, var(--gilt-bright), var(--gilt));
  box-shadow: 0 1px 4px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.4);
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
.seg.seg-num button { font-family: var(--f-num); letter-spacing: 0; }

/* ---------------- 画框(菜单/暂停/死亡场景) ---------------- */
.frame { position: absolute; inset: 10px; border: 1px solid rgba(217,164,65,.34); pointer-events: none; }
.frame i {
  position: absolute; width: 7px; height: 7px; background: var(--gilt);
  box-shadow: 0 0 8px var(--gilt-glow);
}
.frame i:nth-child(1) { left: -4px; top: -4px; }
.frame i:nth-child(2) { right: -4px; top: -4px; }
.frame i:nth-child(3) { left: -4px; bottom: -4px; }
.frame i:nth-child(4) { right: -4px; bottom: -4px; }

/* ---------------- 覆盖层通用 ---------------- */
.overlay {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 7, 11, .58);
}

/* ================================================================
   主菜单
   ================================================================ */
#menu { background: transparent; flex-direction: column; z-index: 21; }
#menu::before {               /* 底部地平线压暗, 保证面板可读 */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,7,11,.42) 0%, transparent 26%),
    linear-gradient(180deg, transparent 44%, rgba(5,7,11,.66) 100%);
}
#menuCore {
  position: relative; display: flex; flex-direction: column; align-items: center;
  animation: menuRise .7s cubic-bezier(.16,.84,.3,1) both .15s;
}
#logoCanvas { width: min(560px, 86vw); margin-bottom: 2px; filter: drop-shadow(0 14px 22px rgba(0,0,0,.55)); }
#gameSub {
  font-size: 12px; letter-spacing: .52em; text-indent: .52em; font-weight: 600;
  color: var(--gilt); text-shadow: 0 1px 3px rgba(0,0,0,.8);
  margin: 2px 0 26px;
}
#gameSub b { color: var(--tx-0); font-weight: 600; }

#menu .panel { width: min(400px, calc(100vw - 32px)); padding: 20px 20px 16px; }
#menu .row2 { display: flex; gap: 10px; margin-bottom: 14px; }
#menu .row2 .field:first-child { flex: 1.25; }
#menu .row2 .field:last-child { flex: 1; }
#seedRow { display: flex; gap: 6px; }
#seedRow input { flex: 1; }
#btnDice { flex: none; width: 38px; }

#menu .btn { margin-top: 8px; }
#menu .btn small { display: block; font-size: 10px; letter-spacing: .28em; text-indent: .28em; font-weight: 600; opacity: .62; margin-top: 3px; }

#menuMeta {
  position: absolute; left: 26px; right: 26px; bottom: 22px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--tx-2); letter-spacing: .1em;
  text-shadow: 0 1px 2px rgba(0,0,0,.8); pointer-events: none;
}
#menuMeta .num { font-family: var(--f-num); letter-spacing: 0; }

/* 玩法指南 */
#helpBox, #helpBox2 {
  max-height: 40vh; overflow-y: auto;
  font-size: 12.5px; line-height: 2.1; color: var(--tx-1);
  background: var(--ink-0); border: 1px solid var(--line); border-radius: 3px;
  padding: 12px 14px; margin-top: 12px;
}
#helpBox b, #helpBox2 b { color: var(--gilt-bright); font-weight: 700; }
#helpBox .hsec { display: block; margin: 10px 0 2px; font-size: 11px; letter-spacing: .3em; color: var(--gilt); font-weight: 700; }
#helpBox .hsec:first-child { margin-top: 0; }

/* ================================================================
   HUD
   ================================================================ */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }

/* --- 准星 + 命中标记 --- */
#crosshair { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; transform: translate(-50%,-50%); opacity: .9; }
#crosshair::before, #crosshair::after { content: ''; position: absolute; background: #fff; mix-blend-mode: difference; }
#crosshair::before { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%, 0 65%, 100% 65%, 100% 100%, 0 100%); }
#crosshair::after  { top: 50%; left: 0; height: 2px; width: 100%; transform: translateY(-50%); clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 65% 0, 100% 0, 100% 100%, 65% 100%); }
#hitmark { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; transform: translate(-50%,-50%) rotate(45deg); opacity: 0; }
#hitmark i { position: absolute; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.9); }
#hitmark i:nth-child(1) { left: 0; top: 0; width: 8px; height: 2px; }
#hitmark i:nth-child(2) { right: 0; top: 0; width: 8px; height: 2px; }
#hitmark i:nth-child(3) { left: 0; bottom: 0; width: 8px; height: 2px; }
#hitmark i:nth-child(4) { right: 0; bottom: 0; width: 8px; height: 2px; }
#hitmark.hit { animation: hitPop .28s ease-out; }
@keyframes hitPop {
  0% { opacity: 1; transform: translate(-50%,-50%) rotate(45deg) scale(.55); }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(45deg) scale(1.25); }
}

/* --- 快捷栏 --- */
#hotbarWrap { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); }
#hotbar {
  display: flex; gap: 3px; padding: 5px;
  background: rgba(11, 14, 20, .78);
  border: 1px solid var(--gilt-dim); border-radius: 5px;
  box-shadow: 0 10px 34px -8px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(8px);
}
.slot {
  width: var(--cell); height: var(--cell); position: relative;
  display: flex; align-items: center; justify-content: center;
  background: rgba(7, 9, 13, .82);
  border: 1px solid #262e3c; border-radius: var(--r-cell);
  box-shadow: var(--sh-cell);
  transition: border-color .12s, box-shadow .12s, background-color .12s;
}
.slot canvas { width: 40px; height: 40px; pointer-events: none; }
.slot .num {
  position: absolute; top: 2px; left: 4px; font-family: var(--f-num);
  font-size: 9px; font-style: normal; color: var(--tx-2); line-height: 1;
  transition: color .12s;
}
#hotbar .slot.sel {
  border-color: var(--gilt);
  background: rgba(24, 22, 12, .9);
  box-shadow: 0 0 0 1px var(--gilt), 0 0 14px var(--gilt-glow), var(--sh-cell);
}
#hotbar .slot.sel .num { color: var(--gilt-bright); }
#hotbar .slot.sel::after {
  content: ''; position: absolute; left: 50%; bottom: -8px; translate: -50% 0;
  border: 4px solid transparent; border-bottom-color: var(--gilt);
}
.durbar {
  position: absolute; bottom: 3px; left: 5px; right: 5px; height: 3px;
  background: rgba(0,0,0,.75); border-radius: 2px; display: none; overflow: hidden;
}
.durbar i { display: block; height: 100%; border-radius: 2px; }
.durbar.hi i  { background: linear-gradient(90deg, #49d268, #7ce88a); }
.durbar.mid i { background: linear-gradient(90deg, #d2a83c, #e8cc5a); }
.durbar.lo i  { background: linear-gradient(90deg, #d24438, #e87258); }

/* 切换物品名弹出 */
#itemname {
  position: absolute; bottom: 108px; left: 50%; transform: translateX(-50%) translateY(4px);
  font-size: 14px; font-weight: 700; letter-spacing: .2em; text-indent: .2em;
  color: var(--tx-0); text-shadow: 0 2px 5px rgba(0,0,0,.9), 0 0 14px rgba(0,0,0,.6);
  opacity: 0; transition: opacity .3s, transform .3s; white-space: nowrap;
}
#itemname.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#itemname.r-gold { color: var(--gilt-bright); }
#itemname.r-mint { color: var(--mint); }

/* --- 生存状态(心/饥饿/氧气) --- */
#stats { position: absolute; bottom: 78px; left: 50%; transform: translateX(-50%); width: var(--hud-w); height: 48px; }
#statHearts { position: absolute; left: 2px; bottom: 0; filter: drop-shadow(0 2px 2px rgba(0,0,0,.7)); }
#statHunger { position: absolute; right: 2px; bottom: 0; filter: drop-shadow(0 2px 2px rgba(0,0,0,.7)); }
#statAir    { position: absolute; right: 2px; bottom: 25px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.7)); }
#statHearts.low { animation: lowPulse 1s ease-in-out infinite; }
@keyframes lowPulse {
  0%, 100% { filter: drop-shadow(0 2px 2px rgba(0,0,0,.7)); transform: none; }
  50% { filter: drop-shadow(0 2px 2px rgba(0,0,0,.7)) drop-shadow(0 0 7px rgba(226,69,58,.85)); transform: translateY(-1px); }
}
#stats.hurt { animation: statShake .3s linear; }
@keyframes statShake {
  0%, 100% { transform: translateX(-50%); }
  25% { transform: translateX(calc(-50% - 4px)); }
  50% { transform: translateX(calc(-50% + 3px)); }
  75% { transform: translateX(calc(-50% - 2px)); }
}

/* --- 增益徽章 --- */
#buffRow { position: absolute; left: 2px; bottom: 52px; display: flex; gap: 6px; }
.buff {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; color: var(--tx-0);
  background: rgba(11,14,20,.78); border: 1px solid var(--line); border-radius: 3px;
  padding: 2px 8px; text-shadow: 0 1px 2px #000;
}
.buff .num { font-family: var(--f-num); color: var(--tx-1); font-size: 10px; }
.buff.b-speed { border-color: rgba(69,230,210,.5); }
.buff.b-speed b { color: var(--mint); }
.buff.b-slow { border-color: rgba(122,180,240,.5); }
.buff.b-slow b { color: #9cd0ff; }

/* --- Boss 血条 --- */
#bossBars {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  width: min(600px, 72vw); display: flex; flex-direction: column; gap: 12px;
}
.bossbar { animation: bossIn .5s cubic-bezier(.16,.84,.3,1); }
@keyframes bossIn { from { opacity: 0; transform: translateY(-10px); } }
.bossname {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  margin-bottom: 5px; text-shadow: 0 2px 4px rgba(0,0,0,.9);
}
.bossname .bname { font-size: 15px; font-weight: 800; letter-spacing: .28em; text-indent: .28em; color: var(--tx-0); }
.bossname::before, .bossname::after { content: '◆'; font-size: 8px; color: var(--gilt); align-self: center; }
.bphase {
  font-size: 10px; font-weight: 800; letter-spacing: .2em; text-indent: .2em;
  color: #ffd7d2; background: linear-gradient(180deg, #a3241a, #7a1010);
  border: 1px solid #e2453a; border-radius: 2px; padding: 1px 6px;
  animation: phasePulse 1.1s ease-in-out infinite;
}
@keyframes phasePulse { 50% { box-shadow: 0 0 10px rgba(226,69,58,.8); } }
.bosstrack {
  position: relative; height: 13px; overflow: hidden;
  background: rgba(5,7,11,.82); border: 1px solid var(--gilt-dim); border-radius: 3px;
  box-shadow: 0 4px 14px rgba(0,0,0,.6), var(--sh-cell);
}
.bossghost {
  position: absolute; inset: 1px auto 1px 1px; width: 100%;
  background: rgba(255, 235, 220, .55); border-radius: 2px;
}
.bossfill {
  position: absolute; inset: 1px auto 1px 1px; width: 100%;
  border-radius: 2px; transition: width .12s;
  background-image: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 42%, rgba(0,0,0,.22));
}
.bossticks {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(5,7,11,.55) calc(10% - 1px) 10%);
}

/* --- 提示文字(准星下) --- */
#hint {
  position: absolute; left: 50%; top: 55.5%; transform: translateX(-50%);
  font-size: 12.5px; letter-spacing: .12em; color: var(--tx-0);
  text-shadow: 0 1px 3px rgba(0,0,0,.9); opacity: .92; white-space: nowrap;
}
#hint .num { font-family: var(--f-num); }

/* --- 台词字幕 --- */
#subtitle {
  position: absolute; left: 50%; bottom: 148px; transform: translateX(-50%);
  max-width: 68%; min-width: 260px; text-align: center;
  background: linear-gradient(90deg, transparent, rgba(7,9,13,.88) 12% 88%, transparent);
  padding: 10px 34px 11px;
  animation: subIn .3s ease-out;
}
@keyframes subIn { from { opacity: 0; transform: translateX(-50%) translateY(6px); } }
#subtitle .sname {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .4em; text-indent: .4em;
  color: var(--gilt); margin-bottom: 3px;
}
#subtitle .stext { font-size: 16px; color: #ffeec9; text-shadow: 0 1px 3px #000; letter-spacing: .05em; }

/* --- 吐司通知 --- */
#toasts {
  position: absolute; top: 66px; right: 14px;
  display: flex; flex-direction: column; gap: 7px; align-items: flex-end;
}
.toast {
  display: flex; align-items: center; gap: 9px; max-width: 340px;
  background: rgba(11,14,20,.88); color: var(--tx-0);
  border: 1px solid var(--line); border-left: 2px solid var(--gilt); border-radius: 3px;
  padding: 8px 13px; font-size: 13px; letter-spacing: .04em;
  box-shadow: 0 8px 22px -6px rgba(0,0,0,.8);
  animation: toastIn .28s cubic-bezier(.16,.84,.3,1);
  transition: opacity .45s, transform .45s;
}
.toast .ticon { font-size: 15px; flex: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.toast.out { opacity: 0; transform: translateX(14px); }
@keyframes toastIn { from { opacity: 0; transform: translateX(22px); } }

/* --- 调试面板 --- */
#debug {
  position: absolute; top: 12px; left: 12px;
  font: 11px/1.8 var(--f-num); color: var(--tx-1);
  background: rgba(7,9,13,.8); border: 1px solid var(--line); border-radius: 3px;
  padding: 7px 11px; white-space: pre; letter-spacing: 0;
}
#debug b { color: var(--gilt-bright); font-weight: 400; }

/* --- 屏幕滤镜 --- */
.vig { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
#vigRed   { background: radial-gradient(ellipse at center, transparent 38%, rgba(180,18,14,.62) 100%); }
#vigFrost { background: radial-gradient(ellipse at center, transparent 42%, rgba(120,190,240,.6) 100%); transition: opacity .4s; }
#vigWater { background: rgba(16, 48, 110, .32); transition: opacity .3s; }
#vigLow   { background: radial-gradient(ellipse at center, transparent 46%, rgba(150,12,8,.5) 100%); transition: opacity .6s; }
#vigLow.on { animation: lowVig 1.6s ease-in-out infinite; }
@keyframes lowVig { 0%,100% { opacity: .22; } 50% { opacity: .5; } }

/* ================================================================
   背包 / 合成
   ================================================================ */
#invScreen { z-index: 22; background: rgba(5,7,11,.66); }
#invPanel { display: flex; gap: 0; max-width: 96vw; padding: 0; animation: panelIn .22s cubic-bezier(.16,.84,.3,1); }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px) scale(.985); } }

#invLeft { padding: 18px 20px 20px; }
#invRight {
  width: 396px; padding: 18px 16px 16px 20px;
  border-left: 1px solid rgba(255,255,255,.05);
  display: flex; flex-direction: column; max-height: min(78vh, 640px);
}
.panel-title {
  font-size: 13px; font-weight: 800; letter-spacing: .3em; text-indent: .3em;
  color: var(--gilt); margin-bottom: 14px; white-space: nowrap;
}
.panel-title .sub { font-size: 11px; font-weight: 400; letter-spacing: .06em; text-indent: 0; color: var(--tx-2); margin-left: 8px; }
.okbadge {
  font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--mint);
  border: 1px solid var(--mint-dim); border-radius: 2px; padding: 1px 7px; margin-left: 8px;
  vertical-align: 1px; text-indent: 0;
}

#invGrid { display: grid; grid-template-columns: repeat(9, var(--cell)); gap: 3px; }
.invslot { cursor: pointer; }
.invslot:hover { border-color: var(--gilt-dim); background: rgba(24,22,12,.55); }
.invslot:active { border-color: var(--gilt); }
.invslot.hotrow { margin-top: 12px; position: relative; }
.invslot.hotrow::before {
  content: ''; position: absolute; top: -8px; left: -1px; right: -1px;
  border-top: 1px solid rgba(217,164,65,.28);
}

#cursorStack { position: fixed; z-index: 30; pointer-events: none; width: 40px; height: 40px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
#cursorStack canvas { width: 40px; height: 40px; }

/* 悬浮提示 */
#tooltip {
  position: fixed; z-index: 32; pointer-events: none; max-width: 260px;
  background: rgba(9,11,16,.96); border: 1px solid var(--gilt-dim); border-radius: 3px;
  padding: 7px 11px 8px; box-shadow: 0 10px 26px -6px rgba(0,0,0,.85);
}
#tooltip b { display: block; font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--tx-0); }
#tooltip b.r-gold { color: var(--gilt-bright); }
#tooltip b.r-mint { color: var(--mint); }
#tooltip span { display: block; font-size: 11px; font-family: var(--f-num); color: var(--tx-1); margin-top: 3px; line-height: 1.6; }

/* 合成页签 */
.craft-tabs { display: flex; gap: 4px; margin-bottom: 10px; flex: none; }
.craft-tabs .tab {
  flex: 1; padding: 6px 2px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-indent: .12em;
  color: var(--tx-2); background: var(--ink-0); border: 1px solid var(--line); border-radius: 3px;
  transition: color .12s, border-color .12s, background-color .12s;
}
.craft-tabs .tab:hover { color: var(--tx-1); border-color: #3a4456; }
.craft-tabs .tab.on { color: var(--gilt-bright); border-color: var(--gilt-dim); background: rgba(217,164,65,.08); }

.craft-list { overflow-y: auto; padding-right: 6px; margin-right: -6px; flex: 1; }
.craft-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.028); border: 1px solid #232a38; border-radius: 3px;
  padding: 7px 10px; margin-bottom: 5px;
  transition: border-color .12s, background-color .12s;
}
.craft-row:hover { border-color: #35405a; background: rgba(255,255,255,.05); }
.craft-row.nope { opacity: .58; }
.craft-row canvas { width: 36px; height: 36px; flex: none; }
.craft-info { flex: 1; min-width: 0; }
.craft-name { font-size: 13.5px; font-weight: 700; letter-spacing: .05em; margin-bottom: 3px; }
.craft-req { display: flex; flex-wrap: wrap; gap: 4px; }
.req {
  font-size: 10.5px; font-weight: 600; border-radius: 2px; padding: 1px 6px;
  border: 1px solid; letter-spacing: .03em;
}
.req .num { font-family: var(--f-num); font-size: 10px; margin-left: 2px; }
.req.ok { color: #9be8b8; border-color: rgba(73,210,104,.35); background: rgba(73,210,104,.07); }
.req.no { color: #e8a099; border-color: rgba(226,69,58,.35); background: rgba(226,69,58,.07); }
.tbadge {
  font-size: 10px; font-weight: 700; color: var(--gilt); letter-spacing: .1em;
  border: 1px solid var(--gilt-dim); border-radius: 2px; padding: 0 5px; margin-left: 6px; vertical-align: 1px;
}
.craft-btn {
  flex: none; width: 60px; padding: 7px 0; font-size: 12.5px; font-weight: 800; letter-spacing: .2em; text-indent: .2em;
  color: var(--ink-0); background: linear-gradient(180deg, #5cead6, #2ec4b0);
  border: 1px solid #7df0de; border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 2px 8px -2px rgba(69,230,210,.4);
  transition: filter .12s, transform .06s;
}
.craft-btn:hover:not(:disabled) { filter: brightness(1.1); }
.craft-btn:active:not(:disabled) { transform: translateY(1px); }
.craft-btn:disabled {
  color: var(--tx-2); background: var(--ink-3); border-color: var(--line);
  box-shadow: none; cursor: default;
}

/* 创造物品库 */
.creative-grid { display: grid; grid-template-columns: repeat(6, var(--cell)); gap: 3px; overflow-y: auto; padding-right: 6px; }
.creative-grid .slot { cursor: pointer; }
.creative-grid .slot:hover { border-color: var(--mint); background: rgba(21,40,38,.6); }

/* ================================================================
   暂停 / 死亡 / 加载
   ================================================================ */
#pause { z-index: 23; background: rgba(5,7,11,.7); backdrop-filter: blur(3px); }
#pause .panel { width: min(380px, calc(100vw - 32px)); padding: 22px 22px 18px; max-height: 92vh; overflow-y: auto; animation: panelIn .22s cubic-bezier(.16,.84,.3,1); }
#pause .plate { margin-bottom: 18px; }
.prow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0; }
.prow > label { font-size: 12.5px; letter-spacing: .18em; color: var(--tx-1); font-weight: 600; flex: none; }
.prow .seg { flex: 1; max-width: 226px; }
#pause .btn { margin-top: 10px; }
#pause hr { border: 0; border-top: 1px solid rgba(255,255,255,.06); margin: 16px 0 6px; }

#death { z-index: 24; background: radial-gradient(ellipse at center, rgba(60,4,4,.55), rgba(14,1,1,.88)); flex-direction: column; }
#deathTitle {
  font-size: 44px; font-weight: 900; letter-spacing: .5em; text-indent: .5em;
  color: #ff5a4e; text-shadow: 0 0 34px rgba(226,69,58,.55), 0 4px 0 #58080a;
  animation: deathIn 1s cubic-bezier(.16,.84,.3,1) both;
}
@keyframes deathIn { from { opacity: 0; letter-spacing: .9em; } }
#deathScore {
  margin: 16px 0 34px; font-size: 13px; letter-spacing: .3em; text-indent: .3em; color: var(--tx-1);
  animation: fadeIn .8s both .4s;
}
#deathScore .num { font-family: var(--f-num); font-size: 17px; color: var(--gilt-bright); letter-spacing: .06em; }
#death .dbtns { width: 300px; animation: fadeIn .8s both .7s; }
#death .btn { margin-top: 10px; }
@keyframes fadeIn { from { opacity: 0; } }

/* 加载界面 */
#loading { z-index: 26; background: var(--ink-0); flex-direction: column; transition: opacity .5s; }
#loading.fade { opacity: 0; pointer-events: none; }
#loadCube { width: 56px; height: 56px; margin-bottom: 26px; animation: cubeBob 1.15s cubic-bezier(.42,0,.4,1) infinite; }
@keyframes cubeBob {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  38% { transform: translateY(-12px) scale(.98, 1.02); }
  52% { transform: translateY(-12px) scale(.98, 1.02); }
  92% { transform: translateY(0) scale(1.04, .94); }
}
#loadTitle { font-size: 13px; font-weight: 700; letter-spacing: .5em; text-indent: .5em; color: var(--gilt); margin-bottom: 22px; }
#loadTrack {
  width: min(340px, 70vw); height: 5px; border-radius: 3px; overflow: hidden;
  background: var(--ink-2); border: 1px solid var(--line);
}
#loadFill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gilt-dim), var(--gilt-bright));
  border-radius: 3px; transition: width .2s ease;
}
#loadLabel { margin-top: 14px; font-size: 11px; font-family: var(--f-num); color: var(--tx-2); letter-spacing: .18em; }
#loadTip { position: absolute; bottom: 40px; font-size: 12px; color: var(--tx-2); letter-spacing: .12em; }
#loadTip b { color: var(--tx-1); font-weight: 600; }
#btnEnter {
  width: 260px; margin-top: 30px;
  animation: enterGlow 1.6s ease-in-out infinite;
}
@keyframes enterGlow {
  0%, 100% { box-shadow: 0 6px 22px -6px var(--gilt-glow), inset 0 1px 0 rgba(255,255,255,.5); }
  50% { box-shadow: 0 6px 34px -4px rgba(217,164,65,.65), inset 0 1px 0 rgba(255,255,255,.5); }
}

/* ---------------- 错误盒 ---------------- */
#errbox {
  position: fixed; left: 10px; bottom: 10px; z-index: 99; max-width: 60vw;
  background: rgba(96, 12, 8, .95); border: 1px solid #e2453a; color: #ffe2de;
  font: 12px/1.7 var(--f-num); padding: 10px 14px; border-radius: 4px;
  display: none; white-space: pre-wrap;
}

/* ---------------- 动画 / 可达性 / 响应式 ---------------- */
@keyframes menuRise { from { opacity: 0; transform: translateY(18px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; transition-duration: .01s !important; }
}

@media (max-width: 620px) {
  :root { --cell: 42px; --hud-w: 416px; }
  #invPanel { flex-direction: column; max-height: 92vh; overflow-y: auto; }
  #invRight { width: auto; border-left: 0; border-top: 1px solid rgba(255,255,255,.05); max-height: none; }
  #menu .panel { padding: 16px 14px 12px; }
  #deathTitle { font-size: 32px; }
  #bossBars { width: calc(100vw - 32px); }
}

/* ================================================================
   v4 增补: XP条 / 盔甲 / 箱子 / 熔炉 / 附魔 / 交易 / 附魔光效
   ================================================================ */
:root { --ench: #b04ae8; --ench-glow: rgba(176, 74, 232, .35); }

/* --- XP 经验条(快捷栏上方) --- */
#xpbar {
  position: relative; height: 7px; margin: 0 2px 5px;
  background: rgba(7, 9, 13, .85);
  border: 1px solid #26442c; border-radius: 4px;
  box-shadow: var(--sh-cell);
  overflow: visible;
}
#xpFill {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #3fae4e, #7ce88a);
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(124, 232, 138, .45);
  transition: width .2s ease;
}
#xpLevel {
  position: absolute; left: 50%; top: -16px; transform: translateX(-50%);
  font-family: var(--f-num); font-size: 13px; font-weight: 800; color: #8cf59a;
  text-shadow: 0 0 4px #0a2410, 0 1px 2px #000, 0 -1px 2px #000;
  pointer-events: none; line-height: 1;
}

/* --- HUD 盔甲行(血条上方) --- */
#armorRow { position: absolute; left: 2px; bottom: 25px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.7)); }

/* --- 中毒徽章 / 着火滤镜 --- */
.buff.b-poison { border-color: rgba(120, 200, 80, .5); }
.buff.b-poison b { color: #9be86a; }
#vigFire { background: radial-gradient(ellipse at center, transparent 34%, rgba(220, 92, 12, .62) 100%); transition: opacity .3s; }

/* --- 背包: 盔甲列 --- */
#invBody { display: flex; gap: 12px; }
#armorCol { display: flex; flex-direction: column; gap: 3px; }
.armorslot { cursor: pointer; }
.armorslot .num { font-size: 10px; color: var(--tx-2); top: auto; bottom: 3px; left: 50%; translate: -50% 0; letter-spacing: .1em; }
.armorslot:hover { border-color: var(--gilt-dim); background: rgba(24,22,12,.55); }
.armorslot canvas { opacity: 1; }

/* --- 附魔物品发光 --- */
.slot.ench { border-color: #5a3a8a; }
.slot.ench::after {
  content: ''; position: absolute; inset: 0; border-radius: var(--r-cell); pointer-events: none;
  box-shadow: inset 0 0 9px var(--ench-glow), 0 0 6px rgba(176,74,232,.22);
}
#hotbar .slot.sel.ench { border-color: var(--gilt); }
#itemname.r-ench { color: #d9a0f5; }
#tooltip b.r-ench { color: #d9a0f5; }
#tipEnch { color: #c98af0 !important; }

/* --- 方块实体面板通用 --- */
.be-panel { padding: 18px 20px 20px; animation: panelIn .22s cubic-bezier(.16,.84,.3,1); max-height: 92vh; overflow-y: auto; }
#chestScreen, #furnaceScreen, #enchantScreen, #tradeScreen { z-index: 22; background: rgba(5,7,11,.66); }
.grid9 { display: grid; grid-template-columns: repeat(9, var(--cell)); gap: 3px; }
.grid9 .slot { cursor: pointer; }
.grid9 .slot:hover { border-color: var(--gilt-dim); background: rgba(24,22,12,.55); }
.be-sep {
  display: flex; align-items: center; gap: 10px; margin: 14px 0 10px;
  font-size: 11px; letter-spacing: .3em; text-indent: .3em; color: var(--tx-2); font-weight: 700;
}
.be-sep::before, .be-sep::after { content: ''; flex: 1; border-top: 1px solid rgba(255,255,255,.06); }

/* --- 熔炉核心区 --- */
#furnCore { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 8px 0 4px; }
#furnColIn { display: flex; flex-direction: column; align-items: center; gap: 6px; }
#furnSlotIn .slot, #furnSlotFuel .slot, #furnSlotOut .slot { cursor: pointer; }
#furnSlotIn .slot:hover, #furnSlotFuel .slot:hover, #furnSlotOut .slot:hover {
  border-color: var(--gilt-dim); background: rgba(24,22,12,.55);
}
#furnSlotOut .slot { width: 64px; height: 64px; border-color: var(--gilt-dim); }
#furnSlotOut .slot canvas { width: 48px; height: 48px; }
#furnFlame {
  position: relative; width: 22px; height: 24px;
  background: rgba(7,9,13,.8); border: 1px solid var(--line); border-radius: 3px;
  overflow: hidden;
  clip-path: polygon(50% 0, 82% 22%, 100% 55%, 92% 100%, 8% 100%, 0 55%, 18% 22%);
}
#furnFlame i {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  background: linear-gradient(180deg, #ffd050, #ff9822 55%, #e2453a);
  box-shadow: 0 0 8px rgba(255, 152, 34, .8);
  transition: height .25s linear;
}
#furnArrow {
  position: relative; width: 72px; height: 14px;
  background: rgba(7,9,13,.8); border: 1px solid var(--line);
  clip-path: polygon(0 30%, 66% 30%, 66% 0, 100% 50%, 66% 100%, 66% 70%, 0 70%);
  overflow: hidden;
}
#furnArrow i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: linear-gradient(90deg, var(--gilt-dim), var(--gilt-bright));
  transition: width .25s linear;
}

/* --- 附魔台 --- */
#enchPanel { width: min(420px, calc(100vw - 32px)); padding: 20px 22px 18px; animation: panelIn .22s cubic-bezier(.16,.84,.3,1); }
#enchLvlNow { color: #8cf59a !important; font-family: var(--f-num); }
#enchHead {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  background: var(--ink-0); border: 1px solid var(--line); border-radius: 3px; padding: 8px 12px;
}
#enchHead canvas { width: 40px; height: 40px; }
#enchItemName { font-size: 14px; font-weight: 700; letter-spacing: .06em; }
#enchOpts { display: flex; flex-direction: column; gap: 8px; }
.ench-opt {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-radius: 3px;
  color: var(--tx-0); font-size: 14px; font-weight: 700; letter-spacing: .1em;
  background: linear-gradient(180deg, #241a38, #170f26);
  border: 1px solid #4a2a72;
  transition: border-color .12s, box-shadow .12s, transform .06s;
}
.ench-opt:hover:not(.nope) {
  border-color: var(--ench);
  box-shadow: 0 0 14px var(--ench-glow), inset 0 0 12px rgba(176,74,232,.12);
}
.ench-opt:active:not(.nope) { transform: translateY(1px); }
.ench-opt .ename { color: #d9a0f5; }
.ench-opt .ecost {
  font-family: var(--f-num); font-size: 12px; font-weight: 800; color: #8cf59a;
  border: 1px solid #2c5a34; border-radius: 2px; padding: 2px 8px;
  background: rgba(63, 174, 78, .1);
}
.ench-opt.nope { opacity: .5; }
.ench-opt.nope .ecost { color: #e8a099; border-color: #6a2a24; background: rgba(226,69,58,.08); }
.ench-opt.deny { animation: statShake .3s linear; border-color: var(--red); }
.ench-none { padding: 18px 8px; text-align: center; color: var(--tx-2); font-size: 13px; letter-spacing: .08em; }
#enchFoot { margin-top: 14px; font-size: 11.5px; color: var(--tx-2); letter-spacing: .06em; text-align: center; }

/* --- 村民交易 --- */
#tradePanel { width: min(440px, calc(100vw - 32px)); padding: 20px 22px 18px; animation: panelIn .22s cubic-bezier(.16,.84,.3,1); }
#tradeList { display: flex; flex-direction: column; gap: 6px; max-height: min(56vh, 460px); overflow-y: auto; padding-right: 6px; }
.trade-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.028); border: 1px solid #232a38; border-radius: 3px;
  padding: 7px 12px; cursor: pointer;
  transition: border-color .12s, background-color .12s, transform .06s;
}
.trade-row:hover:not(.nope) { border-color: var(--mint-dim); background: rgba(69,230,210,.06); }
.trade-row:active:not(.nope) { transform: translateY(1px); }
.trade-row.nope { opacity: .5; cursor: default; }
.trade-item { position: relative; width: 40px; height: 40px; flex: none; }
.trade-item canvas { width: 36px; height: 36px; }
.trade-arrow { color: var(--gilt); font-size: 16px; flex: none; text-shadow: 0 0 6px var(--gilt-glow); }
.trade-name { font-size: 12.5px; color: var(--tx-1); letter-spacing: .04em; margin-left: 2px; }

/* --- 创造搜索 --- */
.creative-search { margin-bottom: 8px; flex: none; }
.creative-search input { font-family: var(--f-ui); }
#invRightBody { display: flex; flex-direction: column; min-height: 0; flex: 1; overflow: hidden; }
#invRightBody .craft-list, #invRightBody .creative-grid { flex: 1; }
.invtabs { margin-bottom: 8px; }

/* --- 死亡界面等级损失 --- */
#deathLevel {
  margin: -22px 0 30px; font-size: 12px; letter-spacing: .2em; text-indent: .2em; color: #8cf59a;
  animation: fadeIn .8s both .55s;
}

/* --- 维度切换遮罩(p11 动态创建, 兜底样式) --- */
#dimfade {
  position: fixed; inset: 0; z-index: 40; background: #000;
  opacity: 0; pointer-events: none; transition: opacity .35s;
}

/* ================================================================
   v4.1 增补: 铁砧 / 锻造台
   ================================================================ */
#anvilScreen, #smithScreen { z-index: 22; background: rgba(5,7,11,.66); }

/* 核心操作区: 输入 + 输入 = 输出 */
.be-core { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 10px 0 4px; }
.be-core .slot { cursor: pointer; }
.be-core .slot:hover { border-color: var(--gilt-dim); background: rgba(24,22,12,.55); }
.be-op {
  flex: none; font-family: var(--f-num); font-size: 20px; font-weight: 800;
  color: var(--tx-2); text-shadow: 0 1px 2px #000;
}
#anvilSlotOut .slot, #smithSlotOut .slot { width: 64px; height: 64px; border-color: var(--gilt-dim); }
#anvilSlotOut .slot canvas, #smithSlotOut .slot canvas { width: 48px; height: 48px; }

/* 费用/提示行 */
.be-note {
  margin-top: 10px; min-height: 16px; text-align: center;
  font-size: 12px; letter-spacing: .06em; color: var(--tx-2);
}
#anvilCost { font-family: var(--f-num); }
#anvilCost.ok { color: #8cf59a; }
#anvilCost.no { color: #e8a099; }

/* --- 移动端补充 --- */
@media (max-width: 620px) {
  .grid9 { grid-template-columns: repeat(9, var(--cell)); }
  #furnCore { gap: 10px; }
  .be-core { gap: 8px; }
  #invBody { flex-direction: column; }
  #armorCol { flex-direction: row; }
}