/* ==========================================================================
   网格塔防（tower.html）
   --------------------------------------------------------------------------
   设计语言同项目档案页：骨白底、等宽小标签、细描边、硬朗直角、克制留白。
   一律不用发光/霓虹/模糊阴影——深度靠偏移的实色投影表达。
   色彩职责见 tokens.css 顶部说明。
   ========================================================================== */

body.tower-page {
  margin: 0;
  min-height: 100vh;
  background: var(--tk-bone);
  color: var(--tk-ink);
  font-family: var(--tk-sans);
  -webkit-font-smoothing: antialiased;
}

body.tower-page .site-header { z-index: 40; }
.tower-page a { color: inherit; text-decoration: none; }
.tower-page button { font: inherit; color: inherit; }

.td-stage {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--tk-edge) var(--tk-gap-5);
  box-sizing: border-box;
}

.td-back {
  font-family: var(--tk-mono);
  font-size: var(--tk-label);
  letter-spacing: var(--tk-track-label);
  color: var(--tk-muted);
  transition: color var(--tk-dur-fast) var(--tk-ease-soft);
}

.td-back:hover { color: var(--tk-ink); }

/* 地图 3 是 20 列：舞台放宽，否则 1320 的上限会把格子压到 25px 以下 */
body.is-wide-map .td-stage { max-width: 1600px; }

/* 宽地图下右侧商店栏收窄：只留塔名和价格，描述藏起来，把宽度让给棋盘 */
body.is-wide-map .td-layout { grid-template-columns: minmax(0, 1fr) 210px; }
body.is-wide-map .td-shop-desc { display: none; }
body.is-wide-map .td-arena { grid-template-columns: 132px minmax(0, 1fr) 132px; }

/* ----------------------------------------------------------------- 地图选择 */

/* 地图选择沿用档案页的编号样式。 */
.td-maps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--tk-gap-2);
  margin-bottom: var(--tk-gap-3);
}

.td-map {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--tk-gap-3);
  padding: var(--tk-gap-2) var(--tk-gap-3);
  background: var(--tk-file);
  border: var(--tk-border) solid var(--tk-line);
  border-radius: var(--tk-radius);
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--tk-dur-fast) var(--tk-ease-soft),
    transform var(--tk-dur-fast) var(--tk-ease);
}

.td-map:hover { border-color: rgba(20, 22, 26, 0.34); transform: translateY(-1px); }

.td-map::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: var(--tk-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--tk-dur) var(--tk-ease);
}

.td-map.is-active { border-color: var(--tk-accent); }
.td-map.is-active::before { transform: scaleY(1); }

.td-map-no {
  font-family: var(--tk-mono);
  font-size: var(--tk-micro);
  letter-spacing: 0.1em;
  color: var(--tk-faint);
}

.td-map.is-active .td-map-no { color: var(--tk-accent); }

.td-map-body { display: grid; gap: 2px; min-width: 0; }

.td-map-name {
  font-size: var(--tk-body);
  font-weight: 700;
}

.td-map-name i {
  margin-left: 6px;
  font-style: normal;
  font-family: var(--tk-mono);
  font-size: var(--tk-micro);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--tk-faint);
}

.td-map-desc {
  font-size: 11.5px;
  color: var(--tk-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 手机竖屏时提示横屏（只在窄屏竖屏出现） */
.td-rotate { display: none; }

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

.td-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--tk-gap-4);
  align-items: start;
}

/* ----------------------------------------------------------------- HUD */

.td-hud {
  display: flex;
  align-items: center;
  gap: var(--tk-gap-4);
  padding: var(--tk-gap-3) var(--tk-gap-4);
  background: var(--tk-file);
  border: var(--tk-border) solid var(--tk-line);
  border-radius: var(--tk-radius);
}

.td-hud-item { display: flex; flex-direction: column; gap: 2px; }
.td-hud-spacer { flex: 1; }
.td-hud-actions { display: flex; gap: var(--tk-gap-2); flex-wrap: wrap; }

.td-hud-label {
  font-family: var(--tk-mono);
  font-size: var(--tk-micro);
  letter-spacing: var(--tk-track-label);
  color: var(--tk-faint);
}

.td-hud-value {
  font-family: var(--tk-mono);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.td-hud-value small {
  font-size: 12px;
  font-weight: 400;
  color: var(--tk-faint);
}

/* 生命告急：唯一会亮暗红的地方之一 */
#tdLivesBox.is-alert .td-hud-value { color: var(--tk-alert); }
#tdLivesBox.is-alert .td-hud-label { color: var(--tk-alert); }

/* ----------------------------------------------------------------- 按钮 */

.td-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tk-gap-2);
  height: 34px;
  padding: 0 var(--tk-gap-3);
  background: none;
  border: var(--tk-border) solid var(--tk-line);
  border-radius: var(--tk-radius);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    border-color var(--tk-dur-fast) var(--tk-ease-soft),
    background var(--tk-dur-fast) var(--tk-ease-soft),
    color var(--tk-dur-fast) var(--tk-ease-soft);
}

/* display: inline-flex 会盖掉浏览器默认的 [hidden] { display: none }，
   所以必须显式写回来，否则 JS 里设 hidden 的按钮照样显示 */
.td-btn[hidden] { display: none; }

.td-btn:hover { border-color: rgba(20, 22, 26, 0.38); }

.td-btn.primary {
  background: var(--tk-ink);
  border-color: var(--tk-ink);
  color: var(--tk-bone);
}

.td-btn.primary:hover { background: #22262c; }

.td-btn.primary:disabled {
  background: var(--tk-line);
  border-color: transparent;
  color: var(--tk-faint);
  cursor: not-allowed;
}

.td-btn.ghost { color: var(--tk-muted); }
.td-btn.ghost:hover { color: var(--tk-ink); }

.td-speed {
  font-family: var(--tk-mono);
  min-width: 46px;
  font-variant-numeric: tabular-nums;
}

.td-speed.is-on {
  border-color: var(--tk-accent);
  color: var(--tk-accent);
}

/* ----------------------------------------------------------------- 战场 */

.td-canvas-box {
  margin-top: var(--tk-gap-3);
  background: var(--tk-file);
  border: var(--tk-border) solid var(--tk-line);
  border-radius: var(--tk-radius);
  overflow: hidden;
  line-height: 0;
}

#tdCanvas {
  display: block;
  touch-action: none;
  cursor: crosshair;
}

.td-hint {
  margin: var(--tk-gap-2) 0 0;
  font-family: var(--tk-mono);
  font-size: var(--tk-micro);
  letter-spacing: 0.06em;
  color: var(--tk-faint);
}

/* ----------------------------------------------------------------- 侧栏卡 */

.td-side {
  display: grid;
  gap: var(--tk-gap-3);
  position: sticky;
  top: var(--tk-gap-4);
}

.td-card {
  padding: var(--tk-gap-3) var(--tk-gap-3) var(--tk-gap-4);
  background: var(--tk-file);
  border: var(--tk-border) solid var(--tk-line);
  border-radius: var(--tk-radius);
}

.td-card-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 var(--tk-gap-3);
  font-size: var(--tk-body);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.td-card-note {
  font-family: var(--tk-mono);
  font-size: var(--tk-micro);
  letter-spacing: var(--tk-track-label);
  color: var(--tk-faint);
  font-weight: 400;
}

/* ----------------------------------------------------------------- 商店 */

.td-shop { display: grid; gap: var(--tk-gap-2); }

.td-shop-item {
  position: relative;
  display: grid;
  gap: 3px;
  padding: var(--tk-gap-2) var(--tk-gap-3) var(--tk-gap-3);
  background: none;
  border: var(--tk-border) solid var(--tk-line);
  border-radius: var(--tk-radius);
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--tk-dur-fast) var(--tk-ease-soft),
    background var(--tk-dur-fast) var(--tk-ease-soft),
    transform var(--tk-dur-fast) var(--tk-ease);
}

.td-shop-item:hover {
  border-color: rgba(20, 22, 26, 0.34);
  transform: translateX(3px);
}

/* 选中态：左侧褐色竖条 + 淡底，和游戏终端卡片同一手势 */
.td-shop-item.is-active {
  border-color: var(--tk-accent);
  background: var(--tk-accent-soft);
}

.td-shop-item.is-active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: var(--tk-accent);
}

/* 买不起：整体压暗，但不禁用（玩家仍可看属性） */
.td-shop-item.is-poor { opacity: 0.45; }

.td-shop-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tk-gap-2);
}

.td-shop-name { font-size: var(--tk-body); font-weight: 700; }

/* 数字快捷键的小方块，提示"按 3 就是它" */
.td-shop-name kbd {
  display: inline-block;
  min-width: 15px;
  margin-right: 6px;
  padding: 0 3px;
  font-family: var(--tk-mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 15px;
  text-align: center;
  color: var(--tk-faint);
  border: var(--tk-border) solid var(--tk-line);
  border-radius: 2px;
}

.td-shop-cost {
  font-family: var(--tk-mono);
  font-size: var(--tk-body);
  color: var(--tk-gold);
  font-variant-numeric: tabular-nums;
}

.td-shop-en {
  font-family: var(--tk-mono);
  font-size: var(--tk-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tk-faint);
}

.td-shop-desc {
  font-size: 12px;
  line-height: 1.65;
  color: var(--tk-muted);
}

/* --------------------------------------------------- 战场与两侧属性栏 */

/* 地图左右紧邻的空白正好放"当前 / 升级后"对比。
   升级与拆除的按钮不在这里——它们画在画布上塔的正上方，手不离战场。 */
.td-arena {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr) 148px;
  gap: var(--tk-gap-3);
  align-items: start;
  margin-top: var(--tk-gap-3);
}

.td-stats {
  min-height: 1px;
  padding-top: var(--tk-gap-2);
  opacity: 0;
  transition: opacity var(--tk-dur) var(--tk-ease-soft);
}

.td-stats.is-on { opacity: 1; }

.td-stats-next { text-align: right; }

.td-stats-eyebrow {
  margin: 0 0 var(--tk-gap-2);
  font-family: var(--tk-mono);
  font-size: var(--tk-micro);
  letter-spacing: var(--tk-track-label);
  color: var(--tk-faint);
}

.td-stats-eyebrow.is-gain { color: var(--tk-gain); }

.td-stats-name {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.td-stats-maxed { color: var(--tk-gold); }

.td-stats-lv {
  margin: 2px 0 var(--tk-gap-3);
  font-family: var(--tk-mono);
  font-size: var(--tk-micro);
  letter-spacing: 0.06em;
  color: var(--tk-muted);
}

.td-stats-list {
  margin: 0;
  display: grid;
  gap: 5px;
}

.td-stats-list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tk-gap-2);
  padding-bottom: 3px;
  border-bottom: var(--tk-border) solid var(--tk-hair);
}

.td-stats-next .td-stats-list > div { flex-direction: row-reverse; }

.td-stats-list dt {
  margin: 0;
  font-size: 11.5px;
  color: var(--tk-muted);
}

.td-stats-list dd {
  margin: 0;
  font-family: var(--tk-mono);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 升级后的数值用鼠尾草绿，增量跟在后面 */
.td-stats-list .is-gain { color: var(--tk-gain); }

/* 「35 →」灰色小字在前，升级后的绿色数字在后：不会被误读成"现在已经是 91" */
.td-from {
  margin-right: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--tk-faint);
}

.td-stats-record { margin-top: var(--tk-gap-3); }
.td-stats-record dd { color: var(--tk-muted); font-weight: 500; }

.td-stats-foot {
  margin: var(--tk-gap-3) 0 0;
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--tk-faint);
}

/* ----------------------------------------------------------------- 图例 */

.td-legend-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--tk-gap-2);
}

.td-legend-list li {
  display: grid;
  grid-template-columns: 18px auto 1fr;
  align-items: center;
  gap: var(--tk-gap-2);
  font-size: 12px;
}

/* 图例的小图形用纯 CSS 画，和 canvas 里的形状语法一致 */
.td-gl {
  width: 14px;
  height: 14px;
  justify-self: center;
  border: 1.5px solid var(--tk-steel);
  box-sizing: border-box;
}

.td-gl-circle { border-radius: 50%; }
.td-gl-flash {
  border: none;
  background: var(--tk-steel);
  clip-path: polygon(0 0, 100% 50%, 0 100%, 30% 50%);
}
.td-gl-priest {
  position: relative;
  border: none;
  background: var(--tk-steel);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.td-gl-priest::after {
  content: "";
  position: absolute;
  inset: 5px 3px 2px;
  background: var(--tk-bone);
  clip-path: polygon(40% 0, 60% 0, 60% 35%, 100% 35%, 100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0 60%, 0 35%, 40% 35%);
}
.td-gl-square { border-radius: 1px; }

.td-gl-triangle {
  width: 0;
  height: 0;
  border: none;
  border-left: 8px solid var(--tk-steel);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.td-gl-ringed {
  border-radius: 50%;
  position: relative;
  border-style: dashed;
}

.td-gl-ringed::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--tk-steel-soft);
}

/* 分裂者：三个小圆抱成一团 */
.td-gl-trefoil {
  border: none;
  background:
    radial-gradient(circle at 50% 28%, var(--tk-steel) 0 3px, transparent 3.4px),
    radial-gradient(circle at 27% 70%, var(--tk-steel) 0 3px, transparent 3.4px),
    radial-gradient(circle at 73% 70%, var(--tk-steel) 0 3px, transparent 3.4px);
}

/* 分裂体：一颗小菱形 */
.td-gl-mote {
  width: 7px;
  height: 7px;
  border: none;
  background: var(--tk-steel);
  transform: rotate(45deg);
}

/* 召唤者：菱形本体 + 两颗卫星 */
.td-gl-summoner {
  position: relative;
  width: 10px;
  height: 10px;
  border: none;
  background: var(--tk-steel);
  transform: rotate(45deg);
}

.td-gl-summoner::before,
.td-gl-summoner::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--tk-ink);
}

.td-gl-summoner::before { top: -4px; left: -4px; }
.td-gl-summoner::after { bottom: -4px; right: -4px; }

.td-gl-name { font-weight: 600; }

.td-gl-en {
  font-family: var(--tk-mono);
  font-size: var(--tk-micro);
  letter-spacing: 0.06em;
  color: var(--tk-faint);
  justify-self: start;
}

.td-legend-list .td-gl-note {
  grid-column: 2 / -1;
  font-size: 11.5px;
  color: var(--tk-muted);
}

/* ----------------------------------------------------------------- 页脚 */

.td-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--tk-gap-3);
  margin: var(--tk-gap-4) 0 0;
  font-family: var(--tk-mono);
  font-size: var(--tk-micro);
  letter-spacing: var(--tk-track-label);
  color: var(--tk-faint);
}

.td-foot-rule { display: block; width: 34px; height: 2px; background: var(--tk-ink); }

/* ----------------------------------------------------------------- 结算 */

.td-result {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--tk-gap-4);
  background: rgba(233, 228, 225, 0.86);
  backdrop-filter: blur(3px);
  animation: tdFade var(--tk-dur) var(--tk-ease-soft);
}

.td-result[hidden] { display: none; }

.td-result-card {
  width: min(460px, 100%);
  max-height: calc(100svh - 32px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: var(--tk-gap-5) var(--tk-gap-5) var(--tk-gap-4);
  background: var(--tk-file);
  border: var(--tk-border) solid var(--tk-line);
  border-radius: var(--tk-radius);
  box-shadow: 0 30px 60px -40px rgba(20, 22, 26, 0.5);
  animation: tdRise var(--tk-dur) var(--tk-ease);
}

.td-result-eyebrow {
  margin: 0 0 var(--tk-gap-2);
  font-family: var(--tk-mono);
  font-size: var(--tk-micro);
  letter-spacing: var(--tk-track-label);
  color: var(--tk-faint);
}

.td-result-title {
  margin: 0 0 var(--tk-gap-2);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.01em;
  /* 胜利用暗金：强化与胜利是同一个语义色 */
  color: var(--tk-gold);
}

.td-result.is-lost .td-result-title { color: var(--tk-alert); }

.td-result-sub {
  margin: 0 0 var(--tk-gap-4);
  font-size: var(--tk-body);
  line-height: 1.7;
  color: var(--tk-muted);
}

.td-result-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: var(--tk-gap-3);
  padding: var(--tk-gap-3) 0;
  border-top: var(--tk-border) solid var(--tk-line);
  border-bottom: var(--tk-border) solid var(--tk-line);
  margin-bottom: var(--tk-gap-4);
}

.td-result-stats > div { display: flex; flex-direction: column; gap: 3px; }

.td-result-k {
  font-size: 11px;
  color: var(--tk-faint);
}

.td-result-v {
  font-family: var(--tk-mono);
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.td-result-actions { display: flex; gap: var(--tk-gap-2); }
.td-result-actions .td-btn { flex: 1; }

/* 结算卡里的保存表单：和扫雷同一套模式，失败也能保存 */
.td-save {
  display: flex;
  gap: var(--tk-gap-2);
  margin-bottom: var(--tk-gap-2);
}

.td-save[hidden] { display: none; }

.td-save input {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 var(--tk-gap-3);
  font: inherit;
  font-size: 13px;
  color: var(--tk-ink);
  background: var(--tk-bone);
  border: var(--tk-border) solid var(--tk-line);
  border-radius: var(--tk-radius);
}

.td-save input:focus { outline: none; border-color: var(--tk-accent); }

.td-save-status {
  min-height: 1.4em;
  margin: 0 0 var(--tk-gap-3);
  font-size: 12px;
  color: var(--tk-muted);
}

.td-confirm-title { color: var(--tk-ink); }

/* ----------------------------------------------------------------- 记录榜 */

/* 记录榜属于地图列，右栏只保留商店和敌军识别，避免榜单把整页横向切开。 */
.td-board { margin-top: var(--tk-gap-3); }

.td-board-tabs { display: flex; gap: 4px; }

.td-board-tab {
  padding: 3px 9px;
  font-family: var(--tk-mono);
  font-size: var(--tk-micro);
  letter-spacing: 0.06em;
  color: var(--tk-muted);
  background: none;
  border: var(--tk-border) solid transparent;
  border-radius: var(--tk-radius);
  cursor: pointer;
}

.td-board-tab.is-active {
  color: var(--tk-ink);
  border-color: var(--tk-line);
}

.td-board-rule {
  margin: -6px 0 var(--tk-gap-3);
  font-size: 11px;
  color: var(--tk-faint);
}

.td-board-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  column-gap: var(--tk-gap-5);
}

.td-board-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: var(--tk-gap-3);
  padding: 6px 0;
  border-bottom: var(--tk-border) solid var(--tk-hair);
  font-size: 12.5px;
}

.td-board-player {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.td-board-identity {
  display: flex;
  align-items: baseline;
  flex: 0 1 auto;
  min-width: 0;
}

.td-board-rank {
  font-family: var(--tk-mono);
  font-size: var(--tk-micro);
  color: var(--tk-faint);
  text-align: right;
}

.td-board-row.is-first .td-board-rank { color: var(--tk-gold); font-weight: 600; }

.td-board-name {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.td-board-version {
  flex: none;
  margin-left: 1px;
  color: var(--tk-faint);
  font-family: var(--tk-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.td-board-detail {
  flex: none;
  margin-left: auto;
  padding: 2px 6px;
  font-family: var(--tk-mono);
  font-size: 10px;
  color: var(--tk-muted);
  background: none;
  border: var(--tk-border) solid var(--tk-line);
  border-radius: var(--tk-radius);
  cursor: pointer;
}

.td-board-replay {
  flex: none;
  margin-left: auto;
  padding: 2px 6px;
  font-family: var(--tk-mono);
  font-size: 10px;
  color: var(--tk-muted);
  background: none;
  border: var(--tk-border) solid var(--tk-line);
  border-radius: var(--tk-radius);
  cursor: pointer;
}

.td-board-replay:hover {
  color: var(--tk-ink);
  border-color: rgba(20, 22, 26, 0.38);
}

.td-board-replay.is-question {
  color: var(--tk-alert);
  border-color: rgba(156, 74, 63, 0.52);
  background: rgba(156, 74, 63, 0.05);
}

.td-board-detail:hover {
  color: var(--tk-ink);
  border-color: rgba(20, 22, 26, 0.38);
}


.td-board-legacy {
  flex: none;
  padding: 2px 6px;
  font-family: var(--tk-mono);
  font-size: 10px;
  color: var(--tk-muted);
  background: var(--tk-bone-warm);
  border: var(--tk-border) solid var(--tk-hair);
  border-radius: var(--tk-radius);
  white-space: nowrap;
}

.td-board-outcome { color: var(--tk-muted); white-space: nowrap; }
.td-board-won { color: var(--tk-gold); font-weight: 600; }

.td-board-time {
  font-family: var(--tk-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.td-board-map {
  font-family: var(--tk-mono);
  font-size: var(--tk-micro);
  color: var(--tk-faint);
}

.td-board-state {
  margin: var(--tk-gap-2) 0 0;
  font-size: 12px;
  color: var(--tk-faint);
}

.td-board-state:empty { display: none; }

/* ----------------------------------------------------------------- 最终部署详情 */

.td-deployment-card {
  width: min(960px, 100%);
  display: flex;
  flex-direction: column;
}

.td-deployment-card .td-result-title {
  margin-bottom: var(--tk-gap-2);
  color: var(--tk-ink);
}

.td-deployment-card .td-result-sub {
  margin-bottom: var(--tk-gap-3);
}

.td-deployment-card .td-btn.is-question {
  color: var(--tk-alert);
  border-color: rgba(156, 74, 63, 0.52);
  background: rgba(156, 74, 63, 0.08);
}

.td-deployment-canvas-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: min(58svh, 540px);
  min-height: 220px;
  padding: 8px;
  box-sizing: border-box;
  background: var(--tk-bone);
  border: var(--tk-border) solid var(--tk-line);
  border-radius: var(--tk-radius);
  overflow: hidden;
}

#tdDeploymentCanvas { display: block; }

.td-deployment-state {
  min-height: 1.4em;
  margin: var(--tk-gap-2) 0 0;
  font-size: 12px;
  color: var(--tk-muted);
}

@keyframes tdFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tdRise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------- 响应式 */

@media (max-width: 1240px) {
  /* 地图两侧放不下属性栏时，改成战场在上、当前 / 升级后两栏在下并排。
     宽地图（20 列）下画布宽度不再被两侧 148px 栏挤占，格子能大一圈。 */
  .td-arena,
  body.is-wide-map .td-arena { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  .td-canvas-box { grid-row: 1; grid-column: 1 / -1; }

  .td-stats {
    grid-row: 2;
    padding-top: 0;
  }

  .td-stats-now { grid-column: 1; }

  .td-stats-next {
    grid-column: 2;
    text-align: left;
  }

  .td-stats-next .td-stats-list > div { flex-direction: row; }

  .td-stats:not(.is-on) { display: none; }
}

@media (max-width: 1080px) {
  .td-layout,
  body.is-wide-map .td-layout { grid-template-columns: minmax(0, 1fr); }

  .td-side {
    position: static;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

@media (max-width: 760px) {
  .td-maps { grid-template-columns: minmax(0, 1fr); }
  .td-map-desc { white-space: normal; }
}

@media (max-width: 620px) {
  .td-stage { padding: 0 var(--tk-gap-3) var(--tk-gap-5); }

  .td-hud {
    flex-wrap: wrap;
    gap: var(--tk-gap-3);
    padding: var(--tk-gap-3);
  }

  .td-hud-spacer { display: none; }
  .td-hud-value { font-size: 17px; }
  .td-side { grid-template-columns: minmax(0, 1fr); }
  .td-arena,
  body.is-wide-map .td-arena { grid-template-columns: minmax(0, 1fr); }
  .td-stats-next { grid-column: 1; grid-row: 3; }
  .td-board-row { grid-template-columns: 22px minmax(0, 1fr) auto auto; }
  .td-board-map { display: none; }
}

/* 手机竖屏：宽地图会被压得很小，提示横屏 */
@media (orientation: portrait) and (max-width: 620px) {
  body.is-wide-map .td-rotate {
    display: block;
    margin: 0 0 var(--tk-gap-3);
    padding: var(--tk-gap-2) var(--tk-gap-3);
    font-size: 12px;
    color: var(--tk-muted);
    border: var(--tk-border) dashed var(--tk-line);
    border-radius: var(--tk-radius);
  }
}

/* ------------------------------------------------- 手机横屏：紧凑布局
   横屏的瓶颈是高度（网页可用大约 300~340px），所以：
   网站导航、大标题、提示、页脚、图例全部收起，地图占满一屏的高度；
   左边一列放 HUD + 地图切换，右边一列放商店；选中塔时右列换成升级对比。
   记录榜放在这一屏下面，往下滑就能看到。
   条件要和 ui.js 里的 COMPACT_MQ 保持一致。 */
@media (orientation: landscape) and (max-height: 560px) {
  body.tower-page .site-header,
  .term-head,
  .td-hint,
  .td-foot,
  .td-legend,
  .td-rotate,
  .td-stats-now,
  .td-stats-foot,
  .td-shop-en,
  .td-shop-desc,
  .td-map-desc,
  .td-map-name i { display: none !important; }

  .td-stage {
    max-width: none;
    padding: 0 max(8px, env(safe-area-inset-right)) var(--tk-gap-4) max(8px, env(safe-area-inset-left));
  }

  /* 一屏三列：左 HUD / 中地图 / 右商店。两侧尽量窄，把宽度让给棋盘 */
  .td-layout,
  body.is-wide-map .td-layout {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr) 128px;
    grid-template-rows: 100svh auto;
    gap: 6px;
    align-items: stretch;
  }

  .td-field { display: contents; }

  .td-hud {
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin: 8px 0;
    padding: 8px;
    overflow-y: auto;
  }

  .td-hud-item { flex-direction: row; justify-content: space-between; align-items: baseline; }
  .td-hud-value { font-size: 15px; }
  .td-hud-spacer { display: none; }
  .td-hud-actions { flex-direction: column; gap: 5px; }
  .td-hud-actions .td-btn { width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .td-btn { height: 30px; font-size: 12px; padding: 0 6px; }
  .td-hud { overflow-x: hidden; }

  /* 地图切换：在紧凑布局里改成固定在左列底部的四个小号按钮。
     它在 DOM 里不属于 .td-layout，所以用 fixed 贴过去，不然会横跨整屏顶部、把地图往下挤 */
  .td-maps {
    position: fixed;
    left: max(8px, env(safe-area-inset-left));
    bottom: 8px;
    width: 118px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    margin: 0;
    z-index: 4;
  }

  .td-map { padding: 5px 4px; justify-content: center; }
  .td-map:hover { transform: none; }
  .td-map-body { display: none; }

  /* HUD 底部给地图切换留出位置 */
  .td-hud { margin-bottom: 44px !important; }

  .td-arena {
    grid-column: 2;
    grid-row: 1;
    display: block;
    margin: 0;
    padding: 4px 0;
    box-sizing: border-box;
    height: 100svh;
  }

  .td-canvas-box {
    height: 100%;
    margin: 0;
    border: none;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .td-side {
    grid-column: 3;
    grid-row: 1;
    position: static;
    display: block;
    padding: 8px 0;
    overflow-y: auto;
    max-height: 100svh;
    box-sizing: border-box;
  }

  .td-card { padding: 8px; }
  .td-card-title { margin-bottom: 6px; font-size: 12px; }
  .td-card-note { display: none; }
  .td-shop { gap: 4px; }
  .td-shop-item { padding: 5px 7px; }
  .td-shop-item:hover { transform: none; }

  /* 选中塔时：右列的商店换成"升级后"对比（升级/拆除钮仍在塔顶）。
     属性栏在 DOM 里属于中间那列，所以用 fixed 把它贴到右列的位置上。 */
  .td-stats-next { display: none; }

  body.has-selection .td-shop-card { display: none; }

  body.has-selection .td-stats-next.is-on {
    display: block;
    position: fixed;
    top: 8px;
    right: max(8px, env(safe-area-inset-right));
    width: 128px;
    max-height: calc(100svh - 16px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 8px;
    background: var(--tk-file);
    border: var(--tk-border) solid var(--tk-line);
    border-radius: var(--tk-radius);
    text-align: left;
    opacity: 1;
    z-index: 5;
  }

  body.has-selection .td-stats-next .td-stats-list > div { flex-direction: row; }
  .td-stats-name { font-size: 13px; }
  .td-stats-lv { margin-bottom: 6px; }

  .td-board {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: var(--tk-gap-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .td-shop-item,
  .td-btn,
  .td-back { transition: none !important; }

  .td-result,
  .td-result-card { animation: none !important; }
}