Add item card symbols reference page

[RobGruhl]

• Create comprehensive symbols.html page documenting all item card symbology
• Include SVG icons representing each symbol type from the game
• Cover range/attack values, combat abilities, defense symbols, equipment
  icons, explosive symbols, First Born tech, and crystal requirements
• Add example cards section showing actual item cards
• Include quick reference table for common symbols
• Add navigation links from index.html and inventory.html

[claude]

PR Review: Add item card symbols reference page

Summary

This PR adds a comprehensive symbols reference page (symbols.html) documenting all item card symbology from the Core Space game, along with navigation links from the main hub and inventory pages. Overall, this is a well-executed addition that enhances the quick reference website. The code is high quality with good adherence to the project's established patterns.

---

✅ Strengths

Code Quality

• Excellent consistency: The new page follows the established design system perfectly, using existing CSS custom properties (--color-primary, --spacing-*, etc.)
• Clean HTML structure: Well-organized semantic markup with proper use of sections, headers, and ARIA-friendly elements
• Inline SVGs: Custom SVG icons are a good choice - no external dependencies, scalable, and theme-consistent
• Responsive design: The symbol grid uses repeat(auto-fill, minmax(280px, 1fr)) which will adapt well to different screen sizes
• Print-friendly: Inherits the site's print media queries appropriately

Content Organization

• Logical categorization: Symbols are grouped into clear categories (Range/Attack, Combat Abilities, Defense, Equipment, Explosives, First Born Tech, Crystals)
• Helpful visual hierarchy: Category headers with color-coded badges make scanning easy
• Quick reference table: The summary table at the end (lines 988-1013) is a nice touch for fast lookups
• Example cards section: Shows practical application of symbols (though see note below about images)
• Good documentation: Each symbol has both a name and descriptive text explaining its game effect

Integration

• Proper navigation: Added to both index.html and inventory.html with appropriate context
• Consistent breadcrumb: Includes proper navigation path
• Bidirectional linking: Links back to inventory and home

---

🔍 Areas for Consideration

1. Image References (Minor Issue)

Location: symbols.html:962-982

The example cards section references images that exist in the repository:

<img src="images/tokens/first-born/combat-rifle-custom.png" alt="Combat Rifle Custom">

Status: ✅ The images/tokens/first-born/ directory exists, so this should work fine. However, it's worth verifying these specific image files exist:

• combat-rifle-custom.png
• energy-pistol.png
• combat-vest.png
• jump-pack.png
• grenade.png
• bracer.png

Recommendation: If any images are missing, either remove those example cards or add placeholder images. The page functions well without them, so this isn't critical.

---

2. SVG Accessibility (Enhancement)

Location: Throughout symbols.html

The inline SVGs lack accessibility attributes. While the surrounding symbol-name provides context, screen readers won't announce the SVG content.

Current:

<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="..." />
</svg>

Recommended enhancement:

<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" 
     role="img" aria-labelledby="icon-short-range">
    <title id="icon-short-range">Short Range icon</title>
    <path d="..." />
</svg>

Priority: Low - The symbol cards already have text descriptions, so this is more of a best practice enhancement.

---

3. CSS Organization (Observation)

Location: symbols.html:8-189

The page includes ~180 lines of page-specific CSS in a <style> block. This follows the pattern established in the project (per CLAUDE.md, character trackers also use inline styles).

Consideration: Some of these styles (.symbol-grid, .category-header, etc.) might be reusable on future reference pages. Consider whether they should move to the shared style.css if you anticipate creating similar pages.

Recommendation: For now, this is fine. If you add more symbol-heavy pages in the future, consider extracting common patterns.

---

4. Quick Reference Table Emoji Use (Minor)

Location: symbols.html:996-1012

The quick reference table uses emoji in the "Symbol" column (✓, ⚙️, ⚡, etc.), but the actual game cards use graphical symbols shown in the SVGs above.

Consideration: This creates a slight mismatch - users looking at their physical cards won't see emoji. However, emoji work well for quick text-based reference.

Recommendation: This is acceptable as-is. The emoji serve as recognizable shortcuts. Consider adding a note like: "Emoji shown for quick reference - see detailed symbols above for card artwork."

---

5. Content Accuracy (Review Needed)

I don't have access to the Core Space rulebook to verify symbol descriptions are accurate. Please ensure:

• Symbol descriptions match official rules
• All relevant symbols from the game are included
• Game mechanics (like "Uses extra action" for Heavy Attack) are accurate

---

🛡️ Security Review

• ✅ No JavaScript (page is pure HTML/CSS)
• ✅ No external resources loaded
• ✅ No user input handling
• ✅ No data persistence concerns
• No security issues identified

---

⚡ Performance Review

• ✅ Inline SVGs are optimal (no HTTP requests)
• ✅ Single CSS file, shared across site
• ✅ No JavaScript frameworks or libraries
• ✅ Minimal page weight (~35KB HTML)
• Excellent performance characteristics

---

🧪 Test Coverage

Not applicable - This is a static HTML reference page with no dynamic functionality beyond inherited responsive CSS.

Manual testing recommended:

• Verify all navigation links work
• Test responsive layout on mobile/tablet
• Print preview to ensure print-friendly rendering
• Verify image references load correctly
• Cross-browser check (Chrome, Firefox, Safari)

---

📋 Adherence to Project Conventions

Based on docs/CLAUDE.md, this PR follows established patterns well:

✅ Hub & Spoke architecture: Properly integrated as a new spoke from the hub
✅ Shared stylesheet: Uses style.css with inline page-specific styles (matches character tracker pattern)
✅ Design system: Uses established color palette and CSS custom properties
✅ Navigation pattern: Includes header, breadcrumb, content, and footer with related links
✅ Typography: Follows responsive sizing conventions
✅ Layout patterns: Uses established grid and card patterns
✅ No external dependencies: Pure HTML/CSS
✅ Print-friendly: Inherits print media queries

---

🎯 Recommendations Summary

Critical (None)

No blocking issues identified.

High Priority

1. Verify all referenced images exist in the repository
2. Add a note in SITEMAP.md documenting the new page (if that file is being maintained)

Medium Priority

3. Add ARIA labels to SVG icons for better accessibility
4. Add brief note in quick reference table explaining emoji are shortcuts

Low Priority

5. Consider extracting reusable symbol/category styles to style.css if more similar pages planned
6. Update docs/CLAUDE.md to include symbols.html in the file structure listing

---

✨ Final Verdict

Recommendation: ✅ APPROVE with minor suggestions

This is a high-quality addition that:

• Follows project conventions excellently
• Provides genuine value to players during gameplay
• Has no critical issues
• Requires only minor enhancements (all optional)

The suggestions above are improvements, not blockers. The PR can be merged as-is and enhanced incrementally if desired.

Great work on maintaining consistency with the existing codebase and creating a comprehensive, well-organized reference page! 🎲

---

Files Changed:

• ✅ docs/symbols.html - New comprehensive symbol reference (1031 lines)
• ✅ docs/index.html - Added navigation card (+4 lines)
• ✅ docs/inventory.html - Added reference link (+5 lines)

Total: +1040 additions, 0 deletions across 3 files