work on full goldfishing (messy)!

src/components/CardImage.tsx

···
 } from "../lib/scryfall-types";
 import { type CardFaceType, getImageUri } from "../lib/scryfall-utils";
 
-const PLACEHOLDER_STRIPES = `repeating-linear-gradient(
+export const PLACEHOLDER_STRIPES = `repeating-linear-gradient(
 	-45deg,
 	transparent,
 	transparent 8px,

src/components/deck/DeckActionsMenu.tsx

···
 import { useQueryClient } from "@tanstack/react-query";
-import { MoreVertical, Trash2 } from "lucide-react";
+import { Link } from "@tanstack/react-router";
+import { MoreVertical, Play, Trash2 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { DeleteDeckDialog } from "@/components/deck/DeleteDeckDialog";
···
 
 interface DeckActionsMenuProps {
 	deck: Deck;
+	did: string;
 	rkey: Rkey;
-	onUpdateDeck: (updater: (prev: Deck) => Deck) => Promise<void>;
+	onUpdateDeck?: (updater: (prev: Deck) => Deck) => Promise<void>;
 	onCardsChanged?: (changedIds: Set<ScryfallId>) => void;
+	readOnly?: boolean;
 }
 
 export function DeckActionsMenu({
 	deck,
+	did,
 	rkey,
 	onUpdateDeck,
 	onCardsChanged,
+	readOnly = false,
 }: DeckActionsMenuProps) {
 	const queryClient = useQueryClient();
 	const [isOpen, setIsOpen] = useState(false);
···
 	}, [isOpen]);
 
 	const handleSetAllToCheapest = async () => {
+		if (!onUpdateDeck) return;
 		setIsOpen(false);
 		const toastId = toast.loading("Finding cheapest printings...");
 
···
 	};
 
 	const handleSetAllToBest = async () => {
+		if (!onUpdateDeck) return;
 		setIsOpen(false);
 		const toastId = toast.loading("Finding best printings...");
 
···
 
 			{isOpen && (
 				<div className="absolute left-0 mt-2 w-48 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden z-50">
-					<button
-						type="button"
-						onClick={handleSetAllToCheapest}
-						className="w-full text-left px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-gray-900 dark:text-white text-sm"
+					<Link
+						to="/profile/$did/deck/$rkey/play"
+						params={{ did, rkey }}
+						className="w-full text-left px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-gray-900 dark:text-white text-sm flex items-center gap-2"
+						onClick={() => setIsOpen(false)}
 					>
-						Set all to cheapest
-					</button>
-					<button
-						type="button"
-						onClick={handleSetAllToBest}
-						className="w-full text-left px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-gray-900 dark:text-white text-sm"
-					>
-						Set all to best
-					</button>
-					<div className="border-t border-gray-200 dark:border-gray-700" />
-					<button
-						type="button"
-						onClick={() => {
-							setIsOpen(false);
-							setShowDeleteDialog(true);
-						}}
-						className="w-full text-left px-4 py-3 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors text-red-600 dark:text-red-400 text-sm flex items-center gap-2"
-					>
-						<Trash2 size={14} />
-						Delete deck
-					</button>
+						<Play size={14} />
+						Playtest
+					</Link>
+					{!readOnly && (
+						<>
+							<div className="border-t border-gray-200 dark:border-gray-700" />
+							<button
+								type="button"
+								onClick={handleSetAllToCheapest}
+								className="w-full text-left px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-gray-900 dark:text-white text-sm"
+							>
+								Set all to cheapest
+							</button>
+							<button
+								type="button"
+								onClick={handleSetAllToBest}
+								className="w-full text-left px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-gray-900 dark:text-white text-sm"
+							>
+								Set all to best
+							</button>
+							<div className="border-t border-gray-200 dark:border-gray-700" />
+							<button
+								type="button"
+								onClick={() => {
+									setIsOpen(false);
+									setShowDeleteDialog(true);
+								}}
+								className="w-full text-left px-4 py-3 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors text-red-600 dark:text-red-400 text-sm flex items-center gap-2"
+							>
+								<Trash2 size={14} />
+								Delete deck
+							</button>
+						</>
+					)}
 				</div>
 			)}
 

src/components/deck/GoldfishDragDropProvider.tsx

···
+import {
+	DndContext,
+	type DragEndEvent,
+	type DragMoveEvent,
+	type DragOverEvent,
+	DragOverlay,
+	type DragStartEvent,
+	KeyboardSensor,
+	PointerSensor,
+	TouchSensor,
+	useSensor,
+	useSensors,
+} from "@dnd-kit/core";
+import { type ReactNode, useId, useRef, useState } from "react";
+import { PLACEHOLDER_STRIPES } from "@/components/CardImage";
+import type { CardInstance } from "@/lib/goldfish/types";
+import { getImageUri } from "@/lib/scryfall-utils";
+
+export interface DragPosition {
+	translated: { left: number; top: number } | null;
+}
+
+interface GoldfishDragDropProviderProps {
+	children: ReactNode;
+	onDragStart?: (event: DragStartEvent) => void;
+	onDragOver?: (event: DragOverEvent) => void;
+	onDragEnd: (event: DragEndEvent, lastPosition: DragPosition | null) => void;
+}
+
+export function GoldfishDragDropProvider({
+	children,
+	onDragStart,
+	onDragOver,
+	onDragEnd,
+}: GoldfishDragDropProviderProps) {
+	const dndContextId = useId();
+	const [activeCard, setActiveCard] = useState<CardInstance | null>(null);
+	// Track position during drag since rect.current.translated is null in onDragEnd
+	// See: https://github.com/clauderic/dnd-kit/discussions/236
+	const lastPositionRef = useRef<DragPosition | null>(null);
+
+	const pointerSensor = useSensor(PointerSensor, {
+		activationConstraint: {
+			distance: 8,
+		},
+	});
+
+	const touchSensor = useSensor(TouchSensor, {
+		activationConstraint: {
+			delay: 200,
+			tolerance: 5,
+		},
+	});
+
+	const keyboardSensor = useSensor(KeyboardSensor);
+
+	const sensors = useSensors(pointerSensor, touchSensor, keyboardSensor);
+
+	const handleDragStart = (event: DragStartEvent) => {
+		const data = event.active.data.current as
+			| { instance: CardInstance }
+			| undefined;
+		if (data?.instance) {
+			setActiveCard(data.instance);
+		}
+		lastPositionRef.current = null;
+		onDragStart?.(event);
+	};
+
+	const handleDragMove = (event: DragMoveEvent) => {
+		const rect = event.active.rect.current.translated;
+		if (rect) {
+			lastPositionRef.current = {
+				translated: { left: rect.left, top: rect.top },
+			};
+		}
+	};
+
+	const handleDragEnd = (event: DragEndEvent) => {
+		const lastPosition = lastPositionRef.current;
+		setActiveCard(null);
+		lastPositionRef.current = null;
+		onDragEnd(event, lastPosition);
+	};
+
+	return (
+		<DndContext
+			id={dndContextId}
+			sensors={sensors}
+			onDragStart={handleDragStart}
+			onDragMove={handleDragMove}
+			onDragOver={onDragOver}
+			onDragEnd={handleDragEnd}
+		>
+			{children}
+			<DragOverlay dropAnimation={null}>
+				{activeCard && <DragPreview instance={activeCard} />}
+			</DragOverlay>
+		</DndContext>
+	);
+}
+
+function DragPreview({ instance }: { instance: CardInstance }) {
+	const isFlipped = instance.faceIndex > 0;
+	const imageSrc = instance.isFaceDown
+		? null
+		: getImageUri(instance.cardId, "normal", isFlipped ? "back" : "front");
+
+	const counterEntries = Object.entries(instance.counters);
+
+	return (
+		<div
+			className={`relative pointer-events-none ${instance.isTapped ? "rotate-90" : ""}`}
+		>
+			{imageSrc ? (
+				<img
+					src={imageSrc}
+					alt="Dragging card"
+					className="h-40 aspect-[5/7] rounded-[4.75%/3.5%] bg-gray-200 dark:bg-slate-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" />
+			)}
+			{counterEntries.length > 0 && (
+				<div className="absolute bottom-1 left-1 flex flex-wrap gap-1 max-w-full">
+					{counterEntries.map(([type, count]) => (
+						<span
+							key={type}
+							className="px-1.5 py-0.5 text-xs font-bold rounded bg-black/70 text-white"
+						>
+							{type === "+1/+1" ? `+${count}/+${count}` : `${count}`}
+						</span>
+					))}
+				</div>
+			)}
+		</div>
+	);
+}

src/components/deck/goldfish/GoldfishBattlefield.tsx

···
+import { useDroppable } from "@dnd-kit/core";
+import { forwardRef } from "react";
+import type { CardInstance } from "@/lib/goldfish/types";
+import type { Card, ScryfallId } from "@/lib/scryfall-types";
+import { GoldfishCard } from "./GoldfishCard";
+
+interface GoldfishBattlefieldProps {
+	cards: CardInstance[];
+	cardLookup?: (id: ScryfallId) => Card | undefined;
+	onHover?: (instanceId: number | null) => void;
+	onClick?: (instanceId: number) => void;
+}
+
+export const GoldfishBattlefield = forwardRef<
+	HTMLDivElement,
+	GoldfishBattlefieldProps
+>(function GoldfishBattlefield({ cards, cardLookup, onHover, onClick }, ref) {
+	const { setNodeRef, isOver } = useDroppable({
+		id: "zone-battlefield",
+		data: { zone: "battlefield" },
+	});
+
+	return (
+		<div ref={ref} className="flex-1 min-h-[300px]">
+			<div
+				ref={setNodeRef}
+				className={`isolate relative w-full h-full rounded-lg border-2 border-dashed transition-colors ${
+					isOver
+						? "border-green-500 bg-green-500/10"
+						: "border-gray-300 dark:border-slate-600 bg-gray-50 dark:bg-slate-800/50"
+				}`}
+			>
+				{cards.length === 0 && (
+					<div className="absolute inset-0 flex items-center justify-center text-gray-400 dark:text-gray-500 text-sm pointer-events-none">
+						Battlefield
+					</div>
+				)}
+				{cards.map((instance) => (
+					<GoldfishCard
+						key={instance.instanceId}
+						instance={instance}
+						card={cardLookup?.(instance.cardId)}
+						onHover={onHover}
+						onClick={onClick}
+						positioning="absolute"
+						style={{
+							left: instance.position?.x ?? 100,
+							top: instance.position?.y ?? 100,
+							zIndex: instance.zIndex,
+						}}
+					/>
+				))}
+			</div>
+		</div>
+	);
+});

src/components/deck/goldfish/GoldfishBoard.tsx

···
+import type { DragEndEvent } from "@dnd-kit/core";
+import { useCallback, useRef } from "react";
+import { CardImage } from "@/components/CardImage";
+import type { DeckCard } from "@/lib/deck-types";
+import { useGoldfishGame } from "@/lib/goldfish";
+import type { CardInstance, Zone } from "@/lib/goldfish/types";
+import type { Card, ScryfallId } from "@/lib/scryfall-types";
+import {
+	type DragPosition,
+	GoldfishDragDropProvider,
+} from "../GoldfishDragDropProvider";
+import { GoldfishBattlefield } from "./GoldfishBattlefield";
+import { GoldfishHand } from "./GoldfishHand";
+import { GoldfishSidebar } from "./GoldfishSidebar";
+
+interface GoldfishBoardProps {
+	deck: DeckCard[];
+	cardLookup: (id: ScryfallId) => Card | undefined;
+	startingLife?: number;
+}
+
+export function GoldfishBoard({
+	deck,
+	cardLookup,
+	startingLife = 20,
+}: GoldfishBoardProps) {
+	const { state, actions, SeedEmbed } = useGoldfishGame(deck, {
+		startingLife,
+		cardLookup,
+	});
+
+	const battlefieldRef = useRef<HTMLDivElement>(null);
+
+	const handleDragEnd = useCallback(
+		(event: DragEndEvent, lastPosition: DragPosition | null) => {
+			const { active, over, delta } = event;
+
+			if (!over) return;
+
+			const cardData = active.data.current as
+				| { instance: CardInstance; fromLibrary?: boolean }
+				| undefined;
+			if (!cardData?.instance) return;
+
+			const instance = cardData.instance;
+			const instanceId = instance.instanceId;
+			const fromLibrary = cardData.fromLibrary ?? false;
+			const targetZone = (over.data.current as { zone: Zone } | undefined)
+				?.zone;
+
+			if (!targetZone) return;
+
+			if (targetZone === "battlefield") {
+				const battlefieldRect = battlefieldRef.current?.getBoundingClientRect();
+
+				if (battlefieldRect) {
+					let x: number;
+					let y: number;
+
+					if (instance.position) {
+						// Card is already on battlefield - just add delta
+						x = instance.position.x + delta.x;
+						y = instance.position.y + delta.y;
+					} else if (lastPosition?.translated) {
+						// Card coming from another zone - use tracked translated position
+						// (rect.current.translated is null in onDragEnd, so we track it in onDragMove)
+						x = lastPosition.translated.left - battlefieldRect.left;
+						y = lastPosition.translated.top - battlefieldRect.top;
+					} else {
+						// Fallback: center of battlefield
+						x = battlefieldRect.width / 2;
+						y = battlefieldRect.height / 2;
+					}
+
+					actions.moveCard(instanceId, targetZone, {
+						position: { x, y },
+						faceDown: fromLibrary ? true : undefined,
+					});
+				} else {
+					actions.moveCard(instanceId, targetZone, {
+						faceDown: fromLibrary ? true : undefined,
+					});
+				}
+			} else {
+				actions.moveCard(instanceId, targetZone, {
+					faceDown: fromLibrary ? true : undefined,
+				});
+			}
+		},
+		[actions],
+	);
+
+	const hoveredCard = state.hoveredId
+		? [
+				...state.hand,
+				...state.battlefield,
+				...state.graveyard,
+				...state.exile,
+			].find((c) => c.instanceId === state.hoveredId)
+		: null;
+
+	const hoveredCardData = hoveredCard ? cardLookup(hoveredCard.cardId) : null;
+
+	return (
+		<GoldfishDragDropProvider onDragEnd={handleDragEnd}>
+			<SeedEmbed />
+			<div className="flex h-full gap-4 p-4 bg-white dark:bg-slate-950">
+				{/* Left: Card Preview */}
+				<div className="w-64 flex-shrink-0">
+					{hoveredCardData ? (
+						<CardImage
+							card={hoveredCardData}
+							size="large"
+							className="w-full aspect-[5/7] rounded-lg shadow-lg"
+							isFlipped={
+								hoveredCard?.faceIndex ? hoveredCard.faceIndex > 0 : false
+							}
+						/>
+					) : (
+						<div className="w-full aspect-[5/7] rounded-lg bg-gray-100 dark:bg-slate-800 flex items-center justify-center text-gray-400 dark:text-gray-500 text-sm">
+							Hover a card
+						</div>
+					)}
+				</div>
+
+				{/* Center: Battlefield + Hand */}
+				<div className="flex-1 flex flex-col gap-4 min-w-0">
+					<GoldfishBattlefield
+						ref={battlefieldRef}
+						cards={state.battlefield}
+						cardLookup={cardLookup}
+						onHover={actions.setHoveredCard}
+						onClick={actions.toggleTap}
+					/>
+					<GoldfishHand
+						cards={state.hand}
+						cardLookup={cardLookup}
+						onHover={actions.setHoveredCard}
+						onClick={(id) => actions.moveCard(id, "battlefield")}
+					/>
+				</div>
+
+				{/* Right: Sidebar */}
+				<GoldfishSidebar
+					library={state.library}
+					graveyard={state.graveyard}
+					exile={state.exile}
+					player={state.player}
+					cardLookup={cardLookup}
+					onHover={actions.setHoveredCard}
+					onClick={actions.toggleTap}
+					onDraw={actions.draw}
+					onUntapAll={actions.untapAll}
+					onMulligan={actions.mulligan}
+					onReset={actions.reset}
+					onAdjustLife={actions.adjustLife}
+					onAdjustPoison={actions.adjustPoison}
+				/>
+			</div>
+		</GoldfishDragDropProvider>
+	);
+}

src/components/deck/goldfish/GoldfishCard.tsx

···
+import { useDraggable } from "@dnd-kit/core";
+import { 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";
+
+interface GoldfishCardProps {
+	instance: CardInstance;
+	card?: Card;
+	onHover?: (instanceId: number | null) => void;
+	onClick?: (instanceId: number) => void;
+	size?: "tiny" | "small" | "normal";
+	positioning?: "relative" | "absolute";
+	className?: string;
+	style?: React.CSSProperties;
+}
+
+export function GoldfishCard({
+	instance,
+	card,
+	onHover,
+	onClick,
+	size = "normal",
+	positioning = "relative",
+	className = "",
+	style,
+}: GoldfishCardProps) {
+	const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+		id: `card-${instance.instanceId}`,
+		data: { instance },
+	});
+
+	const isFlipped = instance.faceIndex > 0;
+	const imageSize = size === "normal" ? "normal" : "small";
+	const imageSrc = instance.isFaceDown
+		? null
+		: getImageUri(instance.cardId, imageSize, isFlipped ? "back" : "front");
+
+	const counterEntries = Object.entries(instance.counters);
+	const sizeClass =
+		size === "tiny" ? "h-14" : size === "small" ? "h-24" : "h-40";
+
+	return (
+		<button
+			type="button"
+			ref={setNodeRef}
+			className={`${positioning} select-none ${className} ${isDragging ? "opacity-0" : ""} ${instance.isTapped ? "rotate-90" : ""}`}
+			style={style}
+			onMouseEnter={() => onHover?.(instance.instanceId)}
+			onMouseLeave={() => onHover?.(null)}
+			onClick={() => onClick?.(instance.instanceId)}
+			{...listeners}
+			{...attributes}
+		>
+			{imageSrc ? (
+				<img
+					src={imageSrc}
+					alt={card?.name ?? "Card"}
+					className={`rounded-[4.75%/3.5%] bg-gray-200 dark:bg-slate-700 ${sizeClass} aspect-[5/7]`}
+					style={{ backgroundImage: PLACEHOLDER_STRIPES }}
+					draggable={false}
+					loading="lazy"
+				/>
+			) : (
+				<div
+					className={`rounded-[4.75%/3.5%] bg-amber-700 ${sizeClass} aspect-[5/7]`}
+				/>
+			)}
+			{counterEntries.length > 0 && (
+				<div className="absolute bottom-1 left-1 flex flex-wrap gap-1 max-w-full">
+					{counterEntries.map(([type, count]) => (
+						<span
+							key={type}
+							className="px-1.5 py-0.5 text-xs font-bold rounded bg-black/70 text-white"
+							title={type}
+						>
+							{type === "+1/+1" ? `+${count}/+${count}` : `${count}`}
+						</span>
+					))}
+				</div>
+			)}
+		</button>
+	);
+}

src/components/deck/goldfish/GoldfishHand.tsx

···
+import { useDroppable } from "@dnd-kit/core";
+import type { CardInstance } from "@/lib/goldfish/types";
+import type { Card, ScryfallId } from "@/lib/scryfall-types";
+import { GoldfishCard } from "./GoldfishCard";
+
+interface GoldfishHandProps {
+	cards: CardInstance[];
+	cardLookup?: (id: ScryfallId) => Card | undefined;
+	onHover?: (instanceId: number | null) => void;
+	onClick?: (instanceId: number) => void;
+}
+
+export function GoldfishHand({
+	cards,
+	cardLookup,
+	onHover,
+	onClick,
+}: GoldfishHandProps) {
+	const { setNodeRef, isOver } = useDroppable({
+		id: "zone-hand",
+		data: { zone: "hand" },
+	});
+
+	return (
+		<div
+			ref={setNodeRef}
+			className={`flex gap-2 overflow-x-auto p-2 min-h-[11rem] rounded-lg border-2 border-dashed transition-colors ${
+				isOver
+					? "border-blue-500 bg-blue-500/10"
+					: "border-gray-300 dark:border-slate-600 bg-gray-50 dark:bg-slate-800/50"
+			}`}
+		>
+			{cards.length === 0 ? (
+				<div className="flex items-center justify-center w-full text-gray-400 dark:text-gray-500 text-sm">
+					Hand is empty
+				</div>
+			) : (
+				cards.map((instance) => (
+					<GoldfishCard
+						key={instance.instanceId}
+						instance={instance}
+						card={cardLookup?.(instance.cardId)}
+						onHover={onHover}
+						onClick={onClick}
+						className="flex-shrink-0"
+					/>
+				))
+			)}
+		</div>
+	);
+}

src/components/deck/goldfish/GoldfishLibraryCard.tsx

···
+import { useDraggable } from "@dnd-kit/core";
+import type { CardInstance } from "@/lib/goldfish/types";
+
+interface GoldfishLibraryCardProps {
+	topCard: CardInstance;
+	onDraw: () => void;
+}
+
+export function GoldfishLibraryCard({
+	topCard,
+	onDraw,
+}: GoldfishLibraryCardProps) {
+	const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+		id: `library-top-${topCard.instanceId}`,
+		data: {
+			instance: { ...topCard, isFaceDown: true },
+			fromLibrary: true,
+		},
+	});
+
+	return (
+		<button
+			type="button"
+			ref={setNodeRef}
+			onClick={onDraw}
+			className={`w-full aspect-[5/7] rounded-[4.75%/3.5%] bg-amber-700 shadow-md cursor-grab active:cursor-grabbing ${isDragging ? "opacity-0" : ""}`}
+			{...listeners}
+			{...attributes}
+		/>
+	);
+}

src/components/deck/goldfish/GoldfishPile.tsx

···
+import { useDroppable } from "@dnd-kit/core";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { useState } from "react";
+import type { CardInstance, Zone } from "@/lib/goldfish/types";
+import type { Card, ScryfallId } from "@/lib/scryfall-types";
+import { GoldfishCard } from "./GoldfishCard";
+
+interface GoldfishPileProps {
+	zone: Zone;
+	label: string;
+	cards: CardInstance[];
+	cardLookup?: (id: ScryfallId) => Card | undefined;
+	onHover?: (instanceId: number | null) => void;
+	onClick?: (instanceId: number) => void;
+}
+
+export function GoldfishPile({
+	zone,
+	label,
+	cards,
+	cardLookup,
+	onHover,
+	onClick,
+}: GoldfishPileProps) {
+	const [expanded, setExpanded] = useState(false);
+
+	const { setNodeRef, isOver } = useDroppable({
+		id: `zone-${zone}`,
+		data: { zone },
+	});
+
+	return (
+		<div
+			ref={setNodeRef}
+			className={`rounded-lg border-2 border-dashed transition-colors ${
+				isOver
+					? "border-purple-500 bg-purple-500/10"
+					: "border-gray-300 dark:border-slate-600 bg-gray-50 dark:bg-slate-800/50"
+			}`}
+		>
+			<button
+				type="button"
+				onClick={() => setExpanded(!expanded)}
+				className="w-full flex items-center justify-between p-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-slate-700 rounded-t-lg"
+			>
+				<span>
+					{label} ({cards.length})
+				</span>
+				{expanded ? (
+					<ChevronUp className="w-4 h-4" />
+				) : (
+					<ChevronDown className="w-4 h-4" />
+				)}
+			</button>
+			{expanded && cards.length > 0 && (
+				<div className="p-2 pt-0 grid grid-cols-3 gap-1 max-h-36 overflow-y-auto">
+					{cards.map((instance) => (
+						<GoldfishCard
+							key={instance.instanceId}
+							instance={instance}
+							card={cardLookup?.(instance.cardId)}
+							onHover={onHover}
+							onClick={onClick}
+							size="tiny"
+						/>
+					))}
+				</div>
+			)}
+			{!expanded && cards.length > 0 && (
+				<div className="p-2 pt-0">
+					<div className="relative h-14 w-10">
+						{cards.slice(-3).map((instance, i) => (
+							<GoldfishCard
+								key={instance.instanceId}
+								instance={instance}
+								card={cardLookup?.(instance.cardId)}
+								onHover={onHover}
+								onClick={onClick}
+								size="tiny"
+								positioning="absolute"
+								style={{
+									top: i * 2,
+									left: i * 2,
+									zIndex: i,
+								}}
+							/>
+						))}
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}

src/components/deck/goldfish/GoldfishSidebar.tsx

···
+import { Droplet, Minus, Plus, RefreshCw, RotateCcw } from "lucide-react";
+import type { CardInstance, PlayerState } from "@/lib/goldfish/types";
+import type { Card, ScryfallId } from "@/lib/scryfall-types";
+import { GoldfishLibraryCard } from "./GoldfishLibraryCard";
+import { GoldfishPile } from "./GoldfishPile";
+
+interface GoldfishSidebarProps {
+	library: CardInstance[];
+	graveyard: CardInstance[];
+	exile: CardInstance[];
+	player: PlayerState;
+	cardLookup?: (id: ScryfallId) => Card | undefined;
+	onHover?: (instanceId: number | null) => void;
+	onClick?: (instanceId: number) => void;
+	onDraw: () => void;
+	onUntapAll: () => void;
+	onMulligan: () => void;
+	onReset: () => void;
+	onAdjustLife: (amount: number) => void;
+	onAdjustPoison: (amount: number) => void;
+}
+
+export function GoldfishSidebar({
+	library,
+	graveyard,
+	exile,
+	player,
+	cardLookup,
+	onHover,
+	onClick,
+	onDraw,
+	onUntapAll,
+	onMulligan,
+	onReset,
+	onAdjustLife,
+	onAdjustPoison,
+}: GoldfishSidebarProps) {
+	return (
+		<div className="w-48 flex flex-col gap-3 p-2 bg-gray-100 dark:bg-slate-900 rounded-lg overflow-y-auto overflow-x-hidden">
+			{/* Library */}
+			<div className="rounded-lg border-2 border-dashed border-gray-300 dark:border-slate-600 bg-gray-50 dark:bg-slate-800/50 p-2">
+				<div className="flex items-center justify-between mb-2">
+					<span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+						Library ({library.length})
+					</span>
+					<span className="text-xs text-gray-500 dark:text-gray-400">
+						D to draw
+					</span>
+				</div>
+				{library.length > 0 ? (
+					<div className="w-16">
+						<GoldfishLibraryCard topCard={library[0]} onDraw={onDraw} />
+					</div>
+				) : (
+					<div className="w-16 aspect-[5/7] rounded-[4.75%/3.5%] border-2 border-dashed border-gray-300 dark:border-slate-600" />
+				)}
+			</div>
+
+			{/* Graveyard */}
+			<GoldfishPile
+				zone="graveyard"
+				label="Graveyard"
+				cards={graveyard}
+				cardLookup={cardLookup}
+				onHover={onHover}
+				onClick={onClick}
+			/>
+
+			{/* Exile */}
+			<GoldfishPile
+				zone="exile"
+				label="Exile"
+				cards={exile}
+				cardLookup={cardLookup}
+				onHover={onHover}
+				onClick={onClick}
+			/>
+
+			{/* Player Stats */}
+			<div className="space-y-2">
+				{/* Life */}
+				<div className="flex items-center justify-between p-2 rounded bg-gray-50 dark:bg-slate-800">
+					<button
+						type="button"
+						onClick={() => onAdjustLife(-1)}
+						className="p-1 rounded hover:bg-gray-200 dark:hover:bg-slate-700"
+						aria-label="Decrease life"
+					>
+						<Minus className="w-4 h-4" />
+					</button>
+					<span className="text-lg font-bold text-gray-700 dark:text-gray-200">
+						{player.life}
+					</span>
+					<button
+						type="button"
+						onClick={() => onAdjustLife(1)}
+						className="p-1 rounded hover:bg-gray-200 dark:hover:bg-slate-700"
+						aria-label="Increase life"
+					>
+						<Plus className="w-4 h-4" />
+					</button>
+				</div>
+
+				{/* Poison */}
+				<div className="flex items-center justify-between p-2 rounded bg-gray-50 dark:bg-slate-800">
+					<button
+						type="button"
+						onClick={() => onAdjustPoison(-1)}
+						className="p-1 rounded hover:bg-gray-200 dark:hover:bg-slate-700"
+						aria-label="Decrease poison"
+					>
+						<Minus className="w-4 h-4" />
+					</button>
+					<span className="flex items-center gap-1 text-lg font-bold text-green-600 dark:text-green-400">
+						<Droplet className="w-4 h-4" />
+						{player.poison}
+					</span>
+					<button
+						type="button"
+						onClick={() => onAdjustPoison(1)}
+						className="p-1 rounded hover:bg-gray-200 dark:hover:bg-slate-700"
+						aria-label="Increase poison"
+					>
+						<Plus className="w-4 h-4" />
+					</button>
+				</div>
+			</div>
+
+			{/* Actions */}
+			<div className="space-y-2">
+				<button
+					type="button"
+					onClick={onUntapAll}
+					className="w-full flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium rounded bg-blue-600 text-white hover:bg-blue-700"
+				>
+					<RotateCcw className="w-4 h-4" />
+					Untap All (U)
+				</button>
+				<button
+					type="button"
+					onClick={onMulligan}
+					className="w-full flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium rounded bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-slate-600"
+				>
+					<RefreshCw className="w-4 h-4" />
+					Mulligan
+				</button>
+				<button
+					type="button"
+					onClick={onReset}
+					className="w-full px-3 py-2 text-sm font-medium rounded bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 hover:bg-red-200 dark:hover:bg-red-900/50"
+				>
+					Reset Game
+				</button>
+			</div>
+
+			{/* Keyboard hints */}
+			<div className="text-xs text-gray-400 dark:text-gray-500 space-y-1">
+				<p>T/Space: tap • F: flip</p>
+				<p>M: morph • G: graveyard</p>
+				<p>E: exile • H: hand • B: play</p>
+			</div>
+		</div>
+	);
+}

src/components/deck/goldfish/index.ts

···
+export { GoldfishBattlefield } from "./GoldfishBattlefield";
+export { GoldfishBoard } from "./GoldfishBoard";
+export { GoldfishCard } from "./GoldfishCard";
+export { GoldfishHand } from "./GoldfishHand";
+export { GoldfishPile } from "./GoldfishPile";
+export { GoldfishSidebar } from "./GoldfishSidebar";

src/lib/goldfish/__tests__/engine.test.ts

···
 			graveyard: [],
 			exile: [],
 			hoveredId: null,
+			nextZIndex: 1,
 			player: { life: 20, poison: 0, counters: {} },
 		};
 
···
 		let state = createInitialState(deck, createTestRng());
 		const cardId = state.hand[0].instanceId;
 
-		state = moveCard(state, cardId, "battlefield", { x: 200, y: 300 });
+		state = moveCard(state, cardId, "battlefield", {
+			position: { x: 200, y: 300 },
+		});
 
 		expect(state.battlefield[0].position).toEqual({ x: 200, y: 300 });
 	});
···
 		const deck = mockDeck(10);
 		let state = createInitialState(deck, createTestRng());
 		state = moveCard(state, state.hand[0].instanceId, "battlefield", {
-			x: 200,
-			y: 300,
+			position: { x: 200, y: 300 },
 		});
 		const cardId = state.battlefield[0].instanceId;
 
···
 		const deck = mockDeck(10);
 		let state = createInitialState(deck, createTestRng());
 		state = moveCard(state, state.hand[0].instanceId, "battlefield", {
-			x: 100,
-			y: 100,
+			position: { x: 100, y: 100 },
 		});
 		const cardId = state.battlefield[0].instanceId;
 
-		state = moveCard(state, cardId, "battlefield", { x: 500, y: 600 });
+		state = moveCard(state, cardId, "battlefield", {
+			position: { x: 500, y: 600 },
+		});
 
 		expect(state.battlefield[0].position).toEqual({ x: 500, y: 600 });
 	});

src/lib/goldfish/engine.ts

···
 		isTapped: false,
 		isFaceDown: false,
 		faceIndex: 0,
+		zIndex: 0,
 		counters: {},
 		position: undefined,
 	}));
···
 	}));
 }
 
+export interface MoveCardOptions {
+	position?: { x: number; y: number };
+	faceDown?: boolean;
+}
+
 export function moveCard(
 	state: GameState,
 	instanceId: number,
 	toZone: Zone,
-	position?: { x: number; y: number },
+	options: MoveCardOptions = {},
 ): GameState {
+	const { position, faceDown } = options;
 	const found = findCard(state, instanceId);
 	if (!found) return state;
 
···
 
 	if (fromZone === toZone) {
 		if (toZone === "battlefield" && position) {
-			return updateCardInState(state, instanceId, (c) => ({
-				...c,
-				position,
-			}));
+			// Moving within battlefield - bring to front
+			return {
+				...updateCardInState(state, instanceId, (c) => ({
+					...c,
+					position,
+					zIndex: state.nextZIndex,
+				})),
+				nextZIndex: state.nextZIndex + 1,
+			};
 		}
 		return state;
 	}
 
 	const movedCard: CardInstance =
 		toZone === "battlefield"
-			? { ...card, position: position ?? { x: 100, y: 100 } }
-			: { ...card, position: undefined };
+			? {
+					...card,
+					position: position ?? { x: 100, y: 100 },
+					zIndex: state.nextZIndex,
+					isFaceDown: faceDown ?? card.isFaceDown,
+				}
+			: {
+					...card,
+					position: undefined,
+					isFaceDown: faceDown ?? card.isFaceDown,
+				};
 
 	return {
 		...state,
 		[fromZone]: state[fromZone].filter((c) => c.instanceId !== instanceId),
 		[toZone]: [...state[toZone], movedCard],
+		nextZIndex:
+			toZone === "battlefield" ? state.nextZIndex + 1 : state.nextZIndex,
 	};
 }
 

src/lib/goldfish/types.ts

···
 	isFaceDown: boolean;
 	faceIndex: number;
 	position?: { x: number; y: number };
+	zIndex: number;
 	counters: Record<string, number>;
 }
 
···
 	graveyard: CardInstance[];
 	exile: CardInstance[];
 	hoveredId: number | null;
+	nextZIndex: number;
 	player: PlayerState;
 }
 
···
 		isTapped: false,
 		isFaceDown: false,
 		faceIndex: 0,
+		zIndex: 0,
 		counters: {},
 	};
 }
···
 		graveyard: [],
 		exile: [],
 		hoveredId: null,
+		nextZIndex: 1,
 		player: createPlayerState(startingLife),
 	};
 }

src/lib/goldfish/useGoldfishGame.ts

···
 	moveCard: (
 		instanceId: number,
 		toZone: Zone,
-		position?: { x: number; y: number },
+		options?: { position?: { x: number; y: number }; faceDown?: boolean },
 	) => void;
 	setHoveredCard: (instanceId: number | null) => void;
 	addCounter: (
···
 			cycleFace: (id, maxFaces) =>
 				setState((s) => engine.cycleFace(s, id, maxFaces)),
 			toggleFaceDown: (id) => setState((s) => engine.toggleFaceDown(s, id)),
-			moveCard: (id, zone, pos) =>
-				setState((s) => engine.moveCard(s, id, zone, pos)),
+			moveCard: (id, zone, opts) =>
+				setState((s) => engine.moveCard(s, id, zone, opts)),
 			setHoveredCard: (id) => setState((s) => engine.setHoveredCard(s, id)),
 			addCounter: (id, type, amount) =>
 				setState((s) => engine.addCounter(s, id, type, amount)),

src/routeTree.gen.ts

···
 import { Route as ProfileDidIndexRouteImport } from './routes/profile/$did/index'
 import { Route as ProfileDidDeckRkeyRouteImport } from './routes/profile/$did/deck/$rkey'
 import { Route as ProfileDidDeckRkeyIndexRouteImport } from './routes/profile/$did/deck/$rkey/index'
+import { Route as ProfileDidDeckRkeyPlayRouteImport } from './routes/profile/$did/deck/$rkey/play'
 import { Route as ProfileDidDeckRkeyBulkEditRouteImport } from './routes/profile/$did/deck/$rkey/bulk-edit'
 
 const SigninRoute = SigninRouteImport.update({
···
 const ProfileDidDeckRkeyIndexRoute = ProfileDidDeckRkeyIndexRouteImport.update({
   id: '/',
   path: '/',
+  getParentRoute: () => ProfileDidDeckRkeyRoute,
+} as any)
+const ProfileDidDeckRkeyPlayRoute = ProfileDidDeckRkeyPlayRouteImport.update({
+  id: '/play',
+  path: '/play',
   getParentRoute: () => ProfileDidDeckRkeyRoute,
 } as any)
 const ProfileDidDeckRkeyBulkEditRoute =
···
   '/profile/$did': typeof ProfileDidIndexRoute
   '/profile/$did/deck/$rkey': typeof ProfileDidDeckRkeyRouteWithChildren
   '/profile/$did/deck/$rkey/bulk-edit': typeof ProfileDidDeckRkeyBulkEditRoute
+  '/profile/$did/deck/$rkey/play': typeof ProfileDidDeckRkeyPlayRoute
   '/profile/$did/deck/$rkey/': typeof ProfileDidDeckRkeyIndexRoute
 }
 export interface FileRoutesByTo {
···
   '/cards': typeof CardsIndexRoute
   '/profile/$did': typeof ProfileDidIndexRoute
   '/profile/$did/deck/$rkey/bulk-edit': typeof ProfileDidDeckRkeyBulkEditRoute
+  '/profile/$did/deck/$rkey/play': typeof ProfileDidDeckRkeyPlayRoute
   '/profile/$did/deck/$rkey': typeof ProfileDidDeckRkeyIndexRoute
 }
 export interface FileRoutesById {
···
   '/profile/$did/': typeof ProfileDidIndexRoute
   '/profile/$did/deck/$rkey': typeof ProfileDidDeckRkeyRouteWithChildren
   '/profile/$did/deck/$rkey/bulk-edit': typeof ProfileDidDeckRkeyBulkEditRoute
+  '/profile/$did/deck/$rkey/play': typeof ProfileDidDeckRkeyPlayRoute
   '/profile/$did/deck/$rkey/': typeof ProfileDidDeckRkeyIndexRoute
 }
 export interface FileRouteTypes {
···
     | '/profile/$did'
     | '/profile/$did/deck/$rkey'
     | '/profile/$did/deck/$rkey/bulk-edit'
+    | '/profile/$did/deck/$rkey/play'
     | '/profile/$did/deck/$rkey/'
   fileRoutesByTo: FileRoutesByTo
   to:
···
     | '/cards'
     | '/profile/$did'
     | '/profile/$did/deck/$rkey/bulk-edit'
+    | '/profile/$did/deck/$rkey/play'
     | '/profile/$did/deck/$rkey'
   id:
     | '__root__'
···
     | '/profile/$did/'
     | '/profile/$did/deck/$rkey'
     | '/profile/$did/deck/$rkey/bulk-edit'
+    | '/profile/$did/deck/$rkey/play'
     | '/profile/$did/deck/$rkey/'
   fileRoutesById: FileRoutesById
 }
···
       preLoaderRoute: typeof ProfileDidDeckRkeyIndexRouteImport
       parentRoute: typeof ProfileDidDeckRkeyRoute
     }
+    '/profile/$did/deck/$rkey/play': {
+      id: '/profile/$did/deck/$rkey/play'
+      path: '/play'
+      fullPath: '/profile/$did/deck/$rkey/play'
+      preLoaderRoute: typeof ProfileDidDeckRkeyPlayRouteImport
+      parentRoute: typeof ProfileDidDeckRkeyRoute
+    }
     '/profile/$did/deck/$rkey/bulk-edit': {
       id: '/profile/$did/deck/$rkey/bulk-edit'
       path: '/bulk-edit'
···
 
 interface ProfileDidDeckRkeyRouteChildren {
   ProfileDidDeckRkeyBulkEditRoute: typeof ProfileDidDeckRkeyBulkEditRoute
+  ProfileDidDeckRkeyPlayRoute: typeof ProfileDidDeckRkeyPlayRoute
   ProfileDidDeckRkeyIndexRoute: typeof ProfileDidDeckRkeyIndexRoute
 }
 
 const ProfileDidDeckRkeyRouteChildren: ProfileDidDeckRkeyRouteChildren = {
   ProfileDidDeckRkeyBulkEditRoute: ProfileDidDeckRkeyBulkEditRoute,
+  ProfileDidDeckRkeyPlayRoute: ProfileDidDeckRkeyPlayRoute,
   ProfileDidDeckRkeyIndexRoute: ProfileDidDeckRkeyIndexRoute,
 }
 

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

···
 			</div>
 
 			{/* Sticky header with search */}
-			{isOwner && (
-				<div className="sticky top-0 z-10 bg-white dark:bg-slate-900 border-b border-gray-200 dark:border-slate-800 shadow-sm">
-					<div className="max-w-7xl 2xl:max-w-[96rem] mx-auto px-6 py-3 flex items-center justify-between gap-4">
-						<div className="flex items-center gap-2">
-							<DeckActionsMenu
-								deck={deck}
-								rkey={asRkey(rkey)}
-								onUpdateDeck={updateDeck}
-								onCardsChanged={handleCardsChanged}
-							/>
+			<div className="sticky top-0 z-10 bg-white dark:bg-slate-900 border-b border-gray-200 dark:border-slate-800 shadow-sm">
+				<div className="max-w-7xl 2xl:max-w-[96rem] mx-auto px-6 py-3 flex items-center justify-between gap-4">
+					<div className="flex items-center gap-2">
+						<DeckActionsMenu
+							deck={deck}
+							did={did}
+							rkey={asRkey(rkey)}
+							onUpdateDeck={isOwner ? updateDeck : undefined}
+							onCardsChanged={handleCardsChanged}
+							readOnly={!isOwner}
+						/>
+						{isOwner && (
 							<Link
 								to="/profile/$did/deck/$rkey/bulk-edit"
 								params={{ did, rkey }}
···
 							>
 								Bulk Edit
 							</Link>
-						</div>
+						)}
+					</div>
+					{isOwner && (
 						<div className="w-full max-w-md">
 							<CardSearchAutocomplete
 								deck={deck}
···
 								onCardHover={handleCardHover}
 							/>
 						</div>
-					</div>
+					)}
 				</div>
-			)}
+			</div>
 
 			{/* Trash drop zone - only show while dragging, hide on mobile */}
 			<div className="hidden md:block">

src/routes/profile/$did/deck/$rkey/play.tsx

···
+import type { Did } from "@atcute/lexicons";
+import { useQueries, useSuspenseQuery } from "@tanstack/react-query";
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { ArrowLeft } from "lucide-react";
+import { useCallback } from "react";
+import { GoldfishBoard } from "@/components/deck/goldfish";
+import { asRkey } from "@/lib/atproto-client";
+import { prefetchCards } from "@/lib/card-prefetch";
+import { getDeckQueryOptions } from "@/lib/deck-queries";
+import { getCardsInSection } from "@/lib/deck-types";
+import { combineCardQueries, getCardByIdQueryOptions } from "@/lib/queries";
+import type { ScryfallId } from "@/lib/scryfall-types";
+
+export const Route = createFileRoute("/profile/$did/deck/$rkey/play")({
+	component: PlaytestPage,
+	loader: async ({ context, params }) => {
+		const deck = await context.queryClient.ensureQueryData(
+			getDeckQueryOptions(params.did as Did, asRkey(params.rkey)),
+		);
+
+		const cardIds = deck.cards.map((card) => card.scryfallId);
+		await prefetchCards(context.queryClient, cardIds);
+
+		return deck;
+	},
+	head: ({ loaderData: deck }) => ({
+		meta: [
+			{
+				title: deck
+					? `Playtest: ${deck.name} | DeckBelcher`
+					: "Playtest | DeckBelcher",
+			},
+		],
+	}),
+});
+
+function PlaytestPage() {
+	const { did, rkey } = Route.useParams();
+	const { data: deck } = useSuspenseQuery(
+		getDeckQueryOptions(did as Did, asRkey(rkey)),
+	);
+
+	const playtestCards = [
+		...getCardsInSection(deck, "commander"),
+		...getCardsInSection(deck, "mainboard"),
+	];
+
+	const cardMap = useQueries({
+		queries: playtestCards.map((card) =>
+			getCardByIdQueryOptions(card.scryfallId),
+		),
+		combine: combineCardQueries,
+	});
+
+	const getCard = useCallback((id: ScryfallId) => cardMap?.get(id), [cardMap]);
+
+	const startingLife = deck.format === "commander" ? 40 : 20;
+
+	if (!cardMap) {
+		return (
+			<div className="h-screen flex items-center justify-center bg-white dark:bg-slate-950">
+				<span className="text-gray-500 dark:text-gray-400">
+					Loading cards...
+				</span>
+			</div>
+		);
+	}
+
+	return (
+		<div className="h-screen flex flex-col bg-white dark:bg-slate-950">
+			<header className="flex items-center gap-4 px-4 py-2 border-b border-gray-200 dark:border-slate-800">
+				<Link
+					to="/profile/$did/deck/$rkey"
+					params={{ did, rkey }}
+					className="flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
+				>
+					<ArrowLeft className="w-4 h-4" />
+					Back to Editor
+				</Link>
+				<h1 className="text-lg font-semibold text-gray-900 dark:text-white">
+					{deck.name}
+				</h1>
+			</header>
+			<div className="flex-1 overflow-hidden">
+				<GoldfishBoard
+					deck={playtestCards}
+					cardLookup={getCard}
+					startingLife={startingLife}
+				/>
+			</div>
+		</div>
+	);
+}