update social share images

app/page.tsx

@@ -19,7 +19,7 @@ export default function Home() {
 		<main className="min-h-screen flex items-center justify-center bg-[url('/img/table3.png')] bg-cover bg-center">
 			<button
 				onClick={handleCreateGame}
-				className="bg-slate-800 hover:bg-slate-700 text-yellow-400 hover:text-yellow-300 text-lg px-6 py-3 rounded-lg shadow transition-all duration-250 cursor-pointer"
+				className="bg-slate-800 hover:bg-slate-700 text-yellow-400 border border-yellow-500/25 hover:drop-shadow-[0_0_3px_rgba(255,215,0,0.5)] hover:text-yellow-300 text-lg px-6 py-3 rounded-lg shadow transition-all duration-250 cursor-pointer"
 			>
 				Create New Game
 			</button>

components/Card.tsx

@@ -54,14 +54,14 @@ export default function Card({ dm, card, position, settings, flipAction }: CardP
 						<img
 							src={getURL(cardBack as TarokkaGameCard, settings)}
 							alt="Card Back"
-							className="rounded-lg border border-yellow-500 hover:drop-shadow-[0_0_2px_#ffd700]"
+							className={`rounded-lg ${settings.cardStyle === 'grayscale' ? 'border border-yellow-500/25 hover:drop-shadow-[0_0_3px_#ffd700/50]' : ''}`}
 						/>
 					</div>
 					<div className="absolute group inset-0 backface-hidden rotate-y-180">
 						<img
 							src={getURL(card, settings)}
 							alt={aria}
-							className="rounded-lg border border-yellow-500 hover:drop-shadow-[0_0_2px_#ffd700]"
+							className="rounded-lg border border-yellow-500/25 hover:drop-shadow-[0_0_3px_#ffd700/50]"
 						/>
 					</div>
 				</div>

constants/tarokkaCards.ts

@@ -9,6 +9,7 @@ const tarokkaCards: TarokkaCard[] = [
 		aria: 'Back of card',
 		description: 'Back of card',
 		back: true,
+		extension: '.png',
 	},
 	{
 		id: 'swashbuckler',

tools/getURL.ts

@@ -4,5 +4,5 @@ import { Settings, TarokkaGameCard } from '@/types';
 export default function getURL(card: TarokkaGameCard, settings: Settings) {
 	const styleConfig = cardStyles[settings.cardStyle];
 	const fileBase = settings.cardStyle === 'standard' ? standardMap[card.id] : card.id;
-	return `${styleConfig.baseURL}${fileBase}${styleConfig.extension}`;
+	return `${styleConfig.baseURL}${fileBase}${card.extension || styleConfig.extension}`;
 }

types/index.ts

@@ -29,6 +29,7 @@ export interface TarokkaBase {
 	aria: string;
 	back: boolean;
 	suit: 'Coins' | 'Glyphs' | 'High Deck' | 'Stars' | 'Swords' | null;
+	extension?: string;
 }
 
 export interface TarokkaGameBase extends TarokkaBase {