/* ============================================================
   yangshi.css —— 全部样式：画布 / 状态栏 / 对话框 / 菜单 / 标题 / 书 / 通关
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0a0c; }
body {
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
  user-select: none;
  color: #cfcfd4;
}

/* —— 画布：保持 16:9 比例放大，留黑边 —— */
#youxihuabu {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  background: #0a0a0c;
}

/* —— 界面层：盖在画布上，本身不挡鼠标（需要点击的组件自己打开 pointer-events） —— */
#jiemianceng { position: fixed; inset: 0; pointer-events: none; }

/* —— 通用按钮 —— */
.jm-anniu {
  pointer-events: auto;
  background: #33333c;
  color: #cfcfd4;
  border: 1px solid #4a4a55;
  padding: 10px 36px;
  font-size: 17px;
  letter-spacing: 4px;
  cursor: pointer;
}
.jm-anniu:hover { background: #3d3d47; color: #ffffff; }

/* —— 通用遮罩（标题 / 菜单 / 书 / 通关 共用） —— */
.jm-zhezhao {
  display: none;
  position: absolute; inset: 0;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 20px;
  background: rgba(8, 8, 12, 0.88);
  pointer-events: auto;
}
.jm-zhezhao.xianshi { display: flex; }
.jm-biaoti { font-size: 40px; letter-spacing: 8px; color: #e6e6ea; }

/* —— 状态栏（血条 / 醒来次数 / 倒计时 / E提示） —— */
.zt-gen { position: absolute; inset: 0; pointer-events: none; }
.zt-zuo { position: absolute; top: 14px; left: 16px; display: flex; flex-direction: column; gap: 6px; }
.zt-shengming { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #b8b8c0; }
.zt-ming { letter-spacing: 2px; }
.zt-tiao { width: 150px; height: 14px; background: #191920; border: 1px solid #3a3a44; }
.zt-chong { height: 100%; width: 100%; background: #7d3a3a; }
.zt-shuzi { font-size: 12px; color: #8a8a94; }
.zt-siwang { font-size: 13px; color: #8a8a94; letter-spacing: 1px; }
.zt-daojishi {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  font-size: 26px; letter-spacing: 3px; color: #d8d8de;
  background: rgba(10, 10, 14, 0.55); padding: 2px 14px; border: 1px solid #33333c;
}
.zt-daojishi.jinji { color: #d0654a; }
.zt-tishi {
  position: absolute; bottom: 150px; left: 50%; transform: translateX(-50%);
  font-size: 16px; color: #e8e8ec; letter-spacing: 2px;
  background: rgba(10, 10, 14, 0.7); padding: 6px 18px; border: 1px solid #3a3a44;
  white-space: nowrap;
}
.zt-tishi:empty { display: none; }

/* —— 对话框（警报等，不阻碍行动） —— */
.dh-gen {
  position: absolute; left: 50%; bottom: 88px; transform: translateX(-50%);
  max-width: 620px; padding: 14px 26px;
  background: rgba(10, 10, 14, 0.9); border: 1px solid #3d3d48;
  font-size: 17px; letter-spacing: 2px; line-height: 1.7; text-align: center;
  opacity: 0; transition: opacity 0.35s; pointer-events: none;
}
.dh-gen.xianshi { opacity: 1; pointer-events: auto; }

/* —— 物品栏（左下角） —— */
.wpl-gen {
  position: absolute; left: 12px; bottom: 12px;
  display: flex; flex-wrap: wrap; gap: 6px; max-width: 430px;
  pointer-events: auto;
}
.wpl-gezi {
  width: 62px; height: 62px; background: rgba(16, 16, 22, 0.8);
  border: 1px solid #3d3d48; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.wpl-gezi:hover { border-color: #6a6a78; }
.wpl-kuai { width: 28px; height: 28px; }
.wpl-ming { font-size: 12px; color: #cfcfd4; }
.wpl-tanchuang {
  position: absolute; left: 0; bottom: 72px; width: 300px;
  background: rgba(12, 12, 18, 0.95); border: 1px solid #3d3d48; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.wpl-tc-ming { font-size: 19px; color: #e8e8ec; letter-spacing: 3px; }
.wpl-tc-miaoshu { font-size: 14px; color: #a8a8b2; line-height: 1.6; }
.wpl-tc-xiaoxi { font-size: 14px; color: #d0654a; min-height: 18px; }
.wpl-tc-anniu { display: flex; gap: 10px; }

/* —— 标题画面 —— */
.bt-ming { font-size: 64px; letter-spacing: 16px; color: #e0e0e6; }
.bt-kaichang { font-size: 16px; letter-spacing: 4px; color: #90909a; }
.bt-caozuo { font-size: 13px; letter-spacing: 2px; color: #5a5a64; }

/* —— 书（阅读界面） —— */
.yd-shu { font-size: 26px; letter-spacing: 6px; color: #e0e0e6; }
.yd-neirong {
  width: 520px; max-height: 46vh; overflow-y: auto;
  background: rgba(24, 24, 32, 0.9); border: 1px solid #3d3d48; padding: 20px 26px;
  font-size: 16px; line-height: 2.1; letter-spacing: 1px; color: #c8c8d0;
}
.yd-neirong p { margin: 4px 0; }

/* —— 通关画面 —— */
.tg-fu { font-size: 16px; letter-spacing: 4px; color: #90909a; }
.tg-tongji { font-size: 18px; letter-spacing: 2px; color: #d8d8de; }
.tg-demo { font-size: 13px; letter-spacing: 6px; color: #5a5a64; }