/* ============ 模拟市长 V2 · 样式（暗色游戏 HUD） ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: #1a232b; color: #dfe7ec; }
button { font-family: inherit; cursor: pointer; border: none; border-radius: 6px; }
.hidden { display: none !important; }

/* ---------- 开始界面（V9：全幅晨曦河湾背景 + 玻璃面板；修复 100% 缩放超视口） ---------- */
/* ============ 开始界面 V9 第2轮·方向B 河湾晨曦全景 ============ */
/* 仅改启动/选档界面结构、样式与背景挂载；选档数据/参数/解锁条件/存档逻辑/游戏内其他界面一律不动 */
#start-screen {
  position: fixed; inset: 0; z-index: 100;
  background-color: #121C26;
  background-image:
    linear-gradient(180deg, rgba(27,39,51,0.18) 0%, rgba(27,39,51,0.62) 430px, rgba(18,28,38,0.96) 100%),
    url('assets/title_dawn.jpg');
  background-size: cover; background-position: center; background-repeat: no-repeat;
  overflow-y: auto;
  display: flex; justify-content: center;
}
.start-wrap {
  position: relative; z-index: 2;
  width: 100%; max-width: 1440px; margin: 0 auto; box-sizing: border-box;
  padding: 56px 64px 48px;
  display: flex; flex-direction: column;
}

/* ---------- 品牌 + 标语区 ---------- */
.cover-brand { text-align: left; }
.brand-row { display: flex; align-items: center; gap: 14px; }
.brand-mark { display: block; width: 44px; height: 44px; flex: 0 0 44px; }
.brand-mark img { display: block; width: 44px; height: 44px; }
.brand-title {
  margin: 0; font-size: 36px; font-weight: 700; color: #FFFFFF; letter-spacing: 1px; line-height: 1;
  text-shadow: 0 1px 8px rgba(0,0,0,0.45);
}
.brand-ver {
  font-size: 14px; font-weight: 600; color: #1A1405;
  background: #F2B63D; border-radius: 4px; padding: 3px 10px; line-height: 1;
}
.brand-sub { margin: 12px 0 0; font-size: 15px; font-weight: 400; color: #C7D2D9; white-space: nowrap; }
.brand-slogan { margin: 24px 0 0; font-size: 20px; font-weight: 600; color: #FFFFFF; text-shadow: 0 1px 8px rgba(0,0,0,0.4); }
.brand-decor { margin-top: 12px; width: 120px; height: 2px; background: #F2B63D; }

/* ---------- 分组（规模 / 环境） ---------- */
.group { margin-top: 28px; }
.group-title {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px; font-size: 16px; font-weight: 600; color: #F2B63D;
}
.group-bar { display: inline-block; width: 6px; height: 18px; background: #F2B63D; border-radius: 2px; }
.card-row { display: flex; justify-content: center; }
.size-row { gap: 24px; }
.env-row { gap: 20px; align-items: flex-end; }   /* 三卡底边对齐同一基准线 */

/* ---------- 选档卡片 ---------- */
.opt-card {
  position: relative; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px; padding: 20px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.size-row .opt-card { width: 380px; height: 128px; }
.env-row .opt-card { width: 256px; height: 128px; }
/* 悬停 */
.opt-card:hover {
  border-color: #F2B63D; transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.35); background: rgba(255,255,255,0.08);
}
/* 选中 */
.opt-card.on { border-color: #F2B63D; background: rgba(242,182,61,0.12); }
.opt-card.on::before {
  content: ''; position: absolute; top: 0; left: 0;
  border-style: solid; border-width: 8px 8px 0 0;
  border-color: #F2B63D transparent transparent transparent;
  border-top-left-radius: 12px;
}
.opt-icon { display: block; width: 40px; height: 40px; margin-bottom: 10px; }
.opt-icon img { display: block; width: 40px; height: 40px; }
/* 选中态：图标描边以金色光晕呼应（多色填充保留，金色落于卡片边框与图标光晕） */
.opt-card.on .opt-icon img { filter: drop-shadow(0 0 3px rgba(242,182,61,0.85)); }
.opt-name { font-size: 18px; font-weight: 600; color: #FFFFFF; margin-bottom: 8px; }
.opt-desc { font-size: 12px; font-weight: 400; color: #C7D2D9; line-height: 1.6; }
.opt-desc span { display: block; }

/* ---------- 操作区 ---------- */
.cover-actions { margin-top: 32px; display: flex; flex-direction: column; align-items: center; }
#btn-start {
  width: 420px; height: 56px; border-radius: 28px;
  background: linear-gradient(180deg, #F6C453 0%, #E8A92E 100%);
  color: #1A1405; font-size: 18px; font-weight: 700;
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 6px 16px rgba(232,169,46,0.35);
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
#btn-start:hover { filter: brightness(1.08); transform: translateY(-1px); }
#btn-start:active { transform: translateY(1px); box-shadow: 0 3px 8px rgba(232,169,46,0.35); }
.cover-actions .hint { margin: 16px 0 0; font-size: 12px; font-weight: 400; color: #8FA3B0; text-align: center; }
.ghost-row { margin-top: 12px; display: flex; gap: 24px; justify-content: center; }
.ghost-btn {
  background: transparent; border: 1px solid rgba(255,255,255,0.18);
  color: #C7D2D9; font-size: 14px; font-weight: 400;
  border-radius: 8px; padding: 10px 18px; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.ghost-btn:hover { border-color: #F2B63D; color: #FFFFFF; }
.ghost-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- 响应式断点 ---------- */
/* 1280–1599：压缩规格，首屏完整 */
@media (max-width: 1599px) and (min-width: 1280px) {
  .brand-title { font-size: 32px; }
  .size-row .opt-card { width: 340px; height: 112px; }
  .env-row .opt-card { width: 230px; height: 112px; }
  #btn-start { width: 380px; }
  .start-wrap { padding: 48px 56px 40px; }
}
/* 1024–1279：背景顶部优先展示晨曦区，卡片降高 */
@media (max-width: 1279px) and (min-width: 1024px) {
  .start-wrap { padding: 44px 40px 40px; }
  .size-row .opt-card { width: 320px; height: 104px; }
  .env-row .opt-card { width: 220px; height: 104px; }
  #btn-start { width: 360px; height: 52px; }
  #start-screen { background-position: center top; }
}
/* <1024：单栏纵向堆叠，操作区吸附视口底部可触达 */
@media (max-width: 1023px) {
  .start-wrap { padding: 36px 24px 32px; }
  .brand-sub { white-space: normal; }
  .card-row { flex-direction: column; align-items: center; }
  .size-row .opt-card, .env-row .opt-card { width: min(420px, 92vw); height: auto; }
  #btn-start { width: min(420px, 92vw); }
  .cover-actions {
    position: sticky; bottom: 0;
    background: linear-gradient(180deg, rgba(18,28,38,0) 0%, rgba(18,28,38,0.94) 36%);
    padding-top: 14px;
  }
}

/* ---------- 主布局 ---------- */
#app {
  display: grid; height: 100vh;
  /* V7.4.1：首行 46px → auto —— 指标增多后窄屏允许换行成两行，不再裁切 */
  grid-template-rows: auto 1fr 58px;
  grid-template-columns: 208px 1fr 272px;
  grid-template-areas: "hud hud hud" "build stage side" "tax tax tax";
}
#hud { grid-area: hud; }
#build-bar { grid-area: build; }
#stage { grid-area: stage; }
#side-panel { grid-area: side; }
#tax-bar { grid-area: tax; }

/* ---------- HUD ---------- */
#hud {
  display: flex; align-items: center; gap: 10px; padding: 3px 12px;
  min-height: 40px; flex-wrap: wrap;
  background: #22303c; border-bottom: 1px solid #35485a;
  font-size: 12px;                       /* V7R7：HUD 全局字号收紧（13→12） */
}
.hud-brand { font-weight: 700; font-size: 13px; white-space: nowrap; }
/* V7R7：两行结构——第一行「宏观基本盘」/ 第二行「运行指标」。
 * 行内 nowrap + overflow-x:auto ⇒ 任何窗口宽度都严格两行，元素永不重叠
 * （窄屏行内可横向滚动，内容不裁切；宽屏各行恰好容纳、无滚动条）。 */
.hud-stats { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.hud-row { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
/* V5.3：复古像素化 —— 硬边框 + 直角 + 1px 实阴影（不用圆角/柔光），数字等宽防跳动 */
.stat {
  font-size: 12px; white-space: nowrap; background: rgba(255,255,255,0.05);
  padding: 2px 7px; border-radius: 0; border: 1px solid #3d5468;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.28); font-variant-numeric: tabular-nums;
  flex: none;                            /* nowrap 行内不被压缩，保持一屏可读 */
}
/* V7R7：图标（emoji）统一缩至 80%，为数字腾出空间 */
.ic { font-size: 80%; }
#stat-money { color: #ffd54f; font-weight: 700; }
/* V8.8 第2轮 · RCI 需求指示器（顶栏进度条） */
.rci-widget { display: inline-flex; gap: 10px; align-items: center; }
.rci-item { display: inline-flex; align-items: center; gap: 3px; }
.rci-ic { font-size: 13px; line-height: 1; }
.rci-bar {
  display: inline-block; width: 46px; height: 8px; border-radius: 0;
  background: #2a3a49; border: 1px solid #4a6377; overflow: hidden;
  box-shadow: inset 1px 1px 0 rgba(0,0,0,0.35);
}
.rci-fill { display: block; height: 100%; width: 50%; transition: width .25s ease, background .25s ease; }
.rci-fill.rci-high { background: #1f8a3b; }      /* 深绿：需求旺盛赶紧建 */
.rci-fill.rci-normal { background: #6fce7f; }    /* 浅绿：正常 */
.rci-fill.rci-over { background: #b71c1c; }      /* 深红：严重过剩停建 */
.rci-fill.rci-neutral { background: #5a6b7a; }   /* 待建/无数据 */
.hud-actions { display: flex; gap: 6px; align-items: center; }
.hud-actions button {
  background: #35485a; color: #dfe7ec; padding: 4px 9px; font-size: 12px;
  border-radius: 0; border: 1px solid #4a6377; box-shadow: 2px 2px 0 rgba(0,0,0,0.28);
}
.hud-actions button:hover { background: #46607a; }
.hud-actions button:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 rgba(0,0,0,0.28); }
.hud-actions .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff5252; margin-left: 4px; }
.hud-actions button.on { background: #46607a; border-color: #6f8ca3; }
.chk { font-size: 12px; color: #9fb3c0; display: flex; align-items: center; gap: 3px; cursor: pointer; white-space: nowrap; flex-shrink: 0; }

/* ---------- V7.4.1：秘书按钮可收起右侧面板 ---------- */
#app.side-collapsed { grid-template-columns: 208px 1fr 0; }
#app.side-collapsed #side-panel { display: none; }

/* ---------- V7.4.1：财政三项（盈=默认色 / 亏=红标） ---------- */
#stat-fiscal.neg { color: #ff8a80; }

/* ---------- 建造栏 ---------- */
#build-bar { background: #22303c; border-right: 1px solid #35485a; display: flex; flex-direction: column; overflow: hidden; }
#build-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; border-bottom: 1px solid #35485a; }
#build-tabs button {
  background: #2c3e4e; color: #b0c4d0; font-size: 12px; padding: 4px 8px;
  border-radius: 0; border: 1px solid #3d5468;
}
#build-tabs button.on { background: #ffb300; color: #222; font-weight: 700; border-color: #ffb300; box-shadow: 2px 2px 0 rgba(0,0,0,0.3); }
#build-list { flex: 1; overflow-y: auto; padding: 8px; }
.build-btn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: #2c3e4e; border: 1px solid transparent; border-radius: 0;
  padding: 7px 9px; margin-bottom: 6px; text-align: left; color: #dfe7ec;
}
.build-btn:hover { background: #374c60; }
.build-btn.on { border-color: #ffb300; background: rgba(255,179,0,0.12); }
.build-btn.locked { opacity: 0.45; cursor: not-allowed; }
.build-btn .bb-icon { font-size: 20px; }
.build-btn .bb-name { font-size: 13px; font-weight: 600; }
.build-btn .bb-cost { font-size: 11px; color: #ffd54f; font-variant-numeric: tabular-nums; }
.build-btn .bb-desc { font-size: 10.5px; color: #8ba0b0; line-height: 1.4; margin-top: 2px; }
.build-btn.demolish { background: rgba(229,57,53,0.15); border-color: rgba(229,57,53,0.4); }

/* ---------- V7R2 分区（标签页按钮 / 色块图例 / 规则提示） ---------- */
.build-btn .zone-chip {
  display: inline-block; width: 10px; height: 10px; margin-left: 6px;
  border: 1px solid rgba(255,255,255,0.35); vertical-align: 1px;
}
.zone-btn.on .zone-chip { border-color: #ffb300; box-shadow: 0 0 0 1px #ffb300; }
.zone-tip {
  margin: 4px 0 8px; padding: 7px 9px; font-size: 10.5px; line-height: 1.55;
  color: #9fb3c0; background: rgba(127,160,189,0.08);
  border: 1px dashed #3f5568; border-radius: 3px;
}
.zone-tip b { color: #cfe0ec; }

/* ---------- V7R2 演化气泡（升级/衰败飘签 + 过渡动画） ---------- */
#bubble-layer { position: absolute; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.evo-bubble {
  position: absolute; display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 7px; border-radius: 3px; white-space: nowrap;
  font-size: 12px; font-weight: 700; letter-spacing: 0.4px;
  background: rgba(24,34,44,0.92); box-shadow: 2px 2px 0 rgba(0,0,0,0.45), 0 4px 14px rgba(0,0,0,0.35);
  transform: translateY(0) scale(1); opacity: 1;
  transition: transform 0.55s ease-out, opacity 0.55s ease-in;
  animation: evo-pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.evo-bubble.up { border: 1px solid rgba(111,206,127,0.65); color: #baf0c2; }
.evo-bubble.down { border: 1px solid rgba(239,125,138,0.65); color: #ffc4cb; }
.evo-bubble .evo-icon { font-size: 14px; }
.evo-bubble .evo-text { font-weight: 600; }
.evo-bubble.out { transform: translateY(-26px) scale(0.94); opacity: 0; }
@keyframes evo-pop {
  0% { transform: scale(0.4) translateY(8px); opacity: 0; }
  60% { transform: scale(1.12) translateY(-2px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
#build-tip { padding: 8px; font-size: 11px; color: #71879a; border-top: 1px solid #35485a; line-height: 1.5; }

/* ---------- 地图悬停提示（V5.3） ----------
 * 鼠标掠过建筑/道路即显名，复古像素小卡片：细边框+硬阴影，无圆角堆叠感 */
#map-tip {
  position: fixed; z-index: 60; pointer-events: none;
  background: rgba(24,34,44,0.94); border: 1px solid #7ba0bd;
  border-radius: 3px; padding: 4px 9px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.5px; color: #eaf2f8;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.45), 0 4px 14px rgba(0,0,0,0.35);
  white-space: nowrap; line-height: 1.5;
}
#map-tip .tip-flag {
  margin-left: 7px; font-style: normal; font-size: 10.5px; font-weight: 700;
  padding: 1px 5px; border-radius: 2px; vertical-align: 1px;
}
#map-tip .tip-flag.warn { background: rgba(255,179,0,0.18); color: #ffcc66; border: 1px solid rgba(255,179,0,0.35); }
#map-tip .tip-flag.bad { background: rgba(229,57,53,0.20); color: #ff9e94; border: 1px solid rgba(229,57,53,0.40); }

/* ---------- 分区生长诊断浮层 ---------- */
#zone-diag {
  position: fixed; z-index: 61; pointer-events: none;
  width: 268px; background: rgba(20,30,40,0.96); border: 1px solid #4a6377;
  border-radius: 5px; padding: 0 0 8px;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.42), 0 6px 20px rgba(0,0,0,0.4);
  font-size: 12.5px; color: #dfe7ec; line-height: 1.45;
}
#zone-diag .zd-head {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 11px; border-bottom: 1px solid #35485a; border-left: 3px solid #888;
  background: rgba(255,255,255,0.04);
}
#zone-diag .zd-chip { width: 11px; height: 11px; border-radius: 2px; flex: 0 0 auto; }
#zone-diag .zd-head b { font-size: 14px; font-weight: 700; letter-spacing: 0.5px; }
#zone-diag .zd-sub { margin-left: auto; font-size: 11px; color: #8aa0b2; }
#zone-diag .zd-list { padding: 6px 11px 2px; }
#zone-diag .zd-row { display: flex; align-items: baseline; gap: 7px; padding: 2px 0; }
#zone-diag .zd-mark { flex: 0 0 auto; font-weight: 700; width: 13px; text-align: center; }
#zone-diag .zd-row.ok .zd-mark { color: #6fce7f; }
#zone-diag .zd-row.bad .zd-mark { color: #ff8a80; }
#zone-diag .zd-label { flex: 0 0 auto; color: #cdd9e2; }
#zone-diag .zd-row.bad .zd-label { color: #ffb0a8; }
#zone-diag .zd-detail { margin-left: auto; font-size: 11px; color: #8aa0b2; text-align: right; }
#zone-diag .zd-foot {
  margin: 5px 11px 0; padding: 6px 9px; border-radius: 3px; font-size: 11.5px; font-weight: 600;
}
#zone-diag .zd-foot.ok { background: rgba(111,206,127,0.14); color: #8fe0a0; border: 1px solid rgba(111,206,127,0.35); }
#zone-diag .zd-foot.bad { background: rgba(255,138,128,0.12); color: #ffb0a8; border: 1px solid rgba(255,138,128,0.32); }

/* ---------- 画布 ---------- */
#stage { position: relative; overflow: hidden; background: #2b3a42; }
#cv { width: 100%; height: 100%; display: block; cursor: crosshair; }
#zoom-ctl { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: row; align-items: flex-end; gap: 6px; }
.zoom-col { display: flex; flex-direction: column; gap: 6px; align-items: center; }
/* V6.1：缩放倍率百分比标签（TW=64 母版 = 100%） */
#zoom-label {
  min-width: 34px; padding: 2px 4px; background: rgba(34,48,60,0.85); color: #dfe7ec;
  border: 1px solid #5a7a94; border-radius: 0; box-shadow: 2px 2px 0 rgba(0,0,0,0.35);
  font: 11px/1.2 "Consolas", "Menlo", monospace; text-align: center; letter-spacing: -0.2px;
  box-sizing: border-box; user-select: none; pointer-events: none;
}
/* V5.3：像素化控件 —— 直角 + 硬阴影，按下位移 1px（8-bit 按键感） */
#zoom-ctl button {
  width: 34px; height: 34px; background: rgba(34,48,60,0.85); color: #dfe7ec; font-size: 16px;
  border: 1px solid #5a7a94; border-radius: 0; box-shadow: 2px 2px 0 rgba(0,0,0,0.35);
}
#zoom-ctl button:hover { background: #35485a; }
#zoom-ctl button:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 rgba(0,0,0,0.35); }
/* 竖直滚轮（地图上下滚动） */
#vscroll { position: relative; width: 12px; height: 126px; background: rgba(34,48,60,0.85); border: 1px solid #5a7a94; border-radius: 0; box-sizing: border-box; touch-action: none; }
#vscroll-thumb { position: absolute; left: 2px; right: 2px; top: 2px; height: 40px; background: #6f93ac; border-radius: 0; cursor: grab; }
#vscroll-thumb:hover { background: #8fb0c7; }
#vscroll-thumb.drag { background: #b3cede; cursor: grabbing; }
#vscroll.off { opacity: 0.35; pointer-events: none; }
/* 横向滚轮（地图左右滚动）——与竖轨构成 L 形双滚动条 */
.scroll-col { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
#hscroll { position: relative; width: 126px; height: 12px; background: rgba(34,48,60,0.85); border: 1px solid #5a7a94; border-radius: 0; box-sizing: border-box; touch-action: none; }
#hscroll-thumb { position: absolute; top: 2px; bottom: 2px; left: 2px; width: 40px; background: #6f93ac; border-radius: 0; cursor: grab; }
#hscroll-thumb:hover { background: #8fb0c7; }
#hscroll-thumb.drag { background: #b3cede; cursor: grabbing; }
#hscroll.off { opacity: 0.35; pointer-events: none; }

/* ---------- 右侧秘书栏 ---------- */
#side-panel { background: #22303c; border-left: 1px solid #35485a; overflow-y: auto; padding-bottom: 10px; }
.panel-head { padding: 10px 12px 6px; font-size: 13px; font-weight: 700; color: #b0c4d0; border-bottom: 1px solid #35485a; position: sticky; top: 0; background: #22303c; }
.msg { margin: 8px 10px; padding: 8px 10px; border-radius: 0; font-size: 12px; line-height: 1.55; border-left: 3px solid #46607a; background: rgba(255,255,255,0.04); }
.msg .msg-title { font-weight: 700; margin-bottom: 3px; font-size: 12.5px; }
.msg .msg-time { color: #71879a; font-size: 10.5px; margin-top: 4px; }
.msg.crit { border-left-color: #ff5252; background: rgba(255,82,82,0.08); }
.msg.warn { border-left-color: #ffb300; background: rgba(255,179,0,0.07); }
.msg.tip { border-left-color: #42a5f5; }
.msg.report { border-left-color: #66bb6a; }
.msg.event { border-left-color: #ab47bc; }
#detail-box { padding: 10px 12px; font-size: 12.5px; line-height: 1.7; }
#detail-box .dt-row { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px dashed #35485a; }
#detail-box .dt-row span:last-child { color: #ffd54f; }
/* V7 升级第 2 轮：建筑详情面板「升级重建」按钮 */
#detail-box .dt-btn {
  display: block; width: 100%; margin-top: 10px; padding: 8px 10px;
  background: #ff9800; color: #222; font-size: 13px; font-weight: 700;
  border: none; border-radius: 3px; cursor: pointer; text-align: center;
}
#detail-box .dt-btn:hover { filter: brightness(1.08); }
#detail-box .dt-btn .dt-cost { margin-left: 6px; font-variant-numeric: tabular-nums; }
#detail-box .dt-btn.disabled { background: #5a4a3a; color: #b9a890; cursor: not-allowed; }
#detail-box .dt-hint { margin-top: 4px; font-size: 11px; color: #ff8a65; }

/* ---------- 底部税条 ---------- */
#tax-bar {
  display: flex; align-items: center; gap: 16px; padding: 0 12px;
  background: #22303c; border-top: 1px solid #35485a;
}
.tax-group { display: flex; align-items: center; gap: 8px; font-size: 13px; }
/* V7.4.4：税条标签字号调小 + 禁止换行，防止「居民税/企业税」被挤成竖排 */
.tax-group label { font-size: 12px; white-space: nowrap; flex-shrink: 0; }
.tax-group input[type=range] { width: 96px; accent-color: #ffb300; }
.tax-warn { font-size: 11px; color: #ff8a65; min-width: 56px; }
/* V7.4.1：视图控制组（热力图图层/服务覆盖/污染/日夜），从顶部右栏移入税条 */
.view-group { display: flex; align-items: center; gap: 10px; }
.view-group select {
  background: #2c3e4e; color: #dfe7ec; font-size: 12px;
  border: 1px solid #4a6377; padding: 2px 4px; border-radius: 0;
}
.speed-group { margin-left: auto; display: flex; gap: 6px; }
/* V7.4.2：系统按钮组（💾存/📤导/📥入/🚪退），从顶部右栏移入税条最右，样式沿用原顶部按钮 */
.sys-group { display: flex; gap: 6px; align-items: center; margin-left: 8px; }
.sys-group button {
  background: #35485a; color: #dfe7ec; padding: 5px 8px; font-size: 13px;
  border-radius: 0; border: 1px solid #4a6377; box-shadow: 2px 2px 0 rgba(0,0,0,0.28);
}
.sys-group button:hover { background: #46607a; }
.sys-group button:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 rgba(0,0,0,0.28); }
.spd {
  background: #2c3e4e; color: #b0c4d0; padding: 6px 10px; font-size: 13px;
  border-radius: 0; border: 1px solid #3d5468; box-shadow: 2px 2px 0 rgba(0,0,0,0.28);
}
.spd:hover { background: #374c60; }
.spd.on { background: #ffb300; color: #222; font-weight: 700; border-color: #ffb300; }
.spd:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 rgba(0,0,0,0.28); }

/* ---------- 弹窗 ---------- */
.modal { position: fixed; inset: 0; z-index: 90; background: rgba(10,16,22,0.72); display: flex; align-items: center; justify-content: center; }
.modal-box {
  width: min(480px, 92vw); background: #22303c; border: 1px solid #5a7a94; border-radius: 0;
  padding: 24px 28px; box-shadow: 6px 6px 0 rgba(0,0,0,0.5);
}
.modal-box.wide { width: min(720px, 94vw); }
.modal-box h2 { font-size: 20px; margin-bottom: 14px; }
#rep-body { font-size: 13.5px; line-height: 2; color: #c8d6e0; }
#rep-body b { color: #ffd54f; }
.rep-mute { display: block; margin: 12px 0 0; color: #9fb3c0; font-size: 12px; cursor: pointer; }
.rep-alerts { margin-top: 10px; padding: 8px 12px; background: rgba(255,138,101,0.10); border: 1px solid rgba(255,138,101,0.45); border-radius: 0; }
.rep-alerts div { margin: 4px 0; color: #ffccbc; }
.modal-box button {
  margin-top: 16px; background: #ffb300; color: #222; font-weight: 700;
  padding: 9px 30px; font-size: 14px; border-radius: 0; border: 1px solid #c78e00;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.35);
}
.modal-box button:hover { filter: brightness(1.1); }
.modal-box button:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 rgba(0,0,0,0.35); }

/* ---------- V9.8 第4轮 · 年度评级徽章（顶栏）与年报弹窗 ---------- */
.stat-grade { font-weight: 700; border-left: 3px solid #5a7a94; }
.g-S { color: #ffd54f; }            /* 金：典范之城 */
.g-A { color: #8be38b; }            /* 绿：优良 */
.g-B { color: #7ee0ff; }            /* 青：合格 */
.g-C { color: #ffb74d; }            /* 橙：堪忧 */
.g-D { color: #ef5350; }            /* 红：危城 */
.stat-grade.g-S { border-left-color: #ffd54f; }
.stat-grade.g-A { border-left-color: #8be38b; }
.stat-grade.g-B { border-left-color: #7ee0ff; }
.stat-grade.g-C { border-left-color: #ffb74d; }
.stat-grade.g-D { border-left-color: #ef5350; }
.ar-grade { font-weight: 800; padding: 1px 9px; border: 1px solid currentColor; }
.ar-breakdown { margin: 14px 0 6px; }
.ar-row { display: flex; align-items: center; gap: 10px; margin: 7px 0; font-size: 13px; }
.ar-dt { flex: none; width: 150px; color: #c8d6e0; }
.ar-bar { flex: 1; height: 10px; background: #2c3e4e; border: 1px solid #3d5468; overflow: hidden; }
.ar-fill { display: block; height: 100%; background: #7ee0ff; transition: width .3s ease; }
.ar-fill.g-S { background: #ffd54f; }
.ar-fill.g-A { background: #8be38b; }
.ar-fill.g-B { background: #7ee0ff; }
.ar-fill.g-C { background: #ffb74d; }
.ar-fill.g-D { background: #ef5350; }
.ar-v { flex: none; width: 56px; text-align: right; color: #ffd54f; font-variant-numeric: tabular-nums; }
.ar-prev { color: #9fb3c0; font-size: 12px; }
.ar-warn { margin-top: 8px; padding: 7px 11px; background: rgba(239,83,80,0.12); border: 1px solid rgba(239,83,80,0.5); color: #ff8a80; font-size: 12.5px; line-height: 1.6; }

/* ---------- 科技树 ---------- */
/* V7R7：弹窗整体限高 + 纵向 flex ⇒ 网格区独占剩余高度并内部滚动，
 * 底部科技不再被屏幕裁切（外层 max-height 兜底、内层 overflow-y:auto 出滚动条）。
 * 网格改 auto-fill 多列 ⇒ 同屏可见科技项更多。 */
#modal-tech .modal-box {
  width: min(880px, 94vw); max-height: 88vh;
  display: flex; flex-direction: column; padding: 18px 22px;
}
#modal-tech .modal-box h2 { flex: none; margin-bottom: 10px; }
#modal-tech .tech-head { flex: none; }
#modal-tech .tech-note { flex: none; margin-bottom: 10px; }
#modal-tech #tech-close { flex: none; align-self: flex-start; margin-top: 12px; }
.tech-head { display: flex; gap: 18px; font-size: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.tech-head b { color: #7ee0ff; }
.edu-progress { flex-basis: 100%; height: 8px; background: #2c3e4e; border-radius: 4px; overflow: hidden; }
#edu-bar { height: 100%; width: 0; background: linear-gradient(90deg, #42a5f5, #7ee0ff); transition: width .3s; }
.tech-note { font-size: 12px; color: #8ba0b0; margin-bottom: 14px; line-height: 1.6; }
#tech-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px;
  flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px;
}
.tech-card { background: #2c3e4e; border: 1px solid #3d5468; border-radius: 10px; padding: 10px; }
.tech-card.done { border-color: #66bb6a; background: rgba(102,187,78,0.10); }
.tech-card.avail { border-color: #ffb300; cursor: pointer; }
.tech-card.avail:hover { background: rgba(255,179,0,0.12); }
.tech-card.reserved { border-style: dashed; border-color: #4a5b6b; background: rgba(40,52,64,0.55); opacity: 0.72; cursor: default; }
.tech-card.reserved .tc-name { color: #8fa3b3; }
.tech-card.reserved .tc-desc { color: #7d8f9c; }
.tech-card.reserved .tc-state { color: #9e9e9e; }
.tech-card .tc-name { font-weight: 700; font-size: 14px; }
.tech-card .tc-branch { font-size: 11px; color: #7ee0ff; background: rgba(126,224,255,0.12); border-radius: 4px; padding: 1px 5px; margin-left: 6px; }
.tech-card .tc-desc { font-size: 12px; color: #9fb3c0; margin: 5px 0; line-height: 1.4; }
.tech-card .tc-req { font-size: 11px; color: #ffab91; margin: 4px 0; }
.tech-card .tc-cost { font-size: 12px; color: #ffd54f; }
.tech-card .tc-state { font-size: 11px; margin-top: 4px; }
.tech-card.done .tc-state { color: #81c784; }

/* ---------- V9.2 第2轮：科技树五层分组（层头 + 层级徽标） ---------- */
#tech-grid .tier-head {
  grid-column: 1 / -1;
  display: flex; align-items: baseline; gap: 12px;
  margin-top: 6px; padding: 7px 10px;
  border-radius: 8px; border-left: 3px solid #5d7a92;
  background: rgba(44, 62, 78, 0.65);
}
#tech-grid .tier-head:first-child { margin-top: 0; }
#tech-grid .tier-head .tier-name { font-weight: 700; font-size: 13px; color: #cfe3f2; letter-spacing: 1px; }
#tech-grid .tier-head .tier-gate { font-size: 11px; color: #8ba0b0; }
#tech-grid .tier-head.open { border-left-color: #ffb300; background: rgba(255, 179, 0, 0.08); }
#tech-grid .tier-head.open .tier-gate { color: #ffd54f; }
#tech-grid .tier-head.locked { opacity: 0.85; }
#tech-grid .tier-head.locked .tier-gate { color: #ffab91; }
.tech-card .tc-tier {
  font-size: 10px; font-weight: 700; color: #ffd54f;
  background: rgba(255, 179, 0, 0.14); border: 1px solid rgba(255, 179, 0, 0.35);
  border-radius: 4px; padding: 0 4px; margin-left: 6px; vertical-align: 1px;
}
.tech-card.reserved .tc-tier { color: #8fa3b3; background: rgba(143, 163, 179, 0.12); border-color: rgba(143, 163, 179, 0.3); }

/* ---------- V7R7：HUD 悬停提示气泡（公式明细，替代平铺 title） ---------- */
#hud-tip {
  position: fixed; z-index: 130; max-width: 300px; padding: 7px 10px;
  background: rgba(16,24,32,0.96); border: 1px solid #5a7a94; border-radius: 0;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.45);
  font-size: 12px; line-height: 1.55; color: #cfe0ea;
  white-space: pre-line; pointer-events: none; visibility: hidden;
}
#hud-tip.show { visibility: visible; }
#hud-tip b { color: #ffd54f; }

/* ---------- 滚动条（V7R7：半透明圆角灰条，深色主题不突兀） ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: rgba(159,179,192,0.40); border-radius: 6px;
  border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(159,179,192,0.65); background-clip: content-box; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); border-radius: 6px; }

/* ============ V7R4：热力图图例（pointer-events:none ⇒ 永不干扰建造/拖拽） ============ */
#heat-legend {
  position: absolute; left: 12px; bottom: 12px; z-index: 20;
  pointer-events: none;                       /* 纯展示：不吃任何鼠标事件 */
  width: 208px; padding: 8px 10px;
  background: rgba(16,24,32,0.88); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 0; box-shadow: 2px 2px 0 rgba(0,0,0,0.4);
  font-size: 11px; color: #cfe0ea;
}
#heat-legend .hl-title { font-weight: 700; font-size: 12px; color: #ffd54f; margin-bottom: 6px; }
#heat-legend .hl-bar { height: 8px; border: 1px solid rgba(0,0,0,0.5); }
#heat-legend .hl-scale { display: flex; justify-content: space-between; color: #9fb3c0; margin-top: 3px; font-variant-numeric: tabular-nums; }
#heat-legend .hl-hint { margin-top: 5px; color: #8ba0b0; line-height: 1.45; }

/* V8.8 第1轮：顶栏全局热力图图例（复用 heat-legend 视觉，定位左上避免与右下 heat-legend 重叠） */
#globalmap-legend {
  position: absolute; left: 12px; top: 60px; z-index: 20;
  pointer-events: none;
  width: 220px; padding: 8px 10px;
  background: rgba(16,24,32,0.88); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 0; box-shadow: 2px 2px 0 rgba(0,0,0,0.4);
  font-size: 11px; color: #cfe0ea;
}
#globalmap-legend .hl-title { font-weight: 700; font-size: 12px; color: #ffd54f; margin-bottom: 6px; }
#globalmap-legend .hl-hint { margin-top: 5px; color: #8ba0b0; line-height: 1.45; }

/* ============ V7R4：市长评价面板 ============ */
.mayor-note { font-size: 11px; color: #8ba0b0; margin: 10px 0 12px; line-height: 1.5; }
.mayor-sep { font-size: 12px; font-weight: 700; color: #7ee0ff; margin: 12px 0 6px; border-top: 1px dashed rgba(126,224,255,0.3); padding-top: 10px; }
.mayor-total { text-align: center; margin: 4px 0 12px; }
.mayor-grade { font-size: 22px; font-weight: 800; margin-right: 8px; }
.mayor-score { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mayor-unit { font-size: 12px; color: #8ba0b0; }
.mayor-row { display: flex; align-items: center; gap: 8px; margin: 5px 0; }
.mayor-row .mr-label { width: 88px; font-size: 12px; color: #cfe0ea; flex: none; }
.mayor-row .mr-label.sub { color: #8ba0b0; padding-left: 10px; }
.mayor-row .mr-bar { flex: 1; height: 10px; background: rgba(255,255,255,0.08); border: 1px solid rgba(0,0,0,0.4); }
.mayor-row .mr-bar > i { display: block; height: 100%; }
.mayor-row .mr-val { width: 40px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; flex: none; }

/* ============ V7R4：里程碑故事弹窗 ============ */
.ms-unlock { margin: 10px 0 12px; font-size: 12.5px; color: #ffd54f; }
#ms-story { line-height: 1.7; color: #cfe0ea; margin-bottom: 10px; }

/* ============ V7R4 / V8.6：随机事件选项 ============ */
.ev-choice { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; margin: 6px 0; }
.ev-choice .bb-icon { flex: none; }
/* V8.6：资金不足 ⇒ 置灰（仿 .build-btn.locked 但更明显，并截断点击） */
.ev-choice.ev-disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.7); border-style: dashed; }
.ev-choice.ev-disabled:hover { background: #2b3a49; }
#ev-desc { line-height: 1.7; color: #cfe0ea; margin-bottom: 10px; }
#ev-choices { max-height: 46vh; overflow-y: auto; }

/* ============ V7 升级第 2 轮：解锁引导浮层（非阻塞、可关闭、不挡建造） ============ */
#unlock-toast {
  position: fixed; left: 50%; top: 64px; transform: translateX(-50%);
  z-index: 80; max-width: 460px; width: max-content;
  background: rgba(34,48,60,0.97); border: 1px solid #ffb300;
  border-radius: 6px; padding: 10px 36px 10px 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45); pointer-events: auto;
}
#unlock-toast .ut-head { font-size: 13px; font-weight: 700; color: #ffd54f; margin-bottom: 3px; }
#unlock-toast .ut-body { font-size: 12px; color: #dfe7ec; line-height: 1.5; }
#unlock-toast .ut-close {
  position: absolute; right: 8px; top: 6px; width: 22px; height: 22px;
  background: transparent; border: none; color: #9fb3c0; font-size: 14px; cursor: pointer;
}
#unlock-toast .ut-close:hover { color: #fff; }