- the 60fps canvas render loop ran continuously even when scrolled out of
view (the home page is long now — wasted CPU/battery while reading below)
- IntersectionObserver pauses the rAF loop at 0% visibility and resumes it
when the tavern scrolls back in; cleaned up on unmount
- verified live: ~60 rAF/s on-screen → 0 off-screen → 60 on resume, 0 errors
- the site had focus styles only on inputs, so keyboard navigation was
invisible across every button, link, nav item, card and CTA
- add a global :focus-visible ring (cyan, gold for primary CTAs) — shows for
keyboard users only, follows each element's radius
- label the decorative tavern canvas (role=img + aria-label); its overlay
hotspots remain separately focusable/labeled
- verified live: Tab focuses a nav button with a 2px cyan ring, matches
:focus-visible, canvas announced as 'Animated tavern scene'
- the in-game cyan screen no longer shows a fake chart; it now cycles the
real CLASSES / ONLINE / SESSIONS counts (big number + label) over a dim
sparkline, with a cross-fade between metrics
- stats flow from Home into TavernGame via a ref the render loop reads, so
the canvas animation stays running while data updates
- ties the brand centerpiece to real product data — the tavern's TV shows
the live business
- verified live: screen renders the live class count legibly
- hover a character (barkeep / two patrons) -> parchment speech bubble with flavor
- clicking routes to Browse / My Booth / Mansion — adds life + feature discovery
- verified bubble renders on hover
