/* Tactics Core — 界面样式 */

:root {
  --bg: #0d0f14;
  --panel: rgba(20, 23, 30, 0.90);
  --panel-solid: #161923;
  --line: rgba(255, 255, 255, 0.10);
  --text: #dfe4ee;
  --dim: #8b93a4;
  --player: #4ea8ff;
  --ai: #ff5a4e;
  --good: #5ad06a;
  --bad: #e0574a;
  --warn: #e89a2f;
  --heal: #3fbf6f;
  --gold: #ffd76a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--text);
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* 首屏资源加载提示：在 three.js 和业务脚本下载期间立即显示 */
.boot-loading {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: radial-gradient(circle at 50% 42%, #192238 0, var(--bg) 48%);
  color: var(--text); text-align: center;
}
.boot-loading strong { font-size: 24px; letter-spacing: .08em; }
.boot-loading span { color: var(--dim); font-size: 13px; }
.boot-spinner {
  width: 38px; height: 38px; margin-bottom: 5px;
  border: 3px solid rgba(255,255,255,.13); border-top-color: var(--player); border-radius: 50%;
  animation: boot-spin .8s linear infinite;
}
@keyframes boot-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boot-spinner { animation-duration: 1.8s; } }

.hidden { display: none !important; }
.grow { flex: 1; }
.dim { color: var(--dim); }

button {
  font-family: inherit; font-size: 13px; color: var(--text);
  background: #232838; border: 1px solid var(--line);
  padding: 7px 14px; border-radius: 6px; cursor: pointer;
  transition: background .13s, border-color .13s, transform .08s;
}
button:hover:not(:disabled) { background: #2e3448; border-color: rgba(255,255,255,.22); }
/*
 * 注意：这条会把按钮的 transform 整个替换掉。
 * 所以任何按钮都不要用 transform 来做定位（居中、偏移等），
 * 否则一按下去就会跳位，光标脱离元素后 click 不触发。
 * 需要居中请用 left/right:0 + margin:auto + fit-content。
 */
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .38; cursor: not-allowed; }
button.primary { background: #2f6fd0; border-color: #4a8ae8; }
button.primary:hover:not(:disabled) { background: #3a7fe0; }
button.danger { background: #a8322a; border-color: #d05046; }
button.danger:hover { background: #bd3a31; }

/* ---------------- HUD 布局 ---------------- */

#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }

.net-badge {
  position: absolute; top: 10px; right: 12px;
  font-size: 11px; padding: 3px 9px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel);
}
.net-badge.on { color: var(--good); border-color: rgba(90,208,106,.35); }
.net-badge.off { color: var(--dim); }

.panel-left {
  position: absolute; left: 12px; top: 46px; width: 176px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 9px; padding: 10px 10px 8px;
  backdrop-filter: blur(6px);
}
.panel-left h4 { margin: 0 0 8px; font-size: 12px; color: var(--dim); font-weight: 600; letter-spacing: .06em; }

/* 面板开关 */
.panel-toggles { position: absolute; left: 12px; top: 10px; display: flex; gap: 4px; }
.panel-toggles .tg {
  padding: 4px 10px; font-size: 11.5px; border-radius: 13px;
  background: rgba(20,23,30,.9); color: var(--dim);
}
.panel-toggles .tg.active { color: var(--text); background: #2a3042; border-color: rgba(255,255,255,.24); }

.timeline { display: flex; flex-direction: column; gap: 3px; }
.tl-item {
  display: grid; grid-template-columns: 16px 1fr 34px;
  align-items: center; gap: 6px;
  padding: 4px 6px; border-radius: 5px; font-size: 12px;
  background: rgba(255,255,255,.035);
  border-left: 3px solid transparent;
}
.tl-item.player { border-left-color: var(--player); }
.tl-item.ai { border-left-color: var(--ai); }
.tl-item.current { background: rgba(255,215,106,.16); box-shadow: 0 0 0 1px rgba(255,215,106,.3); }
.tl-idx { color: var(--dim); font-size: 10px; text-align: center; }
.tl-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-hp { display: block; height: 4px; background: rgba(0,0,0,.45); border-radius: 2px; overflow: hidden; }
.tl-hp i { display: block; height: 100%; background: var(--good); }
.tl-item.ai .tl-hp i { background: #d8705a; }

.legend { margin-top: 8px; font-size: 11px; color: var(--dim); display: flex; align-items: center; gap: 4px; }
.lg { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-left: 6px; }
.lg.player { background: var(--player); }
.lg.ai { background: var(--ai); }

/* 单位属性面板 */
.panel-right {
  position: absolute; right: 12px; top: 42px; width: 258px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 9px; padding: 12px; backdrop-filter: blur(6px);
  max-height: calc(100vh - 240px); overflow-y: auto;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.panel-head b { font-size: 15px; }
.panel-head.player b { color: var(--player); }
.panel-head.ai b { color: var(--ai); }
.panel-side { font-size: 11px; color: var(--dim); margin-left: auto; }
.panel-close {
  padding: 2px 7px; font-size: 12px; line-height: 1.2; border-radius: 5px;
  background: transparent; border-color: transparent; color: var(--dim);
}
.panel-close:hover { background: #33384a; color: var(--text); }
.panel-desc { font-size: 12px; color: var(--dim); line-height: 1.55; margin-bottom: 9px; }
.panel-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; margin-bottom: 9px; }
.stat-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 4px; font-size: 12px; align-items: center; }
.stat-key { color: var(--gold); font-weight: 700; font-size: 11px; }
.stat-name { color: var(--dim); font-size: 11px; }
.stat-val { font-variant-numeric: tabular-nums; }
.panel-skill { border-top: 1px solid var(--line); padding-top: 8px; font-size: 12px; }
.panel-skill b { font-size: 11px; color: var(--dim); }
.panel-skill p { margin: 4px 0 0; line-height: 1.55; }
.panel-counter { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; font-size: 12px; }
.panel-counter p { margin: 2px 0; }
.panel-counter .good { color: var(--good); }
.panel-counter .bad { color: var(--bad); }

/* 伤害预览 */
.preview {
  position: absolute; right: 12px; bottom: 108px; width: 258px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 9px; padding: 9px 10px; backdrop-filter: blur(6px);
}
.pv-title { font-size: 11px; color: var(--dim); margin-bottom: 5px; }
.pv-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; padding: 2px 0; }
.pv-row b { font-variant-numeric: tabular-nums; color: var(--bad); }
.pv-row.heal b { color: var(--heal); }
.pv-row.friendly { color: var(--warn); }
.pv-row.friendly b { color: var(--warn); }
.pv-row i { font-style: normal; font-size: 10px; margin-left: 5px; padding: 1px 4px; border-radius: 3px; }
.pv-row i.good { background: rgba(90,208,106,.20); color: var(--good); }
.pv-row i.bad { background: rgba(224,87,74,.20); color: var(--bad); }
.pv-row i.kill { background: rgba(224,87,74,.30); color: #ff9c90; }
.pv-row i.maybe { background: rgba(232,154,47,.20); color: var(--warn); }

/* 提示 */
.hint {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  background: var(--panel); border: 1px solid var(--line);
  padding: 6px 16px; border-radius: 16px; font-size: 12.5px;
  backdrop-filter: blur(6px); white-space: nowrap;
}
.banner {
  position: absolute; top: 34%; left: 50%; transform: translateX(-50%);
  font-size: 34px; font-weight: 800; letter-spacing: .12em;
  text-shadow: 0 3px 20px rgba(0,0,0,.8);
}
.banner.win { color: var(--gold); }
.banner.lose { color: var(--bad); }

/* 单位旁的行动按钮 */
.action-bar {
  position: absolute; transform: translate(-50%, -100%);
  display: flex; gap: 4px; padding: 5px;
  background: rgba(16,19,26,.94); border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px; box-shadow: 0 6px 22px rgba(0,0,0,.55);
}
.action-bar button { padding: 6px 11px; font-size: 12.5px; }
.action-bar button.active { background: #2f6fd0; border-color: #63a0ff; }

/*
 * 选择目标时代替操作栏的取消按钮。
 * 固定在界面下方而不是浮在人物头顶：浮动版会压住棋盘、挡住要点的格子，
 * 位置还随单位漂移不好找。放这里既不遮挡棋盘，也不会被 3D 场景或侧边面板盖住。
 *
 * 居中**不能**用 transform: translateX(-50%)：
 * 全局的 button:active 会把 transform 整个替换成 translateY(1px)，
 * 按下的瞬间按钮就丢掉居中偏移、向右弹半个身位；
 * 若按在靠左的位置，按钮会从光标下溜走，mouseup 落到别处，click 根本不触发。
 * 改用 left/right:0 + margin:auto + fit-content 居中，与 transform 完全无关。
 */
.cancel-btn {
  position: fixed; left: 0; right: 0; bottom: 20px;
  margin-left: auto; margin-right: auto;
  width: -moz-fit-content; width: fit-content;
  z-index: 30;
  padding: 10px 22px; border-radius: 22px;
  font-size: 13.5px; letter-spacing: .04em;
  background: rgba(24,27,36,.96); border: 1px solid rgba(255,255,255,.30);
  box-shadow: 0 6px 24px rgba(0,0,0,.65);
}
.cancel-btn:hover { background: #a8322a; border-color: #d05046; }

/* 日志 */
.log-box {
  position: absolute; left: 12px; bottom: 12px; width: 340px; max-height: 132px;
  overflow-y: auto; background: var(--panel); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 10px; font-size: 11.5px; line-height: 1.65;
  backdrop-filter: blur(6px);
}
.log-line { color: var(--dim); }
.log-line.sys { color: var(--gold); }
.log-line.good { color: var(--good); }
.log-line.bad { color: var(--bad); }
.log-line.warn { color: var(--warn); }
.log-line.heal { color: var(--heal); }
.log-line.win { color: var(--gold); font-weight: 700; }
.log-line.lose { color: var(--bad); font-weight: 700; }

/* 伤害飘字 */
.fx-layer { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.fx-label {
  position: absolute; transform: translate(-50%, -50%);
  font-weight: 800; font-size: 18px; white-space: nowrap;
  text-shadow: 0 2px 6px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,1);
  color: #ff8878;
}
.fx-label.fx-crit { font-size: 26px; color: var(--gold); }
.fx-label.fx-super { font-size: 22px; color: #ffb14a; }
.fx-label.fx-weak { font-size: 15px; color: #b9c0cf; }
.fx-label.fx-heal { color: #6ff0a0; }

/* ---------------- 弹层 ---------------- */

.overlay {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(6, 8, 12, .80);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(3px); padding: 20px;
}

/* 开局配置 */
.setup-card {
  width: min(940px, 96vw); max-height: 92vh; display: flex; flex-direction: column;
  background: var(--panel-solid); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.7);
}
.setup-head { padding: 16px 20px 12px; border-bottom: 1px solid var(--line); }
.setup-head h2 { margin: 0; font-size: 22px; letter-spacing: .05em; }
.setup-head p { margin: 4px 0 0; font-size: 12px; color: var(--dim); }
.game-guide-link {
  display: inline-block; margin-top: 8px; color: #8dc4ff;
  font-size: 12.5px; text-decoration: none;
}
.game-guide-link:hover { color: #b9dcff; text-decoration: underline; }
.game-guide-link:focus-visible { outline: 2px solid var(--player); outline-offset: 3px; border-radius: 2px; }
.setup-tabs { display: flex; gap: 4px; padding: 10px 16px 0; border-bottom: 1px solid var(--line); }
.setup-tabs .tab { background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 7px 12px; color: var(--dim); }
.setup-tabs .tab.active { color: var(--text); border-bottom-color: var(--player); }
.setup-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.setup-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-top: 1px solid var(--line); background: rgba(0,0,0,.20);
}
.cfg-status { font-size: 12px; color: var(--good); }

section { margin-bottom: 22px; }
section h3 { margin: 0 0 4px; font-size: 14px; color: var(--gold); }
section h4.sub { margin: 14px 0 6px; font-size: 12px; color: var(--dim); }
.note { margin: 2px 0 10px; font-size: 11.5px; color: var(--dim); line-height: 1.6; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 8px 14px; }
.fld { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.fld > span { color: var(--dim); }
.fld input[type=number], .fld input[type=text], .fld select {
  width: 92px; background: #10131b; color: var(--text);
  border: 1px solid var(--line); border-radius: 5px; padding: 5px 7px;
  font-family: inherit; font-size: 12.5px;
}
.fld input[type=text] { width: 120px; }
.fld select { width: 108px; }
.fld.chk { justify-content: flex-start; }
.fld.chk input { width: auto; }

.skill-block {
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px;
  background: rgba(255,255,255,.022);
}
.skill-block h4 { margin: 0 0 7px; font-size: 12.5px; color: var(--text); }
.skill-block .fld { margin-bottom: 4px; }

.cfg-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cfg-table th {
  text-align: center; color: var(--gold); font-size: 11px;
  padding: 5px 4px; border-bottom: 1px solid var(--line);
}
.cfg-table th:first-child { text-align: left; }
.cfg-table td { padding: 2px 3px; }
.cfg-table td.uname { color: var(--dim); white-space: nowrap; padding-right: 8px; }
.cfg-table tr.player td.uname { color: #8dc4ff; }
.cfg-table tr.ai td.uname { color: #ff9b91; }
.cfg-table input {
  width: 100%; min-width: 52px; background: #10131b; color: var(--text);
  border: 1px solid var(--line); border-radius: 4px; padding: 4px 5px;
  font-family: inherit; font-size: 12px; text-align: center;
}

/* 结算 */
.result-card {
  width: min(720px, 96vw); max-height: 92vh; overflow-y: auto;
  background: var(--panel-solid); border: 1px solid var(--line);
  border-radius: 12px; padding: 24px; box-shadow: 0 20px 60px rgba(0,0,0,.7);
}
.result-card h2 { margin: 0; font-size: 32px; letter-spacing: .1em; text-align: center; }
.result-card h2.win { color: var(--gold); }
.result-card h2.lose { color: var(--bad); }
.result-sub { margin: 4px 0 2px; text-align: center; color: var(--dim); font-size: 13px; }
.result-meta { text-align: center; color: var(--dim); font-size: 11.5px; margin-bottom: 16px; }
.result-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.result-table th {
  color: var(--dim); font-weight: 600; font-size: 11px;
  padding: 6px 6px; border-bottom: 1px solid var(--line); text-align: right;
}
.result-table th:first-child { text-align: left; }
.result-table td { padding: 4px 6px; text-align: right; border-bottom: 1px solid rgba(255,255,255,.045); }
.result-table td:first-child { text-align: left; }
.result-table tr.player td:first-child { color: #8dc4ff; }
.result-table tr.ai td:first-child { color: #ff9b91; }
.result-table tr.dead { opacity: .48; }
.result-actions { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }

/* 反馈 */
.fb-card {
  width: min(540px, 96vw); background: var(--panel-solid);
  border: 1px solid var(--line); border-radius: 12px; padding: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
}
.fb-card h3 { margin: 0 0 4px; font-size: 18px; }
.fb-sub { margin: 0 0 16px; font-size: 12px; color: var(--dim); }
.fb-rate { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 12.5px; }
.stars { display: flex; gap: 2px; }
.star { background: none; border: none; font-size: 22px; color: #3a4055; padding: 0 2px; }
.star:hover, .star.on { color: var(--gold); background: none; }
.fb-field { display: block; margin-bottom: 12px; font-size: 12.5px; }
.fb-field > span { display: block; color: var(--dim); margin-bottom: 5px; }
.fb-field textarea {
  width: 100%; background: #10131b; color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 8px;
  font-family: inherit; font-size: 13px; line-height: 1.6; resize: vertical;
}
.fb-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; }

/* 确认框 */
.confirm-card {
  width: min(420px, 92vw); background: var(--panel-solid);
  border: 1px solid var(--line); border-radius: 10px; padding: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
}
.confirm-card p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.65; }
.confirm-card b { color: var(--warn); }
.confirm-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2c3244; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3a4258; }

@media (max-width: 1100px) {
  .panel-right, .preview { width: 210px; }
  .log-box { width: 260px; }
}

/* ---------------- 移动端 ---------------- */
/*
 * 窄屏上三个面板会把棋盘遮掉大半，所以默认全部收起（由 hud.js 控制），
 * 展开时改成半透明浮层并限制高度，随时可以再收起。
 */
@media (max-width: 860px), (pointer: coarse) {
  body { font-size: 15px; }

  .panel-toggles { top: 8px; left: 8px; gap: 6px; }
  .panel-toggles .tg { padding: 7px 13px; font-size: 13px; }
  .net-badge { top: 8px; right: 8px; font-size: 11px; }

  /* 面板下移到提示条下方，窄屏上二者宽度会撞在一起 */
  .panel-left {
    top: 88px; left: 8px; width: 148px;
    max-height: 38vh; overflow-y: auto; opacity: .95;
  }
  .panel-right {
    top: 88px; right: 8px; width: min(70vw, 268px);
    max-height: 46vh; opacity: .97;
  }
  .preview {
    right: 8px; left: auto; bottom: 8px; width: min(66vw, 260px);
    opacity: .96;
  }
  .log-box {
    left: 8px; bottom: 8px; width: min(56vw, 240px); max-height: 84px;
    font-size: 11px; opacity: .95;
  }

  .hint {
    top: 44px; font-size: 12px; padding: 5px 12px;
    max-width: 92vw; white-space: normal; text-align: center;
  }
  .banner { font-size: 26px; }

  /* 触屏加大点击热区 */
  .action-bar { padding: 6px; gap: 6px; }
  .action-bar button { padding: 10px 14px; font-size: 14px; }
  .cancel-btn { bottom: 14px; padding: 13px 26px; font-size: 15px; }

  /* 选择目标时把底部让给取消按钮，日志此刻不重要 */
  #hud.selecting .log-box { display: none; }
  #hud.selecting .preview { bottom: 74px; }

  .setup-card { max-height: 94vh; }
  .setup-body { padding: 12px 12px; }
  .setup-tabs { padding: 8px 8px 0; overflow-x: auto; }
  .setup-tabs .tab { padding: 8px 10px; font-size: 13px; white-space: nowrap; }
  .setup-foot { flex-wrap: wrap; padding: 10px 12px; }
  .setup-foot button { flex: 1 1 auto; min-width: 96px; }
  .grid { grid-template-columns: 1fr; }
  .cfg-table { font-size: 11.5px; }
  .cfg-table input { min-width: 40px; padding: 6px 2px; }
  .result-card { padding: 16px; }
  .result-card h2 { font-size: 26px; }
  .result-table { font-size: 11.5px; }
  .result-actions { flex-wrap: wrap; }
}

/* 极窄屏（竖持手机）：日志默认不占地方 */
@media (max-width: 520px) {
  .panel-left { width: 132px; max-height: 34vh; }
  .log-box { width: min(64vw, 210px); max-height: 66px; }
  .preview { width: min(72vw, 240px); }
  .panel-right { width: min(76vw, 250px); }
}