new deck style

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 {