html, body { margin: 0; height: 100%; overflow: hidden; background: #87b8e8; }
#gl { display: block; width: 100vw; height: 100vh; touch-action: none; cursor: crosshair; }
#hud {
  position: fixed; left: 8px; top: 6px; z-index: 10;
  font: 12px/1.5 ui-monospace, Menlo, monospace;
  color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(0,0,0,.6);
  background: rgba(0,0,0,.28); padding: 4px 10px; border-radius: 8px;
  pointer-events: none; max-width: 92vw;
}

/* 十字准星（MC 反色风格） */
#bp-cross { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 15;
  pointer-events: none; mix-blend-mode: difference; }
#bp-cross::before, #bp-cross::after { content: ""; position: absolute; background: #fff; }
#bp-cross::before { width: 18px; height: 2px; left: -9px; top: -1px; }
#bp-cross::after { width: 2px; height: 18px; left: -1px; top: -9px; }

/* 热键栏（MC 原版风） */
#bp-hotbar {
  position: fixed; left: 50%; bottom: 8px; transform: translateX(-50%);
  display: flex; z-index: 10;
  background: rgba(20,20,20,.55); padding: 3px; border-radius: 4px;
  border: 2px solid rgba(0,0,0,.45); outline: 1px solid rgba(255,255,255,.18);
}
.bp-slot {
  position: relative; width: 46px; height: 46px; cursor: pointer;
  background: rgba(140,140,140,.28);
  border: 2px solid rgba(0,0,0,.4); box-shadow: inset 1px 1px 0 rgba(255,255,255,.22);
}
.bp-slot canvas { position: absolute; inset: 4px; width: 38px; height: 38px; image-rendering: pixelated; }
.bp-slot.sel { border-color: #fff; box-shadow: 0 0 0 2px #fff, inset 1px 1px 0 rgba(255,255,255,.3); z-index: 1; }
#bp-hotbar-name {
  position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%); z-index: 10;
  font: 700 15px -apple-system, "PingFang SC", sans-serif; color: #fff;
  text-shadow: 0 2px 3px rgba(0,0,0,.8); opacity: 0; transition: opacity .5s; pointer-events: none;
}

/* 生存状态条（MC 布局：贴热键栏上方） */
#bp-status { position: fixed; left: 50%; bottom: 62px; transform: translateX(-50%);
  display: flex; justify-content: space-between; width: 424px; z-index: 10; pointer-events: none; }
.bp-hp, .bp-food { image-rendering: pixelated; }
#bp-xp { position: fixed; left: 50%; bottom: 56px; transform: translateX(-50%);
  width: 424px; height: 6px; background: rgba(0,0,0,.55); border-radius: 3px; z-index: 10; }
#bp-xp-fill { height: 100%; width: 0; background: #7fe64c; border-radius: 3px; }
#bp-xp-lv { position: absolute; left: 50%; top: -16px; transform: translateX(-50%);
  font: 700 13px sans-serif; color: #7fe64c; text-shadow: 0 0 3px #143b00; }

/* 水下视效 */
#bp-water { position: fixed; inset: 0; z-index: 18; pointer-events: none;
  background: rgba(24, 68, 148, 0.38); opacity: 0; transition: opacity .3s; }

/* E 创造物品栏 */
#bp-inv {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -54%); z-index: 25;
  background: rgba(28, 28, 30, 0.94); border: 2px solid rgba(0,0,0,.5);
  outline: 2px solid rgba(255,255,255,.25); border-radius: 8px; padding: 12px 14px;
  max-width: 520px;
}
.bp-inv-title { color: #ddd; font: 700 13px -apple-system, "PingFang SC", sans-serif; margin-bottom: 10px; }
.bp-inv-grid { display: flex; flex-wrap: wrap; gap: 6px; max-width: 480px; }
.bp-inv-cell {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 52px; padding: 5px 2px; cursor: pointer;
  background: rgba(140,140,140,.22); border: 1px solid rgba(0,0,0,.45);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.18);
}
.bp-inv-cell:hover { background: rgba(255,255,255,.28); }
.bp-inv-cell canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.bp-inv-cell span { color: #ccc; font: 10px sans-serif; }

/* 受击红闪 / 死亡遮罩 */
#bp-hurt { position: fixed; inset: 0; z-index: 20; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(200,0,0,.55)); opacity: 0; transition: opacity .5s; }
#bp-dead {
  position: fixed; inset: 0; z-index: 30; display: none;
  align-items: center; justify-content: center; flex-direction: column;
  background: rgba(120,0,0,.45); color: #fff; cursor: pointer;
}
#bp-dead h2 { font: 700 28px sans-serif; text-shadow: 0 2px 4px #000; }
#bp-dead p { margin-top: 8px; font: 14px sans-serif; opacity: .85; }