:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0;
  background: #0f172a;
  color: #e2e8f0;
  font-family: system-ui, "Microsoft YaHei", sans-serif;
}
header {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 18px;
  background: #1e293b; border-bottom: 1px solid #334155;
}
h1 { font-size: 18px; margin: 0; }
h1 span { font-size: 12px; color: #94a3b8; margin-left: 6px; font-weight: normal; }
.controls { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
select {
  background: #334155; color: #e2e8f0;
  border: 1px solid #475569; border-radius: 6px;
  padding: 5px 8px; cursor: pointer; font-size: 13px;
  max-width: 260px;
}
button {
  background: #334155; color: #e2e8f0;
  border: 1px solid #475569; border-radius: 6px;
  padding: 5px 12px; cursor: pointer; font-size: 13px;
}
button:hover { background: #475569; }
button.active { background: #2563eb; border-color: #3b82f6; }
#status { margin-left: 10px; font-size: 13px; color: #94a3b8; min-width: 240px; }
main { padding: 12px; display: flex; justify-content: center; }
canvas {
  width: 100%; max-width: 1320px; height: auto;
  background: #0b1220;
  border: 1px solid #334155; border-radius: 8px;
}

/* ---------- 伤害榜（v0.43；现为 canvas 直绘，无 DOM 行）：左蓝右红两列，
点击某行高亮对应军团（命中换算在 main.js 的 dmgHit 行区间表） ---------- */
main { gap: 10px; align-items: stretch; }
.dmgboard {
  width: 170px; max-width: 170px; flex: 0 0 170px;
  align-self: flex-start;              /* 不随 main 拉伸，避免位图变形 */
  cursor: pointer;
}

/* ---------- v1.0 抽卡部署：手牌条（canvas 下方，部署阶段显示） ---------- */
#stage { display: flex; flex-direction: column; gap: 10px; flex: 1; }
#handbar {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px;
  background: #0b1220;
  border: 1px solid #334155; border-radius: 8px;
}
#handbar[hidden] { display: none; }   /* ID 选择器会盖过 UA 的 [hidden] 规则，需显式还原 */
.hb-info {
  display: flex; gap: 18px; font-size: 13px; color: #94a3b8;
  align-items: center; flex-wrap: wrap;
}
.hb-info b { color: #fbbf24; font-size: 15px; }
#hb-top { color: #5eead4; }
#hb-hand { display: flex; gap: 8px; flex-wrap: wrap; min-height: 86px; }
.card {
  width: 92px; padding: 5px 6px;
  background: #1e293b; border: 1px solid #475569; border-radius: 8px;
  cursor: grab; user-select: none; touch-action: none;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.card:hover { border-color: #60a5fa; background: #24324a; }
.card.dragging { opacity: .35; }
.card canvas { width: 40px; height: 40px; }
.card .c-name { font-size: 12px; color: #e2e8f0; white-space: nowrap; }
.card .c-meta { font-size: 11px; color: #94a3b8; }
.card .c-meta b { color: #fbbf24; }
.card.elite {
  border: 2px solid #f5c451;              /* 内层金边（亮金、加粗） */
  outline: 2px solid #b8860b;             /* 外层金边（暗金） */
  outline-offset: 2px;                    /* 与内层留缝——两层分明 */
  box-shadow: 0 0 10px rgba(245,196,81,.4);
}
.card.elite:hover { border-color: #ffd76a; background: #24324a; }
.card.elite canvas {                      /* 图标内层框同款双层金边 */
  border: 2px solid #f5c451;
  outline: 2px solid #b8860b;
  outline-offset: 2px;
  border-radius: 6px;
}
.card.building { border-color: #64748b; }
.hb-btns { display: flex; gap: 8px; }
#btn-fight { background: #166534; border-color: #22c55e; }
#btn-fight:hover { background: #15803d; }
/* 部署阶段压缩画布：手牌条必须与画布同屏（拖拽源/目标都要可见） */
#stage.deploy canvas {
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 250px);
}