fix(globe): enlarge hit targets for 18+ marker types with tiny click areas

[koala73]

Problem

Most globe marker types render at 9-11px (emoji font-size or small geometric shapes) with no expanded hit area. Clicking them on a 3D globe is frustratingly difficult, especially on touch devices. The satellite marker was recently fixed (PR #1315) with a 16px invisible hit wrapper, but 18+ other marker types still have the same problem.

Current State (audited from GlobeMap.ts createMarkerElement())

Tiny (5-10px effective hit area, hardest to click)

Marker	Rendering	Effective Size
ucdp	Circle sized by deaths: 5 + deaths * 0.3, capped at 10px	5-10px
weather	Emoji at font-size:9px	~9px
vessel	Emoji at font-size:10px	~10px
cyber	Emoji at font-size:10px	~10px
fire	Emoji at font-size:10px	~10px
climate	Emoji at font-size:10px	~10px
gpsjam	Emoji at font-size:10px	~10px
tech	Emoji at font-size:10px	~10px
irradiator	Emoji at font-size:10px	~10px
datacenter	Emoji at font-size:10px	~10px
waterway	Emoji at font-size:10px	~10px
mineral	Emoji at font-size:10px	~10px
milbase	CSS triangle border-bottom:9px	~10px

Borderline (11-12px, workable but not great)

Marker	Rendering	Effective Size
flight	Emoji at font-size:11px with rotation	~11px
natural	Emoji at font-size:11px	~11px
protest	Emoji at font-size:11px	~11px
displacement	Emoji at font-size:11px	~11px
nuclearSite	Emoji at font-size:11px	~11px
spaceport	Emoji at font-size:11px	~11px
economic	Emoji at font-size:11px	~11px
flightDelay	Emoji at font-size:11px	~11px
cableAdvisory	Emoji at font-size:11px	~11px
repairShip	Emoji at font-size:11px	~11px
aisDisruption	Emoji at font-size:11px	~11px
outage	Emoji at font-size:12px	~12px
earthquake	Circle Math.max(8, magnitude * 2.5)	8-18px (small at low mag)

Already OK (16px+)

Marker	Size
conflict	6-12px dot + pulse ring extends to ~16px
hotspot	10px diamond (borderline, but high-priority marker)
iran	9px dot + pulse ring extends to ~13px
conflictZone	20px circle
newsLocation	16px circle + pulse
satellite	16px hit wrapper (fixed in PR #1315)

Proposed Fix

Apply the same pattern used for satellites: wrap each emoji/shape marker in a transparent hit-target <div> with min-width:16px; min-height:16px centered around the visible element. This makes the clickable area uniform without changing the visual appearance.

For emoji-based markers, this could be a shared utility or CSS class rather than per-marker inline styles.

Implementation Notes

• The satellite fix in PR feat(globe): improve satellite clickability and tooltip #1315 uses a sat-hit wrapper div with width:16px;height:16px;display:flex;align-items:center;justify-content:center;margin:-8px 0 0 -8px to center the visible dot
• A CSS :hover rule on the wrapper provides visual feedback (scale-up + glow) without per-marker JS listeners
• This pattern can be generalized to all emoji markers with a shared .marker-hit class
• For geometric markers (ucdp circle, milbase triangle, earthquake circle), ensure the hit area is at least 16px even when the visual element is smaller
• hotspot (10px diamond) is a high-priority interaction target and should also get a 16px hit area

Files to Modify

• src/components/GlobeMap.ts (all branches in createMarkerElement(), lines ~730-945)

Acceptance Criteria

• All clickable markers have at least 16px hit area
• Visual appearance unchanged (only invisible wrapper grows)
• Hover feedback (scale-up or glow) on all marker types
• No performance regression with full marker dataset enabled
• npx tsc --noEmit passes