From 4e3e6bf256c44d7e03bce7eac649a09ca09d5cf6 Mon Sep 17 00:00:00 2001
From: poketonova <fitnessforaregus@gmail.com>
Date: Sat, 18 Jul 2026 20:18:55 -0600
Subject: [PATCH] feat: add compact master set view

---
 scripts/evals/master-set-compact-mode.mjs | 384 ++++++++++
 scripts/evals/run-all.mjs                 |   1 +
 scripts/smoke/browser-smoke.mjs           | 831 ++++++++++++++++++++++
 src/assets/main.css                       |   3 +
 src/components/MasterSetGallery.vue       | 429 ++++++++++-
 5 files changed, 1609 insertions(+), 39 deletions(-)
 create mode 100644 scripts/evals/master-set-compact-mode.mjs

diff --git a/scripts/evals/master-set-compact-mode.mjs b/scripts/evals/master-set-compact-mode.mjs
new file mode 100644
index 0000000..7608a66
--- /dev/null
+++ b/scripts/evals/master-set-compact-mode.mjs
@@ -0,0 +1,384 @@
+import { assert, ok, read, runEval } from './lib.mjs'
+
+runEval('master set compact mode v1 source guards', () => {
+  const gallery = read('src/components/MasterSetGallery.vue')
+  const portfolioView = read('src/views/PortfolioView.vue')
+  const portfolioStore = read('src/stores/portfolio.js')
+
+  // ── Session-only density (default comfortable / off) ─────────────────
+  assert(
+    /Session-only density|session-only/i.test(gallery),
+    'must label session-only density behavior in code',
+  )
+  assert(
+    /const compact = ref\(false\)/.test(gallery),
+    'compact must default false (comfortable / current mode)',
+  )
+  assert(
+    /No Pinia\/Dexie\/localStorage|no Pinia, Dexie, or\s+localStorage/i.test(gallery),
+    'must document no Pinia/Dexie/localStorage for compact preference',
+  )
+  // No persistence APIs for the compact flag
+  assert(
+    !/localStorage\.(get|set)Item\([^)]*compact/i.test(gallery),
+    'must not read/write localStorage for compact',
+  )
+  assert(
+    !/sessionStorage\.(get|set)Item\([^)]*compact/i.test(gallery),
+    'must not read/write sessionStorage for compact',
+  )
+  assert(
+    !/persist(Now)?\(\)/.test(gallery),
+    'gallery must not call store persist for density',
+  )
+  // Parent still mounts gallery with v-if so unmount resets instance state
+  assert(
+    /v-if="msGalleryKey === g\.key"/.test(portfolioView),
+    'parent must v-if gallery so compact resets on hide/unmount/reopen',
+  )
+
+  // ── Toggle control ───────────────────────────────────────────────────
+  assert(
+    /msg-density-toggle/.test(gallery),
+    'must expose density toggle control',
+  )
+  assert(
+    /aria-pressed="compact \? 'true' : 'false'"/.test(gallery)
+      || /:aria-pressed="compact \? 'true' : 'false'"/.test(gallery),
+    'density toggle must expose aria-pressed',
+  )
+  assert(
+    /aria-label="compact \? 'Switch to comfortable layout' : 'Switch to compact layout'"/.test(gallery)
+      || /:aria-label="compact \?/.test(gallery),
+    'density toggle must have aria-label',
+  )
+  assert(
+    /compact = !compact/.test(gallery),
+    'toggle must flip compact ref',
+  )
+
+  // ── Canonical visibleCards only — no synthetic range ─────────────────
+  assert(
+    /v-for="card in visibleCards"/.test(gallery),
+    'both layouts must iterate visibleCards',
+  )
+  const compactBlock = gallery.includes('msg-grid-compact')
+    ? gallery.slice(gallery.indexOf('msg-grid-compact'))
+    : ''
+  assert(compactBlock.length > 0, 'compact grid class must exist')
+  assert(
+    /v-for="card in visibleCards"/.test(compactBlock),
+    'compact grid must v-for visibleCards (canonical fetched records)',
+  )
+  // Strip HTML/JS comments before scanning for forbidden synthetic-range code
+  const codeOnly = gallery
+    .replace(/<!--[\s\S]*?-->/g, '')
+    .replace(/\/\/[^\n]*/g, '')
+    .replace(/\/\*[\s\S]*?\*\//g, '')
+  assert(
+    !/for\s*\(\s*let\s+\w+\s*=\s*1/.test(codeOnly),
+    'must not synthesize 1..N placeholder loops',
+  )
+  assert(
+    !/Array\.from\(\s*\{\s*length:\s*(setSize|total|group\.total)/.test(codeOnly),
+    'must not build synthetic arrays from setSize/total',
+  )
+  assert(
+    !/\b(setSize|group\.total)\b[\s\S]{0,40}(v-for|Array\.from|new Array)/.test(codeOnly),
+    'must not drive v-for/Array.from from setSize/total placeholders',
+  )
+  assert(
+    /never synthetic|canonical fetched|visibleCards/.test(gallery),
+    'must label canonical visibleCards / no-synthetic-range intent',
+  )
+  // Same fetch path — no second fetch for compact
+  const fetchCount = (gallery.match(/fetchSetCards\s*\(/g) || []).length
+  assert(fetchCount === 1, `exactly one fetchSetCards call (got ${fetchCount})`)
+  assert(
+    /const visibleCards = computed/.test(gallery),
+    'visibleCards computed must remain the shared filter path',
+  )
+  assert(
+    /filter\.value === 'need'/.test(gallery) && /!isOwned\(c\)/.test(gallery),
+    'need filter must still use isOwned path',
+  )
+  assert(
+    /function isOwned\(card\)/.test(gallery)
+      && /ownedIds\.value\.has\(card\.id\)/.test(gallery)
+      && /ownedKeys\.value\.has\(`\$\{name\}\|\$\{String\(card\.number/.test(gallery)
+      && /ownedKeys\.value\.has\(name\)/.test(gallery),
+    'isOwned must keep cardId → name|number → name matching',
+  )
+
+  // ── Stale-mark exclusion ─────────────────────────────────────────────
+  assert(
+    /markedCards = computed\(\(\) => cards\.value\.filter\(c => props\.marks\[c\.id\] && !isOwned\(c\)\)\)/.test(gallery)
+      || /props\.marks\[c\.id\]\s*&&\s*!isOwned\(c\)/.test(gallery),
+    'markedCards must exclude owned cards (stale marks)',
+  )
+  assert(
+    /Safe marked set|stale-mark|still not owned/i.test(gallery),
+    'must label stale-mark / safe marked set behavior',
+  )
+  assert(
+    /foundToday[\s\S]{0,200}markedCards/.test(gallery)
+      || /markedCards\.value\.filter\(c => props\.marks\[c\.id\]/.test(gallery),
+    'foundToday must derive from safe markedCards set',
+  )
+  assert(
+    /emit\('add-found',\s*markedCards\.value\)/.test(gallery),
+    'add-found must emit safe markedCards (no owned duplicates)',
+  )
+  // Parent add-found + clear marks preserved
+  assert(
+    /@add-found="addFoundCards"/.test(portfolioView)
+      && /function addFoundCards/.test(portfolioView)
+      && /clearHuntMarks/.test(portfolioView),
+    'parent add-found + clearHuntMarks path must remain',
+  )
+  assert(
+    /function toggleHuntMark/.test(portfolioStore)
+      && /function clearHuntMarks/.test(portfolioStore),
+    'store hunt mark APIs must remain',
+  )
+
+  // ── Compact interactions / a11y ──────────────────────────────────────
+  assert(
+    /msg-compact-primary/.test(gallery) && /msg-compact-preview/.test(gallery),
+    'compact must split primary cell and separate preview control',
+  )
+  assert(
+    /compactPrimaryLabel|Mark found|Unmark found|Preview owned/.test(gallery),
+    'compact primary must expose owned/mark/unmark aria labels',
+  )
+  assert(
+    /Preview \$\{card\.name|aria-label="`Preview/.test(gallery)
+      || /:aria-label="`Preview/.test(gallery),
+    'compact preview control must have aria-label',
+  )
+  assert(
+    /msg-compact-num/.test(gallery) && /msg-compact-name/.test(gallery),
+    'compact cells must show number and name',
+  )
+  assert(
+    /compactStatusLabel|Owned|Found|Need/.test(gallery),
+    'compact must encode owned / needed / found status',
+  )
+  // Compact avoids loading full card images in the grid (lightweight)
+  const compactTemplate = gallery.match(
+    /<!-- Compact:[\s\S]*?msg-grid-compact[\s\S]*?(?=<!-- Footer|msg-footer)/,
+  )?.[0] || gallery.slice(
+    gallery.indexOf('msg-grid-compact'),
+    gallery.indexOf('msg-footer'),
+  )
+  assert(
+    !/<img[\s\S]{0,80}card\.images/.test(compactTemplate),
+    'compact grid must not load card images (number-first / lightweight)',
+  )
+  // Owned → preview; missing → toggle-mark (shared tapCard)
+  assert(
+    /function tapCard\(card\)/.test(gallery)
+      && /if \(isOwned\(card\)\)\s*\{\s*preview\.value = card/.test(gallery)
+      && /emit\('toggle-mark',\s*card\.id\)/.test(gallery),
+    'tapCard must keep owned→preview and missing→toggle-mark',
+  )
+
+  // ── ≥44px targets (toggle, compact primary/preview, ISO, filters, enlarge, close) ──
+  const style = gallery.match(/<style scoped>([\s\S]*?)<\/style>/)?.[1] || ''
+  function hasMin44(className) {
+    const re = new RegExp(
+      `\\.${className.replace(/\./g, '\\.')}\\s*\\{[^}]*min-(?:width|height):\\s*44px[^}]*min-(?:width|height):\\s*44px|` +
+      `\\.${className.replace(/\./g, '\\.')}\\s*\\{[^}]*(?:min-height:\\s*44px[^}]*min-width:\\s*44px|min-width:\\s*44px[^}]*min-height:\\s*44px)`,
+    )
+    // Also accept width/height: 44px pairs
+    const re2 = new RegExp(
+      `\\.${className}\\s*\\{[^}]*(?:min-height:\\s*44px|height:\\s*44px)[^}]*(?:min-width:\\s*44px|width:\\s*44px)|` +
+      `\\.${className}\\s*\\{[^}]*(?:min-width:\\s*44px|width:\\s*44px)[^}]*(?:min-height:\\s*44px|height:\\s*44px)`,
+    )
+    return re.test(style) || re2.test(style) || (
+      style.includes(`.${className}`)
+      && new RegExp(`\\.${className}\\s*\\{[^}]*min-height:\\s*44px`).test(style)
+      && new RegExp(`\\.${className}\\s*\\{[^}]*min-width:\\s*44px`).test(style)
+    )
+  }
+  for (const cls of [
+    'msg-density-toggle',
+    'msg-compact-primary',
+    'msg-compact-preview',
+    'msg-iso-btn',
+    'msg-filter-btn',
+    'msg-enlarge',
+    'msg-preview-close',
+  ]) {
+    assert(hasMin44(cls), `${cls} must be ≥44×44 (min-width + min-height 44px)`)
+  }
+
+  // ── Compact overflow clamping (long num/name must not paint outside) ──
+  const numBlock = style.match(/\.msg-compact-num\s*\{[^}]+\}/)?.[0] || ''
+  assert(
+    /overflow:\s*hidden/.test(numBlock) && /text-overflow:\s*ellipsis/.test(numBlock),
+    'msg-compact-num must clamp with overflow:hidden + text-overflow:ellipsis',
+  )
+  assert(
+    /white-space:\s*nowrap/.test(numBlock) || /word-break:\s*break-all/.test(numBlock),
+    'msg-compact-num must nowrap or break-all so long collector numbers stay in-cell',
+  )
+  const nameBlock = style.match(/\.msg-compact-name\s*\{[^}]+\}/)?.[0] || ''
+  assert(
+    /overflow:\s*hidden/.test(nameBlock),
+    'msg-compact-name must overflow:hidden',
+  )
+  assert(
+    /-webkit-line-clamp:\s*2/.test(nameBlock) || /text-overflow:\s*ellipsis/.test(nameBlock),
+    'msg-compact-name must line-clamp or ellipsis long titles',
+  )
+  assert(
+    /word-break:\s*break-word|overflow-wrap:\s*anywhere/.test(nameBlock),
+    'msg-compact-name must break long unbroken tokens',
+  )
+  // Preview control fits track (overflow hidden; icon-only at narrow OK)
+  const previewBlock = style.match(/\.msg-compact-preview\s*\{[^}]+\}/)?.[0] || ''
+  assert(
+    /overflow:\s*hidden/.test(previewBlock) && /min-width:\s*44px/.test(previewBlock),
+    'msg-compact-preview must overflow:hidden and keep ≥44px min-width',
+  )
+  assert(
+    /msg-compact-preview-txt/.test(style)
+      && (/clip:\s*rect\(0/.test(style) || /display:\s*none/.test(style.match(/\.msg-compact-preview-txt[\s\S]{0,400}/)?.[0] || '')),
+    'narrow layout must hide preview label text (icon-only) while aria-label remains',
+  )
+  assert(
+    /:aria-label="`Preview \$\{card\.name/.test(gallery)
+      || /aria-label="`Preview/.test(gallery)
+      || /:aria-label="`Preview/.test(gallery),
+    'preview button must keep aria-label when label text is visually hidden',
+  )
+
+  // ── 280px compact grid bound (3–4 columns via minmax ≥60px) ──────────
+  // Truthful track: minmax(60px+) so ~244px content yields 3 cols (4 when wider).
+  // Do not claim a hard max-column cap unless CSS enforces one.
+  assert(
+    /\.msg-grid-compact[\s\S]{0,240}minmax\(\s*6[0-9]px/.test(style)
+      || /\.msg-grid-compact[\s\S]{0,240}minmax\(\s*[7-9][0-9]px/.test(style),
+    'compact grid must use minmax ≥60px so 280px yields 3–4 non-overlapping columns',
+  )
+  // Reject stale false claims of a desktop/narrow max ~5 columns without enforcement
+  const falseMaxColClaim = /never exceed\s*~?\s*5\s*columns|max\s*~?\s*5\s*columns|desktop max\s*~?\s*5/i.test(gallery)
+  const enforcesMaxCols = /grid-template-columns:\s*repeat\(\s*[1-5]\s*,/.test(style)
+    || /max\([^)]*1fr[^)]*\)/.test(style)
+  assert(
+    !falseMaxColClaim || enforcesMaxCols,
+    'must not claim max ~5 columns unless CSS actually enforces a column cap',
+  )
+  assert(
+    /3(?:–|-| to )4\s*columns|3 columns|minmax\(60px\)/i.test(gallery),
+    'comments/CSS must truthfully describe 3–4 column / minmax(60px) narrow behavior',
+  )
+  assert(
+    /flex-wrap:\s*wrap/.test(style) && /\.msg-header/.test(style),
+    'header must wrap at narrow widths',
+  )
+  assert(
+    /\.msg-head-actions[\s\S]{0,80}flex-wrap:\s*wrap|\.msg-footer[\s\S]{0,80}flex-wrap:\s*wrap/.test(style),
+    'actions/footer must wrap at 280px',
+  )
+
+  // ── Tactile tokens only in scoped styles (no new hardcoded hex/rgba/blur) ──
+  // Allow var(--…) and color-mix with tokens; reject #hex and rgba()/blur(
+  const hexHits = style.match(/#[0-9a-fA-F]{3,8}\b/g) || []
+  assert(hexHits.length === 0, `scoped styles must not hardcode hex (found ${hexHits.join(', ')})`)
+  const rgbaHits = style.match(/rgba?\(/g) || []
+  assert(rgbaHits.length === 0, 'scoped styles must not hardcode rgb/rgba')
+  assert(!/filter:\s*blur\(|box-shadow:[^;]*blur\(/.test(style), 'no blurred shadows')
+  assert(
+    /prefers-reduced-motion:\s*reduce/.test(style),
+    'must respect prefers-reduced-motion',
+  )
+
+  // ── Preserve hunt / ISO / lightbox / filters surface ─────────────────
+  assert(/isoTheRest|ISO the rest/.test(gallery), 'ISO the rest must remain')
+  assert(/msg-preview|previewStep|onPreviewKey|Escape/.test(gallery), 'lightbox swipe/arrows/Esc must remain')
+  assert(/msg-filters|filter === f\.id/.test(gallery), 'filters must remain')
+  assert(/Fetching the full set|Could not load the set list|Offline and this set list/.test(gallery),
+    'loading/error/offline copy must remain')
+
+  // Lightbox scrim/meta must use theme-stable tokens (not flipping --ink/--bg-card)
+  const mainCss = read('src/assets/main.css')
+  assert(
+    /--scrim\s*:/.test(mainCss) && /--on-scrim\s*:/.test(mainCss),
+    'main.css must define fixed --scrim and --on-scrim tokens',
+  )
+  // Tokens live in :root fixed block and must not be remapped under dark theme
+  const darkBlock = mainCss.match(/:root\[data-theme="dark"\]\s*\{[\s\S]*?\n\}/)?.[0] || ''
+  assert(
+    !/--scrim\s*:/.test(darkBlock) && !/--on-scrim\s*:/.test(darkBlock),
+    'dark theme must not remap --scrim / --on-scrim (always-dark scrim + light text)',
+  )
+  assert(
+    /background:\s*var\(--scrim\)/.test(style) || /background:\s*var\(--scrim\);/.test(gallery),
+    'msg-preview must use var(--scrim), not color-mix(var(--ink))',
+  )
+  assert(
+    !/color-mix\([^)]*var\(--ink\)/.test(style.match(/\.msg-preview\s*\{[^}]+\}/)?.[0] || ''),
+    'msg-preview must not derive scrim from theme-flipping --ink',
+  )
+  assert(
+    /color:\s*var\(--on-scrim\)/.test(style.match(/\.msg-preview-meta\s*\{[^}]+\}/)?.[0] || ''),
+    'msg-preview-meta must use var(--on-scrim), not var(--bg-card)',
+  )
+  assert(
+    !/color:\s*var\(--bg-card\)/.test(style.match(/\.msg-preview-meta\s*\{[^}]+\}/)?.[0] || ''),
+    'msg-preview-meta must not use flipping --bg-card for text on scrim',
+  )
+
+  // No compact field written into masterSets / store showcase meta
+  assert(
+    !/compact:\s*|masterSets\[.*compact|showcaseMasterSet\([^)]*compact/.test(portfolioStore),
+    'portfolio store must not gain compact preference fields',
+  )
+
+  // Root panel must not bind a dead msg-compact class (density is grid-switched)
+  assert(
+    !/:class="\{\s*'msg-compact':\s*compact\s*\}"/.test(gallery)
+      && !/class="msg-panel msg-compact"/.test(gallery),
+    'must not bind unused root msg-compact class (compact uses msg-grid-compact)',
+  )
+
+  // Browser smoke contract: All cards long fixtures, stale Owned, Add-found E2E
+  const smoke = read('scripts/smoke/browser-smoke.mjs')
+  assert(
+    /All cards/i.test(smoke) && /hasLongNum/.test(smoke) && /hasLongName/.test(smoke),
+    'browser smoke must switch to All cards and assert long-name + long-number fixtures',
+  )
+  assert(
+    /Smoke Owned Stale Mark/.test(smoke)
+      && /staleIsOwned|stale-owned must be \.owned/.test(smoke)
+      && /Owned/.test(smoke),
+    'browser smoke must assert stale-owned fixture renders Owned (not Found/.got)',
+  )
+  assert(
+    /msg-add-found-btn/.test(smoke)
+      && /Add 1 to shelf|add-found/i.test(smoke)
+      && /storeHasCard|store owned count/.test(smoke),
+    'browser smoke must exercise Add found end-to-end into the seeded shelf store',
+  )
+  assert(
+    /needAfterAdd|reopen need count/.test(smoke)
+      && /did not reset to Comfortable/.test(smoke),
+    'browser smoke must verify collapse/reopen resets Comfortable with adjusted need counts',
+  )
+  assert(
+    /probeLightboxContrastDom|scrimDark|metaLight|contrastOk/.test(smoke)
+      && /dataset\.theme\s*=\s*['"]dark['"]/.test(smoke)
+      && /lightbox dark contrast/.test(smoke),
+    'browser smoke must switch to dark theme and assert lightbox scrim/meta contrast',
+  )
+  assert(
+    /getHits|intercept never fired|apiHits/.test(smoke)
+      && /browse:url:/.test(smoke)
+      && /smoke-ms-base|SMOKE_MS_SET_ID/.test(smoke),
+    'browser smoke must assert card intercept fired and clean durable browse:url fixture cache',
+  )
+
+  ok('master set compact mode v1 guards hold')
+})
diff --git a/scripts/evals/run-all.mjs b/scripts/evals/run-all.mjs
index 8fce3fd..5b5217a 100644
--- a/scripts/evals/run-all.mjs
+++ b/scripts/evals/run-all.mjs
@@ -10,6 +10,7 @@ const evals = [
   'scripts/evals/en-prices-fallback.mjs',
   'scripts/evals/route-safety.mjs',
   'scripts/evals/shelf-link.mjs',
+  'scripts/evals/master-set-compact-mode.mjs',
   'scripts/evals/backup-roundtrip.mjs',
   'scripts/evals/riftbound-graded.mjs',
   'scripts/evals/pricecharting-full-grades.mjs',
diff --git a/scripts/smoke/browser-smoke.mjs b/scripts/smoke/browser-smoke.mjs
index 3dda8d3..29a0083 100644
--- a/scripts/smoke/browser-smoke.mjs
+++ b/scripts/smoke/browser-smoke.mjs
@@ -233,6 +233,828 @@ async function cleanupSmokeShelves(page, shelves) {
   }
 }
 
+/** Fixture set id + cards for master-set compact gallery smoke (deterministic). */
+const SMOKE_MS_SET_ID = 'smoke-ms-base'
+const SMOKE_MS_CARDS = [
+  {
+    id: `${SMOKE_MS_SET_ID}-1`,
+    name: 'Smoke Bulbasaur',
+    number: '1',
+    set: { id: SMOKE_MS_SET_ID, name: 'Smoke Master Set' },
+    rarity: 'Common',
+    supertype: 'Pokémon',
+    images: { small: '', large: '' },
+  },
+  {
+    id: `${SMOKE_MS_SET_ID}-4`,
+    name: 'Smoke Charmander With A Very Long Collector Display Name That Should Clamp',
+    number: '4',
+    set: { id: SMOKE_MS_SET_ID, name: 'Smoke Master Set' },
+    rarity: 'Common',
+    supertype: 'Pokémon',
+    images: { small: '', large: '' },
+  },
+  {
+    id: `${SMOKE_MS_SET_ID}-99`,
+    name: 'Smoke Missing Rare',
+    number: '99',
+    set: { id: SMOKE_MS_SET_ID, name: 'Smoke Master Set' },
+    rarity: 'Rare',
+    supertype: 'Pokémon',
+    images: { small: '', large: '' },
+  },
+  {
+    id: `${SMOKE_MS_SET_ID}-tg`,
+    name: 'Smoke Long Number',
+    // Long collector number — must not overflow compact cell
+    number: 'TG12/TG30-EXTRA-LONG-COLLECTOR',
+    set: { id: SMOKE_MS_SET_ID, name: 'Smoke Master Set' },
+    rarity: 'Trainer Gallery',
+    supertype: 'Pokémon',
+    images: { small: '', large: '' },
+  },
+  {
+    id: `${SMOKE_MS_SET_ID}-owned-stale`,
+    name: 'Smoke Owned Stale Mark',
+    number: '7',
+    set: { id: SMOKE_MS_SET_ID, name: 'Smoke Master Set' },
+    rarity: 'Uncommon',
+    supertype: 'Pokémon',
+    images: { small: '', large: '' },
+  },
+  {
+    id: `${SMOKE_MS_SET_ID}-need2`,
+    name: 'Smoke Need Two',
+    number: '12',
+    set: { id: SMOKE_MS_SET_ID, name: 'Smoke Master Set' },
+    rarity: 'Common',
+    supertype: 'Pokémon',
+    images: { small: '', large: '' },
+  },
+]
+
+/**
+ * Seed one local shelf with a showcased master set + owned cards via Pinia.
+ * Includes a stale hunt mark on an already-owned card id.
+ */
+async function seedMasterSetShelf(page) {
+  await page.goto(`${BASE}/`, { waitUntil: 'domcontentloaded', timeout: 30_000 })
+  await page.waitForSelector('#app', { timeout: 10_000 })
+  await page.waitForFunction(() => {
+    const app = document.querySelector('#app')?.__vue_app__
+    const pinia = app?.config?.globalProperties?.$pinia
+    const s = pinia?._s?.get?.('portfolio')
+    return !!(s && s.initialized)
+  }, { timeout: 15_000 })
+  // Persist TCG prefs so the first-run loader does not cover later shelf clicks
+  await dismissTcgLoaderIfPresent(page)
+
+  return page.evaluate(async (setId, fixtureCards) => {
+    const app = document.querySelector('#app')?.__vue_app__
+    const pinia = app?.config?.globalProperties?.$pinia
+    const store = pinia._s.get('portfolio')
+    const stamp = Date.now()
+    const name = `Smoke MS Compact ${stamp}`
+
+    for (const p of [...(store.portfolios || [])]) {
+      if (/^Smoke MS Compact /.test(String(p?.name || ''))) store.deletePortfolio(p.id)
+    }
+
+    const shelf = store.createPortfolio(name, '#7c3aed')
+    const owned = fixtureCards.filter(c =>
+      c.id.endsWith('-1') || c.id.endsWith('-owned-stale') || c.id.endsWith('-4'),
+    )
+    for (const c of owned) {
+      store.addItem(shelf.id, {
+        type: 'card',
+        quantity: 1,
+        purchasePrice: 0,
+        purchaseDate: '',
+        notes: '',
+        cardId: c.id,
+        cardData: {
+          name: c.name,
+          number: c.number,
+          images: c.images || { small: '', large: '' },
+          set: { id: setId, name: 'Smoke Master Set' },
+          rarity: c.rarity,
+          supertype: c.supertype,
+        },
+        currentMarketPrice: 0,
+      })
+    }
+
+    const msKey = `pokemon:${String(setId).toLowerCase()}`
+    const staleOwnedId = fixtureCards.find(c => c.id.endsWith('-owned-stale'))?.id
+    store.showcaseMasterSet(shelf.id, msKey, {
+      name: 'Smoke Master Set',
+      game: 'pokemon',
+      total: fixtureCards.length,
+      setId,
+      lang: null,
+      // Stale mark on an owned card — gallery must exclude it from found/add-found
+      hunt: staleOwnedId ? { [staleOwnedId]: Date.now() } : {},
+    })
+    if (typeof store.persistNow === 'function') await store.persistNow()
+    return { id: shelf.id, name, msKey, setId, ownedCount: owned.length, total: fixtureCards.length }
+  }, SMOKE_MS_SET_ID, SMOKE_MS_CARDS)
+}
+
+/** Remove smoke fixture durable browse:url cache rows (and optional shelf). */
+async function cleanupMasterSetShelf(page, seeded) {
+  try {
+    await page.evaluate(async (id, setId) => {
+      const app = document.querySelector('#app')?.__vue_app__
+      const pinia = app?.config?.globalProperties?.$pinia
+      const store = pinia?._s?.get?.('portfolio')
+      if (store) {
+        for (const p of [...(store.portfolios || [])]) {
+          if (p.id === id || /^Smoke MS Compact /.test(String(p?.name || ''))) {
+            store.deletePortfolio(p.id)
+          }
+        }
+        if (typeof store.persistNow === 'function') await store.persistNow()
+      }
+
+      // Drop fake card-list durable cache so smoke never poisons offline browse
+      await new Promise((resolve) => {
+        const req = indexedDB.open('Rarebox')
+        req.onerror = () => resolve()
+        req.onsuccess = () => {
+          const idb = req.result
+          if (!idb.objectStoreNames.contains('state')) {
+            idb.close()
+            return resolve()
+          }
+          const tx = idb.transaction('state', 'readwrite')
+          const os = tx.objectStore('state')
+          const keysReq = os.getAllKeys()
+          keysReq.onsuccess = () => {
+            for (const key of keysReq.result || []) {
+              const k = String(key || '')
+              if (k.startsWith('browse:url:') && k.includes(setId)) os.delete(key)
+            }
+          }
+          tx.oncomplete = () => { idb.close(); resolve() }
+          tx.onerror = () => { idb.close(); resolve() }
+        }
+      })
+    }, seeded?.id, SMOKE_MS_SET_ID)
+  } catch {
+    // best-effort
+  }
+}
+
+/**
+ * Install request interception for the smoke master-set card list.
+ * Returns { dispose, getHits } — hits count fixture card-list responses.
+ */
+async function installMasterSetCardIntercept(page) {
+  let hits = 0
+  const handler = (req) => {
+    try {
+      const url = req.url()
+      // pokemontcg.io set cards: q=set.id:…
+      if (
+        url.includes('api.pokemontcg.io')
+        && url.includes('/cards')
+        && (url.includes(`set.id:${SMOKE_MS_SET_ID}`) || url.includes(`set.id%3A${SMOKE_MS_SET_ID}`))
+      ) {
+        hits += 1
+        const body = JSON.stringify({
+          data: SMOKE_MS_CARDS,
+          page: 1,
+          pageSize: 250,
+          count: SMOKE_MS_CARDS.length,
+          totalCount: SMOKE_MS_CARDS.length,
+        })
+        req.respond({
+          status: 200,
+          contentType: 'application/json',
+          headers: { 'access-control-allow-origin': '*' },
+          body,
+        })
+        return
+      }
+      // Do not stub /sets — empty responses would poison rarebox_en_sets localStorage.
+      // Card-list intercept above is enough for the gallery fetch path.
+      req.continue()
+    } catch {
+      try { req.continue() } catch {}
+    }
+  }
+  await page.setRequestInterception(true)
+  page.on('request', handler)
+  return {
+    getHits: () => hits,
+    dispose: async () => {
+      page.off('request', handler)
+      try { await page.setRequestInterception(false) } catch {}
+    },
+  }
+}
+
+/**
+ * Master-set compact gallery at 280px: All-cards long fixtures, owned stale
+ * status + preview, Add-found E2E, ≥44px targets, no overflow, reopen resets.
+ */
+/** Dismiss first-run TCG picker if present (blocks pointer events at z-index 9999). */
+async function dismissTcgLoaderIfPresent(page) {
+  const dismissed = await page.evaluate(() => {
+    const overlay = document.querySelector('.loader-overlay')
+    if (!overlay) return false
+    const start = [...overlay.querySelectorAll('button')].find(b =>
+      /Load \d+ TCG/i.test(b.textContent || '') && !b.disabled,
+    )
+    if (start) {
+      start.click()
+      return true
+    }
+    // Fallback: click overlay backdrop (emits ready)
+    overlay.click()
+    return true
+  })
+  if (dismissed) {
+    await page.waitForFunction(() => !document.querySelector('.loader-overlay'), { timeout: 5_000 })
+  }
+}
+
+/** Probe compact grid geometry / overflow (shared by need + All cards views). */
+function probeCompactGridDom() {
+  const items = [...document.querySelectorAll('.msg-compact-item')]
+  const primaries = [...document.querySelectorAll('.msg-compact-primary')]
+  const previews = [...document.querySelectorAll('.msg-compact-preview')]
+  const nums = [...document.querySelectorAll('.msg-compact-num')]
+  const names = [...document.querySelectorAll('.msg-compact-name')]
+
+  const rectOk = (el) => {
+    const r = el.getBoundingClientRect()
+    return r.width + 0.5 >= 44 && r.height + 0.5 >= 44
+  }
+  const overflowsCell = (el, cell) => {
+    if (!el || !cell) return false
+    const er = el.getBoundingClientRect()
+    const cr = cell.getBoundingClientRect()
+    // Allow 1px subpixel slack
+    return er.right > cr.right + 1 || er.left < cr.left - 1
+  }
+
+  let cellOverflow = false
+  for (const item of items) {
+    const num = item.querySelector('.msg-compact-num')
+    const name = item.querySelector('.msg-compact-name')
+    const primary = item.querySelector('.msg-compact-primary')
+    const preview = item.querySelector('.msg-compact-preview')
+    if (overflowsCell(num, primary) || overflowsCell(name, primary)) cellOverflow = true
+    if (preview) {
+      const pr = preview.getBoundingClientRect()
+      const ir = item.getBoundingClientRect()
+      if (pr.right > ir.right + 1 || pr.left < ir.left - 1) cellOverflow = true
+    }
+  }
+
+  const pageOverflow = document.documentElement.scrollWidth > window.innerWidth + 2
+  const toggle = document.querySelector('.msg-density-toggle')
+  const foundNote = document.querySelector('.msg-footer-note')?.textContent || ''
+  const addFound = document.querySelector('.msg-add-found-btn')?.textContent || ''
+  // Stale owned mark must not create a "found" footer by itself
+  const staleFoundLeak = /1 found|Add 1 to shelf/i.test(foundNote + ' ' + addFound)
+    && items.every(it => !it.classList.contains('got'))
+
+  let cols = 0
+  if (items.length) {
+    const top0 = items[0].getBoundingClientRect().top
+    cols = items.filter(it => Math.abs(it.getBoundingClientRect().top - top0) < 4).length
+  }
+
+  // Stale-owned fixture: must render Owned, never Found/.got
+  const staleItem = items.find((it) => {
+    const n = it.querySelector('.msg-compact-name')?.textContent || ''
+    return /Smoke Owned Stale Mark/i.test(n)
+  })
+  const staleStatus = (staleItem?.querySelector('.msg-compact-status')?.textContent || '').trim()
+  const staleClasses = staleItem ? [...staleItem.classList] : []
+
+  return {
+    compactCount: items.length,
+    primaryCount: primaries.length,
+    previewCount: previews.length,
+    allPrimary44: primaries.length > 0 && primaries.every(rectOk),
+    allPreview44: previews.length === 0 || previews.every(rectOk),
+    toggle44: toggle ? rectOk(toggle) : false,
+    cellOverflow,
+    pageOverflow,
+    cols,
+    hasLongNum: nums.some(n => /TG12|EXTRA-LONG/i.test(n.textContent || '')),
+    hasLongName: names.some(n => /Very Long Collector/i.test(n.textContent || '')),
+    staleFoundLeak,
+    stalePresent: !!staleItem,
+    staleStatus,
+    staleIsOwned: staleClasses.includes('owned'),
+    staleIsGot: staleClasses.includes('got'),
+    staleIsNeed: staleClasses.includes('need'),
+    ariaPressed: toggle?.getAttribute('aria-pressed') || '',
+    viewport: window.innerWidth,
+  }
+}
+
+/** Probe lightbox scrim/meta luminance + contrast (runs in page). */
+function probeLightboxContrastDom() {
+  const parse = (str) => {
+    const m = String(str || '').match(/rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*\)/i)
+    if (!m) return null
+    return { r: +m[1], g: +m[2], b: +m[3], a: m[4] != null ? +m[4] : 1 }
+  }
+  const lin = (c) => {
+    const x = c / 255
+    return x <= 0.03928 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4
+  }
+  const lum = ({ r, g, b }) => 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b)
+  const composite = (fg, bg) => {
+    const a = Math.min(1, Math.max(0, fg.a ?? 1))
+    return {
+      r: Math.round(fg.r * a + bg.r * (1 - a)),
+      g: Math.round(fg.g * a + bg.g * (1 - a)),
+      b: Math.round(fg.b * a + bg.b * (1 - a)),
+    }
+  }
+  const contrast = (l1, l2) => {
+    const hi = Math.max(l1, l2)
+    const lo = Math.min(l1, l2)
+    return (hi + 0.05) / (lo + 0.05)
+  }
+
+  const preview = document.querySelector('.msg-preview')
+  const meta = document.querySelector('.msg-preview-meta')
+  if (!preview || !meta) return { ok: false, reason: 'preview/meta missing' }
+
+  const scrimRaw = getComputedStyle(preview).backgroundColor
+  const metaRaw = getComputedStyle(meta).color
+  const pageBgRaw = getComputedStyle(document.documentElement).backgroundColor
+    || getComputedStyle(document.body).backgroundColor
+    || 'rgb(250, 246, 239)'
+
+  const scrim = parse(scrimRaw)
+  const metaC = parse(metaRaw)
+  const pageBg = parse(pageBgRaw) || { r: 250, g: 246, b: 239, a: 1 }
+  if (!scrim || !metaC) {
+    return { ok: false, reason: `unparsed colors scrim=${scrimRaw} meta=${metaRaw}` }
+  }
+
+  const scrimSolid = composite(scrim, pageBg)
+  const scrimL = lum(scrimSolid)
+  const metaL = lum(metaC)
+  const ratio = contrast(metaL, scrimL)
+  const theme = document.documentElement.dataset.theme || 'light'
+
+  return {
+    ok: true,
+    theme,
+    scrimRaw,
+    metaRaw,
+    scrimL,
+    metaL,
+    ratio,
+    // Scrim must stay dark (not cream/light) in both themes
+    scrimDark: scrimL < 0.35,
+    // Meta text must stay light on the dark scrim
+    metaLight: metaL > 0.55,
+    // WCAG AA-ish for large/bold UI text; require solid readability
+    contrastOk: ratio >= 4.5,
+  }
+}
+
+async function assertMasterSetCompactGallery(page, seeded) {
+  const intercept = await installMasterSetCardIntercept(page)
+  const addFoundCardId = `${SMOKE_MS_SET_ID}-need2`
+  const addFoundName = 'Smoke Need Two'
+  // Need-filter baseline: total − seeded owned. After one Add-found, need drops by 1.
+  const needBaseline = seeded.total - seeded.ownedCount
+  const needAfterAdd = needBaseline - 1
+  let themeRestore = null
+
+  try {
+    await page.setViewport({ width: 280, height: 900, isMobile: true, deviceScaleFactor: 2 })
+    await page.goto(`${BASE}/portfolio/${encodeURIComponent(seeded.id)}`, {
+      waitUntil: 'domcontentloaded',
+      timeout: 30_000,
+    })
+    await page.waitForSelector('#app', { timeout: 10_000 })
+    await page.waitForFunction((expected) => {
+      const text = document.body.innerText || ''
+      if (text.includes('Shelf not found')) return true
+      return text.includes(expected) || text.includes('Smoke Master Set')
+    }, { timeout: 15_000 }, seeded.name)
+
+    // First-run loader sits above the shelf and steals pointer events
+    await dismissTcgLoaderIfPresent(page)
+
+    const gate = await page.evaluate((expected) => {
+      const text = document.body.innerText || ''
+      return {
+        notFound: text.includes('Shelf not found'),
+        hasShelf: text.includes(expected) || text.includes('Smoke Master Set'),
+      }
+    }, seeded.name)
+    if (gate.notFound) throw new Error('master-set compact: shelf not found after seed')
+    if (!gate.hasShelf) throw new Error('master-set compact: seeded shelf title missing')
+
+    // Open gallery via stack control (DOM click — avoids overlay/coordinate flakiness)
+    await page.waitForFunction(() => {
+      const btns = [...document.querySelectorAll('button')]
+      return btns.some(b => /Show cards/i.test(b.textContent || ''))
+    }, { timeout: 10_000 })
+    await page.evaluate(() => {
+      const btn = [...document.querySelectorAll('button')].find(b => /Show cards/i.test(b.textContent || ''))
+      if (!btn) throw new Error('Show cards button missing')
+      btn.click()
+    })
+
+    await page.waitForSelector('.msg-panel', { timeout: 15_000 })
+    await page.waitForFunction(() => {
+      const loading = document.querySelector('.msg-loading')
+      const grid = document.querySelector('.msg-grid')
+      const err = document.querySelector('.msg-error')
+      return (!loading || loading.offsetParent === null) && (!!grid || !!err)
+    }, { timeout: 20_000 })
+
+    const errText = await page.evaluate(() => document.querySelector('.msg-error')?.textContent || '')
+    if (errText) throw new Error(`master-set compact: gallery error ${errText}`)
+
+    // Fixture card-list must come from our intercept (not live network / stale cache alone)
+    if (intercept.getHits() < 1) {
+      throw new Error('master-set compact: card API intercept never fired for smoke fixture set')
+    }
+
+    // Comfortable visible count (defaults to Not owned when set is incomplete)
+    const comfortableCount = await page.evaluate(() =>
+      document.querySelectorAll('.msg-grid:not(.msg-grid-compact) .msg-card').length,
+    )
+    if (comfortableCount < 1) throw new Error('master-set compact: comfortable grid empty')
+    if (comfortableCount !== needBaseline) {
+      throw new Error(
+        `master-set compact: comfortable need count expected ${needBaseline}, got ${comfortableCount}`,
+      )
+    }
+
+    // Toggle Compact via DOM click (Vue @click on the density control)
+    await page.waitForSelector('.msg-density-toggle', { timeout: 5_000 })
+    await page.evaluate(() => {
+      const t = document.querySelector('.msg-density-toggle')
+      if (!t || t.disabled) throw new Error('density toggle missing or disabled')
+      t.click()
+    })
+    await page.waitForSelector('[data-msg-compact-grid], .msg-grid-compact', { timeout: 5_000 })
+
+    const needProbe = await page.evaluate(probeCompactGridDom)
+
+    if (needProbe.compactCount !== comfortableCount) {
+      throw new Error(
+        `master-set compact: visible count mismatch comfortable=${comfortableCount} compact=${needProbe.compactCount}`,
+      )
+    }
+    if (needProbe.ariaPressed !== 'true') {
+      throw new Error('master-set compact: density toggle aria-pressed not true after Compact')
+    }
+    if (!needProbe.allPrimary44 || !needProbe.allPreview44 || !needProbe.toggle44) {
+      throw new Error(`master-set compact: target <44px (${JSON.stringify(needProbe)})`)
+    }
+    if (needProbe.cellOverflow) throw new Error('master-set compact: cell content overflow at 280px (need filter)')
+    if (needProbe.pageOverflow) throw new Error('master-set compact: page horizontal overflow at 280px')
+    if (needProbe.cols < 3 || needProbe.cols > 4) {
+      throw new Error(`master-set compact: expected 3–4 columns at 280px, got ${needProbe.cols}`)
+    }
+    if (needProbe.staleFoundLeak) {
+      throw new Error('master-set compact: stale owned hunt mark leaked into found/add-found count')
+    }
+    if (needProbe.previewCount < 1) {
+      throw new Error('master-set compact: expected separate preview controls on missing cards')
+    }
+
+    // ── All cards: long-name + long-number fixtures must be present, no overflow ──
+    await page.evaluate(() => {
+      const btn = [...document.querySelectorAll('.msg-filter-btn')].find(b =>
+        /All cards/i.test(b.textContent || ''),
+      )
+      if (!btn) throw new Error('All cards filter missing')
+      btn.click()
+    })
+    await page.waitForFunction((total) => {
+      return document.querySelectorAll('.msg-compact-item').length === total
+    }, { timeout: 5_000 }, seeded.total)
+
+    const allProbe = await page.evaluate(probeCompactGridDom)
+    if (allProbe.compactCount !== seeded.total) {
+      throw new Error(
+        `master-set compact All cards: expected ${seeded.total} items, got ${allProbe.compactCount}`,
+      )
+    }
+    if (!allProbe.hasLongNum) {
+      throw new Error('master-set compact All cards: long collector number fixture missing from DOM')
+    }
+    if (!allProbe.hasLongName) {
+      throw new Error('master-set compact All cards: long display name fixture missing from DOM')
+    }
+    if (allProbe.cellOverflow) {
+      throw new Error('master-set compact All cards: cell content overflow (long name/number)')
+    }
+    if (allProbe.pageOverflow) {
+      throw new Error('master-set compact All cards: page horizontal overflow at 280px')
+    }
+    if (!allProbe.allPrimary44 || !allProbe.allPreview44) {
+      throw new Error(`master-set compact All cards: target <44px (${JSON.stringify(allProbe)})`)
+    }
+
+    // Stale-marked owned fixture: Owned label, not Found/.got
+    if (!allProbe.stalePresent) {
+      throw new Error('master-set compact: stale-owned fixture not present on All cards')
+    }
+    if (!allProbe.staleIsOwned || allProbe.staleIsGot || allProbe.staleIsNeed) {
+      throw new Error(
+        `master-set compact: stale-owned must be .owned only (got classes owned=${allProbe.staleIsOwned} got=${allProbe.staleIsGot} need=${allProbe.staleIsNeed})`,
+      )
+    }
+    if (!/^Owned$/i.test(allProbe.staleStatus) || /Found|Need/i.test(allProbe.staleStatus)) {
+      throw new Error(
+        `master-set compact: stale-owned status must be "Owned", got "${allProbe.staleStatus}"`,
+      )
+    }
+
+    // Owned primary opens/closes preview (stale-owned fixture)
+    await page.evaluate(() => {
+      const items = [...document.querySelectorAll('.msg-compact-item')]
+      const stale = items.find((it) =>
+        /Smoke Owned Stale Mark/i.test(it.querySelector('.msg-compact-name')?.textContent || ''),
+      )
+      const primary = stale?.querySelector('.msg-compact-primary')
+      if (!primary) throw new Error('stale-owned primary missing')
+      primary.click()
+    })
+    await page.waitForSelector('.msg-preview', { timeout: 5_000 })
+    const ownedPreviewMeta = await page.evaluate(() => {
+      const name = document.querySelector('.msg-preview-name')?.textContent || ''
+      return { name }
+    })
+    if (!/Smoke Owned Stale Mark/i.test(ownedPreviewMeta.name)) {
+      throw new Error(`master-set compact: owned primary preview wrong card (${ownedPreviewMeta.name})`)
+    }
+
+    // Light-theme lightbox: dark scrim + light meta
+    const lightLb = await page.evaluate(probeLightboxContrastDom)
+    if (!lightLb.ok) throw new Error(`master-set compact lightbox light: ${lightLb.reason}`)
+    if (!lightLb.scrimDark || !lightLb.metaLight || !lightLb.contrastOk) {
+      throw new Error(`master-set compact lightbox light contrast fail (${JSON.stringify(lightLb)})`)
+    }
+
+    // Dark theme must keep the same always-dark scrim / always-light meta (no invert)
+    themeRestore = await page.evaluate(() => {
+      const prev = {
+        pref: (() => { try { return localStorage.getItem('rarebox_theme') } catch { return null } })(),
+        theme: document.documentElement.dataset.theme || 'light',
+      }
+      try { localStorage.setItem('rarebox_theme', 'dark') } catch { /* private */ }
+      document.documentElement.dataset.theme = 'dark'
+      const meta = document.querySelector('meta[name="theme-color"]')
+      if (meta) meta.setAttribute('content', '#16140e')
+      window.dispatchEvent(new CustomEvent('rarebox-theme', { detail: 'dark' }))
+      return prev
+    })
+    await page.waitForFunction(() => document.documentElement.dataset.theme === 'dark', { timeout: 3_000 })
+
+    const darkLb = await page.evaluate(probeLightboxContrastDom)
+    if (!darkLb.ok) throw new Error(`master-set compact lightbox dark: ${darkLb.reason}`)
+    if (!darkLb.scrimDark || !darkLb.metaLight || !darkLb.contrastOk) {
+      throw new Error(`master-set compact lightbox dark contrast fail (${JSON.stringify(darkLb)})`)
+    }
+    // Guard the exact regression: scrim must not become light when --ink flips cream
+    if (darkLb.scrimL > 0.35) {
+      throw new Error(`master-set compact: dark-theme scrim too light (L=${darkLb.scrimL})`)
+    }
+    if (darkLb.metaL < 0.55) {
+      throw new Error(`master-set compact: dark-theme meta too dark (L=${darkLb.metaL})`)
+    }
+
+    // Restore prior theme before closing preview
+    await page.evaluate((prev) => {
+      const pref = prev?.pref
+      if (pref == null) {
+        try { localStorage.removeItem('rarebox_theme') } catch { /* private */ }
+      } else {
+        try { localStorage.setItem('rarebox_theme', pref) } catch { /* private */ }
+      }
+      const t = prev?.theme === 'dark' ? 'dark' : 'light'
+      document.documentElement.dataset.theme = t
+      const meta = document.querySelector('meta[name="theme-color"]')
+      if (meta) meta.setAttribute('content', t === 'dark' ? '#16140e' : '#faf6ef')
+      window.dispatchEvent(new CustomEvent('rarebox-theme', { detail: t }))
+    }, themeRestore)
+    themeRestore = null
+
+    await page.evaluate(() => {
+      document.querySelector('.msg-preview-close')?.click()
+    })
+    await page.waitForFunction(() => !document.querySelector('.msg-preview'), { timeout: 5_000 })
+
+    // Missing-card magnifier preview still works
+    await page.evaluate(() => {
+      const prev = document.querySelector('.msg-compact-item.need .msg-compact-preview')
+      if (!prev) throw new Error('need preview control missing')
+      prev.click()
+    })
+    await page.waitForSelector('.msg-preview', { timeout: 5_000 })
+    await page.evaluate(() => {
+      document.querySelector('.msg-preview-close')?.click()
+    })
+    await page.waitForFunction(() => !document.querySelector('.msg-preview'), { timeout: 5_000 })
+
+    // ── Add found E2E: mark one missing card → Add N to shelf → store + UI ──
+    const markResult = await page.evaluate((targetName) => {
+      const items = [...document.querySelectorAll('.msg-compact-item.need')]
+      const target = items.find((it) =>
+        (it.querySelector('.msg-compact-name')?.textContent || '').includes(targetName),
+      )
+      const primary = target?.querySelector('.msg-compact-primary')
+      if (!primary) return { ok: false, reason: `need primary for ${targetName} missing` }
+      primary.click()
+      return { ok: true }
+    }, addFoundName)
+    if (!markResult.ok) throw new Error(`master-set compact mark: ${markResult.reason}`)
+    await page.waitForFunction(() => !!document.querySelector('.msg-compact-item.got'), { timeout: 5_000 })
+
+    const afterMark = await page.evaluate((targetName) => {
+      const gotItems = [...document.querySelectorAll('.msg-compact-item.got')]
+      const gotTarget = gotItems.find((it) =>
+        (it.querySelector('.msg-compact-name')?.textContent || '').includes(targetName),
+      )
+      const status = (gotTarget?.querySelector('.msg-compact-status')?.textContent || '').trim()
+      const footer = document.querySelector('.msg-footer-note')?.textContent || ''
+      const addBtn = document.querySelector('.msg-add-found-btn')?.textContent || ''
+      return { got: gotItems.length, status, footer, addBtn }
+    }, addFoundName)
+    if (afterMark.got < 1) throw new Error('master-set compact: mark found did not apply got state')
+    if (!/^Found$/i.test(afterMark.status)) {
+      throw new Error(`master-set compact: marked card status expected Found, got "${afterMark.status}"`)
+    }
+    if (!/1 found/i.test(afterMark.footer) || !/Add 1 to shelf/i.test(afterMark.addBtn)) {
+      throw new Error(
+        `master-set compact: add-found footer missing after mark (footer="${afterMark.footer}" btn="${afterMark.addBtn}")`,
+      )
+    }
+
+    await page.evaluate(() => {
+      const btn = document.querySelector('.msg-add-found-btn')
+      if (!btn || btn.disabled) throw new Error('Add N to shelf button missing or disabled')
+      btn.click()
+    })
+    await page.waitForFunction(() => {
+      const footer = document.querySelector('.msg-footer')
+      const got = document.querySelector('.msg-compact-item.got')
+      return !footer && !got
+    }, { timeout: 5_000 })
+
+    const afterAdd = await page.evaluate((targetName, cardId, shelfId) => {
+      const items = [...document.querySelectorAll('.msg-compact-item')]
+      const target = items.find((it) =>
+        (it.querySelector('.msg-compact-name')?.textContent || '').includes(targetName),
+      )
+      const status = (target?.querySelector('.msg-compact-status')?.textContent || '').trim()
+      const classes = target ? [...target.classList] : []
+      const footer = document.querySelector('.msg-footer-note')?.textContent || ''
+      const addBtn = document.querySelector('.msg-add-found-btn')?.textContent || ''
+      const head = document.querySelector('.msg-head-sub')?.textContent || ''
+
+      const app = document.querySelector('#app')?.__vue_app__
+      const pinia = app?.config?.globalProperties?.$pinia
+      const store = pinia?._s?.get?.('portfolio')
+      const shelf = (store?.portfolios || []).find(p => p.id === shelfId)
+      const ownedIds = (shelf?.items || []).map(i => i.cardId).filter(Boolean)
+      const hunt = shelf?.masterSets
+        ? Object.values(shelf.masterSets).find(ms => ms?.hunt)?.hunt || {}
+        : {}
+
+      return {
+        targetPresent: !!target,
+        status,
+        isOwned: classes.includes('owned'),
+        isGot: classes.includes('got'),
+        footer,
+        addBtn,
+        head,
+        storeHasCard: ownedIds.includes(cardId),
+        storeOwnedCount: ownedIds.length,
+        huntStillHasCard: Object.prototype.hasOwnProperty.call(hunt, cardId),
+      }
+    }, addFoundName, addFoundCardId, seeded.id)
+
+    if (!afterAdd.targetPresent) {
+      throw new Error('master-set compact: added card missing from All cards grid')
+    }
+    if (!afterAdd.isOwned || afterAdd.isGot || !/^Owned$/i.test(afterAdd.status)) {
+      throw new Error(
+        `master-set compact: after Add found card must be Owned (status="${afterAdd.status}" owned=${afterAdd.isOwned} got=${afterAdd.isGot})`,
+      )
+    }
+    if (afterAdd.footer || afterAdd.addBtn) {
+      throw new Error('master-set compact: footer/add-found must clear after Add found')
+    }
+    if (!afterAdd.storeHasCard) {
+      throw new Error(`master-set compact: shelf store missing added cardId ${addFoundCardId}`)
+    }
+    if (afterAdd.storeOwnedCount !== seeded.ownedCount + 1) {
+      throw new Error(
+        `master-set compact: store owned count expected ${seeded.ownedCount + 1}, got ${afterAdd.storeOwnedCount}`,
+      )
+    }
+    if (afterAdd.huntStillHasCard) {
+      throw new Error('master-set compact: hunt mark for added card was not cleared')
+    }
+    // Header owned tally should reflect the new card (N/M owned)
+    const ownedHeadRe = new RegExp(`${seeded.ownedCount + 1}\\s*/\\s*${seeded.total}\\s*owned`, 'i')
+    if (!ownedHeadRe.test(afterAdd.head)) {
+      throw new Error(
+        `master-set compact: header owned tally not updated after Add found (head="${afterAdd.head}")`,
+      )
+    }
+
+    // Collapse gallery and reopen — compact must reset to Comfortable; need count −1
+    await page.evaluate(() => {
+      const hide = [...document.querySelectorAll('button')].find(b => /Hide cards/i.test(b.textContent || ''))
+      if (!hide) throw new Error('Hide cards missing')
+      hide.click()
+    })
+    await page.waitForFunction(() => !document.querySelector('.msg-panel'), { timeout: 5_000 })
+
+    await page.evaluate(() => {
+      const show = [...document.querySelectorAll('button')].find(b => /Show cards/i.test(b.textContent || ''))
+      if (!show) throw new Error('Show cards missing on reopen')
+      show.click()
+    })
+    await page.waitForSelector('.msg-panel', { timeout: 10_000 })
+    await page.waitForFunction(() => {
+      const loading = document.querySelector('.msg-loading')
+      const grid = document.querySelector('.msg-grid')
+      return (!loading || loading.offsetParent === null) && !!grid
+    }, { timeout: 15_000 })
+
+    const reopened = await page.evaluate(() => {
+      const toggle = document.querySelector('.msg-density-toggle')
+      const compactGrid = document.querySelector('.msg-grid-compact')
+      const comfortGrid = document.querySelector('.msg-grid:not(.msg-grid-compact)')
+      const head = document.querySelector('.msg-head-sub')?.textContent || ''
+      const footer = document.querySelector('.msg-footer')
+      return {
+        ariaPressed: toggle?.getAttribute('aria-pressed') || '',
+        label: (toggle?.textContent || '').trim(),
+        hasCompact: !!compactGrid,
+        hasComfort: !!comfortGrid,
+        comfortCount: comfortGrid ? comfortGrid.querySelectorAll('.msg-card').length : 0,
+        head,
+        hasFooter: !!footer,
+      }
+    })
+    if (reopened.ariaPressed === 'true' || reopened.hasCompact) {
+      throw new Error(`master-set compact: reopen did not reset to Comfortable (${JSON.stringify(reopened)})`)
+    }
+    if (!reopened.hasComfort || reopened.comfortCount !== needAfterAdd) {
+      throw new Error(
+        `master-set compact: reopen need count expected ${needAfterAdd} after Add found (${JSON.stringify(reopened)})`,
+      )
+    }
+    if (reopened.hasFooter) {
+      throw new Error('master-set compact: reopen must not resurrect add-found footer')
+    }
+    if (!ownedHeadRe.test(reopened.head)) {
+      throw new Error(
+        `master-set compact: reopen header owned tally wrong (head="${reopened.head}")`,
+      )
+    }
+
+    console.log(
+      `✓ master-set compact gallery @280px (${needProbe.cols} cols, need ${comfortableCount}→${needAfterAdd}, all=${seeded.total}, apiHits=${intercept.getHits()})`,
+    )
+  } finally {
+    // Best-effort theme restore if a mid-test failure left dark mode on
+    if (themeRestore) {
+      try {
+        await page.evaluate((prev) => {
+          const pref = prev?.pref
+          if (pref == null) {
+            try { localStorage.removeItem('rarebox_theme') } catch { /* private */ }
+          } else {
+            try { localStorage.setItem('rarebox_theme', pref) } catch { /* private */ }
+          }
+          const t = prev?.theme === 'dark' ? 'dark' : 'light'
+          document.documentElement.dataset.theme = t
+          const meta = document.querySelector('meta[name="theme-color"]')
+          if (meta) meta.setAttribute('content', t === 'dark' ? '#16140e' : '#faf6ef')
+          window.dispatchEvent(new CustomEvent('rarebox-theme', { detail: t }))
+        }, themeRestore)
+      } catch { /* ignore */ }
+    }
+    await intercept.dispose()
+  }
+}
+
 /**
  * Hard-load a seeded shelf (no false not-found), then SPA-navigate A→B during the
  * leave transition and assert B title/content with no A identity bleed.
@@ -351,6 +1173,15 @@ async function main() {
         await cleanupSmokeShelves(page, seeded)
       }
 
+      // Master-set compact gallery: Pinia-seeded showcase + intercepted set cards
+      let msSeeded = null
+      try {
+        msSeeded = await seedMasterSetShelf(page)
+        await assertMasterSetCompactGallery(page, msSeeded)
+      } finally {
+        await cleanupMasterSetShelf(page, msSeeded)
+      }
+
       await page.setViewport({ width: 280, height: 700, isMobile: true, deviceScaleFactor: 2 })
       for (const route of ['/', '/search', '/sets', '/settings']) await assertPage(page, route)
       await assertMissingShelf(page, '/portfolio/smoke-missing-shelf-id')
diff --git a/src/assets/main.css b/src/assets/main.css
index e0d348c..d80bf4a 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -62,6 +62,9 @@
   --accent-text: #b8860b;      /* readable gold text on the page surface */
   --danger-text: #c93540;      /* readable red text on the page surface */
   --scroll-thumb: #d8d0bf;
+  /* Lightbox / modal scrims stay dark in both themes; text on them stays light */
+  --scrim: rgba(20, 20, 20, 0.78);
+  --on-scrim: #faf6ef;
 }
 
 /* ── Dark Tactile ─────────────────────────────────────────────────────
diff --git a/src/components/MasterSetGallery.vue b/src/components/MasterSetGallery.vue
index 162ea3f..56dca6f 100644
--- a/src/components/MasterSetGallery.vue
+++ b/src/components/MasterSetGallery.vue
@@ -11,7 +11,25 @@
         </div>
         <div class="msg-head-actions">
           <span v-if="foundToday" class="sticker msg-today">{{ foundToday }} found today <RbIcon name="confetti" :size="13" /></span>
-          <button v-if="needCount && !loading" class="btn btn-secondary btn-sm" :disabled="isoDone" @click="isoTheRest">
+          <!-- Session-only density: component-instance state. Resets when gallery
+               is hidden/unmounted/reopened (parent v-if). No Pinia/Dexie/localStorage. -->
+          <button
+            type="button"
+            class="msg-density-toggle"
+            :aria-pressed="compact ? 'true' : 'false'"
+            :aria-label="compact ? 'Switch to comfortable layout' : 'Switch to compact layout'"
+            :disabled="loading"
+            @click="compact = !compact"
+          >
+            {{ compact ? 'Comfortable' : 'Compact' }}
+          </button>
+          <button
+            v-if="needCount && !loading"
+            type="button"
+            class="btn btn-secondary msg-iso-btn"
+            :disabled="isoDone"
+            @click="isoTheRest"
+          >
             {{ isoDone ? '✓ On your wantlist' : `🎯 ISO the rest (${needCount})` }}
           </button>
         </div>
@@ -20,7 +38,15 @@
       <!-- Filters — only when there's actually something to filter (i.e.
            you don't own the whole set yet) -->
       <div v-if="!loading && hasUnowned" class="msg-filters">
-        <button v-for="f in filters" :key="f.id" class="msg-filter-btn" :class="{ active: filter === f.id }" @click="filter = f.id">
+        <button
+          v-for="f in filters"
+          :key="f.id"
+          type="button"
+          class="msg-filter-btn"
+          :class="{ active: filter === f.id }"
+          :aria-pressed="filter === f.id ? 'true' : 'false'"
+          @click="filter = f.id"
+        >
           {{ f.label }} <span class="msg-filter-count">{{ f.count }}</span>
         </button>
       </div>
@@ -30,27 +56,84 @@
         <div v-if="loading" class="msg-loading">Fetching the full set…</div>
         <div v-else-if="error" class="msg-error">{{ error }}</div>
         <template v-else>
-          <p v-if="needCount" class="msg-hint">Tap a card you don't own to mark it as found — then add your finds to the shelf below.</p>
-          <div class="msg-grid">
-          <div
-            v-for="card in visibleCards"
-            :key="card.id"
-            class="msg-card"
-            :class="{ need: !isOwned(card) && !marks[card.id], got: marks[card.id] }"
-            @click="tapCard(card)"
-          >
-            <div class="msg-img-wrap">
-              <img v-if="card.images?.small" :src="card.images.small" :alt="card.name" loading="lazy" class="msg-img" />
-              <div v-else class="msg-img-ph">{{ card.number }}</div>
-              <span v-if="!isOwned(card) && !marks[card.id]" class="msg-tag msg-tag-need">NOT OWNED</span>
-              <span v-else-if="marks[card.id]" class="msg-tag msg-tag-got">FOUND ✓</span>
+          <p v-if="needCount" class="msg-hint">
+            {{ compact
+              ? 'Tap a number you don\'t own to mark it found — preview via the magnifier. Add finds below.'
+              : 'Tap a card you don\'t own to mark it as found — then add your finds to the shelf below.' }}
+          </p>
+
+          <!-- Comfortable (default): image grid -->
+          <div v-if="!compact" class="msg-grid">
+            <div
+              v-for="card in visibleCards"
+              :key="card.id"
+              class="msg-card"
+              :class="{ need: !isOwned(card) && !marks[card.id], got: marks[card.id] && !isOwned(card) }"
+              @click="tapCard(card)"
+            >
+              <div class="msg-img-wrap">
+                <img v-if="card.images?.small" :src="card.images.small" :alt="card.name" loading="lazy" class="msg-img" />
+                <div v-else class="msg-img-ph">{{ card.number }}</div>
+                <span v-if="!isOwned(card) && !marks[card.id]" class="msg-tag msg-tag-need">NOT OWNED</span>
+                <span v-else-if="marks[card.id] && !isOwned(card)" class="msg-tag msg-tag-got">FOUND ✓</span>
+              </div>
+              <div class="msg-card-name">{{ card.name }}</div>
+              <div class="msg-card-num">#{{ card.number }}</div>
+              <!-- Owned cards enlarge on tap; not-owned tap marks found, so
+                   they get an explicit button to show the card to a vendor -->
+              <button
+                v-if="!isOwned(card)"
+                type="button"
+                class="msg-enlarge"
+                @click.stop="preview = card"
+              ><RbIcon name="magnifier" :size="13" /> Show bigger</button>
             </div>
-            <div class="msg-card-name">{{ card.name }}</div>
-            <div class="msg-card-num">#{{ card.number }}</div>
-            <!-- Owned cards enlarge on tap; not-owned tap marks found, so
-                 they get an explicit button to show the card to a vendor -->
-            <button v-if="!isOwned(card)" class="msg-enlarge" @click.stop="preview = card"><RbIcon name="magnifier" :size="13" /> Show bigger</button>
           </div>
+
+          <!-- Compact: number-first cells from the same canonical visibleCards
+               only — never synthetic 1..setSize placeholders. No extra fetch. -->
+          <div v-else class="msg-grid msg-grid-compact" data-msg-compact-grid>
+            <div
+              v-for="card in visibleCards"
+              :key="card.id"
+              class="msg-compact-item"
+              :class="{
+                need: !isOwned(card) && !marks[card.id],
+                got: marks[card.id] && !isOwned(card),
+                owned: isOwned(card),
+              }"
+            >
+              <button
+                type="button"
+                class="msg-compact-primary"
+                :aria-label="compactPrimaryLabel(card)"
+                :aria-pressed="isOwned(card) ? undefined : (marks[card.id] ? 'true' : 'false')"
+                @click="tapCard(card)"
+              >
+                <span class="msg-compact-num" :title="card.number != null && card.number !== '' ? `#${card.number}` : undefined">#{{ card.number }}</span>
+                <span class="msg-compact-name" :title="card.name || undefined">{{ card.name }}</span>
+                <span
+                  class="msg-compact-status"
+                  :class="{
+                    'is-owned': isOwned(card),
+                    'is-need': !isOwned(card) && !marks[card.id],
+                    'is-found': marks[card.id] && !isOwned(card),
+                  }"
+                >{{ compactStatusLabel(card) }}</span>
+              </button>
+              <!-- Missing preview: separate non-overlapping ≥44px control.
+                   Label text hides at narrow widths (icon-only); aria-label stays. -->
+              <button
+                v-if="!isOwned(card)"
+                type="button"
+                class="msg-compact-preview"
+                :aria-label="`Preview ${card.name || 'card'} #${card.number || ''}`"
+                @click="preview = card"
+              >
+                <RbIcon name="magnifier" :size="16" />
+                <span class="msg-compact-preview-txt">View</span>
+              </button>
+            </div>
           </div>
         </template>
       </div>
@@ -58,7 +141,7 @@
       <!-- Footer: promote the day's finds to the shelf -->
       <div v-if="markedCards.length" class="msg-footer">
         <span class="msg-footer-note">{{ markedCards.length }} found — adding sets today's date as the purchase date</span>
-        <button class="btn btn-primary" :disabled="adding" @click="addFound">{{ adding ? 'Adding…' : `Add ${markedCards.length} to shelf` }}</button>
+        <button type="button" class="btn btn-primary msg-add-found-btn" :disabled="adding" @click="addFound">{{ adding ? 'Adding…' : `Add ${markedCards.length} to shelf` }}</button>
       </div>
 
     <!-- Card preview lightbox — big enough to show a vendor. Swipe (or
@@ -72,7 +155,7 @@
         @touchstart.passive="onPreviewTouchStart"
         @touchend.passive="onPreviewTouchEnd"
       >
-        <button v-if="previewList.length > 1" class="msg-preview-nav msg-preview-nav-prev" @click.stop="previewStep(-1)" aria-label="Previous card">‹</button>
+        <button v-if="previewList.length > 1" type="button" class="msg-preview-nav msg-preview-nav-prev" @click.stop="previewStep(-1)" aria-label="Previous card">‹</button>
         <div class="msg-preview-inner" @click.stop>
           <transition :name="slideDir < 0 ? 'msg-slide-r' : 'msg-slide-l'" mode="out-in">
             <img :key="preview.id" :src="preview.images?.large || preview.images?.small" :alt="preview.name" class="msg-preview-img" />
@@ -84,9 +167,9 @@
               {{ previewIndex + 1 }} / {{ previewList.length }} {{ isOwned(preview) ? 'owned' : 'still needed' }} · swipe for next
             </div>
           </div>
-          <button class="msg-preview-close" @click="preview = null" aria-label="Close">✕</button>
+          <button type="button" class="msg-preview-close" @click="preview = null" aria-label="Close">✕</button>
         </div>
-        <button v-if="previewList.length > 1" class="msg-preview-nav msg-preview-nav-next" @click.stop="previewStep(1)" aria-label="Next card">›</button>
+        <button v-if="previewList.length > 1" type="button" class="msg-preview-nav msg-preview-nav-next" @click.stop="previewStep(1)" aria-label="Next card">›</button>
       </div>
     </Teleport>
   </div>
@@ -111,6 +194,11 @@ const filter = ref('all')
 const adding = ref(false)
 const preview = ref(null)
 
+// Session-only density preference (v1). Component-instance ref — resets when
+// the gallery is hidden/unmounted/reopened. Do not write Pinia, Dexie, or
+// localStorage/sessionStorage for this flag.
+const compact = ref(false)
+
 // Owned matching: cardId when the item has one, otherwise name|number
 // (items added before Browse stored cardIds), otherwise bare name (items
 // added before card numbers were stored)
@@ -132,11 +220,15 @@ function isOwned(card) {
 }
 const ownedCount = computed(() => cards.value.filter(c => isOwned(c)).length)
 const needCount = computed(() => cards.value.filter(c => !isOwned(c) && !props.marks[c.id]).length)
-const markedCards = computed(() => cards.value.filter(c => props.marks[c.id]))
+
+// Safe marked set: only marks that are still not owned. Prevents stale-mark
+// duplication when a card became owned elsewhere (Add found / other path).
+// foundToday, filter counts, and footer all use this set.
+const markedCards = computed(() => cards.value.filter(c => props.marks[c.id] && !isOwned(c)))
 const hasUnowned = computed(() => cards.value.some(c => !isOwned(c)))
 const foundToday = computed(() => {
   const dayStart = new Date(); dayStart.setHours(0, 0, 0, 0)
-  return Object.values(props.marks).filter(ts => ts >= dayStart.getTime()).length
+  return markedCards.value.filter(c => props.marks[c.id] >= dayStart.getTime()).length
 })
 
 // Owned tab dropped — the header already shows "N/M owned"
@@ -152,9 +244,23 @@ const visibleCards = computed(() => {
   return cards.value
 })
 
+function compactStatusLabel(card) {
+  if (isOwned(card)) return 'Owned'
+  if (props.marks[card.id]) return 'Found'
+  return 'Need'
+}
+
+function compactPrimaryLabel(card) {
+  const num = card.number != null && card.number !== '' ? `#${card.number}` : 'card'
+  const name = card.name || 'Unknown'
+  if (isOwned(card)) return `Preview owned ${name} ${num}`
+  if (props.marks[card.id]) return `Unmark found ${name} ${num}`
+  return `Mark found ${name} ${num}`
+}
+
 function tapCard(card) {
   // Owned cards enlarge for admiring; missing ones toggle the found mark
-  // (they enlarge via the explicit "Show bigger" button instead)
+  // (they enlarge via the explicit "Show bigger" / compact preview control)
   if (isOwned(card)) { preview.value = card; return }
   emit('toggle-mark', card.id)
 }
@@ -303,6 +409,7 @@ onMounted(async () => {
   align-items: flex-start;
   justify-content: space-between;
   gap: 12px;
+  flex-wrap: wrap;
   padding: 16px 18px 10px;
 }
 .msg-title { font-size: 18px; font-weight: 800; }
@@ -314,15 +421,67 @@ onMounted(async () => {
   border: 1.5px solid var(--ink);
   border-radius: 99px;
 }
-.msg-head-actions { display: flex; align-items: center; gap: 10px; }
+.msg-head-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
 .msg-today { font-size: 10.5px; }
 
-.msg-filters { display: flex; gap: 8px; padding: 0 18px 12px; }
+/* Density toggle — session-only; ≥44px hit target */
+.msg-density-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 44px;
+  min-height: 44px;
+  padding: 8px 14px;
+  font-size: 12.5px;
+  font-weight: 800;
+  font-family: inherit;
+  color: var(--ink);
+  background: var(--bg-card);
+  border: var(--bw) solid var(--ink);
+  border-radius: 99px;
+  box-shadow: var(--shadow-pressed);
+  cursor: pointer;
+  transition: background 0.12s, box-shadow 0.1s, transform 0.1s;
+}
+.msg-density-toggle:active:not(:disabled) {
+  box-shadow: none;
+  transform: translate(1px, 1px);
+}
+.msg-density-toggle[aria-pressed="true"] {
+  background: var(--accent);
+  color: var(--on-accent);
+}
+.msg-density-toggle:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+/* ISO — local ≥44px without changing global .btn-sm */
+.msg-iso-btn {
+  min-height: 44px;
+  min-width: 44px;
+  padding: 8px 14px;
+}
+
+.msg-filters {
+  display: flex;
+  gap: 8px;
+  padding: 0 18px 12px;
+  flex-wrap: wrap;
+}
 .msg-filter-btn {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: 7px;
-  padding: 7px 14px;
+  min-height: 44px;
+  min-width: 44px;
+  padding: 8px 14px;
   font-size: 12.5px;
   font-weight: 700;
   font-family: inherit;
@@ -344,7 +503,10 @@ onMounted(async () => {
   background: var(--bg-secondary);
   color: var(--text-secondary);
 }
-.msg-filter-btn.active .msg-filter-count { background: rgba(20, 20, 20, 0.15); color: var(--on-accent); }
+.msg-filter-btn.active .msg-filter-count {
+  background: var(--bg-card);
+  color: var(--ink);
+}
 
 .msg-grid-wrap { overflow-y: auto; overscroll-behavior: contain; padding: 4px 18px 18px; flex: 1; }
 .msg-hint { font-size: 12px; color: var(--text-secondary); font-weight: 600; margin: 0 0 12px; }
@@ -375,8 +537,12 @@ onMounted(async () => {
    tap and leave cards dimmed inconsistently */
 @media (hover: hover) {
   .msg-filter-btn:hover { background: var(--bg-hover); }
+  .msg-density-toggle:hover:not(:disabled) { background: var(--bg-hover); }
+  .msg-density-toggle[aria-pressed="true"]:hover:not(:disabled) { background: var(--accent); }
   .msg-card.need:hover .msg-img { filter: grayscale(0.6) brightness(0.85); }
   .msg-enlarge:hover { background: var(--bg-hover); }
+  .msg-compact-primary:hover { background: var(--bg-hover); }
+  .msg-compact-preview:hover { background: var(--bg-hover); }
 }
 
 .msg-tag {
@@ -401,7 +567,9 @@ onMounted(async () => {
 .msg-enlarge {
   margin-top: 6px;
   width: 100%;
-  padding: 9px 8px;
+  min-width: 44px;
+  min-height: 44px;
+  padding: 10px 8px;
   font-size: 11px;
   font-weight: 800;
   font-family: inherit;
@@ -414,12 +582,155 @@ onMounted(async () => {
 }
 .msg-enlarge:active { box-shadow: none; transform: translate(1px, 1px); }
 
-/* Lightbox */
+/* ── Compact grid: number-first, no card images, same visibleCards ──
+   minmax(60px) keeps tracks wide enough for ≥44px targets + clamped text.
+   At ~280px viewport (~244px grid content after panel padding), auto-fill
+   yields 3 columns (4 when content ≥ ~258px). No hard max-column cap. */
+.msg-grid-compact {
+  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
+  gap: 8px;
+  max-width: 100%;
+}
+.msg-compact-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+}
+.msg-compact-primary {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: flex-start;
+  gap: 2px;
+  width: 100%;
+  min-width: 44px;
+  min-height: 44px;
+  max-width: 100%;
+  padding: 6px 5px;
+  text-align: left;
+  font-family: inherit;
+  color: var(--ink);
+  background: var(--bg-card);
+  border: var(--bw) solid var(--ink);
+  border-radius: 8px;
+  box-shadow: var(--shadow-pressed);
+  cursor: pointer;
+  overflow: hidden;
+  transition: background 0.12s, box-shadow 0.1s, transform 0.1s;
+}
+.msg-compact-primary:active {
+  box-shadow: none;
+  transform: translate(1px, 1px);
+}
+.msg-compact-item.need .msg-compact-primary {
+  border-style: dashed;
+  background: var(--bg-secondary);
+}
+.msg-compact-item.got .msg-compact-primary {
+  border-color: var(--accent-text);
+  box-shadow: var(--shadow-pressed), 0 0 0 2px var(--accent);
+}
+.msg-compact-item.owned .msg-compact-primary {
+  background: var(--bg-card);
+}
+/* Long collector numbers must not paint outside the cell */
+.msg-compact-num {
+  display: block;
+  min-width: 0;
+  max-width: 100%;
+  font-size: 13px;
+  font-weight: 900;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+}
+/* Long names clamp to 2 lines inside the track */
+.msg-compact-name {
+  display: -webkit-box;
+  min-width: 0;
+  max-width: 100%;
+  font-size: 9.5px;
+  font-weight: 700;
+  line-height: 1.2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+  color: var(--text-secondary);
+}
+.msg-compact-status {
+  margin-top: 2px;
+  max-width: 100%;
+  font-size: 9px;
+  font-weight: 900;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.msg-compact-status.is-owned { color: var(--text-secondary); }
+.msg-compact-status.is-need { color: var(--text-muted); }
+.msg-compact-status.is-found {
+  color: var(--on-accent);
+  background: var(--accent);
+  border: 1.5px solid var(--ink);
+  border-radius: 4px;
+  padding: 1px 4px;
+  align-self: flex-start;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+/* Separate preview control — full-width in track; icon-only when narrow */
+.msg-compact-preview {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  width: 100%;
+  min-width: 44px;
+  min-height: 44px;
+  max-width: 100%;
+  padding: 6px 4px;
+  font-size: 10px;
+  font-weight: 800;
+  font-family: inherit;
+  color: var(--ink);
+  background: var(--bg-card);
+  border: var(--bw) solid var(--ink);
+  border-radius: 8px;
+  box-shadow: var(--shadow-pressed);
+  cursor: pointer;
+  overflow: hidden;
+  transition: background 0.12s, box-shadow 0.1s, transform 0.1s;
+}
+.msg-compact-preview:active {
+  box-shadow: none;
+  transform: translate(1px, 1px);
+}
+.msg-compact-preview-txt {
+  line-height: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+/* Lightbox — always-dark scrim + always-light meta (theme-stable tokens) */
 .msg-preview {
   position: fixed;
   inset: 0;
   z-index: 400;
-  background: rgba(20, 18, 12, 0.78);
+  background: var(--scrim);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -437,7 +748,7 @@ onMounted(async () => {
   box-shadow: var(--shadow-lg);
   background: var(--bg-card);
 }
-.msg-preview-meta { text-align: center; color: #fff; }
+.msg-preview-meta { text-align: center; color: var(--on-scrim); }
 .msg-preview-name { font-size: 16px; font-weight: 800; }
 .msg-preview-sub { font-size: 12.5px; opacity: 0.85; font-weight: 600; margin-top: 2px; }
 .msg-preview-count {
@@ -450,6 +761,8 @@ onMounted(async () => {
   flex-shrink: 0;
   width: 46px;
   height: 46px;
+  min-width: 44px;
+  min-height: 44px;
   border-radius: 50%;
   background: var(--bg-card);
   border: 2px solid var(--ink);
@@ -483,8 +796,10 @@ onMounted(async () => {
   position: absolute;
   top: -14px;
   right: -14px;
-  width: 36px;
-  height: 36px;
+  width: 44px;
+  height: 44px;
+  min-width: 44px;
+  min-height: 44px;
   border-radius: 50%;
   background: var(--bg-card);
   border: 2px solid var(--ink);
@@ -494,6 +809,7 @@ onMounted(async () => {
   cursor: pointer;
   color: var(--ink);
 }
+.msg-preview-close:active { box-shadow: none; transform: translate(1px, 1px); }
 
 .msg-footer {
   display: flex;
@@ -506,9 +822,44 @@ onMounted(async () => {
   background: var(--bg-card);
 }
 .msg-footer-note { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
+.msg-add-found-btn {
+  min-height: 44px;
+  min-width: 44px;
+}
 
 @media (max-width: 640px) {
   .msg-panel { max-height: 82vh; }
-  .msg-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 9px; }
+  .msg-grid:not(.msg-grid-compact) { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 9px; }
+  /* 280px: minmax(60px) + 6px gap → 3 non-overlapping columns in ~244px content */
+  .msg-grid-compact {
+    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
+    gap: 6px;
+  }
+  /* Icon-only preview at narrow widths — aria-label remains on the button */
+  .msg-compact-preview-txt {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+  .msg-compact-preview { position: relative; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .msg-panel { animation: none; }
+  .msg-density-toggle,
+  .msg-filter-btn,
+  .msg-compact-primary,
+  .msg-compact-preview,
+  .msg-enlarge {
+    transition: none;
+  }
+  .msg-slide-l-enter-active, .msg-slide-l-leave-active,
+  .msg-slide-r-enter-active, .msg-slide-r-leave-active { transition: none; }
 }
 </style>