NATUS WHEEL: tick lines + dual conjunction tooltip — TDD

- _computeConjunctions(planets, threshold=8) detects conjunct pairs
- Tick lines (nw-planet-tick) radiate from each planet circle outward
  past the zodiac ring; animated via attrTween; styled with --pri* colours
- planetEl.raise() on mouseover puts hovered planet on top in SVG z-order
- Dual tooltip: hovering a conjunct planet shows #id_natus_tooltip_2 beside
  the primary, populated with the hidden partner's sign/degree/retrograde data
- #id_natus_tooltip_2 added to home.html, sky.html, room.html
- _natus.scss: tick line rules + both tooltip IDs share all selectors;
  #id_natus_confirm gets position:relative/z-index:1 to fix click intercept
- NatusWheelSpec.js: T7 (tick extends past zodiac), T8 (raise to front),
  T9j (conjunction dual tooltip) in new conjunction describe block
- FT T3 trimmed to element-ring hover only; planet/conjunction hover
  delegated to Jasmine (ActionChains planet-circle hover unreliable in Firefox)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/apps/gameboard/static/apps/gameboard/natus-wheel.js

@@ -134,6 +134,23 @@ const NatusWheel = (() => {
     tooltip.style.top  = Math.max(margin, top)  + 'px';
   }
 
+  function _computeConjunctions(planets, threshold) {
+    threshold = threshold === undefined ? 8 : threshold;
+    const entries = Object.entries(planets);
+    const result = {};
+    entries.forEach(([a, pa]) => {
+      entries.forEach(([b, pb]) => {
+        if (a === b) return;
+        const diff = Math.abs(pa.degree - pb.degree);
+        if (Math.min(diff, 360 - diff) <= threshold) {
+          if (!result[a]) result[a] = [];
+          result[a].push(b);
+        }
+      });
+    });
+    return result;
+  }
+
   function _layout(svgEl) {
     const rect = svgEl.getBoundingClientRect();
     const size = Math.min(rect.width || 400, rect.height || 400);
@@ -300,6 +317,9 @@ const NatusWheel = (() => {
     const planetGroup = g.append('g').attr('class', 'nw-planets');
     const ascAngle = _toAngle(asc, asc);  // start position for animation
 
+    const conjuncts = _computeConjunctions(data.planets);
+    const TICK_OUTER = _r * 0.96;
+
     Object.entries(data.planets).forEach(([name, pdata], idx) => {
       const finalA = _toAngle(pdata.degree, asc);
       const el     = PLANET_ELEMENTS[name] || '';
@@ -313,6 +333,7 @@ const NatusWheel = (() => {
         .attr('data-degree', pdata.degree.toFixed(1))
         .attr('data-retrograde', pdata.retrograde ? 'true' : 'false')
         .on('mouseover', function (event) {
+          planetEl.raise();
           d3.select(this).classed('nw-planet--hover', true);
           const tooltip = document.getElementById('id_natus_tooltip');
           if (!tooltip) return;
@@ -325,15 +346,53 @@ const NatusWheel = (() => {
             `<div class="tt-title tt-title--${el}">${name} (${sym})</div>` +
             `<div class="tt-description">@${inDeg}° ${pdata.sign} (${icon})${rx}</div>`;
           _positionTooltip(tooltip, event);
+
+          const tt2 = document.getElementById('id_natus_tooltip_2');
+          if (tt2) {
+            const partners = conjuncts[name];
+            if (partners && partners.length) {
+              const pname = partners[0];
+              const pp    = data.planets[pname];
+              const pel   = PLANET_ELEMENTS[pname] || '';
+              const psym  = PLANET_SYMBOLS[pname] || pname[0];
+              const psd   = SIGNS.find(s => s.name === pp.sign) || {};
+              const picon = _signIconSvg(pp.sign) || psd.symbol || '';
+              const prx   = pp.retrograde ? ' ℞' : '';
+              const pDeg  = _inSignDeg(pp.degree).toFixed(1);
+              tt2.innerHTML =
+                `<div class="tt-title tt-title--${pel}">${pname} (${psym})</div>` +
+                `<div class="tt-description">@${pDeg}° ${pp.sign} (${picon})${prx}</div>`;
+              tt2.style.display = 'block';
+              const gap  = 8;
+              const tt1W = tooltip.offsetWidth;
+              const tt2W = tt2.offsetWidth;
+              let left2  = parseFloat(tooltip.style.left) + tt1W + gap;
+              if (left2 + tt2W + gap > window.innerWidth)
+                left2 = parseFloat(tooltip.style.left) - tt2W - gap;
+              tt2.style.left = Math.max(gap, left2) + 'px';
+              tt2.style.top  = tooltip.style.top;
+            } else {
+              tt2.style.display = 'none';
+            }
+          }
         })
         .on('mouseout', function (event) {
-          // Ignore mouseout when moving between children of this group
           if (planetEl.node().contains(event.relatedTarget)) return;
           d3.select(this).classed('nw-planet--hover', false);
           const tooltip = document.getElementById('id_natus_tooltip');
           if (tooltip) tooltip.style.display = 'none';
+          const tt2 = document.getElementById('id_natus_tooltip_2');
+          if (tt2) tt2.style.display = 'none';
         });
 
+      // Tick line — from planet circle outward past the zodiac ring; part of hover group
+      const tick = planetEl.append('line')
+        .attr('class', el ? `nw-planet-tick nw-planet-tick--${el}` : 'nw-planet-tick')
+        .attr('x1', _cx + R.planetR * Math.cos(ascAngle))
+        .attr('y1', _cy + R.planetR * Math.sin(ascAngle))
+        .attr('x2', _cx + TICK_OUTER * Math.cos(ascAngle))
+        .attr('y2', _cy + TICK_OUTER * Math.sin(ascAngle));
+
       // Circle behind symbol
       const circleBase = pdata.retrograde ? 'nw-planet-circle--rx' : 'nw-planet-circle';
       const circle = planetEl.append('circle')
@@ -389,6 +448,12 @@ const NatusWheel = (() => {
           .attrTween('x', () => t => _cx + (R.planetR + _r * 0.055) * Math.cos(interpAngle(t)))
           .attrTween('y', () => t => _cy + (R.planetR + _r * 0.055) * Math.sin(interpAngle(t)));
       }
+
+      tick.transition(transition())
+        .attrTween('x1', () => t => _cx + R.planetR  * Math.cos(interpAngle(t)))
+        .attrTween('y1', () => t => _cy + R.planetR  * Math.sin(interpAngle(t)))
+        .attrTween('x2', () => t => _cx + TICK_OUTER * Math.cos(interpAngle(t)))
+        .attrTween('y2', () => t => _cy + TICK_OUTER * Math.sin(interpAngle(t)));
     });
   }