/* ============================================
   Swarm 光标搭建层样式（流畅版）
   ============================================ */

#swarm-layer {
  position: fixed; inset: 0; z-index: 2000;
  pointer-events: none;
}

/* 彩色光标 */
.swarm-cursor {
  position: fixed; top: 0; left: 0; z-index: 2001;
  pointer-events: none;
  will-change: transform;
}
.swarm-cursor svg {
  display: block;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.55));
  transition: transform .12s ease;
}
/* 点击瞬间光标轻微下压 */
.swarm-cursor.clicking svg { transform: scale(.82); }

/* 搭建画框（拖框阶段：从左上角拖出，带实时尺寸标注） */
.swarm-box {
  position: fixed; z-index: 2000;
  border: 1.5px dashed;
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  pointer-events: none;
  transform-origin: top left;
  will-change: width, height, transform;
}
.swarm-box .wh {
  position: absolute;
  left: 50%; top: -26px;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(10,14,20,.92);
  border: 1px solid rgba(255,255,255,.14);
  color: #eaf3fc;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .4px;
  white-space: nowrap;
  pointer-events: none;
}
.swarm-box.confirm {
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .18s ease, transform .18s ease;
}

/* 红色测量参考线（对齐引导） */
.swarm-guide {
  position: fixed; z-index: 2000;
  background: #ff5d73;
  pointer-events: none;
  animation: swarm-guide-fade .9s ease forwards;
}
.swarm-guide.h {
  height: 1px; width: 0;
}
.swarm-guide.v {
  width: 1px; height: 0;
}
@keyframes swarm-guide-fade {
  0% { opacity: 0; }
  25% { opacity: .95; }
  100% { opacity: 0; }
}

/* 逐字打字的 I 型光标 */
.swarm-caret {
  position: fixed; z-index: 2002;
  width: 2px; height: 1em;
  background: currentColor;
  pointer-events: none;
  animation: swarm-caret-blink .8s steps(1) infinite;
}
@keyframes swarm-caret-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* 点击瞬间光标轻微下压（由 JS 加 clicking 类） */
.swarm-cursor.clicking svg { transform: scale(.82); }

/* 点击闪光脉冲 */
.swarm-flash {
  position: fixed; z-index: 2002;
  width: 90px; height: 90px;
  margin-left: -45px; margin-top: -45px;
  border-radius: 50%;
  pointer-events: none;
  animation: swarm-flash-pop .45s ease-out forwards;
}
@keyframes swarm-flash-pop {
  0% { transform: scale(.2); opacity: 1; }
  60% { transform: scale(1.15); opacity: .75; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* 重播建造动画按钮 */
.swarm-replay-btn {
  position: fixed; right: 20px; bottom: 20px; z-index: 3000;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  background: rgba(0,144,128,.16);
  border: 1px solid rgba(60,207,187,.45);
  color: #3ccfbb;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
  letter-spacing: .3px;
}
.swarm-replay-btn:hover {
  background: rgba(0,144,128,.28);
  border-color: rgba(60,207,187,.8);
  transform: translateY(-2px);
}
.swarm-replay-btn:active { transform: translateY(0); }
.swarm-replay-btn:disabled {
  opacity: .55; cursor: not-allowed; pointer-events: none;
}
.swarm-replay-btn svg {
  display: block; width: 16px; height: 16px;
}
.swarm-replay-btn .spin { animation: swarm-replay-spin 1s linear infinite; }
@keyframes swarm-replay-spin { to { transform: rotate(360deg); } }