/* 《茶时》P1 骨架样式 —— 暖、柔、粗颗粒、简 */

:root {
  --milk: #FFF6E8;
  --tea: #C9A06B;
  --wood: #A87C52;
  --wood-dark: #7A5636;
  --near-black: #2E2018;
  --glow: #FFE9A8;
  --berry: #E0716B;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #1a120b;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--near-black);
  -webkit-font-smoothing: none; /* 配合像素感 */
}

#app {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#game canvas {
  image-rendering: pixelated;       /* 放大保持粗颗粒 */
  image-rendering: crisp-edges;
  box-shadow: 0 0 0 4px var(--wood-dark), 0 8px 40px rgba(0,0,0,0.6);
}

/* ---------- 极简 HUD：只三项 ---------- */
#hud {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 18px;
  padding: 6px 16px;
  background: rgba(46, 32, 24, 0.82);
  border: 3px solid var(--tea);
  border-radius: 8px;
  color: var(--milk);
  font-size: 15px;
  letter-spacing: 1px;
  z-index: 5;
  pointer-events: none;
  white-space: nowrap;
}
#hud #hud-cash { color: var(--glow); }

/* 右上角常驻按钮组（菜单 / 重来）—— 低调，但「重来」必须**一眼可见**
   （阿光 2026-09-15：「我觉得在界面某处要有个直接重来的按钮」） */
/* ⚠️ 这里**故意不设 z-index**（v0.19 修）：
   `#topbar` 一旦带 z-index 就会**自建层叠上下文**，里面的 `#restart-btn` 再怎么提层级
   也只能在"组内"比大小，整体依旧被 `#modal-root`(z-index:10) 盖住 —— 实测确认过：
   弹窗打开时 `elementFromPoint(重来按钮中心)` 命中的是 `modal-root`，按钮**点不到**。
   不设 ⇒ 两个按钮直接和 `#modal-root` 在**同一个**层叠上下文里比层级。 */
#topbar {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
#topbar button {
  padding: 6px 12px;
  font-size: 14px;
  border: 3px solid var(--wood-dark);
  border-radius: 8px;
  background: rgba(46, 32, 24, 0.82);
  color: var(--milk);
  cursor: pointer;
}
#topbar button:hover { background: rgba(46, 32, 24, 0.95); }
/* 重来 = **破坏性动作** ⇒ 描边偏红，跟「菜单」在视觉上分开，降低误点概率。
   ⚠️ 但"防误点"靠的是**点完之后的确认弹窗**（说清会丢什么），不是靠把它藏起来。 */
#restart-btn {
  /* ⭐ 常驻在**遮罩之上**（`#modal-root` 是 10）。理由：阿光要的是"直接重来"，
     而**规划弹窗每回合必开**（必须点「开始营业」才关）⇒ 若只在无弹窗时可点，
     玩家能点它的窗口只剩营业动画那 1~2 秒 —— 那不叫"直接"。
     ⚠️ 「菜单」**不加** z-index ⇒ 弹窗态照旧被遮罩盖住（要开菜单得先关弹窗），行为不变。 */
  position: relative;
  z-index: 12;
  border-color: #8A3A2E;
  background: rgba(74, 34, 26, 0.86);
  color: #FFD9CE;
}
#restart-btn:hover { background: rgba(112, 46, 33, 0.95); }

/* ---------- 模态弹窗（游戏暂停） ---------- */
#modal-root {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 18, 11, 0.55);
  z-index: 10;
}
#modal-root.hidden { display: none; }

.modal {
  width: min(540px, 92vw);
  background: var(--milk);
  border: 4px solid var(--wood-dark);
  border-radius: 12px;
  padding: 22px 22px 18px;
  box-shadow: 0 10px 0 rgba(0,0,0,0.25);
  animation: pop 150ms ease-out;
}
@keyframes pop { from { transform: scale(0.9); } to { transform: scale(1); } }

.modal h2 {
  margin: 0 0 4px;
  font-size: 20px;
  color: var(--wood-dark);
}
.modal .sub {
  margin: 0 0 14px;
  font-size: 13px;
  color: #8a6b4a;
}
.modal .field { margin: 12px 0; }
.modal label {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--wood-dark);
}
.modal select, .modal input[type=text] {
  width: 100%;
  padding: 8px 10px;
  font-size: 15px;
  border: 3px solid var(--wood);
  border-radius: 8px;
  background: #fff;
  color: var(--near-black);
}

.modal .summary {
  background: #f3e6d2;
  border: 2px dashed var(--wood);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.7;
  margin: 8px 0 16px;
}
.modal .summary b { color: var(--berry); }

.modal .actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 8px;
}
.btn {
  padding: 10px 18px;
  font-size: 15px;
  border: 3px solid var(--wood-dark);
  border-radius: 8px;
  background: var(--tea);
  color: var(--near-black);
  cursor: pointer;
  font-weight: 600;
  transition: transform 80ms;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--berry); color: #fff; }
.btn.ghost { background: transparent; }
/* 破坏性按钮（重来 / 清档）：红底白字，跟 primary 明确区分 ——
   确认弹窗里"取消"用 ghost、"重来"用 danger，让手滑的那一下不会落在危险按钮上。 */
.btn.danger { background: #A8443A; color: #fff; border-color: #7E3229; }
.btn.danger:hover { background: #BC5247; }

/* 破坏性动作的警告块（重来确认弹窗）—— 必须一眼看见"不可恢复" */
.danger-note {
  margin-top: 10px;
  padding: 8px 10px;
  border: 2px solid #cfa9a4;
  border-left: 5px solid #A8443A;
  border-radius: 8px;
  background: #fdf0ee;
  font-size: 12.5px;
  color: #7a3a30;
  line-height: 1.7;
}
.danger-note b { color: #8A3226; }

.hint {
  text-align: center;
  font-size: 12px;
  color: #9a7a58;
  margin-top: 10px;
}

/* ---------- 调茶小游戏 ---------- */
.brew-steps {
  font-size: 12px;
  color: var(--tea);
  letter-spacing: 1px;
  margin-bottom: 10px;
  font-weight: 700;
}
.brew-group { margin: 8px 0; }
.brew-group-title {
  font-size: 12px;
  color: #8a6b4a;
  border-bottom: 2px solid #e6d3b8;
  padding-bottom: 2px;
  margin-bottom: 4px;
}
.brew-chk {
  display: inline-block;
  width: 50%;
  font-size: 13px;
  padding: 3px 0;
  color: var(--wood-dark);
  cursor: pointer;
}
.brew-chk input { margin-right: 5px; }
.brew-cost { font-size: 11px; color: #b08a5e; }
.brew-note { font-size: 12px; color: #b0543f; margin-top: 8px; min-height: 16px; }
.brew-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 7px 0;
}
.brew-name { width: 64px; font-size: 13px; color: var(--wood-dark); }
.brew-slider { flex: 1; accent-color: var(--berry); }
.brew-val { width: 44px; text-align: right; font-size: 13px; color: var(--wood-dark); }
.brew-sum {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  margin: 10px 0 4px;
  color: var(--wood-dark);
}
.brew-bar {
  position: relative;
  height: 26px;
  background: #f3e6d2;
  border: 3px solid var(--wood);
  border-radius: 8px;
  overflow: hidden;
  margin: 12px 0 4px;
}
.brew-sweet {
  position: absolute;
  left: 35%;
  width: 30%;
  top: 0; bottom: 0;
  background: rgba(127, 168, 79, 0.45);
}
.brew-marker {
  position: absolute;
  top: 0; bottom: 0;
  width: 6px;
  background: var(--berry);
  left: 0;
}
.brew-shake-result {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--tea);
  min-height: 18px;
  margin-top: 6px;
}
.brew-card {
  background: #f3e6d2;
  border: 2px dashed var(--wood);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  margin: 6px 0 12px;
}
.brew-star { font-size: 22px; color: #d9a441; letter-spacing: 2px; }
.brew-cat { font-size: 13px; color: #8a6b4a; margin-top: 2px; }
.brew-mini { font-size: 11px; color: #b08a5e; margin-top: 4px; }
.brew-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--wood-dark);
  margin: 8px 0;
}
.brew-field input[type=text] {
  flex: 1;
  padding: 7px 9px;
  font-size: 14px;
  border: 3px solid var(--wood);
  border-radius: 8px;
}
.brew-field input[type=range] { flex: 1; accent-color: var(--berry); }

/* ---------- 门店对比（规划弹窗） ---------- */
.store-cmp {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.cmp-row {
  background: #f3e6d2;
  border: 2px solid #e0cba8;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: #6b5436;
}
.cmp-row b { color: var(--wood-dark); font-size: 13px; }
.cmp-row i { color: #9a7a58; font-style: normal; }
.cmp-row.sel { border-color: var(--berry); background: #fbeede; }

/* ---------- 调茶：比例可视化（杯子 + 柱状图） ---------- */
.brew-ratio-wrap {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.brew-sliders { flex: 1.3; min-width: 0; }
.brew-viz {
  flex: 1;
  min-width: 150px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4px;
}
.cup {
  position: relative;
  width: 56px;
  height: 120px;
}
.cup-body {
  position: absolute;
  inset: 0;
  border: 3px solid var(--wood-dark);
  border-top: none;
  border-radius: 4px 4px 10px 10px;
  overflow: hidden;
  background: #fff;
}
.cup-liquid {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  display: flex;
  flex-direction: column-reverse;   /* 第一层（基底）沉在杯底，逐层向上堆叠 */
}
.cup-seg { width: 100%; min-height: 2px; }
.cup-lid {
  position: absolute; top: -6px; left: -6px; right: -6px;
  height: 9px; background: var(--wood-dark); border-radius: 4px;
}
.cup-straw {
  position: absolute; top: -26px; right: 12px;
  width: 5px; height: 30px; background: #d98c8c; transform: rotate(12deg); border-radius: 2px;
}
.viz-bars { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.viz-bar-row { display: flex; align-items: center; font-size: 11px; color: #6b5436; gap: 4px; }
.viz-bar-name { width: 42px; flex-shrink: 0; }
.viz-bar-track { flex: 1; height: 9px; background: #e7d6bd; border-radius: 5px; overflow: hidden; }
.viz-bar-fill { display: block; height: 100%; border-radius: 5px; }
.viz-bar-val { width: 30px; text-align: right; flex-shrink: 0; }
.cup-final { margin: 0 auto; }

/* ---------- 结算正负色 ---------- */
.summary .neg { color: #c0392b !important; }
.summary .pos { color: #2e8b57 !important; }

/* ---------- 规划弹窗：商圈「可选框」+ 饮品菜单 ---------- */
.modal { width: min(600px, 94vw); }          /* 规划弹窗内容较多，略放宽 */
.modal-body { max-height: min(58vh, 430px); overflow-y: auto; }

.sec-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--wood-dark);
  margin: 4px 0 6px;
  letter-spacing: 0.5px;
}
.store-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.store-card {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
  background: #f3e6d2;
  border: 3px solid #e0cba8;
  border-radius: 10px;
  padding: 8px 10px;
  line-height: 1.45;
  transition: transform 80ms;
}
.store-card:hover { transform: translateY(-1px); }
.store-card input { position: absolute; opacity: 0; pointer-events: none; }
.store-card .sc-name { font-size: 14px; font-weight: 700; color: var(--wood-dark); }
.store-card .sc-line { font-size: 11px; color: #8a6b4a; }
.store-card .sc-blurb { font-size: 11px; color: #9a7a58; margin-top: 3px; }
.store-card.sel {
  border-color: var(--berry);
  background: #fbeede;
  box-shadow: inset 0 0 0 2px rgba(224, 113, 107, 0.25);
}
.store-card.sel .sc-name::after { content: ' ✓'; color: var(--berry); }

/* ---------- v0.17 · 开局模式（阿光需求 4）---------- */
.om-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.om-card {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
  background: #f3e6d2;
  border: 3px solid #e0cba8;
  border-radius: 10px;
  padding: 8px 10px;
  line-height: 1.45;
  transition: transform 80ms;
}
.om-card:hover { transform: translateY(-1px); }
.om-card input { position: absolute; opacity: 0; pointer-events: none; }
.om-card.disabled { opacity: 0.55; cursor: default; }
.om-card .om-name { font-size: 14px; font-weight: 700; color: var(--wood-dark); }
.om-card .om-line { font-size: 11px; color: #8a6b4a; }
.om-card .om-line b { color: var(--berry); }
.om-card.sel {
  border-color: var(--berry);
  background: #fbeede;
  box-shadow: inset 0 0 0 2px rgba(224, 113, 107, 0.25);
}
.om-card.sel .om-name::after { content: ' ✓'; color: var(--berry); }
.om-note {
  font-size: 11px;
  color: #9a7a58;
  line-height: 1.55;
  margin: -4px 0 12px;
}
.om-locked {
  font-size: 11px;
  color: #b08a5e;
  font-weight: 700;
  margin: -4px 0 8px;
}
.om-msg { font-size: 11px; color: var(--berry); min-height: 14px; }
.mr-tag.tag-scratch { background: #b08a5e; }

.menu-list { display: flex; flex-direction: column; gap: 6px; }
.menu-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #faf1e2;
  border: 2px solid #e6d3b8;
  border-radius: 8px;
  padding: 6px 8px;
}
.mr-pick {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  margin: 0;
  cursor: pointer;
}
.mr-pick input { width: 15px; height: 15px; accent-color: var(--berry); flex-shrink: 0; }
.mr-name { font-size: 13px; color: var(--near-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-star { font-size: 11px; color: #d9a441; letter-spacing: 1px; flex-shrink: 0; }
.mr-tag {
  font-size: 10px;
  color: #fff;
  background: var(--berry);
  border-radius: 4px;
  padding: 1px 4px;
  flex-shrink: 0;
}
.mr-cost { font-size: 11px; color: #8a6b4a; text-align: right; line-height: 1.35; flex-shrink: 0; }
.mr-cost i { font-style: normal; color: #b08a5e; }
.mr-price {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  color: var(--wood-dark);
  margin: 0;
  flex-shrink: 0;
}
.mr-price input {
  width: 62px;
  padding: 5px 6px;
  font-size: 13px;
  border: 2px solid var(--wood);
  border-radius: 6px;
  background: #fff;
  color: var(--near-black);
}
.estimate {
  margin-top: 10px;
  padding: 8px 10px;
  font-size: 13px;
  background: #efe0c8;
  border: 2px dashed var(--wood);
  border-radius: 8px;
  color: #6b5436;
  line-height: 1.6;
}
.estimate b { color: var(--berry); }
.estimate i { font-style: normal; color: #9a7a58; font-size: 12px; }
.estimate .neg { color: #c0392b; }
.estimate .pos { color: #2e8b57; }

/* ---------- 结算：逐款明细 ---------- */
.summary .bd { border-bottom: 2px dashed #d8c3a2; padding-bottom: 6px; margin-bottom: 6px; }
.bd-row { display: flex; align-items: baseline; gap: 6px; font-size: 13px; }
.bd-name { flex: 1; min-width: 0; color: var(--wood-dark); }
.bd-num { font-size: 12px; color: #8a6b4a; text-align: right; white-space: nowrap; }
.bd-num i { font-style: normal; color: #b08a5e; font-size: 11px; }
.bd-num.neg { color: #c0392b; }
.bd-num.pos { color: #2e8b57; }

/* 调茶滑块左侧色点（此前遗漏，色块没显示） */
.brew-dot {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

/* ---------- P6 · 铺位（选址 / 扩张共用） ---------- */
.slot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.slot-card {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
  background: #f3e6d2;
  border: 3px solid #e0cba8;
  border-radius: 10px;
  padding: 7px 8px;
  line-height: 1.45;
  transition: transform 80ms;
}
.slot-card:hover { transform: translateY(-1px); }
.slot-card input { position: absolute; opacity: 0; pointer-events: none; }
.slot-card .sl-name { font-size: 12px; font-weight: 700; color: var(--wood-dark); }
.slot-card .sl-line { font-size: 10.5px; color: #8a6b4a; }
.slot-card .sl-line b { color: var(--berry); }
.slot-card.sel {
  border-color: var(--berry);
  background: #fbeede;
  box-shadow: inset 0 0 0 2px rgba(224, 113, 107, 0.25);
}
.slot-card.sel .sl-name::after { content: ' ✓'; color: var(--berry); }

/* ---------- P6 · 门店状态标签 ---------- */
.store-card.disabled { opacity: 0.55; cursor: default; }
.mr-tag.tag-prep { background: #b08a5e; }
.mr-tag.tag-consign { background: #7a8b5a; }

/* ---------- P6 · 扩张入口 ---------- */
.expand-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  flex-wrap: wrap;
}
.expand-hint { font-size: 11px; color: #8a6b4a; }

/* ---------- P6 · 扩张弹窗 ---------- */
.exp-list { display: flex; flex-direction: column; gap: 8px; }
.exp-row {
  background: #faf1e2;
  border: 2px solid #e6d3b8;
  border-radius: 8px;
  padding: 8px 10px;
}
.exp-row.ok { border-color: #9dbb7a; background: #f4f8ec; }
.exp-head { display: flex; align-items: baseline; gap: 8px; }
.exp-name { font-size: 14px; font-weight: 700; color: var(--wood-dark); flex: 1; }
.exp-meta { font-size: 11px; color: #8a6b4a; }
.exp-line { font-size: 11px; color: #8a6b4a; margin-top: 2px; }
.exp-btn { margin-top: 6px; font-size: 12px; }
.exp-warn {
  margin-top: 8px;
  padding: 6px 8px;
  font-size: 12px;
  color: #8a4a1f;
  background: #fbeede;
  border: 2px dashed var(--wood);
  border-radius: 8px;
}

/* ---------- P6 · 门槛清单 ---------- */
.gate-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.gate-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  padding: 4px 7px;
  border-radius: 6px;
  background: #f7ecdb;
  border: 1px solid #e6d3b8;
}
.gate-row .g-mark { width: 34px; flex-shrink: 0; font-size: 11px; color: #8a6b4a; }
.gate-row .g-label { width: 62px; flex-shrink: 0; color: var(--wood-dark); }
.gate-row .g-need { flex: 1; color: #8a6b4a; }
.gate-row .g-have { flex-shrink: 0; color: #9a7a58; }
.gate-row.ok { background: #f4f8ec; border-color: #c4d9a6; }
.gate-row.ok .g-mark { color: #4d7a2a; }
.gate-row.no { background: #fbeeea; border-color: #e8c4b8; }
.gate-row.no .g-mark { color: #b0543f; }

/* ---------- P6 · 多店结算：按店分行 ---------- */
.net-store-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
}
.nsr-name { flex: 1; min-width: 0; color: var(--wood-dark); }
.nsr-note {
  font-size: 11px;
  color: #9a7a58;
  margin: 0 0 4px 0;
}


/* ---------- 规划弹窗：③ 研发台（RP 的收支与出口） ---------- */
.rd-wrap {
  margin-top: 4px;
  margin-bottom: 10px;
  background: #faf1e2;
  border: 2px solid #e6d3b8;
  border-radius: 10px;
  padding: 8px 10px;
}
.rd-stat {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 12px;
  color: #8a6b4a;
}
.rd-stat b { color: var(--berry); font-size: 13px; }
.rd-line {
  font-size: 12px;
  color: #6b5436;
  margin-top: 5px;
}
.rd-line b { color: var(--wood-dark); }
.rd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.up-btn {
  font-size: 12px;
  padding: 6px 10px;
  border: 2px solid var(--wood-dark);
  border-radius: 7px;
  background: var(--tea);
  color: var(--near-black);
  cursor: pointer;
  font-weight: 600;
}
.up-btn:hover:not(:disabled) { transform: translateY(-1px); }
.up-btn:disabled { opacity: 0.45; cursor: default; }
.rd-note { font-size: 11px; color: #9a7a58; margin-top: 6px; line-height: 1.5; }
.rd-msg {
  font-size: 12px;
  font-weight: 700;
  color: #b0543f;
  min-height: 15px;
  margin-top: 8px;
}

/* ---------- 规划弹窗：④ 市场推广（v0.15 方案 D：热度 + 口碑推广） ---------- */
.mk-wrap {
  margin-top: 4px;
  margin-bottom: 10px;
  background: #fdf3e0;
  border: 2px solid #ecd6ad;
  border-radius: 10px;
  padding: 8px 10px;
}
.mk-stat {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 12px;
  color: #8a6b4a;
}
.mk-stat b { color: var(--berry); font-size: 13px; }
.mk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.mk-btn {
  font-size: 12px;
  padding: 6px 10px;
  border: 2px solid #b8763a;
  border-radius: 7px;
  background: #ffe6bd;
  color: #5a3a1c;
  cursor: pointer;
  font-weight: 600;
}
.mk-btn:hover:not(:disabled) { transform: translateY(-1px); }
.mk-btn:disabled { opacity: 0.45; cursor: default; }
.mk-note { font-size: 11px; color: #9a7a58; margin-top: 6px; line-height: 1.5; }
.mk-msg {
  font-size: 12px;
  font-weight: 700;
  color: #b0543f;
  min-height: 15px;
  margin-top: 8px;
}

/* ---------- 口碑趋势（v0.15.1 方案 A：让"口碑在掉"这件事看得见） ----------
   不改任何数值，只把**趋势**和**代价**从一堆数字里提出来单独成块。 */
.mk-trend {
  margin-top: 6px;
  padding: 5px 8px;
  border-radius: 7px;
  border: 1px dashed #d9b98a;
  background: #fbeed6;
  font-size: 12px;
  line-height: 1.5;
}
.mk-trend b { font-size: 13px; }
.mk-trend.neg { color: #c0392b; }
.mk-trend.pos { color: #2e8b57; }

/* 结算里的口碑块：单独成块，不再淹没在一行数字里 */
.rep-block {
  margin: 8px 0;
  padding: 7px 10px;
  border-radius: 8px;
  border: 2px solid #ecd6ad;
  background: #fdf3e0;
}
.rep-block.neg { border-color: #e5b7a8; background: #fdeee9; }
.rep-block.pos { border-color: #b6d8bf; background: #eef7f0; }
.rb-main { font-size: 13px; color: #6b4e34; }
.rb-main b { font-size: 15px; color: var(--berry); }
.rb-delta { font-weight: 700; margin-left: 2px; }
.rep-block.neg .rb-delta { color: #c0392b; }
.rep-block.pos .rb-delta { color: #2e8b57; }
.rb-extra { margin-top: 4px; font-size: 12px; line-height: 1.5; color: #8a6b4a; }
.rep-block.neg .rb-extra { color: #a5432f; }
.rb-extra b { font-size: 13px; }

/* ---------- 调茶：鉴定面板的标签 / 三项来源 / 试饮台词 ---------- */
.brew-tags { display: flex; gap: 6px; justify-content: center; margin-top: 5px; flex-wrap: wrap; }
.brew-tag {
  font-size: 11px;
  color: #6b5436;
  background: #efe0c8;
  border-radius: 999px;
  padding: 1px 8px;
}
.brew-parts {
  display: flex;
  justify-content: space-around;
  font-size: 12px;
  color: #8a6b4a;
  padding: 4px 0 2px;
}
.brew-parts span {
  background: #f3e6d2;
  border: 1px solid #e0cba8;
  border-radius: 6px;
  padding: 2px 9px;
}
.brew-taste {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fbeede;
  border: 2px solid #e8c4c0;
  border-radius: 10px;
  padding: 8px 10px;
  margin: 4px 0 8px;
}
.taste-face { font-size: 22px; line-height: 1; }
.taste-line { font-size: 13px; color: #8a4a42; line-height: 1.5; }

/* ---------- 术语说明（商圈卡片下方） ---------- */
.sc-legend {
  font-size: 11px;
  color: #9a7a58;
  line-height: 1.55;
  margin: -4px 0 12px;
}

/* ---------- 按钮旁边的提示（研发前置条件等，位于 actions 上方） ---------- */
.modal-msg {
  min-height: 15px;
  font-size: 12px;
  font-weight: 700;
  color: #b0543f;
  margin-top: 6px;
  text-align: right;
}

/* ---------- 月报里的换季提示 ---------- */
.season-note { color: #5a7d4a; font-size: 12px; }


/* ══════════════════════════════════════════════════════════════════════════
   v0.10 · 岗位完整性 + 商圈难度提示
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- 难度标签（选址卡片 / 铺位卡片 / 扩张列表共用） ---------- */
.df-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  border-radius: 4px;
  padding: 1px 6px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.df-easy   { background: #6f9a58; }   /* 轻松上手 */
.df-normal { background: #c69a3a; }   /* 要精打细算 */
.df-hard   { background: #c0662a; }   /* 开局就是硬仗 */
.df-brutal { background: #a83a2e; }   /* 九死一生 */

.df-hint { font-size: 10.5px; color: #9a7a58; }
.slot-card .sl-hint {
  font-size: 10px;
  color: #9a7a58;
  margin-top: 2px;
  line-height: 1.4;
}

/* ---------- 门店卡片单元格（卡片 + 卡片外的招人条） ---------- */
.store-grid { align-items: stretch; }
.store-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.store-cell .store-card { flex: 1; }

/* ---------- 岗位完整度 ---------- */
.st-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.st-line b { color: var(--berry); }
.st-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}
.st-ok   { background: #e6efdc; color: #4f7a3c; border: 1px solid #b9d3a3; }
.st-warn { background: #fbf0d8; color: #96701d; border: 1px solid #e0c98a; }
.st-bad  { background: #fbe4e0; color: #a83a2e; border: 1px solid #e6b3ac; }
.st-miss { font-size: 10px; color: #a83a2e; }

/* ---------- 缺人指路（v0.18：招人按钮已移到 ⑤ 员工） ----------
   ⚠️ 这一块替代了旧的 `.staff-bar` / `.staff-btn` / `.staff-done`。
      删按钮必须留一条**指路**，否则"缺人"会变成玩家找不到出路的状态。 */
.sc-hint {
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 700;
  color: #a8666a;
}

/* ============ ⑤ 员工（P4 · v0.18）============
   ⚠️ 全部尺寸从内联的 `--av-size` 推导（头像），配色对齐既有 `.rd-*` / `.mk-*` / `.emp-btn`。
   ⚠️ 不改上面任何一行 —— 本节全部是新增选择器。 */

/* ---------- 头像：两层叠加（底层首字 / 上层立绘） ----------
   图片 404 时 `onerror` 会把 <img> 整个删掉，底层首字自动露出 ⇒ 永远不会是空洞。 */
.av {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;                     /* 绝不被压缩 */
  width: var(--av-size, 48px);
  height: var(--av-size, 48px);
  border-radius: 50%;
  overflow: hidden;
  background: var(--av-bg, #f3e0cd);
  border: 2px solid #e0cba8;
  box-shadow: 0 1px 0 rgba(122, 86, 54, 0.18);
  line-height: 1;
  vertical-align: middle;
  user-select: none;
}
.av-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;                         /* 永远在下层，先渲染好 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--av-bg, #f3e0cd);
  color: var(--av-fg, #8a5a3b);
  font-size: calc(var(--av-size, 48px) * 0.42);   /* 字号跟容器走，不写死 px */
  font-weight: 700;
  letter-spacing: 0;
}
.av-img {
  position: absolute;
  inset: 0;
  z-index: 1;                         /* 盖在首字上面 */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 区块外壳 ---------- */
.crew-wrap {
  margin: 4px 0 10px;
  background: #faf1e2;
  border: 2px solid #e6d3b8;
  border-radius: 10px;
  padding: 8px 10px;
}

/* ---------- 门店切换 tab（多店期） ---------- */
.cw-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cw-tab {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: #8a6b4a;
  background: #f3e6d2;
  border: 2px solid #e0cba8;
  border-radius: 999px;
  padding: 3px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 80ms, background 80ms;
}
.cw-tab b { color: var(--wood-dark); }
.cw-tab:hover { transform: translateY(-1px); background: #fdf5e8; }
.cw-tab.sel {                        /* 当前选中：跟 .store-card.sel 同一套语言 */
  background: #fbeede;
  border-color: var(--berry);
  color: #9c3a2e;
  box-shadow: inset 0 0 0 2px rgba(224, 113, 107, 0.22);
}
.cw-tab.sel b { color: var(--berry); }
.cw-tab.warn {                       /* 这家店人手不足：左侧橙条 + 文字变红，扫一眼就能看见 */
  color: #a83a2e;
  background: #fdeee9;
  border-color: #e6b3ac;
  box-shadow: inset 4px 0 0 #c0662a;
}
.cw-tab.warn b { color: #a83a2e; }
.cw-tab.sel.warn {                   /* 既是选中又是缺人：两层信息都要在 */
  background: #fdeee9;
  border-color: #c0662a;
  box-shadow: inset 4px 0 0 #c0662a, inset 0 0 0 2px rgba(192, 102, 42, 0.22);
}

/* ---------- 托管方针（v0.20 GDD §3.8 玩家覆盖权） ---------- */
.pol-box {
  margin: 0 0 8px;
  padding: 7px 10px;
  border: 2px solid #e8d6b6;
  border-radius: 8px;
  background: #fdf6e9;
}
.pol-head {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: 12.5px; font-weight: 700; color: var(--wood-dark);
}
.pol-cur { color: #9c3a2e; }
.pol-src { font-size: 11px; font-weight: 400; color: #8a6b4a; }
.pol-src b { color: var(--berry); }
.pol-desc { margin: 3px 0 6px; font-size: 11px; color: #7a5c3e; }
.pol-acts { display: flex; flex-wrap: wrap; gap: 5px; }
.pol-btn {
  font-family: inherit;
  font-size: 11px; font-weight: 700;
  color: #8a6b4a; background: #f3e6d2;
  border: 2px solid #e0cba8; border-radius: 999px;
  padding: 2px 10px; cursor: pointer;
  transition: transform .12s, background .12s;
}
.pol-btn:hover { transform: translateY(-1px); background: #fdf5e8; }
.pol-btn.sel {                       /* 当前方针：跟 .cw-tab.sel 同一套语言 */
  background: #fbeede; border-color: var(--berry); color: #9c3a2e;
  box-shadow: inset 0 0 0 2px rgba(224, 113, 107, 0.22);
}
.pol-back {                          /* "交回给店长"：虚线 + 冷绿 ⇒ 一眼看出是"撤销"不是"设定" */
  font-family: inherit;
  font-size: 11px; font-weight: 700;
  color: #4a6b52; background: #eaf3ec;
  border: 2px dashed #a8c8b0; border-radius: 999px;
  padding: 2px 10px; cursor: pointer;
}
.pol-back:hover { background: #f2f9f4; }
.pol-note { margin-top: 6px; font-size: 10.5px; line-height: 1.5; color: #8a6b4a; }
.pol-note b { color: #a83a2e; }
.pol-warn {
  margin-top: 5px; padding: 4px 7px;
  border: 1px solid #e6b3ac; border-radius: 6px;
  background: #fdeee9; font-size: 10.5px; color: #a83a2e;
}

/* ---------- 🛠 调试区块（只有 ?debug=1 才渲染；冷灰 + 虚线 ⇒ 一眼看出"不是游戏内容"） ---------- */
.dbg-box {
  margin: 0 0 8px;
  padding: 7px 10px;
  border: 2px dashed #b9b2a6;
  border-radius: 8px;
  background: #f4f3f0;
}
.dbg-head { font-size: 11.5px; font-weight: 700; color: #6a6459; margin-bottom: 5px; }
.dbg-acts { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; }
.dbg-btn {
  font-family: inherit;
  font-size: 11px; font-weight: 700;
  color: #5a554c; background: #e6e3dc;
  border: 2px solid #c9c4ba; border-radius: 999px;
  padding: 2px 10px; cursor: pointer;
}
.dbg-btn:hover:not([disabled]) { background: #f2f0eb; }
.dbg-btn[disabled] { opacity: .55; cursor: default; }
.dbg-note { font-size: 10.5px; line-height: 1.5; color: #6a6459; margin-top: 2px; }
.dbg-note b { color: #4a463e; }

/* ---------- 辞职信预告框（"要出事"的信号：暖橙边框 + 淡底，醒目但不吵） ---------- */
.quit-box {
  margin: 0 0 8px;
  padding: 7px 10px;
  border: 2px solid #e0a37a;
  border-left: 5px solid #c0662a;
  border-radius: 8px;
  background: #fdf0e2;
}
.quit-line { font-size: 12px; color: #8a4a2a; line-height: 1.75; }
.quit-line b { color: #a83a2e; }
.quit-line .emp-btn { margin-left: 5px; max-width: none; }   /* 横排正文里不限制宽度 */
.quit-note { font-size: 10.5px; color: #a87a58; margin-top: 4px; line-height: 1.5; }

/* ---------- 两栏：左=名册 / 右=招聘市场 ---------- */
.crew-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: start;
}
.crew-col {
  min-width: 0;                       /* 关键：不然长文本会把格子撑破 */
  padding: 7px 8px;
  background: #fdf7ec;
  border: 1px solid #ecd6ad;
  border-radius: 8px;
}
.cw-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--wood-dark);
  border-bottom: 2px solid #ecd6ad;
  padding-bottom: 4px;
  margin-bottom: 6px;
}
.cw-sub { font-size: 10.5px; font-weight: 400; color: #9a7a58; }
.cw-sub b { color: var(--berry); font-weight: 700; }
.cw-head .emp-btn { margin-left: auto; max-width: none; }   /* 刷新名单按钮靠右 */
.cw-note {
  font-size: 10.5px;
  color: #9a7a58;
  line-height: 1.55;
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px dashed #e6d3b8;
}
.cw-note b { color: #8a6b4a; }

/* ---------- 名册行 ---------- */
.emp-list { display: flex; flex-direction: column; gap: 6px; }
/* ⚠️ 两栏布局下每列只有 ~240px。若按钮列并排（auto 1fr auto），正文只剩 ~90px ⇒
   姓名/属性折成 3 行，"员工"看起来就像一张表格行 —— 正好和支柱三（员工是有脸面的人）相反。
   所以**按钮一律放到正文下方**（占满整行宽度），正文拿到完整列宽。
   （实测：`.modal` 600px → 内容 524px → 每列 258px。） */
.emp-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);        /* 头像 / 正文 */
  gap: 6px;
  align-items: start;
  padding: 6px;
  border: 1px solid #e6d3b8;
  border-radius: 8px;
  background: #fffaf1;
}
.emp-act {
  grid-column: 1 / -1;                               /* 按钮行：正文下方，占满整行 */
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
  padding-top: 5px;
  border-top: 1px dashed #ecd6ad;
}
.emp-row.me {                        /* 店主本人：虚框 + 压暗的底 —— 区分于别人，但**不像"被选中"** */
  background: #f4ecdc;
  border-style: dashed;
  border-color: #dcc9a6;
}
.emp-av { flex: 0 0 auto; line-height: 0; }
.emp-main { min-width: 0; }
.emp-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--wood-dark);
  line-height: 1.45;
}

/* 等级徽章：越高越亮 / 越金，一眼看出谁是高手 */
.emp-lv {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.6;
  padding: 1px 6px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.emp-lv.lv1 { color: #8a7a63; background: #ece4d6; border-color: #ddd0ba; }          /* 新手 */
.emp-lv.lv2 { color: #8a6b2a; background: #f6e9d2; border-color: #e2cb9c; }          /* 熟练 */
.emp-lv.lv3 { color: #7a5410; background: #f7dfa4; border-color: #dfc07a; }          /* 骨干 */
.emp-lv.lv4 { color: #6b4408; background: #f2c964; border-color: #d9ab48;
              box-shadow: 0 0 0 2px rgba(242, 201, 100, 0.30); }                     /* 老手 */
.emp-lv.lv5 { color: #4a2c05; background: #e8b23c; border-color: #c8912a;
              box-shadow: 0 0 0 2px rgba(232, 178, 60, 0.42), 0 0 8px rgba(232, 178, 60, 0.55); }  /* 大师 */

/* 身份标签：店主（玩家自己）= 莓红实心；店长 = 草绿实心 */
.emp-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.6;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.emp-tag.me {
  color: #fff;
  background: var(--berry);
  border: 1px solid #b8544f;
  box-shadow: 0 1px 0 rgba(184, 84, 79, 0.3);
}
.emp-tag.mgr {
  color: #fff;
  background: #6f9a58;
  border: 1px solid #567a43;
}
/* 档次角标（v0.19 固定人物）：普通没有角标；特殊 = 紫；传奇 = 金 */
.emp-tag.sp {
  color: #fff;
  background: #8a6fb0;
  border: 1px solid #6d5490;
}
.emp-tag.lg {
  color: #4a2c05;
  background: linear-gradient(180deg, #f7dc9a, #e8b23c);
  border: 1px solid #c8912a;
  box-shadow: 0 0 6px rgba(232, 178, 60, 0.55);
}
/* 预警角标（v0.19）：嫩店长 —— 任命了反而更差，必须让玩家看见 */
.emp-tag.warn {
  color: #9c4a18;
  background: #fde9d6;
  border: 1px solid #c0662a;
}

.emp-spec {
  font-size: 9.5px;
  color: #6b5436;
  background: #efe0c8;
  border-radius: 999px;
  padding: 1px 6px;
  white-space: nowrap;
}
.emp-traits {
  font-size: 9.5px;
  color: #8a6b4a;
  background: #f4ead6;
  border: 1px dashed #ddc9a4;
  border-radius: 999px;
  padding: 1px 6px;
  white-space: nowrap;
}

.emp-attrs { font-size: 10px; color: #8a6b4a; margin-top: 3px; line-height: 1.55; }
.emp-attrs b { color: var(--wood-dark); font-weight: 700; }

.emp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 5px;
  margin-top: 4px;
}
/* ⚠️ v0.19：`.emp-bar`（精力条）**已随精力系统一起删除** —— 元素不再渲染，样式留着就是死代码。
   离职链路的可视预警改由「培养状态词」（`.emp-word`）+ 下面的 `.emp-ask` 承担。 */

/* 涨薪请求（v0.19 离职链路的入口）：这是他"想跟你谈谈"的那一行，给足视觉重量 */
.emp-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  padding: 5px 8px;
  border: 2px solid #c0662a;
  border-left: 5px solid #c0662a;
  border-radius: 8px;
  background: #fdf1e2;
  font-size: 11.5px;
  color: #6b5436;
}
.emp-ask b { color: var(--berry); font-size: 12.5px; }
.emp-ask .emp-btn { max-width: none; }

/* 固定人物的头衔（v0.19）：一句"他是谁"，比数字更能立住一个人 */
.emp-title {
  font-size: 9.5px;
  color: #6b5436;
  background: #f4ead6;
  border: 1px solid #ddc9a4;
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}

/* 状态词三档语气（沿用 .st-ok / .st-warn / .st-bad 的色） */
.emp-word {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.emp-word.t-ok   { color: #4f7a3c; background: #e9f2e0; border-color: #c2d8ac; }
.emp-word.t-warn { color: #96701d; background: #fbf0d8; border-color: #e0c98a; }
.emp-word.t-bad  { color: #a83a2e; background: #fbe4e0; border-color: #e6b3ac; }

.emp-mood {
  font-size: 10px;
  color: #8a6b4a;
  background: #f2e8d6;
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}
.emp-wage { font-size: 10px; color: #9a7a58; white-space: nowrap; }

/* 按钮列：窄栏里纵向堆叠，长文案换行而不是把正文挤没 */
.emp-act {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  flex: 0 0 auto;
}

/* ---------- 员工按钮（对齐 .up-btn 的体量） ---------- */
.emp-btn {
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  padding: 3px 7px;
  border-radius: 6px;
  border: 2px solid var(--wood);
  background: #f7ecdb;
  color: var(--wood-dark);
  cursor: pointer;
  max-width: 78px;
  white-space: normal;
  vertical-align: middle;
  transition: transform 80ms, background 80ms;
}
.emp-btn:hover:not(:disabled) { transform: translateY(-1px); background: #fdf5e8; }
.emp-btn:active:not(:disabled) { transform: translateY(1px); }
.emp-btn:disabled { opacity: 0.5; cursor: default; transform: none; }
.emp-btn.up     { border-color: #b8763a; background: #ffe6bd; color: #5a3a1c; }  /* 培养：主色 */
.emp-btn.on     { border-color: #6f9a58; background: #e9f2e0; color: #4f7a3c; }  /* 已开启（点它会关掉） */
.emp-btn.danger { border-color: #cfa9a4; background: #fdf0ee; color: #a8666a; }  /* 辞退 */
.emp-btn.warn   { border-color: #c0662a; background: #fde9d6; color: #9c4a18; }  /* 挽留 */
.emp-btn.hire   {                                                               /* 录用：绿实心主行动 */
  width: 100%;
  max-width: none;
  margin-top: 4px;
  font-size: 11.5px;
  padding: 5px 8px;
  border-color: #6f9a58;
  background: #6f9a58;
  color: #fff;
}
.emp-btn.hire:hover:not(:disabled) { background: #7dab64; }

/* ---------- 招聘市场 ---------- */
.cand-list { display: flex; flex-direction: column; gap: 7px; }
.cand-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 8px;
  border: 2px solid #e0cba8;
  border-radius: 9px;
  background: #fffaf1;
  transition: transform 80ms;
}
.cand-card:hover { transform: translateY(-1px); }
/* 固定人物（特殊 / 传奇）的卡片：描一道金边，一眼看出"这人不一样" */
.cand-card.fixed {
  border-color: #d9ab48;
  background: linear-gradient(180deg, #fffaf1, #fdf3dd);
  box-shadow: 0 0 0 2px rgba(217, 171, 72, 0.18);
}
.cand-top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.cand-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 5px;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--wood-dark);
  line-height: 1.45;
}
.cand-hint { font-size: 10.5px; color: #a0682f; font-style: italic; line-height: 1.5; }
.cand-attrs { font-size: 10.5px; color: #8a6b4a; line-height: 1.55; }
.cand-attrs b { color: var(--wood-dark); font-weight: 700; }
.cand-line { font-size: 10.5px; color: #9a7a58; line-height: 1.55; }
.cand-line b { color: var(--berry); font-weight: 700; }
.cand-empty {
  font-size: 11px;
  color: #9a7a58;
  text-align: center;
  padding: 12px 6px;
  border: 1px dashed #e0cba8;
  border-radius: 8px;
}

/* ---------- 结算弹窗里的「招募」区（v0.19 新入口） ----------
   阿光：「雇佣员工的时间点可以放在回合结算位置，点击按钮招募员工」。
   摆在结算里 = 玩家是在**看见这周赚了多少、现金还剩多少**之后才决定招不招（支柱一）。 */
.hire-sec {
  margin-top: 12px;
  padding: 10px 11px;
  border: 2px solid #e0cba8;
  border-radius: 10px;
  background: #fffaf1;
}
.hire-store + .hire-store { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #e0cba8; }
.hire-head {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--wood-dark);
  margin-bottom: 6px;
}
.hire-sub { font-size: 10.5px; font-weight: 400; color: #9a7a58; margin-left: 6px; }
.hire-cards { display: flex; flex-wrap: wrap; gap: 8px; }
.hire-card {
  flex: 1 1 168px;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 9px;
  border: 2px solid #e0cba8;
  border-radius: 9px;
  background: #fffdf8;
}
.hc-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--wood-dark);
}
.hc-hint { font-size: 10.5px; color: #a0682f; font-style: italic; line-height: 1.5; }
.hc-attrs { font-size: 10.5px; color: #8a6b4a; line-height: 1.55; }
.hc-attrs b { color: var(--wood-dark); font-weight: 700; }
.hc-line { font-size: 10.5px; color: #9a7a58; line-height: 1.55; }
.hc-line b { color: var(--berry); font-weight: 700; }
.hire-note {
  margin-top: 9px;
  font-size: 10.5px;
  color: #9a7a58;
  line-height: 1.6;
}
.hire-note b { color: var(--wood-dark); }

/* 操作回显：成功 / 失败都用同一种中性 toast，靠文案分辨 */
.crew-msg {
  font-size: 12px;
  font-weight: 700;
  color: var(--wood-dark);
  background: #fdf1d8;
  border: 1px dashed #e0c98a;
  border-radius: 7px;
  padding: 5px 8px;
  margin-top: 8px;
  line-height: 1.5;
}
.crew-msg:empty { display: none; }   /* 平时是空的，不占位 */

/* ---------- 结算弹窗里的「员工动向」一行 ---------- */
.crew-line {
  margin: 8px 0;
  padding: 7px 10px;
  border: 2px solid #e6c8a8;
  border-left: 5px solid #c0662a;
  border-radius: 8px;
  background: #fdf1e2;
  font-size: 12.5px;
  color: #6b5436;
  line-height: 1.75;
}
.crew-line b { color: var(--wood-dark); font-size: 13px; }
.cl-sub { font-size: 11px; color: #9a7a58; }   /* 括号补充：小一号、淡一点 */

/* ---------- v0.20 离职告别（一个人走，也要走得像个"待过的人"）----------
   三段：① 姓名一行 ② 干了多久 / 出过多少杯 ③ **为什么走**（可归因，这套演出的价值所在） */
.fw-line {
  margin: 4px 0 6px;
  padding-left: 2px;
}
.fw-line:not(:first-child) { margin-top: 10px; border-top: 1px dashed #e0bd94; padding-top: 8px; }
.fw-sub { font-size: 11.5px; color: #8a6b4a; line-height: 1.6; }
.fw-why {
  font-size: 11.5px; color: #a4552a; line-height: 1.6; margin-top: 1px;
  font-style: italic;   /* 斜体 = "这是他走的原因"，和上面的事实陈述区分开 */
}

/* ---------- v0.20 世界层 · 季节（**可预期**的起伏，所以摆在规划里让你提前打算）---------- */
.season-box {
  margin: 8px 0;
  padding: 6px 10px;
  border: 2px solid #cfe0d4;
  border-left: 5px solid #6a9c78;
  border-radius: 8px;
  background: #f2f8f3;
}
.season-line {
  font-size: 12px; color: #4b6b52; line-height: 1.65;
}
/* ---------- v0.20 改良饮品（GDD §3.10）：研发台里的"老配方第二次生命" ---------- */
.rf-wrap { margin-top: 8px; border-top: 1px dashed #e0d6c2; padding-top: 6px; }
.rf-sub { font-size: 11.5px; color: #7a6a52; line-height: 1.6; margin-bottom: 4px; }
.rf-btn { font-size: 11.5px; }
.rf-tip { font-size: 12px; color: #6b5436; line-height: 1.65; margin-bottom: 6px; }
.rf-ings { display: flex; flex-direction: column; gap: 4px; }
.rf-ing {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; border: 2px solid transparent; border-radius: 6px; background: #f7f3ea;
}
.rf-ing.sel { border-color: #c08a2e; background: #fdf6e6; }
.rf-pick {
  min-width: 84px; text-align: left; font-size: 12px;
  background: transparent; border: none; cursor: pointer; color: #4b3c28;
}
.rf-cur { font-size: 12px; color: #6b5436; }
.rf-cur .pos { color: #4a7a52; font-style: normal; }
.rf-cur .neg { color: #a4552a; font-style: normal; }
.rf-slider { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; }
.rf-step { width: 30px; height: 26px; font-size: 14px; cursor: pointer; }
.rf-delta { font-size: 12.5px; color: #4b3c28; min-width: 110px; text-align: center; }
.rf-est { display: block; font-size: 12px; color: #6b5436; }
.rf-est .pos { color: #4a7a52; font-style: normal; }
.rf-est .neg { color: #a4552a; font-style: normal; }
.rf-warn {
  margin-top: 6px; font-size: 11.5px; color: #a4552a;
  background: #fbf0e6; border-left: 3px solid #c08a2e; padding: 4px 8px; border-radius: 4px;
}

/* ---------- v0.20 随机事件（世界层）：淡黄底 + 红字标"风声"，与季节的绿底区分开 ---------- */
.ev-box {
  border-color: #e6d9b8;
  border-left-color: #c08a2e;
  background: #fbf6e9;
}
.ev-box .season-line { color: #6b5436; }
.ev-box .ev-warn {
  color: #a4552a;
  font-weight: 600;
}

/* ---------- v0.21 常客（GDD §8.4.6）：卖得多 ⇒ 攒熟客 ⇒ 更耐跌 + 带新客 ---------- */
/*   配色刻意与季节（绿）/ 事件（黄）区分：这是**你自己的资产**，不是世界给的环境。 */
.reg-box {
  margin: 8px 0;
  padding: 6px 10px;
  border: 2px solid #e6d5c6;
  border-left: 5px solid #b07a55;
  border-radius: 8px;
  background: #faf4ee;
}
.reg-head { font-size: 12.5px; color: #5b4433; font-weight: 600; margin-bottom: 2px; }
.reg-line { font-size: 12px; color: #6b5436; line-height: 1.65; }
.reg-tier { color: #8a6a4a; }
.reg-others { color: #93826d; }

/* ---------- v0.20 里程碑回响（只能靠玩家自己的行为达成 ⇒ 不是随机给的好处）---------- */
.ms-line {
  font-size: 12.5px; color: #6b5436; line-height: 1.7;
  padding-left: 2px;
}
.ms-line:not(:first-child) { margin-top: 2px; }

/* ---------- v0.20 员工履历（名册里每人一行小传）---------- */
.emp-hist {
  font-size: 10px; color: #9a7a58; margin-top: 2px; line-height: 1.5;
  font-variant-numeric: tabular-nums;   /* 杯数等宽，横向比人时不跳 */
}

/* ---------- 窄屏：两栏改一栏，按钮列换行到正文下方 ---------- */
@media (max-width: 520px) {
  .crew-cols { grid-template-columns: 1fr; }
  .emp-row { grid-template-columns: auto minmax(0, 1fr); }
  .emp-act {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .emp-btn { max-width: none; }
}

/* ---------- v0.20 年度饮品大赛（S18）---------- */
.ct-box { margin: 8px 0; padding: 8px 10px; border: 2px solid #e0d6c2; border-left: 5px solid #b8892b; border-radius: 8px; background: #fdf8ee; }
.ct-pick { font-size: 14px; color: #3a3226; }
/* 参赛品"身份"标签（今年新作 / 今年改良 / 老品顶替）—— v0.20 改良链路接通后新增 */
.ct-kind { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: 11.5px; color: #7a5a1e; background: #f3e7cf; border: 1px solid #e2d0ac; vertical-align: 1px; }
.ct-band { font-size: 12.5px; color: #7a6a4e; margin-top: 2px; }
.ct-note { font-size: 12px; color: #6b5c44; margin-top: 4px; line-height: 1.6; }
.ct-warn { font-size: 12px; color: #a05a2c; margin-top: 4px; line-height: 1.6; }
.ct-verdict { font-size: 14px; color: #3a3226; line-height: 1.7; margin: 6px 0 10px; }
.ct-board { border-top: 1px solid #e6ddc9; padding-top: 6px; }
.ct-row { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; color: #5c5346; line-height: 1.9; }
.ct-row.me { color: #7a4f16; font-weight: 700; }
.ct-rk { display: inline-block; min-width: 18px; text-align: right; color: #9a8b70; }
.ct-row.me .ct-rk { color: #b8892b; }
.ct-reward { margin-top: 8px; font-size: 13px; color: #3a3226; }
.ct-eve { margin: 8px 0; padding: 6px 10px; border: 2px solid #e6d9bd; border-left: 5px solid #b8892b;
  border-radius: 8px; background: #fdf8ee; font-size: 12.5px; color: #6b5330; line-height: 1.65; }

/* === 标题画面（v0.20 · 直接用 ChatGPT 参考图切出的 PNG 素材） ============ */
/*   素材由 tools/slice-title-art.py 从参考图切出，6 个文件放在 assets/title/：
       bg（全屏背景）｜text（摇奶茶 + TeaShake）｜cup（奶茶杯，带摇动）
       btn-start / btn-settings / btn-close（三个**可单独点击**的按钮）
     ⚠️ 按钮为什么必须单独切：它们是交互元素，不能拿整张按钮组图当图片 —— 那样
        点击热区是整张图，点空白处也会触发「开始游戏」。                      */

#title-screen {
  position: fixed; inset: 0; z-index: 9000;
  overflow: hidden;
  background: #e8dcc8;              /* 图没盖到时的兜底（近似素材的暖白） */
}
#title-screen.hidden { display: none; }

/* ⓿ 背景：满屏铺满，短边裁掉（cover） */
.title-bg-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  pointer-events: none; user-select: none;
}

/* ❶❷❸ 文字 / 奶茶杯 / 按钮：垂直叠在背景之上 */
.title-stack {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(4px, 1.1vh, 16px);
  padding: 3vh 4vw 9vh;
}

/* ❶ 标题字（摇奶茶 + TeaShake）
   ⚠️ 尺寸实测调过：素材 471×223（≈2.11:1，v0.20 裁掉标注文字后的尺寸）。
      更早一版素材是 541×326，给 500px 宽 ⇒ 高 301px，加上杯子 301px + 按钮 45px ≈ 647px，
      在 720 高的视口里**文字贴顶、按钮贴底**。⇒ 现在的尺寸见下面 `height` 的推导。 */
.title-text-img {
  /* ⚠️ v0.20：改用 **height** 约束，原因同下面杯子（素材被裁窄了，写 width 会缩水）。
     旧素材 541×326 里，顶部 103px 是 ChatGPT 的标注文字、不是素材
     ⇒ 裁掉后变成 471×223，**整张就是「摇奶茶 TeaShake」本体**。
     要让本体保持原来的显示大小，就得让新图高 = 旧图里本体的显示高：
       旧显示高 = 223 × (clamp(200,27vw,360) / 541) = clamp(82, 11.1vw, 148)  ← 就是下面这串数
     （1280 视口下 ≈142px，1920 下 ≈148px，与换素材前一致。） */
  /* ⚠️ v0.20：`min(11.1vw, 28vh)` 里的 **28vh 是"防溢出"项，不是造型项** ——
     只写 vw 的话，窗口一拉扁（如 1280×420）文字不缩，整块标题就超出可用高度被裁。
     28vh 的取值保证：**宽高比 ≥ 2.5:1 的窗口才会触发它**，
     16:9 / 16:10 / 竖屏等常见比例下 `11.1vw` 更小 ⇒ 完全不受影响（实测 16 档视口逐一验过）。 */
  height: clamp(82px, min(11.1vw, 28vh), 148px); width: auto;
  pointer-events: none; user-select: none;
  filter: drop-shadow(3px 4px 6px rgba(60,40,20,0.18));
}

/* ❷ 奶茶杯：摇一摇（素材 250×470 ≈ 1:1.9 的竖杯，v0.20 去掉了右侧的吸管 / 珍珠） */
.title-cup-img {
  /* ⚠️ v0.20：改用 **height** 约束（原来写的是 width）。
     原因：这张图的宽高比**由素材决定** —— 去掉右侧那根独立吸管和一整堆珍珠后，
     从 520×504 变成 250×470，比例从 1.03 掉到 0.53。
     继续写 width 的话杯子会突然长高一倍（把标题顶到屏外）。
     写 height 才是"我要杯子这么大"。目标 = 换素材前**杯子本体**的显示高度：
       旧图 504 高里，顶部 24px 是标注文字 ⇒ 本体高 470
       旧显示高 = 470 × (clamp(120,18vw,240) / 520) = clamp(108, 16.2vw, 217)  ← 就是下面这串数
     （1280 视口下 ≈208px，1920 下 ≈217px，与换素材前一致。） */
  /* ⚠️ 同 `.title-text-img`：`40vh` 是**防溢出项**，只在宽高比 ≥ 2.47:1 的扁窗口才生效，
     常见比例下 `16.2vw` 更小 ⇒ 尺寸完全不变。 */
  height: clamp(108px, min(16.2vw, 40vh), 217px); width: auto;
  pointer-events: none; user-select: none;
  transform-origin: 50% 85%;
  animation: titleCupShake 4s ease-in-out infinite;
  filter: drop-shadow(4px 8px 10px rgba(60,40,20,0.22));
}
@keyframes titleCupShake {
  0%   { transform: rotate(-4deg)   translateY(0); }
  25%  { transform: rotate( 4deg)   translateY(-6px); }
  50%  { transform: rotate(-2.5deg) translateY(0); }
  75%  { transform: rotate( 2.5deg) translateY(-4px); }
  100% { transform: rotate(-4deg)   translateY(0); }
}

/* ❸ 两个主按钮（图片当按钮内容，点击区 = 图片区） */
.title-actions {
  display: flex; align-items: center; gap: clamp(8px, 1.5vw, 20px);
  margin-top: clamp(2px, 0.8vh, 12px);
}
.title-btn {
  padding: 0; border: 0; background: transparent; cursor: pointer;
  line-height: 0;
  transition: transform 0.1s ease;
}
.title-btn img {
  height: clamp(38px, 6.2vh, 60px); width: auto; display: block;
  pointer-events: none; user-select: none;
}
.title-btn:hover  { transform: translateY(-3px) scale(1.03); }
.title-btn:active { transform: translateY(1px) scale(0.98); }

/* ❹ 右下角小叶子 */
.title-close {
  position: absolute; z-index: 3; line-height: 0;
  right: clamp(12px, 2.2vw, 32px); bottom: clamp(12px, 2.2vw, 32px);
  padding: 0; border: 0; background: transparent; cursor: pointer;
  transition: transform 0.12s ease;
}
.title-close img {
  height: clamp(32px, 4.8vh, 48px); width: auto; display: block;
  pointer-events: none; user-select: none;
}
.title-close:hover  { transform: scale(1.12) rotate(-8deg); }
.title-close:active { transform: scale(0.94); }