CSS and JS improvements to improve maintainability, accessibility, performance, and structure across the site #642

Summary

Create a tracked set of CSS and JS improvements to improve maintainability, accessibility, performance, and structure across the site.

Checklist

CSS

• Reduce heavy use of !important in /home/runner/work/NextCommunity.github.io/NextCommunity.github.io/src/assets/css/style.css
• Replace #dev-tools button[onclick*="..."] selectors with semantic classes or data-* attributes
• Move inline styles out of templates and into reusable CSS classes
• Consolidate repeated button, pill, and badge styles into shared component classes
• Replace broad transition: all rules with property-specific transitions
• Add prefers-reduced-motion support for shimmer, shake, pulse, and glitch effects
• Improve :focus-visible states for buttons, overlays, and custom controls
• Make fixed-position overlays and panels more responsive on small screens
• Introduce clearer layering between Tailwind output and custom CSS overrides

JavaScript

• Split /home/runner/work/NextCommunity.github.io/NextCommunity.github.io/src/assets/js/script.js into smaller focused modules
• Replace inline onclick handlers with event listeners or delegated events #648
• Reduce use of globals such as window.PROFILE_NAME, window.PROFILE_SKILLS, and window.Phaser
• Create a shared localStorage helper for safe parse, get, and set operations
• Prefer class toggles over repeated direct element.style.* mutations
• Throttle or use requestAnimationFrame for drag, resize, and hover-heavy handlers
• Bundle game scripts together instead of loading many separate JS files
• Add stronger cleanup for intervals, timers, and temporary event listeners
• Extract shared mini-game overlay and title-bar setup into game-manager.js

Goal

• Improve maintainability
• Reduce CSS/JS duplication
• Improve accessibility
• Improve runtime performance
• Make future refactors easier