docs: add tooltip hover design for UI abbreviations

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

docs/plans/2026-03-09-tooltip-hover-design.md

@@ -0,0 +1,56 @@
+# Hover Tooltips for Abbreviations
+
+## Problem
+The game UI has many single-letter tab abbreviations and 3-letter stat abbreviations that aren't self-explanatory to new players.
+
+## Solution
+Add custom pixel-art styled tooltips on hover that spell out the full name.
+
+## Tooltip Component
+A reusable custom tooltip div matching the EarthBound pixel-art style:
+- Font: 'Press Start 2P', ~10-12px
+- Colors: `#e0d0b0` text on `#1a1a2e` background
+- Border: 2-3px solid matching `EB.borderOuter`
+- Small padding, no wrapping, white-space: nowrap
+- Appears on `mouseenter`, removed on `mouseleave`
+- Positioned absolutely relative to the hovered element
+- No delay (instant feedback)
+
+## Tooltip Placements
+
+| Element | Position | Rationale |
+|---------|----------|-----------|
+| Left panel tabs (S/E/I/R) | Right of tab | Away from screen edge |
+| Right panel tabs (S/R/H/I) | Left of tab | Doesn't obscure panel content |
+| Stat labels (STR/DEX/etc.) | Above the stat | Doesn't obscure stats below |
+
+## Tooltip Mappings
+
+### Left Panel Tabs
+- S → Superlatives
+- E → Event Log
+- I → Inventions
+- R → Resources
+
+### Right Panel Tabs (NPC Info)
+- S → Status
+- R → Relationships
+- H → History
+- I → Inventory
+
+### Stats
+- STR → Strength
+- DEX → Dexterity
+- CON → Constitution
+- INT → Intelligence
+- PER → Perception
+- SOC → Sociability
+- COU → Courage
+- CUR → Curiosity
+- EMP → Empathy
+- TMP → Temperament
+
+## Implementation Approach
+- Create a shared tooltip utility that both panels can use
+- Each panel attaches mouseenter/mouseleave listeners to relevant elements
+- Tooltip div is created on hover, positioned absolutely, removed on leave