/* =====================================================================
 * 三国霸业 · 国风鎏金主题样式
 * ===================================================================== */

:root {
  --bg-0: #0a0c12;
  --bg-1: #10131c;
  --bg-2: #171b27;
  --bg-3: #1f2533;
  --bg-4: #282f40;

  --ink: #0c0e15;

  --gold: #e8c15a;
  --gold-deep: #b8912f;
  --gold-pale: #f6e3a1;
  --gold-line: rgba(232, 193, 90, .38);
  --gold-glow: rgba(232, 193, 90, .25);

  --red: #d23c2f;
  --red-deep: #8c1f1a;

  --text: #ece3cd;
  --muted: #9a9887;
  --muted-2: #6f6e60;

  --blue: #3b82f6;
  --green: #3fb36b;
  --danger: #e05a4e;

  --font: "Microsoft YaHei", "PingFang SC", "Noto Serif SC", "STSong", "SimSun", serif;
}

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

html, body { height: 100%; }

body {
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 50% -10%, #1c2436 0%, rgba(28,36,54,0) 55%),
    radial-gradient(900px 600px at 100% 100%, #161320 0%, rgba(22,19,32,0) 60%),
    linear-gradient(180deg, #0e1119 0%, var(--bg-0) 100%);
  background-attachment: fixed;
  overflow: hidden;
}

.hidden { display: none !important; }

button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }

/* =====================================================================
 * 背景装饰层
 * ===================================================================== */
.bg-decor {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.bg-decor::before {
  /* 远处群山剪影 */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46vh;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0 320 L0 250 L130 200 L260 248 L400 165 L540 232 L690 150 L830 222 L980 165 L1120 218 L1260 140 L1440 210 L1440 320 Z' fill='%231c2230' opacity='.55'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  opacity: .6;
}
.bg-decor::after {
  /* 近处第二层群山 */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26vh;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 240' preserveAspectRatio='none'%3E%3Cpath d='M0 240 L0 200 L160 150 L300 205 L460 130 L610 195 L760 120 L920 190 L1070 140 L1220 195 L1440 150 L1440 240 Z' fill='%230a0c12'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  opacity: .9;
}
.bg-watermark {
  position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%);
  font-size: 52vmin; font-weight: 900; color: rgba(232, 193, 90, .035);
  letter-spacing: .1em; user-select: none; white-space: nowrap;
  font-family: "STKaiti", "KaiTi", "Noto Serif SC", serif;
}
.bg-noise {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: .6;
}

/* 主界面浮在背景层之上 */
.game-screen, .start-screen { position: relative; z-index: 1; }

/* =====================================================================
 * 开局界面
 * ===================================================================== */
.start-screen {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
}
.start-screen::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(1000px 600px at 50% 18%, rgba(232,193,90,.10) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(1400px 800px at 50% 120%, #161320 0%, rgba(22,19,32,0) 55%),
    linear-gradient(180deg, #0e1119 0%, #08090f 100%);
}
.start-inner {
  position: relative; text-align: center; max-width: 820px; padding: 24px;
}

.game-title {
  font-family: "STKaiti", "KaiTi", "Noto Serif SC", serif;
  font-size: 64px; font-weight: 900; letter-spacing: 14px; margin-bottom: 6px;
  background: linear-gradient(180deg, #fdf0c2 8%, var(--gold) 42%, #a97c22 78%, var(--gold-pale) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 22px rgba(232,193,90,.35));
}
.title-ornament {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin: 4px 0 14px; color: var(--gold);
}
.title-ornament .orn-line { height: 1px; width: 120px; background: linear-gradient(90deg, transparent, var(--gold-line), transparent); }
.title-ornament .orn-mark { font-size: 22px; }

.game-subtitle { font-size: 17px; color: var(--gold-pale); letter-spacing: 4px; margin-bottom: 8px; }
.game-tip { font-size: 14px; color: var(--muted); margin-bottom: 30px; }

.faction-list { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.faction-card {
  position: relative; width: 178px; padding: 26px 14px 20px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(31,37,51,.92), rgba(20,24,34,.96));
  border: 1px solid var(--gold-line);
  overflow: hidden;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.faction-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(200px 120px at 50% -10%, rgba(232,193,90,.16), transparent 70%);
}
.faction-card::after {
  content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--fcolor, var(--gold)), transparent);
}
.faction-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 30px var(--gold-glow);
}
.f-seal {
  position: relative; width: 66px; height: 66px; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; font-weight: 900; color: #fff;
  background: linear-gradient(160deg, var(--fcolor, var(--gold)), #7a1220);
  border: 3px solid rgba(255,255,255,.18); border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 0 12px rgba(255,255,255,.15);
  text-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.f-name { position: relative; font-size: 26px; font-weight: 800; letter-spacing: 2px; margin-bottom: 6px; }
.f-desc { position: relative; font-size: 12px; color: var(--muted); line-height: 1.6; margin-bottom: 14px; min-height: 38px; }
.f-bonus {
  position: relative; font-size: 12px; color: var(--gold-pale); line-height: 1.8;
  background: rgba(0,0,0,.25); border-radius: 10px; padding: 8px 6px;
  border: 1px solid rgba(232,193,90,.15);
}

.continue-box { margin-top: 32px; display: flex; gap: 12px; justify-content: center; }

/* =====================================================================
 * 顶栏
 * ===================================================================== */
/* 整体等比缩放容器（调 --ui-scale 即可整体缩放，保持对齐） */
.app-root {
  --ui-scale: 0.8;
  transform: scale(var(--ui-scale));
  transform-origin: top left;
  width: calc(100% / var(--ui-scale));
  height: calc(100vh / var(--ui-scale));
  overflow: hidden;
}
.game-screen { display: flex; flex-direction: column; height: 100%; }
.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px;
  background: linear-gradient(180deg, rgba(23,27,39,.96), rgba(16,19,28,.96));
  border-bottom: 1px solid var(--gold-line);
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.faction-badge {
  width: 42px; height: 42px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; color: #fff;
  border: 2px solid var(--gold-line);
  box-shadow: 0 3px 10px rgba(0,0,0,.4), inset 0 0 8px rgba(255,255,255,.12);
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.topbar-title {
  font-family: "STKaiti", "KaiTi", "Noto Serif SC", serif;
  font-size: 22px; font-weight: 800; letter-spacing: 3px;
  background: linear-gradient(180deg, var(--gold-pale), var(--gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.game-date { font-size: 13px; color: var(--muted); margin-left: 4px; padding: 4px 10px; border: 1px solid var(--gold-line); border-radius: 999px; }
.topbar-right { margin-left: auto; display: flex; gap: 8px; }

/* =====================================================================
 * 资源栏
 * ===================================================================== */
.resource-bar {
  display: flex; gap: 8px; padding: 6px 14px; flex-wrap: nowrap; overflow-x: auto;
  align-items: stretch;
  background:
    linear-gradient(180deg, rgba(70,52,28,.95), rgba(32,24,14,.96)),
    repeating-linear-gradient(90deg, transparent, transparent 48px, rgba(0,0,0,.04) 48px, rgba(0,0,0,.04) 49px);
  border-top: 1px solid rgba(240,210,140,.35);
  border-bottom: 1px solid rgba(180,140,60,.45);
  box-shadow: inset 0 1px 0 rgba(255,230,170,.12), 0 4px 14px rgba(0,0,0,.25);
  scrollbar-width: none;
}
.resource-bar::-webkit-scrollbar { display: none; }
.resource-chip {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 6px;
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(90,68,36,.88), rgba(42,32,18,.94));
  border: 1px solid rgba(210,170,90,.42);
  font-size: 12px; white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255,240,200,.12),
    0 2px 8px rgba(0,0,0,.22);
  flex: 0 0 auto;
}
.resource-chip::before,
.resource-chip::after {
  content: ""; position: absolute; width: 7px; height: 7px;
  border: 1px solid rgba(230,190,110,.55); pointer-events: none;
}
.resource-chip::before { top: 2px; left: 2px; border-right: none; border-bottom: none; }
.resource-chip::after { bottom: 2px; right: 2px; border-left: none; border-top: none; }
.rc-medal {
  width: 30px; height: 30px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(230,190,110,.55);
  background:
    radial-gradient(circle at 35% 28%, rgba(255,220,140,.28), transparent 55%),
    radial-gradient(circle, #5a4428, #2a1e10);
  box-shadow: inset 0 0 0 2px rgba(30,22,12,.45), 0 2px 6px rgba(0,0,0,.3);
}
.rc-img { width: 20px; height: 20px; display: block; }
.rc-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.15; }
.rc-label {
  font-size: 10px; letter-spacing: 1px; color: #cbb98a;
  font-family: "STKaiti", "KaiTi", "Noto Serif SC", serif;
}
.rc-val {
  font-weight: 800; font-variant-numeric: tabular-nums;
  color: #fff1c8; font-size: 13px;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.rc-rate {
  margin-left: 2px;
  padding: 2px 6px;
  border: 1px solid rgba(180,145,70,.35);
  background: rgba(20,14,8,.28);
  color: #b8efa0; font-size: 11px;
  font-variant-numeric: tabular-nums;
  border-radius: 2px;
}
.rc-rate small { opacity: .75; font-size: 10px; }
.resource-chip[data-kind="food"] .rc-rate { color: #b8efa0; }
.resource-chip[data-kind="gold"] .rc-rate,
.resource-chip[data-kind="wood"] .rc-rate,
.resource-chip[data-kind="iron"] .rc-rate { color: #ffe7a8; }

.rc-icon {
  width: 21px; height: 21px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.16), rgba(0,0,0,.35));
  box-shadow: inset 0 0 4px rgba(0,0,0,.4);
}

/* =====================================================================
 * 布局 / 侧边导航
 * ===================================================================== */
.layout { display: flex; flex: 1; min-height: 0; }
.sidebar {
  width: 88px; flex: 0 0 auto;
  background: linear-gradient(180deg, rgba(20,24,34,.94), rgba(13,16,24,.94));
  border-right: 1px solid var(--gold-line);
  display: flex; flex-direction: column; padding: 8px 6px; gap: 3px; overflow-y: auto;
}
.nav-item {
  position: relative; padding: 7px 4px 6px; border-radius: 9px;
  background: transparent; border: 1px solid transparent;
  color: var(--muted); font-size: 11px; text-align: center;
  transition: background .14s, color .14s, border-color .14s, transform .14s;
}
.nav-item .ni-ico { display: block; font-size: 18px; margin-bottom: 2px; }
.nav-item:hover { background: var(--bg-3); color: var(--text); }
.nav-item.active {
  background: linear-gradient(180deg, rgba(232,193,90,.18), rgba(232,193,90,.06));
  border-color: var(--gold-line); color: var(--gold-pale);
  box-shadow: inset 3px 0 0 var(--gold);
}

.content {
  flex: 1; overflow-y: auto; padding: 12px 16px 20px;
  scrollbar-width: thin; scrollbar-color: var(--gold-deep) transparent;
}
.content::-webkit-scrollbar { width: 9px; }
.content::-webkit-scrollbar-thumb { background: rgba(184,145,47,.35); border-radius: 999px; }

/* =====================================================================
 * 按钮
 * ===================================================================== */
.btn {
  position: relative; border: 1px solid transparent; border-radius: 8px;
  padding: 6px 12px; font-size: 13px; font-weight: 700; letter-spacing: 1px;
  transition: transform .06s, filter .14s, box-shadow .14s;
}
.btn:active { transform: scale(.96); }
.btn:hover { filter: brightness(1.1); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.btn-primary {
  background: linear-gradient(180deg, #f0cd7c, #d9a53d 55%, #b8862c);
  color: #3a2a06; border-color: #f6e3a1;
  box-shadow: 0 4px 14px rgba(217,165,61,.35), inset 0 1px 0 rgba(255,255,255,.5);
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
.btn-success {
  background: linear-gradient(180deg, #4fd07e, #2f9e5b 60%, #247a46);
  color: #06180d; border-color: #7fe0a4; text-shadow: 0 1px 0 rgba(255,255,255,.2);
}
.btn-danger {
  background: linear-gradient(180deg, #e66a5d, #c0392b 55%, #96231a);
  color: #fff; border-color: #f09a8f; text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.btn-ghost {
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  color: var(--text); border-color: var(--gold-line);
}
.btn-sm { padding: 5px 11px; font-size: 12px; border-radius: 7px; }

/* =====================================================================
 * 面板 / 卡片
 * ===================================================================== */
.panel, .card {
  position: relative;
  background: linear-gradient(180deg, rgba(31,37,51,.85), rgba(21,25,36,.92));
  border: 1px solid var(--gold-line);
  border-radius: 14px;
  box-shadow: 0 8px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
}
.panel { padding: 10px; margin-bottom: 8px; }
.card { padding: 9px; }

/* 面板四角装饰 */
.panel::before, .panel::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
  border: 1px solid var(--gold); opacity: .6;
}
.panel::before { top: -1px; left: -1px; border-right: none; border-bottom: none; border-top-left-radius: 12px; }
.panel::after { bottom: -1px; right: -1px; border-left: none; border-top: none; border-bottom-right-radius: 12px; }

.panel-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 800; letter-spacing: 1px; margin-bottom: 9px;
  padding-left: 10px; position: relative; color: var(--gold-pale);
}
.panel-title::before {
  content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep)); border-radius: 2px;
}

.section-title {
  font-family: "STKaiti", "KaiTi", "Noto Serif SC", serif;
  font-size: 17px; font-weight: 800; letter-spacing: 2px; margin-bottom: 8px;
  color: var(--gold-pale);
  display: flex; align-items: center; gap: 9px;
}
.section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold-line), transparent); }

.muted { color: var(--muted); }
.grid { display: grid; gap: 10px; }
.grid-2 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

.card-title { font-weight: 800; font-size: 14px; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; color: var(--gold-pale); }
.card-desc { font-size: 11px; color: var(--muted); line-height: 1.55; margin-bottom: 8px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 7px; font-size: 13px; }
.row + .row { margin-top: 6px; }

.bar-wrap { height: 9px; background: rgba(0,0,0,.4); border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,.5); }
.bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); transition: width .4s; box-shadow: 0 0 8px var(--gold-glow); }

.rarity-5 { color: #f5a623; }
.rarity-4 { color: #b57ef0; }
.rarity-3 { color: #5aa7ff; }

/* =====================================================================
 * 武将卡
 * ===================================================================== */
.general-card { position: relative; transition: transform .15s, box-shadow .15s; }
.general-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.5), 0 0 22px var(--gold-glow); }
.general-card .g-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
/* 武将立绘头像 */
.g-portrait {
  position: relative; width: 48px; height: 60px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 32% 22%, rgba(255,255,255,.30), transparent 55%),
    radial-gradient(circle at 70% 85%, rgba(0,0,0,.35), transparent 55%),
    linear-gradient(165deg, var(--gcolor, var(--gold-deep)), #12151d 82%);
  border: 2px solid var(--gold-line); border-radius: 11px;
  box-shadow: 0 6px 16px rgba(0,0,0,.5), 0 0 20px var(--gglow, transparent);
  overflow: hidden;
}
.g-portrait::before {
  content: ""; position: absolute; inset: 3px; border: 1px solid rgba(255,255,255,.14);
  border-radius: 7px; pointer-events: none;
}
.g-portrait-name {
  font-size: 19px; font-weight: 900; color: #fff; letter-spacing: 1px;
  text-shadow: 0 2px 6px rgba(0,0,0,.8);
}
.g-portrait-tag {
  position: absolute; left: 0; right: 0; bottom: 0; text-align: center;
  font-size: 11px; color: #fff; padding: 2px 0; opacity: .95;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55));
  z-index: 2;
}
.g-portrait-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  border-radius: 9px; z-index: 1;
}
.g-portrait.clickable { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.g-portrait.clickable:hover { transform: scale(1.08); box-shadow: 0 0 20px var(--gold-glow); }
.g-portrait.r4, .g-portrait.r5 { overflow: visible; }
.g-portrait.r5 { box-shadow: 0 6px 16px rgba(0,0,0,.5), 0 0 22px rgba(245,158,11,.7); }
.g-portrait.r4::after, .g-portrait.r5::after {
  content: ""; position: absolute; inset: -3px; border-radius: 13px;
  pointer-events: none; z-index: 3;
  background: conic-gradient(from 0deg, transparent 0 42%, var(--gglow, #f59e0b) 52%, transparent 64%);
  animation: fx-spin 3.4s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 2px;
}
.g-portrait.r5::after { animation-duration: 2.2s; }
.g-name { font-size: 15px; font-weight: 800; }
.g-faction { font-size: 11px; color: var(--muted); }
.g-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; text-align: center; margin: 8px 0; }
.g-stat {
  background: linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,.15));
  border: 1px solid rgba(255,255,255,.05); border-radius: 7px; padding: 5px 1px;
}
.g-stat .sv { font-size: 14px; font-weight: 800; color: var(--gold-pale); font-variant-numeric: tabular-nums; }
.g-stat .sk { font-size: 9px; color: var(--muted); }
.g-skill {
  font-size: 11px; color: var(--gold); margin-bottom: 7px;
  background: rgba(232,193,90,.06); border-left: 2px solid var(--gold-deep);
  padding: 4px 7px; border-radius: 0 6px 6px 0; line-height: 1.5;
}

/* =====================================================================
 * 大地图
 * ===================================================================== */
.map-wrap { position: relative; }
.map-canvas {
  position: relative; width: 100%; height: 34vh; min-height: 190px; aspect-ratio: auto;
  border: 1px solid var(--gold-line); border-radius: 16px; overflow: hidden;
  /* 古卷羊皮纸底 */
  background:
    radial-gradient(900px 500px at 72% 12%, rgba(122,94,52,.16), transparent 55%),
    radial-gradient(700px 460px at 18% 82%, rgba(101,78,45,.18), transparent 60%),
    radial-gradient(1400px 900px at 50% 50%, rgba(228,204,150,.9), rgba(210,182,124,.85) 60%, rgba(186,156,102,.9) 100%),
    linear-gradient(160deg, #e4cc96, #d3b47e);
  box-shadow:
    inset 0 0 90px rgba(90,64,28,.55),
    inset 0 0 24px rgba(70,48,20,.35),
    0 10px 30px rgba(0,0,0,.4);
}
/* 羊皮纸噪点做旧 + 边缘晕染（SVG feTurbulence，无需图片） */
.map-canvas::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .24 0 0 0 0 .12 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  border-radius: inherit;
}
/* 卷边装裱（四角暗角 + 上下金线装裱带） */
.map-canvas::before {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(60,40,14,.4), transparent 8%),
    linear-gradient(0deg, rgba(60,40,14,.4), transparent 8%),
    linear-gradient(90deg, rgba(60,40,14,.35), transparent 6%),
    linear-gradient(270deg, rgba(60,40,14,.35), transparent 6%);
}
/* 州郡名：墨色楷书 */
.map-terrain {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
.map-region {
  position: absolute; transform: translate(-50%, -50%);
  z-index: 1; pointer-events: none;
  color: rgba(72,54,28,.34);
  font-family: "STKaiti", "KaiTi", "Noto Serif SC", serif;
  font-weight: 900; letter-spacing: 3px; white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255,246,220,.5);
}
/* 道路：茶色墨线虚线商道 */
.map-roads {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
}
.map-roads line.road-casing {
  stroke: rgba(96,72,38,.32); stroke-width: 5.5; opacity: .5;
  vector-effect: non-scaling-stroke; stroke-linecap: round;
}
.map-roads line.road-core {
  stroke: rgba(122,94,52,.75); stroke-width: 1.8; opacity: .8;
  stroke-dasharray: 7 5;
  vector-effect: non-scaling-stroke; stroke-linecap: round;
}
/* 势力版图层：染色疆域 */
.map-territory {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 2; pointer-events: none; opacity: .92;
}
.map-territory path.terr-poly {
  fill-opacity: .13;
  stroke-width: 2.5; stroke-opacity: .55;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(0,0,0,.25));
  animation: terr-in .8s ease both;
}
@keyframes terr-in { from { fill-opacity: 0; stroke-opacity: 0; } to { fill-opacity: .13; stroke-opacity: .55; } }
.map-city {
  position: absolute; transform: translate(-50%, -50%);
  width: 54px; height: 54px; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform .13s, filter .13s;
}
.map-city .mc-dot {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; color: #fff; position: relative;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.34), transparent 55%), var(--mc, #64748b);
  border: 2.5px solid rgba(255,255,255,.5);
  box-shadow: 0 3px 10px rgba(0,0,0,.55), 0 0 14px var(--mcg, transparent);
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.map-city .mc-crown {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%) rotate(-12deg);
  font-size: 14px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); pointer-events: none;
}
/* 守军血条：城池下方细条 */
.map-city .mc-hp {
  position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%);
  width: 34px; height: 4px; border-radius: 2px;
  background: rgba(20,14,6,.6); overflow: hidden;
  border: 1px solid rgba(255,255,255,.25);
}
.map-city .mc-hp i { display: block; height: 100%; background: linear-gradient(90deg, #d9534f, #e8834f); }
.map-city.owned .mc-hp i { background: linear-gradient(90deg, #b8912f, #e8c15a); }
/* 可攻克目标：呼吸绿环 */
.map-city.can-take .mc-dot { animation: cantake-pulse 1.8s ease-in-out infinite; }
@keyframes cantake-pulse {
  0%, 100% { box-shadow: 0 3px 10px rgba(0,0,0,.55), 0 0 0 2px rgba(134,239,172,.55), 0 0 12px rgba(134,239,172,.35); }
  50% { box-shadow: 0 3px 10px rgba(0,0,0,.55), 0 0 0 4px rgba(134,239,172,.8), 0 0 20px rgba(134,239,172,.6); }
}
.map-city.owned .mc-dot { border-color: var(--gold); box-shadow: 0 3px 10px rgba(0,0,0,.55), 0 0 18px var(--gold-glow); }
.map-city.sel .mc-dot { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.3), 0 0 22px var(--gold-glow); }
.map-city:hover .mc-dot { transform: scale(1.16); }
.map-city .map-label {
  position: absolute; top: 40px; left: 50%; transform: translateX(-50%);
  font-size: 11.5px; font-weight: 700; white-space: nowrap; pointer-events: none;
  background: rgba(46,33,15,.82); padding: 2px 8px; border-radius: 6px;
  border: 1px solid rgba(232,193,90,.28); color: #f3e9cf;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
.map-city.owned .map-label { color: var(--gold-pale); border-color: var(--gold-line); background: rgba(58,40,12,.88); }
.map-city.rebel .mc-dot { background: radial-gradient(circle at 35% 30%, rgba(255,120,90,.5), transparent 55%), #c0392b; border-color: rgba(255,160,130,.6); animation: rebelPulse 1.6s ease-in-out infinite; }
.map-city.rebel .map-label { border-color: rgba(224,90,78,.4); color: #f5b8b0; }
@keyframes rebelPulse { 0%, 100% { box-shadow: 0 3px 10px rgba(0,0,0,.6), 0 0 8px rgba(224,90,78,.4); } 50% { box-shadow: 0 3px 10px rgba(0,0,0,.6), 0 0 20px rgba(224,90,78,.8); } }

/* 城池等级视觉（越高越华丽） */
.map-city .city-lv {
  position: absolute; top: -4px; right: -10px; font-size: 9px; font-weight: 800;
  padding: 1px 5px; border-radius: 999px; background: #14100a; color: var(--gold-pale);
  border: 1px solid var(--gold-line); pointer-events: none; white-space: nowrap; z-index: 4;
}
.map-city.lvl-mid .mc-dot { border-color: #e8c15a; box-shadow: 0 3px 10px rgba(0,0,0,.6), 0 0 16px rgba(232,193,90,.65); }
.map-city.lvl-high .mc-dot { border-color: #ffd700; box-shadow: 0 3px 10px rgba(0,0,0,.6), 0 0 22px rgba(255,215,0,.85); }
.map-city.lvl-max .mc-dot { border-color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.6), 0 0 28px rgba(255,215,0,1), 0 0 46px rgba(255,120,60,.75); animation: rebelPulse 1.6s ease-in-out infinite; }

.panel.lvl-mid { border-color: rgba(232,193,90,.55); box-shadow: 0 0 16px rgba(232,193,90,.22), 0 8px 26px rgba(0,0,0,.35); }
.panel.lvl-high { border-color: rgba(255,215,0,.7); box-shadow: 0 0 24px rgba(255,215,0,.35), 0 8px 26px rgba(0,0,0,.35); }
.panel.lvl-max { border-color: rgba(255,215,0,.95); box-shadow: 0 0 32px rgba(255,215,0,.55), 0 0 60px rgba(255,120,60,.3), 0 8px 26px rgba(0,0,0,.35); }

.city-lv-tag {
  display: inline-block; font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px;
  color: var(--gold-pale); border: 1px solid var(--gold-line); background: rgba(0,0,0,.35); vertical-align: middle;
}
.city-lv-tag.lvl-mid { color: #ffe9a8; border-color: rgba(232,193,90,.6); }
.city-lv-tag.lvl-high { color: #ffd700; border-color: rgba(255,215,0,.8); box-shadow: 0 0 8px rgba(255,215,0,.4); }
.city-lv-tag.lvl-max { color: #fff; border-color: #ffd700; background: linear-gradient(90deg, rgba(255,215,0,.25), rgba(255,120,60,.25)); box-shadow: 0 0 12px rgba(255,215,0,.6); }

.map-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; align-items: center; }
.legend-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; border: 1px solid rgba(255,255,255,.3); }

/* =====================================================================
 * 弹窗
 * ===================================================================== */
.modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(5,6,10,.72); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
}
.modal-box {
  position: relative; width: min(540px, 92vw);
  background: linear-gradient(180deg, #202636, #151927);
  border: 1px solid var(--gold-line); border-radius: 16px; padding: 26px 24px; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 40px var(--gold-glow);
}
.modal-box::before {
  content: ""; position: absolute; inset: 7px; border: 1px solid rgba(232,193,90,.25);
  border-radius: 11px; pointer-events: none;
}
.modal-title {
  font-family: "STKaiti", "KaiTi", "Noto Serif SC", serif;
  font-size: 24px; font-weight: 800; letter-spacing: 2px; margin-bottom: 12px; color: var(--gold-pale);
}
.modal-body { font-size: 14px; color: var(--muted); line-height: 1.9; margin-bottom: 20px; }
.modal-body .big { font-size: 17px; color: var(--text); font-weight: 700; }

/* =====================================================================
 * Toast
 * ===================================================================== */
.toast {
  position: fixed; top: 74px; left: 50%; transform: translateX(-50%);
  z-index: 200; max-width: 80vw;
  background: linear-gradient(180deg, #202636, #141822);
  color: var(--text); border: 1px solid var(--gold-line); border-radius: 11px;
  padding: 11px 22px; font-size: 14px; text-align: center;
  box-shadow: 0 12px 34px rgba(0,0,0,.55), 0 0 18px var(--gold-glow);
  animation: toastIn .22s ease;
}
.toast.err { border-color: var(--danger); color: #f5b8b0; box-shadow: 0 12px 34px rgba(0,0,0,.55), 0 0 18px rgba(224,90,78,.35); }
.toast.ok { border-color: var(--green); color: #b7eccb; box-shadow: 0 12px 34px rgba(0,0,0,.55), 0 0 18px rgba(63,179,107,.35); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* =====================================================================
 * 日志
 * ===================================================================== */
.log-list { max-height: 560px; overflow-y: auto; }
.log-item {
  display: flex; gap: 12px; padding: 9px 12px; font-size: 13px; line-height: 1.6;
  border-bottom: 1px solid rgba(232,193,90,.1);
}
.log-item .lt { color: var(--muted-2); white-space: nowrap; flex: 0 0 auto; font-variant-numeric: tabular-nums; }

/* =====================================================================
 * 响应式
 * ===================================================================== */
@media (max-width: 720px) {
  .sidebar { width: 74px; }
  .nav-item { font-size: 11px; padding: 10px 2px; }
  .game-title { font-size: 40px; letter-spacing: 8px; }
  .faction-card { width: 150px; }
  .content { padding: 14px 12px 30px; }
}

/* =====================================================================
 * 总览 · 君主横幅
 * ===================================================================== */
.hero-banner {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 10px;
  background:
    radial-gradient(560px 160px at 10% 0%, rgba(232,193,90,.13), transparent 70%),
    linear-gradient(180deg, rgba(31,37,51,.9), rgba(21,25,36,.95));
  overflow: hidden;
}
.hero-seal {
  width: 52px; height: 52px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 900; color: #fff;
  background: linear-gradient(160deg, var(--fcolor, var(--gold)), #7a1220);
  border: 2px solid rgba(255,255,255,.18); border-radius: 11px;
  box-shadow: 0 6px 16px rgba(0,0,0,.5), inset 0 0 10px rgba(255,255,255,.16);
  text-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.hero-info { flex: 1; min-width: 180px; }
.hero-name { font-size: 17px; font-weight: 800; letter-spacing: 1px; color: var(--gold-pale); margin-bottom: 4px; }
.hero-desc { font-size: 12px; color: var(--muted); line-height: 1.5; }
.hero-progress { flex: 0 0 220px; }
@media (max-width: 720px) {
  .hero-progress { flex: 1 1 100%; }
}

/* =====================================================================
 * 战斗战报 / 装备
 * ===================================================================== */
.br-report {
  margin: 12px 0; padding: 10px 14px; text-align: left;
  background: rgba(0,0,0,.28); border: 1px solid rgba(232,193,90,.18);
  border-radius: 10px; max-height: 260px; overflow-y: auto;
}
.br-line { padding: 5px 0; font-size: 13px; line-height: 1.7; color: var(--text); border-bottom: 1px dashed rgba(232,193,90,.12); }
.br-line:last-child { border-bottom: none; }
.br-line.br-win { color: #b7eccb; }
.br-line.br-bad { color: #f5b8b0; }
.br-loot { margin-top: 10px; font-size: 14px; color: var(--gold-pale); font-weight: 700; }

.g-equip {
  font-size: 12px; color: var(--gold-pale);
  background: rgba(232,193,90,.07); border: 1px solid rgba(232,193,90,.2);
  border-radius: 7px; padding: 5px 9px; margin-bottom: 4px;
}

/* =====================================================================
 * 图鉴
 * ===================================================================== */
.codex-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.codex-chip {
  padding: 5px 12px; border-radius: 999px; font-size: 13px; white-space: nowrap;
  border: 1px solid var(--gold-line);
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  color: var(--text);
}
.codex-chip.got {
  border-color: rgba(232,193,90,.55);
  background: linear-gradient(180deg, rgba(232,193,90,.16), rgba(232,193,90,.05));
  color: var(--gold-pale);
}
.codex-chip.missing {
  opacity: .45; color: var(--muted-2); border-style: dashed;
}

/* =====================================================================
 * 难度选择 / 存档槽
 * ===================================================================== */
.difficulty-bar { display: flex; gap: 12px; justify-content: center; margin-bottom: 22px; flex-wrap: wrap; }
.difficulty-btn {
  padding: 8px 24px; border-radius: 999px; font-size: 14px; font-weight: 700; letter-spacing: 1px;
  background: var(--panel2); color: var(--muted); border: 1px solid var(--gold-line); transition: all .14s;
}
.difficulty-btn:hover { color: var(--text); border-color: var(--gold); }
.difficulty-btn.active {
  background: linear-gradient(180deg, #f0cd7c, #d9a53d); color: #3a2a06; border-color: #f6e3a1;
  box-shadow: 0 4px 14px rgba(217,165,61,.35);
}

.slot-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: rgba(0,0,0,.22); border: 1px solid rgba(232,193,90,.15); border-radius: 8px;
}
.slot-label { font-weight: 700; color: var(--gold-pale); flex: 0 0 auto; }
.slot-info { flex: 1; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =====================================================================
 * 一统天下结算画面
 * ===================================================================== */
.victory-screen {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(900px 600px at 50% 0%, rgba(232,193,90,.18), transparent 60%),
    radial-gradient(1400px 800px at 50% 120%, #161320, transparent 55%),
    rgba(6,7,12,.92);
  backdrop-filter: blur(4px);
  animation: victoryFade .5s ease;
}
.victory-inner { text-align: center; max-width: 560px; padding: 24px; }
.victory-crown { font-size: 72px; animation: crownFloat 2.4s ease-in-out infinite; filter: drop-shadow(0 8px 20px rgba(232,193,90,.5)); }
.victory-title {
  font-family: "STKaiti", "KaiTi", "Noto Serif SC", serif;
  font-size: 56px; font-weight: 900; letter-spacing: 10px; margin: 10px 0 4px;
  background: linear-gradient(180deg, #fdf0c2, #e8c15a 45%, #a97c22);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 18px rgba(232,193,90,.4));
}
.victory-sub { color: var(--gold-pale); letter-spacing: 6px; font-size: 15px; margin-bottom: 24px; }
.victory-stats {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
  background: rgba(20,24,34,.85); border: 1px solid var(--gold-line); border-radius: 14px;
  padding: 18px; margin-bottom: 26px;
}
.vs-item { text-align: center; }
.vs-item span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.vs-item b { font-size: 17px; color: var(--gold-pale); font-variant-numeric: tabular-nums; }
.victory-actions { display: flex; gap: 14px; justify-content: center; }
@keyframes victoryFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes crownFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 640px) {
  .victory-title { font-size: 40px; letter-spacing: 6px; }
  .victory-stats { grid-template-columns: repeat(2, 1fr); }
}

/* 分页 */
.page-bar { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }

/* 品级筛选 */
.filter-bar { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-btn {
  padding: 3px 12px; font-size: 12px; font-weight: 700; border-radius: 999px;
  background: var(--bg-3); color: var(--muted); border: 1px solid var(--gold-line);
}
.filter-btn:hover { color: var(--text); border-color: var(--gold); }
.filter-btn.active {
  background: linear-gradient(180deg, #f0cd7c, #d9a53d); color: #3a2a06; border-color: #f6e3a1;
  box-shadow: 0 2px 8px rgba(217,165,61,.3);
}

/* 兵种头像（品级越高越霸气） */
.troop-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 8px; }
.troop-img-wrap {
  position: relative; width: 92px; height: 118px; flex: 0 0 auto;
  overflow: visible;
}
.troop-frame {
  position: relative; width: 100%; height: 100%; border-radius: 12px; overflow: hidden;
  border: 2px solid var(--gold-line);
  background:
    radial-gradient(circle at 32% 18%, rgba(255,255,255,.22), transparent 52%),
    linear-gradient(165deg, #2a2214, #12151d 82%);
  box-shadow: 0 8px 18px rgba(0,0,0,.55);
}
.troop-fallback { font-size: 42px; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 0; }
.troop-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center; z-index: 1;
}
.troop-tier-badge {
  position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%);
  z-index: 3; font-size: 10px; font-weight: 900; letter-spacing: 1px;
  padding: 1px 8px; border-radius: 999px; white-space: nowrap;
  background: #14100a; color: var(--gold-pale);
  border: 1px solid var(--gold-line);
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.troop-img-wrap::before {
  content: ""; position: absolute; inset: -4px; border-radius: 14px;
  pointer-events: none; z-index: 0; opacity: 0;
}
.troop-img-wrap.tier-1 .troop-frame { border-color: #9ca3af; }
.troop-img-wrap.tier-2 .troop-frame { border-color: #22c55e; box-shadow: 0 8px 18px rgba(0,0,0,.5), 0 0 12px rgba(34,197,94,.45); }
.troop-img-wrap.tier-3 .troop-frame { border-color: #3b82f6; box-shadow: 0 8px 18px rgba(0,0,0,.5), 0 0 16px rgba(59,130,246,.55); }
.troop-img-wrap.tier-3::before {
  opacity: 1;
  background: conic-gradient(from 0deg, transparent 0 55%, #3b82f6 70%, transparent 85%);
  animation: fx-spin 4.5s linear infinite;
  filter: blur(.4px);
}
.troop-img-wrap.tier-4 .troop-frame { border-color: #c084fc; box-shadow: 0 8px 18px rgba(0,0,0,.5), 0 0 20px rgba(168,85,247,.7); }
.troop-img-wrap.tier-4::before {
  opacity: 1;
  background: conic-gradient(from 0deg, transparent 0 40%, #a855f7 52%, #f0abfc 58%, transparent 70%);
  animation: fx-spin 3.2s linear infinite;
}
.troop-img-wrap.tier-5 .troop-frame {
  border-color: #f59e0b;
  box-shadow: 0 8px 22px rgba(0,0,0,.55), 0 0 26px rgba(245,158,11,.85);
}
.troop-img-wrap.tier-5::before {
  opacity: 1;
  background: conic-gradient(from 0deg, transparent 0 32%, #f59e0b 46%, #fff3c4 52%, #f59e0b 58%, transparent 72%);
  animation: fx-spin 2.4s linear infinite, fx-aura 1.8s ease-in-out infinite;
}
.troop-img-wrap.tier-5 .troop-tier-badge {
  color: #3a2a06; background: linear-gradient(180deg, #ffe9a8, #f0cd7c);
  border-color: #fff3c4; animation: fx-aura 1.8s ease-in-out infinite;
}
@keyframes fx-spin { to { transform: rotate(360deg); } }
@keyframes fx-aura {
  0%, 100% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.25) saturate(1.35); }
}

/* 战斗画面（战场） */
.battle-screen {
  position: fixed; inset: 0; z-index: 250;
  display: flex; align-items: center; justify-content: center;
  background: #0a0c12;
}
.battle-scene {
  position: relative; width: 100%; height: 100%; max-width: 1000px; margin: 0 auto;
  overflow: hidden; display: flex; flex-direction: column;
}
.battle-field { position: relative; flex: 1; min-height: 240px; }
.battle-sky {
  position: absolute; inset: 0 0 28% 0;
  background: linear-gradient(180deg, #1a2740 0%, #3a4a66 55%, #8a9aa8 100%);
}
.battle-sun {
  position: absolute; top: 7%; right: 14%; width: 80px; height: 80px; border-radius: 50%;
  background: radial-gradient(circle, #ffe9a8, #f5b84a 60%, rgba(245,184,74,0));
  box-shadow: 0 0 60px rgba(245,184,74,.7); animation: sunGlow 3s ease-in-out infinite;
}
.battle-hills {
  position: absolute; left: 0; right: 0; bottom: 28%;
  height: 11%;
  background:
    radial-gradient(120% 100% at 20% 100%, transparent 40%, rgba(34,48,60,.85) 41%, rgba(34,48,60,.85) 70%, transparent 71%),
    radial-gradient(120% 100% at 80% 100%, transparent 40%, rgba(28,40,52,.85) 41%, rgba(28,40,52,.85) 70%, transparent 71%);
}
.battle-round {
  position: absolute; top: 12px; left: 0; right: 0; z-index: 3; text-align: center;
  font-family: "STKaiti", "KaiTi", serif; font-size: 26px; font-weight: 900;
  color: #fff; letter-spacing: 4px; text-shadow: 0 2px 8px rgba(0,0,0,.7);
}
.battle-ground-bg {
  position: absolute; left: 0; right: 0; bottom: 0; height: 28%;
  background: linear-gradient(180deg, #7a5a32 0%, #5e4526 60%, #3f2f1a 100%);
}
.battle-army {
  position: absolute; bottom: 10px; z-index: 2; width: 40%;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.battle-army.atk { left: 4%; }
.battle-army.def { right: 4%; }
.army-general {
  width: 110px; height: 110px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  border: 3px solid var(--gold-line); background: rgba(0,0,0,.3);
  display: flex; align-items: center; justify-content: center; font-size: 56px;
  box-shadow: 0 8px 24px rgba(0,0,0,.6);
}
.battle-army.def .army-general { border-color: #ef4444; }
.army-general img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.army-units { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; min-height: 50px; max-width: 300px; margin: 0 auto; }
.soldier {
  width: 46px; height: 46px; border-radius: 9px; overflow: hidden;
  border: 2px solid rgba(255,255,255,.35); background: rgba(0,0,0,.3);
  box-shadow: 0 3px 8px rgba(0,0,0,.5);
}
.battle-army.def .soldier { border-color: rgba(255,120,120,.5); }
.soldier img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.soldier.tier-3 { border-color: rgba(96,165,250,.7); box-shadow: 0 3px 8px rgba(0,0,0,.5), 0 0 10px rgba(59,130,246,.45); }
.soldier.tier-4 { border-color: rgba(192,132,252,.85); box-shadow: 0 3px 8px rgba(0,0,0,.5), 0 0 14px rgba(168,85,247,.6); }
.soldier.tier-5 { border-color: rgba(245,158,11,.95); box-shadow: 0 3px 8px rgba(0,0,0,.5), 0 0 16px rgba(245,158,11,.75); }
.soldier-emoji { font-size: 26px; display: flex; align-items: center; justify-content: center; height: 100%; }
.army-hpbar { width: 100%; height: 13px; background: rgba(0,0,0,.5); border-radius: 999px; overflow: hidden; border: 1px solid rgba(255,255,255,.15); }
.army-hpfill { height: 100%; width: 100%; border-radius: 999px; background: linear-gradient(90deg, #22c55e, #a3e635); transition: width .4s; }
.battle-army.def .army-hpfill { background: linear-gradient(90deg, #ef4444, #f97316); }
.army-label { text-align: center; font-size: 15px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.army-label b { color: var(--gold-pale); }
.army-label .muted { color: #d8d3c5; font-size: 12px; }

/* 进场动画 */
.battle-army.enter .army-general { animation: enterAtk .6s ease-out both; }
.battle-army.def.enter .army-general { animation: enterDef .6s ease-out both; }
.battle-army.enter .soldier { animation: soldierRise .45s ease-out both; }
@keyframes enterAtk { from { transform: translateX(-140%) scale(.8); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } }
@keyframes enterDef { from { transform: translateX(140%) scale(.8); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } }
@keyframes soldierRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* 攻击动画 */
.battle-army.attack { animation: atkLunge .3s ease; }
.battle-army.def.attack { animation: defLunge .3s ease; }
@keyframes atkLunge { 0% { transform: translateX(0); } 50% { transform: translateX(30px); } 100% { transform: translateX(0); } }
@keyframes defLunge { 0% { transform: translateX(0); } 50% { transform: translateX(-30px); } 100% { transform: translateX(0); } }
@keyframes sunGlow { 0%, 100% { box-shadow: 0 0 50px rgba(245,184,74,.6); } 50% { box-shadow: 0 0 90px rgba(245,184,74,.9); } }

.battle-log { position: relative; z-index: 3; max-height: 130px; overflow-y: auto; text-align: left; background: rgba(0,0,0,.45); border-top: 1px solid rgba(232,193,90,.2); padding: 8px 16px; font-size: 13px; }
.battle-log-line { padding: 2px 0; color: var(--text); border-bottom: 1px dashed rgba(232,193,90,.12); }
.battle-log-line:last-child { border-bottom: none; }
.battle-result { position: relative; z-index: 3; text-align: center; font-size: 26px; font-weight: 900; letter-spacing: 3px; min-height: 40px; padding: 8px 0; }
.battle-result.win { color: #b7eccb; }
.battle-result.lose { color: #f5b8b0; }
#battleClose { position: relative; z-index: 3; align-self: center; margin-bottom: 18px; }

/* 士兵攻击动作 */
.battle-army.charge .soldier { animation: soldierSwing .55s ease-in-out both; }
.battle-army.def.charge .soldier { animation: soldierSwingDef .55s ease-in-out both; }
.battle-army.charge .soldier:nth-child(2n) { animation-delay: .06s; }
.battle-army.charge .soldier:nth-child(3n) { animation-delay: .12s; }
.battle-army.charge .soldier:nth-child(4n) { animation-delay: .18s; }
@keyframes soldierSwing {
  0% { transform: translateX(0) rotate(0) scale(1); }
  35% { transform: translateX(20px) rotate(-16deg) scale(1.2); }
  65% { transform: translateX(38px) rotate(9deg) scale(1.05); }
  100% { transform: translateX(0) rotate(0) scale(1); }
}
@keyframes soldierSwingDef {
  0% { transform: translateX(0) rotate(0) scale(1); }
  35% { transform: translateX(-20px) rotate(16deg) scale(1.2); }
  65% { transform: translateX(-38px) rotate(-9deg) scale(1.05); }
  100% { transform: translateX(0) rotate(0) scale(1); }
}
.battle-army.hit { animation: armyShake .4s ease; }
@keyframes armyShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  50% { transform: translateX(7px); }
  75% { transform: translateX(-4px); }
}
/* 刀光（斜切） */
.slash {
  position: absolute; left: 50%; top: 40%; width: 90px; height: 6px;
  margin-left: -45px; margin-top: -3px; pointer-events: none; z-index: 6;
  background: linear-gradient(90deg, transparent, #fff, rgba(255,170,60,.85), transparent);
  border-radius: 999px; transform: rotate(-30deg);
  box-shadow: 0 0 12px rgba(255,255,255,.9), 0 0 24px rgba(255,150,50,.6);
  animation: slashCut .35s ease-out both;
}
@keyframes slashCut {
  0% { opacity: 0; transform: rotate(-30deg) scaleX(.2); }
  40% { opacity: 1; transform: rotate(-30deg) scaleX(1.25); }
  100% { opacity: 0; transform: rotate(-30deg) scaleX(1.7); }
}
/* 飘伤害数字 */
.dmg-num {
  position: absolute; left: 50%; top: 14%; transform: translateX(-50%);
  font-size: 24px; font-weight: 900; pointer-events: none; z-index: 7;
  text-shadow: 0 1px 4px rgba(0,0,0,.9); animation: dmgFloat .95s ease-out both;
}
@keyframes dmgFloat {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.6); }
  20% { opacity: 1; transform: translate(-50%, -8px) scale(1.25); }
  100% { opacity: 0; transform: translate(-50%, -54px) scale(1); }
}

/* 飘动的云 */
.battle-clouds { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cloud {
  position: absolute; height: 26px; border-radius: 999px;
  background: radial-gradient(circle at 50% 100%, rgba(255,255,255,.5), rgba(255,255,255,.15) 70%, transparent);
  filter: blur(1px);
}
.cloud::before, .cloud::after {
  content: ""; position: absolute; bottom: 0; border-radius: 50%; background: inherit;
}
.cloud::before { width: 34px; height: 34px; left: -14px; }
.cloud::after { width: 26px; height: 26px; right: -12px; }
.cloud.c1 { width: 90px; top: 14%; animation: cloudDrift 26s linear infinite; }
.cloud.c2 { width: 70px; top: 26%; left: 10%; animation: cloudDrift 34s linear infinite reverse; }
.cloud.c3 { width: 110px; top: 8%; left: 40%; animation: cloudDrift 40s linear infinite; }
@keyframes cloudDrift { from { transform: translateX(-160px); } to { transform: translateX(120vw); } }

/* 中央 VS 徽章 */
.battle-vs {
  position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%);
  z-index: 3; font-size: 46px; font-weight: 900; color: #fff;
  text-shadow: 0 0 14px rgba(255,80,60,.9), 0 2px 6px rgba(0,0,0,.7);
  animation: vsPulse 1.6s ease-in-out infinite;
}
@keyframes vsPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .85; } 50% { transform: translate(-50%, -50%) scale(1.18); opacity: 1; } }

/* 士兵地面阴影 */
.soldier { position: relative; }
.soldier::after {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: -4px; height: 5px;
  border-radius: 50%; background: rgba(0,0,0,.4); filter: blur(1px);
}

/* 屏幕震动 */
.battle-screen.shake { animation: screenShake .3s ease; }
@keyframes screenShake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-5px, 2px); }
  40% { transform: translate(5px, -2px); }
  60% { transform: translate(-3px, 1px); }
  80% { transform: translate(3px, -1px); }
}

/* 回合横幅弹入 */
.battle-round.pop { animation: roundPop .3s ease; }
@keyframes roundPop { 0% { transform: scale(.7); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }

/* 胜负特效 */
.battle-result.win { text-shadow: 0 0 18px rgba(80,220,130,.8), 0 0 40px rgba(80,220,130,.5); animation: resultZoom .5s ease both; }
.battle-result.lose { text-shadow: 0 0 18px rgba(255,80,70,.8), 0 0 40px rgba(255,80,70,.5); animation: resultZoom .5s ease both; }
@keyframes resultZoom { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

/* 全屏特效层（礼花/血雾/闪光） */
.battle-fx { position: absolute; inset: 0; z-index: 9; pointer-events: none; overflow: hidden; }
.confetti {
  position: absolute; top: -16px; width: 9px; height: 15px; border-radius: 2px;
  opacity: .95; box-shadow: 0 1px 3px rgba(0,0,0,.3);
  animation: confettiFall linear both;
}
@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg) translateX(0); opacity: 1; }
  100% { transform: translateY(108vh) rotate(720deg) translateX(40px); opacity: .35; }
}
.confetti:nth-child(2n) { width: 7px; height: 11px; border-radius: 50%; }

/* 血雾粒子 */
.blood {
  position: absolute; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; z-index: 7;
  background: radial-gradient(circle at 40% 40%, #ffb3a0, #e0482f 70%);
  animation: bloodSplat .65s ease-out both;
}
@keyframes bloodSplat {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx, 30px), var(--dy, -40px)) scale(.25); }
}

/* 士兵阵亡 */
.soldier.dead { animation: soldierDie .6s ease-in both; }
@keyframes soldierDie {
  0% { opacity: 1; transform: translateY(0) rotate(0) scale(1); filter: none; }
  40% { opacity: .7; transform: translateY(-6px) rotate(-18deg) scale(.9); }
  100% { opacity: 0; transform: translateY(18px) rotate(-55deg) scale(.7); filter: grayscale(1) brightness(.5); }
}

/* 命中闪光 */
.battle-scene.flash { animation: sceneFlash .28s ease; }
@keyframes sceneFlash {
  0% { filter: brightness(1) saturate(1); }
  45% { filter: brightness(2.2) saturate(1.6); }
  100% { filter: brightness(1) saturate(1); }
}

/* 胜负氛围滤镜 */
.battle-scene.win-overlay .battle-field { filter: saturate(1.25) brightness(1.06); transition: filter 1s; }
.battle-scene.lose-overlay .battle-field { filter: grayscale(.85) brightness(.55); transition: filter 1s; }

/* 飞鸟 */
.battle-birds { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.bird { position: absolute; width: 12px; height: 6px; opacity: .75; }
.bird::before, .bird::after {
  content: ""; position: absolute; top: 0; width: 6px; height: 5px;
  border-top: 2px solid rgba(28,34,46,.9); border-radius: 50%;
}
.bird::before { left: 0; transform: rotate(-24deg); }
.bird::after { right: 0; transform: rotate(24deg); }
.bird.b1 { top: 12%; left: 5%; animation: birdFly 22s linear infinite; }
.bird.b2 { top: 20%; left: 40%; animation: birdFly 30s linear infinite; animation-delay: 9s; }
.bird.b3 { top: 16%; left: 70%; animation: birdFly 26s linear infinite; animation-delay: 15s; }
@keyframes birdFly {
  0% { transform: translateX(-50px) translateY(0); }
  50% { transform: translateX(45vw) translateY(-12px); }
  100% { transform: translateX(95vw) translateY(6px); }
}

/* 远景山（视差层次） */
.battle-hills-far {
  position: absolute; left: 0; right: 0; bottom: 28%; height: 14%;
  background:
    radial-gradient(120% 100% at 12% 100%, transparent 45%, rgba(58,74,92,.5) 46%, rgba(58,74,92,.5) 72%, transparent 73%),
    radial-gradient(120% 100% at 88% 100%, transparent 42%, rgba(48,62,80,.5) 43%, rgba(48,62,80,.5) 70%, transparent 71%);
  filter: blur(1px);
}
/* 近地雾气 */
.battle-fog {
  position: absolute; left: 0; right: 0; bottom: 24%; height: 10%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(214,222,226,.34) 55%, rgba(214,222,226,.06));
  animation: fogDrift 9s ease-in-out infinite alternate;
}
@keyframes fogDrift { from { transform: translateX(-2%); opacity: .8; } to { transform: translateX(2%); opacity: 1; } }

/* 地面质感 */
.battle-ground-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 2px, transparent 2px 9px),
    radial-gradient(60% 40% at 25% 30%, rgba(0,0,0,.14), transparent 70%),
    radial-gradient(50% 35% at 72% 55%, rgba(0,0,0,.12), transparent 70%);
}

/* 武将紧凑列表 */
.g-list { display: flex; flex-direction: column; gap: 5px; }
.g-row {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 10px; border-radius: 9px;
  background: linear-gradient(180deg, rgba(31,37,51,.85), rgba(21,25,36,.92));
  border: 1px solid var(--gold-line);
}
.g-row .g-portrait { width: 52px; height: 66px; border-radius: 8px; }
.g-row .g-portrait-name { font-size: 13px; }
.g-row .g-portrait-tag { font-size: 9px; padding: 1px 0; }
.g-row-main { flex: 1; min-width: 0; }
.g-row-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.g-row .g-name { font-size: 14px; }
.g-star { font-size: 10px; color: var(--gold); letter-spacing: 1px; }
.g-six { font-size: 11px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.g-tag {
  font-size: 10px; padding: 0 6px; border-radius: 999px; white-space: nowrap;
  background: rgba(232,193,90,.1); border: 1px solid rgba(232,193,90,.22); color: var(--gold-pale);
}
.g-tag.on { background: rgba(63,179,107,.15); border-color: rgba(63,179,107,.4); color: #b7eccb; }
.g-row-actions { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; flex: 0 0 auto; }
.g-row-actions .btn { padding: 3px 8px; font-size: 11px; border-radius: 6px; }
.t-icon {
  position: relative; width: 52px; height: 66px; flex: 0 0 auto; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  background:
    radial-gradient(circle at 32% 18%, rgba(255,255,255,.2), transparent 55%),
    linear-gradient(165deg, #2a2214, #12151d 82%);
  border: 2px solid rgba(232,193,90,.35);
  overflow: hidden;
}
.t-fallback { position: relative; z-index: 0; }
.t-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; z-index: 1; }
.t-icon.r4 { border-color: #c084fc; box-shadow: 0 0 14px rgba(168,85,247,.55); }
.t-icon.r5 { border-color: #f59e0b; box-shadow: 0 0 18px rgba(245,158,11,.7); }
.t-icon.r4::after, .t-icon.r5::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.28) 45%, transparent 70%);
  background-size: 220% 100%;
  animation: t-shine 2.8s ease-in-out infinite;
}
.t-icon.r5::after { animation-duration: 1.8s; }
@keyframes t-shine { 0% { background-position: 120% 0; } 100% { background-position: -40% 0; } }

/* 地图页：一屏铺满，不再上下拉 */
.map-tab { display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; gap: 8px; }
.map-tab .map-canvas { flex: 1; height: auto; min-height: 220px; }
.map-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex: 0 0 auto;
}
.map-toolbar .section-title { margin: 0; flex: 1; min-width: 0; }
.map-count {
  margin-left: 10px; font-size: 12px; font-weight: 700; letter-spacing: 1px;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(20,14,8,.55); border: 1px solid var(--gold-line);
  color: var(--gold-pale);
}
.map-count.dim { color: #e8c0b0; border-color: rgba(192,57,43,.45); }
.map-tools { display: flex; gap: 6px; flex-shrink: 0; }
.map-work {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 304px;
  gap: 10px;
}
.map-side {
  min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  padding-right: 2px;
  scrollbar-width: thin;
}
.map-legend-card .map-legend {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.map-empty-hint {
  padding: 18px 14px; border-radius: 12px;
  border: 1px dashed rgba(232,193,90,.35);
  background: rgba(18,14,8,.45);
  color: var(--muted); font-size: 13px; line-height: 1.7; text-align: center;
}
.map-intel .card { margin-top: 8px; }
.map-compass {
  position: absolute; top: 10px; right: 12px; z-index: 6;
  width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid var(--gold-line);
  background: radial-gradient(circle at 40% 35%, rgba(50,38,18,.88), rgba(16,12,8,.9));
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
  pointer-events: none;
}
.map-compass b {
  position: absolute; top: 3px; left: 0; right: 0;
  text-align: center; font-size: 11px; color: var(--gold-pale); letter-spacing: 2px;
}
.map-compass i {
  position: absolute; left: 50%; top: 22px;
  width: 0; height: 0; margin-left: -5px;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 14px solid #c0392b;
  filter: drop-shadow(0 1px 1px #000);
}
.map-scale {
  position: absolute; left: 12px; bottom: 10px; z-index: 6;
  display: flex; align-items: center; gap: 8px;
  color: var(--gold-pale); font-size: 11px; pointer-events: none;
  text-shadow: 0 1px 2px #000;
}
.map-scale i {
  display: block; width: 56px; height: 7px;
  border: 1px solid rgba(232,193,90,.7);
  border-top: none;
  background: linear-gradient(90deg, rgba(232,193,90,.35) 50%, transparent 50%);
  background-size: 14px 100%;
}
.sb-regions { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.sb-region {
  position: absolute; transform: translate(-50%, -50%);
  font-family: "Ma Shan Zheng", "STKaiti", "KaiTi", serif;
  font-size: 15px; letter-spacing: 5px; font-weight: 700;
  color: rgba(82, 48, 18, .4);
  text-shadow: 0 1px 0 rgba(255, 236, 196, .22);
  white-space: nowrap;
}
.sandbox[data-tod="night"] .sb-region { color: rgba(210, 220, 235, .26); text-shadow: none; }
.sb-ink {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  box-shadow: inset 0 0 80px rgba(20, 12, 4, .28);
  background:
    radial-gradient(60% 50% at 18% 22%, rgba(232,193,90,.06), transparent 70%),
    radial-gradient(50% 40% at 78% 70%, rgba(40,80,120,.05), transparent 72%);
}
@media (max-width: 1100px) {
  .map-work { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(168px, 30vh); }
  .map-legend-card .map-legend { flex-direction: row; flex-wrap: wrap; }
}

/* 城池界面 */
.city-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding: 14px 18px; margin-bottom: 12px; border-radius: 14px;
  background:
    radial-gradient(400px 80px at 20% 0%, rgba(232,193,90,.16), transparent 70%),
    linear-gradient(180deg, #232a3c, #181d2b);
  border: 1px solid var(--gold-line); box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
.city-header-title { display: flex; align-items: center; gap: 12px; }
.city-emblem { font-size: 44px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.city-header-name { font-family: "STKaiti", "KaiTi", serif; font-size: 22px; font-weight: 900; color: var(--gold-pale); letter-spacing: 2px; }
.city-header-sub { font-size: 12px; color: var(--muted); }
.city-header-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.chs { display: flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px; background: rgba(0,0,0,.3); border: 1px solid var(--gold-line); font-size: 13px; }
.chs span { font-size: 15px; }
.chs b { color: var(--gold-pale); font-variant-numeric: tabular-nums; }

.building-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
@media (max-width: 900px) { .building-grid { grid-template-columns: repeat(2, 1fr); } }

/* =====================================================================
 * 战前三策弹窗
 * ===================================================================== */
.tactic-brief {
  display: flex; justify-content: center; gap: 26px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 12px; border-radius: 10px;
  background: rgba(0,0,0,.28); border: 1px solid var(--gold-line);
  font-size: 13px;
}
.tactic-brief b { font-variant-numeric: tabular-nums; }
.tactic-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.tactic-card {
  position: relative; display: grid;
  grid-template-columns: 44px 64px 1fr auto; grid-template-rows: auto auto auto;
  column-gap: 10px; align-items: center; text-align: left;
  padding: 12px 14px; border-radius: 12px;
  background: linear-gradient(180deg, #1c2330, #151a26);
  border: 1px solid var(--gold-line);
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.tactic-card:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 6px 18px rgba(0,0,0,.4), 0 0 12px var(--gold-glow); }
.tactic-card.recommended { border-color: rgba(232,193,90,.55); }
.tc-icon { grid-row: 1 / span 3; font-size: 30px; text-align: center; filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.tc-name { font-size: 16px; font-weight: 900; color: var(--gold-pale); letter-spacing: 2px; }
.tc-name em { font-style: normal; font-size: 11px; color: var(--gold); border: 1px solid var(--gold-line); border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: 2px; }
.tc-desc { grid-column: 3 / span 2; font-size: 12px; color: var(--muted); margin-top: 2px; }
.tc-stats { grid-column: 3 / span 2; font-size: 12px; color: var(--text); margin-top: 4px; font-variant-numeric: tabular-nums; }
.tc-bar { grid-column: 3 / span 2; display: block; height: 5px; border-radius: 3px; background: rgba(0,0,0,.45); overflow: hidden; margin-top: 6px; }
.tc-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); transition: width .5s ease; }
.tc-odds { grid-column: 4; grid-row: 1; font-size: 12px; color: var(--gold); font-weight: 700; white-space: nowrap; }

/* =====================================================================
 * 连胜角标与横幅
 * ===================================================================== */
.streak-badge {
  display: inline-block; margin-left: 8px; padding: 2px 10px;
  border-radius: 999px; font-size: 12px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #f97316, #dc2626);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 0 12px rgba(249,115,22,.6);
  animation: streak-pulse 1.6s ease-in-out infinite;
}
@keyframes streak-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(249,115,22,.45); }
  50% { box-shadow: 0 0 18px rgba(249,115,22,.85); }
}
.streak-inline { margin-left: 8px; font-size: 12px; color: #f97316; font-weight: 800; }
.streak-banner {
  margin-top: 8px; padding: 5px 12px; border-radius: 8px; text-align: center;
  font-size: 12px; font-weight: 700; color: #fdba74;
  background: rgba(249,115,22,.12); border: 1px solid rgba(249,115,22,.4);
}

/* =====================================================================
 * 战利品逐条弹出
 * ===================================================================== */
.loot-pop {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 3px auto; padding: 4px 14px; width: fit-content;
  border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--text);
  background: linear-gradient(180deg, #26304a, #1a2133);
  border: 1px solid var(--gold-line);
  animation: loot-in .38s cubic-bezier(.2,1.4,.4,1) both;
}
.loot-pop span { font-size: 15px; }
.loot-gold { color: var(--gold-pale); border-color: rgba(232,193,90,.6); box-shadow: 0 0 10px var(--gold-glow); }
.loot-bad { color: #fca5a5; border-color: rgba(224,90,78,.5); background: linear-gradient(180deg, #3a2028, #241419); }
@keyframes loot-in {
  from { opacity: 0; transform: translateY(14px) scale(.85); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* =====================================================================
 * 资源栏数字跳动
 * ===================================================================== */
.resource-chip .rc-val { transition: color .15s; }
.resource-chip.bump { animation: res-bump .45s ease; }
@keyframes res-bump {
  0% { transform: translateY(0); }
  30% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}
.resource-chip.bump .rc-val { color: var(--gold-pale); text-shadow: 0 0 8px var(--gold-glow); }

/* =====================================================================
 * 地图占领光波
 * ===================================================================== */
.map-city.captured-fx .mc-dot { animation: capture-glow 1.1s ease-in-out 3; }
.map-city.captured-fx::after {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 4;
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--gold); opacity: 0;
  transform: translate(-50%, -50%);
  animation: capture-wave 1.05s ease-out 3;
  pointer-events: none;
}
@keyframes capture-glow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(232,193,90,.4)); }
  50% { filter: drop-shadow(0 0 14px rgba(232,193,90,.95)); }
}
@keyframes capture-wave {
  0% { opacity: .9; width: 14px; height: 14px; }
  100% { opacity: 0; width: 68px; height: 68px; }
}

/* =====================================================================
 * 总览势力对比条
 * ===================================================================== */
.fp-row { display: grid; grid-template-columns: 52px 1fr 56px; align-items: center; gap: 10px; padding: 3px 0; }
.fp-name { font-size: 13px; font-weight: 800; }
.fp-bar { height: 10px; border-radius: 5px; background: rgba(0,0,0,.4); overflow: hidden; }
.fp-bar i { display: block; height: 100%; border-radius: 5px; transition: width .6s ease; }
.fp-val { font-size: 12px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

/* =====================================================================
 * 开始界面 · 立绘化重做（v48）
 * ===================================================================== */
.start-screen { overflow-y: auto; }
.start-bg {
  position: fixed; inset: 0; z-index: 0;
  background: url('../assets/backgrounds/xiongxin.jpg') center 30% / cover no-repeat;
  filter: brightness(.42) saturate(.9);
}
.start-inner { position: relative; z-index: 1; }
.start-split { display: flex; gap: 22px; align-items: stretch; justify-content: center; margin: 6px 0 14px; }
.start-hero {
  width: 220px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  border: 1px solid var(--gold-line); border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, rgba(13,16,24,.15), rgba(13,16,24,.88) 78%);
  position: relative; min-height: 300px;
}
.start-hero img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center;
  mask-image: linear-gradient(180deg, #000 62%, transparent 96%);
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 96%);
  animation: hero-in .5s ease both;
}
@keyframes hero-in { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
.sh-name { font-family: "STKaiti", "KaiTi", serif; font-size: 30px; font-weight: 900; letter-spacing: 6px; text-shadow: 0 2px 10px #000; z-index: 1; }
.sh-skill { font-size: 13px; color: var(--gold-pale); margin: 4px 0 14px; z-index: 1; text-shadow: 0 1px 6px #000; }
.sh-hint { margin: auto; color: var(--muted-2); font-size: 13px; text-align: center; line-height: 2; }
.faction-card { position: relative; overflow: hidden; }
.faction-card .f-portrait {
  position: absolute; right: -34px; bottom: -12px; width: 128px; height: 128px;
  border-radius: 50%; overflow: hidden; opacity: .85; pointer-events: none;
  border: 1px solid var(--gold-line);
  mask-image: radial-gradient(circle, #000 58%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle, #000 58%, transparent 72%);
  transition: transform .25s ease, opacity .25s ease;
}
.faction-card .f-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.faction-card:hover .f-portrait { transform: scale(1.08); opacity: 1; }
.faction-card.selected { border-color: var(--fcolor); box-shadow: 0 0 0 1px var(--fcolor), 0 10px 26px rgba(0,0,0,.5), 0 0 22px var(--fcolor); }
.faction-card .f-hero { font-size: 11px; color: var(--gold-pale); margin-top: 3px; min-height: 15px; }
.faction-card .f-start { margin-top: 8px; width: 100%; }
@media (max-width: 980px) {
  .start-split { flex-direction: column; align-items: center; }
  .start-hero { width: 100%; max-width: 340px; }
}

/* =====================================================================
 * 战斗画面 · 实景背景（v48）
 * ===================================================================== */
.battle-photo {
  position: absolute; inset: 0; z-index: 1;   /* 覆盖 CSS 场景层（sky/hills/ground 作兜底） */
  background-size: cover; background-position: center 34%;
  filter: saturate(.9) brightness(.86);
  animation: photo-in .6s ease both;
}
.battle-photo[data-scene="zhanhuo"] { filter: saturate(1.05) brightness(.78) contrast(1.06); }
.battle-photo[data-scene="wangshi"] { filter: saturate(.95) brightness(.9); }
.battle-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,12,18,.42) 0%, rgba(10,12,18,.08) 34%, rgba(10,12,18,.5) 82%, rgba(10,12,18,.82) 100%);
}
@keyframes photo-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }

/* =====================================================================
 * 事件分支选择卡片（v48）
 * ===================================================================== */
.ev-choices { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ev-choice {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 14px; border-radius: 10px; text-align: center;
  background: linear-gradient(180deg, #1c2330, #151a26);
  border: 1px solid var(--gold-line);
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.ev-choice:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 6px 16px rgba(0,0,0,.4), 0 0 12px var(--gold-glow); }
.ev-label { font-size: 15px; font-weight: 800; color: var(--gold-pale); letter-spacing: 1px; }
.ev-hint { font-size: 12px; color: var(--muted); }

/* =====================================================================
 * 军师计策选择（v48）
 * ===================================================================== */
.strat-head { text-align: center; font-size: 13px; margin-bottom: 8px; color: var(--text); }
.strat-head b { color: var(--gold); }
.strat-none { text-align: center; font-size: 12px; color: var(--muted-2); padding: 8px 0; }
.strat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
@media (max-width: 860px) { .strat-grid { grid-template-columns: repeat(2, 1fr); } }
.strat-card {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 8px; border-radius: 10px; text-align: center;
  background: linear-gradient(180deg, #1c2330, #151a26);
  border: 1px solid var(--gold-line);
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.strat-card:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--gold); }
.strat-card.sel { border-color: var(--gold); box-shadow: 0 0 14px var(--gold-glow); background: linear-gradient(180deg, #2a2f1e, #1c2015); }
.strat-card.off { opacity: .45; cursor: not-allowed; }
.sc-icon { font-size: 24px; }
.sc-name { font-size: 14px; font-weight: 800; color: var(--gold-pale); letter-spacing: 2px; }
.sc-desc { font-size: 11px; color: var(--muted); line-height: 1.4; }
.sc-cost { font-size: 11px; color: var(--text); opacity: .85; }

/* =====================================================================
 * v50 沙盘地图（预合成底图 + 动态城堡层）
 * ===================================================================== */
.sandbox-wrap {
  position: relative;
  min-height: 0; height: 100%;
  padding: 0;
  perspective: none;
  container-type: size;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border-radius: 14px;
  background:
    radial-gradient(80% 70% at 50% 40%, #2a2114 0%, #120e08 100%);
  border: 1px solid var(--gold-line);
  box-shadow: inset 0 0 40px rgba(0,0,0,.35);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
}
.sandbox {
  position: relative;
  width: min(100%, calc(100cqh * 16 / 9));
  height: auto;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px; overflow: hidden;
  border: 2px solid var(--gold-line);
  box-shadow: 0 10px 28px rgba(0,0,0,.5), inset 0 0 80px rgba(0,0,0,.28);
  transform-origin: center center;
  transition: box-shadow .25s ease;
  backface-visibility: hidden;
  contain: layout style;
}
@supports not (width: 1cqh) {
  .sandbox { width: 100%; height: auto; max-height: 100%; }
}
.sandbox-wrap.grabbing { cursor: grabbing; }
.sandbox-wrap.grabbing .sandbox {
  box-shadow: 0 14px 36px rgba(0,0,0,.55), inset 0 0 40px rgba(0,0,0,.2);
}
/* 拖拽时关掉重特效，避免黑块卡顿 */
.sandbox-wrap.grabbing .sb-climate,
.sandbox-wrap.grabbing .sb-traffic,
.sandbox-wrap.grabbing .sb-birds,
.sandbox-wrap.grabbing .sb-atmosphere,
.sandbox-wrap.grabbing .sb-sunlight {
  visibility: hidden !important;
}
.sandbox-wrap.grabbing .sb-cloud,
.sandbox-wrap.grabbing .sb-tree,
.sandbox-wrap.grabbing .mc-pennant,
.sandbox-wrap.grabbing .mc-smoke,
.sandbox-wrap.grabbing .mc-patrol {
  animation-play-state: paused !important;
}
.sandbox-wrap.grabbing .sb-ground {
  filter: saturate(1.08) contrast(1.04) brightness(1.02) !important;
}
.sandbox-wrap.grabbing .sb-parchment {
  mix-blend-mode: normal;
  opacity: .35;
}
.sandbox, .sandbox * {
  user-select: none;
  -webkit-user-select: none;
}
.sandbox img { -webkit-user-drag: none; }
.sb-ground {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: fill; user-select: none; -webkit-user-drag: none;
  filter: saturate(1.12) contrast(1.08) brightness(1.02);
}
.sb-parchment {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 62%, rgba(18,12,4,.28) 100%),
    repeating-linear-gradient(0deg, transparent, transparent 46px, rgba(232,193,90,.028) 47px),
    repeating-linear-gradient(90deg, transparent, transparent 46px, rgba(232,193,90,.025) 47px);
  mix-blend-mode: soft-light;
  opacity: .7;
}
.sb-roads {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}
.sb-roads { z-index: 2; }
.sb-roads path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sb-roads .dirt-edge {
  stroke: rgba(86, 56, 24, .58);
  stroke-width: 8.2;
}
.sb-roads .dirt-bed {
  stroke: rgba(198, 148, 72, .88);
  stroke-width: 5.4;
}
.sb-roads .dirt-rut {
  stroke: rgba(120, 82, 36, .4);
  stroke-width: 1.15;
  stroke-dasharray: 5 9;
}

/* 天空 / 太阳 / 月亮 / 云 / 河流 / 林木 / 活物 */
.sb-sky { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.sb-atmosphere, .sb-sunlight {
  position: absolute; inset: 0; pointer-events: none;
  transition: opacity 2.8s ease, background 2.8s ease;
}
.sb-sunlight {
  background:
    radial-gradient(ellipse 58% 46% at 87% 9%, rgba(255,244,214,.38), transparent 56%),
    radial-gradient(ellipse 90% 70% at 78% -4%, rgba(255,214,150,.16), transparent 64%);
  mix-blend-mode: screen;
}
.sb-atmosphere {
  background: conic-gradient(from 198deg at 88% 8%,
    transparent 0deg,
    rgba(255,238,204,.09) 5deg,
    transparent 11deg,
    transparent 15deg,
    rgba(255,226,176,.06) 20deg,
    transparent 27deg,
    transparent 31deg,
    rgba(255,236,200,.07) 36deg,
    transparent 43deg);
  filter: blur(22px);
  mix-blend-mode: screen;
  opacity: .5;
}
.sb-sun, .sb-moon {
  position: absolute; border-radius: 50%; z-index: 2;
  transition: top 3.6s ease, right 3.6s ease, left 3.6s ease, opacity 2.8s ease, background 1.2s ease, box-shadow 1.2s ease, width 1.2s ease, height 1.2s ease;
}
.sb-sun {
  top: 6%; right: 12%; width: 18px; height: 18px;
  background: radial-gradient(circle at 42% 38%, #fffef6 0 46%, #ffe7b0 68%, rgba(255,196,90,0) 100%);
  box-shadow:
    0 0 6px 2px rgba(255,252,240,.95),
    0 0 22px 10px rgba(255,226,160,.55),
    0 0 64px 26px rgba(255,186,80,.28),
    0 0 120px 48px rgba(255,168,60,.12);
}
.sb-sun::before {
  content: "";
  position: absolute; inset: -72px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,236,196,.42) 0%, rgba(255,206,120,.12) 36%, transparent 68%);
  filter: blur(10px);
  mix-blend-mode: screen;
}
.sb-sun::after {
  content: "";
  position: absolute; inset: 22%; border-radius: 50%;
  background: #fffef8;
  filter: blur(1px);
}
.sb-moon {
  top: 8%; left: 16%; width: 42px; height: 42px; opacity: 0;
  background: radial-gradient(circle at 36% 32%, #f4f7fc 0%, #cfd8e8 58%, #8e9bb0 100%);
  box-shadow: 0 0 18px 6px rgba(200,220,255,.32), 0 0 56px 16px rgba(140,170,220,.16);
}
.sb-moon i {
  position: absolute; inset: 10px 6px 8px 16px; border-radius: 50%;
  background: rgba(150, 166, 190, .28);
}
.sandbox[data-tod="dawn"] .sb-sun {
  top: 21%; right: 36%; width: 22px; height: 22px;
  background: radial-gradient(circle at 42% 38%, #fff4e4 0 44%, #ffb070 70%, rgba(255,120,40,0) 100%);
  box-shadow:
    0 0 10px 4px rgba(255,220,180,.8),
    0 0 36px 16px rgba(255,140,70,.42),
    0 0 90px 36px rgba(255,90,30,.18);
}
.sandbox[data-tod="dawn"] .sb-sunlight {
  background:
    radial-gradient(ellipse 70% 52% at 64% 26%, rgba(255,176,110,.42), transparent 62%),
    linear-gradient(180deg, rgba(255,150,80,.2), transparent 42%);
}
.sandbox[data-tod="dawn"] .sb-atmosphere {
  background: conic-gradient(from 210deg at 64% 24%,
    transparent 0deg, rgba(255,170,110,.1) 8deg, transparent 16deg,
    transparent 22deg, rgba(255,140,70,.07) 28deg, transparent 36deg);
  opacity: .45;
}
.sandbox[data-tod="day"] .sb-sun { top: 6%; right: 12%; }
.sandbox[data-tod="dusk"] .sb-sun {
  top: 23%; right: 68%; width: 24px; height: 24px;
  background: radial-gradient(circle at 42% 38%, #ffe8c8 0 40%, #ff7a38 62%, rgba(180,30,10,0) 100%);
  box-shadow:
    0 0 14px 6px rgba(255,160,80,.7),
    0 0 40px 18px rgba(255,90,30,.4),
    0 0 100px 40px rgba(160,30,8,.2);
}
.sandbox[data-tod="dusk"] .sb-sunlight {
  background:
    radial-gradient(ellipse 74% 56% at 32% 28%, rgba(255,120,50,.38), transparent 60%),
    linear-gradient(180deg, rgba(180,50,20,.18), transparent 46%);
}
.sandbox[data-tod="dusk"] .sb-atmosphere {
  background: conic-gradient(from 160deg at 32% 26%,
    transparent 0deg, rgba(255,110,50,.1) 8deg, transparent 16deg,
    transparent 22deg, rgba(255,80,30,.07) 30deg, transparent 38deg);
  opacity: .42;
}
.sandbox[data-tod="night"] .sb-sun,
.sandbox[data-tod="night"] .sb-sunlight,
.sandbox[data-tod="night"] .sb-atmosphere { opacity: 0; }
.sandbox[data-tod="night"] .sb-moon { opacity: 1; }
.sandbox[data-tod="dusk"] .sb-moon { opacity: .28; }
.sandbox[data-tod="dawn"] .sb-ground { filter: saturate(1.08) brightness(.82) hue-rotate(-8deg); }
.sandbox[data-tod="day"][data-season="spring"] .sb-ground { filter: saturate(1.12) contrast(1.05); }
.sandbox[data-tod="day"][data-season="summer"] .sb-ground { filter: saturate(1.2) contrast(1.08) brightness(1.04); }
.sandbox[data-tod="day"][data-season="autumn"] .sb-ground { filter: saturate(1.15) hue-rotate(-12deg) sepia(.12); }
.sandbox[data-tod="day"][data-season="winter"] .sb-ground { filter: saturate(.72) brightness(1.1) contrast(.96); }
.sandbox[data-tod="dusk"] .sb-ground { filter: saturate(1.25) hue-rotate(-18deg) brightness(.68) sepia(.18); }
.sandbox[data-tod="night"] .sb-ground { filter: saturate(.7) brightness(.42) hue-rotate(14deg) contrast(1.05); }
.sandbox[data-season="summer"] .sb-sun {
  box-shadow:
    0 0 8px 3px rgba(255,252,240,.98),
    0 0 28px 12px rgba(255,220,140,.62),
    0 0 80px 32px rgba(255,176,50,.32),
    0 0 140px 56px rgba(255,150,40,.14);
}
.sandbox[data-season="autumn"] .sb-sun {
  background: radial-gradient(circle at 42% 38%, #fff6e4 0 46%, #f0b060 70%, rgba(196,90,20,0) 100%);
}
.sandbox[data-season="winter"] .sb-sun {
  filter: saturate(.55) brightness(1.12);
  box-shadow:
    0 0 10px 4px rgba(240,246,255,.7),
    0 0 32px 14px rgba(200,220,255,.28);
}
.sandbox[data-season="winter"] .sb-sunlight {
  background:
    radial-gradient(ellipse 50% 40% at 87% 9%, rgba(230,240,255,.28), transparent 56%),
    radial-gradient(ellipse 80% 60% at 78% -4%, rgba(200,220,255,.1), transparent 64%);
}
.sb-cloud {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.48);
  filter: blur(7px);
  box-shadow: 28px 6px 0 8px rgba(255,255,255,.38), -22px 8px 0 2px rgba(255,255,255,.28);
  animation: sb-cloud-drift 42s linear infinite;
}
.sb-cloud.c1 { width: 180px; height: 46px; top: 7%; left: -22%; animation-duration: 46s; }
.sb-cloud.c2 { width: 130px; height: 34px; top: 16%; left: -30%; animation-duration: 36s; animation-delay: -12s; opacity: .72; }
.sb-cloud.c3 { width: 210px; height: 52px; top: 3%; left: -40%; animation-duration: 54s; animation-delay: -22s; opacity: .55; }
.sb-cloud.c4 { width: 150px; height: 38px; top: 22%; left: -18%; animation-duration: 40s; animation-delay: -8s; opacity: .5; }
.sb-cloud.c5 { width: 100px; height: 28px; top: 11%; left: -50%; animation-duration: 32s; animation-delay: -18s; opacity: .6; }
.sb-cloud.c6 { width: 190px; height: 44px; top: 28%; left: -35%; animation-duration: 50s; animation-delay: -28s; opacity: .4; }
.sandbox[data-tod="night"] .sb-cloud { background: rgba(180,196,220,.28); box-shadow: none; }
.sandbox[data-season="winter"] .sb-cloud { background: rgba(240,248,255,.62); }
@keyframes sb-cloud-drift {
  from { transform: translateX(0); }
  to { transform: translateX(145vw); }
}
.sb-rivers {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1; overflow: visible;
}
.sb-traffic {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 3; overflow: visible;
}
.sb-rivers use, .sb-rivers path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sb-rivers .rv-bank.yellow { stroke: rgba(110, 78, 32, .42); stroke-width: 22; }
.sb-rivers .rv-water.yellow { stroke: rgba(196, 154, 62, .9); stroke-width: 14; }
.sb-rivers .rv-core.yellow { stroke: rgba(228, 196, 104, .5); stroke-width: 6; }
.sb-rivers .rv-shine.yellow { stroke: rgba(255, 230, 150, .42); stroke-width: 2.6; stroke-dasharray: 16 30; animation: river-flow 5.4s linear infinite; }
.sb-rivers .rv-bank.yangtze { stroke: rgba(28, 62, 68, .4); stroke-width: 28; }
.sb-rivers .rv-water.yangtze { stroke: rgba(42, 108, 128, .88); stroke-width: 18; }
.sb-rivers .rv-core.yangtze { stroke: rgba(86, 164, 168, .5); stroke-width: 8; }
.sb-rivers .rv-shine.yangtze { stroke: rgba(176, 226, 226, .4); stroke-width: 3.2; stroke-dasharray: 20 34; animation: river-flow 6.2s linear infinite; }
.sb-rivers .rv-bank.han, .sb-rivers .rv-bank.huai { stroke: rgba(36, 70, 72, .28); stroke-width: 12; }
.sb-rivers .rv-water.han, .sb-rivers .rv-water.huai { stroke: rgba(70, 132, 138, .7); stroke-width: 7; }
@keyframes river-flow { to { stroke-dashoffset: -80; } }
.sandbox[data-season="winter"] .rv-water.yellow { stroke: rgba(210, 190, 140, .78); }
.sandbox[data-season="winter"] .rv-water.yangtze { stroke: rgba(90, 130, 148, .75); }
.sandbox[data-season="winter"] .sb-boat.raft { display: none; }
.sb-boat, .sb-wagon { filter: drop-shadow(0.4px 0.8px 1.1px rgba(0,0,0,.42)); }
.sb-wagon-img { pointer-events: none; }
.sb-nature { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.sb-tree {
  position: absolute; height: 38px;
  transform: translate(-50%, -82%);
  transform-origin: 50% 92%;
  filter: drop-shadow(1px 2px 2px rgba(0,0,0,.42));
  animation: tree-sway 3.3s ease-in-out infinite;
}
.sb-tree.t1 { height: 48px; animation-duration: 4.2s; }
.sb-tree.grove { height: 30px; opacity: .92; }
.sb-rock {
  position: absolute; height: 26px;
  transform: translate(-50%, -70%);
  opacity: .92;
  filter: drop-shadow(1px 2px 2px rgba(0,0,0,.45));
}
.sandbox[data-season="autumn"] .sb-tree { filter: hue-rotate(-28deg) saturate(1.35) drop-shadow(1px 2px 2px rgba(0,0,0,.42)); }
.sandbox[data-season="winter"] .sb-tree { filter: saturate(.25) brightness(1.4) drop-shadow(1px 2px 2px rgba(0,0,0,.35)); }
@keyframes tree-sway {
  0%, 100% { transform: translate(-50%, -82%) rotate(-6deg); }
  50% { transform: translate(-50%, -82%) rotate(8deg); }
}
.sb-birds, .sb-beacons {
  position: absolute; inset: 0; pointer-events: none; z-index: 4;
  overflow: hidden;
}
.sb-climate {
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
  overflow: hidden;
}
.sb-wx-tint {
  position: absolute; inset: 0;
  transition: background 2.4s ease, opacity 2.4s ease;
  opacity: 0;
}
.sb-wx-fog {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 2.2s ease;
  pointer-events: none;
}
.sandbox[data-tod="dawn"][data-wx="mist"] .sb-wx-fog,
.sandbox[data-tod="dusk"][data-wx="mist"] .sb-wx-fog { opacity: .32; }
.sandbox[data-tod="dawn"][data-wx="clear"] .sb-wx-fog,
.sandbox[data-tod="dusk"][data-wx="clear"] .sb-wx-fog,
.sandbox[data-tod="dawn"][data-wx="petals"] .sb-wx-fog,
.sandbox[data-tod="dusk"][data-wx="leaves"] .sb-wx-fog { opacity: .1; }
.sb-wx-fog img {
  position: absolute; width: 130%; height: 70%;
  left: -15%; bottom: -8%;
  object-fit: cover;
  animation: wx-fog-drift 48s ease-in-out infinite alternate;
  filter: blur(1px);
  opacity: .85;
}
.sb-wx-fog img.f2 {
  width: 140%; height: 55%; left: -20%; top: 8%;
  opacity: .35; animation-duration: 62s; animation-direction: alternate-reverse;
}
.sb-wx-shadow {
  position: absolute; inset: 0; opacity: 0;
  mix-blend-mode: multiply;
}
.sb-wx-shadow img {
  position: absolute; width: 120%; height: 80%;
  left: -10%; top: -5%;
  object-fit: cover;
  animation: wx-shadow-drift 54s linear infinite;
  opacity: .4;
}
.sb-wx-sheet {
  position: absolute; inset: -20% -10%;
  background-repeat: repeat;
  background-size: 220px 220px;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.sb-wx-parts {
  position: absolute; inset: 0; overflow: hidden;
}
.sb-wx-parts i, .sb-wx-parts img {
  position: absolute; top: -12%;
  pointer-events: none;
}
.sb-wx-parts .petal, .sb-wx-parts .leaf {
  width: calc(10px * var(--sz, 1)); height: auto;
  animation-name: wx-fall-spin;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
  opacity: .9;
}
.sb-wx-parts .flake {
  width: calc(5px * var(--sz, 1)); height: calc(5px * var(--sz, 1));
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, rgba(220,235,255,.75));
  box-shadow: 0 0 4px rgba(255,255,255,.8);
  animation-name: wx-snow;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  opacity: .88;
}
.sb-wx-parts .flake.hard {
  width: calc(4px * var(--sz, 1)); height: calc(4px * var(--sz, 1));
  animation-name: wx-blizzard;
}
.sb-wx-parts .drop {
  width: 1.4px; height: calc(12px * var(--sz, 1));
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, rgba(210,230,255,.78));
  animation-name: wx-rain;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  opacity: .75;
}
.sb-wx-parts .drop.hard {
  height: calc(16px * var(--sz, 1));
  background: linear-gradient(180deg, transparent, rgba(190,215,245,.88));
  animation-name: wx-rain-hard;
}
.sb-wx-flash {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(circle at 70% 18%, rgba(230,240,255,.45), transparent 45%);
  animation: none;
}
.sandbox[data-wx="storm"] .sb-wx-flash {
  animation: wx-thunder 7.5s ease-in-out infinite;
}
.sb-wx-flash img {
  position: absolute; width: 38%; right: 8%; top: 2%;
  opacity: .85; filter: blur(2px);
}
@keyframes wx-fog-drift {
  from { transform: translateX(-4%) translateY(0); }
  to { transform: translateX(6%) translateY(-2%); }
}
@keyframes wx-shadow-drift {
  from { transform: translateX(-8%); }
  to { transform: translateX(18%); }
}
@keyframes wx-sheet-rain {
  from { transform: translate(0,0); }
  to { transform: translate(-40px, 180px); }
}
@keyframes wx-sheet-snow {
  from { transform: translate(0,0); }
  to { transform: translate(28px, 140px); }
}
@keyframes wx-fall-spin {
  0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: .95; }
  100% { transform: translateY(118vh) translateX(42px) rotate(420deg); opacity: .15; }
}
@keyframes wx-snow {
  0% { transform: translateY(0) translateX(0); opacity: .9; }
  100% { transform: translateY(118vh) translateX(36px); opacity: .2; }
}
@keyframes wx-blizzard {
  0% { transform: translateY(0) translateX(0); opacity: .95; }
  100% { transform: translateY(110vh) translateX(110px); opacity: .25; }
}
@keyframes wx-rain {
  0% { transform: translateY(0) translateX(0) rotate(12deg); opacity: .8; }
  100% { transform: translateY(120vh) translateX(28px) rotate(12deg); opacity: .1; }
}
@keyframes wx-rain-hard {
  0% { transform: translateY(0) translateX(0) rotate(18deg); opacity: .9; }
  100% { transform: translateY(125vh) translateX(48px) rotate(18deg); opacity: .05; }
}
@keyframes wx-thunder {
  0%, 86%, 100% { opacity: 0; }
  88% { opacity: .85; }
  90% { opacity: .12; }
  92% { opacity: .7; }
  94% { opacity: 0; }
}

/* weather states */
.sandbox[data-wx="clear"] .sb-wx-tint,
.sandbox[data-wx="clear"] .sb-wx-fog,
.sandbox[data-wx="petals"] .sb-wx-fog,
.sandbox[data-wx="leaves"] .sb-wx-fog,
.sandbox[data-wx="haze"] .sb-wx-fog { opacity: 0; }
.sandbox[data-wx="mist"] .sb-wx-tint {
  opacity: 1;
  background: linear-gradient(180deg, rgba(210,220,230,.06), rgba(190,205,215,.12) 70%, rgba(170,185,200,.08));
}
.sandbox[data-wx="mist"] .sb-wx-fog { opacity: .28; }
.sandbox[data-wx="haze"] .sb-wx-tint {
  opacity: 1;
  background: radial-gradient(80% 70% at 50% 30%, rgba(255,210,120,.1), rgba(180,140,80,.05) 70%);
}
.sandbox[data-wx="haze"] .sb-wx-shadow { opacity: .22; }
.sandbox[data-wx="drizzle"] .sb-wx-tint {
  opacity: 1;
  background: linear-gradient(180deg, rgba(120,140,160,.08), rgba(90,110,130,.12));
}
.sandbox[data-wx="drizzle"] .sb-wx-fog { opacity: .18; }
.sandbox[data-wx="drizzle"] .sb-wx-shadow { opacity: .28; }
.sandbox[data-wx="drizzle"] .sb-wx-sheet {
  opacity: .28; background-size: 260px 260px;
  animation: wx-sheet-rain 1.8s linear infinite;
}
.sandbox[data-wx="rain"] .sb-wx-tint {
  opacity: 1;
  background: linear-gradient(180deg, rgba(70,90,120,.14), rgba(40,55,75,.2));
}
.sandbox[data-wx="rain"] .sb-wx-fog { opacity: .24; }
.sandbox[data-wx="rain"] .sb-wx-shadow { opacity: .4; }
.sandbox[data-wx="rain"] .sb-wx-sheet {
  opacity: .4; background-size: 200px 200px;
  animation: wx-sheet-rain 1.15s linear infinite;
}
.sandbox[data-wx="storm"] .sb-wx-tint {
  opacity: 1;
  background: linear-gradient(180deg, rgba(30,40,70,.26), rgba(18,22,36,.34));
}
.sandbox[data-wx="storm"] .sb-wx-fog { opacity: .32; }
.sandbox[data-wx="storm"] .sb-wx-shadow { opacity: .5; }
.sandbox[data-wx="storm"] .sb-wx-sheet {
  opacity: .55; background-size: 170px 170px;
  animation: wx-sheet-rain .75s linear infinite;
}
.sandbox[data-wx="snow"] .sb-wx-tint {
  opacity: 1;
  background: linear-gradient(180deg, rgba(220,230,240,.08), rgba(200,215,230,.12));
}
.sandbox[data-wx="snow"] .sb-wx-fog { opacity: .2; }
.sandbox[data-wx="snow"] .sb-wx-sheet {
  opacity: .35; mix-blend-mode: screen; background-size: 240px 240px;
  animation: wx-sheet-snow 4.5s linear infinite;
}
.sandbox[data-wx="blizzard"] .sb-wx-tint {
  opacity: 1;
  background: linear-gradient(180deg, rgba(230,238,248,.16), rgba(190,205,220,.24));
}
.sandbox[data-wx="blizzard"] .sb-wx-fog { opacity: .36; }
.sandbox[data-wx="blizzard"] .sb-wx-sheet {
  opacity: .5; mix-blend-mode: screen; background-size: 180px 180px;
  animation: wx-sheet-snow 2.2s linear infinite;
}
.sandbox[data-wx="petals"] .sb-wx-tint {
  opacity: 1;
  background: radial-gradient(70% 60% at 50% 20%, rgba(255,190,210,.05), transparent 70%);
}
.sandbox[data-wx="leaves"] .sb-wx-tint {
  opacity: 1;
  background: radial-gradient(70% 60% at 50% 25%, rgba(210,120,40,.05), transparent 70%);
}

/* weather dims sun / thickens clouds */
.sandbox[data-wx="rain"] .sb-sun,
.sandbox[data-wx="storm"] .sb-sun,
.sandbox[data-wx="blizzard"] .sb-sun { opacity: .25; filter: saturate(.4); }
.sandbox[data-wx="drizzle"] .sb-sun,
.sandbox[data-wx="snow"] .sb-sun,
.sandbox[data-wx="mist"] .sb-sun { opacity: .55; }
.sandbox[data-wx="rain"] .sb-sunlight,
.sandbox[data-wx="storm"] .sb-sunlight,
.sandbox[data-wx="blizzard"] .sb-sunlight { opacity: .15; }
.sandbox[data-wx="rain"] .sb-cloud,
.sandbox[data-wx="storm"] .sb-cloud,
.sandbox[data-wx="blizzard"] .sb-cloud {
  background: rgba(120,135,155,.62);
  filter: blur(8px);
  opacity: .9;
}
.sandbox[data-wx="storm"] .sb-birds { opacity: .15; }
.sandbox[data-wx="blizzard"] .sb-birds,
.sandbox[data-wx="rain"] .sb-birds { opacity: .35; }

/* season + weather ground polish */
.sandbox[data-season="spring"][data-tod="day"][data-wx="clear"] .sb-ground,
.sandbox[data-season="spring"][data-tod="day"][data-wx="petals"] .sb-ground {
  filter: saturate(1.18) contrast(1.06) brightness(1.03);
}
.sandbox[data-season="summer"][data-tod="day"][data-wx="clear"] .sb-ground {
  filter: saturate(1.28) contrast(1.1) brightness(1.06);
}
.sandbox[data-season="summer"][data-tod="day"][data-wx="haze"] .sb-ground {
  filter: saturate(1.05) contrast(.95) brightness(1.08) sepia(.08);
}
.sandbox[data-season="autumn"][data-tod="day"] .sb-ground {
  filter: saturate(1.18) hue-rotate(-14deg) sepia(.14) contrast(1.05);
}
.sandbox[data-season="winter"][data-tod="day"] .sb-ground {
  filter: saturate(.55) brightness(1.12) contrast(.95);
}
.sandbox[data-wx="rain"] .sb-ground,
.sandbox[data-wx="storm"] .sb-ground {
  filter: saturate(.82) brightness(.82) contrast(1.04) !important;
}
.sandbox[data-wx="snow"] .sb-ground,
.sandbox[data-wx="blizzard"] .sb-ground {
  filter: saturate(.55) brightness(1.12) contrast(.94) !important;
}
.sandbox[data-wx="mist"] .sb-ground {
  filter: saturate(.92) brightness(.96) contrast(.98) !important;
}

.sb-stars {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 2.8s ease;
  pointer-events: none;
}
.sb-star {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 4px rgba(255,255,255,.85);
  animation: sb-star-twinkle 3.6s ease-in-out infinite;
}
.sandbox[data-tod="night"] .sb-stars { opacity: 1; }
.sandbox[data-tod="dusk"] .sb-stars { opacity: .35; }
@keyframes sb-star-twinkle {
  0%, 100% { opacity: .35; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.4); }
}

.sb-flock {
  position: absolute; left: -12%;
  display: flex; gap: 11px;
  animation: flock-fly 22s linear infinite;
}
.sb-flock.f1 { left: -18%; }
.sb-flock.f2 { left: -8%; }
.sb-flock.f3 { left: -24%; }
.sb-flock.f4 { left: -14%; }
.sb-flock i {
  position: relative; width: 12px; height: 8px;
}
.sb-flock i::before, .sb-flock i::after {
  content: ""; position: absolute; top: 3px; width: 8px; height: 2px;
  background: #1c1610; border-radius: 1px;
}
.sandbox[data-tod="night"] .sb-flock i::before,
.sandbox[data-tod="night"] .sb-flock i::after { background: #c9d4e4; }
.sb-flock i::before { left: 0; transform-origin: right center; animation: wing-l .32s ease-in-out infinite; }
.sb-flock i::after { right: 0; transform-origin: left center; animation: wing-r .32s ease-in-out infinite; }
@keyframes flock-fly {
  0% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(70vw) translateY(-12px); }
  100% { transform: translateX(140vw) translateY(8px); }
}
@keyframes wing-l {
  0%, 100% { transform: rotate(-22deg); }
  50% { transform: rotate(-52deg); }
}
@keyframes wing-r {
  0%, 100% { transform: rotate(22deg); }
  50% { transform: rotate(52deg); }
}
.sb-beacon {
  position: absolute; width: 10px; height: 18px;
  transform: translate(-50%, -100%);
}
.sb-beacon i {
  display: block; width: 8px; height: 8px; margin: 0 auto;
  border-radius: 50% 50% 40% 40%;
  background: radial-gradient(circle at 40% 30%, #fff3c0, #ff8a1a 55%, #c42810);
  box-shadow: 0 0 10px 4px rgba(255,140,40,.75), 0 -6px 12px rgba(255,180,60,.35);
  animation: beacon-flicker .7s ease-in-out infinite;
}
.sandbox[data-tod="day"] .sb-beacon { opacity: .35; }
.sandbox[data-tod="night"] .sb-beacon, .sandbox[data-tod="dusk"] .sb-beacon { opacity: 1; }
@keyframes beacon-flicker {
  0%, 100% { transform: scaleY(1) scaleX(1); filter: brightness(1); }
  40% { transform: scaleY(1.25) scaleX(.85); filter: brightness(1.3); }
  70% { transform: scaleY(.85) scaleX(1.1); filter: brightness(.85); }
}
.sb-blobs { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.mc-blob {
  position: absolute; transform: translate(-50%, -50%);
  width: var(--blob, 110px); height: var(--blob, 110px);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--mc) 42%, transparent) 0%, transparent 72%);
  filter: blur(10px);
  opacity: .85;
}
.sb-cities { position: absolute; inset: 0; z-index: 3; }
.sb-vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 6;
  background: radial-gradient(120% 90% at 50% 40%, transparent 62%, rgba(12,9,4,.42) 100%);
  transition: background 2.4s ease;
}
.sandbox[data-tod="night"] .sb-vignette {
  background: radial-gradient(90% 70% at 50% 40%, transparent 48%, rgba(4,8,18,.62) 100%);
}
.sandbox[data-tod="dusk"] .sb-vignette {
  background: radial-gradient(110% 80% at 50% 40%, transparent 55%, rgba(40,12,4,.5) 100%);
}
/* 城堡节点 */
.map-city3d {
  position: absolute; transform: translate(-50%, -58%);
  width: var(--msz, 84px); height: var(--msz, 84px);
  z-index: 2; cursor: pointer;
  display: flex; align-items: flex-end; justify-content: center;
  transition: filter .15s;
  user-select: none;
  -webkit-user-select: none;
}
.map-city3d .mc-ring {
  position: absolute; inset: 12%;
  border: 2px solid color-mix(in srgb, var(--mc) 80%, #fff 10%);
  border-radius: 50%;
  opacity: .5; pointer-events: none; z-index: 1;
  box-shadow: 0 0 10px color-mix(in srgb, var(--mc) 55%, transparent);
}
.map-city3d.owned .mc-ring {
  border-color: var(--gold); opacity: .75;
  box-shadow: 0 0 14px var(--gold-glow);
}
.map-city3d .mc-pennant {
  position: absolute; top: 0; left: 2%;
  height: calc(var(--msz, 84px) * .36);
  object-fit: contain; z-index: 4; pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.65));
  transform-origin: 18% 12%;
  animation: flag-wave 1.65s ease-in-out infinite;
}
.map-city3d.owned .mc-pennant { animation-duration: 1.28s; }
@keyframes flag-wave {
  0%, 100% { transform: rotate(-9deg) skewX(-5deg); }
  50% { transform: rotate(11deg) skewX(7deg); }
}
.map-city3d .mc-smoke {
  position: absolute; left: 58%; top: 10%; width: 12px; height: 12px;
  border-radius: 50%; background: rgba(230,230,230,.5);
  filter: blur(3px); pointer-events: none; z-index: 3;
  animation: city-smoke 3.6s ease-out infinite;
}
.map-city3d .mc-smoke.s2 { left: 30%; top: 18%; animation-delay: 1.5s; animation-duration: 4.4s; }
.map-city3d.owned .mc-smoke { background: rgba(255, 220, 140, .42); }
.map-city3d .mc-lamp {
  position: absolute; left: 44%; top: 30%; width: 8px; height: 8px;
  border-radius: 50%; background: #ffd27a; opacity: 0;
  box-shadow: 0 0 10px 5px rgba(255,180,60,.7);
  pointer-events: none; z-index: 3;
}
.sandbox[data-tod="dusk"] .map-city3d .mc-lamp,
.sandbox[data-tod="night"] .map-city3d .mc-lamp {
  opacity: 1; animation: lamp-flicker 1.35s ease-in-out infinite;
}
.map-city3d .mc-patrol {
  position: absolute; left: 50%; top: 48%; width: 8px; height: 8px;
  margin: -4px 0 0 -4px; border-radius: 50%;
  background: #f0d36a; box-shadow: 0 0 6px #f0d36a;
  pointer-events: none; z-index: 5; opacity: 0;
}
.map-city3d.owned .mc-patrol, .map-city3d.cap .mc-patrol {
  opacity: .95; animation: patrol-orbit 6.8s linear infinite;
}
@keyframes city-smoke {
  0% { opacity: .6; transform: translate(0, 0) scale(.55); }
  100% { opacity: 0; transform: translate(12px, -28px) scale(1.85); }
}
@keyframes lamp-flicker {
  0%, 100% { opacity: .75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}
@keyframes patrol-orbit {
  from { transform: rotate(0deg) translateX(calc(var(--msz, 84px) * .52)); }
  to { transform: rotate(360deg) translateX(calc(var(--msz, 84px) * .52)); }
}
.map-city3d .mc-spark { display: none; }
.map-city3d .mc-face {
  position: absolute; right: -6%; bottom: 20%;
  width: calc(var(--msz, 84px) * .34); height: calc(var(--msz, 84px) * .34);
  border-radius: 50%; object-fit: cover; object-position: top center;
  border: 2px solid var(--mc); z-index: 4; pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.55);
  background: #1a140c;
}
.map-city3d .mc-owner {
  position: absolute; top: -8%; left: 50%; transform: translateX(-50%);
  font-size: 9px; font-weight: 800; letter-spacing: 1px;
  padding: 0 5px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--mc) 78%, #0c0a06);
  color: #fff; border: 1px solid rgba(255,255,255,.28);
  pointer-events: none; z-index: 4; opacity: .92;
}
.map-city3d.tier-small .mc-owner { display: none; }
.map-city3d:hover .mc-owner, .map-city3d.sel .mc-owner { display: block; }
.map-city3d .mc-castle {
  width: 100%; height: 100%; object-fit: contain; object-position: center bottom; z-index: 2;
  filter: drop-shadow(3px 7px 8px rgba(10,8,2,.55)) drop-shadow(0 0 5px rgba(232,180,60,.28));
  transition: transform .16s ease, filter .16s ease;
}
.map-city3d.owned .mc-castle {
  animation: castle-breathe 3.5s ease-in-out infinite;
}
@keyframes castle-breathe {
  0%, 100% { filter: drop-shadow(3px 6px 7px rgba(10,8,2,.5)) drop-shadow(0 0 0 transparent); }
  50% { filter: drop-shadow(3px 6px 7px rgba(10,8,2,.5)) drop-shadow(0 0 11px rgba(232,193,90,.6)); }
}
.map-city3d:hover .mc-castle { transform: scale(1.14) translateY(-2px); filter: drop-shadow(0 0 12px rgba(255,240,190,.8)); }
.map-city3d.sel .mc-castle { filter: drop-shadow(0 0 14px rgba(255,255,255,.95)); transform: scale(1.1); }
.map-city3d .mc-fallback {
  width: 60%; height: 60%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--msz, 84px) * .3);
  background: var(--mc, #64748b); border: 2.5px solid rgba(255,255,255,.55);
  box-shadow: 0 3px 9px rgba(0,0,0,.5);
}
.map-city3d .mc-crown {
  position: absolute; top: -4%; left: 68%;
  font-size: calc(var(--msz, 84px) * .22);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.6));
  pointer-events: none; z-index: 3;
}
.map-city3d .mc-hp {
  position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%);
  width: 72%; height: 6px; border-radius: 3px;
  background: rgba(18,13,6,.75); overflow: hidden;
  border: 1px solid rgba(255,255,255,.3);
}
.map-city3d .mc-hp i { display: block; height: 100%; }
.map-city3d .map-label3d {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 3px; font-size: 12.5px; font-weight: 800; white-space: nowrap;
  background: linear-gradient(180deg, rgba(42,32,16,.94), rgba(18,13,8,.94));
  padding: 2px 9px; border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--mc) 55%, rgba(232,193,90,.3));
  color: #f3e9cf;
  box-shadow: inset 3px 0 0 var(--mc), 0 2px 6px rgba(0,0,0,.45);
  text-shadow: 0 1px 2px #000; pointer-events: none;
  letter-spacing: 1px;
}
.map-city3d.owned .map-label3d { color: var(--gold-pale); border-color: var(--gold-line); }
.map-city3d.can-take::before {
  content: ""; position: absolute; inset: 8%; border-radius: 50%;
  border: 3px solid rgba(134,239,172,.85); pointer-events: none;
  animation: cantake3d 1.7s ease-in-out infinite;
}
@keyframes cantake3d {
  0%, 100% { transform: scale(.92); opacity: .45; box-shadow: 0 0 8px rgba(134,239,172,.4); }
  50% { transform: scale(1.04); opacity: .95; box-shadow: 0 0 22px rgba(134,239,172,.75); }
}
.map-city3d.rebel .mc-fallback { animation: rebelPulse 1.6s ease-in-out infinite; }
.map-city3d .city-lv {
  position: absolute; top: -6%; right: -8%;
  font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 999px;
  background: #14100a; color: var(--gold-pale);
  border: 1px solid var(--gold-line); pointer-events: none; white-space: nowrap; z-index: 4;
}
/* 占领光波（沙盘版） */
.map-city3d.captured-fx .mc-castle { animation: capture-glow 1.1s ease-in-out 3; }
.map-city3d.captured-fx::after {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 4;
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--gold); opacity: 0;
  transform: translate(-50%, -50%);
  animation: capture-wave 1.05s ease-out 3;
  pointer-events: none;
}
.map-city3d.captured-fx .mc-pennant {
  animation: flag-raise .65s ease-out, flag-wave 1.28s ease-in-out .65s infinite;
}
.map-city3d.captured-fx .mc-spark {
  display: block; position: absolute; inset: -8%; pointer-events: none; z-index: 5;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,236,160,.9) 0 7%, transparent 8%),
    repeating-conic-gradient(from 12deg, rgba(255,220,90,.75) 0 7deg, transparent 7deg 40deg);
  animation: spark-burst .85s ease-out 3;
  mix-blend-mode: screen;
}
.map-city3d.captured-fx .mc-ring {
  animation: capture-ring 1.1s ease-out 3;
}
@keyframes flag-raise {
  from { transform: translateY(14px) scale(.55); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes spark-burst {
  0% { opacity: 1; transform: scale(.35) rotate(0deg); }
  100% { opacity: 0; transform: scale(1.85) rotate(50deg); }
}
@keyframes capture-ring {
  0% { opacity: 1; transform: scale(.7); }
  100% { opacity: 0; transform: scale(1.55); }
}

/* v51：未拥有/未选中城堡的标签默认隐藏，hover 展开（消除文字堆叠） */
.map-city3d .map-label3d.always { opacity: 1; }
.map-city3d .map-label3d { opacity: 0; transition: opacity .18s ease, transform .18s ease; transform: translateX(-50%) translateY(2px); }
.map-city3d:hover .map-label3d { opacity: 1; transform: translateX(-50%) translateY(0); }
.map-city3d.sel .map-label3d { opacity: 1; transform: translateX(-50%) translateY(0); }

/* v52：小城堡适配（标签/血条/皇冠随 --msz 缩放） */
.map-city3d .map-label3d { font-size: clamp(10px, calc(var(--msz, 72px) * .155), 14px); padding: 1px 7px; margin-top: 2px; }
.map-city3d .mc-hp { height: 5px; width: 78%; }
.map-city3d .mc-crown { font-size: calc(var(--msz, 72px) * .24); }
.map-city3d .city-lv { font-size: 9px; }

/* v53：行军军团（帝王三国式沿路推进） */
.map-march {
  position: absolute; transform: translate(-50%, -50%);
  z-index: 6; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  transition: left 1s linear, top 1s linear;  /* tick 间隔平滑 */
}
.mm-icon {
  font-size: 22px;
  filter: drop-shadow(0 0 6px rgba(232,193,90,.9)) drop-shadow(0 2px 3px rgba(0,0,0,.6));
  animation: mm-bob .8s ease-in-out infinite;
}
@keyframes mm-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.mm-label {
  font-size: 11px; font-weight: 800; white-space: nowrap;
  background: rgba(140,60,20,.92); color: #ffe9c9;
  padding: 1px 8px; border-radius: 7px; border: 1px solid rgba(232,193,90,.5);
  text-shadow: 0 1px 2px #000;
}

/* v54：中式行军旗帜 */
.mm-flag {
  height: 34px; object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.55)) drop-shadow(0 0 7px rgba(232,193,90,.5));
  animation: mm-bob .8s ease-in-out infinite;
}

/* =====================================================================
 * v56 · 画面加厚：季节氛围 / 城市场景 / 建筑立面 / 装饰框
 * ===================================================================== */
body { --season-tint: rgba(255, 176, 190, .06); }
body[data-season="spring"] { --season-tint: rgba(255, 168, 186, .07); --season-glow: #ffb6c8; }
body[data-season="summer"] { --season-tint: rgba(255, 214, 90, .07); --season-glow: #ffe08a; }
body[data-season="autumn"] { --season-tint: rgba(210, 120, 48, .08); --season-glow: #e07a30; }
body[data-season="winter"] { --season-tint: rgba(180, 210, 230, .08); --season-glow: #e8f4ff; }

.bg-decor { background: var(--season-tint); transition: background .8s ease; }
.bg-ink {
  position: absolute; inset: 0;
  background:
    radial-gradient(700px 380px at 8% 18%, rgba(232,193,90,.07), transparent 70%),
    radial-gradient(640px 360px at 92% 78%, rgba(180,60,40,.06), transparent 68%);
  pointer-events: none;
}
.bg-frame {
  position: absolute; inset: 10px; border: 1px solid rgba(232,193,90,.16);
  box-shadow: inset 0 0 0 1px rgba(232,193,90,.06);
  pointer-events: none;
}
.bg-frame::before, .bg-frame::after {
  content: ""; position: absolute; width: 28px; height: 28px;
  border: 2px solid rgba(232,193,90,.35);
}
.bg-frame::before { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.bg-frame::after { bottom: -2px; right: -2px; border-left: none; border-top: none; }

.bg-lanterns { position: absolute; inset: 0; pointer-events: none; }
.lantern {
  position: absolute; width: 13px; height: 18px;
  background: radial-gradient(circle at 50% 35%, #ffe7a8, #d4482c 70%);
  border-radius: 3px 3px 7px 7px;
  box-shadow: 0 0 16px rgba(255,140,40,.55), inset 0 0 6px rgba(255,240,180,.5);
  animation: lanternFloat 9s ease-in-out infinite;
}
.lantern::before {
  content: ""; position: absolute; top: -5px; left: 50%; width: 9px; height: 5px;
  margin-left: -4.5px; background: #3a2410; border-radius: 2px 2px 0 0;
}
.lantern::after {
  content: ""; position: absolute; top: 100%; left: 50%; width: 1px; height: 22px;
  background: linear-gradient(180deg, rgba(232,193,90,.55), transparent);
}
.lantern.l1 { left: 6%; top: 18%; animation-delay: 0s; }
.lantern.l2 { left: 18%; top: 62%; animation-delay: 1.6s; transform: scale(.85); }
.lantern.l3 { right: 10%; top: 22%; animation-delay: 3s; }
.lantern.l4 { right: 22%; top: 70%; animation-delay: 4.4s; transform: scale(.75); }
.lantern.l5 { left: 48%; top: 8%; animation-delay: 2.2s; transform: scale(.7); opacity: .8; }
@keyframes lanternFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-14px) rotate(3deg); }
}

.fx-layer { position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.fx-particles i, .start-petals i {
  position: absolute; top: -20px; width: 8px; height: 8px;
  opacity: .7; animation: petalDrift linear infinite;
}
body[data-season="spring"] .fx-particles i,
body[data-season="spring"] .start-petals i {
  background: radial-gradient(circle at 30% 30%, #fff, #ffb6c8);
  border-radius: 70% 0 70% 70%;
}
body[data-season="summer"] .fx-particles i,
body[data-season="summer"] .start-petals i {
  width: 4px; height: 4px; border-radius: 50%;
  background: #ffe08a; box-shadow: 0 0 8px #ffe08a;
}
body[data-season="autumn"] .fx-particles i,
body[data-season="autumn"] .start-petals i {
  background: linear-gradient(135deg, #e07a30, #8c3a12);
  border-radius: 70% 0 70% 30%; width: 9px; height: 7px;
}
body[data-season="winter"] .fx-particles i,
body[data-season="winter"] .start-petals i {
  width: 5px; height: 5px; border-radius: 50%;
  background: #f4f8ff; box-shadow: 0 0 6px rgba(255,255,255,.8);
}
@keyframes petalDrift {
  0% { transform: translate3d(0, -20px, 0) rotate(0deg); opacity: 0; }
  12% { opacity: .75; }
  100% { transform: translate3d(40px, 110vh, 0) rotate(360deg); opacity: 0; }
}

/* 开局界面装饰 */
.start-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.start-orn {
  position: absolute; width: 72px; height: 72px;
  border: 2px solid rgba(232,193,90,.35);
}
.start-orn.tl { top: 16px; left: 16px; border-right: none; border-bottom: none; }
.start-orn.tr { top: 16px; right: 16px; border-left: none; border-bottom: none; }
.start-orn.bl { bottom: 16px; left: 16px; border-right: none; border-top: none; }
.start-orn.br { bottom: 16px; right: 16px; border-left: none; border-top: none; }
.start-stamp {
  position: absolute; right: 7%; top: 12%;
  width: 64px; height: 64px; border: 3px solid rgba(196,48,36,.55);
  color: rgba(196,48,36,.7); font-family: "STKaiti", "KaiTi", serif;
  font-size: 40px; font-weight: 900; display: flex; align-items: center; justify-content: center;
  transform: rotate(14deg); opacity: .85;
  box-shadow: inset 0 0 0 2px rgba(196,48,36,.25);
}
.start-inner { position: relative; z-index: 2; }

/* 卡片四角与微纹理 */
.card {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 28%),
    linear-gradient(180deg, rgba(31,37,51,.88), rgba(21,25,36,.94));
}
.card::before, .card::after {
  content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none;
  border: 1px solid var(--gold); opacity: .45;
}
.card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; border-top-left-radius: 12px; }
.card::after { bottom: -1px; right: -1px; border-left: none; border-top: none; border-bottom-right-radius: 12px; }
.card:hover { border-color: rgba(232,193,90,.55); box-shadow: 0 10px 28px rgba(0,0,0,.4), 0 0 16px rgba(232,193,90,.12); }

.content {
  background-image:
    radial-gradient(900px 420px at 86% -10%, rgba(232,193,90,.05), transparent 60%);
}

/* 总览：君主横幅实景 + 微舆图 */
.hero-banner {
  position: relative;
  background:
    linear-gradient(90deg, rgba(14,17,26,.88) 0%, rgba(14,17,26,.62) 48%, rgba(14,17,26,.82) 100%),
    url('../assets/backgrounds/shengshi.jpg') center 38% / cover no-repeat;
  border-color: rgba(232,193,90,.45);
  min-height: 118px;
}
.hero-banner::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 40px;
  background: linear-gradient(180deg, transparent, rgba(10,12,18,.45));
  pointer-events: none;
}
.stat-card { position: relative; overflow: hidden; }
.stat-card .sc-ico {
  position: absolute; right: 8px; top: 6px; font-size: 42px; opacity: .16;
  filter: grayscale(.2);
}
.mini-realm {
  position: relative; height: 168px; border-radius: 12px; overflow: hidden;
  background:
    radial-gradient(80% 70% at 70% 20%, rgba(90,120,70,.18), transparent 60%),
    radial-gradient(70% 60% at 20% 80%, rgba(70,90,50,.16), transparent 60%),
    linear-gradient(180deg, #1a2118, #12160f);
  border: 1px solid rgba(232,193,90,.22);
  box-shadow: inset 0 0 40px rgba(0,0,0,.45);
}
.mini-realm::before {
  content: ""; position: absolute; left: 8%; right: 10%; top: 46%; height: 10px;
  background: linear-gradient(90deg, transparent, rgba(70,130,170,.35), rgba(70,130,170,.5), transparent);
  border-radius: 999px; filter: blur(1px);
}
.realm-dot {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 0 8px currentColor;
}
.realm-dot.mine {
  width: 10px; height: 10px; z-index: 2;
  box-shadow: 0 0 0 2px var(--gold), 0 0 12px var(--gold-glow);
  animation: realmPulse 1.8s ease-in-out infinite;
}
@keyframes realmPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.25); }
}

/* 内政：都城天际线 + 建筑立面卡 */
.city-view { position: relative; }
.cityscape {
  position: relative; height: 150px; margin-bottom: 10px;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--gold-line);
  box-shadow: 0 10px 28px rgba(0,0,0,.4);
}
.cs-photo {
  position: absolute; inset: 0;
  background: url('../assets/backgrounds/shengshi.jpg') center 42% / cover no-repeat;
  filter: saturate(.95) brightness(.78);
}
.cs-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,12,18,.25) 0%, rgba(10,12,18,.08) 40%, rgba(10,12,18,.55) 100%);
}
.cs-skyline { position: absolute; left: 0; right: 0; bottom: 0; height: 78px; z-index: 1; pointer-events: none; }
.cs-b {
  position: absolute; bottom: 10px;
  background: linear-gradient(180deg, rgba(36,28,18,.55), rgba(12,10,8,.82));
  box-shadow: 0 0 0 1px rgba(232,193,90,.12);
  transform-origin: bottom center;
}
.cs-b.wall { left: 4%; width: 18%; height: calc(22px + 38px * var(--lv-wall, .1)); clip-path: polygon(0 28%, 8% 28%, 8% 0, 18% 0, 18% 28%, 82% 28%, 82% 0, 92% 0, 92% 28%, 100% 28%, 100% 100%, 0 100%); }
.cs-b.house { left: 24%; width: 12%; height: calc(20px + 36px * var(--lv-house, .1)); clip-path: polygon(50% 0, 100% 28%, 100% 100%, 0 100%, 0 28%); }
.cs-b.market { left: 38%; width: 14%; height: calc(24px + 34px * var(--lv-market, .1)); }
.cs-b.academy { left: 54%; width: 10%; height: calc(36px + 42px * var(--lv-academy, .1)); clip-path: polygon(50% 0, 82% 18%, 82% 100%, 18% 100%, 18% 18%); }
.cs-b.barracks { left: 66%; width: 13%; height: calc(22px + 32px * var(--lv-barracks, .1)); }
.cs-b.pagoda { left: 80%; width: 12%; height: calc(40px + 40px * var(--lv-wall, .1)); clip-path: polygon(50% 0, 78% 16%, 70% 16%, 70% 28%, 86% 36%, 74% 36%, 74% 52%, 90% 60%, 70% 60%, 70% 100%, 30% 100%, 30% 60%, 10% 60%, 26% 52%, 26% 36%, 14% 36%, 30% 28%, 30% 16%, 22% 16%); }
.cs-mist {
  position: absolute; left: 0; right: 0; bottom: 0; height: 28px; z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(214,222,226,.18));
}
.city-header {
  background:
    linear-gradient(90deg, rgba(16,19,28,.86), rgba(16,19,28,.55) 60%, rgba(16,19,28,.8)),
    url('../assets/backgrounds/taoyuan.jpg') center 30% / cover no-repeat;
}

.building-tile {
  position: relative; overflow: hidden;
  border-radius: 14px; border: 1px solid var(--gold-line);
  background: linear-gradient(180deg, #1c2330, #141824);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
  display: flex; flex-direction: column;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.building-tile:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 12px 28px rgba(0,0,0,.45), 0 0 16px var(--gold-glow); }
.building-tile.lv-mid { border-color: rgba(232,193,90,.5); }
.building-tile.lv-high { border-color: rgba(255,215,0,.7); box-shadow: 0 8px 22px rgba(0,0,0,.35), 0 0 18px rgba(255,215,0,.28); }
.building-tile.lv-max { border-color: #ffd700; box-shadow: 0 8px 22px rgba(0,0,0,.35), 0 0 24px rgba(255,215,0,.45); }
.bt-scene {
  position: relative; height: 92px; overflow: hidden;
}
.bt-art { position: absolute; inset: 0; }
.bt-art::before, .bt-art::after { content: ""; position: absolute; }
.bt-level {
  position: absolute; right: 8px; top: 8px; z-index: 2;
  font-size: 11px; font-weight: 800; color: #fff;
  background: rgba(10,8,4,.55); border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px; padding: 1px 8px; text-shadow: 0 1px 2px #000;
}
.bt-level b { color: var(--gold-pale); }
.bt-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.bt-name { font-weight: 800; color: var(--gold-pale); font-size: 14px; letter-spacing: 1px; }
.bt-eff { font-size: 11px; color: var(--muted); line-height: 1.45; min-height: 30px; }
.bt-bar { height: 5px; border-radius: 3px; background: rgba(0,0,0,.4); overflow: hidden; }
.bt-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.bt-icon { display: none; }

.bt-farm .bt-scene { background: linear-gradient(180deg, #7eb8d8 0%, #d7e6a4 48%, #6b8f32 100%); }
.bt-farm .bt-art::before {
  left: 8%; bottom: 18%; width: 28%; height: 42%;
  background: linear-gradient(180deg, #8b3a22, #5a2414);
  clip-path: polygon(50% 0, 100% 32%, 100% 100%, 0 100%, 0 32%);
}
.bt-farm .bt-art::after {
  left: 0; right: 0; bottom: 0; height: 28%;
  background: repeating-linear-gradient(90deg, #5f8028 0 10px, #7aa03a 10px 20px);
}

.bt-lumber .bt-scene { background: linear-gradient(180deg, #87a8c4 0%, #6b8f4a 55%, #3d4f28 100%); }
.bt-lumber .bt-art::before {
  left: 12%; bottom: 12%; width: 22px; height: 46px;
  background: #2f4a22; border-radius: 20px 20px 4px 4px;
  box-shadow: 28px 6px 0 #355226, 52px -4px 0 #2a421c, 74px 10px 0 #3a5528;
}
.bt-lumber .bt-art::after {
  right: 12%; bottom: 14%; width: 34%; height: 40%;
  background: linear-gradient(180deg, #7a4a22, #4a2c12);
  clip-path: polygon(0 22%, 100% 22%, 100% 100%, 0 100%);
}

.bt-mine .bt-scene { background: linear-gradient(180deg, #6d7d90 0%, #8a7a68 40%, #4a4036 100%); }
.bt-mine .bt-art::before {
  left: 8%; bottom: 0; width: 70%; height: 78%;
  background: linear-gradient(180deg, #6a6258, #2e2924);
  clip-path: polygon(0 70%, 18% 28%, 40% 48%, 58% 12%, 86% 42%, 100% 22%, 100% 100%, 0 100%);
}
.bt-mine .bt-art::after {
  left: 38%; bottom: 10%; width: 22%; height: 28%;
  background: radial-gradient(circle at 50% 100%, #1a1410, #0a0806 70%);
  border-radius: 50% 50% 8px 8px;
  box-shadow: 0 0 10px rgba(255,140,40,.35);
}

.bt-house .bt-scene { background: linear-gradient(180deg, #8bb4d4 0%, #d8c9a0 60%, #7a6a48 100%); }
.bt-house .bt-art::before {
  left: 10%; bottom: 12%; width: 32%; height: 58%;
  background: linear-gradient(180deg, #b23a2a, #7a2418 28%, #e8d2a8 29%);
  clip-path: polygon(50% 0, 100% 26%, 100% 100%, 0 100%, 0 26%);
  box-shadow: 42px 12px 0 #8c2c1c;
}
.bt-house .bt-art::after {
  right: 8%; bottom: 12%; width: 28%; height: 46%;
  background: linear-gradient(180deg, #c44a2e, #8a2e1c 30%, #f0dcb4 31%);
  clip-path: polygon(50% 0, 100% 28%, 100% 100%, 0 100%, 0 28%);
}

.bt-market .bt-scene { background: linear-gradient(180deg, #f0c46a 0%, #e8a84a 40%, #b87830 100%); }
.bt-market .bt-art::before {
  left: 12%; bottom: 16%; width: 28%; height: 48%;
  background: #c0392b;
  clip-path: polygon(0 18%, 50% 0, 100% 18%, 100% 100%, 0 100%);
  box-shadow: 40px 8px 0 #2d6a4f, 78px 4px 0 #1d4e89;
}
.bt-market .bt-art::after {
  left: 0; right: 0; bottom: 0; height: 18%;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 8px, transparent 8px 16px);
}

.bt-barracks .bt-scene { background: linear-gradient(180deg, #6d7f4a 0%, #8a7a48 50%, #5a4828 100%); }
.bt-barracks .bt-art::before {
  left: 14%; bottom: 14%; width: 30%; height: 50%;
  background: #c4b48a;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  box-shadow: 46px 6px 0 #b8a878;
}
.bt-barracks .bt-art::after {
  right: 16%; bottom: 18%; width: 6px; height: 52%;
  background: linear-gradient(180deg, #c0392b, #8a2418);
  box-shadow: 10px 8px 0 #1d4e89;
}

.bt-wall .bt-scene { background: linear-gradient(180deg, #6a8498 0%, #8a9aaa 40%, #5a5348 100%); }
.bt-wall .bt-art::before {
  left: 0; right: 0; bottom: 0; height: 62%;
  background: linear-gradient(180deg, #8a8070, #4a443c);
  clip-path: polygon(0 30%, 8% 30%, 8% 0, 18% 0, 18% 30%, 32% 30%, 32% 0, 42% 0, 42% 30%, 58% 30%, 58% 0, 68% 0, 68% 30%, 82% 30%, 82% 0, 92% 0, 92% 30%, 100% 30%, 100% 100%, 0 100%);
}
.bt-wall .bt-art::after {
  left: 40%; bottom: 42%; width: 20%; height: 38%;
  background: linear-gradient(180deg, #b23a2a, #6a2014);
}

.bt-academy .bt-scene { background: linear-gradient(180deg, #1a2740 0%, #3a4a66 45%, #c4a86a 100%); }
.bt-academy .bt-art::before {
  left: 32%; bottom: 10%; width: 36%; height: 78%;
  background: linear-gradient(180deg, #d8c48a, #8a6a32);
  clip-path: polygon(50% 0, 78% 14%, 70% 14%, 70% 26%, 88% 34%, 74% 34%, 74% 48%, 92% 56%, 70% 56%, 70% 100%, 30% 100%, 30% 56%, 8% 56%, 26% 48%, 26% 34%, 12% 34%, 30% 26%, 30% 14%, 22% 14%);
}
.bt-academy .bt-art::after {
  right: 14%; top: 10%; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle, #ffe9a8, rgba(255,200,80,0));
  box-shadow: 0 0 18px rgba(255,220,120,.7);
}

/* 科技 / 任务卡 */
.tech-card, .quest-card { padding-top: 12px; }
.tech-icon, .quest-mark {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 8px;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.16), rgba(0,0,0,.28));
  border: 1px solid var(--gold-line);
}
.quest-card.done { border-color: rgba(63,179,107,.5); }
.quest-card.done .quest-mark { background: rgba(63,179,107,.2); }

/* 太学典籍厅 */
.tech-academy {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 0; flex: 1; overflow: auto;
  padding: 2px 2px 8px;
}
.ta-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  border-radius: 6px;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(255,230,170,.22), transparent 55%),
    linear-gradient(180deg, #3a2e1c 0%, #2a2216 45%, #1e1810 100%);
}
.ta-head, .ta-body { position: relative; z-index: 1; }
.ta-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 16px;
  border: 1px solid rgba(210,170,90,.55);
  background:
    linear-gradient(90deg, rgba(120,88,40,.55), rgba(70,52,28,.72) 50%, rgba(48,36,22,.8)),
    linear-gradient(180deg, #5a4428, #3a2a18);
  box-shadow: inset 0 1px 0 rgba(255,240,200,.2), 0 8px 20px rgba(0,0,0,.25);
}
.ta-title-block { display: flex; align-items: center; gap: 14px; }
.ta-seal {
  width: 48px; height: 48px; flex: 0 0 auto;
  display: grid; place-items: center;
  font-family: "STKaiti", "KaiTi", "Noto Serif SC", serif;
  font-size: 26px; font-weight: 900; color: #fff4d0;
  border: 2px solid rgba(220,70,55,.85);
  background: radial-gradient(circle at 35% 30%, rgba(210,70,55,.75), rgba(120,28,22,.95));
  box-shadow: inset 0 0 0 1px rgba(255,200,150,.25), 0 4px 12px rgba(0,0,0,.35);
  transform: rotate(-6deg);
}
.ta-head h2 {
  font-family: "STKaiti", "KaiTi", "Noto Serif SC", serif;
  font-size: 22px; letter-spacing: 4px; color: #fff1c8; font-weight: 900;
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.ta-head p { margin-top: 4px; font-size: 12px; color: #d8c9a0; letter-spacing: 1px; }
.ta-head p b { color: #ffe9a8; font-size: 14px; }
.ta-meter {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(210,170,90,.45);
  background: rgba(255,236,190,.12);
  white-space: nowrap;
}
.ta-meter span { font-size: 12px; color: #d4c39a; }
.ta-meter strong {
  font-family: "STKaiti", "KaiTi", "Noto Serif SC", serif;
  font-size: 30px; color: #fff3cc; line-height: 1;
}
.ta-body { display: flex; flex-direction: column; gap: 12px; }
.tech-canon {
  display: grid;
  grid-template-columns: 56px 1fr;
  border: 1px solid rgba(200,160,80,.5);
  background: linear-gradient(180deg, rgba(72,56,34,.92), rgba(42,32,20,.95));
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  overflow: hidden;
}
.canon-spine {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 16px 6px;
  background:
    linear-gradient(180deg, #c4a050, #9a7830 45%, #7a5c24),
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,.08) 2px, rgba(0,0,0,.08) 3px);
  border-right: 1px solid rgba(240,210,140,.55);
  box-shadow: inset -3px 0 10px rgba(0,0,0,.2);
}
.cs-title, .cs-quote {
  writing-mode: vertical-rl;
  font-family: "STKaiti", "KaiTi", "Noto Serif SC", serif;
  letter-spacing: 4px;
}
.cs-title { font-size: 16px; font-weight: 900; color: #2a1c08; }
.cs-quote { font-size: 12px; color: rgba(50,35,12,.7); }
.canon-main { min-width: 0; background: rgba(255,240,210,.04); }
.canon-head {
  padding: 12px 16px 8px;
  border-bottom: 1px solid rgba(200,160,80,.3);
  background: linear-gradient(90deg, rgba(180,140,70,.28), transparent 75%);
}
.canon-head h3 {
  font-family: "STKaiti", "KaiTi", "Noto Serif SC", serif;
  font-size: 17px; letter-spacing: 6px; color: #ffe9b0;
}
.canon-head p { margin-top: 3px; font-size: 12px; color: #d4c39a; letter-spacing: 1px; }
.tech-steles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  padding: 12px;
}
.tech-stele {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px;
  min-height: 140px;
  padding: 12px;
  position: relative;
  border: 1px solid rgba(210,170,95,.5);
  background:
    linear-gradient(160deg, rgba(180,140,70,.28), transparent 42%),
    linear-gradient(180deg, #5a462c, #3a2c1a);
  box-shadow:
    inset 0 1px 0 rgba(255,240,200,.18),
    0 6px 16px rgba(0,0,0,.22);
  transition: border-color .12s ease, transform .12s ease;
}
.tech-stele:hover {
  border-color: rgba(240,200,110,.8);
  transform: translateY(-1px);
}
.tech-stele.locked { opacity: .72; filter: saturate(.7) brightness(.95); }
.tech-stele.maxed {
  border-color: rgba(230,190,100,.7);
  background:
    linear-gradient(160deg, rgba(210,170,80,.32), transparent 42%),
    linear-gradient(180deg, #6a5230, #42301a);
}
.stele-frame {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.sf {
  position: absolute; width: 10px; height: 10px; border: 1px solid rgba(235,200,120,.65);
  pointer-events: none;
}
.sf.c1 { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.sf.c2 { top: -2px; right: -2px; border-left: none; border-bottom: none; }
.sf.c3 { bottom: 24px; left: -2px; border-right: none; border-top: none; }
.sf.c4 { bottom: 24px; right: -2px; border-left: none; border-top: none; }
.stele-medal {
  width: 84px; height: 84px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(230,190,110,.65);
  background:
    radial-gradient(circle at 35% 28%, rgba(255,220,140,.35), transparent 55%),
    radial-gradient(circle, #6a5230 0%, #3a2a16 75%);
  box-shadow:
    inset 0 0 0 3px rgba(70,50,22,.55),
    0 4px 12px rgba(0,0,0,.3);
}
.stele-medal img {
  width: 72px; height: 72px; object-fit: contain;
  filter: brightness(1.08) contrast(1.05) drop-shadow(0 2px 3px rgba(0,0,0,.35));
}
.stele-rank {
  display: flex; align-items: baseline; gap: 2px;
  font-size: 11px; color: #d8c9a0;
}
.stele-rank b {
  font-family: "STKaiti", "KaiTi", "Noto Serif SC", serif;
  font-size: 20px; color: #fff1c0; padding: 0 2px;
}
.stele-rank span { margin-left: 4px; color: #b8a878; }
.stele-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.stele-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.stele-head h4 {
  font-family: "STKaiti", "KaiTi", "Noto Serif SC", serif;
  font-size: 18px; letter-spacing: 3px; color: #fff1c8; font-weight: 900;
}
.stele-eff {
  flex: 0 0 auto;
  font-size: 11px; color: #ffe7a8;
  padding: 3px 8px;
  border: 1px solid rgba(210,170,90,.45);
  background: rgba(90,65,30,.55);
  letter-spacing: .5px;
}
.stele-desc {
  font-size: 12px; color: #dccba0; line-height: 1.5;
  border-left: 2px solid rgba(220,180,90,.55);
  padding-left: 8px;
}
.stele-track {
  position: relative; height: 8px; margin: 4px 0 6px;
  background: rgba(30,22,12,.45);
  border: 1px solid rgba(200,160,80,.35);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
}
.stele-track i {
  display: block; height: 100%;
  background: linear-gradient(90deg, #8a6828, #e2c878 60%, #fff0b8);
}
.stele-track u {
  position: absolute; top: -2px; bottom: -2px; width: 1px;
  background: rgba(240,210,140,.4); pointer-events: none;
}
.stele-track u:nth-of-type(1) { left: 25%; }
.stele-track u:nth-of-type(2) { left: 50%; }
.stele-track u:nth-of-type(3) { left: 75%; }
.tech-btn {
  width: 100%; border-radius: 2px; letter-spacing: 2px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 36px; padding: 6px 10px;
  font-family: "STKaiti", "KaiTi", "Noto Serif SC", serif;
  font-size: 14px; font-weight: 800;
}
.tech-btn small { font-family: var(--font); font-size: 11px; letter-spacing: 0; opacity: .95; font-weight: 600; }
.tech-btn.primary {
  color: #2a1c08;
  border-color: #e2c878;
  background: linear-gradient(180deg, #ffe9a8, #e2c878 45%, #c4a050);
  box-shadow: inset 0 1px 0 rgba(255,255,240,.45), 0 3px 10px rgba(0,0,0,.25);
}
.tech-btn.ghost, .tech-btn:disabled {
  color: #cbb98a;
  border-color: rgba(180,145,70,.4);
  background: linear-gradient(180deg, rgba(70,55,32,.75), rgba(45,34,20,.9));
}

@media (max-width: 900px) {
  .tech-canon { grid-template-columns: 1fr; }
  .canon-spine {
    flex-direction: row; justify-content: flex-start; gap: 18px;
    padding: 10px 14px;
    writing-mode: horizontal-tb;
  }
  .cs-title, .cs-quote { writing-mode: horizontal-tb; letter-spacing: 2px; }
}
@media (max-width: 720px) {
  .ta-head { flex-direction: column; align-items: flex-start; }
  .tech-steles { grid-template-columns: 1fr; }
  .tech-stele { grid-template-columns: 88px 1fr; }
  .stele-medal { width: 72px; height: 72px; }
  .stele-medal img { width: 62px; height: 62px; }
}

/* 军事营地条 */
.camp-strip {
  display: flex; gap: 8px; margin-bottom: 10px;
}
.camp-unit {
  flex: 1; min-width: 0; text-align: center; padding: 10px 6px;
  border-radius: 12px; border: 1px solid var(--gold-line);
  background:
    radial-gradient(120px 50px at 50% 0%, rgba(232,193,90,.12), transparent 70%),
    linear-gradient(180deg, #1c2330, #141824);
}
.camp-unit .cu-ico { font-size: 26px; display: block; margin-bottom: 4px; }
.camp-unit b { color: var(--gold-pale); font-variant-numeric: tabular-nums; }

/* 侧栏顶饰 */
.sidebar {
  background:
    radial-gradient(80px 60px at 50% 0%, rgba(232,193,90,.1), transparent 70%),
    linear-gradient(180deg, rgba(20,24,34,.94), rgba(13,16,24,.94));
}
.sidebar::before {
  content: "三國";
  display: block; text-align: center;
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 13px; letter-spacing: 4px; color: var(--gold);
  padding: 4px 0 8px; opacity: .8;
}

/* 顶栏季节微光 */
.topbar { position: relative; }
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--season-glow, var(--gold)), transparent);
  opacity: .45;
}
.game-date {
  background: rgba(0,0,0,.22);
  box-shadow: inset 0 0 8px rgba(232,193,90,.08);
}

@media (max-width: 720px) {
  .cityscape { height: 110px; }
  .bt-scene { height: 72px; }
  .mini-realm { height: 130px; }
  .start-stamp { display: none; }
}

/* =====================================================================
 * v57 · 精品战略界面：全屏场景 / 锦旗导航 / 朝堂 / 城内热点
 * ===================================================================== */
body {
  font-family: "Noto Serif SC", var(--font);
}
.game-title, .topbar-title, .victory-title, .sh-name, .city-header-name {
  font-family: "Ma Shan Zheng", "STKaiti", "KaiTi", cursive;
}
.game-title { font-size: 76px; letter-spacing: 18px; }

.game-screen { position: relative; }
.scene-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center 28%;
  filter: saturate(.95) brightness(.55);
  transition: filter .4s ease;
}
.scene-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,9,12,.28) 0%, rgba(8,9,12,.15) 40%, rgba(8,9,12,.5) 100%);
}
.scene-bg[data-tab="overview"] { background-image: url('../assets/backgrounds/lanting.jpg'), url('../assets/backgrounds/shengshi.jpg'); }
.scene-bg[data-tab="build"] { background-image: url('../assets/backgrounds/xiaowu.jpg'), url('../assets/backgrounds/shengshi.jpg'); filter: saturate(1.05) brightness(.78); }
.scene-bg[data-tab="generals"],
.scene-bg[data-tab="military"] { background-image: url('../assets/backgrounds/wangshi.jpg'); }
.scene-bg[data-tab="tech"] { background-image: url('../assets/backgrounds/zhulin.jpg'); }
.scene-bg[data-tab="treasures"],
.scene-bg[data-tab="codex"] { background-image: url('../assets/backgrounds/taoyuan.jpg'); }
.scene-bg[data-tab="quests"] { background-image: url('../assets/backgrounds/xiongxin.jpg'); }
.scene-bg[data-tab="diplomacy"],
.scene-bg[data-tab="log"] { background-image: url('../assets/backgrounds/zhanyun.jpg'); }
.scene-bg[data-tab="map"] { opacity: 0; }

.topbar, .resource-bar, .layout { position: relative; z-index: 1; }
.topbar {
  background: linear-gradient(180deg, rgba(58,42,20,.92), rgba(28,20,10,.94));
  border-bottom: 2px solid var(--gold);
}
.topbar-title { font-size: 28px; letter-spacing: 6px; }

.sidebar {
  width: 54px; padding: 8px 5px; gap: 5px;
  background: transparent !important;
  border-right: none;
}
.sidebar::before { display: none !important; }
.nav-item {
  writing-mode: vertical-rl;
  letter-spacing: 3px;
  height: 68px; padding: 8px 4px;
  font-family: "ZCOOL XiaoWei", "STKaiti", "KaiTi", serif;
  font-size: 15px; font-weight: 700;
  color: #f6e3a1;
  background: linear-gradient(90deg, #4a1010, #b02a2a 42%, #4a1010);
  border: 1px solid #e8c15a;
  border-radius: 3px 9px 9px 3px;
  box-shadow: 2px 3px 8px rgba(0,0,0,.5), inset 0 0 10px rgba(0,0,0,.25);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.nav-item:hover { color: #fff; filter: brightness(1.08); }
.nav-item.active {
  background: linear-gradient(90deg, #7a5a12, #f0cd7c 45%, #7a5a12);
  color: #2a1a06; border-color: #fff3c2;
  box-shadow: 0 0 16px rgba(232,193,90,.55), inset 0 1px 0 rgba(255,255,255,.4);
  text-shadow: none;
}

.game-screen[data-tab="overview"] .content,
.game-screen[data-tab="build"] .content,
.game-screen[data-tab="map"] .content {
  padding: 8px 10px; overflow: hidden;
  display: flex; flex-direction: column;
  background: transparent;
  min-height: 0;
}
.game-screen[data-tab="generals"] .content,
.game-screen[data-tab="military"] .content,
.game-screen[data-tab="tech"] .content,
.game-screen[data-tab="treasures"] .content,
.game-screen[data-tab="quests"] .content,
.game-screen[data-tab="diplomacy"] .content,
.game-screen[data-tab="codex"] .content,
.game-screen[data-tab="log"] .content {
  background: linear-gradient(180deg, rgba(10,12,18,.42), rgba(10,12,18,.58));
}
.game-screen[data-tab="overview"] .panel,
.game-screen[data-tab="build"] .panel {
  background: linear-gradient(180deg, rgba(32,26,16,.78), rgba(14,12,8,.86));
  backdrop-filter: blur(8px);
}

/* 朝堂总览 */
.court-stage {
  display: grid; grid-template-columns: 240px minmax(0,1fr) 232px;
  gap: 10px; flex: 1; min-height: 0;
}
.court-ruler {
  position: relative; overflow: hidden; border-radius: 14px;
  border: 1px solid var(--gold-line); min-height: 0;
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
}
.court-ruler img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
}
.court-ruler-meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px 12px 12px;
  background: linear-gradient(180deg, transparent, rgba(8,6,4,.94));
}
.court-ruler-meta b {
  display: block; font-family: "Ma Shan Zheng", KaiTi, serif;
  font-size: 28px; letter-spacing: 4px; color: var(--gold-pale);
}
.court-ruler-meta span { font-size: 12px; color: var(--muted); }
.court-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.court-plaques { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.plaque {
  text-align: center; padding: 10px 8px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(48,38,20,.8), rgba(16,12,8,.88));
  border: 1px solid var(--gold-line);
}
.plaque em { display: block; font-style: normal; font-size: 12px; color: var(--muted); letter-spacing: 2px; }
.plaque b { display: block; font-size: 26px; color: var(--gold-pale); font-variant-numeric: tabular-nums; }
.plaque b small { font-size: 13px; color: var(--muted); }
.plaque span { font-size: 11px; color: var(--muted); }
.court-map { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.court-map .mini-realm { flex: 1; min-height: 120px; }
.court-fp { max-height: 120px; overflow: auto; margin-top: 6px; }
.court-log { flex: 0 0 auto; }
.court-side { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: auto; }
.court-post .cp { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.court-post img {
  width: 46px; height: 56px; object-fit: cover; object-position: top;
  border-radius: 8px; border: 1px solid var(--gold-line);
}
.court-post em { display: block; font-style: normal; font-size: 11px; color: var(--muted); }
.officer-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.officer { width: 52px; flex: 0 0 auto; text-align: center; font-size: 11px; color: var(--gold-pale); }
.officer img {
  width: 52px; height: 64px; object-fit: cover; object-position: top;
  border-radius: 8px; border: 1px solid var(--gold-line); display: block; margin-bottom: 3px;
}

/* 都城内政 */
.city-realm {
  position: relative; flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  border: 1px solid rgba(120,96,48,.45); border-radius: 12px; overflow: hidden;
  background: #0c0a08;
  box-shadow: inset 0 0 100px rgba(0,0,0,.55);
}
.city-vista {
  position: relative; flex: 1; min-height: 180px;
  overflow: hidden;
  background: #100e0c;
}
.cv-sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #181612 0%, #2a241c 32%, #3a3226 58%, #2c261c 100%);
  pointer-events: none;
}
.city-vista[data-season="summer"] .cv-sky { background: linear-gradient(180deg, #161812 0%, #24281c 36%, #322e22 62%, #262218 100%); }
.city-vista[data-season="autumn"] .cv-sky { background: linear-gradient(180deg, #1a1410 0%, #2e2418 36%, #3c2e1c 62%, #2a2016 100%); }
.city-vista[data-season="winter"] .cv-sky { background: linear-gradient(180deg, #16181c 0%, #22262c 36%, #2e3238 62%, #1e2226 100%); }
.cv-mountains {
  position: absolute; left: 0; right: 0; top: 8%; height: 48%;
  pointer-events: none;
  background:
    linear-gradient(175deg, transparent 42%, rgba(28,24,20,.55) 58%, transparent 59%),
    linear-gradient(188deg, transparent 36%, rgba(36,30,24,.5) 52%, transparent 53%),
    linear-gradient(162deg, transparent 48%, rgba(24,20,16,.58) 64%, transparent 65%);
  opacity: .7;
}
.cv-far {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%;
  opacity: .9; pointer-events: none;
  filter: saturate(.55) contrast(1.04) brightness(1.02);
}
.cv-mist {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(28,22,14,.2) 0%, transparent 30%, transparent 48%, rgba(36,28,18,.35) 72%, rgba(24,18,12,.55) 100%),
    radial-gradient(95% 55% at 50% 16%, rgba(120,95,55,.12), transparent 60%);
}
.cv-ground {
  position: absolute; left: 0; right: 0; top: 38%; bottom: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(72,56,38,.12) 18%,
      rgba(56,44,30,.38) 42%,
      rgba(40,30,20,.72) 68%,
      #241c14 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 100%);
  transform: none;
  box-shadow: none;
}
.cv-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 95% at 50% 42%, transparent 58%, rgba(10,8,4,.4) 100%);
}

.city-plot {
  position: absolute; transform: translateX(-50%);
  width: var(--pad, 140px);
  background: none; border: none; padding: 0;
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer;
}
.city-plot .cp-pad {
  position: absolute; bottom: 16%; left: 50%;
  width: 88%; height: 54px; transform: translateX(-50%) scaleY(.42);
  border-radius: 50%; z-index: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(72,58,40,.75), rgba(16,12,8,.95));
  box-shadow: 0 10px 22px rgba(0,0,0,.65);
}
.city-plot[data-kind="farm"] .cp-pad { background: radial-gradient(ellipse at 50% 40%, rgba(56,52,32,.8), rgba(14,12,8,.95)); }
.city-plot[data-kind="mine"] .cp-pad { background: radial-gradient(ellipse at 50% 40%, rgba(48,44,40,.85), rgba(12,10,8,.95)); }
.city-plot[data-kind="market"] .cp-pad { box-shadow: 0 10px 22px rgba(0,0,0,.65), 0 0 14px rgba(160,120,48,.25); }
.city-plot .cp-main {
  position: relative; z-index: 2; height: var(--sz, 110px); width: auto;
  filter: drop-shadow(4px 10px 10px rgba(0,0,0,.62));
  transition: transform .16s ease, filter .16s ease;
}
.city-plot:hover .cp-main { transform: scale(1.1) translateY(-8px); }
.city-plot.sel .cp-main {
  transform: scale(1.12) translateY(-10px);
  filter: drop-shadow(0 0 12px rgba(180,140,60,.55)) drop-shadow(4px 10px 10px rgba(0,0,0,.7));
}
.city-plot .cp-extra, .city-plot .cp-flag {
  position: absolute; z-index: 1; pointer-events: none;
  filter: drop-shadow(2px 6px 6px rgba(0,0,0,.45));
}
.city-plot .cp-extra.e1 { left: 4%; bottom: 28%; height: calc(var(--sz) * .55); }
.city-plot .cp-extra.e2 { right: 6%; bottom: 24%; height: calc(var(--sz) * .48); }
.city-plot .cp-extra.e3 { left: 28%; bottom: 20%; height: calc(var(--sz) * .42); }
.city-plot[data-kind="house"] .cp-extra.e1 { left: -8%; bottom: 22%; height: calc(var(--sz) * .72); }
.city-plot[data-kind="house"] .cp-extra.e2 { right: -6%; bottom: 18%; height: calc(var(--sz) * .62); }
.city-plot .cp-flag { height: calc(var(--sz) * .38); top: 6%; }
.city-plot .cp-flag.f1 { left: 8%; }
.city-plot .cp-flag.f2 { right: 8%; }
.city-plot .cp-crop {
  position: absolute; bottom: 22%; width: 28%; height: 10px; border-radius: 40%;
  background: linear-gradient(90deg, #8a9a3a, #c4c25a); z-index: 1; opacity: .8;
}
.city-plot .cp-crop.c1 { left: 10%; }
.city-plot .cp-crop.c2 { right: 12%; width: 22%; }
.city-plot .cp-smoke {
  position: absolute; left: 46%; top: 8%; width: 8px; height: 8px; z-index: 3;
  border-radius: 50%; background: rgba(255,255,255,.35);
  box-shadow: 0 0 8px rgba(255,255,255,.4);
  animation: city-smoke 3.6s ease-in infinite;
  pointer-events: none;
}
.city-plot .cp-smoke.s2 { left: 38%; animation-delay: -1.4s; }
@keyframes city-smoke {
  0% { transform: translateY(0) scale(1); opacity: .5; }
  100% { transform: translateY(-28px) scale(1.8); opacity: 0; }
}
.city-plot .cp-lantern {
  position: absolute; bottom: 48%; width: 8px; height: 12px; z-index: 3;
  border-radius: 2px 2px 4px 4px;
  background: radial-gradient(circle at 40% 30%, #ffe9a8, #c0392b);
  box-shadow: 0 0 8px rgba(255,160,60,.8);
  animation: lantern-glow 2.4s ease-in-out infinite;
  pointer-events: none;
}
.city-plot .cp-lantern.l1 { left: 18%; }
.city-plot .cp-lantern.l2 { right: 16%; animation-delay: -.8s; }
.city-plot .cp-lantern.l3 { left: 48%; bottom: 58%; animation-delay: -1.4s; }
@keyframes lantern-glow { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
.city-plot .cp-glow {
  position: absolute; inset: 12% 18% 22%; z-index: 1; pointer-events: none;
  background: radial-gradient(circle, rgba(180,210,255,.35), transparent 70%);
  animation: fx-aura 2.8s ease-in-out infinite;
}
.city-plot .cp-drill {
  position: absolute; left: 20%; bottom: 20%; width: 18%; height: 6px; z-index: 3;
  border-radius: 3px; background: rgba(232,193,90,.55);
  animation: drill-pace 2.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes drill-pace { 0%,100% { transform: translateX(0); } 50% { transform: translateX(28px); } }
.cp-yield {
  position: absolute; top: 4%; right: 8%; z-index: 4;
  font-size: 11px; font-weight: 900; color: #efe3b8;
  text-shadow: 0 1px 3px #000;
  animation: yield-float 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes yield-float { 0%,100% { transform: translateY(0); opacity: .75; } 50% { transform: translateY(-7px); opacity: 1; } }
.cs-plate {
  position: relative; z-index: 4; margin-top: -6px;
  background: rgba(16,12,6,.88); color: var(--gold-pale);
  border: 1px solid var(--gold-line); border-radius: 8px;
  padding: 2px 8px; font-size: 12px; font-weight: 800; white-space: nowrap;
  text-shadow: 0 1px 2px #000;
  display: flex; gap: 6px; align-items: baseline;
}
.cs-plate em {
  font-style: normal; font-size: 10px; letter-spacing: 1px;
  color: #a89870; padding-right: 4px; border-right: 1px solid rgba(180,140,60,.35);
}
.cs-plate i { font-style: normal; color: #c9b27a; font-size: 10px; }
.city-plot.sel .cs-plate { border-color: var(--gold); box-shadow: 0 0 10px var(--gold-glow); }
.city-plot .cp-fx { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.city-plot .cp-ring {
  position: absolute; left: 50%; bottom: 18%; width: 78%; height: 36px;
  transform: translateX(-50%) scaleY(.45); border-radius: 50%;
  border: 2px solid rgba(210,170,90,.35); box-shadow: 0 0 12px rgba(200,160,70,.2);
}
.city-plot .cp-sparkles {
  position: absolute; inset: 8% 12% 22%; pointer-events: none;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,230,150,.7) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 24%, rgba(255,230,150,.65) 0 2px, transparent 3px),
    radial-gradient(circle at 52% 12%, rgba(255,240,180,.8) 0 2px, transparent 3px);
  animation: yield-float 2.8s ease-in-out infinite;
}
.city-plot .cp-crown {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 14px; height: 10px; z-index: 5;
  background: linear-gradient(180deg, #ffe9a8, #c4a050);
  clip-path: polygon(0 100%, 18% 35%, 35% 70%, 50% 10%, 65% 70%, 82% 35%, 100% 100%);
  filter: drop-shadow(0 0 4px rgba(255,220,120,.6));
}
.city-plot .cp-crop.c3 { left: 36%; bottom: 18%; opacity: .9; }
.city-plot .cp-crop.c4 { right: 28%; bottom: 16%; width: 18%; opacity: .85; }

/* 建筑/科技/城池 · 等级视觉进化 */
.city-plot.vt-2 .cp-main { filter: drop-shadow(4px 10px 10px rgba(0,0,0,.62)) brightness(1.04) saturate(1.05); }
.city-plot.vt-2 .cs-plate { border-color: rgba(180,140,70,.55); }
.city-plot.vt-2 .cs-plate em { color: #c9b07a; }
.city-plot.vt-2 .cp-pad { box-shadow: 0 10px 22px rgba(0,0,0,.65), 0 0 10px rgba(160,120,50,.2); }

.city-plot.vt-3 .cp-main { filter: drop-shadow(4px 12px 12px rgba(0,0,0,.65)) brightness(1.08) saturate(1.12); }
.city-plot.vt-3 .cs-plate {
  border-color: rgba(220,180,90,.7);
  background: linear-gradient(180deg, rgba(58,42,18,.95), rgba(20,14,8,.95));
  box-shadow: 0 0 12px rgba(200,160,70,.25);
}
.city-plot.vt-3 .cs-plate em { color: #ffe7a8; }
.city-plot.vt-3 .cp-pad { box-shadow: 0 10px 22px rgba(0,0,0,.65), 0 0 16px rgba(200,150,60,.35); }

.city-plot.vt-4 .cp-main {
  filter: drop-shadow(0 0 10px rgba(230,190,100,.35)) drop-shadow(4px 12px 12px rgba(0,0,0,.65)) brightness(1.12) saturate(1.18);
}
.city-plot.vt-4 .cs-plate {
  border-color: #e8c15a;
  background: linear-gradient(180deg, rgba(90,65,28,.96), rgba(28,20,10,.96));
  box-shadow: 0 0 16px rgba(232,193,90,.4);
}
.city-plot.vt-4 .cs-plate em { color: #fff1c0; text-shadow: 0 0 6px rgba(255,220,120,.5); }
.city-plot.vt-4 .cp-ring { border-color: rgba(240,200,110,.65); box-shadow: 0 0 16px rgba(230,180,80,.35); }

.city-plot.vt-5 .cp-main {
  filter: drop-shadow(0 0 14px rgba(255,220,140,.55)) drop-shadow(4px 14px 14px rgba(0,0,0,.7)) brightness(1.16) saturate(1.22);
}
.city-plot.vt-5 .cs-plate {
  border-color: #ffe9a8;
  background: linear-gradient(180deg, rgba(120,80,30,.98), rgba(40,26,10,.98));
  box-shadow: 0 0 20px rgba(255,210,120,.55);
}
.city-plot.vt-5 .cs-plate em {
  color: #fff8dc;
  background: linear-gradient(90deg, transparent, rgba(255,200,80,.2), transparent);
}
.city-plot.vt-5 .cp-pad {
  box-shadow: 0 12px 24px rgba(0,0,0,.7), 0 0 22px rgba(255,200,100,.45);
}
.city-plot.vt-5 .cp-ring {
  border-width: 2px; border-color: rgba(255,230,160,.85);
  box-shadow: 0 0 20px rgba(255,220,140,.5);
}

.city-pick.vt-3 { border-color: rgba(210,170,90,.55); }
.city-pick.vt-4 { border-color: rgba(232,193,90,.7); box-shadow: 0 0 8px rgba(232,193,90,.2); }
.city-pick.vt-5 {
  border-color: #e8c15a;
  background: linear-gradient(180deg, rgba(70,50,22,.9), rgba(30,22,12,.95));
  box-shadow: 0 0 12px rgba(232,193,90,.35);
}

.cd-art-wrap { position: relative; }
.cd-tier {
  position: absolute; left: 4px; bottom: 4px; z-index: 2;
  font-size: 10px; letter-spacing: 1px; color: #1a1208;
  background: linear-gradient(180deg, #ffe9a8, #c4a050);
  border: 1px solid #8a6828; padding: 1px 5px;
  font-family: "STKaiti", "KaiTi", "Noto Serif SC", serif; font-weight: 800;
}
.city-dock.vt-3 .cd-art-wrap { border-color: rgba(220,180,90,.65); box-shadow: 0 0 12px rgba(200,160,70,.25); }
.city-dock.vt-4 .cd-art-wrap {
  border-color: #e8c15a;
  box-shadow: 0 0 16px rgba(232,193,90,.4), inset 0 0 12px rgba(255,220,140,.12);
}
.city-dock.vt-5 .cd-art-wrap {
  border-color: #ffe9a8;
  box-shadow: 0 0 22px rgba(255,210,120,.55), inset 0 0 16px rgba(255,230,160,.18);
}
.city-dock.vt-5 .cd-art { filter: drop-shadow(0 4px 8px #000) brightness(1.08); }

.tech-stele .stele-tier {
  display: inline-block; margin-right: 4px;
  font-size: 10px; letter-spacing: 1px; color: #cbb98a;
  font-family: "STKaiti", "KaiTi", "Noto Serif SC", serif;
}
.tech-stele.vt-2 .stele-medal { border-color: rgba(200,160,80,.6); }
.tech-stele.vt-3 {
  border-color: rgba(210,170,90,.6);
  background:
    linear-gradient(160deg, rgba(180,140,70,.32), transparent 42%),
    linear-gradient(180deg, #5a462c, #3a2c1a);
}
.tech-stele.vt-3 .stele-medal {
  border-color: rgba(230,190,110,.7);
  box-shadow: inset 0 0 0 3px rgba(70,50,22,.55), 0 0 14px rgba(200,160,70,.3);
}
.tech-stele.vt-3 .stele-tier { color: #ffe7a8; }
.tech-stele.vt-4 {
  border-color: rgba(232,193,90,.75);
  box-shadow: inset 0 1px 0 rgba(255,240,200,.2), 0 0 18px rgba(232,193,90,.28);
}
.tech-stele.vt-4 .stele-medal {
  border-color: #e8c15a;
  box-shadow: inset 0 0 0 3px rgba(70,50,22,.55), 0 0 18px rgba(232,193,90,.45);
}
.tech-stele.vt-4 .stele-tier { color: #fff1c0; text-shadow: 0 0 6px rgba(255,220,120,.45); }
.tech-stele.vt-5 {
  border-color: #ffe9a8;
  background:
    linear-gradient(160deg, rgba(230,180,80,.4), transparent 45%),
    linear-gradient(180deg, #6e5430, #42301a);
  box-shadow: inset 0 1px 0 rgba(255,240,200,.25), 0 0 24px rgba(255,210,120,.4);
}
.tech-stele.vt-5 .stele-medal {
  border-color: #fff0b8;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,230,160,.45), transparent 55%),
    radial-gradient(circle, #7a5c30 0%, #3a2a16 75%);
  box-shadow: inset 0 0 0 3px rgba(90,65,28,.5), 0 0 22px rgba(255,220,140,.55);
}
.tech-stele.vt-5 .stele-tier {
  color: #fff8dc;
  padding: 0 4px;
  background: rgba(120,80,30,.45);
  border: 1px solid rgba(240,200,110,.5);
}

.map-city3d.vt-2 .mc-ring { opacity: .85; border-color: rgba(232,193,90,.45); }
.map-city3d.vt-3 .mc-ring {
  opacity: 1; border-width: 2px; border-color: rgba(232,193,90,.65);
  box-shadow: 0 0 12px rgba(232,193,90,.35);
}
.map-city3d.vt-3 .mc-castle { filter: brightness(1.06) saturate(1.08); }
.map-city3d.vt-4 .mc-ring {
  border-color: #e8c15a;
  box-shadow: 0 0 16px rgba(232,193,90,.5);
  animation: cantake3d 2.8s ease-in-out infinite;
}
.map-city3d.vt-4 .mc-castle { filter: brightness(1.1) saturate(1.12) drop-shadow(0 0 8px rgba(232,193,90,.35)); }
.map-city3d.vt-5 .mc-ring {
  border-color: #ffe9a8;
  box-shadow: 0 0 22px rgba(255,220,140,.65);
  animation: cantake3d 2.2s ease-in-out infinite;
}
.map-city3d.vt-5 .mc-castle {
  filter: brightness(1.14) saturate(1.18) drop-shadow(0 0 12px rgba(255,220,140,.5));
}
.map-city3d .city-lv em {
  font-style: normal; margin-right: 3px; color: #ffe7a8;
  font-family: "STKaiti", "KaiTi", "Noto Serif SC", serif;
}
.map-city3d.vt-4 .city-lv, .map-city3d.vt-5 .city-lv {
  border-color: #e8c15a; color: #fff1c0;
  box-shadow: 0 0 8px rgba(232,193,90,.35);
}
.map-city3d.vt-5 .city-lv {
  background: linear-gradient(180deg, #5a4018, #2a1c0a);
  border-color: #ffe9a8;
}

.city-hud {
  position: absolute; top: 8px; left: 8px; right: 8px; z-index: 12;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 10px;
  background: linear-gradient(180deg, rgba(24,18,10,.88), rgba(12,9,6,.9));
  border: 1px solid var(--gold-line); border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
}
.ch-cap { display: flex; align-items: center; gap: 8px; min-width: 140px; }
.ch-flag { height: 28px; filter: drop-shadow(0 2px 3px #000); }
.ch-cap b { display: block; font-size: 16px; letter-spacing: 2px; color: var(--gold-pale); }
.ch-cap span { font-size: 11px; color: var(--muted); }
.ch-stat { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.ch-stat em { font-style: normal; color: var(--muted); }
.ch-bar { width: 72px; height: 7px; border-radius: 99px; background: rgba(0,0,0,.45); overflow: hidden; border: 1px solid rgba(255,255,255,.12); }
.ch-bar i { display: block; height: 100%; background: linear-gradient(90deg, #8c1f1a, #e8c15a); }
.ch-bar.pop i { background: linear-gradient(90deg, #3b82f6, #86efac); }
.ch-rates { display: flex; gap: 8px; font-size: 11px; color: #d8d3c5; flex-wrap: wrap; }
.ch-advisor {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,.25); border: 1px solid var(--gold-line);
  border-radius: 10px; padding: 3px 10px 3px 3px; color: inherit; cursor: pointer;
}
.ch-advisor img { width: 36px; height: 44px; object-fit: cover; object-position: top; border-radius: 7px; }
.ch-advisor em { display: block; font-style: normal; font-size: 10px; color: var(--muted); }
.ch-advisor b { color: var(--gold-pale); font-size: 13px; }

.city-picks {
  position: absolute; right: 8px; left: auto; top: 68px; z-index: 12;
  display: flex; flex-direction: column; gap: 4px;
  max-height: calc(100% - 168px); overflow: auto;
}
.city-pick {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 8px 3px 3px; border-radius: 8px;
  background: rgba(14,10,6,.78); border: 1px solid rgba(232,193,90,.28);
  color: var(--gold-pale); font-size: 12px; font-weight: 800; cursor: pointer;
  white-space: nowrap;
}
.city-pick img { height: 28px; width: auto; }
.city-pick b { margin-left: auto; color: #efe3b8; font-variant-numeric: tabular-nums; }
.city-pick.on { border-color: var(--gold); background: rgba(58,42,16,.9); box-shadow: 0 0 10px var(--gold-glow); }

.city-dock {
  position: relative; z-index: 20; flex: 0 0 auto;
  display: grid; grid-template-columns: 84px 1fr auto 210px; gap: 12px; align-items: center;
  margin: 0; padding: 8px 12px;
  background: linear-gradient(180deg, rgba(28,22,12,.94), rgba(14,10,6,.96));
  border-top: 1px solid var(--gold-line);
  box-shadow: 0 -8px 24px rgba(0,0,0,.35);
}
.cd-art-wrap {
  width: 76px; height: 76px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--gold-line);
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.12), #1a140c);
  display: flex; align-items: center; justify-content: center;
}
.cd-art { height: 70px; filter: drop-shadow(0 4px 6px #000); }
.cd-name { font-size: 16px; font-weight: 900; color: var(--gold-pale); letter-spacing: 1px; }
.cd-desc { font-size: 12px; color: var(--muted); margin: 2px 0; }
.cd-now { font-size: 12px; color: #efe3b8; }
.cd-next { font-size: 11px; color: #86efac; margin: 2px 0 6px; }
.cd-trade { font-size: 12px; display: flex; flex-direction: column; gap: 4px; color: var(--text); }
.cd-trade-h { font-size: 11px; color: var(--gold); letter-spacing: 2px; }
.cd-stall { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }

@media (max-width: 1100px) {
  .court-stage { grid-template-columns: 200px 1fr; }
  .court-side { grid-column: 1 / -1; flex-direction: row; }
  .city-dock { grid-template-columns: 64px 1fr auto; }
  .cd-trade { display: none; }
  .city-picks { display: none; }
}
@media (max-width: 720px) {
  .court-stage { grid-template-columns: 1fr; overflow: auto; }
  .sidebar { width: 44px; }
  .nav-item { height: 56px; font-size: 13px; }
}