data: add Timeless Diamond + Spaceless Pearl to catalog

FE8 crossover hack (self-hosted in-game banner). Catalog 404 -> 405;
Playwright fixtures updated (405, GBA 204, New Experience 174, Complete 342).
Built and deployed to romhacks.ginnoir.com.

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

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

@@ -1,15 +1,20 @@
 {
   "a-farfetch-d-story": "/assets/banners/a-farfetch-d-story.png",
+  "a-star-in-the-desert": "/assets/banners/a-star-in-the-desert.webp",
   "abstract": "/assets/banners/abstract.gif",
   "acceptance": "/assets/banners/acceptance.png",
   "acerion-re": "/assets/banners/acerion-re.webp",
   "adventure-red-chapter": "/assets/banners/adventure-red-chapter.webp",
+  "aesthetic-red": "/assets/banners/aesthetic-red.png",
   "aether-white-2": "/assets/banners/aether-white-2.webp",
   "africanvs": "/assets/banners/africanvs.png",
+  "alchemist": "/assets/banners/alchemist.png",
   "all-in": "/assets/banners/all-in.png",
   "altair-sirius-vega": "/assets/banners/altair-sirius-vega.gif",
   "ambrosia": "/assets/banners/ambrosia.webp",
+  "amethyst": "/assets/banners/amethyst.webp",
   "ashgray": "/assets/banners/ashgray.webp",
+  "ashen-frost": "/assets/banners/ashen-frost.png",
   "asther-violet": "/assets/banners/asther-violet.png",
   "astral-red": "/assets/banners/astral-red.png",
   "attack-on-the-space-station": "/assets/banners/attack-on-the-space-station.png",
@@ -22,12 +27,14 @@
   "big-blue": "/assets/banners/big-blue.png",
   "binary-sun": "/assets/banners/binary-sun.png",
   "birch-s-folly": "/assets/banners/birch-s-folly.jpg",
+  "bizarre": "/assets/banners/bizarre.png",
   "black-2-silly-edition": "/assets/banners/black-2-silly-edition.png",
   "black-boost": "/assets/banners/black-boost.png",
   "black-pearl-emerald": "/assets/banners/black-pearl-emerald.png",
   "black-and-white-3-genesis": "/assets/banners/black-and-white-3-genesis.webp",
   "blaze-black-2-volt-white-2": "/assets/banners/blaze-black-2-volt-white-2.png",
   "blaze-black-2-redux": "/assets/banners/blaze-black-2-redux.webp",
+  "blaze-black": "/assets/banners/blaze-black.png",
   "blazing-emerald": "/assets/banners/blazing-emerald.png",
   "blinding-white-2": "/assets/banners/blinding-white-2.png",
   "bloody-fusion-platinum": "/assets/banners/bloody-fusion-platinum.jpg",
@@ -47,10 +54,15 @@
   "colors": "/assets/banners/colors.jpg",
   "colosseum-green-adventure": "/assets/banners/colosseum-green-adventure.jpg",
   "compass": "/assets/banners/compass.webp",
+  "concealed": "/assets/banners/concealed.jpg",
   "conquest-ultimate": "/assets/banners/conquest-ultimate.jpg",
+  "consonancia": "/assets/banners/consonancia.png",
+  "conviction": "/assets/banners/conviction.png",
   "cope": "/assets/banners/cope.png",
   "coral": "/assets/banners/coral.webp",
+  "crippling-medical-debt-edition": "/assets/banners/crippling-medical-debt-edition.webp",
   "cross-stadium": "/assets/banners/cross-stadium.jpg",
+  "crown": "/assets/banners/crown.webp",
   "crystal-16-bit": "/assets/banners/crystal-16-bit.png",
   "crystal-advance-redux": "/assets/banners/crystal-advance-redux.jpg",
   "crystal-advance": "/assets/banners/crystal-advance.png",
@@ -58,9 +70,14 @@
   "crystal-calm": "/assets/banners/crystal-calm.png",
   "crystal-cappuccino-deluxe": "/assets/banners/crystal-cappuccino-deluxe.jpg",
   "crystal-clear": "/assets/banners/crystal-clear.jpg",
+  "crystal-inheritance": "/assets/banners/crystal-inheritance.webp",
+  "crystal-kaizo": "/assets/banners/crystal-kaizo.png",
   "crystal-legacy": "/assets/banners/crystal-legacy.png",
   "cubic-crystal": "/assets/banners/cubic-crystal.png",
   "dark-knight": "/assets/banners/dark-knight.webp",
+  "dark-rising-order-destroyed": "/assets/banners/dark-rising-order-destroyed.webp",
+  "dark-rising-worlds-collide": "/assets/banners/dark-rising-worlds-collide.webp",
+  "dark-rising-2": "/assets/banners/dark-rising-2.png",
   "dark-rising": "/assets/banners/dark-rising.webp",
   "dark-violet": "/assets/banners/dark-violet.jpg",
   "dark-worship": "/assets/banners/dark-worship.png",
@@ -77,28 +94,41 @@
   "elite-redux": "/assets/banners/elite-redux.png",
   "elysium": "/assets/banners/elysium.webp",
   "emerald-20": "/assets/banners/emerald-20.png",
+  "emerald-azure": "/assets/banners/emerald-azure.webp",
+  "emerald-cross": "/assets/banners/emerald-cross.png",
+  "emerald-extended-cut": "/assets/banners/emerald-extended-cut.jpg",
   "emerald-imperium": "/assets/banners/emerald-imperium.jpg",
   "emerald-kaizo": "/assets/banners/emerald-kaizo.png",
   "emerald-legacy": "/assets/banners/emerald-legacy.webp",
   "emerald-party-randomizer-plus": "/assets/banners/emerald-party-randomizer-plus.jpg",
   "emerald-rogue-2-0": "/assets/banners/emerald-rogue-2-0.png",
+  "emerald-rogue": "/assets/banners/emerald-rogue.jpeg",
   "emerald-seaglass": "/assets/banners/emerald-seaglass.png",
+  "emerald-squared": "/assets/banners/emerald-squared.png",
   "empyrean": "/assets/banners/empyrean.png",
   "energized-emerald": "/assets/banners/energized-emerald.jpg",
+  "eon-guardians": "/assets/banners/eon-guardians.webp",
   "ephemerald": "/assets/banners/ephemerald.png",
   "eternal-x-wilting-y": "/assets/banners/eternal-x-wilting-y.gif",
   "evolved": "/assets/banners/evolved.jpg",
   "exceeded": "/assets/banners/exceeded.jpg",
   "factory-adventure": "/assets/banners/factory-adventure.jpg",
   "fakemon-fire-red": "/assets/banners/fakemon-fire-red.jpg",
+  "fire-ash": "/assets/banners/fire-ash.png",
   "fire-red-898": "/assets/banners/fire-red-898.jpg",
   "fire-red-extended": "/assets/banners/fire-red-extended.webp",
   "fire-red-ok-version": "/assets/banners/fire-red-ok-version.jpg",
+  "fire-of-sky": "/assets/banners/fire-of-sky.webp",
+  "firered-leafgreen-frlg": "/assets/banners/firered-leafgreen-frlg.img",
+  "firered-deluxe": "/assets/banners/firered-deluxe.png",
   "firered-distorted": "/assets/banners/firered-distorted.jpg",
   "firered-multiverse": "/assets/banners/firered-multiverse.webp",
   "firered-reignited-leafgreen-regrown": "/assets/banners/firered-reignited-leafgreen-regrown.jpg",
+  "firered-reignited": "/assets/banners/firered-reignited.jpg",
   "firered-rocket-edition": "/assets/banners/firered-rocket-edition.png",
   "flora-sky": "/assets/banners/flora-sky.png",
+  "floral-tempus": "/assets/banners/floral-tempus.jpg",
+  "following-renegade-platinum": "/assets/banners/following-renegade-platinum.png",
   "fool-s-gold": "/assets/banners/fool-s-gold.png",
   "frigo-returns": "/assets/banners/frigo-returns.jpg",
   "fused-adimensions": "/assets/banners/fused-adimensions.jpg",
@@ -118,11 +148,17 @@
   "golden-shield": "/assets/banners/golden-shield.png",
   "grand-colosseum": "/assets/banners/grand-colosseum.png",
   "greninja-z": "/assets/banners/greninja-z.jpg",
+  "grimm": "/assets/banners/grimm.png",
+  "hgss-sevii": "/assets/banners/hgss-sevii.webp",
   "heart-and-soul": "/assets/banners/heart-and-soul.png",
   "heartgold-generation": "/assets/banners/heartgold-generation.png",
   "heartgold-reloaded": "/assets/banners/heartgold-reloaded.jpg",
+  "hearth": "/assets/banners/hearth.img",
+  "hero-legacy": "/assets/banners/hero-legacy.png",
+  "hidden-place": "/assets/banners/hidden-place.webp",
   "hisui-red": "/assets/banners/hisui-red.jpg",
   "hoenn-white-2": "/assets/banners/hoenn-white-2.jpg",
+  "hoenn-s-last-wish": "/assets/banners/hoenn-s-last-wish.png",
   "hollow-woods": "/assets/banners/hollow-woods.jpg",
   "horror-white": "/assets/banners/horror-white.webp",
   "hydro-bliss": "/assets/banners/hydro-bliss.png",
@@ -131,9 +167,13 @@
   "infernal-legend": "/assets/banners/infernal-legend.jpg",
   "infinite-black-2": "/assets/banners/infinite-black-2.jpg",
   "infinite-fusion": "/assets/banners/infinite-fusion.jpg",
+  "infinity": "/assets/banners/infinity.gif",
+  "inkwell": "/assets/banners/inkwell.png",
   "insurgence": "/assets/banners/insurgence.jpg",
   "inverse-emerald": "/assets/banners/inverse-emerald.jpg",
   "ironmon-red-kaizo": "/assets/banners/ironmon-red-kaizo.jpg",
+  "itinerant": "/assets/banners/itinerant.gif",
+  "jam-festival": "/assets/banners/jam-festival.png",
   "jet-black": "/assets/banners/jet-black.png",
   "johto-legends": "/assets/banners/johto-legends.png",
   "kanto-black": "/assets/banners/kanto-black.webp",
@@ -147,13 +187,16 @@
   "leaf-green-extreme-randomizer": "/assets/banners/leaf-green-extreme-randomizer.jpg",
   "legends-kingdom-hearts": "/assets/banners/legends-kingdom-hearts.jpg",
   "legends-x": "/assets/banners/legends-x.webp",
+  "legends-of-the-arena": "/assets/banners/legends-of-the-arena.png",
   "let-s-go-peerless-pikachu-exquisite-eevee": "/assets/banners/let-s-go-peerless-pikachu-exquisite-eevee.jpg",
   "let-s-go-lugia": "/assets/banners/let-s-go-lugia.jpg",
   "let-s-beat-mew": "/assets/banners/let-s-beat-mew.jpg",
   "light-platinum": "/assets/banners/light-platinum.webp",
   "liquid-crystal": "/assets/banners/liquid-crystal.jpg",
+  "low-budget-crystal": "/assets/banners/low-budget-crystal.webp",
   "luminescent-platinum": "/assets/banners/luminescent-platinum.webp",
   "mastersilver-woofgold": "/assets/banners/mastersilver-woofgold.jpg",
+  "mega-adventures": "/assets/banners/mega-adventures.png",
   "mega-blue": "/assets/banners/mega-blue.png",
   "mega-power": "/assets/banners/mega-power.png",
   "meissa-moon": "/assets/banners/meissa-moon.jpg",
@@ -161,7 +204,10 @@
   "minced-fusions": "/assets/banners/minced-fusions.jpg",
   "mineral": "/assets/banners/mineral.jpg",
   "miopidgey": "/assets/banners/miopidgey.png",
+  "miragea-s-traveler": "/assets/banners/miragea-s-traveler.png",
   "modern-emerald": "/assets/banners/modern-emerald.webp",
+  "moemon-mega-firered": "/assets/banners/moemon-mega-firered.png",
+  "moemon-star-emerald": "/assets/banners/moemon-star-emerald.webp",
   "moon-black-2": "/assets/banners/moon-black-2.png",
   "moon-emerald-extreme-randomizer": "/assets/banners/moon-emerald-extreme-randomizer.jpg",
   "moon-silver": "/assets/banners/moon-silver.png",
@@ -171,51 +217,72 @@
   "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",
   "national-history-museum": "/assets/banners/national-history-museum.jpg",
   "navy-sapphire": "/assets/banners/navy-sapphire.jpg",
   "nebula-1": "/assets/banners/nebula-1.png",
+  "nebula-2": "/assets/banners/nebula-2.png",
+  "nebula-3": "/assets/banners/nebula-3.png",
   "new-generations": "/assets/banners/new-generations.png",
+  "nightmare": "/assets/banners/nightmare.webp",
+  "nova": "/assets/banners/nova.img",
   "null": "/assets/banners/null.png",
   "obscura": "/assets/banners/obscura.webp",
   "obsidian-emerald": "/assets/banners/obsidian-emerald.jpg",
   "odyssey": "/assets/banners/odyssey.png",
   "omega-paradox-v2": "/assets/banners/omega-paradox-v2.jpg",
+  "omega-ruby-origins": "/assets/banners/omega-ruby-origins.webp",
+  "omniversal-emerald": "/assets/banners/omniversal-emerald.jpg",
   "onyx-blue": "/assets/banners/onyx-blue.webp",
   "opalo": "/assets/banners/opalo.jpg",
   "orange": "/assets/banners/orange.jpg",
   "order-and-chaos": "/assets/banners/order-and-chaos.png",
   "pefect-emerald": "/assets/banners/pefect-emerald.jpg",
   "peppermint": "/assets/banners/peppermint.png",
+  "peridot": "/assets/banners/peridot.png",
+  "phoenix-red": "/assets/banners/phoenix-red.webp",
   "photonic-sun-prismatic-moon": "/assets/banners/photonic-sun-prismatic-moon.png",
   "pisces": "/assets/banners/pisces.webp",
   "pitch-black-pure-white": "/assets/banners/pitch-black-pure-white.png",
+  "plastic-pyrite": "/assets/banners/plastic-pyrite.png",
   "platinum-kaizo": "/assets/banners/platinum-kaizo.jpg",
   "platinum-red": "/assets/banners/platinum-red.jpg",
   "platinum-redux": "/assets/banners/platinum-redux.jpg",
   "platinum-unlocked": "/assets/banners/platinum-unlocked.jpg",
   "pocket-gaiden": "/assets/banners/pocket-gaiden.webp",
+  "pokemblem": "/assets/banners/pokemblem.png",
+  "poketale": "/assets/banners/poketale.png",
+  "poketropolis": "/assets/banners/poketropolis.img",
   "pokerogue": "/assets/banners/pokerogue.jpg",
   "polished-crystal": "/assets/banners/polished-crystal.png",
   "prism": "/assets/banners/prism.png",
+  "prisme": "/assets/banners/prisme.png",
+  "project-nova": "/assets/banners/project-nova.img",
   "pure-heart-true-soul": "/assets/banners/pure-heart-true-soul.jpg",
   "quarantine-crystal": "/assets/banners/quarantine-crystal.png",
   "quetzal": "/assets/banners/quetzal.jpg",
   "r-o-w-e": "/assets/banners/r-o-w-e.webp",
   "re-verse": "/assets/banners/re-verse.jpg",
+  "radiant-topaz": "/assets/banners/radiant-topaz.png",
   "radical-red": "/assets/banners/radical-red.jpg",
   "rainbow-gold": "/assets/banners/rainbow-gold.png",
+  "re-union-dx": "/assets/banners/re-union-dx.jpg",
   "re-universe": "/assets/banners/re-universe.webp",
   "realidea-system": "/assets/banners/realidea-system.png",
   "reborn": "/assets/banners/reborn.png",
+  "recharged-emerald-rebalanced": "/assets/banners/recharged-emerald-rebalanced.png",
+  "recharged-emerald": "/assets/banners/recharged-emerald.png",
   "recharged-pink": "/assets/banners/recharged-pink.png",
   "recharged-yellow-previously-known-as-pok-mon-yellow-cross": "/assets/banners/recharged-yellow-previously-known-as-pok-mon-yellow-cross.webp",
   "recordkeepers": "/assets/banners/recordkeepers.png",
   "red-kaizo": "/assets/banners/red-kaizo.jpg",
   "rejuvenation": "/assets/banners/rejuvenation.jpg",
+  "relict": "/assets/banners/relict.img",
   "reminiscencia": "/assets/banners/reminiscencia.png",
+  "renegade-platinum": "/assets/banners/renegade-platinum.png",
   "resolute": "/assets/banners/resolute.png",
   "revitalus-immortalis": "/assets/banners/revitalus-immortalis.png",
   "rising-ruby-sinking-sapphire": "/assets/banners/rising-ruby-sinking-sapphire.webp",
@@ -230,6 +297,8 @@
   "rutile-ruby-star-sapphire": "/assets/banners/rutile-ruby-star-sapphire.jpg",
   "sacred-gold": "/assets/banners/sacred-gold.jpg",
   "saffron": "/assets/banners/saffron.png",
+  "saiph-2": "/assets/banners/saiph-2.png",
+  "saiph": "/assets/banners/saiph.png",
   "salt-shadow": "/assets/banners/salt-shadow.png",
   "scarlet-violet": "/assets/banners/scarlet-violet.jpg",
   "scarlet-sapphire": "/assets/banners/scarlet-sapphire.png",
@@ -238,12 +307,15 @@
   "serene-crystal": "/assets/banners/serene-crystal.png",
   "shadow-legends": "/assets/banners/shadow-legends.png",
   "shadow-of-time": "/assets/banners/shadow-of-time.webp",
+  "shattered-light": "/assets/banners/shattered-light.gif",
   "shinju-adventures": "/assets/banners/shinju-adventures.webp",
   "shiny-island": "/assets/banners/shiny-island.webp",
+  "sienna": "/assets/banners/sienna.jpg",
   "silver-rival": "/assets/banners/silver-rival.jpg",
   "silver-yellow": "/assets/banners/silver-yellow.jpg",
   "smogon-emerald": "/assets/banners/smogon-emerald.jpg",
   "snakewood-improved": "/assets/banners/snakewood-improved.webp",
+  "snakewood": "/assets/banners/snakewood.img",
   "solar-light-lunar-dark": "/assets/banners/solar-light-lunar-dark.webp",
   "solar-platinum": "/assets/banners/solar-platinum.png",
   "soothing-silver": "/assets/banners/soothing-silver.png",
@@ -253,6 +325,8 @@
   "sour-crystal": "/assets/banners/sour-crystal.jpg",
   "sovereign-of-the-skies": "/assets/banners/sovereign-of-the-skies.webp",
   "space-world-crystal": "/assets/banners/space-world-crystal.jpg",
+  "spaceless-pearl": "/assets/banners/spaceless-pearl.webp",
+  "spades-and-clubs": "/assets/banners/spades-and-clubs.png",
   "spirit-of-the-storm": "/assets/banners/spirit-of-the-storm.png",
   "star-beasts-asteroid-version-en": "/assets/banners/star-beasts-asteroid-version-en.png",
   "star": "/assets/banners/star.webp",
@@ -274,6 +348,7 @@
   "team-rocket-jessie-james-edition": "/assets/banners/team-rocket-jessie-james-edition.jpg",
   "team-rocket-prepare-for-trouble": "/assets/banners/team-rocket-prepare-for-trouble.webp",
   "techno-emerald": "/assets/banners/techno-emerald.jpg",
+  "tectonic": "/assets/banners/tectonic.png",
   "terra": "/assets/banners/terra.jpg",
   "the-light-in-our-hearts": "/assets/banners/the-light-in-our-hearts.png",
   "the-pit": "/assets/banners/the-pit.png",
@@ -281,12 +356,15 @@
   "the-teal-mask": "/assets/banners/the-teal-mask.jpg",
   "the-unown-king": "/assets/banners/the-unown-king.gif",
   "the-wooper-who-saved-christmas": "/assets/banners/the-wooper-who-saved-christmas.png",
+  "theta-emerald-ex": "/assets/banners/theta-emerald-ex.img",
   "theta-emerald-the-last-dance": "/assets/banners/theta-emerald-the-last-dance.png",
   "this-gym-of-mine": "/assets/banners/this-gym-of-mine.png",
   "thyme": "/assets/banners/thyme.jpg",
+  "timeless-diamond": "/assets/banners/timeless-diamond.webp",
   "too-many-types-2": "/assets/banners/too-many-types-2.jpg",
   "too-many-types": "/assets/banners/too-many-types.png",
   "touhoumon-another-world": "/assets/banners/touhoumon-another-world.jpg",
+  "tourmaline": "/assets/banners/tourmaline.webp",
   "transform": "/assets/banners/transform.png",
   "two": "/assets/banners/two.webp",
   "ultimate-fusion": "/assets/banners/ultimate-fusion.jpg",
@@ -300,11 +378,13 @@
   "valiant": "/assets/banners/valiant.jpg",
   "vanguard": "/assets/banners/vanguard.png",
   "vanishing-point": "/assets/banners/vanishing-point.jpg",
+  "vega-fairy-ex": "/assets/banners/vega-fairy-ex.jpeg",
   "victory-fire": "/assets/banners/victory-fire.jpg",
   "vintage-white": "/assets/banners/vintage-white.jpg",
   "violette": "/assets/banners/violette.png",
   "void": "/assets/banners/void.jpg",
   "volt-white-2-redux": "/assets/banners/volt-white-2-redux.jpg",
+  "volt-white": "/assets/banners/volt-white.webp",
   "voyager": "/assets/banners/voyager.gif",
   "war-of-masters": "/assets/banners/war-of-masters.webp",
   "wasteland": "/assets/banners/wasteland.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,35 +1,191 @@
 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('405');
+  await expect(heroStats).toContainText('hacks');
+  await expect(heroStats).toContainText('Platforms');
+  await expect(heroStats).toContainText('GBA 204');
+  await expect(heroStats).toContainText('PC 83');
+  await expect(heroStats).toContainText('NDS 50');
+  await expect(heroStats).toContainText('GBC 37');
+  await expect(heroStats).toContainText('Types');
+  await expect(heroStats).toContainText('Expansion 166');
+  await expect(heroStats).toContainText('New Experience 174');
+  await expect(heroStats).toContainText('Difficulty 127');
+  await expect(heroStats).toContainText('QoL 94');
+  await expect(heroStats).toContainText('Status');
+  await expect(heroStats).toContainText('Complete 342');
+  await expect(heroStats).toContainText('Ongoing 30');
+  await expect(heroStats).toContainText('Beta 32');
+});
+
+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+204/ })).toHaveAttribute('href', '/browse/platform/gba/');
+  await expect(browse.getByRole('link', { name: /Difficulty\s+127/ })).toHaveAttribute(
+    'href',
+    '/browse/type/difficulty/',
+  );
+  await expect(browse.getByRole('link', { name: /Complete\s+342/ })).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(405);
 
   await page.getByPlaceholder('Search hacks').fill('Radical Red');
-  await expect(catalogCards).toHaveCount(4);
+  await expect(catalogCards).toHaveCount(5);
   await expect(page.getByRole('region', { name: 'Hack catalog' }).getByRole('link', { name: /Open Pokémon Radical Red/ })).toBeVisible();
 
   await page.getByPlaceholder('Search hacks').fill('');
   await page.getByLabel('GBA').check();
-  await expect(catalogCards).toHaveCount(188);
+  await expect(catalogCards).toHaveCount(204);
 
   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 +194,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(127);
   await expect(page.getByRole('link', { name: /Open Pokémon Radical Red/ })).toBeVisible();
 });