feat: add fakemon and generation filters to catalog sidebar

public/styles/global.css

@@ -159,35 +159,130 @@ h1 {
   line-height: 1.6;
 }
 
-.hero-stats {
+.hero-stats-panel {
-  display: grid;
+  width: min(52rem, 100%);
-  grid-template-columns: repeat(3, minmax(6rem, 1fr));
-  gap: 0.75rem;
-  min-width: 25rem;
 }
 
-.hero-stats div {
+.hero-stats-panel summary {
+  display: none;
+}
+
+.hero-stats {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.75rem;
+  width: 100%;
+}
+
+.stat-card {
+  min-width: 0;
   padding: 1rem;
   border: 1px solid var(--border);
   border-radius: 6px;
   background: rgba(18, 27, 32, 0.82);
 }
 
-.hero-stats strong {
+.stat-card-total {
+  display: grid;
+  place-content: center;
+  text-align: center;
+}
+
+.stat-card-total strong {
   display: block;
-  font-size: 2rem;
+  font-size: 3rem;
   line-height: 1;
   font-variant-numeric: tabular-nums;
 }
 
-.hero-stats span {
+.stat-card-total span,
+.stat-heading {
   color: var(--muted);
   font-size: 0.8rem;
   text-transform: uppercase;
 }
 
+.stat-heading {
+  display: block;
+  margin-bottom: 0.75rem;
+  color: var(--text);
+  font-weight: 700;
+}
+
+.stat-card-group {
+  container-type: inline-size;
+}
+
+.stat-list {
+  display: grid;
+  gap: 0.45rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.stat-list li {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--muted);
+  font-size: clamp(0.68rem, 4.5cqw, 0.84rem);
+  line-height: 1.25;
+}
+
+.stat-icon {
+  position: relative;
+  display: inline-block;
+  width: 0.85em;
+  height: 0.85em;
+  flex: 0 0 auto;
+}
+
+.stat-icon-platform {
+  border: 1px solid rgba(33, 198, 183, 0.82);
+  border-radius: 2px;
+  box-shadow: 0.18em 0.18em 0 rgba(33, 198, 183, 0.24);
+}
+
+.stat-icon-type {
+  border: 1px solid rgba(167, 120, 255, 0.86);
+  background: rgba(167, 120, 255, 0.22);
+  transform: rotate(45deg) scale(0.82);
+}
+
+.stat-icon-status {
+  border-radius: 50%;
+  border: 1px solid rgba(98, 217, 107, 0.9);
+}
+
+.stat-icon-status::after {
+  content: "";
+  position: absolute;
+  left: 0.22em;
+  top: 0.16em;
+  width: 0.28em;
+  height: 0.46em;
+  border: solid rgba(98, 217, 107, 0.95);
+  border-width: 0 0.12em 0.12em 0;
+  transform: rotate(45deg);
+}
+
+.stat-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stat-list strong {
+  color: var(--text);
+  font-variant-numeric: tabular-nums;
+}
+
 .flagships,
-.related {
+.related,
+.browse-summary {
   margin-bottom: clamp(2rem, 5vw, 4rem);
 }
 
@@ -212,6 +307,66 @@ h1 {
   gap: 1rem;
 }
 
+.browse-summary {
+  scroll-margin-top: 5.5rem;
+}
+
+.browse-summary-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+.browse-facet {
+  min-width: 0;
+  padding: 1rem;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: rgba(18, 27, 32, 0.64);
+}
+
+.browse-facet h3 {
+  font-size: 1.2rem;
+}
+
+.browse-link-list {
+  display: grid;
+  gap: 0.45rem;
+  margin-top: 0.8rem;
+}
+
+.browse-link-list a {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  min-height: 2.15rem;
+  padding: 0.45rem 0.55rem;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 4px;
+  background: rgba(4, 8, 10, 0.38);
+  color: var(--muted);
+  font-size: 0.88rem;
+  text-decoration: none;
+}
+
+.browse-link-list a:hover {
+  border-color: rgba(33, 198, 183, 0.28);
+  color: var(--text);
+}
+
+.browse-link-list span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.browse-link-list em {
+  color: #c8d8d3;
+  font-style: normal;
+  font-variant-numeric: tabular-nums;
+}
+
 .catalog-shell {
   display: grid;
   grid-template-columns: 18rem minmax(0, 1fr);
@@ -224,6 +379,38 @@ h1 {
   top: 5.5rem;
   display: grid;
   gap: 0.9rem;
+  max-height: calc(100vh - 6.5rem);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+}
+
+.filter-rail,
+.filter-list {
+  scrollbar-color: rgba(7, 11, 13, 0.82) transparent;
+  scrollbar-width: thin;
+}
+
+.filter-rail::-webkit-scrollbar,
+.filter-list::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.filter-rail::-webkit-scrollbar-track,
+.filter-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.filter-rail::-webkit-scrollbar-thumb,
+.filter-list::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: rgba(7, 11, 13, 0.72);
+}
+
+.filter-rail::-webkit-scrollbar-thumb:hover,
+.filter-list::-webkit-scrollbar-thumb:hover {
+  background: rgba(38, 51, 55, 0.82);
 }
 
 .filter-panel {
@@ -242,6 +429,13 @@ h1 {
   font-weight: 700;
 }
 
+.filter-panel legend {
+  float: left;
+  width: 100%;
+  padding: 0;
+  margin-bottom: 0.75rem;
+}
+
 .search-label {
   display: block;
   margin-bottom: 0.55rem;
@@ -267,11 +461,12 @@ a:focus-visible {
 }
 
 .filter-list {
+  clear: both;
   display: grid;
   gap: 0.4rem;
   max-height: 18rem;
   overflow: auto;
-  margin-top: 0.75rem;
+  margin-top: 0;
 }
 
 .filter-list label {
@@ -553,18 +748,30 @@ a:focus-visible {
     grid-template-columns: 1fr;
   }
 
-  .hero-stats {
+  .hero-stats-panel {
     min-width: 0;
   }
 
+  .hero-stats {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .filter-rail {
     position: static;
     grid-template-columns: repeat(2, minmax(0, 1fr));
+    max-height: none;
+    overflow-y: visible;
+    overscroll-behavior: auto;
+    scrollbar-gutter: auto;
   }
 
   .flagship-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+
+  .browse-summary-grid {
+    grid-template-columns: 1fr;
+  }
 }
 
 @media (max-width: 640px) {
@@ -581,12 +788,76 @@ a:focus-visible {
     font-size: 3.1rem;
   }
 
-  .hero-stats,
   .filter-rail,
   .flagship-grid {
     grid-template-columns: 1fr;
   }
 
+  .hero-stats-panel summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    min-height: 2.7rem;
+    margin-bottom: 0.75rem;
+    padding: 0.7rem 0.85rem;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    background: rgba(18, 27, 32, 0.82);
+    color: var(--muted);
+    cursor: pointer;
+    font-size: 0.82rem;
+    font-weight: 700;
+    list-style: none;
+    text-transform: uppercase;
+  }
+
+  .hero-stats-panel summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .hero-stats-panel summary::after {
+    content: "+";
+    color: var(--text);
+    font-size: 1.2rem;
+    line-height: 1;
+  }
+
+  .hero-stats-panel[open] summary::after {
+    content: "-";
+  }
+
+  .hero-stats {
+    grid-auto-columns: minmax(10.5rem, 72vw);
+    grid-auto-flow: column;
+    grid-template-columns: none;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding-bottom: 0.45rem;
+    scroll-snap-type: x proximity;
+    scrollbar-color: rgba(7, 11, 13, 0.82) transparent;
+    scrollbar-width: thin;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .hero-stats::-webkit-scrollbar {
+    height: 5px;
+  }
+
+  .hero-stats::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .hero-stats::-webkit-scrollbar-thumb {
+    border-radius: 999px;
+    background: rgba(7, 11, 13, 0.72);
+  }
+
+  .stat-card {
+    min-height: 10.25rem;
+    scroll-snap-align: start;
+  }
+
   .hack-grid {
     grid-template-columns: 1fr;
   }

src/components/HackCard.astro

@@ -20,6 +20,8 @@ const summary = hack.summary || hack.notability || 'No summary has been added ye
   data-base={hack.base ?? 'Unknown'}
   data-status={hack.status ?? 'Unknown'}
   data-types={hack.types.join('|')}
+  data-fakemon={hack.fakemon ?? 'Unknown'}
+  data-generations={hack.generations.join('|')}
   data-release={hack.releaseDate ?? ''}
   data-search={hack.searchText}
   style={`--accent: var(--type-${accent.toLowerCase().replaceAll(' ', '-')}, var(--type-unknown));`}

src/components/Layout.astro

@@ -28,8 +28,7 @@ const {
       </a>
       <nav aria-label="Primary navigation">
         <a href="/">Catalog</a>
-        <a href="/browse/type/difficulty/">Difficulty</a>
+        <a href="/#browse">Browse</a>
-        <a href="/browse/platform/gba/">GBA</a>
         <a href="/queue/">Play Queue</a>
       </nav>
     </header>

src/generated/banner-manifest.json

@@ -171,6 +171,7 @@
   "mystery-dungeon-explorers-of-skies": "/assets/banners/mystery-dungeon-explorers-of-skies.jpg",
   "mystery-dungeon-wigglytuff-s-bizarre-adventure": "/assets/banners/mystery-dungeon-wigglytuff-s-bizarre-adventure.png",
   "mystery-mail-blooming-chaos": "/assets/banners/mystery-mail-blooming-chaos.png",
+  "myth-2": "/assets/banners/myth-2.png",
   "myth": "/assets/banners/myth.png",
   "mythic-silver": "/assets/banners/mythic-silver.webp",
   "nameless": "/assets/banners/nameless.png",

src/lib/catalog.test.ts

@@ -29,6 +29,8 @@ const baseCatalog: RawCatalog = {
       base: 'FireRed',
       status: 'Complete',
       version: '4.1',
+      generations: ['Gen I', 'Gen II', 'Gen III', 'Gen IV', 'Gen V', 'Gen VI', 'Gen VII', 'Gen VIII', 'Gen IX'],
+      fakemon: 'No',
       developer: 'Soupercell',
       release_date: '2024',
       banner: 'https://romhacks-files.ginnoir.com/_meta/radical/banner.jpg',
@@ -104,6 +106,31 @@ describe('catalog normalization', () => {
     expect(unknown?.searchText).not.toMatch(/\bnull\b|—/i);
   });
 
+  it('normalizes roster generations and Fakemon metadata into chips', () => {
+    const catalog = normalizeCatalog(baseCatalog);
+    const radical = catalog.hacks.find((hack) => hack.slug === 'radical-red');
+
+    expect(radical?.generations).toEqual([
+      'Gen I',
+      'Gen II',
+      'Gen III',
+      'Gen IV',
+      'Gen V',
+      'Gen VI',
+      'Gen VII',
+      'Gen VIII',
+      'Gen IX',
+    ]);
+    expect(radical?.fakemon).toBe('No');
+    expect(radical?.chips).toEqual(
+      expect.arrayContaining([
+        { label: 'Roster', value: 'Gen I, Gen II, Gen III, Gen IV, Gen V, Gen VI, Gen VII, Gen VIII, Gen IX', kind: 'generation' },
+        { label: 'Fakemon', value: 'No', kind: 'fakemon' },
+      ]),
+    );
+    expect(radical?.searchText).toContain('gen ix');
+  });
+
   it('maps ROM and library paths to internal file-server links', () => {
     const catalog = normalizeCatalog(baseCatalog);
     const radical = catalog.hacks.find((hack) => hack.slug === 'radical-red');

src/lib/catalog.ts

@@ -56,6 +56,8 @@ export function normalizeHack(raw: RawHack): SiteHack {
   const developer = cleanText(raw.developer);
   const releaseDate = cleanText(raw.release_date);
   const generation = cleanText(raw.generation);
+  const generations = cleanList(raw.generations);
+  const fakemon = cleanText(raw.fakemon);
   const scrapeDir = cleanText(raw.scrape_dir);
   const libraryPath = cleanText(raw.library_path);
   const banner = cleanText(raw.banner);
@@ -74,6 +76,8 @@ export function normalizeHack(raw: RawHack): SiteHack {
     version,
     status,
     generation,
+    generations,
+    fakemon,
     developer,
     releaseDate,
     banner,
@@ -106,10 +110,12 @@ export function normalizeHack(raw: RawHack): SiteHack {
     hack.version,
     hack.developer,
     hack.releaseDate,
+    hack.fakemon,
     hack.summary,
     hack.notability,
     hack.story,
     ...hack.types,
+    ...hack.generations,
     ...hack.features,
   ]
     .filter(Boolean)
@@ -216,6 +222,8 @@ function buildChips(hack: SiteHack): HackChip[] {
   addChip(chips, 'status', 'Status', hack.status);
   addChip(chips, 'developer', 'Dev', hack.developer);
   addChip(chips, 'release_date', 'Release', hack.releaseDate);
+  addChip(chips, 'generation', 'Roster', hack.generations.join(', '));
+  addChip(chips, 'fakemon', 'Fakemon', hack.fakemon);
   for (const type of hack.types) {
     addChip(chips, 'type', 'Type', type);
   }

src/lib/site-data.ts

@@ -67,6 +67,27 @@ export function getHacksForFacet(facet: FacetName, value: string, sort: SortKey
   return sortHacks(matches, sort);
 }
 
+export function getFakemonEntries(): [string, number][] {
+  const counts: Record<string, number> = {};
+  for (const hack of catalog.hacks) {
+    const value = hack.fakemon ?? 'Unknown';
+    counts[value] = (counts[value] ?? 0) + 1;
+  }
+  return Object.entries(counts)
+    .filter(([value]) => value !== 'Unknown')
+    .sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]));
+}
+
+export function getGenerationEntries(): [string, number][] {
+  const counts: Record<string, number> = {};
+  for (const hack of catalog.hacks) {
+    for (const gen of hack.generations) {
+      counts[gen] = (counts[gen] ?? 0) + 1;
+    }
+  }
+  return Object.entries(counts).sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]));
+}
+
 export function displayValue(value?: string): string {
   return value || 'Unknown';
 }

src/lib/types.ts

@@ -20,6 +20,8 @@ export interface RawHack {
   version?: string | null;
   status?: string | null;
   generation?: string | null;
+  generations?: string[] | null;
+  fakemon?: string | null;
   developer?: string | null;
   release_date?: string | null;
   banner?: string | null;
@@ -46,7 +48,7 @@ export interface ExternalLink {
 export interface HackChip {
   label: string;
   value: string;
-  kind: 'platform' | 'base' | 'version' | 'status' | 'developer' | 'release_date' | 'type';
+  kind: 'platform' | 'base' | 'version' | 'status' | 'developer' | 'release_date' | 'generation' | 'fakemon' | 'type';
 }
 
 export interface FileLink {
@@ -64,6 +66,8 @@ export interface SiteHack {
   version?: string;
   status?: string;
   generation?: string;
+  generations: string[];
+  fakemon?: string;
   developer?: string;
   releaseDate?: string;
   banner?: string;

src/pages/index.astro

@@ -2,12 +2,75 @@
 import HackCard from '../components/HackCard.astro';
 import FilterGroup from '../components/FilterGroup.astro';
 import Layout from '../components/Layout.astro';
-import { catalog, flagshipHacks, getFacetEntries, hacks } from '../lib/site-data';
+import { catalog, facetValueSlug, flagshipHacks, getFacetEntries, getFakemonEntries, getGenerationEntries, hacks } from '../lib/site-data';
+import type { FacetName } from '../lib/types';
 
 const platforms = getFacetEntries('platform');
 const bases = getFacetEntries('base').slice(0, 12);
 const types = getFacetEntries('type');
 const statuses = getFacetEntries('status');
+const fakemonEntries = getFakemonEntries();
+const generationEntries = getGenerationEntries();
+
+type StatItem = {
+  label: string;
+  count: number;
+};
+
+type StatGroup = {
+  label: string;
+  icon: string;
+  items: StatItem[];
+};
+
+type BrowseGroup = {
+  label: string;
+  facet: Extract<FacetName, 'platform' | 'type' | 'status'>;
+  entries: [string, number][];
+};
+
+function facetCount(facet: FacetName, value: string): number {
+  return catalog.facets[facet]?.[value] ?? 0;
+}
+
+function displayFacetValue(value: string): string {
+  return value === 'Unknown' ? 'Unclassified' : value;
+}
+
+function selectedItems(facet: FacetName, values: string[]): StatItem[] {
+  return values
+    .map((value) => ({ label: displayFacetValue(value), count: facetCount(facet, value) }))
+    .filter((item) => item.count > 0);
+}
+
+function otherItem(facet: FacetName, selectedValues: string[]): StatItem | undefined {
+  const selected = new Set([...selectedValues, 'Unknown']);
+  const count = getFacetEntries(facet)
+    .filter(([value]) => !selected.has(value))
+    .reduce((total, [, entryCount]) => total + entryCount, 0);
+  return count > 0 ? { label: 'Other', count } : undefined;
+}
+
+function summaryItems(facet: FacetName, values: string[]): StatItem[] {
+  const items = selectedItems(facet, values);
+  const other = otherItem(facet, values);
+  const unknown = facetCount(facet, 'Unknown');
+  if (other) items.push(other);
+  if (unknown > 0) items.push({ label: 'Unclassified', count: unknown });
+  return items;
+}
+
+const statGroups: StatGroup[] = [
+  { label: 'Platforms', icon: 'platform', items: summaryItems('platform', ['GBA', 'NDS', 'PC', 'GBC']) },
+  { label: 'Types', icon: 'type', items: summaryItems('type', ['Expansion', 'New Experience', 'Difficulty', 'QoL']) },
+  { label: 'Status', icon: 'status', items: summaryItems('status', ['Complete', 'Ongoing', 'Beta']) },
+];
+
+const browseGroups: BrowseGroup[] = [
+  { label: 'Platforms', facet: 'platform', entries: platforms },
+  { label: 'Types', facet: 'type', entries: types },
+  { label: 'Status', facet: 'status', entries: statuses },
+];
 ---
 
 <Layout title="ROM Hack Archive">
@@ -16,11 +79,26 @@ const statuses = getFacetEntries('status');
       <h1>ROM Hack Archive</h1>
       <p>A private catalog of {catalog.count} Pokémon ROM hacks, fan-games, patches, notes, guides, and files.</p>
     </div>
+    <details class="hero-stats-panel" open>
+      <summary>Catalog breakdown</summary>
       <div class="hero-stats" aria-label="Catalog totals">
-      <div><strong>{catalog.count}</strong><span>hacks</span></div>
+        <div class="stat-card stat-card-total"><strong>{catalog.count}</strong><span>hacks</span></div>
-      <div><strong>{catalog.facets.platform.GBA ?? 0}</strong><span>GBA</span></div>
+        {statGroups.map((group) => (
-      <div><strong>{catalog.facets.type.Expansion ?? 0}</strong><span>expansions</span></div>
+          <div class="stat-card stat-card-group">
+            <span class="stat-heading">{group.label}</span>
+            <ul class="stat-list">
+              {group.items.map((item) => (
+                <li>
+                  <span class={`stat-icon stat-icon-${group.icon}`} aria-hidden="true"></span>
+                  <span class="stat-label">{item.label}</span>
+                  <strong>{item.count}</strong>
+                </li>
+              ))}
+            </ul>
           </div>
+        ))}
+      </div>
+    </details>
   </section>
 
   <section class="flagships" aria-labelledby="flagships-heading">
@@ -33,6 +111,28 @@ const statuses = getFacetEntries('status');
     </div>
   </section>
 
+  <section id="browse" class="browse-summary" aria-label="Browse by catalog facets">
+    <div class="section-heading">
+      <h2>Browse the archive</h2>
+      <p>Jump into grouped catalog views without privileging a single platform or play style.</p>
+    </div>
+    <div class="browse-summary-grid">
+      {browseGroups.map((group) => (
+        <section class="browse-facet" aria-labelledby={`browse-${group.facet}`}>
+          <h3 id={`browse-${group.facet}`}>{group.label}</h3>
+          <div class="browse-link-list">
+            {group.entries.map(([value, count]) => (
+              <a href={`/browse/${group.facet}/${facetValueSlug(value)}/`}>
+                <span>{displayFacetValue(value)}</span>{' '}
+                <em>{count}</em>
+              </a>
+            ))}
+          </div>
+        </section>
+      ))}
+    </div>
+  </section>
+
   <section class="catalog-shell" aria-label="Hack catalog">
     <aside class="filter-rail">
       <div class="filter-panel">
@@ -51,6 +151,8 @@ const statuses = getFacetEntries('status');
       <FilterGroup title="Base" name="base" entries={bases} />
       <FilterGroup title="Type" name="type" entries={types} />
       <FilterGroup title="Status" name="status" entries={statuses} />
+      <FilterGroup title="Fakemon" name="fakemon" entries={fakemonEntries} />
+      <FilterGroup title="Generation" name="generation" entries={generationEntries} />
     </aside>
 
     <div class="catalog-results">
@@ -86,12 +188,17 @@ const statuses = getFacetEntries('status');
       const base = selected('base');
       const type = selected('type');
       const status = selected('status');
+      const fakemon = selected('fakemon');
+      const generation = selected('generation');
       const cardTypes = card.dataset.types ? card.dataset.types.split('|') : [];
+      const cardGens = card.dataset.generations ? card.dataset.generations.split('|') : [];
       if (query && !card.dataset.search.includes(query)) return false;
       if (platform.length && !platform.includes(card.dataset.platform)) return false;
       if (base.length && !base.includes(card.dataset.base)) return false;
       if (status.length && !status.includes(card.dataset.status)) return false;
       if (type.length && !type.some((value) => cardTypes.includes(value))) return false;
+      if (fakemon.length && !fakemon.includes(card.dataset.fakemon)) return false;
+      if (generation.length && !generation.some((value) => cardGens.includes(value))) return false;
       return true;
     }
 

tests/catalog.spec.ts

@@ -1,12 +1,95 @@
 import { expect, test } from '@playwright/test';
 
+test('homepage presents balanced navigation and facet summaries', async ({ page }) => {
+  await page.goto('/');
+
+  const primaryNav = page.getByRole('navigation', { name: 'Primary navigation' });
+  await expect(primaryNav.getByRole('link', { name: 'Catalog' })).toHaveAttribute('href', '/');
+  await expect(primaryNav.getByRole('link', { name: 'Browse' })).toHaveAttribute('href', '/#browse');
+  await expect(primaryNav.getByRole('link', { name: 'Play Queue' })).toHaveAttribute('href', '/queue/');
+  await expect(primaryNav.getByRole('link', { name: 'GBA' })).toHaveCount(0);
+  await expect(primaryNav.getByRole('link', { name: 'Difficulty' })).toHaveCount(0);
+
+  const heroStats = page.locator('.hero-stats');
+  await expect(heroStats).toContainText('396');
+  await expect(heroStats).toContainText('hacks');
+  await expect(heroStats).toContainText('Platforms');
+  await expect(heroStats).toContainText('GBA 197');
+  await expect(heroStats).toContainText('NDS 47');
+  await expect(heroStats).toContainText('PC 66');
+  await expect(heroStats).toContainText('GBC 36');
+  await expect(heroStats).toContainText('Types');
+  await expect(heroStats).toContainText('Expansion 144');
+  await expect(heroStats).toContainText('New Experience 156');
+  await expect(heroStats).toContainText('Difficulty 108');
+  await expect(heroStats).toContainText('QoL 54');
+  await expect(heroStats).toContainText('Status');
+  await expect(heroStats).toContainText('Complete 196');
+  await expect(heroStats).toContainText('Ongoing 34');
+  await expect(heroStats).toContainText('Beta 12');
+  await expect(heroStats).toContainText('Unclassified 153');
+});
+
+test('homepage stat cards are polished and responsive', async ({ page }) => {
+  await page.goto('/');
+
+  const totalCard = page.locator('.stat-card-total');
+  await expect(totalCard).toHaveCSS('text-align', 'center');
+  await expect(totalCard.locator('strong')).toHaveCSS('font-size', /^(4[0-9]|5[0-9])px$/);
+
+  const firstStatItem = page.locator('.stat-list li').first();
+  await expect(firstStatItem.locator('.stat-icon')).toBeVisible();
+  await expect(firstStatItem.locator('.stat-label')).toHaveCSS('white-space', 'nowrap');
+
+  await page.setViewportSize({ width: 390, height: 844 });
+  await page.goto('/');
+
+  const statsPanel = page.locator('.hero-stats-panel');
+  await expect(statsPanel.locator('summary')).toBeVisible();
+  await expect(statsPanel).toHaveAttribute('open', '');
+
+  const mobileMetrics = await page.locator('.hero-stats').evaluate((element) => {
+    const styles = window.getComputedStyle(element);
+    const cards = Array.from(element.querySelectorAll('.stat-card')).map((card) => card.getBoundingClientRect());
+    return {
+      columns: styles.gridAutoFlow,
+      overflowX: styles.overflowX,
+      firstTop: cards[0]?.top,
+      allSameRow: cards.every((card) => Math.abs(card.top - cards[0].top) < 2),
+      scrollWidth: element.scrollWidth,
+      clientWidth: element.clientWidth,
+    };
+  });
+
+  expect(mobileMetrics.columns).toBe('column');
+  expect(mobileMetrics.overflowX).toBe('auto');
+  expect(mobileMetrics.allSameRow).toBe(true);
+  expect(mobileMetrics.scrollWidth).toBeGreaterThan(mobileMetrics.clientWidth);
+});
+
+test('homepage browse summary links to grouped facet pages', async ({ page }) => {
+  await page.goto('/');
+
+  const browse = page.getByRole('region', { name: 'Browse by catalog facets' });
+  await expect(browse.getByRole('heading', { name: 'Browse the archive' })).toBeVisible();
+  await expect(browse.getByRole('link', { name: /GBA\s+197/ })).toHaveAttribute('href', '/browse/platform/gba/');
+  await expect(browse.getByRole('link', { name: /Difficulty\s+108/ })).toHaveAttribute(
+    'href',
+    '/browse/type/difficulty/',
+  );
+  await expect(browse.getByRole('link', { name: /Complete\s+196/ })).toHaveAttribute(
+    'href',
+    '/browse/status/complete/',
+  );
+});
+
 test('catalog search and filters update visible card count', async ({ page }) => {
   await page.goto('/');
 
   await expect(page).toHaveTitle(/ROM Hack Archive/);
   await expect(page.getByRole('heading', { name: 'ROM Hack Archive' })).toBeVisible();
   const catalogCards = page.locator('[data-card-grid] [data-card]:visible');
-  await expect(catalogCards).toHaveCount(368);
+  await expect(catalogCards).toHaveCount(396);
 
   await page.getByPlaceholder('Search hacks').fill('Radical Red');
   await expect(catalogCards).toHaveCount(4);
@@ -14,22 +97,96 @@ test('catalog search and filters update visible card count', async ({ page }) =>
 
   await page.getByPlaceholder('Search hacks').fill('');
   await page.getByLabel('GBA').check();
-  await expect(catalogCards).toHaveCount(188);
+  await expect(catalogCards).toHaveCount(197);
 
   await page.getByLabel('Difficulty').check();
   await expect(catalogCards.first()).toBeVisible();
   await expect(page.locator('[data-result-count]')).toContainText('shown');
 });
 
+test('desktop filter rail scrolls independently from the catalog page', async ({ page }) => {
+  await page.setViewportSize({ width: 1280, height: 720 });
+  await page.goto('/');
+
+  const rail = page.locator('.filter-rail');
+  await expect(rail).toBeVisible();
+
+  const metrics = await rail.evaluate((element) => {
+    const styles = window.getComputedStyle(element);
+    const firstList = element.querySelector('.filter-list');
+    const listStyles = firstList ? window.getComputedStyle(firstList) : null;
+    return {
+      clientHeight: element.clientHeight,
+      overflowY: styles.overflowY,
+      scrollHeight: element.scrollHeight,
+      railScrollbarColor: styles.scrollbarColor,
+      railScrollbarWidth: styles.scrollbarWidth,
+      listScrollbarColor: listStyles?.scrollbarColor,
+      listScrollbarWidth: listStyles?.scrollbarWidth,
+      viewportHeight: window.innerHeight,
+    };
+  });
+
+  expect(metrics.overflowY).toBe('auto');
+  expect(metrics.scrollHeight).toBeGreaterThan(metrics.clientHeight);
+  expect(metrics.clientHeight).toBeLessThan(metrics.viewportHeight);
+  expect(metrics.railScrollbarWidth).toBe('thin');
+  expect(metrics.listScrollbarWidth).toBe('thin');
+  expect(metrics.railScrollbarColor).not.toBe('auto');
+  expect(metrics.listScrollbarColor).not.toBe('auto');
+});
+
+test('sidebar filter titles sit inside their panels', async ({ page }) => {
+  await page.setViewportSize({ width: 1280, height: 720 });
+  await page.goto('/');
+
+  const panelMetrics = await page.locator('.filter-panel').evaluateAll((panels) =>
+    panels
+      .map((panel) => {
+        const legend = panel.querySelector('legend');
+        if (!legend) return null;
+
+        const panelBox = panel.getBoundingClientRect();
+        const legendBox = legend.getBoundingClientRect();
+        const styles = window.getComputedStyle(panel);
+
+        return {
+          title: legend.textContent?.trim(),
+          panelTop: panelBox.top,
+          panelLeft: panelBox.left,
+          legendTop: legendBox.top,
+          legendLeft: legendBox.left,
+          paddingTop: Number.parseFloat(styles.paddingTop),
+          paddingLeft: Number.parseFloat(styles.paddingLeft),
+        };
+      })
+      .filter(Boolean),
+  );
+
+  expect(panelMetrics).toEqual(
+    expect.arrayContaining([
+      expect.objectContaining({ title: 'Platform' }),
+      expect.objectContaining({ title: 'Base' }),
+    ]),
+  );
+
+  for (const metrics of panelMetrics) {
+    expect(metrics!.legendTop).toBeGreaterThanOrEqual(metrics!.panelTop + metrics!.paddingTop - 1);
+    expect(metrics!.legendLeft).toBeGreaterThanOrEqual(metrics!.panelLeft + metrics!.paddingLeft - 1);
+  }
+});
+
 test('detail page renders metadata and private file links', async ({ page }) => {
   await page.goto('/hack/radical-red/');
 
   await expect(page.getByRole('heading', { name: 'Pokémon Radical Red' })).toBeVisible();
   await expect(page.getByText('Platform').first()).toBeVisible();
+  await expect(page.getByText('Roster').first()).toBeVisible();
+  await expect(page.getByText('Fakemon').first()).toBeVisible();
   await expect(page.getByRole('heading', { name: 'Files' })).toBeVisible();
   await expect(page.getByRole('link', { name: 'ROM file' })).toHaveAttribute(
     'href',
-    /https:\/\/romhacks-files\.ginnoir\.com\/_roms\/gba\/Hacks\//,
+    /https:\/\/romhacks-files\.ginnoir\.com\/_roms\/gba\/Pokemon%20-%20Radical%20Red/,
   );
   await expect(page.locator('body')).not.toContainText('undefined');
 });
@@ -38,6 +195,6 @@ test('browse pages render static grouped lists', async ({ page }) => {
   await page.goto('/browse/type/difficulty/');
 
   await expect(page.getByRole('heading', { name: 'Difficulty' })).toBeVisible();
-  await expect(page.locator('[data-card]:visible')).toHaveCount(105);
+  await expect(page.locator('[data-card]:visible')).toHaveCount(108);
   await expect(page.getByRole('link', { name: /Open Pokémon Radical Red/ })).toBeVisible();
 });