/* 半途而截 · 弹道样式
 *
 * 和 `bolt.js` 配套，牌桌（`table.css` 那一套）与动效实验室共用。
 *
 * 坐标是舞台坐标：容器是舞台（`#stage`）里的一个绝对定位层（牌桌用 `#anim-layer`，
 * 动效实验室用 `#fx-layer`），跟着整体缩放，所以手机上缩小时弹道也一起缩，不会错位。
 *
 * 素材是黑底抠出来的（`tools/bolts-build.py` 削黑电平、亮度当 alpha），
 * 这里用普通混合即可，不会再带一块黑方块。
 */

/* 所有弹道元素的公共定位：靠 transform 摆放，left/top 恒为 0。
 *
 * `transform-origin: 0 0` 是关键。默认以元素中心为原点时，
 * `translate(x,y) rotate(a) translate(-50%,-50%)` 这一串里，
 * 旋转会绕着「元素中心」转，而 -50% 的位移又是在旋转之后应用的局部坐标里算的，
 * 两者叠起来，弹丸会偏离连线——纺锤看起来就贴着引导线的一侧飘。
 * 原点归到左上角之后：先把中心挪到原点 → 旋转（中心还在原点）→ 平移到目标点，
 * 中心就严格落在连线上。 */
.proj {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  pointer-events: none;
  /*
   * 这里**不能**写 `will-change: transform, opacity`。
   *
   * 元素是「append 进来、同一帧就开始 animate」的，被提前提成合成层之后，
   * 部分手机浏览器（iOS Safari、几个国产内核）第一帧拿不到重绘——
   * 动画数值在跑，屏幕上根本没有这个东西，表现就是「手机上完全看不到弹丸」。
   *
   * 动效实验室的冻结截图早就踩过同一个坑：那边靠 `body.frozen` 把它关掉
   * 才拍得到弹丸（见 `anim-lab.html` 里的覆盖）。
   */
}

/* 神迹：一道瞬发的光束，不是弹丸。横向拉伸到两点距离，左端为锚点向外「射」。 */
.proj-beam {
  transform-origin: 0 50%;
}

/* 精神：制导线。先浮出来，纺锤弹丸沿着它飞，两个尖端都咬在这条线上。 */
.proj-guide {
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  border-radius: 2px;
  transform-origin: 0 50%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    to right,
    rgba(110, 220, 140, 0.05) 0%,
    rgba(122, 232, 152, 0.85) 10%,
    rgba(158, 248, 182, 0.95) 50%,
    rgba(122, 232, 152, 0.85) 90%,
    rgba(110, 220, 140, 0.08) 100%
  );
  box-shadow: 0 0 10px rgba(96, 220, 130, 0.65);
}

/* 命中不再单独做光效：扣血本身有生命珠抖动 + 飘字 + 暗角，已经很清楚了，
 * 再叠一圈光反而在落点上糊成一团。 */