From 670b574b93603b0c70b8044e7b8f5205f33cb3f2 Mon Sep 17 00:00:00 2001
From: Lakshmi Tanmay <lakshmi@voltcrash.com>
Date: Mon, 28 Sep 2026 11:41:08 +0530
Subject: [PATCH] =?UTF-8?q?feat:=20add=20a=20daily=20Pok=C3=A9mon=20guessi?=
 =?UTF-8?q?ng=20puzzle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Everyone gets the same Pokémon each day and eight guesses. Each guess shows whether its types match and whether the answer's generation, height, weight and stat total are higher or lower, with icons and text as well as color. After three misses the answer's stat shape appears as a hint. Progress and streaks are kept on the device, and the result copies as a spoiler-free grid.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 src/lib/components/daily/guess-input.svelte   |  86 ++++++
 src/lib/components/site/search-trigger.svelte |   2 +-
 src/lib/components/site/site-header.svelte    |   4 +-
 src/lib/daily/game.test.ts                    |  67 +++++
 src/lib/daily/game.ts                         | 127 +++++++++
 src/lib/nav.ts                                |   1 +
 src/routes/daily/+page.svelte                 | 252 ++++++++++++++++++
 7 files changed, 536 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/components/daily/guess-input.svelte
 create mode 100644 src/lib/daily/game.test.ts
 create mode 100644 src/lib/daily/game.ts
 create mode 100644 src/routes/daily/+page.svelte

diff --git a/src/lib/components/daily/guess-input.svelte b/src/lib/components/daily/guess-input.svelte
new file mode 100644
index 0000000..1eff571
--- /dev/null
+++ b/src/lib/components/daily/guess-input.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+	import { Input } from "$lib/components/ui/input/index.js";
+	import { DEFAULT_QUERY, queryDex, type DexListEntry } from "$lib/dex/list.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		pool,
+		exclude,
+		disabled = false,
+		onguess,
+	}: {
+		pool: DexListEntry[];
+		exclude: Set<number>;
+		disabled?: boolean;
+		onguess: (entry: DexListEntry) => void;
+	} = $props();
+
+	let text = $state("");
+	let highlighted = $state(0);
+	let input = $state<HTMLInputElement | null>(null);
+
+	// Only names are searched here; filters like spe>100 would give the answer away.
+	const options = $derived(
+		text.trim() && !/[:<>=]/.test(text)
+			? queryDex(pool, { ...DEFAULT_QUERY, q: text })
+					.filter((e) => !exclude.has(e.id))
+					.slice(0, 6)
+			: [],
+	);
+
+	function submit(entry: DexListEntry | undefined) {
+		if (!entry) return;
+		onguess(entry);
+		text = "";
+		highlighted = 0;
+		input?.focus();
+	}
+
+	function onkeydown(event: KeyboardEvent) {
+		if (event.key === "ArrowDown") highlighted = Math.min(options.length - 1, highlighted + 1);
+		else if (event.key === "ArrowUp") highlighted = Math.max(0, highlighted - 1);
+		else if (event.key === "Enter") submit(options[highlighted]);
+		else if (event.key === "Escape") text = "";
+		else return;
+		event.preventDefault();
+	}
+</script>
+
+<div class="relative">
+	<Input
+		bind:ref={input}
+		bind:value={text}
+		oninput={() => (highlighted = 0)}
+		{onkeydown}
+		{disabled}
+		role="combobox"
+		aria-expanded={options.length > 0}
+		aria-controls="daily-options"
+		aria-activedescendant={options.length ? `daily-option-${options[highlighted]?.id}` : undefined}
+		aria-autocomplete="list"
+		aria-label="Guess a Pokémon"
+		placeholder={disabled ? "Come back tomorrow for a new Pokémon" : "Type a Pokémon’s name"}
+		autocomplete="off"
+		spellcheck={false}
+		class="h-11 rounded-lg bg-card text-base md:text-base"
+	/>
+	{#if options.length}
+		<ul id="daily-options" role="listbox" aria-label="Matching Pokémon" class="absolute inset-x-0 top-full z-20 mt-1 overflow-hidden rounded-lg border bg-popover py-1 shadow-lg">
+			{#each options as entry, i (entry.id)}
+				<li
+					id="daily-option-{entry.id}"
+					role="option"
+					aria-selected={i === highlighted}
+					class={cn("cursor-pointer px-3 py-2", i === highlighted && "bg-muted")}
+					onpointerenter={() => (highlighted = i)}
+					onpointerdown={(event) => {
+						event.preventDefault();
+						submit(entry);
+					}}
+				>
+					{entry.name}
+				</li>
+			{/each}
+		</ul>
+	{/if}
+</div>
diff --git a/src/lib/components/site/search-trigger.svelte b/src/lib/components/site/search-trigger.svelte
index 7b44ffb..9dd4a86 100644
--- a/src/lib/components/site/search-trigger.svelte
+++ b/src/lib/components/site/search-trigger.svelte
@@ -15,7 +15,7 @@
 	variant="outline"
 	size="sm"
 	onclick={() => (palette.open = true)}
-	class="hidden w-60 justify-start gap-2 bg-background text-muted-foreground sm:flex dark:bg-background"
+	class="hidden w-60 justify-start gap-2 lg:w-44 xl:w-60 bg-background text-muted-foreground sm:flex dark:bg-background"
 >
 	<SearchIcon />
 	Search Pokémon
diff --git a/src/lib/components/site/site-header.svelte b/src/lib/components/site/site-header.svelte
index fa2a040..ed7f437 100644
--- a/src/lib/components/site/site-header.svelte
+++ b/src/lib/components/site/site-header.svelte
@@ -17,14 +17,14 @@
 </script>
 
 <header class="sticky top-0 z-40 border-b bg-card">
-	<div class="mx-auto flex h-14 max-w-7xl items-center gap-8 px-4 sm:px-6">
+	<div class="mx-auto flex h-14 max-w-7xl items-center gap-6 px-4 sm:px-6 xl:gap-8">
 		<a href="/" class="flex items-center gap-2 rounded-md" aria-label="Dexa home">
 			<Logo class="size-6" />
 			<span class="font-display text-lg font-bold tracking-tight">dexa</span>
 		</a>
 
 		<nav aria-label="Main" class="hidden self-stretch lg:block">
-			<ul class="flex h-full items-stretch gap-5">
+			<ul class="flex h-full items-stretch gap-4 xl:gap-5">
 				{#each navItems as item (item.href)}
 					<li>
 						<a
diff --git a/src/lib/daily/game.test.ts b/src/lib/daily/game.test.ts
new file mode 100644
index 0000000..74eb266
--- /dev/null
+++ b/src/lib/daily/game.test.ts
@@ -0,0 +1,67 @@
+import { describe, expect, it } from "vite-plus/test";
+import { answerFor, compareGuess, dateKey, puzzleNumber, shareText } from "./game.js";
+import type { BaseStats, TypeName } from "$lib/pokemon/types.js";
+
+const mon = (
+  types: TypeName[],
+  generation: number,
+  height: number,
+  weight: number,
+  stats: BaseStats,
+) => ({
+  types,
+  generation,
+  height,
+  weight,
+  stats,
+});
+
+const charizard = mon(["fire", "flying"], 1, 17, 905, [78, 84, 78, 109, 85, 100]);
+const talonflame = mon(["fire", "flying"], 6, 12, 245, [78, 81, 71, 74, 69, 126]);
+const moltres = mon(["fire", "flying"], 1, 20, 600, [90, 100, 90, 125, 85, 90]);
+const pidgeot = mon(["normal", "flying"], 1, 15, 395, [83, 80, 75, 70, 70, 101]);
+const gyarados = mon(["water", "flying"], 1, 65, 2350, [95, 125, 79, 60, 100, 81]);
+
+describe("puzzle dates", () => {
+  it("numbers puzzles by local calendar day", () => {
+    expect(puzzleNumber(new Date(2026, 8, 28, 0, 5))).toBe(1);
+    expect(puzzleNumber(new Date(2026, 8, 28, 23, 55))).toBe(1);
+    expect(puzzleNumber(new Date(2026, 9, 1, 9))).toBe(4);
+    expect(dateKey(new Date(2026, 0, 5))).toBe("2026-01-05");
+  });
+});
+
+describe("answerFor", () => {
+  const pool = Array.from({ length: 50 }, (_, i) => ({ speciesId: i + 1 }));
+
+  it("is the same for everyone on a day and cycles through every species", () => {
+    expect(answerFor(7, [...pool].reverse())).toEqual(answerFor(7, pool));
+    const seen = new Set(Array.from({ length: 50 }, (_, i) => answerFor(i + 1, pool).speciesId));
+    expect(seen.size).toBe(50);
+    expect(answerFor(51, pool)).toBe(answerFor(1, pool));
+  });
+});
+
+describe("compareGuess", () => {
+  const hints = (guess: ReturnType<typeof mon>) =>
+    compareGuess(guess, charizard).map((c) => c.hint);
+
+  it("marks exact, misplaced and missing types", () => {
+    expect(hints(talonflame).slice(0, 2)).toEqual(["match", "match"]);
+    expect(hints(pidgeot).slice(0, 2)).toEqual(["miss", "match"]);
+    expect(compareGuess(mon(["flying"], 1, 1, 1, charizard.stats), charizard)[0].hint).toBe("near");
+  });
+
+  it("points toward higher or lower numbers", () => {
+    expect(hints(talonflame).slice(2)).toEqual(["lower", "higher", "higher", "higher"]);
+    expect(hints(moltres).slice(2)).toEqual(["match", "lower", "higher", "lower"]);
+    expect(hints(gyarados)[3]).toBe("lower");
+  });
+});
+
+describe("shareText", () => {
+  it("summarises guesses without names", () => {
+    const rows = [compareGuess(pidgeot, charizard), compareGuess(charizard, charizard)];
+    expect(shareText(3, rows, true)).toBe("Dexa daily #3 2/8\n⬛🟩🟩🔼🔼🔼\n🟩🟩🟩🟩🟩🟩");
+  });
+});
diff --git a/src/lib/daily/game.ts b/src/lib/daily/game.ts
new file mode 100644
index 0000000..7ab6b7c
--- /dev/null
+++ b/src/lib/daily/game.ts
@@ -0,0 +1,127 @@
+import type { DexListEntry } from "$lib/dex/list.js";
+import { statTotal } from "$lib/dex/list.js";
+import { titleCase } from "$lib/pokemon/format.js";
+
+export const MAX_GUESSES = 8;
+
+/** Puzzle 1 was played on this local date. */
+const FIRST_DAY = Date.UTC(2026, 8, 28);
+const DAY = 86_400_000;
+
+/** Local calendar date as YYYY-MM-DD, so the puzzle turns over at each player's midnight. */
+export function dateKey(date: Date): string {
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+
+export function puzzleNumber(date: Date): number {
+  const local = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate());
+  return Math.floor((local - FIRST_DAY) / DAY) + 1;
+}
+
+function mulberry32(seed: number) {
+  return () => {
+    seed = (seed + 0x6d2b79f5) | 0;
+    let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4_294_967_296;
+  };
+}
+
+/**
+ * The answer for a puzzle. A fixed shuffle of the whole dex is walked one step a day, so no
+ * Pokémon repeats until every species has had its turn.
+ */
+export function answerFor<T extends Pick<DexListEntry, "speciesId">>(
+  puzzle: number,
+  pool: readonly T[],
+): T {
+  const sorted = [...pool].sort((a, b) => a.speciesId - b.speciesId);
+  const random = mulberry32(0xdec5a);
+  for (let i = sorted.length - 1; i > 0; i--) {
+    const j = Math.floor(random() * (i + 1));
+    [sorted[i], sorted[j]] = [sorted[j], sorted[i]];
+  }
+  const index = (((puzzle - 1) % sorted.length) + sorted.length) % sorted.length;
+  return sorted[index];
+}
+
+/** match: same; near: the type is the answer's other type; higher/lower: the answer's value is. */
+export type Hint = "match" | "near" | "miss" | "higher" | "lower";
+
+export interface Clue {
+  key: "type1" | "type2" | "generation" | "height" | "weight" | "total";
+  label: string;
+  value: string;
+  hint: Hint;
+}
+
+type Guessable = Pick<DexListEntry, "types" | "generation" | "height" | "weight" | "stats">;
+
+function numeric(guess: number, answer: number): Hint {
+  if (guess === answer) return "match";
+  return answer > guess ? "higher" : "lower";
+}
+
+function typeHint(guess: Guessable, answer: Guessable, slot: 0 | 1): Hint {
+  const type = guess.types[slot];
+  if (type === answer.types[slot]) return "match";
+  if (type && answer.types.includes(type)) return "near";
+  return "miss";
+}
+
+export function compareGuess(guess: Guessable, answer: Guessable): Clue[] {
+  return [
+    {
+      key: "type1",
+      label: "Type 1",
+      value: titleCase(guess.types[0]),
+      hint: typeHint(guess, answer, 0),
+    },
+    {
+      key: "type2",
+      label: "Type 2",
+      value: guess.types[1] ? titleCase(guess.types[1]) : "None",
+      hint: typeHint(guess, answer, 1),
+    },
+    {
+      key: "generation",
+      label: "Gen",
+      value: String(guess.generation),
+      hint: numeric(guess.generation, answer.generation),
+    },
+    {
+      key: "height",
+      label: "Height",
+      value: `${guess.height / 10} m`,
+      hint: numeric(guess.height, answer.height),
+    },
+    {
+      key: "weight",
+      label: "Weight",
+      value: `${guess.weight / 10} kg`,
+      hint: numeric(guess.weight, answer.weight),
+    },
+    {
+      key: "total",
+      label: "Stat total",
+      value: String(statTotal(guess)),
+      hint: numeric(statTotal(guess), statTotal(answer)),
+    },
+  ];
+}
+
+const EMOJI: Record<Hint, string> = {
+  match: "🟩",
+  near: "🟨",
+  miss: "⬛",
+  higher: "🔼",
+  lower: "🔽",
+};
+
+/** A spoiler-free summary to paste into a chat. */
+export function shareText(puzzle: number, rows: Clue[][], won: boolean): string {
+  const score = won ? `${rows.length}/${MAX_GUESSES}` : `X/${MAX_GUESSES}`;
+  const grid = rows.map((row) => row.map((clue) => EMOJI[clue.hint]).join("")).join("\n");
+  return `Dexa daily #${puzzle} ${score}\n${grid}`;
+}
diff --git a/src/lib/nav.ts b/src/lib/nav.ts
index dc3a0c2..301cbf5 100644
--- a/src/lib/nav.ts
+++ b/src/lib/nav.ts
@@ -11,5 +11,6 @@ export const navItems: NavItem[] = [
   { href: "/types", label: "Types" },
   { href: "/team", label: "Team builder" },
   { href: "/compare", label: "Compare" },
+  { href: "/daily", label: "Daily" },
   { href: "/quiz", label: "Quiz" },
 ];
diff --git a/src/routes/daily/+page.svelte b/src/routes/daily/+page.svelte
new file mode 100644
index 0000000..22ebd52
--- /dev/null
+++ b/src/routes/daily/+page.svelte
@@ -0,0 +1,252 @@
+<script lang="ts">
+	import ArrowDownIcon from "@lucide/svelte/icons/arrow-down";
+	import ArrowUpIcon from "@lucide/svelte/icons/arrow-up";
+	import CheckIcon from "@lucide/svelte/icons/check";
+	import CopyIcon from "@lucide/svelte/icons/copy";
+	import XIcon from "@lucide/svelte/icons/x";
+	import { onMount } from "svelte";
+	import { toast } from "svelte-sonner";
+	import GuessInput from "$lib/components/daily/guess-input.svelte";
+	import PokemonArt from "$lib/components/pokemon/pokemon-art.svelte";
+	import StatShape from "$lib/components/pokemon/stat-shape.svelte";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import {
+		MAX_GUESSES,
+		answerFor,
+		compareGuess,
+		dateKey,
+		puzzleNumber,
+		shareText,
+		type Hint,
+	} from "$lib/daily/game.js";
+	import { loadDexList } from "$lib/dex/client.js";
+	import type { DexListEntry } from "$lib/dex/list.js";
+	import { dexNumber } from "$lib/pokemon/format.js";
+	import { cn } from "$lib/utils.js";
+
+	const STORAGE_KEY = "dexa:daily";
+	/** Misses before the answer's stat shape is shown as a hint. */
+	const SHAPE_HINT_AFTER = 3;
+
+	type History = Record<string, { guesses: string[]; won: boolean }>;
+
+	let pool = $state<DexListEntry[]>([]);
+	let today = $state(new Date());
+	let guesses = $state<string[]>([]);
+	let history = $state<History>({});
+	let now = $state(Date.now());
+
+	const key = $derived(dateKey(today));
+	const puzzle = $derived(puzzleNumber(today));
+	const bySlug = $derived(new Map(pool.map((e) => [e.slug, e])));
+	const answer = $derived(pool.length ? answerFor(puzzle, pool) : undefined);
+	const guessed = $derived(guesses.flatMap((slug) => bySlug.get(slug) ?? []));
+	const rows = $derived(answer ? guessed.map((g) => compareGuess(g, answer)) : []);
+	const won = $derived(Boolean(answer && guesses.includes(answer.slug)));
+	const done = $derived(won || guesses.length >= MAX_GUESSES);
+	const streak = $derived.by(() => {
+		let count = 0;
+		const day = new Date(today);
+		// Today only breaks the streak once it's lost; an unfinished puzzle still counts from yesterday.
+		if (!history[dateKey(day)]?.won) day.setDate(day.getDate() - 1);
+		while (history[dateKey(day)]?.won) {
+			count++;
+			day.setDate(day.getDate() - 1);
+		}
+		return count;
+	});
+	const untilNext = $derived.by(() => {
+		const midnight = new Date(today);
+		midnight.setHours(24, 0, 0, 0);
+		const seconds = Math.max(0, Math.floor((midnight.getTime() - now) / 1000));
+		const pad = (n: number) => String(n).padStart(2, "0");
+		return `${Math.floor(seconds / 3600)}:${pad(Math.floor((seconds % 3600) / 60))}:${pad(seconds % 60)}`;
+	});
+
+	onMount(() => {
+		try {
+			history = JSON.parse(localStorage.getItem(STORAGE_KEY) ?? "{}") as History;
+		} catch {
+			history = {};
+		}
+		guesses = history[key]?.guesses ?? [];
+		loadDexList().then((list) => (pool = list.filter((e) => e.isDefault)));
+		const timer = setInterval(() => {
+			now = Date.now();
+			// Roll over to the next puzzle at local midnight.
+			if (dateKey(new Date(now)) !== key) location.reload();
+		}, 1000);
+		return () => clearInterval(timer);
+	});
+
+	function guess(entry: DexListEntry) {
+		if (done || guesses.includes(entry.slug)) return;
+		guesses = [...guesses, entry.slug];
+		history = { ...history, [key]: { guesses, won: entry.slug === answer?.slug } };
+		try {
+			localStorage.setItem(STORAGE_KEY, JSON.stringify(history));
+		} catch {
+			// Progress still lasts for this visit without storage.
+		}
+	}
+
+	async function share() {
+		try {
+			await navigator.clipboard.writeText(`${shareText(puzzle, rows, won)}\n${location.origin}/daily`);
+			toast.success("Result copied. It doesn’t name the Pokémon.");
+		} catch {
+			toast.error("Couldn’t copy the result.");
+		}
+	}
+
+	const HINT_TEXT: Record<Hint, string> = {
+		match: "correct",
+		near: "right type, other slot",
+		miss: "not it",
+		higher: "the answer is higher",
+		lower: "the answer is lower",
+	};
+</script>
+
+<svelte:head>
+	<title>Daily Pokémon | Dexa</title>
+	<meta name="description" content="Guess the Pokémon of the day in eight tries. Every guess shows how close its type, generation, size and stats are." />
+</svelte:head>
+
+{#snippet hintIcon(hint: Hint)}
+	{#if hint === "match"}
+		<CheckIcon class="size-3.5 shrink-0" />
+	{:else if hint === "higher"}
+		<ArrowUpIcon class="size-3.5 shrink-0" />
+	{:else if hint === "lower"}
+		<ArrowDownIcon class="size-3.5 shrink-0" />
+	{:else if hint === "miss"}
+		<XIcon class="size-3.5 shrink-0 opacity-60" />
+	{:else}
+		<span class="size-3.5 shrink-0 text-center text-xs leading-3.5 font-bold">~</span>
+	{/if}
+{/snippet}
+
+<div class="mx-auto max-w-4xl px-4 pt-10 pb-8 sm:px-6">
+	<div class="flex flex-wrap items-end justify-between gap-x-6 gap-y-2">
+		<h1 class="page-title">Daily Pokémon</h1>
+		<p class="text-muted-foreground tabular">
+			Puzzle {puzzle}
+			{#if streak}<span class="ml-3">Streak {streak}</span>{/if}
+		</p>
+	</div>
+	<p class="mt-2 max-w-prose text-muted-foreground">
+		One Pokémon a day, the same for everyone. You have {MAX_GUESSES} guesses, and each shows how close its types, generation, size and stat total are.
+	</p>
+
+	<ul class="mt-5 flex flex-wrap gap-x-5 gap-y-2 text-sm text-muted-foreground" aria-label="How to read clues">
+		<li class="flex items-center gap-1.5"><span class="clue match size-5">{@render hintIcon("match")}</span> Correct</li>
+		<li class="flex items-center gap-1.5"><span class="clue near size-5">{@render hintIcon("near")}</span> Right type, other slot</li>
+		<li class="flex items-center gap-1.5"><span class="clue higher size-5">{@render hintIcon("higher")}</span> Answer is higher</li>
+		<li class="flex items-center gap-1.5"><span class="clue lower size-5">{@render hintIcon("lower")}</span> Answer is lower</li>
+	</ul>
+
+	<div class="mt-6">
+		<GuessInput {pool} exclude={new Set(guessed.map((g) => g.id))} disabled={done || !pool.length} onguess={guess} />
+		<p class="mt-2 text-sm text-muted-foreground tabular" aria-live="polite">
+			{#if !done}{MAX_GUESSES - guesses.length} of {MAX_GUESSES} guesses left{/if}
+		</p>
+	</div>
+
+	{#if answer && !done && guesses.length >= SHAPE_HINT_AFTER}
+		<div class="mt-4 flex items-center gap-4 rounded-lg border bg-card p-4">
+			<StatShape stats={answer.stats} color="var(--foreground)" rings class="size-20" label="The answer’s stat shape" />
+			<p class="text-sm">
+				<span class="font-medium">Hint: its stat shape.</span>
+				<span class="text-muted-foreground">HP is at the top, physical stats on the right, special on the left and Speed at the bottom.</span>
+			</p>
+		</div>
+	{/if}
+
+	{#if done && answer}
+		<section aria-label="Result" class="mt-6 grid items-center gap-5 rounded-lg border bg-card p-5 sm:grid-cols-[8rem_minmax(0,1fr)]" style:--tint="var(--type-{answer.types[0]})">
+			<a href="/pokemon/{answer.slug}" class="tint-field block rounded-md p-2">
+				<PokemonArt id={answer.id} name={answer.name} width={256} widths={[192, 256]} sizes="8rem" eager />
+			</a>
+			<div>
+				<p class="text-sm text-muted-foreground">{won ? `Got it in ${guesses.length}.` : "Out of guesses. It was"}</p>
+				<p class="section-title mt-1">
+					<a href="/pokemon/{answer.slug}" class="hover:underline hover:underline-offset-4">{answer.name}</a>
+					<span class="ml-1 text-base font-normal text-muted-foreground tabular">{dexNumber(answer.speciesId)}</span>
+				</p>
+				<div class="mt-4 flex flex-wrap items-center gap-3">
+					<Button onclick={share}>
+						<CopyIcon />
+						Copy result
+					</Button>
+					<p class="text-sm text-muted-foreground tabular">Next Pokémon in {untilNext}</p>
+				</div>
+			</div>
+		</section>
+	{/if}
+
+	{#if rows.length}
+		<div class="mt-6 overflow-x-auto">
+			<table class="w-full min-w-xl border-separate border-spacing-y-1.5 text-sm">
+				<thead class="text-xs text-muted-foreground">
+					<tr>
+						<th scope="col" class="px-2 text-left font-medium">Guess</th>
+						{#each rows[0] as clue (clue.key)}
+							<th scope="col" class="px-1 font-medium">{clue.label}</th>
+						{/each}
+					</tr>
+				</thead>
+				<tbody>
+					{#each rows as row, i (guessed[i].id)}
+						<tr>
+							<th scope="row" class="rounded-l-md bg-card py-1 pr-2 pl-1 text-left font-medium">
+								<span class="flex items-center gap-2">
+									<PokemonArt id={guessed[i].id} name="" width={96} widths={[96]} sizes="36px" class="size-9" />
+									<span class="truncate">{guessed[i].name}</span>
+								</span>
+							</th>
+							{#each row as clue (clue.key)}
+								<td class="px-0.5">
+									<span class={cn("clue h-9 w-full px-1.5", clue.hint)}>
+										{@render hintIcon(clue.hint)}
+										<span class="truncate tabular">{clue.value}</span>
+										<span class="sr-only">, {HINT_TEXT[clue.hint]}</span>
+									</span>
+								</td>
+							{/each}
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.clue {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.25rem;
+		border-radius: calc(var(--radius) - 2px);
+		font-weight: 500;
+		background: var(--muted);
+		color: var(--muted-foreground);
+	}
+
+	.clue.match {
+		background: var(--stat-5);
+		color: #fff;
+	}
+
+	.clue.near {
+		background: var(--stat-3);
+		color: #16181d;
+	}
+
+	.clue.higher,
+	.clue.lower {
+		background: var(--secondary);
+		color: var(--foreground);
+	}
+</style>