* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #000;
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
  color: #e8e0d0;
  user-select: none;
}

#game-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- 全屏界面 ---------- */
.screen {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(10, 18, 8, 0.88), rgba(0, 0, 0, 0.97));
}
.screen.hidden, .hidden { display: none !important; }

.title-inner { text-align: center; max-width: 640px; padding: 2em; }
.title-inner h1 {
  font-size: 4.5em; letter-spacing: 0.25em; font-weight: 300;
  color: #dfe8d8; text-shadow: 0 0 30px rgba(120, 180, 90, 0.35), 0 2px 8px #000;
}
.subtitle { margin: 0.6em 0 2em; letter-spacing: 0.5em; color: #97a58e; font-size: 0.95em; }
.death-title { color: #b03a2a !important; text-shadow: 0 0 40px rgba(176, 58, 42, 0.5) !important; }
#death-cause { color: #a89888; margin-bottom: 1.5em; }

.title-buttons { display: flex; flex-direction: column; gap: 0.8em; align-items: center; }
.title-buttons button {
  width: 300px; padding: 0.85em 1em;
  background: rgba(30, 42, 26, 0.85); color: #dfe8d8;
  border: 1px solid #4a5c42; border-radius: 3px;
  font-size: 1.05em; letter-spacing: 0.3em; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.title-buttons button:hover:not(:disabled) { background: rgba(58, 82, 48, 0.9); border-color: #7d9a6d; }
.title-buttons button:disabled { opacity: 0.35; cursor: default; }

#load-status { margin-top: 2em; color: #7d8a74; font-size: 0.9em; min-height: 1.4em; }
.credits { margin-top: 2.5em; font-size: 0.75em; color: #5a6454; }
.help-block { margin-top: 2em; color: #8a967f; font-size: 0.85em; line-height: 1.9; }

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

#crosshair {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 20px; color: rgba(255, 255, 255, 0.65); text-shadow: 0 0 4px #000;
}

#stats-panel {
  position: absolute; left: 18px; bottom: 18px;
  display: flex; flex-direction: column; gap: 5px;
  background: rgba(8, 12, 6, 0.55); padding: 10px 12px; border-radius: 6px;
  border: 1px solid rgba(120, 140, 100, 0.25);
}
.stat { display: flex; align-items: center; gap: 8px; }
.stat img { width: 18px; height: 18px; opacity: 0.9; }
.bar {
  width: 170px; height: 9px; border-radius: 4px;
  background: rgba(0, 0, 0, 0.6); overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.fill { height: 100%; width: 100%; border-radius: 3px; transition: width 0.25s ease-out; }
.fill.health  { background: linear-gradient(90deg, #8c2e20, #c84a32); }
.fill.stamina { background: linear-gradient(90deg, #9a8c28, #d8c840); }
.fill.hunger  { background: linear-gradient(90deg, #a0561e, #d8842e); }
.fill.thirst  { background: linear-gradient(90deg, #1e6a9a, #3aa0d8); }
.fill.energy  { background: linear-gradient(90deg, #5a3a8a, #8a62c8); }

#clock-panel {
  position: absolute; right: 18px; top: 16px;
  display: flex; align-items: center; gap: 8px;
  background: rgba(8, 12, 6, 0.55); padding: 8px 14px; border-radius: 6px;
  border: 1px solid rgba(120, 140, 100, 0.25);
  font-size: 0.95em; letter-spacing: 0.1em; color: #cfd8c4;
}
#clock-panel img { width: 18px; height: 18px; opacity: 0.85; }

#interact-prompt {
  position: absolute; left: 50%; top: 58%; transform: translateX(-50%);
  background: rgba(8, 12, 6, 0.7); padding: 8px 18px; border-radius: 5px;
  border: 1px solid rgba(160, 180, 130, 0.35); font-size: 0.95em; color: #e6eeda;
}

#notify-area {
  position: absolute; left: 50%; top: 20%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.notify {
  background: rgba(8, 12, 6, 0.72); border: 1px solid rgba(160, 180, 130, 0.3);
  padding: 6px 16px; border-radius: 5px; font-size: 0.9em; color: #dde6cf;
  animation: notifyfade 3s forwards;
}
@keyframes notifyfade {
  0% { opacity: 0; transform: translateY(-8px); }
  8% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

#hotbar {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; gap: 6px;
}
.hotslot {
  width: 58px; height: 58px; border-radius: 6px;
  background: rgba(8, 12, 6, 0.6); border: 2px solid rgba(120, 140, 100, 0.3);
  position: relative; display: flex; align-items: center; justify-content: center;
}
.hotslot.active { border-color: #d8c840; box-shadow: 0 0 10px rgba(216, 200, 64, 0.35); }
.hotslot img { width: 34px; height: 34px; opacity: 0.92; }
.hotslot .key {
  position: absolute; top: 2px; left: 5px; font-size: 0.65em; color: #8a967f;
}
.hotslot .count {
  position: absolute; bottom: 2px; right: 5px; font-size: 0.7em; color: #d8d0b8;
  text-shadow: 0 1px 2px #000;
}

#damage-vignette {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(160, 20, 10, 0.55) 100%);
  transition: opacity 0.5s;
}

/* ---------- 面板界面（物品栏/合成/手册） ---------- */
.panel-screen {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55);
}
.panel {
  width: 640px; max-width: 92vw; max-height: 80vh; overflow-y: auto;
  background: rgba(16, 22, 12, 0.92); border: 1px solid #4a5c42; border-radius: 8px;
  padding: 1.4em 1.6em;
}
.panel h2 {
  font-weight: 400; letter-spacing: 0.25em; margin-bottom: 0.9em; color: #dfe8d8;
  display: flex; align-items: center; gap: 10px; font-size: 1.2em;
}
.h-icon { width: 24px; height: 24px; }
.panel-tip { margin-top: 1em; font-size: 0.8em; color: #7d8a74; }

#inventory-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.inv-slot {
  aspect-ratio: 1; border-radius: 6px; position: relative;
  background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(120, 140, 100, 0.25);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color 0.1s;
}
.inv-slot:hover { border-color: #d8c840; }
.inv-slot img { width: 55%; height: 55%; }
.inv-slot .count {
  position: absolute; bottom: 3px; right: 6px; font-size: 0.75em; color: #d8d0b8;
}
.inv-slot .name {
  position: absolute; top: 3px; left: 0; right: 0; text-align: center;
  font-size: 0.62em; color: #97a58e; overflow: hidden; white-space: nowrap;
}
.inv-slot.equipped { border-color: #7d9a6d; box-shadow: inset 0 0 12px rgba(125, 154, 109, 0.3); }

.recipe, .blueprint {
  display: flex; align-items: center; gap: 12px;
  background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(120, 140, 100, 0.22);
  border-radius: 6px; padding: 10px 14px; margin-bottom: 8px; cursor: pointer;
  transition: border-color 0.1s, background 0.1s;
}
.recipe:hover, .blueprint:hover { border-color: #d8c840; background: rgba(20, 28, 14, 0.6); }
.recipe.locked, .blueprint.locked { opacity: 0.45; cursor: default; }
.recipe img, .blueprint img { width: 34px; height: 34px; }
.recipe .r-name, .blueprint .r-name { flex: 1; }
.recipe .r-name b, .blueprint .r-name b { display: block; font-weight: 500; color: #e2ead6; }
.recipe .r-name span, .blueprint .r-name span { font-size: 0.78em; color: #8a967f; }
.r-cost { font-size: 0.8em; color: #b8ac8a; text-align: right; line-height: 1.5; }

/* 滚动条 */
.panel::-webkit-scrollbar { width: 8px; }
.panel::-webkit-scrollbar-thumb { background: #3a4a34; border-radius: 4px; }