/* ===== 方块冒险 · MC 风格界面 ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%; overflow: hidden; background: #0d1016;
  font-family: "Minecraft", "Consolas", "Courier New", monospace;
  color: #eceadf; user-select: none; -webkit-tap-highlight-color: transparent;
}
#game { display: block; position: fixed; inset: 0; image-rendering: pixelated; image-rendering: crisp-edges; }
.hide { display: none !important; }
.dim { color: #a09a8e; font-size: 12px; }
.center { text-align: center; }
b { color: #ffe066; }

/* ---- MC 面板：浮雕边框 ---- */
.mcPanel {
  background: #23262c;
  border: 4px solid #4e535c;
  box-shadow: inset -4px -4px 0 #171a1f, inset 4px 4px 0 #737a85, 0 0 0 4px #0c0e12, 0 16px 44px rgba(0,0,0,.65);
  padding: 22px 24px; width: 940px; max-width: 94vw;
}
.mcPanel.narrow { width: 460px; }
h1 {
  font-size: 46px; text-align: center; letter-spacing: 4px; color: #f6e7a6;
  text-shadow: 4px 4px 0 #3b2f10, 0 0 20px rgba(246,231,166,.22);
}
h2 { font-size: 24px; text-align: center; color: #f6e7a6; text-shadow: 3px 3px 0 #3b2f10; margin-bottom: 14px; }
.sub { text-align: center; color: #8fd07a; font-size: 13px; letter-spacing: 1px; margin: 8px 0 20px; }
.help { margin-top: 18px; text-align: center; font-size: 12px; color: #b8b2a6; line-height: 2; }

kbd {
  display: inline-block; background: #3c4149; border: 2px solid #5d646f;
  box-shadow: inset -2px -2px 0 #262a30, inset 2px 2px 0 #7b838f;
  padding: 1px 6px; margin: 0 2px; font-size: 11px; color: #f0ece0;
}
.btn {
  cursor: pointer; font-family: inherit; font-size: 15px; color: #f0ece0;
  background: #5d6672; border: 3px solid #2f343c;
  box-shadow: inset -3px -3px 0 #414852, inset 3px 3px 0 #8b95a3;
  padding: 10px 22px; margin-top: 16px; letter-spacing: 1px;
}
.btn:hover { background: #6f7a88; }

/* ---- 菜单关卡卡片 ---- */
#menu, .modal {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 38%, rgba(22,28,36,.78), rgba(4,6,9,.94));
  z-index: 30;
}
#levelList { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lvCard {
  flex: 1 1 200px; max-width: 220px; cursor: pointer; text-align: center;
  background: #2b2f36; border: 3px solid #464c55;
  box-shadow: inset -3px -3px 0 #1d2025, inset 3px 3px 0 #60676f;
  padding: 10px; transition: transform .08s;
}
.lvCard:hover { transform: translateY(-4px); border-color: #8fd07a; background: #333944; }
.lvCard canvas { image-rendering: pixelated; width: 100%; height: auto; display: block; border: 2px solid #1a1d22; }
.lvName { font-size: 15px; color: #f6e7a6; margin: 8px 0 4px; }
.lvHint { font-size: 11px; color: #cfc9bc; line-height: 1.7; min-height: 34px; }
.lvKey { font-size: 10px; color: #8fd07a; margin-top: 6px; }

/* ---- HUD ---- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 10px 14px; }
.panel {
  background: rgba(14,17,22,.72); border: 2px solid #4e535c;
  box-shadow: inset -2px -2px 0 #1a1d22, inset 2px 2px 0 #6a717b;
  padding: 6px 12px; font-size: 15px; display: flex; align-items: center; gap: 8px;
}
.panel.mid { font-size: 15px; color: #f6e7a6; }
.panel .lab { color: #9a958c; font-size: 11px; }
.hearts { display: flex; gap: 2px; }
.hearts canvas { image-rendering: pixelated; width: 26px; height: 30px; }
#hint {
  position: fixed; left: 50%; top: 74px; transform: translateX(-50%);
  background: rgba(12,14,18,.86); border: 2px solid #6e747e;
  padding: 8px 20px; font-size: 14px; color: #ffe066; text-shadow: 2px 2px 0 #000;
}
#keys {
  position: fixed; left: 0; right: 0; bottom: 8px; text-align: center;
  font-size: 11px; color: #b8b2a6; text-shadow: 1px 1px 0 #000;
}
#keys #fps { margin-left: 12px; }
.win { color: #8fd07a; }
.lose { color: #e05b5b; }
#ovBody { font-size: 14px; line-height: 2; color: #cfc9bc; }

@media (max-width: 760px) {
  h1 { font-size: 30px; }
  .lvCard { flex: 1 1 44%; }
  #keys { display: none; }
}