refactor: export FoilOverlay component and apply it universally to foil cards in PackCard and StackView for consistent animation.

docs/development/CENTRAL.md

@@ -54,3 +54,4 @@
 - [Mobile Touch Interaction](./devlog/2025-12-17-021000_mobile_touch_fix.md): Completed. Updated long-press logic to persist preview during finger movement, closing only on release.
 - [Entrance Animation Fix](./devlog/2025-12-17-021500_entrance_animation_fix.md): Completed. Implemented 'isMounted' state to ensuring scale-in animation triggers correctly on first render.
 - [Foil Bug Fix](./devlog/2025-12-17-022000_foil_bug_fix.md): Completed. Fixed regression where foil animations applied to non-foil cards on desktop.
+- [Universal Foil Application](./devlog/2025-12-17-022500_universal_foil_application.md): Completed. Applied foil animation to Grid View and Stack View card thumbnails.

docs/development/devlog/2025-12-17-022500_universal_foil_application.md

@@ -0,0 +1,16 @@
+# Universal Foil Animation
+
+## Objective
+Apply the high-fidelity foil animation to **all** card image instances, including the "Grid View" and "Stack View" thumbnails, not just the magnified hover preview.
+
+## Changes
+- **CardPreview.tsx**: Exported the `FoilOverlay` component so it can be reused across the application.
+- **PackCard.tsx**:
+    - Imported `FoilOverlay`.
+    - Replaced the previous generic static foil gradient in `Grid View` with the `<FoilOverlay />` component.
+- **StackView.tsx**:
+    - Imported `FoilOverlay`.
+    - Replaced the simple opacity layer for foil cards with the `<FoilOverlay />` component.
+
+## Result
+Now, whenever a foil card is displayed on the screen—whether as a thumbnail in a pack grid, a card in a stack pile, or a magnified preview—it consistently features the generic holographic animation and rotating glare effect.

src/client/src/components/CardPreview.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import { DraftCard } from '../services/PackGeneratorService';
 
 // --- Floating Preview Component ---
-const FoilOverlay = () => (
+export const FoilOverlay = () => (
   <div className="absolute inset-0 z-20 pointer-events-none rounded-xl overflow-hidden">
     {/* CSS-based Holographic Pattern */}
     <div className="absolute inset-0 foil-holo" />

src/client/src/components/PackCard.tsx

@@ -8,7 +8,7 @@ interface PackCardProps {
   viewMode: 'list' | 'grid' | 'stack';
 }
 
-import { CardHoverWrapper } from './CardPreview';
+import { CardHoverWrapper, FoilOverlay } from './CardPreview';
 
 
 const ListItem: React.FC<{ card: DraftCard }> = ({ card }) => {
@@ -103,7 +103,7 @@ export const PackCard: React.FC<PackCardProps> = ({ pack, viewMode }) => {
                 <div className="relative group bg-slate-900 rounded-lg">
                   {/* Visual Card */}
                   <div className={`relative aspect-[2.5/3.5] overflow-hidden rounded-lg shadow-xl border transition-all duration-200 group-hover:ring-2 group-hover:ring-purple-400 group-hover:shadow-purple-500/30 cursor-pointer ${isFoil(card) ? 'border-purple-400 shadow-purple-500/20' : 'border-slate-800'}`}>
-                    {isFoil(card) && <div className="absolute inset-0 z-20 bg-gradient-to-tr from-purple-500/10 via-transparent to-pink-500/10 mix-blend-color-dodge pointer-events-none" />}
+                    {isFoil(card) && <FoilOverlay />}
                     {isFoil(card) && <div className="absolute top-1 right-1 z-30 text-[10px] font-bold text-white bg-purple-600/80 px-1 rounded backdrop-blur-sm">FOIL</div>}
 
                     {card.image ? (

src/client/src/components/StackView.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { DraftCard } from '../services/PackGeneratorService';
-import { CardHoverWrapper } from './CardPreview';
+import { CardHoverWrapper, FoilOverlay } from './CardPreview';
 
 interface StackViewProps {
   cards: DraftCard[];
@@ -86,7 +86,7 @@ export const StackView: React.FC<StackViewProps> = ({ cards }) => {
                     >
                       <img src={card.image} alt={card.name} className="w-full h-full object-cover" />
                       {/* Optional: Shine effect for foils if visible? */}
-                      {card.finish === 'foil' && <div className="absolute inset-0 bg-white/10 opacity-30 pointer-events-none" />}
+                      {card.finish === 'foil' && <FoilOverlay />}
                     </div>
                   </CardHoverWrapper>
                 )