/* 外壳：标题、选君主、弹窗、战斗 HUD、加载。
   城内令台那一大套样式在 strategy.css 里，这里不重复。 */

:root {
  --qx-ink: #0e1216;
  --qx-gold: #c9a227;
  --qx-cloth: #d8cdb8;
  --qx-banner: #a32b22;
}

html, body { margin: 0; height: 100%; background: var(--qx-ink); overflow: hidden;
  font: 14px/1.7 system-ui, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  color: var(--qx-cloth); }
#app { position: fixed; inset: 0; }
#app canvas { display: block; }
#fx-layer { position: fixed; inset: 0; pointer-events: none; }
/* 不给 #ui-root 开 pointer-events:auto —— 那会让整层变成盖住画布的点击盾，
   点地图完全没反应。只给真正的控件开。 */
#ui-root { position: fixed; inset: 0; pointer-events: none; }
#ui-root > * { pointer-events: auto; }

/* ---------------------------------------------------------------- 加载 */
.qx-loading { position: fixed; inset: 0; display: grid; place-items: center;
  background: radial-gradient(60% 60% at 50% 45%, #1a1512, #0b0d10); z-index: 100; }
.qx-loading__text { letter-spacing: .28em; color: var(--qx-gold); font-size: 15px; }

/* ---------------------------------------------------------------- 标题 */
.qx-title { position: absolute; inset: 0; display: grid; place-content: center;
  justify-items: center; gap: 22px; text-align: center;
  background: radial-gradient(70% 70% at 50% 40%, #16120e99, #080a0ce8); }
.qx-title h1 { margin: 0; font-size: clamp(38px, 7vw, 72px); letter-spacing: .12em;
  color: var(--qx-gold); font-weight: 800; }
.qx-title h1 em { display: block; font-style: normal; font-size: .36em;
  letter-spacing: .5em; color: var(--qx-cloth); opacity: .8; margin-top: .4em; }
.qx-title__sub { margin: 0; max-width: 32em; opacity: .72; padding: 0 16px; }
.qx-title__scenarios { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  max-width: min(760px, 92vw); }
.qx-scn, .qx-king { display: grid; gap: 3px; padding: 14px 18px; cursor: pointer; text-align: left;
  background: #1b1f24; border: 1px solid #2f353c; border-radius: 10px; color: inherit; font: inherit; }
.qx-scn:hover, .qx-king:hover { border-color: var(--qx-gold); background: #232830; }
.qx-scn b, .qx-king b { color: var(--qx-gold); font-size: 16px; }
.qx-scn span, .qx-king span { opacity: .62; font-size: 12px; }
.qx-kings { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  max-width: min(820px, 92vw); max-height: 56vh; overflow: auto; padding: 2px; }
.qx-title h2 { margin: 0; color: var(--qx-gold); font-size: 22px; letter-spacing: .14em; }
.qx-title__lang, .qx-back { background: none; border: 1px solid #39404a; color: inherit;
  padding: 6px 14px; border-radius: 6px; cursor: pointer; font: inherit; opacity: .75; }
.qx-title__lang:hover, .qx-back:hover { opacity: 1; border-color: var(--qx-gold); }

/* ---------------------------------------------------------------- 弹窗 */
.qx-modal { position: absolute; inset: 0; display: grid; place-items: center;
  background: #06080abb; backdrop-filter: blur(3px); }
.qx-modal__box { background: #161a1f; border: 1px solid #333a42; border-radius: 12px;
  padding: 24px 28px; max-width: min(460px, 90vw); text-align: center; display: grid; gap: 14px; }
.qx-modal__box h2, .qx-modal__box h3 { margin: 0; color: var(--qx-gold); }
.qx-modal__box p { margin: 0; opacity: .75; }
.qx-modal__acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.qx-btn { background: #232931; border: 1px solid #3a424c; color: inherit; font: inherit;
  padding: 9px 20px; border-radius: 8px; cursor: pointer; }
.qx-btn:hover { border-color: var(--qx-gold); }
.qx-btn--main { background: linear-gradient(180deg, var(--qx-gold), #8f6f18);
  color: #241a05; border-color: #a5851f; font-weight: 700; }
.qx-btn--tiny { padding: 5px 12px; font-size: 12px; }

/* 旧的战斗 HUD（居中一个小方块，只有回合与城门血条）已由文件末尾的指挥界面取代。
   那一条 `transform: translateX(-50%)` 留着害死人：新界面是铺满的三栏，
   没人会想到再去覆盖一个 transform，结果整块 HUD 被推出屏幕一半，左边的
   我军名册整列点不到——Playwright 报的是「element is outside of the viewport」。 */

@media (max-width: 620px) {
  .qx-title { gap: 14px; }
  .qx-title__scenarios { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- 地图与界面共处
   战略界面是三栏铺满的，整块盖在画布上，于是那张 3D 大地图一眼都看不见。
   原作是「光标在地图上选城」，所以这里让两侧栏半透、中栏在没选城时整个让开，
   地图就在底下，随时看得见。选了城再把面板推上来看细节。 */
/* **根容器自己就有一整块底色**（strategy.css 里的 var(--bg)），铺满视口盖在画布上。
   地图一直在正常渲染——6600 次 draw call、163 万三角形，readPixels 取到的是土黄色，
   可屏幕中间是一片纯色，看上去就跟地图压根没画出来一样。
   HUD 不该有自己的地：背景就是那张地图。它同时也是个铺满的点击盾，一并关掉，
   由下面各个真正要吃点击的部件自己开回来。 */
/* `#ui-root > *` 是 id 选择器，权重压过光秃秃的 `.qx`，所以这里必须同样带上 #ui-root，
   否则 pointer-events 根本没生效——整块 HUD 依旧是盖住画布的点击盾。 */
#ui-root > .qx { background: transparent !important; pointer-events: none; }
/* #ui-root 自己也带一层底色（strategy.css 的 `.qx-root { background: var(--bg) }`）。
   它是这一串遮挡里**最难发现**的一层：因为 pointer-events: none，
   document.elementsFromPoint 的命中栈里压根不出现它，查了两轮都没看见——
   最后是靠量屏幕中心那个像素 (11,15,19) 正好等于 --bg #0b0f13 才定位到。
   往后再遇到「画布有像素但屏幕是纯色」，先量像素配色号，别只看命中栈。 */
.qx-root { background: transparent !important; }
.qx-top, .qx-panes, .qx-toast { pointer-events: auto; }

.qx-body { background: transparent !important; }
.qx-col--list, .qx-col--log {
  background: #0d1116e8;
  backdrop-filter: blur(6px);
  border-color: #2a3139;
}
.qx-col--city { background: #0d1116f2; backdrop-filter: blur(6px); }
/* 没选城时中栏隐退，露出地图。
   `visibility: hidden` 不够——那一栏仍然占着位置吃掉点击，于是点地图毫无反应。
   要连同 pointer-events 一起关掉，画布才收得到 pointerup。 */
.qx-body[data-empty="1"] .qx-col--city { visibility: hidden; pointer-events: none; }
/* qx-body 本身是个铺满的网格容器，它自己也会挡路。两侧栏各自重新开启点击即可。 */
.qx-body { pointer-events: none; }
.qx-col--list, .qx-col--log, .qx-body[data-empty="0"] .qx-col--city { pointer-events: auto; }
.qx-top, .qx-panes { background: #0b0e12e8 !important; backdrop-filter: blur(6px); }

/* ---------------------------------------------------------------- 战场指挥
   顶栏一行战况，底下三栏：我军名册 / 命令 / 敌军名册。
   名册点一下就是下令，所以整块必须吃点击；中间留空，露出战场本身。 */
.qx-bhud {
  position: absolute; inset: auto 0 0 0; top: 0;
  display: grid; grid-template-rows: auto 1fr auto;
  pointer-events: none;
}
.qx-bhud__bar {
  grid-row: 1;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 14px; background: #0b0e12e8; backdrop-filter: blur(6px);
  border-bottom: 1px solid #2a3139; font-size: 13px; pointer-events: auto;
}
.qx-bhud__bar b { color: var(--qx-gold); }
.qx-bhud__sep { width: 1px; height: 14px; background: #39414b; }
.qx-bhud__grow { flex: 1 1 auto; }
.qx-bhud__hold { color: #e8c05a; font-weight: 700; }
.qx-bhud__meter { display: inline-block; width: 92px; height: 7px; border-radius: 4px; background: #2a2018; overflow: hidden; }
.qx-bhud__meter i { display: block; height: 100%; background: linear-gradient(90deg, #d9a441, #8f6f18); }

.qx-bhud__cmd {
  grid-row: 3;
  display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr) minmax(200px, 250px);
  gap: 1px; align-items: end; padding: 0 0 0 0;
}
.qx-bhud__roster {
  background: #0d1116e8; backdrop-filter: blur(6px); border-top: 1px solid #2a3139;
  max-height: 34vh; overflow-y: auto; pointer-events: auto;
}
.qx-bhud__roster h4 {
  margin: 0; padding: 7px 12px; font-size: 11px; letter-spacing: .08em;
  color: var(--qx-gold); border-bottom: 1px solid #222a32; position: sticky; top: 0; background: #0d1116;
}
.qx-bhud__roster ul { list-style: none; margin: 0; padding: 0; }
.qx-bhud__roster li {
  display: grid; grid-template-columns: 1fr auto auto; gap: 2px 8px; align-items: center;
  padding: 6px 12px; border-bottom: 1px solid #1b222a; cursor: pointer; font-size: 12px;
}
.qx-bhud__roster li:hover { background: #18202a; }
.qx-bhud__roster li.is-on { background: #23303d; box-shadow: inset 3px 0 0 var(--qx-gold); }
.qx-bhud__roster li.is-rout { opacity: .55; }
.qx-bhud__nm { font-weight: 700; }
.qx-bhud__ty { font-size: 11px; opacity: .6; }
.qx-bhud__n { font-variant-numeric: tabular-nums; font-weight: 700; }
.qx-bhud__od { grid-column: 1 / -1; font-size: 11px; opacity: .6; }
.qx-bar { grid-column: 1 / -1; display: block; height: 4px; border-radius: 3px; background: #242c34; overflow: hidden; }
.qx-bar i { display: block; height: 100%; background: #5b8f57; }
.qx-bar--morale i { background: linear-gradient(90deg, #8d4a3a, #c9a44a, #6f9a5a); }

.qx-bhud__acts {
  align-self: end; text-align: center; padding: 0 12px 12px;
  display: grid; gap: 8px; justify-items: center; pointer-events: none;
}
.qx-bhud__acts p { margin: 0; font-size: 12px; opacity: .8; background: #0b0e12cc; padding: 5px 12px; border-radius: 999px; }
.qx-bhud__acts > div { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; pointer-events: auto; }

@media (max-width: 860px) {
  .qx-bhud__cmd { grid-template-columns: 1fr; }
  .qx-bhud__roster--foe { display: none; }
}

/* 战法按钮。放不出来的留在原位但变灰，鼠标悬停说明理由——
   把按钮藏起来的话，玩家永远不知道这支部队还有这一招。 */
.qx-bhud__skills { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; align-items: center; pointer-events: auto; }
.qx-bhud__hint { font-size: 11px; opacity: .6; padding: 0 4px; }
.qx-skill { display: inline-flex; align-items: baseline; gap: 5px; }
.qx-skill i { font-style: normal; font-size: 10px; opacity: .6; }
.qx-skill.is-off { opacity: .38; cursor: not-allowed; }
.qx-skill:not(.is-off):hover { border-color: var(--qx-gold); }

/* 单挑不是一条普通命令，是一次赌博——赢了对面阵脚自乱，输了自家大将可能就没了。
   所以单独给个颜色，别混在「攻城门／原地待命」里被误点。 */
.qx-duel { border-color: #7a3b2c; color: #e8b48c; }
.qx-duel:not(.is-off):hover { border-color: #c96a44; background: #2a1a14; }
.qx-duel.is-off { opacity: .35; cursor: not-allowed; }

/* 标题页的「继续前局」。没有存档时整块不画——不要给一个点了没反应的按钮。 */
.qx-title__continue {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
  padding: 10px 16px; border: 1px solid #3a3320; border-radius: 12px; background: #16130c99;
}
.qx-title__continue span { font-size: 12px; opacity: .72; }
.qx-title__warn { margin: 8px 0 0; font-size: 12px; color: #d98a6a; }