:root {
  --cr: #c8a23c;   /* 克里利亚 金 */
  --ta: #7a4ffb;   /* 塔里克 紫 */
  --el: #3f9d5a;   /* 艾尔梵 绿 */
  --ho: #c9ccd2;   /* 圣冠 银白 */
  --xu: #b23a3a;   /* 玄夜 红 */
  --az: #3a6fb2;   /* 苍蓝 蓝 */
  --ink: #26282c;
  --bg: #f4f5f8;
  --panel: #ffffff;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background: var(--bg); color: var(--ink);
}
h1 { margin: 0; font-size: 1.4rem; letter-spacing: .1em; }
header {
  display: flex; align-items: baseline; gap: 1.5rem;
  padding: .8rem 1.2rem; background: var(--panel);
  border-bottom: 2px solid #e2e5ea;
}
button {
  font-size: 1rem; padding: .5rem 1rem; border-radius: 6px;
  border: 1px solid #c4c9d2; background: #fff; cursor: pointer;
}
button:disabled { opacity: .45; cursor: not-allowed; }
button:not(:disabled):hover { background: #eef1f6; }
ul { list-style: none; padding: 0; margin: 0; }
.empty { color: #9aa0aa; }

/* ═══════════════════════════════════════════════════════════════════════════
   厄尔达西亚 · 设计令牌层  (v1 / 冷银主题)
   ───────────────────────────────────────────────────────────────────────────
   锚定既有美术资产，不另起炉灶：
     事件牌 = 银白金属框 + 藏青灰底 + 菱形红宝石
     兵种牌 = 青绿金属框      英雄牌 = 金金属框
     地图   = 明亮制图风  ⇒  正确做法是「深色金属 UI 包裹亮地图」
   视觉层级由「金属档位」承担，玩家不读字也能分出信息轻重：
     银 = 框架/常规   青绿 = 己方可用/成功   金 = 关键/高价值   红宝石 = 危险/交战
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Eldalia Serif";
  src: url("/static/fonts/noto-serif-sc-subset.woff2") format("woff2");
  /* 单一字重（wght=600）覆盖 400–700，避免浏览器合成假粗体造成设备间字重不一致 */
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* ── 底层：取自事件牌底色的藏青灰 ── */
  --bg-0: #0a0f16;   /* 页底 */
  --bg-1: #121a26;   /* 面板 */
  --bg-2: #18222f;   /* 卡片 / 抬升面 */
  --bg-3: #202c3c;   /* 输入框 / hover */
  --bg-4: #2a3849;   /* 激活 / 描边底 */

  /* ── 金属三档：作为 1px 渐变描边使用 ── */
  --mt-silver: linear-gradient(158deg, #f2f6fb 0%, #93a0b2 22%, #e6edf5 42%, #69768a 68%, #c6d0dd 100%);
  --mt-teal:   linear-gradient(158deg, #a8ecdc 0%, #3f8f7f 24%, #8fe0cc 44%, #256b5f 70%, #6cc4b0 100%);
  --mt-gold:   linear-gradient(158deg, #ffeeb4 0%, #b98f36 24%, #f6dc9a 44%, #7d5f22 70%, #d9b45e 100%);
  --mt-gem:    linear-gradient(158deg, #f08a7c 0%, #b83226 30%, #e2574c 50%, #7d1c14 76%, #c0392b 100%);
  --mt-silver-solid: #aab6c6;
  --mt-gold-solid:   #c9a24f;
  --mt-teal-solid:   #5fb3a0;

  /* ── 文字 ── */
  --tx-1: #e8eef7;   /* 主 */
  --tx-2: #a6b3c6;   /* 次 */
  --tx-3: #6d7c91;   /* 弱 / 说明 */
  --tx-4: #4d5b6e;   /* 禁用 */
  --tx-inv: #0b111a; /* 落在亮金属面上的字 */

  /* ── 强调 ── */
  --gem: #c0392b;        /* 红宝石：全 UI 唯一强调色 */
  --gem-lt: #e2574c;
  --accent: #6ea8dc;     /* 冷银蓝：可交互 */
  --accent-dk: #2f5f96;

  /* ── 语义 ── */
  --ok: #45c46a; --warn: #e0a93c; --bad: #e2574c; --info: #5c9ae0; --magic: #9b6bff;

  /* ── 势力色：全项目唯一取值（深色底优化，手机端与大屏共用；勿再各写一套） ── */
  --cr: #e5b84e;  /* 克里利亚帝国 金 */
  --ta: #9b6bff;  /* 塔里克王国   紫 */
  --el: #4fbf77;  /* 艾尔梵迪尔   绿 */
  --ho: #d8dee6;  /* 圣冠教廷     银白 */
  --xu: #e0564a;  /* 玄夜王朝     红 */
  --az: #5c9ae0;  /* 苍蓝联邦     蓝 */
  --neutral: #7e8b9c;  /* 中立 */

  /* ── 字体 ── */
  --ff-serif: "Eldalia Serif", "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, SimSun, serif;
  --ff-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, sans-serif;

  /* ── 字阶（fluid：360→430px 区间自适应；大屏在 host.css 里改回固定值） ── */
  --fs-xs:  clamp(.68rem, 2.9vw, .78rem);
  --fs-sm:  clamp(.74rem, 3.2vw, .85rem);
  --fs-md:  clamp(.82rem, 3.55vw, .95rem);
  --fs-lg:  clamp(.90rem, 3.9vw, 1.03rem);
  --fs-xl:  clamp(1.00rem, 4.4vw, 1.20rem);
  --fs-2xl: clamp(1.12rem, 5.1vw, 1.40rem);
  --fs-num: clamp(1.00rem, 4.2vw, 1.18rem);
  --lh-tight: 1.15; --lh: 1.5; --lh-loose: 1.68;
  --ls-title: .09em;

  /* ── 间距 ── */
  --sp-1: .18rem; --sp-2: .35rem; --sp-3: .55rem;
  --sp-4: .8rem;  --sp-5: 1.1rem; --sp-6: 1.5rem;
  --pad-panel: clamp(.6rem, 2.6vw, .85rem);
  --pad-page:  clamp(.7rem, 3.4vw, 1.05rem);

  /* ── 圆角（面板用微圆角而不是切角：切角会被 clip-path 切断描边） ── */
  --r-xs: 3px; --r-sm: 5px; --r: 8px; --r-lg: 12px;

  /* ── 阴影 ── */
  --sh-1: 0 1px 2px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.35);
  --sh-2: 0 10px 34px rgba(0,0,0,.6);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.06);
  --glow-gem: 0 0 10px rgba(192,57,43,.6);
  --glow-accent: 0 0 12px rgba(110,168,220,.45);

  /* ── 兼容映射：既有样式大量引用 --ink / --bg / --panel ──
     注意：--ink 原先既当文字色又当「深色填充」。改深色主题后它只表示文字色，
     原先拿它当填充的 4 处（.otab.active / .chip.sel / .abtn.active / .fsub-btn.active）
     已在 mobile.css 覆盖层里逐条改成金属面。 */
  --ink: var(--tx-1);
  --bg: var(--bg-0);
  --panel: var(--bg-1);
}

/* ── 基础层：底色 + 极淡斜纹（不是纯色，避免大片死黑） ── */
html { background: var(--bg-0); }
body {
  font-family: var(--ff-sans);
  font-size: var(--fs-md);
  line-height: var(--lh);
  color: var(--tx-1);
  background-color: var(--bg-0);
  background-image:
    radial-gradient(118% 55% at 50% -8%, rgba(110,168,220,.10), transparent 62%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--ff-serif);
  font-weight: 600;
  letter-spacing: var(--ls-title);
  color: var(--tx-1);
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

/* ── 标题前缀：红宝石菱形（全 UI 唯一强调色，用在标题上做视觉锚点） ── */
h2::before, h3::before,
.ph-title::before, .st-head::before, .m-sub::before {
  content: "";
  display: inline-block;
  width: .42em; height: .42em;
  margin-right: .5em;
  vertical-align: .06em;
  background: var(--mt-gem);
  transform: rotate(45deg);
  box-shadow: var(--glow-gem);
}

/* ── 页头 ── */
header {
  background: linear-gradient(180deg, #1a2434, var(--bg-1));
  border-bottom: 1px solid transparent;
  border-image: var(--mt-silver) 1;
  box-shadow: 0 2px 12px rgba(0,0,0,.5);
}
header h1 { color: var(--tx-1); }

/* ── 表单控件 ── */
input, select, textarea {
  font-family: var(--ff-sans);
  font-size: var(--fs-md);
  color: var(--tx-1);
  background: var(--bg-3);
  border: 1px solid var(--bg-4);
  border-radius: var(--r-sm);
  padding: .42rem .55rem;
}
input::placeholder { color: var(--tx-3); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--glow-accent);
}
select option { background: var(--bg-1); color: var(--tx-1); }

/* ── 按钮基座：默认「次级」= 深底 + 银描边 + 亮字 ── */
button {
  font-family: var(--ff-serif);
  font-weight: 600;
  letter-spacing: .04em;
  font-size: var(--fs-md);
  color: var(--tx-1);
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2)) padding-box,
              var(--mt-silver) border-box;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: .5rem 1rem;
  cursor: pointer;
  box-shadow: var(--sh-inset);
  transition: filter .15s ease, transform .06s ease;
}
button:not(:disabled):hover { filter: brightness(1.25); }
button:not(:disabled):active { transform: translateY(1px); }
button:disabled { opacity: .38; cursor: not-allowed; filter: grayscale(.5); }

/* ── 滚动条：细银，不抢视线 ── */
* { scrollbar-width: thin; scrollbar-color: var(--bg-4) transparent; }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #56657a, #2b3746);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: #6d7c91; }

/* ── 通用语义色工具 ── */
.empty { color: var(--tx-3); }

/* ── 动态红色分界线（势力边界）· 2026-09-21 ──
   四个地图层（大屏主图 / 大屏放大 / 手机缩略 / 手机弹窗）共用同一套样式。
   svg 与地图同坐标系（viewBox 0 0 11811 11811，preserveAspectRatio=none），
   vector-effect:non-scaling-stroke 让红线恒为 ~3px、不随缩放变粗变细。 */
#map-frontier, #host-map-zoom-frontier,
#mini-map-frontier, #map-modal-frontier {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
}
/* 遮罩线：盖住底图 map.png 里烘焙死的旧势力红线，颜色近似地图内部边界。
   v2 起元素由 <line> 改为 <path>（沿真实地域边界的折线），选择器两者兼容。 */
#map-frontier line.mf-mask, #map-frontier path.mf-mask,
#host-map-zoom-frontier line.mf-mask, #host-map-zoom-frontier path.mf-mask,
#mini-map-frontier line.mf-mask, #mini-map-frontier path.mf-mask,
#map-modal-frontier line.mf-mask, #map-modal-frontier path.mf-mask {
  stroke: #3d2f24; stroke-width: 12; stroke-linecap: round; opacity: .96;
  /* 不用 vector-effect:non-scaling-stroke，让它随地图缩放，才能在不同尺寸下盖住底图红线。 */
}
/* 当前真实势力边界：鲜红色，始终 ~3px 设备像素，清晰锐利。 */
#map-frontier line.mf-frontier, #map-frontier path.mf-frontier,
#host-map-zoom-frontier line.mf-frontier, #host-map-zoom-frontier path.mf-frontier,
#mini-map-frontier line.mf-frontier, #mini-map-frontier path.mf-frontier,
#map-modal-frontier line.mf-frontier, #map-modal-frontier path.mf-frontier {
  stroke: #e23b3b; stroke-width: 3; vector-effect: non-scaling-stroke;
  stroke-linecap: round; opacity: .92;
}