/* ================= WebCraft — Minecraft 风格 UI ================= */
* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; }

:root {
  --mc-font: "Press Start 2P", "Microsoft YaHei", "PingFang SC", sans-serif;
  --mc-ui-font: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
}

html, body { width: 100%; height: 100%; overflow: hidden; background: #000; }
body { font-family: var(--mc-ui-font); }

.hidden { display: none !important; }

#glcanvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  display: block; outline: none;
}

/* 文字硬阴影（Minecraft 风格） */
.mc-shadow { text-shadow: 2px 2px 0 #3f3f3f; }

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

#water-overlay {
  position: absolute; inset: 0;
  background: rgba(18, 55, 156, 0.42);
  opacity: 0; transition: opacity .12s linear;
}
#water-overlay.on { opacity: 1; }

#crosshair {
  position: absolute; left: 50%; top: 50%;
  width: 22px; height: 22px;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}
#crosshair::before, #crosshair::after {
  content: ""; position: absolute; background: #ccc;
}
#crosshair::before { left: 0; top: 9px; width: 22px; height: 3px; }
#crosshair::after  { left: 9px; top: 0; width: 3px; height: 22px; }

/* 快捷栏 */
#hotbar {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  display: flex;
  background: rgba(0, 0, 0, 0.42);
  border: 2px solid rgba(0, 0, 0, 0.65);
  padding: 2px;
}
.slot {
  width: 48px; height: 48px; position: relative;
  border: 2px solid;
  border-color: #2e2e2e #6f6f6f #6f6f6f #2e2e2e;
  background: rgba(28, 28, 28, 0.55);
  display: flex; align-items: center; justify-content: center;
}
.slot img {
  width: 38px; height: 38px;
  image-rendering: pixelated;
  pointer-events: none;
}
.slot .num {
  position: absolute; left: 2px; top: 1px;
  font-size: 10px; color: #ddd; text-shadow: 1px 1px 0 #000;
  font-family: var(--mc-ui-font);
}

/* 工具耐久条（原版：满耐久绿 → 半耐久黄 → 低耐久红） */
.slot .dura {
  position: absolute; left: 3px; right: 3px; bottom: 3px; height: 3px;
  background: #000; display: none;
}
.slot .dura i { display: block; height: 100%; width: 100%; background: #3cd63c; }
.slot.sel { z-index: 1; }
.slot.sel::after {
  content: ""; position: absolute; inset: -5px;
  border: 3px solid #e8e8e8;
  box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #000;
  pointer-events: none;
}

/* 挖掘进度条（十字准星下方，MC 风格凹槽 + 亮色填充） */
#break-bar {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, 20px);
  width: 84px; height: 9px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  opacity: 0; transition: opacity .08s linear;
}
#break-bar.on { opacity: 1; }
#break-fill {
  height: 100%; width: 0%;
  background: linear-gradient(#ffffff, #b9b9b9);
}

/* 选中方块名称提示 */
#block-toast {
  position: absolute; bottom: 74px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 17px; font-weight: bold;
  text-shadow: 2px 2px 0 #3f3f3f;
  opacity: 0; transition: opacity .4s ease;
  white-space: nowrap;
}
#block-toast.show { opacity: 1; transition: none; }

/* F3 调试 */
#debug {
  position: absolute; left: 6px; top: 6px;
  color: #fff; font: 13px/1.5 Consolas, monospace;
  text-shadow: 1px 1px 0 #000;
  background: rgba(0, 0, 0, 0.3);
  padding: 4px 8px; white-space: pre;
}

/* ================= 全屏界面通用 ================= */
.screen {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.screen.dim { background: rgba(0, 0, 0, 0.6); }

/* ================= 标题界面 ================= */
#menu-screen { overflow: hidden; }
#menu-bg {
  position: absolute; inset: -40px;
  background-repeat: repeat;
  background-size: 64px 64px;
  image-rendering: pixelated;
  filter: brightness(0.32);
}
.menu-inner {
  position: relative; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding-top: 9vh;
}

.title-wrap { text-align: center; margin-bottom: 5vh; position: relative; }
#game-title {
  font-family: var(--mc-font);
  font-size: clamp(34px, 7vw, 64px);
  letter-spacing: 2px;
  color: #dcdcdc;
  text-shadow: 0 5px 0 #383838, 0 6px 0 #2a2a2a, 5px 5px 0 #2f2f2f;
  -webkit-text-stroke: 2px #1c1c1c;
}
#title-sub {
  margin-top: 14px;
  font-size: 20px; letter-spacing: 14px; text-indent: 14px;
  color: #b9b9b9; font-weight: bold;
  text-shadow: 2px 2px 0 #3f3f3f;
}
#splash {
  position: absolute; right: -60px; bottom: -4px;
  transform: rotate(-17deg);
  color: #ffff00; font-size: 16px; font-weight: bold;
  text-shadow: 2px 2px 0 #3f3f00;
  animation: splash-pulse 0.5s ease-in-out infinite alternate;
  white-space: nowrap;
}
@keyframes splash-pulse {
  from { transform: rotate(-17deg) scale(1); }
  to   { transform: rotate(-17deg) scale(1.09); }
}

.menu-buttons { display: flex; flex-direction: column; gap: 12px; }

/* 存档摘要（继续游戏下方一行小字） */
.save-info {
  margin-top: 4px;
  font-size: 13px; color: #c9c9c9;
  text-shadow: 1px 1px 0 #000;
  text-align: center;
}

/* ================= MC 风格按钮 ================= */
.mc-button {
  width: 320px; height: 44px;
  font-family: var(--mc-ui-font);
  font-size: 18px; font-weight: bold;
  color: #e4e4e4; text-shadow: 2px 2px 0 #3f3f3f;
  background-color: #8b8b8b;
  background-size: 64px 64px;
  image-rendering: pixelated;
  border: 2px solid #000;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,0.4), inset -2px -3px 0 rgba(0,0,0,0.45);
  cursor: pointer;
}
.mc-button:hover {
  color: #ffffa0;
  filter: brightness(1.18);
  border-color: #fff;
}
.mc-button:active {
  box-shadow: inset -2px -2px 0 rgba(255,255,255,0.3), inset 2px 2px 0 rgba(0,0,0,0.45);
}
.mc-button:disabled { color: #a0a0a0; cursor: default; filter: brightness(0.7); }
.mc-button.warn { color: #ff9a9a; border-color: #ff9a9a; }

.corner {
  position: absolute; bottom: 8px;
  font-size: 13px; color: #ddd; text-shadow: 1px 1px 0 #000;
}
.corner.left { left: 10px; }
.corner.right { right: 10px; }

/* ================= 面板（暂停/帮助） ================= */
.panel {
  background: rgba(16, 16, 16, 0.78);
  border: 2px solid #000;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.12);
  padding: 26px 34px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-height: 88vh; overflow: auto;
}
.panel.wide { width: min(560px, 92vw); }
.panel h2 {
  font-size: 22px; margin-bottom: 8px;
  text-shadow: 2px 2px 0 #3f3f3f; font-weight: bold;
}
.panel p { font-size: 15px; line-height: 1.7; color: #ddd; }

.help-table { border-collapse: collapse; margin-bottom: 6px; width: 100%; }
.help-table td {
  padding: 5px 14px; font-size: 15px; color: #e6e6e6;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.help-table td:first-child {
  color: #ffd35c; font-weight: bold; white-space: nowrap;
  text-shadow: 1px 1px 0 #3f3300;
}

.panel .note {
  font-size: 13px; line-height: 1.7; color: #b9b9b9;
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-top: 10px; margin-top: 2px;
}

/* ================= 加载 ================= */
#loading-screen { background: #101010; z-index: 30; flex-direction: column; }
.loading-inner { text-align: center; }
.loading-text {
  font-size: 20px; margin-bottom: 18px;
  text-shadow: 2px 2px 0 #3f3f3f;
}
#loading-bar {
  width: 420px; max-width: 80vw; height: 14px;
  border: 2px solid #dfdfdf; background: #000; padding: 2px;
}
#loading-fill {
  height: 100%; width: 0%;
  background: repeating-linear-gradient(90deg, #57a64e 0 12px, #6cbf62 12px 24px);
  transition: width .1s linear;
}

/* ================= 创造模式物品栏 ================= */
#inventory-screen { z-index: 25; }
#inv-grid {
  display: grid; grid-template-columns: repeat(9, 48px);
  gap: 2px; padding: 4px;
  background: rgba(0, 0, 0, 0.38);
  border: 2px solid #000;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1);
}
.inv-label {
  grid-column: 1 / -1;
  font-size: 13px; color: #ffd35c; font-weight: bold;
  text-shadow: 1px 1px 0 #3f3300;
  padding: 6px 2px 2px;
}
.inv-slot {
  width: 48px; height: 48px; position: relative;
  border: 2px solid;
  border-color: #2e2e2e #6f6f6f #6f6f6f #2e2e2e;
  background: rgba(28, 28, 28, 0.55);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.inv-slot img { width: 38px; height: 38px; image-rendering: pixelated; pointer-events: none; }
.inv-slot::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(255, 255, 255, 0); pointer-events: none;
}
.inv-slot:hover::after { background: rgba(255, 255, 255, 0.32); }

#inv-tooltip {
  position: fixed; z-index: 30; pointer-events: none;
  background: rgba(18, 2, 32, 0.94);
  border: 1px solid #4b1d8a;
  padding: 4px 8px;
  font-size: 14px; color: #fff;
  text-shadow: 1px 1px 0 #000;
  white-space: nowrap;
}

#fatal-screen { background: #200; z-index: 40; }