:root {
  --bg: #080c0a;
  --panel: rgba(13, 19, 16, 0.88);
  --panel-solid: #0e1512;
  --panel-2: rgba(22, 30, 25, 0.9);
  --gold: #d8b878;
  --gold-bright: #f2d9a3;
  --gold-dim: rgba(216, 184, 120, 0.35);
  --line: rgba(216, 184, 120, 0.22);
  --line-soft: rgba(216, 184, 120, 0.1);
  --text: #e9e2d1;
  --muted: #9a9382;
  --faint: #6c675a;
  --blue: #6ea8ff;
  --red: #ff6f5e;
  --green: #79c98a;
  --font-ui: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-title: "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
}

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

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

#game {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: block;
  outline: none;
}

#overlay {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 2;
}

.hidden { display: none !important; }

/* ============ 通用 ============ */

.kbd {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  margin-right: 4px;
  border: 1px solid var(--line);
  border-bottom-color: rgba(216, 184, 120, 0.4);
  border-radius: 3px;
  background: rgba(216, 184, 120, 0.06);
  color: var(--gold);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-align: center;
  line-height: 16px;
}

.screen {
  position: fixed; inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 42%, rgba(24, 34, 27, 0.55), rgba(4, 7, 5, 0.96) 68%);
  backdrop-filter: blur(4px);
}

/* ============ HUD ============ */

#hud {
  position: fixed; inset: 0;
  z-index: 10;
  pointer-events: none;
}

#topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: linear-gradient(180deg, rgba(4, 8, 6, 0.94) 0%, rgba(4, 8, 6, 0.6) 58%, rgba(4, 8, 6, 0) 100%);
  pointer-events: none;
}

.tb-left { display: flex; align-items: center; gap: 12px; min-width: 220px; }

.crest {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  font-family: var(--font-title);
  font-size: 19px;
  color: var(--gold-bright);
  border: 1px solid var(--gold-dim);
  background: rgba(18, 26, 21, 0.85);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  box-shadow: 0 0 20px rgba(216, 184, 120, 0.08);
}

.gold-line {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  color: var(--gold-bright);
  line-height: 1.05;
}
.gold-icon { font-size: 15px; color: var(--gold); }
.gold-income {
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--green);
  opacity: 0.85;
}

.tb-center {
  position: absolute;
  left: 50%; top: 8px;
  transform: translateX(-50%);
  text-align: center;
}
#timer {
  font-size: 23px;
  font-weight: 500;
  letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
  color: #f8f1df;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9);
}
#phase {
  margin-top: -3px;
  font-size: 9px;
  letter-spacing: 4px;
  padding-left: 4px;
  color: var(--gold);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

.tb-right { display: flex; gap: 24px; justify-content: flex-end; min-width: 220px; }
.tb-stat { text-align: right; }
.tb-stat span {
  display: block;
  font-size: 20px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: #f8f1df;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}
.tb-stat span i {
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  color: #8f8877;
}
.tb-stat small {
  font-size: 9px;
  letter-spacing: 2px;
  color: #bcb4a2;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

/* ============ 小地图 ============ */

#minimap-panel {
  position: absolute;
  left: 18px; bottom: 18px;
  width: 172px;
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  pointer-events: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.mm-head {
  display: flex; justify-content: space-between;
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--muted);
  padding: 0 2px 6px;
}
.mm-head span:last-child { color: var(--gold); font-variant-numeric: tabular-nums; }
#minimap {
  width: 154px; height: 154px;
  display: block;
  border: 1px solid rgba(216, 184, 120, 0.14);
  background: #141c17;
  cursor: pointer;
}
.mm-foot {
  padding-top: 5px;
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--faint);
  text-align: center;
}

/* ============ 指令栏 ============ */

#dock {
  position: absolute;
  left: 50%; bottom: 16px;
  transform: translateX(-50%);
  width: min(900px, calc(100vw - 400px));
  min-width: 620px;
  min-height: 132px;
  background:
    linear-gradient(180deg, rgba(22, 30, 25, 0.92), rgba(9, 14, 11, 0.96));
  border: 1px solid var(--line);
  border-top-color: rgba(216, 184, 120, 0.38);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  padding: 12px 16px;
  pointer-events: auto;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}
#dock::before {
  content: "";
  position: absolute; left: 14px; right: 14px; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 184, 120, 0.55), transparent);
}

.panel-slot { display: contents; }

.dock-empty { padding: 16px 8px; text-align: center; }
.dock-title {
  font-size: 10px;
  letter-spacing: 5px;
  color: var(--gold);
  margin-bottom: 8px;
}
.dock-hint { font-size: 12px; color: var(--muted); line-height: 1.9; letter-spacing: 0.5px; }

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 4px 8px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 10px;
}
.panel-title {
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--gold-bright);
}
.panel-sub { font-size: 10px; letter-spacing: 1px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* 建造卡片 */

.build-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 8px;
}

.build-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px 7px;
  background: linear-gradient(180deg, rgba(38, 49, 40, 0.55), rgba(15, 22, 18, 0.8));
  border: 1px solid rgba(216, 184, 120, 0.16);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.14s, background 0.14s, transform 0.14s;
}
.build-card:hover:not(:disabled) {
  border-color: rgba(216, 184, 120, 0.65);
  background: linear-gradient(180deg, rgba(56, 68, 52, 0.7), rgba(18, 26, 20, 0.9));
  transform: translateY(-2px);
}
.build-card:disabled { opacity: 0.38; cursor: not-allowed; }
.b-icon {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  font-family: var(--font-title);
  font-size: 17px;
  color: var(--gold-bright);
  border: 1px solid rgba(216, 184, 120, 0.25);
  background: rgba(216, 184, 120, 0.06);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
}
.b-name { font-size: 11px; letter-spacing: 1px; margin-top: 2px; }
.b-cost {
  font-size: 9px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.b-cost::before { content: "◈ "; opacity: 0.7; }
.b-desc {
  font-size: 8px;
  color: var(--faint);
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.b-role {
  position: absolute;
  top: 3px; left: 4px;
  font-size: 7px;
  letter-spacing: 0.5px;
  color: var(--muted);
  opacity: 0.7;
}
.econ-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 18px;
  padding: 0 4px 8px;
  font-size: 9px;
  letter-spacing: 0.2px;
  color: var(--faint);
}
.b-limit {
  position: absolute;
  top: 3px; right: 4px;
  font-size: 8px;
  color: var(--red);
  letter-spacing: 0.5px;
}

/* 生产 */

.produce-row { display: flex; align-items: stretch; gap: 14px; }

.unit-portrait {
  width: 74px;
  min-height: 78px;
  display: grid;
  place-items: center;
  font-family: var(--font-title);
  font-size: 34px;
  color: var(--gold-bright);
  border: 1px solid rgba(216, 184, 120, 0.28);
  background:
    radial-gradient(circle at 50% 42%, rgba(216, 184, 120, 0.14), transparent 68%),
    rgba(9, 14, 11, 0.6);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}

.unit-info { flex: 1; min-width: 0; padding-top: 1px; }
.unit-name {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--text);
}
.unit-name .cost { font-size: 11px; color: var(--gold); font-variant-numeric: tabular-nums; }
.unit-stats { margin-top: 4px; font-size: 10px; letter-spacing: 0.5px; color: var(--muted); }
.unit-desc { margin-top: 3px; font-size: 10px; color: var(--faint); }
.queue-row { display: flex; align-items: center; gap: 5px; margin-top: 8px; }
.q-slot {
  width: 26px; height: 5px;
  background: rgba(216, 184, 120, 0.12);
  border: 1px solid rgba(216, 184, 120, 0.18);
  position: relative;
  overflow: hidden;
}
.q-slot i {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--gold);
  opacity: 0.8;
}
.q-label { font-size: 9px; letter-spacing: 1px; color: var(--faint); margin-left: 4px; }

.produce-btn {
  align-self: center;
  min-width: 104px;
  padding: 12px 18px;
  border: 1px solid rgba(242, 217, 163, 0.45);
  background: linear-gradient(180deg, rgba(216, 184, 120, 0.28), rgba(216, 184, 120, 0.08));
  color: var(--gold-bright);
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 4px;
  cursor: pointer;
  transition: all 0.15s;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
}
.produce-btn:hover:not(:disabled) { background: rgba(216, 184, 120, 0.32); border-color: var(--gold); }
.produce-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.rally-note {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--line-soft);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--faint);
}

.info-grid {
  display: flex;
  gap: 26px;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.5px;
  padding: 10px 4px;
}
.info-grid b { color: var(--text); font-weight: 500; }

/* 部队面板 */

.army-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.army-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 6px;
  border: 1px solid rgba(216, 184, 120, 0.18);
  background: rgba(216, 184, 120, 0.05);
  font-size: 11px;
  letter-spacing: 1px;
}
.army-chip .chip-icon {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  font-family: var(--font-title);
  font-size: 13px;
  color: var(--gold-bright);
  border: 1px solid rgba(216, 184, 120, 0.22);
}
.army-chip b { font-variant-numeric: tabular-nums; color: var(--text); }
.army-chip small { font-size: 9px; color: var(--faint); }

.army-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.army-note { flex: 1; font-size: 9px; line-height: 1.6; color: var(--faint); letter-spacing: 0.3px; }

.mini-btn {
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: rgba(216, 184, 120, 0.08);
  color: var(--gold-bright);
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.15s;
}
.mini-btn:hover { background: rgba(216, 184, 120, 0.2); border-color: rgba(216, 184, 120, 0.55); }

/* ============ 提示 ============ */

#keyhints {
  position: absolute;
  right: 18px; bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  padding: 10px 14px;
  background: rgba(8, 12, 10, 0.6);
  border-right: 1px solid var(--line);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--faint);
  pointer-events: none;
}
#keyhints b { color: var(--muted); font-weight: 500; margin-right: 4px; }

#banner {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -8px);
  text-align: center;
  opacity: 0;
  transition: opacity 0.35s, transform 0.35s;
  pointer-events: none;
}
#banner.show { opacity: 1; transform: translate(-50%, 0); }
.banner-title {
  font-family: var(--font-title);
  font-size: 28px;
  letter-spacing: 8px;
  padding-left: 8px;
  color: var(--gold-bright);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.85), 0 0 30px rgba(216, 184, 120, 0.25);
}
.banner-sub {
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--muted);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

#placement-bar {
  position: absolute;
  bottom: 168px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text);
  pointer-events: none;
  white-space: nowrap;
}
#placement-bar .kbd { font-size: 9px; }

#select-box {
  position: fixed;
  z-index: 3;
  border: 1px solid rgba(216, 184, 120, 0.75);
  background: rgba(216, 184, 120, 0.09);
  box-shadow: inset 0 0 20px rgba(216, 184, 120, 0.06);
  pointer-events: none;
}

#alert-vignette {
  position: fixed; inset: 0;
  z-index: 4;
  pointer-events: none;
  box-shadow: inset 0 0 140px rgba(200, 40, 30, 0.55);
  opacity: 0;
  transition: opacity 0.5s;
}
#alert-vignette.on { opacity: 1; transition: opacity 0.08s; }

/* ============ 响应式 ============ */

@media (max-width: 1100px) {
  #dock { width: calc(100vw - 32px); min-width: 0; bottom: 10px; }
  #minimap-panel { display: none; }
  #keyhints { display: none; }
}

@media (max-height: 760px) {
  .title { font-size: 64px; }
  .tagline { margin: 10px 0 14px; }
  .menu-content { padding: 14px 36px; }
  .controls-strip { margin-top: 14px; }
}

body.placing #game { cursor: crosshair; }

/* 自动生产 / 升级 / 经济行 */
.mini-btn.active {
  border-color: rgba(216, 184, 120, 0.7);
  background: rgba(216, 184, 120, 0.22);
  color: var(--gold-bright);
}
.mini-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.produce-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: center;
  min-width: 112px;
}
.produce-actions .produce-btn { min-width: 112px; padding: 10px 12px; font-size: 12px; }
.produce-actions .mini-btn { padding: 5px 10px; font-size: 9px; letter-spacing: 1px; }

.econ-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 0 4px 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.3px;
}
.econ-item b { color: var(--gold-bright); font-weight: 600; font-variant-numeric: tabular-nums; }
.econ-row .mini-btn { margin-left: auto; padding: 4px 10px; font-size: 9px; letter-spacing: 1px; }

/* 主堡/基地：压缩成一行资源 + 一行操作，把空间留给建造卡 */
.hq-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 0 4px 7px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.2px;
}
.hq-stats b { color: var(--gold-bright); font-weight: 600; font-variant-numeric: tabular-nums; }
.hq-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 4px 8px;
  border-bottom: 1px solid var(--line-soft);
}
.hq-actions .mini-btn { flex: 1 1 auto; padding: 5px 8px; font-size: 9px; letter-spacing: 0.5px; }
.hq-actions .upgrade-btn { flex: 1.4 1 auto; min-width: 0; }
#dock.dock-hidden { display: none; }
.idle-hint { padding: 8px 4px; }
.idle-hint .dock-hint { line-height: 1.6; }

.upgrade-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--line-soft);
}
.upgrade-note { font-size: 9px; letter-spacing: 0.3px; color: var(--faint); }
.upgrade-btn { min-width: 158px; font-size: 9px; padding: 5px 10px; letter-spacing: 1px; }

/* ============ 触屏右侧快捷操作 / 部队紧凑条 ============ */
#action-rail { display: none; }
.army-compact {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 4px;
  min-width: 0;
}
.army-compact-count {
  display: flex;
  align-items: baseline;
  gap: 3px;
  flex: none;
}
.army-compact-count b {
  font-family: var(--font-title);
  font-size: 22px;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}
.army-compact-count span {
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--muted);
}
.army-compact .army-chips {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.army-compact .army-chips::-webkit-scrollbar { display: none; }

/* ============ 视觉精修 v2：墨/铜/纸 ============ */
:root {
  --panel: rgba(15, 20, 16, 0.82);
  --panel-solid: #0f1511;
  --panel-2: rgba(27, 33, 26, 0.9);
  --gold: #c9a86a;
  --gold-bright: #f0d8a8;
  --gold-dim: rgba(201, 168, 106, 0.3);
  --line: rgba(201, 168, 106, 0.26);
  --line-soft: rgba(201, 168, 106, 0.1);
  --text: #efe7d6;
  --muted: #b4a88e;
  --faint: #8c8069;
  --jade: #6fc39a;
  --vermilion: #cf5f4d;
}

#stage-vignette {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 44%, transparent 46%, rgba(2, 5, 3, 0.3) 100%),
    linear-gradient(180deg, rgba(2, 5, 3, 0.18), transparent 18%, transparent 82%, rgba(2, 5, 3, 0.22));
}

#dock {
  background:
    linear-gradient(180deg, rgba(255, 236, 200, 0.045), transparent 16%),
    linear-gradient(180deg, rgba(24, 30, 24, 0.94), rgba(9, 13, 10, 0.97));
  border-color: rgba(201, 168, 106, 0.3);
  box-shadow:
    0 20px 54px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 236, 200, 0.08);
  backdrop-filter: blur(7px);
}

.panel-head {
  border-bottom-color: rgba(201, 168, 106, 0.16);
}
.panel-title {
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--gold-bright);
}
.panel-sub {
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--muted);
}

.hq-stats {
  color: var(--muted);
  font-size: 10px;
}
.hq-stats span + span {
  padding-left: 12px;
  border-left: 1px solid rgba(201, 168, 106, 0.14);
}
.hq-stats b { color: var(--gold-bright); }

.build-card {
  background:
    linear-gradient(180deg, rgba(255, 236, 200, 0.035), transparent 45%),
    linear-gradient(180deg, rgba(38, 46, 36, 0.66), rgba(13, 18, 14, 0.9));
  border-color: rgba(201, 168, 106, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 236, 200, 0.04);
}
.build-card:hover:not(:disabled) {
  border-color: rgba(240, 216, 168, 0.62);
  background:
    linear-gradient(180deg, rgba(255, 236, 200, 0.07), transparent 45%),
    linear-gradient(180deg, rgba(55, 65, 49, 0.78), rgba(17, 23, 18, 0.94));
}
.build-card:disabled {
  opacity: 0.52;
  filter: saturate(0.6);
}
.b-icon {
  border-color: rgba(201, 168, 106, 0.3);
  background: rgba(201, 168, 106, 0.08);
  color: var(--gold-bright);
}
.b-name { color: var(--text); letter-spacing: 0.5px; }
.b-cost { color: var(--gold); }

.mini-btn {
  background: rgba(201, 168, 106, 0.06);
  border: 1px solid rgba(201, 168, 106, 0.2);
  color: var(--text);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.mini-btn:hover { background: rgba(201, 168, 106, 0.14); border-color: rgba(201, 168, 106, 0.45); }
.mini-btn.active { background: rgba(111, 195, 154, 0.14); border-color: rgba(111, 195, 154, 0.45); color: #c9f0dc; }
.mini-btn:disabled { opacity: 0.4; filter: saturate(0.5); }

.upgrade-btn, .produce-btn {
  background: linear-gradient(180deg, #e0c187, #ab864c);
  border: 1px solid #f0d8a8;
  color: #17120b;
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 2px 10px rgba(0, 0, 0, 0.32);
}
.upgrade-btn:hover, .produce-btn:hover {
  background: linear-gradient(180deg, #efd29a, #bf9958);
  border-color: #ffe9bf;
  color: #120e08;
}
.upgrade-btn:disabled, .produce-btn:disabled {
  background: rgba(201, 168, 106, 0.1);
  border-color: rgba(201, 168, 106, 0.18);
  color: var(--faint);
  box-shadow: none;
  opacity: 0.7;
}

#topbar {
  background: linear-gradient(180deg, rgba(3, 6, 4, 0.96) 0%, rgba(3, 6, 4, 0.68) 62%, transparent 100%);
  box-shadow: 0 1px 0 rgba(201, 168, 106, 0.12);
}
.gold-income { color: var(--jade); opacity: 0.95; }
.tb-stat small { color: var(--muted); letter-spacing: 1px; }
.tb-stat span { color: #f7efdd; }
.tb-right { gap: 20px; }

#minimap-panel {
  background:
    linear-gradient(180deg, rgba(255, 236, 200, 0.04), transparent 18%),
    linear-gradient(180deg, rgba(20, 26, 21, 0.94), rgba(8, 12, 9, 0.97));
  border-color: rgba(201, 168, 106, 0.3);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
}
.mm-head { color: var(--muted); }
.mm-head span:last-child { color: var(--gold); }
#minimap { border-color: rgba(201, 168, 106, 0.2); }
.mm-foot { color: var(--faint); }

.army-compact-count b { color: var(--gold-bright); }
.army-chip {
  background: rgba(201, 168, 106, 0.055);
  border-color: rgba(201, 168, 106, 0.18);
}
.army-chip b { color: var(--gold-bright); }

/* ============ 审计落地：边界/层级/字号 ============ */
:root {
  --line: rgba(212, 175, 110, 0.42);
  --line-soft: rgba(212, 175, 110, 0.12);
}
#dock {
  clip-path: none;
  border-radius: 2px;
}
#dock::after {
  content: "";
  position: absolute;
  inset: 3px;
  pointer-events: none;
  border: 1px solid rgba(255, 236, 196, 0.09);
  border-radius: 1px;
}
.panel-title { letter-spacing: 0.5px; }
#banner .banner-sub {
  background: rgba(6, 8, 6, 0.48);
  padding: 3px 12px;
  border-radius: 2px;
}
.build-card:disabled { opacity: 0.55; }

.build-tabs {
  display: flex;
  gap: 6px;
  padding: 0 4px 7px;
}
.build-tab {
  flex: 1;
  height: 32px;
  border: 1px solid rgba(201, 168, 106, 0.2);
  background: rgba(201, 168, 106, 0.04);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 1px;
  cursor: pointer;
}
.build-tab.active {
  color: var(--gold-bright);
  border-color: rgba(201, 168, 106, 0.55);
  background: rgba(201, 168, 106, 0.12);
}
.b-cost.lack { color: var(--vermilion); font-weight: 600; }

#group-bar {
  position: absolute;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 12;
  pointer-events: auto;
}
.group-chip {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 68px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid rgba(201, 168, 106, 0.24);
  background: rgba(10, 14, 11, 0.82);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.5px;
  cursor: pointer;
}
.group-chip b {
  font-size: 12px;
  color: var(--gold-bright);
  font-weight: 700;
}
.group-chip.has {
  border-color: rgba(201, 168, 106, 0.5);
  color: var(--text);
  background: rgba(201, 168, 106, 0.1);
}
.group-chip:active { background: rgba(201, 168, 106, 0.18); }