/* ═══════════════════════════════════════════════
   自由模式（war3 式）操作层样式

   设计口径：
   · 横屏手机为基准：命令格 46px（≈ 触摸 44pt 下限），底部条总高 128px；
   · 电脑端只多出"摇杆可关"，布局不变 —— 玩家在两种设备上看到的是同一套面板；
   · 任何浮层都不遮战场中心：资源条贴左上（在 HUD 之下），命令面板贴底，摇杆贴左下，
     动作按钮贴右下。中间那块永远是战场。
   ═══════════════════════════════════════════════ */

.rts-ui {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  font-family: inherit;
  color: #e9e4d8;
}

/* ── 顶部资源条 ── */
.rts-top {
  position: fixed;
  left: calc(12px + var(--sa-l, 0px));
  top: calc(58px + var(--sa-t, 0px));
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 220px);
  pointer-events: none;
}
.rts-res {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(10, 15, 12, .88);
  border: 1px solid rgba(255, 255, 255, .1);
  /* 不用 backdrop-filter：它压在**每帧都在变的 3D 画面**上，浏览器只能每帧
     把背景回读一遍再模糊一次。实测（DPR 1.5、1366×768）下面这条 6px 模糊
     就让手动模式掉 20% 帧率。war3 / LoL 的对局 HUD 从来不做实时模糊，
     用的是高不透明度的实色面板 —— 观感差别很小，代价差一个数量级。 */
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: .2px;
}
.rts-res b { font-weight: 600; }
.rts-res b + b::before {
  /* 三段数值之间加一道细竖线：不是装饰，是让"520 220 5/10"别再糊成一串数字 */
  content: "";
  display: inline-block;
  width: 1px; height: 11px;
  margin: 0 12px;
  vertical-align: -1px;
  background: rgba(255, 255, 255, .14);
}
.rts-res .g { color: #ffd166; }
.rts-res .w { color: #a8d08d; }
.rts-res .s { color: #9fc9e8; }
.rts-res .s.warn {
  color: #ffb36b;
  animation: rtsPopPulse 1.6s ease-in-out infinite;
}
@keyframes rtsPopPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
.rts-hint {
  font-size: 11px;
  color: #cfd6c9;
  background: rgba(10, 15, 12, .6);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  padding: 4px 10px;
  max-width: 46vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rts-hint:empty { display: none; }
.rts-hint[data-mode="bad"] { color: #ffb3a0; border-color: rgba(255, 120, 90, .45); }
.rts-hint[data-mode="ok"] { color: #a8e6b8; border-color: rgba(120, 220, 150, .35); }
.rts-hint[data-mode="build"] { color: #ffe0a3; border-color: rgba(255, 209, 102, .4); }

/* 操作说明入口（war3 的 F9 帮助） */
.rts-help-btn {
  flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; line-height: 1;
  color: #cfd6c9;
  background: rgba(10, 15, 12, .74);
  border: 1px solid rgba(255, 255, 255, .14);
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.rts-help-btn:hover, .rts-help-btn.on { color: #ffd166; border-color: rgba(255, 209, 102, .5); }
.rts-help {
  position: fixed; inset: 0;
  z-index: 62;
  display: grid; place-items: center;
  pointer-events: none;
}
.rts-help[hidden] { display: none; }
.rts-help-card {
  pointer-events: auto;
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 16px 18px 14px;
  border-radius: 14px;
  /* 底色本来就有 97% 不透明度，模糊看不出来，却要对整幅战场做一次 10px 卷积 */
  background: linear-gradient(180deg, rgba(24, 32, 28, .985), rgba(12, 17, 14, .99));
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
.rts-help-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rts-help-head b { font-size: 14px; letter-spacing: .5px; color: #f0e8d6; }
.rts-help-x {
  width: 24px; height: 24px; border-radius: 50%;
  color: #cfd6c9; font-size: 11px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
}
.rts-help-card dl {
  display: grid; grid-template-columns: auto 1fr;
  gap: 7px 12px; margin: 0;
  align-items: baseline;
}
.rts-help-card dt {
  font-family: var(--mono, monospace);
  font-size: 11px; color: #ffd166;
  background: rgba(255, 209, 102, .09);
  border: 1px solid rgba(255, 209, 102, .22);
  border-radius: 6px;
  padding: 2px 6px;
  white-space: nowrap;
}
.rts-help-card dd { margin: 0; font-size: 11.5px; color: #cfd6c9; line-height: 1.45; }
.rts-help-tip {
  margin: 12px 0 0; padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 10.5px; color: #93a08f; line-height: 1.5;
}

/* ── 底部：选中信息 + 命令面板 ── */
.rts-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 46;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px calc(12px + var(--sa-r, 0px)) calc(8px + var(--sa-b, 0px)) calc(12px + var(--sa-l, 0px));
  /* 顶部渐变从 12% 直接升到 88% 实色，替代旧的 blur(8px)：
     这是全屏宽 123px 的一条，实时模糊整个战场，是手动模式最大的单笔开销
     （实测关掉它 10 → 13.4 fps，最长帧 177 → 80ms）。 */
  background: linear-gradient(180deg, rgba(8, 12, 10, .12) 0%, rgba(8, 12, 10, .9) 30%, rgba(6, 9, 8, .97) 100%);
  border-top: 1px solid rgba(255, 255, 255, .07);
  pointer-events: auto;
}

.rts-side {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 188px;
  max-width: 236px;
  flex: 0 0 auto;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .07);
}
.rts-portrait {
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 9px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--pc, #7a8088) 30%, rgba(0, 0, 0, .5));
  border: 1px solid color-mix(in srgb, var(--pc, #7a8088) 55%, transparent);
  font-size: 20px;
}
.rts-id { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rts-id b {
  font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rts-id > span { font-size: 9.5px; color: #9aa39a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rts-bars { display: flex; flex-direction: column; gap: 3px; margin-top: 1px; }
.rts-bars em { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.rts-bars em i { display: block; height: 100%; width: 0; transition: width .16s; }
.rts-bars .hp i { background: linear-gradient(90deg, #4aa85a, #8fe08a); }
.rts-bars .mp i { background: linear-gradient(90deg, #4a6fc0, #8fb0ff); }
.rts-x {
  position: absolute; top: -7px; right: -7px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(10, 15, 12, .9);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #cfd6c9; font-size: 10px; line-height: 1;
  display: none; place-items: center;
}
.rts-side:hover .rts-x, .rts-ui[data-touch="1"] .rts-x { display: grid; }

/* 多选小人条 */
.rts-strip {
  display: flex; align-items: center; gap: 5px;
  max-width: 236px; overflow-x: auto; flex: 0 1 auto;
  padding: 2px 0;
  scrollbar-width: none;
}
.rts-strip::-webkit-scrollbar { display: none; }
.rts-chip {
  position: relative; flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  font-size: 16px; line-height: 1;
  display: grid; place-items: center;
}
.rts-chip.on { border-color: rgba(255, 209, 102, .8); box-shadow: 0 0 0 1px rgba(255, 209, 102, .35) inset; }
.rts-chip i {
  position: absolute; left: 3px; right: 3px; bottom: 3px; height: 3px; border-radius: 2px;
  background: #6fd07a; display: block;
}
/* 编队号：war3 的兵牌右上角一定印着它在哪一队，否则玩家不敢按数字 */
.rts-chip-g {
  position: absolute; top: -4px; left: -4px;
  min-width: 13px; height: 13px; padding: 0 2px;
  border-radius: 4px;
  background: #c9a227; color: #1a1408;
  font-style: normal; font-size: 9px; font-weight: 700; line-height: 13px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

/* 命令面板 3×3（war3 的指挥卡） */
.rts-card {
  margin-left: auto;
  display: grid;
  grid-template-columns: repeat(3, 50px);
  grid-auto-rows: 50px;
  gap: 6px;
  flex: 0 0 auto;
}
.rts-cell {
  position: relative;
  width: 50px; height: 50px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(60, 74, 66, .92), rgba(28, 36, 32, .95));
  border: 1px solid rgba(255, 255, 255, .12);
  color: #efe9dc;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: 2px 1px;
  overflow: hidden;
  transition: transform .08s ease, border-color .12s ease, background .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.rts-cell:active { transform: scale(.94); border-color: rgba(255, 209, 102, .7); }
.rts-cell em { font-style: normal; font-size: 18px; line-height: 1; }
.rts-cell b { font-size: 10px; font-weight: 600; line-height: 1.15; max-width: 46px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rts-cell span { font-size: 8.5px; color: #ffd166; line-height: 1; white-space: nowrap; }
.rts-cell.off { opacity: .42; }
.rts-cell.off span { color: #ff9b8a; }

/* ── 摇杆 ── */
.rts-joy {
  position: fixed;
  left: calc(18px + var(--sa-l, 0px));
  bottom: calc(140px + var(--sa-b, 0px));
  width: 118px; height: 118px;
  display: grid; place-items: center;
  pointer-events: auto;
  touch-action: none;
  z-index: 47;
}
.rts-joy[hidden] { display: none; }
.rts-joy-base {
  position: relative;
  width: 112px; height: 112px; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(30, 44, 38, .55), rgba(8, 12, 10, .72));
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 22px rgba(0, 0, 0, .45);
}
.rts-joy-base::after {
  content: "";
  position: absolute; inset: 22px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, .1);
}
.rts-joy-knob {
  position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #d8d2c2, #7d8b80 60%, #4a5850);
  border: 1px solid rgba(255, 255, 255, .3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
  will-change: transform;
}

/* ── 右下动作按钮（仅摇杆模式） ── */
.rts-acts {
  position: fixed;
  right: calc(14px + var(--sa-r, 0px));
  bottom: calc(140px + var(--sa-b, 0px));
  display: flex; flex-direction: column; gap: 7px;
  pointer-events: auto;
  z-index: 47;
}
.rts-acts[hidden] { display: none; }
.rts-act {
  min-width: 68px; height: 44px;
  border-radius: 11px;
  background: rgba(14, 20, 17, .86);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #e9e4d8; font-size: 13px; font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}
.rts-act:active { transform: scale(.95); }
.rts-act.primary { border-color: rgba(255, 209, 102, .55); color: #ffd166; }

/* 虚拟鼠标 */
.rts-cursor {
  position: fixed;
  left: 0; top: 0;
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  border: 1.6px solid rgba(255, 235, 180, .9);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 0 12px rgba(255, 209, 102, .35);
  pointer-events: none;
  z-index: 48;
}
.rts-cursor::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px;
  border-radius: 50%; background: rgba(255, 235, 180, .95);
}
.rts-cursor.cast { border-color: #b7a4ff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 0 14px rgba(150, 120, 255, .5); }

/* 摇杆开关 */
.rts-stick-toggle {
  position: fixed;
  right: calc(12px + var(--sa-r, 0px));
  top: calc(96px + var(--sa-t, 0px));
  z-index: 46;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  color: #cfd6c9;
  background: rgba(10, 15, 12, .72);
  border: 1px solid rgba(255, 255, 255, .12);
  pointer-events: auto;
}
.rts-stick-toggle.on { color: #ffd166; border-color: rgba(255, 209, 102, .45); }

/* 选择叠加层 */
.rts-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;          /* 在战场画布之上、HUD 之下 */
}

/* 自由模式下旧的观战选择栏/单位详情面板必须让位（否则和命令面板叠在一起） */
body.vs-free .sel-bar,
body.vs-free .unitpanel { display: none !important; }

/* ── 窄屏：压缩到 44px 格（不再往下压 —— 42px 已经低于 44pt 触摸下限），
      保证 3×3 仍然一屏放得下；字号只降半档，不降到看不清 ── */
@media (max-width: 860px), (max-height: 520px) {
  .rts-card { grid-template-columns: repeat(3, 44px); grid-auto-rows: 44px; gap: 4px; }
  .rts-cell { width: 44px; height: 44px; }
  .rts-cell em { font-size: 16px; }
  .rts-cell b { font-size: 9.5px; max-width: 41px; }
  .rts-cell span { font-size: 8px; }
  .rts-side { min-width: 150px; max-width: 180px; padding: 5px 7px; }
  .rts-portrait { width: 34px; height: 34px; font-size: 17px; }
  .rts-strip { max-width: 158px; }
  .rts-chip { width: 36px; height: 36px; font-size: 15px; }
  .rts-joy { width: 104px; height: 104px; bottom: calc(122px + var(--sa-b, 0px)); }
  .rts-joy-base { width: 100px; height: 100px; }
  .rts-acts { bottom: calc(122px + var(--sa-b, 0px)); }
  .rts-act { min-width: 64px; height: 42px; font-size: 12.5px; }
  .rts-top { top: calc(52px + var(--sa-t, 0px)); }
  .rts-res { font-size: 11.5px; padding: 5px 10px; }
  .rts-res b + b::before { margin: 0 9px; height: 10px; }
  .rts-hint { max-width: 40vw; font-size: 10px; }
}

/* 自由模式：摇杆开关必须离开右上角——那里是小地图（#miniFloat）的地盘，
   原来 top:96 正好浮在小地图面板里（桌面和手机都实测重叠）。
   挪到左下摇杆正上方：同一只拇指就能开关，也不会遮任何东西。 */
body.vs-free .rts-stick-toggle {
  left: calc(18px + var(--sa-l, 0px));
  right: auto;
  top: auto;
  bottom: calc(264px + var(--sa-b, 0px));   /* = 摇杆 bottom140 + 高118 + 6 */
}

/* ── 自由模式 + 窄屏：右侧一列被小地图占着，动作按钮必须换位置 ──
   实测 844×390 横屏：小地图 #miniFloat 占 x672-830 / y52-249，
   而 选中/指令/停止 竖排在 x744-830 / y146-268 —— 整个压在小地图上。
   手机横屏的高度本来就只剩中间那一条，所以把动作按钮改成
   「命令栏正上方的一条横排」（拇指区、又不挡小地图）。
   这样三块互不重叠，战场中心也不被遮。 */
@media (max-width: 860px), (max-height: 520px) {
  body.vs-free .rts-acts {
    flex-direction: row;
    right: calc(10px + var(--sa-r, 0px));
    bottom: calc(84px + var(--sa-b, 0px));
    gap: 6px;
  }
  body.vs-free .rts-act { min-width: 64px; }
  body.vs-free .rts-stick-toggle { bottom: calc(232px + var(--sa-b, 0px)); }  /* = 122 + 104 + 6 */
}

@media (prefers-reduced-motion: reduce) {
  .rts-cell { transition: none; }
}