:root{ --ui-zoom: 1; }
* { margin: 0; padding: 0; box-sizing: border-box; }

/* 通用隐藏：必须全局生效，否则 HUD / 提示条 / 触控层会一直常驻 */
.hidden { display: none !important; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0a0a05;
  font-family: "Courier New", Consolas, monospace;
  user-select: none;
}

canvas#game {
  display: block;
  position: fixed;
  inset: 0;
}

/* ---------- HUD ---------- */
#hud {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 18px;
  color: #e8dd9a;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
  z-index: 10;
  pointer-events: none;
}

#hud .hud-right {
  display: flex;
  gap: 8px;
  align-items: center;
  pointer-events: auto;
}

#level-label {
  font-size: calc(22px * var(--ui-zoom, 1));
  font-weight: bold;
  letter-spacing: 2px;
  color: #ffe97a;
}

#objective {
  font-size: calc(12px * var(--ui-zoom, 1));
  opacity: .85;
  margin-top: 2px;
}

#entities-label, #time-label {
  font-size: calc(14px * var(--ui-zoom, 1));
  background: rgba(0, 0, 0, .4);
  border: 1px solid rgba(255, 255, 255, .15);
  padding: 5px 10px;
  border-radius: 4px;
}

#hud button {
  background: rgba(0, 0, 0, .4);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #e8dd9a;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 4px;
  font-size: calc(13px * var(--ui-zoom, 1));
  font-family: inherit;
}

#hud button:hover { background: rgba(0, 0, 0, .65); }

#stamina-bar {
  position: fixed;
  /* 快捷键栏 bottom:14px + 高 62px = 占到 76px —— 体力条抬到它上面，别再叠在一起 */
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 10px;
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 6px;
  z-index: 10;
}

#stamina-fill {
  height: 100%;
  width: 100%;
  background: #8df06a;
  border-radius: 5px;
  transition: width .1s linear, background .2s;
}

/* ---------- 生命 / 理智 ---------- */
/* 生命 / 理智：放在 HUD 左侧那一列里，跟着 HUD 一起布局，不会压到摇杆和按钮 */
#vitals {
  margin-top: 7px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 7px 10px;
  background: rgba(0, 0, 0, .42);
  border: 1px solid rgba(255, 233, 122, .18);
  border-radius: 7px;
  pointer-events: none;
  align-self: flex-start;
}

.vital {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vlabel {
  font-size: calc(11px * var(--ui-zoom, 1));
  letter-spacing: 2px;
  color: #c9b25f;
  width: 28px;
  flex: none;
}

.vbar {
  width: 168px;
  height: 9px;
  background: rgba(0, 0, 0, .6);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 5px;
  overflow: hidden;
  flex: none;
}

#hp-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #d8483f, #ff8a6a);
  transition: width .12s linear, background .2s;
}

#san-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #4a7fd8, #7fd4ff);
  transition: width .12s linear, background .2s;
}

.vnum {
  font-size: calc(11px * var(--ui-zoom, 1));
  color: #ddd2a0;
  width: 26px;
  text-align: right;
  flex: none;
}

/* 左下角：帧率 / 延迟 —— 故意做得很小，别抢视线 */
#perf {
  margin-top: 4px;
  font-size: calc(10px * var(--ui-zoom, 1));
  line-height: 1.35;
  letter-spacing: .3px;
  color: rgba(215, 205, 165, .5);
  font-variant-numeric: tabular-nums;
  align-self: flex-start;
  pointer-events: none;
  user-select: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
#perf .p-warn { color: rgba(232, 150, 90, .75); }
#perf .p-bad  { color: rgba(230, 110, 110, .8); }
body.is-touch #perf { font-size: calc(9px * var(--ui-zoom, 1)); }

/* 污染层数：喝了几瓶受污染的杏仁水 */
#bad-stacks {
  font-size: calc(11px * var(--ui-zoom, 1));
  letter-spacing: 1px;
  color: #9ee08a;
  background: rgba(40, 90, 30, .35);
  border: 1px solid rgba(120, 220, 100, .4);
  border-radius: 4px;
  padding: 2px 7px;
  align-self: flex-start;
  animation: badPulse 1.4s ease-in-out infinite;
}

@keyframes badPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(120, 220, 100, .3); }
  50%      { box-shadow: 0 0 16px rgba(120, 220, 100, .75); }
}

/* ---------- 背包 ---------- */
#bag.overlay { z-index: 30; }
/* 账号 / 设置：DOM 排在开始菜单之前，得抬到菜单之上才点得到 */
#account.overlay { z-index: 30; }
#settings.overlay { z-index: 30; }
#settings.overlay { backdrop-filter: none; -webkit-backdrop-filter: none; }
/* 公告：从主菜单打开，得抬到菜单(20)之上才点得到 */
#announce.overlay { z-index: 36; }

.panel.bag {
  max-width: 620px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.bag-body {
  display: flex;
  gap: 14px;
  min-height: 0;
  flex: 1;
  margin: 10px 0;
}

/* 左边：快捷键槽位设定 */
.bag-side {
  flex: 0 0 132px;
  border-right: 1px dashed #d7c99c;
  padding-right: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.bag-side-title { font-size: calc(13px * var(--ui-zoom, 1)); font-weight: bold; color: #6a5a34; }
.bag-tip { font-size: calc(11.5px * var(--ui-zoom, 1)); line-height: 1.55; color: #8a7a5a; margin-top: auto; }
#bag-hot { display: flex; flex-direction: column; gap: 8px; }
.bag-hot-slot {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid #cbbd8e; border-radius: 5px;
  background: rgba(255, 252, 235, .5);
  padding: 7px 8px; cursor: pointer; min-height: 44px;
}
.bag-hot-slot:hover { background: #fff8dd; border-color: #8a7a45; }
.bag-hot-slot.filled { background: #fff3c4; }
.bag-hot-key {
  width: 20px; height: 20px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(11px * var(--ui-zoom, 1)); border-radius: 3px;
  background: rgba(160, 130, 60, .2); color: #6a5a34;
}
.bag-hot-nm { font-size: calc(12.5px * var(--ui-zoom, 1)); color: #3f3520; }
.bag-hot-nm.none { color: #a89a78; }

/* 右边：格子状背包 */
.bag-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 0; }

#bag-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  gap: 6px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px;
  min-height: 96px;
  max-height: 46vh;
  align-content: start;
}

/* 一个格子 = 一件物品，不叠加 */
.bag-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 52px;
  border: 1px solid #cbbd8e;
  border-radius: 5px;
  background: rgba(255, 252, 235, .55);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px; cursor: pointer; padding: 3px;
  transition: background .12s, border-color .12s;
}
.bag-cell:hover { background: #fff8dd; border-color: #8a7a45; }
.bag-cell.sel { background: #fff3c4; border-color: #8a7a45; box-shadow: inset 0 0 0 2px rgba(160,130,60,.35); }
.bag-cell.blank { border-style: dashed; opacity: .55; cursor: default; }
.bag-cell.blank:hover { background: rgba(255, 252, 235, .55); border-color: #cbbd8e; }
.bag-cell .bc-ic { width: 22px; height: 26px; flex: none; border-radius: 3px; border: 1px solid rgba(0,0,0,.35); }
.bag-cell .bc-nm {
  font-size: calc(10.5px * var(--ui-zoom, 1)); line-height: 1.15; color: #3f3520; text-align: center;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.bag-cell .bc-ic.almond { background: linear-gradient(180deg, #ffe9a3, #d8a94e); }
.bag-cell .bc-ic.bad    { background: linear-gradient(180deg, #a8c98a, #4d7a3a); }
.bag-cell .bc-ic.crowbar{ background: linear-gradient(180deg, #9aa0a6, #4a4f55); }
.bag-cell .bc-ic.torch  { background: linear-gradient(180deg, #ffb26b, #b5551e); }
.bag-cell .bc-ic.key    { background: linear-gradient(180deg, #e0d27a, #8f7d24); }
.bag-cell .bc-ic.meat   { background: linear-gradient(180deg, #e88a8a, #8a3333); }
.bag-cell .bc-ic.hubkey { background: linear-gradient(180deg, #b9c6d6, #5c6a7c); }
.bag-cell .bc-ic.divesuit { background: linear-gradient(180deg, #7fd7e8, #2b6f86); }
.bag-cell .bc-ic.submarine { background: linear-gradient(180deg, #9fb0c0, #445566); }

#bag-desc {
  font-size: calc(12.5px * var(--ui-zoom, 1));
  line-height: 1.7;
  color: #4a3f26;
  border-top: 1px dashed #d7c99c;
  padding-top: 9px;
  min-height: 62px;
  overflow-y: auto;
  max-height: 24vh;
}

#bag-desc .eff { color: #8a5a2a; font-weight: bold; }

/* 手机横屏等矮屏：整体压缩 */
@media (max-height: 460px) {
  .panel { padding: 16px 22px; }
  .panel.bag { max-height: 92vh; }
  #bag-list { gap: 5px; max-height: 34vh; }
  .bag-cell { min-height: 44px; }
  #bag-desc { min-height: 0; font-size: calc(11.5px * var(--ui-zoom, 1)); line-height: 1.5; padding-top: 6px; max-height: 18vh; }
  .panel button { padding: 9px 18px; font-size: calc(13px * var(--ui-zoom, 1)); }
}
@media (max-width: 560px) {
  .bag-body { flex-direction: column; }
  .bag-side { flex: none; border-right: none; border-bottom: 1px dashed #d7c99c; padding: 0 0 8px; }
  #bag-hot { flex-direction: row; }
  .bag-hot-slot { flex: 1; }
  .bag-tip { margin-top: 0; }
}

/* ---------- 屏幕下方的三个快捷键物品框 ---------- */
#hotbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  display: flex;
  gap: 10px;
  z-index: 12;
  pointer-events: auto;
}
#hotbar.hidden { display: none; }
/* 触屏：左下角是摇杆，快捷键栏要往上抬，别压在摇杆上（体力条同理抬到它上方） */
/* 触屏：摇杆占着左下角一大片，快捷键栏挪到右下角、抬到按钮行之上 */
body.is-touch #hotbar {
  left: auto;
  right: 10px;
  transform: none;
  /* 右下角那列按钮（拾取 + 阅读竖排两颗 + 外圈）最高能占到 ~214px，
     快捷键栏必须整个抬到它上面，否则会跟"拾取"重叠。 */
  bottom: calc(232px + env(safe-area-inset-bottom, 0px));
}
body.is-touch #stamina-bar {
  bottom: calc(300px + env(safe-area-inset-bottom, 0px));
}
/* 摇杆区占了左下角 46% 宽 —— 槽位缩一点，完全避开它 */
body.is-touch .hot-slot { width: 52px; height: 52px; }
/* 更窄的屏（SE 一类）：槽位再收一档，彻底避开摇杆区 */
@media (max-width: 380px) {
  body.is-touch .hot-slot { width: 46px; height: 46px; font-size: calc(10px * var(--ui-zoom, 1)); }
  body.is-touch #hotbar { gap: 6px; right: 6px; bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }
}
body.is-touch #hotbar { gap: 8px; right: 8px; }
.hot-slot {
  position: relative;
  width: 62px; height: 62px;
  border: 2px solid rgba(216, 200, 150, .55);
  border-radius: 7px;
  background: rgba(18, 16, 12, .62);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .55);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px; cursor: pointer;
  transition: background .12s, border-color .12s, transform .1s;
}
.hot-slot:hover { border-color: rgba(255, 233, 122, .9); }
.hot-slot:active { transform: translateY(1px); }
.hot-slot.flash { background: rgba(70, 66, 40, .8); border-color: #ffe97a; }
.hot-slot .hot-key {
  position: absolute; top: -8px; left: -8px;
  width: 18px; height: 18px; border-radius: 3px;
  background: rgba(30, 28, 22, .9);
  border: 1px solid rgba(216, 200, 150, .5);
  color: #ffe97a; font-size: calc(10.5px * var(--ui-zoom, 1));
  display: flex; align-items: center; justify-content: center;
}
.hot-slot .hot-ic { width: 20px; height: 24px; border-radius: 3px; border: 1px solid rgba(0,0,0,.4); }
.hot-slot .hot-ic.almond { background: linear-gradient(180deg, #ffe9a3, #d8a94e); }
.hot-slot .hot-ic.bad    { background: linear-gradient(180deg, #a8c98a, #4d7a3a); }
.hot-slot .hot-ic.crowbar{ background: linear-gradient(180deg, #9aa0a6, #4a4f55); }
.hot-slot .hot-ic.torch  { background: linear-gradient(180deg, #ffb26b, #b5551e); }
.hot-slot .hot-ic.key    { background: linear-gradient(180deg, #e0d27a, #8f7d24); }
.hot-slot .hot-ic.meat   { background: linear-gradient(180deg, #e88a8a, #8a3333); }
.hot-slot .hot-ic.hubkey { background: linear-gradient(180deg, #b9c6d6, #5c6a7c); }
.hot-slot .hot-ic.divesuit { background: linear-gradient(180deg, #7fd7e8, #2b6f86); }
.hot-slot .hot-ic.submarine { background: linear-gradient(180deg, #9fb0c0, #445566); }
.hot-slot .hot-nm {
  font-size: calc(9.5px * var(--ui-zoom, 1)); color: #e8dfc0; text-align: center;
  max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hot-slot.empty .hot-nm { color: rgba(200, 190, 160, .45); }
body.is-touch #hotbar { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 470px) { body.is-touch #hotbar { bottom: calc(158px + env(safe-area-inset-bottom, 0px)); } }

/* ---------- M.E.G 伸缩门 ---------- */

/* ---------- 主菜单右上角的账号按钮 ---------- */
.menu-topbtns {
  position: fixed;
  right: 18px;
  top: 16px;
  z-index: 6;
  display: flex;
  gap: 10px;
  align-items: center;   /* 适龄提示图不把账号按钮撑高 */
}
.mtop-btn {
  padding: 9px 20px;
  font-size: calc(14.5px * var(--ui-zoom, 1));
  letter-spacing: 3px;
  color: #d8cfae;
  background: rgba(14, 13, 10, .78);
  border: 1px solid rgba(216, 200, 150, .38);
  border-radius: 5px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.mtop-btn:hover {
  background: rgba(40, 36, 26, .9);
  border-color: rgba(255, 233, 122, .6);
  color: #ffe97a;
  transform: scale(1.06);
}

/* ---------- 公告面板 ---------- */
.ann-box {
  width: min(520px, 92vw);
  max-height: min(86vh, 86vh);
  max-height: min(86dvh, 86vh);
  display: flex;
  flex-direction: column;
  background: #0b0c10;
  border: 1px solid #2a2f3a;
  border-radius: 10px;
  padding: 18px 18px 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
  margin: auto;
}
.ann-body {
  flex: 1 1 auto;
  min-height: 140px;
  overflow-y: auto;               /* 内容长了自己滚动 */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  color: #cfc9b6;
  font-size: calc(14px * var(--ui-zoom, 1));
  line-height: 1.8;
  white-space: pre-wrap;          /* 保留原文里自己敲的换行 */
  word-break: break-word;
  overflow-wrap: anywhere;        /* 超长串不会把框撑破 */
  padding: 4px 8px 4px 2px;
  margin-bottom: 12px;
}
.ann-body::-webkit-scrollbar { width: 8px; }
.ann-body::-webkit-scrollbar-track { background: rgba(255, 255, 255, .04); border-radius: 4px; }
.ann-body::-webkit-scrollbar-thumb { background: rgba(216, 200, 150, .3); border-radius: 4px; }
.ann-body::-webkit-scrollbar-thumb:hover { background: rgba(216, 200, 150, .5); }

/* ---------- 设置面板 ---------- */
.acc-box .set-row {
  flex-wrap: wrap;
  row-gap: 6px;
}
.set-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.set-label { width: 82px; font-size: calc(14px * var(--ui-zoom, 1)); color: #dfe4ec; letter-spacing: 1px; }
.set-switch {
  width: 52px;
  padding: 8px 0;
  font-size: calc(14px * var(--ui-zoom, 1));
  color: #9aa3b2;
  background: rgba(20, 24, 30, .85);
  border: 1px solid #333c48;
  border-radius: 5px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.set-switch.on {
  color: #b6e6c0;
  background: rgba(28, 42, 32, .9);
  border-color: rgba(150, 220, 170, .5);
}
.set-range { flex: 1; min-width: 0; accent-color: #ffe97a; cursor: pointer; }
.set-num { width: 34px; text-align: right; font-size: calc(13.5px * var(--ui-zoom, 1)); color: #9aa3b2; }
.set-tip { font-size: calc(12.5px * var(--ui-zoom, 1)); color: #9aa3b2; line-height: 1.6; margin-bottom: 14px; }

/* ---------- 主菜单右下角的背景图按钮 ---------- */
/* 右下角一组小按钮（攻略 / 背景图）：改成容器定位，两个叠着放 */
/* 主菜单彩蛋按钮（结局 2） */
.bg-btn.egg2 {
  border-color: rgba(120, 200, 255, .45);
  color: #bfe6ff;
  box-shadow: 0 0 18px rgba(120, 200, 255, .18);
}
.bg-btn.egg2:hover { background: rgba(24, 40, 54, .8); border-color: rgba(160, 225, 255, .8); color: #eaf8ff; }
.menu-corner {
  position: fixed;
  right: 18px;
  bottom: 14px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: flex-end;
}
.menu-corner .bg-btn { position: static; }

.bg-btn {
  position: fixed;
  right: 18px;
  bottom: 14px;
  z-index: 6;
  padding: 7px 14px;
  font-size: calc(12.5px * var(--ui-zoom, 1));
  letter-spacing: 1px;
  color: #d8cfae;
  background: rgba(14, 13, 10, .72);
  border: 1px solid rgba(216, 200, 150, .35);
  border-radius: 4px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.bg-btn:hover {
  background: rgba(40, 36, 26, .85);
  border-color: rgba(255, 233, 122, .6);
  color: #ffe97a;
}

/* ---------- 背景图选择面板 ---------- */
#bgsel .panel { max-width: 520px; max-height: 86vh; overflow-y: auto; }
#bgsel-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.bg-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  border: 1px solid #cbbd8e;
  border-radius: 5px;
  background: rgba(255, 252, 235, .5);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.bg-item:hover { background: #fff8dd; border-color: #8a7a45; }
.bg-item.on { background: #fff3c4; border-color: #8a7a45; box-shadow: inset 0 0 0 2px rgba(160,130,60,.3); }
.bg-item.locked { opacity: .72; cursor: default; border-style: dashed; }
.bg-item .bg-thumb {
  width: 54px; height: 34px; flex: none;
  border-radius: 3px; border: 1px solid rgba(0,0,0,.3);
  background: rgba(120,110,80,.35);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(10px * var(--ui-zoom, 1)); color: #6a5a34; overflow: hidden;
}
.bg-item .bg-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bg-item .bg-name { font-size: calc(13.5px * var(--ui-zoom, 1)); color: #3f3520; flex: 1 1 auto; }
.bg-item .bg-tag {
  font-size: calc(11.5px * var(--ui-zoom, 1)); flex: none;
  padding: 1px 8px; border-radius: 3px;
  background: rgba(160, 130, 60, .16); color: #6a5a34;
}
.bg-item.on .bg-tag { background: rgba(90, 122, 52, .2); color: #4a6a2a; }
.bg-item.locked .bg-tag { background: rgba(140, 60, 40, .16); color: #8a4a3a; }
#bgsel-desc {
  font-size: calc(12.5px * var(--ui-zoom, 1)); line-height: 1.7; color: #4a3f26;
  border-top: 1px dashed #d7c99c; padding-top: 9px; min-height: 54px;
}

/* ---------- 笑魇突脸：铺满整个游戏画面 ---------- */
#scare {
  z-index: 90;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
#scare.hidden { display: none; }
#scare-img {
  position: fixed;
  inset: 0;
  width: 100vw; height: 100vh;
  max-width: none; max-height: none;
  object-fit: cover;          /* 铺满，不留边 */
  object-position: center;
  background: #000;
  animation: scare-in .12s steps(2) 1;
}
@keyframes scare-in {
  from { transform: scale(1.35); filter: brightness(2.2); }
  to   { transform: scale(1);    filter: brightness(1); }
}

/* ---------- 遮罩层 ---------- */
.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .72);
  z-index: 20;
}

.overlay.hidden { display: none; }

/* 面板层级：DOM 里排在 #menu（同样是 20）之前的会被菜单整块盖住 ——
   菜单背景是不透明的深色渐变，盖住就等于"点了没反应"。
   从菜单/设置里打开的面板必须比它的父面板高一层。
   适龄说明、排行榜：从主菜单打开 -> 高于菜单(20)
   键位：从设置打开      -> 高于设置(30)
   地图全貌：游戏内打开  -> 高于 HUD(10) */
#slts.overlay  { z-index: 36; }
#rank.overlay  { z-index: 36; }
#verlog.overlay{ z-index: 36; }
#keymap.overlay{ z-index: 34; }
#mapview.overlay{ z-index: 24; }
#elevator.overlay{ z-index: 22; }
#bntg.overlay   { z-index: 26; }   /* 游戏内从柜台打开 -> 高于 HUD(10) */

/* ---- B.N.T.G 新时代广场：柜台 ---- */
.bntg-box { width: min(560px, 94vw); }
.bntg-tip {
  font-size: 13px; line-height: 1.7; color: #9a8f74;
  margin-bottom: 10px;
}
.bntg-wallet {
  font-size: 13px; color: #cabb92; margin-bottom: 10px;
  padding: 7px 10px; border-radius: 6px;
  background: rgba(0,0,0,.30); border: 1px solid rgba(150,130,80,.28);
}
.bntg-wallet b { color: #f0d98a; font-size: 15px; }
.bntg-wallet { display: flex; flex-wrap: wrap; gap: 6px 18px; }
/* 兑换区：杏仁水 <-> B.N.T.G 货币 */
.bntg-ex {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px;
  padding: 9px 11px; border-radius: 7px;
  background: rgba(0,0,0,.30); border: 1px dashed rgba(150,130,80,.35);
}
.bntg-ex .ex-t { font-size: 12px; color: #9a8f74; }
.bntg-ex .ex-r { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bntg-ex .ex-r .lb { font-size: 12px; color: #cabb92; min-width: 74px; flex: 0 0 auto; }
.bntg-ex button { flex: 0 0 auto; min-width: 0; padding: 6px 10px; font-size: 12px; }
/* 商品行：两种货币各一个买 / 卖按钮，挤不下就换行 */
.bntg-acts { display: flex; flex-wrap: wrap; gap: 6px; flex: 0 0 auto; justify-content: flex-end; }
.bntg-acts button { flex: 0 0 auto; min-width: 0; padding: 6px 9px; font-size: 12px; }
.bntg-body { display: flex; flex-direction: column; gap: 7px; }
.bntg-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 7px;
  background: rgba(0,0,0,.26); border: 1px solid rgba(140,120,70,.24);
}
.bntg-row.sold { opacity: .48; }
.bntg-ic {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 5px;
  background: rgba(0,0,0,.35); border: 1px solid rgba(150,130,80,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: #d9c95e;
}
.bntg-nm { flex: 1 1 auto; min-width: 0; }
.bntg-nm .n { font-size: 13px; color: #e2dcc2; display: block; }
.bntg-nm .d { font-size: 11px; color: #8d8367; display: block; margin-top: 2px; line-height: 1.5; }
.bntg-price { font-size: 12px; color: #d9c95e; white-space: nowrap; }
.bntg-row button {
  flex: 0 0 auto; min-width: 78px;
}
.bntg-own { font-size: 11px; color: #7f765d; white-space: nowrap; }
.bntg-state { font-size: 12px; color: #8d8367; }

/* ---- Level 999：后室意志的忏悔 ---- */
#confess.overlay { z-index: 28; }   /* 游戏内打开 -> 高于 HUD(10) */
.confess-box { width: min(600px, 94vw); }
.confess-tip {
  font-size: 13px; line-height: 1.8; color: #9a8f74;
  margin-bottom: 12px;
}
.confess-body { display: flex; flex-direction: column; gap: 8px; }
.confess-sin {
  padding: 10px 12px; border-radius: 7px;
  background: rgba(0,0,0,.30); border: 1px solid rgba(140,120,70,.22);
}
.confess-sin .q {
  font-size: 13px; line-height: 1.7; color: #e2dcc2; display: block;
}
.confess-sin .n {
  display: inline-block; min-width: 20px; color: #7f765d; font-size: 12px;
}
.confess-ans {
  display: flex; align-items: center; gap: 8px; margin-top: 9px;
}
.confess-ans button { flex: 0 0 auto; min-width: 72px; font-size: 12px; }
/* 承认 = 偏暗的暖白，不承认 = 偏冷 */
.confess-ans button.admit { color: #e6d9a8; border-color: rgba(190,160,80,.5); }
.confess-ans button.deny  { color: #9fb0bd; border-color: rgba(120,150,170,.42); }
.confess-ans button.picked {
  background: rgba(190,160,80,.20); color: #f4e6b4;
  border-color: rgba(216,201,94,.75);
}
.confess-ans button.picked.deny {
  background: rgba(120,150,170,.18); color: #cfe0ea;
  border-color: rgba(150,185,205,.7);
}
.confess-ans button:disabled { opacity: .35; }
/* 答完之后，后室意志回的那一句 */
.confess-echo {
  margin-top: 7px; font-size: 12px; line-height: 1.6;
  color: #8d8367; padding-left: 2px;
}
.confess-echo.deny { color: #7d8b96; }
.confess-foot {
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid rgba(140,120,70,.20);
}
.confess-state { flex: 1 1 auto; font-size: 12px; color: #8d8367; line-height: 1.6; }
/* 全认之后的那片黑 */
.confess-black {
  position: fixed; inset: 0; z-index: 60; background: #000;
  opacity: 0; pointer-events: none;
  transition: opacity .9s ease;
}
.confess-black.on { opacity: 1; }
/* 暂停时别把画面压死 —— .72 太重，游戏画面和面板底色都是近黑，
   整屏糊成一片，分不清哪是面板哪是场景 */
#pause.overlay { background: rgba(0, 0, 0, .55); }

/* 面板内容超出屏幕时可以下滑（说明 / 手册那几页文字很长） */
.panel {
  max-height: 92vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #6b5f3f transparent;
}
.panel::-webkit-scrollbar { width: 8px; }
.panel::-webkit-scrollbar-thumb { background: #6b5f3f; border-radius: 4px; }
.panel::-webkit-scrollbar-track { background: transparent; }

.panel {
  background: #2e2612;
  border: 2px solid #8f7a3c;
  border-radius: 10px;
  padding: 32px 40px;
  max-width: 540px;
  width: 90%;
  text-align: center;
  color: #e8dd9a;
  box-shadow: 0 0 60px rgba(255, 220, 80, .12), inset 0 0 30px rgba(0, 0, 0, .6);
}

.panel.red {
  border-color: #7a1f1f;
  box-shadow: 0 0 60px rgba(255, 0, 0, .15), inset 0 0 30px rgba(0, 0, 0, .6);
}

.title {
  font-size: calc(34px * var(--ui-zoom, 1));
  letter-spacing: 6px;
  color: #ffe97a;
  margin-bottom: 6px;
  text-shadow: 0 0 18px rgba(255, 230, 120, .45);
}

.title.dead {
  color: #ff5a5a;
  text-shadow: 0 0 18px rgba(255, 40, 40, .55);
}

.subtitle {
  color: #c9b25f;
  font-size: calc(14px * var(--ui-zoom, 1));
  letter-spacing: 4px;
  margin-bottom: 18px;
}

.desc {
  font-size: calc(13px * var(--ui-zoom, 1));
  line-height: 1.7;
  color: #cfc08a;
  text-align: left;
}

.controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 18px 0;
  font-size: calc(13px * var(--ui-zoom, 1));
  text-align: left;
  color: #c9b25f;
}

.controls div span {
  display: inline-block;
  width: 118px;
  color: #ffe97a;
  font-weight: bold;
}

.panel button {
  margin-top: 10px;
  padding: 12px 30px;
  font-size: calc(16px * var(--ui-zoom, 1));
  letter-spacing: 2px;
  background: #d9c95e;
  color: #1d1808;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  font-family: inherit;
}

.panel button:hover { background: #ffe97a; }

/* ---------- 服装 ---------- */
#outfit.overlay { z-index: 30; }

.panel.outfit { max-width: 460px; max-height: 88vh; overflow-y: auto; }

#outfit-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
}

.outfit-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid #cbbd8e;
  border-radius: 5px;
  background: rgba(255, 252, 235, .5);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}

.outfit-item:hover { background: #fff8dd; border-color: #8a7a45; }
.outfit-item.sel { background: #fff3c4; border-color: #8a7a45; }
.outfit-item.locked { opacity: .5; border-style: dashed; }

.outfit-swatch {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  border: 3px solid #333;
  flex: none;
}

/* 名字和状态都压在一行里 —— 以前状态是 flex:none 撑住不缩，
   名字被挤到只剩一个字的宽度，整行被撑成 120~140px 高。 */
.outfit-name {
  font-size: calc(13.5px * var(--ui-zoom, 1));
  color: #3f3520;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.outfit-state {
  font-size: calc(11.5px * var(--ui-zoom, 1));
  color: #6a5a34;
  flex: 0 1 auto;
  white-space: nowrap;
}

#outfit-desc {
  font-size: calc(12.5px * var(--ui-zoom, 1));
  line-height: 1.7;
  color: #4a3f26;
  border-top: 1px dashed #d7c99c;
  padding-top: 9px;
  min-height: 62px;
}

/* ---------- 结局 ---------- */
#ending.overlay { z-index: 40; }

.panel.ending {
  border-color: #2f8f5a;
  background: #06120b;
  box-shadow: 0 0 70px rgba(60, 255, 150, .18), inset 0 0 40px rgba(0, 0, 0, .7);
}

.ending-tag {
  font-size: calc(12px * var(--ui-zoom, 1));
  letter-spacing: 3px;
  color: #8fe8b4;
  border: 1px solid rgba(60, 220, 140, .4);
  background: rgba(10, 60, 32, .45);
  border-radius: 3px;
  padding: 4px 10px;
  display: inline-block;
  margin-bottom: 14px;
}

.ending-title {
  font-size: clamp(22px, 4.5vw, 32px);
  letter-spacing: 4px;
  color: #7dffb0;
  text-shadow: 0 0 24px rgba(80, 255, 160, .45);
  margin-bottom: 12px;
}

.ending-line {
  font-size: calc(14.5px * var(--ui-zoom, 1));
  line-height: 1.85;
  color: #cfe8d8;
  border-top: 1px dashed rgba(80, 255, 160, .25);
  border-bottom: 1px dashed rgba(80, 255, 160, .25);
  padding: 14px 0;
  margin: 0 0 8px;
}

.ending-meta { font-size: calc(12px * var(--ui-zoom, 1)); color: #7fa891; margin: 0; }

/* ---------- 结局 0：悲尸循环 ---------- */
#wretch.overlay { z-index: 40; }

.panel.wretch {
  position: relative;
  border-color: #7a1f1f;
  background: #100603;
  box-shadow: 0 0 70px rgba(255, 30, 30, .22), inset 0 0 40px rgba(0, 0, 0, .7);
  animation: wretchShake .18s steps(2, end) infinite;
}

@keyframes wretchShake {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-1px, 1px); }
  100% { transform: translate(1px, -1px); }
}

.wretch-tag {
  font-size: calc(12px * var(--ui-zoom, 1));
  letter-spacing: 3px;
  color: #ff8a8a;
  border: 1px solid rgba(255, 60, 60, .4);
  background: rgba(80, 10, 10, .45);
  border-radius: 3px;
  padding: 4px 10px;
  display: inline-block;
  margin-bottom: 14px;
}

.wretch-title {
  font-size: clamp(24px, 5vw, 36px);
  letter-spacing: 6px;
  color: #ff4d4d;
  text-shadow: 0 0 26px rgba(255, 40, 40, .55);
  margin-bottom: 8px;
}

.wretch-level {
  font-size: calc(13px * var(--ui-zoom, 1));
  letter-spacing: 2px;
  color: #c98f8f;
  margin-bottom: 14px;
}

.wretch-line {
  font-size: calc(14.5px * var(--ui-zoom, 1));
  line-height: 1.85;
  color: #e0b8b8;
  border-top: 1px dashed rgba(255, 80, 80, .28);
  border-bottom: 1px dashed rgba(255, 80, 80, .28);
  padding: 14px 0;
  margin: 0 0 10px;
}

.wretch-reason {
  font-size: calc(12px * var(--ui-zoom, 1));
  color: #9a6a6a;
  min-height: 18px;
  margin: 0;
}

.panel.wretch button { margin-top: 18px; }

/* 悲尸循环倒计时（屏幕上沿） */
#wretch-timer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 12;
  pointer-events: none;
  text-align: center;
  padding-top: calc(52px + env(safe-area-inset-top, 0px));
}

#wretch-timer .wt-inner {
  display: inline-block;
  font-size: calc(13px * var(--ui-zoom, 1));
  letter-spacing: 3px;
  color: #ffd0d0;
  background: rgba(90, 8, 8, .55);
  border: 1px solid rgba(255, 70, 70, .5);
  border-radius: 4px;
  padding: 5px 14px;
  text-shadow: 0 0 12px rgba(255, 40, 40, .6);
}

#wretch-timer b {
  font-size: calc(17px * var(--ui-zoom, 1));
  color: #ff6b6b;
  letter-spacing: 1px;
}

body.is-touch #wretch-timer { padding-top: calc(96px + env(safe-area-inset-top, 0px)); }

/* 理智条在悲尸循环时改为血红色 */
#vitals.wretch-on { border-color: rgba(255, 60, 60, .55); }
#vitals.wretch-on .vlabel { color: #e08a8a; }

/* ---------- 死亡：整个画面变黑，只剩一份中断的观测记录 ---------- */
#dead.overlay {
  background: #000;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: calc(28px + env(safe-area-inset-top, 0px)) clamp(20px, 5vw, 64px);
  gap: 2px;
}

/* [记录结束] 保持在左上角 */
#dead .rec-tag {
  position: absolute;
  left: clamp(20px, 5vw, 64px);
  top: calc(24px + env(safe-area-inset-top, 0px));
  color: #7a7a6c;
  border-color: rgba(180, 180, 160, .3);
  background: rgba(30, 30, 26, .5);
}

/* [NO DATA] 在正中间 */
#dead .rec-nodata {
  align-self: center;
  text-align: center;
  font-size: clamp(30px, 7vw, 58px);
  font-weight: bold;
  letter-spacing: 8px;
  color: #e8e2c8;
  text-shadow: 0 0 28px rgba(220, 210, 170, .3);
  animation: noDataFlicker 3.2s steps(1, end) infinite;
  margin: 6px 0 18px;
}

#dead .rec-meta {
  align-self: center;
  min-width: 240px;
  font-size: calc(13px * var(--ui-zoom, 1));
  line-height: 1.9;
  color: #8f8a78;
  border-color: rgba(180, 180, 160, .22);
  background: rgba(255, 255, 255, .03);
}

#dead .rec-note {
  align-self: center;
  text-align: center;
  font-size: calc(12.5px * var(--ui-zoom, 1));
  color: #6f6b5c;
  margin-top: 14px;
}

#dead button { align-self: center; margin-top: 26px; }

/* 左上角：[记录结束] */
.rec-tag {
  position: absolute;
  left: 26px;
  top: 18px;
  font-size: calc(12px * var(--ui-zoom, 1));
  letter-spacing: 2px;
  color: #8f6f6f;
  border: 1px solid rgba(200, 90, 90, .35);
  background: rgba(60, 12, 12, .35);
  padding: 3px 9px;
  border-radius: 3px;
}

/* 正中：[NO DATA] */
.rec-nodata {
  margin: 26px 0 20px;
  text-align: center;
  font-size: clamp(30px, 6vw, 46px);
  letter-spacing: 8px;
  font-weight: bold;
  color: #ff5a5a;
  text-shadow: 0 0 22px rgba(255, 40, 40, .5);
  animation: noDataFlicker 3.2s steps(1, end) infinite;
}

@keyframes noDataFlicker {
  0%, 92%, 100% { opacity: 1; }
  93%           { opacity: .35; }
  95%           { opacity: 1; }
  97%           { opacity: .5; }
}

.rec-meta {
  border: 1px solid rgba(200, 90, 90, .28);
  border-radius: 4px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, .28);
}

.rec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
  font-size: calc(13px * var(--ui-zoom, 1));
  border-bottom: 1px dashed rgba(200, 90, 90, .18);
}

.rec-row:last-child { border-bottom: none; }

.rec-row span {
  color: #a08a8a;
  letter-spacing: 2px;
}

.rec-row b {
  color: #ffb3b3;
  font-size: calc(15px * var(--ui-zoom, 1));
  letter-spacing: 1px;
}

.rec-note {
  margin-top: 14px;
  text-align: center;
  color: #c98f8f;
  font-size: calc(12.5px * var(--ui-zoom, 1));
  line-height: 1.7;
}

.panel.record button { display: block; margin: 18px auto 0; }

#levelup-title {
  color: #7dffb0;
  text-shadow: 0 0 20px rgba(80, 255, 150, .5);
}

#levelup-sub { color: #cfc08a; margin-top: 8px; }

/* ---------- 开始菜单（左按钮 / 右标题+背景图） ---------- */
/* 按钮列贴着屏幕左边，标题与背景图在右侧 */
/* 用 dvh（手机浏览器地址栏收起时也不会算错），放不下就整体滚动 */
.menu-wrap {
  display: flex;
  align-items: center;
  gap: clamp(14px, 4vw, 56px);
  width: 100%;
  max-width: none;
  padding-left: clamp(12px, 2.5vw, 40px);
  padding-right: clamp(12px, 2.5vw, 40px);
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 左：竖排按钮 */
.menu-left {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.8vh, 18px);
  gap: clamp(8px, 1.8dvh, 18px);
  flex: 0 0 auto;
  min-width: min(260px, 100%);
}

/* 主菜单按钮：做得更大，一眼就是主操作 */
/* 按钮尺寸跟着屏幕高度缩放：矮屏自动变小，不会把别的挤出去 */
.mbtn {
  padding: clamp(14px, 3.4vh, 34px) clamp(24px, 5vw, 60px);
  padding: clamp(14px, 3.4dvh, 34px) clamp(24px, 5vw, 60px);
  font-size: clamp(17px, 3.2vh, 28px);
  font-size: clamp(17px, 3.2dvh, 28px);
  letter-spacing: clamp(3px, .8vw, 7px);
  min-width: min(300px, 100%);
  font-family: inherit;
  font-weight: bold;
  background: rgba(20, 17, 7, .92);
  color: #e8dd9a;
  border: 2px solid #6b5d2a;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: background .15s, color .15s, border-color .15s, transform .12s;
}

.mbtn:hover {
  background: #2a2410;
  border-color: #ffe97a;
  color: #ffe97a;
  transform: translateX(4px);
}

.mbtn.primary {
  background: #d9c95e;
  color: #1d1808;
  border-color: #ffe97a;
  box-shadow: 0 0 26px rgba(255, 220, 80, .22);
}

.mbtn.primary:hover {
  background: #ffe97a;
  color: #1d1808;
}

/* 右：标题 + 背景图 */
.menu-right {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.menu-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: clamp(4px, 1.2vh, 12px);
  margin-bottom: clamp(4px, 1.2dvh, 12px);
}

.menu-title {
  font-size: clamp(22px, min(4.4vw, 6vh), 54px);
  font-size: clamp(22px, min(4.4vw, 6dvh), 54px);
  letter-spacing: clamp(4px, 1vw, 12px);
  color: #ffe97a;
  margin: 0;
  text-shadow: 0 0 22px rgba(255, 230, 120, .45);
  font-weight: bold;
}

.menu-sub {
  font-size: clamp(13px, 1.6vw, 18px);
  letter-spacing: 6px;
  color: #c9b25f;
  padding-bottom: 4px;
  border-bottom: 2px solid #6b5d2a;
}

.menu-art {
  position: relative;
  border: 2px solid #6b5d2a;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(255, 220, 80, .1), inset 0 0 40px rgba(0, 0, 0, .5);
  background: #141107;
}

/* 画框有固定的高度，图片用 cover 把它铺满 —— 边上不会留空，
   溢出的部分裁掉（和之前一样，是"填满"而不是"整张缩进"） */
.menu-art {
  height: clamp(260px, 62vh, 620px);
  height: clamp(260px, 62dvh, 620px);
}
.menu-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.85) contrast(1.06) brightness(.92);
}
/* 没有图片时（img 被 onerror 收掉）不要留一个大黑框 */
.menu-art:has(img[style*="display: none"]) { display: none; }

/* 菜单里的遮罩层不压暗（背景图要看得清） */
#menu.overlay { background: radial-gradient(ellipse at 30% 40%, #141107 0%, #0a0a05 72%); }

/* 手册可以从开始菜单打开，DOM 里排在菜单之前 —— 抬高 z-index 才不会被菜单盖住 */
#manual.overlay { z-index: 30; }
#help.overlay { z-index: 25; }

/* 窄屏 / 竖屏：改为上下堆叠 */
@media (max-width: 780px), (orientation: portrait) {
  .menu-wrap {
    flex-direction: column-reverse;
    gap: 16px;
    /* 内容比屏幕高时，从顶部开始排 —— 居中会把上半截顶到屏幕外，图片就看得不全了 */
    align-items: flex-start;
    padding-top: 10px;
    padding-bottom: 76px;      /* 给右下角的「背景图」按钮留位置 */
  }
  .menu-left {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    min-width: 0;
    width: 100%;
  }
  /* 竖排的大按钮（窄屏照样是主操作） */
  .menu-left { flex-direction: column; }
  .mbtn { padding: 24px 30px; font-size: calc(21px * var(--ui-zoom, 1)); letter-spacing: 4px; width: 100%; max-width: 360px; min-width: 0; }
  .mbtn:hover { transform: none; }
  .menu-right { width: 100%; min-width: 0; }
  /* 竖屏：内容总高必须塞进一屏 —— flex 列反向排列时，溢出的部分会跑到屏幕上方，
     滚也滚不到，图就被切掉了。所以这里把按钮压小、把图限制在剩余高度内。 */
  .mbtn { padding: 13px 22px; font-size: calc(18px * var(--ui-zoom, 1)); letter-spacing: 3px; }
  .menu-left { gap: 9px; }
  /* 竖屏：给按钮留够空间，画框压矮 —— 图片照样铺满，不留空边 */
  /* 竖屏：给按钮留够空间，画框压矮 —— 图片照样铺满，不留空边 */
  .menu-art { height: clamp(150px, 30vh, 260px); }
  .menu-art { height: clamp(150px, 30dvh, 260px); }
  .menu-title { font-size: clamp(22px, 8vw, 30px); }
  .menu-head { margin-bottom: 6px; }
  .menu-art { box-shadow: 0 0 40px rgba(255, 220, 80, .1), inset 0 0 30px rgba(0, 0, 0, .5); }
}

/* 横屏但很矮（手机横过来）：保留左右布局，但把所有元素压扁 */
@media (max-height: 500px) and (orientation: landscape) {
  .menu-wrap { align-items: center; gap: 14px; }
  .menu-left { min-width: min(220px, 44vw); }
  .mbtn { padding: clamp(8px, 2.2vh, 18px) clamp(14px, 3vw, 40px); font-size: clamp(14px, 3.4vh, 20px); letter-spacing: 3px; }
  .mbtn { padding: clamp(8px, 2.2dvh, 18px) clamp(14px, 3vw, 40px); font-size: clamp(14px, 3.4dvh, 20px); letter-spacing: 3px; }
  .menu-art { height: clamp(120px, 50vh, 360px); }
  .menu-art { height: clamp(120px, 50dvh, 360px); }
  .menu-title { font-size: clamp(18px, 5vh, 34px); }
  .menu-title { font-size: clamp(18px, 5dvh, 34px); }
  .menu-sub { font-size: clamp(11px, 2.2vh, 16px); }
  .menu-sub { font-size: clamp(11px, 2.2dvh, 16px); }
  .online-box { font-size: calc(11px * var(--ui-zoom, 1)); }
}

/* ---------- 档案收集 ---------- */
#pickup-hint {
  position: fixed;
  left: 50%;
  bottom: 72px;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, .66);
  border: 1px solid rgba(255, 233, 122, .55);
  color: #ffe97a;
  font-size: calc(14px * var(--ui-zoom, 1));
  letter-spacing: 1px;
  padding: 8px 18px;
  border-radius: 6px;
  z-index: 15;
  pointer-events: none;
  box-shadow: 0 0 18px rgba(255, 220, 80, .18);
}

#pickup-hint b { color: #fff; }

/* 门的交互提示（在档案提示之上一点） */
#door-hint {
  position: fixed;
  left: 50%;
  bottom: 104px;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, .66);
  border: 1px solid rgba(255, 233, 122, .55);
  color: #ffe97a;
  font-size: calc(14px * var(--ui-zoom, 1));
  letter-spacing: 1px;
  padding: 8px 18px;
  border-radius: 6px;
  z-index: 15;
  pointer-events: none;
  box-shadow: 0 0 18px rgba(255, 220, 80, .18);
}
#door-hint b { color: #fff; }

#archive-label {
  font-size: calc(14px * var(--ui-zoom, 1));
  background: rgba(0, 0, 0, .4);
  border: 1px solid rgba(255, 233, 122, .35);
  padding: 5px 10px;
  border-radius: 4px;
  color: #ffe97a;
}

#flashlight-label {
  font-size: calc(14px * var(--ui-zoom, 1));
  background: rgba(0, 0, 0, .4);
  border: 1px solid rgba(255, 255, 255, .18);
  padding: 5px 10px;
  border-radius: 4px;
  color: #9a9a9a;
  transition: color .15s, border-color .15s;
}

#flashlight-label.on {
  color: #ffe9a3;
  border-color: rgba(255, 233, 122, .5);
}

#flash-toast {
  position: fixed;
  left: 50%;
  bottom: 130px;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, .72);
  border: 1px solid rgba(255, 233, 122, .55);
  color: #ffe97a;
  font-size: calc(14px * var(--ui-zoom, 1));
  letter-spacing: 1px;
  padding: 8px 18px;
  border-radius: 6px;
  z-index: 15;
  pointer-events: none;
  box-shadow: 0 0 18px rgba(255, 220, 80, .18);
}

#flash-toast b { color: #fff; }

/* 档案阅读文档样式 */
.panel.doc {
  text-align: left;
  background: linear-gradient(180deg, #f4ead0 0%, #ece0b8 100%);
  border: 2px solid #b3a06a;
  border-radius: 4px;
  color: #3a3120;
  box-shadow: 0 0 70px rgba(0, 0, 0, .85), inset 0 0 40px rgba(140, 110, 40, .12);
  max-width: 640px;
  width: 92%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  padding: 22px 30px 16px;
}

.doc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: calc(12px * var(--ui-zoom, 1));
  letter-spacing: 2px;
  color: #8a7a52;
  border-bottom: 1px dashed #c4b488;
  padding-bottom: 8px;
}

#archive-title {
  font-size: calc(21px * var(--ui-zoom, 1));
  letter-spacing: 1px;
  color: #4a3f28;
  margin: 12px 0 4px;
}

#archive-source {
  font-size: calc(12px * var(--ui-zoom, 1));
  color: #8a7a52;
  font-style: italic;
  margin-bottom: 12px;
}

#archive-body {
  overflow-y: auto;
  font-size: calc(13.5px * var(--ui-zoom, 1));
  line-height: 1.85;
  color: #3f3622;
  padding-right: 6px;
}

#archive-body p { margin-bottom: 10px; }

#archive-body p:last-child { margin-bottom: 0; }

#archive-body::-webkit-scrollbar { width: 6px; }
#archive-body::-webkit-scrollbar-thumb { background: #c4b488; border-radius: 3px; }

/* 整篇只有一个巨大字的档案（Level ! 那张「跑!」）—— 字要大到占满整块 */
#archive-body .archive-big {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 190px;
  font-size: calc(108px * var(--ui-zoom, 1));
  line-height: 1;
  font-weight: 700;
  color: #7a1f1f;
  letter-spacing: 0.06em;
  text-shadow: 2px 3px 0 rgba(0, 0, 0, 0.18);
  word-break: keep-all;
  overflow: hidden;
}

.doc-close {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed #c4b488;
  font-size: calc(12px * var(--ui-zoom, 1));
  color: #8a7a52;
  text-align: center;
  letter-spacing: 1px;
}

.doc-close b { color: #5a4a28; }

#archive-close-btn {
  display: none;
  margin-top: 10px;
  width: 100%;
  padding: 12px 0;
  font-size: calc(15px * var(--ui-zoom, 1));
  letter-spacing: 2px;
  background: #b3a06a;
  color: #241f10;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-weight: bold;
}

#archive-close-btn:hover { background: #c9b37a; }

/* ---------- 移动端触控 ---------- */
html, body {
  touch-action: none;
  overscroll-behavior: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#touch-ui {
  position: fixed;
  inset: 0;
  z-index: 12;            /* 低于遮罩层(20)，菜单/暂停/死亡时自动被盖住 */
  pointer-events: none;
}

/* 左下：摇杆感应区（按下处生成摇杆，浮动式） */
#stick-zone {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46%;
  height: 66%;
  pointer-events: auto;
  touch-action: none;
}

#stick-base {
  /* fixed 定位：left/top 与 pointer 事件的 clientX/clientY 同一坐标系，
     负 margin 让圆心正好落在手指按下处 */
  position: fixed;
  width: 116px;
  height: 116px;
  margin: -58px 0 0 -58px;
  border-radius: 50%;
  border: 2px solid rgba(255, 233, 122, .32);
  background: rgba(10, 10, 5, .28);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, .5);
  display: none;
}

#stick-base.active { display: block; }

#stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffe97a, #b39a3f 70%, #7d6a2a);
  border: 2px solid rgba(255, 245, 200, .8);
  box-shadow: 0 0 18px rgba(255, 220, 80, .45);
  transition: box-shadow .12s;
}

#stick-base.sprint #stick-knob {
  box-shadow: 0 0 26px rgba(140, 255, 120, .85);
  border-color: rgba(200, 255, 180, .95);
}

/* 右下：动作按钮 */
#touch-btns {
  position: absolute;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  max-width: calc(100vw - 32px);
  gap: 8px;
  align-items: flex-end;
  pointer-events: auto;
}

.tbtn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(20, 17, 7, .62);
  border: 2px solid rgba(255, 233, 122, .35);
  color: #e8dd9a;
  font-size: calc(15px * var(--ui-zoom, 1));
  letter-spacing: 1px;
  font-family: inherit;
  cursor: pointer;
  touch-action: none;
  box-shadow: 0 0 14px rgba(0, 0, 0, .5);
}

.tbtn:active { background: rgba(255, 233, 122, .25); }

#btn-fl.on {
  color: #ffe9a3;
  border-color: rgba(255, 233, 122, .85);
  background: rgba(255, 233, 122, .18);
}

#btn-sprint.on {
  color: #b7ffcf;
  border-color: rgba(140, 255, 170, .8);
  background: rgba(120, 255, 160, .18);
}

/* 站在档案上时才点亮的"阅读"按钮 */
#btn-e {
  opacity: .45;
  border-color: rgba(255, 233, 122, .2);
}

#btn-e.ready {
  opacity: 1;
  color: #fff6cf;
  border-color: rgba(255, 233, 122, .95);
  background: rgba(255, 233, 122, .22);
  animation: ePulse 1.1s ease-in-out infinite;
}

/* "交互"按钮：手机端 E 键里"不是阅读"的那一半 —— 开关、电梯、收音机、
   墙缝、终端…… 以前全塞在"阅读"上，按下去根本不是阅读，很别扭。 */
#btn-act {
  opacity: 1;
  color: #ffe0a8;
  border-color: rgba(226, 178, 96, .75);
  background: rgba(120, 84, 28, .38);
}
#btn-act.ready {
  color: #fff3d0;
  border-color: rgba(255, 214, 130, .95);
  background: rgba(200, 150, 60, .30);
  animation: doorPulse 1.2s ease-in-out infinite;
}

/* 走到门旁边才出现的"开门"按钮（没门时整个隐藏） */
#btn-door {
  opacity: 1;
  color: #ffe9c8;
  border-color: rgba(226, 178, 96, .8);
  background: rgba(120, 84, 28, .45);
  animation: doorPulse 1.2s ease-in-out infinite;
}

@keyframes doorPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(226, 178, 96, .4); }
  50%      { box-shadow: 0 0 26px rgba(240, 200, 120, .9); }
}

@keyframes ePulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 220, 80, .35); }
  50%      { box-shadow: 0 0 26px rgba(255, 220, 80, .95); }
}

/* 触屏设备：隐藏键盘说明，显示触控说明；档案面板显示关闭按钮 */
body.is-touch .kb { display: none !important; }
body.is-touch .tp { display: block !important; }
body.is-touch .kb-inline { display: none; }
body.is-touch #archive-close-btn { display: block; }
body.is-touch #hud { padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 0; }
body.is-touch #level-label { font-size: calc(18px * var(--ui-zoom, 1)); }
body.is-touch #hud button { padding: 7px 12px; font-size: calc(13px * var(--ui-zoom, 1)); }
body.is-touch .panel button { padding: 14px 30px; }
body.is-touch #stamina-bar { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); width: 180px; }
body.is-touch #vitals { padding: 6px 8px; gap: 4px; margin-top: 5px; }
body.is-touch .vbar { width: 118px; }
body.is-touch .vlabel { width: 24px; font-size: calc(10px * var(--ui-zoom, 1)); letter-spacing: 1px; }
body.is-touch .vnum { width: 22px; font-size: calc(10px * var(--ui-zoom, 1)); }
body.is-touch #pickup-hint { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
body.is-touch #flash-toast { bottom: calc(196px + env(safe-area-inset-bottom, 0px)); }

/* 竖屏提示 */
#rotate-hint {
  display: none;
  position: fixed;
  left: 50%;
  top: calc(50% + 150px);
  transform: translateX(-50%);
  z-index: 13;
  color: #c9b25f;
  font-size: calc(12px * var(--ui-zoom, 1));
  letter-spacing: 2px;
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 233, 122, .3);
  padding: 6px 14px;
  border-radius: 4px;
  pointer-events: none;
}

@media (orientation: portrait) {
  body.is-touch #rotate-hint { display: block; }
}

@media (max-height: 420px), (max-width: 430px) {
  #touch-btns { gap: 7px; }
  .tbtn { width: 54px; height: 54px; font-size: calc(12px * var(--ui-zoom, 1)); }
  #stick-base { width: 100px; height: 100px; margin: -50px 0 0 -50px; }
  #stick-knob { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
}


/* ---------- 档案手册 ---------- */
.panel.manual {
  text-align: left;
  background: linear-gradient(180deg, #f4ead0 0%, #ece0b8 100%);
  border: 2px solid #b3a06a;
  border-radius: 4px;
  color: #3a3120;
  box-shadow: 0 0 70px rgba(0, 0, 0, .85), inset 0 0 40px rgba(140, 110, 40, .12);
  max-width: 860px;
  width: 94%;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  padding: 20px 24px 16px;
}

.manual-wrap {
  display: flex;
  gap: 18px;
  margin-top: 12px;
  min-height: 0;
  flex: 1;
}

#manual-list {
  width: 250px;
  flex: 0 0 250px;
  overflow-y: auto;
  border-right: 1px dashed #c4b488;
  padding-right: 12px;
  max-height: 56vh;
}

.manual-group.foldable {
  cursor: pointer;
  user-select: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}
.manual-group.foldable:hover { background: rgba(255, 233, 122, .10); }
/* 收起 / 展开：一个三角箭头，展开时朝下、收起时朝右 */
.manual-group .mg-caret {
  width: 0; height: 0; flex: none;
  border-left: 5px solid #ffe97a;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transform: rotate(90deg);          /* 展开：箭头朝下 */
  transition: transform .14s ease;
  margin-right: 2px;
}
.manual-group.folded .mg-caret { transform: rotate(0deg); }   /* 收起：箭头朝右 */
.manual-group.unknown { opacity: .55; cursor: default; }
.manual-group.unknown .mg-caret { border-left-color: rgba(255, 233, 122, .35); }
.manual-group.unknown .mg-name { color: #7b8494; letter-spacing: 2px; }
.manual-group .mg-count {
  margin-left: auto; font-size: calc(11.5px * var(--ui-zoom, 1)); color: #9aa3b2; flex: none;
}
.manual-group.folded .mg-cls { display: none; }
.manual-group {
  font-size: calc(12px * var(--ui-zoom, 1));
  letter-spacing: 1px;
  color: #8a7a52;
  margin: 12px 0 6px;
  padding-top: 8px;
  border-top: 1px dashed #d7c99c;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.manual-group:first-child { margin-top: 0; border-top: none; padding-top: 0; }

.mg-name {
  font-size: calc(13px * var(--ui-zoom, 1));
  font-weight: bold;
  color: #6a5a34;
}

.mg-cls {
  font-size: calc(11.5px * var(--ui-zoom, 1));
  color: #94774a;
  background: rgba(160, 130, 60, .12);
  border: 1px solid rgba(160, 130, 60, .3);
  border-radius: 3px;
  padding: 2px 7px;
  align-self: flex-start;
}

.manual-item {
  font-size: calc(13px * var(--ui-zoom, 1));
  line-height: 1.5;
  padding: 6px 9px;
  border-radius: 4px;
  cursor: pointer;
  color: #4a3f26;
  border: 1px solid transparent;
}

.manual-item:hover { background: rgba(180, 160, 90, .18); }

.manual-item.sel {
  background: rgba(180, 160, 90, .32);
  border-color: #b3a06a;
  font-weight: bold;
}

.manual-item.locked {
  color: #a89b73;
  cursor: default;
  font-style: italic;
}

.manual-item.locked:hover { background: none; }

#manual-doc {
  flex: 1;
  overflow-y: auto;
  max-height: 56vh;
  padding-right: 8px;
  font-size: calc(14px * var(--ui-zoom, 1));
  line-height: 1.85;
}

#manual-doc h2 {
  font-size: calc(19px * var(--ui-zoom, 1));
  margin: 4px 0 8px;
  color: #2e2718;
  letter-spacing: 1px;
}

#manual-doc p { margin-bottom: 10px; }

.manual-empty {
  color: #8a7a52;
  font-size: calc(14px * var(--ui-zoom, 1));
  line-height: 1.9;
  padding: 20px 0;
}

#manual-close-btn {
  margin-top: 14px;
  width: 100%;
  padding: 12px 0;
  font-size: calc(15px * var(--ui-zoom, 1));
  letter-spacing: 2px;
  background: #b3a06a;
  color: #241f10;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-weight: bold;
}

#manual-close-btn:hover { background: #c9b37a; }

#manual-btn {
  background: rgba(255, 233, 122, .12);
}

/* 触屏：手册改为上下两栏，避免横向太挤 */
body.is-touch .manual-wrap { flex-direction: column; gap: 10px; }
body.is-touch #manual-list {
  width: 100%;
  flex: none;
  border-right: none;
  border-bottom: 1px dashed #c4b488;
  padding-right: 0;
  max-height: 26vh;
}
body.is-touch #manual-doc { max-height: 34vh; }
body.is-touch #door-hint { bottom: calc(182px + env(safe-area-inset-bottom, 0px)); }

/* ---------- 返回主菜单（次级按钮） ---------- */
button.ghost {
  background: transparent;
  border: 1px solid #a89a70;
  color: #c9bf9c;
  margin-top: 10px;
}

button.ghost:hover {
  background: rgba(255, 255, 255, .07);
  border-color: #d8cc9e;
  color: #f0e8cc;
}

/* 窄屏 / 矮屏：HUD 右上角那排按钮会被挤出屏幕外，
   这里改成两行 —— 左侧信息一行，按钮单独一行，保证暂停 / 背包 / 手册都点得到。
   注意这游戏是按横屏设计的，小横屏（比如 568×320）是"宽但矮"，
   光看宽度判断会漏掉，所以高度也要一起判。 */
@media (max-width: 470px), (max-height: 440px) {
  #hud {
    flex-wrap: wrap;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 0;
  }

  #hud .hud-left { flex: 1 1 100%; }
  #hud .hud-right {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
    margin-top: 6px;
  }

  #hud .hud-right > div { font-size: calc(11px * var(--ui-zoom, 1)); }
  #hud button { padding: 5px 9px; font-size: calc(12px * var(--ui-zoom, 1)); }
}

/* 死亡 / 结局面板：两个按钮并排 */
#dead button,
#wretch button,
#ending button {
  align-self: center;
}

#dead button.ghost,
#wretch button.ghost,
#ending button.ghost {
  margin-top: 10px;
}

/* ---------- 潜水信息（Level 7） ---------- */
#dive {
  position: fixed;
  left: 14px;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  z-index: 11;
  pointer-events: none;
  background: rgba(6, 18, 28, .62);
  border: 1px solid rgba(120, 200, 220, .32);
  border-radius: 5px;
  padding: 8px 12px;
  color: #cfe9f2;
  font-size: calc(12px * var(--ui-zoom, 1));
  letter-spacing: 1px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}

.dive-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  line-height: 1.7;
}

.dive-row span { color: #8fb6c4; }
.dive-row b { color: #dff3fa; font-weight: normal; }

body.is-touch #dive { left: 10px; bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }

/* ---------- 管理员终端（Shift + F7） ---------- */
#terminal { background: rgba(0, 0, 0, .72); }

.panel.term {
  width: min(780px, 94vw);
  max-width: none;
  height: min(600px, 82vh);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: #04070a;
  border: 1px solid rgba(90, 220, 160, .30);
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 22px 70px rgba(0, 0, 0, .85),
    inset 0 0 90px rgba(20, 90, 60, .10);
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Courier New", monospace;
  overflow: hidden;
}

.term-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 14px;
  background: linear-gradient(180deg, rgba(30, 90, 66, .30), rgba(10, 30, 22, .18));
  border-bottom: 1px solid rgba(90, 220, 160, .22);
  color: #7dffc0;
  font-size: calc(12px * var(--ui-zoom, 1));
  letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(80, 240, 170, .45);
}

#term-state { color: #ffb454; text-shadow: 0 0 8px rgba(255, 170, 60, .4); }
#term-state.on { color: #7dffc0; text-shadow: 0 0 8px rgba(80, 240, 170, .45); }

/* 日志区：淡的扫描线 + 轻微辉光 */
#term-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 14px;
  font-size: calc(12.5px * var(--ui-zoom, 1));
  line-height: 1.75;
  color: #b9d8c8;
  background-image: repeating-linear-gradient(
    180deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 3px);
}

#term-log::-webkit-scrollbar { width: 8px; }
#term-log::-webkit-scrollbar-thumb { background: rgba(90, 220, 160, .28); border-radius: 4px; }

.term-line { white-space: pre-wrap; word-break: break-all; }
.term-line.cmd { color: #7dffc0; }
.term-line.ok { color: #9fe6ff; }
.term-line.warn { color: #ffcf6b; }
.term-line.err { color: #ff7a6b; }
.term-line.dim { color: #5f8474; }
.term-line.head {
  color: #ffd479;
  margin-top: 6px;
  text-shadow: 0 0 8px rgba(255, 200, 100, .3);
}

/* 输入行 */
.term-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid rgba(90, 220, 160, .22);
  background: rgba(12, 30, 22, .55);
}

.term-prompt { color: #7dffc0; font-size: calc(13px * var(--ui-zoom, 1)); text-shadow: 0 0 8px rgba(80, 240, 170, .5); }

#term-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: #d6ffe9;
  font: inherit;
  font-size: calc(13px * var(--ui-zoom, 1));
  caret-color: #7dffc0;
}
#term-input::placeholder { color: #4d6f60; }

/* ---------- 图形化终端：授权框 / 按钮区 / 子界面 ---------- */
.term-auth {
  display: flex; gap: 8px; padding: 10px 14px;
  border-top: 1px solid rgba(90, 220, 160, .22);
  background: rgba(12, 30, 22, .55);
}
.term-auth input {
  flex: 1; min-width: 0;
  background: rgba(4, 16, 12, .85);
  border: 1px solid rgba(90, 220, 160, .35);
  color: #bdf5d8; font: 13px/1.4 ui-monospace, monospace;
  padding: 8px 10px; border-radius: 4px; outline: none;
}
.term-auth input:focus { border-color: rgba(120, 255, 190, .8); }
.term-auth button {
  flex: none; padding: 8px 16px; font-size: calc(13px * var(--ui-zoom, 1));
  background: rgba(20, 60, 44, .9);
  border: 1px solid rgba(90, 220, 160, .5);
  color: #bdf5d8; border-radius: 4px; cursor: pointer;
}
.term-auth button:hover { background: rgba(30, 90, 64, .95); }

.term-main { padding: 10px 12px 4px; }
.term-sec {
  display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 8px;
}
.term-btn {
  flex: 1 1 auto; min-width: 108px;
  padding: 9px 12px; font-size: calc(13px * var(--ui-zoom, 1));
  background: rgba(16, 40, 30, .9);
  border: 1px solid rgba(90, 220, 160, .34);
  color: #bdf5d8; border-radius: 5px; cursor: pointer;
  text-align: center; white-space: nowrap;
}
.term-btn:hover { background: rgba(26, 70, 52, .95); border-color: rgba(120, 255, 190, .65); }
.term-btn b { color: #7dffc0; }
.term-num { align-items: center; }
.term-num .term-btn { flex: none; min-width: 0; }
.term-lb { font-size: calc(12.5px * var(--ui-zoom, 1)); color: #5f8474; }
.term-num input {
  width: 74px; background: rgba(4, 16, 12, .85);
  border: 1px solid rgba(90, 220, 160, .35);
  color: #bdf5d8; font: 13px/1.4 ui-monospace, monospace;
  padding: 7px 8px; border-radius: 4px; outline: none;
}

.term-sub { padding: 10px 12px 4px; }
.term-sub-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 8px; font-size: calc(13px * var(--ui-zoom, 1)); color: #7dffc0;
}
.term-sub-head .term-qty { color: #5f8474; }
.term-sub-head .term-qty input {
  width: 62px; margin-left: 4px;
  background: rgba(4, 16, 12, .85);
  border: 1px solid rgba(90, 220, 160, .35);
  color: #bdf5d8; font: 13px/1.4 ui-monospace, monospace;
  padding: 5px 7px; border-radius: 4px; outline: none;
}
.term-sub-head .ghost { margin-left: auto; font-size: calc(12px * var(--ui-zoom, 1)); }
#term-sub-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 6px; max-height: 232px; overflow-y: auto; padding-right: 2px;
}
.term-sub-item {
  padding: 9px 10px; font-size: calc(12.5px * var(--ui-zoom, 1)); text-align: left;
  background: rgba(16, 40, 30, .9);
  border: 1px solid rgba(90, 220, 160, .3);
  color: #bdf5d8; border-radius: 5px; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.term-sub-item:hover { background: rgba(26, 70, 52, .95); border-color: rgba(120, 255, 190, .6); }

.term-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 12px;
  border-top: 1px solid rgba(90, 220, 160, .12);
  color: #5f8474;
  font-size: calc(11px * var(--ui-zoom, 1));
}

.term-foot .ghost {
  padding: 5px 12px;
  font-size: calc(11px * var(--ui-zoom, 1));
  border-radius: 4px;
  background: rgba(90, 220, 160, .08);
  border: 1px solid rgba(90, 220, 160, .28);
  color: #7dffc0;
  cursor: pointer;
}
.term-foot .ghost:hover { background: rgba(90, 220, 160, .18); }

body.is-touch .panel.term { height: min(560px, 76vh); }

/* 档案手册按钮：触屏长按 5 秒打开管理员终端 —— 长按期间显示一条进度 */
#manual-btn {
  position: relative;
  overflow: hidden;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

#manual-btn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #7dffc0;
  box-shadow: 0 0 8px rgba(80, 240, 170, .8);
  opacity: 0;
}

#manual-btn.lp-on::after {
  opacity: 1;
  width: 100%;
  transition: width 5s linear;
}

#manual-btn.lp-on {
  color: #7dffc0;
  border-color: rgba(90, 220, 160, .55);
}

/* ===== 游玩模式选择 / AI 权重设置 ===== */
#playmode .pm-box, #ai-panel .ai-box {
  width: min(460px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  background: #0b0c10;
  border: 1px solid #2a2f3a;
  border-radius: 10px;
  padding: 18px 18px 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
}
.pm-head {
  font-size: calc(17px * var(--ui-zoom, 1));
  font-weight: 700;
  letter-spacing: .06em;
  color: #e8e6e0;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #232833;
}
.pmbox-tip { font-size: calc(12px * var(--ui-zoom, 1)); color: #8b8f98; margin-bottom: 12px; }

.pmbtn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: #14171e;
  border: 1px solid #2a2f3a;
  border-radius: 8px;
  color: #d8d5ce;
  cursor: pointer;
  font: inherit;
  transition: background .12s, border-color .12s;
}
.pmbtn:hover:not(.disabled) { background: #1b1f28; border-color: #3d4654; }
.pmbtn b { display: block; font-size: calc(15px * var(--ui-zoom, 1)); color: #f0eee8; margin-bottom: 3px; }
.pmbtn span { display: block; font-size: calc(12px * var(--ui-zoom, 1)); color: #878b95; line-height: 1.5; }
.pmbtn.primary { border-color: #4a6b52; background: #16211a; }
.pmbtn.primary b { color: #a8e0b4; }
.pmbtn.ghost { text-align: center; background: transparent; }
.pmbtn.ghost b { display: inline; font-size: calc(13px * var(--ui-zoom, 1)); color: #9a9ea8; }
.pmbtn.disabled { opacity: .45; cursor: not-allowed; }
.pmbtn.disabled b::after {
  content: " · 敬请期待";
  font-size: calc(11px * var(--ui-zoom, 1));
  color: #8b8f98;
  font-weight: 400;
}

.ai-hint {
  font-size: calc(12px * var(--ui-zoom, 1));
  color: #8b8f98;
  line-height: 1.6;
  margin-bottom: 14px;
}
.ai-hint b { color: #c8ccd4; font-weight: 600; }
.ai-row { margin-bottom: 13px; }
.ai-row-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 5px;
}
.ai-row-name { font-size: calc(13px * var(--ui-zoom, 1)); color: #ddd9d2; }
.ai-row-name small { color: #7d818b; font-size: calc(11px * var(--ui-zoom, 1)); margin-left: 6px; }
.ai-row-val {
  font: 600 13px ui-monospace, "SFMono-Regular", Menlo, monospace;
  color: #9fd0a8;
  min-width: 30px;
  text-align: right;
}
.ai-row input[type=range] {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: #232833;
  border-radius: 3px;
  outline: none;
}
.ai-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: #7fbf8c;
  cursor: pointer;
  border: 2px solid #0b0c10;
}
.ai-row input[type=range]::-moz-range-thumb {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #7fbf8c;
  cursor: pointer;
  border: 2px solid #0b0c10;
}
.ai-foot {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #232833;
}
.ai-foot button {
  padding: 8px 18px;
  border-radius: 6px;
  border: 1px solid #2a2f3a;
  background: #14171e;
  color: #d8d5ce;
  cursor: pointer;
  font: inherit;
  font-size: calc(13px * var(--ui-zoom, 1));
}
.ai-foot button.primary { background: #1c2a20; border-color: #4a6b52; color: #a8e0b4; }
.ai-foot button:hover { background: #1b1f28; }

/* HUD 上的 AI 标记 */
#ai-btn { background: #16211a !important; border-color: #4a6b52 !important; color: #a8e0b4 !important; }
#ai-tag {
  display: inline-block;
  font: 600 11px ui-monospace, monospace;
  color: #7fbf8c;
  background: rgba(20, 40, 26, .8);
  border: 1px solid #3d5c46;
  border-radius: 4px;
  padding: 2px 7px;
  margin-left: 6px;
  vertical-align: middle;
}

/* 模式选择与 AI 设置浮在主菜单之上，否则会被菜单背景图挡住点不到 */
#playmode.overlay { z-index: 45; }
/* 难度面板：跟 playmode 同级。以前它只有 overlay 默认的 20，
   比主菜单那盏灯（bulb）还低 —— 真实点击会打到灯泡上，
   于是"点单人游戏没反应"。 */
#diff.overlay { z-index: 45; }
#diff .pm-box { width: min(500px, 94vw); max-height: 90vh; overflow-y: auto; }
#diff .pm-box { width: min(500px, 94vw); max-height: 90dvh; overflow-y: auto; }
#ai-panel.overlay { z-index: 46; }

/* ================= 账号面板 ================= */
/* 账号面板 DOM 排在菜单之前 —— 抬高 z-index 才不会被菜单背景图盖住 */
#account.overlay { z-index: 32; }

/* 账号 / 设置 / 服装 都用 .acc-box —— 限高与滚动必须对它们全部生效。
   以前只写了 #account .acc-box，设置面板就完全没有约束，
   手机上（尤其是横屏）内容顶出屏幕，连「关闭」按钮都跑到屏外点不到。 */
.acc-box {
  width: min(420px, 92vw);
  max-height: min(88vh, 88vh);
  max-height: min(88dvh, 88vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #0b0c10;
  border: 1px solid #2a2f3a;
  border-radius: 10px;
  padding: 18px 18px 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
  margin: auto;               /* 内容比屏幕高时，顶部不会被截掉 */
}
#settings .acc-box {
  background: rgba(16, 19, 25, .88);
  border: none;
  box-shadow: none;
}
/* 这几个面板的遮罩本身也要能滚 —— 不然 flex 居中会把内容顶到屏幕外 */
#account.overlay, #settings.overlay, #outfit.overlay {
  overflow-y: auto;
  padding: 12px 10px;
}
/* 「关闭」常驻在面板底部，滚到哪儿都点得到 */
.acc-box .ai-foot {
  position: sticky;
  bottom: -16px;
  margin: 10px -18px -16px;
  padding: 10px 18px 12px;
  background: #0b0c10;
  border-top: 1px solid rgba(255, 233, 122, .12);
}
.acc-state {
  font-size: calc(12.5px * var(--ui-zoom, 1));
  color: #9aa3b2;
  margin-bottom: 14px;
  line-height: 1.5;
}
.acc-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: #14161d;
  border: 1px solid #2f3542;
  border-radius: 7px;
  color: #e8e6e0;
  font-size: calc(14px * var(--ui-zoom, 1));
  padding: 11px 12px;
  margin-bottom: 10px;
  outline: none;
  font-family: inherit;
}
.acc-input:focus { border-color: #6d7a8d; }
.acc-btns { display: flex; gap: 10px; }
/* 登录 / 注册：先选模式 —— 选中的那个按钮放大，一眼看得出现在在哪个页面 */
.acc-tabs { display: flex; gap: 10px; margin-bottom: 14px; align-items: center; }
.acc-tab {
  flex: 1;
  padding: 10px 14px;
  font-size: calc(14px * var(--ui-zoom, 1));
  letter-spacing: 2px;
  color: #9aa3b2;
  background: rgba(20, 24, 30, .8);
  border: 1px solid #333c48;
  border-radius: 5px;
  cursor: pointer;
  transition: transform .16s, font-size .16s, padding .16s, color .16s, border-color .16s, background .16s;
}
.acc-tab:hover { color: #dfe4ec; border-color: #4a5563; }
.acc-tab.on {
  transform: scale(1.14);
  transform-origin: center bottom;
  padding: 16px 14px;
  font-size: calc(19px * var(--ui-zoom, 1));
  color: #ffe97a;
  background: rgba(46, 40, 22, .9);
  border-color: rgba(255, 233, 122, .55);
  box-shadow: 0 0 16px rgba(255, 220, 80, .16);
}
.acc-confirm {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 16px 18px;
  font-size: calc(18px * var(--ui-zoom, 1));
  letter-spacing: 5px;
}
.acc-btns button { flex: 1; }
.acc-logged { margin-bottom: 4px; }
.acc-name {
  font-size: calc(15px * var(--ui-zoom, 1));
  font-weight: 700;
  color: #cfe4b8;
  margin-bottom: 8px;
  letter-spacing: .04em;
}
.acc-tip { font-size: calc(12.5px * var(--ui-zoom, 1)); color: #9aa3b2; line-height: 1.6; margin-bottom: 14px; }
.acc-msg {
  font-size: calc(12.5px * var(--ui-zoom, 1));
  min-height: 18px;
  margin-top: 12px;
  line-height: 1.5;
  color: #e0a05a;
}
.acc-msg.ok { color: #8fd06a; }
.acc-msg.err { color: #d9685e; }

/* 在线人数 */
.online-box {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-size: calc(12.5px * var(--ui-zoom, 1));
  color: #9aa3b2;
  letter-spacing: .04em;
}
.online-box .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #6fdc8c;
  box-shadow: 0 0 8px #6fdc8c;
  animation: pulseDot 1.8s ease-in-out infinite;
}
@keyframes pulseDot { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ================= 主菜单：一盏灯 ================= */
/* 灯从画面顶部探进来 —— 灯泡的上半截被屏幕边缘裁掉，只剩下半截亮着 */
.menu-lamp {
  position: absolute; top: 0; left: 50%;
  width: 0; height: 0; z-index: 0;
  transform-origin: 50% -180px;             /* 轴在画面外的吊点上：灯头微动、光柱大幅摆动 */
  animation: lampSway 7.5s ease-in-out infinite;
}
.menu-lamp .cord {                          /* 吊线在画面外，这里保留结构 */
  position: absolute; top: -180px; left: -1.5px; width: 3px; height: 140px;
  background: linear-gradient(#1c1f25, #2e323b);
}
/* 灯座 */
.menu-lamp .bulb::before {
  content: ""; position: absolute; top: -14px; left: 50%;
  width: 26px; height: 16px; margin-left: -13px;
  background: linear-gradient(#4a5058, #31363d);
  border-radius: 3px 3px 1px 1px;
}
/* 灯泡：中心在 y=4px 处 —— 上半截被屏幕顶边裁掉。
   注意：光晕必须包住"露在画面外的那一半"，否则玩家看到的灯泡上半部分
   是干干净净一个圆，一点光都散不出来（这就是那个"百年 bug"）。
   下面几层 box-shadow 有大扩散半径，配合 .cone::before 把上方也照亮。 */
.menu-lamp .bulb {
  position: absolute; top: -40px; left: -44px;
  width: 88px; height: 88px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, #fffdf2 0%, #fff1c9 34%, #ffdf9e 62%, #d9ae62 100%);
  box-shadow:
    0 0 40px 18px rgba(255, 234, 186, .78),
    0 0 110px 60px rgba(255, 226, 164, .40),
    0 0 240px 130px rgba(255, 218, 142, .22),
    0 0 380px 220px rgba(255, 212, 130, .12);
  animation: bulbFlicker 5.5s infinite;
}
/* 灯泡四周那一圈"溢出的光"：往上、往两侧都要有，不然上半截是暗的 */
.menu-lamp .bulb::marker { content: ""; }
.menu-lamp .halo {
  position: absolute; top: -160px; left: -300px;
  width: 600px; height: 300px;
  border-radius: 50% 50% 46% 46%;
  background: radial-gradient(ellipse 50% 58% at 50% 74%,
    rgba(255, 246, 216, .50) 0%, rgba(255, 234, 186, .26) 34%,
    rgba(255, 228, 170, .10) 60%, rgba(255, 222, 160, .03) 78%, transparent 92%);
  pointer-events: none;
  animation: coneFlicker 5.5s infinite;
}
/* 灯丝 */
.menu-lamp .bulb::after {
  content: ""; position: absolute; top: 34%; left: 50%;
  width: 18px; height: 11px; margin-left: -9px;
  border-top: 2px solid rgba(255, 250, 220, .85);
  border-radius: 50% 50% 0 0;
}
/* 光锥：从灯泡往下扩散，向上也有溢出的光 —— 照不全屏幕，但范围要够大。
   渐变中心下移到灯泡中心（约 y=4px），并把 stops 拉长 —— 明暗交界才不会
   出现一条明显的硬边。 */
.menu-lamp .cone {
  position: absolute; top: -80px; left: -640px;
  width: 1280px; height: 150vh;
  background:
    radial-gradient(ellipse 34% 30% at 50% 3%,
      rgba(255, 246, 214, .46) 0%, rgba(255, 240, 198, .30) 30%,
      rgba(255, 236, 185, .16) 52%, rgba(255, 232, 178, .07) 70%, transparent 88%),
    radial-gradient(ellipse 62% 74% at 50% 5%,
      rgba(255, 238, 194, .26) 0%, rgba(255, 234, 186, .17) 34%,
      rgba(255, 231, 180, .09) 56%, rgba(255, 229, 176, .04) 72%,
      rgba(255, 227, 172, .012) 86%, transparent 96%);
  pointer-events: none;
  animation: coneFlicker 5.5s infinite;
}
/* 灯泡四周溢出的光（让画面上方真的亮起来） */
.menu-lamp .cone::before {
  content: ""; position: absolute; top: -60px; left: 50%;
  width: 1180px; height: 480px; margin-left: -590px;
  background: radial-gradient(ellipse 52% 54% at 50% 66%,
    rgba(255, 247, 220, .52) 0%, rgba(255, 240, 200, .34) 26%,
    rgba(255, 234, 186, .20) 46%, rgba(255, 230, 176, .09) 66%,
    rgba(255, 227, 170, .03) 82%, transparent 94%);
  pointer-events: none;
}
/* 灯照不到的地方压暗（中心跟着灯，越远越黑） */
#menu::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 92% 86% at 50% 2%,
    rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .05) 18%, rgba(0, 0, 0, .16) 34%,
    rgba(0, 0, 0, .34) 52%, rgba(0, 0, 0, .56) 70%,
    rgba(0, 0, 0, .76) 86%, rgba(0, 0, 0, .90) 100%);
}
#menu .menu-wrap { position: relative; z-index: 2; }

/* 吊线挂着灯，微微摇晃 */
@keyframes lampSway {
  0%   { transform: rotate(-1.8deg); }
  25%  { transform: rotate(0.9deg); }
  50%  { transform: rotate(1.7deg); }
  75%  { transform: rotate(-0.6deg); }
  100% { transform: rotate(-1.8deg); }
}
@keyframes bulbFlicker {
  0%, 100% { opacity: 1; }
  41% { opacity: 1; }
  42% { opacity: .38; }
  43% { opacity: 1; }
  67% { opacity: .58; }
  68% { opacity: 1; }
  85% { opacity: .82; }
}
@keyframes coneFlicker {
  0%, 100% { opacity: 1; }
  41% { opacity: 1; }
  42% { opacity: .45; }
  43% { opacity: 1; }
  67% { opacity: .62; }
  68% { opacity: 1; }
  85% { opacity: .9; }
}

/* 按钮自身发着会呼吸的微光 */
.mbtn { animation: btnGlow 3.6s ease-in-out infinite; }
.mbtn:nth-of-type(2) { animation-delay: .5s; }
.mbtn:nth-of-type(3) { animation-delay: 1.0s; }
.mbtn:nth-of-type(4) { animation-delay: 1.5s; }
.mbtn:nth-of-type(5) { animation-delay: 2.0s; }
@keyframes btnGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 226, 160, 0); }
  50%      { box-shadow: 0 0 20px 2px rgba(255, 226, 160, .20), inset 0 0 16px rgba(255, 226, 160, .05); }
}
.mbtn:hover { animation: none; box-shadow: 0 0 26px 4px rgba(255, 232, 175, .34), inset 0 0 20px rgba(255, 226, 160, .10); }

/* 背景图：鼠标移上去时小幅跟随 */
.menu-art img { transition: transform .28s ease-out; will-change: transform; }

/* ---------- 服装预览 ---------- */
.outfit-main { display: flex; gap: 16px; align-items: flex-start; }
.outfit-main #outfit-list { flex: 1; min-width: 0; }
.outfit-preview-box {
  width: 150px; flex: none; text-align: center;
  background: #0d0e13; border: 1px solid #262b34; border-radius: 8px; padding: 10px 8px 8px;
}
#outfit-preview {
  width: 130px; height: 170px; display: block; margin: 0 auto;
  background: radial-gradient(ellipse 60% 50% at 50% 30%, #1b1e26, #0a0b0f 75%);
  border-radius: 6px;
}
#outfit-preview-name { margin-top: 8px; font-size: calc(12.5px * var(--ui-zoom, 1)); color: #cfc9bb; letter-spacing: .04em; }

/* ================= 按钮样式补全 ================= */
/* .primary 之前只写在 .mbtn / .pmbtn / .ai-foot 里，
   其余地方用 class="primary" 的按钮（登录、立即同步旁的确认键等）
   会掉回浏览器的默认灰凸按钮 —— 这里补一份通用的。 */
button.primary:not(.mbtn):not(.pmbtn) {
  background: #1c2a20;
  border: 1px solid #4a6b52;
  color: #b6e6c0;
  padding: 11px 22px;
  font-size: calc(14px * var(--ui-zoom, 1));
  font-family: inherit;
  letter-spacing: .06em;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}
button.primary:not(.mbtn):not(.pmbtn):hover { background: #24352a; border-color: #5f8768; color: #d4f5dc; }

/* 账号面板：登录 / 注册 / 同步 / 退出 —— 让它们和面板里其它按钮一样大 */
.acc-btns button {
  flex: 1;
  padding: 11px 18px;
  font-size: calc(14px * var(--ui-zoom, 1));
  font-family: inherit;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: .06em;
}

/* 死亡面板不是 .panel，所以它的按钮掉回了浏览器默认样式 */
#dead button {
  align-self: center;
  margin-top: 22px;
  padding: 13px 34px;
  font-size: calc(15px * var(--ui-zoom, 1));
  font-family: inherit;
  font-weight: 700;
  letter-spacing: .12em;
  border-radius: 6px;
  cursor: pointer;
  background: #d9c95e;
  color: #1d1808;
  border: none;
}
#dead button:hover { background: #ecdc72; }
#dead button.ghost {
  background: transparent;
  border: 1px solid #6d6450;
  color: #a89c7d;
  margin-top: 12px;
}
#dead button.ghost:hover { background: rgba(255, 255, 255, .06); border-color: #9a8f6f; color: #ded3b2; }

/* 悲尸 / 结局面板里的"返回主菜单" */
#wretch button.ghost,
#ending button.ghost {
  display: block;
  margin: 12px auto 0;
  padding: 11px 28px;
  font-size: calc(14px * var(--ui-zoom, 1));
  font-family: inherit;
  border-radius: 6px;
  cursor: pointer;
}

/* ---------- Level 13 电梯选层 ---------- */
.panel.elevator { min-width: 320px; }
.elev-head {
  font-size: calc(19px * var(--ui-zoom, 1)); letter-spacing: .3em; color: #ffe97a;
  text-align: center; margin-bottom: 6px; font-weight: bold;
}
.elev-sub { font-size: calc(12.5px * var(--ui-zoom, 1)); color: #9aa3b2; text-align: center; margin-bottom: 14px; line-height: 1.6; }
#elev-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.elev-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px; background: #14171d; border: 1px solid #2b313b;
  border-radius: 6px; cursor: pointer; color: #d5d0c2; font-size: calc(14px * var(--ui-zoom, 1));
  font-family: inherit; text-align: left;
}
.elev-row:hover { background: #1b2027; border-color: #465062; color: #fff; }
.elev-row .elev-n { font-weight: bold; letter-spacing: .1em; color: #ffe97a; }
.elev-row.cur { border-color: #6b5f3f; background: #211d12; cursor: default; }
.elev-row.cur .elev-n { color: #b6a86e; }
.elev-row.down { border-color: #4a6b52; background: #16211a; }
.elev-row.down .elev-n { color: #a8e0b4; }
.elev-row .elev-tag { font-size: calc(11.5px * var(--ui-zoom, 1)); color: #8b93a1; }

/* 背景音乐缺失 / 被浏览器拦住时的说明（贴在画面底部，不挡操作） */
#music-hint {
  position: fixed;
  left: 50%; bottom: 6px;
  transform: translateX(-50%);
  z-index: 120;
  padding: 4px 12px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .72);
  color: #c9b98a;
  font-size: calc(12px * var(--ui-zoom, 1));
  letter-spacing: .5px;
  pointer-events: none;
}

/* ---------- 解锁结局时右下角的提示 ---------- */
.end-toast {
  position: fixed;
  right: 18px;
  bottom: 58px;
  z-index: 35;
  max-width: 300px;
  padding: 12px 16px;
  font-size: calc(13.5px * var(--ui-zoom, 1));
  line-height: 1.6;
  text-align: left;
  color: #ffe97a;
  background: rgba(28, 24, 12, .95);
  border: 1px solid rgba(255, 233, 122, .5);
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(255, 220, 80, .18);
  animation: endToastIn .5s ease-out, endToastGlow 2.2s ease-in-out infinite .5s;
  transition: opacity .2s;
}
.end-toast:hover { background: rgba(48, 40, 18, .97); border-color: #ffe97a; }
.end-toast.hidden { display: none; }
.end-toast .et-line { display: block; font-size: calc(15px * var(--ui-zoom, 1)); font-weight: 700; letter-spacing: 1px; margin-bottom: 3px; }
.end-toast .et-sub { display: block; font-size: calc(12px * var(--ui-zoom, 1)); color: #c9c08e; }
@keyframes endToastIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes endToastGlow {
  0%, 100% { box-shadow: 0 0 24px rgba(255, 220, 80, .18); }
  50%      { box-shadow: 0 0 34px rgba(255, 220, 80, .42); }
}

/* 服装面板里的调色条（生化防护服，Level 4 切出后解锁） */
.oc-row {
  margin-top: 12px; padding: 10px 12px;
  border: 1px solid #3a3526; border-radius: 8px;
  background: rgba(20, 18, 12, .5);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.oc-row.hidden { display: none; }
.oc-item { display: inline-flex; align-items: center; gap: 6px;
  font-size: calc(13px * var(--ui-zoom, 1)); color: #d8cfae; cursor: pointer; }
.oc-item input[type="color"] {
  width: 34px; height: 24px; padding: 0; border: 1px solid #5a5340;
  border-radius: 4px; background: none; cursor: pointer;
}
.oc-reset { margin-left: auto; font-size: calc(12px * var(--ui-zoom, 1)); padding: 4px 10px; }

/* ---------- 攻略面板 ---------- */
/* 基础 .panel 把宽度压在 540px，这里必须连 max-width 一起放开，
   否则写多少 width 都不会生效（实测只显示 540）。 */
.guide-panel {
  width: min(1500px, 96vw);
  max-width: min(1500px, 96vw);
  height: min(93vh, 900px);
  max-height: 93vh;
  display: flex; flex-direction: column;
  padding: 14px 16px;
  text-align: left;
}
.guide-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 10px; }
.gh-btn {
  padding: 6px 12px; font-size: calc(12.5px * var(--ui-zoom, 1)); letter-spacing: .5px;
  color: #d8cfae; background: rgba(14, 13, 10, .7);
  border: 1px solid rgba(216, 200, 150, .3); border-radius: 4px; cursor: pointer;
}
.gh-btn:hover { background: rgba(40, 36, 26, .85); border-color: rgba(255, 233, 122, .55); color: #ffe97a; }
.guide-box { position: relative; flex: 1; min-height: 0; border: 1px solid rgba(216, 200, 150, .22); border-radius: 4px; overflow: hidden; background: #0b0a08; }
/* 站点的排版是按某个固定宽度设计的：把 iframe 按那个宽度渲染，再整体缩放
   到窗口里，它看到的视口宽度才不会随你的屏幕乱变（也才不会整页偏到一边）。 */
.guide-stage {
  position: absolute; inset: 0;
  display: flex; justify-content: center; align-items: flex-start;
  overflow: hidden;
}
.guide-box iframe {
  border: 0; display: block; background: #fff;
  transform-origin: top center;
  flex: none;
}
.guide-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; text-align: center; }
.gf-t { font-size: calc(16px * var(--ui-zoom, 1)); color: #e6d9a8; margin: 0; }
.gf-u { font-size: calc(18px * var(--ui-zoom, 1)); color: #ffe97a; margin: 0; word-break: break-all; user-select: all; }
.gf-s { font-size: calc(12px * var(--ui-zoom, 1)); color: #9a917a; margin: 0; }

/* 联机：客人那边的"进入"按钮 —— 房主开局后亮起 */
#lb-enter.lit {
  animation: enterLit 1.2s ease-in-out infinite;
  border-color: rgba(255, 233, 122, .85);
  color: #ffe97a;
}
@keyframes enterLit {
  0%, 100% { box-shadow: 0 0 6px rgba(255, 233, 122, .35); background: rgba(60, 52, 30, .9); }
  50%      { box-shadow: 0 0 16px rgba(255, 233, 122, .75); background: rgba(88, 76, 40, .95); }
}

/* ---------- 挤号申请 ---------- */
.lreq-panel { max-width: 460px; padding: 16px 18px; }
.lreq-p { font-size: calc(13px * var(--ui-zoom, 1)); color: #c9c0a0; margin: 8px 0; line-height: 1.6; }
.lreq-warn { color: #e6a06a; }
.lreq-ta { width: 100%; min-height: 76px; resize: vertical; padding: 8px 10px; font-size: calc(13px * var(--ui-zoom, 1));
  color: #e6dcc0; background: rgba(10, 9, 7, .8); border: 1px solid rgba(216, 200, 150, .3);
  border-radius: 4px; font-family: inherit; }
.lreq-reason { padding: 10px 12px; min-height: 48px; font-size: calc(13.5px * var(--ui-zoom, 1)); color: #ffe97a;
  background: rgba(10, 9, 7, .7); border-left: 3px solid rgba(255, 233, 122, .5); border-radius: 3px; }
.lreq-msg { font-size: calc(12.5px * var(--ui-zoom, 1)); color: #c9c0a0; min-height: 18px; margin: 8px 0; }
.lreq-acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
#lreq-ok:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- 联机聊天 ---------- */
.chat-hot { position: fixed; left: 0; top: 0; width: 46px; height: 100%; z-index: 30; }
.chat-wrap {
  position: fixed; left: 8px; top: 50%; transform: translateY(-50%);
  width: min(320px, 42vw); z-index: 31;
  background: rgba(10, 9, 7, .88); border: 1px solid rgba(216, 200, 150, .3);
  border-radius: 5px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .6);
}
.chat-wrap.hidden { display: none; }
.chat-head { display: flex; justify-content: space-between; font-size: calc(11px * var(--ui-zoom, 1));
  color: #9a917a; letter-spacing: .5px; }
.chat-log { max-height: 34vh; overflow-y: auto; font-size: calc(12.5px * var(--ui-zoom, 1)); line-height: 1.5;
  display: flex; flex-direction: column; gap: 3px; }
.chat-log .ln { word-break: break-all; }
.chat-log .who { color: #ffd97a; }
.chat-log .me .who { color: #9ee08a; }
.chat-log .sys { color: #9a917a; font-style: italic; }
.chat-in { width: 100%; resize: none; padding: 6px 8px; font-size: calc(13px * var(--ui-zoom, 1)); line-height: 1.35;
  color: #e6dcc0; background: rgba(0, 0, 0, .5); border: 1px solid rgba(216, 200, 150, .28);
  border-radius: 4px; font-family: inherit; }
.chat-in:focus { outline: none; border-color: rgba(255, 233, 122, .7); }
.chat-foot { text-align: right; font-size: calc(10.5px * var(--ui-zoom, 1)); color: #7d7660; }
body.is-touch .chat-wrap { width: min(300px, 60vw); }

/* 窄屏：攻略面板尽量占满，别留出大片黑边 */
@media (max-width: 820px) {
  .guide-panel { width: 98vw; height: 94vh; padding: 10px 10px; }
  .guide-bar { gap: 6px; }
  .gh-btn { padding: 7px 11px; font-size: calc(12px * var(--ui-zoom, 1)); }
}

/* 拖拽时跟着鼠标走的那个小图标 */
.drag-ghost {
  position: fixed; z-index: 90; pointer-events: none;
  transform: translate(-50%, -50%);
  padding: 6px 8px; border-radius: 6px;
  background: rgba(12, 11, 8, .92);
  border: 1px solid rgba(216, 200, 150, .45);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .6);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.drag-ghost.hidden { display: none; }
.drag-ghost .dg-nm { font-size: calc(10.5px * var(--ui-zoom, 1)); color: #e8dd9a; white-space: nowrap; }

/* 云存档（账号面板里） */
.slot-box { margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(216,200,150,.28); }
.slot-title { font-size: calc(13.5px * var(--ui-zoom, 1)); color: #ffe97a; letter-spacing: 1px; margin-bottom: 4px; }
.slot-info { font-size: calc(12px * var(--ui-zoom, 1)); color: #cbbb8a; line-height: 1.5; margin-bottom: 6px; min-height: 18px; }
.slot-tip { font-size: calc(11px * var(--ui-zoom, 1)); color: #8a7a5a; margin-top: 5px; line-height: 1.4; }

/* 联机提示：右上角（XXX 被 XX 吃了） */
.mp-notice {
  position: fixed; top: 58px; right: 14px; z-index: 26;
  max-width: 46vw; padding: 8px 13px;
  background: rgba(52, 12, 12, .85); border: 1px solid rgba(210, 90, 90, .5);
  border-radius: 5px; color: #ffd7d0; font-size: calc(12.5px * var(--ui-zoom, 1)); letter-spacing: .5px;
  box-shadow: 0 0 22px rgba(255, 60, 60, .2); pointer-events: none;
  opacity: 0; transform: translateY(-6px); transition: opacity .22s, transform .22s;
}
.mp-notice.show { opacity: 1; transform: translateY(0); }
.mp-notice.hidden { display: none; }

/* 难度选择 */
.diff-hint { font-size: calc(11.5px * var(--ui-zoom, 1)); color: #9c8c68; line-height: 1.5; margin: 2px 0 8px; }
.pmbox .diffbtn.on, .diffbtn.on { border-color: rgba(255,233,122,.7); box-shadow: 0 0 20px rgba(255,220,80,.16); }
.diffbtn.on b { color: #ffe97a; }

/* 主标题边上的版本号 */
.ver-badge {
  display: inline-block;
  margin-left: 10px;
  padding: 1px 7px;
  font-size: clamp(10px, 0.42em, 16px);
  letter-spacing: 1px;
  vertical-align: super;
  color: #ffe97a;
  border: 1px solid rgba(255, 233, 122, .45);
  border-radius: 4px;
  background: rgba(255, 233, 122, .08);
  text-shadow: none;
  font-weight: normal;
}
/* 全局右下角小字 */
.app-version {
  position: fixed;
  right: 8px;
  bottom: 6px;
  z-index: 9998;
  font-size: calc(10px * var(--ui-zoom, 1));
  letter-spacing: .6px;
  color: rgba(210, 195, 150, .34);
  display: flex;
  align-items: center;
  gap: 5px;
  pointer-events: none;
}
/* 版本号旁边那个「更新日志」是可以点的 —— 铺满屏都能看见 */
.verlog-link{
  pointer-events: auto;
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: rgba(210, 195, 150, .5);
  cursor: pointer; text-decoration: none;
}
.verlog-link:hover{ color: #d9c95e; text-decoration: underline; }
.ver-sep{ opacity: .5; }
  user-select: none;
}

/* 难度面板里的云存档 */
.diff-slot { margin: 10px 0 6px; padding: 10px 12px; border: 1px solid rgba(255,233,122,.18); border-radius: 6px; }
.diff-slot .slot-title { font-size: calc(12.5px * var(--ui-zoom, 1)); color: #ffe97a; letter-spacing: 1px; margin-bottom: 4px; }
.diff-slot .slot-info { font-size: calc(11.5px * var(--ui-zoom, 1)); color: #c9b25f; margin-bottom: 8px; }
.diff-slot .slot-tip { font-size: calc(10.5px * var(--ui-zoom, 1)); color: rgba(200,180,120,.5); margin-top: 7px; line-height: 1.45; }
.diff-slot .pmbtn { width: 100%; margin-top: 2px; }
.diff-slot .pmbtn.confirm { border-color: rgba(255,120,110,.65); color: #ffc9c2; }

/* ---------- 竖屏提示 ---------- */
.orient {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: #07080b;
}
.orient.hidden { display: none; }
.orient-box { text-align: center; padding: 24px; max-width: 86vw; }
.orient-icon {
  font-size: calc(58px * var(--ui-zoom, 1)); color: #ffe97a; line-height: 1;
  animation: orientSpin 2.4s ease-in-out infinite;
  text-shadow: 0 0 26px rgba(255,233,122,.4);
}
@keyframes orientSpin {
  0%,100% { transform: rotate(0deg); }
  50%     { transform: rotate(90deg); }
}
.orient-t { margin-top: 16px; font-size: calc(20px * var(--ui-zoom, 1)); letter-spacing: 3px; color: #ffe97a; }
.orient-s { margin-top: 10px; font-size: calc(12.5px * var(--ui-zoom, 1)); line-height: 1.7; color: #8f8570; }

/* ---------- 聊天：关闭按钮 / 发送按钮 ---------- */
.chat-head { display: flex; align-items: center; gap: 8px; }
.chat-head > span:first-child { flex: none; }
#chat-tip { flex: 1; }
.chat-x {
  flex: none; width: 22px; height: 22px; line-height: 1;
  border: 1px solid rgba(255,233,122,.3); background: transparent;
  color: #ffe97a; border-radius: 4px; cursor: pointer; font-size: calc(14px * var(--ui-zoom, 1));
}
.chat-x:hover { background: rgba(255,233,122,.12); }
.chat-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-send {
  padding: 4px 14px; font-size: calc(12px * var(--ui-zoom, 1));
  border: 1px solid rgba(255,233,122,.35); background: rgba(255,233,122,.08);
  color: #ffe97a; border-radius: 4px; cursor: pointer;
}
.chat-send:hover { background: rgba(255,233,122,.18); }

/* ---- Level 900：正门口那辆咖啡车 ---- */
#coffee.overlay { z-index: 26; }   /* 游戏内打开 -> 高于 HUD(10) */
.coffee-box { width: min(560px, 94vw); }
.coffee-tip {
  font-size: 13px; line-height: 1.7; color: #9a8f74; margin-bottom: 12px;
}
.coffee-cols { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.coffee-col {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px; border-radius: 7px;
  background: rgba(0,0,0,.26); border: 1px solid rgba(140,120,70,.24);
}
.coffee-col .cc-t {
  font-size: 12px; color: #cabb92; min-width: 52px; flex: 0 0 auto;
}
.coffee-col .cc-btns { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }
.coffee-col button { flex: 0 0 auto; min-width: 0; padding: 6px 10px; font-size: 12px; }
.coffee-col button.on {
  background: rgba(200,168,90,.22); border-color: rgba(216,180,96,.65); color: #f0d98a;
}
.coffee-col .cc-n {
  font-size: 12px; color: #7f765d; min-width: 30px; text-align: right; flex: 0 0 auto;
}
.coffee-mix {
  display: flex; align-items: center; gap: 14px; margin-bottom: 12px;
  padding: 10px 12px; border-radius: 7px;
  background: rgba(0,0,0,.30); border: 1px dashed rgba(150,130,80,.35);
}
.cm-cup { flex: 0 0 auto; }
.cm-cup .cup {
  width: 40px; height: 46px; border-radius: 4px 4px 8px 8px;
  background: #efeade; border: 2px solid #cbbf9f; position: relative; overflow: hidden;
}
.cm-cup .cup::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  background: #4a2c18;
}
.cm-txt { flex: 1 1 auto; min-width: 0; }
.cm-now { font-size: 13px; color: #e2dcc2; line-height: 1.6; }
.cm-res { font-size: 12px; color: #8d8367; margin-top: 3px; line-height: 1.6; }
.coffee-foot { display: flex; justify-content: flex-end; gap: 8px; }
.coffee-state { font-size: 12px; color: #8d8367; margin-top: 8px; }