refactor card image to fix bug introduced by trying to fix mobile layout

src/components/CardImage.tsx

···
 	rgba(0,0,0,0.05) 16px
 )`;
 
+/** Scryfall card image aspect ratio (672×936 pixels) */
+export const CARD_ASPECT_RATIO = "672/936";
+
+/** Card border radius matching physical card corners */
+export const CARD_BORDER_RADIUS = "4.75%/3.5%";
+
 interface CardImageProps {
 	card: Pick<Card, "name" | "id"> & { layout?: Layout };
 	size?: ImageSize;
 	face?: CardFaceType;
-	className?: string;
+	/** Classes for the outer wrapper (sizing, layout). For non-flippable cards, applied to img. */
+	outerClassName?: string;
+	/** Classes for the img element (shadows, object-fit, etc.) */
+	imgClassName?: string;
 	isFlipped?: boolean;
 	onFlip?: (flipped: boolean) => void;
 }
···
 	card,
 	size = "normal",
 	face = "front",
-	className,
+	outerClassName,
+	imgClassName,
 	isFlipped: controlledFlipped,
 	onFlip,
 }: CardImageProps) {
···
 		}
 	};
 
-	const baseClassName = `${className ?? ""} rounded-[4.75%/3.5%] aspect-[5/7]`;
+	// Base styles always applied to images
+	const imgBaseClassName = `rounded-[${CARD_BORDER_RADIUS}] aspect-[${CARD_ASPECT_RATIO}] max-w-full ${imgClassName ?? ""}`;
 
 	if (!flippable) {
+		// Non-flippable: no wrapper, both outer and img classes go on the img
 		return (
 			<img
 				src={getImageUri(card.id, size, face)}
 				alt={card.name}
-				className={`${baseClassName} bg-gray-200 dark:bg-zinc-700`}
+				className={`${outerClassName ?? ""} ${imgBaseClassName} bg-gray-200 dark:bg-zinc-700`}
 				style={{ backgroundImage: PLACEHOLDER_STRIPES }}
 				loading="lazy"
 			/>
···
 	const rotateScale = 5 / 7;
 
 	return (
-		<div className="relative group">
+		<div
+			className={`relative group aspect-[${CARD_ASPECT_RATIO}] ${outerClassName ?? ""}`}
+		>
 			{flipBehavior === "transform" && hasBack ? (
 				<div
 					className="w-full motion-safe:transition-transform motion-safe:duration-500 motion-safe:ease-in-out"
···
 					<img
 						src={getImageUri(card.id, size, "front")}
 						alt={card.name}
-						className={`${baseClassName} bg-gray-200 dark:bg-zinc-700`}
+						className={`${imgBaseClassName} bg-gray-200 dark:bg-zinc-700`}
 						loading="lazy"
 						style={{
 							backfaceVisibility: "hidden",
···
 					<img
 						src={getImageUri(card.id, size, "back")}
 						alt={`${card.name} (back)`}
-						className={`${baseClassName} bg-gray-200 dark:bg-zinc-700 absolute inset-0`}
+						className={`${imgBaseClassName} bg-gray-200 dark:bg-zinc-700 absolute inset-0`}
 						loading="lazy"
 						style={{
 							backfaceVisibility: "hidden",
···
 				<img
 					src={getImageUri(card.id, size, face)}
 					alt={card.name}
-					className={`${baseClassName} bg-gray-200 dark:bg-zinc-700 motion-safe:transition-transform motion-safe:duration-500 motion-safe:ease-in-out`}
+					className={`${imgBaseClassName} bg-gray-200 dark:bg-zinc-700 motion-safe:transition-transform motion-safe:duration-500 motion-safe:ease-in-out`}
 					loading="lazy"
 					style={{
 						backgroundImage: PLACEHOLDER_STRIPES,
···
 export function CardSkeleton({ className }: { className?: string }) {
 	return (
 		<div
-			className={`aspect-[5/7] rounded-[4.75%/3.5%] bg-gray-200 dark:bg-zinc-700 animate-pulse ${className ?? ""}`}
+			className={`aspect-[${CARD_ASPECT_RATIO}] rounded-[${CARD_BORDER_RADIUS}] bg-gray-200 dark:bg-zinc-700 animate-pulse ${className ?? ""}`}
 			style={{ backgroundImage: PLACEHOLDER_STRIPES }}
 		/>
 	);
···
 			<CardImage
 				card={card}
 				size="normal"
-				className="w-full h-full object-cover rounded-[4.75%/3.5%]"
+				outerClassName="w-full h-full"
+				imgClassName="object-cover"
 			/>
 			<div className="absolute inset-0 bg-gradient-to-t from-black/80 dark:from-black/90 via-black/0 to-black/0 opacity-0 group-hover:opacity-100 motion-safe:transition-opacity">
 				<div className="absolute bottom-0 left-0 right-0 p-3">
···
 		</>
 	);
 
-	const className =
-		"group relative aspect-[5/7] overflow-hidden hover:ring-2 hover:ring-cyan-500 motion-safe:transition-shadow block rounded-[4.75%/3.5%]";
+	const className = `group relative aspect-[${CARD_ASPECT_RATIO}] overflow-hidden hover:ring-2 hover:ring-cyan-500 motion-safe:transition-shadow block rounded-[${CARD_BORDER_RADIUS}]`;
 
 	if (href) {
 		return (
···
 		<CardImage
 			card={card}
 			size="normal"
-			className="w-full h-full object-cover rounded-[4.75%/3.5%]"
+			outerClassName="w-full h-full"
+			imgClassName="object-cover"
 		/>
 	);
 
-	const baseClassName =
-		"aspect-[5/7] overflow-hidden hover:ring-2 hover:ring-cyan-500 motion-safe:transition-shadow block rounded-[4.75%/3.5%]";
+	const baseClassName = `aspect-[${CARD_ASPECT_RATIO}] overflow-hidden hover:ring-2 hover:ring-cyan-500 motion-safe:transition-shadow block rounded-[${CARD_BORDER_RADIUS}]`;
 	const finalClassName = `${baseClassName} ${className ?? ""}`;
 
 	if (href) {

src/components/CardSpread.tsx

···
 						} as React.CSSProperties
 					}
 				>
-					<CardImage
-						card={{ id: id as ScryfallId, name: "" }}
-						size="small"
-						className="rounded"
-					/>
+					<CardImage card={{ id: id as ScryfallId, name: "" }} size="small" />
 				</div>
 			))}
 			<style>{`

src/components/HoverCardPreview.tsx

···
 			<CardImage
 				card={card}
 				size="normal"
-				className="w-full shadow-2xl shadow-black/50"
+				outerClassName="w-full"
+				imgClassName="shadow-2xl shadow-black/50"
 			/>
 		</div>,
 		document.body,

src/components/deck/CardModal.tsx

···
 										<CardImage
 											card={cardData}
 											size="normal"
-											className="w-full h-auto shadow-lg rounded-[4.75%/3.5%]"
+											outerClassName="w-full h-auto"
+											imgClassName="shadow-lg"
 										/>
 									</div>
 								</div>

src/components/deck/CardPreviewPane.tsx

···
 				<CardImage
 					card={data}
 					size="large"
-					className="shadow-[0_0.5rem_1.875rem_rgba(0,0,0,0.4)] dark:shadow-[0_0.5rem_1.875rem_rgba(0,0,0,0.8)] w-full h-auto object-contain rounded-[4.75%/3.5%]"
+					outerClassName="w-full h-auto"
+					imgClassName="shadow-[0_0.5rem_1.875rem_rgba(0,0,0,0.4)] dark:shadow-[0_0.5rem_1.875rem_rgba(0,0,0,0.8)] object-contain"
 				/>
 			)}
 		</div>

src/components/deck/DeckSampleView.tsx

···
 						<CardImage
 							card={{ id: card.cardId, name: "" }}
 							size="normal"
-							className="h-52 aspect-[5/7] rounded-lg"
+							outerClassName="h-52"
 						/>
 					</div>
 				))}

src/components/deck/GoldfishDragDropProvider.tsx

···
 	useSensors,
 } from "@dnd-kit/core";
 import { type ReactNode, useId, useRef, useState } from "react";
-import { PLACEHOLDER_STRIPES } from "@/components/CardImage";
+import {
+	CARD_ASPECT_RATIO,
+	CARD_BORDER_RADIUS,
+	PLACEHOLDER_STRIPES,
+} from "@/components/CardImage";
 import type { CardInstance } from "@/lib/goldfish/types";
 import { getImageUri } from "@/lib/scryfall-utils";
 
···
 				<img
 					src={imageSrc}
 					alt="Dragging card"
-					className="h-40 aspect-[5/7] rounded-[4.75%/3.5%] bg-gray-200 dark:bg-zinc-700 shadow-2xl"
+					className={`h-40 aspect-[${CARD_ASPECT_RATIO}] rounded-[${CARD_BORDER_RADIUS}] bg-gray-200 dark:bg-zinc-700 shadow-2xl`}
 					style={{ backgroundImage: PLACEHOLDER_STRIPES }}
 					draggable={false}
 				/>
 			) : (
-				<div className="h-40 aspect-[5/7] rounded-[4.75%/3.5%] bg-amber-700 shadow-2xl" />
+				<div
+					className={`h-40 aspect-[${CARD_ASPECT_RATIO}] rounded-[${CARD_BORDER_RADIUS}] bg-amber-700 shadow-2xl`}
+				/>
 			)}
 			{counterEntries.length > 0 && (
 				<div className="absolute bottom-1 left-1 flex flex-wrap gap-1 max-w-full">

src/components/deck/goldfish/GoldfishBoard.tsx

···
 import type { DragEndEvent } from "@dnd-kit/core";
 import { useCallback, useRef } from "react";
-import { CardImage } from "@/components/CardImage";
+import {
+	CARD_ASPECT_RATIO,
+	CARD_BORDER_RADIUS,
+	CardImage,
+} from "@/components/CardImage";
 import type { DeckCard } from "@/lib/deck-types";
 import { useGoldfishGame } from "@/lib/goldfish";
 import type { CardInstance, Zone } from "@/lib/goldfish/types";
···
 						<CardImage
 							card={hoveredCardData}
 							size="large"
-							className="w-full aspect-[5/7] rounded-lg shadow-lg"
+							outerClassName="w-full"
+							imgClassName="shadow-lg"
 							isFlipped={
 								hoveredCard?.faceIndex ? hoveredCard.faceIndex > 0 : false
 							}
 						/>
 					) : (
-						<div className="w-full aspect-[5/7] rounded-lg bg-gray-100 dark:bg-zinc-800 flex items-center justify-center text-gray-400 dark:text-zinc-400 text-sm">
+						<div
+							className={`w-full aspect-[${CARD_ASPECT_RATIO}] rounded-[${CARD_BORDER_RADIUS}] bg-gray-100 dark:bg-zinc-800 flex items-center justify-center text-gray-400 dark:text-zinc-400 text-sm`}
+						>
 							{hoveredCard?.isFaceDown ? "Face down" : "Hover a card"}
 						</div>
 					)}

src/components/deck/goldfish/GoldfishCard.tsx

···
 import { useDraggable } from "@dnd-kit/core";
-import { PLACEHOLDER_STRIPES } from "@/components/CardImage";
+import {
+	CARD_ASPECT_RATIO,
+	CARD_BORDER_RADIUS,
+	PLACEHOLDER_STRIPES,
+} from "@/components/CardImage";
 import type { CardInstance } from "@/lib/goldfish/types";
 import type { Card } from "@/lib/scryfall-types";
 import { getImageUri } from "@/lib/scryfall-utils";
···
 				<img
 					src={imageSrc}
 					alt={card?.name ?? "Card"}
-					className={`rounded-[4.75%/3.5%] bg-gray-200 dark:bg-zinc-700 ${sizeClass} aspect-[5/7]`}
+					className={`rounded-[${CARD_BORDER_RADIUS}] bg-gray-200 dark:bg-zinc-700 ${sizeClass} aspect-[${CARD_ASPECT_RATIO}]`}
 					style={{ backgroundImage: PLACEHOLDER_STRIPES }}
 					draggable={false}
 					loading="lazy"
 				/>
 			) : (
 				<div
-					className={`rounded-[4.75%/3.5%] bg-amber-700 ${sizeClass} aspect-[5/7]`}
+					className={`rounded-[${CARD_BORDER_RADIUS}] bg-amber-700 ${sizeClass} aspect-[${CARD_ASPECT_RATIO}]`}
 				/>
 			)}
 			{counterEntries.length > 0 && (

src/components/deck/goldfish/GoldfishSidebar.tsx

···
 import { useDroppable } from "@dnd-kit/core";
 import { Droplet, Minus, Plus, RefreshCw, RotateCcw } from "lucide-react";
+import { CARD_ASPECT_RATIO, CARD_BORDER_RADIUS } from "@/components/CardImage";
 import type { CardInstance, PlayerState } from "@/lib/goldfish/types";
 import type { Card, ScryfallId } from "@/lib/scryfall-types";
 import { GoldfishCard } from "./GoldfishCard";
···
 						fromLibrary
 					/>
 				) : (
-					<div className="h-40 aspect-[5/7] rounded-[4.75%/3.5%] border-2 border-dashed border-gray-300 dark:border-zinc-600" />
+					<div
+						className={`h-40 aspect-[${CARD_ASPECT_RATIO}] rounded-[${CARD_BORDER_RADIUS}] border-2 border-dashed border-gray-300 dark:border-zinc-600`}
+					/>
 				)}
 			</div>
 

src/routes/card/$id.tsx

···
 import { useQueries, useQuery } from "@tanstack/react-query";
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { useEffect, useRef, useState } from "react";
-import { CardImage, CardSkeleton } from "@/components/CardImage";
+import {
+	CARD_ASPECT_RATIO,
+	CardImage,
+	CardSkeleton,
+} from "@/components/CardImage";
 import { CommentsPanel } from "@/components/comments";
 import { ManaCost } from "@/components/ManaCost";
 import { OracleText } from "@/components/OracleText";
···
 				<div className="max-w-7xl mx-auto px-6 py-8">
 					<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
 						<div className="sticky top-0 z-10 bg-white dark:bg-zinc-900 py-4 -mx-6 px-6 lg:mx-0 lg:px-0 lg:py-0 lg:bg-transparent lg:dark:bg-transparent lg:top-8 flex justify-center lg:justify-end">
-							<CardSkeleton className="h-[50vh] lg:h-[80vh] shadow-[0_8px_30px_rgba(0,0,0,0.4)] dark:shadow-[0_8px_30px_rgba(0,0,0,0.8)]" />
+							<div
+								className={`w-full max-w-[calc(50vh*${CARD_ASPECT_RATIO})] lg:max-w-[calc(80vh*${CARD_ASPECT_RATIO})]`}
+							>
+								<CardSkeleton className="h-full w-full shadow-[0_8px_30px_rgba(0,0,0,0.4)] dark:shadow-[0_8px_30px_rgba(0,0,0,0.8)]" />
+							</div>
 						</div>
 						<div className="space-y-6 min-w-0">
 							<div className="space-y-3">
···
 			<div className="max-w-7xl mx-auto px-6 py-8">
 				<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
 					<div className="sticky top-0 z-10 bg-white dark:bg-zinc-900 py-4 -mx-6 px-6 lg:mx-0 lg:px-0 lg:py-0 lg:bg-transparent lg:dark:bg-transparent lg:top-8 flex justify-center lg:justify-end">
-						<CardImage
-							card={displayCard}
-							size="large"
-							className="shadow-[0_8px_30px_rgba(0,0,0,0.4)] dark:shadow-[0_8px_30px_rgba(0,0,0,0.8)] h-[50vh] lg:h-[80vh]"
-						/>
+						<div
+							className={`w-full max-w-[calc(50vh*${CARD_ASPECT_RATIO})] lg:max-w-[calc(80vh*${CARD_ASPECT_RATIO})]`}
+						>
+							<CardImage
+								card={displayCard}
+								size="large"
+								outerClassName="w-full"
+								imgClassName="shadow-[0_8px_30px_rgba(0,0,0,0.4)] dark:shadow-[0_8px_30px_rgba(0,0,0,0.8)]"
+							/>
+						</div>
 					</div>
 
 					<div className="space-y-6 min-w-0">

src/routes/profile/$did/list/$rkey/index.tsx

···
 				<CardImage
 					card={{ id: item.scryfallId, name: card.name }}
 					size="small"
-					className="w-16 h-auto rounded"
+					outerClassName="w-16 h-auto"
 				/>
 
 				<div className="flex-1 min-w-0">