current working holographic pattern for desktop/mobile (needs work still)

.gitignore

@@ -26,9 +26,6 @@ pnpm-debug.log*
 # imges from tcgplayer
 public/cards/*
 
-# static assets
-/static/
-
 # anything test
 test.*
 

scripts/preload-tcgplayer.ts

@@ -280,6 +280,6 @@ else {
 await helper.UpdateVariants(db);
 
 // index the card updates
-await helper.upsertCardCollection(db);
+helper.upsertCardCollection(db);
 
 await ClosePool();

src/assets/css/_card.scss

@@ -40,8 +40,8 @@
 // =============================================================================
 
 // Shared texture/asset references
-$grain:       url('/public/holofoils/grain.webp');
+$grain:       url('/holofoils/grain.webp');
-$glitter:     url('/public/holofoils/glitter.png');
+$glitter:     url('/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('/public/holofoils/illusion.png');
+  --foil: url('/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('/public/holofoils/cosmos-bottom.png'),
+      url('/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('/public/holofoils/cosmos-middle-trans.png'), $cosmos-stripe;
+      background-image: url('/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('/public/holofoils/cosmos-top-trans.png'), $cosmos-stripe;
+      background-image: url('/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('/public/holofoils/trainerbg.png');
+      --foil:    url('/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('/public/holofoils/illusion-mask.png');
+    --foil:    url('/holofoils/illusion-mask.png');
     --imgsize: 33%;
   }
 }
@@ -1377,7 +1377,7 @@ $glittersize: 25%;
   .card__glare         { @extend %secret-rare-glare; }
 
   &:not(.masked) .card__shine {
-    --foil:    url('/public/holofoils/geometric.png');
+    --foil:    url('/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('/public/holofoils/illusion-mask.png');
+    --foil:    url('/holofoils/illusion-mask.png');
     --imgsize: 33%;
   }
 }
@@ -1719,7 +1719,7 @@ $glittersize: 25%;
   &:not(.masked) {
     .card__shine,
     .card__shine::after {
-      --foil:    url('/public/holofoils/trainerbg.png');
+      --foil:    url('/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('/public/holofoils/geometric.png');
+      --foil:    url('/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('/public/holofoils/vmaxbg.jpg');
+      --foil:    url('/holofoils/vmaxbg.jpg');
       --imgsize: 60% 30%;
     }
   }
@@ -2102,7 +2102,7 @@ $glittersize: 25%;
     .card__shine,
     .card__shine::after {
       --mask:    none;
-      --foil:    url('/public/holofoils/ancient.png');
+      --foil:    url('/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);

src/assets/css/_holofoil-integration.scss

@@ -1,19 +1,40 @@
 // =============================================================================
 // HOLOFOIL INTEGRATION
-// _holofoil-integration.scss
+// =============================================================================
+//
+// Three effect zones, determined by rarity and variant:
+//
+// 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
+//
 // =============================================================================
 
-@import "card";
-
 
 // -----------------------------------------------------------------------------
-// 1.  WRAPPER NORMALISATION
+// 1. CSS CUSTOM PROPERTIES — set on every wrapper element
 // -----------------------------------------------------------------------------
 
-%holofoil-wrapper-base {
+.image-grow,
-  --card-aspect:  0.718;
+.card-image-wrap {
-  --card-radius:  4.55% / 3.5%;
 
+  // Pointer tracking — updated by holofoil-init.js on mousemove
   --pointer-x:           50%;
   --pointer-y:           50%;
   --background-x:        50%;
@@ -21,29 +42,23 @@
   --pointer-from-center: 0;
   --pointer-from-top:    0.5;
   --pointer-from-left:   0.5;
-  --card-scale:          1;
   --card-opacity:        0;
+  --card-scale:          1;
 
-  --grain:       url('/public/holofoils/grain.webp');
+  // Card geometry — matches Bootstrap's rounded-4 (--bs-border-radius-xl)
-  --glitter:     url('/public/holofoils/glitter.png');
+  --card-radius: var(--bs-border-radius-xl, 0.375rem);
-  --glittersize: 25%;
-  --space:       5%;
-  --angle:       133deg;
-  --imgsize:     cover;
 
-  --red:    #f80e35;
+  // Art window clip — original poke-holo values, correct for standard TCG card scans
-  --yellow: #eedf10;
+  // inset(top right bottom left): top=9.85%, sides=8%, bottom=52.85% (art bottom at 47.15%)
-  --green:  #21e985;
+  --clip-art: inset(9.85% 8% 52.85% 8%);
-  --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);
@@ -51,40 +66,76 @@
   --sunpillar-clr-5: var(--sunpillar-5);
   --sunpillar-clr-6: var(--sunpillar-6);
 
-  // NOTE: no overflow:hidden here -- that would clip the lift/scale transform
+  // Colour tokens
-  // on .image-grow. Overflow is handled by the child .holo-shine/.holo-glare.
+  --red:    #f80e35;
-  position: relative;
+  --yellow: #eedf10;
-  isolation: isolate;
+  --green:  #21e985;
-  border-radius: var(--card-radius);
+  --blue:   #0dbde9;
-}
+  --violet: #c929f1;
 
-%holofoil-energy-glows {
+  // Glow
+  --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%); }
   &[data-energy="Lightning"] { --card-glow: hsl(54,  87%,  63%); }
   &[data-energy="Psychic"]   { --card-glow: hsl(281, 62%,  58%); }
-  &[data-energy="Fighting"]  { --card-glow: rgb(145, 90, 39);    }
+  &[data-energy="Fighting"]  { --card-glow: rgb(145, 90,   39);  }
   &[data-energy="Darkness"]  { --card-glow: hsl(189, 77%,  27%); }
   &[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.  SHINE + GLARE CHILD DIVS
+// 2. HOLO-SHINE AND HOLO-GLARE BASE STRUCTURE
 // -----------------------------------------------------------------------------
 
-%shine-base {
+.holo-shine,
+.holo-glare {
   pointer-events: none;
+  display: block;
   position: absolute;
   inset: 0;
   border-radius: var(--card-radius);
-  overflow: hidden; // clipping lives here, not on the parent
+  // NO overflow:hidden — it interferes with clip-path on the element itself
-  z-index: 3;
   will-change: transform, opacity, background-image, background-size,
-    background-position, background-blend-mode, filter;
+               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 {
@@ -92,97 +143,380 @@
     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);
   }
 }
 
-%glare-base {
+.holo-glare {
-  pointer-events: none;
-  position: absolute;
-  inset: 0;
-  border-radius: var(--card-radius);
   z-index: 4;
-  transform: translateZ(0);
+  mix-blend-mode: overlay;
-  overflow: hidden;
+  opacity: var(--card-opacity);
-  will-change: transform, opacity, background-image, background-size,
+  background-image: radial-gradient(
-    background-position, background-blend-mode, filter;
+    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 {
-// 3.  MODES
+    content: '';
-// -----------------------------------------------------------------------------
+    position: absolute;
-
+    inset: 0;
-// -- 3a. GRID -----------------------------------------------------------------
+    background-image: var(--grain);
-// No idle animation. Effect is invisible until hover.
+    background-size: 33%;
-
+    background-repeat: repeat;
-.image-grow,
+    mix-blend-mode: soft-light;
-.card-image-wrap {
+    opacity: 0.15;
-  @extend %holofoil-wrapper-base;
+  }
-  @extend %holofoil-energy-glows;
+
-
+  // Glitter texture on ::after — overlay blend adds sparkle points
-  // No effect if the image fell back to default.jpg
+  &::after {
-  &[data-default="true"] {
+    content: '';
-    .holo-shine,
+    position: absolute;
-    .holo-glare { display: none !important; }
+    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);
   }
 
-  .holo-shine { @extend %shine-base; }
-  .holo-glare { @extend %glare-base; }
 }
 
 
-// -- 3b. GRID HOVER -----------------------------------------------------------
+// -----------------------------------------------------------------------------
-// The existing main.scss .image-grow:hover handles lift + scale.
+// 3. ZONE HELPERS — reusable effect mixin
-// We layer the holo effect on top without overriding transform or transition.
+// The standard prismatic effect, applied at different clip regions below.
+// -----------------------------------------------------------------------------
 
-.image-grow:hover,
+// Standard shine background (used by ART WINDOW and FULL CARD zones)
-.image-grow[data-holo-active] {
+@mixin prismatic-shine {
-  --card-opacity: 0.45;
+  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);
 }
 
 
-// -- 3c. MODAL ----------------------------------------------------------------
+// -----------------------------------------------------------------------------
-// Sweeps once per minute. Peaks at 0.35.
+// 4. ZONE 0 — NORMAL: no effect
-// Pointer tracking bumps opacity to 0.45 while hovering.
+// -----------------------------------------------------------------------------
 
-@keyframes holo-modal-pulse {
+.image-grow[data-variant="Normal" i],
-  0% {
+.card-image-wrap[data-variant="Normal" i] {
-    --card-opacity: 0;
+  .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);
+    mix-blend-mode: multiply;
+    opacity: calc(var(--card-opacity) * 0.5);
+    z-index: 2;
+    pointer-events: none;
+    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
+// -----------------------------------------------------------------------------
+
+// Note: --card-opacity is intentionally NOT registered via @property.
+// Registering it as <number> makes it interpolatable, causing the browser
+// 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 {
+  0%       { opacity: 0; }
+  4%       { opacity: 0; }
+  8%       { opacity: 0.35; }
+  85%      { opacity: 0.35; }
+  90%, 100%{ opacity: 0; }
+}
+
+@keyframes holo-modal-position {
+  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%   {
-  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;
   }
-  25% {
+  25%  {
     --pointer-x: 70%; --pointer-y: 30%;
     --background-x: 64%; --background-y: 34%;
     --pointer-from-center: 0.9; --pointer-from-left: 0.70; --pointer-from-top: 0.30;
   }
-  45% {
+  45%  {
     --pointer-x: 80%; --pointer-y: 70%;
     --background-x: 74%; --background-y: 68%;
     --pointer-from-center: 0.88; --pointer-from-left: 0.80; --pointer-from-top: 0.70;
   }
-  65% {
+  65%  {
     --pointer-x: 35%; --pointer-y: 80%;
     --background-x: 38%; --background-y: 76%;
     --pointer-from-center: 0.8; --pointer-from-left: 0.35; --pointer-from-top: 0.80;
   }
-  85% {
+  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;
@@ -190,160 +524,162 @@
 }
 
 .card-image-wrap.holo-modal-mode {
-  --card-opacity: 0;
+  // Animate pointer vars on the wrapper so CSS custom props interpolate
+  animation: holo-modal-position 60s ease-in-out infinite;
+  animation-delay: var(--shimmer-delay, -2s);
 
   .holo-shine,
   .holo-glare {
-    animation: holo-modal-pulse 60s ease-in-out infinite;
+    // Animate opacity directly — no @property needed, native interpolation
+    animation: holo-modal-opacity 60s ease-in-out infinite;
     animation-delay: var(--shimmer-delay, -2s);
   }
 
   &[data-holo-active] {
-    --card-opacity: 0.45;
+    animation-play-state: paused;
+    .holo-shine { opacity: 0.20; }
+    .holo-glare { opacity: calc(0.20 * 0.4); }
+  }
+}
+
+
+// -----------------------------------------------------------------------------
+// 9. MOBILE / TOUCH — static holofoil overlay, no JS tracking
+//
+// @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) {
+
+  .holo-shine,
+  .holo-glare {
+    will-change: auto;
+  }
+
+  // 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-play-state: paused; }
+    .holo-glare { animation: none; }
-  }
-}
-
-
-// -----------------------------------------------------------------------------
-// 4.  RARITY -> CLIP-PATH BRIDGE
-// -----------------------------------------------------------------------------
-
-.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
+  // Suppress glitter — parallax position is meaningless without pointer tracking
-  &[data-rarity="rare holo"] {
+  .holo-glare::after { display: none; }
-    .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
+  // ── Static holofoil overlay for all effect zones on touch ─────────────────
-  &[data-rarity="rare holo cosmos"] {
+  // Override the JS-driven background-position values with fixed diagonals.
-    .holo-shine                               { clip-path: var(--clip); }
+  // The ::before pseudo moves in the opposite direction to create crossing bands.
-    &[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); } }
+  .image-grow,
-  &[data-rarity="amazing rare"]               { .holo-shine { clip-path: var(--clip); } }
+  .card-image-wrap {
 
-  &[data-rarity="trainer gallery rare holo"],
+    // Zone 1 — art window
-  &[data-rarity="rare holo"][data-trainer-gallery="true"] {
+    &[data-rarity="Rare" i]:not([data-variant="Reverse Holofoil" i]):not([data-variant="Normal" i]),
-    .holo-shine { clip-path: var(--clip-borders); }
+    &[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] {
 
-  &[data-rarity="rare shiny"] {
+      // Energy colour multiply tint — kept subtle on mobile
-    .holo-shine                            { clip-path: var(--clip); }
+      &::after {
-    &[data-subtypes^="stage"] .holo-shine  { clip-path: var(--clip-stage); }
+        opacity: 0.04;
-  }
+      }
 
-  // Reverse holo by rarity — borders only
+      .holo-shine {
-  &[data-rarity$="reverse holo"]     { .holo-shine { clip-path: var(--clip-invert); } }
+        background-image:
-  // Reverse Holofoil variant — borders only
+          var(--grain),
-  &[data-variant="Reverse Holofoil"] { .holo-shine { clip-path: var(--clip-invert); } }
+          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-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;
 
-  // True holofoil variants + full-bleed rarities — no clip
+        &::before {
-  &[data-variant="Holofoil"],
+          background-image:
-  &[data-variant="1st Edition Holofoil"],
+            repeating-linear-gradient(110deg,
-  &[data-variant="Unlimited Holofoil"],
+              var(--card-glow),
-  &[data-rarity="rare ultra"],
+              var(--blue),
-  &[data-rarity="rare holo v"],
+              var(--card-glow),
-  &[data-rarity="rare holo vmax"],
+              var(--green),
-  &[data-rarity="rare holo vstar"],
+              var(--yellow),
-  &[data-rarity="rare shiny v"],
+              var(--card-glow),
-  &[data-rarity="rare shiny vmax"],
+              var(--red),
-  &[data-rarity="rare rainbow"],
+              var(--violet),
-  &[data-rarity="rare rainbow alt"],
+              var(--card-glow)
-  &[data-rarity="rare secret"] {
+            );
-    .holo-shine { clip-path: none; }
+          background-size: 400% 400%;
-  }
+          background-position: 62% 75%;
+          mix-blend-mode: color-dodge;
+          opacity: 0.18;
+          filter: brightness(1.0) contrast(1.1) saturate(1.0);
+        }
 
-  // Foil variant shine/glare — clip handled above per variant type
+        &::after { display: none; }
-  &[data-variant="Holofoil"],
+      }
-  &[data-variant="Reverse Holofoil"],
+
-  &[data-variant="1st Edition Holofoil"],
+      .holo-glare {
-  &[data-variant="Unlimited Holofoil"] {
+        opacity: 0.15;
-    .holo-shine {
+        background-image: radial-gradient(
-      background-image:
+          farthest-corner circle at 35% 25%,
-        radial-gradient(
+          var(--card-glow)          0%,
-          circle at var(--pointer-x) var(--pointer-y),
+          hsla(0, 0%, 100%, 0.2)   30%,
-          #fff 5%, #000 50%, #fff 80%
+          hsla(0, 0%, 0%,   0.3)   90%
-        ),
-        linear-gradient(
-          var(--foil-angle, -45deg),
-          #000 15%, #fff, #000 85%
         );
-      background-blend-mode: soft-light, difference;
+        filter: brightness(0.8) contrast(1.5);
-      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 {
-      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;
-    }
-  }
-}
-
-
-// -----------------------------------------------------------------------------
-// 5.  DEFAULT HOLO SHINE / GLARE
-//     Fallback for rarities not explicitly handled above.
-// -----------------------------------------------------------------------------
-
-.image-grow,
-.card-image-wrap {
-  &[data-rarity]:not([data-rarity="common"]):not([data-rarity="uncommon"]) {
-
-    .holo-shine {
-      background-image:
-        repeating-linear-gradient(110deg,
-          var(--violet), var(--blue), var(--green), var(--yellow), var(--red),
-          var(--violet), var(--blue), var(--green), var(--yellow), var(--red)
-        );
-      background-position:
-        calc(((50% - var(--background-x)) * 2.6) + 50%)
-        calc(((50% - var(--background-y)) * 3.5) + 50%);
-      background-size: 400% 400%;
-      filter: brightness(0.7) contrast(0.9) saturate(0.8);
-      mix-blend-mode: color-dodge;
-      opacity: calc(var(--card-opacity) * 0.6);
-    }
-
-    .holo-glare {
-      background-image: radial-gradient(
-        farthest-corner circle at var(--pointer-x) var(--pointer-y),
-        hsla(0, 0%, 100%, 0.35) 10%,
-        hsla(0, 0%, 100%, 0.15) 30%,
-        hsla(0, 0%, 0%,   0.35) 90%
-      );
-      opacity: calc(var(--card-opacity) * 0.4);
-      mix-blend-mode: overlay;
-      filter: brightness(0.7) contrast(1.1);
     }
   }
 }

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
@@ -278,40 +278,6 @@ $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
 -------------------------------------------------- */
@@ -412,30 +378,6 @@ $cond-text: (
   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))
@@ -475,20 +417,21 @@ $cond-text: (
   );
 }
 
-.inventory-button, .btn-vendor {
+.inventory-button {
+  width: 40px;
+  height: 40px;
+  margin-bottom: -2rem;
+  margin-right: -0.25rem;
+  border-radius: 0.33rem;
   background-color: hsl(262, 47%, 55%);
   color: #fff;
 }
 
-.inventory-button {
+.inventory-label {
-  margin-bottom: -2.25rem;
+  width: 100%;
-  margin-right: -0.5rem;
+  height: 100%;
-  z-index: 2;
+  font-size: 1rem;
-}
+  font-weight: 700;
-
-.inventory-button:hover, .btn-vendor:hover {
-  background-color: hsl(262, 39%, 40%);
-  color: #fff;
 }
 
 .fs-7 {

src/assets/js/holofoil-init.js

@@ -1,53 +1,57 @@
 /**
  * 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';
 
-  // -- Constants --------------------------------------------------------------
+  // Variants that receive NO effect
+  const NO_EFFECT_VARIANTS = new Set(['normal']);
 
-  const SHIMMER_SEL = [
+  // Variants that always receive an effect regardless of rarity
-    '.image-grow[data-rarity]',
+  const HOLO_VARIANTS = new Set([
-    '.image-grow[data-variant="Holofoil"]',
+    'reverse holofoil',
-    '.image-grow[data-variant="1st Edition Holofoil"]',
+    'holofoil',
-    '.image-grow[data-variant="Unlimited Holofoil"]',
+    '1st edition holofoil',
-    '.image-grow[data-variant="Reverse Holofoil"]',
+  ]);
-    '.card-image-wrap[data-rarity]',
+
-    '.card-image-wrap[data-variant="Holofoil"]',
+  // Rarities that receive an effect
-    '.card-image-wrap[data-variant="1st Edition Holofoil"]',
+  const HOLO_RARITIES = new Set([
-    '.card-image-wrap[data-variant="Unlimited Holofoil"]',
+    // Art window zone
-    '.card-image-wrap[data-variant="Reverse Holofoil"]',
+    'rare',
-  ].join(',');
+    'amazing rare',
+    '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));
 
@@ -56,13 +60,13 @@
     const fromTop    = clamp01((y - rect.top)  / rect.height);
     const fromCenter = clamp01(Math.sqrt((fromLeft - 0.5) ** 2 + (fromTop - 0.5) ** 2) * 2);
     return {
-      px:         fromLeft * 100,
+      px: fromLeft * 100,
-      py:         fromTop  * 100,
+      py: fromTop  * 100,
       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,
     };
   }
 
@@ -76,12 +80,18 @@
     el.style.setProperty('--background-y',        v.bgY.toFixed(1) + '%');
   }
 
-  const isHoloVariant  = v => ['Holofoil', 'Reverse Holofoil', '1st Edition Holofoil', 'Unlimited Holofoil'].includes(v);
+  function shouldHaveEffect(el) {
-  const isModalWrapper = el => el.classList.contains('card-image-wrap');
+    if (el.dataset.default === 'true') return false;
-  const isDefault      = el => el.dataset.default === 'true';
+    // Also check if the card image itself is the default fallback
-
+    const img = el.querySelector('img');
-
+    if (img && img.src && img.src.endsWith('/cards/default.jpg')) return false;
-  // -- Child injection --------------------------------------------------------
+    const variant = (el.dataset.variant || '').toLowerCase().trim();
+    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;
@@ -93,18 +103,10 @@
     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 (isDefault(el)) return;
+    if (el.dataset.default === 'true') return;
-
     var observer = new MutationObserver(function() {
-      if (isDefault(el)) {
+      if (el.dataset.default === 'true') {
         var shine = el.querySelector('.holo-shine');
         var glare = el.querySelector('.holo-glare');
         if (shine) shine.style.display = 'none';
@@ -112,81 +114,54 @@
         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')) {
-    // Per-card foil visual randomisation (angle/brightness/saturation)
+      if (canHover) {
-    if (hasHoloVariant) {
+        // Desktop: use hover + pointer tracking, same as grid cards.
-      el.style.setProperty('--foil-angle',      Math.round(rand(FOIL_ANGLE_MIN, FOIL_ANGLE_MAX)) + 'deg');
+        // No animation — CSS :hover rule controls --card-opacity directly.
-      el.style.setProperty('--foil-brightness', rand(FOIL_BRITE_MIN, FOIL_BRITE_MAX).toFixed(2));
+        el.classList.remove('holo-modal-mode');
-      el.style.setProperty('--foil-saturation', rand(FOIL_SAT_MIN,   FOIL_SAT_MAX  ).toFixed(2));
+      } else {
+        // Touch: use the autonomous CSS animation sweep.
+        el.classList.add('holo-modal-mode');
+        el.style.setProperty('--shimmer-delay', rand(-8, 0) + 's');
+      }
     }
-
-    // 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' || isDefault(el)) return;
+    if (el.dataset.holoInit !== '1') 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() {
-      const rect = el.getBoundingClientRect();
+      applyPointerVars(el, pointerVars(e.clientX, e.clientY, el.getBoundingClientRect()));
-      applyPointerVars(el, pointerVars(e.clientX, e.clientY, rect));
       state.rafId = null;
     });
   }
@@ -194,46 +169,39 @@
   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)) {
+    el.style.removeProperty('--card-opacity');
-      // 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 attachAllListeners(root) {
+  function stampAll(root) {
-    (root || document).querySelectorAll(SHIMMER_SEL).forEach(function(el) {
+    (root || document).querySelectorAll(ALL_WRAPPERS_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) {
-      for (var i = 0; i < mutations.length; i++) {
+      mutations.forEach(function(m) {
-        var nodes = mutations[i].addedNodes;
+        m.addedNodes.forEach(function(node) {
-        for (var j = 0; j < nodes.length; j++) {
+          if (node.nodeType !== 1) return;
-          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);
@@ -244,8 +212,8 @@
               if (el.dataset.holoInit === '1') attachListeners(el);
             });
           }
-        }
+        });
-      }
+      });
     }).observe(grid, { childList: true, subtree: true });
   }
 
@@ -253,20 +221,32 @@
     var modal = document.getElementById('cardModal');
     if (!modal) return;
 
-    new MutationObserver(function() {
+    new MutationObserver(function(mutations) {
-      modal.querySelectorAll(ALL_WRAPPERS_SEL).forEach(function(el) {
+      mutations.forEach(function(m) {
-        stamp(el);
+        m.addedNodes.forEach(function(node) {
-        if (el.dataset.holoInit === '1') attachListeners(el);
+          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();
   }

src/assets/js/main.js

@@ -2,97 +2,51 @@ import * as bootstrap from 'bootstrap';
 window.bootstrap = bootstrap;
 import 'bootstrap/dist/js/bootstrap.bundle.min.js';
 
-document.addEventListener('DOMContentLoaded', () => {
+// trap browser back and close the modal if open
-
+const cardModal = document.getElementById('cardModal');
-  // Initialize all Bootstrap modals
+const loadingMsg = cardModal.innerHTML;
-  document.querySelectorAll('.modal').forEach(modalEl => {
+// Push a new history state when the modal is shown
-    bootstrap.Modal.getOrCreateInstance(modalEl);
+cardModal.addEventListener('shown.bs.modal', () => {
-  });
+  history.pushState({ modalOpen: true }, null, '#cardModal');
-
+});
-  // Initialize tooltips
+// Listen for the browser's back button (popstate event)
-  document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
+window.addEventListener('popstate', (e) => {
-    if (!el._tooltipInstance) {
+  if (cardModal.classList.contains('show')) {
-      el._tooltipInstance = new bootstrap.Tooltip(el, { container: 'body' });
+    const modalInstance = bootstrap.Modal.getInstance(cardModal);
+    if (modalInstance) {
+      modalInstance.hide();
     }
-  });
-
-  // ---------------- DASHBOARD LOGIC ----------------
-  const toggleBtn = document.getElementById("toggleViewBtn");
-  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 {
-        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";
-        });
-      });
-    }
-
-    // SORTING
-    document.querySelectorAll("th[data-key]").forEach(th => {
-      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";
-    });
   }
 });
+// 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();
+  }
+});
+
+
+  import { Tooltip } from "bootstrap";
+
+  // Initialize all tooltips globally
+  const initTooltips = () => {
+    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
+      if (!el._tooltipInstance) {
+        el._tooltipInstance = new Tooltip(el, {
+          container: 'body',   // ensures tooltip is appended to body, important for modals
+        });
+      }
+    });
+  };
+
+  // Run on page load
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initTooltips);
+  } else {
+    initTooltips();
+  }
+
+  // Optional: observe DOM changes for dynamically added tooltips (e.g., modals loaded later)
+  const observer = new MutationObserver(() => initTooltips());
+  observer.observe(document.body, { childList: true, subtree: true });

src/assets/js/priceChart.js

@@ -32,12 +32,6 @@ 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)
@@ -45,14 +39,20 @@ 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,9 +101,17 @@ 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);
 }
 
@@ -127,6 +135,7 @@ 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'), {
@@ -193,16 +202,9 @@ 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);
 }
 
@@ -223,10 +225,6 @@ 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',

src/components/CardGrid.astro

@@ -44,54 +44,15 @@ import BackToTop from "./BackToTop.astro"
 
 <BackToTop />
 
+<script src="src/assets/js/holofoil-init.js" is:inline></script>
+
 <script is:inline>
 (function () {
 
-  function initInventoryForms(root = document) {
-    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 pricePrefix = form.querySelector('#pricePrefix');
-      const priceSuffix = form.querySelector('#priceSuffix');
-      const priceHint = form.querySelector('#priceHint');
-      const modeInputs = form.querySelectorAll('input[name="priceMode"]');
-
-      if (!priceInput || !pricePrefix || !priceSuffix || !priceHint || !modeInputs.length) return;
-
-      function updatePriceMode(mode) {
-        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 ? '100' : '0.00';
-        priceInput.value = '';
-        priceHint.textContent = isPct
-          ? 'Enter the percentage of market price you paid.'
-          : 'Enter the purchase price.';
-
-        // swap rounded edge classes based on visible prepend/append
-        priceInput.classList.toggle('rounded-end', !isPct);
-        priceInput.classList.toggle('rounded-start', isPct);
-      }
-
-      modeInputs.forEach((input) => {
-        input.addEventListener('change', () => updatePriceMode(input.value));
-      });
-
-      const checked = form.querySelector('input[name="priceMode"]:checked');
-      updatePriceMode(checked ? checked.value : 'dollar');
-    });
-  }
-
   // ── 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();
@@ -157,6 +118,7 @@ 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';
@@ -210,20 +172,6 @@ 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;
@@ -311,17 +259,10 @@ 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) {
@@ -406,14 +347,8 @@ 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) {
@@ -430,7 +365,6 @@ import BackToTop from "./BackToTop.astro"
       await transition.finished;
       updateNavButtons(target);
       initChartAfterSwap(target);
-      switchToRequestedTab();
 
     } catch (err) {
       console.error('[card-modal] transition failed:', err);
@@ -449,18 +383,10 @@ import BackToTop from "./BackToTop.astro"
   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>

src/components/InventoryTable.astro

@@ -1,37 +0,0 @@
----
-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>

src/pages/api/upload.ts

@@ -1,95 +0,0 @@
-// 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 });
-  }
-};

src/pages/myprices.astro

@@ -1,26 +0,0 @@
----
-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>

src/pages/partials/card-modal.astro

@@ -46,7 +46,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())));
 })();
@@ -201,13 +201,15 @@ const altSearchUrl = (card: any) => {
                     data-name={card?.productName}
                   >
                     <img
-                      src={`/static/cards/${card?.productId}.jpg`}
+                      src={`/cards/${card?.productId}.jpg`}
                       class="card-image w-100 img-fluid rounded-4"
                       alt={card?.productName}
                       crossorigin="anonymous"
-                      onerror="this.onerror=null; this.src='/static/cards/default.jpg'; this.closest('.image-grow, .card-image-wrap')?.setAttribute('data-default','true')"
+                      onerror="this.onerror=null; this.src='/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>
@@ -226,31 +228,31 @@ 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">Near Mint</span><span class="d-inline">NM</span>
+                      <span class="d-none d-xxl-inline">Near Mint</span><span class="d-xxl-none">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">Lightly Played</span><span class="d-inline">LP</span>
+                      <span class="d-none d-xxl-inline">Lightly Played</span><span class="d-xxl-none">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">Moderately Played</span><span class="d-inline">MP</span>
+                      <span class="d-none d-xxl-inline">Moderately Played</span><span class="d-xxl-none">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">Heavily Played</span><span class="d-inline">HP</span>
+                      <span class="d-none d-xxl-inline">Heavily Played</span><span class="d-xxl-none">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">Damaged</span><span class="d-inline">DMG</span>
+                      <span class="d-none d-xxl-inline">Damaged</span><span class="d-xxl-none">DMG</span>
                     </button>
                   </li>
                   <li class="nav-item" role="presentation">
-                    <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">
+                    <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">
                       <span class="d-none d-xxl-inline">Inventory</span><span class="d-xxl-none">+/-</span>
                     </button>
                   </li>
@@ -337,267 +339,7 @@ const altSearchUrl = (card: any) => {
                     );
                   })}
 
-                  <div class="tab-pane fade" id="nav-vendor" role="tabpanel" aria-labelledby="nav-vendor" tabindex="0">
+                  <div class="tab-pane fade" id="nav-vendor" role="tabpanel" aria-labelledby="nav-vendor" tabindex="0"></div>
-                    <div class="row g-3">
-                      <div class="col-12 col-md-6">
-                        <h5 class="my-3">Add {card?.productName} to inventory</h5>
-
-                        <form id="inventoryForm" data-inventory-form novalidate>
-                          <div class="row g-3">
-                            <div class="col-4">
-                              <label for="quantity" class="form-label fw-medium">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-8">
-                              <div class="d-flex justify-content-between align-items-start gap-2 flex-wrap">
-                                <label for="purchasePrice" class="form-label fw-medium mb-0 mt-1">
-                                  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 fw-medium">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>
-
-                            <div class="col-12">
-                              <label for="note" class="form-label fw-medium">
-                                Note
-                                <span class="text-body-tertiary fw-normal ms-1 small">optional</span>
-                              </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">
-                        <h5 class="my-3">Inventory entries for {card?.productName}</h5>
-
-                        <!-- 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">
-
-                          <!-- Inventory card -->
-                          <article class="border rounded-4 p-2 bg-body-tertiary inventory-entry-card">
-                            <div class="d-flex flex-column gap-2">
-
-                              <!-- Top row -->
-                              <div class="d-flex justify-content-between align-items-start gap-3">
-                                <div class="min-w-0 flex-grow-1">
-                                  <div class="fw-semibold fs-5 text-body mb-1">Near Mint</div>
-                                </div>
-                              </div>
-
-                              <!-- Middle row -->
-                              <div class="row g-2">
-                                <div class="col-4">
-                                  <div class="small text-secondary">Purchase price</div>
-                                  <div class="fs-5 fw-semibold">$8.50</div>
-                                </div>
-                                <div class="col-4">
-                                  <div class="small text-secondary">Market price</div>
-                                  <div class="fs-5 text-success">$10.25</div>
-                                </div>
-                                <div class="col-4">
-                                  <div class="small text-secondary">Gain / loss</div>
-                                  <div class="fs-5 fw-semibold text-success">+$1.75</div>
-                                </div>
-                              </div>
-
-                              <!-- Bottom row -->
-                              <div class="d-flex justify-content-between align-items-center gap-3 flex-wrap">
-                                <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">−</button>
-                                    <button type="button" class="btn btn-outline-secondary btn-sm" tabindex="-1">2</button>
-                                    <button type="button" class="btn btn-outline-secondary btn-sm">+</button>
-                                  </div>
-                                </div>
-
-                                <div class="d-flex align-items-center gap-2 flex-wrap">
-                                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
-                                  <button type="button" class="btn btn-sm btn-outline-danger">Remove</button>
-                                </div>
-                              </div>
-                            </div>
-                          </article>
-
-                          <!-- Inventory card -->
-                          <article class="border rounded-4 p-2 bg-body-tertiary inventory-entry-card">
-                            <div class="d-flex flex-column gap-2">
-
-                              <!-- Top row -->
-                              <div class="d-flex justify-content-between align-items-start gap-3">
-                                <div class="min-w-0 flex-grow-1">
-                                  <div class="fw-semibold fs-5 text-body mb-1">Lightly Played</div>
-                                </div>
-                              </div>
-
-                              <div class="row g-2">
-                                <div class="col-4">
-                                  <div class="small text-secondary">Purchase price</div>
-                                  <div class="fs-5 fw-semibold">$6.00</div>
-                                </div>
-                                <div class="col-4">
-                                  <div class="small text-secondary">Market price</div>
-                                  <div class="fs-5 text-success">$8.00</div>
-                                </div>
-                                <div class="col-4">
-                                  <div class="small text-secondary">Gain / loss</div>
-                                  <div class="fs-5 fw-semibold text-success">+$4.00</div>
-                                </div>
-                              </div>
-
-                              <div class="d-flex justify-content-between align-items-center gap-3 flex-wrap">
-                                <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">−</button>
-                                    <button type="button" class="btn btn-outline-secondary btn-sm" tabindex="-1">2</button>
-                                    <button type="button" class="btn btn-outline-secondary btn-sm">+</button>
-                                  </div>
-                                </div>
-
-                                <div class="d-flex align-items-center gap-2 flex-wrap">
-                                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
-                                  <button type="button" class="btn btn-sm btn-outline-danger">Remove</button>
-                                </div>
-                              </div>
-                            </div>
-                          </article>
-
-                        </div>
-                      </div>
-                    </div>
-                  </div>
                 </div>
 
                 <!-- Chart lives permanently outside tab-content so Bootstrap never hides it. -->

src/pages/partials/cards.astro

@@ -283,11 +283,11 @@ const facets = searchResults.results.slice(1).map((result: any) => {
 
 {pokemon.map((card:any) => (
     <div class="col">
-        <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 class="inventory-button position-relative float-end shadow-filter text-center d-none">
-            <b>+/–</b>
+            <div class="inventory-label pt-2">+/-</div>
-        </button>
+        </div>
         <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={`/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="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="holo-shine"></div>
               <div class="holo-glare"></div>
             </div>

tsconfig.json

@@ -1,5 +1,5 @@
 {
   "extends": "astro/tsconfigs/strict",
-  "include": [".astro/types.d.ts", "src/**/*"],
+  "include": [".astro/types.d.ts", "**/*"],
   "exclude": ["dist"]
 }