From 83cb89aedd05c64eb2b623013fa095a1443f9896 Mon Sep 17 00:00:00 2001
From: chris <chris@chrisedwards.tech>
Date: Thu, 10 Sep 2026 10:37:51 -0400
Subject: [PATCH] Form Dex: name the default slot, larger art, readable labels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Unown's first slot is now "A" (its base sprite is the A shape), not
  "Default". Other letter/pattern sets keep "Default".
- The grey-out for uncaught entries applied to the whole tile, dimming
  the label text to ~0.55 opacity — unreadable in dark mode. Move the
  grayscale/opacity to just the sprite; the label stays full-contrast.
- Sprites 40 -> 60px, grid cell min 68 -> 88px.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017Ve7HLspzeG2xDPtJQ8vmu
---
 src/styles/layout.css      | 27 ++++++++++++++++-----------
 src/views/PokemonDetail.js |  6 +++++-
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/styles/layout.css b/src/styles/layout.css
index dbbbef5..0c3bf92 100644
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@@ -2929,7 +2929,7 @@
 }
 .formdex {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
   gap: 8px;
   margin-top: 10px;
 }
@@ -2938,32 +2938,37 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 2px;
-  padding: 8px 4px 6px;
+  gap: 4px;
+  padding: 10px 4px 8px;
   border: none;
   border-radius: 14px;
   background: var(--surface-2);
   cursor: pointer;
-  filter: grayscale(1);
-  opacity: 0.55;
-  transition: filter 0.15s, opacity 0.15s, background 0.15s;
+  transition: background 0.15s;
 }
 .formdex__tile.is-caught {
-  filter: none;
-  opacity: 1;
   background: color-mix(in srgb, var(--type-main) 16%, var(--surface-2));
 }
+/* Dim only the artwork until caught — the label stays fully legible. */
 .formdex__sprite {
-  width: 40px;
-  height: 40px;
+  width: 60px;
+  height: 60px;
   object-fit: contain;
   image-rendering: pixelated;
+  filter: grayscale(1);
+  opacity: 0.6;
+  transition: filter 0.15s, opacity 0.15s;
+}
+.formdex__tile.is-caught .formdex__sprite {
+  filter: none;
+  opacity: 1;
 }
 .formdex__label {
-  font-size: 0.62rem;
+  font-size: 0.7rem;
   font-weight: 700;
   text-align: center;
   line-height: 1.15;
+  color: var(--text);
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/src/views/PokemonDetail.js b/src/views/PokemonDetail.js
index b68594a..05794f4 100644
--- a/src/views/PokemonDetail.js
+++ b/src/views/PokemonDetail.js
@@ -511,8 +511,12 @@ export async function PokemonDetail(nationalId) {
   // because you switched your active game to browse something else.
   let formDexPanel = null;
   if (cosmeticForms.length > 1) {
+    // For letter/pattern sets the base sprite *is* the first entry (Unown's
+    // default artwork is the "A" shape), so give it that name rather than a
+    // generic "Default".
+    const DEFAULT_SLOT_NAME = { unown: 'A' };
     const slots = [
-      { slug: snapSpecies.name, id: nationalId, name: 'Default', sprite: null },
+      { slug: snapSpecies.name, id: nationalId, name: DEFAULT_SLOT_NAME[snapSpecies.name] || 'Default', sprite: null },
       ...cosmeticForms,
     ];
     const countEl = el('span', { class: 'formdex__count' });