added a fix for variant selection (without it cards with multiple versions would add all at form submit)

removed unnecessary migration/json files from drizzle
style tweaks to both form and existing inventory, added createdAt and modified purchasePrice (for % of market)
2026-04-05 16:32:44 -04:00 · 2026-04-05 16:12:02 -04:00 · 2026-04-05 16:09:52 -04:00 · 2026-04-05 11:20:26 -04:00 · 2026-04-03 22:50:54 -04:00 · 2026-04-03 22:10:41 -04:00
25 changed files with 2627 additions and 868 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -26,6 +26,9 @@ pnpm-debug.log*
 # imges from tcgplayer
 public/cards/*
 # static assets
 /static/
 # anything test
 test.*
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -0,0 +1,58 @@
 # CLAUDE.md
 This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
 ## Project Overview
 Pokemon TCG card database and inventory management app. Users search cards, track market prices, and manage their collections. Closed beta.
 ## Commands
 ```bash
 npm run dev        # Start dev server (binds 0.0.0.0:4321)
 npm run build      # Production build → ./dist/
 npm run preview    # Preview production build
 ```
 No test framework or linter is configured.
 Utility scripts in `scripts/` are run directly with `tsx` (e.g., `npx tsx scripts/reindex.ts`).
 ## Tech Stack
 - **Astro 5** (SSR mode, Node.js standalone adapter)
 - **PostgreSQL** via Drizzle ORM (schema in `pokemon` namespace, snake_case DB columns)
 - **Typesense** for full-text card search
 - **Clerk** for authentication
 - **HTMX** for dynamic interactions (no SPA framework)
 - **Bootstrap 5** with custom SCSS overrides, dark theme
 - **Chart.js** for price history charts
 ## Architecture
 ### Data Flow
 TCGPlayer source data → `tcg_cards` → denormalized `cards` (per variant) → `skus` (per condition/language) → `price_history` / `sales_history`. User collections stored in `inventory` table linked to Clerk userId.
 PostgreSQL is source of truth. Typesense mirrors card/sku/inventory data for search. Both must be kept in sync — see `src/pages/api/inventory.ts` for the sync pattern (write to PG, then upsert/delete in Typesense).
 ### Key Directories
 - `src/pages/` — Astro routes and API endpoints
 - `src/pages/partials/` — HTMX partial responses (HTML fragments returned to `hx-post` targets)
 - `src/pages/api/` — JSON/file API endpoints (`upload.ts` for CSV, `inventory.ts` for CRUD)
 - `src/components/` — Reusable `.astro` components
 - `src/db/` — Drizzle schema (`schema.ts`), relations (`relations.ts`), DB connection (`index.ts`), Typesense client (`typesense.ts`)
 - `scripts/` — Data ingestion and indexing utilities (not part of the app runtime)
 ### Authentication
 Clerk middleware in `src/middleware.ts` protects routes via `createRouteMatcher`. Auth context accessed via `Astro.locals.auth()` in pages/API routes.
 ### Database Schema
 Drizzle config uses `casing: 'snake_case'` — define schema fields in camelCase, they map to snake_case columns automatically. Migrations live in `./drizzle/`. Schema is scoped to the `pokemon` PostgreSQL schema.
 ### Frontend Patterns
 Pages use HTMX for interactivity — forms POST to `/partials/*` endpoints that return HTML fragments. No client-side routing. View Transitions API enabled for page navigation animations. Card modals and inventory forms are HTMX-driven with `hx-post`, `hx-target`, and `hx-swap` attributes.
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -18,5 +18,17 @@ export default defineConfig({
  output: "server",
  security: {
    checkOrigin: false
-  }
+  },
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          // Silences deprecation warnings from dependencies
          quietDeps: true,
          // Specifically silence color function warnings
          silenceDeprecations: ['color-functions', 'import','global-builtin'],
        },
      },
    },
  },
 });
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
        "@clerk/astro": "^3.0.1",
        "@clerk/shared": "^4.0.0",
        "@clerk/themes": "^2.4.55",
        "@popperjs/core": "^2.11.8",
        "astro": "^5.17.1",
        "bootstrap": "^5.3.8",
        "chalk": "^5.6.2",
@@ -121,7 +122,6 @@
      "resolved": "https://registry.npmjs.org/@azure-rest/core-client/-/core-client-2.5.1.tgz",
      "integrity": "sha512-EHaOXW0RYDKS5CFffnixdyRPak5ytiCtU7uXDcP/uiY+A6jFRwNGzzJBiznkCzvi5EYpY+YWinieqHb0oY916A==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "@azure/abort-controller": "^2.1.2",
        "@azure/core-auth": "^1.10.0",
@@ -139,7 +139,6 @@
      "resolved": "https://registry.npmjs.org/@azure/abort-controller/-/abort-controller-2.1.2.tgz",
      "integrity": "sha512-nBrLsEWm4J2u5LpAPjxADTlq3trDgVZZXHNKabeXZtpq3d3AbN/KGO82R87rdDz5/lYB024rtEf10/q0urNgsA==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "tslib": "^2.6.2"
      },
@@ -152,7 +151,6 @@
      "resolved": "https://registry.npmjs.org/@azure/core-auth/-/core-auth-1.10.1.tgz",
      "integrity": "sha512-ykRMW8PjVAn+RS6ww5cmK9U2CyH9p4Q88YJwvUslfuMmN98w/2rdGRLPqJYObapBCdzBVeDgYWdJnFPFb7qzpg==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "@azure/abort-controller": "^2.1.2",
        "@azure/core-util": "^1.13.0",
@@ -186,7 +184,6 @@
      "resolved": "https://registry.npmjs.org/@azure/core-http-compat/-/core-http-compat-2.3.2.tgz",
      "integrity": "sha512-Tf6ltdKzOJEgxZeWLCjMxrxbodB/ZeCbzzA1A2qHbhzAjzjHoBVSUeSl/baT/oHAxhc4qdqVaDKnc2+iE932gw==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "@azure/abort-controller": "^2.1.2"
      },
@@ -203,7 +200,6 @@
      "resolved": "https://registry.npmjs.org/@azure/core-lro/-/core-lro-2.7.2.tgz",
      "integrity": "sha512-0YIpccoX8m/k00O7mDDMdJpbr6mf1yWo2dfmxt5A8XVZVVMz2SSKaEbMCeJRvgQ0IaSlqhjT47p4hVIRRy90xw==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "@azure/abort-controller": "^2.0.0",
        "@azure/core-util": "^1.2.0",
@@ -219,7 +215,6 @@
      "resolved": "https://registry.npmjs.org/@azure/core-paging/-/core-paging-1.6.2.tgz",
      "integrity": "sha512-YKWi9YuCU04B55h25cnOYZHxXYtEvQEbKST5vqRga7hWY9ydd3FZHdeQF8pyh+acWZvppw13M/LMGx0LABUVMA==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "tslib": "^2.6.2"
      },
@@ -251,7 +246,6 @@
      "resolved": "https://registry.npmjs.org/@azure/core-tracing/-/core-tracing-1.3.1.tgz",
      "integrity": "sha512-9MWKevR7Hz8kNzzPLfX4EAtGM2b8mr50HPDBvio96bURP/9C+HjdH3sBlLSNNrvRAr5/k/svoH457gB5IKpmwQ==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "tslib": "^2.6.2"
      },
@@ -264,7 +258,6 @@
      "resolved": "https://registry.npmjs.org/@azure/core-util/-/core-util-1.13.1.tgz",
      "integrity": "sha512-XPArKLzsvl0Hf0CaGyKHUyVgF7oDnhKoP85Xv6M4StF/1AhfORhZudHtOyf2s+FcbuQ9dPRAjB8J2KvRRMUK2A==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "@azure/abort-controller": "^2.1.2",
        "@typespec/ts-http-runtime": "^0.3.0",
@@ -302,7 +295,6 @@
      "resolved": "https://registry.npmjs.org/@azure/keyvault-common/-/keyvault-common-2.0.0.tgz",
      "integrity": "sha512-wRLVaroQtOqfg60cxkzUkGKrKMsCP6uYXAOomOIysSMyt1/YM0eUn9LqieAWM8DLcU4+07Fio2YGpPeqUbpP9w==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "@azure/abort-controller": "^2.0.0",
        "@azure/core-auth": "^1.3.0",
@@ -322,7 +314,6 @@
      "resolved": "https://registry.npmjs.org/@azure/keyvault-keys/-/keyvault-keys-4.10.0.tgz",
      "integrity": "sha512-eDT7iXoBTRZ2n3fLiftuGJFD+yjkiB1GNqzU2KbY1TLYeXeSPVTVgn2eJ5vmRTZ11978jy2Kg2wI7xa9Tyr8ag==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "@azure-rest/core-client": "^2.3.3",
        "@azure/abort-controller": "^2.1.2",
@@ -346,7 +337,6 @@
      "resolved": "https://registry.npmjs.org/@azure/logger/-/logger-1.3.0.tgz",
      "integrity": "sha512-fCqPIfOcLE+CGqGPd66c8bZpwAji98tZ4JI9i/mlTNTlsIWslCfpg48s/ypyLxZTump5sypjrKn2/kY7q8oAbA==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "@typespec/ts-http-runtime": "^0.3.0",
        "tslib": "^2.6.2"
@@ -360,7 +350,6 @@
      "resolved": "https://registry.npmjs.org/@azure/msal-browser/-/msal-browser-4.29.0.tgz",
      "integrity": "sha512-/f3eHkSNUTl6DLQHm+bKecjBKcRQxbd/XLx8lvSYp8Nl/HRyPuIPOijt9Dt0sH50/SxOwQ62RnFCmFlGK+bR/w==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "@azure/msal-common": "15.15.0"
      },
@@ -373,7 +362,6 @@
      "resolved": "https://registry.npmjs.org/@azure/msal-common/-/msal-common-15.15.0.tgz",
      "integrity": "sha512-/n+bN0AKlVa+AOcETkJSKj38+bvFs78BaP4rNtv3MJCmPH0YrHiskMRe74OhyZ5DZjGISlFyxqvf9/4QVEi2tw==",
      "license": "MIT",
      "peer": true,
      "engines": {
        "node": ">=0.8.0"
      }
@@ -383,7 +371,6 @@
      "resolved": "https://registry.npmjs.org/@azure/msal-node/-/msal-node-3.8.8.tgz",
      "integrity": "sha512-+f1VrJH1iI517t4zgmuhqORja0bL6LDQXfBqkjuMmfTYXTQQnh1EvwwxO3UbKLT05N0obF72SRHFrC1RBDv5Gg==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "@azure/msal-common": "15.15.0",
        "jsonwebtoken": "^9.0.0",
@@ -1474,8 +1461,7 @@
      "version": "5.7.0",
      "resolved": "https://registry.npmjs.org/@js-joda/core/-/core-5.7.0.tgz",
      "integrity": "sha512-WBu4ULVVxySLLzK1Ppq+OdfP+adRS4ntmDQT915rzDJ++i95gc2jZkM5B6LWEAwN3lGXpfie3yPABozdD3K3Vg==",
-      "license": "BSD-3-Clause",
+      "license": "BSD-3-Clause"
      "peer": true
    },
    "node_modules/@js-temporal/polyfill": {
      "version": "0.5.1",
@@ -1803,6 +1789,7 @@
      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
      "license": "MIT",
      "peer": true,
      "funding": {
        "type": "opencollective",
        "url": "https://opencollective.com/popperjs"
@@ -2248,8 +2235,7 @@
      "version": "0.5.0",
      "resolved": "https://registry.npmjs.org/@tediousjs/connection-string/-/connection-string-0.5.0.tgz",
      "integrity": "sha512-7qSgZbincDDDFyRweCIEvZULFAw5iz/DeunhvuxpL31nfntX3P4Yd4HkHBRg9H8CdqY1e5WFN1PZIz/REL9MVQ==",
-      "license": "MIT",
+      "license": "MIT"
      "peer": true
    },
    "node_modules/@types/bootstrap": {
      "version": "5.2.10",
@@ -2326,6 +2312,7 @@
      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.4.0.tgz",
      "integrity": "sha512-9wLpoeWuBlcbBpOY3XmzSTG3oscB6xjBEEtn+pYXTfhyXhIxC5FsBer2KTopBlvKEiW9l13po9fq+SJY/5lkhw==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "undici-types": "~7.18.0"
      }
@@ -2336,6 +2323,7 @@
      "integrity": "sha512-gT+oueVQkqnj6ajGJXblFR4iavIXWsGAFCk3dP4Kki5+a9R4NMt0JARdk6s8cUKcfUoqP5dAtDSLU8xYUTFV+Q==",
      "devOptional": true,
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "@types/node": "*",
        "pg-protocol": "*",
@@ -2347,7 +2335,6 @@
      "resolved": "https://registry.npmjs.org/@types/readable-stream/-/readable-stream-4.0.23.tgz",
      "integrity": "sha512-wwXrtQvbMHxCbBgjHaMGEmImFTQxxpfMOR/ZoQnXxB1woqkUbdLGFDgauo00Py9IudiaqSeiBiulSV9i6XIPig==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "@types/node": "*"
      }
@@ -2363,7 +2350,6 @@
      "resolved": "https://registry.npmjs.org/@typespec/ts-http-runtime/-/ts-http-runtime-0.3.4.tgz",
      "integrity": "sha512-CI0NhTrz4EBaa0U+HaaUZrJhPoso8sG7ZFya8uQoBA57fjzrjRSv87ekCjLZOFExN+gXE/z0xuN2QfH4H2HrLQ==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "http-proxy-agent": "^7.0.0",
        "https-proxy-agent": "^7.0.0",
@@ -2384,7 +2370,6 @@
      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "event-target-shim": "^5.0.0"
      },
@@ -2409,7 +2394,6 @@
      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
      "license": "MIT",
      "peer": true,
      "engines": {
        "node": ">= 14"
      }
@@ -2543,6 +2527,7 @@
      "resolved": "https://registry.npmjs.org/astro/-/astro-5.18.1.tgz",
      "integrity": "sha512-m4VWilWZ+Xt6NPoYzC4CgGZim/zQUO7WFL0RHCH0AiEavF1153iC3+me2atDvXpf/yX4PyGUeD8wZLq1cirT3g==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "@astrojs/compiler": "^2.13.0",
        "@astrojs/internal-helpers": "0.7.6",
@@ -2684,15 +2669,13 @@
          "url": "https://feross.org/support"
        }
      ],
-      "license": "MIT",
+      "license": "MIT"
      "peer": true
    },
    "node_modules/bl": {
      "version": "6.1.6",
      "resolved": "https://registry.npmjs.org/bl/-/bl-6.1.6.tgz",
      "integrity": "sha512-jLsPgN/YSvPUg9UX0Kd73CXpm2Psg9FxMeCSXnk3WBO3CMT10JMwijubhGfHCnFu6TPn1ei3b975dxv7K2pWVg==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "@types/readable-stream": "^4.0.0",
        "buffer": "^6.0.3",
@@ -2766,7 +2749,6 @@
        }
      ],
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "base64-js": "^1.3.1",
        "ieee754": "^1.2.1"
@@ -2776,15 +2758,13 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
      "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==",
-      "license": "BSD-3-Clause",
+      "license": "BSD-3-Clause"
      "peer": true
    },
    "node_modules/bundle-name": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-4.1.0.tgz",
      "integrity": "sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "run-applescript": "^7.0.0"
      },
@@ -3160,7 +3140,6 @@
      "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-5.5.0.tgz",
      "integrity": "sha512-H9LMLr5zwIbSxrmvikGuI/5KGhZ8E2zH3stkMgM5LpOWDutGM2JZaj460Udnf1a+946zc7YBgrqEWwbk7zHvGw==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "bundle-name": "^4.1.0",
        "default-browser-id": "^5.0.0"
@@ -3177,7 +3156,6 @@
      "resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-5.0.1.tgz",
      "integrity": "sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==",
      "license": "MIT",
      "peer": true,
      "engines": {
        "node": ">=18"
      },
@@ -3190,7 +3168,6 @@
      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz",
      "integrity": "sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==",
      "license": "MIT",
      "peer": true,
      "engines": {
        "node": ">=12"
      },
@@ -4043,7 +4020,6 @@
      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
      "license": "Apache-2.0",
      "peer": true,
      "dependencies": {
        "safe-buffer": "^5.0.1"
      }
@@ -4214,7 +4190,6 @@
      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
      "license": "MIT",
      "peer": true,
      "engines": {
        "node": ">=6"
      }
@@ -4230,7 +4205,6 @@
      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
      "license": "MIT",
      "peer": true,
      "engines": {
        "node": ">=0.8.x"
      }
@@ -4749,7 +4723,6 @@
      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "agent-base": "^7.1.0",
        "debug": "^4.3.4"
@@ -4763,7 +4736,6 @@
      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "agent-base": "^7.1.2",
        "debug": "4"
@@ -4777,7 +4749,6 @@
      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.2.tgz",
      "integrity": "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "safer-buffer": ">= 2.1.2 < 3.0.0"
      },
@@ -4807,8 +4778,7 @@
          "url": "https://feross.org/support"
        }
      ],
-      "license": "BSD-3-Clause",
+      "license": "BSD-3-Clause"
      "peer": true
    },
    "node_modules/immutable": {
      "version": "5.1.5",
@@ -4946,8 +4916,7 @@
      "version": "0.3.2",
      "resolved": "https://registry.npmjs.org/js-md4/-/js-md4-0.3.2.tgz",
      "integrity": "sha512-/GDnfQYsltsjRswQhN9fhv3EMw2sCpUdrdxyWDOUK7eyD++r3gRhzgiQgc/x4MAv2i1iuQ4lxO5mvqM3vj4bwA==",
-      "license": "MIT",
+      "license": "MIT"
      "peer": true
    },
    "node_modules/js-yaml": {
      "version": "4.1.1",
@@ -4973,7 +4942,6 @@
      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.3.tgz",
      "integrity": "sha512-MT/xP0CrubFRNLNKvxJ2BYfy53Zkm++5bX9dtuPbqAeQpTVe0MQTFhao8+Cp//EmJp244xt6Drw/GVEGCUj40g==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "jws": "^4.0.1",
        "lodash.includes": "^4.3.0",
@@ -4996,7 +4964,6 @@
      "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.1.tgz",
      "integrity": "sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "buffer-equal-constant-time": "^1.0.1",
        "ecdsa-sig-formatter": "1.0.11",
@@ -5008,7 +4975,6 @@
      "resolved": "https://registry.npmjs.org/jws/-/jws-4.0.1.tgz",
      "integrity": "sha512-EKI/M/yqPncGUUh44xz0PxSidXFr/+r0pA70+gIYhjv+et7yxM+s29Y+VGDkovRofQem0fs7Uvf4+YmAdyRduA==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "jwa": "^2.0.1",
        "safe-buffer": "^5.0.1"
@@ -5027,50 +4993,43 @@
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
      "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==",
-      "license": "MIT",
+      "license": "MIT"
      "peer": true
    },
    "node_modules/lodash.isboolean": {
      "version": "3.0.3",
      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==",
-      "license": "MIT",
+      "license": "MIT"
      "peer": true
    },
    "node_modules/lodash.isinteger": {
      "version": "4.0.4",
      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==",
-      "license": "MIT",
+      "license": "MIT"
      "peer": true
    },
    "node_modules/lodash.isnumber": {
      "version": "3.0.3",
      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
      "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==",
-      "license": "MIT",
+      "license": "MIT"
      "peer": true
    },
    "node_modules/lodash.isplainobject": {
      "version": "4.0.6",
      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
-      "license": "MIT",
+      "license": "MIT"
      "peer": true
    },
    "node_modules/lodash.isstring": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
      "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==",
-      "license": "MIT",
+      "license": "MIT"
      "peer": true
    },
    "node_modules/lodash.once": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
-      "license": "MIT",
+      "license": "MIT"
      "peer": true
    },
    "node_modules/loglevel": {
      "version": "1.9.2",
@@ -5982,7 +5941,6 @@
      "resolved": "https://registry.npmjs.org/mssql/-/mssql-11.0.1.tgz",
      "integrity": "sha512-KlGNsugoT90enKlR8/G36H0kTxPthDhmtNUCwEHvgRza5Cjpjoj+P2X6eMpFUDN7pFrJZsKadL4x990G8RBE1w==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "@tediousjs/connection-string": "^0.5.0",
        "commander": "^11.0.0",
@@ -6003,7 +5961,6 @@
      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "safer-buffer": ">= 2.1.2 < 3.0.0"
      },
@@ -6016,7 +5973,6 @@
      "resolved": "https://registry.npmjs.org/tedious/-/tedious-18.6.2.tgz",
      "integrity": "sha512-g7jC56o3MzLkE3lHkaFe2ZdOVFBahq5bsB60/M4NYUbocw/MCrS89IOEQUFr+ba6pb8ZHczZ/VqCyYeYq0xBAg==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "@azure/core-auth": "^1.7.2",
        "@azure/identity": "^4.2.1",
@@ -6070,8 +6026,7 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/native-duplexpair/-/native-duplexpair-1.0.0.tgz",
      "integrity": "sha512-E7QQoM+3jvNtlmyfqRZ0/U75VFgCls+fSkbml2MpgWkWyz3ox8Y58gNhfuziuQYGNNQAbFZJQck55LHCnCK6CA==",
-      "license": "MIT",
+      "license": "MIT"
      "peer": true
    },
    "node_modules/neotraverse": {
      "version": "0.6.18",
@@ -6186,7 +6141,6 @@
      "resolved": "https://registry.npmjs.org/open/-/open-10.2.0.tgz",
      "integrity": "sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "default-browser": "^5.2.1",
        "define-lazy-prop": "^3.0.0",
@@ -6284,6 +6238,7 @@
      "resolved": "https://registry.npmjs.org/pg/-/pg-8.20.0.tgz",
      "integrity": "sha512-ldhMxz2r8fl/6QkXnBD3CR9/xg694oT6DZQ2s6c/RI28OjtSOpxnPrUCGOBJ46RCUxcWdx3p6kw/xnDHjKvaRA==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "pg-connection-string": "^2.12.0",
        "pg-pool": "^3.13.0",
@@ -6491,7 +6446,6 @@
      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
      "license": "MIT",
      "peer": true,
      "engines": {
        "node": ">= 0.6.0"
      }
@@ -6555,7 +6509,6 @@
      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.7.0.tgz",
      "integrity": "sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "abort-controller": "^3.0.0",
        "buffer": "^6.0.3",
@@ -6821,14 +6774,14 @@
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
-      "license": "MIT",
+      "license": "MIT"
      "peer": true
    },
    "node_modules/rollup": {
      "version": "4.59.0",
      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.59.0.tgz",
      "integrity": "sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "@types/estree": "1.0.8"
      },
@@ -6873,7 +6826,6 @@
      "resolved": "https://registry.npmjs.org/run-applescript/-/run-applescript-7.1.0.tgz",
      "integrity": "sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==",
      "license": "MIT",
      "peer": true,
      "engines": {
        "node": ">=18"
      },
@@ -6899,21 +6851,20 @@
          "url": "https://feross.org/support"
        }
      ],
-      "license": "MIT",
+      "license": "MIT"
      "peer": true
    },
    "node_modules/safer-buffer": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "license": "MIT",
+      "license": "MIT"
      "peer": true
    },
    "node_modules/sass": {
      "version": "1.98.0",
      "resolved": "https://registry.npmjs.org/sass/-/sass-1.98.0.tgz",
      "integrity": "sha512-+4N/u9dZ4PrgzGgPlKnaaRQx64RO0JBKs9sDhQ2pLgN6JQZ25uPQZKQYaBJU48Kd5BxgXoJ4e09Dq7nMcOUW3A==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "chokidar": "^4.0.0",
        "immutable": "^5.1.5",
@@ -7099,8 +7050,7 @@
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
      "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==",
-      "license": "BSD-3-Clause",
+      "license": "BSD-3-Clause"
      "peer": true
    },
    "node_modules/standardwebhooks": {
      "version": "1.0.0",
@@ -7138,7 +7088,6 @@
      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "safe-buffer": "~5.2.0"
      }
@@ -7232,7 +7181,6 @@
      "resolved": "https://registry.npmjs.org/tarn/-/tarn-3.0.2.tgz",
      "integrity": "sha512-51LAVKUSZSVfI05vjPESNc5vwqqZpbXCsU+/+wxlOrUjk2SnFTt97v9ZgQrD4YmxYW1Px6w2KjaDitCfkvgxMQ==",
      "license": "MIT",
      "peer": true,
      "engines": {
        "node": ">=8.0.0"
      }
@@ -7242,7 +7190,6 @@
      "resolved": "https://registry.npmjs.org/tedious/-/tedious-19.2.1.tgz",
      "integrity": "sha512-pk1Q16Yl62iocuQB+RWbg6rFUFkIyzqOFQ6NfysCltRvQqKwfurgj8v/f2X+CKvDhSL4IJ0cCOfCHDg9PWEEYA==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "@azure/core-auth": "^1.7.2",
        "@azure/identity": "^4.2.1",
@@ -7351,6 +7298,7 @@
      "integrity": "sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==",
      "devOptional": true,
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "esbuild": "~0.27.0",
        "get-tsconfig": "^4.7.5"
@@ -7382,6 +7330,7 @@
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
      "license": "Apache-2.0",
      "peer": true,
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
@@ -7722,7 +7671,6 @@
      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
      "license": "MIT",
      "peer": true,
      "bin": {
        "uuid": "dist/bin/uuid"
      }
@@ -8375,7 +8323,6 @@
      "resolved": "https://registry.npmjs.org/wsl-utils/-/wsl-utils-0.1.0.tgz",
      "integrity": "sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "is-wsl": "^3.1.0"
      },
@@ -8454,6 +8401,7 @@
      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
      "license": "MIT",
      "peer": true,
      "funding": {
        "url": "https://github.com/sponsors/colinhacks"
      }
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
    "@clerk/astro": "^3.0.1",
    "@clerk/shared": "^4.0.0",
    "@clerk/themes": "^2.4.55",
    "@popperjs/core": "^2.11.8",
    "astro": "^5.17.1",
    "bootstrap": "^5.3.8",
    "chalk": "^5.6.2",
--- a/scripts/pokemon-helper.ts
+++ b/scripts/pokemon-helper.ts
@@ -88,6 +88,25 @@ export const createSkuCollection = async () => {
    console.log(chalk.green('Collection "skus" created successfully.'));
 }
 // Delete and recreate the 'inventory' index
 export const createInventoryCollection = async () => {
    try {
        await client.collections('inventories').delete();
    } catch (error) {
        // Ignore error, just means collection doesn't exist
    }
    await client.collections().create({
        name: 'inventories',
        fields: [
            { name: 'id', type: 'string' },
            { name: 'userId', type: 'string' },
            { name: 'catalogName', type: 'string' },
            { name: 'card_id', type: 'string', reference: 'cards.id' },
        ]
    });
    console.log(chalk.green('Collection "inventories" created successfully.'));
 }
 export const upsertCardCollection = async (db:DBInstance) => {
    const pokemon = await db.query.cards.findMany({
@@ -131,6 +150,17 @@ export const upsertSkuCollection = async (db:DBInstance) => {
    console.log(chalk.green('Collection "skus" indexed successfully.'));
 }
 export const upsertInventoryCollection = async (db:DBInstance) => {
    const inv = await db.query.inventory.findMany();
    await client.collections('inventories').documents().import(inv.map(i => ({
        id: i.inventoryId,
        userId: i.userId,
        catalogName: i.catalogName,
        card_id: i.cardId.toString(),
    })), { action: 'upsert' });
    console.log(chalk.green('Collection "inventories" indexed successfully.'));
 }
--- a/scripts/preload-tcgplayer.ts
+++ b/scripts/preload-tcgplayer.ts
@@ -280,6 +280,6 @@ else {
 await helper.UpdateVariants(db);
 // index the card updates
-helper.upsertCardCollection(db);
+await helper.upsertCardCollection(db);
 await ClosePool();
--- a/scripts/reindex.ts
+++ b/scripts/reindex.ts
@@ -5,7 +5,10 @@ import * as Indexing from './pokemon-helper.ts';
 //await Indexing.createCardCollection();
 //await Indexing.createSkuCollection();
-await Indexing.upsertCardCollection(db);
+await Indexing.createInventoryCollection();
-await Indexing.upsertSkuCollection(db);
+
 //await Indexing.upsertCardCollection(db);
 //await Indexing.upsertSkuCollection(db);
 await Indexing.upsertInventoryCollection(db);
 await ClosePool();
 console.log(chalk.green('Pokémon reindex complete.'));
--- a/src/assets/css/_card.scss
+++ b/src/assets/css/_card.scss
@@ -40,8 +40,8 @@
 // =============================================================================
 // Shared texture/asset references
-$grain:       url('/holofoils/grain.webp');
+$grain:       url('/public/holofoils/grain.webp');
-$glitter:     url('/holofoils/glitter.png');
+$glitter:     url('/public/holofoils/glitter.png');
 $glittersize: 25%;
@@ -190,7 +190,7 @@ $glittersize: 25%;
 /// No-mask fallback for cards using the illusion foil pattern.
@mixin no-mask-illusion {
  --mask: none;
-  --foil: url('/holofoils/illusion.png');
+  --foil: url('/public/holofoils/illusion.png');
  --imgsize: 33%;
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
@@ -919,7 +919,7 @@ $glittersize: 25%;
    --space: 4%;
    clip-path: var(--clip);
    background-image:
-      url('/holofoils/cosmos-bottom.png'),
+      url('/public/holofoils/cosmos-bottom.png'),
      $cosmos-stripe,
      radial-gradient(
        farthest-corner circle at var(--pointer-x) var(--pointer-y),
@@ -939,7 +939,7 @@ $glittersize: 25%;
    &::before {
      content: '';
      z-index: 2;
-      background-image: url('/holofoils/cosmos-middle-trans.png'), $cosmos-stripe;
+      background-image: url('/public/holofoils/cosmos-middle-trans.png'), $cosmos-stripe;
      background-blend-mode: lighten, multiply;
      background-position:
        var(--cosmosbg, center center),
@@ -953,7 +953,7 @@ $glittersize: 25%;
    &::after {
      content: '';
      z-index: 3;
-      background-image: url('/holofoils/cosmos-top-trans.png'), $cosmos-stripe;
+      background-image: url('/public/holofoils/cosmos-top-trans.png'), $cosmos-stripe;
      background-blend-mode: multiply, multiply;
      background-position:
        var(--cosmosbg, center center),
@@ -1081,7 +1081,7 @@ $glittersize: 25%;
    .card__shine,
    .card__shine::after {
      --mask:    none;
-      --foil:    url('/holofoils/trainerbg.png');
+      --foil:    url('/public/holofoils/trainerbg.png');
      --imgsize: 25% auto;
    }
    .card__shine::after { background-blend-mode: difference; }
@@ -1205,7 +1205,7 @@ $glittersize: 25%;
  }
  &:not(.masked) .card__shine {
-    --foil:    url('/holofoils/illusion-mask.png');
+    --foil:    url('/public/holofoils/illusion-mask.png');
    --imgsize: 33%;
  }
 }
@@ -1377,7 +1377,7 @@ $glittersize: 25%;
  .card__glare         { @extend %secret-rare-glare; }
  &:not(.masked) .card__shine {
-    --foil:    url('/holofoils/geometric.png');
+    --foil:    url('/public/holofoils/geometric.png');
    --imgsize: 33%;
    filter: brightness(calc((var(--pointer-from-center) * 0.3) + 0.2)) contrast(2) saturate(0.75);
  }
@@ -1648,7 +1648,7 @@ $glittersize: 25%;
  }
  &:not(.masked) .card__shine {
-    --foil:    url('/holofoils/illusion-mask.png');
+    --foil:    url('/public/holofoils/illusion-mask.png');
    --imgsize: 33%;
  }
 }
@@ -1719,7 +1719,7 @@ $glittersize: 25%;
  &:not(.masked) {
    .card__shine,
    .card__shine::after {
-      --foil:    url('/holofoils/trainerbg.png');
+      --foil:    url('/public/holofoils/trainerbg.png');
      --imgsize: 20%;
      background-blend-mode: color-burn, hue, hard-light;
      filter: brightness(calc((var(--pointer-from-center) * 0.05) + .6)) contrast(1.5) saturate(1.2);
@@ -1828,7 +1828,7 @@ $glittersize: 25%;
  &:not(.masked) {
    .card__shine {
-      --foil:    url('/holofoils/geometric.png');
+      --foil:    url('/public/holofoils/geometric.png');
      --imgsize: 33%;
      filter: brightness(calc((var(--pointer-from-center) * 0.3) + 0.2)) contrast(2) saturate(0.75);
    }
@@ -2027,7 +2027,7 @@ $glittersize: 25%;
    .card__shine,
    .card__shine::after {
      --mask:    none;
-      --foil:    url('/holofoils/vmaxbg.jpg');
+      --foil:    url('/public/holofoils/vmaxbg.jpg');
      --imgsize: 60% 30%;
    }
  }
@@ -2102,7 +2102,7 @@ $glittersize: 25%;
    .card__shine,
    .card__shine::after {
      --mask:    none;
-      --foil:    url('/holofoils/ancient.png');
+      --foil:    url('/public/holofoils/ancient.png');
      --imgsize: 18% 15%;
      background-blend-mode: exclusion, hue, hard-light;
      filter: brightness(calc((var(--pointer-from-center) * .25) + .35)) contrast(1.8) saturate(1.75);
--- a/src/assets/css/_holofoil-integration.scss
+++ b/src/assets/css/_holofoil-integration.scss
@@ -1,40 +1,19 @@
 // =============================================================================
 // HOLOFOIL INTEGRATION
 // _holofoil-integration.scss
 // =============================================================================
-//
+
-// Three effect zones, determined by rarity and variant:
+@import "card";
 //
 // NONE — no effect at all
 //   variant = Normal  (or no recognised rarity/variant)
 //
 // INVERSE — effect on borders only (everything except the art window)
 //   variant = Reverse Holofoil
 //   rarity  = Prism Rare
 //
 // ART WINDOW — effect clipped to the artwork area only
 //   rarity  = Rare | Amazing Rare | Classic Collection | Holo Rare
 //   variant = Holofoil | 1st Edition Holofoil
 //
 // FULL CARD — effect over the entire card
 //   rarity  = Ultra Rare | Character Rare | Illustration Rare |
 //             Special Illustration Rare | Double Rare | Hyper Rare |
 //             Mega Rare | Mega Attack Rare | ACE Spec Rare | ACE Rare |
 //             Art Rare | Special Art Rare | Black White Rare |
 //             Character Super Rare | Mega Ultra Rare | Rare BREAK |
 //             Secret Rare | Shiny Holo Rare | Shiny Rare |
 //             Shiny Secret Rare | Shiny Ultra Rare
 //
 // =============================================================================
 // -----------------------------------------------------------------------------
-// 1. CSS CUSTOM PROPERTIES — set on every wrapper element
+// 1.  WRAPPER NORMALISATION
 // -----------------------------------------------------------------------------
-.image-grow,
+%holofoil-wrapper-base {
-.card-image-wrap {
+  --card-aspect:  0.718;
  --card-radius:  4.55% / 3.5%;
  // Pointer tracking — updated by holofoil-init.js on mousemove
  --pointer-x:           50%;
  --pointer-y:           50%;
  --background-x:        50%;
@@ -42,23 +21,29 @@
  --pointer-from-center: 0;
  --pointer-from-top:    0.5;
  --pointer-from-left:   0.5;
  --card-opacity:        0;
  --card-scale:          1;
  --card-opacity:        0;
-  // Card geometry — matches Bootstrap's rounded-4 (--bs-border-radius-xl)
+  --grain:       url('/public/holofoils/grain.webp');
-  --card-radius: var(--bs-border-radius-xl, 0.375rem);
+  --glitter:     url('/public/holofoils/glitter.png');
  --glittersize: 25%;
  --space:       5%;
  --angle:       133deg;
  --imgsize:     cover;
-  // Art window clip — original poke-holo values, correct for standard TCG card scans
+  --red:    #f80e35;
-  // inset(top right bottom left): top=9.85%, sides=8%, bottom=52.85% (art bottom at 47.15%)
+  --yellow: #eedf10;
-  --clip-art: inset(9.85% 8% 52.85% 8%);
+  --green:  #21e985;
  --blue:   #0dbde9;
  --violet: #c929f1;
  --clip:              inset(9.85% 8% 52.85% 8%);
  --clip-invert:       polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 47.15%, 91.5% 47.15%, 91.5% 9.85%, 8% 9.85%, 8% 47.15%, 0 50%);
  --clip-stage:        polygon(91.5% 9.85%, 57% 9.85%, 54% 12%, 17% 12%, 16% 14%, 12% 16%, 8% 16%, 8% 47.15%, 92% 47.15%);
  --clip-stage-invert: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 47.15%, 91.5% 47.15%, 91.5% 9.85%, 57% 9.85%, 54% 12%, 17% 12%, 16% 14%, 12% 16%, 8% 16%, 8% 47.15%, 0 50%);
  --clip-trainer:      inset(14.5% 8.5% 48.2% 8.5%);
  --clip-borders:      inset(2.8% 4% round 2.55% / 1.5%);
  // Sunpillar palette
  --sunpillar-1: hsl(2,   100%, 73%);
  --sunpillar-2: hsl(53,  100%, 69%);
  --sunpillar-3: hsl(93,  100%, 69%);
  --sunpillar-4: hsl(176, 100%, 76%);
  --sunpillar-5: hsl(228, 100%, 74%);
  --sunpillar-6: hsl(283, 100%, 73%);
  --sunpillar-clr-1: var(--sunpillar-1);
  --sunpillar-clr-2: var(--sunpillar-2);
  --sunpillar-clr-3: var(--sunpillar-3);
@@ -66,23 +51,14 @@
  --sunpillar-clr-5: var(--sunpillar-5);
  --sunpillar-clr-6: var(--sunpillar-6);
-  // Colour tokens
+  // NOTE: no overflow:hidden here -- that would clip the lift/scale transform
-  --red:    #f80e35;
+  // on .image-grow. Overflow is handled by the child .holo-shine/.holo-glare.
-  --yellow: #eedf10;
+  position: relative;
-  --green:  #21e985;
+  isolation: isolate;
-  --blue:   #0dbde9;
+  border-radius: var(--card-radius);
-  --violet: #c929f1;
+}
-  // Glow
+%holofoil-energy-glows {
  --card-glow: hsl(175, 100%, 90%);
  // Texture assets
  --grain:       url('/holofoils/grain.webp');
  --glitter:     url('/holofoils/glitter.png');
  --glittersize: 25%;
  --foil:        none;
  // Energy glow overrides
  &[data-energy="Water"]     { --card-glow: hsl(192, 97%,  60%); }
  &[data-energy="Fire"]      { --card-glow: hsl(9,   81%,  59%); }
  &[data-energy="Grass"]     { --card-glow: hsl(96,  81%,  65%); }
@@ -93,49 +69,22 @@
  &[data-energy="Metal"]     { --card-glow: hsl(184, 20%,  70%); }
  &[data-energy="Dragon"]    { --card-glow: hsl(51,  60%,  35%); }
  &[data-energy="Fairy"]     { --card-glow: hsl(323, 100%, 89%); }
  // Hover activates opacity; JS updates pointer vars
  &:hover,
  &[data-holo-active] { --card-opacity: 0.2; }
  display: block;  // ensure wrapper is a block-level containing block
  position: relative;
  isolation: isolate;
  border-radius: var(--card-radius);
 }
 // -----------------------------------------------------------------------------
-// 2. HOLO-SHINE AND HOLO-GLARE BASE STRUCTURE
+// 2.  SHINE + GLARE CHILD DIVS
 // -----------------------------------------------------------------------------
-.holo-shine,
+%shine-base {
 .holo-glare {
  pointer-events: none;
  display: block;
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius);
-  // NO overflow:hidden — it interferes with clip-path on the element itself
+  overflow: hidden; // clipping lives here, not on the parent
  z-index: 3;
  will-change: transform, opacity, background-image, background-size,
    background-position, background-blend-mode, filter;
 }
 // The img inside has mb-2 but the wrapper already has the right size from
 // aspect-ratio on .card-image — zero the margin so img fills wrapper flush.
 .image-grow > img,
 .card-image-wrap > img {
  display: block;
  margin-bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
 }
 .holo-shine {
  z-index: 3;
  mix-blend-mode: color-dodge;
  opacity: var(--card-opacity);
  &::before,
  &::after {
@@ -143,355 +92,69 @@
    position: absolute;
    inset: 0;
    border-radius: var(--card-radius);
    // Sunpillar palette shift for ::before depth layer
    --sunpillar-clr-1: var(--sunpillar-5);
    --sunpillar-clr-2: var(--sunpillar-6);
    --sunpillar-clr-3: var(--sunpillar-1);
    --sunpillar-clr-4: var(--sunpillar-2);
    --sunpillar-clr-5: var(--sunpillar-3);
    --sunpillar-clr-6: var(--sunpillar-4);
  }
  &::after {
    // Second palette shift for uppermost pseudo layer
    --sunpillar-clr-1: var(--sunpillar-6);
    --sunpillar-clr-2: var(--sunpillar-1);
    --sunpillar-clr-3: var(--sunpillar-2);
    --sunpillar-clr-4: var(--sunpillar-3);
    --sunpillar-clr-5: var(--sunpillar-4);
    --sunpillar-clr-6: var(--sunpillar-5);
  }
 }
-.holo-glare {
+%glare-base {
-  z-index: 4;
+  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: var(--card-opacity);
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(0, 0%, 100%, 0.8)  10%,
    hsla(0, 0%, 100%, 0.65) 20%,
    hsla(0, 0%, 0%,   0.5)  90%
  );
  // Grain texture on ::before — soft-light blend adds physical substrate feel
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--grain);
    background-size: 33%;
    background-repeat: repeat;
    mix-blend-mode: soft-light;
    opacity: 0.15;
  }
  // Glitter texture on ::after — overlay blend adds sparkle points
  &::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--glitter);
    background-size: var(--glittersize) var(--glittersize);
    background-repeat: repeat;
    background-position:
      calc(50% - ((5px * 2) * var(--pointer-from-left)) + 5px)
      calc(50% - ((5px * 2) * var(--pointer-from-top))  + 5px);
    mix-blend-mode: overlay;
    opacity: calc(var(--card-opacity) * 0.6);
  }
 }
 // -----------------------------------------------------------------------------
 // 3. ZONE HELPERS — reusable effect mixin
 // The standard prismatic effect, applied at different clip regions below.
 // -----------------------------------------------------------------------------
 // Standard shine background (used by ART WINDOW and FULL CARD zones)
@mixin prismatic-shine {
  background-image:
    var(--grain),
    repeating-linear-gradient(110deg,
      var(--violet), var(--blue), var(--green), var(--yellow), var(--red),
      var(--violet), var(--blue), var(--green), var(--yellow), var(--red),
      var(--violet), var(--blue), var(--green), var(--yellow), var(--red)
    );
  background-position:
    center center,
    calc(((50% - var(--background-x)) * 2.6) + 50%)
    calc(((50% - var(--background-y)) * 3.5) + 50%);
  background-size: 33%, 400% 400%;
  background-repeat: repeat, no-repeat;
  background-blend-mode: soft-light, normal;
  filter: brightness(.8) contrast(.85) saturate(.75);
 }
@mixin prismatic-glare {
  opacity: calc(var(--card-opacity) * 0.4);
  filter: brightness(0.8) contrast(1.5);
 }
 // -----------------------------------------------------------------------------
 // 4. ZONE 0 — NORMAL: no effect
 // -----------------------------------------------------------------------------
 .image-grow[data-variant="Normal" i],
 .card-image-wrap[data-variant="Normal" i] {
  .holo-shine,
  .holo-glare { display: none !important; }
 }
 // -----------------------------------------------------------------------------
 // 5. ZONE 1 — ART WINDOW EFFECT
 // rarity: Rare, Amazing Rare, Classic Collection, Holo Rare
 // variant: Holofoil, 1st Edition Holofoil
 // -----------------------------------------------------------------------------
 .image-grow[data-rarity="Rare" i]:not([data-variant="Reverse Holofoil" i]):not([data-variant="Normal" i]),
 .card-image-wrap[data-rarity="Rare" i]:not([data-variant="Reverse Holofoil" i]):not([data-variant="Normal" i]),
 .image-grow[data-rarity="Amazing Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .card-image-wrap[data-rarity="Amazing Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .image-grow[data-rarity="Classic Collection" i]:not([data-variant="Reverse Holofoil" i]),
 .card-image-wrap[data-rarity="Classic Collection" i]:not([data-variant="Reverse Holofoil" i]),
 .image-grow[data-rarity="Holo Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .card-image-wrap[data-rarity="Holo Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .image-grow[data-variant="Holofoil" i]:not([data-variant="Reverse Holofoil" i]),
 .card-image-wrap[data-variant="Holofoil" i]:not([data-variant="Reverse Holofoil" i]),
 .image-grow[data-variant="1st Edition Holofoil" i],
 .card-image-wrap[data-variant="1st Edition Holofoil" i] {
  .holo-shine {
    clip-path: var(--clip-art);
    @include prismatic-shine;
  }
  .holo-glare {
    clip-path: var(--clip-art);
    @include prismatic-glare;
  }
 }
 // -----------------------------------------------------------------------------
 // 5b. ZONE 1 BORDER ADDITION — Holofoil + 1st Edition Holofoil
 //
 // Real holofoil cards have the foil stamp on both the art window AND the card
 // border. The element carries the art window clip; ::before carries the border
 // clip via the same zero-width tunnel polygon as Zone 3.
 // ::before inherits background-image/size/position from the parent via inherit.
 // -----------------------------------------------------------------------------
 .image-grow[data-variant="Holofoil" i]:not([data-variant="Reverse Holofoil" i]),
 .card-image-wrap[data-variant="Holofoil" i]:not([data-variant="Reverse Holofoil" i]),
 .image-grow[data-variant="1st Edition Holofoil" i],
 .card-image-wrap[data-variant="1st Edition Holofoil" i] {
  .holo-shine {
    &::before {
      background-image: inherit;
      background-size: inherit;
      background-position: inherit;
      background-repeat: inherit;
      background-blend-mode: inherit;
      filter: inherit;
      mix-blend-mode: color-dodge;
      clip-path: polygon(
        0% 0%, 0% 100%, 100% 100%, 100% 0%, 0% 0%,
        8% 9.85%, 92% 9.85%, 92% 47.15%, 8% 47.15%, 8% 9.85%
      );
    }
  }
  .holo-glare {
    &::before {
      clip-path: polygon(
        0% 0%, 0% 100%, 100% 100%, 100% 0%, 0% 0%,
        8% 9.85%, 92% 9.85%, 92% 47.15%, 8% 47.15%, 8% 9.85%
      );
    }
  }
 }
 // -----------------------------------------------------------------------------
 // 6. ZONE 2 — FULL CARD EFFECT
 // -----------------------------------------------------------------------------
 .image-grow[data-rarity="Ultra Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .card-image-wrap[data-rarity="Ultra Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .image-grow[data-rarity="Character Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .card-image-wrap[data-rarity="Character Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .image-grow[data-rarity="Illustration Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .card-image-wrap[data-rarity="Illustration Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .image-grow[data-rarity="Special Illustration Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .card-image-wrap[data-rarity="Special Illustration Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .image-grow[data-rarity="Double Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .card-image-wrap[data-rarity="Double Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .image-grow[data-rarity="Hyper Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .card-image-wrap[data-rarity="Hyper Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .image-grow[data-rarity="Mega Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .card-image-wrap[data-rarity="Mega Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .image-grow[data-rarity="Mega Attack Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .card-image-wrap[data-rarity="Mega Attack Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .image-grow[data-rarity="ACE Spec Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .card-image-wrap[data-rarity="ACE Spec Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .image-grow[data-rarity="ACE Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .card-image-wrap[data-rarity="ACE Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .image-grow[data-rarity="Art Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .card-image-wrap[data-rarity="Art Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .image-grow[data-rarity="Special Art Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .card-image-wrap[data-rarity="Special Art Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .image-grow[data-rarity="Black White Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .card-image-wrap[data-rarity="Black White Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .image-grow[data-rarity="Character Super Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .card-image-wrap[data-rarity="Character Super Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .image-grow[data-rarity="Mega Ultra Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .card-image-wrap[data-rarity="Mega Ultra Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .image-grow[data-rarity="Rare BREAK" i]:not([data-variant="Reverse Holofoil" i]),
 .card-image-wrap[data-rarity="Rare BREAK" i]:not([data-variant="Reverse Holofoil" i]),
 .image-grow[data-rarity="Secret Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .card-image-wrap[data-rarity="Secret Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .image-grow[data-rarity="Shiny Holo Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .card-image-wrap[data-rarity="Shiny Holo Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .image-grow[data-rarity="Shiny Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .card-image-wrap[data-rarity="Shiny Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .image-grow[data-rarity="Shiny Secret Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .card-image-wrap[data-rarity="Shiny Secret Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .image-grow[data-rarity="Shiny Ultra Rare" i]:not([data-variant="Reverse Holofoil" i]),
 .card-image-wrap[data-rarity="Shiny Ultra Rare" i]:not([data-variant="Reverse Holofoil" i]) {
  .holo-shine {
    clip-path: none;
    @include prismatic-shine;
  }
  .holo-glare {
    clip-path: none;
    @include prismatic-glare;
  }
 }
 // -----------------------------------------------------------------------------
 // 7. ZONE 3 — INVERSE (borders only): Reverse Holofoil + Prism Rare
 //
 // Applies the effect to everything EXCEPT the art window.
 // Uses the "zero-width tunnel" technique from css-tricks.com/cutting-inner-part-element-using-clip-path/
 // Outer rectangle drawn anticlockwise, closes back to 0% 0%, then the inner
 // art window rectangle is drawn clockwise — nonzero winding treats the inner
 // shape as a hole, leaving the art window transparent.
 //
 // Outer (anticlockwise): 0 0 → 0 100% → 100% 100% → 100% 0 → 0 0
 // Inner art window (clockwise): 8% 9.85% → 92% 9.85% → 92% 47.15% → 8% 47.15%
 // -----------------------------------------------------------------------------
 .image-grow[data-variant="Reverse Holofoil" i],
 .card-image-wrap[data-variant="Reverse Holofoil" i],
 .image-grow[data-rarity="Prism Rare" i],
 .card-image-wrap[data-rarity="Prism Rare" i] {
  // Energy colour tint — multiply blend darkens the card toward --card-glow.
  // z-index 2 puts it above the card image (z-index 1) but below holo-shine (3).
  // Opacity tied to --card-opacity so it appears/disappears with the hover effect.
  &::after {
    content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius);
-    background: var(--card-glow);
+  z-index: 4;
-    mix-blend-mode: multiply;
+  transform: translateZ(0);
-    opacity: calc(var(--card-opacity) * 0.5);
+  overflow: hidden;
-    z-index: 2;
+  will-change: transform, opacity, background-image, background-size,
-    pointer-events: none;
+    background-position, background-blend-mode, filter;
    clip-path: polygon(
      0% 0%, 0% 100%, 100% 100%, 100% 0%, 0% 0%,
      8% 9.85%, 92% 9.85%, 92% 47.15%, 8% 47.15%, 8% 9.85%
    );
  }
  .holo-shine {
    // Energy-aware gradient — weaves --card-glow (set per data-energy on the
    // wrapper) into the prismatic colour sequence so each energy type gets a
    // tinted shimmer: Grass = green, Fire = orange, Water = cyan, etc.
    background-image:
      var(--grain),
      repeating-linear-gradient(110deg,
        var(--card-glow),
        var(--blue),
        var(--card-glow),
        var(--green),
        var(--yellow),
        var(--card-glow),
        var(--red),
        var(--violet),
        var(--card-glow)
      );
    background-position:
      center center,
      calc(((50% - var(--background-x)) * 2.6) + 50%)
      calc(((50% - var(--background-y)) * 3.5) + 50%);
    background-size: 33%, 400% 400%;
    background-repeat: repeat, no-repeat;
    background-blend-mode: soft-light, normal;
    filter: brightness(1.0) contrast(1.0) saturate(1.4);
    clip-path: polygon(
      0% 0%, 0% 100%, 100% 100%, 100% 0%, 0% 0%,
      8% 9.85%, 92% 9.85%, 92% 47.15%, 8% 47.15%, 8% 9.85%
    ) !important;
  }
  .holo-glare {
    @include prismatic-glare;
    // Hot-spot tinted with energy colour to match the shine treatment
    background-image: radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      var(--card-glow)           0%,
      hsla(0, 0%, 100%, 0.3)   20%,
      hsla(0, 0%, 0%,   0.5)   90%
    );
    clip-path: polygon(
      0% 0%, 0% 100%, 100% 100%, 100% 0%, 0% 0%,
      8% 9.85%, 92% 9.85%, 92% 47.15%, 8% 47.15%, 8% 9.85%
    ) !important;
  }
 }
 // -----------------------------------------------------------------------------
-// 8. MODAL ANIMATION
+// 3.  MODES
 // -----------------------------------------------------------------------------
-// Note: --card-opacity is intentionally NOT registered via @property.
+// -- 3a. GRID -----------------------------------------------------------------
-// Registering it as <number> makes it interpolatable, causing the browser
+// No idle animation. Effect is invisible until hover.
 // to smoothly transition it when JS sets it via inline style — creating the
 // unwanted slow fade-in. Without registration it changes instantly.
@property --pointer-x         { syntax: '<percentage>'; inherits: true; initial-value: 50%;  }
@property --pointer-y         { syntax: '<percentage>'; inherits: true; initial-value: 50%;  }
@property --background-x      { syntax: '<percentage>'; inherits: true; initial-value: 50%;  }
@property --background-y      { syntax: '<percentage>'; inherits: true; initial-value: 50%;  }
@property --pointer-from-center { syntax: '<number>';   inherits: true; initial-value: 0;    }
@property --pointer-from-left   { syntax: '<number>';   inherits: true; initial-value: 0.5;  }
@property --pointer-from-top    { syntax: '<number>';   inherits: true; initial-value: 0.5;  }
-@keyframes holo-modal-opacity {
+.image-grow,
-  0%       { opacity: 0; }
+.card-image-wrap {
-  4%       { opacity: 0; }
+  @extend %holofoil-wrapper-base;
-  8%       { opacity: 0.35; }
+  @extend %holofoil-energy-glows;
-  85%      { opacity: 0.35; }
+
-  90%, 100%{ opacity: 0; }
+  // No effect if the image fell back to default.jpg
  &[data-default="true"] {
    .holo-shine,
    .holo-glare { display: none !important; }
  }
  .holo-shine { @extend %shine-base; }
  .holo-glare { @extend %glare-base; }
 }
-@keyframes holo-modal-position {
+
 // -- 3b. GRID HOVER -----------------------------------------------------------
 // The existing main.scss .image-grow:hover handles lift + scale.
 // We layer the holo effect on top without overriding transform or transition.
 .image-grow:hover,
 .image-grow[data-holo-active] {
  --card-opacity: 0.45;
 }
 // -- 3c. MODAL ----------------------------------------------------------------
 // Sweeps once per minute. Peaks at 0.35.
 // Pointer tracking bumps opacity to 0.45 while hovering.
@keyframes holo-modal-pulse {
  0% {
    --card-opacity: 0;
    --pointer-x: 50%; --pointer-y: 50%;
    --background-x: 50%; --background-y: 50%;
    --pointer-from-center: 0; --pointer-from-left: 0.5; --pointer-from-top: 0.5;
  }
  4%  { --card-opacity: 0; }
  8% {
    --card-opacity: 0.35;
    --pointer-x: 25%; --pointer-y: 15%;
    --background-x: 38%; --background-y: 28%;
    --pointer-from-center: 0.85; --pointer-from-left: 0.25; --pointer-from-top: 0.15;
@@ -512,11 +175,14 @@
    --pointer-from-center: 0.8; --pointer-from-left: 0.35; --pointer-from-top: 0.80;
  }
  85% {
    --card-opacity: 0.35;
    --pointer-x: 25%; --pointer-y: 15%;
    --background-x: 38%; --background-y: 28%;
    --pointer-from-center: 0.85;
  }
  90%  { --card-opacity: 0; }
  100% {
    --card-opacity: 0;
    --pointer-x: 50%; --pointer-y: 50%;
    --background-x: 50%; --background-y: 50%;
    --pointer-from-center: 0;
@@ -524,162 +190,160 @@
 }
 .card-image-wrap.holo-modal-mode {
-  // Animate pointer vars on the wrapper so CSS custom props interpolate
+  --card-opacity: 0;
  animation: holo-modal-position 60s ease-in-out infinite;
  animation-delay: var(--shimmer-delay, -2s);
  .holo-shine,
  .holo-glare {
-    // Animate opacity directly — no @property needed, native interpolation
+    animation: holo-modal-pulse 60s ease-in-out infinite;
    animation: holo-modal-opacity 60s ease-in-out infinite;
    animation-delay: var(--shimmer-delay, -2s);
  }
  &[data-holo-active] {
-    animation-play-state: paused;
+    --card-opacity: 0.45;
-    .holo-shine { opacity: 0.20; }
+    .holo-shine,
-    .holo-glare { opacity: calc(0.20 * 0.4); }
+    .holo-glare { animation-play-state: paused; }
  }
 }
 // -----------------------------------------------------------------------------
-// 9. MOBILE / TOUCH — static holofoil overlay, no JS tracking
+// 4.  RARITY -> CLIP-PATH BRIDGE
 //
 // @media (hover: none) targets touchscreens only.
 // Technique from joshdance.com/100/Day50: two rainbow gradients at opposing
 // fixed positions interact via blend modes to create a static holographic sheen.
 // Where the two gradient bands cross, the additive blending creates bright
 // rainbow intersections that read as a light-catch effect — no pointer needed.
 //
 // Implementation:
 //   - .holo-shine gets the two-gradient stack at fixed diagonal positions
 //   - ::before moves in the opposite direction (negative position) so the
 //     crossing point creates the characteristic holofoil bright intersection
 //   - opacity is always-on at a low value — no hover event needed
 //   - will-change reset to auto — no GPU layer reservation needed
 //   - Glitter hidden — parallax position is meaningless without tracking
 //   - No CSS animation on touch — pure static CSS, zero JS involvement
 // -----------------------------------------------------------------------------
-@media (hover: none) {
+.image-grow,
 .card-image-wrap {
  // No effect on common/uncommon or unrecognised wrapper
  &[data-rarity="common"],
  &[data-rarity="uncommon"],
  &:not([data-rarity]) {
    .holo-shine,
    .holo-glare { display: none; }
  }
  // Standard holo — artwork area only
  &[data-rarity="rare holo"] {
    .holo-shine                               { clip-path: var(--clip); }
    &[data-subtypes^="stage"]      .holo-shine { clip-path: var(--clip-stage); }
    &[data-subtypes^="supporter"]  .holo-shine,
    &[data-subtypes^="item"]       .holo-shine { clip-path: var(--clip-trainer); }
  }
  // Cosmos holo
  &[data-rarity="rare holo cosmos"] {
    .holo-shine                               { clip-path: var(--clip); }
    &[data-subtypes^="stage"]      .holo-shine { clip-path: var(--clip-stage); }
    &[data-subtypes^="supporter"]  .holo-shine { clip-path: var(--clip-trainer); }
  }
  &[data-rarity="radiant rare"]               { .holo-shine { clip-path: var(--clip-borders); } }
  &[data-rarity="amazing rare"]               { .holo-shine { clip-path: var(--clip); } }
  &[data-rarity="trainer gallery rare holo"],
  &[data-rarity="rare holo"][data-trainer-gallery="true"] {
    .holo-shine { clip-path: var(--clip-borders); }
  }
  &[data-rarity="rare shiny"] {
    .holo-shine                            { clip-path: var(--clip); }
    &[data-subtypes^="stage"] .holo-shine  { clip-path: var(--clip-stage); }
  }
  // Reverse holo by rarity — borders only
  &[data-rarity$="reverse holo"]     { .holo-shine { clip-path: var(--clip-invert); } }
  // Reverse Holofoil variant — borders only
  &[data-variant="Reverse Holofoil"] { .holo-shine { clip-path: var(--clip-invert); } }
  // True holofoil variants + full-bleed rarities — no clip
  &[data-variant="Holofoil"],
  &[data-variant="1st Edition Holofoil"],
  &[data-variant="Unlimited Holofoil"],
  &[data-rarity="rare ultra"],
  &[data-rarity="rare holo v"],
  &[data-rarity="rare holo vmax"],
  &[data-rarity="rare holo vstar"],
  &[data-rarity="rare shiny v"],
  &[data-rarity="rare shiny vmax"],
  &[data-rarity="rare rainbow"],
  &[data-rarity="rare rainbow alt"],
  &[data-rarity="rare secret"] {
    .holo-shine { clip-path: none; }
  }
  // Foil variant shine/glare — clip handled above per variant type
  &[data-variant="Holofoil"],
  &[data-variant="Reverse Holofoil"],
  &[data-variant="1st Edition Holofoil"],
  &[data-variant="Unlimited Holofoil"] {
    .holo-shine {
      background-image:
        radial-gradient(
          circle at var(--pointer-x) var(--pointer-y),
          #fff 5%, #000 50%, #fff 80%
        ),
        linear-gradient(
          var(--foil-angle, -45deg),
          #000 15%, #fff, #000 85%
        );
      background-blend-mode: soft-light, difference;
      background-size: 120% 120%, 200% 200%;
      background-position:
        center center,
        calc(100% * var(--pointer-from-left)) calc(100% * var(--pointer-from-top));
      filter: brightness(var(--foil-brightness, 0.4)) contrast(1.3) saturate(var(--foil-saturation, 0.5));
      mix-blend-mode: color-dodge;
      opacity: calc((var(--card-opacity) * 0.9) - (var(--pointer-from-center) * 0.1));
    }
    .holo-glare {
-    will-change: auto;
+      opacity: calc(var(--card-opacity) * 0.5);
      background-image: radial-gradient(
        farthest-corner circle at var(--pointer-x) var(--pointer-y),
        hsla(0, 0%, 100%, 0.5)  10%,
        hsla(0, 0%, 100%, 0.25) 30%,
        hsla(0, 0%, 0%,   0.4)  90%
      );
      filter: brightness(0.7) contrast(1.2);
      mix-blend-mode: overlay;
    }
  // Disable any animation on modal cards on touch — static treatment handles it
  .card-image-wrap.holo-modal-mode {
    animation: none;
    .holo-shine,
    .holo-glare { animation: none; }
  }
 }
  // Suppress glitter — parallax position is meaningless without pointer tracking
  .holo-glare::after { display: none; }
-  // ── Static holofoil overlay for all effect zones on touch ─────────────────
+// -----------------------------------------------------------------------------
-  // Override the JS-driven background-position values with fixed diagonals.
+// 5.  DEFAULT HOLO SHINE / GLARE
-  // The ::before pseudo moves in the opposite direction to create crossing bands.
+//     Fallback for rarities not explicitly handled above.
 // -----------------------------------------------------------------------------
-  .image-grow,
+.image-grow,
-  .card-image-wrap {
+.card-image-wrap {
-
+  &[data-rarity]:not([data-rarity="common"]):not([data-rarity="uncommon"]) {
    // Zone 1 — art window
    &[data-rarity="Rare" i]:not([data-variant="Reverse Holofoil" i]):not([data-variant="Normal" i]),
    &[data-rarity="Amazing Rare" i]:not([data-variant="Reverse Holofoil" i]),
    &[data-rarity="Classic Collection" i]:not([data-variant="Reverse Holofoil" i]),
    &[data-rarity="Holo Rare" i]:not([data-variant="Reverse Holofoil" i]),
    &[data-variant="Holofoil" i]:not([data-variant="Reverse Holofoil" i]),
    &[data-variant="1st Edition Holofoil" i],
    // Zone 2 — full card
    &[data-rarity="Ultra Rare" i]:not([data-variant="Reverse Holofoil" i]),
    &[data-rarity="Character Rare" i]:not([data-variant="Reverse Holofoil" i]),
    &[data-rarity="Illustration Rare" i]:not([data-variant="Reverse Holofoil" i]),
    &[data-rarity="Special Illustration Rare" i]:not([data-variant="Reverse Holofoil" i]),
    &[data-rarity="Double Rare" i]:not([data-variant="Reverse Holofoil" i]),
    &[data-rarity="Hyper Rare" i]:not([data-variant="Reverse Holofoil" i]),
    &[data-rarity="Mega Rare" i]:not([data-variant="Reverse Holofoil" i]),
    &[data-rarity="Mega Attack Rare" i]:not([data-variant="Reverse Holofoil" i]),
    &[data-rarity="ACE Spec Rare" i]:not([data-variant="Reverse Holofoil" i]),
    &[data-rarity="ACE Rare" i]:not([data-variant="Reverse Holofoil" i]),
    &[data-rarity="Art Rare" i]:not([data-variant="Reverse Holofoil" i]),
    &[data-rarity="Special Art Rare" i]:not([data-variant="Reverse Holofoil" i]),
    &[data-rarity="Black White Rare" i]:not([data-variant="Reverse Holofoil" i]),
    &[data-rarity="Character Super Rare" i]:not([data-variant="Reverse Holofoil" i]),
    &[data-rarity="Mega Ultra Rare" i]:not([data-variant="Reverse Holofoil" i]),
    &[data-rarity="Rare BREAK" i]:not([data-variant="Reverse Holofoil" i]),
    &[data-rarity="Secret Rare" i]:not([data-variant="Reverse Holofoil" i]),
    &[data-rarity="Shiny Holo Rare" i]:not([data-variant="Reverse Holofoil" i]),
    &[data-rarity="Shiny Rare" i]:not([data-variant="Reverse Holofoil" i]),
    &[data-rarity="Shiny Secret Rare" i]:not([data-variant="Reverse Holofoil" i]),
    &[data-rarity="Shiny Ultra Rare" i]:not([data-variant="Reverse Holofoil" i]),
    // Zone 3 — inverse (Reverse Holofoil + Prism Rare)
    // Energy colour woven in via --card-glow, same as desktop Zone 3
    &[data-variant="Reverse Holofoil" i],
    &[data-rarity="Prism Rare" i] {
      // Energy colour multiply tint — kept subtle on mobile
      &::after {
        opacity: 0.04;
      }
    .holo-shine {
      background-image:
          var(--grain),
        repeating-linear-gradient(110deg,
-            var(--card-glow),
+          var(--violet), var(--blue), var(--green), var(--yellow), var(--red),
-            var(--blue),
+          var(--violet), var(--blue), var(--green), var(--yellow), var(--red)
            var(--card-glow),
            var(--green),
            var(--yellow),
            var(--card-glow),
            var(--red),
            var(--violet),
            var(--card-glow)
          );
        background-size: 33%, 400% 400%;
        background-repeat: repeat, no-repeat;
        background-blend-mode: soft-light, normal;
        background-position: center, 38% 25%;
        filter: brightness(1.0) contrast(1.1) saturate(1.0);
        opacity: 0.35;
        &::before {
          background-image:
            repeating-linear-gradient(110deg,
              var(--card-glow),
              var(--blue),
              var(--card-glow),
              var(--green),
              var(--yellow),
              var(--card-glow),
              var(--red),
              var(--violet),
              var(--card-glow)
        );
      background-position:
        calc(((50% - var(--background-x)) * 2.6) + 50%)
        calc(((50% - var(--background-y)) * 3.5) + 50%);
      background-size: 400% 400%;
-          background-position: 62% 75%;
+      filter: brightness(0.7) contrast(0.9) saturate(0.8);
      mix-blend-mode: color-dodge;
-          opacity: 0.18;
+      opacity: calc(var(--card-opacity) * 0.6);
          filter: brightness(1.0) contrast(1.1) saturate(1.0);
        }
        &::after { display: none; }
    }
    .holo-glare {
        opacity: 0.15;
      background-image: radial-gradient(
-          farthest-corner circle at 35% 25%,
+        farthest-corner circle at var(--pointer-x) var(--pointer-y),
-          var(--card-glow)          0%,
+        hsla(0, 0%, 100%, 0.35) 10%,
-          hsla(0, 0%, 100%, 0.2)   30%,
+        hsla(0, 0%, 100%, 0.15) 30%,
-          hsla(0, 0%, 0%,   0.3)   90%
+        hsla(0, 0%, 0%,   0.35) 90%
      );
-        filter: brightness(0.8) contrast(1.5);
+      opacity: calc(var(--card-opacity) * 0.4);
-      }
+      mix-blend-mode: overlay;
      filter: brightness(0.7) contrast(1.1);
    }
  }
 }
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -24,7 +24,7 @@ $container-max-widths: (
@import "_bootstrap";
 // ── Holofoil ──────────────────────────────────────────────────────────────
-@import "_holofoil-integration";   // also pulls in _card.scss
+//@import "_holofoil-integration";   // also pulls in _card.scss
 /* --------------------------------------------------
   Root Variables
@@ -172,6 +172,16 @@ html {
  }
 }
 .col:has(.image-grow:hover) .inventory-button {
  opacity: 0.20;
  transition: opacity 350ms ease;
 }
 .inventory-button {
  // add transition to existing rule
  transition: opacity 350ms ease;
 }
 .card-modal {
  background-color: rgba(1, 11, 18, 0.8);
  cursor: default;
@@ -278,6 +288,40 @@ $tiers: (
  }
 }
 // ── Inventory form condition buttons ──────────────────────────────────────
 // Reuses $tiers map so colors stay in sync with nav tabs and price-row
 $cond-text: (
  nm:  rgba(156, 204, 102, 1),
  lp:  rgba(211, 225, 86, 1),
  mp:  rgba(255, 238, 87, 1),
  hp:  rgba(255, 201, 41, 1),
  dmg: rgba(255, 167, 36, 1),
 );
@each $name, $color in $tiers {
  @if map-has-key($cond-text, $name) {
    .btn-check:checked + .btn-cond-#{$name} {
      background-color: $color;
      border-color: $color;
      color: rgba(0, 0, 0, 0.94);
    }
      .btn-cond-#{$name} {
        border-color: rgba($color, 0.4);
        color: var(--bs-body-color);
        background: transparent;
        font-weight: 600;
        transition: background-color 0.1s, border-color 0.1s;
      }
      .btn-check:not(:checked) + .btn-cond-#{$name}:hover {
        background-color: rgba($color, 0.67);
        border-color: transparent;
      }
    }
  }
 /* --------------------------------------------------
   Misc UI
 -------------------------------------------------- */
@@ -378,6 +422,30 @@ $tiers: (
  stroke: var(--bs-info-border-subtle);
 }
 .delete-svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: var(--bs-danger);
  stroke: var(--bs-danger);
 }
 .edit-svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: var(--bs-warning);
  stroke: var(--bs-warning);
 }
 .btn:hover .delete-svg {
  fill: var(--bs-danger-border-subtle);
  stroke: var(--bs-danger-border-subtle);
 }
 .btn:hover .edit-svg {
  fill: var(--bs-warning-border-subtle);
  stroke: var(--bs-warning-border-subtle);
 }
 .shadow-filter {
  filter:
    drop-shadow(0 5px 5px rgba(0, 0, 0, 0.3))
@@ -417,21 +485,20 @@ $tiers: (
  );
 }
-.inventory-button {
+.inventory-button, .btn-vendor {
  width: 40px;
  height: 40px;
  margin-bottom: -2rem;
  margin-right: -0.25rem;
  border-radius: 0.33rem;
  background-color: hsl(262, 47%, 55%);
  color: #fff;
 }
-.inventory-label {
+.inventory-button {
-  width: 100%;
+  margin-bottom: -2.25rem;
-  height: 100%;
+  margin-right: -0.25rem;
-  font-size: 1rem;
+  z-index: 2;
-  font-weight: 700;
+}
 .inventory-button:hover, .btn-vendor:hover {
  background-color: hsl(262, 39%, 40%);
  color: #fff;
 }
 .fs-7 {
--- a/src/assets/js/holofoil-init.js
+++ b/src/assets/js/holofoil-init.js
@@ -1,57 +1,53 @@
 /**
 * holofoil-init.js
 * -----------------------------------------------------------------------------
 * Instruments .image-grow and .card-image-wrap with the holofoil effect system.
 *
 *  GRID (.image-grow)
 *    Effect is invisible at rest. On hover, pointer tracking drives the shine
 *    and glare layers. The card lift/scale comes from main.scss as before.
 *
 *  MODAL (.card-image-wrap)
 *    Effect sweeps autonomously once per minute via CSS animation.
 *    Pointer tracking takes over while the user hovers the image.
 *
 *  DEFAULT FALLBACK
 *    If data-default="true" is set (onerror in the Astro markup), no effect
 *    is applied -- even if the attribute appears after stamp() has run.
 * -----------------------------------------------------------------------------
 */
 (function HolofoilSystem() {
  'use strict';
-  // Variants that receive NO effect
+  // -- Constants --------------------------------------------------------------
  const NO_EFFECT_VARIANTS = new Set(['normal']);
-  // Variants that always receive an effect regardless of rarity
+  const SHIMMER_SEL = [
-  const HOLO_VARIANTS = new Set([
+    '.image-grow[data-rarity]',
-    'reverse holofoil',
+    '.image-grow[data-variant="Holofoil"]',
-    'holofoil',
+    '.image-grow[data-variant="1st Edition Holofoil"]',
-    '1st edition holofoil',
+    '.image-grow[data-variant="Unlimited Holofoil"]',
-  ]);
+    '.image-grow[data-variant="Reverse Holofoil"]',
-
+    '.card-image-wrap[data-rarity]',
-  // Rarities that receive an effect
+    '.card-image-wrap[data-variant="Holofoil"]',
-  const HOLO_RARITIES = new Set([
+    '.card-image-wrap[data-variant="1st Edition Holofoil"]',
-    // Art window zone
+    '.card-image-wrap[data-variant="Unlimited Holofoil"]',
-    'rare',
+    '.card-image-wrap[data-variant="Reverse Holofoil"]',
-    'amazing rare',
+  ].join(',');
    'classic collection',
    'holo rare',
    // Full card zone
    'ultra rare',
    'character rare',
    'illustration rare',
    'special illustration rare',
    'double rare',
    'hyper rare',
    'mega rare',
    'mega attack rare',
    'ace spec rare',
    'ace rare',
    'art rare',
    'special art rare',
    'black white rare',
    'character super rare',
    'mega ultra rare',
    'rare break',
    'secret rare',
    'shiny holo rare',
    'shiny rare',
    'shiny secret rare',
    'shiny ultra rare',
    // Inverse zone
    'prism rare',
  ]);
  const ALL_WRAPPERS_SEL = '.image-grow, .card-image-wrap';
  // Foil variant visual randomisation
  const FOIL_ANGLE_MIN = -65,  FOIL_ANGLE_MAX = -25;
  const FOIL_BRITE_MIN = 0.18, FOIL_BRITE_MAX = 0.32;
  const FOIL_SAT_MIN   = 0.40, FOIL_SAT_MAX   = 0.75;
  const SKIP_RARITIES = new Set(['common', 'uncommon', '']);
  // -- Helpers ----------------------------------------------------------------
  const rand = (min, max) => parseFloat((Math.random() * (max - min) + min).toFixed(2));
  const clamp01 = n => Math.max(0, Math.min(1, n));
@@ -65,8 +61,8 @@
      fromLeft,
      fromTop,
      fromCenter,
-      bgX: 50 + (fromLeft - 0.5) * -30,
+      bgX:        50 + (fromLeft - 0.5) * 30,
-      bgY: 50 + (fromTop  - 0.5) * -30,
+      bgY:        50 + (fromTop  - 0.5) * 30,
    };
  }
@@ -80,18 +76,12 @@
    el.style.setProperty('--background-y',        v.bgY.toFixed(1) + '%');
  }
-  function shouldHaveEffect(el) {
+  const isHoloVariant  = v => ['Holofoil', 'Reverse Holofoil', '1st Edition Holofoil', 'Unlimited Holofoil'].includes(v);
-    if (el.dataset.default === 'true') return false;
+  const isModalWrapper = el => el.classList.contains('card-image-wrap');
-    // Also check if the card image itself is the default fallback
+  const isDefault      = el => el.dataset.default === 'true';
-    const img = el.querySelector('img');
+
-    if (img && img.src && img.src.endsWith('/cards/default.jpg')) return false;
+
-    const variant = (el.dataset.variant || '').toLowerCase().trim();
+  // -- Child injection --------------------------------------------------------
    const rarity  = (el.dataset.rarity  || '').toLowerCase().trim();
    if (NO_EFFECT_VARIANTS.has(variant)) return false;
    if (HOLO_VARIANTS.has(variant)) return true;
    if (HOLO_RARITIES.has(rarity))  return true;
    return false;
  }
  function injectChildren(el) {
    if (el.querySelector('.holo-shine')) return;
@@ -103,10 +93,18 @@
    el.appendChild(glare);
  }
  // -- Default image guard ----------------------------------------------------
  /**
   * Watch for the onerror handler in the Astro markup setting data-default="true"
   * after stamp() has already run. Hide the effect children immediately when seen.
   */
  function watchForDefault(el) {
-    if (el.dataset.default === 'true') return;
+    if (isDefault(el)) return;
    var observer = new MutationObserver(function() {
-      if (el.dataset.default === 'true') {
+      if (isDefault(el)) {
        var shine = el.querySelector('.holo-shine');
        var glare = el.querySelector('.holo-glare');
        if (shine) shine.style.display = 'none';
@@ -114,54 +112,81 @@
        observer.disconnect();
      }
    });
    observer.observe(el, { attributes: true, attributeFilter: ['data-default'] });
  }
-  const canHover = window.matchMedia('(hover: hover)').matches;
+
  // -- Stamp ------------------------------------------------------------------
  function stamp(el) {
    if (el.dataset.holoInit) return;
-    if (!shouldHaveEffect(el)) {
+
    // Skip if already a default fallback image
    if (isDefault(el)) {
      el.dataset.holoInit = 'skip';
      return;
    }
    const rarity  = (el.dataset.rarity  || '').toLowerCase();
    const variant =  el.dataset.variant  || '';
    const hasHoloRarity  = rarity && !SKIP_RARITIES.has(rarity);
    const hasHoloVariant = isHoloVariant(variant);
    if (!hasHoloRarity && !hasHoloVariant) {
      el.dataset.holoInit = 'skip';
      return;
    }
    injectChildren(el);
-    if (el.classList.contains('card-image-wrap')) {
+
-      if (canHover) {
+    // Per-card foil visual randomisation (angle/brightness/saturation)
-        // Desktop: use hover + pointer tracking, same as grid cards.
+    if (hasHoloVariant) {
-        // No animation — CSS :hover rule controls --card-opacity directly.
+      el.style.setProperty('--foil-angle',      Math.round(rand(FOIL_ANGLE_MIN, FOIL_ANGLE_MAX)) + 'deg');
-        el.classList.remove('holo-modal-mode');
+      el.style.setProperty('--foil-brightness', rand(FOIL_BRITE_MIN, FOIL_BRITE_MAX).toFixed(2));
-      } else {
+      el.style.setProperty('--foil-saturation', rand(FOIL_SAT_MIN,   FOIL_SAT_MAX  ).toFixed(2));
-        // Touch: use the autonomous CSS animation sweep.
+    }
    // Modal-only: set a stable delay offset for the autonomous CSS animation
    if (isModalWrapper(el)) {
      el.classList.add('holo-modal-mode');
      el.style.setProperty('--shimmer-delay', rand(-8, 0) + 's');
    }
-    }
+
    watchForDefault(el);
    el.dataset.holoInit = '1';
  }
  function stampAll(root) {
    (root || document).querySelectorAll(ALL_WRAPPERS_SEL).forEach(stamp);
  }
  // -- Pointer tracking -------------------------------------------------------
  const pointerState = new WeakMap();
  function onPointerEnter(e) {
    const el = e.currentTarget;
-    if (el.dataset.holoInit !== '1') return;
+    if (el.dataset.holoInit !== '1' || isDefault(el)) return;
    el.dataset.holoActive = '1';
    // Inline style wins over CSS immediately — @property not registered for
    // --card-opacity so no interpolation. All calc() multipliers in child
    // rules (glare * 0.4, glitter * 0.6) work correctly from this single var.
    el.style.setProperty('--card-opacity', '0.2');
    if (!pointerState.has(el)) pointerState.set(el, { rafId: null });
  }
  function onPointerMove(e) {
    const el = e.currentTarget;
    if (el.dataset.holoInit !== '1') return;
    const state = pointerState.get(el);
    if (!state) return;
    if (state.rafId) cancelAnimationFrame(state.rafId);
    state.rafId = requestAnimationFrame(function() {
-      applyPointerVars(el, pointerVars(e.clientX, e.clientY, el.getBoundingClientRect()));
+      const rect = el.getBoundingClientRect();
      applyPointerVars(el, pointerVars(e.clientX, e.clientY, rect));
      state.rafId = null;
    });
  }
@@ -169,39 +194,46 @@
  function onPointerLeave(e) {
    const el = e.currentTarget;
    if (el.dataset.holoInit !== '1') return;
    const state = pointerState.get(el);
    if (state && state.rafId) { cancelAnimationFrame(state.rafId); state.rafId = null; }
    delete el.dataset.holoActive;
-    // Remove inline style so CSS default (--card-opacity: 0) takes over instantly
+
    if (isModalWrapper(el)) {
      // Let the CSS animation resume driving --card-opacity
      el.style.removeProperty('--card-opacity');
    }
  }
  function attachListeners(el) {
    if (el.dataset.holoListeners) return;
    // On touch-only devices the CSS static shimmer handles the effect.
    // Skip JS pointer tracking — pointermove never fires on touchscreens
    // and registering listeners wastes memory with no benefit.
    if (!window.matchMedia('(hover: hover)').matches) return;
    el.addEventListener('pointerenter', onPointerEnter, { passive: true });
    el.addEventListener('pointermove',  onPointerMove,  { passive: true });
    el.addEventListener('pointerleave', onPointerLeave, { passive: true });
    el.dataset.holoListeners = '1';
  }
-  function stampAll(root) {
+  function attachAllListeners(root) {
-    (root || document).querySelectorAll(ALL_WRAPPERS_SEL).forEach(function(el) {
+    (root || document).querySelectorAll(SHIMMER_SEL).forEach(function(el) {
      stamp(el);
      if (el.dataset.holoInit === '1') attachListeners(el);
    });
  }
  // -- MutationObserver: react to HTMX / infinite scroll ----------------------
  function observeGrid() {
    var grid = document.getElementById('cardGrid');
    if (!grid) return;
    new MutationObserver(function(mutations) {
-      mutations.forEach(function(m) {
+      for (var i = 0; i < mutations.length; i++) {
-        m.addedNodes.forEach(function(node) {
+        var nodes = mutations[i].addedNodes;
-          if (node.nodeType !== 1) return;
+        for (var j = 0; j < nodes.length; j++) {
          var node = nodes[j];
          if (node.nodeType !== 1) continue;
          if (node.matches && node.matches(ALL_WRAPPERS_SEL)) {
            stamp(node);
            if (node.dataset.holoInit === '1') attachListeners(node);
@@ -212,8 +244,8 @@
              if (el.dataset.holoInit === '1') attachListeners(el);
            });
          }
-        });
+        }
-      });
+      }
    }).observe(grid, { childList: true, subtree: true });
  }
@@ -221,32 +253,20 @@
    var modal = document.getElementById('cardModal');
    if (!modal) return;
-    new MutationObserver(function(mutations) {
+    new MutationObserver(function() {
-      mutations.forEach(function(m) {
+      modal.querySelectorAll(ALL_WRAPPERS_SEL).forEach(function(el) {
        m.addedNodes.forEach(function(node) {
          if (node.nodeType !== 1) return;
          var wrappers = [];
          if (node.matches && node.matches(ALL_WRAPPERS_SEL)) wrappers.push(node);
          if (node.querySelectorAll) {
            node.querySelectorAll(ALL_WRAPPERS_SEL).forEach(function(el) {
              wrappers.push(el);
            });
          }
          wrappers.forEach(function(el) {
            // Reset stamp so each new card is evaluated fresh
            delete el.dataset.holoInit;
        stamp(el);
        if (el.dataset.holoInit === '1') attachListeners(el);
      });
        });
      });
    }).observe(modal, { childList: true, subtree: true });
  }
  // -- Bootstrap --------------------------------------------------------------
  function init() {
    stampAll();
    attachAllListeners();
    observeGrid();
    observeModal();
  }
--- a/src/assets/js/main.js
+++ b/src/assets/js/main.js
@@ -1,52 +1,97 @@
 import * as bootstrap from 'bootstrap';
 window.bootstrap = bootstrap;
 import 'bootstrap/dist/js/bootstrap.bundle.min.js';
-// trap browser back and close the modal if open
+document.addEventListener('DOMContentLoaded', () => {
 const cardModal = document.getElementById('cardModal');
 const loadingMsg = cardModal.innerHTML;
 // Push a new history state when the modal is shown
 cardModal.addEventListener('shown.bs.modal', () => {
  history.pushState({ modalOpen: true }, null, '#cardModal');
 });
 // Listen for the browser's back button (popstate event)
 window.addEventListener('popstate', (e) => {
  if (cardModal.classList.contains('show')) {
    const modalInstance = bootstrap.Modal.getInstance(cardModal);
    if (modalInstance) {
      modalInstance.hide();
    }
  }
 });
 // Trigger a back navigation when the modal is closed via its native controls (X, backdrop click)
 cardModal.addEventListener('hide.bs.modal', () => {
  cardModal.innerHTML = loadingMsg;
  if (history.state && history.state.modalOpen) {
    history.back();
  }
 });
  // Initialize all Bootstrap modals
  document.querySelectorAll('.modal').forEach(modalEl => {
    bootstrap.Modal.getOrCreateInstance(modalEl);
  });
-  import { Tooltip } from "bootstrap";
+  // Initialize tooltips
  // Initialize all tooltips globally
  const initTooltips = () => {
  document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
    if (!el._tooltipInstance) {
-        el._tooltipInstance = new Tooltip(el, {
+      el._tooltipInstance = new bootstrap.Tooltip(el, { container: 'body' });
          container: 'body',   // ensures tooltip is appended to body, important for modals
        });
    }
  });
  };
-  // Run on page load
+  // ---------------- DASHBOARD LOGIC ----------------
-  if (document.readyState === 'loading') {
+  const toggleBtn = document.getElementById("toggleViewBtn");
-    document.addEventListener('DOMContentLoaded', initTooltips);
+  const gridView = document.getElementById("gridView");
  const tableView = document.getElementById("tableView");
  const searchInput = document.getElementById("inventorySearch");
  const tbody = document.getElementById("inventoryRows");
  if(toggleBtn && gridView && tableView && tbody) {
    // TOGGLE GRID/TABLE
    toggleBtn.addEventListener("click", () => {
      if(gridView.style.display !== "none") {
        gridView.style.display = "none";
        tableView.style.display = "block";
        toggleBtn.textContent = "Switch to Grid View";
      } else {
-    initTooltips();
+        gridView.style.display = "block";
        tableView.style.display = "none";
        toggleBtn.textContent = "Switch to Table View";
      }
    });
    // SEARCH FILTER
    if(searchInput) {
      searchInput.addEventListener("input", e => {
        const term = e.target.value.toLowerCase();
        [...tbody.querySelectorAll("tr")].forEach(row => {
          row.style.display = row.textContent.toLowerCase().includes(term) ? "" : "none";
        });
      });
    }
-  // Optional: observe DOM changes for dynamically added tooltips (e.g., modals loaded later)
+    // SORTING
-  const observer = new MutationObserver(() => initTooltips());
+    document.querySelectorAll("th[data-key]").forEach(th => {
-  observer.observe(document.body, { childList: true, subtree: true });
+      let sortAsc = true;
      th.addEventListener("click", () => {
        const key = th.dataset.key;
        const indexMap = {name:0,set:1,condition:2,qty:3,price:4,market:5,gain:6};
        const idx = indexMap[key];
        const rows = [...tbody.querySelectorAll("tr")];
        rows.sort((a,b) => {
          let aText = a.children[idx].textContent.replace(/\$|,/g,'').toLowerCase();
          let bText = b.children[idx].textContent.replace(/\$|,/g,'').toLowerCase();
          if(!isNaN(aText) && !isNaN(bText)) return sortAsc ? aText-bText : bText-aText;
          return sortAsc ? aText.localeCompare(bText) : bText.localeCompare(aText);
        });
        sortAsc = !sortAsc;
        tbody.innerHTML="";
        rows.forEach(r => tbody.appendChild(r));
      });
    });
    // INLINE EDITING + GAIN/LOSS UPDATE
    tbody.addEventListener("input", e => {
      const row = e.target.closest("tr");
      if(!row) return;
      const priceCell = row.querySelector(".editable-price");
      const qtyCell = row.querySelector(".editable-qty");
      const marketCell = row.children[5];
      const gainCell = row.querySelector(".gain");
      if(e.target.classList.contains("editable-price")) {
        e.target.textContent = e.target.textContent.replace(/[^\d.]/g,"");
      }
      if(e.target.classList.contains("editable-qty")) {
        e.target.textContent = e.target.textContent.replace(/\D/g,"");
      }
      const price = parseFloat(priceCell.textContent) || 0;
      const qty = parseInt(qtyCell.textContent) || 0;
      const market = parseFloat(marketCell.textContent) || 0;
      const gain = market - price;
      gainCell.textContent = (gain>=0 ? "+" : "-") + Math.abs(gain);
      gainCell.className = gain>=0 ? "gain text-success" : "gain text-danger";
    });
  }
 });
--- a/src/assets/js/priceChart.js
+++ b/src/assets/js/priceChart.js
@@ -32,6 +32,12 @@ function setEmptyState(isEmpty) {
  canvasWrapper.classList.toggle('d-none', isEmpty);
 }
 function setChartVisible(visible) {
  const modal = document.getElementById('cardModal');
  const chartWrapper = modal?.querySelector('#priceHistoryChart')?.closest('.alert');
  if (chartWrapper) chartWrapper.classList.toggle('d-none', !visible);
 }
 function buildChartData(history, rangeKey) {
  const cutoff = RANGE_DAYS[rangeKey] === Infinity
    ? new Date(0)
@@ -39,20 +45,14 @@ function buildChartData(history, rangeKey) {
  const filtered = history.filter(r => new Date(r.calculatedAt) >= cutoff);
  // Always build the full date axis for the selected window, even if sparse.
  // Generate one label per day in the range so the x-axis reflects the
  // chosen period rather than collapsing to only the days that have data.
  const dataDateSet = new Set(filtered.map(r => r.calculatedAt));
  const allDates = [...dataDateSet].sort((a, b) => new Date(a) - new Date(b));
  // If we have real data, expand the axis to span from cutoff → today so
  // empty stretches at the start/end of a range are visible.
  let axisLabels = allDates;
  if (allDates.length > 0 && RANGE_DAYS[rangeKey] !== Infinity) {
    const start = new Date(cutoff);
    const end   = new Date();
    const expanded = [];
    // Step through every day in the window
    for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
      expanded.push(d.toISOString().split('T')[0]);
    }
@@ -101,17 +101,9 @@ function buildChartData(history, rangeKey) {
 function updateChart() {
  if (!chartInstance) return;
  const { labels, datasets, hasData, activeConditionHasData } = buildChartData(allHistory, activeRange);
  // Always push the new labels/datasets to the chart so the x-axis
  // reflects the selected time window — even when there's no data for
  // the active condition. Then toggle the empty state overlay on top.
  chartInstance.data.labels   = labels;
  chartInstance.data.datasets = datasets;
  chartInstance.update('none');
  // Show the empty state overlay if the active condition has no points
  // in this window, but leave the (empty) chart visible underneath so
  // the axis communicates the selected period.
  setEmptyState(!hasData || !activeConditionHasData);
 }
@@ -135,7 +127,6 @@ function initPriceChart(canvas) {
  const { labels, datasets, hasData, activeConditionHasData } = buildChartData(allHistory, activeRange);
  // Render the chart regardless — show empty state overlay if needed
  setEmptyState(!hasData || !activeConditionHasData);
  chartInstance = new Chart(canvas.getContext('2d'), {
@@ -202,9 +193,16 @@ function initFromCanvas(canvas) {
  activeCondition = "Near Mint";
  activeRange = '1m';
  const modal = document.getElementById('cardModal');
  modal?.querySelectorAll('.price-range-btn').forEach(b => {
    b.classList.toggle('active', b.dataset.range === '1m');
  });
  // Hide chart if the vendor tab is already active when the modal opens
  // (e.g. opened via the inventory button)
  const activeTab = modal?.querySelector('.nav-link.active')?.getAttribute('data-bs-target');
  setChartVisible(activeTab !== '#nav-vendor');
  initPriceChart(canvas);
 }
@@ -225,6 +223,10 @@ function setup() {
  document.addEventListener('shown.bs.tab', (e) => {
    if (!modal.contains(e.target)) return;
    const target = e.target?.getAttribute('data-bs-target');
    // Hide the chart when the vendor tab is active, show it for all others
    setChartVisible(target !== '#nav-vendor');
    const conditionMap = {
      '#nav-nm':  'Near Mint',
      '#nav-lp':  'Lightly Played',
--- a/src/components/CardGrid.astro
+++ b/src/components/CardGrid.astro
@@ -44,15 +44,147 @@ import BackToTop from "./BackToTop.astro"
 <BackToTop />
 <script src="src/assets/js/holofoil-init.js" is:inline></script>
 <script is:inline>
 (function () {
  // ── Price mode helpers ────────────────────────────────────────────────────
  // marketPriceByCondition is injected into the modal HTML via a data attribute
  // on #inventoryEntryList: data-market-prices='{"Near Mint":6.00,...}'
  // See card-modal.astro for where this is set.
  function getMarketPrices(form) {
    const listEl = form.closest('.tab-pane')?.querySelector('#inventoryEntryList')
      ?? document.getElementById('inventoryEntryList');
    try {
      return JSON.parse(listEl?.dataset.marketPrices || '{}');
    } catch {
      return {};
    }
  }
  function applyPriceModeUI(form, mode) {
    const priceInput  = form.querySelector('#purchasePrice');
    const pricePrefix = form.querySelector('#pricePrefix');
    const priceSuffix = form.querySelector('#priceSuffix');
    const priceHint   = form.querySelector('#priceHint');
    if (!priceInput) return;
    const isPct = mode === 'percent';
    pricePrefix?.classList.toggle('d-none', isPct);
    priceSuffix?.classList.toggle('d-none', !isPct);
    priceInput.step        = isPct ? '1'    : '0.01';
    priceInput.max         = isPct ? '100'  : '';
    priceInput.placeholder = isPct ? '0'    : '0.00';
    priceInput.classList.toggle('rounded-end',   !isPct);
    priceInput.classList.toggle('rounded-start',  isPct);
    if (priceHint && !isPct) priceHint.textContent = 'Enter the purchase price.';
  }
  function updatePriceHint(form) {
    const priceInput = form.querySelector('#purchasePrice');
    const priceHint  = form.querySelector('#priceHint');
    if (!priceInput || !priceHint) return;
    const mode = form.querySelector('input[name="priceMode"]:checked')?.value ?? 'dollar';
    if (mode !== 'percent') { priceHint.textContent = 'Enter the purchase price.'; return; }
    const condition   = form.querySelector('input[name="condition"]:checked')?.value ?? 'Near Mint';
    const prices      = getMarketPrices(form);
    const marketPrice = prices[condition] ?? 0;
    const pct         = parseFloat(priceInput.value) || 0;
    const resolved    = ((pct / 100) * marketPrice).toFixed(2);
    priceHint.textContent = marketPrice
      ? `= $${resolved} (${pct}% of $${marketPrice.toFixed(2)} market)`
      : 'No market price available for this condition.';
  }
  function resolveFormPrice(form) {
    // Returns a FormData ready to POST; % is converted to $ in-place.
    const data = new FormData(form);
    const mode = data.get('priceMode');
    if (mode === 'percent') {
      const condition   = data.get('condition');
      const prices      = getMarketPrices(form);
      const marketPrice = prices[condition] ?? 0;
      const pct         = parseFloat(data.get('purchasePrice')) || 0;
      data.set('purchasePrice', ((pct / 100) * marketPrice).toFixed(2));
    }
    data.delete('priceMode'); // UI-only field
    return data;
  }
  // ── Empty state helper ────────────────────────────────────────────────────
  function syncEmptyState(invList) {
    const emptyState = document.getElementById('inventoryEmptyState');
    if (!emptyState) return;
    const hasEntries = invList.querySelector('[data-inventory-id]') !== null;
    emptyState.classList.toggle('d-none', hasEntries);
  }
  // ── Inventory form init (binding price-mode UI events) ───────────────────
  function initInventoryForms(root = document) {
    // Fetch inventory entries for this card
    const invList = root.querySelector('#inventoryEntryList') || document.getElementById('inventoryEntryList');
    if (invList && !invList.dataset.inventoryFetched) {
      invList.dataset.inventoryFetched = 'true';
      const cardId = invList.dataset.cardId;
      if (cardId) {
        const body = new FormData();
        body.append('cardId', cardId);
        fetch('/api/inventory', { method: 'POST', body })
          .then(r => r.text())
          .then(html => {
            invList.innerHTML = html || '';
            syncEmptyState(invList);
          })
          .catch(() => { invList.innerHTML = '<span class="text-danger">Failed to load inventory</span>'; });
      }
    }
    const forms = root.querySelectorAll('[data-inventory-form]');
    forms.forEach((form) => {
      if (form.dataset.inventoryBound === 'true') return;
      form.dataset.inventoryBound = 'true';
      const priceInput  = form.querySelector('#purchasePrice');
      const modeInputs  = form.querySelectorAll('input[name="priceMode"]');
      const condInputs  = form.querySelectorAll('input[name="condition"]');
      // Set initial UI state
      const checkedMode = form.querySelector('input[name="priceMode"]:checked')?.value ?? 'dollar';
      applyPriceModeUI(form, checkedMode);
      // Mode toggle
      modeInputs.forEach((input) => {
        input.addEventListener('change', () => {
          if (priceInput) priceInput.value = ''; // clear stale value on mode switch
          applyPriceModeUI(form, input.value);
          updatePriceHint(form);
        });
      });
      // Condition change updates the hint when in % mode
      condInputs.forEach((input) => {
        input.addEventListener('change', () => updatePriceHint(form));
      });
      // Live hint as user types
      priceInput?.addEventListener('input', () => updatePriceHint(form));
      // Reset — restore to $ mode
      form.addEventListener('reset', () => {
        setTimeout(() => {
          applyPriceModeUI(form, 'dollar');
          updatePriceHint(form);
        }, 0);
      });
    });
  }
  // ── Sort dropdown ─────────────────────────────────────────────────────────
  document.addEventListener('click', (e) => {
    const sortBy = document.getElementById('sortBy');
    const btn = e.target.closest('#sortBy [data-bs-toggle="dropdown"]');
    if (btn) {
      e.preventDefault();
@@ -118,7 +250,6 @@ import BackToTop from "./BackToTop.astro"
      canvas.width = img.naturalWidth;
      canvas.height = img.naturalHeight;
      // Load with crossOrigin so toBlob() stays untainted
      await new Promise((resolve) => {
        const clean = new Image();
        clean.crossOrigin = 'anonymous';
@@ -172,6 +303,20 @@ import BackToTop from "./BackToTop.astro"
    }, 2000);
  }
  // ── Tab switching helper ──────────────────────────────────────────────────
  function switchToRequestedTab() {
    const tab = sessionStorage.getItem('openModalTab');
    if (!tab) return;
    sessionStorage.removeItem('openModalTab');
    requestAnimationFrame(() => {
      try {
        const tabEl = document.querySelector(`#cardModal [data-bs-target="#${tab}"]`);
        if (tabEl) bootstrap.Tab.getOrCreateInstance(tabEl).show();
      } catch (e) {
      }
    });
  }
  // ── State ─────────────────────────────────────────────────────────────────
  const cardIndex = [];
  let currentCardId = null;
@@ -259,10 +404,17 @@ import BackToTop from "./BackToTop.astro"
      if (modal._reconnectChartObserver) modal._reconnectChartObserver();
      modal.querySelectorAll('[data-bs-toggle="tab"]').forEach(el => {
        bootstrap.Tab.getInstance(el)?.dispose();
      });
      modal.innerHTML = html;
      if (typeof htmx !== 'undefined') htmx.process(modal);
      initInventoryForms(modal);
      updateNavButtons(modal);
      initChartAfterSwap(modal);
      switchToRequestedTab();
    };
    if (document.startViewTransition && direction) {
@@ -347,8 +499,14 @@ import BackToTop from "./BackToTop.astro"
        if (target._reconnectChartObserver) target._reconnectChartObserver();
        target.querySelectorAll('[data-bs-toggle="tab"]').forEach(el => {
          bootstrap.Tab.getInstance(el)?.dispose();
        });
        target.innerHTML = html;
        if (typeof htmx !== 'undefined') htmx.process(target);
        initInventoryForms(target);
        const destImg = target.querySelector('img.card-image');
        if (destImg) {
@@ -365,6 +523,7 @@ import BackToTop from "./BackToTop.astro"
      await transition.finished;
      updateNavButtons(target);
      initChartAfterSwap(target);
      switchToRequestedTab();
    } catch (err) {
      console.error('[card-modal] transition failed:', err);
@@ -380,13 +539,114 @@ import BackToTop from "./BackToTop.astro"
  });
  const cardModal = document.getElementById('cardModal');
  // ── Delegated submit handler for inventory form ──────────────────────────
  cardModal.addEventListener('submit', async (e) => {
    const form = e.target.closest('[data-inventory-form]');
    if (!form) return;
    e.preventDefault();
    if (!form.checkValidity()) { form.classList.add('was-validated'); return; }
    const cardId = form.closest('[data-card-id]')?.dataset.cardId;
    if (!cardId) return;
    const submitBtn = form.querySelector('button[type="submit"]');
    if (submitBtn) { submitBtn.disabled = true; submitBtn.textContent = 'Saving…'; }
    // resolveFormPrice converts % → $ and strips priceMode before POSTing
    const body = resolveFormPrice(form);
    body.append('action', 'add');
    body.append('cardId', cardId);
    try {
      const res = await fetch('/api/inventory', { method: 'POST', body });
      const html = await res.text();
      const invList = document.getElementById('inventoryEntryList');
      if (invList) {
        invList.innerHTML = html || '';
        syncEmptyState(invList);
      }
      form.reset();
      form.classList.remove('was-validated');
      // reset fires our listener which restores $ mode UI
    } catch {
      // keep current inventory list state
    } finally {
      if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = 'Save to inventory'; }
    }
  });
  // ── Delegated click handler for inventory entry buttons ─────────────────
  cardModal.addEventListener('click', async (e) => {
    const btn = e.target.closest('[data-inv-action]');
    if (!btn) return;
    const article = btn.closest('[data-inventory-id]');
    if (!article) return;
    const action = btn.dataset.invAction;
    const inventoryId = article.dataset.inventoryId;
    const cardId = article.dataset.cardId;
    const qtyEl = article.querySelector('[data-inv-qty]');
    let qty = Number(qtyEl?.textContent) || 1;
    if (action === 'increment') {
      qtyEl.textContent = ++qty;
      return;
    }
    if (action === 'decrement') {
      if (qty > 1) qtyEl.textContent = --qty;
      return;
    }
    // update or remove — POST to API and reload inventory list
    btn.disabled = true;
    const body = new FormData();
    body.append('cardId', cardId);
    if (action === 'update') {
      body.append('action', 'update');
      body.append('inventoryId', inventoryId);
      body.append('quantity', String(qty));
      body.append('purchasePrice', article.dataset.purchasePrice);
      body.append('note', article.dataset.note || '');
    } else if (action === 'remove') {
      body.append('action', 'remove');
      body.append('inventoryId', inventoryId);
    }
    try {
      const res = await fetch('/api/inventory', { method: 'POST', body });
      const html = await res.text();
      const invList = document.getElementById('inventoryEntryList');
      if (invList) {
        invList.innerHTML = html || '';
        syncEmptyState(invList);
      }
    } catch {
      // keep current state
    } finally {
      btn.disabled = false;
    }
  });
  cardModal.addEventListener('shown.bs.modal', () => {
    updateNavButtons(cardModal);
    initChartAfterSwap(cardModal);
    initInventoryForms(cardModal);
    switchToRequestedTab();
  });
  cardModal.addEventListener('hidden.bs.modal', () => {
    currentCardId = null;
    updateNavButtons(null);
  });
  document.addEventListener('DOMContentLoaded', () => {
    initInventoryForms();
  });
 })();
 </script>
--- a/src/components/InventoryTable.astro
+++ b/src/components/InventoryTable.astro
@@ -0,0 +1,37 @@
 ---
 const mockInventory = [
  { name: "Charizard", set: "Base Set", condition: "NM", qty: 2, price: 350, market: 400, gain: 50 },
  { name: "Pikachu", set: "Shining Legends", condition: "LP", qty: 5, price: 15, market: 20, gain: 5 },
 ];
 ---
 <div class="table-responsive">
  <table class="table table-dark table-striped table-hover align-middle">
    <thead>
      <tr>
        <th>Card</th>
        <th>Set</th>
        <th>Condition</th>
        <th>Qty</th>
        <th>Price</th>
        <th>Market</th>
        <th>Gain/Loss</th>
      </tr>
    </thead>
    <tbody>
      {mockInventory.map(card => (
        <tr>
          <td>{card.name}</td>
          <td>{card.set}</td>
          <td>{card.condition}</td>
          <td>{card.qty}</td>
          <td>${card.price}</td>
          <td>${card.market}</td>
          <td class={card.gain >= 0 ? "text-success" : "text-danger"}>
            {card.gain >= 0 ? "+" : "-"}${Math.abs(card.gain)}
          </td>
        </tr>
      ))}
    </tbody>
  </table>
 </div>
--- a/src/db/relations.ts
+++ b/src/db/relations.ts
@@ -21,9 +21,21 @@ export const relations = defineRelations(schema, (r) => ({
        }),
        history: r.many.priceHistory(),
        latestSales: r.many.salesHistory(),
        inventories: r.many.inventory(),
    },
    inventory: {
        card: r.one.cards({
            from: r.inventory.cardId,
            to: r.cards.cardId,
        }),
        sku: r.one.skus({
            from: [r.inventory.cardId, r.inventory.condition],
            to: [r.skus.cardId, r.skus.condition],
        }),
    },
    cards: {
        prices: r.many.skus(),
        inventories: r.many.inventory(),
        set: r.one.sets({
            from: r.cards.setId,
            to: r.sets.setId,
--- a/src/db/schema.ts
+++ b/src/db/schema.ts
@@ -1,5 +1,5 @@
 //import { mysqlTable, int, varchar, boolean, decimal, datetime, index } from "drizzle-orm/mysql-core"
-import { integer, varchar, boolean, decimal, timestamp, index, pgSchema, uniqueIndex, primaryKey } from "drizzle-orm/pg-core";
+import { integer, varchar, boolean, decimal, timestamp, index, pgSchema, uuid, primaryKey } from "drizzle-orm/pg-core";
 export const pokeSchema = pgSchema("pokemon");
@@ -98,6 +98,7 @@ export const skus = pokeSchema.table('skus', {
 },
 (table) => [
 	index('idx_product_id_condition').on(table.productId, table.variant, table.condition),
 	index('idx_card_id_condition').on(table.cardId, table.condition),
 ]);
 export const priceHistory = pokeSchema.table('price_history', {
@@ -124,6 +125,22 @@ export const salesHistory = pokeSchema.table('sales_history',{
 	primaryKey({ name: 'pk_sales_history', columns: [table.skuId, table.orderDate] })
 ]);
 export const inventory = pokeSchema.table('inventory',{
 	inventoryId: uuid().primaryKey().notNull().defaultRandom(),
 	userId: varchar({ length: 100 }).notNull(),
 	catalogName: varchar({ length: 100 }),
 	cardId: integer().notNull(),
 	condition: varchar({ length: 255 }).notNull(),
 	variant: varchar({ length: 100 }).default('Normal'),
 	quantity: integer(),
 	purchasePrice: decimal({ precision: 10, scale: 2 }),
 	note: varchar({ length:255 }),
 	createdAt: timestamp().notNull().defaultNow(),
 },
 (table) => [
 	index('idx_userid_cardid').on(table.userId, table.cardId)
 ]);
 export const processingSkus = pokeSchema.table('processing_skus', {
 	skuId: integer().primaryKey(),
 });
--- a/src/pages/api/inventory.ts
+++ b/src/pages/api/inventory.ts
@@ -0,0 +1,182 @@
 import type { APIRoute } from 'astro';
 import { db } from '../../db/index';
 import { inventory, skus, cards } from '../../db/schema';
 import { client } from '../../db/typesense';
 import { eq, and, sql } from 'drizzle-orm';
 const GainLoss = (purchasePrice: any, marketPrice: any) => {
    if (!purchasePrice || !marketPrice) return '<div class="fs-5 fw-semibold">N/A</div>';
    const pp = Number(purchasePrice);
    const mp = Number(marketPrice);
    if (pp === mp) return '<div class="fs-5 fw-semibold text-warning">-</div>';
    if (pp > mp) return `<div class="fs-5 fw-semibold text-critical">-$${(pp - mp).toFixed(2)}</div>`;
    return `<div class="fs-6 fw-semibold text-success">+$${(mp - pp).toFixed(2)}</div>`;
 }
 const getInventory = async (userId: string, cardId: number) => {
 const inventories = await db
    .select({
        inventoryId: inventory.inventoryId,
        cardId: inventory.cardId,
        condition: inventory.condition,
        variant: inventory.variant,
        quantity: inventory.quantity,
        purchasePrice: inventory.purchasePrice,
        note: inventory.note,
        marketPrice: skus.marketPrice,
        createdAt: inventory.createdAt,
    })
    .from(inventory)
    .leftJoin(
        cards,
        eq(inventory.cardId, cards.cardId)
    )
    .leftJoin(
        skus,
        and(
            eq(cards.productId, skus.productId),
            eq(inventory.condition, skus.condition),
            eq(
                sql`COALESCE(${inventory.variant}, 'Normal')`,
                skus.variant
            )
        )
    )
    .where(and(
        eq(inventory.userId, userId),
        eq(inventory.cardId, cardId)
    ));
    const invHtml = inventories.map(inv => {
        const marketPrice = inv.marketPrice ? Number(inv.marketPrice).toFixed(2) : null;
        const marketPriceDisplay = marketPrice ? `$${marketPrice}` : '—';
        const purchasePriceDisplay = inv.purchasePrice ? `$${Number(inv.purchasePrice).toFixed(2)}` : '—';
        return `
        <article class="border rounded-4 p-2 inventory-entry-card"
            data-inventory-id="${inv.inventoryId}"
            data-card-id="${inv.cardId}"
            data-purchase-price="${inv.purchasePrice}"
            data-note="${(inv.note || '').replace(/"/g, '&quot;')}">
            <div class="d-flex flex-column">
                <!-- Top row -->
                <div class="d-flex justify-content-between gap-3">
                    <div class="min-w-0 flex-grow-1">
                        <div class="fw-semibold fs-6 text-body mb-1">${inv.condition}</div>
                    </div>
                    <div class="fs-7 text-secondary">Added: ${inv.createdAt ? new Date(inv.createdAt).toLocaleDateString() : '—'}</div>
                </div>
                <!-- Middle row -->
                <div class="row g-2">
                    <div class="col-4">
                        <div class="small text-secondary">Purchase price</div>
                        <div class="fs-6 fw-semibold">${purchasePriceDisplay}</div>
                    </div>
                    <div class="col-4">
                        <div class="small text-secondary">Market price</div>
                        <div class="fs-6 text-success">${marketPriceDisplay}</div>
                    </div>
                    <div class="col-4">
                        <div class="small text-secondary">Gain / loss</div>
                        ${GainLoss(inv.purchasePrice, marketPrice)}
                    </div>
                </div>
                <!-- Bottom row -->
                <div class="d-flex justify-content-between align-items-center gap-3 flex-wrap mt-2">
                    <div class="d-flex align-items-center gap-2">
                        <span class="small text-secondary">Qty</span>
                        <div class="btn-group" role="group" aria-label="Quantity controls">
                            <button type="button" class="btn btn-outline-secondary btn-sm" data-inv-action="decrement">−</button>
                            <button type="button" class="btn btn-outline-secondary btn-sm" tabindex="-1" data-inv-qty>${inv.quantity}</button>
                            <button type="button" class="btn btn-outline-secondary btn-sm" data-inv-action="increment">+</button>
                        </div>
                    </div>
                    <div class="d-flex align-items-center gap-2 flex-wrap">
                        <button type="button" class="btn btn-sm btn-outline-secondary" data-inv-action="update">Edit</button>
                        <button type="button" class="btn btn-sm btn-outline-danger" data-inv-action="remove" onclick="if(!confirm('Are you sure you want to remove this card from your inventory?')) event.stopImmediatePropagation();">Remove</button>
                    </div>
                </div>
            </div>
        </article>`;
    });
    return new Response(
        invHtml.join(''),
        {
            status: 200,
            headers: { 'Content-Type': 'text/html' },
        }
    );
 }
 const addToInventory = async (userId: string, cardId: number, condition: string, variant: string, purchasePrice: number, quantity: number, note: string, catalogName: string) => {
    const inv = await db.insert(inventory).values({
        userId: userId,
        cardId: cardId,
        catalogName: catalogName,
        condition: condition,
        variant: variant,
        purchasePrice: purchasePrice,
        quantity: quantity,
        note: note,
    }).returning();
    await client.collections('inventories').documents().import(inv.map(i => ({
        id: i.inventoryId,
        userId: i.userId,
        catalogName: i.catalogName,
        card_id: i.cardId.toString(),
    })));
 }
 const removeFromInventory = async (inventoryId: string) => {
    await db.delete(inventory).where(eq(inventory.inventoryId, inventoryId));
    await client.collections('inventories').documents(inventoryId).delete();
 }
 const updateInventory = async (inventoryId: string, quantity: number, purchasePrice: number, note: string) => {
    await db.update(inventory).set({
        quantity: quantity,
        purchasePrice: purchasePrice,
        note: note,
    }).where(eq(inventory.inventoryId, inventoryId));
 }
 export const POST: APIRoute = async ({ request, locals }) => {
    const formData = await request.formData();
    const action = formData.get('action');
    const cardId = Number(formData.get('cardId')) || 0;
    const { userId } = locals.auth();
    switch (action) {
        case 'add':
            const condition = formData.get('condition')?.toString() || 'Unknown';
            const variant = formData.get('variant')?.toString() || 'Normal';
            const purchasePrice = Number(formData.get('purchasePrice')) || 0;
            const quantity = Number(formData.get('quantity')) || 1;
            const note = formData.get('note')?.toString() || '';
            const catalogName = formData.get('catalogName')?.toString() || 'Default';
            await addToInventory(userId!, cardId, condition, variant, purchasePrice, quantity, note, catalogName);
            break;
        case 'remove':
            const inventoryId = formData.get('inventoryId')?.toString() || '';
            await removeFromInventory(inventoryId);
            break;
        case 'update':
            const invId = formData.get('inventoryId')?.toString() || '';
            const qty = Number(formData.get('quantity')) || 1;
            const price = Number(formData.get('purchasePrice')) || 0;
            const invNote = formData.get('note')?.toString() || '';
            await updateInventory(invId, qty, price, invNote);
            break;
        default:
            return getInventory(userId!, cardId);
    }
    return getInventory(userId!, cardId);
 };
--- a/src/pages/api/upload.ts
+++ b/src/pages/api/upload.ts
@@ -0,0 +1,95 @@
 // src/pages/api/upload.ts
 import type { APIRoute } from 'astro';
 import { parse, stringify, transform } from 'csv';
 import { Readable } from 'stream';
 import { client } from '../../db/typesense';
 import chalk from 'chalk';
 import { db, ClosePool } from '../../db/index';
 // Define the transformation logic
 const transformer = transform({ parallel: 1 }, async function(this: any, row: any, callback: any) {
 try {
    // Specific query bsaed on tcgcollector CSV
    const query = String(Object.values(row)[1]);
    const setname = String(Object.values(row)[4]).replace(/Wizards of the coast promos/ig,'WoTC Promo');
    const cardNumber = String(Object.values(row)[7]);
    console.log(`${query} ${cardNumber} : ${setname}`);
    // Use Typesense to find the card because we can easily use the combined fields
    let cards = await client.collections('cards').documents().search({ q: query, query_by: 'productName', filter_by: `setName:\`${setname}\` && number:${cardNumber}` });
    if (cards.hits?.length === 0) {
        // Try without card number
        cards = await client.collections('cards').documents().search({ q: query, query_by: 'productName', filter_by: `setName:\`${setname}\`` });
    }
    if (cards.hits?.length === 0) {
        // Try without set name
        cards = await client.collections('cards').documents().search({ q: query, query_by: 'productName', filter_by: `number:${cardNumber}` });
    }
    if (cards.hits?.length === 0) {
        // I give up, just output the values from the csv
        console.log(chalk.red('  - not found'));
        const newRow = { ...row };
        newRow.Variant = '';
        newRow.marketPrice = '';
        this.push(newRow);
    }
    else {
        for (const card of cards.hits?.map((hit: any) => hit.document) ?? []) {
            console.log(chalk.blue(`  - ${card.cardId} : ${card.productName} : ${card.number}`), chalk.yellow(`${card.setName}`), chalk.green(`${card.variant}`));
            const variant = await db.query.cards.findFirst({
                with: { prices: true, tcgdata: true },
                where: { cardId: card.cardId }
            });
            const newRow = { ...row };
            newRow.Variant = variant?.variant;
            newRow.marketPrice = variant?.prices.find(p => p.condition === 'Near Mint')?.marketPrice;
            this.push(newRow);
        }
    }
    callback();
 } catch (error) {
    callback(error);
 }
 });
 export const POST: APIRoute = async ({ request }) => {
  try {
    const formData = await request.formData();
    const file = formData.get('file') as File;
    const inputStream = Readable.from(file.stream());
    if (!file) {
      return new Response('No file uploaded', { status: 400 });
    }
    // Pipe the streams: Read -> Parse -> Transform -> Stringify -> Write
    const outputStream = inputStream
        .on('error', (error) => console.error('Input stream error:', error))
        .pipe(parse({ columns: true, trim: true }))
        .on('error', (error) => console.error('Parse error:', error))
        .pipe(transformer)
        .on('error', (error) => console.error('Transform error:', error))
        .pipe(stringify({ header: true }))
        .on('error', (error) => console.error('Stringify error:', error));
    // outputStream.on('finish', () => {
    //     ClosePool();
    // }).on('error', (error) => {
    //     ClosePool();
    // });
    return new Response(outputStream as any, {
        headers: {
            'Content-Type': 'text/csv',
            'Content-Disposition': 'attachment; filename=transformed.csv',
        },
    });
  } catch (error) {
    console.error('Error processing CSV stream:', error);
    return new Response('Internal Server Error', { status: 500 });
  }
 };
--- a/src/pages/dashboard.astro
+++ b/src/pages/dashboard.astro
--- a/src/pages/myprices.astro
+++ b/src/pages/myprices.astro
@@ -0,0 +1,26 @@
 ---
 import Layout from '../layouts/Main.astro';
 import NavItems from '../components/NavItems.astro';
 import NavBar from '../components/NavBar.astro';
 import Footer from '../components/Footer.astro';
 ---
 <Layout title="Rigid's App Thing">
    <NavBar slot="navbar">
        <NavItems slot="navItems" />
    </NavBar>
    <div class="row mb-4" slot="page">
        <div class="col-12">
            <h1>Rigid's App Thing</h1>
            <p class="text-secondary">(working title)</p>
        </div>
        <div class="col-12">
            <!-- src/components/FileUploader.astro -->
            <form action="/api/upload" method="post" enctype="multipart/form-data">
                <input type="file" name="file" accept=".csv" required />
                <button type="submit">Upload CSV</button>
            </form>
        </div>
    </div>
    <Footer slot="footer" />
 </Layout>
--- a/src/pages/partials/card-modal.astro
+++ b/src/pages/partials/card-modal.astro
@@ -10,6 +10,18 @@ import FirstEditionIcon from "../../components/FirstEditionIcon.astro";
 import { Tooltip } from "bootstrap";
 import { clerkClient } from '@clerk/astro/server';
 const { userId, has } = Astro.locals.auth();
 const TARGET_ORG_ID = 'org_3Baav9czkRLLlC7g89oJWqRRulK';
 let hasAccess = has({ feature: 'inventory_add' });
 if (!hasAccess && userId) {
  const memberships = await clerkClient(Astro).users.getOrganizationMembershipList({ userId });
  hasAccess = memberships.data.some(m => m.organization.id === TARGET_ORG_ID);
 }
 export const partial = true;
 export const prerender = false;
@@ -46,7 +58,7 @@ const calculatedAt = (() => {
  const dates = card.prices
    .map(p => p.calculatedAt)
    .filter(d => d)
-    .map(d => new Date(d));
+    .map(d => new Date(d!));
  if (!dates.length) return null;
  return new Date(Math.max(...dates.map(d => d.getTime())));
 })();
@@ -161,6 +173,17 @@ const conditionAttributes = (price: any) => {
  }[condition];
 };
 // ── Build a market price lookup keyed by condition for use in JS ──────────
 const marketPriceByCondition: Record<string, number> = {};
 for (const price of card?.prices ?? []) {
  if (price.condition && price.marketPrice != null) {
    marketPriceByCondition[price.condition] = Number(price.marketPrice);
  }
 }
 // ── Derive distinct variants available for this card ─────────────────────
 const availableVariants = [...new Set(cardSkus.map(s => s.variant))].sort();
 const ebaySearchUrl = (card: any) => {
  return `https://www.ebay.com/sch/i.html?_nkw=${encodeURIComponent(card?.productUrlName)}+${encodeURIComponent(card?.set?.setUrlName)}+${encodeURIComponent(card?.number)}&LH_Sold=1&Graded=No&_dcat=183454`;
 };
@@ -168,8 +191,8 @@ const ebaySearchUrl = (card: any) => {
 const altSearchUrl = (card: any) => {
  return `https://alt.xyz/browse?query=${encodeURIComponent(card?.productUrlName)}+${encodeURIComponent(card?.set?.setUrlName)}+${encodeURIComponent(card?.number)}&sortBy=newest_first`;
 };
 ---
 ---
  <div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
    <div class="modal-content" data-card-id={card?.cardId}>
      <div class="modal-header border-0">
@@ -201,15 +224,13 @@ const altSearchUrl = (card: any) => {
                    data-name={card?.productName}
                  >
                    <img
-                      src={`/cards/${card?.productId}.jpg`}
+                      src={`/static/cards/${card?.productId}.jpg`}
                      class="card-image w-100 img-fluid rounded-4"
                      alt={card?.productName}
                      crossorigin="anonymous"
-                      onerror="this.onerror=null; this.src='/cards/default.jpg'; this.closest('.image-grow, .card-image-wrap')?.setAttribute('data-default','true')"
+                      onerror="this.onerror=null; this.src='/static/cards/default.jpg'; this.closest('.image-grow, .card-image-wrap')?.setAttribute('data-default','true')"
                      onclick="copyImage(this); dataLayer.push({'event': 'copiedImage'});"
                    />
                    <div class="holo-shine"></div>
                    <div class="holo-glare"></div>
                  </div>
                  <span class="position-absolute top-50 start-0 d-inline"><FirstEditionIcon edition={card?.variant} /></span>
@@ -228,34 +249,36 @@ const altSearchUrl = (card: any) => {
                <ul class="nav nav-tabs nav-fill border-0 me-3 mb-2" id="myTab" role="tablist">
                  <li class="nav-item" role="presentation">
                    <button class="nav-link nm active" id="nm-tab" data-bs-toggle="tab" data-bs-target="#nav-nm" type="button" role="tab" aria-controls="nav-nm" aria-selected="true">
-                      <span class="d-none d-xxl-inline">Near Mint</span><span class="d-xxl-none">NM</span>
+                      <span class="d-none">Near Mint</span><span class="d-inline">NM</span>
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button class="nav-link lp" id="lp-tab" data-bs-toggle="tab" data-bs-target="#nav-lp" type="button" role="tab" aria-controls="nav-lp" aria-selected="false">
-                      <span class="d-none d-xxl-inline">Lightly Played</span><span class="d-xxl-none">LP</span>
+                      <span class="d-none">Lightly Played</span><span class="d-inline">LP</span>
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button class="nav-link mp" id="mp-tab" data-bs-toggle="tab" data-bs-target="#nav-mp" type="button" role="tab" aria-controls="nav-mp" aria-selected="false">
-                      <span class="d-none d-xxl-inline">Moderately Played</span><span class="d-xxl-none">MP</span>
+                      <span class="d-none">Moderately Played</span><span class="d-inline">MP</span>
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button class="nav-link hp" id="hp-tab" data-bs-toggle="tab" data-bs-target="#nav-hp" type="button" role="tab" aria-controls="nav-hp" aria-selected="false">
-                      <span class="d-none d-xxl-inline">Heavily Played</span><span class="d-xxl-none">HP</span>
+                      <span class="d-none">Heavily Played</span><span class="d-inline">HP</span>
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button class="nav-link dmg" id="dmg-tab" data-bs-toggle="tab" data-bs-target="#nav-dmg" type="button" role="tab" aria-controls="nav-dmg" aria-selected="false">
-                      <span class="d-none d-xxl-inline">Damaged</span><span class="d-xxl-none">DMG</span>
+                      <span class="d-none">Damaged</span><span class="d-inline">DMG</span>
                    </button>
                  </li>
                {hasAccess && (
                    <li class="nav-item" role="presentation">
-                    <button class="nav-link vendor d-none" id="vendor-tab" data-bs-toggle="tab" data-bs-target="#nav-vendor" type="button" role="tab" aria-controls="nav-vendor" aria-selected="false">
+                      <button class="nav-link vendor" id="vendor-tab" data-bs-toggle="tab" data-bs-target="#nav-vendor" type="button" role="tab" aria-controls="nav-vendor" aria-selected="false">
                        <span class="d-none d-xxl-inline">Inventory</span><span class="d-xxl-none">+/-</span>
                      </button>
                    </li>
                )}
                </ul>
                <div class="tab-content" id="myTabContent">
@@ -312,7 +335,7 @@ const altSearchUrl = (card: any) => {
                          <!-- Table only — chart is outside the tab panes -->
                          <div class="w-100">
-                            <div class="alert alert-dark rounded p-2 mb-0 table-responsive">
+                            <div class="alert alert-dark rounded p-2 mb-0 table-responsive d-none">
                              <h6>Latest Verified Sales</h6>
                              <table class="table table-sm mb-0">
                                <caption class="small">Filtered to remove mismatched language variants</caption>
@@ -338,12 +361,204 @@ const altSearchUrl = (card: any) => {
                      </div>
                    );
                  })}
                  {hasAccess && (
                    <div class="tab-pane fade" id="nav-vendor" role="tabpanel" aria-labelledby="nav-vendor" tabindex="0">
                      <div class="row g-4">
                        <div class="col-12 col-md-6">
                          <h6 class="mt-1 mb-2">Add {card?.productName} to inventory</h6>
-                  <div class="tab-pane fade" id="nav-vendor" role="tabpanel" aria-labelledby="nav-vendor" tabindex="0"></div>
+                          <form id="inventoryForm" data-inventory-form novalidate>
                            <div class="row gx-3 gy-1">
                              <div class="col-3">
                                <label for="quantity" class="form-label">Quantity</label>
                                <input
                                  type="number"
                                  class="form-control mt-1"
                                  id="quantity"
                                  name="quantity"
                                  min="1"
                                  step="1"
                                  value="1"
                                  required
                                />
                                <div class="invalid-feedback">Required.</div>
                              </div>
                              <div class="col-9">
                                <div class="d-flex justify-content-between align-items-start gap-2 flex-wrap">
                                  <label for="purchasePrice" class="form-label">
                                    Purchase price
                                  </label>
                                  <div class="btn-group btn-group-sm price-toggle" role="group" aria-label="Price mode">
                                    <input
                                      type="radio"
                                      class="btn-check"
                                      name="priceMode"
                                      id="mode-dollar"
                                      value="dollar"
                                      autocomplete="off"
                                      checked
                                    />
                                    <label class="btn btn-outline-secondary" for="mode-dollar">$</label>
                                    <input
                                      type="radio"
                                      class="btn-check"
                                      name="priceMode"
                                      id="mode-percent"
                                      value="percent"
                                      autocomplete="off"
                                    />
                                    <label class="btn btn-outline-secondary" for="mode-percent">%</label>
                                  </div>
                                </div>
                                <div class="input-group">
                                  <span class="input-group-text mt-1" id="pricePrefix">$</span>
                                  <input
                                    type="number"
                                    class="form-control mt-1 rounded-end"
                                    id="purchasePrice"
                                    name="purchasePrice"
                                    min="0"
                                    step="0.01"
                                    placeholder="0.00"
                                    aria-describedby="pricePrefix priceSuffix priceHint"
                                    required
                                  />
                                  <span class="input-group-text d-none mt-1" id="priceSuffix">%</span>
                                </div>
                                <div class="form-text" id="priceHint">Enter the purchase price.</div>
                                <div class="invalid-feedback">Enter a purchase price.</div>
                              </div>
                              <div class="col-12">
                                <label class="form-label">Condition</label>
                                <div class="btn-group condition-input w-100" role="group" aria-label="Condition">
                                  <input
                                    type="radio"
                                    class="btn-check"
                                    name="condition"
                                    id="cond-nm"
                                    value="Near Mint"
                                    autocomplete="off"
                                    checked
                                  />
                                  <label class="btn btn-cond-nm" for="cond-nm">NM</label>
                                  <input
                                    type="radio"
                                    class="btn-check"
                                    name="condition"
                                    id="cond-lp"
                                    value="Lightly Played"
                                    autocomplete="off"
                                  />
                                  <label class="btn btn-cond-lp" for="cond-lp">LP</label>
                                  <input
                                    type="radio"
                                    class="btn-check"
                                    name="condition"
                                    id="cond-mp"
                                    value="Moderately Played"
                                    autocomplete="off"
                                  />
                                  <label class="btn btn-cond-mp" for="cond-mp">MP</label>
                                  <input
                                    type="radio"
                                    class="btn-check"
                                    name="condition"
                                    id="cond-hp"
                                    value="Heavily Played"
                                    autocomplete="off"
                                  />
                                  <label class="btn btn-cond-hp" for="cond-hp">HP</label>
                                  <input
                                    type="radio"
                                    class="btn-check"
                                    name="condition"
                                    id="cond-dmg"
                                    value="Damaged"
                                    autocomplete="off"
                                  />
                                  <label class="btn btn-cond-dmg" for="cond-dmg">DMG</label>
                                </div>
                              </div>
                              <input type="hidden" name="variant" value={card?.variant} />
                              <div class="col-12">
                                <label for="catalogName" class="form-label">
                                  Catalog
                                </label>
                                <input
                                  type="text"
                                  class="form-control"
                                  id="catalogName"
                                  name="catalogName"
                                  list="catalogSuggestions"
                                  placeholder="Default"
                                  autocomplete="off"
                                  maxlength="100"
                                />
                                <datalist id="catalogSuggestions">
                                </datalist>
                                <div class="form-text">
                                  Type a name or pick an existing catalog.
                                </div>
                              </div>
                              <div class="col-12">
                                <label for="note" class="form-label">
                                  Note
                                </label>
                                <textarea
                                  class="form-control"
                                  id="note"
                                  name="note"
                                  rows="2"
                                  maxlength="255"
                                  placeholder="e.g. bought at local shop, gift, graded copy…"
                                ></textarea>
                                <div class="form-text text-end" id="noteCount">0 / 255</div>
                              </div>
                              <div class="col-12 d-flex gap-3 pt-2">
                                <button type="reset" class="btn btn-outline-danger flex-fill">Reset</button>
                                <button type="submit" class="btn btn-success flex-fill">Save to inventory</button>
                              </div>
                            </div>
                          </form>
                        </div>
                        <div class="col-12 col-md-6">
                          <h6 class="mt-1 mb-2">Inventory entries for {card?.productName}</h6>
                          <!-- Empty state -->
                          <div class="alert alert-dark border-0 rounded-4 d-none" id="inventoryEmptyState">
                            <div class="fw-medium mb-1">No inventory entries yet</div>
                            <div class="text-secondary small">
                              Once you add copies of this card, they'll show up here.
                            </div>
                          </div>
                          <!-- Inventory list -->
                          <div class="d-flex flex-column gap-3" id="inventoryEntryList" data-card-id={cardId} data-market-prices={JSON.stringify(marketPriceByCondition)}>
                            <span>Loading...</span>
                          </div>
                        </div>
                      </div>
                    </div>
                )}
                </div>
                <!-- Chart lives permanently outside tab-content so Bootstrap never hides it. -->
-                <div class="d-block d-lg-flex gap-1 mt-1">
+                <div class="d-block d-lg-flex gap-1 mt-1 price-chart-container">
                  <div class="col-12">
                    <div class="alert alert-dark rounded p-2 mb-0">
                      <h6>Market Price History</h6>
--- a/src/pages/partials/cards.astro
+++ b/src/pages/partials/cards.astro
@@ -1,5 +1,17 @@
 ---
 import { client } from '../../db/typesense';
 import { clerkClient } from '@clerk/astro/server';
 const { userId, has } = Astro.locals.auth();
 const TARGET_ORG_ID = 'org_3Baav9czkRLLlC7g89oJWqRRulK';
 let hasAccess = has({ feature: 'inventory_add' });
 if (!hasAccess && userId) {
  const memberships = await clerkClient(Astro).users.getOrganizationMembershipList({ userId });
  hasAccess = memberships.data.some(m => m.organization.id === TARGET_ORG_ID);
 }
 import RarityIcon from '../../components/RarityIcon.astro';
 import FirstEditionIcon from "../../components/FirstEditionIcon.astro";
 export const prerender = false;
@@ -234,7 +246,6 @@ const facets = searchResults.results.slice(1).map((result: any) => {
        }
    </div>
    <script define:vars={{ totalHits, filters, facets }} is:inline>
        // Filter the facet values to make things like Set easier to find
        const facetfilters = document.querySelectorAll('.facet-filter');
        for (const facetfilter of facetfilters) {
@@ -260,7 +271,8 @@ const facets = searchResults.results.slice(1).map((result: any) => {
            document.getElementById('searchform').dispatchEvent(new Event('submit', {bubbles:true, cancelable:true}));
        }
        document.getElementById('clear-filters').addEventListener('click', (e) => clearAllFilters(e));
-        document.getElementById('clear-all-filters').addEventListener('click', (e) => clearAllFilters(e));
+        const clearAllBtn = document.getElementById('clear-all-filters');
        if (clearAllBtn) clearAllBtn.addEventListener('click', (e) => clearAllFilters(e));
        // Remove single facet value
        for (const li of document.querySelectorAll('.remove-filter')) {
@@ -283,11 +295,13 @@ const facets = searchResults.results.slice(1).map((result: any) => {
 {pokemon.map((card:any) => (
    <div class="col">
-        <div class="inventory-button position-relative float-end shadow-filter text-center d-none">
+        {hasAccess && (
-            <div class="inventory-label pt-2">+/-</div>
+            <button type="button" class="btn btn-sm inventory-button position-relative float-end shadow-filter text-center p-2" data-card-id={card.cardId} hx-get={`/partials/card-modal?cardId=${card.cardId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal" onclick="event.stopPropagation(); sessionStorage.setItem('openModalTab', 'nav-vendor');">
-        </div>
+                <b>+/–</b>
            </button>
        )}
        <div class="card-trigger position-relative" data-card-id={card.cardId} hx-get={`/partials/card-modal?cardId=${card.cardId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal" onclick="const cardTitle = this.querySelector('#cardImage').getAttribute('alt'); dataLayer.push({'event': 'virtualPageview', 'pageUrl': this.getAttribute('hx-get'), 'pageTitle': cardTitle, 'previousUrl': '/pokemon'});">
-            <div class="image-grow rounded-4 card-image" data-energy={card.energyType} data-rarity={card.rarityName} data-variant={card.variant} data-name={card.productName}><img src={`/cards/${card.productId}.jpg`} alt={card.productName} id="cardImage" loading="lazy" decoding="async" class="img-fluid rounded-4 mb-2 w-100" onerror="this.onerror=null; this.src='/cards/default.jpg'; this.closest('.image-grow')?.setAttribute('data-default','true')"/><span class="position-absolute top-50 start-0 d-inline medium-icon"><FirstEditionIcon edition={card?.variant} /></span>
+            <div class="image-grow rounded-4 card-image" data-energy={card.energyType} data-rarity={card.rarityName} data-variant={card.variant} data-name={card.productName}><img src={`/static/cards/${card.productId}.jpg`} alt={card.productName} id="cardImage" loading="lazy" decoding="async" class="img-fluid rounded-4 mb-2 w-100" onerror="this.onerror=null; this.src='/static/cards/default.jpg'; this.closest('.image-grow')?.setAttribute('data-default','true')"/><span class="position-absolute top-50 start-0 d-inline medium-icon"><FirstEditionIcon edition={card?.variant} /></span>
              <div class="holo-shine"></div>
              <div class="holo-glare"></div>
            </div>
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,5 @@
 {
  "extends": "astro/tsconfigs/strict",
-  "include": [".astro/types.d.ts", "**/*"],
+  "include": [".astro/types.d.ts", "src/**/*"],
  "exclude": ["dist"]
 }
Author	SHA1	Message	Date
Zach Harding	5d716a4d8e	added a fix for variant selection (without it cards with multiple versions would add all at form submit)	2026-04-05 16:32:44 -04:00
Zach Harding	d06c6fb9bf	removed unnecessary migration/json files from drizzle	2026-04-05 16:12:02 -04:00
Zach Harding	404355304c	style tweaks to both form and existing inventory, added createdAt and modified purchasePrice (for % of market)	2026-04-05 16:09:52 -04:00
Zach Harding	87235ab37a	working with inventory style changes - tbd	2026-04-05 11:20:26 -04:00
Thad Miller	12a42b87b8	[feat] save/remove inventory working now	2026-04-03 22:50:54 -04:00
Thad Miller	03394d81e8	[feat] loading inventory	2026-04-03 22:10:41 -04:00
Thad Miller	86da8a91ad	[bugfix] removed server import from client script	2026-04-03 21:53:45 -04:00
Thad Miller	66290fcb97	[bugfix] duplicated bootstrap inclusion causing errors	2026-04-03 21:49:44 -04:00
Thad Miller	7a1b7eb5fe	[chore] claude init	2026-04-03 21:37:04 -04:00
Thad Miller	3be17fe84c	[wip] bugs to work out, but backend should support inventory	2026-04-02 19:24:51 -04:00
Thad Miller	38f041d86f	[chore] supress bootstrap warnings for now	2026-04-01 21:08:52 -04:00
Zach Harding	b65e2a2859	minor style updates	2026-03-25 10:23:17 -04:00
Zach Harding	91823174d2	mostly complete inventory dashboard/modal	2026-03-25 09:21:24 -04:00
Zach Harding	943bd33c9a	Merge branch 'master' into feat/inventory	2026-03-25 08:43:18 -04:00
Zach Harding	9975db20cb	inventory dashboard setup	2026-03-25 08:42:17 -04:00
Zach Harding	db12844dea	setting up inventory dashboard	2026-03-25 08:41:21 -04:00
Thad Miller	3f9b1accda	[chore] employ static assets directory	2026-03-25 05:34:11 -04:00
Thad Miller	03e606e152	[bugfix] missed async await in tcgplayer preload	2026-03-23 21:24:24 -04:00
Thad Miller	b871385fba	[bugfix] don't close db connection pool in upload api script	2026-03-21 20:52:39 -04:00
Thad Miller	4c6922f76b	[feat] testing tcgcollector upload	2026-03-21 16:40:04 -04:00