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

html, body {
  height: 100%;
  overflow: hidden;
  background: #0a1410;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: #eadfc8;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

#game-root { position: fixed; inset: 0; overflow: hidden; }
#scene { display: block; width: 100%; height: 100%; }
.hidden { display: none !important; }

/* ---------- 3D view ----------
   The flat canvas stays on top in playing mode, but only as a sheet of glass:
   the minimap and the compass are drawn there. The wood itself is #scene3d. */
#scene3d {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  touch-action: none;
}
body.view3d #scene3d { display: block; }
body.view3d #scene {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
#f3-vig {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  background: radial-gradient(circle at 50% 46%, rgba(0, 0, 0, 0) 34%, rgba(2, 7, 14, 0.62) 100%);
}

/* ---------- HUD ---------- */
#hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: max(10px, env(safe-area-inset-top)) 12px 10px;
  pointer-events: none;
  /* 比营火面板还高一层：在火堆边上添柴的时候，血条和火焰条得一直看得见 */
  z-index: 12;
}

.hud-top { display: flex; justify-content: space-between; align-items: flex-start; }
.hud-left { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.phase-chip, .night-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(8, 20, 15, 0.72);
  border: 1px solid rgba(226, 199, 132, 0.28);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 600;
  backdrop-filter: blur(6px);
}
.phase-chip.night { border-color: rgba(126, 160, 255, 0.5); color: #bcd0ff; }
.phase-clock { opacity: 0.7; font-variant-numeric: tabular-nums; }
.night-chip b { color: #ffd27d; }

.hud-back {
  pointer-events: auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(8, 20, 15, 0.72);
  border: 1px solid rgba(226, 199, 132, 0.28);
  color: #eadfc8;
  text-decoration: none;
  font-size: 16px;
  flex: none;
}

.bars { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; max-width: 210px; }
.bar-row { display: flex; align-items: center; gap: 7px; }
.bar-ico { font-size: 13px; width: 16px; text-align: center; }
.bar {
  flex: 1;
  height: 9px;
  border-radius: 999px;
  background: rgba(8, 20, 15, 0.75);
  border: 1px solid rgba(226, 199, 132, 0.2);
  overflow: hidden;
}
.fill { display: block; height: 100%; width: 100%; border-radius: 999px; transition: width 0.18s linear; }
.fill.hp { background: linear-gradient(90deg, #ff6b6b, #ff9d7a); }
.fill.food { background: linear-gradient(90deg, #c98b4b, #f0c07a); }
.fill.fire { background: linear-gradient(90deg, #ff8a2b, #ffd75e); }
.bar-tag { font-size: 11px; font-weight: 700; color: #ffd27d; width: 30px; }

.bag { margin-top: 9px; display: flex; gap: 6px; flex-wrap: wrap; }
.bag-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(8, 20, 15, 0.72);
  border: 1px solid rgba(226, 199, 132, 0.24);
  border-radius: 9px;
  padding: 3px 9px;
  font-size: 12px;
}
.bag-chip b { font-size: 13px; color: #ffe9b8; }
.bag-chip.kids { border-color: rgba(126, 220, 160, 0.45); }
.bag-chip.kids b { color: #8fe5b0; }
.bag-chip.pets { border-color: rgba(255, 190, 120, 0.5); }
.bag-chip.pets b { color: #ffc98a; }

/* ---------- 交互提示 / toast ---------- */
.prompt {
  position: absolute;
  left: 50%; bottom: 34%;
  transform: translateX(-50%);
  background: rgba(8, 20, 15, 0.85);
  border: 1px solid rgba(255, 210, 125, 0.45);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #ffe9b8;
  z-index: 6;
  pointer-events: none;
  white-space: nowrap;
}

.toast {
  position: absolute;
  left: 50%; top: 42%;
  transform: translateX(-50%);
  background: rgba(8, 20, 15, 0.9);
  border: 1px solid rgba(226, 199, 132, 0.4);
  border-radius: 12px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  z-index: 8;
  pointer-events: none;
  text-align: center;
  max-width: 80vw;
}

/* ---------- 面板 ---------- */
.screen {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 18px;
  background: radial-gradient(circle at 50% 35%, rgba(24, 44, 34, 0.9), rgba(5, 10, 8, 0.96));
  z-index: 10;
  overflow-y: auto;
}

.panel {
  width: min(430px, 100%);
  background: linear-gradient(170deg, #16281f, #0d1712);
  border: 1px solid rgba(226, 199, 132, 0.25);
  border-radius: 20px;
  padding: 22px 20px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
.panel.small { width: min(330px, 100%); }

/* 营火面板不挡住游戏画面：夜里时间照样在走，得能瞄见外面的动静 */
#fire-panel, #craft-panel { background: rgba(5, 12, 9, 0.68); align-items: center; }
#fire-panel .panel, #craft-panel .panel { margin-top: 130px; }

/* 已经做好的一次性物件：留在列表里但标成完成，能看出自己攒到了什么 */
.act-btn.done { opacity: 0.55; border-color: rgba(126, 220, 160, 0.5); }
.act-btn.done .act-main { color: #8fe5b0; }
.act-sub .cost { font-style: normal; color: #ffd27d; font-weight: 700; }
.act-btn.done .cost { color: #8fe5b0; }

.title-badge {
  display: inline-block;
  background: rgba(255, 170, 60, 0.16);
  border: 1px solid rgba(255, 190, 90, 0.45);
  color: #ffd27d;
  border-radius: 999px;
  padding: 5px 15px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
}

.game-title { font-size: 25px; letter-spacing: 0.5px; margin-bottom: 8px; color: #fff3da; }
.game-sub { font-size: 13px; line-height: 1.7; color: rgba(234, 223, 200, 0.72); margin-bottom: 16px; }
.panel-title { font-size: 20px; margin-bottom: 4px; color: #fff3da; }
.fire-state { font-size: 13px; color: #ffd27d; margin-bottom: 14px; }

.how {
  text-align: left;
  background: rgba(0, 0, 0, 0.28);
  border-radius: 13px;
  padding: 11px 13px;
  margin-bottom: 18px;
}
.how-row {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12.5px; line-height: 1.85;
  color: rgba(234, 223, 200, 0.8);
}
.how-ico { flex: none; width: 20px; text-align: center; }
.how-txt { flex: 1; }
.how-row b { color: #ffd27d; font-weight: 700; margin-right: 3px; white-space: nowrap; }

.big-btn {
  width: 100%;
  border: none;
  border-radius: 14px;
  padding: 14px;
  font-size: 16px;
  font-weight: 800;
  color: #16281f;
  background-color: #f5b160;
  background-image: linear-gradient(160deg, #ffd27d, #f0a04b);
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(240, 160, 75, 0.3);
}
.big-btn:active { transform: translateY(1px); }

.ghost-btn {
  display: inline-block;
  width: 100%;
  margin-top: 9px;
  border: 1px solid rgba(226, 199, 132, 0.3);
  border-radius: 13px;
  padding: 11px;
  font-size: 14px;
  font-weight: 600;
  color: #eadfc8;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
}

.mobile-tip { margin-top: 10px; font-size: 11.5px; color: rgba(234, 223, 200, 0.68); line-height: 1.6; }

/* 营火面板按钮 */
.fire-acts { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }
.act-btn {
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  text-align: left;
  gap: 0 10px;
  border: 1px solid rgba(226, 199, 132, 0.28);
  background: rgba(255, 210, 125, 0.08);
  border-radius: 13px;
  padding: 10px 13px;
  color: #eadfc8;
  cursor: pointer;
}
.act-btn:disabled { opacity: 0.4; cursor: default; }
.act-ico { grid-row: 1 / 3; font-size: 22px; text-align: center; }
.act-main { font-size: 15px; font-weight: 700; color: #ffe9b8; }
.act-sub { font-size: 11.5px; color: rgba(234, 223, 200, 0.62); }

/* 结束页 */
.over-badge {
  display: inline-block;
  background: rgba(126, 160, 255, 0.16);
  border: 1px solid rgba(126, 160, 255, 0.45);
  color: #bcd0ff;
  border-radius: 999px;
  padding: 5px 15px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
}
.over-badge.win { background: rgba(126, 220, 160, 0.16); border-color: rgba(126, 220, 160, 0.5); color: #8fe5b0; }
.over-title { font-size: 22px; margin-bottom: 8px; color: #fff3da; }
.over-sub { font-size: 13px; line-height: 1.7; color: rgba(234, 223, 200, 0.72); margin-bottom: 15px; }

.result-row { display: flex; gap: 10px; margin-bottom: 12px; }
.result-box {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(226, 199, 132, 0.18);
  border-radius: 13px;
  padding: 11px 6px;
}
.result-box.hi { border-color: rgba(126, 220, 160, 0.45); }
.rb-label { display: block; font-size: 11px; color: rgba(234, 223, 200, 0.6); margin-bottom: 3px; }
.result-box b { font-size: 24px; color: #ffe9b8; }
.result-box.hi b { color: #8fe5b0; }

.best-line { font-size: 12.5px; color: rgba(234, 223, 200, 0.65); margin-bottom: 14px; min-height: 18px; }

.leaderboard { margin-top: 16px; text-align: left; font-size: 12.5px; }
.lb-title { font-size: 13px; font-weight: 700; color: #ffd27d; margin-bottom: 7px; text-align: center; }
.lb-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 9px;
  border-radius: 8px;
  color: rgba(234, 223, 200, 0.82);
}
.lb-row:nth-child(odd) { background: rgba(255, 255, 255, 0.035); }
.lb-row.me { background: rgba(255, 210, 125, 0.14); color: #ffe9b8; }
.lb-rank { width: 20px; font-weight: 700; opacity: 0.7; }
.lb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-val { font-variant-numeric: tabular-nums; font-weight: 700; }
.lb-empty { text-align: center; color: rgba(234, 223, 200, 0.62); padding: 8px; }

/* ---------- 触屏控制 ---------- */
#touch-pad {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0 22px max(20px, env(safe-area-inset-bottom));
  height: 190px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 6;
  pointer-events: none;
}

.stick {
  position: relative;
  width: 118px; height: 118px;
  border-radius: 50%;
  background: rgba(8, 20, 15, 0.4);
  border: 1.5px solid rgba(226, 199, 132, 0.28);
  pointer-events: auto;
  touch-action: none;
}
.knob {
  position: absolute;
  left: 50%; top: 50%;
  width: 50px; height: 50px;
  margin: -25px 0 0 -25px;
  border-radius: 50%;
  background: rgba(255, 210, 125, 0.55);
  border: 1.5px solid rgba(255, 233, 184, 0.8);
}

.tp-act {
  width: 92px; height: 92px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 190, 90, 0.6);
  background: rgba(255, 170, 60, 0.24);
  color: #ffe9b8;
  font-size: 17px;
  font-weight: 800;
  pointer-events: auto;
  touch-action: none;
  cursor: pointer;
}
.tp-act:active { background: rgba(255, 170, 60, 0.45); }

@media (min-width: 780px) and (hover: hover) {
  #touch-pad { display: none !important; }
}

/* ---------- co-op camps ---------- */
.camp-box { margin-top: 10px; }
.camp-join { display: flex; gap: 6px; margin-top: 8px; }
.camp-join input {
  flex: 1; min-width: 0; border-radius: 12px; padding: 10px 12px;
  border: 1px solid rgba(226,199,132,.3); background: rgba(255,255,255,.06);
  color: #eadfc8; font-size: 14px; font-family: inherit; text-transform: uppercase;
}
.camp-join input::placeholder { color: rgba(234,223,200,.45); }
.ghost-btn.small { padding: 10px 14px; font-size: 13px; margin-top: 0; width: auto; flex: none; }
.camp-note { margin-top: 8px; font-size: 12px; color: rgba(234,223,200,.7); min-height: 16px; line-height: 1.5; }
#camp-chip { border-color: rgba(143,229,176,.5); color: #8fe5b0; }

/* ---------- camp browser ---------- */
#camp-name { text-transform: none; }
.srv-list { max-height: 44vh; overflow-y: auto; margin-bottom: 12px; display: flex; flex-direction: column; gap: 7px; }
.srv-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: rgba(255,255,255,.05); border: 1px solid rgba(226,199,132,.28);
  border-radius: 14px; padding: 10px 12px; text-align: left; cursor: pointer;
  color: #eadfc8; font-family: inherit;
}
.srv-row:active { background: rgba(143,229,176,.14); }
.srv-main { display: block; flex: 1; min-width: 0; }
.srv-name { display: block; font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srv-meta { display: block; font-size: 11.5px; opacity: .7; margin-top: 2px; }
.srv-go { flex: none; font-size: 12.5px; font-weight: 800; color: #8fe5b0; }
.srv-full .srv-go { color: rgba(234,223,200,.5); }
.srv-empty { text-align: center; font-size: 13px; color: rgba(234,223,200,.65); padding: 18px 8px; }

/* ================= 99 Nights · design-document build ================= */

/* 状态条：新增护甲和电量 */
.fill.shield { background: linear-gradient(90deg, #6f8fd0, #a9c6f5); }
.fill.batt   { background: linear-gradient(90deg, #4fa38a, #9ff0d2); }

/* ---- 手里拿着什么 / 背包 ---- */
.carry {
  position: absolute;
  left: 8px; right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  pointer-events: none;
}
.carry:not(.hidden) { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.carry-hand, .carry-pack {
  display: flex; align-items: center; gap: 6px;
  background: rgba(12, 18, 14, 0.72);
  border: 1px solid rgba(150, 200, 160, 0.28);
  border-radius: 11px;
  padding: 5px 9px;
  font-size: 12px;
  max-width: 46%;
}
.carry-hand span, .carry-pack span { font-size: 16px; flex: none; }
.carry-hand i, .carry-pack i {
  font-style: normal; color: rgba(233, 245, 235, 0.82);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.carry-pack b { color: #ffd27d; font-size: 11.5px; flex: none; }

/* ---- 七个动作按钮 ---- */
.act-pad {
  position: absolute;
  right: 10px;
  bottom: max(12px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 186px;
  pointer-events: none;
}
.ab {
  pointer-events: auto;
  width: 100%; height: 52px;
  border-radius: 13px;
  border: 1.5px solid rgba(150, 200, 160, 0.34);
  background: rgba(14, 22, 17, 0.78);
  color: #e9f5eb;
  display: grid; place-items: center;
  gap: 0;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.05;
  -webkit-tap-highlight-color: transparent;
}
.ab span { font-size: 19px; }
.ab i { font-style: normal; font-size: 9px; color: rgba(233, 245, 235, 0.62); margin-top: 1px; }
.ab:active { background: rgba(126, 220, 160, 0.3); transform: translateY(1px); }
.ab.big { height: 58px; border-color: rgba(126, 220, 160, 0.55); }
.ab.big span { font-size: 22px; }
.ab.big { grid-column: span 1; }
#b-take { grid-column: 1 / span 2; }
#b-swing { grid-column: 3; }
.ab.power { border-color: rgba(255, 210, 125, 0.6); }
.ab.power.cooling { opacity: 0.5; }
.ab.power.cooling span { font-size: 16px; color: #ffd27d; }
.ab.on { background: rgba(255, 232, 150, 0.32); border-color: #ffd27d; }

@media (min-width: 620px) {
  .act-pad { width: 226px; gap: 8px; }
  .ab { height: 60px; }
  .ab.big { height: 66px; }
  .ab i { font-size: 10px; }
}

/* ---- 大厅的职业站 ---- */
.station {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(150, 200, 160, 0.2);
  border-radius: 15px;
  padding: 13px 12px;
  margin: 4px 0 14px;
  text-align: left;
}
.station-title { font-size: 14px; color: #ffd27d; margin: 0 0 3px; }
.station-sub { font-size: 12px; color: rgba(233, 245, 235, 0.6); margin: 0 0 11px; line-height: 1.5; }
.class-list { display: flex; flex-direction: column; gap: 7px; }
.class-card {
  display: flex; align-items: flex-start; gap: 10px;
  width: 100%; text-align: left;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(150, 200, 160, 0.22);
  border-radius: 13px;
  padding: 10px 11px;
  color: #e9f5eb;
  cursor: pointer;
  font-family: inherit;
}
.class-card.on { border-color: var(--cls); background: color-mix(in srgb, var(--cls) 16%, transparent); }
.cls-ico { font-size: 22px; flex: none; line-height: 1.1; }
.cls-body { flex: 1; min-width: 0; }
.cls-name { display: block; font-size: 14.5px; }
.class-card.on .cls-name { color: var(--cls); }
.cls-stat { display: block; font-style: normal; font-size: 12px; color: rgba(233, 245, 235, 0.72); margin-top: 2px; }
.cls-power {
  display: block; font-style: normal; font-size: 11.5px;
  color: rgba(233, 245, 235, 0.55); margin-top: 4px; line-height: 1.5;
}
.cls-power b { color: #ffd27d; font-weight: 700; }
.cls-tick { flex: none; font-size: 15px; color: var(--cls); opacity: 0; }
.class-card.on .cls-tick { opacity: 1; }

/* 出发按钮里带着你选的职业 */
.portal-go { display: block; }
.portal-cls { display: block; font-size: 12px; font-weight: 700; margin-top: 3px; opacity: 0.95; }

/* ---- 工作台的分级 ---- */
.tier-head {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(233, 245, 235, 0.45);
  margin: 10px 0 4px;
}
.tier-head:first-child { margin-top: 0; }
.act-btn.locked { opacity: 0.35; }
.act-btn.locked .cost { color: #ffb4a1; }
.sm-up {
  width: 100%;
  border-radius: 11px;
  border: 1px solid rgba(255, 210, 125, 0.5);
  background: rgba(255, 210, 125, 0.14);
  color: #ffd27d;
  padding: 9px;
  font-size: 12.5px; font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  margin-bottom: 10px;
}
.sm-up:disabled { opacity: 0.4; cursor: default; }

/* 玩起来的时候，把好友按钮挪开——它们正好压在动作键上 */
body.playing .fr-fab { display: none !important; }
.ab.on i { color: #ffe89a; }

/* 面板比屏幕高的时候要能从顶上开始滚，不然标题被顶栏盖住 */
/* place-items:center makes a panel taller than the screen unreachable at the top;
   safe center lets it start at the top and scroll instead */
.screen { align-items: safe center; }
#craft-panel, #grinder-panel { padding-top: 26px; padding-bottom: 26px; }
/* the HUD deliberately sits above the panels so you can watch your health at
   night — so these two have to start below it, not behind it */
#craft-panel .panel, #grinder-panel .panel { margin-top: 215px; }
.tier-head { color: rgba(233, 245, 235, 0.62); }

/* ---------- 画出来的图标（没有一个是 emoji） ---------- */
.ico { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.2em; flex: none; }
.ico.tiny { width: 0.95em; height: 0.95em; vertical-align: -0.14em; }
.bar-ico .ico { width: 15px; height: 15px; vertical-align: -3px; }
.bag-chip .ico { width: 14px; height: 14px; vertical-align: -2px; }
.act-ico .ico { width: 24px; height: 24px; vertical-align: -4px; }
.how-ico .ico { width: 17px; height: 17px; vertical-align: -3px; }
.cls-ico .ico { width: 24px; height: 24px; }
.hud-back .ico { width: 15px; height: 15px; }
.ab span .ico { width: 21px; height: 21px; }
.ab.big span .ico { width: 24px; height: 24px; }
.carry-hand .ico, .carry-pack .ico { width: 16px; height: 16px; vertical-align: -3px; }
.carry-pack #pack-icos .ico { width: 13px; height: 13px; margin-right: 1px; }
.panel-title .ico { width: 20px; height: 20px; vertical-align: -3px; }
.phase-ico .ico { width: 14px; height: 14px; vertical-align: -2px; }
.cls-power .ico { width: 13px; height: 13px; vertical-align: -2px; }
.cls-tick .ico { width: 15px; height: 15px; }
.sm-up .ico, #craft-have .ico, #grind-have .ico, .act-sub .ico { vertical-align: -0.16em; }

/* ---------- the avatar picker on the menu ---------- */
.avatar-btn {
  border-color: rgba(226, 199, 132, 0.44);
  background: rgba(226, 199, 132, 0.08);
  color: #ffe9b8;
  margin-top: 4px;
}
.avatar-btn:active { background: rgba(226, 199, 132, 0.2); }
.avatar-note {
  margin: 7px 0 14px;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(234, 223, 200, 0.56);
  text-align: center;
}
@media (max-width: 420px) {
  .avatar-note { font-size: 11px; }
}