/* ===== Main web strand ===== */
    .web-line {
      position: fixed;
      height: 1.5px;
      pointer-events: none;
      z-index: 99990;
      transform-origin: left center;
      background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(220, 230, 250, 0.75) 50%,
        rgba(180, 200, 240, 0.2) 100%
      );
      box-shadow:
        0 0 3px rgba(255, 255, 255, 0.7),
        0 0 8px rgba(200, 215, 255, 0.35);
      border-radius: 1px;
      opacity: 0;
    }

    /* thin secondary strands for thickness */
    .web-line.thin {
      height: 1px;
      opacity: 0.55;
      box-shadow: 0 0 2px rgba(220, 230, 255, 0.4);
    }

    /* ===== Impact web (small radial web at target) ===== */
    .web-burst {
      position: fixed;
      width: 56px;
      height: 56px;
      margin: -28px 0 0 -28px;
      pointer-events: none;
      z-index: 99995;
      opacity: 0;
    }

    .web-burst svg {
      width: 100%;
      height: 100%;
      filter: drop-shadow(0 0 4px rgba(220, 230, 255, 0.5));
    }

    /* ===== Small particles ===== */
    .web-dot {
      position: fixed;
      width: 2.5px;
      height: 2.5px;
      border-radius: 50%;
      background: #eef3ff;
      box-shadow: 0 0 4px 1px rgba(200, 220, 255, 0.7);
      pointer-events: none;
      z-index: 99992;
    }

    /* ===== Origin glow ===== */
    .web-origin {
      position: fixed;
      width: 10px;
      height: 10px;
      margin: -5px 0 0 -5px;
      border-radius: 50%;
      background: radial-gradient(circle, #fff 0%, rgba(200,220,255,0.4) 50%, transparent 70%);
      pointer-events: none;
      z-index: 99996;
    }